/* ============================================================
   FENWICK — Design Tokens
   Palette: deep forest night / sage green / ivory
   ============================================================ */
:root {
  --bg:           #0D0F0C;
  --bg-section:   #111410;
  --bg-card:      #181B16;
  --bg-card-alt:  #1E221B;
  --border:       #2A2F27;
  --border-light: #353A31;

  --sage:         #8BA888;
  --sage-dim:     #5E7A5B;
  --sage-pale:    #C4D4C2;

  --ivory:        #EDE9DF;
  --ivory-dim:    #B8B4AB;
  --ivory-faint:  #7A786F;

  --white:        #F5F3EE;
  --black:        #070908;

  --ff-serif: 'Playfair Display', Georgia, serif;
  --ff-sans:  'Inter', system-ui, sans-serif;

  --fs-xs:   0.72rem;
  --fs-sm:   0.85rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.35rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  3.75rem;

  --lh-tight:  1.15;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  --max-w:    960px;
  --radius:   4px;
  --radius-lg: 10px;

  --t: 200ms ease;
}

/* ============================================================ RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { background: var(--bg); color: var(--ivory); font-family: var(--ff-sans); font-weight: 300; font-size: var(--fs-base); line-height: var(--lh-normal); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--sage); text-decoration: none; }
a:hover { color: var(--sage-pale); }
em { font-style: italic; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ============================================================ UTILITIES */
.tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--sage);
  text-transform: uppercase;
  background: rgba(139,168,136,0.1);
  padding: 0.2em 0.65em;
  border-radius: 2px;
}
.tag-secondary { font-size: var(--fs-xs); color: var(--ivory-faint); font-weight: 300; }

/* ============================================================ BUTTONS */
.btn {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 0.8em 2em;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
  border: 1px solid transparent;
  text-align: center;
}
.btn--primary { background: var(--sage); color: var(--black); border-color: var(--sage); }
.btn--primary:hover { background: var(--sage-pale); border-color: var(--sage-pale); color: var(--black); }
.btn--ghost { background: transparent; color: var(--ivory); border-color: var(--border-light); }
.btn--ghost:hover { border-color: var(--sage); color: var(--sage); }
.btn--full { width: 100%; }

/* ============================================================ NAV */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(13,15,12,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav__brand { font-family: var(--ff-serif); font-size: var(--fs-lg); font-weight: 500; color: var(--ivory); letter-spacing: -0.01em; }
.nav__links { display: flex; gap: 2rem; align-items: center; }
.nav__links a { font-size: var(--fs-sm); color: var(--ivory-dim); font-weight: 300; transition: color var(--t); }
.nav__links a:hover { color: var(--ivory); }

/* ============================================================ HERO */
.hero { max-width: var(--max-w); margin: 0 auto; padding: 6rem 2rem 4rem; }
.hero__label { font-size: var(--fs-xs); color: var(--ivory-faint); margin-bottom: 2.5rem; letter-spacing: 0.04em; }
.hero__headline {
  font-family: var(--ff-serif);
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-4xl));
  font-weight: 400; line-height: var(--lh-tight);
  color: var(--white); margin-bottom: 1.75rem; max-width: 680px;
}
.hero__headline em { color: var(--sage); }
.hero__sub { max-width: 520px; color: var(--ivory-dim); font-size: var(--fs-md); line-height: var(--lh-loose); margin-bottom: 2.5rem; }
.hero__image-wrap { margin-top: 4rem; }
.hero__image { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--border); filter: brightness(0.92); }
.hero__caption { margin-top: 1rem; font-size: var(--fs-xs); color: var(--ivory-faint); text-align: center; }
.hero__legal { margin-top: 2rem; font-size: var(--fs-xs); color: var(--ivory-faint); text-align: center; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }

/* ============================================================ EDITORIAL */
.editorial { background: var(--bg-section); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 5rem 2rem; }
.editorial__meta { max-width: var(--max-w); margin: 0 auto 2rem; display: flex; align-items: center; gap: 0.75rem; }
.editorial__body { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.editorial__body p { color: var(--ivory-dim); font-size: var(--fs-md); line-height: var(--lh-loose); }
.editorial__note { font-size: var(--fs-sm) !important; color: var(--ivory-faint) !important; padding-top: 1rem; border-top: 1px solid var(--border); line-height: var(--lh-normal) !important; }

/* ============================================================ ROUTINE */
.routine { max-width: var(--max-w); margin: 0 auto; padding: 6rem 2rem; }
.routine__header { margin-bottom: 3.5rem; }
.routine__header h2 { font-family: var(--ff-serif); font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); font-weight: 400; line-height: var(--lh-tight); color: var(--white); }
.routine__header h2 em { color: var(--sage); }
.routine__steps { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: start; }
.routine__divider { background: var(--border); min-height: 180px; align-self: stretch; }
.routine__step { padding: 0 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.routine__step:first-child { padding-left: 0; }
.routine__step:last-child  { padding-right: 0; }
.routine__step-num { font-family: var(--ff-serif); font-size: var(--fs-3xl); font-weight: 400; color: var(--border-light); line-height: 1; margin-bottom: 0.25rem; }
.routine__step-body h3 { font-family: var(--ff-serif); font-size: var(--fs-xl); font-weight: 500; color: var(--white); margin-bottom: 0.35rem; }
.routine__duration { display: inline-block; font-size: var(--fs-xs); color: var(--sage); border: 1px solid var(--sage-dim); border-radius: 20px; padding: 0.15em 0.7em; margin-bottom: 0.75rem; }
.routine__step-body p { color: var(--ivory-dim); font-size: var(--fs-base); line-height: var(--lh-loose); }
.routine__disclaimer { margin-top: 2.5rem; font-size: var(--fs-xs); color: var(--ivory-faint); padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* ============================================================ CONTENTS */
.contents { background: var(--bg-section); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6rem 2rem; }
.contents__header { max-width: var(--max-w); margin: 0 auto 4rem; }
.contents__header h2 { font-family: var(--ff-serif); font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); font-weight: 400; color: var(--white); margin-bottom: 0.5rem; }
.contents__header p { color: var(--ivory-faint); font-size: var(--fs-md); }
.contents__grid { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; }
.contents__item { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); padding: 3rem 0; align-items: center; }
.contents__item:last-of-type { border-bottom: 1px solid var(--border); }
.contents__item--reverse { direction: rtl; }
.contents__item--reverse > * { direction: ltr; }
.contents__img-wrap { overflow: hidden; border-radius: var(--radius); }
.contents__img-wrap img { width: 100%; height: 320px; object-fit: cover; transition: transform 0.5s ease; filter: brightness(0.88) saturate(0.9); }
.contents__item:hover .contents__img-wrap img { transform: scale(1.03); }
.contents__text { padding: 0 3rem; }
.contents__item--reverse .contents__text { padding: 0 3rem 0 0; }
.contents__text h3 { font-family: var(--ff-serif); font-size: var(--fs-xl); font-weight: 500; color: var(--white); margin-bottom: 0.75rem; }
.contents__text p { color: var(--ivory-dim); font-size: var(--fs-base); line-height: var(--lh-loose); }
.contents__botanicals { max-width: var(--max-w); margin: 3.5rem auto 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; }
.contents__botanicals h4 { font-family: var(--ff-serif); font-size: var(--fs-lg); font-weight: 500; color: var(--white); margin-bottom: 0.75rem; }
.contents__botanicals > p { color: var(--ivory-dim); font-size: var(--fs-sm); margin-bottom: 1.5rem; line-height: var(--lh-loose); }
.contents__botanicals-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.contents__botanicals-list li { font-size: var(--fs-sm); color: var(--sage-pale); background: rgba(139,168,136,0.08); border: 1px solid var(--sage-dim); border-radius: 3px; padding: 0.25em 0.75em; }
.contents__botanicals-note { font-size: var(--fs-xs); color: var(--ivory-faint); line-height: var(--lh-loose); }

/* ============================================================ CRAFT */
.craft { max-width: var(--max-w); margin: 0 auto; padding: 6rem 2rem; }
.craft__inner { max-width: 580px; }
.craft__inner h2 { font-family: var(--ff-serif); font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); font-weight: 400; color: var(--white); margin-bottom: 1.5rem; }
.craft__inner p { color: var(--ivory-dim); font-size: var(--fs-md); line-height: var(--lh-loose); margin-bottom: 1.25rem; }
.craft__note { font-size: var(--fs-sm) !important; color: var(--ivory-faint) !important; border-top: 1px solid var(--border); padding-top: 1.25rem; }

/* ============================================================ OFFER */
.offer { background: var(--bg-section); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6rem 2rem; }
.offer__header { max-width: var(--max-w); margin: 0 auto 3.5rem; }
.offer__header h2 { font-family: var(--ff-serif); font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); font-weight: 400; color: var(--white); margin-bottom: 0.5rem; }
.offer__header p { color: var(--ivory-faint); font-size: var(--fs-md); max-width: 520px; }
.offer__cards { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
.offer__card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; position: relative; }
.offer__card--featured { border-color: var(--sage-dim); background: var(--bg-card-alt); }
.offer__card-badge { position: absolute; top: -0.65rem; left: 1.5rem; font-size: var(--fs-xs); color: var(--black); background: var(--sage); padding: 0.2em 0.75em; border-radius: 3px; font-weight: 500; }
.offer__card-label { font-size: var(--fs-xs); color: var(--ivory-faint); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 0.25rem; }
.offer__card-head h3 { font-family: var(--ff-serif); font-size: var(--fs-lg); font-weight: 500; color: var(--white); margin-bottom: 0.25rem; }
.offer__card-price { font-family: var(--ff-serif); font-size: var(--fs-2xl); font-weight: 400; color: var(--ivory); line-height: 1; }
.offer__card-price span { font-family: var(--ff-sans); font-size: var(--fs-sm); color: var(--ivory-faint); font-weight: 300; }
.offer__card > p { color: var(--ivory-dim); font-size: var(--fs-sm); line-height: var(--lh-loose); flex-grow: 1; }
.offer__card-bullets { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.offer__card-bullets li { font-size: var(--fs-xs); color: var(--ivory-dim); padding-left: 1rem; position: relative; }
.offer__card-bullets li::before { content: '—'; position: absolute; left: 0; color: var(--sage-dim); }
.offer__includes { max-width: var(--max-w); margin: 2rem auto 0; font-size: var(--fs-xs); color: var(--ivory-faint); text-align: center; line-height: var(--lh-loose); }
.offer__return { max-width: var(--max-w); margin: 2.5rem auto 0; display: flex; gap: 2rem; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
.offer__return-icon { font-family: var(--ff-serif); font-size: var(--fs-3xl); font-weight: 400; color: var(--sage); line-height: 1; flex-shrink: 0; }
.offer__return strong { display: block; font-family: var(--ff-serif); font-size: var(--fs-lg); font-weight: 500; color: var(--white); margin-bottom: 0.5rem; }
.offer__return p { color: var(--ivory-dim); font-size: var(--fs-sm); line-height: var(--lh-loose); }

/* ============================================================ FAQ */
.faq { max-width: var(--max-w); margin: 0 auto; padding: 6rem 2rem; }
.faq h2 { font-family: var(--ff-serif); font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); font-weight: 400; color: var(--white); margin-bottom: 3rem; }
.faq__list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; cursor: pointer; font-size: var(--fs-md); color: var(--ivory); user-select: none; transition: color var(--t); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; font-size: var(--fs-xl); color: var(--sage-dim); font-weight: 300; line-height: 1; transition: transform var(--t); flex-shrink: 0; margin-left: 1rem; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--white); }
.faq__item p { color: var(--ivory-dim); font-size: var(--fs-base); line-height: var(--lh-loose); padding-bottom: 1.25rem; max-width: 680px; }

/* ============================================================ DISCLAIMER */
.disclaimer { background: var(--bg-section); border-top: 1px solid var(--border); padding: 6rem 2rem; }
.disclaimer h2 { max-width: var(--max-w); margin: 0 auto 2.5rem; font-family: var(--ff-serif); font-size: var(--fs-xl); font-weight: 500; color: var(--white); }
.disclaimer__body { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.disclaimer__body h4 { font-family: var(--ff-sans); font-size: var(--fs-sm); font-weight: 500; color: var(--ivory); margin-top: 0.5rem; margin-bottom: 0.25rem; }
.disclaimer__body p { color: var(--ivory-faint); font-size: var(--fs-sm); line-height: var(--lh-loose); }

/* ============================================================ FOOTER */
.footer { background: var(--black); border-top: 1px solid var(--border); padding: 3rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.footer__brand { font-family: var(--ff-serif); font-size: var(--fs-md); color: var(--ivory-dim); }
.footer__legal { font-size: var(--fs-xs); color: var(--ivory-faint); max-width: 680px; line-height: var(--lh-loose); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; justify-content: center; }
.footer__nav a { font-size: var(--fs-xs); color: var(--ivory-faint); transition: color var(--t); }
.footer__nav a:hover { color: var(--sage); }
.footer__copy { font-size: var(--fs-xs); color: var(--border-light); }

/* ============================================================ CHECKOUT DRAWER */
.checkout-overlay { position: fixed; inset: 0; background: rgba(7,9,8,0.75); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.checkout-overlay.active { opacity: 1; pointer-events: all; }
.checkout { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; background: var(--bg-section); border-left: 1px solid var(--border); z-index: 201; overflow-y: auto; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; padding: 1.5rem; gap: 1.25rem; }
.checkout.active { transform: translateX(0); }
.checkout__header { display: flex; align-items: center; justify-content: space-between; }
.checkout__brand { font-family: var(--ff-serif); font-size: var(--fs-lg); color: var(--white); }
.checkout__close { background: none; border: 1px solid var(--border); color: var(--ivory-dim); width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; transition: border-color var(--t), color var(--t); }
.checkout__close:hover { border-color: var(--sage); color: var(--sage); }
.checkout__lock { font-size: var(--fs-xs); color: var(--sage); }
.checkout__summary { display: flex; gap: 1rem; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.checkout__thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); }
.checkout__product-name { font-family: var(--ff-serif); font-size: var(--fs-md); color: var(--white); }
.checkout__product-desc { font-size: var(--fs-xs); color: var(--ivory-faint); }
.checkout__product-price { font-family: var(--ff-serif); font-size: var(--fs-lg); color: var(--sage); }
.checkout__steps { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.checkout__step { border-bottom: 1px solid var(--border); }
.checkout__step:last-child { border-bottom: none; }
.checkout__step-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer; font-size: var(--fs-sm); color: var(--ivory); user-select: none; }
.checkout__step-num { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sage); color: var(--black); font-size: 0.7rem; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.checkout__step-toggle { margin-left: auto; color: var(--ivory-faint); font-size: 0.75rem; transition: transform var(--t); }
.checkout__step.open .checkout__step-toggle { transform: rotate(180deg); }
.checkout__step-body { padding: 0 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.checkout__step-body--closed { display: none; }
.checkout__step.open .checkout__step-body { display: flex; }
.checkout__step-body label { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--fs-xs); color: var(--ivory-dim); }
.checkout__step-body label small { color: var(--ivory-faint); }
.checkout__step-body input[type="text"],
.checkout__step-body input[type="email"],
.checkout__step-body input[type="tel"] { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 0.55em 0.8em; color: var(--ivory); font-family: var(--ff-sans); font-size: var(--fs-sm); outline: none; transition: border-color var(--t); }
.checkout__step-body input:focus { border-color: var(--sage-dim); }
.checkout__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.checkout__delivery { display: flex; flex-direction: column; gap: 0.5rem; }
.checkout__delivery-opt { display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-xs) !important; color: var(--ivory-dim) !important; flex-direction: row !important; padding: 0.75rem; border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer; transition: border-color var(--t); }
.checkout__delivery-opt--selected { border-color: var(--sage-dim); background: rgba(139,168,136,0.06); }
.checkout__delivery-opt span { flex-grow: 1; }
.checkout__delivery-opt strong { color: var(--sage); font-weight: 400; }
.checkout__payment-note { font-size: var(--fs-xs); color: var(--ivory-faint); line-height: var(--lh-loose); }
.checkout__assurances { display: flex; flex-direction: column; gap: 0.4rem; }
.checkout__assurances div { font-size: var(--fs-xs); color: var(--ivory-faint); padding-left: 1rem; position: relative; }
.checkout__assurances div::before { content: '✓'; position: absolute; left: 0; color: var(--sage); }

/* ============================================================ RESPONSIVE */
@media (max-width: 768px) {
  .nav { padding: 1rem; }
  .nav__links { gap: 1rem; }
  .nav__links a:first-child { display: none; }
  .hero { padding: 3.5rem 1.25rem 3rem; }
  .hero__headline { font-size: 2.4rem; }
  .editorial { padding: 3.5rem 1.25rem; }
  .routine { padding: 4rem 1.25rem; }
  .routine__steps { grid-template-columns: 1fr; gap: 2rem; }
  .routine__divider { display: none; }
  .routine__step, .routine__step:first-child, .routine__step:last-child { padding: 0; }
  .contents { padding: 4rem 1.25rem; }
  .contents__item { grid-template-columns: 1fr; gap: 1.5rem; }
  .contents__item--reverse { direction: ltr; }
  .contents__text, .contents__item--reverse .contents__text { padding: 0; }
  .contents__img-wrap img { height: 240px; }
  .craft { padding: 4rem 1.25rem; }
  .offer { padding: 4rem 1.25rem; }
  .offer__cards { grid-template-columns: 1fr; }
  .offer__return { flex-direction: column; gap: 1rem; }
  .faq { padding: 4rem 1.25rem; }
  .disclaimer { padding: 4rem 1.25rem; }
  .checkout { width: 100vw; }
  .checkout__row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero__headline { font-size: 1.9rem; }
}