/* NSCC design-audit fixes (fix-catalog), 2 Nov 2026 - see includes/header.php for load order. */

/* ===========================================================================
   Categories & offers design pass
   ---------------------------------------------------------------------------
   Loaded last (after app.css, typography.css and theme-refresh.css), so a rule
   here wins over an equal-specificity rule there on source order. Weights are
   400/500/700 only; spacing sits on the 4/8px grid.

   1. One calm product card everywhere (price, saving, badge, Add to cart)
   2. "On sale now" band head
   3. Homepage "Shop by category": rounded photo tiles that fill the row
   4. Combo offers: one card design, a lone combo as a feature card
   5. Offer strip, compact when the meter is alone
   6. Promo band: one wine family, white type instead of gold
   7. Category landing on phones: range tiles above the fold
   8. Listing chrome: neutral rules, quiet sidebar, one-row toolbar on phones
   9. Header pills: active state, one swipe row on phones
   =========================================================================== */

/* --- 1. Product card ------------------------------------------------------
   /shop, the homepage rails and the hair landing grid used to print two
   different cards (sentence-case "86% off" and a pink pill button on one,
   uppercase "40% OFF" and a transparent square-ish button on the other).
   The landing-only overrides in app.css are neutralised here, so one card
   design applies on every page that calls product_card(). */
.sik-card__brand { font-weight: 500; letter-spacing: .06em; }
.sik-card__name { font-weight: 500; }
.sik-card__price { gap: 4px 8px; }
.sik-card__price .sik-price { font-weight: 700; }
.sik-card__price .sik-price--mrp { font-size: 13px; font-weight: 400; }
.sik-card__price .sik-price--off,
.sik-listing--landing .sik-card__price .sik-price--off {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sik-success-ink);
}
/* On phones the saving always takes its own line, so every two-up row has
   the same shape instead of one card wrapping and its neighbour not. */
@media (max-width: 479.98px) {
    .sik-card__price .sik-price--off { flex-basis: 100%; }
}

/* One badge shape for product and combo cards. */
.sik-card__badges .sik-badge,
.sik-combo__badges .sik-badge {
    padding: 4px 8px;
    border-radius: var(--sik-radius-xs);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: none;
}
/* Nearly every product is a new arrival, so a dark-green NEW pill on every
   card competed with the green saving and said nothing. It becomes a quiet
   white tag; red Flash sale / Deal and the grey Out of stock keep their tones. */
.sik-card__badges .sik-badge--k-new {
    background: var(--sik-surface);
    color: var(--sik-ink);
    border: 1px solid var(--sik-line-strong);
}

/* Add to cart at rest: white with a brand outline, on every page. The
   in-cart, disabled and success skins are excluded through :where(), and the
   hover fill (app.css section 11 and the landing hover rule, both one class
   heavier) still wins on hover. The landing selector is listed so the
   landing-only transparent resting rule (0,3,0) loses on source order. */
.sik-card__foot .sik-atc--outline:where(:not([disabled]):not(.is-out):not(.is-incart):not(.is-success)),
.sik-listing--landing .sik-card__foot .sik-atc--outline:where(:not([disabled]):not(.is-out):not(.is-incart):not(.is-success)) {
    background: var(--sik-surface);
    color: var(--sik-primary-ink);
    border-color: color-mix(in srgb, var(--sik-primary) 45%, var(--sik-line));
    font-weight: 500;
}
/* The landing grid had its own smaller radius; the theme's button radius
   applies there too now. */
.sik-listing--landing .sik-card__foot .sik-atc { border-radius: var(--sik-radius-btn); }

/* --- 2. "On sale now" band ------------------------------------------------ */
.sik-flash__title { font-weight: 700; }
.sik-flash__sub { font-weight: 500; }

/* --- 3. Homepage "Shop by category" (grid layout only) --------------------
   Five 88px circles spread across a 1224px row read as stray dots. In the
   grid layout the circles become rounded-square photo tiles that fill their
   column - the same shape as the category landing range tiles. The carousel
   layout (.sik-catrow.sik-rail__track) is untouched. */
.sik-catrow--wrap { gap: 24px 16px; }
.sik-catrow--wrap .sik-catrow__tile {
    width: 100%;
    gap: 8px;
    border-radius: 16px;
}
.sik-catrow--wrap .sik-catrow__ring {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--sik-primary) 14%, var(--sik-line));
    background: var(--sik-primary-soft);
    box-shadow: none;
}
/* (0,3,0) on purpose: beats the nth-child rainbow tints in app.css. */
.sik-catrow--wrap .sik-catrow__tile .sik-catrow__ring--contain {
    background: var(--sik-primary-soft);
    box-shadow: none;
}
.sik-catrow--wrap .sik-catrow__label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}
@media (hover: hover) {
    .sik-catrow--wrap .sik-catrow__tile:hover .sik-catrow__ring,
    .sik-catrow--wrap .sik-catrow__tile:hover .sik-catrow__ring--contain {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--sik-primary) 45%, transparent);
        box-shadow: var(--sik-shadow-brand-sm);
    }
}
.sik-noanim .sik-catrow--wrap .sik-catrow__tile:hover .sik-catrow__ring { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .sik-catrow--wrap .sik-catrow__tile:hover .sik-catrow__ring { transform: none; }
}
.sik-catrow--wrap .sik-catrow__tile:focus-visible {
    outline: 2px solid var(--sik-primary);
    outline-offset: 3px;
}
/* Below 1024px the row wraps centred, so a short last row reads as
   deliberate instead of one orphan tile in a two-up grid. */
@media (max-width: 1023.98px) {
    .sik-catrow--wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 12px;
    }
    .sik-catrow--wrap > .sik-catrow__tile { flex: 0 0 calc((100% - 2 * 12px) / 3); }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    .sik-catrow--wrap > .sik-catrow__tile { flex-basis: calc((100% - 4 * 12px) / 5); }
}

/* --- 4. Combo offers ------------------------------------------------------ */
/* A plain saving line, not a second pink chip beside the "15% off". */
.sik-combo__save {
    margin: 0;
    padding: 0;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--sik-success-ink);
}
.sik-combo__name { font-weight: 500; }
/* A lone card has no row to line its price up with: no reserved second line. */
.sik-grid > .sik-combo:only-child .sik-combo__name { min-height: 0; }
/* One combo on its own (homepage band, /combos) is one full-width feature
   card - photo left, details right - instead of a 400px card beside two
   empty columns. Two or more use the normal grid. */
@media (min-width: 768px) {
    .sik-grid > .sik-combo:only-child {
        grid-column: 1 / -1;
        flex-direction: row;
    }
    .sik-grid > .sik-combo:only-child .sik-combo__media {
        flex: 0 0 min(44%, 520px);
        aspect-ratio: 4 / 3;
    }
    .sik-grid > .sik-combo:only-child .sik-combo__body {
        justify-content: center;
        gap: 8px;
        padding: 32px;
    }
    .sik-grid > .sik-combo:only-child .sik-combo__foot {
        max-width: 280px;
        margin-top: 0;
        padding-top: 16px;
    }
    /* Alone it has no grid row to line up with: no reserved second name line,
       a heading size, and a thumbnail well as wide as its thumbnails. */
    .sik-grid > .sik-combo:only-child .sik-combo__name {
        min-height: 0;
        font-size: 20px;
        font-weight: 700;
    }
    .sik-grid > .sik-combo:only-child .sik-combo__items { align-self: flex-start; }
}
@media (min-width: 1024px) {
    .sik-grid > .sik-combo:only-child .sik-combo__name { font-size: 24px; }
}

/* --- 5. Offer strip ------------------------------------------------------- */
.sik-strip__title,
.sik-strip__amount { font-weight: 700; }
.sik-strip__card--ship:only-child { min-height: 0; box-shadow: none; }
/* Alone, the delivery meter is one ~72px row (icon and amount, bar, status
   line) rather than a 148px card. */
@media (min-width: 768px) {
    .sik-strip__card--ship:only-child .sik-strip__body {
        flex-direction: row;
        align-items: center;
        gap: 24px;
        padding: 16px 24px;
    }
    .sik-strip__card--ship:only-child .sik-strip__meter { flex: 1 1 auto; }
    .sik-strip__card--ship:only-child .sik-strip__fine { flex: 0 0 auto; font-size: 13px; }
}

/* --- 6. Promo band --------------------------------------------------------
   All three cards use variant 1's wine recipe (the purple third card was off
   the family), and the gold eyebrow and gold "FROM" price become white - the
   existing >= 4.5:1 pairing on these stops. The model cut-outs
   (.sik-promo__photo--model, theme-refresh.css) are untouched; their glow
   follows --promo-lit. */
.sik-promo--2,
.sik-promo--3 {
    --promo-deep: color-mix(in srgb, var(--sik-accent) 24%, var(--sik-inverse));
    --promo-lit:  color-mix(in srgb, var(--sik-accent) 62%, var(--sik-inverse));
}
.sik-promo .sik-flourish.sik-promo__eyebrow {
    color: var(--sik-on-inverse);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow: none;
}
.sik-promo__price { font-weight: 500; }
.sik-promo__price b {
    color: var(--sik-on-inverse);
    font-size: 28px;
    font-weight: 700;
}

/* --- 7. Category landing hero on phones -----------------------------------
   The 210px banner band, a three-line description and a CTA filled the whole
   first screen, so the range tiles started below the fold. The CTA only
   jumps to #products, which on a phone sits right under the tile row. The
   full description stays in the DOM (clamped visually to two lines). The
   glyph and collage hero variants (no banner) keep their own sizing. */
@media (max-width: 767.98px) {
    .sik-catland__hero { gap: 16px; padding-bottom: 20px; }
    .sik-catland__media:has(.sik-catland__banner) { height: 144px; }
    .sik-catland__title { font-size: 28px; }
    .sik-catland__tagline { margin-top: 4px; font-size: 16px; }
    .sik-catland__desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
    .sik-catland__desc > * { margin: 0; }
    .sik-catland__desc > * + * { display: none; }
    .sik-catland__cta { display: none; }
    .sik-catland__tiles { margin-top: 16px; }
}

/* --- 8. Listing chrome (/shop, /category/<range>, /deals, /search ...) ---- */
.sik-listing__head::after {
    height: 1px;
    margin-top: 24px;
    border-radius: 0;
    background: var(--sik-line);
}
.sik-listing__title { font-weight: 700; }
.sik-filters { box-shadow: none; }
.sik-filters__head::after { height: 1px; background: var(--sik-line); }
.sik-filters__title svg {
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--sik-ink-2);
}
.sik-filter__head { font-weight: 500; }
.sik-toolbar { box-shadow: none; border-color: var(--sik-line); }

/* Phones, sidebar layout only (the landing toolbar is not inside
   .sik-listing__layout): one count line, then Filters and Sort as two equal
   44px buttons, edge to edge. The grid/list switch is hidden here (list view
   is still reachable from tablet up and by ?view=list). Still sticky. */
@media (max-width: 767.98px) {
    .sik-listing__layout .sik-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        margin-inline: calc(var(--gutter) * -1);
        padding: 8px var(--gutter);
        border: 0;
        border-bottom: 1px solid var(--sik-line);
        border-radius: 0;
    }
    .sik-listing__layout .sik-toolbar__meta,
    .sik-listing__layout .sik-toolbar__controls { display: contents; }
    .sik-listing__layout .sik-toolbar__meta > span {
        grid-column: 1 / -1;
        order: -1;
        font-size: 13px;
        color: var(--sik-ink-2);
    }
    .sik-listing__layout .sik-btn.sik-filtertoggle,
    .sik-listing__layout .sik-toolbar__sort {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }
    /* Side by side, the two read as one pair: the same white field, grey
       hairline, ink label, corner, size and weight. Filters was a pink-tinted
       button with 13px text beside a white 16px select. 16px because a select
       under 16px makes iOS zoom the page on focus. background-color only, so
       the select keeps its chevron image. (0,3,0) beats app.css's
       .sik-btn.sik-filtertoggle (0,2,0) and its (0,3,0) hover on order. */
    .sik-listing__layout .sik-btn.sik-filtertoggle,
    .sik-listing__layout .sik-toolbar__sort,
    .sik-listing__layout .sik-btn.sik-filtertoggle:hover {
        background-color: var(--sik-surface);
        border: 1px solid var(--sik-line-strong);
        border-radius: var(--sik-radius-sm);
        color: var(--sik-ink);
        font-size: 16px;
        font-weight: 500;
    }
    .sik-listing__layout .sik-btn.sik-filtertoggle svg { color: var(--sik-muted); }
    @media (hover: hover) {
        .sik-listing__layout .sik-btn.sik-filtertoggle:hover,
        .sik-listing__layout .sik-toolbar__sort:hover { border-color: color-mix(in srgb, var(--sik-text) 35%, var(--sik-surface)); }
    }
    .sik-listing__layout .sik-viewtoggle { display: none; }
}

/* --- 9. Header pills (sibling ranges, discount bands) --------------------- */
.sik-listing__pills .sik-pill.is-active {
    background: var(--sik-primary-soft);
    background-image: none;
    border-color: color-mix(in srgb, var(--sik-primary) 45%, transparent);
    color: var(--sik-primary-ink);
    box-shadow: none;
    font-weight: 500;
}
.sik-listing__pills .sik-pill.is-active .sik-pill__count { color: var(--sik-primary-ink); }
/* One swipe row on phones instead of three wrapped lines of pills. */
@media (max-width: 767.98px) {
    .sik-listing__pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        margin-inline: calc(var(--gutter) * -1);
        padding: 2px var(--gutter);
    }
    .sik-listing__pills::-webkit-scrollbar { display: none; }
    .sik-listing__pills .sik-pill { flex: none; }
}

/* ===========================================================================
   10. Product page: live "In stock" pill + "N people bought this"
   ---------------------------------------------------------------------------
   The owner's 2 Nov request: a blink on "In stock", and how many people
   bought the product, animated.

   The pill. The label never blinks (text that flashes on and off is hard to
   read and is the thing WCAG warns about). Instead a ring grows out of the
   6px dot and fades, like a "live" light: transform + opacity only, so it
   costs no layout or paint. Green while in stock, amber on "Only N left",
   nothing at all when out of stock. products.js replaces the pill's whole
   className when a variant changes ("sik-status sik-status--<tone>"), so the
   hook is the [data-variant-stock] ATTRIBUTE it never touches plus the tone
   class it writes - the ring follows the variant with no script change. The
   attribute also scopes it: only the product page and its Quick View buy box
   carry it, so no listing card, account page or admin table pulses.

   The line. product.php prints it only for a real count at or above the
   owner's minimum (product_buyers_claim()), as a full-width row inside the
   pill row so it always sits on its own line under the pill. products.js
   counts the number up once when it scrolls into view and then adds
   .is-live, which runs the icon's ring three times and stops: one perpetual
   motion on the page (the pill) is enough.

   Reduced motion, or Settings > Theme "Animations" off (body.sik-noanim):
   a still dot, a still icon, and the number exactly as printed.
   =========================================================================== */
[data-variant-stock].sik-status--green,
[data-variant-stock].sik-status--amber { position: relative; }
[data-variant-stock].sik-status--green::after,
[data-variant-stock].sik-status--amber::after {
    content: "";
    position: absolute;
    /* Exactly over the ::before dot: the pill's inline padding, centred. */
    left: var(--sp-3);
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--tone);
    opacity: 0;
    pointer-events: none;
    animation: sik-live-ring 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
/* Out and gone in the first three quarters, then a beat of stillness. At 3x
   the 18px ring still clears the label's first letter. */
@keyframes sik-live-ring {
    0%        { transform: scale(1); opacity: .6; }
    75%, 100% { transform: scale(3); opacity: 0; }
}

.sik-buyers {
    /* Positioned so the .sik-sr copy inside resolves here, not against the page. */
    position: relative;
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-2) 10px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--sik-text);
}
.sik-buyers__icon {
    position: relative;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sik-primary-soft);
    color: var(--sik-primary-ink);
}
/* The ring .is-live sends out from the badge. */
.sik-buyers__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--sik-primary);
    opacity: 0;
    pointer-events: none;
}
.sik-buyers__bag { width: 16px; height: 16px; }
.sik-buyers__spark {
    position: absolute;
    top: -3px;
    right: -5px;
    width: 13px;
    height: 13px;
    color: var(--sik-primary);
    /* A surface-coloured halo, so the sparkle reads on top of the badge's edge. */
    stroke: var(--sik-surface);
    stroke-width: 2.5px;
    paint-order: stroke fill;
}
.sik-buyers__text { min-width: 0; }
.sik-buyers__num {
    display: inline-block;
    font-weight: 700;
    color: var(--sik-ink);
    font-variant-numeric: tabular-nums;
    /* products.js pins the final width while counting; the digits grow leftwards. */
    text-align: right;
}
.sik-buyers.is-live .sik-buyers__icon::before {
    animation: sik-buyers-ring 2.2s cubic-bezier(0, 0, .2, 1) 3;
}
.sik-buyers.is-live .sik-buyers__spark {
    animation: sik-buyers-twinkle 2.2s ease-in-out 3;
}
@keyframes sik-buyers-ring {
    0%        { transform: scale(1);    opacity: .55; }
    70%, 100% { transform: scale(1.7);  opacity: 0; }
}
@keyframes sik-buyers-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg);    opacity: 1; }
    50%      { transform: scale(.6) rotate(45deg);  opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
    [data-variant-stock][class*="sik-status--"]::after,
    .sik-buyers .sik-buyers__icon::before { content: none; animation: none; }
    .sik-buyers.is-live .sik-buyers__spark { animation: none; }
}
.sik-noanim [data-variant-stock][class*="sik-status--"]::after,
.sik-noanim .sik-buyers .sik-buyers__icon::before { content: none; animation: none; }
.sik-noanim .sik-buyers.is-live .sik-buyers__spark { animation: none; }