/*
Theme Name: Panelling Direct
Theme URI: https://panellingdirect.co.uk
Author: Panelling Direct
Author URI: https://panellingdirect.co.uk
Description: Custom WooCommerce theme for Panelling Direct – Wall Panelling specialists.
Version: 1.45.80
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: panelling-direct
Tags: woocommerce, custom-menu, featured-images

This theme is built to match the Panelling Direct design system.
*/

/* Panelling Direct — core-early bundle (v1.45.54).
   Base layer: reset, CSS custom properties, header/nav/footer chrome,
   the shared FAQ component, the delivery modal and third-party carry-over.
   Source line ranges (v1.45.53): 1-1441, 7199-7289, 12493-12678, 12719-13047

   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 1–1441 (theme header hoisted above) ── */

/* ── RESET & VARIABLES ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --yellow:   #FBDB31;
  --navy:     #080153;
  --navy-mid: #30287C;
  --navy-dark:#05003d;
  --white:    #FFFFFF;
  --orange:   #FF8C45;
  --black:    #000000;
  --row-max:  1300px;
  --row-pad:  20px;

  /* v1.2.0 – archive page tokens (values from Figma spec) */
  --lavender:     #F4F0F8;
  --sale-red:     #CD0006;
  --sale-bg:      #F9E2E2;
  /* v1.45.56 — accessibility. Both of these carry meaning rather than
     decoration (the "From" price qualifier, and the was-price on sale
     items), so they need 4.5:1 on white, not 3:1.
       --muted        was #999999 = 2.85:1  -> #767676 = 4.54:1
       --price-strike was #B1B1B1 = 2.14:1  -> #767676 = 4.54:1
     --rule is a border token, not text, and is unchanged. ⚠ These are
     site-wide tokens — the greys will read noticeably darker. Flagged to
     the designer. */
  --muted:        #767676;
  --rule:         #DBDBDB;
  --price-strike: #767676;

  /* v1.12.0 – Interaction tokens (Figma node 631:33785).
     Used site-wide by all buttons and cards for hover / active states.
     Single source of truth — adjust here to tune the whole site at once. */
  --ix-transition:        180ms ease;        /* base transition duration */
  --ix-press:             0.99;              /* scale on :active for tactile press */
  --ix-card-border-hover: #C2C2C2;           /* darker border-on-hover for surface cards */
  --ix-shadow-button:     0 0 0 1px rgba(255,255,255,0.30), 0 2px 8px rgba(0,0,0,0.25);
  --ix-shadow-card:       0 0 0 1px #FFFFFF,                 0 2px 8px rgba(0,0,0,0.10);
  --ix-shadow-card-strong:0 0 0 1px #FFFFFF,                 0 2px 8px rgba(0,0,0,0.25);
}

body {
  font-family: 'Open Sans', sans-serif;
  background: #fff;
}

/* ── ACCESSIBILITY UTILITIES (v1.45.56) ─────────────────────────────
   Base layer: used by every page type, so it belongs here rather than in
   a page bundle or core-late. `.screen-reader-text` previously existed
   ONLY as `.pd-checkout .screen-reader-text` (css/checkout.css), so any
   use outside checkout silently rendered visible. This is the global one;
   the checkout-scoped rule is left in place and now simply duplicates it. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Visible on focus, so keyboard users can confirm where the link goes. */
.screen-reader-text:focus,
.screen-reader-text:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}

.pd-skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 300;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom-right-radius: 6px;
}
.pd-skip-link:focus {
  left: 0;
  outline: 2px solid var(--yellow);
  outline-offset: -4px;
}

/* ── SHARED CONTAINER ──────────────────────────────────────── */
.container {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 0 var(--row-pad);
  display: flex;
}

/* ── PROMO BANNER ──────────────────────────────────────────── */
.promo-bar {
  background: var(--yellow);
  color: var(--black);
}
/* v1.45.51: vertical padding moved off the bar and onto the anchor, so the
   padded area is part of the click target rather than dead space around it. */
/* v1.45.60 — `display: block` here is the FIX for the missing space before
   "Excl. Sale items", and it is not a text problem: the space has been in
   the setting all along.

   `.container` (above) is `display: flex`. The promo text is
   `<strong>…</strong> Excl. Sale items`, so the bare text node after the
   </strong> becomes an ANONYMOUS FLEX ITEM — and flex strips the leading
   whitespace of an item. Measured at 1440px: 0px between the two.

   Block restores normal inline flow, so whatever spacing is authored in the
   Customizer value renders as written. This matters beyond this one string:
   the setting is `wp_kses_post`-sanitised rich text, so any future edit that
   puts a space between two elements would have hit the same thing.

   `justify-content` / `align-items` are dropped as inert under block;
   `text-align: center` is what was actually centring the line. */
.promo-bar .container {
  display: block;
  text-align: center;
}
.promo-bar strong {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 120%;
}
.promo-bar span.lighter {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 120%;
}
/* v1.45.38: the promo bar is now a link to the newsletter page. It must
   read as the same yellow strip, not a blue link — so it inherits colour
   and only underlines the offer on hover. The non-bold trailing note
   ("Excl. Sale items") picks up the same 12px sizing as the <strong>. */
.promo-bar__link {
  display: block;          /* v1.45.51: full-width strip is the click target */
  padding: 9px 0;          /* was on .promo-bar — see above */
  color: inherit;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 120%;
}
/* v1.45.51: no underline on hover, per M. Focus-visible keeps a ring so the
   link is still discoverable by keyboard — removing the underline outright
   would otherwise leave no focus affordance at all. */
.promo-bar__link:hover { text-decoration: none; }
.promo-bar__link:focus-visible {
  text-decoration: none;
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

/* ── TOP NAV ───────────────────────────────────────────────── */
.top-nav {
  background: var(--navy);
  padding: 16px 0 16px;
}
.top-nav .container {
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.logo img {
  height: 42px;
  width: auto;
  display: block;
}
.logo .logo-img-mobile { display: none; }

/* Logo group */
.logo-group {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

/* Top-right utility area */
.top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.util-links {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
}
.util-links a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 120%;
  color: var(--white);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity .15s;
}
.util-links a:hover { opacity: 1; }
.util-links .sep {
  color: rgba(255,255,255,0.3);
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
}

.btn-trade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 22px;
  gap: 10px;
  opacity: 1;
  padding: 3px 14px;
  border-radius: 5px;
  border: 1px solid var(--yellow);
  color: var(--yellow) !important;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 120%;
  background: transparent;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.btn-trade:hover {
  background: var(--yellow);
  color: var(--navy) !important;
}

/* Search + Cart row */
.search-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-wrap input {
  background: #FFFFFF1A;
  border: 1px solid #FFFFFF1A;
  border-radius: 24px;
  padding: 0 46px 0 18px;
  height: 42px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  color: rgba(255,255,255,0.6);
  width: 290px;
  outline: none;
  transition: border-color .2s;
}
.search-wrap input:focus {
  border-color: var(--yellow);
  color: var(--white);
}
.search-wrap input::placeholder { color: rgba(255,255,255,0.4); font-weight: 600; }

.search-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 42px;
  width: 44px;
  background: var(--yellow);
  border: none;
  border-radius: 0 24px 24px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.search-btn:hover { background: #e8c800; }
.search-btn img {
  width: 24px;
  height: 24px;
  opacity: 1;
  position: relative;
  left: -3px;
}

/* Cart button */
.cart-btn {
  position: relative;
  width: 42px;
  height: 42px;
  background: var(--yellow);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.cart-btn:hover { background: #e8c800; }
.cart-btn img {
  width: 24px;
  height: auto;
  opacity: 1;
}
.cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #e03030;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── MAIN NAV ──────────────────────────────────────────────── */
.main-nav {
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 0;
  position: relative;
}
.main-nav .container {
  align-items: center;
  /* The nav bar runs (almost) edge-to-edge: no max-width cap, padding
     kept. Items are capped at 200px each and centred, and labels may
     wrap to two lines, so the bar can never stretch the page. */
  max-width: none;
}
.main-nav ul {
  list-style: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  width: 100%;
  min-width: 0;
}
.main-nav ul li {
  flex: 0 1 auto;   /* natural width, shrinking (and wrapping) when tight */
  max-width: 200px;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.main-nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 12px;
  min-height: 54px;
  height: auto;
  color: var(--white);
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  white-space: normal;
  text-align: center;
  width: 100%;
  transition: color .15s, opacity .15s;
  opacity: 0.9;
}
.main-nav ul li a:hover {
  opacity: 1;
  color: var(--yellow);
}
.main-nav ul li a .dropdown-icon {
  width: 11px;
  height: auto;
  display: inline-block;
  flex-shrink: 0;
  transition: transform .2s;
}
.main-nav ul li a .dropdown-icon path {
  stroke: currentColor;
  transition: stroke .15s;
}
.main-nav ul li a.sale-link {
  color: var(--orange);
  opacity: 1;
}
.main-nav ul li a.sale-link:hover {
  color: var(--yellow);
}

/* ── Simple dropdown submenus (hover/focus) ─────────────────
   For nav items with a small child list (Timber, Strips, Room
   Dividers, Dado, Sheet Materials). The parent link still navigates
   on click (a '#' parent is made non-navigating in main.js); the
   Panelling Kits mega panel keeps its click-to-open behaviour. */
.main-nav ul li.has-subnav { position: relative; }
.main-nav .nav-sub {
  display: none;
  gap: 0; /* the top-level .main-nav ul flex gap (20px) was inherited between dropdown items */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--rule, #dbdbdb);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 28px rgba(8, 1, 83, 0.12);
  padding: 8px 0;
  z-index: 60;
  flex-direction: column;
  align-items: stretch;
  width: auto;
}
.main-nav .has-subnav:hover > .nav-sub,
.main-nav .has-subnav:focus-within > .nav-sub {
  display: flex;
}
.main-nav .nav-sub li {
  flex: none;
  display: block;
  width: 100%;
  max-width: none;   /* lift the top-level 200px cap — full-width sub items */
}
.main-nav .nav-sub li a {
  height: auto;
  justify-content: flex-start;
  padding: 9px 20px;
  color: var(--black);
  opacity: 1;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.main-nav .nav-sub li a:hover {
  background: var(--lavender);
  color: var(--navy);
}
.main-nav .has-subnav:hover > a,
.main-nav .has-subnav:focus-within > a {
  color: var(--yellow);
  opacity: 1;
}
.main-nav .has-subnav:hover > a .dropdown-icon,
.main-nav .has-subnav:focus-within > a .dropdown-icon {
  transform: rotate(180deg);
}

/* Mega-panel column headings are links now (whole group is shoppable);
   single-link groups carry no list below the heading. */
a.dd-col-heading {
  display: block;
  text-decoration: none;
}
a.dd-col-heading:hover { text-decoration: underline; }
.dd-col--single .dd-col-heading { margin-bottom: 0; }

/* Mobile: mega group headings are links too. */
a.side-submenu-heading {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Active/open state */
.main-nav ul li.is-open > a {
  color: var(--yellow);
  opacity: 1;
  background: rgba(255,255,255,0.07);
}
.main-nav ul li.is-open > a .dropdown-icon {
  transform: rotate(180deg);
}

/* ── DROPDOWN PANEL (Mega Menu) ────────────────────────────── */
.dropdown-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--row-pad) * 2);
  max-width: calc(var(--row-max) - var(--row-pad) * 2);
  background: var(--white);
  border-top: 3px solid var(--yellow);
  border-radius: 0 0 5px 5px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 100;
  display: none;
  padding: 32px 0 40px;
}
.dropdown-panel.is-open {
  display: block;
}
.dropdown-panel .container {
  gap: 0;
  align-items: flex-start;
  padding: 0 30px;
}

.dd-col {
  flex: 1;
  padding: 0 24px;
}
.dd-col:first-child { padding-left: 0; }

.dd-col-heading {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 16px;
}
.dd-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: auto;
  text-align: left;
}
.dd-col ul li {
  flex: none;
  display: block;
  justify-content: unset;
  text-align: left;
}
.dd-col ul li a {
  display: block;
  text-align: left;
  align-items: flex-start;
  height: auto;
  padding: 0;
  width: auto;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--black);
  text-decoration: none;
  opacity: 1;
  justify-content: unset;
  white-space: normal;
  transition: color .15s;
}
.dd-col ul li a:hover {
  color: var(--navy-mid);
  opacity: 1;
}

.dd-col-img {
  flex: 1.4;
  padding: 0 0 0 24px;
}
.dd-img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #D9D9D9;
  border-radius: 8px;
}
/* If actual images are set */
.dd-img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
/* ── Mega-menu feature card (Wall Panelling → Wainscot Kit) ─────────────── */
.dd-feature { flex: 0 0 232px; padding: 0 0 0 24px; }
.dd-feature-card {
  position: relative;
  display: block;
  height: 100%;
  min-height: 232px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy);
  text-decoration: none;
}
.dd-feature-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dd-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,1,83,0.15) 0%, rgba(8,1,83,0.78) 100%);
}
.dd-feature-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  height: 100%;
  padding: 20px;
  color: var(--white);
}
.dd-feature-eyebrow { font-family: 'Open Sans', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; opacity: .92; }
.dd-feature-title { font-family: var(--font-head, 'Oswald'), sans-serif; font-weight: 500; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.dd-feature-desc { font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 1.4; opacity: .95; }
.dd-feature-cta {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-head, 'Oswald'), sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 11px 18px;
  border-radius: 100px;
  transition: filter .15s ease;
}
.dd-feature-card:hover .dd-feature-cta { filter: brightness(.95); }

/* ── MOBILE SEARCH PANEL (v1.45.0, designer note 28; restyled v1.45.10
   to Figma KibHVhjcUqOo3OcLIYuwQn 958:8673 — joined pill: translucent
   input half + yellow icon cap; the row takes the USP strip's slot
   while open, per the XS open-state mock 2007:1625) ──────────── */
.mobile-search-panel {
  background: var(--navy, #080153);
  padding: 21px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.mobile-search-panel form {
  display: flex;
  align-items: stretch;
}
.mobile-search-panel input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .1);
  border-right: none;
  border-radius: 40px 0 0 40px;
  padding: 10px 12px 10px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.mobile-search-panel input[type="text"]::placeholder { color: rgba(255, 255, 255, .8); opacity: 1; }
.mobile-search-panel input[type="text"]:focus { outline: none; background: rgba(255, 255, 255, .16); }
.mobile-search-panel .search-btn {
  /* Full reset of the base .search-btn rule — it is position:absolute
     with fixed 42x44 dimensions for the desktop inline field, which
     detached the yellow cap from the pill entirely (v1.45.11 fix). */
  position: static;
  right: auto;
  top: auto;
  height: auto;
  width: auto;
  flex: 0 0 auto;
  border: none;
  border-radius: 0 40px 40px 0;
  background: var(--yellow, #FBDB31);
  padding: 0 12px 0 15px; /* v1.45.19: was 0 12px 0 8px — centres the icon in the cap, per M. */
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mobile-search-panel .search-btn img { width: 24px; height: 24px; }
/* The mobile search world switches at 778px with .search-icon-btn /
   .search-wrap — the previous 992px hide left a dead zone at 779-991px
   where the toggle didn't exist but the panel could render (v1.45.11). */
@media (min-width: 779px) {
  .mobile-search-panel { display: none; } /* desktop uses the inline field */
}
/* Open state swaps the USP strip for the search row (mobile only). */
@media (max-width: 778px) {
  body.pd-msearch-open .usp-bar { display: none; }
}

/* ── USP BAR ───────────────────────────────────────────────── */
.usp-bar {
  background: var(--white);
  padding: 8px 0;
  border-bottom: 1px solid var(--rule, #dbdbdb); /* v1.45.0, designer note 31 */
}
.usp-bar .container {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.usp-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.usp-item img {
  height: 24px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
/* v1.45.38: the newsletter USP item is wrapped in an anchor so the whole
   item is clickable. The anchor must be transparent to the existing
   layout — it takes over the flex row the .usp-item used to provide, and
   inherits colour so the label doesn't turn into a blue link. */
.usp-item__link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.usp-item__link:hover .usp-text strong,
.usp-item__link:focus-visible .usp-text strong { text-decoration: underline; }
.usp-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.usp-text strong {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 120%;
  color: var(--black);
}
.usp-text span {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 120%;
  color: #555;
}
.usp-text a {
  color: #30287C;
  text-decoration: underline;
}
.usp-text a:hover { opacity: 0.8; }

.usp-divider {
  width: 1px;
  height: 32px;
  background: #0A0A0A1A;
  flex-shrink: 0;
}

/* ── MENU TOGGLE (mobile only) ─────────────────────────────── */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--navy-mid);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.menu-toggle img {
  display: block;
  width: auto;
}

.logo-img-mobile { display: none; }
.logo-img-desktop { display: block; }

/* Mobile search icon */
.search-icon-btn {
  display: none;
  width: 42px;
  height: 42px;
  background: var(--yellow);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.search-icon-btn:hover { background: #e8c800; }
.search-icon-btn img {
  width: 22px;
  height: 22px;
}

/* ── SIDE MENU OVERLAY ─────────────────────────────────────── */
.side-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.side-menu-overlay.is-open { display: block; }
.side-menu-overlay.is-visible { opacity: 1; }

/* v1.45.56: `transform` alone does not hide anything from the keyboard or
   the accessibility tree. Before this, all 42 links/buttons inside the
   closed side menu stayed focusable on EVERY page at EVERY viewport —
   measured: focus disappeared off-screen at tab stop 42 on desktop and
   stayed gone for ~45 presses. WCAG 2.4.3 / 2.4.7 / 2.4.11.
   `visibility` is delayed by the transition duration on close so the
   slide-out still animates, and applied instantly on open.
   SUPERSEDED:
   .side-menu { ...; transform: translateX(-100%); transition: transform 0.3s ease; ... }
   .side-menu.is-open { transform: translateX(0); } */
.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 380px;
  max-width: 90vw;
  height: 100%;
  background: var(--navy);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
  overflow-y: auto;
}
.side-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s linear 0s;
}

.side-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 20px 24px;
  flex-shrink: 0;
}
.side-menu-header img.side-logo {
  height: 36px;
  width: auto;
}
.side-menu-close {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.side-menu-close:hover { background: rgba(255,255,255,0.25); }
.side-menu-close img {
  width: 16px;
  height: 16px;
}

.side-menu-nav {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}
.side-menu-nav > li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.side-menu-nav li a,
.side-menu-nav li button.side-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 24px;
  color: var(--white);
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.side-menu-nav li a:hover,
.side-menu-nav li button.side-nav-toggle:hover {
  color: var(--yellow);
}
.side-menu-nav li a.side-sale-link {
  color: var(--orange);
}
.side-menu-nav li a.side-sale-link:hover {
  color: var(--yellow);
}
.side-nav-chevron {
  width: 12px;
  height: auto;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.side-menu-nav li.is-open .side-nav-chevron {
  transform: rotate(180deg);
}
.side-menu-nav li button.side-nav-toggle:hover .side-nav-chevron path {
  stroke: var(--yellow);
}

/* Sub-menu */
.side-submenu {
  display: none;
  list-style: none;
  padding: 8px 0 16px;
  background: var(--navy-mid);
}
.side-submenu.is-open { display: block; }
.side-submenu li { border-bottom: none; }
.side-submenu li a {
  padding: 10px 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--white);
  justify-content: flex-start;
}
.side-submenu li a:hover { color: var(--yellow); }
.side-submenu-heading {
  padding: 16px 24px 6px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* Side menu footer */
.side-menu-footer {
  padding: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.side-menu-footer .btn-trade-full {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--yellow);
  border-radius: 5px;
  color: var(--yellow);
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 31px;
  text-decoration: none;
  background: transparent;
  margin-bottom: 12px;
  transition: background 0.15s, color 0.15s;
}
.side-menu-footer .btn-trade-full:hover {
  background: var(--yellow);
  color: var(--navy);
}
.side-menu-footer .btn-register-full {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--white);
  border-radius: 5px;
  color: var(--white);
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 31px;
  text-decoration: none;
  background: transparent;
  margin-bottom: 20px;
  transition: background 0.15s, color 0.15s;
}
.side-menu-footer .btn-register-full:hover {
  background: var(--white);
  color: var(--navy);
}
.side-menu-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* v1.45.56: `.side-menu-contact__item` is the opening-hours row, which is
   now a <span> rather than a dead <a href="#">. Shares the anchor styling
   so the rendering is unchanged; it just has no hover state, because it is
   no longer interactive. */
.side-menu-contact a,
.side-menu-contact__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.75);
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 120%;
  text-decoration: none;
  transition: color 0.15s;
}
.side-menu-contact a:hover { color: var(--white); }
.side-menu-contact img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── CART PANEL ────────────────────────────────────────────── */
.cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cart-overlay.is-open    { display: block; }
.cart-overlay.is-visible { opacity: 1; }

/* v1.45.56: same defect as .side-menu above — the closed cart panel kept
   its close button, View Cart and Checkout links in the tab order.
   SUPERSEDED:
   .cart-panel { ...; transform: translateX(100%); transition: transform 0.3s ease; ... }
   .cart-panel.is-open { transform: translateX(0); } */
.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100vw;
  height: 100%;
  background: var(--white);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
  overflow: hidden;
}
.cart-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s linear 0s;
}

.cart-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: var(--navy-mid);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
  z-index: 1;
}
.cart-close:hover { background: var(--navy); }
.cart-close img { width: 14px; height: 14px; }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 80px 24px 0;
}

.cart-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #E8E8E8;
}
.cart-item:last-child { border-bottom: none; }
.cart-item-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.cart-item-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.cart-item-details { flex: 1; }
.cart-item-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
  color: var(--black);
  margin-bottom: 0;
}
/* v1.45.72 — selected options under the title in the slide-out cart.
   Matches .pd-cart-item__meta on the cart page (12px / #4b4b4b). */
.cart-item-meta {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #4b4b4b;
  margin: 2px 0 4px;
}
.cart-item-meta dl { margin: 0; }
.cart-item-meta dt,
.cart-item-meta dd { display: inline; margin: 0; }
/* WooCommerce wraps each <dd> value in a <p>. Left as a block it breaks the
   label and value onto separate lines; the panel is narrow enough that one
   line per option matters. */
.cart-item-meta p { display: inline; margin: 0; }
.cart-item-meta dt { margin-right: 4px; }   /* label/value gap — dt and dd are adjacent with no whitespace */
.cart-item-meta dd { margin-right: 6px; }   /* gap before the next option */

.cart-item-price {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: var(--black);
  margin-top: 12px;
}
.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Cart quantity stepper */
.qty-stepper {
  display: flex;
  align-items: center;
  border: 1.5px solid #CBCBCB;
  border-radius: 6px;
  overflow: hidden;
  height: 40px;
}
.qty-btn {
  width: 40px;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
  padding: 0;
}
.qty-btn img { width: 16px; height: 16px; }
.qty-btn img[alt="Decrease"] { width: 10px; }
.qty-btn:hover { background: #f5f5f5; }
.qty-value {
  width: 36px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 175%;
  color: var(--black);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.cart-remove svg path {
  stroke: #00000080;
  transition: stroke 0.15s;
}
.cart-remove:hover svg path { stroke: #000000; }

/* Cart footer */
.cart-footer {
  padding: 0 24px 28px;
  flex-shrink: 0;
}
.cart-footer::before {
  content: '';
  display: block;
  border-top: 1px solid #E8E8E8;
  margin-bottom: 20px;
}
.cart-subtotal-label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  color: #000;
  margin-bottom: 0;
}
.cart-subtotal-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.cart-subtotal-price {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 120%;
  color: #000;
}
.cart-subtotal-vat {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  color: #000;
}
.cart-delivery-note {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  color: #000;
  margin-bottom: 20px;
}
.cart-btn-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border: 2px solid var(--navy);
  border-radius: 6px;
  color: var(--navy);
  background: transparent;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 31px;
  text-decoration: none;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cart-btn-view:hover { background: var(--navy); color: var(--white); }
.cart-btn-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 6px;
  background: var(--navy);
  color: var(--white);
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 31px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.cart-btn-checkout:hover { background: var(--navy-mid); }

/* ── FOOTER ────────────────────────────────────────────────── */
.footer-main {
  background: var(--navy);
  padding: 48px 0 52px;
}
.footer-main .container {
  flex-direction: column;
  gap: 40px;
}

.footer-logo-row img {
  height: 34px;
  width: auto;
  display: block;
}

.footer-cols {
  display: flex;
  gap: 40px;
  width: 100%;
}
.footer-col { flex: 1; }
.footer-col--wide { flex: 1.2; }

.footer-col-heading {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 120%;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}

/* Contact column */
.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-contact-list li a,
.footer-contact-list li span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
  text-decoration: none;
  transition: color 0.15s;
}
.footer-contact-list li a:hover { color: rgba(255,255,255,0.75); }
.footer-contact-list img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.7;
}

/* Link columns */
.footer-link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-link-list li a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-link-list li a:hover { color: var(--white); }

/* Newsletter */
.footer-newsletter-text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #FFF;
  margin-bottom: 20px;
}

/* v1.45.58 — the footer email field was replaced by a button through to
   /newsletter-sign-up/. The button is a full pill rather than the old
   half-radius, because it no longer sits flush against an input, and it is
   an <a> rather than a <button>, so it needs the flex centring and the
   text-decoration reset that the <button> element gave for free.

   SUPERSEDED rules, preserved for a one-move restore alongside the markup
   in footer.php:

.subscribe-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 28px;
}
.subscribe-wrap input {
  background: #FFFFFF1A;
  border: 1px solid #FFFFFF1A;
  border-radius: 24px;
  padding: 0 120px 0 18px;
  height: 42px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  color: rgba(255,255,255,0.6);
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}
.subscribe-wrap input:focus {
  border-color: var(--yellow);
  color: var(--white);
}
.subscribe-wrap input::placeholder {
  color: rgba(255,255,255,0.4);
  font-weight: 600;
}
.subscribe-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 42px;
  padding: 0 18px;
  background: var(--yellow);
  border: none;
  border-radius: 0 24px 24px 0;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  white-space: nowrap;
  transition: background 0.15s;
}
.subscribe-btn:hover { background: #e8c800; }
*/
.footer-subscribe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 32px;
  margin-bottom: 28px;      /* matches the old .subscribe-wrap so Socials doesn't shift */
  background: var(--yellow);
  border: none;
  border-radius: 24px;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 120%;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.footer-subscribe-btn:hover { background: #e8c800; }

.footer-socials-heading {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
}
.footer-socials {
  display: flex;
  gap: 10px;
}
.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.footer-socials a:hover { opacity: 0.75; }
.footer-socials svg {
  width: 22px;
  height: 22px;
  fill: var(--white);
}
.footer-socials img {
  width: 30px;
  height: 30px;
  opacity: 0.7;
}

/* Featured / Trustpilot bar */
.footer-bar {
  background: #050326;
  padding: 22px 0;
}
.footer-bar .container {
  align-items: center;
  justify-content: space-between;
}
.footer-bar-left,
.footer-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-bar-left-label,
.footer-bar-right-label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 120%;
  color: var(--white);
  white-space: nowrap;
}
.footer-bar-left img,
.footer-bar-right img {
  height: 28px;
  width: auto;
}

/* Legal bar */
.footer-legal {
  background: #050326;
  border-top: none;
  padding: 18px 0;
}
.footer-legal .container {
  align-items: center;
  justify-content: space-between;
}
.footer-legal-left,
.footer-legal-right {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  color: #FFF;
}


/* ── source lines 7199–7289 ── */
/* ── 4. FAQ (generic / reusable) ────────────────────────────── */
.pd-faq {
  background: #fff;
}
/* Card chrome lives on the inner — no extra wrapper needed. */
.pd-faq__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 30px 27px;
}
/* Outer section padding — separates the card from neighbours. */
.pd-faq {
  padding: 24px var(--row-pad) 60px;
}
.pd-faq__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 33px;
  line-height: 1.2;
  margin: 0 0 38px;     /* 30 (card pad) + 8 = matches Figma 68px gap */
  color: #000;
}
/* On the homepage the FAQ heading matches the other 27px section
   titles (v1.45.0, designer note 18); 33px kept everywhere else. */
.home .pd-faq__title {
  font-size: 27px;
  font-weight: 700;
}
.pd-faq__list {
  display: flex;
  flex-direction: column;
}
.pd-faq__item {
  border-top: 1px solid var(--rule);
}
/* Hide the default disclosure triangle. */
.pd-faq__summary::-webkit-details-marker { display: none; }
.pd-faq__summary { list-style: none; }

.pd-faq__summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 0;
  cursor: pointer;
  user-select: none;
}
.pd-faq__q {
  flex: 1 1 auto;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: #000;
}
.pd-faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #000;
  transition: transform 0.2s ease;
}
.pd-faq__icon svg { display: block; width: 100%; height: 100%; }
/* Smaller chevron on the product and category templates only (v1.44.8). */
.single-product .pd-faq__icon,
.tax-product_cat .pd-faq__icon {
  width: 16px;
  height: 16px;
}
/* Rotate chevron when the item is expanded. Native <details> exposes
   the [open] attribute, so this works without JS. */
.pd-faq__item[open] > .pd-faq__summary > .pd-faq__icon {
  transform: rotate(180deg);
}
.pd-faq__a {
  padding: 0 0 32px;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
  max-width: 920px;     /* keeps long answers readable */
}
.pd-faq__a p {
  margin: 0 0 12px;
}
.pd-faq__a p:last-child {
  margin-bottom: 0;
}


/* ── source lines 12493–12678 ── */
/* ── Delivery Information modal (template-parts/delivery-modal.php,
   Figma 126:1901; opened via [data-pd-delivery] triggers) ── */
body.pd-delivery-modal-open { overflow: hidden; }
.pd-delivery-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pd-delivery-modal[hidden] { display: none; }
.pd-delivery-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.pd-delivery-modal__card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 54px rgba(0, 0, 0, 0.08);
  width: 829px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 56px 32px 62px;
}
.pd-delivery-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  line-height: 0;
}
.pd-delivery-modal__head {
  max-width: 559px;
  margin: 0 auto 32px;
  text-align: center;
}
.pd-delivery-modal__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: #000;
  margin: 0 0 16px;
}
.pd-delivery-modal__sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.pd-delivery-modal__body {
  display: flex;
  gap: 55px;
  justify-content: center;
  padding: 0 32px;
}
.pd-delivery-modal__images {
  width: 298px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 17px;
}
.pd-delivery-modal__img {
  width: 100%;
  border-radius: 5px;
  object-fit: cover;
  display: block;
}
.pd-delivery-modal__img--1 { height: 319px; }
.pd-delivery-modal__img--2 { height: 271px; }
.pd-delivery-modal__details {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.pd-delivery-modal__heading {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  color: #000;
  margin: 0 0 5px;
}
.pd-delivery-modal__note {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  line-height: 1.2;
  color: #000;
  margin: 0 0 12px;
}
.pd-delivery-modal__row {
  display: flex;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px dashed rgba(0, 0, 0, 0.3);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.2;
}
.pd-delivery-modal__rows .pd-delivery-modal__row:last-child {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
}
.pd-delivery-modal__label { font-weight: 700; color: #000; white-space: nowrap; }
.pd-delivery-modal__label--regular { font-weight: 400; }
.pd-delivery-modal__value {
  flex: 1 0 0;
  min-width: 0;
  text-align: right;
  color: #494949;
}
.pd-delivery-modal__contact {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.2;
  color: #000;
  max-width: 299px;
  margin: 0;
}
.pd-delivery-modal__contact a { color: inherit; text-decoration: underline; }
@media (max-width: 760px) {
  .pd-delivery-modal { padding: 12px; }
  .pd-delivery-modal__card { padding: 52px 20px 40px; }
  .pd-delivery-modal__body {
    flex-direction: column;
    gap: 22px;
    padding: 0;
  }
  .pd-delivery-modal__images { width: 100%; padding-top: 0; }
  .pd-delivery-modal__img--1 { height: 189px; }
  .pd-delivery-modal__img--2 { display: none; } /* mobile design shows one image */
  .pd-delivery-modal__title { font-size: 26px; }
}

/* FAQ accordions inside the info band (see pd_render_info_band_faq) */
.pd-info-band__faq { margin: 4px 0 18px; }
.pd-info-band__faq .pd-faq__a { padding-bottom: 12px; }
/* Compact FAQ presentation inside SEO bands (product + category) —
   smaller questions, tighter rows than the standalone FAQ page. */
.pd-info-band__faq .pd-faq__summary { padding: 14px 0; }
.pd-info-band__faq .pd-faq__q { font-size: 16px; }

/* ══════════════════════════════════════════════════════════════
   Cart / checkout display tweaks + info-band icon figures (v1.44.1)
══════════════════════════════════════════════════════════════ */
/* WAPF per-field pricing hints — hidden in the cart and checkout only */
.woocommerce-cart .wapf-pricing-hint,
.woocommerce-checkout .wapf-pricing-hint { display: none; }

/* WC variation meta list — hidden at checkout only */
.woocommerce-checkout .variation { display: none; }

/* WooCommerce's "(includes £x.xx VAT)" suffix after the total — own
   line under the price, smaller and non-bold. The duplicate VAT note
   in the order-summary total LABEL was removed from
   checkout/review-order.php. */
.pd-order-summary__total-value .includes_tax,
.pd-cart__summary-total-value .includes_tax {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #444;
  white-space: normal;
}

/* Order summary total — price column right-aligned */
.pd-order-summary__total-value { text-align: right; }

/* v1.45.62 — the FSC icon cap MOVED to css/info-band.css. Do not restore it
   here: it lost the cascade from this file. See the note there. Previously:
       .pd-info-band__imgrow-item--icon img { max-width: 60px; }
*/


/* ── source lines 12719–13047 ── */
/* ══════════════════════════════════════════════════════════════
   v1.44.3 — side cart, PDP short description, lost password
══════════════════════════════════════════════════════════════ */
/* Slide-out cart: hide WooCommerce's own tax suffix — the panel
   footer prints its explicit "(incl. VAT)" span already. */
.cart-panel .tax_label { display: none; }

/* Pasted/preformatted product descriptions (e.g. the 9x bead & butt
   sheets page arrived as a <pre>-style block) rendered unwrapped
   monospace and overflowed the container (v1.45.2, designer note 6).
   Wrap and restore body typography; guard tables/images generally. */
.pd-product-details__body { overflow-wrap: break-word; }
.pd-product-details__body pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 12px;
}
.pd-product-details__body img { max-width: 100%; height: auto; }
.pd-product-details__body table { max-width: 100%; }

/* Price + add-to-cart block: 24px separation from the fields above
   (v1.45.2, designer note 3). Applies to variable, simple and
   configurator (pd-wapf-purchase) branches alike. */
.purchase-section { margin-top: 24px; }

/* Short product description under the SKU (single product) */
.product-short-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #000;
  margin: 12px 0 24px; /* 24px below, separating the option fields (v1.45.2, note 2) */
}
.product-short-desc p { font-size: 15px; margin: 0 0 8px; }
.product-short-desc p:last-child { margin-bottom: 0; }

/* Lists in the short description (v1.45.74).
   ------------------------------------------------------------------
   The reset at the top of this file zeroes padding on EVERY element
   (`*, *::before, *::after { margin: 0; padding: 0; }`), which strips a
   <ul>'s default left padding. Markers are `list-style-position: outside`
   by default, so with no padding to sit in they render OUTSIDE the box —
   hanging left of the info column and over the gallery, exactly as M saw.
   The bullets were never misplaced by anything list-specific; they were
   collateral from the global reset.

   The short description is editor-authored prose, so it takes the same
   27px indent the theme already uses for its other two prose blocks —
   .pd-post__content (css/blog.css) and .pd-legal__content (css/pages.css),
   both Figma-derived. Same shape as those rules, so all three stay in step.

   `list-style` is restated rather than relied on: the reset does not touch
   it today, but half a dozen components in this file set `list-style: none`
   and a future shared rule landing on `ul` would silently blank these. */
.product-short-desc ul,
.product-short-desc ol {
  margin: 0 0 8px;
  padding: 0 0 0 27px;
}
.product-short-desc ul { list-style: disc; }
.product-short-desc ol { list-style: decimal; }
.product-short-desc li { margin: 0; }
.product-short-desc li + li { margin-top: 4px; }
/* Matches the p:last-child rule above so a trailing list does not add a
   second gap on top of the block's own 24px bottom margin. */
.product-short-desc ul:last-child,
.product-short-desc ol:last-child { margin-bottom: 0; }
/* Nested lists indent again and keep their own spacing. */
.product-short-desc li > ul,
.product-short-desc li > ol { margin: 4px 0 0; }

/* ── Lost / reset password (WC endpoint, no template override) ──
   Styled to match the single-column account login panel: centred,
   480px max width, same field styling, same navy Oswald button. */
.woocommerce-lost-password .woocommerce-ResetPassword,
.woocommerce-lost-password .lost_reset_password {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 36px;
}
.woocommerce-lost-password .lost_reset_password p:first-child {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #000;
  margin: 0 0 20px;
}
.woocommerce-lost-password .lost_reset_password .form-row {
  margin: 0 0 20px;
  padding: 0;
}
.woocommerce-lost-password .lost_reset_password label {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: #000;
  margin-bottom: 4px;
}
.woocommerce-lost-password .lost_reset_password .input-text {
  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;
  line-height: 1.2;
  color: #000;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce-lost-password .lost_reset_password .input-text:focus {
  outline: none;
  box-shadow: var(--ix-shadow-button);
}
.woocommerce-lost-password .lost_reset_password button[type="submit"] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 24px;
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.woocommerce-lost-password .lost_reset_password button[type="submit"]:hover,
.woocommerce-lost-password .lost_reset_password button[type="submit"]:focus-visible {
  background: var(--navy-mid);
}
.woocommerce-lost-password .lost_reset_password button[type="submit"]:active {
  transform: scale(var(--ix-press));
}

/* ── Above-gallery product banner (v1.44.6) ─────────────────────
   Registry-gated per product (pd_product_gallery_banner).
   Borderless per M (v1.44.7). */
.pd-gallery-banner { margin: 0 0 16px; }
.pd-gallery-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Sample product page (product 56181): hide the WAPF fields block and
   the SKU — not needed on the sample product (v1.45.18, per M). */
#product-56181 .wapf { display: none; }
#product-56181 .product-sku { display: none; }

/* Bespoke sheets: the mobile summary slot is empty on desktop (the
   summary card lives in the aside there, JS moves it in below 1000px),
   but as a flex child it still claimed a 48px gap slot — hide it while
   empty so desktop spacing is unaffected (v1.45.19). */
.pd-bq__summary-slot:empty { display: none; }

/* Wide (landscape) video in a video-row section: full width above the
   row, 16/9 — the row itself crops clips to 9/16 portrait (v1.45.20). */
.pd-seo-media__video--wide { max-width: none; margin: 0 0 24px; }
.pd-seo-media__video--wide video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* A row reduced to a single clip shouldn't stretch full width at 9/16 —
   centre it at the standalone 550px cap instead (v1.45.20). */
.pd-seo-media__row .pd-seo-media__video:only-child {
  flex: 0 1 550px;
  margin: 0 auto;
}

/* ══ MOBILE WHATSAPP PROMPT (template-parts/whatsapp-prompt.php) ══
   v1.45.51 — recreates the live Elementor popup, restyled to the theme.
   Hidden by default and above the mobile breakpoint, so there is no
   desktop flash before JS runs and no work for JS to undo. */
.pd-wa-prompt { display: none; }

@media screen and (max-width: 766px) {
  .pd-wa-prompt[data-pd-wa]:not([hidden]) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: fixed;
    right: 14px;
    /* Sits clear of the iOS home indicator / Android nav bar. */
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 9998;            /* below the delivery modal, above page content */
    max-width: min(300px, calc(100vw - 28px));
    padding: 14px;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 12px;
    box-shadow: var(--ix-shadow-card-strong);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--ix-transition), transform var(--ix-transition);
  }
  /* Selector must out-specify the base rule above
     (.pd-wa-prompt[data-pd-wa]:not([hidden]) = 3 class-level parts). A bare
     .pd-wa-prompt.is-visible loses, leaving the prompt stuck at opacity 0
     — i.e. rendered, occupying space, and permanently invisible. */
  .pd-wa-prompt[data-pd-wa].is-visible { opacity: 1; transform: translateY(0); }

  .pd-wa-prompt__link {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--navy);
    min-width: 0;
  }
  .pd-wa-prompt__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 9px;
    object-fit: contain;
  }
  .pd-wa-prompt__text {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 118%;
    letter-spacing: 0.01em;
  }
  .pd-wa-prompt__link:active { transform: scale(var(--ix-press)); }

  .pd-wa-prompt__close {
    flex: 0 0 auto;
    /* 32px hit area, visually a small cross — 24px would fail the
       minimum touch target on a control this close to the screen edge. */
    width: 32px;
    height: 32px;
    margin: -4px -4px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: 50%;
    transition: color var(--ix-transition), background var(--ix-transition);
  }
  .pd-wa-prompt__close:hover,
  .pd-wa-prompt__close:focus-visible { color: var(--navy); background: var(--lavender); }
}

@media (prefers-reduced-motion: reduce) {
  .pd-wa-prompt[data-pd-wa]:not([hidden]) { transition: none; transform: none; }
  .pd-wa-prompt[data-pd-wa].is-visible { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   THIRD-PARTY / CONTENT CARRY-OVER (v1.45.53)
   Ported from the live Customizer "Additional CSS" after auditing it
   against this theme. Only rules whose markup still exists here are
   included — see the README for what was dropped and why.
   ══════════════════════════════════════════════════════════════════ */

/* ── Termly (consent) ──────────────────────────────────────────────
   Hides the 1st and 3rd paragraphs of the banner message.
   ⚠ The class names are BUILD HASHES generated by Termly, not stable
   API. If the banner text reappears, re-read the classes off the live
   DOM — this rule will have stopped matching, silently. */
.termly-styles-message-e9e76f.termly-styles-message-d6c726 p:nth-of-type(1),
.termly-styles-message-e9e76f.termly-styles-message-d6c726 p:nth-of-type(3) {
  display: none !important;
}

/* ── Klaviyo onsite forms ──────────────────────────────────────────
   ⚠ Same caveat, more strongly: `go50563112`, `Xuajs1` and `SSeGvq`
   are per-form/per-build hashes. Expect to re-derive these from the
   live DOM rather than trusting the copy. */
.needsclick.go50563112.kl-private-reset-css-Xuajs1 {
  padding: 0 20px !important;
}
.needsclick.klaviyo-close-form.kl-private-reset-css-Xuajs1,
.needsclick.klaviyo-close-form.kl-private-reset-css-Xuajs1:hover {
  background-color: transparent !important;
  border: none !important;
}
/* Hides the Klaviyo teaser tab. */
.needsclick.kl-teaser-SSeGvq.undefined.kl-private-reset-css-Xuajs1 {
  display: none;
}

/* ── WooCommerce Product Bundles ("add tools" bundles) ─────────────
   Still live: js/wapf-derived.js drives `.all-tools-list` / `.add-tools`
   and toggles the bundled_product_checkbox inputs. */
.bundle_sells_title h3 { font-size: 25px; }
.bundled_product_title_inner .item_title,
.bundled_product_title_inner,
.bundled_product_title_link { font-size: 18px !important; }
.bundled_product_title.product_title {
  font-size: 18px !important;
  margin-top: 0 !important;
  margin-bottom: 5px;
}
.bundled_product_images.images { width: 10% !important; }
div.bundled_product_summary:not(.thumbnail_hidden) .details { width: 90% !important; }
div.bundled_product_summary,
.woocommerce div.product.bundled_product_summary {
  padding-bottom: 15px !important;
  margin-bottom: 15px !important;
}
div + .bundle_sells_title { padding-top: 1px; }
/* ⚠ Hides bundled items 3–20, i.e. the bundle shows at most TWO items.
   Carried over verbatim because the live behaviour depends on it — but
   it is a hard cap: adding a third tool to a bundle will silently not
   appear until this is changed. */
.bundled_item_3,  .bundled_item_4,  .bundled_item_5,  .bundled_item_6,
.bundled_item_7,  .bundled_item_8,  .bundled_item_9,  .bundled_item_10,
.bundled_item_11, .bundled_item_12, .bundled_item_13, .bundled_item_14,
.bundled_item_15, .bundled_item_16, .bundled_item_17, .bundled_item_18,
.bundled_item_19, .bundled_item_20 { display: none; }

/* ── Clearpay express button ───────────────────────────────────── */
#clearpay_express_button { border: none; }

/* ── Content-level classes ─────────────────────────────────────────
   These style markup that lives in the DATABASE — product descriptions
   and WAPF field settings — so the content arrives on the new build
   intact and would otherwise lose its styling silently. */

/* WAPF field wrapper class set per-field in the WAPF admin. */
.custom-height { max-width: 300px; }
.custom-height label { font-weight: bold; }
.custom-height label::after { content: ':'; }
.custom-height .wapf-field-description { color: #000; line-height: 1.3; }

/* In product copy / WAPF options. */
.corner-bead img { max-width: 80px; }
.a-samples span { color: #8D7102; } /* v1.45.56: was #e7b903 = 1.85:1 on white. Third-party carry-over; markup lives in product copy, not the theme. */

/* Product 3105 — hides the first two WAPF total rows and the pricing
   hint, leaving a single total. ⚠ Product-ID-scoped, and 3105 is not in
   this theme's product registry, so it is unverified against the new
   build; harmless if the product no longer exists. */
.postid-3105 .wapf-product-totals .wapf--inner div:nth-of-type(1),
.postid-3105 .wapf-product-totals .wapf--inner div:nth-of-type(2),
.postid-3105 .wapf-pricing-hint,
.postid-3105 p.price,
.postid-3105 abbr.required { display: none; }
.postid-3105 .wapf--inner div { max-width: 260px; }


/* ── FAQ responsive — duplicated from the trade block (source 7348–7363).
   template-parts/faq.php is reused by the category info bands, so these
   rules must exist outside pages.css. Identical values. ── */
@media (max-width: 779px) {
  .pd-faq {
    padding: 24px var(--row-pad) 40px;
  }
  .pd-faq__inner {
    padding: 24px 20px;
  }
  /* .pd-faq__title — size unchanged from L (33px) */
  .pd-faq__summary {
    padding: 24px 0;
    /* Allow longer questions to wrap onto two lines without
       crushing the chevron. */
    align-items: flex-start;
  }
  .pd-faq__icon {
    margin-top: 2px;
  }
}