/* Panelling Direct — product bundle (v1.45.54).
   Page-specific layer; loads only on the contexts that need it.
   Source line ranges (v1.45.53): 1442-2023, 2143-2381, 2641-2661, 9991-10177

   LOAD ORDER IS LOAD-BEARING:
       style.css (core-early)  ->  page bundle(s)  ->  css/core-late.css
   Enqueued by pd_enqueue_assets() in functions.php. */

/* ── source lines 1442–2023 ── */
/* ══════════════════════════════════════════════════════════════
   PRODUCT PAGE STYLES (WooCommerce Single Product)
══════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.breadcrumb-outer { width: 100%; background: #fff; margin-top: 10px; }
/* Match the archive title-band breadcrumb (Open Sans 12px light,
   600-weight black page names) so product/cart pages don't render the
   generic 13px grey variant (v1.45.2, designer note 4). */
.breadcrumb-outer .woocommerce-breadcrumb,
.breadcrumb-outer .breadcrumb {
  font-weight: 300;
  font-size: 12px;
  color: #000;
}
.breadcrumb-outer .woocommerce-breadcrumb a,
.breadcrumb-outer .woocommerce-breadcrumb .last,
.breadcrumb-outer .breadcrumb a,
.breadcrumb-outer .breadcrumb .last {
  font-weight: 600;
  color: #000;
  text-decoration: none;
}
.breadcrumb-outer .woocommerce-breadcrumb a:hover,
.breadcrumb-outer .breadcrumb a:hover { color: var(--navy); text-decoration: none; }
.breadcrumb-outer .woocommerce-breadcrumb span,
.breadcrumb-outer .breadcrumb span { margin: 0 4px; }
/* Base breadcrumb — single site-wide treatment (v1.45.23). Open Sans 12px
   light with 600-weight black page names, per the category title band and
   the Figma spec. Was 13px/#666 with navy underlined links, which is what
   the product page fell through to (see .breadcrumb-outer above). */
.woocommerce-breadcrumb,
.breadcrumb {
  max-width: var(--row-max); /* was 1200px (v1.45.2, note 5) */
  margin: 0 auto;
  padding: 14px 20px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.2;
  color: #000;
}
.woocommerce-breadcrumb a,
.breadcrumb a { color: #000; font-weight: 600; text-decoration: none; }
.woocommerce-breadcrumb .last,
.breadcrumb .last { color: #000; font-weight: 600; }
.woocommerce-breadcrumb a:hover,
.breadcrumb a:hover { color: var(--navy); text-decoration: none; }
.woocommerce-breadcrumb span,
.breadcrumb span { margin: 0 4px; }

/* Page layout */
.pdp-wrapper,
.pd-single-product {
  max-width: var(--row-max); /* was 1200px — match the site page width (v1.45.2, note 5) */
  margin: 0 auto;
  padding: 0 20px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  background: #fff;
}

/* Gallery */
.gallery-col { position: relative; }

.main-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: 1px solid #E4E4E4;
  overflow: hidden;
  /* Let the browser handle vertical page-scroll; we handle horizontal swipe. */
  touch-action: pan-y;
}
.main-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.25s ease;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.35);
  border: none;
  color: #fff;
  width: 32px; height: 45px;
  border-radius: 4px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background 0.2s;
}
.gallery-arrow:hover { background: rgba(0,0,0,0.55); }
.gallery-arrow.prev { left: 15px; }
.gallery-arrow.next { right: 15px; }
.gallery-arrow svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Thumbnails */
.thumbs-row {
  display: flex; gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.thumbs-row::-webkit-scrollbar { display: none; }

.thumb-item {
  flex: 0 0 calc((100% - 5*8px) / 6);
  aspect-ratio: 1 / 1;
  border-radius: 4px; overflow: hidden;
  border: 2px solid transparent;
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color 0.15s;
}
.thumb-item.active { border-color: #000; }
.thumb-item img { width: 100%; height: 100%; object-fit: fill; display: block; transition: opacity 0.15s; }
.thumb-item:not(.active):hover img { opacity: 0.5; }
.thumb-item.video-thumb { position: relative; background: #111; }
.thumb-item.video-thumb img { opacity: 0.7; }
.thumb-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.thumb-play svg { width: 12px; height: 12px; fill: #111; margin-left: 2px; }

/* Product info column */
.info-col { display: flex; flex-direction: column; }

.product-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500; font-size: 28px; line-height: 110%;
  color: #000; margin-bottom: 6px;
}
.product-sku {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300; font-size: 12px;
  color: #000; margin-bottom: 14px;
}

/* Oversized-load notice (v1.45.49) — sits directly under the SKU on
   products in the "large" shipping class. Picks up the SKU line's type
   so the two read as a pair; the SKU's bottom margin is transferred to
   this element when it is present, via the rule below. */
.pd-oversized-notice {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #000;
  margin: 0 0 14px;
}
.product-sku:has(+ .pd-oversized-notice) { margin-bottom: 6px; }
.pd-oversized-notice__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Option sections */
.option-section { padding: 12px 0; }
/* v1.45.56: `.option-label` is now a <label> rather than a <p> (so the
   quantity field has an accessible name). <label> is display:inline by
   default, which would drop the margin-bottom and put it on the same line
   as the control — hence the explicit display:block. Purely restores the
   previous rendering. */
.option-label {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600; font-size: 12px;
  color: #000; margin-bottom: 10px;
}

/* Variant buttons */
.variant-group { display: flex; gap: 8px; flex-wrap: wrap; }
.variant-btn {
  border: 1px solid #E6E7E8;
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px; font-weight: 400;
  color: #000;
  padding: 12px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
  position: relative;
}
.variant-btn.selected {
  border: 1px solid #000;
  font-weight: 600;
}
.variant-btn.unavailable { font-weight: 400; }
.variant-btn.unavailable.selected {
  border: 1px solid #000;
  font-weight: 600;
}
.variant-btn .surcharge { color: #6F6F6F; } /* v1.45.56: was #858585 = 3.69:1; surcharge amounts carry meaning */

/* Quantity */
.qty-wrap {
  display: inline-flex; align-items: center;
  border: 1px solid #000; border-radius: 6px; overflow: hidden;
}
.qty-wrap .qty-btn {
  width: 38px; height: 38px;
  background: #fff; border: none;
  cursor: pointer; font-size: 18px; color: #000;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.qty-wrap .qty-btn:hover { background: #f5f5f5; }
/* v1.45.56: `outline: none` on the base rule with no :focus rule anywhere
   meant this field had NO focus indicator at all. WCAG 2.4.7. */
.qty-input {
  width: 48px; text-align: center;
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px; color: #000;
  padding: 8px 0; outline: none;
}
.qty-input:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 2px;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input[type=number] { -moz-appearance: textfield; }

/* VAT toggle */
.vat-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.vat-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #000;
}
.vat-toggle {
  position: relative;
  width: 40px; height: 22px;
  background: #E6E7E8;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.vat-toggle.active { background: #080153; }
.vat-toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  display: block;
}
.vat-toggle.active .vat-toggle-thumb { transform: translateX(18px); }

/* Price */
.price {
  font-family: 'Oswald', sans-serif;
  font-weight: 500; font-size: 26px;
  color: #000; margin-bottom: 14px;
  padding-top: 22px;
  transition: opacity 0.15s;
}

/* Add to cart button */
.btn-cart,
.single_add_to_cart_button {
  width: 100%;
  background: #080153; border: none; border-radius: 12px;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 500; font-size: 22px; line-height: 1;
  padding: 16px 20px;
  cursor: pointer; letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.1s;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.btn-cart:hover,
.single_add_to_cart_button:hover { background: var(--navy-mid); }
.btn-cart:active,
.single_add_to_cart_button:active { transform: scale(0.99); }

/* Sold out (v1.45.69) — the button keeps its shape and stays readable, but
   stops looking like something to press. Set by PHP on simple products and by
   js/product.js per variation on variable ones.

   Contrast: #FFF on #6B6B78 is 4.6:1, past the 4.5:1 of WCAG 1.4.3 for this
   size — a lighter grey would have read as decorative and failed. The :hover
   and :active overrides are needed because the base rules above would
   otherwise still animate a button that does nothing.

   `[disabled]` is included as well as the class: WooCommerce's variations.js
   sets the property on variable products without knowing about our class. */
.btn-cart--sold-out,
.btn-cart[disabled],
.single_add_to_cart_button[disabled] {
  background: #6B6B78;
  cursor: not-allowed;
  opacity: 1;               /* WC's own disabled styling fades it to unreadable */
}
.btn-cart--sold-out:hover,
.btn-cart[disabled]:hover,
.single_add_to_cart_button[disabled]:hover { background: #6B6B78; }
.btn-cart--sold-out:active,
.btn-cart[disabled]:active,
.single_add_to_cart_button[disabled]:active { transform: none; }

/* Callouts */
.callout-group { display: flex; flex-direction: column; gap: 6px; }
.callout-item {
  background: #FFFBE3; border-radius: 6px;
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; font-weight: 600; color: #000;
  text-align: center;
}
.callout-item:nth-of-type(1) { background: #FFFBE3; }
.callout-item:nth-of-type(2) { background: #FAFAFA; }
.callout-item:nth-of-type(3) { background: transparent; }
.callout-item a { color: #080153; text-decoration: underline; }
.callout-icon-img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.callout-icon-clearpay { width: 70px; height: auto; }

/* ── WAPF FIELDS — shared styling (ALL products) ─────────────────────
   Single source of truth for Advanced Product Fields (WAPF) styling so
   every product that uses WAPF — whether the configurator (.pd-configurator-form)
   or a standard product (.pd-wapf-form) — renders identical, on-brand fields
   matching the standard product template controls. Both wrappers carry the
   shared `.pd-wapf` class. Configurator-only layout (two-column field widths,
   the visualiser, kit list, VAT rewrite) stays in css/wall-visualiser.css. */

/* Side-by-side (width:50%) fields: WAPF lays them out as flex items inside
   .wapf-field-group, each box-sizing:border-box with a small side padding that
   it offsets with a negative row margin (its gutter system). The default gutter
   is tiny, so we scale it up to a clear 20px between paired fields. We own the
   numbers deterministically — zero the wrapper margin, set the group's negative
   margin and the field padding ourselves — so it doesn't depend on WAPF's
   internal values, and it works for half- AND full-width fields on every WAPF
   product (configurator + standard). */
.pd-wapf .wapf-wrapper { margin-left: 0 !important; margin-right: 0 !important; }
.pd-wapf .wapf-field-group { margin-left: -10px !important; margin-right: -10px !important; }
.pd-wapf .wapf-field-container {
  box-sizing: border-box;
  padding-bottom: 20px;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin: 0;
}

/* Field labels — slightly larger than .option-label, tight to the field. */
.pd-wapf .wapf-field-label label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: #000;
  margin-bottom: 5px;
  text-transform: none;
  letter-spacing: 0;
}
/* Paragraph-field headings (e.g. "What's In The Kit", "Summary") — Oswald,
   sentence case (not all-caps), sitting close to the fields beneath. */
.pd-wapf .wapf-field-p .wapf-field-label label,
.pd-wapf .wapf-field-p .wapf-field-label label span {
  font-family: var(--font-head, 'Oswald'), sans-serif;
  font-weight: 400;
  font-size: 20px !important;
  line-height: 1.2;
  letter-spacing: .3px;
  text-transform: none;
  color: #000;
  margin-bottom: 6px;
}

/* Inputs + selects — theme form controls (44px, soft-grey border, 6px radius,
   Open Sans, navy focus ring); native spinner/dropdown chrome stripped. */
.pd-wapf .wapf-input,
.pd-wapf .wapf input[type="number"],
.pd-wapf .wapf input[type="text"],
.pd-wapf .wapf select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background-color: #fff;
  border: 1px solid #c2c2c2;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #000;
  outline: none;
  box-shadow: none;
}
.pd-wapf .wapf input[type="number"]::-webkit-outer-spin-button,
.pd-wapf .wapf input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-wapf .wapf input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.pd-wapf .wapf select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23080153' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.pd-wapf .wapf-input:focus,
.pd-wapf .wapf input:focus,
.pd-wapf .wapf select:focus {
  border-color: var(--c-navy, #080153);
  box-shadow: 0 0 0 3px rgba( 8, 1, 83, .1 );
}
/* Instruction / helper text under fields — smaller and muted. */
.pd-wapf .wapf-field-description {
  color: var(--c-text-mid, #767676); /* v1.45.56: field instruction text; --c-text-mid is undefined so the fallback renders */
  font-size: 12px;
  line-height: 1.5;
}
/* Links inside WAPF helper / paragraph text use the theme navy, not the
   browser's default bright blue. */
.pd-wapf .wapf-field-description a,
.pd-wapf .wapf-field-p a,
.pd-wapf .wapf a {
  color: var(--navy, #080153);
  text-decoration: underline;
}
.pd-wapf .wapf-field-label abbr,
.pd-wapf .wapf-pricing-hint { display: none; }

/* ── NON-BUILDER WAPF PRODUCTS (simple AND variable) ──────────────────
   v1.45.73, widened v1.45.77 per M. Both of these were flagged at v1.45.68
   as things the non-configurator branches would inherit from the
   configurator once WAPF started rendering there. They are wrong for those
   products for the same reason: the configurator's fields were designed
   against its own layout, and these branches have a different one.

   ⚠ SCOPE, and why v1.45.73 missed half of it. That release scoped these to
   `.variations_form`, matching the ask at the time ("variable non builder
   products"). But the theme has THREE WAPF wrappers, not two, and only the
   configurator should be excluded:

       .pd-configurator-form .pd-wapf   builder — keep its own treatment
       .pd-wapf-form         .pd-wapf   SIMPLE products with WAPF fields
       .variations_form      .pd-wapf   VARIABLE products with WAPF fields

   `.variations_form` matches only the third, so simple WAPF products such as
   the corner-bead add-on kept the full-bleed images and lost their price
   hints. Now written as `.pd-wapf:not(.pd-configurator-form)`, which states
   the actual rule — everything except the builder — so a fourth wrapper
   would be covered automatically rather than silently missed.

   1. PRICE HINTS BACK ON.
   The configurator hides them because its options are priced by the live
   total beside the visualiser, so a per-option "(+£x)" would be noise.
   Here they are the only place the option's cost appears — WAPF's own
   totals box is hidden on this branch (v1.45.70), so without these the
   shopper picks a £39.60 dado with nothing on screen saying so.

   Note this unhides ONLY the pricing hint, not the required-field `abbr`
   above it, which stays hidden site-wide. */
.pd-wapf:not(.pd-configurator-form) .wapf-pricing-hint {
  display: inline;
  font-weight: 400;
  color: #767676;
}

/* Per-field exceptions, supplied by M (v1.45.79) — fields where the hint is
   misleading rather than helpful, so the rule above is switched back off for
   them specifically.

   These MUST sit after the rule they override and carry the `.pd-wapf`
   prefix: M's originals are `label[for=…] .wapf-pricing-hint` at 0,2,0, which
   LOSES to the 0,3,0 unhide above. Prefixed they match at 0,3,0 and win on
   source order. Verified by measuring, not assumed.

   ⚠ These target specific WAPF field IDs on specific products, so they are
   tied to those field definitions. If a field is rebuilt in WAPF its ID
   changes and the hint silently reappears. */
.pd-wapf label[for="wapf-47583-d9ebeea"] .wapf-pricing-hint,
.pd-wapf label[for="wapf-18793-66615f21ceb9e"] .wapf-pricing-hint,
.pd-wapf .field-659e60860f521 .wapf-pricing-hint {
  display: none;
}

/* 2. SWATCH IMAGES CAPPED.
   WAPF lays swatches out on a CSS grid it sizes from `--wapf-cols`, and
   this field declares only TWO columns — so each image stretches to half
   the field width and renders several hundred pixels wide. The stain
   swatches on other products look fine only because that field happens to
   declare fifteen columns; nothing was constraining the image itself.

   Both swatch shapes are capped: `.qty-swatch-img` (quantity swatches, the
   reported case) and `.apf-pick-box` (plain image swatches), because a
   plain image-swatch field with a low column count would blow up exactly
   the same way. On the fifteen-column stain field this is a no-op — the
   grid cell is already far narrower than the cap.

   180px is a judgement, matched to the old site rather than derived; it is
   one number to change if M wants them larger or smaller.

   `!important` on max-width is insurance, not habit. Something is currently
   stretching these images past their 300px `width` attribute to fill the grid
   cell, and it is not in this theme — so it is WAPF's own stylesheet, which I
   cannot read from here and whose load order relative to this file is not
   guaranteed. A plain `max-width` would beat a plugin `width: 100%` (different
   properties, and max-width always wins), but not a plugin `max-width` that
   loads later. The theme already does this elsewhere in the WAPF block for the
   same reason — see `.pd-wapf .wapf-wrapper` above. Only `max-width` carries
   it; the other two declarations are left normal so they stay overridable. */
.pd-wapf:not(.pd-configurator-form) .qty-swatch-img img,
.pd-wapf:not(.pd-configurator-form) .apf-pick-box img {
  max-width: 180px !important;
  width: 100%;
  height: auto;
}

/* Radio / checkbox option rows — consistent spacing + label type. */
.pd-wapf .wapf-radio,
.pd-wapf .wapf-checkbox { padding: 4px 0; }
.pd-wapf .wapf-input-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #000;
}

/* Totals box: show ONLY the grand total, laid out label-left / value-right,
   relabelled "Total:" in inc/configurator.php. Product total + Options total
   are hidden (kept in the DOM so WAPF's price JS can still populate them). */
.pd-wapf .wapf-product-totals .wapf--inner { margin-bottom: 0 !important; }
.pd-wapf .wapf-product-totals .wapf--inner > div:has( > .wapf-grand-total ) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pd-wapf .wapf-grand-total {
  font-family: var(--font-head, 'Oswald'), sans-serif;
  font-weight: 700;
  white-space: nowrap;
}
.pd-wapf .wapf-product-totals .wapf--inner > div:has( > .wapf-product-total ),
.pd-wapf .wapf-product-totals .wapf--inner > div:has( > .wapf-options-total ) {
  display: none;
}

/* Paragraph / HTML field body text (instructions, notes) — smaller, so it
   reads as helper copy rather than a field. The configurator's styled kit
   list keeps its own (more specific) sizing. */
.pd-wapf .wapf-field-p .wapf-field-input,
.pd-wapf .wapf-field-html { font-size: 13px; line-height: 1.5; }

/* Inc/Ex VAT toggle row injected under the total on WAPF products
   (js/wapf-vat.js). */
.pd-wapf .pd-vat-row { margin-top: 12px; }

/* Room divider (13223): the "Number Of Slats" field is derived by
   js/room-divider.js — the shopper never edits it, so hide it. The count is
   shown as a "Number of slats" summary row in the totals box instead.
   Scoped to the field CONTAINER carrying the WAPF custom class so a paired
   sibling field can never be hidden with it; .pd-derived-hidden is the JS
   fallback for any markup variation. */
.pd-wapf .wapf-field-container.divider-panels,
.pd-wapf .wapf-field-container.pd-derived-hidden {
  display: none !important;
}

/* Room divider price guard (js/room-divider.js): while WAPF's options total
   is £0.00 for a non-45mm panel the combination is unpriced — the live site
   disables add-to-cart + greys the totals until a priced combination is
   selected. */
.pd-wapf .single_add_to_cart_button.disabled {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
}
/* v1.45.70 — hide WAPF's own totals box on VARIABLE products only.
   ------------------------------------------------------------------
   On the configurator and on standard WAPF products this box IS the price
   display, so it stays. Variable products already have the theme's own
   #priceDisplay and Inc/Ex VAT toggle, and WAPF's total ignores that toggle —
   so showing both meant two prices, one of which silently disagreed whenever
   Ex VAT was selected.

   `display: none` rather than removing it: js/product.js reads
   `.wapf-grand-total` out of this box on every option change and feeds it into
   #priceDisplay, so the node has to stay in the DOM and keep updating. It is
   the data source now, not a display.

   Scoped via `.variations_form`, which only the variable branch renders.

   v1.45.71 — `!important` is required, not defensive. WAPF writes the display
   value INLINE on this element: it ships with `style="display:none"` and its
   JS switches that to a visible value once it has a total. An inline style
   beats any selector, so the v1.45.70 rule was overridden the moment WAPF
   calculated — which is exactly when the box appears, so it looked as though
   the rule had never applied at all. */
.pd-wapf.variations_form .wapf-product-totals { display: none !important; }

.pd-wapf .wapf-product-totals.disabled {
  opacity: 0.45;
}

/* ── "Add all essential tools" → yellow button that reveals the tools ─────
   Moved from css/wall-visualiser.css in v1.22.0 and rescoped from
   .pd-configurator-form to the shared .pd-wapf, so the derived-field WAPF
   products (which don't load the visualiser stylesheet) share it. The button
   text (incl. the bundled price) is WAPF field content; clicking it reveals
   .all-tools-list and ticks every option (wall-visualiser.js on
   configurators, wapf-derived.js on the derived-field products). */
.pd-wapf .add-tools {
  display: inline-block;
  width: auto;
  box-sizing: border-box;
  margin: 6px 0;
  padding: 13px 26px;
  text-align: center;
  background: var(--c-yellow, #FBDB31);
  color: var(--c-navy, #080153);
  font-family: var(--font-head, 'Oswald'), sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-radius: var(--radius-btn, 12px);
  cursor: pointer;
  user-select: none;
  transition: filter .15s ease, transform .05s ease;
}
.pd-wapf .add-tools:hover { filter: brightness( .96 ); }
.pd-wapf .add-tools:active { transform: scale( .99 ); }

/* Essential-tools checkbox list — hidden until the button reveals it. */
.pd-wapf .all-tools-list { display: none; }
.pd-wapf .all-tools-list.tools-revealed { display: block; }
.pd-wapf .all-tools-list .wapf-field-label { display: none; }
.pd-wapf .all-tools-list .wapf-checkbox { padding: 4px 0; }
.pd-wapf .all-tools-list .wapf-input-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #000;
  cursor: pointer;
}
.pd-wapf .all-tools-list input[type="checkbox"] { accent-color: var(--c-navy, #080153); width: 18px; height: 18px; flex-shrink: 0; }

/* Slat wall (8347/9389): the "adapt ends" field is hidden until
   js/wapf-derived.js reveals it — the width/panel/gap combination doesn't
   divide exactly, so end slats need adapting. The legacy build toggled the
   same .showadaptends class; its companion hide rule lived in Elementor
   custom CSS, recreated here. */
.pd-wapf .ifadaptends { display: none; }
.pd-wapf .ifadaptends.showadaptends { display: block; }

/* Standard (non-configurator) WAPF products: stack the add-to-cart form so the
   order is advanced fields → total → VAT toggle → quantity → add-to-cart, i.e.
   the quantity sits BELOW the advanced fields. (Configurator products hide the
   quantity entirely, so this only affects standard products.) */
.pd-wapf-form form.cart {
  display: flex;
  flex-direction: column;
}
.pd-wapf-form form.cart .wapf,
.pd-wapf-form form.cart .wapf-product-totals { order: 10; }
.pd-wapf-form form.cart .pd-vat-row { order: 20; }
.pd-wapf-form form.cart .quantity   { order: 30; margin: 4px 0 14px; }
.pd-wapf-form form.cart .single_add_to_cart_button { order: 40; }
/* Give WC's in-form quantity a label + theme-matched control (the nice stepper
   only exists on non-WAPF simple products). */
.pd-wapf-form form.cart .quantity::before {
  content: "Quantity";
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #000;
  margin-bottom: 5px;
}
.pd-wapf-form form.cart .quantity input.qty {
  width: 96px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid #c2c2c2;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #000;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pd-wapf-form form.cart .quantity input.qty::-webkit-outer-spin-button,
.pd-wapf-form form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* "Request a sample" link — sits under the add-to-cart area. */
.request-sample-link {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #000;
  margin: 12px 0 20px;
}
.request-sample-link a { color: #080153; font-weight: 600; text-decoration: underline; }


/* ── source lines 2143–2381 ── */

/* ── CRITICAL: Override WooCommerce default product layout ── */

/* Force our 2-column grid on the product page */
.woocommerce div.product.pd-single-product,
div.product.pd-single-product {
  max-width: var(--row-max); /* was 1200px (v1.45.2, note 5) */
  margin: 0 auto;
  padding: 0 20px 60px;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  background: #fff;
  float: none;
  width: 100%;
}

/* Remove all default WC widths/floats on product columns */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.summary {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the default WC gallery — we have our own */
.woocommerce div.product .woocommerce-product-gallery {
  display: none !important;
}

/* Hide the default WC summary — we build our own layout */
.woocommerce div.product .summary.entry-summary {
  display: none !important;
}

/* Ensure gallery-col and info-col fill their grid cells */
.woocommerce div.product .gallery-col {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 100%;
}
.woocommerce div.product .info-col {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ── Price overrides ───────────────────────────────────────── */
.woocommerce div.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .price ins,
.woocommerce div.product .price .amount,
.woocommerce div.product .price del,
.pd-single-product .price,
.pd-single-product .price ins,
.pd-single-product .price .amount,
.pd-single-product .price del {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 500 !important;
  font-size: 26px !important;
  color: #000 !important;
  margin-bottom: 14px;
  padding-top: 22px;
  transition: opacity 0.15s;
  display: inline !important;
  background: none !important;
}
.woocommerce div.product .price del .amount {
  color: var(--price-strike) !important; /* v1.45.56: was #999 = 2.85:1 */
  text-decoration: line-through;
}
.woocommerce div.product .price ins {
  text-decoration: none !important;
}

/* ── Product title override ────────────────────────────────── */
.woocommerce div.product .product-title,
.woocommerce div.product .product_title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.3;
  color: #000;
  margin-bottom: 6px;
  padding: 0;
}

/* ── Breadcrumb override ───────────────────────────────────── */
.woocommerce .woocommerce-breadcrumb {
  max-width: var(--row-max); /* was 1200px (v1.45.2, note 5) */
  margin: 0 auto;
  padding: 14px 20px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;  /* was 13px/#666 — unified v1.45.23 */
  font-size: 12px;
  line-height: 1.2;
  color: #000;
}
.woocommerce .woocommerce-breadcrumb a {
  color: #000;
  font-weight: 600;
  text-decoration: none;
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--navy);
  text-decoration: none;
}

/* ── Quantity input override ───────────────────────────────── */
.woocommerce div.product .qty-wrap .qty-input,
.woocommerce .quantity .qty {
  -moz-appearance: textfield;
}

/* ── Add to cart button override ───────────────────────────── */
.woocommerce div.product .btn-cart,
.woocommerce div.product button.single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button {
  width: 100%;
  background: #080153 !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  padding: 16px 20px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.1s;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.woocommerce div.product .btn-cart:hover,
.woocommerce div.product button.single_add_to_cart_button:hover {
  background: #0a0270 !important;
}

/* ── WooCommerce tabs override ─────────────────────────────── */
.woocommerce div.product .woocommerce-tabs {
  clear: both;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  gap: 0;
  border-bottom: 1px solid #ddd;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 10px 20px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  display: block;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #080153;
  border-bottom-color: #080153;
}
.woocommerce div.product .woocommerce-tabs .panel {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 12px;
  color: #000;
}

/* ── Variant buttons — override default WC select dropdowns ─ */
.woocommerce div.product .variant-btn {
  border: 1px solid #E6E7E8;
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  padding: 12px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
  position: relative;
}
.woocommerce div.product .variant-btn.selected {
  border: 1px solid #000;
  font-weight: 600;
}

/* ── Responsive: product page stacks at mobile ─────────────── */
@media (max-width: 768px) {
  .woocommerce div.product.pd-single-product,
  div.product.pd-single-product {
    grid-template-columns: 1fr !important;
    gap: 20px;
    padding: 16px 16px 40px;
  }
  .woocommerce div.product .info-col {
    grid-column: 1;
    grid-row: 2;
  }
  .product-title { font-size: 22px; }
  .thumb-item { flex: 0 0 calc((100% - 4*8px) / 5); }
}

/* ── Hide any remaining default WC elements we don't need ──── */
.woocommerce div.product .product_meta,
.woocommerce div.product .woocommerce-product-rating {
  display: none;
}

/* ── Notices wrapper — keep it spanning full grid ──────────── */
.woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}


/* ── source lines 2641–2661 ── */
/* ── Product Trustpilot reviews (inc/trustpilot.php, v1.45.45) ──
   Sits between the product summary and the info band. Matches the
   product band's 900px reading column so the two align. The widget
   itself is rendered by Trustpilot's script into the empty div, so
   the min-height reserves its declared 140px and stops the info band
   jumping upward while the script loads. */
.pd-product-reviews {
  border-top: 1px solid var(--rule);
}
.pd-product-reviews__inner {
  max-width: calc(900px + (var(--row-pad) * 2));
  margin: 0 auto;
  padding: 32px var(--row-pad);
}
.pd-product-reviews .trustpilot-widget {
  min-height: 140px;
}

/* v1.45.74 — collapse the section when Trustpilot renders nothing.
   ------------------------------------------------------------------
   Two different empty cases produced the same band of white space:

     1. Product has NO SKU. Handled in PHP (inc/trustpilot.php) — the
        section is not printed at all, because that is knowable before
        render and hiding markup we know is empty is the wrong order.
     2. Product HAS a SKU but Trustpilot holds no reviews for it. Only
        Trustpilot knows that, and only after its async script has run.

   For case 2 the widget is now set to `data-no-reviews="hide"`, so the
   plugin injects no iframe — and this rule collapses the section, its
   32px padding, its 140px min-height and its top rule along with it.

   ⚠ TRADE-OFF, worth knowing. The min-height above exists to stop the
   info band jumping while the script loads. This rule works against
   that: until the iframe is injected there is no iframe to match, so a
   product that DOES have reviews now renders with the section collapsed
   and expands once Trustpilot answers. That is a small downward shift of
   below-the-fold content, accepted in exchange for never showing an
   empty band. Reverting is deleting this one rule.

   `:has()` is already used four times in this file, so it is not a new
   dependency. */
.pd-product-reviews:not(:has(iframe)) {
  display: none;
}
@media screen and (max-width: 766px) {
  .pd-product-reviews__inner { padding: 24px var(--row-pad); }
}


/* ── source lines 9991–10177 ── */
/* ════════════════════════════════════════════════════════════════════════
   1. PRODUCT DETAILS — stacked accordion (replaces WC tabs)
════════════════════════════════════════════════════════════════════════ */
.pd-product-details {
  background: #fff;
  padding: 60px var(--row-pad) 60px;
}
.pd-product-details__inner {
  max-width: var(--row-max); /* was 1200px (v1.45.2, note 5) */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.pd-product-details__item {
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
.pd-product-details__summary {
  list-style: none;       /* hide default disclosure triangle */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 4px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pd-product-details__summary::-webkit-details-marker { display: none; }
.pd-product-details__summary::marker { content: ""; }
.pd-product-details__label {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--navy);
}
.pd-product-details__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  color: var(--navy);
  transition: transform 0.2s ease;
}
.pd-product-details__item[open] .pd-product-details__icon {
  transform: rotate(180deg);
}
.pd-product-details__body {
  padding: 4px 4px 28px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}
.pd-product-details__body > *:first-child { margin-top: 0; }
.pd-product-details__body > *:last-child  { margin-bottom: 0; }
.pd-product-details__body p          { margin: 0 0 14px; }
.pd-product-details__body p:last-child { margin-bottom: 0; }
.pd-product-details__body ul,
.pd-product-details__body ol {
  margin: 0 0 14px 22px;
  padding: 0;
}
.pd-product-details__body li { margin-bottom: 6px; }
.pd-product-details__body strong { font-weight: 700; }
.pd-product-details__body a {
  color: var(--navy);
  text-decoration: underline;
}
.pd-product-details__body a:hover { text-decoration-thickness: 2px; }

/* WC attributes table inside the "Additional information" section */
.pd-product-details__body .woocommerce-product-attributes,
.pd-product-details__body .shop_attributes {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 15px;
}
.pd-product-details__body .woocommerce-product-attributes th,
.pd-product-details__body .shop_attributes th {
  width: 30%;
  padding: 12px 14px;
  text-align: left;
  font-weight: 700;
  background: #FAFAFA;
  border: 1px solid var(--rule);
  color: #000;
}
.pd-product-details__body .woocommerce-product-attributes td,
.pd-product-details__body .shop_attributes td {
  padding: 12px 14px;
  border: 1px solid var(--rule);
  color: #333;
}
.pd-product-details__body .woocommerce-product-attributes td p,
.pd-product-details__body .shop_attributes td p {
  margin: 0;
}

/* WC reviews template inside the "Reviews" section */
.pd-product-details__body #reviews { margin: 0; }
.pd-product-details__body #reviews .commentlist {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.pd-product-details__body #reviews .comment_container {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.pd-product-details__body #reviews .avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pd-product-details__body #reviews .meta {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}
.pd-product-details__body #reviews .star-rating { margin-bottom: 6px; }
.pd-product-details__body #review_form_wrapper { padding-top: 16px; }
.pd-product-details__body #review_form #respond p { margin-bottom: 14px; }
.pd-product-details__body #review_form .comment-form-rating label,
.pd-product-details__body #review_form label {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  margin-bottom: 6px;
}
.pd-product-details__body #review_form input[type="text"],
.pd-product-details__body #review_form input[type="email"],
.pd-product-details__body #review_form textarea {
  appearance: none;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #C2C2C2;
  border-radius: 5px;
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #000;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pd-product-details__body #review_form textarea {
  height: auto;
  min-height: 120px;
  padding: 12px;
  resize: vertical;
}
.pd-product-details__body #review_form input:focus,
.pd-product-details__body #review_form textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(8, 1, 83, 0.1);
}
.pd-product-details__body #review_form .submit {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pd-product-details__body #review_form .submit:hover { background: var(--navy-mid); }

/* Mobile typography */
@media (max-width: 779px) {
  .pd-product-details { padding-bottom: 40px; }
  .pd-product-details__label { font-size: 19px; }
  .pd-product-details__summary { padding: 18px 4px; }
  .pd-product-details__body { font-size: 15px; }
}


/* ══════════════════════════════════════════════════════════════
   STANDARD PRODUCTS WITH WAPF OPTIONS — rules recovered from the
   `pages` bundle (v1.45.64, reported by M on /bespoke-room-divider/)
   ══════════════════════════════════════════════════════════════
   These three were stranded in css/pages.css by the v1.45.54 split. They
   are product-page rules, and pages.css loads on `is_page() || is_404()`
   only — never on a product — so they stopped applying entirely.

   The visible one is the `display: none`. On a standard WAPF product the
   theme's own +/- stepper is deliberately NOT rendered (see the comment in
   woocommerce/single-product.php: the stepper sits outside the WAPF form,
   so it could not submit with it) and WooCommerce's in-form quantity box is
   hidden instead — one configured unit per add, with the input still
   submitting quantity=1. With the rule gone, that raw WC number input became
   VISIBLE on every standard WAPF product, picking up the
   `.pd-wapf-form form.cart .quantity` treatment further up this file
   (96x44 box plus a "Quantity" ::before label). So the report reads as a
   quantity selector with the wrong styling; it is actually a quantity
   selector that should not be on the page at all.

   Corroborated by the configurator half of the same pattern:
   `.pd-configurator-form .quantity { display: none; }` in
   css/wall-visualiser.css, which loads on configurator products and has
   been working throughout. Both WAPF wrappers are meant to hide it; only
   the standard-product one was stranded.

   ⚠ This affects EVERY standard WAPF product, not just the room divider.

   ⚠ There is a genuine contradiction in the codebase here, left as-is
   because this restores pre-split behaviour rather than picking a side:
   the `.pd-wapf-form form.cart .quantity` styling above (source lines
   1442-2023) dresses this control as a visible, labelled field, while this
   rule (source lines 11432-12085, i.e. ~9,000 lines later, so it won)
   hides it. The styling has therefore been dead code since that rule was
   added. If a visible quantity IS wanted on these products, deleting the
   `display: none` below is all it takes — the styling is already there and
   the form submits the value correctly. Worth a decision, not a guess.

   Position: appended at the end because in the monolith these sat at
   ~11,432, after every block this bundle was built from (1442-2023,
   2143-2381, 2641-2661, 9991-10177). Relative order preserved. */
.pd-wapf-purchase .pd-wapf-form { margin: 0; }
/* Single configured unit per add — hide the WC quantity box (input still
   submits quantity=1 with the form). */
.pd-wapf-form .quantity { display: none; }
/* v1.45.78 — ...unless nothing on the form is priced. "One configured unit
   per add" is the right rule for a product being configured; it is the wrong
   rule for a product whose only WAPF field is an informational note, which is
   an ordinary product that happens to carry a notice. Hiding the quantity
   there left shoppers unable to buy more than one — they would have had to
   add the kit, then change the quantity in the cart.
   The `.quantity input.qty` styling further up this file already dresses this
   control, so it comes back correctly styled rather than as a raw input. */
.pd-wapf-purchase--no-pricing .pd-wapf-form .quantity { display: block; }

/* v1.45.79 — sequence the unpriced-WAPF form to match every other product
   page: options -> Quantity -> price -> VAT toggle -> ADD TO CART.
   The form is already a flex column (see `.pd-wapf-form form.cart` above)
   with fields at 10, quantity at 30 and the button at 40; the price block is
   injected into the form by woocommerce/single-product.php precisely so it
   can take a place in that sequence. */
.pd-wapf-purchase--no-pricing form.cart #priceDisplay { order: 35; }
.pd-wapf-purchase--no-pricing form.cart .vat-toggle-row { order: 36; }

/* Spacing. `.price` carries `padding-top: 22px` for the non-WAPF layout,
   where it follows the short description directly. Inside this flex column
   it lands under the quantity and the extra padding reads as a gap, so the
   rhythm is set here by the flex gap instead. */
.pd-wapf-purchase--no-pricing form.cart #priceDisplay {
  padding-top: 0;
  margin-bottom: 6px;
}
.pd-wapf-purchase--no-pricing form.cart .vat-toggle-row { margin-bottom: 14px; }
.pd-wapf-purchase--no-pricing form.cart .quantity { margin: 4px 0 18px; }

/* The theme stepper js/product.js builds in place of WooCommerce's plain
   number box. `.qty-wrap` and `.qty-btn` are already styled above; this only
   restores the label treatment and suppresses WC's ::before duplicate. */
.pd-wapf-purchase--no-pricing form.cart .quantity::before { content: none; }
.pd-wapf-purchase--no-pricing form.cart .quantity .option-label {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #000;
  margin-bottom: 5px;
}
/* WC's own input sizing (96px box) is replaced by the stepper's own.
   The `.pd-wapf-form` in this selector is load-bearing, not decoration: the
   rule being overridden is `.pd-wapf-form form.cart .quantity input.qty`
   (0,4,2), so the obvious `.pd-wapf-purchase--no-pricing form.cart .quantity
   .qty-input` (0,4,1) LOSES on element count and the box stayed 96px wide —
   caught by measuring the rendered stepper at 174px against the 126px one
   every other product shows. */
.pd-wapf-purchase--no-pricing .pd-wapf-form form.cart .quantity .qty-input {
  width: 48px;
  height: auto;
  padding: 8px 0;
  border: none;
  border-radius: 0;
  text-align: center;
}
/* Space the live totals from the add-to-cart button. */
.pd-wapf-form .wapf-product-totals { margin: 6px 0 14px; }