/* =======================================================================
   DIRA — style.css · "Peacock & Marigold" edition
   Deep peacock green (as in the logo) with an Indian jewel palette:
   marigold gold · peacock teal · terracotta rose · sandalwood ivory.
   Signature: jharokha arch hero, toran bead garland, scalloped dividers,
   hand-drawn mandala grounds. Fonts: Fraunces (display) · Jost + DM Sans.
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Montenegrin+Gothic+One&display=swap');

:root {
  /* Deep peacock green — PRIMARY brand colour (matches the logo) */
  --green: #104E38;
  --green-2: #051f20;
  --green-deep: #082C20;
  --green-logo: #051f20;
  /* header surface — close to the logo bg */
  --green-soft: #DEEDE3;
  --green-tint: #F0F6F1;
  /* Indian jewel accents: peacock teal · terracotta rose · marigold */
  --navy: #21382D;
  /* heading ink — deep peacock */
  --navy-2: #30523F;
  --navy-deep: #14251C;
  --sky: #3F8578;
  /* peacock-feather teal (was blue) */
  --sky-soft: #DFEEE8;
  --sky-tint: #F1F8F4;
  --blush: #D97F5E;
  /* terracotta rose */
  --blush-soft: #F9E4D6;
  --blush-tint: #FCF3EA;
  --linen: #EFE3CB;
  /* sandalwood */
  --linen-soft: #F8F1E1;
  --ivory: #FDFAF1;
  --white-2: #FFFFFF;
  --gold: #D99A2B;
  /* marigold */
  --gold-2: #EDBE62;
  --gold-3: #F6DFA4;
  --gold-soft: #F9EDCF;
  --gold-deep: #A9741B;
  --rani: #B94B5E;
  /* rani pink — used only in tiny doses */

  --ink: #263129;
  --ink-2: #3B4A40;
  --ink-soft: #5B6A5D;
  --on-dark: #F5EFDF;
  --on-dark-soft: #D6DCCB;

  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --util: "Jost", var(--sans);

  --wrap: 1240px;
  --gutter: clamp(1.1rem, 4.5vw, 4rem);
  --sp: clamp(3.4rem, 6vw, 6rem);
  --r: 20px;
  --r-sm: 13px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --sh-sm: 0 10px 24px -16px rgba(8, 44, 32, .32);
  --sh: 0 22px 44px -26px rgba(8, 44, 32, .40);
  --sh-lg: 0 34px 64px -30px rgba(8, 44, 32, .46);
  --header-h: 80px;
}

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  font-family: "Cormorant Garamond", serif;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
}

input,
button,
select,
textarea {
  font-family: inherit;
}

::selection {
  background: var(--gold-2);
  color: var(--green-deep);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

body.no-scroll {
  overflow: hidden;
}

svg.i {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* TYPE */
h1,
h2,
h3,
h4 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-variation-settings: "opsz" 90, "SOFT" 30;
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--navy);
}

.d1 {
  font-size: clamp(2.7rem, 5.4vw, 4.8rem);
  line-height: 1;
}

.d2 {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
}

.d3 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}

.serif-it {
  font-style: italic;
}

.goldtext {
  background: linear-gradient(96deg, var(--gold-deep), var(--gold-2) 50%, var(--gold-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.greentext {
  color: var(--green);
}

.eyebrow {
  font-family: var(--util);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #8C6108;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

.eyebrow--c {
  justify-content: center;
}

.eyebrow--c::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

.eyebrow--light {
  color: var(--gold-2);
}

.lede {
  font-size: clamp(1.02rem, 1.2vw, 1.16rem);
  color: var(--ink-2);
}

/* LAYOUT */
.wrap {
  width: 100%;
  /* max-width: var(--wrap); */
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--sp);
  position: relative;
}

.section--tight {
  padding-block: clamp(2.4rem, 4vw, 3.6rem);
}

.head-c {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2.2rem, 4vw, 3rem);
}

.head-c .eyebrow {
  margin-bottom: 1rem;
}

.head-c h2 {
  margin-bottom: .7rem;
}

.head-c p {
  color: var(--ink-2);
  max-width: 56ch;
  margin-inline: auto;
}

/* Distinct light section backgrounds */
.s-ivory {
  background: var(--ivory);
}

.s-white {
  background: linear-gradient(180deg, #FFFFFF, #FBFBF8);
}

.s-linen {
  background: linear-gradient(180deg, var(--linen-soft), var(--linen));
}

.s-sky {
  background: linear-gradient(180deg, var(--sky-tint), var(--sky-soft));
}

.s-blush {
  background: linear-gradient(180deg, var(--blush-tint), var(--blush-soft));
}

.s-green-soft {
  background: linear-gradient(180deg, var(--green-tint), var(--green-soft));
}

/* Rich anchors */
.s-green {
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  color: var(--on-dark);
}

.s-navy {
  background: radial-gradient(120% 130% at 12% 0%, var(--navy-2) 0%, var(--navy) 48%, var(--navy-deep) 100%);
  color: var(--on-dark);
}

.s-green h2,
.s-green h3,
.s-navy h2,
.s-navy h3 {
  color: var(--ivory);
}

.s-green p,
.s-navy p,
.s-green .lede,
.s-navy .lede {
  color: var(--on-dark-soft);
}

.pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54'%3E%3Cg fill='none' stroke='%23EBD6A2' stroke-opacity='0.08'%3E%3Cpath d='M27 5c7 9 7 15 0 24-7-9-7-15 0-24zM27 25c7 9 7 15 0 24-7-9-7-15 0-24z'/%3E%3C/g%3E%3C/svg%3E");
}

.s-green>.wrap,
.s-navy>.wrap {
  position: relative;
  z-index: 1;
}

/* BUTTONS */
.btn {
  font-family: var(--util);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  line-height: 1;
  border-radius: 5px;
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
}

.btn svg {
  width: 16px;
  height: 16px;
}

.btn:active {
  transform: translateY(1px);
}

.btn--green {
  background: linear-gradient(120deg, var(--green), var(--green-2));
  color: var(--ivory);
  box-shadow: 0 12px 24px -14px rgba(11, 50, 37, .85);
}

.btn--green:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 34px -16px rgba(11, 50, 37, .95);
}

.btn--gold {
  background: linear-gradient(96deg, #efbf60, #ffc560 55%, #b7801f);
  color: #3a2c08;
  box-shadow: 0 12px 24px -14px rgba(168, 126, 51, .7);
}

.btn--gold::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transition: left .7s var(--ease);
}

.btn--gold:hover {
  transform: translateY(-3px);
}

.btn--gold:hover::after {
  left: 130%;
}

.btn--navy {
  background: var(--navy);
  color: var(--ivory);
}

.btn--navy:hover {
  background: var(--navy-deep);
  transform: translateY(-3px);
  box-shadow: var(--sh);
}

.btn--ghost {
  border-color: var(--green);
  color: var(--green);
  background: rgba(18, 80, 58, .05);
}

.btn--ghost:hover {
  background: var(--green);
  color: var(--ivory);
  transform: translateY(-3px);
}

.btn--light {
  border-color: rgba(243, 238, 227, .45);
  color: var(--ivory);
  background: rgba(243, 238, 227, .08);
}

.btn--light:hover {
  background: var(--ivory);
  color: var(--green);
  transform: translateY(-3px);
}

.btn--goldline {
  border-color: var(--gold-2);
  color: var(--gold-2);
  background: rgba(223, 189, 119, .08);
}

.btn--goldline:hover {
  background: var(--gold-2);
  color: var(--green-deep);
  transform: translateY(-3px);
}

.btn--block {
  width: 100%;
}

.btn--lg {
  padding: 1.1rem 2.2rem;
  font-size: .8rem;
}

.btn--sm {
  padding: .68rem 1.15rem;
  font-size: .68rem;
}

/* ANNOUNCE — saffron ribbon, high-contrast ink */
.announce {
  background: linear-gradient(96deg, #efbf60, #ffc85b 40%, #dcae54 72%, #efbf60);
  color: #231902;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(74, 50, 4, .25);
}

.announce::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 26%;
  height: 100%;
  transform: skewX(-24deg);
  background: linear-gradient(90deg, transparent, rgba(255, 252, 240, .2), transparent);
  animation: annshine 7s var(--ease) infinite;
}

@keyframes annshine {
  0% {
    left: -40%;
  }

  55%,
  100% {
    left: 130%;
  }
}

.announce__track {
  display: flex;
  gap: 3.5rem;
  white-space: nowrap;
  padding: 3px 0;
  width: max-content;
  animation: marquee 30s linear infinite;
  font-family: var(--util);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.announce__track span {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-shadow: 0 1px 0 rgba(255, 248, 228, .25);
  font-size: 11px;
}

.announce b {
  color: var(--green-deep);
  font-weight: 600;
}

.announce i {
  color: #6B4A06;
  font-style: normal;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* HEADER — rich dark green, actual logo image, creative nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  transition: background .45s var(--ease), box-shadow .45s, border-color .45s;
  border-bottom: 1px solid rgba(237, 190, 98, .12);
  background: var(--green-logo);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-2) 50%, var(--gold) 70%, transparent);
  opacity: .55;
  pointer-events: none;
}

.site-header[data-transparent="true"] {
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  border-color: rgba(235, 214, 162, .1);
}

.site-header.solid {
  background: rgba(9, 42, 31, .97);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px -18px rgba(0, 0, 0, .6);
  border-color: rgba(235, 214, 162, .14);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  height: var(--header-h);
}

.brand-logo {
  width: 140px;
  flex-shrink: 0;
}

.brand-logo--footer {
  width: 150px;
}

.btn:hover {
  color: #fff;
}

.nav {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: 1.4rem;
}

.nav a {
  font-family: var(--util);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-dark);
  padding: .55rem 1rem;
  border-radius: 100px;
  position: relative;
  z-index: 0;
  transition: color .3s var(--ease);
  color: #fff;
}

.nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100px;
  z-index: -1;
  background: linear-gradient(120deg, var(--gold), var(--gold-2));
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.nav a:hover,
.nav a:focus-visible {
  color: #3a2c08;
}

.nav a:hover::before,
.nav a:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin-left: auto;
}

.iconbtn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark);
  border-radius: 50%;
  position: relative;
  transition: background .3s, color .3s;
}

.iconbtn:hover {
  background: rgba(243, 238, 227, .14);
  color: var(--gold-2);
}

.iconbtn svg {
  width: 20px;
  height: 20px;
}

.cart-count {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--green-deep);
  font-family: var(--util);
  font-size: .6rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-cta {
  margin-left: .6rem;
}

.hamburger {
  display: none;
  width: 42px;
  height: 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--on-dark);
}

.hamburger span {
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.has-mega {
  position: relative;
}

.mega {
  position: fixed;
  left: 0;
  right: 0;
  margin-top: .35rem;
  background: var(--ivory);
  color: var(--ink);
  border-top: 2px solid var(--gold);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: .35s var(--ease);
  z-index: 49;
}

.has-mega:hover .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mega-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 2.2rem var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.4fr;
  gap: 2rem;
}

.mega h4 {
  font-family: var(--util);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1rem;
}

.mega li {
  margin-bottom: .55rem;
}

.mega li a {
  color: var(--ink-2);
  font-size: .92rem;
}

.mega li a:hover {
  color: var(--green);
}

.mega__promo {
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  min-height: 190px;
  color: var(--ivory);
  display: flex;
}

.mega__promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega__promo span {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 1.2rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  background: linear-gradient(180deg, transparent, rgba(11, 50, 37, .85));
  width: 100%;
  color: #fff;
}

/* HERO — content left, ambient background video right */
.hero {
  position: relative;
  overflow: hidden;
  background-color: #10181F;
  /* base tone while video loads */
  background-image: url(../images/banner-bg.png);
  /* graceful fallback */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* — video layer, blended as background — */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__video-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 16,24,31 = #10181F — swap these numbers if you change the color */
  background: linear-gradient(90deg, rgba(13, 20, 28, .90) 0%, rgb(13 20 28) 30%, rgb(13 20 28 / 78%) 54%, rgb(255 255 255 / 12%) 76%, rgba(13, 20, 28, 0) 100%), linear-gradient(180deg, rgba(13, 20, 28, .18) 0%, transparent 22%, transparent 80%, rgb(255 255 255 / 0%) 100%);
}

.hero__video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% top;
  left: 0px;
}

/* Dark gradient — strong on the left for text, dissolving into the video */
.hero__video-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(13, 20, 28, .90) 0%,
      rgba(13, 20, 28, .78) 30%,
      rgba(13, 20, 28, .45) 54%,
      rgba(13, 20, 28, .12) 76%,
      rgba(13, 20, 28, 0) 100%),
    linear-gradient(180deg,
      rgba(13, 20, 28, .18) 0%,
      transparent 22%,
      transparent 80%,
      rgba(13, 20, 28, .28) 100%);
  /* soft top/bottom vignette = seamless blend */
}

/* — layout — */
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 36rem) 1fr;
  /* text left, video breathes right */
  align-items: center;
  min-height: 600px;
  padding-block: clamp(2.6rem, 4.4vw, 4.4rem);
}

.hero__text {
  max-width: 35rem;
}

/* — text on dark: color overrides only, everything else preserved — */
.hero__title {
  color: #fff;
  margin-bottom: 1.15rem;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.hero__accent {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(96deg, #F2C14E, var(--gold) 45%, #E9A83B 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .06em;
}

.hero__lede {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .88);
  max-width: 42ch;
  margin-bottom: 1.9rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--util);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(217, 154, 43, .4);
  border-radius: 100px;
  padding: .5rem 1rem;
  margin-bottom: 1.3rem;
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .7);
  backdrop-filter: blur(4px);
}

.hero__chip svg {
  width: 14px;
  height: 14px;
  color: var(--blush);
  animation: heartbeat 2.4s ease-in-out infinite;
}

@keyframes heartbeat {

  0%,
  100% {
    transform: scale(1);
  }

  12% {
    transform: scale(1.22);
  }

  24% {
    transform: scale(1);
  }

  36% {
    transform: scale(1.14);
  }

  48% {
    transform: scale(1);
  }
}

.hero__cta {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  margin-bottom: 1.7rem;
}

.hero__rating {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}

.hero__stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 2px;
}

.hero__rating small {
  color: rgba(255, 255, 255, .75);
  font-size: .84rem;
}

.hero__rating b {
  color: #fff;
}

.hero__trust {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px dashed rgba(255, 255, 255, .3);
  display: none;
}

.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--util);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.hero__trust svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
}

.section.section--tight.s-green.pattern.scallop-top {
  padding: 40px 0;
}

.stats-sec {
  background: none !important;
}

/* ==========================================================================
   FULL SIZE BANNER SLIDER STRIP (BELOW VALUES STRIP)
   ========================================================================== */
.full-size-banner-slider-strip {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0b2528;
  min-height: 520px;
}

.banner-slider__track-wrapper {
  position: relative;
  width: 100%;
  min-height: 520px;
}

.banner-slider__slides {
  position: relative;
  width: 100%;
  min-height: 520px;
}

.banner-slider__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1.03);
}

.banner-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  pointer-events: auto;
  transform: scale(1);
}

.banner-slider__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  z-index: 0;
}

.banner-slider__link {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 1;
}

.banner-slider__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 37, 40, 0.92) 0%, rgba(11, 37, 40, 0.78) 40%, rgba(11, 37, 40, 0.3) 72%, rgba(11, 37, 40, 0.05) 100%);
  z-index: 1;
}

.banner-slider__content-wrap {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
  padding-block: 60px;
}

.banner-slider__card {
  max-width: 560px;
  color: #fff;
}

.banner-slider__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #f1cf85;
  background: rgba(184, 146, 65, 0.25);
  border: 1px solid rgba(184, 146, 65, 0.45);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
  backdrop-filter: blur(4px);
}

.banner-slider__title {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0 0 14px 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.banner-slider__lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 24px;
}

.banner-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(11, 37, 40, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.banner-slider__arrow:hover {
  background: #b89241;
  border-color: #b89241;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 25px rgba(184, 146, 65, 0.4);
}

.banner-slider__arrow--prev {
  left: 24px;
}

.banner-slider__arrow--next {
  right: 24px;
}

.banner-slider__indicators {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-slider__dots {
  display: flex;
  gap: 14px;
  background: rgba(11, 37, 40, 0.8);
  padding: 8px 20px;
  border-radius: 30px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.banner-slider__dot {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 6px;
  transition: all 0.3s ease;
}

.banner-slider__dot:hover,
.banner-slider__dot.is-active {
  color: #fff;
}

.banner-slider__dot .bar {
  width: 32px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.banner-slider__dot .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #b89241;
  border-radius: 2px;
}

.banner-slider__dot.is-active .fill {
  width: 100%;
  transition: width 5s linear;
}

@media (max-width: 768px) {

  .full-size-banner-slider-strip,
  .banner-slider__track-wrapper,
  .banner-slider__slides,
  .banner-slider__content-wrap {
    min-height: 420px;
  }

  .banner-slider__arrow {
    width: 38px;
    height: 38px;
  }

  .banner-slider__arrow--prev {
    left: 10px;
  }

  .banner-slider__arrow--next {
    right: 10px;
  }

  .banner-slider__dot .label {
    display: none;
  }
}

/* ============ RESPONSIVE ============ */

/* Tablet */
@media (max-width: 991px) {
  .hero-inner {
    grid-template-columns: 1fr;
    min-height: clamp(26rem, 62vh, 38rem);
  }



  .hero__video-shade {
    background:
      linear-gradient(90deg,
        rgba(13, 20, 28, .88) 0%,
        rgba(13, 20, 28, .68) 45%,
        rgba(13, 20, 28, .42) 100%);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .hero-inner {
    min-height: clamp(24rem, 78vh, 34rem);
    padding-block: 2.4rem;
  }



  .hero__video-shade {
    background:
      linear-gradient(180deg,
        rgba(13, 20, 28, .58) 0%,
        rgba(13, 20, 28, .68) 45%,
        rgba(13, 20, 28, .82) 100%);
  }

  .hero__lede {
    font-size: 1rem;
  }

  .hero__cta .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero__chip svg {
    animation: none;
  }
}

/* scalloped toran edge on the section that follows the hero */
.s-green.scallop-top {
  position: relative;
}

.s-green.scallop-top::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 15px;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 50% -4px, #FBF2E0 11px, transparent 12px);
  background-size: 30px 15px;
  background-repeat: repeat-x;
  display: none;
}

/* VALUE STRIP */
.values__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 90%;
}

.value {
  display: flex;
  align-items: center;
  gap: .9rem;
  justify-content: center;
}

.value .ic {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  transition: transform .4s var(--ease);
}

.value:hover .ic {
  transform: translateY(-4px) rotate(-6deg);
}

.value:nth-child(1) .ic {
  background: linear-gradient(135deg, var(--green), var(--green-2));
}

.value:nth-child(2) .ic {
  background: linear-gradient(135deg, var(--blush), #C0472F);
}

.value:nth-child(3) .ic {
  background: linear-gradient(135deg, var(--sky), #4E7EA6);
}

.value:nth-child(4) .ic {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
}

.value .ic svg {
  width: 22px;
  height: 22px;
}

.value b {
  font-family: var(--util);
  font-size: .84rem;
  color: var(--navy) !important;
  display: block;
  letter-spacing: .02em;
}

.value small {
  color: var(--ink-soft) !important;
  font-size: .74rem;
}

.s-green .value b {
  color: var(--ivory);
}

.s-green .value small {
  color: var(--on-dark-soft);
}

/* 10% JOIN band — compact, on green, no separate box */
.joinband {
  text-align: center;
}

.joinband .off {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--gold-2);
}

.joinband h2 {
  color: var(--ivory);
  margin: .15rem 0 .5rem;
}

.joinband p {
  color: var(--on-dark-soft);
  max-width: 54ch;
  margin: 0 auto 1.2rem;
  font-size: .98rem;
}

.joinband form {
  display: flex;
  gap: .6rem;
  max-width: 520px;
  margin-inline: auto;
  flex-wrap: wrap;
  justify-content: center;
}

.joinband input {
  flex: 1;
  min-width: 220px;
  background: rgba(243, 238, 227, .12);
  border: 1px solid rgba(235, 214, 162, .3);
  color: var(--ivory);
  padding: .9rem 1.2rem;
  border-radius: 100px;
}

.joinband input::placeholder {
  color: var(--on-dark-soft);
}

.joinband input:focus {
  outline: none;
  border-color: var(--gold-2);
}

.joinband small {
  display: block;
  margin-top: .8rem;
  color: var(--on-dark-soft);
  font-size: .74rem;
}

/* CATEGORIES — clean equal editorial cards */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

#categories {
  position: relative;
  background-image: url(../images/bg-folk-art.png);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

#categories::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 70%);
  /* Opacity change kar sakte ho */
  z-index: 1;
}

#categories>* {
  position: relative;
  z-index: 2;
}


#products {
  position: relative;
  background-image: url(../images/bg-mandala-peach.png);
  background-size: cover;
  background-position: top;
  overflow: hidden;
  background-repeat: no-repeat;
}

#products::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 70%);
  /* Opacity change kar sakte ho */
  z-index: 1;
}

#products>* {
  position: relative;
  z-index: 2;
}

.cat {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  display: block;
  box-shadow: var(--sh);
  aspect-ratio: 3/4;
}

.cat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}

.cat:hover img {
  transform: scale(1.08);
}

.cat__ov {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 40, 29, .06) 0%, rgba(8, 40, 29, 0) 34%, rgba(8, 40, 29, .9) 100%);
  transition: background .4s;
}

.cat:hover .cat__ov {
  background: linear-gradient(180deg, rgba(9, 42, 31, .15) 30%, rgba(9, 42, 31, .88) 100%);
}

.cat__body {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.2rem 1.25rem;
  color: #fff;
  width: 100%;
}

.cat__body .k {
  font-family: var(--util);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.cat__body h3 {
  color: #fff;
  font-size: 1.5rem;
  margin: .15rem 0 .35rem;
}

.cat__body .go {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--util);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-3);
  opacity: 0;
  max-height: 0;
  transform: translateY(6px);
  transition: .4s var(--ease);
}

.cat:hover .cat__body .go {
  opacity: 1;
  max-height: 2rem;
  transform: none;
}

.cat__body .go svg {
  width: 14px;
  height: 14px;
}

/* PRODUCTS */
.prod-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-bottom: 2.2rem;
}

.tabs {
  display: inline-flex;
  gap: .35rem;
  background: #fff;
  border: 1px solid var(--linen);
  padding: .32rem;
  border-radius: 100px;
  flex-wrap: wrap;
  box-shadow: var(--sh-sm);
}

.tab {
  font-family: var(--util);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .58rem 1.15rem;
  border-radius: 100px;
  transition: .35s var(--ease);
}

.tab:hover {
  color: var(--navy);
}

.tab.is-active {
  background: linear-gradient(120deg, var(--green), var(--green-2));
  color: var(--ivory);
  box-shadow: 0 6px 16px -8px rgba(11, 50, 37, .6);
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.5vw, 1.5rem);
}

.product {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--linen);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.product:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
}

.product:nth-child(4n+1) {
  background: #FBF3EF;
}

/* blush tint */
.product:nth-child(4n+2) {
  background: #F1F6FB;
}

/* sky tint   */
.product:nth-child(4n+3) {
  background: #EDF5F0;
}

/* green tint */
.product:nth-child(4n) {
  background: #FAF3E3;
}

/* gold tint  */
.product.is-hidden {
  display: none;
}

.product__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
}

.product:nth-child(4n+1) .product__media {
  background: var(--blush-soft);
}

.product:nth-child(4n+2) .product__media {
  background: var(--sky-soft);
}

.product:nth-child(4n+3) .product__media {
  background: var(--green-soft);
}

.product:nth-child(4n) .product__media {
  background: var(--gold-soft);
}

.product__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  transition: transform 1s var(--ease-out), opacity .6s;
}

.product__media img.back {
  opacity: 0;
  transform: scale(1.04);
}

.product:hover .product__media img.front {
  opacity: 0;
}

.product:hover .product__media img.back {
  opacity: 1;
  transform: scale(1);
}

.badge {
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 3;
  font-family: var(--util);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .38rem .65rem;
  border-radius: 100px;
  color: #fff;
  font-weight: 600;
}

.badge--new {
  background: linear-gradient(120deg, var(--green), var(--green-2));
}

.badge--sale {
  background: linear-gradient(120deg, var(--blush), #C0472F);
}

.badge--best {
  background: linear-gradient(120deg, var(--gold), var(--gold-deep));
  color: #3a2c08;
}

.wish {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  box-shadow: var(--sh-sm);
  transition: .3s var(--ease);
}

.wish svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.wish:hover,
.wish.is-active {
  background: linear-gradient(120deg, var(--blush), #C0472F);
  color: #fff;
}

.wish.is-active svg {
  fill: currentColor;
}

.product__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: .75rem;
  display: flex;
  gap: .5rem;
  transform: translateY(120%);
  transition: transform .45s var(--ease);
}

.product:hover .product__actions {
  transform: none;
}

.qadd {
  flex: 1;
  background: #051f20;
  color: var(--ivory);
  font-family: var(--util);
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .72rem;
  border-radius: 100px;
  font-weight: 600;
  transition: background .3s;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qadd:hover {
  background: var(--green-deep);
}

.qview {
  width: 44px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .94);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-sm);
}

.qview svg {
  width: 18px;
  height: 18px;
}

.product__info {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  flex: 1;
}

.product__cat {
  font-family: var(--util);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8C6108;
}

.product__name {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--navy);
}

.product__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .3rem;
}

.product__price {
  font-weight: 600;
  color: var(--navy);
}

.product__price del {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: .85em;
  margin-right: .35rem;
}

.stars {
  color: var(--gold);
  font-size: .72rem;
  letter-spacing: 1px;
}

.prod-foot {
  text-align: center;
  margin-top: 2.6rem;
}

/* AUTO-SLIDER */
.slider {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.slider__track {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  animation: slide 42s linear infinite;
}

.slider:hover .slider__track {
  animation-play-state: paused;
}

.slide-card {
  width: 270px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--linen);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .4s var(--ease), box-shadow .4s;
}

.slide-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh);
}

.slide-card__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}

.slide-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  transition: transform 1s var(--ease-out);
}

.slide-card:hover .slide-card__media img {
  transform: scale(1.06);
}

.slide-card__b {
  padding: .9rem 1rem 1.1rem;
}

.slide-card__b .product__cat {
  display: block;
}

.slide-card__b h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--navy);
  margin: .1rem 0 .35rem;
}

@keyframes slide {
  to {
    transform: translateX(calc(-50% - .6rem));
  }
}

/* FESTIVE BANNER */
.festive .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(2.6rem, 4vw, 3.6rem);
}

.festive__img {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--sh-lg);
}

.festive__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.festive:hover .festive__img img {
  transform: scale(1.06);
}

.festive__off {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(120deg, var(--gold), var(--gold-deep));
  color: #3a2c08;
  padding: .45rem .95rem;
  border-radius: 100px;
  font-family: var(--util);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-weight: 600;
}

.festive h2 {
  margin-bottom: .85rem;
}

.festive p {
  margin-bottom: 1.3rem;
  max-width: 44ch;
}

.count {
  display: flex;
  gap: .7rem;
}

.count div {
  text-align: center;
}

.count .box {
  background: rgba(243, 238, 227, .1);
  border: 1px solid rgba(235, 214, 162, .28);
  border-radius: 12px;
  padding: .65rem .3rem;
  min-width: 60px;
  backdrop-filter: blur(6px);
}

.count b {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--gold-2);
  line-height: 1;
}

.count small {
  font-family: var(--util);
  font-size: .54rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

/* AUTHOR / STORY (sticky, real photo, rich stat boxes) */
.split {
  display: grid;
  grid-template-columns: 1.2fr .80fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.sticky-media {
  position: sticky;
  top: calc(var(--header-h) + 22px);
}

.author__media {
  position: relative;
}

.author__img {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  aspect-ratio: 5/5;
}

.author__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.author__stamp {
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  z-index: 2;
}

.author__stamp img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 100px;
}

.author__body {
  padding-top: .4rem;
}

.author__quote {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  line-height: 1.3;
  color: var(--navy);
  margin: 1rem 0 1.2rem;
}

.author__quote em {
  color: var(--green);
  font-style: italic;
}

.author__sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--green);
}

.author__role {
  font-family: var(--util);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .15rem;
}

.author__pitch {
  margin-top: 1.4rem;
  display: grid;
  gap: .7rem;
}

.author__pitch li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  color: var(--ink-2);
  font-size: .95rem;
  background: #ffffff;
  padding: 10px;
  width: 98%;
  border-radius: 10px;
}

.author__pitch li strong {
  font-weight: 900;
}

.author__pitch .tick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(96deg, #efbf60, #ffc560 55%, #b7801f);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.author__pitch .tick svg {
  width: 13px;
  height: 13px;
}

/* stat cards — light, gold-topped, rich accent */
.author__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
  margin-top: 1.9rem;
}

.statbox {
  text-align: center;
  padding: 1.3rem .6rem 1.1rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--linen);
  border-top: 3px solid var(--gold);
  box-shadow: var(--sh-sm);
  transition: transform .45s var(--ease), box-shadow .45s;
}

.statbox:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh);
  border-top-color: var(--green);
}

.statbox b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.1rem;
  color: var(--green);
  display: block;
  line-height: 1;
}

.statbox span {
  font-family: var(--util);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* WHY (colourful cards on a very light bg) */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.why {
  padding: 1.7rem 1.4rem;
  border-radius: var(--r);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(22, 35, 63, .05);
  transition: transform .45s var(--ease), box-shadow .45s;
}

.why:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh);
}

.why:nth-child(1) {
  background: var(--green-soft);
}

.why:nth-child(2) {
  background: var(--blush-soft);
}

.why:nth-child(3) {
  background: var(--sky-soft);
}

.why:nth-child(4) {
  background: var(--gold-soft);
}

.why .ic {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #fff;
  font-size: 30px;
  transition: transform .4s var(--ease);
}

.why:hover .ic {
  transform: rotate(-6deg) scale(1.05);
}

.why:nth-child(1) .ic {
  background: linear-gradient(135deg, var(--green), var(--green-2));
}

.why:nth-child(2) .ic {
  background: linear-gradient(135deg, var(--blush), #C0472F);
}

.why:nth-child(3) .ic {
  background: linear-gradient(135deg, var(--sky), #4E7EA6);
}

.why:nth-child(4) .ic {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
}

.why .ic svg {
  width: 25px;
  height: 25px;
}

.why h3 {
  font-size: 1.32rem;
  margin-bottom: .4rem;
  color: var(--navy);
}

.why p {
  color: var(--ink-2);
  font-size: .9rem;
}

.why .no {
  position: absolute;
  top: .9rem;
  right: 1.1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.2rem;
  color: rgba(22, 35, 63, .1);
}

/* PROCESS (sticky) */
.process__steps {
  display: grid;
  gap: 1rem;
}

.pstep {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 1.2rem 1.3rem;
  background: #fff;
  border: 1px solid var(--linen);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition: transform .4s var(--ease), box-shadow .4s;
}

.pstep:hover {
  transform: translateX(6px);
  box-shadow: var(--sh);
}

.pstep__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--gold-deep);
  line-height: 1;
  width: 44px;
}

.pstep h3 {
  font-size: 1.3rem;
  margin-bottom: .25rem;
}

.pstep p {
  color: var(--ink-soft);
  font-size: .92rem;
}

/* OCCASION */
.occ-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.occ {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 3/4;
  display: block;
  box-shadow: var(--sh);
}

.occ img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}

.occ:hover img {
  transform: scale(1.08);
}

.occ::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(11, 50, 37, .82));
}

.occ span {
  position: absolute;
  left: 0;
  bottom: 1rem;
  width: 100%;
  text-align: center;
  z-index: 1;
  color: #fff;
  font-family: var(--util);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.occ b {
  position: absolute;
  top: .8rem;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 1;
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-2);
  font-size: 1.1rem;
}

/* GOOGLE REVIEWS — feature card + auto-scrolling columns */
.greviews {
  display: grid;
  grid-template-columns: .92fr 1fr 1fr;
  gap: 1.2rem;
  align-items: start;
  position: relative;
  z-index: 1;
}

.gfeature {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background: radial-gradient(120% 130% at 80% -10%, #113126, #32373a 45%, #113126);
  border: 1px solid rgba(235, 214, 162, .2);
  border-radius: 22px;
  padding: 2rem 1.9rem;
  color: var(--on-dark);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.gfeature .glogo {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-sm);
  margin-bottom: 1.3rem;
}

.gfeature .glogo span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(#4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0);
  display: flex;
}

.gfeature .glogo i {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  font-family: var(--util);
  font-weight: 700;
  font-size: .95rem;
  color: #4285F4;
  font-style: normal;
}

.gfeature h3 {
  color: var(--ivory);
  font-size: 2.1rem;
  margin-bottom: .35rem;
}

.gfeature .gstars {
  color: var(--gold-2);
  letter-spacing: 3px;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.gfeature p {
  color: var(--on-dark-soft);
  font-size: .95rem;
  margin-bottom: 1.6rem;
}

.gfeature .btn {
  width: 100%;
}

.rev-col {
  overflow: hidden;
  height: min(72vh, 600px);
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}

.rev-col__track {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: vscroll 34s linear infinite;
}

.rev-col--b .rev-col__track {
  animation-duration: 44s;
}

.rev-col:hover .rev-col__track {
  animation-play-state: paused;
}

@keyframes vscroll {
  to {
    transform: translateY(-50%);
  }
}

.grev {
  background: #fff;
  border-radius: var(--r);
  padding: 1.35rem 1.45rem;
  box-shadow: var(--sh);
}

.grev__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .7rem;
}

.grev__ava {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.grev__who b {
  font-family: var(--util);
  font-size: .9rem;
  color: var(--navy);
  display: block;
  line-height: 1.2;
}

.grev__who small {
  color: var(--ink-soft);
  font-size: .72rem;
}

.grev__g {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(#4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0);
  flex-shrink: 0;
}

.grev__g span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  font-family: var(--util);
  font-weight: 700;
  font-size: .62rem;
  color: #4285F4;
}

.grev__stars {
  color: #FBBC05;
  letter-spacing: 1px;
  font-size: .9rem;
  margin-bottom: .55rem;
}

.grev__stars em {
  color: var(--ink-soft);
  font-style: normal;
  font-family: var(--util);
  font-size: .72rem;
  margin-left: .45rem;
}

.grev p {
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.6;
}

.grev__posted {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--linen);
  color: var(--ink-soft);
  font-family: var(--util);
  font-size: .74rem;
}

.grev__posted .ck {
  width: 16px;
  height: 16px;
  color: #34A853;
}

/* INSTAGRAM — reels feel */
.ig-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}

.ig-ava {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 210deg, var(--gold), var(--blush), var(--sky), var(--green-2), var(--gold));
}

.ig-ava div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--green);
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.4rem;
  border: 2px solid var(--linen);
}

.ig-meta {
  text-align: left;
}

.ig-meta b {
  font-family: var(--util);
  font-size: 1.05rem;
  color: var(--navy);
}

.ig-meta small {
  display: block;
  color: var(--ink-soft);
  font-size: .8rem;
}

.reels-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .7rem;
}

.reel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9/16;
  border-radius: var(--r);
  display: block;
  box-shadow: var(--sh-sm);
}

.reel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out);
}

.reel:hover img {
  transform: scale(1.09);
}

.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 50, 37, .15) 0%, transparent 30%, transparent 55%, rgba(11, 50, 37, .78) 100%);
}

.reel__play {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(12, 53, 39, .55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.reel__play svg {
  width: 15px;
  height: 15px;
}

.reel__meta {
  position: absolute;
  left: .7rem;
  bottom: .7rem;
  z-index: 2;
  color: #fff;
  font-family: var(--util);
  font-size: .72rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}

.reel__meta i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: .28rem;
}

.reel__meta svg {
  width: 14px;
  height: 14px;
}

.reel__tag {
  position: absolute;
  left: .7rem;
  top: .6rem;
  z-index: 2;
  font-family: var(--util);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(11, 50, 37, .5);
  backdrop-filter: blur(4px);
  padding: .25rem .5rem;
  border-radius: 100px;
}

.ig-cta {
  display: flex;
  gap: .8rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* NEWSLETTER */
.news-card {
  border-radius: calc(var(--r)*1.4);
  padding: clamp(2.2rem, 4vw, 3.4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2), var(--green) 45%, var(--green-deep));
  box-shadow: var(--sh-lg);
}

.news-card::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  top: -120px;
  right: -70px;
  background: radial-gradient(closest-side, rgba(235, 214, 162, .28), transparent);
}

.news-card .off {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  color: var(--gold-2);
}

.news-card h2 {
  color: var(--ivory);
  margin: .35rem 0 .6rem;
}

.news-card p {
  color: var(--on-dark-soft);
  max-width: 46ch;
  margin: 0 auto 1.7rem;
}

.news-card form {
  display: flex;
  gap: .7rem;
  max-width: 520px;
  margin-inline: auto;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.news-card input {
  flex: 1;
  min-width: 230px;
  background: rgba(243, 238, 227, .12);
  border: 1px solid rgba(235, 214, 162, .3);
  color: var(--ivory);
  padding: 1rem 1.25rem;
  border-radius: 100px;
}

.news-card input::placeholder {
  color: var(--on-dark-soft);
}

.news-card input:focus {
  outline: none;
  border-color: var(--gold-2);
}

.news-card small {
  display: block;
  margin-top: .9rem;
  color: var(--on-dark-soft);
  font-size: .76rem;
}

/* FAQ (sticky image left) */
.faq-split {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.faq-media {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  aspect-ratio: 4/5;
  position: relative;
}

.faq-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faq-media__tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  right: 1rem;
  background: rgba(252, 251, 247, .95);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  box-shadow: var(--sh);
}

.faq-media__tag b {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--navy);
  display: block;
}

.faq-media__tag small {
  color: var(--ink-soft);
  font-size: .82rem;
}

.faq {
  margin-bottom: .7rem;
  border: 1px solid var(--linen);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #fff;
  transition: border-color .3s, box-shadow .3s;
}

.faq[open] {
  border-color: var(--gold);
  box-shadow: var(--sh-sm);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.1rem 1.3rem;
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--navy);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq__ic {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--linen);
  position: relative;
  transition: .4s var(--ease);
}

.faq[open] .faq__ic {
  background: linear-gradient(120deg, var(--green), var(--green-2));
  transform: rotate(135deg);
}

.faq__ic::before,
.faq__ic::after {
  content: "";
  position: absolute;
  background: var(--gold-deep);
  border-radius: 2px;
}

.faq[open] .faq__ic::before,
.faq[open] .faq__ic::after {
  background: var(--ivory);
}

.faq__ic::before {
  width: 12px;
  height: 2px;
}

.faq__ic::after {
  width: 2px;
  height: 12px;
}

.faq p {
  padding: 0 1.3rem 1.2rem;
  color: var(--ink-soft);
  font-size: .94rem;
}

.faq-help {
  margin-top: 1.4rem;
  display: flex;
  gap: .7rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 1.1rem 1.3rem;
  background: var(--green-soft);
  border-radius: var(--r-sm);
}

.faq-help b {
  color: var(--navy);
  font-family: var(--util);
  font-size: .9rem;
}

.faq-help span {
  color: var(--ink-soft);
  font-size: .86rem;
}

/* FOOTER */
.footer {
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  color: var(--on-dark-soft);
  position: relative;
}

.footer.pattern::after {
  opacity: .35;
}

.footer .wrap {
  position: relative;
  z-index: 1;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.2rem;
  padding-block: clamp(2.8rem, 5vw, 4.2rem);
  padding-bottom: 30px;
}

.footer-brand .brand-logo {
  margin-bottom: 1.1rem;
}

.footer-brand p {
  font-size: .9rem;
  max-width: 32ch;
  margin-bottom: 1.3rem;
}

.footer-social {
  display: flex;
  gap: .55rem;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(235, 214, 162, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark-soft);
  transition: .3s var(--ease);
}

.footer-social a:hover {
  background: var(--gold);
  color: #3a2c08;
  border-color: var(--gold);
  transform: translateY(-3px);
}

.footer-social svg {
  width: 17px;
  height: 17px;
}

.footer-col h4 {
  font-family: var(--util, "Jost", sans-serif) !important;
  font-size: .68rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--gold-2, #EBD6A2) !important;
  margin-bottom: 1rem !important;
}

.footer-col li {
  margin-bottom: .62rem;
}

.footer-col a {
  font-size: .9rem;
}

.footer-col a:hover {
  color: var(--ivory);
}

.footer-pay {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 15px 0;
  border-top: 1px solid rgba(235, 214, 162, .18);
  border-bottom: 1px solid rgba(235, 214, 162, .18);
}

.pillrow {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  align-items: center;
}

.pillrow .lbl {
  font-family: var(--util);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-right: .3rem;
}

.pill {
  border: 1px solid rgba(235, 214, 162, .2);
  border-radius: 6px;
  padding: .32rem .55rem;
  font-family: var(--util);
  font-size: .6rem;
  color: var(--on-dark);
  background: rgba(243, 238, 227, .05);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.4rem;
  font-size: .78rem;
}

.footer-legal {
  display: flex;
  gap: 1.3rem;
  flex-wrap: wrap;
}

.footer-bottom a:hover {
  color: var(--ivory);
}

/* REVEAL / HELPERS */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--green);
  color: var(--ivory);
  padding: .7rem 1rem;
  z-index: 200;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* OVERLAYS */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 50, 37, .5);
  backdrop-filter: blur(3px);
  z-index: 80;
  opacity: 0;
  transition: opacity .4s;
}

.overlay.is-shown {
  opacity: 1;
}

.mobile-menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(86vw, 380px);
  background: linear-gradient(180deg, var(--green), var(--green-deep));
  color: var(--on-dark);
  z-index: 90;
  transform: translateX(-100%);
  transition: transform .5s var(--ease);
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.6rem;
  overflow-y: auto;
}

.mobile-menu.is-open {
  transform: none;
}

.mm-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.6rem;
}

.mobile-nav a {
  display: block;
  font-family: var(--serif);
  font-size: 1.55rem;
  color: var(--ivory);
  padding: .65rem 0;
  border-bottom: 1px solid rgba(235, 214, 162, .15);
}

.mm-foot {
  margin-top: auto;
  padding-top: 1.4rem;
}

.search-overlay {
  position: fixed;
  inset: 0;
  background: var(--ivory);
  z-index: 95;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
  display: flex;
  flex-direction: column;
  padding: 1.5rem var(--gutter);
}

.search-overlay.is-open {
  transform: none;
}

.search-overlay__mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
  margin-inline: auto;
  width: 100%;
}

.search-overlay input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--linen);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--navy);
  padding: 1rem 0;
}

.search-overlay input:focus {
  outline: none;
  border-color: var(--gold);
}

.search-suggest {
  margin-top: 1.6rem;
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  align-items: center;
}

.search-suggest span {
  font-family: var(--util);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.search-suggest a {
  font-size: .86rem;
  color: var(--green);
  border: 1px solid var(--linen);
  padding: .4rem .9rem;
  border-radius: 100px;
}

.search-suggest a:hover {
  background: var(--green);
  color: var(--ivory);
}

.cart-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(92vw, 420px);
  background: var(--ivory);
  z-index: 90;
  transform: translateX(100%);
  transition: transform .5s var(--ease);
  display: flex;
  flex-direction: column;
}

.cart-drawer.is-open {
  transform: none;
}

.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3rem 1.5rem;
  background: var(--green);
  color: var(--ivory);
}

.cart-head h3 {
  color: var(--ivory);
  font-size: 1.35rem;
}

.cart-head .iconbtn {
  color: var(--ivory);
}

.cart-head .iconbtn:hover {
  background: rgba(243, 238, 227, .15);
  color: var(--ivory);
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem 1.5rem;
}

.cart-item {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linen);
  position: relative;
}

.cart-item img {
  width: 66px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.cart-item h4 {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--navy);
}

.cart-item small {
  color: var(--ink-soft);
  font-size: .76rem;
}

.cart-item .pr {
  font-weight: 600;
  margin-top: .3rem;
  color: var(--navy);
}

.cart-x {
  position: absolute;
  top: 1rem;
  right: 0;
  color: var(--ink-soft);
  font-size: 1.1rem;
}

.cart-foot {
  padding: 1.2rem 1.5rem;
  border-top: 1px solid var(--linen);
  background: var(--linen-soft);
}

.cart-note {
  text-align: center;
  font-family: var(--util);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .9rem;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .9rem;
}

.cart-total span {
  font-family: var(--util);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cart-total strong {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--navy);
}

.cart-foot .btn {
  margin-bottom: .55rem;
}

.quickview {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s;
}

.quickview.is-open {
  opacity: 1;
  visibility: visible;
}

.qv-panel {
  position: relative;
  background: var(--ivory);
  width: min(860px, 100%);
  max-height: 90vh;
  border-radius: var(--r);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: translateY(16px);
  transition: transform .5s var(--ease);
  box-shadow: var(--sh-lg);
}

.quickview.is-open .qv-panel {
  transform: none;
}

.qv-media {
  background: var(--blush-soft);
}

.qv-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
}

.qv-body {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.qv-body h3 {
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  margin: .4rem 0;
}

.qv-price {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--gold-deep);
  margin-bottom: .9rem;
}

.qv-body p {
  color: var(--ink-soft);
  font-size: .92rem;
  margin-bottom: 1.3rem;
}

.qv-sizes {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.3rem;
  flex-wrap: wrap;
}

.qv-sizes button {
  min-width: 50px;
  padding: .52rem;
  border: 1px solid var(--linen);
  border-radius: 8px;
  font-family: var(--util);
  font-size: .72rem;
  transition: .3s;
}

.qv-sizes button.is-active,
.qv-sizes button:hover {
  background: var(--green);
  color: var(--ivory);
  border-color: var(--green);
}

.qv-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-sm);
}

.toast {
  position: fixed;
  bottom: 1.6rem;
  left: 50%;
  transform: translate(-50%, 20px);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--green);
  color: var(--ivory);
  padding: .95rem 1.45rem;
  border-radius: 100px;
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transition: .4s var(--ease);
}

.toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.toast svg {
  width: 18px;
  height: 18px;
  color: var(--gold-2);
}

.toast span {
  font-family: var(--util);
  font-size: .76rem;
  letter-spacing: .05em;
}

.to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 70;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: var(--gold-2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .4s var(--ease);
  box-shadow: var(--sh-lg);
}

.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--gold);
  color: var(--green-deep);
}

.to-top svg {
  width: 20px;
  height: 20px;
}

/* =======================================================================
   PRELOADER — ivory silk welcome with hand-drawn mandala art
   ======================================================================= */
body.is-loading {
  overflow: hidden;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #FEFBF3 0%, #FBF3E1 62%, #F7EBD2 100%);
  transition: transform 1s cubic-bezier(.76, 0, .24, 1), visibility 0s linear 1s;
}

.preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46% 42% at 50% 44%, rgba(233, 168, 59, .16), transparent 74%);
}

.preloader.is-done {
  transform: translateY(-101%);
  visibility: hidden;
}

.pre__hem {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 16px;
  background: radial-gradient(circle at 50% -3px, transparent 10px, var(--gold-deep) 10.5px, var(--gold) 12px, transparent 13px);
  background-size: 28px 16px;
  background-repeat: repeat-x;
  opacity: .8;
}

.pre__mandala {
  position: absolute;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}

.pre__mandala svg {
  display: none;
}

.pre__mandala--a {
  top: -14vmin;
  right: -12vmin;
  width: 60vmin;
  height: 44vmin;
  background-image: url("../images/bg-mandala-peach.png");
  opacity: .55;
  -webkit-mask-image: radial-gradient(70% 70% at 62% 34%, #000 30%, transparent 76%);
  mask-image: radial-gradient(70% 70% at 62% 34%, #000 30%, transparent 76%);
}

.pre__mandala--b {
  bottom: -14vmin;
  left: -12vmin;
  width: 56vmin;
  height: 42vmin;
  background-image: url("../images/bg-mandala-gold.png");
  opacity: .6;
  -webkit-mask-image: radial-gradient(72% 72% at 34% 66%, #000 28%, transparent 76%);
  mask-image: radial-gradient(72% 72% at 34% 66%, #000 28%, transparent 76%);
}

.pre__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.4rem;
}

.pre__ring {
  position: relative;
  width: 152px;
  height: 152px;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: scale(.82);
  animation: preIn .9s var(--ease-out) .15s forwards;
}

.pre__ring::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(169, 116, 27, .35);
  animation: preSpin 26s linear infinite;
}

@keyframes preSpin {
  to {
    transform: rotate(360deg);
  }
}

.pre__ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.pre__ring-track {
  stroke: rgba(169, 116, 27, .18);
}

.pre__ring-draw {
  stroke: var(--gold-deep);
  stroke-dasharray: 346;
  stroke-dashoffset: 346;
  animation: ringDraw 1.9s var(--ease-out) .35s forwards;
}

@keyframes ringDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.pre__ring img {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: cover;
  border-radius: 50%;
  background: var(--green-logo);
  box-shadow: 0 14px 30px -16px rgba(8, 44, 32, .55), 0 0 0 3px #FFF, 0 0 0 4px rgba(169, 116, 27, .35);
}

.pre__word {
  height: 44px;
  width: auto;
  opacity: 0;
  transform: translateY(14px);
  animation: preIn .9s var(--ease-out) .55s forwards;
  filter: drop-shadow(0 1px 1px rgba(120, 80, 10, .28));
}

.pre__tag {
  margin-top: .95rem;
  font-family: var(--util);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0;
  animation: tagIn 1.1s var(--ease-out) .85s forwards;
}

@keyframes preIn {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tagIn {
  from {
    opacity: 0;
    letter-spacing: .6em;
  }

  to {
    opacity: .85;
    letter-spacing: .34em;
  }
}

.pre__bar {
  margin-top: 1.5rem;
  width: min(200px, 52vw);
  height: 2px;
  border-radius: 2px;
  background: rgba(169, 116, 27, .18);
  overflow: hidden;
  opacity: 0;
  animation: preIn .6s var(--ease-out) .7s forwards;
}

.pre__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  animation: barFill 1.7s var(--ease) .6s forwards;
}

@keyframes barFill {
  to {
    width: 100%;
  }
}

.preloader.is-quick .pre__ring,
.preloader.is-quick .pre__word,
.preloader.is-quick .pre__tag,
.preloader.is-quick .pre__bar {
  animation-delay: 0s;
  animation-duration: .4s;
}

.preloader.is-quick .pre__ring-draw,
.preloader.is-quick .pre__bar i {
  animation-delay: .05s;
  animation-duration: .5s;
}

@media (prefers-reduced-motion:reduce) {
  .preloader {
    display: none;
  }

  body.is-loading {
    overflow: auto;
  }
}

/* Extra button: filled marigold with soft outline (hero "Shop boys") */
.btn--goldfill {
  background: #fff;
  border-color: var(--gold);
  color: var(--gold-deep);
  box-shadow: 0 12px 24px -16px rgba(169, 116, 27, .65);
}

.btn--goldfill:hover {
  background: linear-gradient(96deg, var(--gold-deep), var(--gold) 55%, var(--gold-2));
  border-color: transparent;
  color: #3A2A05;
  transform: translateY(-3px);
  box-shadow: 0 20px 34px -16px rgba(169, 116, 27, .8);
}

/* Section watermarks from provided Indian artwork (kept quiet) */
#story {
  position: relative;
}

#story::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 56%;
  pointer-events: none;
  opacity: .24;
  background: url("../images/bg-folk-art.png") top/cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}

#story>.wrap {
  position: relative;
  z-index: 1;
}



#join {
  position: relative;
  overflow: hidden;
}

/* #join::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 46%;
  aspect-ratio: 16/9;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: soft-light;
  background: url("../images/bg-mandala-peach.png") center/cover no-repeat;
} */

/* Card & chrome polish */
.product,
.slide-card,
.pstep,
.grev,
.statbox {
  border-radius: var(--r);
}

.mega {
  border-radius: 0 0 22px 22px;
  overflow: hidden;
}

.head-c h2 .greentext {
  color: var(--green);
}

.festive {
  position: relative;
  overflow: hidden;
}

/* =======================================================================
   INDIAN ARTWORK GROUNDS — the provided mandala & folk art, used quietly
   across the page so every section sits on the same crafted canvas.
   ======================================================================= */

#new::before {
  content: "";
  position: absolute;
  bottom: -6%;
  left: -7%;
  width: 38%;
  aspect-ratio: 16/9;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background: url("../images/bg-mandala-gold.png") left center/cover no-repeat;
  -webkit-mask-image: radial-gradient(74% 74% at 34% 64%, #000 26%, transparent 76%);
  mask-image: radial-gradient(74% 74% at 34% 64%, #000 26%, transparent 76%);
}

#reviews::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28%;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  filter: saturate(1.7) contrast(1.08);
  background: url("../images/bg-mandala-portrait-flip.png") right top/100% auto repeat-y;
  -webkit-mask-image: linear-gradient(270deg, #000 20%, transparent 92%);
  mask-image: linear-gradient(270deg, #000 20%, transparent 92%);
}

#faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 28%;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  filter: saturate(1.7) contrast(1.08);
  background: url("../images/bg-mandala-portrait.png") left top/100% auto repeat-y;
  -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 92%);
  mask-image: linear-gradient(90deg, #000 20%, transparent 92%);
}

/* .footer::before {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -8%;
  width: 38%;
  aspect-ratio: 16/9;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: soft-light;
  background: url("../images/bg-mandala-peach.png") center/cover no-repeat;
} */

#categories>.wrap,
#products>.wrap,
#new>.wrap,
#reviews>.wrap,
#faq>.wrap {
  position: relative;
  z-index: 1;
}

#new .slider {
  position: relative;
  z-index: 1;
}

/* =======================================================================
   DIRA — WOOCOMMERCE STYLE INTEGRATION & OVERRIDES
   ======================================================================= */

/* General WooCommerce Typography & Accents */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.woocommerce-page h4 {
  font-family: var(--serif);
  color: var(--navy);
}

.woocommerce .price,
.woocommerce-page .price,
.woocommerce .amount,
.woocommerce-page .amount {
  font-family: var(--serif);
  color: var(--gold-deep);
  font-weight: 600;
}

/* Sale Badge */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
  background: var(--gold);
  color: #3a2c08;
  font-family: var(--util);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  min-height: auto;
  min-width: auto;
  line-height: 1;
  top: 1rem;
  left: 1rem;
}

/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
  font-family: var(--util);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

.woocommerce .woocommerce-breadcrumb a,
.woocommerce-page .woocommerce-breadcrumb a {
  color: var(--green);
  transition: color 0.3s;
}

.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce-page .woocommerce-breadcrumb a:hover {
  color: var(--gold-deep);
}

/* Shop Sorting & Result Count */
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
  margin-bottom: 2rem;
}

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  border: 1.5px solid var(--linen);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-family: var(--util);
  font-size: 0.8rem;
  color: var(--ink);
  background: #fff;
}

.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  font-family: var(--util);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.6rem;
}

/* Product Grid (Archive & Shop) */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.8rem !important;
  list-style: none;
  padding: 0;
  margin: 2rem 0 !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
}

@media (max-width: 992px) {

  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {

  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

/* Custom WooCommerce Loop Product Cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--linen) !important;
  box-shadow: var(--sh-sm);
  display: flex !important;
  flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
}

/* Tint coloring for the archive lists to match homepage cards */
.woocommerce ul.products li.product:nth-child(4n+1) {
  background: #FBF3EF !important;
}

.woocommerce ul.products li.product:nth-child(4n+2) {
  background: #F1F6FB !important;
}

.woocommerce ul.products li.product:nth-child(4n+3) {
  background: #EDF5F0 !important;
}

.woocommerce ul.products li.product:nth-child(4n) {
  background: #FAF3E3 !important;
}

/* Image Container */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
  width: 100% !important;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 50% 10%;
  margin: 0 !important;
  transition: transform 1s var(--ease-out);
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.04);
}

/* Product Info */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--serif) !important;
  font-size: 1.3rem !important;
  line-height: 1.1 !important;
  color: var(--navy) !important;
  margin: 1rem 1.1rem 0.3rem !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  margin: 0 1.1rem 1rem !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
}

/* Buttons in Loop */
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button {
  margin: 0 1.1rem 1.25rem !important;
  font-family: var(--util) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 1rem !important;
  text-align: center;
  background: var(--green) !important;
  color: var(--ivory) !important;
  border-radius: 100px !important;
  transition: background 0.3s, transform 0.3s;
  display: block;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce-page ul.products li.product a.button:hover {
  background: var(--green-deep) !important;
  transform: translateY(-2px);
}

/* Single Product Details */
.woocommerce div.product,
.woocommerce-page div.product {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3.5rem !important;
  margin-top: 2rem;
}

@media (max-width: 768px) {

  .woocommerce div.product,
  .woocommerce-page div.product {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce-page div.product .related,
.woocommerce div.product .upsells,
.woocommerce-page div.product .upsells {
  grid-column: 1 / -1 !important;
}

.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.woocommerce div.product div.images img,
.woocommerce-page div.product div.images img {
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}

.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

.woocommerce div.product .product_title,
.woocommerce-page div.product .product_title {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  color: var(--navy);
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.woocommerce div.product .price,
.woocommerce-page div.product .price {
  font-family: var(--serif) !important;
  font-size: 1.8rem !important;
  color: var(--gold-deep) !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-product-details__short-description {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Add to Cart Form details */
.woocommerce div.product form.cart,
.woocommerce-page div.product form.cart {
  display: flex !important;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2.2rem;
  flex-wrap: wrap;
}

/* Attributes / Variation dropdowns */
.woocommerce div.product td.label,
.woocommerce-page div.product td.label {
  font-family: var(--util);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  padding-bottom: 0.8rem;
}

.woocommerce div.product td.value,
.woocommerce-page div.product td.value {
  padding-bottom: 0.8rem;
}

.woocommerce div.product select,
.woocommerce-page div.product select {
  border: 1.5px solid var(--linen);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  background: #fff;
  font-family: var(--util);
  color: var(--ink);
  width: 100%;
  max-width: 300px;
}

.woocommerce div.product select:focus,
.woocommerce-page div.product select:focus {
  outline: none;
  border-color: var(--gold);
}

/* Quantity selector */
.woocommerce .quantity .qty,
.woocommerce-page .quantity .qty {
  width: 65px;
  height: 48px;
  border: 1.5px solid var(--linen);
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  font-family: var(--util);
  font-size: 0.95rem;
}

/* Main single add to cart button */
.woocommerce div.product button.single_add_to_cart_button,
.woocommerce-page div.product button.single_add_to_cart_button {
  height: 48px;
  padding: 0 2.2rem !important;
  background: linear-gradient(120deg, var(--green), var(--green-2)) !important;
  color: var(--ivory) !important;
  font-family: var(--util) !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  border-radius: 100px !important;
  box-shadow: 0 12px 24px -14px rgba(11, 50, 37, .85) !important;
  transition: all 0.3s !important;
}

.woocommerce div.product button.single_add_to_cart_button:hover,
.woocommerce-page div.product button.single_add_to_cart_button:hover {
  background: var(--green-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -16px rgba(11, 50, 37, .95) !important;
}

/* Product Meta (SKU / Categories) */
.product_meta {
  font-family: var(--util);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border-top: 1px solid var(--linen);
  padding-top: 1.2rem;
  margin-top: 1.5rem;
}

.product_meta span {
  display: block;
  margin-bottom: 0.4rem;
}

.product_meta a {
  color: var(--green);
  transition: color 0.3s;
}

.product_meta a:hover {
  color: var(--gold-deep);
}

/* Product Tabs */
.woocommerce-tabs {
  margin-block: 4rem 2rem;
  border-top: 1px solid var(--linen);
  padding-top: 3rem;
}

.woocommerce-tabs ul.tabs {
  display: flex !important;
  border-bottom: 1.5px solid var(--linen) !important;
  padding-bottom: 0 !important;
  list-style: none !important;
  margin: 0 0 2rem 0 !important;
  gap: 2.5rem;
}

.woocommerce-tabs ul.tabs::before {
  display: none !important;
}

.woocommerce-tabs ul.tabs li {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0.8rem 0 !important;
  font-family: var(--util) !important;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-soft) !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.3s;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

.woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li:hover {
  color: var(--green) !important;
  border-bottom-color: var(--green) !important;
}

.woocommerce-Tabs-panel {
  color: var(--ink-2);
  line-height: 1.7;
  font-size: 0.96rem;
}

.woocommerce-Tabs-panel h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* Cart Page */
.woocommerce-cart-form {
  background: #fff;
  border-radius: var(--r);
  padding: 2.2rem;
  border: 1px solid var(--linen);
  box-shadow: var(--sh-sm);
}

@media (max-width: 768px) {
  .woocommerce-cart-form {
    padding: 1rem;
    overflow-x: auto;
  }
}

table.shop_table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

table.shop_table th {
  padding: 1rem !important;
  border-bottom: 1.5px solid var(--linen);
  font-family: var(--util);
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
}

table.shop_table td {
  padding: 1.5rem 1rem !important;
  border-bottom: 1px solid var(--linen-soft);
  vertical-align: middle;
}

table.shop_table td.product-thumbnail img {
  width: 70px;
  height: auto;
  border-radius: var(--r-sm);
  object-fit: cover;
}

table.shop_table td.product-name a {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--navy);
  font-weight: 600;
  transition: color 0.3s;
}

table.shop_table td.product-name a:hover {
  color: var(--green);
}

table.shop_table td.product-remove a.remove {
  font-size: 1.5rem !important;
  color: var(--ink-soft) !important;
  background: none !important;
  height: auto !important;
  width: auto !important;
  line-height: 1 !important;
}

table.shop_table td.product-remove a.remove:hover {
  color: var(--blush) !important;
}

/* Coupon & Action buttons */
table.shop_table td.actions {
  padding: 1.5rem 1rem !important;
  text-align: right;
}

table.shop_table td.actions .coupon {
  display: inline-flex;
  gap: 0.5rem;
  float: left;
}

@media (max-width: 768px) {
  table.shop_table td.actions .coupon {
    float: none;
    margin-bottom: 1rem;
    display: flex;
  }
}

table.shop_table td.actions input.input-text {
  border: 1.5px solid var(--linen);
  border-radius: 100px;
  padding: 0.6rem 1.25rem;
  font-family: var(--util);
  font-size: 0.8rem;
  width: 180px;
}

table.shop_table td.actions input.input-text:focus {
  outline: none;
  border-color: var(--gold);
}

table.shop_table td.actions .button,
.woocommerce-cart-form button[name="update_cart"] {
  padding: 0.75rem 1.5rem !important;
  font-family: var(--util) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 0.72rem !important;
  border-radius: 100px !important;
  background: var(--linen-soft) !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--linen) !important;
  transition: all 0.3s !important;
  cursor: pointer;
}

table.shop_table td.actions .button:hover,
.woocommerce-cart-form button[name="update_cart"]:hover {
  background: var(--green) !important;
  color: var(--ivory) !important;
  border-color: var(--green) !important;
}

/* Cart Collaterals */
.cart-collaterals {
  margin-top: 3.5rem;
  display: flex;
  justify-content: flex-end;
}

.cart-collaterals::before,
.cart-collaterals::after {
  display: none !important;
}

.cart_totals {
  width: 460px;
  max-width: 100%;
  background: var(--linen-soft);
  border-radius: var(--r);
  padding: 2.2rem;
  border: 1px solid var(--linen);
  box-shadow: var(--sh-sm);
}

.cart_totals h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--navy);
  margin-bottom: 1.5rem;
  border-bottom: 1.5px solid var(--linen);
  padding-bottom: 0.8rem;
}

.cart_totals table.shop_table_split {
  width: 100%;
  margin-bottom: 1.5rem;
}

.cart_totals table.shop_table_split th,
.cart_totals table.shop_table_split td {
  padding: 0.8rem 0 !important;
  background: none !important;
  border-bottom: 1px solid rgba(22, 35, 63, 0.08) !important;
}

.cart_totals table.shop_table_split tr.order-total th,
.cart_totals table.shop_table_split tr.order-total td {
  border-bottom: none !important;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
}

.wc-proceed-to-checkout a.checkout-button {
  display: block;
  text-align: center;
  padding: 1rem 2rem !important;
  background: linear-gradient(120deg, var(--green), var(--green-2)) !important;
  color: var(--ivory) !important;
  font-family: var(--util) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 0.78rem !important;
  border-radius: 100px !important;
  box-shadow: 0 12px 24px -14px rgba(11, 50, 37, .85) !important;
  transition: all 0.3s !important;
}

.wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--green-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -16px rgba(11, 50, 37, .95) !important;
}

/* Checkout Page */
.woocommerce-checkout {
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 3.5rem !important;
  margin-top: 2rem;
}

.woocommerce-checkout::before,
.woocommerce-checkout::after {
  display: none !important;
}

@media (max-width: 992px) {
  .woocommerce-checkout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

#customer_details {
  background: #fff;
  border-radius: var(--r);
  padding: 2.5rem;
  border: 1px solid var(--linen);
  box-shadow: var(--sh-sm);
  display: block !important;
  width: 100% !important;
  float: none !important;
}

#customer_details::before,
#customer_details::after {
  display: none !important;
}

#customer_details .col-1,
#customer_details .col-2 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin-bottom: 2rem;
}

#customer_details .col-2 {
  margin-bottom: 0;
}

/* Checkout inputs & styling */
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  width: 100%;
  border: 1.5px solid var(--linen);
  border-radius: 8px;
  padding: 0.75rem 1.1rem;
  background: #fff;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink);
  transition: border-color 0.3s;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  outline: none;
  border-color: var(--gold);
}

.woocommerce-checkout label {
  display: block;
  font-family: var(--util);
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.4rem;
  letter-spacing: 0.05em;
}

#order_review_heading {
  background: var(--linen-soft);
  border-radius: var(--r) var(--r) 0 0;
  border: 1px solid var(--linen);
  border-bottom: none;
  padding: 2.2rem 2.2rem 0;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
}

#order_review {
  background: var(--linen-soft);
  border-radius: 0 0 var(--r) var(--r);
  border: 1px solid var(--linen);
  border-top: none;
  padding: 1rem 2.2rem 2.2rem;
  width: 100% !important;
  float: none !important;
}

/* Order review items */
#order_review table.shop_table {
  background: none;
}

#order_review table.shop_table th,
#order_review table.shop_table td {
  padding: 0.8rem 0 !important;
  border-bottom: 1px solid rgba(22, 35, 63, 0.08) !important;
}

#order_review table.shop_table tr.order-total th,
#order_review table.shop_table tr.order-total td {
  border-bottom: none !important;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
}

/* Payment Gateways Panel */
#payment {
  background: none !important;
  padding: 0 !important;
  margin-top: 1.5rem;
}

#payment ul.payment_methods {
  list-style: none;
  padding: 0 0 1.5rem 0 !important;
  margin: 0 0 1.5rem 0 !important;
  border-bottom: 1px solid rgba(22, 35, 63, 0.1) !important;
}

#payment ul.payment_methods li {
  margin-bottom: 1rem;
}

#payment ul.payment_methods li input {
  margin-right: 0.6rem;
}

#payment ul.payment_methods li label {
  display: inline-block;
  font-family: var(--util);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
}

#payment div.payment_box {
  background: var(--linen) !important;
  border-radius: 8px;
  padding: 1rem !important;
  color: var(--ink-2);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0.5rem 0 1.5rem 0 !important;
}

#payment div.payment_box::before {
  display: none !important;
}

/* Place Order Button */
#payment #place_order {
  width: 100% !important;
  padding: 1rem 2rem !important;
  background: linear-gradient(96deg, var(--gold-deep), var(--gold) 55%, var(--gold-2)) !important;
  color: #3a2c08 !important;
  font-family: var(--util) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  border-radius: 100px !important;
  box-shadow: 0 12px 24px -14px rgba(168, 126, 51, .7) !important;
  transition: all 0.3s !important;
}

#payment #place_order:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px rgba(168, 126, 51, .9) !important;
}

/* My Account Page */
.woocommerce-account .woocommerce {
  display: grid !important;
  gap: 3rem !important;
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
  display: none !important;
}

@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

.woocommerce-MyAccount-navigation {
  background: #fff;
  border-radius: var(--r);
  padding: 1.5rem;
  border: 1px solid var(--linen);
  box-shadow: var(--sh-sm);
  width: 100% !important;
  float: none !important;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--linen-soft);
}

.woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.8rem 1rem;
  font-family: var(--util);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink-soft);
  transition: all 0.3s;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  color: var(--green);
  background: var(--green-soft);
  border-radius: 8px;
}

.woocommerce-MyAccount-content {
  background: #fff;
  border-radius: var(--r);
  padding: 2.5rem;
  border: 1px solid var(--linen);
  box-shadow: var(--sh-sm);
  width: 100% !important;
  float: none !important;
}

.woocommerce-MyAccount-content h3 {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}

.woocommerce-MyAccount-content p {
  margin-bottom: 1rem;
}

.woocommerce-MyAccount-content a {
  color: var(--green);
  text-decoration: underline;
}

.woocommerce-MyAccount-content a:hover {
  color: var(--gold-deep);
}

/* Form inputs inside account page */
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content textarea,
.woocommerce-MyAccount-content select {
  width: 100%;
  border: 1.5px solid var(--linen);
  border-radius: 8px;
  padding: 0.75rem 1.1rem;
  background: #fff;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 1rem;
}

.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content textarea:focus,
.woocommerce-MyAccount-content select:focus {
  outline: none;
  border-color: var(--gold);
}

/* Buttons in forms */
.woocommerce-MyAccount-content button.button {
  padding: 0.8rem 2rem !important;
  background: var(--green) !important;
  color: var(--ivory) !important;
  font-family: var(--util) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  border-radius: 100px !important;
  box-shadow: 0 12px 24px -14px rgba(11, 50, 37, .85) !important;
  transition: all 0.3s;
}

.woocommerce-MyAccount-content button.button:hover {
  background: var(--green-deep) !important;
  transform: translateY(-2px);
}

/* Notices and Messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 1rem 1.5rem !important;
  border-radius: 8px !important;
  font-family: var(--util) !important;
  font-size: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 2rem !important;
  border: none !important;
  border-left: 4px solid !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none !important;
}

.woocommerce-message {
  background: var(--green-soft) !important;
  border-left-color: var(--green) !important;
  color: var(--green-deep) !important;
}

.woocommerce-info {
  background: var(--sky-soft) !important;
  border-left-color: var(--sky) !important;
  color: var(--navy-deep) !important;
}

.woocommerce-error {
  background: var(--blush-soft) !important;
  border-left-color: var(--blush) !important;
  color: #721c24 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.woocommerce-error li {
  margin-left: 1.5rem;
  list-style: disc;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
  padding: 0.5rem 1.25rem !important;
  background: var(--green) !important;
  color: var(--ivory) !important;
  font-size: 0.72rem !important;
  border-radius: 100px !important;
  text-transform: uppercase;
  margin-left: 1.5rem !important;
  float: right;
  transition: all 0.3s;
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
  background: var(--green-deep) !important;
}

/* Shipping calculator & cart forms */
.shipping-calculator-button {
  color: var(--green);
  font-weight: 600;
}

.shipping-calculator-form input.input-text,
.shipping-calculator-form select {
  border: 1.5px solid var(--linen);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  margin-bottom: 0.8rem;
  width: 100%;
}

.shipping-calculator-form button.button {
  padding: 0.5rem 1rem !important;
  font-size: 0.7rem !important;
}

/* Responsive fixes for single product */
@media (max-width: 576px) {

  .woocommerce div.product button.single_add_to_cart_button,
  .woocommerce-page div.product button.single_add_to_cart_button {
    width: 100%;
  }

  .woocommerce div.product form.cart,
  .woocommerce-page div.product form.cart {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Dira Journal Card Hover Styles */
.journal-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(12, 53, 39, 0.08) !important;
}

.journal-card:hover .journal-card__img img {
  transform: scale(1.05);
}

.journal-card__title a:hover {
  color: var(--gold) !important;
}

.btn-text:hover {
  color: var(--green) !important;
}

.wa-float i.bxl-whatsapp {
  font-size: 40px;
}


/* ============================================================
   DIRA — Shop Page Styles  (v2)
   Scope: everything is nested under .woocommerce-container
   so no other page or component is affected.
   Palette / type pulled from the homepage theme:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels/buttons)
   ============================================================ */

.woocommerce-container {
  --dira-green: #0C3527;
  --dira-green-deep: #07231A;
  --dira-forest: #0F4030;
  --dira-gold: #C9A24B;
  --dira-gold-soft: #E3C98A;
  --dira-ivory: #FBF7EF;
  --dira-sand: #F3EBDD;
  --dira-ink: #26251F;
  --dira-muted: #8A8578;
  --dira-line: rgba(12, 53, 39, .10);
  --dira-radius: 12px;
  --dira-shadow: 0 1px 2px rgba(12, 53, 39, .05), 0 6px 20px rgba(12, 53, 39, .07);
  --dira-shadow-lift: 0 2px 4px rgba(12, 53, 39, .06), 0 18px 40px rgba(12, 53, 39, .14);

  background: var(--dira-ivory);
  color: var(--dira-ink);
  font-family: "DM Sans", system-ui, sans-serif;
}

.woocommerce-container .wrap {
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
  padding-top: 0 !important;
}

/* ------------------------------------------------------------
   1. HERO BANNER — "Shop"
   Same width as the site container (stays inside .wrap).
   Layered gradients + fine geometric line-work + soft gold
   "blurred orb" glows give it depth without a flat green fill.
   ------------------------------------------------------------ */

.woocommerce-container .page-title {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(200px, 26vw, 288px);
  margin: clamp(20px, 3vw, 36px) 0 clamp(36px, 5vw, 56px);
  padding: clamp(44px, 7vw, 72px) 24px;
  border-radius: calc(var(--dira-radius) + 6px);

  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  box-shadow: var(--dira-shadow), inset 0 1px 0 rgba(255, 255, 255, .07);

  color: var(--dira-ivory);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: .01em;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

/* gold eyebrow above the title */
.woocommerce-container .page-title::before {
  content: "The Collection";
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-indent: .34em;
  /* optically centers tracked-out text */
  text-transform: uppercase;
  color: var(--dira-gold-soft);
  text-shadow: none;
}

/* thin gold rule + ornament under the title */
.woocommerce-container .page-title::after {
  content: "";
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--dira-gold) 25%, var(--dira-gold) 75%, transparent);
  opacity: .85;
}

/* ------------------------------------------------------------
   2. TOOLBAR — result count + sorting
   ------------------------------------------------------------ */

.woocommerce-container .woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-container .woocommerce-result-count {
  float: left;
  margin: 0 0 28px;
  padding-top: 13px;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dira-muted);
}

.woocommerce-container .woocommerce-ordering {
  float: right;
  margin: 0 0 28px;
}

.woocommerce-container .woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 44px 8px 20px;
  border: 1px solid var(--dira-line);
  border-radius: 8px;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9A24B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 12px 8px,
    #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  color: var(--dira-ink);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(12, 53, 39, .04);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.woocommerce-container .woocommerce-ordering select.orderby:hover {
  border-color: rgba(201, 162, 75, .6);
}

.woocommerce-container .woocommerce-ordering select.orderby:focus-visible {
  outline: none;
  border-color: var(--dira-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .25);
}

/* ------------------------------------------------------------
   3. PRODUCT GRID
   ------------------------------------------------------------ */

.woocommerce-container ul.products {
  clear: both;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
  margin: 0 0 clamp(48px, 7vw, 80px);
  padding: 0;
  list-style: none;
}

.woocommerce-container ul.products::before,
.woocommerce-container ul.products::after {
  content: none;
  /* kill WooCommerce clearfix pseudo-elements */
}

/* ---- card shell -------------------------------------------- */

.woocommerce-container ul.products li.product {
  position: relative;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* clips the image zoom cleanly */

  background: #fff;
  border: 1px solid var(--dira-line);
  border-radius: var(--dira-radius);
  box-shadow: var(--dira-shadow);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1),
    box-shadow .3s ease,
    border-color .3s ease;
}

.woocommerce-container ul.products li.product:hover,
.woocommerce-container ul.products li.product:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--dira-shadow-lift);
  border-color: rgba(201, 162, 75, .40);
}

/* ---- product link block ------------------------------------ */

.woocommerce-container ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* ---- image area: edge-to-edge, consistent ratio ------------ */

.woocommerce-container ul.products li.product img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  margin: 0;
  background: var(--dira-sand);
  border-radius: 0;
  /* card clips the top corners */
  border-bottom: 1px solid var(--dira-line);
  transform: translateZ(0);
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.woocommerce-container ul.products li.product:hover img {
  transform: scale(1.045);
}

/* subtle gradient scrim at the image base for depth */
.woocommerce-container ul.products li.product .woocommerce-loop-product__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, rgba(12, 53, 39, .04) 0%, transparent 18%, transparent 78%, rgba(12, 53, 39, .07) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ---- sale badge -------------------------------------------- */

.woocommerce-container ul.products li.product .onsale {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  background: var(--dira-green);
  color: var(--dira-gold-soft);
  border: 1px solid rgba(227, 201, 138, .35);
  border-radius: 6px;
  font-family: "Jost", sans-serif;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(12, 53, 39, .25);
}

/* ---- card body --------------------------------------------- */

.woocommerce-container ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  padding: 18px 20px 4px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--dira-green);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* keeps every card the same height */
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .25s ease;
}

.woocommerce-container ul.products li.product:hover .woocommerce-loop-product__title {
  color: var(--dira-forest);
}

/* price row — pinned above the button */
.woocommerce-container ul.products li.product .price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: auto 0 0;
  /* pushes price + button to the bottom */
  padding: 8px 20px 16px;
  font-size: .98rem;
  color: var(--dira-ink);
}

.woocommerce-container ul.products li.product .price .amount {
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--dira-ink);
}

.woocommerce-container ul.products li.product .price ins {
  text-decoration: none;
}

.woocommerce-container ul.products li.product .price ins .amount {
  color: var(--dira-green);
}

.woocommerce-container ul.products li.product .price del {
  order: 2;
  /* old price sits after the current price, like premium shops */
  font-size: .85rem;
  opacity: .95;
}

.woocommerce-container ul.products li.product .price del .amount {
  font-weight: 400;
  color: var(--dira-muted);
}

/* ---- add-to-cart button ------------------------------------ */

.woocommerce-container ul.products li.product .add_to_cart_button {
  display: block;
  margin: 0 20px 20px;
  padding: 12px 18px;
  background: transparent;
  color: var(--dira-green);
  border: 1px solid rgba(12, 53, 39, .28);
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.woocommerce-container ul.products li.product .add_to_cart_button:hover {
  background: var(--dira-green);
  border-color: var(--dira-green);
  color: var(--dira-ivory);
  box-shadow: 0 8px 18px rgba(12, 53, 39, .22);
}

.woocommerce-container ul.products li.product .add_to_cart_button:focus-visible {
  outline: none;
  border-color: var(--dira-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .35);
}

/* "added" / loading states injected by WooCommerce AJAX */
.woocommerce-container ul.products li.product .add_to_cart_button.loading {
  opacity: .6;
  pointer-events: none;
}

.woocommerce-container ul.products li.product .add_to_cart_button.added::after {
  content: " ✓";
}

/* the "View cart" link WooCommerce appends after adding */
.woocommerce-container ul.products li.product .added_to_cart {
  display: block;
  margin: -10px 20px 18px;
  text-align: center;
  font-family: "Jost", sans-serif;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dira-gold);
  text-decoration: none;
}

.woocommerce-container ul.products li.product .added_to_cart:hover {
  color: var(--dira-green);
}

/* ------------------------------------------------------------
   4. NOTICES (messages, errors)
   ------------------------------------------------------------ */

.woocommerce-container .woocommerce-message,
.woocommerce-container .woocommerce-info,
.woocommerce-container .woocommerce-error {
  margin: 0 0 28px;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--dira-line);
  border-left: 3px solid var(--dira-gold);
  border-radius: 10px;
  color: var(--dira-ink);
  font-size: .95rem;
  box-shadow: var(--dira-shadow);
}

.woocommerce-container .woocommerce-error {
  border-left-color: #B4443C;
}

/* ------------------------------------------------------------
   5. RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1100px) {
  .woocommerce-container ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 820px) {
  .woocommerce-container ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {

  .woocommerce-container .woocommerce-result-count,
  .woocommerce-container .woocommerce-ordering {
    float: none;
  }

  .woocommerce-container .woocommerce-result-count {
    padding-top: 0;
    margin-bottom: 12px;
    text-align: center;
  }

  .woocommerce-container .woocommerce-ordering {
    display: flex;
    justify-content: center;
    margin-bottom: 26px;
  }

  .woocommerce-container .woocommerce-ordering select.orderby {
    width: 100%;
    max-width: 340px;
  }

  .woocommerce-container ul.products {
    gap: 14px;
  }

  .woocommerce-container ul.products li.product .woocommerce-loop-product__title {
    padding: 14px 14px 2px;
    font-size: .95rem;
  }

  .woocommerce-container ul.products li.product .price {
    padding: 6px 14px 12px;
    font-size: .92rem;
  }

  .woocommerce-container ul.products li.product .add_to_cart_button {
    margin: 0 14px 14px;
    padding: 11px 12px;
    font-size: .72rem;
    letter-spacing: .12em;
  }

  .woocommerce-container ul.products li.product .onsale {
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    font-size: .6rem;
  }
}

@media (max-width: 420px) {
  .woocommerce-container ul.products {
    grid-template-columns: 1fr;
  }

  .woocommerce-container ul.products li.product {
    max-width: 360px;
    margin-inline: auto !important;
    width: 100% !important;
  }
}

/* ------------------------------------------------------------
   6. ACCESSIBILITY / MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .woocommerce-container ul.products li.product,
  .woocommerce-container ul.products li.product img,
  .woocommerce-container ul.products li.product .add_to_cart_button {
    transition: none;
  }

  .woocommerce-container ul.products li.product:hover {
    transform: none;
  }

  .woocommerce-container ul.products li.product:hover img {
    transform: none;
  }
}


.woocommerce-shop .woocommerce-container {
  padding-top: 0;
}


/* ============================================================
   DIRA — PRODUCT DETAILS PAGE (final)
   ------------------------------------------------------------
   All rules are scoped under .single-product — the body class
   WordPress adds only on single product pages — so nothing
   here can affect any other page or component.

   Strategy: the theme's generic ".product" card styles were
   bleeding into WooCommerce's markup and breaking the page.
   This stylesheet takes FULL ownership of the product block:
   it turns div.product into one deliberate white panel and
   rebuilds every element inside it with hard overrides, so
   the result is stable no matter what the theme ships.

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

.single-product .woocommerce-container {
  --g: #0C3527;
  /* deep green   */
  --g-dark: #07231A;
  /* darkest green*/
  --g-soft: #0F4030;
  /* forest       */
  --gold: #C9A24B;
  --gold-soft: #E3C98A;
  --ivory: #FBF7EF;
  --sand: #F3EBDD;
  --ink: #26251F;
  --body-c: #55503F;
  --muted: #8A8578;
  --line: #E7E0D2;
  --r: 12px;
  --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
  --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

  background: var(--ivory);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.single-product .woocommerce-container .wrap {
  max-width: 90%;
  margin-inline: auto;
  padding-block: clamp(28px, 4.5vw, 56px) clamp(48px, 7vw, 88px);
  padding-inline: clamp(16px, 4vw, 32px);
}

.single-product .woocommerce-notices-wrapper:empty {
  display: none;
}

/* ============================================================
   1. THE PRODUCT PANEL
   One clean white panel holds the whole product. This is a
   deliberate design decision AND it overrides the theme's
   tinted ".product" card in a single move.
   ============================================================ */

.single-product div.product {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 0;
  align-items: start;

  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: clamp(24px, 4vw, 56px) !important;
  margin: 0 !important;
  overflow: visible !important;
  text-align: left !important;
  float: none !important;
  width: auto !important;
}

.single-product div.product::before,
.single-product div.product::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   2. SALE BADGE
   ============================================================ */

.single-product div.product>.onsale {
  position: absolute !important;
  z-index: 5;
  top: calc(clamp(24px, 4vw, 56px) + 14px);
  left: calc(clamp(24px, 4vw, 56px) + 14px);
  right: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 7px 13px !important;
  line-height: 1 !important;
  background: var(--g) !important;
  color: var(--gold-soft) !important;
  border: 1px solid rgba(227, 201, 138, .4) !important;
  border-radius: 6px !important;
  font-family: "Jost", sans-serif !important;
  font-size: .66rem !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 14px rgba(12, 53, 39, .3) !important;
}

/* ============================================================
   3. GALLERY  (left column)
   ============================================================ */

.single-product div.product div.images.woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.single-product div.product div.images .woocommerce-product-gallery__wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* main image */
.single-product div.product div.images .woocommerce-product-gallery__image {
  background: var(--sand) !important;
  border: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.single-product div.product div.images .woocommerce-product-gallery__image a {
  display: block;
}

.single-product div.product div.images .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5 / 5;
  object-fit: cover;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--sand);
}

/* extra gallery images stacked by WooCommerce before the JS
   slider boots — keep them tidy if JS is off */
.single-product div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image+.woocommerce-product-gallery__image {
  margin-top: 12px !important;
}

/* thumbnails (created by the gallery script) */
.single-product div.product div.images .flex-control-thumbs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: visible !important;
}

.single-product div.product div.images .flex-control-thumbs li {
  float: none !important;
  width: 72px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

.single-product div.product div.images .flex-control-thumbs li img {
  width: 100% !important;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  cursor: pointer;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  opacity: .45;
  transition: opacity .2s ease, border-color .2s ease;
}

.single-product div.product div.images .flex-control-thumbs li img:hover {
  opacity: .85;
}

.single-product div.product div.images .flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: var(--gold) !important;
}

/* zoom / fullscreen trigger */
.single-product div.product div.images .woocommerce-product-gallery__trigger {
  top: 14px !important;
  right: 14px !important;
  z-index: 6;
  width: 40px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, .95) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(12, 53, 39, .16) !important;
  transition: transform .2s ease;
}

.single-product div.product div.images .woocommerce-product-gallery__trigger:hover {
  transform: scale(1.07);
}

/* ============================================================
   4. SUMMARY  (right column)
   Clear vertical rhythm: eyebrow → title → price → description
   → buy row → meta. Every block earns its spacing.
   ============================================================ */

.single-product div.product div.summary {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(0px, 1vw, 8px) 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  display: flex;
  flex-direction: column;
}

/* --- eyebrow + title ------------------------------------- */

.single-product div.product .product_title {
  order: 1;
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-weight: 700 !important;
  font-size: 32px;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
  color: var(--g) !important;
  text-align: left !important;
  font-family: "Cormorant Garamond", serif;
}

.single-product div.product .product_title::before {
  content: "House of DIRA";
  display: block;
  margin-bottom: 14px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --- price ------------------------------------------------ */

.single-product div.product .summary p.price {
  order: 2;
  display: flex !important;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 24px !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--g) !important;
  text-align: left !important;
}

.single-product div.product .summary p.price .amount {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--g) !important;
}

.single-product div.product .summary p.price ins {
  text-decoration: none !important;
  background: none !important;
  padding: 0 !important;
}

.single-product div.product .summary p.price del {
  order: 2;
  font-size: 1rem !important;
  opacity: 1 !important;
}

.single-product div.product .summary p.price del .amount {
  font-weight: 400 !important;
  color: var(--muted) !important;
  text-decoration: line-through;
}

/* --- rating stars ----------------------------------------- */




.single-product div.product .summary .woocommerce-product-rating {
  order: 3;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  color: var(--muted) !important;
}

.single-product div.product .summary .woocommerce-product-rating::before,
.single-product div.product .summary .woocommerce-product-rating::after {
  content: none !important;
  display: none !important;
}

.single-product div.product .summary .woocommerce-product-rating .star-rating {
  float: none !important;
  display: inline-block !important;
  margin: 0 !important;
  color: var(--gold) !important;
  letter-spacing: 2px;
  width: 6.4em;
}

.single-product div.product .summary .woocommerce-product-rating a.woocommerce-review-link {
  display: flex !important;
  float: none !important;
  white-space: nowrap !important;
  color: var(--muted) !important;
  font-family: "Jost", "DM Sans", sans-serif;
  text-decoration: none;
  font-size: 14px;
  line-height: 1 !important;
  margin: 0 !important;
}

.single-product div.product .summary .woocommerce-product-rating a.woocommerce-review-link:hover {
  color: var(--g) !important;
  text-decoration: underline;
}

/* --- short description ------------------------------------ */

.single-product div.product .woocommerce-product-details__short-description {
  order: 4;
  margin: 0 0 28px !important;
  padding: 20px 0 !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent !important;
}

.single-product div.product .woocommerce-product-details__short-description p {
  margin: 0 !important;
  font-size: 1.02rem !important;
  line-height: 1.75 !important;
  color: var(--body-c) !important;
  max-width: 48ch;
  text-align: left !important;
}

/* --- buy row: quantity + add to cart ----------------------- */

.single-product div.product .summary form.cart {
  order: 5;
  display: flex !important;
  align-items: stretch;
  gap: 12px;
  margin: 0 0 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  width: 100%;
}

.single-product div.product .summary form.cart::before,
.single-product div.product .summary form.cart::after {
  content: none !important;
  display: none !important;
}

.single-product div.product .summary form.cart div.quantity {
  float: none !important;
  margin: 0 !important;
  display: flex;
}

.single-product div.product .summary form.cart .qty {
  width: 88px !important;
  height: auto !important;
  min-height: 54px;
  padding: 0 8px !important;
  text-align: center !important;
  background: #fff !important;
  border: 1px solid #CFC7B4 !important;
  border-radius: 10px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--g) !important;
  appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.single-product div.product .summary form.cart .qty::-webkit-outer-spin-button,
.single-product div.product .summary form.cart .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.single-product div.product .summary form.cart .qty:hover {
  border-color: var(--gold) !important;
}

.single-product div.product .summary form.cart .qty:focus,
.single-product div.product .summary form.cart .qty:focus-visible {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .22) !important;
}

.single-product div.product .summary form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  max-width: 200px;
  min-height: 34px;
  margin: 0 !important;
  padding: 10px 32px !important;
  background: var(--g) !important;
  color: #FDFBF6 !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: "Jost", "DM Sans", sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(12, 53, 39, .22);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.single-product div.product .summary form.cart .single_add_to_cart_button:hover {
  background: var(--gold) !important;
  color: var(--g-dark) !important;
  box-shadow: 0 12px 26px rgba(201, 162, 75, .38);
  transform: translateY(-1px);
}

.single-product .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 20px;
}

.single-product div.product .summary form.cart .single_add_to_cart_button:active {
  transform: translateY(0);
}

.single-product div.product .summary form.cart .single_add_to_cart_button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .45);
}

/* --- meta: SKU / categories + assurance strip --------------- */

.single-product div.product .summary .product_meta {
  order: 6;
  display: flex;
  flex-wrap: wrap;
  column-gap: 28px;
  row-gap: 10px;
  margin: 0 !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid var(--line);
  font-family: "Jost", "DM Sans", sans-serif !important;
  font-size: .74rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted) !important;
  text-align: left !important;
}

.single-product div.product .summary .product_meta>span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.single-product div.product .summary .product_meta .sku {
  color: var(--ink) !important;
  letter-spacing: .1em;
}

.single-product div.product .summary .product_meta a {
  color: var(--g) !important;
  letter-spacing: .1em;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(201, 162, 75, .55);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}

.single-product div.product .summary .product_meta a:hover {
  color: var(--gold) !important;
  border-color: var(--gold);
}

/* assurance strip — mirrors the site's own announce-bar promises */
.single-product div.product .summary .product_meta::after {
  content: "✦  Free shipping — Malaysia & Singapore\A✦  100% organic cotton, OEKO-TEX fabrics\A✦  Cash on delivery available";
  white-space: pre-line;
  flex-basis: 100%;
  margin-top: 16px;
  padding: 15px 18px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: "DM Sans", sans-serif;
  font-size: .84rem;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 2;
  text-transform: none;
  color: var(--g-soft);
}

/* ============================================================
   5. TABS — description / reviews
   Flat underline tab bar over a quiet content area, separated
   from the buy section by a full-width divider.
   ============================================================ */

.single-product div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  width: 100% !important;
  margin: clamp(36px, 5vw, 56px) 0 0 !important;
  padding: clamp(28px, 4vw, 40px) 0 0 !important;
  border-top: 1px solid var(--line) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.single-product div.product .woocommerce-tabs ul.tabs {
  display: flex !important;
  gap: 28px;
  margin: 0 0 26px !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: visible !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.single-product div.product .woocommerce-tabs ul.tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs::after,
.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block !important;
  padding: 0 2px 14px !important;
  margin: 0 0 -1px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: none !important;
  box-shadow: none !important;
  font-family: "Jost", "DM Sans", sans-serif !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  transition: color .2s ease, border-color .2s ease;
}

.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--g) !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--g) !important;
  border-bottom-color: var(--gold) !important;
}

/* tab panels — flat, readable, no boxes-in-boxes */
.single-product div.product .woocommerce-Tabs-panel {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* hide the duplicate "Description" heading — the active tab
   already labels this content */
.single-product div.product .woocommerce-Tabs-panel--description>h2:first-child {
  display: none;
}

.single-product div.product .woocommerce-Tabs-panel h2 {
  margin: 0 0 14px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.25rem !important;
  color: var(--g) !important;
}

.single-product div.product .woocommerce-Tabs-panel p {
  margin: 0 0 1em !important;
  max-width: 70ch;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: var(--body-c) !important;
}

.single-product div.product .woocommerce-Tabs-panel p:last-child {
  margin-bottom: 0 !important;
}

/* ============================================================
   6. REVIEWS
   ============================================================ */

.single-product div.product .woocommerce-Reviews-title {
  margin: 0 0 12px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  color: var(--g) !important;
}

.single-product div.product .woocommerce-Reviews .woocommerce-noreviews {
  margin: 0 0 26px !important;
  padding: 14px 18px !important;
  background: var(--ivory) !important;
  border: 1px dashed #D8CFBB !important;
  border-radius: 10px !important;
  color: var(--muted) !important;
  font-size: .95rem !important;
}

.single-product div.product .comment-reply-title {
  display: block;
  margin: 0 0 18px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 1.1rem !important;
  color: var(--g) !important;
}

.single-product div.product .comment-form label {
  display: block;
  margin: 0 0 7px !important;
  font-family: "Jost", sans-serif !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

.single-product div.product .comment-form select,
.single-product div.product .comment-form textarea {
  width: 100%;
  max-width: 560px;
  padding: 13px 15px !important;
  background: #fff !important;
  border: 1px solid #CFC7B4 !important;
  border-radius: 10px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: .95rem !important;
  color: var(--ink) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.single-product div.product .comment-form select {
  width: auto;
  min-width: 210px;
  cursor: pointer;
}

.single-product div.product .comment-form select:focus,
.single-product div.product .comment-form textarea:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .22) !important;
}

.single-product div.product .comment-form .comment-form-rating,
.single-product div.product .comment-form .comment-form-comment {
  margin: 0 0 20px !important;
}

.single-product div.product .comment-form input[type="submit"] {
  padding: 14px 36px !important;
  background: var(--g) !important;
  color: #FDFBF6 !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: "Jost", sans-serif !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.single-product div.product .comment-form input[type="submit"]:hover {
  background: var(--gold) !important;
  color: var(--g-dark) !important;
  box-shadow: 0 8px 20px rgba(201, 162, 75, .35);
}

/* ============================================================
   7. RELATED PRODUCTS
   Same premium card language as the shop page; card width is
   controlled so 2 items never stretch awkwardly.
   ============================================================ */

.single-product div.product section.related {
  grid-column: 1 / -1;
  width: 100% !important;
  margin: clamp(36px, 5vw, 56px) 0 0 !important;
  padding: clamp(28px, 4vw, 40px) 0 0 !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}

.single-product div.product section.related>h2 {
  margin: 0 0 24px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem) !important;
  color: var(--g) !important;
  text-align: left !important;
}

.single-product div.product section.related ul.products {
  clear: both;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: 100%;
}

.single-product div.product section.related ul.products::before,
.single-product div.product section.related ul.products::after {
  content: none !important;
}

.single-product div.product section.related ul.products li.product {
  position: relative;
  float: none !important;
  width: auto !important;
  max-width: 300px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
  text-align: left !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease, border-color .28s ease;
}

.single-product div.product section.related ul.products li.product:hover,
.single-product div.product section.related ul.products li.product:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(201, 162, 75, .45) !important;
}

.single-product div.product section.related ul.products li.product .woocommerce-loop-product__link {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  padding: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  color: inherit !important;
}

.single-product div.product section.related ul.products li.product img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block !important;
  margin: 0 !important;
  background: var(--sand) !important;
  border: 0 !important;
  border-radius: 0 !important;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.single-product div.product section.related ul.products li.product:hover img {
  transform: scale(1.04);
}

.single-product div.product section.related ul.products li.product .woocommerce-loop-product__title {
  margin: 0 !important;
  padding: 16px 18px 2px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.02rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
  color: var(--g) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.single-product div.product section.related ul.products li.product .price {
  display: flex !important;
  align-items: baseline;
  justify-content: flex-start;
  gap: 9px;
  margin: auto 0 0 !important;
  padding: 8px 18px 14px !important;
  font-size: .96rem !important;
  text-align: left !important;
  color: var(--ink) !important;
}

.single-product div.product section.related ul.products li.product .price .amount {
  font-weight: 600 !important;
  color: var(--ink) !important;
}

.single-product div.product section.related ul.products li.product .price ins {
  text-decoration: none !important;
}

.single-product div.product section.related ul.products li.product .price del {
  order: 2;
  font-size: .84rem !important;
}

.single-product div.product section.related ul.products li.product .price del .amount {
  font-weight: 400 !important;
  color: var(--muted) !important;
}

.single-product div.product section.related ul.products li.product .add_to_cart_button {
  display: block !important;
  width: auto !important;
  margin: 0 18px 18px !important;
  padding: 11px 16px !important;
  background: transparent !important;
  color: var(--g) !important;
  border: 1px solid #BFC7C0 !important;
  border-radius: 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  font-family: "Jost", "DM Sans", sans-serif !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.single-product div.product section.related ul.products li.product .add_to_cart_button:hover {
  background: var(--g) !important;
  border-color: var(--g) !important;
  color: #FDFBF6 !important;
}

.single-product div.product section.related ul.products li.product .added_to_cart {
  display: block;
  margin: -8px 18px 16px !important;
  text-align: center;
  font-family: "Jost", sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold) !important;
  text-decoration: none !important;
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */

@media (max-width: 992px) {
  .single-product div.product {
    grid-template-columns: 1fr;
  }

  .single-product div.product div.images.woocommerce-product-gallery {
    position: static;
    max-width: 560px;
    margin-bottom: 32px !important;
  }
}

@media (max-width: 640px) {
  .single-product div.product {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .single-product div.product>.onsale {
    top: calc(18px + 12px);
    left: calc(18px + 12px);
  }

  .single-product div.product .summary form.cart {
    flex-wrap: wrap;
  }

  .single-product div.product .summary form.cart .single_add_to_cart_button {
    flex: 1 1 100%;
    max-width: none;
  }

  .single-product div.product .woocommerce-tabs ul.tabs {
    gap: 20px;
  }

  .single-product div.product .woocommerce-tabs ul.tabs li a {
    font-size: .72rem !important;
    letter-spacing: .12em !important;
    padding-bottom: 12px !important;
  }

  .single-product div.product section.related ul.products {
    grid-template-columns: repeat(2, 1fr);
  }

  .single-product div.product section.related ul.products li.product {
    max-width: none;
  }

  .single-product div.product section.related ul.products li.product .woocommerce-loop-product__title {
    padding: 13px 13px 2px !important;
    font-size: .92rem !important;
  }

  .single-product div.product section.related ul.products li.product .price {
    padding: 6px 13px 10px !important;
    font-size: .9rem !important;
  }

  .single-product div.product section.related ul.products li.product .add_to_cart_button {
    margin: 0 13px 13px !important;
    padding: 10px 10px !important;
    font-size: .7rem !important;
    letter-spacing: .1em !important;
  }
}

@media (max-width: 400px) {
  .single-product div.product section.related ul.products {
    grid-template-columns: 1fr;
  }

  .single-product div.product section.related ul.products li.product {
    max-width: 340px;
    margin-inline: auto !important;
  }
}

/* ============================================================
   9. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .single-product div.product *,
  .single-product div.product *::before,
  .single-product div.product *::after {
    transition: none !important;
  }

  .single-product div.product section.related ul.products li.product:hover,
  .single-product div.product section.related ul.products li.product:hover img,
  .single-product div.product .summary form.cart .single_add_to_cart_button:hover,
  .single-product div.product div.images .woocommerce-product-gallery__trigger:hover {
    transform: none !important;
  }
}

/* ============================================================
   DIRA — HELP PAGE
   ------------------------------------------------------------
   Parent scope: .page-id-28  (as requested — this class
   is added to <body> by WordPress's customizer-support script).

   NOTE: that class is injected by JavaScript and mainly exists
   for logged-in admin sessions, so it may be missing for normal
   visitors. If styles ever don't apply for logged-out users,
   do a find-and-replace of ".page-id-28" with
   ".page-id-28" (the Help page's permanent body class) —
   everything else stays identical.

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

.page-id-28 .page-container {
  --g: #0C3527;
  --g-dark: #07231A;
  --g-soft: #0F4030;
  --gold: #C9A24B;
  --gold-soft: #E3C98A;
  --ivory: #FBF7EF;
  --sand: #F3EBDD;
  --ink: #26251F;
  --body-c: #55503F;
  --muted: #8A8578;
  --line: #E7E0D2;
  --r: 12px;
  --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
  --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

  background: var(--ivory);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page-id-28 .page-container .wrap {
  margin-inline: auto;
  padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px);
  padding-inline: clamp(16px, 4vw, 32px);
}

/* smooth anchor jumps from footer links (#shipping, #returns…)
   land below the sticky header instead of underneath it */
.page-id-28 .page-container [id] {
  scroll-margin-top: 120px;
}

/* ============================================================
   1. PAGE HEADER — eyebrow + title + gold rule
   ============================================================ */

.page-id-28 .page-container .entry-header {
  text-align: center;
  margin: 0 0 clamp(36px, 5.5vw, 60px) !important;
}

.page-id-28 .page-container .entry-header .eyebrow {
  display: block;
  margin: 0 0 14px !important;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-id-28 .page-container .entry-title {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
  line-height: 1.1 !important;
  color: var(--g) !important;
}

/* short gold rule under the title */
.page-id-28 .page-container .entry-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 22px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
}

/* ============================================================
   2. LAYOUT — sidebar + content
   (Bootstrap's .row / .col-lg-* handle the columns; we add
   breathing room and alignment.)
   ============================================================ */

.page-id-28 .page-container .entry-content {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--body-c);
}

.page-id-28 .page-container .entry-content>.row {
  align-items: flex-start;
}

/* ============================================================
   3. SIDEBAR — "Send a Message" card
   Overrides the inline linen background with the theme's own
   surfaces. !important is required to beat inline styles.
   ============================================================ */

.page-id-28 .page-container .col-lg-4>div[style] {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-top: 3px solid var(--gold) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: clamp(22px, 2.6vw, 32px) !important;
  top: 120px !important;
  /* clears the sticky site header */
}

.page-id-28 .page-container .col-lg-4 h3 {
  margin: 0 0 8px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.35rem !important;
  color: var(--g) !important;
}

.page-id-28 .page-container .col-lg-4 h4 {
  margin: 0 0 14px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  color: var(--g) !important;
}

.page-id-28 .page-container .col-lg-4 .small.text-muted {
  color: var(--muted) !important;
  font-size: .92rem !important;
  line-height: 1.65;
}

/* form labels */
.page-id-28 .page-container #dira-contact-form label {
  display: block !important;
  margin-bottom: 7px !important;
  font-family: "Jost", "DM Sans", sans-serif !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  position: absolute;
  left: 20px;
  top: 14px;
}

/* inputs + textarea — override inline styles */
.page-id-28 .page-container #dira-contact-form .form-control {
  width: 100% !important;
  padding: 12px 14px !important;
  background: var(--ivory) !important;
  border: 1px solid #D8CFBB !important;
  border-radius: 10px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: .95rem !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.page-id-28 .page-container #dira-contact-form .form-control:hover {
  border-color: var(--gold) !important;
}

.page-id-28 .page-container #dira-contact-form .form-control:focus {
  outline: none !important;
  background: #fff !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .22) !important;
}

.page-id-28 .page-container #dira-contact-form textarea.form-control {
  min-height: 120px;
  resize: vertical !important;
}

.page-id-28 .page-container #dira-contact-form .mb-3 {
  margin-bottom: 16px !important;
  position: relative;
}

/* submit button */
.page-id-28 .page-container #dira-contact-form button[type="submit"] {
  width: 100%;
  padding: 14px 24px !important;
  background: var(--g) !important;
  color: #FDFBF6 !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: "Jost", "DM Sans", sans-serif !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(12, 53, 39, .2);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.page-id-28 .page-container #dira-contact-form button[type="submit"]:hover {
  background: var(--gold) !important;
  color: var(--g-dark) !important;
  box-shadow: 0 10px 24px rgba(201, 162, 75, .36);
  transform: translateY(-1px);
}

.page-id-28 .page-container #dira-contact-form button[type="submit"]:active {
  transform: translateY(0);
}

/* divider inside the card */
.page-id-28 .page-container .col-lg-4 hr {
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  margin-block: 24px !important;
  opacity: 1;
}

/* direct-support buttons */
.page-id-28 .page-container .col-lg-4 a.btn {
  display: block !important;
  padding: 13px 20px !important;
  border-radius: 10px !important;
  text-align: center !important;
  text-decoration: none !important;
  font-family: "Jost", "DM Sans", sans-serif !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.page-id-28 .page-container .col-lg-4 a.btn--gold {
  background: var(--gold) !important;
  color: var(--g-dark) !important;
  border: 1px solid var(--gold) !important;
  margin-bottom: 12px !important;
}

.page-id-28 .page-container .col-lg-4 a.btn--gold:hover {
  background: var(--gold-soft) !important;
  border-color: var(--gold-soft) !important;
  box-shadow: 0 8px 20px rgba(201, 162, 75, .35);
}

.page-id-28 .page-container .col-lg-4 a.btn--ghost {
  background: transparent !important;
  color: var(--g) !important;
  border: 1px solid #BFC7C0 !important;
}

.page-id-28 .page-container .col-lg-4 a.btn--ghost:hover {
  background: var(--g) !important;
  border-color: var(--g) !important;
  color: #FDFBF6 !important;
}

/* ============================================================
   4. "HOW TO ORDER" FEATURE CARD
   Replaces the inline sky-blue panel with a deep-green
   feature card that matches the brand.
   ============================================================ */

.page-id-28 .page-container .col-lg-8>div[style] {
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  border: 1px solid rgba(227, 201, 138, .25) !important;
  border-radius: 16px !important;
  padding: clamp(24px, 3.2vw, 40px) !important;
  box-shadow: var(--shadow-md) !important;
  color: rgba(251, 247, 239, .88) !important;
  margin-bottom: clamp(36px, 5vw, 52px) !important;
}

.page-id-28 .page-container .col-lg-8>div[style] h3 {
  margin: 0 0 12px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.45rem !important;
  color: #FDFBF6 !important;
}

.page-id-28 .page-container .col-lg-8>div[style] h4 {
  margin: 22px 0 8px !important;
  font-family: "Jost", sans-serif !important;
  font-weight: 500 !important;
  font-size: .78rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--gold-soft) !important;
}

.page-id-28 .page-container .col-lg-8>div[style] p {
  color: rgba(251, 247, 239, .85) !important;
  line-height: 1.75;
}

.page-id-28 .page-container .col-lg-8>div[style] p.small {
  color: rgba(251, 247, 239, .6) !important;
  font-size: .9rem !important;
}

.page-id-28 .page-container .col-lg-8>div[style] ol {
  margin: 8px 0 0 !important;
  padding-left: 20px !important;
  color: rgba(251, 247, 239, .85) !important;
}

.page-id-28 .page-container .col-lg-8>div[style] ol li {
  padding-left: 6px;
  line-height: 2 !important;
}

.page-id-28 .page-container .col-lg-8>div[style] ol li::marker {
  color: var(--gold);
  font-weight: 600;
}

.page-id-28 .page-container .col-lg-8>div[style] strong {
  color: #FDFBF6 !important;
}

/* ============================================================
   5. FAQ SECTION
   Numbered Fraunces headings with gold markers, readable body
   copy, and hairline separation between entries.
   ============================================================ */

.page-id-28 .page-container .col-lg-8 h2.d3 {
  margin: 0 0 26px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.5rem, 2.8vw, 1.95rem) !important;
  color: var(--g) !important;
  display: flex;
  align-items: center;
  gap: 18px;
}

.page-id-28 .page-container .col-lg-8 h2.d3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 162, 75, .55), rgba(201, 162, 75, 0));
}

/* each FAQ entry */
.page-id-28 .page-container .col-lg-8>.mb-4 {
  margin: 0 0 18px !important;
  padding: clamp(20px, 2.4vw, 28px) !important;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.page-id-28 .page-container .col-lg-8>.mb-4:hover {
  border-color: rgba(201, 162, 75, .4);
  box-shadow: var(--shadow-md);
}

.page-id-28 .page-container .col-lg-8>.mb-4 h4 {
  margin: 0 0 10px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.15rem !important;
  color: var(--g) !important;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.page-id-28 .page-container .col-lg-8>.mb-4 h4::before {
  content: "✦";
  font-size: .7rem;
  color: var(--gold);
  flex: 0 0 auto;
}

.page-id-28 .page-container .col-lg-8>.mb-4 p {
  margin: 0 0 12px !important;
  color: var(--body-c) !important;
  line-height: 1.75 !important;
}

.page-id-28 .page-container .col-lg-8>.mb-4 p:last-child {
  margin-bottom: 0 !important;
}

.page-id-28 .page-container .col-lg-8>.mb-4 ul {
  margin: 6px 0 0 !important;
  padding-left: 22px !important;
  list-style: none !important;
}

.page-id-28 .page-container .col-lg-8>.mb-4 ul li {
  position: relative;
  margin-bottom: 8px;
  line-height: 1.7;
  color: var(--body-c);
}

.page-id-28 .page-container .col-lg-8>.mb-4 ul li::before {
  content: "";
  position: absolute;
  left: -18px;
  top: .66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.page-id-28 .page-container .col-lg-8>.mb-4 ul li strong {
  color: var(--ink);
}

.page-id-28 .page-container .col-lg-8>.mb-4 ul li em {
  color: var(--g-soft);
  font-style: normal;
  font-weight: 500;
}

.page-id-28 .page-container .col-lg-8 strong {
  color: var(--ink);
  font-weight: 600;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {

  /* sidebar stacks above content — release the sticky */
  .page-id-28 .page-container .col-lg-4>div[style] {
    position: static !important;
  }

  .page-id-28 .page-container .col-lg-8 {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
  }
}

@media (max-width: 640px) {
  .page-id-28 .page-container .col-lg-8>.mb-4 {
    padding: 18px !important;
  }

  .page-id-28 .page-container .col-lg-8 h2.d3 {
    gap: 12px;
  }
}

/* ============================================================
   7. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .page-id-28 .page-container *,
  .page-id-28 .page-container *::before,
  .page-id-28 .page-container *::after {
    transition: none !important;
  }

  .page-id-28 .page-container #dira-contact-form button[type="submit"]:hover {
    transform: none !important;
  }
}

/* ============================================================
   1. PAGE BANNER — matches the Shop page hero
   Deep-green panel, container width, layered gradients with
   soft gold glows and fine concentric arc line-work.
   ============================================================ */

.page-id-28 .page-container .entry-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(200px, 26vw, 288px);
  margin: 0 0 clamp(40px, 6vw, 64px) !important;
  padding: clamp(44px, 7vw, 72px) 24px !important;
  border-radius: 18px;
  text-align: center;

  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* eyebrow — uses the real text already in the HTML */
.page-id-28 .page-container .entry-header .eyebrow {
  display: block;
  margin: 0 !important;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-indent: .32em;
  /* optically centers tracked-out text */
  text-transform: uppercase;
  color: var(--gold-soft) !important;
}

.page-id-28 .page-container .entry-title {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: .01em;
  color: var(--ivory) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

/* thin gold rule under the title */
.page-id-28 .page-container .entry-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: .85;
}

.page-id-28 .entry-content .col-lg-4.mb-5.mb-lg-0 {
  position: sticky;
  top: 100px;
}

/* ============================================================
   DIRA — JOURNAL PAGE (blog index)
   ------------------------------------------------------------
   Parent scope: .blog — the permanent body class WordPress
   adds on the posts index — combined with .index-container,
   so nothing here affects any other page or component.

   Includes the same banner design as the Shop and Help pages:
   container-width deep-green panel with soft gold glows,
   concentric arc line-work, and a gold rule.

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

.blog .index-container {
  --g: #0C3527;
  --g-dark: #07231A;
  --g-soft: #0F4030;
  --gold: #C9A24B;
  --gold-soft: #E3C98A;
  --ivory: #FBF7EF;
  --sand: #F3EBDD;
  --ink: #26251F;
  --body-c: #55503F;
  --muted: #8A8578;
  --line: #E7E0D2;
  --r: 14px;
  --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
  --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

  background: var(--ivory);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.blog .index-container .wrap {
  margin-inline: auto;
}

.blog .index-container {
  padding-top: 0;
  margin-top: 0;

}

/* ============================================================
   1. PAGE BANNER — matches the Shop / Help hero
   ============================================================ */

.blog .index-container .site-main>header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(200px, 26vw, 288px);
  margin: 0 0 clamp(40px, 6vw, 64px) !important;
  padding: clamp(44px, 7vw, 72px) 24px !important;
  border-radius: 18px;
  text-align: center;

  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* eyebrow — uses the real text already in the HTML */
.blog .index-container .site-main>header .eyebrow {
  display: block;
  margin: 0 !important;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-indent: .32em;
  /* optically centers tracked-out text */
  text-transform: uppercase;
  color: var(--gold-soft) !important;
}

.blog .index-container .page-title {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: .01em;
  color: var(--ivory) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.blog .index-container header .text-muted.mx-auto {
  color: #fff !important;
}

/* thin gold rule under the title */
.blog .index-container .page-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: .85;
}

/* ============================================================
   2. ARTICLE LIST — editorial column
   Cards are constrained to a comfortable reading width and
   centered, like a magazine index.
   ============================================================ */

.blog .index-container .site-main>article {
  max-width: 820px;
  margin: 0 auto clamp(22px, 3vw, 30px) !important;
  padding: clamp(24px, 3.2vw, 40px) !important;

  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1),
    box-shadow .28s ease, border-color .28s ease;
}

/* thin gold accent along the left edge, revealed on hover */
.blog .index-container .site-main>article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  opacity: 0;
  transition: opacity .28s ease;
}

.blog .index-container .site-main>article:hover,
.blog .index-container .site-main>article:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(201, 162, 75, .45) !important;
}

.blog .index-container .site-main>article:hover::before,
.blog .index-container .site-main>article:focus-within::before {
  opacity: 1;
}

/* --- article header: date ABOVE title, like an eyebrow ---- */

.blog .index-container .site-main>article .entry-header {
  display: flex;
  flex-direction: column-reverse;
  /* puts the date first visually */
  gap: 10px;
  margin: 0 0 14px !important;
}

.blog .index-container .site-main>article .entry-header small {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Jost", "DM Sans", sans-serif !important;
  font-size: .72rem !important;
  font-weight: 500;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}

/* small rule after the date */
.blog .index-container .site-main>article .entry-header small::after {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(201, 162, 75, .45);
}

.blog .index-container .site-main>article .entry-title {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem) !important;
  line-height: 1.3 !important;
  color: var(--g) !important;
}

.blog .index-container .site-main>article .entry-title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color .22s ease !important;
}

.blog .index-container .site-main>article .entry-title a:hover {
  color: var(--gold) !important;
}

/* --- excerpt + read-more affordance ------------------------ */

.blog .index-container .site-main>article .entry-content p {
  margin: 0 !important;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--body-c);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* uniform card heights */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Read article" cue (CSS-generated; the title is the link) */
.blog .index-container .site-main>article .entry-content::after {
  content: "Read article  →";
  display: inline-block;
  margin-top: 16px;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g);
  border-bottom: 1px solid rgba(201, 162, 75, .55);
  padding-bottom: 2px;
  transition: color .22s ease, border-color .22s ease, transform .22s ease;
}

.blog .index-container .site-main>article:hover .entry-content::after {
  color: var(--gold);
  border-color: var(--gold);
  transform: translateX(3px);
}

/* ============================================================
   3. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .blog .index-container .site-main>article {
    padding: 20px !important;
  }

  .blog .index-container .site-main>article .entry-content p {
    -webkit-line-clamp: 4;
  }
}

/* ============================================================
   4. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .blog .index-container *,
  .blog .index-container *::before,
  .blog .index-container *::after {
    transition: none !important;
  }

  .blog .index-container .site-main>article:hover {
    transform: none !important;
  }
}

/* ============================================================
   JOURNAL — 2-COLUMN ARTICLE GRID
   (Append after the existing rules; these override the
   single-column layout above.)
   ============================================================ */

/* the list becomes a 2-column grid; the banner spans both */
.blog .index-container .site-main {
  display: block;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  align-items: stretch;
  /* equal card heights per row */
}

.blog .index-container .site-main>header {
  grid-column: 1 / -1;
  /* banner stays full width */
}

/* cards fill their grid cell instead of the centered column */
.blog .index-container .site-main>article {
  max-width: none;
  width: 100%;
  margin: 0 !important;
  /* grid gap handles spacing */
  display: flex;
  flex-direction: column;
}

/* internal structure so every card aligns: header on top,
   excerpt grows, "Read article" pins to the bottom */
.blog .index-container .site-main>article .entry-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog .index-container .site-main>article .entry-content p {
  flex: 0 0 auto;
}

.blog .index-container .site-main>article .entry-content::after {
  margin-top: auto;
  /* pushes the cue to the card base */
  padding-top: 16px;
  align-self: flex-start;
}

/* ---- responsive: 1 column on tablets and phones ---------- */

@media (max-width: 820px) {
  .blog .index-container .site-main {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   DIRA — BLOG DETAIL PAGE (single post)
   ------------------------------------------------------------
   Parent scope: .single-post — the permanent body class
   WordPress adds on single blog posts — combined with
   .single-post-container, so nothing here affects any other
   page or component (including the shop / product pages).

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

.single-post .single-post-container {
  --g: #0C3527;
  --g-dark: #07231A;
  --g-soft: #0F4030;
  --gold: #C9A24B;
  --gold-soft: #E3C98A;
  --ivory: #FBF7EF;
  --sand: #F3EBDD;
  --ink: #26251F;
  --body-c: #55503F;
  --muted: #8A8578;
  --line: #E7E0D2;
  --r: 16px;
  --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
  --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

  background: var(--ivory);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.single-post .single-post-container .wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px);
  padding-inline: clamp(16px, 4vw, 32px);
}

/* ============================================================
   1. ARTICLE CARD — the reading surface
   Keeps the 800px inline width; refines everything else.
   ============================================================ */

.single-post .single-post-container .site-main>article {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-top: 3px solid var(--gold) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: clamp(28px, 4.5vw, 56px) !important;
  max-width: 100% !important;
}

/* ============================================================
   2. POST HEADER — category · title · meta · hairline
   ============================================================ */

.single-post .single-post-container .entry-header {
  text-align: center;
  margin: 0 0 clamp(28px, 4vw, 40px) !important;
  padding-bottom: clamp(22px, 3vw, 30px);
  border-bottom: 1px solid var(--line);
}

/* category eyebrow — small gold pill link */
.single-post .single-post-container .entry-header .eyebrow {
  display: inline-block;
  margin: 0 0 16px !important;
}

.single-post .single-post-container .entry-header .eyebrow a {
  display: inline-block;
  padding: 7px 16px;
  background: rgba(201, 162, 75, .1);
  border: 1px solid rgba(201, 162, 75, .35);
  border-radius: 999px;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  color: var(--g-soft) !important;
  text-decoration: none !important;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}

.single-post .single-post-container .entry-header .eyebrow a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--g-dark) !important;
}

/* title */
.single-post .single-post-container .entry-header .entry-title {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem) !important;
  line-height: 1.2 !important;
  color: var(--g) !important;
  max-width: 20em;
  margin-inline: auto !important;
}

/* meta — date only; hides the separator and the empty
   "By" author span the template outputs */
.single-post .single-post-container .entry-meta {
  margin-top: 16px !important;
  font-family: "Jost", "DM Sans", sans-serif !important;
  font-size: .72rem !important;
  font-weight: 500;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

.single-post .single-post-container .entry-meta span:nth-child(2),
.single-post .single-post-container .entry-meta span:nth-child(3) {
  display: none;
  /* "·" separator + empty "By " */
}

/* ============================================================
   3. POST BODY — comfortable long-form typography
   ============================================================ */

.single-post .single-post-container .entry-content {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--body-c);
}

/* opening (lede) paragraph — slightly larger, deeper tone */
.single-post .single-post-container .entry-content p.lede {
  font-size: 1.14rem;
  line-height: 1.8;
  color: var(--ink);
}

.single-post .single-post-container .entry-content p {
  margin: 0 0 1.1em !important;
}

/* section headings — Fraunces with a small gold mark */
.single-post .single-post-container .entry-content h2,
.single-post .single-post-container .entry-content h3,
.single-post .single-post-container .entry-content h4 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 2em 0 .7em !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--g) !important;
}

.single-post .single-post-container .entry-content h2 {
  font-size: 1.5rem !important;
}

.single-post .single-post-container .entry-content h3 {
  font-size: 1.3rem !important;
}

.single-post .single-post-container .entry-content h4 {
  font-size: 1.15rem !important;
}

.single-post .single-post-container .entry-content h2::before,
.single-post .single-post-container .entry-content h3::before,
.single-post .single-post-container .entry-content h4::before {
  content: "✦";
  font-size: .65em;
  color: var(--gold);
  flex: 0 0 auto;
}

/* lists inside posts — gold dot bullets */
.single-post .single-post-container .entry-content ul,
.single-post .single-post-container .entry-content ol {
  margin: 0 0 1.2em !important;
  padding-left: 24px !important;
}

.single-post .single-post-container .entry-content ul {
  list-style: none !important;
}

.single-post .single-post-container .entry-content ul li {
  position: relative;
  margin-bottom: 8px;
}

.single-post .single-post-container .entry-content ul li::before {
  content: "";
  position: absolute;
  left: -18px;
  top: .7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.single-post .single-post-container .entry-content ol li::marker {
  color: var(--gold);
  font-weight: 600;
}

/* emphasis, links, quotes, images inside the body */
.single-post .single-post-container .entry-content strong {
  color: var(--ink);
  font-weight: 600;
}

.single-post .single-post-container .entry-content a {
  color: var(--g);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 75, .55);
  transition: color .2s ease, border-color .2s ease;
}

.single-post .single-post-container .entry-content a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.single-post .single-post-container .entry-content blockquote {
  margin: 1.6em 0 !important;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--gold);
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--g-soft);
}

.single-post .single-post-container .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.4em 0;
}

/* the template prints an empty footer — collapse its space */
.single-post .single-post-container .entry-footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border: 0 !important;
}

/* ============================================================
   4. COMMENTS — "Leave a Reply" card
   Matches the article card width and the theme's form styling.
   ============================================================ */

.single-post .single-post-container #respond.comment-respond {
  max-width: 800px;
  margin: clamp(24px, 3.5vw, 36px) auto 0;
  padding: clamp(24px, 3.5vw, 40px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  max-width: 100% !important;
}

.single-post .single-post-container .comment-reply-title {
  display: block;
  margin: 0 0 16px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.4rem !important;
  color: var(--g) !important;
}

.single-post .single-post-container {
  padding-top: 0;
  margin-top: 0;

}

.single-post .single-post-container .comment-form .logged-in-as {
  margin: 0 0 18px !important;
  font-size: .88rem;
  color: var(--muted);
}

.single-post .single-post-container .comment-form .logged-in-as a {
  color: var(--g);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 75, .55);
}

.single-post .single-post-container .comment-form .logged-in-as a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.single-post .single-post-container .comment-form label {
  display: block;
  margin-bottom: 7px;
  font-family: "Jost", sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.single-post .single-post-container .comment-form .required {
  color: var(--gold);
}

.single-post .single-post-container .comment-form textarea,
.single-post .single-post-container .comment-form input[type="text"],
.single-post .single-post-container .comment-form input[type="email"],
.single-post .single-post-container .comment-form input[type="url"] {
  width: 100%;
  padding: 13px 15px;
  background: var(--ivory);
  border: 1px solid #D8CFBB;
  border-radius: 10px;
  font-family: "DM Sans", sans-serif;
  font-size: .95rem;
  color: var(--ink);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.single-post .single-post-container .comment-form textarea {
  resize: vertical;
  min-height: 150px;
}

.single-post .single-post-container .comment-form textarea:hover,
.single-post .single-post-container .comment-form input[type="text"]:hover,
.single-post .single-post-container .comment-form input[type="email"]:hover,
.single-post .single-post-container .comment-form input[type="url"]:hover {
  border-color: var(--gold);
}

.single-post .single-post-container .comment-form textarea:focus,
.single-post .single-post-container .comment-form input[type="text"]:focus,
.single-post .single-post-container .comment-form input[type="email"]:focus,
.single-post .single-post-container .comment-form input[type="url"]:focus {
  outline: none;
  background: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .22);
}

.single-post .single-post-container .comment-form .comment-form-comment {
  margin: 0 0 18px !important;
}

.single-post .single-post-container .comment-form .form-submit {
  margin: 0 !important;
}

.single-post .single-post-container .comment-form input[type="submit"] {
  padding: 14px 36px;
  background: var(--g);
  color: #FDFBF6;
  border: 0;
  border-radius: 10px;
  font-family: "Jost", sans-serif;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(12, 53, 39, .18);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.single-post .single-post-container .comment-form input[type="submit"]:hover {
  background: var(--gold);
  color: var(--g-dark);
  box-shadow: 0 10px 24px rgba(201, 162, 75, .36);
  transform: translateY(-1px);
}

.single-post .single-post-container .comment-form input[type="submit"]:active {
  transform: translateY(0);
}

/* existing comment list, if/when comments appear */
.single-post .single-post-container .comment-list {
  max-width: 800px;
  margin: clamp(24px, 3.5vw, 36px) auto 0;
  padding: 0;
  list-style: none;
}

.single-post .single-post-container .comment-list .comment {
  margin-bottom: 16px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .single-post .single-post-container .site-main>article {
    padding: 22px 18px !important;
  }

  .single-post .single-post-container #respond.comment-respond {
    padding: 22px 18px;
  }

  .single-post .single-post-container .entry-content {
    font-size: .98rem;
  }

  .single-post .single-post-container .entry-content p.lede {
    font-size: 1.06rem;
  }
}

/* ============================================================
   6. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .single-post .single-post-container *,
  .single-post .single-post-container *::before,
  .single-post .single-post-container *::after {
    transition: none !important;
  }

  .single-post .single-post-container .comment-form input[type="submit"]:hover {
    transform: none !important;
  }
}

/* ============================================================
   7. WOOCOMMERCE VARIATION RADIO BUTTON SWATCHES
   ============================================================ */

.variations {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}

.variations td,
.variations th {
  padding: 8px 0;
  vertical-align: middle;
}

.variations th.label {
  width: 100px;
  font-family: var(--util);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
}

.dira-swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.dira-swatch-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--white-2);
  border: 1.5px solid var(--linen);
  border-radius: 24px;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s var(--ease);
}

.dira-swatch-item:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
  transform: translateY(-1px);
}

.dira-swatch-item.is-active {
  border-color: var(--green);
  background: var(--green-tint);
  color: var(--green-deep);
  font-weight: 600;
  box-shadow: 0 4px 12px -3px rgba(16, 78, 56, 0.25);
}

.dira-radio-input {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 50%;
  outline: none;
  margin: 0;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dira-swatch-item:hover .dira-radio-input {
  border-color: var(--gold-deep);
}

.dira-radio-input:checked {
  border-color: var(--green);
  background-color: var(--green);
  box-shadow: inset 0 0 0 2.5px #ffffff;
}

/* Color Dot Swatches */
.dira-color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* Sex Icon */
.dira-sex-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Size Swatch specific */
.dira-swatch-size {
  padding: 8px 18px;
  min-width: 54px;
  justify-content: center;
}

/* Out of Stock / Disabled Swatches */
.dira-swatch-item.is-disabled {
  opacity: 0.45;
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
  background: #f5f5f5;
  border-color: #e0e0e0;
}

/* --- E-Commerce Plus (+) & Minus (-) Quantity Controls --- */
.dira-qty-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  background: #FFF8F0 !important;
  border: 1.5px solid #E5DCCA !important;
  border-radius: 12px !important;
  padding: 3px !important;
  gap: 4px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  height: 48px !important;
  width: auto !important;
  min-width: 124px !important;
  justify-content: space-between !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  vertical-align: middle !important;
}

.dira-qty-wrapper:focus-within,
.dira-qty-wrapper:hover {
  border-color: var(--gold-deep, #D99A2B) !important;
  box-shadow: 0 3px 10px rgba(217, 154, 43, 0.15) !important;
}

.dira-qty-btn {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2D8C6 !important;
  border-radius: 8px !important;
  color: var(--green, #104E38) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.dira-qty-btn:hover {
  background: var(--green, #104E38) !important;
  color: #FDFAF1 !important;
  border-color: var(--green, #104E38) !important;
  transform: scale(1.05);
}

.dira-qty-btn:active {
  transform: scale(0.94);
}

.quantity .qty,
.dira-qty-wrapper input.qty,
.dira-qty-wrapper .dira-cart-qty-input {
  width: 40px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--green, #104E38) !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Cart Drawer Specific Compact Qty Wrapper */
.cart-item-qty {
  height: 34px !important;
  min-width: 98px !important;
  padding: 2px !important;
  border-radius: 8px !important;
}

.cart-item-qty .dira-qty-btn {
  width: 26px !important;
  height: 26px !important;
  font-size: 1rem !important;
  border-radius: 6px !important;
}

.cart-item-qty input.dira-cart-qty-input {
  width: 32px !important;
  height: 26px !important;
  min-height: 26px !important;
  font-size: 0.95rem !important;
}

/* Hide WooCommerce Accessibility Screen Reader Text on Product Cards */
.screen-reader-text,
.woocommerce-loop-product__link+.screen-reader-text,
.add_to_cart_button+.screen-reader-text {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  word-wrap: normal !important;
}

/* ============================================================
   DIRA — OUR STORY PAGE
   ------------------------------------------------------------
   Parent scope: .page-id-27 — the permanent body class
   WordPress gives this page — combined with .page-container,
   so nothing here affects any other page or component.
   (If the page is ever recreated with a new ID, just update
   the number.)

   Includes the same banner design as Shop / Help / Journal:
   container-width deep-green panel with soft gold glows,
   concentric arc line-work, and a gold rule.

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

.page-id-27 .page-container {
  --g: #0C3527;
  --g-dark: #07231A;
  --g-soft: #0F4030;
  --gold: #C9A24B;
  --gold-soft: #E3C98A;
  --ivory: #FBF7EF;
  --sand: #F3EBDD;
  --ink: #26251F;
  --body-c: #55503F;
  --muted: #8A8578;
  --line: #E7E0D2;
  --r: 16px;
  --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
  --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

  background: var(--ivory);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: 0;
}



/* footer links to #atelier land below the sticky header */
.page-id-27 .page-container [id] {
  scroll-margin-top: 120px;
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

.page-id-27 .page-container .entry-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(200px, 26vw, 288px);
  margin: 0 0 clamp(40px, 6vw, 72px) !important;
  padding: clamp(44px, 7vw, 72px) 24px !important;
  border-radius: 18px;
  text-align: center;
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-27 .page-container .entry-header .eyebrow {
  display: block;
  margin: 0 !important;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: var(--gold-soft) !important;
}

.page-id-27 .page-container .entry-header .entry-title {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: .01em;
  color: var(--ivory) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-27 .page-container .entry-header .entry-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: .85;
}

/* ============================================================
   2. STORY SECTIONS — image + text rows
   ============================================================ */

.page-id-27 .page-container .story-page {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--body-c);
}

/* section eyebrows ("Our Beginnings", "The Atelier") */
.page-id-27 .page-container .story-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px !important;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-id-27 .page-container .story-page .eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(201, 162, 75, .5);
}

/* section headings */
.page-id-27 .page-container .story-page h2 {
  margin: 0 0 20px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.7rem, 3vw, 2.3rem) !important;
  line-height: 1.18 !important;
  color: var(--g) !important;
}

/* lede + body paragraphs */
.page-id-27 .page-container .story-page p.lede {
  font-size: 1.13rem;
  line-height: 1.75;
  color: var(--ink);
}

.page-id-27 .page-container .story-page p {
  margin-bottom: 1.1rem;
}

/* ---- images: rounded frame + inner gold keyline ---------- */

.page-id-27 .page-container .story-page .position-relative[style] {
  border-radius: var(--r) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--line);
}

.page-id-27 .page-container .story-page .position-relative[style]::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(227, 201, 138, .45);
  border-radius: calc(var(--r) - 6px);
  pointer-events: none;
}

.page-id-27 .page-container .story-page .position-relative img {
  display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.page-id-27 .page-container .story-page .position-relative:hover img {
  transform: scale(1.03);
}

/* ============================================================
   3. STAT BOXES — 10,000+ · 4.9★ · 100%
   Overrides the inline styles into ivory cards with a gold
   top accent; !important is needed to beat inline CSS.
   ============================================================ */

.page-id-27 .page-container .story-page .statbox {
  background: var(--ivory) !important;
  border: 1px solid var(--line) !important;
  border-top: 2px solid var(--gold) !important;
  border-radius: 12px !important;
  padding: 18px 14px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.page-id-27 .page-container .story-page .statbox:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(201, 162, 75, .5) !important;
  border-top-color: var(--gold) !important;
}

.page-id-27 .page-container .story-page .statbox b {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important;
  color: var(--g) !important;
  line-height: 1.2;
  margin-bottom: 4px;
}

.page-id-27 .page-container .story-page .statbox span {
  font-family: "Jost", "DM Sans", sans-serif !important;
  font-size: .68rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

/* remove the stray <br> gap between number and label */
.page-id-27 .page-container .story-page .statbox br {
  display: none;
}

/* ============================================================
   4. DIVIDER — ivory hairline with a centered gold ornament
   ============================================================ */

.page-id-27 .page-container .story-page hr {
  position: relative;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  margin-block: clamp(48px, 7vw, 72px) !important;
  overflow: visible;
  opacity: 1;
}

.page-id-27 .page-container .story-page hr::after {
  content: "✦";
  position: absolute;
  top: -0.75em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 16px;
  background: var(--ivory);
  color: var(--gold);
  font-size: .85rem;
  line-height: 1;
}

/* ============================================================
   5. PHILOSOPHY LIST — ✦ feature items
   ============================================================ */

.page-id-27 .page-container .story-page ul.list-unstyled li {
  margin-bottom: 16px !important;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.page-id-27 .page-container .story-page ul.list-unstyled li:hover {
  border-color: rgba(201, 162, 75, .45);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* the ✦ marker span inside each item */
.page-id-27 .page-container .story-page ul.list-unstyled li .greentext {
  color: var(--gold) !important;
  font-size: .85rem !important;
  margin-top: .35em;
}

.page-id-27 .page-container .story-page ul.list-unstyled li strong {
  color: var(--g);
  font-weight: 600;
}

.page-id-27 .page-container .story-page ul.list-unstyled li div {
  line-height: 1.65;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {

  /* Bootstrap stacks the columns; tighten the rhythm */
  .page-id-27 .page-container .story-page h2 {
    font-size: 1.55rem !important;
  }

  .page-id-27 .page-container .story-page p.lede {
    font-size: 1.05rem;
  }

  /* stat boxes: allow wrapping instead of squeezing three-up */
  .page-id-27 .page-container .story-page .author__stats {
    flex-wrap: wrap;
  }

  .page-id-27 .page-container .story-page .statbox {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 130px;
  }
}

/* ============================================================
   7. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .page-id-27 .page-container *,
  .page-id-27 .page-container *::before,
  .page-id-27 .page-container *::after {
    transition: none !important;
  }

  .page-id-27 .page-container .story-page .statbox:hover,
  .page-id-27 .page-container .story-page ul.list-unstyled li:hover,
  .page-id-27 .page-container .story-page .position-relative:hover img {
    transform: none !important;
  }
}

/* ============================================================
   DIRA — MY ACCOUNT PAGE
   ------------------------------------------------------------
   Parent scope: .woocommerce-account — the permanent body
   class WooCommerce adds on every account view (login,
   register, dashboard, orders, addresses, edit account,
   lost password) — combined with .page-container, so nothing
   here affects any other page or component.

   Covers BOTH states:
   · Logged out → Login / Register cards side by side
   · Logged in  → account navigation + content, orders table,
     address boxes, edit-account form

   Theme tokens:
   deep green #0C3527 · forest #0F4030 · gold #C9A24B
   ivory #FBF7EF · sand #F3EBDD · ink #26251F
   Fraunces (display) · DM Sans (body) · Jost (labels)
   ============================================================ */

.woocommerce-account .page-container {
  --g: #0C3527;
  --g-dark: #07231A;
  --g-soft: #0F4030;
  --gold: #C9A24B;
  --gold-soft: #E3C98A;
  --ivory: #FBF7EF;
  --sand: #F3EBDD;
  --ink: #26251F;
  --body-c: #55503F;
  --muted: #8A8578;
  --line: #E7E0D2;
  --r: 16px;
  --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
  --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

  background: var(--ivory);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: 0;
}



.woocommerce-account .page-container .woocommerce-notices-wrapper:empty {
  display: none;
}

/* notices (login errors, "password sent", etc.) */
.woocommerce-account .page-container .woocommerce-message,
.woocommerce-account .page-container .woocommerce-info,
.woocommerce-account .page-container .woocommerce-error {
  margin: 0 auto 28px !important;
  max-width: 920px;
  padding: 16px 22px !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  font-size: .95rem;
  box-shadow: var(--shadow-sm);
  list-style: none;
}

.woocommerce-account .page-container .woocommerce-error {
  border-left-color: #B4443C !important;
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

.woocommerce-account .page-container .entry-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(180px, 22vw, 250px);
  margin: 0 0 clamp(40px, 6vw, 60px) !important;
  padding: clamp(40px, 6vw, 64px) 24px !important;
  border-radius: 18px;
  text-align: center;

  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
}

.page-id-9.logged-in.woocommerce-account .woocommerce {
  grid-template-columns: repeat(2, minmax(0px, 1fr));
}

.woocommerce-account .page-container .entry-header .eyebrow {
  display: block;
  margin: 0 !important;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: var(--gold-soft) !important;
}

.woocommerce-account .page-container .entry-header .entry-title {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(2rem, 4.5vw, 3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: .01em;
  color: var(--ivory) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.woocommerce-account .page-container .entry-header .entry-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: .85;
}

/* ============================================================
   2. LOGIN / REGISTER — two equal cards
   Replaces WooCommerce's float-based col2-set with a grid.
   ============================================================ */

.woocommerce-account .page-container #customer_login.col2-set {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  max-width: 920px;
  margin-inline: auto;
  width: 100%;
}

.woocommerce-account .page-container #customer_login.col2-set::before,
.woocommerce-account .page-container #customer_login.col2-set::after {
  content: none !important;
  /* kill WooCommerce clearfix */
}

.woocommerce-account .page-container #customer_login .col-1,
.woocommerce-account .page-container #customer_login .col-2 {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(24px, 3.2vw, 40px);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

/* the Register card gets a quieter, inverted-accent look */
.woocommerce-account .page-container #customer_login .col-2 {
  background: var(--ivory);
  border-top-color: var(--g);
}

/* section headings */
.woocommerce-account .page-container #customer_login h2 {
  margin: 0 0 20px !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.5rem !important;
  color: var(--g) !important;
  display: flex;
  align-items: center;
  gap: 14px;
}

.woocommerce-account .page-container #customer_login h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 162, 75, .5), rgba(201, 162, 75, 0));
}

/* forms fill the card so buttons align at the bottom */
.woocommerce-account .page-container #customer_login form {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ---- labels + inputs ------------------------------------- */

.woocommerce-account .page-container #customer_login .form-row label {
  display: block;
  margin-bottom: 7px;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.woocommerce-account .page-container #customer_login .form-row .required {
  color: var(--gold);
}

.woocommerce-account .page-container #customer_login .input-text {
  width: 100%;
  padding: 13px 15px !important;
  background: var(--ivory) !important;
  border: 1px solid #D8CFBB !important;
  border-radius: 10px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: .95rem !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* register card sits on ivory, so its inputs go white */
.woocommerce-account .page-container #customer_login .col-2 .input-text {
  background: #fff !important;
}

.woocommerce-account .page-container #customer_login .input-text:hover {
  border-color: var(--gold) !important;
}

.woocommerce-account .page-container #customer_login .input-text:focus {
  outline: none !important;
  background: #fff !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .22) !important;
}

.woocommerce-account .page-container #customer_login .form-row {
  margin: 0 0 16px !important;
  padding: 0 !important;
}

/* ---- remember me + submit row ----------------------------- */

.woocommerce-account .page-container #customer_login .woocommerce-form-login__rememberme {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px !important;
  font-size: .9rem;
  color: var(--body-c);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-family: "DM Sans", sans-serif;
}

.woocommerce-account .page-container #customer_login input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--g);
  cursor: pointer;
}

/* submit buttons — pinned to the card bottom */
.woocommerce-account .page-container #customer_login button[type="submit"] {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 14px 24px !important;
  background: var(--g) !important;
  color: #FDFBF6 !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: "Jost", "DM Sans", sans-serif !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(12, 53, 39, .18);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.woocommerce-account .page-container #customer_login button[type="submit"]:hover {
  background: var(--gold) !important;
  color: var(--g-dark) !important;
  box-shadow: 0 10px 24px rgba(201, 162, 75, .36);
  transform: translateY(-1px);
}

.woocommerce-account .page-container #customer_login button[type="submit"]:active {
  transform: translateY(0);
}

.woocommerce-account .page-container #customer_login button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .45);
}

/* keep the submit's wrapping <p> from shrinking oddly */
.woocommerce-account .page-container #customer_login form>p:has(button[type="submit"]) {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

/* ---- lost password + helper texts ------------------------- */

.woocommerce-account .page-container #customer_login .lost_password {
  margin: 14px 0 0 !important;
  text-align: center;
  font-size: .88rem;
}

.woocommerce-account .page-container #customer_login .lost_password a {
  color: var(--g);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 75, .55);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}

.woocommerce-account .page-container #customer_login .lost_password a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* register helper + privacy text */
.woocommerce-account .page-container #customer_login .col-2>form>p:not(.form-row) {
  margin: 0 0 14px;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--body-c);
}

.woocommerce-account .page-container #customer_login .woocommerce-privacy-policy-text p {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: rgba(201, 162, 75, .07);
  border: 1px solid rgba(201, 162, 75, .22);
  border-radius: 8px;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--muted);
}

.woocommerce-account .page-container #customer_login .woocommerce-privacy-policy-link {
  color: var(--g);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 75, .55);
}

.woocommerce-account .page-container #customer_login .woocommerce-privacy-policy-link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* show/hide password eye that WooCommerce injects */
.woocommerce-account .page-container .show-password-input {
  top: 50% !important;
  transform: translateY(-50%);
  right: 12px;
  color: var(--muted);
}

.woocommerce-account .page-container .password-input {
  display: block;
  position: relative;
  width: 100%;
}

/* ============================================================
   3. LOGGED-IN DASHBOARD — navigation + content
   (Same page after login; standard WooCommerce markup.)
   ============================================================ */

.woocommerce-account .page-container .woocommerce-MyAccount-navigation {
  float: left;
  width: 240px;
}

.woocommerce-account .page-container .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}

.woocommerce-account .page-container .woocommerce-MyAccount-navigation li {
  margin: 2px 0;
}

.woocommerce-account .page-container .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 16px;
  border-radius: 9px;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--body-c);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.woocommerce-account .page-container .woocommerce-MyAccount-navigation li a:hover {
  background: var(--ivory);
  color: var(--g);
}

.woocommerce-account .page-container .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--g);
  color: var(--gold-soft);
}

.woocommerce-account .page-container .woocommerce-MyAccount-content {
  float: right;
  width: calc(100% - 272px);
  padding: clamp(24px, 3vw, 36px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  font-size: .98rem;
  line-height: 1.7;
  color: var(--body-c);
}

.woocommerce-account .page-container .woocommerce-MyAccount-content a {
  color: var(--g);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 75, .55);
}

.woocommerce-account .page-container .woocommerce-MyAccount-content a.button {
  border-bottom: 0;
}

.woocommerce-account .page-container .woocommerce-MyAccount-content h2,
.woocommerce-account .page-container .woocommerce-MyAccount-content h3 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  color: var(--g) !important;
}

/* orders table */
.woocommerce-account .page-container .woocommerce-orders-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  overflow: hidden;
}

.woocommerce-account .page-container .woocommerce-orders-table th {
  padding: 12px 14px !important;
  background: var(--ivory) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  font-family: "Jost", sans-serif;
  font-size: .72rem;
  font-weight: 500 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

.woocommerce-account .page-container .woocommerce-orders-table td {
  padding: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: #fff !important;
}

.woocommerce-account .page-container .woocommerce-orders-table tr:last-child td {
  border-bottom: 0 !important;
}

/* buttons inside the dashboard (View order, Add address…) */
.woocommerce-account .page-container .woocommerce-MyAccount-content .button {
  display: inline-block;
  padding: 10px 20px !important;
  background: var(--g) !important;
  color: #FDFBF6 !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-family: "Jost", sans-serif !important;
  font-size: .74rem !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.woocommerce-account .page-container .woocommerce-MyAccount-content .button:hover {
  background: var(--gold) !important;
  color: var(--g-dark) !important;
}

/* address boxes */
.woocommerce-account .page-container .woocommerce-Addresses .woocommerce-Address {
  padding: 20px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* edit-account / address form fields reuse the login styling */
.woocommerce-account .page-container .woocommerce-MyAccount-content .input-text,
.woocommerce-account .page-container .woocommerce-MyAccount-content select {
  width: 100%;
  padding: 12px 14px !important;
  background: var(--ivory) !important;
  border: 1px solid #D8CFBB !important;
  border-radius: 10px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: .95rem !important;
  color: var(--ink) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.woocommerce-account .page-container .woocommerce-MyAccount-content .input-text:focus,
.woocommerce-account .page-container .woocommerce-MyAccount-content select:focus {
  outline: none !important;
  background: #fff !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .22) !important;
}

.woocommerce-account .page-container .woocommerce-MyAccount-content label {
  display: block;
  margin-bottom: 6px;
  font-family: "Jost", sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   4. RESPONSIVE
   ============================================================ */

@media (max-width: 820px) {
  .woocommerce-account .page-container #customer_login.col2-set {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .woocommerce-account .page-container .woocommerce-MyAccount-navigation,
  .woocommerce-account .page-container .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
  }

  .woocommerce-account .page-container .woocommerce-MyAccount-navigation {
    margin-bottom: 20px;
  }

  .woocommerce-account .page-container .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .woocommerce-account .page-container .woocommerce-MyAccount-navigation li {
    margin: 0;
  }
}

@media (max-width: 640px) {

  .woocommerce-account .page-container #customer_login .col-1,
  .woocommerce-account .page-container #customer_login .col-2 {
    padding: 22px 18px;
  }
}

/* ============================================================
   5. MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .woocommerce-account .page-container *,
  .woocommerce-account .page-container *::before,
  .woocommerce-account .page-container *::after {
    transition: none !important;
  }

  .woocommerce-account .page-container #customer_login button[type="submit"]:hover {
    transform: none !important;
  }
}

/* ============================================================
   FAQ Hero
   ============================================================ */
.page-id-334 .page-container {
  --g: #0C3527;
  --g-dark: #07231A;
  --g-soft: #0F4030;
  --gold: #C9A24B;
  --gold-soft: #E3C98A;
  --ivory: #FBF7EF;
  --sand: #F3EBDD;
  --ink: #26251F;
  --body-c: #55503F;
  --muted: #8A8578;
  --line: #E7E0D2;
  --r: 16px;
  --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
  --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

  background: var(--ivory);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: 0;
}



/* footer links to #atelier land below the sticky header */
.page-id-334 .page-container [id] {
  scroll-margin-top: 120px;
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

.page-id-334 .page-container .entry-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(200px, 26vw, 288px);
  margin: 0 0 clamp(40px, 6vw, 72px) !important;
  padding: clamp(44px, 7vw, 72px) 24px !important;
  border-radius: 18px;
  text-align: center;
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-334 .page-container .entry-header .eyebrow {
  display: block;
  margin: 0 !important;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: var(--gold-soft) !important;
}

.page-id-334 .page-container .entry-header .entry-title {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: .01em;
  color: var(--ivory) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-334 .page-container .entry-header .entry-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: .85;
}

/* ============================================================
   Shipping Policy Hero
   ============================================================ */
.page-id-318 .page-container {
  --g: #0C3527;
  --g-dark: #07231A;
  --g-soft: #0F4030;
  --gold: #C9A24B;
  --gold-soft: #E3C98A;
  --ivory: #FBF7EF;
  --sand: #F3EBDD;
  --ink: #26251F;
  --body-c: #55503F;
  --muted: #8A8578;
  --line: #E7E0D2;
  --r: 16px;
  --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
  --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

  background: var(--ivory);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: 0;
}



/* footer links to #atelier land below the sticky header */
.page-id-318 .page-container [id] {
  scroll-margin-top: 120px;
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

.page-id-318 .page-container .entry-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(200px, 26vw, 288px);
  margin: 0 0 clamp(40px, 6vw, 72px) !important;
  padding: clamp(44px, 7vw, 72px) 24px !important;
  border-radius: 18px;
  text-align: center;
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-318 .page-container .entry-header .eyebrow {
  display: block;
  margin: 0 !important;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: var(--gold-soft) !important;
}

.page-id-318 .page-container .entry-header .entry-title {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: .01em;
  color: var(--ivory) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-318 .page-container .entry-header .entry-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: .85;
}

/* ============================================================
   Exchange & Return Policy Hero
   ============================================================ */
.page-id-10 .page-container {
  --g: #0C3527;
  --g-dark: #07231A;
  --g-soft: #0F4030;
  --gold: #C9A24B;
  --gold-soft: #E3C98A;
  --ivory: #FBF7EF;
  --sand: #F3EBDD;
  --ink: #26251F;
  --body-c: #55503F;
  --muted: #8A8578;
  --line: #E7E0D2;
  --r: 16px;
  --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
  --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

  background: var(--ivory);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: 0;
}



/* footer links to #atelier land below the sticky header */
.page-id-10 .page-container [id] {
  scroll-margin-top: 120px;
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

.page-id-10 .page-container .entry-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(200px, 26vw, 288px);
  margin: 0 0 clamp(40px, 6vw, 72px) !important;
  padding: clamp(44px, 7vw, 72px) 24px !important;
  border-radius: 18px;
  text-align: center;
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-10 .page-container .entry-header .eyebrow {
  display: block;
  margin: 0 !important;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: var(--gold-soft) !important;
}

.page-id-10 .page-container .entry-header .entry-title {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: .01em;
  color: var(--ivory) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-10 .page-container .entry-header .entry-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: .85;
}

/* ============================================================
   Contact Us Policy Hero
   ============================================================ */
.page-id-324 .page-container {
  --g: #0C3527;
  --g-dark: #07231A;
  --g-soft: #0F4030;
  --gold: #C9A24B;
  --gold-soft: #E3C98A;
  --ivory: #FBF7EF;
  --sand: #F3EBDD;
  --ink: #26251F;
  --body-c: #55503F;
  --muted: #8A8578;
  --line: #E7E0D2;
  --r: 16px;
  --shadow-sm: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .06);
  --shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .12);

  background: var(--ivory);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: 0;
}



/* footer links to #atelier land below the sticky header */
.page-id-324 .page-container [id] {
  scroll-margin-top: 120px;
}

/* ============================================================
   1. PAGE BANNER — matches the other pages' hero
   ============================================================ */

.page-id-324 .page-container .entry-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(200px, 26vw, 288px);
  margin: 0 0 clamp(40px, 6vw, 72px) !important;
  padding: clamp(44px, 7vw, 72px) 24px !important;
  border-radius: 18px;
  text-align: center;
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.page-id-324 .page-container .entry-header .eyebrow {
  display: block;
  margin: 0 !important;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: var(--gold-soft) !important;
}

.page-id-324 .page-container .entry-header .entry-title {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: .01em;
  color: var(--ivory) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.page-id-324 .page-container .entry-header .entry-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: .85;
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
  display: none !important;
}

.wc-block-checkout__create-account label,
.wc-block-checkout__use-address-for-billing label,
.wc-block-checkout__add-note label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.6rem !important;
  cursor: pointer !important;
  text-transform: none !important;
  font-family: var(--sans) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: var(--ink) !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.4 !important;
  position: relative !important;
  width: auto !important;
}

.wc-block-components-checkbox label span,
.wc-block-components-checkbox__label span,
.wc-block-components-checkbox__text,
.wc-block-checkout__create-account span,
.wc-block-checkout__use-address-for-billing span,
.wc-block-checkout__add-note span {
  display: inline-block !important;
  text-transform: none !important;
  font-family: var(--sans) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  color: var(--navy) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wc-block-checkout__create-account,
.wc-block-checkout__use-address-for-billing,
.wc-block-checkout__add-note {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
.wc-block-components-checkbox input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input.input-checkbox {
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  accent-color: var(--gold-deep, #a87e33) !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  border-radius: 4px !important;
  display: inline-block !important;
  opacity: 1 !important;
  position: static !important;
  visibility: visible !important;
}

/* ============================================================
   DIRA — OUR STORY STYLES (v2)
   Scoped entirely to .founder-story-page.
   Rich brand-color design: deep-green and gold panels
   alternating with ivory narrative — the homepage's rhythm.
   ============================================================ */

.founder-story-page {
  --fs-g: #0C3527;
  --fs-g-dark: #07231A;
  --fs-g-soft: #0F4030;
  --fs-gold: #C9A24B;
  --fs-gold-soft: #E3C98A;
  --fs-gold-pale: #F0DDB2;
  --fs-ivory: #FBF7EF;
  --fs-cream: #FDFBF6;
  --fs-sand: #F3EBDD;
  --fs-ink: #26251F;
  --fs-body: #55503F;
  --fs-muted: #8A8578;
  --fs-line: #E7E0D2;
  --fs-r: 16px;
  --fs-shadow: 0 1px 2px rgba(12, 53, 39, .05), 0 8px 24px rgba(12, 53, 39, .07);
  --fs-shadow-md: 0 2px 4px rgba(12, 53, 39, .06), 0 20px 44px rgba(12, 53, 39, .14);

  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}

.founder-story-page p {
  margin: 0 0 1.15em;
}

/* ------------------------------------------------------------
   shared type roles
   ------------------------------------------------------------ */

.founder-story-page .fs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fs-gold);
}

.founder-story-page .fs-eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(201, 162, 75, .5);
}

.founder-story-page .fs-eyebrow--center {
  gap: 0;
  text-indent: .3em;
}

.founder-story-page .fs-eyebrow--center::after {
  display: none;
}

.founder-story-page .fs-heading {
  margin: 0 0 18px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.55rem, 2.9vw, 2.05rem);
  line-height: 1.2;
  color: var(--fs-g);
}

.founder-story-page .fs-heading--center {
  text-align: center;
}

.founder-story-page .fs-heading--ruled::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--fs-gold) 25%, var(--fs-gold) 75%, transparent);
}

.founder-story-page .fs-lede {
  font-size: 1.14rem;
  line-height: 1.75;
  color: var(--fs-ink);
}

/* gold Fraunces drop cap on the story's first line */
.founder-story-page .fs-dropcap::first-letter {
  float: left;
  font-family: "Fraunces", Georgia, serif;
  font-size: 3.4em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--fs-gold);
}

/* short, emotional one-liners */
.founder-story-page .fs-beat {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.14rem;
  color: var(--fs-g);
}

/* ------------------------------------------------------------
   1. intro
   ------------------------------------------------------------ */

.founder-story-page .fs-intro {
  max-width: 760px;
  margin: 0 auto clamp(48px, 7vw, 76px);
  text-align: center;
}

.founder-story-page .fs-display {
  margin: 0 0 16px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.12;
  color: var(--fs-g);
}

.founder-story-page .fs-sub {
  max-width: 56ch;
  margin: 0 auto 18px;
  font-size: 1.08rem;
  color: var(--fs-body);
}

.founder-story-page .fs-ornament {
  display: inline-block;
  font-size: .85rem;
  color: var(--fs-gold);
}

/* ------------------------------------------------------------
   2 / 7. ivory narrative sections
   ------------------------------------------------------------ */

.founder-story-page .fs-narrative {
  max-width: 90%;
  margin: 0 auto clamp(48px, 7vw, 76px);
}

.founder-story-page .fs-narrative img {
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
  height: 440px;
  border-radius: 20px;
  object-position: top;
}

/* gold accent beside each narrative heading */
.founder-story-page .fs-narrative .fs-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

.founder-story-page .fs-narrative .fs-heading::before {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--fs-gold);
  flex: 0 0 auto;
}

/* ------------------------------------------------------------
   3. belief — deep-green panel with gold quote
   ------------------------------------------------------------ */

.founder-story-page .fs-belief {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin: 0 0 0;
  padding: clamp(36px, 5.5vw, 64px) clamp(24px, 5vw, 72px);
  border-radius: var(--fs-r) var(--fs-r) 0 0;
  color: rgba(251, 247, 239, .86);

  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  box-shadow: var(--fs-shadow), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.founder-story-page .fs-belief__heading {
  margin: 0 0 14px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.55rem, 2.9vw, 2.05rem);
  line-height: 1.2;
  color: var(--fs-cream);
}

.founder-story-page .fs-belief__intro {
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fs-gold-soft);
}

.founder-story-page .fs-belief__quote {
  margin: 0 0 1.3em;
  padding: 0;
  border: 0;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  line-height: 1.35;
  color: var(--fs-gold-pale);
  max-width: 100%;
  text-align: center;
  margin: auto;
  margin-bottom: 20px;
}

.founder-story-page .fs-belief p:not(.fs-belief__intro) {
  max-width: 84ch;
  margin: auto;
  justify-content: center;
  text-align: center;
  display: flex;
}

/* ------------------------------------------------------------
   4. values — solid gold band (fused to the panel above)
   ------------------------------------------------------------ */

.founder-story-page .fs-values {
  margin: 0 0 clamp(48px, 7vw, 76px);
  padding: clamp(22px, 3vw, 32px) 24px;
  text-align: center;
  border-radius: 0 0 var(--fs-r) var(--fs-r);
  background: linear-gradient(180deg, var(--fs-gold-soft) 0%, var(--fs-gold) 100%);
  box-shadow: var(--fs-shadow);
}

.founder-story-page .fs-values__words {
  margin: 0 0 6px;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: clamp(.92rem, 1.9vw, 1.1rem);
  font-weight: 600;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--fs-g-dark);
}

.founder-story-page .fs-values__words span {
  color: rgba(7, 35, 26, .55);
}

.founder-story-page .fs-values__caption {
  margin: 0;
  font-size: .9rem;
  color: rgba(7, 35, 26, .7);
}

/* ------------------------------------------------------------
   5. founder — sand card with inset gold keyline
   ------------------------------------------------------------ */

.founder-story-page .fs-founder {
  position: relative;
  max-width: 840px;
  margin: 0 auto clamp(48px, 7vw, 76px);
  padding: clamp(32px, 4.5vw, 56px) clamp(24px, 4.5vw, 64px);
  text-align: center;
  background: var(--fs-sand);
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r);
  box-shadow: var(--fs-shadow);
}

.founder-story-page .fs-founder::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 162, 75, .45);
  border-radius: calc(var(--fs-r) - 6px);
  pointer-events: none;
}

.founder-story-page .fs-founder p:not(.fs-eyebrow):not(.fs-signature) {
  max-width: 60ch;
  margin-inline: auto;
  text-align: left;
}

.founder-story-page .fs-founder .fs-lede {
  text-align: center !important;
}

.founder-story-page .fs-signature {
  margin: 22px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.08rem;
  color: var(--fs-g);
}

.founder-story-page .fs-signature::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin: 0 auto 14px;
  background: rgba(201, 162, 75, .55);
}

/* ------------------------------------------------------------
   6. philosophy — numbered pillars (homepage "01/02/03" motif)
   ------------------------------------------------------------ */

.founder-story-page .fs-block {
  margin: 0 0 clamp(48px, 7vw, 76px);
}

.founder-story-page .fs-block .fs-heading--center {
  margin-bottom: 30px;
}

.founder-story-page .fs-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.founder-story-page .fs-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.founder-story-page .fs-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.founder-story-page .fs-pillar {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
  background: #fff;
  border: 1px solid var(--fs-line);
  border-top: 3px solid var(--fs-gold);
  border-radius: var(--fs-r);
  box-shadow: var(--fs-shadow);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease, border-color .28s ease;
}

.founder-story-page .fs-pillar:hover {
  transform: translateY(-5px);
  box-shadow: var(--fs-shadow-md);
  border-color: rgba(201, 162, 75, .5);
  border-top-color: var(--fs-gold);
}

.founder-story-page .fs-pillar__num {
  display: block;
  margin-bottom: 10px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 2rem;
  line-height: 1;
  color: var(--fs-gold);
}

.founder-story-page .fs-pillar__title {
  margin: 0 0 10px;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--fs-g);
}

.founder-story-page .fs-pillar p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
}

/* ------------------------------------------------------------
   8. details — deep-green cards with gold titles
   ------------------------------------------------------------ */

.founder-story-page .fs-detail {
  padding: clamp(24px, 3vw, 30px);
  border-radius: var(--fs-r);
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  border: 1px solid rgba(227, 201, 138, .22);
  box-shadow: var(--fs-shadow);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease, border-color .28s ease;
}

.founder-story-page .fs-detail:hover {
  transform: translateY(-5px);
  box-shadow: var(--fs-shadow-md);
  border-color: rgba(227, 201, 138, .5);
}

.founder-story-page .fs-detail__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--fs-gold-soft);
}

.founder-story-page .fs-detail__title::before {
  content: "✦";
  font-size: .68rem;
  color: var(--fs-gold);
  flex: 0 0 auto;
}

.founder-story-page .fs-detail p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.7;
  color: rgba(251, 247, 239, .82);
}

/* ------------------------------------------------------------
   9. statement — full green band, banner-style pattern
   ------------------------------------------------------------ */

.founder-story-page .fs-statement {
  position: relative;
  overflow: hidden;
  margin: 0 0 clamp(48px, 7vw, 76px);
  padding: clamp(44px, 6.5vw, 80px) clamp(24px, 4vw, 56px);
  text-align: center;
  border-radius: 18px;
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  box-shadow: var(--fs-shadow), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.founder-story-page .fs-statement__title {
  margin: 0 0 16px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.22;
  color: var(--fs-cream);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .25);
}

.founder-story-page .fs-statement p {
  max-width: 60ch;
  margin: 0 auto;
  color: rgba(251, 247, 239, .85);
  font-size: 1.04rem;
}

/* ------------------------------------------------------------
   10. closing
   ------------------------------------------------------------ */

.founder-story-page .fs-closing {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.founder-story-page .fs-thanks {
  margin-top: 8px;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--fs-g);
}

.founder-story-page .fs-thanks::before {
  content: "✦";
  display: block;
  margin-bottom: 12px;
  font-style: normal;
  font-size: .8rem;
  color: var(--fs-gold);
}

/* ------------------------------------------------------------
   responsive
   ------------------------------------------------------------ */

@media (max-width: 991px) {
  .founder-story-page .fs-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .founder-story-page .fs-grid--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .founder-story-page {
    font-size: .98rem;
  }

  .founder-story-page .fs-grid--4 {
    grid-template-columns: 1fr;
  }

  .founder-story-page .fs-lede {
    font-size: 1.06rem;
  }

  .founder-story-page .fs-dropcap::first-letter {
    font-size: 3em;
  }

  .founder-story-page .fs-narrative .fs-heading::before {
    width: 22px;
  }
}

/* ------------------------------------------------------------
   motion preferences
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .founder-story-page .fs-pillar,
  .founder-story-page .fs-detail {
    transition: none;
  }

  .founder-story-page .fs-pillar:hover,
  .founder-story-page .fs-detail:hover {
    transform: none;
  }
}

.pattern .products .product .star-rating {
  margin-left: 20px;
  color: #f5c160;
}

/* ==========================================================================
   DIRA — Checkout (WooCommerce Blocks)
   ==========================================================================

   CSS only. No markup, JS, hooks or settings are touched.

   Everything is scoped to `.woocommerce-checkout` (the body class WordPress
   adds on this page) and to `.wc-block-checkout`, so nothing here can reach
   the shop, product, cart or account templates.

   Tokens match the product page work (--dpdp-*): same forest green, gold,
   ivory, hairline and the Fraunces / Jost pairing. They are re-declared here
   under a --dco- prefix so the two stylesheets stay independent.

   WooCommerce Blocks ships fairly heavy selectors — some carry `!important`
   and several are three classes deep. Selectors below are written long-hand
   to win the cascade on purpose, not out of habit.
   ========================================================================== */

/* Tokens live on <body> so the page heading — which sits above the checkout
   block — can use them too. Custom properties inherit; nothing else here is
   applied at body level. */
body.woocommerce-checkout {
  --dco-forest: #0c3527;
  --dco-forest-soft: #1c4a39;
  --dco-gold: #b0842b;
  --dco-gold-soft: #d9a93f;
  --dco-ivory: #fdfaf1;
  --dco-paper: #ffffff;
  --dco-line: #e2dac9;
  --dco-line-soft: #efe9dc;
  --dco-body: #4b4a44;
  --dco-muted: #857f72;
  --dco-error: #9c3b2e;
  --dco-success: #2f6f4f;

  --dco-display: "Fraunces", "Playfair Display", Georgia, serif;
  --dco-sans: "Jost", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --dco-radius: 4px;
  --dco-card-pad: clamp(18px, 2.4vw, 28px);

  /* Clearance for the sticky site header. Raise this if your header is
	   taller than ~72px; it only affects the sticky order summary. */
  --dco-sticky-top: 96px;
}

/* --------------------------------------------------------------------------
   1. Conflict resets

   Bootstrap 5.3 is loaded site-wide and its Reboot layer reaches into the
   checkout: list padding, floated legends and heading margins all land on
   block markup that never expected them. These undo the damage inside the
   checkout only.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wc-block-checkout ul,
.woocommerce-checkout .wc-block-checkout ol {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.woocommerce-checkout .wc-block-checkout legend {
  float: none;
  width: auto;
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  line-height: 1.4;
}

.woocommerce-checkout .wc-block-checkout fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.woocommerce-checkout .wc-block-checkout h1,
.woocommerce-checkout .wc-block-checkout h2,
.woocommerce-checkout .wc-block-checkout h3,
.woocommerce-checkout .wc-block-checkout h4,
.woocommerce-checkout .wc-block-checkout h5,
.woocommerce-checkout .wc-block-checkout h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
}

.woocommerce-checkout .wc-block-checkout p {
  margin-top: 0;
}

.woocommerce-checkout .wc-block-checkout img,
.woocommerce-checkout .wc-block-checkout svg {
  vertical-align: initial;
  max-width: 100%;
}

/* Theme and Bootstrap both style bare form controls. Block markup relies on
   its own sizing, so neutralise inherited control styling up front. */
.woocommerce-checkout .wc-block-checkout input,
.woocommerce-checkout .wc-block-checkout select,
.woocommerce-checkout .wc-block-checkout textarea,
.woocommerce-checkout .wc-block-checkout button {
  font-family: var(--dco-sans);
  box-shadow: none;
}

.woocommerce-checkout .wc-block-checkout *,
.woocommerce-checkout .wc-block-checkout *::before,
.woocommerce-checkout .wc-block-checkout *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Page shell
   -------------------------------------------------------------------------- */
.woocommerce-checkout .entry-header {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.woocommerce-checkout .entry-header .entry-title {
  font-family: var(--dco-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0c3527;
}

.woocommerce-checkout .wp-block-woocommerce-checkout {
  max-width: 1180px;
  margin-inline: auto;
  padding-top: 0;
  font-family: var(--dco-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--dco-body);
  margin-top: 20px !important;
}

.wp-block-woocommerce-checkout-order-summary-block {
  border: none !important;
}

/* alignwide has no meaning in a classic theme — stop it forcing odd widths. */
.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide {
  width: 100%;
  max-width: 1180px;
}

/* --------------------------------------------------------------------------
   3. Two column layout

   WooCommerce drives this with container queries against
   `.wp-block-woocommerce-checkout` (container-type: inline-size). These rules
   mirror the same 700px breakpoint so the two never disagree — using a plain
   media query here would fight the block's own layout at narrow widths.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout {
  margin: 0 auto;
  align-items: flex-start;
}

/* Only the main column carries the gutter. The sidebar's padding belongs to
   its card (section 10) — setting padding here too would cancel it, since
   these selectors are heavier than the card rule. */
@container (min-width: 700px) {
  .woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
    width: 61%;
    padding-right: clamp(24px, 3.5%, 44px);
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    width: 39%;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar.is-sticky {
    top: var(--dco-sticky-top);
  }
}

@container (max-width: 699px) {
  .woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
    width: 100%;
    padding-right: 0;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    width: 100%;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar {
    margin-bottom: 20px;
  }
}

/* --------------------------------------------------------------------------
   4. Steps as cards
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-checkout-step,
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step {
  margin: 0 0 18px;
  padding: var(--dco-card-pad);
  border: 1px solid var(--dco-line);
  border-radius: var(--dco-radius);
  background: var(--dco-paper);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step--disabled {
  opacity: 0.55;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__heading,
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__heading-container {
  margin-top: 0;
  margin-bottom: 14px;
  gap: 4px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__title,
.woocommerce-checkout .wc-block-checkout .wc-block-components-title.wc-block-components-checkout-step__title {
  margin: 0 12px 0 0;
  font-family: var(--dco-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--dco-forest);
  text-transform: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__heading-content {
  font-size: 13px;
  color: var(--dco-muted);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__heading-content a,
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__description a {
  font-weight: 500;
  color: var(--dco-forest);
  text-underline-offset: 3px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__description {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dco-muted);
}

/* Optional "step numbers" mode: keep the counter, drop the rail and the
   negative offsets that would hang outside the card. */
.woocommerce-checkout .wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number {
  padding: var(--dco-card-pad);
}

.woocommerce-checkout .wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
  position: static;
  left: auto;
  top: auto;
  margin-right: 8px;
  transform: none;
  color: var(--dco-gold);
}

.woocommerce-checkout .wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content::before,
.woocommerce-checkout .wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__description::before {
  content: none;
}

/* --------------------------------------------------------------------------
   5. Text inputs, selects, textarea

   The floating label is absolutely positioned against the input, so height,
   padding and label offsets have to move together or the label drifts.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input,
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select {}

.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type="text"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type="email"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type="tel"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type="url"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type="number"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type="password"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="text"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="email"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="tel"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="url"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="number"],
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="password"],
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
  height: 54px;
  padding: 20px 14px 6px;
  border: 1px solid var(--dco-line);
  border-radius: var(--dco-radius);
  background-color: var(--dco-paper);
  font-family: var(--dco-sans);
  font-size: 15px;
  line-height: 22px;
  color: var(--dco-forest);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
  border: 1px solid var(--dco-forest);
  box-shadow: 0 0 0 3px rgba(12, 53, 39, 0.12);
  outline: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input label,
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input label,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__label {
  left: 14px;
  top: 27px;
  max-width: calc(100% - 30px);
  font-family: var(--dco-sans);
  font-size: 15px;
  line-height: 10px;
  color: var(--dco-muted);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input.is-active label,
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input.is-active label,
.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input:-webkit-autofill+label,
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input:-webkit-autofill+label,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select.is-active .wc-blocks-components-select__label {
  top: 15px;
  transform: scale(0.78);
  color: var(--dco-muted);
}

/* Custom chevron for the block select. */
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__expand {
  right: 14px;
  fill: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-textarea {
  min-height: 110px;
  padding: 14px;
  border: 1px solid var(--dco-line);
  border-radius: var(--dco-radius);
  background: var(--dco-paper);
  font-family: var(--dco-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--dco-forest);
  resize: vertical;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-textarea:focus {
  border-color: var(--dco-forest);
  box-shadow: 0 0 0 3px rgba(12, 53, 39, 0.12);
  outline: none;
}

/* Two-up address rows get a little more breathing room. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-address-form {
  gap: 0 16px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-address-form__address_2-toggle {
  margin-top: 10px;
  font-size: 14px;
  color: var(--dco-forest);
  text-underline-offset: 3px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-validation-error {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dco-error);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input.has-error input,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select.has-error .wc-blocks-components-select__select {
  border-color: var(--dco-error);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input.has-error input:focus,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select.has-error .wc-blocks-components-select__select:focus {
  box-shadow: 0 0 0 3px rgba(156, 59, 46, 0.14);
}

/* --------------------------------------------------------------------------
   6. Checkboxes
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox {
  font-size: 14px;
  line-height: 1.55;
  color: var(--dco-body);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1px solid var(--dco-line);
  border-radius: 3px;
  background-color: var(--dco-paper);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
  border-color: var(--dco-forest);
  background-color: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--dco-forest);
  outline-offset: 2px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark {
  fill: var(--dco-ivory);
}

/* --------------------------------------------------------------------------
   7. Radio controls — shipping methods, pickup, payment gateways
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The radio input is absolutely positioned at left:16px, so the 48px left
   gutter has to stay or the control lands on top of the label. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option {
  margin: 0;
  padding: 16px 16px 16px 48px;
  border: 1px solid var(--dco-line);
  border-radius: var(--dco-radius);
  background: var(--dco-paper);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option {
  margin: 0;
  border: 1px solid var(--dco-line);
  border-radius: var(--dco-radius);
  background: var(--dco-paper);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

/* WooCommerce draws a hairline between stacked options; each option is its
   own card here, so the divider is redundant. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after {
  display: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option:hover {
  border-color: var(--dco-forest-soft);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option-checked,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  border-color: var(--dco-forest);
  background: var(--dco-ivory);
}

/* WooCommerce marks the selected option with an inset currentColor ring;
   swap it for the brand green so it reads as a choice, not an outline. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
  border-radius: var(--dco-radius);
  box-shadow: inset 0 0 0 0.2px var(--dco-forest);
}

/* The control is an appearance:none input with a ::before dot — recolour
   both rather than replacing the mechanism. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
  border: 1px solid var(--dco-line);
  background: var(--dco-paper);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
  border: 1px solid var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
  background: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:focus {
  outline: 2px solid var(--dco-forest);
  outline-offset: 2px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__label,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__secondary-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__description,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__secondary-description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--dco-muted);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-content {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--dco-line-soft);
  font-size: 14px;
}

/* Shipping rate packages */
.woocommerce-checkout .wc-block-checkout .wc-block-components-shipping-rates-control__package {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-shipping-rates-control__package-title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-shipping-rates-control__no-results-notice,
.woocommerce-checkout .wc-block-checkout .wc-block-components-shipping-rates-control__no-shipping-address-message {
  font-size: 14px;
  color: var(--dco-muted);
}

.woocommerce-checkout .wc-block-checkout .wc-block-checkout__shipping-method-option {
  border: 1px solid var(--dco-line);
  border-radius: var(--dco-radius);
  background: var(--dco-paper);
}

.woocommerce-checkout .wc-block-checkout .wc-block-checkout__shipping-method-option--selected {
  border-color: var(--dco-forest);
  background: var(--dco-ivory);
  box-shadow: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-checkout__shipping-method-option-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--dco-forest);
}

/* --------------------------------------------------------------------------
   8. Payment methods + express payment
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-payment-methods .wc-block-components-radio-control__option {
  padding: 15px 16px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-payment-method-icons {
  margin-left: auto;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-payment-method-icons .wc-block-components-payment-method-icon {
  max-height: 24px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-gateway-container input {
  height: 54px;
  padding: 20px 14px 6px;
  border: 1px solid var(--dco-line);
  border-radius: var(--dco-radius);
  font-size: 15px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment {
  margin-bottom: 18px;
  padding: var(--dco-card-pad);
  border: 1px solid var(--dco-line);
  border-radius: var(--dco-radius);
  background: var(--dco-paper);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment__title {
  font-family: var(--dco-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment-continue-rule {
  margin: 20px 0;
  font-size: 13px;
  color: var(--dco-muted);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment-continue-rule::before,
.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment-continue-rule::after {
  background-color: var(--dco-line);
}

/* --------------------------------------------------------------------------
   9. Terms + actions
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wc-block-checkout .wc-block-checkout__terms {
  margin: 0 0 18px;
  padding: 16px var(--dco-card-pad);
  border: 1px solid var(--dco-line);
  border-radius: var(--dco-radius);
  background: var(--dco-ivory);
  font-size: 14px;
  line-height: 1.55;
}

.woocommerce-checkout .wc-block-checkout .wc-block-checkout__terms--with-separator {
  border-top: 1px solid var(--dco-line);
}

.woocommerce-checkout .wc-block-checkout .wc-block-checkout__terms a {
  color: var(--dco-forest);
  font-weight: 500;
  text-underline-offset: 3px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions {
  margin: 0;
  padding: 0;
}

.woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions_row {
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
}

/* Place order — the primary action on the page. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link) {
  flex: 1 1 240px;
  min-height: 56px;
  padding: 16px 30px;
  border: 1px solid var(--dco-forest);
  border-radius: var(--dco-radius);
  background-color: var(--dco-forest);
  color: var(--dco-ivory);
  font-family: var(--dco-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):hover {
  background-color: var(--dco-forest-soft);
  color: #ffffff;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):focus {
  box-shadow: 0 0 0 3px rgba(12, 53, 39, 0.25);
  outline: 2px solid transparent;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-place-order-button__separator {
  background: rgba(253, 250, 241, 0.35);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-return-to-cart-button {
  order: -1;
  color: var(--dco-muted);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--dco-line);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-return-to-cart-button:hover {
  color: var(--dco-forest);
  border-bottom-color: var(--dco-forest);
}

/* --------------------------------------------------------------------------
   10. Sidebar — order summary
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar {
  padding: var(--dco-card-pad);
  border: 1px solid var(--dco-line);
  border-radius: var(--dco-radius);
  background: var(--dco-paper);
  margin-top: 20px !important;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title,
.woocommerce-checkout .wc-block-checkout .wc-block-components-panel__button {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-family: var(--dco-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title-text,
.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary__button-text {
  font-family: var(--dco-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title-price {
  font-family: var(--dco-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-panel__button-icon {
  fill: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary__content {
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--dco-line-soft);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--dco-line-soft);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item:last-child {
  border-bottom: 0;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__image {
  margin-top: 0;
  width: 62px;
  min-width: 62px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__image img {
  width: 100%;
  height: auto;
  border: 1px solid var(--dco-line-soft);
  border-radius: var(--dco-radius);
  background: var(--dco-ivory);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__quantity {
  border: 1px solid var(--dco-line);
  border-radius: 999px;
  background: var(--dco-forest);
  color: var(--dco-ivory);
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__description {
  padding-left: 14px;
  padding-right: 0;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
  font-family: var(--dco-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-product-metadata,
.woocommerce-checkout .wc-block-checkout .wc-block-components-product-details {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dco-muted);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-product-details__name {
  font-weight: 500;
  color: var(--dco-body);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__total-price,
.woocommerce-checkout .wc-block-checkout .wc-block-components-product-price {
  font-family: var(--dco-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--dco-forest);
}

/* Coupon */
.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon {
  padding: 16px 0;
  border-top: 1px solid var(--dco-line-soft);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon-link,
.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
  font-family: var(--dco-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon__form {
  gap: 10px;
  margin-top: 12px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon__input {
  flex: 1 1 150px;
  margin-top: 0;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-button.wc-block-components-totals-coupon__button:not(.is-link) {
  flex: 0 0 auto;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid var(--dco-forest);
  border-radius: var(--dco-radius);
  background: transparent;
  color: var(--dco-forest);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-button.wc-block-components-totals-coupon__button:not(.is-link):hover {
  background: var(--dco-forest);
  color: var(--dco-ivory);
  opacity: 1;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-chip {
  border: 1px solid var(--dco-line);
  border-radius: 999px;
  background: var(--dco-ivory);
  color: var(--dco-forest);
  font-size: 13px;
}

/* Totals rows */
.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-wrapper {
  padding: 16px 0;
  border-top: 1px solid var(--dco-line-soft);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item {
  padding-left: 0;
  padding-right: 0;
  font-size: 14px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item__label {
  color: var(--dco-body);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item__value {
  font-weight: 500;
  color: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item__description {
  font-size: 12px;
  color: var(--dco-muted);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-shipping__via,
.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-shipping-address-summary {
  font-size: 13px;
  color: var(--dco-muted);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-shipping__change-address-button,
.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-shipping__change-address__link {
  color: var(--dco-forest);
  font-size: 13px;
  font-weight: 500;
  text-underline-offset: 3px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item {
  padding-top: 18px;
  border-top: 1px solid var(--dco-line);
  font-family: var(--dco-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--dco-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--dco-forest);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item-tax,
.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item-shipping {
  font-family: var(--dco-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--dco-muted);
}

/* --------------------------------------------------------------------------
   11. Notices
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wc-block-checkout .wc-block-components-notices {
  margin-bottom: 18px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-notice-banner {
  margin: 0 0 16px;
  border-radius: var(--dco-radius);
  font-family: var(--dco-sans);
  font-size: 14px;
  line-height: 1.55;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-notice-banner.is-error {
  border-color: var(--dco-error);
  background-color: #fbf1ef;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-notice-banner.is-success {
  border-color: var(--dco-success);
  background-color: #f0f5f2;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-notice-banner.is-info {
  border-color: var(--dco-line);
  background-color: var(--dco-ivory);
}

/* --------------------------------------------------------------------------
   12. Loading + skeleton states
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wc-block-checkout .wc-block-components-skeleton__element {
  border-radius: var(--dco-radius);
  background-color: var(--dco-line-soft);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-loading-mask::after {
  background-color: rgba(253, 250, 241, 0.7);
}

/* --------------------------------------------------------------------------
   13. Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {
  .woocommerce-checkout .wc-block-checkout {
    --dco-card-pad: 18px;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions_row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 16px;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link) {
    width: 100%;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-return-to-cart-button {
    align-self: center;
    border-bottom: 0;
    text-decoration: underline;
  }
}

@media (max-width: 560px) {
  .woocommerce-checkout .wc-block-checkout .wc-block-components-address-form {
    gap: 0;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__image {
    width: 52px;
    min-width: 52px;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon__form {
    flex-direction: column;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-button.wc-block-components-totals-coupon__button:not(.is-link) {
    width: 100%;
  }
}

/* iOS zooms any input under 16px on focus. Keep the visual size but stop the
   zoom by nudging the computed size up on touch-first widths. */
@media (max-width: 560px) {

  .woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input,
  .woocommerce-checkout .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
  .woocommerce-checkout .wc-block-checkout .wc-block-components-textarea {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   14. Focus + motion
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wc-block-checkout a:focus-visible,
.woocommerce-checkout .wc-block-checkout button:focus-visible,
.woocommerce-checkout .wc-block-checkout input:focus-visible,
.woocommerce-checkout .wc-block-checkout select:focus-visible,
.woocommerce-checkout .wc-block-checkout textarea:focus-visible {
  outline: 2px solid var(--dco-forest);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  .woocommerce-checkout .wc-block-checkout *,
  .woocommerce-checkout .wc-block-checkout *::before,
  .woocommerce-checkout .wc-block-checkout *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

.woocommerce-checkout .page-container {
  padding-top: 0;
}

.woocommerce-checkout .entry-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(200px, 26vw, 288px);
  margin: 0 0 clamp(40px, 6vw, 64px) !important;
  padding: clamp(44px, 7vw, 72px) 24px !important;
  border-radius: 18px;
  text-align: center;
  background: radial-gradient(120% 130% at 85% -10%, var(--green-2) 0%, #051f20e0 45%, #051f20 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.entry-header h1 {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: .01em;
  color: var(--ivory) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
}

.woocommerce-checkout .entry-header .eyebrow {
  display: block;
  margin: 0 !important;
  font-family: "Jost", "DM Sans", sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: #d6a049 !important;
}


.woocommerce-checkout .entry-header h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: .85;
}