/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.5
Description: Child theme for Hello Elementor - Custom Postal Boxes.
             Product/category grid styled to lead with "fully custom,
             made to your exact spec" positioning for UK business
             buyers: bespoke corner tag, hover "tailored to your spec"
             prompt, "From" price framing, a manual badge class for
             per-product custom messaging, and branded pagination.
Text Domain: hello-elementor-child
*/

/* =========================================================
   v1.4 AUDIT NOTES — what changed and why
   (no class names, markup, brand colours or existing
   functionality were touched — this is a bugfix + cleanup
   pass on top of the same design)
   ---------------------------------------------------------
   1. BUG: .onsale and the manual .cmbuk-badge were both
      pinned to the same top:14px/left:14px spot. A product
      that is both on sale AND manually badged would show two
      ribbons stacked on each other. Fixed with a :has() rule
      that shifts .cmbuk-badge down when .onsale is present.
   2. BUG: the rule meant to suppress "From " on price RANGES
      (e.g. "£12.00 – £48.00") targeted a ::before on
      .woocommerce-Price-amount — but nothing else in the file
      ever sets content there, so it never actually did
      anything. Replaced with a :has() check on .price itself.
   3. DUPLICATE: display:block / position:relative on the
      product link (a:first-child) was declared three times
      across three separate sections with identical values.
      Consolidated into a single rule.
   4. ACCESSIBILITY: the on-card price text (gold-on-white,
      ~2.6:1) and the small trust line (opacity-dimmed green,
      ~3.7:1) both fell under the WCAG AA 4.5:1 minimum for
      body-sized text. Both now use solid, contrast-checked
      colours: --cmbuk-price (~4.95:1) and --cmbuk-muted-text
      (~6.8:1). Gold is kept exactly as-is everywhere it
      already had enough contrast (buttons, badges, borders).
   5. PERFORMANCE: the badge shimmer animated the `left`
      property, which forces layout on every frame for every
      badge on screen. Switched to `transform: translateX()`,
      which the browser can run on the compositor thread —
      same visual sweep, cheaper to render.
   6. MAINTAINABILITY: the same 3-6 selector variants
      (.woocommerce ul.products li.product / li.product-category,
      the bare ul.products versions, the Elementor widget
      versions) were repeated verbatim 10+ times. Consolidated
      with :is() — identical specificity, identical matches,
      far less to scroll through. Also removed a handful of
      truly redundant selectors (e.g. "li.product.first" is
      already matched by "li.first" alone, so listing both
      did nothing). :is()/:has() are supported by all current
      evergreen browsers.
   Left deliberately unchanged: the card fade-in fix
   (opacity:1 + "backwards" fill mode on cmbukCardIn) already
   solves the invisible-cards problem this file was patched
   for. It's correct as written, so it's untouched below.
   Flagged, not changed: the BUTTONS section below
   intentionally styles every bare <button> and
   input[type="submit"] site-wide for brand consistency. If
   you ever add a plugin/popup that needs a different button
   style, scope an exception rather than removing this.
---------------------------------------------------------
   v1.5 — confirmed against the live site
   7. REBRAND: this build is for "Custom Postal Boxes" — the
      header and file comments now identify the correct site.
      The functional selectors remain unchanged; only the site label
      and brand presentation are updated.
   8. NEW: PAGINATION was entirely unstyled before (default
      browser look — that's why the numbers on the category
      page still looked untouched). Added a full branded
      treatment: soft pill numbers, gold "current page" state,
      dark-navy prev/next, quiet ellipsis, focus ring, and a
      compact mobile size so 8+ pages never overflow. This
      targets the standard `.page-numbers` class WooCommerce
      and Elementor's Loop Grid pagination both use, plus the
      `.woocommerce-pagination` / `.elementor-pagination`
      wrapper — so it should apply regardless of which of the
      two is rendering it. If it doesn't fully take on load,
      send a screenshot of "Inspect Element" on the pagination
      bar and I'll match the exact selector.
========================================================= */

/* =========================================================
   v1.6 — CUSTOM POSTAL BOXES BRAND UPDATE
   9. BRAND: site identity updated to Custom Postal Boxes.
      Existing selectors/class names are deliberately retained so
      no WooCommerce, Elementor or manual badge integration breaks.
   10. COLOURS: primary brand colour is #19244F and the
       highlight colour is #C38F2D. Related gradients, shadows,
       borders, overlays and focus
       states use matching navy/gold derived values for consistency.
   11. HOVER COPY: image overlay updated from "Every Detail,
       Made To Your Brief" to "Custom Made To Your Exact
       Specification" for clearer custom-packaging intent.
========================================================= */

/* =========================================
   DESIGN TOKENS — Brand-matched
   (Navy + gold, matching all other
   sections: Why Choose Us, Trusted Logos,
   FAQ, Product Heading)
========================================= */
:root{
  --cmbuk-primary:#19244F;        /* brand navy */
  --cmbuk-primary-2:#27366E;      /* brand secondary navy (gradients) */
  --cmbuk-highlight:#C38F2D;      /* brand gold — buttons, badges, borders, accents */
  --cmbuk-highlight-2:#D7AD5D;    /* brand lighter gold (gradient end / hover) */
  --cmbuk-accent:#C38F2D;         /* unified with gold — no stray accent colour */
  --cmbuk-text:#2F3448;           /* brand body text */
  --cmbuk-muted-text:#596176;     /* solid secondary-text colour with strong contrast on cream/white */
  --cmbuk-price:#8A631F;          /* deepened gold for accessible on-card price text */
  --cmbuk-bg:#FBF7EF;             /* brand cream background */
  --cmbuk-card:#FFFFFF;
  --cmbuk-border:rgba(25,36,79,0.10);

  --cmbuk-font-heading:"Playfair Display", serif;
  --cmbuk-font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --cmbuk-radius:22px;
  --cmbuk-radius-sm:18px;

  --cmbuk-shadow:0 14px 35px rgba(25,36,79,0.07);
  --cmbuk-shadow-hover:0 22px 55px rgba(25,36,79,0.13);

  --cmbuk-container:1320px;
  --cmbuk-pad:18px;

  --gap-d:18px;
  --gap-t:16px;
  --gap-m:14px;

  --ease:cubic-bezier(.4,0,.2,1);
}

/* =========================================
   BASE
========================================= */
html,body{
  background: var(--cmbuk-bg);
  color: var(--cmbuk-text);
  font-family: var(--cmbuk-font-body);
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--cmbuk-font-heading);
  color: var(--cmbuk-primary);
}

a{
  color: inherit;
}

/* =========================================
   BUTTONS
   NOTE (audit): the bare `button` and
   `input[type="submit"]` selectors below are
   intentional — every button site-wide picks
   up the brand gradient for consistency. That
   also means any *other* plugin/popup button
   (e.g. a live-chat widget, a modal close
   button) will inherit this too. If one ever
   needs to look different, add a more specific
   override rather than removing this block.
========================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.elementor a.elementor-button,
.elementor a.elementor-button-link,
button,
input[type="submit"]{
  background: linear-gradient(135deg, var(--cmbuk-primary) 0%, var(--cmbuk-primary-2) 100%) !important;
  border: 1px solid var(--cmbuk-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease) !important;
  box-shadow: 0 10px 22px rgba(25,36,79,0.18) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.elementor a.elementor-button:hover,
.elementor a.elementor-button-link:hover,
button:hover,
input[type="submit"]:hover{
  background: linear-gradient(135deg, var(--cmbuk-highlight) 0%, var(--cmbuk-highlight-2) 100%) !important;
  border-color: var(--cmbuk-highlight) !important;
  color: var(--cmbuk-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(195,143,45,0.28) !important;
}

.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.elementor a.elementor-button:focus,
.elementor a.elementor-button-link:focus,
button:focus,
input[type="submit"]:focus{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(195,143,45,0.30), 0 10px 22px rgba(25,36,79,0.14) !important;
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.elementor a.elementor-button:focus-visible,
.elementor a.elementor-button-link:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible{
  outline: none !important;
}

/* =========================================
   SHOP CONTAINER
========================================= */
body:is(.woocommerce.archive, .woocommerce-page.archive, .post-type-archive-product, .tax-product_cat) .woocommerce{
  max-width: var(--cmbuk-container) !important;
  margin: 0 auto !important;
  padding: 0 var(--cmbuk-pad) !important;
}

/* Slightly tighter padding on tablet */
@media (max-width: 1024px){
  body:is(.woocommerce.archive, .woocommerce-page.archive, .post-type-archive-product, .tax-product_cat) .woocommerce{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* =========================================
   HEADER ROW
========================================= */
.woocommerce .woocommerce-notices-wrapper,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  display: block !important;
  color: var(--cmbuk-text) !important;
}

@media (min-width: 768px){
  .woocommerce .woocommerce-result-count{
    float: left !important;
    width: auto !important;
    margin-top: 6px !important;
    opacity: .92;
  }

  .woocommerce .woocommerce-ordering{
    float: right !important;
    width: auto !important;
  }

  .woocommerce .woocommerce-notices-wrapper,
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering{
    margin-bottom: 18px !important;
  }
}

/* Make sure products always start on a full width line */
.woocommerce ul.products{
  clear: both !important;
}

/* =========================================================
   FIX: EMPTY SPACE BEFORE FIRST PRODUCT ON FIRST ROW
   Some themes inject a hidden "first" li or apply left margin
   These rules remove that gap safely without changing design
========================================================= */

/* If Woo adds "first" class margins, reset them.
   (audit: "li.product.first" / "li.product-category.first"
   were listed separately here but are already matched by
   plain "li.first" — removed as redundant, nothing lost) */
.woocommerce ul.products li.first,
ul.products li.first{
  margin-left: 0 !important;
  clear: none !important;
}

/* If theme uses left padding on the UL, neutralise it */
.woocommerce ul.products,
ul.products{
  padding-left: 0 !important;
}

/* If any item is offset with left margin, remove it */
.woocommerce ul.products > li,
ul.products > li{
  margin-left: 0 !important;
}

/* Force grid start at column 1 for the first visible card */
.woocommerce ul.products > li:is(.product, .product-category):first-child,
ul.products > li:is(.product, .product-category):first-child{
  grid-column-start: 1 !important;
}

/* If a hidden placeholder exists, hide only truly empty nodes */
.woocommerce ul.products > li:empty,
ul.products > li:empty{
  display: none !important;
}

/* =========================================
   PRODUCTS GRID
   Force 4 desktop | 3 tablet | 1 mobile
   Works on Shop, Category, Elementor widgets
========================================= */
body:is(.woocommerce, .woocommerce-page, .post-type-archive-product, .tax-product_cat) ul.products.products,
:is(.woocommerce, .elementor-widget-woocommerce-products, .elementor-widget-woocommerce-product-related, .elementor-widget-woocommerce-upsell, .elementor-widget-woocommerce-cross-sell) ul.products,
ul.products{
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--gap-d) !important;

  width: 100% !important;
  max-width: var(--cmbuk-container) !important;
  align-items: stretch !important;
}

/* Large tablet / small desktop — smoother step before the 3-col tablet view */
@media (max-width: 1180px){
  body:is(.woocommerce, .woocommerce-page, .post-type-archive-product, .tax-product_cat) ul.products.products,
  :is(.woocommerce, .elementor-widget-woocommerce-products, .elementor-widget-woocommerce-product-related, .elementor-widget-woocommerce-upsell, .elementor-widget-woocommerce-cross-sell) ul.products,
  ul.products{
    gap: 16px !important;
  }
}

/* Tablet */
@media (max-width: 1024px){
  body:is(.woocommerce, .woocommerce-page, .post-type-archive-product, .tax-product_cat) ul.products.products,
  :is(.woocommerce, .elementor-widget-woocommerce-products, .elementor-widget-woocommerce-product-related, .elementor-widget-woocommerce-upsell, .elementor-widget-woocommerce-cross-sell) ul.products,
  ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--gap-t) !important;
  }
}

/* Small tablet / large phone — 2 columns instead of jumping straight to 1 */
@media (max-width: 860px){
  body:is(.woocommerce, .woocommerce-page, .post-type-archive-product, .tax-product_cat) ul.products.products,
  :is(.woocommerce, .elementor-widget-woocommerce-products, .elementor-widget-woocommerce-product-related, .elementor-widget-woocommerce-upsell, .elementor-widget-woocommerce-cross-sell) ul.products,
  ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* Mobile */
@media (max-width: 560px){
  body:is(.woocommerce, .woocommerce-page, .post-type-archive-product, .tax-product_cat) ul.products.products,
  :is(.woocommerce, .elementor-widget-woocommerce-products, .elementor-widget-woocommerce-product-related, .elementor-widget-woocommerce-upsell, .elementor-widget-woocommerce-cross-sell) ul.products,
  ul.products{
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: center !important;
    gap: var(--gap-m) !important;
  }
}

/* Kill any Woo/Elementor column widths that force 3 cols */
body:is(.woocommerce, .woocommerce-page, .post-type-archive-product, .tax-product_cat) ul.products.products > li.product,
.woocommerce ul.products li:is(.product, .product-category),
ul.products li:is(.product, .product-category){
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* =========================================
   SALE & STOCK BADGES — brand-matched
========================================= */
.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale{
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 3 !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: 1 !important;
  padding: 7px 14px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--cmbuk-highlight) 0%, var(--cmbuk-highlight-2) 100%) !important;
  color: var(--cmbuk-primary) !important;
  font-family: var(--cmbuk-font-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 18px rgba(195,143,45,0.32) !important;
  animation: cmbukBadgeIn .5s var(--ease) .15s both !important;
}

.woocommerce span.stock,
.woocommerce p.stock{
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

.woocommerce span.in-stock,
.woocommerce p.stock.in-stock{
  color: var(--cmbuk-primary-2) !important;
}

.woocommerce span.out-of-stock,
.woocommerce p.stock.out-of-stock{
  color: #B3422E !important;
}

/* =========================================
   PRODUCT AND CATEGORY CARDS
   Luxury, premium, consistent height,
   brand-matched navy/gold accents

   FIX APPLIED (already in place, re-verified
   during this audit): cards default to
   opacity:1 and use the "backwards" fill mode
   instead of "forwards". During the animation
   delay, the "backwards" fill mode borrows the
   opacity:0 "from" state from cmbukCardIn, so
   the fade-in still plays — but once the
   animation finishes, fill-mode isn't "forwards"
   so the card reverts to its own opacity:1
   rather than staying dependent on the
   animation. If the keyframe ever failed to
   fire (JS error, caching plugin stripping
   @keyframes, etc.) the card is still visible.
   This is correct as written — left unchanged.
========================================= */
.woocommerce ul.products li:is(.product, .product-category),
ul.products li:is(.product, .product-category){
  background: var(--cmbuk-card) !important;
  border: 1px solid var(--cmbuk-border) !important;
  border-radius: 24px !important;

  padding: 18px !important;

  box-shadow: var(--cmbuk-shadow) !important;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease) !important;

  display: flex !important;
  flex-direction: column !important;

  position: relative !important;
  overflow: hidden !important;

  opacity: 1 !important;
  animation: cmbukCardIn .65s var(--ease) backwards !important;
}

/* Stagger the entrance across the first two rows so cards don't
   all pop in at once — falls back to no extra delay beyond card 8 */
.woocommerce ul.products li.product:nth-child(1), ul.products li.product:nth-child(1){ animation-delay: .04s !important; }
.woocommerce ul.products li.product:nth-child(2), ul.products li.product:nth-child(2){ animation-delay: .09s !important; }
.woocommerce ul.products li.product:nth-child(3), ul.products li.product:nth-child(3){ animation-delay: .14s !important; }
.woocommerce ul.products li.product:nth-child(4), ul.products li.product:nth-child(4){ animation-delay: .19s !important; }
.woocommerce ul.products li.product:nth-child(5), ul.products li.product:nth-child(5){ animation-delay: .24s !important; }
.woocommerce ul.products li.product:nth-child(6), ul.products li.product:nth-child(6){ animation-delay: .29s !important; }
.woocommerce ul.products li.product:nth-child(7), ul.products li.product:nth-child(7){ animation-delay: .34s !important; }
.woocommerce ul.products li.product:nth-child(8), ul.products li.product:nth-child(8){ animation-delay: .39s !important; }

/* Card entrance animation */
@keyframes cmbukCardIn{
  from{
    opacity: 0;
    transform: translateY(18px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Premium gold top sheen */
.woocommerce ul.products li:is(.product, .product-category)::before,
ul.products li:is(.product, .product-category)::before{
  content: "" !important;
  position: absolute !important;
  top: -60px !important;
  left: -80px !important;
  width: 240px !important;
  height: 240px !important;
  background: radial-gradient(circle, rgba(195,143,45,0.16) 0%, rgba(195,143,45,0) 62%) !important;
  transform: rotate(10deg) !important;
  pointer-events: none !important;
  transition: opacity .3s var(--ease) !important;
}

/* Thin gold edge accent that brightens on hover — ties cards to the
   same accent language used across the rest of the site */
.woocommerce ul.products li:is(.product, .product-category)::after,
ul.products li:is(.product, .product-category)::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--cmbuk-highlight), var(--cmbuk-highlight-2)) !important;
  opacity: 0 !important;
  transition: opacity .3s var(--ease) !important;
  pointer-events: none !important;
}

/* Hover */
.woocommerce ul.products li:is(.product, .product-category):hover,
ul.products li:is(.product, .product-category):hover{
  transform: translateY(-7px) !important;
  border-color: rgba(195,143,45,0.5) !important;
  box-shadow: var(--cmbuk-shadow-hover) !important;
}

.woocommerce ul.products li:is(.product, .product-category):hover::after,
ul.products li:is(.product, .product-category):hover::after{
  opacity: 1 !important;
}

/* =========================================
   AUTO "FULLY CUSTOM" CORNER MARK — CSS only
   A small folded-corner gold flag that
   appears on every product card automatically
   with no HTML edit required. Pairs with the
   .cmbuk-badge text pill below for cards where
   you want the full "Custom Made To Your Spec"
   wording — use both together, or this alone
   for a subtler signal across the whole grid.
========================================= */
.woocommerce ul.products li:is(.product, .product-category),
ul.products li:is(.product, .product-category){
  --cmbuk-corner-size: 46px;
}

/* The product/category link wraps the image — made a positioned
   block once here (audit: this was previously declared three
   times across three sections with identical properties; the
   corner tag, hover prompt and image sizing below all rely on
   this single anchor point). */
.woocommerce ul.products li:is(.product, .product-category) a:first-child,
ul.products li:is(.product, .product-category) a:first-child{
  display: block !important;
  position: relative !important;
}

.woocommerce ul.products li:is(.product, .product-category) a:first-child::before,
ul.products li:is(.product, .product-category) a:first-child::before{
  content: "Bespoke" !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: rgba(251,247,239,0.96) !important;
  border: 1px solid rgba(195,143,45,0.45) !important;
  color: var(--cmbuk-primary) !important;
  font-family: var(--cmbuk-font-heading) !important;
  font-style: italic !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  box-shadow: 0 6px 16px rgba(25,36,79,0.14) !important;
  pointer-events: none !important;
}

/* =========================================
   "MADE TO YOUR SPEC" BADGE
   Reinforces that every box is custom-built
   to the customer's exact requirements.
   Sits as a compact pill inside the card so
   it isn't clipped by the card's overflow.

   This is the manual, fully controllable
   version — add class="cmbuk-badge" with
   your own wording to any product card via
   Elementor/HTML when you want to call out
   something specific (e.g. "Made For You",
   "100% Bespoke", "Your Logo, Your Box").
========================================= */
.woocommerce ul.products li.product .cmbuk-badge,
.woocommerce ul.products li.product-category .cmbuk-badge,
ul.products li.product .cmbuk-badge,
ul.products li.product-category .cmbuk-badge{
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, var(--cmbuk-primary) 0%, var(--cmbuk-primary-2) 100%) !important;
  color: #fff !important;
  font-family: var(--cmbuk-font-body) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 16px rgba(25,36,79,0.22) !important;
  pointer-events: none !important;
}

/* BUGFIX (audit note 1): .onsale and .cmbuk-badge were both
   pinned to top:14px/left:14px. If a product is on sale AND
   carries a manual badge, push the manual badge down so the
   two don't render on top of each other. */
.woocommerce ul.products li.product:has(.onsale) .cmbuk-badge,
ul.products li.product:has(.onsale) .cmbuk-badge{
  top: 48px !important;
}

/* Quiet gold shimmer sweeping across the badge, reads as premium/handmade.
   PERFORMANCE FIX (audit note 5): previously animated `left`,
   which forces layout on every frame for every badge on the
   page. Now animates `transform` instead — same visual sweep,
   runs on the compositor. */
.woocommerce ul.products li.product .cmbuk-badge::after,
.woocommerce ul.products li.product-category .cmbuk-badge::after,
ul.products li.product .cmbuk-badge::after,
ul.products li.product-category .cmbuk-badge::after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -60% !important;
  width: 40% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(195,143,45,0.55), transparent) !important;
  animation: cmbukRibbonShine 5s ease-in-out infinite !important;
  will-change: transform !important;
}

@keyframes cmbukRibbonShine{
  0%, 55%{ transform: translateX(0%); }
  85%, 100%{ transform: translateX(190%); }
}

/* =========================================
   IMAGES
   FIX: product photos previously sat inside
   12px of padding plus their own internal
   white space, making the actual product look
   small with excess margin on every side. The
   image area is now a fixed aspect-ratio frame
   that uses object-fit: cover, so the product
   fills the frame edge to edge with only a
   slim 6px border gap, regardless of how much
   white space exists in the original photo.
========================================= */
.woocommerce ul.products li:is(.product, .product-category) a img,
ul.products li:is(.product, .product-category) a img{
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;

  border-radius: 18px !important;
  border: 1px solid var(--cmbuk-border) !important;
  background: #fff !important;

  padding: 0 !important;
  margin: 0 0 14px 0 !important;

  transition: transform .35s var(--ease), box-shadow .35s var(--ease) !important;
  transform: translateZ(0);
}

/* Fallback for older browsers without aspect-ratio support:
   keeps a sensible fixed height instead of collapsing */
@supports not (aspect-ratio: 1 / 1){
  .woocommerce ul.products li:is(.product, .product-category) a img,
  ul.products li:is(.product, .product-category) a img{
    height: 260px !important;
  }
}

/* Slight premium lift + zoom on hover */
.woocommerce ul.products li:is(.product, .product-category):hover a img,
ul.products li:is(.product, .product-category):hover a img{
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 18px 45px rgba(25,36,79,0.14) !important;
}

/* =========================================
   "REQUEST YOUR SPEC" HOVER PROMPT
   A quiet overlay line centered over the
   product image only, appearing on hover.
   Positioned in the middle of the image area
   (not near the title or button) so it never
   sits on top of or crowds the product name,
   price, or add-to-cart button beneath it.
========================================= */
.woocommerce ul.products li:is(.product, .product-category) a:first-child::after,
ul.products li:is(.product, .product-category) a:first-child::after{
  content: "Custom Made To Your Exact Specification" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 4 !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  background: rgba(25,36,79,0.92) !important;
  color: #fff !important;
  font-family: var(--cmbuk-font-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-align: center !important;
  text-transform: none !important;
  opacity: 0 !important;
  transform: translateY(-50%) scale(.96) !important;
  transition: opacity .25s var(--ease), transform .25s var(--ease) !important;
  pointer-events: none !important;
}

.woocommerce ul.products li:is(.product, .product-category):hover a:first-child::after,
ul.products li:is(.product, .product-category):hover a:first-child::after{
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
}

/* =========================================
   TITLES AND PRICE
========================================= */
.woocommerce-loop-product__title,
.woocommerce-loop-category__title{
  font-family: var(--cmbuk-font-heading) !important;
  color: var(--cmbuk-primary) !important;
  font-size: clamp(1.05rem, 0.92rem + 0.35vw, 1.3125rem) !important;
  line-height: 1.16 !important;
  margin: 2px 0 10px 0 !important;
  letter-spacing: .2px !important;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price{
  color: var(--cmbuk-price) !important; /* audit note 4: was --cmbuk-highlight (gold), ~2.6:1 on white — now ~4.95:1 */
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  display: inline-block !important;
  transition: transform .25s var(--ease) !important;
}

.woocommerce ul.products li.product:hover .price,
ul.products li.product:hover .price{
  transform: translateX(2px) !important;
}

.woocommerce ul.products li.product .price del,
ul.products li.product .price del{
  color: rgba(47,52,72,0.45) !important;
  font-weight: 500 !important;
}

/* =========================================
   "FROM" PRICE PREFIX + UK MADE TRUST LINE
   Custom packaging is rarely a single fixed
   price, so the price block is framed as a
   starting point, with a small reassurance
   line underneath confirming UK production
   and full customisation on every order.
========================================= */
.woocommerce ul.products li.product .price::before,
ul.products li.product .price::before{
  content: "From " !important;
  color: var(--cmbuk-text) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

/* BUGFIX (audit note 2): don't show "From" when the theme
   already states a price range (e.g. variable products showing
   "£12.00 – £48.00"), so it doesn't read "From £12 – £48".
   The previous attempt at this targeted a ::before on
   .woocommerce-Price-amount that nothing else ever set content
   on, so it had no effect. This checks .price itself for two
   adjacent amounts (the range markup) and clears the prefix
   there directly. */
.woocommerce ul.products li.product .price:has(.woocommerce-Price-amount + .woocommerce-Price-amount)::before,
ul.products li.product .price:has(.woocommerce-Price-amount + .woocommerce-Price-amount)::before{
  content: "" !important;
}

.woocommerce ul.products li.product .cmbuk-trust-line,
ul.products li.product .cmbuk-trust-line{
  display: block !important;
  margin: -4px 0 12px 0 !important;
  color: var(--cmbuk-muted-text) !important; /* audit note 4: uses a solid high-contrast secondary brand colour */
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

/* =========================================
   CARD BUTTONS FULL WIDTH
========================================= */
.woocommerce ul.products li:is(.product, .product-category) a.button,
ul.products li:is(.product, .product-category) a.button{
  width: 100% !important;
  text-align: center !important;
  margin-top: auto !important;
  padding: 14px 18px !important;
  border-radius: 999px !important;
}

/* =========================================
   OPTIONAL SMALL POLISH
========================================= */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product-category a,
ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product-category a{
  text-decoration: none !important;
}

/* Improve form select for ordering */
.woocommerce .woocommerce-ordering select{
  border-radius: 999px !important;
  border: 1px solid var(--cmbuk-border) !important;
  padding: 10px 14px !important;
  background: #fff !important;
  box-shadow: 0 10px 22px rgba(25,36,79,0.06) !important;
  color: var(--cmbuk-text) !important;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease) !important;
}

.woocommerce .woocommerce-ordering select:hover,
.woocommerce .woocommerce-ordering select:focus{
  border-color: rgba(195,143,45,0.5) !important;
  box-shadow: 0 12px 26px rgba(25,36,79,0.09) !important;
  outline: none !important;
}

/* =========================================
   PAGINATION
   Covers WooCommerce's own pagination
   (.woocommerce-pagination) and Elementor
   Loop Grid's pagination (.elementor-pagination)
   — both render individual items with the
   shared WordPress core class ".page-numbers",
   so the item-level rules below target that
   directly rather than guessing which wrapper
   is in play. Previously this had zero styling
   anywhere in the file, hence the default
   browser look on the category pages.
========================================= */
.woocommerce-pagination,
.elementor-pagination,
nav.navigation.pagination{
  width: 100% !important;
  clear: both !important;
  margin: 40px 0 8px 0 !important;
  text-align: center !important;
}

.woocommerce-pagination ul.page-numbers,
.elementor-pagination,
nav.navigation.pagination .nav-links{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-pagination ul.page-numbers li{
  display: flex !important;
  margin: 0 !important;
}

/* Base pill shared by every number, the dots, and prev/next —
   whether it's rendered as <a> (linked pages) or <span>
   (current page, ellipsis) */
.page-numbers{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  border: 1px solid var(--cmbuk-border) !important;
  background: #fff !important;
  color: var(--cmbuk-primary) !important;
  font-family: var(--cmbuk-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease) !important;
}

/* Hover / focus only make sense on real links, not the current
   page or the ellipsis */
a.page-numbers:hover{
  border-color: rgba(195,143,45,0.55) !important;
  background: rgba(195,143,45,0.08) !important;
  color: var(--cmbuk-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(25,36,79,0.08) !important;
}

a.page-numbers:focus-visible{
  outline: none !important;
  border-color: var(--cmbuk-highlight) !important;
  box-shadow: 0 0 0 4px rgba(195,143,45,0.30) !important;
}

/* Current page — the one state that must be unmistakable */
.page-numbers.current{
  background: linear-gradient(135deg, var(--cmbuk-highlight) 0%, var(--cmbuk-highlight-2) 100%) !important;
  border-color: var(--cmbuk-highlight) !important;
  color: var(--cmbuk-primary) !important;
  box-shadow: 0 8px 18px rgba(195,143,45,0.32) !important;
  cursor: default !important;
}

/* Ellipsis ("…") — quiet, not a clickable-looking button */
.page-numbers.dots{
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cmbuk-muted-text) !important;
  cursor: default !important;
}
.page-numbers.dots:hover{
  transform: none !important;
}

/* Prev / next arrows — dark-navy outline so they read as
   navigation controls, not just more page numbers; solid fill
   on hover for a clear "go" affordance */
a.page-numbers.next,
a.page-numbers.prev{
  min-width: 48px !important;
  border-color: var(--cmbuk-primary) !important;
  color: var(--cmbuk-primary) !important;
  font-weight: 800 !important;
}
a.page-numbers.next:hover,
a.page-numbers.prev:hover{
  background: var(--cmbuk-primary) !important;
  border-color: var(--cmbuk-primary) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* Disabled/greyed prev-next state some themes render as spans */
span.page-numbers.next,
span.page-numbers.prev{
  opacity: .35 !important;
  cursor: default !important;
}

/* Mobile: same system, just compact enough that 8+ pages wrap
   cleanly instead of overflowing the viewport */
@media (max-width: 480px){
  .page-numbers{
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  a.page-numbers.next,
  a.page-numbers.prev{
    min-width: 42px !important;
  }
}

/* =========================================
   REDUCED MOTION
========================================= */
@media (prefers-reduced-motion: reduce){
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .elementor a.elementor-button,
  .elementor a.elementor-button-link,
  button,
  input[type="submit"],
  .woocommerce ul.products li:is(.product, .product-category),
  ul.products li:is(.product, .product-category),
  .woocommerce ul.products li:is(.product, .product-category) a img,
  ul.products li:is(.product, .product-category) a img{
    transition: none !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }

  /* Pagination: kill the hover lift/transition but don't force
     opacity:1 here — the disabled prev/next state relies on a
     dimmed opacity that has nothing to do with motion */
  .page-numbers{
    transition: none !important;
    transform: none !important;
  }
}


















html{scrollbar-width:thin;scrollbar-color:#19244F #E9E3D8}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#E9E3D8}
::-webkit-scrollbar-thumb{background:#19244F;border-radius:999px;border:2px solid #E9E3D8}
::-webkit-scrollbar-thumb:hover{background:#C38F2D}