.elementor-2178 .elementor-element.elementor-element-024765b{--display:flex;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-2178 .elementor-element.elementor-element-024765b:not(.elementor-motion-effects-element-type-background), .elementor-2178 .elementor-element.elementor-element-024765b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F5F7;}.elementor-2178 .elementor-element.elementor-element-e17e3ae{text-align:center;}.elementor-2178 .elementor-element.elementor-element-114703a{text-align:center;}.elementor-2178 .elementor-element.elementor-element-27409f7{--display:flex;}.elementor-2178 .elementor-element.elementor-element-3d12143 .woocommerce-breadcrumb > a{color:#3A4F66;}.elementor-2178 .elementor-element.elementor-element-3d12143 .woocommerce-breadcrumb{font-family:"Helvetica", Sans-serif;font-weight:400;}.elementor-2178 .elementor-element.elementor-element-6e2006c.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-2178 .elementor-element.elementor-element-6e2006c.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-2178 .elementor-element.elementor-element-a3f5848{--display:flex;}@media(max-width:1024px){.elementor-2178 .elementor-element.elementor-element-6e2006c.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-2178 .elementor-element.elementor-element-6e2006c.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for wc-archive-products, class: .elementor-element-6e2006c *//* ==========================================================================
   So Pampered — CSS for the [products] shortcode route
   --------------------------------------------------------------------------
   This is the file to use if you built the product row with:

       [products category="christmas-sets" limit="4" columns="4" orderby="menu_order"]

   Paste into:  Appearance -> Customize -> Additional CSS  -> Publish
   Then purge LiteSpeed (the lightning-bolt menu -> Purge All), because the
   site serves cached HTML with this CSS inlined into it.

   Do NOT use wordpress/eael-product-grid-override.css for this. That file is
   scoped to .sp-xmas-grid .eael-product-grid and cannot touch shortcode
   output — different widget, different markup.

   Every section below is independent. Use what you need, delete the rest.
   ========================================================================== */


/* ==========================================================================
   1. REQUIRED — undo the site-wide square-image rule
   --------------------------------------------------------------------------
   Appearance -> Customize -> Additional CSS already contains:

       img.wp-post-image { aspect-ratio: 1 !important; }

   That forces EVERY featured image square and, being !important, it beats
   Blocksy's own inline aspect-ratio: 3/4. WooCommerce is generating the right
   file (glow-on-the-go-1-300x400.jpg, a genuine 300x400) and the CSS squashes
   it to 300x300 on screen. /shop/ is affected the same way.

   BEST FIX: delete those three lines. Nothing below is then needed, and the
   whole shop goes back to 3:4 at once.

   Keep this block ONLY if something else on the site depends on square
   images. It must sit AFTER that rule in the stylesheet.
   ========================================================================== */
.woocommerce ul.products li.product img.wp-post-image,
.ct-media-container img.wp-post-image {
  aspect-ratio: 3 / 4 !important;
  object-fit: cover;
}


/* ==========================================================================
   2. ONLY IF NEEDED — grid columns inside an Elementor container
   --------------------------------------------------------------------------
   Blocksy lays the grid out from the data-products attribute on the list, and
   the shortcode does output it, so this is usually unnecessary. Add it only
   if the row renders as a single column inside your Elementor container.
   ========================================================================== */
/*
.elementor-widget-shortcode .woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 999.98px) {
  .elementor-widget-shortcode .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 689.98px) {
  .elementor-widget-shortcode .woocommerce ul.products {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
}
*/


/* ==========================================================================
   3. "Add to cart" button — full width + Gift Card slate
   --------------------------------------------------------------------------
   WHY IT IS NOT FULL WIDTH BY DEFAULT
   .ct-woo-card-actions is a flex row, and Blocksy leaves the button at
   flex-grow: 0 / flex-basis: auto, so it only ever hugs its own text —
   117px inside a 300px card. Nothing is broken; that is the theme's setting.

   WORTH KNOWING: the live shop does the same. /shop/ and the Christmas Sets
   archive both measure the card button at 117-127px, auto-width and
   left-aligned. The prototype made it full width, which was my deviation
   from the real site rather than a faithful copy of it.

   Add this block for the prototype look. Drop the three width lines to keep
   the auto-width of /shop/. Either is defensible — just be consistent.

   ON THE COLOUR
   Blocksy styles the two button contexts separately:

     archive card       #2872fa blue   40px tall
     single product     #3A4F66 slate  55px tall   <- the Gift Card button

   So blue on cards is the theme's own setting, not a mistake. This block
   recolours cards to the Gift Card slate as requested. It applies to every
   shop card, including the Gift Card's own card on /shop/, which keeps the
   shop consistent. To limit it to the Christmas Sets only, prefix both
   .elementor-2178 .elementor-element.elementor-element-6e2006cs with `li.product.product_cat-christmas-sets` instead of
   `li.product` — WooCommerce already puts that class on each card.

   No !important needed: these .elementor-2178 .elementor-element.elementor-element-6e2006cs are (0,5,2) against Blocksy's
   (0,1,0), so they win on specificity alone.
   ========================================================================== */
.woocommerce ul.products li.product .ct-woo-card-actions .button,
.woocommerce ul.products li.product .ct-woo-card-actions .added_to_cart {
  /* full width */
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;

  /* same slate as the Gift Card page button */
  background-color: var(--theme-palette-color-3, #3a4f66);
  color: #fff;
}

/* The Gift Card page button does not change colour on hover — Blocksy sets
   its initial and hover colours to the same #3A4F66. Matched here. Give it
   `opacity: .9` instead if you want some hover feedback. */
.woocommerce ul.products li.product .ct-woo-card-actions .button:hover,
.woocommerce ul.products li.product .ct-woo-card-actions .added_to_cart:hover {
  background-color: var(--theme-palette-color-3, #3a4f66);
  color: #fff;
}


/* ==========================================================================
   4. OPTIONAL — the "Worth £471" badge
   --------------------------------------------------------------------------
   Pairs with the PHP snippet in ARCHIVE-SETUP.md, which reads the _sp_worth
   field the CSV import already writes to every product.

   This styles the badge to match the prototype. It also restyles WooCommerce's
   built-in SALE badge to the same slate, so the two never clash if you do run
   a genuine sale.
   ========================================================================== */
.woocommerce ul.products li.product .sp-worth-badge,
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  z-index: 2;
  margin: 0;
  padding: 5px 10px;
  min-width: 0;
  min-height: 0;
  line-height: 1.1;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--theme-palette-color-3, #3a4f66);
  border-radius: 3px;
}

.woocommerce ul.products li.product .sp-worth-badge .amount {
  color: inherit;
}

/* The "worth" figure sits next to the price, lighter than it */
.woocommerce ul.products li.product .price .sp-worth {
  font-weight: 400;
  opacity: .7;
}


/* ==========================================================================
   5. OPTIONAL — hide the SALE badge and strikethrough
   --------------------------------------------------------------------------
   Only relevant if you keep Regular/Sale pricing on the sets. Remember the
   struck-through figure is the combined value of the contents, not a price
   the salon has charged, so presenting it as a former price is the kind of
   reference pricing the CMA's guidance treats as misleading.

   The cleaner answer is to clear the Sale price and set Regular to the real
   selling price — the CSV import does this for you — then use section 3 above
   for the "Worth £x" label.
   ========================================================================== */
/*
.woocommerce ul.products li.product .onsale { display: none; }
.woocommerce ul.products li.product .price del { display: none; }
*/

/* ==========================================================================
   6. OPTIONAL — make WooCommerce breadcrumbs match Blocksy's
   --------------------------------------------------------------------------
   Only needed if you output breadcrumbs with woocommerce_breadcrumb() or
   Elementor's Breadcrumbs widget rather than Blocksy's own.

   Blocksy renders .ct-breadcrumbs; WooCommerce renders .woocommerce-breadcrumb.
   The values below were measured off the live Gift Card product page, so this
   makes the two indistinguishable.
   ========================================================================== */
.woocommerce-breadcrumb,
.elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb {
  margin: 0;
  padding: 20px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.65;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--theme-palette-color-3, #3a4f66);
}

.woocommerce-breadcrumb a {
  color: var(--theme-palette-color-3, #3a4f66);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  color: #49718a;
}

/* Spacing around the separator only.
   word-spacing would also pad the gap inside multi-word names
   ("CHRISTMAS  SETS"), so target the separator element instead. The
   [sp_breadcrumbs] shortcode wraps it in .sp-crumb-sep; WooCommerce's own
   default delimiter already carries &nbsp; either side and needs nothing. */
.woocommerce-breadcrumb .sp-crumb-sep {
  margin: 0 6px;
  opacity: .55;
}/* End custom CSS */