/*
Theme Name:   dortokai Child
Description:  Child theme for Twenty Twenty-Five — Basalt design system
Template:     twentytwentyfive
Version:      1.9.0
Author:       dortokai
*/

/* ═══════════════════════════════════════════════════ TOKENS & RESET ══ */
:root {
  /* ── Basalt palette ────────────────────────────────────────────────── */
  --basalt:   #1a1714;   /* default background    */
  --bone:     #ebe9e3;   /* primary text & marks  */
  --azure:    #5fa3da;   /* accent · CTAs · marks */
  --ash:      #3a3833;   /* rules & separators    */
  --smoke:    #9d9a92;   /* muted text            */
  --surface:  #26221e;   /* raised cards          */
  --shell:    #f6f4ee;   /* inverse / light       */
  --abyss:    #0c0a09;   /* deepest contrast      */
  --bone-80:  rgba(235,233,227,.8);
  --bone-40:  rgba(235,233,227,.4);
  --bone-06:  rgba(235,233,227,.06);
  --bone-05:  rgba(235,233,227,.05);
  --danger:   #e05;
  --rating:   #FFC700;

  /* ── Backwards-compat aliases (old var names continue to work) ─────── */
  --c-dark:   var(--basalt);
  --c-dark2:  var(--surface);
  --c-dark3:  var(--abyss);
  --c-teal:   var(--azure);
  --c-teal2:  var(--azure);
  --c-white:  var(--bone);
  --c-off:    var(--shell);
  --c-muted:  var(--smoke);
  --c-border: var(--ash);

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --ff:           var(--font-body);   /* backwards compat */

  /* ── Misc ──────────────────────────────────────────────────────────── */
  --radius: 0;
  --shadow: 0 4px 32px rgba(0,0,0,.45);
  --trans:  .25s ease;
  --max:    1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body) !important;
  background: var(--basalt) !important;
  color: var(--bone) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: var(--font-body); cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ══════════════════════════════════ HIDE TT25 NATIVE HEADER/FOOTER ══ */
header.wp-block-template-part,
footer.wp-block-template-part {
  display: none !important;
}
.wp-site-blocks {
  padding-top: 0 !important;
  min-height: 60vh;
}

/* ═════════════════════════════════════════════ 1. ANNOUNCEMENT BAR ══ */
#drtk-ann {
  background: var(--azure) !important;
  color: var(--basalt) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  line-height: 1.4 !important;
  text-align: center;
  padding: 9px 16px !important;
  position: relative;
  z-index: 1000;
  overflow: hidden;
  max-height: 60px;
  transition: max-height .4s ease, opacity .4s ease, padding .4s ease;
}
#drtk-ann.hidden {
  max-height: 0;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.drtk-ann__slides { display: flex; flex-direction: column; }
.drtk-ann__slide  { display: none; }
.drtk-ann__slide.active { display: block; }
/* High-specificity lock — beats .woocommerce span on product pages */
#drtk-ann,
#drtk-ann span {
  color: var(--basalt) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  line-height: 1.4 !important;
}

/* ═════════════════════════════════════════════════ 2. HEADER / NAV ══ */
#drtk-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--basalt);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
#drtk-header.scrolled {
  border-bottom-color: var(--ash);
}
.drtk-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
}
.drtk-nav__logo {
  display: inline-flex;
  align-items: center;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  text-decoration: none !important;
}
.drtk-logo-img {
  display: block !important;
  height: 26px !important;
  width: auto !important;
  max-width: none !important;
  flex-shrink: 0;
}
.drtk-nav .drtk-logo-img {
  height: 22px !important;
}
.drtk-footer__brand .drtk-logo-img {
  height: 32px;
}

.drtk-nav__links {
  display: flex;
  align-items: center;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.drtk-nav__links a {
  font-size: 13px;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--smoke) !important;
  transition: color var(--trans);
  letter-spacing: .01em;
  text-decoration: none !important;
}
.drtk-nav__links a:hover { color: var(--bone) !important; }

.drtk-nav__right {
  display: flex;
  align-items: center;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  gap: 16px;
}
.drtk-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--smoke) !important;
  transition: color var(--trans);
  padding: 8px 0;
  text-decoration: none !important;
}
.drtk-cart-btn:hover { color: var(--bone) !important; }
.drtk-cart-count {
  position: absolute;
  top: 2px;
  right: -10px;
  background: var(--azure);
  color: var(--basalt);
  font-size: 10px;
  font-weight: 700;
  border-radius: 0;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.drtk-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 0;
}
.drtk-burger span {
  display: block;
  height: 2px;
  background: var(--bone);
  transition: transform .3s, opacity .3s;
}
.drtk-nav__drawer {
  display: none;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--ash);
}
.drtk-nav__drawer.open { display: flex; }
.drtk-nav__drawer a {
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 400;
  color: var(--smoke) !important;
  border-bottom: 1px solid var(--ash);
  text-decoration: none !important;
  transition: color var(--trans);
}
.drtk-nav__drawer a:hover { color: var(--bone) !important; }

/* ═══════════════════════════════════════════════════════ 3. FOOTER ══ */
.drtk-footer {
  background: var(--surface);
  border-top: 1px solid var(--ash);
  padding: 56px 0 32px;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.6 !important;
}
.drtk-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.drtk-footer__brand p {
  font-size: 13px;
  font-family: var(--font-body) !important;
  color: var(--smoke);
  line-height: 1.7;
  margin-top: 12px;
  max-width: 240px;
}
.drtk-footer__col-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: var(--font-mono) !important;
  color: var(--smoke);
  margin-bottom: 16px;
}
.drtk-footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  margin: 0;
}
.drtk-footer__col ul li a {
  font-size: 13px;
  font-family: var(--font-body) !important;
  color: var(--bone-80) !important;
  transition: color var(--trans);
  text-decoration: none !important;
}
.drtk-footer__col ul li a:hover { color: var(--bone) !important; }
.drtk-footer__bottom {
  border-top: 1px solid var(--ash);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.drtk-footer__copy {
  font-size: 11px;
  color: var(--smoke);
  font-family: var(--font-mono) !important;
  letter-spacing: .04em;
}
.drtk-footer__legal { display: flex; gap: 20px; }
.drtk-footer__legal a {
  font-size: 11px;
  color: var(--smoke) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: .04em;
  transition: color var(--trans);
  text-decoration: none !important;
}
.drtk-footer__legal a:hover { color: var(--bone) !important; }

/* ══════════════════════════════════════ 4. INNER PAGE CONTENT WRAPPER ══ */
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > main {
  max-width: calc(var(--max) + 48px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 56px 24px 100px !important;
}

/* Global heading + paragraph reset */
h1, h2, h3, h4, h5, h6 {
  color: var(--bone) !important;
  font-family: var(--font-body) !important;
  margin-top: 0;
}
h1, h2 { font-family: var(--font-display) !important; }
p { color: var(--bone-80); margin-top: 0; }

/* ── Page titles (shop, cart, account…) ── */
.woocommerce-products-header {
  border-bottom: 1px solid var(--ash);
  padding-bottom: 20px;
  margin-bottom: 36px !important;
}
.woocommerce-products-header__title,
.woocommerce-page h1.page-title,
.entry-title,
.page-title {
  font-size: clamp(24px, 3.5vw, 40px) !important;
  font-weight: 500 !important;
  letter-spacing: -.025em !important;
  line-height: 1.1 !important;
  color: var(--bone) !important;
  font-family: var(--font-display) !important;
  margin: 0 !important;
}
.woocommerce-breadcrumb { margin-bottom: 28px !important; }

/* ══════════════════════════════════════ 5. WOOCOMMERCE DARK THEME ══ */

/* ── Global content typography baseline ────────────────────────────── */
.woocommerce,
.woocommerce-page,
.wc-block-checkout,
.wc-block-cart,
.wp-block-post-content,
.entry-content,
.page-content {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--bone) !important;
}
.woocommerce p,
.woocommerce-page p,
.woocommerce li,
.woocommerce span,
.wc-block-checkout p,
.wp-block-post-content p,
.wp-block-post-content li,
.entry-content p,
.entry-content li {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--bone-80) !important;
}

/* Heading scale */
.woocommerce h1, .woocommerce-page h1,
.wp-block-post-content h1, .entry-content h1 {
  font-size: clamp(22px, 3vw, 32px) !important;
  font-weight: 500 !important;
  letter-spacing: -.025em !important;
  line-height: 1.1 !important;
  color: var(--bone) !important;
  font-family: var(--font-display) !important;
}
.woocommerce h2, .woocommerce-page h2,
.wp-block-post-content h2, .entry-content h2 {
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
  color: var(--bone) !important;
  font-family: var(--font-display) !important;
}
.woocommerce h3, .woocommerce-page h3,
.wp-block-post-content h3, .entry-content h3 {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  line-height: 1.3 !important;
  color: var(--bone) !important;
  font-family: var(--font-body) !important;
}
.woocommerce h4, .woocommerce h5, .woocommerce h6,
.woocommerce-page h4, .woocommerce-page h5, .woocommerce-page h6,
.wp-block-post-content h4, .wp-block-post-content h5, .wp-block-post-content h6,
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--bone) !important;
  font-family: var(--font-body) !important;
}

/* Links within WooCommerce content (not buttons) */
.woocommerce a:not([class*="button"]):not(.add_to_cart_button):not(.single_add_to_cart_button):not(.drtk-coming-soon__btn):not(.drtk-waitlist__alt):not(.sa-credit) {
  color: var(--bone-80) !important;
  text-decoration: none !important;
}
.woocommerce a:not([class*="button"]):not(.add_to_cart_button):not(.single_add_to_cart_button):not(.drtk-coming-soon__btn):not(.drtk-waitlist__alt):not(.sa-credit):hover {
  color: var(--azure) !important;
}

/* ── Footer: lock styles against WooCommerce overrides ────────────── */
.woocommerce .drtk-footer__col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce .drtk-footer__brand p {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #9d9a92 !important;
}
.woocommerce .drtk-footer__col-title {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #9d9a92 !important;
  letter-spacing: .14em !important;
}
.woocommerce .drtk-footer__col ul li a,
.woocommerce .drtk-footer__col ul li a:visited {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #ebe9e3cc !important;
  text-decoration: none !important;
}
.woocommerce .drtk-footer__col ul li a:hover {
  color: #ebe9e3 !important;
}
.woocommerce .drtk-footer__copy {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #9d9a92 !important;
}
.woocommerce .drtk-footer__legal a,
.woocommerce .drtk-footer__legal a:visited {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #9d9a92 !important;
  text-decoration: none !important;
}
.woocommerce .drtk-footer__legal a:hover {
  color: #ebe9e3 !important;
}

/* Tab panel body text */
.woocommerce .woocommerce-tabs .panel p,
.woocommerce .woocommerce-tabs .panel li,
.woocommerce .woocommerce-tabs .panel td,
.woocommerce .woocommerce-tabs .panel th {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--bone-80) !important;
  font-family: var(--font-body) !important;
}

/* Reviews inside tab — card-styled list.
   The Gravatar avatar is unhooked in functions.php (`woocommerce_review_display_gravatar`)
   rather than hidden with CSS — reviewers essentially never have a Gravatar, so it was
   always the same grey "mystery man" icon, plus a wasted request to secure.gravatar.com.
   `.comment-text` below absorbs the 50px avatar gutter + boxed-panel styling that WooCommerce's
   default CSS gives it (it assumed the avatar was still there); `.comment_container` becomes
   the actual card instead, matching the Basalt card pattern used by `.drtk-review-card`. */
.woocommerce #reviews ol.commentlist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce #reviews .commentlist li { margin: 0 0 16px !important; }
.woocommerce #reviews .commentlist li .comment_container {
  background: var(--surface) !important;
  border: 1px solid var(--ash) !important;
  border-radius: 0 !important;
  transition: border-color var(--trans);
}
.woocommerce #reviews .commentlist li .comment_container:hover { border-color: var(--smoke) !important; }
.woocommerce #reviews .comment-text {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 20px !important;
  /* Grid instead of the plugin's default stacked flow: rating/meta/description are
     pinned to explicit rows 1/2/3 in column 1, and the media block spans exactly
     those same rows in column 2 — so it reads as a panel next to the text, top-aligned
     with the rating, rather than a block underneath it. Leaving the rows on "auto"
     (unassigned) let the grid's auto-placement give media row 1 to itself and push
     the text down into rows 2+, which is why they're pinned explicitly here. */
  display: grid !important;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  align-items: start;
}
.woocommerce #reviews .comment-text > * { grid-column: 1; }
.woocommerce #reviews .comment-text > .star-rating { grid-row: 1; }
.woocommerce #reviews .comment-text > p.meta { grid-row: 2; }
.woocommerce #reviews .comment-text > .description { grid-row: 3; }
.woocommerce #reviews .star-rating {
  float: none !important;
  margin: 0 0 12px !important;
}
.woocommerce #reviews .comment-text p.meta { margin: 0 0 12px !important; font-size: 13px !important; }
.woocommerce #reviews .comment-text p,
.woocommerce #reviews .commentlist li .comment-text,
.woocommerce #reviews .description {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--bone-80) !important;
}
.woocommerce #reviews .description p:last-child { margin-bottom: 0 !important; }

/* Review media (photos/videos) — right column, top-aligned with the rating,
   sized up well past the plugin's default 75px thumbnails. */
.woocommerce #reviews .comment-text > .cr-comment-images {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  justify-self: end;
  max-width: 290px;
  margin: 0 !important;
}
.woocommerce #reviews div.iv-comment-image img,
.woocommerce #reviews .cr-comment-video video.cr-video-a {
  width: 130px !important;
  height: 130px !important;
  max-width: 130px !important;
  max-height: 130px !important;
}
.woocommerce #reviews .cr-comment-videoicon {
  width: 44px !important;
  margin-top: -22px !important;
  margin-left: -22px !important;
}
/* Video lightbox: the plugin expands a review video in place by adding
   `cr-comment-videos-modal` to this same `.cr-comment-images` element, turning
   it into a fixed full-viewport backdrop (position:fixed, 100vw/100vh — see
   the plugin's own frontend.css), and adds `cr-comment-video-modal` to the
   clicked video's wrapper to blow it up to 80% of that backdrop. Our
   `max-width: 290px` above was capping the backdrop itself, squashing it into
   a strip on the left instead of covering the screen; our forced 130px
   thumbnail size below was overriding the plugin's "fill the lightbox" video
   sizing so playback stayed thumbnail-sized even once expanded. Both need to
   stand down for the modal state, hence the higher-specificity resets here. */
.woocommerce #reviews .cr-comment-images.cr-comment-videos-modal {
  max-width: none !important;
}
.woocommerce #reviews .cr-comment-video.cr-comment-video-modal video.cr-video-a {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
@media (max-width: 700px) {
  .woocommerce #reviews .comment-text { grid-template-columns: 1fr; }
  .woocommerce #reviews .comment-text > .cr-comment-images {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start;
    max-width: none;
    margin-top: 12px !important;
  }
}
.woocommerce .woocommerce-review__author { font-weight: 500 !important; color: var(--bone) !important; font-size: 13px !important; }
.woocommerce .woocommerce-review__verified {
  color: var(--azure) !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-family: var(--font-mono) !important;
}
.woocommerce .woocommerce-review__dash,
.woocommerce .woocommerce-review__published-date {
  color: var(--smoke) !important;
  font-size: 12px !important;
  font-family: var(--font-mono) !important;
}

/* Result count & ordering */
.woocommerce-result-count,
.woocommerce-ordering { font-size: 13px !important; font-family: var(--font-body) !important; }

/* ── Breadcrumb — hidden ── */
.woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
  display: none !important;
}

/* ── Notices & banners — all WooCommerce pages ─────────────────────
   Classic shortcode notices (.woocommerce-message / .woocommerce-error)
   Block notices (.wc-block-components-notice-banner)
   All variants: default / info / success / error / warning             */

/* Classic notices (product, cart, shortcode checkout) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
  background: var(--surface) !important;
  color: var(--bone) !important;
  border-top: 3px solid var(--ash) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message { border-top-color: var(--azure) !important; }
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error  { border-top-color: #cc1818 !important; }
.woocommerce-message a,
.woocommerce-info a { color: var(--azure) !important; }

/* Block notices — base */
.wc-block-components-notice-banner {
  background-color: var(--surface) !important;
  color: var(--bone) !important;
  border: 1px solid var(--ash) !important;
  border-left: 3px solid var(--ash) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Text content inside */
.wc-block-components-notice-banner__content,
.wc-block-components-notice-banner__summary {
  color: var(--bone) !important;
}
/* Dismiss button (×) */
.wc-block-components-notice-banner > .wc-block-components-button {
  color: var(--smoke) !important;
}
.wc-block-components-notice-banner > .wc-block-components-button:hover {
  color: var(--bone) !important;
  opacity: 1 !important;
}
/* Icon circle */
.wc-block-components-notice-banner > svg {
  background-color: var(--ash) !important;
  border-radius: 0 !important;
}
/* Variant: info */
.wc-block-components-notice-banner.is-info {
  background-color: var(--surface) !important;
  border-color: var(--ash) !important;
  border-left-color: var(--azure) !important;
}
.wc-block-components-notice-banner.is-info > svg { background-color: var(--azure) !important; }
/* Variant: success */
.wc-block-components-notice-banner.is-success {
  background-color: var(--surface) !important;
  border-color: var(--ash) !important;
  border-left-color: #4ab866 !important;
}
.wc-block-components-notice-banner.is-success > svg { background-color: #4ab866 !important; }
/* Variant: error */
.wc-block-components-notice-banner.is-error {
  background-color: var(--surface) !important;
  border-color: var(--ash) !important;
  border-left-color: #cc1818 !important;
}
.wc-block-components-notice-banner.is-error > svg { background-color: #cc1818 !important; }
/* Variant: warning */
.wc-block-components-notice-banner.is-warning {
  background-color: var(--surface) !important;
  border-color: var(--ash) !important;
  border-left-color: #f0b849 !important;
}
.wc-block-components-notice-banner.is-warning > svg { background-color: #f0b849 !important; }

/* Primary button visual styles → button system section (search "BUTTON SYSTEM") */

/* Inputs */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select,
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  line-height: 1.5 !important;
  background: var(--abyss) !important;
  color: var(--bone) !important;
  border: 1px solid var(--smoke) !important;
  border-radius: 0 !important;
}
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.wc-block-components-text-input input:focus {
  border-color: var(--azure) !important;
  box-shadow: 0 0 0 3px rgba(95,163,218,.15) !important;
  outline: none;
}
/* WC blocks textarea — the class sits directly on the <textarea> element */
.wc-block-components-textarea {
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  line-height: 1.5 !important;
  background-color: var(--abyss) !important;
  color: var(--bone) !important;
  border: 1px solid var(--smoke) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* WC sets color: #2b2d2f when the field has content — override */
.wc-block-components-textarea:not(:placeholder-shown) {
  color: var(--bone) !important;
}
/* Focus state */
.wc-block-components-textarea:focus {
  background-color: var(--abyss) !important;
  border-color: var(--azure) !important;
  box-shadow: 0 0 0 3px rgba(95,163,218,.15) !important;
  outline: none !important;
}
/* Browser autofill — override the forced white background via inset shadow.
   CSS variables don't resolve inside :-webkit-autofill, so hex values are used. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input input:-webkit-autofill:hover,
.wc-block-components-text-input input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0c0a09 inset !important;
  box-shadow: 0 0 0 1000px #0c0a09 inset !important;
  -webkit-text-fill-color: #ebe9e3 !important;
  caret-color: #ebe9e3 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
/* Verify-email autofill — hex values avoid CSS-variable resolution
   failures inside :-webkit-autofill; transition trick delays the
   browser's own background-color for 5000 s (effectively never) */
.woocommerce-verify-email input:-webkit-autofill,
.woocommerce-verify-email input:-webkit-autofill:hover,
.woocommerce-verify-email input:-webkit-autofill:focus,
.woocommerce-verify-email input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0c0a09 inset !important;
  box-shadow: 0 0 0 1000px #0c0a09 inset !important;
  -webkit-text-fill-color: #ebe9e3 !important;
  caret-color: #ebe9e3 !important;
  background-color: #0c0a09 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
.woocommerce label,
.wc-block-components-form label {
  color: var(--smoke) !important;
  font-size: 10px !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}

/* ─── Single product ──────────────────────────────────────────────── */

/* Align horizontal edges with header container */
body.single-product main.wp-block-group {
  max-width: var(--max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
body.single-product main.wp-block-group > .alignwide {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wp-block-woocommerce-product-meta { display: none !important; }
.woocommerce div.product {
  margin-bottom: 48px !important;
}

/* Square product gallery images */
.woocommerce div.product div.images .woocommerce-product-gallery__image > a,
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  display: block !important;
  aspect-ratio: 1 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce div.product div.images .woocommerce-product-gallery__image video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Gallery video slide — poster image + play button until tapped, then <video> */
.woocommerce div.product div.images .drtk-video-slide {
  position: relative !important;
}
/* Letterbox at native aspect ratio once playing — the poster/other slides stay
   square-cropped (cover), but a cropped video looks broken, so this one override
   goes to contain + a background fill for the resulting bars. Needs to out-specify
   the general img/video cover rule above, hence the repeated .woocommerce-product-gallery__image. */
.woocommerce div.product div.images .woocommerce-product-gallery__image.drtk-video-slide video {
  object-fit: contain !important;
  background: var(--surface) !important;
}
.drtk-video-slide__video { display: none !important; }
.drtk-video-slide.is-playing img,
.drtk-video-slide.is-playing .drtk-video-play { display: none !important; }
.drtk-video-slide.is-playing .drtk-video-slide__video { display: block !important; }
.drtk-video-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bone) !important;
  color: var(--basalt) !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background .2s !important;
}
.drtk-video-play:hover { background: var(--shell) !important; }
.drtk-video-play svg { width: 18px !important; height: 18px !important; }
/* Thumbnail strip */
.woocommerce div.product div.images .flex-control-thumbs { margin-top: 8px !important; }
.woocommerce div.product div.images .flex-control-thumbs li img {
  aspect-ratio: 1 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  opacity: .55;
  transition: opacity .2s;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active { opacity: 1; }

/* Desktop thumbnail strip — single horizontal scrollable row */
@media (min-width: 901px) {
  .woocommerce div.product div.images .flex-control-thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
    /* Fade edges — JS toggles .drtk-fade-left / .drtk-fade-right */
    --drtk-ml: black;
    --drtk-mr: black;
    -webkit-mask-image: linear-gradient(to right, var(--drtk-ml) 0%, black 12%, black 88%, var(--drtk-mr) 100%);
    mask-image: linear-gradient(to right, var(--drtk-ml) 0%, black 12%, black 88%, var(--drtk-mr) 100%);
  }
  .woocommerce div.product div.images .flex-control-thumbs.drtk-fade-left  { --drtk-ml: transparent; }
  .woocommerce div.product div.images .flex-control-thumbs.drtk-fade-right { --drtk-mr: transparent; }
  .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar { display: none !important; }
  .woocommerce div.product div.images .flex-control-thumbs li {
    flex-shrink: 0 !important;
    width: 72px !important;
    margin: 0 !important;
    float: none !important;
  }
}

/* Desktop: prev/next overlay arrows on product gallery image */
@media (min-width: 901px) {
  /* position:relative so JS-injected absolute buttons anchor here */
  .woocommerce div.product div.images .woocommerce-product-gallery {
    position: relative !important;
  }
  .drtk-gal-prev,
  .drtk-gal-next {
    position: absolute !important;
    /* top is set by JS (JS override beats stylesheet without !important on top) */
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--ash) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity .2s, border-color .2s !important;
    box-sizing: border-box !important;
  }
  .drtk-gal-prev { left: 12px !important; }
  .drtk-gal-next { right: 12px !important; }
  .drtk-gal-prev::after,
  .drtk-gal-next::after {
    content: '' !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 1.5px solid var(--bone) !important;
    border-right: 1.5px solid var(--bone) !important;
    flex-shrink: 0 !important;
  }
  .drtk-gal-prev::after { transform: translate(2px, 0) rotate(-135deg) !important; }
  .drtk-gal-next::after { transform: translate(-2px, 0) rotate(45deg) !important; }
  .woocommerce-product-gallery.drtk-gal-hovered .drtk-gal-prev,
  .woocommerce-product-gallery.drtk-gal-hovered .drtk-gal-next { opacity: 1 !important; }
  /* Hide FlexSlider's own nav — we provide our own arrows */
  .woocommerce-product-gallery .flex-direction-nav { display: none !important; }
  .drtk-gal-prev:hover,
  .drtk-gal-next:hover { border-color: var(--bone) !important; }
  .drtk-gal-prev.drtk-gal--disabled,
  .drtk-gal-next.drtk-gal--disabled { opacity: 0 !important; pointer-events: none !important; }
}

/* Summary column */
.woocommerce div.product .product_title {
  color: var(--bone) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 3.5vw, 36px) !important;
  font-weight: 500 !important;
  letter-spacing: -.025em !important;
  margin-bottom: 8px !important;
}
.woocommerce div.product .price,
.woocommerce div.product p.price {
  color: var(--bone) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  font-family: var(--font-mono) !important;
  margin-bottom: 16px !important;
}
/* Sale price — del (original) + ins (discounted) */
/* ── Product price — all variants (static + Interactivity API) ── */
.wc-block-components-product-price,
.wp-block-woocommerce-product-price .wc-block-components-product-price {
  font-size: 22px !important;
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  color: var(--smoke) !important;
  padding-left: 0 !important;
  --wp--preset--font-size--large: 22px;
}
/* del — old/original price */
.wc-block-components-product-price del,
.wc-block-components-product-price .wc-block-components-product-price__regular,
.woocommerce div.product .price del,
.woocommerce ul.products li.product .price del,
.wc-block-grid__product-price del {
  display: inline !important;
  vertical-align: baseline !important;
  line-height: 1 !important;
  font-family: var(--font-mono) !important;
  font-size: .78em !important;
  color: var(--smoke) !important;
  text-decoration: line-through !important;
  text-decoration-color: var(--smoke) !important;
  margin-right: 10px !important;
  background: none !important;
}
.wc-block-components-product-price del *,
.woocommerce div.product .price del * {
  text-decoration: inherit !important;
  display: inline !important;
}
/* ins — sale/current price */
.wc-block-components-product-price ins,
.wc-block-components-product-price .wc-block-components-product-price__value,
.wc-block-components-product-price .is-discounted,
.woocommerce div.product .price ins,
.woocommerce ul.products li.product .price ins,
.wc-block-grid__product-price ins {
  display: inline !important;
  vertical-align: baseline !important;
  line-height: 1 !important;
  font-family: var(--font-mono) !important;
  text-decoration: none !important;
  background: none !important;
  color: var(--azure) !important;
}
/* Override .woocommerce span rule which targets inner price spans directly */
.wc-block-components-product-price ins span,
.wc-block-components-product-price ins bdi,
.woocommerce div.product .price ins span,
.woocommerce div.product .price ins bdi {
  color: var(--azure) !important;
  font-size: inherit !important;
  font-family: var(--font-mono) !important;
  line-height: inherit !important;
}
.wc-block-components-product-price del span,
.wc-block-components-product-price del bdi,
.woocommerce div.product .price del span,
.woocommerce div.product .price del bdi {
  color: var(--smoke) !important;
  font-size: inherit !important;
  font-family: var(--font-mono) !important;
  line-height: inherit !important;
}
/* Regular (non-discounted) price */
.wc-block-components-product-price > .woocommerce-Price-amount,
.wc-block-components-product-price > .woocommerce-Price-amount span,
.wc-block-components-product-price > .woocommerce-Price-amount bdi,
.woocommerce div.product .price > .woocommerce-Price-amount,
.woocommerce div.product .price > .woocommerce-Price-amount span,
.woocommerce div.product .price > .woocommerce-Price-amount bdi {
  color: var(--bone) !important;
  font-size: inherit !important;
  font-family: var(--font-mono) !important;
  line-height: inherit !important;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p {
  color: var(--smoke) !important;
  line-height: 1.65 !important;
  font-size: 14px !important;
}
.woocommerce div.product form.cart {
  border-top: 1px solid var(--ash) !important;
  padding-top: 20px !important;
  margin-top: 20px !important;
}
.woocommerce div.product form.cart .quantity input {
  background: var(--surface) !important;
  color: var(--bone) !important;
  border: 1px solid var(--ash) !important;
  border-radius: 0 !important;
  text-align: center;
}

/* Coming soon CTA */
.drtk-coming-soon {
  border-top: 1px solid var(--ash);
  padding-top: 20px;
  margin-top: 20px;
}
.drtk-coming-soon__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--azure);
  margin: 0 0 10px;
}
.drtk-coming-soon__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--smoke);
  line-height: 1.6;
  margin: 0 0 20px;
}
.drtk-coming-soon__btn {
  display: inline-block;
  background: var(--bone) !important;
  color: var(--basalt) !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  padding: 14px 28px;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: background var(--trans);
}
.drtk-coming-soon__btn:hover {
  background: var(--shell) !important;
  color: var(--basalt) !important;
}

/* Launch waitlist (DK-09) — email capture replacing the Instagram DM CTA.
   Stacked rather than inline: the product summary column is narrow and the
   button label is a full sentence. !important throughout because these live
   inside body.woocommerce, whose input/button rules would otherwise win. */
.drtk-waitlist__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
}
/* The `.woocommerce input[type="email"]` block further up (0,2,1, !important)
   dresses checkout fields in abyss/smoke and outranks a plain class selector,
   so the capture is matched at (0,3,1) to keep it on the marketing treatment —
   surface/ash, same as the newsletter form it mirrors. */
.drtk-waitlist__input,
.woocommerce input.drtk-waitlist__input[type="email"] {
  width: 100%;
  background: var(--surface) !important;
  border: 1px solid var(--ash) !important;
  border-radius: 0 !important;
  padding: 13px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--bone) !important;
  outline: none;
  transition: border-color var(--trans);
}
.drtk-waitlist__input::placeholder,
.woocommerce input.drtk-waitlist__input[type="email"]::placeholder { color: var(--smoke) !important; }
.drtk-waitlist__input:focus,
.woocommerce input.drtk-waitlist__input[type="email"]:focus { border-color: var(--azure) !important; }
.drtk-waitlist__btn {
  background: var(--bone) !important;
  color: var(--basalt) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .03em;
  padding: 14px 24px !important;
  cursor: pointer;
  transition: background var(--trans);
}
.drtk-waitlist__btn:hover:not(:disabled) { background: var(--shell) !important; }
.drtk-waitlist__btn:disabled { opacity: .6; cursor: default; }
.drtk-waitlist__note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--smoke);
  margin: 12px 0 0;
}
/* Instagram DM kept, demoted to a text link under the capture. */
.drtk-waitlist__alt {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--smoke) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  transition: color var(--trans);
}
.drtk-waitlist__alt:hover { color: var(--bone) !important; }
.drtk-waitlist__success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 420px;
  padding: 18px;
  border: 1px solid var(--ash);
  animation: drtk-fadein .4s ease;
}
.drtk-waitlist__success svg { color: var(--azure); flex-shrink: 0; }
.drtk-waitlist__success p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--bone);
  line-height: 1.6;
  margin: 0;
}

/* Tabs */
.woocommerce .woocommerce-tabs ul.tabs { padding: 0 !important; border-bottom-color: var(--ash) !important; }
.woocommerce .woocommerce-tabs ul.tabs li {
  background: var(--surface) !important;
  border-color: var(--ash) !important;
  border-radius: 0 !important;
}
.woocommerce .woocommerce-tabs ul.tabs li a {
  color: var(--smoke) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}
.woocommerce .woocommerce-tabs ul.tabs li.active { background: var(--basalt) !important; }
.woocommerce .woocommerce-tabs ul.tabs li.active a { color: var(--bone) !important; }
.woocommerce .woocommerce-tabs .panel {
  background: var(--surface) !important;
  border-color: var(--ash) !important;
  color: var(--bone-80) !important;
  padding: 24px !important;
  border-radius: 0 !important;
}
/* Mobile: air between the product summary and the tabs.
   Every block on the single-product template carries margin 0 — the ~19px that
   reads as separation on desktop is not spacing at all, it is the height
   mismatch between the gallery column and the (shorter) summary column. Once
   the columns stack that slack disappears and the last element of the summary
   butts straight into the tabs: on the Txapel that is the "Est-ce un casque ?"
   accordion, whose border then sits flush against the tab strip and reads as
   one control.
   900px, not core's 781px: the stacking here is ours, from
   `body.single-product … .wp-block-columns.alignwide { flex-direction: column }`
   in the responsive section, which overrides core. Keep the two in step —
   pinned to 781px, the gap stayed 0 across the whole 782–900px band.
   Placed on the tabs rather than on .drtk-honest so the gap holds whatever the
   summary column happens to end with. */
@media (max-width: 900px) {
  .woocommerce .woocommerce-tabs { margin-top: 32px !important; }
}
/* Star rating (under the product title, and on each review in the list).
   WooCommerce draws the stars as glyphs — "sssss" for the empty row on
   .star-rating::before, "SSSSS" for the filled row on the inner span — both
   in its own icon font. The `.woocommerce span` body-font rule near the top
   of this file is (0,1,1) and hits that inner span, so the filled row fell
   back to Inter Tight and rendered as literal capital S's. Force the icon
   font back on both layers.
   Two markups need it: the classic `.star-rating` (review list, loops) and
   the block one under the product title (`__stars`, same span-overlay trick). */
.woocommerce .star-rating,
.woocommerce .star-rating::before,
.woocommerce .star-rating span,
.woocommerce .star-rating span::before,
.wc-block-components-product-rating__stars,
.wc-block-components-product-rating__stars::before,
.wc-block-components-product-rating__stars span,
.wc-block-components-product-rating__stars span::before {
  font-family: WooCommerce, star !important;
}
/* Same rule also forces line-height 1.6 on that span, giving the filled row a
   22.4px line box inside a 14px container — the stars landed ~4px low and read
   as a second row underneath. Inherit keeps overlay and base row on the same
   baseline whatever the container's line-height is. */
.woocommerce .star-rating span,
.woocommerce .star-rating span::before,
.wc-block-components-product-rating__stars span,
.wc-block-components-product-rating__stars span::before {
  line-height: inherit !important;
  font-size: inherit !important;
}
/* Base row = the 5 empty stars, overlay span = the filled ones clipped to the
   score. Both were gold, which made every rating look like 5/5. */
.woocommerce .star-rating::before,
.wc-block-components-product-rating__stars::before {
  color: var(--smoke) !important;
}
.woocommerce .star-rating span::before,
.wc-block-components-product-rating__stars span::before {
  color: var(--rating) !important;
}

/* Related / upsells sections — override TT25's 645px content-size constraint */
.woocommerce .related,
.woocommerce .upsells {
  --wp--style--global--content-size: 100%;
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 60px !important;
  padding-top: 40px !important;
  border-top: 1px solid var(--ash) !important;
}
.woocommerce .related::before,
.woocommerce .upsells::before,
.woocommerce .related ul.products::before,
.woocommerce .upsells ul.products::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
}
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-size: clamp(18px, 2.5vw, 24px) !important;
  font-weight: 400 !important;
  letter-spacing: -.025em !important;
  font-family: var(--font-display) !important;
  color: var(--bone) !important;
  margin-bottom: 24px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
/* Force grid regardless of columns-N class */
.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce .related ul.products li.product,
.woocommerce .upsells ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
/* On-sale badge */
.woocommerce span.onsale {
  background: var(--azure) !important;
  color: var(--basalt) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 6px 12px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.4 !important;
}

/* ─── Shop/archive ────────────────────── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 32px 0 !important;
}
.woocommerce ul.products li.product {
  background: var(--surface) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ash) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color .25s !important;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--bone) !important;
  transform: none !important;
  box-shadow: none !important;
}
.woocommerce ul.products li.product a {
  color: var(--bone) !important;
  text-decoration: none !important;
}
/* Square product thumbnails */
.woocommerce ul.products li.product a img {
  aspect-ratio: 1 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  transition: transform .6s ease !important;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.03) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--bone) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 14px 16px 4px !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .price {
  color: var(--smoke) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  padding: 2px 16px 14px !important;
  font-family: var(--font-mono) !important;
  letter-spacing: .02em !important;
}
/* Star rating in loop cards (shop grid, related, upsells) — WooCommerce's own
   .star-rating has no horizontal inset, so it sits flush with the card edge
   while the title/price above and below it are padded 16px. Margin (not
   padding) keeps its fixed 5.4em width intact so the star glyphs aren't
   squeezed. */
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .wc-block-components-product-rating__stars {
  margin-left: 16px !important;
}
/* Loop/upsell card button — layout only; visual styles from button system below */
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button {
  display: none !important;
}
.woocommerce-result-count { color: var(--smoke) !important; }
.woocommerce-ordering select {
  background: var(--surface) !important;
  color: var(--bone) !important;
  border: 1px solid var(--ash) !important;
  border-radius: 0 !important;
}
.woocommerce-products-header__title { color: var(--bone) !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--surface) !important;
  color: var(--bone) !important;
  border-color: var(--ash) !important;
  border-radius: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--bone) !important;
  color: var(--basalt) !important;
}

/* ─── Cart page: align horizontal edges with header container ── */
main[data-page="cart"] {
  max-width: var(--max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
/* Let .alignwide children fill the constrained main naturally */
main[data-page="cart"] > .alignwide {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ─── Checkout page: align horizontal edges with header container ── */
body.woocommerce-checkout main.wp-block-group {
  max-width: var(--max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
body.woocommerce-checkout main.wp-block-group > .alignwide {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Strip extra internal gutters from the checkout block itself */
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wc-block-checkout__inner-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Checkout sidebar sticky offset — clear the sticky header using the JS-computed var */
body.woocommerce-checkout .wc-block-checkout__sidebar {
  top: calc(var(--drtk-top-offset, 68px) + 20px) !important;
}

/* Checkout two-column gap — real layout is in sidebar-layout, not __inner-wrapper */
body.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
  padding-right: 48px !important;
  width: 60% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
body.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
  padding-left: 0 !important;
  width: 40% !important;
}
@media (max-width: 748px) {
  body.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
  body.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
}

/* ─── Cart line items: hide description and unit price ── */
.wc-block-cart-item__wrap .wc-block-components-product-metadata { display: none !important; }
.wc-block-cart-item__wrap .wc-block-cart-item__prices          { display: none !important; }

/* Total cell — center horizontally and vertically within the grid row */
.wc-block-cart-item__total {
  justify-content: center !important;
  align-self: center !important;
}
.wc-block-cart-item__total-price-and-sale-badge-wrapper {
  align-items: center !important;
}

/* Product cell — vertically center within the grid row */
.wc-block-cart-item__product {
  align-self: center !important;
}

/* Title */
.wc-block-cart-item__wrap .wc-block-components-product-name {
  font-size: 18px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  color: var(--bone) !important;
}

/* Product image — resize the grid column itself so the image never overflows into the product cell */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row,
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.is-small table.wc-block-cart-items .wc-block-cart-items__row,
.is-medium table.wc-block-cart-items .wc-block-cart-items__row {
  grid-template-columns: clamp(92px, 16vw, 160px) 132px !important;
}
.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
  padding-right: clamp(12px, 2vw, 20px) !important;
}
.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
  width: clamp(80px, 14vw, 140px) !important;
  height: clamp(80px, 14vw, 140px) !important;
  max-width: none !important;
  object-fit: cover !important;
}

/* ─── Cart ────────────────────────────── */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart_totals {
  background: var(--surface);
  border-radius: 0;
  padding: 28px;
  border: 1px solid var(--ash);
}
.woocommerce-cart .cart_totals { margin-top: 0; }
/* Cart item thumbnail — square */
.woocommerce table.cart td.product-thumbnail img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}
.woocommerce table.shop_table,
.woocommerce table.cart {
  background: transparent !important;
  color: var(--bone) !important;
  border-color: var(--ash) !important;
}
.woocommerce table.shop_table tbody tr,
.woocommerce table.cart tbody tr {
  background: transparent !important;
}
.woocommerce table.shop_table thead th {
  color: var(--smoke) !important;
  font-size: 10px !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  border-color: var(--ash) !important;
  background: transparent !important;
}
.woocommerce table.shop_table td {
  border-color: var(--ash) !important;
  color: var(--bone) !important;
  vertical-align: middle !important;
}
.woocommerce table.shop_table td a { color: var(--bone) !important; }
.woocommerce table.shop_table td a:hover { color: var(--azure) !important; }
.woocommerce .cart-subtotal th,
.woocommerce .cart-subtotal td,
.woocommerce .order-total th,
.woocommerce .order-total td { color: var(--bone) !important; }
.woocommerce .order-total .amount {
  color: var(--bone) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  font-family: var(--font-mono) !important;
}
.woocommerce table.cart td.actions .coupon input[type="text"] {
  background: var(--surface) !important;
  color: var(--bone) !important;
  border: 1px solid var(--ash) !important;
  border-radius: 0 !important;
}

/* ─── Cart sidebar coupon apply button ── */
.wc-block-components-totals-coupon__button {
  background: var(--bone) !important;
  color: var(--basalt) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 12px 20px !important;
  transition: background var(--trans) !important;
}
.wc-block-components-totals-coupon__button:hover {
  background: var(--shell) !important;
  color: var(--basalt) !important;
  opacity: 1 !important;
}

/* ─── Cart: no coupon entry — vouchers are email-locked, applied at checkout ── */
.wp-block-woocommerce-cart .wc-block-components-totals-coupon,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
  display: none !important;
}

/* ─── Checkout: coupon form locked until contact email is filled (global.js) ── */
.drtk-coupon-locked > *:not(.drtk-coupon-lock-hint) { display: none !important; }
.drtk-coupon-lock-hint {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--smoke) !important;
}

/* ─── Checkout address card (collapsed state) ── */
body.woocommerce-checkout .wc-block-components-address-card {
  background: var(--surface) !important;
  border-color: var(--ash) !important;
}
body.woocommerce-checkout .wc-block-components-address-card address .wc-block-components-address-card__address-section--primary {
  color: var(--bone) !important;
}
body.woocommerce-checkout .wc-block-components-address-card address .wc-block-components-address-card__address-section--secondary {
  color: var(--smoke) !important;
}

/* ─── Checkout (block) ────────────────── */
/* Scroll-to-error: tell the browser to reserve header space whenever
   scrollIntoView() is called on any of these WC checkout scroll targets.
   scroll-margin-top is the native CSS solution for sticky-header offset. */
.with-scroll-to-top__scroll-point,
.wc-block-components-notices,
.wc-block-components-notice-banner,
.wc-block-store-notice {
  scroll-margin-top: calc(var(--drtk-top-offset, 96px) + 16px) !important;
}

.wc-block-checkout { color: var(--bone) !important; font-family: var(--font-body) !important; }
.wc-block-checkout__main,
.wc-block-checkout__sidebar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.wc-block-components-checkout-step { border-bottom-color: var(--ash) !important; }
.wc-block-components-checkout-step__title {
  color: var(--bone) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}
/* On mobile the order summary renders twice — hide the collapsed top copy,
   keep only the expanded bottom one (.checkout-order-summary-block-fill-wrapper) */
@media (max-width: 700px) {
  .wp-block-woocommerce-checkout-order-summary-block:not(.checkout-order-summary-block-fill-wrapper) {
    display: none !important;
  }
}

.wc-block-components-checkout-step__description { color: var(--smoke) !important; }
.wc-block-components-order-summary { background: transparent !important; color: var(--bone) !important; }
.wc-block-components-order-summary-item__description,
.wc-block-components-totals-item__label { color: var(--smoke) !important; }
/* Quantity badge — azure circle, basalt text (matches nav cart badge) */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__quantity {
  background: var(--azure) !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__quantity span {
  color: var(--basalt) !important;
}

/* Hide unit price and metadata in checkout order summary */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__individual-prices,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
  display: none !important;
}
/* Vertically center description and total price within the item's flex row */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price {
  align-self: center !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__individual-prices { color: var(--bone) !important; }
.wc-block-components-totals-grand-total .wc-block-components-totals-item__value {
  color: var(--bone) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  font-family: var(--font-mono) !important;
}
.wc-block-components-shipping-rates-control__package {
  background: transparent !important;
  border-color: var(--ash) !important;
}
.wc-block-components-shipping-rates-control__option { color: var(--bone) !important; }
/* ── Checkout: radio buttons — dark bg, bone selector ──────────── */
.wc-block-components-radio-control__input {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--abyss) !important;
  border: 1px solid var(--smoke) !important;
  border-radius: 0 !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: absolute !important;
  transition: border-color var(--trans) !important;
}
.wc-block-components-radio-control__input:checked {
  background: var(--abyss) !important;
  border-color: var(--bone) !important;
}
.wc-block-components-radio-control__input:focus {
  outline: 2px solid var(--azure) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
/* Inner marker — bone square instead of WC's black circle */
.wc-block-components-radio-control__input:checked::before {
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--bone) !important;
  border-radius: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
/* Fix radio button vertical centering — WC uses -45% which sits slightly high */
body.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
  transform: translateY(-50%) !important;
}

/* ── Checkout: checkboxes — dark bg, bone checkmark ─────────────── */
.wc-block-components-checkbox__input[type=checkbox] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: var(--abyss) !important;
  border: 1px solid var(--smoke) !important;
  border-radius: 0 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: border-color var(--trans) !important;
}
.wc-block-components-checkbox__input[type=checkbox]:checked {
  background-color: var(--abyss) !important;
  border-color: var(--bone) !important;
}
.wc-block-components-checkbox__input[type=checkbox]:focus {
  outline: 2px solid var(--azure) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
/* Checkmark SVG — use bone so it reads on the dark background */
.wc-block-components-checkbox__mark {
  color: var(--bone) !important;
  stroke: var(--bone) !important;
}
/* Checkout: shipping options loading shimmer.
   The shimmer is an absolutely-positioned overlay, not an extra in-flow
   element — the real (hidden) options stay in the flow underneath and keep
   the section at its natural height, so the overlay exactly covers them
   instead of stacking after them. Appending it in-flow used to add the
   shimmer's own height on top of the still-occupied hidden content, growing
   the section then snapping back — the visible "blank gap above the
   skeleton" was that hidden content sitting above the shimmer bars. */
.wc-block-checkout__shipping-option {
  position: relative;
}
.wc-block-checkout__shipping-option.drtk-shimmer-active > *:not(#drtk-shipping-shimmer) {
  visibility: hidden !important;
}
#drtk-shipping-shimmer {
  display: none;
}
#drtk-shipping-shimmer.active {
  display: flex;
  visibility: visible !important;
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.drtk-shimmer-bar {
  height: 44px;
  flex: 0 0 auto;
  background: linear-gradient(90deg,
    #26221e 0%,
    #3a3833 40%,
    #26221e 80%
  );
  background-size: 200% 100%;
  animation: drtk-shimmer 1.4s ease-in-out infinite;
}
@keyframes drtk-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ─── Checkout: recolor WooCommerce's classic blockUI overlay ──────────
   Separate from the shimmer above — this is jQuery blockUI (WC core's
   legacy AJAX-blocking mechanism), still triggered by the Stripe/payment
   fieldset and the place-order button while the cart recalculates after
   a delivery-method change. It defaults to a plain white overlay with no
   spinner (its paired .blockMsg stays empty/display:none here), which
   reads as a stray white flash on this dark theme. !important is needed
   to beat jQuery's inline background-color/opacity — importance beats
   origin regardless of specificity, so this still wins over inline. */
body.woocommerce-checkout .blockUI.blockOverlay {
  background: var(--surface) !important;
  opacity: .92 !important;
}
body.woocommerce-checkout .blockUI.blockOverlay::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--ash);
  border-top-color: var(--bone);
  border-radius: 50%;
  animation: drtk-block-spin .7s linear infinite;
}
@keyframes drtk-block-spin {
  to { transform: rotate(360deg); }
}

/* Delivery option label — provider-agnostic */
/* Constrain the full chain so the button can't push the block wider than the column */
body.woocommerce-checkout .wc-block-components-shipping-rates-control,
body.woocommerce-checkout .wc-block-components-shipping-rates-control__package,
body.woocommerce-checkout .wc-block-components-radio-control,
body.woocommerce-checkout .wc-block-components-radio-control__option {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* Hard-clip the row — this is the element that must not grow beyond its allocated width */
body.woocommerce-checkout .wc-block-components-radio-control__option-layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}
/* Delivery option label row — row on all breakpoints */
body.woocommerce-checkout .wc-block-components-radio-control__label-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
/* Carrier name — always single line, truncates if too long */
body.woocommerce-checkout .wc-block-components-radio-control__label {
  display: block !important;
  flex: 1 1 0% !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--bone) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
/* Price — fixed width, always right-aligned and vertically centred */
body.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--bone) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  padding-left: 8px !important;
  text-align: right !important;
  white-space: nowrap !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-components-radio-control__secondary-description {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--smoke) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}
/* Hide sub-descriptions on all breakpoints — name + price is enough */
body.woocommerce-checkout .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-components-radio-control__secondary-description {
  display: none !important;
}
/* Desktop: wider gap before price */
@media (min-width: 901px) {
  body.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
    padding-left: 16px !important;
  }
}

/* ─── Delivery options — Basalt option cards ──────────────────────────
   Each shipping choice reads as a selectable card (§3.5): surface bg,
   ash border, bone border on the selected one. Makes the "you have a
   choice" affordance obvious instead of three floating text rows. */
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option {
  background: var(--surface) !important;
  border: 1px solid var(--ash) !important;
  padding: 16px 16px 16px 48px !important;
  margin: 0 0 10px 0 !important;
  cursor: pointer !important;
  transition: border-color var(--trans) !important;
}
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option:last-child {
  margin-bottom: 0 !important;
}
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option:hover {
  border-color: var(--smoke) !important;
}
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option-checked,
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--bone) !important;
}
/* Kill WC's between-option divider — the card gap does the separating */
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option::after,
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option::before {
  display: none !important;
}
/* Muted title + price on unselected cards so the selected one reads at a glance */
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option .wc-block-components-radio-control__secondary-label {
  color: var(--smoke) !important;
  transition: color var(--trans) !important;
}
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option:hover .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__secondary-label {
  color: var(--bone) !important;
}

/* Sendcloud "select a service point" button — Basalt secondary/outline (§3.4).
   Injected by the Sendcloud embed script inside the selected option card. */
body.woocommerce-checkout #sendcloudshipping_service_point_select {
  background: transparent !important;
  color: var(--bone) !important;
  border: 1px solid var(--ash) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  padding: 9px 16px !important;
  margin: 12px 0 0 0 !important;
  cursor: pointer !important;
  transition: border-color var(--trans), color var(--trans) !important;
}
body.woocommerce-checkout #sendcloudshipping_service_point_select:hover {
  border-color: var(--bone) !important;
  color: var(--bone) !important;
  background: transparent !important;
}
/* Chosen service point address — mono meta line under the button */
body.woocommerce-checkout #sendcloudshipping_service_point_selected_label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  color: var(--smoke) !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}
/* Service-point picker (Mapbox iframe) — centered 80% modal on desktop.
   The Sendcloud embed script appends an unnamed fixed fullscreen div to <body>
   (inline styles, hence !important); its separate black 0.7 backdrop div stays
   fullscreen behind. Mobile keeps the fullscreen map. Browsers without :has()
   fall back to fullscreen — acceptable. */
@media (min-width: 901px) {
  body.woocommerce-checkout div:has(> #sendcloudshipping_service_point_map) {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 80vw !important;
    height: 80vh !important;
    border: 1px solid var(--ash) !important;
    background: var(--basalt) !important;
    overflow: hidden !important;
  }
}

/* ─── Checkout: payment methods — flatten single provider ──────────── */
/* Remove list chrome */
body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-payment-methods {
  border: none !important;
  background: transparent !important;
}
body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-payment-methods__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-payment-methods__list-item {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
/* Hide radio input and payment method title label — single provider only */
body.woocommerce-checkout .wc-block-components-payment-methods__list-item > input[type="radio"],
body.woocommerce-checkout .wc-block-components-payment-methods__list-item > label {
  display: none !important;
}
/* Payment block — strip WC's ::after overlay border (border-radius:4px pseudo-element)
   and the inset box-shadow on the checked accordion option. These are pseudo-elements,
   not regular borders, which is why border:none on the element itself had no effect. */
.wc-block-components-radio-control--highlight-checked::after {
  display: none !important;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted {
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Payment content — strip all borders, padding, chrome (scoped to payment block only) */
.wc-block-checkout__payment-method .wc-block-components-payment-method-content,
.wc-block-checkout__payment-method #radio-control-wc-payment-method-options-stripe__content,
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  display: block !important;
}

/* Strip border + rounded corners from the radio-control wrapper in the payment block */
.wc-block-checkout__payment-method .wc-block-components-radio-control,
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked--first-selected,
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked--last-selected,
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked--first-selected *,
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked--last-selected * {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Stripe payment element — strip border + rounded corners from step content and Stripe iframe wrapper.
   Scoped to the payment block only: the unscoped `…checkout-step__content *` version
   also nuked the shipping-option radio borders (every checkout step has that class). */
body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__content,
body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__content *,
body.woocommerce-checkout .wcstripe-payment-element,
body.woocommerce-checkout .wcstripe-payment-element *,
body.woocommerce-checkout .StripeElement,
body.woocommerce-checkout .StripeElement * {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Express payment — give the container breathing room so the title isn't clipped */
.wc-block-components-express-payment,
.wc-block-components-express-payment__title-container {
  overflow: visible !important;
  padding-top: 12px !important;
}

.wc-block-components-express-payment__title {
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

/* ─── My Account ──────────────────────── */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--surface) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--ash) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 16px;
  color: var(--smoke) !important;
  font-family: var(--font-body) !important;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid var(--ash);
  transition: color var(--trans), background var(--trans);
  text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child a {
  border-bottom: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--bone) !important;
  background: var(--bone-05) !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
  color: var(--bone) !important;
  background: var(--surface) !important;
  border: 1px solid var(--ash) !important;
  border-radius: 0 !important;
  padding: 28px !important;
}
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.woocommerce-account .woocommerce-MyAccount-content table th {
  color: var(--smoke) !important;
  font-size: 10px !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  border-bottom: 1px solid var(--ash) !important;
  padding: 8px 12px !important;
  background: transparent !important;
}
.woocommerce-account .woocommerce-MyAccount-content table td {
  color: var(--bone) !important;
  border-bottom: 1px solid var(--ash) !important;
  padding: 12px !important;
  background: transparent !important;
}
.woocommerce-account .woocommerce-MyAccount-content table td a { color: var(--azure) !important; }
.woocommerce-account .woocommerce-MyAccount-content table td a:hover { text-decoration: underline !important; }

/* ─── Language switcher (TranslatePress) ──────────────────────────── */
.drtk-footer__bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.drtk-footer__lang {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Wrapper */
.drtk-footer .trp-shortcode-switcher__wrapper {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Hide flags */
.drtk-footer .trp-flag-image { display: none !important; }

/* Anchor: invisible, just holds space */
.drtk-footer .trp-language-switcher.trp-shortcode-anchor {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  visibility: hidden !important;
}

/* Overlay: the actual interactive element — opens upward */
.drtk-footer .trp-shortcode-switcher,
.drtk-footer .trp-shortcode-switcher__wrapper {
  overflow: visible !important;
}
.drtk-footer .trp-language-switcher.trp-shortcode-overlay {
  background: transparent !important;
  border: 1px solid var(--ash) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex-direction: column-reverse !important;
  overflow: visible !important;
  padding: 0 !important;
  justify-content: center !important;
}

/* Current language row */
.drtk-footer .trp-current-language-item__wrapper {
  background: transparent !important;
  font-size: 10px !important;
  line-height: 1 !important;
  padding: 6px 12px !important;
  gap: 6px !important;
  align-items: center !important;
  display: flex !important;
}
.drtk-footer .trp-current-language-item__wrapper .trp-language-item {
  padding: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

/* All language items */
.drtk-footer .trp-language-item {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1.9 !important;
  color: var(--smoke) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 4px 12px !important;
  gap: 0 !important;
  display: block !important;
}
.drtk-footer .trp-language-item-name { color: inherit !important; }
.drtk-footer .trp-language-item__current { color: var(--bone) !important; }
.drtk-footer .trp-language-item:hover,
.drtk-footer .trp-language-item:focus {
  background: var(--surface) !important;
  color: var(--bone) !important;
}

/* Dropdown list — positioned above trigger, hidden by default */
.drtk-footer .trp-switcher-dropdown-list {
  position: absolute !important;
  bottom: 100% !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  display: none !important;
  flex-direction: column !important;
  max-height: none !important;
  overflow: visible !important;
  background: var(--basalt) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Dropdown list — open state */
.drtk-footer .trp-language-switcher.is-open .trp-switcher-dropdown-list {
  display: flex !important;
  z-index: 9999 !important;
  border: 1px solid var(--ash) !important;
  border-bottom: none !important;
  padding: 4px 0 !important;
}

/* Overlay stays position:absolute (TranslatePress default) — already a containing block */

/* Arrow */
.drtk-footer .trp-shortcode-arrow {
  width: 10px !important;
  height: 10px !important;
  flex-shrink: 0 !important;
}
.drtk-footer .trp-shortcode-arrow path { stroke: var(--smoke) !important; }

/* ─── Policy pages (returns, terms, etc) ── */
.drtk-policy-section {
  padding: clamp(24px, 3vw, 32px) 0 clamp(64px, 10vw, 120px);
}
.drtk-policy-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* Anchored FAQ entries (e.g. the footer "Livraison" link -> /faq/#livraison)
   must clear the sticky header — same --drtk-top-offset convention as the
   checkout scroll targets above. */
.drtk-policy-block[id] {
  scroll-margin-top: calc(var(--drtk-top-offset, 96px) + 16px);
}
.drtk-policy-block h2 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 10px;
}
.drtk-policy-block p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--smoke);
  margin: 0;
}
.drtk-policy-block a {
  color: var(--azure);
  text-decoration: underline;
}
.drtk-policy-block strong {
  color: var(--bone);
  font-weight: 500;
}
.drtk-policy-block ul {
  margin: 8px 0 16px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.drtk-policy-block ul li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--smoke);
}

/* ─── Contact page ────────────────────── */
.drtk-inner-hero {
  padding: clamp(32px, 4vw, 48px) 0 clamp(24px, 3vw, 32px);
  border-bottom: 1px solid var(--ash);
}
.drtk-inner-hero .drtk-section-label {
  margin-bottom: 12px;
}
.drtk-inner-hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 400;
  color: var(--bone);
  margin: 0;
  letter-spacing: -0.02em;
}
/* Guide freshness date under the title (single.php) */
.drtk-inner-hero__meta {
  font-family: var(--font-mono) !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 14px 0 0;
  line-height: 1.8;
}
.drtk-inner-hero__meta a { color: var(--bone) !important; text-decoration: none !important; }
.drtk-inner-hero__meta a:hover { color: var(--azure) !important; }
.drtk-inner-hero__meta span { margin: 0 6px; }
@media (max-width: 600px) {
  .drtk-inner-hero__meta span { display: none; }
  .drtk-inner-hero__meta time { display: block; }
}

.drtk-contact-section {
  padding: clamp(24px, 3vw, 32px) 0 clamp(48px, 8vw, 96px);
}
.drtk-contact-wrap {
  max-width: 960px;
}
.drtk-contact-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 700px) {
  .drtk-contact-cols {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.drtk-contact-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}
.drtk-contact-aside__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0;
}
.drtk-contact-aside__text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--smoke);
  margin: 0;
}
.drtk-contact-aside__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}
.drtk-contact-aside__handle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--smoke);
  margin: 0;
}

.drtk-contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.drtk-contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.drtk-contact-form__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drtk-contact-form__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke);
}
.drtk-contact-form__input,
.drtk-contact-form__textarea {
  background: var(--surface);
  border: 1px solid var(--ash);
  border-radius: 0;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s ease;
  outline: none;
  -webkit-appearance: none;
}
.drtk-contact-form__input::placeholder,
.drtk-contact-form__textarea::placeholder {
  color: var(--smoke);
}
.drtk-contact-form__input:focus,
.drtk-contact-form__textarea:focus {
  border-color: var(--bone);
}
.drtk-contact-form__textarea {
  resize: vertical;
  min-height: 140px;
}
.drtk-contact-form__error {
  font-size: 13px;
  color: #e07070;
  margin: 0;
}
.drtk-contact-form__btn {
  align-self: flex-start;
}
.drtk-contact-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  color: var(--bone);
  padding: 32px 0;
}
.drtk-contact-success svg {
  stroke: var(--azure);
}
.drtk-contact-success p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ─── Scroll reveal ───────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════ 6. LANDING PAGE ══ */

/* ── Hero ── */
.drtk-hero {
  position: relative;
  height: calc(100vh - var(--drtk-top-offset, 0px));
  height: calc(100dvh - var(--drtk-top-offset, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.drtk-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.drtk-hero__video.loaded { opacity: 1; }
.drtk-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(26,23,20,.72) 0%,
    rgba(26,23,20,.40) 50%,
    rgba(26,23,20,.78) 100%
  );
}
.drtk-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 760px;
}
.drtk-hero__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--azure);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp .8s .2s forwards;
}
.drtk-hero__title {
  font-size: clamp(42px, 7vw, 86px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
  font-family: var(--font-display);
  color: var(--bone);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp .8s .4s forwards;
}
.drtk-hero__sub {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--smoke);
  margin-bottom: 36px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp .8s .6s forwards;
}
.drtk-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bone);
  color: var(--basalt);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 14px 28px;
  border-radius: 0;
  transition: background var(--trans);
  opacity: 0;
  animation: fadeUp .8s .8s forwards;
}
.drtk-hero__cta:hover { background: var(--shell); }
.drtk-hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-40);
  animation: bounce 2s 1.5s infinite;
}
.drtk-hero__scroll svg { opacity: .5; }

@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ── Products section ── */
.drtk-products {
  scroll-margin-top: 68px;
  padding: 60px 0 80px;
  background: var(--basalt);
}
/* Product safety disclaimer (Txapel) — small, muted, mono */
/* ─── Product page: post-CTA reassurance strip + honest-answer accordion ──
   Rendered under the add-to-cart button — see drtk_reassurance_strip() and
   drtk_txapel_honest_answer() in functions.php.
   NB on specificity: these sit inside .woocommerce, where `.woocommerce p`
   and `.woocommerce li` (0,1,1) carry !important (style.css §global). A bare
   `.drtk-…` class is (0,1,0) and loses — which is exactly why the old
   .drtk-product-disclaimer rule never applied and that notice rendered as
   14px bone body copy. Selectors below are doubled up to outrank them. */
.drtk-reassure {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin: 22px 0 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--ash);
}
.drtk-reassure li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.drtk-reassure li::before,
.drtk-reassure li::marker { content: none !important; }
.drtk-reassure li svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--smoke);
}
.drtk-reassure li span {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: var(--smoke) !important;
}

.drtk-honest {
  margin: 14px 0 0;
  border: 1px solid var(--ash);
  background: var(--surface);
  border-radius: 0;
}
.drtk-honest > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 13px 16px;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--bone) !important;
}
.drtk-honest > summary::-webkit-details-marker { display: none; }
.drtk-honest > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  color: var(--smoke);
}
.drtk-honest[open] > summary::after { content: "–"; }
.drtk-honest > summary:hover { color: var(--bone) !important; }
.drtk-honest .drtk-honest__body { padding: 0 16px 16px; }
.drtk-honest .drtk-honest__body p {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--smoke) !important;
  margin: 0 0 12px !important;
}
.drtk-honest .drtk-honest__link { margin: 0 !important; }
.drtk-honest .drtk-honest__link a {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--bone) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ash);
  padding-bottom: 2px;
  transition: border-color var(--trans);
}
.drtk-honest .drtk-honest__link a:hover { border-bottom-color: var(--bone); }

/* Size guide (Txapel) — same accordion shell as .drtk-honest, plus a figure,
   numbered steps and a mono range callout. See drtk_txapel_size_help().
   Selectors are doubled through .drtk-honest for the same reason as above:
   `.woocommerce li` (0,1,1) carries !important, so a bare class loses. */
.drtk-honest .drtk-size__fig {
  display: block;
  width: 118px;
  height: auto;
  margin: 2px 0 18px;
  color: var(--smoke);
}
/* The viewBox is scaled ~1.8×, which would render a 1.4 stroke at 2.5px and
   blow past the design system's 1.2–1.8px. This pins stroke-width to literal
   CSS pixels, so the numbers in the markup mean what they say. */
.drtk-honest .drtk-size__fig * { vector-effect: non-scaling-stroke; }
.drtk-honest .drtk-size__tape {
  color: var(--bone);
  stroke: currentColor;
  stroke-width: 1.6;
}
.drtk-honest .drtk-size__tape--back {
  stroke-dasharray: 2.5 3;
  opacity: .5;
}
.drtk-honest .drtk-size__steps {
  list-style: none;
  counter-reset: drtk-step;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
.drtk-honest .drtk-size__steps li {
  counter-increment: drtk-step;
  position: relative;
  margin: 0 0 9px !important;
  padding: 0 0 0 26px !important;
  list-style: none !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--smoke) !important;
}
.drtk-honest .drtk-size__steps li:last-child { margin-bottom: 0 !important; }
.drtk-honest .drtk-size__steps li::marker { content: none !important; }
.drtk-honest .drtk-size__steps li::before {
  content: counter(drtk-step);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.9;
  color: var(--bone);
}
.drtk-honest p.drtk-size__range {
  margin: 0 0 14px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--ash);
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: var(--bone) !important;
}

@media (max-width: 600px) {
  .drtk-reassure { grid-template-columns: 1fr; gap: 10px; }
}

/* Video slide inside the PhotoSwipe lightbox — see the wrapper at the foot of
   global.js. PhotoSwipe gives an item.html slide a full-size .pswp__item to
   fill, with none of the sizing it applies to image slides, so the video has
   to be centred and bounded here or it renders at intrinsic size. */
.pswp .drtk-pswp-video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.pswp .drtk-pswp-video video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: var(--abyss);
  border-radius: 0;
  outline: none;
}

/* Contact page: direct email + postal block under the Instagram card.
   Separated by a rule rather than a second card — it is supporting detail,
   not a competing call to action. */
.drtk-contact-aside__direct {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ash);
}
.drtk-contact-aside__title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0 0 10px;
}
.drtk-contact-aside__direct .drtk-contact-aside__text { margin: 0 0 10px; }
.drtk-contact-aside__direct .drtk-contact-aside__text:last-child { margin-bottom: 0; }
.drtk-contact-aside__direct a {
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid var(--ash);
  transition: border-color var(--trans);
}
.drtk-contact-aside__direct a:hover { border-bottom-color: var(--bone); }

/* ─── Guides / Blog ──────────────────────────────────────────────── */
.drtk-guides__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: var(--ash);
  border: 1px solid var(--ash);
}
.drtk-guide-card__link {
  display: block;
  height: 100%;
  padding: 28px;
  background: var(--surface);
  transition: background var(--trans);
}
.drtk-guide-card__link:hover { background: var(--abyss); }
.drtk-guide-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--bone);
  margin: 0 0 12px;
}
.drtk-guide-card__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--smoke);
  margin: 0 0 16px;
}
.drtk-guide-card__more {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azure);
}
.drtk-guides__empty { color: var(--smoke); font-family: var(--font-body); }

/* Article (single guide) — override .drtk-policy-wrap flex+gap so only
   the h2/p margins below control spacing (no double gap = no excess air) */
.drtk-article {
  display: block;
  max-width: 720px;
}
.drtk-article h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--bone);
  margin: 26px 0 8px;
}
.drtk-article p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--bone);
  margin: 0 0 12px;
}
.drtk-article a {
  color: var(--azure);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.drtk-article strong { color: var(--bone); font-weight: 600; }
.drtk-article__back { margin-top: 30px; }
/* Article: tighten the hero-to-content and bottom spacing */
.drtk-page--article .drtk-policy-section { padding: clamp(20px,2.5vw,28px) 0 clamp(40px,6vw,72px); }

/* Article CTA — Basalt primary button (overrides the plain .drtk-article a link) */
.drtk-article a.drtk-article__cta {
  display: inline-block;
  margin-top: 6px;
  padding: 13px 24px;
  background: var(--bone);
  color: var(--basalt) !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none !important;
  border-radius: 0;
  transition: background var(--trans);
}
.drtk-article a.drtk-article__cta:hover { background: var(--shell); color: var(--basalt) !important; }
.drtk-article h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--azure);
  margin: 24px 0 6px;
}
.drtk-article ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.drtk-article li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--bone);
  margin: 0 0 6px;
}
.drtk-article li::marker { color: var(--smoke); }
.drtk-article__back a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--smoke);
}
.drtk-article__back a:hover { color: var(--bone); }

/* Guide table of contents — long comparison guides only (DK-13) */
.drtk-guide-toc {
  border: 1px solid var(--ash);
  background: var(--surface);
  padding: 18px 22px;
  margin: 8px 0 26px;
}
.drtk-guide-toc ul { margin: 0; padding-left: 18px; list-style: decimal; }
.drtk-guide-toc li {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
.drtk-guide-toc a { color: var(--bone); text-decoration: none; }
.drtk-guide-toc a:hover { color: var(--azure); }

.drtk-section-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--smoke);
  margin-bottom: 12px;
}
.drtk-section-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  letter-spacing: -.025em;
  font-family: var(--font-display);
  color: var(--bone);
  line-height: 1.1;
  margin-bottom: 32px;
}
.drtk-products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Homepage → new comparison guide link (DK-13, 2026-08-16 doc) */
.drtk-products__guide-link {
  margin: -20px 0 32px;
  font-family: var(--font-body);
  font-size: 13px;
}
.drtk-products__guide-link a {
  color: var(--azure);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Product card ── */
.drtk-product-card {
  background: var(--surface);
  border: 1px solid var(--ash);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color var(--trans);
}
.drtk-product-card:hover { border-color: var(--bone); }
.drtk-product-card__img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--abyss);
  position: relative;
  z-index: 1;
}
.drtk-product-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.drtk-product-card:hover .drtk-product-card__img img { transform: scale(1.04); }
.drtk-product-card__body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.drtk-product-card__cat,
.drtk-product-card__name,
.drtk-product-card__desc,
.drtk-product-card__footer { margin: 0; padding: 0; }
.drtk-product-card__cat {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--smoke);
}
.drtk-product-card__name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
  font-family: var(--font-display);
}
.drtk-product-card__name a {
  color: var(--bone) !important;
  text-decoration: none !important;
}
/* Stretched link — makes entire card clickable */
.drtk-product-card__name a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}
.drtk-product-card__desc {
  font-size: 13px;
  color: var(--smoke);
  line-height: 1.5;
}
.drtk-product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  gap: 12px;
  margin-top: auto;
}
.drtk-product-card__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.drtk-product-card__price {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .01em;
  font-family: var(--font-mono);
  color: var(--bone);
}
.drtk-product-card__price ins,
.drtk-product-card__price ins span,
.drtk-product-card__price ins bdi {
  color: var(--azure) !important;
  text-decoration: none !important;
  background: none !important;
  font-family: var(--font-mono) !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
.drtk-product-card__price del,
.drtk-product-card__price del span,
.drtk-product-card__price del bdi {
  color: var(--smoke) !important;
  font-size: inherit !important;
  text-decoration: line-through !important;
  text-decoration-color: var(--smoke) !important;
  margin-right: 8px !important;
  font-family: var(--font-mono) !important;
  line-height: inherit !important;
}

/* ══════════════════════════ BUTTON SYSTEM ══════════════════════════
   Edit here to update all buttons site-wide.
   This block comes after .woocommerce ul.products li.product a (bone color)
   so source-order wins the !important tie on loop/upsell cards.
   ═══════════════════════════════════════════════════════════════════ */

/* PRIMARY — all visual properties in one place */
.drtk-btn-primary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce .button.alt,
.wc-block-cart__submit-button,
.woocommerce a.add_to_cart_button.wp-element-button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button,
.wc-block-grid__product-add-to-cart .wp-element-button,
li.wc-block-product .wp-block-woocommerce-product-button .wp-element-button {
  background: var(--bone) !important;
  color: var(--basalt) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  border-radius: 0 !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--trans) !important;
}
.drtk-btn-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .button.alt:hover,
.wc-block-cart__submit-button:hover,
.woocommerce a.add_to_cart_button.wp-element-button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button:hover,
.wc-block-grid__product-add-to-cart .wp-element-button:hover,
li.wc-block-product .wp-block-woocommerce-product-button .wp-element-button:hover {
  background: var(--shell) !important;
  color: var(--basalt) !important;
}

/* .woocommerce span rule (line ~386) bleeds into button inner spans — reset */
.drtk-btn-primary span,
.woocommerce a.button span,
.woocommerce button.button span,
.woocommerce input.button span,
.woocommerce .single_add_to_cart_button span,
.woocommerce a.add_to_cart_button span,
.wc-block-cart__submit-button span,
li.wc-block-product .wp-block-woocommerce-product-button .wp-element-button span {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* PRIMARY layout — custom drtk buttons (inline-flex with icon gap) */
.drtk-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
/* PRIMARY layout — WooCommerce standard */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce .button.alt,
.wc-block-cart__submit-button {
  padding: 12px 28px !important;
}

/* ── Verify-email form (order access without session) ───────────── */
.woocommerce-verify-email input[type="email"],
.woocommerce-verify-email input[type="text"] {
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  line-height: 1.5 !important;
  background: var(--abyss) !important;
  color: var(--bone) !important;
  border: 1px solid var(--smoke) !important;
  border-radius: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.woocommerce-verify-email input[type="email"]:focus,
.woocommerce-verify-email input[type="text"]:focus {
  border-color: var(--azure) !important;
  box-shadow: 0 0 0 3px rgba(95,163,218,.15) !important;
  outline: none !important;
}
.woocommerce-verify-email label {
  color: var(--smoke) !important;
  font-size: 10px !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}
/* Button — ID beats any class-based WP/WC rule */
#verify-email-submit {
  background: var(--bone) !important;
  color: var(--basalt) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: background var(--trans) !important;
  white-space: normal !important;
  word-break: break-word !important;
  height: auto !important;
}
#verify-email-submit:hover { background: var(--shell) !important; color: var(--basalt) !important; }
#verify-email-submit:focus { background: var(--shell) !important; outline: 2px solid var(--azure) !important; outline-offset: 2px !important; box-shadow: none !important; }

/* ── Checkout: Place Order button ──────────────────────────────── */
.wc-block-components-checkout-place-order-button {
  background: var(--bone) !important;
  color: var(--basalt) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 16px 32px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background var(--trans) !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus {
  background: var(--shell) !important;
  color: var(--basalt) !important;
  box-shadow: none !important;
}

/* ── Checkout: terms & privacy links above Place Order ──────────── */
.wp-block-woocommerce-checkout-terms-block a {
  color: var(--bone) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--smoke) !important;
  text-underline-offset: 3px !important;
  transition: text-decoration-color var(--trans) !important;
}
.wp-block-woocommerce-checkout-terms-block a:hover,
.wp-block-woocommerce-checkout-terms-block a:focus {
  text-decoration-color: var(--bone) !important;
}

/* ── Order received: product thumbnail in order item table ─────── */
.drtk-order-item-name-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  vertical-align: middle !important;
}
.drtk-order-item-img {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  border: 1px solid var(--ash) !important;
  flex-shrink: 0 !important;
}

/* ── Order received: Create account block ───────────────────────── */
.wc-block-order-confirmation-create-account {
  background: var(--surface) !important;
  border: 1px solid var(--ash) !important;
  border-radius: 0 !important;
  color: var(--bone) !important;
}

/* ── Order received: Create account button ──────────────────────── */
.wc-block-order-confirmation-create-account-button {
  background: var(--bone) !important;
  color: var(--basalt) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 28px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background var(--trans) !important;
}
.wc-block-order-confirmation-create-account-button:hover {
  background: var(--shell) !important;
  color: var(--basalt) !important;
  box-shadow: none !important;
}
.wc-block-order-confirmation-create-account-button:focus {
  background: var(--shell) !important;
  color: var(--basalt) !important;
  box-shadow: none !important;
  outline: 2px solid var(--azure) !important;
  outline-offset: 2px !important;
}

/* SECONDARY / outline */
.drtk-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--smoke);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 11px 22px;
  position: relative;
  z-index: 1;
  border-radius: 0;
  border: 1px solid var(--ash);
  font-family: var(--font-body);
  cursor: pointer;
  transition: color var(--trans), border-color var(--trans);
}
.drtk-btn-outline:hover { color: var(--bone); border-color: var(--bone); }

/* ── Reviews section ── */
.drtk-reviews {
  padding: 60px 0 80px;
  background: var(--surface);
  border-top: 1px solid var(--ash);
  border-bottom: 1px solid var(--ash);
}
.drtk-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.drtk-review-card {
  background: var(--basalt);
  border: 1px solid var(--ash);
  border-radius: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--trans);
}
.drtk-review-card:hover { border-color: var(--smoke); }
.drtk-review-stars {
  display: flex;
  gap: 3px;
  color: var(--rating);
  font-size: 14px;
}
.drtk-review-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--smoke);
  flex: 1;
  font-style: italic;
}
/* flex-start, pas center : la colonne de droite fait deux ou trois lignes
   depuis que le badge RV-04 s'y ajoute, et un avatar centré sur cette
   hauteur se retrouve en face du badge au lieu du nom. */
.drtk-review-author { display: flex; align-items: flex-start; gap: 12px; }
.drtk-review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: var(--ash);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--smoke);
  flex-shrink: 0;
}
.drtk-review-name { font-size: 13px; font-weight: 500; color: var(--bone); }
.drtk-review-location {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  color: var(--smoke);
}
.drtk-reviews__cta { text-align: center; margin-top: 48px; }

/* ── Reviews page (page-reviews.php) ── */
.drtk-reviews--page { border-top: none; background: var(--basalt); }
.drtk-reviews--page .drtk-reviews__grid { margin-top: 0; }
.drtk-reviews--page .drtk-review-card { background: var(--surface); }
.drtk-reviews__empty {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--smoke);
  text-align: center;
  padding: 40px 0 20px;
}
.drtk-review-location a { color: var(--smoke); text-decoration: none; }
.drtk-review-location a:hover { color: var(--bone); }
.drtk-review-verified {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--azure);
  vertical-align: middle;
}

/* ── Newsletter section ── */
.drtk-newsletter {
  padding: 60px 0 80px;
  background: var(--basalt);
  text-align: center;
}
.drtk-newsletter__inner { max-width: 560px; margin: 0 auto; }
.drtk-newsletter__title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  letter-spacing: -.025em;
  font-family: var(--font-display);
  color: var(--bone);
  line-height: 1.15;
  margin-bottom: 12px;
}
.drtk-newsletter__title span { color: var(--azure); }
.drtk-newsletter__sub {
  font-size: 14px;
  color: var(--smoke);
  margin-bottom: 24px;
  line-height: 1.6;
}
.drtk-newsletter__form {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
}
.drtk-newsletter__input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--ash);
  border-radius: 0;
  padding: 13px 18px;
  font-size: 14px;
  color: var(--bone);
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--trans);
}
.drtk-newsletter__input::placeholder { color: var(--smoke); }
.drtk-newsletter__input:focus { border-color: var(--azure); }
.drtk-newsletter__note {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  color: var(--smoke);
  margin-top: 16px;
}
.drtk-newsletter__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px;
  border: 1px solid var(--ash);
  max-width: 460px;
  margin: 0 auto;
  animation: drtk-fadein .4s ease;
}
.drtk-newsletter__success svg {
  color: var(--azure);
  flex-shrink: 0;
}
.drtk-newsletter__success p {
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--bone);
  margin: 0;
  line-height: 1.6;
}
@keyframes drtk-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Newsletter popup (NL-01) — reuses .drtk-newsletter__* for the
   title/sub/form/input/note/success so the two offers stay visually
   identical; only the modal chrome below is new. ── */
.drtk-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.drtk-popup[hidden] { display: none; }
.drtk-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 9, .7);
  opacity: 0;
  transition: opacity var(--trans);
}
.drtk-popup__dialog {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--ash);
  max-width: 480px;
  width: 100%;
  padding: 44px 32px 32px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity var(--trans), transform var(--trans);
}
.drtk-popup.open .drtk-popup__backdrop { opacity: 1; }
.drtk-popup.open .drtk-popup__dialog { opacity: 1; transform: translateY(0) scale(1); }
.drtk-popup__dialog .drtk-newsletter__sub { margin-bottom: 24px; }
.drtk-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--smoke);
  cursor: pointer;
  transition: color var(--trans);
}
.drtk-popup__close:hover { color: var(--bone); }
body.drtk-popup-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════ RESPONSIVE ══ */
@media (max-width: 900px) {
  .drtk-nav__links { display: none; }
  .drtk-footer__top { grid-template-columns: 1fr 1fr; }
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }

  /* Single product mobile: full-bleed 1:1 gallery under header */
  body.single-product .wp-site-blocks > header.wp-block-template-part {
    display: none !important;
  }
  body.single-product .wp-site-blocks > .wp-block-group.woocommerce.product {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body.single-product main.wp-block-group.has-global-padding.is-layout-constrained {
    padding-top: 0 !important;
  }
  body.single-product main.wp-block-group.has-global-padding.is-layout-constrained > * {
    margin-block-start: 0 !important;
  }
  body.single-product main.wp-block-group .wp-block-columns.alignwide {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
  }
  body.single-product main.wp-block-group .wp-block-columns.alignwide {
    flex-direction: column !important;
  }
  body.single-product main.wp-block-group .wp-block-columns.alignwide > .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.single-product main.wp-block-group .wp-block-columns.alignwide > .wp-block-column:first-child .wp-block-woocommerce-product-image-gallery,
  body.single-product main.wp-block-group .wp-block-columns.alignwide > .wp-block-column:first-child .woocommerce-product-gallery {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    left: 50% !important;
    right: 50% !important;
    position: relative !important;
    margin-bottom: 16px !important;
    aspect-ratio: 1 / 1 !important;
    height: 100vw !important;
    background: var(--surface) !important;
  }
  body.single-product .woocommerce-product-gallery,
  body.single-product .woocommerce-product-gallery .flex-viewport {
    height: 100vw !important;
    margin: 0 !important;
  }
  body.single-product .woocommerce-product-gallery {
    overflow: hidden !important;
  }
  body.single-product .wp-block-woocommerce-product-image-gallery {
    overflow: hidden !important;
    box-shadow: inset 2px 0 0 var(--surface), inset -2px 0 0 var(--surface) !important;
  }
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    height: 100vw !important;
    margin: 0 !important;
  }
  body.single-product .woocommerce-product-gallery .flex-viewport,
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image > a {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }
  body.single-product .woocommerce-product-gallery .flex-viewport { clip-path: none !important; }
  body.single-product .woocommerce-product-gallery .flex-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2px, #000 calc(100% - 2px), transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0, #000 2px, #000 calc(100% - 2px), transparent 100%) !important;
  }
  body.single-product .woocommerce-product-gallery .flex-viewport,
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image,
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image > a {
    overflow: hidden !important;
  }
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    padding: 0 !important;
  }
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* display:block for img only — video's display is governed entirely by the
     is-playing toggle below. It used to be forced to block here too, which
     out-specified that toggle (this selector chain beats .drtk-video-slide.is-
     playing's 2 classes): with neither element absolutely positioned, having
     both img and video visible at once stacks them in normal flow inside the
     fixed-height square slide, pushing the video below the poster and out of
     view under overflow:hidden — technically playing, just invisible. */
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    display: block !important;
  }
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image.drtk-video-slide video {
    object-fit: contain !important;
    background: var(--surface) !important;
  }
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image.drtk-video-slide.is-playing img {
    display: none !important;
  }
  .drtk-video-slide.is-playing .drtk-video-slide__video { display: block !important; }
  .drtk-video-play { width: 48px !important; height: 48px !important; }
  .drtk-video-play svg { width: 16px !important; height: 16px !important; }
  body.single-product .woocommerce-product-gallery .flex-control-thumbs,
  body.single-product .woocommerce-product-gallery .flex-control-paging,
  body.single-product .woocommerce-product-gallery .flex-direction-nav,
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    display: none !important;
  }
  body.single-product .drtk-gallery-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    z-index: 5;
    pointer-events: none;
  }
  body.single-product .drtk-gallery-progress__indicator {
    height: 100%;
    background: #fff;
    transform: translateX(0);
    transition: transform .16s linear;
    will-change: transform;
  }

  /* Dissolve the right wrapper so burger + cart become direct grid items */
  .drtk-nav__right { display: contents; }
  /* Burger → column 1, left */
  .drtk-burger {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
  }
  /* Cart → column 3, right */
  .drtk-cart-btn {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }
  /* Landing */
  .drtk-reviews__grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  html,
  body,
  .wp-site-blocks {
    overflow-x: clip;
  }
  body.page-id-74 .has-global-padding > .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.page-id-74 .wp-block-group.has-global-padding,
  body.page-id-74 .entry-content.has-global-padding {
    padding-left: var(--wp--style--root--padding-left) !important;
    padding-right: var(--wp--style--root--padding-right) !important;
  }
  body.page-id-74 .entry-content.alignfull.wp-block-post-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--wp--style--root--padding-left) !important;
    padding-right: var(--wp--style--root--padding-right) !important;
  }
  body.page-id-74 .entry-content p,
  body.page-id-74 .entry-content li,
  body.page-id-74 .entry-content h1,
  body.page-id-74 .entry-content h2,
  body.page-id-74 .entry-content h3 {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .drtk-footer__top    { grid-template-columns: 1fr; }
  .drtk-footer__bottom { flex-direction: column; text-align: center; }
  .drtk-footer__legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .drtk-footer__lang,
  .drtk-footer__copy,
  .drtk-footer__legal {
    min-width: 0;
    max-width: 100%;
  }
  .drtk-footer .trp-shortcode-switcher__wrapper,
  .drtk-footer .trp-language-switcher {
    max-width: 100% !important;
  }
  .wp-site-blocks > .wp-block-group,
  .wp-site-blocks > main { padding: 40px 16px 80px !important; }
  .wp-block-post-content > .alignwide,
  .wp-block-post-content > .alignfull,
  .entry-content > .alignwide,
  .entry-content > .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .wp-block-post-content img,
  .wp-block-post-content iframe,
  .wp-block-post-content table,
  .entry-content img,
  .entry-content iframe,
  .entry-content table {
    max-width: 100% !important;
  }
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart_totals { padding: 16px !important; border-radius: 0 !important; }
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Landing */
  .drtk-products__grid { grid-template-columns: 1fr; }
  .drtk-product-card__footer { flex-direction: column; align-items: flex-start; }
  .drtk-newsletter__form { flex-direction: column; }
  .drtk-newsletter__input,
  .drtk-newsletter__form .drtk-btn-primary { width: 100%; justify-content: center; }
  .drtk-popup__dialog { padding: 40px 20px 24px; }
  /* Empty cart grid — 2 columns on mobile */
  .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ══════════════════════════════════════ 9. EMPTY CART BLOCK ══ */

/* Grid container — override WC flexbox (display:flex + negative margins) */
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  flex-wrap: unset !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Card — clear WC flex-item sizing (.has-X-columns sets flex:1 0 25%; max-width:25%)
   and the transparent-border gutter trick */
.wc-block-grid__product {
  flex: none !important;
  max-width: none !important;
  width: auto !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  background: var(--surface) !important;
  border: 1px solid var(--ash) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color .25s !important;
}
.wc-block-grid__product:hover {
  border-color: var(--bone) !important;
}

/* Link wrapper */
.wc-block-grid__product-link {
  color: var(--bone) !important;
  text-decoration: none !important;
  display: block !important;
}

/* Image */
.wc-block-grid__product-image img {
  aspect-ratio: 1 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  transition: transform .6s ease !important;
}
.wc-block-grid__product:hover .wc-block-grid__product-image img {
  transform: scale(1.03) !important;
}

/* Title */
.wc-block-grid__product-title {
  color: var(--bone) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 14px 16px 4px !important;
  margin: 0 !important;
}

/* Price */
.wc-block-grid__product-price {
  color: var(--smoke) !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  padding: 2px 16px 14px !important;
  margin: 0 !important;
}

/* Add to cart button — layout (visual from button system above) */
.wc-block-grid__product-add-to-cart {
  margin: auto 16px 16px !important;
}
.wc-block-grid__product-add-to-cart .wp-element-button {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  padding: 10px 0 !important;
  box-sizing: border-box !important;
}

/* Sale badge */
.wc-block-grid__product-onsale { display: none !important; }

/* ══════════════════════════════════════ 10. PRODUCT TEMPLATE BLOCK ══
   Used for cross-sells / recommended products in the filled cart.
   li.wc-block-product / ul.wc-block-product-template
   ══════════════════════════════════════════════════════════════════ */

/* Grid — reset WooCommerce columns-X layout */
ul.wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Card */
li.wc-block-product {
  background: var(--surface) !important;
  border: 1px solid var(--ash) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color .25s !important;
  padding: 0 !important;
  /* reset any column-width constraints */
  flex: none !important;
  max-width: none !important;
  width: auto !important;
}
li.wc-block-product:hover { border-color: var(--bone) !important; }

/* Image */
li.wc-block-product .wp-block-woocommerce-product-image img {
  aspect-ratio: 1 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  transition: transform .6s ease !important;
}
li.wc-block-product:hover .wp-block-woocommerce-product-image img {
  transform: scale(1.03) !important;
}

/* Title */
li.wc-block-product .wp-block-post-title {
  color: var(--bone) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  padding: 14px 16px 4px !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Price */
li.wc-block-product .wp-block-woocommerce-product-price {
  color: var(--smoke) !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  padding: 2px 16px 14px !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Button — layout; visual from button system */
li.wc-block-product .wp-block-woocommerce-product-button {
  margin: auto 16px 16px !important;
}
li.wc-block-product .wp-block-woocommerce-product-button .wp-element-button {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  padding: 10px 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 600px) {
  ul.wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ══ Product card inside guides — same component as the homepage ═════
   The base .drtk-product-card rules (products section) apply globally;
   these overrides only undo the .drtk-article h3/p/a typography that
   would otherwise bleed into the card, and size it for article flow. */
.drtk-article .drtk-product-card {
  max-width: 380px;
  margin: 36px auto 48px;
}
.drtk-article .drtk-product-card p { margin: 0; padding: 0; }
/* Several cards in a row (guide HTML wraps them in .drtk-guide-cards):
   stacked on mobile, side by side from 700px. */
.drtk-article .drtk-guide-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 36px 0 48px;
}
.drtk-article .drtk-guide-cards > p:empty { display: none; }
.drtk-article .drtk-guide-cards .drtk-product-card {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .drtk-article .drtk-guide-cards { grid-template-columns: repeat(2, 1fr); }
  .drtk-article .drtk-guide-cards .drtk-product-card { max-width: none; margin: 0; }
}
.drtk-article .drtk-product-card__cat {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--smoke);
}
.drtk-article .drtk-product-card__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
  text-transform: none;
  margin: 0;
  color: var(--bone);
}
.drtk-article .drtk-product-card__name a {
  color: var(--bone) !important;
  text-decoration: none !important;
}
.drtk-article .drtk-product-card__desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--smoke);
}
.drtk-article .drtk-product-card__actions a {
  text-decoration: none !important;
}

/* ── Article tables (Basalt: mono headers, ash grid) ── */
.drtk-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 24px;
}
.drtk-article th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--smoke);
  background: var(--surface);
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--ash);
}
.drtk-article td {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bone);
  padding: 10px 12px;
  border: 1px solid var(--ash);
  vertical-align: top;
}
.drtk-article td:first-child { color: var(--smoke); }
/* DK-13: the head-safety comparison went from 3 to 4 columns, which squeezes
   every cell to ~85px on a 375px screen. The table scrolls inside its own
   container instead — the page body must never scroll horizontally. Wrapper
   comes from the post content itself (a CSS-only fix isn't possible: display
   :block on the table would split thead from tbody and break column
   alignment). Any future wide table in a guide wants the same wrapper. */
.drtk-article .drtk-table-scroll {
  overflow-x: auto;
  margin: 20px 0 24px;
  -webkit-overflow-scrolling: touch;
}
.drtk-article .drtk-table-scroll table { margin: 0; min-width: 540px; }

/* ── DK-06: footer social row ─────────────────────────────────────────── */
.drtk-footer__social {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  gap: 14px;
}
.drtk-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--ash);
  border-radius: 0;
  color: var(--smoke);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  transition: border-color var(--trans), color var(--trans);
}
.drtk-footer__social a:hover { border-color: var(--bone); color: var(--bone); }
.drtk-footer__social svg { flex-shrink: 0; }
/* The dot of the Instagram glyph: a zero-length round-capped line, so it stays
   a stroke like every other icon rather than becoming a filled shape (§3.7). */
.drtk-footer__social svg line { stroke-width: 2.4; }

/* ── Simple Analytics credit (text link) ──────────────────────────────────
   The a.sa-credit rules are SA's snippet, verbatim — it `all: unset`s itself and
   takes font, size and colour from its parent, so all styling lives on the
   wrapper. Hover is on the wrapper too, for the same reason. */
.drtk-footer__credit {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--smoke);
  transition: color var(--trans);
}
.drtk-footer__credit:hover,
.drtk-footer__credit:focus-within { color: var(--bone); }
a.sa-credit, a.sa-credit:visited, a.sa-credit:hover, a.sa-credit:active {
  all: unset !important; display: block !important; cursor: pointer !important;
  line-height: 1.6 !important;
}
a.sa-credit:focus-visible {
  outline: 2px solid currentColor !important; outline-offset: 4px !important;
}
a.sa-credit > span { all: unset !important; }
a.sa-credit > .sa-credit__byline { white-space: nowrap !important; }
a.sa-credit svg {
  all: unset !important; display: inline-block !important;
  height: 0.914em !important; vertical-align: -0.2em !important;
  fill: currentColor !important;
}
@supports (height: 1cap) {
  a.sa-credit svg { height: 1.305714cap !important; vertical-align: -0.285714cap !important; }
}


/* ── DK-06: Instagram section ─────────────────────────────────────────────
   Native cards, not Instagram embeds — self-hosted images styled to read as
   posts. No iframe, no Meta script, no cookie. Because we own the markup the
   cards follow Basalt properly: square corners, --surface, --ash borders,
   border-colour hover with no lift or shadow (§3.5). */
.drtk-ig { padding: 96px 0; border-top: 1px solid var(--ash); }
.drtk-ig__sub {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--smoke);
  margin: 12px 0 32px;
}
.drtk-ig__grid {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  /* 4-up above ~1150px, degrading to 3 then 2 as space runs out. Smaller
     tiles also mean the browser can pick a smaller srcset candidate. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.drtk-ig__card {
  background: var(--surface);
  border: 1px solid var(--ash);
  border-radius: 0;
  overflow: hidden;
  transition: border-color var(--trans);
}
.drtk-ig__card:hover { border-color: var(--bone); }
.drtk-ig__card > a { display: block; text-decoration: none; color: inherit; }

/* Post header: avatar dot, handle, Instagram glyph — the visual cue that
   makes this read as a post rather than a product tile. */
.drtk-ig__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--ash);
}
.drtk-ig__avatar {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--smoke);
  border-radius: 50%;
  background: var(--abyss);
}
.drtk-ig__handle {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--bone);
}
.drtk-ig__glyph { margin-left: auto; color: var(--smoke); flex-shrink: 0; }
.drtk-ig__card:hover .drtk-ig__glyph { color: var(--bone); }

.drtk-ig__media { display: block; position: relative; aspect-ratio: 1 / 1; background: var(--abyss); }
.drtk-ig__media .drtk-ig__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.drtk-ig__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 13px;
}
.drtk-ig__stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--smoke);
}
.drtk-ig__stat svg { flex-shrink: 0; }
.drtk-ig__date {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--smoke);
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .drtk-ig { padding: 64px 0; }
  .drtk-ig__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .drtk-ig__head { padding: 9px 10px; gap: 7px; }
  .drtk-ig__avatar { width: 18px; height: 18px; }
  .drtk-ig__handle { font-size: 10px; }
  .drtk-ig__meta { padding: 9px 10px; gap: 10px; }
  .drtk-ig__date { display: none; }
}

/* ── DK-07: free-shipping progress notice (cart) ──────────────────────── */
.drtk-freeship {
  margin: 0 0 24px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--ash);
  border-radius: 0;
}
.drtk-freeship__text {
  margin: 0 0 10px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--smoke) !important;
}
.drtk-freeship.is-met .drtk-freeship__text { color: var(--bone) !important; }
.drtk-freeship__bar {
  height: 3px;
  background: var(--ash);
  border-radius: 0;
  overflow: hidden;
}
/* Fill is --bone, not --azure: the announcement bar already spends the one
   accent this screen is allowed (design system §3.1). */
.drtk-freeship__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--bone);
  transition: width var(--trans);
}
@media (prefers-reduced-motion: reduce) {
  .drtk-freeship__fill { transition: none; }
}

/* ── DK-08: two-item nudge (product page) ─────────────────────────────── */
.drtk-two-up {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--ash);
  border-radius: 0;
}
/* Doubled selector (0,2,0) to beat .woocommerce p (0,1,1) — the same trap
   the disclaimer hit in P0 #6. */
.drtk-two-up .drtk-two-up__text,
.drtk-two-up p.drtk-two-up__text {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--bone) !important;
}
.drtk-two-up__btn {
  flex-shrink: 0;
  background: transparent;
  color: var(--smoke);
  border: 1px solid var(--ash);
  border-radius: 0 !important;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .03em;
  cursor: pointer;
  transition: border-color var(--trans), color var(--trans);
}
.drtk-two-up__btn:hover:not(:disabled) { border-color: var(--bone); color: var(--bone); }
.drtk-two-up__btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 480px) {
  .drtk-two-up { flex-direction: column; align-items: stretch; }
  .drtk-two-up__btn { width: 100%; }
}

/* ═════════════════════════════ 11. iOS FOCUS ZOOM — 16px FLOOR ══ */
/* WebKit (Safari iOS *and* Chrome iOS) zooms the page whenever a field
   under 16px takes focus, and never zooms back out on blur. The viewport
   tag has no maximum-scale, so the behaviour is live. On a 9-field
   checkout that is nine manual pinch-to-dezooms before the order goes
   through. 16px on mobile is the platform's minimum, not a break with
   §3.2 — desktop keeps 14px.

   Two layers, because the fields have two different problems:
   1. The catch-all below (0,0,1) covers anything left at the UA default
      — checkout's shipping-address_2 measured 13.33px, i.e. no author
      rule reached it at all.
   2. The explicit list re-states the selectors that already set a
      font-size with !important; the catch-all cannot outrank those on
      specificity, so they are matched shape-for-shape and win on source
      order. Keep the two lists in sync if either side gains a selector.

   Non-text controls are excluded: radios, checkboxes and button-like
   inputs never trigger the zoom, and 16px would resize the button
   system (search "BUTTON SYSTEM"). */
@media (max-width: 900px) {
  input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Checkout / WooCommerce fields — mirrors the "Inputs" block */
  .woocommerce input[type="text"],
  .woocommerce input[type="email"],
  .woocommerce input[type="tel"],
  .woocommerce input[type="number"],
  .woocommerce input[type="password"],
  .woocommerce textarea,
  .woocommerce select,
  .wc-block-components-text-input input,
  .wc-block-components-select select,
  .wc-block-components-country-input select,
  .wc-block-components-state-input select,
  .wc-block-components-textarea,
  /* Waitlist capture — matched at (0,3,1) upstream, so matched here too */
  .drtk-waitlist__input,
  .woocommerce input.drtk-waitlist__input[type="email"],
  /* Marketing forms */
  .drtk-newsletter__input,
  .drtk-contact-form__input,
  .drtk-contact-form__textarea,
  /* Public review page — the WooCommerce comment form rendered off a product
     page. Its own rules in the /avis block set font-size WITHOUT !important
     precisely so the catch-all above already wins; these are listed anyway so
     the pair stays symmetrical if that ever changes. */
  .drtk-page--avis .comment-form input[type="text"],
  .drtk-page--avis .comment-form input[type="email"],
  .drtk-page--avis .comment-form textarea,
  .drtk-page--avis .comment-form select {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════ 12. MOB-03 — TOUCH TARGETS ≥ 44px ══ */
/* Apple HIG asks 44×44pt, Material 48×48dp; we hold 44. Measured at 390px
   before the fix: cart 20×36, burger 28×24, Sendcloud service-point 186×35.
   The first two are the permanent navigation controls — the cart glyph is the
   entry point of the whole funnel and was the narrowest thing on the page.

   The enlargement must not be visible: Basalt is geometric and compact, so the
   glyphs keep their size and only the hit area grows.

   Both nav controls use an absolutely positioned ::after overlay rather than
   padding. The ticket proposed padding for the cart, but the cart is
   `justify-self: end` in the nav grid — padding-right would have pushed the
   glyph 12px left of the gutter it currently aligns to, and it would also have
   dragged .drtk-cart-count (absolute, right: -10px) along with it, needing a
   compensating offset. The overlay leaves the box untouched, so the badge needs
   no adjustment at all and nothing can drift.

   Geometry checked at 390px: both controls are centred at y=34 inside a 69px
   header, so a 44px overlay spans y 12–56 and stays inside the header — it
   cannot swallow clicks meant for the announcement bar above or the content
   below. Horizontally it reaches 16px and 378px, both inside the viewport.

   Mobile only: on desktop the pointer is precise and the nav sits on the
   3-column grid of §4. */
@media (max-width: 900px) {
  .drtk-cart-btn,
  .drtk-burger { position: relative; }

  .drtk-cart-btn::after,
  .drtk-burger::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }

  /* Service-point button: 186×35 → height 44. On the default path — it is the
     preselected option and the one that is free from 2 items — so it earns the
     full target. Padding rather than an overlay: it is a standalone block
     button, nothing is anchored to it. */
  body.woocommerce-checkout #sendcloudshipping_service_point_select {
    padding: 13px 16px !important;
    min-height: 44px !important;
  }
}

/* ═════════════════ RV-01 / RV-02 — PUBLIC REVIEW PAGE (/avis) ══════════════
   The form is WooCommerce's own product review form rendered off a product
   page (see drtk_avis_review_form in functions.php), so it arrives with core's
   #respond / .comment-form-* markup and none of the block theme's form styling
   that dresses it on the product page. Everything below is that dressing,
   scoped to .drtk-page--avis so nothing here can reach the product page.

   The submit button needs no rule: `woocommerce` is on the body, and
   `.woocommerce #respond input#submit` is already in the BUTTON SYSTEM block.

   ⚠️ font-size is deliberately set WITHOUT !important on the text inputs, so
   the 16px iOS floor in §11 (a bare `input, select, textarea` selector at
   0,0,1) can still win on mobile. The explicit list in §11 also names these
   selectors — keep the two in sync. */

.drtk-avis { padding: 40px 0 80px; background: var(--basalt); }
/* La page prend la largeur habituelle du site (--max), comme /reviews/ et
   toutes les autres : c'est le rythme du site, et une page plus étroite se
   remarque. Ce qui doit rester étroit, c'est la COLONNE DE SAISIE — un champ
   de 1100 px de large est illisible et décourage l'écriture. Le formulaire et
   le bloc de transparence sont donc centrés à 720 px à l'intérieur du
   conteneur pleine largeur, et la grille d'avis dessous occupe toute la
   largeur, en 3 colonnes, exactement comme /reviews/. */
.drtk-avis-intro,
.drtk-avis-form,
.drtk-avis-thanks,
.drtk-avis .drtk-review-transparency {
  max-width: 720px;
}

.drtk-avis-intro {
  font-size: 15px;
  line-height: 1.7;
  color: var(--smoke);
  margin: 0 0 32px;   /* aligné à gauche, comme le H1 juste au-dessus */
}

/* ── The form block ── */
.drtk-avis-form {
  background: var(--surface);
  border: 1px solid var(--ash);
  padding: 28px;
}
.drtk-avis-form__label,
.drtk-page--avis .drtk-avis-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0 0 10px;
}
.drtk-page--avis .drtk-avis-form .required { color: var(--azure); }

/* What is being reviewed. A statement with one product, a picker of links
   with several (page-avis.php): the chosen row gets the bone border, the
   others step back once a choice exists. */
.drtk-avis-picker {
  display: grid;
  gap: 10px;
  margin: 0 0 28px;
}
.drtk-avis-product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--ash);
  background: var(--basalt);
}
a.drtk-avis-product {
  text-decoration: none;
  transition: border-color .15s ease, opacity .15s ease;
}
a.drtk-avis-product:hover,
a.drtk-avis-product:focus-visible,
a.drtk-avis-product[aria-current] { border-color: var(--bone); }
.drtk-avis-picker.has-choice a.drtk-avis-product:not([aria-current]) { opacity: .55; }
.drtk-avis-picker.has-choice a.drtk-avis-product:not([aria-current]):hover { opacity: 1; }
.drtk-avis-product__img {
  width: 48px; height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 0;
}
.drtk-avis-product__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--bone);
  line-height: 1.4;
}

/* Core prints the reply title even when empty; RV-01 wants nothing between the
   H1 and the form, but the heading still has to exist for screen readers. */
.drtk-page--avis .comment-reply-title.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.drtk-page--avis #cancel-comment-reply-link { display: none !important; }
/* ⚠️ !important is load-bearing here, not decoration. `woocommerce` is on this
   page's body, and the theme's own `.woocommerce label` rule sets mono +
   uppercase + letter-spacing with !important — correct for a checkout field
   label, unreadable on two sentences of prose. Without !important these two
   render as 10px uppercase JetBrains Mono. */
.drtk-page--avis .comment-notes,
.drtk-page--avis .comment-form-cookies-consent label {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--smoke) !important;
  margin: 0 0 20px;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
}
.drtk-page--avis .comment-form p { margin: 0 0 20px; }
.drtk-page--avis .comment-form p:last-of-type { margin-bottom: 0; }

.drtk-page--avis .comment-form input[type="text"],
.drtk-page--avis .comment-form input[type="email"],
.drtk-page--avis .comment-form textarea,
.drtk-page--avis .comment-form select {
  width: 100%;
  background: var(--basalt);
  border: 1px solid var(--ash);
  border-radius: 0;
  padding: 12px 14px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  transition: border-color var(--trans);
  -webkit-appearance: none;
  appearance: none;
}
.drtk-page--avis .comment-form textarea { min-height: 140px; resize: vertical; }
.drtk-page--avis .comment-form input:focus,
.drtk-page--avis .comment-form textarea:focus,
.drtk-page--avis .comment-form select:focus {
  outline: none;
  border-color: var(--azure);
}
.drtk-page--avis .comment-form select {
  /* Native arrow is invisible on a dark field in Safari — draw our own. */
  background-image: linear-gradient(45deg, transparent 50%, var(--smoke) 50%),
                    linear-gradient(135deg, var(--smoke) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.drtk-page--avis .comment-form-cookies-consent {
  display: flex; align-items: flex-start; gap: 10px;
}
.drtk-page--avis .comment-form-cookies-consent input { margin-top: 3px; flex-shrink: 0; }
.drtk-page--avis .comment-form-cookies-consent label { margin: 0; }

/* CusRev's photo/video uploader, injected into comment_field by the
   woocommerce_product_review_comment_form_args filter. Its own frontend.css is
   written for a light theme, so the label and preview need re-grounding. */
.drtk-page--avis .cr-upload-local-images { margin: 0 0 20px; }
.drtk-page--avis .cr-upload-images-status {
  /* Was a faint box with 10px smoke mono text: people scrolled straight past
     it (Robin, 2026-09-29), and photo reviews are the point of this page.
     Now bone on surface, body font, with a camera icon.
     ⚠️ The !important are load-bearing: `.woocommerce label` forces smoke /
     10px / mono / uppercase with !important on every label of the page (the
     <body> carries .woocommerce), and `.drtk-page--avis .drtk-avis-form
     label` (0,2,1) resets display and margin. That pair is what made the old
     button so faint in the first place — the 11px mono set here never won. */
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  margin: 0 !important;
  border: 1px dashed var(--bone);
  background: var(--surface);
  padding: 18px 16px;
  text-align: center;
  cursor: pointer;
  color: var(--bone) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  transition: border-color var(--trans), background-color var(--trans);
}
/* The icon is a pseudo-element on purpose: frontend.js rewrites the label
   with .text() after every pick, which would wipe an inline <svg>. Drawn as
   a stroke-only mask (design system: single weight, never filled), coloured
   by currentColor so it follows the text. */
.drtk-page--avis .cr-upload-images-status::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='miter'%3E%3Cpath d='M2.75 7.25h4.5l2-3h5.5l2 3h4.5v12.5H2.75z'/%3E%3Ccircle cx='12' cy='13.25' r='3.75'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='miter'%3E%3Cpath d='M2.75 7.25h4.5l2-3h5.5l2 3h4.5v12.5H2.75z'/%3E%3Ccircle cx='12' cy='13.25' r='3.75'/%3E%3C/svg%3E") center / contain no-repeat;
}
.drtk-page--avis .cr-upload-images-status:hover {
  border-style: solid;
  background: var(--basalt);
}
/* Le vrai champ fichier est masqué : c'est le label en pointillés au-dessus qui
   sert de zone cliquable. ⚠️ !important obligatoire ici, et ce n'est pas de la
   décoration : CusRev pose `width: 100%` via
   `#review_form .cr-upload-local-images #cr_review_image` (spécificité 2,1,0),
   qui bat notre sélecteur. Inoffensif sur la fiche produit où le champ est en
   flux, mais notre `position: absolute` fait alors résoudre ce 100% contre le
   bloc conteneur initial — donc la largeur de la fenêtre — et la page se met à
   défiler horizontalement de ~175 px. */
.drtk-page--avis #cr_review_image {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}
.drtk-page--avis .cr-upload-images-preview img,
.drtk-page--avis .cr-upload-images-preview video { border-radius: 0; }
.drtk-avis-hint {
  font-size: 12px;
  color: var(--smoke);
  margin: 8px 0 0;
  font-style: italic;
}

/* Honeypot: off-screen rather than display:none — a bot that filters on
   display:none skips it, which defeats the point. */
.drtk-avis-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ── Confirmation after submit (?merci=1) ── */
.drtk-avis-thanks {
  background: var(--surface);
  border: 1px solid var(--ash);
  padding: 48px 28px;
  text-align: center;
}
.drtk-avis-thanks__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  color: var(--bone);
  margin: 0 0 12px;
}
.drtk-avis-thanks__body { font-size: 15px; color: var(--smoke); margin: 0 0 28px; line-height: 1.7; }
.drtk-avis-empty { font-size: 15px; color: var(--smoke); }

/* ── RV-02 transparency block ──
   Deliberately quiet: it is a legal statement, not a selling point, and the
   badge it defines is what has to carry the weight. */
.drtk-review-transparency {
  border: 1px solid var(--ash);
  padding: 24px;
  margin: 40px 0 0;
  background: transparent;
}
.drtk-review-transparency__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 14px;
}
.drtk-review-transparency p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--smoke);
  margin: 0 0 12px;
}
.drtk-review-transparency p:last-child { margin-bottom: 0; }
/* On the product page it sits under the review form, inside WooCommerce's
   own container, so it needs the same width treatment as the form above it. */
.woocommerce #review_form_wrapper .drtk-review-transparency,
.woocommerce #reviews .drtk-review-transparency { margin-top: 32px; }

/* ── Example reviews under the form ── */
.drtk-avis-examples { margin: 48px 0 0; }
.drtk-avis-examples__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0 0 20px;
}
/* Identiques aux cartes de /reviews/ (demande Robin, 2026-09-02) : cette page
   ne change du gabarit de base que le fond, exactement comme
   .drtk-reviews--page. Pas de grille à 2 colonnes ni de padding réduit ici —
   c'est ce qui faisait diverger les deux styles. */
.drtk-avis-examples .drtk-reviews__grid { margin-top: 0; }
.drtk-avis-examples .drtk-review-card { background: var(--surface); }
.drtk-avis-examples__more {
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.drtk-avis-examples__more a { color: var(--azure); text-decoration: none; }
.drtk-avis-examples__more a:hover { text-decoration: underline; }

/* ── Review photos in cards (shared: /avis + /reviews/) ── */
.drtk-review-media {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.drtk-review-media__item {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--ash);
  border-radius: 0;
  display: block;
}

/* CTA at the top of /reviews/ — the shared .drtk-reviews__cta rule carries a
   48px top margin for the homepage instance, which is wrong above a grid. */
.drtk-reviews--page .drtk-reviews__cta { margin: 0 0 32px; text-align: center; }

@media (max-width: 640px) {
  .drtk-avis-form { padding: 20px 16px; }
  .drtk-avis-thanks { padding: 36px 20px; }
}

/* ═══════════════ RV-04 — PURCHASE-SOURCE BADGE ═════════════════════════════
   Text, never an icon, and legible without colour: the badge has to survive
   being screenshotted for Instagram and being read by someone who cannot pick
   the accent out. The azure is decoration — the words carry the meaning.

   It is a link because a badge with no reachable explanation is exactly the
   pattern RV-04 exists to avoid; it points at the RV-02 transparency block,
   which is on every page the badge appears on. */
.drtk-source-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azure);
  border: 1px solid var(--ash);
  border-radius: 0;
  padding: 4px 8px;
  margin-top: 8px;
  text-decoration: none;
  line-height: 1.3;
  transition: border-color var(--trans);
}
.drtk-source-badge:hover { border-color: var(--azure); text-decoration: none; }

/* Product page: sits under WooCommerce's own author/date paragraph. The
   `.woocommerce a` colour rule would otherwise repaint it. */
.woocommerce #reviews .commentlist a.drtk-source-badge,
.woocommerce #reviews .commentlist a.drtk-source-badge:hover {
  color: var(--azure) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  margin: 4px 0 10px;
}

.drtk-source-legend {
  font-size: 12px;
  line-height: 1.6;
  color: var(--smoke);
  margin: 24px 0 0;
}
.drtk-source-legend a { color: var(--azure); }
.woocommerce #reviews .drtk-source-legend { margin: 0 0 20px; }

/* The optional "where did you buy" question on /avis. Same field styling as the
   rest of the form; the helper line sits under the control, not beside it. */
.drtk-page--avis .comment-form-drtk-source .drtk-avis-hint { display: block; margin-top: 6px; }

/* ══════════════════════════════════ BACKWASH, CAPBRETON (2026-11-05) ══
   Stockist + free pickup. Markup: functions.php (announcement slot 4,
   drtk_reassurance_strip(), footer "Aide"), front-page.php §4b,
   page-backwash.php. Facts: drtk_backwash(). */

/* Announcement bar — the Backwash slot is a link. ID-scoped so it beats
   .woocommerce a on product pages, like the span lock in §1. */
#drtk-ann a {
  color: var(--basalt) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Product page — full-width last row of the reassurance strip. Doubled
   selectors for the same .woocommerce li/p !important reason as above. */
.drtk-reassure li.drtk-reassure__stockist {
  grid-column: 1 / -1;
  padding-top: 12px !important;
  border-top: 1px solid var(--ash);
}
.drtk-reassure li.drtk-reassure__stockist a {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
}
.drtk-reassure li.drtk-reassure__stockist a span {
  color: var(--bone) !important;
  transition: color var(--trans);
}
.drtk-reassure li.drtk-reassure__stockist a:hover span { color: var(--azure) !important; }

/* Homepage §4b */
.drtk-stockist {
  scroll-margin-top: 68px;
  padding: 60px 0 80px;
  background: var(--basalt);
  border-top: 1px solid var(--ash);
}
.drtk-stockist__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.drtk-stockist__photo {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--abyss);
  border: 1px solid var(--ash);
}
.drtk-stockist__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.drtk-stockist__body .drtk-section-title { margin-bottom: 20px; }
.drtk-stockist__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--smoke);
  margin: 0 0 18px;
  max-width: 46ch;
}
.drtk-stockist__addr {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 24px;
}
@media (max-width: 900px) {
  .drtk-stockist__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* /backwash/ */
.drtk-bw {
  padding: clamp(24px, 3vw, 32px) 0 clamp(64px, 10vw, 120px);
}
.drtk-bw__intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.drtk-bw__photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--abyss);
  border: 1px solid var(--ash);
}
.drtk-bw__photo img { width: 100%; height: 100%; object-fit: cover; }
.drtk-bw__lead > p:first-child {
  font-size: 17px;
  line-height: 1.6;
  color: var(--bone);
  margin: 0 0 28px;
}
.drtk-bw__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.drtk-bw__note {
  font-size: 13px;
  color: var(--smoke);
  margin: 14px 0 0;
}
.drtk-bw__steps {
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.drtk-bw__step {
  background: var(--surface);
  border: 1px solid var(--ash);
  padding: 28px;
}
.drtk-bw__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--smoke);
  margin-bottom: 18px;
}
.drtk-bw__step h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--bone);
  margin: 0 0 10px;
}
.drtk-bw__step p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--smoke);
  margin: 0;
}
.drtk-bw__info {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--ash);
}
.drtk-bw__info-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 500;
  color: var(--bone);
  margin: 0 0 28px;
}
.drtk-bw__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0;
}
.drtk-bw__facts dt {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 10px;
}
.drtk-bw__facts dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--bone);
}
.drtk-bw__facts a,
.drtk-bw__muted a { color: var(--azure); text-decoration: underline; text-underline-offset: 3px; }
.drtk-bw__muted { color: var(--smoke); font-size: 13px; }
@media (max-width: 900px) {
  .drtk-bw__intro { grid-template-columns: 1fr; gap: 28px; }
  .drtk-bw__steps,
  .drtk-bw__facts { grid-template-columns: 1fr; }
  .drtk-bw__steps { margin-top: 40px; }
}

/* Checkout — "Expédier / Retrait" toggle. Only appears since local pickup
   was switched on (Backwash), so it had never been styled: WooCommerce's
   white selected pill held bone text, i.e. invisible. Basalt option cards
   instead: ash border, bone border + surface on the selected one. */
body.woocommerce-checkout .wc-block-checkout__shipping-method-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 10px !important;
}
body.woocommerce-checkout .wc-block-checkout__shipping-method-option {
  background: transparent !important;
  border: 1px solid var(--ash) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--smoke) !important;
  transition: border-color var(--trans), color var(--trans) !important;
}
body.woocommerce-checkout .wc-block-checkout__shipping-method-option:hover {
  border-color: var(--smoke) !important;
}
body.woocommerce-checkout .wc-block-checkout__shipping-method-option--selected {
  background: var(--surface) !important;
  border-color: var(--bone) !important;
  color: var(--bone) !important;
}
body.woocommerce-checkout .wc-block-checkout__shipping-method-option *:not(svg):not(path) {
  color: inherit !important;
}
body.woocommerce-checkout .wc-block-checkout__shipping-method-option svg {
  fill: currentColor !important;
}

/* Checkout — pickup locations: same option card as the delivery options,
   and the address + instructions shown (the shipping options hide their
   sub-descriptions; for a pickup point they ARE the information). */
body.woocommerce-checkout .wc-block-components-local-pickup-select .wc-block-components-radio-control__option {
  background: var(--surface) !important;
  border: 1px solid var(--ash) !important;
  padding: 16px 16px 16px 48px !important;
  margin: 0 !important;
}
body.woocommerce-checkout .wc-block-components-local-pickup-select .wc-block-components-radio-control__option-checked {
  border-color: var(--bone) !important;
}
body.woocommerce-checkout .wc-block-components-local-pickup-select .wc-block-components-radio-control__option::after,
body.woocommerce-checkout .wc-block-components-local-pickup-select .wc-block-components-radio-control__option::before {
  display: none !important;
}
body.woocommerce-checkout .wc-block-components-local-pickup-select .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-components-local-pickup-select .wc-block-components-radio-control__secondary-description {
  display: flex !important;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px !important;
  white-space: normal !important;
}
body.woocommerce-checkout .wc-block-components-local-pickup-select .wc-block-components-radio-control__description svg {
  flex: 0 0 16px;
  fill: currentColor;
}
/* The theme lays an option out as one row (name | price), which is right
   while the descriptions are hidden. With them shown, stack them under it. */
body.woocommerce-checkout .wc-block-components-local-pickup-select .wc-block-components-radio-control__option-layout {
  flex-direction: column !important;
  align-items: stretch !important;
}
body.woocommerce-checkout .wc-block-components-local-pickup-select .wc-block-components-radio-control__label-group {
  width: 100% !important;
}
body.woocommerce-checkout .wc-block-components-local-pickup-select .wc-block-components-radio-control__description-group {
  width: 100% !important;
}
/* Radio: the theme centres it with translateY(-50%) (rule "Fix radio button
   vertical centering" above), which is right for one-line delivery cards. The
   pickup card is three lines tall, so pin the radio to the first line — the
   location name — instead: same 16px offset as the card's top padding, no
   transform (radio and name are both 18px tall). */
body.woocommerce-checkout .wc-block-components-local-pickup-select .wc-block-components-radio-control__input {
  top: 16px !important;
  transform: none !important;
}

/* /installation-lotura/ — target of the QR code on the Lotura parcel notice */
.drtk-install {
  padding: clamp(24px, 3vw, 32px) 0 clamp(64px, 10vw, 120px);
}
.drtk-install .container { max-width: 960px; }
.drtk-install__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--bone);
  margin: 0 0 32px;
  max-width: 680px;
}
.drtk-install__video {
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--ash);
  margin-bottom: 40px;
}
.drtk-install__video video,
.drtk-install__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.drtk-install__soon {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--smoke);
  font-size: 14px;
}
.drtk-install__soon-t {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 8px;
}
.drtk-install__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.drtk-install__panels figure { margin: 0; border: 1px solid var(--ash); background: #000; }
.drtk-install__panels img { display: block; width: 100%; height: auto; }
.drtk-install__steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
}
.drtk-install__steps > div,
.drtk-install__tips {
  background: var(--surface);
  border: 1px solid var(--ash);
  padding: 28px;
}
.drtk-install h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--bone);
  margin: 0 0 16px;
}
.drtk-install ol,
.drtk-install ul { margin: 0; padding: 0; list-style: none; }
.drtk-install li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone);
  padding: 10px 0;
  border-top: 1px solid var(--ash);
}
.drtk-install__num {
  display: inline-block;
  min-width: 56px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--azure);
}
.drtk-install__tips { margin-top: 16px; }
.drtk-install__tips li { color: var(--smoke); }
.drtk-install__help { margin-top: 48px; }
.drtk-install__help p { color: var(--bone); font-size: 15px; margin: 0 0 16px; }
.drtk-install__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 700px) {
  .drtk-install__panels,
  .drtk-install__steps { grid-template-columns: 1fr; }
}
.drtk-install__zoom { display: block; position: relative; cursor: zoom-in; }
.drtk-install__zoom-hint {
  position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--basalt); border: 1px solid var(--ash); color: var(--bone);
}
.drtk-install__zoom-hint svg { width: 18px; height: 18px; }
.drtk-install__panels figcaption { padding: 12px 14px; border-top: 1px solid var(--ash); background: var(--basalt); }
.drtk-install__panels figcaption a,
.drtk-lightbox__dl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bone) !important; text-decoration: none !important; }
.drtk-install__panels figcaption svg { width: 16px; height: 16px; }
.drtk-install__pdf { margin: 20px 0 0; }
.drtk-lightbox { padding: 0; border: 1px solid var(--ash); background: #000; max-width: 96vw; max-height: 96vh; overflow: auto; }
.drtk-lightbox::backdrop { background: rgba(12,10,9,.92); }
.drtk-lightbox__img { display: block; width: min(900px, 94vw); height: auto; }
.drtk-lightbox__close {
  position: sticky; top: 0; float: right; z-index: 2; width: 44px; height: 44px;
  background: var(--basalt); border: 1px solid var(--ash); color: var(--bone); cursor: pointer;
}
.drtk-lightbox__close svg { width: 20px; height: 20px; }
.drtk-lightbox__dl { padding: 14px; }