/* ==========================================================================
   BG Theme — supplementary CSS
   theme.json handles tokens, colour, type and spacing. This file covers
   only what theme.json cannot express: component layout and grid behaviour.
   Flat throughout — no gradients, no shadows. Depth comes from rules,
   band changes and space.
   ========================================================================== */

/* ==========================================================================
   BORDER-BOX — 14 September 2026. Read before removing.

   Every mockup opens with `*{box-sizing:border-box}` (line 18 of each file).
   This theme never had it, and WordPress does not set it globally, so every
   control written as `width: 100%` plus padding plus a border was exactly
   28px WIDER than the box holding it — 26px of padding and 2px of border added
   on top of a full-width element instead of inside it.

   The symptom was uniform and easy to misread: on checkout every field in a
   panel pushed past the panel's right edge by the same amount, the City /
   Province / ZIP row looked ragged, and the province widget rendered
   misshapen. It read like a grid bug. It was not.

   Four rule groups were affected — the checkout fields, the contact fields,
   the cart's "Deliver to" select and the gallery thumbnails, the last of which
   already carried a local box-sizing patch. That local patch is the tell: the
   right fix is one reset, not a patch per component.

   Matching the mockups exactly rather than scoping this to form controls: the
   mockups ARE the specification (§17), and every measurement taken from them
   assumes border-box. Scoping it narrower would leave the theme disagreeing
   with the source of truth everywhere else.
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

/* ==========================================================================
   [hidden] MUST WIN — 16 September 2026.

   The browser's own `[hidden] { display: none }` is a UA rule at specificity
   (0,1,0), so ANY author rule that sets `display` on the same element beats it:
   `.bg-cardqty { display: flex }` rendered a stepper the markup had explicitly
   marked hidden, and the card shipped a quantity control that looked usable and
   could not reach the cart.

   This is the third time — .bg-freebar and .bg-field each carry their own
   `[hidden]` patch further down this file for exactly the same reason. A patch
   per component is the tell that the reset belongs here instead (the same
   lesson as the border-box block above). Those two are now redundant; they are
   left in place because they are harmless and correct.

   `!important` is deliberate. `hidden` is not styling, it is a statement that
   the element is not currently relevant, and nothing should be able to override
   it by accident. Anything that needs to hide and show on its own terms uses a
   class, not this attribute.
   ========================================================================== */
[hidden] { display: none !important; }

:root {
  /* mockup .assure svg — the tick and padlock, as masks (see .bg-assure) */
  --bg-tick: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 13l4 4L19 7%27/%3E%3C/svg%3E");
  --bg-lock: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27%3E%3Crect x=%275%27 y=%2711%27 width=%2714%27 height=%279%27 rx=%271%27/%3E%3Cpath d=%27M8 11V8a4 4 0 018 0v3%27/%3E%3C/svg%3E");
}


/* ==========================================================================
   TYPOGRAPHY — matched to UI Design/*-03-market-stall.html
   Added 7 September 2026.

   THE WIDTH AXIS IS THE POINT OF THIS BLOCK.

   Archivo is a variable font with a wdth axis, declared in theme.json as
   fontStretch "75% 125%". The mockups drive it hard — 86 for tickets and
   step numbers, 88 for the logo and hero, 90 for prices, 92 for section
   heads, 110–112 for product headings. The theme declared no
   font-variation-settings at all, so every piece of display type rendered
   at the default width 100. That is why the type read as "not the same"
   even once the family was correct: right typeface, wrong width, wrong
   weight.

   theme.json cannot express font-variation-settings, so per-component
   axis values live here. Sizes that a preset cannot carry (a preset is one
   value; the mockup uses nineteen) are pinned here too, and the comment on
   each rule gives the mockup selector it mirrors.

   font-variation-settings overrides font-weight for the wght axis, so each
   rule below states both and they agree.
   ========================================================================== */

/* Body — mockup: body { font-size:15px; line-height:1.55 } — set in
   theme.json styles.typography, not repeated here. */

/* --- display type: width axis + exact sizes ----------------------------- */

/* mockup .h-sec — section headings */
.bg-sechead h2 {
  font-variation-settings: "wdth" 92, "wght" 750;
  font-weight: 750;
}

/* mockup .hero h1 */
.bg-hero h1 {
  font-variation-settings: "wdth" 88, "wght" 780;
  font-weight: 780;
}
/* mockup .hero h1 em — the yellow half of the headline */
.bg-hl { color: var(--wp--preset--color--highlight); }
/* mockup .hero__sub — 17px/1.5, and the 44ch measure */
.bg-hero__sub { line-height: 1.5; max-width: 44ch; }

/* mockup .logo__txt — 21px/.94 */
.wp-block-site-title {
  font-variation-settings: "wdth" 88, "wght" 800;
  font-weight: 800;
  font-size: 21px;
  line-height: .94;
  letter-spacing: -.02em;
}


/* mockup .step__n — 30px/1 */
.bg-step__n {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 86, "wght" 800;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
}

/* mockup .news h2 — 26px */
.bg-news h2 {
  font-variation-settings: "wdth" 90, "wght" 750;
  font-weight: 750;
  font-size: 26px;
  letter-spacing: -.02em;
}

/* mockup .hero__facts b — 19px */
.bg-herofacts strong {
  font-variation-settings: "wdth" 90, "wght" 750;
  font-weight: 750;
  font-size: 19px;
}

/* mockup .hero__tick — 12px uppercase ticket */
.bg-heroticket { font-size: 12px; letter-spacing: .04em; }

/* mockup h1 on the product page — 112 wide, the one expanded setting */
/* ⚠ h1 ONLY. Written for the product title, but `.bg-pdp .wp-block-post-title`
   is (0,2,0) and also matched the CARD titles in the related-products row once
   that row started using bg/product-card — beating .bg-card__name at (0,1,0)
   and rendering "Mrs Balls Original Chutney" at 36px. Card names are h3; the
   product title is the only h1 on the page, so say so. */
.bg-pdp h1.wp-block-post-title {
  font-variation-settings: "wdth" 112, "wght" 760;
  font-weight: 760;
  font-size: clamp(27px, 3.2vw, 36px);
  line-height: 1.03;
  letter-spacing: -.03em;
}

/* mockup .blk h2 — product page section headings, 24px */
.bg-pdp__lower h2 {
  font-variation-settings: "wdth" 110, "wght" 750;
  font-weight: 750;
  font-size: 24px;
  letter-spacing: -.02em;
}

/* mockup .gal__flag — the yellow discount ticket on the gallery.
   20px display at width 86, with the saving on a body-font second line.
   This replaces WooCommerce's round olive "Sale!" badge, which is hidden
   in the gallery block below: the mockup shows the SIZE of the discount,
   which is what a shopper comparing imported prices actually needs. */
.bg-gal__pct {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 86, "wght" 800;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
}
/* mockup .gal__flag small — body font, not display */
.bg-gal__amt {
  font-family: var(--wp--preset--font-family--body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* mockup .gal__cap — 11.5px, no preset carries it */
.bg-gal__cap { font-size: 11.5px; }

/* mockup .price__now — 40px/1, on the SALE price only.
   This used to target `.bg-pdp__price` itself, which is the whole box: both
   prices rendered at 40px and the unit price underneath inherited weight 800
   and −.035em tracking, which is what squashed "₱ 190 per 100ml" into
   "₱190per100ml". It also targeted
   `.wc-block-components-product-price__value`, a class the block does not
   emit — the real elements are <del> and <ins>. */
.bg-pdp__price ins,
.bg-pdp__price .wc-block-components-product-price > .amount {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 92, "wght" 800;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.035em;
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
  background: none;
}

/* mockup .freebar__txt b — the countdown figure in the yellow band */
.bg-freebar__txt b {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 90, "wght" 800;
  font-weight: 800;
  /* The figure carries the message, so it outsizes the sentence around it —
     17px against 15px. Keeping the sentence in the body family and only the
     amount in the display family is the mockup's own contrast, just scaled. */
  font-size: 17px;
  /* ⚠ Inherit the parent's pinned line-height. Archivo's own line box is
     taller than Inter Tight's at the same size, and an inline child can push a
     line box past its parent's line-height — so pinning only .bg-freebar__txt
     left a 1px step between the resting line (no <b>) and the two states that
     have one. Measured 40.00 vs 41.00 before this. */
  line-height: inherit;
}

/* mockup .phead h1 — the shared page-head band. Cart, category, about and
   contact all use it, so this is not cart-scoped. */
.bg-phead h1 {
  font-variation-settings: "wdth" 112, "wght" 770;
  font-weight: 770;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: -.03em;
}

/* mockup .line__t — the line total */
.bg-cart__total {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 90, "wght" 780;
  font-weight: 780;
  font-size: 19px;
  line-height: 1.1;
}

/* mockup .nudge__h b */
.bg-nudge__h b {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 104, "wght" 720;
  font-weight: 720;
  font-size: 15.5px;
}

/* mockup .sum__h */
.bg-sum__h {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 106, "wght" 720;
  font-weight: 720;
  font-size: 16px;
  letter-spacing: 0;
}

/* mockup .blk__h b — the numbered panel headings on checkout */
.bg-panel__h b {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 106, "wght" 720;
  font-weight: 720;
  font-size: 15.5px;
}

/* --- about page ---------------------------------------------------------- */
/* mockup .hero__c h1 — the one headline on the site at wdth 112 / wght 780 */
.bg-abouthero__h {
  font-variation-settings: "wdth" 112, "wght" 780;
  font-weight: 780;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.01;
  letter-spacing: -.03em;
}

/* mockup .pull — the founder quote, display type at a reading weight */
.bg-pull {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 108, "wght" 650;
  font-weight: 650;
  font-size: 19px;
  line-height: 1.35;
}

/* mockup .stat b — the figures */
.bg-stat b {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 96, "wght" 800;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.03em;
}

/* mockup .step b — outlined yellow numerals, the one place text-stroke is used */
.bg-howstep__n {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 90, "wght" 800;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
}

/* mockup .val h3 */
.bg-val h3 {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-weight: 700;
  font-size: 17px;
}

/* mockup .cta h2 */
.bg-cta__in h2 {
  font-variation-settings: "wdth" 110, "wght" 760;
  font-weight: 760;
  font-size: 30px;
  line-height: 1.08;
}

/* mockup .filters h3 */
.bg-filters__h {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-weight: 700;
  font-size: 15px;
}

/* mockup .tick — the yellow discount ticket on a card */
.bg-card__pct {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 86, "wght" 800;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}
.bg-card__save {
  font-family: var(--wp--preset--font-family--body);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* mockup .card__now — the card price */
.bg-card__price ins,
.bg-card__price .woocommerce-Price-amount {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 88, "wght" 780;
  font-weight: 780;
  font-size: 20px;
  letter-spacing: -.02em;
}
/* mockup .card__was.
   ⚠ THE SIZE MUST BE ON THE <del> ITSELF, not only on the .amount span inside
   it. A line-through is positioned from the metrics of the element that CARRIES
   the decoration — here the <del>, by UA default. Setting 12.5px only on the
   inner span left the <del> at the inherited 15px body size, so the rule was
   struck through at a 15px font's midline while the digits rendered at 12.5px:
   the line sat visibly high, across the top of the numerals. The mockup puts
   font-size and text-decoration on one element for exactly this reason, and
   .bg-pdp__price del already did it correctly. */
.bg-card__price del,
.bg-card__price del .woocommerce-Price-amount {
  font-family: var(--wp--preset--font-family--body);
  font-variation-settings: normal;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.2;
}

/* mockup .seo h2 */
.bg-archive__seo h2 {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 110, "wght" 720;
  font-weight: 720;
  font-size: 20px;
}

/* mockup .chan__h b — contact channel card headings */
.bg-chan__h b {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 106, "wght" 700;
  font-weight: 700;
  font-size: 15px;
}

/* mockup .chan__b .big — the phone number and email address */
.bg-chan__big {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 92, "wght" 750;
  font-weight: 750;
  font-size: 19px;
  letter-spacing: -.01em;
}

/* mockup .hours h3 */
.bg-hours__h {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-weight: 700;
  font-size: 16px;
}

/* mockup .deflect b */
.bg-deflect__card b {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 106, "wght" 700;
  font-weight: 700;
  font-size: 16px;
}

/* mockup .opt__t .p — the price on a delivery option card */
.bg-opt__price {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 90, "wght" 780;
  font-weight: 780;
  font-size: 15px;
}

/* mockup .sum__tot b */
.bg-sum__tot b {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 92, "wght" 800;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
}

/* --- body type: exact sizes where a preset cannot carry them ------------ */

.bg-utility { font-size: 12.5px; }                 /* mockup .util          */
.bg-trust span { font-size: 12.5px; line-height: 1.4; }  /* .trust__i span  */
/* mockup .catbar a — 13.5px is exactly the `small` preset, so only the
   weight needs pinning; the size stays tokenised. */
.bg-catnav a { font-weight: 500; }
.bg-tile__n { font-size: 15px; font-weight: 600; line-height: 1.25; } /* .cat__n — nudged from the mockup's 14px for legibility (client request, 11 Oct 2026) */
.bg-tile__c { font-size: 12.5px; } /* .cat__c — mockup is 11.5px (was the 'tiny' preset 10.5px, §8 trap); bumped for legibility with the name above */
.bg-steps h3 { font-size: 15.5px; font-weight: 600; }    /* mockup .step h3 */
.bg-steps p  { font-size: 13.5px; line-height: 1.5; }    /* mockup .step p  */
.bg-footer { font-size: 13.5px; }                  /* mockup .ftr           */
.bg-unit { font-size: 11px; }                      /* mockup .card__unit    */

/* ⚠ DELIBERATELY LARGER THAN THE MOCKUP. Client instruction, 5 October 2026 —
   "make it more highlighted and a little bigger so it feels like popping out".
   homepage-03-market-stall.html:202 specifies `font-size:12.5px;font-weight:600`
   and that is what shipped until now. §17 makes the mockups the specification,
   so this is a known, deliberate deviation — do not "restore" it to 12.5px on
   a later pass. It is the same band §10 made always-visible on the same
   instruction; the two changes go together.

   ⚠ line-height is PINNED so the band cannot change height between its three
   states. The resting line is body text; the countdown and unlocked lines wrap
   their figure in a <b> that switches to the DISPLAY family (see
   .bg-freebar__txt b), whose line box is taller. Measured before pinning:
   38.00px empty, 39.00px counting down, 39.38px unlocked — a visible reflow of
   the whole page on the first add, which is exactly what the band was changed
   to stop. A fixed value is what makes all three identical. */
.bg-freebar__txt  { font-size: 15px; font-weight: 700; line-height: 24px; }      /* .freebar__txt, enlarged */

/* --- cart page: flat sizes, mockup selector in the comment --------------- */
.bg-phead__sub    { font-size: 16.5px; }                                         /* .phead p     */
.bg-cart__brand   { font-size: 10px; font-weight: 600; letter-spacing: .13em; }  /* .line__brand */
.bg-cart__name    { font-size: 15px; font-weight: 500; line-height: 1.3; }       /* .line__n     */
.bg-cart__size    { font-size: 12.5px; }                                         /* .line__s     */
.bg-cart__unit    { font-size: 12px; }                                           /* .line__u     */
.bg-cart__low     { font-size: 11.5px; font-weight: 600; }                       /* .line__k     */
.bg-cart__remove  { font-size: 12px; }                                           /* .line__rm    */
.bg-cart__link,
.bg-cart__update  { font-size: 13.5px; font-weight: 600; }                       /* .link-back   */
.bg-qty__input    { font-size: 14px; font-weight: 600; }                         /* .qty input   */
.bg-qty__btn      { font-size: 16px; }                                           /* .qty button  */
.bg-sum__r        { font-size: 14.5px; }                                         /* .sum__r      */
.bg-sum__r--muted { font-size: 13px; }                                           /* .sum__r.muted*/
/* mockup .sum__r span:last-child — the figure, bolder than its label. The ETA
   and the "we cannot quote yet" note sit inside that span but are prose, so
   they opt back out. */
.bg-sum__value    { font-weight: 600; }
.bg-sum__eta,
.bg-sum__note     { font-weight: 400; }
.bg-sum label     { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; } /* .sum label  */
.bg-sum__select,
.bg-voucher__input { font-size: 13.5px; }                                        /* .sum select  */
.bg-voucher__go   { font-size: 13px; font-weight: 600; }                          /* .voucher btn */
.bg-sum__tot span { font-size: 15px; font-weight: 600; }                          /* .sum__tot sp */
.bg-btn           { font-size: 14.5px; font-weight: 600; }                        /* .btn         */
.bg-secure__line  { font-size: 12.5px; font-weight: 600; }                        /* .secure__l   */
.bg-cart__side .bg-pay span,
.bg-co__side .bg-pay span { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; } /* .secure__p span */

/* --- checkout: flat sizes, mockup selector in the comment ---------------- */
.bg-costep        { font-size: 13px; }                                           /* .stp         */
.bg-costep.is-on  { font-weight: 600; }                                          /* .stp.on      */
.bg-costep__n     { font-size: 11px; font-weight: 700; }                         /* .stp b       */
.bg-guest         { font-size: 13.5px; }                                         /* .guest       */
.bg-guest__in     { font-weight: 600; }                                          /* .guest a     */
.bg-panel__n      { font-size: 11px; font-weight: 700; }                         /* .blk__h .num */
.bg-billing label,
.bg-panel__b .form-row > label { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; } /* .f label */
.bg-panel__b input,
.bg-panel__b select,
.bg-panel__b textarea { font-size: 14.5px; }                                     /* .f input     */
.bg-panel__b .description { font-size: 12px; }                                   /* .f .hint     */
.bg-opt__top b    { font-size: 14.5px; }                                         /* .opt__t b    */
.bg-opt__desc     { font-size: 12.5px; }                                         /* .opt__d      */
.bg-terms         { font-size: 13.5px; }                                         /* .terms       */
.bg-terms a       { font-weight: 600; }                                          /* .terms a     */
.bg-paypanel__note { font-size: 12.5px; }
.bg-si__name      { font-size: 12.5px; }                                         /* .si__n       */
.bg-si__price     { font-size: 13px; font-weight: 700; }                         /* .si__p       */
.bg-si__qty       { font-size: 10.5px; font-weight: 700; }                       /* .si__q       */
.bg-sum__final    { font-size: 12px; }                                           /* .sum__note   */
.bg-secure__text  { font-size: 12px; }                                           /* .secure__t   */
.bg-sum__place    { font-size: 15.5px; }                                         /* .sum .btn    */

/* --- about page: flat sizes, mockup selector in the comment -------------- */
.bg-abouthero__sub { font-size: 17px; }                                          /* .hero__c p   */
.bg-story p        { font-size: 16px; }                                          /* .story p     */
.bg-story__lead    { font-size: 18.5px; }                                        /* .story p.lead*/
.bg-pull__by       { font-size: 13.5px; }
.bg-stat span      { font-size: 13.5px; }                                        /* .stat span   */
.bg-howstep h3     { font-size: 15.5px; font-weight: 600; }                      /* .step h3     */
.bg-howstep p      { font-size: 13.5px; line-height: 1.5; }                      /* .step p      */
.bg-val p          { font-size: 14px; line-height: 1.55; }                       /* .val p       */
.bg-cta__in p      { font-size: 16px; }                                          /* .cta p       */

/* --- category archive: flat sizes, mockup selector in the comment -------- */
/* The mockup's group heading is a <summary>; WooCommerce renders an <h4>, so
   .bg-fgroup__h is the real target. See the filter-sidebar block below. */
.bg-fgroup__h            { font-size: 13px; font-weight: 700; letter-spacing: .05em; } /* .fgroup summary */
.bg-filters__set label   { font-size: 13.5px; }                                  /* .fgroup label */
/* ⚠ font-size 0 is NOT a mistake — the count ships as " (<span>38</span>) " and
   the brackets are literal text nodes the mockup does not have. Zeroing the
   wrapper collapses them; the inner span carries the real size. */
.bg-filters__set .wc-block-product-filter-checkbox-list__count       { font-size: 0; }
.bg-filters__set .wc-block-product-filter-checkbox-list__count > span { font-size: 11.5px; } /* .fgroup .n */
.bg-fclear               { font-size: 12.5px; font-weight: 600; }                /* .fclear      */
.bg-toolbar__count       { font-size: 13.5px; }                                  /* .toolbar__c  */
.bg-toolbar__sort select { font-size: 13.5px; }                                  /* .toolbar sel */
.bg-chips                { font-size: 12px; font-weight: 600; }                  /* .chip        */
.bg-card__brand          { font-size: 10.5px; font-weight: 600; letter-spacing: .11em; } /* .card__brand */
.bg-card__name           { font-size: 13.5px; line-height: 1.34; font-weight: 500; } /* .card__name */
.bg-card__size           { font-size: 11.5px; }                                  /* .card__s     */
.bg-card__unit           { font-size: 11px; }                                    /* .card__u     */
.bg-card__stock          { font-size: 11px; font-weight: 600; letter-spacing: .04em; } /* .card__stock */
.bg-card__uk             { font-size: 9px; font-weight: 700; letter-spacing: .1em; } /* .flagchip  */
.bg-card__add a,
.bg-card__add .wp-block-button__link { font-size: 13px; font-weight: 600; letter-spacing: .02em; } /* .add */
.bg-cardqty__input       { font-size: 13.5px; font-weight: 600; }                /* .qty input   */
.bg-cardqty__btn         { font-size: 15px; }                                    /* .qty button  */
.bg-pager a,
.bg-pager span           { font-size: 13.5px; font-weight: 600; }                /* .pager       */

/* --- contact page: flat sizes, mockup selector in the comment ------------ */
.bg-field label     { font-size: 12px; font-weight: 600; letter-spacing: .09em; } /* .field label */
.bg-field input,
.bg-field select,
.bg-field textarea  { font-size: 14.5px; }                                       /* .field input */
.bg-field__hint,
.bg-field__err      { font-size: 12px; }                                         /* .field .hint */
.bg-consent         { font-size: 13px; }                                         /* .consent     */
.bg-chan__b p       { font-size: 14px; }                                         /* .chan__b p   */
.bg-chan__meta      { font-size: 12.5px; }                                       /* .chan__b .meta */
.bg-chan__tag       { font-size: 10px; font-weight: 700; letter-spacing: .09em; } /* .chan__h .tag */
.bg-hours           { font-size: 14px; }                                         /* .hours       */
.bg-hours th        { font-size: 13px; font-weight: 500; }                        /* .hours th    */
.bg-hours td        { font-weight: 600; }                                        /* .hours td    */
.bg-hours__note     { font-size: 12.5px; }
.bg-addr            { font-size: 14px; }                                         /* .addr        */
.bg-addr__meta      { font-size: 12.5px; }
.bg-deflect__card span { font-size: 13.5px; }                                    /* .deflect span */
.bg-deflect__card em   { font-size: 12px; font-weight: 700; }                    /* .deflect em  */
.bg-formnote        { font-size: 14px; }
.bg-formnote__sub   { font-size: 12.5px; }


/* --- prose measure ------------------------------------------------------
   theme.json's contentSize is 1320px because that is the mockup container
   (.wrap). That is the right width for grids and section furniture and far
   too wide for a line of text, so running prose gets its own measure here —
   the same thing the mockup does with max-width on .blk p and .hero__sub.

   Scoped to .entry-content so it never touches a pattern, a product grid or
   a template part. Anything that needs the full 1320 can opt out with
   .alignwide or .alignfull, which is how a block editor user expects it to
   behave.
   ----------------------------------------------------------------------- */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
  max-width: 70ch;
}
.entry-content > .alignwide,
.entry-content > .alignfull {
  max-width: none;
}

/* --- section seams: no gap ----------------------------------------------
   theme.json sets blockGap to spacing|30 (1.25rem = 20px), which WordPress
   turns into three rules:

     :where(.wp-site-blocks) > *            header / main / footer
     :root :where(.is-layout-flow) > *      flow containers
     :root :where(.is-layout-constrained) > *   constrained containers

   The first put 20px between the header, main and footer. The third put the
   same 20px between every homepage section, because <main> is a constrained
   layout. Neither is in the mockup: each band is flush against the next and
   owns its own vertical padding, so a gap on top of that reads as a seam.

   Zeroed at those two levels only. blockGap still applies inside patterns,
   where 20px between an eyebrow and a heading is exactly right — which is
   why this is not simply blockGap: 0 in theme.json.

   Specificity note: WordPress wraps these in :where(), which contributes
   nothing, so a single class is enough to win. No !important needed.
   ----------------------------------------------------------------------- */
.wp-site-blocks > * { margin-block-start: 0; }
main.wp-block-group > * { margin-block-start: 0; }

/* --- template-part wrappers do not participate in layout -----------------
   REQUIRED FOR THE STICKY HEADER. Do not remove without reading this.

   `position: sticky` travels only within its own containing block. Every
   template part renders inside a plain <div class="wp-block-template-part">,
   so .bg-header's containing block was that wrapper — about 130px tall. The
   sticky rule applied correctly and did nothing visible, because there was
   nowhere to stick to: the parent's bottom edge passed within a few pixels
   of scrolling.

   `display: contents` removes the wrapper's box from layout, so .bg-header
   resolves against .wp-site-blocks instead, which is the height of the page.
   In the mockup .hdr is a direct child of <body> for exactly this reason.

   Safe because these wrappers are pure pass-throughs — no padding, margin,
   background or border of their own — and generic <div>s with no ARIA role
   are unaffected in the accessibility tree in current browsers.

   The sticky declaration itself is conditional and lives in inc/customizer.php
   (Appearance → Customize → British Groceries → Header & chrome).
   ----------------------------------------------------------------------- */
.wp-block-template-part { display: contents; }

/* --- utility bar --------------------------------------------------------
   mockup .util — three items left with icons, three right. 38px tall.
   ----------------------------------------------------------------------- */
/* theme.json underlines links globally, which is right for body copy and
   wrong for chrome — it made "Track my order" and "Help" look permanently
   active. Underline on hover/focus only, as the mockup has it. */
.bg-utility a { color: inherit; text-decoration: none; }
.bg-utility a:hover,
.bg-utility a:focus-visible { text-decoration: underline; }
.bg-utility__row { gap: 1.25rem; }
.bg-utility__left { gap: 1.4rem; }
.bg-utility__right { gap: 1.15rem; }
.bg-utility__item { gap: .45rem; flex-wrap: nowrap; }
.bg-utility p { margin: 0; white-space: nowrap; }
.bg-utility strong { font-weight: 600; }
.bg-utility__ico {
  width: 14px; height: 14px; flex: none; display: block;
  stroke: currentColor; fill: none; stroke-width: 1.7;
}
@media (max-width: 900px) {
  /* mockup drops everything but the first claim. */
  .bg-utility__left .bg-utility__item:nth-child(n+2),
  .bg-utility__right { display: none; }

  /* ⚠ THE SURVIVING CLAIM MUST BE ALLOWED TO WRAP, or it overflows the page.
     `.bg-utility p` is nowrap by default (the mockup's own rule, correct on a
     wide bar). §3b replaced that first line's "1–3 day dispatch" with
     "shipped Wednesdays and Saturdays", which is far longer — 420px of
     unwrappable text against 311px of usable width at 390px. §10f had measured
     NO horizontal overflow anywhere on the site; that copy change silently
     broke it and was caught here on 5 October.
     Wrapping rather than shrinking the type, so this cannot return the next
     time the sentence grows. */
  .bg-utility p { white-space: normal; }
}

/* --- header ------------------------------------------------------------ */
.bg-header__row { gap: clamp(1rem, 3vw, 1.6rem); }
.bg-header__brand { gap: .65rem; flex: none; }
.bg-header__tagline { margin: 0; letter-spacing: .14em; text-transform: uppercase; }

/* mockup .logo — flag plus the two-line wordmark. Inline until a custom
   logo is uploaded, at which point wp:site-logo renders above it. */
.bg-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.bg-brand__flag { width: 38px; height: 26px; flex: none; display: block; }
.bg-brand__txt {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 88, "wght" 800;
  font-weight: 800;
  font-size: 21px;
  line-height: .94;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast);
}
.bg-brand__txt span {
  display: block;
  font-variation-settings: "wdth" 96, "wght" 500;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--wp--preset--color--contrast-2);
}

/* mockup .search — 2px ink frame, scope select, square icon button, 48px */
.bg-search {
  flex: 1 1 260px;
  max-width: 720px;
  display: flex;
  height: 48px;
  border: 2px solid var(--wp--preset--color--primary);
  background: var(--wp--preset--color--base);
}
.bg-search__cat {
  flex: none;
  border: 0;
  border-right: 1px solid var(--wp--preset--color--line);
  border-radius: 0;
  background: var(--wp--preset--color--base-2);
  padding: 0 .9rem;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  max-width: 11rem;
}
.bg-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0 .9rem;
  font: inherit;
  font-size: 14.5px;
  background: transparent;
}
.bg-search__input::placeholder { color: var(--wp--preset--color--contrast-3); }
.bg-search__go {
  flex: none;
  width: 56px;
  border: 0;
  border-radius: 0;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.bg-search__go svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; stroke-width: 2;
}
.bg-search__go:hover { background: var(--wp--preset--color--accent); }
/* One ring around the whole control rather than three inside it. */
.bg-search:focus-within { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.bg-search :focus-visible { outline: none; }
@media (max-width: 600px) { .bg-search__cat { display: none; } }

/* mockup .hdr__acts — account icon, then basket with the threshold beneath */
.bg-header__acts { gap: .5rem; flex: none; align-items: center; }

/* woocommerce/customer-account, styled as the mockup's .iconbtn */
.bg-iconbtn .wc-block-customer-account__link,
a.bg-iconbtn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 2px;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}
.bg-iconbtn .wc-block-customer-account__link:hover,
a.bg-iconbtn:hover { background: var(--wp--preset--color--base-2); }
.bg-iconbtn svg { width: 22px; height: 22px; }

/* mockup .basket — icon, then the total stacked over the threshold caption,
   both LEFT-aligned against each other.

   WooCommerce puts the icon and the total inside one <button>, so the caption
   cannot be a sibling of the total. It is indented instead by exactly the
   icon slot (22px) plus the button gap (8px) so it lines up under the total
   rather than under the icon. Change either value and change the indent. */
.bg-header__basket {
  display: grid;
  justify-items: start;
  row-gap: 0;
  line-height: 1.15;
}
.bg-header__basket .wc-block-mini-cart__button {
  padding: 0;
  gap: 8px;
  align-items: center;
}
.bg-header__free {
  margin: 0;
  white-space: nowrap;
  font-size: 10px;              /* mockup .basket__amt span */
  padding-left: 30px;           /* 22px icon + 8px gap */
}
@media (max-width: 900px) {
  .bg-header__free { display: none; }
}

/* On cart and checkout WooCommerce renders no mini-cart at all
   (MiniCart.php:614), so patterns/basket-indicator.php supplies .bg-basket in
   its place. Same geometry, stated rather than clickable — there is nowhere to
   go from the cart page. Paired selectors below keep the two identical. */
.bg-header__basket .bg-basket {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* mockup .basket__ico — icon slot the badge is positioned against */
.bg-header__basket .wc-block-mini-cart__quantity-badge,
.bg-header__basket .bg-basket__slot { position: relative; }
.bg-header__basket .wc-block-mini-cart__icon,
.bg-header__basket .bg-basket__icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* mockup .badge — red count on the cart icon.
   WooCommerce ships the badge with a `hidden` attribute and re-applies it
   from the Interactivity API (data-wp-bind--hidden="!state.badgeIsVisible"),
   so an empty basket shows no count at all. The mockup shows a persistent
   "0", so visibility is forced here. The number itself stays correct because
   data-wp-text keeps writing state.totalItemsInCart into it — this overrides
   only whether it is seen, never what it says. */
.bg-header__basket .wc-block-mini-cart__badge,
.bg-header__basket .wc-block-mini-cart__badge[hidden],
.bg-header__basket .bg-basket__badge {
  display: grid;
  place-items: center;
  position: absolute;
  top: -5px;
  right: -7px;
  border: 0;
}

/* The server-rendered twin has nothing fighting it. */
.bg-header__basket .bg-basket__badge {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

/* ⚠ !important, AND IT IS NOT LAZINESS — 18 September 2026.
   The mini-cart badge SWAPS OUR OWN TWO COLOURS ROUND. With no
   `productCountColor` attribute set, mini-cart.js does:

       badgeBackgroundColor → getComputedStyle( el ).color        || '#000'
       badgeTextColor       → getComputedStyle( el ).backgroundColor || '#fff'

   and writes them as an INLINE style. So an accent background with base text
   was read back and applied as a WHITE background with RED text: the homepage
   showed a bare red "4" with no disc, while cart and checkout (which render
   bg/basket-indicator instead) showed the proper red circle.

   An inline style cannot be beaten on specificity, only by an author
   `!important`, which wins because theirs carries no `!important` of its own.
   Whatever the script computes, the rendered badge stays right.

   These two properties are declared for this selector ONLY here — the shared
   rule above deliberately omits them — so the §8 duplicate-property detector
   stays clean and there is one owner for each. */
.bg-header__basket .wc-block-mini-cart__badge {
  background: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
}

.bg-header__basket .wc-block-mini-cart__badge,
.bg-header__basket .bg-basket__badge {
  border-radius: 9px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
/* mockup .basket__amt b — the running total in display type */
.bg-header__basket .wc-block-mini-cart__amount,
.bg-header__basket .bg-basket__amount {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 90, "wght" 780;
  font-weight: 780;
  font-size: 15px;
  color: var(--wp--preset--color--contrast);
}

/* mockup .catbar a.is-hot — the offers link sits in accent.
   ⚠ The class comes from the MENU ITEM (Appearance → Menus → CSS Classes), not
   from markup here, so the client owns which link is promoted and it survives
   reordering. */
.bg-catnav .bg-catnav__hot > a {
  color: var(--wp--preset--color--accent);
  font-weight: 600;
}

/* ⚠ These target CLASSIC menu markup (ul.bg-catnav__list > li > a), not the
   block navigation classes they replaced. parts/header.html now renders
   bg/category-nav, which calls wp_nav_menu() so the menu assigned at
   Appearance → Menus → Manage Locations is what appears. Reinstate the block
   and these rules stop matching — the bar would lose its padding, underline
   and horizontal scroll in one go. */
.bg-catnav { overflow-x: auto; scrollbar-width: none; }
.bg-catnav::-webkit-scrollbar { display: none; }
.bg-catnav__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}
.bg-catnav__list > li { list-style: none; margin: 0; }
.bg-catnav a {
  display: block;
  padding: .75rem .85rem;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.bg-catnav a:hover {
  border-bottom-color: var(--wp--preset--color--accent);
}
/* The page you are on, marked without relying on colour alone (§8). */
.bg-catnav .current-menu-item > a,
.bg-catnav .current-menu-parent > a {
  border-bottom-color: var(--wp--preset--color--contrast);
  font-weight: 600;
}

/* --- section heads ----------------------------------------------------- */
.bg-sechead {
  border-bottom: 2px solid var(--wp--preset--color--primary);
  padding-bottom: .8rem;
  margin-bottom: 1.5rem;
}
.bg-sechead h2 { margin: 0; }
.bg-eyebrow {
  letter-spacing: .16em;   /* mockup .eyebrow — was .18em */
  text-transform: uppercase;
  font-weight: 600;        /* mockup .eyebrow — was 700   */
  margin-bottom: .5rem;
}

/* --- trust strip ------------------------------------------------------- */
.bg-trust .wp-block-column + .wp-block-column {
  border-left: 1px solid var(--wp--preset--color--line);
  padding-left: 1.4rem;
}
@media (max-width: 781px) {
  .bg-trust .wp-block-column + .wp-block-column {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--wp--preset--color--line);
    padding-top: 1rem;
  }
}


/* ==========================================================================
   PRODUCT PAGE — matched to UI Design/product-03-market-stall.html
   Rebuilt 8 September 2026. Every rule names the mockup selector it mirrors.

   The mockup lays the top of the page out as a CSS grid, `1.05fr .95fr` with
   a 52px gap. wp:columns cannot express that ratio — its widths are
   flex-basis percentages, so 52.5/47.5 plus a 52px gap overflows. The blocks
   are therefore plain groups and the grid is declared here, which is also
   what makes the column edges land exactly where the mockup's do.
   ========================================================================== */

/* mockup .crumb */
.bg-crumb .wc-block-breadcrumbs { margin: 0; }
.bg-crumb a:hover { color: var(--wp--preset--color--accent); }

/* mockup .pdp — grid 1.05fr .95fr, gap 52px, padding 34px 0 54px */
.bg-pdp__top {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 52px;
  padding: 34px 0 54px;
}
@media (max-width: 960px) {
  .bg-pdp__top { grid-template-columns: 1fr; gap: 30px; padding-top: 22px; }
}

/* --- gallery ------------------------------------------------------------ */
/* Layout only. Sizes and the width axis for .bg-gal__pct, .bg-gal__amt and
   .bg-gal__cap are in the TYPOGRAPHY block at the top of this file. */

/* The badges are pinned to .bg-gal, and the square is its first visible
   child, so top:0 lands on the square's top edge. */
.bg-gal { position: relative; }
.bg-gal .wp-block-woocommerce-product-image-gallery,
.bg-gal .woocommerce-product-gallery { margin: 0; }

/* mockup .gal__main — square, 1px rule, grey wash.
   The square is the SLIDE VIEWPORT, not .woocommerce-product-gallery: the
   thumbnail row is a sibling inside that container, so an aspect-ratio on
   it would swallow the thumbnails. Which element is the viewport depends on
   whether flexslider has initialised — it wraps the gallery in
   .flex-viewport — so both cases are matched and the :has() guard keeps
   them from ever applying at once and double-bordering. */
.bg-gal .flex-viewport,
.bg-gal .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base-2);
  aspect-ratio: 1;
  overflow: hidden;
  margin: 0;
}
/* mockup .gal__main padding:44px — on the slide, not the viewport, so
   flexslider's slide-width arithmetic is left alone. */
.bg-gal .woocommerce-product-gallery__image,
.bg-gal .woocommerce-product-gallery__image--placeholder {
  box-sizing: border-box;
  padding: 44px;
  display: grid;
  place-items: center;
}
.bg-gal .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* No zoom magnifier in the mockup. */
.bg-gal .woocommerce-product-gallery__trigger { display: none; }

/* mockup .gal__flag — yellow discount ticket, flush into the top-left
   corner of the square. WooCommerce's own round "Sale!" badge is suppressed
   rather than restyled: it carries the word "sale" and no figure, and the
   two together would read as a double badge. */
.bg-gal .onsale { display: none; }
.bg-gal__flag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  background: var(--wp--preset--color--highlight);
  color: var(--wp--preset--color--contrast);
  padding: 10px 14px;
}
.bg-gal__flag > p { margin: 0; }
.bg-gal__amt { margin-top: 3px; }
/* Keyed on the PERCENTAGE, not on "has any child". Off-sale both bindings
   return null and inc/bindings.php drops both paragraphs. But under half a
   percent only `discount` returns null — `saving` is still a real figure —
   which would leave a yellow ticket reading nothing but "SAVE ₱1". The
   ticket needs both lines to mean anything, so it goes when the figure does.
   The saving still shows in the price row, where it stands on its own. */
.bg-gal__flag:not(:has(.bg-gal__pct)) { display: none; }

/* mockup .gal__uk — white chip, top right */
.bg-gal__uk {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--contrast-2);
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
/* mockup .gal__thumbs — four across, 9px gap, active cell 2px ink.
   flexslider's own stylesheet absolutely positions .flex-control-nav 40px
   below the slider, so `position: static` has to be restated here or the
   grid never enters the flow. */
.bg-gal .flex-control-thumbs {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  text-align: initial;
}
.bg-gal .flex-control-thumbs li { margin: 0; width: auto; float: none; }
.bg-gal .flex-control-thumbs img {
  box-sizing: border-box;   /* 1px → 2px on select must not shift the grid */
  width: 100%;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base-2);
  aspect-ratio: 1;
  object-fit: contain;
  padding: 12px;
  opacity: 1;
  cursor: pointer;
}
.bg-gal .flex-control-thumbs .flex-active { border: 2px solid var(--wp--preset--color--contrast); }
/* mockup .gal__cap */
.bg-gal__cap { margin: 11px 0 0; }

/* --- buy column --------------------------------------------------------- */
/* mockup .brand — 10px, .2em tracking */
.bg-pdp__brand {
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-3);
}
.bg-pdp__brand a { text-decoration: none; color: inherit; }

/* mockup h1 — width axis 112, the one expanded setting on the site */
.bg-pdp h1.wp-block-post-title { margin: 0 0 9px; }

/* mockup .meta */
.bg-pdp__meta { margin: 0 0 15px; font-size: 12.5px; }

/* mockup .rate — stars, then the score in bold, then an underlined link to
   the reviews, all on one line above a 2px ink rule.

   woocommerce/product-rating renders ONLY stars: its score and count sit in
   a visually-hidden span used as the fill mask. The template therefore uses
   three separate blocks — product-rating-stars, product-average-rating and
   product-rating-counter — which is the only way to get the number and the
   link the mockup shows. */
.bg-pdp__rate {
  gap: 9px;
  margin-bottom: 16px;
  font-size: 13px;
  flex-wrap: wrap;
}
.bg-pdp__rate > * { margin: 0; }
.bg-pdp__rate .wc-block-components-product-rating,
.bg-pdp__rate .wc-block-components-product-rating-stars__container,
.bg-pdp__rate .wc-block-components-product-rating-counter__container { margin: 0; }
/* mockup .rate b — the average, 4.6 */
.bg-pdp__score,
.bg-pdp__rate .wc-block-components-product-average-rating-counter,
.bg-pdp__rate .wc-block-components-product-average-rating {
  font-weight: 700;
  font-size: 13px;
  color: var(--wp--preset--color--contrast);
}
/* mockup .rate a — "38 reviews", underlined */
.bg-pdp__rate .wc-block-components-product-rating-counter a,
.bg-pdp__rate a {
  color: var(--wp--preset--color--contrast);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Stars: WooCommerce draws these as a masked ::before glyph row, coloured by
   `color` on the stars element. Accent, per §8. */
.bg-pdp__rate .wc-block-components-product-rating__stars,
.bg-pdp__rate .wc-block-components-product-rating__stars span,
.bg-pdp__rate .wc-block-components-product-rating-stars__stars {
  color: var(--wp--preset--color--accent);
}

/* mockup .pricebox — grey wash, 5px accent rule on the left edge */
.bg-pdp__price {
  border-left: 5px solid var(--wp--preset--color--accent);
  padding: 16px 18px;
  margin-bottom: 16px;
}
/* mockup .price — sale price, struck regular, then the SAVE ticket, on one
   baseline. WooCommerce emits <del> BEFORE <ins>, so the order is flipped
   here rather than in markup: the block owns that output. */
.bg-pdp__pricerow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.bg-pdp__price .wc-block-components-product-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  font-size: inherit;
}
.bg-pdp__price ins { order: 1; }
.bg-pdp__price del { order: 2; }
.bg-pdp__save { order: 3; }

/* mockup .price__save — red ticket, dark-on-accent, uppercase */
.bg-pdp__save {
  margin: 0;
  align-self: center;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* mockup .price__now — 40px/1, wdth 92 wght 800 */
.bg-pdp__price .wc-block-components-product-price__value {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 92, "wght" 800;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--wp--preset--color--contrast);
}
/* mockup .price__was — small, grey, struck. Body font, normal weight: it must
   not inherit the display face or the tight tracking from the sale price. */
.bg-pdp__price del,
.bg-pdp__price del .amount,
.bg-pdp__price .wc-block-components-product-price__regular {
  font-family: var(--wp--preset--font-family--body);
  font-variation-settings: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--wp--preset--color--contrast-3);
  text-decoration: line-through;
}
/* mockup .price__unit — normal weight and tracking, below the row */
.bg-pdp__price .bg-unit {
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-variation-settings: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--wp--preset--color--contrast-2);
}

/* mockup .avail — coloured dot plus wording, never colour alone (§8) */
.bg-pdp__avail { margin-bottom: 18px; font-size: 13.5px; }
.bg-pdp__avail > * { margin: 0 0 7px; }
.bg-pdp__avail > *:last-child { margin-bottom: 0; }
.bg-pdp__avail .wc-block-components-product-stock-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.bg-pdp__avail .wc-block-components-product-stock-indicator::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--wp--preset--color--positive);
}
/* Red is low stock and nothing else (§8). `bg-low-stock` is added by
   inc/woocommerce.php at the same threshold that changes the wording to
   "Only N left" — WooCommerce's own `--low-stock` modifier uses a different
   threshold and does not fire at 3, which is why the urgency line rendered
   green. */
.bg-pdp__avail .wc-block-components-product-stock-indicator.bg-low-stock,
.bg-pdp__avail .wc-block-components-product-stock-indicator--low-stock {
  color: var(--wp--preset--color--negative);
}
/* Neutral, for the same reason as the card — see .bg-card__stock below. */
.bg-pdp__avail .wc-block-components-product-stock-indicator--out-of-stock {
  color: var(--wp--preset--color--contrast-3);
}
.bg-pdp__avail .wc-block-components-product-stock-indicator.bg-low-stock::before,
.bg-pdp__avail .wc-block-components-product-stock-indicator--low-stock::before {
  background: var(--wp--preset--color--negative);
}
.bg-pdp__avail .wc-block-components-product-stock-indicator--out-of-stock::before {
  background: var(--wp--preset--color--contrast-3);
}

/* mockup .buy / .qty / .atc — 54px tall, 2px ink frame, button fills the rest.
   Every selector here carries .wp-block-woocommerce-add-to-cart-form to beat
   WooCommerce's own inline rules, which set form.cart to
   `display:grid; grid-template-columns:min-content auto auto` and pin the
   button to `grid-column:2/3; justify-self:start`. Those have specificity
   (0,2,1) and print after theme.css, so a plain `.bg-pdp form.cart` ties and
   loses — which is why the button sat half-width. */
.bg-pdp .wp-block-woocommerce-add-to-cart-form { margin-bottom: 11px; width: 100%; }

/* The block prints its own availability line above the form. The stock
   indicator block already shows it where the mockup puts it, so this is the
   duplicate — same wording, twice. */
.bg-pdp .wp-block-woocommerce-add-to-cart-form > p.stock { display: none; }

.bg-pdp .wp-block-woocommerce-add-to-cart-form form.cart {
  display: flex;
  grid-template-columns: none;
  align-items: stretch;
  margin: 0;
  width: 100%;
}
/* ⚠ THE `:has()` GUARD IS LOAD-BEARING — do not simplify this selector.
   WooCommerce renders the quantity field as `type="hidden"` whenever min and
   max are equal, i.e. whenever only one unit can be bought. The wrapping
   `<div class="quantity">` still ships, empty. Without the guard this rule gave
   that empty div a 2px ink border and a fixed 54px height, so it drew a 4px
   wide, 54px tall black sliver beside Add to basket — both borders with nothing
   between them. Measured on a 1-in-stock product before the fix.
   WooCommerce guards every one of its own quantity rules the same way
   (`:where(:has(input:not([type=hidden])))`); this rule copied the look and not
   the guard. Same failure as §9's "an unfilled field renders nothing, including
   its frame" — the content went and the frame outlived it. */
.bg-pdp .wp-block-woocommerce-add-to-cart-form form.cart > .quantity:has(input:not([type="hidden"])) {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--wp--preset--color--contrast);
  border-radius: 0;
  height: 54px;
  flex: none;
  grid-column: auto;
}

/* The empty wrapper still occupies a flex slot. Collapse it so the Add button
   takes the full row rather than starting 4px in. */
.bg-pdp .wp-block-woocommerce-add-to-cart-form form.cart > .quantity:not(:has(input:not([type="hidden"]))) {
  display: none;
}
.bg-pdp .wp-block-woocommerce-add-to-cart-form form.cart .qty,
.bg-pdp .wp-block-woocommerce-add-to-cart-form form.cart .input-text {
  border: 0;
  border-radius: 0;
  width: 44px;
  min-width: 0;
  padding: 0;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  background: transparent;
}
.bg-pdp .wp-block-woocommerce-add-to-cart-form form.cart .wc-block-components-quantity-selector__button {
  width: 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.bg-pdp .wp-block-woocommerce-add-to-cart-form form.cart .wc-block-components-quantity-selector__button:hover {
  background: var(--wp--preset--color--base-2);
}

/* Only one unit can be bought — the stepper is shown but genuinely disabled
   (client instruction, 21 September 2026; see inc/woocommerce.php for why the
   buttons are `disabled` and the field only `readonly`).

   ⚠ The control must READ as unavailable, not merely fail silently when
   pressed. That is the whole basis on which §10d's objection was set aside:
   an inert control that looks live is the rule-12 problem in CSS form, so the
   dimming and the not-allowed cursor are part of the feature, not decoration.
   `:hover` is neutralised or the button would still light up under the
   pointer and contradict its own disabled state. */
.bg-pdp .wp-block-woocommerce-add-to-cart-form form.cart .wc-block-components-quantity-selector__button[disabled],
.bg-pdp .wp-block-woocommerce-add-to-cart-form form.cart .wc-block-components-quantity-selector__button[disabled]:hover {
  opacity: 0.3;
  cursor: not-allowed;
  background: transparent;
}
.bg-pdp .wp-block-woocommerce-add-to-cart-form form.cart .qty[readonly] {
  cursor: default;
}
.bg-pdp .wp-block-woocommerce-add-to-cart-form form.cart > .single_add_to_cart_button {
  flex: 1;
  grid-column: auto;
  justify-self: stretch;
  height: 54px;
  border: 0;
  border-radius: 0;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
}
.bg-pdp .wp-block-woocommerce-add-to-cart-form form.cart > .single_add_to_cart_button:hover {
  background: var(--wp--preset--color--accent);
}

/* mockup .deliv — bordered box, not a filled one */
.bg-pdp .bg-deliv {
  background: var(--wp--preset--color--base) !important;
  border: 1px solid var(--wp--preset--color--line);
  margin-bottom: 18px;
}
.bg-pdp .bg-deliv h4 {
  margin: 0 0 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* mockup .assure — green ticks, no bullets */
.bg-assure {
  list-style: none;
  margin: 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
}
/* ⚠ NOT display:flex — 20 September 2026. The icon is positioned, not a flex
   sibling, and that distinction is the whole fix.

   In a flex container every contiguous run of text becomes its own ANONYMOUS
   flex item, and so does every inline element. So

       7-day returns on unopened items — <a>read the policy</a>

   was two items laid out side by side, not one sentence: at 390px the link was
   pushed into a shrink-wrapped second column and broke over two lines, detached
   from the words it belongs to. `<strong>Secure checkout</strong> — encrypted…`
   split the same way, the label in one column and the explanation in another.

   Taking the li out of flex lets the content flow as ordinary text, so the link
   wraps inline where it falls. The tick then has to be absolute, with
   padding-left reserving its gutter. */
.bg-assure li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0 0 0 25px;
}
/* The icons are the mockup's own SVG paths, used as a mask so the shape is
   exact and the colour still comes from a token. An earlier attempt drew the
   tick with clip-path on a coloured box; combined with a second rule's
   border+rotate it produced a malformed glyph. One technique, one owner. */
.bg-assure li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: var(--wp--preset--color--positive);
  clip-path: none;
  border: 0;
  transform: none;
  -webkit-mask: var(--bg-tick) center / contain no-repeat;
  mask: var(--bg-tick) center / contain no-repeat;
}
/* mockup: the fourth claim carries a padlock, not a tick */
.bg-assure li:last-child::before {
  -webkit-mask: var(--bg-lock) center / contain no-repeat;
  mask: var(--bg-lock) center / contain no-repeat;
}
.bg-assure a { font-weight: 600; text-underline-offset: 2px; }

/* mockup .secure — lock and label left, payment marks hard right.
   `margin-left:auto` on .bg-pay is the usual way, but WordPress's flex group
   wraps and the auto margin did not push. space-between is unambiguous. */
.bg-secure {
  margin-top: 18px;
  gap: 14px;
  justify-content: space-between;
}
.bg-secure__lock { gap: 8px; }
.bg-secure__lock p { margin: 0; font-size: 12.5px; }
.bg-secure__ico {
  width: 16px; height: 16px; flex: none; display: block;
  stroke: var(--wp--preset--color--positive); fill: none; stroke-width: 1.8;
}
.bg-pay { gap: 6px; margin-left: auto; }
/* mockup .secure__pay span — uppercase marks in outlined boxes. The pattern
   stores them as "GCash", "Mastercard" so the brand names stay correctly cased
   in the markup; the caps are presentational. */
.bg-pay p {
  margin: 0;
  border: 1px solid var(--wp--preset--color--line);
  padding: 3px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--wp--preset--color--contrast-3);
}

/* --- lower sections ----------------------------------------------------- */
/* mockup .lower / .blk — 36px bands separated by a 1px rule */
.bg-pdp__lower { padding-bottom: 60px; }
.bg-blk {
  padding: 36px 0;
  border-top: 1px solid var(--wp--preset--color--line);
}
.bg-blk > h2 { margin: 0 0 14px; }
.bg-blk p { max-width: 70ch; color: var(--wp--preset--color--contrast-2); }

/* mockup .two — even split, 44px gutter */
.bg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
@media (max-width: 820px) { .bg-two { grid-template-columns: 1fr; gap: 28px; } }

/* mockup .aller — 2px ink frame */
.bg-aller h3 {
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.bg-aller p { margin: 0 0 9px; font-size: 14px; color: var(--wp--preset--color--contrast); }
.bg-aller p:last-child { margin-bottom: 0; }

/* mockup .specs — label column at 38%, 1px rules */
.bg-specs table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bg-specs th {
  text-align: left;
  font-weight: 500;
  color: var(--wp--preset--color--contrast-3);
  padding: 9px 16px 9px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  width: 38%;
  font-size: 13px;
}
.bg-specs td { padding: 9px 0; border-bottom: 1px solid var(--wp--preset--color--line); }

/* --- reviews ------------------------------------------------------------
   CusRev (Customer Reviews for WooCommerce) renders its own summary,
   histogram and list. These rules map its classes onto the mockup's .rv
   design. Class names were read out of the rendered output, not guessed —
   if a CusRev update renames one, the styling degrades silently, so
   re-check this block after a plugin upgrade.

   CusRev structure:
     .cr-all-reviews-shortcode
       .cr-summaryBox-wrap
         .cr-overall-rating-wrap  .cr-average-rating / -stars / .cr-total-rating-count
         .cr-summary-separator
         .ivole-summaryBox  >  .cr-histogramTable  >  .ivole-histogramRow x5
       ol.commentlist  >  li.review.depth-1  (li.depth-2 = owner reply)
   ----------------------------------------------------------------------- */

/* mockup .rv — 270px summary column, reviews right, 44px gutter.
   CusRev stacks summary, then search, then sort, then list. The grid pulls
   the summary into column 1 and everything else into column 2. */
.bg-reviews .cr-all-reviews-shortcode {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 0 44px;
  align-items: start;
}
.bg-reviews .cr-summaryBox-wrap { grid-column: 1; grid-row: 1 / span 99; }
.bg-reviews .cr-all-reviews-shortcode > *:not(.cr-summaryBox-wrap) { grid-column: 2; }
@media (max-width: 820px) {
  .bg-reviews .cr-all-reviews-shortcode { grid-template-columns: 1fr; gap: 26px; }
  .bg-reviews .cr-summaryBox-wrap,
  .bg-reviews .cr-all-reviews-shortcode > *:not(.cr-summaryBox-wrap) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* CusRev chrome the mockup does not have. Hidden rather than removed because
   the plugin renders them unconditionally — there is no option for either. */
.bg-reviews .cr-ajax-search,
.bg-reviews .cr-button-search,
.bg-reviews .cr-ajax-reviews-sort-div,
.bg-reviews .cr-count-row,
.bg-reviews .cr-summary-separator,
.bg-reviews .cr-summary-separator-int,
.bg-reviews .cr-summary-separator-side { display: none !important; }

/* Summary column: no filled panel, left-aligned. CusRev centres it inside a
   grey box; the mockup has neither. */
.bg-reviews .cr-summaryBox-wrap,
.bg-reviews .ivole-summaryBox,
.bg-reviews .cr-overall-rating-wrap {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
}

/* Stars. CusRev hardcodes #FFBC00 as fill/stroke on the SVG — not
   currentColor — so setting `color` does nothing. These are the selectors
   that actually carry it. Red is the accent; §8 fixes star colour to it. */
.bg-reviews .crstar-rating-svg .cr-rating-icon-base .cr-rating-icon-bg {
  stroke: var(--wp--preset--color--line);
}
.bg-reviews .crstar-rating-svg .cr-rating-icon-frnt .cr-rating-icon {
  fill: var(--wp--preset--color--accent);
}
.bg-reviews .cr-histogram-rating-icon { color: var(--wp--preset--color--accent); }

/* "Add a review" — CusRev ships it green, which is not in the palette at all.
   §8: green means in-stock and nothing else. */
.bg-reviews .cr-all-reviews-add-review,
.bg-reviews .cr-summaryBox-add-review a,
.bg-reviews .cr-add-review-wrap a {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  border: 0;
  border-radius: 0;
  font-weight: 600;
}
.bg-reviews .cr-all-reviews-add-review:hover,
.bg-reviews .cr-summaryBox-add-review a:hover {
  background: var(--wp--preset--color--accent);
}
.bg-reviews .cr-summaryBox-add-review { text-align: left; margin-top: 1rem; }

/* mockup .rv__score — 54px, wdth 92 wght 800 */
.bg-reviews .cr-average-rating {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 92, "wght" 800;
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--wp--preset--color--contrast);
}
.bg-reviews .cr-average-rating-stars { margin-top: .25rem; }
/* mockup .rv__of */
.bg-reviews .cr-total-rating-count {
  margin: 5px 0 16px;
  font-size: 13px;
  color: var(--wp--preset--color--contrast-3);
}

/* mockup .dist — one clickable row per star, bar + count */
.bg-reviews .ivole-histogramRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--wp--preset--color--contrast-2);
}
.bg-reviews .ivole-histogramCell1 { flex: none; }
/* data-rating on this span is CusRev's filter handle — the mockup's
   "Tap a row to filter". Make it read as interactive. */
.bg-reviews .cr-histogram-a { cursor: pointer; }
.bg-reviews .ivole-histogramRow:hover .cr-histogram-a {
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}
/* mockup .dist__b — 8px track, ink fill */
.bg-reviews .ivole-histogramCell2 { flex: 1; }
.bg-reviews .ivole-meter {
  height: 8px;
  background: var(--wp--preset--color--base-2);
  border-radius: 0;
  overflow: hidden;
}
.bg-reviews .ivole-meter-bar {
  height: 100%;
  background: var(--wp--preset--color--contrast);
  border-radius: 0;
}
/* mockup .dist em — the count, right-aligned */
.bg-reviews .ivole-histogramCell3 {
  flex: none;
  width: 22px;
  text-align: right;
  color: var(--wp--preset--color--contrast-3);
}

/* mockup .rvItem — review list, 1px rules, no bullets, no boxes.
   CusRev outlines each review and shows an avatar; the mockup does neither.
   Avatars are switched off at source with avatars="hidden" in the pattern. */
.bg-reviews .commentlist { list-style: none; margin: 0; padding: 0; }
.bg-reviews li.review {
  list-style: none;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  background: none;
  padding: 18px 0;
  margin: 0;
}
.bg-reviews li.review:first-child { padding-top: 0; }
.bg-reviews .comment_container {
  border: 0;
  background: none;
  padding: 0;
  display: block;
}
.bg-reviews .cr-avatar,
.bg-reviews .cr-avatar-check { display: none; }

/* CusRev renders review body and author in caps. The mockup is sentence case,
   and the copy is stored sentence case, so the transform is purely visual —
   turn it off rather than rewriting content. */
.bg-reviews .cr-comment-text,
.bg-reviews .cr-comment-text p,
.bg-reviews .description,
.bg-reviews .description p,
.bg-reviews .woocommerce-review__author,
.bg-reviews .woocommerce-review__published-date { text-transform: none; }
.bg-reviews .cr-meta-author-featured-date,
.bg-reviews .cr-meta-author-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.bg-reviews .woocommerce-review__author { font-size: 14px; font-weight: 700; }
.bg-reviews .woocommerce-review__published-date {
  font-size: 12px;
  color: var(--wp--preset--color--contrast-3);
  margin-left: auto;
}
.bg-reviews .cr-comment-text p,
.bg-reviews .description p {
  margin: 0;
  font-size: 14.5px;
  max-width: 68ch;
  color: var(--wp--preset--color--contrast-2);
}

/* mockup .verif — green outlined VERIFIED badge */
.bg-reviews .woocommerce-review__verified,
.bg-reviews .cr-verified-owner {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--positive);
  border: 1px solid var(--wp--preset--color--positive);
  padding: 2px 6px;
  font-style: normal;
}

/* mockup .reply — the owner reply is a depth-2 child comment */
.bg-reviews .children { list-style: none; margin: 0; padding: 0; }
.bg-reviews li.review.depth-2 {
  border-bottom: 0;
  border-left: 4px solid var(--wp--preset--color--highlight);
  background: var(--wp--preset--color--base-2);
  padding: 12px 15px;
  margin: 12px 0 0;
}
/* The mockup's reply carries a name and nothing else — no badge, no date.
   CusRev labels it "Store Manager" via the same class the VERIFIED badge
   uses, so it has to be hidden here specifically rather than globally. */
.bg-reviews li.review.depth-2 .woocommerce-review__verified,
.bg-reviews li.review.depth-2 .cr-verified-owner,
.bg-reviews li.review.depth-2 .woocommerce-review__published-date { display: none; }
.bg-reviews li.review.depth-2 .woocommerce-review__author {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bg-reviews li.review.depth-2 .cr-comment-text p,
.bg-reviews li.review.depth-2 .description p { font-size: 13.5px; }

/* Stars: CusRev draws SVG with a clipped front layer, same technique as the
   mockup's two-layer partial fill, so only the colours need setting. */
.bg-reviews .cr-rating-icon-base { color: var(--wp--preset--color--line); }
.bg-reviews .cr-rating-icon-frnt { color: var(--wp--preset--color--accent); }

/* mockup .photos — customer photo strip, 56px cells */
.bg-reviews .cr-review-images img,
.bg-reviews .cr-all-reviews-media img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base-2);
}

/* mockup .xs — four related products across */
.bg-pdp .wp-block-woocommerce-related-products .wc-block-product-template {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .bg-pdp .wp-block-woocommerce-related-products .wc-block-product-template {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- free-delivery band -------------------------------------------------
   mockup .freebar — the yellow strip between the header row and the category
   nav, counting down to the threshold.

   It starts `hidden` and assets/js/free-delivery.js reveals it. Nothing here
   is server-rendered: the header is on cacheable pages, and a basket total
   baked into one of those is served to the next visitor (rule 7).

   This is the one place besides a price ticket where `highlight` is allowed as
   a background — §8 names "the free-delivery bar" explicitly.
   ----------------------------------------------------------------------- */
.bg-freebar { border-bottom: 1px solid var(--wp--custom--tint--track); }
/* ⚠ A CLASS, NOT [hidden]. A bare `hidden` attribute on the core/group wrapper
   is markup the block does not know about, so the Site Editor judged the saved
   content invalid and offered "Attempt recovery" over the whole header. See
   patterns/free-delivery-bar.php. `className` round-trips; the attribute did
   not. assets/js/free-delivery.js toggles this class. */
/* ⚠ `is-empty` is NO LONGER used for an empty basket — the band ships visible
   with the offer line (client, 5 Oct 2026) and free-delivery.js now rewrites
   its text instead of hiding it. The rule stays because the class is still the
   honest way to remove the band entirely if one is ever needed, and because
   the comment above records why it is a class and not a `hidden` attribute. */
.bg-freebar.is-empty { display: none; }

/* --- unlocked: shelf yellow becomes `positive` green -----------------------
   ⚠ `!important` ON THE BACKGROUND, AND IT IS NOT LAZINESS.
   The group carries backgroundColor:"highlight", and WordPress emits preset
   colour classes as `.has-highlight-background-color{…!important}` — read out
   of a rendered page, not assumed (§8). A plain class here, at any
   specificity, loses to that. This is the same situation §10a documents for
   the mini-cart badge: an author !important answering someone else's
   !important, not a specificity contest.

   The block keeps its attribute so the Site Editor still previews the yellow
   resting state correctly; only the JS-applied state overrides it. */
.bg-freebar.is-unlocked {
  background-color: var(--wp--preset--color--positive) !important;
  color: var(--wp--preset--color--base);
}
/* positive is #0B6B3A — dark. The track fill is `contrast` (#111) by default,
   which is all but invisible on it, so both flip to base. */
.bg-freebar.is-unlocked .bg-freebar__track i { background: var(--wp--preset--color--base); }
.bg-freebar.is-unlocked .bg-freebar__track { background: rgba(255, 255, 255, .25); }
.bg-freebar__in {
  display: flex;
  align-items: center;
  gap: 14px;
  /* 12px, not the mockup's 9px — the band was enlarged on the same 5 Oct
     instruction as the type above, and 9px around 24px of line read cramped. */
  padding: 12px 0;
  /* ⚠ A FLOOR, SO THE BAND CANNOT CHANGE HEIGHT BETWEEN ITS THREE STATES.
     Pinning line-height was not enough: the countdown and unlocked lines wrap
     their figure in a <b> set in the DISPLAY family, and Archivo's baseline
     metrics push the line box one pixel past the pinned 21px even when the
     <b> inherits it — measured .bg-freebar__txt at 21.00px empty against
     22.00px populated. So the row gets a floor rather than the text getting a
     ceiling, which cannot clip anything.
     48px = 24px tallest line + 12px padding top and bottom, with the global
     border-box reset (§8) meaning min-height includes that padding. Re-pinned
     when the type was enlarged on 5 Oct — if the font size changes again, this
     number has to be re-measured with it or it stops being a floor at all. */
  min-height: 48px;
}
.bg-freebar__txt { white-space: nowrap; }
.bg-freebar__track {
  flex: 1;
  max-width: 420px;
  height: 7px;
  background: var(--wp--custom--tint--track-strong);
}
.bg-freebar__track i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--wp--preset--color--contrast);
  transition: width var(--wp--custom--transition);
}
@media (max-width: 600px) {
  /* mockup drops the track below 600px rather than squeezing the label */
  .bg-freebar__track { display: none; }
}

/* ==========================================================================
   CART — UI Design/cart-03-market-stall.html

   LAYOUT ONLY. Every font-size, font-weight, letter-spacing and
   font-variation-settings for this page is in the TYPOGRAPHY block at the top
   of this file. CLAUDE.md §8: one selector, one owner. Restating type here is
   the exact mistake that rendered the hero facts at 17px and produced a
   malformed tick glyph on the product page.
   ========================================================================== */

/* WooCommerce's block-theme sheet caps the shortcode wrapper:
     .woocommerce-cart main .woocommerce { max-width: 1000px }
   at (0,2,1), enqueued from enqueue_block_assets() so it never passes through
   the woocommerce_enqueue_styles filter that inc/cart.php uses. Beaten on
   specificity — (0,2,2) — never on load order. */
body.woocommerce-cart main .woocommerce,
body.woocommerce-cart main .wp-block-post-title { max-width: none; }

/* --- shared page head (cart, category, about, contact) ------------------ */
/* mockup .phead — 38px band with a 1px bottom rule */
.bg-phead { padding-block: 38px; }
.bg-phead h1 { margin: 0 0 10px; }
.bg-phead__sub { margin: 0; max-width: 62ch; }

/* --- the two-column shell ----------------------------------------------- */
/* mockup .cart — 1fr 380px, gap 44px, padding 34px 0 60px.
   align-items:start is load-bearing for the sticky summary: a stretched grid
   cell is exactly as tall as the column, leaving sticky nothing to travel in. */
.bg-cart {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 44px;
  align-items: start;
  padding: 34px 0 60px;
}
.bg-cart__main { min-width: 0; }

/* ⚠ No overflow other than visible on any ancestor of .bg-sum, or sticky
   silently stops working. */
/* The mockup hardcodes top:100px, assuming its 81px sticky header. Here the
   sticky header is a Customizer switch that can be off, and the admin bar adds
   32px (46px under 782px) — so the offset is a variable owned by
   inc/customizer.php, next to the sticky rule itself. Default 0: not sticky,
   nothing to clear. */
.bg-cart__side {
  position: sticky;
  top: calc(var(--bg-sticky-top, 0px) + 1.25rem);
}

/* --- lines --------------------------------------------------------------- */
/* mockup .lines / .line */
.bg-cart__lines { border-top: 2px solid var(--wp--preset--color--contrast); }
.bg-cart__line {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/* mockup .line__m — grey square; the WooCommerce placeholder centres in it,
   which is what this page shows until real product images exist. */
.bg-cart__media {
  background: var(--wp--preset--color--base-2);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 10px;
  overflow: hidden;
}
.bg-cart__media a { display: block; line-height: 0; }
.bg-cart__media img { width: 100%; height: 100%; object-fit: contain; display: block; }

.bg-cart__body { min-width: 0; }
.bg-cart__brand { margin: 0 0 3px; text-transform: uppercase; color: var(--wp--preset--color--contrast-3); }
.bg-cart__name { margin: 0 0 3px; }
.bg-cart__name a { text-decoration: none; color: inherit; }
.bg-cart__name a:hover { color: var(--wp--preset--color--accent); }
.bg-cart__size { margin: 0 0 9px; color: var(--wp--preset--color--contrast-3); }
.bg-cart__unit { margin: 0; color: var(--wp--preset--color--contrast-3); }
/* Red is urgency and low stock only — §8 colour roles. */
.bg-cart__low { margin: 7px 0 0; color: var(--wp--preset--color--negative); }

/* mockup .line__r — total, stepper, remove; right-aligned column */
.bg-cart__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  text-align: right;
}
.bg-cart__total { display: block; }
.bg-cart__remove {
  color: var(--wp--preset--color--contrast-3);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.bg-cart__remove:hover { color: var(--wp--preset--color--accent); }

/* --- quantity stepper ---------------------------------------------------- */
/* mockup .qty — one 40px bordered group, buttons inside */
.bg-qty {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--wp--preset--color--contrast);
  height: 40px;
}
.bg-qty__btn {
  width: 32px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.bg-qty__btn:hover { background: var(--wp--preset--color--base-2); }
.bg-qty__input {
  width: 38px;
  text-align: center;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.bg-qty__input::-webkit-outer-spin-button,
.bg-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- update button: the no-JS path --------------------------------------- */
/* Visible until assets/js/cart.js marks the page live. With JavaScript off the
   class is never added and this stays the only way to commit a quantity. */
.bg-cart__actions { padding-top: 16px; }
.bg-cart__update {
  background: none;
  border: 1px solid var(--wp--preset--color--contrast);
  color: inherit;
  padding: 10px 18px;
  cursor: pointer;
}
.bg-cart__update:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.bg-cart__update[disabled] { opacity: .45; cursor: default; }
.bg-cart-live .bg-cart__actions { padding-top: 0; }
.bg-cart-live .bg-cart__update { display: none; }

/* --- cart foot ----------------------------------------------------------- */
/* mockup .cartfoot */
.bg-cart__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
}
.bg-cart__link { text-decoration: underline; text-underline-offset: 3px; }
.bg-cart__link:hover { color: var(--wp--preset--color--accent); }

/* --- free-delivery nudge -------------------------------------------------- */
/* mockup .nudge — the tints are derived from tokens in theme.json
   (settings.custom.tint), not literal hexes: §13 rule 10. The plain background
   before each is a fallback for browsers without color-mix(). */
.bg-nudge {
  border: 2px solid var(--wp--preset--color--highlight);
  background: var(--wp--preset--color--base);
  background: var(--wp--custom--tint--highlight);
  padding: 18px 20px;
  margin: 24px 0 0;
}
.bg-nudge.is-done {
  border-color: var(--wp--preset--color--positive);
  background: var(--wp--preset--color--base);
  background: var(--wp--custom--tint--positive);
}
.bg-nudge__h {
  display: flex;
  gap: 11px;
  align-items: center;
  margin: 0 0 11px;
}
.bg-nudge__ico {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: var(--wp--preset--color--contrast);
  fill: none;
  stroke-width: 1.7;
}
.bg-nudge__bar {
  height: 9px;
  background: var(--wp--custom--tint--track);
}
.bg-nudge__bar i {
  display: block;
  height: 100%;
  background: var(--wp--preset--color--contrast);
  transition: width var(--wp--custom--transition);
}

/* --- order summary -------------------------------------------------------- */
/* mockup .sum */
.bg-sum { border: 1px solid var(--wp--preset--color--line); }
.bg-sum__h {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  padding: 15px 20px;
  margin: 0;
}
.bg-sum__b { padding: 18px 20px; }

/* mockup .sum__r */
.bg-sum__r {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  margin: 0;
}
.bg-sum__r .bg-sum__value,
.bg-sum__r > span:last-child { white-space: nowrap; }
.bg-sum__r--muted { color: var(--wp--preset--color--contrast-3); }
/* mockup .sum__r.free — green is in-stock/positive only, and "FREE" is the
   one other place it is allowed: money the customer does not pay. */
.bg-sum__eta { color: var(--wp--preset--color--contrast-3); }
.bg-sum__note { color: var(--wp--preset--color--contrast-3); white-space: normal; }
.bg-sum__note--warn { color: var(--wp--preset--color--negative); }
.bg-sum__methods { list-style: none; margin: 0; padding: 0; }
.bg-sum__methods li + li { margin-top: 4px; }
.bg-sum__methods label { cursor: pointer; }
/* mockup .sum__r.free — the one use of green besides in-stock: money not paid */
.bg-sum__free { color: var(--wp--preset--color--positive); }

/* mockup .sum__field — rules top and bottom */
.bg-sum__field {
  padding: 12px 0;
  margin: 8px 0;
  border-top: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.bg-sum label {
  display: block;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-3);
}
.bg-sum__select {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  margin-top: 5px;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
  color: inherit;
}
/* The no-JS recalculate button. cart.js reveals nothing here — it hides this,
   because with JS the select submits on change. */
.bg-sum__calc {
  margin-top: 8px;
  background: none;
  border: 1px solid var(--wp--preset--color--contrast);
  color: inherit;
  padding: 8px 14px;
  cursor: pointer;
}
.bg-sum__calc:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.bg-cart-live .bg-sum__calc { display: none; }

/* mockup .voucher */
.bg-voucher { display: flex; gap: 8px; margin-top: 5px; }
.bg-voucher__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
  color: inherit;
}
.bg-voucher__go {
  flex: none;
  padding: 0 15px;
  border: 1px solid var(--wp--preset--color--contrast);
  background: none;
  color: inherit;
  cursor: pointer;
}
.bg-voucher__go:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* WooCommerce's own remove-coupon link sits in the coupon row */
.bg-sum .woocommerce-remove-coupon { color: var(--wp--preset--color--contrast-3); }
.bg-sum .woocommerce-remove-coupon:hover { color: var(--wp--preset--color--accent); }

/* mockup .sum__tot */
.bg-sum__tot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  border-top: 2px solid var(--wp--preset--color--contrast);
  margin-top: 12px;
  padding-top: 14px;
}

/* mockup .btn / .btn--p */
.bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 26px;   /* mockup .btn — omitting this squashed every .bg-btn */
  border: 2px solid transparent;
  text-decoration: none;
}
.bg-btn--primary {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}
.bg-btn--primary:hover {
  background: var(--wp--preset--color--contrast);
  background: var(--wp--custom--tint--accent-press);
  color: var(--wp--preset--color--base);
}
.bg-sum__go { margin-top: 16px; }
.bg-sum__go .bg-btn { width: 100%; }

/* mockup .secure — stacked, unlike the product page's horizontal .bg-secure */
.bg-secure--sum {
  margin-top: 14px;
  border-top: 1px solid var(--wp--preset--color--line);
  padding-top: 14px;
}
.bg-secure__line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
}
.bg-secure__line .bg-secure__ico {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: var(--wp--preset--color--positive);
  fill: none;
  stroke-width: 1.9;
}
.bg-cart__side .bg-pay { display: flex; gap: 6px; flex-wrap: wrap; }
.bg-cart__side .bg-pay span {
  border: 1px solid var(--wp--preset--color--line);
  padding: 3px 7px;
  color: var(--wp--preset--color--contrast-3);
  text-transform: uppercase;
}

/* --- empty basket --------------------------------------------------------- */
.bg-cart--empty {
  display: block;
  padding: 40px 0 64px;
  max-width: 46rem;
}
.bg-cart--empty .cart-empty,
.bg-cart--empty .wc-empty-cart-message {
  border: 1px solid var(--wp--preset--color--line);
  padding: 28px 30px;
  margin: 0 0 20px;
}
.bg-cart__empty-go { margin: 0; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  .bg-cart { grid-template-columns: 1fr; gap: 28px; }
  /* Sticky in a single column would pin the summary over the lines. */
  .bg-cart__side { position: static; }
}
@media (max-width: 620px) {
  .bg-cart__line { grid-template-columns: 76px 1fr; gap: 14px; }
  .bg-cart__right {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ==========================================================================
   CHECKOUT — UI Design/checkout-03-market-stall.html

   LAYOUT ONLY. Type lives in the TYPOGRAPHY block at the top of this file.

   The mockup's reduced header and footer are deliberately NOT built — client
   instruction: the site header and footer everywhere, this page included.
   ========================================================================== */

body.woocommerce-checkout main .woocommerce,
body.woocommerce-checkout main .wp-block-post-title { max-width: none; }

/* --- progress steps ------------------------------------------------------ */
/* mockup .steps */
.bg-costeps__in {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.bg-costeps__in::-webkit-scrollbar { display: none; }
.bg-costep {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px 14px 0;
  margin-right: 22px;
  white-space: nowrap;
  color: var(--wp--preset--color--contrast-3);
}
.bg-costep a { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.bg-costep a:hover { text-decoration: underline; }
.bg-costep__n {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.bg-costep.is-on { color: var(--wp--preset--color--contrast); }
.bg-costep.is-on .bg-costep__n {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--contrast);
}
.bg-costep.is-done { color: var(--wp--preset--color--positive); }
.bg-costep.is-done .bg-costep__n {
  background: var(--wp--preset--color--positive);
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--positive);
}

/* --- the two-column shell ------------------------------------------------ */
/* mockup .co — same geometry as the cart */
.bg-co {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 44px;
  align-items: start;
  padding: 34px 0 60px;
}
.bg-co__main { min-width: 0; }
.bg-co__side {
  position: sticky;
  top: calc(var(--bg-sticky-top, 0px) + 1.25rem);
}

/* --- guest notice -------------------------------------------------------- */
/* mockup .guest — flag blue is the informational edge, never an action */
.bg-guest {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 13px 16px;
  margin-bottom: 18px;
  background: var(--wp--preset--color--base-2);
  border-left: 4px solid var(--wp--preset--color--primary-2);
}
.bg-guest__in { text-decoration: underline; }
.bg-guest__in:hover { color: var(--wp--preset--color--accent); }

/* --- numbered panels ----------------------------------------------------- */
/* mockup .blk */
.bg-panel {
  border: 1px solid var(--wp--preset--color--line);
  margin-bottom: 18px;
}
.bg-panel__h {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 20px;
  background: var(--wp--preset--color--base-2);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.bg-panel__n {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
.bg-panel__b { padding: 20px; }
.bg-panel__b > :last-child { margin-bottom: 0; }

/* --- form fields --------------------------------------------------------- */
/* mockup .f — WooCommerce wraps each field in <p class="form-row">, so the
   mockup's .f maps onto that rather than onto new markup. */
.bg-panel__b .form-row {
  display: block;
  margin: 0 0 16px;
  padding: 0;
}
.bg-panel__b .form-row > label {
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-3);
}
.bg-panel__b .required {
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  border: 0;
}
.bg-panel__b .optional { color: var(--wp--preset--color--contrast-3); }
.bg-panel__b input[type="text"],
.bg-panel__b input[type="email"],
.bg-panel__b input[type="tel"],
.bg-panel__b input[type="number"],
.bg-panel__b input[type="password"],
.bg-panel__b select,
.bg-panel__b textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
  color: inherit;
}
.bg-panel__b input:focus,
.bg-panel__b select:focus,
.bg-panel__b textarea:focus {
  border-color: var(--wp--preset--color--contrast);
  outline: 0;
}
.bg-panel__b textarea { min-height: 88px; resize: vertical; }
.bg-panel__b .description {
  margin: 5px 0 0;
  color: var(--wp--preset--color--contrast-3);
}

/* mockup .g2 / .g3 */
.bg-g2, .bg-g3 { display: grid; gap: 14px; }
.bg-g2 { grid-template-columns: 1fr 1fr; }
.bg-g3 { grid-template-columns: 1fr 1fr 1fr; }

/* ⚠ min-width:0 IS THE FIX FOR THE UNEVEN, OVERFLOWING ADDRESS ROW.
   Do not remove it because the row "looks fine" — it looks fine because of it.

   A `1fr` track is minmax(auto, 1fr), and `auto` means the item's MIN-CONTENT
   width. selectWoo wraps the province select (country-select.js:57) in a
   .select2-selection__rendered whose text is `white-space: nowrap`, so its
   min-content width is the longest province name — "Zamboanga del Norte".
   That is wider than a third of the row, so the Province column refused to
   shrink: City was squeezed, ZIP was pushed past the panel's right edge, and
   every field in the row ended up a different width.

   min-width:0 lets a grid item shrink below min-content, which is what the
   mockup's equal thirds require. Applied to the field wrappers rather than the
   selects, so any future wide control is covered too. */
.bg-g2 > *, .bg-g3 > * { min-width: 0; }

/* WooCommerce wraps every control in <span class="woocommerce-input-wrapper">.
   A span is display:inline, so `width: 100%` on the input inside resolves
   against the <p> rather than the span — mostly harmless, but it leaves the
   select2 container sizing itself from content instead of its box. */
.bg-panel__b .woocommerce-input-wrapper { display: block; width: 100%; }

/* One allowed country, so the country control is a single-option select with
   nothing to choose. It stays in the DOM — it still has to POST — but the row
   is hidden, which is what the mockup shows. */
.bg-panel__b #billing_country_field { display: none; }

/* --- the province select is a selectWoo widget ---------------------------
   WooCommerce upgrades `select.state_select` to selectWoo/select2
   (country-select.js:57, guarded by `if ( $().selectWoo )` at :10), so the
   province field is NOT the native select the mockup draws. Unstyled it
   renders as a 28px grey rounded pill — a foreign control in the middle of the
   form, which is what made it look broken.

   IT IS KEPT RATHER THAN DISABLED, deliberately. Eighty-two provinces in a
   plain select is a long scroll with no way to jump; select2 makes it
   type-to-search. Removing it would have been easy — dropping the selectWoo
   script makes the :10 guard fail and the native select return — but it would
   trade a real usability gain for a cosmetic one. Styled to match instead, so
   it looks like every other field and behaves better than one.

   The dropdown panel is appended to <body>, so those rules cannot be scoped to
   the panel. Kept to the .select2- namespace and tokenised.
   ----------------------------------------------------------------------- */
.bg-panel__b .select2-container { width: 100% !important; }
.bg-panel__b .select2-container--default .select2-selection--single {
  height: auto;
  padding: 12px 13px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 0;
  background: var(--wp--preset--color--base);
}
.bg-panel__b .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.45;
  color: inherit;
}
.bg-panel__b .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--wp--preset--color--contrast-3);
}
.bg-panel__b .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 8px;
}
.bg-panel__b .select2-container--default.select2-container--open .select2-selection--single,
.bg-panel__b .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--wp--preset--color--contrast);
}

/* The dropdown itself — flat, square, 1px rule, no shadow (§8). */
.select2-dropdown {
  border: 1px solid var(--wp--preset--color--contrast);
  border-radius: 0;
  background: var(--wp--preset--color--base);
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--wp--preset--color--line);
  padding: 8px 10px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

/* --- option cards: delivery method and payment --------------------------- */
/* mockup .opt — one card per choice, 2px ink border when selected */
.bg-payopts { list-style: none; margin: 0; padding: 0; }
.bg-opt {
  display: block;
  border: 1px solid var(--wp--preset--color--line);
  padding: 15px 17px;
  margin-bottom: 10px;
  cursor: pointer;
}
.bg-opt:hover { border-color: var(--wp--preset--color--contrast-2); }
/* Padding drops by the extra border width so the card does not jump 1px when
   selected — the mockup does the same arithmetic. */
.bg-opt.is-on {
  border: 2px solid var(--wp--preset--color--contrast);
  padding: 14px 16px;
}
/* ⚠ THE LABEL REACHES INTO THE CARD'S PADDING — 20 September 2026.
   Measured at 390px: Bank Transfer's clickable row was **22px tall** inside a
   card 706px tall. Tapping the card's padding, or anywhere beside the gateway
   name, selected nothing.

   Two causes, and the second is one this build created:

   1. The mockup makes the WHOLE card the label — `.opt{display:block;
      padding:15px 17px;cursor:pointer}` with `.opt__r` a plain row inside it
      (checkout-03-market-stall.html:189). Here `<li class="bg-opt">` carries
      the border and padding and the `<label>` is only the inner row, because
      the expanded `.payment_box` has to be a sibling of the label, not inside
      it. So the hit area stopped at the text.
   2. §10b-i then suppressed `.bg-opt__desc` for any gateway with fields, so
      Bank Transfer lost the description line that had been padding the row out
      and it collapsed to the height of its title alone.

   Pulling the label out by the card's own padding restores the mockup's hit
   area without moving the padding off the li, which still has to wrap the
   payment panel below. The values mirror `.bg-opt` and `.bg-opt.is-on`
   exactly — change one and change the other. */
.bg-opt__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  margin: -15px -17px 0;
  padding: 15px 17px;
}
.bg-opt.is-on > .bg-opt__row {
  margin: -14px -16px 0;
  padding: 14px 16px;
}
.bg-opt__row input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--wp--preset--color--accent);
}
.bg-opt__body { flex: 1; min-width: 0; }
.bg-opt__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: baseline;
}
.bg-opt__price.is-free { color: var(--wp--preset--color--positive); }
.bg-opt__desc {
  display: block;
  margin: 4px 0 0;
  color: var(--wp--preset--color--contrast-3);
}
.bg-opt__extra {
  margin: 13px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--wp--preset--color--line);
}
.bg-opt__extra p:first-child { margin-top: 0; }
.bg-ship__none { margin: 0; color: var(--wp--preset--color--contrast-3); }

/* --- bank transfer: account details + receipt ---------------------------- */
/* No mockup exists for this — checkout-03-market-stall.html draws card and
   GCash but no bank transfer panel (§17). Built from the parts the mockup does
   define: the summary's label/value rhythm for the account rows and the
   existing field styling for the upload. */
.bg-bacs__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  margin: 0 0 12px;
  padding: 13px 15px;
  background: var(--wp--custom--tint--highlight, var(--wp--preset--color--base-2));
  border: 1px solid var(--wp--preset--color--line);
}
.bg-bacs__details dt {
  margin: 0;
  color: var(--wp--preset--color--contrast-2);
}
.bg-bacs__details dd {
  margin: 0;
  font-weight: 600;
  /* An account number is read digit by digit and copied by hand. */
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

/* ⚠ ONE COLUMN ON A PHONE, AND THE ACCOUNT NUMBER NEVER BREAKS.
   20 September 2026. At 390px the `auto 1fr` grid gave the value column about
   100px, because "Account number" is a wide label. Measured result: the name
   wrapped over three lines and the number rendered as

       186501725
       8

   `overflow-wrap: anywhere` was breaking it mid-digits. A customer copying an
   account number out of two fragments is one transposition away from paying
   the wrong account, so the number is the one thing here that must stay
   whole — hence `break-word` above, which only breaks where it must, plus the
   stacked layout below to make sure it never has to. */
@media (max-width: 480px) {
  .bg-bacs__details {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .bg-bacs__details dt { margin-top: 8px; }
  .bg-bacs__details dt:first-of-type { margin-top: 0; }
}
.bg-bacs__ref { margin: 0 0 14px; color: var(--wp--preset--color--contrast-2); }

/* --- GCash: the QR, beside the number it encodes ------------------------- */
/* No mockup exists for this panel — checkout-03-market-stall.html draws GCash
   as a radio option with no detail behind it (§17). Built from the parts the
   mockup does define: it reuses .bg-bacs__details verbatim for the account
   rows, so bank transfer and GCash read identically, and the QR gets the flat
   1px frame §8 allows instead of a card. */
.bg-gcash__qr {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.bg-gcash__qr img {
  /* A QR has to stay square and stay scannable: big enough for a camera,
     small enough not to dominate a 262px-ish panel. */
  width: 168px;
  height: 168px;
  object-fit: contain;
  border: 1px solid var(--wp--preset--color--line);
  padding: 8px;
  background: var(--wp--preset--color--base);
}
.bg-gcash__qr figcaption {
  font-size: 11.5px;
  color: var(--wp--preset--color--contrast-3);
}

/* --- the receipt, on the customer's own order page ----------------------- */
/* No mockup: there is no order-details design (§17). Built from the same flat
   1px frame the rest of the checkout uses, so it reads as part of the order
   rather than a notice bolted on. */
.bg-orderreceipt {
  margin: 28px 0;
  padding: 18px 20px;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--custom--tint--positive, var(--wp--preset--color--base-2));
}
.bg-orderreceipt h2 {
  margin: 0 0 8px;
  font-size: 16px;
}
.bg-orderreceipt p { margin: 0 0 6px; }
.bg-orderreceipt p:last-child { margin-bottom: 0; }
.bg-orderreceipt a { font-weight: 600; text-underline-offset: 2px; }

.bg-receipt { display: block; }
.bg-receipt__label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.bg-receipt__file {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
  color: inherit;
  cursor: pointer;
}
.bg-receipt__help {
  margin: 7px 0 0;
  color: var(--wp--preset--color--contrast-3);
}
/* Empty until the script says something, so it must not reserve a line. */
.bg-receipt__status { margin: 0; }
.bg-receipt__status:empty { display: none; }
.bg-receipt__status.is-busy { margin-top: 7px; color: var(--wp--preset--color--contrast-2); }
.bg-receipt__status.is-done { margin-top: 7px; color: var(--wp--preset--color--positive); font-weight: 600; }
.bg-receipt__status.is-error { margin-top: 7px; color: var(--wp--preset--color--accent); font-weight: 600; }

/* --- terms --------------------------------------------------------------- */
/* mockup .terms */
.bg-terms {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 4px 0 18px;
  color: var(--wp--preset--color--contrast-2);
  cursor: pointer;
}
.bg-terms__box {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--wp--preset--color--accent);
}
.bg-terms a { text-decoration: underline; }
.bg-paypanel__note { margin: 0; color: var(--wp--preset--color--contrast-3); }
.bg-paypanel__foot { margin: 0; padding: 0; }

/* --- summary ------------------------------------------------------------- */
/* Shares .bg-sum with the cart; only the pieces the checkout adds are here. */
/* mockup .sum__h — gains the "Edit basket" link */
.bg-co__side .bg-sum__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.bg-co__side .bg-sum__h a {
  font-size: 12px;
  font-weight: 400;
  color: var(--wp--preset--color--base-2);
  text-decoration: underline;
}
.bg-co__side .bg-sum__h a:hover { color: var(--wp--preset--color--base); }

/* mockup .sum__items — scrolls rather than pushing the total off-screen */
.bg-sum__items {
  padding: 6px 20px;
  max-height: 260px;
  overflow-y: auto;
}
/* mockup .si */
.bg-si {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.bg-si:last-child { border-bottom: 0; }
.bg-si__media {
  position: relative;
  background: var(--wp--preset--color--base-2);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 5px;
}
.bg-si__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* mockup .si__q — quantity rides on the thumbnail, ink not accent: it is a
   count, not a warning */
.bg-si__qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
.bg-si__name {
  margin: 0;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bg-si__price { white-space: nowrap; }

.bg-co__side .bg-sum__b { border-top: 1px solid var(--wp--preset--color--line); padding: 16px 20px; }
.bg-co__side .bg-sum__r { padding: 8px 0; }
.bg-co__side .bg-sum__tot { margin-top: 10px; }
/* The checkout total's "this is the final amount" line. NOT .bg-sum__note —
   that is the cart's inline delivery note, and sharing the name had each
   restyling the other. §8, one selector one owner. */
.bg-sum__final { margin: 9px 0 0; color: var(--wp--preset--color--contrast-3); line-height: 1.45; }
.bg-sum__place { width: 100%; margin-top: 14px; height: 54px; }
.bg-secure__text { margin: 0 0 10px; color: var(--wp--preset--color--contrast-3); line-height: 1.45; }

/* --- notices ------------------------------------------------------------- */
.bg-co-page .woocommerce-error,
.bg-co-page .woocommerce-message,
.bg-co-page .woocommerce-info {
  border: 1px solid var(--wp--preset--color--line);
  border-left: 4px solid var(--wp--preset--color--accent);
  background: var(--wp--preset--color--base-2);
  padding: 13px 16px;
  margin: 0 0 18px;
  list-style: none;
}
.bg-co-page .woocommerce-message { border-left-color: var(--wp--preset--color--positive); }
.bg-co-page .woocommerce-info { border-left-color: var(--wp--preset--color--primary-2); }
.bg-panel__b .woocommerce-invalid input,
.bg-panel__b .woocommerce-invalid select { border-color: var(--wp--preset--color--negative); }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .bg-co { grid-template-columns: 1fr; gap: 28px; }

  /* ⚠ THE SUMMARY STAYS BELOW THE FORM ON A PHONE — 20 September 2026.
     A DELIBERATE DEVIATION FROM THE MOCKUP. Do not "restore" it.

     `checkout-03-market-stall.html:162` sets `.co__sum{order:-1}`, and this
     rule used to mirror it, with the reasoning "see what you are paying for
     before filling anything in".

     That is sound for a summary on its own. It is wrong here because §10b
     deliberately moved the PLACE ORDER BUTTON into the foot of the summary —
     so `order:-1` put the commit action, and the total it carries, above every
     field it validates. Two consequences, both measured at 390px:

       - the first thing on the page was "Place order · ₱ 1,819", before the
         customer had given an email or an address. Tapping it only produces
         validation errors.
       - after filling the last field there was no button anywhere in view;
         the customer had to scroll back to the top to submit.

     The mockup never had to survive that, being a static page. Below the form
     the order reads contact → address → delivery → payment → what it costs →
     pay, and the total is once again "the last thing under the customer's eye
     before they commit", which is what §10b asked for in the first place. */
  .bg-co__side { position: static; }
}
@media (max-width: 620px) {
  .bg-g2, .bg-g3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ABOUT — UI Design/about-03-market-stall.html

   LAYOUT ONLY. Type lives in the TYPOGRAPHY block at the top of this file.
   Site header and footer, per the standing instruction; the mockup's are not
   built.
   ========================================================================== */

.bg-about__section { padding: 54px 0; }
.bg-about__band { padding: 54px 0; }
/* The stats band butts straight up against the story above it, as the mockup
   does — the figures are that section's evidence, not a new subject. */
.bg-about__band--stats { padding-top: 0; padding-bottom: 54px; }

/* --- hero ----------------------------------------------------------------- */
/* mockup .hero__in — no gap; the flag-blue panel meets the ink band directly */
.bg-abouthero__in { min-height: 400px; gap: 0; }
.bg-abouthero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 58px 52px 58px 0;   /* mockup .hero__c */
}
/* ⚠ The colour is NOT inherited from the group. The band carries
   textColor:"base", but theme.json gives the `heading` element its own
   `contrast` colour, and a rule on the element beats a colour inherited from
   an ancestor — so the first line rendered ink-on-ink and was invisible. Any
   heading placed on a dark or accent band needs its colour stated here. */
.bg-abouthero__h { margin: 0 0 18px; color: var(--wp--preset--color--base); }
/* mockup .hero__c h1 em — the second line in shelf yellow. Yellow on ink is
   the one place §8 allows it to carry text: it is a fill on a dark ground,
   not text on white. */
.bg-abouthero__h em { font-style: normal; color: var(--wp--preset--color--highlight); }
.bg-abouthero__sub {
  margin: 0;
  max-width: 46ch;
  color: var(--wp--custom--on-dark);
}

@media (max-width: 940px) {
  .bg-abouthero__in { min-height: 0; }
  .bg-abouthero__copy { padding: 44px 0 32px; }
  .bg-abouthero .bg-hero__art { min-height: 220px; grid-template-rows: 1fr; }
  .bg-abouthero .bg-hero__cell:nth-child(n+3) { display: none; }
}

/* --- story ---------------------------------------------------------------- */
/* mockup .story */
.bg-story {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 52px;
  align-items: start;
}
.bg-story > * { min-width: 0; }
.bg-story p { margin: 0 0 15px; max-width: 62ch; color: var(--wp--preset--color--contrast-2); }
.bg-story__lead { color: var(--wp--preset--color--contrast); }

/* mockup .pull — shelf yellow as a 5px edge on a wash panel, fill only */
.bg-pull {
  border-left: 5px solid var(--wp--preset--color--highlight);
  background: var(--wp--preset--color--base-2);
  padding: 18px 22px;
  margin: 0;
}
.bg-pull__by { margin: 14px 0 0; color: var(--wp--preset--color--contrast-3); }

/* --- stats ---------------------------------------------------------------- */
/* mockup .stats — one bordered box, internal rules only */
.bg-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
}
.bg-stat {
  padding: 26px 22px;
  border-left: 1px solid var(--wp--preset--color--line);
  min-width: 0;
}
.bg-stat:first-child { border-left: 0; }
/* Accent on a figure, not on an action. The one exception §8's colour roles
   allow here: these are the numbers the page is arguing with. */
.bg-stat b { display: block; color: var(--wp--preset--color--accent); }
.bg-stat span { display: block; margin-top: 8px; color: var(--wp--preset--color--contrast-2); }

/* --- how it works --------------------------------------------------------- */
/* mockup .steps — .bg-howstep, NOT .bg-step: the homepage owns that name */
.bg-howsteps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--wp--preset--color--line);
}
.bg-howstep {
  padding: 26px 22px;
  border-left: 1px solid var(--wp--preset--color--line);
  min-width: 0;
}
.bg-howstep:first-child { border-left: 0; }
/* mockup .step b — yellow fill, ink outline. The stroke is what keeps shelf
   yellow legible on white without it becoming a text colour. */
.bg-howstep__n {
  display: block;
  margin-bottom: 11px;
  color: var(--wp--preset--color--highlight);
  -webkit-text-stroke: 1px var(--wp--preset--color--contrast);
}
.bg-howstep h3 { margin: 0 0 6px; }
.bg-howstep p { margin: 0; color: var(--wp--preset--color--contrast-2); }

/* --- values --------------------------------------------------------------- */
/* mockup .vals */
.bg-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bg-val {
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
  padding: 24px 22px;
  min-width: 0;
}
.bg-val h3 { margin: 0 0 8px; }
.bg-val p { margin: 0; color: var(--wp--preset--color--contrast-2); }

/* --- closing call to action ----------------------------------------------- */
/* mockup .cta */
.bg-cta__in {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  align-items: center;
  padding: 50px 0;
}
.bg-cta__in > * { min-width: 0; }
/* Colour stated for the same reason as .bg-abouthero__h — theme.json's
   `heading` element colour wins over the band's inherited base. */
.bg-cta__in h2 { margin: 0 0 10px; color: var(--wp--preset--color--base); }
.bg-cta__in p { margin: 0; max-width: 44ch; color: var(--wp--custom--on-accent); }
.bg-cta__b { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* mockup .btn--w / .btn--o */
.bg-btn--white {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--accent);
}
.bg-btn--white:hover {
  background: var(--wp--preset--color--highlight);
  color: var(--wp--preset--color--contrast);
}
.bg-btn--outline {
  border-color: var(--wp--custom--on-accent-line);
  color: var(--wp--preset--color--base);
}
.bg-btn--outline:hover {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--accent);
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
  .bg-story { grid-template-columns: 1fr; gap: 30px; }
  .bg-howsteps { grid-template-columns: 1fr; }
  .bg-howstep { border-left: 0; border-top: 1px solid var(--wp--preset--color--line); }
  .bg-howstep:first-child { border-top: 0; }
}
@media (max-width: 820px) {
  .bg-cta__in { grid-template-columns: 1fr; gap: 22px; }
  .bg-cta__b { justify-content: flex-start; }
}
@media (max-width: 800px) {
  .bg-vals { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .bg-stats { grid-template-columns: 1fr 1fr; }
  .bg-stat { border-left: 0; border-top: 1px solid var(--wp--preset--color--line); }
  .bg-stat:nth-child(-n+2) { border-top: 0; }
  .bg-stat:nth-child(even) { border-left: 1px solid var(--wp--preset--color--line); }
}

/* ==========================================================================
   CATEGORY ARCHIVE — UI Design/category-03-market-stall.html

   LAYOUT ONLY. Type lives in the TYPOGRAPHY block at the top of this file.
   One template serves every product category; the card is bg/product-card so
   the shop and search results can share it.
   ========================================================================== */

/* mockup .arch — 262px sidebar, 40px gutter */
.bg-archive {
  display: grid;
  grid-template-columns: 262px 1fr;
  gap: 40px;
  align-items: start;
  padding: 34px 0 60px;
}
.bg-archive__main { min-width: 0; }

/* --- filter sidebar ------------------------------------------------------- */
/* mockup .filters */
.bg-filters__h {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--wp--preset--color--contrast);
}
/* ⚠ WooCommerce wraps the groups in .wc-block-product-filters__content, a flex
   column with a 20px gap. A `.bg-filters__set > *` rule therefore hits that ONE
   wrapper and never reaches a group — which is why the borders and padding
   below were written once and never applied. Target .bg-fgroup itself. */
.bg-filters .wc-block-product-filters__content {
  display: block;
  padding: 0;
  gap: 0;
}

/* mockup .fgroup — rules BETWEEN groups, not a trailing border on each.
   `:last-of-type` cannot express it here: .bg-factive is a later sibling div,
   and a group WooCommerce hides (hideEmpty) still counts for :last-child. An
   adjacent-sibling border is immune to both. */
.bg-fgroup { padding: 16px 0; }
.bg-fgroup + .bg-fgroup { border-top: 1px solid var(--wp--preset--color--line); }

/* mockup `.fgroup summary` — the +/− affordance. The marker is CSS `content`
   on a heading that assets/js/filters.js gives role="button"; with no
   JavaScript the groups render open and the marker is inert but harmless. */
.bg-fgroup__h {
  margin: 0 0 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.bg-fgroup__h::after {
  content: "–";
  font-size: 16px;
  line-height: 1;
  color: var(--wp--preset--color--contrast-3);
}
.bg-fgroup.is-closed .bg-fgroup__h { margin-bottom: 0; }
.bg-fgroup.is-closed .bg-fgroup__h::after { content: "+"; }
.bg-fgroup.is-closed > *:not(.bg-fgroup__h) { display: none; }

/* ⚠ RESET THE FIELDSET. The checkbox list is wrapped in a real <fieldset>, so
   the browser's own `2px groove` border, ~11px padding and 2px margin draw a
   box the mockup does not have — measured, not guessed. `min-inline-size` is
   the load-bearing one: its UA value is `min-content`, which stops the field
   shrinking inside a 262px rail exactly as §10b's select2 did. */
.bg-filters fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

/* mockup .fgroup li — 9px between rows */
.bg-filters .wc-block-product-filter-checkbox-list__items {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bg-filters__set label {
  display: flex;
  gap: 9px;
  align-items: center;
  cursor: pointer;
}
/* ⚠ TOKENISE THROUGH THE BLOCK'S OWN CUSTOM PROPERTIES, DO NOT OUT-SHOUT ITS
   CSS. WooCommerce sets `appearance:none` on this checkbox and draws its own
   box and tick, so `accent-color` — which is what the mockup uses — does
   nothing at all here. The block exposes four variables for exactly this, and
   using them survives a stylesheet rewrite that a specificity war would not. */
/* ⚠ SET THEM ON .bg-filters, NOT ON THE BLOCK'S OWN CLASS. The rendered
   wrapper is `wp-block-woocommerce-product-filter-checkbox-list`; only the
   elements INSIDE it carry the `wc-block-` prefix. A rule scoped to
   `.wc-block-product-filter-checkbox-list` matches nothing, which is how the
   first attempt left every checkbox with `border: 1px solid transparent` —
   invisible on white, measured not guessed. Custom properties inherit, so the
   sidebar root is both simpler and immune to that distinction. */
.bg-filters {
  --wc-product-filter-checkbox-list-option-element: var(--wp--preset--color--base);
  --wc-product-filter-checkbox-list-option-element-border: var(--wp--preset--color--contrast-3);
  --wc-product-filter-checkbox-list-option-element-selected: var(--wp--preset--color--accent);
}
/* The 10%-tint square behind an unchecked box is theirs, not the mockup's —
   the box is a real 1px bordered square here. */
.bg-filters .wc-block-product-filter-checkbox-list__input-wrapper::before { display: none; }
.bg-filters__set input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: none;
}
/* ⚠ THE COUNT IS NOT A CHILD OF THE LABEL, so `margin-left:auto` on it alone
   does nothing — it was written that way once and never moved. The real
   structure is
       label > [ __input-wrapper , __text-wrapper > [ __text , __count ] ]
   so the wrapper has to be the full-width flex row for the count to be pushed
   to the right edge the way the mockup's `.fgroup .n` is. */
.bg-filters .wc-block-product-filter-checkbox-list__text-wrapper {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
}
.bg-filters .wc-block-product-filter-checkbox-list__count {
  margin-left: auto;
  color: var(--wp--preset--color--contrast-3);
}

/* mockup .prange — WooCommerce lays the inline variant out as a grid of
   input | slider | input. The mockup has only the two inputs, but the slider is
   real function the mockup simplified away, so it is kept and tokenised. */
.bg-filters .wc-block-product-filter-price-slider__content {
  gap: 8px;
  align-items: center;
  margin-top: 13px;
}
/* Same discipline as the checkbox: three exposed variables rather than a fight
   with ::-webkit-slider-thumb. Defaults are #fff on #1e1e1e — near enough to
   look deliberate while being untokenised, which is rule 10's blind spot. */
.bg-filters {
  --wc-product-filter-price-slider: var(--wp--preset--color--accent);
  --wc-product-filter-price-slider-handle: var(--wp--preset--color--base);
  --wc-product-filter-price-slider-handle-border: var(--wp--preset--color--contrast);
}
/* The unfilled part of the track is transparent in their gradient, so without
   this the slider is two handles floating in space — which is exactly how it
   first rendered. */
.bg-filters .wc-block-product-filter-price-slider__range {
  background: var(--wp--custom--tint--track, rgba(0, 0, 0, .12));
}
/* mockup .prange input. Theirs is `max-width:60px; border-radius:4px` at
   (0,2,1); these carry .bg-filters to win at (0,3,1) rather than relying on
   load order against a separate <link>. Square corners are §8. */
/* ⚠ DO NOT PUT `width: 100%` ON THESE. The inline layout is
   `grid-template-columns: auto 1fr auto` — the two inputs are the `auto`
   tracks and the slider is the `1fr`. A percentage width makes each auto track
   claim the row, and the measured result was `177px 0px 177px`: the slider
   collapsed to nothing and the right-hand input hung outside the 262px rail
   over the product grid. An explicit width keeps the `auto` tracks honest. */
.bg-filters .wc-block-product-filter-price-slider__content .text input[type="text"],
.bg-filters__set input[type="number"] {
  width: 88px;
  max-width: none;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 0;
  background: var(--wp--preset--color--base);
  color: inherit;
}

/* mockup .fclear — the only place accent is used as a text link, and it is
   destructive-adjacent: it clears the customer's work.

   ⚠ Selectors carry .bg-fclear AND the block class to beat theme.json's own
   `button` element rules, which paint every .wp-element-button contrast-on-
   accent. Without that the "Clear all filters" link renders as a solid black
   button, which is not what the mockup draws and reads as a primary action.

   ⚠ .bg-fclear sits on the inner core/buttons block, NOT on the clear-button
   block (22 September 2026). The clear-button block saves and renders ONLY its
   inner blocks — no wrapper of its own — so a wrapper div hand-written around
   them is exactly what made the editor show "Block contains unexpected or
   invalid content". With that wrapper gone, a class on the clear-button block
   would render nowhere; the Buttons block does render, so the hook moved there
   and the gap rule became a same-element selector. */
.bg-factive { padding-top: 18px; }
.wp-block-buttons.bg-fclear { gap: 0; }
.bg-fclear .wp-block-button__link,
.bg-fclear button.wp-element-button {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 0;
}
.bg-fclear .wp-block-button__link:hover,
.bg-fclear button.wp-element-button:hover {
  color: var(--wp--custom--tint--accent-press, var(--wp--preset--color--accent));
  background: none;
}

/* --- toolbar -------------------------------------------------------------- */
/* mockup .toolbar */
.bg-toolbar {
  gap: 16px;
  padding-bottom: 15px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.bg-toolbar__count { color: var(--wp--preset--color--contrast-2); margin: 0; }
.bg-toolbar__count strong { color: var(--wp--preset--color--contrast); }
.bg-toolbar__sort select {
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
  color: inherit;
}

/* mockup .chips — the active-filter row */
.bg-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.bg-chips .wc-block-product-filter-removable-chips__item {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--wp--preset--color--contrast);
}
.bg-chips button { color: var(--wp--preset--color--contrast-3); background: none; border: 0; padding: 0; }
.bg-chips button:hover { color: var(--wp--preset--color--accent); }

/* --- the grid ------------------------------------------------------------- */
/* mockup .grid — four across, 14px gutter.
   ⚠ THE SELECTORS ARE LONG ON PURPOSE. WooCommerce prints its own layout as
   inline CSS in the head:

     .wc-block-product-template.is-flex-container            { display: flex }
     .wc-block-product-template.is-flex-container.is-flex-container.columns-4>li
                                                             { width: calc(25% - .9375em) }

   That second one is (0,4,1) and it sets a percentage WIDTH — which, once the
   container is a grid, fights the track sizing and leaves ragged columns. A
   plain `.bg-archive__collection .wc-block-product-template > li` is (0,2,1)
   and loses. Beaten on specificity, never on load order: block styles are
   printed inline and their position relative to theme.css is not ours to rely
   on. Same lesson as the product page's buy row (§9). */
.bg-archive__collection ul.wc-block-product-template,
.bg-archive__collection ul.wc-block-product-template.is-flex-container,
.bg-archive__collection ul.wp-block-post-template,
.bg-row__collection ul.wc-block-product-template,
.bg-row__collection ul.wc-block-product-template.is-flex-container,
.bg-row__collection ul.wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The homepage rows are five across, not four — mockup .grid on the offers,
   bestsellers and clearance sections. Same card, same gutter, one more column. */
.bg-row__collection ul.wc-block-product-template,
.bg-row__collection ul.wc-block-product-template.is-flex-container,
.bg-row__collection ul.wp-block-post-template {
  grid-template-columns: repeat(5, 1fr);
}
.bg-archive__collection ul.wc-block-product-template.is-flex-container.is-flex-container > li,
.bg-archive__collection ul.wc-block-product-template > li,
.bg-archive__collection ul.wp-block-post-template > li,
.bg-row__collection ul.wc-block-product-template.is-flex-container.is-flex-container > li,
.bg-row__collection ul.wc-block-product-template > li,
.bg-row__collection ul.wp-block-post-template > li {
  width: auto;
  min-width: 0;
  margin: 0;
  list-style: none;
}

/* --- the card ------------------------------------------------------------- */
/* mockup .card — a flex column so the foot can be pushed down and every card
   in a row ends the same height whatever the name wraps to. */
.bg-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
}
.bg-card:hover { border-color: var(--wp--preset--color--contrast); }

/* mockup .card__m */
.bg-card__media {
  position: relative;
  background: var(--wp--preset--color--base-2);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
}
.bg-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bg-card__media .wp-block-woocommerce-product-image { width: 100%; }

/* mockup .tick — same discount ticket as the product gallery, smaller.
   Both bindings gate on is_on_sale(), so off-sale the whole ticket removes
   itself; the :has() guard drops the empty yellow box with it. */
.bg-card__tick {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  padding: 7px 9px;
  background: var(--wp--preset--color--highlight);
  color: var(--wp--preset--color--contrast);
}
.bg-card__tick > p { margin: 0; }

/* mockup .flagchip — white "UK" chip inset top-right. The binding returns null
   off-flag, so the paragraph removes itself and no empty box is drawn. */
.bg-card__uk {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  margin: 0;
  padding: 4px 6px;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--contrast-2);
  text-transform: uppercase;
}
.bg-card__save { margin-top: 2px; }
.bg-card__tick:not(:has(.bg-card__pct)) { display: none; }

/* mockup .card__b */
.bg-card__body {
  padding: 13px 13px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.bg-card__brand { margin: 0 0 4px; text-transform: uppercase; color: var(--wp--preset--color--contrast-3); }
.bg-card__brand a { color: inherit; text-decoration: none; }
/* mockup .card__n — clamped to two lines with a min-height, so a one-line name
   and a two-line name still align their prices across the row. */
.bg-card__name {
  margin: 0 0 4px;
  min-height: 2.68em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bg-card__name a { color: inherit; text-decoration: none; }
.bg-card__name a:hover { color: var(--wp--preset--color--accent); }
.bg-card__size { margin: 0 0 10px; color: var(--wp--preset--color--contrast-3); }

/* mockup .card__p — sale price first, struck price after. WooCommerce emits
   <del> before <ins>, so the order is flipped here rather than in markup. */
.bg-card__price { margin: 0 0 3px; }
.bg-card__price .wc-block-components-product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.bg-card__price ins { order: 1; text-decoration: none; background: none; }
.bg-card__price del { order: 2; color: var(--wp--preset--color--contrast-3); }

.bg-card__unit { margin: 0 0 10px; color: var(--wp--preset--color--contrast-3); }
/* mockup .card__stock — a 6px dot ahead of the wording.
   Green means in stock and nothing else; red means low stock and nothing else.
   The dot NEVER carries the meaning on its own (§8): the words say it too. */
.bg-card__stock {
  margin: 0 0 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--wp--preset--color--positive);
}
.bg-card__stock::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* ⚠ COMPOUND SELECTORS, AND THE FULL MODIFIER NAMES.
   This rule used to read `.bg-card__stock .wc-…--low` / `--out` and was dead
   twice over: the modifier sits on the SAME element as .bg-card__stock, not a
   descendant, and the classes are `--low-stock` / `--out-of-stock`. The result
   was "Out of stock" rendering in the IN-STOCK green — the colour-role
   contradiction §8 forbids — which only became visible once a real catalogue
   was published. Low stock looked right purely because our own bg-low-stock
   class (inc/woocommerce.php) was doing the work. */
.bg-card__stock.bg-low-stock,
.bg-card__stock.wc-block-components-product-stock-indicator--low-stock {
  color: var(--wp--preset--color--negative);
}
/* Out of stock is NEITHER urgency nor availability: §8 reserves red for low
   stock and green for in stock, so this is neutral. The words carry it. */
.bg-card__stock.wc-block-components-product-stock-indicator--out-of-stock {
  color: var(--wp--preset--color--contrast-3);
}

/* mockup .card__f — pinned to the bottom of the card */
.bg-card__foot {
  padding: 0 13px 13px;
  margin-top: auto;
  display: flex;
  gap: 7px;
  align-items: stretch;
}

/* mockup .qty — hidden below 760px, as the mockup does.
   ⚠ 28px cells, not the mockup's 30px, and the Add button's padding is 8px
   rather than 10px. Measured: "Add to basket" needs 104px and the 4-up ARCHIVE
   card left it 101px, so the label wrapped to two lines inside a 42px box. The
   homepage's 5-up card is 240px and had 113px, which is why it looked right
   there and wrong one page over. The category mockup solves this by shortening
   its label to "Add"; §9 fixes the wording at "Add to basket", so the 6px comes
   out of the stepper and the padding instead. Invisible, and it leaves ~7px of
   slack in the tighter grid.
   `min-height` rather than `height` so that if a narrower breakpoint ever does
   wrap the label, it grows instead of clipping it. */
.bg-cardqty {
  display: flex;
  flex: none;
  height: 42px;
  border: 1px solid var(--wp--preset--color--line);
}
.bg-cardqty__btn {
  width: 28px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.bg-cardqty__btn:hover { background: var(--wp--preset--color--base-2); }
.bg-cardqty__input {
  width: 28px;
  text-align: center;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.bg-cardqty__input::-webkit-outer-spin-button,
.bg-cardqty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* mockup .add
   ⚠ THE SELECTORS ARE LONG ON PURPOSE — SPECIFICITY, NEVER LOAD ORDER.
   WooCommerce prints this as inline block CSS, so where it lands relative to
   theme.css is not ours to rely on (§10d, and §9's buy row before it):

     .wp-block-button.wc-block-components-product-button
         { display:flex; flex-direction:column; align-items:center; gap:12px }   (0,2,0)
     .wp-block-button.wc-block-components-product-button .wp-block-button__link
         { display:inline-flex; width:auto }                                     (0,3,0)

   A plain `.bg-card__add .wp-block-button__link` is (0,2,0) and LOSES to that
   `width: auto`, so the button shrank to its own text and the column-flex
   `align-items: center` centred the remains. "Add to basket" is nearly as wide
   as the row, which hid it completely; the short "1 in cart" label exposed it as
   a small green box floating mid-card. The rule looked correct and had never
   applied. Adding `.bg-card` and the block's own class wins at (0,4,0).

   The wrapper is forced back to `display: block`: WooCommerce's column flex with
   a 12px gap is for its own stacked layout, and the card needs one full-width
   control with an overlay on top of it. */
.bg-card .bg-card__add.wc-block-components-product-button {
  flex: 1;
  margin: 0;
  display: block;
  gap: 0;
  position: relative;
}
.bg-card .bg-card__add.wc-block-components-product-button .wp-block-button__link,
.bg-card .bg-card__add.wc-block-components-product-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  text-decoration: none;
}
.bg-card .bg-card__add.wc-block-components-product-button .wp-block-button__link:hover,
.bg-card .bg-card__add.wc-block-components-product-button a:hover {
  background: var(--wp--preset--color--accent);
}

/* mockup .add.is-done — the button goes green once the product is in the basket.
   ⚠ THE HOOK IS NOT A CLASS ON THE BUTTON. WooCommerce 11.1 renders this block
   through the Interactivity API and changes nothing on the <button> itself: it
   rewrites the label to "N in cart" via data-wp-text and unhides a sibling
   <span> holding the View cart link (data-wp-bind--hidden="!state.displayViewCart").
   So that span is the only signal in the DOM, and :has() reads it. The old rule
   here keyed on `a.added`, the CLASSIC script's class — which never appears,
   because add-to-cart.js binds `.add_to_cart_button:not(.wc-interactive)` and
   this button carries wc-interactive. It had been dead since it was written. */
.bg-card .bg-card__add.wc-block-components-product-button:has( span:not([hidden]) .added_to_cart ) .wp-block-button__link {
  background: var(--wp--preset--color--positive);
}

/* --- in the basket: hover swaps the button for "View basket" ---------------
   Once the product is in the basket, "2 in cart" is a STATEMENT and there is
   nothing left to do with it. WooCommerce already renders the route out — the
   View basket link in that same span — so hovering the tile turns the statement
   back into an action rather than adding a second control to the card. The
   mockup has no room for a permanent second button.

   ⚠ opacity + pointer-events, NOT display or visibility. The link has to stay
   focusable while it is invisible or the keyboard path breaks: tabbing from the
   Add button moves into the link, which makes :focus-within true on the wrapper
   and reveals it. A display:none or visibility:hidden link is removed from the
   tab order, so it could never be focused and could never reveal itself —
   hover would be the only way to reach it, which is no way at all on a
   touchscreen or with a keyboard.

   pointer-events:none while transparent is what keeps the Add button clickable
   underneath. Without it an invisible link would swallow every click.
   -------------------------------------------------------------------------- */
.bg-card__add > span:has( .added_to_cart ) {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wp--custom--transition);
}
.bg-card__add:hover > span:has( .added_to_cart ),
.bg-card__add:focus-within > span:has( .added_to_cart ) {
  opacity: 1;
  pointer-events: auto;
}
/* The link needs no colours of its own — the base rule above already styles
   every `a` inside this wrapper to the 42px black control, red on hover. It
   only has to fill the overlay box rather than sit at its natural height.

   ⚠ `margin: 0` IS THE FIX FOR THE OVERHANG. woocommerce-blocktheme.css ships
   `a.added_to_cart { display: block; margin-top: 1em }`, which at this link's
   13px is 13px — so the overlay's link sat 13px BELOW the button it covers and
   hung over the card's bottom border on hover. That stylesheet is enqueued from
   enqueue_block_assets() and is NOT reachable by the woocommerce_enqueue_styles
   filter §10a narrows, so like everything else from it, it is beaten on
   specificity here. */
.bg-card .bg-card__add.wc-block-components-product-button a.added_to_cart {
  height: 100%;
  margin: 0;
}

/* --- pagination ----------------------------------------------------------- */
/* mockup .pager */
.bg-pager { gap: 7px; margin-top: 36px; }

/* ⚠ THE NUMBERS NEED THEIR OWN FLEX ROW. The <nav> is flex, but core wraps the
   page numbers in a plain <div class="wp-block-query-pagination-numbers">, so
   the nav's flex only lays out THAT DIV and the prev/next links — not the
   numbers inside it. Combined with `display: grid` on each number below (which
   makes them block-level) the numbers stacked vertically: 1 / 2 / 3 / … / 21 in
   a column with "Next Page" beside the stack. */
.bg-pager .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.bg-pager a,
.bg-pager span {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wp--preset--color--line);
  text-decoration: none;
  color: inherit;
}
.bg-pager a:hover { border-color: var(--wp--preset--color--contrast); }
.bg-pager .page-numbers.current {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--contrast);
}

.bg-archive__none { margin: 0; color: var(--wp--preset--color--contrast-2); }

/* --- responsive ----------------------------------------------------------- */
/* The homepage rows step 5 → 4 → 3 → 2 on the mockup's own breakpoints, which
   are NOT the archive's — the archive starts at four in a 262px-narrower column
   and has a filter rail to collapse first. Two grids, two ladders, one card. */
@media (max-width: 1100px) {
  .bg-row__collection ul.wc-block-product-template,
  .bg-row__collection ul.wc-block-product-template.is-flex-container,
  .bg-row__collection ul.wp-block-post-template { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .bg-row__collection ul.wc-block-product-template,
  .bg-row__collection ul.wc-block-product-template.is-flex-container,
  .bg-row__collection ul.wp-block-post-template { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .bg-row__collection ul.wc-block-product-template,
  .bg-row__collection ul.wc-block-product-template.is-flex-container,
  .bg-row__collection ul.wp-block-post-template { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 1150px) {
  .bg-archive__collection ul.wc-block-product-template,
  .bg-archive__collection ul.wc-block-product-template.is-flex-container,
  .bg-archive__collection ul.wp-block-post-template { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .bg-archive { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  .bg-archive__collection ul.wc-block-product-template,
  .bg-archive__collection ul.wc-block-product-template.is-flex-container,
  .bg-archive__collection ul.wp-block-post-template { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* The mockup drops the stepper on small screens rather than crushing the
     Add button; one tap still adds one. */
  .bg-cardqty { display: none; }
}

/* ==========================================================================
   CONTACT — UI Design/contact-03-market-stall.html

   LAYOUT ONLY. Type lives in the TYPOGRAPHY block at the top of this file.
   The mockup's header and footer are not built — client instruction.
   ========================================================================== */

/* mockup .ctwrap — 1.1fr / .9fr, gap 52px */
.bg-contact {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 52px;
  align-items: start;
  padding: 46px 0 60px;
}
.bg-contact__col { min-width: 0; }

/* --- form fields --------------------------------------------------------- */
/* mockup .field */
.bg-field { margin-bottom: 18px; }
.bg-field[hidden] { display: none; }
.bg-field label {
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-3);
}
.bg-field input,
.bg-field select,
.bg-field textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
  color: inherit;
}
.bg-field input:focus,
.bg-field select:focus,
.bg-field textarea:focus {
  border-color: var(--wp--preset--color--contrast);
  outline: 0;
}
.bg-field textarea { min-height: 140px; resize: vertical; }
.bg-field__hint { margin: 5px 0 0; color: var(--wp--preset--color--contrast-3); }

/* Errors carry words and a colour, never a colour alone (§8). */
.bg-field__err { margin: 5px 0 0; color: var(--wp--preset--color--negative); }
.bg-field.has-error input,
.bg-field.has-error select,
.bg-field.has-error textarea { border-color: var(--wp--preset--color--negative); }

/* mockup .two — NOT .bg-two: that is the product page's two-column block
   (gap 44px, breaks at 820px). Reusing the name made the product page's
   columns collapse to a 16px gap. §8, one selector one owner. */
.bg-fieldpair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* mockup .consent */
.bg-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0 20px;
  color: var(--wp--preset--color--contrast-2);
  cursor: pointer;
}
.bg-consent input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--wp--preset--color--accent);
}
.bg-consent__err { margin: -14px 0 20px; }

/* The honeypot. Moved off-screen rather than display:none or [hidden] —
   some bots skip both, which would defeat it. */
.bg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bg-contactform__foot { margin-top: 12px; }

/* mockup .btn--d */
.bg-btn--dark {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
.bg-btn--dark:hover { background: var(--wp--preset--color--accent); }

/* --- submission feedback -------------------------------------------------- */
.bg-formnote {
  border: 1px solid var(--wp--preset--color--line);
  border-left: 4px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base-2);
  padding: 14px 17px;
  margin: 0 0 18px;
}
.bg-formnote p { margin: 0; }
.bg-formnote--ok { border-left-color: var(--wp--preset--color--positive); }
.bg-formnote--bad { border-left-color: var(--wp--preset--color--negative); }
.bg-formnote__sub { margin-top: 5px; color: var(--wp--preset--color--contrast-3); }

/* --- channel cards -------------------------------------------------------- */
/* mockup .chan */
.bg-chan {
  border: 1px solid var(--wp--preset--color--line);
  margin-bottom: 12px;
}
.bg-chan__h {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 15px 17px;
  background: var(--wp--preset--color--base-2);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.bg-chan__h svg {
  width: 19px;
  height: 19px;
  flex: none;
  stroke: var(--wp--preset--color--contrast);
  fill: none;
  stroke-width: 1.7;
}
/* mockup .chan__h .tag — outlined, not filled: green here means "fastest",
   and a solid green chip would read as the in-stock badge (§8). */
.bg-chan__tag {
  margin-left: auto;
  padding: 3px 7px;
  border: 1px solid var(--wp--preset--color--positive);
  color: var(--wp--preset--color--positive);
  text-transform: uppercase;
}
.bg-chan__b { padding: 14px 17px; }
.bg-chan__b p { margin: 0 0 6px; }
.bg-chan__b p:last-child { margin-bottom: 0; }
.bg-chan__meta { color: var(--wp--preset--color--contrast-3); }
.bg-chan__meta--sp { margin-top: 8px; }
.bg-chan__big a { text-decoration: none; color: inherit; }
.bg-chan__big a:hover { color: var(--wp--preset--color--accent); }

/* --- opening hours -------------------------------------------------------- */
/* mockup .hours */
.bg-hours__h { margin: 30px 0 12px; }
.bg-hours { width: 100%; border-collapse: collapse; }
.bg-hours th {
  text-align: left;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--contrast-3);
}
.bg-hours td {
  text-align: right;
  padding: 9px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.bg-hours__note { margin: 10px 0 26px; color: var(--wp--preset--color--contrast-3); }

/* --- address -------------------------------------------------------------- */
/* mockup .addr — the one place on this page shelf yellow appears, as a 4px
   edge on a wash panel. Fill only, never behind text (§8). */
.bg-addr {
  border-left: 4px solid var(--wp--preset--color--highlight);
  background: var(--wp--preset--color--base-2);
  padding: 14px 18px;
}
.bg-addr b { display: block; margin-bottom: 4px; }
.bg-addr__meta { margin: 10px 0 0; color: var(--wp--preset--color--contrast-3); }

/* --- "you might not need us" band ----------------------------------------- */
/* mockup .deflect */
.bg-deflect {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.bg-deflect__card {
  display: block;
  padding: 20px 18px;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
  text-decoration: none;
  color: inherit;
}
.bg-deflect__card:hover { border-color: var(--wp--preset--color--contrast); }
.bg-deflect__card b { display: block; margin-bottom: 5px; }
.bg-deflect__card span { display: block; color: var(--wp--preset--color--contrast-2); }
.bg-deflect__card em {
  display: block;
  margin-top: 9px;
  font-style: normal;
  color: var(--wp--preset--color--accent);
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .bg-contact { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 760px) {
  .bg-deflect { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bg-fieldpair { grid-template-columns: 1fr; }
}

/* --- product page (pre-existing rules below) ---------------------------- */
/* .bg-pdp__brand and .bg-pdp__price live in ONE place — the product-page
   block above. Duplicates here set the brand line to accent/700 and the
   price box to margin-block:1rem, and because they came later they silently
   won: the brand read red instead of the mockup's grey, and the pricebox
   lost its 16px bottom margin. §8, one selector one owner. */
.bg-unit { margin: .25rem 0 0; color: var(--wp--preset--color--contrast-2); }
.bg-bestbefore { margin: 0; color: var(--wp--preset--color--contrast-2); }


.bg-aller p:last-child { margin-bottom: 0; }
/* .bg-assure lives in ONE place — the product-page block above. An earlier
   duplicate here set border + rotate on the same ::before that already had
   background + clip-path, and the two combined into a malformed glyph. */

/* --- steps ------------------------------------------------------------- */
.bg-step__n { margin: 0 0 .5rem; }
.bg-steps .wp-block-column {
  border-left: 1px solid var(--wp--preset--color--line);
  padding-left: 1.6rem;
}
.bg-steps .wp-block-column:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 781px) {
  .bg-steps .wp-block-column { border-left: 0; padding-left: 0; }
}

/* --- footer ------------------------------------------------------------ */
.bg-footer__h { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; }
/* ⚠ CLASSIC menu markup, not the block navigation classes these replaced.
   parts/footer.html renders bg/footer-nav-{shop,order,company}, which call
   wp_nav_menu() so each column follows the menu assigned at Appearance → Menus
   → Manage Locations. Put the navigation block back and these stop matching. */
.bg-footernav__list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bg-footernav__list > li { list-style: none; margin: 0; }
.bg-footernav a { color: inherit; text-decoration: none; }
.bg-footernav a:hover { text-decoration: underline; }
/* The page you are on, not signalled by colour alone (§8). */
.bg-footernav .current-menu-item > a { color: var(--wp--preset--color--base); font-weight: 600; }
.bg-pay span {
  border: 1px solid currentColor;
  padding: .2rem .5rem;
  margin-right: .35rem;
  letter-spacing: .06em;
}

/* --- filters ----------------------------------------------------------- */

/* --- hero facts & free-delivery ticket ---------------------------------- */
/* --- hero: two-column grid ------------------------------------------------
   mockup .hero__in — grid-template-columns:1.05fr .95fr, min-height 430px,
   no gap, copy padded on the right only. Expressed as a two-column
   wp:columns with blockGap 0 so the client cannot accidentally reflow it.
   ----------------------------------------------------------------------- */
.bg-hero__in { min-height: 430px; gap: 0; }
.bg-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.6rem 3.5rem 3.6rem 0;   /* mockup .hero__copy 58px 56px 58px 0 */
}
.bg-hero__copy > * { margin-block: 0; }
.bg-hero__copy > * + * { margin-top: 1.15rem; }

/* mockup .hero__stamp — bordered flag stamp, not plain yellow text */
.bg-hero__stamp {
  align-self: flex-start;
  align-items: center;
  gap: .55rem;
  border: 1.5px solid rgba(255, 255, 255, .4);
  padding: .35rem .75rem;
}
.bg-hero__stamp p {
  margin: 0;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.bg-hero__flag { width: 16px; height: 11px; flex: none; display: block; }

/* mockup .hero__art — flag-blue panel, 2x2 packshot grid, hairline cross */
.bg-hero__art {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 0;
}
.bg-hero__cell {
  margin: 0;
  display: grid;
  place-items: center;
  padding: 1.4rem;
  border-left: 1px solid rgba(255, 255, 255, .12);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
/* ⚠ `max-height: 100%` DID NOTHING once a tile wrapped the image.
   A percentage height resolves against the parent's height, and .bg-brandtile
   was display:block with no height — so the percentage was indefinite, the cap
   was dropped, and every packshot rendered at its natural size. Four different
   source aspect ratios then produced four different footprints and the tall
   ones overflowed the panel. The tile below gives a DEFINITE square box for
   this to resolve against; do not remove its aspect-ratio. */
.bg-hero__cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* bg/brand-tile — the anchor wrapping a packshot inside a cell.
   A square box, so a 1500x1500 packshot and a 221x300 phone shot occupy exactly
   the same footprint and only the artwork inside them differs. */
.bg-brandtile {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  line-height: 0;
}
/* Hover changes opacity, not elevation — §8 forbids shadows and transforms. */
.bg-brandtile:hover { opacity: .82; }
.bg-brandtile:focus-visible {
  outline: 2px solid var(--wp--preset--color--highlight);
  outline-offset: 3px;
}
/* Editor only: the cell is place-items:center, the preview wrapper is not. */
.bg-brandtile-edit { display: grid; place-items: center; }
.bg-brandtile__empty {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--wp--custom--on-dark, rgba(255, 255, 255, .7));
}

/* mockup .hero__tick — pinned to the panel, not floating at the page edge */
.bg-hero__art .bg-heroticket {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  z-index: 2;
}

@media (max-width: 940px) {
  /* mockup collapses to one column and shows only the top two cells. */
  .bg-hero__in { min-height: 0; }
  .bg-hero__copy { padding: 2.75rem 0 2.25rem; }
  .bg-hero__art { min-height: 260px; grid-template-rows: 1fr; }
  .bg-hero__cell:nth-child(n+3) { display: none; }
}

/* Layout only. Size, weight and the width axis for .bg-herofacts strong and
   .bg-heroticket are in the TYPOGRAPHY block at the top of this file — both
   were declared twice, and because these rules come later they silently won:
   the facts row rendered at the `large` preset (17px) instead of the
   mockup's 19px, and the ticket at .03em instead of .04em. One owner each. */
.bg-herofacts { gap: clamp(1.25rem, 4vw, 2.5rem); margin-top: 1.75rem; }
.bg-herofacts p { margin: 0; line-height: 1.35; }
.bg-herofacts strong {
  font-family: var(--wp--preset--font-family--display);
  color: var(--wp--preset--color--base);
}
.bg-heroticket {
  display: inline-block;
  margin: 1.5rem 0 0;
  padding: .6rem 1rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* --- category tiles ------------------------------------------------------
   A link grid: a bordered box, hover changes the border colour and nothing
   else. Flat, per §8 — no lift, no shadow.

   The retailer grid (.bg-rets / .bg-ret) shared these rules until 18 September
   2026, when §16 q1 was answered and retailer references came out site-wide.
   ----------------------------------------------------------------------- */
.bg-tiles { gap: var(--wp--custom--card--gap); }

.bg-tile {
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--surface);
  padding: 1.1rem 1rem;
  gap: .35rem;
  justify-content: space-between;
  transition: border-color var(--wp--custom--transition);
}
.bg-tile:hover { border-color: var(--wp--preset--color--primary); }

.bg-tile__n { margin: 0; }
.bg-tile p { margin: 0; }
.bg-tile a { text-decoration: none; }
/* The whole tile is the target, not just the word. */
.bg-tile a::after { content: ""; position: absolute; inset: 0; }
.bg-tile { position: relative; }

/* --- newsletter ----------------------------------------------------------
   The form is bg-core's `[bg_newsletter_form]`, rendered by
   patterns/newsletter.php. It used to be a disabled stub because no mailing
   list was connected; bg-core now owns the signup, the welcome code and the
   Mailchimp push, so these rules style a live control.

   The markup comes from the PLUGIN, not this theme. If a class here stops
   matching, read bg-core/src/Newsletter/Form.php rather than guessing — and
   note the whole band omits itself when the offer is switched off, so an
   empty-looking homepage section is the setting, not a CSS fault.
   ----------------------------------------------------------------------- */
.bg-news__form { display: flex; flex-wrap: wrap; gap: 0; }

/* Each control is wrapped in a <p> carrying its label. The label is hidden
   visually — the band's own heading says what this is — but never removed from
   the DOM, because a bare input with only a placeholder is unlabelled to a
   screen reader and placeholders vanish the moment typing starts. */
.bg-news__field { flex: 1 1 12rem; min-width: 0; margin: 0; }
.bg-news__field label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bg-news__form input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0 1rem;
  height: var(--wp--custom--control--height);
  font: inherit;
}
.bg-news__submit {
  border: 0;
  padding-inline: 1.6rem;
  height: var(--wp--custom--control--height);
  font: inherit;
  font-weight: 700;
  background: var(--wp--preset--color--highlight);
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
}
.bg-news__submit:hover { background: var(--wp--preset--color--base); }
.bg-news__form.is-busy .bg-news__submit { opacity: .55; cursor: progress; }

.bg-news__small {
  flex: 1 0 100%;
  margin: .5rem 0 0;
  font-size: var(--wp--preset--font-size--tiny);
  color: var(--wp--preset--color--base-2);
}

/* The result message. `role="status"` is on the element, so a screen reader
   announces it without the focus moving — which matters because the script
   removes the form after a successful signup. */
.bg-news__msg {
  margin: 0 0 .75rem;
  padding: .6rem .9rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
}
.bg-news__msg--ok {
  background: var(--wp--preset--color--positive);
  color: var(--wp--preset--color--base);
}
.bg-news__msg--error {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

/* Below the breakpoint the field and the button stack, so the button is not
   squeezed to its text and the email field keeps a usable width. */
@media (max-width: 600px) {
  .bg-news__field { flex: 1 0 100%; }
  .bg-news__submit { flex: 1 0 100%; margin-top: .5rem; }
}

/* --- accessibility ----------------------------------------------------- */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   TAP TARGETS — phones only, 20 September 2026

   §9's mobile section asks for 44px tap targets. Measured at 390px, four real
   controls were well under: the header basket (22px), the filter group
   toggles (16px), each filter checkbox row (18px) and the cart's Remove
   (15px). They were all fine to click with a mouse and awkward to hit with a
   thumb.

   ⚠ SCOPED TO max-width:900px ON PURPOSE. These sizes come from the mockups
   at desktop widths, and padding them out there would loosen rhythm the
   mockups set deliberately — the rail's 16px group spacing especially. The
   constraint being solved is a finger, so the fix belongs where fingers are.

   ⚠ PADDING, NOT height/min-height. The mockup's type sizes and borders stay
   exactly as they are; only the hit area grows. `min-height` on the filter
   rows would have pushed the 1px group rules apart and changed the rail's
   look, which is the thing not to do.
   ========================================================================== */
@media (max-width: 900px) {

  /* The basket is the header's only real control once the search collapses. */
  .bg-header__basket .wc-block-mini-cart__button { padding: 11px 6px; }

  /* Group toggles: the whole row is already the button (role="button" from
     assets/js/filters.js), so the padding lands on the right element. */
  .bg-fgroup__h { padding: 13px 0; margin-bottom: 0; }
  .bg-fgroup:not(.is-closed) .bg-fgroup__h { margin-bottom: 8px; }

  /* Checkbox rows — the label is the target, not the 16px box inside it. */
  .bg-filters .wc-block-product-filter-checkbox-list__label { padding: 8px 0; }
  .bg-filters .wc-block-product-filter-checkbox-list__items { gap: 0; }

  /* Remove sits alone at the end of a cart line with nothing near it to
     mis-hit, so it can afford a generous box.

     ⚠ VERTICAL PADDING ONLY. It sits hard against the right edge of the line,
     so `padding: 12px 4px` pushed the document 3px wide at exactly 900px —
     the first width at which this block applies. Caught by the sweep, not by
     eye. 15px top and bottom clears 44px without touching the horizontal. */
  .bg-cart__remove { padding: 15px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* === BLOG / GUIDES =========================================================
   Built to `UI Design/Blogs Page.html` and `UI Design/Single Blog Post.html`
   (5 October 2026).

   ⚠ Those two files are a THIRD mockup generation and carry the OLD tokens —
   `--wrap:1300px` and `--blue:#0B4FA8`. §10a already records five files with
   that drift. The theme's tokens win: the column is `contentSize` 1256px and
   the blue is `primary-2` (#012169). Compare these pages with the mockup on
   vertical rhythm and type, not on column width.

   ⚠ ONE DECLARATION PER SELECTOR. Everything a selector needs — type, colour,
   layout — is stated once, in one rule. §8 splits type from layout for
   components that genuinely appear in both blocks; nothing here does, and a
   second declaration further down the file is how `.bg-herofacts strong`,
   `.bg-heroticket`, `.bg-assure li::before` and `.bg-step__n` each silently
   lost to a later rule. Run the per-property duplicate detector before adding
   to this block.

   ⚠ Display type states `font-variation-settings` AND `font-weight` together.
   The axis overrides the property for `wght`, so they must agree (§8), and the
   mockup drives `wdth` 108–112 on every guide heading — the expanded end of
   the axis, as the product page does.
   ========================================================================= */

/* --- index: page head ---------------------------------------------------- */
.bg-bhead {
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding: 38px 0;
}
.bg-bhead__h {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 112, "wght" 770;
  font-weight: 770;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 0 0 10px;
}
.bg-bhead__p {
  margin: 0;
  max-width: 62ch;
  color: var(--wp--preset--color--contrast-2);
  font-size: 16.5px;
}
.bg-bsearch {
  display: flex;
  height: 48px;
  max-width: 460px;
  margin: 24px 0 0;
  border: 2px solid var(--wp--preset--color--contrast);
}
.bg-bsearch input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0 14px;
  font: inherit;
  font-size: 14.5px;
  outline: 0;
}
.bg-bsearch button {
  width: 52px;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  cursor: pointer;
}
.bg-bsearch button:hover { background: var(--wp--preset--color--accent); }
.bg-bsearch svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }

/* --- index: topic chips -------------------------------------------------- */
.bg-btopics { gap: 8px; margin: 30px 0 0; }
.bg-btopic {
  border: 1px solid var(--wp--preset--color--line);
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
.bg-btopic:hover { border-color: var(--wp--preset--color--contrast); }
.bg-btopic.is-on {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--contrast);
}

/* --- shared meta row ----------------------------------------------------- */
.bg-bmeta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12.5px;
  color: var(--wp--preset--color--contrast-3);
}
.bg-bmeta__cat {
  background: var(--wp--preset--color--highlight);
  color: var(--wp--preset--color--contrast);
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* --- index: featured guide ---------------------------------------------- */
.bg-bfeat {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  border: 2px solid var(--wp--preset--color--contrast);
  margin: 30px 0 46px;
}
.bg-bfeat__m {
  background: var(--wp--preset--color--surface);
  display: grid;
  place-items: center;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  border-right: 2px solid var(--wp--preset--color--contrast);
}
.bg-bfeat__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-bfeat__flag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 9px;
  z-index: 1;
}
.bg-bfeat__b {
  padding: 36px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bg-bfeat__h {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 110, "wght" 760;
  font-weight: 760;
  font-size: clamp(23px, 2.7vw, 32px);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 14px 0 12px;
}
.bg-bfeat__h a { text-decoration: none; color: inherit; }
.bg-bfeat__h a:hover { color: var(--wp--preset--color--accent); }
.bg-bfeat__x {
  margin: 0 0 20px;
  color: var(--wp--preset--color--contrast-2);
  font-size: 15.5px;
  max-width: 48ch;
}
.bg-bfeat__more {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--wp--preset--color--accent);
  border-bottom: 2px solid var(--wp--preset--color--accent);
  align-self: flex-start;
  padding-bottom: 2px;
  text-decoration: none;
}

/* --- index: the grid and its cards --------------------------------------- */
.bg-bgrid__list { gap: 22px; }
.bg-bcard {
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
  position: relative;
  gap: 0;
  height: 100%;
}
.bg-bcard:hover { border-color: var(--wp--preset--color--contrast); }
.bg-bcard__thumb { margin: 0; }
.bg-bcard__thumb img { width: 100%; display: block; object-fit: cover; }
.bg-bcard__b { padding: 18px 18px 20px; gap: 0; flex: 1; }
.bg-bcard__cat {
  background: var(--wp--preset--color--highlight);
  color: var(--wp--preset--color--contrast);
  align-self: flex-start;
  padding: 3px 9px;
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.bg-bcard__name {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 108, "wght" 720;
  font-weight: 720;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: -.015em;
  margin: 12px 0 8px;
}
.bg-bcard__name a { text-decoration: none; color: inherit; }
.bg-bcard__name a:hover { color: var(--wp--preset--color--accent); }
.bg-bcard__ex {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--wp--preset--color--contrast-2);
  line-height: 1.5;
}
.bg-bcard__f {
  margin-top: auto;
  gap: 12px;
  font-size: 12px;
  color: var(--wp--preset--color--contrast-3);
}
.bg-bcard__date { margin: 0; font-size: 12px; }
.bg-bcard__read { margin: 0; font-size: 12px; }
.bg-bempty { padding: 40px 0; color: var(--wp--preset--color--contrast-2); }

/* The whole card is the hit area. The mockup wraps it in one anchor, which
   block markup cannot do without nesting a link inside a link — the same
   technique as `.bg-tile`, and §10f lists the short link as a known-good false
   positive in the tap-target audit. */
.bg-bcard__name a::after { content: ""; position: absolute; inset: 0; }

/* --- index: delivery strip ----------------------------------------------- */
.bg-shipnote {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 2px solid var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--highlight);
  color: var(--wp--preset--color--contrast);
  padding: 13px 18px;
  font-size: 14px;
  margin: 26px 0 0;
}
.bg-shipnote__ico {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}
.bg-shipnote__txt strong {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 90, "wght" 800;
  font-weight: 800;
}
.bg-shipnote__link {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  color: inherit;
}

/* --- single: head -------------------------------------------------------- */
.bg-ghead {
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding: 34px 0 30px;
}
.bg-ghead__h {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 110, "wght" 770;
  font-weight: 770;
  font-size: clamp(29px, 4vw, 46px);
  line-height: 1.03;
  letter-spacing: -.03em;
  margin: 14px 0;
  max-width: 22ch;
}
.bg-ghead__stand {
  font-size: 18px;
  color: var(--wp--preset--color--contrast-2);
  max-width: 56ch;
  margin: 0 0 20px;
  line-height: 1.5;
}
.bg-byline {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--wp--preset--color--contrast-3);
}
.bg-byline b { color: var(--wp--preset--color--contrast); font-weight: 600; }
.bg-byline__av {
  width: 34px;
  height: 34px;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 90, "wght" 780;
  font-weight: 780;
  font-size: 13px;
}
.bg-ghero { margin: 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.bg-ghero img { width: 100%; display: block; object-fit: cover; }

/* --- single: the two-column shell ---------------------------------------- */
.bg-guide__in {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 48px;
  padding: 40px 0 60px;
  align-items: start;
}

/* ⚠ The sticky offset has ONE owner — `--bg-sticky-top`, set in
   inc/customizer.php beside the sticky-header rule itself (§10a). The mockup
   hardcodes 110px for its own 81px header; here the header is a Customizer
   switch that can be off, and the admin bar adds another 32/46px. */
.bg-toc {
  position: sticky;
  top: calc(var(--bg-sticky-top, 0px) + 1.75rem);
  border-left: 2px solid var(--wp--preset--color--contrast);
  padding-left: 16px;
}
.bg-toc__h {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-3);
  margin-bottom: 12px;
}
.bg-toc__a {
  display: block;
  font-size: 13.5px;
  padding: 5px 0;
  color: var(--wp--preset--color--contrast-2);
  line-height: 1.35;
  text-decoration: none;
}
.bg-toc__a:hover { color: var(--wp--preset--color--accent); font-weight: 600; }
.bg-toc__a.is-on { color: var(--wp--preset--color--accent); font-weight: 600; }

/* --- single: the article ------------------------------------------------- */
.bg-gbody { max-width: 66ch; font-size: 17px; line-height: 1.66; }
.bg-gbody p { margin: 0 0 20px; color: var(--wp--preset--color--contrast-2); }
.bg-gbody h2 {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 110, "wght" 740;
  font-weight: 740;
  font-size: 26px;
  letter-spacing: -.022em;
  margin: 38px 0 14px;
  scroll-margin-top: calc(var(--bg-sticky-top, 0px) + 1.75rem);
}
.bg-gbody h3 {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-weight: 700;
  font-size: 19px;
  margin: 28px 0 10px;
}
.bg-gbody ul { margin: 0 0 20px; padding-left: 22px; color: var(--wp--preset--color--contrast-2); }
.bg-gbody ol { margin: 0 0 20px; padding-left: 22px; color: var(--wp--preset--color--contrast-2); }
.bg-gbody li { margin-bottom: 9px; }
.bg-gbody strong { color: var(--wp--preset--color--contrast); font-weight: 600; }
.bg-gbody a {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

/* The three editorial block styles. Registered in inc/blocks.php, which carries
   only enough inline CSS for the inserter preview — the real appearance is
   here, so there is one owner per component. */
.wp-block-group.is-style-bg-takeaway { margin: 0 0 30px; }
.wp-block-group.is-style-bg-takeaway > :first-child {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-3);
  margin-bottom: 11px;
}
.wp-block-group.is-style-bg-takeaway li {
  margin-bottom: 7px;
  font-size: 15px;
  color: var(--wp--preset--color--contrast);
}
.wp-block-quote.is-style-bg-pull {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 108, "wght" 650;
  font-weight: 650;
  font-size: 20px;
  line-height: 1.35;
  color: var(--wp--preset--color--contrast);
}
.wp-block-quote.is-style-bg-pull p { color: inherit; margin: 0; font-size: inherit; }
.wp-block-group.is-style-bg-callout > :first-child {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: 9px;
}
.wp-block-group.is-style-bg-callout p:last-child { margin: 0; font-size: 15.5px; }

/* --- single: share, author, prev/next ------------------------------------ */
.bg-share {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding: 18px 0;
  margin: 40px 0 0;
}
.bg-share__l { font-size: 12.5px; font-weight: 600; color: var(--wp--preset--color--contrast-3); }
.bg-share__a {
  border: 1px solid var(--wp--preset--color--line);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
.bg-share__a:hover { border-color: var(--wp--preset--color--contrast); }
.bg-share__a.is-done {
  background: var(--wp--preset--color--positive);
  border-color: var(--wp--preset--color--positive);
  color: var(--wp--preset--color--base);
}
.bg-pauthor {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.bg-pauthor__av {
  width: 56px;
  height: 56px;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 90, "wght" 780;
  font-weight: 780;
  font-size: 19px;
}
.bg-pauthor__n { display: block; font-size: 15px; margin-bottom: 5px; }
.bg-pauthor__p {
  margin: 0;
  font-size: 14px;
  color: var(--wp--preset--color--contrast-2);
  max-width: 58ch;
}
.bg-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 0; }
.bg-pn__a {
  border: 1px solid var(--wp--preset--color--line);
  padding: 18px 20px;
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 108, "wght" 710;
  font-weight: 710;
  font-size: 16px;
  line-height: 1.25;
}
.bg-pn__a:hover { border-color: var(--wp--preset--color--contrast); }
.bg-pn__a a { text-decoration: none; color: inherit; }
.bg-pn__a .wp-block-post-navigation-link__label {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-variation-settings: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-3);
  margin-bottom: 7px;
}
.bg-pn__a--next { text-align: right; }

/* --- reading progress ---------------------------------------------------- */
.bg-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--wp--preset--color--accent);
  z-index: 60;
  pointer-events: none;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .bg-bgrid__list { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 940px) {
  .bg-guide__in { grid-template-columns: 1fr; gap: 26px; }
  .bg-toc {
    position: static;
    border-left: 0;
    border-top: 2px solid var(--wp--preset--color--contrast);
    padding: 14px 0 0;
  }
  .bg-gbody { max-width: none; }
}
@media (max-width: 900px) {
  .bg-bfeat { grid-template-columns: 1fr; }
  .bg-bfeat__m {
    border-right: 0;
    border-bottom: 2px solid var(--wp--preset--color--contrast);
    min-height: 230px;
  }
}
@media (max-width: 700px) {
  .bg-pn { grid-template-columns: 1fr; }
  .bg-pn__a--next { text-align: left; }
}
@media (max-width: 640px) {
  .bg-bgrid__list { grid-template-columns: 1fr !important; }
  .bg-shipnote__link { margin-left: 0; }
}

/* ============================================================
   NOT FOUND (404) — UI Design/404 Page.html
   Only the page CONTENT is built here; the header/footer/utility/
   free-delivery/category bars are the theme's own (standing client
   instruction). Each selector is declared once, type + layout
   together, tokenised per §8/§10.
   ============================================================ */

/* ---- hero ---- */
.bg-nf { border-bottom: 1px solid var(--wp--preset--color--line); }
.bg-nf__in {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
  padding: 52px 0 56px;
}
.bg-nf__code {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 86, "wght" 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: .14em;
  margin: 0 0 20px;
}
.bg-nf__code i {
  width: 7px;
  height: 7px;
  background: var(--wp--preset--color--highlight);
  display: block;
  flex: none;
}
.bg-nf__h {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 112, "wght" 780;
  font-size: clamp(34px, 5vw, 58px);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 0 0 16px;
}
.bg-nf__h em { font-style: normal; color: var(--wp--preset--color--accent); }
.bg-nf__lead {
  margin: 0 0 26px;
  max-width: 46ch;
  color: var(--wp--preset--color--contrast-2);
  font-size: 17px;
  line-height: 1.5;
}
.bg-nf__search {
  display: flex;
  height: 58px;
  border: 2px solid var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--base);
  max-width: 500px;
}
.bg-nf__search input {
  flex: 1;
  padding: 0 18px;
  font-size: 16px;
  outline: 0;
  min-width: 0;
  border: 0;
  background: none;
  color: inherit;
}
.bg-nf__search button {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  padding: 0 24px;
  font-weight: 600;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
}
.bg-nf__search button:hover { background: var(--wp--custom--tint--accent-press); }
.bg-nf__search svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.bg-nf__pop {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--wp--preset--color--contrast-3);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.bg-nf__pop a {
  border-bottom: 1px solid var(--wp--preset--color--line);
  font-weight: 600;
  color: var(--wp--preset--color--contrast-2);
}
.bg-nf__pop a:hover { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.bg-nf__art { position: relative; display: grid; place-items: center; min-height: 260px; }
.bg-nf__crate { width: 100%; max-width: 330px; height: auto; }
@media (max-width: 860px) {
  .bg-nf__in { grid-template-columns: 1fr; gap: 30px; }
  .bg-nf__art { display: none; }
}

/* ---- quick recovery routes ---- */
.bg-nfroutes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: -30px;
  position: relative;
  z-index: 2;
  padding-bottom: 4px;
}
.bg-nfroute {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
  padding: 20px 18px;
  transition: border-color .15s;
}
.bg-nfroute:hover { border-color: var(--wp--preset--color--contrast); }
.bg-nfroute svg { width: 26px; height: 26px; stroke: var(--wp--preset--color--contrast); fill: none; stroke-width: 1.6; }
.bg-nfroute b {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 104, "wght" 720;
  font-size: 15.5px;
}
.bg-nfroute span { font-size: 12.5px; color: var(--wp--preset--color--contrast-3); line-height: 1.4; }
.bg-nfroute em {
  font-style: normal;
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
@media (max-width: 860px) { .bg-nfroutes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .bg-nfroutes { grid-template-columns: 1fr; } }

/* ---- help strip ---- */
.bg-nfhelp {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border: 2px solid var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--highlight);
  padding: 20px 24px;
  margin: 8px 0 0;
}
.bg-nfhelp svg { width: 30px; height: 30px; stroke: var(--wp--preset--color--contrast); fill: none; stroke-width: 1.6; flex: none; }
.bg-nfhelp__t b {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 96, "wght" 800;
  font-size: 17px;
  display: block;
}
.bg-nfhelp__t span { font-size: 13.5px; color: var(--wp--preset--color--contrast-2); }
.bg-nfhelp__a { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.bg-btn--ghost-ink { border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--contrast); }
.bg-btn--ghost-ink:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
@media (max-width: 620px) {
  .bg-nfhelp__a { margin-left: 0; width: 100%; }
  .bg-nfhelp__a .bg-btn { flex: 1; }
}

/* ============================================================
   BACK IN STOCK — bg-core's capture on out-of-stock product pages.
   Presentation lives here (§5); the feature is in bg-core. Tokenised,
   flat, matching the product-page field + button styling.
   ============================================================ */
.bg-bis {
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base-2);
  padding: 18px 18px 16px;
  margin-top: 16px;
}
.bg-bis__head {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 90, "wght" 780;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wp--preset--color--contrast);
  margin: 0 0 6px;
}
.bg-bis__lead {
  font-size: 13.5px;
  color: var(--wp--preset--color--contrast-2);
  margin: 0 0 12px;
  line-height: 1.45;
}
.bg-bis__form { margin: 0; }
.bg-bis__row { display: flex; gap: 8px; flex-wrap: wrap; }
.bg-bis__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 2px solid var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--base);
  font-size: 14px;
  color: inherit;
}
.bg-bis__submit {
  height: 46px;
  padding: 0 20px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-size: 13.5px;
  font-weight: 600;
}
.bg-bis__submit:hover { background: var(--wp--custom--tint--accent-press); }
.bg-bis__small {
  font-size: 11.5px;
  color: var(--wp--preset--color--contrast-3);
  margin: 10px 0 0;
}
.bg-bis__msg {
  font-size: 13px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border-left: 3px solid;
}
.bg-bis__msg--ok {
  color: var(--wp--preset--color--positive);
  border-color: var(--wp--preset--color--positive);
  background: var(--wp--custom--tint--positive, transparent);
}
.bg-bis__msg--error {
  color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}
@media (max-width: 420px) { .bg-bis__submit { flex: 1; } }

/* ============================================================
   WISHLIST / SAVE FOR LATER — bg-core. Hearts on cards + PDP, the
   header count, and the wishlist page. Tokenised; accent = saved.
   ============================================================ */
/* card heart — top-right over the media */
.bg-wish--card {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--contrast-2);
  transition: color .12s, border-color .12s;
}
.bg-wish--card svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.bg-wish--card:hover { border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--accent); }
.bg-wish.is-saved { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.bg-wish.is-saved svg { fill: var(--wp--preset--color--accent); stroke: var(--wp--preset--color--accent); }

/* pdp "save for later" */
.bg-wish-pdp { margin-top: 12px; }
.bg-wish--pdp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  cursor: pointer;
  background: none;
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--contrast);
  font-size: 13.5px;
  font-weight: 600;
}
.bg-wish--pdp svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.bg-wish--pdp:hover { border-color: var(--wp--preset--color--contrast); }

/* header link + count badge */
.bg-wishlink { position: relative; display: grid; place-items: center; }
.bg-wishlink svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.bg-wishlink__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.bg-wishlink__count.is-empty { display: none; }

/* wishlist page — UI Design/Wishlist Page.html */
.bg-wishpage { margin: 0 0 8px; }

/* head */
.bg-whead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 28px 0; border-bottom: 1px solid var(--wp--preset--color--line);
}
.bg-whead__h {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 112, "wght" 770;
  font-size: clamp(26px, 3.5vw, 40px); line-height: 1.02; letter-spacing: -.03em;
  margin: 0 0 7px; display: flex; align-items: center; gap: 12px;
}
.bg-whead__h svg { width: 28px; height: 28px; stroke: var(--wp--preset--color--accent); fill: var(--wp--preset--color--accent); flex: none; }
.bg-whead__meta { margin: 0; color: var(--wp--preset--color--contrast-2); font-size: 15px; }
.bg-whead__meta b { color: var(--wp--preset--color--contrast); }
.bg-whead__a { display: flex; gap: 10px; flex-wrap: wrap; }
.bg-whead__a .bg-btn { white-space: nowrap; }
.bg-whead__a .bg-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
@media (max-width: 620px) { .bg-whead__a { width: 100%; } .bg-whead__a .bg-btn { flex: 1; padding: 0 14px; } }

/* nudge strip */
.bg-wnudge {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--wp--preset--color--contrast); background: var(--wp--preset--color--highlight);
  padding: 12px 18px; margin: 20px 0 4px; font-size: 14px;
}
.bg-wnudge svg { width: 20px; height: 20px; stroke: var(--wp--preset--color--contrast); fill: none; stroke-width: 1.7; flex: none; }
.bg-wnudge b { font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 90, "wght" 800; }

/* grid */
.bg-wgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 24px 0 8px; }
@media (max-width: 1150px) { .bg-wgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .bg-wgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 420px) { .bg-wgrid { grid-template-columns: 1fr; } }

/* wishlist card */
.bg-wcard { border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--base); display: flex; flex-direction: column; position: relative; transition: border-color .15s; }
.bg-wcard:hover { border-color: var(--wp--preset--color--contrast); }
.bg-wcard.is-out { opacity: .94; }
.bg-wcard__m { position: relative; background: var(--wp--preset--color--base-2); aspect-ratio: 1; display: grid; place-items: center; padding: 16px; }
.bg-wcard__m img { width: 100%; height: 100%; object-fit: contain; }
.bg-wcard__rm { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); display: grid; place-items: center; z-index: 2; cursor: pointer; padding: 0; }
.bg-wcard__rm svg { width: 15px; height: 15px; stroke: var(--wp--preset--color--contrast); fill: none; stroke-width: 2; }
.bg-wcard__rm:hover { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
.bg-wcard__rm:hover svg { stroke: var(--wp--preset--color--base); }
.bg-wcard__stamp { position: absolute; bottom: 0; left: 0; right: 0; background: color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent); color: var(--wp--preset--color--base); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: center; padding: 6px 8px; }
.bg-wcard__b { padding: 12px 12px 0; flex: 1; display: flex; flex-direction: column; }
.bg-wcard__brand { font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--wp--preset--color--contrast-3); margin: 0 0 4px; }
.bg-wcard__n { font-size: 13px; line-height: 1.34; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.68em; }
.bg-wcard__s { font-size: 11.5px; color: var(--wp--preset--color--contrast-3); margin: 0 0 9px; }
.bg-wcard__p { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.bg-wcard__now { font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 88, "wght" 780; font-size: 19px; }
.bg-wcard__was { font-size: 12px; color: var(--wp--preset--color--contrast-3); text-decoration: line-through; }
.bg-wcard__u { font-size: 11px; color: var(--wp--preset--color--contrast-3); margin: 0 0 9px; }
.bg-wcard__k { font-size: 11px; font-weight: 600; margin: 0 0 10px; color: var(--wp--preset--color--positive); }
.bg-wcard__k.low { color: var(--wp--preset--color--accent); }
.bg-wcard__k.out { color: var(--wp--preset--color--contrast-3); }
.bg-wcard__f { padding: 0 12px 12px; margin-top: auto; }
.bg-wcard__move { width: 100%; height: 42px; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; }
.bg-wcard__move svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.bg-wcard__move:hover { background: var(--wp--preset--color--accent); }
.bg-wcard__move.is-busy { opacity: .6; cursor: default; }
.bg-wcard__notify { width: 100%; height: 42px; border: 2px solid var(--wp--preset--color--contrast); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--wp--preset--color--contrast); }
.bg-wcard__notify svg { width: 15px; height: 15px; }
.bg-wcard__notify:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* empty state */
.bg-wempty { text-align: center; padding: 56px 0 24px; }
.bg-wempty__ico { width: 84px; height: 84px; margin: 0 auto 20px; border: 2px solid var(--wp--preset--color--contrast); display: grid; place-items: center; background: var(--wp--preset--color--base-2); }
.bg-wempty__ico svg { width: 40px; height: 40px; stroke: var(--wp--preset--color--contrast); fill: none; stroke-width: 1.5; }
.bg-wempty__h { font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 108, "wght" 760; font-size: 26px; letter-spacing: -.02em; margin: 0 0 10px; }
.bg-wempty__p { max-width: 46ch; margin: 0 auto 22px; color: var(--wp--preset--color--contrast-2); font-size: 15px; }
.bg-wempty__a { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* recommendations band */
.bg-wrecs { padding-top: 40px; padding-bottom: 48px; margin-top: 34px; }
.bg-wrecs__head { display: flex; flex-direction: column; padding-bottom: 13px; margin-bottom: 24px; border-bottom: 2px solid var(--wp--preset--color--contrast); }
.bg-wrecs__head h2 { font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 110, "wght" 750; font-size: clamp(23px, 2.6vw, 31px); line-height: 1.06; letter-spacing: -.025em; margin: 0; }

/* toast */
.bg-wtoast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); font-size: 13px; font-weight: 600; padding: 12px 20px; display: flex; align-items: center; gap: 12px; opacity: 0; pointer-events: none; transition: .25s; z-index: 60; max-width: 92vw; }
.bg-wtoast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.bg-wtoast a { color: var(--wp--preset--color--highlight); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================================
   MY ACCOUNT  —  UI Design/My Account Page.html (Phase 1)
   Two-column shell + icon sidebar, Dashboard (tiles, recent orders, address
   cards), Orders table with status pills, and the Addresses / Account-details
   forms styled over WooCommerce own markup (its CSS loads here — the §10a
   dequeue is is_cart() only — so layout is WooCommerce, appearance is ours).
   Tokens only (rule 10); badge tints are color-mix over palette presets.
   ============================================================================ */

/* small button size — mockup .btn--sm (base .bg-btn is 50px/26px) */
.bg-btn--sm { height: 38px; padding: 0 15px; font-size: 12.5px; }

/* the page H1 (templates/page.html → wp:post-title; WooCommerce sets the text
   per endpoint) styled as the mockup .ptitle, only on account screens.
   ⚠ SCOPED TO h1 — product-card names are ALSO .wp-block-post-title (level-3
   <h3>), so `.woocommerce-account .wp-block-post-title` would blow every card
   name in the wishlist recommendations up to clamp(24–32px). The page title is
   the only h1 (§9's PDP lesson, exactly). */
.woocommerce-account h1.wp-block-post-title {
  font-family: var(--wp--preset--font-family--display);
  font-variation-settings: "wdth" 110, "wght" 760;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.02em;
  line-height: 1.04;
  margin: 0 0 18px;
}

/* shell */
.bg-acct { display: grid; grid-template-columns: 264px 1fr; gap: 34px; align-items: start; }
.bg-acct__main { min-width: 0; }

/* ⚠ Neutralise WooCommerce's own float layout. woocommerce-layout.css loads on
   account pages (the §10a dequeue is is_cart() only) and sets the nav to
   float:left/width:30% and the content to float:right/width:68%, plus li padding
   and borders — which collapsed the sidebar (labels wrapped) and left the content
   at 68% with a dead right gutter. The grid owns the layout; win on specificity,
   never load order (§10a). */
.woocommerce-account .bg-acct .woocommerce-MyAccount-navigation,
.woocommerce-account .bg-acct .woocommerce-MyAccount-content { float: none; width: auto; margin: 0; }
.woocommerce-account .bg-acct .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-account .bg-acct .bg-anav li { margin: 0; padding: 0; border: 0; }

/* sidebar — who card */
.bg-who { display: flex; align-items: center; gap: 13px; padding: 0 0 18px; margin-bottom: 8px; border-bottom: 2px solid var(--wp--preset--color--contrast); }
.bg-who__av { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--wp--preset--color--primary-2); color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--display); font-variation-settings: "wght" 800; font-size: 19px; }
.bg-who__id { display: flex; flex-direction: column; min-width: 0; }
.bg-who__id b { font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 96, "wght" 760; font-size: 16px; line-height: 1.1; }
.bg-who__id span { font-size: 12px; color: var(--wp--preset--color--contrast-3); overflow: hidden; text-overflow: ellipsis; }

/* sidebar — nav */
.bg-anav-wrap { border: 0; }
.bg-anav { list-style: none; margin: 0; padding: 0; }
.bg-anav li { margin: 0; }
.bg-anav__a { display: flex; align-items: center; gap: 12px; padding: 12px; font-size: 14px; font-weight: 500; border-left: 3px solid transparent; color: var(--wp--preset--color--contrast); }
.bg-anav__a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; }
.bg-anav__label { flex: 1; min-width: 0; }
.bg-anav__a:hover { background: var(--wp--preset--color--base-2); }
.bg-anav li.is-active > .bg-anav__a,
.bg-anav li.is-active > a { border-left-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); font-weight: 700; background: var(--wp--preset--color--base-2); }
.bg-anav__a--out { color: var(--wp--preset--color--contrast-3); }
.bg-anav__tag { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.bg-anav__sep { height: 1px; background: var(--wp--preset--color--line); margin: 8px 0; }

/* content — intro lead */
.bg-aintro { margin: 0 0 24px; color: var(--wp--preset--color--contrast-2); font-size: 15px; }
.bg-aintro b { font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 96, "wght" 720; }
.bg-aintro--tight { margin-bottom: 18px; }

/* dashboard tiles */
.bg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.bg-tile { border: 1px solid var(--wp--preset--color--line); padding: 18px; }
.bg-tile b { display: block; line-height: 1; font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 92, "wght" 800; font-size: 30px; }
.bg-tile span { font-size: 12.5px; color: var(--wp--preset--color--contrast-3); }
.bg-tile--y { background: var(--wp--preset--color--highlight); border: 2px solid var(--wp--preset--color--contrast); }
.bg-tile--y span { color: var(--wp--preset--color--contrast-2); }

/* card block */
.bg-block { border: 1px solid var(--wp--preset--color--line); margin-bottom: 26px; }
.bg-block__h { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 15px 18px; border-bottom: 1px solid var(--wp--preset--color--line); }
.bg-block__h h2 { margin: 0; font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 104, "wght" 720; font-size: 17px; }
.bg-block__h a { font-size: 12.5px; font-weight: 600; color: var(--wp--preset--color--accent); border-bottom: 1px solid var(--wp--preset--color--accent); }
.bg-block__b { padding: 18px; }
.bg-block__b--flush { padding: 0 0 4px; }
.bg-block--pad { padding: 18px 18px 6px; }
.bg-block__empty { margin: 0; padding: 22px 18px; color: var(--wp--preset--color--contrast-3); }

/* orders table */
.bg-otable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bg-otable th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--contrast-3); padding: 0 14px 11px; border-bottom: 2px solid var(--wp--preset--color--contrast); }
.bg-otable td { padding: 15px 14px; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: middle; }
.bg-otable tr:last-child td { border-bottom: 0; }
.bg-otable__num { font-weight: 700; display: block; }
.bg-otable__items { display: block; margin-top: 2px; color: var(--wp--preset--color--contrast-3); font-size: 12px; }
.bg-otable__total b { font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 90, "wght" 760; }
.bg-oacts { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

/* status pills — derived tints, no raw hex (rule 10) */
.bg-obadge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.bg-obadge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bg-obadge.proc  { color: var(--wp--preset--color--primary-2); background: color-mix(in srgb, var(--wp--preset--color--primary-2) 9%, var(--wp--preset--color--base)); }
.bg-obadge.disp  { color: color-mix(in srgb, var(--wp--preset--color--highlight) 52%, var(--wp--preset--color--contrast)); background: color-mix(in srgb, var(--wp--preset--color--highlight) 32%, var(--wp--preset--color--base)); }
.bg-obadge.deliv { color: var(--wp--preset--color--positive); background: color-mix(in srgb, var(--wp--preset--color--positive) 12%, var(--wp--preset--color--base)); }
.bg-obadge.canc  { color: var(--wp--preset--color--accent); background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, var(--wp--preset--color--base)); }

/* address cards (dashboard) */
.bg-addrs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bg-addr { border: 1px solid var(--wp--preset--color--line); padding: 18px; }
.bg-addr h3 { margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 100, "wght" 720; font-size: 14px; }
.bg-addr h3 a { font-size: 12px; font-weight: 600; color: var(--wp--preset--color--accent); }
.bg-addr p { margin: 0; line-height: 1.7; font-size: 14px; color: var(--wp--preset--color--contrast-2); }
.bg-addr__empty { color: var(--wp--preset--color--contrast-3); }

/* orders pagination + empty state */
.bg-apager { display: flex; gap: 10px; margin-top: 20px; }
.bg-aempty { border: 1px solid var(--wp--preset--color--line); padding: 40px 24px; text-align: center; }
.bg-aempty p { margin: 0 0 16px; color: var(--wp--preset--color--contrast-2); }

/* ---- Addresses + Account details: WooCommerce forms, our appearance ---- */
.woocommerce-account .woocommerce-MyAccount-content form { max-width: 560px; }
.woocommerce-account .woocommerce-MyAccount-content form label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 6px; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-input-wrapper { display: block; width: 100%; }
.woocommerce-account .woocommerce-MyAccount-content form input.input-text,
.woocommerce-account .woocommerce-MyAccount-content form input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content form select {
  width: 100%; height: 46px; box-sizing: border-box; border: 1.5px solid var(--wp--preset--color--line); border-radius: 0; padding: 0 13px; font-size: 14px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
}
.woocommerce-account .woocommerce-MyAccount-content form input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content form select:focus { border-color: var(--wp--preset--color--contrast); outline: 0; }
.woocommerce-account .woocommerce-MyAccount-content form .description,
.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-form-row em { font-size: 11.5px; color: var(--wp--preset--color--contrast-3); font-style: normal; }
.woocommerce-account .woocommerce-MyAccount-content fieldset { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin: 8px 0 0; padding: 20px 0 0; }
.woocommerce-account .woocommerce-MyAccount-content fieldset legend { font-family: var(--wp--preset--font-family--display); font-variation-settings: "wght" 720; font-size: 15px; font-weight: 700; color: var(--wp--preset--color--contrast); margin-bottom: 14px; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-content form .button,
.woocommerce-account .woocommerce-MyAccount-content form button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; border: 2px solid transparent; border-radius: 0; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); font-size: 14px; font-weight: 600; cursor: pointer;
}
.woocommerce-account .woocommerce-MyAccount-content form .button:hover,
.woocommerce-account .woocommerce-MyAccount-content form button[type="submit"]:hover { background: var(--wp--custom--tint--accent-press, var(--wp--preset--color--contrast)); }

/* address overview (my-address.php) as cards.
   ⚠ Neutralise WooCommerce's col2-set floats (float:left/right + width:48%) on
   the columns, same as the nav — the grid owns the layout, or billing/shipping
   stagger diagonally. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; width: auto; float: none; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column2 { float: none; width: auto; margin: 0; }
/* ⚠ WooCommerce's .col2-set clearfix ::before/::after are display:table — on a
   grid they become grid ITEMS, pushing billing into cell 2 and shipping into
   cell 3 (the diagonal stagger). Remove them from the grid. Same for the
   login/register columns when registration is enabled. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::after,
.woocommerce-account:not(.logged-in) #customer_login.u-columns::before,
.woocommerce-account:not(.logged-in) #customer_login.u-columns::after { content: none; display: none; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address { border: 1px solid var(--wp--preset--color--line); padding: 18px; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 { margin: 0; font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 100, "wght" 720; font-size: 14px; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a { font-size: 12px; font-weight: 600; color: var(--wp--preset--color--accent); }
.woocommerce-account .woocommerce-MyAccount-content address { font-style: normal; line-height: 1.7; font-size: 14px; color: var(--wp--preset--color--contrast-2); }

/* responsive */
@media (max-width: 900px) {
  .bg-acct { grid-template-columns: 1fr; gap: 20px; }
  .bg-who { display: none; }
  .bg-anav { display: flex; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
  .bg-anav::-webkit-scrollbar { display: none; }
  .bg-anav__a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .bg-anav li.is-active > .bg-anav__a,
  .bg-anav li.is-active > a { border-left: 0; border-bottom-color: var(--wp--preset--color--accent); }
  .bg-anav__sep, .bg-anav__tag { display: none; }
  .bg-anav__label { flex: none; }
}
@media (max-width: 760px) {
  .bg-otable, .bg-otable tbody, .bg-otable tr, .bg-otable td { display: block; width: 100%; }
  .bg-otable thead { display: none; }
  .bg-otable tr { border: 1px solid var(--wp--preset--color--line); margin-bottom: 12px; padding: 6px 4px; }
  .bg-otable td { border-bottom: 0; padding: 7px 14px; display: flex; justify-content: space-between; gap: 16px; }
  .bg-otable td::before { content: attr(data-l); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--contrast-3); }
  .bg-otable__acts::before { display: none; }
  .bg-oacts { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .bg-tiles { grid-template-columns: 1fr; }
  .bg-addrs,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr; }
}

/* ============================================================================
   MY ACCOUNT  —  Phase 2  (markup rendered by bg-core: Tracking, BuyAgain,
   Preferences) + login/register styling (§2 finding 12). Tokens only.
   ============================================================================ */

/* dashboard nudge — green success strip (positive = success token, §10b-i) */
.bg-nudge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 2px solid var(--wp--preset--color--contrast); background: var(--wp--preset--color--positive); color: var(--wp--preset--color--base); padding: 14px 18px; margin-bottom: 26px; font-size: 14px; }
.bg-nudge svg { width: 22px; height: 22px; flex: none; stroke: var(--wp--preset--color--base); fill: none; stroke-width: 1.8; }
.bg-nudge b { font-family: var(--wp--preset--font-family--display); font-variation-settings: "wght" 800; }
.bg-nudge a { margin-left: auto; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font-size: 12.5px; font-weight: 700; padding: 9px 15px; white-space: nowrap; }
.bg-nudge a:hover { background: var(--wp--preset--color--highlight); }

/* buy-it-again reorder grid */
.bg-reorder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bg-rcard { border: 1px solid var(--wp--preset--color--line); display: flex; flex-direction: column; }
.bg-rcard:hover { border-color: var(--wp--preset--color--contrast); }
.bg-rcard__m { background: var(--wp--preset--color--base-2); aspect-ratio: 1.2; display: grid; place-items: center; padding: 12px; }
.bg-rcard__m img { max-height: 100%; width: auto; }
.bg-rcard__b { padding: 10px 11px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bg-rcard__n { font-size: 12.5px; line-height: 1.3; font-weight: 500; }
.bg-rcard__n:hover { color: var(--wp--preset--color--accent); }
.bg-rcard__p { font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 88, "wght" 780; font-size: 16px; }
.bg-rcard__p del { color: var(--wp--preset--color--contrast-3); font-size: .8em; font-weight: 400; margin-right: 4px; }
.bg-rcard__p ins { text-decoration: none; }
.bg-rcard__c { font-size: 10.5px; color: var(--wp--preset--color--contrast-3); }
.bg-radd { margin: 0 11px 11px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); font-size: 12px; font-weight: 600; text-decoration: none; }
.bg-radd svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.bg-radd:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }

/* track-an-order timeline */
.bg-trk { border: 1px solid var(--wp--preset--color--line); margin-bottom: 18px; }
.bg-trk__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--wp--preset--color--line); }
.bg-trk__num { font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 100, "wght" 760; font-size: 16px; }
.bg-trk__num:hover { color: var(--wp--preset--color--accent); }
.bg-trk__meta { display: block; font-size: 12px; color: var(--wp--preset--color--contrast-3); margin-top: 2px; }
.bg-trk__steps { list-style: none; margin: 0; padding: 16px 18px 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.bg-trk__step { min-width: 0; }
.bg-trk__bar { display: block; height: 6px; background: var(--wp--preset--color--line); }
.bg-trk__step.is-done .bg-trk__bar { background: var(--wp--preset--color--positive); }
.bg-trk__step.is-now .bg-trk__bar { background: var(--wp--preset--color--highlight); }
.bg-trk__label { display: block; font-size: 12px; font-weight: 700; margin: 10px 0 2px; }
.bg-trk__step:not(.is-done):not(.is-now) .bg-trk__label { color: var(--wp--preset--color--contrast-3); }
.bg-trk__when { display: block; font-size: 11.5px; color: var(--wp--preset--color--contrast-3); }
.bg-trk__foot { padding: 8px 18px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bg-trk__code { font-size: 12.5px; color: var(--wp--preset--color--contrast-2); }
.bg-trk__note { margin: 0; font-size: 13px; color: var(--wp--preset--color--contrast-3); }
.bg-trk__cod { flex-basis: 100%; margin: 0; padding-top: 12px; border-top: 1px dashed var(--wp--preset--color--line); font-size: 13.5px; color: var(--wp--preset--color--contrast-2); }

/* email preferences (inside the account-details form) */
.woocommerce-account .woocommerce-MyAccount-content .bg-eprefs__note { font-size: 13px; color: var(--wp--preset--color--contrast-2); margin: 0 0 12px; }
.woocommerce-account .woocommerce-MyAccount-content .bg-eprefs__opt { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13.5px; font-weight: 400; letter-spacing: 0; }
.woocommerce-account .woocommerce-MyAccount-content .bg-eprefs__opt input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--wp--preset--color--accent); }

/* ---- login / register (logged-out account page) — §2 finding 12 ---- */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 940px; margin: 0 auto; }
.woocommerce-account:not(.logged-in) #customer_login.u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin: 0; }
.woocommerce-account:not(.logged-in) #customer_login .u-column1,
.woocommerce-account:not(.logged-in) #customer_login .u-column2 { float: none; width: auto; border: 1px solid var(--wp--preset--color--line); padding: 26px; }
.woocommerce-account:not(.logged-in) #customer_login h2 { font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 104, "wght" 760; font-size: 20px; letter-spacing: -.01em; margin: 0 0 16px; }
.woocommerce-account:not(.logged-in) .woocommerce form.login,
.woocommerce-account:not(.logged-in) .woocommerce form.register { border: 0; padding: 0; margin: 0; }
.woocommerce-account:not(.logged-in) .woocommerce form label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 6px; }
.woocommerce-account:not(.logged-in) .woocommerce form .woocommerce-form-login__rememberme { font-weight: 400; letter-spacing: 0; display: inline-flex; align-items: center; gap: 8px; }
.woocommerce-account:not(.logged-in) .woocommerce form input.input-text,
.woocommerce-account:not(.logged-in) .woocommerce form input[type="text"],
.woocommerce-account:not(.logged-in) .woocommerce form input[type="email"],
.woocommerce-account:not(.logged-in) .woocommerce form input[type="password"] {
  width: 100%; height: 46px; box-sizing: border-box; border: 1.5px solid var(--wp--preset--color--line); border-radius: 0; padding: 0 13px; font-size: 14px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
}
.woocommerce-account:not(.logged-in) .woocommerce form input.input-text:focus { border-color: var(--wp--preset--color--contrast); outline: 0; }
.woocommerce-account:not(.logged-in) .woocommerce form .button {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; border: 2px solid transparent; border-radius: 0; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); font-size: 14px; font-weight: 600; cursor: pointer;
}
.woocommerce-account:not(.logged-in) .woocommerce form .button:hover { background: var(--wp--custom--tint--accent-press, var(--wp--preset--color--contrast)); }
.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-LostPassword a { font-size: 13px; color: var(--wp--preset--color--accent); }
.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-privacy-policy-text { font-size: 12px; color: var(--wp--preset--color--contrast-3); }
/* standalone login (registration disabled → no 2-col grid): centre it as a card */
.woocommerce-account:not(.logged-in) .woocommerce > h2,
.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login { max-width: 460px; margin-left: auto; margin-right: auto; }
.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login { border: 1px solid var(--wp--preset--color--line); padding: 26px; }

/* account responsive — Phase 2 */
@media (max-width: 900px) {
  .bg-reorder { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .woocommerce-account:not(.logged-in) #customer_login.u-columns { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bg-trk__steps { grid-template-columns: repeat(2, 1fr); gap: 10px 4px; }
  .bg-nudge a { margin-left: 0; }
}
@media (max-width: 420px) {
  .bg-reorder { grid-template-columns: 1fr; }
}

/* discontinued product notice (bg-core Catalog\Discontinued, 'notice' mode) —
   replaces the buy box on a product no longer stocked */
.bg-discontinued { border: 1px solid var(--wp--preset--color--line); padding: 20px; margin-top: 8px; }
.bg-discontinued__head { margin: 0 0 6px; font-family: var(--wp--preset--font-family--display); font-variation-settings: "wdth" 100, "wght" 740; font-size: 16px; color: var(--wp--preset--color--contrast); }
.bg-discontinued__lead { margin: 0 0 16px; font-size: 14px; color: var(--wp--preset--color--contrast-2); }