/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.3
Description: Child theme for Hello Elementor - Custom Mailer Boxes UK.
             Product 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, and a manual badge class for
             per-product custom messaging.
Text Domain: hello-elementor-child
*/

/* =========================================
   DESIGN TOKENS — Brand-matched
   (Deep green + gold, matching all other
   sections: Why Choose Us, Trusted Logos,
   FAQ, Product Heading)
========================================= */
:root{
  --cmbuk-primary:#062F25;        /* brand deep green */
  --cmbuk-primary-2:#0B4638;      /* brand secondary green (gradients) */
  --cmbuk-highlight:#C79B45;      /* brand gold */
  --cmbuk-highlight-2:#DDBD78;    /* brand lighter gold (gradient end / hover) */
  --cmbuk-accent:#C79B45;         /* unified with gold — no stray teal accent */
  --cmbuk-text:#243A34;           /* brand body text */
  --cmbuk-bg:#FBF7EF;             /* brand cream background */
  --cmbuk-card:#FFFFFF;
  --cmbuk-border:rgba(6,47,37,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(6,47,37,0.07);
  --cmbuk-shadow-hover:0 22px 55px rgba(6,47,37,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
========================================= */
.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(6,47,37,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(199,155,69,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(199,155,69,0.30), 0 10px 22px rgba(6,47,37,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.woocommerce.archive .woocommerce,
body.woocommerce-page.archive .woocommerce,
body.post-type-archive-product .woocommerce,
body.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.woocommerce.archive .woocommerce,
  body.woocommerce-page.archive .woocommerce,
  body.post-type-archive-product .woocommerce,
  body.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 */
.woocommerce ul.products li.first,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product-category.first,
ul.products li.first,
ul.products li.product.first,
ul.products li.product-category.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.product:first-child,
.woocommerce ul.products > li.product-category:first-child,
ul.products > li.product:first-child,
ul.products > li.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.woocommerce ul.products.products,
body.woocommerce-page ul.products.products,
body.post-type-archive-product ul.products.products,
body.tax-product_cat ul.products.products,
.woocommerce ul.products,
ul.products,
.elementor-widget-woocommerce-products ul.products,
.elementor-widget-woocommerce-product-related ul.products,
.elementor-widget-woocommerce-upsell ul.products,
.elementor-widget-woocommerce-cross-sell 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.woocommerce ul.products.products,
  body.woocommerce-page ul.products.products,
  body.post-type-archive-product ul.products.products,
  body.tax-product_cat ul.products.products,
  .woocommerce ul.products,
  ul.products,
  .elementor-widget-woocommerce-products ul.products,
  .elementor-widget-woocommerce-product-related ul.products,
  .elementor-widget-woocommerce-upsell ul.products,
  .elementor-widget-woocommerce-cross-sell ul.products{
    gap: 16px !important;
  }
}

/* Tablet */
@media (max-width: 1024px){
  body.woocommerce ul.products.products,
  body.woocommerce-page ul.products.products,
  body.post-type-archive-product ul.products.products,
  body.tax-product_cat ul.products.products,
  .woocommerce ul.products,
  ul.products,
  .elementor-widget-woocommerce-products ul.products,
  .elementor-widget-woocommerce-product-related ul.products,
  .elementor-widget-woocommerce-upsell ul.products,
  .elementor-widget-woocommerce-cross-sell 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.woocommerce ul.products.products,
  body.woocommerce-page ul.products.products,
  body.post-type-archive-product ul.products.products,
  body.tax-product_cat ul.products.products,
  .woocommerce ul.products,
  ul.products,
  .elementor-widget-woocommerce-products ul.products,
  .elementor-widget-woocommerce-product-related ul.products,
  .elementor-widget-woocommerce-upsell ul.products,
  .elementor-widget-woocommerce-cross-sell ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* Mobile */
@media (max-width: 560px){
  body.woocommerce ul.products.products,
  body.woocommerce-page ul.products.products,
  body.post-type-archive-product ul.products.products,
  body.tax-product_cat ul.products.products,
  .woocommerce ul.products,
  ul.products,
  .elementor-widget-woocommerce-products ul.products,
  .elementor-widget-woocommerce-product-related ul.products,
  .elementor-widget-woocommerce-upsell ul.products,
  .elementor-widget-woocommerce-cross-sell 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.woocommerce ul.products.products > li.product,
body.woocommerce-page ul.products.products > li.product,
body.post-type-archive-product ul.products.products > li.product,
body.tax-product_cat ul.products.products > li.product,
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category,
ul.products li.product,
ul.products li.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(199,155,69,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 green/gold accents

   FIX APPLIED: cards now default to
   opacity:1 and use the "backwards" fill
   mode instead of "forwards". Previously
   the cards were set to opacity:0 and
   relied entirely on the cmbukCardIn
   keyframe (which was missing from this
   file) to reveal them — if that
   animation ever failed to run (missing
   keyframe, JS error elsewhere, slow or
   partial stylesheet load, a caching
   plugin stripping the @keyframes block,
   etc) every product card stayed
   permanently invisible even though it
   was fully present in the page. This is
   the most likely reason products were
   "not showing". The cmbukCardIn keyframe
   has also been added below so the
   intended fade/rise entrance animation
   still plays normally.
========================================= */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category,
ul.products li.product,
ul.products li.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 — was referenced above but missing from
   the original file, which is the most likely cause of products
   appearing to "not show" (they were rendered with opacity:0 and
   nothing ever set it back to 1). Now defined and paired with
   the "backwards" fill mode above as a safety net. */
@keyframes cmbukCardIn{
  from{
    opacity: 0;
    transform: translateY(18px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Premium gold top sheen */
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product-category::before,
ul.products li.product::before,
ul.products li.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(199,155,69,0.16) 0%, rgba(199,155,69,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.product::after,
.woocommerce ul.products li.product-category::after,
ul.products li.product::after,
ul.products li.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.product:hover,
.woocommerce ul.products li.product-category:hover,
ul.products li.product:hover,
ul.products li.product-category:hover{
  transform: translateY(-7px) !important;
  border-color: rgba(199,155,69,0.5) !important;
  box-shadow: var(--cmbuk-shadow-hover) !important;
}

.woocommerce ul.products li.product:hover::after,
.woocommerce ul.products li.product-category:hover::after,
ul.products li.product:hover::after,
ul.products li.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 above 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.product,
.woocommerce ul.products li.product-category,
ul.products li.product,
ul.products li.product-category{
  --cmbuk-corner-size: 46px;
}

.woocommerce ul.products li.product a:first-child,
.woocommerce ul.products li.product-category a:first-child,
ul.products li.product a:first-child,
ul.products li.product-category a:first-child{
  position: relative !important;
}

.woocommerce ul.products li.product a:first-child::before,
.woocommerce ul.products li.product-category a:first-child::before,
ul.products li.product a:first-child::before,
ul.products li.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(199,155,69,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(6,47,37,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(6,47,37,0.22) !important;
  pointer-events: none !important;
}

/* Quiet gold shimmer sweeping across the badge, reads as premium/handmade */
.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(199,155,69,0.55), transparent) !important;
  animation: cmbukRibbonShine 5s ease-in-out infinite !important;
}

@keyframes cmbukRibbonShine{
  0%, 55%{ left: -60%; }
  85%, 100%{ left: 130%; }
}

/* =========================================
   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.product a:first-child,
.woocommerce ul.products li.product-category a:first-child,
ul.products li.product a:first-child,
ul.products li.product-category a:first-child{
  display: block !important;
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product-category a img,
ul.products li.product a img,
ul.products li.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.product a img,
  .woocommerce ul.products li.product-category a img,
  ul.products li.product a img,
  ul.products li.product-category a img{
    height: 260px !important;
  }
}

/* Slight premium lift + zoom on hover */
.woocommerce ul.products li.product:hover a img,
.woocommerce ul.products li.product-category:hover a img,
ul.products li.product:hover a img,
ul.products li.product-category:hover a img{
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 18px 45px rgba(6,47,37,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.product a:first-child,
.woocommerce ul.products li.product-category a:first-child,
ul.products li.product a:first-child,
ul.products li.product-category a:first-child{
  display: block !important;
  position: relative !important;
}

.woocommerce ul.products li.product a:first-child::after,
.woocommerce ul.products li.product-category a:first-child::after,
ul.products li.product a:first-child::after,
ul.products li.product-category a:first-child::after{
  content: "Tailored To Your Size, Print & Finish" !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(6,47,37,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.product:hover a:first-child::after,
.woocommerce ul.products li.product-category:hover a:first-child::after,
ul.products li.product:hover a:first-child::after,
ul.products li.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: 21px !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-highlight) !important;
  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(36,58,52,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;
}

/* Do not show "From" on category cards or wherever the theme
   already states a price range (e.g. variable products already
   showing "£12.00 – £48.00") to avoid reading like "From £12 – £48" */
.woocommerce ul.products li.product .price .woocommerce-Price-amount + .woocommerce-Price-amount::before,
ul.products li.product .price .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-text) !important;
  opacity: .62 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

/* =========================================
   CARD BUTTONS FULL WIDTH
========================================= */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product-category a.button,
ul.products li.product a.button,
ul.products li.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(6,47,37,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(199,155,69,0.5) !important;
  box-shadow: 0 12px 26px rgba(6,47,37,0.09) !important;
  outline: none !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.product,
  .woocommerce ul.products li.product-category,
  ul.products li.product,
  ul.products li.product-category,
  .woocommerce ul.products li.product a img,
  .woocommerce ul.products li.product-category a img,
  ul.products li.product a img,
  ul.products li.product-category a img{
    transition: none !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
}