/*
Theme Name: Ten Herbs
Theme URI: https://tenherbsofficial.com
Author: Ten Herbs Official
Author URI: https://tenherbsofficial.com
Description: A single-product landing page theme for Ten Herbs Hair Growth Oil, powered by WooCommerce for real Add to Cart / Checkout, with WhatsApp kept on as a secondary support channel. Pricing, contact details and hero copy are all editable via the Customizer.
Version: 2.0.1
Requires PHP: 7.4
Text Domain: ten-herbs
License: GNU General Public License v2 or later
License URI: LICENSE
*/

/* =================================================================
   DESIGN TOKENS
   Palette sampled from the Ten Herbs brand mark: forest green
   wordmark + metallic gold lotus on a black field.
   ================================================================= */
:root{
  /* Brand colors */
  --ink:            #12150D;   /* near-black, matches the logo's own field */
  --ink-soft:       #1C2114;
  --forest:         #2F4B24;   /* sampled from the wordmark */
  --forest-deep:    #1F3318;
  --forest-soft:    #7C9A6C;
  --gold:           #B68A2E;   /* deepened for accessible UI use */
  --gold-light:     #F1DDA0;   /* sampled highlight */
  --gold-deep:      #8C6A2E;   /* sampled shadow */
  --gold-soft:      #E7CE92;
  --clay:           #AE5230;   /* rust accent — sale tags / urgency only */
  --parchment:      #F8F3E6;
  --parchment-deep: #EEE3C7;
  --cream:          #FBF8F0;
  --line:           rgba(18,21,13,0.12);
  --line-on-dark:   rgba(241,221,160,0.22);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Space Mono", "SFMono-Regular", Consolas, monospace;

  /* Layout */
  --container: 1180px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-card: 0 2px 4px rgba(18,21,13,0.04), 0 14px 32px -12px rgba(18,21,13,0.18);
  --shadow-pop:  0 8px 18px -6px rgba(182,138,46,0.45);
  --ease: cubic-bezier(.22,.85,.32,1);
}

/* =================================================================
   RESET
   ================================================================= */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
svg{ display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
input,textarea,select{ font-family: inherit; font-size: inherit; }
h1,h2,h3,h4,p,figure{ margin: 0; }

:focus-visible{
  outline: 2.5px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--ink); padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

/* =================================================================
   TYPE SCALE
   ================================================================= */
.th-eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
h1,.h1{ font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
h2,.h2{ font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
h3,.h3{ font-family: var(--font-display); font-weight: 600; line-height: 1.2; }

.section-heading{
  font-size: clamp(28px, 4vw, 44px);
}
.section-kicker{
  display: block;
  margin-bottom: 14px;
}
.section-intro{
  max-width: 620px;
  font-size: 17px;
  color: rgba(18,21,13,0.72);
}

/* =================================================================
   LAYOUT HELPERS
   ================================================================= */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.th-section{ padding: 84px 0; position: relative; }
.th-section--tight{ padding: 56px 0; }
.th-section--dark{ background: var(--ink); color: var(--cream); }
.th-section--soft{ background: var(--parchment-deep); }
.th-section--forest{ background: var(--forest); color: var(--cream); }

.text-center{ text-align: center; margin-left: auto; margin-right: auto; }

[data-reveal]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

/* =================================================================
   BUTTONS
   ================================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15.5px;
  padding: 16px 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}
.btn svg{ width: 18px; height: 18px; flex: none; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn--gold{
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 70%);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}
.btn--gold:hover{ box-shadow: 0 12px 26px -8px rgba(182,138,46,0.55); }

.btn--ghost{
  background: transparent;
  border-color: rgba(241,221,160,0.5);
  color: inherit;
}
.btn--ghost:hover{ border-color: var(--gold); background: rgba(241,221,160,0.08); }

.btn--ghost-dark{
  background: transparent;
  border-color: rgba(18,21,13,0.25);
  color: var(--ink);
}
.btn--ghost-dark:hover{ border-color: var(--forest); background: rgba(47,75,36,0.06); }

.btn--block{ width: 100%; }
.btn--lg{ padding: 18px 32px; font-size: 16.5px; }
.btn--sm{ padding: 10px 18px; font-size: 13.5px; }

.btn--whatsapp{
  background: #25D366;
  color: #06210F;
}
.btn--whatsapp:hover{ box-shadow: 0 12px 26px -8px rgba(37,211,102,0.55); }

.btn.is-busy{ opacity: 0.7; cursor: wait; pointer-events: none; }
.btn.is-done{ background: var(--forest); color: var(--cream); box-shadow: none; }
.btn.is-disabled{ opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* =================================================================
   HEADER
   ================================================================= */
.th-header{
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.th-header.is-scrolled{ box-shadow: 0 6px 20px -12px rgba(18,21,13,0.18); }
.th-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  transition: padding 0.3s var(--ease);
}
.th-header.is-scrolled .th-header__inner{ padding: 10px 0; }

.th-logo{ display: flex; align-items: center; gap: 10px; flex: none; }
.th-logo img{ height: 52px; width: auto; transition: height 0.3s var(--ease); }
.th-header.is-scrolled .th-logo img{ height: 40px; }
.th-logo__text{ display: none; }

.th-nav{ flex: 1; display: flex; justify-content: center; }
.th-nav__list{ display: flex; align-items: center; gap: 32px; }
.th-nav__list a{
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.78;
  position: relative;
  padding: 6px 0;
}
.th-nav__list a:hover{ opacity: 1; }
.th-nav__list a::after{
  content:"";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--gold);
  transition: right 0.25s var(--ease);
}
.th-nav__list a:hover::after{ right: 0; }

.th-header__actions{ display: flex; align-items: center; gap: 12px; flex: none; }
.th-header__phone{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px; color: var(--forest-deep);
}
.th-header__phone svg{ width: 16px; height: 16px; }

.th-header__cart{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink);
}
.th-header__cart svg{ width: 19px; height: 19px; }
.th-header__cart:hover{ border-color: var(--gold); color: var(--forest-deep); }
.th-header__cart-count{
  position: absolute; top: -7px; right: -7px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--clay); color: var(--cream);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  border-radius: 999px; line-height: 1;
}

.th-nav__toggle{
  display: none;
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  width: 42px; height: 42px; align-items: center; justify-content: center;
  color: var(--ink);
}
.th-nav__toggle svg{ width: 20px; height: 20px; }

/* Mobile-only full-screen nav's close (X) button — hidden until the
   920px breakpoint below, where it's repositioned and shown. Without
   this, the button (a <button> defaults to inline-block) renders
   inline ahead of the menu links on desktop. */
.th-nav__close{ display: none; }

@media (max-width: 920px){
  .th-header__phone{ display: none; }
  .th-nav{
    position: fixed; inset: 0; top: 0;
    background: var(--cream);
    flex-direction: column;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.35s var(--ease);
    z-index: 90;
  }
  .th-nav.is-open{ transform: translateY(0); }
  .th-nav__list{ flex-direction: column; gap: 28px; }
  .th-nav__list a{ font-size: 22px; font-family: var(--font-display); opacity: 1; color: var(--forest-deep); }
  .th-nav__close{
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 22px; right: 24px;
    background: transparent; border: none; color: var(--ink); width: 40px; height: 40px;
  }
  .th-nav__close svg{ width: 26px; height: 26px; }
  .th-nav__toggle{ display: flex; }
}

/* icon sprite visibility helper */
.ic{ width: 20px; height: 20px; display: inline-block; fill: currentColor; }

/* =================================================================
   HERO
   ================================================================= */
.th-hero{
  background:
    radial-gradient(ellipse 55% 50% at 82% 12%, rgba(182,138,46,0.20), transparent 60%),
    radial-gradient(ellipse 50% 45% at 6% 95%, rgba(124,154,108,0.22), transparent 60%),
    linear-gradient(165deg, var(--cream) 0%, var(--parchment) 60%, var(--parchment-deep) 100%);
  color: var(--ink);
  padding: 64px 0 56px;
  overflow: hidden;
  position: relative;
}
.th-hero__bg-mark{
  position: absolute;
  right: -8%;
  top: -12%;
  width: 620px;
  opacity: 0.1;
  pointer-events: none;
}
.th-hero__grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.th-hero__content{ max-width: 560px; }
.th-hero .th-eyebrow{ color: var(--gold-deep); }
.th-hero__heading{
  font-size: clamp(36px, 5vw, 58px);
  margin: 18px 0 20px;
  color: var(--forest-deep);
}
.th-hero__sub{
  font-size: 17.5px;
  color: rgba(18,21,13,0.7);
  max-width: 480px;
  margin-bottom: 26px;
}
.th-hero__rating{
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: rgba(18,21,13,0.68);
  margin-bottom: 28px; flex-wrap: wrap;
}
.th-hero__stars{ display: flex; gap: 2px; color: var(--gold); }
.th-hero__stars svg{ width: 16px; height: 16px; }
.th-hero__rating b{ color: var(--ink); }
.th-hero__dot{ width: 4px; height: 4px; border-radius: 50%; background: rgba(18,21,13,0.3); }

.th-hero__ctas{ display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }

.th-hero__badges{ display: flex; flex-wrap: wrap; gap: 10px 22px; }
.th-hero__badge{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(18,21,13,0.65); font-weight: 500;
}
.th-hero__badge svg{ width: 16px; height: 16px; color: var(--forest); flex: none; }

/* --- Product photo --- */
.th-hero__visual{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
}
.th-hero__photo-glow{
  position: absolute;
  width: 78%; aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(182,138,46,0.22) 0%, rgba(124,154,108,0.14) 55%, transparent 75%);
  border-radius: 50%;
  filter: blur(2px);
}
.th-hero__photo-frame{
  position: relative;
  width: min(320px, 78%);
  border-radius: var(--radius-lg);
  padding: 10px;
  background: linear-gradient(165deg, var(--cream), var(--parchment-deep));
  box-shadow: var(--shadow-card), 0 30px 50px -24px rgba(31,51,24,0.35);
  animation: th-float 6s ease-in-out infinite;
}
.th-hero__photo-frame img{
  width: 100%; height: 100%;
  border-radius: calc(var(--radius-lg) - 6px);
  object-fit: cover;
  display: block;
}
@keyframes th-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce){ .th-hero__photo-frame{ animation: none; } }

.th-callout{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(251,248,240,0.92);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 8px 14px 8px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.th-callout__dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.th-callout--1{ top: 8%;  left: -6%; }
.th-callout--2{ top: 42%; right: -10%; }
.th-callout--3{ bottom: 10%; left: -2%; }

.th-sale-tag{
  position: absolute; top: -6px; right: 8%;
  background: var(--clay); color: var(--cream);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  padding: 7px 14px; border-radius: 999px;
  transform: rotate(6deg);
  box-shadow: 0 8px 18px -6px rgba(174,82,48,0.6);
  z-index: 2;
}

@media (max-width: 980px){
  .th-hero__grid{ grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .th-hero__content{ max-width: 100%; margin: 0 auto; }
  .th-hero__sub{ margin-left: auto; margin-right: auto; }
  .th-hero__ctas{ justify-content: center; }
  .th-hero__rating{ justify-content: center; }
  .th-hero__badges{ justify-content: center; }
  .th-callout{ display: none; }
  .th-hero__visual{ min-height: 360px; }
}
@media (max-width: 480px){
  .th-hero__ctas .btn{ width: 100%; }
}

/* =================================================================
   TRUST BAR
   ================================================================= */
.th-trustbar{
  background: var(--parchment-deep);
  border-bottom: 1px solid var(--line);
}
.th-trustbar__row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 26px 0;
}
.th-trustbar__item{
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 500;
  justify-content: center; text-align: center;
}
.th-trustbar__item svg{ width: 20px; height: 20px; color: var(--forest); flex: none; }
@media (max-width: 860px){
  .th-trustbar__row{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .th-trustbar__row{ grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .th-trustbar__item{ justify-content: flex-start; text-align: left; }
}

/* =================================================================
   WHY CHOOSE TEN HERBS  (4S Promise + benefits checklist)
   ================================================================= */
.th-section-note{
  text-align: center; font-style: italic; color: rgba(18,21,13,0.55);
  font-size: 14.5px; margin-top: 32px;
}
.th-promise-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 40px 0 48px;
}
.th-promise-item{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 26px 16px;
  background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--radius-md);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.th-promise-item:hover{ border-color: var(--gold); transform: translateY(-3px); }
.th-promise-item__letter{
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 70%);
  color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 23px;
  box-shadow: var(--shadow-pop);
}
.th-promise-item__label{ font-size: 14.5px; font-weight: 600; color: var(--forest-deep); }

.th-benefits-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
  max-width: 760px;
  margin: 0 auto;
}
.th-benefit-item{
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--ink); text-align: left;
}
.th-benefit-item svg{ width: 18px; height: 18px; color: var(--forest); flex: none; margin-top: 2px; }

@media (max-width: 720px){
  .th-promise-row{ grid-template-columns: repeat(2, 1fr); }
  .th-benefits-grid{ grid-template-columns: 1fr; max-width: 480px; }
}

/* =================================================================
   TEN HERBS DIAL  (signature element)
   A radial layout: 10 herbs arranged like marks on a dial around the
   bottle, because the brand's whole premise is "exactly ten herbs".
   ================================================================= */
.th-dial-section{ background: var(--parchment); }
.th-dial-wrap{
  --th-dial-radius: clamp(190px, 26vw, 270px);
  position: relative;
  width: min(640px, 92vw);
  aspect-ratio: 1 / 1;
  margin: 56px auto 0;
}
.th-dial-wrap::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -18deg, transparent 0deg 32deg, var(--line) 32deg 33.2deg);
  opacity: 0.9;
}
.th-dial-wrap::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: calc(var(--th-dial-radius) * 2 - 40px);
  height: calc(var(--th-dial-radius) * 2 - 40px);
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 1px dashed var(--line);
}
.th-dial__center{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: clamp(120px, 16vw, 160px);
  height: clamp(120px, 16vw, 160px);
  border-radius: 50%;
  background: linear-gradient(155deg, var(--forest), var(--forest-deep));
  color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  box-shadow: 0 18px 30px -12px rgba(31,51,24,0.45);
  z-index: 2;
  padding: 8px;
}
.th-dial__center .ic{ width: 30px; height: 30px; color: var(--gold-light); margin-bottom: 6px; }
.th-dial__center strong{ font-family: var(--font-display); font-size: 19px; line-height: 1.1; }
.th-dial__center span{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--gold-soft); margin-top: 4px; text-transform: uppercase; }

.th-dial__item{
  position: absolute;
  top: 50%; left: 50%;
  width: 168px;
  height: 78px;
  margin: -39px 0 0 -84px;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--th-dial-radius)));
}
.th-dial__item-inner{
  transform: rotate(calc(-1 * var(--angle)));
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
}
.th-dial__num{
  font-family: var(--font-mono); font-size: 11px; color: var(--gold-deep); letter-spacing: 0.05em;
}
.th-dial__name{ font-weight: 700; font-size: 14.5px; }
.th-dial__benefit{ font-size: 12px; color: rgba(18,21,13,0.62); line-height: 1.35; }

@media (max-width: 980px){
  .th-dial-wrap{
    width: 100%;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 36px;
  }
  .th-dial-wrap::before,.th-dial-wrap::after{ display: none; }
  .th-dial__center{
    position: static; transform: none; grid-column: 1 / -1;
    width: 100%; height: auto; border-radius: var(--radius-lg); flex-direction: row; justify-content: center; gap: 10px; padding: 18px;
  }
  .th-dial__center .ic{ margin-bottom: 0; }
  .th-dial__item{
    position: static; transform: none; width: auto; height: auto; margin: 0;
    background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 14px;
  }
  .th-dial__item-inner{ transform: none; align-items: flex-start; text-align: left; }
}
@media (max-width: 560px){
  .th-dial-wrap{ grid-template-columns: 1fr; }
}

/* =================================================================
   VARIANT SELECTOR + ORDER SUMMARY
   ================================================================= */
.th-variants-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.th-variant-card{
  position: relative;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.th-variant-card:hover{ transform: translateY(-3px); }
.th-variant-card.is-active{
  border-color: var(--gold);
  box-shadow: var(--shadow-card);
  background: linear-gradient(180deg, #FFFDF7, var(--cream));
}
.th-variant-card__top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.th-variant-card__media{
  width: 100%;
  height: 188px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 18px;
  background: radial-gradient(ellipse at center, var(--cream) 0%, var(--parchment-deep) 78%);
  display: flex; align-items: center; justify-content: center;
}
.th-variant-card__media img{
  width: auto; max-width: 62%; height: 92%; object-fit: contain; object-position: center;
  filter: drop-shadow(0 14px 18px -10px rgba(31,51,24,0.35));
  display: block;
}
.is-hidden{ display: none !important; }
.th-variant-card__badge{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  background: var(--forest); color: var(--cream); padding: 5px 10px; border-radius: 999px;
}
.th-variant-card__badge--clay{ background: var(--clay); }
.th-variant-card__radio{
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center; flex: none;
  transition: border-color 0.2s;
}
.th-variant-card__radio::after{
  content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--gold);
  transform: scale(0); transition: transform 0.2s var(--ease);
}
.th-variant-card.is-active .th-variant-card__radio{ border-color: var(--gold); }
.th-variant-card.is-active .th-variant-card__radio::after{ transform: scale(1); }

.th-variant-card__title{ font-size: 21px; margin-bottom: 6px; }
.th-variant-card__desc{ font-size: 14px; color: rgba(18,21,13,0.65); margin-bottom: 18px; }

.th-variant-card__price-row{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.th-variant-card__price{ font-family: var(--font-display); font-size: 30px; font-weight: 600; }
.th-variant-card__price-old{ font-size: 16px; color: rgba(18,21,13,0.4); text-decoration: line-through; }
.th-variant-card__save{ font-family: var(--font-mono); font-size: 11.5px; color: var(--clay); }
.th-variant-card__vol{ font-family: var(--font-mono); font-size: 12px; color: rgba(18,21,13,0.5); margin-top: 10px; }

.th-order-summary{
  margin-top: 28px;
  background: var(--forest-deep);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.th-order-summary__info{ display: flex; flex-direction: column; gap: 4px; }
.th-order-summary__label{ font-size: 13px; color: rgba(251,248,240,0.6); }
.th-order-summary__product{ font-family: var(--font-display); font-size: 19px; }
.th-order-summary__total{ font-family: var(--font-mono); font-size: 13px; color: var(--gold-soft); }
.th-order-summary__total b{ font-size: 16px; color: var(--cream); }

.th-qty{ display: flex; align-items: center; gap: 0; border: 1px solid var(--line-on-dark); border-radius: 999px; overflow: hidden; }
.th-qty button{ background: transparent; border: none; color: var(--cream); width: 38px; height: 38px; font-size: 18px; }
.th-qty button:hover{ background: rgba(241,221,160,0.1); }
.th-qty__val{ width: 36px; text-align: center; font-family: var(--font-mono); font-size: 15px; }

.th-order-summary__actions{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }

.th-order-note{ font-size: 13px; color: rgba(18,21,13,0.55); margin-top: 14px; text-align: center; }

@media (max-width: 860px){
  .th-variants-grid{ grid-template-columns: 1fr; }
  .th-order-summary{ flex-direction: column; align-items: stretch; text-align: center; }
  .th-order-summary__actions{ flex-direction: column; width: 100%; }
  .th-order-summary__actions .btn{ width: 100%; }
}

/* =================================================================
   COMPARISON LEDGER
   ================================================================= */
.th-compare{
  margin-top: 44px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.th-compare-table{ width: 100%; border-collapse: collapse; }
.th-compare-table th,.th-compare-table td{
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  vertical-align: middle;
}
.th-compare-table th{
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(18,21,13,0.55); font-weight: 700; background: var(--parchment-deep);
}
.th-compare-table thead th:nth-child(2){ color: var(--forest); }
.th-compare-table tbody tr:last-child td{ border-bottom: none; }
.th-compare-table tbody th{ background: transparent; font-family: var(--font-body); font-weight: 600; text-transform: none; color: var(--ink); font-size: 14.5px; letter-spacing: 0; }
.th-compare-table td:first-of-type{ width: 30%; }
.th-cell{ display: flex; align-items: center; gap: 8px; }
.th-cell .ic{ width: 16px; height: 16px; flex: none; }
.th-cell--yes .ic{ color: var(--forest); }
.th-cell--no .ic{ color: rgba(18,21,13,0.32); }
.th-compare-table td:nth-child(2){ background: rgba(47,75,36,0.04); font-weight: 500; }

@media (max-width: 720px){
  .th-compare-table th,.th-compare-table td{ padding: 12px 14px; font-size: 13px; }
}

/* =================================================================
   HOW TO USE
   ================================================================= */
.th-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 44px;
}
.th-step{ position: relative; padding: 8px 4px; }
.th-step__num{
  font-family: var(--font-display); font-size: 44px; color: var(--gold-soft);
  -webkit-text-stroke: 1.5px var(--gold);
  margin-bottom: 14px; display: block;
}
.th-step__title{ font-size: 19px; margin-bottom: 8px; }
.th-step__desc{ font-size: 14.5px; color: rgba(18,21,13,0.65); }
.th-steps__note{
  text-align: center; margin-top: 36px; font-size: 14.5px; font-weight: 600;
  color: var(--forest-deep);
}
@media (max-width: 980px){
  .th-steps{ grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 560px){
  .th-steps{ grid-template-columns: 1fr; gap: 30px; }
}

/* =================================================================
   STORY / HERITAGE BAND
   ================================================================= */
.th-story{ background: var(--forest); color: var(--cream); position: relative; overflow: hidden; }
.th-story__mark{ position: absolute; left: -10%; bottom: -18%; width: 480px; opacity: 0.08; }
.th-story__grid{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
.th-story blockquote{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.4; margin: 0 0 18px;
}
.th-story p.th-story__byline{ font-size: 14px; color: var(--gold-soft); font-family: var(--font-mono); }
.th-story p.th-story__mission{ font-size: 14.5px; color: rgba(251,248,240,0.75); margin-top: 18px; max-width: 480px; }
.th-story__stats{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.th-story__stat{ text-align: center; border-left: 1px solid var(--line-on-dark); padding-left: 18px; }
.th-story__stat:first-child{ border-left: none; padding-left: 0; }
.th-story__stat b{ display: block; font-family: var(--font-display); font-size: 30px; color: var(--gold-light); }
.th-story__stat span{ font-size: 12px; color: rgba(251,248,240,0.7); }
@media (max-width: 900px){
  .th-story__grid{ grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .th-story__stats{ max-width: 420px; margin: 0 auto; }
}
@media (max-width: 480px){
  .th-story__stats{ grid-template-columns: 1fr; gap: 14px; }
  .th-story__stat{ border-left: none; padding-left: 0; border-top: 1px solid var(--line-on-dark); padding-top: 14px; }
  .th-story__stat:first-child{ border-top: none; padding-top: 0; }
}

/* =================================================================
   TESTIMONIALS
   ================================================================= */
.th-testimonials-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.th-t-card{
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.th-t-card__stars{ display: flex; gap: 2px; color: var(--gold); }
.th-t-card__stars svg{ width: 15px; height: 15px; }
.th-t-card__quote{ font-size: 15px; line-height: 1.55; color: var(--ink); flex: 1; }
.th-t-card__name{ font-size: 13.5px; font-weight: 700; }
.th-t-card__meta{ font-size: 12px; color: rgba(18,21,13,0.5); }
@media (max-width: 900px){
  .th-testimonials-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .th-testimonials-grid{ grid-template-columns: 1fr; }
}

/* =================================================================
   FAQ
   ================================================================= */
.th-faq-list{ max-width: 760px; margin: 40px auto 0; }
.th-faq__item{ border-bottom: 1px solid var(--line); }
.th-faq__q{
  width: 100%; background: transparent; border: none; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; font-family: var(--font-display); font-size: 18px; color: var(--ink);
}
.th-faq__q .ic{ width: 18px; height: 18px; flex: none; transition: transform 0.25s var(--ease); color: var(--gold-deep); }
.th-faq__item.is-open .th-faq__q .ic{ transform: rotate(45deg); }
.th-faq__a{
  max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease);
}
.th-faq__a-inner{ padding: 0 4px 22px; font-size: 14.5px; color: rgba(18,21,13,0.68); max-width: 640px; }

/* =================================================================
   FINAL CTA BAND
   ================================================================= */
.th-cta-band{
  background:
    radial-gradient(ellipse 60% 80% at 20% 0%, rgba(182,138,46,0.22), transparent 60%),
    var(--forest-deep);
  color: var(--cream);
  text-align: center;
}
.th-cta-band h2{ font-size: clamp(28px,4vw,42px); margin-bottom: 16px; }
.th-cta-band p{ color: rgba(251,248,240,0.75); max-width: 480px; margin: 0 auto 30px; font-size: 16px; }
.th-cta-band__row{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =================================================================
   FOOTER
   ================================================================= */
.th-footer{
  background: var(--forest-deep);
  color: rgba(251,248,240,0.78);
  padding: 64px 0 0;
  font-size: 14.5px;
}
.th-footer__top{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-on-dark);
}
.th-footer__brand img{ height: 46px; width: auto; margin-bottom: 16px; }
.th-footer__brand p{ max-width: 280px; line-height: 1.6; color: rgba(251,248,240,0.6); font-size: 14px; }
.th-footer__social{ display: flex; gap: 10px; margin-top: 20px; }
.th-footer__social a{
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-on-dark);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.th-footer__social a:hover{ background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.th-footer__social svg{ width: 17px; height: 17px; }
.th-footer h4{
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 12.5px; color: var(--gold-light); margin-bottom: 18px;
}
.th-footer__col ul{ display: flex; flex-direction: column; gap: 11px; }
.th-footer__col a{ color: rgba(251,248,240,0.78); transition: color 0.2s var(--ease); }
.th-footer__col a:hover{ color: var(--gold-light); }
.th-footer__contact li{ display: flex; gap: 10px; align-items: flex-start; color: rgba(251,248,240,0.78); }
.th-footer__contact svg{ width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--gold); }
.th-footer__bottom{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0; font-size: 12.5px; color: rgba(251,248,240,0.5);
  flex-wrap: wrap;
}
.th-footer__bottom nav{ display: flex; gap: 18px; flex-wrap: wrap; }
.th-footer__bottom nav a{ color: rgba(251,248,240,0.5); }
.th-footer__bottom nav a:hover{ color: var(--gold-light); }
@media (max-width: 900px){
  .th-footer__top{ grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .th-footer__brand{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .th-footer__top{ grid-template-columns: 1fr; }
  .th-footer__bottom{ flex-direction: column; text-align: center; justify-content: center; }
}

/* =================================================================
   FLOATING WHATSAPP BUTTON + MOBILE STICKY ORDER BAR
   ================================================================= */
.th-whatsapp-float{
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(18,21,13,0.45);
  transition: transform 0.2s var(--ease);
}
.th-whatsapp-float svg{ width: 28px; height: 28px; }
.th-whatsapp-float:hover{ transform: scale(1.07); }
.th-whatsapp-float__ring{
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; opacity: 0.55;
  animation: th-pulse-ring 2.2s ease-out infinite;
}
@keyframes th-pulse-ring{
  0%{ transform: scale(1); opacity: 0.55; }
  100%{ transform: scale(1.7); opacity: 0; }
}
@media (max-width: 720px){
  .th-whatsapp-float{ right: 16px; bottom: 86px; width: 52px; height: 52px; }
}

.th-mobile-bar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--forest-deep); color: var(--cream);
  padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  transform: translateY(100%);
  transition: transform 0.32s var(--ease);
  box-shadow: 0 -8px 24px -8px rgba(18,21,13,0.35);
}
.th-mobile-bar.is-visible{ transform: translateY(0); }
.th-mobile-bar__price{ display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.th-mobile-bar__price b{ font-family: var(--font-display); font-size: 19px; color: var(--gold-light); }
.th-mobile-bar__price span{ font-size: 11px; color: rgba(251,248,240,0.6); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-mobile-bar .btn{ flex: none; padding: 12px 18px; font-size: 13.5px; }
.th-mobile-bar__actions{ display: flex; align-items: center; gap: 8px; flex: none; }
.th-mobile-bar__wa{
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: #25D366; color: #06210F;
}
.th-mobile-bar__wa svg{ width: 19px; height: 19px; }
@media (max-width: 720px){
  .th-mobile-bar{ display: flex; }
}

/* =================================================================
   GENERIC PAGE / SINGLE POST CONTENT (About, Contact, policy pages, blog)
   ================================================================= */
.th-page-header{
  background:
    radial-gradient(ellipse 55% 60% at 85% 0%, rgba(182,138,46,0.16), transparent 60%),
    linear-gradient(165deg, var(--cream) 0%, var(--parchment-deep) 100%);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 120px 0 56px; text-align: center;
}
.th-page-header .th-eyebrow{ color: var(--gold-deep); justify-content: center; }
.th-page-header h1{ font-size: clamp(28px,4vw,44px); }
.th-page-wrap{ padding: 64px 0 90px; }
.th-page-wrap .container{ max-width: 760px; }
.entry-content{ font-size: 16.5px; line-height: 1.75; color: var(--ink); }
.entry-content > *+ *{ margin-top: 1.2em; }
.entry-content h2{ font-family: var(--font-display); font-size: 28px; margin-top: 1.8em; }
.entry-content h3{ font-family: var(--font-display); font-size: 21px; margin-top: 1.6em; }
.entry-content a{ color: var(--forest); text-decoration: underline; text-decoration-color: var(--forest-soft); }
.entry-content ul, .entry-content ol{ list-style: revert; padding-left: 1.4em; }
.entry-content li{ margin-top: 0.4em; }
.entry-content blockquote{
  border-left: 3px solid var(--gold); padding-left: 18px;
  font-style: italic; color: rgba(18,21,13,0.7);
}
.entry-content img{ border-radius: var(--radius-md); }
.th-post-meta{ font-family: var(--font-mono); font-size: 12.5px; color: rgba(18,21,13,0.5); margin-bottom: 8px; }
.th-404{ text-align: center; padding: 140px 0 120px; }
.th-404__code{ font-family: var(--font-display); font-size: clamp(64px,12vw,140px); color: var(--gold-soft); line-height: 1; }
.th-404 h1{ font-size: clamp(22px,3vw,30px); margin: 6px 0 22px; }
.th-404 p{ color: rgba(18,21,13,0.6); margin-bottom: 28px; }

/* =================================================================
   WOOCOMMERCE — Shop / Single Product / Cart / Checkout / My Account.
   These pages render with WooCommerce's own bundled templates (we
   only swap the outer wrapper — see th_woo_wrapper_start/end in
   functions.php) so they need their own theming pass; the front
   page's Add to Cart experience above is fully custom and doesn't
   depend on any of this.
   ================================================================= */
.th-woo-wrap{ padding: 56px 0 90px; }
.th-woo-wrap .container{ max-width: var(--container); }

.woocommerce-breadcrumb{
  font-family: var(--font-mono); font-size: 12.5px; color: rgba(18,21,13,0.5);
  margin-bottom: 28px;
}
.woocommerce-breadcrumb a{ color: var(--forest); text-decoration: underline; text-decoration-color: var(--forest-soft); }

.woocommerce-products-header__title,
.page-title{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px,3.6vw,38px); margin-bottom: 28px;
}

/* Notices */
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews{
  list-style: none; margin: 0 0 22px; padding: 14px 18px;
  border-radius: var(--radius-sm); font-size: 14.5px;
  background: var(--parchment-deep); border: 1px solid var(--line); color: var(--ink);
}
.woocommerce-message{ border-color: var(--forest-soft); }
.woocommerce-error{ border-color: var(--clay); }
.woocommerce-message a.button, .woocommerce-error a.button{ margin-left: 10px; }

/* Product loop (Shop / category archives) */
ul.products{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; list-style: none; margin: 0; padding: 0; }
ul.products li.product{
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 18px; box-shadow: var(--shadow-card);
}
ul.products li.product img{ border-radius: var(--radius-sm); margin-bottom: 14px; }
ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 6px;
}
ul.products li.product .price{ font-family: var(--font-display); font-size: 17px; color: var(--forest-deep); }
ul.products li.product .price del{ color: rgba(18,21,13,0.4); text-decoration: line-through; margin-right: 6px; }
ul.products li.product .price ins{ text-decoration: none; }
ul.products li.product .button{ margin-top: 12px; }
.star-rating{ color: var(--gold); font-size: 13px; }
@media (max-width: 900px){ ul.products{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ ul.products{ grid-template-columns: 1fr; } }

/* Generic WooCommerce buttons (Add to Cart, Place Order, etc.) — reuse
   the theme's own gold button look rather than WooCommerce's default
   grey, everywhere a plain .button appears. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 70%);
  color: var(--ink); box-shadow: var(--shadow-pop); cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.woocommerce .button:hover{ transform: translateY(-2px); }
.woocommerce .button.alt{ background: var(--forest-deep); color: var(--cream); box-shadow: none; }

/* Single product page */
.woocommerce div.product .woocommerce-product-gallery{ border-radius: var(--radius-md); overflow: hidden; }
.woocommerce div.product .summary{ padding-top: 8px; }
.woocommerce div.product .product_title{ font-family: var(--font-display); font-size: clamp(26px,3.4vw,36px); margin-bottom: 10px; }
.woocommerce div.product p.price{ font-family: var(--font-display); font-size: 26px; color: var(--forest-deep); margin-bottom: 16px; }
.woocommerce div.product p.price del{ color: rgba(18,21,13,0.4); text-decoration: line-through; margin-right: 8px; font-size: 18px; }
.woocommerce div.product .woocommerce-product-details__short-description{ color: rgba(18,21,13,0.72); margin-bottom: 20px; }
.woocommerce div.product form.cart{ margin-bottom: 20px; }
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart table.variations select{
  font-family: var(--font-body); font-size: 15px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream); color: var(--ink);
}
.woocommerce div.product form.cart div.quantity{ margin-right: 10px; }
.woocommerce div.product form.cart .qty{
  width: 70px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 15px; text-align: center;
}
.woocommerce-variation-price .price{ font-family: var(--font-display); font-size: 22px; color: var(--forest-deep); }
.woocommerce-tabs{ margin-top: 40px; border-top: 1px solid var(--line); padding-top: 24px; }
.woocommerce-tabs ul.tabs{ list-style: none; display: flex; gap: 24px; padding: 0; margin: 0 0 20px; }
.woocommerce-tabs ul.tabs li a{ font-weight: 600; color: rgba(18,21,13,0.5); }
.woocommerce-tabs ul.tabs li.active a{ color: var(--forest-deep); }
.related.products{ margin-top: 56px; }
.related.products > h2{ font-family: var(--font-display); font-size: 24px; margin-bottom: 24px; }

/* Cart page */
table.shop_table{ width: 100%; border-collapse: collapse; margin-bottom: 28px; }
table.shop_table th{ text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(18,21,13,0.5); padding: 12px 10px; border-bottom: 1px solid var(--line); }
table.shop_table td{ padding: 16px 10px; border-bottom: 1px solid var(--line); }
table.shop_table td.product-name a{ font-weight: 600; }
table.shop_table td.product-thumbnail img{ border-radius: var(--radius-sm); width: 64px; }
.cart_totals{ max-width: 420px; margin-left: auto; background: var(--parchment-deep); border-radius: var(--radius-md); padding: 24px; }
.cart_totals h2{ font-family: var(--font-display); font-size: 20px; margin-bottom: 16px; }
.cart_totals .order-total .amount{ font-family: var(--font-display); font-size: 22px; color: var(--forest-deep); }
.wc-proceed-to-checkout .checkout-button{ width: 100%; text-align: center; margin-top: 8px; }

/* Checkout page */
.woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details{ display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.woocommerce-checkout .form-row{ margin-bottom: 16px; }
.woocommerce-checkout label{ display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 6px; }
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea{
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 15px; background: var(--cream); color: var(--ink);
}
#order_review{ background: var(--parchment-deep); border-radius: var(--radius-md); padding: 24px; }
#order_review table.shop_table td, #order_review table.shop_table th{ border-color: rgba(18,21,13,0.08); }
.woocommerce-checkout #payment{ background: var(--parchment-deep); border-radius: var(--radius-md); padding: 4px 20px; margin-top: 20px; }
.woocommerce-checkout #payment ul.payment_methods{ list-style: none; padding: 16px 0; margin: 0; }
.woocommerce-checkout #payment div.payment_box{
  background: var(--cream); border-radius: var(--radius-sm); padding: 14px; margin: 10px 0; font-size: 14px;
}
#place_order{ width: 100%; padding: 16px; font-size: 16.5px; }
@media (max-width: 800px){
  .woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details{ grid-template-columns: 1fr; }
}

/* My Account */
.woocommerce-MyAccount-navigation ul{ list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.woocommerce-MyAccount-navigation li a{
  display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 500;
}
.woocommerce-MyAccount-navigation li.is-active a{ background: var(--forest-deep); color: var(--cream); border-color: var(--forest-deep); }