/*
 Theme Name:   DermHaus v1
 Theme URI:    https://dermhaus.co.za
 Description:  DermHaus production theme — editorial layout, considered skincare, clinically curated.
 Author:       DermHaus
 Version:      1.0.0
 Text Domain:  dermhaus-v1
 Requires at least: 6.0
 Requires PHP: 7.4
 License: GNU General Public License v2 or later
*/

/* ============================================================
   DERMHAUS DESIGN SYSTEM
   ============================================================ */
:root {
  --bone: #f5f1ea;
  --bone-soft: #ede7dc;
  --stone: #d8cfc1;
  --ink: #2a2520;
  --ink-soft: #5a5148;
  --mute: #8a8278;
  --line: #d8cfc1;
  /* Height reserved for the fixed top nav. All page-level top padding +
     sticky offsets reference this so nothing can ever be hidden behind it. */
  --dh-announce-h: 2.1rem;
  --top-nav-h: 5rem;
  /* Global control radius. Change here to retune the whole site at once. */
  --btn-radius: 5px;
  --input-radius: 5px;
  /* Subtle paper grain — applied via ::before on bone-soft surfaces.
     Encoded SVG of low-amplitude turbulence at ~1% opacity. */
  --dh-grain: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.165 0 0 0 0 0.145 0 0 0 0 0.125 0 0 0 0.65 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

/* =====================================================================
   View Transitions API — disabled. The auto navigation transition
   caused products in the grid to fly in from different directions on
   page change, which felt chaotic. The pages now load with no
   inter-page transition.
   ===================================================================== */
@view-transition { navigation: none; }

/* =====================================================================
   Scroll-triggered fade-ins — applied via .dh-reveal class. JS adds
   `.is-revealed` when the item enters the viewport.
   ===================================================================== */
.dh-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.dh-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .dh-reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   Free-shipping progress bar — rendered at top of the slide cart.
   ===================================================================== */
.dh-shipping-progress {
  padding: 1.1rem 2.5rem 1rem;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
}
.dh-shipping-progress__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.6rem;
  line-height: 1.4;
}
.dh-shipping-progress__label strong {
  font-weight: 700;
  color: var(--ink);
}
.dh-shipping-progress__label .amount,
.dh-shipping-progress__label bdi { font: inherit; color: inherit; }
.dh-shipping-progress__check {
  display: inline-block;
  margin-right: 0.4rem;
  color: #2f6b35;
  font-weight: 700;
}
.dh-shipping-progress__bar {
  position: relative;
  height: 4px;
  background: var(--stone);
  border-radius: 2px;
  overflow: hidden;
}
.dh-shipping-progress__fill {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dh-shipping-progress.is-unlocked .dh-shipping-progress__fill {
  background: #2f6b35;
}

/* =====================================================================
   Empty / error states — 404, empty cart, empty filter results
   ===================================================================== */
.dh-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--top-nav-h) + 2rem) 2rem 5rem;
}
.dh-404__inner {
  max-width: 36rem;
  text-align: center;
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 3rem 2.5rem 2.5rem;
  position: relative;
}
.dh-404__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.dh-404__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--ink);
  margin: 0 0 1.25rem;
  line-height: 1.15;
}
.dh-404__body {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 2rem;
}
.dh-404__cta {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.dh-404__signoff {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
}

/* Empty cart — centred editorial card beneath the "Your bag" heading */
.dermhaus-cart--empty {
  align-items: stretch;
}
.dh-empty-cart {
  max-width: 36rem;
  margin: 2rem auto 4rem;
  padding: 4rem 2.5rem;
  text-align: center;
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.dh-empty-cart__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  letter-spacing: 0;
}
.dh-empty-cart__body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  max-width: 28rem;
}
.dh-empty-cart__cta {
  margin: 0.75rem 0 0;
}

/* Hide WC's default "Your cart is currently empty!" notice that other
   plugins may still hook in. We render our own editorial copy above. */
.woocommerce-cart .cart-empty,
.woocommerce-cart .woocommerce-info.cart-empty {
  display: none !important;
}

.dh-empty-filter {
  max-width: 36rem;
  margin: 3rem auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.dh-empty-filter__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.85rem;
}
.dh-empty-filter__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--ink);
  margin: 0 0 0.85rem;
  line-height: 1.2;
}
.dh-empty-filter__body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
/* Tactility — add a faint paper grain to large bone-soft surfaces.
   Hero, philosophy, contact band, all checkout/cart/account cards. */
.hero-image,
.philosophy,
.contact-band,
.dermhaus-cart__summary,
.dermhaus-cart-overlay,
.woocommerce-checkout #customer_details,
.woocommerce-checkout .dermhaus-review,
.woocommerce-checkout #payment,
.dh-thankyou__overview,
.dh-order,
.dh-orders__empty,
.dh-address-card,
.dh-account__card,
.dh-account-greeting + * { position: relative; }
.hero-image::after,
.philosophy::after,
.contact-band::after,
.dermhaus-cart__summary::after,
.woocommerce-checkout #customer_details::after,
.woocommerce-checkout .dermhaus-review::after,
.woocommerce-checkout #payment::after,
.dh-thankyou__overview::after,
.dh-order::after,
.dh-orders__empty::after,
.dh-address-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--dh-grain);
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: multiply;
  border-radius: inherit;
  z-index: 0;
}
/* Make sure direct content sits ABOVE the grain layer */
.dermhaus-cart__summary > *,
.woocommerce-checkout #customer_details > *,
.woocommerce-checkout .dermhaus-review > *,
.woocommerce-checkout #payment > *,
.dh-thankyou__overview > *,
.dh-order > *,
.dh-orders__empty > *,
.dh-address-card > * { position: relative; z-index: 1; }
html { scroll-padding-top: var(--top-nav-h); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Match footer bg so mobile-Safari overscroll/rubber-band area below the
     body shows the same color as the footer, not a contrasting strip. */
  background: var(--bone-soft);
}
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  background: var(--bone);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Reserve space for the fixed announcement bar + top nav so the body never
     sits underneath them. Page-level padding then adds breathing room on top. */
  padding-top: calc(var(--dh-announce-h) + var(--top-nav-h));
  /* Sticky footer: flex column so .site-footer can be pushed to the bottom
     of the viewport when page content is short. Eliminates the empty beige
     strip below the footer on pages with little content. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-footer { margin-top: auto; }
::selection { background: var(--ink); color: var(--bone); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ============ TYPOGRAPHY ============ */
.brand-derm {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0;
}
.brand-haus {
  font-family: 'arcadian', serif;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.18em;
  font-size: 0.88em;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.15;
}

/* ============ TOP NAV ============ */
/* Announcement bar — sleek slim strip pinned above the nav. */
.dh-announce {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  height: var(--dh-announce-h);
  background: var(--ink);
  color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.dh-announce__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0 1rem;
}
/* Each message stacks in the same spot; only the .is-active one shows. The
   others fade out below the active one with a 4px lift, so the transition
   feels like a soft editorial cross-fade rather than a hard swap. */
.dh-announce__item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 4px));
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.dh-announce__item.is-active {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
@media (max-width: 540px) {
  .dh-announce { font-size: 0.66rem; }
}

.top-nav {
  position: fixed; top: var(--dh-announce-h); left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  /* Align the logo + actions with the page-content's 1500px max-width so on
     a wide monitor the nav contents sit within the same margin as the rest
     of the site, instead of hugging the viewport edges. */
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: calc(max(0px, (100vw - 1500px)) / 2 + 8rem);
  padding-right: calc(max(0px, (100vw - 1500px)) / 2 + 8rem);
  background: rgba(245,241,234,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top-nav-logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.top-nav-logo__img {
  height: 30px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}
.top-nav-links { display: flex; gap: 2.5rem; align-items: center; }
/* Mobile-only search trigger inside the burger dropdown. Hidden on desktop. */
.top-nav-links__search-trigger { display: none; }
/* Inline search form lives inside the burger dropdown on mobile; hidden on
   desktop because the dedicated nav-bar search button covers it there. */
.top-nav-links__search { display: none; }
/* Burger utility row (My account + Wishlist buttons) is mobile-only — on
   desktop the matching icons live in the nav-bar actions instead. */
.top-nav-links__utilities { display: none; }
.top-nav-links a {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.3s ease;
  position: relative;
  padding-bottom: 0.3rem;
}
.top-nav-links a::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: var(--ink);
  transition: all 0.4s ease;
  transform: translateX(-50%);
}
.top-nav-links a:hover,
.top-nav-links a.current-menu-item,
.top-nav-links a.current_page_item { color: var(--ink); }
.top-nav-links a:hover::after,
.top-nav-links a.current-menu-item::after { width: 100%; }

/* Cart icon — sits at the far right of the top nav */
.top-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Burger button — hidden on desktop; shown below the breakpoint where the
   nav-links no longer fit on one row (see media query further down). */
.top-nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}
.top-nav-burger:hover { color: var(--ink); }
.top-nav-burger__icon { display: block; overflow: visible; }
.top-nav-burger__top, .top-nav-burger__middle, .top-nav-burger__bottom {
  /* transform-box: fill-box makes transform-origin relative to each path's
     own bounding box. Without it, SVG defaults to view-box, and the rotation
     pivot ends up off-center for each line — pushing the X off the viewBox
     on the left side. */
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.top-nav.is-nav-open .top-nav-burger__top    { transform: translateY(6px) rotate(45deg); }
.top-nav.is-nav-open .top-nav-burger__middle { opacity: 0; }
.top-nav.is-nav-open .top-nav-burger__bottom { transform: translateY(-6px) rotate(-45deg); }
.top-nav-account {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  color: var(--ink-soft);
  transition: color 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}
.top-nav-account:hover {
  color: var(--ink);
  transform: translateY(-1px);
}
.top-nav-account .account-icon {
  width: 22px; height: 22px;
  display: block;
}
.top-nav-account.is-logged-in { color: var(--ink); }
.top-nav-account.is-logged-in::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
}
/* .top-nav-search styles live below near the .dh-search panel rules. */
.top-nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  color: var(--ink-soft);
  transition: color 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}

/* =====================================================================
   Search overlay — slides down beneath the top nav
   ===================================================================== */
.dh-search-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  background: transparent;
}
.dh-search-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
}
/* Nuclear hide — beats every other rule, child included. */
.dh-search-overlay.dh-hidden,
.dh-search-overlay.dh-hidden .dh-search-overlay__panel,
.dh-search-overlay.dh-hidden .dh-search-suggest {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.dh-search-overlay__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  padding: 0 6rem;
  height: calc(var(--top-nav-h) + 1.25rem);
  display: flex;
  align-items: center;
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 12px 28px -18px rgba(42, 37, 32, 0.35);
}
.dh-search-overlay.is-open .dh-search-overlay__panel {
  transform: translateY(0);
}
.dh-search-form {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.dh-search-form__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.dh-search-form__icon {
  display: inline-flex;
  color: var(--ink);
  flex-shrink: 0;
}
/* ID-scoped so it beats the global body:not(...) input[type="search"]
   rule (which has higher specificity than a plain class). */
input#dh-search-input,
input#dh-search-input.dh-search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ink) !important;
  padding: 0.75rem 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  color: var(--ink) !important;
  outline: none !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
input#dh-search-input::placeholder {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  color: var(--ink-soft) !important;
  opacity: 0.6;
}

/* Live suggestions panel sits under the search field */
.dh-search-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 32px -20px rgba(42, 37, 32, 0.35);
  max-height: min(60vh, 480px);
  overflow-y: auto;
  display: none;
}
.dh-search-overlay.has-suggestions .dh-search-suggest { display: block; }
.dh-search-suggest__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 6rem 0.5rem;
}
.dh-search-suggest__head {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 0.5rem 0.35rem;
  margin: 0;
}
.dh-search-suggest__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dh-search-suggest__item a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--btn-radius);
  transition: background 0.15s ease;
}
.dh-search-suggest__item a:hover,
.dh-search-suggest__item.is-active a {
  background: var(--bone-soft);
}
.dh-search-suggest__thumb {
  width: 44px;
  height: 44px;
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  overflow: hidden;
}
.dh-search-suggest__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.25rem;
  box-sizing: border-box;
  display: block;
}
.dh-search-suggest__info {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.dh-search-suggest__brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dh-search-suggest__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-search-suggest__more {
  display: block;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.85rem 0 0.25rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--line);
}
.dh-search-suggest__more:hover { color: var(--ink); }
.dh-search-suggest__empty {
  padding: 1.25rem 0.75rem 0.9rem;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.dh-search-suggest__loading {
  padding: 1.25rem 0.75rem 1rem;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .dh-search-suggest__inner { padding: 0.5rem 1.5rem 1rem; }
}
.dh-search-form__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  pointer-events: auto;
  transition: color 0.2s ease;
}
.dh-search-form__close svg { pointer-events: none; }
.dh-search-form__close:hover { color: var(--ink); }

/* dh-search-locked deliberately removed — search no longer locks body scroll. */

@media (max-width: 900px) {
  .dh-search-overlay__panel {
    padding: 0 1.5rem;
    height: calc(var(--top-nav-h) + 1rem);
  }
  .dh-search-form { gap: 0.75rem; }
}
.top-nav-cart:hover {
  color: var(--ink);
  transform: translateY(-1px);
}
.top-nav-cart .cart-icon {
  width: 22px; height: 22px;
  display: block;
}
.top-nav-cart .cart-count {
  position: absolute;
  top: -2px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.top-nav-cart .cart-count.is-empty {
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}

/* ---- Top-nav wishlist heart (mirrors cart styling) ---- */
.top-nav-wishlist {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  color: var(--ink-soft);
  transition: color 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}
.top-nav-wishlist:hover {
  color: var(--ink);
  transform: translateY(-1px);
}
.top-nav-wishlist .wishlist-icon {
  width: 22px; height: 22px;
  display: block;
}
.top-nav-wishlist .wishlist-count {
  position: absolute;
  top: -2px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.top-nav-wishlist .wishlist-count.is-empty {
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}

/* ---- Top-nav search trigger ---- */
.top-nav-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}
.top-nav-search:hover {
  color: var(--ink);
  transform: translateY(-1px);
}
.top-nav-search .search-icon {
  width: 22px; height: 22px;
  display: block;
}

/* ---- Search overlay (slide-down panel below the nav) ---- */
.dh-search {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}
.dh-search__scrim {
  position: absolute;
  inset: 0;
  background: rgba(42, 37, 32, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}
.dh-search__panel {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 22px 44px -24px rgba(42, 37, 32, 0.3);
  padding: 1.1rem 2rem 1rem;
  transform: translateY(-16px);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
  pointer-events: none;
}
.dh-search.is-open { pointer-events: auto; }
.dh-search.is-open .dh-search__scrim {
  background: rgba(42, 37, 32, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.dh-search.is-open .dh-search__panel {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.dh-search__form {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0.55rem 1rem;
  background: var(--bone-soft);
  border-radius: 5px;
  transition: background 0.2s ease, box-shadow 0.25s ease;
}
.dh-search__form:focus-within {
  background: #efe9df;
  box-shadow: 0 0 0 1px rgba(42, 37, 32, 0.08);
}
.dh-search__icon {
  display: inline-flex;
  color: var(--ink-soft);
  margin-right: 0.75rem;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.dh-search__form:focus-within .dh-search__icon { color: var(--ink); }
/* ID-scoped so it beats the global body:not(.woocommerce-*) input[type="search"]
   rule, which carries higher specificity than a plain class chain. */
input#dh-nav-search-input,
input#dh-nav-search-input.dh-search__input {
  flex: 1 1 auto !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  width: 100% !important;
  min-width: 0;
  box-shadow: none !important;
  border-radius: 0 !important;
}
input#dh-nav-search-input::placeholder {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--ink-soft) !important;
  opacity: 0.65 !important;
  letter-spacing: 0.02em !important;
}
/* Burger search input — ID-scoped so it beats the same global
   body:not(.woocommerce-*) input[type="search"] rule. */
input#dh-burger-search-input,
input#dh-burger-search-input[type="search"] {
  flex: 1 1 auto !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  width: 100% !important;
  min-width: 0;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
}
input#dh-burger-search-input::placeholder {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--ink-soft) !important;
  opacity: 0.65 !important;
  letter-spacing: 0.02em !important;
}
.dh-search__input::-webkit-search-cancel-button { display: none; }
.dh-search__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  margin-left: 0.5rem;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}
.dh-search__close:hover {
  color: var(--ink);
  background: rgba(42, 37, 32, 0.06);
}
.dh-search__results {
  max-width: 720px;
  margin: 0.6rem auto 0;
  max-height: 60vh;
  overflow-y: auto;
}
.dh-search__results:not(.has-results):empty { display: none; }
.dh-search__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dh-search__item { margin: 0; }
.dh-search__link {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 0.95rem;
  padding: 0.6rem 0.5rem;
  border-radius: var(--btn-radius);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}
.dh-search__link:hover { background: var(--bone-soft); }
.dh-search__thumb {
  width: 56px;
  height: 56px;
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dh-search__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
}
.dh-search__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.dh-search__brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dh-search__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-search__price {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.dh-search__price .amount { color: var(--ink-soft); }
.dh-search__empty {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
  text-align: center;
}
.dh-search__see-all {
  display: block;
  margin-top: 0.75rem;
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--line);
}
.dh-search__see-all:hover { color: var(--ink-soft); }
@media (max-width: 600px) {
  .dh-search__panel { padding: 0.85rem 1.1rem 0.85rem; }
  .dh-search__input { font-size: 0.95rem !important; }
}

/* ============ POLICY PAGES ============ */
/* Shared by /returns, /privacy, /terms. Editorial layout: display heading,
   intro line, three call-out cards, then sectioned policy text with hairline
   dividers. Tokens (--bone, --ink, --line, etc.) come from :root above. */
.page-content.dh-policy {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 4rem 2rem;
  text-align: center;
}
.dh-policy__header {
  margin: 0 auto 2.5rem;
  max-width: 760px;
}
/* Title matches the contact page's "Begin a Conversation" heading exactly. */
.dh-policy__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.dh-policy__intro {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(0.9rem, 1.05vw, 0.98rem);
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 560px;
}

/* Call-out cards row — DermHaus product-card aesthetic: bone-soft tile with
   hairline border, refined hover (border darkens + soft lift), thin Montserrat
   eyebrow, Cormorant italic value. */
.dh-policy__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 auto;
  max-width: 880px;
  text-align: center;
}
.dh-policy__card {
  background: var(--bone-soft);
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  padding: 1.4rem 1.25rem 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
}
.dh-policy__card:hover {
  border-color: var(--ink-soft);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(42, 37, 32, 0.22);
}
.dh-policy__card-rule { display: none; }
.dh-policy__card-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}
.dh-policy__card-value {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--ink);
  display: block;
  max-width: 18ch;
}
.dh-policy__cards-foot {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
  margin: 1.25rem 0 0;
}

/* Detail sections */
.dh-policy__sections {
  margin-top: 4rem;
}
.dh-policy__section {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}
.dh-policy__section:first-child {
  border-top: 0;
  padding-top: 0;
}
.dh-policy__h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  color: var(--ink);
  margin: 0 0 1rem;
  letter-spacing: 0;
  line-height: 1.2;
}
.dh-policy__section p {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 0.9rem;
  max-width: 70ch;
}
.dh-policy__section p:last-child { margin-bottom: 0; }
.dh-policy__section a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  transition: text-decoration-color 0.2s ease;
}
.dh-policy__section a:hover { text-decoration-color: var(--ink); }
.dh-policy__section strong { font-weight: 600; color: var(--ink); }
.dh-policy__section em { font-style: italic; color: var(--ink-soft); }
.dh-policy__list {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
  max-width: 70ch;
}
.dh-policy__list li {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink);
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.4rem;
}
.dh-policy__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-soft);
}

/* Tight clearance under nav, matches the contact-page pattern. We hit each
   policy slug's body class so we don't override the .page-content default
   site-wide. */
body.page-id-3767 .page-content,
body.page-id-3 .page-content,
body.page-id-3765 .page-content {
  padding-top: 2rem;
  padding-bottom: 0;
  animation: none;
}

/* Re-align section text (cards-foot, sections, h2s, lists) back to left after
   the wrapper sets text-align: center for the header. */
.dh-policy__sections,
.dh-policy__section { text-align: left; }

/* Mobile: stack cards, shrink hero spacing */
@media (max-width: 720px) {
  .page-content.dh-policy { padding: 0 1.5rem 2rem; }
  /* Lift the title closer to the nav on mobile — the desktop clearance
     (top-nav-h minus 1rem) leaves an empty gap on small screens. The body
     already pads for the fixed nav, so we only need a small breathing gap. */
  body.page-id-3767 .page-content,
  body.page-id-3 .page-content,
  body.page-id-3765 .page-content {
    padding-top: 3.5rem !important;
  }
  body.page-id-3767 .dh-policy__header,
  body.page-id-3 .dh-policy__header,
  body.page-id-3765 .dh-policy__header {
    margin-top: 0;
    margin-bottom: 1.25rem;
  }
  .dh-policy__header { margin: 0 auto 2rem; }
  .dh-policy__cards { grid-template-columns: 1fr; gap: 0.85rem; }
  .dh-policy__card { min-height: 0; padding: 1.85rem 1.25rem 1.75rem; }
  .dh-policy__sections { margin-top: 2.5rem; }
  .dh-policy__section { padding: 1.5rem 0; }
}

/* ============ PAGE LAYOUT ============ */
/* Body already reserves --top-nav-h of space above. These values are pure
   aesthetic breathing room between the nav and the first content element. */
.page-content {
  padding-top: 2rem;
  animation: fadeIn 0.5s ease;
  /* min-width: 0 because body is a flex column container — flex items
     default to min-width: auto, which means they refuse to shrink below
     their min-content width. Without this, long unbreakable text inside
     .page-content makes the whole container wider than the viewport and
     the text never wraps. */
  min-width: 0;
  max-width: 100%;
}
.site-footer { min-width: 0; max-width: 100%; }
.page-content--wide {
  padding-top: 0;
}
.page-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 8rem 5rem;
}
@media (max-width: 768px) {
  .page-inner { padding: 0 1.5rem 3rem; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hero-image {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 25%, rgba(245,241,234,0.55) 65%, var(--bone) 95%);
  pointer-events: none;
}
.hero-content {
  padding: 2rem 8rem 3rem 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
}
.hero-center {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: 3rem 0;
}
.logo-lockup {
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.logo {
  margin: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.logo__img {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
}
.logo .brand-derm {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: 0;
}
.logo .brand-haus {
  font-family: 'arcadian', serif;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.1em;
  font-size: 0.88em;
}
.logo-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 1.25rem;
}
.hero-tagline {
  margin-top: 4rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--ink);
  max-width: 30rem;
  line-height: 1.65;
}
.hero-cta-group {
  margin-top: 2.5rem;
  display: flex; flex-direction: column;
  gap: 1rem; align-items: flex-start;
}
.top-bar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.68rem; letter-spacing: 0; text-transform: uppercase;
  color: var(--mute);
}
.top-bar .rule { flex: 1; height: 1px; background: var(--line); margin: 0 1.5rem; }
.hero-foot {
  display: flex; justify-content: flex-end; align-items: center;
  font-size: 0.68rem; letter-spacing: 0; text-transform: uppercase;
  color: var(--mute);
}
.hero-foot .rule { flex: 1; height: 1px; background: var(--line); margin: 0 1.5rem 0 0; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: all 0.4s ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bone); }

/* Home-page hero: remove the gap between the fixed nav and the image,
   and make both hero CTAs equal width. */
body.home { padding-top: 0; }
body.home .hero { min-height: 100vh; }
/* Clearance must include BOTH the announcement banner and the nav, since the
   home page opts out of body padding and the hero handles its own clearance. */
body.home .hero-image,
body.home .hero-content { padding-top: calc(var(--dh-announce-h) + var(--top-nav-h)); }
body.home .hero-content { padding-top: calc(var(--dh-announce-h) + var(--top-nav-h) + 2.5rem); }
body.home .hero-cta-group .btn { min-width: 220px; text-align: center; }

/* ============ SECTIONS ============ */
.section-header {
  text-align: center;
  margin: 0 auto 1.5rem;
  max-width: 1400px;
  padding: 0 8rem;
}
/* Shop page variant: tighter top spacing so the title sits close under the
   nav, and the desc reads as a quiet Montserrat tagline rather than the
   editorial Cormorant used on contact / brands / promotions pages. */
.section-header--shop {
  margin: 0.25rem auto 1.5rem;
}
.section-header--shop .section-desc,
body.page-template-page-contact .contact-page .section-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.55;
}
/* Compact variant for the search results page. 2rem top breathing room
   so the eyebrow doesn't sit flush against the nav. */
.section-header--compact {
  margin: 2rem auto 0.5rem;
}
.section-header--compact .section-title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}
.section-header--compact .section-eyebrow {
  margin-bottom: 0.5rem;
}
.section-header--compact .section-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  margin-bottom: 0;
}
/* Drop the page-content top padding on search results so the eyebrow sits
   tight against the nav, matching the brand and chapter banner pages. */
body.search-results .page-content { padding-top: 0; }
.section-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 1.25rem;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 1.25rem;
  line-height: 1.15;
}
.section-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--ink);
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  min-width: 0;
}
/* Force every descendant inside the description (links, strong, etc) to
   respect the container width and break long words. Brand descriptions are
   user-entered HTML and can include long URLs or unbreakable tokens. */
.section-desc *,
.section-desc p,
.section-desc a,
.section-desc strong,
.section-desc em,
.section-desc span {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.section-desc img,
.section-desc iframe,
.section-desc table {
  max-width: 100%;
  height: auto;
}
.section-header {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere;
}
/* Aggressive catch-all: every descendant of section-header must wrap and
   respect parent width. White-space: normal forces wrap even if the source
   HTML has nowrap or pre, and !important defeats any cascade quirks. */
.section-header *,
.section-header p,
.section-header span,
.section-header a,
.section-header pre,
.section-header code {
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.section-header img,
.section-header iframe {
  max-width: 100% !important;
  height: auto !important;
}

/* ============ PHILOSOPHY ============ */
.philosophy {
  position: relative;
  padding: 9rem 8rem;
  text-align: center;
  overflow: hidden;
  background-color: var(--bone-soft);
  background-image: url('assets/img/family-practice-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Soft warm overlay so the editorial text stays legible over the photograph */
.philosophy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(245, 240, 232, 0.72) 0%,
    rgba(245, 240, 232, 0.82) 50%,
    rgba(245, 240, 232, 0.72) 100%);
  pointer-events: none;
}
.philosophy-inner { position: relative; max-width: 46rem; margin: 0 auto; z-index: 1; }
.philosophy-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--ink);
  letter-spacing: 0;
  margin-bottom: 2.5rem;
  line-height: 1.15;
}
.philosophy-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 2rem;
}
.philosophy-attr {
  margin-top: 2.5rem;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--mute);
}

/* ============ CHAPTERS ============ */
/* Linen-drape background. A soft bone overlay sits between the image
   and the text so eyebrow/title/desc stay legible at every viewport. */
.chapters-section {
  padding: 3rem 8rem 3rem;
  text-align: center;
  position: relative;
  background-image:
    linear-gradient(rgba(245, 241, 234, 0.82), rgba(245, 241, 234, 0.82)),
    url('assets/img/chapters-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.chapters-grid {
  margin: 5rem auto 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  max-width: 1500px;
}
.chapter-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
  display: block;
  transition: transform 0.5s ease;
  min-width: 0;
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
}
.chapter-card:hover { transform: translateY(-2px); }

/* Chapter cards: enhanced reveal animation. Each card fades up with a
   subtle scale, staggered so the row cascades into view rather than
   appearing all at once. Hover lift still works because the reveal
   transition only animates opacity and transform on entry. */
.chapters-grid .chapter-card.dh-reveal {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.27, 1),
              transform 0.7s cubic-bezier(0.16, 0.84, 0.27, 1);
}
.chapters-grid .chapter-card.dh-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.chapters-grid .chapter-card.dh-reveal:nth-child(1) { transition-delay: 0.05s; }
.chapters-grid .chapter-card.dh-reveal:nth-child(2) { transition-delay: 0.16s; }
.chapters-grid .chapter-card.dh-reveal:nth-child(3) { transition-delay: 0.27s; }
.chapters-grid .chapter-card.dh-reveal:nth-child(4) { transition-delay: 0.38s; }
.chapters-grid .chapter-card.dh-reveal:nth-child(5) { transition-delay: 0.49s; }
.chapters-grid .chapter-card.dh-reveal:nth-child(6) { transition-delay: 0.60s; }
@media (prefers-reduced-motion: reduce) {
  .chapters-grid .chapter-card.dh-reveal {
    opacity: 1; transform: none; transition: none;
  }
}
.chapter-card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.8s ease;
}
.chapter-card:hover .chapter-card-bg { transform: scale(1.05); }
.chapter-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,37,32,0.2) 0%, rgba(42,37,32,0.85) 100%);
  pointer-events: none;
}
.chapter-card-content {
  position: absolute; inset: 0; z-index: 2;
  padding: 2rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Bone (warm off-white) reads softer on the photography than pure white,
     and a single tight dark shadow keeps the type crisp against varied
     backgrounds without the hazy halo the previous white-on-white glow
     was creating. */
  color: var(--bone);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.chapter-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 1;
  margin-bottom: 0.75rem;
}.chapter-title{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  /* The global h1-h4 rule forces var(--ink); reassert the bone so the
     title reads against the dark photography overlay. */
  color: var(--bone);
}
.chapter-arrow {
  font-size: 1.4rem; margin-top: 1rem;
  opacity: 0.8; transition: transform 0.4s ease;
}
.chapter-card:hover .chapter-arrow { transform: translateX(8px); }

/* ============ BRANDS PAGE ============ */
/* Lift the brands page up — the global .section-header margin of 5rem
   leaves too much air between nav and "Our Brands". Scope to this page
   only so other pages keep their breathing room. */
body.page-template-page-brands .page-content { padding-top: 2rem; }
/* About page — let the bone-soft philosophy section sit flush against the
   nav. The body's padding-top reserves a touch more than the rendered nav
   height, so a small negative margin closes the residual gap. */
body.page-template-page-about .page-content { padding-top: 0; }
body.page-template-page-about .philosophy { margin-top: -1rem; }
body.page-template-page-brands .section-header { margin: 0 auto 1.5rem; }
body.page-template-page-brands .section-desc { max-width: none; }

.brand-tiles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  padding: 0 8rem 5rem;
  max-width: 1500px;
  margin: 0 auto;
}
.brand-tile {
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform 0.5s ease;
  min-width: 0;
}
.brand-tile:hover { transform: translateY(-3px); }
.brand-tile-inner {
  aspect-ratio: 1 / 1;
  background: var(--bone-soft);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
  border-radius: var(--btn-radius);
}
.brand-tile:hover .brand-tile-inner {
  border-color: var(--ink);
  box-shadow: 0 18px 40px rgba(42,37,32,0.08);
}
.brand-tile-logo {
  max-width: 80%; max-height: 80%;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
/* SkinCeuticals wordmark renders smaller intrinsically than the other
   brands. `max-width: 95%` alone doesn't help because the image is
   already inside that cap — it just stays at its natural size. Force
   width to 95% so it grows to fill the tile; `object-fit: contain`
   on the base rule keeps the aspect ratio. */
.brand-tile--skinceuticals .brand-tile-logo {
  width: 95%;
  max-width: 95%;
  height: auto;
  max-height: 95%;
}
.brand-tile--skinceuticals:hover .brand-tile-logo { transform: scale(1.04); }
.brand-tile:hover .brand-tile-logo { transform: scale(1.02); }.brand-tile-wordmark{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: 0;
  color: var(--ink);
  text-align: center;
}
.brand-tile-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.brand-tile-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.brand-tile-count {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.9rem; color: var(--mute);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============ CONTACT ============ */
.contact-band {
  padding: 8rem 8rem;
  background-color: var(--bone-soft);
  background-image:
    linear-gradient(180deg,
      rgba(245, 240, 232, 0.78) 0%,
      rgba(245, 240, 232, 0.86) 50%,
      rgba(245, 240, 232, 0.78) 100%),
    url('assets/img/family-practice-bg.jpg');
  background-size: cover, cover;
  background-position: center, bottom;
  background-repeat: no-repeat, no-repeat;
  text-align: center;
  position: relative;
}
.contact-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ink);
  letter-spacing: 0;
  margin-bottom: 1.5rem;
}
.contact-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--ink);
  line-height: 1.65;
  max-width: 32rem;
  margin: 0 auto 2.5rem;
}
.contact-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 4rem 2rem;
  text-align: center;
}
/* Match the brands-page pattern: clear the fixed nav via .page-content
   top padding, not via the inner card. Tight clearance — just enough
   for the heading to clear the nav. */
body.page-template-page-contact .page-content {
  padding-top: 2rem;
  padding-bottom: 0;
  animation: none;
}
.contact-card {
  margin-top: 4rem;
  padding: 4rem 3rem;
  background: var(--bone-soft);
  border: 1px solid var(--line);
}

/* Side-by-side CTA buttons (WhatsApp + Email) */
.contact-card__actions {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 2.5rem auto 0;
}
.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 240px;
  padding: 1rem 1.5rem;
  background: var(--bone);
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  text-align: left;
}
.contact-cta:hover {
  background: var(--ink);
  color: var(--bone);
  transform: translateY(-1px);
}
.contact-cta__icon { flex: 0 0 auto; }
.contact-cta__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.contact-cta__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
  margin-bottom: 0.2rem;
}
.contact-cta__detail {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  color: inherit;
}
.contact-cta--whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.contact-cta--whatsapp:hover { background: #128c7e; border-color: #128c7e; color: #fff; transform: translateY(-1px); }
.contact-cta--whatsapp .contact-cta__label { opacity: 0.85; }
@media (max-width: 540px) {
  .contact-card__actions { flex-direction: column; align-items: stretch; }
  .contact-cta { min-width: 0; width: 100%; }
}

/* ---- Channel cards (split WhatsApp + Email) ---- */
.contact-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 4rem;
}
.contact-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.75rem 2rem 2.5rem;
  background: var(--bone-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.contact-channel:hover {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.contact-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--line);
  margin-bottom: 1.5rem;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.contact-channel:hover .contact-channel__icon {
  background: var(--bone);
  border-color: var(--bone);
}
.contact-channel--whatsapp:hover .contact-channel__icon { color: #25d366; }
.contact-channel--email:hover .contact-channel__icon { color: var(--ink); }
.contact-channel__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}
.contact-channel__detail {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 1rem;
  word-break: break-word;
}
.contact-channel__note {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 22rem;
}
.contact-channel:hover .contact-channel__note { color: var(--bone-soft); }

/* ---- Collection address block ---- */
.contact-collection {
  margin-top: 4rem;
  padding: 2.5rem 2rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.contact-collection .section-eyebrow { margin-bottom: 1.25rem; }
.contact-collection__address {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 0.75rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact-collection__address:hover,
.contact-collection__address:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.contact-collection__note {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .contact-channels { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; }
  .contact-channel { padding: 2.25rem 1.5rem; }
  .contact-collection { margin-top: 2.5rem; padding: 2rem 1rem; }
}

/* ============ WOOCOMMERCE PRODUCTS ============ */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4rem 2.5rem;
  padding: 0 8rem 1.5rem;
  max-width: 1500px;
  margin: 0 auto;
  list-style: none;
}
/* WC ships a clearfix on ul.products via ::before and ::after pseudo-elements
   (content: " "; display: table). In a CSS-Grid container these become grid
   items and claim two cells — the ::before takes cell (1,1), pushing the
   first product into cell (1,2). Suppress both. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product {
  text-align: left;
  background: transparent;
  border: none;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
  /* Reset legacy WC float helpers (.first/.last) and force auto-placement
     so the first product can never end up offset into a phantom cell. */
  clear: none !important;
  grid-column-start: auto !important;
  grid-row-start: auto !important;
  grid-column-end: auto !important;
  grid-row-end: auto !important;
}
/* WC's woocommerce-layout.css ships `.products li.first { clear: both }`
   — neutralise it. `clear` is a no-op in grid layout but belt-and-braces. */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last { clear: none !important; }

/* Responsive — 3/2/1 columns as viewport shrinks */
@media (max-width: 1200px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; }
}
@media (max-width: 880px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 1.5rem 3rem; gap: 2.5rem 1.5rem; }
}
@media (max-width: 520px) {
  /* Keep 2 products per row on phones (was 1 column). */
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; padding: 0 1rem 3rem; }
}
/* Product card image envelope. The container (not the img) holds the
   aspect ratio + padding so every product photo lives inside the same
   visual envelope regardless of its native dimensions. Inner anchor is a
   flex centering box; img is capped so even tall/narrow bottles never
   bleed into the padding ring. */
.woocommerce ul.products li.product .dermhaus-product-media {
  position: relative;
  background: var(--bone-soft);
  overflow: hidden;
  border-radius: var(--btn-radius);
  aspect-ratio: 1 / 1;
  width: 100%;
}
.woocommerce ul.products li.product .dermhaus-product-media__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 5% 4%;
  box-sizing: border-box;
  line-height: 0;
}
/* Esthederm photography is cropped tight to the bottle, so the same tight
   padding ring makes their products dwarf the rest of the grid. Keep their
   tile padding closer to the previous (larger) value. */
.woocommerce ul.products li.product.brand-esthederm .dermhaus-product-media__link,
.woocommerce ul.products li.product.brand-institut-esthederm .dermhaus-product-media__link {
  padding: 11% 10%;
}
/* Bioderma + Vichy photography sits a touch larger in-frame than the rest,
   nudge their tile padding up slightly so they don't visually outweigh
   neighbouring brands in the grid. */
.woocommerce ul.products li.product.brand-bioderma .dermhaus-product-media__link,
.woocommerce ul.products li.product.brand-vichy .dermhaus-product-media__link {
  padding: 8% 7%;
}
.woocommerce ul.products li.product .dermhaus-product-media img {
  background: transparent;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.8s cubic-bezier(0.2,0.8,0.2,1);
}
.woocommerce ul.products li.product:hover .dermhaus-product-media img {
  transform: scale(1.02);
}

/* Info block — brand · title · price below the image, single anchor */
.woocommerce ul.products li.product .dermhaus-product-info {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-top: 1.25rem;
}
.woocommerce ul.products li.product .dermhaus-product-brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  margin: 0 0 0.4rem 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.woocommerce ul.products li.product .price {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  display: block;
  letter-spacing: 0;
}
/* Sale price: strip the browser's default <ins> underline + bold so the
   sale amount matches the regular price weight. <del> keeps its strike. */
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .amount,
.woocommerce ul.products li.product .price ins bdi {
  text-decoration: none !important;
  background: transparent !important;
  font-weight: inherit !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount {
  color: var(--mute);
  opacity: 0.6;
  margin-right: 0.4rem;
  font-weight: 400;
}

/* Sleek add-to-cart overlay — circular button, bottom-right of image.
   Sized to match the wishlist icon at top-right (36×36) for a balanced
   pair of corner controls. */
.woocommerce ul.products li.product .dermhaus-product-media > .button.add_to_cart_button,
.woocommerce ul.products li.product .dermhaus-product-media > a.button {
  position: absolute !important;
  bottom: 0.85rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background-color: var(--ink) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M7 1v12M1 7h12' stroke='%23f5f1ea' stroke-width='1.3' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(42, 37, 32, 0.5);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease, scale 0.2s ease;
  z-index: 2;
}
.woocommerce ul.products li.product:hover .dermhaus-product-media > .button.add_to_cart_button,
.woocommerce ul.products li.product:focus-within .dermhaus-product-media > .button.add_to_cart_button {
  opacity: 1;
  transform: translateY(0);
}
.woocommerce ul.products li.product .dermhaus-product-media > .button.add_to_cart_button:hover {
  scale: 1.08;
  background-color: #1a1612 !important;
}
/* Loading state — soft pulse while WC AJAX is in flight */
.woocommerce ul.products li.product .dermhaus-product-media > .button.loading {
  opacity: 0.85 !important;
  animation: dh-pulse 1s ease-in-out infinite;
}
@keyframes dh-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
/* Added state — swap + for ✓ */
.woocommerce ul.products li.product .dermhaus-product-media > .button.added {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M3 8l3.5 3.5L13 5' stroke='%23f5f1ea' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
/* Hide the "View cart" link WC injects after a successful loop add.
   Applies everywhere it could appear (shop archives, related products
   on the single product page, brand pages, etc.) — the mini-cart
   drawer pops on add and already exposes a "View cart" button. */
.added_to_cart,
.added_to_cart.wc-forward {
  display: none !important;
}
/* Always-visible button on touch devices (no hover) */
@media (hover: none) {
  .woocommerce ul.products li.product .dermhaus-product-media > .button.add_to_cart_button {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Shopping-bag icon variant (overrides plus-sign background) ---- */
/* Higher-specificity override of the older background-image rule. */
.woocommerce ul.products li.product .dermhaus-product-media > .dh-loop-cart.button.add_to_cart_button,
.woocommerce ul.products li.product .dermhaus-product-media > a.dh-loop-cart.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-image: none !important;
  color: var(--bone) !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  overflow: visible !important;
}
.dh-loop-cart__icon {
  width: 16px;
  height: 16px;
  display: block;
  color: var(--bone);
}
.dh-loop-cart__icon path { stroke: var(--bone) !important; }
.woocommerce ul.products li.product .dermhaus-product-media > .dh-loop-cart.added .dh-loop-cart__icon {
  display: none;
}
.woocommerce ul.products li.product .dermhaus-product-media > .dh-loop-cart.added::before {
  content: '';
  width: 16px; height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8l3.5 3.5L13 5' stroke='%23f5f1ea' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* ---- Wishlist heart button (top-right of media) ---- */
.dh-wishlist-btn {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(42, 37, 32, 0.08);
  border-radius: 999px;
  background: rgba(245, 241, 234, 0.78);
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 3;
  transition: color 0.25s ease, background 0.25s ease, transform 0.18s ease;
}
.dh-wishlist-btn:hover {
  color: var(--ink);
  background: var(--bone);
  transform: scale(1.06);
}
.dh-wishlist-btn.is-active { color: var(--ink); }
.dh-wishlist-btn.is-active .dh-wishlist-btn__icon path {
  fill: currentColor;
  stroke: currentColor;
}
.dh-wishlist-btn.is-loading { opacity: 0.55; pointer-events: none; }
.dh-wishlist-btn.is-pulse { animation: dh-heart-pulse 0.4s ease; }
@keyframes dh-heart-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.dh-wishlist-btn__icon { width: 20px; height: 20px; display: block; }

/* ---- Sale badge — theme-palette, overlaps the media corner ----
   Rendered as a direct child of <li.product> so it's outside the media's
   overflow:hidden context. The <li> already has position implicit via
   grid; we add explicit position:relative for the badge anchor. */
.woocommerce ul.products li.product {
  position: relative;
  /* Force a stacking context on the card so .onsale's z-index always wins
     against anything inside .dermhaus-product-media (image, hover lift,
     view-transitions). The badge can never "start behind" the grid. */
  isolation: isolate;
}
.woocommerce ul.products li.product .onsale {
  position: absolute !important;
  top: -8px !important;
  left: -8px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 50;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1 !important;
  padding: 0.45rem 0.75rem !important;
  background: var(--ink) !important;
  color: var(--bone) !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 18px -8px rgba(42, 37, 32, 0.45);
}

/* ---- Card outline (always on) + hover lift on the IMAGE BLOCK ---- */
.woocommerce ul.products li.product .dermhaus-product-media {
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
}
.woocommerce ul.products li.product:hover .dermhaus-product-media,
.woocommerce ul.products li.product:focus-within .dermhaus-product-media {
  border-color: var(--ink-soft);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(42, 37, 32, 0.18);
}

/* ---- Checkout disabled modal (WhatsApp redirect) ---- */
.dh-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.dh-checkout-modal.is-open { opacity: 1; pointer-events: auto; }
.dh-checkout-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(42, 37, 32, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.dh-checkout-modal__panel {
  position: relative;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 6px;
  max-width: 460px;
  width: calc(100% - 2.5rem);
  margin: 8vh auto 0;
  padding: 2.5rem 2.25rem;
  text-align: center;
  box-shadow: 0 30px 60px -20px rgba(42, 37, 32, 0.35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dh-checkout-modal.is-open .dh-checkout-modal__panel {
  opacity: 1;
  transform: translateY(0);
}
.dh-checkout-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}
.dh-checkout-modal__close:hover { background: var(--bone-soft); color: var(--ink); }
.dh-checkout-modal__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}
.dh-checkout-modal__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 1rem;
}
.dh-checkout-modal__body {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.75rem;
}
.dh-checkout-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: #25d366;
  color: #fff;
  padding: 0.95rem 1.6rem;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, transform 0.2s ease;
}
.dh-checkout-modal__cta:hover { background: #128c7e; transform: translateY(-1px); color: #fff; }
.dh-checkout-modal__foot {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 1rem 0 0;
}
@media (max-width: 540px) {
  .dh-checkout-modal__panel { padding: 2rem 1.5rem; margin-top: 5vh; }
  .dh-checkout-modal__title { font-size: 1.5rem; }
}

/* ---- Wishlist toast (guest sign-in prompt) ---- */
.dh-wishlist-toast {
  position: fixed;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--ink);
  color: var(--bone);
  padding: 0.8rem 1.4rem;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 16px 36px -12px rgba(42, 37, 32, 0.4);
}
.dh-wishlist-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.dh-wishlist-toast a {
  color: var(--bone);
  text-decoration: underline;
  font-weight: 700;
}
/* The leading "Sign in" link sits inline at the start of the toast —
   no left margin needed (it isn't appended after the message). */
.dh-wishlist-toast a.dh-wishlist-toast__signin {
  margin-left: 0;
  text-underline-offset: 2px;
}

/* ---- /wishlist/ page ---- */
.dh-wishlist-empty {
  text-align: center;
  padding: 4rem 1.5rem 6rem;
}
.dh-wishlist-empty p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

/* Single product */
.woocommerce div.product .product_title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: normal;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.65;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

/* ---- Product tags: single full-width row ---- */
.dh-product-tags {
  background: none;
  padding: 0;
  margin: 0 0 1rem;
}
.dh-product-tags__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;          /* single row, no wrapping */
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}
.dh-tag {
  flex: 1 1 0;                /* equal share of available width */
  min-width: 0;               /* allow shrinking below content size */
  max-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}
.dh-tag__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 46px;
  min-width: 26px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--bone);
}
.dh-tag__icon svg {
  width: 58%;
  height: 58%;
  display: block;
}
.dh-tag__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  word-break: break-word;
  hyphens: auto;
}
@media (max-width: 540px) {
  .dh-product-tags { padding: 0.65rem 0.6rem; }
  .dh-product-tags__list { gap: 0.35rem; }
  .dh-tag__icon { max-width: 38px; min-width: 22px; }
  .dh-tag__label { font-size: 0.6rem; }
}
.woocommerce div.product .price {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.4rem !important;
}

/* Category archive headers */
.woocommerce .woocommerce-products-header {
  text-align: center;
  margin: 5rem auto 3rem;
  max-width: 1400px;
  padding: 0 8rem;
}.woocommerce .woocommerce-products-header__title{
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
}
.woocommerce .term-description {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 36rem;
  margin: 1rem auto 0;
  line-height: 1.65;
}

/* Forms — site-wide underline-only input style. Excludes checkout, account,
   and any cart UI which provide their own box-style inputs. */
body:not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-cart) input[type="text"],
body:not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-cart) input[type="email"],
body:not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-cart) input[type="tel"],
body:not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-cart) input[type="password"],
body:not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-cart) input[type="search"],
body:not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-cart) textarea,
body:not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-cart) select {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 0.75rem 0 !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  font-size: 1.05rem !important;
  color: var(--ink) !important;
  width: 100%;
}
body:not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-cart) input:focus,
body:not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-cart) textarea:focus,
body:not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-cart) select:focus {
  border-bottom-color: var(--ink) !important;
  outline: none;
  box-shadow: none !important;
}
body:not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-cart) form label {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700;
  font-size: 0.6rem !important;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--mute) !important;
}

/* ============ BRAND MARQUEE (home page) ============
   Continuous left-scrolling strip of brand logos. The track holds two
   identical rows of items; we translate -50% over the loop duration so
   the second row replaces the first seamlessly. JS-free, GPU-accelerated. */
.brand-marquee {
  position: relative;
  overflow: hidden;
  background: var(--bone);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2.5rem 0;
}
.brand-marquee__track {
  display: flex;
  width: max-content;
  animation: dh-brand-marquee 45s linear infinite;
}
.brand-marquee__row {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  padding-right: 4.5rem;
  list-style: none;
  margin: 0;
  flex-shrink: 0;
}
.brand-marquee__item { margin: 0; }
.brand-marquee__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  min-width: 120px;
  color: var(--ink);
  text-decoration: none;
}
.brand-marquee__logo {
  max-width: 160px;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.brand-marquee__wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  white-space: nowrap;
  color: var(--ink);
}
@keyframes dh-brand-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.brand-marquee:hover .brand-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .brand-marquee__track { animation: none; transform: none; }
  .brand-marquee__row:nth-child(2) { display: none; }
}
@media (max-width: 768px) {
  .brand-marquee { padding: 1.75rem 0; }
  .brand-marquee__row { gap: 2.75rem; padding-right: 2.75rem; }
  .brand-marquee__link { height: 44px; min-width: 90px; }
  .brand-marquee__logo { max-width: 110px; max-height: 40px; }
  .brand-marquee__wordmark { font-size: 1.2rem; }
  .brand-marquee__track { animation-duration: 35s; }
}

/* ============ FOOTER ============ */
.site-footer {
  /* margin-top: auto lives in the base body sticky-footer rule above so the
     footer pushes to the bottom of short pages. Keep it auto here too. */
  margin-top: auto;
  padding: 2.75rem 8rem 1.25rem;
  background: var(--bone-soft);
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ink);
}
.footer-logo__img {
  height: 32px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  margin: 0 auto;
}
.footer-sub {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.6rem;
}
.footer-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0.9rem 0 0.75rem;
}
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0.25rem;
}
.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s ease, background 0.25s ease, transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.85;
}
.footer-social__link:hover {
  opacity: 1;
  background: rgba(42, 37, 32, 0.06);
  transform: translateY(-1px);
}
.footer-social__link svg { display: block; }

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 1rem 0 0;
}
.footer-links a {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--ink); }
.footer-copyright {
  font-size: 0.6rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  /* Top nav: collapse links into a burger-toggled stacked menu so labels
     never wrap onto a second row. Breakpoint set to where the nav links
     would otherwise start overlapping the right-side action icons. */
  /* Mobile nav is shorter than desktop (smaller padding + logo). Resize the
     --top-nav-h CSS variable here so every rule that uses it (body padding,
     scroll-padding, fixed offsets, etc.) tracks the actual nav height and
     doesn't reserve phantom whitespace below the bar. */
  :root { --top-nav-h: 3.9rem; }

  .top-nav {
    padding: 1rem 1.5rem;
    flex-wrap: nowrap;
    gap: 0.75rem;
    /* Allow the dropdown to anchor below the bar without breaking the layout. */
    position: fixed;
  }
  .top-nav-burger { display: inline-flex; }

  .top-nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Solid-enough bone fill so menu items read clearly; the body::before
       scrim handles the page blur behind the dropdown. */
    background: rgba(245, 241, 234, 0.97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
    /* Closed: zero-height (max-height transitions for animation). */
    max-height: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    transition: max-height 0.32s ease, padding 0.32s ease;
  }
  .top-nav.is-nav-open .top-nav-links {
    max-height: calc(100dvh - var(--top-nav-h));
    padding: 1rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
  .top-nav-links a {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
  }
  .top-nav-links a:last-child { border-bottom: 0; }
  /* The last menu link sits directly above the Account/Wishlist utility row.
     Drop its bottom border so there's no divider between the menu list and
     the buttons. */
  .top-nav-links > a:last-of-type { border-bottom: 0; }
  .top-nav-links a::after { display: none; }

  /* Show the search trigger as the first item in the burger dropdown. */
  .top-nav-links__search-trigger {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.85rem 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: left;
    cursor: pointer;
  }
  .top-nav-links__search-trigger:hover { color: var(--ink); }

  /* Inline search bar as the first row of the burger dropdown. Matches the
     desktop overlay's .dh-search__form exactly. */
  .top-nav-links__search {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.55rem 1rem;
    margin: 0 0 0.5rem;
    background: var(--bone-soft);
    border-radius: 5px;
    transition: background 0.2s ease, box-shadow 0.25s ease;
  }
  .top-nav-links__search:focus-within {
    background: #efe9df;
    box-shadow: 0 0 0 1px rgba(42, 37, 32, 0.08);
  }
  .top-nav-links__search-icon {
    color: var(--ink-soft);
    margin-right: 0.75rem;
    flex-shrink: 0;
    transition: color 0.2s ease;
  }
  .top-nav-links__search:focus-within .top-nav-links__search-icon { color: var(--ink); }
  /* High-specificity ID-less but body-scoped: matches the global
     body:not(.woocommerce-*) input[type="search"] rule specificity so
     Montserrat actually applies inside the burger. */
  input.top-nav-links__search-input,
  input.top-nav-links__search-input[type="search"] {
    flex: 1 1 auto !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    outline: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-style: normal !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    width: 100% !important;
    min-width: 0;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: auto !important;
  }
  .top-nav-links__search-input::placeholder {
    font-family: 'Montserrat', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: var(--ink-soft) !important;
    opacity: 0.65 !important;
    letter-spacing: 0.02em !important;
  }
  .top-nav-links__search-input::-webkit-search-cancel-button { display: none; }

  /* Close button at the right of the burger search bar — mirrors the
     desktop overlay's .dh-search__close. Hidden by default; only appears
     when the search is active so the bar stays clean otherwise. */
  .top-nav-links__search-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    margin-left: 0.4rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: 999px;
    flex-shrink: 0;
    transition: color 0.2s ease, background 0.2s ease;
  }
  .top-nav-links__search-close:hover {
    color: var(--ink);
    background: rgba(42, 37, 32, 0.06);
  }
  .top-nav-links.is-search-active .top-nav-links__search-close {
    display: inline-flex;
  }

  /* When the burger search is active (input focused or has text), hide and
     blur out the rest of the burger contents — menu items, utility row — so
     the user only sees the search bar + live suggestions. Escape or tapping
     outside the form restores the menu. */
  .top-nav-links.is-search-active > a,
  .top-nav-links.is-search-active > .top-nav-links__utilities {
    opacity: 0;
    filter: blur(4px);
    pointer-events: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, filter 0.2s ease, max-height 0.25s ease, padding 0.25s ease;
  }

  /* Live AJAX suggestions panel that appears below the burger search bar.
     One row per product — small square thumb, name inline next to it,
     tight padding so more products fit on screen. */
  .top-nav-links__search-results {
    background: transparent;
    border-radius: 5px;
    margin: 0 0 0.5rem;
    max-height: 55vh;
    overflow-y: auto;
  }
  .top-nav-links__search-results:not(.has-results):empty { display: none; }
  .top-nav-links__search-results .dh-search__list {
    gap: 0 !important;
  }
  .top-nav-links__search-results .dh-search__link {
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.35rem 0.5rem !important;
    border-radius: 4px !important;
    border-bottom: 0 !important;
  }
  .top-nav-links__search-results .dh-search__thumb {
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
  }
  .top-nav-links__search-results .dh-search__thumb img { padding: 2px !important; }
  .top-nav-links__search-results .dh-search__link,
  .top-nav-links__search-results .dh-search__name,
  .top-nav-links__search-results .dh-search__meta {
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  .top-nav-links__search-results .dh-search__name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--ink) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* When the search is active and showing suggestions, ease off the
     dropdown blur so the suggestion thumbnails + names read cleanly. */
  .top-nav-links.is-search-active {
    background: rgba(245, 241, 234, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  /* Hide the account + wishlist icons on mobile (they appear inside the
     burger dropdown). Search and cart stay in the nav bar as primary
     calls to action. */
  .top-nav-account,
  .top-nav-wishlist { display: none !important; }

  /* Hide the search bar inside the burger dropdown — search now lives
     in the nav bar as a dedicated icon. */
  .top-nav-links__search,
  .top-nav-links__search-results { display: none !important; }

  /* Blur the rest of the page when the burger nav is open — identical
     treatment to the desktop search overlay scrim: dark tint + 8px blur. */
  body.dh-burger-open::before {
    content: '';
    position: fixed;
    top: var(--top-nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(42, 37, 32, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 80;
    pointer-events: none;
    animation: dh-burger-fade-in 0.25s ease;
  }
  @keyframes dh-burger-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* Keep the nav (and its open dropdown) above the scrim. */
  .top-nav { z-index: 100; }

  /* Utility row at the foot of the burger dropdown — Account + Wishlist.
     Outline button treatment matching the rest of the site's .btn-outline
     pattern: transparent fill, 1px ink border, hover inverts to solid. */
  .top-nav-links__utilities {
    display: flex;
    gap: 0.75rem;
    margin: 0.6rem 0 0;
    padding: 0;
    border-top: 0;
  }
  .top-nav-links a.top-nav-links__util,
  .top-nav-links__utilities .top-nav-links__util {
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 0.85rem;
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: var(--btn-radius);
    color: var(--ink);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  }
  .top-nav-links a.top-nav-links__util:hover,
  .top-nav-links a.top-nav-links__util:focus,
  .top-nav-links a.top-nav-links__util:active {
    background: var(--ink);
    color: var(--bone);
  }
  .top-nav-links a.top-nav-links__util:hover .top-nav-links__util-icon,
  .top-nav-links a.top-nav-links__util:focus .top-nav-links__util-icon,
  .top-nav-links a.top-nav-links__util:active .top-nav-links__util-icon {
    color: var(--bone);
    stroke: var(--bone);
  }
  .top-nav-links__util-icon {
    width: 14px; height: 14px;
    flex-shrink: 0;
    color: inherit;
    stroke: currentColor;
    transition: color 0.4s ease, stroke 0.4s ease;
  }
  .top-nav-links__util-label { line-height: 1.1; }
  .top-nav-links__util-count {
    color: var(--mute);
    font-weight: 600;
    margin-left: 0.2rem;
    letter-spacing: 0;
    text-transform: none;
  }
  .top-nav-links__util:hover .top-nav-links__util-count { color: var(--bone); }

  .hero { grid-template-columns: 1fr; }
  .hero-image { min-height: 40vh; }
  .hero-image::after { background: linear-gradient(180deg, transparent 60%, var(--bone) 100%); }
  /* Home hero stacked: the image now extends all the way to the top of
     the viewport. The nav icons (burger, search, cart) float over it
     until the user scrolls past the hero logo, at which point the
     opaque nav bar fades in (see home-page nav reveal rules below). */
  body.home .hero-image {
    padding-top: 0;
    margin-top: 0;
  }
  body.home .hero-content { padding-top: 1.75rem; }
}
@media (max-width: 768px) {
  /* Reduce the global top padding under the nav on mobile. The body
     already pads for the fixed nav, so 2.5rem on every page just becomes
     wasted whitespace on small screens. Desktop is unchanged. */
  /* Global breathing room between the fixed nav and the first piece of
     content on every page (incl. products and the policy pages). */
  .page-content { padding-top: 3.5rem; }
  /* Page-specific top-padding overrides defined elsewhere in the stylesheet
     also need mobile sizing — otherwise they win against the rule above due
     to higher specificity (body class scoped). */
  body.search-results .page-content,
  body.page-template-page-contact .page-content,
  body.page-id-3881 .page-content--after-banner {
    padding-top: 3.5rem !important;
  }
  /* Brands page sits closer to the nav by design — the banner has a
     negative top margin and looks correct flush. Keep its tighter
     spacing instead of widening it with the global rule above. */
  body.page-template-page-brands .page-content {
    padding-top: 2rem !important;
  }
  body.page-template-page-about .page-content {
    padding-top: 0 !important;
  }
  .hero-content { padding: 2rem 1.5rem; }
  .philosophy, .contact-band, .chapters-section { padding: 5rem 1.5rem; }
  /* ul.products responsive columns are now handled in the main grid block above */
  .brand-tiles-grid { padding: 2rem 1.5rem; }
  .section-header { padding: 0 1.5rem; }
  .site-footer { padding: 2.25rem 1.5rem 1rem; }
  .contact-page { padding: 0 1.5rem 3rem; }

  /* Mobile top nav: burger on the left, logo centered, account + cart on
     the right. Three-column grid keeps the logo centered regardless of
     icon widths on the flanks. Search moves into the burger dropdown.
     Drop the desktop 8rem inset padding — on mobile the burger and cart
     should sit flush with the page-content margin (1.5rem). */
  .top-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .top-nav-burger  { justify-self: start; }
  .top-nav-logo    { justify-self: center; }
  /* Tight gap on mobile so the search icon sits close to the cart on
     the right side of the nav rather than floating toward the centre. */
  .top-nav-actions { justify-self: end; gap: 0.15rem; }

  /* Home page only: the full nav bar block (background, blur, border,
     logo) is hidden until the hero logo has scrolled out of view —
     only the icons (burger, search, cart) float over the hero image.
     JS (dermhaus-flourishes.js) adds `.dh-hero-passed` to <body> when
     the hero's `.logo-lockup` leaves the viewport. Then the nav bar
     fades in with its background and centered logo.

     The icons stay visible the whole time and keep their normal click
     targets. The nav itself never disappears — we just make its
     background, blur, and border transparent so it looks like the
     icons are floating on the hero. */
  /* Home page: strip every possible decoration that could paint a
     line at the bottom of the nav bar. Border, shadow, outline,
     and even the announce bar (which is fully hidden with display:
     none while in the hero state to eliminate any paint artifact).
     `clip-path: inset(0 0 1px 0)` is the belt-and-braces — clips off
     a single px at the bottom of the nav box, which removes any
     hairline left by GPU compositing of backdrop-filter. */
  body.home .top-nav,
  body.home .top-nav::before,
  body.home .top-nav::after {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }
  /* clip-path hides the bottom hairline, but it also clips any child
     that extends below the nav box (the burger dropdown). Only apply
     it when the burger is closed; when burger opens we need the
     dropdown to overflow, and the nav is opaque anyway so the line
     isn't visible against the dropdown's matching background. */
  body.home:not(.dh-burger-open) .top-nav {
    clip-path: inset(0 0 0.5px 0);
  }
  body.home:not(.dh-hero-passed):not(.dh-burger-open) .top-nav {
    background-color: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Hide the announce bar entirely (display: none) while on the hero
     so it can never paint a bottom edge against the nav above it. The
     transition is dropped here intentionally — the bar reappears the
     moment `.dh-hero-passed` is set; a hard switch reads as cleaner
     than a fade in this position. */
  body.home:not(.dh-hero-passed):not(.dh-burger-open) .dh-announce {
    display: none !important;
  }
  body.home:not(.dh-hero-passed):not(.dh-burger-open) .top-nav {
    top: 0 !important;
  }

  /* Bolder icons while the nav is in the transparent / hero state so
     they read clearly against the varied photo background. Thicker
     SVG stroke, full ink colour (not the softer mute), and a faint
     bone glow behind each icon to lift it off darker stones. */
  body.home:not(.dh-hero-passed):not(.dh-burger-open) .top-nav-burger,
  body.home:not(.dh-hero-passed):not(.dh-burger-open) .top-nav-search,
  body.home:not(.dh-hero-passed):not(.dh-burger-open) .top-nav-cart {
    color: var(--ink) !important;
    filter: drop-shadow(0 1px 2px rgba(245, 241, 234, 0.55));
  }
  body.home:not(.dh-hero-passed):not(.dh-burger-open) .top-nav-burger svg path,
  body.home:not(.dh-hero-passed):not(.dh-burger-open) .top-nav-search svg path,
  body.home:not(.dh-hero-passed):not(.dh-burger-open) .top-nav-search svg circle,
  body.home:not(.dh-hero-passed):not(.dh-burger-open) .top-nav-cart svg path,
  body.home:not(.dh-hero-passed):not(.dh-burger-open) .top-nav-cart svg circle {
    stroke-width: 2 !important;
  }
  body.home:not(.dh-hero-passed):not(.dh-burger-open) .top-nav-logo {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }
  body.home .top-nav,
  body.home .top-nav-logo {
    /* `backdrop-filter` intentionally NOT in the transition list — iOS
       Safari leaves a sub-pixel hairline at the bar's bottom edge while
       it animates blur(12px) → none. The blur is dropped entirely on
       home (see rule below), so there's nothing to transition anyway. */
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  }
  /* Disable backdrop-filter entirely on the home nav. The hero sits
     directly behind the bar, so a solid (semi-transparent) bone fill
     reads cleanly without the blur, and we avoid the iOS Safari GPU
     artifact that animating the filter produces. */
  body.home .top-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Each icon button is 36px wide with a 24px SVG centred inside (6px gap
     each side), and the burger paths start at x=3 within the SVG viewBox.
     That puts the visible bars ~9px in from the button's left edge. Pull
     the burger left by that amount so its visible lines sit flush with
     the 1.5rem page-content margin. Mirror the same on the right cart
     icon so the page reads symmetrically. */
  .top-nav-burger  { margin-left: -9px; }
  .top-nav-actions { margin-right: -9px; }
}

/* Nav-bar logo size is locked at 30px globally (see .top-nav-logo__img).
   Earlier responsive overrides removed so a scrollbar appearing/disappearing
   between pages can't trip the breakpoint and cause inconsistent sizes. */

/* Responsive grid ladders for chapter and brand tiles */
@media (max-width: 1100px) {
  .chapters-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-tiles-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .brand-tiles-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .chapters-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .chapter-card-content { padding: 1rem; }
  .chapter-eyebrow { font-size: 0.55rem; margin-bottom: 0.4rem; }
  .chapter-title { font-size: 1.9rem; }
  .chapter-arrow { font-size: 1rem; margin-top: 0.5rem; }
  .brand-tiles-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 480px) {
  .chapters-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .chapter-card-content { padding: 0.7rem; }
  .chapter-eyebrow { font-size: 0.5rem; margin-bottom: 0.3rem; }
  .chapter-title { font-size: 1.4rem; }
  .chapter-arrow { font-size: 0.85rem; margin-top: 0.4rem; }
  .brand-tiles-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

  /* Narrow tiles can't fit name + count side-by-side — stack them. */
  .brand-tile-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    margin-top: 0.55rem;
    padding-top: 0.6rem;
  }
  .brand-tile-name  { font-size: 1.05rem; line-height: 1.2; }
  .brand-tile-count { font-size: 0.78rem; }
}

/* ============================================================
   WOOCOMMERCE CHECKOUT — DermHaus editorial styling
   Scoped to .woocommerce-checkout so it doesn't leak elsewhere
   ============================================================ */

body.woocommerce-checkout {
  background: var(--bone);
  /* Top padding clears the fixed nav. NO side/bottom padding — the footer
     spans edge-to-edge and sits flush at the bottom of the page. Inner
     horizontal padding lives on .woocommerce.
     Scoped to body.* so the rule doesn't also match WC's
     <form class="checkout woocommerce-checkout"> (which would inherit a
     min-height: 100vh that breaks the sticky-footer layout). */
  padding: calc(var(--dh-announce-h) + var(--top-nav-h) + 0.25rem) 0 0;
}
.woocommerce-checkout .woocommerce {
  padding: 0 2rem 4rem;
}

.woocommerce-checkout .woocommerce {
  max-width: 1320px;
  margin: 0 auto;
}/* Page heading — restrained Cormorant title with small eyebrow above (via
   the existing .section-eyebrow class injected from page.php if you want).
   Reads as a calm step header rather than a banner. */
.woocommerce-checkout .entry-title,
.woocommerce-checkout h1.page-title{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--ink);
  text-align: center;
  margin: 0 0 1.5rem;
  letter-spacing: 0;
  line-height: 1.1;
}
.woocommerce-checkout .entry-title + form,
.woocommerce-checkout h1.page-title + form { margin-top: 1.75rem; }

/* WooCommerce notices — softer, less alarming. Used for things like
   "Returning customer? Click here to log in" and coupon hints. */
.woocommerce-checkout .woocommerce-notices-wrapper {
  /* Match the width of the customer-details (Delivery Address) card. */
  margin: 0 0 1.5rem 0;
  width: 690px;
  max-width: 100%;
  box-sizing: border-box;
}
/* Collapse the notices wrapper to zero height when it has no content, so
   the cards beneath sit flush with the "Checkout" heading. The 1.5rem
   margin-bottom only kicks in once an error block is actually present. */
.woocommerce-checkout .woocommerce-notices-wrapper:empty {
  margin: 0 !important;
  padding: 0 !important;
  height: 0;
  display: none;
}
/* If WC also renders a notices wrapper at a higher DOM level (outside the
   1320px .woocommerce container), match its width to the form-area cap. */
body.woocommerce-checkout > .woocommerce-notices-wrapper {
  max-width: calc(1320px - 4rem);
  margin: 0 auto;
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
  display: block !important;
  background: var(--bone-soft) !important;
  border: none !important;
  padding: 1rem 1.25rem 1rem 3rem !important;
  border-radius: var(--btn-radius) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 0.88rem !important;
  color: var(--ink-soft) !important;
  margin: 0 0 0.75rem !important;
  line-height: 1.4 !important;
  list-style: none !important;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  animation: none;
}
/* Red ⓘ icon to the left of the message stack */
.woocommerce-checkout .woocommerce-error::before {
  content: '!';
  position: absolute;
  top: 1.05rem;
  left: 1rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2rem;
  text-align: center;
}
/* One missing field per row */
.woocommerce-checkout .woocommerce-error li {
  display: block;
  padding: 0.18rem 0;
  margin: 0;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.4;
}
/* Field name (wrapped by <strong> in WC's default message) renders teal-bold */
.woocommerce-checkout .woocommerce-error li strong {
  color: #4a9ea4;
  font-weight: 700;
}
/* Success / info notices keep the white card look, no icon */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
  padding-left: 1.5rem;
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before { content: none; }

/* Aggressively suppress per-field error text. The only thing rendered inside
   a form-row should be the label + the .woocommerce-input-wrapper. Any other
   text node (error messages, validation hints, etc.) is hidden. */
.woocommerce-checkout .form-row .woocommerce-error,
.woocommerce-checkout .form-row .woocommerce-info,
.woocommerce-checkout .form-row .woocommerce-message,
.woocommerce-checkout .form-row > .description,
.woocommerce-checkout .form-row .woocommerce-input-wrapper + .description,
.woocommerce-checkout .form-row .woocommerce-input-wrapper ~ .description,
.woocommerce-checkout .form-row.woocommerce-invalid .description,
.woocommerce-checkout .form-row.woocommerce-invalid-required-field .description,
.woocommerce-checkout .form-row .woocommerce-invalid-required-field-message,
.woocommerce-checkout .form-row .woocommerce-invalid-message,
.woocommerce-checkout .form-row .field-validation-error,
.woocommerce-checkout .form-row > small,
.woocommerce-checkout .form-row > p:not(.form-row),
.woocommerce-checkout .form-row > div:not(.woocommerce-input-wrapper):not(.select2-container):not(.dh-phone-group) {
  display: none !important;
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-checkout .woocommerce-info a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--mute);
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message a:hover,
.woocommerce-checkout .woocommerce-info a:hover {
  text-decoration-color: var(--ink);
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before { display: none; }

/* ============================================================
   Layout — CSS Grid: form on left, sticky order summary on right
   Wrapper <aside class="dermhaus-checkout-aside"> is injected via
   the woocommerce_checkout_before_order_review_heading hook in
   functions.php so heading + body sit inside one card.
   ============================================================ */

.woocommerce-checkout form.checkout.woocommerce-checkout {
  display: grid;
  /* Constrain col 1 to the customer-details card width so the right column
     can sit directly next to it without a wide empty strip in between. */
  grid-template-columns: minmax(0, 690px) minmax(440px, 540px);
  column-gap: 1rem;
  row-gap: 1.5rem;
  align-items: start;
  position: relative;
  margin-top: 0;
  padding-top: 0;
}

/* ---- Card style shared by every panel on the checkout ---- */
.dermhaus-checkout-card,
.woocommerce-checkout #customer_details,
.woocommerce-checkout form.checkout > .woocommerce-additional-fields,
.woocommerce-checkout .dermhaus-review,
.woocommerce-checkout #payment {
  background: var(--bone-soft);
  border: none;
  border-radius: var(--btn-radius);
  padding: 1.75rem 1rem;
  margin: 0;
}
/* Match the Your Order block's outer width to the Place Order button's
   width inside the Payment card. The button sits inside #payment's 1rem
   horizontal padding, so giving the Your Order card the same 1rem inset
   on each side aligns their visible edges exactly. */
.woocommerce-checkout .dermhaus-review {
  margin-left: 1rem;
  margin-right: 1rem;
}

/* Customer details fills the left column. Card slightly wider than the
   295×2 + gap grid track, with the extra width added on the right edge
   (grid anchored to the left) and the card itself pinned to the left of
   the form column so the input boxes never shift horizontally. */
.woocommerce-checkout form.checkout #customer_details {
  grid-column: 1;
  grid-row: 1;
  max-width: 690px;
  justify-self: start;
}
.woocommerce-checkout form.checkout > .woocommerce-additional-fields {
  max-width: 690px;
  justify-self: start;
}

/* Stack billing + shipping inside customer_details */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100%;
  max-width: 100%;
  float: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}
.woocommerce-checkout #customer_details .col-2:last-child { margin-bottom: 0; }

/* Order notes — own card below customer details on the left */
.woocommerce-checkout form.checkout > .woocommerce-additional-fields {
  grid-column: 1;
  grid-row: 2;
}

/* WC order-attribution custom element — hidden inputs only */
.woocommerce-checkout form.checkout > wc-order-attribution-inputs {
  display: contents;
}

/* Right column wrapper — transparent shell that just holds the two cards
   (Your Order + Payment) with a gap between them. Sticky on desktop. */
.woocommerce-checkout .dermhaus-checkout-aside {
  grid-column: 2;
  grid-row: 1 / span 2;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  position: sticky;
  top: calc(var(--top-nav-h) + 1rem);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Heading "Your Order" is now rendered inside the .dermhaus-review card via
   our review-order template — hide the standalone WC heading. */
/* Hide WC's own "Your Order" heading — our template renders it inside the
   .dermhaus-review card so the standalone WC heading would be a duplicate. */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .dermhaus-checkout-aside > h3 { display: none !important; }

/* Tighten #order_review wrapper — its children (.dermhaus-review and #payment)
   handle their own card styling. */
.woocommerce-checkout #order_review {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Nuke any default WooCommerce borders inside the order summary card.
   Some WC stylesheets add subtle borders to .woocommerce-checkout-review-order
   and the table itself which we don't want in this editorial layout. */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout .woocommerce-checkout-review-order-table * {
  border: none !important;
  box-shadow: none !important;
}

/* Order review body inside the aside — no background/padding, parent handles it */
.woocommerce-checkout #order_review {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  position: static;
}

/* Section headings inside the form ("Delivery Address", "Additional information")
   and inside the order review card. Larger serif so they read as the title
   of each card, matching the reference layout. */
.woocommerce-checkout form.checkout h3,
.woocommerce-checkout .dermhaus-review__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 1.5rem 0;
  padding: 0;
  border: none;
  background: transparent;
  line-height: 1.2;
}
/* "Delivery Address" heading inside the form: cap to the same width as the
   295×2+gap input grid and anchor it to the left, matching the left edge
   of the first input below. */
.woocommerce-checkout form.checkout h3 {
  max-width: calc(295px * 2 + 1.75rem);
  margin-left: 0;
  margin-right: auto;
  /* Cormorant Garamond serifs extend slightly left of the character box,
     making the heading look ~12-15px further left than the Montserrat
     label below. Shift right to optically align with the input edge. */
  padding-left: 12px;
  box-sizing: border-box;
}

/* ============================================================
   Form fields — grid-based row layout
   ============================================================ */

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  /* Fixed 295px columns, anchored to the left of the card content area
     so any extra card width shows up as space on the right. */
  grid-template-columns: repeat(2, 295px);
  column-gap: 1.75rem;
  row-gap: 0.2rem;
  justify-content: start;
  justify-content: center;
  /* Align the bottom edge of each row so paired fields with mismatched
     label visibility (e.g. Street Address vs. label-less Apartment)
     still have their input boxes on the same baseline. */
  align-items: end;
}

.woocommerce-checkout .form-row {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  float: none;
  clear: none;
}

/* Paired half-width fields (first/last name, etc.) sit in the grid as-is */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  width: 100%;
  float: none;
  margin: 0;
}

/* Full-width fields span both columns */
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout #order_comments_field {
  grid-column: 1 / -1;
}

/* Paired half-width fields lay into the 2-col grid by class. */
.woocommerce-checkout .form-row-first { grid-column: 1; }
.woocommerce-checkout .form-row-last  { grid-column: 2; }

/* Labels — bold, charcoal, red required asterisk per the reference layout */
.woocommerce-checkout .form-row label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.2rem;
  letter-spacing: 0;
  display: block;
  line-height: 1.2;
  text-transform: capitalize;
}
.woocommerce-checkout .form-row label .required,
.woocommerce-checkout .form-row label abbr {
  color: #c0392b;
  font-weight: 700;
  text-decoration: none;
  margin-left: 0.2rem;
  border: none;
}

/* The wrapper span around each input is inline by default — force it to fill
   the form-row so `width: 100%` on the input maps to the full grid column. */
.woocommerce-checkout .form-row .woocommerce-input-wrapper {
  display: block !important;
  width: 100% !important;
}

/* Inputs — rounded, Montserrat, lighter beige fill, dark beige outline.
   The !important flags neutralise any cascaded site-wide form styles. */
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  background: var(--bone) !important;
  border: 1.5px solid #b5a48a !important;
  border-radius: var(--btn-radius) !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  min-width: 300px;
  max-width: 100%;
  height: auto !important;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  line-height: 1.4;
  box-sizing: border-box !important;
}
.woocommerce-checkout .form-row .input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
  font-family: 'Montserrat', sans-serif;
  color: var(--ink-soft);
  opacity: 0.55;
}

/* Capitalise the first letter of each word typed into name/address fields.
   Email, phone, and the Order notes textarea are excluded (capitalising
   sentences in a notes field would feel wrong). */
.woocommerce-checkout .form-row .input-text:not([type="email"]):not([type="tel"]):not([type="password"]):not(textarea) {
  text-transform: capitalize;
}
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout #order_comments {
  text-transform: none !important;
}

/* Phone field: fixed "+27" prefix glued to the left of the input box. */
.woocommerce-checkout .dh-phone-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 300px;
}
.woocommerce-checkout .dh-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  background: var(--bone-soft);
  border: 1.5px solid #b5a48a;
  border-right: 0;
  border-radius: var(--btn-radius) 0 0 var(--btn-radius);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  user-select: none;
}
.woocommerce-checkout .dh-phone-group .input-text {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  flex: 1 1 auto;
  min-width: 0 !important;
}

/* Native state/province select — undo any Select2 leftover styling so the
   <select> uses the OS-native dropdown chrome, and force its height to
   match the rest of the input fields exactly. */
.woocommerce-checkout #billing_state,
.woocommerce-checkout #shipping_state,
.woocommerce-checkout select#billing_state,
.woocommerce-checkout select#shipping_state {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  -webkit-appearance: menulist;
  appearance: menulist;
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  background: var(--bone) !important;
  border: 1.5px solid #b5a48a !important;
  border-radius: var(--btn-radius) !important;
  padding: 0.75rem 1rem !important;
  line-height: 1.4 !important;
  height: 46.6px !important;
  box-sizing: border-box !important;
}
/* Hide any Select2 wrappers left behind after destroy() */
.woocommerce-checkout #billing_state + .select2-container,
.woocommerce-checkout #shipping_state + .select2-container {
  display: none !important;
}

.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  outline: none !important;
  border-color: var(--ink) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(42, 37, 32, 0.08) !important;
}
.woocommerce-checkout .form-row .input-text[readonly] {
  background: var(--bone-soft);
  color: var(--ink-soft);
  cursor: default;
}
.woocommerce-checkout .form-row textarea {
  min-height: 100px;
  resize: vertical;
}
/* Make select2's rendered control match height of native inputs */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: auto;
  display: flex;
  align-items: center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  color: var(--ink);
}
/* Select2 dropdown menu — match Montserrat for consistency */
.select2-dropdown,
.select2-results,
.select2-results__option {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.5rem;
}

/* Field hint (the WhatsApp note etc.) — Montserrat, smaller, muted */
.woocommerce-checkout .form-row .description,
.woocommerce-checkout span.description {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 0.4rem;
  display: block;
  line-height: 1.45;
  letter-spacing: 0;
}

/* ============================================================
   Order summary table (inside .dermhaus-checkout-aside)
   Editorial receipt look — no heavy borders, soft dividers only
   between line items + totals block. Stronger typographic hierarchy.
   ============================================================ */
.woocommerce-checkout .shop_table {
  border: none;
  background: transparent;
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-checkout .shop_table thead { display: none; }

.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
  border: none;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  color: var(--ink);
  vertical-align: top;
}

/* Line items (tbody rows) — tighter rhythm, more content per glance */
.woocommerce-checkout .shop_table tbody tr.cart_item td {
  padding: 0.45rem 0;
  border: none;
  font-size: 0.92rem;
}
.woocommerce-checkout .shop_table tbody tr.cart_item:first-child td { padding-top: 0; }
.woocommerce-checkout .shop_table tbody tr.cart_item:last-child td { padding-bottom: 0.85rem; }
.woocommerce-checkout .shop_table .product-name {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.3;
  padding-right: 0.75rem;
}
.woocommerce-checkout .shop_table .product-quantity {
  display: block;
  margin-top: 0.15rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.woocommerce-checkout .shop_table .product-total {
  text-align: right;
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}
.woocommerce-checkout .shop_table .product-total .amount { font-weight: 500; }

/* Totals block (tfoot) — tight rhythm, soft top spacing */
.woocommerce-checkout .shop_table tfoot { border: none; }
.woocommerce-checkout .shop_table tfoot tr:first-child th,
.woocommerce-checkout .shop_table tfoot tr:first-child td { padding-top: 0; }

.woocommerce-checkout .shop_table tfoot th,
.woocommerce-checkout .shop_table tfoot td {
  padding: 0.3rem 0;
  padding-left: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: var(--ink);
  font-weight: 700;
  border: none;
  letter-spacing: 0;
  text-transform: uppercase;
}
.woocommerce-checkout .shop_table tfoot td {
  text-align: right;
  color: var(--ink);
  letter-spacing: 0;
}
.woocommerce-checkout .shop_table tfoot td .amount,
.woocommerce-checkout .shop_table tfoot td bdi {
  letter-spacing: 0 !important;
}
.woocommerce-checkout .shop_table tfoot tr.order-total th,
.woocommerce-checkout .shop_table tfoot tr.order-total td {
  border: none;
  padding-top: 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: uppercase;
}
.woocommerce-checkout .shop_table tfoot tr.order-total td,
.woocommerce-checkout .shop_table tfoot tr.order-total .amount,
.woocommerce-checkout .shop_table tfoot tr.order-total bdi {
  letter-spacing: 0 !important;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ============================================================
   Order review items — visually echoes the slide-in mini-cart.
   Thumbnail (with qty badge) + brand eyebrow + product name + line price.
   ============================================================ */
.dermhaus-review__items {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.dermhaus-review__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.dermhaus-review__item:first-child { padding-top: 0; }
.dermhaus-review__item:last-child { border-bottom: 0; }
.dermhaus-review__thumb {
  position: relative;
  width: 72px;
  height: 72px;
  background: var(--bone);
  border-radius: 8px;
  /* overflow: visible so the qty badge can stick out */
}
.dermhaus-review__thumb img,
.dermhaus-review__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 0.4rem;
  box-sizing: border-box;
  border-radius: 8px;
}
.dermhaus-review__qty {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bone-soft);
  z-index: 2;
}
.dermhaus-review__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.dermhaus-review__brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dermhaus-review__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.dermhaus-review__price {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.dermhaus-review__price .amount,
.dermhaus-review__price bdi { font: inherit; color: inherit; }

/* Totals table inside the new review markup — keep the soft typography but
   tighten spacing now that items are above instead of inside the same table. */
.dermhaus-review__totals { margin-top: 0.5rem; }

/* Tighten the bottom of the order-review card — no extra empty space below
   the Total row. */
.woocommerce-checkout .dermhaus-review {
  padding-bottom: 1rem;
}
.woocommerce-checkout .dermhaus-review .shop_table tfoot tr.order-total th,
.woocommerce-checkout .dermhaus-review .shop_table tfoot tr.order-total td {
  padding-bottom: 0;
}

/* "(includes R0.00 VAT)" note under the order total — tiny, muted */
.woocommerce-checkout .shop_table tfoot tr.order-total .includes_tax,
.woocommerce-checkout .shop_table tfoot small.includes_tax,
.woocommerce-checkout .order-total small {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: 0.6rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink-soft) !important;
  margin-top: 0.2rem !important;
}
/* The R-amount embedded in "(includes Rxxx,xx VAT)" inherits the small's
   typography — match font, size, weight exactly so it doesn't pop out. */
.woocommerce-checkout .shop_table tfoot tr.order-total .includes_tax .amount,
.woocommerce-checkout .shop_table tfoot tr.order-total .includes_tax bdi,
.woocommerce-checkout .shop_table tfoot small.includes_tax .amount,
.woocommerce-checkout .shop_table tfoot small.includes_tax bdi,
.woocommerce-checkout .order-total small .amount,
.woocommerce-checkout .order-total small bdi {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: inherit !important;
}

/* Shipping method radio list */
/* Shipping methods list styling lives further down — scoped to
   .dermhaus-checkout-aside (line ~3461+). The earlier inline-display
   ruleset that lived here has been removed. */

/* Payment note (deferred-payment plugin styled callout) */
.dermhaus-payment-note {
  background: var(--bone);
  border-left: 2px solid var(--ink);
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
  border-radius: 10px;
}

/* Payment methods list */
.woocommerce-checkout #payment {
  background: transparent;
  border: none;
  padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 1rem;
  border-radius: 0;
  list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:last-child {
  border-bottom: 0;
  padding-bottom: 0.25rem;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:first-child { padding-top: 0; }
.woocommerce-checkout #payment ul.payment_methods li {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--bone-soft);
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* Place Order button */
.woocommerce-checkout #place_order,
.woocommerce-checkout button.button[name="woocommerce_checkout_place_order"] {
  display: block;
  width: 100%;
  padding: 1.1rem 2rem;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  margin-top: 1rem;
  height: auto;
  line-height: 1;
  box-shadow: 0 6px 16px -10px rgba(42, 37, 32, 0.4);
}
.woocommerce-checkout #place_order:hover {
  background: #1a1612;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -14px rgba(42, 37, 32, 0.6);
}

/* Terms checkbox */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin: 1.5rem 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Responsive — collapse to single column under 960px */
@media (max-width: 960px) {
  .woocommerce-checkout { padding: calc(var(--dh-announce-h) + var(--top-nav-h) + 0.25rem) 0 3rem; }
  .woocommerce-checkout .woocommerce { padding: 0 1.25rem 2rem; }
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 2rem;
  }
  .woocommerce-checkout form.checkout #customer_details,
  .woocommerce-checkout form.checkout > .woocommerce-additional-fields,
  .woocommerce-checkout .dermhaus-checkout-aside {
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
    width: 100%;
    justify-self: stretch;
  }
  .woocommerce-checkout .dermhaus-checkout-aside { position: static; }

  /* Cards: tighter, full-width within their container */
  .dermhaus-checkout-card,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout form.checkout > .woocommerce-additional-fields,
  .woocommerce-checkout .dermhaus-review,
  .woocommerce-checkout #payment {
    padding: 1.5rem 1.25rem;
  }
  .woocommerce-checkout .dermhaus-review {
    margin-left: 0;
    margin-right: 0;
  }

  .woocommerce-checkout .entry-title,
  .woocommerce-checkout h1.page-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  /* Notices: full width on mobile (was capped at 690px) */
  .woocommerce-checkout .woocommerce-notices-wrapper { width: 100%; }

  /* Form heading — drop the optical-alignment offset, fit the card width */
  .woocommerce-checkout form.checkout h3 {
    max-width: 100%;
    padding-left: 0;
  }

  /* Drop the 300px min-width on inputs so they fit narrow viewports */
  .woocommerce-checkout .form-row .input-text,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .form-row textarea,
  .woocommerce-checkout .select2-container--default .select2-selection--single {
    min-width: 0;
  }
  .woocommerce-checkout .dh-phone-group { min-width: 0; }

  /* Force every container in the chain to fill width, so inputs end up
     spanning the full card. WC's default styles can otherwise apply 47%
     widths or floats to .col-1 / .col-2 / .form-row-first/last. */
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2,
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
  .woocommerce-checkout .form-row,
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last,
  .woocommerce-checkout .form-row-wide {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
  }

  /* Single-column grid so the form-rows stack instead of sitting in 295px
     tracks centered on the card. */
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 0.6rem !important;
    justify-content: stretch !important;
  }
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last { grid-column: 1 !important; }

  /* Inputs / selects / textareas: fill the form-row */
  .woocommerce-checkout .form-row .input-text,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .form-row textarea,
  .woocommerce-checkout .select2-container--default .select2-selection--single {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .woocommerce-checkout .dh-phone-group {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Phone-specific tightening */
@media (max-width: 560px) {
  /* Tighter card padding for phones */
  .dermhaus-checkout-card,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout form.checkout > .woocommerce-additional-fields,
  .woocommerce-checkout .dermhaus-review,
  .woocommerce-checkout #payment {
    padding: 1.25rem 1rem;
  }

  .woocommerce-checkout .woocommerce { padding: 0 1rem 2rem; }

  /* Order summary line items: shrink the thumb so the price column has room */
  .dermhaus-review__item {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    padding: 0.85rem 0;
  }
  .dermhaus-review__thumb { width: 56px; height: 56px; }
  .dermhaus-review__name { font-size: 0.85rem; }
  .dermhaus-review__brand { font-size: 0.6rem; }
  .dermhaus-review__price { font-size: 0.85rem; }

  /* Place Order button — comfortable tap target on phones */
  .woocommerce-checkout #place_order,
  .woocommerce-checkout button.button[name="woocommerce_checkout_place_order"] {
    padding: 1.2rem 1rem;
    font-size: 0.8rem;
  }

  /* Tighter page heading on phones */
  .woocommerce-checkout .entry-title,
  .woocommerce-checkout h1.page-title {
    font-size: 1.7rem;
    margin-bottom: 1.25rem;
  }
}

/* ============================================================
   CART PAGE — DermHaus editorial layout
   Two columns: items on left, totals card on right.
   Each row is a CSS grid: [thumb | name | price | qty | subtotal | ×]
   ============================================================ */

body.woocommerce-cart {
  background: var(--bone);
  /* Top padding clears the fixed announce bar + nav with just a small
     breathing gap. No bottom padding — the footer should sit flush. */
  padding-top: calc(var(--dh-announce-h) + var(--top-nav-h) + 0.25rem);
  padding-bottom: 0;
}
/* Cart content keeps its own bottom margin so the cart doesn't touch the
   footer (the body padding used to do this, but it left a blank strip
   AFTER the footer). */
.woocommerce-cart .dermhaus-cart {
  margin-bottom: 4rem;
}
.woocommerce-cart .woocommerce {
  padding: 0 8rem;
}

.dermhaus-cart {
  display: flex;
  flex-direction: column;
  row-gap: 0.75rem;
}.dermhaus-cart__title{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--ink);
  margin: 0.5rem 0 1rem;
  letter-spacing: 0;
  text-align: center;
}
/* Tighter checkout-specific heading spacing — the form sits closer beneath. */
.dermhaus-checkout-title { margin-bottom: 1.5rem !important; }

.dermhaus-cart__form { width: 100%; }

/* Subtotal block beneath the items — full width, darker beige, rounded. */
.dermhaus-cart__summary {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 1.5rem 2.25rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 2rem;
  row-gap: 0.4rem;
  align-items: baseline;
}
.dermhaus-cart__summary-row {
  display: contents;
}
.dermhaus-cart__summary-label {
  grid-column: 1;
  grid-row: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dermhaus-cart__summary-amount {
  grid-column: 2;
  grid-row: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}
.dermhaus-cart__summary-amount .amount,
.dermhaus-cart__summary-amount bdi {
  font: inherit;
  color: inherit;
}
.dermhaus-cart__summary-note {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.dermhaus-cart__checkout-btn {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 1rem;
  justify-self: stretch;
  text-align: center;
}

/* ---------- Items list ---------- */

.dermhaus-cart__items {
  display: flex;
  flex-direction: column;
}

.dermhaus-cart__head,
.dermhaus-cart__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 110px 90px 28px;
  column-gap: 1.25rem;
  align-items: center;
}

.dermhaus-cart__head {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dermhaus-cart__head-price,
.dermhaus-cart__head-qty,
.dermhaus-cart__head-total { text-align: center; }

.dermhaus-cart__row {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.dermhaus-cart__row:last-child { border-bottom: none; }

.dermhaus-cart__cell { min-width: 0; }

/* Item cell (thumb + name) */
.dermhaus-cart__item {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
.dermhaus-cart__thumb {
  flex: 0 0 auto;
  width: 70px;
  height: 88px;
  background: var(--bone-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dermhaus-cart__thumb img,
.dermhaus-cart__thumb a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  padding: 0.5rem;
  display: block;
}
.dermhaus-cart__info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.dermhaus-cart__brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dermhaus-cart__name {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
}
.dermhaus-cart__name:hover { color: var(--ink-soft); }

/* Price + Subtotal cells */
.dermhaus-cart__price,
.dermhaus-cart__subtotal {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 400;
  white-space: nowrap;
}
.dermhaus-cart__subtotal { font-weight: 500; }
.dermhaus-cart__subtotal .amount { font-weight: 500; }
.dermhaus-cart__price del { color: var(--mute); opacity: 0.7; margin-right: 0.3rem; }
.dermhaus-cart__price ins { text-decoration: none; font-weight: inherit; }

/* Quantity stepper */
.dermhaus-cart__qty { text-align: center; }
.dermhaus-cart__qty .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: #fff;
}
.dermhaus-cart__qty .quantity input.qty {
  width: 56px;
  text-align: center;
  background: transparent !important;
  border: none !important;
  padding: 0.55rem 0 !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  -moz-appearance: textfield;
}
.dermhaus-cart__qty .quantity input.qty::-webkit-outer-spin-button,
.dermhaus-cart__qty .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove × button — red icon, red translucent circle on hover/active.
   Matches the mini-cart drawer's remove button exactly. */
.dermhaus-cart__remove { text-align: right; }
.dermhaus-cart__remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #c0392b;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  font-size: 0;
}
.dermhaus-cart__remove-btn svg { stroke: #c0392b; }
.dermhaus-cart__remove-btn:hover,
.dermhaus-cart__remove-btn:active {
  background-color: rgba(192, 57, 43, 0.12);
  transform: scale(1.05);
}

/* ---------- Actions row (coupon + update) ---------- */

.dermhaus-cart__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.dermhaus-cart__coupon {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--ink);
  background: #fff;
}
.dermhaus-cart__coupon-input {
  border: none !important;
  background: transparent !important;
  padding: 0.7rem 1rem !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  color: var(--ink);
  width: 200px;
}
.dermhaus-cart__coupon-input:focus { outline: none; }
.dermhaus-cart__coupon-btn,
.dermhaus-cart__update-btn {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.dermhaus-cart__coupon-btn {
  border: none;
  background: var(--ink);
  color: var(--bone);
  padding: 0.7rem 1.25rem;
}
.dermhaus-cart__coupon-btn:hover { background: #1a1612; }
.dermhaus-cart__update-btn:hover { background: var(--ink); color: var(--bone); }

/* With JS active, qty changes auto-submit — Update button is redundant */
body.dermhaus-cart-js-ready .dermhaus-cart__update-btn { display: none; }

/* Visual states for an AJAX-updating cart row */
.dermhaus-cart__row.is-updating { opacity: 0.55; transition: opacity 0.18s ease; }
.dermhaus-cart__row.is-updated  { animation: dh-cart-flash 0.6s ease; }
@keyframes dh-cart-flash {
  0%   { background: rgba(42, 37, 32, 0.04); }
  100% { background: transparent; }
}

/* Full-page dim overlay shown while a cart update is in flight */
.dermhaus-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(245, 241, 234, 0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.dermhaus-cart-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.dermhaus-spinner {
  width: 38px;
  height: 38px;
  display: inline-block;
  position: relative;
}
.dermhaus-spinner__ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(42, 37, 32, 0.18);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: dh-spin 0.9s linear infinite;
}
@keyframes dh-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Cart totals (right column collaterals) ---------- */

.dermhaus-cart__collaterals .cart_totals > h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 0 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
  letter-spacing: 0;
}
.dermhaus-cart__collaterals .shop_table {
  width: 100%;
  border: none;
  background: transparent;
  border-collapse: collapse;
}
.dermhaus-cart__collaterals .shop_table th,
.dermhaus-cart__collaterals .shop_table td {
  border: none !important;
  padding: 0.65rem 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-weight: 400;
  background: transparent;
  vertical-align: middle;
}
.dermhaus-cart__collaterals .shop_table th {
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  width: 50%;
}
.dermhaus-cart__collaterals .shop_table td {
  text-align: right;
  color: var(--ink);
  font-weight: 500;
}
.dermhaus-cart__collaterals .shop_table .order-total {
  border-top: 1px solid var(--line);
}
.dermhaus-cart__collaterals .shop_table .order-total th,
.dermhaus-cart__collaterals .shop_table .order-total td {
  padding-top: 1.1rem;
  padding-bottom: 0.4rem;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: 0;
}
.dermhaus-cart__collaterals .shop_table .order-total th { font-weight: 600; }
.dermhaus-cart__collaterals .shop_table .order-total td { font-weight: 600; font-size: 1.4rem; }
.dermhaus-cart__collaterals .shipping-calculator-form,
.dermhaus-cart__collaterals .shipping-calculator-button {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Hide shipping row entirely on the cart page — shipping selection is
   shown only on the checkout page now. */
.dermhaus-cart__collaterals .shop_table tr.shipping,
.dermhaus-cart__collaterals .shop_table tr.woocommerce-shipping-totals,
.dermhaus-cart__collaterals .shipping-calculator-form,
.dermhaus-cart__collaterals .shipping-calculator-button {
  display: none !important;
}

.dermhaus-cart__collaterals .dermhaus-cart__shipping-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin: 0.5rem 0 1.25rem;
  text-align: center;
}
.dermhaus-cart__collaterals .wc-proceed-to-checkout { margin-top: 1rem; }
/* Hard override of WC's default purple `.button.alt` */
.dermhaus-cart__collaterals .wc-proceed-to-checkout a.checkout-button,
.dermhaus-cart__collaterals .wc-proceed-to-checkout a.checkout-button.button.alt,
.woocommerce-cart a.checkout-button {
  background-color: var(--ink) !important;
  background-image: none !important;
  color: var(--bone) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  padding: 1.1rem 1.5rem !important;
  border-radius: var(--btn-radius) !important;
  border: none !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  cursor: pointer;
  transition: background 0.2s ease;
  box-shadow: none !important;
  text-shadow: none !important;
}
.dermhaus-cart__collaterals .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart a.checkout-button:hover {
  background-color: #1a1612 !important;
}

/* Cart notice "View cart" / "Continue shopping" — strip WC purple */
.woocommerce-cart .woocommerce-notices-wrapper .button,
.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-info .button {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  padding: 0.6rem 1.1rem !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.woocommerce-cart .woocommerce-notices-wrapper .button:hover {
  background-color: var(--ink) !important;
  color: var(--bone) !important;
}

/* ---------- Empty cart message ---------- */
.woocommerce-cart .cart-empty {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 4rem 0 2rem;
}
.woocommerce-cart .return-to-shop {
  text-align: center;
  margin: 0 0 4rem;
}
.woocommerce-cart .return-to-shop .button {
  background: var(--ink);
  color: var(--bone);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 0;
  border: none;
  display: inline-block;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .woocommerce-cart .woocommerce { padding: 0 2rem; }
  .dermhaus-cart__summary { padding: 1.5rem 1.75rem; }
}
@media (max-width: 720px) {
  .woocommerce-cart .woocommerce { padding: 0 1.25rem; }

  /* Header row on mobile: same 5-col grid as the rows below. Hide the
     Price and Remove header labels (unit price is hidden on mobile and
     the × needs no label). */
  .dermhaus-cart__head {
    grid-template-columns: 72px minmax(0, 1fr) auto auto 32px;
    column-gap: 0.75rem;
    padding-bottom: 0.6rem;
  }
  .dermhaus-cart__head-price,
  .dermhaus-cart__head-remove { display: none; }
  .dermhaus-cart__head-item   { grid-column: 1 / span 2; text-align: left; }
  .dermhaus-cart__head-qty    { text-align: center; }
  .dermhaus-cart__head-total  { text-align: right; margin-left: 1rem; }

  /* Mobile row layout: single row, 5 columns —
     thumb | info (wraps) | qty | subtotal | remove
     Unit price hidden; product name wraps so qty/subtotal sit beside it. */
  .dermhaus-cart__row {
    grid-template-columns: 72px minmax(0, 1fr) auto auto 32px;
    column-gap: 0.75rem;
    row-gap: 0;
    padding: 1rem 0;
    align-items: center;
  }
  .dermhaus-cart__item    { display: contents; }
  .dermhaus-cart__thumb   { width: 72px; height: 90px; align-self: start; }
  .dermhaus-cart__info    { min-width: 0; align-self: center; }
  .dermhaus-cart__name    { overflow-wrap: anywhere; word-break: break-word; }
  .dermhaus-cart__remove  { align-self: center; text-align: right; }
  .dermhaus-cart__price   { display: none; }
  .dermhaus-cart__qty     { text-align: center; align-self: center; }
  .dermhaus-cart__subtotal{ text-align: right;  align-self: center; font-weight: 600; margin-left: 1rem; }

  /* Per-row data-label::before is suppressed on mobile — the header row
     above the items now carries the column titles instead. */
  .dermhaus-cart__cell[data-label]::before { content: none; }

  /* Bigger tap target for the remove × */
  .dermhaus-cart__remove-btn { width: 44px; height: 44px; margin: 0; }

  /* Stack actions row (coupon + update) */
  .dermhaus-cart__actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .dermhaus-cart__coupon { width: 100%; }
  .dermhaus-cart__coupon-input { width: auto; flex: 1 1 0; min-width: 0; }
  .dermhaus-cart__update-btn { width: 100%; padding: 0.85rem 1rem; }

  /* Summary block: tighter padding */
  .dermhaus-cart__summary { padding: 1.25rem; column-gap: 1rem; }
  .dermhaus-cart__summary-label,
  .dermhaus-cart__summary-amount { font-size: 1rem; }
  .dermhaus-cart__title { font-size: 1.9rem; }
}
@media (max-width: 480px) {
  .woocommerce-cart .woocommerce { padding: 0 1rem; }
  .woocommerce-cart .dermhaus-cart { margin-bottom: 2.5rem; }

  /* Tighter version of the single-row layout for phones */
  .dermhaus-cart__row {
    grid-template-columns: 56px minmax(0, 1fr) auto auto 28px;
    column-gap: 0.5rem;
    padding: 0.85rem 0;
  }
  .dermhaus-cart__thumb    { width: 56px; height: 72px; }
  .dermhaus-cart__name     { font-size: 0.85rem; line-height: 1.25; }
  .dermhaus-cart__brand    { font-size: 0.58rem; }
  .dermhaus-cart__subtotal { font-size: 0.9rem; margin-left: 0.75rem; }
  .dermhaus-cart__qty .quantity input.qty { width: 40px; font-size: 0.82rem; padding: 0.5rem 0 !important; }

  /* Tighter head row + shrink for the smallest viewports */
  .dermhaus-cart__head {
    grid-template-columns: 56px minmax(0, 1fr) auto auto 28px;
    column-gap: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.62rem;
  }

  .dermhaus-cart__summary { padding: 1rem; }
  .dermhaus-cart__title   { font-size: 1.6rem; margin-bottom: 0.75rem; }
}

/* ============================================================
   PRODUCT FILTERS — toolbar (filter button + sort) + drawer
   ============================================================ */

/* Toolbar — sticky just under the top nav, full-width bar so the backdrop
   blur spans the viewport edge to edge. Inner wrapper aligns content with
   the product grid (max-width 1500px, 4rem side padding). */
.dermhaus-toolbar {
  position: sticky;
  top: var(--top-nav-h);
  z-index: 50;
  background: rgba(245, 241, 234, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  margin: 0 0 2.5rem;
}
.dermhaus-toolbar__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 1rem 8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (max-width: 768px) {
  .dermhaus-toolbar { top: 4rem; }
  .dermhaus-toolbar__inner { padding: 0.85rem 1.5rem; }
}

/* Filter trigger button */
.dermhaus-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  line-height: 1;
}
.dermhaus-filter-trigger:hover { background: var(--ink); color: var(--bone); }
.dermhaus-filter-trigger__icon { display: inline-flex; }
.dermhaus-filter-trigger__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bone);
  font-size: 0.7rem;
  letter-spacing: 0;
  margin-left: 0.25rem;
}
.dermhaus-filter-trigger:hover .dermhaus-filter-trigger__count {
  background: var(--bone);
  color: var(--ink);
}
.dermhaus-filter-trigger__count[hidden] { display: none; }

/* Sort: shares the .dermhaus-filter-trigger button look. The visible button
   shows "Sort by" (or "Sort by: <option>"). A native <select> overlays the
   button transparently so the OS handles the actual dropdown UI. */
.dermhaus-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.dermhaus-sort__label {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dermhaus-sort__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}
.dermhaus-sort-trigger { position: relative; z-index: 1; }
.dermhaus-sort select:focus { outline: none; }
/* Dropdown options — browsers usually fall back to system font; force
   Montserrat where supported (Chrome/Edge/Firefox honour option fonts). */
.dermhaus-sort select option {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--bone);
}

/* Loading state on the product loop */
[data-loop-wrap] { position: relative; min-height: 200px; }
ul.products.is-loading, .dermhaus-loop-target.is-loading { opacity: 0.45; transition: opacity 0.2s ease; pointer-events: none; }

/* ============================================================
   DRAWER (off-canvas filter panel, slides in from left)
   ============================================================ */

.dermhaus-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.dermhaus-drawer.is-open { visibility: visible; pointer-events: auto; }

.dermhaus-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(42, 37, 32, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dermhaus-drawer.is-open .dermhaus-drawer__scrim { opacity: 1; }

.dermhaus-drawer__panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--bone);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 24px 0 60px -30px rgba(42, 37, 32, 0.4);
}
.dermhaus-drawer.is-open .dermhaus-drawer__panel { transform: translateX(0); }

/* Drawer header */
.dermhaus-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2rem 1.25rem;
  border-bottom: 1px solid var(--line);
}.dermhaus-drawer__title{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.dermhaus-drawer__close {
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.dermhaus-drawer__close:hover { color: var(--mute); }

/* Drawer body (scrolling area) */
.dermhaus-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 2rem 1.5rem;
}

/* Each filter group is an accordion (details/summary) */
.dermhaus-filter-group {
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 0;
}
.dermhaus-filter-group:last-child { border-bottom: none; }
.dermhaus-filter-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding: 0.1rem 0;
}
.dermhaus-filter-option__name { text-transform: none !important; }

/* Price filter — Min/Max number inputs + dual-handle range slider. */
.dh-price-filter {
  padding: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.dh-price-filter__inputs {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.dh-price-filter__input {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--stone);
  background: #fff;
  padding: 0.55rem 0.75rem;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
}
.dh-price-filter__input:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(42,37,32,0.06);
}
.dh-price-filter__cur {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.dh-price-filter__input input {
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  width: 100%;
  min-width: 0;
  padding: 0;
  -moz-appearance: textfield;
}
.dh-price-filter__input input::-webkit-outer-spin-button,
.dh-price-filter__input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dh-price-filter__dash {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  flex-shrink: 0;
}

/* Dual-handle slider — refined editorial style.
   - 2px subtle stone track, rounded ends.
   - Ink fill between thumbs, same rounded ends.
   - Thumbs are small solid ink dots, no border. A soft outer ring shows
     on hover / active for a tactile cue without visual noise. */
.dh-price-filter__slider {
  position: relative;
  height: 24px;
  margin: 0 6px;
}
.dh-price-filter__track {
  position: absolute;
  top: 50%;
  left: -6px; right: -6px;
  height: 2px;
  background: var(--stone);
  border-radius: 999px;
  transform: translateY(-50%);
}
.dh-price-filter__fill {
  position: absolute;
  top: 50%;
  height: 2px;
  background: var(--ink);
  border-radius: 999px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: left 0.12s ease, right 0.12s ease;
}
.dh-price-filter__range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.dh-price-filter__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
  cursor: grab;
  margin-top: 0;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.dh-price-filter__range::-moz-range-thumb {
  pointer-events: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
  cursor: grab;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.dh-price-filter__range:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(42,37,32,0.10);
  transform: scale(1.05);
}
.dh-price-filter__range:hover::-moz-range-thumb {
  box-shadow: 0 0 0 6px rgba(42,37,32,0.10);
  transform: scale(1.05);
}
.dh-price-filter__range:active::-webkit-slider-thumb,
.dh-price-filter__range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 8px rgba(42,37,32,0.16);
  cursor: grabbing;
}
.dh-price-filter__range:active::-moz-range-thumb,
.dh-price-filter__range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 8px rgba(42,37,32,0.16);
  cursor: grabbing;
}
.dh-price-filter__range:focus { outline: none; }
.dh-price-filter__range::-webkit-slider-runnable-track { background: transparent; }
.dh-price-filter__range::-moz-range-track { background: transparent; }
.dermhaus-filter-group__summary::-webkit-details-marker { display: none; }
.dermhaus-filter-group__chev {
  display: inline-flex;
  color: var(--ink-soft);
  transition: transform 0.25s ease;
}
.dermhaus-filter-group[open] .dermhaus-filter-group__chev { transform: rotate(180deg); }

.dermhaus-filter-group__list {
  list-style: none;
  padding: 1rem 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Checkbox option — visually hide native input, draw our own box */
.dermhaus-filter-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.2rem 0;
  user-select: none;
}
.dermhaus-filter-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.dermhaus-filter-option__box {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--ink-soft);
  background: #fff;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.dermhaus-filter-option input:checked + .dermhaus-filter-option__box {
  background: var(--ink);
  border-color: var(--ink);
}
.dermhaus-filter-option input:checked + .dermhaus-filter-option__box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--bone);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.dermhaus-filter-option input:focus-visible + .dermhaus-filter-option__box {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.dermhaus-filter-option__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.3;
}

/* Drawer footer */
.dermhaus-drawer__footer {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 2rem 2rem;
  border-top: 1px solid var(--line);
  background: var(--bone);
}
.dermhaus-drawer__clear {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.5rem 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
}
.dermhaus-drawer__clear:hover { color: var(--ink); text-decoration-color: var(--ink); }

.dermhaus-drawer__apply {
  flex: 1 1 auto;
  background: var(--ink);
  color: var(--bone);
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
  line-height: 1;
}
.dermhaus-drawer__apply:hover { background: #1a1612; }

/* Reduce paddings on small screens */
@media (max-width: 560px) {
  .dermhaus-toolbar { flex-wrap: wrap; gap: 0.75rem; }
  .dermhaus-drawer__header,
  .dermhaus-drawer__body,
  .dermhaus-drawer__footer { padding-left: 1.25rem; padding-right: 1.25rem; }
  .dermhaus-filter-trigger,
  .dermhaus-sort select { padding: 0.75rem 2.2rem 0.75rem 1.1rem; letter-spacing: 0; }
  .dermhaus-filter-trigger { padding: 0.75rem 1.1rem; }
}

/* ============================================================
   SINGLE PRODUCT — editorial 2-column layout
   ============================================================ */

.dermhaus-single-product-wrapper {
  background: var(--bone);
  padding: 2rem 0 1rem;
}

.dermhaus-single {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 8rem;
}

.dermhaus-single__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: 5rem;
  row-gap: 0;
  align-items: stretch;
}

/* Left column — gallery (natural scroll, no sticky lock) */
.dermhaus-single__media {
  position: static;
}
/* Custom gallery (paired with inc/product-gallery.php JS).
   - .__wrapper is the fixed beige stage (aspect-ratio locks the height).
   - .__image slides are absolute-positioned on top of each other; only the
     one with .is-active is visible. */
.dermhaus-single__media .woocommerce-product-gallery {
  width: 100% !important;
}
.dermhaus-single__media .woocommerce-product-gallery__wrapper {
  position: relative;
  width: 100% !important;
  aspect-ratio: 5 / 4;
  background: var(--bone-soft);
  overflow: hidden;
  border-radius: var(--btn-radius);
}
.dermhaus-single__media .woocommerce-product-gallery__image {
  position: absolute;
  inset: 0;
  padding: 1rem;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
}
.dermhaus-single__media .woocommerce-product-gallery__image.is-active {
  opacity: 1;
  pointer-events: auto;
}
.dermhaus-single__media .woocommerce-product-gallery__image > a {
  display: block;
  height: 100%;
  width: 100%;
  cursor: default;
}
.dermhaus-single__media .woocommerce-product-gallery__image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto !important;
  position: relative;
  left: 0; right: 0;
  filter: drop-shadow(0 30px 40px rgba(42, 37, 32, 0.16));
}
.dermhaus-single__media .woocommerce-product-gallery__image > a {
  text-align: center;
}
/* Thumbnail strip built by product-gallery.php JS. */
.dh-gallery-thumbs {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
/* When the thumbnails are rendered as a direct child of the grid (so the
   main image row stays sized to just the image), pin them to column 1 /
   row 2 — they appear below the main image, the right-column summary
   stays aligned to the main image, and the CTA bottom matches the main
   image bottom. */
.dh-gallery-thumbs--external {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin-top: 1rem;
  margin-bottom: 0;
}
.dermhaus-single__media,
.dermhaus-single__summary {
  grid-row: 1 / 2;
}
.dh-gallery-thumb {
  width: 70px;
  background: var(--bone-soft);
  padding: 0.5rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
  border-radius: var(--btn-radius);
  overflow: hidden;
}
.dh-gallery-thumb img { display: block; width: 100%; height: auto; }
.dh-gallery-thumb:hover,
.dh-gallery-thumb.is-active { opacity: 1; }

/* Belt-and-braces: WC's magnifier trigger isn't rendered anymore (theme
   support removed), but hide it just in case any plugin re-injects it. */
.dermhaus-single__media .woocommerce-product-gallery__trigger { display: none !important; }

/* Right column — summary */
.dermhaus-single__summary {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

.dermhaus-single__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.85rem;
}

.dermhaus-single__eyebrow-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.dermhaus-single__eyebrow-link:hover,
.dermhaus-single__eyebrow-link:focus {
  color: inherit;
  border-bottom-color: currentColor;
}

.dermhaus-single .product_title,
.dermhaus-single h1.product_title {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  margin: 0 0 0.65rem 0 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.dermhaus-single__size {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.dermhaus-single__short {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0 0 1rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.dermhaus-single__short p { margin: 0 0 0.75rem 0; }
.dermhaus-single__short p:last-child { margin-bottom: 0; }

.dermhaus-single__price {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 1rem;
  letter-spacing: 0;
}
.dermhaus-single__price .price { font-size: inherit !important; font-family: inherit !important; }
.dermhaus-single__price del { color: var(--mute); margin-right: 0.5rem; opacity: 0.6; }
.dermhaus-single__price ins { text-decoration: none; font-weight: inherit; }

/* Flex column auto-margin: pins the CTA to the bottom of the summary
   when its content is shorter than the image, so the button bottom
   aligns with the image bottom. When the column is taller, the auto
   margin collapses to 0 and the CTA sits naturally below the tags. */
.dermhaus-single__cta { margin: auto 0 0 0; }
.dermhaus-single__cta form.cart {
  display: flex !important;
  align-items: stretch;
  gap: 1rem;
  margin: 0 !important;
}
.dermhaus-single__cta .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ink);
  background: transparent;
}
.dermhaus-single__cta .quantity input.qty {
  width: 60px;
  text-align: center;
  background: transparent !important;
  border: none !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  padding: 0 !important;
  height: auto;
  -moz-appearance: textfield;
}
.dermhaus-single__cta .quantity input.qty::-webkit-outer-spin-button,
.dermhaus-single__cta .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dermhaus-single__cta button.single_add_to_cart_button,
.dermhaus-single__cta .single_add_to_cart_button {
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ink) !important;
  color: var(--bone) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 1.4rem 2.5rem !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease !important;
  line-height: 1 !important;
  height: auto !important;
  width: auto !important;
  min-height: 60px;
}
.dermhaus-single__cta button.single_add_to_cart_button:hover {
  background: #1a1612 !important;
  transform: translateY(-1px);
}

/* Accordions — same visual language as the filter drawer */
.dermhaus-single__accordions { border-top: 1px solid var(--line); }
.dermhaus-accordion {
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 0;
}
.dermhaus-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.2rem 0;
}
.dermhaus-accordion__summary::-webkit-details-marker { display: none; }
.dermhaus-accordion__chev {
  display: inline-flex;
  color: var(--ink-soft);
  transition: transform 0.25s ease;
}
.dermhaus-accordion[open] .dermhaus-accordion__chev { transform: rotate(180deg); }
.dermhaus-accordion__body {
  padding: 1.25rem 0 0.25rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.08rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
}
.dermhaus-accordion__body p { margin: 0 0 0.85rem 0; }
.dermhaus-accordion__body p:last-child { margin-bottom: 0; }
.dermhaus-accordion__body ul,
.dermhaus-accordion__body ol { margin: 0 0 0.85rem 1.25rem; padding: 0; }
.dermhaus-accordion__body li { margin-bottom: 0.35rem; }
.dermhaus-accordion__body strong { color: var(--ink); font-weight: 500; }
/* Sub-section headings inside the single combined accordion */
.dermhaus-accordion__subhead {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.75rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.dermhaus-accordion__subhead:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Key Ingredients bullet list — one hero ingredient per line */
.dermhaus-accordion__bullets {
  list-style: none;
  margin: 0 0 0.85rem 0;
  padding: 0;
}
.dermhaus-accordion__bullets li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.55rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}
.dermhaus-accordion__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 1px;
  background: var(--ink);
}

/* Full Ingredients INCI list — small caps, comfortable wrap */
.dermhaus-accordion__inci {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0;
  word-break: break-word;
}

/* How to Use body — same Inter rhythm as the Description block */
.dermhaus-accordion__how-to-use {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.dermhaus-accordion__how-to-use p { margin: 0 0 0.75rem 0; }
.dermhaus-accordion__how-to-use p:last-child { margin-bottom: 0; }

.dermhaus-single__empty-detail {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink-soft);
  padding: 1.5rem 0;
}

/* Full-width Description block — sits below the gallery + summary grid,
   spans the .dermhaus-single container (within page margins). */
.dermhaus-single__description {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.dermhaus-single__description-heading {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.25rem;
  text-align: left;
}
.dermhaus-single__description-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.dermhaus-single__description-body p {
  margin: 0 0 1rem;
}
.dermhaus-single__description-body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .dermhaus-single__description {
    margin-top: 2.5rem;
    padding-top: 2rem;
  }
}

/* Full-width accordions block below Description — Ritual & Formulation + Full Ingredients */
.dermhaus-single__detail-accordions {
  margin-top: 1.25rem;
}
.dermhaus-single__detail-accordions .dermhaus-accordion {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.dermhaus-single__detail-accordions .dermhaus-accordion:first-child {
  border-top: 1px solid var(--line);
}
.dermhaus-single__detail-accordions .dermhaus-accordion__summary {
  padding: 0.9rem 0;
}
.dermhaus-single__detail-accordions .dermhaus-accordion__body {
  padding: 0 0 1rem;
}
@media (max-width: 768px) {
  .dermhaus-single__detail-accordions {
    margin-top: 1rem;
  }
}

/* Related products section — give it air */
.dermhaus-single + .related.products,
.dermhaus-single ~ .related.products,
.related.products {
  max-width: 1500px;
  margin: 4rem auto 0;
  padding: 0 8rem;
}.related.products > h2{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--ink);
  margin-bottom: 2rem;
  text-align: center;
}
/* Related products: cap layout at 3 columns to match the 3-card limit set
   in functions.php. All card styling (image inset, title/price size) is
   inherited from the main .woocommerce ul.products rules — same look as
   the shop grid, just fewer cards. */
.related.products ul.products {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Related-product cards are smaller than the main shop grid — shrink the
   circular add-to-cart pill (and the icon inside) so it doesn't dominate
   the thumbnail corner. */
.related.products ul.products li.product .dermhaus-product-media > .button.add_to_cart_button,
.related.products ul.products li.product .dermhaus-product-media > a.button {
  width: 34px;
  height: 34px;
  bottom: 0.6rem;
  right: 0.6rem;
}
.related.products ul.products li.product .dermhaus-product-media > .dh-loop-cart .dh-loop-cart__icon {
  width: 15px;
  height: 15px;
}
.related.products ul.products li.product .dermhaus-product-media > .button.dermhaus-signin-to-buy {
  font-size: 0.6rem !important;
  padding: 0.4rem 0.7rem !important;
  bottom: 0.6rem;
  right: 0.6rem;
}
@media (max-width: 1200px) {
  .related.products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* When 3 products land on a 2-column grid, the 3rd card sits alone on
     row 2. Centre it between the two cards above so the row reads
     balanced instead of left-stuck. */
  .related.products ul.products > li.product:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    max-width: calc(50% - 0.75rem);
    justify-self: center;
  }
}

/* Mobile */
@media (max-width: 900px) {
  .dermhaus-single { padding: 0 1.5rem; }
  /* Single column: media first, summary second. Reset the desktop
     grid-row pinning so both rows stack naturally instead of overlapping
     in the same cell (which made the image disappear on mobile). */
  .dermhaus-single__grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 2rem;
  }
  .dermhaus-single__media,
  .dermhaus-single__summary,
  .dh-gallery-thumbs--external {
    grid-row: auto !important;
    grid-column: auto !important;
  }
  .dermhaus-single__media { position: static; order: 1; }
  .dh-gallery-thumbs--external { order: 2; margin-top: 0.75rem; }
  .dermhaus-single__summary { order: 3; }
  .dermhaus-single .product_title { font-size: 2rem !important; }
  /* Keep qty + Add-to-Cart side-by-side on mobile (was forced to column). */
  .dermhaus-single__cta form.cart {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
  }
  .dermhaus-single__cta .quantity { width: auto; flex: 0 0 auto; }
  .dermhaus-single__cta button.single_add_to_cart_button {
    width: auto !important;
    flex: 1 1 auto;
  }
  .related.products { padding: 0 1.5rem; }
  /* Related-product cards on mobile are noticeably smaller than the main
     shop grid — shrink the wishlist heart so it doesn't dominate the
     thumbnail corner. */
  .related.products .dh-wishlist-btn {
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
  }
  .related.products .dh-wishlist-btn__icon { width: 14px; height: 14px; }
}

/* ============================================================
   PAGE BANNER — bone-soft strip used for brand archives AND
   chapter (product category) archives. Aligned with the product
   grid: same max-width and side inset, so the banner's edges
   line up with the first and last product columns.
   ============================================================ */
.page-banner {
  background: var(--bone-soft);
  /* Match the product grid: 1500px container with 8rem side padding.
     1500 - 16rem = 1244px effective inner area. */
  max-width: calc(1500px - 16rem);
  width: calc(100% - 16rem);
  /* Breathing room between the fixed nav and the bone-soft banner. */
  margin: 1.25rem auto 0.5rem;
  padding: 1.75rem 2rem;
  border-radius: var(--btn-radius);
  text-align: center;
  box-sizing: border-box;
}
.page-banner__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}
.page-banner__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.page-banner__logo {
  display: block;
  max-width: 200px;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* SkinCeuticals + NeoStrata logos read smaller than the other brands at
   the default banner size because of their slender wordmarks. Scale them
   up so they hold their own next to Avène, Bioderma, La Roche-Posay et al. */
body.term-skinceuticals .page-banner__logo,
body.term-neostrata .page-banner__logo {
  max-width: 300px;
  max-height: 95px;
}.page-banner__title{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}.page-banner--chapter .page-banner__title{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
}
.page-banner__desc {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink);
  max-width: 100%;
  line-height: 1.55;
  margin: 0.4rem 0 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  letter-spacing: 0;
}

/* When a banner is rendered above, zero out the .page-content top padding
   so the toolbar sits flush below the banner. */
.page-content.page-content--after-banner { padding-top: 0; }
/* Wishlist (page id 3881): the chapter-style banner sits flush above the
   product grid by default. Give the grid a touch of breathing room so the
   saved cards don't read as if they belong to the banner block. */
body.page-id-3881 .page-content--after-banner { padding-top: 0.5rem; }

/* ---------- Brand-page range pill row (under banner) ---------- */
.dermhaus-range-filter {
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
}
/* The viewport sizes the rail and serves as the positioning context
   for the side fades, so they sit AT the rail's edges rather than at
   the viewport edges. Matches the page-banner above (1500px max,
   8rem gutter each side). */
.dermhaus-range-filter__viewport {
  position: relative;
  max-width: calc(1500px - 16rem);
  width: calc(100% - 16rem);
  margin: 0 auto;
}
.dermhaus-range-filter__inner {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  /* `safe center` centres when content fits, falls back to start
     when it overflows (otherwise the leading pill would be
     unreachable on narrow viewports). */
  justify-content: safe center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dermhaus-range-filter__inner::-webkit-scrollbar { height: 4px; }
.dermhaus-range-filter__inner::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.dermhaus-range-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.15rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.dermhaus-range-pill:hover  { background: var(--ink); color: var(--bone); }
.dermhaus-range-pill.is-active {
  background: var(--ink);
  color: var(--bone);
}

/* Side fades sit on the viewport wrapper so they line up with the
   rail's edges — not the page's edges. Both hidden until JS toggles
   `.is-overflowable` on the outer .dermhaus-range-filter. */
.dermhaus-range-filter__viewport::before,
.dermhaus-range-filter__viewport::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2.75rem;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* Straddle the rail edge: tile is 2.75rem wide, sitting half in the
   gutter (left: -1.25rem) and half over the rail edge. The bone fade
   visibly overlays the leading/trailing pills, while the chevron sits
   in the gutter just outside the rail. */
.dermhaus-range-filter__viewport::before {
  left: -1.25rem;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2520' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6l-6 6 6 6'/></svg>")
      no-repeat left 0.4rem center / 14px 14px,
    linear-gradient(to right, var(--bone) 45%, rgba(245, 241, 234, 0));
}
.dermhaus-range-filter__viewport::after {
  right: -1.25rem;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2520' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>")
      no-repeat right 0.4rem center / 14px 14px,
    linear-gradient(to right, rgba(245, 241, 234, 0), var(--bone) 55%);
}
.dermhaus-range-filter.is-overflowable .dermhaus-range-filter__viewport::after  { opacity: 1; }
.dermhaus-range-filter.is-overflowable.is-scrolled-start .dermhaus-range-filter__viewport::before { opacity: 1; }
.dermhaus-range-filter.is-overflowable.is-scrolled-end   .dermhaus-range-filter__viewport::after  { opacity: 0; }

/* Hide the native scrollbar so the fades are the sole overflow cue. */
.dermhaus-range-filter__inner { scrollbar-width: none; }
.dermhaus-range-filter__inner::-webkit-scrollbar { display: none; }

/* Mid-width: gutter shrinks from 8rem to 1.5rem (matches the banner's
   880px collapse). The viewport itself narrows, so the fades follow
   automatically to the new rail edges. */
@media (max-width: 880px) {
  .dermhaus-range-filter__viewport {
    width: calc(100% - 3rem);
    max-width: calc(100% - 3rem);
  }
}

@media (max-width: 768px) {
  .dermhaus-range-filter { padding: 0.6rem 0; }
  .dermhaus-range-filter__inner { gap: 0.5rem; }
  .dermhaus-range-pill {
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
    padding: 0.65rem 1rem;
    font-size: 0.7rem;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
  }
}

/* On mid-width viewports the grid is still 4rem padding — banner already
   matches. Below 880px the grid switches to 1.5rem; mirror it here. */
@media (max-width: 880px) {
  .page-banner { width: calc(100% - 3rem); }
}
@media (max-width: 768px) {
  .page-banner { padding: 1.25rem 1.25rem; }
  .page-banner__logo { max-width: 160px; max-height: 56px; }
  .page-banner__title { font-size: 1.7rem; }
  .page-banner__desc  { font-size: 0.92rem; }
}
/* Phones: the products grid drops to 1rem side padding — match the banner
   and toolbar so their left/right edges align with the product columns. */
@media (max-width: 520px) {
  .page-banner { width: calc(100% - 2rem); }
  .dermhaus-toolbar__inner { padding: 0.85rem 1rem; }
}

/* ============================================================
   GLOBAL BUTTON ROUNDING
   Driven by --btn-radius / --input-radius at the top of this file.
   Specific elements that need to stay circular (cart badge, × buttons,
   overlay add-to-cart) are deliberately excluded.
   ============================================================ */

/* Buttons (everything pill-like across the site) */
.btn,
.dermhaus-filter-trigger,
.dermhaus-drawer__apply,
.dermhaus-range-pill,
.contact-cta,
.contact-cta--whatsapp,
.dermhaus-cart__update-btn,
.dermhaus-cart__coupon,
.dermhaus-cart__coupon-btn,
.dermhaus-cart__qty .quantity,
.dermhaus-single__cta .quantity,
.dermhaus-single__cta button.single_add_to_cart_button,
.woocommerce-cart a.checkout-button,
.woocommerce-cart .woocommerce-notices-wrapper .button,
.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-info .button,
.woocommerce-cart .return-to-shop .button,
.woocommerce-checkout #place_order,
.woocommerce-checkout button.button[name="woocommerce_checkout_place_order"] {
  border-radius: var(--btn-radius) !important;
}

/* Form inputs / selects / textareas — same radius for visual consistency */
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single,
.dermhaus-cart__coupon-input,
.dermhaus-cart__qty input.qty,
.dermhaus-single__cta input.qty {
  border-radius: var(--input-radius) !important;
}

/* Make sure rounded wrappers clip inner inputs/buttons cleanly */
.dermhaus-cart__coupon,
.dermhaus-cart__qty .quantity,
.dermhaus-single__cta .quantity { overflow: hidden; }

/* Payment box on checkout — visual card */
.woocommerce-checkout #payment div.payment_box { border-radius: 10px; }

/* ============================================================
   CHECKOUT — small aesthetic refinements
   ============================================================ */

/* Shipping fallback row (when no rates yet) — quiet hint text */
.dermhaus-checkout-aside .dermhaus-shipping-row td {
  text-align: right;
  font-style: normal;
}
.dermhaus-shipping-placeholder {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}
/* Shipping row — render as a stacked block: "Shipment" header on its own
   line, then each option below as a bullet row with name left / price right. */
/* Let the shipping row stay as a normal table row — JS adds colspan=2 to the
   td and hides the th, so the td naturally spans the full table width. */
.dermhaus-checkout-aside tr.woocommerce-shipping-totals td {
  text-align: left !important;
  padding: 0.5rem 0 !important;
  border: none !important;
}
.dermhaus-checkout-aside tr.woocommerce-shipping-totals th,
.dermhaus-checkout-aside .dh-shipping-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.dermhaus-checkout-aside .woocommerce-shipping-methods {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block !important;
  width: 100% !important;
}
.dermhaus-checkout-aside .woocommerce-shipping-methods li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  padding: 0.1rem 0 !important;
  padding-right: 0 !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: var(--ink);
  margin: 0 !important;
}
.dermhaus-checkout-aside .woocommerce-shipping-methods li input[type="radio"] {
  position: absolute !important;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px !important;
  height: 14px !important;
  accent-color: var(--ink);
  margin: 0 !important;
  cursor: pointer;
}
/* Target the #shipping_method ID to outweigh WC's
   `#shipping_method li label { display: inline }` rule.
   padding-right reserves space for the absolutely-positioned price so
   long shipping names wrap onto a second line instead of running under it. */
.dermhaus-checkout-aside #shipping_method li label,
.dermhaus-checkout-aside .woocommerce-shipping-methods li label {
  display: block !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 5.5rem !important;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin: 0 !important;
  line-height: 1.35;
  position: relative !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.dermhaus-checkout-aside #shipping_method,
.dermhaus-checkout-aside #shipping_method li,
.dermhaus-checkout-aside #shipping_method li input[type="radio"] {
  /* re-apply the same layout against the ID selector so WC's
     id-targeted defaults don't sneak back in via specificity */
}
.dermhaus-checkout-aside #shipping_method {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
}
.dermhaus-checkout-aside #shipping_method li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  padding: 0.1rem 0 !important;
  margin: 0 !important;
  list-style: none !important;
  line-height: 1.35 !important;
}
.dermhaus-checkout-aside #shipping_method li input[type="radio"] {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}
.dermhaus-checkout-aside #shipping_method li label .dh-method-price {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}
.dermhaus-checkout-aside .woocommerce-shipping-methods .dh-method-name {
  display: inline;
}
.dermhaus-checkout-aside .woocommerce-shipping-methods .dh-method-price {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  color: var(--ink);
}
.dermhaus-checkout-aside .woocommerce-shipping-methods .dh-method-price .amount,
.dermhaus-checkout-aside .woocommerce-shipping-methods .dh-method-price bdi {
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.dermhaus-checkout-aside .woocommerce-shipping-methods .dh-method-price .amount,
.dermhaus-checkout-aside .woocommerce-shipping-methods .dh-method-price bdi {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.dermhaus-checkout-aside .woocommerce-shipping-methods .dh-method-free {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
/* When the free pill is rendered the whole price wrapper is the pill, so
   the wrapper's own letter-spacing override above (= 0) doesn't apply. */
.dermhaus-checkout-aside .woocommerce-shipping-methods .dh-method-price .dh-method-free {
  letter-spacing: 0 !important;
}
/* Hide the deferred-payment plugin's note box on checkout (per design ask) */
.woocommerce-checkout .dermhaus-payment-note { display: none !important; }

/* Hide the entire payment-methods card. Only the deferred-payment gateway
   is registered, so its label ("Place Order — We'll Send Payment Link")
   serves no purpose — WC auto-selects the only method on submit. */
.woocommerce-checkout #payment ul.payment_methods { display: none !important; }
.dermhaus-checkout-aside .shipping-calculator-button {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dermhaus-checkout-aside .shipping-calculator-button:hover { color: var(--ink); }

/* Payment methods radio list — cleaner edges, sit in their own card */
.woocommerce-checkout #payment ul.payment_methods {
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  padding: 0.5rem 1.25rem;
  background: #fff;
  list-style: none;
  margin: 1.25rem 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none; }

/* Payment description box (the bone-soft expandable block beneath each method) */
.woocommerce-checkout #payment div.payment_box {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 1rem 1.1rem;
  margin-top: 0.6rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.55;
}

/* "Returning customer? Click here to log in" — make it feel like a utility
   line above the form rather than a notice card. */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: 1.25rem;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0.85rem 0;
  font-size: 0.95rem;
  text-align: center;
  margin: 0;
}

/* (Removed: a CSS-generated "Checkout" eyebrow was duplicating the page
   title text, since both said the same word. The plain title is enough.) */

/* Soften row spacing between billing → shipping → additional sections */
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  margin-top: 1.25rem;
}
.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout p.form-row.create-account > label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.woocommerce-checkout #ship-to-different-address,
.woocommerce-checkout p.form-row.create-account,
.woocommerce-checkout .woocommerce-account-fields {
  margin-left: 0 !important;
  padding-left: 1rem !important;
  width: 100%;
}
.woocommerce-checkout p.form-row.create-account {
  margin: 0.75rem 0 0;
}
.woocommerce-checkout #ship-to-different-address {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.85rem;
}

/* Terms checkbox area — clearer reading */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin: 1rem 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.55;
}

/* ============================================================
   MINI-CART DRAWER — slides in from the right when the top-nav
   cart icon is clicked. Reuses WC's woocommerce_mini_cart() output.
   ============================================================ */

/* ============ MINI-CART DRAWER ============
   Sliding side drawer wrapping WC's woocommerce_mini_cart() output.
   Layout (top -> bottom):
     Header           — sticky, "Your Bag" eyebrow + ×
     Items list       — scrolls
     Subtotal + CTAs  — pinned bottom, sits on bone-soft 'tray'
*/

.dh-mini-cart {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
  /* When closing, delay `visibility: hidden` by the panel transition
     duration so the slide-out animation actually plays. When opening,
     no delay — visibility flips to `visible` immediately so the
     transform animation starts on a rendered element. */
  transition: visibility 0s linear 0.4s;
}
.dh-mini-cart.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}

.dh-mini-cart__scrim {
  position: absolute;
  inset: 0;
  /* Background + blur applied at full strength always; opacity fades the
     whole scrim in/out. Animating opacity is GPU-accelerated; animating
     backdrop-filter blur radius is a known jank source on every browser.
     The parent .dh-mini-cart already toggles visibility, so the blur is
     never active when the cart is closed. */
  background: rgba(42, 37, 32, 0.36);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.32s ease;
  will-change: opacity;
}
.dh-mini-cart.is-open .dh-mini-cart__scrim { opacity: 1; }

.dh-mini-cart__panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: min(440px, 94vw);
  background: var(--bone);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: -30px 0 80px -40px rgba(42, 37, 32, 0.45);
  /* Promote to its own compositor layer so the slide-in is GPU-accelerated
     from the first frame. Without this, the first frame of the transform
     can render on the CPU then jump to GPU, causing a small judder. */
  will-change: transform;
}
.dh-mini-cart.is-open .dh-mini-cart__panel { transform: translateX(0); }

/* ----- Header ----- */
.dh-mini-cart__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Match the top nav's rendered outer height exactly. With border-box,
     `height: var(--top-nav-h)` includes the 1px bottom border. */
  padding: 0 2.5rem;
  height: var(--top-nav-h);
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
}
.dh-mini-cart__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.dh-mini-cart__close {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.4rem;
  margin: -0.4rem;
  display: inline-flex;
  transition: color 0.2s ease;
}
.dh-mini-cart__close:hover { color: var(--ink); }

/* ----- Body (flex column: list grows, footer pinned) ----- */
.dh-mini-cart .widget_shopping_cart_content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow the inner UL to scroll inside flex parent */
}

/* WC outputs:
     <ul class="woocommerce-mini-cart">  (items)
     <p class="woocommerce-mini-cart__total">  (subtotal)
     <p class="woocommerce-mini-cart__buttons">  (View cart + Checkout)
   We let the UL fill the remaining space and scroll; the two <p>s
   sit underneath as a "tray" with a tinted background. */

.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0.5rem 2.5rem 1.5rem;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* ----- Each item -----
   LI markup (via theme override at woocommerce/cart/mini-cart.php):
     <a class="remove">×</a>
     <a class="dh-mc-thumb" href><img/></a>
     <div class="dh-mc-info">
       <a class="dh-mc-name" href>Product Name</a>
       <span class="quantity">1 × <span class="amount">R 25</span></span>
     </div>

   The LI is a flex row (thumb | info). The info column is a flex column
   so the qty can sit pinned to the BOTTOM of the info column via
   margin-top: auto. The info column's min-height is the image height,
   so when the name is short the qty's bottom edge aligns with the image
   bottom; when the name is long the column grows and the qty drops past
   the name's last line. No overlap is ever possible.
*/
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item.mini_cart_item {
  position: relative;
  display: flex !important;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 1.1rem 1.75rem 1.1rem 0; /* right room for absolute × */
  border-bottom: 1px solid var(--line);
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item:last-child { border-bottom: 0; }

/* Remove × — red icon at rest, red translucent circle on hover/active
   (same treatment as the main cart-page remove button). Vertically
   centred against the row at all viewports.

   WooCommerce renders the link as <a class="remove">&times;</a>. We
   hide the native × text via font-size: 0 and draw the icon via
   background-image so we can swap colour state via background swap. */
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item a.remove,
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item .remove_from_cart_button {
  position: absolute !important;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent center / 18px 18px no-repeat
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23c0392b' stroke-width='1.4'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
  border: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item a.remove:hover,
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item a.remove:active,
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item .remove_from_cart_button:hover,
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item .remove_from_cart_button:active {
  background-color: rgba(192, 57, 43, 0.12) !important;
  transform: translateY(-50%) scale(1.05);
}

/* ===== Fallback for legacy fragment HTML =====
   If a freshly-injected mini-cart fragment still uses WC's default
   single-anchor structure (no `.dh-mc-thumb` / `.dh-mc-info`), make that
   anchor itself behave as the row's content column so it fills the LI
   instead of shrinking to fit. Without this rule, the LI is flex, the
   border-bottom spans full width, but the inner anchor collapses to its
   intrinsic content size — visible as "narrow items, full-width
   dividers" until the next reload.

   Hidden the moment our new structure is present (then `.dh-mc-thumb`
   exists, so this rule's `:not(.dh-mc-thumb)` filter still matches but
   it doesn't render — the new structure controls layout). */
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item > a:not(.remove):not(.dh-mc-thumb):not(.dh-mc-name) {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  text-decoration: none !important;
  color: var(--ink) !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 !important;
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item > a:not(.remove):not(.dh-mc-thumb):not(.dh-mc-name) img {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--bone-soft);
  padding: 0.5rem;
  border-radius: var(--btn-radius);
  display: block;
  margin: 0;
  box-sizing: border-box;
}

/* Thumb (image wrapper). Fixed 72px square so the info column has a
   stable reference for its min-height. */
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item .dh-mc-thumb {
  flex: 0 0 72px;
  display: block;
  text-decoration: none !important;
  margin: 0;
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item .dh-mc-thumb img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--bone-soft);
  padding: 0.5rem;
  border-radius: var(--btn-radius);
  display: block;
  margin: 0;
  box-sizing: border-box;
}

/* Info column = name on top, qty pinned to bottom. min-height = image
   height so the qty lands at the image bottom for short names; the
   column grows naturally for long names and the qty drops with it.
   `!important` on flex so no other rule (e.g. WC defaults) can stop
   this column from filling the LI's remaining width. */
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item .dh-mc-info {
  flex: 1 1 0% !important;
  display: flex;
  flex-direction: column;
  min-height: 72px;
  min-width: 0;
  width: auto;
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item .dh-mc-name {
  text-decoration: none !important;
  color: var(--ink) !important;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 !important;
  word-break: break-word;
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item .dh-mc-name:hover {
  color: var(--ink-soft) !important;
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item .quantity {
  margin: auto 0 0 0; /* push to bottom of the info flex column */
  padding: 0;
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item .quantity .amount {
  color: var(--ink);
  font-weight: 500;
}

/* Mobile + tablet (any narrow viewport): full-viewport drawer.
   Breakpoint at 600px (phone-only). */
@media (max-width: 600px) {
  .dh-mini-cart__panel {
    width: 100vw;
    box-shadow: none;
  }
  .dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart-item.mini_cart_item {
    padding: 0.9rem 1.75rem 0.9rem 0;
  }
}

/* ----- Footer tray: subtotal + buttons (both <p>s grouped visually) ----- */
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__total,
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons {
  flex: 0 0 auto;
  background: var(--bone-soft);
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.4rem 2.5rem 0.75rem;
  margin: 0;
  border-top: 1px solid var(--line);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__total strong { display: none; }
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__total::before {
  content: 'Subtotal';
  flex: 0 0 auto;
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__total .amount {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons {
  padding: 0.5rem 2.5rem 1.75rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__total::after {
  display: none;
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons::before {
  content: 'Shipping calculated at checkout.';
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 0.4rem;
}
/* Hide the "Shipping calculated at checkout" note once the free-delivery
   threshold is reached (the progress bar above gets .is-unlocked). */
.dh-mini-cart .widget_shopping_cart_content:has(.dh-shipping-progress.is-unlocked)
  .woocommerce-mini-cart__buttons::before {
  display: none;
}

/* Hide the checkout Country field row entirely (we ship to South Africa
   only — the value is set to ZA via PHP and the dropdown is suppressed). */
.woocommerce-checkout .form-row.dh-country-hidden,
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #shipping_country_field { display: none !important; }

/* Two CTAs: Checkout primary (filled), View cart secondary (outlined).
   Order: visually checkout first via order property. */
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  padding: 1.05rem 1rem !important;
  border-radius: var(--btn-radius) !important;
  border: 1px solid var(--ink) !important;
  text-decoration: none !important;
  text-align: center !important;
  line-height: 1 !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  margin: 0 !important;
  transition: background 0.2s ease, color 0.2s ease;
}
/* Checkout = primary (filled ink) — render first */
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button.checkout,
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button:last-child {
  order: 1;
  background: var(--ink) !important;
  color: var(--bone) !important;
  border-color: var(--ink) !important;
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button.checkout:hover,
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button:last-child:hover {
  background: #1a1612 !important;
  border-color: #1a1612 !important;
}
/* View cart = secondary (outlined) — render second */
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button:first-child {
  order: 2;
  background: transparent !important;
  color: var(--ink) !important;
}
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button:first-child:hover {
  background: var(--ink) !important;
  color: var(--bone) !important;
}

/* ----- Empty state ----- */
.dh-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__empty-message,
.dh-mini-cart .widget_shopping_cart_content .cart_list.empty {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 5rem 2.5rem;
  margin: 0;
}

/* ============ ADDED-TO-CART NOTICE ============
   Site-wide: the WC "added to your cart / Undo" confirmation banners are
   suppressed entirely (server-side filters in inc/checkout-disabled.php
   blank the messages; this CSS hides any container still rendered). */
body .woocommerce-notices-wrapper .woocommerce-message,
body .woocommerce-message {
  display: none !important;
}
body:not(.woocommerce-checkout) .woocommerce-notices-wrapper .woocommerce-info,
body:not(.woocommerce-checkout) .woocommerce-notices-wrapper .woocommerce-error,
body:not(.woocommerce-checkout) .woocommerce-info,
body:not(.woocommerce-checkout) .woocommerce-error {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1500px;
  margin: 1rem auto 1.5rem !important;
  padding: 1rem 1.5rem !important;
  background: var(--bone-soft) !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 2px solid var(--ink) !important;
  border-radius: var(--btn-radius) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
  color: var(--ink) !important;
  line-height: 1.55 !important;
  list-style: none;
  box-shadow: none !important;
  animation: dh-notice-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes dh-notice-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Strip WC's default ::before checkmark/icon (not on checkout — we use our own) */
body:not(.woocommerce-checkout) .woocommerce-message::before,
body:not(.woocommerce-checkout) .woocommerce-info::before,
body:not(.woocommerce-checkout) .woocommerce-error::before { display: none !important; content: none !important; }

/* In-notice links (e.g. product name) */
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button) {
  color: var(--ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-color: var(--mute);
}

/* "View cart" button inside the notice — outlined pill matching the theme */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-notices-wrapper .button {
  background: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  padding: 0.55rem 1.1rem !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  flex: 0 0 auto;
  margin: 0 !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-notices-wrapper .button:hover {
  background: var(--ink) !important;
  color: var(--bone) !important;
}

/* ============ SHOP PAGINATION ============
   Override WC's boxed default. No borders, no backgrounds — just spaced
   letter-tracked numerals with a subtle underline on the active page. */
.woocommerce nav.woocommerce-pagination,
.woocommerce-pagination {
  max-width: 1500px;
  margin: -1rem auto 4rem;
  padding: 0 8rem;
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-pagination ul,
.woocommerce-pagination ul li {
  border: 0 !important;
  background: transparent !important;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
}
/* Page numbers — sleek circular buttons */
.woocommerce nav.woocommerce-pagination ul li .page-numbers,
.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.65rem;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.woocommerce-pagination a.page-numbers:hover {
  color: var(--ink);
  background: var(--bone-soft) !important;
}
/* Active page — keep Montserrat to match the other numbers; the filled
   ink circle is the visual cue, no font swap needed. */
.woocommerce nav.woocommerce-pagination ul li .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
  color: var(--ink);
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers.current,
.woocommerce-pagination .page-numbers.current { color: var(--bone) !important; }

/* Prev / Next — render as a Cormorant italic word with chevron arrow */
.woocommerce-pagination .page-numbers.prev,
.woocommerce-pagination .page-numbers.next {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--ink);
  padding: 0 0.85rem;
}
.woocommerce-pagination .page-numbers.dots {
  border: none !important;
  background: transparent !important;
  min-width: auto;
  letter-spacing: 0;
  color: var(--stone);
}
@media (max-width: 880px) {
  .woocommerce nav.woocommerce-pagination,
  .woocommerce-pagination { padding: 0 1.5rem; }
  .woocommerce-pagination ul.page-numbers { gap: 0.25rem; }
}

/* ============================================================
   RESTRICTED-BRAND "Sign in to purchase" CTA + MY-ACCOUNT PAGE
   ============================================================ */

/* Loop card override: replaces the round add-to-cart pill on
   SkinCeuticals + NeoStrata grid cards for logged-out users.
   The selector below intentionally beats the rounded media-overlay
   add-to-cart styles in the shop grid. */
.woocommerce ul.products li.product .dermhaus-product-media > .button.dermhaus-signin-to-buy {
  position: absolute !important;
  bottom: 0.9rem;
  right: 0.9rem;
  background: var(--ink) !important;
  color: var(--bone) !important;
  border: 1px solid var(--ink) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  padding: 0.55rem 0.9rem !important;
  border-radius: var(--btn-radius) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease;
  opacity: 1 !important;
  transform: none !important;
}
.woocommerce ul.products li.product .dermhaus-product-media > .button.dermhaus-signin-to-buy:hover {
  background: #1a1612 !important;
  border-color: #1a1612 !important;
}

/* Single product page sign-in block (in place of add-to-cart form) */
.dermhaus-signin-cta {
  margin: 1.5rem 0 2rem;
  padding: 1.5rem 1.75rem;
  background: var(--bone-soft);
  border-left: 2px solid var(--ink);
  border-radius: var(--btn-radius);
}
.dermhaus-signin-cta__button {
  display: inline-block;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 1rem 1.6rem;
  border-radius: var(--btn-radius);
  text-decoration: none;
  transition: background 0.2s ease;
}
.dermhaus-signin-cta__button:hover { background: #1a1612; color: var(--bone); }
.dermhaus-signin-cta__note {
  margin: 1rem 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.dermhaus-signin-cta__note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* My account page (login + register forms, dashboard).
   No max-width cap here — the inner .dh-account (sign-in/register) and
   the dashboard layout each set their own page-width. */
.woocommerce-account .woocommerce {
  max-width: none;
  margin: 0 auto 4rem;
  padding: 0;
}
/* Dashboard: constrain the nav+content grid to the standard page margin
   (matches the product grid / page-banner / other content). */
body.logged-in.woocommerce-account .woocommerce {
  max-width: 1500px;
  padding: 0 8rem;
}
@media (max-width: 900px) {
  body.logged-in.woocommerce-account .woocommerce {
    padding: 0 1.5rem;
    /* Stack the dashboard vertically on mobile so the nav fills the full
       page width instead of being trapped in a 200px left column. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "greeting"
      "nav"
      "content";
    column-gap: 0;
    row-gap: 1.5rem;
  }
}.woocommerce-account h2{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.woocommerce-account .u-columns,
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
  width: 100% !important;
  float: none !important;
}
.woocommerce-account .u-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 800px) {
  .woocommerce-account .u-columns { grid-template-columns: 1fr; }
  .woocommerce-account .woocommerce { padding: 0 1.5rem; margin-top: 0.5rem; }
}
.woocommerce-account form.login,
.woocommerce-account form.register {
  background: var(--bone-soft);
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  padding: 2rem;
}
.woocommerce-account form .form-row label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: capitalize;
  color: var(--ink);
  display: block;
  margin-bottom: 0.4rem;
}
.woocommerce-account form .input-text,
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"],
.woocommerce-account form input[type="text"] {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  background: var(--bone);
  color: var(--ink);
}
.woocommerce-account form .button {
  background: var(--ink) !important;
  color: var(--bone) !important;
  border: 1px solid var(--ink) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  padding: 0.9rem 1.4rem !important;
  border-radius: var(--btn-radius) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.woocommerce-account form .button:hover {
  background: #1a1612 !important;
  border-color: #1a1612 !important;
}
.woocommerce-account .lost_password a,
.woocommerce-account .woocommerce-LostPassword a {
  color: var(--ink-soft);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* MyAccount layout — slim left nav and content fill the rest of the row,
   with the "Hello, Name" greeting spanning the full width above both.
   Scoped to body.logged-in so the LOGIN page (where the user is not yet
   authenticated) isn't shoved into this 200px nav grid. */
body.logged-in.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "greeting greeting"
    "nav      content";
  column-gap: 3rem;
  row-gap: 1.5rem;
  align-items: flex-start;
}
/* Mobile: stack the dashboard vertically — nav buttons on top, content
   underneath. Placed AFTER the desktop rule so source-order wins. */
@media (max-width: 900px) {
  body.logged-in.woocommerce-account .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "greeting"
      "nav"
      "content";
    column-gap: 0;
    row-gap: 1.75rem;
  }
}
.woocommerce-account .dh-account-greeting-block {
  grid-area: greeting;
  text-align: center;
}
.woocommerce-account .dh-account-greeting {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--ink);
  letter-spacing: 0;
  margin: 0 0 0.5rem;
  text-align: center;
}
.woocommerce-account .dh-account-greeting-sub {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 auto 0.5rem;
  max-width: 50rem;
  text-align: center;
}
.woocommerce-account .woocommerce-MyAccount-navigation { grid-area: nav; }
.woocommerce-account .woocommerce-MyAccount-content    { grid-area: content; }
.woocommerce-account .woocommerce-MyAccount-navigation {
  flex: 0 0 200px;
  width: 200px !important;
  float: none !important;
  margin: 0;
  padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1 1 auto;
  width: auto !important;
  float: none !important;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-right: 1px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 0.6rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { color: var(--ink); }

/* Mobile dashboard nav: full-width stacked button list (one button per row),
   with Log out kept visually distinct as a secondary outline action. */
@media (max-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100% !important;
    flex: 1 1 100%;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-right: 0 !important;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    text-align: center;
    padding: 1rem 0.5rem;
    background: var(--bone-soft);
    border: 1px solid var(--line);
    border-radius: var(--btn-radius);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--ink);
    color: var(--bone);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
  }
  /* Log out — keep visually distinct as a secondary action. */
  .woocommerce-account .woocommerce-MyAccount-navigation ul
    li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0.4rem;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul
    li.woocommerce-MyAccount-navigation-link--customer-logout a {
    background: transparent;
    border: 1px solid var(--ink);
  }
}

/* ============================================================
   ACCOUNT — Login + Register page
   ============================================================ */
/* =====================================================================
   My Account — login / register (logged-out state)
   Matches the DermHaus checkout design language: bone-soft cards, beige
   inputs with dark beige outline, Cormorant italic titles, bold
   Montserrat labels with red required asterisks.
   ===================================================================== */
/* ============ ACCOUNT / SIGN-IN ============
   Two-column editorial layout. Left column carries the brand voice
   (eyebrow / italic title / subtitle / quiet alt-action). Right column
   carries the form on a bone-soft card. Stacks on mobile. */
body.woocommerce-account {
  background: var(--bone);
}
body.woocommerce-account .page-content--wide {
  padding-top: 2rem;
  padding-bottom: 4rem;
}
@media (max-width: 900px) {
  body.woocommerce-account .page-content--wide {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }
  body.woocommerce-account .dh-account { margin-top: 0; }
}
.dh-account {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 8rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.dh-account__aside {
  text-align: left;
}
.dh-account__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.dh-account__title{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: 0;
  margin: 0 0 1.25rem;
}
.dh-account__sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 26rem;
  margin: 0;
  line-height: 1.55;
}

.dh-account__panel {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 3.5rem 3.5rem;
}

@media (max-width: 1100px) {
  .dh-account {
    padding: 0 3rem;
    gap: 3rem;
  }
  .dh-account__panel { padding: 2.5rem 2.25rem; }
}
@media (max-width: 900px) {
  .dh-account {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 720px;
    padding: 0 1rem;
  }
  .dh-account__aside { text-align: center; }
  .dh-account__sub { margin: 0 auto; }
  .dh-account__panel { padding: 1.75rem 1.25rem; }
}

.dh-account-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.dh-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
}
.dh-field label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.2;
}
.dh-field label span[aria-hidden="true"] { display: none; }
.dh-field input[type="text"],
.dh-field input[type="email"],
.dh-field input[type="password"] {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.65rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--stone);
  border-radius: 0;
  color: var(--ink);
  transition: border-color 0.25s ease;
  width: 100%;
  box-sizing: border-box;
}
.dh-field input::placeholder { color: var(--ink-soft); opacity: 0.5; }
.dh-field input:focus {
  outline: none;
  border-bottom-color: var(--ink);
  background: transparent;
  box-shadow: none;
}
.dh-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.dh-field--checkbox { margin-top: 0.25rem; }

.dh-account__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.dh-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.45;
}
.dh-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px; height: 15px;
  border: 1.5px solid var(--stone);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dh-checkbox input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.dh-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 5px; height: 9px;
  border: solid var(--bone);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dh-account__lost {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--stone);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.dh-account__lost:hover { color: var(--ink); border-bottom-color: var(--ink); }

.dh-account__submit {
  margin-top: 1.5rem;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  padding: 1.1rem 2rem;
  letter-spacing: 0.1em;
}

/* Alt action sits below the title/subtitle in the LEFT column. A short
   rule signals the section break gently. */
.dh-account__alt {
  margin-top: 2.5rem;
}
.dh-account__alt-rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--stone);
  margin: 0 0 1.25rem;
}
.dh-account__alt-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.65rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  line-height: 1.2;
}
.dh-account__alt-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: opacity 0.25s ease;
}
.dh-account__alt-link:hover { opacity: 0.65; }

@media (max-width: 900px) {
  .dh-account__alt-rule { margin-left: auto; margin-right: auto; }
}

.dh-account__note {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--bone);
  border-left: 2px solid var(--stone);
  padding: 0.75rem 1rem;
  border-radius: var(--btn-radius);
  line-height: 1.45;
}

/* ===== Account notices ===== */
/* In-flow banner that sits inside the form panel, directly above the
   first input field. The panel sits in the right column so the notice
   aligns horizontally with the form (not centred on the whole page). */
.dh-account__notices {
  margin: 0 0 1.25rem;
  animation: dhAccountNoticeIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes dhAccountNoticeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dh-account__notices .woocommerce-error,
.dh-account__notices .woocommerce-message,
.dh-account__notices .woocommerce-info,
.dh-account .woocommerce-notices-wrapper > .woocommerce-error,
.dh-account .woocommerce-notices-wrapper > .woocommerce-message,
.dh-account .woocommerce-notices-wrapper > .woocommerce-info {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0.9rem 1rem 0.9rem 2.6rem;
  background: #fff;
  border: 1px solid var(--line) !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  border-radius: var(--btn-radius);
  position: relative;
  display: block !important;
  box-shadow: 0 4px 14px -8px rgba(42, 37, 32, 0.18);
}
.dh-account__notices .woocommerce-error,
.dh-account .woocommerce-notices-wrapper > .woocommerce-error {
  border-left: 3px solid #c0392b !important;
}
.dh-account__notices .woocommerce-error::before {
  content: '!';
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.1rem;
  text-align: center;
}
.dh-account__notices .woocommerce-error li {
  display: block;
  padding: 0;
}
.dh-account__notices .woocommerce-error li strong,
.dh-account__notices .woocommerce-error a { display: none; }


@media (max-width: 800px) {
  .dh-account { padding: 1.5rem 1rem 3rem; }
  .dh-account__grid.has-register { grid-template-columns: 1fr; }
  .dh-field-row { grid-template-columns: 1fr; }
  .dh-account__card { padding: 1.5rem 1.25rem 1.25rem; }
}

/* =====================================================================
   Thank-you / order-received page
   ===================================================================== */
.dh-thankyou {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.dh-thankyou__hero {
  text-align: center;
  padding: 1rem 0 1.5rem;
}
.dh-thankyou__eyebrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.85rem;
}
.dh-thankyou__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 1rem;
  line-height: 1.1;
}
.dh-thankyou__sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.55;
}

/* Overview card — bone-soft surface, key-value rows */
.dh-thankyou__overview {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 1.5rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dh-thankyou__overview-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.dh-thankyou__overview-row:last-of-type {
  border-bottom: 0;
}
.dh-thankyou__overview-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dh-thankyou__overview-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}
.dh-thankyou__overview-value .amount,
.dh-thankyou__overview-value bdi { font: inherit; color: inherit; }
.dh-thankyou__overview-row--total {
  border-top: 1px solid var(--ink);
  margin-top: 0.25rem;
  padding-top: 1rem;
}
.dh-thankyou__overview-row--total .dh-thankyou__overview-value {
  font-size: 1.2rem;
}

.dh-thankyou__cta-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* Failed state */
.dh-thankyou__failed {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.dh-thankyou__failed .dh-thankyou__title { color: #8b3a30; }
.dh-thankyou__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

/* The order-details + customer-details blocks that WC renders below the
   thank-you template (via the woocommerce_thankyou action). Same width
   as the overview card above, bone-soft surface, no table chrome. */
.dh-thankyou .woocommerce-order-details,
.dh-thankyou .woocommerce-customer-details {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--bone-soft) !important;
  border-radius: var(--btn-radius) !important;
  padding: 1.5rem 1.75rem !important;
  box-sizing: border-box !important;
}
.dh-thankyou .woocommerce-order-details__title,
.dh-thankyou .woocommerce-customer-details h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  color: var(--ink);
  margin: 0 0 1rem;
  letter-spacing: 0;
  text-transform: none;
}

/* Order details TABLE — strip ALL table chrome */
.dh-thankyou .woocommerce-table--order-details {
  width: 100% !important;
  border: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}
.dh-thankyou .woocommerce-table--order-details thead { display: none; }
.dh-thankyou .woocommerce-table--order-details tbody,
.dh-thankyou .woocommerce-table--order-details tfoot {
  border: none !important;
}
.dh-thankyou .woocommerce-table--order-details tr {
  border: none !important;
}
.dh-thankyou .woocommerce-table--order-details th,
.dh-thankyou .woocommerce-table--order-details td {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent;
  padding: 0.7rem 0;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
}

/* Line items */
.dh-thankyou .woocommerce-table--order-details .product-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.dh-thankyou .woocommerce-table--order-details .product-name a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.dh-thankyou .woocommerce-table--order-details .product-name a:hover {
  border-bottom-color: var(--ink-soft);
}
.dh-thankyou .woocommerce-table--order-details .product-name strong {
  display: inline-block;
  margin-left: 0.35rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.dh-thankyou .woocommerce-table--order-details .product-total {
  text-align: right;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.dh-thankyou .woocommerce-table--order-details .product-total .amount,
.dh-thankyou .woocommerce-table--order-details .product-total bdi {
  font: inherit; color: inherit;
}

/* Totals (tfoot) — Subtotal / Shipping / Total / Payment method */
.dh-thankyou .woocommerce-table--order-details tfoot th {
  padding: 0.55rem 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.dh-thankyou .woocommerce-table--order-details tfoot td {
  padding: 0.55rem 0;
  text-align: right;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.dh-thankyou .woocommerce-table--order-details tfoot td .amount,
.dh-thankyou .woocommerce-table--order-details tfoot td bdi {
  font: inherit; color: inherit; letter-spacing: 0;
}
/* The Total row gets emphasis: ink line above + bigger amount */
.dh-thankyou .woocommerce-table--order-details tfoot tr.order-total th,
.dh-thankyou .woocommerce-table--order-details tfoot tr.order-total td {
  padding-top: 0.95rem;
  border-top: 1px solid var(--ink) !important;
}
.dh-thankyou .woocommerce-table--order-details tfoot tr.order-total td {
  font-size: 1rem;
  font-weight: 700;
}
/* Native "(includes Rxx VAT)" small note under the total */
.dh-thankyou .woocommerce-table--order-details tfoot tr.order-total td .includes_tax,
.dh-thankyou .woocommerce-table--order-details tfoot small.includes_tax {
  display: block !important;
  margin-top: 0.2rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink-soft) !important;
}
/* Payment method row — normal size, not the small tracked totals style */
.dh-thankyou .woocommerce-table--order-details tfoot tr.payment_method th,
.dh-thankyou .woocommerce-table--order-details tfoot tr.payment_method td {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.dh-thankyou .woocommerce-table--order-details tfoot tr.payment_method th {
  font-weight: 700 !important;
}

/* Customer details (Billing / Shipping side-by-side) */
.dh-thankyou .woocommerce-customer-details .woocommerce-columns--addresses,
.dh-thankyou .woocommerce-customer-details .col2-set {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  margin: 0 !important;
  width: 100% !important;
}
.dh-thankyou .woocommerce-customer-details .woocommerce-column,
.dh-thankyou .woocommerce-customer-details .col-1,
.dh-thankyou .woocommerce-customer-details .col-2 {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  background: var(--bone);
  border-radius: var(--btn-radius);
  padding: 1.1rem 1.25rem 1.25rem;
}
.dh-thankyou .woocommerce-customer-details .woocommerce-column__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 0.5rem;
  padding: 0 0 0.4rem;
  border: none;
  border-bottom: 1px solid var(--line);
  letter-spacing: 0;
  text-transform: none;
}
.dh-thankyou .woocommerce-customer-details address {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 600px) {
  .dh-thankyou .woocommerce-customer-details .woocommerce-columns--addresses,
  .dh-thankyou .woocommerce-customer-details .col2-set {
    flex-direction: column !important;
  }
}

@media (max-width: 600px) {
  .dh-thankyou__overview { padding: 1.25rem 1.25rem; }
  .dh-thankyou__overview-value { font-size: 0.88rem; }
  .dh-thankyou__cta-row { flex-direction: column; align-items: stretch; }
}

/* Notices on the My Account pages (success / info / error). Force
   Montserrat so they match the rest of the account page typography, and
   cap the width to the form block beneath. */
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  line-height: 1.55 !important;
  max-width: 720px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* Error list items + the bold field name */
body.woocommerce-account .woocommerce-error li,
body.woocommerce-account .woocommerce-error li strong {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.woocommerce-account .woocommerce-info a,
body.woocommerce-account .woocommerce-message a {
  font-family: 'Montserrat', sans-serif !important;
}

/* =====================================================================
   My Account — Addresses page
   Two side-by-side cards (Billing + Shipping) with editorial layout.
   ===================================================================== */
.dh-addresses {
  width: 100%;
}
.dh-addresses__intro {
  margin-bottom: 1.5rem;
  text-align: center;
}
.dh-addresses__sub {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 50rem;
  text-align: center;
}
.dh-addresses__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 720px;
}
.dh-addresses__grid.has-two {
  grid-template-columns: 1fr 1fr;
}

.dh-address-card {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dh-address-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.dh-address-card__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dh-address-card__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dh-address-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.dh-address-card__edit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.4rem 0.7rem;
  border: 1.5px solid #b5a48a;
  border-radius: var(--btn-radius);
  background: var(--bone);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
.dh-address-card__edit:hover {
  color: var(--ink);
  background: #fff;
  border-color: var(--ink);
}
.dh-address-card__edit svg { display: block; }
.dh-address-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.dh-address-card__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}
.dh-address-card__address {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.65;
  margin: 0;
  white-space: pre-line;
}
.dh-address-card__empty {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}
.dh-address-card__add {
  align-self: flex-start;
  margin-top: 0.25rem;
}

@media (max-width: 720px) {
  .dh-addresses__grid.has-two { grid-template-columns: 1fr; }
  .dh-address-card { padding: 1.25rem 1.25rem 1.5rem; }
}

/* Edit-billing-address — "Also use these details as my shipping address" */
.dh-copy-to-shipping {
  margin: 1.5rem 0 1.5rem !important;
  padding: 0 !important;
}

/* =====================================================================
   Edit Address form (My Account → Addresses → Edit)
   Mirrors the checkout form styling: bone-soft card, beige inputs with
   dark beige outline, bold capitalised labels (NOT uppercase), red
   required asterisks. Plus the same +27 phone prefix via the shared JS.
   ===================================================================== */
body.woocommerce-account form[novalidate] {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 1.75rem 1.75rem 1.5rem;
  max-width: 720px;
}
body.woocommerce-account form[novalidate] > h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 1.25rem;
  text-align: left;
}
body.woocommerce-account .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.25rem;
  row-gap: 0.6rem;
  align-items: end;
}
body.woocommerce-account .woocommerce-address-fields .form-row {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}
body.woocommerce-account .woocommerce-address-fields .form-row-first { grid-column: 1; }
body.woocommerce-account .woocommerce-address-fields .form-row-last  { grid-column: 2; }
body.woocommerce-account .woocommerce-address-fields .form-row-wide,
body.woocommerce-account .woocommerce-address-fields > p {
  grid-column: 1 / -1;
}

/* Wrapper span around each input is inline by default — make it block
   so the input's width: 100% resolves to the form-row width. */
body.woocommerce-account .woocommerce-address-fields .woocommerce-input-wrapper {
  display: block !important;
  width: 100% !important;
}

/* Labels — bold, charcoal, capitalised (NOT uppercase), red asterisk */
body.woocommerce-account .woocommerce-address-fields label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
  text-transform: capitalize !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
body.woocommerce-account .woocommerce-address-fields label .required,
body.woocommerce-account .woocommerce-address-fields label abbr {
  color: #c0392b !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
  margin-left: 0.2rem !important;
}

/* Inputs / selects — beige fill, dark beige outline, soft focus */
body.woocommerce-account .woocommerce-address-fields .input-text,
body.woocommerce-account .woocommerce-address-fields select,
body.woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection--single {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  background: var(--bone) !important;
  border: 1.5px solid #b5a48a !important;
  border-radius: var(--btn-radius) !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
body.woocommerce-account .woocommerce-address-fields .input-text:focus,
body.woocommerce-account .woocommerce-address-fields select:focus {
  outline: none !important;
  border-color: var(--ink) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(42, 37, 32, 0.08) !important;
}

/* Native state/country dropdown override — show the underlying <select>
   so the OS-native picker is what the user sees, regardless of any
   Select2/selectWoo wrapper WC injected. */
body.woocommerce-account #billing_state,
body.woocommerce-account #shipping_state,
body.woocommerce-account #billing_country,
body.woocommerce-account #shipping_country,
body.woocommerce-account select#billing_state,
body.woocommerce-account select#shipping_state,
body.woocommerce-account select#billing_country,
body.woocommerce-account select#shipping_country {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
  height: 46.6px !important;
  position: static !important;
}
/* Kill every Select2 wrapper rendered inside the address form */
body.woocommerce-account .woocommerce-address-fields .select2-container,
body.woocommerce-account .woocommerce-address-fields .select2 { display: none !important; }

/* Phone +27 prefix group (injected by checkout-enhance.js) */
body.woocommerce-account .dh-phone-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}
body.woocommerce-account .dh-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  background: var(--bone-soft);
  border: 1.5px solid #b5a48a;
  border-right: 0;
  border-radius: var(--btn-radius) 0 0 var(--btn-radius);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  user-select: none;
}
body.woocommerce-account .dh-phone-group .input-text {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  flex: 1 1 auto;
  min-width: 0 !important;
}

/* Save address button — full-width ink button */
body.woocommerce-account form[novalidate] > p:last-of-type {
  margin: 1rem 0 0;
}
body.woocommerce-account form[novalidate] button[name="save_address"] {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--ink);
  border: none;
  border-radius: var(--btn-radius);
  padding: 0.95rem 2rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
body.woocommerce-account form[novalidate] button[name="save_address"]:hover {
  background: #1a1612;
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  body.woocommerce-account .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
  body.woocommerce-account .woocommerce-address-fields .form-row-first,
  body.woocommerce-account .woocommerce-address-fields .form-row-last { grid-column: 1; }
}

/* =====================================================================
   My Account — Orders page
   Stacked list of order cards: number + date + status pill (top row),
   total + actions (bottom row). Empty state shows a CTA card.
   ===================================================================== */
.dh-orders {
  width: 100%;
  max-width: 720px;
}
.dh-orders__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.dh-order {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.dh-order__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.dh-order__head-main {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.dh-order__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dh-order__number {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0;
  line-height: 1.2;
  transition: color 0.2s ease;
}
.dh-order__number:hover { color: var(--ink-soft); }
.dh-order__date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.dh-order__status {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--bone);
  border: 1px solid var(--stone);
}
/* Status colour accents — kept subtle, brand-aligned */
.dh-order__status--processing,
.dh-order__status--on-hold {
  color: #8a6a16;
  border-color: #d6c184;
  background: #f5ebca;
}
.dh-order__status--completed {
  color: #2f6b35;
  border-color: #a9cdaf;
  background: #e3efe5;
}
.dh-order__status--cancelled,
.dh-order__status--failed,
.dh-order__status--refunded {
  color: #8b3a30;
  border-color: #e0b3ad;
  background: #f5dcd7;
}

.dh-order__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 0.85rem;
}
.dh-order__totals {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.dh-order__total-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dh-order__total-amount {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.dh-order__total-amount .amount,
.dh-order__total-amount bdi { font: inherit; color: inherit; }
.dh-order__items {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.dh-order__items::before {
  content: '·';
  margin-right: 0.5rem;
  color: var(--stone);
}

.dh-order__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.dh-order__action {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid #b5a48a;
  border-radius: var(--btn-radius);
  background: var(--bone);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.dh-order__action:hover {
  color: var(--bone);
  background: var(--ink);
  border-color: var(--ink);
}
/* Primary "View" action */
.dh-order__action--view {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.dh-order__action--view:hover {
  background: #1a1612;
  color: var(--bone);
}

.dh-orders__pagination {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Empty state — no orders yet */
.dh-orders__empty {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 3rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.dh-orders__empty-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  color: var(--ink);
  margin: 0;
  letter-spacing: 0;
}
.dh-orders__empty-sub {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 32rem;
  margin: 0 0 0.5rem;
}

@media (max-width: 600px) {
  .dh-order { padding: 1rem 1.1rem; }
  .dh-order__head { gap: 0.5rem; }
  .dh-order__body { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   My Account — View Order page
   CSS-only styling of WC's default markup. No template overrides, so the
   layout can't be broken by missing/misordered elements.
   ===================================================================== */
/* Restyle the "Order #N was placed on …" intro paragraph as a hero card */
body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.25rem;
  max-width: 720px;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.55;
}
body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type mark {
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
  padding: 0 0.1em;
}

/* Order details + Customer details — bone-soft cards (max width matches
   the other account blocks). */
body.woocommerce-account .woocommerce-order-details,
body.woocommerce-account .woocommerce-customer-details {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 1.5rem 1.5rem 1.75rem;
  margin: 0 0 1.25rem;
  max-width: 720px;
}

/* Section headings ("Order details", "Billing address", "Shipping address") */
body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-customer-details h2,
body.woocommerce-account .woocommerce-column__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  color: var(--ink);
  margin: 0 0 1.25rem;
  padding: 0;
  border: none;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}

/* Order details table — strip ALL table chrome (WC default adds an outer
   border + row dividers via .shop_table). */
body.woocommerce-account .woocommerce-table--order-details {
  width: 100%;
  border: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent;
  border-radius: 0 !important;
  margin: 0 !important;
}
body.woocommerce-account .woocommerce-table--order-details thead { display: none; }
body.woocommerce-account .woocommerce-table--order-details tbody,
body.woocommerce-account .woocommerce-table--order-details tfoot {
  border: none !important;
}
body.woocommerce-account .woocommerce-table--order-details th,
body.woocommerce-account .woocommerce-table--order-details td {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent;
  padding: 0.7rem 0;
  vertical-align: top;
  font-family: 'Montserrat', sans-serif;
}
/* Line items (tbody) — no borders, just rhythm via padding */
body.woocommerce-account .woocommerce-table--order-details tbody tr {
  border: none;
}
body.woocommerce-account .woocommerce-table--order-details .product-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
body.woocommerce-account .woocommerce-table--order-details .product-name a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
body.woocommerce-account .woocommerce-table--order-details .product-name a:hover {
  border-bottom-color: var(--ink-soft);
}
body.woocommerce-account .woocommerce-table--order-details .product-name strong {
  display: inline-block;
  margin-left: 0.35rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-soft);
}
body.woocommerce-account .woocommerce-table--order-details .product-total,
body.woocommerce-account .woocommerce-table--order-details .product-quantity {
  text-align: right;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
body.woocommerce-account .woocommerce-table--order-details .product-total .amount,
body.woocommerce-account .woocommerce-table--order-details .product-total bdi {
  font: inherit; color: inherit;
}

/* Totals (tfoot) — Subtotal / Shipping / Total — no row borders */
body.woocommerce-account .woocommerce-table--order-details tfoot tr {
  border: none;
}
body.woocommerce-account .woocommerce-table--order-details tfoot th,
body.woocommerce-account .woocommerce-table--order-details tfoot td {
  padding: 0.55rem 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
body.woocommerce-account .woocommerce-table--order-details tfoot td {
  text-align: right;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.9rem;
  font-weight: 500;
}
body.woocommerce-account .woocommerce-table--order-details tfoot td .amount,
body.woocommerce-account .woocommerce-table--order-details tfoot td bdi {
  font: inherit; color: inherit; letter-spacing: 0;
}
/* The Total row's TH label stays a touch bigger so it reads as the final
   row; the amount matches the other amount sizes. */
body.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child th {
  font-size: 0.85rem;
  padding-top: 0.85rem;
  padding-bottom: 0;
}
body.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child td {
  font-size: 0.9rem;
  font-weight: 700;
  padding-top: 0.85rem;
  padding-bottom: 0;
}
/* Style WC's native "(includes R… VAT)" label that appears in the same
   cell as the order total amount. */
body.woocommerce-account .woocommerce-table--order-details tfoot tr.order-total td .includes_tax,
body.woocommerce-account .woocommerce-table--order-details tfoot small.includes_tax,
body.woocommerce-account .woocommerce-table--order-details .order-total small {
  display: block !important;
  margin-top: 0.2rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink-soft) !important;
}
body.woocommerce-account .woocommerce-table--order-details tfoot tr.order-total td .includes_tax .amount,
body.woocommerce-account .woocommerce-table--order-details tfoot tr.order-total td .includes_tax bdi,
body.woocommerce-account .woocommerce-table--order-details tfoot small.includes_tax .amount,
body.woocommerce-account .woocommerce-table--order-details tfoot small.includes_tax bdi {
  font: inherit !important;
  color: inherit !important;
  letter-spacing: 0 !important;
}
/* "Actions" row in tfoot hides the heading column for visual balance */
body.woocommerce-account .woocommerce-table--order-details .order-actions--heading {
  display: none;
}

/* Payment method row — render at the standard body size, not the small
   uppercase tracked size used by the other totals rows. */
body.woocommerce-account .woocommerce-table--order-details tfoot tr.payment_method th,
body.woocommerce-account .woocommerce-table--order-details tfoot tr.payment_method td {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
body.woocommerce-account .woocommerce-table--order-details tfoot tr.payment_method th {
  font-weight: 700 !important;
}
body.woocommerce-account .woocommerce-table--order-details .order-actions-button {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid #b5a48a;
  border-radius: var(--btn-radius);
  background: var(--bone);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
body.woocommerce-account .woocommerce-table--order-details .order-actions-button:hover {
  color: var(--bone);
  background: var(--ink);
  border-color: var(--ink);
}

/* Customer details — addresses side-by-side. Flexbox so the two child
   columns always sit on the same row regardless of WC's float defaults. */
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses,
body.woocommerce-account .woocommerce-customer-details .col2-set,
body.woocommerce-account .woocommerce-customer-details section.addresses,
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  align-items: stretch !important;
}
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses > *,
body.woocommerce-account .woocommerce-customer-details .col2-set > *,
body.woocommerce-account .woocommerce-customer-details section.addresses > *,
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns > * {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
}
body.woocommerce-account .woocommerce-customer-details .woocommerce-column,
body.woocommerce-account .woocommerce-customer-details .woocommerce-column--1,
body.woocommerce-account .woocommerce-customer-details .woocommerce-column--2,
body.woocommerce-account .woocommerce-customer-details .woocommerce-column--billing-address,
body.woocommerce-account .woocommerce-customer-details .woocommerce-column--shipping-address,
body.woocommerce-account .woocommerce-customer-details .col-1,
body.woocommerce-account .woocommerce-customer-details .col-2 {
  background: var(--bone) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--btn-radius) !important;
  padding: 1.75rem 1.75rem 1.85rem !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}
/* Section heading: small uppercase eyebrow — quiet label that lets the
   address itself be the focus. */
body.woocommerce-account .woocommerce-customer-details .woocommerce-column__title {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  margin: 0 0 1rem !important;
  padding: 0 0 0.85rem !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
}
body.woocommerce-account .woocommerce-customer-details address {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}
/* First line of the address (recipient name) — slightly heavier so the
   eye lands on it first. */
body.woocommerce-account .woocommerce-customer-details address::first-line {
  font-weight: 600;
}
/* Pretty up the Billing-side email + phone lines if present */
body.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--email,
body.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--phone {
  margin: 0 !important;
  padding: 0 !important;
}
body.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--email a,
body.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--phone a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
body.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--email a:hover,
body.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--phone a:hover {
  border-bottom-color: var(--ink-soft);
}

@media (max-width: 600px) {
  body.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: 1fr !important;
  }
}
body.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--email::before,
body.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--phone::before {
  display: none;
}
body.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--email,
body.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--phone {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  color: var(--ink);
  margin: 0.5rem 0 0;
  padding: 0;
}

@media (max-width: 720px) {
  body.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   My Account — Account Details (edit-account) page
   CSS-only styling of WC's default form-edit-account.php markup.
   ===================================================================== */
/* Account details form now uses the same markup as edit-address —
   .woocommerce-EditAccountForm wraps a .woocommerce-address-fields block,
   so all sizing/spacing comes from the address-fields rules below.
   We just want the OUTER form to NOT add its own card chrome (the inner
   .woocommerce-address-fields renders the bone-soft card). */
body.woocommerce-account .woocommerce-EditAccountForm {
  background: transparent;
  padding: 0;
  max-width: none;
  display: block;
}
/* Top-align rows in the account form so the password strength meter only
   extends the row downward without dragging the paired field with it.
   (The address form keeps align-items: end so Apartment's label-less
   input aligns with Street Address.) */
body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-address-fields__field-wrapper {
  align-items: start;
}

/* WC's password strength meter ("weak / medium / strong") + hint text.
   In normal flow beneath the input so the save-changes button moves down
   when the meter appears — the meter and hint stack cleanly, no overlap. */
body.woocommerce-account .woocommerce-password-strength {
  display: block !important;
  margin: 0.3rem 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.2;
}
/* Status-colour cues */
body.woocommerce-account .woocommerce-password-strength.bad,
body.woocommerce-account .woocommerce-password-strength.short { color: #c0392b !important; }
body.woocommerce-account .woocommerce-password-strength.good { color: #8a6a16 !important; }
body.woocommerce-account .woocommerce-password-strength.strong { color: #2f6b35 !important; }

/* WC's "Hint:" text — sits below the strength label in normal flow. */
body.woocommerce-account .woocommerce-password-hint {
  display: block !important;
  margin: 0.3rem 0 0 !important;
  padding: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  color: var(--ink-soft) !important;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

/* Wrapper added by account-enhance.js around password inputs so the eye
   toggle can be absolute-positioned inside the input box. */
body.woocommerce-account .dh-pw-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  line-height: 0;
}
body.woocommerce-account .dh-pw-wrap input[type="password"],
body.woocommerce-account .dh-pw-wrap input[type="text"] {
  padding-right: 2.75rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
body.woocommerce-account .dh-pw-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 0.5rem !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  color: var(--ink-soft) !important;
  border-radius: 6px;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2;
  transition: color 0.2s ease, background 0.2s ease;
}
body.woocommerce-account .dh-pw-toggle:hover { color: var(--ink) !important; background: rgba(42,37,32,0.05) !important; }
body.woocommerce-account .dh-pw-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
body.woocommerce-account .dh-pw-toggle svg { display: block; pointer-events: none; }

/* Add breathing room before the "Save changes" button row. */
body.woocommerce-account .woocommerce-address-fields > p:last-of-type {
  margin-top: 1.5rem;
}

/* Save button — share the same selector pattern address-fields uses for
   button[name="save_address"], plus our save_account_details button. */
body.woocommerce-account .woocommerce-address-fields button[name="save_account_details"] {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--ink);
  border: none;
  border-radius: var(--btn-radius);
  padding: 0.95rem 2rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
body.woocommerce-account .woocommerce-address-fields button[name="save_account_details"]:hover {
  background: #1a1612;
  transform: translateY(-1px);
}
/* Small inline hint inside a label, e.g. "(leave blank to leave unchanged)" */
body.woocommerce-account .woocommerce-address-fields label .form-row__hint {
  display: inline;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.35rem;
}

/* OLD ATTEMPT — keep selectors here in case the templates are re-added.
   These rules harmlessly match nothing right now. */
.dh-view-order { margin-bottom: 1.5rem; }
.dh-view-order__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.dh-view-order__head-main {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.dh-view-order__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dh-view-order__number {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  color: var(--ink);
  margin: 0;
  letter-spacing: 0;
  line-height: 1.1;
}
.dh-view-order__date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.dh-view-order__section-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  color: var(--ink);
  margin: 1.5rem 0 0.85rem;
  letter-spacing: 0;
  text-transform: none;
}
.dh-view-order__notes {
  margin-top: 1rem;
}
.dh-view-order__notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.dh-view-order__note {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 0.85rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.55;
}
.dh-view-order__note-time {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.dh-view-order__note-body p { margin: 0; }

/* Order detail items + totals */
.dh-order-detail {
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  padding: 1.5rem 1.5rem 1.25rem;
  margin-bottom: 1.25rem;
}
.dh-order-detail .dh-view-order__section-title {
  margin-top: 0;
  margin-bottom: 1rem;
}
.dh-order-detail__items {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.dh-order-detail__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.dh-order-detail__item:first-child { padding-top: 0; }
.dh-order-detail__item:last-child  { border-bottom: 0; padding-bottom: 1rem; }

.dh-order-detail__thumb {
  position: relative;
  width: 72px;
  height: 72px;
  background: var(--bone);
  border-radius: var(--btn-radius);
}
.dh-order-detail__thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 0.4rem;
  box-sizing: border-box;
  border-radius: var(--btn-radius);
  display: block;
}
.dh-order-detail__qty {
  position: absolute;
  top: -8px; right: -8px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bone-soft);
  z-index: 2;
}
.dh-order-detail__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.dh-order-detail__brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dh-order-detail__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.2s ease;
}
.dh-order-detail__name:hover { color: var(--ink-soft); }
.dh-order-detail__price {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.dh-order-detail__price .amount,
.dh-order-detail__price bdi { font: inherit; color: inherit; }

.dh-order-detail__totals {
  margin: 0;
  padding-top: 0.5rem;
}
.dh-order-detail__total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.dh-order-detail__total-row dt { margin: 0; }
.dh-order-detail__total-row dd {
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}
.dh-order-detail__total-row dd .amount,
.dh-order-detail__total-row dd bdi { font: inherit; color: inherit; letter-spacing: 0; }
.dh-order-detail__total-row--order_total {
  border-top: 1px solid var(--line);
  margin-top: 0.4rem;
  padding-top: 0.75rem;
}
.dh-order-detail__total-row--note {
  border-top: 1px solid var(--line);
  margin-top: 0.6rem;
  padding-top: 0.75rem;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.25rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  font-size: 0.88rem;
}
.dh-order-detail__total-row--note dt {
  font-size: 0.65rem;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}

.dh-order-detail__actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Customer details card group */
.dh-order-customer { margin-bottom: 1.5rem; }
.dh-order-customer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.dh-order-customer__grid.has-two { grid-template-columns: 1fr 1fr; }

.dh-order-customer__meta {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}
.dh-order-customer__meta li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.dh-order-customer__meta-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-width: 36px;
}
.dh-order-customer__meta-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.dh-order-customer__meta-value:hover { border-bottom-color: var(--ink); }

@media (max-width: 720px) {
  .dh-order-customer__grid.has-two { grid-template-columns: 1fr; }
  .dh-order-detail { padding: 1.25rem 1.25rem 1rem; }
}

/* Promotions page — tighter top spacing so the "This Season's Edit"
   eyebrow sits closer to the nav. */
body.page-template-page-promotions .page-content { padding-top: 0; }
body.page-template-page-promotions .section-header {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* =====================================================================
   PROMOTIONS PAGE — editorial vertical stack of brand promo blocks.
   Each block alternates visual / copy left↔right for rhythm; horizontal
   hairlines between blocks. Matches the DermHaus brand voice.
   ===================================================================== */
.dh-promo-stack {
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
}
.dh-promo-block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 3rem;
  padding: 2rem 3rem;
  background: var(--bone-soft);
  border-radius: var(--btn-radius);
  margin-bottom: 1.25rem;
}
.dh-promo-block:last-child { margin-bottom: 0; }

/* Alternate the layout — even rows flip so visuals zig-zag down the page. */
.dh-promo-block:nth-child(even) .dh-promo-block__visual { order: 2; }
.dh-promo-block:nth-child(even) .dh-promo-block__copy   { order: 1; text-align: right; }

.dh-promo-block__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 1rem;
  aspect-ratio: 1 / 1;
  max-height: 280px;
  overflow: visible;
}
.dh-promo-block__product-link { display: contents; }
.dh-promo-block__product {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dh-promo-block__product-link:hover .dh-promo-block__product { transform: scale(1.03); }

.dh-promo-block__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.dh-promo-block:nth-child(even) .dh-promo-block__copy { align-items: flex-end; }

.dh-promo-block__logo {
  height: 36px;
  max-width: 220px;
  width: auto;
  margin-bottom: 1.5rem;
  object-fit: contain;
}
.dh-promo-block__wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--ink);
  margin-bottom: 1.25rem;
  letter-spacing: 0;
}
.dh-promo-block__discount {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 1rem;
  letter-spacing: 0;
}
.dh-promo-block__tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
  line-height: 1.5;
  max-width: 30rem;
}
.dh-promo-block__terms {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.75rem;
  opacity: 0.75;
}
.dh-promo-block__cta { margin-top: 0.5rem; }

.dh-promo-terms-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
  margin: 2rem auto 5rem;
}

@media (max-width: 768px) {
  .dh-promo-stack { padding: 0 1rem; margin-bottom: 2.5rem; }
  .dh-promo-block {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem 1.75rem;
    margin-bottom: 1rem;
  }
  /* Reset alternating: on mobile, always visual-on-top, copy-below,
     left-aligned. */
  .dh-promo-block:nth-child(even) .dh-promo-block__visual { order: 0; }
  .dh-promo-block:nth-child(even) .dh-promo-block__copy {
    order: 1;
    text-align: left;
    align-items: flex-start;
  }
  .dh-promo-block__visual {
    padding: 1rem;
    aspect-ratio: 1 / 1;
    max-height: 50vh;
  }
  .dh-promo-block__logo { height: 26px; margin-bottom: 0.75rem; }
  .dh-promo-block__wordmark { font-size: 1.3rem; margin-bottom: 0.5rem; }
  .dh-promo-block__discount { font-size: 2rem; margin-bottom: 0.5rem; }
  .dh-promo-block__tagline { font-size: 1rem; margin-bottom: 0.5rem; }
  .dh-promo-block__terms { font-size: 0.62rem; margin-bottom: 1.25rem; }
  .dh-promo-block__cta { width: 100%; text-align: center; }

  body.page-template-page-promotions .section-header {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
  }
  .dh-promo-terms-note { margin: 1.5rem auto 3rem; padding: 0 1rem; }
}
@media (max-width: 480px) {
  .dh-promo-stack { padding: 0 0.75rem; }
  .dh-promo-block { padding: 1.25rem 1rem 1.5rem; }
  .dh-promo-block__discount { font-size: 1.7rem; }
  .dh-promo-block__tagline { font-size: 0.95rem; }
}

/* ============================================================
   FLOATING WHATSAPP CTA — pinned bottom-right, hidden on the
   home page, cart, checkout, order-received, my-account and
   contact (those exclusions are gated in footer.php). Also
   self-hides once the footer enters the viewport (.is-hidden,
   toggled by the IntersectionObserver in footer.php).
   ============================================================ */
.dh-wa-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1050; /* under the mini-cart drawer (1100), over normal page chrome */
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px -10px rgba(42, 37, 32, 0.55),
              0 2px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              background 0.2s ease, opacity 0.25s ease;
}
.dh-wa-fab:hover,
.dh-wa-fab:focus-visible {
  background: #1a1612;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(42, 37, 32, 0.6),
              0 3px 8px rgba(0, 0, 0, 0.14);
}
.dh-wa-fab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.dh-wa-fab svg { display: block; }

/* Footer-in-view hide state. Translated downward + faded so the FAB
   doesn't compete with the footer's own social row (which already
   includes WhatsApp). */
.dh-wa-fab.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

@media (max-width: 600px) {
  .dh-wa-fab {
    right: 1rem;
    bottom: 1rem;
    width: 50px;
    height: 50px;
  }
  .dh-wa-fab svg { width: 24px; height: 24px; }
}

/* ============================================================
   ABOUT PAGE — three editorial chapters, image + text per section,
   image side alternates desktop, image stacks above text mobile.
   ============================================================ */
.about-page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 8rem;
}

/* About hero with the kitchen-table image as a full-width band
   background. Now rendered as a sibling of .page-content (outside it
   in the markup) so it spans the body's full width without fighting
   any parent padding. Holds the "About" title and the DermHaus
   wordmark (inverted to bone via filter) stacked centred. */
.about-hero {
  width: 100%;
  margin: 0;
  padding: 6rem 2rem;
  overflow: hidden;
  text-align: center;
  background-image: url('assets/img/about-hero.jpg');
  background-size: cover;
  background-position: center 65%;
  background-repeat: no-repeat;
}
.about-hero__title {
  margin: 0 0 1.5rem;
  color: var(--bone) !important;
  text-shadow: 0 2px 18px rgba(42, 37, 32, 0.45);
}
.about-hero__logo {
  display: inline-block;
  height: 42px;
  width: auto;
  /* brightness(0) collapses any colour to pure black, then invert(1)
     flips that to pure white — net result: the SVG renders as bone
     regardless of its original ink fill. */
  filter: brightness(0) invert(1);
  /* Subtle ink shadow so the white wordmark still reads on lighter
     patches of the photo (like the linen). */
  filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(42, 37, 32, 0.35));
}
@media (max-width: 768px) {
  .about-hero { padding: 4rem 1.5rem; }
  .about-hero__logo { height: 32px; }
}
.about-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 1.25rem;
  letter-spacing: 0;
}
.about-hero__sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

.about-section {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
  margin: 0;
  padding: 3rem 0;
}
/* Each section's image as a very faint full-width backdrop. The
   inline `--about-bg` variable on the section (set from PHP) feeds
   this rule; if the variable is unset (no image), nothing renders. */
.about-section::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Bleed past the page-content padding so the background fills the
     full viewport, not just the inner content column. */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background-image: var(--about-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.16;
  z-index: -1;
  pointer-events: none;
}
.about-section:not([style*="--about-bg"])::before { display: none; }
.about-section:last-of-type { margin-bottom: 0; }
.about-section--reversed .about-section__media   { order: 2; }
.about-section--reversed .about-section__content { order: 1; }

.about-section__media {
  position: relative;
  /* min-height: 0 + height: 100% lets the image fill the grid cell
     (which is already `align-items: stretch` so the cell takes the
     text column's full height). */
  height: 100%;
  min-height: 0;
}
.about-section__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

/* Centre the content column so when the text is shorter than the image
   it still reads as deliberately placed. */
.about-section__content {
  align-self: center;
}
.about-section__placeholder {
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(
      45deg,
      var(--bone-soft),
      var(--bone-soft) 12px,
      var(--bone) 12px,
      var(--bone) 24px
    );
  border: 1px solid var(--line);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
.about-section__placeholder-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--bone);
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.about-section__content {
  max-width: 540px;
}
.about-section__eyebrow {
  margin-bottom: 0.75rem;
}
.about-section__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 1.5rem;
  letter-spacing: 0.005em;
}
.about-section__body p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.about-section__body p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
  .about-page { padding: 0 4rem; }
  .about-section { gap: 3rem; }
}

@media (max-width: 768px) {
  .about-page { padding: 0 1.5rem; }
  /* No extra margin below the hero on mobile — it should butt directly
     against the first section's natural padding (the user explicitly
     asked for no gap here). */
  .about-hero { margin-bottom: 0; }

  .about-section {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin: 0;
  }
  /* On mobile the grid is single-column and stacked — the desktop
     "stretch to match text" rule would force the image to take the
     full text column height (which is huge). Restore the natural
     image aspect ratio on mobile. */
  .about-section__media { height: auto; }
  .about-section__img   { height: auto; aspect-ratio: 4 / 3; }
  /* Image always above text on mobile, regardless of desktop side */
  .about-section--reversed .about-section__media   { order: 0; }
  .about-section--reversed .about-section__content { order: 0; }
  .about-section__title { margin-bottom: 1.1rem; }
  .about-section__body p { font-size: 0.98rem; line-height: 1.75; }
}