/* ============================================================
   AROMA CONDUCTOR — shared styles
   Palette: Sky #BAE0E8 · Mint #BAE8BD · Sand #F0D8A3 · Lilac #BEAFE0
   ============================================================ */

:root{
  --sky:   #BAE0E8;
  --mint:  #BAE8BD;
  --sand:  #F0D8A3;
  --lilac: #BEAFE0;

  --sky-deep:   #8FC6D2;
  --mint-deep:  #8FD096;
  --sand-deep:  #DDBC73;
  --lilac-deep: #9F8BCE;

  --ink:   #14131a;
  --ink-60: rgba(20,19,26,0.62);
  --paper: #FAFAF7;
  --line:  rgba(20,19,26,0.14);

  --display: 'Marcellus', serif;
  --body: 'Archivo', sans-serif;

  --pad-x: clamp(24px, 5vw, 72px);
  --radius: 2px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation:none !important; transition:none !important;}
}

body{
  font-family:var(--body);
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.08;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
button{font-family:var(--body);}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}

.eyebrow{
  font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ink-60); margin-bottom:14px;
}

/* ---------- NAV ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px var(--pad-x);
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:52px; width:auto; mix-blend-mode:multiply;}
.brand-name{
  font-family:var(--display); font-size:1.05rem; letter-spacing:0.14em;
  text-transform:uppercase;
}
.nav-links{display:flex; gap:32px; font-size:0.9rem; letter-spacing:0.05em;}
.nav-links a{padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .15s;}
.nav-links a:hover, .nav-links a.active{border-bottom-color:var(--ink);}
.nav-cart{font-size:0.9rem; letter-spacing:0.05em;}
.nav-cart a{border:1px solid var(--ink); padding:9px 18px; transition:background .15s, color .15s;}
.nav-cart a:hover{background:var(--ink); color:var(--paper);}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block; text-align:center;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); border-radius:var(--radius);
  padding:15px 34px;
  font-size:0.85rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
  cursor:pointer; transition:background .15s, color .15s;
}
.btn:hover{background:transparent; color:var(--ink);}
.btn.ghost{background:transparent; color:var(--ink);}
.btn.ghost:hover{background:var(--ink); color:var(--paper);}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}
.btn.full{width:100%;}

/* ---------- HERO ---------- */
.hero{
  padding:clamp(56px, 9vw, 120px) var(--pad-x) clamp(48px, 7vw, 96px);
  text-align:center; position:relative; overflow:hidden;
}
.hero-mark{height:clamp(200px, 30vw, 400px); margin:0 auto 8px; mix-blend-mode:multiply;}
.hero h1{
  font-size:clamp(1.6rem, 3.6vw, 2.6rem);
  letter-spacing:0.28em; text-transform:uppercase;
  color:var(--ink-60); font-family:var(--body); font-weight:500;
}
.hero-copy{
  max-width:520px; margin:22px auto 40px;
  font-size:1.05rem; color:var(--ink-60);
}
.hero-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.hero-swatches{
  display:flex; justify-content:center; margin-top:clamp(48px, 7vw, 80px);
}
.hero-swatches span{
  width:clamp(60px, 12vw, 120px); height:8px;
}

/* ---------- SECTIONS ---------- */
.section{padding:clamp(64px, 9vw, 110px) var(--pad-x);}
.section-head{max-width:640px; margin-bottom:clamp(36px, 5vw, 56px);}
.section-head h2{font-size:clamp(1.9rem, 4vw, 3rem); letter-spacing:0.03em;}
.section-head p{margin-top:14px; color:var(--ink-60);}

/* ---------- PRODUCT GRID ---------- */
.products-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:28px;
  max-width:1280px; margin:0 auto;
}
.product-card{
  border:1px solid var(--line); background:#fff;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(20,19,26,0.09);}
.card-visual{aspect-ratio:1/0.85;}
.card-visual svg{width:100%; height:100%;}
.card-body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1;}
.product-name{font-family:var(--display); font-size:1.45rem; letter-spacing:0.04em;}
.product-meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:6px 0 14px; color:var(--ink-60); font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase;
}
.product-price{font-size:1.05rem; color:var(--ink); font-weight:500; letter-spacing:0.02em;}
.product-desc{color:var(--ink-60); font-size:0.95rem; margin-bottom:20px;}
.notes-list{margin-bottom:24px; border-top:1px solid var(--line);}
.notes-list > div{
  display:grid; grid-template-columns:56px 1fr; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:0.85rem;
}
.notes-list .layer{letter-spacing:0.18em; text-transform:uppercase; font-size:0.68rem; color:var(--ink-60); padding-top:3px;}
.card-body .btn{margin-top:auto;}

/* ---------- CUSTOM SCENT TEASER ---------- */
.custom-teaser{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px, 6vw, 80px); align-items:center;
  max-width:1280px; margin:0 auto;
}
.custom-teaser h2{font-size:clamp(1.9rem, 4vw, 3rem);}
.custom-teaser p{margin:16px 0 30px; color:var(--ink-60);}
.teaser-visual svg{width:100%;}

/* ---------- ABOUT ---------- */
.about-grid{
  display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(36px, 6vw, 80px);
  max-width:1280px; margin:0 auto;
}
.about-grid p{color:var(--ink-60); margin-bottom:14px;}

/* ---------- FOOTER ---------- */
.footer{
  border-top:1px solid var(--line);
  padding:48px var(--pad-x);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;
}
.footer .brand img{height:46px;}
.footer-contact{font-size:0.9rem; color:var(--ink-60); text-align:right;}
.footer-contact div{margin-bottom:6px;}
.footer-strip{display:flex; height:6px;}
.footer-strip span{flex:1;}

/* ---------- PAGE HEADER ---------- */
.page-header{
  padding:clamp(48px, 7vw, 88px) var(--pad-x) clamp(24px, 4vw, 44px);
  text-align:center;
}
.page-header h1{font-size:clamp(2.2rem, 5.5vw, 3.8rem); letter-spacing:0.05em; text-transform:uppercase;}
.page-header p{color:var(--ink-60); max-width:520px; margin:16px auto 0;}

/* ---------- CUSTOM FORM ---------- */
.custom-wrap{max-width:880px; margin:0 auto; padding:0 var(--pad-x) 110px;}
.form-block{
  border:1px solid var(--line); background:#fff;
  padding:clamp(24px, 4vw, 40px); margin-bottom:26px;
}
.form-block-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:6px;}
.form-block h3{font-size:1.3rem; letter-spacing:0.03em;}
.form-block .limit{font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-60); white-space:nowrap;}
.form-block .hint{color:var(--ink-60); font-size:0.9rem; margin-bottom:18px;}
.check-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px;
}
.check-grid label{
  display:flex; align-items:center; gap:9px;
  border:1px solid var(--line); padding:10px 12px;
  font-size:0.88rem; cursor:pointer; user-select:none;
  transition:background .12s, border-color .12s;
}
.check-grid label:hover{border-color:var(--ink);}
.check-grid input{accent-color:var(--ink); width:15px; height:15px; flex:none;}
.check-grid input:checked + span{font-weight:500;}
.check-grid label:has(input:checked){background:var(--accent-wash, var(--sand)); border-color:var(--ink);}
.check-grid label:has(input:disabled:not(:checked)){opacity:0.4; cursor:not-allowed;}
textarea{
  width:100%; min-height:120px; resize:vertical;
  border:1px solid var(--line); padding:14px;
  font-family:var(--body); font-size:0.95rem; background:var(--paper);
}
textarea:focus{outline:2px solid var(--ink); outline-offset:0;}
.custom-summary{
  border:1px solid var(--ink); background:#fff;
  padding:clamp(24px, 4vw, 36px);
  display:flex; flex-direction:column; gap:16px;
}
.custom-summary .price-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--display); font-size:1.35rem;
}
.form-error{color:#a03024; font-size:0.9rem; display:none;}

/* ---------- CART ---------- */
.cart-wrap{max-width:820px; margin:0 auto; padding:0 var(--pad-x) 110px;}
.cart-empty{text-align:center; padding:56px 20px; color:var(--ink-60);}
.cart-empty .btn{margin-top:22px;}
.cart-row{
  display:grid; grid-template-columns:1fr auto auto auto; gap:22px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.cart-row-name{font-family:var(--display); font-size:1.15rem; letter-spacing:0.02em;}
.cart-row-meta{color:var(--ink-60); font-size:0.85rem; margin-top:3px; max-width:420px;}
.cart-row-qty{display:flex; align-items:center; gap:12px;}
.cart-row-qty button{
  width:30px; height:30px; border:1px solid var(--ink); background:none;
  font-size:1rem; cursor:pointer; line-height:1; transition:background .12s, color .12s;
}
.cart-row-qty button:hover{background:var(--ink); color:var(--paper);}
.cart-row-price{font-weight:500; min-width:74px; text-align:right;}
.cart-row-remove{
  background:none; border:none; color:var(--ink-60); text-decoration:underline;
  font-size:0.82rem; cursor:pointer;
}
.cart-summary{margin-top:34px; margin-left:auto; max-width:340px; display:none; flex-direction:column; gap:10px;}
.summary-line{display:flex; justify-content:space-between; font-size:0.95rem;}
.summary-line .label{color:var(--ink-60);}
.summary-line.total{
  border-top:1px solid var(--ink); padding-top:12px; margin-top:6px;
  font-family:var(--display); font-size:1.25rem;
}
.cart-summary .btn{margin-top:14px;}
.shipping-note{font-size:0.8rem; color:var(--ink-60);}

/* ---------- SUCCESS ---------- */
.success-wrap{max-width:560px; margin:0 auto; text-align:center; padding:clamp(64px,10vw,120px) var(--pad-x) 120px;}
.success-wrap h1{font-size:clamp(2rem, 5vw, 3rem); letter-spacing:0.05em; text-transform:uppercase; margin:24px 0 16px;}
.success-wrap p{color:var(--ink-60); margin-bottom:30px;}

/* ---------- WASHES ---------- */
.wash-sky{background:var(--sky);}
.wash-mint{background:var(--mint);}
.wash-sand{background:var(--sand);}
.wash-lilac{background:var(--lilac);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:880px){
  .custom-teaser, .about-grid{grid-template-columns:1fr;}
  .nav-links{gap:18px; font-size:0.82rem;}
}
@media (max-width:620px){
  .brand-name{display:none;}
  .cart-row{grid-template-columns:1fr auto; row-gap:10px;}
  .cart-row-price{text-align:left;}
  .footer{flex-direction:column; align-items:flex-start;}
  .footer-contact{text-align:left;}
}