/* ===========================================================================
   MobiTrust — design tokens, layout primitives and the handful of things
   Tailwind can't express. Colour tokens are mirrored in the inline Tailwind
   config in header.php.
   ===========================================================================*/

:root {
    /* ---- Brand tokens (do not change) ---------------------------------- */
    --navy:  #1B2A41;   /* anchor: primary buttons, dark sections, accents   */
    --sand:  #F3EEE4;   /* main background — warm, never pure white          */
    --amber: #E0A83B;   /* single brand accent                               */
    --coral: #E86A4C;   /* ONLY "New" / "Sale" tags, sparingly               */
    --ink:   #1A1A1A;   /* body text                                         */
    --wa:    #25D366;   /* WhatsApp green — ONLY on order buttons            */

    /* ---- Supporting tones, derived from the tokens above -----------------
       Three tones so a surface always reads against its ground:
         band  (deepest)  full-bleed section bands
         sand  (base)     the page itself
         surface (lightest) cards and panels                                */
    --sand-band: #EBE3D5;
    --sand-deep: #E4DBCA;
    --surface:   #FBF8F2;
    --navy-soft: #24374F;
    --line:      rgba(27, 42, 65, .08);
    --line-firm: rgba(27, 42, 65, .14);

    /* ---- One radius scale, used everywhere ----------------------------- */
    --r-chip:  14px;
    --r-tile:  20px;
    --r-card:  28px;
    --r-panel: 40px;

    /* ---- One elevation scale ------------------------------------------- */
    --shadow-card:  0 1px 2px rgba(27, 42, 65, .04), 0 14px 30px -20px rgba(27, 42, 65, .30);
    --shadow-lift:  0 2px 4px rgba(27, 42, 65, .05), 0 26px 50px -22px rgba(27, 42, 65, .38);
    --shadow-panel: 0 30px 70px -32px rgba(27, 42, 65, .45);

    --ease-soft: cubic-bezier(.22, .61, .36, 1);
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    background: var(--sand);
    color: var(--ink);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: none;
}

.font-serif,
h1, h2, h3, .serif {
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-optical-sizing: auto;
}

/* ---------------------------------------------------------------------------
 | Layout primitives
 |
 | Sections are always full-bleed; only their inner .wrap is constrained. That
 | way a band of colour always reaches both edges of the viewport and there is
 | never a gutter of matching colour beside the content.
 |--------------------------------------------------------------------------*/
.wrap {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 20px;
}

@media (min-width: 768px)  { .wrap { padding-inline: 32px; } }
@media (min-width: 1280px) { .wrap { padding-inline: 40px; } }

/* A wider variant for the hero and other edge-to-edge showpieces. */
.wrap-wide { max-width: 1440px; }

/* Vertical rhythm: one step for mobile, one for desktop. */
.section      { padding-block: 48px; }
.section-tight{ padding-block: 32px; }

@media (min-width: 768px) {
    .section       { padding-block: 96px; }
    .section-tight { padding-block: 56px; }
}

/* Full-bleed tonal bands that break up the page on wide screens. */
.band      { background: var(--sand-band); }
.band-navy { background: var(--navy); }

/* ---------------------------------------------------------------------------
 | Momentum horizontal scrollers
 |
 | `.at-md-grid` turns the scroller into an evenly distributed grid from the
 | md breakpoint up, so the cards spread across the full width on a desktop
 | instead of stopping short with dead space on the right.
 |--------------------------------------------------------------------------*/
.scroller {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; flex: 0 0 auto; }

/* `grid-auto-flow: column` keeps every card on ONE row sharing the width
   evenly, so the row always reaches the right edge — no wrapped last item
   sitting beside three empty cells. The minmax() floor means an unusually
   long list falls back to scrolling rather than crushing the cards. */
/* One row, every card sharing the width evenly, so the row always reaches the
   right edge — no wrapped last item sitting beside three empty cells. The
   minmax() floor lets an unusually long list fall back to scrolling rather
   than crushing the cards. */
@media (min-width: 768px) {
    .scroller.at-md-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(120px, 1fr);
        overflow-x: auto;
        scroll-snap-type: none;
    }
    .scroller.at-md-grid > * { flex: initial; width: auto; }
}

/* Testimonials are too wide to share one row on a narrow desktop, so they go
   2 × 2 at lg and 1 × 4 at xl — both divide evenly into four cards. */
@media (min-width: 1024px) {
    .scroller.at-lg-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: visible;
        scroll-snap-type: none;
        align-items: start;
    }
    .scroller.at-lg-grid > * { flex: initial; width: auto; }
}

@media (min-width: 1280px) {
    .scroller.at-lg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------------
 | Taps — every interactive element gets a pressed state and a 44px target
 |--------------------------------------------------------------------------*/
.press {
    transition: transform .18s var(--ease-soft),
                box-shadow .22s var(--ease-soft),
                background-color .22s var(--ease-soft),
                color .22s var(--ease-soft),
                border-color .22s var(--ease-soft),
                opacity .22s var(--ease-soft);
    touch-action: manipulation;
}
.press:active { transform: scale(.955); }

.tap { min-height: 44px; min-width: 44px; }

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
    border-radius: 999px;
}

/* ---------------------------------------------------------------------------
 | Components
 |--------------------------------------------------------------------------*/
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
}

/* Soft sand plinth every product photo sits on */
.plinth {
    background:
        radial-gradient(115% 80% at 50% 8%, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(160deg, var(--sand) 0%, var(--sand-deep) 100%);
}

/* Card elevation + hover lift.
   `.card` paints the shadow and must sit on an element that actually has a
   surface — a shadow on a transparent box paints a halo around everything it
   contains. `.card-lift` only moves; it hands the deeper shadow to whichever
   surface is at hand: itself, when the lifting element is the card, or its
   `.card` child, when the card is the panel inside it. */
.card {
    box-shadow: var(--shadow-card);
    transition: box-shadow .38s var(--ease-soft);
}
.card-lift { transition: transform .38s var(--ease-soft); }

@media (hover: hover) {
    .card-lift:hover { transform: translateY(-6px); }

    .card-lift.card:hover,
    .card-lift:hover .card { box-shadow: var(--shadow-lift); }
}

/* Selected colour swatch — ringed navy */
.swatch-selected { box-shadow: 0 0 0 2px var(--sand), 0 0 0 4px var(--navy); }

/* Selected thumbnail — ringed amber */
.thumb-selected  { box-shadow: 0 0 0 2px var(--sand), 0 0 0 4px var(--amber); }

/* Reveal on scroll — gated on `.js` so content is never hidden without a
   script running to bring it back. */
.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .press:active { transform: none; }
    .card-lift:hover { transform: none; }
    .card { transition: none; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .scroller { scroll-behavior: auto; }
}

/* Safe-area padding for the fixed order bar on notched phones */
.safe-bottom  { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.pb-order-bar { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

@media (min-width: 1024px) {
    .pb-order-bar { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
}