/* =========================================================================
   BRITTLE PRODUCT HERO — the top of every product page (Elementor widgets)

   Title · price tag · "Make it yours" card (Custom Product Addons by Acowebs,
   or WooCommerce Product Add-Ons) · quantity + Add to cart · trust strip ·
   gallery thumbnails · phone bar

   SCOPE: every rule skips widgets inside an Elementor Loop item
   (":not(.e-loop-item *)"), so product cards and carousels further down the
   page ("Products You May Also Like", "Related Products") are never touched.

   "body:not(#bph)" in front gives the rules the weight of an id without needing
   one, so they win over the per-widget styles Elementor writes from the editor.
   ========================================================================= */

body:not(#bph).single-product {
  --bph-plum: #3B203D;
  --bph-ink: #241521;
  --bph-muted: #756B73;
  --bph-coral: #E99A8A;
  --bph-coral-dark: #B4533F;
  --bph-cream: #F7F2E8;
  --bph-paper: #FFFDF9;
  --bph-line: rgba(59, 32, 61, 0.12);
  --bph-field-line: rgba(59, 32, 61, 0.2);
  --bph-brass-tint: #F6EBD6;
  --bph-brass-line: rgba(185, 138, 62, 0.25);
  --bph-brass-dark: #8A6423;
  --bph-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4533F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E");
}


/* =========================================================================
   1. TITLE (main product only)
   ========================================================================= */

body:not(#bph).single-product .elementor-widget-woocommerce-product-title:not(.e-loop-item *) .product_title,
body:not(#bph).single-product .elementor-widget-woocommerce-product-title:not(.e-loop-item *) .elementor-heading-title {
  margin: 0 !important;
  color: var(--bph-plum) !important;
  font-size: clamp(26px, 2.6vw, 40px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}


/* =========================================================================
   2. PRICE (main product only) — brass tag, a block of its own so nothing
      below can slide under it
   ========================================================================= */

body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) {
  margin-top: 14px !important;
  margin-bottom: 24px !important;
}

body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) .price {
  display: flex !important;
  width: fit-content;
  max-width: 100%;
  align-items: baseline !important;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 !important;
  padding: 7px 16px !important;
  border: 1px solid var(--bph-brass-line) !important;
  border-radius: 14px !important;
  background: var(--bph-brass-tint) !important;
  color: var(--bph-ink) !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) .price .woocommerce-Price-amount,
body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) .price bdi {
  color: inherit !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) .price .woocommerce-Price-currencySymbol {
  margin-right: 1px;
  font-weight: 600 !important;
  opacity: 0.75;
}

/* ---- ON SALE ----
   Only the sale price sits in the brass tag. The old price stays outside it,
   smaller and struck through. (Regular-price products keep the whole tag above.) */

body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) .price:has(del) {
  align-items: center !important;
  gap: 6px 12px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) .price ins {
  order: 1;
  display: inline-flex;
  align-items: baseline;
  padding: 7px 16px;
  border: 1px solid var(--bph-brass-line);
  border-radius: 14px;
  background: var(--bph-brass-tint) !important;
  text-decoration: none !important;
}

body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) .price ins .woocommerce-Price-amount,
body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) .price ins bdi {
  color: var(--bph-ink) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) .price del {
  order: 2;
  opacity: 1 !important;
  color: #9C9089 !important;
  font-size: 16px !important; /* the strike line follows this size, so it crosses the middle of the numbers */
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px !important;
}

body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) .price del .woocommerce-Price-amount,
body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) .price del bdi {
  color: #9C9089 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

body:not(#bph).single-product .elementor-widget-woocommerce-product-price:not(.e-loop-item *) .price del .woocommerce-Price-currencySymbol {
  opacity: 1;
}

/* the same for the phone bar's price */
body:not(#bph).single-product .bph-sticky__price del,
body:not(#bph).single-product .bph-sticky__price del bdi {
  color: #9C9089 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}


/* =========================================================================
   3. "MAKE IT YOURS" — the custom fields in one soft card
      Custom Product Addons (Acowebs) draws its fields with JavaScript, so the
      card is its own outer box, styled here with CSS only (nothing is moved).
      .bph-addons is the same card for WooCommerce Product Add-Ons.
   ========================================================================= */

body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) .wcpa_form_outer,
body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) .bph-addons {
  flex: 1 1 100% !important;
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 20px 6px !important;
  overflow: hidden;
  border: 1.5px solid rgba(233, 154, 138, 0.55) !important;
  border-radius: 20px !important;
  background: var(--bph-paper) !important;
  box-shadow: 0 14px 30px -22px rgba(180, 83, 63, 0.45) !important;
}

/* the "Make it yours" heading — a highlighted strip across the top of the card.
   Drawn with CSS, so it never interferes with the fields. */
body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) .wcpa_form_outer::before,
body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) .bph-addons::before {
  content: "Make it yours";
  display: flex;
  align-items: center;
  min-height: 52px;
  margin: 0 -20px 18px;
  padding: 12px 20px 12px 64px;
  border-bottom: 1px solid rgba(233, 154, 138, 0.35);
  /* pen icon in a white circle, on a coral-to-yellow wash */
  background:
    var(--bph-pen) no-repeat 28px center / 16px 16px,
    radial-gradient(circle at 36px 50%, #ffffff 0 16px, transparent 16.5px),
    linear-gradient(100deg, #FBEAE6 0%, #FBEAC0 100%);
  color: var(--bph-plum);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* friendly "Please enter your …" messages (addon-errors.js): the add-on's own
   "Field is required" is hidden and the instruction is shown in its place */
body:not(#bph).single-product .wcpa_form_outer [data-bph-msg],
body:not(#bph).single-product .bph-addons [data-bph-msg] {
  display: flex !important;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

body:not(#bph).single-product .wcpa_form_outer [data-bph-msg] > *,
body:not(#bph).single-product .bph-addons [data-bph-msg] > * {
  display: none !important;
}

body:not(#bph).single-product .wcpa_form_outer [data-bph-msg]::before,
body:not(#bph).single-product .bph-addons [data-bph-msg]::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23B3261E'/%3E%3Cpath d='M8 4.2v4.6' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='1' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

body:not(#bph).single-product .wcpa_form_outer [data-bph-msg]::after,
body:not(#bph).single-product .bph-addons [data-bph-msg]::after {
  content: attr(data-bph-msg);
  color: #B3261E;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

/* the field with a missing answer gets a red outline */
body:not(#bph).single-product .wcpa_form_outer [data-bph-error] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body:not(#bph).single-product .wcpa_form_outer [data-bph-error] textarea,
body:not(#bph).single-product .wcpa_form_outer [data-bph-error] select,
body:not(#bph).single-product .bph-addons [data-bph-error] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body:not(#bph).single-product .bph-addons [data-bph-error] textarea,
body:not(#bph).single-product .bph-addons [data-bph-error] select {
  border-color: #B3261E !important;
  background-color: #FFF8F7 !important;
}

/* field labels */
body:not(#bph).single-product .wcpa_form_outer label:not(.wcpa_checkbox label):not(.wcpa_radio label),
body:not(#bph).single-product .wcpa_form_outer .wcpa_field_label,
body:not(#bph).single-product .bph-addons .wc-pao-addon-name {
  display: block !important;
  margin: 0 0 6px !important;
  color: var(--bph-plum) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

body:not(#bph).single-product .wcpa_form_outer .required_ast,
body:not(#bph).single-product .wcpa_form_outer .wcpa_required_ast,
body:not(#bph).single-product .wcpa_form_outer label span.required,
body:not(#bph).single-product .wcpa_form_outer label abbr,
body:not(#bph).single-product .bph-addons .required {
  color: var(--bph-coral-dark) !important;
  font-style: normal !important;
  text-decoration: none !important;
}

/* helper text ("You'll receive a digital preview …") */
body:not(#bph).single-product .wcpa_form_outer .wcpa_helptext,
body:not(#bph).single-product .wcpa_form_outer .wcpa_description,
body:not(#bph).single-product .wcpa_form_outer .wcpa_field_description,
body:not(#bph).single-product .wcpa_form_outer .wcpa_desc,
body:not(#bph).single-product .bph-addons .wc-pao-addon-description,
body:not(#bph).single-product .bph-addons .wc-pao-addon-description p {
  margin: 0 0 8px !important;
  color: var(--bph-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* one gap between fields */
body:not(#bph).single-product .wcpa_form_outer .wcpa_form_item,
body:not(#bph).single-product .bph-addons .wc-pao-addon-container {
  margin: 0 0 16px !important;
  padding: 0 !important;
}

/* the fields themselves */
body:not(#bph).single-product .wcpa_form_outer input[type="text"],
body:not(#bph).single-product .wcpa_form_outer input[type="email"],
body:not(#bph).single-product .wcpa_form_outer input[type="number"],
body:not(#bph).single-product .wcpa_form_outer input[type="tel"],
body:not(#bph).single-product .wcpa_form_outer input[type="url"],
body:not(#bph).single-product .wcpa_form_outer input[type="date"],
body:not(#bph).single-product .wcpa_form_outer select,
body:not(#bph).single-product .wcpa_form_outer textarea,
body:not(#bph).single-product .bph-addons input[type="text"],
body:not(#bph).single-product .bph-addons input[type="email"],
body:not(#bph).single-product .bph-addons input[type="number"],
body:not(#bph).single-product .bph-addons select,
body:not(#bph).single-product .bph-addons textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border: 1px solid var(--bph-field-line) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: var(--bph-ink) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body:not(#bph).single-product .wcpa_form_outer textarea,
body:not(#bph).single-product .bph-addons textarea {
  height: 112px !important;
  min-height: 112px !important;
  resize: vertical;
}

body:not(#bph).single-product .wcpa_form_outer input:focus,
body:not(#bph).single-product .wcpa_form_outer select:focus,
body:not(#bph).single-product .wcpa_form_outer textarea:focus,
body:not(#bph).single-product .bph-addons input:focus,
body:not(#bph).single-product .bph-addons select:focus,
body:not(#bph).single-product .bph-addons textarea:focus {
  border-color: var(--bph-coral) !important;
  box-shadow: 0 0 0 3px rgba(233, 154, 138, 0.28) !important;
}

body:not(#bph).single-product .wcpa_form_outer ::placeholder,
body:not(#bph).single-product .bph-addons ::placeholder {
  color: #A79CA5 !important;
  opacity: 1;
}

/* the add-ons' own price summary box: quiet */
body:not(#bph).single-product .wcpa_price_summary,
body:not(#bph).single-product #product-addons-total {
  flex: 1 1 100% !important;
  margin: 0 0 16px !important;
  font-size: 14px;
}

body:not(#bph).single-product #product-addons-total:empty {
  display: none !important;
}

/* character counter (hero.js adds it under fields that have a character limit) */
body:not(#bph).single-product .bph-count {
  display: block;
  margin: 5px 2px 0;
  color: var(--bph-muted);
  font-size: 12px;
  line-height: 1.3;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body:not(#bph).single-product .bph-count.is-near {
  color: var(--bph-coral-dark);
  font-weight: 600;
}


/* =========================================================================
   4. QUANTITY + ADD TO CART (main product only)
   The quantity control keeps its own inside layout; it only gets the outline.
   ========================================================================= */

body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) form.cart:not(.variations_form),
body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) .woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) .quantity {
  flex: none !important;
  margin: 0 !important;
  border-color: var(--bph-field-line) !important;
  border-radius: 999px !important;
  background-color: #ffffff !important;
  overflow: hidden;
}

/* Add to cart: fills the rest of the row, same height as the quantity box */
body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) button.single_add_to_cart_button {
  flex: 1 1 200px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 420px;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 28px !important;
  border: 1px solid var(--bph-plum) !important;
  border-radius: 999px !important;
  background: var(--bph-plum) !important;
  box-shadow: 0 10px 22px -12px rgba(59, 32, 61, 0.55) !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  line-height: 1 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* coral with plum text on hover — white on coral is too faint to read */
body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) button.single_add_to_cart_button:hover {
  border-color: var(--bph-coral) !important;
  background: var(--bph-coral) !important;
  color: var(--bph-plum) !important;
}

body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) button.single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--bph-plum) !important;
  outline-offset: 3px;
}

body:not(#bph).single-product .bph-btn-icon {
  flex: none;
  width: 20px;
  height: 20px;
}

body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) button.single_add_to_cart_button.disabled,
body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) button.single_add_to_cart_button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed;
}


/* =========================================================================
   5. TRUST STRIP (under Add to cart)
   ========================================================================= */

body:not(#bph).single-product .bph-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 8px !important;
  padding: 0 !important;
  list-style: none !important;
}

body:not(#bph).single-product .bph-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 12px 14px;
  border: 1px solid var(--bph-line);
  border-radius: 14px;
  background: var(--bph-paper);
  color: var(--bph-plum);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  list-style: none !important;
}

body:not(#bph).single-product .bph-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bph-brass-tint);
  color: var(--bph-brass-dark);
}


/* =========================================================================
   6. GALLERY (the product's Image Carousel only — hero.js marks it .bph-gallery)
   ========================================================================= */

body:not(#bph).single-product .bph-gallery .elementor-image-carousel-wrapper,
body:not(#bph).single-product .bph-gallery .swiper,
body:not(#bph).single-product .bph-gallery .swiper-container {
  border-radius: 24px;
  overflow: hidden;
}

body:not(#bph).single-product .bph-gallery .elementor-swiper-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.92);
  box-shadow: 0 6px 16px -6px rgba(36, 21, 33, 0.35);
  color: var(--bph-plum) !important;
  font-size: 18px !important;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

body:not(#bph).single-product .bph-gallery .elementor-swiper-button svg {
  width: 18px !important;
  height: 18px !important;
  fill: var(--bph-plum) !important;
}

body:not(#bph).single-product .bph-gallery:hover .elementor-swiper-button,
body:not(#bph).single-product .bph-gallery .elementor-swiper-button:focus-visible {
  opacity: 1;
}

body:not(#bph).single-product .bph-gallery .elementor-swiper-button:hover {
  background: #ffffff;
}

body:not(#bph).single-product .bph-gallery .elementor-swiper-button-prev { left: 14px !important; }
body:not(#bph).single-product .bph-gallery .elementor-swiper-button-next { right: 14px !important; }

@media (hover: none) {
  body:not(#bph).single-product .bph-gallery .elementor-swiper-button {
    width: 36px !important;
    height: 36px !important;
    opacity: 1;
  }
}

/* the carousel's dots: small plum pills instead of Elementor's blue dots */
body:not(#bph).single-product .bph-gallery .swiper-pagination-bullet {
  width: 7px !important;
  height: 7px !important;
  margin: 0 4px !important;
  border-radius: 999px !important;
  background: var(--bph-plum) !important;
  opacity: 0.2 !important;
  transition: width 0.3s ease, opacity 0.3s ease;
}

body:not(#bph).single-product .bph-gallery .swiper-pagination-bullet-active {
  width: 22px !important;
  opacity: 1 !important;
}

body:not(#bph).single-product .bph-gallery.bph-has-thumbs .swiper-pagination {
  display: none !important;
}

body:not(#bph).single-product .bph-gallery.bph-has-thumbs .elementor-image-carousel-wrapper,
body:not(#bph).single-product .bph-gallery.bph-has-thumbs .swiper {
  padding-bottom: 0 !important;
}

body:not(#bph).single-product .bph-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

body:not(#bph).single-product .bph-thumbs li {
  margin: 0;
  list-style: none;
}

body:not(#bph).single-product .bph-thumb {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--bph-cream);
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

body:not(#bph).single-product .bph-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: 0 !important;
}

body:not(#bph).single-product .bph-thumb:hover {
  opacity: 1;
}

body:not(#bph).single-product .bph-thumb[aria-current="true"] {
  border-color: var(--bph-plum);
  opacity: 1;
}

body:not(#bph).single-product .bph-thumb:focus-visible {
  outline: 2px solid var(--bph-coral);
  outline-offset: 2px;
}


/* =========================================================================
   7. PHONE: sticky Add to cart bar
   ========================================================================= */

body:not(#bph).single-product .bph-sticky {
  display: none;
}

@media (max-width: 767px) {
  body:not(#bph).single-product .bph-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--bph-line);
    background: rgba(255, 253, 249, 0.97);
    box-shadow: 0 -10px 30px -18px rgba(36, 21, 33, 0.45);
    transform: translateY(110%);
    transition: transform 0.25s ease;
  }

  body:not(#bph).single-product .bph-sticky.is-shown {
    transform: none;
  }

  body:not(#bph).single-product .bph-sticky__info {
    flex: 1 1 auto;
    min-width: 0;
  }

  body:not(#bph).single-product .bph-sticky__name {
    display: block;
    overflow: hidden;
    color: var(--bph-plum);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body:not(#bph).single-product .bph-sticky__price {
    display: block;
    color: var(--bph-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }

  body:not(#bph).single-product .bph-sticky__price del {
    display: none;
  }

  body:not(#bph).single-product .bph-sticky__price ins {
    background: none;
    color: var(--bph-brass-dark);
    text-decoration: none;
  }

  body:not(#bph).single-product .bph-sticky__btn {
    flex: none;
    height: 46px;
    margin: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--bph-plum);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
  }

  body:not(#bph).single-product .bph-sticky__btn:active {
    background: var(--bph-coral);
    color: var(--bph-plum);
  }

  body:not(#bph).single-product.bph-sticky-on {
    padding-bottom: 72px;
  }

  body:not(#bph).single-product .bph-trust {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body:not(#bph).single-product .bph-thumb {
    width: 60px;
    height: 60px;
    border-radius: 12px;
  }

  /* phones: Add to cart shares the row with the quantity box while it can stay 140px wide */
  body:not(#bph).single-product .elementor-widget-woocommerce-product-add-to-cart:not(.e-loop-item *) button.single_add_to_cart_button {
    flex: 1 1 0 !important;
    min-width: 140px;
    max-width: none;
    padding: 0 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(#bph).single-product .bph-sticky,
  body:not(#bph).single-product .bph-thumb,
  body:not(#bph).single-product button.single_add_to_cart_button {
    transition: none;
  }
}


/* =========================================================================
   8. VARIATIONS (variable products) — main product only
   Pills replace the dropdowns (variations.js); the dropdowns stay hidden in
   the page so WooCommerce keeps working exactly as before.
   ========================================================================= */

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) table.variations {
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  border: 0 !important;
  background: none !important;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) table.variations tbody {
  display: block;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) table.variations tr {
  display: block;
  margin: 0 0 18px;
  border: 0 !important;
  background: none !important;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) table.variations tr:last-child {
  margin-bottom: 0;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) table.variations th,
body:not(#bph).single-product form.variations_form:not(.e-loop-item *) table.variations td {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: left !important;
  line-height: 1.4 !important;
}

/* "Size: Large" */
body:not(#bph).single-product form.variations_form:not(.e-loop-item *) table.variations th.label,
body:not(#bph).single-product form.variations_form:not(.e-loop-item *) table.variations th {
  margin: 0 0 10px !important;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) table.variations label {
  margin: 0 !important;
  color: var(--bph-plum) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body:not(#bph).single-product .bph-var-chosen:not(:empty)::before {
  content: ": ";
}

body:not(#bph).single-product .bph-var-chosen {
  color: var(--bph-muted);
  font-weight: 500;
}

/* the pills */
body:not(#bph).single-product .bph-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body:not(#bph).single-product .bph-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid rgba(59, 32, 61, 0.22);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: none;
  color: var(--bph-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body:not(#bph).single-product .bph-pill:hover {
  border-color: var(--bph-plum);
  background: #ffffff;
  color: var(--bph-ink);
}

body:not(#bph).single-product .bph-pill:focus-visible {
  outline: 2px solid var(--bph-coral);
  outline-offset: 2px;
}

body:not(#bph).single-product .bph-pill.is-on,
body:not(#bph).single-product .bph-pill.is-on:hover {
  border-color: var(--bph-plum);
  background: var(--bph-plum);
  color: #ffffff;
  font-weight: 600;
}

/* not available with what's chosen so far (or out of stock): faded and struck */
body:not(#bph).single-product .bph-pill.is-off {
  border-style: dashed;
  background: transparent;
  color: #A79CA5;
  text-decoration: line-through;
  cursor: not-allowed;
}

body:not(#bph).single-product .bph-pill.is-off:hover {
  border-color: rgba(59, 32, 61, 0.22);
}

/* the real dropdowns: kept in the page for WooCommerce, out of sight */
body:not(#bph).single-product select.bph-var-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* attributes with many options keep a dropdown — styled like the other fields */
body:not(#bph).single-product form.variations_form:not(.e-loop-item *) table.variations select:not(.bph-var-hidden) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 420px;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 44px 0 16px !important;
  border: 1px solid var(--bph-field-line) !important;
  border-radius: 12px !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%233B203D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 14px 14px !important;
  box-shadow: none !important;
  color: var(--bph-ink) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  -webkit-appearance: none;
  appearance: none;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) table.variations select:not(.bph-var-hidden):focus {
  border-color: var(--bph-coral) !important;
  box-shadow: 0 0 0 3px rgba(233, 154, 138, 0.28) !important;
  outline: none !important;
}

/* "Clear" */
body:not(#bph).single-product form.variations_form:not(.e-loop-item *) a.reset_variations {
  display: inline-block;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--bph-muted) !important;
  font-size: 13px !important;
  font-weight: 500;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) a.reset_variations:hover {
  color: var(--bph-coral-dark) !important;
}

/* what appears once a full choice is made: stock, description, (price) */
body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .single_variation_wrap {
  margin: 0 !important;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .woocommerce-variation.single_variation {
  margin: 0 0 16px !important;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .woocommerce-variation.single_variation:empty,
body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .woocommerce-variation.single_variation[style*="none"] {
  margin: 0 !important;
}

/* the price under the options duplicates the price tag at the top (which now shows the chosen
   price), so it's hidden whenever the top tag was updated */
body:not(#bph).single-product form.variations_form.bph-price-moved .woocommerce-variation-price {
  display: none !important;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .woocommerce-variation-price .price {
  color: var(--bph-ink) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .woocommerce-variation-description {
  margin: 0 0 8px;
  color: var(--bph-muted);
  font-size: 14px;
  line-height: 1.55;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .woocommerce-variation-description p {
  margin: 0 0 6px;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .woocommerce-variation-availability .stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .woocommerce-variation-availability .stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .woocommerce-variation-availability .stock.in-stock {
  color: #2E7D45 !important;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .woocommerce-variation-availability .stock.out-of-stock {
  color: #B3261E !important;
}

body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .woocommerce-variation-availability .stock.available-on-backorder {
  color: #8A6423 !important;
}

/* Add to cart before a full choice is made: faded, and it says why on hover */
body:not(#bph).single-product form.variations_form:not(.e-loop-item *) .woocommerce-variation-add-to-cart-disabled button.single_add_to_cart_button {
  opacity: 0.45 !important;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  body:not(#bph).single-product .bph-pill {
    min-height: 40px;
    padding: 0 15px;
  }
}


/* =========================================================================
   9. v1.5.0 — featured image fit, fast Add to cart, messages, section headings
   ========================================================================= */

/* ---- the featured image slide: fills its frame without stretching ---- */
body:not(#bph).single-product .bsp-featured-slide figure {
  margin: 0;
}

body:not(#bph).single-product .bsp-featured-slide img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  object-fit: cover !important;
  object-position: center;
}

/* ---- the add-on's catch-all "Fix the errors shown above" line: hidden ---- */
body:not(#bph).single-product [data-bph-hide] {
  display: none !important;
}

/* ---- fast Add to cart: "Adding…" with a little spinner, then a quick tick ---- */
body:not(#bph):not(#bph-2).single-product button.single_add_to_cart_button.bsp-adding,
body:not(#bph):not(#bph-2).single-product button.single_add_to_cart_button.bsp-adding:hover {
  position: relative;
  border-color: #3B203D !important;
  background: #3B203D !important;
  color: transparent !important;
  cursor: progress;
  opacity: 1 !important;
}

body:not(#bph).single-product button.single_add_to_cart_button.bsp-adding > *:not(.bsp-adding-text) {
  visibility: hidden;
}

body:not(#bph).single-product button.single_add_to_cart_button .bsp-adding-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

body:not(#bph).single-product button.single_add_to_cart_button .bsp-adding-text::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: bsp-spin 0.7s linear infinite;
}

@keyframes bsp-spin {
  to { transform: rotate(360deg); }
}

/* WooCommerce / the theme sometimes add their own spinner to a "loading" button */
body:not(#bph).single-product button.single_add_to_cart_button.bsp-adding::after {
  display: none !important;
}

body:not(#bph):not(#bph-2).single-product button.single_add_to_cart_button.bsp-added {
  border-color: #2E7D45 !important;
  background: #2E7D45 !important;
  color: #ffffff !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* ---- if the product can't be added: the reason, right above the button ---- */
body:not(#bph).single-product .bsp-atc-errors {
  flex: 1 1 100%;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px 12px 42px;
  border: 1px solid rgba(179, 38, 30, 0.3);
  border-radius: 14px;
  background: #FFF8F7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23B3261E'/%3E%3Cpath d='M8 4.2v4.6' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='1' fill='%23fff'/%3E%3C/svg%3E") 14px 13px / 18px 18px no-repeat;
  color: #7A1F17;
  font-size: 14px;
  line-height: 1.45;
}

body:not(#bph).single-product .bsp-atc-errors[hidden] {
  display: none;
}

body:not(#bph).single-product .bsp-atc-errors p {
  margin: 0;
}

body:not(#bph).single-product .bsp-atc-errors p + p {
  margin-top: 4px;
}

/* ---- "Products you may like" / "Related Products" headings ----
   Picked up automatically when the heading sits next to a Brittle carousel
   (CSS class brittle-cross-sells / brittle-related / brittle-upsells), or add the
   CSS class brittle-section-heading to any Heading widget.
   Style: plum title with a coral dot in front and a soft line running to the edge. */
body:not(#bph) .brittle-section-heading,
body:not(#bph) .elementor-widget-heading:has(+ .brittle-cross-sells),
body:not(#bph) .elementor-widget-heading:has(+ .brittle-related),
body:not(#bph) .elementor-widget-heading:has(+ .brittle-upsells),
body:not(#bph) .e-con:has(> .brittle-cross-sells) > .elementor-widget-heading,
body:not(#bph) .e-con:has(> .brittle-related) > .elementor-widget-heading,
body:not(#bph) .e-con:has(> .brittle-upsells) > .elementor-widget-heading {
  margin-bottom: 20px !important;
}

body:not(#bph) .brittle-section-heading .elementor-heading-title,
body:not(#bph) .elementor-widget-heading:has(+ .brittle-cross-sells) .elementor-heading-title,
body:not(#bph) .elementor-widget-heading:has(+ .brittle-related) .elementor-heading-title,
body:not(#bph) .elementor-widget-heading:has(+ .brittle-upsells) .elementor-heading-title,
body:not(#bph) .e-con:has(> .brittle-cross-sells) > .elementor-widget-heading .elementor-heading-title,
body:not(#bph) .e-con:has(> .brittle-related) > .elementor-widget-heading .elementor-heading-title,
body:not(#bph) .e-con:has(> .brittle-upsells) > .elementor-widget-heading .elementor-heading-title,
body:not(#bph).single-product section.related.products > h2,
body:not(#bph).single-product section.up-sells > h2,
body:not(#bph).single-product .related.products > h2 {
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  color: #3B203D !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
}

body:not(#bph) .brittle-section-heading .elementor-heading-title::before,
body:not(#bph) .elementor-widget-heading:has(+ .brittle-cross-sells) .elementor-heading-title::before,
body:not(#bph) .elementor-widget-heading:has(+ .brittle-related) .elementor-heading-title::before,
body:not(#bph) .elementor-widget-heading:has(+ .brittle-upsells) .elementor-heading-title::before,
body:not(#bph) .e-con:has(> .brittle-cross-sells) > .elementor-widget-heading .elementor-heading-title::before,
body:not(#bph) .e-con:has(> .brittle-related) > .elementor-widget-heading .elementor-heading-title::before,
body:not(#bph) .e-con:has(> .brittle-upsells) > .elementor-widget-heading .elementor-heading-title::before,
body:not(#bph).single-product section.related.products > h2::before,
body:not(#bph).single-product section.up-sells > h2::before,
body:not(#bph).single-product .related.products > h2::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E99A8A;
  box-shadow: 0 0 0 5px #FBEAE6;
}

body:not(#bph) .brittle-section-heading .elementor-heading-title::after,
body:not(#bph) .elementor-widget-heading:has(+ .brittle-cross-sells) .elementor-heading-title::after,
body:not(#bph) .elementor-widget-heading:has(+ .brittle-related) .elementor-heading-title::after,
body:not(#bph) .elementor-widget-heading:has(+ .brittle-upsells) .elementor-heading-title::after,
body:not(#bph) .e-con:has(> .brittle-cross-sells) > .elementor-widget-heading .elementor-heading-title::after,
body:not(#bph) .e-con:has(> .brittle-related) > .elementor-widget-heading .elementor-heading-title::after,
body:not(#bph) .e-con:has(> .brittle-upsells) > .elementor-widget-heading .elementor-heading-title::after,
body:not(#bph).single-product section.related.products > h2::after,
body:not(#bph).single-product section.up-sells > h2::after,
body:not(#bph).single-product .related.products > h2::after {
  content: "";
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(59, 32, 61, 0.18), rgba(59, 32, 61, 0));
}

@media (max-width: 767px) {
  body:not(#bph) .brittle-section-heading .elementor-heading-title,
  body:not(#bph) .elementor-widget-heading:has(+ .brittle-cross-sells) .elementor-heading-title,
  body:not(#bph) .elementor-widget-heading:has(+ .brittle-related) .elementor-heading-title,
  body:not(#bph) .elementor-widget-heading:has(+ .brittle-upsells) .elementor-heading-title,
  body:not(#bph) .e-con:has(> .brittle-cross-sells) > .elementor-widget-heading .elementor-heading-title,
  body:not(#bph) .e-con:has(> .brittle-related) > .elementor-widget-heading .elementor-heading-title,
  body:not(#bph) .e-con:has(> .brittle-upsells) > .elementor-widget-heading .elementor-heading-title {
    gap: 12px;
    font-size: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(#bph).single-product button.single_add_to_cart_button .bsp-adding-text::before {
    animation-duration: 2s;
  }
}

/* =========================================================================
   10. PRODUCT SECTIONS UNDER THE PRODUCT  (v1.6.0)
   "Products you may also like", "Related products" — any Loop Grid or Loop
   Carousel on a product page. Every card gets the same compact Brittle card,
   whichever Loop Item template it uses, so the two sections always match.
   Desktop 5 cards across · tablet 4 · phones 2 (carousels swipe).
   ========================================================================= */

/* ---- section headings: also when the heading simply sits above a loop ---- */
body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-grid),
body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-carousel),
body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-grid) > .elementor-widget-heading,
body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-carousel) > .elementor-widget-heading {
  margin-bottom: 18px !important;
}

body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-grid) .elementor-heading-title,
body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-carousel) .elementor-heading-title,
body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-grid) > .elementor-widget-heading .elementor-heading-title,
body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-carousel) > .elementor-widget-heading .elementor-heading-title,
body:not(#bph).single-product .brittle-section-heading .elementor-heading-title,
body:not(#bph).single-product .elementor-widget-heading:has(+ .brittle-cross-sells) .elementor-heading-title,
body:not(#bph).single-product .elementor-widget-heading:has(+ .brittle-related) .elementor-heading-title,
body:not(#bph).single-product .elementor-widget-heading:has(+ .brittle-upsells) .elementor-heading-title,
body:not(#bph).single-product .e-con:has(> .brittle-cross-sells) > .elementor-widget-heading .elementor-heading-title,
body:not(#bph).single-product .e-con:has(> .brittle-related) > .elementor-widget-heading .elementor-heading-title,
body:not(#bph).single-product .e-con:has(> .brittle-upsells) > .elementor-widget-heading .elementor-heading-title {
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  color: #3B203D !important;
  font-family: "Outfit", sans-serif !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-grid) .elementor-heading-title::before,
body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-carousel) .elementor-heading-title::before,
body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-grid) > .elementor-widget-heading .elementor-heading-title::before,
body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-carousel) > .elementor-widget-heading .elementor-heading-title::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E99A8A;
  box-shadow: 0 0 0 5px #FBEAE6;
}

body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-grid) .elementor-heading-title::after,
body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-carousel) .elementor-heading-title::after,
body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-grid) > .elementor-widget-heading .elementor-heading-title::after,
body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-carousel) > .elementor-widget-heading .elementor-heading-title::after {
  content: "";
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(59, 32, 61, 0.18), rgba(59, 32, 61, 0));
}

/* ---- the grid: 5 across, 4 on tablets, 2 on phones ---- */
body:not(#bph).single-product .elementor-widget-loop-grid .elementor-loop-container {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* ---- the sections never run wider than 1240px, so the cards stay small on big screens ---- */
body:not(#bph).single-product .elementor-widget-loop-grid,
body:not(#bph).single-product .elementor-widget-loop-carousel,
body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-grid),
body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-carousel),
body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-grid) > .elementor-widget-heading,
body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-carousel) > .elementor-widget-heading {
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- the card ---- */
body:not(#bph).single-product .e-loop-item {
  position: relative !important;
  height: auto;
  min-width: 0;
}

body:not(#bph).single-product .e-loop-item > .e-con {
  position: relative !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  height: 100%;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px 8px 12px !important;
  overflow: hidden;
  border: 1px solid #ECE1D6 !important;
  border-radius: 16px !important;
  background: #FBF6EF !important;
  box-shadow: 0 1px 2px rgba(74, 37, 69, 0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body:not(#bph).single-product .e-loop-item:hover > .e-con {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(74, 37, 69, 0.14) !important;
}

/* inner boxes: no extra padding or width limits, so the card stays compact */
body:not(#bph).single-product .e-loop-item > .e-con .e-con,
body:not(#bph).single-product .e-loop-item > .e-con .e-con-inner {
  min-height: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:not(#bph).single-product .e-loop-item > .e-con .elementor-widget:not(:last-child) {
  margin-bottom: 0 !important;
}

/* ---- picture: square, rounded, gently zooms on hover ---- */
body:not(#bph).single-product .e-loop-item .elementor-widget-image,
body:not(#bph).single-product .e-loop-item .elementor-widget-theme-post-featured-image {
  width: 100% !important;
  overflow: hidden;
  border-radius: 12px;
}

body:not(#bph).single-product .e-loop-item img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.4s ease;
}

body:not(#bph).single-product .e-loop-item:hover img {
  transform: scale(1.04);
}

/* ---- title ---- */
body:not(#bph).single-product .e-loop-item .elementor-heading-title,
body:not(#bph).single-product .e-loop-item h2,
body:not(#bph).single-product .e-loop-item h3 {
  display: -webkit-box !important;
  margin: 2px 2px 0 !important;
  padding: 0 !important;
  overflow: hidden;
  color: #4A2545 !important;
  font-family: "Outfit", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---- price tag (same as the shop cards) ---- */
body:not(#bph).single-product .e-loop-item .price {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: baseline !important;
  gap: 2px 8px;
  margin: 0 2px !important;
  padding: 3px 9px !important;
  border: 1px solid rgba(185, 138, 62, 0.22) !important;
  border-radius: 10px !important;
  background: #F6EBD6 !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums;
}

body:not(#bph).single-product .e-loop-item .price .woocommerce-Price-amount,
body:not(#bph).single-product .e-loop-item .price bdi {
  color: #241521 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

body:not(#bph).single-product .e-loop-item .price .woocommerce-Price-currencySymbol {
  margin-right: 1px;
  font-weight: 600 !important;
  opacity: 0.75;
}

/* on sale: only the sale price in the tag, the old price struck through beside it */
body:not(#bph).single-product .e-loop-item .price:has(del) {
  align-items: center !important;
  gap: 4px 8px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

body:not(#bph).single-product .e-loop-item .price ins {
  order: 1;
  display: inline-flex;
  align-items: baseline;
  padding: 4px 10px;
  border: 1px solid rgba(185, 138, 62, 0.22);
  border-radius: 10px;
  background: #F6EBD6 !important;
  text-decoration: none !important;
}

body:not(#bph).single-product .e-loop-item .price del {
  order: 2;
  opacity: 1 !important;
  color: #9c9089 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px !important;
  white-space: nowrap;
}

body:not(#bph).single-product .e-loop-item .price del .woocommerce-Price-amount,
body:not(#bph).single-product .e-loop-item .price del bdi {
  color: #9c9089 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body:not(#bph).single-product .e-loop-item .price del .woocommerce-Price-currencySymbol {
  opacity: 1;
}

body:not(#bph).single-product .e-loop-item .price .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* ---- add to cart: a round plum plus, bottom-right of the card ---- */
body:not(#bph).single-product .e-loop-item .elementor-widget-button,
body:not(#bph).single-product .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
  position: absolute !important;
  right: 10px;
  bottom: 10px;
  z-index: 2 !important;
  width: auto !important;
  margin: 0 !important;
}

body:not(#bph).single-product .e-loop-item .add_to_cart_button,
body:not(#bph).single-product .e-loop-item .ajax_add_to_cart,
body:not(#bph).single-product .e-loop-item .elementor-button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 50% !important;
  background: #4A2545 !important;
  box-shadow: 0 4px 10px rgba(74, 37, 69, 0.22);
  font-size: 0 !important;
  line-height: 0 !important;
  transition: opacity 0.15s ease;
}

body:not(#bph).single-product .e-loop-item .elementor-button:hover,
body:not(#bph).single-product .e-loop-item .add_to_cart_button:hover {
  opacity: 0.85;
}

body:not(#bph).single-product .e-loop-item .elementor-button-content-wrapper,
body:not(#bph).single-product .e-loop-item .elementor-button-icon,
body:not(#bph).single-product .e-loop-item .elementor-button-text {
  display: none !important;
}

body:not(#bph).single-product .e-loop-item .add_to_cart_button::before,
body:not(#bph).single-product .e-loop-item .add_to_cart_button::after,
body:not(#bph).single-product .e-loop-item .elementor-button::before,
body:not(#bph).single-product .e-loop-item .elementor-button::after {
  content: "";
  position: absolute;
  border-radius: 2px;
  background: #ffffff;
}

body:not(#bph).single-product .e-loop-item .add_to_cart_button::before,
body:not(#bph).single-product .e-loop-item .elementor-button::before {
  width: 13px;
  height: 2px;
}

body:not(#bph).single-product .e-loop-item .add_to_cart_button::after,
body:not(#bph).single-product .e-loop-item .elementor-button::after {
  width: 2px;
  height: 13px;
}

/* keep the price clear of the round button */
body:not(#bph).single-product .e-loop-item .elementor-widget-woocommerce-product-price {
  padding-right: 36px !important;
}

/* ---- the whole card opens the product ---- */
body:not(#bph).single-product .e-loop-item > .e-con .e-con,
body:not(#bph).single-product .e-loop-item > .e-con .e-con-inner,
body:not(#bph).single-product .e-loop-item > .e-con .elementor-element:not(.elementor-widget-button):not(.elementor-widget-woocommerce-product-add-to-cart),
body:not(#bph).single-product .e-loop-item > .e-con .elementor-widget-container {
  position: static !important;
}

body:not(#bph).single-product .e-loop-item .elementor-heading-title a,
body:not(#bph).single-product .e-loop-item h2 a,
body:not(#bph).single-product .e-loop-item h3 a {
  color: inherit !important;
  text-decoration: none !important;
}

body:not(#bph).single-product .e-loop-item .elementor-heading-title a::after,
body:not(#bph).single-product .e-loop-item h2 a::after,
body:not(#bph).single-product .e-loop-item h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 18px;
}

body:not(#bph).single-product .e-loop-item .elementor-heading-title a:focus-visible::after,
body:not(#bph).single-product .e-loop-item h2 a:focus-visible::after,
body:not(#bph).single-product .e-loop-item h3 a:focus-visible::after {
  outline: 2px solid #4A2545;
  outline-offset: -2px;
}

body:not(#bph).single-product .e-loop-item [class*="wishlist"],
body:not(#bph).single-product .e-loop-item .added_to_cart {
  position: relative;
  z-index: 2 !important;
}

/* ---- carousels: room for the hover lift, a clear gap above the dots, plum dots ---- */
body:not(#bph).single-product .elementor-widget-loop-carousel .swiper {
  padding: 4px 2px 40px !important;
}

body:not(#bph).single-product .elementor-widget-loop-carousel .swiper-pagination {
  top: auto !important;
  bottom: 6px !important;
}

body:not(#bph).single-product .elementor-widget-loop-carousel .swiper-slide {
  height: auto !important;
}

body:not(#bph).single-product .elementor-widget-loop-carousel .swiper-pagination-bullet {
  background: #3B203D !important;
  opacity: 0.25;
}

body:not(#bph).single-product .elementor-widget-loop-carousel .swiper-pagination-bullet-active {
  width: 22px;
  border-radius: 999px;
  opacity: 1;
}

/* ---- tablets ---- */
@media (max-width: 1024px) {
  body:not(#bph).single-product .elementor-widget-loop-grid .elementor-loop-container {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* ---- phones: 2 across, smaller type and button ---- */
@media (max-width: 767px) {
  body:not(#bph).single-product .elementor-widget-loop-grid .elementor-loop-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body:not(#bph).single-product .e-loop-item > .e-con {
    gap: 6px !important;
    padding: 7px 7px 10px !important;
    border-radius: 14px !important;
  }

  body:not(#bph).single-product .e-loop-item .elementor-heading-title,
  body:not(#bph).single-product .e-loop-item h2,
  body:not(#bph).single-product .e-loop-item h3 {
    font-size: 13px !important;
  }

  body:not(#bph).single-product .e-loop-item .price {
    padding: 3px 8px !important;
  }

  body:not(#bph).single-product .e-loop-item .price .woocommerce-Price-amount,
  body:not(#bph).single-product .e-loop-item .price bdi {
    font-size: 13px !important;
  }

  body:not(#bph).single-product .e-loop-item .price del,
  body:not(#bph).single-product .e-loop-item .price del .woocommerce-Price-amount,
  body:not(#bph).single-product .e-loop-item .price del bdi {
    font-size: 11px !important;
  }

  body:not(#bph).single-product .e-loop-item .elementor-widget-button,
  body:not(#bph).single-product .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    right: 8px;
    bottom: 9px;
  }

  body:not(#bph).single-product .e-loop-item .add_to_cart_button,
  body:not(#bph).single-product .e-loop-item .ajax_add_to_cart,
  body:not(#bph).single-product .e-loop-item .elementor-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
  }

  body:not(#bph).single-product .e-loop-item .elementor-widget-woocommerce-product-price {
    padding-right: 34px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(#bph).single-product .e-loop-item > .e-con,
  body:not(#bph).single-product .e-loop-item img {
    transition: none;
  }

  body:not(#bph).single-product .e-loop-item:hover > .e-con,
  body:not(#bph).single-product .e-loop-item:hover img {
    transform: none;
  }
}

/* =========================================================================
   11. PRODUCT SECTIONS ON PHONES  (v1.6.3)
   Heading centred between two fine lines (no dot), smaller cards
   (2.4 in view in carousels, the next one peeking), smaller arrows.
   ========================================================================= */
@media (max-width: 767px) {
  body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-grid) .elementor-heading-title,
  body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-carousel) .elementor-heading-title,
  body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-grid) > .elementor-widget-heading .elementor-heading-title,
  body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-carousel) > .elementor-widget-heading .elementor-heading-title,
  body:not(#bph).single-product .brittle-section-heading .elementor-heading-title,
  body:not(#bph).single-product .elementor-widget-heading:has(+ .brittle-cross-sells) .elementor-heading-title,
  body:not(#bph).single-product .elementor-widget-heading:has(+ .brittle-related) .elementor-heading-title,
  body:not(#bph).single-product .elementor-widget-heading:has(+ .brittle-upsells) .elementor-heading-title,
  body:not(#bph).single-product .e-con:has(> .brittle-cross-sells) > .elementor-widget-heading .elementor-heading-title,
  body:not(#bph).single-product .e-con:has(> .brittle-related) > .elementor-widget-heading .elementor-heading-title,
  body:not(#bph).single-product .e-con:has(> .brittle-upsells) > .elementor-widget-heading .elementor-heading-title {
    justify-content: center;
    gap: 12px;
    font-size: 18px !important;
    text-align: center !important;
    white-space: nowrap;
  }

  /* the dot becomes the left line, matching the right one */
  body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-grid) .elementor-heading-title::before,
  body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-carousel) .elementor-heading-title::before,
  body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-grid) > .elementor-widget-heading .elementor-heading-title::before,
  body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-carousel) > .elementor-widget-heading .elementor-heading-title::before,
  body:not(#bph).single-product .brittle-section-heading .elementor-heading-title::before,
  body:not(#bph).single-product .elementor-widget-heading:has(+ .brittle-cross-sells) .elementor-heading-title::before,
  body:not(#bph).single-product .elementor-widget-heading:has(+ .brittle-related) .elementor-heading-title::before,
  body:not(#bph).single-product .elementor-widget-heading:has(+ .brittle-upsells) .elementor-heading-title::before,
  body:not(#bph).single-product .e-con:has(> .brittle-cross-sells) > .elementor-widget-heading .elementor-heading-title::before,
  body:not(#bph).single-product .e-con:has(> .brittle-related) > .elementor-widget-heading .elementor-heading-title::before,
  body:not(#bph).single-product .e-con:has(> .brittle-upsells) > .elementor-widget-heading .elementor-heading-title::before {
    flex: 1 1 auto;
    width: auto;
    min-width: 20px;
    height: 1px;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(270deg, rgba(59, 32, 61, 0.22), rgba(59, 32, 61, 0));
  }

  body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-grid) .elementor-heading-title::after,
  body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-carousel) .elementor-heading-title::after,
  body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-grid) > .elementor-widget-heading .elementor-heading-title::after,
  body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-carousel) > .elementor-widget-heading .elementor-heading-title::after,
  body:not(#bph).single-product .brittle-section-heading .elementor-heading-title::after,
  body:not(#bph).single-product .elementor-widget-heading:has(+ .brittle-cross-sells) .elementor-heading-title::after,
  body:not(#bph).single-product .elementor-widget-heading:has(+ .brittle-related) .elementor-heading-title::after,
  body:not(#bph).single-product .elementor-widget-heading:has(+ .brittle-upsells) .elementor-heading-title::after,
  body:not(#bph).single-product .e-con:has(> .brittle-cross-sells) > .elementor-widget-heading .elementor-heading-title::after,
  body:not(#bph).single-product .e-con:has(> .brittle-related) > .elementor-widget-heading .elementor-heading-title::after,
  body:not(#bph).single-product .e-con:has(> .brittle-upsells) > .elementor-widget-heading .elementor-heading-title::after {
    flex: 1 1 auto;
    min-width: 20px;
    background: linear-gradient(90deg, rgba(59, 32, 61, 0.22), rgba(59, 32, 61, 0));
  }

  body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-grid),
  body:not(#bph).single-product .elementor-widget-heading:has(+ .elementor-widget-loop-carousel),
  body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-grid) > .elementor-widget-heading,
  body:not(#bph).single-product .e-con:has(> .elementor-widget-loop-carousel) > .elementor-widget-heading {
    margin-bottom: 14px !important;
  }

  /* smaller cards */
  body:not(#bph).single-product .e-loop-item > .e-con {
    gap: 5px !important;
    padding: 6px 6px 9px !important;
    border-radius: 12px !important;
  }

  body:not(#bph).single-product .e-loop-item .elementor-widget-image,
  body:not(#bph).single-product .e-loop-item .elementor-widget-theme-post-featured-image,
  body:not(#bph).single-product .e-loop-item img {
    border-radius: 8px;
  }

  body:not(#bph).single-product .e-loop-item .elementor-heading-title,
  body:not(#bph).single-product .e-loop-item h2,
  body:not(#bph).single-product .e-loop-item h3 {
    margin: 1px 1px 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  body:not(#bph).single-product .e-loop-item .price {
    margin: 0 1px !important;
    padding: 2px 7px !important;
    border-radius: 8px !important;
  }

  body:not(#bph).single-product .e-loop-item .price ins {
    padding: 2px 7px;
    border-radius: 8px;
  }

  body:not(#bph).single-product .e-loop-item .price .woocommerce-Price-amount,
  body:not(#bph).single-product .e-loop-item .price bdi {
    font-size: 12px !important;
  }

  body:not(#bph).single-product .e-loop-item .price del,
  body:not(#bph).single-product .e-loop-item .price del .woocommerce-Price-amount,
  body:not(#bph).single-product .e-loop-item .price del bdi {
    font-size: 10px !important;
  }

  body:not(#bph).single-product .e-loop-item .elementor-widget-button,
  body:not(#bph).single-product .e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    right: 6px;
    bottom: 7px;
  }

  body:not(#bph).single-product .e-loop-item .add_to_cart_button,
  body:not(#bph).single-product .e-loop-item .ajax_add_to_cart,
  body:not(#bph).single-product .e-loop-item .elementor-button {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
  }

  body:not(#bph).single-product .e-loop-item .add_to_cart_button::before,
  body:not(#bph).single-product .e-loop-item .elementor-button::before {
    width: 10px;
  }

  body:not(#bph).single-product .e-loop-item .add_to_cart_button::after,
  body:not(#bph).single-product .e-loop-item .elementor-button::after {
    height: 10px;
  }

  body:not(#bph).single-product .e-loop-item .elementor-widget-woocommerce-product-price {
    padding-right: 28px !important;
  }

  /* the badges ("New", "Recently viewed") a touch smaller on the small cards */
  body:not(#bph).single-product .e-loop-item .brittle-badge-row {
    top: 10px;
    left: 10px;
    right: 10px;
    gap: 4px;
  }

  body:not(#bph).single-product .e-loop-item .brittle-badge {
    padding: 4px 7px;
    font-size: 9px;
  }

  /* smaller arrows, and less room under the cards */
  body:not(#bph).single-product .elementor-widget-loop-carousel .elementor-swiper-button {
    font-size: 22px !important;
  }

  body:not(#bph).single-product .elementor-widget-loop-carousel .elementor-swiper-button svg {
    width: 22px !important;
    height: 22px !important;
  }

  body:not(#bph).single-product .elementor-widget-loop-carousel .swiper {
    padding-bottom: 32px !important;
  }

  body:not(#bph).single-product .elementor-widget-loop-carousel .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 4px !important;
  }

  body:not(#bph).single-product .elementor-widget-loop-carousel .swiper-pagination-bullet-active {
    width: 18px;
  }
}