/* =============================================================================
 * MISMOHOLA VIBRANT ? main stylesheet
 * Vibrant playful color-blocked e-commerce theme.
 *
 * Sections:
 *  1.  Design tokens (colors, type, radii, shadow, spacing)
 *  2.  Reset & base
 *  3.  Typography
 *  4.  Layout primitives
 *  5.  Buttons & pills
 *  6.  Color blocks & sticker labels
 *  7.  Form controls
 *  8.  Header (promo bar, sticky nav, cart, search trigger)
 *  9.  Mobile drawer & search overlay
 * 10.  Footer
 * 11.  Home: hero, marquee, category bento, trending grid, blog teaser
 * 12.  Shop: page banner, filter chips, sidebar, product grid, pagination
 * 13.  Product card (hover, badges, quick-view, wishlist)
 * 14.  Single product: gallery, info, countdown, stock bar, social proof,
 *      swatches, sizes, trust tiles, payment row, accordion, reviews
 * 15.  Cart drawer & mini cart
 * 16.  Cart page & checkout
 * 17.  Account: login, dashboard
 * 18.  Blog: index, single, sidebar
 * 19.  About / Contact / 404
 * 20.  Toasts, modals, quick view
 * 21.  Animations
 * 22.  Responsive
 * 23.  Dark mode
 * ============================================================================ */

/* -------------------------------------------------------------------------
 * 1. Design tokens
 * ---------------------------------------------------------------------- */

:root {
    /* Brand palette ? vibrant playful */
    --ink:        #1B2A4E;   /* deep navy text */
    --ink-soft:   #495680;
    --ink-mute:   #7E89A7;
    --cream:      #FFFBF5;
    --paper:      #FFFFFF;
    --hairline:   #ECE7DD;
    --hairline-2: #DBD3C5;

    --coral:      #FF5A47;
    --coral-deep: #E33F2D;
    --yellow:     #F8D24A;
    --yellow-soft:#FDF1C7;
    --mint:       #B7E4C7;
    --mint-soft:  #EAF7EE;
    --lavender:   #D9CCEC;
    --lavender-soft:#F0EAFA;
    --pink:       #FCD5CE;
    --pink-soft:  #FFEDE8;

    --green:      #4F8B5C;   /* "in stock" dot */
    --red:        #E04A3C;

    /* Type */
    --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-serif:   'Fraunces', Georgia, serif;
    --weight-reg:   500;
    --weight-mid:   600;
    --weight-bold:  700;
    --weight-black: 800;

    /* Radii */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(27, 42, 78, .05), 0 2px 6px rgba(27, 42, 78, .04);
    --shadow-md: 0 6px 18px rgba(27, 42, 78, .08), 0 2px 6px rgba(27, 42, 78, .04);
    --shadow-lg: 0 18px 40px rgba(27, 42, 78, .12), 0 8px 16px rgba(27, 42, 78, .06);
    --shadow-xl: 0 30px 70px rgba(27, 42, 78, .18), 0 12px 24px rgba(27, 42, 78, .08);
    --ring-coral: 0 0 0 3px rgba(255, 90, 71, .25);
    --ring-ink:   0 0 0 3px rgba(27, 42, 78, .15);

    /* Spacing scale */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  24px;
    --s-6:  32px;
    --s-7:  48px;
    --s-8:  64px;
    --s-9:  96px;

    /* Layout */
    --container: 1240px;
    --container-wide: 1440px;
    --header-h: 76px;
    --promobar-h: 36px;

    /* Motion */
    --easing: cubic-bezier(.22, 1, .36, 1);
    --t-fast: .18s;
    --t-mid:  .32s;
    --t-slow: .55s;
}

/* -------------------------------------------------------------------------
 * 2. Reset & base
 * ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-reg);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.55;
    font-feature-settings: 'ss01', 'ss03';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, picture, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea {
    font: inherit;
    color: inherit;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover { color: var(--coral); }
hr { border: 0; border-top: 1px solid var(--hairline); }
ul, ol { padding-left: 1.2em; }

/* Scrollbar tweak */
* { scrollbar-width: thin; scrollbar-color: var(--ink-mute) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }

/* Selection */
::selection { background: var(--coral); color: #fff; }

/* Visually hidden (a11y) */
.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
}
.skip-link {
    position: absolute; left: -9999px; top: 8px; z-index: 9999;
    background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--r-pill);
}
.skip-link:focus { left: 16px; }

/* -------------------------------------------------------------------------
 * 3. Typography
 * ---------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    line-height: 1.1;
    margin: 0 0 .6em;
    letter-spacing: -.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.05rem; }
h5 { font-size: .95rem; }
h6 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
p  { margin: 0 0 1em; }

.eyebrow {
    font-size: .8rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-soft);
}
.lead { font-size: 1.1rem; color: var(--ink-soft); }

.serif { font-family: var(--font-serif); font-style: italic; }

/* -------------------------------------------------------------------------
 * 4. Layout primitives
 * ---------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
}
.container--wide { max-width: var(--container-wide); }

.section { padding-block: clamp(48px, 8vw, 96px); }
.section--tight { padding-block: clamp(28px, 5vw, 56px); }

.grid { display: grid; gap: var(--s-5); }
.row  { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; align-items: center; }
.row--center  { justify-content: center; align-items: center; }
.stack > * + * { margin-top: var(--s-4); }

/* Tints used to wrap product photography */
.tint        { border-radius: var(--r-lg); padding: var(--s-4); }
.tint--yellow   { background: var(--yellow); }
.tint--yellow-s { background: var(--yellow-soft); }
.tint--mint     { background: var(--mint); }
.tint--mint-s   { background: var(--mint-soft); }
.tint--lavender { background: var(--lavender); }
.tint--lavender-s { background: var(--lavender-soft); }
.tint--coral    { background: var(--coral); color: #fff; }
.tint--pink     { background: var(--pink); }
.tint--pink-s   { background: var(--pink-soft); }
.tint--ink      { background: var(--ink); color: #fff; }

/* -------------------------------------------------------------------------
 * 5. Buttons & pills
 * ---------------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    padding: 14px 24px;
    border: 2px solid transparent;
    border-radius: var(--r-pill);
    font-weight: var(--weight-bold);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--t-fast) var(--easing),
                background var(--t-fast) var(--easing),
                color var(--t-fast) var(--easing),
                border-color var(--t-fast) var(--easing),
                box-shadow var(--t-fast) var(--easing);
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 0; box-shadow: var(--ring-coral); }

.btn--primary {
    background: var(--coral); color: #fff;
    box-shadow: 0 6px 16px rgba(255, 90, 71, .35);
}
.btn--primary:hover { background: var(--coral-deep); color: #fff; }

.btn--ink {
    background: var(--ink); color: #fff;
}
.btn--ink:hover { background: #14213D; color: #fff; }

.btn--outline {
    background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--ghost {
    background: rgba(255,255,255,.6); color: var(--ink); border-color: transparent;
    backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: #fff; }

.btn--block { width: 100%; }
.btn--lg    { padding: 18px 28px; font-size: 1.05rem; }
.btn--sm    { padding: 8px 14px; font-size: .85rem; }

.btn .icon { width: 18px; height: 18px; }

/* Pill / chip (filter chips, status pills) */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    border-radius: var(--r-pill);
    font-size: .85rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    cursor: pointer;
    transition: all var(--t-fast) var(--easing);
}
.pill:hover { background: var(--ink); color: #fff; }
.pill[aria-pressed="true"], .pill.is-active { background: var(--coral); border-color: var(--coral); color: #fff; }

.pill--coral { background: var(--coral); border-color: var(--coral); color: #fff; }
.pill--mint  { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.pill--yellow{ background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.pill--lavender { background: var(--lavender); border-color: var(--lavender); color: var(--ink); }
.pill--ghost { background: transparent; }

.pill--sm    { padding: 5px 10px; font-size: .75rem; }

/* "Add to bag ? $28" half-button half-pill ? also the primary CTA */
.cta-full {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 18px 24px;
    background: var(--coral); color: #fff;
    border: 0; border-radius: var(--r-pill);
    font-weight: var(--weight-bold); font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255, 90, 71, .35);
    transition: all var(--t-fast) var(--easing);
}
.cta-full:hover { background: var(--coral-deep); transform: translateY(-1px); }
.cta-full:active { transform: translateY(0); }

/* -------------------------------------------------------------------------
 * 6. Color blocks & sticker labels
 * ---------------------------------------------------------------------- */

.block {
    border-radius: var(--r-lg);
    padding: clamp(24px, 5vw, 56px);
}
.block--curved {
    /* curved-edge color block (yellow hero etc.) */
    position: relative;
    border-radius: var(--r-lg) var(--r-lg) 60% 16% / var(--r-lg) var(--r-lg) 8% 6%;
}

.sticker {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border-radius: var(--r-pill);
    font-size: .78rem;
    font-weight: var(--weight-bold);
    color: var(--ink);
    box-shadow: var(--shadow-md);
}
.sticker--ink   { background: var(--ink); color: #fff; }
.sticker--coral { background: var(--coral); color: #fff; }
.sticker--mint  { background: var(--mint-soft); color: var(--ink); }
.sticker--yellow{ background: var(--yellow-soft); color: var(--ink); }

/* Circular discount badge */
.discount-badge {
    position: absolute; top: 16px; right: 16px;
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--coral); color: #fff;
    display: grid; place-items: center;
    font-weight: var(--weight-black);
    font-size: 1.1rem;
    line-height: 1;
    text-align: center;
    box-shadow: var(--shadow-md);
    transform: rotate(-6deg);
}
.discount-badge small { font-size: .65rem; opacity: .9; display: block; margin-top: 2px; }

/* -------------------------------------------------------------------------
 * 7. Form controls
 * ---------------------------------------------------------------------- */

.field { display: block; }
.field + .field { margin-top: var(--s-4); }
.field-label {
    display: block;
    font-size: .82rem;
    font-weight: var(--weight-bold);
    color: var(--ink);
    margin-bottom: 6px;
}
.input, .select, .textarea {
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid var(--hairline-2);
    border-radius: var(--r-md);
    color: var(--ink);
    font-size: .95rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus {
    outline: 0; border-color: var(--coral);
    box-shadow: var(--ring-coral);
}
.textarea { resize: vertical; min-height: 140px; }

.input--lg { padding: 18px 18px; font-size: 1rem; }

.checkbox, .radio {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
    font-size: .92rem;
}
.checkbox input, .radio input {
    appearance: none;
    width: 22px; height: 22px;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all var(--t-fast) var(--easing);
    position: relative;
    flex: 0 0 22px;
}
.radio input { border-radius: 50%; }
.checkbox input:checked, .radio input:checked {
    background: var(--coral); border-color: var(--coral);
}
.checkbox input:checked::after {
    content: ''; position: absolute; left: 6px; top: 2px;
    width: 6px; height: 11px;
    border: solid #fff; border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.radio input:checked::after {
    content: ''; position: absolute; inset: 5px;
    border-radius: 50%; background: #fff;
}

/* Number stepper */
.stepper {
    display: inline-flex; align-items: center;
    border: 1.5px solid var(--hairline-2);
    border-radius: var(--r-pill);
    overflow: hidden;
    background: #fff;
}
.stepper button {
    background: transparent; border: 0; width: 40px; height: 44px;
    font-size: 1.1rem; cursor: pointer; color: var(--ink);
}
.stepper input {
    width: 40px; text-align: center; border: 0; background: transparent;
    font-weight: var(--weight-bold);
}
.stepper button:hover { background: var(--cream); }

/* -------------------------------------------------------------------------
 * 8. Header
 * ---------------------------------------------------------------------- */

.promo-bar {
    background: var(--coral); color: #fff;
    height: var(--promobar-h);
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: var(--weight-mid);
    overflow: hidden;
}
.promo-bar__inner {
    display: flex; gap: 32px; white-space: nowrap;
    animation: marquee 30s linear infinite;
}
.promo-bar__inner span { display: inline-flex; align-items: center; gap: 6px; }

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--hairline);
    transition: box-shadow var(--t-fast);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--header-h);
    gap: var(--s-4);
}
.site-header__left  { display: flex; align-items: center; gap: var(--s-4); justify-content: flex-start; }
.site-header__brand { display: flex; align-items: center; gap: var(--s-2); }
.site-header__right { display: flex; align-items: center; gap: var(--s-3); justify-content: flex-end; }

.brand-wordmark {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    color: var(--ink);
    font-size: 1.45rem;
    letter-spacing: -.02em;
    text-decoration: none;
}
.brand-wordmark::after { content: '.'; color: var(--coral); }

.primary-nav {
    display: flex; gap: var(--s-5);
    list-style: none; padding: 0; margin: 0;
}
.primary-nav a {
    font-weight: var(--weight-bold);
    font-size: .92rem;
    padding: 6px 4px;
    position: relative;
    color: var(--ink);
}
.primary-nav a::after {
    content: ''; position: absolute; left: 4px; right: 4px; bottom: 0;
    height: 2px; background: var(--coral);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-fast) var(--easing);
}
.primary-nav a:hover::after,
.primary-nav .current-menu-item > a::after { transform: scaleX(1); }

.icon-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 0; background: transparent;
    display: grid; place-items: center;
    cursor: pointer;
    color: var(--ink);
    transition: background var(--t-fast);
}
.icon-btn:hover { background: var(--cream); }
.icon-btn .icon { width: 22px; height: 22px; }

/* Theme toggle ? show only the icon matching the CURRENT state.
   Light mode (no data-theme or data-theme="") ? sun.  Dark mode ? moon. */
.theme-toggle .theme-icon { transition: opacity .18s ease, transform .25s ease; }
body:not([data-theme="dark"]) .theme-toggle .theme-icon--dark  { display: none; }
body[data-theme="dark"]       .theme-toggle .theme-icon--light { display: none; }

.cart-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px 10px 14px;
    background: var(--coral); color: #fff;
    border: 0; border-radius: var(--r-pill);
    font-weight: var(--weight-bold);
    font-size: .9rem;
    cursor: pointer;
    transition: background var(--t-fast);
    box-shadow: 0 6px 16px rgba(255, 90, 71, .35);
}
.cart-btn:hover { background: var(--coral-deep); color: #fff; }
.cart-btn .icon { width: 18px; height: 18px; }

.menu-toggle { display: none; }

/* -------------------------------------------------------------------------
 * 9. Mobile drawer & search overlay
 * ---------------------------------------------------------------------- */

.overlay {
    position: fixed; inset: 0;
    background: rgba(27, 42, 78, .45);
    backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-mid), visibility var(--t-mid);
    z-index: 80;
}
.overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
    position: fixed; top: 0; right: 0;
    height: 100vh; width: min(480px, 94vw);
    background: #fff;
    z-index: 90;
    transform: translateX(100%);
    transition: transform var(--t-mid) var(--easing);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-xl);
}
.drawer.is-open { transform: translateX(0); }
.drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.drawer--left.is-open { transform: translateX(0); }
.drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--hairline);
}
.drawer__head h2 { margin: 0; font-size: 1.3rem; }
.drawer__close {
    width: 38px; height: 38px;
    border: 0; background: var(--cream);
    border-radius: 50%; cursor: pointer;
    display: grid; place-items: center;
}
.drawer__body { flex: 1; overflow-y: auto; padding: 20px 28px; }
.drawer__foot { padding: 22px 28px 28px; border-top: 1px solid var(--hairline); }

.search-overlay {
    position: fixed; inset: 0;
    background: rgba(27, 42, 78, .55);
    backdrop-filter: blur(8px);
    z-index: 100;
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-mid);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh;
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-overlay__panel {
    width: min(720px, 92vw);
    background: #fff;
    border-radius: var(--r-lg);
    padding: 20px;
    box-shadow: var(--shadow-xl);
    transform: translateY(-10px);
    transition: transform var(--t-mid) var(--easing);
}
.search-overlay.is-open .search-overlay__panel { transform: translateY(0); }
.search-overlay form { position: relative; }
.search-overlay input {
    width: 100%;
    padding: 18px 56px 18px 20px;
    border: 0;
    background: var(--cream);
    border-radius: var(--r-md);
    font-size: 1.15rem;
}
.search-overlay form button {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    background: var(--coral); color: #fff; border: 0;
    width: 44px; height: 44px; border-radius: 50%;
    cursor: pointer;
    display: grid; place-items: center;
}
.search-suggestions { margin-top: 16px; }
.search-suggestions h5 { color: var(--ink-mute); font-size: .8rem; letter-spacing: .12em; }
.search-suggestions ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.search-suggestions li a {
    display: inline-block; padding: 6px 12px; background: var(--cream); border-radius: var(--r-pill);
    font-size: .85rem; font-weight: var(--weight-bold);
}

/* -------------------------------------------------------------------------
 * 10. Footer
 * ---------------------------------------------------------------------- */

.site-footer {
    background: var(--ink); color: #fff;
    padding-block: 80px 32px;
    margin-top: 80px;
}
.site-footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
}
.site-footer h4.footer-widget__title {
    color: #fff; font-size: .95rem;
    text-transform: uppercase; letter-spacing: .12em;
    margin-bottom: 16px;
}
.site-footer .site-footer__brand,
[data-theme="dark"] .site-footer .site-footer__brand {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    font-size: 2rem;
    color: #fff;
    margin-bottom: 12px;
}
/* The ::after dot is provided centrally by .brand-wordmark ? no duplicate rule needed */
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer a { color: rgba(255,255,255,.75); transition: color var(--t-fast); }
.site-footer a:hover { color: var(--coral); }
.site-footer__bottom {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: .85rem; color: rgba(255,255,255,.6);
}

/* Footer meta nav ? keep the legal/utility links on a single horizontal
   row (about ? Contact us ? journal ? Privacy ? Terms ? Cookies) on every
   viewport. Defaults to wrapping if there isn't enough width. */
.site-footer .footer-meta { margin: 0; }
.site-footer .footer-meta ul,
.site-footer .footer-meta-nav {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: center;
    justify-content: flex-end;
}
.site-footer .footer-meta-nav li { margin: 0; }
.site-footer .footer-meta-nav a { white-space: nowrap; }
.newsletter {
    display: flex; gap: 8px; margin-top: 12px;
}
.newsletter input {
    flex: 1; padding: 12px 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--r-pill);
    color: #fff;
}
.newsletter input::placeholder { color: rgba(255,255,255,.5); }
.newsletter button {
    border: 0; background: var(--coral); color: #fff;
    padding: 12px 20px; border-radius: var(--r-pill);
    font-weight: var(--weight-bold); cursor: pointer;
}
.social-row { display: flex; gap: 10px; margin-top: 16px; }
.social-row a {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.08);
    transition: background var(--t-fast);
}
.social-row a:hover { background: var(--coral); color: #fff; }
.payment-row {
    display: flex; gap: 8px; margin-top: 16px;
    flex-wrap: wrap;
}
.payment-row .pay {
    height: 28px; padding: 0 10px;
    background: rgba(255,255,255,.95);
    border-radius: 6px;
    color: var(--ink);
    display: inline-flex; align-items: center;
    font-size: .7rem; font-weight: var(--weight-bold);
    letter-spacing: .05em;
}

/* -------------------------------------------------------------------------
 * 11. Home page
 * ---------------------------------------------------------------------- */

/* Hero ? split with yellow curved block */
.hero {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 0;
    background: var(--cream);
}
.hero__copy {
    background: var(--yellow);
    padding: clamp(40px, 6vw, 80px);
    display: flex; flex-direction: column; justify-content: center;
    position: relative;
    border-radius: 0 0 60% 0;
    border-radius: 0 0 clamp(40px, 6vw, 90px) 0;
}
.hero__copy h1 {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    line-height: .98;
    margin-bottom: 24px;
}
.hero__copy p { font-size: 1.1rem; max-width: 38ch; margin-bottom: 28px; }
.hero__media {
    position: relative;
    background: var(--cream);
    padding: clamp(20px, 4vw, 40px);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.hero__media img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: var(--r-xl);
    transition: transform var(--t-slow) var(--easing);
}
.hero__media:hover img { transform: scale(1.02); }
.hero__media .sticker { position: absolute; }
.hero__media .sticker:nth-of-type(1) { top: 8%; left: 6%; }
.hero__media .sticker:nth-of-type(2) { top: 14%; right: 14%; transform: rotate(6deg); }
.hero__media .sticker:nth-of-type(3) { bottom: 14%; left: 30%; }

/* Trust marquee strip below hero */
.trust-strip {
    background: var(--mint);
    padding: 14px 0;
    overflow: hidden;
}
.trust-strip__inner {
    display: flex; gap: 56px; white-space: nowrap;
    animation: marquee 38s linear infinite;
    font-weight: var(--weight-bold);
}
.trust-strip__inner span {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .92rem;
    color: var(--ink);
}

/* Section heading helpers */
.section-title {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
}
.section-title h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
}
.section-title .filter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.section-title .more { font-weight: var(--weight-bold); color: var(--ink); }
.section-title .more:hover { color: var(--coral); }

/* Category grid ? 4 equal cards in a row, each horizontal (title left, image right) */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.cat-card {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    height: 180px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: clamp(18px, 2vw, 24px);
    text-decoration: none;
    color: var(--ink);
    transition: transform var(--t-mid) var(--easing);
}
.cat-card::before {
    content: ''; position: absolute; inset: 0;
    z-index: 0;
    transition: transform var(--t-slow) var(--easing);
}
.cat-card > * { position: relative; z-index: 1; }
.cat-card:hover { transform: translateY(-3px); color: var(--ink); }
.cat-card:hover::before { transform: scale(1.04); }
.cat-card--yellow::before   { background: var(--yellow); }
.cat-card--coral::before    { background: var(--coral); }
.cat-card--coral, .cat-card--coral .cat-card__title { color: #fff; }
.cat-card--mint::before     { background: var(--mint); }
.cat-card--lavender::before { background: var(--lavender); }
.cat-card--pink::before     { background: var(--pink); }
.cat-card__title {
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: var(--weight-black);
    margin: 0 0 4px;
    line-height: 1.05;
}
.cat-card__more {
    font-weight: var(--weight-bold);
    font-size: .92rem;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.cat-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
    pointer-events: none;
    transition: transform var(--t-slow) var(--easing);
    /* The brand category PNGs are flat RGB (no alpha), so their white
       background would otherwise sit as an awkward white rectangle on
       top of the colored card. multiply blends the white into the tint
       and lets the product silhouette read on the colored canvas. */
    mix-blend-mode: multiply;
}
.cat-card:hover .cat-card__img { transform: translate(-4px, -4px) rotate(-2deg); }

/* Product grid (used on home + shop) */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }
.product-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* (Horizontal product card variant moved below the base .product-card rules
   to ensure cascade order makes it win ? see line ~1100 area.) */

/* Blog teaser cards on home */
.blog-teaser-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

/* -------------------------------------------------------------------------
 * 12. Shop / category listing
 * ---------------------------------------------------------------------- */

.shop-banner {
    background: var(--yellow);
    padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 56px) clamp(48px, 7vw, 80px);
    margin: 0 0 28px;
    position: relative;
    text-align: center;
    /* Wavy bottom edge ? clip out little semi-circles to create the scalloped look. */
    --wave-h: 18px;
    -webkit-mask:
        radial-gradient(circle 12px at 30px 100%, transparent 98%, #000 100%) bottom left/60px var(--wave-h) repeat-x,
        linear-gradient(#000, #000) top/100% calc(100% - var(--wave-h)) no-repeat;
            mask:
        radial-gradient(circle 12px at 30px 100%, transparent 98%, #000 100%) bottom left/60px var(--wave-h) repeat-x,
        linear-gradient(#000, #000) top/100% calc(100% - var(--wave-h)) no-repeat;
}
.shop-banner--lavender { background: var(--lavender); }
.shop-banner--mint     { background: var(--mint); }
.shop-banner--coral    { background: var(--coral); color: #fff; }
.shop-banner--coral h1, .shop-banner--coral p { color: #fff; }
.shop-banner h1 {
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    margin: 0 0 6px;
    line-height: 1.05;
}
.shop-banner p { font-size: 1.05rem; color: var(--ink); margin: 0; }

.filter-chip-row {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 24px;
}

.shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
}
.shop-sidebar {
    position: sticky; top: calc(var(--header-h) + 24px);
    align-self: start;
    background: var(--mint-soft);
    border-radius: var(--r-lg);
    padding: 24px;
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
}
.shop-sidebar h3 { margin: 0 0 16px; font-size: 1.05rem; }
.filter-group + .filter-group { border-top: 1px solid rgba(27, 42, 78, .08); margin-top: 16px; padding-top: 16px; }
.filter-group h4 {
    display: flex; justify-content: space-between; align-items: center;
    margin: 0 0 12px; cursor: pointer;
    font-size: .92rem; text-transform: none; letter-spacing: 0;
}
.filter-group h4::after {
    content: ''; width: 8px; height: 8px;
    border: solid var(--ink); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform var(--t-fast);
}
.filter-group.is-collapsed h4::after { transform: rotate(-45deg); }
.filter-group__list { display: flex; flex-direction: column; gap: 8px; }
.filter-group.is-collapsed .filter-group__list { display: none; }
.color-row { display: flex; gap: 10px; flex-wrap: wrap; }
.color-row .color-swatch {
    width: 26px; height: 26px; border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    transition: transform var(--t-fast), border-color var(--t-fast);
}
.color-row .color-swatch:hover { transform: scale(1.1); }
.color-row .color-swatch.is-active { border-color: var(--ink); }

.shop-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
    gap: 12px; flex-wrap: wrap;
}
.shop-toolbar .count { color: var(--ink-soft); font-size: .9rem; }
.shop-toolbar .sort {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: var(--r-pill);
    background: #fff; font-weight: var(--weight-bold); font-size: .85rem;
}
.shop-toolbar .view-toggle { display: inline-flex; gap: 4px; }
.shop-toolbar .view-toggle button {
    width: 36px; height: 36px; border-radius: var(--r-sm);
    background: #fff; border: 1.5px solid var(--hairline-2);
    cursor: pointer; display: grid; place-items: center;
}
.shop-toolbar .view-toggle button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Floating preview-pages nav (only used by the static preview HTML files) */
.preview-pages-nav {
    position: fixed; right: 16px; bottom: 16px; z-index: 999;
    background: #1B2A4E; color: #fff;
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    font-size: .82rem;
    display: flex; align-items: center; gap: 8px;
    max-width: calc(100vw - 32px);
    overflow-x: auto;
}
.preview-pages-nav strong { color: #FFD23F; margin-right: 4px; }
.preview-pages-nav a {
    color: #fff; text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    white-space: nowrap;
}
.preview-pages-nav a:hover { background: rgba(255,255,255,.18); color: #fff; }
.preview-pages-nav a.is-active { background: var(--coral); color: #fff; }

/* Pagination */
.pagination, .woocommerce-pagination ul.page-numbers {
    display: flex; gap: 8px; justify-content: center; align-items: center;
    margin: 40px 0 0;
    list-style: none; padding: 0;
}
.pagination a, .pagination span, .pagination button,
.woocommerce-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 14px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--ink); color: #fff;
    font-family: inherit;
    font-weight: var(--weight-bold); font-size: .9rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.pagination a:hover, .pagination button:hover:not([disabled]):not(.is-current),
.woocommerce-pagination a:hover { background: var(--coral); color: #fff; transform: translateY(-1px); }
.pagination .current, .pagination .is-current, .woocommerce-pagination .current { background: var(--coral); color: #fff; cursor: default; }
.pagination .dots, .woocommerce-pagination .dots { background: transparent; color: var(--ink); cursor: default; }
.pagination button[disabled] { opacity: .35; cursor: not-allowed; transform: none; }

/* -------------------------------------------------------------------------
 * 13. Product card
 * ---------------------------------------------------------------------- */

.product-card {
    display: flex; flex-direction: column;
    position: relative;
    background: transparent;
}
.product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--yellow-soft);
    display: grid; place-items: center;
    transition: box-shadow var(--t-mid);
}
.product-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--t-slow) var(--easing), opacity var(--t-mid);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__media .img-hover {
    position: absolute; inset: 0; opacity: 0;
}
.product-card:hover .product-card__media .img-hover { opacity: 1; }

.product-card__stickers { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.product-card__wishlist {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    border: 0; background: #fff;
    display: grid; place-items: center;
    box-shadow: var(--shadow-sm);
    cursor: pointer; color: var(--ink);
    transition: all var(--t-fast);
}
.product-card__wishlist:hover { background: var(--coral); color: #fff; }
.product-card__wishlist.is-active { background: var(--coral); color: #fff; }
.product-card__wishlist .icon { width: 18px; height: 18px; }

.product-card__quickview {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) translateY(8px);
    background: var(--ink); color: #fff;
    border: 0; border-radius: var(--r-pill);
    padding: 10px 18px;
    font-weight: var(--weight-bold);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--t-mid), transform var(--t-mid) var(--easing);
    z-index: 3;
}
.product-card:hover .product-card__quickview {
    opacity: 1; transform: translate(-50%, -50%) translateY(0);
}

.product-card__add {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    background: var(--coral); color: #fff;
    border: 0; border-radius: var(--r-pill);
    padding: 8px 14px;
    font-weight: var(--weight-bold);
    font-size: .85rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    display: inline-flex; align-items: center; gap: 6px;
    transition: background var(--t-fast);
}
.product-card__add:hover { background: var(--coral-deep); color: #fff; }

.product-card__body { padding: 12px 4px 4px; }
.product-card__title {
    font-size: 1rem;
    font-weight: var(--weight-bold);
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card__price {
    font-weight: var(--weight-bold);
    color: var(--ink);
    margin-bottom: 4px;
}
.product-card__price del { color: var(--ink-mute); font-weight: var(--weight-reg); margin-left: 6px; }
.product-card__rating {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .82rem; color: var(--ink-soft);
}

/* Star rating */
.stars {
    display: inline-flex; gap: 1px;
    --star-fill: #FFB400;
}
.stars svg { width: 14px; height: 14px; color: var(--star-fill); }

/* Tinted card variants */
.product-card--tint .product-card__media { background: var(--yellow-soft); }
.product-card--tint-mint     .product-card__media { background: var(--mint-soft); }
.product-card--tint-lavender .product-card__media { background: var(--lavender-soft); }
.product-card--tint-pink     .product-card__media { background: var(--pink-soft); }
.product-card--tint-yellow   .product-card__media { background: var(--yellow-soft); }
.product-card--tint-coral    .product-card__media { background: var(--pink-soft); }

/* ---- Shop-grid product card variant
   - Tinted image area on top
   - White info area below with title, then (price + + Add) on the same row, then rating */
.product-card.product-card--shop {
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(27, 42, 78, .04);
}
.product-card.product-card--shop .product-card__media {
    border-radius: 0;
    aspect-ratio: 1 / 1;
    padding: 18px;
}
.product-card.product-card--shop .product-card__media img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.product-card.product-card--shop .product-card__body {
    padding: 12px 16px 16px;
    background: #fff;
}
.product-card.product-card--shop .product-card__title {
    font-size: .95rem;
    -webkit-line-clamp: 1;
    margin: 0 0 6px;
}
.product-card.product-card--shop .product-card__price-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 4px;
}
.product-card.product-card--shop .product-card__price {
    font-size: 1.05rem;
    font-weight: var(--weight-black);
    margin: 0;
}
.product-card.product-card--shop .product-card__add {
    position: static;
    background: var(--coral); color: #fff;
    border-radius: var(--r-pill);
    padding: 6px 14px;
    font-weight: var(--weight-bold);
    font-size: .82rem;
    box-shadow: var(--shadow-sm);
}
.product-card.product-card--shop .product-card__rating {
    margin: 0;
    font-size: .78rem;
}
/* Sticker on shop card ? small pill, slightly translucent white */
.product-card.product-card--shop .product-card__stickers .sticker {
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow-sm);
    font-size: .76rem;
    padding: 5px 10px;
}

/* ---- Horizontal "favourites" product card variant
   Selectors chain .product-card so they outrank the base flex-column rules. */
.product-card.product-card--horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--yellow-soft);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    align-items: stretch;
    min-height: 200px;
}
.product-card.product-card--horizontal.product-card--tint-yellow   { background: var(--yellow-soft); }
.product-card.product-card--horizontal.product-card--tint-mint     { background: var(--mint-soft); }
.product-card.product-card--horizontal.product-card--tint-lavender { background: var(--lavender-soft); }
.product-card.product-card--horizontal.product-card--tint-pink     { background: var(--pink-soft); }

/* Each "favourites" card's image PNG IS the entire tile (single yellow
   background with the product hero centred). So:
     ? media must stretch to fill the cell (so the PNG covers the column)
     ? media stays transparent (the PNG itself paints the tint, no second
       layer from .product-card--tint-X .product-card__media)
     ? image uses object-fit:cover so it bleeds to the column edges; that
       way the wishlist heart at top:10/right:10 sits on the image, not in
       a strip of bare card-tint padding (matches the static demo). */
.product-card.product-card--horizontal .product-card__media-link {
    display: block;
    width: 100%;
    height: 100%;
}
.product-card.product-card--horizontal .product-card__media {
    background: transparent !important;
    border-radius: 0;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
}
.product-card.product-card--horizontal .product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-card.product-card--horizontal .product-card__body {
    padding: 16px 16px 16px 14px;
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.product-card.product-card--horizontal .product-card__title {
    font-size: 1rem;
    font-weight: var(--weight-black);
    margin: 0 0 6px;
    line-height: 1.2;
    -webkit-line-clamp: 3;
}
.product-card.product-card--horizontal .product-card__price {
    font-size: 1.1rem;
    font-weight: var(--weight-black);
    margin-bottom: 4px;
}
.product-card.product-card--horizontal .product-card__rating {
    margin-bottom: 8px;
    font-size: .78rem;
}
.product-card.product-card--horizontal .product-card__add {
    position: static;
    align-self: flex-start;
    margin-top: 4px;
    background: var(--coral); color: #fff;
    border-radius: var(--r-pill);
    padding: 7px 16px;
    font-weight: var(--weight-bold);
    font-size: .85rem;
    box-shadow: var(--shadow-sm);
}
.product-card.product-card--horizontal .product-card__wishlist {
    width: 30px; height: 30px;
    top: 10px; right: 10px;
}
.product-card.product-card--horizontal .product-card__wishlist svg {
    width: 14px; height: 14px;
}
.product-card.product-card--horizontal .product-card__quickview { display: none; }

/* -------------------------------------------------------------------------
 * 14. Single product page
 * ---------------------------------------------------------------------- */

.breadcrumb {
    font-size: .85rem; color: var(--ink-mute);
    padding: 16px 0 4px;
}
.breadcrumb a { color: var(--ink-mute); }
.breadcrumb a:hover { color: var(--coral); }
.breadcrumb .sep { padding: 0 6px; color: var(--ink-mute); }

.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    padding: 20px 0 64px;
}
.product-gallery { display: grid; grid-template-columns: 80px 1fr; gap: 16px; }
.product-gallery__thumbs {
    display: flex; flex-direction: column; gap: 10px;
}
.product-gallery__thumbs li { list-style: none; }
.product-gallery__thumbs img {
    width: 80px; height: 80px; object-fit: cover;
    border-radius: var(--r-md);
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--t-fast);
}
.product-gallery__thumbs img.is-active,
.product-gallery__thumbs img:hover { border-color: var(--ink); }
.product-gallery__main {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--yellow);
    aspect-ratio: 1 / 1;
}
.product-gallery__main img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.product-gallery__main .discount-badge { z-index: 3; }
.product-gallery__main .sticker--ink {
    position: absolute; top: 16px; left: 16px; z-index: 3;
}
.product-gallery__main .sticker--mint {
    position: absolute; bottom: 16px; right: 16px;
}

.product-info { padding-top: 12px; }
.product-info .product-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin: 8px 0 12px;
}
.product-info .product-rating-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.verified-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    background: var(--mint-soft);
    color: var(--green);
    border-radius: var(--r-pill);
    font-size: .75rem; font-weight: var(--weight-bold);
}
.product-price-row {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.product-price {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: var(--weight-black);
    color: var(--ink);
}
.product-price-old { color: var(--ink-mute); text-decoration: line-through; font-size: 1.1rem; }
.save-pill {
    background: var(--coral); color: #fff;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-size: .78rem;
    font-weight: var(--weight-bold);
}

/* Countdown banner */
.countdown-banner {
    background: var(--yellow);
    border-radius: var(--r-md);
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
}
.countdown-banner .label {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: var(--weight-bold);
    color: var(--ink);
    font-size: .9rem;
}
.countdown-digits { display: flex; gap: 8px; }
.countdown-digits .unit {
    text-align: center;
}
.countdown-digits .unit > span {
    display: inline-block; min-width: 44px; padding: 8px 6px;
    background: #fff; border-radius: var(--r-sm);
    font-weight: var(--weight-black); font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}
.countdown-digits .unit small {
    display: block;
    font-size: .65rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-soft);
    margin-top: 4px;
}

/* Low-stock urgency bar */
.stock-bar {
    background: var(--pink-soft);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin-bottom: 14px;
}
.stock-bar p { margin: 0 0 8px; font-weight: var(--weight-bold); font-size: .85rem; }
.stock-bar__track {
    height: 8px; border-radius: 4px;
    background: #fff;
    overflow: hidden;
}
.stock-bar__fill {
    height: 100%; background: var(--coral);
    width: var(--fill, 70%);
    border-radius: 4px;
    transition: width var(--t-slow);
}

/* Social proof pill */
.social-proof {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px 10px 10px;
    background: var(--mint-soft);
    border-radius: var(--r-pill);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    font-size: .85rem;
    color: var(--ink);
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--t-mid), transform var(--t-mid);
}
.social-proof.is-visible { opacity: 1; transform: translateY(0); }
.social-proof img {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
}
.social-proof button {
    margin-left: auto; background: transparent; border: 0; cursor: pointer;
    color: var(--ink-mute); font-size: 1.1rem;
}

/* Variant swatches & sizes */
.variant-row { margin: 16px 0; }
.variant-row .field-label { margin-bottom: 8px; }
.swatch-row { display: flex; gap: 10px; }
.swatch {
    width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.swatch:hover { transform: scale(1.05); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--ink); }
.size-row { display: flex; gap: 8px; flex-wrap: wrap; }
.size-pill {
    min-width: 56px;
    padding: 10px 16px;
    border: 1.5px solid var(--hairline-2);
    background: #fff; border-radius: var(--r-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: all var(--t-fast);
}
.size-pill:hover { border-color: var(--ink); }
.size-pill.is-active { background: #fff; border-color: var(--coral); color: var(--coral); }

/* Add to bag row */
.atc-row {
    display: flex; gap: 12px; align-items: center;
    margin: 20px 0 12px;
}
.atc-row .stepper { flex: 0 0 auto; }
.atc-row .cta-full { flex: 1; }

.product-secondary-row { display: flex; gap: 12px; margin-bottom: 20px; }
.product-secondary-row .btn { flex: 1; }

/* Payment & trust */
.payment-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--cream);
    border-radius: var(--r-md);
    margin-bottom: 16px;
}
.payment-block .pay-badges { justify-content: center; }
.payment-block .payment-block-label { width: 100%; }
.payment-block .pay {
    height: 26px; padding: 0 8px;
    border: 1px solid var(--hairline-2);
    background: #fff; border-radius: 6px;
    font-size: .65rem; font-weight: var(--weight-bold);
    display: inline-flex; align-items: center;
    letter-spacing: .05em;
}

/* Cards declared as navigatable via data-card-link get a pointer affordance + tiny lift */
[data-card-link] { cursor: pointer; }
[data-card-link]:hover .product-card__title { color: var(--coral); }
.review-card[data-card-link] { transition: transform .25s ease, box-shadow .25s ease; }
.review-card[data-card-link]:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 23, 42, .08); }

/* "Real homes" review wall ? meta row + small rating pill in section header */
.reviews-meta {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.rating-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: var(--yellow-soft);
    border-radius: var(--r-pill);
    font-size: .82rem;
    color: var(--ink);
    font-weight: var(--weight-mid);
    letter-spacing: .2px;
}
.rating-pill strong { font-weight: var(--weight-bold); }

/* "From the journal" home strip ? 3-column responsive grid of article-card */
.journal-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}
.journal-strip .article-card { text-decoration: none; color: inherit; }
.journal-strip .article-card .article-card__media { aspect-ratio: 5 / 3; }

@media (max-width: 960px) {
    .reviews-grid { grid-template-columns: 1fr; }
    .journal-strip { grid-template-columns: 1fr; }
    .reviews-meta { gap: 8px; font-size: .9rem; }
}
@media (min-width: 961px) and (max-width: 1100px) {
    .journal-strip { gap: 18px; }
}

/* Shop grid filter ? cards that don't match the active chip slide out;
   when the grid is re-filtered or paginated, visible cards replay a staggered fade-in. */
.product-card { transition: opacity .25s ease, transform .25s ease; }
.product-card.is-filtered-out { display: none; }
[data-product-grid].is-refiltering > .product-card:not(.is-filtered-out) {
    animation: cardReveal .5s cubic-bezier(.25,.85,.4,1) backwards;
}
[data-product-grid].is-refiltering > .product-card:not(.is-filtered-out):nth-child(1) { animation-delay: .03s; }
[data-product-grid].is-refiltering > .product-card:not(.is-filtered-out):nth-child(2) { animation-delay: .06s; }
[data-product-grid].is-refiltering > .product-card:not(.is-filtered-out):nth-child(3) { animation-delay: .09s; }
[data-product-grid].is-refiltering > .product-card:not(.is-filtered-out):nth-child(4) { animation-delay: .12s; }
[data-product-grid].is-refiltering > .product-card:not(.is-filtered-out):nth-child(5) { animation-delay: .15s; }
[data-product-grid].is-refiltering > .product-card:not(.is-filtered-out):nth-child(6) { animation-delay: .18s; }
@keyframes cardReveal {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Buy now ? full-width contrast CTA, sits between Add-to-bag and Wishlist/Share */
.btn-buy-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 10px 0 12px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.btn-buy-now svg {
    fill: var(--yellow);
    stroke: var(--yellow);
    transition: transform .25s ease;
}
.btn-buy-now:hover svg { transform: translateX(2px) scale(1.08); }
/* Subtle shine sweep on hover for the "fast checkout" feel */
.btn-buy-now::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .65s ease;
    pointer-events: none;
}
.btn-buy-now:hover::after { transform: translateX(120%); }

/* "Pay securely with" label above payment badge rows */
.payment-block-label {
    display: flex; align-items: center;
    gap: 12px;
    font-size: .72rem;
    font-weight: var(--weight-bold);
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 0 0 10px;
}
.payment-block-label::before,
.payment-block-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--hairline);
}
.payment-block .payment-block-label,
.safe-checkout .payment-block-label {
    justify-content: center; text-align: center;
}

/* "Guaranteed Safe And Secure Checkout" trust block */
.safe-checkout {
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 18px 20px 14px;
    margin-top: 18px;
    text-align: center;
}
.safe-checkout__row {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}
.safe-checkout__row--certs { gap: 12px; margin-top: 4px; }
.cert-badge {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 4px;
    background: #fff;
    border-radius: 6px;
}
.cert-badge img {
    display: block;
    max-height: 44px;
    max-width: 110px;
    width: auto;
    object-fit: contain;
}
.safe-checkout__label {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
}
.safe-checkout__label svg { width: 14px; height: 14px; }

/* Static-preview merchant-supplied cert badge slot placeholders.
   In WordPress these only render when a real file is dropped at the predictable path. */
.cert-slot {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; min-width: 96px; padding: 6px 10px;
    background: var(--cream);
    border: 1.5px dashed var(--hairline-2);
    border-radius: 6px;
    color: var(--ink-soft);
    font-size: .65rem; font-weight: 600;
    text-align: center; line-height: 1.2;
}

/* Branded payment indicator chips (white card + colored content) */
.pay-badges {
    display: inline-flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
}
.pay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(20, 24, 32, .06);
    background-color: #fff;
    transition: transform .15s ease;
    overflow: hidden;
}
.pay-badge:hover { transform: translateY(-2px); }
/* Logos display at fixed *height* with auto width so each retains its own
   brand aspect ratio (PayPal wide, Visa square-ish, Klarna pill, etc.).
   This is the same convention real-world payment-method rows use on
   Shopify, Stripe, etc. — visually every brand "looks the same size"
   because they all share an equal logo height. */
.pay-badge img,
.pay-badge svg {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
}
.pay-badges--sm .pay-badge { height: 25px; padding: 3px 7px; }
.payment-row .pay-badge { height: 30px; padding: 4px 8px; }
/* Klarna's pink pill *is* the brand mark — drop the redundant white
   card behind it so it reads as the same logo used in the payment
   method tile above. */
.pay-badge--klarna {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}
.pay-badge--klarna img,
.pay-badge--klarna svg { height: 28px; }
.secure-row {
    display: flex; align-items: center; gap: 6px;
    font-size: .82rem; color: var(--ink-soft);
    margin-bottom: 16px;
}
/* When the "Secure checkout ? SSL encrypted" row sits directly under the centered
   payment badges block on the PDP, mirror that centering instead of left-aligning. */
.payment-block + .secure-row { justify-content: center; text-align: center; }
.trust-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin-bottom: 20px;
}
.trust-tile {
    text-align: center; padding: 14px 8px;
    border-radius: var(--r-md);
    font-size: .78rem; font-weight: var(--weight-bold);
    color: var(--ink);
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* Render both the explicitly-classed `.icon` SVG (mismohola_icon helper)
   AND any bare <svg> inside a trust tile (e.g. when the helper is called
   without a class) as a centered block so the demo's stacked layout is
   preserved no matter how the PHP renders the markup. */
.trust-tile .icon,
.trust-tile > svg {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    flex: 0 0 auto;
}
.trust-tile > span { display: block; }
.trust-tile--yellow   { background: var(--yellow-soft); }
.trust-tile--mint     { background: var(--mint-soft); }
.trust-tile--lavender { background: var(--lavender-soft); }
.trust-tile--pink     { background: var(--pink-soft); }

/* Accordion */
.accordion { border-top: 1px solid var(--hairline); }
.accordion__item { border-bottom: 1px solid var(--hairline); }
.accordion__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; cursor: pointer;
    font-weight: var(--weight-bold);
    background: transparent; border: 0; width: 100%; text-align: left;
}
.accordion__head .chev {
    width: 8px; height: 8px;
    border: solid var(--ink); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform var(--t-fast);
}
.accordion__item.is-open .accordion__head .chev { transform: rotate(-135deg); }
.accordion__body { max-height: 0; overflow: hidden; transition: max-height var(--t-mid); }
.accordion__body-inner { padding: 0 0 16px; color: var(--ink-soft); }
/* Generic accordion bodies (Details / Materials / Shipping) are short
   and 800px was plenty. The Reviews accordion however contains 5 paged
   reviews + the pagination strip + the "Add a review" form, which can
   easily push past 3000px. Set a very generous ceiling so nothing gets
   clipped while still allowing the open/close transition to animate. */
.accordion__item.is-open .accordion__body { max-height: 9999px; }

/* AJAX review pagination — the reviews block dims while the next page
   is being fetched so the buyer gets visual feedback that something is
   happening (added/removed by JS in main.js initReviewsAjaxPagination). */
#reviews.is-loading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* Reviews row */
.reviews-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    margin-top: 24px;
}
.review-card {
    border-radius: var(--r-md);
    padding: 18px;
    display: flex; flex-direction: column; gap: 10px;
    font-size: .9rem;
}
.review-card--yellow   { background: var(--yellow-soft); }
.review-card--mint     { background: var(--mint-soft); }
.review-card--lavender { background: var(--lavender-soft); }
.review-card--pink     { background: var(--pink-soft); }
.review-card__head { display: flex; align-items: center; justify-content: space-between; }
.review-card__quote { font-weight: var(--weight-mid); color: var(--ink); }
.review-card__author { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: .82rem; }
.review-card__verified {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    background: var(--mint);
    color: var(--ink);
    border-radius: var(--r-pill);
    font-size: .68rem; font-weight: var(--weight-bold);
}
/* Two-column review card variant: text on left, lifestyle photo on right */
.review-card--row {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 12px;
    padding: 14px;
    align-items: stretch;
}
.review-card--row .review-card__body {
    display: flex; flex-direction: column; gap: 8px;
    padding: 4px 2px;
}
.review-card--row .review-card__photo {
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.review-card--row .review-card__photo img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}

/* Related "Pair it with" */
.related-row {
    margin-top: 56px;
    background: var(--lavender-soft);
    border-radius: var(--r-lg);
    padding: 32px;
}
.related-row h3 { margin: 0 0 20px; }

/* Mobile sticky CTA bar */
.mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: none;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
    background: #fff;
    border-top: 1px solid var(--hairline);
    gap: 10px; align-items: center;
    box-shadow: 0 -6px 20px rgba(0,0,0,.08);
}
.mobile-cta .icon-btn {
    border: 1.5px solid var(--hairline-2);
    border-radius: var(--r-pill);
    width: 44px; height: 44px;
}
.mobile-cta .cta-full { flex: 1; padding: 14px; }

/* -------------------------------------------------------------------------
 * 15. Mini cart drawer
 * ---------------------------------------------------------------------- */

.minicart {}
.minicart__item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--hairline);
}
.minicart__item img {
    width: 72px; height: 72px; object-fit: cover;
    border-radius: var(--r-md);
    background: var(--cream);
}
.minicart__item .body h5 {
    font-size: .92rem;
    margin: 0 0 6px;
    color: var(--ink);
    font-weight: var(--weight-bold);
    line-height: 1.35;
    /* Keep long product names from blowing out the row height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.minicart__item .body h5,
.minicart__item .body h5 a,
.minicart__item .body h5 a:visited {
    color: var(--ink);
}
.minicart__item .body h5 a:hover { color: var(--coral); }
.minicart__item .body .meta { font-size: .78rem; color: var(--ink-mute); margin-bottom: 6px; }
.minicart__item .price { font-weight: var(--weight-bold); white-space: nowrap; }
.minicart__item .stepper { transform: scale(.85); transform-origin: left; margin-top: 4px; }
.minicart__item .remove { background: transparent; border: 0; color: var(--ink-mute); font-size: .8rem; cursor: pointer; text-decoration: underline; padding: 0; margin-left: 6px; }
.minicart__item .remove:hover { color: var(--coral); }

/* Lock / icons embedded inside the coral checkout CTA need an explicit
   size ? otherwise the SVG inherits its viewBox size and looks oversized
   or off-vertical-center next to the label. */
.cta-full svg,
.cta-full .cta-full__icon,
.cta-full__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-left: 8px;
    color: currentColor;
}
.minicart .promo-row, .minicart .gift-row {
    margin: 20px 0;
    padding: 14px 16px;
    border-radius: var(--r-md);
    font-weight: var(--weight-bold);
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
}
.minicart .promo-row { background: var(--mint-soft); }
.minicart .gift-row  { background: var(--yellow-soft); }
.minicart__subtotal {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 1.2rem; font-weight: var(--weight-black);
    margin: 22px 0 6px;
}
.minicart .note { font-size: .78rem; color: var(--ink-mute); margin-bottom: 4px; }
.minicart__foot .cta-full { margin-top: 14px; }
.minicart__foot .view-bag { display: block; text-align: center; margin-top: 14px; text-decoration: underline; font-weight: var(--weight-bold); }

/* Slightly relax the CTA inside the cart drawer (vs the chunkier PDP add
   to bag). Demo button feels about 16px padding tall, not the global
   18px from .cta-full. Also lock the text colour to fully-opaque white
   so the box-shadow halo doesn't visually wash the label out. */
.drawer__foot .cta-full {
    padding: 16px 24px;
    font-size: 1rem;
    color: #fff;
    text-shadow: none;
    opacity: 1;
}
.drawer__foot .cta-full span,
.drawer__foot .cta-full {
    color: #fff;
}

/* -------------------------------------------------------------------------
 * 16. Cart page & checkout
 * ---------------------------------------------------------------------- */

.checkout-progress {
    display: flex; align-items: center; gap: 8px;
    margin: 24px 0 32px;
    justify-content: center;
}
.checkout-step {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1.5px solid var(--hairline-2);
    font-weight: var(--weight-bold);
    color: var(--ink-mute);
}
.checkout-step .num {
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--hairline-2); color: #fff;
    font-size: .78rem;
}
.checkout-step.is-done   { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.checkout-step.is-done .num { background: var(--green); }
.checkout-step.is-active { background: var(--coral); color: #fff; border-color: var(--coral); }
.checkout-step.is-active .num { background: rgba(255,255,255,.3); }
.checkout-divider { width: 24px; height: 2px; background: var(--hairline-2); }

.checkout-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
}
.checkout-card {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 24px;
    border: 1px solid var(--hairline);
}
.checkout-card + .checkout-card { margin-top: 16px; }
.checkout-card h3 { margin: 0 0 14px; font-size: 1.05rem; }
.checkout-card--tint { background: var(--yellow-soft); border-color: transparent; }
.checkout-card .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-card .grid-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }

/* On the checkout page, hide the theme's big <h1 class="entry-title">Checkout</h1>
   and Woo's inline "Have a coupon?" / login forms ? we render our own neat
   checkout-topbar + a dedicated promo-code row inside the order summary. */
.woocommerce-checkout .entry-header,
.woocommerce-checkout .page-header,
body.woocommerce-checkout .site-main > header.entry-header,
body.woocommerce-checkout .site-main > h1,
body.woocommerce-checkout .site-main > .page-header,
body.woocommerce-checkout .page-hero,
body.woocommerce-checkout .page-hero__inner,
body.woocommerce-checkout main h1.entry-title,
body.woocommerce-checkout main > h1:first-of-type,
.woocommerce-checkout .woocommerce > .woocommerce-info:first-of-type,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-coupon,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-login { display: none !important; }

/* The first-order discount banner stays ? it's our own component. */

/* Wrapper around the checkout grid ? controls page-level breathing room
   above the footer. Replaces the inline padding-block style so the
   mobile breakpoint below can tighten it without specificity wars. */
.checkout-page-wrap { padding-block: 8px 56px; }

/* Top bar above the checkout grid ? page title + secure badge. */
.checkout-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0 8px;
}
.checkout-topbar h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: var(--weight-bold);
}
.checkout-topbar__total { color: var(--green); font-weight: var(--weight-black); }
.checkout-topbar__secure { margin: 0; font-weight: 700; color: var(--ink); font-size: .9rem; }

/* SSL trust line under the Place-order button. Demo shows this as a
   single-line caption; on narrow viewports we let it wrap naturally
   instead of forcing horizontal overflow. */
.checkout-trust-line {
    text-align: center;
    margin: 14px 0 0;
    color: var(--ink-soft);
    font-size: clamp(.66rem, .95vw, .82rem);
    white-space: nowrap;
    overflow: hidden;
}
.checkout-trust-line svg,
.checkout-trust-line i { vertical-align: -.18em; margin-right: 4px; }
@media (max-width: 720px) {
    .checkout-trust-line { white-space: normal; font-size: .78rem; overflow: visible; }
}

/* ---- WooCommerce default field re-skin (inside .mismohola-checkout)
       Woo renders <p class="form-row"><label/><span class="woocommerce-input-wrapper"><input class="input-text"></span></p>.
       We make those look like the demo's flat .input rounded fields. */
.mismohola-checkout .form-row {
    margin: 0 0 12px;
    padding: 0;
    display: block;
    width: 100%;
}
.mismohola-checkout .form-row label,
.mismohola-checkout .form-row .label_class,
.mismohola-checkout .form-row > label[for] {
    display: none;
}
.mismohola-checkout .form-row label.checkbox,
.mismohola-checkout .form-row .checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: var(--ink-soft);
}
.mismohola-checkout .form-row .is-hidden { display: none !important; }
.mismohola-checkout .woocommerce-input-wrapper { display: block; width: 100%; }
.mismohola-checkout .input-text,
.mismohola-checkout select,
.mismohola-checkout textarea,
.mismohola-checkout .select2-container--default .select2-selection--single {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1.5px solid var(--hairline-2);
    border-radius: var(--r-md);
    font: inherit;
    font-size: .95rem;
    color: var(--ink);
    background: #fff;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    min-height: 48px;
    line-height: 1.2;
}
.mismohola-checkout textarea { min-height: 84px; resize: vertical; }
.mismohola-checkout .input-text:focus,
.mismohola-checkout select:focus,
.mismohola-checkout textarea:focus { border-color: var(--coral); box-shadow: var(--ring-coral); outline: none; }
.mismohola-checkout .select2-container--default .select2-selection--single { padding: 10px 16px; height: 48px; display: flex; align-items: center; }
.mismohola-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.2; color: var(--ink); }
.mismohola-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }

/* Two-column rows for first/last name etc. */
.mismohola-checkout .form-row-first { width: calc(50% - 6px); float: left; margin-right: 12px; }
.mismohola-checkout .form-row-last  { width: calc(50% - 6px); float: left; }
.mismohola-checkout .form-row.form-row-first + .form-row.form-row-last { clear: none; }
.mismohola-checkout .form-row-wide { width: 100%; clear: both; }
.mismohola-checkout .woocommerce-billing-fields,
.mismohola-checkout .woocommerce-shipping-fields,
.mismohola-checkout .woocommerce-additional-fields { overflow: hidden; }
.mismohola-checkout .woocommerce-billing-fields > h3,
.mismohola-checkout .woocommerce-shipping-fields > h3,
.mismohola-checkout .woocommerce-additional-fields > h3 { display: none; } /* we draw our own card titles */

/* Required asterisks and validation flair are visually muted */
.mismohola-checkout .required { color: var(--coral); margin-left: 2px; }
.mismohola-checkout .optional { color: var(--ink-soft); }

/* Stripped-back email field for the Contact card */
.mismohola-checkout .form-row.is-bare { margin: 0; }

/* Coupon row in the order summary */
.order-summary .coupon-row { display: flex; gap: 8px; margin-top: 14px; }
.order-summary .coupon-row .input {
    flex: 1; padding: 12px 14px; border: 1.5px solid var(--hairline-2);
    border-radius: var(--r-pill); font: inherit; font-size: .9rem;
}
.order-summary .coupon-row .btn { border-radius: var(--r-pill); padding: 12px 18px; }
.order-summary .applied-coupon {
    margin-top: 10px;
    background: rgba(108, 198, 132, .15);
    color: var(--green);
    padding: 10px 14px;
    border-radius: var(--r-md);
    font-size: .85rem;
    font-weight: 700;
}

/* WC default payment ul reset ? we already render the radio tiles ourselves,
   so only show each gateway's body (.payment_box) directly when its tile is active. */
.mismohola-checkout .wc_payment_methods { list-style: none; padding: 0; margin: 0; }
.mismohola-checkout .wc_payment_methods > li { padding: 0; background: transparent; }
.mismohola-checkout .wc_payment_methods > li > label,
.mismohola-checkout .wc_payment_methods > li > input[name="payment_method"] { display: none; }
.mismohola-checkout .payment_box {
    background: var(--cream);
    border: 1px dashed var(--hairline-2);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-top: 8px;
    font-size: .9rem;
    color: var(--ink-soft);
}
.mismohola-checkout .payment_box:empty { display: none; }

/* Redirect-style gateways (PayPal, Klarna, …): render the description
   as a confident solid-brand pill with a leading lock icon.
   Picked from the "Variant C — Solid brand pill" preview.
   The pill colour is set per gateway via the .payment_method_*
   modifier classes that WooCommerce already adds.                       */
.mismohola-checkout .payment_box.payment_method_nexus_paypal,
.mismohola-checkout .payment_box.payment_method_nexus_klarna {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 11px 22px;
    border: none;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 6px 14px -10px rgba(0,0,0,.35);
}
.mismohola-checkout .payment_box.payment_method_nexus_paypal {
    background: #003087;
    color: #ffffff;
}
.mismohola-checkout .payment_box.payment_method_nexus_klarna {
    background: #FFA8CD;
    color: #0B051D;
}
/* Lock icon driven by `background-color: currentColor` so it inherits
   the contrast colour of whichever gateway pill it sits inside. */
.mismohola-checkout .payment_box.payment_method_nexus_paypal::before,
.mismohola-checkout .payment_box.payment_method_nexus_klarna::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a4.5 4.5 0 0 0-4.5 4.5V9H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1.5V5.5A4.5 4.5 0 0 0 12 1Zm0 2a2.5 2.5 0 0 1 2.5 2.5V9h-5V5.5A2.5 2.5 0 0 1 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a4.5 4.5 0 0 0-4.5 4.5V9H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1.5V5.5A4.5 4.5 0 0 0 12 1Zm0 2a2.5 2.5 0 0 1 2.5 2.5V9h-5V5.5A2.5 2.5 0 0 1 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The gateway prints its description inside <p> — make those inline
   with the lock icon and let them inherit the pill's contrast colour. */
.mismohola-checkout .payment_box.payment_method_nexus_paypal p,
.mismohola-checkout .payment_box.payment_method_nexus_klarna p {
    margin: 0;
    color: inherit;
    font-weight: 600;
}
.mismohola-checkout .form-row.terms-and-conditions { margin-top: 8px; }
.mismohola-checkout .place-order { margin-top: 16px; }

/* "Send me deals" + similar quick checkboxes */
.mismohola-checkout .check-row { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-soft); }

.shipping-options { display: flex; flex-direction: column; gap: 10px; }
.shipping-option {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid var(--hairline-2);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--t-fast);
}
.shipping-option:hover { border-color: var(--ink); }
.shipping-option.is-active { border-color: var(--coral); box-shadow: var(--ring-coral); }
.shipping-option .meta { flex: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shipping-option .price { font-weight: var(--weight-bold); }
.shipping-option__eta {
    font-size: .82rem;
    color: var(--ink-soft);
    font-weight: var(--weight-mid);
}

/* Single-page checkout ? payment method picker */
.pay-methods {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    margin-bottom: 14px;
}
.pay-method {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 14px 8px;
    background: #fff;
    border: 1.5px solid var(--hairline-2);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--t-fast);
    font-weight: var(--weight-bold);
    font-size: .82rem;
    gap: 6px;
}
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pay-method:hover { border-color: var(--ink); }
.pay-method.is-active,
.pay-method input:checked + .pay-method__inner {
    border-color: var(--coral);
}
.pay-method.is-active { border-color: var(--coral); box-shadow: var(--ring-coral); }
.pay-method .pay-badge { width: 36px; height: 22px; }
.pay-method__inner { display: inline-flex; align-items: center; gap: 6px; }
/* Whatever <img> the gateway's get_icon() emits (Stripe wordmark, PayPal logo, …)
   should display consistently inside the tile. */
.pay-method__inner img {
    height: 22px;
    width: auto;
    max-width: 96px;
    display: block;
    object-fit: contain;
    vertical-align: middle;
}
.pay-method__check {
    position: absolute; top: 6px; right: 8px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--coral); color: #fff;
    display: none; align-items: center; justify-content: center;
    font-size: 10px;
}
.pay-method.is-active .pay-method__check { display: flex; }

/* Card-details mini form */
.card-fields {
    display: grid; gap: 12px;
    padding: 16px;
    background: var(--cream);
    border: 1px dashed var(--hairline-2);
    border-radius: var(--r-md);
}
.card-fields[hidden] { display: none; }
.card-fields .card-field-row {
    display: grid; gap: 12px; grid-template-columns: 1fr 1fr;
}
.card-fields .card-field-row--full { grid-template-columns: 1fr; }
.card-field {
    position: relative;
}
.card-field .input { padding-right: 44px; }
.card-field__brands {
    position: absolute; top: 50%; right: 10px;
    transform: translateY(-50%);
    display: inline-flex; gap: 4px;
    pointer-events: none;
}
.card-field__brands .pay-badge { width: 28px; height: 18px; box-shadow: none; }
.express-pay-note {
    margin: 6px 0 14px; padding: 10px 14px;
    background: var(--mint-soft);
    border-radius: var(--r-md);
    font-size: .82rem; color: var(--ink-soft);
    text-align: center;
}
.express-pay-note strong { color: var(--ink); }

@media (max-width: 720px) {
    .pay-methods { grid-template-columns: repeat(2, 1fr); }
    .card-fields .card-field-row { grid-template-columns: 1fr; }
}

.order-summary {
    background: var(--mint-soft);
    border-radius: var(--r-lg);
    padding: 24px;
    position: sticky;
    top: calc(var(--header-h) + 16px);
    align-self: start;
}
.order-summary h3 { margin: 0 0 16px; }
.order-summary__items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.order-summary__item {
    display: grid; grid-template-columns: 56px 1fr auto; gap: 10px;
    align-items: center;
}
.order-summary__item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); }
.order-summary__item h6 {
    margin: 0;
    font-size: .82rem;
    font-weight: var(--weight-bold);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: normal;
    overflow-wrap: anywhere;
}
.order-summary__item .m { font-size: .75rem; color: var(--ink-soft); margin-top: 2px; }
.order-summary__item > div:nth-child(2) { min-width: 0; }
.order-summary__totals { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; }
.order-summary__totals .row { display: flex; justify-content: space-between; font-size: .9rem; }
.order-summary__totals .row.free { color: var(--green); font-weight: var(--weight-bold); }
.order-summary__totals .row.discount { color: var(--coral); font-weight: var(--weight-bold); }
.order-summary__total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 1.3rem; font-weight: var(--weight-black);
    padding-top: 12px;
    border-top: 1.5px solid var(--ink);
}

/* Coupon */
.coupon-row { display: flex; gap: 8px; align-items: center; }
.coupon-row .input { flex: 1; }
.applied-coupon {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--mint); color: var(--ink);
    padding: 6px 12px; border-radius: var(--r-pill);
    font-size: .8rem; font-weight: var(--weight-bold);
    margin-top: 8px;
}

/* -------------------------------------------------------------------------
 * 17. Account: login + dashboard
 * ---------------------------------------------------------------------- */

.auth-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - var(--header-h) - var(--promobar-h));
}
.auth-layout__side {
    background: var(--yellow);
    padding: clamp(40px, 8vw, 80px);
    display: flex; flex-direction: column; justify-content: center;
    border-radius: 0 0 60% 0;
    border-radius: 0 0 clamp(40px, 8vw, 90px) 0;
}
.auth-layout__form {
    padding: clamp(32px, 6vw, 72px);
    display: flex; flex-direction: column; justify-content: center;
}
.auth-card {
    max-width: 420px; margin: 0 auto;
    width: 100%;
}
.auth-tabs {
    display: inline-flex; padding: 4px;
    border: 1.5px solid var(--ink);
    border-radius: var(--r-pill);
    margin-bottom: 24px;
}
.auth-tabs button {
    border: 0; background: transparent;
    padding: 10px 18px; border-radius: var(--r-pill);
    font-weight: var(--weight-bold); cursor: pointer;
}
.auth-tabs button.is-active { background: var(--ink); color: #fff; }
.divider-or { text-align: center; color: var(--ink-mute); font-size: .85rem; margin: 20px 0 14px; position: relative; }
.divider-or::before, .divider-or::after {
    content: ''; position: absolute; top: 50%;
    height: 1px; width: 35%;
    background: var(--hairline);
}
.divider-or::before { left: 0; }
.divider-or::after  { right: 0; }
.oauth-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px;
    background: #fff;
    border: 1.5px solid var(--hairline-2);
    border-radius: var(--r-pill);
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: border-color var(--t-fast);
}
.oauth-btn + .oauth-btn { margin-top: 8px; }
.oauth-btn:hover { border-color: var(--ink); }

/* Account dashboard */
.account-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    margin-top: 28px;
}
.account-nav {
    background: var(--mint-soft);
    border-radius: var(--r-lg);
    padding: 16px;
    align-self: start;
    position: sticky; top: calc(var(--header-h) + 16px);
}
.account-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.account-nav li a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: var(--r-pill);
    font-weight: var(--weight-bold);
    font-size: .9rem;
    color: var(--ink);
    transition: all var(--t-fast);
}
.account-nav li a:hover { background: #fff; }
.account-nav li.is-active a { background: var(--coral); color: #fff; }

.welcome-banner {
    background: var(--mint-soft);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    margin-bottom: 20px;
}
.welcome-banner h2 { margin: 0 0 4px; font-size: 1.6rem; }
.welcome-banner p  { margin: 0; color: var(--ink-soft); }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.stat-card {
    border-radius: var(--r-lg);
    padding: 18px 20px;
    font-weight: var(--weight-bold);
}
.stat-card--yellow   { background: var(--yellow); }
.stat-card--mint     { background: var(--mint); }
.stat-card--lavender { background: var(--lavender); }
.stat-card .label { font-size: .82rem; opacity: .7; }
.stat-card .value { font-size: 1.6rem; font-weight: var(--weight-black); margin-top: 4px; }

.orders-card {
    background: #fff; border-radius: var(--r-lg);
    padding: 24px; border: 1px solid var(--hairline);
}
.orders-card h3 { margin: 0 0 16px; }
.orders-list { display: flex; flex-direction: column; gap: 12px; }
.orders-row {
    display: grid;
    grid-template-columns: 60px 1fr auto auto auto;
    gap: 12px; align-items: center;
    padding: 10px;
    border-radius: var(--r-md);
    transition: background var(--t-fast);
}
.orders-row:hover { background: var(--cream); }
.orders-row img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--r-sm); background: var(--mint-soft); }
.orders-row .info h6 { margin: 0 0 2px; font-weight: var(--weight-bold); font-size: .92rem; text-transform: none; letter-spacing: 0; }
.orders-row .info span { font-size: .8rem; color: var(--ink-mute); }
.order-status {
    padding: 4px 10px; border-radius: var(--r-pill);
    font-size: .72rem; font-weight: var(--weight-bold);
}
.order-status--delivered { background: var(--mint); color: var(--ink); }
.order-status--shipped   { background: var(--coral); color: #fff; }
.order-status--processing{ background: var(--yellow); color: var(--ink); }

/* -------------------------------------------------------------------------
 * 18. Blog
 * ---------------------------------------------------------------------- */

.blog-banner {
    background: var(--lavender);
    border-radius: var(--r-lg);
    padding: 40px clamp(20px, 4vw, 56px);
    margin: 24px 0 24px;
    text-align: center;
}
.blog-banner h1 { margin-bottom: 8px; }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.article-card {
    display: flex; flex-direction: column;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--hairline);
    transition: transform var(--t-mid);
}
.article-card:hover { transform: translateY(-3px); }
.article-card__media {
    aspect-ratio: 4 / 3;
    background: var(--yellow-soft);
}
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* -----------------------------------------------------------------------
 * Editorial banner (Brand story) + Deal-of-the-day
 *
 * Both sections use a two-column grid (text on the left, image on the
 * right) on desktop; they collapse to a single column under 760px so the
 * image stacks under the copy on phones. The image always clips to a
 * fixed aspect-ratio so a tall portrait or extra-wide landscape never
 * blows out the surrounding card.
 * -------------------------------------------------------------------- */
.brand-story {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(20px, 4vw, 40px);
    align-items: center;
    background: var(--coral);
    color: #fff;
    border-radius: var(--r-lg);
    padding: clamp(28px, 4vw, 56px);
}
.brand-story--coral { background: var(--coral); color: #fff; }
.brand-story__body { display: flex; flex-direction: column; gap: 14px; }
.brand-story__title {
    color: #fff;
    margin: 0;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.15;
}
.brand-story__intro { color: rgba(255, 255, 255, .92); margin: 0; max-width: 52ch; }
.brand-story__cta { align-self: flex-start; margin-top: 6px; }
.brand-story__media {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, .15);
}
.brand-story__img,
.brand-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.deal-card {
    background: var(--yellow);
    border-radius: var(--r-lg);
    padding: clamp(28px, 4vw, 56px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 4vw, 40px);
    align-items: center;
}
.deal-card__body { display: flex; flex-direction: column; gap: 12px; }
.deal-card__title { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.15; }
.deal-card__countdown { background: #fff; margin: 4px 0; }
.deal-card__cta { align-self: flex-start; }
.deal-card__media {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #fff;
}
.deal-card__media img,
.deal-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 760px) {
    .brand-story,
    .deal-card {
        grid-template-columns: 1fr;
        padding: clamp(20px, 5vw, 32px);
    }
    .brand-story__media { aspect-ratio: 16 / 10; }
    .deal-card__media { aspect-ratio: 1 / 1; max-width: 320px; margin: 0 auto; }
}
.article-card__cat {
    display: inline-block;
    padding: 4px 10px;
    background: var(--mint-soft);
    color: var(--ink);
    border-radius: var(--r-pill);
    font-size: .72rem;
    font-weight: var(--weight-bold);
    align-self: flex-start;
}
.article-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.article-card .excerpt { color: var(--ink-soft); font-size: .9rem; }
.article-card .meta { font-size: .78rem; color: var(--ink-mute); margin-top: auto; }

.article-card--feature {
    grid-column: 1 / -1;
    flex-direction: row;
    background: #fff;
    align-items: center;
}
.article-card--feature .article-card__media { flex: 1; aspect-ratio: 16 / 10; }
.article-card--feature .article-card__body { flex: 1; padding: clamp(20px, 3vw, 40px); }
.article-card--feature h3 { font-size: clamp(1.4rem, 2vw, 2rem); }

/* Single post */
.post-hero { text-align: center; padding: 32px 0 24px; }
.post-hero h1 { margin: 0 0 12px; }
.post-meta { font-size: .85rem; color: var(--ink-mute); display: inline-flex; gap: 12px; align-items: center; }
.post-meta .dot { width: 4px; height: 4px; background: var(--ink-mute); border-radius: 50%; }
.post-hero__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-lg);
    margin-top: 16px;
}
.post-hero__image img { width: 100%; height: 100%; object-fit: cover; }

.post-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; padding-block: 32px; }
.post-content { font-size: 1.05rem; color: var(--ink); }
.post-content h2 { font-size: 1.6rem; margin-top: 1.6em; }
.post-content blockquote {
    background: var(--lavender-soft);
    border-radius: var(--r-md);
    padding: 18px 24px;
    margin: 24px 0;
    font-size: 1.1rem;
}
.post-sidebar { display: flex; flex-direction: column; gap: 16px; align-self: start; position: sticky; top: calc(var(--header-h) + 16px); }
.post-sidebar .toc-card {
    background: var(--ink); color: #fff;
    border-radius: var(--r-lg);
    padding: 20px;
}
.post-sidebar .toc-card h5 { color: #fff; margin-bottom: 12px; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; }
.post-sidebar .toc-card ol { padding-left: 18px; margin: 0; color: rgba(255,255,255,.85); font-size: .88rem; }
.post-sidebar .toc-card li + li { margin-top: 6px; }
.post-sidebar .toc-card a { color: rgba(255,255,255,.85); }
.post-sidebar .toc-card a:hover { color: var(--coral); }
.subscribe-card {
    background: var(--mint-soft);
    border-radius: var(--r-lg);
    padding: 20px;
}
.subscribe-card h5 { margin: 0 0 12px; }

/* -------------------------------------------------------------------------
 * 19. About / Contact / 404
 * ---------------------------------------------------------------------- */

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value-card {
    border-radius: var(--r-lg);
    padding: 24px;
}
.value-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.value-card p  { margin: 0; font-size: .92rem; color: var(--ink-soft); }

.team-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.team-member img {
    width: 110px; height: 110px; border-radius: 50%;
    object-fit: cover; margin: 0 auto 8px;
    background: var(--yellow-soft);
}
.team-member h5 { margin: 0 0 2px; font-size: .95rem; }
.team-member span { color: var(--ink-mute); font-size: .82rem; }

.contact-grid {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
}
.contact-info { display: flex; flex-direction: column; gap: 12px; }
.contact-info .card {
    padding: 18px 20px;
    border-radius: var(--r-lg);
    font-weight: var(--weight-bold);
}
.contact-info .card--mint     { background: var(--mint-soft); }
.contact-info .card--lavender { background: var(--lavender-soft); }
.contact-info .card--pink     { background: var(--pink-soft); }
.contact-info .card--yellow   { background: var(--yellow-soft); }

.error-404 {
    background: var(--coral);
    color: #fff;
    border-radius: var(--r-lg);
    padding: clamp(48px, 8vw, 96px);
    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
    margin: 32px 0;
}
.error-404 h1 { font-size: clamp(5rem, 14vw, 10rem); margin: 0; line-height: .9; color: var(--ink); }
.error-404 p { font-size: 1.1rem; }
.error-404 .btn--outline { color: #fff; border-color: #fff; }
.error-404 .btn--outline:hover { background: #fff; color: var(--ink); }

/* -------------------------------------------------------------------------
 * 20. Toasts & quick view
 * ---------------------------------------------------------------------- */

.toast-stack {
    position: fixed; right: 20px; bottom: 20px;
    z-index: 200;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
}
.toast {
    background: var(--ink); color: #fff;
    padding: 14px 18px; border-radius: var(--r-pill);
    font-weight: var(--weight-bold);
    box-shadow: var(--shadow-lg);
    display: inline-flex; align-items: center; gap: 10px;
    animation: toast-in var(--t-mid) var(--easing);
    pointer-events: auto;
}
.toast--coral { background: var(--coral); }
.toast--mint  { background: var(--mint); color: var(--ink); }

/* Quick view modal */
.modal {
    position: fixed; inset: 0;
    background: rgba(27, 42, 78, .55);
    backdrop-filter: blur(6px);
    z-index: 110;
    opacity: 0; visibility: hidden;
    display: grid; place-items: center;
    padding: 20px;
    transition: opacity var(--t-mid);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel {
    width: min(960px, 100%);
    max-height: 90vh;
    background: #fff;
    border-radius: var(--r-lg);
    overflow: auto;
    transform: translateY(20px) scale(.98);
    transition: transform var(--t-mid) var(--easing);
    padding: 24px;
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }
.modal__close {
    position: absolute; top: 12px; right: 12px;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--cream); border: 0; cursor: pointer;
    display: grid; place-items: center;
}

/* -------------------------------------------------------------------------
 * 21. Animations
 * ---------------------------------------------------------------------- */

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes blink-soft {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}
.countdown-digits .unit > span { animation: blink-soft 1s ease-in-out infinite alternate; }

/* Scroll-reveal */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--t-slow) var(--easing), transform var(--t-slow) var(--easing);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------------
 * 22. Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .primary-nav { display: none; }
    .menu-toggle { display: inline-flex; }
    .site-header__inner { grid-template-columns: auto 1fr auto; }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .blog-teaser-grid, .blog-grid, .reviews-grid, .values-grid, .trust-row { grid-template-columns: repeat(2, 1fr); }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
    .hero { grid-template-columns: 1fr; }
    .hero__copy { border-radius: 0; }
    .product-detail { grid-template-columns: 1fr; }
    .product-gallery { grid-template-columns: 64px 1fr; }
    .checkout-grid { grid-template-columns: 1fr; }
    /* Mobile: surface the order summary above the form cards so the
       buyer sees the bill they're paying right under "Checkout ? Total". */
    .order-summary { position: static; order: -1; margin-bottom: 4px; }
    .account-grid { grid-template-columns: 1fr; }
    .account-nav { position: static; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .auth-layout { grid-template-columns: 1fr; }
    .auth-layout__side { border-radius: 0 0 60% 0; padding: 40px 24px; }
    .post-layout { grid-template-columns: 1fr; }
    .post-sidebar { position: static; }
    .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
    .contact-grid { grid-template-columns: 1fr; }
    .error-404 { grid-template-columns: 1fr; }
    .team-row { grid-template-columns: repeat(2, 1fr); }
    body.is-product .mobile-cta { display: flex; }
    body.is-product { padding-bottom: 80px; }
}
@media (max-width: 600px) {
    .product-grid, .product-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .blog-teaser-grid, .blog-grid, .reviews-grid, .values-grid, .trust-row { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr; }
    .checkout-card .grid-2, .checkout-card .grid-3 { grid-template-columns: 1fr; }
    .order-summary__item { grid-template-columns: 44px 1fr auto; }
    .order-summary__item img { width: 44px; height: 44px; }
    .cat-grid { grid-template-columns: 1fr; }
    .product-card.product-card--horizontal { grid-template-columns: 1fr; min-height: auto; }
    .product-card.product-card--horizontal .product-card__media { aspect-ratio: 4 / 3; }
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar { position: static; max-height: none; }
    .countdown-digits .unit > span { min-width: 38px; }
    .trust-row { grid-template-columns: repeat(2, 1fr); }
    /* Mobile footer: brand + newsletter spans the full row at the top,
       then Shop / Help / Company sit side-by-side underneath as 3 columns
       so each link list stays narrow and the footer height halves. */
    .site-footer__top {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 18px 14px;
    }
    .site-footer__top > div:first-child {
        grid-column: 1 / -1;
        margin-bottom: 8px;
    }
    .site-footer__top .footer-widget__title { font-size: .78rem; letter-spacing: .14em; }
    .site-footer__top ul { padding: 0; margin: 0; list-style: none; }
    .site-footer__top ul li {
        font-size: .85rem;
        line-height: 1.5;
        margin-bottom: 6px;
        overflow-wrap: anywhere; /* keep long words like "Sustainability" inside the narrow column */
    }
    /* Mobile footer bottom: stack copyright and the meta nav vertically,
       both center-aligned. The nav itself stays a horizontal flex row so
       "about ? Contact us ? journal ? Privacy ? Terms ? Cookies" runs as
       a single wrapping line instead of one-per-line. */
    .site-footer__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 28px;
        padding-top: 18px;
        gap: 10px;
    }
    .site-footer .footer-meta-nav {
        justify-content: center;
        gap: 4px 14px;
        font-size: .82rem;
    }

    /* ---------- Mobile header polish ----------------------------------
       Three problems the user flagged on narrow screens:
       1. The right-most cart button was clipping past the viewport.
       2. The promo-bar marquee felt cramped against the edge.
       3. "Checkout $X total ? Secure checkout" headline overflowed.

       Fix: tighten container padding, shrink the brand wordmark and
       icon-buttons, hide the "Bag" word inside the cart pill and the
       theme-toggle (low-value on phone), and let the checkout topbar
       wrap onto two centered lines instead of forcing a single row. */
    html, body { overflow-x: hidden; }
    .container, .container--wide { padding-inline: 14px; }

    .promo-bar { font-size: .72rem; }
    .promo-bar__inner { gap: 22px; padding-inline: 14px; }

    .site-header__inner {
        height: 56px;
        gap: 8px;
        padding-inline: 0; /* container already pads */
    }
    .brand-wordmark { font-size: 1.15rem; }
    .site-header__right { gap: 4px; }
    .icon-btn { width: 36px; height: 36px; }
    .icon-btn .icon { width: 18px; height: 18px; }

    /* Hide the theme-toggle and the "Bag" word on phones to make room
       for the cart pill without clipping past the viewport. */
    .theme-toggle { display: none; }
    .cart-btn {
        padding: 8px 12px;
        font-size: .82rem;
        gap: 5px;
        box-shadow: 0 4px 10px rgba(255, 90, 71, .3);
    }
    .cart-btn__word { display: none; }
    .cart-btn .icon { width: 16px; height: 16px; }

    /* Checkout headline ? keep "Checkout $X total" + "?? Secure checkout"
       on the SAME row at phone width. They will only wrap if the viewport
       is genuinely too narrow (? ~340px). */
    .checkout-topbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px 14px;
        padding: 14px 0 6px;
    }
    .checkout-topbar h1 {
        font-size: 1.1rem;
        line-height: 1.25;
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
        flex: 0 1 auto;
        min-width: 0;
    }
    .checkout-topbar__total { font-size: 1rem; }
    .checkout-topbar__secure {
        font-size: .72rem;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    .checkout-topbar__secure svg { width: 13px; height: 13px; }

    /* Compact the language switcher to a globe-only pill on phone ? the
       full "EN v" pill was eating ~70px and pushing the cart button off
       the right edge. Functionality preserved: tap the globe and the
       same dropdown opens. */
    .lang-switcher__toggle {
        height: 36px;
        padding: 0 9px;
        gap: 0;
        font-size: 0;
    }
    .lang-switcher__code,
    .lang-switcher__chev { display: none; }
    .lang-switcher__globe { width: 18px; height: 18px; }

    /* Kill the huge cream-coloured gap between the checkout content and
       the dark footer on mobile. Three contributors get trimmed:
         - checkout container's bottom padding-block
         - footer's outside margin-top
         - footer's inside top padding-block */
    .checkout-page-wrap { padding-block: 4px 16px; }
    .site-footer {
        margin-top: 24px;
        padding-block: 32px 18px;
    }
}

/* Even narrower phones: drop the search icon out of the header (it's
   still reachable through the hamburger drawer) so logo + lang globe +
   account + cart never collide with the viewport edge. */
@media (max-width: 380px) {
    .site-header__right [data-open-search] { display: none; }
    .brand-wordmark { font-size: 1.05rem; }
    .cart-btn { padding: 7px 10px; }
}

/* -------------------------------------------------------------------------
 * 22b. Product feature blocks ? Amazon-style "From the manufacturer"
 * Large alternating image + headline + sub-copy blocks, placed between
 * the main product detail section and the customer reviews section.
 * ---------------------------------------------------------------------- */

.product-features {
    display: grid;
    gap: 20px;
    margin: 56px 0 16px;
}
.product-features__heading {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    margin: 0 0 8px;
    display: flex; align-items: center; gap: 10px;
}
.product-features__intro {
    color: var(--ink-soft);
    margin: 0 0 16px;
    max-width: 640px;
}
.product-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.product-feature__media {
    position: relative;
    background: #fff;
    aspect-ratio: 1 / 1;
}
.product-feature__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.product-feature__body {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.product-feature__eyebrow {
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--coral);
    font-weight: var(--weight-black);
    margin: 0;
}
.product-feature__title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.18;
    margin: 0;
    color: var(--ink);
}
.product-feature__copy {
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
    font-size: .98rem;
}
.product-feature__bullets {
    list-style: none;
    padding: 0; margin: 6px 0 0;
    display: grid; gap: 6px;
}
.product-feature__bullets li {
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.45;
    padding-left: 22px;
    position: relative;
}
.product-feature__bullets li::before {
    content: "?";
    position: absolute; left: 0; top: 0;
    color: var(--coral);
    font-weight: 900;
}
/* Alternating: every other block flips so image is on the right. */
.product-feature:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.product-feature:nth-child(even) .product-feature__media { order: 2; }

/* Soft-tint variants ? keep media area on solid white, tint the body */
.product-feature--mint    .product-feature__body { background: var(--mint-soft); }
.product-feature--yellow  .product-feature__body { background: var(--yellow-soft); }
.product-feature--pink    .product-feature__body { background: var(--pink-soft); }
.product-feature--lavender .product-feature__body { background: var(--lavender-soft); }

@media (max-width: 760px) {
    .product-feature,
    .product-feature:nth-child(even) {
        grid-template-columns: 1fr;
    }
    .product-feature:nth-child(even) .product-feature__media { order: 0; }
    .product-feature__body { padding: 22px 22px 26px; }
}

[data-theme="dark"] .product-feature { background: var(--paper); border-color: var(--hairline); }
[data-theme="dark"] .product-feature__media { background: var(--cream); }

/* -------------------------------------------------------------------------
 * 22c. Language switcher ? globe pill + dropdown menu, auto-injected by
 * assets/js/i18n.js into .site-header__right on every page that ships the
 * shared header markup.
 *
 * Design goals:
 *   - No flag emoji (Windows Chrome renders them as ugly two-letter fallbacks).
 *   - A neutral globe icon works in every region and theme.
 *   - The dropdown shows the native script of each language (English /
 *     Fran?ais / ??? / ??????? ...) with a small all-caps locale tag.
 *   - The active row glows in coral with a check mark.
 * ---------------------------------------------------------------------- */

.lang-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.lang-switcher__toggle {
    --ls-bg:      #fff;
    --ls-fg:      var(--ink);
    --ls-border:  rgba(27, 42, 78, .14);
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px;
    padding: 0 12px 0 11px;
    border: 1.5px solid var(--ls-border);
    border-radius: var(--r-pill);
    background: var(--ls-bg);
    color: var(--ls-fg);
    font-family: inherit;
    font-weight: var(--weight-black);
    font-size: .78rem;
    letter-spacing: .06em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(27, 42, 78, .04);
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), box-shadow var(--t-fast),
                transform var(--t-fast);
}
.lang-switcher__toggle:hover {
    --ls-border: var(--ink);
    box-shadow: 0 4px 14px -6px rgba(27, 42, 78, .35);
    transform: translateY(-1px);
}
.lang-switcher.is-open .lang-switcher__toggle {
    --ls-bg:     var(--ink);
    --ls-fg:     #fff;
    --ls-border: var(--ink);
    box-shadow: 0 6px 18px -8px rgba(27, 42, 78, .55);
}

.lang-switcher__globe {
    flex-shrink: 0;
    opacity: .92;
    transition: transform var(--t-mid);
}
.lang-switcher.is-open .lang-switcher__globe { transform: rotate(20deg); }

.lang-switcher__code {
    font-weight: var(--weight-black);
    font-size: .78rem;
    letter-spacing: .08em;
}

.lang-switcher__chev {
    opacity: .65;
    transition: transform var(--t-mid);
}
.lang-switcher.is-open .lang-switcher__chev { transform: rotate(-180deg); }

/* -------- Dropdown ------------------------------------------------------ */

.lang-switcher__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 230px;
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 24px 48px -16px rgba(27, 42, 78, .22),
        0 2px 6px -2px rgba(27, 42, 78, .08);
    border: 1px solid rgba(27, 42, 78, .08);
    padding: 8px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid);
    z-index: 80;
}
.lang-switcher.is-open .lang-switcher__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.lang-switcher__menu li {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: .94rem;
    font-weight: var(--weight-medium);
    color: var(--ink);
    transition: background var(--t-fast), color var(--t-fast);
}
.lang-switcher__menu li:hover { background: var(--cream); }

.lang-switcher__menu .lang-switcher__name {
    flex: 1;
    font-weight: var(--weight-bold);
    line-height: 1.15;
}

.lang-switcher__menu .lang-switcher__tag {
    font-size: .7rem;
    letter-spacing: .08em;
    font-weight: var(--weight-black);
    color: var(--ink-soft);
    background: rgba(27, 42, 78, .06);
    padding: 3px 7px;
    border-radius: 999px;
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast);
}

.lang-switcher__menu .lang-switcher__check {
    opacity: 0;
    transform: scale(.7);
    transition: opacity var(--t-fast), transform var(--t-fast);
    color: var(--coral);
    margin-left: -4px;
}

.lang-switcher__menu li.is-active {
    background: linear-gradient(135deg,
        rgba(255, 90, 71, .12),
        rgba(255, 210, 63, .12));
    color: var(--ink);
}
.lang-switcher__menu li.is-active .lang-switcher__tag {
    background: var(--coral);
    color: #fff;
}
.lang-switcher__menu li.is-active .lang-switcher__check {
    opacity: 1;
    transform: scale(1);
}

/* -------- Dark mode ----------------------------------------------------- */

[data-theme="dark"] .lang-switcher__toggle {
    --ls-bg:     var(--paper);
    --ls-fg:     var(--ink);
    --ls-border: var(--hairline);
}
[data-theme="dark"] .lang-switcher.is-open .lang-switcher__toggle {
    --ls-bg:     var(--ink);
    --ls-fg:     #fff;
    --ls-border: var(--ink);
}
[data-theme="dark"] .lang-switcher__menu {
    background: var(--paper);
    border-color: var(--hairline);
    box-shadow:
        0 24px 48px -16px rgba(0, 0, 0, .55),
        0 2px 6px -2px rgba(0, 0, 0, .25);
}
[data-theme="dark"] .lang-switcher__menu li:hover { background: var(--cream); }
[data-theme="dark"] .lang-switcher__menu .lang-switcher__tag {
    background: rgba(255, 255, 255, .08);
    color: var(--ink-soft);
}

/* -------- RTL: in Arabic, drop the menu to the LEFT edge ---------------- */
[dir="rtl"] .lang-switcher__menu { right: auto; left: 0; transform-origin: top left; }

/* -------- Compact on small screens ? keep globe + chevron, drop code ---- */
@media (max-width: 600px) {
    .lang-switcher__code { display: none; }
    .lang-switcher__toggle { padding: 0 9px; gap: 5px; }
}

/* -------------------------------------------------------------------------
 * 22d. RTL adjustments ? minimal layout mirroring for the Arabic locale.
 * Most of the layout already works in RTL because we use flex/grid; this
 * section handles the few visual cues (flip arrows, swap padding) that
 * need to read naturally right-to-left.
 * ---------------------------------------------------------------------- */

[dir="rtl"] body { text-align: right; }

/* Flip directional arrows / chevrons that only carry meaning visually */
[dir="rtl"] .breadcrumb .sep,
[dir="rtl"] .breadcrumb {
    direction: rtl;
}

/* Promo bar ticker keeps moving right?left in LTR, left?right in RTL */
[dir="rtl"] .promo-bar__inner {
    animation-direction: reverse;
}

/* Mirror the chevron icons inside buttons (Buy now lightning bolt is symmetric, fine) */
[dir="rtl"] .accordion__head .chev { transform: scaleX(-1); }
/* In the lang switcher, only mirror the dropdown chevron ? never the globe. */
[dir="rtl"] .lang-switcher__chev { transform: scaleX(-1); }
[dir="rtl"] .lang-switcher.is-open .lang-switcher__chev { transform: scaleX(-1) rotate(-180deg); }

/* "See everything ?" style arrows ? replace right arrow with left arrow visually */
[dir="rtl"] .cat-card__link::after { content: ""; }

/* Sidebar layout stays the same (filters on the right in RTL feels natural) */
[dir="rtl"] .shop-layout {
    direction: rtl;
}
[dir="rtl"] .shop-layout > * { direction: rtl; }

/* Arabic font fallback chain ? Noto Naskh Arabic via system default */
[dir="rtl"], [dir="rtl"] body {
    font-family: 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Plus Jakarta Sans',
                 -apple-system, 'Segoe UI', system-ui, sans-serif;
}

/* -------------------------------------------------------------------------
 * 23. Dark mode (auto + manual toggle)
 * ---------------------------------------------------------------------- */

[data-theme="dark"] {
    --cream:      #14152C;
    --paper:      #1B1D38;
    --hairline:   #2A2C50;
    --hairline-2: #3A3D6B;
    --ink:        #F1EEE6;
    --ink-soft:   #C8C3D8;
    --ink-mute:   #8E8FB6;
    --yellow-soft:#2E2B40;
    --mint-soft:  #1F3132;
    --lavender-soft:#2A2548;
    --pink-soft:  #321F26;
}
[data-theme="dark"] body { background: var(--cream); }
[data-theme="dark"] .site-header { background: var(--paper); border-bottom-color: var(--hairline); }
[data-theme="dark"] .brand-wordmark { color: var(--ink); }
[data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea {
    background: var(--paper); color: var(--ink); border-color: var(--hairline-2);
}
[data-theme="dark"] .checkout-card { background: var(--paper); border-color: var(--hairline); }
[data-theme="dark"] .product-card__media { background: var(--paper); }
[data-theme="dark"] .pill { background: var(--paper); color: var(--ink); border-color: var(--ink); }
[data-theme="dark"] .article-card { background: var(--paper); border-color: var(--hairline); }
[data-theme="dark"] .orders-card { background: var(--paper); border-color: var(--hairline); }

/* -------------------------------------------------------------------------
 * Utility helpers
 * ---------------------------------------------------------------------- */

.flex   { display: flex; }
.center { display: grid; place-items: center; }
.mb-0   { margin-bottom: 0 !important; }
.mb-4   { margin-bottom: var(--s-4); }
.mt-4   { margin-top: var(--s-4); }
.mt-6   { margin-top: var(--s-6); }
.text-mute  { color: var(--ink-mute); }
.text-center { text-align: center; }
.no-scroll { overflow: hidden; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }

/* -------------------------------------------------------------------------
 * 25. Welcome modal ? first-visit 50%-off-your-first-order popup.
 *
 *   - Shown ~1.4s after first page load via assets/js/main.js.
 *   - Persists dismissal/claim state in localStorage so it does not nag the
 *     same visitor twice (mismohola_welcome_dismissed / _claimed).
 *   - Two-column layout on desktop (image left, content right), stacks on
 *     mobile. Backdrop blurs the page so the offer is the only thing the eye
 *     can lock onto.
 * ---------------------------------------------------------------------- */

.welcome-modal {
    position: fixed; inset: 0;
    z-index: 200;
    display: grid; place-items: center;
    padding: 16px;
    visibility: hidden; opacity: 0;
    transition: opacity var(--t-mid), visibility var(--t-mid);
    pointer-events: none;
}
.welcome-modal[aria-hidden="false"] {
    visibility: visible; opacity: 1;
    pointer-events: auto;
}

.welcome-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(27, 42, 78, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.welcome-modal__panel {
    position: relative;
    width: min(960px, 100%);
    max-height: calc(100vh - 32px);
    overflow: hidden;             /* clip countdown bar inside the rounded corners */
    background: var(--paper, #fff);
    border-radius: 28px;
    box-shadow:
        0 40px 80px -20px rgba(27, 42, 78, .55),
        0 6px 20px -8px rgba(27, 42, 78, .25);
    /* Two-column main area + a third row dedicated to the auto-close
       countdown strip so it lives in the natural flow (pinned to the
       visible bottom regardless of internal scrolling). */
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: 1fr auto;
    transform: translateY(20px) scale(.96);
    opacity: 0;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1),
                opacity .35s cubic-bezier(.16, 1, .3, 1);
}
.welcome-modal__media,
.welcome-modal__body { grid-row: 1; }
.welcome-modal[aria-hidden="false"] .welcome-modal__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ---------- Close button (sits on top of media) ---------- */
.welcome-modal__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    display: grid; place-items: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 4px 14px -4px rgba(27, 42, 78, .3);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.welcome-modal__close:hover {
    background: var(--ink);
    color: #fff;
    transform: rotate(90deg);
}

/* ---------- Left: image side ---------- */
.welcome-modal__media {
    position: relative;
    background: linear-gradient(135deg, var(--yellow) 0%, #FFE680 100%);
    overflow: hidden;
    min-height: 360px;
}
.welcome-modal__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Stickers on the image */
.welcome-modal__sticker {
    position: absolute;
    background: #fff;
    color: var(--ink);
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: var(--weight-black);
    font-size: .82rem;
    box-shadow: 0 8px 22px -8px rgba(27, 42, 78, .35);
    z-index: 2;
    white-space: nowrap;
}
.welcome-modal__sticker--top {
    top: 24px; left: 24px;
    transform: rotate(-6deg);
    background: var(--coral);
    color: #fff;
}
.welcome-modal__sticker--bottom {
    bottom: 24px; right: 24px;
    transform: rotate(4deg);
}

.welcome-modal__doodle {
    position: absolute;
    top: 38%; right: 30%;
    width: 70px; height: 70px;
    color: var(--ink);
    transform: rotate(28deg);
    pointer-events: none;
    z-index: 2;
    opacity: .85;
}

/* ---------- Right: copy + form ---------- */
.welcome-modal__body {
    /* Bottom padding no longer needs +32px to clear the auto-close progress
       bar ? that widget is now hidden (see .welcome-modal__countdown). */
    padding: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 44px);
    display: flex; flex-direction: column;
    gap: 14px;
}
.welcome-modal__eyebrow {
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: var(--weight-black);
    color: var(--coral);
    margin: 0;
}
.welcome-modal__title {
    font-family: var(--font-display, 'Fraunces', serif);
    font-weight: 700;
    font-size: clamp(2rem, 4.2vw, 2.8rem);
    line-height: 1.04;
    margin: 0;
    color: var(--ink);
}
.welcome-modal__percent {
    display: inline-block;
    background: linear-gradient(135deg, var(--coral) 0%, #FF8267 100%);
    color: #fff;
    padding: 0 14px;
    border-radius: 14px;
    transform: rotate(-2deg);
    font-style: italic;
    font-weight: 700;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}
.welcome-modal__sub {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    max-width: 38ch;
}

/* ---------- "Auto-applied" confirmation badge ----------
 * The IP-based 50%-off coupon is auto-attached server-side at checkout, so
 * the visitor doesn't have to remember (or enter) any code. This badge
 * tells them that, with a green checkmark for instant reassurance.
 */
.welcome-modal__applied {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 4px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(91, 210, 122, .14) 0%, rgba(56, 176, 90, .08) 100%);
    border: 1.5px solid rgba(56, 176, 90, .35);
    border-radius: 14px;
}
.welcome-modal__applied-check {
    flex: none;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5BD27A 0%, #38B05A 100%);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(56, 176, 90, .55);
}
.welcome-modal[aria-hidden="false"] .welcome-modal__applied-check {
    animation: welcomePop .55s cubic-bezier(.34, 1.56, .64, 1) both;
    animation-delay: .15s;
}
.welcome-modal__applied-text {
    font-size: .94rem;
    font-weight: var(--weight-bold);
    color: var(--ink);
    line-height: 1.35;
}

/* ---------- CTA ? closes the popup (no navigation) ---------- */
.welcome-modal__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%;
    height: 52px;
    margin-top: 4px;
    border: 0;
    border-radius: 12px;
    background: var(--coral);
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    font-weight: var(--weight-black);
    font-size: 1rem;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 10px 28px -10px rgba(255, 90, 71, .65);
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    -webkit-appearance: none; appearance: none;
}
.welcome-modal__cta:hover {
    background: #ff4634;
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -10px rgba(255, 90, 71, .8);
}
.welcome-modal__cta svg { transition: transform var(--t-fast); }
.welcome-modal__cta:hover svg { transform: translateX(3px); }

/* ---------- Trust badges row ---------- */
.welcome-modal__trust {
    display: flex; flex-wrap: nowrap; gap: 8px;
    list-style: none;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(27, 42, 78, .08);
    font-size: .72rem;
    color: var(--ink-soft);
    font-weight: var(--weight-medium);
}
.welcome-modal__trust li {
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.25;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.welcome-modal__trust .welcome-modal__trust-ico {
    font-size: 1.1rem;
    line-height: 1;
}
.welcome-modal__trust .welcome-modal__trust-txt {
    display: block;
}

/* ---------- Countdown progress bar ----------
   Visually suppressed: the gradient bar at the bottom of the welcome
   popup looked like a janky page-load indicator and rushed shoppers,
   so we hide the entire countdown widget. The JS timer attached to
   `data-autoclose` on the modal still closes the popup silently after
   the configured duration, so the auto-close behaviour is preserved
   without the loading-bar UX.
   To bring it back: remove `display: none` here (and consider also
   restoring the 32px bottom padding compensation on .welcome-modal__body
   if needed). */
.welcome-modal__countdown {
    /* Visible auto-close progress strip that always sits at the bottom
       of the modal panel. Lives in its own grid row spanning both
       columns so it can't be hidden behind body content or scrolled
       off-screen on short viewports. The bar shrinks in real time via
       JS-driven `transform: scaleX()` and the label renders remaining
       seconds — both wired up in main.js initWelcomeModal(). */
    grid-row: 2;
    grid-column: 1 / -1;
    position: relative;
    height: 36px;
    overflow: hidden;
    background: rgba(27, 42, 78, .08);
    pointer-events: none;
    /* Subtle hairline so the strip reads as a distinct UI region. */
    border-top: 1px solid rgba(27, 42, 78, .08);
}
.welcome-modal__countdown-bar {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(1);
    background: linear-gradient(90deg, var(--coral) 0%, var(--yellow) 100%);
    opacity: .85;
}
.welcome-modal[aria-hidden="false"] .welcome-modal__countdown-bar {
    animation: welcomeBar 10s linear forwards;
}
.welcome-modal__countdown-label {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    height: 100%;
    font-size: .78rem;
    font-weight: var(--weight-black);
    color: var(--ink);
    letter-spacing: .04em;
}
.welcome-modal__countdown-label [data-welcome-secs] {
    display: inline-block;
    min-width: 1.4em;
    text-align: center;
    color: var(--coral);
    font-variant-numeric: tabular-nums;
}

@keyframes welcomeBar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@keyframes welcomePop {
    0%   { transform: scale(.4); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

/* ---------- Responsive: stack on mobile ---------- */
@media (max-width: 740px) {
    .welcome-modal__panel {
        /* Mobile: stack media → body → countdown vertically. We can't
           inherit the desktop two-column layout because the countdown
           still needs to sit in its own row, just below body now. */
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        border-radius: 22px;
    }
    .welcome-modal__media     { grid-row: 1; grid-column: 1; min-height: 180px; max-height: 200px; }
    .welcome-modal__body      { grid-row: 2; grid-column: 1; padding: 26px 22px 24px; gap: 10px; }
    .welcome-modal__countdown { grid-row: 3; grid-column: 1; }
    .welcome-modal__sticker--top { top: 16px; left: 16px; }
    .welcome-modal__sticker--bottom { bottom: 12px; right: 16px; font-size: .74rem; padding: 8px 12px; }
    .welcome-modal__doodle { display: none; }
    .welcome-modal__title { font-size: 1.7rem; }
    .welcome-modal__trust { gap: 6px; font-size: .65rem; padding-top: 10px; }
    .welcome-modal__trust .welcome-modal__trust-ico { font-size: 1rem; }
    .welcome-modal__applied { padding: 12px 14px; }
    .welcome-modal__applied-text { font-size: .86rem; }
}

/* ---------- RTL: tweak sticker positions + doodle direction ---------- */
[dir="rtl"] .welcome-modal__sticker--top    { left: auto; right: 24px; transform: rotate(6deg); }
[dir="rtl"] .welcome-modal__sticker--bottom { right: auto; left: 24px; transform: rotate(-4deg); }
[dir="rtl"] .welcome-modal__doodle          { right: auto; left: 30%; transform: rotate(-28deg) scaleX(-1); }

/* ---------- Dark mode ---------- */
[data-theme="dark"] .welcome-modal__panel    { background: var(--paper); }
[data-theme="dark"] .welcome-modal__applied  {
    background: linear-gradient(135deg, rgba(91, 210, 122, .14) 0%, rgba(56, 176, 90, .06) 100%);
    border-color: rgba(91, 210, 122, .35);
}
[data-theme="dark"] .welcome-modal__applied-text { color: #E8EFF5; }
[data-theme="dark"] .welcome-modal__trust    { border-top-color: var(--hairline); }
[data-theme="dark"] .welcome-modal__countdown { background: rgba(255, 255, 255, .04); }

/* End of main.css */