/*
Theme Name: XBALM Child
Template: twentytwentyfive
Version: 1.2
*/

/* NOTE: WordPress uses the Version line above as the cache-busting query
   string on this stylesheet (style.css?ver=1.1). It is not derived from the
   file's timestamp, so editing this file without bumping that number leaves
   returning visitors on the old copy. Bump it with every change here. */

/* ==================================================================
   Header cart button
   ==================================================================
   This lives here, and only here, on purpose.

   The header markup is shared (template-parts/xb-header.php), but its CSS
   used to exist in two places: an inline <style> block in
   page-custom-order.php, which is the only stylesheet the home page gets,
   and assets/css/xbalm-front.css, which loads on every page except the home
   page. Editing either one fixed half the site and looked like a caching
   problem. It cost us two rounds of confusion on 11 September 2026.

   This file is the child theme stylesheet, which WordPress loads on every
   page, so a rule placed here applies everywhere with no enqueue logic to
   reason about. The cart rules can live here — unlike the rest of that
   duplicated header block — because they reference no CSS custom
   properties, and the two stylesheets use different variable namespaces
   (--black here, --xb-black there).

   If you change the cart, change it here. There is no other copy.

   Deliberately the inverse of xbalm.com's cart: red field, black glyph.
   Both sites share a logo and a palette, so this is one of the few places
   a customer can tell at a glance which site they are on. The SVG is
   stroked with currentColor, so `color` drives the glyph.               */

/* Scoped as `.xb-hdr-right > a.xb-cart`, not plain `.xb-cart`, on purpose.
   The header sets `.xb-hdr-right > a{color:#fff}`, which is more specific
   than a lone class — so a bare `.xb-cart{color:#000}` loses the colour and
   the glyph renders white on red. Matching that selector and adding the
   class wins on specificity rather than on source order, which matters here
   because this file loads before the page's own inline styles. */
.xb-hdr-right > a.xb-cart{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:1px;width:48px;height:40px;
  padding:0 0 2px !important;background:#FD0000;border:1px solid #FD0000;color:#000}
.xb-hdr-right > a.xb-cart:hover{background:#C50000;border-color:#C50000;color:#000}
/* red-on-red would be invisible, so the focus ring goes white */
.xb-hdr-right > a.xb-cart:focus-visible{outline:2px solid #fff;outline-offset:2px}
.xb-cart svg{display:block}
/* px rather than rem: at this size a fractional rem rounds unpredictably */
.xb-cart-label{font-family:"Poppins",sans-serif;font-size:7.5px;font-weight:700;
  line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#000}
.xb-cart-n{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;
  border-radius:10px;background:#fff;color:#000;font-family:"Poppins",sans-serif;
  font-size:.68rem;font-weight:700;line-height:19px;text-align:center;
  padding:0 5px;letter-spacing:0;box-shadow:0 0 0 2px #000}