/* ==========================================================================
   components.css — shared building blocks (icons, links, dividers) plus the
   header and footer. Loaded after base.css, so these rules win over legacy.css.
   ========================================================================== */

/* ---------- Icons ----------
   One class styles every sprite icon: outline style, 1.5px stroke, and the
   colour follows the text colour (currentColor), so a hover on the button
   recolours its icon for free. */
.icon {
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Underline-draw link ----------
   A 1px gold line grows from the start edge (the right, in RTL) on hover.
   It is a background image, so only background-size animates: cheap. */
.link-draw {
    background-image: linear-gradient(var(--gold-500), var(--gold-500));
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 0 1px;
    padding-bottom: 2px;
    transition: background-size var(--dur-base) var(--ease-out), color var(--dur-micro);
}
.link-draw:hover,
.link-draw:focus-visible { background-size: 100% 1px; }

/* ---------- Tile divider ----------
   A hairline with your diamond motif in the middle. Reusable between sections. */
.tile-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.tile-divider::before,
.tile-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gold-500);
    opacity: 0.35;
}

/* ---------- Search field (all screen sizes) ---------- */
.search-bar {
    padding-block: 0;
    padding-inline: 44px 16px;          /* room for the icon on the start (right) side */
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-sm);
    transition: border-color var(--dur-micro), box-shadow var(--dur-micro), background var(--dur-micro);
}
.search-bar::placeholder { color: var(--muted); }
.search-bar:hover { background: var(--surface); border-color: var(--ink-soft); }
.search-bar:focus {
    outline: none;
    background: #fff;
    border-color: var(--teal-700);
    box-shadow: 0 0 0 3px var(--teal-100);
}
.search-icon-btn {
    left: auto;
    inset-inline-start: 4px;
    color: var(--muted);
}
.search-icon-btn:hover,
.search-wrap:focus-within .search-icon-btn { color: var(--teal-700); }
.search-icon { width: 1.125rem; height: 1.125rem; color: inherit; }

/* ---------- Header badge ---------- */
.cart-badge {
    background: var(--gold-500);
    color: var(--ink);
    font-weight: 700;
}

/* ---------- Header: desktop and tablet only (phones keep their own layout) ---------- */
@media (min-width: 769px) {
    .site-header { gap: var(--space-6); padding-block: 14px; }
    .site-logo { height: 56px; }

    /* The full-width bar behind the header (legacy draws it with ::before) */
    .site-header::before {
        background: rgba(246, 242, 234, 0.92);
        border-bottom: 1px solid var(--line);
    }
    .site-header.is-stuck::before { box-shadow: var(--shadow-2); }

    /* Nav links: gold underline that draws in from the right */
    .nav-link { font-size: var(--fs-sm); font-weight: 600; }
    .nav-link::after {
        background: var(--gold-500);
        transform-origin: 100% 50%;
        transition: transform var(--dur-base) var(--ease-out);
    }
    .nav-link .icon { width: 1.125rem; height: 1.125rem; }

    .search-wrap { max-width: 560px; }
    .search-bar { height: 44px; }

    /* Icon buttons: no ring, square-ish, the cart is the one filled button */
    .header-icons { gap: var(--space-2); }
    .header-icons .icon-btn {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--ink);
        transition: background var(--dur-micro), color var(--dur-micro);
    }
    .header-icons .icon-btn:hover { background: var(--teal-100); color: var(--teal-800); }
    .header-icons .icon-btn--primary { background: var(--ink); color: var(--paper); }
    .header-icons .icon-btn--primary:hover { background: var(--teal-700); color: #fff; }

    .login-btn {
        height: 44px;
        border: 1px solid var(--ink);
        border-radius: var(--radius-sm);
        color: var(--ink);
        font-size: var(--fs-sm);
        font-weight: 600;
    }
    .login-btn:hover { background: var(--ink); color: var(--paper); }

    /* Dropdown panels */
    .category-dropdown,
    .account-dropdown,
    .catmenu__sub {
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--surface);
        box-shadow: var(--shadow-2);
    }
}

@media (min-width: 1024px) {
    .site-logo { height: 64px; }
}

/* ---------- Footer ---------- */
.site-footer {
    margin-top: var(--section-space);
    background: var(--night);
    color: #D9D4C7;
}
.site-footer .tile-divider { padding-top: var(--space-7); }

.sfooter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));   /* 4 columns on desktop, 2 on tablet, 1 on phone, no media queries */
    gap: var(--space-7) var(--space-6);
    padding-block: var(--space-8) var(--space-7);
}
.sfooter-logo { height: 72px; width: auto; margin-bottom: var(--space-4); }
.sfooter-text { margin: 0; font-size: var(--fs-sm); }

.sfooter-heading {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #fff;
}
.sfooter-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sfooter-list a { color: #D9D4C7; font-size: var(--fs-sm); }
.sfooter-list a:hover { color: #fff; }

.sfooter-contact li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); }
.sfooter-contact .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.45em; color: var(--gold-500); }

.sfooter-seal {
    width: fit-content;
    margin-top: var(--space-4);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: #fff;
}

.sfooter-bottom {
    padding-block: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--fs-xs);
    color: #A9A398;
    text-align: center;
}
.sfooter-bottom p { margin: 0; }

/* ==========================================================================
   Product card (.pcard)
   Colours come from three variables so a dark section can re-theme the card
   by changing them, instead of overriding every rule.
   ========================================================================== */
.pcard {
    --pcard-ink: var(--ink);
    --pcard-muted: var(--muted);
    --pcard-sale: var(--sale);
    position: relative;
    min-width: 0;
    color: var(--pcard-ink);
}

.pcard__media {
    position: relative;
    aspect-ratio: 4 / 5;               /* reserves the space before the photo loads: no layout shift */
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--line);
    transition: box-shadow var(--dur-base) var(--ease-out);
}
.pcard__link { position: absolute; inset: 0; display: block; }

.pcard__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-large) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.pcard__img--alt { opacity: 0; }

/* No photo yet: a soft turquoise tile pattern instead of a flat grey box */
.pcard__ph {
    position: absolute;
    inset: 0;
    background-color: var(--teal-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 4 32 18 18 32 4 18Z' fill='none' stroke='%231E6F76' stroke-opacity='.28' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* Discount badge: a hexagon with pointed ends, echoing the tile diamond */
.pcard__badge {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    padding: 2px 14px;
    background: var(--sale);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.7;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}

/* Heart button */
.pcard__wish {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-sm);
    background: rgba(251, 248, 242, 0.92);
    color: var(--ink);
    cursor: pointer;
    transition: background var(--dur-micro), color var(--dur-micro);
}
.pcard__wish .icon {
    width: 1.125rem;
    height: 1.125rem;
    transition: fill var(--dur-base), stroke var(--dur-base), transform var(--dur-micro) var(--ease-spring);
}
.pcard__wish:hover { background: var(--ink); color: var(--paper); }
.pcard__wish:active .icon { transform: scale(0.82); }
.pcard__wish.is-liked .icon { fill: var(--sale); stroke: var(--sale); }
.pcard__wish.is-liked:hover .icon { fill: #fff; stroke: #fff; }
@media (pointer: coarse) { .pcard__wish { width: 44px; height: 44px; } }

/* Text under the photo */
.pcard__info { display: grid; gap: var(--space-1); padding-top: var(--space-3); }
.pcard__title { margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.6; }
.pcard__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;              /* long names stop at two lines so cards line up */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pcard__colors { display: flex; align-items: center; gap: 6px; }
.pcard__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(27, 26, 23, 0.2);
}
.pcard__more { font-size: var(--fs-xs); color: var(--pcard-muted); }

.pcard__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0;
    font-size: var(--fs-sm);
}
.pcard__price strong { font-weight: 700; }
.pcard__price--sale strong { color: var(--pcard-sale); }
.pcard__was { font-size: var(--fs-xs); color: var(--pcard-muted); }
.pcard__price small { font-size: var(--fs-xs); color: var(--pcard-muted); }

/* Hover effects only where there is a real hover (not touch screens, where they would stick) */
@media (hover: hover) {
    .pcard:hover .pcard__media { box-shadow: var(--shadow-2); }
    .pcard:hover .pcard__img { transform: scale(1.04); }
    .pcard:hover .pcard__img--alt { opacity: 1; }
}

/* Corner ticks on the photo: two small L-shaped marks that slide in on hover */
.pcard__media::before,
.pcard__media::after {
    content: '';
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 14px;
    height: 14px;
    border-block-end: 1.5px solid var(--paper);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out);
    pointer-events: none;
}
.pcard__media::before { inset-inline-start: 10px; border-inline-start: 1.5px solid var(--paper); }
.pcard__media::after  { inset-inline-end: 10px;   border-inline-end: 1.5px solid var(--paper); }
@media (hover: hover) {
    .pcard:hover .pcard__media::before,
    .pcard:hover .pcard__media::after { opacity: 1; transform: none; }
}

/* ==========================================================================
   Home/product-page sections (.hsec) and scroll rails (.rail)
   ========================================================================== */
.hsec {
    --hs-ink: var(--ink);
    --hs-bg: var(--paper);
    --hs-line: rgba(27, 26, 23, 0.25);
    --rail-line: var(--line);
    --rail-bar: var(--ink);
    --per-view: 2.15;                   /* phones: a sliver of the next card shows, hinting "swipe" */
    margin-top: var(--section-space);
}
@media (min-width: 640px)  { .hsec { --per-view: 3; } }
@media (min-width: 1024px) { .hsec { --per-view: 4; } }

.hsec__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}
.hsec__titles { min-width: 0; }
.hsec__kicker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--gold-700);
}
.hsec__title { margin: 0; font-size: var(--fs-h1); color: var(--hs-ink); }

.hsec__tools { display: flex; align-items: center; gap: var(--space-5); flex-shrink: 0; }
.hsec__all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    color: var(--hs-ink);
}
.hsec__all .icon { width: 1.125rem; height: 1.125rem; transition: transform var(--dur-base) var(--ease-out); }
.hsec__all:hover .icon { transform: translateX(-4px); }     /* nudges toward the reading direction */

.hsec__nav { display: flex; gap: var(--space-2); }
.hsec__nav button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hs-line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--hs-ink);
    cursor: pointer;
    transition: background var(--dur-micro), color var(--dur-micro), opacity var(--dur-micro);
}
.hsec__nav button:hover:not(:disabled) { background: var(--hs-ink); color: var(--hs-bg); }
.hsec__nav button:disabled { opacity: 0.35; cursor: default; }
.hsec__nav [data-rail-prev] .icon { transform: scaleX(-1); }   /* the sprite chevron points left = "next" in RTL */

/* Nothing to scroll? Hide the controls (JS adds .is-scrollable when there is) */
.hsec[data-rail]:not(.is-scrollable) .hsec__nav,
.hsec[data-rail]:not(.is-scrollable) .rail__progress { display: none; }

.rail__track {
    display: flex;
    gap: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > .pcard {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gutter)) / var(--per-view));
    scroll-snap-align: start;
}

.rail__progress { height: 2px; margin-top: var(--space-5); overflow: hidden; background: var(--rail-line); }
.rail__progress > span {
    display: block;
    height: 100%;
    background: var(--rail-bar);
    transform-origin: 100% 50%;         /* grows from the right edge: where reading starts in RTL */
    transform: scaleX(0.25);
}

@media (max-width: 767px) {
    .hsec__nav { display: none; }       /* phones swipe */
    .hsec__head { align-items: center; }
}

/* ==========================================================================
   Buttons (.btn)
   Ink-filled by default. On hover a turquoise layer wipes in from the start
   edge (the right, in RTL). Only background-size animates: cheap and smooth.
   .btn--ghost is the outline version. (The old .btn-primary stays until we
   replace it page by page.)
   ========================================================================== */
.btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    --btn-wipe: var(--teal-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: 0 var(--space-6);
    border: 1px solid var(--btn-bg);
    border-radius: var(--radius-sm);
    background-color: var(--btn-bg);
    background-image: linear-gradient(var(--btn-wipe), var(--btn-wipe));
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: 0 100%;
    color: var(--btn-fg);
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background-size var(--dur-base) var(--ease-out), color var(--dur-micro), border-color var(--dur-micro);
}
.btn:hover { background-size: 100% 100%; border-color: var(--btn-wipe); color: #fff; }
.btn .icon { width: 1.125rem; height: 1.125rem; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .icon { transform: translateX(-4px); }

.btn--ghost { background-color: transparent; border-color: var(--ink); color: var(--ink); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:hover { background-size: 0 100%; color: var(--btn-fg); }
.btn--ghost:disabled:hover { color: var(--ink); }

/* ==========================================================================
   Button states: loading (a small spinning diamond) and success
   ========================================================================== */
@keyframes diamond-spin { to { transform: rotate(405deg); } }

.btn.is-loading:disabled { opacity: 0.85; }
.btn.is-loading::after {
    content: '';
    flex: none;
    width: 11px;
    height: 11px;
    border: 1.5px solid currentColor;
    transform: rotate(45deg);                        /* a diamond, echoing the tile motif */
    animation: diamond-spin 0.9s linear infinite;
}
.btn.is-added { --btn-bg: var(--teal-700); }
.btn.is-added::before {                              /* check mark drawn as a mask, so it follows the text colour */
    content: '';
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Accordion (.acc). A grid row going from 0fr to 1fr animates "height: auto"
   with no script measuring heights; closed content is hidden from Tab.
   ========================================================================== */
.acc { border-top: 1px solid var(--line); }
.acc:last-child { border-bottom: 1px solid var(--line); }
.acc__head { margin: 0; }
.acc__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding-block: var(--space-5);
    border: 0;
    background: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}
.acc__btn .icon { transition: transform var(--dur-base) var(--ease-out); }
.acc.is-open .acc__btn .icon { transform: rotate(180deg); }

.acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear var(--dur-base);
}
.acc.is-open .acc__inner { visibility: visible; transition-delay: 0s; }
.acc__body { padding-bottom: var(--space-6); }

/* ==========================================================================
   Forms (global: the Django widgets already carry .field-input)
   Inputs are 48px tall and 16px text, which also stops iOS zooming on focus.
   ========================================================================== */
.field-row { margin-bottom: var(--space-5); }
.field-label { display: block; margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }

.field-input {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--dur-micro), box-shadow var(--dur-micro), background var(--dur-micro);
}
textarea.field-input { min-height: 7rem; padding-block: var(--space-3); resize: vertical; }
.field-input::placeholder { color: var(--muted); }
.field-input:hover { border-color: var(--ink-soft); }
.field-input:focus { outline: none; border-color: var(--teal-700); box-shadow: 0 0 0 3px var(--teal-100); background: #fff; }
.field-input[readonly] { border-style: dashed; background: transparent; color: var(--muted); }
.field-row:has(.field-error) .field-input { border-color: var(--sale); }   /* a field with a server error gets a red border */

.field-error { margin: var(--space-2) 0 0; font-size: var(--fs-xs); font-weight: 600; color: var(--sale); }
.field-hint { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.text-link { color: var(--teal-700); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Flash messages ---------- */
.messages { padding-top: var(--space-5); }
.notice {
    margin-bottom: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-inline-start-width: 4px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}
.notice-success { background: #EAF4EE; border-color: var(--success); color: #165338; }
.notice-error   { background: #F9ECEC; border-color: var(--sale); color: #7A2127; }
.notice-warning { background: #FBF1E0; border-color: var(--gold-500); color: #6B4A0D; border-radius: var(--radius-sm); }
.notice-info    { background: var(--teal-100); border-color: var(--teal-700); color: var(--teal-800); }

/* ---------- Buttons: full width, and the old .btn-primary name ----------
   Dozens of old templates still say class="btn-primary" (login, profile,
   reviews, dashboard...). This gives them the new button until we retire the name. */
.btn--block { width: 100%; }

.btn-primary {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    --btn-wipe: var(--teal-700);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: 0 var(--space-6);
    border: 1px solid var(--btn-bg);
    border-radius: var(--radius-sm);
    background-color: var(--btn-bg);
    background-image: linear-gradient(var(--btn-wipe), var(--btn-wipe));
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: 0 100%;
    color: var(--btn-fg);
    font-size: var(--fs-sm);
    font-weight: 700;
    transition: background-size var(--dur-base) var(--ease-out), color var(--dur-micro), border-color var(--dur-micro);
}
.btn-primary:hover {                    /* the old rule used the "background" shorthand, which wipes the layer: restate it */
    background-color: var(--btn-bg);
    background-image: linear-gradient(var(--btn-wipe), var(--btn-wipe));
    background-size: 100% 100%;
    border-color: var(--btn-wipe);
    color: #fff;
}

/* ---------- Skeleton shimmer ---------- */
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton,
.cd__body:empty::before {
    background: linear-gradient(100deg, var(--line) 30%, #EFE9DC 50%, var(--line) 70%) 0 0 / 200% 100%;
    animation: shimmer 1.3s linear infinite;
}

/* ---------- Badge pop when the count changes ---------- */
@keyframes badge-pop { 0% { transform: scale(0.5); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.cart-badge.is-bump { animation: badge-pop 420ms var(--ease-spring); }

/* ---------- Quantity stepper ---------- */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.stepper button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--dur-micro);
}
.stepper button:hover { background: var(--teal-100); }
.stepper .icon { width: 1rem; height: 1rem; }
.stepper span { min-width: 2.5ch; text-align: center; font-size: var(--fs-sm); font-weight: 700; }
@media (pointer: coarse) { .stepper button { width: 44px; height: 44px; } }

/* ==========================================================================
   Cart drawer (.cd): slides in from the left (the end side, in RTL)
   ========================================================================== */
.cd {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    visibility: hidden;                          /* closed = invisible, and not reachable with Tab */
    transition: visibility 0s linear var(--dur-base);
}
.cd.is-open { visibility: visible; transition-delay: 0s; }

.cd__backdrop { position: absolute; inset: 0; background: rgba(20, 32, 31, 0.5); opacity: 0; transition: opacity var(--dur-base); }
.cd.is-open .cd__backdrop { opacity: 1; }

.cd__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    width: min(26rem, 100%);
    background: var(--paper);
    box-shadow: var(--shadow-3);
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
}
.cd.is-open .cd__panel { transform: none; }

.cd__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); }
.cd__title { margin: 0; font-size: var(--fs-md); }
.cd__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--dur-micro);
}
.cd__close:hover { background: var(--teal-100); }
.cd__msg { margin: 0; padding: 0 var(--space-5); font-size: var(--fs-sm); color: var(--sale); }
.cd__msg:not(:empty) { padding-top: var(--space-3); }

.cd__body { flex: 1; min-height: 0; padding-inline: var(--space-5); overflow-y: auto; transition: opacity var(--dur-micro); }
.cd__body.is-busy { opacity: 0.55; pointer-events: none; }
.cd__body:empty::before { content: ''; display: block; height: 14rem; margin-top: var(--space-5); border-radius: var(--radius-sm); }   /* skeleton while the first load runs */

.cl-list { margin: 0; padding: 0; list-style: none; }
.cl { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
.cl__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); background: var(--line); }
.cl__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.6;
}
.cl__title:hover { color: var(--teal-800); }
.cl__meta { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.cl__dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(27, 26, 23, 0.2); }
.cl__warn { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--warning); }
.cl__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.cl__price { margin: 0; font-size: var(--fs-sm); font-weight: 700; }
.cl__price small { font-weight: 400; color: var(--muted); }
.cl__remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: var(--fs-xs);
    cursor: pointer;
    transition: color var(--dur-micro);
}
.cl__remove .icon { width: 1rem; height: 1rem; }
.cl__remove:hover { color: var(--sale); }

.cd__foot {
    position: sticky;                            /* stays at the bottom while the list scrolls */
    bottom: 0;
    margin-inline: calc(-1 * var(--space-5));
    padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--paper);
}
.cd__total { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-sm); }
.cd__total strong { font-family: var(--font-display); font-size: var(--fs-md); }
.cd__total small { font-weight: 400; color: var(--muted); }
.cd__note { margin: var(--space-1) 0 var(--space-4); font-size: var(--fs-xs); color: var(--muted); }

.cd__empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-9) var(--space-4); text-align: center; }
.cd__empty .brand-flourish { transform: scale(1.8); margin-bottom: var(--space-2); }
.cd__empty-title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; }

/* ==========================================================================
   Tabs (.tabs / .tab): underline tabs, used by the account area
   ========================================================================== */
.tabs {
    display: flex;
    gap: var(--space-6);
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    padding-block: var(--space-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    color: var(--ink-soft);
    transition: color var(--dur-micro);
}
.tab::after {                                         /* underline: grows from the right on hover, stays when active */
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform var(--dur-base) var(--ease-out);
}
.tab:hover { color: var(--ink); }
.tab:hover::after { transform: scaleX(1); }
.tab.is-active { color: var(--ink); }
.tab.is-active::after { transform: scaleX(1); background: var(--ink); }
.tab__count {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding-inline: 6px;
    border-radius: var(--radius-full);
    background: var(--line);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.tab.is-active .tab__count { background: var(--ink); color: var(--paper); }

/* ---------- Product grid (cards in rows) ---------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-7) var(--gutter); }
@media (max-width: 639px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3); } }

/* ---------- Order status badges (also used by the dashboard) ---------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.6;
}
.status-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status--pending { background: #FBF1E0; color: var(--warning); }
.status--paid,
.status--processing { background: var(--teal-100); color: var(--teal-800); }
.status--shipped { background: #E9ECEF; color: var(--ink-soft); }
.status--delivered { background: #EAF4EE; color: var(--success); }
.status--cancelled,
.status--failed { background: #F9ECEC; color: var(--sale); }