/** Shopify CDN: Minification failed

Line 1596:0 Unexpected "}"

**/
/* Kenkou PDP — Thandai Stylesheet
   kenkou-th.css
   Upload to: Shopify Admin > Themes > Edit Code > Assets */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap");
:root {
 --ink: #06090d;
 --ink-soft: #0a0f14;
 --ink-mid: #080c10;
 --cream: #f0f6f4;
 --cream-dim: rgba(240, 246, 244, 0.65);
 --cream-faint: rgba(240, 246, 244, 0.3);
 --saffron: #d4922a;
 --saffron-lt: #e8aa42;
 --saffron-pale: rgba(212, 146, 42, 0.08);
 --saffron-bd: rgba(212, 146, 42, 0.22);
 --rose: #c4687a;
 --rose-pale: rgba(196, 104, 122, 0.08);
 --rose-bd: rgba(196, 104, 122, 0.2);
 --teal: #1a5a52;
 --teal-lt: rgba(26, 90, 82, 0.18);
 --teal-glow: rgba(20, 80, 70, 0.14);
 --border: rgba(212, 146, 42, 0.15);
 --border-soft: rgba(240, 246, 244, 0.05);
 --hero-grad: linear-gradient(160deg, #060d0f 0%, #06090d 45%, #080f0e 100%);
 --glow-teal: rgba(20, 100, 88, 0.16);
 --glow-saffron: rgba(212, 146, 42, 0.07);
}
*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
html {
 scroll-behavior: smooth;
}
body {
 background: var(--ink);
 color: var(--cream);
 font-family: "DM Sans", sans-serif;
 font-weight: 300;
 overflow-x: hidden;
}
.eyebrow {
 font-size: 10px;
 letter-spacing: 0.32em;
 text-transform: uppercase;
 color: var(--saffron);
 opacity: 0.85;
 margin-bottom: 18px;
 display: flex;
 align-items: center;
 gap: 12px;
 font-family: "DM Sans", sans-serif;
}
.eyebrow::before {
 content: "";
 width: 28px;
 height: 1px;
 background: var(--saffron);
 opacity: 0.5;
}
.eyebrow.center {
 justify-content: center;
}
.eyebrow.center::before {
 display: none;
}
.display {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-weight: 300;
 line-height: 1.08;
 letter-spacing: -0.01em;
}
.display em {
 font-style: italic;
 color: var(--saffron);
}
.display em.rose {
 color: var(--rose);
}
.body-text {
 font-size: 15px;
 line-height: 1.9;
 color: var(--cream-dim);
}
.reveal {
 opacity: 0;
 transform: translateY(22px);
 transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
 opacity: 1;
 transform: none;
}
.d1 {
 transition-delay: 0.08s;
}
.d2 {
 transition-delay: 0.16s;
}
.d3 {
 transition-delay: 0.24s;
}
.d4 {
 transition-delay: 0.32s;
}
.d5 {
 transition-delay: 0.4s;
}
.d6 {
 transition-delay: 0.48s;
}
.d7 {
 transition-delay: 0.56s;
}
.d8 {
 transition-delay: 0.64s;
}
.d9 {
 transition-delay: 0.72s;
}
.d10 {
 transition-delay: 0.8s;
}
.d11 {
 transition-delay: 0.88s;
}
.d12 {
 transition-delay: 0.96s;
}
.breadcrumb {
 padding: 18px 64px;
 border-bottom: 1px solid var(--border-soft);
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 10px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
}
.breadcrumb a {
 color: var(--cream-faint);
 text-decoration: none;
 transition: color 0.2s;
}
.breadcrumb a:hover {
 color: var(--saffron);
}
.breadcrumb-sep {
 opacity: 0.3;
}
.hero {
 display: grid;
 grid-template-columns: 1fr 1fr;
 min-height: 92vh;
 position: relative;
 overflow: hidden;
}
.hero::before {
 content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(
   ellipse at 15% 60%,
   var(--teal-glow) 0%,
   transparent 50%
  ),
  radial-gradient(
   ellipse at 85% 30%,
   rgba(212, 146, 42, 0.06) 0%,
   transparent 45%
  ),
  radial-gradient(ellipse at 50% 100%, var(--glow-teal) 0%, transparent 40%);
 pointer-events: none;
 z-index: 0;
}
.hero-img {
 position: relative;
 background: linear-gradient(160deg, #060f0e 0%, #06090d 50%, #080c10 100%);
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 560px;
 z-index: 1;
}
.hero-img-glow {
 position: absolute;
 bottom: -5%;
 left: 50%;
 transform: translateX(-50%);
 width: 520px;
 height: 400px;
 border-radius: 50%;
 background: radial-gradient(
  ellipse,
  rgba(26, 90, 82, 0.28) 0%,
  transparent 68%
 );
 pointer-events: none;
}
.hero-img-shimmer {
 position: absolute;
 inset: 0;
 background-image: repeating-linear-gradient(
  90deg,
  rgba(240, 246, 244, 0.012) 0,
  rgba(240, 246, 244, 0.012) 1px,
  transparent 1px,
  transparent 48px
 );
 pointer-events: none;
}
.hero-img-main {
 width: 76%;
 max-width: 400px;
 aspect-ratio: 1/1;
 background: var(--ink-soft);
 border: 1px solid var(--border);
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 z-index: 2;
 overflow: hidden;
}
.hero-img-main img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.hero-img-placeholder {
 font-size: 80px;
 opacity: 0.06;
}
.float-tags {
 position: absolute;
 inset: 0;
 pointer-events: none;
 z-index: 3;
}
.float-tag {
 position: absolute;
 font-size: 9px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--saffron);
 background: rgba(6, 9, 13, 0.88);
 border: 1px solid var(--saffron-bd);
 padding: 5px 10px;
 font-family: "DM Sans", sans-serif;
 white-space: nowrap;
 backdrop-filter: blur(4px);
}
.float-tag.rose-tag {
 color: var(--rose);
 border-color: var(--rose-bd);
}
.float-tag::before {
 content: "✦ ";
 opacity: 0.5;
 font-size: 7px;
}
.ft-1 {
 top: 12%;
 left: 5%;
}
.ft-2 {
 top: 26%;
 right: 4%;
}
.ft-3 {
 top: 46%;
 left: 3%;
}
.ft-4 {
 top: 62%;
 right: 5%;
}
.ft-5 {
 bottom: 22%;
 left: 7%;
}
.ft-6 {
 bottom: 12%;
 right: 6%;
}
.season-badge {
 position: absolute;
 top: 28px;
 right: 28px;
 z-index: 3;
 border: 1px solid var(--teal-lt);
 background: rgba(6, 9, 13, 0.75);
 backdrop-filter: blur(8px);
 padding: 12px 16px;
 text-align: center;
}
.season-badge-icon {
 font-size: 20px;
 margin-bottom: 4px;
}
.season-badge-label {
 font-size: 7px;
 letter-spacing: 0.24em;
 text-transform: uppercase;
 color: var(--saffron);
 font-family: "DM Sans", sans-serif;
 opacity: 0.8;
 display: block;
}
.season-badge-val {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 15px;
 color: var(--cream);
}
.temp-strip {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(
  to right,
  var(--teal) 0%,
  rgba(26, 90, 82, 0.3) 50%,
  transparent 100%
 );
 z-index: 3;
}
.hero-info {
 padding: 64px 64px 64px 56px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 background: linear-gradient(160deg, var(--ink-soft) 0%, var(--ink) 70%);
 border-left: 1px solid var(--border);
 position: relative;
 z-index: 1;
}
.hero-info::after {
 content: "";
 position: absolute;
 top: 20%;
 bottom: 20%;
 left: -1px;
 width: 1px;
 background: linear-gradient(
  to bottom,
  transparent,
  rgba(26, 90, 82, 0.5),
  transparent
 );
}
.product-collection {
 font-size: 9px;
 letter-spacing: 0.28em;
 text-transform: uppercase;
 color: var(--saffron);
 opacity: 0.6;
 margin-bottom: 10px;
 font-family: "DM Sans", sans-serif;
}
.product-title {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: clamp(34px, 3.5vw, 56px);
 font-weight: 300;
 line-height: 1.05;
 margin-bottom: 6px;
 color: var(--cream);
}
.product-title em {
 font-style: italic;
 color: var(--saffron);
}
.product-subtitle {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 16px;
 font-style: italic;
 color: var(--cream-faint);
 margin-bottom: 28px;
 line-height: 1.6;
}
.cooling-pills {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
 margin-bottom: 28px;
}
.cooling-pill {
 font-size: 9px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 padding: 5px 12px;
 font-family: "DM Sans", sans-serif;
}
.cooling-pill.teal {
 border: 1px solid rgba(26, 90, 82, 0.4);
 color: rgba(100, 200, 180, 0.8);
 background: rgba(26, 90, 82, 0.1);
}
.cooling-pill.gold {
 border: 1px solid var(--saffron-bd);
 color: var(--saffron);
 background: var(--saffron-pale);
}
.ing-pills {
 display: flex;
 gap: 5px;
 flex-wrap: wrap;
 margin-bottom: 28px;
}
.ing-pill {
 font-size: 8px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 border: 1px solid var(--border-soft);
 padding: 4px 10px;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
 transition: all 0.2s;
}
.ing-pill:hover {
 border-color: var(--saffron-bd);
 color: var(--saffron);
}
.price-row {
 display: flex;
 align-items: baseline;
 gap: 14px;
 margin-bottom: 28px;
}
.price {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 38px;
 font-weight: 400;
 color: var(--saffron);
}
.price-compare {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 22px;
 color: var(--cream-faint);
 text-decoration: line-through;
 opacity: 0.4;
}
.price-save {
 font-size: 10px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: #5a9a6a;
 background: rgba(90, 154, 106, 0.1);
 border: 1px solid rgba(90, 154, 106, 0.2);
 padding: 4px 10px;
 font-family: "DM Sans", sans-serif;
}
.variant-label {
 font-size: 10px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--cream-faint);
 margin-bottom: 10px;
 font-family: "DM Sans", sans-serif;
}
.variant-options {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin-bottom: 24px;
}
.variant-btn {
 padding: 9px 18px;
 border: 1px solid var(--border-soft);
 background: none;
 color: var(--cream-dim);
 font-family: "DM Sans", sans-serif;
 font-size: 12px;
 cursor: pointer;
 transition: all 0.2s;
}
.variant-btn.active {
 border-color: var(--saffron);
 color: var(--saffron);
 background: var(--saffron-pale);
}
.serve-row {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
 margin-bottom: 24px;
}
.serve-tag {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 10px;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--cream-faint);
 border: 1px solid var(--border-soft);
 padding: 6px 12px;
 font-family: "DM Sans", sans-serif;
}
.serve-tag-icon {
 font-size: 13px;
 opacity: 0.5;
}
.purchase-row {
 display: flex;
 gap: 12px;
 margin-bottom: 24px;
 align-items: stretch;
}
.qty {
 display: flex;
 align-items: center;
 border: 1px solid var(--border);
 flex-shrink: 0;
}
.qty-btn {
 width: 40px;
 height: 52px;
 background: none;
 border: none;
 color: var(--cream-dim);
 font-size: 18px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: color 0.2s;
}
.qty-btn:hover {
 color: var(--saffron);
}
.qty-val {
 width: 40px;
 text-align: center;
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 18px;
 color: var(--cream);
 background: none;
 border: none;
 outline: none;
}
.atc {
 flex: 1;
 background: var(--saffron);
 color: var(--ink);
 font-family: "DM Sans", sans-serif;
 font-size: 11px;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 font-weight: 500;
 border: none;
 cursor: pointer;
 height: 52px;
 transition: background 0.25s, transform 0.2s;
}
.atc:hover {
 background: var(--saffron-lt);
 transform: translateY(-1px);
}
.micro-trust {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding-top: 22px;
 border-top: 1px solid var(--border-soft);
}
.micro-item {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 13px;
 color: rgba(240, 246, 244, 0.88);
 font-family: "DM Sans", sans-serif;
 font-weight: 400;
}
.micro-icon {
 font-size: 17px;
 flex-shrink: 0;
}
.origin {
 padding: 100px 64px;
 background: var(--ink-soft);
 border-bottom: 1px solid var(--border);
 position: relative;
 overflow: hidden;
}
.origin::before {
 content: "";
 position: absolute;
 top: -10%;
 right: -5%;
 width: 700px;
 height: 700px;
 border-radius: 50%;
 background: radial-gradient(circle, var(--teal-glow) 0%, transparent 62%);
 pointer-events: none;
}
.origin-inner {
 max-width: 960px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 80px;
 align-items: center;
 position: relative;
 z-index: 1;
}
.origin-left h2 {
 font-size: clamp(32px, 3.5vw, 52px);
 margin-bottom: 24px;
}
.origin-left p {
 margin-bottom: 18px;
}
.origin-timeline {
 display: flex;
 flex-direction: column;
 gap: 0;
 margin-top: 40px;
}
.timeline-item {
 display: flex;
 gap: 20px;
 align-items: flex-start;
 padding: 20px 0;
 border-bottom: 1px solid var(--border-soft);
}
.timeline-item:last-child {
 border-bottom: none;
}
.timeline-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--saffron);
 opacity: 0.5;
 flex-shrink: 0;
 margin-top: 6px;
}
.timeline-era {
 font-size: 9px;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--saffron);
 opacity: 0.7;
 margin-bottom: 4px;
 font-family: "DM Sans", sans-serif;
}
.timeline-text {
 font-size: 13px;
 color: var(--cream-dim);
 line-height: 1.7;
}
.origin-quote-wrap {
 position: relative;
 padding-left: 32px;
}
.origin-quote-wrap::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 1px;
 background: linear-gradient(
  to bottom,
  transparent,
  rgba(26, 90, 82, 0.6),
  transparent
 );
}
.origin-quote {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: clamp(26px, 2.8vw, 42px);
 font-weight: 300;
 font-style: italic;
 color: var(--cream-dim);
 line-height: 1.45;
 margin-bottom: 32px;
}
.origin-stats {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.origin-stat {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 14px 20px;
 border: 1px solid var(--border);
 background: var(--ink);
}
.origin-stat-label {
 font-size: 11px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
}
.origin-stat-val {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 20px;
 color: var(--saffron);
}
.cooling {
 padding: 100px 64px;
 border-bottom: 1px solid var(--border);
 background: var(--ink);
}
.cooling-inner {
 max-width: 960px;
 margin: 0 auto;
}
.cooling-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 margin-bottom: 56px;
}
.cooling-header h2 {
 font-size: clamp(28px, 3vw, 46px);
}
.cooling-label {
 font-size: 9px;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: rgba(26, 90, 82, 0.8);
 font-family: "DM Sans", sans-serif;
 border: 1px solid rgba(26, 90, 82, 0.3);
 padding: 5px 12px;
}
.cooling-grid-top {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 2px;
 margin-bottom: 2px;
}
.cooling-grid-bottom {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2px;
}
.cool-card {
 background: var(--ink-soft);
 border: 1px solid var(--border);
 padding: 32px 28px;
 transition: border-color 0.3s;
 position: relative;
 overflow: hidden;
}
.cool-card::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(
  to right,
  transparent,
  rgba(26, 90, 82, 0.4),
  transparent
 );
 opacity: 0;
 transition: opacity 0.3s;
}
.cool-card:hover {
 border-color: rgba(26, 90, 82, 0.4);
}
.cool-card:hover::before {
 opacity: 1;
}
.cool-card-hero {
 background: linear-gradient(135deg, #060f0e 0%, var(--ink-soft) 100%);
}
.cool-num {
 font-size: 11px;
 color: var(--saffron);
 opacity: 0.5;
 margin-bottom: 14px;
 letter-spacing: 0.1em;
 font-family: "Cormorant Garamond", serif;
}
.cool-icon {
 font-size: 28px;
 margin-bottom: 14px;
 opacity: 0.65;
}
.cool-card .ing-icon-img {
 width: 52px;
 height: 52px;
 max-width: 52px;
 max-height: 52px;
}
.cool-name {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 22px;
 font-weight: 400;
 margin-bottom: 5px;
}
.cool-aka {
 font-size: 9px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: rgba(100, 200, 180, 0.6);
 margin-bottom: 12px;
 font-family: "DM Sans", sans-serif;
}
.cool-benefit {
 font-size: 12px;
 color: var(--cream-faint);
 line-height: 1.7;
 margin-bottom: 12px;
}
.cool-tag {
 display: inline-block;
 margin-top: 4px;
 margin-right: 4px;
 font-size: 8px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 border: 1px solid rgba(26, 90, 82, 0.3);
 padding: 3px 8px;
 color: rgba(100, 200, 180, 0.6);
 font-family: "DM Sans", sans-serif;
}
.supporting {
 padding: 100px 64px;
 border-bottom: 1px solid var(--border);
 background: var(--ink-soft);
}
.supporting-inner {
 max-width: 960px;
 margin: 0 auto;
}
.supporting-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 2px;
 margin-top: 48px;
}
.supp-card {
 background: var(--ink);
 border: 1px solid var(--border);
 padding: 24px 20px;
 transition: border-color 0.3s;
}
.supp-card:hover {
 border-color: var(--saffron-bd);
}
.supp-num {
 font-size: 10px;
 color: var(--saffron);
 opacity: 0.45;
 margin-bottom: 10px;
 font-family: "Cormorant Garamond", serif;
}
.supp-icon {
 font-size: 22px;
 margin-bottom: 10px;
 opacity: 0.6;
}
.supp-card .ing-icon-img {
 width: 44px;
 height: 44px;
 max-width: 44px;
 max-height: 44px;
}
.supp-name {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 18px;
 font-weight: 400;
 margin-bottom: 6px;
}
.supp-benefit {
 font-size: 11px;
 color: var(--cream-faint);
 line-height: 1.6;
}
.supp-tag {
 display: inline-block;
 margin-top: 8px;
 font-size: 8px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 border: 1px solid var(--border-soft);
 padding: 3px 7px;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
}
.enjoy {
 padding: 100px 64px;
 border-bottom: 1px solid var(--border);
 background: var(--ink);
}
.enjoy-inner {
 max-width: 960px;
 margin: 0 auto;
}
.enjoy-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 64px;
 margin-top: 56px;
 align-items: start;
}
.enjoy-ways-label {
 font-size: 10px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--saffron);
 opacity: 0.7;
 margin-bottom: 14px;
 font-family: "DM Sans", sans-serif;
}
.enjoy-steps {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.enjoy-step {
 display: flex;
 gap: 20px;
 align-items: flex-start;
 padding: 20px 22px;
 border: 1px solid var(--border);
 background: var(--ink-soft);
 transition: border-color 0.3s;
}
.enjoy-step:hover {
 border-color: rgba(26, 90, 82, 0.4);
}
.enjoy-step-num {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 38px;
 font-weight: 300;
 color: var(--saffron);
 opacity: 0.22;
 line-height: 1;
 flex-shrink: 0;
 width: 44px;
}
.enjoy-step-title {
 font-size: 13px;
 font-weight: 500;
 margin-bottom: 5px;
 color: var(--cream);
}
.enjoy-step-desc {
 font-size: 12px;
 color: var(--cream-faint);
 line-height: 1.7;
}
.when-grid {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.when-card {
 display: flex;
 gap: 16px;
 align-items: flex-start;
 padding: 18px 20px;
 border: 1px solid var(--border);
 background: var(--ink-soft);
 transition: border-color 0.3s;
}
.when-card:hover {
 border-color: rgba(26, 90, 82, 0.4);
}
.when-icon {
 font-size: 20px;
 flex-shrink: 0;
 opacity: 0.55;
 margin-top: 2px;
}
.when-title {
 font-size: 13px;
 font-weight: 500;
 margin-bottom: 4px;
 color: var(--cream);
}
.when-desc {
 font-size: 11px;
 color: var(--cream-faint);
 line-height: 1.6;
}
.stats {
 padding: 100px 64px;
 border-bottom: 1px solid var(--border);
 background: var(--ink-soft);
 position: relative;
 overflow: hidden;
}
.stats::before {
 content: "";
 position: absolute;
 bottom: -20%;
 left: 50%;
 transform: translateX(-50%);
 width: 800px;
 height: 500px;
 border-radius: 50%;
 background: radial-gradient(circle, var(--teal-glow) 0%, transparent 60%);
 pointer-events: none;
}
.stats-inner {
 max-width: 960px;
 margin: 0 auto;
 position: relative;
 z-index: 1;
}
.stats-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 2px;
 margin-top: 48px;
}
.stat-card {
 background: var(--ink);
 border: 1px solid var(--border);
 padding: 32px 24px;
 text-align: center;
 transition: border-color 0.3s;
 position: relative;
 overflow: hidden;
}
.stat-card::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(
  to right,
  transparent,
  rgba(26, 90, 82, 0.5),
  transparent
 );
}
.stat-card:hover {
 border-color: rgba(26, 90, 82, 0.4);
}
.stat-val {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 42px;
 font-weight: 300;
 color: var(--saffron);
 line-height: 1;
 margin-bottom: 8px;
}
.stat-label {
 font-size: 10px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
}
.stat-note {
 font-size: 11px;
 color: var(--cream-faint);
 opacity: 0.55;
 margin-top: 6px;
 font-style: italic;
 font-family: "Cormorant Garamond", Georgia, serif;
}
.sc-section {
 padding: 100px 64px;
 border-bottom: 1px solid var(--border);
 background: var(--ink-soft);
}
.sc-inner {
 max-width: 900px;
 margin: 0 auto;
}
.sc-wrap {
 margin-top: 48px;
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.sc-headers {
 display: grid;
 grid-template-columns: 1.2fr 1fr 1fr;
 gap: 2px;
 margin-bottom: 2px;
}
.sc-h-metric {
 padding: 12px 16px;
 font-size: 9px;
 letter-spacing: 0.24em;
 text-transform: uppercase;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
}
.sc-h-them {
 background: var(--ink);
 border: 1px solid var(--border-soft);
 padding: 12px 20px;
 font-size: 9px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
 text-align: center;
}
.sc-h-us {
 background: rgba(212, 146, 42, 0.06);
 border: 1px solid var(--border);
 padding: 12px 20px;
 font-size: 9px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--saffron);
 font-family: "DM Sans", sans-serif;
 text-align: center;
}
.sc-row {
 display: grid;
 grid-template-columns: 1.2fr 1fr 1fr;
 gap: 2px;
}
.sc-metric {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 20px 16px;
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--cream-dim);
 font-family: "DM Sans", sans-serif;
}
.sc-icon {
 font-size: 18px;
 flex-shrink: 0;
}
.sc-them {
 background: var(--ink);
 border: 1px solid var(--border-soft);
 padding: 18px 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 4px;
 text-align: center;
}
.sc-us {
 background: rgba(212, 146, 42, 0.04);
 border: 1px solid var(--border);
 padding: 18px 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 4px;
 text-align: center;
}
.sc-big {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 24px;
 font-weight: 400;
 color: var(--cream-faint);
 line-height: 1;
}
.sc-us .sc-big {
 color: var(--saffron);
}
.sc-tiny {
 font-size: 10px;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
 opacity: 0.6;
 letter-spacing: 0.04em;
}
.sc-us .sc-tiny {
 color: var(--saffron);
 opacity: 0.6;
}
.sc-footnote {
 margin-top: 16px;
 font-size: 11px;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
 letter-spacing: 0.08em;
 padding: 14px 18px;
 border: 1px solid var(--border-soft);
 background: var(--ink);
}
.uj-section {
 padding: 100px 64px;
 border-bottom: 1px solid var(--border);
 background: var(--ink);
}
.uj-inner {
 max-width: 960px;
 margin: 0 auto;
}
.uj-early-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2px;
 margin-top: 48px;
}
.uj-early-card {
 background: var(--ink-soft);
 border: 1px solid var(--border);
 padding: 32px 28px;
 text-align: center;
 transition: border-color 0.3s;
 position: relative;
 overflow: hidden;
}
.uj-early-card::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(
  to right,
  transparent,
  rgba(26, 90, 82, 0.5),
  transparent
 );
}
.uj-early-card:hover {
 border-color: rgba(26, 90, 82, 0.4);
}
.uj-early-num {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 56px;
 font-weight: 300;
 line-height: 1;
 margin-bottom: 8px;
 color: var(--saffron);
 opacity: 0.85;
}
.uj-early-unit {
 font-size: 9px;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: rgba(26, 90, 82, 0.9);
 font-family: "DM Sans", sans-serif;
 margin-bottom: 12px;
}
.uj-early-label {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 18px;
 font-weight: 400;
 margin-bottom: 8px;
 color: var(--cream);
}
.uj-early-desc {
 font-size: 11px;
 color: var(--cream-faint);
 line-height: 1.6;
 font-family: "DM Sans", sans-serif;
}
.uj-cta-box {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 32px;
 background: var(--ink-soft);
 border: 1px solid var(--border);
 padding: 28px 36px;
 margin-top: 2px;
}
.uj-cta-title {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 22px;
 font-weight: 400;
 margin-bottom: 6px;
 color: var(--cream);
}
.uj-cta-sub {
 font-size: 13px;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
}
.uj-cta-btn {
 background: var(--saffron);
 color: var(--ink);
 font-family: "DM Sans", sans-serif;
 font-size: 11px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 font-weight: 500;
 padding: 14px 28px;
 text-decoration: none;
 white-space: nowrap;
 flex-shrink: 0;
 transition: background 0.25s;
}
.uj-cta-btn:hover {
 background: var(--saffron-lt);
}
.ritual-cta {
 padding: 100px 64px;
 border-bottom: 1px solid var(--border);
 background: linear-gradient(160deg, #060f0e 0%, var(--ink) 50%, #060f0e 100%);
 position: relative;
 overflow: hidden;
 text-align: center;
}
.ritual-cta::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 800px;
 height: 500px;
 border-radius: 50%;
 background: radial-gradient(ellipse, var(--teal-glow) 0%, transparent 60%);
 pointer-events: none;
}
.ritual-cta::after {
 content: "";
 position: absolute;
 top: 36px;
 left: 64px;
 width: 80px;
 height: 80px;
 border-top: 1px solid rgba(26, 90, 82, 0.3);
 border-left: 1px solid rgba(26, 90, 82, 0.3);
 pointer-events: none;
}
.ritual-cta-inner {
 position: relative;
 z-index: 1;
 max-width: 620px;
 margin: 0 auto;
}
.ritual-cta-inner h2 {
 font-size: clamp(32px, 4vw, 58px);
 margin-bottom: 20px;
}
.ritual-cta-inner p {
 margin-bottom: 40px;
 font-size: 16px;
}
.btn {
 display: inline-block;
 background: var(--saffron);
 color: var(--ink);
 font-family: "DM Sans", sans-serif;
 font-size: 11px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 font-weight: 500;
 padding: 15px 40px;
 text-decoration: none;
 border: none;
 cursor: pointer;
 transition: background 0.25s, transform 0.2s;
}
.btn:hover {
 background: var(--saffron-lt);
 transform: translateY(-1px);
}
.btn-out {
 display: inline-block;
 background: none;
 border: 1px solid var(--border);
 color: var(--cream-dim);
 font-family: "DM Sans", sans-serif;
 font-size: 11px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 padding: 14px 32px;
 text-decoration: none;
 transition: all 0.25s;
}
.btn-out:hover {
 border-color: var(--saffron);
 color: var(--saffron);
}
.btn-pair {
 display: flex;
 gap: 14px;
 justify-content: center;
 flex-wrap: wrap;
}
.more {
 padding: 88px 64px;
 background: var(--ink-soft);
 border-top: 1px solid var(--border);
}
.more-inner {
 max-width: 1100px;
 margin: 0 auto;
}
.more-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 margin-bottom: 40px;
}
.more-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2px;
}
.more-card {
 background: var(--ink);
 border: 1px solid var(--border);
 text-decoration: none;
 color: inherit;
 display: block;
 transition: border-color 0.3s;
}
.more-card:hover {
 border-color: var(--saffron-bd);
}
.more-img {
 aspect-ratio: 1/1;
 background: var(--ink-mid);
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
}
.more-img-placeholder {
 font-size: 52px;
 opacity: 0.06;
}
.more-time {
 position: absolute;
 bottom: 12px;
 left: 12px;
 font-size: 8px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--saffron);
 border: 1px solid var(--saffron-bd);
 background: rgba(6, 9, 13, 0.8);
 padding: 3px 8px;
 font-family: "DM Sans", sans-serif;
}
.more-info {
 padding: 18px 20px 22px;
}
.more-name {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 18px;
 font-weight: 400;
 margin-bottom: 4px;
}
.more-tagline {
 font-size: 11px;
 color: var(--cream-faint);
 margin-bottom: 8px;
}
.more-price {
 font-size: 14px;
 color: var(--saffron);
 font-family: "Cormorant Garamond", Georgia, serif;
}
@media (max-width: 1024px) {
 .hero {
  grid-template-columns: 1fr;
  min-height: auto;
 }
 .hero-info {
  border-left: none;
  border-top: 1px solid var(--border);
  padding: 48px 32px;
 }
 .origin-inner {
  grid-template-columns: 1fr;
  gap: 48px;
 }
 .cooling-grid-top {
  grid-template-columns: 1fr;
 }
 .switch-header {
  grid-template-columns: 1fr;
 }
 .switch-col-blank {
  display: none;
 }
 .switch-row {
  grid-template-columns: 1fr;
 }
 .switch-label {
  border-bottom: none;
 }
 .switch-section {
  padding: 64px 20px;
 }
 .testimonials {
  padding: 64px 20px;
 }
 .testi-early-grid {
  grid-template-columns: 1fr;
 }
 .testi-cta-box {
  flex-direction: column;
  text-align: center;
 }
 .cooling-grid-bottom {
  grid-template-columns: repeat(2, 1fr);
 }
 .supporting-grid {
  grid-template-columns: repeat(2, 1fr);
 }
 .enjoy-grid {
  grid-template-columns: 1fr;
 }
 .stats-grid {
  grid-template-columns: repeat(2, 1fr);
 }
 .more-grid {
  grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 768px) {
 .breadcrumb {
  padding: 14px 20px;
 }
 .origin {
  padding: 64px 20px;
 }
 .cooling {
  padding: 64px 20px;
 }
 .cooling-grid-bottom {
  grid-template-columns: 1fr;
 }
 .supporting {
  padding: 64px 20px;
 }
 .supporting-grid {
  grid-template-columns: 1fr;
 }
 .enjoy {
  padding: 64px 20px;
 }
 .stats {
  padding: 64px 20px;
 }
 .ritual-cta {
  padding: 72px 20px;
 }
 .ritual-cta::after {
  display: none;
 }
 .more {
  padding: 56px 20px;
 }
 .more-header {
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
 }
 .more-grid {
  grid-template-columns: 1fr;
 }
 .purchase-row {
  flex-direction: row;
 }
.atc{height:56px;font-size:10px;}
 }
 .ft-2,
 .ft-4,
 .ft-6 {
  display: none;
 }
 .price-row{flex-wrap:wrap;align-items:center;gap:6px 10px;}
.price-compare{font-size:15px;order:-1;width:100%;}
.price{font-size:28px;}
.price-save{font-size:9px;padding:3px 8px;align-self:center;}
.qty-btn{width:36px;height:56px;}
.qty-val{width:32px;font-size:16px;}
.qty{flex-shrink:0;}
}