/*
 * Die Pale Depot brand layer (v2.4).
 * Loads after site.css. Typography, the end-grain motif, trade icons,
 * product pages, reviews and motion.
 *
 * Fonts: Barlow and Barlow Condensed, self-hosted (SIL Open Font Licence,
 * see assets/fonts/OFL-LICENSE.txt). No Google Fonts request, so nothing
 * is sent to third parties (POPIA-friendly) and text renders faster.
 */

/* ------------------------------------------------------------------ fonts */
@font-face {
font-display:swap; font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url('/wp-content/themes/die-pale-depot-child/assets/css/../fonts/barlow-condensed-latin-600-normal.woff2') format("woff2"); }
@font-face {
font-display:swap; font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/themes/die-pale-depot-child/assets/css/../fonts/barlow-condensed-latin-700-normal.woff2') format("woff2"); }
@font-face {
font-display:swap; font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/themes/die-pale-depot-child/assets/css/../fonts/barlow-latin-400-normal.woff2') format("woff2"); }
@font-face {
font-display:swap; font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/themes/die-pale-depot-child/assets/css/../fonts/barlow-latin-500-normal.woff2') format("woff2"); }
@font-face {
font-display:swap; font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url('/wp-content/themes/die-pale-depot-child/assets/css/../fonts/barlow-latin-600-normal.woff2') format("woff2"); }

/* ------------------------------------------------------------------ tokens */
:root {
  --ds-font-heading: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --ds-font-body: "Barlow", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --ds-tracking-tight: -0.005em;
  --ds-leading-heading: 1.04;
  --ds-leading-tight: 0.98;
  --ds-text-base: 1.0625rem;
  --ds-text-2xl: clamp(2.1rem, 1.5rem + 2vw, 3.6rem);
  --ds-text-hero: clamp(2.8rem, 1.7rem + 4.4vw, 6rem);

  /* Timber palette, alongside the existing forest greens. */
  --pdp-heartwood: #a8743f;
  --pdp-heartwood-strong: #8a5a2b; /* text-safe on white */
  --pdp-sapwood: #f3ead8;
  --pdp-bark: #5c3d22;
}

body.pdp-native-theme { font-family: var(--ds-font-body); font-size: var(--ds-text-base); }
.pdp-native-theme :is(h1, h2, h3, h4) { font-family: var(--ds-font-heading); font-weight: 700; letter-spacing: var(--ds-tracking-tight); }
.pdp-native-theme h3 { font-weight: 600; font-size: clamp(1.3rem, 1.2rem + .4vw, 1.55rem); }
.pdp-site .pdp-page-hero h1 { font-size: var(--ds-text-hero); max-width: 19ch; }
.pdp-site .pdp-page-hero--compact h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.8rem); max-width: 20ch; }
.pdp-native-theme .ds-btn, .pdp-native-theme .pdp-quote-button { font-family: var(--ds-font-body); font-weight: 600 !important; letter-spacing: .01em; }

/* Kicker: sentence case with a small growth-ring mark instead of tracked capitals. */
.pdp-site .ds-kicker { gap: .5rem; color: var(--pdp-heartwood-strong); font-family: var(--ds-font-body); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pdp-site .ds-kicker::before { width: .85rem; height: .85rem; border-radius: 50%; background: repeating-radial-gradient(circle, var(--pdp-heartwood) 0 1.5px, transparent 1.5px 3px); }
.pdp-site .pdp-page-hero .ds-kicker { color: var(--pdp-sapwood); }
.pdp-site .pdp-page-hero .ds-kicker::before { background: repeating-radial-gradient(circle, var(--pdp-sapwood) 0 1.5px, transparent 1.5px 3px); }

/* Images with width/height attributes keep their proportions (the attributes only reserve space). */
:where(.pdp-site) img { height: auto; }

/* ------------------------------------------------------------------ header */
.pdp-native-theme .ds-header__inner { transition: padding-block var(--ds-duration) var(--ds-ease); }
.pdp-native-theme .pdp-header-logo { transition: height var(--ds-duration) var(--ds-ease); }
.pdp-native-theme .ds-header { transition: box-shadow var(--ds-duration) var(--ds-ease), background var(--ds-duration) var(--ds-ease); }
.pdp-native-theme.pdp-scrolled .ds-header { background-color: rgb(7 53 38 / .98); box-shadow: 0 .6rem 1.6rem rgb(7 53 38 / .25); }
.pdp-native-theme.pdp-scrolled .pdp-header-logo { height: 2.7rem; }

/* ------------------------------------------------------------------ home hero rings */
.pdp-hero-rings { position: absolute; z-index: 1; inset: 50% -9rem auto auto; width: min(62vw, 44rem); translate: 0 -50%; pointer-events: none; opacity: .5; }
.pdp-hero-rings path { fill: none; stroke: var(--pdp-sapwood); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pdp-hero-rings path:nth-child(odd) { stroke-width: .8; opacity: .8; }
.pdp-hero-rings__check { stroke-width: 1.6 !important; opacity: .7; }
.pdp-native-theme .pdp-hero-rings path { stroke-dashoffset: 1; animation: pdp-ring-draw 1.6s var(--ds-ease) forwards; }
.pdp-native-theme .pdp-hero-rings path:nth-child(2) { animation-delay: .12s; }
.pdp-native-theme .pdp-hero-rings path:nth-child(3) { animation-delay: .24s; }
.pdp-native-theme .pdp-hero-rings path:nth-child(4) { animation-delay: .36s; }
.pdp-native-theme .pdp-hero-rings path:nth-child(5) { animation-delay: .48s; }
.pdp-native-theme .pdp-hero-rings path:nth-child(6) { animation-delay: .6s; }
.pdp-native-theme .pdp-hero-rings path:nth-child(7) { animation-delay: 1.1s; animation-duration: .6s; }
@keyframes pdp-ring-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 47.99rem) { .pdp-hero-rings { inset: auto -8rem -6rem auto; translate: none; width: 26rem; opacity: .3; } }

/* ------------------------------------------------------------------ icons + chips */
.pdp-icon { width: 1.25rem; height: 1.25rem; flex: none; }
.pdp-icon--lg { width: 2rem; height: 2rem; }
.pdp-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pdp-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem .4rem .6rem; border: 1px solid rgb(243 234 216 / .35); border-radius: 999px; background: rgb(7 53 38 / .45); color: var(--pdp-sapwood); font-size: .92rem; font-weight: 500; backdrop-filter: blur(4px); }

/* ------------------------------------------------------------------ who we supply */
.pdp-segments { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-lg); overflow: hidden; background: var(--ds-color-border); }
.pdp-segment { position: relative; display: grid; align-content: start; gap: .6rem; padding: 1.6rem 1.5rem 1.4rem; background: var(--ds-color-surface); transition: background var(--ds-duration) var(--ds-ease); }
.pdp-segment:hover { background: #fcfaf5; }
.pdp-segment__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--pdp-sapwood); color: var(--ds-color-primary); transition: background var(--ds-duration) var(--ds-ease), color var(--ds-duration) var(--ds-ease), rotate .5s var(--ds-ease); }
.pdp-segment:hover .pdp-segment__icon { background: var(--ds-color-primary); color: var(--pdp-sapwood); rotate: -8deg; }
.pdp-segment h3 { margin: .3rem 0 0; }
.pdp-segment p { color: var(--ds-color-muted); }
.pdp-segment__links { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.pdp-segment__links a { color: var(--ds-color-primary); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--ds-duration) var(--ds-ease); }
.pdp-segment__links a:hover, .pdp-segment__links a:focus-visible { background-size: 100% 1.5px; }

/* ------------------------------------------------------------------ product cards (link version) */
.pdp-site .pdp-product-card--link { display: flex; flex-direction: column; overflow: hidden; border: var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-color-surface); color: inherit; text-decoration: none; box-shadow: var(--ds-shadow-sm); transition: opacity 650ms var(--ds-ease) var(--pdp-delay, 0ms), translate var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease); }
.pdp-site .pdp-product-card--link:hover, .pdp-site .pdp-product-card--link:focus-visible { translate: 0 -.25rem; box-shadow: var(--ds-shadow-md); }
.pdp-product-card__media { display: block; overflow: hidden; background: var(--pdp-sapwood); }
.pdp-site .pdp-product-card--link img { transition: scale .6s var(--ds-ease); }
.pdp-site .pdp-product-card--link:hover img { scale: 1.05; }
.pdp-site .pdp-product-card--link .pdp-product-card__body { display: grid; align-content: start; gap: .2rem; height: auto; padding: 1rem 1.1rem 1.15rem; }
.pdp-product-card__title { font-family: var(--ds-font-heading); font-size: 1.45rem; font-weight: 700; line-height: 1.05; color: var(--ds-color-ink); }
.pdp-product-card__title::after { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-left: .5rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; rotate: 45deg; translate: 0 -.12rem; transition: translate var(--ds-duration) var(--ds-ease); }
.pdp-product-card--link:hover .pdp-product-card__title::after { translate: .25rem -.12rem; }
.pdp-product-card__meta { color: var(--ds-color-muted); font-size: .95rem; }

/* ------------------------------------------------------------------ product family page */
.pdp-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: .95rem; color: rgb(243 234 216 / .85); }
.pdp-breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .6; }
.pdp-breadcrumb a { color: inherit; }
.pdp-breadcrumb [aria-current] { color: #fff; }

.pdp-facts { background: var(--ds-color-primary-strong); color: var(--pdp-sapwood); }
.pdp-facts__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); margin: 0; }
.pdp-facts__list > div { padding: 1.1rem 1.2rem; border-left: 1px solid rgb(243 234 216 / .15); }
.pdp-facts__list > div:first-child { border-left: 0; }
.pdp-facts dt { font-size: .85rem; opacity: .8; }
.pdp-facts dd { margin: .15rem 0 0; font-family: var(--ds-font-heading); font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: #fff; }
.pdp-facts dd small { font-family: var(--ds-font-body); font-size: .8rem; font-weight: 500; opacity: .8; }

.pdp-family__sizes-head { display: grid; gap: .6rem; max-width: 48rem; margin-bottom: 1.5rem; }
.pdp-family__sizes-head p { color: var(--ds-color-muted); }
.pdp-family .pdp-catalogue__table tbody tr { transition: background var(--ds-duration-fast); }
.pdp-family .pdp-catalogue__table tbody tr:hover { background: #fcfaf5; }

.pdp-reed-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; padding: 1.5rem; border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-lg); background: #fcfaf5; color: var(--ds-color-primary); }
.pdp-reed-card h3 { margin: 0 0 .2rem; }
.pdp-reed-card p { margin: 0; color: var(--ds-color-muted); }
@media (max-width: 40rem) { .pdp-reed-card { grid-template-columns: 1fr; } }

.pdp-family__about { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 56rem) { .pdp-family__about { grid-template-columns: 1fr; } }
.pdp-family__about p { max-width: 62ch; }
.pdp-uses { padding: 1.5rem; border-radius: var(--ds-radius-lg); background: var(--ds-color-surface); box-shadow: var(--ds-shadow-sm); }
.pdp-uses h3 { margin: 0 0 .8rem; }
.pdp-uses ul { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.pdp-uses li { display: flex; gap: .6rem; align-items: flex-start; }
.pdp-uses .pdp-icon { color: var(--ds-color-accent-strong); margin-top: .15rem; }

/* Diameter guide: each pole as a piece of end grain, to scale. */
.pdp-diameter-guide { margin: 0; }
.pdp-family__guide { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--ds-color-border); }
.pdp-family__guide h3 { margin: 0 0 1.1rem; }
.pdp-diameter-guide__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.2rem; }
.pdp-diameter-guide__item { display: grid; justify-items: center; gap: .45rem; outline: none; }
.pdp-endgrain {
  width: var(--d); height: var(--d); border-radius: 50%;
  background:
    radial-gradient(circle at 48% 52%, var(--pdp-bark) 0 2px, transparent 2.5px),
    repeating-radial-gradient(circle at 48% 52%, #e5c797 0 3px, #cf9f63 3px 4px, #e2c08c 4px 7px);
  box-shadow: 0 0 0 3px var(--pdp-bark), inset 0 0 0 2px rgb(92 61 34 / .35), 0 .4rem .8rem rgb(92 61 34 / .25);
  transition: scale var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease);
}
.pdp-diameter-guide__item:is(:hover, :focus-visible) .pdp-endgrain { scale: 1.08; box-shadow: 0 0 0 3px var(--ds-color-primary), inset 0 0 0 2px rgb(92 61 34 / .35), 0 .6rem 1.2rem rgb(92 61 34 / .3); }
.pdp-diameter-guide__label { font-size: .88rem; font-weight: 600; color: var(--ds-color-ink); }
.pdp-diameter-guide figcaption { margin-top: .8rem; font-size: .85rem; color: var(--ds-color-muted); }

/* Treatment */
.pdp-treatment { background: #fcfaf5; border-block: 1px solid #ece2cf; }
.pdp-treatment__head { display: grid; gap: .7rem; max-width: 48rem; margin-bottom: 2rem; }
.pdp-family [id], .pdp-site section[id] { scroll-margin-top: calc(var(--pdp-header-h, 6rem) + 1rem); }
.pdp-treatment__head p { color: var(--ds-color-muted); }
.pdp-treatment__grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 56rem) { .pdp-treatment__grid { grid-template-columns: 1fr; } }
.pdp-steps { counter-reset: pdp-step; display: grid; gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.pdp-steps li { counter-increment: pdp-step; position: relative; padding-left: 3rem; }
.pdp-steps li::before { content: counter(pdp-step); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--ds-color-primary); color: var(--pdp-sapwood); font-family: var(--ds-font-heading); font-weight: 700; }
.pdp-hazard-table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: .95rem; background: #fff; border-radius: var(--ds-radius-md); overflow: hidden; box-shadow: var(--ds-shadow-sm); }
.pdp-hazard-table :is(th, td) { padding: .7rem .85rem; border-bottom: 1px solid #efe7d6; text-align: left; vertical-align: top; }
.pdp-hazard-table thead th { background: var(--ds-color-primary); color: #fff; font-weight: 600; }
.pdp-hazard-table tbody th { font-family: var(--ds-font-heading); font-size: 1.2rem; color: var(--pdp-heartwood-strong); }
.pdp-treatment__note { margin-top: 1rem; font-size: .95rem; color: var(--ds-color-muted); }
.pdp-safety { margin-top: 2.5rem; padding: 1.4rem 1.5rem; border-left: 4px solid var(--pdp-heartwood); border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0; background: #fff; }
.pdp-safety h3 { margin: 0 0 .6rem; }
.pdp-safety ul { display: grid; gap: .4rem; margin: 0; padding-left: 1.1rem; }

.pdp-image-frame--wide { min-height: 0 !important; aspect-ratio: 16 / 7; }
.pdp-image-frame--wide img { width: 100%; height: 100%; object-fit: cover; }

/* FAQ */
.pdp-faq { margin-top: 1.2rem; border-top: 1px solid var(--ds-color-border); }
.pdp-faq__item { border-bottom: 1px solid var(--ds-color-border); }
.pdp-faq__item summary { position: relative; padding: 1.1rem 2.5rem 1.1rem 0; font-family: var(--ds-font-heading); font-size: 1.3rem; font-weight: 600; color: var(--ds-color-ink); list-style: none; cursor: pointer; }
.pdp-faq__item summary::-webkit-details-marker { display: none; }
.pdp-faq__item summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: .7rem; height: .7rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -70%; transition: rotate var(--ds-duration) var(--ds-ease); }
.pdp-faq__item[open] summary::after { rotate: 225deg; translate: 0 -20%; }
.pdp-faq__item p { margin: 0 0 1.2rem; max-width: 65ch; color: var(--ds-color-text); }

/* Related */
.pdp-related { margin-top: 1.2rem; }
.pdp-related__card { display: grid; overflow: hidden; border-radius: var(--ds-radius-md); background: var(--ds-color-surface); color: inherit; text-decoration: none; box-shadow: var(--ds-shadow-sm); transition: box-shadow var(--ds-duration) var(--ds-ease); }
.pdp-related__card:hover { box-shadow: var(--ds-shadow-md); }
.pdp-related__media { overflow: hidden; }
.pdp-related__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: scale .6s var(--ds-ease); }
.pdp-related__card:hover img { scale: 1.05; }
.pdp-related__name { padding: .9rem 1rem 1rem; font-family: var(--ds-font-heading); font-size: 1.35rem; font-weight: 700; color: var(--ds-color-ink); }

/* ------------------------------------------------------------------ products page */
.pdp-all-products__nav { position: sticky; top: var(--pdp-header-h, 5.5rem); z-index: 20; background: var(--ds-color-surface-muted); }
.pdp-all-products__nav a.is-active { border-color: var(--ds-color-primary) !important; background: var(--ds-color-primary) !important; color: #fff !important; }
.pdp-all-products__more { margin: 0 0 1rem; }
.pdp-all-products__more a { font-weight: 600; }

/* ------------------------------------------------------------------ reviews */
/* Warm tint + hairline so the section separates from the pale-green section above it. */
.pdp-site .pdp-reviews { background: #fcfaf5; border-block: 1px solid #ece2cf; }

.pdp-reviews__panel {
  display: grid;
  grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
  grid-template-areas: "summary intro" "summary body" "actions body";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: 1.25rem;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border: 1px solid #ece2cf;
  border-radius: var(--ds-radius-lg);
  background: #fff;
  box-shadow: 0 1.2rem 2.8rem rgb(92 61 34 / .08);
}
.pdp-reviews__summary { grid-area: summary; display: grid; gap: 1.1rem; align-content: start; }
.pdp-reviews__intro { grid-area: intro; display: grid; gap: .5rem; align-content: start; }
.pdp-reviews__actions { grid-area: actions; display: grid; gap: .8rem; justify-items: start; align-content: start; }
.pdp-reviews__body { grid-area: body; min-width: 0; }

.pdp-reviews__badge { display: block; width: 100%; max-width: 15rem; height: auto; margin-inline: -.35rem; }
.pdp-reviews__intro h2 { margin: 0; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.pdp-reviews__intro p { margin: 0; max-width: 52ch; color: var(--ds-color-muted); font-size: var(--ds-text-md); }

.pdp-reviews__stats { display: flex; gap: 0; margin: 0; }
.pdp-reviews__stats > div { display: grid; gap: .1rem; padding-right: 1.25rem; }
.pdp-reviews__stats > div + div { padding-left: 1.25rem; padding-right: 0; border-left: 1px solid #ece2cf; }
.pdp-reviews__stats dt { order: 2; font-size: .85rem; color: var(--ds-color-muted); }
.pdp-reviews__stats dd { order: 1; margin: 0; font-family: var(--ds-font-heading); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--ds-color-ink); }
.pdp-reviews__stats dd span { font-size: 1.2rem; color: var(--ds-color-muted); }

.pdp-reviews__write { color: var(--ds-color-primary); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor, transparent 60%); text-underline-offset: .25em; transition: text-decoration-color var(--ds-duration-fast); }
.pdp-reviews__write:hover { text-decoration-color: currentColor; }

/* No review cards from the plugin: one slim strip. */
.pdp-reviews--compact .pdp-reviews__panel {
  grid-template-columns: auto minmax(18rem, 1fr) auto;
  grid-template-areas: "summary intro actions";
  grid-template-rows: auto;
  align-items: center;
}
.pdp-reviews--compact .pdp-reviews__summary { gap: .9rem; }
.pdp-reviews--compact .pdp-reviews__stats > div { padding-right: 1rem; }
.pdp-reviews--compact .pdp-reviews__stats > div + div { padding-left: 1rem; }
.pdp-reviews--compact .pdp-reviews__badge { max-width: 10.5rem; }
.pdp-reviews--compact .pdp-reviews__summary { padding-right: clamp(1.5rem, 4vw, 3.5rem); border-right: 1px solid #ece2cf; }
.pdp-reviews--compact .pdp-reviews__intro h2 { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); }
.pdp-reviews--compact .pdp-reviews__actions { justify-items: end; }

@media (max-width: 68rem) {
  .pdp-reviews--compact .pdp-reviews__panel { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "summary intro" "summary actions"; }
  .pdp-reviews--compact .pdp-reviews__actions { justify-items: start; }
}
@media (max-width: 52rem) {
  .pdp-reviews__panel,
  .pdp-reviews--compact .pdp-reviews__panel { grid-template-columns: 1fr; grid-template-areas: "summary" "intro" "body" "actions"; }
  .pdp-reviews--compact .pdp-reviews__panel { grid-template-areas: "summary" "intro" "actions"; }
  .pdp-reviews--compact .pdp-reviews__summary { grid-auto-flow: column; justify-content: start; padding: 0 0 1.25rem; border-right: 0; border-bottom: 1px solid #ece2cf; }
  .pdp-reviews__summary { grid-auto-flow: column; justify-content: start; align-items: center; gap: 1.25rem; }
  .pdp-reviews__badge, .pdp-reviews--compact .pdp-reviews__badge { max-width: 9.5rem; }
  .pdp-reviews__stats dd { font-size: 2.1rem; }
}
@media (max-width: 30rem) {
  .pdp-reviews__summary, .pdp-reviews--compact .pdp-reviews__summary { grid-auto-flow: row; }
  .pdp-reviews__actions .ds-btn { width: 100%; }
}

/* ------------------------------------------------------------------ focus + motion safety */
.pdp-native-theme :is(a, button, summary, [tabindex]):focus-visible { outline: 3px solid var(--pdp-heartwood); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pdp-hero-rings path { animation: none !important; stroke-dashoffset: 0 !important; }
  .pdp-segment__icon, .pdp-site .pdp-product-card--link, .pdp-site .pdp-product-card--link img, .pdp-related__media img, .pdp-endgrain, .pdp-faq__item summary::after { transition: none !important; }
}

/* ==================================================================
   v2.5: header, phone menu and mobile layout
   ================================================================== */

/* No sideways scrolling on phones. "clip" (not "hidden") keeps the sticky header working. */
html,
body.pdp-native-theme { overflow-x: clip; }

/* Header: the ring decoration is now a background layer, so the header no longer
   needs to crop its contents (that crop was hiding the phone menu). */
.pdp-native-theme .ds-header {
  overflow: visible;
  background-image: url('/wp-content/themes/die-pale-depot-child/assets/css/../images/woodgrain-faint.svg');
  background-repeat: no-repeat;
  background-size: clamp(18rem, 36vw, 34rem);
  background-position: right clamp(-11rem, -10vw, -4rem) top -9rem;
}
.pdp-native-theme .ds-header::before { content: none; }
.pdp-header-wordmark { color: #fff; font-family: var(--ds-font-heading); font-size: 1.6rem; font-weight: 700; line-height: 1; white-space: nowrap; }

/* Old script-driven toggle: retired. */
.ds-nav-toggle { display: none !important; }

/* Phone / tablet menu (native <details>: works with no JavaScript). */
.pdp-mnav { display: none; }

@media (max-width: 63.99rem) {
  .pdp-desktop-nav { display: none !important; }
  .pdp-mnav { display: block; }

  .pdp-mnav__toggle {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.9rem;
    padding: .55rem 1.05rem;
    border: 1px solid rgb(255 255 255 / .4);
    border-radius: 999px;
    color: #fff;
    font-family: var(--ds-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--ds-duration-fast), color var(--ds-duration-fast), border-color var(--ds-duration-fast);
  }
  .pdp-mnav__toggle::-webkit-details-marker { display: none; }
  .pdp-mnav__toggle::marker { content: ""; }
  .pdp-mnav__toggle:focus-visible { outline: 3px solid var(--pdp-heartwood); outline-offset: 3px; }
  .pdp-mnav[open] > .pdp-mnav__toggle { border-color: #fff; background: #fff; color: var(--ds-color-primary-strong); }

  .pdp-mnav__icon { display: grid; gap: 4px; width: 18px; }
  .pdp-mnav__icon span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: translate .2s var(--ds-ease), rotate .2s var(--ds-ease), opacity .15s; }
  .pdp-mnav[open] .pdp-mnav__icon span:nth-child(1) { translate: 0 6px; rotate: 45deg; }
  .pdp-mnav[open] .pdp-mnav__icon span:nth-child(2) { opacity: 0; }
  .pdp-mnav[open] .pdp-mnav__icon span:nth-child(3) { translate: 0 -6px; rotate: -45deg; }

  .pdp-mnav__panel {
    position: absolute;
    z-index: 1100;
    inset: calc(100% + .5rem) 0 auto 0;
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .6rem;
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-color-primary-strong);
    box-shadow: 0 1.5rem 3rem rgb(7 53 38 / .35);
  }
  .pdp-mnav[open] .pdp-mnav__panel { animation: pdp-mnav-in .18s var(--ds-ease); }

  .pdp-mnav__panel ul { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
  .pdp-mnav__panel li { margin: 0; }
  .pdp-mnav__panel ul a {
    display: block;
    padding: .9rem 1rem;
    border-radius: .65rem;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 600;
    text-decoration: none;
    white-space: normal;
  }
  .pdp-mnav__panel ul a:is(:hover, :focus-visible) { background: rgb(255 255 255 / .08); }
  .pdp-mnav__panel ul a[aria-current="page"] { background: rgb(255 255 255 / .12); box-shadow: inset 3px 0 0 var(--ds-color-accent); }
  .pdp-mnav__panel ul a.ds-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: .5rem;
    padding: .95rem 1rem;
    border-radius: 999px;
    background: var(--ds-color-accent);
    color: var(--ds-color-primary-strong);
    box-shadow: none;
  }
  .pdp-mnav__contact { display: grid; gap: .2rem; margin-top: .6rem; padding: .8rem 1rem .4rem; border-top: 1px solid rgb(255 255 255 / .12); }
  .pdp-mnav__contact a { padding: .4rem 0; color: var(--pdp-sapwood); font-size: .98rem; text-decoration: none; }
}
@keyframes pdp-mnav-in { from { opacity: 0; translate: 0 -.4rem; } to { opacity: 1; translate: 0 0; } }

/* Phones: hide the announcement bar, larger base text, comfortable tap targets. */
@media (max-width: 47.99rem) {
  :root { font-size: 100%; }
  .pdp-header-stack > .ds-announcement { display: none; }
  .pdp-native-theme .ds-header__inner { min-height: 4.25rem; }
  .pdp-native-theme .pdp-header-logo { height: 2.9rem; max-width: 55vw; }

  .pdp-native-theme .ds-footer__links a,
  .pdp-native-theme .pdp-footer-legal a { display: inline-block; padding-block: .45rem; }
  .pdp-native-theme .pdp-link-arrow { display: inline-flex; min-height: 2.75rem; align-items: center; }

  .pdp-native-theme :is(.ds-kicker, .pdp-eyebrow, .pdp-footer-eyebrow, .pdp-footer-credit, .pdp-catalogue__availability) { font-size: .875rem; }
  .pdp-native-theme .pdp-price__excl,
  .pdp-native-theme .pdp-price__excl .amount { font-size: .875rem !important; }
  .pdp-native-theme .pdp-catalogue__table th { font-size: .8125rem; }
  .pdp-native-theme .pdp-progress li { font-size: .8125rem !important; }
  .pdp-native-theme .ds-trust__item { font-size: .9375rem; }
  .pdp-native-theme :is(.ds-footer__links li > span, .pdp-contact-actions a span, .pdp-footer-company, .pdp-footer-company p, .pdp-footer-company span) { font-size: .8125rem !important; }
  .pdp-native-theme .pdp-eyebrow { font-size: .875rem !important; }
}

/* Form fields at 16px or more, so iPhones don't zoom in when a field is tapped. */
.pdp-native-theme :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) { font-size: max(1rem, 16px) !important; }

