/** Shopify CDN: Minification failed

Line 1512:0 Unexpected "}"

**/
/* Kenkou PDP — Rajgeera Cocoa Stylesheet
   kenkou-rc.css
   Upload to: Shopify Admin > Themes > Edit Code > Assets */
/* Kenkou PDP Stylesheet — kenkou-pdp.css
   Upload to: Shopify Admin > Online Store > Themes > Edit Code > Assets
   Shared by: product.rajgeera-cocoa.liquid + product.thandai.liquid */
@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: #0d0905;
 --ink-soft: #1a1108;
 --ink-mid: #140d06;
 --cream: #faf4e6;
 --cream-dim: rgba(250, 244, 230, 0.65);
 --cream-faint: rgba(250, 244, 230, 0.3);
 --amber: #c97a2a;
 --amber-lt: #e8962a;
 --amber-gold: #e8a020;
 --amber-pale: rgba(201, 122, 42, 0.08);
 --amber-bd: rgba(201, 122, 42, 0.22);
 --border: rgba(201, 122, 42, 0.16);
 --border-soft: rgba(250, 244, 230, 0.06);
 --glow-a: rgba(201, 122, 42, 0.12);
 --glow-b: rgba(180, 80, 20, 0.07);
 --sunrise-top: #1a0e05;
 --sunrise-mid: #2a1508;
 --sunrise-warm: #3d1e0a;
}
*,
*::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(--amber);
 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(--amber);
 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(--amber-gold);
}
.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;
}
.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;
 background: var(--ink);
}
.breadcrumb a {
 color: var(--cream-faint);
 text-decoration: none;
 transition: color 0.2s;
}
.breadcrumb a:hover {
 color: var(--amber);
}
.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 20% 80%,
   rgba(201, 122, 42, 0.18) 0%,
   transparent 55%
  ),
  radial-gradient(
   ellipse at 80% 20%,
   rgba(180, 80, 20, 0.1) 0%,
   transparent 50%
  ),
  radial-gradient(
   ellipse at 50% 100%,
   rgba(232, 150, 42, 0.08) 0%,
   transparent 45%
  );
 pointer-events: none;
 z-index: 0;
}
.hero-img {
 position: relative;
 background: linear-gradient(
  160deg,
  var(--sunrise-warm) 0%,
  var(--sunrise-mid) 40%,
  var(--ink) 100%
 );
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 560px;
 z-index: 1;
}
.hero-img-glow {
 position: absolute;
 bottom: -10%;
 left: 50%;
 transform: translateX(-50%);
 width: 480px;
 height: 480px;
 border-radius: 50%;
 background: radial-gradient(
  circle,
  rgba(232, 160, 32, 0.22) 0%,
  transparent 65%
 );
 pointer-events: none;
}
.hero-img-rays {
 position: absolute;
 inset: 0;
 background-image: repeating-linear-gradient(
  180deg,
  rgba(250, 244, 230, 0.015) 0,
  rgba(250, 244, 230, 0.015) 1px,
  transparent 1px,
  transparent 56px
 );
 pointer-events: none;
}
.hero-img-main {
 width: 78%;
 max-width: 420px;
 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;
}
.orbit-tags {
 position: absolute;
 inset: 0;
 pointer-events: none;
 z-index: 3;
}
.orbit-tag {
 position: absolute;
 font-size: 9px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--amber);
 background: rgba(13, 9, 5, 0.85);
 border: 1px solid var(--amber-bd);
 padding: 5px 10px;
 font-family: "DM Sans", sans-serif;
 white-space: nowrap;
 backdrop-filter: blur(4px);
}
.orbit-tag::before {
 content: "✦ ";
 opacity: 0.5;
 font-size: 7px;
}
.ot-1 {
 top: 14%;
 left: 6%;
}
.ot-2 {
 top: 28%;
 right: 5%;
}
.ot-3 {
 top: 52%;
 left: 4%;
}
.ot-4 {
 top: 66%;
 right: 6%;
}
.ot-5 {
 bottom: 20%;
 left: 8%;
}
.time-badge {
 position: absolute;
 bottom: 28px;
 right: 28px;
 z-index: 3;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 88px;
 height: 88px;
 border-radius: 50%;
 border: 1px solid var(--border);
 background: rgba(13, 9, 5, 0.7);
 backdrop-filter: blur(8px);
}
.time-badge-icon {
 font-size: 22px;
 margin-bottom: 3px;
}
.time-badge-label {
 font-size: 7px;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--amber);
 font-family: "DM Sans", sans-serif;
 opacity: 0.8;
}
.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) 60%);
 border-left: 1px solid var(--border);
 position: relative;
 z-index: 1;
}
.hero-info::after {
 content: "";
 position: absolute;
 top: 15%;
 bottom: 15%;
 left: -1px;
 width: 1px;
 background: linear-gradient(
  to bottom,
  transparent,
  var(--amber-bd),
  var(--amber-bd),
  transparent
 );
}
.product-collection {
 font-size: 9px;
 letter-spacing: 0.28em;
 text-transform: uppercase;
 color: var(--amber);
 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, 54px);
 font-weight: 300;
 line-height: 1.08;
 margin-bottom: 6px;
 color: var(--cream);
}
.product-title em {
 font-style: italic;
 color: var(--amber-gold);
}
.product-subtitle {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 16px;
 font-style: italic;
 color: var(--cream-faint);
 margin-bottom: 28px;
 line-height: 1.5;
}
.ing-pills {
 display: flex;
 gap: 5px;
 flex-wrap: wrap;
 margin-bottom: 28px;
}
.ing-pill {
 font-size: 8px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 border: 1px solid var(--border-soft);
 padding: 4px 10px;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
 transition: border-color 0.2s, color 0.2s;
}
.ing-pill:hover {
 border-color: var(--amber-bd);
 color: var(--amber);
}
.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(--amber-gold);
}
.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(--amber);
 color: var(--amber);
 background: var(--amber-pale);
}
.purchase-row {
 display: flex;
 gap: 12px;
 margin-bottom: 20px;
 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;
 transition: color 0.2s;
 display: flex;
 align-items: center;
 justify-content: center;
}
.qty-btn:hover {
 color: var(--amber);
}
.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(--amber);
 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;
 padding: 0 32px;
 height: 52px;
 transition: background 0.25s, transform 0.2s;
}
.atc:hover {
 background: var(--amber-lt);
 transform: translateY(-1px);
}
.serve-row {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin-bottom: 24px;
}
.serve-tag {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 10px;
 letter-spacing: 0.12em;
 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;
}
.micro-trust {
 display: flex;
 flex-direction: column;
 gap: 9px;
 padding-top: 22px;
 border-top: 1px solid var(--border-soft);
}
.micro-item {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 12px;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
}
.micro-icon {
 font-size: 13px;
 opacity: 0.45;
 flex-shrink: 0;
}
.ritual {
 padding: 100px 64px;
 background: linear-gradient(160deg, var(--ink-soft) 0%, var(--ink) 100%);
 border-bottom: 1px solid var(--border);
 position: relative;
 overflow: hidden;
}
.ritual::before {
 content: "";
 position: absolute;
 top: -20%;
 right: -5%;
 width: 600px;
 height: 600px;
 border-radius: 50%;
 background: radial-gradient(circle, var(--glow-a) 0%, transparent 62%);
 pointer-events: none;
}
.ritual-inner {
 max-width: 900px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 80px;
 align-items: center;
 position: relative;
 z-index: 1;
}
.ritual-left h2 {
 font-size: clamp(32px, 3.5vw, 52px);
 margin-bottom: 24px;
}
.ritual-left p {
 margin-bottom: 18px;
}
.ritual-stats {
 display: flex;
 flex-direction: column;
 gap: 2px;
 margin-top: 36px;
}
.ritual-stat {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 16px 20px;
 border: 1px solid var(--border);
 background: var(--ink);
}
.ritual-stat-label {
 font-size: 11px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
}
.ritual-stat-val {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 22px;
 color: var(--amber-gold);
}
.ritual-quote {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: clamp(28px, 3vw, 44px);
 font-weight: 300;
 font-style: italic;
 color: var(--cream-dim);
 line-height: 1.4;
 position: relative;
 padding-left: 28px;
}
.ritual-quote::before {
 content: "";
 position: absolute;
 left: 0;
 top: 8px;
 bottom: 8px;
 width: 1px;
 background: linear-gradient(
  to bottom,
  transparent,
  var(--amber-bd),
  transparent
 );
}
.ingredients {
 padding: 100px 64px;
 border-bottom: 1px solid var(--border);
 background: var(--ink);
}
.ingredients-inner {
 max-width: 960px;
 margin: 0 auto;
}
.ing-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 margin-bottom: 56px;
}
.ing-header h2 {
 font-size: clamp(28px, 3vw, 46px);
}
.ing-count {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 72px;
 font-weight: 300;
 color: var(--amber);
 opacity: 0.12;
 line-height: 1;
}
.ing-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 2px;
 margin-bottom: 2px;
}
.ing-grid-bottom {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 2px;
}
.ing-card {
 background: var(--ink-soft);
 border: 1px solid var(--border);
 padding: 28px 24px;
 transition: border-color 0.3s, background 0.3s;
 position: relative;
 overflow: hidden;
}
.ing-card::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(
  to right,
  transparent,
  var(--amber-bd),
  transparent
 );
 opacity: 0;
 transition: opacity 0.3s;
}
.ing-card:hover {
 border-color: var(--amber-bd);
 background: rgba(201, 122, 42, 0.03);
}
.ing-card:hover::before {
 opacity: 1;
}
.ing-card-hero {
 grid-column: span 2;
 background: linear-gradient(
  135deg,
  var(--sunrise-warm) 0%,
  var(--ink-soft) 100%
 );
}
.ing-num {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 11px;
 color: var(--amber);
 opacity: 0.5;
 margin-bottom: 14px;
 letter-spacing: 0.1em;
}
.ing-icon {
 font-size: 24px;
 margin-bottom: 14px;
 opacity: 0.6;
}
.ing-icon-img {
 width: 48px;
 height: 48px;
 object-fit: contain;
 margin-bottom: 14px;
 mix-blend-mode: screen;
 display: block;
}
.ing-name {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 20px;
 font-weight: 400;
 margin-bottom: 6px;
}
.ing-aka {
 font-size: 10px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--amber);
 opacity: 0.6;
 margin-bottom: 10px;
 font-family: "DM Sans", sans-serif;
}
.ing-benefit {
 font-size: 12px;
 color: var(--cream-faint);
 line-height: 1.65;
}
.ing-tag {
 display: inline-block;
 margin-top: 10px;
 font-size: 8px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 border: 1px solid var(--border-soft);
 padding: 3px 8px;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
}
.prepare {
 padding: 100px 64px;
 border-bottom: 1px solid var(--border);
 background: var(--ink-soft);
}
.prepare-inner {
 max-width: 960px;
 margin: 0 auto;
}
.prepare-header {
 margin-bottom: 56px;
}
.prepare-header h2 {
 font-size: clamp(28px, 3vw, 46px);
}
.prepare-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 64px;
 align-items: start;
}
.prepare-steps {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.prepare-step {
 display: flex;
 gap: 24px;
 align-items: flex-start;
 padding: 24px 24px;
 border: 1px solid var(--border);
 background: var(--ink);
 transition: border-color 0.3s;
}
.prepare-step:hover {
 border-color: var(--amber-bd);
}
.step-num {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 42px;
 font-weight: 300;
 color: var(--amber);
 opacity: 0.25;
 line-height: 1;
 flex-shrink: 0;
 width: 48px;
}
.step-content {
}
.step-title {
 font-size: 14px;
 font-weight: 500;
 margin-bottom: 6px;
 color: var(--cream);
}
.step-desc {
 font-size: 12px;
 color: var(--cream-faint);
 line-height: 1.7;
}
.serve-ways {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.serve-way {
 display: flex;
 gap: 18px;
 align-items: flex-start;
 padding: 20px 22px;
 border: 1px solid var(--border);
 background: var(--ink);
 transition: border-color 0.3s;
}
.serve-way:hover {
 border-color: var(--amber-bd);
}
.serve-way-icon {
 font-size: 22px;
 flex-shrink: 0;
 opacity: 0.55;
 margin-top: 2px;
}
.serve-way-title {
 font-size: 13px;
 font-weight: 500;
 margin-bottom: 4px;
 color: var(--cream);
}
.serve-way-desc {
 font-size: 11px;
 color: var(--cream-faint);
 line-height: 1.6;
}
.serve-ways-label {
 font-size: 10px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--amber);
 opacity: 0.7;
 margin-bottom: 14px;
 font-family: "DM Sans", sans-serif;
 padding-left: 4px;
}
.nutrition {
 padding: 100px 64px;
 border-bottom: 1px solid var(--border);
 background: var(--ink);
 position: relative;
 overflow: hidden;
}
.nutrition::before {
 content: "";
 position: absolute;
 bottom: -20%;
 left: 50%;
 transform: translateX(-50%);
 width: 700px;
 height: 500px;
 border-radius: 50%;
 background: radial-gradient(circle, var(--glow-b) 0%, transparent 62%);
 pointer-events: none;
}
.nutrition-inner {
 max-width: 960px;
 margin: 0 auto;
 position: relative;
 z-index: 1;
}
.nutrition-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 2px;
 margin-top: 48px;
}
.nutr-card {
 background: var(--ink-soft);
 border: 1px solid var(--border);
 padding: 32px 24px;
 text-align: center;
 transition: border-color 0.3s;
 position: relative;
 overflow: hidden;
}
.nutr-card::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(
  to right,
  transparent,
  var(--amber-bd),
  transparent
 );
}
.nutr-card:hover {
 border-color: var(--amber-bd);
}
.nutr-val {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 42px;
 font-weight: 300;
 color: var(--amber-gold);
 line-height: 1;
 margin-bottom: 8px;
}
.nutr-label {
 font-size: 10px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
}
.nutr-note {
 font-size: 11px;
 color: var(--cream-faint);
 opacity: 0.6;
 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(201, 122, 42, 0.06);
 border: 1px solid var(--border);
 padding: 12px 20px;
 font-size: 9px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--amber);
 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(201, 122, 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(--amber);
}
.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(--amber);
 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: 1060px;
 margin: 0 auto;
}
.uj-cards {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 2px;
 margin-top: 48px;
 margin-bottom: 2px;
}
.uj-card {
 background: var(--ink-soft);
 border: 1px solid var(--border);
 padding: 28px 24px;
 display: flex;
 flex-direction: column;
 gap: 0;
 transition: border-color 0.3s;
 position: relative;
 overflow: hidden;
}
.uj-card::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(
  to right,
  transparent,
  var(--amber-bd),
  transparent
 );
}
.uj-card:hover {
 border-color: var(--amber-bd);
}
.uj-card-header {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 10px;
}
.uj-avatar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: var(--amber-pale);
 border: 1px solid var(--amber-bd);
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 18px;
 color: var(--amber);
 flex-shrink: 0;
}
.uj-name {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 17px;
 font-weight: 400;
 color: var(--cream);
 margin-bottom: 2px;
}
.uj-meta {
 font-size: 10px;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
}
.uj-switched {
 font-size: 9px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--amber);
 opacity: 0.7;
 font-family: "DM Sans", sans-serif;
 padding: 6px 0 18px;
 border-bottom: 1px solid var(--border-soft);
 margin-bottom: 18px;
}
.uj-steps {
 display: flex;
 flex-direction: column;
 gap: 0;
 flex: 1;
}
.uj-step {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 11px 0;
 border-bottom: 1px solid var(--border-soft);
}
.uj-step:last-child {
 border-bottom: none;
}
.uj-step-marker {
 font-size: 9px;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
 flex-shrink: 0;
 width: 52px;
 padding-top: 1px;
}
.uj-step-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--border);
 flex-shrink: 0;
 margin-top: 4px;
}
.uj-step-dot.active {
 background: var(--amber);
}
.uj-step-text {
 font-size: 12px;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
 line-height: 1.4;
}
.uj-step-result .uj-step-text {
 color: var(--amber);
 font-weight: 500;
 opacity: 0.9;
}
.uj-step-result .uj-step-marker {
 color: var(--amber);
 opacity: 0.7;
}
.uj-stats {
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--ink-soft);
 border: 1px solid var(--border);
}
.uj-stat {
 flex: 1;
 padding: 22px 20px;
 text-align: center;
}
.uj-stat-val {
 font-family: "Cormorant Garamond", Georgia, serif;
 font-size: 28px;
 font-weight: 300;
 color: var(--amber);
 margin-bottom: 5px;
 line-height: 1;
}
.uj-stat-label {
 font-size: 9px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
}
.uj-stat-sep {
 width: 1px;
 height: 48px;
 background: var(--border);
 flex-shrink: 0;
}
.moment {
 padding: 100px 64px;
 border-bottom: 1px solid var(--border);
 background: linear-gradient(
  160deg,
  var(--sunrise-warm) 0%,
  var(--ink-soft) 50%,
  var(--ink) 100%
 );
 position: relative;
 overflow: hidden;
 text-align: center;
}
.moment::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 800px;
 height: 500px;
 border-radius: 50%;
 background: radial-gradient(circle, var(--glow-a) 0%, transparent 60%);
 pointer-events: none;
}
.moment-inner {
 position: relative;
 z-index: 1;
 max-width: 620px;
 margin: 0 auto;
}
.moment-inner h2 {
 font-size: clamp(36px, 4vw, 60px);
 margin-bottom: 20px;
}
.moment-inner p {
 margin-bottom: 40px;
 font-size: 16px;
}
.moment::after {
 content: "";
 position: absolute;
 top: 36px;
 left: 64px;
 width: 80px;
 height: 80px;
 border-top: 1px solid var(--border);
 border-left: 1px solid var(--border);
 pointer-events: none;
}
.btn {
 display: inline-block;
 background: var(--amber);
 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(--amber-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(--amber);
 color: var(--amber);
}
.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(--amber-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(--amber);
 border: 1px solid var(--amber-bd);
 background: rgba(13, 9, 5, 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;
 line-height: 1.3;
}
.more-tagline {
 font-size: 11px;
 color: var(--cream-faint);
 font-family: "DM Sans", sans-serif;
 margin-bottom: 8px;
}
.more-price {
 font-size: 14px;
 color: var(--amber);
 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;
 }
 .ritual-inner {
  grid-template-columns: 1fr;
  gap: 40px;
 }
 .sc-section {
  padding: 64px 20px;
 }
 .sc-headers {
  grid-template-columns: 1fr;
 }
 .sc-h-metric {
  display: none;
 }
 .sc-row {
  grid-template-columns: 1fr;
 }
 .uj-section {
  padding: 64px 20px;
 }
 .uj-cards {
  grid-template-columns: repeat(2, 1fr);
 }
 .uj-stats {
  flex-direction: column;
 }
 .uj-stat-sep {
  width: 60px;
  height: 1px;
 }
 .ing-grid-bottom {
  grid-template-columns: repeat(2, 1fr);
 }
 .ing-card-hero {
  grid-column: span 1;
 }
 .prepare-grid {
  grid-template-columns: 1fr;
 }
 .nutrition-grid {
  grid-template-columns: repeat(2, 1fr);
 }
 .more-grid {
  grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 768px) {
 .breadcrumb {
  padding: 14px 20px;
 }
 .ritual {
  padding: 64px 20px;
 }
 .ingredients {
  padding: 64px 20px;
 }
 .prepare {
  padding: 64px 20px;
 }
 .nutrition {
  padding: 64px 20px;
 }
 .moment {
  padding: 72px 20px;
 }
 .moment::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;}
 }
 .ot-2,
 .ot-4 {
  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;}
}