/*!
Theme Name: SoCal Research Peptide
Theme URI: https://socalresearchpeptides.com/
Description: Custom classic theme for SoCal Research Peptide — a dark, research-grade
  WooCommerce storefront built from the homepage mockup. No starter theme or framework;
  design tokens in assets/css/design-tokens.css are the single source of truth.
Author: cloudXbloom
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: socal
*/

/* ============================================================
   Base reset — minimal, modern
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ overflow-x:clip; }  /* guard: decorative glows / media never cause a horizontal scrollbar */
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text-2);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  /* Smooth page-wide depth, as drawn in the comp (darkest at the top and
     bottom, lifting through the middle) — replaces the hard alt-section band. */
  background-image:linear-gradient(180deg, transparent 0%, rgba(20,60,110,.10) 42%, rgba(20,60,110,.08) 62%, transparent 100%);
  background-repeat:no-repeat;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--color-accent); text-decoration:none; transition:color var(--dur) var(--ease); }
a:hover{ color:var(--color-accent-hover); }
button{ font-family:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-head); color:var(--color-text); line-height:var(--lh-head); font-weight:var(--fw-bold); }
p{ margin:0 0 1rem; }
input,button,textarea,select{ font:inherit; color:inherit; }

/* Visible keyboard focus everywhere (accessibility) */
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; border-radius:2px; }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--color-accent); color:var(--color-on-accent);
  padding:.6rem 1rem; border-radius:0 0 var(--radius-sm) 0; font-weight:var(--fw-semi);
}
.skip-link:focus{ left:0; }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sp-section); }
/* The comp has no hard alt band — the page carries one smooth vertical
   gradient instead (see body background below). Kept as a no-op hook. */
.section--alt{ background:transparent; }
.stack > * + *{ margin-top:var(--sp-4); }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   Typography helpers
   ============================================================ */
.eyebrow{
  font-family:var(--font-head); font-weight:var(--fw-semi);
  font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--color-accent);
  display:inline-block; margin-bottom:var(--sp-3);
}
.section-title{ font-size:var(--fs-h2); }
.lead{ font-size:var(--fs-lead); color:var(--color-text-muted); }
.muted{ color:var(--color-text-muted); }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --_bg:var(--color-accent); --_fg:var(--color-on-accent); --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:var(--radius-sm);
  background:var(--_bg); color:var(--_fg); border:1px solid var(--_bd);
  font-family:var(--font-head); font-weight:var(--fw-semi); font-size:var(--fs-small);
  letter-spacing:var(--ls-button); text-transform:uppercase; cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn--primary{ box-shadow:0 6px 22px -10px var(--accent-glow); }
.btn--primary:hover{ --_bg:var(--color-accent-hover); color:var(--color-on-accent); transform:translateY(-1px); }
.btn--secondary{ --_bg:transparent; --_fg:var(--color-text); --_bd:var(--color-border); }
.btn--secondary:hover{ --_bd:var(--color-accent); color:var(--color-accent); }
.btn--block{ width:100%; }

/* ============================================================
   Badge — "Research Use Only" pill
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .65rem; border:1px solid var(--color-accent); border-radius:var(--radius-pill);
  color:var(--color-accent); background:var(--accent-wash-soft);
  font-family:var(--font-head); font-weight:var(--fw-medium);
  font-size:.72rem; letter-spacing:0; line-height:1.35; white-space:nowrap;
}

/* Generic panel/card surface */
.panel{
  background:var(--color-panel); border:1px solid var(--color-border);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
}

/* Product grid — shared by home Featured, shop/category archives, and search.
   Site-wide so it works off the front page.
   Four across, not the mockup's six: the client's product artwork is a 2:1
   label image, and at six columns the label's own type falls to ~10px. The
   shop archive shares these breakpoints (see woocommerce.css). */
.product-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-4); }
@media (max-width:1180px){ .product-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){ .product-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .product-grid{ grid-template-columns:1fr; gap:var(--sp-3); } }

/* ============================================================
   Product card — the WooCommerce loop base. Shared by the homepage
   Featured grid and the shop/category archives, so it lives site-wide.
   ============================================================ */
.product-card{ display:flex; flex-direction:column; background:var(--color-panel); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.product-card:hover{ border-color:color-mix(in srgb, var(--color-accent) 50%, var(--color-border)); transform:translateY(-4px); box-shadow:0 22px 46px -26px rgba(0,0,0,.85), 0 0 0 1px color-mix(in srgb,var(--color-accent) 22%, transparent); }
/* Photos ship with their own dark studio backdrop baked in; let each fill the
   media at natural aspect (all are the same ratio) so the backdrop IS the panel
   — no inner box, no crop. A gradient sits under, so a transparent/edge gap
   still reads as studio lighting. */
.product-card__media{ display:block; position:relative; overflow:hidden; border-bottom:1px solid var(--color-border); background:radial-gradient(120% 90% at 50% 22%, #16273e 0%, #0b1626 55%, #070e1c 100%); }
.product-card__media img{ width:100%; height:auto; display:block; transition:transform .55s var(--ease); }
.product-card:hover .product-card__media img{ transform:scale(1.045); }
.product-card__body{ display:flex; flex-direction:column; gap:.4rem; padding:.8rem .9rem .9rem; flex:1; }
.product-card__name{ font-size:1.06rem; font-weight:var(--fw-semi); line-height:1.25; }
.product-card__name a{ color:var(--color-text); }
.product-card__name a:hover{ color:var(--color-accent); }
.product-card__dosage{ color:var(--color-text-muted); font-size:var(--fs-small); margin:0; }
.product-card .badge{ align-self:flex-start; }
.product-card__footer{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:auto; padding-top:.65rem; border-top:1px solid var(--color-border-soft); }
.product-card__price{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:1.18rem; color:var(--color-text); }
.product-card__price .woocommerce-Price-amount{ color:var(--color-text); }
.product-card__price del{ color:var(--color-text-dim); font-weight:var(--fw-medium); font-size:.9rem; margin-right:.35rem; }
.product-card__price ins{ text-decoration:none; }
/* Mockup shows a small OUTLINED cart control, not a filled cyan block — the
   price is the loud element in the card footer, the cart is the quiet one.
   Hover/focus promote it to the accent fill so the affordance stays obvious. */
.product-card__add{ display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border-radius:var(--radius-sm); border:1px solid var(--color-border); color:var(--color-text-2); background:transparent; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.product-card__add svg{ width:18px; height:18px; }
.product-card__add:hover,
.product-card__add:focus-visible{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-on-accent); }
.product-card__add.loading{ opacity:.6; }
.product-card__add.added{ background:var(--color-success); color:#04140d; }

/* ============================================================
   Shared content components — section header, feature item, info tile.
   Used by the homepage sections AND the section pages, so site-wide.
   ============================================================ */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-5); }
.section-head__link{ display:inline-flex; align-items:center; gap:.4rem; color:var(--color-accent); font-family:var(--font-head); font-weight:var(--fw-semi); font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; white-space:nowrap; }
.section-head__link svg{ width:16px; height:16px; }
.section-head--center{ flex-direction:column; align-items:center; text-align:center; }
.section-head--center .lead{ max-width:52ch; }

/* Section container. The mockup groups Featured Products, Built Around Research,
   Browse by Category and the Information block each inside a hairline-bordered
   rounded box — that grouping is what makes the comp read as composed rather
   than as sections floating in space. */
.section-box{
  border:1px solid var(--color-border); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.012), transparent 60%);
  padding:clamp(1.1rem,1.8vw,1.5rem);
}

/* Feature item with the icon stacked ABOVE the title (Built Around Research).
   Distinct from --stacked (icon above a single short label) and --row
   (icon beside a title+description). */
.feature--top{ flex-direction:column; align-items:flex-start; gap:.75rem; }
.feature--top .feature__icon svg, .feature--top .feature__icon img{ width:42px; height:42px; }
.feature--top .feature__title{ margin-bottom:.35rem; }

.feature{ display:flex; }
.feature--stacked{ flex-direction:column; align-items:flex-start; gap:.6rem; }
.feature--row{ gap:.9rem; align-items:flex-start; }
.feature__icon{ color:var(--color-accent); display:inline-flex; }
.feature__icon svg, .feature__icon img{ width:31px; height:31px; object-fit:contain; }
.feature__icon--boxed{ width:46px; height:46px; border-radius:var(--radius-sm); background:var(--accent-wash); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.feature__icon--boxed svg, .feature__icon--boxed img{ width:24px; height:24px; object-fit:contain; }
.feature__label{ font-family:var(--font-head); font-weight:var(--fw-medium); font-size:var(--fs-small); color:var(--color-text-2); }
.feature__title{ font-family:var(--font-head); font-weight:var(--fw-semi); font-size:1.02rem; color:var(--color-text); margin-bottom:.3rem; }
.feature__desc{ font-size:var(--fs-small); line-height:1.5; margin:0; }

.info-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
.info-tile{ padding:var(--sp-5); display:flex; flex-direction:column; gap:.5rem; transition:border-color var(--dur) var(--ease); }
.info-tile:hover{ border-color:color-mix(in srgb,var(--color-accent) 45%,var(--color-border)); }
.info-tile__icon{ color:var(--color-accent); }
.info-tile__icon svg, .info-tile__icon img{ width:32px; height:32px; object-fit:contain; }
.info-tile__title{ font-family:var(--font-head); font-size:.98rem; color:var(--color-text); }
.info-tile__link{ display:inline-flex; align-items:center; gap:.35rem; color:var(--color-accent); font-size:var(--fs-small); font-weight:var(--fw-medium); white-space:nowrap; }
.info-tile__link svg{ width:15px; height:15px; }

/* Prose / WYSIWYG page content */
.page-content{ max-width:72ch; }
.page-content h2{ font-size:var(--fs-h2); margin:2rem 0 .75rem; }
.page-content h3{ font-size:var(--fs-h3); margin:1.6rem 0 .5rem; }
.page-content p{ color:var(--color-text-muted); }
.page-content a{ text-decoration:underline; text-underline-offset:3px; }
.page-content ul{ list-style:disc; padding-left:1.25rem; margin:0 0 1rem; color:var(--color-text-muted); }
.page-content li{ margin-bottom:.4rem; }

/* ============================================================
   Site header / nav  (template-parts/nav.php)
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:transparent; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{ background:rgba(6,12,24,.85); backdrop-filter:blur(10px); border-bottom-color:var(--color-border); }
.site-header__inner{ display:flex; align-items:center; gap:var(--sp-6); min-height:76px; }

.site-brand{ display:inline-flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.site-brand__mark{ width:38px; height:38px; flex:0 0 auto; color:var(--color-accent); }
.site-brand__logo, .site-brand .custom-logo{ height:44px; width:auto; display:block; }
/* Vector brand lockup — see socal_logo_svg(). Sized by height so it stays
   crisp at any density; the viewBox carries the aspect ratio. */
.socal-logo{ height:44px; width:auto; display:block; }
.footer-brand .socal-logo{ height:50px; }
.site-brand__text{ display:flex; flex-direction:column; line-height:1; }
.site-brand__eyebrow{ font-family:var(--font-head); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--color-text-2); }
.site-brand__name{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent); }

.primary-nav{ margin-inline:auto; }
.primary-nav ul{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.primary-nav a{
  color:var(--color-text-2); font-weight:var(--fw-medium); font-size:.95rem;
  padding:.4rem 0; position:relative;
}
.primary-nav a:hover{ color:#fff; }
.primary-nav .current-menu-item > a,
.primary-nav a[aria-current="page"]{ color:var(--color-accent); }
.primary-nav .current-menu-item > a::after,
.primary-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--color-accent); border-radius:2px;
}

.header-actions{ display:flex; align-items:center; gap:1.1rem; flex:0 0 auto; }
.header-actions a{ color:var(--color-text-2); display:inline-flex; }
.header-actions a:hover{ color:var(--color-accent); }
.header-cart{ position:relative; }
.header-cart__count{
  position:absolute; top:-8px; right:-10px; min-width:18px; height:18px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-accent); color:var(--color-on-accent); border-radius:var(--radius-pill);
  font-family:var(--font-head); font-size:.65rem; font-weight:var(--fw-bold); line-height:1;
}
.nav-toggle{ display:none; background:none; border:0; color:var(--color-text); cursor:pointer; padding:.25rem; }

/* Mobile dropdown nav (built by theme.js from the primary menu) */
.mobile-nav{ background:var(--color-bg-2); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.mobile-nav[hidden]{ display:none; }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav li{ border-bottom:1px solid var(--color-border-soft); }
.mobile-nav li:last-child{ border-bottom:0; }
.mobile-nav a{ display:block; padding:.9rem var(--gutter); color:var(--color-text-2); font-weight:var(--fw-medium); }
.mobile-nav a:hover,
.mobile-nav .current-menu-item > a,
.mobile-nav a[aria-current="page"]{ color:var(--color-accent); }
body.nav-open{ overflow:hidden; }

/* ============================================================
   Site footer  (template-parts/site-footer.php)
   ============================================================ */
.site-footer{ background:var(--color-bg); border-top:1px solid var(--color-border); padding-block:var(--sp-6) var(--sp-4); margin-top:var(--sp-5); }
.site-footer__main{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--sp-5); align-items:start; }
.footer-brand__logo{ height:42px; width:auto; display:block; margin-bottom:.5rem; }
.footer-brand__tagline{ color:var(--color-text-muted); font-size:var(--fs-small); max-width:32ch; margin:.6rem 0 .85rem; }
.footer-social{ display:flex; gap:.9rem; }
.footer-social a{ color:var(--color-accent); display:inline-flex; opacity:.9; transition:opacity var(--dur) var(--ease), color var(--dur) var(--ease); }
.footer-social a:hover{ color:var(--color-accent-hover); opacity:1; }
.footer-social svg{ width:19px; height:19px; display:block; }
.footer-col h4{ font-family:var(--font-head); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text); margin-bottom:.7rem; }
.footer-col li{ margin-bottom:.34rem; }
.footer-col a{ color:var(--color-text-dim); font-size:var(--fs-small); }
.footer-col a:hover{ color:var(--color-accent); }
.site-footer__bar{ margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--color-border); color:var(--color-text-dim); font-size:var(--fs-small); text-align:center; }

/* ============================================================
   Responsive — full pass is Phase 6; these keep the shared
   header/footer usable on small screens from the start.
   ============================================================ */
@media (max-width:900px){
  .site-footer__main{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  .primary-nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .site-header__inner{ min-height:64px; gap:var(--sp-3); }
  /* Keep the brand from crowding the action cluster off the screen edge. */
  .site-brand__logo, .site-brand .custom-logo, .site-brand .socal-logo{ height:32px; }
  .header-actions{ gap:.8rem; }
}
@media (max-width:560px){
  .site-footer__main{ grid-template-columns:1fr; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* ============================================================
   Search form (search.php — the header search icon lands here)
   ============================================================ */
.search-form{ display:flex; gap:.6rem; flex-wrap:wrap; max-width:36rem; }
.search-form input[type="search"]{
  flex:1; min-width:12rem; background:var(--color-panel-2);
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
  padding:.85rem 1rem; color:var(--color-text);
}
.search-form input[type="search"]::placeholder{ color:var(--color-text-dim); }
.search-form input[type="search"]:focus-visible{ outline:none; border-color:var(--color-accent); box-shadow:var(--ring-accent); }

/* ============================================================
   Motion
   ------------------------------------------------------------
   The `.reveal` starting state is only ever applied by theme.js
   (which bails out entirely under prefers-reduced-motion), so
   without JavaScript nothing here hides content. The media query
   is belt-and-braces for the same reason.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .motion-on .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .62s var(--ease), transform .62s var(--ease);
    will-change:opacity, transform;
  }
  .motion-on .reveal.is-revealed{
    opacity:1;
    transform:none;
  }
  /* Once revealed, drop the hint so hover transforms stay smooth. */
  .motion-on .reveal.is-revealed{ will-change:auto; }

  /* Hero artwork drifts gently; the glow breathes behind it. */
  .motion-on .hero__molecule{ animation:socal-float 7s var(--ease) infinite; }
  .motion-on .hero__glow{ animation:socal-breathe 8s ease-in-out infinite; }
  .motion-on .built-around__img{ animation:socal-float 9s var(--ease) infinite; }
  .motion-on .explorer__img{ animation:socal-float 11s var(--ease) infinite; }

  @keyframes socal-float{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-12px); }
  }
  @keyframes socal-breathe{
    0%,100%{ opacity:.55; transform:scale(1); }
    50%    { opacity:.85; transform:scale(1.06); }
  }

  /* Category cards: lift the photo slightly on hover. */
  .motion-on .category-card{ transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-size var(--dur) var(--ease); background-size:cover; }
  .motion-on .category-card:hover{ background-size:112%; }

  /* Underline sweeps in from the left on hover. The static ::after underline
     above already marks the active item — animate that same element instead of
     adding a second one, or the current page would show two rules. */
  .motion-on .primary-nav a{ position:relative; }
  .motion-on .primary-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:var(--color-accent); border-radius:2px;
    transform:scaleX(0); transform-origin:left;
    transition:transform var(--dur) var(--ease);
  }
  .motion-on .primary-nav a:hover::after,
  .motion-on .primary-nav .current-menu-item > a::after,
  .motion-on .primary-nav a[aria-current="page"]::after{ transform:scaleX(1); }

  /* Buttons and cards get a touch more life. */
  .motion-on .btn{ will-change:transform; }
  .motion-on .btn--primary:hover{ transform:translateY(-2px); }
  .motion-on .btn--secondary:hover{ transform:translateY(-2px); }
  .motion-on .product-card__media img{ transition:transform .6s var(--ease); }
  .motion-on .doc-card:hover,
  .motion-on .info-tile:hover{ transform:translateY(-3px); }
  .motion-on .doc-card,
  .motion-on .info-tile{ transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
}

/* Anyone who asks for less motion gets none of it — including the ambient
   float/breathe loops, which are the most distracting part. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   Product card — ajax add-to-cart states
   ------------------------------------------------------------
   Lives here, not in woocommerce.css, because that stylesheet is
   enqueued only on WooCommerce pages — and .product-card is also
   used by the homepage featured grid and search results, where
   the button would otherwise keep WooCommerce's raw states.
   (Same lesson as .product-grid and .section-head before it.)
   ============================================================ */
/* ---- Ajax add-to-cart states ----
 * WooCommerce appends a checkmark to .added and a spinner to .loading, both
 * drawn with its own icon font via ::after. In an icon-only 38px button they
 * land BESIDE the cart glyph and spill outside the border. And the auto-added
 * "View cart" text link matched neither the theme nor the card footer.
 *
 * The button itself is the confirmation: it flips to a success tick. The
 * header cart badge already updates via fragments, so the extra link is noise.
 */
.woocommerce a.added_to_cart,
.woocommerce ul.products li.product a.added_to_cart,
.product-card a.added_to_cart{ display:none !important; }

.woocommerce a.button.product-card__add::after,
.woocommerce ul.products li.product a.button.product-card__add::after,
.product-card__add::after{ display:none !important; content:none !important; }

.woocommerce a.button.product-card__add.loading,
.product-card__add.loading{ opacity:.5; pointer-events:none; }

/* Success state: swap the cart glyph for a tick, drawn rather than fonted so
   it matches the theme's SVG icon set. */
.woocommerce a.button.product-card__add.added,
.woocommerce ul.products li.product a.button.product-card__add.added,
.product-card__add.added{
  background:var(--color-success); border-color:var(--color-success);
  color:#04140d;
}
.woocommerce a.button.product-card__add.added svg,
.product-card__add.added svg{ display:none; }
.woocommerce a.button.product-card__add.added::before,
.product-card__add.added::before{
  content:""; display:block; width:16px; height:16px; background:currentColor;
  clip-path:polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 84% 6%, 38% 68%);
}

@media (max-width:1080px){ .woocommerce ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){ .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); } }