/*
 * 100-bs-single-product-layout.css — BlackSpace single product page
 * Enqueued by 100-bs-single-product-layout-styles.php on is_product() only.
 * Updated March 2026.
 *
 * Scope: five targeted changes —
 *   1. Verdana font override (replaces Poppins on all product-page elements)
 *   2. Stock badge redesign (green pill with dot)
 *   3. Dokan seller card redesign (warm card + "Sold by" label + meta + CTA)
 *   4. ATC widget spacing (restores gap between stock / form.cart / affirm)
 *   5. Gallery main image constrained to 635×635px, object-fit: contain
 *
 * All properties use !important — Elementor Pro + WoodMart post CSS uses
 * 3-class specificity that overrides plain selectors without it.
 *
 * Body classes on single product:
 *   body.single-product.woocommerce.dokan-theme-woodmart.elementor-default
 *
 * Colors: #b0743e bronze | #1e1919 deep-brown | #f5f0eb warm-off-white
 *   #c8925e bronze-300 | #efd9c0 bronze-100 | #8c5d31 bronze-700
 *   #474747 graphite | #e6e6e6 silver-mist | #1a1a1a neutral-900
 */


/* ══════════════════════════════════════════════════════════
   1. VERDANA FONT OVERRIDE
   ──────────────────────────────────────────────────────────
   WoodMart's Elementor kit sets Poppins on headings and
   several WooCommerce elements. These selectors cover every
   confirmed Poppins-rendered element on the product page
   (verified via getComputedStyle() in live DOM).
   ══════════════════════════════════════════════════════════ */

/* Product title H1 */
body.single-product h1.product_title,
body.single-product h1.wd-entities-title {
  font-family: Verdana, Geneva, sans-serif !important;
}

/* Price */
body.single-product .price,
body.single-product .price .woocommerce-Price-amount,
body.single-product .price .woocommerce-Price-currencySymbol,
body.single-product .price bdi {
  font-family: Verdana, Geneva, sans-serif !important;
}

/* Add to Cart button */
body.single-product .single_add_to_cart_button {
  font-family: Verdana, Geneva, sans-serif !important;
}

/* All Elementor heading widgets on the product page template
   (covers "Customer Reviews" H2, related section headings, etc.) */
body.single-product .elementor-heading-title {
  font-family: Verdana, Geneva, sans-serif !important;
}

/* All Elementor widget text containers — covers paragraphs,
   meta labels, tab content, descriptions.
   NOTE: span is intentionally excluded — spans inherit Verdana
   from their parent container naturally, and including span here
   overrides third-party widget fonts (Affirm logo ligature font). */
body.single-product .elementor-widget-container p,
body.single-product .elementor-widget-container div,
body.single-product .elementor-widget-container li,
body.single-product .elementor-widget-container a {
  font-family: Verdana, Geneva, sans-serif !important;
}

/* WooCommerce meta label spans (.meta-label confirmed Poppins) */
body.single-product .meta-label,
body.single-product .product_meta {
  font-family: Verdana, Geneva, sans-serif !important;
}

/* Affirm widget font restoration — belt-and-suspenders.
   The .__affirm-logo span uses a custom ligature font where the
   text "Affirm" renders as the logo glyph. If any upstream span
   override ever hits these classes again, this rule wins it back. */
body.single-product .__affirm-logo,
body.single-product span.__affirm-logo,
body.single-product span[class*="__affirm"] {
  font-family: affirm !important;
}

/* APR badge — Verdana for text, affirm only on ::before.
   Root cause: the Affirm font maps the text character "A" (U+0041) to a
   zero-advance-width glyph by design. The visible "A" is meant to come
   from the ::before pseudo-element which uses the affirm font to render
   the Affirm logo-A glyph (content: "" maps to a 16px logo glyph).
   When font-family: affirm is applied to the badge element itself, the
   text "A" in "0% APR" renders at 0px width — only "0% PR" is visible.
   Fix: apply Verdana to the badge element (making text "A" 16px visible),
   then restore affirm on ::before so the logo glyph still renders. */
body.single-product .__apr_badge,
body.single-product span.__apr_badge,
body.single-product span[class*="__apr"] {
  font-family: Verdana, Geneva, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
body.single-product .__apr_badge::before,
body.single-product span.__apr_badge::before,
body.single-product span[class*="__apr"]::before {
  font-family: affirm !important;
}

/* Tab panels and WooCommerce short description */
body.single-product .woocommerce-product-details__short-description p,
body.single-product .woocommerce-tabs p,
body.single-product .woocommerce-tabs li,
body.single-product .woocommerce-tabs h2,
body.single-product .woocommerce-tabs h3 {
  font-family: Verdana, Geneva, sans-serif !important;
}

/* Rem sizing anchor — body is 16px on this site, so
   1rem = 16px matches the established scale across all pages. */


/* ══════════════════════════════════════════════════════════
   2. STOCK BADGE
   ──────────────────────────────────────────────────────────
   Live DOM: <p class="stock in-stock wd-style-default">In stock</p>
   Parent:   .elementor-widget-container
   Currently renders as bare unstyled text.
   ══════════════════════════════════════════════════════════ */

body.single-product .stock.in-stock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #3a7a52 !important;
  background: #e8f5ee !important;
  border: 1px solid #b8dfc9 !important;
  border-radius: 50px !important;
  padding: 4px 12px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
}

body.single-product .stock.in-stock::before {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  background: #3a7a52 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* Out of stock — same pill pattern, red palette */
body.single-product .stock.out-of-stock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #a94040 !important;
  background: #faeaea !important;
  border: 1px solid #e8b8b8 !important;
  border-radius: 50px !important;
  padding: 4px 12px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
}
body.single-product .stock.out-of-stock::before {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  background: #a94040 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}


/* ══════════════════════════════════════════════════════════
   3. DOKAN SELLER CARD
   ──────────────────────────────────────────────────────────
   Live DOM inside .product_meta.wd-layout-inline:
     .dokan-vendor-info-wrap
       .dokan-vendor-image  →  <img> 50×50, border-radius 50%
       .dokan-vendor-info
         .dokan-vendor-name  →  <a><h5>store name</h5></a>
         .dokan-vendor-rating  →  dashicon stars
     .bs-view-store-btn  ← JS-injected <a> (see PHP enqueue file)

   "Sold by" label  →  .dokan-vendor-info::before
   Meta line        →  .dokan-vendor-info::after
   "View Store" CTA →  .bs-view-store-btn (JS-appended element)
   ══════════════════════════════════════════════════════════ */

/* Card wrapper */
body.single-product .dokan-vendor-info-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: #f5f0eb !important;
  border: 1px solid #efd9c0 !important;
  border-radius: 10px !important;
  padding: 18px 20px !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  transition: box-shadow 0.18s ease !important;
}
body.single-product .dokan-vendor-info-wrap:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.07) !important;
}

/* Avatar */
body.single-product .dokan-vendor-image {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid #efd9c0 !important;
  background: #5a3b1e !important;
  flex-shrink: 0 !important;
}
body.single-product .dokan-vendor-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 50% !important;
}

/* Info column */
body.single-product .dokan-vendor-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* "Sold by" eyebrow — CSS-generated, no DOM change needed */
body.single-product .dokan-vendor-info::before {
  content: 'Sold by' !important;
  display: block !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.5625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #8c5d31 !important;
  margin-bottom: 2px !important;
  line-height: 1 !important;
}

/* "BlackSpace Verified Seller · City, ST" meta line — CSS-generated.
   The JS sets data-bs-location="City, ST" directly on .dokan-vendor-info
   (not the parent wrap) so that CSS attr() can read it on the same element.
   Falls back to "BlackSpace Verified Seller" when no location is available. */
body.single-product .dokan-vendor-info::after {
  content: 'BlackSpace Verified Seller · ' attr(data-bs-location) !important;
  display: block !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 400 !important;
  color: #474747 !important;
  margin-top: 3px !important;
  line-height: 1.3 !important;
}
/* Fallback when no location — attr() returns empty string, hiding the trailing " · " */
body.single-product .dokan-vendor-info:not([data-bs-location]) .dokan-vendor-info::after,
body.single-product .dokan-vendor-info[data-bs-location=""]::after {
  content: 'BlackSpace Verified Seller' !important;
}

/* Store name container */
body.single-product .dokan-vendor-name {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Store name H5 (rendered inside <a><h5>…</h5></a>) */
body.single-product .dokan-vendor-name h5 {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline !important;
  line-height: 1.2 !important;
}

/* Store name link
   WoodMart generates a high-specificity rule on .wd-single-meta
   (.elementor-element-XXXXXXXX.wd-single-meta .dokan-vendor-name a)
   that overrides body.single-product selectors even with !important.
   Matching .wd-single-meta directly beats it without hardcoding an
   Elementor element ID (which changes on widget re-save). */
body.single-product .dokan-vendor-name a,
.wd-single-meta .dokan-vendor-info-wrap .dokan-vendor-name a,
.wd-single-meta .dokan-vendor-info-wrap .dokan-vendor-name a:link,
.wd-single-meta .dokan-vendor-info-wrap .dokan-vendor-name a:visited {
  color: #1a1a1a !important;
  text-decoration: none !important;
  font-family: Verdana, Geneva, sans-serif !important;
}
body.single-product .dokan-vendor-name a:hover,
.wd-single-meta .dokan-vendor-info-wrap .dokan-vendor-name a:hover {
  color: #b0743e !important;
}

/* H5 inside the link — same WoodMart specificity issue, same fix */
.wd-single-meta .dokan-vendor-info-wrap .dokan-vendor-name h5 {
  color: #1a1a1a !important;
}

/* Hide star rating — no ratings exist yet, avoids empty star clutter */
body.single-product .dokan-vendor-rating {
  display: none !important;
}

/* "View Store" CTA button
   This element does not exist in Dokan's default output.
   It is created by wp_add_inline_script in the PHP enqueue file:
     document.querySelector('.dokan-vendor-info-wrap')
       .insertAdjacentHTML('beforeend',
         '<a class="bs-view-store-btn" href="[store-url]">View Store</a>')
   The href is set dynamically from the existing .dokan-vendor-name a href. */
body.single-product .bs-view-store-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  background: transparent !important;
  border: 1px solid #efd9c0 !important;
  border-radius: 50px !important;
  padding: 6px 14px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
body.single-product .bs-view-store-btn:hover {
  background: #f7eee5 !important;
  border-color: #b0743e !important;
  color: #b0743e !important;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 640px
   ══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  body.single-product .dokan-vendor-info-wrap {
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  body.single-product .dokan-vendor-image {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}


/* ══════════════════════════════════════════════════════════
   4. ATC WIDGET SPACING
   ──────────────────────────────────────────────────────────
   The stock badge rules above set margin-top/bottom: 0 on
   .stock.in-stock, collapsing the native gap between the
   three sibling elements inside the ATC widget:
     .stock  →  form.cart  →  .affirm-as-low-as
   All three are direct children of .elementor-widget-container
   inside the WoodMart widget class .wd-single-add-cart.

   .wd-single-add-cart is the stable WoodMart class — confirmed
   as the only instance on the page. Avoids hardcoding the
   Elementor element ID which changes on widget re-save.
   ══════════════════════════════════════════════════════════ */

body.single-product .wd-single-add-cart .stock {
  margin-bottom: 12px !important;
}

body.single-product .wd-single-add-cart form.cart {
  margin-bottom: 12px !important;
}


/* ══════════════════════════════════════════════════════════
   5. GALLERY MAIN IMAGE — FIXED CONTAINER + CONTAIN
   ──────────────────────────────────────────────────────────
   WoodMart's JS (wd-autoheight) sets an inline height on
   .wd-carousel-wrap equal to the tallest image at the
   column's rendered width — a 505×600 image produces
   height: 928px. CSS !important overrides the inline style.

   IMPORTANT: We constrain ONLY the .wd-carousel-wrap height
   and the <img> itself. We do NOT constrain the width or
   height of .woocommerce-product-gallery__image (the <figure>)
   because WoodMart's carousel JS reads that figure's dimensions
   to calculate slide widths and navigation arrow visibility.
   Setting fixed dimensions on the figure breaks the carousel —
   slides collapse, not all images show, nav arrows appear.

   Target: 635px max height for all images.
   Images that don't fill the space are boxed (contain),
   not cropped — white background fills the remainder.

   DOM chain:
     .wd-carousel-wrap          ← JS sets inline height here
       .wd-carousel-item        ← slide, must stay full-width
         .woocommerce-product-gallery__image  (figure)
           a
             img                ← constrain only this
   ══════════════════════════════════════════════════════════ */

/* Override WoodMart's JS-injected inline height */
body.single-product .woocommerce-product-gallery .wd-carousel-wrap {
  height: 635px !important;
  max-height: 635px !important;
}

/* Slide — fill the wrap height, center the figure */
body.single-product .woocommerce-product-gallery .wd-carousel-item {
  max-height: 635px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Figure — white background fills space around contained images.
   Do NOT set width or height — carousel layout depends on these. */
body.single-product .woocommerce-product-gallery__image {
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  max-height: 635px !important;
}

/* Link inside figure */
body.single-product .woocommerce-product-gallery__image > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Image — contain within 635px box, never cropped */
body.single-product .woocommerce-product-gallery__image img {
  max-height: 635px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}


/* ══════════════════════════════════════════════════════════
   6. SELLER CARD — FULL WIDTH
   ──────────────────────────────────────────────────────────
   The Dokan block sits inside .elementor-element-517182b
   which is a full-width e-con container. width: 100% stretches
   the card across it.

   City/state: the JS sets data-bs-location="City, ST" directly
   on .dokan-vendor-info (not the parent wrap) so CSS attr() can
   read it on the same element the ::after is defined on.
   See section 3 above for the ::after rule.
   ══════════════════════════════════════════════════════════ */

/* Stretch card to fill its container */
body.single-product .dokan-vendor-info-wrap {
  width: 100% !important;
  box-sizing: border-box !important;
}


/* ══════════════════════════════════════════════════════════
   7. "YOU MAY ALSO LIKE" — SECTION HEADER + CARD RESKIN
   ──────────────────────────────────────────────────────────
   WoodMart generates the carousel ID dynamically per page load
   (#carousel-NNN increments with each widget on the page).
   Using the ID selector is fragile — it was #carousel-533 on
   the Snowflake product but #carousel-111 on the PRIDE product.

   Fix: JS adds .bs-ymal-carousel to the container whose title
   text matches "You may also like" (see the JS file). All CSS
   targets that stable class instead of the dynamic ID.

   DOM structure:
     .bs-ymal-carousel.wd-carousel-container.wd-products
       h4.wd-el-title.slider-title     ← "You may also like..."
       .wd-carousel-inner
         .wd-carousel
           .wd-carousel-wrap
             .wd-carousel-item  (×N)
               .wd-product
                 .wd-product-wrapper
                   .wd-product-thumb  → <img>
                   .product-element-bottom
                     .wd-entities-title → product name
                     .wrap-price → .price
                     .wd-product-footer → "View products" btn
       .wd-nav-arrows → prev/next buttons (hidden by default)

   Target (from mockup):
     - Section header: "From this seller & store" eyebrow
       above "You may also like…" heading + "View All Products"
       pill link right-aligned to the seller's store URL
     - Cards: white bg, silver border, 10px radius, hover lift,
       square image (contain), seller name eyebrow, title, price
     - Nav arrows: hidden (already disabled when all visible)
   ══════════════════════════════════════════════════════════ */

/* Section wrapper — full-bleed warm off-white band.
   The carousel sits inside an Elementor boxed container (~1630px).
   We break it out by positioning the .elementor-widget-container
   (direct parent of .bs-ymal-carousel) to 100vw width and pushing
   it left to align with the viewport edge.
   The carousel itself then fills 100% of that stretched container.
   Inner content is re-constrained via .wd-el-title + .wd-carousel-inner. */

body.single-product .elementor-widget-container:has(> .bs-ymal-carousel) {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: calc(-50vw + 50%) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.single-product .bs-ymal-carousel.wd-carousel-container {
  background: #f5f0eb !important;
  border-top: 1px solid #efd9c0 !important;
  padding: 48px 0 56px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  position: static !important;
  left: auto !important;
  box-sizing: border-box !important;
}

/* Constrain inner content to match the natural Elementor section width (~1630px),
   so YMAL aligns exactly with the Recently Viewed carousel directly below it.
   Title row keeps side padding for the View All btn breathing room.
   Carousel inner has NO padding — WoodMart's Swiper JS uses its raw width for
   slide-width calculations; padding here would shrink the usable card area. */
body.single-product .bs-ymal-carousel .wd-el-title.slider-title,
body.single-product .bs-ymal-carousel .wd-carousel-inner {
  max-width: 1630px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
body.single-product .bs-ymal-carousel .wd-el-title.slider-title {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
body.single-product .bs-ymal-carousel .wd-carousel-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Section header row — flex, eyebrow+heading left, CTA right */
body.single-product .bs-ymal-carousel .wd-el-title.slider-title {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  margin-bottom: 28px !important;
  border: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* "You may also like…" heading — eyebrow above, heading below */
body.single-product .bs-ymal-carousel .wd-el-title.slider-title span {
  font-size: 0 !important;
  display: block !important;
}
body.single-product .bs-ymal-carousel .wd-el-title.slider-title span::before {
  content: 'From this seller & store' !important;
  display: block !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  margin-bottom: 8px !important;   /* increased gap between eyebrow and heading */
  line-height: 1 !important;
}
body.single-product .bs-ymal-carousel .wd-el-title.slider-title span::after {
  content: 'You may also like\2026' !important;
  display: block !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #000000 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

/* "View All Products" CTA — injected by JS as .bs-view-all-btn.
   Parent h4 has font-size:0 which collapses line-height to 0, making
   the button 18px tall. Fix: explicit line-height + padding + align-self. */
body.single-product .bs-ymal-carousel .bs-view-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  background: transparent !important;
  border: 1px solid #efd9c0 !important;
  border-radius: 50px !important;
  padding: 10px 20px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  align-self: flex-end !important;
  margin-bottom: 2px !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
body.single-product .bs-ymal-carousel .bs-view-all-btn:hover {
  background: #f7eee5 !important;
  border-color: #b0743e !important;
}

/* ── Product cards ── */

/* Card wrapper */
body.single-product .bs-ymal-carousel .wd-product-wrapper {
  background: #ffffff !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
body.single-product .bs-ymal-carousel .wd-product-wrapper:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}

/* Card image — square, object-fit contain, warm bg */
body.single-product .bs-ymal-carousel .wd-product-thumb {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #f5f0eb !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.single-product .bs-ymal-carousel .wd-product-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}
body.single-product .bs-ymal-carousel .wd-product-wrapper:hover .wd-product-thumb img {
  transform: scale(1.04) !important;
}

/* Card body */
body.single-product .bs-ymal-carousel .product-element-bottom {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
}

/* Product title */
body.single-product .bs-ymal-carousel .wd-entities-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
body.single-product .bs-ymal-carousel .wd-entities-title a {
  color: #1a1a1a !important;
  text-decoration: none !important;
}
body.single-product .bs-ymal-carousel .wd-entities-title a:hover {
  color: #b0743e !important;
}

/* Price */
body.single-product .bs-ymal-carousel .price,
body.single-product .bs-ymal-carousel .wrap-price {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #b0743e !important;
  margin: 0 !important;
}
body.single-product .bs-ymal-carousel .price .woocommerce-Price-amount,
body.single-product .bs-ymal-carousel .price bdi,
body.single-product .bs-ymal-carousel .price .woocommerce-Price-currencySymbol {
  color: #b0743e !important;
}
/* Hide en-dash range separator — keep only first price */
body.single-product .bs-ymal-carousel .price > span[aria-hidden="true"]:not(.woocommerce-Price-amount) {
  display: none !important;
}
body.single-product .bs-ymal-carousel .price .woocommerce-Price-amount ~ .woocommerce-Price-amount {
  display: none !important;
}
body.single-product .bs-ymal-carousel .price .screen-reader-text {
  display: none !important;
}

/* Card body — match Recently Viewed padding and gap exactly.
   body.single-product.woocommerce adds specificity to beat the existing
   .bs-ymal-carousel .product-element-bottom rule earlier in the file. */
body.single-product.woocommerce .bs-ymal-carousel .product-element-bottom {
  padding: 15px !important;
  gap: 12px !important;
  flex: 1 !important;
}

/* Footer — show (was hidden). Styled to match design system.
   Contains the "View products" CTA for grouped products. */
body.single-product .bs-ymal-carousel .wd-product-footer {
  display: flex !important;
  align-items: center !important;
}
body.single-product .bs-ymal-carousel .wd-product-footer .wd-add-btn a.button {
  background: #1e1919 !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  border: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background 0.18s ease !important;
}
body.single-product .bs-ymal-carousel .wd-product-footer .wd-add-btn a.button:hover {
  background: #2e2e2e !important;
}

/* Nav arrows — hide (all cards visible at once at desktop) */
body.single-product .bs-ymal-carousel .wd-nav-arrows {
  display: none !important;
}

/* ── Button alignment — footer always pinned to card bottom ──
   When a product title fits on one line, the .wd-product-footer
   sits higher than cards whose titles wrap to two lines. Fix:
   flex: 1 on .wd-product-header makes it grow to fill available
   space, pushing the footer to the bottom of every card regardless
   of title length. Applied to both YMAL and RV. */
body.single-product .bs-ymal-carousel .wd-product-header,
body.single-product .bs-rv-carousel .wd-product-header {
  flex: 1 !important;
}

/* ── RV button font-weight — match YMAL 700 ──
   WoodMart's native .wd-add-btn a.button has font-weight: 400.
   The .wd-add-btn-replace > a::before pseudo-element uses the
   woodmart-font icon font at font-weight: 400 — that is the icon
   glyph and cannot be changed. The button TEXT weight is on the
   <a> itself and should be 700 to match YMAL. */
body.single-product .bs-rv-carousel .wd-product-footer .wd-add-btn a.button {
  font-weight: 700 !important;
  font-family: Verdana, Geneva, sans-serif !important;
}


/* ══════════════════════════════════════════════════════════
   8. RECENTLY VIEWED — "YOUR BROWSING HISTORY" EYEBROW
   ──────────────────────────────────────────────────────────
   The Recently Viewed carousel has the same dynamic ID issue
   as YMAL (#carousel-NNN). JS adds .bs-rv-carousel by
   matching title text "recently viewed".

   Target (from mockup):
     - "Your browsing history" eyebrow (graphite, uppercase)
     - "Recently Viewed" heading below it
   Same ::before / ::after pattern as YMAL.
   ══════════════════════════════════════════════════════════ */

body.single-product .bs-rv-carousel .wd-el-title.slider-title span {
  font-size: 0 !important;
  display: block !important;
}
body.single-product .bs-rv-carousel .wd-el-title.slider-title span::before {
  content: 'Your browsing history' !important;
  display: block !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #474747 !important;
  margin-bottom: 8px !important;
  line-height: 1 !important;
}
body.single-product .bs-rv-carousel .wd-el-title.slider-title span::after {
  content: 'Recently Viewed' !important;
  display: block !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #000000 !important;
  line-height: 1.2 !important;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 640px additions
   ══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* Reduce top/bottom padding on small mobile.
     Side padding is 35px (set in 768px block) — preserved here. */
  body.single-product .bs-ymal-carousel.wd-carousel-container {
    padding-top: 36px !important;
    padding-bottom: 44px !important;
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 768px — MOBILE GALLERY + TABS SCROLLBAR
   ──────────────────────────────────────────────────────────
   Three issues fixed here:

   A) GALLERY PROPORTIONS
      Our desktop rule targets .woocommerce-product-gallery .wd-carousel-wrap
      (height: 635px) — this hits BOTH the main image carousel (.wd-gallery-images)
      AND the thumbnail carousel (.wd-gallery-thumb), giving each 635px on mobile.
      Result: total gallery = ~1280px tall, thumbs the same size as the main image.

      Fix: on mobile, scope height to .wd-gallery-images only and release the
      .wd-gallery-thumb wrap entirely so WoodMart controls it. Thumb images are
      capped at 72×72px squares — matching the Etsy-style horizontal thumb strip.

   B) EXCESS SPACE BELOW GALLERY
      Direct result of A — the 1280px gallery pushed the ATC/summary section far
      down the page. With the gallery reduced to ~432px (350px main + 72px thumbs)
      the product summary follows immediately below with no excess whitespace.

   C) TABS NAV SCROLLBAR
      WoodMart sets overflow-x: auto on ul.wc-tabs on mobile so tabs scroll
      horizontally. scrollbar-width: none hides it on Firefox but Chrome requires
      ::-webkit-scrollbar { display: none } — added here.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── A: Main gallery image — reduced height for mobile ── */

  /* Scope height override to ONLY the main image carousel.
     .wd-gallery-thumb .wd-carousel-wrap is intentionally left unset
     so WoodMart renders the thumbnail strip at its natural height. */
  body.single-product .wd-gallery-images .wd-carousel-wrap {
    height: 350px !important;
    max-height: 350px !important;
  }

  body.single-product .wd-gallery-images .wd-carousel-item {
    height: 350px !important;
    max-height: 350px !important;
  }

  /* Figure and link — cap to match the reduced wrap height */
  body.single-product .woocommerce-product-gallery__image {
    max-height: 350px !important;
    height: auto !important;
  }

  body.single-product .woocommerce-product-gallery__image > a {
    max-height: 350px !important;
  }

  body.single-product .woocommerce-product-gallery__image img {
    max-height: 350px !important;
  }

  /* ── Release thumb wrap from desktop 635px constraint ── */

  /* The desktop rule body.single-product .woocommerce-product-gallery .wd-carousel-wrap
     { height: 635px } applies to both image and thumb wraps.
     Override it here for the thumb wrap only, restoring natural sizing. */
  body.single-product .wd-gallery-thumb .wd-carousel-wrap {
    height: auto !important;
    max-height: none !important;
  }

  body.single-product .wd-gallery-thumb .wd-carousel-item {
    height: auto !important;
    max-height: none !important;
    width: auto !important;
  }

  /* Thumbnail images — small uniform squares, horizontal strip */
  body.single-product .wd-gallery-thumb img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* ── C: Tabs nav scrollbar — hide on Webkit/Chrome ── */

  /* Firefox uses scrollbar-width: none (set by WoodMart or inherited).
     Chrome/Safari require the ::-webkit-scrollbar pseudo-element. */
  body.single-product ul.wc-tabs::-webkit-scrollbar,
  body.single-product .wd-nav-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body.single-product ul.wc-tabs,
  body.single-product .wd-nav-tabs {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 768px — YMAL MOBILE ALIGNMENT + CARD CONSISTENCY
   ──────────────────────────────────────────────────────────
   Goal: YMAL and RV section headers vertically aligned,
   product cards identical dimensions on mobile.

   Root cause: YMAL is full-bleed (starts at left=0, width=viewport).
   RV sits inside an Elementor boxed section (elementor-element-91b2300)
   that has padding-left:10px, padding-right:10px, placing its inner
   content starting at left=35px with usable width=415px.

   Confirmed from live DOM (500px viewport):
     RV e-con-inner: left=25, width=435
     RV .wd-carousel-inner: left=35, width=415
     RV .wd-carousel-wrap: left=30, width=425
     RV card: width=213px

   Fix: give the YMAL .wd-carousel-container 35px L/R padding.
   This reduces the cascade width available to .wd-carousel-inner
   from 485px → 415px, matching RV exactly:
     YMAL carousel: left=0, width=485
     35px L/R padding → inner content width = 415px at left=35
     YMAL .wd-carousel-inner: left=35, width=415 ✓ (matches RV)
     YMAL card: width=213px ✓ (matches RV)
     YMAL title: left=35 ✓ (matches RV — headers now aligned)

   Also remove the old padding overrides on .wd-carousel-inner and
   .wd-el-title which would otherwise double-pad the content.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Section padding — equalizes YMAL to match RV's boxed layout ── */

  body.single-product .bs-ymal-carousel.wd-carousel-container {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }

  /* Inner and title: zero out old padding overrides — the carousel
     container padding now handles all edge inset. Leaving 15px here
     would double-pad (carousel 35px + inner 15px = 50px from edge). */
  body.single-product .bs-ymal-carousel .wd-carousel-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.single-product .bs-ymal-carousel .wd-el-title.slider-title {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── Typography — revert to WoodMart native 1rem ── */

  /* Title: our desktop rule sets 0.8125rem (13px); RV native is 1rem (16px) */
  body.single-product .bs-ymal-carousel .wd-entities-title,
  body.single-product .bs-ymal-carousel .wd-entities-title a {
    font-size: 1rem !important;
    color: #474747 !important;
  }

  /* Price: our desktop rule sets 0.875rem (14px); RV native is 1rem (16px) */
  body.single-product .bs-ymal-carousel .price,
  body.single-product .bs-ymal-carousel .wrap-price {
    font-size: 1rem !important;
  }

  /* ── View products button — revert YMAL to WoodMart native sizing on mobile ── */

  body.single-product .bs-ymal-carousel .wd-product-footer .wd-add-btn a.button {
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    background: #000000 !important;
    border-radius: 50px !important;
    border: none !important;
  }

  /* RV button — font-weight 700 on mobile (WoodMart native is 400) */
  body.single-product .bs-rv-carousel .wd-product-footer .wd-add-btn a.button {
    font-weight: 700 !important;
  }

}


/* ══════════════════════════════════════════════════════════
   QUESTIONS & ANSWERS TAB
   ──────────────────────────────────────────────────────────
   Plugin: Dokan Product Q&A (Vue component).
   Root:   #dokan-product-qa-frontend-root inside #tab-product_qa.

   The Vue component renders Tailwind utility classes. All rules
   use #tab-product_qa as the specificity wrapper + !important.

   DOM confirmed live:
     #tab-product_qa
       #dokan-product-qa-frontend-root
         div
           h2                         — "Questions about this product (N)"
           div.my-4.mr-1
             div.relative             — search wrapper
               div.absolute...        — icon container
                 svg
               input.block.w-full...  — search field
             div.mt-4
               div.bg-slate-100...    — "Login to post" CTA card
                 div.px-4.py-5...
                   div.sm:flex...     — text + button row
   ══════════════════════════════════════════════════════════ */

/* Font — inherit Verdana into the Vue root */
body.single-product #dokan-product-qa-frontend-root,
body.single-product #dokan-product-qa-frontend-root * {
  font-family: Verdana, Geneva, sans-serif !important;
}

/* Tab panel — remove default WooCommerce top padding gap */
body.single-product #tab-product_qa.woocommerce-Tabs-panel {
  padding-top: 12px !important;
}

/* ── Heading ──────────────────────────────────────────────── */

body.single-product #tab-product_qa h2 {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.3 !important;
  margin: 0 0 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e6e6e6 !important;
}

/* ── Search input ─────────────────────────────────────────── */

/* Container: remove Tailwind margin/padding that creates odd gaps */
body.single-product #tab-product_qa .my-4 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.single-product #tab-product_qa .mr-1 {
  margin-right: 0 !important;
}

/* The input itself: clean white pill replacing Tailwind's gray rounded-sm */
body.single-product #tab-product_qa input[type="text"],
body.single-product #tab-product_qa input[type="search"],
body.single-product #tab-product_qa input.block {
  font-size: 0.8125rem !important;
  color: #1a1a1a !important;
  background: #ffffff !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 50px !important;
  padding: 11px 20px 11px 40px !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body.single-product #tab-product_qa input[type="text"]:focus,
body.single-product #tab-product_qa input[type="search"]:focus,
body.single-product #tab-product_qa input.block:focus {
  border-color: #b0743e !important;
  box-shadow: 0 0 0 3px rgba(176,116,62,0.09) !important;
}

/* Search icon: tint to bronze */
body.single-product #tab-product_qa .absolute svg {
  color: #b0743e !important;
  stroke: #b0743e !important;
}
body.single-product #tab-product_qa .absolute svg path {
  fill: #b0743e !important;
  stroke: none !important;
}

/* ── "Don't see the answer" CTA card ─────────────────────── */

/* Replace Tailwind slate bg + shadow with warm Bronze 050 card */
body.single-product #tab-product_qa .bg-slate-100 {
  background: #f7eee5 !important;
  border: 1px solid #efd9c0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  margin-top: 20px !important;
}

/* Inner padding */
body.single-product #tab-product_qa .px-4.py-5,
body.single-product #tab-product_qa .sm\:p-6 {
  padding: 18px 22px !important;
}

/* Flex row: text left, button right */
body.single-product #tab-product_qa .sm\:flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
body.single-product #tab-product_qa .sm\:items-start {
  align-items: center !important;
}
body.single-product #tab-product_qa .sm\:justify-between {
  justify-content: space-between !important;
}

/* CTA label text */
body.single-product #tab-product_qa .text-base,
body.single-product #tab-product_qa .font-semibold {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.4 !important;
}
body.single-product #tab-product_qa .leading-7 {
  line-height: 1.4 !important;
}

/* ── Login button: replace Tailwind red with bronze pill ──── */

body.single-product #tab-product_qa .bg-red-600,
body.single-product #tab-product_qa .hover\:bg-red-500,
body.single-product #tab-product_qa a.inline-flex,
body.single-product #tab-product_qa button.inline-flex {
  background: #b0743e !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 10px 22px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.15s ease !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
}
body.single-product #tab-product_qa .bg-red-600:hover,
body.single-product #tab-product_qa a.inline-flex:hover,
body.single-product #tab-product_qa button.inline-flex:hover {
  background: #8c5d31 !important;
}

/* ── Question items (when questions exist) ────────────────── */
/* Dokan renders each Q as .bg-white.shadow.sm:rounded-lg      */

body.single-product #dokan-product-qa-frontend-root .bg-white {
  background: #ffffff !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
  margin-top: 12px !important;
  overflow: hidden !important;
}

/* Question / answer text colors */
body.single-product #dokan-product-qa-frontend-root .text-gray-900 {
  color: #1a1a1a !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
}
body.single-product #dokan-product-qa-frontend-root .text-gray-700,
body.single-product #dokan-product-qa-frontend-root .text-gray-600 {
  color: #474747 !important;
}
body.single-product #dokan-product-qa-frontend-root .text-gray-500,
body.single-product #dokan-product-qa-frontend-root .text-gray-400 {
  color: #747474 !important;
  font-size: 0.75rem !important;
}

/* Answer area — light warm tint */
body.single-product #dokan-product-qa-frontend-root .bg-gray-50 {
  background: #fafafa !important;
  border-top: 1px solid #e6e6e6 !important;
}

/* Action links / vote buttons inside Q items */
body.single-product #dokan-product-qa-frontend-root .text-blue-600,
body.single-product #dokan-product-qa-frontend-root a[class*="text-blue"] {
  color: #b0743e !important;
}
body.single-product #dokan-product-qa-frontend-root .text-blue-600:hover,
body.single-product #dokan-product-qa-frontend-root a[class*="text-blue"]:hover {
  color: #8c5d31 !important;
}

/* Any submit / secondary buttons inside question items */
body.single-product #dokan-product-qa-frontend-root button.bg-blue-600,
body.single-product #dokan-product-qa-frontend-root button[class*="bg-blue"],
body.single-product #dokan-product-qa-frontend-root button.bg-indigo-600,
body.single-product #dokan-product-qa-frontend-root button[class*="bg-indigo"] {
  background: #b0743e !important;
  border-radius: 50px !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: background 0.15s ease !important;
}
body.single-product #dokan-product-qa-frontend-root button.bg-blue-600:hover,
body.single-product #dokan-product-qa-frontend-root button[class*="bg-blue"]:hover {
  background: #8c5d31 !important;
}


/* ══════════════════════════════════════════════════════════
   CUSTOMER REVIEWS (CusRev shortcode)
   ──────────────────────────────────────────────────────────
   Plugin: Customer Reviews for WooCommerce.
   Root:   .cr-all-reviews-shortcode
           inside .elementor-widget-shortcode on single product.

   DOM confirmed:
     .cr-all-reviews-shortcode
       .cr-summaryBox-wrap
         .cr-overall-rating-wrap
           .cr-average-rating > span         — "4.8" number
           .cr-average-rating-stars
             .crstar-rating-svg
               .cr-rating-icon-base          — outline star SVGs
               .cr-rating-icon-frnt          — filled star SVGs
           .cr-total-rating-count            — "Based on X reviews"
         .cr-summary-separator
           .cr-summary-separator-int
         .ivole-summaryBox
           table.cr-histogramTable
             tr.ivole-histogramRow
               td.ivole-histogramCell1       — "5 star"
               td.ivole-histogramCell2       — meter bar
               td.ivole-histogramCell3       — "0%"
       .cr-ajax-search
         div
           svg.cr-ajax-search-icon
           input.cr-input-text
           span.cr-clear-input
         button.cr-button-search
       .cr-count-row
         .cr-count-row-count
         .cr-ajax-reviews-sort-div
           select.cr-ajax-reviews-sort
       p.cr-search-no-reviews
   ══════════════════════════════════════════════════════════ */

/* Base font — all CusRev text to Verdana */
body.single-product .cr-all-reviews-shortcode,
body.single-product .cr-all-reviews-shortcode * {
  font-family: Verdana, Geneva, sans-serif !important;
}

/* ── Elementor section heading ("Customer Reviews" H2) ─────
   Scoped to .wd-negative-gap which wraps this Elementor section. */

body.single-product .wd-negative-gap .elementor-heading-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.3 !important;
  margin-bottom: 24px !important;
}

/* ── Summary box ──────────────────────────────────────────── */

body.single-product .cr-summaryBox-wrap {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  background: #fafafa !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

/* Left: overall rating */
body.single-product .cr-overall-rating-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px 32px !important;
  min-width: 160px !important;
  border-right: 1px solid #e6e6e6 !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
}

/* Big rating number */
body.single-product .cr-average-rating {
  line-height: 1 !important;
  margin-bottom: 10px !important;
}
body.single-product .cr-average-rating span {
  font-size: 3rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

/* Stars — outline (background) layer: light gray */
body.single-product .cr-rating-icon-base {
  display: flex !important;
  gap: 2px !important;
}
body.single-product .cr-rating-icon-bg {
  color: #e6e6e6 !important;
  stroke: #e6e6e6 !important;
  width: 18px !important;
  height: 18px !important;
}

/* Stars — filled (front) layer: bronze */
body.single-product .cr-rating-icon-frnt {
  display: flex !important;
  gap: 2px !important;
}
body.single-product .cr-rating-icon {
  color: #b0743e !important;
  fill: #b0743e !important;
  width: 18px !important;
  height: 18px !important;
}

/* "Based on X reviews" */
body.single-product .cr-total-rating-count {
  font-size: 0.6875rem !important;
  color: #747474 !important;
  letter-spacing: 0.02em !important;
  margin-top: 8px !important;
  text-align: center !important;
}

/* Separator between left and histogram */
body.single-product .cr-summary-separator {
  display: none !important;
}

/* Right: histogram table */
body.single-product .ivole-summaryBox {
  flex: 1 !important;
  padding: 24px 28px !important;
  background: #ffffff !important;
}

body.single-product table.cr-histogramTable {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

body.single-product .ivole-histogramRow {
  border: none !important;
}

/* "5 star" label */
body.single-product .ivole-histogramCell1 {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  color: #474747 !important;
  white-space: nowrap !important;
  padding: 4px 12px 4px 0 !important;
  width: 44px !important;
  text-align: left !important;
  vertical-align: middle !important;
}

/* Track */
body.single-product .ivole-histogramCell2 {
  padding: 4px 12px 4px 0 !important;
  vertical-align: middle !important;
}
body.single-product .ivole-meter {
  height: 8px !important;
  background: #f0ebe5 !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  min-width: 80px !important;
}

/* Fill bar: bronze */
body.single-product .ivole-meter-bar {
  height: 100% !important;
  background: #b0743e !important;
  border-radius: 50px !important;
  transition: width 0.3s ease !important;
}

/* Percentage */
body.single-product .ivole-histogramCell3 {
  font-size: 0.6875rem !important;
  color: #747474 !important;
  white-space: nowrap !important;
  padding: 4px 0 !important;
  width: 32px !important;
  text-align: right !important;
  vertical-align: middle !important;
}

/* ── Search & sort bar ────────────────────────────────────── */

body.single-product .cr-ajax-search {
  margin-bottom: 16px !important;
}

/* Search row: input + button side by side */
body.single-product .cr-ajax-search > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  position: relative !important;
}

/* Search icon */
body.single-product svg.cr-ajax-search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  fill: #b0743e !important;
  pointer-events: none !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* Search input */
body.single-product input.cr-input-text {
  flex: 1 !important;
  font-size: 0.8125rem !important;
  color: #1a1a1a !important;
  background: #ffffff !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 50px !important;
  padding: 10px 20px 10px 38px !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
}
body.single-product input.cr-input-text:focus {
  border-color: #b0743e !important;
  box-shadow: 0 0 0 3px rgba(176,116,62,0.09) !important;
}

/* Clear input × button */
body.single-product .cr-clear-input {
  position: absolute !important;
  right: 90px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  opacity: 0.5 !important;
  transition: opacity 0.15s ease !important;
}
body.single-product .cr-clear-input:hover {
  opacity: 1 !important;
}
body.single-product .cr-clear-input svg {
  fill: #474747 !important;
}

/* Search button */
body.single-product button.cr-button-search {
  flex-shrink: 0 !important;
  background: #b0743e !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 10px 22px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.15s ease !important;
  outline: none !important;
}
body.single-product button.cr-button-search:hover {
  background: #8c5d31 !important;
}

/* Count row: "X of Y reviews" + sort dropdown */
body.single-product .cr-count-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-top: 1px solid #e6e6e6 !important;
  border-bottom: 1px solid #e6e6e6 !important;
  margin-bottom: 20px !important;
}

body.single-product .cr-count-row-count {
  font-size: 0.75rem !important;
  color: #747474 !important;
}

/* Sort dropdown */
body.single-product select.cr-ajax-reviews-sort {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  background: #ffffff !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 50px !important;
  padding: 7px 30px 7px 14px !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  transition: border-color 0.15s ease !important;
}
body.single-product select.cr-ajax-reviews-sort:focus {
  border-color: #b0743e !important;
}

/* Empty / no-results message */
body.single-product p.cr-search-no-reviews {
  font-size: 0.8125rem !important;
  color: #747474 !important;
  text-align: center !important;
  padding: 28px 0 !important;
  margin: 0 !important;
}

/* ── Individual review cards ──────────────────────────────── */
/* CusRev renders each review as .cr-review or .ivole-review  */

body.single-product .cr-review,
body.single-product .ivole-review,
body.single-product .cr-reviews-wrap .cr-review {
  background: #ffffff !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
  padding: 20px 22px !important;
  margin-bottom: 14px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
body.single-product .cr-review:hover,
body.single-product .ivole-review:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px) !important;
}
body.single-product .cr-review:last-child,
body.single-product .ivole-review:last-child {
  margin-bottom: 0 !important;
}

/* Reviewer avatar (initials) */
body.single-product .cr-avatar,
body.single-product .cr-author-avatar,
body.single-product [class*="cr-avatar"] {
  background: #b0743e !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
}

/* Reviewer name */
body.single-product .cr-author-name,
body.single-product .cr-reviewer-name,
body.single-product [class*="cr-author"] {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* Review date */
body.single-product .cr-review-date,
body.single-product [class*="cr-date"] {
  font-size: 0.6875rem !important;
  color: #747474 !important;
}

/* Star rating inside review */
body.single-product .cr-review .cr-rating-icon,
body.single-product .ivole-review .cr-rating-icon {
  color: #b0743e !important;
  fill: #b0743e !important;
}
body.single-product .cr-review .cr-rating-icon-bg,
body.single-product .ivole-review .cr-rating-icon-bg {
  color: #e6e6e6 !important;
  stroke: #e6e6e6 !important;
}

/* Review body text */
body.single-product .cr-review-text,
body.single-product .cr-body-text,
body.single-product [class*="cr-review-text"],
body.single-product .cr-review p {
  font-size: 0.8125rem !important;
  color: #474747 !important;
  line-height: 1.75 !important;
}

/* Helpful votes / action links */
body.single-product .cr-helpful,
body.single-product [class*="cr-helpful"],
body.single-product [class*="cr-vote"] {
  font-size: 0.6875rem !important;
  color: #747474 !important;
}
body.single-product .cr-helpful a,
body.single-product [class*="cr-vote"] a {
  color: #b0743e !important;
  text-decoration: none !important;
}
body.single-product .cr-helpful a:hover,
body.single-product [class*="cr-vote"] a:hover {
  color: #8c5d31 !important;
  text-decoration: underline !important;
}

/* Product reference in review (shown when show_products:true) */
body.single-product .cr-product-name,
body.single-product [class*="cr-product"] {
  font-size: 0.6875rem !important;
  color: #747474 !important;
}

/* Seller reply block */
body.single-product .cr-reply,
body.single-product [class*="cr-reply"] {
  background: #f7eee5 !important;
  border: 1px solid #efd9c0 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin-top: 12px !important;
  font-size: 0.8125rem !important;
  color: #474747 !important;
  line-height: 1.7 !important;
}

/* Verified purchase badge */
body.single-product .cr-verified,
body.single-product [class*="cr-verified"] {
  font-size: 0.5625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  background: #f7eee5 !important;
  border: 1px solid #efd9c0 !important;
  border-radius: 50px !important;
  padding: 2px 8px !important;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Q&A + REVIEWS
   ══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* Q&A: CTA card stacks button below text */
  body.single-product #tab-product_qa .sm\:flex {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  body.single-product #tab-product_qa a.inline-flex,
  body.single-product #tab-product_qa button.inline-flex {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Reviews: summary box stacks vertically */
  body.single-product .cr-summaryBox-wrap {
    flex-direction: column !important;
  }
  body.single-product .cr-overall-rating-wrap {
    border-right: none !important;
    border-bottom: 1px solid #e6e6e6 !important;
    width: 100% !important;
    min-width: unset !important;
    padding: 20px !important;
  }
  body.single-product .ivole-summaryBox {
    padding: 20px !important;
  }

  /* Search/sort: Search button full-width row */
  body.single-product .cr-ajax-search > div:first-child {
    flex-wrap: wrap !important;
  }
  body.single-product button.cr-button-search {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  body.single-product .cr-count-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}