.product-details-section {
  margin-top: 30px;
  font-family: inherit;
}

.product-section-title {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
/* Ensure our section appears as a vertical block */
.woocommerce div.product .product-details-section {
  display: block !important;
  width: 100%;
  clear: both;
}

/* Style for the section title */
.product-section-title {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

/* Reset any inline-flex applied by the theme on meta rows */
.woocommerce div.product .product_meta > span {
  display: block !important;
  width: 100%;
}
/* Hide SKU value and label */
.woocommerce div.product .product_meta .sku,
.woocommerce div.product .product_meta span.sku_wrapper {
  display: none !important;
}

/* Hide category and tags */
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as {
  display: none !important;
}
.care-list {
  padding-left: 18px;
  margin-bottom: 20px;
  list-style-type: disc;
}

.care-list li {
  margin-bottom: 4px;
  font-size: 14px;
}
.fabric-list {
  padding-left: 20px;
  margin-bottom: 20px;
}
.fabric-list li {
  margin-bottom: 4px;
  line-height: 1.5;
}
/* WooCommerce Cart — apply typography only inside the page content */
body.woocommerce-cart .qodef-content .woocommerce,
body.woocommerce-cart .qodef-content .woocommerce *,

body.woocommerce-cart .site-main .woocommerce,
body.woocommerce-cart .site-main .woocommerce *,

body.woocommerce-cart .entry-content .woocommerce,
body.woocommerce-cart .entry-content .woocommerce * {
  font-family: "Work Sans", sans-serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

/* Keep cart headings/table headers a bit heavier */
body.woocommerce-cart .woocommerce h1,
body.woocommerce-cart .woocommerce h2,
body.woocommerce-cart .woocommerce h3,
body.woocommerce-cart .woocommerce table.shop_table th,
body.woocommerce-cart .woocommerce .cart_totals h2 {
  font-weight: 600 !important;
  text-transform: none !important;
}

/* Inputs, coupon field, buttons */
body.woocommerce-cart .woocommerce input,
body.woocommerce-cart .woocommerce select,
body.woocommerce-cart .woocommerce textarea,
body.woocommerce-cart .woocommerce .button,
body.woocommerce-cart .woocommerce button.button {
  font-family: "Work Sans", sans-serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
/* Ensure Afterpay/Clearpay cart message shows above buttons */
.woocommerce-cart .afterpay-paragraph,
.woocommerce-cart .afterpay-widget,
.woocommerce-cart .wcpay-badge,
.woocommerce-cart [class*="afterpay"],
.woocommerce-cart [class*="clearpay"] {
  display: block !important;
  position: relative;
  z-index: 3;           /* above the black button */
  margin-bottom: 12px;  /* space before express buttons */
}

/* In case the checkout button is overlaying with higher z-index */
.woocommerce-cart .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  position: relative;
  z-index: 1;
}
/* PRODUCT PAGE BODY COPY — make it match the title's font, but smaller & lowercase */
body.single-product .summary p,
body.single-product .summary li,
body.single-product .woocommerce-product-details__short-description p,
body.single-product .woocommerce-product-details__short-description li,
body.single-product .woocommerce-Tabs .panel p,
body.single-product .woocommerce-Tabs .panel li {
  font-family: "Work Sans", sans-serif !important; /* match title family */
  font-weight: 400 !important;                     /* normal weight */
  font-size: 15px !important;                      /* tweak: 13–15px */
  line-height: 1.7 !important;
  letter-spacing: 0 !important;                    /* titles have tracking; body shouldn't */
  text-transform: none !important;                 /* keep body lowercase */
  color: inherit !important;                       /* follow the section color */
}

/* Optional: keep those section headings consistent (no change to size) */
body.single-product .summary h2,
body.single-product .woocommerce-Tabs .panel h2 {
  font-family: "Work Sans", sans-serif !important;
  font-weight: 600;
}
/* Product sections (tabs/accordions): body text colour = title colour */
body.single-product .woocommerce-Tabs .panel p,
body.single-product .woocommerce-Tabs .panel li,
body.single-product .woocommerce-Tabs .panel a,
body.single-product .woocommerce-Tabs .panel span {
  color: rgb(50, 50, 50) !important; /* #323232 */
}
/* Hide the product data tabs block under the gallery (Description / Additional info / Reviews) */
.single-product .woocommerce-tabs,
.single-product .woocommerce-Tabs { display:none !important; }
/* Single product: make the Afterpay/Clearpay message match site typography */
body.single-product .summary [class*="afterpay"],
body.single-product .summary [class*="clearpay"],
body.single-product .summary .afterpay-paragraph,
body.single-product .summary .afterpay-widget {
  display: block !important;
  margin-top: 8px;                     /* space under product name */
  font-family: "Work Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;          /* tweak to 14/16 if you prefer */
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgb(50,50,50) !important;     /* matches your body/title colour */
  text-decoration: none !important;
}

/* Kill underline on the link inside the message (some plugins force it) */
body.single-product .summary [class*="afterpay"] a,
body.single-product .summary [class*="clearpay"] a {
  text-decoration: none !important;
  border-bottom: 0 !important;         /* some themes use bottom border as underline */
  box-shadow: none !important;         /* some themes fake underlines with shadow */
}

/* If the widget injects its own font on inner spans, inherit ours */
body.single-product .summary [class*="afterpay"] *,
body.single-product .summary [class*="clearpay"] * {
  font-family: inherit !important;
  text-decoration: none !important;
}
/* === MOBILE: one big main image + horizontal thumbnail strip (no plugin) === */
@media (max-width: 767px){

  /* Ensure the main gallery uses natural sizing and stays visible */
  #qodef-woo-page.qodef--single .woocommerce-product-gallery,
  #qodef-woo-page.qodef--single .woocommerce-product-gallery__wrapper,
  #qodef-woo-page.qodef--single .woocommerce-product-gallery__image,
  #qodef-woo-page.qodef--single .woocommerce-product-gallery__image img {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
  }
  #qodef-woo-page.qodef--single .woocommerce-product-gallery__image img{
    width: 100% !important;
    display: block !important;
    object-fit: contain;
  }

  /* SHOW thumbnails on mobile (we previously hid them) and turn them into a swipeable row */
  #qodef-woo-page.qodef--single .flex-control-thumbs,
  #qodef-woo-page.qodef--single .qodef-woo-thumbnails-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    margin: 10px 0 0 !important;
    padding: 0 4px !important; /* small side padding so first/last thumb aren’t hard against edges */
  }

  /* Normalize list structure for both Woo default and Qode wrappers */
  #qodef-woo-page.qodef--single .flex-control-thumbs li,
  #qodef-woo-page.qodef--single .qodef-woo-thumbnails-wrapper li,
  #qodef-woo-page.qodef--single .qodef-woo-thumbnails-wrapper .qodef-e {
    list-style: none !important;
    flex: 0 0 auto !important;
    width: 72px !important;     /* thumb size; adjust 64–88px to taste */
    margin: 0 !important;
  }

  /* Thumbnail images */
  #qodef-woo-page.qodef--single .flex-control-thumbs img,
  #qodef-woo-page.qodef--single .qodef-woo-thumbnails-wrapper img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 4px;
  }

  /* Optional: highlight the active thumb if theme adds an 'is-active' class */
  #qodef-woo-page.qodef--single .flex-control-thumbs li.is-active img,
  #qodef-woo-page.qodef--single .qodef-woo-thumbnails-wrapper .is-active img {
    outline: 2px solid rgba(0,0,0,.35);
    outline-offset: 0;
  }

  /* Hide scrollbar visual on WebKit for a cleaner look (scroll still works) */
  #qodef-woo-page.qodef--single .flex-control-thumbs::-webkit-scrollbar,
  #qodef-woo-page.qodef--single .qodef-woo-thumbnails-wrapper::-webkit-scrollbar {
    display: none;
  }
}
/* === MOBILE: put the BIG image first, thumbnails under it === */
@media (max-width: 767px){

  /* Make the images container a column so we can control order */
  #qodef-woo-page.qodef--single .product .images,
  #qodef-woo-page.qodef--single .qodef-woo-product-gallery,
  #qodef-woo-page.qodef--single .qodef-woo-thumbnails-row,
  #qodef-woo-page.qodef--single .qodef-woo-thumbnails-holder {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Ensure the main Woo gallery comes first */
  #qodef-woo-page.qodef--single .woocommerce-product-gallery {
    order: 1 !important;
    margin: 0 0 10px !important;  /* a little space above thumbnails */
  }

  /* Thumbnails row comes second */
  #qodef-woo-page.qodef--single .qodef-woo-thumbnails-wrapper,
  #qodef-woo-page.qodef--single .flex-control-thumbs {
    order: 2 !important;
  }
}
/* === MOBILE: force hero image first, thumbnails below (no plugins/JS) === */
@media (max-width: 767px){

  /* 1) Turn the common parent into a 2-row grid.
     Try these likely parents; whichever exists will apply. */
  .gallery_wrapper,
  .qodef-woo-single-images,
  .product .images {
    display: grid !important;
    grid-template-areas:
      "hero"
      "thumbs";
    grid-auto-rows: auto;
    row-gap: 10px;
  }

  /* 2) Put the main gallery into the "hero" area */
  .gallery_wrapper .woocommerce-product-gallery,
  .qodef-woo-single-images .woocommerce-product-gallery,
  .product .images .woocommerce-product-gallery{
    grid-area: hero !important;
    width: 100% !important;
  }

  /* 3) Put the thumbnail strip into the "thumbs" area */
  .gallery_wrapper .qodef-woo-thumbnails-wrapper,
  .qodef-woo-single-images .qodef-woo-thumbnails-wrapper,
  .product .images .qodef-woo-thumbnails-wrapper,
  .gallery_wrapper .flex-control-thumbs,
  .qodef-woo-single-images .flex-control-thumbs,
  .product .images .flex-control-thumbs {
    grid-area: thumbs !important;
  }

  /* 4) Make the hero image scale nicely */
  .woocommerce-product-gallery__wrapper,
  .woocommerce-product-gallery__image,
  .woocommerce-product-gallery__image img{
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* 5) Make thumbs a tidy horizontal row you can swipe */
  .qodef-woo-thumbnails-wrapper,
  .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    margin: 0;
    padding: 0 4px;
  }
  .qodef-woo-thumbnails-wrapper li,
  .flex-control-thumbs li {
    list-style: none !important;
    flex: 0 0 auto !important;
    width: 72px !important; /* tweak 64–88px to taste */
    margin: 0 !important;
  }
  .qodef-woo-thumbnails-wrapper img,
  .flex-control-thumbs img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 4px;
  }
}
@media (max-width: 767px){
  .qodef-woo-thumbnails-wrapper li,
  .flex-control-thumbs li { width: 80px !important; } /* try 64–96px */
  .qodef-woo-thumbnails-wrapper,
  .flex-control-thumbs { gap: 10px !important; }
}
@media (max-width: 767px){
  .woocommerce-product-gallery__image img{
    object-fit: cover !important; /* was contain */
  }
}
@media (max-width: 767px){
  .qodef-woo-thumbnails-wrapper,
  .flex-control-thumbs {
    mask-image: linear-gradient(90deg, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
  }
}
/* Disable Esmee preloader on Cart page only */
body.woocommerce-cart .eltdf-page-loader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
/* Popup email field: make the typed text + placeholder white */
.qodef-sp-content .wpcf7 input[type="email"] {
  color: #fff !important;         /* text you type */
}

/* the grey hint text ("Your e-mail") */
.qodef-sp-content .wpcf7 input[type="email"]::placeholder {
  color: #fff !important;
  opacity: 1;                      /* ensure full white */
}

/* keep autofill text white on iOS/Chrome */
.qodef-sp-content .wpcf7 input[type="email"]:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
}
/* Mobile: justify product body paragraphs (incl. ACF fields in the summary) */
@media (max-width: 768px) {
  body.single-product .summary p,
  body.single-product .woocommerce-Tabs .panel p {
    text-align: justify;
    text-justify: inter-word;   /* nicer word spacing where supported */
    -webkit-hyphens: auto;
            hyphens: auto;
  }

  /* If you see an occasional blank bullet, hide empty list items */
  body.single-product .woocommerce-Tabs .panel li:empty { display:none; }
}
/* Hide captions/titles in product image lightboxes & zooms */
.pswp__caption,
.pswp__caption__center,                     /* WooCommerce PhotoSwipe */
.woocommerce-product-gallery__image figcaption,
.elementor-lightbox .elementor-lightbox-caption,
.qodef-woo-lightbox-caption,
.qodef-woo-single .qodef-woo-gallery .qodef-e-caption {
  display: none !important;
}
/* Newsletter popup (Esmee Subscribe Popup) — email field text color */
.qodef-sp-content input[type="email"].wpcf7-form-control {
  color: #fff !important;               /* typed text */
  -webkit-text-fill-color: #fff !important; /* iOS/Safari */
  caret-color: #fff;                     /* blinking cursor color */
}

/* Keep it white when field is focused */
.qodef-sp-content input[type="email"].wpcf7-form-control:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Make browser autofill text white as well */
.qodef-sp-content input[type="email"].wpcf7-form-control:-webkit-autofill,
.qodef-sp-content input[type="email"].wpcf7-form-control:-webkit-autofill:hover,
.qodef-sp-content input[type="email"].wpcf7-form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  transition: background-color 9999s ease-in-out 0s; /* prevents yellow flash */
}

/* (Optional) ensure the placeholder stays white */
.qodef-sp-content input[type="email"]::placeholder {
  color: #fff;
  opacity: .75;
}
/* CART: keep the Afterpay message clear of the Checkout button */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
  margin-top: 18px !important;     /* give the area breathing room */
}

.woocommerce-cart .cart_totals .afterpay-paragraph,
.woocommerce-cart .cart_totals .afterpay_paragraph,
.woocommerce-cart .cart_totals .afterpay-widget,
.woocommerce-cart .cart_totals .afterpay-placement,
.woocommerce-cart .cart_totals [class*="afterpay"],
.woocommerce-cart .cart_totals [id*="afterpay"] {
  display: block !important;
  float: none !important;
  clear: both !important;           /* forces it to sit on its own row */
  margin: 10px 0 14px !important;   /* space above the button */
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
  position: relative;
  z-index: 1;                        /* avoid overlaying the Afterpay text */
}
/* Cart: hide the "Change address" toggle under Shipping */
.woocommerce-cart .shipping-calculator-button {
  display: none !important;
}
/* CART: keep Afterpay message above the Checkout button */
.woocommerce-cart .cart_totals { display:block !important; position:relative; }
.woocommerce-cart .cart_totals .shop_table { overflow:visible !important; }

/* The Afterpay placement/text itself */
.woocommerce-cart .cart_totals [class*="afterpay"],
.woocommerce-cart .cart_totals [id*="afterpay"]{
  display:block !important;
  float:none !important;
  clear:both !important;
  position:relative !important;
  z-index:3 !important;          /* above any button container */
  margin:12px 0 16px !important; /* space above/below */
}

/* The Checkout button container */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout{
  position:static !important;    /* no overlay/absolute */
  float:none !important;
  clear:both !important;         /* always start on new row */
  margin-top:22px !important;    /* breathing room */
  width:100%;
  z-index:1;
}

/* Theme-specific nudge (Esmee/Qode sometimes adds transforms/margins) */
.qodef-woo-page .cart_totals .wc-proceed-to-checkout{ transform:none !important; }
.qodef-woo-page .cart_totals .wc-proceed-to-checkout a.checkout-button{ margin-top:0 !important; }

/* Extra spacing on small screens */
@media (max-width: 768px){
  .woocommerce-cart .cart_totals .wc-proceed-to-checkout{ margin-top:28px !important; }
}
/* ===== SAL subscribe popup (Esmee/Qode) refined fix ===== */

/* Entire popup container background → white */
#qodef-subscribe-popup-modal,
#qodef-subscribe-popup-modal .qodef-sp-content-container {
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Title color + size */
#qodef-subscribe-popup-modal .qodef-sp-content-container h1,
#qodef-subscribe-popup-modal .qodef-sp-content-container h2,
#qodef-subscribe-popup-modal .qodef-sp-content-container .qodef-m-title,
#qodef-subscribe-popup-modal .qodef-sp-content-container .popup-title {
  color: #111 !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.15 !important;
  font-weight: 500;
}

/* Body text and labels back to dark */
#qodef-subscribe-popup-modal .qodef-sp-content-container p,
#qodef-subscribe-popup-modal .qodef-sp-content-container label {
  color: #111 !important;
}

/* Input field (email) text + placeholder black */
#qodef-subscribe-popup-modal .qodef-sp-content-container input[type="email"],
#qodef-subscribe-popup-modal .qodef-sp-content-container input[type="text"] {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ddd !important;
}

#qodef-subscribe-popup-modal .qodef-sp-content-container input::placeholder {
  color: #666 !important;
  opacity: 1;
}

/* Send button styling */
#qodef-subscribe-popup-modal .qodef-sp-content-container button,
#qodef-subscribe-popup-modal .qodef-sp-content-container .qodef-m-button {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
}

#qodef-subscribe-popup-modal .qodef-sp-content-container button:hover,
#qodef-subscribe-popup-modal .qodef-sp-content-container .qodef-m-button:hover {
  background: #000 !important;
}

/* Remove dark outer border */
#qodef-subscribe-popup-modal .qodef-sp-inner {
  background: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* Overlay dimmer lighter or transparent */
#qodef-subscribe-popup-modal.qodef-sp-holder {
  background: rgba(0, 0, 0, 0.1) !important;
}
/* === Force text and placeholder color to black in Qode popup === */
#qodef-subscribe-popup-modal .qodef-sp-content-container,
#qodef-subscribe-popup-modal .qodef-sp-content-container * {
  color: #111 !important;
  text-shadow: none !important;
}

/* Specifically force the title block (common Esmee selector) */
#qodef-subscribe-popup-modal .qodef-sp-title,
#qodef-subscribe-popup-modal .qodef-sp-subtitle,
#qodef-subscribe-popup-modal .qodef-sp-text {
  color: #111 !important;
}

/* Force input text + placeholder black (strong override) */
#qodef-subscribe-popup-modal input[type="email"],
#qodef-subscribe-popup-modal input[type="text"],
#qodef-subscribe-popup-modal input::placeholder {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important; /* handles Safari */
}
/* === Exceptions: adjust dark-on-light contrast === */

/* 1. Text inside black send area → white */
#qodef-subscribe-popup-modal .qodef-sp-content-container button,
#qodef-subscribe-popup-modal .qodef-sp-content-container .qodef-m-button,
#qodef-subscribe-popup-modal .qodef-sp-content-container .qodef-sp-form label {
  color: #fff !important;
}

/* 2. Checkbox border & tick box for "Disable this popup" → black */
#qodef-subscribe-popup-modal .qodef-sp-content-container input[type="checkbox"] {
  accent-color: #111 !important; /* modern browsers */
  border: 1px solid #111 !important;
  background: #fff !important;
}
/* === Esmee Subscribe Popup: final polish === */

/* Make panel white, remove dark frame (if you haven't already) */
#qodef-subscribe-popup-modal,
#qodef-subscribe-popup-modal .qodef-sp-inner,
#qodef-subscribe-popup-modal .qodef-sp-content-container{
  background:#fff !important;
  border:none !important;
  box-shadow:none !important;
}

/* Title / subtitle black (in case you didn't inline-style them) */
#qodef-subscribe-popup-modal .qodef-sp-title,
#qodef-subscribe-popup-modal .qodef-sp-subtitle{
  color:#111 !important;
}

/* CF7 form inside popup: inputs readable on white */
#qodef-subscribe-popup-modal .sal-sp-form input[type="email"],
#qodef-subscribe-popup-modal .sal-sp-form input[type="text"]{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #ddd !important;
}
#qodef-subscribe-popup-modal .sal-sp-form input::placeholder{
  color:#666 !important;
  opacity:1;
}

/* Email label (sits on the black block next to SEND) → white */
#qodef-subscribe-popup-modal .sal-sp-form label{
  color:#fff !important;
}

/* SEND button stays dark on white */
#qodef-subscribe-popup-modal .qodef-m-button,
#qodef-subscribe-popup-modal button[type="submit"]{
  background:#111 !important;
  color:#fff !important;
  border:0 !important;
}

/* "Disable This Pop-up" box: make the square visible and dark */
#qodef-subscribe-popup-modal .qodef-sp-prevent-input{
  display:inline-flex;
  width:16px; height:16px;
  border:2px solid #111 !important;
  background:#fff !important;
  align-items:center; justify-content:center;
  margin-right:8px;
}
#qodef-subscribe-popup-modal .qodef-sp-prevent-input svg path{
  fill:#111 !important;   /* the little tick/cross paths */
}
#qodef-subscribe-popup-modal .qodef-sp-prevent-label{
  color:#111 !important;
}
/* --- MAKE "SEND" TEXT WHITE (beats the global black rule) --- */
#qodef-subscribe-popup-modal .qodef-sp-content-container .wpcf7-form
.qodef-button.qodef-layout--filled .qodef-m-text {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* Safari */
  text-shadow: none !important;
}

/* Keep the submit button background dark (in case theme toggles it) */
#qodef-subscribe-popup-modal .qodef-sp-content-container .wpcf7-form
.qodef-button.qodef-layout--filled {
  background: #111 !important;
  border: 0 !important;
}

/* If you ever show an EMAIL label above the field, force it white on the dark strip */
#qodef-subscribe-popup-modal .qodef-sp-content-container .wpcf7-form label[for*="email"] {
  color: #fff !important;
}
/* Hide the black "Select options" button on Shop/Category archives only */
.post-type-archive-product .qodef-woo-product-list .qodef-m-button,
.tax-product_cat .qodef-woo-product-list .qodef-m-button,
.woocommerce.archive ul.products li.product .button {
  display: none !important;
}