/* ==========================================================================
   Single product — 2026 brand colours and fonts for the parts the Elementor template
   doesn't own: the WooCommerce variation form (woocommerce/single-product/add-to-cart/),
   the add-on cards and privacy walls (inc/new-features.php), the post-layout drawings
   row, the sticky add-to-cart bar and the [faq_repeater] specs accordion.
   Loaded on product pages only (functions.php), after theme-styles.css / custom-css.css.

   Colour and font only — layout and sizing are unchanged. Values follow the PDP
   components in Figma 1:3311 (Product: Two Gable), which share this markup. The template
   itself is rebranded by figma-templates/redesign/rebrand-product.mjs.
   ========================================================================== */

/* Text that only inherits (the kit's body font is Open Sans): brand body font. */
.single-product .elementor-location-single { font-family: var(--nw-font-body); }

/* Short-description "Read more" toggle (its red comes from a <style> block printed
   from the database, so this beats it on specificity). */
.single-product #read-more-link,
.single-product #read-less-link { color: var(--nw-navy-600); font-weight: 600; }

/* Trust badges (class set by rebrand-product.mjs): the uploaded SVG icons carry the old
   red as stroke/fill attributes, so recolour the painted parts, not the svg's fill. */
.single-product .nw-pdp-trust .elementor-icon-list-icon svg [stroke]:not([stroke="none"]) { stroke: var(--nw-navy); }
.single-product .nw-pdp-trust .elementor-icon-list-icon svg [fill]:not([fill="none"]):not(mask *) { fill: var(--nw-navy); }

/* Every other icon list in a product template (delivery line, trust badges on templates
   without the class above — the accessory / post base bracket exports): same recolour. Some
   icons set the colour on the <svg> itself (inherited by its shapes), so that is covered too.
   The "You'll Discover" checks draw their own white tick on a navy circle and are left alone. */
.single-product [data-elementor-type="product"] .elementor-widget-icon-list:not(.nw-pdp-checks) .elementor-icon-list-icon svg[stroke]:not([stroke="none"]),
.single-product [data-elementor-type="product"] .elementor-widget-icon-list:not(.nw-pdp-checks) .elementor-icon-list-icon svg [stroke]:not([stroke="none"]):not(mask *) { stroke: var(--nw-navy) !important; }
.single-product [data-elementor-type="product"] .elementor-widget-icon-list:not(.nw-pdp-checks) .elementor-icon-list-icon svg[fill]:not([fill="none"]),
.single-product [data-elementor-type="product"] .elementor-widget-icon-list:not(.nw-pdp-checks) .elementor-icon-list-icon svg [fill]:not([fill="none"]):not(mask *) { fill: var(--nw-navy) !important; }
/* The delivery line is navy 600, like its text. */
.single-product [data-elementor-type="product"] .elementor-widget-icon-list.nw-pdp-delivery:not(.nw-pdp-checks) .elementor-icon-list-icon svg [fill]:not([fill="none"]):not(mask *) { fill: var(--nw-navy-600) !important; }
.single-product [data-elementor-type="product"] .elementor-widget-icon-list.nw-pdp-delivery:not(.nw-pdp-checks) .elementor-icon-list-icon svg [stroke]:not([stroke="none"]):not(mask *) { stroke: var(--nw-navy-600) !important; }

/* ---- Variation attributes: stain swatches, sizes ---- */
.single-product .variations_form .variations ul li .label label { color: var(--nw-navy-600); }
.single-product .variations_form .variations ul li .value .variation-radios label .variation_image_icon { border-color: var(--nw-line); }
.single-product .variations_form .variations ul li .value .variation-radios input[type=radio]:checked + label .variation_image_icon { border-color: var(--nw-navy-600); }
.single-product .variations_form .variations ul li .value .variation-radios input[type=radio]:checked + label .variation_image_label { color: var(--nw-navy-600); font-weight: 600; }
.single-product .variations_form .variations ul li .value .variation-radios__attribute_pa_size label .variation_image_label { border-color: var(--nw-line); }
.single-product .variations_form .variations ul li .value .variation-radios__attribute_pa_size input[type=radio]:checked + label .variation_image_label { border-color: var(--nw-navy-600); }
.single-product .variations_form .variations ul li .value.dimensions-group .dimension-field { border-color: var(--nw-line-strong); }
.single-product .variations_form .variations ul li .value.dimensions-group .dimension-field select { color: var(--nw-navy-600); font-weight: 600; }

/* Post-layout / technical-drawing row under the size selects. */
.single-product .norweh-drawing-summary-row { background: var(--nw-surface); }
.single-product .norweh-drawing-summary-text { color: var(--nw-navy-600); font-weight: 600; }
.single-product .norweh-drawing-link--summary { border-color: var(--nw-line); color: var(--nw-navy-600); font-weight: 500; }
.single-product .norweh-drawing-link--summary:hover { border-color: var(--nw-navy-600); color: var(--nw-navy-600); }

/* ---- Add-on cards (post size, brackets, groove, extra stain) ---- */
.single-product .addon-cards-header label { color: var(--nw-navy-600); }
.single-product .addon-cards-header label span,
.single-product .addon-cards-subtext { color: var(--nw-ink); }
.single-product .addon-card { border-color: var(--nw-line-strong); }
.single-product .addon-card.is-selected { border-color: var(--nw-navy-600); background: var(--nw-white); }
.single-product .addon-card-name { color: var(--nw-navy); }
.single-product .addon-card-price,
.single-product .addon-card-price.is-none { color: var(--nw-ink); font-weight: 400; }
.single-product .addon-cards-warning {
  border-color: rgba(125, 7, 31, 0.2);
  background: rgba(125, 7, 31, 0.08);
  color: var(--nw-burgundy);
}

/* Privacy walls "Add" button. */
.single-product .wall-add-btn { border-color: var(--nw-navy-600); color: var(--nw-navy-600); }

/* ---- Sticky add-to-cart bar ---- */
.single-product .variations_form .single_variation_wrap { border-color: var(--nw-line); background: var(--nw-white); }
.single-product .variations_form .single_variation_wrap .woocommerce-variation-price .price,
.single-product .variations_form .single_variation_wrap .woocommerce-variation-price .price ins {
  color: var(--nw-navy-600) !important;
  font-family: var(--nw-font-body) !important;
}
.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-variation-price .price ins { color: var(--nw-ink) !important; font-family: var(--nw-font-body) !important; }
.single-product .variations_form .single_variation_wrap .woocommerce-variation-add-to-cart .quantity,
.single-product form.cart .quantity { border-color: var(--nw-line-strong); }
/* −/+ were 10×10 tap targets inside the pill's padding: same look, 32×32 hit area. */
.single-product .variations_form .single_variation_wrap .woocommerce-variation-add-to-cart .quantity { padding: 7px 4px; gap: 2px; }
.single-product .variations_form .single_variation_wrap .woocommerce-variation-add-to-cart .quantity button.minus,
.single-product .variations_form .single_variation_wrap .woocommerce-variation-add-to-cart .quantity button.plus {
  width: 32px !important;
  height: 32px !important;
  background-size: 10px auto;
}

/* ---- Key Specifications accordion ([faq_repeater]) ---- */
.single-product .accordion-wrapper .accordion-item,
.single-product .accordion-wrapper .accordion-item.active { background: var(--nw-surface); }
.single-product .accordion-wrapper .accordion-item .accordion-question { color: var(--nw-navy); font-family: var(--nw-font-body); }
.single-product .accordion-wrapper .accordion-item .content p { color: var(--nw-ink); }
/* Plus / minus icons, navy instead of the old red (#E11B22). */
.single-product .accordion-wrapper .accordion-item .arrow-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' stroke='%23001536' stroke-width='2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.single-product .accordion-wrapper .accordion-item.active .arrow-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' stroke='%23001536' stroke-width='2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14'/%3E%3C/svg%3E");
}

/* ---- FAQ nested accordion (template 16812) ---- */
/* Its plus / minus were media uploads that never reached this site, so Elementor printed
   empty icon slots. Drawn from the theme icons while a slot is empty; the regenerated
   template uses the same files as real icons. */
.single-product .e-n-accordion-item-title-icon :is(.e-opened, .e-closed):empty { align-items: center; }
.single-product .e-n-accordion-item-title-icon :is(.e-opened, .e-closed):empty::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--nw-navy);
  -webkit-mask: url(../images/icons/plus.svg) center / contain no-repeat;
  mask: url(../images/icons/plus.svg) center / contain no-repeat;
}
.single-product .e-n-accordion-item-title-icon .e-opened:empty::before {
  -webkit-mask-image: url(../images/icons/minus.svg);
  mask-image: url(../images/icons/minus.svg);
}
/* Whichever FAQ accordion template a product embeds (16812, 25853 privacy wall, 25863 post
   base brackets, …): the redesigned rows — surface background, navy DM Sans titles and icons —
   so production's older accordion templates (pink rows, red icons) match without each being
   rebuilt. Elementor prints the row colours per element and the icons as inline SVG with a
   fill attribute, hence !important. */
.single-product .e-n-accordion-item-title,
.single-product .e-n-accordion-item > .e-con { background-color: var(--nw-surface) !important; }
.single-product .e-n-accordion-item-title-text {
  font-family: var(--nw-font-body) !important;
  font-weight: 600;
  color: var(--nw-navy) !important;
}
.single-product .e-n-accordion-item-title-icon { color: var(--nw-navy) !important; }
.single-product .e-n-accordion-item-title-icon svg path:not([fill="none"]) { fill: var(--nw-navy) !important; }

/* ==========================================================================
   Redesigned product templates (figma-templates/redesign/build-single-products.mjs,
   Figma 1:3311): the pieces Elementor has no setting for.
   ========================================================================== */

/* Key Specifications accordion ([faq_repeater]): Figma's rounded rows, 8px apart. */
.single-product .accordion-wrapper .accordion-item { border-radius: 12px; margin-bottom: 8px; }
.single-product .accordion-wrapper .accordion-item .heading { padding: 20px 20px 20px 24px; }
.single-product .accordion-wrapper .accordion-item .content { padding: 0 24px 20px; }

/* Why choose: the uploaded icons draw their own circle and glyph in the old blue. */
.single-product .nw-pdp-why .elementor-icon svg rect { fill: var(--nw-tint); fill-opacity: 1; }
.single-product .nw-pdp-why .elementor-icon svg [stroke]:not([stroke="none"]) { stroke: var(--nw-navy); }

/* Video: rounded player, poster cropped to it. */
.single-product .nw-pdp-video .elementor-wrapper,
.single-product .nw-pdp-video .elementor-custom-embed-image-overlay { overflow: hidden; border-radius: 20px; }

/* "You'll Discover" list: white checks in navy circles. */
.single-product .nw-pdp-checks .elementor-icon-list-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nw-navy-600);
  /* Elementor puts the list's 12px text indent inside the icon box as padding, which left
     the 22px circle 10px for the icon and squashed the check: indent outside, icon full size. */
  padding: 0 !important;
  margin-inline-end: 12px;
  overflow: hidden;
}
.single-product .nw-pdp-checks .elementor-icon-list-icon :is(svg, img) { flex: none; width: 100% !important; height: 100% !important; }
/* Elementor's icon colour fills the svg, and the tick path (stroke only) inherited it as a
   white wedge under the line. */
.single-product .nw-pdp-checks .elementor-icon-list-icon svg path { fill: none !important; }
/* Items still on the older bare tick (16px box, no circle — the regenerated template uses
   images/icons/check-circle.svg for all): drawn at the Figma tick's size, 7px wide, 1.75px line. */
.single-product .nw-pdp-checks .elementor-icon-list-icon svg:not(:has(rect)) { width: 10.5px !important; height: 10.5px !important; }
.single-product .nw-pdp-checks .elementor-icon-list-icon svg:not(:has(rect)) path { stroke-width: 2.67px; }

/* Image gallery grid ([custom_product_gallery]): 3 × 2 photos, 16px apart and rounded. */
.single-product .cpg-grid { gap: 16px; margin: 0; }
.single-product .cpg-item { aspect-ratio: 410 / 272; border-radius: 16px; }
/* Reviews carousel (Klaviyo): full content width, lined up with the section title, instead of
   Klaviyo's centred 1100px box (Klaviyo triples the class for weight, so this does too). */
.single-product .kl_reviews__carousel.kl_reviews__carousel.kl_reviews__carousel { max-width: none; margin-left: 0; margin-right: 0; }

/* A product without gallery photos drops the whole section (title + "View All Images"). */
.single-product .e-con.e-parent:has(.cpg-empty) { display: none; }

/* Ideas & guides: article rows divided by a hairline. */
.single-product .nw-pdp-blog__list .elementor-post { padding-bottom: 24px; border-bottom: 1px solid var(--nw-line); }
.single-product .nw-pdp-blog__list .elementor-post:last-child { padding-bottom: 0; border-bottom: 0; }
.single-product .nw-pdp-blog .elementor-post__title a { color: inherit; }
.single-product .nw-pdp-blog .elementor-post__title a:hover { color: var(--nw-navy-600); }
/* Below desktop both Posts widgets fell back to Elementor's default 2 columns (half-width
   featured post, list posts side by side), and on phones the list's left thumbnail took
   Elementor's 100% default, squeezing the title into an 18px column (~1,700px-tall rows).
   One column, and a 30% thumbnail beside the title on phones. Also in the generator. */
@media (max-width: 1024px) {
  .single-product .nw-pdp-blog .elementor-posts-container { grid-template-columns: 1fr !important; }
}
@media (max-width: 767px) {
  .single-product .nw-pdp-blog__list .elementor-post__thumbnail__link { flex: none; width: 30% !important; }
}

/* ---- Sale + expert banners (Figma 1:3344, 37:1816) ----
   The sale banner is [norweh_pdp_sale] markup (inc/pdp-banners.php); the expert banner is
   Elementor containers (figma-templates/redesign/build-single-products.mjs, pdpBanners). */
.single-product .nw-pdp-sale-slot:not(:has(.nw-pdp-sale)) { display: none; }
.single-product .nw-pdp-sale {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  border: 1px solid var(--nw-line);
  border-radius: 12px;
  background: var(--nw-white);
}
.single-product .nw-pdp-sale__img { flex: none; width: 100px; height: 70px; border-radius: 6px; object-fit: cover; }
.single-product .nw-pdp-banner__copy { flex: 1 1 auto; min-width: 0; }
.single-product .nw-pdp-sale .nw-pdp-banner__copy { display: flex; flex-direction: column; gap: 2px; }
.single-product .nw-pdp-sale p { margin: 0; }
.single-product .nw-pdp-sale__eyebrow {
  color: var(--nw-burgundy);
  font: 600 12px/1.3 var(--nw-font-body);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.single-product .nw-pdp-sale .nw-pdp-banner__title { color: var(--nw-ink); font: 600 16px/1.6 var(--nw-font-body); }
.single-product .nw-pdp-sale .nw-pdp-banner__text { color: var(--nw-body); font: 400 14px/1.5 var(--nw-font-body); }
.single-product .nw-pdp-sale .nw-pdp-banner__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nw-navy);
  font: 600 14px/1.5 var(--nw-font-body);
  text-decoration: none;
}
.single-product .nw-pdp-sale .nw-pdp-banner__link:hover { color: var(--nw-navy-600); }
.single-product .nw-pdp-banner__link .elementor-button-icon svg,
.single-product .nw-pdp-banner__arrow { width: 14px; height: 14px; }
/* Expert avatar: round photo; the online dot only while the office-hours status is "online"
   (functions.php talk_to_expert() adds .active). */
.single-product .nw-pdp-expert__avatar img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.single-product .e-con.nw-expert-status:not(.active) { display: none; }

/* Phones: "Book a callback" drops under the copy, lined up with it. */
@media (max-width: 767px) {
  .single-product .nw-pdp-sale { flex-wrap: wrap; gap: 8px 14px; padding: 16px; }
  .single-product .nw-pdp-sale__img { width: 72px; height: 54px; }
  .single-product .nw-pdp-sale .nw-pdp-banner__copy { flex-basis: calc(100% - 86px); }
  .single-product .nw-pdp-sale .nw-pdp-banner__link { margin-left: 86px; }
  .single-product .elementor .e-con.nw-pdp-expert { flex-wrap: wrap; row-gap: 8px; padding: 16px; }
  .single-product .elementor .e-con.nw-pdp-expert > .nw-pdp-banner__link { margin-left: 66px; }
}

/* ---- Product image gallery arrows (widgets/custom-product-image.php) ----
   The theme's gallery rules (theme-styles.css) only size and place the arrows; they relied
   on Swiper's base navigation CSS for position:absolute and for hiding "locked" arrows
   (all slides visible). Elementor's full Swiper CSS used to provide that, but the
   redesigned templates no longer load it and the video-gallery plugin's Swiper bundle
   leaves navigation out, so the arrows dropped into the layout: ~44px (phone) / 56px
   (desktop) of empty space under the thumbnails, and the main image's arrows below it. */
.single-product :is(.single_featured_image, .single_thumbnail_image) { position: relative; }
.single-product :is(.single_featured_image, .single_thumbnail_image) > :is(.swiper-button-prev, .swiper-button-next) {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.single-product .single_featured_image > .swiper-button-prev { left: 10px; right: auto; transform: translateY(-50%); }
.single-product .single_featured_image > .swiper-button-next { right: 10px; left: auto; transform: translateY(-50%); }
.single-product :is(.single_featured_image, .single_thumbnail_image) > .swiper-button-lock { display: none; }

/* Review stars under the title ([klaviyo_star_rating]): Klaviyo fills the widget only once its
   (delayed) script runs, and on staging never — until then the row is an empty box whose
   30px phone margins left a ~70px gap between the title and "starting from". Collapse it
   while empty; once the stars render, keep it close to the title on phones. */
.single-product .e-con:has(> .elementor-widget-shortcode .klaviyo-star-rating-widget:empty) { display: none; }
@media (max-width: 767px) {
  .single-product .elementor .e-con:has(> .elementor-widget-shortcode .klaviyo-star-rating-widget) { margin-top: 4px; margin-bottom: 4px; }
}

/* Sticky add-to-cart bar, phones: "Total" and the price on one line (label left, price right).
   theme-styles.css forces a column (Total above the price) whenever the product isn't on sale,
   with !important — right for desktop, so this only overrides it on phones. "Total" takes the
   free space, so a sale's struck-through and current price stay together on the right. */
@media (max-width: 767px) {
  .single-product .single_variation_wrap .woocommerce-variation-price .price {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: baseline !important;
    gap: 8px !important;
  }
  .single-product .single_variation_wrap .woocommerce-variation-price .price::before {
    width: auto !important;
    margin-right: auto !important;
    line-height: 1.5 !important;
  }
  /* On sale, the current price kept the desktop 32px; same size as a regular price here. */
  .single-product .single_variation_wrap .woocommerce-variation-price .price ins { font-size: inherit !important; line-height: inherit; letter-spacing: inherit; }
}