/*
 * THE HOOKAH — scoped presentation draft, 2026-09-15.
 * Active only when an integration layer adds body.th-design-layer.
 * Load after the existing theme, child theme and Customizer CSS.
 * No text, content-URL, price or interaction changes.
 * Only the recorded empty-alt hero photo is replaced decoratively in CSS.
 * Manrope font files must be loaded separately from verified local assets.
 */

body.th-design-layer {
  --th-surface: #303030;
  --th-header: #242424;
  --th-footer: #202020;
  --th-paper: #ffffff;
  --th-ink: #242424;
  --th-ivory: #f1f1ec;
  --th-text: #f2eee4;
  --th-muted: #d6d0c4;
  --th-gold: #c4ad76;
  --th-gold-dark: #80652f;
  --th-satin-border: linear-gradient(115deg, #a37d3f 0%, #c7ad70 48%, #a98649 100%);
  --th-radius: 18px;
  --th-font: "Manrope", Arial, sans-serif;
  background-color: var(--th-surface);
  color: var(--th-text);
  font-family: var(--th-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

/* Theme surfaces; the homepage .front-page-main has an inline white fill. */
body.th-design-layer .main,
body.th-design-layer .module,
body.th-design-layer .module-small,
body.th-design-layer .home-product-slider {
  background-color: var(--th-surface);
  color: var(--th-text);
}

body.th-design-layer .front-page-main {
  background-color: var(--th-surface) !important;
}

/* Verified homepage override: the previous #latest rule still painted #efeeed. */
body.th-design-layer.home #latest {
  background-color: var(--th-surface) !important;
}

body.th-design-layer .font-alt,
body.th-design-layer .module-title,
body.th-design-layer .product_title,
body.th-design-layer .shop-item-title,
body.th-design-layer .widget-title,
body.th-design-layer .site-title,
body.th-design-layer .site-description {
  font-family: var(--th-font);
  font-style: normal;
}

body.th-design-layer .main strong,
body.th-design-layer .main b {
  font-weight: 800;
}

body.th-design-layer .module-title,
body.th-design-layer .product_title,
body.th-design-layer .page-module-content h2,
body.th-design-layer .page-module-content h3 {
  color: var(--th-ivory);
  font-family: var(--th-font);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  font-style: normal;
  overflow-wrap: anywhere;
  text-shadow: none;
}

body.th-design-layer .module-title,
body.th-design-layer .product_title {
  font-size: clamp(28px, 3.5vw, 44px);
}

body.th-design-layer .page-module-content,
body.th-design-layer .summary,
body.th-design-layer .term-description {
  color: var(--th-text);
}

body.th-design-layer .page-module-content a,
body.th-design-layer .term-description a,
body.th-design-layer .summary a {
  color: var(--th-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

/* Category snapshot: the native sorting control remains a white surface. */
body.th-design-layer .woocommerce-ordering select.orderby,
body.th-design-layer .woocommerce-ordering select.orderby option {
  color: var(--th-ink);
  background-color: var(--th-paper);
}

body.th-design-layer .woocommerce-breadcrumb,
body.th-design-layer .woocommerce-breadcrumb a {
  color: var(--th-muted);
}

/* Existing header structure only. Collapse, submenu state and offsets remain
 * owned by the theme and its native-submenu implementation. */
body.th-design-layer .navbar-custom,
body.th-design-layer.home .navbar-transparent,
body.th-design-layer #custom-collapse .sub-menu {
  background-color: var(--th-header) !important;
}

body.th-design-layer .navbar-custom {
  border-bottom: 1px solid #a38d62;
  box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
  font-family: var(--th-font);
}

body.th-design-layer .shop_isle_header_title .site-title a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-family: var(--th-font);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: .045em;
  overflow-wrap: anywhere;
}

body.th-design-layer .shop_isle_header_title .site-title a::before {
  content: "";
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid #a38d62;
  border-radius: 50%;
  background: var(--th-paper) url("logo-optimized.webp") center / 84% auto no-repeat;
}

body.th-design-layer .shop_isle_header_title .site-description a {
  color: var(--th-muted);
  font-family: var(--th-font);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
}

body.th-design-layer .navbar-custom .nav > li > a,
body.th-design-layer #custom-collapse .sub-menu a,
body.th-design-layer #custom-collapse .thehookah-native-submenu-label {
  color: var(--th-text);
  font-family: var(--th-font);
  font-weight: 700;
  letter-spacing: .03em;
}

body.th-design-layer .navbar-custom .nav > li > a:hover,
body.th-design-layer .navbar-custom .nav > li > a:focus-visible,
body.th-design-layer #custom-collapse .sub-menu a:hover,
body.th-design-layer #custom-collapse .sub-menu a:focus-visible {
  color: var(--th-gold);
  background-color: var(--th-header);
}

body.th-design-layer .navbar-custom .icon-bar {
  background-color: var(--th-ivory);
}

/* Recorded hero: #home > img[alt=""] + .container, h1 + inner subtitle.
 * Retain all text and the h1; replace only the empty-alt decorative photo.
 * The theme's absolute ::before overlay is cleared; ::after is the new
 * decorative grid item. The referenced user-provided image is unchanged. */
body.th-design-layer.home #home {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: 160px max(24px, calc((100% - 1170px) / 2)) 72px;
  background-color: var(--th-surface) !important;
  background-image: none !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: left;
}

body.th-design-layer.home #home > img[alt=""] {
  display: none;
}

body.th-design-layer.home #home::before {
  background: none;
}

body.th-design-layer.home #home::after {
  content: "";
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 5;
  box-sizing: border-box;
  border: 1.5px solid transparent;
  border-radius: 28px;
  background-image: url("hero-medusa.webp"), linear-gradient(var(--th-paper), var(--th-paper)), var(--th-satin-border);
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  background-size: contain, 100% 100%, 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
}

body.th-design-layer.home #home > .container {
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

body.th-design-layer.home #home > .container > .row {
  margin: 0;
}

body.th-design-layer.home #home > .container > .row > .col-sm-6 {
  float: none;
  width: auto;
  min-width: 0;
  margin-left: 0;
  padding: 0;
}

body.th-design-layer.home #home h1 {
  color: var(--th-ivory);
  font-family: var(--th-font);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(34px, 4.7vw, 64px);
  line-height: 1.12;
  letter-spacing: .015em;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 18px rgb(0 0 0 / 55%);
}

body.th-design-layer.home #home h1 .hs-title-size-1 {
  color: var(--th-ivory);
  font-family: var(--th-font);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 700;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: .02em;
}

body.th-design-layer.home #home .thehookah-home-seo-intro {
  font-family: var(--th-font);
  font-weight: 400;
  line-height: 1.65;
  overflow-wrap: anywhere;
  text-align: left !important;
}

/* Static image frames only: no gallery selectors or carousel dimensions. */
body.th-design-layer #banners .content-box-image,
body.th-design-layer #latest .shop-item-image,
body.th-design-layer ul.products li.product .shop-item-image,
body.th-design-layer #products-slider .ex-product > a {
  box-sizing: border-box;
  background: linear-gradient(var(--th-paper), var(--th-paper)) padding-box,
    var(--th-satin-border) border-box;
  background-repeat: no-repeat;
  background-position: center;
  border: 1.5px solid transparent;
  border-radius: var(--th-radius);
  box-shadow: none;
}

body.th-design-layer #banners .content-box-image img,
body.th-design-layer #latest .shop-item-image > img,
body.th-design-layer ul.products li.product .shop-item-image img,
body.th-design-layer #products-slider .ex-product > a > img {
  max-width: 100%;
  object-fit: contain !important;
  object-position: center;
  border-radius: calc(var(--th-radius) - 2px);
}

body.th-design-layer #banners .content-box-image img {
  width: 100%;
  height: auto;
}

body.th-design-layer .shop-item-title,
body.th-design-layer .shop-item-title a {
  color: var(--th-ivory);
  font-family: var(--th-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .015em;
  overflow-wrap: anywhere;
}

/* Price helpers inserted by the existing shop snippets inherit colors from
 * the old light theme. Keep all price text readable on the dark section. */
body.th-design-layer #latest .th-27-price-preview del,
body.th-design-layer #latest .th-27-price-preview del .woocommerce-Price-amount {
  color: var(--th-gold) !important;
}

body.th-design-layer #latest .th-27-price-preview small,
body.th-design-layer #products-slider .module-subtitle {
  color: var(--th-muted) !important;
}

/* Existing white comparison cards; inline backgrounds stay white. */
body.th-design-layer .thehookah-home-model-compare {
  color: var(--th-text) !important;
}

body.th-design-layer .thehookah-home-model-compare > h2 {
  color: var(--th-ivory);
  font-family: var(--th-font);
  font-weight: 800;
}

body.th-design-layer .thehookah-home-model-compare article {
  color: var(--th-ink);
  border: 1.5px solid transparent !important;
  border-radius: var(--th-radius) !important;
  background: linear-gradient(var(--th-paper), var(--th-paper)) padding-box,
    var(--th-satin-border) border-box !important;
}

body.th-design-layer .thehookah-home-model-compare article h3,
body.th-design-layer .thehookah-home-model-compare article a {
  color: var(--th-gold-dark);
  font-family: var(--th-font);
  font-weight: 800;
  line-height: 1.45;
}

/* Existing text buttons. Do not target icon controls, payment provider
 * widgets, disabled states, quantities, or variation selectors. */
body.th-design-layer .main a.button,
body.th-design-layer .main button.button,
body.th-design-layer #sb_instagram .sbi_load_btn {
  box-sizing: border-box;
  max-width: 100%;
  color: var(--th-gold);
  background: linear-gradient(#292929, #292929) padding-box,
    var(--th-satin-border) border-box;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-family: var(--th-font);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .015em;
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.th-design-layer #sb_instagram .sbi_follow_btn a {
  color: var(--th-ivory) !important;
  background: var(--th-footer) !important;
  border: 1.5px solid var(--th-gold) !important;
}

body.th-design-layer .main a.button:hover,
body.th-design-layer .main button.button:hover,
body.th-design-layer #sb_instagram .sbi_load_btn:hover {
  color: var(--th-gold);
  background: linear-gradient(var(--th-header), var(--th-header)) padding-box,
    var(--th-satin-border) border-box;
  border-color: transparent;
}

/* The snapshot's existing .btn links are a separate theme button family.
 * Their dark fill and restrained satin outline keep the original text. */
body.th-design-layer .main a.btn {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  color: var(--th-gold);
  background: linear-gradient(var(--th-header), var(--th-header)) padding-box,
    var(--th-satin-border) border-box;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-family: var(--th-font);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .015em;
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.th-design-layer .main a.btn:hover,
body.th-design-layer .main a.btn:focus-visible {
  color: var(--th-gold);
  background: linear-gradient(var(--th-header), var(--th-header)) padding-box,
    var(--th-satin-border) border-box;
  border-color: transparent;
}

/* Measured overflow source at 390px: inline margin + nowrap on these links.
 * Replace margins with a wrapping flex gap; do not clip the document. */
body.th-design-layer #latest .row.mt-30 .col-sm-12.align-center {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

body.th-design-layer #latest .row.mt-30 .col-sm-12.align-center > .btn {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
}

/* Instagram can paint the source as a background or as an img. Keep both
 * render paths uncropped without changing plugin visibility/lazy loading. */
body.th-design-layer #sb_instagram .sbi_photo_wrap {
  box-sizing: border-box;
  border: 1.5px solid transparent;
  border-radius: var(--th-radius);
  background: linear-gradient(var(--th-paper), var(--th-paper)) padding-box,
    var(--th-satin-border) border-box;
}

body.th-design-layer #sb_instagram .sbi_photo {
  box-sizing: border-box;
  height: auto !important;
  aspect-ratio: 3 / 4;
  padding: 0 !important;
  background-color: var(--th-paper);
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: calc(var(--th-radius) - 1px);
}

body.th-design-layer #sb_instagram .sbi_photo img {
  width: 100%;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain !important;
  object-position: center;
  border-radius: calc(var(--th-radius) - 1px);
}

body.th-design-layer #sb_instagram .sbi_header_text h3,
body.th-design-layer #sb_instagram .sbi_header_link,
body.th-design-layer #sb_instagram .sbi_header_text,
body.th-design-layer #sb_instagram .sbi_feedtheme_header_text {
  color: var(--th-ivory) !important;
  font-family: var(--th-font);
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body.th-design-layer #sb_instagram .sbi_header_text h3 {
  font-size: clamp(20px, 2.3vw, 28px) !important;
}

/* White tab panels, notices and account content keep dark text. Tab display
 * and active state are untouched. No filled-cart/checkout DOM was captured. */
body.th-design-layer .woocommerce-tabs .wc-tab,
body.th-design-layer .woocommerce-info {
  background-color: var(--th-paper);
  color: var(--th-ink);
  border-color: #a38d62;
  border-radius: 12px;
}

body.th-design-layer .woocommerce-tabs .wc-tab h2,
body.th-design-layer .woocommerce-tabs .wc-tab h3,
body.th-design-layer .woocommerce-tabs .wc-tab a,
body.th-design-layer .woocommerce-info a {
  color: var(--th-gold-dark);
}

body.th-design-layer.woocommerce-cart .page-module-content,
body.th-design-layer.woocommerce-account .page-module-content {
  background-color: var(--th-paper);
  color: var(--th-ink);
}

body.th-design-layer.woocommerce-cart .page-module-content h2,
body.th-design-layer.woocommerce-cart .page-module-content h3,
body.th-design-layer.woocommerce-cart .page-module-content a:not(.button),
body.th-design-layer.woocommerce-account .page-module-content h2,
body.th-design-layer.woocommerce-account .page-module-content h3,
body.th-design-layer.woocommerce-account .page-module-content a:not(.button) {
  color: var(--th-gold-dark);
}

body.th-design-layer.woocommerce-account .woocommerce-form {
  border-color: #a38d62;
  border-radius: var(--th-radius);
}

body.th-design-layer.woocommerce-account .woocommerce-Input {
  box-sizing: border-box;
  max-width: 100%;
  color: var(--th-ink);
  background-color: var(--th-paper);
  border-color: var(--th-gold-dark);
  font-family: var(--th-font);
  font-size: 16px;
}

body.th-design-layer .shop_isle_footer_sidebar,
body.th-design-layer .bottom-page-wrap,
body.th-design-layer .footer {
  background-color: var(--th-footer) !important;
  color: var(--th-text);
}

body.th-design-layer .shop_isle_footer_sidebar .widget-title {
  color: var(--th-ivory);
  font-family: var(--th-font);
  font-weight: 800;
  line-height: 1.35;
}

body.th-design-layer .bottom-page-wrap a,
body.th-design-layer .footer a {
  color: var(--th-gold);
  overflow-wrap: anywhere;
  text-underline-offset: .2em;
}

body.th-design-layer .footer div[style*="color:#666"],
body.th-design-layer .footer a[style*="color:#666"] {
  color: var(--th-muted) !important;
}

/* These three heading locations are proven dark in the saved previews.
 * Do not apply the light metallic text to h1, the wordmark or white panels. */
body.th-design-layer #banners h2.module-title,
body.th-design-layer #latest h2.module-title,
body.th-design-layer .shop_isle_footer_sidebar h3.widget-title {
  color: var(--th-gold);
}

/* Two-tone focus survives both the white content and dark page surfaces. */
body.th-design-layer .main :where(a, button, input, select, textarea):focus-visible,
body.th-design-layer .navbar-custom :where(a, button, input):focus-visible,
body.th-design-layer .bottom-page-wrap a:focus-visible {
  outline: 2px solid #242424;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--th-gold);
}

/* Desktop-only cell width: mobile retains the parent's 100% header row. */
@media (min-width: 769px) {
  body.th-design-layer .navbar-custom .navbar-header {
    width: 310px;
  }

  body.th-design-layer .shop_isle_header_title .site-title a {
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

@media (max-width: 767px) {
  body.th-design-layer.home #home {
    grid-template-columns: minmax(0, 1fr);
    padding: 140px 24px 48px;
    gap: 28px;
  }

  body.th-design-layer.home #home::after {
    width: min(100%, 440px);
    justify-self: center;
    border-radius: 22px;
  }

  body.th-design-layer .shop_isle_header_title .site-title a {
    font-size: 22px;
    letter-spacing: .025em;
  }

  body.th-design-layer .navbar-custom .nav > li > a,
  body.th-design-layer #custom-collapse .sub-menu a,
  body.th-design-layer #custom-collapse .thehookah-native-submenu-label {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.th-design-layer .thehookah-home-model-compare article {
    box-sizing: border-box;
    max-width: 100%;
  }
}

@media (max-width: 390px) {
  body.th-design-layer.home #home {
    padding-inline: 18px;
  }

  body.th-design-layer.home #home h1 {
    font-size: clamp(30px, 9vw, 35px);
    letter-spacing: 0;
  }

  body.th-design-layer .module-title,
  body.th-design-layer .product_title {
    font-size: 28px;
    letter-spacing: 0;
  }

  body.th-design-layer .shop_isle_header_title .site-title a {
    font-size: 20px;
    gap: 8px;
  }

  body.th-design-layer .shop_isle_header_title .site-title a::before {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  body.th-design-layer .main a.button,
  body.th-design-layer .main button.button,
  body.th-design-layer .main a.btn {
    letter-spacing: 0;
  }

  body.th-design-layer #latest .row.mt-30 .col-sm-12.align-center > .btn {
    width: 100%;
  }
}

@media (forced-colors: active) {
  body.th-design-layer .thehookah-home-model-compare article h3,
  body.th-design-layer #banners h2.module-title,
  body.th-design-layer #latest h2.module-title,
  body.th-design-layer .shop_isle_footer_sidebar h3.widget-title {
    color: CanvasText;
    background-image: none;
  }

  body.th-design-layer .main a.button,
  body.th-design-layer .main button.button,
  body.th-design-layer .main a.btn,
  body.th-design-layer #sb_instagram .sbi_load_btn {
    color: ButtonText;
    background-image: none;
    border-color: ButtonText;
  }
}

/* INACTIVE append candidate. Load after the reviewed layer only after review. */
/* Existing li/row/grid widths, gallery dimensions and control behavior stay intact. */
body.th-design-layer #latest .shop-item,
body.th-design-layer ul.products li.product .shop-item {
  box-sizing: border-box;
  min-width: 0;
  padding: 12px;
  color: var(--th-ink);
  background: linear-gradient(var(--th-paper), var(--th-paper)) padding-box,
    var(--th-satin-border) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--th-radius);
}

/* One frame around the complete card, not a second frame around its image. */
body.th-design-layer #latest .shop-item .shop-item-image,
body.th-design-layer ul.products li.product .shop-item .shop-item-image {
  border: 0;
  background: var(--th-paper);
  border-radius: calc(var(--th-radius) - 3px);
}

body.th-design-layer #latest .shop-item .shop-item-title,
body.th-design-layer #latest .shop-item .shop-item-title a,
body.th-design-layer ul.products li.product .shop-item .shop-item-title,
body.th-design-layer ul.products li.product .shop-item .shop-item-title a {
  color: var(--th-ink);
  font-family: var(--th-font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

body.th-design-layer #latest .shop-item .woocommerce-Price-amount,
body.th-design-layer ul.products li.product .shop-item .woocommerce-Price-amount {
  color: var(--th-gold-dark) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  white-space: nowrap;
}

body.th-design-layer #latest .shop-item .th-27-price-preview del,
body.th-design-layer #latest .shop-item .th-27-price-preview del .woocommerce-Price-amount,
body.th-design-layer ul.products li.product .shop-item .th-27-price-preview del,
body.th-design-layer ul.products li.product .shop-item .th-27-price-preview del .woocommerce-Price-amount {
  color: var(--th-ink) !important;
  opacity: 1;
  font-size: 13px;
  font-weight: 400;
}

body.th-design-layer #latest .shop-item .th-27-price-preview small,
body.th-design-layer ul.products li.product .shop-item .th-27-price-preview small {
  display: block;
  color: var(--th-ink) !important;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

/* The summary remains dark: old price and explanatory text need a light ink. */
body.th-design-layer.single-product .summary p.price .woocommerce-Price-amount {
  color: var(--th-gold) !important;
}

/* Observed white product facts panel needs the dark gold link tone. */
body.th-design-layer.single-product .summary .thc-product-facts a {
  color: var(--th-gold-dark);
  text-decoration: underline;
}

body.th-design-layer.single-product .summary .th-27-price-preview del,
body.th-design-layer.single-product .summary .th-27-price-preview del .woocommerce-Price-amount,
body.th-design-layer.single-product .summary .th-27-price-preview small {
  color: var(--th-ivory) !important;
  opacity: 1;
}

body.th-design-layer.single-product .summary .quantity input.qty {
  color: var(--th-ink) !important;
  background-color: var(--th-paper) !important;
  caret-color: var(--th-ink);
}

/* Static outer gallery frame; no clipping, carousel sizing or zoom-image rule. */
body.th-design-layer.single-product .woocommerce-product-gallery {
  box-sizing: border-box;
  background: linear-gradient(var(--th-paper), var(--th-paper)) padding-box,
    var(--th-satin-border) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--th-radius);
}

body.th-design-layer.single-product .woocommerce-product-gallery__image img:not(.zoomImg) {
  object-fit: contain !important;
  border-radius: calc(var(--th-radius) - 3px);
}

@media (max-width: 767px) {
  body.th-design-layer #custom-collapse.in,
  body.th-design-layer #custom-collapse.collapsing,
  body.th-design-layer #custom-collapse .sub-menu {
    background-color: var(--th-header) !important;
    background-image: none !important;
  }
}

/* INACTIVE QA04 append candidate: shipping notice, category header and sale pills. */
body.th-design-layer .thdelivery {
  box-sizing: border-box;
  padding: 18px 22px;
  color: var(--th-ivory) !important;
  background: linear-gradient(var(--th-header), var(--th-header)) padding-box,
    var(--th-satin-border) border-box !important;
  border: 1.5px solid transparent;
  border-radius: var(--th-radius);
  box-shadow: none;
  font-family: var(--th-font);
  font-size: 15px;
  line-height: 1.6;
  text-transform: none;
}

body.th-design-layer .thdelivery > span {
  color: var(--th-ivory) !important;
  background-color: transparent !important;
  font-weight: 700;
}

/* Keep the existing category image; replace tiling with one contained header surface. */
body.th-design-layer.tax-product_cat section.woocommerce-page-title.page-header-module.module.bg-dark {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 280px;
  padding: clamp(96px, 10vw, 144px) 24px clamp(48px, 6vw, 80px);
  background-color: var(--th-header);
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

body.th-design-layer.tax-product_cat section.woocommerce-page-title.page-header-module.module.bg-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(36, 36, 36, .6);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

body.th-design-layer.tax-product_cat section.woocommerce-page-title.page-header-module.module.bg-dark > .container {
  position: relative;
  z-index: 1;
  color: var(--th-ivory);
}

body.th-design-layer .onsale {
  box-sizing: border-box;
  min-height: 0;
  height: auto;
  padding: 6px 11px;
  color: var(--th-ink) !important;
  background: linear-gradient(115deg, #e6d6ad, #c4ad76) !important;
  border: 1px solid #a98649;
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--th-font);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.35;
  text-transform: none;
}

/* Actual Black Mamba price rect was height:0 with overflowing normal-flow del/ins. */
body.th-design-layer.woocommerce.single-product .summary > .price {
  height: auto !important;
  max-height: none !important;
  display: flow-root !important;
}

/* Restore automatically when PhotoSwipe closes; leave protected buybar logic intact. */
body.th-design-layer:has(.pswp.pswp--open) #thc-mobile-buybar {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 767px) {
  /* Actual product badge is the gallery's sibling; at mobile the gallery is full width. */
  body.th-design-layer.woocommerce.single-product div.product > .onsale {
    left: auto !important;
    right: 12px !important;
    top: 12px;
    z-index: 2;
  }

  body.th-design-layer.tax-product_cat section.woocommerce-page-title.page-header-module.module.bg-dark {
    min-height: 240px;
    padding: 104px 24px 48px;
  }
}

/* INACTIVE QA06 append. Actual .dropdownmenu has empty text and a '?' ::before. */
/* Border chevron avoids glyph/font encoding; existing touch/keyboard handlers stay intact. */
body.th-design-layer #custom-collapse .dropdownmenu::before {
  content: "" !important;
  display: inline-block;
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  background: none;
  transform: rotate(45deg);
  transform-origin: center;
  vertical-align: 3px;
}

body.th-design-layer #custom-collapse .dropdownmenu[aria-expanded="true"]::before {
  transform: rotate(225deg);
}

/* Inactive append candidate: QA08 mobile product controls; no markup/behavior changes. */
body.th-design-layer.single-product .summary form.variations_form .variations th.label,
body.th-design-layer.single-product .summary form.variations_form .variations th.label > label {
  color: #f1f1ec !important;
  opacity: 1;
  background-color: transparent;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
}

body.th-design-layer.single-product .summary form.variations_form .variations select {
  min-height: 44px;
  width: 100%;
  max-width: 100%;
  font-size: 16px;
  letter-spacing: normal;
  color: #242424;
  background-color: #ffffff;
}

body.th-design-layer.single-product .summary form.variations_form .reset_variations {
  display: inline-block;
  color: #242424 !important;
  background-color: #ffffff;
  opacity: 1;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 8px;
}

@media (max-width: 767px) {
  body.th-design-layer.single-product .summary form.variations_form .variations th.label,
  body.th-design-layer.single-product .summary form.variations_form .variations td.value {
    display: block;
    width: 100%;
    padding: 0;
  }

  body.th-design-layer.single-product .summary form.variations_form .variations th.label {
    margin-bottom: 6px;
    text-align: left;
  }
}

body.th-design-layer.single-product .summary form.cart .quantity.buttons_added {
  display: inline-flex;
  align-items: stretch;
  width: auto !important;
  max-width: 100%;
  overflow: visible;
}

body.th-design-layer.single-product .summary form.cart .quantity.buttons_added > input.minus,
body.th-design-layer.single-product .summary form.cart .quantity.buttons_added > input.plus,
body.th-design-layer.single-product .summary form.cart .quantity.buttons_added > input.qty {
  position: static !important;
  float: none;
  box-sizing: border-box;
  flex: 0 0 44px;
  width: 44px !important;
  min-width: 44px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 4px;
  color: #242424 !important;
  background-color: #ffffff !important;
  font-size: 16px;
  text-align: center;
}

body.th-design-layer.single-product .summary form.cart .quantity.buttons_added > input.qty {
  flex-basis: 56px;
  width: 56px !important;
}

/* The sale slider prints variable-price ranges directly in .ex-product.
 * Scope the gold ink to those cards; the dash is a bare text node. */
body.th-design-layer #products-slider .ex-product:has(> .woocommerce-Price-amount) {
  color: var(--th-gold);
}

body.th-design-layer #products-slider .ex-product > .woocommerce-Price-amount {
  color: var(--th-gold) !important;
}

/* QA19: actual filled-cart/checkout presentation only. Native blockUI and
 * checkout requests remain untouched; the private AJAX restriction is separate. */
body.th-design-layer.woocommerce-checkout table.woocommerce-checkout-review-order-table,
body.th-design-layer.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents,
body.th-design-layer.woocommerce-cart .cart_totals table.shop_table {
  background-color: var(--th-paper);
  border: 1.5px solid var(--th-gold);
  border-radius: var(--th-radius);
  border-collapse: separate;
  border-spacing: 0;
}

body.th-design-layer.woocommerce-checkout .woocommerce-checkout-review-order-table :is(th, td, a, dl, dt, dd, label, .woocommerce-Price-amount) {
  color: var(--th-ink) !important;
}

/* Reuse the reviewed product quantity layout for the observed cart controls.
 * Input values, limits and the accessible label remain unchanged. */
body.th-design-layer.woocommerce-cart .woocommerce-cart-form .quantity.buttons_added {
  display: inline-flex;
  align-items: stretch;
  width: auto !important;
  max-width: 100%;
  overflow: visible;
}

body.th-design-layer.woocommerce-cart .woocommerce-cart-form .quantity.buttons_added > input.minus,
body.th-design-layer.woocommerce-cart .woocommerce-cart-form .quantity.buttons_added > input.plus,
body.th-design-layer.woocommerce-cart .woocommerce-cart-form .quantity.buttons_added > input.qty {
  position: static !important;
  float: none;
  box-sizing: border-box;
  flex: 0 0 44px;
  width: 44px !important;
  min-width: 44px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 4px;
  color: #242424 !important;
  background-color: #ffffff !important;
  font-size: 16px;
  text-align: center;
}

body.th-design-layer.woocommerce-cart .woocommerce-cart-form .quantity.buttons_added > input.qty {
  flex-basis: 56px;
  width: 56px !important;
}

body.th-design-layer.woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
  width: 80px;
  max-width: 100%;
  height: 100px;
  object-fit: contain;
}