/*
Theme Name: Airlectronics
Theme URI: https://airlectronics.co.za
Description: Child theme of Blocksy for the Airlectronics electronics store. Brand system (forest green + gold, Outfit / Inter / JetBrains Mono, 8pt grid) lives in theme.json; this file bridges those tokens into Blocksy's own CSS custom properties and carries the bespoke CSS that theme.json cannot express.
Author: Airlectronics
Template: blocksy
Version: 0.1.4
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: airlectronics
*/

/* =========================================================================
   1. Bridge — map the design-system tokens onto Blocksy's palette vars so
   Blocksy-rendered chrome (buttons, header, footer, product cards, the
   WooCommerce widgets) follows the brand without touching the Customizer.
   Blocksy palette slots: 1 accent, 2 accent-hover, 3 headings, 4 text,
   5 border, 6 light-background, 7 surface, 8 page-background.
   ========================================================================= */
:root {
  --theme-palette-color-1: var(--wp--preset--color--primary);
  --theme-palette-color-2: var(--wp--preset--color--primary-hover);
  --theme-palette-color-3: var(--wp--preset--color--contrast);
  --theme-palette-color-4: var(--wp--preset--color--contrast-2);
  --theme-palette-color-5: var(--wp--preset--color--border);
  --theme-palette-color-6: var(--wp--preset--color--muted);
  --theme-palette-color-7: var(--wp--preset--color--surface);
  --theme-palette-color-8: var(--wp--preset--color--base);

  --theme-text-color: var(--wp--preset--color--contrast-2);
  --theme-headings-color: var(--wp--preset--color--contrast);
  --theme-link-initial-color: var(--wp--preset--color--primary);
  --theme-link-hover-color: var(--wp--preset--color--primary-hover);
  --theme-border-color: var(--wp--preset--color--border);
  --theme-content-background-color: var(--wp--preset--color--base);
  --theme-selection-background-color: var(--wp--preset--color--primary-soft);

  --theme-font-family: var(--wp--preset--font-family--inter);
  --theme-headings-font-family: var(--wp--preset--font-family--outfit);

  /* Blocksy button (theme + WooCommerce) */
  --theme-button-background-initial-color: var(--wp--preset--color--primary);
  --theme-button-background-hover-color: var(--wp--preset--color--primary-hover);
  --theme-button-text-initial-color: #ffffff;
  --theme-button-text-hover-color: #ffffff;
  --theme-button-border-radius: 10px;
  --theme-button-min-height: 44px;

  /* Rounded corners for cards / inputs / images */
  --theme-form-select-border-radius: 10px;
  --theme-form-text-border-radius: 10px;
}

/* =========================================================================
   2. Bespoke styling that no token expresses. Kept intentionally small —
   most layout comes from block templates + patterns.
   ========================================================================= */

/* Prices in the tabular mono, brand-wide */
.woocommerce-Price-amount,
.price .amount,
.wc-block-formatted-money-amount,
.wc-block-components-formatted-money-amount {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Sale flash → brand sale colour, pill shape */
.onsale,
.wc-block-components-product-sale-badge {
  background-color: var(--wp--preset--color--sale) !important;
  color: #fff !important;
  border-radius: var(--wp--preset--spacing--3-xl);
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Consistent heading/paragraph rhythm for prose page content (policy
   pages, and any future plain WP Page written as normal paragraphs and
   headings). Without this, the exact same <h2> renders at a different
   size depending on which template it's used from: WordPress's own
   classic-theme compatibility stylesheet (plain element selectors like
   h2{font-size:1.5em}) loads after theme.json's generated global styles
   and wins the cascade tie at equal specificity wherever a heading has no
   explicit font-size block class — confirmed via the matched-rules
   inspector, e.g. a heading on a policy page came out at 35px while the
   same level heading elsewhere (with an explicit size class the block
   editor had added) came out at the intended 32px. Anchoring to
   .entry-content and restating the theme.json preset values here — the
   same tokens, just at high enough specificity to actually win — fixes
   this once for every current and future content page instead of
   per-page patches. */
.entry-content h1 { font-size: var(--wp--preset--font-size--3-xl); }
.entry-content h2 {
  font-size: var(--wp--preset--font-size--2-xl);
  margin: var(--wp--preset--spacing--2-xl) 0 var(--wp--preset--spacing--md);
}
.entry-content h3 {
  font-size: var(--wp--preset--font-size--xl);
  margin: var(--wp--preset--spacing--xl) 0 var(--wp--preset--spacing--sm);
}
.entry-content h4 {
  font-size: var(--wp--preset--font-size--lg);
  margin: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--sm);
}
.entry-content p {
  margin: 0 0 var(--wp--preset--spacing--md);
  line-height: 1.7;
}
.entry-content ul,
.entry-content ol {
  margin: 0 0 var(--wp--preset--spacing--md);
  padding-left: 1.3em;
}
.entry-content li { margin-bottom: 6px; }
.entry-content table { margin: 0 0 var(--wp--preset--spacing--md); }
.entry-content > *:first-child,
.entry-content h1:first-child,
.entry-content h2:first-child { margin-top: 0; }

/* Front page: suppress Blocksy's page-title hero band and let the first
   section sit flush under the header */
.home .hero-section {
  display: none;
}
.home .ct-container-full,
.home .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.home article > .entry-content > *:first-child {
  margin-block-start: 0;
}

/* =========================================================================
   Hero deal carousel
   ========================================================================= */
.al-hero-carousel,
.al-hero-fallback { position: relative; }

.al-hero-bg {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--wp--preset--color--primary-soft) 60%, var(--wp--preset--color--base)) 0%,
    var(--wp--preset--color--base) 48%,
    color-mix(in srgb, var(--wp--preset--color--accent-soft) 65%, var(--wp--preset--color--base)) 100%);
}

.al-hero-track { position: relative; }

.al-hero-slide {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--wp--preset--spacing--3-xl);
}
.al-hero-text { min-width: 0; }
.al-hero-slide[hidden] { display: none; }

.al-hero-eyebrow {
  margin: 0 0 10px;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--sage);
}

.al-hero-badge {
  display: inline-block;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1A1408;
  background: var(--wp--preset--color--accent);
  border-radius: 999px;
  padding: 7px 14px;
}

.al-hero-heading {
  margin: 14px 0 0;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--contrast);
  overflow-wrap: break-word;
}

.al-hero-sub {
  margin: var(--wp--preset--spacing--sm) 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--wp--preset--color--contrast-3);
}

.al-hero-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: var(--wp--preset--spacing--md) 0 0;
}
.al-hero-sale {
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.9rem);
  color: var(--wp--preset--color--primary);
}
.al-hero-was {
  font-size: 15px;
  color: var(--wp--preset--color--contrast-3);
  text-decoration: line-through;
}

.al-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  margin-top: var(--wp--preset--spacing--lg);
}
.al-hero-cta {
  display: inline-block;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  background: var(--wp--preset--color--primary);
  border-radius: 999px;
  padding: 13px 26px;
  text-decoration: none;
  transition: background var(--wp--custom--transition--base);
}
.al-hero-cta:hover { background: var(--wp--preset--color--primary-hover); }
.al-hero-cta-secondary {
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 14px;
  color: var(--wp--preset--color--contrast-2);
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.al-hero-cta-secondary:hover { color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); }

/* Hero image panel */
.al-hero-media {
  position: relative;
}
.al-hero-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: contain;
  mix-blend-mode: multiply; /* product photos ship on a plain white canvas; this
    drops that white to let the gradient hero background show through instead
    of a hard rectangle, without needing pre-cut transparent photography. A
    CSS drop-shadow filter would re-draw a rectangular halo around that same
    canvas edge, undoing the effect, so the photo's own baked-in shadow is
    left to do the grounding instead. */
}
.al-hero-chip {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: inline-block;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 12px;
  color: var(--wp--preset--color--primary-hover);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  padding: 7px 13px;
  box-shadow: var(--wp--preset--shadow--md);
}

/* Controls: pause + dots */
.al-hero-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: var(--wp--preset--spacing--xl);
}
.al-hero-dots { display: flex; gap: 8px; }
.al-hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--wp--preset--color--border);
  cursor: pointer;
  transition: background var(--wp--custom--transition--base), width var(--wp--custom--transition--base);
}
.al-hero-dot.is-active {
  width: 22px;
  background: var(--wp--preset--color--primary);
}

.al-hero-fallback .al-hero-text { max-width: 640px; }

@media (max-width: 781px) {
  .al-hero-slide { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--lg); }
  .al-hero-media { order: -1; margin-top: 0; }
  .al-hero-chip {
    position: static;
    display: inline-block;
    margin-bottom: 10px;
  }
}

/* =========================================================================
   Site header — light surface, brand-green accents (Round 3: header design,
   componentry/positions from the Claude Design export, restyled in the
   site's own Outfit/Inter/JetBrains Mono system — no flat/Archivo skin)
   ========================================================================= */
.al-header {
  --al-line: rgba(255, 255, 255, 0.16);
  font-family: var(--wp--preset--font-family--outfit);
  /* Fixed rather than sticky: Blocksy's #main-container uses overflow:clip
     and wraps the header in a short box, both of which break position:sticky. */
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  transition: transform 0.28s ease, box-shadow 0.2s ease;
}
.al-header.is-hidden { transform: translateY(-100%); }
.al-header.is-stuck { box-shadow: 0 6px 22px rgba(14, 26, 18, 0.22); }
@media (prefers-reduced-motion: reduce) {
  .al-header { transition: none; }
}
/* Keeps page content clear of the fixed header (JS sets the exact height). */
.al-header-spacer { height: var(--al-header-h, 135px); }
.al-header a { color: inherit; text-decoration: none; }
.al-header .al-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--wp--preset--spacing--lg);
  padding-right: var(--wp--preset--spacing--lg);
}
.al-header .al-mono { font-family: var(--wp--preset--font-family--jetbrains-mono); }

/* announcement — split left/right utility strip */
.al-announce {
  background: var(--wp--preset--color--footer);
  color: #EAF2EC;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.al-announce .al-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.al-announce .al-mono { color: #F1D98A; font-weight: 600; }
.al-announce-yoco-logo { height: 13px; width: auto; vertical-align: -2px; margin: 0 1px; }

/* main row */
.al-header-main { background: var(--wp--preset--color--primary); color: #fff; }
.al-header-main .al-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 11px;
  padding-bottom: 11px;
}
/* Visual order (brand, search, actions) differs from DOM order (actions
   before search - see inc/site-header.php for why); restore it here rather
   than in markup so this reflows correctly for the mobile grid below too. */
.al-brand { order: 1; flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.al-search { order: 2; }
.al-track-order { order: 3; }
.al-actions { order: 4; }
/* The mobile grid needs the burger and Track Order icon side by side as one
   unit (see the mobile block below); .al-left-icons only exists to give them
   a shared flex row there. On desktop it must not add a box of its own —
   display:contents removes it from the box tree entirely, so .al-burger
   (already display:none there) and .al-track-order keep participating in
   .al-wrap's flex layout individually, exactly as if this wrapper didn't
   exist. */
.al-left-icons { display: contents; }
.al-brand .al-logo { height: 40px; width: auto; display: block; }
.al-brand .al-logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--wp--preset--color--accent);
  display: block;
  flex-shrink: 0;
}
.al-brand .al-logo-text { font-weight: 700; font-size: 19px; color: #fff; }

/* search — attached input + submit button (position:relative anchors the suggestions panel) */
.al-search {
  position: relative;
  flex: 1;
  max-width: 560px;
  display: flex;
}
.al-search input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px 0 0 10px;
  outline: 0;
  background: #fff;
  font: inherit;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 14px;
  color: var(--wp--preset--color--contrast-2);
}
.al-search input::placeholder { color: var(--wp--preset--color--contrast-3); }
.al-search-submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 0 10px 10px 0;
  background: var(--wp--preset--color--primary-hover);
  color: #fff;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--wp--custom--transition--fast);
}
.al-search-submit:hover { background: var(--wp--preset--color--footer); }
.al-search-submit span { white-space: nowrap; }
.al-search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  box-shadow: var(--wp--preset--shadow--lg, 0 20px 40px rgba(14, 26, 18, 0.18));
  overflow: hidden;
  z-index: 60;
}
.al-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--wp--preset--color--contrast-2);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.al-search-row:last-child { border-bottom: 0; }
.al-search-row:hover { background: var(--wp--preset--color--tile); }
.al-search-row img,
.al-search-noimg {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--wp--preset--color--tile);
  object-fit: contain;
  flex-shrink: 0;
}
.al-search-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.al-search-row-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-search-row-meta {
  font-size: 11.5px;
  color: var(--wp--preset--color--contrast-3);
}
.al-search-row-price {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
  white-space: nowrap;
  flex-shrink: 0;
}
.al-search-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--wp--preset--color--contrast-3);
  text-align: center;
}

.al-actions { display: flex; align-items: center; gap: 22px; }
.al-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.al-action:hover { color: var(--wp--preset--color--accent); }
.al-action svg { display: none; } /* desktop: text only, icon reserved for the mobile compact layout */
.al-cart { font-weight: 600; }
.al-cart-count {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--accent);
  color: #1A1408;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
}

/* Cart hover preview — desktop only (min-width:1000px, mirrors the
   max-width:999px mobile breakpoint below). On mobile .al-cart-wrap has no
   hover state at all, so the panel stays hidden and the cart icon just
   navigates to the cart page, same as before this existed. */
.al-cart-wrap { position: relative; display: inline-flex; align-items: center; }
.al-cart-preview { display: none; }
@media (min-width: 1000px) {
  .al-cart-wrap:hover .al-cart-preview,
  .al-cart-wrap:focus-within .al-cart-preview {
    display: block;
  }
}
.al-cart-preview,
.al-cart-preview * {
  box-sizing: border-box; /* defensive: guarantees padding/border never push
    this component wider than its own width, whatever the parent theme's
    global reset does or doesn't cover */
}
.al-cart-preview {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 320px;
  max-width: 90vw;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  box-shadow: var(--wp--preset--shadow--lg, 0 20px 40px rgba(14, 26, 18, 0.18));
  padding: 16px;
  z-index: 60;
  /* bridges the gap to the trigger so the pointer can travel from the
     cart link down into the panel without the hover breaking */
}
.al-cart-preview::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.al-cart-preview .woocommerce-mini-cart {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden; /* explicit: setting only overflow-y otherwise computes
    overflow-x to auto too (CSS Overflow spec), which is what was letting a
    horizontal scrollbar appear on the slightest child overflow */
}
.al-cart-preview .woocommerce-mini-cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  margin: 0 0 4px;
  border-radius: 10px;
  position: relative;
  transition: background-color 0.15s ease;
}
.al-cart-preview .woocommerce-mini-cart-item:last-child { margin-bottom: 0; }
.al-cart-preview .woocommerce-mini-cart-item:hover {
  background: var(--wp--preset--color--tile, rgba(0, 0, 0, 0.03));
}
.al-cart-preview .woocommerce-mini-cart-item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid var(--wp--preset--color--border);
}
.al-cart-preview .ct-media-container {
  /* Blocksy's own [class*="ct-media-container"]/.ct-media-container rules
     set width:100% globally (meant for its grid-based list-widget layout).
     As a flex item here that "100%" becomes this item's size demand, which
     claims the entire row and crushes .product-data — the actual cause of
     titles/prices disappearing while the image kept showing. Pin it to the
     image's own size instead of letting it fight .product-data for space. */
  width: 56px !important;
  flex: 0 0 auto !important;
}
.al-cart-preview .product-data { min-width: 0; flex: 1; }
.al-cart-preview .product-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #00551C !important; /* hardcoded, not var(--wp--preset--color--contrast):
    .al-header a { color: inherit } was winning somewhere in this cascade and
    the panel was inheriting the header's white text on its own white
    background — !important guarantees this floating panel is never at the
    mercy of the header's text-color context again, whatever else changes there */
  text-decoration: none;
  margin-bottom: 3px;
}
.al-cart-preview .product-title:hover { color: #124525 !important; }
.al-cart-preview .quantity {
  display: block;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 12px;
  color: #6B7280 !important;
  white-space: nowrap;
}
.al-cart-preview .quantity .woocommerce-Price-amount {
  color: var(--wp--preset--color--primary);
  font-weight: 700;
}
/* Variation attributes (Color / Storage / Condition) inherit the header's
   white text onto the panel's white background — invisible. Same hardcoded
   dark treatment as the rest of the panel (see .product-title above). */
.al-cart-preview dl.variation,
.al-cart-preview dl.variation dt,
.al-cart-preview dl.variation dd,
.al-cart-preview dl.variation p,
.al-cart-preview div.variation,
.al-cart-preview div.variation span {
  color: #4B5563 !important;
}
.al-cart-preview dl.variation dt,
.al-cart-preview div.variation .variation-label {
  font-weight: 600;
}

/* Quantity +/- stepper — replaces the plain "1 × R123.00" text via the
   woocommerce_widget_cart_item_quantity filter in inc/woo-cart-quantity.php. */
.al-cart-preview .al-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.al-cart-preview .al-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
.al-cart-preview .al-qty-btn {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  color: #111827 !important;
  padding: 0;
  transition: background-color 0.15s ease;
}
.al-cart-preview .al-qty-btn:hover:not(:disabled) {
  background: var(--wp--preset--color--tile, #F1F5F3);
}
.al-cart-preview .al-qty-btn:disabled {
  color: #9CA3AF !important; /* disabled but still visible: #D1D5DB on white
    falls below readable contrast and reads as missing/white-on-white */
  cursor: not-allowed;
}
.al-cart-preview .al-qty-value {
  min-width: 16px;
  text-align: center;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 12px;
  font-weight: 600;
  color: #111827 !important;
}
.al-cart-preview .al-qty-price {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 12px;
  font-weight: 700;
  color: #00551C !important;
  white-space: nowrap;
}
.al-cart-preview .remove_from_cart_button {
  flex-shrink: 0;
  align-self: flex-start;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #6B7280 !important;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.al-cart-preview .woocommerce-mini-cart-item:hover .remove_from_cart_button,
.al-cart-preview .remove_from_cart_button:focus-visible {
  opacity: 1;
}
.al-cart-preview .remove_from_cart_button:hover {
  background: #fde5e5;
  color: #c0392b !important;
}
.al-cart-preview .remove_from_cart_button svg { width: 10px; height: 10px; fill: currentColor; }
.al-cart-preview .woocommerce-mini-cart__empty-message,
.al-cart-preview .cart-empty {
  margin: 0 0 12px;
  font-size: 13px;
  color: #6B7280 !important;
  text-align: center;
  padding: 8px 0;
  list-style: none;
}
/* Empty preview: Woo renders the message as a .woocommerce-info notice
   (grey box + absolutely-positioned icon that lands displaced inside this
   small panel). Flatten it into a simple centered message + full-width
   button instead. */
.al-cart-preview .cart-empty.woocommerce-info {
  background: transparent;
  border: none;
  padding: 16px 8px 4px;
}
.al-cart-preview .cart-empty.woocommerce-info::before {
  display: none;
}
.al-cart-preview .woocommerce-notices-wrapper:empty { display: none; }
.al-cart-preview .return-to-shop { margin: 0; text-align: center; padding-bottom: 4px; }
.al-cart-preview .return-to-shop .button {
  display: block;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.al-cart-preview .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--al-line, var(--wp--preset--color--border));
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 14px;
  font-weight: 600;
  color: #111827 !important;
}
.al-cart-preview .woocommerce-mini-cart__total .woocommerce-Price-amount {
  color: var(--wp--preset--color--primary);
  font-size: 16px;
}
.al-cart-preview .woocommerce-mini-cart__buttons {
  display: flex;
  gap: 8px;
  margin: 0;
}
.al-cart-preview .woocommerce-mini-cart__buttons .button {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.al-cart-preview .woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: var(--wp--preset--color--tile, transparent);
  color: #111827 !important;
  border: 1px solid var(--wp--preset--color--border);
}
.al-cart-preview .woocommerce-mini-cart__buttons .button.checkout {
  background: var(--wp--preset--color--primary);
  color: #fff;
}

.al-burger { display: none; cursor: pointer; }
.al-nav-close,
.al-nav-backdrop { display: none; }

/* category nav row — pill/chip tabs, active state via WP's current-menu-item */
.al-header-nav {
  background: var(--wp--preset--color--primary);
  color: #fff;
  border-top: 1px solid var(--al-line);
}
.al-header-nav .al-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* 11 categories no longer fit one line at typical desktop widths — wrap to
   a second line instead of scrolling, so nothing needs discovering by
   scroll (an earlier version of this row scrolled horizontally instead;
   that hid trailing items with no visual hint there was more). */
.al-header-nav .al-nav-menu {
  flex-wrap: wrap;
  row-gap: 10px;
}
.al-nav-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 13px;
  color: var(--wp--preset--color--accent);
  flex-shrink: 0;
}
.al-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 26px;
}
.al-nav-menu a {
  display: block;
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  padding: 5px 0;
  white-space: nowrap;
  transition: color var(--wp--custom--transition--fast);
}
.al-header-nav .al-nav-menu li { flex-shrink: 0; }
.al-nav-menu a:hover { color: var(--wp--preset--color--accent); }
.al-nav-menu .current-menu-item > a,
.al-nav-menu .current-menu-item > a:hover {
  color: var(--wp--preset--color--accent);
}
.al-nav-toggle { display: none; }

/* Subcategory submenus — hidden by default everywhere; desktop reveals via
   hover/focus below, mobile via the JS-injected .al-nav-expand button
   (see the max-width:999px block and assets/js/header.js). */
.al-nav-menu .sub-menu { display: none; list-style: none; margin: 0; padding: 0; }
.al-nav-expand { display: none; } /* mobile-only button, injected by JS */

/* Desktop dropdown. Positioned via JS-computed coordinates (position:fixed)
   rather than plain position:absolute — harmless now that the row wraps
   instead of scrolling, but kept: it's still correct regardless of how the
   row itself overflows, and doesn't assume that never changes again. CSS
   still owns *whether* it's visible (:hover/:focus-within), so this still
   degrades reasonably without JS — just anchored to the wrong spot. */
@media (min-width: 1000px) {
  .al-nav-menu li.menu-item-has-children { position: relative; }
  .al-nav-menu li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-start: 6px;
    margin-bottom: 2px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.75;
  }
  .al-nav-menu li.menu-item-has-children:hover > .sub-menu,
  .al-nav-menu li.menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }
  .al-nav-menu .sub-menu {
    position: fixed;
    min-width: 200px;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 10px;
    box-shadow: var(--wp--preset--shadow--md);
    padding: 6px;
    z-index: 60;
  }
  .al-nav-menu .sub-menu a {
    color: var(--wp--preset--color--contrast-2);
    padding: 9px 12px;
    border-radius: 6px;
    white-space: nowrap;
  }
  .al-nav-menu .sub-menu a:hover {
    color: var(--wp--preset--color--primary);
    background: var(--wp--preset--color--tile);
  }
}

/* responsive — compact top row: burger+track (left) / logo (true center) / account+cart icons (right).
   Burger and Track Order share one grid area (.al-left-icons, a flex row)
   so the "brand" column holds only the logo — with equal 1fr tracks on
   both sides, the logo lands at the row's true center regardless of how
   wide either icon group is, rather than just centered within a shared
   cell next to Track Order. */
@media (max-width: 999px) {
  .al-header-main .al-wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "left brand actions" "search search search";
    align-items: center;
    gap: 12px 16px;
  }
  .al-left-icons { grid-area: left; display: flex; align-items: center; gap: 14px; justify-self: start; }
  .al-burger { display: inline-flex; }
  .al-brand { grid-area: brand; justify-self: center; }
  .al-search { grid-area: search; max-width: none; }
  .al-actions { grid-area: actions; justify-self: end; gap: 16px; }
  .al-action-label { display: none; } /* icon-only on mobile */
  .al-action svg { display: block; }

  /* Off-canvas category drawer, sliding in from the left — a dimmed
     backdrop plus the drawer itself, both pure CSS: the checkbox toggle is
     a preceding sibling of .al-header, so :checked ~ reaches them without
     JS. Closes via the backdrop, the in-drawer close button, or re-tapping
     the burger — all three are <label for="al-nav-toggle">, which the
     browser already toggles the checkbox for. */
  .al-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 13, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 9998;
  }
  /* .al-nav-backdrop lives inside .al-header (right before .al-header-nav),
     not as a direct sibling of the checkbox — go through .al-header first,
     same as the drawer's own selector below. */
  .al-nav-toggle:checked ~ .al-header .al-nav-backdrop { opacity: 1; pointer-events: auto; }

  .al-header-nav {
    display: block;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(82vw, 320px);
    border-top: none;
    box-shadow: 12px 0 32px rgba(14, 26, 18, 0.25);
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .al-nav-toggle:checked ~ .al-header .al-header-nav { transform: translateX(0); }
  @media (prefers-reduced-motion: reduce) {
    .al-header-nav, .al-nav-backdrop { transition: none; }
  }

  .al-header-nav .al-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-width: none;
    padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
  }
  .al-nav-close {
    align-self: flex-end;
    display: inline-flex;
    padding: 6px;
    margin: -6px -6px 10px 0;
    cursor: pointer;
  }
  .al-nav-all { padding: 10px 0; border-bottom: 1px solid var(--al-line); margin-bottom: 4px; }
  .al-nav-menu {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    overflow-x: visible;
  }
  .al-header-nav .al-nav-menu li { flex-shrink: 1; }
  .al-nav-menu a { padding: 13px 4px; border-bottom: 1px solid var(--al-line); }

  /* Category rows with subcategories: link + expand button share a row,
     the submenu wraps onto its own full-width row underneath when open.
     The <li> needing flex-wrap (rather than a second child row via normal
     flow) is what lets the link keep its own bottom border spanning only
     the top row, not the expanded content below it. */
  .al-nav-menu li.menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .al-nav-menu li.menu-item-has-children > a { flex: 1 1 auto; border-bottom: 0; }
  .al-nav-menu li.menu-item-has-children { border-bottom: 1px solid var(--al-line); }

  .al-nav-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-inline-start: auto;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
  }
  .al-nav-expand svg { transition: transform 0.2s ease; }
  .al-nav-menu li.is-expanded > .al-nav-expand svg { transform: rotate(180deg); }

  .al-nav-menu .sub-menu {
    flex: 1 1 100%;
    padding: 2px 0 10px 14px;
  }
  .al-nav-menu li.is-expanded > .sub-menu { display: block; }
  .al-nav-menu .sub-menu a {
    padding: 10px 4px;
    font-size: 12.5px;
    font-weight: 500;
    border-bottom: 0;
    opacity: 0.85;
  }
}

/* =========================================================================
   Site footer
   ========================================================================= */
.al-footer {
  background: var(--wp--preset--color--footer);
  color: #AEBBB1;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 13px;
}
.al-footer .al-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--wp--preset--spacing--lg);
  padding-right: var(--wp--preset--spacing--lg);
}
.al-footer a { color: inherit; text-decoration: none; }
.al-footer a:hover { color: #fff; }

.al-foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--wp--preset--spacing--2-xl);
  padding-top: 38px;
  padding-bottom: var(--wp--preset--spacing--2-xl);
}
.al-foot-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--sm);
  max-width: 300px;
}
.al-foot-brand-link { display: inline-flex; }
.al-foot-logo {
  align-self: flex-start;
  flex: none;
  height: 46px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: var(--wp--preset--spacing--xs);
}
.al-foot-logo-text { font-family: var(--wp--preset--font-family--outfit); font-weight: 700; font-size: 18px; color: #fff; }
.al-foot-brand p { margin: 0; line-height: 1.6; }
.al-foot-social {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: var(--wp--preset--spacing--sm);
}
.al-foot-social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 9px;
  color: var(--wp--preset--color--accent);
  transition: background var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}
.al-foot-social a:hover {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--footer);
}

.al-foot-h {
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: 0;
  text-transform: none;
}
.al-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.al-foot-bar { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.al-foot-bar .al-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 12px;
  color: #8A968C;
}
.al-foot-pay { display: flex; align-items: center; gap: 8px; }
.al-foot-pay-label { font-size: 11px; }
.al-pay {
  height: 24px;
  min-width: 40px;
  padding: 0 8px;
  background: #fff;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.03em;
}
.al-pay--mc { gap: 0; }
.al-pay--mc i { width: 13px; height: 13px; border-radius: 999px; display: block; }
.al-pay--mc i + i { margin-left: -5px; }
.al-pay--yoco img { height: 14px; width: auto; display: block; }

@media (max-width: 899px) {
  .al-foot-grid { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--xl); }
  .al-foot-brand { grid-column: 1 / -1; max-width: none; }
  /* Mobile footer: the Shop column (duplicated by the department nav and
     the "All products" link) is dropped so Help + Company sit side by side
     instead of three stacked blocks. */
  .al-foot-grid > .al-foot-col--footer_shop { display: none; }
  .al-foot-bar .al-wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 599px) {
  .al-foot-grid { padding-top: var(--wp--preset--spacing--lg); padding-bottom: var(--wp--preset--spacing--lg); }
}

/* =========================================================================
   Single product page  (works with Blocksy's .product-entry-wrapper flex)
   ========================================================================= */

/* Blocksy's default page-title block above the product (breadcrumb only,
   here) carries blog-post-sized spacing: 60px of container padding above
   it, then another 40px margin below it — ~100px of empty space before any
   actual product content. Tighten both, scoped to single-product only so
   blog/page spacing elsewhere is untouched. */
.single-product .ct-container-full[data-vertical-spacing] {
  padding-top: 18px;
}
.single-product .hero-section[data-type="type-1"] {
  margin-bottom: 4px;
}

/* --- gallery: keep it a sensible size, sitting on screen -------------- */
.single-product .product-entry-wrapper {
  --product-gallery-width: 400px;
  gap: 0;
  align-items: flex-start;
}
.single-product .woocommerce-product-gallery { margin-bottom: 0; }
.single-product .woocommerce-product-gallery .flexy-view .ct-media-container {
  background: var(--wp--preset--color--tile);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.single-product .woocommerce-product-gallery .flexy-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  mix-blend-mode: multiply;
}
/* vertical thumbnail rail (Blocksy "thumbs left") */
.single-product .woocommerce-product-gallery .flexy-pills {
  overflow-y: auto;
  scrollbar-width: thin;
}
.single-product .woocommerce-product-gallery .flexy-pills li .ct-media-container {
  border-radius: 10px;
  border: 1px solid var(--wp--preset--color--border);
}
.single-product .woocommerce-product-gallery .flexy-pills li img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.single-product .woocommerce-product-gallery .flexy-pills li.active .ct-media-container::after {
  border-color: var(--wp--preset--color--primary) !important;
}

/* --- summary --------------------------------------------------------- */
.single-product .summary.entry-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.single-product .entry-summary-items > * { margin-bottom: 0; }
.al-product-eyebrow {
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--sage);
  margin: 0;
}
.single-product .summary .product_title {
  font-size: var(--wp--preset--font-size--2-xl);
  margin: 0;
}
.single-product .summary .woocommerce-product-rating { margin: 2px 0 0; }
.single-product .summary .price {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
  margin: 6px 0 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.single-product .summary .price del {
  font-size: 16px;
  color: var(--wp--preset--color--contrast-3);
  opacity: 1;
}
.single-product .summary .price ins { text-decoration: none; }
.al-product-save {
  align-self: flex-start;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--wp--preset--color--sale);
  padding: 4px 9px;
  border-radius: 999px;
  margin-top: -2px;
}
.al-product-save .woocommerce-Price-amount { font-family: inherit; font-weight: inherit; }
.single-product .summary .woocommerce-product-details__short-description {
  color: var(--wp--preset--color--contrast-3);
  line-height: 1.65;
  margin: 4px 0 0;
}
.single-product .summary form.cart { margin: 8px 0 0; }
.single-product .summary form.cart .ct-cart-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.single-product .summary form.cart .quantity {
  flex: none;
}
.single-product .summary form.cart .quantity input.qty {
  height: 46px;
  width: 84px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  background: var(--wp--preset--color--surface);
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-weight: 600;
}
.single-product .summary form.cart .single_add_to_cart_button {
  flex: 1;
  min-height: 46px;
  font-size: 15px;
  border-radius: 10px;
}
.single-product .summary .product_meta {
  font-size: 12.5px;
  color: var(--wp--preset--color--contrast-3);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--wp--preset--color--border);
}

/* --- variation swatches: colour chips + one-click storage pills -------
   WooCommerce's own <select> stays in the DOM (variation-swatches.js reads
   and writes it directly) but is hidden here — the swatches below are the
   only control a shopper actually sees or clicks. -------------------- */
.single-product table.variations {
  width: 100%;
  border: 0;
  margin: 0 0 4px;
}
.single-product table.variations tr { display: block; }
.single-product table.variations tr + tr { margin-top: 8px; }
.single-product table.variations th.label {
  display: block;
  text-align: left;
  padding: 0 0 4px;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--contrast-2);
}
.single-product table.variations td.value {
  padding: 0;
  display: block;
}
.single-product table.variations td.value select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.single-product table.variations .reset_variations {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--wp--preset--color--contrast-3);
  text-decoration: underline;
}

/* variation-swatches.js writes the resolved price straight into the top
   .price above the swatches instead — WooCommerce's own copy here would
   just repeat it a second time, further down the page. */
.single-product .woocommerce-variation-price { display: none; }

.al-swatches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.al-swatch {
  cursor: pointer;
  background: none;
  border: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}
.al-swatch--disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

/* colour chips: a small ringed dot with its name underneath, so the swatch
   stays compact (no fixed button box inflating row height) while still
   showing the real colour at a glance. */
.al-swatch--color {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 2px;
}
.al-swatch--color .al-swatch-dot {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--al-swatch-color);
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(14, 26, 18, 0.12);
  transition: inherit;
}
/* Full finish names, wrapped rather than truncated — "Midnight Green" and
   "Natural Titanium" are the actual product names and an ellipsis makes
   two finishes on the same model indistinguishable ("Black Tit…" /
   "Blue Tit…"). */
.al-swatch--color .al-swatch-label {
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 10px;
  font-weight: 600;
  color: var(--wp--preset--color--contrast-3);
  line-height: 1.15;
  width: 64px;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
.al-swatch--color:hover:not(.al-swatch--disabled) .al-swatch-dot { border-color: var(--wp--preset--color--contrast-3); }
.al-swatch--color.al-swatch--active .al-swatch-dot {
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}
.al-swatch--color.al-swatch--active .al-swatch-label { color: var(--wp--preset--color--primary); }

/* storage (and any other non-colour attribute): one-click text pills */
.al-swatch--pill {
  min-width: 56px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
}
.al-swatch--pill:hover:not(.al-swatch--disabled) { border-color: var(--wp--preset--color--contrast-3); }
.al-swatch--pill.al-swatch--active {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

/* trust card */
.al-product-trust {
  list-style: none;
  margin: 8px 0 0;
  padding: 12px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.al-product-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--wp--preset--color--contrast-2);
}
.al-product-trust svg { color: var(--wp--preset--color--primary); flex: none; }

/* --- tabs ----------------------------------------------------------- */
.single-product .woocommerce-tabs {
  margin-top: var(--wp--preset--spacing--3-xl);
}
.single-product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 28px;
  padding: 0;
  margin: 0 0 var(--wp--preset--spacing--lg);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
  display: none;
}
.single-product .woocommerce-tabs ul.tabs li {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.single-product .woocommerce-tabs ul.tabs li a {
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--wp--preset--color--contrast-3);
  padding: 0 0 14px;
  display: block;
}
.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--wp--preset--color--primary);
  box-shadow: inset 0 -2px 0 var(--wp--preset--color--primary);
}
.single-product .woocommerce-tabs .panel {
  color: var(--wp--preset--color--contrast-2);
  line-height: 1.7;
}
.single-product .woocommerce-tabs .panel > h2:first-child { display: none; }

/* Read more / Read less — assets/js/read-more.js only adds these classes
   when the description actually overflows the clamp height. */
.single-product .woocommerce-tabs #tab-description.al-desc-clamped {
  position: relative;
  max-height: var(--al-desc-clamp, 340px);
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.single-product .woocommerce-tabs #tab-description.al-desc-clamped::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(to bottom, transparent, var(--wp--preset--color--surface));
  pointer-events: none;
}
.single-product .woocommerce-tabs #tab-description.al-desc-clamped.is-expanded {
  max-height: none;
}
.single-product .woocommerce-tabs #tab-description.al-desc-clamped.is-expanded::after {
  display: none;
}
.al-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--wp--preset--color--primary);
}
.al-desc-toggle:hover { color: var(--wp--preset--color--primary-hover); }

.single-product .related.products,
.single-product .up-sells.products {
  margin-top: var(--wp--preset--spacing--3-xl);
  clear: both;
}
.single-product .related.products > h2,
.single-product .up-sells.products > h2 {
  font-size: var(--wp--preset--font-size--xl);
  margin-bottom: var(--wp--preset--spacing--lg);
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 999px) {
  .single-product .product-entry-wrapper { display: block !important; }
  .single-product .woocommerce-product-gallery,
  .single-product .summary.entry-summary { width: 100% !important; margin: 0 0 10px !important; max-width: 480px; }
  .al-product-trust { grid-template-columns: 1fr; }

  /* The short description isn't part of the "can I buy this" glance (image,
     price, colour, storage, add to cart) — WooCommerce renders it before
     the variations form by default, which pushes that whole critical path
     further down the screen than it needs to be on a phone. Moving only
     this one item to the end (everything else keeps its natural order,
     since flex only reorders items that differ) gets it out of the way
     without touching desktop, where there's room for it either way. */
  .single-product .summary .woocommerce-product-details__short-description {
    order: 5;
  }
}

/* Phones specifically: the gallery at up to 480px square eats most of the
   viewport height before price/colour/storage/add-to-cart even start.
   Shrinking it to a still-recognisable size is what actually gets the full
   "can I buy this" path on screen without scrolling. */
@media (max-width: 599px) {
  .single-product .woocommerce-product-gallery {
    max-width: 190px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Redundant with the title itself ("Apple iPhone …") right below it —
     worth the row it takes on desktop, not worth it fighting for space
     above the fold on a phone. */
  .single-product .al-product-eyebrow {
    display: none;
  }
}

/* =========================================================================
   Classic loop cards — archives, related, up-sells: the borderless card
   ========================================================================= */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
/* Card: a gold-ruled panel with the image running edge to edge into the
   border. The card clips its own corners, so the image needs no radius of
   its own — it inherits the card's, top corners included. */
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--wp--preset--color--primary);
  box-shadow: var(--wp--preset--shadow--lg);
}
/* Blocksy does not render the classic WooCommerce loop: the thumbnail sits
   in `<figure><a class="ct-media-container">`, and `.woocommerce-LoopProduct-link`
   is the TITLE link inside the <h2>, not the image wrapper. Target the real
   structure — styling the image via the loop link insets the <figure> and
   leaves the photo floating in a tile-coloured margin. */
/* The <figure> owns the square, not Blocksy's ::before spacer — that spacer
   sizes itself off the container's width, and once this card started
   overriding the container it produced a box hundreds of pixels tall with
   the photo zoomed to fill it. Fixing the ratio here and switching the
   spacer off keeps the box deterministic. */
.woocommerce ul.products li.product > figure {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 10px;
  padding: 0;
  overflow: hidden;
  /* White, not the tile grey: product images are transparent-padded PNGs
     (al_normalise() pads onto a transparent canvas), so whatever sits
     behind shows through. Against grey, the packshot's own white background
     read as a small photo floating in a grey frame. */
  background: #fff;
}
.woocommerce ul.products li.product > figure .ct-media-container {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.woocommerce ul.products li.product > figure .ct-media-container::before {
  display: none;
}
/* Blocksy writes `style="aspect-ratio: 4/3"` straight onto the <img>, which
   no stylesheet rule can outrank — hence !important rather than specificity.
   `contain` rather than `cover`: the canvas is already square and padded, so
   the two render identically here, but contain can never crop a handset if
   a future image arrives at a different ratio. */
.woocommerce ul.products li.product > figure img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Each packshot carries its own white margin and al_normalise() pads a
     further ~10% on top, so the handset lands small inside an otherwise
     full box. Scale it up to use the space; the figure clips, and the
     source padding means nothing reaches an edge at this factor. */
  transform: scale(1.18);
}
/* Everything below the image is inset from the border; the image is not.
   The condition pill keeps its own padding (that padding is the pill), so
   it takes the inset as margin instead. */
.woocommerce ul.products li.product > *:not(figure):not(.button):not(.added_to_cart):not(.al-condition) {
  padding-inline: 12px;
}
.woocommerce ul.products li.product .al-condition {
  align-self: flex-start;
  margin: 0 12px 6px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: var(--wp--preset--color--contrast);
  padding: 0;
  margin: 0 0 4px;
}
.woocommerce ul.products li.product .price {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
  margin-bottom: var(--wp--preset--spacing--sm);
}
/* Sequence the card explicitly. Blocksy redirects
   `woocommerce_after_shop_loop_item_title` into its own card-layout hook and
   renders the price from there, so PHP priority can't order our additions
   against it — without this the colour dots and stock line land above the
   price. The card is a flex column, so order does it deterministically. */
.woocommerce ul.products li.product > figure { order: 1; }
.woocommerce ul.products li.product .al-condition { order: 2; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { order: 3; }
.woocommerce ul.products li.product .price { order: 4; }
.woocommerce ul.products li.product .al-card-saving { order: 5; }
.woocommerce ul.products li.product .al-card-colors { order: 6; }
.woocommerce ul.products li.product .al-card-stock { order: 7; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart { order: 8; }
/* Blocksy wraps the add-to-cart in `.ct-woo-card-actions` on some card
   layouts (search results, for one). As an unordered flex child it fell to
   order 0 and rendered above the image — it needs the same slot as a bare
   button, and owns the inset so the button inside isn't double-padded. */
.woocommerce ul.products li.product .ct-woo-card-actions {
  order: 8;
  margin-top: auto;
  padding: 0 12px 12px;
}
.woocommerce ul.products li.product .ct-woo-card-actions .button,
.woocommerce ul.products li.product .ct-woo-card-actions .added_to_cart {
  margin: 0;
  width: 100%;
}

.woocommerce ul.products li.product .price .al-price-from {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 11px;
  font-weight: 600;
  color: var(--wp--preset--color--contrast-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Blocksy's category meta row — the title already says "Apple iPhone 16",
   so a line reading "IPHONE" underneath spent a row of the card saying
   nothing. The rows below replace it with things a shopper decides on. */
.woocommerce ul.products li.product .entry-meta { display: none; }
.al-card-saving {
  align-self: flex-start;
  margin: 0 12px 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--wp--preset--color--sale);
  color: #fff;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.al-card-colors {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.al-card-color {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(14, 26, 18, 0.18);
}
.al-card-color-more {
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wp--preset--color--contrast-3);
}
.al-card-stock {
  display: block;
  margin-bottom: 8px;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.al-card-stock.is-out { color: var(--wp--preset--color--contrast-3); }
.woocommerce ul.products li.product .price del { color: var(--wp--preset--color--contrast-3); font-weight: 500; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: auto 12px 12px;
  border-radius: 10px;
  background: var(--wp--preset--color--muted);
  color: var(--wp--preset--color--primary);
}
.woocommerce ul.products li.product:hover .button { background: var(--wp--preset--color--primary); color: #fff; }
.woocommerce ul.products li.product .star-rating { display: none; }

@media (max-width: 999px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- page header: replace Blocksy's big centred hero band --------------
   Blocksy's default page-title band (.hero-section > [class*="ct-container"])
   is built for a hero image/banner: 50px vertical padding AND a 250px
   minimum height. On a plain one-line title like "Cart" or "Track My
   Order" that's a lot of empty space before any real content — worse on
   mobile, where it can eat a quarter of the viewport. The archive rules
   below already collapsed it for Shop/category pages; this collapses it
   everywhere else (Cart, Checkout, Track Order, the policy pages, and any
   future plain Page) the same way, then both get a smaller value again on
   mobile specifically. */
.hero-section {
  min-height: 0 !important;
}
.hero-section > [class*="ct-container"] {
  padding: var(--wp--preset--spacing--xl) 0 !important;
  min-height: 0 !important;
}
.archive.woocommerce .hero-section,
.tax-product_brand .hero-section,
.tax-pa_condition .hero-section {
  background: none !important;
  min-height: 0 !important;
  padding: var(--wp--preset--spacing--xl) 0 0 !important;
}
.archive.woocommerce .hero-section > *,
.tax-product_brand .hero-section > *,
.tax-pa_condition .hero-section > * { min-height: 0 !important; }
.archive.woocommerce .hero-section .entry-header,
.tax-product_brand .hero-section .entry-header,
.tax-pa_condition .hero-section .entry-header {
  text-align: left;
  align-items: flex-start;
  padding: 0;
  max-width: var(--theme-normal-container-max-width, 1290px) !important;
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--lg);
}
@media (max-width: 599px) {
  .hero-section > [class*="ct-container"] { padding: var(--wp--preset--spacing--sm) 0 !important; }
  .archive.woocommerce .hero-section,
  .tax-product_brand .hero-section,
  .tax-pa_condition .hero-section { padding: var(--wp--preset--spacing--sm) 0 0 !important; }
}
/* One page-title size everywhere a page has one (Blocksy's own default
   renders this at 30px on a plain Page template like Cart/Checkout/Track
   Order/the policy pages, but at a different size on WooCommerce archives
   — the same element, two sizes, depending only on which template it's
   on). Scoped to .page-title generally rather than per-template so a new
   page automatically matches instead of needing its own override. */
.page-title {
  font-size: var(--wp--preset--font-size--2-xl);
  margin: 0;
}
.archive.woocommerce .page-description,
.tax-product_brand .page-description,
.tax-pa_condition .page-description {
  margin-top: var(--wp--preset--spacing--sm);
  max-width: 620px;
  color: var(--wp--preset--color--contrast-3);
  font-size: 14.5px;
  line-height: 1.6;
}
.archive.woocommerce .woocommerce-breadcrumb { margin-bottom: var(--wp--preset--spacing--sm); }

/* --- archive filter sidebar (brand / condition / price) ----------------- */
.al-archive-body {
  max-width: var(--theme-normal-container-max-width, 1290px);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--lg);
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: var(--wp--preset--spacing--2-xl);
  align-items: start;
}
@media (max-width: 599px) {
  .al-archive-body { padding-inline: var(--wp--preset--spacing--sm); }
}
.al-archive-main ul.products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.al-filters {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xl);
  padding-right: var(--wp--preset--spacing--md);
  position: sticky;
  top: calc(var(--al-header-h, 150px) + var(--wp--preset--spacing--lg));
}
.al-filters-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--sm);
}
.al-filters-toggle-input,
.al-filters-trigger,
.al-filters-backdrop,
.al-filters-close { display: none; }
.al-filters-head-actions { display: flex; align-items: center; gap: 12px; }
.al-filters-head h6 {
  margin: 0;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--contrast);
}
.al-filters-clear {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.al-filters-clear:hover { color: var(--wp--preset--color--primary-hover); }
.al-filter-group h6 {
  margin: 0 0 10px;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--contrast);
}
.al-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--wp--preset--color--contrast-2);
  cursor: pointer;
}
.al-filter-row span:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}
.al-filter-row input { width: 16px; height: 16px; accent-color: var(--wp--preset--color--primary); flex-shrink: 0; }
.al-filter-count {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 12px;
  color: var(--wp--preset--color--contrast-3);
}
.al-filters-apply-row { margin-top: var(--wp--preset--spacing--md); }
.al-filters-apply {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--wp--custom--transition--fast);
}
.al-filters-apply:hover { background: var(--wp--preset--color--primary-hover); }
.al-filter-radio span:first-child { font-size: 13.5px; }

/* Below 860px the sidebar becomes a bottom-sheet drawer: a small trigger
   pill sits where the sidebar used to, right above the product grid (it's
   the first real content on the page instead of ~30 checkboxes), and the
   actual filter form slides up over everything when opened. The trigger,
   backdrop and close button are all <label for="al-filters-toggle">, so
   opening/closing is a pure CSS checkbox toggle — no JS. The one exception
   is that this specific toggle checkbox is deliberately a real, named field
   INSIDE the form (see inc/woo-archive-filters.php): when a brand/condition/
   price checkbox's onchange submits the page, the toggle's checked state
   rides along in that same GET request, so the drawer comes back open on
   the reload instead of slamming shut after every single filter tap. */
@media (max-width: 860px) {
  .al-archive-body { grid-template-columns: 1fr; }
  .al-archive-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Blocksy gives this toolbar a 25px bottom margin and keeps a 40px sort
     control in it even with the result count hidden on small screens, which
     stacked with the filter pill's margin into a conspicuous gap above the
     first row of products. */
  .al-archive-main .woo-listing-top:not(:empty) { margin-bottom: 10px; }
  .al-filters { position: static; display: block; }

  .al-filters-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    margin-bottom: 10px;
    border: 1.5px solid var(--wp--preset--color--border);
    border-radius: 999px;
    background: var(--wp--preset--color--surface);
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--wp--preset--color--contrast);
    cursor: pointer;
  }
  .al-filters-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--wp--preset--color--primary);
    color: #fff;
    font-family: var(--wp--preset--font-family--jetbrains-mono);
    font-size: 11px;
    font-weight: 700;
  }

  .al-filters-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 13, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 9998;
  }
  .al-filters:has(#al-filters-toggle:checked) .al-filters-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Only the middle (checkbox groups) scrolls — the header and the Apply
     button are flex children that don't shrink, so Apply stays reachable
     at the bottom of the sheet no matter how long the brand list is,
     instead of scrolling away with it. */
  .al-filters form {
    position: fixed;
    inset: auto 0 0 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--wp--preset--color--surface);
    border-radius: 18px 18px 0 0;
    padding: var(--wp--preset--spacing--md);
    box-shadow: 0 -12px 32px rgba(14, 26, 18, 0.25);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 9999;
  }
  .al-filters:has(#al-filters-toggle:checked) form { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .al-filters form,
    .al-filters-backdrop { transition: none; }
  }

  .al-filters-head { flex-shrink: 0; padding-bottom: var(--wp--preset--spacing--sm); border-bottom: 1px solid var(--wp--preset--color--border); }
  .al-filters-head h6 { font-size: 15px; }
  .al-filters-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--wp--preset--spacing--md);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--lg);
  }
  .al-filters-apply-row {
    flex-shrink: 0;
    margin-top: 0;
    padding-top: var(--wp--preset--spacing--md);
    border-top: 1px solid var(--wp--preset--color--border);
  }

  .al-filters-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--wp--preset--color--tile);
    color: var(--wp--preset--color--contrast);
    cursor: pointer;
  }
}

/* =========================================================================
   Homepage — modern sections
   ========================================================================= */

/* eyebrow / label pill — shrink-wrap the paragraph background */
.al-pill { display: inline-block; width: auto; }

/* hero condition chips */
.al-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  color: var(--wp--preset--color--contrast-2);
  text-decoration: none;
  transition: border-color var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}
.al-chip:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }

/* department tiles */
.al-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.al-dept {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--wp--preset--spacing--lg);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 18px;
  text-decoration: none;
  transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base);
}
@media (max-width: 599px) { .al-dept { padding: var(--wp--preset--spacing--md); } }
.al-dept:hover {
  transform: translateY(-3px);
  border-color: var(--wp--preset--color--primary-soft);
  box-shadow: var(--wp--preset--shadow--lg);
}
.al-dept-ico {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--wp--preset--color--primary-soft);
  display: grid;
  place-items: center;
}
.al-dept-name {
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  font-size: 16px;
  color: var(--wp--preset--color--contrast);
}
.al-dept-tagline {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 13px;
  line-height: 1.4;
  color: var(--wp--preset--color--contrast-3);
  margin-top: -8px;
}
.al-dept-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--wp--preset--color--contrast-3);
  margin-top: auto;
}
.al-dept:hover .al-dept-meta { color: var(--wp--preset--color--primary); }

/* brand chips */
.al-brandchip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--wp--preset--color--contrast-2);
  text-decoration: none;
  transition: border-color var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast), background var(--wp--custom--transition--fast);
}
.al-brandchip:hover {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--primary-soft);
}

/* condition explainer cards */
.al-cond-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.al-cond {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--wp--preset--spacing--lg);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 18px;
}
@media (max-width: 599px) { .al-cond { padding: var(--wp--preset--spacing--md); } }
.al-cond-tag {
  align-self: flex-start;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.al-cond p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--wp--preset--color--contrast-2);
  flex: 1;
}
.al-cond a {
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 13px;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

/* homepage FAQ accordion */
.al-faq {
  max-width: 760px;
  margin-top: 22px;
  border-top: 1px solid var(--wp--preset--color--border);
}
.al-faq-item {
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.al-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
  list-style: none;
}
.al-faq-item summary::-webkit-details-marker { display: none; }
.al-faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--wp--preset--color--primary);
  transition: transform var(--wp--custom--transition--base);
}
.al-faq-item[open] summary::after { transform: rotate(45deg); }
.al-faq-item summary:hover { color: var(--wp--preset--color--primary); }
.al-faq-answer { padding: 0 30px 20px 4px; }
.al-faq-answer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--wp--preset--color--contrast-2);
}
.al-faq-answer a { color: var(--wp--preset--color--primary); font-weight: 600; }
@media (max-width: 599px) {
  .al-faq-item summary { font-size: 14.5px; padding: 15px 4px; }
  .al-faq-answer { padding: 0 20px 16px 4px; }
}

/* review band */
.al-rev {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
}
.al-rev-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* condition badge (single product, classic loop) */
/* Small, squared chip rather than a large pill. The card already carries a
   gold rule and a red saving pill, so the old pale-gold "used" badge both
   competed with the border and blended into it — the condition is a fact
   about the stock, not a promotion, so it steps back to an outline and
   leaves colour to the things that are. */
.al-condition {
  display: inline-block;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 5px;
  border: 1px solid transparent;
}
.al-condition.is-new {
  background: var(--wp--preset--color--primary);
  color: #fff;
  border-color: var(--wp--preset--color--primary);
}
.al-condition.is-used {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast-2);
  border-color: var(--wp--preset--color--border);
}
.single-product .summary .al-condition { align-self: flex-start; }

/* condition micro-label on Product Collection cards (post-terms block) */
.wp-block-woocommerce-product-template .al-card-cond {
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin: 10px 0 0;
}
.wp-block-woocommerce-product-template .al-card-cond a { color: inherit; text-decoration: none; }

@media (max-width: 899px) {
  .al-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-cond-grid { grid-template-columns: 1fr; }
  .al-rev { grid-template-columns: 1fr; gap: 20px; }
  .al-rev-quotes { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Product cards — modern, borderless: rounded image tile + content below,
   quiet "Add" until hover
   ------------------------------------------------------------------------- */
.wp-block-woocommerce-product-template .wc-block-product {
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.wp-block-woocommerce-product-template .wc-block-product .wp-block-woocommerce-product-image {
  background: var(--wp--preset--color--tile);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: var(--wp--preset--spacing--sm);
  transition: box-shadow var(--wp--custom--transition--base), transform var(--wp--custom--transition--base);
}
.wp-block-woocommerce-product-template .wc-block-product:hover .wp-block-woocommerce-product-image {
  box-shadow: var(--wp--preset--shadow--lg);
  transform: translateY(-3px);
}
.wp-block-woocommerce-product-template .wc-block-product .wp-block-post-title {
  margin: 0 0 var(--wp--preset--spacing--2-xs);
}
.wp-block-woocommerce-product-template .wc-block-product .wp-block-post-title a {
  color: var(--wp--preset--color--contrast);
}
.wp-block-woocommerce-product-template .wc-block-product .wc-block-components-product-price {
  color: var(--wp--preset--color--contrast);
  margin-bottom: var(--wp--preset--spacing--sm);
}
.wp-block-woocommerce-product-template .wc-block-product .wc-block-components-product-price del {
  color: var(--wp--preset--color--contrast-3);
  font-weight: 500;
  margin-left: 6px;
}
.wp-block-woocommerce-product-template .wc-block-product .wp-block-woocommerce-product-button {
  margin-top: auto;
}
.wp-block-woocommerce-product-template .wc-block-product .wp-block-button__link,
.wp-block-woocommerce-product-template .wc-block-product .wc-block-components-product-button .wc-block-components-button {
  width: 100%;
  border-radius: 10px;
  background: var(--wp--preset--color--muted);
  color: var(--wp--preset--color--primary);
  transition: background var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}
.wp-block-woocommerce-product-template .wc-block-product:hover .wp-block-button__link,
.wp-block-woocommerce-product-template .wc-block-product:hover .wc-block-components-product-button .wc-block-components-button {
  background: var(--wp--preset--color--primary);
  color: #fff;
}

/* =========================================================================
   My Account — style WooCommerce's own dashboard, no template override
   ========================================================================= */
.woocommerce-account .entry-header,
.woocommerce-account .page-title { display: none; } /* our own layout carries the heading */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--wp--preset--spacing--2-xl);
  align-items: start;
  max-width: var(--theme-normal-container-max-width, 1290px);
  margin-inline: auto;
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--3-xl);
}
@media (max-width: 780px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--2-xl);
  }
}

.woocommerce-MyAccount-navigation {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg, 16px);
  padding: var(--wp--preset--spacing--sm);
  position: sticky;
  top: calc(var(--al-header-h, 150px) + var(--wp--preset--spacing--lg));
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation-link { margin: 0; }
.woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--wp--preset--color--contrast-2);
  text-decoration: none;
  transition: background var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}
.woocommerce-MyAccount-navigation-link a:hover { background: var(--wp--preset--color--tile); }
.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: var(--wp--preset--color--primary);
  color: #fff;
}
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--wp--preset--color--border); }

/* Below the sidebar breakpoint the nav sits above the account content instead
   of beside it — a vertical list of full-width rows there wastes a full
   screen of height before any account content is visible. It collapses into
   a single compact row instead, all six items visible at once with no
   scrolling: icon on top, a short label underneath (Blocksy's own "woo"
   icon font, on an ::before that already carries its own explicit
   font-size, unaffected by the smaller font-size set here for the label),
   each evenly filling the width. Labels stay small and can wrap to a
   second line rather than being cut off or forcing horizontal scroll. */
@media (max-width: 780px) {
  .woocommerce-MyAccount-navigation {
    position: sticky;
    top: calc(var(--al-header-h, 150px) + 8px);
    z-index: 5;
    padding: 6px;
  }
  .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1px;
  }
  .woocommerce-MyAccount-navigation-link { flex: 1 1 0; min-width: 0; }
  .woocommerce-MyAccount-navigation-link a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    padding: 8px 3px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .woocommerce-MyAccount-navigation-link a:before { margin-inline-end: 0 !important; }
  .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p:first-child {
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 15px;
}
.woocommerce-MyAccount-content mark.order-status,
.woocommerce-orders-table__cell-order-status mark {
  display: inline-flex;
  align-items: center;
  background: var(--wp--preset--color--primary-soft);
  color: var(--wp--preset--color--primary);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.al-dashboard-greeting {
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 20px;
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
  margin: 0 0 16px;
}
.al-dashboard-notice {
  background: var(--wp--preset--color--accent-soft);
  color: #7A5B0A;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  margin: 0 0 24px;
}
.al-dashboard-notice a { color: inherit; font-weight: 700; text-decoration: underline; margin-left: 4px; }

.al-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 32px;
}
@media (max-width: 600px) { .al-dash-stats { grid-template-columns: 1fr; } }
.al-dash-stat {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg, 16px);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.al-dash-stat-value {
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 26px;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}
.al-dash-stat-value .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }
.al-dash-stat-label { font-size: 13px; color: var(--wp--preset--color--contrast-3); }

.al-dash-orders h2 {
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--wp--preset--color--contrast);
}
.al-dash-empty { color: var(--wp--preset--color--contrast-3); font-size: 14px; }
.al-dash-empty a { color: var(--wp--preset--color--primary); font-weight: 600; margin-left: 4px; }

.al-dash-order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.al-dash-order-row:last-of-type { border-bottom: none; }
.al-dash-order-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 90px;
  flex: 1 1 100%;
}
@media (min-width: 601px) { .al-dash-order-main { flex-basis: auto; } }
.al-dash-order-number { font-weight: 700; color: var(--wp--preset--color--contrast); text-decoration: none; }
.al-dash-order-number:hover { text-decoration: underline; }
.al-dash-order-date { font-size: 12px; color: var(--wp--preset--color--contrast-3); }

.al-dash-order-status {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--wp--preset--color--accent-soft);
  color: #7A5B0A;
}
.al-dash-order-status.is-done { background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary); }
.al-dash-order-status.is-muted { background: var(--wp--preset--color--muted); color: var(--wp--preset--color--contrast-3); }

.al-dash-order-total { margin-left: auto; font-weight: 600; color: var(--wp--preset--color--contrast-2); font-size: 14px; }
.al-dash-order-action {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.al-dash-order-action:hover { background: var(--wp--preset--color--primary-hover); }

.al-dash-view-all {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}

.woocommerce-orders-table,
.woocommerce-table--order-details {
  border-collapse: collapse;
  width: 100%;
}
.woocommerce-orders-table thead th {
  text-align: left;
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--contrast-3);
  padding: 10px 12px;
  border-bottom: 2px solid var(--wp--preset--color--border);
}
.woocommerce-orders-table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-size: 14px;
}
.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount { color: var(--wp--preset--color--contrast); }

.woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--lg); }
@media (max-width: 640px) { .woocommerce-Addresses { grid-template-columns: 1fr; } }
.woocommerce-Address {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg, 16px);
  padding: var(--wp--preset--spacing--lg);
}
@media (max-width: 599px) { .woocommerce-Address { padding: var(--wp--preset--spacing--md); } }
.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.woocommerce-Address-title h2 {
  font-size: 15px;
  font-family: var(--wp--preset--font-family--outfit);
  margin: 0;
}
.woocommerce-Address-title .edit {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
.woocommerce-Address address { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--contrast-2); }

.woocommerce-MyAccount-content form .form-row label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wp--preset--color--contrast-2);
}
.woocommerce-MyAccount-content form .woocommerce-Input,
.woocommerce-MyAccount-content form input.input-text,
.woocommerce-MyAccount-content form select {
  border: 1.5px solid var(--wp--preset--color--border);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
}

/* =========================================================================
   Cart & Checkout — style WooCommerce Blocks' own DOM, no rebuild
   ========================================================================= */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  max-width: var(--theme-normal-container-max-width, 1290px);
  margin-inline: auto;
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
  font-family: var(--wp--preset--font-family--inter);
  color: var(--wp--preset--color--contrast-2);
}
@media (max-width: 599px) {
  .wp-block-woocommerce-cart,
  .wp-block-woocommerce-checkout {
    padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
  }
}
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wc-block-components-totals-item__label {
  font-family: var(--wp--preset--font-family--outfit);
}

/* Free-delivery progress banner */
.wc-block-cart__free-shipping-banner,
.wc-block-components-notice-banner.is-info {
  background: var(--wp--preset--color--primary-soft);
  border: none;
  border-radius: 12px;
  color: var(--wp--preset--color--primary);
  padding: 14px 18px;
}

/* Line items */
.wc-block-cart-items__header { display: none; } /* redundant column headers on a card layout */
.wc-block-cart-item,
.wc-block-components-order-summary-item {
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding-block: var(--wp--preset--spacing--md);
}
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  border-radius: 10px;
  background: var(--wp--preset--color--tile);
}
.wc-block-cart-item__product-name,
.wc-block-components-order-summary-item__individual-prices {
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
}
.wc-block-cart-item__remove-link {
  color: var(--wp--preset--color--contrast-3);
  text-decoration: underline;
  font-size: 12.5px;
}
.wc-block-cart-item__prices .price,
.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
}
/* Order summary line item: let the description shrink (min-width:0) instead
   of squeezing the price column (struck price + Save badge in wide
   JetBrains Mono) past the card edge on longer prices. */
.wc-block-components-order-summary-item__description { min-width: 0; }
/* Checkout summary shows the price twice per line item: the unit price
   (struck + current + Save badge) and a "Total price for N items" line
   that repeats the same number when quantity is 1. Drop the redundant
   total line — the sidebar's Subtotal/Total rows already carry the math.
   (For quantity 2+ the per-line total goes with it; unit price × the qty
   badge plus the order totals tell the same story.) */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price {
  display: none;
}
.wc-block-components-order-summary-item__individual-prices .wc-block-components-product-sale-badge,
.wc-block-components-order-summary-item__total-price .wc-block-components-product-sale-badge {
  max-width: 100%;
  white-space: normal;
}

/* WC's own cart-item grid (.wc-block-cart-items__row) is fixed-pixel:
   80px image + 132px product, with the line total auto-placed into
   whatever's left over. At mobile widths that leftover sliver isn't wide
   enough for a longer total ("R28,497.00" etc.) and it's cut off past the
   viewport edge — confirmed by measuring it: the total's right edge landed
   3px past a 390px viewport. It also duplicates the unit price shown just
   above it in the product column, which reads as two different, unlabelled
   numbers once quantity is more than 1. Reflowing the total onto its own
   full-width row below fixes both: plenty of room regardless of price
   length, and a small "Total" label removes the ambiguity instead of
   hiding either number. */
@media (max-width: 480px) {
  .wc-block-cart-items__row {
    grid-template-columns: 72px 1fr !important;
    grid-template-rows: auto auto;
    row-gap: 10px;
  }
  .wc-block-cart-item__image { grid-column: 1 !important; grid-row: 1 !important; }
  .wc-block-cart-item__product { grid-column: 2 !important; grid-row: 1 !important; }
  .wc-block-cart-item__total {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
  }
  .wc-block-cart-item__total::before {
    content: "Total";
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--contrast-3);
  }
  .wc-block-cart-item__prices { font-size: 13px; opacity: 0.75; }
}

/* Quantity stepper */
.wc-block-components-quantity-selector {
  border: 1.5px solid var(--wp--preset--color--border);
  border-radius: 8px;
  overflow: hidden;
  height: 36px;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
  border: none;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
}

/* Order summary / totals sidebar */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg, 16px);
  padding: var(--wp--preset--spacing--md);
}
.wc-block-components-totals-wrapper + .wc-block-components-totals-wrapper { border-top: none; margin-top: -4px; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-weight: 700;
  font-size: 16px;
  color: var(--wp--preset--color--contrast);
}

/* Coupon field */
.wc-block-components-totals-coupon__form .wc-block-components-text-input input,
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-address-form select {
  border: 1.5px solid var(--wp--preset--color--border) !important;
  border-radius: 9px !important;
}
.wc-block-components-totals-coupon__button {
  border: 1.5px solid var(--wp--preset--color--border);
  border-radius: 8px;
}

/* Primary CTAs (checkout / place order) */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--wp--preset--color--primary) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding-block: 13px !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--wp--preset--color--primary-hover) !important;
}

/* Checkout steps — numbered like the mockup */
.wc-block-checkout__main .wc-block-components-checkout-step {
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding-bottom: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--md);
}
.wc-block-checkout__main .wc-block-components-checkout-step:last-child { border-bottom: none; }
.wc-block-components-checkout-step__title {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wc-block-components-checkout-step__title::before {
  content: counter(al-step);
  counter-increment: al-step;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wc-block-checkout__main { counter-reset: al-step; }

/* Radio option cards (shipping / payment).
   Woo positions the radio input absolutely at left:16px inside the option,
   and its own base rule clears it with 48px of left padding. Keep the
   theme's tighter vertical rhythm but restore that left clearance —
   without it the circle sits on top of the option label text. */
.wc-block-components-radio-control__option {
  border: 1.5px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 12px 16px 12px 48px;
  margin-bottom: 8px;
}
.wc-block-components-radio-control__option[aria-checked="true"],
.wc-block-checkout__payment-method .wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked {
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--primary-soft);
}
/* Checked PAYMENT card mirrors the shipping rows instead: white card +
   green ring, no tint fill. (The tint lived on the option row while the
   ring belongs to the accordion wrapper, each with its own corner curve,
   so the tint's corners visibly crossed the ring. No tint, no fight.) */
.wc-block-checkout__payment-method .wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked {
  background: transparent;
}

/* Yoco payment method: the gateway ships a 24px-tall logo inside a ~20px
   label row, so it rode over the card's top/bottom borders. Keep it plain
   like every other option row — small mark, right-aligned exactly where a
   shipping price sits, nothing extra touching the card border. */
.wc-block-checkout__payment-method .wc-block-components-radio-control__label > span {
  gap: 12px;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__label img {
  max-height: 20px !important; /* beats the plugin's inline 24px */
  width: auto;
  flex-shrink: 0;
}
/* Checked payment card: Woo splits it into an option row + a plain
   description box inside a bordered accordion wrapper. One 12px curve for
   the whole card, matching the other option cards. (Beats Woo's own
   4px-radius highlight rule on specificity.) */
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option {
  border-radius: 12px;
  overflow: hidden;
}

/* Below 782px the Cart block switches "Proceed to Checkout" to
   position:fixed, pinned to the bottom of the viewport (WC core's own
   cart-block CSS, .wc-block-cart__submit-container--sticky) — but its
   in-flow placeholder collapses to zero height, so nothing reserves room
   for it: the last totals row (Estimated total) sits right where the fixed
   bar covers it. Reserve space for the bar's real height (~51px button +
   32px padding) at the bottom of the totals card instead. WC Blocks' own
   layout reset (.wc-block-components-sidebar-layout .wc-block-components-
   sidebar{padding:0}) matches this element too at equal specificity and
   loads first, so it wins the padding shorthand outright without !important
   here — this needs both the matching specificity and the override. */
@media (max-width: 782px) {
  .wc-block-components-sidebar-layout .wc-block-cart__sidebar {
    padding-bottom: 96px !important;
  }
}

/* =========================================================================
   Track My Order page (woocommerce/order/form-tracking.php + tracking.php)
   Lives outside .al-header, so none of the header-context color overrides
   used elsewhere on this site apply here — plain var(--wp--preset--*) is
   safe to use directly.
   ========================================================================= */
.al-track-order-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 16px 40px;
}
@media (max-width: 599px) {
  .al-track-order-page { padding: 16px 16px 32px; }
}
.al-track-order-title {
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--wp--preset--color--contrast);
}
.al-track-order-intro {
  color: var(--wp--preset--color--contrast-3);
  margin: 0 0 24px;
}
.al-track-order-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 20px;
}
@media (max-width: 600px) {
  .al-track-order-fields { grid-template-columns: 1fr; }
}
.al-track-order-field { margin: 0; }
.al-track-order-field label {
  display: block;
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--wp--preset--color--contrast);
}
.al-track-order-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.al-track-order-submit-row { margin: 0; }
.al-track-order-submit {
  padding: 12px 26px;
  border: none;
  border-radius: 8px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.al-track-order-submit:hover { background: var(--wp--preset--color--primary-hover); }

.al-track-order-status {
  background: var(--wp--preset--color--tile);
  border-radius: 10px;
  padding: 16px;
  margin: 0 0 24px;
  color: var(--wp--preset--color--contrast-2);
}
.al-track-order-status .order-number,
.al-track-order-status .order-date,
.al-track-order-status .order-status {
  background: none;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}

.al-order-progress {
  display: flex;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.al-order-progress-step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.al-order-progress-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--wp--preset--color--border);
  z-index: 0;
}
.al-order-progress-step.is-done:not(:first-child)::before,
.al-order-progress-step.is-current:not(:first-child)::before {
  background: var(--wp--preset--color--primary);
}
.al-order-progress-dot {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 13px;
  font-weight: 700;
  background: var(--wp--preset--color--surface);
  border: 2px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--contrast-3);
}
.al-order-progress-step.is-done .al-order-progress-dot {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}
.al-order-progress-step.is-current .al-order-progress-dot {
  background: #fff;
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 4px var(--wp--preset--color--primary-soft);
}
.al-order-progress-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--contrast-3);
  text-align: center;
}
.al-order-progress-step.is-done .al-order-progress-label,
.al-order-progress-step.is-current .al-order-progress-label {
  color: var(--wp--preset--color--contrast);
}
@media (max-width: 460px) {
  .al-order-progress-label { font-size: 11px; }
}

.al-order-progress-terminal {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--wp--preset--color--muted);
  color: var(--wp--preset--color--contrast-2);
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 24px;
}

.al-shipment-tracking { margin: 0 0 32px; }
.al-shipment-tracking h2 {
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--wp--preset--color--contrast);
}
.al-shipment-card {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 16px;
}
.al-shipment-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 8px;
}
.al-shipment-courier {
  display: block;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}
.al-shipment-tracking-no {
  display: block;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 13px;
  color: var(--wp--preset--color--contrast-3);
}
.al-shipment-tracking-no a {
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
}
.al-shipment-status {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--wp--preset--color--accent-soft);
  color: #7A5B0A;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.al-shipment-eta {
  font-size: 13px;
  color: var(--wp--preset--color--contrast-3);
  margin: 0 0 4px;
}
.al-shipment-timeline {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--wp--preset--color--border);
}
.al-shipment-event {
  position: relative;
  padding: 0 0 14px 16px;
}
.al-shipment-event::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--wp--preset--color--primary);
}
.al-shipment-event:last-child { padding-bottom: 0; }
.al-shipment-event-time {
  display: block;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 12px;
  color: var(--wp--preset--color--contrast-3);
}
.al-shipment-event-message { font-size: 14px; color: var(--wp--preset--color--contrast-2); }
.al-shipment-event-location { color: var(--wp--preset--color--contrast-3); }