/* ============================================================
   TRAM GRAPHICS — STOREFRONT THEME
   ------------------------------------------------------------
   Loads AFTER store.css and redefines the design language.

   WHY A LAYER, NOT A REWRITE
   store.css is ~2,000 lines covering ~250 classes, and it is
   almost entirely token-driven — only a handful of hardcoded
   hex values and radii. Redefining the tokens plus the two
   dozen components that actually carry the identity changes the
   whole look without risking the long tail of layout rules that
   currently hold the pages together.

   CONCEPT — "the sample room"
   The visual vocabulary comes from garment trade catalogues and
   print-shop ink books, not from SaaS dashboards. Swatches are
   navigation. Item codes are typography. Rules replace shadows.
   Corners are square because this is a spec sheet, not a phone.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ────────────────────────────────────────────────────────────
   TOKENS
   ──────────────────────────────────────────────────────────── */
:root {
    --font-sans:   'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-serif:  'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* GREY PALETTE — taken from the logo, not invented.
       assets/images/logo.png is a single colour: #58585A. That is
       the brand, so everything here is built from it rather than
       from a grey I picked out of the air. */
    --canvas:      #F3F3F4;
    --paper:       #FAFAFB;
    --white:       #FFFFFF;

    --ink:         #1A1A1C;
    --ink-2:       #3A3A3D;
    --muted:       #6E6E72;
    --rule:        #DCDCDE;
    --rule-light:  #EBEBED;

    /* The logo grey itself. At #58585A on white it clears WCAG AA
       for normal text (about 4.9:1), so it is safe as a button
       background — a lighter grey would not have been. */
    --brand:       #58585A;
    --brand-hi:    #414143;
    --brand-wash:  #EFEFF1;
    --brand-tint:  #E3E3E6;

    /* Signal colours. Used sparingly and only where they mean
       something: stock state, clearance, errors. */
    /* Signal colours stay chromatic: they carry meaning (stock
       state, clearance, errors) and greying them out would remove
       the only thing distinguishing them from ordinary text. */
    --signal:      #B4451A;
    --signal-wash: #FBEDE7;
    --success:     #2C7A4B;
    --danger:      #B03A25;
    --warning:     #8A5A00;

    /* Legacy aliases kept so store.css rules keep resolving */
    --gold:        #58585A;
    --gold-light:  #6E6E72;

    --nav-h:       76px;
    --max-w:       1400px;
    --gutter:      clamp(1.25rem, 4.5vw, 3rem);

    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --shadow-xs:   0 1px 2px rgba(26,26,28,.04);
    --shadow-sm:   0 1px 3px rgba(26,26,28,.06);
    --shadow-md:   0 6px 20px rgba(26,26,28,.08);
    --shadow-lg:   0 20px 48px rgba(26,26,28,.12);

    /* GEOMETRY — soft.
       An earlier pass squared everything off on the argument that
       pill buttons read as generic. The client likes the rounded
       look and that is their brand call, not mine, so the soft
       geometry is back. The palette, typography and information
       design carry the identity instead, which they do better
       anyway — corner radius was never doing that work. */
    --radius-sm:   10px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-xl:   26px;
    --radius-pill: 980px;
}

body {
    font-family: var(--font-sans);
    background: var(--canvas);
    color: var(--ink);
    letter-spacing: -0.006em;
}

/* Every number in this store is a code, a quantity or a price,
   and they all sit in columns. Tabular figures throughout. */
.product-card-price, .product-card-code, .product-card-excl,
.product-info-price, .product-info-code, .product-info-excl,
.summary-val, .summary-total, .cart-item-price, .cart-item-line-total,
.account-stat-val, .account-table td, .qty-field, .cart-qty-input,
.confirm-table td, .checkout-item-total, .checkout-item-qty {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ────────────────────────────────────────────────────────────
   TYPOGRAPHY
   Archivo has real width and weight range, so the hierarchy is
   carried by size and weight rather than by colour tricks.
   ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4,
.section-title, .hero-title, .product-info-title,
.page-header h1, .form-card-title, .cart-summary-title {
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.08;
    color: var(--ink);
}

.section-title  { font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
.section-sub    { color: var(--muted); font-size: 1rem; max-width: 58ch; line-height: 1.65; }

/* Section labels: small caps are a generated-page tell, so these
   are set as a weighted small-size label with a leading rule
   instead — a device from catalogue section dividers. */
.section-label, .brands-label {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.section-label::before, .brands-label::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
    flex-shrink: 0;
}

.breadcrumb { font-size: .8rem; color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }

/* ────────────────────────────────────────────────────────────
   BUTTONS
   ──────────────────────────────────────────────────────────── */
.btn {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: -0.005em;
    border-radius: var(--radius-pill);
    padding: .78rem 1.6rem;
    border: 1px solid transparent;
    transition: background .18s var(--ease-in-out),
                box-shadow .18s var(--ease-in-out),
                color .18s var(--ease-in-out),
                border-color .18s var(--ease-in-out);
}
.btn-primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.btn-primary:hover { background: var(--brand-hi); border-color: var(--brand-hi); }

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

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

.btn-gold { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-gold:hover { background: var(--brand-hi); }

.btn-lg { padding: .95rem 2rem; font-size: .95rem; }
.btn-sm { padding: .5rem 1rem; font-size: .8rem; }

.btn-add-cart {
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius-pill);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.btn-add-cart:hover { background: var(--brand); }

/* Visible keyboard focus everywhere, not just where it was
   remembered. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ────────────────────────────────────────────────────────────
   NAV
   ──────────────────────────────────────────────────────────── */
.nav {
    background: rgba(250,250,251,.88);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--rule);
    height: var(--nav-h);
}
.nav.scrolled { box-shadow: 0 1px 0 var(--rule); background: rgba(251,252,250,.96); }

.nav-links a, .nav-dropdown-toggle {
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink-2);
    letter-spacing: -0.004em;
    position: relative;
}
.nav-links a:hover, .nav-dropdown-toggle:hover { color: var(--brand); }

/* Active page gets a rule under it — a tab, not a colour change */
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-links a.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    background: var(--brand);
}

.nav-dropdown-menu {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background: var(--white);
    padding: .4rem;
}
.nav-dropdown-menu a { border-radius: var(--radius-sm); font-size: .85rem; }
.nav-dropdown-menu a:hover { background: var(--brand-wash); color: var(--brand); }

.nav-badge {
    background: var(--signal);
    color: #fff;
    font-weight: 700;
    font-size: .66rem;
    border-radius: 99px;
    font-variant-numeric: tabular-nums;
}
.nav-logo { max-height: 70px; width: auto; }

/* ────────────────────────────────────────────────────────────
   HERO
   Quieter than the original. The catalogue starts immediately
   below it, which is what a buyer came for.
   ──────────────────────────────────────────────────────────── */
.hero-scrim {
    background: linear-gradient(
        100deg,
        rgba(20,20,22,.88) 0%,
        rgba(20,20,22,.62) 46%,
        rgba(20,20,22,.18) 100%);
}
.hero-eyebrow {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    color: rgba(255,255,255,.82);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.hero-eyebrow::before {
    content: "";
    width: 24px; height: 2px;
    background: rgba(255,255,255,.6);
}
.hero-title {
    font-size: clamp(2.3rem, 6vw, 4.4rem);
    font-weight: 600;
    letter-spacing: -0.038em;
    line-height: 1.02;
    color: #fff;
}
.hero-sub {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: rgba(255,255,255,.86);
    max-width: 46ch;
    line-height: 1.6;
}
.hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }

/* Primary: solid white on the photograph. Maximum contrast, and the
   ink-on-white reads as the definite action. */
.hero-cta .btn-primary {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
    box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.hero-cta .btn-primary:hover {
    background: var(--brand-wash);
    border-color: var(--brand-wash);
    transform: translateY(-1px);
}

/* Secondary: white text on a frosted panel with a visible edge.
   A transparent ghost button with muted grey text disappeared
   entirely against dark hero imagery. */
.hero-cta .btn-ghost,
.hero-cta .btn-outline {
    color: #fff;
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-weight: 600;
}
.hero-cta .btn-ghost:hover,
.hero-cta .btn-outline:hover {
    background: rgba(255,255,255,.26);
    border-color: #fff;
    color: #fff;
    transform: translateY(-1px);
}

/* The hero text itself needs to survive a light patch in the photo. */
.hero-title { text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hero-sub   { text-shadow: 0 1px 12px rgba(0,0,0,.35); }

@media (max-width: 480px) {
    .hero-cta { gap: .55rem; }
    .hero-cta .btn-lg { padding: .8rem 1.35rem; font-size: .88rem; flex: 1 1 auto; justify-content: center; }
}

.hero-dot { background: rgba(255,255,255,.35); border-radius: 0; width: 22px; height: 2px; }
.hero-dot.active { background: #fff; }
.hero-prev, .hero-next {
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(0,0,0,.2);
}
.hero-prev:hover, .hero-next:hover { background: rgba(0,0,0,.42); border-color: #fff; }

/* ────────────────────────────────────────────────────────────
   PRODUCT CARD  —  the catalogue entry
   Rule-separated, square, code set as content. No shadow lift
   on hover: the image reveals instead.
   ──────────────────────────────────────────────────────────── */
.product-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: none;
    overflow: hidden;
    transition: border-color .2s var(--ease-in-out);
}
.product-card:hover {
    border-color: var(--rule);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.product-card-img, .product-card-img-placeholder {
    background: var(--white);
    border-bottom: 1px solid var(--rule-light);
}
.product-card:hover .product-card-img img { transform: scale(1.035); }
.product-card-img img { transition: transform .5s var(--ease-out); }

.product-card-body { padding: .95rem 1rem 1.1rem; }

.product-card-cat {
    font-size: .7rem;
    font-weight: 600;
    color: var(--brand);
    letter-spacing: .006em;
    text-transform: none;
}
.product-card-name {
    font-size: .93rem;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin-top: .2rem;
}
/* The item code is real data a buyer quotes on a purchase
   order, so it is treated as content rather than hidden. */
.product-card-code {
    font-size: .72rem;
    color: var(--muted);
    letter-spacing: .01em;
}
.product-card-price {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.product-card-excl, .product-info-excl { font-size: .74rem; color: var(--muted); }

.product-card-badges { gap: .35rem; }

/* Stock state as a rule-edged chip, not a pill */
.badge, .badge-stock {
    border-radius: var(--radius-pill);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .22rem .5rem;
    text-transform: none;
    border: 1px solid transparent;
}
.badge-stock.in   { background: #E7F1EA;            color: var(--success);border-color: #C8DFD0; }
.badge-stock.low  { background: #FDF4E3;            color: var(--warning);border-color: #EBD9AE; }
.badge-stock.out  { background: var(--signal-wash); color: var(--signal); border-color: #F0CDBE; }
.badge-brandable  { background: var(--white); color: var(--ink-2); border-color: var(--rule); }
.stock-dot { border-radius: 99px; }

/* ────────────────────────────────────────────────────────────
   COLOUR SWATCHES
   640 variant rows across colour and size exist in the data.
   Colour is the primary browse axis for apparel, so swatches
   are navigation rather than decoration.
   ──────────────────────────────────────────────────────────── */
.colour-swatch-dot {
    width: 15px; height: 15px;
    border-radius: 99px;
    border: 1px solid rgba(26,26,28,.22);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);
}
.colour-pill {
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--white);
    font-size: .8rem;
    font-weight: 500;
    padding: .42rem .7rem;
    transition: border-color .16s, background .16s;
}
.colour-pill:hover  { border-color: var(--ink); }
.colour-pill.active { border-color: var(--brand); background: var(--brand-wash); color: var(--brand); font-weight: 600; }

/* ────────────────────────────────────────────────────────────
   CATEGORY CARDS
   ──────────────────────────────────────────────────────────── */
.category-card {
    border-radius: var(--radius-md);
    border: 1px solid var(--rule);
    box-shadow: none;
    overflow: hidden;
}
.category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.category-card-scrim {
    background: linear-gradient(to top, rgba(20,20,22,.86) 0%, rgba(20,20,22,.12) 62%, transparent 100%);
}
.category-card-name {
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 1.05rem;
}
.category-card-count {
    font-size: .74rem;
    color: rgba(255,255,255,.76);
    font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────────────────
   FILTERS  —  catalogue index, not a pill bar
   ──────────────────────────────────────────────────────────── */
.filter-bar {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule-light);
    border-radius: 0;
    padding: .9rem .25rem 1rem;
    margin-bottom: 1.75rem;
    gap: 1rem 1.5rem;
}
.filter-bar > * { min-width: 0; }

/* The count and the sort control sit at opposite ends on desktop
   and stack cleanly on a phone rather than crushing together. */
@media (max-width: 560px) {
    .filter-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: .7rem;
    }
    .filter-sort { width: 100%; justify-content: space-between; }
}

.filter-sort { gap: .6rem; }
.filter-sort label { color: var(--muted); font-weight: 500; white-space: nowrap; }
.filter-sort select {
    padding: .5rem 2.1rem .5rem .85rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--rule);
    background: var(--white);
    font-weight: 500;
    /* Native arrow sits too close to the pill edge, so draw our own. */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236A7871' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
}
.filter-sort select:hover  { border-color: var(--ink-2); }
.filter-sort select:focus  { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(88,88,90,.18); outline: none; }
.filter-pill {
    border-radius: var(--radius-pill);
    border: 1px solid var(--rule);
    background: var(--white);
    font-size: .82rem;
    font-weight: 500;
    color: var(--ink-2);
    padding: .45rem .85rem;
}
.filter-pill:hover { border-color: var(--ink); color: var(--ink); }
.filter-pill.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 600;
}
.filter-sort select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--white);
    font-family: var(--font-sans);
    font-size: .85rem;
    padding: .5rem 2rem .5rem .75rem;
}

/* ────────────────────────────────────────────────────────────
   PRODUCT DETAIL
   ──────────────────────────────────────────────────────────── */
.product-info-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}
.product-info-cat { color: var(--brand); font-weight: 600; font-size: .8rem; text-transform: none; }
.product-info-code { font-size: .8rem; color: var(--muted); }
.product-info-price {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.028em;
}
.product-info-panel {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
}
.product-divider { border-color: var(--rule-light); }

.product-meta-list { font-size: .86rem; }
.product-meta-list dt { color: var(--muted); font-weight: 500; }
.product-meta-list dd { color: var(--ink); font-weight: 600; }

.gallery-main {
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
}
.gallery-thumb {
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--white);
    overflow: hidden;
    transition: border-color .16s;
}
.gallery-thumb:hover  { border-color: var(--ink-2); }
.gallery-thumb.active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

.variant-table { font-size: .86rem; }
.variant-table th {
    font-weight: 600;
    color: var(--muted);
    font-size: .74rem;
    letter-spacing: .01em;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    padding: .5rem .6rem;
}
.variant-table td { border-bottom: 1px solid var(--rule-light); padding: .55rem .6rem; }
.variant-qty { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Zoom lightbox (see js/zoom.js) ────────────────────────── */
.zoom-hint {
    position: absolute;
    right: .7rem; bottom: .7rem;
    background: rgba(26,26,28,.72);
    color: #fff;
    font-size: .7rem;
    font-weight: 500;
    padding: .3rem .55rem;
    border-radius: var(--radius-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.gallery-main:hover .zoom-hint { opacity: 1; }

.zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(16,16,18,.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease-in-out), visibility .22s;
}
.zoom-overlay.open { opacity: 1; visibility: visible; }

.zoom-stage {
    position: relative;
    max-width: 92vw;
    max-height: 88vh;
    overflow: hidden;
    cursor: zoom-in;
}
.zoom-stage.zoomed { cursor: zoom-out; }
.zoom-stage img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    transition: transform .28s var(--ease-out);
    transform-origin: center center;
    will-change: transform;
    background: #fff;
}
.zoom-stage.zoomed img { transition: transform .08s linear; }

.zoom-close, .zoom-prev, .zoom-next {
    position: absolute;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .16s, border-color .16s;
    z-index: 2;
}
.zoom-close:hover, .zoom-prev:hover, .zoom-next:hover {
    background: rgba(255,255,255,.22);
    border-color: #fff;
}
.zoom-close { top: 1.25rem; right: 1.25rem; }
.zoom-prev  { left: 1.25rem;  top: 50%; transform: translateY(-50%); }
.zoom-next  { right: 1.25rem; top: 50%; transform: translateY(-50%); }

.zoom-caption {
    position: absolute;
    left: 0; right: 0; bottom: 1.1rem;
    text-align: center;
    color: rgba(255,255,255,.8);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* ────────────────────────────────────────────────────────────
   FORMS
   ──────────────────────────────────────────────────────────── */
.form-control {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-family: var(--font-sans);
    font-size: .9rem;
    padding: .7rem .85rem;
    color: var(--ink);
    transition: border-color .16s, box-shadow .16s;
}
.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(88,88,90,.18);
    outline: none;
}
.form-control::placeholder { color: #9AA79F; }

.form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: .004em;
    text-transform: none;
}
.form-hint { font-size: .76rem; color: var(--muted); }
.req { color: var(--signal); }

.form-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.form-card-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.022em; }

.qty-control, .cart-qty-form {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--white);
    overflow: hidden;
}
.qty-btn, .cart-qty-btn {
    background: var(--white);
    color: var(--ink-2);
    border: none;
    transition: background .14s;
}
.qty-btn:hover, .cart-qty-btn:hover { background: var(--brand-wash); color: var(--brand); }
.qty-field, .cart-qty-input {
    border: none;
    border-left: 1px solid var(--rule-light);
    border-right: 1px solid var(--rule-light);
    font-weight: 600;
    text-align: center;
}

/* ────────────────────────────────────────────────────────────
   CART / CHECKOUT
   ──────────────────────────────────────────────────────────── */
.cart-item-card, .cart-summary-card, .checkout-layout .form-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.cart-item-img { border: 1px solid var(--rule-light); border-radius: var(--radius-sm); background: var(--white); }
.cart-item-name { font-weight: 600; letter-spacing: -0.012em; }
.cart-item-meta { font-size: .78rem; color: var(--muted); }

.cart-summary-title { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.018em; }
.summary-line { font-size: .875rem; border-bottom: 1px solid var(--rule-light); padding: .6rem 0; }
.summary-label { color: var(--muted); }
.summary-val   { font-weight: 600; }
.summary-total {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.026em;
    border-top: 2px solid var(--ink);
    padding-top: .8rem;
}
.summary-note { font-size: .76rem; color: var(--muted); }
.summary-free { color: var(--success); font-weight: 600; }

.payment-option {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--white);
    transition: border-color .16s, background .16s;
}
.payment-option:hover { border-color: var(--ink-2); }
.payment-option.active, .payment-option-pesepay {
    border-color: var(--brand);
    background: var(--brand-wash);
}
.payment-option-badge {
    background: var(--brand);
    color: #fff;
    border-radius: 2px;
    font-size: .66rem;
    font-weight: 700;
}

.confirm-icon { color: var(--brand); }
.confirm-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.confirm-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; }
.confirm-order-no { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand); }

/* ────────────────────────────────────────────────────────────
   ALERTS
   ──────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius-sm);
    border: 1px solid;
    border-left-width: 3px;
    font-size: .875rem;
    padding: .85rem 1rem;
}
.alert-success { background: #E7F1EA;            border-color: #C8DFD0; color: #1E5735; }
.alert-error   { background: var(--signal-wash); border-color: #EEC7B6; color: #7E2E12; }
.alert-info    { background: #EBF1F5;            border-color: #C7D8E3; color: #204457; }
.alert-warning { background: #FBF3E0;            border-color: #E8D6A8; color: #6B4700; }

/* ────────────────────────────────────────────────────────────
   ACCOUNT
   ──────────────────────────────────────────────────────────── */
.account-sidebar, .account-main {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.account-nav-item {
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink-2);
}
.account-nav-item:hover  { background: var(--rule-light); color: var(--ink); }
.account-nav-item.active { background: var(--brand); color: #fff; font-weight: 600; }
.account-avatar {
    background: var(--brand);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: 700;
}
.account-stat-card {
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}
.account-stat-val { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.026em; }
.account-stat-label { font-size: .74rem; color: var(--muted); }

.account-table th {
    font-size: .74rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .008em;
    text-transform: none;
    border-bottom: 1px solid var(--rule);
    padding: .6rem .7rem;
}
.account-table td { border-bottom: 1px solid var(--rule-light); font-size: .86rem; padding: .7rem; }
.account-table tr:hover td { background: var(--rule-light); }

/* ────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────── */
.footer {
    background: var(--ink);
    color: rgba(255,255,255,.72);
    border-top: 3px solid var(--brand);
}
.footer-col h4, .footer-col .footer-title {
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .006em;
    text-transform: none;
}
.footer a { color: rgba(255,255,255,.72); }
.footer a:hover { color: #fff; }
.footer-desc { font-size: .86rem; line-height: 1.7; color: rgba(255,255,255,.6); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: .78rem;
    color: rgba(255,255,255,.5);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.footer-bottom .sep { opacity: .4; }
.footer-bottom a { color: rgba(255,255,255,.62); }
.footer-bottom a:hover { color: #fff; }
.footer-logo { max-height: 34px; width: auto; }

/* ────────────────────────────────────────────────────────────
   MISC
   ──────────────────────────────────────────────────────────── */
.pagination .page-link {
    border-radius: var(--radius-pill);
    min-width: 40px;
    text-align: center;
    border: 1px solid var(--rule);
    background: var(--white);
    font-size: .85rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}
.pagination .page-link:hover { border-color: var(--ink); }
.pagination .page-link.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 600;
}

.empty-state { color: var(--muted); }
.empty-state i { color: var(--rule); }

.value-card, .contact-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.value-icon, .contact-card-icon { color: var(--brand); }
.value-title, .contact-card-title { font-weight: 600; letter-spacing: -0.015em; }

.toast {
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--brand);
    background: var(--ink);
    color: #fff;
    font-size: .86rem;
}

.brands-section { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* Someone who asked for less motion gets less motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .brands-track { animation: none !important; }
}

/* ────────────────────────────────────────────────────────────
   OPTIONS STRIP
   Replaces the old "Multiple Variants" badge on group cards.

   The badge was trade vocabulary — buyers think in colours and
   sizes, not variants — and it discarded information the data
   already held. This shows the options themselves: a row of
   swatches and the size range. It reads faster than a sentence
   and gives a reason to click.
   ──────────────────────────────────────────────────────────── */
.opt-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .55rem;
    margin: .45rem 0 .55rem;
    min-height: 20px;
}

.opt-colours { display: inline-flex; align-items: center; gap: 3px; }

.opt-swatch {
    width: 13px;
    height: 13px;
    border-radius: 99px;
    display: inline-block;
    /* Inner white ring keeps a white swatch visible against paper
       and stops dark swatches merging into each other. */
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9),
                0 0 0 1px rgba(26,26,28,.25);
    flex-shrink: 0;
}
/* A colour name we can't map gets a neutral chip rather than a
   wrong swatch, which would mislead worse than showing nothing. */
.opt-swatch-unknown {
    background: repeating-linear-gradient(
        45deg, #DDE2DC 0 3px, #EDF0EC 3px 6px);
}

.opt-more {
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted);
    margin-left: .15rem;
    font-variant-numeric: tabular-nums;
}

.opt-label {
    font-size: .745rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: .004em;
}
.opt-sizes {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink-2);
}

.opt-sep {
    width: 1px;
    height: 11px;
    background: var(--rule);
    display: inline-block;
}

.opt-strip-plain { font-size: .745rem; color: var(--muted); }

/* On the product detail page the strip carries more weight. */
.product-info-panel .opt-strip { gap: .5rem .7rem; margin: .6rem 0 .9rem; }
.product-info-panel .opt-swatch { width: 16px; height: 16px; }
.product-info-panel .opt-label  { font-size: .8rem; }

/* ════════════════════════════════════════════════════════════
   COMPLETENESS PASS
   ------------------------------------------------------------
   Classes used in the page templates that were never defined in
   ANY stylesheet. store.css never had them, and the theme layer
   above only tweaked properties on the assumption a base
   definition existed — so these elements rendered as bare HTML.

   This is why the product detail page looked broken: the whole
   variant table had no layout at all.
   ════════════════════════════════════════════════════════════ */

/* ── Variant table (product.php) ─────────────────────────────
   The size/colour availability grid. Had no width, no borders,
   no cell padding — it was rendering as an unstyled HTML table
   in the middle of an otherwise designed page. */
.variant-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.variant-table thead th {
    background: var(--rule-light);
    font-weight: 600;
    font-size: .74rem;
    color: var(--muted);
    letter-spacing: .01em;
    text-align: left;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
.variant-table td {
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--rule-light);
    color: var(--ink-2);
    vertical-align: middle;
}
.variant-table tbody tr:last-child td { border-bottom: none; }

.variant-row { transition: background .14s var(--ease-in-out); }
.variant-row:hover { background: var(--brand-wash); }
.variant-row.is-out { opacity: .5; }
.variant-row.is-selected {
    background: var(--brand-wash);
    box-shadow: inset 3px 0 0 var(--brand);
}

.variant-qty {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
}
.variant-qty.low  { color: var(--warning); }
.variant-qty.out  { color: var(--muted); font-weight: 500; }

/* Size labels read as chips, which scans faster than plain text
   when someone is hunting for their size down a column. */
.variant-size {
    display: inline-block;
    min-width: 42px;
    text-align: center;
    padding: .2rem .55rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 600;
    background: var(--white);
}

@media (max-width: 640px) {
    .variant-table { font-size: .8rem; }
    .variant-table thead th,
    .variant-table td { padding: .5rem .55rem; }
}

/* ── Colour pill: full definition, not just a tweak ────────── */
.colour-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}
.colour-pill .colour-swatch-dot { flex-shrink: 0; }
.colour-options {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .5rem 0 .25rem;
}

/* ── Badge variants the templates ask for ──────────────────── */
.badge-blue   { background: #E6EFF4; color: #1C4659; border-color: #C4D9E4; }
.badge-green  { background: var(--brand-wash);  color: var(--brand);  border-color: #C6DBCF; }
.badge-red    { background: var(--signal-wash); color: var(--signal); border-color: #F0CDBE; }
.badge-orange { background: #FBECE3; color: #8C3512; border-color: #F0CFBC; }
.badge-grey   { background: var(--rule-light);  color: var(--muted);  border-color: var(--rule); }

/* ── Cart quantity stepper (cart.php) ──────────────────────── */
.cart-qty-minus, .cart-qty-plus {
    background: var(--white);
    border: none;
    color: var(--ink-2);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .8rem;
    transition: background .14s, color .14s;
}
.cart-qty-minus:hover, .cart-qty-plus:hover { background: var(--brand-wash); color: var(--brand); }
.cart-qty-minus:disabled, .cart-qty-plus:disabled { opacity: .35; cursor: not-allowed; }

/* ── account.php borrows admin class names ─────────────────── */
.card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.card-body { padding: 1.35rem; }

.flash-message {
    animation: tgFlashIn .3s var(--ease-out);
}
@keyframes tgFlashIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── contact.php ───────────────────────────────────────────── */
.contact-info {
    display: grid;
    gap: 1rem;
}
.contact-info a { color: var(--ink); text-decoration: none; }
.contact-info a:hover { color: var(--brand); }

/* ── quotation_request.php ─────────────────────────────────── */
.total {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ── Product detail layout, hardened ───────────────────────────
   store.css defines the grid but assumes a wide viewport; below
   ~900px the gallery and info column were fighting each other. */
.product-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
@media (max-width: 900px) {
    .product-detail-layout { grid-template-columns: 1fr; gap: 1.75rem; }
}

.product-gallery { position: sticky; top: calc(var(--nav-h) + 1.25rem); }
@media (max-width: 900px) {
    .product-gallery { position: static; }
}

.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: .5rem;
    margin-top: .75rem;
}
.gallery-thumb { aspect-ratio: 1 / 1; cursor: pointer; padding: 0; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery-main { aspect-ratio: 1 / 1; display: block; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; }

.product-info-panel { padding: 1.35rem; }
.product-info-stock { display: flex; align-items: center; gap: .45rem; font-size: .875rem; }

.product-cta {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1.1rem;
}
.product-cta .btn-add-cart { flex: 1 1 200px; justify-content: center; }

.product-meta-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .45rem 1.25rem;
    margin: 0;
}
.product-meta-list dt { margin: 0; }
.product-meta-list dd { margin: 0; text-align: right; }

.btn-quick-view {
    width: 42px; height: 42px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .16s, color .16s, background .16s;
    flex-shrink: 0;
}
.btn-quick-view:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }

/* ── Grid helpers used by several pages ────────────────────── */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: clamp(.9rem, 2vw, 1.4rem);
}
.products-grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 520px) {
    .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .product-card-body { padding: .75rem .8rem .9rem; }
    .product-card-name { font-size: .86rem; }
}

/* ════════════════════════════════════════════════════════════
   CONTRAST FIXES
   ------------------------------------------------------------
   A systemic bug in this theme layer, not two isolated ones.

   store.css writes multi-property rules:

       .filter-pill:hover, .filter-pill.active {
           background: var(--ink); color: var(--white); ... }
       .btn-outline:hover {
           background: var(--ink); color: var(--white); ... }

   The theme above then overrode only SOME of those properties at
   the same specificity. Whatever it didn't restate survived from
   store.css — so you got:

     "In Stock Only"      theme set color:ink, left background:ink
                          -> black text on black
     "Request Quotation"  theme set background:white, left color:white
                          -> white text on white

   Both were invisible on hover. The lesson is to restate EVERY
   property of any rule being overridden, which is what these do.
   ════════════════════════════════════════════════════════════ */

/* ── Filter pills (In Stock Only, category chips) ──────────── */
.filter-pill,
a.filter-pill {
    background: var(--white);
    color: var(--ink-2);
    border: 1px solid var(--rule);
}
.filter-pill:hover,
a.filter-pill:hover {
    background: var(--brand-wash);
    color: var(--ink);
    border-color: var(--brand);
}
.filter-pill.active,
a.filter-pill.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    font-weight: 600;
}
.filter-pill.active:hover,
a.filter-pill.active:hover {
    background: var(--brand-hi);
    color: #fff;
    border-color: var(--brand-hi);
}
.filter-pill i { opacity: .85; }

/* ── Outline buttons (Request Quotation / Request Quote) ───── */
.btn-outline {
    background: var(--white);
    color: var(--ink);
    border-color: var(--rule);
}
.btn-outline:hover,
.btn-outline:focus-visible {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
/* The hero variants define their own light-on-dark treatment
   further up and must not inherit the dark-fill hover. */
.hero-cta .btn-outline:hover,
.hero-cta .btn-ghost:hover {
    background: rgba(255,255,255,.26);
    color: #fff;
    border-color: #fff;
}

/* ── Every other button state, stated in full ──────────────── */
.btn-primary            { background: var(--brand);    color: #fff; border-color: var(--brand); }
.btn-primary:hover      { background: var(--brand-hi); color: #fff; border-color: var(--brand-hi); }
.btn-gold               { background: var(--ink);      color: #fff; border-color: var(--ink); }
.btn-gold:hover         { background: var(--brand);    color: #fff; border-color: var(--brand); }
.btn-add-cart           { background: var(--ink);      color: #fff; }
.btn-add-cart:hover     { background: var(--brand);    color: #fff; }
.btn-ghost              { background: transparent;     color: var(--muted); border-color: transparent; }
.btn-ghost:hover        { background: var(--rule-light); color: var(--ink); border-color: transparent; }

.btn:disabled,
.btn[disabled] {
    background: var(--rule-light);
    color: var(--muted);
    border-color: var(--rule);
    cursor: not-allowed;
    opacity: 1;
}

/* ── Pagination and colour pills, same treatment ───────────── */
.pagination .page-link         { background: var(--white); color: var(--ink-2); border-color: var(--rule); }
.pagination .page-link:hover   { background: var(--brand-wash); color: var(--ink); border-color: var(--brand); }
.pagination .page-link.active,
.pagination .page-link.active:hover {
    background: var(--brand); color: #fff; border-color: var(--brand);
}

.colour-pill        { background: var(--white); color: var(--ink-2); border-color: var(--rule); }
.colour-pill:hover  { background: var(--brand-wash); color: var(--ink); border-color: var(--brand); }
.colour-pill.active,
.colour-pill.active:hover {
    background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600;
}
.colour-pill.active .colour-swatch-dot { box-shadow: inset 0 0 0 2px rgba(255,255,255,.95), 0 0 0 1px rgba(0,0,0,.2); }

/* Two remaining partial overrides, caught by auditing every rule in
   store.css that sets both background and color against what this
   file restates. Same class of bug as the buttons above. */
.filter-sort select { color: var(--ink); background-color: var(--white); }
.account-table th   { background: transparent; color: var(--muted); }

/* ════════════════════════════════════════════════════════════
   TRUSTED BRANDS
   ------------------------------------------------------------
   The label was .68rem uppercase and, because an earlier rule in
   this file made it inline-flex, it lost store.css's centring and
   collapsed against the left edge of a section with no horizontal
   padding. It now sits inside .container, on the same left edge
   as every other section heading, at a size that reads as a
   heading rather than a caption.

   Logos were greyscale at 55% opacity until hovered. These are
   the clients' own brand marks — showing them in colour is the
   point of the strip.
   ════════════════════════════════════════════════════════════ */
.brands-section { padding: 2.75rem 0 3rem; }

.brands-label {
    display: block;
    text-align: left;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--ink);
    margin: 0 0 1.75rem;
    line-height: 1.2;
}
/* The leading rule belongs to small section labels, not headings. */
.brands-label::before { content: none; display: none; }

.brands-track img {
    filter: none;
    opacity: 1;
    transition: transform .3s var(--ease-out);
}
.brands-track img:hover {
    filter: none;
    opacity: 1;
    transform: scale(1.06);
}

/* ════════════════════════════════════════════════════════════
   TEXT SIZE CONTROL  (assets/js/textsize.js)
   ════════════════════════════════════════════════════════════ */
.text-size {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--white);
    margin-right: .35rem;
}
.text-size-btn,
.text-size-reset {
    border: none;
    background: transparent;
    color: var(--ink-2);
    /* Fixed px on purpose: the control must not grow and shrink as
       it scales the page, or it shifts under the user's pointer
       between clicks. */
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-sans);
    min-width: 30px;
    height: 28px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .15s, color .15s;
}
.text-size-btn-lg { font-size: 16px; }
.text-size-btn sup { font-size: .62em; font-weight: 700; margin-left: 1px; top: -.5em; }
.text-size-reset { font-size: 11px; min-width: 28px; color: var(--muted); }

.text-size-btn:hover:not(:disabled),
.text-size-reset:hover {
    background: var(--brand-wash);
    color: var(--ink);
}
.text-size-btn:disabled { opacity: .32; cursor: not-allowed; }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* On a phone the nav is tight; drop the reset and tighten spacing
   rather than hiding the feature from the users most likely to
   need it. */
@media (max-width: 520px) {
    .text-size { margin-right: .15rem; }
    .text-size-reset { display: none !important; }
    .text-size-btn { min-width: 26px; padding: 0 4px; }
}

/* At the largest sizes the nav links would crowd the bar. Let it
   grow in height rather than overflow. */
html[data-text-size="3"] .nav,
html[data-text-size="4"] .nav { height: auto; min-height: var(--nav-h); }


/* ════════════════════════════════════════════════════════════
   [hidden] MUST HIDE
   ------------------------------------------------------------
   The browser's built-in rule for the hidden attribute is weaker
   than any author rule that sets display — so .btn's
   display:inline-flex quietly un-hid every hidden button. That
   kept the quotation buttons visible on an empty cart, and had
   the text-size reset button showing permanently.
   ════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════
   PRODUCT IMAGE — centred in its frame
   ------------------------------------------------------------
   store.css centred the image with a flexbox; an earlier rule in
   this file set the frame to display:block, which switched the
   centring off, and an inline max-height:480px in the markup then
   left a shorter image box parked at the top of a square frame.

   The image is now positioned absolutely with all four edges at
   zero and auto margins — which centres it on both axes whatever
   its proportions — and capped at 88% so there is breathing room
   around it. The frame keeps flex centring for the "no image"
   placeholder.
   ════════════════════════════════════════════════════════════ */
.gallery-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 100%;
}
.gallery-main img,
.gallery-main #mainImg {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    display: block;
}
/* Very old browsers without aspect-ratio: hold the square open with
   the padding technique so the absolutely placed image has a box. */
@supports not (aspect-ratio: 1 / 1) {
    .gallery-main { height: 0; padding-bottom: 100%; }
}