@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Caveat:wght@700&display=swap");
:root {
    --tc-bottom-nav-h: 0px;
    --color-primary: #FF4A83;
    --color-primary-dark: #C42B62;
    --color-brown: #48432e;
    --color-accent: #FF8FAE;
    --color-accent-dark: #E15A82;
    --color-ink: #555;
    --color-text: #2A2F27;
    --color-muted: #77807A;
    --color-black: #222000;
    --color-border: #f2f2f2;
    --color-bg: #f8f8f8;
    --color-bg-subtle: #f8f8f8;
    --color-discount: #AE0000;
    --color-danger: #b02a37;
    --color-success: #3E7B1B;
    --color-price: #C42B62;
    --color-star: #F5A623;
    --color-teal: #FF4A83;
    --color-teal-dark: #C42B62;
    --color-teal-tint: #FDE7EE;
    --color-topbar: #22262B;
    --inf-espresso: #1a0e0c;
    --inf-espresso-2: #2e1712;
    --inf-rose-light: #f9d4ca;
    --inf-rose-pale: #fde8e1;
    --inf-cream: #fdf0ec;
    --inf-muted: #7a5f59;
    --inf-muted-2: #c4aba3;
    --inf-text-light: #f5ede8;
    --inf-radius: 8px;
    --text-white: #ffffff;
    --radius: 4px;
    --font-sans: Pretendard, sans-serif, Noto Sans KR, verdana, Dotum, AppleGothic;
    --font-price: Jost, Pretendard, sans-serif;
    --shadow-sm: 0 1px 2px rgba(26, 43, 20, .05), 0 1px 3px rgba(26, 43, 20, .07);
    --shadow-md: 0 6px 18px rgba(26, 43, 20, .1);
    --titto-dark: var(--color-black);
    --accent: var(--color-primary);
    --accent-hover: var(--color-primary-dark);
    --accent-glow: rgba(255, 74, 131, .16);
    --accent-shadow: rgba(255, 74, 131, .28);
    --bg-base: var(--color-bg-subtle);
    --bg-card: #ffffff;
    --bg-admin-canvas: #f6f5f3;
    --bg-sidebar: #ffffff;
    --bg-header: #ffffff;
    --bg-input: #ffffff;
    --bg-chip: #FDECF1;
    --bg-stepper: #ffffff;
    --bg-image-well: var(--color-bg-subtle);
    --bg-hover-item: #FFF0F5;
    --bg-hover-row: #FFFAFB;
    --bg-active-item: var(--color-teal-tint);
    --border-subtle: #f2f2f2;
    --border-medium: #F0C9D5;
    --border-input: #F4D7E1;
    --border-sidebar: var(--color-border);
    --text-primary: #22262B;
    --text-secondary: #55605A;
    --text-muted: var(--color-muted);
    --shadow-lg: 0 12px 28px rgba(26, 43, 20, .12);
}

.storefront {
    --color-text: #444444;
    --color-muted: #AAAAAA;
    --color-ink: #555555;
    --color-black: #191919;
    --color-brown: #48432e;
    --color-bg: #FDFDFC;
    --color-bg-subtle: #FDFDFC;
    font-size: 13px;
    background: #FDFDFC;
}

.storefront .product-card__title,
.storefront .titto-product-title,
.storefront h1, .storefront h2, .storefront h3 {
    color: #000000;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--color-text);
    max-width: 100%;
}

    body [style*="bold"] {
        font-weight: 500 !important;
    }

body {
    text-align: start;
}

a {
    text-decoration: none;
    color: #333;
}

h1 {
    font-size: clamp(1.23rem, calc(1.1349rem + 0.4056vw), 1.5rem);
    margin-block: 0 1rem;
    color: var(--color-ink);
}

h2 {
    font-size: clamp(1.066rem, calc(0.9836rem + 0.3515vw), 1.3rem);
    margin-block: 1.5rem 0.75rem;
    color: var(--color-primary);
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 0.6rem 0.75rem;
    text-align: start;
    border-bottom: 1px solid var(--color-border);
}

th {
    font-weight: 700;
    color: var(--color-text);
}

tbody tr {
    transition: background-color .1s ease;
}

    tbody tr:hover {
        background: var(--bg-hover-row);
    }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
    font: inherit;
    min-height: 38px;
    padding: 0.5rem 0.65rem;
    color: var(--color-ink, #222);
    background: #fff;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
}

    input[type="text"]:hover,
    input[type="email"]:hover,
    input[type="password"]:hover,
    input[type="number"]:hover,
    input[type="tel"]:hover,
    select:hover,
    textarea:hover {
        border-color: #b8b8b8;
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="number"]:focus,
    input[type="tel"]:focus,
    select:focus,
    textarea:focus {
        border-color: var(--color-ink, #222);
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
    }

textarea {
    min-height: 120px;
    resize: vertical;
}

select {
    cursor: pointer;
}

input::placeholder,
textarea::placeholder {
    color: #999;
    opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    vertical-align: middle;
    display: inline-grid;
    place-content: center;
}

    input[type="checkbox"]:checked {
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

        input[type="checkbox"]:checked::after {
            content: "✓";
            color: #fff;
            font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
            font-weight: 700;
            line-height: 1;
        }

    input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--color-ink);
        outline-offset: 2px;
    }

label {
    display: flex;
    gap: 0.25rem;
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    margin: 0.5rem 0;
}

    label small {
        color: var(--color-muted);
        font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
        font-weight: 400;
    }

td button {
    margin-right: 6px;
}

    td button:last-child {
        margin-right: 0;
    }

button {
    padding: 8px 14px;
    border: 1px solid var(--color-brown);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
    background-color: var(--color-brown);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0.1rem 0rem;
}


    button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    button.auth-submit,
    .auth-submit, .pd-btn-kako, .inf-submit-btn {
        box-sizing: border-box;
        padding: 0.6rem;
        font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
        line-height: 1.2;
        background: var(--color-brown);
        border: 1px solid var(--color-brown);
        color: #fff;
        text-align: center;
        transition: all 0.3s;
    }


.button:hover {
    text-decoration: none;
}

.button--primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
}

    .button--primary:hover {
        background: #fff;
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

.button--secondary {
    background: #fff;
    border: 1px solid var(--color-ink);
    color: var(--color-ink);
}

    .button--secondary:hover {
        background: var(--color-ink);
        color: #fff;
    }

.form-error {
    color: var(--color-danger);
}

.form-success {
    color: var(--color-success);
    margin:1rem;
}

/* ---------- Storefront ---------- */

.storefront {
    font-family: var(--font-sans);
}

.storefront-header__logo-img {
    height: 34px;
    width: auto;
    display: block;
}

.storefront-utility {
    background: var(--color-primary);
    color: #fff;
    padding: 0.5rem 1.5rem;
}

.storefront-utility__row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 1240px;
    margin-inline: auto;
}

.storefront-utility__greeting {
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    white-space: nowrap;
    opacity: .95;
}

.storefront-search {
    flex: 1;
    display: flex;
    max-width: 620px;
    margin-inline: auto;
}

    .storefront-search input {
        border: none;
        border-radius: 999px;
        padding: 0.45rem 1rem;
        font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
        width: 100%;
    }

        .storefront-search input:focus-visible {
            outline: 2px solid var(--color-ink);
            outline-offset: 1px;
        }

.storefront-utility__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.storefront-utility__link {
    color: #fff;
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    font-weight: 400;
}

    .storefront-utility__link:hover {
        text-decoration: underline;
    }

.storefront-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    background: #fff;
    border-block-end: 1px solid var(--color-border);
    padding: 0.7rem 1.5rem;
}

.storefront-header__row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1240px;
    margin-inline: auto;
}

.storefront-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: clamp(0.943rem, calc(0.8701rem + 0.311vw), 1.15rem);
    color: var(--color-ink);
    white-space: nowrap;
}

    .storefront-header__logo:hover {
        text-decoration: none;
    }

.storefront-header__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--color-accent);
    font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
    line-height: 1;
}

.storefront-header__nav {
    display: flex;
    gap: 1.4rem;
    margin-inline-start: auto;
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    font-weight: 600;
}

    .storefront-header__nav a {
        color: var(--color-text);
    }

        .storefront-header__nav a:hover {
            color: var(--color-primary);
            text-decoration: none;
        }

.storefront-main {
    margin-inline: auto;
    padding: 0.8rem 2.5rem;
    min-height: 60vh;
}

.storefront-bottom-nav {
    display: none;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    background: var(--color-bg);
    justify-content: space-around;
    align-items: stretch;
    padding: 0.35rem 0 max(0.35rem, env(safe-area-inset-bottom));
    z-index: 100;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.sbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    flex: 1;
    min-height: 44px;
    color: var(--color-muted, #777);
    text-decoration: none;
    font-size: clamp(0.5576rem, calc(0.5145rem + 0.1839vw), 0.68rem);
    font-weight: 500;
    transition: color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

    .sbn-item:active {
        transform: scale(0.94);
    }

    .sbn-item svg {
        flex-shrink: 0;
    }

.sbn-item--active svg {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 5px var(--accent-glow));
}

.sbn-item__icon-wrap {
    position: relative;
    display: inline-flex;
}

.sbn-item__badge {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: clamp(0.492rem, calc(0.454rem + 0.1623vw), 0.6rem);
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.storefront-footer {
    border-block-start: 4px solid var(--color-primary);
    background: var(--color-ink);
    padding: 2rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    color: #A9B5A3;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
}

    .storefront-footer a {
        color: #DCE5D6;
    }

        .storefront-footer a:hover {
            color: #fff;
            text-decoration: none;
        }

    .storefront-footer p {
        flex-basis: 100%;
        margin: 0;
    }

.review-slider .home-hero__slide::after {
    background: transparent;
}

.home-hero__copy {
    position: absolute;
    inset-inline-start: 4%;
    inset-block-end: 6%;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    max-width: 70%;
    color: #fff;
    text-decoration: none;
}

.home-hero .button--primary {
    margin-block-start: 1rem;
}

.home-hero__arrow:hover {
    background: transparent;
}

    .home-hero__arrow:hover::before {
        border-width: 2px;
    }

.home-hero__counter {
    position: absolute;
    inset-block-end: 1.1rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgb(54 53 53 / 18%);
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
}

.home-hero__counter-sep {
    opacity: 0.6;
}

.home-hero__counter-total {
    opacity: 0.6;
}

.home-section {
    margin-block-end: 1.5rem;
}

.home-section--carousel {
    text-align: center;
}

.home-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.home-section__head--center {
    display: block;
    text-align: center;
}

/* REVIEWS section: title stays centered, "see more" link sits at the
   row's right edge - same absolute-centering trick used for PRODUCT. */
.home-section__head--with-link {
    position: relative;
}

.home-section__more-link {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-muted, #AAAAAA);
    text-decoration: none;
    white-space: nowrap;
}

    .home-section__more-link:hover {
        color: var(--color-text);
    }

    .home-section__head--center h2 {
        font-size: clamp(1.6rem, calc(1.4rem + 1vw), 2rem);
        font-weight: 500;
        letter-spacing: normal;
        text-transform: none;
        line-height: 1.5;
        color: #191919;
        margin-block: 0 2.5rem;
    }

.home-section__sub {
    color: var(--color-muted);
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    margin-block: 0 1rem;
}

@supports (animation-timeline: view()) {
    .title-slide-up {
        animation: slideUp linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}

@keyframes slideUp {

    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Quick-access category row - shown under the hero banner */

.home-cat-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(1rem, 4vw, 2.75rem);
    padding: 0.5rem 0.6rem 0.5rem;
    margin: 0 auto;
}


.home-trust-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto 1.5rem;
    padding: 1.25rem clamp(0.75rem, 3vw, 2rem);
    border-block: 1px solid var(--color-border, #eee);
}

.home-trust-bar__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.home-trust-bar__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #f6f6f6;
    color: #191919;
}

    .home-trust-bar__icon img {
        width: 20px;
        height: 20px;
    }

.home-trust-bar__icon--whatsapp {
    background: rgba(37, 211, 102, 0.12);
}

.home-trust-bar__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .home-trust-bar__copy strong {
        font-size: clamp(0.75rem, calc(0.7rem + 0.2vw), 0.85rem);
        font-weight: 600;
        color: #191919;
    }

    .home-trust-bar__copy span {
        font-size: clamp(0.68rem, calc(0.64rem + 0.15vw), 0.76rem);
        color: var(--color-muted, #777);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.home-trust-bar__item--link:hover .home-trust-bar__copy strong {
    color: #25D366;
}

.home-cat-row__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--titto-dark, #333);
}

.home-cat-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--color-teal-tint);
    border: 1px solid var(--color-border);
    color: var(--color-primary-dark);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.home-cat-row__item:hover .home-cat-row__icon {
    color: #fff;
    transform: translateY(-1px);
}

.home-cat-row__label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
}

.home-cat-row__icon--all {
    background: transparent;
    border-style: dashed;
    color: var(--color-primary-dark);
}

.home-cat-row__item--all:hover .home-cat-row__icon--all {
    background: var(--color-teal-tint);
    color: var(--color-primary-dark);
}

.home-section--split-rail {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: center;
    padding: 3rem 1rem;
}

.home-section__sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-block-start: 1rem;
}

    .home-section__sidebar h2 {
        font-size: clamp(1.4rem, calc(1.2rem + 0.9vw), 1.8rem);
        font-weight: 500;
        color: #191919;
        margin-block: 0 1.5rem;
        letter-spacing: normal;
    }

.home-section__controls {
    display: flex;
    gap: 0.5rem;
}

.home-rail-arrow {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #f2f2f2;
    cursor: pointer;
    color: var(--color-ink);
    font-size: 0.85rem;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    border-radius: 0;
}


    .home-rail-arrow:hover {
        background: var(--color-bg-subtle);
        border-color: var(--color-ink);
    }

.home-hero__nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

    .home-hero__nav-arrow:hover {
        background: rgba(0, 0, 0, 0.55) !important;
        transform: translateY(-50%);
        box-shadow: none !important;
    }

.home-section__content {
    min-width: 0;
    overflow: hidden;
    border-bottom: 2px solid #d1d1d1;
}

/* Product rail */

.product-rail {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 1rem;
    scrollbar-width: none;
    padding-block-end: 0.5rem;
}

    .product-rail::-webkit-scrollbar {
        display: none;
    }

.product-rail__item {
    flex: 0 0 30%;
    min-width: 200px;
    scroll-snap-align: start;
}

    .product-rail__item .product-card {
        height: 100%;
    }

/* Swiper drives this rail's sliding now (swiper-init.js) - the native scroll/snap rules above
   would otherwise fight Swiper's own transform-based sliding, so turn them off for it and size
   slides the way Swiper (slidesPerView: "auto") expects: width instead of flex-basis. */
.product-rail.swiper {
    overflow: hidden;
    scroll-snap-type: none;
}

.product-rail__item.swiper-slide {
    flex: none;
    width: 356px;
}

/* Review rail */

.review-rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-block: 2rem 0;
    scrollbar-width: none;
}

    .review-rail::-webkit-scrollbar {
        display: none;
    }

.review-rail__item {
    flex: 0 0 320px;
    scroll-snap-align: start;
}

.lookbook-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 2.2rem;
    padding: 2rem 0;
 
    margin-inline: auto;
}

.lookbook-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-bg-subtle);
}

    .lookbook-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 18px;
    }

    .lookbook-card::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        height: 55%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
        pointer-events: none;
    }

    .lookbook-card span {
        position: absolute;
        inset-inline-start: 0;
        inset-block-end: 0;
        z-index: 1;
        padding: 0.9rem 1rem;
        color: #fff;
        font-weight: 600;
        font-size: clamp(0.85rem, calc(0.8rem + 0.15vw), 0.95rem);
        letter-spacing: normal;
        text-align: start;
    }

/* Social grid */

.social-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    padding: 2rem 0;
  
    margin-inline: auto;
}

    /* 1–2 */
    .social-grid:has(> :nth-child(2):last-child) {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 3–4 */
    .social-grid:has(> :nth-child(3)):not(:has(> :nth-child(5))) {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 5–6 */
    .social-grid:has(> :nth-child(5)):not(:has(> :nth-child(7))) {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 7–8 */
    .social-grid:has(> :nth-child(7)):not(:has(> :nth-child(9))) {
        grid-template-columns: repeat(4, 1fr);
    }

    /* 9–12 */
    .social-grid:has(> :nth-child(9)) {
        grid-template-columns: repeat(6, 1fr);
    }

.social-follow {
    display: block;
    text-align: center;
    color: var(--color-muted);
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    margin-block: 0 1rem;
}

    .social-follow:hover {
        color: var(--color-ink);
    }

.social-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-bg-subtle);
}

.social-tile__icon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
}

.social-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.social-tile__icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-tile__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    color: #fff;
    font-size: clamp(1.148rem, calc(1.0593rem + 0.3786vw), 1.4rem);
    opacity: 0;
    transition: background .18s ease, opacity .18s ease;
}

.social-tile:hover {
    text-decoration: none;
}

    .social-tile:hover img {
        transform: scale(1.06);
    }

    .social-tile:hover .social-tile__overlay {
        background: rgba(0,0,0,.32);
        opacity: 1;
    }

.social-cta {
    display: flex;
    justify-content: center;
    margin-block-start: 1.25rem;
}

/* Category strip */

.category-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.9rem;
    margin-block-end: 2.5rem;
}

.category-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text);
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 600;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

    .category-chip img {
        width: 52px;
        height: 52px;
    }

    .category-chip:hover {
        text-decoration: none;
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

/* Promo row */

.promo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-block-end: 2.5rem;
}

.promo-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 12px;
    color: var(--color-ink);
    overflow: hidden;
}

    .promo-card:hover {
        text-decoration: none;
    }

.promo-card--green {
    background: #E6F3D8;
}

.promo-card--pink {
    background: #FCE4EC;
}

.promo-card__eyebrow {
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-muted);
}

.promo-card__title {
    font-size: clamp(1.066rem, calc(0.9836rem + 0.3515vw), 1.3rem);
    font-weight: 800;
    margin-block: 0.2rem 0.9rem;
    max-width: 14ch;
    line-height: 1.2;
}

.promo-card img {
    width: 118px;
    height: 118px;
}

/* ---------- Product Card ---------- */

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: inherit;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.product-card--modern .product-card__image {
    background: var(--color-bg-subtle);
}

.product-card__meta-row {
    display: none;
}

.product-card__badge {
    position: absolute;
    top: 1rem;
    left: 0.5rem;
    z-index: 3;
    background: #ff3e6c;
    color: #fff;
    font-size: clamp(0.533rem, calc(0.4918rem + 0.1758vw), 0.65rem);
    font-weight: 800;
    letter-spacing: .02em;
    padding: 0.22rem 0.5rem;
}

.product-card__badge--best {
    background: #111;
    box-shadow: none;
    display: none;
}

.product-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    line-height: 1;
}

.product-card__rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: transparent;
    color: #E1AD01;
    font-size: clamp(0.75rem, calc(0.68rem + 0.3vw), 0.9rem);
    font-weight: 600;
    padding: 0;
    border-radius: 0;
    line-height: 1;
    white-space: nowrap;
}

.product-card__rating-count {
    display: inline-flex;
    align-items: center;
    color: var(--color-muted);
    font-size: clamp(0.7rem, calc(0.65rem + 0.2vw), 0.82rem);
    line-height: 1;
    white-space: nowrap;
}

.product-card__body {
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
}

.product-card__handle {
    display: block;
    font-size: 0.875rem;
    color: #333333;
    margin-bottom: 0.3rem;
}

.product-card__title {
    font-weight: 500;
    font-size: clamp(0.9rem, calc(0.82rem + 0.32vw), 1rem);
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.product-card__compare-row {
    display: block;
}

.product-card__compare {
    font-family: var(--font-price);
    font-size: 12px;
    color: #AAAAAA;
    text-decoration: line-through;
}

.product-card__discount {
    font-family: var(--font-price);
    font-size: 19px;
    font-weight: bold;
    color: var(--color-discount, #AE0000);
}

.product-card__prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    text-align: left;
    justify-content: flex-start;
    gap: 0.4rem;
    margin-top: auto; /* Pushes prices down uniformly */
    margin-bottom: 0.3rem;
    font-family: var(--font-price);
    font-weight: 700;
    letter-spacing: .3px;
    font-size: clamp(0.9737rem, calc(0.8984rem + 0.3212vw), 1.1875rem);
}

.product-card__cta {
    display: inline-flex;
    justify-content: center;
    color: #fff;
    background: var(--color-primary);
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    font-weight: 700;
    letter-spacing: .02em;
    padding: 0.6rem;
    border-radius: 999px;
    transition: background .12s ease;
    margin-top: 0.3rem;
}

    .product-card__cta:hover {
        background: var(--color-primary-dark);
    }

.rating {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    color: var(--color-muted);
    margin-bottom: 0.3rem;
}

.rating__stars {
    color: #c58d2f;
    letter-spacing: 1px;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.75rem);
}

.rating__count {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
}

/* ---------- Product detail ---------- */

.product-detail {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
}

.product-detail__gallery {
    flex: 1 1 0;
    min-width: 0;
    position: sticky;
    top: 80px;
    align-self: flex-start;
}

.product-detail__info {
    flex: 1 1 0;
    min-width: 0;
}

.product-detail__gallery img, .product-detail__placeholder {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
}

.product-detail__main-image {
    display: block;
}

.product-detail__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.product-detail__thumb {
    padding: 0;
    width: 4.5rem;
    height: 4.5rem;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    line-height: 0;
}

    .product-detail__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.product-detail__thumb--active {
    border-color: var(--color-primary, #111);
}

.product-detail__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: #8a8a8a;
    margin-block-end: 1rem;
}

    .product-detail__breadcrumb a {
        color: #8a8a8a;
    }

        .product-detail__breadcrumb a:hover {
            color: var(--color-accent);
        }

.product-detail__info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.product-detail__share {
    border: none;
    background: transparent;
    box-shadow: none;
    font-size: clamp(0.902rem, calc(0.8323rem + 0.2975vw), 1.1rem);
    padding: 0.25rem;
    color: #8a8a8a;
}

.product-detail__desc {
    color: #5b5b5b;
}

.product-detail__option {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 600;
    margin-block: 0.75rem;
}

    .product-detail__option select {
        padding: 0.5rem;
        border-radius: 8px;
        border: 1px solid var(--color-border);
        font: inherit;
    }

.product-detail__price-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-block: 0.5rem;
}

.product-detail__price-was {
    text-decoration: line-through;
    color: #a8a8a8;
    font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
}

.product-detail__price-discount {
    color: var(--color-danger, #e23a63);
    font-weight: 800;
}

.product-detail__price {
    font-size: clamp(1.394rem, calc(1.2863rem + 0.4597vw), 1.7rem);
    font-weight: 800;
    color: var(--color-price);
}

.product-detail__stock--out {
    color: var(--color-danger);
}

.product-detail__add-to-cart {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

    .product-detail__add-to-cart input {
        width: 5rem;
    }

.cart-page {
    padding-top: 1.5rem;
}

.cart-breadcrumb {
    margin-bottom: 1rem;
}

.cart-page__title {
    font-size: clamp(1.23rem, calc(1.1349rem + 0.4056vw), 1.5rem);
    font-weight: 700;
    margin: 1rem 0;
    text-align: center;
    color: var(--color-ink);
}

.cart-page__count {
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: var(--color-muted);
}

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cart-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.cart-line__remove-icon img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    display: block;
}

.cart-empty h2 {
    margin: 0;
    font-size: clamp(0.943rem, calc(0.8701rem + 0.311vw), 1.15rem);
    color: var(--color-ink);
}

.cart-empty p {
    margin: 0 0 1rem;
    color: var(--color-muted);
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    max-width: 360px;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.cart-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.cart-line {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(20, 20, 20, 0.04);
}

.cart-line__remove-icon {
    position: absolute;
    top: 0.75rem;
    inset-inline-end: 0.75rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    border-radius: 50%;
    padding: 0.2rem;
    transition: background-color .12s ease, color .12s ease;
}

    .cart-line__remove-icon:hover {
        background: var(--color-teal-tint);
        color: var(--color-danger);
    }

.cart-line__thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    background: var(--color-bg-subtle);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f8f8f8;
}

    .cart-line__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.cart-line__thumb-fallback {
    font-size: 1.4rem;
    opacity: 0.5;
}

.cart-line__thumb--btn {
    padding: 0;
    cursor: pointer;
    appearance: none;
}

.cart-line__title--btn {
    cursor: pointer;
}

    .cart-line__title--btn:hover {
        text-decoration: underline;
    }

.cart-line__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-inline-end: 2rem;
}

.cart-line__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.cart-line__title {
    margin: 0;
    font-size: clamp(0.7544rem, calc(0.6961rem + 0.2488vw), 0.92rem);
    font-weight: 600;
    color: var(--color-ink);
}

.cart-line__variant {
    margin: 0.2rem 0 0;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    color: var(--color-muted);
}

.cart-line__remove {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    cursor: pointer;
    line-height: 1;
}

    .cart-line__remove:hover {
        background: var(--color-danger);
        border-color: var(--color-danger);
        color: #fff;
    }

.cart-line__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.cart-line__qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.1rem;
}

.cart-line__qty-btn {
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--color-bg-subtle);
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--color-ink);
    cursor: pointer;
}

    .cart-line__qty-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.cart-line__qty-value {
    min-width: 1.2rem;
    text-align: center;
    font-size: clamp(0.72rem, calc(0.68rem + 0.15vw), 0.85rem);
    font-weight: 600;
    color: var(--color-ink);
}

.cart-line__price {
    font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
    margin-top: 0.3rem;
}

.cart-summary {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 1.5rem;
    background: #fff;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 1rem;
    margin-bottom: 1rem;
}

.cart-summary__title {
    margin: 0 0 1.1rem;
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
    color: var(--color-ink);
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.cart-summary__row--muted {
    color: var(--color-muted);
}

.cart-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px dashed var(--color-border);
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    font-size: clamp(0.7544rem, calc(0.6961rem + 0.2488vw), 0.92rem);
    color: var(--color-ink);
    font-weight: 600;
}

    .cart-summary__total strong {
        color: #000;
        font-size: clamp(1.05rem, calc(0.96rem + 0.36vw), 1.3rem);
    }

.cart-summary__checkout {
    width: 100%;
    margin-top: 1.25rem;
}

.cart-summary__continue {
    width: 100%;
    margin-top: 0.6rem;
}

.cart-mobile-bar {
    display: none;
}

.ck-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2rem;
    align-items: start;
    margin-block-start: 1rem;
}

    .ck-layout > .ck-form,
    .ck-layout > .ck-summary {
        min-width: 0;
    }

.ck-fulfillment {
    display: flex;
    gap: 0.75rem;
    margin-block-end: 1.25rem;
}

.ck-fulfillment__option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    color: #555;
}

.ck-fulfillment__icon {
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
    width: 1.3rem;
}

.ck-field {
    display: block;
    margin-block-end: 1rem;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: #444;
}

.ck-field__label {
    display: block;
    margin-block-end: 0.35rem;
}

.ck-field__required {
    color: #e9573f;
}

.ck-field__with-action {
    display: flex;
    gap: 0.5rem;
}

    .ck-field__with-action .ck-field__input {
        flex: 1;
    }

.ck-field .form-success,
.ck-field .form-error {
    display: block;
    margin-block-start: 0.4rem;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
}

.ck-payment-options {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ck-payment-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #ddd;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    margin-block-end: 0;
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    color: #555;
    cursor: pointer;
    flex: 1;
}

.ck-summary {
    border: 1px solid var(--color-border);
    padding: 1.5rem;
    position: sticky;
    top: 1rem;
    border-radius: 5px;
}

.ck-summary__lines {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-block-end: 1.1rem;
}

.ck-summary__line {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.ck-summary__line-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ck-summary__line-name {
    font-size: clamp(0.6888rem, calc(0.6356rem + 0.2272vw), 0.84rem);
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-summary__line-variant {
    font-size: clamp(0.6068rem, calc(0.5599rem + 0.2001vw), 0.74rem);
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-summary__line-qty {
    font-size: clamp(0.6068rem, calc(0.5599rem + 0.2001vw), 0.74rem);
    color: #999;
}

.ck-summary__line-price {
    font-size: clamp(0.6888rem, calc(0.6356rem + 0.2272vw), 0.84rem);
    color: #333;
    white-space: nowrap;
}

.ck-summary__line-remove {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-bg-subtle, #f2f2f2);
    color: #999;
    font-size: 1rem;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

    .ck-summary__line-remove:hover {
        background: #fde2e2;
        color: #d64545;
    }

    .ck-summary__line-remove:disabled {
        opacity: .5;
        cursor: default;
    }

.ck-summary__coupon {
    display: flex;
    gap: 0.5rem;
    margin-block-end: 1.1rem;
}

    .ck-summary__coupon input {
        flex: 1;
        border: 1px solid #ddd;
        padding: 0.55rem 0.7rem;
        font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
        background: #fff;
        border-radius: 5px;
    }

    .ck-summary__coupon button {
        background: var(--color-primary);
        border: 1px solid var(--color-primary);
        border-radius: 4px;
        padding: 0 0.9rem;
        font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
        cursor: pointer;
    }

.ck-summary__view-coupons {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: none;
    background: none;
    padding: 0;
    margin-block-end: 1rem;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    font-weight: 600;
    color: #222;
    cursor: pointer;
    text-underline-offset: 2px;
}

    .ck-summary__view-coupons:hover {
        opacity: 0.85;
    }

.ck-summary__totals {
    border-block-start: 1px solid #ddd;
    padding-block-start: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

    .ck-summary__totals > div {
        display: flex;
        justify-content: space-between;
        font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
        color: #555;
    }

.ck-summary__total {
    font-weight: 700;
    font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
    border-block-start: 1px solid #ddd;
    margin-block-start: 0.35rem;
    padding-block-start: 0.5rem;
}

.ck-summary__pay:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ck-summary__secure {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    color: #999;
    text-align: center;
    margin-block-start: 0.9rem;
    line-height: 1.4;
}

.ck-page {
    padding-bottom: 2rem;
}

.ck-breadcrumb {
    margin-bottom: 1rem;
}

.ck-form {
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 1.75rem 1.75rem 0.5rem;
    border-radius: 5px;
}

.ck-form__title {
    font-size: clamp(1.066rem, calc(0.9836rem + 0.3515vw), 1.3rem);
    font-weight: 700;
    color: var(--color-ink);
}

.ck-section {
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--color-border);
}

    .ck-section:last-of-type {
        border-bottom: none;
        margin-bottom: 0.5rem;
    }

.ck-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-ink);
}

.ck-fulfillment__option--active {
    border-color: var(--color-primary);
    background: var(--color-bg-subtle);
    color: var(--color-ink);
    border-radius: 5px;
}

.ck-fulfillment__option input {
    accent-color: var(--color-primary);
}

.ck-field__input {
    width: 100%;
    border: 1px solid #ddd;
    padding: 0.65rem 0.75rem;
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    border-radius: 5px;
}

    .ck-field__input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(255, 74, 131, 0.15);
    }

.ck-field__action {
    padding: 0 1rem;
    cursor: pointer;
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    white-space: nowrap;
    border-color: var(--color-primary);
    background: var(--color-primary);
    border-radius: 8px;
}

    .ck-field__action:hover {
        background: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
    }

.ck-payment-option--active {
    border-color: var(--color-primary);
    background: var(--color-bg-subtle);
    color: var(--color-ink);
}

.ck-payment-option input {
    accent-color: var(--color-primary);
}

.ck-terms {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .ck-terms input[type="checkbox"] {
        margin: 0;
        flex: 0 0 auto;
    }

.ck-summary__title {
    color: var(--color-ink);
    font-weight: 700;
}

.ck-summary__thumb {
    width: 64px;
    height: 64px;
    min-width: 64px;
    flex: 0 0 64px;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient( 135deg, var(--color-bg-subtle), var(--color-border) );
}

    .ck-summary__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ck-summary__total span:last-child {
    font-size: clamp(0.861rem, calc(0.7945rem + 0.2839vw), 1.05rem);
}

.ck-summary__pay {
    width: 100%;
    border: none;
    padding: 0.85rem;
    font-size: clamp(0.7544rem, calc(0.6961rem + 0.2488vw), 0.92rem);
    cursor: pointer;
    margin-block-start: 1.1rem;
    background: var(--color-primary);
    border-radius: 8px;
    color: #ffffff;
    font-weight: 600;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

    .ck-summary__pay:active:not(:disabled) {
        transform: scale(0.99);
    }

.checkout-confirmation {
    text-align: center;
    padding: 4rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-subtle);
}

    .checkout-confirmation h2 {
        color: var(--color-ink);
        margin-bottom: 0.5rem;
    }

    .checkout-confirmation p {
        color: var(--color-muted);
        margin-bottom: 1.25rem;
    }

.product-detail__wishlist {
    border: 1px solid var(--color-border);
    background: #fff;
    box-shadow: none;
    font-size: clamp(0.902rem, calc(0.8323rem + 0.2975vw), 1.1rem);
    line-height: 1;
    color: #8a8a8a;
    padding: 0.5rem 0.7rem;
}

.product-detail__wishlist--active {
    color: var(--color-danger, #e23a63);
    border-color: var(--color-danger, #e23a63);
}

.product-detail__actions {
    display: flex;
    gap: 0.75rem;
    margin-block-start: 0.75rem;
}

    .product-detail__actions .button {
        flex: 1;
    }

.product-detail__tabs {
    display: flex;
    gap: 2rem;
    border-bottom: 1px solid var(--color-border);
    margin-block-start: 3rem;
}

.product-detail__tab {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0.9rem 0.1rem;
    font-weight: 600;
    color: #8a8a8a;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.product-detail__tab--active {
    color: var(--color-primary, #111);
    border-bottom-color: var(--color-primary, #111);
}

.product-detail__tab-panel {
    padding-block: 1.5rem;
}

.product-detail__long-images {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 720px;
}

    .product-detail__long-images img {
        width: 100%;
        display: block;
    }

.product-detail__empty-panel {
    text-align: center;
    color: #8a8a8a;
    padding-block: 3rem;
}

/* =========================================================
   PRODUCT DETAIL LAYOUT (pd-*)
   ========================================================= */

.pd-layout {
    width: 100%;
   
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 3%;
    box-sizing: border-box;
    margin-top: 3rem;
}

.pd-selected-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0.5rem 0rem;
}

.sf-dropdown::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: 100%;
    height: 16px;
}

.has-submenu:hover .sf-submenu {
    display: flex;
}

.pd-layout--below-tabs {
    margin-block-start: 0;
    padding-block-start: 0;
    align-items: flex-start;
    overflow: visible;
}

.pd-gallery {
    flex: 0 0 52%;
    width: 52%;
    min-width: 0;
    position: relative;
}

/* Main image container */

.pd-main-img-wrap {
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}

.pd-main-img__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 2rem;
    height: 2rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.55);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .pd-main-img__arrow:hover {
        background: #fff;
    }

.pd-main-img__arrow--prev {
    left: 0.75rem;
}

.pd-main-img__arrow--next {
    right: 0.75rem;
}

.pd-main-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
    border-radius: 4px;
}

/* Product genuinely has no images - a plain placeholder box instead of padding the gallery
   out with unrelated demo photos. */
.pd-main-img--empty {
    aspect-ratio: 1 / 1;
    background: var(--color-bg-subtle, #f3f3f3);
    cursor: default;
}


.pd-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin-block-start: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: 0.25rem;
    /* Horizontal swipe on touch; vertical gestures still scroll the page. */
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

    .pd-thumbs--dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        user-select: none;
    }

        .pd-thumbs--dragging .pd-thumb {
            cursor: grabbing;
        }

/* Keyring customization (Product.IsKeyringCustomizable) - optional engrave/color/plate picker
   shown on the PDP before add-to-cart. See ProductDetail.razor's pd-customize block. */
.pd-customize {
    margin-block: 0.75rem;
}

.pd-customize__toggle {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px dashed #C42B62;
    border-radius: 999px;
    background: #FFF5F8;
    color: #C42B62;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

    .pd-customize__toggle small {
        font-weight: 400;
        color: #888;
    }

.pd-customize__panel {
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 1rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.pd-customize__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .pd-customize__header strong {
        font-size: 0.92rem;
    }

.pd-customize__close {
    border: none;
    background: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: #999;
}

.pd-customize__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0;
}

/* ---------- Keyring customize page (/customize-keyring/{Slug}) ----------
   Dark control panel + white photo panel, rounded as one card - see KeyringCustomize.razor. */
.kc-card {
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    max-width: 900px;
    margin: 1.5rem auto 3rem;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}

.kc-card__panel {
    background: linear-gradient(160deg, #1f1f2b 0%, #2b2440 55%, #3a2a4d 100%);
    color: #fff;
    padding: 2rem 1.85rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.kc-card__heading {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kc-card__section {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-block-end: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.kc-card__label {
    font-size: .82rem;
    color: rgba(255, 255, 255, .7);
}

.kc-card__swatches {
    display: flex;
    gap: .6rem;
}

.kc-card__swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.kc-card__swatch--active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .3);
}

.kc-card__plate {
    border: 1px solid rgba(255, 255, 255, .3);
    background: transparent;
    color: #fff;
    border-radius: 999px;
    padding: .4rem 1rem;
    font-size: .8rem;
    cursor: pointer;
}

.kc-card__plate--active {
    background: #fff;
    color: #1f1f2b;
    border-color: #fff;
    font-weight: 700;
}

.kc-card__input {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 10px;
    color: #fff;
    padding: .6rem .8rem;
    font-size: .9rem;
    text-transform: uppercase;
}

    .kc-card__input::placeholder {
        color: rgba(255, 255, 255, .4);
        text-transform: none;
    }

.kc-card__price {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .95rem;
    color: rgba(255, 255, 255, .8);
}

    .kc-card__price strong {
        font-size: 1.3rem;
        color: #fff;
    }

.kc-card__add {
    margin-top: auto;
    border: none;
    border-radius: 999px;
    background: #4f7cff;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    padding: .85rem 1.5rem;
    cursor: pointer;
}

    .kc-card__add:hover {
        opacity: .92;
    }

.kc-card__preview {
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem 1.5rem;
    gap: 1rem;
}

.kc-card__dots {
    position: absolute;
    top: 16px;
    right: 18px;
    display: flex;
    gap: 6px;
}

.kc-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.kc-card__dot--yellow {
    background: #f5c542;
}

.kc-card__dot--green {
    background: #43c463;
}

.kc-card__dot--red {
    background: #e5534b;
}

.kc-card__photo {
    position: relative;
    width: min(280px, 80%);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .kc-card__photo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 20px 25px rgba(0, 0, 0, .18));
    }

.kc-card__photo-swatch {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}

.kc-card__photo-name {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .2rem .7rem;
    border-radius: 999px;
}

.kc-card__hint {
    margin: 0;
    font-size: .75rem;
    color: var(--color-muted, #999);
    text-align: center;
    max-width: 280px;
}

.pd-customize__photo {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

    .pd-customize__photo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.pd-customize__photo-swatch {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.9);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    box-sizing: border-box;
}

.pd-customize__photo-name {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-customize__preview-hint {
    font-size: 0.72rem;
    color: #999;
    margin: 0;
}

.pd-customize__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #444;
}

    .pd-customize__field input[type="text"] {
        padding: 0.55rem 0.75rem;
        border: 1px solid #ddd;
        border-radius: 12px;
        font-size: 0.9rem;
        text-transform: uppercase;
    }

.pd-customize__swatches {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pd-customize__swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

.pd-customize__swatch--active {
    border-color: #C42B62;
}

.pd-customize__plate-options {
    display: flex;
    gap: 0.5rem;
}

.pd-customize__plate-btn {
    flex: 1;
    padding: 0.5rem;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 0.85rem;
    cursor: pointer;
}

.pd-customize__plate-btn--active {
    border-color: #C42B62;
    color: #C42B62;
    font-weight: 600;
    background: #FFF5F8;
}


.pd-info::-webkit-scrollbar {
    display: none;
}



.pd-info__actions {
    position: sticky;
    bottom: clamp(-12rem, calc(-10rem - 1vw), -14rem);
    background: #fff;
    padding-block-start: 0.75rem;
    border-top: 1px solid #ebebeb;
    margin-block-start: 0.5rem;
}

.pd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    color: #888;
    margin-block-end: 1rem;
    justify-content: flex-end;
    padding: 0 0.5rem;
}

    .pd-breadcrumb a {
        color: #757575;
        font-size: clamp(0.6396rem, calc(0.7rem + 0.2109vw), 0.875rem);
    }

        .pd-breadcrumb a:hover {
            color: #555;
            text-decoration: underline;
        }

    .pd-breadcrumb span {
        color: #757575;
        font-weight: 400;
        font-size: clamp(0.6396rem, calc(0.7rem + 0.2109vw), 0.875rem);
    }

/* Product detail breadcrumb — matches titto.co.kr: 14px #757575 text,
   thin chevron separators, flush with the right edge of the content column. */
.pd-breadcrumb.pd-breadcrumb--product {
    gap: 0.625rem;
    margin: 0.6875rem 0 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: normal;
    color: #757575;
}

    .pd-breadcrumb.pd-breadcrumb--product a,
    .pd-breadcrumb.pd-breadcrumb--product span {
        font-size: 0.875rem;
        font-weight: 400;
        color: #757575;
    }

        /* Reference casing: "Home", "SHOP ALL", "MAKEUP", "Lip & Cheek". */
        .pd-breadcrumb.pd-breadcrumb--product a:first-child {
            text-transform: capitalize;
        }

        .pd-breadcrumb.pd-breadcrumb--product .pd-breadcrumb__parent {
            text-transform: uppercase;
        }

        .pd-breadcrumb.pd-breadcrumb--product a:hover {
            color: #555;
        }

    .pd-breadcrumb.pd-breadcrumb--product .pd-breadcrumb__sep {
        display: inline-flex;
        align-items: center;
    }

        .pd-breadcrumb.pd-breadcrumb--product .pd-breadcrumb__sep svg {
            width: 6px;
            height: 11px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

[dir="rtl"] .pd-breadcrumb.pd-breadcrumb--product .pd-breadcrumb__sep svg {
    transform: scaleX(-1);
}

@media (min-width: 901px) {
    .pd-breadcrumb--product + .pd-layout {
        margin-top: 1.75rem;
    }
}

.pd-viewers {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    width: fit-content;
    margin-block-end: 0.9rem;
    font-weight: 500;
    border: 1px rgba(200, 200, 200, .3) solid;
    border-bottom: 1px rgba(150, 150, 150, .3) solid;
    border-right: 1px rgba(150, 150, 150, .3) solid;
    -webkit-box-shadow: 1px 1px 2px rgba(170, 170, 170, 0.2);
    box-shadow: 1px 1px 2px rgba(170, 170, 170, 0.2);
}

.pd-viewers__count {
    color: #e12d2d;
    font-weight: 700;
}

.pd-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 0.35rem;
}

.pd-title {
    font-size: clamp(0.943rem, calc(0.8701rem + 0.311vw), 20px);
    font-weight: 400;
    color: #000000;
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.pd-share {
    flex-shrink: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    color: #000;
    cursor: pointer;
    padding: 0.15rem;
    margin-block-start: 0.2rem;
}

    .pd-share:hover {
        color: #555;
    }

.pd-tagline {
    margin: 0 0 8px;
    color: #555;
    font-size: clamp(0.5637rem, calc(0.5201rem + 0.186vw), 0.6875rem);
    line-height: 1.5;
}


.pd-desc {
    font-size: clamp(0.75rem, calc(0.7rem + 0.15vw), 0.875rem);
    line-height: 1.4;
    margin: 0 0 0.85rem;
    color: #333;
}

/* Admin-entered paragraph: keep its line breaks, otherwise styled exactly like .pd-desc */
.pd-desc--additional {
    white-space: pre-line;
}

/* ── RIGHT: sticky info panel ────────────────────────────────────────────── */

.pd-info {
    align-self: flex-start;
    flex: 1.1;
    min-width: 0;
}

/* Viewers badge */



.pd-price-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-block-end: 0.85rem;
    border-block: 1px solid #f2f2f2;
    padding-block: 0.75rem;
}

.pd-compare,
.pd-price-original {
       display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-block-end: 0.85rem;
    border-block: 1px solid #ddd;
    padding-block: 0.75rem;

}

.pd-price-main {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.pd-discount-rate {
    font-family: var(--font-price);
    font-size: clamp(0.861rem, calc(0.7945rem + 0.2839vw), 1.05rem);
    font-weight: 800;
    color: #e02020;
}

.pd-price {
    font-family: var(--font-price);
    font-size: clamp(1.025rem, calc(0.9458rem + 0.338vw), 1.25rem);
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.02em;
}

/* Thin rule */

.pd-rule {
    border: none;
  
}

.pd-quickfacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.pd-quickfacts__chip {
    padding: 0.35rem 0.7rem;
    border: 1px solid #ebebeb;
    border-radius: 999px;
    background: #fafafa;
    font-size: clamp(0.6rem, calc(0.56rem + 0.18vw), 0.72rem);
    color: #666;
}

    .pd-quickfacts__chip strong {
        color: var(--color-text);
        font-weight: 600;
    }

.pd-quickfacts__chip--verified {
    background: #eafaf0;
    border-color: #bdeccf;
    color: #157a3c;
}

/* Option rows */

.pd-option-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 0.6rem;
}

.pd-option-label {
    flex: 0 0 90px;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.875rem);
    font-weight: 400;
    color: #696969;
    line-height: 1.2;
}


.pd-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Pretendard as titto.co.kr serves it for its option selects (their weight 400 = the Medium file).
   Own family name so only the option dropdown uses it - the rest of the site is unchanged. */
@font-face {
    font-family: 'Pretendard PD Option';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2-subset/Pretendard-Medium.subset.woff2') format('woff2');
}

/* Matches titto.co.kr's product option select: 13.33px #444 Pretendard, 1px #dfdfdf border,
   3px radius, 10px left padding and a grey chevron at 98%. */
.pd-option-dropdown {
    margin-top: 0.5rem;
    height: 36.4px;
    min-height: 0;
    width: 100%;
    padding: 0 28px 0 10px;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 33'%3E%3Cpolyline points='7,9 22.5,24 38,9' fill='none' stroke='%23555' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 98% center / auto 8px;
    -webkit-appearance: none;
    appearance: none;
    color: #444;
    font-family: 'Pretendard PD Option', var(--font-sans);
    font-size: 0.8333rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    transition: border-color .2s ease;
}

    .pd-option-dropdown:hover {
        border-color: #c6c6c6;
    }

[dir="rtl"] .pd-option-dropdown {
    padding: 0 10px 0 28px;
    background-position: 2% center;
}

.pd-swatch {
    cursor: pointer;
    font: inherit;
}

.pd-swatch--pill {
    height: 34px;
    padding: 0 0.9rem;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text);
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    font-weight: 600;
    transition: border-color .12s ease, color .12s ease;
}

    .pd-swatch--pill:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

.pd-swatch--color {
    position: relative;
    width: 40px;
    height: 40px;
    transition: box-shadow .12s ease;
}


.pd-swatch--picked.pd-swatch--pill {
    border-color: var(--color-primary);
}

.pd-swatch__check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}


.pd-option-row--color {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.pd-option-row__main {
    flex: 1;
    min-width: 0;
}

.pd-option-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pd-option-count {
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    color: var(--color-muted);
}


.pd-shade-preview {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.pd-select--sm {
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    padding: 0.4rem 0.55rem;
}

/* Kakao banner (yellow, exactly as Titto) */

.pd-kakao-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #25D366;
    color:#fff;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    margin-block: 0.75rem 0.6rem;
}

.pd-kakao-btn--sm {
    margin-block: 0.5rem 0.4rem;
}

.pd-kakao-btn__icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    background: #3a1d1d;
    color: #FFE812;
    border-radius: 4px;
    font-size: clamp(0.574rem, calc(0.5296rem + 0.1893vw), 0.7rem);
    flex-shrink: 0;
}

.pd-kakao-btn--whatsapp {
    font-size: 1rem;
    font-weight:400;
    color:#000;
    width: 100%;
    max-width: 250px;
    height: 30px;
    line-height: 30px;
    padding: 2px 10px;
    margin: 5px 0 0;
    background: rgba(0, 0, 0, .03);
    border: 0px #d0d0d0 solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
    display: table;
}

    .pd-kakao-btn--whatsapp:hover {
        text-decoration: none;
    }

.pd-kakao-btn__icon--whatsapp {
    background: #25D366;
}

    .pd-kakao-btn__icon--whatsapp img {
        display: block;
    }

/* Footer "chat" pill (WhatsApp here, KakaoTalk on titto.co.kr): a light-gray
   rounded bar with a round brand badge, the label, and a faint trailing arrow.
   The same pill is reused for the influencer CTA under the wordmark. */
.sf-footer__pill {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    width: 100%;
    max-width: 250px;
    margin: 0;
    padding: 0.5rem 0.85rem;
    background: #f3f3f3;
    border: 0;
    border-radius: 8px;
    color: #222;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .sf-footer__pill:hover {
        background: #ebebeb;
        color: #222;
        text-decoration: none;
    }

.sf-footer__pill--wide {
    max-width: 300px;
}

.sf-footer__pill-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #25D366;
    flex-shrink: 0;
}

    .sf-footer__pill-icon img {
        display: block;
        width: 15px;
        height: 15px;
    }

.sf-footer__pill-arrow {
    display: block;
    margin-inline-start: auto;
    flex-shrink: 0;
    color: #c4c4c4;
}

    .sf-footer__pill-arrow svg {
        display: block;
        width: 18px;
        height: 10px;
    }

[dir="rtl"] .sf-footer__pill-arrow svg {
    transform: scaleX(-1);
}

/* Footer wordmark links home; the link hugs the image so only the logo is
   clickable and the image keeps its own sizing and margins. */
.sf-footer__logo-link {
    display: block;
    width: fit-content;
    max-width: 100%;
}

/* Shipping notice */

.pd-shipping-notice {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    background: #f8f8f8;
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    color: #555;
    line-height: 1.5;
    margin-block-end: 0.75rem;
    margin-top: 0.8rem;
}

.pd-shipping-notice--sm {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
}

.pd-shipping-notice__icon {
    width: 28px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-brown);
    color: #fff;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
}

.pd-shipping-notice__timer {
    color: #e23a63;
    font-weight: 700;
}

/* Payment rows */

.pd-payment-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 0.5rem;
}

    .pd-payment-row > * {
        flex: 1;
    }

.pd-info-tables {
    width: 100%;
    margin-top: 1rem;
}

.pd-info-accordion {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.pd-info-accordion__trigger {
    width: 100%;
    min-height: 52px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: #fff;
    color: #333;
    font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

    .pd-info-accordion__trigger:hover {
        color: #111;
    }

.pd-info-accordion__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.1275rem, calc(1.0404rem + 0.3718vw), 1.375rem);
    font-weight: 300;
    color: #777;
}

/* Modal */

.pd-info-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-info-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.pd-info-modal__content {
    position: relative;
    z-index: 1;
    width: min(600px, calc(100% - 32px));
    max-height: 80vh;
    overflow-y: auto;
    padding: 32px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.pd-info-modal__close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    font-size: clamp(1.435rem, calc(1.3241rem + 0.4732vw), 1.75rem);
    line-height: 1;
    cursor: pointer;
    color: #222;
}

.pd-info-modal__content h3 {
    margin: 0 0 20px;
    font-size: clamp(1.1275rem, calc(1.0404rem + 0.3718vw), 1.375rem);
}

.pd-info-list {
    margin: 0;
    list-style: none;
    padding: 0;
}

/* Bulk-discount popup (ProductDetail.razor) */

.pd-discount-popup {
    max-width: 380px;
    text-align: center;
    padding: 40px 32px 32px;
}

.pd-discount-popup__confetti {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    animation: pdDiscountPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes pdDiscountPop {
    from {
        transform: scale(0.4);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.pd-discount-popup h3 {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
}

.pd-discount-popup__price {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-primary, #2f8f4e);
    margin: 0 0 0.75rem;
}

.pd-discount-popup__note {
    color: var(--color-ink-muted, #666);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

.pd-info-list li {
    margin-bottom: 14px;
    color: #555;
    font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
    line-height: 1.6;
}

    .pd-info-list li:last-child {
        margin-bottom: 0;
    }

.pd-payment-naver--sm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    color: inherit;
    text-decoration: none;
}

.pd-naver-n {
    font-weight: 600;
    font-size: clamp(0.7687rem, calc(0.7093rem + 0.2536vw), 0.9375rem);
    line-height: 1.2;
    color: #00b900;
}

.pd-btn-naverpay {
    background: #FFE812;
    color: #3a1d1d;
    border: none;
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pd-btn-kako {
    background-color: var(--color-brown) !important;
    border-radius: 4px;
    color: #fff !important;
}

.pd-payment-naver__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.pd-payment-info {
    font-size: clamp(0.5637rem, calc(0.5201rem + 0.186vw), 0.6875rem);
    line-height: 1.3;
    color: #888;
}

.pd-payment-kakao {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0;
    border-radius: 4px;
}

.pd-btn-kakao {
    background: #FFE812;
    color: #3a1d1d;
    border: none;
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pd-btn-kakao--whatsapp {
    background: #25D366;
    color: #fff;
}

.pd-btn-icon {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    font-size: clamp(0.574rem, calc(0.5296rem + 0.1893vw), 0.7rem);
    color: #555;
    cursor: pointer;
    box-shadow: none;
    padding: 0;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.pd-btn-icon--yellow {
    background: #FFE812;
    border-color: #FFE812;
}

/* Event notice line */

.pd-event-notice {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    color: #888;
    margin: 0.3rem 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pd-event-label {
    background: #f0f0f0;
    color: #555;
    border-radius: 2px;
    padding: 0.1rem 0.35rem;
    font-size: clamp(0.533rem, calc(0.4918rem + 0.1758vw), 0.65rem);
    font-weight: 700;
}

.pd-event-link {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    color: #e9845b;
}

/* Order amount row */

.pd-order-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-block: 0.6rem;
    margin-block-start: 0.35rem;
}

.pd-order-label {
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    color: #888;
}

.pd-order-value strong {
    font-family: var(--font-price);
    font-size: clamp(1.025rem, calc(0.9458rem + 0.338vw), 1.25rem);
    font-weight: 800;
    color: #1a1a1a;
}

.pd-order-value small {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    color: #aaa;
    margin-inline-start: 0.25rem;
}


.pd-thumb {
    position: relative;
    /* Keep a fixed size so extra thumbnails overflow into a scrollable strip instead of squashing. */
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 120px;
    height: 100px;
    aspect-ratio: 1 / 1;
    background: #f7f7f7;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.4;
    filter: grayscale(40%);
    border: 1px solid transparent;
    border-radius: 5px;
    transition: opacity .18s ease, filter .18s ease, border-color .18s ease;
}

    .pd-thumb.pd-thumb--active {
        opacity: 1 !important;
        filter: none !important;
    }

    .pd-thumb:hover {
        opacity: 0.75;
        filter: grayscale(0%);
    }

    .pd-thumb.pd-thumb--active:hover {
        opacity: 1 !important;
        filter: none !important;
    }

    .pd-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 5px;
        -webkit-user-drag: none;
        pointer-events: none;
    }

.pd-discount-pct {
    color: #ae0000;
    font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
    font-weight: 600;
}

.pd-select {
    width: 100%;
    padding: 0 12px;
    color: #555;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    outline: none;
}

    .pd-select:focus-visible {
        border-color: var(--color-primary);
    }

.pd-shipping-notice strong {
    color: #333;
    font-weight: 500;
}

.pd-payment-naver__label,
.pd-kakao-label {
    flex: 0 0 auto;
    font-size: clamp(0.6rem, calc(0.555rem + 0.19vw), 0.75rem);
    color: #333;
    line-height: 1.2;
}

.pd-order-value {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.pd-order-note {
    margin: 3px 0 12px;
    text-align: right;
    color: #aaa;
    font-size: clamp(0.4612rem, calc(0.4255rem + 0.1522vw), 0.5625rem);
}

.pd-order-note--discount {
    color: #2e9e4f;
    font-weight: 600;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
}

.pd-btn-cart,
.pd-btn-buy,
.pd-wishlist {
    height: 55px;
    border: 1px solid #d1d1d1;
    background: #fff;
    width: 100%;
    cursor: pointer;
    font-weight: 400;
    color: #222;
    font-size: clamp(1rem, calc(0.95rem + 0.25vw), 1rem);
}

    .pd-btn-cart:hover {
        color: #222;
        box-shadow: 0 6px 16px rgba(20, 20, 20, 0.12);
    }

.pd-btn-buy {
    background: var(--color-brown);
    color: #fff;
    padding-inline: 1.5rem;
}

    .pd-btn-buy:hover {
        background: var(--color-brown);
        border-color: var(--color-brown);
    }

.pd-wishlist {
    font-size: clamp(1.025rem, calc(0.9458rem + 0.338vw), 1.25rem);
    border-color: var(--color-border);
    color: #777;
}

.pd-wishlist--active {
    color: #fff;
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

@media (min-width: 901px) {
    .pd-mobile-bar {
        display: none !important;
    }
}

.pd-feedback {
    margin-top: 10px;
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    color: #3a8c3a;
    margin-block: 0.4rem 0;
}

/* ── LEFT: gallery ────────────────────────────────────────────────────────── */

.pd-payment-naver__label {
    text-align: left;
}

/* CTA buttons row */

.pd-actions {
    display: grid;
    grid-template-columns: 4fr 4fr 1fr;
    gap: 0.4rem;
    align-items: center;
}

/* Feedback */

/* ── 2. FULL-WIDTH TABS BAR ──────────────────────────────────────────────── */


.pd-tabs-bar {
    background: #fff;
    position: sticky;
    /* --sf-header-offset collapses to 0 when the header slides away;
       --sf-header-h stays constant so the spacer never resizes. */
    top: var(--sf-header-offset, 132px) !important;
    width: calc(100% + 5rem);
    margin-inline: -2.5rem;
    margin-bottom: 1rem;
    z-index: 39;
}


.sf-header--hide-on-scroll {
    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
}



.pd-tabs-bar {
    transition: top .22s ease;
}

.sf-header-spacer {
    /* Height is constant now, so nothing to animate. Animating it used to pull
       the page up as the header hid, which retriggered the scroll handler. */
    transition: none;
}

.pd-tab {
    margin-inline-end: 0;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: clamp(1rem, calc(1rem + 0.5vw), 1.2rem);
    font-weight: 500;
    color: #aaa;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
}

.pd-tab--active {
    color: #555;
    border-bottom-color: #555;
}

.pd-tab:hover {
    color: #555;
}

.pd-tabs-inner {
    width: 100%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    margin-inline: auto;
    padding: 0.8rem 0.5rem;
    background: #fff;
    position: relative;
    z-index: 100000;
    box-sizing: border-box;
}

/* ── 3. BELOW-TABS TWO-COLUMN ────────────────────────────────────────────── */

.pd-sticky-cta {
    flex: 0 1 530px;
    width: min(530px, 100%);
    max-width: 100%;
    position: sticky;
    top: calc(var(--sf-header-offset, 140px) + -65px);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #ebebeb;
    overflow-x: visible !important;
    min-height: calc(100vh - 100px);
    border-radius: 8px
}

.pd-sticky-cta__content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.pd-sticky-cta__actions {
    flex-shrink: 0;
    background: #fff;
    padding: 1rem 0 0;
    border-top: 1px solid #ebebeb;
}

.pd-tab-content {
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
}

.pd-detail-images {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 0;
}

    .pd-detail-images img {
        display: block;
        width: 85%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

/* Shipping / returns info below detail images */

.pd-info-tables__heading {
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 700;
    color: #333;
    margin: 1.25rem 0 0.5rem;
    border-bottom: 1px solid #ebebeb;
    padding-block-end: 0.4rem;
}

.pd-info-list li::before {
    content: "· ";
    color: #aaa;
}

/* Reviews */

.pd-reviews-head {
    padding-block-start: 1.5rem;
}

.pd-reviews-heading {
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #333;
    margin: 0 0 0.5rem;
}

.pd-reviews-rule {
    border: none;
    border-top: 1px solid #ddd;
    margin: 0 0 1.25rem;
}

/* Review write form */

.pd-review-form {
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    padding: 1rem;
    margin-block-end: 1.5rem;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
}

.pd-review-form__row {
    display: flex;
    gap: 1rem;
    margin-block-end: 0.6rem;
}

    .pd-review-form__row label {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
        color: #555;
        margin: 0;
    }

.pd-review-form__input {
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0.3rem 0.5rem;
    font: inherit;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
}

.pd-review-form__body-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-block-end: 0.5rem;
}

.pd-review-form__textarea {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0.4rem 0.5rem;
    font: inherit;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    resize: vertical;
}

/* Styled drag-and-drop-looking upload zone wrapping the actual <InputFile> (which stays a
   real file input, invisibly stretched to fill the zone, so click-to-browse still works
   natively). Genuine drag-and-drop of files onto this zone isn't wired up - that needs its
   own JS interop to hand dropped files to Blazor's InputFile, not just CSS. */
.pd-review-form__dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.5rem 1rem;
    border: 1.5px dashed #e3b9c6;
    border-radius: 10px;
    background: #fef6f9;
    color: var(--color-primary);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .pd-review-form__dropzone:hover {
        border-color: var(--color-primary);
        background: #fdeef3;
    }

    .pd-review-form__dropzone--disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    .pd-review-form__dropzone-text {
        font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
        color: var(--color-muted, #777);
    }

        .pd-review-form__dropzone-text strong {
            color: var(--color-primary);
            font-weight: 700;
        }

    .pd-review-form__dropzone-input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.pd-review-form__footer {
    display: flex;
    gap: 0.6rem;
    margin-block-start: 0.5rem;
}

.pd-review-form__discard {
    flex: 1 1 0;
    border: 1px solid var(--color-border, #ddd);
    background: #fff;
    color: var(--color-muted, #666);
    font-weight: 600;
    cursor: pointer;
}

    .pd-review-form__discard:hover {
        background: var(--color-bg-subtle, #f7f7f7);
    }

.pd-review-form__upload {
    flex: 2 1 0;
}

.pd-review-form__photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
}

.pd-review-form__guest-notice {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-block: 0.5rem;
    text-align: center;
}

    .pd-review-form__guest-notice p {
        color: var(--color-muted, #6b6b6b);
        font-size: clamp(0.82rem, calc(0.78rem + 0.15vw), 0.95rem);
        line-height: 1.5;
    }

    .pd-review-form__guest-notice .auth-submit {
        display: inline-block;
        text-decoration: none;
        text-align: center;
    }

.pd-review-form__photo {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background: #f7f7f7;
    flex-shrink: 0;
}

    .pd-review-form__photo img,
    .pd-review-form__photo video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.pd-review-form__photo--loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: clamp(0.902rem, calc(0.8323rem + 0.2975vw), 1.1rem);
}

.pd-review-form__photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: clamp(0.574rem, calc(0.5296rem + 0.1893vw), 0.7rem);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Review photo thumbnails on the product page's review list */
.rv-list__images {
    display: flex;
    gap: 0.4rem;
    margin-block-start: 0.4rem;
    flex-wrap: wrap;
}

.rv-list__image {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e6e6e6;
    cursor: pointer;
}

.pd-review-form__submit {
    background: #666;
    color: #fff;
    border: none;
    border-radius: 2px;
    padding: 0.4rem 0.8rem;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    cursor: pointer;
    box-shadow: none;
    height: fit-content;
    flex-shrink: 0;
}

.pd-review-form__stars-row {
    display: flex;
    gap: 0.75rem;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    color: #555;
}

.pd-star-label {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    cursor: pointer;
}

/* Individual review card (left text + right meta) */

.pd-review {
    margin-block-end: 0;
}

.pd-review__inner {
    display: flex;
    gap: 1.5rem;
    padding-block: 1.5rem;
    align-items: flex-start;
}

.pd-review__left {
    flex: 1 1 0;
    min-width: 0;
}

.pd-review__title {
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    font-weight: 700;
    color: #222;
    margin: 0 0 0.4rem;
}

.pd-review__body {
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    color: #555;
    line-height: 1.65;
    margin: 0 0 0.75rem;
}

.pd-review__photos {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-block-end: 0.65rem;
}

    .pd-review__photos img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 3px;
        border: 1px solid #eee;
    }

.pd-review__helpful {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    color: #aaa;
    margin: 0;
}

    .pd-review__helpful strong {
        color: #e9845b;
    }

.pd-review__meta {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    border-left: 1px solid #ebebeb;
    padding-inline-start: 1rem;
}

.pd-review__meta-label {
    color: #aaa;
    font-weight: 600;
    margin-block-start: 0.4rem;
}

.pd-review__meta-val {
    color: #444;
}

.pd-review__stars {
    color: #f5a623;
    letter-spacing: 2px;
    font-size: clamp(0.574rem, calc(0.5296rem + 0.1893vw), 0.7rem);
}

.pd-review__divider {
    border: none;
    border-top: 1px solid #ebebeb;
    margin: 0;
}

/* Reviews tab: search/sort/rating/media toolbar + detailed review cards */

.pd-review-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 1.25rem 0;
}

.pd-review-toolbar__search {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: clamp(0.72rem, calc(0.68rem + 0.14vw), 0.85rem);
}

.pd-review-toolbar__select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    font-size: clamp(0.72rem, calc(0.68rem + 0.14vw), 0.85rem);
    color: var(--color-text);
}

.pd-review-toolbar__media {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: clamp(0.72rem, calc(0.68rem + 0.14vw), 0.85rem);
    color: var(--color-muted);
    white-space: nowrap;
}

.rv-detail-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rv-detail-card {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 1.5rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid #ebebeb;
}

.rv-detail-card__main {
    min-width: 0;
}

.rv-detail-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-inline-start: 1.5rem;
    border-inline-start: 1px solid #ebebeb;
}

.rv-detail-card__meta-row {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.rv-detail-card__meta-label {
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.rv-detail-card__lead-media {
    margin: 0.75rem 0;
}

    .rv-detail-card__lead-media img {
        width: 100%;
        max-width: 420px;
        border-radius: 8px;
        display: block;
    }

.rv-detail-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.rv-detail-card__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.rv-detail-card__who {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.rv-detail-card__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: clamp(0.72rem, calc(0.68rem + 0.14vw), 0.85rem);
    color: var(--color-ink);
}

.rv-detail-card__verified {
    color: var(--color-success, #1a9c5b);
    font-weight: 600;
    font-size: clamp(0.62rem, calc(0.58rem + 0.12vw), 0.72rem);
}

.rv-detail-card__stars {
    color: #f5a623;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.rv-detail-card__date {
    flex: 0 0 auto;
    color: var(--color-muted);
    font-size: clamp(0.65rem, calc(0.6rem + 0.14vw), 0.76rem);
}

.rv-detail-card__title {
    margin: 0 0 0.3rem;
    font-weight: 700;
    color: var(--color-ink);
    font-size: clamp(0.78rem, calc(0.72rem + 0.18vw), 0.92rem);
}

.rv-detail-card__body {
    margin: 0 0 0.6rem;
    color: var(--color-text);
    line-height: 1.55;
    font-size: clamp(0.74rem, calc(0.7rem + 0.14vw), 0.87rem);
}

.rv-detail-card__images {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .rv-detail-card__images img,
    .rv-detail-card__images video {
        width: 64px;
        height: 64px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid var(--color-border);
    }

/* Reviews footer: action buttons + pagination */

.pd-review-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding-block: 1rem;
    border-top: 1px solid #ebebeb;
}

.pd-review-footer__actions {
    display: flex;
    gap: 0.5rem;
}

.pd-review-footer__link {
    border: none;
    background: none;
    padding: 0;
    color: #777;
    font-size: clamp(0.68rem, calc(0.64rem + 0.12vw), 0.78rem);
    cursor: pointer;
}

    .pd-review-footer__link:hover {
        color: #333;
        text-decoration: underline;
    }

.pd-review-footer__sep {
    color: #ccc;
    font-size: 0.7rem;
}

/* Q&A */

.pd-qa-section {
    padding-block: 1.5rem;
}

.pd-qa-heading {
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 700;
    color: #333;
    margin: 0 0 0.75rem;
    letter-spacing: 0.03em;
}

.pd-qa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    margin-block-end: 0.75rem;
}

    .pd-qa-table th {
        padding: 0.5rem 0.5rem;
        border-bottom: 1px solid #e0e0e0;
        text-align: start;
        font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
        font-weight: 600;
        color: #888;
    }

    .pd-qa-table td {
        padding: 0.65rem 0.5rem;
        border-bottom: 1px solid #ebebeb;
        color: #444;
        vertical-align: middle;
    }

.pd-qa-title {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pd-qa-hit {
    display: inline-block;
    background: #4caf50;
    color: #fff;
    font-size: clamp(0.492rem, calc(0.454rem + 0.1623vw), 0.6rem);
    font-weight: 700;
    padding: 0.08rem 0.35rem;
    border-radius: 2px;
    vertical-align: middle;
}

.pd-qa-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
}

/* Shared outline button */

.pd-btn-outline {
    border: 1px solid #bbb;
    background: #fff;
    color: #555;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    padding: 0.4rem 0.9rem;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: none;
}

    .pd-btn-outline:hover {
        background: #f5f5f5;
    }

/* Pagination */

.pd-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding-block: 0.75rem;
}

.pd-page-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 0.4rem;
    border: 1px solid transparent;
    background: transparent;
    color: #888;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    cursor: pointer;
    box-shadow: none;
    border-radius: 2px;
}

    .pd-page-btn:hover:not(:disabled) {
        border-color: #ccc;
        color: #333;
    }

.pd-page-btn--active {
    background: #222;
    border-color: #222;
    color: #fff;
    border-radius: 50%;
}

.pd-page-btn:disabled {
    color: #ccc;
    cursor: default;
}

.pd-sticky-cta::-webkit-scrollbar {
    display: none;
}

/* ── 4. RELATED PRODUCTS RAIL ────────────────────────────────────────────── */

.pd-related {
    margin-inline: auto;
    padding-inline: 1.5rem;
    margin-block-start: 2.5rem;
    padding-block-start: 1.5rem;
}

.pd-related__rail {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-block-end: 0.5rem;
    scroll-snap-type: x proximity;
}

.pd-related-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
}

.pd-related-card__img {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f8f8f8;
    border-radius: 2px;
}

    .pd-related-card__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.2s ease;
    }

.pd-related-card:hover .pd-related-card__img img {
    transform: scale(1.04);
}

.pd-related-card__title {
    margin: 0;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pd-related-card__price {
    margin: 0;
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    font-weight: 500;
    color: #333;
}

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */

.pd-empty {
    text-align: center;
    color: #aaa;
    padding-block: 3rem;
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
}

.tier-pricing-table {
    margin-block: 1rem;
}

    .tier-pricing-table caption {
        text-align: start;
        font-weight: 600;
        margin-block-end: 0.5rem;
    }

.cart-table {
    margin-block-end: 1.5rem;
}

/* ---------- Account order history ---------- */

.acc-orders-page {
    margin-inline: auto;
    padding-block: 1rem 3rem;
}

.acc-orders-page__title {
    font-size: clamp(1.148rem, calc(1.0593rem + 0.3786vw), 1.4rem);
    margin-block-end: 1.25rem;
}

.acc-orders-empty {
    color: var(--color-muted);
}

.acc-orders-table-wrap {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}

.acc-orders-table {
    margin-block-end: 0;
}

    .acc-orders-table th {
        border-bottom-color: var(--color-border);
    }

.acc-order-status {
    display: inline-block;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--color-bg-subtle);
    color: var(--color-text);
    white-space: nowrap;
}

.acc-order-status--delivered {
    background: #e6f4ea;
    color: #1e7a34;
}

.acc-order-status--cancelled {
    background: #fce4e4;
    color: #b3261e;
}

.acc-order-status--returned {
    background: #fce4e4;
    color: #b3261e;
}

.acc-order-status--outfordelivery,
.acc-order-status--packed,
.acc-order-status--confirmed {
    background: var(--color-teal-tint);
    color: var(--color-primary-dark);
}

.acc-order-view {
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}

/* Below this width, each <tr> becomes its own card and cells stack with their column
   header shown as a label (from the `data-label` attribute added in the markup) - same
   table/data, just readable without horizontal scrolling on a phone. */

.cart-coupon {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-block-end: 1.5rem;
}

    .cart-coupon input {
        width: auto;
        flex: 1;
        max-width: 260px;
    }

.checkout-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}

    .checkout-layout .cart-summary {
        margin-inline-start: 0;
        max-width: none;
    }

.auth-form {
    max-width: 380px;
    margin: 3rem auto;
}

.auth-form--admin {
    background: var(--color-bg-subtle);
    padding: 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.al-page {
    min-height: 100vh;
    background: #fafaf8;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem 3rem;
}

.al-topbar {
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.al-icon-btn {
    color: var(--color-ink, #1b1b1b);
    font-size: clamp(1.148rem, calc(1.0593rem + 0.3786vw), 1.4rem);
    text-decoration: none;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.al-card {
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.al-logo {
    font-style: italic;
    font-size: clamp(1.968rem, calc(1.8159rem + 0.649vw), 2.4rem);
    color: var(--color-ink, #1b1b1b);
    margin-bottom: 2rem;
}

.al-heading {
    font-size: clamp(1.066rem, calc(0.9836rem + 0.3515vw), 1.3rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-ink, #1b1b1b);
    margin: 0 0 0.5rem;
}

.al-subheading {
    color: var(--color-muted, #767676);
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    margin: 0 0 2rem;
}

.al-error {
    margin-bottom: 1rem;
    text-align: left;
}

.al-form {
    text-align: left;
}

.al-field {
    display: block;
    position: relative;
    margin-bottom: 1.5rem;
}

    .al-field input {
        width: 100%;
        border: none;
        border-bottom: 1px solid var(--color-border, #ddd);
        padding: 0.5rem 0.25rem;
        font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
        background: transparent;
        outline: none;
    }

        .al-field input::placeholder {
            color: #b3b3b3;
        }

        .al-field input:focus {
            border-bottom-color: var(--color-primary, #1b1b1b);
        }

.al-field--password {
    display: flex;
    align-items: center;
}

    .al-field--password input {
        flex: 1;
    }

.al-field__toggle {
    position: absolute;
    right: 0.25rem;
    bottom: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
}

.al-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    color: var(--color-muted, #767676);
    margin-bottom: 1.5rem;
}

.al-secure {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.al-submit {
    width: 100%;
    padding: 0.9rem;
    background: #3a3527;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .al-submit:hover {
        background: #2a2619;
    }

.al-links {
    margin-top: 1.5rem;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: var(--color-muted, #767676);
}

    .al-links a {
        color: inherit;
        text-decoration: none;
    }

        .al-links a:hover {
            text-decoration: underline;
        }

.al-links__sep {
    margin: 0 0.5rem;
}

.account-nav {
    display: flex;
    gap: 1rem;
    margin-block: 1rem;
}

.cms-page {
    max-width: 800px;
    margin-inline: auto;
}

/* ---------- Login modal ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(26, 43, 20, .55);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.modal {
    position: relative;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(26, 43, 20, .3);
    width: min(420px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
}

.modal__close {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    border: none;
    background: none;
    box-shadow: none;
    font-size: clamp(1.148rem, calc(1.0593rem + 0.3786vw), 1.4rem);
    line-height: 1;
    padding: 0.25rem 0.5rem;
    color: var(--color-muted);
    cursor: pointer;
}

    .modal__close:hover {
        color: var(--color-ink);
    }

.modal h2 {
    margin-block: 0 0.25rem;
    color: var(--color-ink);
    font-size: clamp(1.148rem, calc(1.0593rem + 0.3786vw), 1.4rem);
}

/* Flash-sale popup (Home.razor) - shown once per tab per campaign, see tcShouldShowFlashSale. */
.flash-sale__backdrop {
    z-index: 200; /* above the header/nav, this is meant to interrupt */
}

/* Split layout: full-bleed campaign image on one side, offer copy on the other. */
.flash-sale__modal {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    width: min(940px, 94vw);
    max-width: min(940px, 94vw);
    max-height: 90vh;
    padding: 0;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    text-align: center;
}

/* A later "@media (max-width: 480px)" block re-pads .modal, which pushed the
   image off the popup's edges. Two classes outrank it without !important. */
.modal.flash-sale__modal {
    padding: 0;
}

.flash-sale__modal--no-media {
    grid-template-columns: 1fr;
    width: min(460px, 94vw);
    max-width: min(460px, 94vw);
}

.flash-sale__media {
    position: relative;
    min-height: 420px;
    background: #f2ede9;
    overflow: hidden;
}

.flash-sale__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
}

.flash-sale__panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2.25rem;
    background: #fff;
    overflow-y: auto;
}

.flash-sale__panel-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 340px;
}

/* The split layout reads cleaner without the decorative blob, which collided
   with the seam between the image and the copy panel. */
.flash-sale__decor {
    display: none;
}

.flash-sale__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(120, 120, 120, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .flash-sale__close:hover {
        background: rgba(80, 80, 80, 0.8);
    }

.flash-sale__title {
    position: relative;
    margin: 0;
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
    font-weight: 700;
    line-height: 1.25;
    color: #222;
}

.flash-sale__discount {
    position: relative;
    font-size: clamp(2.4rem, 2rem + 1.4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0.35rem 0 0;
    color: var(--color-primary);
}

.flash-sale__desc {
    position: relative;
    margin: 0.45rem 0 0;
    color: #888;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.flash-sale__ends-label {
    position: relative;
    margin: 1.25rem 0 0.75rem;
    color: #999;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.flash-sale__countdown {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.flash-sale__countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex: 1 1 0;
    min-width: 0;
    padding: 0.55rem 0.25rem;
    border-radius: 12px;
    background: #fdf1f5;
}

    .flash-sale__countdown-unit strong {
        font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem);
        font-weight: 800;
        color: var(--color-primary);
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }

    .flash-sale__countdown-unit span {
        font-size: 0.62rem;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.flash-sale__cta {
    position: relative;
    display: block;
    width: 100%;
    margin: 1.6rem 0 0;
    padding-block: 1rem;
    border-radius: 2px;
    background: var(--color-primary);
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .flash-sale__cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(255, 74, 131, 0.35);
    }

.flash-sale__dismiss {
    position: relative;
    display: block;
    width: 100%;
    margin: 0.8rem 0 0;
    padding: 0.4rem;
    background: none;
    border: none;
    color: #999;
    font-size: 0.78rem;
    cursor: pointer;
}

    .flash-sale__dismiss:hover {
        color: #555;
        text-decoration: underline;
    }

/* Stack the panels once the split no longer fits side by side. */
@media (max-width: 760px) {
    .flash-sale__modal {
        grid-template-columns: 1fr;
        width: min(420px, 92vw);
        max-width: min(420px, 92vw);
    }

    .flash-sale__media {
        min-height: 0;
        height: 190px;
    }

    .flash-sale__panel {
        padding: 1.75rem 1.5rem 1.5rem;
    }

    .flash-sale__close {
        top: 0.65rem;
        right: 0.65rem;
        width: 2.15rem;
        height: 2.15rem;
    }
}

/* Very short viewports: the image is decorative, the offer is not. */
@media (max-height: 620px) and (max-width: 760px) {
    .flash-sale__media {
        height: 120px;
    }
}

.modal__sub {
    color: var(--color-muted);
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    margin-block: 0 1.25rem;
}

.modal__submit {
    width: 100%;
    margin-block-start: 0.5rem;
}

.modal__alt {
    text-align: center;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    margin-block-start: 1rem;
    color: var(--color-muted);
}

.modal__tabs {
    display: flex;
    gap: 0.5rem;
    margin-block-end: 1.25rem;
}

.modal__tab {
    flex: 1;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    box-shadow: none;
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    padding: 0.5rem;
    color: #333;
}

.modal__tab--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.pd-payment-naver, .pd-payment-kakao {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* ---------- Auth ---------- */

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background: var(--auth-page-bg, #FDE7EE);
}

.auth-card {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    width: min(980px, 100%);
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(20,22,26,.14);
}

.auth-card__art {
    position: relative;
    overflow: hidden;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 460px;
}

    .auth-card__art svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

.auth-card__art-copy {
    position: relative;
    z-index: 1;
    max-width: 22ch;
}

.auth-card__art-logo {
    display: block;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.5rem, calc(1.35rem + 0.6vw), 1.9rem);
    color: #4A4A4A;
    margin-block-end: 1.25rem;
}

.auth-card__art-copy h1 {
    font-size: clamp(1.804rem, calc(1.6646rem + 0.5949vw), 2.2rem);
    margin-block-end: 0.75rem;
    color: #4A4A4A;
}

.auth-card__art-copy p {
    color: #6B6B6B;
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
    line-height: 1.5;
    margin: 0;
}

.auth-card__form {
    padding: 3rem 2.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .auth-card__form h2 {
        font-size: clamp(1.64rem, calc(1.5132rem + 0.5408vw), 2rem);
        margin-block: 0 1.5rem;
        color: #4A4A4A;
    }

.auth-field {
    position: relative;
    margin-block-end: 1rem;
    display: block;
}

.auth-field__icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 1.1rem;
    transform: translateY(-50%);
    color: #B9BEC4;
    font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
    pointer-events: none;
}

.auth-field input {
    width: 100%;
    border: 1px solid #E2E5E9;
    border-radius: 999px;
    padding: 0.85rem 1.2rem 0.85rem 2.9rem;
    font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
}

    .auth-field input:focus-visible {
        outline: 2px solid var(--auth-accent, var(--color-accent));
        outline-offset: 1px;
    }

[dir="rtl"] .auth-field input {
    padding: 0.85rem 2.9rem 0.85rem 1.2rem;
}

.auth-field--password input {
    padding-inline-end: 2.9rem;
}

.auth-field__toggle {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.9rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
    line-height: 1;
    padding: 0.25rem;
    opacity: 0.6;
}

    .auth-field__toggle:hover {
        opacity: 1;
    }

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    margin-block-end: 1.5rem;
    color: #6B6B6B;
}

    .auth-row label {
        flex-direction: row;
        align-items: center;
        gap: 0.45rem;
        margin: 0;
        font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    }

    .auth-row input[type="checkbox"] {
        width: auto;
    }

    .auth-row a {
        color: var(--auth-accent, var(--color-accent));
    }

.auth-submit:hover {
    filter: brightness(.93);
    color: #fff;
}

.auth-alt {
    text-align: center;
    margin-block-start: 1.5rem;
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    color: #6B6B6B;
}

    .auth-alt a {
        color: var(--auth-accent, var(--color-accent));
        font-weight: 600;
    }

.auth-error {
    color: var(--color-danger);
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    margin-block-end: 1rem;
}

.auth-checklist {
    list-style: none;
    margin: 0.5rem 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

    .auth-checklist li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
        color: #6B6B6B;
    }

        .auth-checklist li::before {
            content: "\2713";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.1rem;
            height: 1.1rem;
            flex: 0 0 auto;
            border-radius: 50%;
            font-size: 0.65rem;
            color: #fff;
            background: #B9BEC4;
        }

        .auth-checklist li.is-met {
            color: var(--color-ink);
        }

            .auth-checklist li.is-met::before {
                background: #2FA84F;
            }

.auth-match-error {
    display: none;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-danger);
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    margin: 0.35rem 0 1rem;
}

    .auth-match-error::before {
        content: "\2717";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.1rem;
        height: 1.1rem;
        flex: 0 0 auto;
        border-radius: 50%;
        font-size: 0.65rem;
        color: #fff;
        background: var(--color-danger);
    }

    .auth-match-error.is-visible {
        display: flex;
    }

.auth-field-block {
    display: block;
}

    .auth-field-block > span {
        display: block;
        font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
        font-weight: 600;
        color: var(--color-ink);
        margin-block-end: 0.35rem;
    }

    .auth-field-block input[type="text"],
    .auth-field-block input[type="email"],
    .auth-field-block input[type="tel"],
    .auth-field-block input[type="url"],
    .auth-field-block input[type="number"],
    .auth-field-block select,
    .auth-field-block textarea {
        width: 100%;
        border: 1px solid #E2E5E9;
        border-radius: 5px;
        padding: 0.75rem 1rem;
        font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
        font-family: inherit;
    }

        .auth-field-block input:focus-visible,
        .auth-field-block select:focus-visible,
        .auth-field-block textarea:focus-visible {
            outline: 2px solid var(--auth-accent, var(--color-accent));
            outline-offset: 1px;
        }

.auth-page--storefront {
    --auth-accent: var(--color-primary);
    --auth-page-bg: #FDE7EE;
}

.auth-page--admin {
    --auth-accent: var(--color-primary-dark);
    --auth-page-bg: #FBDCE7;
}

.auth-page--platform {
    --auth-accent: #E23A63;
    --auth-page-bg: #FDE7EE;
}

/* ---------- Auth (titto minimalist login/signup) ---------- */

.titto-auth-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 2rem 1.25rem;
    box-sizing: border-box;
}

.options-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.options-modal-container {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 10000;
}

.titto-auth-shell {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.titto-auth-logo {
    display: block;
    text-align: center;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2.255rem, calc(2.0807rem + 0.7437vw), 2.75rem);
    color: var(--titto-dark);
    text-decoration: none;
    margin-block: 1rem 2rem;
}

.titto-auth-title {
    text-align: center;
    font-size: clamp(1.066rem, calc(0.9836rem + 0.3515vw), 1.3rem);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--titto-dark);
    margin: 0 0 .6rem;
}

.titto-auth-subtitle {
    text-align: center;
    color: var(--color-muted);
    font-size: clamp(0.7544rem, calc(0.6961rem + 0.2488vw), 0.92rem);
    line-height: 1.5;
    margin: 0 0 1.75rem;
}



.titto-auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--color-muted);
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    margin: 1.75rem 0;
}

    .titto-auth-divider::before, .titto-auth-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--color-border);
    }

.titto-auth-tabs {
    display: flex;
    gap: .4rem;
    background: var(--color-bg-subtle, #f4f4f4);
    border-radius: 999px;
    padding: .3rem;
    margin-block-end: 1.5rem;
}

.titto-auth-tab {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: .6rem .8rem;
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.85rem);
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    white-space: nowrap;
}

.titto-auth-tab--active {
    background: var(--titto-dark);
    color: #fff;
}

.titto-auth-form {
    display: flex;
    flex-direction: column;
}

.titto-auth-input {
    width: 100%;
    /* Underline-only fields, as on the reference sign-in screen. */
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: 0.85rem 0.15rem;
    font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
    background: transparent;
    margin-block-end: 1.1rem;
    color: var(--titto-dark);
    box-sizing: border-box;
}

    .titto-auth-input::placeholder {
        color: #B9BEC4;
    }

    .titto-auth-input:focus-visible {
        outline: none;
        border-bottom-color: var(--titto-dark);
    }

.titto-auth-field--password {
    position: relative;
    display: block;
}

    .titto-auth-field--password .titto-auth-input {
        padding-inline-end: 2.4rem;
    }

.titto-auth-field {
    position: relative;
}

.titto-auth-field__toggle {
    position: absolute;
    top: 35%;
    right: 0.1rem;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent !important;
    color: #000 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    font-size: 0;
    line-height: 1;
    z-index: 2;
}

    .titto-auth-field__toggle img {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px;
        min-height: 18px;
        object-fit: contain;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .titto-auth-field__toggle:hover {
        opacity: 1;
    }

    .titto-auth-field__toggle:focus {
        outline: none;
    }

    .titto-auth-field__toggle:focus-visible {
        outline: 1px solid var(--color-brown);
        outline-offset: 2px;
    }

.titto-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: var(--color-muted);
    margin-block-end: 1.25rem;
}

.titto-auth-remember {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.titto-auth-secure {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.titto-auth-submit {
    width: 100%;
    border: none;
    padding: 0.5rem;
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
    font-weight: 700;
    background: var(--titto-dark);
    color: #fff;
    cursor: pointer;
    margin-block-end: 1.5rem;
}

    .titto-auth-submit:hover {
        filter: brightness(1.25);
    }

.titto-otp-boxes {
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin-block-end: 1.5rem;
}

.titto-otp-box {
    width: clamp(2.4rem, 2.2rem + 1vw, 3rem);
    aspect-ratio: 1 / 1;
    text-align: center;
    font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
    font-weight: 700;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--titto-dark);
    box-sizing: border-box;
}

    .titto-otp-box:focus-visible {
        outline: none;
        border-color: var(--titto-dark);
        box-shadow: 0 0 0 2px rgba(0, 0, 0, .08);
    }

@media (max-width: 380px) {
    .titto-otp-boxes {
        gap: .4rem;
    }
}

.titto-auth-row--secure {
    margin-block-end: 0.85rem;
}

.titto-auth-row--links {
    justify-content: center;
    gap: 0.6rem;
    margin-block-start: 0.9rem;
}

.titto-auth-row__sep {
    color: var(--color-border, #ddd);
}

.titto-auth-join-btn {
    display: block;
    width: 100%;
    margin-block-start: 1.5rem;
    padding: 0.85rem;
    text-align: center;
    background: var(--color-bg-subtle, #f4f4f4);
    color: var(--color-text, #333);
    font-weight: 700;
    text-decoration: none;
}

    .titto-auth-join-btn:hover {
        background: var(--color-border, #eee);
    }

.titto-auth-alt {
    text-align: center;
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    color: var(--color-muted);
    margin: .5rem 0;
}

    .titto-auth-alt a {
        color: var(--titto-dark);
        font-weight: 600;
    }

/* ---------- Blazor reconnect / error UI ---------- */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(20, 20, 20, .55);
    align-items: center;
    justify-content: center;
}

.tc-reconnect__box {
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem 2rem;
    max-width: 320px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    font-size: .9rem;
    color: var(--color-ink, #111);
}

.tc-reconnect__spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto .9rem;
    border: 3px solid #eee;
    border-top-color: var(--color-brown, #C42B62);
    border-radius: 50%;
    animation: tc-reconnect-spin .8s linear infinite;
}

@keyframes tc-reconnect-spin {
    to {
        transform: rotate(360deg);
    }
}

.tc-reconnect__state-showing,
.tc-reconnect__state-failed,
.tc-reconnect__state-rejected {
    display: none;
    margin: 0;
}

.tc-reconnect__box button {
    margin-top: .6rem;
    border: none;
    background: var(--color-brown, #C42B62);
    color: #fff;
    font-weight: 600;
    padding: .5rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
}

/* blazor.web.js toggles these on #components-reconnect-modal itself */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

    #components-reconnect-modal.components-reconnect-show .tc-reconnect__spinner,
    #components-reconnect-modal.components-reconnect-show .tc-reconnect__state-showing {
        display: block;
    }

    #components-reconnect-modal.components-reconnect-failed .tc-reconnect__state-failed {
        display: block;
    }

    #components-reconnect-modal.components-reconnect-rejected .tc-reconnect__state-rejected {
        display: block;
    }

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 999999;
    background: #C0293D;
    color: #fff;
    padding: .85rem 1.25rem;
    font-size: .85rem;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .2);
}

    #blazor-error-ui .reload {
        color: #fff;
        font-weight: 700;
        text-decoration: underline;
        margin-inline-start: .5rem;
    }

    #blazor-error-ui .dismiss {
        float: inline-end;
        cursor: pointer;
        opacity: .85;
    }

/* ---------- Storefront login / forgot password ---------- */

.tc-auth-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 2rem 1.25rem;
    box-sizing: border-box;
}

.tc-auth-panel-form {
    width: 100%;
    max-width: 440px;
}

.tc-auth-form-inner {
    width: 100%;
}


.tc-auth-logo {
    display: inline-flex;
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: 1.6rem;
    color: var(--color-ink);
    margin-bottom: 1.75rem;
}

.tc-auth-form-inner h1 {
    font-size: clamp(1.5rem, 1.35rem + .6vw, 1.85rem);
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 .4rem;
}

.tc-auth-sub {
    color: var(--color-muted);
    font-size: .88rem;
    line-height: 1.5;
    margin: 0 0 1.75rem;
}

.tc-auth-error {
    background: #FEF0F1;
    border: 1px solid #F7C6CB;
    color: #C0293D;
    border-radius: 8px;
    padding: .65rem .9rem;
    font-size: .82rem;
    margin-bottom: 1.1rem;
}

.tc-auth-field {
    display: block;
    margin-bottom: 1.1rem;
}

    .tc-auth-field > span {
        display: block;
        font-size: .78rem;
        font-weight: 600;
        color: var(--color-ink);
        margin-bottom: .4rem;
    }

.tc-auth-input-wrap {
    position: relative;
}

.tc-auth-field input {
    width: 100%;
    padding: .8rem .95rem;
    border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 10px;
    background: var(--color-bg-subtle, #f8f8f8);
    font-size: .9rem;
    color: var(--color-ink);
    transition: border-color .15s ease, background .15s ease;
}

    .tc-auth-field input::placeholder {
        color: #a9ada6;
    }

    .tc-auth-field input:focus-visible {
        outline: none;
        border-color: var(--color-primary-dark);
        background: #fff;
    }

.tc-auth-field--password .tc-auth-input-wrap input {
    padding-inline-end: 2.6rem;
}

.tc-auth-toggle {
    position: absolute;
    inset-inline-end: .55rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: .3rem;
    opacity: .7;
}

    .tc-auth-toggle:hover {
        opacity: 1;
    }

.tc-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .82rem;
    color: var(--color-muted);
    margin-bottom: 1.4rem;
}

    .tc-auth-row label {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
    }

    .tc-auth-row a {
        color: var(--color-brown);
        font-weight: 600;
        text-decoration: none;
    }

        .tc-auth-row a:hover {
            text-decoration: underline;
        }

.tc-auth-submit {
    display: block;
    width: 100%;
    border: none;
    padding: .85rem 1rem;
    background: var(--color-brown);
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease;
}

    .tc-auth-submit:hover {
        background: var(--color-primary-dark);
    }

    .tc-auth-submit:active {
        transform: scale(.98);
    }

.tc-auth-alt {
    text-align: center;
    font-size: .85rem;
    color: var(--color-muted);
    margin: 1.4rem 0 0;
}

    .tc-auth-alt a {
        color: var(--color-brown);
        font-weight: 700;
        text-decoration: none;
    }

        .tc-auth-alt a:hover {
            text-decoration: underline;
        }

.tc-auth-checklist {
    list-style: none;
    margin: -.4rem 0 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

    .tc-auth-checklist li {
        font-size: .78rem;
        color: var(--color-muted);
        display: flex;
        align-items: center;
        gap: .45rem;
    }

        .tc-auth-checklist li::before {
            content: "○";
            color: #c8ccc4;
        }

        .tc-auth-checklist li.is-met {
            color: #2f8a4f;
        }

            .tc-auth-checklist li.is-met::before {
                content: "●";
                color: #2f8a4f;
            }

.tc-auth-match-error {
    display: none;
    font-size: .78rem;
    color: #C0293D;
    margin: -.6rem 0 1.1rem;
}

    .tc-auth-match-error.is-visible {
        display: block;
    }

.tc-auth-note {
    background: var(--color-bg-subtle, #f8f8f8);
    border-radius: 10px;
    padding: .85rem 1rem;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--color-muted);
    margin: 1.1rem 0 0;
}

/* ---- Centered single-card variant (Forgot / Reset Password) ---- */

.tc-reset-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}

.tc-reset-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid var(--color-border, #eee);
    padding: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
    text-align: center;
}


    .tc-reset-card h1 {
        font-size: clamp(1.3rem, 1.2rem + .4vw, 1.5rem);
        font-weight: 700;
        color: var(--color-ink);
        margin: 0 0 .4rem;
    }

.tc-reset-sub {
    color: var(--color-muted);
    font-size: .88rem;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.tc-reset-card .tc-auth-field {
    text-align: start;
}

.tc-reset-back {
    display: inline-block;
    margin-top: 1.1rem;
    font-size: .85rem;
    color: var(--color-muted);
    text-decoration: none;
}

    .tc-reset-back:hover {
        color: var(--color-ink);
        text-decoration: underline;
    }

/* ---------- Review popup ---------- */

.rv-review-modal {
    width: min(520px, 100%);
    text-align: start;
    border-radius: 18px !important;
    border: 1px solid #FBD9E3;
    box-shadow: 0 30px 70px rgba(20, 20, 20, .18);
}

    .rv-review-modal h2 {
      
        color: var(--color-ink);
    }

    .rv-review-modal .modal__sub {
        color: var(--color-muted);
    }

    .rv-review-modal .pd-star-label {
        border-radius: 8px;
    }

    .rv-review-modal .auth-submit {
        background: var(--color-ink);
    }

        .rv-review-modal .auth-submit:hover {
            background: var(--color-primary-dark);
        }

/* ---------- Admin: tables & inline forms ---------- */

.admin-table {
    width: 100%;
    margin-block: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    text-align: left;
    font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

    .admin-table thead {
        background: var(--bg-base);
    }

    .admin-table tbody tr {
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

        .admin-table tbody tr:last-child td {
            border-bottom: 0;
        }

    .admin-table td:first-child,
    .admin-table th:first-child {
        padding-left: 20px;
    }

    .admin-table td:last-child,
    .admin-table th:last-child {
        padding-right: 20px;
    }

.admin-form--inline {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    width: 100%;
    max-width: none;
    padding: 0.875rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

    .admin-form--inline input {
        width: 100%;
        min-height: 38px;
        padding: 0.5rem 0.65rem;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        background: #fff;
    }

    .admin-form--inline label:nth-child(4) {
        flex: 0 1 110px;
    }

.admin-table td button {
    height: 32px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    color: #555;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s ease;
}

    .admin-table td button:hover {
        background: #222;
        border-color: #222;
        color: #fff;
    }

/* Regions: row edit/delete icon buttons */
.admin-table td.region-actions {
    text-align: right;
    white-space: nowrap;
}

.admin-table td button.region-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 0;
    margin-left: 6px;
}

.admin-table td button.region-icon-btn--danger {
    color: var(--color-danger, #dc2626);
}

    .admin-table td button.region-icon-btn--danger:hover {
        background: var(--color-danger, #dc2626);
        border-color: var(--color-danger, #dc2626);
        color: #fff;
    }

.admin-form--inline button.region-cancel-btn {
    background: #fff;
    color: var(--color-brown);
}

.admin-form--inline button {
    height: 36px;
    padding: 0 12px;
    white-space: nowrap;
    border: 1px solid var(--color-brown);
    border-radius: 4px;
    background: var(--color-brown);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .admin-form--inline button:hover {
        background: #444;
        border-color: #444;
    }

    .admin-form--inline button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ---------- Admin / POS shell ---------- */

.pos-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pos-topbar {
    background: var(--color-topbar);
    color: #fff;
    padding: 0.9rem 1.5rem;
}

.pos-topbar__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1440px;
    margin-inline: auto;
}

.pos-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(0.943rem, calc(0.8701rem + 0.311vw), 1.15rem);
    font-weight: 800;
    font-style: italic;
    color: #fff;
    letter-spacing: -.01em;
}

    .pos-topbar__brand:hover {
        text-decoration: none;
    }

.pos-topbar__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--color-teal);
    font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
    font-style: normal;
}

.pos-topbar__spacer {
    flex: 1;
}

.pos-topbar__user {
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: #C6CBD1;
    white-space: nowrap;
}

.pos-topbar__logout button {
    background: transparent;
    border: 1px solid #454B52;
    color: #E6E9EC;
    box-shadow: none;
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    padding: 0.35rem 0.85rem;
}

    .pos-topbar__logout button:hover {
        background: #30353B;
    }

.pos-nav {
    background: #fff;
    border-block-end: 1px solid var(--color-border);
    padding: 0.85rem 1.5rem;
}

.pos-nav__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 1440px;
    margin-inline: auto;
    overflow-x: auto;
}

.pos-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-muted);
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    font-weight: 600;
    white-space: nowrap;
    background: #fff;
}

    .pos-nav__link:hover {
        text-decoration: none;
        border-color: var(--color-teal);
        color: var(--color-teal);
    }

.pos-nav__search {
    margin-inline-start: auto;
    min-width: 200px;
}

    .pos-nav__search input {
        border-radius: 10px;
        font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
        padding: 0.5rem 0.9rem;
    }

.pos-content {
    margin-inline: auto;
    width: 100%;
}

    .pos-content h1 {
        font-size: clamp(1.23rem, calc(1.1349rem + 0.4056vw), 1.5rem);
    }

    .pos-content h2 {
        color: var(--color-topbar);
        font-size: clamp(0.861rem, calc(0.7945rem + 0.2839vw), 1.05rem);
    }

.pos-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-block: 1rem 2rem;
}

.pos-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    color: inherit;
}

.pos-tile__label {
    display: block;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 700;
    color: var(--color-topbar);
}

.pos-tile__value {
    display: block;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    color: var(--color-muted);
    margin-block-start: 0.15rem;
}

.pos-tile__value--big {
    font-size: clamp(1.23rem, calc(1.1349rem + 0.4056vw), 1.5rem);
    font-weight: 800;
    color: var(--color-primary);
    margin-block-start: 0.2rem;
}

.pos-tile__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #fff;
    font-size: clamp(0.943rem, calc(0.8701rem + 0.311vw), 1.15rem);
}

.pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.25rem;
}

.pos-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.pos-card__image {
    aspect-ratio: 16 / 10;
    background: var(--color-bg-subtle);
}

    .pos-card__image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 0.5rem;
    }

.pos-card__body {
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}

.pos-card__title {
    font-weight: 600;
    font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
    color: var(--color-topbar);
}

    .pos-card__title a {
        color: inherit;
    }

.pos-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-start: auto;
}

.pos-card__price {
    color: var(--color-teal);
    font-weight: 800;
    font-size: clamp(0.902rem, calc(0.8323rem + 0.2975vw), 1.1rem);
}

.pos-card__meta {
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    color: var(--color-muted);
}

.pos-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.15rem;
}

    .pos-stepper span {
        min-width: 1.6rem;
        text-align: center;
        font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
        font-weight: 600;
    }

    .pos-stepper button {
        width: 28px;
        height: 28px;
        padding: 0;
        border-radius: 50%;
        border: none;
        background: transparent;
        box-shadow: none;
        color: var(--color-muted);
        font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
        line-height: 1;
    }

        .pos-stepper button:hover {
            background: var(--color-bg-subtle);
            color: var(--color-topbar);
        }

        .pos-stepper button.is-filled {
            background: var(--color-teal);
            color: #fff;
        }

            .pos-stepper button.is-filled:hover {
                background: var(--color-teal-dark);
                color: #fff;
            }

.pos-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.pos-panel {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.25rem;
}

    .pos-panel h2 {
        margin-block-start: 0;
    }

.pos-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-table__thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--color-bg-subtle);
}

.admin-header-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.breadcrumb {
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    color: #6c757d;
    margin-bottom: 4px;
}

.admin-content h1 {
    font-size: clamp(1.23rem, calc(1.1349rem + 0.4056vw), 1.5rem);
    font-weight: 700;
    margin: 0 0 4px 0;
}

.admin-subtitle {
    font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
    color: #6c757d;
    margin: 0;
}

.btn-export {
    background: #fff;
    border: 1px solid #ced4da;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
    font-weight: 500;
    cursor: pointer;
}

.search-box {
    position: relative;
    max-width: 350px;
}

    .search-box input {
        width: 100%;
        padding: 9px 12px 9px 36px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
        background: #fff;
    }


.admin-table__row--clickable {
    cursor: pointer;
}

    .admin-table__row--clickable:hover {
        background: #f8f9fa;
    }

/* Status Badge */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e6f4ea;
    color: #137333;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: clamp(0.5637rem, calc(0.5201rem + 0.186vw), 0.6875rem);
    font-weight: 500;
}

    .status-badge .dot {
        width: 6px;
        height: 6px;
        background: #137333;
        border-radius: 50%;
    }

/* Action Buttons */

.action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    padding: 4px;
    font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
}

    .action-btn:hover {
        color: #212529;
    }

/* Pagination */

.admin-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 4px;
    font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
    color: #6c757d;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-btn {
    background: #fff;
    border: 1px solid #dee2e6;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    cursor: pointer;
    color: #495057;
}

    .page-btn.active {
        background: #f97316;
        border-color: #f97316;
        color: #fff;
    }

    .page-btn:disabled {
        color: #adb5bd;
        cursor: not-allowed;
    }

.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 20px;
}

    .admin-toolbar input[type="text"],
    .admin-toolbar input[type="date"],
    .admin-toolbar select {
        height: 40px;
        padding: 0 14px;
        border: 1px solid var(--border-subtle);
        border-radius: 10px;
        background: var(--bg-card);
        font-size: 13px;
        color: var(--text-primary);
    }

    .admin-toolbar .button,
    .admin-toolbar > span {
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-subtle);
        background: var(--bg-card);
        font-size: 13px;
    }

    .admin-toolbar .button {
        min-width: 86px;
        padding: 0 18px;
        color: var(--text-primary);
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .admin-toolbar > span {
        min-width: 80px;
        padding: 0 16px;
        background: var(--color-ink);
        border-color: var(--color-ink);
        color: #fff;
        font-weight: 500;
        box-shadow: none;
    }

    .admin-toolbar .button:hover:not(:disabled) {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
    }

    .admin-toolbar .button:disabled {
        color: #aaa;
        background: var(--bg-admin-canvas);
        cursor: not-allowed;
        box-shadow: none;
    }

.admin-panel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.admin-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.stat-row {
    display: flex;
    gap: 1rem;
    margin-block: 1rem;
    flex-wrap: wrap;
}

.stat-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 160px;
}

    .stat-card strong {
        font-size: clamp(1.23rem, calc(1.1349rem + 0.4056vw), 1.5rem);
        color: var(--color-teal);
    }

.admin-form--inline label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    font-weight: 600;
}

.admin-form__checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    display: inline-flex;
    margin-inline-end: 1rem;
}

.admin-form__variant {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-block-end: 1rem;
    background: #fff;
}

.admin-form__tiers {
    margin-block-start: 0.75rem;
    padding-inline-start: 1rem;
    border-inline-start: 2px solid var(--color-border);
}

.admin-form__tier-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.admin-form__actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-block-start: 1rem;
}

.pagination {
    display: flex;
    gap: 0.35rem;
    margin-block: 1rem;
}

.pagination__item {
    padding: 0.3rem 0.65rem;
}

.pagination__item--active {
    background: var(--color-teal);
    color: white;
    border-color: var(--color-teal);
}

/* Appearance editor */

.theme-field {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

    .theme-field input[type="color"] {
        width: 46px;
        height: 38px;
        padding: 2px;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
    }

    .theme-field input[type="text"] {
        flex: 1;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }

.theme-preview {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    font-family: var(--f);
}

.theme-preview__bar {
    background: var(--p);
    color: #fff;
    padding: 0.45rem 0.9rem;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.theme-preview__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border-block-end: 1px solid var(--color-border);
}

    .theme-preview__header img {
        height: 28px;
        width: auto;
    }

.theme-preview__mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--b);
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
}

.theme-preview__body {
    padding: 1rem 0.9rem 1.25rem;
}

    .theme-preview__body h3 {
        margin-block: 0 0.35rem;
        font-size: clamp(0.861rem, calc(0.7945rem + 0.2839vw), 1.05rem);
        color: var(--color-topbar);
    }

    .theme-preview__body p {
        margin-block: 0 0.9rem;
        color: var(--color-muted);
        font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    }

.theme-preview__price {
    color: var(--b);
    font-weight: 800;
    font-size: clamp(0.902rem, calc(0.8323rem + 0.2975vw), 1.1rem);
    margin-inline-end: 0.75rem;
}

.theme-preview__cta {
    display: inline-block;
    background: var(--b);
    color: #fff;
    font-weight: 700;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
}

.sf-announce__text {
    display: inline-block;
    font-size: clamp(0.875rem, 0.85vw, 1rem);
    animation: sf-announce-fade 0.4s ease;
}

@keyframes sf-announce-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes home-slide-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Header utility links sized to the titto.co.kr reference: ~12px at 1377px wide. */
.sf-utility__link {
    font-size: clamp(0.72rem, 0.87vw, 0.875rem);
    text-transform: uppercase;
    font-weight: 400;
    color: #111;
    letter-spacing: 0.02em;
    text-decoration: none;
    position: relative;
}

/* The separator span carried no styling; hide it so Login / Join Us / Community
   share one even gap like the reference. */
.sf-utility__sep {
    display: none;
}

    .sf-utility__link:hover {
        color: #222;
        text-decoration: none;
    }

.sf-utility__join {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* "15% OFF" as a small speech-bubble tag hanging under "JOIN US", pointer at
   its top-start corner, matching the reference header. */
.sf-join-badge {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: -6px;
    display: inline-block;
    padding: 0.3rem 0.55rem;
    background: #6d6a5b;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    /* The COMMUNITY panel opens alongside it at z-index 1000; the reference
       keeps the badge readable in front of that panel's edge. */
    z-index: 1001;
}

    .sf-join-badge::before {
        content: "";
        position: absolute;
        top: -5px;
        inset-inline-start: 12px;
        border: 5px solid transparent;
        border-top: 0;
        border-bottom-color: #6d6a5b;
    }

.sf-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.sf-logo__text {
    font-size: clamp(2.1rem, calc(1.9rem + 0.75vw), 2.4rem);
    color: #111;
    letter-spacing: -0.02em;
    line-height: 1;
    font-style: italic;
}

.sf-icon-btn {
    display: flex;
    color: #111;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    border-radius: 0;
}

.sf-lang-switch {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border, #E4E9E0);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

.sf-lang-switch__item {
    padding: 0.3rem 0.6rem;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-muted, #77807A);
    text-decoration: none;
    line-height: 1;
}

.sf-lang-switch__item--active {
    background: var(--color-primary, #FF4A83);
    color: #fff;
}

[dir="rtl"] .sf-lang-switch {
    direction: ltr;
}



.sf-cart-btn {
    position: relative;
}

.sf-cart-count {
    position: absolute;
    top: 16px;
    right: 2px;
    background: var(--titto-dark);
    color: #fff;
    font-size: clamp(0.5rem, calc(0.4161rem + 0.1487vw), 0.55rem);
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.pd-mobile-bar {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: fixed;
    inset-inline: 0;
    inset-block-end: var(--tc-bottom-nav-h);
    z-index: 40;
    padding: 0.5rem 0.75rem 0.6rem;
    background: #fff;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 20px rgba(20, 20, 20, 0.08);
}

.sf-header--scrolled .sf-nav__link {
    color: #222; /* scrolled: dark on white background */
}

.sf-nav__link:hover {
    text-decoration: none;
    color: #222;
}

/* =========================
   NAV ITEM
   ========================= */

.sf-nav-item {
    position: relative;
    display: inline-block;
    font-size: calc(1.3rem - 0.1rem);
    text-transform: uppercase;
}

/* =========================
   MAIN DROPDOWN
   ========================= */

.sf-dropdown {
    position: absolute;
    top: calc(100% + 1rem);
    left: 0;
    display: flex;
    flex-direction: column;
    width: 180px;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 6px 18px rgba(26, 43, 20, 0.1);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

/* Open dropdown */

.sf-nav-item:hover .sf-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* =========================
   ACCOUNT DROPDOWN
   ========================= */

/* Centred under the account icon on a translucent white panel, like the
   reference. The centring shift is folded into the open/close transform. */
.sf-dropdown--account {
    top: calc(100% + 3px);
    left: 50%;
    right: auto;
    width: 150px;
    padding: 9px 0 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    border-radius: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transform: translate(-50%, -8px);
}

.sf-nav-item:hover .sf-dropdown--account {
    transform: translate(-50%, 0);
}

/* Nothing between the account icon and the header may clip the panel, and the
   panel must win against everything else in the utility row. */
.sf-utility__inner,
.sf-utility__right,
.sf-account-item {
    overflow: visible;
}

.sf-account-item {
    /* Positioned (via .sf-nav-item) but deliberately z-index:auto, so the
       dropdown's own z-index still resolves against the utility row. */
    position: relative;
}

.sf-dropdown--account {
    z-index: 1200;
}


.sf-dropdown--account.sf-dropdown--open {
    transform: translate(-50%, 0) !important;
}

    .sf-dropdown--account .sf-dropdown__item {
        padding: 7px 14px 7px 16px;
        font-family: inherit;
        font-size: 12px;
        font-weight: 400;
        line-height: 13px;
        color: #555;
        text-align: left;
    }

        /* The reference breaks "Consultation" mid-word ("Co / nsultation"); only the
           1:1 consultation button (the one direct-child <button>) wraps that way. */
        .sf-dropdown--account > button.sf-dropdown__item {
            word-break: break-all;
        }

        .sf-dropdown--account .sf-dropdown__item:hover {
            background-color: rgba(0, 0, 0, 0.04);
            color: #222;
        }

/* =========================
   COMMUNITY DROPDOWN (utility row)
   ========================= */

/* The utility-row COMMUNITY link opens a hover panel. It gets its own wrapper
   rather than .sf-nav-item so the link keeps the utility row's type scale. */
.sf-utility-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Centred under the link, per the reference; the centring shift is folded into
   the open/close transform the same way the account panel does it. */
.sf-dropdown--community {
    top: calc(100% + 10px);
    left: 50%;
    right: auto;
    width: 148px;
    padding: 9px 0;
    background: rgba(255, 255, 255, 0.96);
    border: 0;
    border-radius: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transform: translate(-50%, -8px);
}

.sf-utility-item:hover .sf-dropdown--community,
.sf-utility-item:focus-within .sf-dropdown--community {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* .sf-dropdown--open forces translateY(0) !important, which would drop the
   centring shift; restate it, as the account panel does. */
.sf-dropdown--community.sf-dropdown--open {
    transform: translate(-50%, 0) !important;
}

    /* 12px uppercase grey on a 27px pitch (7 + 13 + 7); six of those plus the
       panel's 9px block padding make the reference's 180px height. */
    .sf-dropdown--community .sf-dropdown__item {
        top: auto;
        justify-content: flex-start;
        padding: 7px 15px;
        font-family: inherit;
        font-size: 12px;
        font-weight: 400;
        line-height: 13px;
        letter-spacing: 0.02em;
        color: #888;
        text-align: left;
        text-transform: uppercase;
    }

        .sf-dropdown--community .sf-dropdown__item:hover {
            background-color: transparent;
            color: #222;
        }

.sf-dropdown--region {
    left: auto;
    right: 0;
    width: 220px;
}

/* Force dropdown open via class (click-toggle, not hover-only) */
.sf-dropdown--open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Region switcher button */
.sf-region-switcher {
    display: none;
    align-items: center;
    gap: 0.25rem;
    width: auto;
    padding: 0.2rem 0.4rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.sf-region-switcher__flag {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.1rem;
    line-height: 1;
}

.sf-region-switcher__code {
    font-size: 0.72rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.sf-dropdown__item--active {
    font-weight: 700;
}

/* =========================
   DROPDOWN ITEMS
   ========================= */

.sf-dropdown__item {
    position: relative;
    top: calc(100% + 0.5rem);
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    text-transform: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .sf-dropdown__item:hover,
    .sf-dropdown__item.active-sub {
        background-color: #f6f9f2;
        color: #222;
    }

/* =========================
   SUBMENU
   ========================= */

.sf-submenu {
    position: absolute;
    top: -0.5rem;
    left: 100%;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 5px 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}


.sf-dropdown__item.has-submenu:hover .sf-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

/* =========================
   SUBMENU LINKS
   ========================= */

.sf-submenu a {
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 400;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .sf-submenu a:hover {
        background-color: #f6f9f2;
        color: var(--color-accent);
    }

/* Desktop SHOP ALL / COMMUNITY dropdowns, per the reference: a compact
   translucent panel centred under the link, small uppercase rows with a gray
   hover block, and the submenu butted against the panel's right edge, level
   with the hovered row. Scoped to .sf-nav so the account menu is untouched;
   the phone nav (<=860px) keeps its own rules. */
@media (min-width: 861px) {
    .sf-nav .sf-dropdown {
        top: calc(100% + 0.4rem);
        left: 50%;
        width: 180px;
        padding: 6px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid #e3e3e3;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transform: translate(-50%, -8px);
    }

    .sf-nav .sf-nav-item:hover .sf-dropdown {
        transform: translate(-50%, 0);
    }

    .sf-nav .sf-dropdown.sf-dropdown--open {
        transform: translate(-50%, 0) !important;
    }

    .sf-nav .sf-dropdown__item {
        top: auto;
        min-height: 27px;
        padding: 5px 9px;
        font-size: 0.78rem;
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: 0.02em;
        color: #444;
        text-transform: uppercase;
    }

        .sf-nav .sf-dropdown__item a {
            flex: 1;
            min-width: 0;
            color: inherit;
            text-decoration: none;
        }

        .sf-nav .sf-dropdown__item:hover,
        .sf-nav .sf-dropdown__item.active-sub {
            background-color: #ececec;
            color: #222;
        }

    /* The ">" next to MAKEUP / SKINCARE. */
    .sf-nav .has-submenu > span {
        margin-inline-start: 0.5rem;
        font-size: 0.7rem;
        line-height: 1;
        color: #aaa;
    }

    .sf-nav .sf-submenu {
        top: 0;
        left: calc(100% + 6px);
        width: 180px;
        min-width: 180px;
        padding: 6px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid #e3e3e3;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

        /* Hover bridge across the panel padding between the row and the submenu. */
        .sf-nav .sf-submenu::before {
            content: "";
            position: absolute;
            top: 0;
            right: 100%;
            width: 8px;
            height: 100%;
        }

        .sf-nav .sf-submenu a {
            display: flex;
            align-items: center;
            min-height: 27px;
            padding: 5px 9px;
            font-size: 0.8rem;
            font-weight: 400;
            line-height: 1.3;
            letter-spacing: 0;
            color: #444;
            text-transform: none;
        }

            .sf-nav .sf-submenu a:hover {
                background-color: #ececec;
                color: #222;
            }
}

.sf-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2000;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
}

.sf-search-overlay--open {
    display: flex;
}

.sf-search-bar {
    background: #fff;
    width: min(640px, 94vw);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}


@media (max-width: 768px) {
    .sf-search-overlay {
        position: static;
        background: none;
        padding-top: 0;
        display: none;
        justify-content: stretch;
    }

    .sf-search-overlay--open {
        display: flex;
    }

    .sf-search-bar {
        width: 100%;
        box-shadow: none;
        border-radius: 999px;
        background: var(--color-bg-subtle, #f2f2f2);
        padding: 0.55rem 0.5rem 0.55rem 1rem;
        margin: 0.5rem 1rem 0.75rem;
    }

    
    .sf-search-bar__leading-icon,
    .sf-search-bar__close {
        display: none;
    }
}
.sf-drawer__auth-row {
    display: flex;
    gap: 10px;
}

    .sf-drawer__auth-row > * {
        flex: 1;
        min-width: 0;
    }

.sf-utility__logout-form {
    display: flex;
    margin: 0;
}
.sf-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-size: clamp(0.861rem, calc(0.7945rem + 0.2839vw), 1.05rem);
    border: 1px solid #ddd;
    border-radius: 999px;
    overflow: hidden;
    padding: 0.25rem 0.5rem;
}

.sf-search-bar__submit {
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
    padding: 0;
    display: flex;
    align-items: center;
}

.sf-utility__logout-form {
    display: inline-flex;
    margin: 0;
}

.sf-utility__link--btn {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

.sf-utility__greeting {
    font-weight: 700;
    pointer-events: none;
}

.sf-currency-switcher {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    color: #333;
    max-width: 25%;
}

.sf-region-switcher {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.4rem;
    color: var(--titto-dark, #333);
    cursor: pointer;
    max-width: 92px;
}

.sf-lang-switcher {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    color: #333 !important;
}

    .sf-lang-switcher:hover span {
        color: #000 !important;
    }

.sf-toast {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    background: #1a2b14;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sf-hamburger-btn {
    display: none;
}


.sf-search-icon-mobile {
    display: none;
}

.sf-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2100;
}

.sf-drawer-overlay--open {
    display: block;
}

.sf-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 85vw);
    background: #fff;
    z-index: 2101;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
}

.sf-drawer--open {
    transform: translateX(0);
}

[dir="rtl"] .sf-drawer {
    left: auto;
    right: 0;
    transform: translateX(100%);
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}

[dir="rtl"] .sf-drawer--open {
    transform: translateX(0);
}

.sf-drawer__header {
    display: flex;
    flex-direction: column;
    padding: 0.9rem 1.25rem 0;
    border-bottom: none;
}

.sf-drawer__logo {
    align-self: center;
    margin-block: 1.6rem 0.4rem;
    line-height: 0;
}

.sf-drawer__logo-img {
    height: 38px;
    width: auto;
}

.sf-drawer__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.9rem;
    line-height: 1;
    color: #555;
    align-self: flex-end;
    padding: 0.25rem;
}

.sf-drawer__section {
    padding: 0.5rem 0;
}
.sf-drawer__sublink--toggle {
    width: 100%;
    display: flex !important;
    align-items: center;
    text-align: left;
}

.sf-drawer__plusminus {
    width: 12px;
    height: 12px;
    margin-left: auto !important;
    flex-shrink: 0;
}

.sf-drawer__accordion {
    border-bottom: 1px solid #f0f0f0;
}

.sf-drawer__auth-row {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
}
.sf-drawer__accordion-toggle {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
}

.sf-drawer__chevron {
    width: 12px;
    height: 12px;
    opacity: 0.55;
    margin-left: auto !important;
    flex-shrink: 0;
    display: block;
}
.sf-drawer__custom-padding {
    padding: 0 1.25rem;
}
.sf-drawer__auth-btn {
    flex: 1 1 0;
    text-align: center;
    padding: 0.7rem;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    background: #fff;
}

.sf-drawer__auth-btn--primary {
    background: #48432e;
    border-color: #48432e;
    color: #fff;
}

.sf-drawer__section--flat {
    padding-block: 0;
}

.sf-drawer__section--grid {
    display: grid;
    grid-template-columns: 1fr;
    padding-inline: 0.5rem;
}

.sf-drawer__auth-status {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text, #333);
    margin: 4.5rem 1.25rem 0;
    line-height: 1.5;
}

    .sf-drawer__auth-status strong {
        font-weight: 700;
    }

.sf-drawer__accordion-toggle {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.sf-drawer__chevron {
    width: 12px;
    height: 12px;
    opacity: 0.55;
    /* Same fix as .sf-drawer__close: the second, label-less accordion
       toggle has only this element as a flex child, which
       justify-content:space-between otherwise collapses to the left. */
    margin-inline-start: auto;
}

.sf-drawer__chevron--open {
    transform: rotate(180deg);
}

.sf-drawer__accordion-body {
    display: flex;
    flex-direction: column;
    padding: 0 1.25rem 0.6rem;
}

.sf-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--titto-dark, #333);
    text-decoration: none;
    text-transform: uppercase;
}

    .sf-drawer__link:hover {
        background: #f6f9f2;
        text-decoration: none;
    }

.sf-drawer__link--btn,
.sf-dropdown__item--btn {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
}


.sf-drawer a,
.sf-drawer button {
    display: block;
    padding: 10px 1px;
    text-decoration: none;
}

.sf-drawer__sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.95rem 1.25rem 0.95rem 2.25rem;
    font-size: 0.9rem;
    font-weight: 400;
    color: #555;
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
}

.sf-drawer__plusminus {
    width: 11px;
    height: 11px;
    opacity: 0.55;
    margin-inline-start: auto;
}

/* Split accordion/sublink rows: the label navigates straight to the category
   page, a separate small icon-only button expands the nested submenu -
   previously the whole row was one button that only toggled, with no way to
   go to Shop All/Makeup/Skincare themselves without expanding first. */
.sf-drawer__accordion-row,
.sf-drawer__sublink-row {
    padding: 0 !important;
}

.sf-drawer__accordion-row__label {
    flex: 1 1 auto;
    padding: 0.85rem 1.25rem !important;
    display: block !important;
    /* .sf-drawer__link's color/uppercase styling is inherited by this <a>,
       but the browser's own "a { color: ... }" default beats inherited
       color (it isn't overridden just by sitting inside a colored parent),
       so it has to be restated explicitly here or the label renders in the
       default link blue/visited-purple instead of the drawer's own text color. */
    color: inherit;
    text-decoration: none;
    text-transform: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.sf-drawer__accordion-row__toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.85rem 1.25rem !important;
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
}

.sf-drawer__sublink-row__label {
    flex: 1 1 auto;
    padding: 0.65rem 1.25rem 0.65rem 2.25rem !important;
    display: block !important;
    /* Same fix as .sf-drawer__accordion-row__label above. */
    color: inherit;
    text-decoration: none;
    text-transform: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.sf-drawer__sublink-row__toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.65rem 1.25rem !important;
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
}

.sf-drawer__nested-box {
    margin: 0.25rem 1.25rem 0.5rem 2.25rem;
    padding: 0.5rem 0.9rem;
    background: var(--color-bg-subtle, #f5f5f5);
    border-radius: 6px;
}

.sf-drawer__nested-link {
    display: block;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    color: var(--titto-dark, #191919);
    text-decoration: none;
    text-transform: uppercase;
}

    .sf-drawer__sublink:hover {
        background: none;
        color: #222;
        text-decoration: none;
    }

.sf-lang-switcher__code:hover {
    color: #000000 !important;
}

.sf-search-bar__close {
    background: var(--color-danger);
    border: 1px solid var(--color-danger);
    cursor: pointer;
    font-size: 1.3rem;
    color: #fff;
    padding: 0;
    line-height: 1;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .sf-search-bar__close:hover {
        color: #fff !important;
        background: var(--color-danger);
    }

.sf-nav__link {
    color: #000000;
    position: relative;
    text-decoration: none !important;
    font-size: clamp(0.85rem, 1.05vw, 1.05rem); /* ~14.5px at 1377px, per the reference */
    text-transform: uppercase;
    font-weight: 500;
    margin: 0.2rem 0rem;
}

    .sf-nav__link::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 50%;
        right: 0;
        height: 1px;
        background: #222;
        transform: translateX(-50%);
        transform-origin: center;
        transition: opacity 0.2s ease;
        width: 60px;
        opacity: 0;
    }

    .sf-nav__link:hover::after {
        transform: scaleX(1);
        opacity: 1;
    }

    .sf-nav__link:hover::after,
    .sf-nav__link--active::after {
        transform: translateX(-50%) scaleX(1);
    }

/* ── TITTO HERO ──────────────────────────────────────────────────────────── */

.titto-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: #f5f0ee;
    max-height: 680px;
}

.titto-hero__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.titto-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
    z-index: 0;
}

.titto-hero__slide--active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.titto-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.titto-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.8);
    color: #333;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 0;
}

    .titto-hero__arrow:hover {
        background: #fff;
    }

.titto-hero__arrow--prev {
    left: 1.25rem;
}

.titto-hero__arrow--next {
    right: 1.25rem;
}

.titto-hero__dots {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}

.titto-hero__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.titto-hero__dot--active {
    background: #fff;
    transform: scale(1.3);
}

/* ── TITTO SECTIONS ──────────────────────────────────────────────────────── */

.titto-section {
    max-width: 1200px;
    margin-inline: auto;
    padding: 3rem 1.5rem;
}

.titto-section__head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
}

.titto-section__title {
    font-size: clamp(0.902rem, calc(0.8323rem + 0.2975vw), 1.1rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--titto-dark);
    margin: 0;
    text-align: center;
}

.titto-loading {
    text-align: center;
    color: var(--titto-muted);
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    padding: 3rem 0;
}

/* ── TITTO PRODUCT CARD ──────────────────────────────────────────────────── */

.titto-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.titto-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    background: #fff;
    cursor: pointer;
}

    .titto-card:hover {
        text-decoration: none;
    }

.titto-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8f8f8;
    position: relative;
}

    .titto-card__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }

.titto-card:hover .titto-card__img img {
    transform: scale(1.04);
}

.titto-card__placeholder {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
}

.titto-card__body {
    padding: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.titto-card__name {
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
    font-weight: 500;
    color: var(--titto-dark);
    margin: 0;
    line-height: 1.4;
}

.titto-card__desc {
    margin: 0;
    line-height: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
    color: #333333;
}

.titto-card__prices {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.titto-card__discount {
    color: var(--titto-price-red);
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    font-weight: 700;
}

.titto-card__price {
    font-size: clamp(0.9225rem, calc(0.8512rem + 0.3042vw), 1.125rem);
    color: var(--color-black, #191919);
    font-weight: bold;
}

.titto-card__compare {
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    text-decoration: line-through;
    color: #AAAAAA;
}

/* ── TITTO REVIEWS ───────────────────────────────────────────────────────── */

.titto-review-tabs {
    position: absolute;
    right: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.titto-review-tab {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    color: var(--titto-muted);
    border: 1px solid var(--titto-border);
    background: #fff;
    padding: 0.3rem 0.7rem;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: none;
    font-weight: 400;
}

.titto-review-tab--active {
    border-color: var(--titto-dark);
    color: var(--titto-dark);
    background: #fff;
}

.titto-review-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.titto-review-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .titto-review-card:hover {
        text-decoration: none;
    }

.titto-review-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f4f4f4;
    position: relative;
}

    .titto-review-card__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.25s ease;
    }

.titto-review-card:hover .titto-review-card__img img {
    transform: scale(1.03);
}

.titto-review-card__placeholder {
    width: 100%;
    height: 100%;
    background: #ebebeb;
}

.titto-review-card__body {
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    color: var(--titto-text);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.titto-review-card__product {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.1rem;
}

.titto-review-card__product-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: #ebebeb;
    flex-shrink: 0;
}

    .titto-review-card__product-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.titto-review-card__product-name {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    color: var(--titto-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.titto-review-card__stars {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    color: var(--titto-star);
    letter-spacing: 1px;
}

/* ── SOCIAL RAIL ─────────────────────────────────────────────────────────── */

.titto-section--social {
    max-width: 100%;
    padding-inline: 0;
}

    .titto-section--social .titto-section__head {
        max-width: 1200px;
        margin-inline: auto;
        padding-inline: 1.5rem;
    }

.titto-social-rail {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .titto-social-rail::-webkit-scrollbar {
        display: none;
    }

.titto-social-tile {
    flex: 0 0 25%;
    min-width: 220px;
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #f0f0f0;
    scroll-snap-align: start;
    text-decoration: none;
}

    .titto-social-tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }

    .titto-social-tile:hover img {
        transform: scale(1.03);
    }

    .titto-social-tile:hover {
        text-decoration: none;
    }

.titto-social-tile__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
    padding: 1.5rem 1rem 0.85rem;
    color: #fff;
}

.titto-social-tile__info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.titto-social-tile__product {
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    font-weight: 600;
    color: #fff;
}

.titto-social-tile__price {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    color: rgba(255,255,255,0.85);
}

.titto-price-pct {
    color: #f75f8c;
    font-weight: 700;
}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
/* Modelled on titto.co.kr's footer: white ground, a Customer Center block with
   a chat pill, Account Info / Return-Exchange rows, then the big wordmark, the
   policy links and the company details in muted gray. Phone re-ordering and the
   collapsible rows live in the media queries further down. */

.sf-footer {
    background: #fff;
    border-top: 1px solid #ececec;
    padding: 2.5rem 1.5rem 3rem;
    color: #222;
}

.sf-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2.5rem 2.5rem;
    max-width: 1200px;
    margin-inline: auto;
    padding: 0;
}

.sf-footer__brand,
.sf-footer__center,
.sf-footer__right {
    flex: 1 1 200px;
    min-width: 0;
}

/* Desktop: the brand column takes the most room so the legal copy stays
   readable; the bases are small enough that three columns hold from 901px up. */
.sf-footer__brand {
    flex: 2 1 300px;
}

.sf-footer__logo-img {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    margin: 0 0 1.5rem;
}

    /* The stock wordmark is pure black; the reference renders it charcoal. */
    .sf-footer__logo-img--default {
        opacity: 0.68;
    }

.sf-footer__links {
    margin: 0 0 1.5rem;
}

.sf-footer__legal-links {
    overflow: hidden; /* clips the leading pipe of each wrapped row on desktop */
    margin: 0 0 1.1rem;
}

.sf-footer__legal-links-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.5rem;
}

    .sf-footer__legal-links a {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.5;
        color: #222;
        text-decoration: none;
    }

        .sf-footer__legal-links a:hover {
            text-decoration: underline;
        }

.sf-footer__legal {
    font-size: 0.8125rem;
    color: #8a8a8a;
    line-height: 1.5;
    margin: 0;
    word-break: keep-all;
}

    .sf-footer__legal + .sf-footer__legal {
        margin-top: 1rem;
    }

/* Company name + representative share a line, like the reference. */
.sf-footer__legal-item {
    margin-inline-end: 1.5rem;
}

/* The company-info fields are one wrapping row at every width. A field that
   does not fit moves down whole, so a label never ends a line with its value
   orphaned on the next one; min-width:0 lets a field that is wider than the
   column wrap inside itself instead of overflowing. */
.sf-footer__legal--fields {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1.5rem;
}

    .sf-footer__legal--fields .sf-footer__legal-item {
        min-width: 0;
        margin-inline-end: 0;
    }

/* Highlighted fragments inside the gray legal copy (officer name, verify link). */
.sf-footer__legal-strong,
.sf-footer__verify-link {
    color: #222;
    font-size: inherit;
    text-decoration: none;
}

    .sf-footer__verify-link:hover {
        text-decoration: underline;
    }

.sf-footer__verify-link--muted {
    color: inherit;
}

.sf-footer__copyright {
    font-size: 0.75rem;
    color: #a3a3a3;
    line-height: 1.5;
    margin: 1rem 0 0;
}

.sf-footer__section-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #111;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0 0 0.9rem;
}

.sf-footer__phone {
    font-size: 1.375rem;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 0 0 0.6rem;
}

.sf-footer__hours {
    font-size: 0.8125rem;
    color: #8a8a8a;
    line-height: 1.5;
    margin: 0 0 1.1rem;
}

.sf-footer__account-info {
    font-size: 0.8125rem;
    color: #8a8a8a;
    line-height: 1.5;
    margin: 0;
}

/* Account Info / Return-Exchange rows. Desktop (default): always expanded and
   the heading is inert, so it reads like a plain column heading. Below 860px
   the same markup becomes a real collapsible row with a plus on the right. */
.sf-footer__accordion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 0 0 0.9rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: default;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

    .sf-footer__accordion-head:hover,
    .sf-footer__accordion-head:focus-visible {
        background: none;
        color: inherit;
    }

    .sf-footer__accordion-head .sf-footer__section-title {
        margin: 0;
    }

.sf-footer__accordion-toggle {
    display: none;
}

.sf-footer__accordion-body {
    display: block;
}

.sf-footer__accordion + .sf-footer__accordion {
    margin-top: 1.5rem;
}

/* ── OVERRIDE OLD STOREFRONT HEADER / FOOTER ─────────────────────────────── */

.storefront .storefront-header,
.storefront .storefront-utility,
.storefront .storefront-footer {
    display: none !important;
}

/* ── REVIEW CARD (MODERN) ────────────────────────────────────────────────── */

.review-card {
    flex: 0 0 160px;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .review-card:hover {
        text-decoration: none;
    }

.review-card__image {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-subtle);
}

    .review-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.review-card__title {
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-card-modern {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}


.review-card-modern__image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--color-bg-subtle);
    overflow: hidden;
}

    .review-card-modern__image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.review-card-modern__body {
    padding: 1.25rem 1.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.review-card-modern__heading {
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
    color: var(--color-ink);
    margin: 0 0 0.5rem;
    text-align: left;
}

.review-card-modern__text {
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    color: var(--color-muted);
    line-height: 1.4;
    margin: 0 0 1rem;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-card-modern__stars {
    color: #f5a623;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
}

.review-card-modern__author {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 0.5rem;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: #999;
    margin-bottom: 1rem;
}

.review-card-modern__verified {
    color: var(--color-success, #1a9c5b);
    font-weight: 600;
    font-size: clamp(0.65rem, calc(0.61rem + 0.15vw), 0.76rem);
}

.review-card-modern__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-top: 0.5px solid var(--color-border);
    color: inherit;
    text-decoration: none;
}

    .review-card-modern__footer:hover {
        background: var(--color-bg-subtle);
        text-decoration: none;
    }

.review-card-modern__thumb {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--color-border);
}

    .review-card-modern__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.review-card-modern__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.review-card-modern__title {
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── SHORTS RAIL ─────────────────────────────────────────────────────────── */

.shorts-rail {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: 1rem;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

    .shorts-rail::-webkit-scrollbar {
        display: none;
    }

.shorts-rail__item {
    scroll-snap-align: start;
}

.short-grid-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;

    padding: 0rem 3rem 1.5rem 3rem;
    margin: 0 auto;
    position: relative;
}

.shorts-card {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    overflow: hidden;
    background: #222;
}

.shorts-card__thumbnail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shorts-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
    z-index: 1;
    /* transparent until the observer in shorts.js sets data-short-src as its src,
       so the thumbnail underneath keeps showing as a poster until it autoplays in */
    background: transparent;
}

.shorts-card__play {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0,0,0,0.45);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    text-decoration: none;
    z-index: 3;
    transition: background 0.2s ease;
}

    .shorts-card__play:hover {
        background: rgba(0,0,0,0.7);
        text-decoration: none;
    }

.shorts-card__toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0,0,0,0.4);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    z-index: 3;
    transition: background 0.2s ease;
}

    .shorts-card__toggle:hover {
        background: rgba(0,0,0,0.7);
    }

.shorts-card__overlay-product {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.25rem 8px 8px;
    border-radius: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.2) 65%, transparent);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #fff;
    text-align: left;
    box-sizing: border-box;
    z-index: 15;
}

.shorts-card__yt-badge {
    margin-inline-start: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    background: #FF0000;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 0.2rem 0.35rem;
    border-radius: 3px;
}

    .shorts-card__yt-badge svg {
        width: 7px;
        height: 7px;
        fill: #fff;
    }

    .shorts-card__overlay-product:hover {
        text-decoration: none;
    }

.shorts-card__thumb {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    padding: 2px;
    box-sizing: border-box;
    flex-shrink: 0;
}

    .shorts-card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

.shorts-card__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0.1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

.shorts-card__title {
    font-size: clamp(0.6rem, calc(0.55rem + 0.15vw), 0.72rem);
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shorts-card__prices {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: clamp(0.6rem, calc(0.55rem + 0.15vw), 0.72rem);
}

.shorts-card__discount {
    color: #ff5252;
    font-weight: 500;
}

.shorts-card__price {
    color: #fff;
    font-weight: 700;
}

.shorts-card__compare {
    color: #aaa;
    text-decoration: line-through;
    font-size: clamp(0.574rem, calc(0.5296rem + 0.1893vw), 0.7rem);
}

/* ── FEATURED VIDEO ──────────────────────────────────────────────────────── */

.product-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-bg-subtle);
}

    .product-card__image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: opacity 0.35s ease;
    }

.product-card__img--primary {
    z-index: 1;
    opacity: 1;
}

.product-card__img--secondary {
    z-index: 2;
    opacity: 0;
}

.product-card:hover .product-card__img--primary {
    opacity: 0;
}

.product-card:hover .product-card__img--secondary {
    opacity: 1;
}


/* Heart + bag: bottom-right of the image, rising in on card hover. */
.product-card__actions {
    position: absolute;
    bottom: 0.8rem;
    right: 1rem;
    z-index: 4;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.product-card:hover .product-card__actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.product-card__description {
    margin: 0.25rem 0 0.5rem;
    color: #333333;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    font-weight: 400;
}

.product-card__wishlist,
.product-card__quick-add {
    width: 2.2rem;
    height: 2.2rem;
    min-width: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

    .product-card__wishlist:hover,
    .product-card__quick-add:hover {
        transform: scale(1.08);
    }

/* Wishlist icon */
.product-card__wishlist {
    font-size: 21px;
    line-height: 1;
    color: #444;
}

.product-card__quick-add svg {
    display: block;
}


.product-card__quick-add {
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    color: #444;
    cursor: pointer;
    opacity: 0;
    transform: translateY(0.35rem);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.product-card:hover .product-card__quick-add {
    opacity: 1;
    transform: translateY(0);
}

.product-card__quick-add:hover {
    background: #fff;
    color: #000000;
}

.product-card__quick-add--added {
    opacity: 1;
    transform: translateY(0);
    background: var(--color-primary, #2f8f4e);
    color: #fff;
}

@media (hover: none) {
    .product-card__quick-add {
        opacity: 1;
        transform: translateY(0);
    }
}

.featured-video-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
}

.featured-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: 0;
}

/* This is a decorative autoplaying loop, not a video the shopper drives - controls=0 in the
   player init only removes the bottom control bar, YouTube still shows its title/channel
   overlay and a "watch on YouTube" corner logo/share affordance. There's no player param that
   removes those, so it's scaled up and clipped by the wrap's overflow:hidden - big enough to
   push the title bar (top) and logo/share watermark (bottom-right) outside the visible box,
   while staying centered so the crop reads the same on every screen size. pointer-events:none
   also stops the mouse from ever reaching the iframe, so hover/pause can't reveal that chrome. */
.featured-video__iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 130%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.featured-video__facade {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: block;
}

.featured-video__thumb {
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-video__facade:hover .featured-video__thumb {
    transform: scale(1.03);
}

.featured-video__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
    pointer-events: none;
}

.featured-video__play-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    padding-left: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background 0.2s ease;
}

.featured-video__facade:hover .featured-video__play-btn {
    transform: scale(1.08);
    background: #fff;
}

.featured-video__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 1.1rem 1.25rem;
    color: #fff;
    font-weight: 700;
    font-size: clamp(0.9rem, calc(0.84rem + 0.3vw), 1.1rem);
    text-align: left;
}

/* ---------- Responsive ---------- */

#productRail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    width: 100%;
}

.review-slider-container {
    position: relative;
    padding-bottom: 1rem;
}

.review-grid-container {
    animation: home-slide-fade 1.1s ease;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding: 0rem 3rem;
    max-width: 1400px;
    margin-inline: auto;
}

.review-dots-container {
    position: static;
    display: flex;
    /* Reviews carousel: dots align to the left edge of the grid instead of centering. */
    justify-content: flex-start;
    gap: 8px;
    margin-block-start: 1rem;
    z-index: 10;
    padding-inline-start: 3rem;
}

.review-card-modern--clickable {
    cursor: pointer;
}

.review-detail-modal {
    max-width: 480px;
}

.review-detail-modal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.review-detail-modal__image {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
}

.review-detail-modal__stars {
    font-size: 1.1rem;
    color: #f5a623;
}

.review-detail-modal__author {
    font-weight: 600;
    margin: 0;
}

.review-detail-modal__text {
    color: var(--color-ink-muted, #555);
    line-height: 1.5;
    margin: 0;
}

.short-section-container {
    position: relative;
}

.video-pause-icon,
.featured-pause-icon {
    display: none;
}

.modal-backdrop-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 24, 16, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modalFadeIn 0.18s ease-out;
}

@keyframes modalFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {

    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-content-custom {
    background: #fff;
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    position: relative;
    box-shadow: 0 20px 60px rgba(20, 24, 16, 0.25);
    animation: modalSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-subtle, #f5f5f5);
    border: none;
    border-radius: 50%;
    color: var(--color-muted);
    font-size: clamp(0.943rem, calc(0.8701rem + 0.311vw), 1.15rem);
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .modal-close-btn:hover {
        background: var(--color-border);
        color: var(--color-ink);
    }

.modal-options-wrapper {
    margin: 1.5rem 0;
}

.modal-label-custom {
    display: block;
    margin-bottom: 0.4rem;
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    font-weight: 600;
    color: var(--color-ink);
}

.modal-actions-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.modal-btn-flex {
    flex: 1 1 140px;
}

.btn-buy-now {
    background: var(--color-ink, #1a1a1a);
    border-color: var(--color-ink, #1a1a1a);
    color: #fff;
}

    .btn-buy-now:hover {
        background: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
        color: #fff;
    }

/* =========================================
   CATEGORY PAGE
   ========================================= */


/* Breadcrumb */

.category-page__breadcrumb {
    margin-bottom: 0.8rem;
}

/* Title */

.category-page__title {
    text-align: center;
    font-size: clamp(1.476rem, calc(1.3619rem + 0.4868vw), 1.4rem);
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 1.5rem;
    color: #333;
}

/* Category filters */

.category-page__filters {
    display: flex;
    gap: 0;
    border: 1px solid var(--color-border);
    background: #fff;
    padding: 0;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.category-page__filter--active {
    background: var(--color-ink);
    color: #fff !important;
}

.category-page__filter {
    display: inline-flex;
    padding: 0.9rem 1.25rem;
    min-width: 230px;
    cursor: pointer;
    font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
    text-align: left;
    justify-content: flex-start;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    border-right: 1px solid var(--color-border);
    transition: background-color .12s ease, color .12s ease;
}

.cp-chip-row .cp-chip {
    flex: 0 0 auto;
    padding: 0.6rem 1rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-page__filter:last-child {
    border-right: none;
}

.category-page__filter:not(.category-page__filter--active):hover {
    background: var(--color-bg-subtle);
}


.cp-tabbar {
    display: flex;
    border: 1px solid var(--color-border, #e5e5e5);
    margin-block: 1rem 1.5rem;
    padding: 0.6rem;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}


    .cp-tabbar::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

.cp-tabbar__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.9rem 1.25rem;
    font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
    font-weight: 500;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--color-border, #e5e5e5);
    transition: background-color .15s ease, color .15s ease;
    flex: 1 1 0;
    min-width: 0;
    max-width: 280px;
    box-sizing: border-box;
    margin: 0rem 0.1rem;
}

    .cp-tabbar__item:hover {
        background: var(--color-bg-subtle, #f7f7f7);
        color: #222;
        text-decoration: none;
    }

.cp-tabbar__item--active {
    background: var(--color-brown);
    color: #fff;
}

.cp-tabbar__dot {
    font-size: 0.6rem;
    opacity: 0.7;
}


.cp-cat-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-block: 1rem 1.5rem;
}

.cp-cat-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.4rem;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text);
    text-transform: uppercase;
    font-weight: 500;
    font-size: clamp(0.9rem, calc(0.662rem + 0.2366vw), 1rem);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

    .cp-cat-pill:hover {
        border-color: #bbb;
        text-decoration: none;
    }

.cp-cat-pill--active {
    background: var(--color-ink, #1a1a1a);
    border-color: var(--color-ink, #1a1a1a);
    color: #fff;
}

.category-page__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

.cp-sidebar {
    display: none;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 1rem;
}

.cp-sidebar--hidden {
    display: none;
}

.cp-filter-group {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    padding: 1.1rem 1.15rem;
    margin: 1rem;
}

.cp-filter-group__title {
    margin: 0 0 0.75rem;
    font-size: clamp(0.75rem, calc(0.7rem + 0.16vw), 0.85rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-ink);
}

.cp-price-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .cp-price-range input {
        width: 0;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.45rem 0.6rem;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        font-size: 0.85rem;
    }

.cp-filter-clear {
    margin-top: 0.6rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary, #2f8f4e);
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}

.cp-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    cursor: pointer;
}

.cp-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cp-cat-list--nested {
    margin-inline-start: 0.85rem;
    margin-block-start: 0.15rem;
    padding-inline-start: 0.6rem;
    border-inline-start: 2px solid var(--color-bg-subtle);
}

.cp-cat-list__item {
    display: block;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    font-size: clamp(0.72rem, calc(0.68rem + 0.14vw), 0.85rem);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

    .cp-cat-list__item:hover {
        background: var(--color-bg-subtle);
    }

.cp-cat-list__item--active {
    background: var(--color-ink);
    color: #fff;
    font-weight: 600;
}

    .cp-cat-list__item--active:hover {
        background: var(--color-ink);
    }

.cp-price-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-muted);
}

    .cp-price-inputs input {
        width: 0;
        flex: 1;
        min-width: 0;
        padding: 0.45rem 0.55rem;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        font-size: clamp(0.72rem, calc(0.68rem + 0.14vw), 0.85rem);
        color: var(--color-text);
    }

.cp-price-apply {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.45rem;
    border: 1px solid var(--color-ink);
    border-radius: 8px;
    background: var(--color-ink);
    color: #fff;
    font-weight: 600;
    font-size: clamp(0.72rem, calc(0.68rem + 0.14vw), 0.85rem);
    cursor: pointer;
}

.cp-price-clear {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.35rem;
    border: none;
    background: none;
    color: var(--color-muted);
    font-size: clamp(0.68rem, calc(0.64rem + 0.12vw), 0.78rem);
    text-decoration: underline;
    cursor: pointer;
}

.cp-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 220px;
    overflow-y: auto;
}

.cp-check-list__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.72rem, calc(0.68rem + 0.14vw), 0.85rem);
    color: var(--color-text);
    cursor: pointer;
}

.cp-product-count {
    margin: -0.5rem 0 1rem;
    color: var(--color-muted);
    font-size: clamp(0.78rem, calc(0.74rem + 0.14vw), 0.9rem);
}

/* Mobile-only quick filter chips */
.cp-chip-row {
    display: none;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.5rem 0 1rem;
    scrollbar-width: none;
    padding-block: 0.25rem 1rem;
}

    .cp-chip-row::-webkit-scrollbar {
        display: none;
    }

.cp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    padding: 0.55rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text);
    font-weight: 600;
    font-size: clamp(0.72rem, calc(0.68rem + 0.14vw), 0.85rem);
    white-space: nowrap;
    cursor: pointer;
}

.cp-chip--active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff;
}


.cp-sort-sheet {
    display: none;
}

.cp-sidebar__backdrop {
    display: none;
}

.cp-sidebar__mobile-head {
    display: none;
}

.cp-sidebar__mobile-apply {
    display: none;
}

/* Toolbar */

.category-page__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 1.5rem;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: var(--color-muted);
}

.category-page__count {
    flex: 0 0 auto;
    white-space: nowrap;
}

    .category-page__count strong {
        font-family: var(--font-price);
        color: var(--color-text);
    }

.category-page__sort {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    flex: 0 0 auto;
}

.category-page__select {
    padding: 0.35rem 1.6rem 0.35rem 0.7rem;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    border: none;
    background: transparent;
    color: var(--color-text);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2377807A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    cursor: pointer;
}

/* Mobile/tablet sorting button */
.cp-sort-trigger {
    display: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text);
    font-size: clamp(0.72rem, calc(0.68rem + 0.14vw), 0.85rem);
    font-weight: 600;
    cursor: pointer;
}

.cp-sort-trigger__arrow {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    transform: translateY(-3px);
}

.cp-sort-trigger--open .cp-sort-trigger__arrow {
    transform: translateY(-3px) rotate(180deg);
}

/* Keep Items left and sorting/filter right on mobile too */
@media (max-width: 900px) {
    .category-page__toolbar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 12px;
    }

    .category-page__count {
        flex-shrink: 0;
    }

    .category-page__sort {
        margin-left: auto;
        flex-shrink: 0;
    }

    .category-page__select {
        display: none;
    }

    .cp-sort-trigger {
        display: inline-flex;
    }
}

/* Product grid */

.category-page__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}


/* States */

.category-page__loading,
.category-page__empty,
.category-page__not-found {
    text-align: center;
    padding: 2rem 0;
}

[dir="rtl"] .storefront-utility__link {
    unicode-bidi: isolate;
}

.pd-sel-card {
    position: relative;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.75rem 0.85rem 0.65rem;
}

.pd-sel-card__remove {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #bbb;
    color: #fff;
    border: none;
    border-radius: 2px;
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

    .pd-sel-card__remove:hover {
        background: #999;
    }

.pd-sel-card__title {
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 600;
    color: #222;
    margin: 0 1.4rem 0.18rem 0;
}

.pd-sel-card__variant {
    font-size: clamp(0.6232rem, calc(0.575rem + 0.2055vw), 0.76rem);
    color: #7a7a7a;
    margin: 0 0 0.6rem;
}

.pd-sel-card__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.pd-sel-card__price {
    font-size: clamp(0.7544rem, calc(0.6961rem + 0.2488vw), 0.92rem);
    font-weight: 600;
    color: #222;
    white-space: nowrap;
}

.pd-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: #fff;
    height: 30px;
    overflow: hidden;
    width: fit-content;
}

    .pd-qty-stepper button {
        width: 30px;
        height: 30px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .pd-qty-stepper input {
        width: 32px;
        min-width: 200px;
        padding: 0;
        text-align: center;
        border: 0;
    }

.pd-qty-btn {
    flex: 0 0 26px;
    width: 26px;
    height: 100%;
    border: none;
    background: #fff;
    text-align: center;
    color: var(--color-danger);
    font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pd-qty-btn:hover:not(:disabled) {
        background: var(--color-bg-subtle);
        color: var(--color-primary);
    }

    .pd-qty-btn:disabled {
        color: #ccc;
        cursor: not-allowed;
    }

.pd-qty-input::-webkit-outer-spin-button,
.pd-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pd-qty-input:focus {
    outline: none;
}

.rv-breadcrumb {
    margin-top: 0.85rem;
}

.rv-title {
    text-align: center;
    font-size: clamp(1.148rem, calc(1.0593rem + 0.3786vw), 1.4rem);
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0 0 2rem;
}

.rv-summary {
    display: none;
    gap: 2.5rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 1.5rem;
    margin-block-end: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(20, 20, 20, 0.05);
}

.rv-summary__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 120px;
}

    .rv-summary__score strong {
        font-size: clamp(2rem, calc(1.75rem + 1.2vw), 2.6rem);
        color: var(--color-ink);
        line-height: 1;
    }

.rv-summary__stars {
    color: #f5a623;
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.rv-summary__count {
    font-size: clamp(0.65rem, calc(0.6rem + 0.16vw), 0.78rem);
    color: var(--color-muted);
}

.rv-summary__bars {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rv-summary__bar-row {
    display: grid;
    grid-template-columns: 2.4rem 1fr 1.8rem;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(0.65rem, calc(0.6rem + 0.16vw), 0.78rem);
    color: var(--color-muted);
}

.rv-summary__bar-track {
    height: 8px;
    border-radius: 999px;
    background: var(--color-bg-subtle);
    overflow: hidden;
}

.rv-summary__bar-fill {
    height: 100%;
    background: #f5a623;
    border-radius: 999px;
}

.rv-list__verified {
    color: var(--color-success, #1a9c5b);
    font-weight: 600;
    font-size: clamp(0.6rem, calc(0.56rem + 0.14vw), 0.72rem);
    white-space: nowrap;
}

.rv-list__author {
    color: #999;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    white-space: nowrap;
}

.rv-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-end: 1rem;
}

.rv-toggle {
    display: flex;
}

.rv-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

    .rv-filters select {
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        padding: 0.5rem 1rem;
        font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
        background: #fff;
        color: var(--color-text);
    }

.rv-filters__checkbox {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    color: var(--color-text);
    cursor: pointer;
}

.rv-filters__clear {
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.rv-filters__summary {
    margin: 0 0 1rem;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    color: #999;
}

.category-page__pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

    .category-page__pagination-item:hover {
        background: var(--color-ink);
        color: #fff;
    }

.category-page__pagination-item--active {
    background: var(--color-ink);
    color: #fff;
}

/* "more view N/M" load-more, matching titto.co.kr's Shop All pagination */

.category-page__more {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}

.category-page__more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8rem;
    padding: 0.6rem 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text);
    font-size: clamp(0.7rem, calc(0.65rem + 0.16vw), 0.82rem);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

    .category-page__more-btn:hover {
        background: var(--color-ink);
        color: #fff;
    }

.category-page__more-btn--done {
    cursor: default;
    opacity: 0.55;
}

    .category-page__more-btn--done:hover {
        background: #fff;
        color: var(--color-text);
    }

.rv-toggle__btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    color: #888;
}




.rv-list {
    border-top: 1px solid #333;
}

.rv-list__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid #ececec;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
}

.rv-list__title {
    flex: 1;
    color: #333;
}

.rv-list__rating {
    color: #999;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
}

.rv-list__stars {
    margin-inline-start: 0.3rem;
}

.rv-list__date {
    color: #aaa;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    white-space: nowrap;
}

.rv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 1.25rem;
}

.rv-card {
    display: flex;
    flex-direction: column;
    padding: 0.6rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(20, 20, 20, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.rv-card__media {
    aspect-ratio: 1 / 1;
    background: #f4f4f4;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .rv-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.rv-card__no-image {
    font-size: clamp(0.574rem, calc(0.5296rem + 0.1893vw), 0.7rem);
    color: #ccc;
    letter-spacing: 0.05em;
}

.rv-card__title {
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    font-weight: 600;
    color: #222;
    margin: 0.7rem 0 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rv-card__body {
    font-size: clamp(0.6232rem, calc(0.575rem + 0.2055vw), 0.76rem);
    color: #888;
    line-height: 1.5;
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rv-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    color: #aaa;
    margin-block-end: 0.5rem;
}

.rv-card__stars {
    color: #f5a623;
    letter-spacing: 1px;
}

.rv-card__product {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-top: 1px solid #eee;
    padding-block-start: 0.6rem;
}

.rv-card__product-thumb {
    width: 22px;
    height: 22px;
    border-radius: 2px;
    background: #eee;
    flex: 0 0 auto;
}

.rv-card__product-name {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Account / My Page ── */

.acct-greeting {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
    background: #f8f7f4;
    border: 1px solid #ececec;
    border-radius: 4px;
    margin-block-end: 1.5rem;
}

.acct-greeting__avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #454231;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.861rem, calc(0.7945rem + 0.2839vw), 1.05rem);
    font-weight: 700;
}

.acct-greeting__text {
    flex: 1;
    min-width: 0;
}

.acct-greeting__name {
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
    margin: 0 0 0.25rem;
    color: #222;
}

.acct-greeting__email {
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    color: #999;
    margin: 0;
}

.acct-greeting__logout {
    flex: 0 0 auto;
}

    .acct-greeting__logout .pd-btn-outline {
        width: auto;
        padding: 0.5rem 1rem;
        height: auto;
    }

.acct-menu {
    display: flex;
    flex-direction: column;
    border: 1px solid #ececec;
    border-radius: 4px;
    overflow: hidden;
    margin-block-end: 0.5rem;
}

.acct-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid #ececec;
    font-size: clamp(0.7052rem, calc(0.6507rem + 0.2326vw), 0.86rem);
    color: #333;
    text-decoration: none;
    background: #fff;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .acct-menu__item:last-child {
        border-bottom: none;
    }

    .acct-menu__item:hover {
        color: #454231;
        background: #f8f7f4;
    }

.acct-menu__arrow {
    color: #ccc;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
}

.acct-address-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.acct-address-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid #ececec;
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    color: #444;
}

.acct-address-list__default {
    flex: 0 0 auto;
    font-size: clamp(0.5412rem, calc(0.4994rem + 0.1785vw), 0.66rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #e9845b;
    border: 1px solid #e9845b;
    border-radius: 2px;
    padding: 0.15rem 0.4rem;
}

.ck-loading {
    text-align: center;
    padding: 3rem 1rem;
    color: #999;
}

/* Tablet */

/* Mobile */

/* ── Events ──────────────────────────────────────────────────────────────
   Modelled on the "Event Search" reference in titto's palette: a pink
   gradient hero with a low-poly overlay and the search form, a results
   toolbar with year/month filters and list/grid toggles, then event cards
   with a date badge on the image. */
.ev-hero {
    position: relative;
    margin: -0.8rem -2.5rem 0;
    background: linear-gradient(100deg, #c42b62 0%, #ff4a83 48%, #ff8fae 100%);
    color: #fff;
    overflow: hidden;
}

    .ev-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("/img/poly-bg.svg") center / cover no-repeat;
        pointer-events: none;
    }

.ev-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2.2fr);
    align-items: center;
    gap: 2rem 3rem;
    max-width: 1440px;
    margin-inline: auto;
    padding: 4.25rem 2.5rem 6.5rem;
}

.ev-hero__eyebrow {
    display: block;
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 1rem;
}

/* .storefront h1 paints headings black; the hero title must stay white. */
.ev-hero .ev-hero__title,
.storefront .ev-hero .ev-hero__title {
    margin: 0;
    font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
}

    .ev-hero__title strong {
        font-weight: 700;
    }

.ev-hero__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: end;
}

.ev-hero__field {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}

    .ev-hero__field label {
        font-size: 0.8125rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.88);
    }

.ev-hero__input,
.ev-hero__select {
    height: 56px;
    width: 100%;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 3px;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 1rem;
}

.ev-hero__input {
    background: #f5f5f5;
    text-align: center;
}

    .ev-hero__input::placeholder {
        color: #8c8c8c;
    }

.ev-hero__select {
    appearance: none;
    -webkit-appearance: none;
    font-weight: 600;
    padding-inline-end: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FF4A83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    cursor: pointer;
}

[dir="rtl"] .ev-hero__select {
    background-position: left 1.1rem center;
}

.ev-hero__btn {
    height: 56px;
    padding: 0 2.25rem;
    margin: 0;
    border: 0;
    border-radius: 3px;
    background: var(--color-brown, #48432e);
    color: #fff;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .ev-hero__btn:hover {
        background: #2f2b1d;
    }

.ev-page {
    max-width: 1440px;
    margin-inline: auto;
    padding: 3rem 0 4rem;
}

/* Results toolbar */
.ev-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin: 0 0 2rem;
    font-size: 1rem;
    color: #555;
}

.ev-toolbar__summary {
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ev-toolbar__filter {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #666;
}

    .ev-toolbar__filter select {
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FF4A83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center;
        padding: 0 1.4rem 0 0;
        font: inherit;
        font-size: 1rem;
        color: #222;
        cursor: pointer;
    }

[dir="rtl"] .ev-toolbar__filter select {
    background-position: left center;
    padding: 0 0 0 1.4rem;
}

.ev-toolbar__views {
    margin-inline-start: auto;
    display: flex;
    gap: 0.6rem;
}

.ev-toolbar__view {
    width: 34px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #c8c8c8;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color 0.15s ease;
}

    .ev-toolbar__view:hover {
        background: transparent;
        color: #777;
    }

    .ev-toolbar__view svg {
        display: block;
        width: 26px;
        height: 22px;
        fill: currentColor;
    }

.ev-toolbar__view--active,
.ev-toolbar__view--active:hover {
    color: #222;
}

/* Event cards */
.ev-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ev-item {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 2rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ev-item__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f3f3f3;
}

    .ev-item__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ev-item__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 1rem;
    color: #fff;
    font-size: 1.25rem;
    font-style: italic;
    text-align: center;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, #ff8fae, #ff4a83);
}

.ev-item__placeholder--v2 { background: linear-gradient(135deg, #e7dcd0, #c9a9a6); }
.ev-item__placeholder--v3 { background: linear-gradient(135deg, #ffb9cd, #c42b62); }
.ev-item__placeholder--v4 { background: linear-gradient(135deg, #f3d3dd, #ff8fae); }

.ev-item__date {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: 2;
    width: 84px;
    padding: 0.75rem 0 0.7rem;
    background: linear-gradient(160deg, #ff4a83, #c42b62);
    color: #fff;
    text-align: center;
}

.ev-item__day {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.ev-item__month {
    display: block;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ev-item__body {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.5rem 0.5rem 1.25rem;
}

    .ev-item__body::before {
        content: "";
        position: absolute;
        top: 0.5rem;
        inset-inline-start: 0;
        width: 5px;
        height: 3.5rem;
        background: var(--color-primary, #ff4a83);
        border-radius: 2px;
    }

.ev-item__title {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.2;
    color: #222;
}

    .ev-item__title strong {
        font-weight: 700;
    }

.ev-item__sub {
    margin: 0 0 1.5rem;
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
    color: var(--color-primary, #ff4a83);
}

.ev-item__desc {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ev-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin-top: auto;
}

.ev-item__fact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ev-item__fact-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-primary, #ff4a83);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .ev-item__fact-icon svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.ev-item__fact-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

    .ev-item__fact-text small {
        font-size: 0.875rem;
        letter-spacing: 0.06em;
        color: #999;
    }

    .ev-item__fact-text strong {
        font-size: 1.125rem;
        letter-spacing: 0.02em;
        color: #222;
    }

.ev-item__cta {
    margin: 0 0 0 auto;
    height: 64px;
    padding: 0 3.25rem;
    border: 0;
    border-radius: 999px;
    background: #f3f3f3;
    color: #666;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

[dir="rtl"] .ev-item__cta {
    margin: 0 auto 0 0;
}

.ev-item__cta:hover {
    background: var(--color-primary, #ff4a83);
    color: #fff;
}

.ev-item__details {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eee;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #555;
}

    .ev-item__details p {
        margin: 0 0 0.5rem;
    }

.ev-item--expanded .ev-item__desc {
    display: none;
}

/* Grid view */
.ev-list--grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

    .ev-list--grid .ev-item {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ev-list--grid .ev-item__body {
        padding: 0.25rem 0 0;
    }

        .ev-list--grid .ev-item__body::before {
            display: none;
        }

    .ev-list--grid .ev-item__title {
        font-size: 1.25rem;
    }

    .ev-list--grid .ev-item__fact-icon {
        width: 40px;
        height: 40px;
    }

    .ev-list--grid .ev-item__cta {
        width: 100%;
        margin: 0;
        height: 48px;
        padding: 0 1rem;
    }

@media (max-width: 1100px) {
    .ev-hero__inner {
        grid-template-columns: 1fr;
    }

    .ev-list--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .ev-hero {
        margin-inline: -0.4rem;
    }

    .ev-hero__inner {
        padding: 2.5rem 1.25rem 3.5rem;
    }

    .ev-hero__form {
        grid-template-columns: 1fr;
    }

    .ev-page {
        padding: 2rem 0.5rem 3rem;
    }

    .ev-item {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ev-item__body {
        padding: 0;
    }

        .ev-item__body::before {
            display: none;
        }

    .ev-item__title {
        font-size: 1.4rem;
    }

    .ev-item__cta {
        width: 100%;
        margin: 0;
        height: 52px;
    }

    .ev-list--grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 320px) {
    .ev-hero {
        margin-inline: -0.2rem -0.4rem;
    }
}

═══════════════════════════════════════════════════════════════ */
/* ── Loading state ─────────────────────────────────────────── */
.lb-loading {
    display: flex;
    justify-content: center;
    padding: 4rem 1rem;
    color: var(--color-muted);
}

/* ── Breadcrumb ─────────────────────────────────────────────── */

.lb-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 1200px;
    margin-inline: auto;
    padding: 1rem 1.5rem 0;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    color: var(--color-muted);
}

    .lb-breadcrumb a {
        color: var(--color-muted);
        text-decoration: none;
    }

        .lb-breadcrumb a:hover {
            color: var(--color-ink);
        }

/* ── Page header (title + meta table) ──────────────────────── */

.lb-page-header {
    margin-inline: auto;
    padding: 1.25rem 1.5rem 0;
}

.lb-page-header__title {
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--color-ink);
    margin-block: 0 1.25rem;
}

/* Meta table rows (title / author) */

.lb-meta-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}

.lb-meta-table__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
}

    .lb-meta-table__row dt {
        min-width: 80px;
        color: var(--color-muted);
        font-weight: 400;
    }

    .lb-meta-table__row dd {
        margin: 0;
        color: var(--color-ink);
    }

/* Secondary meta line (date + views) */

.lb-meta-secondary {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: 0.5rem 0;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    color: var(--color-muted);
}

/* ── Article intro (big centred title + subtitle) ───────────── */

.lb-article-intro {
    max-width: 900px;
    margin-inline: auto;
    padding: 3rem 1.5rem 2rem;
    text-align: center;
}

.lb-article-intro__name {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    margin-block: 0 0.5rem;
}

.lb-article-intro__subtitle {
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
    color: var(--color-muted);
    margin: 0;
}

/* ── Editorial image column ─────────────────────────────────── */

.lb-article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* images appear flush, like a magazine spread */
    padding: 0 1rem 3rem;
}

.lb-article__figure {
    margin: 0;
    width: min(600px, 100%); /* centred editorial column, matches reference */
}

.lb-article__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ── Listing grid (/lookbook index) ─────────────────────────── */

.lb-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin-inline: auto;
    padding: 1.5rem 1.5rem 3rem;
}

.lb-list-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.lb-list-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 4px;
}

.lb-list-card__body {
    padding-top: 0.6rem;
}

.lb-list-card__title {
    font-size: clamp(0.75rem, calc(0.7rem + 0.2vw), 0.9rem);
    font-weight: 500;
    color: var(--color-ink);
    margin: 0;
}

.lb-list-card__subtitle {
    font-size: clamp(0.68rem, calc(0.63rem + 0.2vw), 0.8rem);
    color: var(--color-muted);
    margin: 0.25rem 0 0;
}

/* ── Comments / inventory section ──────────────────────────── */

.lb-comments {
    margin-inline: auto;
    padding: 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.lb-comments__heading {
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 500;
    color: var(--color-ink);
    margin-block: 0 0.5rem;
}

.lb-comments__notice {
    margin: 0;
}

/* ── Prev / Next navigation ─────────────────────────────────── */

.lb-post-nav {
    max-width: 1200px;
    margin-inline: auto;
    padding: 1rem 1.5rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lb-post-nav__item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-border);
}

.lb-post-nav__label {
    min-width: 100px;
    color: var(--color-muted);
}

.lb-post-nav__link {
    color: var(--color-ink);
    text-decoration: none;
    font-weight: 500;
}

    .lb-post-nav__link:hover {
        text-decoration: underline;
        color: var(--color-primary);
    }

/* ── Responsive ─────────────────────────────────────────────── */

/* ============================================================
   Amazon-style cart enhancements
   ============================================================ */

.cart-subtotal-heading {
    font-size: clamp(0.984rem, calc(0.9079rem + 0.3245vw), 1.2rem);
    font-weight: 400;
    color: #0f1111;
    padding-bottom: 0.5rem;
}

    .cart-subtotal-heading strong {
        font-weight: 700;
    }

.cart-line__delivery {
    margin-top: 0.35rem;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cart-line__delivery-icon {
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
}

.cart-line__qty-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
}

.cart-line__qty-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #0f1111;
}

.cart-line__qty-select {
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}


.cart-line__link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-brown);
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    cursor: pointer;
    text-decoration: none;
}

    .cart-line__link:hover {
        color: #c7511f;
        text-decoration: underline;
    }

.cart-line__link--move {
    padding-right: 0.6rem;
    border-right: 1px solid var(--color-border, #ddd);
}

.saved-for-later {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 4px solid #e3e6e6;
}

.saved-for-later__title {
    font-size: clamp(0.984rem, calc(0.9079rem + 0.3245vw), 1.2rem);
    font-weight: 600;
    color: #0f1111;
    margin-bottom: 0.75rem;
}

.wishlist-line__desc {
    margin: 0.25rem 0 0;
    font-size: clamp(0.72rem, calc(0.68rem + 0.15vw), 0.82rem);
    color: var(--color-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 46ch;
}

.cart-line--saved {
    opacity: 0.9;
}

.cart-summary__checkout:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   Amazon-style checkout steps
   ============================================================ */

.ck-steps {
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: center;
    background: #ffffff;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 8px;
}

.ck-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #9a9a9a;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 600;
    cursor: default;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.ck-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eceeee;
    color: #565959;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    flex-shrink: 0;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.ck-step--active {
    color: #232f3e;
}

    .ck-step--active .ck-step__num {
        background: var(--color-primary);
        color: #ffffff;
        transform: scale(1.08);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
    }

.ck-step--done {
    color: var(--color-primary);
    cursor: pointer;
}

    .ck-step--done .ck-step__num {
        background: var(--color-primary);
        color: #fff;
    }

    .ck-step--done:hover .ck-step__num {
        transform: scale(1.08);
    }

.ck-step__sep {
    width: 2.25rem;
    height: 2px;
    background: #e3e6e6;
    margin-inline: 0.5rem;
    border-radius: 1px;
    transition: background 0.25s ease;
}

.ck-step__sep--done {
    background: var(--color-primary);
}

.ck-section__collapsed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ck-collapsed-summary, .ck-review__content {
    color: #565959;
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    margin-top: 0.35rem;
    line-height: 1.5;
}

.ck-change-link {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    cursor: pointer;
    padding: 0;
}

    .ck-change-link:hover {
        color: #c7511f;
        text-decoration: underline;
    }

.ck-continue-btn {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    color: #ffffff;
    font-weight: 600;
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    padding: 0.6rem 1.5rem;
    cursor: pointer;
    margin-top: 1rem;
}

    .ck-continue-btn:hover {
        background: var(--color-primary);
    }

.ck-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

.ck-back-link {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    cursor: pointer;
    padding: 0;
}

    .ck-back-link:hover {
        color: #c7511f;
        text-decoration: underline;
    }

/* ============================================================
   Amazon-style buy box
   ============================================================ */

.pd-rating-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    gap: 0.4rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0.35rem 0 0.75rem;
    cursor: pointer;
}

.pd-rating-stars {
    color: #ffa41c;
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
    letter-spacing: 1px;
}

.pd-rating-score {
    color: #0f1111;
    font-weight: 600;
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
}

.pd-rating-count {
    color: var(--color-primary);
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
}

.pd-rating-row:hover .pd-rating-count {
    color: #c7511f;
    text-decoration: underline;
}

.pd-handle {
    font-size: calc(0.4rem + 0.75vw);
    color: #333333;
    margin-bottom: 0.35rem;
}

.pd-buybox__info-box {
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: #f8f8f8;
    border-radius: 4px;
}

.pd-buybox__delivery {
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    color: #0f1111;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.pd-buybox__delivery-icon {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #222;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
}

.pd-buybox__stock {
    margin: 0.6rem 0 0;
    font-size: clamp(0.574rem, calc(0.5296rem + 0.1893vw), 0.7rem);
    color: #907400;
    font-weight: 600;
}

.pd-buybox__stock-dot {
    font-size: clamp(0.574rem, calc(0.5296rem + 0.1893vw), 0.7rem);
    margin-right: 0.3rem;
}

.pd-buybox__sold-by {
    color: #565959;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
}

.pd-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

.pd-highlights__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: clamp(0.68rem, calc(0.63rem + 0.2vw), 0.82rem);
    color: var(--color-text);
}

/*=================================================================================================================================*/

/* =========================================================
    ADMIN PORTAL
   ========================================================= */

.admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 250px;
    display: flex;
    flex-direction: column;
    background: var(--bg-sidebar);
    color: var(--text-primary);
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.06);
    border-right: 1px solid var(--border-sidebar);
    transition: width 0.2s ease;
}

.admin-sidebar-header {
    height: 76px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-sidebar);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
}

.admin-brand-logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--color-primary);
    color: var(--text-white);
    font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
    font-weight: 700;
}

.admin-brand-info {
    display: flex;
    flex-direction: column;
}

.admin-brand-name {
    font-size: clamp(0.7687rem, calc(0.7093rem + 0.2536vw), 0.9375rem);
    line-height: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.admin-brand-subtitle {
    margin-top: 2px;
    font-size: clamp(0.4612rem, calc(0.4255rem + 0.1522vw), 0.5625rem);
    letter-spacing: 1.5px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.admin-sidebar-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-menu-item {
    position: relative;
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dash-tile__icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dash-tile__icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.admin-menu-item:hover {
    background: var(--bg-hover-item);
    color: var(--text-primary);
}

.admin-menu-item.active {
    color: var(--color-primary);
    background: #f8f8f8;
    font-weight: 600;
}

.admin-menu-icon {
    width: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
    color: var(--text-muted);
}

.admin-menu-item.active .admin-menu-icon {
    color: #fff;
}

.admin-sidebar-footer {
    flex-shrink: 0;
    padding: 12px;
    border-top: 1px solid var(--border-sidebar);
}

.admin-collapse-button {
    width: 100%;
    height: 40px;
    display: none;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
    padding: 0 10px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

    .admin-collapse-button:hover {
        color: var(--text-primary);
        background: var(--bg-hover-item);
    }

.collapse-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-medium);
    border-radius: 50%;
    font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
}

/* =========================================================
   SIDEBAR — COLLAPSED STATE
   ========================================================= */

.admin-sidebar--collapsed {
    width: 76px;
}

    .admin-sidebar--collapsed .admin-brand-info,
    .admin-sidebar--collapsed .admin-menu-text,
    .admin-sidebar--collapsed .admin-collapse-button span:last-child {
        display: none;
    }

    .admin-sidebar--collapsed .admin-sidebar-header {
        justify-content: center;
        padding: 0;
    }

    .admin-sidebar--collapsed .admin-menu-item {
        justify-content: center;
        padding: 0;
    }

    .admin-sidebar--collapsed .admin-collapse-button {
        justify-content: center;
    }

    .admin-sidebar--collapsed .collapse-icon {
        transform: rotate(180deg);
    }

.admin-main--collapsed {
    width: calc(100% - 76px);
    margin-left: 76px;
}

/* =========================================================
   MAIN AREA
   ========================================================= */

.admin-main {
    width: calc(100% - 250px);
    margin-left: 250px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease, margin-left 0.2s ease;
}

.admin-header {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-sidebar);
    box-shadow: var(--shadow-sm);
}

.admin-header-left {
    flex: 1;
}

.admin-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-region-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-region-switcher__label {
    font-size: 0.8rem;
    color: var(--color-muted, #666);
    white-space: nowrap;
}

.admin-region-switcher__select {
    font-size: 0.85rem;
    padding: 6px 10px;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 6px;
    background: #fff;
    color: #111;
}

.admin-user {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
}

.admin-user-avatar {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--text-white);
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    font-weight: 700;
}

.admin-user-name {
    color: var(--text-primary);
    font-size: clamp(0.6919rem, calc(0.6384rem + 0.2281vw), 0.8438rem);
    font-weight: 600;
}

.admin-logout {
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-chip);
    color: var(--text-primary);
    cursor: pointer;
    font-size: clamp(0.6919rem, calc(0.6384rem + 0.2281vw), 0.8438rem);
    font-weight: 500;
    transition: all 0.15s ease;
}

    .admin-logout:hover {
        background: var(--bg-hover-item);
        color: var(--text-primary);
        border-color: var(--border-medium);
    }

.admin-content {
    padding: 32px;
    font-family: inherit;
    color: var(--text-primary);
    min-height: calc(100vh - 76px);
    background: #fafafa;
}

.admin-table th {
    background: var(--bg-base);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: clamp(0.5637rem, calc(0.5201rem + 0.186vw), 0.6875rem);
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.admin-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    background: var(--bg-card);
}

.admin-table tr:hover td {
    background: var(--bg-hover-row);
}



/* =========================================================
   CATALOG / PRODUCTS PAGE
   ========================================================= */

.catalog-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.catalog-header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 24px;
}

    .catalog-header > div {
        flex: 1;
    }

.catalog-breadcrumb {
    color: var(--text-secondary);
    font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
    margin-bottom: 8px;
}

    .catalog-breadcrumb span {
        margin: 0 5px;
        color: var(--text-muted);
    }

.catalog-header h1 {
    margin: 0;
    font-size: clamp(1.435rem, calc(1.3241rem + 0.4732vw), 1.75rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.catalog-header p {
    margin: 10px 0 0;
    font-size: clamp(0.7687rem, calc(0.7093rem + 0.2536vw), 0.9375rem);
}

/* =========================================================
   CATEGORY FILTER PILLS
   ========================================================= */

.catalog-categories {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.catalog-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    font-size: clamp(0.6919rem, calc(0.6384rem + 0.2281vw), 0.8438rem);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

    .catalog-category:hover {
        border-color: var(--border-medium);
        color: var(--text-primary);
        background: var(--bg-hover-item);
    }

    .catalog-category.active {
        background: var(--color-primary);
        color: var(--text-white);
        font-weight: 600;
    }

    .catalog-category small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        border-radius: 50%;
        font-size: clamp(0.5637rem, calc(0.5201rem + 0.186vw), 0.6875rem);
        font-weight: 700;
        background: var(--bg-chip);
        color: var(--text-secondary);
        width: 16px;
        height: 16px;
    }

    .catalog-category.active small {
        background: rgba(255, 255, 255, 0.35);
        color: var(--text-white);
    }

/* =========================================================
   SEARCH BAR
   ========================================================= */

.catalog-toolbar {
    width: 100%;
    margin-bottom: 24px;
}

.catalog-result-count {
    font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
    font-weight: 600;
    color: var(--text-secondary);
}

.catalog-search {
    position: relative;
    margin-left: auto;
    width: 300px;
}

    .catalog-search input {
        width: 100%;
        height: 46px;
        box-sizing: border-box;
        border: 1px solid var(--border-input);
        border-radius: 10px;
        background: var(--bg-card);
        padding-left: 44px;
        padding-right: 16px;
        font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
        color: var(--text-primary);
        outline: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .catalog-search input:focus {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }

/* =========================================================
   PRODUCT GRID
   ========================================================= */

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    margin-bottom: 32px;
}

/* =========================================================
   PRODUCT CARD
   ========================================================= */

.catalog-product {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: var(--shadow-sm);
}

    .catalog-product:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--border-medium);
    }

.catalog-product__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
    max-height: 150px;
    padding: 10px;
    box-sizing: border-box;
    background: var(--bg-image-well);
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
    text-decoration: none;
    position: relative;
}

    .catalog-product__image img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

.catalog-product:hover .catalog-product__image img {
    transform: scale(1.05);
}

.catalog-product__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--bg-image-well);
    color: var(--text-muted);
    font-size: clamp(0.5637rem, calc(0.5201rem + 0.186vw), 0.6875rem);
    font-weight: 600;
}

.catalog-product__info {
    padding: 12px 14px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.catalog-product__category {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: clamp(0.5381rem, calc(0.4965rem + 0.1775vw), 0.6562rem);
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalog-product__title {
    display: -webkit-box;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-size: clamp(0.6919rem, calc(0.6384rem + 0.2281vw), 0.8438rem);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
    transition: color 0.15s ease;
}

    .catalog-product__title:hover {
        color: var(--color-primary);
        text-decoration: none;
    }

.catalog-product__bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
}

.catalog-product__price {
    color: var(--text-primary);
    font-size: clamp(0.7687rem, calc(0.7093rem + 0.2536vw), 0.9375rem);
    font-weight: 700;
    white-space: nowrap;
}

/* =========================================================
   QUANTITY STEPPER
   ========================================================= */

.catalog-stepper {
    display: inline-flex;
    align-items: center;
    height: 30px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-stepper);
}

    .catalog-stepper button {
        width: 28px;
        height: 30px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font-size: clamp(0.7687rem, calc(0.7093rem + 0.2536vw), 0.9375rem);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, color 0.15s ease;
    }

        .catalog-stepper button:hover {
            background: var(--bg-hover-item);
            color: var(--text-primary);
        }

    .catalog-stepper span {
        min-width: 24px;
        text-align: center;
        font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
        font-weight: 600;
        color: var(--text-primary);
    }

/* =========================================================
   PAGINATION
   ========================================================= */

.catalog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
}

    .catalog-pagination button {
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        border: 1px solid var(--border-input);
        background: var(--bg-card);
        color: var(--text-secondary);
        border-radius: 8px;
        font-size: clamp(0.6919rem, calc(0.6384rem + 0.2281vw), 0.8438rem);
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
    }

        .catalog-pagination button:hover:not(:disabled) {
            border-color: var(--color-primary);
            color: var(--color-primary);
            background: var(--bg-active-item);
        }

        .catalog-pagination button.active {
            background: var(--color-primary);
            color: var(--text-white);
            border-color: var(--color-primary);
        }

        .catalog-pagination button:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }

/* =========================================================
   ADMIN DASHBOARD
   ========================================================= */

.dash-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.dash-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

    .dash-header h1 {
        margin: 0;
        font-size: clamp(1.3325rem, calc(1.2295rem + 0.4394vw), 1.625rem);
        font-weight: 700;
        color: var(--text-primary);
    }

    .dash-header p {
        margin: 6px 0 0;
        font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
        color: var(--text-secondary);
    }

.dash-loading {
    padding: 60px 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: clamp(0.7175rem, calc(0.662rem + 0.2366vw), 0.875rem);
}

.dash-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.dash-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}

.dash-tile__label {
    display: block;
    font-size: clamp(0.6406rem, calc(0.5911rem + 0.2113vw), 0.7812rem);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.dash-tile__value {
    display: block;
    font-size: clamp(1.1275rem, calc(1.0404rem + 0.3718vw), 1.375rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.dash-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.dash-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.dash-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .dash-panel__head h2 {
        margin: 0;
        font-size: clamp(0.7944rem, calc(0.733rem + 0.2619vw), 0.9688rem);
        font-weight: 700;
        color: var(--text-primary);
    }

    .dash-panel__head span {
        font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
        font-weight: 600;
        color: var(--text-muted);
    }

.dash-empty {
    padding: 28px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: clamp(0.6919rem, calc(0.6384rem + 0.2281vw), 0.8438rem);
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
}

    .dash-table th {
        text-align: left;
        font-size: clamp(0.5894rem, calc(0.5439rem + 0.1943vw), 0.7188rem);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--text-muted);
        padding: 0 0 10px;
        border-bottom: 1px solid var(--border-subtle);
    }

    .dash-table td {
        padding: 11px 0;
        font-size: clamp(0.6919rem, calc(0.6384rem + 0.2281vw), 0.8438rem);
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-subtle);
    }

    .dash-table tr:last-child td {
        border-bottom: none;
    }

    .dash-table td:last-child,
    .dash-table th:last-child {
        text-align: right;
    }

.dash-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.dash-sku {
    display: block;
    font-size: clamp(0.5894rem, calc(0.5439rem + 0.1943vw), 0.7188rem);
    color: var(--text-muted);
    margin-top: 2px;
}

.dash-stock {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    font-weight: 700;
    background: #FDEAF2;
    color: #B02A6E;
}

.dash-stock--zero {
    background: #FCE4E4;
    color: var(--color-danger);
}

/* ================================================================
   Influencer Apply Page — InfluencerApply.razor.css
   Scoped component styles (Blazor CSS isolation)
   ================================================================ */
/* ── Nav ────────────────────────────────────────────────────── */
.inf-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: #fff;
    border-bottom: 0.5px solid #e8e0dd;
    font-family: var(--inf-font-body);
}

.inf-brand {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--inf-espresso);
    text-decoration: none;
}

    .inf-brand span {
        color: var(--inf-rose);
    }

.inf-nav-links {
    display: flex;
    gap: 24px;
}

    .inf-nav-links a {
        font-size: 12.5px;
        color: #6b6b6b;
        text-decoration: none;
        letter-spacing: 0.03em;
        transition: color 0.15s;
    }

        .inf-nav-links a:hover {
            color: var(--inf-rose);
        }

.inf-nav-cta {
    background: var(--inf-rose);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.07em;
    cursor: pointer;
    transition: background 0.15s;
}

    .inf-nav-cta:hover {
        background: var(--inf-espresso-2);
    }

/* ── Page grid ──────────────────────────────────────────────── */
.inf-page {
    display: grid;
    grid-template-columns: 700px 1fr;
    min-height: calc(100vh - 53px);
}

/* ── LEFT: info panel ───────────────────────────────────────── */
.inf-left {
    background: #fff;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

    .inf-left::after {
        content: '';
        position: absolute;
        bottom: -80px;
        right: -80px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle, #c9625014 0%, transparent 70%);
        pointer-events: none;
    }

.inf-left-inner {
    position: relative;
    z-index: 1;
}

.inf-logo {
    display: inline-block;
    margin-bottom: 22px;
}

.inf-logo__img {
    display: block;
    width: 100px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.inf-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--inf-rose);
    margin-bottom: 18px;
}

    .inf-eyebrow::before {
        content: '';
        width: 20px;
        height: 1.5px;
        background: var(--inf-rose);
        border-radius: 1px;
    }

.inf-hero-title {
    font-size: 34px;
    font-weight: 400;
    line-height: 1.18;
    color: var(--inf-espresso);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

    .inf-hero-title strong {
        font-weight: 800;
    }

.inf-hero-body {
    line-height: 1.75;
    color: var(--inf-muted);
    margin-bottom: 22px;
}

/* CTA buttons */
.inf-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.inf-cta-solid {
    background: var(--inf-rose);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11px 24px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

    .inf-cta-solid:hover {
        background: var(--inf-espresso-2);
        transform: translateY(-1px);
    }

.inf-cta-outline {
    border: 1.5px solid var(--inf-rose);
    color: var(--inf-rose);
    border-radius: 999px;
    padding: 11px 24px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

    .inf-cta-outline:hover {
        background: var(--inf-rose);
        color: #fff;
        text-decoration: none;
    }

/* perks list */
.inf-perks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.inf-perk {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.inf-perk-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--inf-radius);
    background: #fff;
    border: 0.5px solid #f0c8bb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--inf-rose);
    font-size: 15px;
}

.inf-perk strong {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--inf-espresso);
    margin-bottom: 2px;
}

.inf-perk span {
    font-size: 11.5px;
    color: var(--inf-muted);
    line-height: 1.5;
}

.inf-stat-val {
    font-family: var(--inf-font-display);
    font-size: 26px;
    font-weight: 400;
    color: var(--inf-espresso);
    line-height: 1;
}

.inf-stat-lbl {
    font-size: 10px;
    color: var(--inf-muted);
    letter-spacing: 0.04em;
    margin-top: 3px;
}

.inf-back-link {
    font-size: 11.5px;
    color: var(--inf-muted);
    margin-top: auto;
    padding-top: 2rem;
}

    .inf-back-link a {
        color: var(--inf-rose);
        text-decoration: none;
    }

        .inf-back-link a:hover {
            text-decoration: underline;
        }

/* ── MIDDLE: model image ────────────────────────────────────── */
.inf-model {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.inf-left.inf-model {
    position: sticky;
    top: 0;
    height: 100vh;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    background-color: #f8f6f2;
    background-image: linear-gradient(rgba(120, 110, 95, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 110, 95, 0.08) 1px, transparent 1px);
    background-size: 180px 180px;
}

/* Corner-bracket frame, reticle-style, floating above the accent panel */
.inf-model-frame {
    position: absolute;
    width: 64px;
    height: 64px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    pointer-events: none;
    z-index: 1;
}

.inf-model-frame--tl {
    top: 28px;
    left: 28px;
    border-right: none;
    border-bottom: none;
}

.inf-model-frame--br {
    bottom: 28px;
    right: 28px;
    border-left: none;
    border-top: none;
}

/* Circular-cropped portrait */
.inf-model-circle {
    position: relative;
    width: min(78%, 320px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}

.inf-model-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: brightness(0.96) contrast(1.02);
}

/* Floating social-platform badges around the portrait */
.inf-model-icon {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--inf-rose);
    box-shadow: 0 8px 20px rgba(26, 14, 12, 0.25);
    z-index: 2;
}

.inf-model-icon--instagram {
    top: 8%;
    left: 4%;
}

.inf-model-icon--tiktok {
    top: 6%;
    right: 10%;
}

.inf-model-icon--youtube {
    bottom: 16%;
    left: 6%;
}

/* ── RIGHT: form panel ──────────────────────────────────────── */
.inf-form-panel {
    background: #fff;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    border-left: 0.5px solid #f8f8f8;
    overflow-y: auto;
}

.inf-form-head p {
    font-size: 12.5px;
    color: #6b6b6b;
    line-height: 1.6;
}

.inf-accent-bar {
    width: 30px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
    margin-top: 10px;
    margin-bottom: 1.25rem;
}

/* error */
.inf-error-box {
    background: #fef2f2;
    border: 0.5px solid #fca5a5;
    border-radius: var(--inf-radius);
    color: #b91c1c;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

/* form rows */
.inf-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.inf-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inf-field--full {
    margin-bottom: 12px;
}

.inf-field label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b6b6b;
}

    .inf-field label span:not(.inf-optional) {
        color: var(--inf-rose);
    }

.inf-optional {
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #aaa;
    text-transform: none;
}

/* inputs */
.inf-input {
    border: 0.5px solid #e0d8d5;
    padding: 9px 12px;
    font-size: 13px;
    color: #1a1a1a;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

    .inf-input::placeholder {
        color: #b5aca9;
    }

    .inf-input:focus {
        border-color: var(--inf-rose);
        box-shadow: 0 0 0 3px rgba(201, 98, 80, 0.1);
        background: #fff;
    }

.inf-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: #fafaf9;
    padding-right: 32px;
    cursor: pointer;
}

.inf-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}

/* validation */
.validation-message {
    font-size: 11px;
    color: #b91c1c;
    margin-top: 2px;
}


.inf-form-note {
    margin-top: 12px;
    font-size: 11px;
    color: #aaa;
    text-align: center;
}

    .inf-form-note a {
        color: var(--inf-rose);
        text-decoration: none;
    }

        .inf-form-note a:hover {
            text-decoration: underline;
        }

/* ── Success state ──────────────────────────────────────────── */
.inf-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    gap: 12px;
    padding: 2rem;
}

.inf-success-icon {
    font-size: 48px;
}

.inf-success h2 {
    font-family: var(--inf-font-display);
    font-size: 28px;
    font-weight: 400;
    color: var(--inf-espresso);
}

.inf-success p {
    font-size: 13.5px;
    color: var(--inf-muted);
    line-height: 1.7;
    max-width: 300px;
}

.inf-success .inf-submit-btn {
    margin-top: 8px;
    width: auto;
    padding: 13px 32px;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* =========================================================
   TODAY'S PERFORMANCE
   ========================================================= */

.dash-panel--performance {
    min-height: 300px;
}

.performance-chart {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding-top: 1.25rem;
}

.performance-row {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.performance-row__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.performance-row__label {
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 600;
    color: var(--color-text);
}

.performance-row__value {
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    font-weight: 700;
    color: var(--color-ink);
}

.performance-bar {
    width: 100%;
    height: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: #f1f2f4;
}

.performance-bar__fill {
    height: 100%;
    border-radius: inherit;
    transition: width 0.5s ease;
}

.performance-bar__fill--sales {
    background: var(--color-primary);
}

.performance-bar__fill--orders {
    background: #333;
}

.performance-bar__fill--average {
    background: #aaa;
}

/* =========================================================
   PERFORMANCE SUMMARY
   ========================================================= */

.performance-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-muted);
}

.performance-summary__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .performance-summary__item span {
        font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
        color: var(--color-text-muted, #777);
    }

    .performance-summary__item strong {
        font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
        font-weight: 700;
        color: var(--color-ink);
    }

/* =========================================================
   INVENTORY OVERVIEW
   ========================================================= */

.dash-panel--inventory {
    min-height: 320px;
}

.inventory-chart {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 0 0.75rem;
}

/* =========================================================
   DONUT
   ========================================================= */

.inventory-chart__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-donut {
    --in-stock-percent: calc( var(--in-stock) / var(--total) * 100% );
    --low-stock-percent: calc( var(--low-stock) / var(--total) * 100% );
    --out-stock-percent: calc( var(--out-stock) / var(--total) * 100% );
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    position: relative;
}

    .inventory-donut::before {
        content: "";
        position: absolute;
        width: 125px;
        height: 125px;
        border-radius: 50%;
        background: var(--bg-card, #fff);
    }

.inventory-donut__center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .inventory-donut__center strong {
        font-size: clamp(1.64rem, calc(1.5132rem + 0.5408vw), 2rem);
        line-height: 1;
        font-weight: 700;
    }

    .inventory-donut__center span {
        margin-top: 0.35rem;
        font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    }

/* =========================================================
   LEGEND
   ========================================================= */

.inventory-legend {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inventory-legend__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    background: var(--bg-card, #fff);
}

.inventory-legend__indicator {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
}

.inventory-legend__indicator--in-stock {
    background: var(--color-primary);
}

.inventory-legend__indicator--low-stock {
    background: #999;
}

.inventory-legend__indicator--out-stock {
    background: #ddd;
    border: 1px solid #bbb;
}

.inventory-legend__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

    .inventory-legend__content span {
        font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
        color: var(--color-text);
    }

    .inventory-legend__content strong {
        font-size: clamp(0.779rem, calc(0.7188rem + 0.2569vw), 0.95rem);
        color: var(--color-ink);
    }

/* =========================================================
   ENGAGEMENT FUNNEL CHART
   ========================================================= */

.engagement-funnel {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-top: 0.5rem;
}

.engagement-funnel__row {
    display: grid;
    grid-template-columns: 350px 1fr;
    align-items: center;
    gap: 1rem;
}

.engagement-funnel__label {
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 600;
    color: var(--color-ink, var(--text-primary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.engagement-funnel__bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.engagement-bar {
    position: relative;
    height: 22px;
    border-radius: 5px;
    background: #f8f8f8;
    overflow: hidden;
}

.engagement-bar__fill {
    height: 100%;
    border-radius: inherit;
    transition: width 0.5s ease;
}

.engagement-bar__fill--viewed {
    background: #fff0f0;
}

.engagement-bar__fill--wishlisted {
    background: #e0578f;
}

.engagement-bar__fill--cart {
    background: #FDE7EE;
}

.engagement-bar__fill--checkout {
    background: #d1f2e1;
}

.engagement-bar__tag {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
}

.engagement-funnel__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-muted);
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    color: var(--color-text-muted, #777);
}

.engagement-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.engagement-swatch--viewed {
    background: #333;
}

.engagement-swatch--wishlisted {
    background: #e0578f;
}

.engagement-swatch--cart {
    background: var(--color-primary);
}

.engagement-swatch--checkout {
    background: #2fa86a;
}

@media (max-width: 720px) {
    .kc-card {
        grid-template-columns: 1fr;
    }

    .engagement-funnel__row {
        grid-template-columns: 1fr;
    }

    .engagement-funnel__bars {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================
   ADMIN INLINE NOTICE / FORM GROUP (Customers bulk-email panel)
   ========================================================= */

.admin-inline-notice {
    padding: 10px 16px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: var(--bg-active-item);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.admin-form__group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.admin-form__group input[type="text"],
.admin-form__group textarea {
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-card);
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
    box-sizing: border-box;
}

/* =========================================================
   ADMIN CHECKBOX (e.g. Customers "marketing emails" toggle)
   ========================================================= */

.admin-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .admin-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }

/* =========================================================
   REPORTS — SALES TREND CHART
   ========================================================= */

.report-trend {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 220px;
    padding-top: 1rem;
    overflow-x: auto;
}

.report-trend__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1 0 28px;
    height: 100%;
    min-width: 28px;
}

.report-trend__bar {
    width: 100%;
    max-width: 28px;
    border-radius: 6px 6px 0 0;
    background: var(--color-primary);
    transition: height 0.3s ease;
}

.report-trend__label {
    margin-top: 0.5rem;
    font-size: 0.6rem;
    color: var(--text-muted, #999);
    white-space: nowrap;
}

/* =========================================================
   TABS (generic — Engagement, and reusable elsewhere)
   ========================================================= */

.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border-subtle, var(--color-muted));
    margin-bottom: 1rem;
}

.tabs__item {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.65rem 1rem;
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    font-weight: 600;
    color: var(--text-secondary, #777);
    cursor: pointer;
}


    .tabs__item:hover {
        color: #000;
        background: none;
        border-bottom-color: var(--color-primary);
    }

.tabs__count {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    background: var(--bg-subtle, #f1f2f4);
    font-size: 0.68rem;
    font-weight: 700;
}

.tabs__item--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
/* =========================================================
           MOBILE
           ========================================================= */

/* ---------- Order details / tracking (storefront) ---------- */

.order-track-page {
    margin-inline: auto;
    padding-block: 1rem 3rem;
}

.order-track-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: var(--color-muted);
    text-decoration: none;
    margin-block-end: 1rem;
}

    .order-track-back:hover {
        color: var(--color-ink);
    }

    .order-track-back svg {
        transform: scaleX(var(--dir-scale, 1));
    }

[dir="rtl"] .order-track-back svg {
    --dir-scale: -1;
}

.order-track-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-block-end: 1.5rem;
}

.order-track-header__meta p {
    margin: 0.25rem 0 0;
    color: var(--color-muted);
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
}

.order-track-badge {
    font-size: clamp(0.6724rem, calc(0.6204rem + 0.2217vw), 0.82rem);
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: var(--color-bg-subtle);
    color: var(--color-text);
    white-space: nowrap;
}

.order-track-badge--success {
    background: #e6f4ea;
    color: #1e7a34;
}

.order-track-badge--danger {
    background: #fce4e4;
    color: #b3261e;
}

.order-track-badge--accent {
    background: var(--color-teal-tint);
    color: var(--color-primary-dark);
}

.order-track-notice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    margin-block-end: 1.5rem;
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    font-weight: 600;
}

.order-track-notice--danger {
    background: #fce4e4;
    border: 1px solid #f3c1c1;
    color: #b3261e;
}

.order-track-notice--info {
    background: #eef3fb;
    border: 1px solid #cfdff3;
    color: #2455a3;
}

/* Mobile hero card: headline + shipment progress bar (see media query for visibility) */
.order-track-hero {
    display: none;
    padding: 1.1rem 1.25rem;
    margin-block-end: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

/* Mobile-only item summary card + "show more" collapse toggle for the panels below the
   tracking steps - desktop always shows everything inline (see media query). */
.order-track-mini,
.order-track-showmore {
    display: none;
}

.order-track-hero__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.order-track-hero__title {
    font-weight: 700;
    font-size: clamp(0.85rem, calc(0.8rem + 0.2vw), 1rem);
    color: var(--color-ink);
}

.order-track-hero__icon {
    font-size: 1.1rem;
}

.order-track-hero__sub {
    margin: 0.25rem 0 0.75rem;
    font-size: clamp(0.7rem, calc(0.66rem + 0.14vw), 0.8rem);
    color: var(--color-muted);
}

.order-track-hero__bar {
    height: 6px;
    border-radius: 999px;
    background: var(--color-bg-subtle);
    overflow: hidden;
}

.order-track-hero__bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark, var(--color-primary)));
    transition: width .3s ease;
}

.order-track-step__current-pill {
    display: inline-block;
    margin-inline-start: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--color-teal-tint);
    color: var(--color-primary-dark);
    font-size: clamp(0.6rem, calc(0.56rem + 0.14vw), 0.7rem);
    font-weight: 700;
    vertical-align: middle;
}



/* Timeline */
.order-track-steps {
    display: flex;
    align-items: flex-start;
    margin-block-end: 1.75rem;
    padding: 1.5rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}

.order-track-step {
    flex: 1;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding-inline: 0.35rem;
}

.order-track-step__line {
    position: absolute;
    top: 13px;
    inset-inline-start: -75%;
    inset-inline-end: 50%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}

.order-track-step:first-child .order-track-step__line {
    display: none;
}

.order-track-step--completed .order-track-step__line {
    background: var(--color-primary, #1e7a34);
}

.order-track-step__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-border);
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    font-weight: 700;
    margin-block-end: 0.5rem;
    position: relative;
    z-index: 1;
}

.order-track-step--completed .order-track-step__dot {
    background: var(--color-primary, #1e7a34);
    border-color: var(--color-primary, #1e7a34);
    color: #fff;
}

.order-track-step--current .order-track-step__dot {
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.order-track-step__label {
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
    font-weight: 700;
    color: var(--color-text);
}

.order-track-step--completed .order-track-step__label {
    color: var(--color-ink);
}

.order-track-step__date {
    font-size: clamp(0.574rem, calc(0.5296rem + 0.1893vw), 0.7rem);
    color: var(--color-muted);
    margin-top: 0.2rem;
}

.order-track-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.order-track-panel {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    background: #fff;
    box-shadow: var(--shadow-sm);
    margin-block-end: 1.5rem;
}

    .order-track-panel h2 {
        margin: 0 0 1rem;
        font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
        color: var(--color-ink);
    }

.order-track-fact {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    padding-block: 0.4rem;
    border-block-end: 1px solid var(--color-border);
}

    .order-track-fact:last-child {
        border-block-end: none;
    }

    .order-track-fact span:first-child {
        color: var(--color-muted);
    }

    .order-track-fact span:last-child {
        color: var(--color-ink);
        font-weight: 600;
        text-align: end;
    }

.order-track-next {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: clamp(0.7216rem, calc(0.6658rem + 0.238vw), 0.88rem);
    color: var(--color-text);
    background: var(--color-bg-subtle);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}
/* =========================================================
   PRODUCT EDITOR
   ========================================================= */

.product-editor {
    padding: 0;
    overflow: hidden;
}

.product-editor__section {
    padding: 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.product-editor__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

    .product-editor__heading h2 {
        margin: 0 0 5px;
        font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
        font-weight: 700;
        color: var(--text-primary);
    }

    .product-editor__heading p {
        margin: 0;
        font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
        color: var(--text-secondary);
    }

/* A second heading inside a section, e.g. "Change Category Parent" under Categories. */
.product-editor__heading--sub {
    margin-top: 28px;
    margin-bottom: 12px;
}

.product-editor__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.product-editor__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.product-editor__field--full {
    grid-column: 1 / -1;
}

.product-editor__field label {
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    font-weight: 600;
    color: var(--text-primary);
}

.product-editor__field input,
.product-editor__field textarea,
.product-editor__field select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    outline: none;
    box-sizing: border-box;
}

.product-editor__field textarea {
    resize: vertical;
    min-height: 120px;
}

    .product-editor__field input:focus,
    .product-editor__field textarea:focus,
    .product-editor__field select:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(0, 0, 0, .04);
    }

/* PRODUCT IMAGES & DRAG REORDERING */

.product-editor__image-card {
    position: relative;
    width: 96px;
    height: 96px;
    cursor: grab;
    user-select: none;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.product-editor__image-card:active {
    cursor: grabbing;
}

.product-editor__image-card.is-dragging {
    opacity: 0.35;
    transform: scale(0.92);
}

.product-editor__image-card.is-dragover {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px var(--color-primary, #ff4d6d);
    border-radius: 8px;
}

.product-editor__image-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #3e422f; /* dark olive/charcoal as in screenshot */
    color: #fff;
    border: none;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
    z-index: 2;
}

.product-editor__image-remove:hover {
    background: #25281d;
    transform: scale(1.1);
}

/* CATEGORY */

.product-editor__categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.product-editor__category {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    background: var(--bg-card);
    cursor: pointer;
    font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
    color: var(--text-primary);
}

    .product-editor__category input {
        display: none;
    }

    .product-editor__category.is-selected {
        border-color: #f2f2f2;
        background: rgba(0, 0, 0, .025);
    }

.product-editor__checkbox {
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    font-size: clamp(0.5637rem, calc(0.5201rem + 0.186vw), 0.6875rem);
    font-weight: 700;
}

.product-editor__category.is-selected .product-editor__checkbox {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Deletes the category itself - same look as the product card delete button. */
.product-editor__category-delete {
    flex: none;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #fee2e2;
    border-radius: 5px;
    background: #fff;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .product-editor__category-delete:hover,
    .product-editor__category-delete:focus-visible {
        background: #ef4444;
        border-color: #ef4444;
        color: #fff;
    }

.product-editor__count {
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: clamp(0.5637rem, calc(0.5201rem + 0.186vw), 0.6875rem);
    font-weight: 600;
}

/* AUTHENTICITY */

.product-editor__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    cursor: pointer;
}

    .product-editor__toggle input {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
    }

    .product-editor__toggle strong,
    .product-editor__toggle small {
        display: block;
    }

    .product-editor__toggle strong {
        font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
        color: var(--text-primary);
    }

    .product-editor__toggle small {
        margin-top: 3px;
        font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
        color: var(--text-secondary);
    }

/* VARIANT */

.product-editor__variant {
    padding: 18px;
    margin-bottom: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-card);
}

.product-editor__variant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

    .product-editor__variant-header strong {
        font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
        color: var(--text-primary);
    }

    .product-editor__variant-header span {
        margin-left: 8px;
        color: var(--text-secondary);
        font-size: clamp(0.5637rem, calc(0.5201rem + 0.186vw), 0.6875rem);
    }

.product-editor__remove {
    border: 0;
    background: transparent;
    padding: 4px;
    color: var(--color-danger);
    font: inherit;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    font-weight: 600;
    cursor: pointer;
}

/* BULK PRICING */

.product-editor__tiers {
    margin-top: 18px;
    padding: 16px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .025);
}

.product-editor__tiers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

    .product-editor__tiers-header strong,
    .product-editor__tiers-header small {
        display: block;
    }

    .product-editor__tiers-header strong {
        font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    }

    .product-editor__tiers-header small {
        margin-top: 3px;
        color: var(--text-secondary);
        font-size: clamp(0.5637rem, calc(0.5201rem + 0.186vw), 0.6875rem);
    }

.product-editor__tier {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-card);
}

.product-editor__tiers-empty {
    padding: 14px;
    border: 1px dashed var(--border-subtle);
    border-radius: 8px;
    color: var(--text-secondary);
    text-align: center;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
}

.product-editor__hint--warning {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #f5c451;
    border-radius: 8px;
    background: #fff8e6;
    color: #7a5b00;
    margin: 1rem 0rem;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
}

.product-editor__add {
    width: 100%;
    padding: 11px;
    border: 1px dashed var(--border-subtle);
    border-radius: 9px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    font-weight: 600;
    cursor: pointer;
}

    .product-editor__add:hover {
        background: rgba(0, 0, 0, .025);
    }

/* ACTIONS */

.product-editor > .admin-form__actions {
    padding: 18px 24px;
    margin: 0;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-card);
}

/* =========================================================
   STORE SETTINGS
   ========================================================= */

.settings-editor {
    padding: 0;
    overflow: hidden;
}

.settings-editor__section {
    padding: 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.settings-editor__heading {
    margin-bottom: 20px;
}

    .settings-editor__heading h2 {
        margin: 0 0 5px;
        font-size: clamp(0.82rem, calc(0.7566rem + 0.2704vw), 1rem);
        font-weight: 700;
        color: var(--text-primary);
    }

    .settings-editor__heading p {
        margin: 0;
        font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
        color: var(--text-secondary);
    }

.settings-editor__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-editor__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.settings-editor__field--full {
    grid-column: 1 / -1;
}

.settings-editor__field label {
    font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    font-weight: 600;
    color: var(--text-primary);
}



.settings-editor__field input:focus,
.settings-editor__field select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .04);
}

.settings-editor__field small {
    font-size: clamp(0.5637rem, calc(0.5201rem + 0.186vw), 0.6875rem);
    color: var(--text-secondary);
}

/* SAVE MESSAGE */

.settings-editor__message {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 24px 0;
    padding: 11px 13px;
    color: green;
    font-size: clamp(0.6663rem, calc(0.6148rem + 0.2196vw), 0.8125rem);
}

    .settings-editor__message span {
        font-weight: 700;
    }

/* ACTIONS */

.settings-editor > .admin-form__actions {
    margin: 0;
    padding: 18px 24px;
    border-top: 1px solid var(--border-subtle);
}

/* ══════════════════════════════════════════════════════════════════
   FLOATING QUICK-ACCESS STACK (eye / recently viewed, chat, back-to-top)
   ══════════════════════════════════════════════════════════════════ */

/* The float stack is fixed to the viewport, so it sits on top of the footer's
   last lines (return address, account details) once the user scrolls down.
   Fade it out while the footer is on screen - the footer carries its own
   WhatsApp button, so nothing becomes unreachable. */
.sf-float-stack--footer-visible {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
}

.sf-float-stack {
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    position: fixed;
    bottom: 24px; /* anchored to the bottom-right corner, per the reference */
    right: 20px;
    width: auto;
    margin: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.sf-float-btn {
    position: relative;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--color-ink, #222);
    border: 1px solid #d1d1d1;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}


.sf-float-btn--whatsapp {
    border: none;
    background-color: #25D366;
}


.mkw-launcher {
    left: 24px !important;
    right: auto !important;
    background: linear-gradient(rgb(255, 242, 243) 0%, rgb(255, 243, 242) 100%) !important;
    animation: sfChatbotIn 400ms cubic-bezier(0.36, 0, 0, 1) both;
}

    .mkw-launcher:hover {
        transform: scale(1.06);
    }

/* Desktop launcher sized to the reference (titto.co.kr's chat button):
   56px tile, 24px radius, 24px off the left/bottom edges, 36px icon box,
   same layered shadow. Phones keep their own launcher sizing. */
@media (min-width: 769px) {
    .mkw-launcher {
        width: 56px !important;
        height: 56px !important;
        bottom: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 24px !important;
        opacity: 1;
        box-shadow: none !important;
    }

    .mkw-launcher .mkw-launcher-ico,
    .mkw-launcher .mkw-launcher-ico svg {
        width: 36px;
        height: 36px;
    }

    .mkw-launcher .mkw-launcher-ico svg {
        stroke: rgb(217, 0, 16);
    }
}

.mkw-launcher-ico svg {
    display: block;
    overflow: visible;
}

.mkw-launcher-ico::after {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background-color: rgb(217, 0, 16);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12a9.97 9.97 0 0 0 2.737 6.874L3 22z' fill='black'/><path d='M7.416 14a5.001 5.001 0 0 0 9.168 0' stroke='black' stroke-width='2' stroke-linecap='square' fill='none'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12a9.97 9.97 0 0 0 2.737 6.874L3 22z' fill='black'/><path d='M7.416 14a5.001 5.001 0 0 0 9.168 0' stroke='black' stroke-width='2' stroke-linecap='square' fill='none'/></svg>");
}

@keyframes sfChatbotIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hidden until the shopper scrolls past the home page's hero/banner - see
   initHeroGatedFloatButtons in app.js. On non-home pages (no .home-hero in the DOM) it
   just shows immediately. */
.sf-float-btn--hero-gated {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

    .sf-float-btn--hero-gated.sf-float-btn--visible {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

.sf-whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.sf-whatsapp-icon {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}

    .sf-whatsapp-icon img {
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 50%;
        background: #25D366;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.sf-float-btn__emoji {
    font-size: clamp(1.066rem, calc(0.9836rem + 0.3515vw), 1.3rem);
    line-height: 1;
}

.sf-float-btn--top {
    background: rgba(255, 255, 255, 0.95);
}

.sf-float-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: clamp(0.533rem, calc(0.4918rem + 0.1758vw), 0.65rem);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════
   RECENTLY VIEWED PRODUCTS — modal (Titto-style)
   ══════════════════════════════════════════════════════════════════ */

.rv-modal-backdrop {
    position: fixed;
    inset: 0;
    background: transparent; /* no dark overlay */
    z-index: 2100;
    display: flex;
    align-items: flex-end; /* anchor to bottom */
    justify-content: flex-end; /* anchor to right */
    padding: 1rem;
    pointer-events: none; /* backdrop itself not clickable */
}

.rv-modal {
    background: #fff;
    width: min(360px, calc(100vw - 2rem));
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    border-radius: 16px; /* squarish-round to match widget */
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    pointer-events: auto; /* modal itself IS clickable */
}

/* 3. view-all / Clear All button → white bg, bordered */
.rv-modal__view-all {
    background: #fff;
    border: 1px solid #d7dbe3;
    border-radius: 10px;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    color: var(--color-ink, #333);
    cursor: pointer;
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    transition: border-color .15s ease;
}

    .rv-modal__view-all:hover {
        border-color: var(--color-ink, #333);
        text-decoration: none;
    }

.rv-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #eee);
}

    .rv-modal__header h3 {
        margin: 0;
        font-size: clamp(0.861rem, calc(0.7945rem + 0.2839vw), 1.05rem);
        font-weight: 700;
    }

.rv-modal__close {
    background: none;
    border: none;
    font-size: clamp(1.23rem, calc(1.1349rem + 0.4056vw), 1.5rem);
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0;
}

.rv-modal__body {
    overflow-y: auto;
    padding: 0.5rem 1.25rem;
}

.rv-modal__empty {
    padding: 2rem 0;
    text-align: center;
    color: var(--color-muted, #888);
}

.rv-item {
    display: flex;
    gap: 0.9rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border, #f0f0f0);
}

    .rv-item:last-child {
        border-bottom: none;
    }

.rv-item__thumb {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-subtle, #f5f5f5);
}

    .rv-item__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.rv-item__info {
    flex: 1;
    min-width: 0;
}

.rv-item__title {
    margin: 0 0 0.5rem;
    font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv-item__actions {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.rv-item__btn {
    font-size: clamp(0.5904rem, calc(0.5448rem + 0.1947vw), 0.72rem);
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border, #ddd);
    color: var(--color-ink, #333);
    text-decoration: none;
    white-space: nowrap;
}

    .rv-item__btn:hover {
        border-color: var(--color-ink, #333);
    }

.rv-item__prices {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    justify-content: flex-end;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
}

.rv-item__compare {
    color: var(--color-muted, #aaa);
    text-decoration: line-through;
    font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
}

.rv-item__price {
    font-weight: 700;
}

.rv-modal__footer {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--color-border, #eee);
    background: var(--color-bg-subtle, #fafafa);
    text-align: center;
}

.acc-orders-table {
    width: 100%;
    font-size: 0.95rem;
    color: #222;
}

    .acc-orders-table th {
        font-size: 0.9rem;
        font-weight: 600;
        color: #222;
        padding: 0.85rem 0.75rem;
    }

    .acc-orders-table td {
        padding: 0.9rem 0.75rem;
        color: #333;
        font-size: 0.95rem;
        vertical-align: middle;
    }

    .acc-orders-table .order-product-title {
        font-size: 0.95rem;
        font-weight: 500;
        color: #222;
        line-height: 1.4;
    }

    .acc-orders-table .order-product-options {
        margin-top: 0.3rem;
        font-size: 0.82rem;
        color: #666;
        line-height: 1.4;
    }

    .acc-orders-table .order-qty {
        font-size: 0.95rem;
        font-weight: 500;
        color: #333;
        white-space: nowrap;
    }

    .acc-orders-table .order-price {
        font-size: 0.95rem;
        font-weight: 600;
        color: #222;
        white-space: nowrap;
    }

    .acc-orders-table .order-total {
        text-align: end;
    }

/* ══════════════════════════════════════════════════════════════════
   BEST / MOST-PURCHASED ranked section (Titto-style rank badges)
   ══════════════════════════════════════════════════════════════════ */

.home-best-rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem 1.25rem;
}

.home-best-card {
    position: relative;
}

.home-best-card__rank {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.35rem;
    border-radius: 50%;
    background: var(--color-ink, #111);
    color: #fff;
    font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-best-card__rank--top {
    background: var(--color-accent, #d33);
}

img, svg, video, canvas, iframe {
    max-width: 100%;
}

/* =========================================================
   RESPONSIVE (all @media rules, grouped here - widest to narrowest)
   ========================================================= */

@media (min-width: 720px) {
    .ev-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1400px) {
    .catalog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 1080px) {
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 1024px) {
    .home-hero__image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .home-section__head h2 {
        font-size: 1.3rem !important;
    }
    .pd-tabs-bar {
        display: flex;
        justify-content: center;
        font-size: 0.82rem !important;
    }
}

.product-card__description {
    font-size: 14px;
}
    .pd-tabs-inner {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-inline: auto;
    }
    .product-card__actions category_actions {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

        .titto-product-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .titto-review-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .titto-social-tile {
            flex: 0 0 33.333%;
        }

        .review-grid-container,
        .short-grid-container {
            display: flex;
            grid-template-columns: none;
            gap: 0.75rem;
            padding: 1rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-padding-inline-start: 1rem;
            scrollbar-width: none;
            padding-inline: 0.25rem;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x;
        }

            .review-grid-container::-webkit-scrollbar,
            .short-grid-container::-webkit-scrollbar {
                display: none;
            }

            .review-grid-container .review-card-modern {
                flex: 0 0 calc(20% - 16px);
                scroll-snap-align: center;
            }

        .shorts-rail__item {
            flex: 0 0 28%;
            scroll-snap-align: center;
        }

        .category-page__grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .inf-page {
            grid-template-columns: 340px 1fr;
        }

        .inf-hero-title {
            font-size: 30px;
        }
    }

@media (min-width: 601px) and (max-width: 900px) {


    .pd-mobile-bar {
        inset-block-end: 0 !important;
    }
    .lookbook-card {
        flex: 0 0 60% !important;
        scroll-snap-align: center;
    }
}

@media (max-width: 767px) {
    .home-cat-row {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }


    .acc-orders-table th,
    .acc-orders-table td {
        padding: 0.75rem 0.5rem;
    }

    .acc-orders-table td {
        font-size: 0.9rem;
    }

    .acc-orders-table .order-product-title {
        font-size: 0.9rem;
    }

    .acc-orders-table .order-product-options {
        font-size: 0.78rem;
    }

    .acc-orders-table .order-price {
        font-size: 0.9rem;
    }

    .product-card__actions {
        opacity: 1;
        visibility: visible;
        transform: none;
        flex-direction: row;
        gap: 0.5rem;
        bottom: 0.6rem;
        right: 0.6rem;
    }

    .product-card__wishlist,
    .product-card__quick-add {
        opacity: 1;
        transform: translateY(0);
    }

    .home-cat-row::-webkit-scrollbar {
        display: none;
    }

    .home-cat-row__icon {
        width: 45px;
        height: 45px;
    }

    .home-cat-row__item {
        flex: 0 0 auto;
    }
}

@media (max-width: 640px) {
    .pd-scroll-bar__inner {
        padding: 0.5rem 1rem;
    }

    .pd-scroll-bar__summary {
        display: none;
    }

    .ck-form {
        padding: 1.25rem 1.25rem 0.25rem;
    }

    .acc-orders-table thead {
        display: none;
    }

    .acc-orders-table, .acc-orders-table tbody {
        display: block;
        width: 100%;
        border: none;
        box-shadow: none;
        background: none;
    }

        .acc-orders-table tbody {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .acc-orders-table tr {
            display: grid;
            grid-template-columns: 1fr auto;
            column-gap: 0.75rem;
            row-gap: 0.4rem;
            padding: 0.9rem 1rem;
            border: 1px solid var(--color-border);
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 2px 8px rgba(20, 20, 20, 0.04);
        }

        .acc-orders-table td {
            display: block;
            padding: 0;
            border-bottom: none;
            text-align: start;
        }

            .acc-orders-table td[data-label]:not([data-label=""])::before {
                content: attr(data-label);
                display: block;
                font-size: 0.68rem;
                font-weight: 600;
                letter-spacing: 0.03em;
                text-transform: uppercase;
                color: var(--color-muted);
                margin-bottom: 0.15rem;
            }

            .acc-orders-table td:nth-child(2) {
                grid-column: 1;
                grid-row: 2;
            }

            .acc-orders-table td:nth-child(3) {
                grid-column: 2;
                grid-row: 1;
                text-align: end;
            }

            .acc-orders-table td:nth-child(5) {
                grid-column: 1 / -1;
                grid-row: 3;
                margin-top: 0.4rem;
                padding-top: 0.6rem;
                border-top: 1px solid var(--color-border);
                text-align: end;
            }

            .acc-orders-table td:nth-child(1) {
                grid-column: 1;
                font-size: 0.875rem;
                grid-row: 1;
                font-weight: 600;
                color: var(--color-ink);
            }

            .acc-orders-table td:nth-child(4) {
                grid-column: 2;
                grid-row: 2;
                text-align: end;
                font-weight: 700;
                color: var(--color-price, var(--color-ink));
                font-size: 0.95rem;
            }

    .order-track-hero {
        display: block;
    }

    .order-track-mini {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        background: #fff;
    }

    .order-track-mini__thumb {
        flex-shrink: 0;
        width: 52px;
        height: 52px;
        border-radius: 8px;
        overflow: hidden;
        background: var(--color-bg-subtle, #f5f5f5);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
    }

        .order-track-mini__thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .order-track-mini__title {
        margin: 0;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-text);
    }

    .order-track-mini__variant,
    .order-track-mini__more {
        margin: 0.15rem 0 0;
        font-size: 0.75rem;
        color: var(--color-muted);
    }

    .order-track-showmore {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        width: 100%;
        margin-top: 0.5rem;
        padding: 0.6rem;
        border: none;
        background: none;
        color: var(--color-primary-dark, var(--color-primary));
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        cursor: pointer;
    }


    .order-track-details {
        display: none;
    }

        .order-track-details.order-track-details--open {
            display: grid;
        }

    .order-track-steps {
        flex-direction: column;
        align-items: stretch;
        gap: 1.1rem;
    }

    .order-track-step {
        flex-direction: row;
        align-items: center;
        text-align: start;
        min-width: 0;
    }

    .order-track-step__dot {
        margin-block-end: 0;
        margin-inline-end: 0.75rem;
        flex-shrink: 0;
    }

    .order-track-step__line {
        inset-inline-start: 18px;
        top: -1.1rem;
        bottom: auto;
        height: 1.1rem;
        width: 2px;
        inset-inline-end: auto;
    }

    .order-track-step__body {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .product-rail__item.swiper-slide {
        width: 44%;
        min-width: 150px;
    }
    .product-card__actions_catpage {
        top: 12rem;
    }

    .cart-page {
        padding-top: 1rem;
    }

    .pd-detail-images img {
        width: 100%;
    }

    .pd-payment-row {
        flex-direction: column;
    }

    .pd-thumb {
        width: 100px;
        height: 90px;
        border-radius: 10px;
    }

    .pd-main-img-wrap {
        width: 100%;
        border-radius: 2px;
        overflow: hidden;
        line-height: 0;

    }

    .pd-main-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .cart-layout {
        gap: 1.5rem;
    }

    .cart-line {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .cart-line__thumb {
        width: 56px;
        height: 56px;
    }

    .cart-line__body {
        min-width: 200px;
    }

    .cart-line__head {
        flex-wrap: wrap;
    }

    .cart-line__price {
        font-size: clamp(0.738rem, calc(0.681rem + 0.2434vw), 0.9rem);
        margin-top: 0.3rem;
    }

    .cart-line__footer {
        flex-wrap: wrap;
    }

    .cart-line__qty-row {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    .cart-summary {
        padding: 1.1rem;
    }

    .pd-related__rail {
        gap: 0.75rem;
    }

    .pd-related-card {
        flex: 0 0 140px;
    }

    .pd-review-form__row {
        flex-direction: column;
    }

    .short-grid-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lb-meta-secondary {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-start;
    }

    .lb-article__figure {
        width: 100%;
    }

    .lb-post-nav__item {
        flex-direction: column;
        gap: 0.2rem;
    }

    .inf-features-grid {
        grid-template-columns: 1fr;
    }

    .inf-form-row {
        grid-template-columns: 1fr;
    }

    .inf-input-group.full-width {
        grid-column: span 1;
    }

    .inf-form-card {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 400px) {

    .sf-utility__left {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .sf-nav__inner {
        flex-wrap: wrap;
    }

    .sf-footer__inner {
        grid-template-columns: 1fr;
    }

    table {
        display: block;
        overflow-x: auto;
    }

    .home-hero__slide
    input, select, textarea, button {
        max-width: 100%;
        font-size: clamp(0.65rem, calc(0.6rem + 0.22vw), 0.95rem);
    }
}
/* Add these rules to your admin stylesheet */

/* Wraps an input + inline action (button or status text) side by side */
.input-with-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .input-with-action input {
        flex: 1;
    }

/* Small secondary button that sits inline with an input */
.btn-fetch {
    white-space: nowrap;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

    .btn-fetch:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Status badge shown after a fetch attempt */
.fetch-status {
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
}

.fetch-status--loading {
    color: #6c757d;
}

.fetch-status--ok {
    color: #198754;
}

/* Small thumbnail preview in the add-post form */
.thumb-preview {
    margin-top: 0.25rem;
}

    .thumb-preview img {
        height: 80px;
        width: auto;
        border-radius: 4px;
        border: 1px solid #dee2e6;
        object-fit: cover;
    }

/* Thumbnail column in the posts table */
.table-thumb {
    height: 48px;
    width: auto;
    border-radius: 4px;
    object-fit: cover;
}
/* ── Page header ── */
.inf-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.inf-breadcrumb {
    font-size: 12px;
    color: var(--text-secondary, #6c757d);
    margin-bottom: 6px;
}

.inf-page-header h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 6px;
    line-height: 1.2;
}

.inf-page-header p {
    font-size: 13.5px;
    color: var(--text-secondary, #6c757d);
    margin: 0;
    line-height: 1.5;
}

.inf-page-header code {
    background: #fff7ed;
    color: var(--accent, #f97316);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #fed7aa;
    font-size: 12px;
}

/* ── Stats ── */
.inf-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.inf-stat {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 140px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-subtle, #e9ecef);
    border-radius: 8px;
    padding: 14px 18px;
    gap: 5px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .04);
}

.inf-stat__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-secondary, #6c757d);
}

.inf-stat__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
    line-height: 1.1;
}

.inf-stat--pending .inf-stat__value {
    color: #d97706;
}

.inf-stat--approved .inf-stat__value {
    color: #059669;
}

.inf-stat--rejected .inf-stat__value {
    color: #dc2626;
}

/* ── Toolbar ── */
.inf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.inf-search {
    position: relative;
    flex: 1;
    max-width: 340px;
}

.inf-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--text-muted, #adb5bd);
    pointer-events: none;
}

.inf-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--border-subtle, #e0e0e0);
    border-radius: 5px;
    font-size: 13px;
    background: #fff;
    color: var(--text-primary, #1a1a2e);
    outline: none;
    box-sizing: border-box;
    transition: none;
}

    .inf-search input:focus {
        border-color: #aaa;
        box-shadow: none;
    }

/* ── Filter tabs ── */
.inf-filter-tabs {
    display: flex;
    gap: 6px;
}

.inf-filter-tab {
    height: 34px;
    padding: 0 13px;
    border-radius: 4px;
    border: 1px solid var(--border-subtle, #e0e0e0);
    background: #fff;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: none;
}

    .inf-filter-tab:hover {
        border-color: #ccc;
        color: var(--text-secondary, #6c757d);
        background: #fff;
    }

    .inf-filter-tab.active {
        background: var(--color-primary, #ff4a83);
        border-color: var(--color-primary, #ff4a83);
        color: #fff;
        font-weight: 600;
    }

    .inf-filter-tab .inf-tab-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 700;
        background: rgba(255, 255, 255, .3);
        color: inherit;
    }

    .inf-filter-tab:not(.active) .inf-tab-count {
        background: #f5f5f5;
        color: var(--text-secondary, #6c757d);
    }

/* ── Cards grid ── */
.inf-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.inf-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-subtle, #e9ecef);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .04);
    display: flex;
    flex-direction: column;
    transition: none;
}

    .inf-card:hover {
        transform: none;
        box-shadow: 0 1px 4px rgba(15, 23, 42, .04);
    }

/* ── Status bar ── */
.inf-card__bar {
    height: 4px;
    width: 100%;
}

.inf-card--pending .inf-card__bar {
    background: #f59e0b;
}

.inf-card--approved .inf-card__bar {
    background: #10b981;
}

.inf-card--rejected .inf-card__bar {
    background: #ef4444;
}

/* ── Card header ── */
.inf-card__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px 14px;
}

.inf-card__avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: linear-gradient( 135deg, var(--color-primary, #ff4a83) 0%, #f97316 100% );
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
}

.inf-card__name-row {
    flex: 1;
    min-width: 0;
}

.inf-card__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 4px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inf-card__handle {
    font-size: 12.5px;
    color: var(--text-secondary, #6c757d);
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

/* ── Status badge ── */
.inf-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.inf-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.inf-badge--pending {
    background: #fef3c7;
    color: #92400e;
}

.inf-badge--approved {
    background: #d1fae5;
    color: #065f46;
}

.inf-badge--rejected {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Card body ── */
.inf-card__body {
    padding: 4px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.inf-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.inf-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.inf-meta__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted, #adb5bd);
    line-height: 1.3;
}

.inf-meta__value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #1a1a2e);
    line-height: 1.5;
    word-break: break-word;
}

    .inf-meta__value a {
        color: var(--accent, #f97316);
        font-weight: 600;
        text-decoration: none;
        font-size: 12.5px;
    }

        .inf-meta__value a:hover {
            text-decoration: underline;
        }

/* ── Message ── */
.inf-message {
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    display: block;
    overflow: hidden;
}

/* ── Footer ── */
.inf-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-subtle, #e9ecef);
    background: #fafafa;
}

.inf-card__date {
    font-size: 11px;
    color: var(--text-muted, #adb5bd);
}

.inf-card__actions {
    display: flex;
    gap: 6px;
}



.inf-btn:hover {
    transform: none;
}

.inf-btn--approve {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}

    .inf-btn--approve:hover {
        background: #10b981;
        border-color: #10b981;
        color: #fff;
    }

.inf-btn--reject {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}

    .inf-btn--reject:hover {
        background: #ef4444;
        border-color: #ef4444;
        color: #fff;
    }

/* ── Followers ── */
.inf-followers {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, #ff4a83);
}

/* ── Platform ── */
.inf-platform {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6c757d);
}

/* ── Empty state ── */
.inf-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 1rem;
    border: 1px dashed var(--border-subtle, #e9ecef);
    border-radius: 10px;
    background: #fafafa;
}

.inf-empty__icon {
    font-size: 2.5rem;
    margin-bottom: .75rem;
}

.inf-empty h3 {
    margin: 0 0 .4rem;
    font-size: 1.1rem;
    color: var(--text-primary, #1a1a2e);
}

.inf-empty p {
    margin: 0;
    font-size: .875rem;
    color: var(--text-secondary, #6c757d);
}

/* ── View toggle ── */
.inf-view-toggle {
    display: inline-flex;
    border: 1px solid var(--border-subtle, #e0e0e0);
    border-radius: 5px;
    overflow: hidden;
}

    .inf-view-toggle button {
        height: 34px;
        padding: 0 14px;
        border: none;
        background: #fff;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-secondary, #6c757d);
        cursor: pointer;
    }

        .inf-view-toggle button + button {
            border-left: 1px solid var(--border-subtle, #e0e0e0);
        }

        .inf-view-toggle button.active {
            background: var(--color-primary, #ff4a83);
            color: #fff;
        }

.inf-export-btn {
    height: 34px;
    padding: 0 14px;
    border-radius: 5px;
    border: 1px solid var(--border-subtle, #e0e0e0);
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    cursor: pointer;
    white-space: nowrap;
}

    .inf-export-btn:hover {
        border-color: #ccc;
    }

/* ── Table view ── */
.inf-table-wrap {
    margin-bottom: 32px;
}

/* ── Loading ── */
.inf-loading {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-secondary, #6c757d);
    font-size: .9rem;
}

@media (max-width: 900px) {
    .product-rail__item.swiper-slide {
        width: 44%;
        min-width: 155px;
    }
    .pd-viewers {
        gap: 0.3rem;
        padding: 0.22rem 0.6rem;
        margin-block-end: 0.7rem;
        font-size: 0.78rem;
        font-weight: 500;
    }

    .pd-related__rail {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow-x: visible;
    }

    .pd-related-card {
        flex: none;
        min-width: 0;
    }

    .sf-header--scrolled .sf-logo__img--dark {
        width: 90px;
    }

    .home-hero__counter {
        inset-inline-start: auto;
        inset-inline-end: 1.1rem;
        transform: none;
    }

    .storefront-header__nav {
        display: none;
    }

    .sf-logo {
        justify-content: center;
        margin-inline: auto;
    }

    .vedio-section {
        margin-block-end: 0rem;
    }

    .cart-line__delivery {
        font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    }

    body {
        overflow-x: hidden !important;
    }

 
    .pd-layout {
        margin-top: 1rem;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .ev-title {
        margin: 0 0 0.5rem;
    }

    .home-hero {
        aspect-ratio: auto;
    }

    .home-hero__image {
        object-fit: cover;
        background: transparent;
    }

    .home-section--split-rail {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .home-section__sidebar h2 {
        margin-block: 0;
    }

    .pd-info {
        position: static;
        top: auto;
        width: 100%;
        flex: none;
        max-height: none;
        overflow-y: visible;
    }

    .ev-search {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: clamp(0.35rem, 1.5vw, 0.5rem);
        margin-block: 2.5rem 1rem;
        padding-inline: 1rem;
        font-size: clamp(0.72rem, 2vw, 0.82rem);
        color: #666;
        flex-wrap: wrap;
        text-align: center;
        line-height: 1.5;
        box-sizing: border-box;
        max-width: 100%;
    }

    .pd-sticky-cta {
        flex: none;
        width: 100%;
        position: static;
        top: auto;
        /* The base rule's min-height: calc(100vh - 100px) is meant for the desktop sticky
           rail, which stays pinned beside a tall gallery. Once this becomes a static,
           stacked block on mobile, that same min-height forces it to reserve near-full
           viewport height even though its content (options, qty, buy button) is short -
           leaving a large blank gap above the COLOR option before its next sibling appears. */
        min-height: auto;
    }

    .pd-review__inner {
        flex-direction: column;
    }

    .pd-review__meta {
        border-left: none;
        padding-inline-start: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        border-top: 1px solid #ebebeb;
        padding-block-start: 0.5rem;
    }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .table-container .admin-table {
            min-width: 560px;
        }

    .social-grid {
        padding: 1rem 0;
        grid-template-columns: repeat(3, 1fr);
    }

    /* The floating action stack and the fixed bottom nav are position:fixed, so
       they sit over whatever is at the bottom of the document - which is the
       footer. Reserve room so the last footer lines are never covered. (The rest
       of the phone footer layout lives in the "Footer: match the reference"
       block at the end of this file.) */
    .sf-footer .sf-footer__inner > .sf-footer__brand {
        /* The chat launcher is 64px tall and sits 24px off the bottom, so the
           last line needs more than 88px of clearance to stay readable. */
        padding-bottom: 7.5rem;
    }

    .short-grid-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-panel-row, .pos-panels {
        grid-template-columns: 1fr;
    }

    .dash-header {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }

    .stat-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .stat-card {
        min-width: 0;
        padding: 0.85rem 1rem;
    }


    .checkout-layout {
        grid-template-columns: 1fr;
    }



    .promo-row {
        display: flex;
        grid-template-columns: none;
        gap: 0.85rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: 1rem;
        scrollbar-width: none;
        padding-inline: 0.25rem;
    }

        .promo-row::-webkit-scrollbar {
            display: none;
        }

        .promo-row .promo-card {
            flex: 0 0 30%;
            min-width: 200px;
            scroll-snap-align: start;
        }


    .lookbook-grid {
        display: flex;
        grid-template-columns: none;
        gap: 0.85rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: 1rem;
        scrollbar-width: none;
        padding: 0 0.25rem;
    }

        .lookbook-grid::-webkit-scrollbar {
            display: none;
        }



    .pd-gallery {
        width: 100%;
        flex: none;
    }


    .pd-main-img-wrap {
      
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f8f8;
    }

    .pd-main-img {
        max-height: 100%;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    .category-page__layout {
        grid-template-columns: 1fr;
    }

    .cp-chip-row {
        display: flex;
    }

    .cp-sidebar {
        display: none;
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 110;
        max-height: 80vh;
        overflow-y: auto;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -10px 30px rgba(20, 20, 20, 0.18);
    }

    .cp-sidebar--open {
        display: flex;
    }

    .cp-sidebar__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 105;
        background: rgba(0, 0, 0, 0.4);
    }

    .cp-sidebar__mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.95rem;
    }

        .cp-sidebar__mobile-head button {
            border: none;
            background: var(--color-bg-subtle);
            border-radius: 50%;
            font-size: 1.1rem;
            line-height: 1;
            cursor: pointer;
        }

    .cp-sidebar__mobile-apply {
        display: block;
        position: sticky;
        bottom: 0;
        width: 100%;
        padding: 0.75rem;
        margin-top: 0.5rem;
        border: none;
        border-radius: 10px;
        background: var(--color-ink);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
    }
    /* Sort dropdown anchors directly under the trigger button, right-aligned - a small
       floating popover, not a bottom sheet, matching the reference design exactly. */
    .category-page__sort {
        position: relative;
    }

    .cp-sort-backdrop {
        position: fixed;
        inset: 0;
        z-index: 15;
        background: transparent;
    }

    .cp-sort-sheet {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: absolute;
        inset-block-start: calc(100% + 0.5rem);
        inset-inline-end: 0;
        z-index: 20;
        min-width: 180px;
        width: max-content;
        padding: 0.4rem;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(20, 20, 20, 0.15);
    }

    .cp-sort-sheet__option {
        text-align: start;
        padding: 0.6rem 0.75rem;
        border: none;
        background: none;
        border-radius: 6px;
        font-size: 0.82rem;
        color: var(--color-muted, #888);
        cursor: pointer;
        white-space: nowrap;
    }

        .cp-sort-sheet__option:hover {
            background: var(--color-bg-subtle);
        }

    .cp-sort-sheet__option--active {
        color: var(--color-ink);
        font-weight: 700;
    }
    
    .category-page__select {
        display: none;
    }

    .cp-sort-trigger {
        display: flex;
        margin-left: auto;
        border:none;
    }


    /* Hide the desktop inline CTA row on mobile - the fixed bottom bar takes over. */
    .pd-info__actions {
        display: none;
    }

    .pd-mobile-bar {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        position: fixed;
        inset-inline: 0;
        inset-block-end: var(--tc-bottom-nav-h);
        z-index: 40;
        padding: 0.5rem 0.75rem 0.6rem;
        background: #fff;
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -6px 20px rgba(20, 20, 20, 0.08);
    }

    .pd-mobile-bar__selection {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        max-height: 3.2rem;
        overflow-y: auto;
    }

    .pd-mobile-bar__chip {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        background: var(--color-bg-subtle, #f5f5f5);
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--color-text);
    }

    .pd-mobile-bar__swatch {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, 0.15);
        flex-shrink: 0;
    }

    .pd-mobile-bar__actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .pd-mobile-bar .pd-wishlist {
        flex: 0 0 46px;
        width: 40px;
        height: 40px;
        display:none;
    }

    .pd-mobile-bar .pd-btn-cart,
    .pd-mobile-bar .pd-btn-buy {
        flex: 1;
        width: calc(50% - 10px);
        height: 55px;
        line-height: 55px;
        padding: 0;
    }

    .pd-mobile-bar .pd-order-total {
        display: none;
    }

    .rv-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Home */
    .home-section__head--center h2 {
        font-size: 20.8px;
        margin-block: 0 1.5rem;
    }


    .home-section__sidebar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-block-start: 0;
        width: 100%;
    }

    .home-section__head {
        display: flex;
        justify-content: center;
        text-align: center;
        margin: 1.3rem;
    }

    .home-section__controls {
        display: none;
    }

    .home-section__sub {
        font-size: 0.76rem;
    }

    .review-card-modern__heading {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .review-card-modern__text {
        font-size: 0.78rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .lookbook-card span {
        font-size: 0.8rem;
    }
    /* Category / Shop All */
    .category-page__title {
        font-size: 1.05rem;
    }

    .category-page__count,
    .category-page__select {
        font-size: 0.76rem;
    }

    .cp-tabbar__item {
        font-size: 0.76rem;
    }

    .product-card__title {
        font-size: 1rem;
        font-weight: 500;
    }

    .product-card__brand,
    .product-card__handle {
        font-size: 0.68rem;
    }

    .product-card__prices {
        font-size: 1rem;
    }

    .category-page__more-btn {
        font-size: 0.72rem;
    }
    /* Product Detail */
    .pd-title {
        font-size: 0.95rem;
    }

    .pd-price {
        font-size: 1.05rem;
    }

    .pd-discount-rate {
        font-size: 0.85rem;
    }

    .pd-desc {
        font-size: 0.78rem;
    }

    .pd-tab {
        font-size: 1.15em;
    }

    .pd-option-label {
        font-size: 0.72rem;
    }

    .rv-detail-card__body,
    .rv-detail-card__title {
        font-size: 0.78rem;
    }

    .rv-detail-card {
        grid-template-columns: 1fr;
    }

    .rv-detail-card__meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        padding-inline-start: 0;
        border-inline-start: none;
        border-top: 1px solid #ebebeb;
        padding-top: 0.6rem;
        margin-top: 0.4rem;
    }

    .pd-review-toolbar__search,
    .pd-review-toolbar__select {
        font-size: 0.76rem;
    }
}



/* ── BASE (all viewports) ─────────────────────────────────── */

.sf-header {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: 40;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform .22s ease, visibility .22s ease;
    border-bottom: 1px solid #f2f2f2;
}

/* Announce bar */
.sf-announce {
    position: relative;
    background: var(--color-primary) !important; /* hot-pink brand colour */
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    padding: 0.45rem 0.8rem;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 30px;
}

/* Utility row */
.sf-utility {
    background: rgba(255, 255, 255, 0.85); /* slightly see-through, per the reference */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--titto-border);
    padding: 0.9rem 1.3rem;
    /* backdrop-filter above turns this row into a stacking context, which traps
       the account dropdown's z-index inside it. Raise the whole row above the
       nav row (1) and the search panel (2) so the dropdown hangs over both
       instead of disappearing behind them on a scrolled/sticky header. */
    position: relative;
    z-index: 3;
    overflow: visible;
}

.sf-utility__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* desktop: links | logo | icons */
    align-items: center;
    margin-inline: auto;
}

.sf-utility__left {
    display: flex;
    align-items: center;
    gap: 2.1rem;
}

.sf-utility__right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: flex-end;
}

/* Logo */
.sf-logo__img {
    display: block;
    width: clamp(92px, 6.8vw, 124px); /* ~94px at 1377px, per the reference */
    height: auto;
    max-width: 100%;
    object-fit: contain;
    transition: width 0.2s ease;
}

/* Header utility icons (search/account/cart) - same asset-based
   light/dark swap as the logo, using the real icon files in wwwroot/icons
   instead of inline SVGs. */
.sf-asset-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.sf-asset-icon--white {
    display: none;
}

.sf-asset-icon--dark {
    display: block;
}

.sf-header--transparent .sf-asset-icon--white {
    display: block;
}

.sf-header--transparent .sf-asset-icon--dark {
    display: none;
}

.sf-header--scrolled .sf-asset-icon--white {
    display: none;
}

.sf-header--scrolled .sf-asset-icon--dark {
    display: block;
}

.sf-header--transparent .sf-logo__img--white {
    display: block;
    height: clamp(25px, 1.5vw, 35px);
}

.sf-header--transparent .sf-logo__img--dark {
    display: none;
}

.sf-header--transparent .sf-logo__img--scrolled {
    display: none;
}

/* White logo: home transparent header (desktop only) */
.sf-logo__img--white {
    display: none;
}

.sf-logo__img--dark {
    display: block;
}

.sf-logo__img--scrolled {
    display: none;
}

.sf-header--transparent,
.sf-header--transparent .sf-utility,
.sf-header--transparent .sf-nav {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

#sfHeader.sf-header--transparent:not(.sf-header--scrolled),
#sfHeader.sf-header--transparent:not(.sf-header--scrolled) .sf-utility,
#sfHeader.sf-header--transparent:not(.sf-header--scrolled) .sf-nav {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── Transparent header text & icons ── */
.sf-header--transparent .sf-utility__link,
.sf-header--transparent .sf-utility__greeting,
.sf-header--transparent .sf-nav__link,
.sf-header--transparent .sf-icon-btn {
    color: #fff;
    opacity: 0.8;
    text-transform: uppercase;
    transition: opacity 0.2s ease, color 0.2s ease;
}

    .sf-header--transparent .sf-icon-btn svg,
    .sf-header--transparent .sf-icon-btn svg circle,
    .sf-header--transparent .sf-icon-btn svg path,
    .sf-header--transparent .sf-icon-btn svg line {
        stroke: #fff;
        fill: none;
    }

        .sf-header--transparent .sf-icon-btn svg path[fill="currentColor"] {
            fill: #fff;
            stroke: none;
        }

    .sf-header--transparent .sf-nav__link::after {
        background: #fff;
    }

    .sf-header--transparent .sf-utility__link:hover,
    .sf-header--transparent .sf-icon-btn:hover,
    .sf-header--transparent .sf-nav__link:hover {
        color: #fff !important;
        opacity: 1 !important;
    }

.sf-header--transparent:not(.sf-header--scrolled) {
    border-bottom-color: transparent;
}

/* Scrolled state */
.sf-header--scrolled {
    box-shadow: 0 2px 14px rgba(0,0,0,.08);
}

    .sf-header--scrolled .sf-announce {
        display: none;
    }

    .sf-header--scrolled .sf-logo__img--dark {
        display: block;
        width: 85px;
    }

    .sf-header--scrolled .sf-logo__img--white {
        display: none;
    }

    .sf-header--scrolled:has(.sf-logo__img--scrolled) .sf-logo__img--dark {
        display: none;
    }

    .sf-header--scrolled .sf-logo__img--scrolled {
        display: block;
        width: 72px;
    }



/* Nav row (horizontal links, desktop only) */
.sf-nav {
    background: rgba(255, 255, 255, 0.85); /* slightly see-through, per the reference */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* backdrop-filter makes this row a stacking context. Without an explicit
       stack level it would paint over the utility row (later sibling wins) and
       cover the account dropdown that hangs down out of that row. */
    position: relative;
    z-index: 1;
}

.sf-nav__inner {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    max-width: 1200px;
    margin-inline: auto;
    padding: 0.35rem 0.5rem;
}

/* Hero — base */
.home-hero {
    position: relative;
    overflow: hidden;
    margin-block-end: 0;
    margin-inline: -2.5rem; /* bleeds past storefront-main's 2.5rem padding */
    margin-block-start: -0.8rem;
    width: calc(100% + 5rem);
}


.short-section-container .home-hero,
.home-section--carousel .home-hero {
    margin-inline: 0;
    margin-block-start: 0;
    width: 100%;
}

.home-hero__track {
    position: relative;
    width: 100%;
}

.home-hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
    z-index: 0;
}

.home-hero__slide--active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.home-hero__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Dark gradient scrim at top of hero image */
.home-hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.09) 18%, rgba(0,0,0,0.04) 35%, rgba(0,0,0,0.015) 55%, rgba(0,0,0,0) 78%, rgba(0,0,0,0) 100% );
    z-index: 1;
    pointer-events: none;
}


/* Script/cursive heading */
.home-hero__script {
    margin: 0;
    font-family: "Caveat", "Brush Script MT", cursive;
    font-weight: 700;
    font-size: clamp(2.4rem, 9vw, 4.5rem);
    line-height: 0.95;
    color: #fff8f6;
    -webkit-text-stroke: 6px #e23a63;
    paint-order: stroke fill;
    text-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

/* Pink pill kicker below heading */
.home-hero__kicker {
    display: inline-block;
    background: #e23a63;
    color: #fff;
    font-family: var(--font-sans);
    font-size: clamp(0.7rem, calc(0.6rem + 0.3vw), 0.85rem);
    font-weight: 700;
    letter-spacing: .02em;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    margin-block-start: 0.6rem;
    text-shadow: none;
}

/* Prev/next arrows */
.home-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 50px;
    height: 90px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

    .home-hero__arrow::before {
        content: "";
        position: absolute;
        top: 50%;
        width: 28px;
        height: 28px;
        border-top: 1px solid #fff;
        border-left: 1px solid #fff;
        transform: translateY(-50%) rotate(-45deg);
    }

.home-hero__arrow--prev {
    left: 20px;
}

    .home-hero__arrow--prev::before {
        transform: translateY(-50%) rotate(-45deg);
    }

.home-hero__arrow--next {
    right: 20px;
}

    .home-hero__arrow--next::before {
        transform: translateY(-50%) rotate(135deg);
    }

/* Slide indicator dots */
.home-hero__dots {
    position: absolute;
    inset-block-end: 1.1rem;
    inset-inline: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.home-hero__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: none;
    padding: 0;
    background-color: #fff;
    transition: background .15s ease, transform .15s ease;
}

.home-hero__dot--active {
    background: #222;
}

/* Spacer below fixed header */
.sf-header-spacer {
    height: var(--sf-header-h, 132px);
}

.sf-header-spacer--home-mobile {
    display: none;
}

@media (max-width: 860px) {
    .home-trust-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .tc-auth-shell {
        grid-template-columns: 1fr;
    }

    .tc-auth-panel-art {
        min-height: 220px;
    }

    .tc-auth-art-copy h2 {
        font-size: 1.6rem;
    }

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .sf-lang-switcher {
        border-radius: 4px !important;
        background-color: transparent !important;
    }

    .cart-summary {
        position: static;
    }

    .ck-layout {
        grid-template-columns: 1fr;
    }

    .ck-summary {
        position: static;
    }


    .sf-dropdown--account {
        display: none !important;
    }

    .sf-nav__inner::-webkit-scrollbar {
        display: none;
    }

    .sf-nav__link {
        white-space: nowrap;
        margin: 0.3rem 0rem;
    }

    .order-track-layout {
        grid-template-columns: 1fr;
    }

    .sf-hamburger-btn {
        display: flex;
    }

    /* Nav row completely hidden — drawer replaces it */
    .sf-nav {
        display: none;
    }

    /* ...except on category/product pages, where it comes back as a plain link row. */
    .sf-nav--mobile-visible {
        display: block !important;
        background: #fff;
        border-bottom: 1px solid var(--titto-border);
    }

        .sf-nav--mobile-visible .sf-nav__inner {
            justify-content: flex-start;
            gap: 1.1rem;
            padding: 0.65rem 1rem;
        }

        .sf-nav--mobile-visible .sf-nav__link {
            font-size: clamp(0.88rem, calc(0.64rem + 0.12vw), 0.78rem);
        }

        
        .sf-nav--mobile-visible .sf-dropdown {
            display: none !important;
        }

    /* Scrolled header: frosted white */
    .sf-header--scrolled .sf-utility {
        display: block;
     
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Default: dark logo */
    .sf-logo__img--white {
        display: none;
    }

    .sf-logo__img--dark {
        display: block;
    }

    .sf-logo__img--scrolled {
        display: none;
    }

    /* Home route, before scrolling: transparent header over the hero image - same as
       desktop, so use the white logo. */
    .sf-header--transparent:not(.sf-header--scrolled) .sf-logo__img--white {
        display: block;
    }

    .sf-header--transparent:not(.sf-header--scrolled) .sf-logo__img--dark {
        display: none;
    }

    /* Scrolled logo swap */
    .sf-header--scrolled .sf-logo__img--scrolled {
        display: block;
    }

    .sf-header--scrolled:has(.sf-logo__img--scrolled) .sf-logo__img--dark {
        display: none;
    }

    /* Mobile-only spacer (compensates for fixed header above hero) */
    .sf-header-spacer--home-mobile {
        display: block;
    }

    /* Utility row tweaks */
    .sf-utility {
        padding-inline: 0.75rem;
    }

    .sf-utility__inner {
        grid-template-columns: auto 1fr auto; /* hamburger | logo | icons */
        column-gap: 0.5rem;
    }

    .sf-logo__text {
        font-size: clamp(1.558rem, calc(1.4376rem + 0.5138vw), 1.9rem);
    }

    .sf-nav__inner {
        gap: 1.5rem;
        padding: 0.85rem 1rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    /* Simplified header (mobile + tablet): search moves next to the hamburger,
       lang switcher and wishlist drop out, cart shows before account. */
    .sf-search-icon {
        display: none;
    }

    .sf-search-icon-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sf-wishlist-icon,
    .sf-lang-switcher-wrap {
        display: none;
    }

    .sf-cart-btn:not(.sf-wishlist-icon) {
        order: 1;
    }

    .sf-account-item {
        order: 2;
    }

}

@media (max-width: 768px) {
    .social-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .home-hero__arrow {
        display: none;
    }
    .sf-utility__link, .sf-utility__sep,
    .sf-utility-item--community {
        display: none;
    }
    .category-page__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    .modal-content-custom {
        width: 92%;
        max-width: 400px;
    }

    .review-detail-modal {
        width: 92%;
        max-width: 480px;
    }

    .options-modal-container {
        width: 100%;
        max-width: 500px;
        max-height: 85vh;
        padding: 20px;
    }

    .category_actions {
        top: auto !important;
        bottom: 0.75rem !important;
        right: 0.75rem !important;
        display: flex;
        flex-direction: column;
    }
    .mkw-launcher {
        width: 42px !important;
        height: 42px !important;
        left: 6px !important;
        bottom: 70px !important;
        border-radius: 14px !important;
    }

        .mkw-launcher svg,
        .mkw-launcher img {
            width: 20px !important;
            height: 20px !important;
        }
    .sf-utility {
        padding: 0.2rem;
    }

    .sf-float-btn {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

        .sf-float-btn.sf-float-btn--eye > svg {
            width: 20px !important;
            height: 20px !important;
            min-width: 20px !important;
            min-height: 20px !important;
        }

        .sf-float-btn.sf-float-btn--top > img {
            width: 1rem !important;
            height: 1rem !important;
        }

    .storefront-main {
        padding-inline: 0.4rem;
    }

    .pd-tabs-bar {
        width: calc(100% + 0.8rem);
        margin-inline: -0.4rem;
    }

    .shorts-card {
        height: auto;
        max-height: 394px;
    }

    .cp-tabbar {
        border: none;
        gap: 0.5rem;
        padding: 0.25rem 0;
        flex-wrap: wrap;
        justify-content: center;
        margin-block: 0.75rem 1.25rem;
    }

    .cp-tabbar__item {
        border: 1px solid var(--color-border, #e5e5e5);
        border-radius: 999px; /* pill shape */
        padding: 0.45rem 1.1rem;
        background: #fff;
        color: #555;
        flex-shrink: 0;
    }

        .cp-tabbar__item:hover {
            background: var(--color-bg-subtle, #f7f7f7);
        }

    .cp-tabbar__item--active {
        background: var(--color-brown) !important;
        color: #fff !important;
        border-color: var(--color-brown) !important;
    }


    .sf-cart-count {
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--color-danger);
    }

    .admin-form--inline {
        align-items: stretch;
        flex-direction: column;
    }

        .admin-form--inline .form-group {
            width: 100%;
            min-width: 0;
        }

        .admin-form--inline button {
            width: 100%;
        }

    .product-detail {
        flex-direction: column;
    }

    .product-detail__gallery {
        position: static;
        top: auto;
        width: 100%;
    }

    /* Keep region switcher visible on mobile */
    .sf-region-switcher-wrap {
        display: inline-block;
    }

    .home-rail-arrow {
        border: none;
        background: transparent;
        font-size: 1.3rem;
    }

        .home-rail-arrow:hover {
            background: transparent;
        }

    .sf-nav__inner {
        gap: 1.5rem;
    }

    .titto-hero {
        aspect-ratio: 4 / 3;
        max-height: 480px;
    }

    .titto-section {
        padding: 2rem 1rem;
    }

    .titto-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .titto-review-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .titto-social-tile {
        flex: 0 0 50%;
    }

    .sf-footer__links {
        gap: 0.75rem;
    }

    .home-section--split-rail {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 3rem 0rem;
    }

    .home-section__sidebar {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-block-start: 0;
        text-align: center;
    }

        .home-section__sidebar h2 {
            font-weight: 500;
            font-size: clamp(1.2rem, calc(0.75rem + 0.7vw), 1.45rem);
            margin-block: 0;
        }

    .product-rail {
        gap: 0.75rem;
    }


    .product-card__title {
        font-size: clamp(0.697rem, calc(0.6431rem + 0.2299vw), 0.85rem);
    }


    .category-page {
        padding-top: 1rem;
    }

   

    .pd-rating-row {
        margin-left: 0;
        margin-right: auto;
        justify-content: flex-start;
    }

    .pd-btn-buy {
        width: 100%;
    }

    .pd-tabs-inner {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .pd-tabs-inner::-webkit-scrollbar {
            display: none;
        }

    .pd-tab {
        min-width: max-content;
        flex: none;
        padding-inline: 0.9rem;
        font-size: 0.8rem;
        white-space: nowrap;
        text-align: center;
    }

    .category-page__title {
        font-size: clamp(1.23rem, calc(1.1349rem + 0.4056vw), 1.5rem);
    }

    .category-page__toolbar {
        gap: 1rem;
    }


    .category-page__filters {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .admin-sidebar {
        width: 70px;
    }

    .admin-main {
        width: calc(100% - 70px);
        margin-left: 70px;
    }

    .admin-brand-info,
    .admin-menu-text,
    .admin-collapse-button span:last-child {
        display: none;
    }

    .admin-sidebar-header,
    .admin-menu-item {
        justify-content: center;
        padding: 0;
    }

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

    .catalog-header {
        flex-direction: column;
        gap: 16px;
    }

    .dash-tiles {
        grid-template-columns: 1fr;
    }

    .dash-panels {
        grid-template-columns: 1fr;
    }

    .inf-nav-links {
        display: none;
    }

    .inf-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .inf-form-row {
        grid-template-columns: 1fr;
    }

    .inf-model-circle, .inf-stats, .inf-back-link, .inf-hero-body {
        display: none;
    }

    .inf-form-panel {
        padding: 1rem;
    }

    .inf-left.inf-model {
        height: 50vh;
        display: none;
    }

    .inventory-chart {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .inventory-donut {
        width: 170px;
        height: 170px;
    }

        .inventory-donut::before {
            width: 112px;
            height: 112px;
        }

    .performance-summary {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .product-editor__grid {
        grid-template-columns: 1fr;
    }

    .product-editor__field--full {
        grid-column: auto;
    }

    .product-editor__categories {
        grid-template-columns: 1fr;
    }

    .product-editor__tier {
        grid-template-columns: 1fr;
    }

    .product-editor__section {
        padding: 18px;
    }

    .product-editor__heading {
        flex-direction: column;
    }

    .product-editor__tiers-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-editor__section {
        padding: 18px;
    }

    .settings-editor__grid {
        grid-template-columns: 1fr;
    }

    .settings-editor__field--full {
        grid-column: auto;
    }

    .settings-editor > .admin-form__actions {
        padding: 16px 18px;
    }

    .sf-float-stack {
        right: 0.6rem;
        bottom: 1rem;
        gap: 0.4rem;
    }

        .sf-float-stack .sf-float-btn {
            width: 2.5rem;
            height: 2.5rem;
        }

    .home-best-rail {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 0.75rem;
    }

    .inf-page-header {
        margin-bottom: 20px;
    }

    .product-rail__item {
        flex-basis: 44%;
        min-width: 160px;
    }

    .inf-toolbar {
        align-items: stretch;
    }

    .inf-search {
        max-width: none;
        width: 100%;
    }

    .inf-filter-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .inf-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .inf-meta-grid {
        gap: 12px;
    }
    /* Hero edge-to-edge (storefront-main padding = 1.25rem) */
    .home-hero {
        margin-inline: -1.25rem;
        width: calc(100% + 2.5rem);
        max-height: none;
    }

    .sf-hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #111;
        cursor: pointer;
        flex-shrink: 0;
    }

    .sf-utility__inner {
        grid-template-columns: auto 1fr auto;
        gap: 0.5rem;
    }

    .sf-utility__left {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .sf-logo__text {
        color: rgba(0,0,0,0.87);
        font-size: clamp(1.148rem, calc(1.0593rem + 0.3786vw), 1.4rem);
    }

    #sfHeader:not(.sf-header--transparent) .sf-utility__link,
    #sfHeader:not(.sf-header--transparent) .sf-icon-btn,
    .sf-header--scrolled .sf-utility__link,
    .sf-header--scrolled .sf-icon-btn {
        color: rgba(0,0,0,0.87) !important;
    }

    /* Hide right-side icons that don't fit */
    .sf-wishlist-icon,
    .sf-lang-switcher-wrap,
    .sf-search-icon {
        display: none;
    }
}

@media (max-width: 700px) {

    .home-hero__track {
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .home-hero__slide {
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .cart-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        position: fixed;
        inset-inline: 0;
        bottom: calc(0px + env(safe-area-inset-bottom));
        z-index: 99;
        padding: 0.6rem 1rem;
        background: #fff;
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    }

    .cart-mobile-bar__total {
        display: flex;
        flex-direction: column;
        font-size: clamp(0.6396rem, calc(0.5902rem + 0.2109vw), 0.78rem);
        color: var(--color-muted);
    }

        .cart-mobile-bar__total strong {
            font-size: clamp(1rem, calc(0.92rem + 0.32vw), 1.2rem);
            color: #000;
        }

    .cart-mobile-bar__cta {
        flex: 0 0 auto;
        width: auto;
        padding-inline: 1.5rem;
    }

    /* Hidden to match titto.co.kr, which has no bottom nav at any breakpoint.
       Revert to `display: flex;` to bring it back. */
    .storefront-bottom-nav {
        display: none;
    }

    .storefront-utility__row {
        flex-wrap: wrap;
    }

    .storefront-utility__greeting {
        display: none;
    }

    .pd-sticky-cta {
        display: none;
    }

    .pd-info__actions {
        position: fixed;
        inset-inline: 0;
        bottom: calc(56px + env(safe-area-inset-bottom));
        z-index: 90;
        margin: 0;
        padding: 0.6rem 1rem;
        border-top: 1px solid #ebebeb;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
    }

    .storefront-search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .promo-card img {
        width: 84px;
        height: 84px;
    }

    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .review-grid-container .review-card-modern {
        flex: 0 0 40%;
    }

    .shorts-rail__item {
        flex: 0 0 60%;
    }


    /* Hero re-bleed (storefront-main padding = 2.5rem at this width) */
    .home-hero {
        margin-inline: -2.5rem;
        width: calc(100% + 5rem);
        margin-block-start: -0.8rem;
        border-radius: 0;
    }

    .home-hero__image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        border-radius: 0;
    }

    /* Left side collapses to hamburger + search only */
    .sf-utility__left {
        display: flex;
    }

        .sf-utility__left > *:not(.sf-hamburger-btn):not(.sf-search-icon-mobile) {
            display: none;
        }
}

@media (max-width: 560px) {

    .sf-lang-switcher {
        border: none !important;
        border-radius: 4px !important;
        background-color: transparent !important;
    }


    .sf-footer__logo {
        font-size: clamp(2.255rem, calc(2.0807rem + 0.7437vw), 2.75rem);
    }

    .sf-footer__links {
        gap: 0.75rem 1rem;
    }

    .acct-greeting {
        flex-wrap: wrap;
    }

    .acct-greeting__logout {
        width: 100%;
    }

        .acct-greeting__logout .pd-btn-outline {
            width: 100%;
        }

    .sf-announce {
        font-size: 12.5px;
        padding: 0.4rem 0.6rem;
    }

    .sf-utility__left {
        gap: 0.5rem;
    }

    .sf-utility__sep {
        display: none;
    }

    .sf-utility__link {
        font-size: clamp(0.5576rem, calc(0.5145rem + 0.1839vw), 0.68rem);
    }

    .sf-join-badge {
        display: none;
    }

    .sf-logo__text {
        font-size: clamp(1.35rem, calc(1.25rem + 0.45vw), 1.65rem);
    }

    .sf-logo__img {
        height: 28px;
    }

    .sf-utility__right {
        gap: 0.25rem;
    }

    .sf-icon-btn {
        width: 32px;
        height: 32px;
        color: rgba(0,0,0,0.87);
    }

    .sf-nav__inner {
        gap: 1.1rem;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .home-trust-bar {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .lookbook-card {
        flex: 0 0 100% !important;
        scroll-snap-align: center;
    }
    .titto-auth-page {
        padding: 1.5rem 1rem;
    }

    .swal2-popup {
        width: 92vw !important;
        padding: 1.1rem .9rem 1.3rem !important;
        box-sizing: border-box;
    }

    .swal2-actions {
        flex-wrap: wrap;
        gap: .5rem;
        width: 100%;
    }

        .swal2-actions button {
            margin-inline: 0 !important;
        }

    .swal2-html-container {
        margin: 0 0 .5rem !important;
    }

    .tc-auth-shell {
        padding: 1.5rem 1rem;
    }

    .tc-auth-logo {
        margin-bottom: 1.25rem;
    }



    .ck-fulfillment {
        flex-direction: column;
    }

    .ck-payment-options {
        flex-direction: column;
    }

    .ck-summary {
        padding: 1rem;
    }

    .ck-form {
        padding: 1rem 1rem 0.25rem;
    }

    .cart-summary {
        padding: 1rem;
    }

    .cart-line {
        padding: 0.75rem;
        gap: 0.75rem;
        border-radius: 12px;
        align-items: flex-start;
    }

    .cart-line__thumb {
        width: 60px;
        height: 60px;
        border-radius: 8px;
    }

    .cart-line__body {
        gap: 0.5rem;
        padding-inline-end: 1.6rem;
    }

    .cart-line__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cart-line__delivery {
        white-space: nowrap;
    }

    .cart-line__footer {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .pd-info-modal__content {
        width: calc(100% - 20px);
        padding: 20px 16px;
    }

    .modal {
        padding: 1.25rem;
    }

    .titto-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .titto-review-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .titto-social-tile {
        flex: 0 0 70%;
    }

    .titto-hero {
        aspect-ratio: 3 / 4;
    }

    .category-page__filters {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.75rem;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .category-page__filters::-webkit-scrollbar {
            display: none;
        }

    .category-page__filter {
        flex: 0 0 auto;
        padding: 0.3rem 0.8rem;
        white-space: nowrap;
    }

    /* Keep "Total N Items" and the sort trigger on one row (left/right) even
       on narrow phones - flex-direction:column here used to stack them, which
       read as the toolbar shaking/jumping up-and-down between the two rows. */
    .category-page__toolbar {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }

 
    .category-page__filters > * {
        width: 100%;
        min-width: 0;
    }

    .ck-steps {
        padding: 0.85rem 0.5rem;
    }

    .ck-step {
        font-size: 0;
        gap: 0.5rem;
    }

        .ck-step span:not(.ck-step__num) {
            display: none;
        }

    .ck-step--active {
        font-size: clamp(0.656rem, calc(0.6053rem + 0.2163vw), 0.8rem);
    }

        .ck-step--active span:not(.ck-step__num) {
            display: inline;
        }

    .ck-step__sep {
        width: 1.5rem;
        margin-inline: 0.35rem;
    }

    .catalog-grid {
        grid-template-columns: 1fr;
    }

    .admin-header {
        padding: 0 14px;
        height: 64px;
    }

    .admin-header-right {
        gap: 8px;
    }

    .admin-user-name {
        display: none;
    }

    .admin-user {
        padding: 0 8px 0 4px;
    }

    .admin-logout {
        padding-inline: 10px;
        font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    }

    .admin-content {
        padding: 14px;
    }

    .rv-item__thumb {
        width: 60px;
        height: 60px;
    }

    .rv-item__actions {
        flex-wrap: wrap;
    }

    .home-best-rail {
        gap: 0.75rem 0.5rem;
    }

    .home-best-card__rank {
        min-width: 1.5rem;
        height: 1.5rem;
        font-size: clamp(0.615rem, calc(0.5675rem + 0.2028vw), 0.75rem);
    }

    .inf-card__header {
        padding: 15px 16px 12px;
    }

    .inf-card__body {
        padding: 4px 16px 16px;
    }

    .inf-card__footer {
        padding: 10px 16px;
    }

    .inf-meta-grid {
        grid-template-columns: 1fr;
    }

    .inf-card__actions {
        flex-wrap: wrap;
    }

    .home-section__head--center h2 {
        font-size: 1.1rem;
    }

    .category-page__title {
        font-size: 1.1rem;
        text-transform: uppercase;
    }

    .pd-title {
        font-size: 0.88rem;
    }

    .pd-price {
        font-size: 0.98rem;
    }

    .product-card__title {
        font-size: 1rem;
        font-weight: 500;
    }
    /* storefront-main padding = 0.4rem at this width (see line ~16068) */
    .home-hero {
        margin-inline: -0.4rem;
        width: calc(100% + 0.8rem);
    }

    .product-rail__item {
        min-width: 150px;
    }
    /* Hide any remaining left-side link */
    .sf-utility__left .sf-utility__link:last-child {
        display: none;
    }
}

@media (max-width: 360px) {
    .storefront-main {
        padding-inline: 0.2rem 0.4rem;
    }

    .pd-tabs-bar {
        width: calc(100% + 1rem);
        margin-inline: -0.5rem;
    }
    .category-page__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .product-rail__item {
        flex-basis: 44%;
        min-width: 145px !important;
    }
}

@media (max-width: 320px) {
    .category-page__grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 0.75rem;
    }


    .sf-cart-count {
        width: 13px;
        height: 13px;
        background-color: var(--color-danger);
    }

    .sf-footer__logo {
        font-size: clamp(9rem, calc(1.7024rem + 0.6085vw), 2.25rem);
        color: #4b4747;
        font-style: italic;
        font-weight: 400;
    }

    .titto-section {
        padding: 1.5rem 0.75rem;
    }

    .titto-product-grid,
    .titto-review-grid {
        gap: 0.4rem;
    }

    .home-hero {
        margin-inline: -0.5rem;
        width: calc(100% + 1rem);
    }

    .sf-utility__left {
        gap: 0.35rem;
    }

    .sf-utility__link {
        font-size: clamp(0.5084rem, calc(0.4691rem + 0.1677vw), 0.62rem);
    }
}

/* ── Home "PRODUCT" section ───────────────────────────────────────────────
   Matches titto.co.kr: a left rail with the heading and two square arrow
   buttons, then a card slider that bleeds off the end edge of the viewport.
   Cards are 340px with a 24px gap (Swiper reads the gap from the rail's
   data-swiper-space-between attribute). Scoped to .home-section--products so
   other rails are untouched. */
.home-section--products {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: center;
    column-gap: 0;
    margin-block: 0 3rem;
    /* Pull the section out to the viewport edge on the end side so the rail can
       bleed like the reference (.storefront-main pads 2.5rem). On wide screens
       indent the heading as if it sat in a centred 1500px container. */
    margin-inline-end: -2.5rem;
    padding-block: 2.5rem 0;
    padding-inline: max(0px, calc((100vw - 1500px) / 2 - 2.5rem)) 0;
    overflow-x: clip;
}

.home-section--products .home-section__sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: center;
    padding: 0;
}

    .home-section--products .home-section__sidebar h2 {
        font-size: 1.875rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        line-height: 1.2;
        color: #111;
        margin: 0 0 1.75rem;
    }

.home-section--products .home-section__controls {
    display: flex;
    gap: 0;
}

.home-section--products .home-rail-arrow {
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 0;
    color: #222;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

    .home-section--products .home-rail-arrow + .home-rail-arrow {
        margin-inline-start: -1px;
    }

    .home-section--products .home-rail-arrow:hover {
        background: #fff;
        border-color: #111;
        z-index: 1;
    }

    .home-section--products .home-rail-arrow svg {
        display: block;
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

[dir="rtl"] .home-section--products .home-rail-arrow svg {
    transform: scaleX(-1);
}

.home-section--products .home-section__content {
    min-width: 0;
    overflow: visible;
    padding-block-end: 3.5rem;
    border-bottom: 1px solid #e3e3e3;
    /* Keep the hairline inside the page while the rail bleeds past it. */
    margin-inline-end: 2.5rem;
}

/* Let slides run past the content box on the end side only; clip-path stops
   slides that have scrolled out on the start side from covering the heading. */
.home-section--products .product-rail.swiper {
    overflow: visible;
    padding: 0;
    clip-path: inset(0 -100vw 0 0);
}

[dir="rtl"] .home-section--products .product-rail.swiper {
    clip-path: inset(0 0 0 -100vw);
}

.home-section--products .product-rail__item.swiper-slide {
    width: 340px;
}

.home-section--products .product-card__image {
    background: #f6f6f6;
    border-radius: 0;
}

.home-section--products .product-card__badge {
    display: none;
}

.home-section--products .product-card__body {
    /* titto rail card: 10px under the image + 5px info + 5px name padding, text inset 8px,
       10px under the price. */
    padding: 20px 8px 10px;
}

/* Title -> description is 7px and description -> price block 10px, as on titto. The 10px sits
   under the title and the description pulls back 3px, so a row with no descriptions still gets
   titto's 10px title -> price gap. */
.home-section--products .product-card__title {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    line-height: 22.4px;
    margin: 0 0 10px;
}

.home-section--products .product-card__description {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 19.6px;
    margin: -3px 0 10px;
}

.home-section--products .product-card__compare-row {
    /* row font = the compare price's own, so the row is exactly one 15.6px line */
    font: 12px/15.6px var(--font-price);
}

.home-section--products .product-card__compare {
    font-size: 12px;
    color: #aaa;
}

.home-section--products .product-card__prices {
    font-size: 19px;
    font-weight: 700;
    color: #111;
    gap: 5px;
    margin: 0;
    line-height: 24.7px;
}

.home-section--products .product-card__discount {
    font-size: 19px;
}

@media (max-width: 1200px) {
    .home-section--products {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .home-section--products .product-rail__item.swiper-slide {
        width: 300px;
    }
}

@media (max-width: 900px) {
    .home-section--products {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-inline-end: 0;
        padding-inline: 0;
        padding-block: 2rem 0;
        overflow-x: visible;
    }

    .home-section--products .home-section__sidebar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: start;
        width: 100%;
        margin-block-end: 1.25rem;
    }

        .home-section--products .home-section__sidebar h2 {
            font-size: 1.5rem;
            margin: 0;
        }

    .home-section--products .home-section__content {
        margin-inline-end: 0;
        padding-block-end: 2.5rem;
    }

    .home-section--products .product-rail.swiper {
        overflow: hidden;
        clip-path: none;
    }

    .home-section--products .product-rail__item.swiper-slide {
        width: 260px;
    }
}

@media (max-width: 560px) {
    .home-section--products .product-rail__item.swiper-slide {
        width: min(260px, 66vw);
    }

    .home-section--products .home-section__sidebar h2 {
        font-size: 1.35rem;
    }
}

/* ── Influencer landing page (/influencers/apply) ─────────────────────────
   Modelled on the "Influtics" template: slim nav, a gradient banner with the
   creator photo and floating badges, a platform strip, service cards, an
   intro with stats, and the application form as a "let's work together"
   section. titto's pink runs into the template's gold in the gradients. */
.ip {
    --ip-pink: var(--color-primary, #ff4a83);
    --ip-pink-dark: var(--color-primary-dark, #c42b62);
    --ip-gold: #ffa945;
    --ip-ink: #1a1a1a;
    --ip-body: #555;
    --ip-muted: #8a8a8a;
    --ip-tint: #fff1f1;
    --ip-radius: 20px;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ip-body);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.ip-container {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.ip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 50px;
    padding: 0 1.9rem;
    border-radius: 999px;
    border: 2px solid transparent;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

    .ip-btn:hover {
        transform: translateY(-2px);
        text-decoration: none;
    }

.ip-btn--solid,
.ip-btn--solid:hover {
    background: linear-gradient(90deg, var(--ip-pink), var(--ip-gold));
    color: #fff;
}

.ip-btn--white,
.ip-btn--white:hover {
    background: #fff;
    color: var(--ip-pink-dark);
}

.ip-btn--ghost {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

    .ip-btn--ghost:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

.ip-btn--sm {
    height: 42px;
    padding: 0 1.4rem;
    font-size: 0.875rem;
}

/* Nav */
.ip-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.ip-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.ip-nav__logo img {
    display: block;
    height: 26px;
    width: auto;
}

.ip-nav__links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

    .ip-nav__links a:not(.ip-btn) {
        color: var(--ip-ink);
        font-weight: 500;
        text-decoration: none;
    }

/* Banner */
.ip-banner {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(105deg, var(--ip-pink-dark) 0%, var(--ip-pink) 45%, var(--ip-gold) 100%);
}

    .ip-banner::before,
    .ip-banner::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        pointer-events: none;
    }

    .ip-banner::before {
        width: 520px;
        height: 520px;
        top: -220px;
        inset-inline-end: -120px;
    }

    .ip-banner::after {
        width: 320px;
        height: 320px;
        bottom: -160px;
        inset-inline-start: 30%;
        background: rgba(255, 255, 255, 0.08);
    }

.ip-banner__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 3rem;
    padding-block: 5rem 4rem;
}

.ip-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

    .ip-eyebrow::before {
        content: "";
        width: 28px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
    }

.ip-banner__title {
    margin: 0 0 1.25rem;
    font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #fff;
}

    .ip-banner__title strong {
        display: block;
        font-weight: 800;
    }

.ip-banner__tagline {
    margin: 0 0 2rem;
    max-width: 34rem;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
}

.ip-banner__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.ip-banner__media {
    position: relative;
    display: flex;
    justify-content: center;
}

.ip-banner__img {
    width: min(100%, 440px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 10px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}

    .ip-banner__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ip-banner__float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1.1rem;
    border-radius: 16px;
    background: #fff;
    color: var(--ip-ink);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
    font-size: 0.9rem;
}

    .ip-banner__float strong {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--ip-ink);
    }

.ip-banner__float--a {
    top: 8%;
    inset-inline-start: 0;
}

.ip-banner__float--b {
    bottom: 8%;
    inset-inline-end: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

.ip-banner__float-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ip-tint);
    color: var(--ip-pink);
    display: grid;
    place-items: center;
}

.ip-banner__float-icon svg,
.ip-platform__icon svg,
.ip-service__icon svg,
.ip-intro__list svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Platforms */
.ip-platforms {
    padding-block: 3rem 1rem;
}

.ip-platforms__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.ip-platform {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: var(--ip-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.ip-platform__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}

.ip-platform__icon--ig { background: linear-gradient(45deg, #f9a03f, #e1306c, #833ab4); }
.ip-platform__icon--yt { background: #ff0000; }
.ip-platform__icon--tt { background: #111; }
.ip-platform__icon--fb { background: #1877f2; }

.ip-platform strong {
    display: block;
    font-size: 1.05rem;
    color: var(--ip-ink);
}

.ip-platform div > span {
    font-size: 0.875rem;
    color: var(--ip-muted);
}

/* Section heads */
.ip-section-head {
    max-width: 40rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.ip-section-head h2,
.ip-intro__txt h2,
.ip-contact__txt h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ip-ink);
}

.ip-section-head p {
    margin: 0;
    font-size: 1.05rem;
    color: var(--ip-muted);
}

/* Services */
.ip-services {
    padding-block: 4rem;
}

.ip-services__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.ip-service {
    padding: 2rem 1.6rem;
    border-radius: var(--ip-radius);
    background: var(--ip-tint);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .ip-service:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(255, 74, 131, 0.12);
    }

.ip-service__icon {
    width: 58px;
    height: 58px;
    margin-bottom: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ip-pink), var(--ip-gold));
    color: #fff;
    display: grid;
    place-items: center;
}

.ip-service h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ip-ink);
}

.ip-service p {
    margin: 0;
    font-size: 0.95rem;
}

/* Intro */
.ip-intro {
    padding-block: 2rem 5rem;
}

.ip-intro__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4rem;
    align-items: center;
}

.ip-intro__media {
    position: relative;
}

    .ip-intro__media::before {
        content: "";
        position: absolute;
        inset: 1.5rem -1.5rem -1.5rem 1.5rem;
        border-radius: 32px;
        background: linear-gradient(135deg, var(--ip-pink), var(--ip-gold));
        opacity: 0.18;
    }

    .ip-intro__media img {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        border-radius: 32px;
        display: block;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    }

.ip-intro__txt > p {
    margin: 0 0 1.5rem;
    font-size: 1.05rem;
}

.ip-intro__list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1.5rem;
}

    .ip-intro__list li {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font-weight: 500;
        color: var(--ip-ink);
    }

        .ip-intro__list li span {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--ip-tint);
            color: var(--ip-pink);
            display: grid;
            place-items: center;
            flex-shrink: 0;
        }

    .ip-intro__list svg {
        width: 16px;
        height: 16px;
    }

.ip-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: 0 0 2rem;
    padding: 1.5rem 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.ip-stat strong {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(90deg, var(--ip-pink), var(--ip-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ip-stat span {
    font-size: 0.875rem;
    color: var(--ip-muted);
}

/* Contact / application form */
.ip-contact {
    padding-block: 5rem;
    background: var(--ip-tint);
    scroll-margin-top: 80px; /* sticky nav */
}

/* The intro column is much shorter than the form, so keep it pinned beside
   the form while the visitor scrolls through the fields. */
.ip-contact__txt {
    position: sticky;
    top: 96px;
}

.ip-eyebrow--dark {
    color: var(--ip-pink);
}

.ip-steps {
    list-style: none;
    margin: 1.75rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ip-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.ip-step__num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ip-pink), var(--ip-gold));
    color: #fff;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.ip-step strong {
    display: block;
    font-size: 1rem;
    color: var(--ip-ink);
}

.ip-step div > span {
    font-size: 0.9rem;
    color: var(--ip-muted);
}

.ip-contact__highlight {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 74, 131, 0.18);
    background: linear-gradient(135deg, rgba(255, 74, 131, 0.12), rgba(255, 169, 69, 0.12));
}

.ip-contact__highlight-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--ip-pink);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .ip-contact__highlight-icon svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.ip-contact__highlight strong {
    display: block;
    color: var(--ip-ink);
}

.ip-contact__highlight div > span {
    font-size: 0.875rem;
    color: var(--ip-muted);
}

.ip-contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 3.5rem;
    align-items: start;
}

.ip-contact__txt p {
    font-size: 1.05rem;
}

.ip-contact__note {
    font-size: 0.875rem;
    color: var(--ip-muted);
}

    .ip-contact__note a {
        color: var(--ip-pink);
    }

.ip-contact__card {
    padding: 2.5rem;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.07);
}

.ip .inf-form-head h2 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ip-ink);
}

.ip .inf-form-head p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ip-muted);
}

.ip .inf-accent-bar {
    width: 44px;
    height: 3px;
    background: linear-gradient(90deg, var(--ip-pink), var(--ip-gold));
}

.ip .inf-form-row {
    gap: 1rem;
    margin-bottom: 1rem;
}

.ip .inf-field {
    gap: 0.4rem;
}

    .ip .inf-field label {
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        color: #777;
    }

        .ip .inf-field label span:not(.inf-optional) {
            color: var(--ip-pink);
        }

.ip .inf-input {
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #fafafa;
    padding: 13px 15px;
    font-family: inherit;
    font-size: 0.95rem;
}

    .ip .inf-input:focus {
        border-color: var(--ip-pink);
        box-shadow: 0 0 0 4px rgba(255, 74, 131, 0.12);
        background: #fff;
    }

.ip .inf-select {
    background-color: #fafafa;
}

.ip .inf-submit-btn,
.ip .inf-submit-btn:hover {
    width: auto;
    margin-top: 0.5rem;
    padding: 15px 34px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ip-pink), var(--ip-gold));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease;
}

    .ip .inf-submit-btn:hover {
        transform: translateY(-2px);
    }

.ip .inf-form-note {
    text-align: start;
}

    .ip .inf-form-note a {
        color: var(--ip-pink);
    }

.ip .inf-success {
    padding: 2rem 0;
}

    .ip .inf-success h2 {
        margin: 0;
        font-size: 1.5rem;
        color: var(--ip-ink);
    }

/* Footer */
.ip-footer {
    padding: 2rem 0;
    background: var(--inf-espresso, #1a0e0c);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    text-align: center;
}

    .ip-footer a {
        color: #fff;
    }

@media (max-width: 1000px) {
    .ip-banner__inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding-block: 3.5rem 3rem;
    }

    .ip-eyebrow,
    .ip-banner__btns {
        justify-content: center;
    }

    .ip-banner__tagline {
        margin-inline: auto;
    }

    .ip-banner__img {
        width: min(100%, 320px);
    }

    .ip-platforms__grid,
    .ip-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ip-intro__inner,
    .ip-contact__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .ip-contact__txt {
        position: static;
    }

    .ip-intro__media {
        max-width: 420px;
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .ip-platforms__grid,
    .ip-services__grid,
    .ip-intro__list {
        grid-template-columns: 1fr;
    }

    .ip-contact__card {
        padding: 1.5rem;
    }

    .ip .inf-form-row {
        grid-template-columns: 1fr;
    }

    .ip-nav__links a:not(.ip-btn) {
        display: none;
    }

    .ip-banner__media {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .ip-banner__float {
        position: static;
    }
}

/* ── Member registration (/account/register) ─────────────────────────────
   Modelled on titto.co.kr's join page: breadcrumb, centred title, a
   label/field table for the basic information, an agreements box with an
   "agree to all" toggle, and the Sign Up / Cancel buttons. */
.reg-page {
    max-width: 1200px;
    margin-inline: auto;
    padding: 1.75rem 0 4rem;
    color: #333;
}

.reg-breadcrumb {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.75rem;
    font-size: 0.875rem;
}

    .reg-breadcrumb a {
        color: #888;
        text-decoration: none;
    }

    .reg-breadcrumb__sep {
        display: inline-flex;
        color: #bbb;
    }

        .reg-breadcrumb__sep svg {
            width: 10px;
            height: 10px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .reg-breadcrumb__current {
        color: #222;
        font-weight: 500;
    }

[dir="rtl"] .reg-breadcrumb__sep svg {
    transform: scaleX(-1);
}

.reg-title {
    margin: 0 0 2.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: #222;
}

.reg-error {
    margin: 0 0 1.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid #f3c2cf;
    background: #fff4f7;
    color: #b02a37;
    font-size: 0.875rem;
}

.reg-section {
    margin: 0 0 2.5rem;
}

.reg-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0 0.7rem;
    border-bottom: 2px solid #222;
}

    .reg-section__head h2 {
        margin: 0;
        font-size: 1.0625rem;
        font-weight: 700;
        color: #222;
    }

.reg-required-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: #777;
}

.reg-req {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary, #ff4a83);
    vertical-align: middle;
    margin-inline-start: 2px;
}

.reg-table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #e5e5e5;
}

    .reg-table th {
        width: 180px;
        padding: 1rem 1.1rem;
        background: #fafafa;
        border-bottom: 1px solid #ebebeb;
        text-align: start;
        vertical-align: top;
        font-size: 0.875rem;
        font-weight: 600;
        color: #333;
    }

    .reg-table td {
        padding: 0.8rem 1.1rem;
        border-bottom: 1px solid #ebebeb;
        font-size: 0.875rem;
        color: #555;
    }

.reg-input {
    display: block;
    width: 100%;
    max-width: 440px;
    height: 42px;
    padding: 0 0.8rem;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background: #fff;
    font: inherit;
    font-size: 0.9375rem;
    color: #222;
    transition: border-color 0.15s ease;
}

    .reg-input:focus {
        outline: none;
        border-color: #222;
    }

    .reg-input::placeholder {
        color: #b5b5b5;
    }

.reg-help {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.8125rem;
    color: #888;
}

.reg-rules {
    margin: 0.55rem 0 0;
    padding-inline-start: 1rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #888;
}

.reg-agree {
    border: 1px solid #e0e0e0;
}

.reg-agree__all {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #222;
    cursor: pointer;
}

.reg-agree__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
}

    .reg-agree__item:last-child {
        border-bottom: 0;
    }

.reg-agree__text {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.reg-agree input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-brown, #48432e);
    flex-shrink: 0;
}

.reg-agree__tag {
    font-style: normal;
    font-weight: 600;
    color: var(--color-primary, #ff4a83);
    margin-inline-end: 0.35rem;
}

.reg-agree__link {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: #888;
    text-decoration: underline;
}

.reg-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 2.5rem;
}

.reg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 3rem;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 2px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease;
}

.reg-btn--primary,
.reg-btn--primary:hover {
    background: var(--color-brown, #48432e);
    border-color: var(--color-brown, #48432e);
    color: #fff;
}

    .reg-btn--primary:hover {
        filter: brightness(1.1);
    }

.reg-btn--secondary,
.reg-btn--secondary:hover {
    background: #fff;
    border-color: #cfcfcf;
    color: #333;
    text-decoration: none;
}

    .reg-btn--secondary:hover {
        background: #f7f7f7;
    }

.reg-login {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: #777;
}

    .reg-login a {
        color: #222;
        font-weight: 600;
        text-decoration: underline;
    }

@media (max-width: 768px) {
    .reg-page {
        padding: 1rem 0.5rem 3rem;
    }

    .reg-title {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .reg-table,
    .reg-table tbody,
    .reg-table tr,
    .reg-table th,
    .reg-table td {
        display: block;
        width: 100%;
    }

    .reg-table th {
        padding: 0.7rem 0.9rem;
        border-bottom: 0;
    }

    .reg-table td {
        padding: 0.8rem 0.9rem 1rem;
    }

    .reg-input {
        max-width: none;
    }

    .reg-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .reg-btn {
        width: 100%;
    }
}

/* ── Category page (/categories/{slug}) ──────────────────────────────────
   Modelled on titto.co.kr's category list: uppercase centred title, text
   tabs for the sub-categories, "- Total N Items" with a sort toggle that
   opens a list, a three-column grid of cards (16px bold name, 14px summary,
   struck compare price, 18px bold price) and numbered paging. */
/* 1440px content column, centred, like the reference's mall_width. */
.category-page.storefront-main {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 0;
}

.category-page .category-page__breadcrumb {
    justify-content: flex-end;
    gap: 0.45rem;
    margin: 1rem 0 1.75rem;
    padding: 0 1rem;
}

    .category-page .category-page__breadcrumb a,
    .category-page .category-page__breadcrumb span {
        font-size: 0.75rem;
        color: #666;
    }

/* Title keeps the category's own casing, like the reference. */
.category-page .category-page__title {
    margin: 0 0 1.75rem;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: #333;
}

/* Sub-categories: bordered cards with a small bullet, inside a bordered box. */
.category-page .cp-cat-pill-row {
    justify-content: flex-start;
    gap: 1rem;
    margin: 0 0 0.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e5e5;
    background: transparent;
}

.category-page .cp-cat-pill {
    flex: 0 0 290px;
    max-width: 100%;
    height: 38px;
    padding: 0 1rem;
    gap: 0.55rem;
    border: 1px solid #dcdcdc;
    border-radius: 0;
    background: #fff;
    color: #333;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

    .category-page .cp-cat-pill::before {
        content: "";
        width: 3px;
        height: 3px;
        background: #aaa;
        flex-shrink: 0;
    }

    .category-page .cp-cat-pill:hover {
        border-color: #999;
        color: #111;
    }

    /* Active tab: solid olive-brown block with white text. */
    .category-page .cp-cat-pill--active,
    .category-page .cp-cat-pill--active:hover {
        background: #4a4232;
        border-color: #4a4232;
        color: #fff;
        font-weight: 500;
    }

        .category-page .cp-cat-pill--active::before {
            background: rgba(255, 255, 255, 0.6);
        }

/* Toolbar */
.category-page .category-page__toolbar {
    padding: 0.9rem 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #e5e5e5;
    font-size: 0.875rem;
    color: #555;
}

    .category-page .category-page__count strong {
        font-family: inherit;
        color: #111;
    }

.category-page .category-page__select {
    display: none;
}

.category-page .category-page__sort {
    position: relative;
}

.category-page .cp-sort-trigger {
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #333;
    font-size: 0.875rem;
    font-weight: 500;
}

.category-page .cp-sort-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: transparent;
}

.category-page .cp-sort-sheet {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 0.4rem 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.category-page .cp-sort-sheet__option {
    padding: 0.6rem 1.1rem;
    margin: 0;
    border: 0;
    background: none;
    color: #555;
    font: inherit;
    font-size: 0.875rem;
    text-align: start;
    cursor: pointer;
}

    .category-page .cp-sort-sheet__option:hover {
        background: #f7f7f7;
        color: #111;
    }

.category-page .cp-sort-sheet__option--active,
.category-page .cp-sort-sheet__option--active:hover {
    color: #111;
    font-weight: 700;
}

/* Grid and cards */
.category-page .category-page__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.75rem 1.5rem;
    margin-bottom: 2.5rem;
}

.category-page .product-card__image {
    background: #f6f6f6;
    border-radius: 0;
}

.category-page .product-card__badge {
    display: none;
}

.category-page .product-card__body {
    /* titto list card: 10px under the image + 5px name padding, text inset 5px, 5px under the price. */
    padding: 15px 5px 5px;
}

/* Same 7px / 10px rhythm as the home rail (see .home-section--products .product-card__title). */
.category-page .product-card__title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 22.4px;
    color: #000;
}

.category-page .product-card__description {
    margin: -3px 0 10px;
    font-size: 14px;
    line-height: 19.6px;
    color: #333;
}

.category-page .product-card__compare-row {
    /* row font = the compare price's own, so the row is exactly one 14.56px line */
    font: 11.2px/14.56px var(--font-price);
}

.category-page .product-card__compare {
    font-size: 11.2px;
    color: #aaa;
}

.category-page .product-card__prices {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 23.4px;
    color: #000;
    gap: 5px;
}

.category-page .product-card__discount {
    font-size: 18px;
}

/* Numbered paging with first / previous / next / last arrows */
.category-page .category-page__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 3rem;
}

.category-page .category-page__pagination-item {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.4rem;
    margin: 0;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    background: #fff;
    color: #555;
    font-size: 0.875rem;
}

    .category-page .category-page__pagination-item:hover {
        background: #f7f7f7;
        color: #111;
    }

    .category-page .category-page__pagination-item:disabled {
        opacity: 0.35;
        cursor: default;
        background: #fff;
        color: #555;
    }

.category-page .category-page__pagination-item--active,
.category-page .category-page__pagination-item--active:hover {
    background: #111;
    border-color: #111;
    color: #fff;
}

.category-page .category-page__pagination-item--nav {
    font-size: 1rem;
}

/* "more view 1 / 2": borderless light-grey pill, centred under the grid. */
.category-page .category-page__more {
    margin: 1.5rem 0 6rem;
}

.category-page .category-page__more-btn {
    min-width: 0;
    height: 2.25rem;
    padding: 0 1.4rem;
    gap: 0.9rem;
    border: 0;
    border-radius: 999px;
    background: #efefef;
    color: #777;
    font-size: 0.75rem;
    letter-spacing: 0;
}

    .category-page .category-page__more-btn:hover {
        background: #e4e4e4;
        color: #333;
    }

.category-page .category-page__more-count {
    color: #555;
}

@media (max-width: 1200px) {
    .category-page .category-page__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .category-page .cp-cat-pill {
        flex-basis: 220px;
    }
}

@media (max-width: 900px) {
    .category-page .category-page__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1rem;
    }

    .category-page .cp-cat-pill-row {
        gap: 0.6rem;
        padding: 0.6rem;
    }

    .category-page .cp-cat-pill {
        flex: 1 1 calc(50% - 0.3rem);
        height: 40px;
        padding: 0 0.85rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 560px) {
    .category-page .category-page__breadcrumb {
        margin: 0.75rem 0 1.25rem;
    }

    .category-page .category-page__title {
        font-size: 1.2rem;
        margin-bottom: 1.25rem;
    }

    .category-page .product-card__title {
        font-size: 0.9375rem;
    }

    .category-page .product-card__prices,
    .category-page .product-card__discount {
        font-size: 1rem;
    }
}

/* ── Header search panel ─────────────────────────────────────────────────
   Opens as a white panel directly under the fixed header (it lives inside
   #sfHeader so it follows the header's height and hide-on-scroll transform):
   centred "Product Search" title, a pill input with the magnifier inside,
   and a close button in the panel's top-end corner. */
.sf-search-panel {
    display: none;
    position: absolute;
    /* Sits between the nav row (1) and the utility row (3) so the paint order
       of the two header rows is unchanged apart from the account dropdown fix. */
    z-index: 2;
    top: 100%;
    inset-inline: 0;
    padding: 2.5rem 1.5rem 2.75rem;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.07);
}

.sf-search-panel--open {
    display: block;
}

.sf-search-panel__inner {
    max-width: 940px;
    margin-inline: auto;
}

.sf-search-panel__title {
    margin: 0 0 1.1rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
}

.sf-search-panel .sf-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

    .sf-search-panel .sf-search-bar input {
        flex: 1;
        height: 46px;
        padding: 0 3.25rem 0 1.5rem;
        border: 1px solid #d9d9d9;
        border-radius: 999px;
        background: #fff;
        font: inherit;
        font-size: 0.9375rem;
        color: #222;
        outline: none;
    }

        .sf-search-panel .sf-search-bar input:focus {
            border-color: #222;
        }

        .sf-search-panel .sf-search-bar input::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }

[dir="rtl"] .sf-search-panel .sf-search-bar input {
    padding: 0 1.5rem 0 3.25rem;
}

.sf-search-panel .sf-search-bar__submit {
    position: absolute;
    top: 50%;
    inset-inline-end: 0.9rem;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #222;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .sf-search-panel .sf-search-bar__submit svg,
    .sf-search-panel__close svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sf-search-panel__close {
    position: absolute;
    top: 1.1rem;
    inset-inline-end: 2.5rem;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #222;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .sf-search-panel__close:hover {
        background: #f3f3f3;
        color: #000;
    }

/* Invisible click-catcher over the page so a click outside closes the panel. */
.sf-search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: transparent;
}

@media (max-width: 768px) {
    .sf-search-panel {
        padding: 1.75rem 1rem 2rem;
    }

    .sf-search-panel__title {
        font-size: 1.1rem;
    }

    .sf-search-panel__close {
        top: 0.6rem;
        inset-inline-end: 0.75rem;
    }
}

/* ── "Select Option" popup (cart button on product cards) ─────────────────
   Modelled on the reference option layer: black title bar, product row,
   option selects, an info note, the selected lines with quantity steppers,
   the total box, and Buy Now / Put in a shopping cart in a gray footer. */
.po-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.45);
}

.po-dialog {
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: min(90vh, 900px);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    text-align: start;
    cursor: default;
}

.po-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 1.1rem;
    background: #111;
    color: #fff;
}

    .po-head h2 {
        margin: 0;
        font-size: 0.9375rem;
        font-weight: 700;
        color: #fff;
    }

.po-close {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .po-close:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    .po-close svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

.po-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.1rem 1.5rem 1.25rem;
}

.po-loading {
    margin: 0;
    padding: 1rem 0;
    text-align: center;
    color: #888;
}

.po-product {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e5e5;
}

.po-product__thumb {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    overflow: hidden;
    background: #f6f6f6;
}

    .po-product__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.po-product__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #222;
}

.po-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.po-row__label {
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #555;
}

.po-row__label--plain {
    text-transform: none;
}

.po-select {
    height: 36px;
    width: 100%;
    padding: 0 0.6rem;
    border: 1px solid #cfcfcf;
    border-radius: 2px;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 0.875rem;
}

.po-select--required {
    border-color: #4a74c9;
}

.po-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.1rem 0 0;
    padding: 0.8rem 1rem;
    background: #f7f7f7;
    font-size: 0.875rem;
    color: #444;
}

.po-note__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1px solid #d33;
    color: #d33;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    display: grid;
    place-items: center;
}

.po-lines {
    list-style: none;
    margin: 0;
    padding: 0 1rem;
    background: #f7f7f7;
}

.po-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid #e5e5e5;
}

.po-line__name {
    font-size: 0.9375rem;
    color: #222;
}

    .po-line__name strong {
        display: block;
        font-weight: 600;
    }

    .po-line__name span {
        font-size: 0.875rem;
        color: #666;
    }

.po-line__qty {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .po-line__qty input {
        width: 40px;
        height: 28px;
        padding: 0;
        border: 1px solid #cfcfcf;
        background: #fff;
        text-align: center;
        font: inherit;
        font-size: 0.875rem;
        -moz-appearance: textfield;
    }

        .po-line__qty input::-webkit-outer-spin-button,
        .po-line__qty input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

.po-line__spin {
    display: flex;
    flex-direction: column;
}

    .po-line__spin button {
        width: 18px;
        height: 14px;
        margin: 0;
        padding: 0;
        border: 1px solid #cfcfcf;
        background: #fff;
        color: #555;
        font-size: 7px;
        line-height: 1;
        display: grid;
        place-items: center;
        cursor: pointer;
    }

        .po-line__spin button + button {
            border-top: 0;
        }

        .po-line__spin button:hover {
            background: #f0f0f0;
            color: #111;
        }

.po-line__remove {
    width: 16px;
    height: 16px;
    margin: 0 0 0 0.35rem;
    padding: 0;
    border: 0;
    background: #bbb;
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .po-line__remove:hover {
        background: #999;
        color: #fff;
    }

.po-line__price {
    min-width: 90px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #222;
    text-align: end;
    white-space: nowrap;
}

.po-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid #e5e5e5;
    font-size: 0.9375rem;
    color: #333;
}

.po-total__value {
    font-size: 1.375rem;
    font-weight: 700;
    color: #111;
}

.po-total__count {
    font-size: 0.8125rem;
}

.po-foot {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.1rem 1.5rem;
    background: #f3f3f3;
    border-top: 1px solid #e5e5e5;
}

.po-btn {
    height: 48px;
    margin: 0;
    padding: 0 1.6rem;
    border: 1px solid transparent;
    border-radius: 0;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
}

.po-btn--buy,
.po-btn--buy:hover {
    background: var(--color-brown, #48432e);
    border-color: var(--color-brown, #48432e);
    color: #fff;
}

.po-btn--cart,
.po-btn--cart:hover {
    background: #fff;
    border-color: #cfcfcf;
    color: #222;
}

.po-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 560px) {
    .po-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .po-line {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .po-line__price {
        grid-column: 1 / -1;
    }

    .po-foot {
        flex-direction: column;
    }

    .po-btn {
        width: 100%;
    }
}

/* Blazor's <FocusOnNavigate> moves focus to each page's h1 after routing, which
   drew the browser's blue focus ring around headings such as "Shopping Cart".
   The heading is not interactive, so hide the ring on that programmatic focus. */
h1[tabindex="-1"]:focus {
    outline: none;
}

/* ── Shopping cart page ───────────────────────────────────────────────────
   Matches titto.co.kr's cart: right-aligned breadcrumb, centred title, two
   pill tabs, a ruled panel (empty state or the item list), the two order
   buttons, then the boxed "User Guide". Scoped to .cart-page. */
.cart-page {
    padding-top: 1.75rem;
    padding-bottom: 4rem;
}

.cart-page__inner {
    max-width: 1440px;
    margin-inline: auto;
}

.cart-page .cart-breadcrumb {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.75rem;
    padding: 0;
    font-size: 0.875rem;
}

    .cart-page .cart-breadcrumb a {
        color: #888;
        font-size: 0.875rem;
        text-decoration: none;
    }

        .cart-page .cart-breadcrumb a:hover {
            color: #555;
            text-decoration: underline;
        }

    .cart-page .cart-breadcrumb__sep {
        display: inline-flex;
        color: #bbb;
    }

        .cart-page .cart-breadcrumb__sep svg {
            width: 10px;
            height: 10px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .cart-page .cart-breadcrumb__current {
        color: #222;
        font-weight: 500;
        font-size: 0.875rem;
    }

[dir="rtl"] .cart-page .cart-breadcrumb__sep svg {
    transform: scaleX(-1);
}

.cart-page .cart-page__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
    text-align: center;
    line-height: 1.3;
    margin: 0 0 2.75rem;
}

.cart-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}

.cart-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    padding: 0 1.4rem;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: #f3f3f3;
    color: #666;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .cart-tab:hover {
        background: #ebebeb;
        color: #444;
    }

    .cart-tab--active,
    .cart-tab--active:hover {
        background: var(--color-brown, #48432e);
        color: #fff;
    }

.cart-panel {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 2rem 0;
}

.cart-page .cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    min-height: 120px;
    margin: 0;
    padding: 1.25rem 0;
    text-align: center;
}

.cart-page .cart-empty__icon {
    display: block;
    margin: 0;
    color: #cfcfcf;
}

    .cart-page .cart-empty__icon svg {
        display: block;
        width: 42px;
        height: 36px;
    }

.cart-page .cart-empty p {
    margin: 0;
    max-width: none;
    font-size: 0.9375rem;
    color: #555;
}

.cart-actions {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 1.25rem 0 4rem;
}

.cart-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 1.4rem;
    margin: 0;
    border: 0;
    border-radius: 2px;
    color: #fff;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.15s ease;
}

    .cart-actions__btn:hover {
        color: #fff;
        filter: brightness(1.08);
    }

.cart-actions__btn--primary,
.cart-actions__btn--primary:hover {
    background: var(--color-brown, #48432e);
}

.cart-actions__btn--secondary,
.cart-actions__btn--secondary:hover {
    background: #8f8f8f;
}

.cart-guide {
    border: 1px solid #ddd;
    background: #fff;
}

.cart-guide__head {
    margin: 0;
    padding: 0.8rem 1.1rem;
    background: #fafafa;
    border-bottom: 1px solid #ddd;
    font-size: 1rem;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
}

.cart-guide__body {
    padding: 1.25rem 1.1rem 1.3rem;
}

.cart-guide__subhead {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
}

.cart-guide__list {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
}

    .cart-guide__list:last-child {
        margin-bottom: 0;
    }

    .cart-guide__list li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin: 0 0 0.35rem;
        font-size: 0.875rem;
        color: #333;
        line-height: 1.55;
    }

        .cart-guide__list li:last-child {
            margin-bottom: 0;
        }

.cart-guide__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-top: 0.3rem;
    border-radius: 2px;
    background: #c9c9c9;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

.cart-guide__text {
    min-width: 0;
}

@media (max-width: 768px) {
    .cart-page {
        padding-top: 1rem;
        padding-bottom: 2.5rem;
    }

    .cart-page .cart-breadcrumb {
        margin-bottom: 1rem;
    }

    .cart-page .cart-page__title {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .cart-tab {
        height: 38px;
        padding: 0 1.1rem;
        font-size: 0.8125rem;
    }

    .cart-actions {
        flex-direction: column;
        align-items: stretch;
        margin: 1rem 0 2.5rem;
    }

    .cart-actions__btn {
        width: 100%;
    }

    .cart-guide__head,
    .cart-guide__body {
        padding-inline: 0.9rem;
    }
}

/* ── Mobile drawer: match the reference's plain chevron ───────────────────
   The accordion toggles are <button>s, so clicking one left the browser's
   default focus ring drawn as a blue box around the chevron. Keep a visible
   ring for keyboard users only. */
.sf-drawer__accordion-row__toggle:focus,
.sf-drawer__sublink-row__toggle:focus,
.sf-drawer__close:focus {
    outline: none;
    box-shadow: none;
}

.sf-drawer__accordion-row__toggle:focus-visible,
.sf-drawer__sublink-row__toggle:focus-visible,
.sf-drawer__close:focus-visible {
    outline: 2px solid #999;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Secondary link list: one per row, matching the stacked reference menu. */
.sf-drawer__section--grid .sf-drawer__link {
    padding-block: 0.95rem;
}

/* ── Mobile drawer: sizes and spacing matched to the reference ─────────────
   Slightly wider off-white panel, smaller wordmark, single-line auth buttons
   that almost touch, and the SHOP ALL row + link list inset 1.75rem from both
   edges (divider included) with larger, regular-weight labels. */
.sf-drawer {
    width: min(320px, 90vw);
    background: #fcfcfa;
}

.sf-drawer .sf-drawer__logo-img {
    height: 23px;
}

.sf-drawer .sf-drawer__auth-row {
    gap: 0.2rem;
    padding: 1.4rem 1.75rem 0;
}

.sf-drawer .sf-drawer__auth-btn {
    padding: 0.6rem 0;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 0;
}

.sf-drawer .sf-drawer__custom-padding {
    padding: 0;
    margin-inline: 1.75rem;
}

.sf-drawer .sf-drawer__accordion {
    margin-top: 1.85rem;
    padding-bottom: 1.75rem;
    border-bottom-color: #e8e8e8;
}

.sf-drawer .sf-drawer__section--grid {
    padding: 1.25rem 0 1rem;
}

.sf-drawer .sf-drawer__accordion-row__label,
.sf-drawer .sf-drawer__section--grid .sf-drawer__link {
    padding: 0.55rem 0.6rem !important;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: #444;
}

.sf-drawer .sf-drawer__accordion-row__toggle,
.sf-drawer .sf-drawer__sublink-row__toggle {
    padding-inline: 0.6rem !important;
}

.sf-drawer .sf-drawer__accordion-row__toggle {
    padding-block: 0.55rem !important;
}

.sf-drawer .sf-drawer__chevron {
    width: 14px;
    height: 14px;
}

/* The section is now inset by its own margin, so the expanded SHOP ALL list
   no longer needs the extra side padding. */
.sf-drawer .sf-drawer__accordion-body {
    padding-inline: 0;
}

/* GOODS is a plain sublink <a>, so the generic ".sf-drawer a" padding beat its
   own; line its text up with the MAKEUP / SKINCARE labels above it. */
.sf-drawer .sf-drawer__accordion-body > a.sf-drawer__sublink {
    padding: 0.65rem 0.6rem 0.65rem 2.25rem;
}

/* Phones have no keyboard focus to show, and the ring otherwise stays drawn
   around the chevron after it is tapped (a grey box the reference doesn't have). */
@media (hover: none) {
    .sf-drawer__accordion-row__toggle:focus-visible,
    .sf-drawer__sublink-row__toggle:focus-visible {
        outline: none;
    }

    /* Touch browsers keep :hover after a tap, leaving the row tinted. */
    .sf-drawer__link:hover {
        background: none;
    }
}

/* ── Footer: match the reference on both breakpoints ──────────────────────
   Desktop keeps three columns with the brand block on the left and the legal
   links separated by pipes. On phones the reference leads with the customer
   centre, then the Account Info / Return-Exchange rows, and drops the wordmark,
   policy links and company details to the bottom, so re-order the flex items
   rather than duplicating markup. */
@media (min-width: 901px) {
    /* Pipe separators. Every link carries a leading hairline and the row is
       pulled start-wards by exactly that width, so the first pipe of each
       wrapped row lands outside the clipped nav and never shows. */
    .sf-footer__legal-links-row {
        gap: 0.35rem 0;
        margin-inline-start: calc(-1px - 2.2rem);
    }

    .sf-footer__legal-links a::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 0.8em;
        margin-inline: 1.1rem;
        background: #c8c8c8;
        vertical-align: -0.05em;
    }

    /* Desktop layout per the reference: light-gray band, near full-width
       content, a wide brand/company column and two narrow info columns. */
    .sf-footer {
        background: #f5f5f5;
        border-top: 0;
        padding: 4.5rem clamp(1.5rem, 3.5vw, 3.5rem) 4rem;
        color: #333;
    }

    .sf-footer__inner {
        display: grid;
        grid-template-columns: minmax(0, 2.45fr) minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 3.8rem;
        align-items: start;
        max-width: 1440px;
    }

    .sf-footer__logo-img {
        width: 300px;
        margin: 2rem 0 2rem;
    }

    .sf-footer__links {
        margin: 0 0 1.75rem;
    }

    .sf-footer__legal-links {
        margin: 0 0 0.9rem;
    }

        .sf-footer__legal-links a {
            font-size: 0.8125rem;
            font-weight: 400;
            color: #333;
        }

    .sf-footer__legal {
        font-size: 0.78rem;
        color: #777;
        line-height: 1.45;
        max-width: 41rem;
    }

        .sf-footer__legal + .sf-footer__legal {
            margin-top: 1rem;
        }

    .sf-footer__legal-item {
        margin-inline-end: 1.875rem;
    }

    /* Wider gutter on desktop; this is what produces the reference's rows:
       Company/Representative/Registration, then Report/Officer, then
       Phone/Address. The flex row itself is declared in the base rules. */
    .sf-footer__legal--fields {
        column-gap: 1.875rem;
    }

    .sf-footer__legal-strong,
    .sf-footer__verify-link {
        color: #333;
    }

    .sf-footer__verify-link--muted {
        color: inherit;
    }

    .sf-footer__copyright {
        font-size: 0.78rem;
        color: #8a8a8a;
        margin-top: 1rem;
    }

    .sf-footer__section-title {
        font-size: 0.8125rem;
        font-weight: 700;
        color: #222;
        margin: 0 0 1rem;
    }

    .sf-footer__phone {
        font-size: 1.125rem;
        font-weight: 600;
        color: #222;
        letter-spacing: 0.04em;
        margin: 0 0 0.5rem;
    }

    .sf-footer__hours,
    .sf-footer__account-info {
        font-size: 0.78rem;
        color: #777;
        line-height: 1.45;
    }

    .sf-footer__hours {
        margin: 0 0 1rem;
    }

    .sf-footer__accordion-head {
        margin: 0 0 1rem;
    }

    .sf-footer__accordion + .sf-footer__accordion {
        margin-top: 1.5rem;
    }

    /* Chat pill: slim, flat bar a shade darker than the band. */
    .sf-footer__pill {
        max-width: 250px;
        min-height: 34px;
        gap: 0.5rem;
        padding: 0.4rem 0.75rem;
        background: #ebebeb;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 500;
    }

        .sf-footer__pill:hover {
            background: #e2e2e2;
        }

    .sf-footer__pill--wide {
        max-width: 300px;
    }

    .sf-footer__pill-icon {
        width: 16px;
        height: 16px;
    }

        .sf-footer__pill-icon img {
            width: 11px;
            height: 11px;
        }

    .sf-footer__pill-arrow {
        color: #bdbdbd;
    }
}

@media (max-width: 900px) {
    .sf-footer {
        padding: 2rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
    }

    .sf-footer__inner {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .sf-footer__brand,
    .sf-footer__center,
    .sf-footer__right {
        flex: 0 0 auto;
        width: 100%;
    }

    .sf-footer__center {
        order: 1;
    }

    .sf-footer__right {
        order: 2;
    }

    /* Wordmark, policy links and company details sit last on phones. */
    .sf-footer__brand {
        order: 3;
        margin-top: 3.5rem;
    }

    .sf-footer__logo-img {
        width: 300px;
        margin-bottom: 2rem;
    }

    .sf-footer__legal-links {
        margin-bottom: 1.25rem;
    }

    .sf-footer__legal-links-row {
        gap: 0.4rem 1.5rem;
    }

    /* Footer: Account Info / Return & Exchange become real collapsible rows -
       heading with a plus on the right, a hairline under the heading, and the
       body below it. Account Info ships open, Return / Exchange closed. */
    .sf-footer__accordion-head {
        pointer-events: auto;
        cursor: pointer;
        margin: 0;
        padding: 0.9rem 0;
        border-bottom: 1px solid #e3e3e3;
    }

    .sf-footer__accordion-toggle {
        display: block;
        position: relative;
        width: 11px;
        height: 11px;
        flex-shrink: 0;
        margin-inline-start: auto;
        color: #222;
    }

        .sf-footer__accordion-toggle::before,
        .sf-footer__accordion-toggle::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            background: currentColor;
            transform: translate(-50%, -50%);
        }

        .sf-footer__accordion-toggle::before {
            width: 11px;
            height: 1.25px;
        }

        .sf-footer__accordion-toggle::after {
            width: 1.25px;
            height: 11px;
        }

    .sf-footer__accordion-body {
        display: none;
        padding: 1.25rem 0 0.75rem;
    }

    .sf-footer__accordion--open > .sf-footer__accordion-body {
        display: block;
    }

    .sf-footer__accordion + .sf-footer__accordion {
        margin-top: 0;
    }
}

/* Bullet notes above the secondary auth button, on both login and sign-up. */
.titto-auth-notes {
    list-style: none;
    margin: 1.75rem 0 0.85rem;
    padding: 0;
    text-align: start;
}

    .titto-auth-notes li {
        position: relative;
        padding-inline-start: 0.9rem;
        margin-block: 0.3rem;
        font-size: 0.9rem;
        line-height: 1.5;
        color: #555;
    }

        .titto-auth-notes li::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            top: 0.62em;
            width: 3px;
            height: 3px;
            background: #999;
        }

.titto-auth-input:focus {
    outline: none;
    border-bottom-color: var(--titto-dark, #2c2418);
}

/* ── Login page: sizes, colours and spacing matched to the reference ──────
   Scoped to the login page (.titto-auth-page--login) so the sign-up and other
   auth pages sharing these classes keep their own look. */
.titto-auth-page--login {
    justify-content: flex-start;
    background: #fcfcfa;
    padding-block: 1.45rem 3rem;
}

.titto-auth-page--login .titto-auth-shell {
    max-width: 400px;
}

.titto-auth-page--login .al-topbar {
    align-items: center;
    margin-bottom: 1.3rem;
}

.titto-auth-page--login .al-icon-btn {
    display: inline-flex;
    margin: 0;
    color: #1b1b1b;
}

    /* Back arrow: larger with a heavier stroke, as in the reference. */
    .titto-auth-page--login .al-topbar button.al-icon-btn svg {
        width: 25px;
        height: 25px;
        stroke-width: 2;
    }

    /* Home: larger, sitting slightly lower and further in than the arrow. */
    .titto-auth-page--login .al-topbar a.al-icon-btn {
        margin-inline-end: 2px;
        transform: translateY(3px);
    }

        .titto-auth-page--login .al-topbar a.al-icon-btn svg {
            width: 27px;
            height: 27px;
        }

.titto-auth-page--login .titto-auth-logo {
    align-self: center;
    line-height: 0;
    margin-block: 1.225rem 2.025rem;
}

    /* Same wordmark artwork as the header; 30px tall ≈ 102px wide, per the reference. */
    .titto-auth-page--login .titto-auth-logo img {
        display: block;
        width: auto;
        height: 30px;
    }

.titto-auth-page--login .titto-auth-title {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #333;
    margin: 0 0 0.85rem;
}

/* The reference wraps the subtitle onto two short centred lines. */
.titto-auth-page--login .titto-auth-subtitle {
    max-width: 9.5rem;
    margin: 0 auto 1.2rem;
    font-size: 0.9rem;
    line-height: 1.17;
    color: #333;
}

/* Messenger sign-in button: same box as the reference's Kakao button,
   keeping WhatsApp's own green. */
.titto-auth-page--login .pd-kakao-btn {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0 1rem;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #000;
}

.titto-auth-page--login .titto-auth-kakao__icon {
    display: inline-flex;
    color: #000;
    line-height: 1;
}

.titto-auth-page--login .titto-auth-divider {
    gap: 0.75rem;
    margin: 2.05rem 0 1.25rem;
    font-size: 0.75rem;
    line-height: 1.2;
    color: #bbb;
}

    .titto-auth-page--login .titto-auth-divider::before,
    .titto-auth-page--login .titto-auth-divider::after {
        background: #e5e5e5;
    }

.titto-auth-page--login .titto-auth-tabs {
    gap: 0;
    padding: 0;
    background: #f4f4f4;
    margin-block-end: 1.25rem;
}

.titto-auth-page--login .titto-auth-tab {
    min-height: 40px;
    margin: 0;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: #555;
}

.titto-auth-page--login .titto-auth-tab--active {
    background: #464646;
    color: #fff;
    font-weight: 500;
}


.titto-auth-page--login .titto-auth-input {
    min-height: 0;
    padding: 0.875rem 0.35rem;
    font-size: 0.875rem;
    margin-block-end: 0.6rem;
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #333;
}

    .titto-auth-page--login .titto-auth-input::placeholder {
        color: #bbb;
    }

    /* No 3px focus ring from the global input rule - just a darker underline. */
    .titto-auth-page--login .titto-auth-input:focus {
        box-shadow: none;
        border-bottom-color: #333;
    }

    /* Keep saved-password autofill from repainting the underline fields as
       filled blue boxes. */
    .titto-auth-page--login .titto-auth-input:-webkit-autofill,
    .titto-auth-page--login .titto-auth-input:-webkit-autofill:hover,
    .titto-auth-page--login .titto-auth-input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #fcfcfa inset;
        -webkit-text-fill-color: #333;
        caret-color: #333;
        transition: background-color 9999s ease-out;
    }

/* Centre the eye icon on the input itself (the wrapper also holds its margin). */
.titto-auth-page--login .titto-auth-field__toggle {
    top: calc(50% - 0.3rem);
}

/* The Remember-me checkbox makes this row taller than the reference's
   text-only one, so pull it up slightly to keep "Secure Connection" in place. */
.titto-auth-page--login .titto-auth-row--secure {
    margin-block: -0.3rem 1.15rem;
    font-size: 0.8rem;
    color: #555;
}

.titto-auth-page--login .titto-auth-submit {
    min-height: 50px;
    margin: 0;
    padding: 0 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    background: #48432e;
}

.titto-auth-page--login .titto-auth-row--links {
    gap: 1rem;
    margin-block: 1.45rem 0;
    font-size: 0.9rem;
    color: #555;
}

    .titto-auth-page--login .titto-auth-row--links a {
        color: #555;
        text-decoration: none;
    }

.titto-auth-page--login .titto-auth-row__sep {
    color: #ddd;
    font-size: 0.75rem;
}

.titto-auth-page--login .titto-auth-notes {
    margin: 1.75rem 0 0.8rem;
}

    .titto-auth-page--login .titto-auth-notes li {
        margin-block: 0;
        padding-inline-start: 0.95rem;
        font-size: 0.85rem;
        line-height: 1.4;
        color: #555;
    }

        .titto-auth-page--login .titto-auth-notes li::before {
            inset-inline-start: 0.3rem;
            background: #555;
        }

.titto-auth-page--login .titto-auth-join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin-block-start: 0;
    padding: 0 1rem;
    background: #f3f3f3;
    color: #333;
    font-size: 1.05rem;
    font-weight: 500;
}

    .titto-auth-page--login .titto-auth-join-btn:hover {
        background: #ebebeb;
    }

/* Product Editor Checkbox Size Fix */
.product-editor__field input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

/* ==========================================================================
   EVENT STOREFRONT MODAL & TICKET PASS POPUP STYLES
   ========================================================================== */

.ev-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: evFadeIn 0.2s ease-out;
}

@keyframes evFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes evSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ev-modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: evSlideUp 0.25s ease-out;
    scrollbar-width: thin;
}

.ev-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #334155;
    font-size: 1.35rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ev-modal-close:hover {
    background: #f1f5f9;
    color: #0f172a;
    transform: scale(1.05);
}

.ev-modal-banner {
    width: 100%;
    height: 200px;
    background: #d7c4be;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f1f5f9;
}

.ev-modal-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ev-modal-header {
    padding: 1.25rem 1.5rem 0.75rem;
}

.ev-card__status {
    font-size: 0.85rem;
    font-weight: 600;
    color: #FF4A83;
}

.ev-modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0.25rem 0 0.5rem;
}

.ev-modal-date {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.ev-modal-body {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ev-modal-section h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.35rem;
}

.ev-modal-section p {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

.ev-modal-terms {
    background: #f8fafc;
    border-left: 3px solid #FF4A83;
    padding: 0.85rem 1rem;
    border-radius: 6px;
}

.ev-ticket-pass {
    border: 2px dashed #FF4A83;
    background: #fff5f8;
    border-radius: 14px;
    padding: 1.25rem;
    margin-top: 0.5rem;
}

.ev-ticket-pass__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #fbcfe8;
    padding-bottom: 0.75rem;
    margin-bottom: 0.85rem;
}

.ev-ticket-pass__title {
    font-weight: 700;
    color: #FF4A83;
    font-size: 1rem;
}

.ev-ticket-pass__ref {
    background: #ffe4e6;
    color: #be123c;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
}

.ev-ticket-pass__body {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

@media (max-width: 520px) {
    .ev-ticket-pass__body {
        flex-direction: column;
    }
}

.ev-ticket-pass__details {
    flex: 1;
    font-size: 0.875rem;
    color: #334155;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ev-ticket-pass__row strong {
    color: #0f172a;
}

.ev-ticket-pass__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    background: #ffffff;
    border: 1px solid #f472b6;
    border-radius: 12px;
    padding: 0.65rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.ev-qr-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.ev-qr-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.ev-booking-form {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
}

.ev-booking-form h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
}

.ev-form-group {
    margin-bottom: 0.85rem;
}

.ev-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #334155;
    margin-bottom: 0.35rem;
}

.ev-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

@media (max-width: 520px) {
    .ev-form-grid {
        grid-template-columns: 1fr;
    }
}

.ev-input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #0f172a;
    background: #ffffff;
    outline: none;
    transition: border-color 0.15s;
}

.ev-input:focus {
    border-color: #FF4A83;
    box-shadow: 0 0 0 3px rgba(255, 74, 131, 0.15);
}

.ev-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: #FF4A83;
    color: #ffffff;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-align: center;
}

.ev-submit-btn:hover {
    background: #e03970;
}

.ev-print-btn {
    background: #FF4A83;
    margin-top: 0.75rem;
}

.ev-booking-alert {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}

.ev-booking-alert--error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.ev-booking-alert--success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

.ev-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.ev-slot-card {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.ev-slot-card:hover {
    border-color: #FF4A83;
}

.ev-slot-card--selected {
    border-color: #FF4A83;
    background: #fff0f5;
    box-shadow: 0 0 0 2px #FF4A83;
}

.ev-slot-date { font-weight: 700; font-size: 0.85rem; color: #0f172a; }
.ev-slot-time { font-size: 0.75rem; color: #475569; }
.ev-slot-cap { font-size: 0.75rem; color: #e03970; font-weight: 600; }

/* ── User Guide (/pages/user-guide) ──────────────────────────────────────
   Mirrors titto.co.kr/shopinfo/guide.html: breadcrumb on the right, centred
   title, then full-width sections - a semibold heading over a hairline and
   15px body copy with blank-line gaps between paragraphs. */
.ug-page {
    padding: 0.6rem 1.4rem 10rem;
    color: #222;
}

.ug-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin: 0.9rem 0 2.6rem;
    font-size: 0.9375rem;
    line-height: 1.4;
}

    .ug-breadcrumb a {
        color: #777;
        text-decoration: none;
    }

        .ug-breadcrumb a:hover {
            color: #444;
        }

    .ug-breadcrumb span {
        color: #222;
    }

.ug-breadcrumb__sep {
    width: 6px;
    height: 10px;
    color: #999;
    flex-shrink: 0;
}

.ug-title {
    margin: 0 0 3.75rem;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: #333;
    text-align: center;
    text-transform: none;
}

.ug-section + .ug-section {
    margin-top: 5rem;
}

.ug-section__title {
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e2e2;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: #222;
    text-transform: none;
}

.ug-section__body {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #222;
}

    .ug-section__body p {
        margin: 0 0 1.5em;
    }

        .ug-section__body p:last-child {
            margin-bottom: 0;
        }

    .ug-section__body strong {
        font-weight: 600;
    }

@media (max-width: 768px) {
    .ug-page {
        padding: 0.4rem 0.8rem 6rem;
    }

    .ug-breadcrumb {
        margin: 0.5rem 0 1.5rem;
        font-size: 0.8125rem;
    }

    .ug-title {
        margin-bottom: 2.25rem;
        font-size: 1.375rem;
    }

    .ug-section + .ug-section {
        margin-top: 3rem;
    }

    .ug-section__title {
        margin-bottom: 1.1rem;
        font-size: 1rem;
    }

    .ug-section__body {
        font-size: 0.875rem;
        line-height: 1.55;
    }
}

/* Google Maps Places Autocomplete Modal Dropdown Column Layout Styling */
.pac-container {
    z-index: 999999 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid #ced4da !important;
    font-family: inherit !important;
    margin-top: 4px !important;
    padding: 4px 0 !important;
}

.pac-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    border-top: 1px solid #f0f0f0 !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
}

.pac-item:first-child {
    border-top: none !important;
}

.pac-item:hover {
    background-color: #fff0f5 !important;
}

.pac-icon {
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

.pac-item-query {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #212529 !important;
    margin-right: 6px !important;
}

.pac-matched {
    font-weight: 700 !important;
    color: #FF4A83 !important;
}

/* Custom Fallback Location Dropdown Styling */
#tc-location-global-dropdown {
    z-index: 999999 !important;
    background: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}



/* ── DESKTOP HEADER: titto.co.kr reference metrics ───────────────────────────
   Values measured from the reference at a 1520px viewport: a 40px utility
   line inside 20px padding (80px row), a 39px category row, 13px utility
   type and 16.9px category type, both groups at 70% opacity over the hero.
   Scoped to desktop so the drawer/mobile header keeps its own rules. */
@media (min-width: 861px) {
    .sf-utility {
        padding: 20px 18px;
    }

    .sf-utility__left {
        gap: 0;
        height: 40px;
    }

    .sf-utility__left > .sf-utility__link,
    .sf-utility__left > .sf-utility-item {
        margin-inline-end: 33.3px;
    }

    .sf-utility__link,
    .sf-utility__greeting {
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 15px;
    }

    .sf-header--transparent .sf-utility__link,
    .sf-header--transparent .sf-utility__greeting,
    .sf-header--transparent .sf-nav__link,
    .sf-header--transparent .sf-icon-btn {
        opacity: 0.7;
    }

    /* 15% OFF: the reference's .joins_point tag - 58x22, centred under JOIN US,
       9px below its text box, tabular digits, bobbing 2px every 1.5s. The bob
       uses `translate` so it stacks on the centring transform. Hoverable like
       the reference, so hovering it lifts JOIN US to full opacity too. */
    .sf-join-badge {
        top: calc(100% + 9px);
        inset-inline-start: 50%;
        transform: translateX(-50%);
        padding: 5px 6px 3px;
        background: rgb(72, 67, 46);
        color: rgba(250, 250, 250, 0.9);
        font-family: Jost, Pretendard, sans-serif;
        font-size: 11px;
        font-weight: 400;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.3px;
        line-height: 14px;
        border-radius: 5px;
        pointer-events: auto;
        animation: sfJoinPointUp 1.5s infinite;
    }

    [dir="rtl"] .sf-join-badge {
        transform: translateX(50%);
    }

    /* Reference fades its header group over .25s ease-in-out. */
    .sf-header--transparent .sf-utility__join {
        transition: opacity 0.25s ease-in-out, color 0.2s ease;
    }

    /* The reference keeps the badge at 70% across its whole home page, white
       header included, and lifts it to 100% on hover. Once our home header
       turns white JOIN US is no longer faded, so the badge fades itself. */
    #sfHeader[data-is-home="true"]:not(.sf-header--transparent) .sf-join-badge {
        opacity: 0.7;
        transition: opacity 0.25s ease-in-out;
    }

    #sfHeader[data-is-home="true"]:not(.sf-header--transparent) .sf-utility__join:hover .sf-join-badge {
        opacity: 1;
    }

        .sf-join-badge::before {
            top: -5px;
            inset-inline-start: 50%;
            border-width: 0 6px 6px;
            border-bottom-color: rgb(72, 67, 46);
            transform: translateX(-50%);
        }

    [dir="rtl"] .sf-join-badge::before {
        transform: translateX(50%);
    }

    @keyframes sfJoinPointUp {
        0%, 100% {
            translate: 0 0;
        }

        50% {
            translate: 0 2px;
        }
    }

    /* Logo: 90x25 box centred on the 40px line. */
    .sf-logo__img,
    .sf-header--transparent .sf-logo__img--white {
        width: 90px;
        height: 25px;
    }

    /* Right icons: 32px hit boxes (22px icon + 5px padding), cart 22px,
       18px apart, cart ending 30px from the viewport edge. */
    .sf-utility__right {
        gap: 18px;
        height: 40px;
        padding-inline-end: 12px;
    }

    .sf-utility__right .sf-icon-btn {
        width: 32px;
        height: 40px;
        padding-inline: 5px;
        justify-content: flex-start;
    }

    .sf-utility__right .sf-cart-btn {
        width: 22px;
        padding-inline: 0;
    }

    .sf-header--transparent .sf-asset-icon--white {
        width: auto;
        height: 22px;
        object-fit: none;
        object-position: left center;
    }

    .sf-cart-count {
        top: 21px;
        right: auto;
        inset-inline-start: 10.8px;
        width: auto;
        min-width: 16px;
        height: 16px;
        padding: 0 5px;
        background: rgb(72, 67, 46);
        font-size: 10px;
        font-weight: 400;
        line-height: 15px;
        border-radius: 10px;
        box-sizing: border-box;
    }

    /* Language toggle: a light outlined chip that sits with the icons. */
    .sf-utility__right .sf-lang-switcher {
        width: auto;
        height: 24px;
        padding: 0 7px;
        border: 1px solid #ddd;
        border-radius: 3px;
        background: transparent;
        font-size: 12px;
        font-weight: 500;
        line-height: 22px;
    }

    #sfHeader.sf-header--transparent:not(.sf-header--scrolled) .sf-lang-switcher {
        border-color: rgba(255, 255, 255, 0.85);
        color: #fff !important;
    }

        #sfHeader.sf-header--transparent:not(.sf-header--scrolled) .sf-lang-switcher:hover span {
            color: #fff !important;
        }

    /* Category row: 34px links, 41.2px between labels, 5px bottom padding. */
    .sf-nav__inner {
        gap: 41.2px;
        padding: 0 0 5px;
    }

    .sf-nav__link {
        display: inline-block;
        margin: 0;
        font-size: 16.9px;
        font-weight: 400;
        line-height: 34px;
    }

    /* Hover underline, per the reference: a 1px olive rule spanning the whole
       label, 33px down the 34px line box (6px under the text), wiped open from
       the centre in 0.2s. The same rule marks the current page. */
    .sf-header .sf-nav__link::after {
        top: 33px;
        bottom: auto;
        inset-inline: 0;
        width: auto;
        height: 1px;
        background: rgb(72, 67, 46);
        opacity: 1;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.2s linear;
    }

    .sf-header .sf-nav__link:hover::after,
    .sf-header .sf-nav__link--active::after {
        transform: scaleX(1);
    }
}


/* ── FOOTER COMPANY BLOCK: titto.co.kr reference metrics (desktop) ─────────
   Measured from the reference at 1520px: 75px band padding, a 662px text
   column, 13px/18.2px copy, links 40px apart with a 1x11 hairline 19px after
   each, 13px between company fields, and hard row breaks after Registration
   No. and Chief Privacy Officer so the rows read 3 / 2 / 2. */
@media (min-width: 901px) {
    .sf-footer {
        padding-block: 75px;
    }

    .sf-footer__logo-img {
        margin-top: 30px;
    }

    .sf-footer__legal-links,
    .sf-footer__brand > .sf-footer__legal,
    .sf-footer__copyright {
        max-width: 662.4px;
    }

    .sf-footer__legal-links {
        overflow: visible;
        margin: 0 0 15px;
    }

    .sf-footer__legal-links-row {
        gap: 0;
        margin-inline-start: 0;
    }

        .sf-footer__legal-links a {
            position: relative;
            padding-inline-end: 40px;
            font-size: 13px;
            font-weight: 400;
            line-height: 18.2px;
            color: #555;
        }

            .sf-footer__legal-links a::before {
                content: none;
            }

            .sf-footer__legal-links a::after {
                content: "";
                position: absolute;
                top: 5px;
                inset-inline-end: 20px;
                width: 1px;
                height: 11px;
                background: rgba(150, 150, 150, 0.4);
            }

            .sf-footer__legal-links a:last-child::after {
                background: transparent;
            }

    .sf-footer__legal {
        font-size: 13px;
        font-weight: 400;
        line-height: 18.2px;
        color: #555;
        word-break: normal;
    }

        .sf-footer__legal + .sf-footer__legal {
            margin-top: 15px;
        }

    /* Company fields flow inline like the reference, so a long field wraps
       inside itself rather than dropping to a new row. */
    .sf-footer__legal--fields {
        display: block;
        color: rgb(120, 120, 120);
    }

        .sf-footer__legal--fields .sf-footer__legal-item {
            display: inline;
            margin: 0;
        }

            /* The gap trails the field before it, so a field that drops to a
               new line starts flush with the column instead of indented. */
            .sf-footer__legal--fields .sf-footer__legal-item:nth-child(1),
            .sf-footer__legal--fields .sf-footer__legal-item:nth-child(2),
            .sf-footer__legal--fields .sf-footer__legal-item:nth-child(4),
            .sf-footer__legal--fields .sf-footer__legal-item:nth-child(6) {
                padding-inline-end: 26px;
            }

            .sf-footer__legal--fields .sf-footer__legal-item:nth-child(3)::after,
            .sf-footer__legal--fields .sf-footer__legal-item:nth-child(5)::after {
                content: "\A";
                white-space: pre;
            }

    .sf-footer__legal--fields .sf-footer__legal-strong,
    .sf-footer__legal--fields .sf-footer__verify-link {
        font-size: 13.65px;
        line-height: 19.11px;
        color: #555;
    }

    /* The officer's name + e-mail wrap as one unit, as on the reference. */
    .sf-footer__legal--fields .sf-footer__legal-strong {
        white-space: nowrap;
    }

    .sf-footer__copyright {
        margin-top: 15px;
        font-size: 13px;
        line-height: 18.2px;
        color: rgb(120, 120, 120);
    }
}


/* ── CHAT LAUNCHER ON SMALL SCREENS: same tile as the reference ───────────
   On phones and tablets the reference launcher is a smaller 44px tile -
   14px off the left, 18px off the bottom, 17px radius, 30px icon (24.5px of
   visible glyph) - with a shadow about 0.55x the desktop one. Measured
   pixel-for-pixel against the reference at both 425px and 768px. The bottom
   nav is hidden at these widths, so nothing sits under it. */
@media (max-width: 768px) {
    .mkw-launcher {
        width: 44px !important;
        height: 44px !important;
        left: 14px !important;
        right: auto !important;
        bottom: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 17px !important;
        box-shadow: none !important;
    }

    .mkw-launcher .mkw-launcher-ico,
    .mkw-launcher .mkw-launcher-ico svg {
        width: 30px !important;
        height: 30px !important;
    }

    .mkw-launcher .mkw-launcher-ico svg {
        stroke: rgb(217, 0, 16);
    }
}


/* ── INSTAGRAM SECTION ≤768px: titto.co.kr reference metrics ──────────────
   Measured from the reference at 768px and 375px: the grid is inset 1% of
   the viewport on each side, 3 square columns with a 0.29vw gutter, and the
   heading sits 70px below the previous section with 30px under it. Scoped
   with :has() to the Instagram section so no other home section shifts. */
@media (max-width: 768px) {
    .home-section:has(> .social-grid) {
        /* 46px + the 24px the previous section already carries = the
           reference's 70px above the heading. */
        padding-top: 46px;
        margin-bottom: 2.25px;
    }

        .home-section:has(> .social-grid) .home-section__head {
            margin: 0 0 30px;
        }

            .home-section:has(> .social-grid) .home-section__head h2 {
                margin: 0;
            }

    .social-grid {
        /* 1% of the viewport per side, on top of .storefront-main's padding,
           plus the half-gutter the reference keeps outside its edge tiles. */
        margin-inline: calc(1vw - 0.4rem);
        padding: 0 0.1465vw;
        gap: 0.293vw;
    }
}

/* .storefront-main's side padding turns asymmetric here, so re-derive the
   grid's own margins to keep the 1% inset even on both sides. */
@media (max-width: 360px) {
    .social-grid {
        margin-inline: calc(1vw - 0.2rem) calc(1vw - 0.4rem);
    }
}


/* ── FEATURED VIDEO ≤768px: titto.co.kr reference metrics ─────────────────
   Measured from the reference at 768px, 425px and 320px: the video sits
   flush against the footer, inset 1% of the viewport per side, 16:9, 15px
   radius, and 140.9 / 141.2 / 142.25px below the last Instagram tile. */
@media (max-width: 768px) {
    .storefront-main > .vedio-section {
        /* That gap is 140px + 0.29vw at every measured width; it collapses
           with the Instagram section's 2.25px margin. */
        margin-block-start: calc(140px + 0.29vw);
    }

        /* Cancel .storefront-main's 0.8rem bottom padding so the footer
           starts right under the video, as in the reference. */
        .storefront-main > .vedio-section:last-child {
            margin-block-end: -0.8rem;
        }

    .vedio-section .featured-video-wrap {
        /* 98vw centred on the viewport, net of .storefront-main's 0.4rem padding. */
        width: 98vw;
        margin-inline: calc(1vw - 0.4rem) 0;
        aspect-ratio: 16 / 9;
        border-radius: 15px;
    }

    /* Same crop the reference uses instead of the desktop 130% zoom: a player
       three times as wide as the box and exactly as tall, shifted one box-width
       left. The 16:9 video fits the height and lands centred in the visible box
       uncropped, while YouTube's title/channel bar (top-left of the player) and
       its logo/share chrome (bottom corners) fall in the clipped side bands.
       Centred controls such as the pause button stay centred. */
    .vedio-section .featured-video__iframe {
        top: 0;
        left: -100%;
        width: 300%;
        max-width: none; /* beats the global iframe { max-width: 100% } cap */
        height: 100%;
        transform: none;
    }
}

/* .storefront-main's side padding turns asymmetric (0.2rem start) here. */
@media (max-width: 360px) {
    .vedio-section .featured-video-wrap {
        margin-inline: calc(1vw - 0.2rem) 0;
    }
}


/* ── FOOTER ≤768px: titto.co.kr reference layout ──────────────────────────
   Measured from the reference at 768px, 600px, 425px, 375px and 320px - it
   scales the same way at every width: grey #f6f6f6 panel straight under the video, 5vw
   top/bottom padding, content inset 5.82vw per side, sections stacked
   Customer Center → Account Info / Return-Exchange → wordmark + company info
   with 6.311vw between them. Only presentation changes here - content, order
   of the markup and the accordion behaviour are untouched. */
@media (max-width: 768px) {
    .sf-footer {
        background: #f6f6f6;
        border-top: 0;
        padding: 5vw 5.82vw calc(5vw + env(safe-area-inset-bottom, 0px));
    }

    .sf-footer__inner {
        gap: 0;
    }

    /* 6.311vw between sections: 48.47px at 768px, 26.8px at 425px, 20.2px at
       320px - the reference scales this gap with the viewport. */
    .sf-footer__center,
    .sf-footer__right {
        margin-bottom: 6.311vw;
    }

    /* Wordmark box sits that same gap under the last accordion row. The bottom
       padding tops the footer's 5vw up to a constant 70px under the copyright,
       so the last line stays clear of the fixed chat launcher (44px tile,
       18px off the bottom = 62px). */
    .sf-footer .sf-footer__inner > .sf-footer__brand {
        margin-top: 0;
        padding-bottom: calc(70px - 5vw);
    }

    /* ── Customer Center ── */
    .sf-footer__section-title {
        font-size: 13.65px;
        font-weight: 500;
        line-height: 19.11px;
        color: #000;
        margin: 0 0 15px;
    }

    .sf-footer__phone {
        font-size: 16.9px;
        font-weight: 500;
        line-height: 23.66px;
        letter-spacing: 0.5px;
        color: #333;
        margin: 0 0 5px;
    }

    .sf-footer__hours {
        font-size: 13px;
        line-height: 18.2px;
        color: rgb(120, 120, 120);
        margin: 0 0 15px;
    }

    /* Footer pills (WhatsApp, influencer partner): the reference's flat 34px
       button - 4px radius, 3% black wash, 13px regular text, 20px icon. */
    .sf-footer__pill {
        height: 34px;
        gap: 7px;
        padding: 2px 10px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.03);
        color: #555;
        font-size: 13px;
        font-weight: 400;
        line-height: 30px;
    }

        .sf-footer__pill:hover {
            background: rgba(0, 0, 0, 0.06);
            color: #555;
        }

    .sf-footer__pill-icon {
        width: 20px;
        height: 20px;
    }

        .sf-footer__pill-icon img {
            width: 14px;
            height: 14px;
        }

    .sf-footer__pill-arrow svg {
        width: 20px;
    }

    /* ── Account Info / Return-Exchange ── */
    /* Every row, the last one included, keeps 20px under it. */
    .sf-footer__accordion {
        margin-bottom: 20px;
    }

    /* 30px title row + 5px + 1px hairline = the reference's 36px row. */
    .sf-footer__accordion-head {
        align-items: flex-start;
        min-height: 36px;
        padding: 0 0 5px;
        border-bottom: 1px solid rgb(208, 208, 208);
    }

    /* The reference's plus is an 18px "+" glyph in #787878 whose ink is an
       8px cross with ~1px strokes, 7px below the row top and 6.75px in from
       the right; drawn here as two hairlines at that size and spot. */
    .sf-footer__accordion-toggle {
        width: 8px;
        height: 8px;
        margin-top: 6px; /* 1px lines snap half a pixel down: ink lands at 7px */
        margin-inline-end: 6.75px;
        color: rgb(120, 120, 120);
    }

        .sf-footer__accordion-toggle::before {
            width: 8px;
            height: 1px;
        }

        .sf-footer__accordion-toggle::after {
            width: 1px;
            height: 8px;
        }

    .sf-footer__accordion-body {
        padding: 20px 0 0;
    }

    .sf-footer__account-info {
        font-size: 13px;
        line-height: 18.2px;
        color: rgb(120, 120, 120);
    }

    /* ── Wordmark + company info ── */
    /* Same 300 × 88.5 wordmark as the reference, centred in its 150px box. */
    .sf-footer__logo-img {
        width: 300px;
        /* The reference keeps the full 300px wordmark on narrow phones, letting
           it run past the content inset (to x=318.8 at 320px); only the
           viewport edge caps it, so it never causes sideways scroll. */
        max-width: calc(100vw - 5.82vw);
        margin: 30.7px 0 30.8px;
    }

    .sf-footer__links {
        margin: 0 0 10px;
    }

    .sf-footer__legal-links {
        margin: 0;
        padding: 5px 0 15px;
    }

    /* Links wrap like the reference's floated list: 25px apart, 5px between rows. */
    .sf-footer__legal-links-row {
        gap: 5px 25px;
    }

        .sf-footer__legal-links a {
            font-size: 13px;
            font-weight: 400;
            line-height: 18.2px;
            color: #555;
        }

    .sf-footer__legal {
        font-size: 13px;
        line-height: 18.2px;
        color: rgb(120, 120, 120);
    }

        .sf-footer__legal + .sf-footer__legal {
            margin-top: 15px;
            color: #555;
        }

    /* Reference wrapping rules: the fields are inline text, so a field that
       does not fit breaks mid-text onto the next line rather than jumping down
       whole. Company name + representative share the first line (13px padding
       either side of the join = 26px); every later field (registration no.,
       mail-order report, privacy officer, phone, address) starts a new line. */
    .sf-footer__legal--fields {
        display: block;
    }

        .sf-footer__legal--fields .sf-footer__legal-item {
            display: inline;
        }

            .sf-footer__legal--fields .sf-footer__legal-item:nth-child(1) {
                padding-inline-end: 13px;
            }

            /* 13px less the markup's space character between the two inline
               spans (~0.246em), so the visible join is the reference's 26px. */
            .sf-footer__legal--fields .sf-footer__legal-item:nth-child(2) {
                padding-inline-start: calc(13px - 0.246em);
            }

            .sf-footer__legal--fields .sf-footer__legal-item:nth-child(n+3) {
                display: block;
            }

    .sf-footer__legal-strong,
    .sf-footer__verify-link {
        font-size: 13.65px;
        line-height: 19.11px;
        color: #555;
    }

    .sf-footer__verify-link--muted {
        font-size: inherit;
        line-height: inherit;
        color: inherit;
    }

    .sf-footer__copyright {
        margin: 15px 0 0;
        font-size: 13px;
        line-height: 18.2px;
        color: rgb(120, 120, 120);
    }
}

/* =========================================================
   PRODUCT DETAIL - desktop match to titto.co.kr's detail page.
   Values come from the reference skin's CSS (its root font is 13px):
   imgArea 52% + 2.5% gutter / infoArea 45%; name, summary and prices
   in Jost with 0.3px tracking; options laid out as a 135px label
   column beside the select. Mobile (<=900px) keeps its own rules.
   The reference uses these same info-panel rules on phones, so this
   first block also applies at <=425px; desktop-only layout follows it.
   ========================================================= */
@media (min-width: 901px) {
    /* Columns: imgArea 52% (+2.5% padding and the inline-block gap), infoArea 45%. */
    .pd-layout {
        gap: calc(2.5% + 4px);
    }

    .pd-gallery {
        flex: 0 0 52%;
        width: 52%;
    }

    /* Big-image arrows: 26px solid #868686 discs, white chevrons, 27px in from each edge. */
    .pd-main-img__arrow {
        width: 26px;
        height: 26px;
        padding: 0;
        background: #868686;
        color: #fff;
        font-size: 11px;
        line-height: 1;
    }

        .pd-main-img__arrow:hover {
            background: #868686;
        }

    .pd-main-img__arrow--prev {
        left: 27px;
    }

    .pd-main-img__arrow--next {
        right: 27px;
    }

    .pd-info {
        flex: 0 0 45%;
    }
}

@media (min-width: 901px), (max-width: 425px) {
    /* Breadcrumb: .path - 13px, 20px line, 8px + 12px around each chevron,
       20px above and .item_path's 30px below. */
    .pd-breadcrumb.pd-breadcrumb--product {
        gap: 0;
        margin: 20px 0 0;
        line-height: 20px;
    }

        .pd-breadcrumb.pd-breadcrumb--product a,
        .pd-breadcrumb.pd-breadcrumb--product span {
            font-size: 13px;
            line-height: 20px;
        }

        .pd-breadcrumb.pd-breadcrumb--product .pd-breadcrumb__sep {
            margin-inline: 8px 6px;
        }

    .pd-breadcrumb--product + .pd-layout {
        margin-top: 30px;
    }

    .pd-main-img-wrap {
        border-radius: 10px;
    }

    /* Thumbnails: 6 per row, 10px apart, square, 10px radius. */
    .pd-thumbs {
        gap: 10px;
        margin-block-start: 10px;
    }

    .pd-thumb {
        width: calc((100% - 50px) / 6);
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 10px;
    }

        .pd-thumb img {
            border-radius: 10px;
        }

    .pd-info {
        position: relative;
        padding-top: 10px;
        line-height: 1.4;
    }

    /* Viewers pill: .item_hit_no. Inline flow (not flex) so the count keeps normal
       word spacing instead of flex-gap around it; icon at 17px, text at 45px. */
    .pd-info .pd-viewers {
        display: block;
        box-sizing: content-box;
        height: 25px;
        line-height: 25px;
        padding: 3px 5px 3px 17px;
        margin: 0 0 20px;
        background: rgba(255, 255, 255, .5);
        color: #222;
        font-size: 13px;
        font-weight: 400;
        white-space: nowrap;
    }

    /* 23px icon box at 17px; 2px + the following space puts the text at 45px. */
    .pd-viewers__icon {
        display: inline-block;
        margin-right: 2px;
        vertical-align: middle;
    }

        .pd-viewers__icon svg {
            display: block;
            width: 23px;
            height: 23px;
        }

    .pd-viewers__count {
        color: #ae0000;
        font-family: var(--font-price);
        letter-spacing: .3px;
    }

    /* Name: .item_detail_name - 20px #000, 5px left / 70px right padding,
       share icon (23px) pinned top-right on the viewers row. */
    .pd-info .pd-title-row {
        display: block;
        margin: 0;
        padding: 0 70px 0 5px;
    }

    .pd-info .pd-title {
        font-family: var(--font-price);
        font-size: 20px;
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: .3px;
        color: #000;
    }

    .pd-info .pd-share {
        position: absolute;
        top: 10px;
        right: 5px;
        margin: 0;
        padding: 0;
        line-height: 0;
        color: #606060;
    }

        .pd-info .pd-share svg {
            width: 23px;
            height: 23px;
        }

    .pd-info .pd-rule {
        margin: 0;
    }

    /* Summary lines: .item_detail_desc - 14px #333, 15px above the first, 10px between. */
    .pd-buybox > .pd-desc {
        margin: 0;
        padding: 10px 0 0 5px;
        font-family: var(--font-price);
        font-size: 14px;
        line-height: 1.4;
        letter-spacing: .3px;
        color: #333;
    }

        .pd-buybox > .pd-desc:first-child {
            padding-top: 15px;
        }

    /* Price block between two #e0e0e0 rules, 15px outside each. Inner padding is tuned to the
       reference's rendered glyph positions (its price lines sit in font-size:0 wrappers). */
    .pd-buybox .pd-price-row {
        display: block;
        margin: 15px 0;
        padding: 14px 5px 12px;
        border-block: 1px solid #e0e0e0;
    }

    .pd-price-row .pd-price-original {
        display: block;
        margin: 0;
        padding: 1px 0;
        border: 0;
        font-family: var(--font-price);
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: .3px;
        color: #aaa;
        text-decoration: line-through;
    }

    .pd-price-row .pd-price-main {
        display: block;
        padding: 1px 0;
        font-size: 18px;
        line-height: 19px;
    }

    /* Reference has 5px and no space before the price; here the markup's whitespace supplies ~4px. */
    .pd-price-main .pd-discount-rate {
        display: inline-block;
        margin-right: 1px;
        vertical-align: top;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: .3px;
        color: #ae0000;
    }

    .pd-discount-rate__unit {
        font-size: 13px;
        line-height: 1;
        vertical-align: top;
    }

    .pd-price-main .pd-price {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: .3px;
        color: #000;
    }

    /* Options: table rows - 135px label cell (10px/15px padding, 13px #696969),
       select beside it, 5px above and 15px below each row. */
    .pd-buybox .pd-option-row {
        display: block;
        margin: 0;
        padding: 5px 5px 15px 0;
    }

    .pd-option-row .pd-option-row__main {
        display: grid;
        grid-template-columns: 135px minmax(0, 1fr);
        column-gap: 5px;
        align-items: center;
    }

    .pd-option-row .pd-option-row__head {
        display: block;
        padding: 0 15px 0 10px;
    }

    .pd-option-row .pd-option-label {
        display: block;
        font-size: 13px;
        line-height: 1.4;
        color: #696969;
    }

    .pd-option-row .pd-option-count {
        display: block;
        line-height: 1.4;
    }

    .pd-option-row .pd-option-dropdown {
        margin-top: 0;
    }

    /* WhatsApp bar sits where titto's Kakao channel bar does: 10px under the last option row. */
    .pd-buybox .pd-kakao-btn {
        margin-block-start: 10px;
    }
}

/* Desktop option select: titto's is transparent over the page colour, not white. */
@media (min-width: 901px) {
    .pd-option-row .pd-option-dropdown {
        background-color: transparent;
    }
}

/* =========================================================
   PRODUCT DETAIL - phones (<=425px) matched to titto.co.kr's mobile
   layout. The info panel shares the desktop block above; this adds
   what differs on phones. Values are the reference's computed sizes
   (1% side gutter, 64px logo row, 41px nav row, 125px option labels,
   inline order/CTA row, bottom CTA bar only once that row is scrolled
   past). Header rules are limited to the product page.
   ========================================================= */
@media (max-width: 425px) {
    /* --- Header (product page only) --- */
    .sf-header[data-is-pdp="true"] {
        border-bottom: 0;
    }

    /* Fixed 30px bar like the reference's; a message that wraps (320px) sets two tight lines in it. */
    .sf-header[data-is-pdp="true"] .sf-announce {
        height: 30px;
        min-height: 30px;
        padding: 0 8px;
        margin-bottom: 1px;
        overflow: hidden;
        font-size: 13px;
        font-weight: 400;
        line-height: normal;
    }

        .sf-header[data-is-pdp="true"] .sf-announce__text {
            font-size: 13px;
            font-weight: 400;
            line-height: 15px;
        }

    /* Logo row: 64px, 34x40 icon cells 5px from each edge, 25px-tall icons and logo. */
    .sf-header[data-is-pdp="true"] .sf-utility {
        height: 64px;
        padding: 0 5px;
        border-bottom: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .sf-header[data-is-pdp="true"] .sf-utility__inner {
        height: 100%;
    }

    .sf-header[data-is-pdp="true"] .sf-utility__left,
    .sf-header[data-is-pdp="true"] .sf-utility__right {
        gap: 3px;
    }

    .sf-header[data-is-pdp="true"] .sf-utility .sf-icon-btn {
        width: 34px;
        height: 40px;
        padding: 0;
        margin: 0;
    }

        .sf-header[data-is-pdp="true"] .sf-utility .sf-icon-btn svg,
        .sf-header[data-is-pdp="true"] .sf-utility .sf-icon-btn .sf-asset-icon {
            width: auto;
            height: 25px;
        }

    .sf-header[data-is-pdp="true"] .sf-logo__img {
        width: auto;
        height: 25px;
    }

    /* Nav row: 15.6px uppercase links, 7px above / 15px below, 1px rule. */
    .sf-header[data-is-pdp="true"] .sf-nav {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .sf-header[data-is-pdp="true"] .sf-nav__inner {
        justify-content: flex-start;
        gap: 10px;
        padding: 7px 0 15px 5px;
    }

    .sf-header[data-is-pdp="true"] .sf-nav__link {
        display: block;
        height: 19px;
        margin: 0;
        padding: 0 5px;
        font-size: 15.6px;
        font-weight: 400;
        line-height: 19px;
        color: #000;
        text-transform: uppercase;
    }

        .sf-header[data-is-pdp="true"] .sf-nav__link::after {
            display: none;
        }

    /* Scrolled: only the nav row stays pinned (the reference collapses its logo row);
       the PDP hide-on-scroll is not used on phones. */
    .sf-header[data-is-pdp="true"].sf-header--scrolled .sf-announce,
    .sf-header[data-is-pdp="true"].sf-header--scrolled .sf-utility {
        display: none;
    }

    .sf-header[data-is-pdp="true"].sf-header--scrolled {
        background: #fdfdfc;
        box-shadow: none;
    }

        /* Pinned nav bar is 49px: the links drop 7px lower than in the full header. */
        .sf-header[data-is-pdp="true"].sf-header--scrolled .sf-nav__inner {
            padding-top: 14px;
        }

    .sf-header[data-is-pdp="true"].sf-header--hide-on-scroll {
        transform: none;
        visibility: visible;
        pointer-events: auto;
    }

    /* --- Page gutter: 1% each side --- */
    .storefront-main:has(.pd-layout) {
        padding: 0 1%;
    }

    /* --- Gallery --- */
    .pd-layout {
        gap: 10px;
    }

    .pd-main-img-wrap {
        background: none;
    }

    .pd-main-img {
        width: 100%;
        height: auto;
        max-height: none;
    }

    /* The reference keeps its big-image arrows at opacity 0 on phones; swiping drives it. */
    .pd-main-img__arrow {
        opacity: 0;
    }

    .pd-thumbs {
        padding-block-end: 0;
        scrollbar-width: none;
    }

        .pd-thumbs::-webkit-scrollbar {
            display: none;
        }

    .pd-thumb {
        margin: 0;
    }

    /* --- Options: 125px label column (reference <=768px) --- */
    .pd-option-row .pd-option-row__main {
        grid-template-columns: 125px minmax(0, 1fr);
    }

    /* An older mobile rule gives the label an 8px top/bottom margin, which made each label
       cell (and so each row) taller than the reference's 56px row. */
    .pd-option-row .pd-option-label {
        margin: 0;
    }

    /* --- WhatsApp bar = Kakao channel bar: 51px, 47px text inset, 7px radius --- */
    .pd-buybox .pd-kakao-btn {
        position: relative;
        display: block;
        margin: 11px 0 0;
        padding: 17px 17px 17px 47px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 400;
        line-height: 16.9px;
    }

    .pd-buybox .pd-kakao-btn__icon {
        position: absolute;
        left: 12px;
        top: 50%;
        width: 30px;
        height: 26px;
        margin-top: -13px;
    }

        .pd-buybox .pd-kakao-btn__icon img {
            width: 22px;
            height: 22px;
        }

    /* --- Delivery box = timer box: 20px/15px padding, 40px icon disc --- */
    .pd-buybox .pd-shipping-notice {
        margin: 10px 0 0;
        padding: 20px 15px 20px 20px;
        border-radius: 7px;
        background: rgba(0, 0, 0, .02);
    }

    /* Text flows as one block beside the disc (flex would split it into columns). */
    .pd-buybox .pd-buybox__delivery {
        position: relative;
        display: block;
        min-height: 40px;
        padding-left: 59px;
        font-size: 13px;
        line-height: 19.5px;
        color: #444;
    }

    .pd-buybox .pd-buybox__delivery-icon {
        position: absolute;
        left: 0;
        top: 50%;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        background: #48432e;
    }

    .pd-buybox .pd-buybox__delivery strong {
        font-weight: 500;
    }

    /* --- Payment rows = npay / Kakao checkout boxes: 290px, centred --- */
    .pd-buybox .pd-payment-row {
        flex-direction: column;
        align-items: stretch;
        gap: 13px;
        width: 290px;
        max-width: 100%;
        margin: 20px auto 0;
    }

    .pd-buybox .pd-payment-row > .pd-payment-naver--sm {
        flex: none;
        gap: 8px;
        padding: 11px 0;
        border-top: 2px solid #2b2f3a;
    }

        .pd-buybox .pd-payment-row > .pd-payment-naver--sm + .pd-payment-naver--sm {
            gap: 20px;
            border-top: 1px solid #000;
        }

    /* Label column: 95px beside the first button (npay), 50px beside the second (Kakao). */
    .pd-buybox .pd-payment-naver,
    .pd-buybox .pd-payment-kakao {
        flex: 0 0 95px;
        min-width: 0;
        padding: 0;
    }

    .pd-buybox .pd-payment-kakao {
        flex-basis: 50px;
    }

    .pd-buybox .pd-payment-info {
        font-size: 11px;
        line-height: 13px;
    }

    .pd-buybox .pd-btn-naverpay,
    .pd-buybox .pd-btn-kakao {
        flex: 1;
        height: 42px;
        padding: 0;
        border-radius: 2px;
        font-size: 14px;
    }

    .pd-buybox .pd-btn-kakao {
        height: 43px;
        border-radius: 6px;
    }

    /* --- Order amount + inline CTA row (shown on phones, as on the reference) --- */
    .pd-buybox .pd-info__actions {
        position: static;
        display: flex;
        flex-direction: column;
        margin: 14px 0 0;
        padding: 0;
        border-top: 0;
        background: none;
    }

        .pd-info__actions .pd-order-row {
            order: 1;
            align-items: center;
            margin: 0;
            padding: 0 0 0 4px;
        }

        .pd-info__actions .pd-order-note {
            order: 2;
        }

        .pd-info__actions .pd-actions {
            order: 3;
        }

        .pd-info__actions .pd-feedback {
            order: 4;
        }

    .pd-order-row .pd-order-label {
        font-size: 14.3px;
        line-height: 20px;
        color: #000;
    }

    .pd-order-row .pd-order-value strong {
        font-size: 20.8px;
        font-weight: 500;
        line-height: 30px;
        color: #000;
    }

    .pd-order-row .pd-order-value small {
        font-family: var(--font-price);
        font-size: 13px;
        color: #333;
    }

    .pd-info__actions .pd-order-note {
        margin: 0;
        padding: 2px 0 3px;
        text-align: right;
        font-size: 11.7px;
        line-height: 16px;
        color: #999;
    }

    .pd-info__actions .pd-actions {
        grid-template-columns: 1fr 1fr 55px;
        align-items: stretch;
        gap: 3px;
        height: 55px;
        margin: 10px 1px 0;
    }

        .pd-actions .pd-btn-cart,
        .pd-actions .pd-btn-buy,
        .pd-actions .pd-wishlist {
            height: 55px;
            padding: 0;
            border-radius: 2px;
            line-height: 53px;
        }

        .pd-actions .pd-btn-cart {
            border: 1px solid #d1d1d1;
            background: rgba(255, 255, 255, .4);
            color: #222;
            font-size: 14.95px;
            font-weight: 400;
        }

        .pd-actions .pd-btn-buy {
            border: 1px solid transparent;
            background: #48432e;
            color: #fff;
            font-size: 16.25px;
            font-weight: 400;
        }

        .pd-actions .pd-wishlist {
            width: 55px;
            border: 1px solid #d1d1d1;
            font-size: 24px;
        }

    /* --- Bottom CTA bar: hidden until the inline row is scrolled past --- */
    .pd-mobile-bar {
        display: none;
        padding: 8px;
        border-top: 0;
        box-shadow: 0 0 7px rgba(0, 0, 0, .1);
    }

        .pd-mobile-bar.pd-mobile-bar--revealed {
            display: flex;
        }

    .pd-mobile-bar .pd-mobile-bar__actions {
        align-items: stretch;
        gap: 3px;
        height: 55px;
    }

    .pd-mobile-bar .pd-btn-cart,
    .pd-mobile-bar .pd-btn-buy {
        height: 55px;
        line-height: 53px;
        border-radius: 2px;
        font-size: 14.95px;
        font-weight: 400;
    }

    .pd-mobile-bar .pd-btn-cart {
        border: 1px solid #d1d1d1;
        color: #222;
    }

    .pd-mobile-bar .pd-btn-buy {
        border: 1px solid transparent;
        background: #48432e;
        color: #fff;
    }

    /* Floating buttons: 40px column, 10px from the right, 15px up (100px over the CTA bar). */
    .sf-float-stack {
        right: 10px;
        bottom: 15px;
        gap: 8px;
    }

        .sf-float-stack .sf-float-btn {
            width: 40px;
            height: 40px;
        }

    body:has(.pd-mobile-bar--revealed) .sf-float-stack {
        bottom: 100px;
    }

    /* --- Tabs: 44px row + 1px rule, 3px underline under the active tab;
           pins at the very top over the nav row, as the reference's does. --- */
    .pd-tabs-bar {
        top: 0 !important;
        z-index: 41;
        width: 100%;
        height: auto;
        margin: 104px 0 25px;
        padding: 0;
        background: #fdfdfc;
        border-bottom: 1px solid #e0e0e0;
        /* When pinned it sits over the 49px nav bar; cover that bar's last 4px. */
        box-shadow: 0 4px 0 0 #fdfdfc;
    }

        /* Longer English labels can overflow like the reference's row does at 320px;
           keep every tab reachable by letting the row scroll sideways. */
        .pd-tabs-bar .pd-tabs-inner {
            display: flex;
            justify-content: safe space-around;
            height: 44px;
            padding: 0;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            background: none;
        }

            .pd-tabs-bar .pd-tabs-inner::-webkit-scrollbar {
                display: none;
            }

    .pd-tabs-bar .pd-tab {
        position: relative;
        height: 44px;
        margin: 0 10px;
        padding: 0 8px;
        border: 0;
        font-size: 14.95px;
        font-weight: 400;
        line-height: 44px;
        color: #666;
        white-space: nowrap;
    }

        .pd-tabs-bar .pd-tab--active::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 100%;
            height: 3px;
            background: #aaa;
        }

    .pd-detail-images {
        padding-inline: 4px;
    }
}

/* =========================================================
   PRODUCT DETAIL - option rows on phones and tablets (<=900px, so <=430px included).
   The base .pd-option-row__main is a plain block wrapper, so the label head and
   the 100%-wide select stacked ("Color" above its dropdown). titto.co.kr keeps its
   option table at every width: label cell beside the select, 125px at <=768px and
   135px above. Same rules as the desktop/phone blocks above; only option rows.
   ========================================================= */
@media (max-width: 900px) {
    /* Gap above the first option row: the reference has 15px under the price rule;
       the base .pd-price-row leaves .85rem (13.6px) on tablets. */
    .pd-buybox .pd-price-row {
        margin-bottom: 15px;
    }

    .pd-buybox .pd-option-row {
        display: block;
        margin: 0;
        padding: 5px 5px 15px 0;
    }

    .pd-option-row .pd-option-row__main {
        display: grid;
        grid-template-columns: 135px minmax(0, 1fr);
        column-gap: 5px;
        align-items: center;
    }

    .pd-option-row .pd-option-row__head {
        position: relative;
        display: block;
        padding: 0 15px 0 10px;
    }

    .pd-option-row .pd-option-label {
        display: block;
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
        color: #696969;
    }

    /* Hangs under the label instead of joining it in the centred block, so "COLOR" centres on its
       dropdown like the reference's label (which has no count). Fits inside the row's 15px bottom padding. */
    .pd-option-row .pd-option-count {
        position: absolute;
        top: 100%;
        left: 10px;
        display: block;
        line-height: 1.4;
        white-space: nowrap;
    }

    .pd-option-row .pd-option-dropdown {
        margin-top: 0;
    }

    /* Product option names show in capitals like the reference's "COLOR" (display only; the
       data keeps its own casing). The keyring row keeps "Keyring add-on option" as on titto. */
    .pd-option-row:not(:has(select[aria-label="Keyring add-on option"])) .pd-option-label {
        text-transform: uppercase;
    }
}

@media (max-width: 768px) {
    .pd-option-row .pd-option-row__main {
        grid-template-columns: 125px minmax(0, 1fr);
    }
}

/* ── Product card row alignment (shop all / category / search grid + home rail) ──
   Cards in the same row share five row tracks via CSS subgrid - image, title, description,
   compare-at price, price - so each track is as tall as the tallest one in that row. A card
   with a shorter title/description (or none, or no compare-at price) keeps the space and a
   card with longer text grows the shared track, so the price row always starts at the same
   height across the row, as on titto. No text is clipped; row tracks without content in any
   card collapse to 0. Spacing still comes from the items' own margins (gap 0 inside). */
.category-page__grid > .product-card,
.home-section--products .swiper-wrapper > .product-rail__item,
.home-section--products .product-rail__item > .product-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    row-gap: 0;
}

.home-section--products .product-rail__item > .product-card {
    grid-row: 1 / span 5;
}

/* A parent row-gap would also open between a card's own subgrid tracks, so the grid's vertical
   gap moves onto the cards as margin-bottom (same size), and the grid's bottom margin drops by
   the same amount so the space above "more view" is unchanged. */
.category-page .category-page__grid {
    --cp-row-gap: 2.75rem;
    row-gap: 0;
    margin-bottom: calc(2.5rem - var(--cp-row-gap));
}

.category-page__grid > .product-card {
    margin-bottom: var(--cp-row-gap, 1.5rem);
}

@media (max-width: 900px) {
    .category-page .category-page__grid {
        --cp-row-gap: 2rem;
    }
}

:is(.category-page__grid, .home-section--products .product-rail) .product-card__image {
    grid-row: 1;
}

:is(.category-page__grid, .home-section--products .product-rail) .product-card__body {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 2 / span 4;
    row-gap: 0;
}

/* Full title/description text: the shared tracks grow to the longest one, so the base 2-line
   clamp is no longer needed to keep prices level. */
:is(.category-page__grid, .home-section--products .product-rail) :is(.product-card__title, .product-card__description) {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

:is(.category-page__grid, .home-section--products .product-rail) .product-card__title { grid-row: 1; }
:is(.category-page__grid, .home-section--products .product-rail) .product-card__description { grid-row: 2; }
:is(.category-page__grid, .home-section--products .product-rail) .product-card__compare-row { grid-row: 3; align-self: end; }
:is(.category-page__grid, .home-section--products .product-rail) .product-card__prices { grid-row: 4; }

/* The rail's Swiper wrapper becomes a single-row-of-columns grid so its slides can share the
   tracks; slide width and Swiper's inline margin-right (spaceBetween) still size each column,
   so slide positions/translate math are unchanged. */
.home-section--products .product-rail.swiper > .swiper-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-rows: repeat(5, auto);
    row-gap: 0;
    align-items: start;
}

.home-section--products .product-rail__item.swiper-slide {
    height: auto;
}