.tinline-theme-index {
    width: 100%;
    color: #292722;
}

.tinline-theme-index *,
.tinline-theme-index *::before {
    box-sizing: border-box;
}

.tinline-banner {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    position: relative;
    isolation: isolate;
    background: #28231e;
    color: #fff;
}

.tinline-banner__slide {
    position: relative;
    height: auto;
}

.tinline-banner .tinline-banner__pagination {
    bottom: 12px;
    width: 100%;
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
}

.tinline-banner .tinline-banner__pagination .swiper-pagination-bullet {
    margin: 0 5px;
}

.tinline-banner__prev,
.tinline-banner__next {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 0%);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transform: translateY(-50%);
}

.tinline-banner__prev {
    left: 16px;
}

.tinline-banner__next {
    right: 16px;
}

.tinline-banner__prev[hidden],
.tinline-banner__next[hidden] {
    display: none;
}

.tinline-banner__prev:focus-visible,
.tinline-banner__next:focus-visible,
.tinline-banner .swiper-pagination-bullet:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.tinline-banner__media {
    aspect-ratio: 2.5 / 1;
    overflow: hidden;
}

.tinline-banner__media theme-image-describe-hover,
.tinline-process__photo theme-image-describe-hover {
    display: block;
    height: 100%;
}

.tinline-theme-index .image-content-block {
    height: 100%;
    margin: 0;
}

.tinline-theme-index picture {
    display: block;
    height: 100%;
}

.tinline-banner__media img,
.tinline-banner__media svg,
.tinline-process__photo img,
.tinline-process__photo svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tinline-banner__content {
    position: absolute;
    inset: auto 20px 9%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-shadow: 0 1px 8px rgb(0 0 0 / 25%);
}

.tinline-banner__title {
    margin: 0 0 10px;
    color: inherit;
    font-size: clamp(24px, 2.7vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .035em;
}

.tinline-banner__description {
    max-width: 580px;
    margin: 0;
    font-size: clamp(11px, .85vw, 16px);
    line-height: 1.35;
    white-space: pre-line;
}

.tinline-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 200px;
    height: 60px;
    margin-top: 20px;
    padding: 0;
    background: #eeede7;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    font-size: 14px;
    font-weight: 700;
    text-shadow: none;
}

.tinline-banner__button-arrow {
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.tinline-process {
    padding: 48px 24px 64px;
    background: #f2f0ec;
}

.tinline-process__inner {
    max-width: 1440px;
    margin: 0 auto;
}

.tinline-process__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 48px;
}

.tinline-process__title {
    margin: 0;
    color: #45291c;
    font-size: clamp(28px, 2.7vw, 48px);
    font-weight: 700;
    line-height: .98;
    white-space: pre-line;
}

.tinline-process__link {
    flex-shrink: 0;
    padding: 12px 0;
    color: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.tinline-process__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 60px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tinline-step;
}

.tinline-process__step {
    min-width: 0;
    counter-increment: tinline-step;
}

.tinline-process__steps.swiper-wrapper {
    display: grid;
    width: auto;
    height: auto;
    transform: none;
}

.tinline-process__step.swiper-slide {
    width: auto;
    height: auto;
}

.tinline-process__pagination {
    display: none;
}

.tinline-process__step-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 16px;
}

.tinline-process__number {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    height: 30px;
    border: 1px solid #c6c3b9;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 25%, #f3f2ed, #bdbcb3);
    font-size: 18px;
}

.tinline-process__number::before {
    content: counter(tinline-step);
}

.tinline-process__step-title {
    margin: 0;
    color: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.tinline-process__step-content {
    margin-left: 40px;
}

.tinline-process__photo {}

.tinline-process__description {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-line;
}

.tinline-banner__button:focus-visible,
.tinline-process__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

@media (min-width: 1200px) {
    .tinline-process__inner {
        width: 76%;
    }
}

@media (max-width: 1024px) {
    .tinline-process__steps {
        column-gap: 24px;
    }

    .tinline-process__step-title {
        font-size: 13px;
    }

    .tinline-process__description {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .tinline-banner__media {
        aspect-ratio: 4 / 5;
    }

    .tinline-banner__content {
        inset: auto 20px 8%;
    }

    .tinline-banner__button {
        margin-top: 20px;
    }

    .tinline-process {
        padding: 32px 20px 40px;
    }

    .tinline-process__heading {
        margin-bottom: 28px;
    }

    .tinline-process__link {
        font-size: 12px;
    }

    .tinline-process__swiper {
        overflow: hidden;
    }

    .tinline-process__steps.swiper-wrapper {
        display: flex;
        width: 100%;
        height: auto;
        gap: 0;
    }

    .tinline-process__step.swiper-slide {
        width: 100%;
        height: auto;
    }

    .tinline-process__pagination {
        display: flex;
        position: static;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 24px;
    }

    .tinline-process__pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #c6c3b9;
        opacity: 1;
    }

    .tinline-process__pagination .swiper-pagination-bullet-active {
        width: 20px;
        border-radius: 4px;
        background: #45291c;
    }

    .tinline-process__number {
        flex-basis: 24px;
        height: 24px;
        font-size: 15px;
    }

    .tinline-process__step-heading {
        gap: 8px;
        min-height: 40px;
        margin-bottom: 12px;
    }

    .tinline-process__step-content {
        margin-left: 0;
    }
}

.ai-jewelry-index-collection {
    padding: 0 24px;
    background: #f7f8fa;
    color: #222;
}

.ai-jewelry-index-collection__inner {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(0, 5fr);
    max-width: 1320px;
    margin: 0 auto;
}

.ai-jewelry-index-collection__heading {
    padding: 0px;
    border: 1px solid #e7e9ec;
    border-top: 0;
}

.ai-jewelry-index-collection__title {
    margin: 0;
    color: inherit;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    padding: 23px;
    border-bottom: 1px solid #e7e9ec;
}

.ai-jewelry-index-collection__list {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
}

.ai-jewelry-index-collection__item {
    flex: 1 0 20%;
    min-width: 0;
    border-right: 1px solid #e7e9ec;
}

.ai-jewelry-index-collection__item:last-child {
    border-right: 0;
}

.ai-jewelry-index-collection__list.swiper-wrapper {
    display: flex;
    width: auto;
    height: auto;
    transform: none;
}

.ai-jewelry-index-collection__item.swiper-slide {
    width: auto;
    height: auto;
}

.ai-jewelry-index-collection__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 350px;
    padding-bottom: 50px;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.ai-jewelry-index-collection__name {
    align-self: stretch;
    margin: 0;
    padding: 28px 12px;
    border-bottom: 1px solid #e7e9ec;
    color: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

.ai-jewelry-index-collection__image {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1;
    margin: 35px auto 0;
    padding: 0;
}

.ai-jewelry-index-collection__image theme-image-describe-hover,
.ai-jewelry-index-collection__image figure,
.ai-jewelry-index-collection__image picture {
    display: block;
    height: 100%;
    margin: 0;
}

.ai-jewelry-index-collection__image img,
.ai-jewelry-index-collection__image svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ai-jewelry-index-collection__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: 12px;
    border: 1px solid #d4d6da;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
}

.ai-jewelry-index-collection__card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}

@media (max-width: 768px) {
    .ai-jewelry-index-collection {
        padding: 0;
    }

    .ai-jewelry-index-collection__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-jewelry-index-collection__heading {
        border-right: 0;
    }

    .ai-jewelry-index-collection__swiper {
        overflow: hidden;
    }

    .ai-jewelry-index-collection__list.swiper-wrapper {
        display: flex;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .ai-jewelry-index-collection__item.swiper-slide {
        flex: 0 0 auto;
        width: auto;
        height: auto;
    }

    .ai-jewelry-index-collection__card {
        min-height: 280px;
        padding-bottom: 24px;
    }
}

.ai-jewelry-swipertab {
    --tab-height: 834px;
    --tabs-width: 130px;
    display: block;
    background: var(--tab-background, #301e0d);
    color: #fff;
}

.ai-jewelry-swipertab__inner {
    position: relative;
}

.ai-jewelry-swipertab__panel[hidden] {
    display: none;
}

.ai-jewelry-swipertab__panel {
    animation: none;
    transition: none;
}

.ai-jewelry-tab-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.ai-jewelry-swipertab__panel .ai-jewelry-tab-item__content {
    height: var(--tab-height);
    margin-right: calc(var(--tabs-width) + 16px);
}

.ai-jewelry-tab-item .ai-jewelry-tab-item__button span {
    color: #28231e;
}

.ai-jewelry-swipertab__tabs {
    position: absolute;
    top: 8px;
    left: calc(50% - var(--tabs-width) - 8px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: var(--tabs-width);
    height: calc(var(--tab-height) - 16px);
    overflow-y: auto;
    scroll-behavior: auto;
    scrollbar-width: none;
}

.ai-jewelry-swipertab__tabs::-webkit-scrollbar {
    display: none;
}

.ai-jewelry-swipertab__tab {
    box-sizing: border-box;
    flex: 0 0 var(--tabs-width);
    width: var(--tabs-width);
    height: var(--tabs-width);
    padding: 0px;
    border: 3px solid transparent;
    border-radius: 3px;
    background: #f1f0ea;
    cursor: pointer;
    transition: none;
}

.ai-jewelry-swipertab__tab:hover,
.ai-jewelry-swipertab__tab[aria-selected="true"] {
    border-color: #efb34f;
}

.ai-jewelry-swipertab__tab:focus-visible,
.ai-jewelry-tab-item__button:focus-visible {
    outline: 2px solid #efb34f;
    outline-offset: -3px;
}

.ai-jewelry-tab-item__main-image theme-image-describe-hover,
.ai-jewelry-tab-item__main-image figure,
.ai-jewelry-tab-item__main-image picture,
.ai-jewelry-swipertab__media theme-image-describe-hover,
.ai-jewelry-swipertab__media figure,
.ai-jewelry-swipertab__media picture {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.ai-jewelry-swipertab__tab img,
.ai-jewelry-swipertab__tab svg,
.ai-jewelry-tab-item__main-image img,
.ai-jewelry-tab-item__main-image svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ai-jewelry-tab-item__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    height: 100%;
    padding: 72px 24px;
    color: inherit;
    text-align: center;
}

.ai-jewelry-tab-item__heading {
    width: 100%;
}

.ai-jewelry-tab-item__title {
    margin: 0 0 12px;
    color: inherit;
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 700;
    line-height: 1.1;
}

.ai-jewelry-tab-item__description {
    max-width: 340px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.25;
    white-space: pre-line;
}

.ai-jewelry-tab-item__products {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    padding: 28px 0;
}

.ai-jewelry-tab-item__main-image {
    width: min(100%, 180px);
    height: 250px;
}

.ai-jewelry-tab-item__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 200px;
    height: 60px;
    background: #eeede7;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 14px;
    font-weight: 700;
}

.ai-jewelry-tab-item__button-arrow {
    font-size: 22px;
    line-height: 1;
}

.ai-jewelry-swipertab__media {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.ai-jewelry-swipertab__media>theme-image-describe-hover,
.ai-jewelry-swipertab__media>svg {
    position: absolute;
    inset: 0;
}

.ai-jewelry-swipertab__media img,
.ai-jewelry-swipertab__media svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .ai-jewelry-swipertab {
        --tab-height: 540px;
        --tabs-width: 64px;
    }

    .ai-jewelry-tab-item__content {
        padding: 40px 16px;
    }

    .ai-jewelry-swipertab__tab {
        padding: 4px;
    }
}

@media (max-width: 768px) {
    .ai-jewelry-swipertab {
        --tabs-width: 80px;
    }

    .ai-jewelry-swipertab__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-jewelry-swipertab__panel,
    .ai-jewelry-tab-item {
        display: contents;
    }

    .ai-jewelry-swipertab__media {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: 6 / 5;
    }

    .ai-jewelry-swipertab__tabs {
        position: relative;
        top: auto;
        left: auto;
        grid-column: 1;
        grid-row: 2;
        flex-direction: row;
        width: 100%;
        height: auto;
        padding: 6px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        box-sizing: border-box;
    }

    .ai-jewelry-swipertab__panel .ai-jewelry-tab-item__content {
        grid-column: 1;
        grid-row: 3;
        height: auto;
        min-height: 440px;
        margin-right: 0;
        padding: 20px 20px 40px;
    }

    .ai-jewelry-tab-item__main-image {
        width: 150px;
        height: 210px;
        max-width: 100%;
    }
}

/* Craftsmanship step carousel */
.ai-make-stepswiper {
    position: relative;
    width: 100%;
    background-color: var(--steps-background, #f2efeb);
    /* Soft, irregular paper grain; embedded in CSS, no image upload needed. */
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cfilter%20id%3D%22grain%22%20x%3D%220%25%22%20y%3D%220%25%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.48%22%20numOctaves%3D%223%22%20seed%3D%2212%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%20.42%200%200%200%200%20.36%200%200%200%200%20.29%20.24%200%200%200%20-.055%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.22%22%2F%3E%3C%2Ffilter%3E%3Cpath%20fill%3D%22white%22%20filter%3D%22url%28%23grain%29%22%20d%3D%22M0%200h240v240H0z%22%2F%3E%3C%2Fsvg%3E"),
        linear-gradient(rgb(255 255 255 / 18%), rgb(255 255 255 / 18%));
    background-size: 240px 240px, 100% 100%;
    background-position: 0 0, center;
    background-repeat: repeat, no-repeat;
    color: var(--steps-color, #45291c);
}

.ai-make-stepswiper__swiper {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
}

.ai-make-stepswiper__swiper>.swiper-wrapper {
    align-items: stretch;
}

.ai-make-stepswiper__slide {
    display: grid;
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    height: auto;
}

.ai-make-stepswiper__scene {
    position: relative;
    min-width: 0;
    aspect-ratio: 1.28;
    overflow: hidden;
}

.ai-make-stepswiper__scene>theme-image-describe-hover,
.ai-make-stepswiper__scene>svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ai-make-stepswiper__scene figure,
.ai-make-stepswiper__scene picture,
.ai-make-stepswiper__product theme-image-describe-hover,
.ai-make-stepswiper__product figure,
.ai-make-stepswiper__product picture {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.ai-make-stepswiper__scene img,
.ai-make-stepswiper__scene svg,
.ai-make-stepswiper__product img,
.ai-make-stepswiper__product svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-make-stepswiper__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(24px, 4vw, 64px) clamp(24px, 4vw, 64px) 100px;
}

.ai-make-stepswiper__title {
    margin: 0 0 12px;
    color: inherit;
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    white-space: pre-line;
}

.ai-make-stepswiper__description {
    max-width: 360px;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-line;
}

.ai-make-stepswiper__product {
    width: max-content;
    height: max-content;
    margin: auto;
}

.ai-make-stepswiper__product img,
.ai-make-stepswiper__product svg {
    object-fit: contain;
}

.ai-make-stepswiper__controls {
    position: absolute;
    right: 0;
    bottom: 32px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 44%;
}

.ai-make-stepswiper__controls[hidden] {
    display: none;
}

.ai-make-stepswiper__prev,
.ai-make-stepswiper__next {
    display: flex;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 10px;
    border: 0;
    border-radius: 50%;
    background: var(--steps-arrow-background, radial-gradient(ellipse at 35% 25%, #f1f0ea, #c7c6bf)) center / cover;
    color: #000;
    cursor: pointer;
}

.ai-make-stepswiper__controls svg {
    width: 24px;
    height: 24px;
}

.ai-make-stepswiper__pagination {
    position: static;
    width: auto;
    min-width: 32px;
    font-size: 14px;
    text-align: center;
}

.ai-make-stepswiper__controls .swiper-button-disabled,
.ai-make-stepswiper__controls .swiper-button-lock {
    opacity: .35;
    pointer-events: none;
}

.ai-make-stepswiper__controls button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .ai-make-stepswiper__slide {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-make-stepswiper__scene {
        aspect-ratio: 6 / 5;
    }

    .ai-make-stepswiper__content {
        align-items: center;
        min-height: 460px;
        padding: 24px 24px 110px;
        text-align: center;
    }

    .ai-make-stepswiper__title {
        font-size: 32px;
    }

    .ai-make-stepswiper__product {
        width: 160px;
        height: 180px;
    }

    .ai-make-stepswiper__controls {
        bottom: 48px;
        width: 100%;
    }.ai-make-stepswiper__prev,
    .ai-make-stepswiper__next {flex: 0 0 56px;width: 56px;
        height: 56px;}
}

/* Bestseller collection */
.tinline-sale-recommend {
    padding: 40px 24px 64px;
    background: var(--sale-background, #f7f8fa);
}

.tinline-sale-recommend__inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.tinline-sale-recommend__heading {
    margin: 0 0 32px;
    color: #45291c;
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.15;
}

.tinline-sale-recommend__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tinline-sale-recommend__item {
    min-width: 0;
}

.tinline-sale-recommend__card {
    display: block;
    color: #292722;
    text-decoration: none;
}

.tinline-sale-recommend__image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #eeece9;
}

.tinline-sale-recommend__image theme-image-describe-hover,
.tinline-sale-recommend__image figure,
.tinline-sale-recommend__image picture {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.tinline-sale-recommend__image img,
.tinline-sale-recommend__image>svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tinline-sale-recommend__discount {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
    padding: 3px 6px;
    background: #f7f8fa;
    color: #ff5935;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.tinline-sale-recommend__name {
    display: -webkit-box;
    height: 2.4em;
    margin: 12px 0 10px;
    overflow: hidden;
    color: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tinline-sale-recommend__price {
    color: #ff5935;
    font-size: 16px;
    line-height: 1.4;
}

.tinline-sale-recommend__card:focus-visible {
    outline: 2px solid #45291c;
    outline-offset: 4px;
}

@media (max-width: 768px) {
    .tinline-sale-recommend {
        padding: 24px 14px 48px;
    }

    .tinline-sale-recommend__heading {
        margin-bottom: 26px;
        font-size: 32px;
    }

    .tinline-sale-recommend__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 10px;
    }

    .tinline-sale-recommend__name {
        font-size: 16px;
    }
}

/* Video feature */
.tinline-video {
    padding: 100px 24px 16px;
    background: linear-gradient(180deg, var(--tinline-video-background, #ddcbbb), #f7f8fa);
}

.tinline-video__inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: #333;
}

.tinline-video .theme-video-media {
    position: relative;
    aspect-ratio: 16 / 9 !important;
    height: auto;
    background: #333;
}

.tinline-video .theme-video-media__poster {
    position: absolute;
    inset: 0;
}

.tinline-video .theme-video-media__poster>svg {
    visibility: hidden;
}

.tinline-video .theme-video-media__play-button {
    width: 72px;
    min-width: 0;
    max-width: none;
    color: #fff;
}

.tinline-video .theme-video-media__play-button-icon circle {
    fill: rgb(255 255 255 / 20%);
}

.tinline-video .theme-video-media__play-button-icon path {
    transform: translate(4px, 5px) scale(.8);
    transform-origin: 0 0;
}

.tinline-video .theme-video-media__play-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
    border-radius: 50%;
}

.tinline-video .theme-video-media video {
    object-fit: contain;
}

@media (max-width: 768px) {
    .tinline-video {
        padding: 28px 14px 16px;
    }

    .tinline-video .theme-video-media {
        aspect-ratio: 16 / 9 !important;
    }

    .tinline-video .theme-video-media__play-button {
        width: 56px;
    }
}

/* Customer reviews: desktop gallery, mobile carousel */
.tinline-customer {
    padding: 48px 24px 24px;
    background: var(--customer-background, #f7f8fa);
}

.tinline-customer__inner {
    max-width: 1400px;
    margin: 0 auto;
}

.tinline-customer__heading {
    margin: 0 0 36px;
    color: #45291c;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.tinline-customer__swiper {
    min-width: 0;
    overflow: hidden;
}

.tinline-customer__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tinline-customer__item {
    position: relative;
    min-width: 0;
    height: auto;
}

.tinline-customer__photo {
    aspect-ratio: 5 / 6;
    overflow: hidden;
    background: #eeece9;
}

.tinline-customer__photo theme-image-describe-hover,
.tinline-customer__photo figure,
.tinline-customer__photo picture,
.tinline-customer__avatar theme-image-describe-hover,
.tinline-customer__avatar figure,
.tinline-customer__avatar picture {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.tinline-customer__photo img,
.tinline-customer__photo svg,
.tinline-customer__avatar img,
.tinline-customer__avatar svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tinline-customer__review {
    position: relative;
    display: none;
    margin: 0;
    padding: 24px 18px;
    overflow-y: auto;
    background: #eeece9;
    color: #73716e;
}


.tinline-customer__author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    text-align: center;
}

.tinline-customer__avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
}

.tinline-customer__name {
    color: #292722;
    font-size: 14px;
    line-height: 1.3;
}

.tinline-customer__stars {
    color: #f5c337;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
}

.tinline-customer__star--empty {
    color: #cfcdc6;
}

.tinline-customer__text {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.tinline-customer__quote {
    position: absolute;
    color: #c7c5bf;
    font-family: Georgia, serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}

.tinline-customer__quote--start {
    top: 4px;
    left: 6px;
}

.tinline-customer__quote--end {
    right: 6px;
    bottom: -8px;
}

/* Desktop: reveal the review over a softly blurred version of the photo. */
@media (min-width: 769px) {
    .tinline-customer__item {
        overflow: hidden;
    }

    .tinline-customer__item .tinline-customer__review {
        position: absolute;
        inset: 0;
        display: block;
        padding: 30px;
        background: rgb(238 236 233 / 90%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .tinline-customer__item:hover .tinline-customer__review,
    .tinline-customer__item:focus-within .tinline-customer__review {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;overflow: hidden;
    }

    .tinline-customer__item:hover .tinline-customer__photo,
    .tinline-customer__item:focus-within .tinline-customer__photo {
        filter: blur(6px);
        transform: scale(1.04);
    }

    .tinline-customer__item:focus-visible {
        outline: 2px solid #45291c;
        outline-offset: -2px;
    }

    .tinline-customer__avatar {
        flex-basis: clamp(40px, 4.5vw, 64px);
        width: clamp(40px, 4.5vw, 64px);
        height: clamp(40px, 4.5vw, 64px);
    }

    .tinline-customer__text {
        font-size: clamp(12px, 1vw, 13px);
        text-align: justify;
    }
}

@media (max-width: 768px) {
    .tinline-customer {
        padding: 60px 14px 20px;
    }

    .tinline-customer__heading {
        max-width: 340px;
        margin: 0 auto 44px;
        font-size: 36px;
    }

    .tinline-customer__swiper {
        touch-action: pan-y;
    }

    .tinline-customer__list {
        display: flex;
        gap: 0;
        align-items: stretch;
    }

    .tinline-customer__item {
        display: flex;
        flex-direction: column;
    }

    .tinline-customer__review {
        position: relative;
        inset: auto;
        display: block;
        flex: 1;
        min-height: 240px;
        padding: 30px 18px;
        overflow: visible;
    }

    .tinline-customer__author {
        flex-direction: row;
        gap: 12px;
        text-align: left;
    }

    .tinline-customer__text {
        font-size: 14px;
    }
}