/* Epijaca.world — stylesheet
   Calm "apothecary shelf" theme: warm stone background, deep teal + dusty
   berry accents, uniform generous radii with a small stamped corner tick
   instead of organic asymmetric shapes. Serif display type paired with a
   geometric sans for body copy. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --stone: #f4f0e7;
  --stone-dim: #ece4d2;
  --line: #ddd2b8;
  --ink: #23281f;
  --ink-soft: #565f52;
  --ink-faint: #8c9284;
  --teal: #2c5f5a;
  --teal-deep: #1c403c;
  --teal-mist: #dfe9e4;
  --berry: #9c4256;
  --berry-deep: #762f3f;
  --berry-mist: #f2dfe2;
  --amber: #c98a34;
  --white: #ffffff;
  --ok: #3d7a4c;
  --bad: #ae3b2e;

  --radius: 22px;
  --radius-sm: 13px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 28px rgba(28, 30, 20, 0.08);
  --shadow-lift: 0 20px 44px rgba(28, 30, 20, 0.14);

  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shell: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--stone);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg{ display:block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

.shell{
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 .5em;
  font-weight: 600;
  line-height: 1.16;
}
h1{ font-size: clamp(2.15rem, 4.3vw, 3.3rem); }
h2{ font-size: clamp(1.65rem, 2.8vw, 2.3rem); }
h3{ font-size: 1.22rem; }
p{ margin: 0 0 1em; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
}
.kicker::before{
  content:"";
  width:16px; height:2px;
  background: var(--berry);
  border-radius: 2px;
}

.lede{
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 600px;
}

/* corner tick — small stamped mark used on cards for a distinct crafted feel */
.ticked{ position: relative; }
.ticked::before{
  content:"";
  position:absolute;
  top: 14px; left: 14px;
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--amber);
  z-index: 2;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: .82em 1.65em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .95rem;
  border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--teal);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover{ background: var(--teal-deep); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn-outline{
  background: transparent;
  border-color: var(--teal);
  color: var(--teal-deep);
}
.btn-outline:hover{ background: var(--teal-mist); }
.btn-berry{
  background: var(--berry);
  color: var(--white);
}
.btn-berry:hover{ background: var(--berry-deep); }
.btn-dark{
  background: var(--ink);
  color: var(--stone);
}
.btn-dark:hover{ background: var(--teal-deep); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:default; transform:none !important; }
.btn-sm{ padding:.55em 1.15em; font-size:.85rem; }

/* ---------- header ---------- */
.masthead{
  position: sticky;
  top:0;
  z-index: 40;
  background: rgba(244, 240, 231, 0.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead-strip{
  background: var(--teal-deep);
  color: #e7ece6;
  font-size: .78rem;
}
.masthead-strip .shell{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:7px; padding-bottom:7px; gap:16px; flex-wrap:wrap;
}
.masthead-strip a{ opacity:.92; }
.masthead-strip a:hover{ opacity:1; text-decoration: underline; }

.masthead .shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.34rem;
  color: var(--ink);
}
.brand .mark{ width: 36px; height:36px; flex-shrink:0; }
.brand small{
  display:block;
  font-family: var(--font-body);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.16em;
  color: var(--berry);
  text-transform: uppercase;
}

.primary-nav{
  display:flex;
  align-items:center;
  gap: 30px;
}
.primary-nav a{
  font-weight:600;
  font-size:.94rem;
  color: var(--ink-soft);
  position:relative;
  padding: 4px 0;
}
.primary-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-3px;
  height:2px; background: var(--berry);
  transition: right .2s ease;
}
.primary-nav a:hover::after, .primary-nav a.active::after{ right:0; }
.primary-nav a.active{ color: var(--ink); }

.head-actions{ display:flex; align-items:center; gap:12px; }
.cart-chip{
  display:flex; align-items:center; gap:8px;
  padding: .5em 1.05em;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  font-weight:700; font-size:.87rem;
  background: var(--white);
}
.cart-chip svg{ width:16px; height:16px; }
.cart-chip .cart-count{
  background: var(--berry); color:#fff;
  min-width: 19px; height:19px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.7rem;
}
.nav-toggle{
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none; padding:6px;
}
.nav-toggle span{ width:23px; height:2px; background: var(--ink); border-radius:2px; }

/* ---------- intro / hero ---------- */
.intro{
  padding: 54px 0 60px;
  overflow: hidden;
  position: relative;
}
.intro .shell{
  display:grid;
  grid-template-columns: 1fr .86fr;
  gap: 46px;
  align-items:center;
}
.intro-copy .btn-row{ display:flex; gap:14px; margin-top: 26px; flex-wrap:wrap; }
.intro-art{ position:relative; }
.intro-art img{ width:100%; height:auto; border-radius: var(--radius); }
.intro-badges{
  display:flex; gap:20px; margin-top:32px; flex-wrap:wrap;
  font-size:.84rem; color: var(--ink-faint); font-weight:600;
}
.intro-badges span{ display:flex; align-items:center; gap:7px; }
.intro-badges svg{ width:17px; height:17px; color: var(--teal); flex-shrink:0; }

/* ---------- sections ---------- */
section{ padding: 62px 0; }
.section-head{ max-width: 640px; margin-bottom: 38px; }
.tint{ background: var(--stone-dim); }

/* reasons grid (benefits) */
.reasons-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.reason-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.reason-card .icon{
  width:44px; height:44px;
  border-radius: 12px;
  background: var(--teal-mist);
  color: var(--teal-deep);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 15px;
}
.reason-card .icon svg{ width:22px; height:22px; }
.reason-card h3{ font-size: 1.05rem; }
.reason-card p{ font-size:.92rem; margin-bottom:0; color: var(--ink-soft); }

/* lineup (product grid) */
.lineup-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lineup-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lineup-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.lineup-card .thumb{
  background: var(--teal-mist);
  padding: 24px;
  aspect-ratio: 4/3;
  display:flex; align-items:center; justify-content:center;
  position: relative;
}
.lineup-card .thumb img{ width:76%; height:76%; object-fit:contain; }
.lineup-card .body{ padding: 19px 21px 22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.lineup-card .tag{
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color: var(--berry-deep);
}
.lineup-card p{ font-size:.9rem; color: var(--ink-soft); margin-bottom: 3px; flex:1; }
.lineup-card .price-row{
  display:flex; align-items:center; justify-content:space-between; margin-top:auto;
}
.price{ font-family: var(--font-display); font-weight:700; font-size:1.18rem; color: var(--ink); }
.price .old{
  font-family: var(--font-body); font-size:.8rem; color: var(--ink-faint);
  text-decoration: line-through; font-weight:600; margin-right:6px;
}

/* voices (testimonials) */
.voices-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}
.voice-card{
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  padding: 22px;
}
.voice-card .stars{ color: var(--amber); letter-spacing:2px; margin-bottom:9px; font-size:.88rem; }
.voice-card p{ font-size:.92rem; color: var(--ink-soft); }
.voice-who{ display:flex; align-items:center; gap:10px; margin-top:13px; }
.avatar{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; color:#fff; font-size:.92rem;
}
.voice-who .name{ font-weight:700; color: var(--ink); font-size:.86rem; }
.voice-who .place{ font-size:.76rem; color: var(--ink-faint); }

/* Q&A accordion */
.qa-list{ max-width: 760px; }
.qa-item{
  border-bottom: 1px solid var(--line);
}
.qa-item summary{
  padding: 17px 4px;
  font-weight:700;
  color: var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  list-style:none;
  cursor: pointer;
}
.qa-item summary::-webkit-details-marker{ display:none; }
.qa-item summary::after{
  content:"+";
  font-size:1.35rem; color: var(--berry); font-weight:400; margin-left:16px;
}
.qa-item[open] summary::after{ content:"–"; }
.qa-item .qa-a{ padding: 0 4px 17px; color: var(--ink-soft); font-size:.94rem; }

/* cta panel */
.cta-panel{
  background: var(--teal-deep);
  color: var(--stone);
  border-radius: var(--radius);
  padding: 42px;
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  flex-wrap:wrap;
  position: relative;
}
.cta-panel h2{ color:#fff; margin-bottom:.3em; }
.cta-panel p{ color: #cdd8d2; margin-bottom:0; max-width: 480px; }

/* ---------- footer ---------- */
.mast-foot{
  background: var(--ink);
  color: #c7cdc0;
  padding: 54px 0 26px;
  font-size:.91rem;
}
.foot-cols{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.foot-brand .brand{ color:#fff; }
.foot-brand p{ color:#9ca394; font-size:.87rem; max-width: 280px; margin-top:12px; }
.foot-col h4{
  color:#fff; font-family: var(--font-body); font-size:.8rem;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:13px;
}
.foot-col a{ display:block; color:#9ca394; padding:5px 0; }
.foot-col a:hover{ color:#fff; }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 20px; flex-wrap:wrap; gap:10px;
  font-size:.79rem; color:#82896f;
}

/* ---------- cookie consent ---------- */
.consent-bar{
  position: fixed;
  left: 18px; right:18px; bottom: -220px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  padding: 22px 24px;
  z-index: 90;
  transition: bottom .4s ease;
}
.consent-bar.show{ bottom: 18px; }
.consent-bar p{ font-size:.87rem; color: var(--ink-soft); margin-bottom: 14px; }
.consent-bar .actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- inner page intro ---------- */
.section-intro{
  padding: 42px 0 38px;
  border-bottom: 1px solid var(--line);
}
.crumbs{ font-size:.81rem; color: var(--ink-faint); margin-bottom:13px; }
.crumbs a:hover{ color: var(--teal); }

/* ---------- product page layout ---------- */
.product-view{ padding: 46px 0 18px; }
.product-view .shell{
  display:grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 50px;
  align-items:flex-start;
}
.product-shot{
  background: var(--teal-mist);
  border-radius: var(--radius);
  padding: 38px;
  position: sticky;
  top: 100px;
}
.product-shot img{ width:100%; height:auto; border-radius: var(--radius-sm); }
.product-info .tag{
  font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--berry-deep);
}
.stars-row{ display:flex; align-items:center; gap:8px; margin:9px 0 17px; color: var(--amber); font-size:.94rem; }
.stars-row .count{ color: var(--ink-faint); font-size:.84rem; }
.price-block{
  display:flex; align-items:baseline; gap:12px; margin: 17px 0 21px;
}
.price-block .price{ font-size:1.85rem; }
.order-box{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 21px;
  margin: 25px 0;
}
.qty-row{ display:flex; align-items:center; gap:16px; margin-bottom:15px; }
.stepper{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius: var(--radius-pill); overflow:hidden; }
.stepper button{ background: var(--stone-dim); border:none; width:35px; height:35px; font-size:1.05rem; }
.stepper input{ width:42px; text-align:center; border:none; background:transparent; font-weight:700; }
.order-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.order-actions .btn{ flex:1; }
.mini-note{ font-size:.81rem; color: var(--ink-faint); margin-top:13px; display:flex; gap:8px; align-items:flex-start; }
.mini-note svg{ flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }

.detail-blocks{ margin-top: 44px; }
.detail-blocks .block{ margin-bottom: 32px; }
.detail-blocks h3{ font-size:1.12rem; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:15px; }
.spec-table{ width:100%; border-collapse: collapse; font-size:.91rem; }
.spec-table td{ padding:10px 0; border-bottom:1px dashed var(--line); }
.spec-table td:first-child{ color: var(--ink-faint); width:40%; }
.note-box{
  background: var(--stone-dim);
  border-left: 3px solid var(--berry);
  padding: 15px 19px;
  border-radius: 4px 13px 4px 13px;
  font-size:.83rem;
  color: var(--ink-faint);
  margin-top: 32px;
}

/* ---------- forms ---------- */
.form-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 560px;
}
.fld{ margin-bottom: 17px; }
.fld label{ display:block; font-size:.85rem; font-weight:700; color: var(--ink); margin-bottom:6px; }
.fld input, .fld textarea{
  width:100%;
  padding: .78em .9em;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--stone);
  color: var(--ink);
}
.fld input:focus, .fld textarea:focus{ outline: 2px solid var(--teal); border-color: var(--teal); }
.fld-pair{ display:grid; grid-template-columns: 1fr 1fr; gap:15px; }
.trap{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.form-note{ margin-top:13px; padding:12px 14px; border-radius:10px; font-size:.87rem; }
.form-note--success{ background: var(--teal-mist); color: var(--teal-deep); }
.form-note--error{ background: #f8dcd6; color: var(--bad); }

/* checkout / basket tables */
.basket-table{ width:100%; border-collapse: collapse; }
.basket-table th{ text-align:left; font-size:.77rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-faint); padding-bottom:12px; border-bottom:1px solid var(--line); }
.basket-table td{ padding: 15px 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.basket-line{ display:flex; align-items:center; gap:14px; }
.basket-line .thumb{ width:54px; height:54px; background: var(--teal-mist); border-radius: 10px; display:flex; align-items:center; justify-content:center; padding:8px; }
.order-summary{
  background: var(--stone-dim);
  border-radius: var(--radius-sm);
  padding: 23px;
  margin-top: 25px;
}
.summary-row{ display:flex; justify-content:space-between; padding:8px 0; font-size:.93rem; }
.summary-row.total{ font-weight:800; font-size:1.13rem; color: var(--ink); border-top:1px solid var(--line); margin-top:8px; padding-top:13px; }
.empty-state{ text-align:center; padding: 58px 20px; }

/* toast */
.toast{
  position: fixed; bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color:#fff;
  padding: 12px 20px; border-radius: var(--radius-pill);
  font-size:.87rem; font-weight:600;
  opacity:0; z-index:120;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* legal / policy pages */
.legal-copy{ max-width: 760px; }
.legal-copy h2{ margin-top: 1.9em; font-size:1.38rem; }
.legal-copy h3{ font-size:1.04rem; margin-top:1.3em; }
.legal-copy ul{ list-style: disc; padding-left: 1.3em; margin-bottom:1em; }
.legal-copy li{ margin-bottom:.4em; }
.updated-note{ color: var(--ink-faint); font-size:.85rem; }

/* about page pillars */
.pillars{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; margin-top:28px; }
.pillar{ display:flex; gap:14px; }
.pillar .num{ font-family: var(--font-display); font-size:1.55rem; color: var(--berry); flex-shrink:0; }
.pillar > svg{ width:26px; height:26px; flex-shrink:0; color: var(--teal); margin-top:4px; }
.pillar p{ margin-bottom:.3em; }

/* responsive */
@media (max-width: 980px){
  .intro .shell{ grid-template-columns: 1fr; }
  .intro-art{ order:-1; max-width:420px; margin:0 auto; }
  .reasons-grid, .lineup-grid, .voices-grid{ grid-template-columns: repeat(2,1fr); }
  .product-view .shell{ grid-template-columns: 1fr; }
  .product-shot{ position: static; max-width: 420px; margin: 0 auto; }
  .foot-cols{ grid-template-columns: 1fr 1fr; }
  .pillars{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .primary-nav{
    position:fixed; top:60px; left:0; right:0; bottom:0;
    background: var(--stone);
    flex-direction:column; align-items:flex-start; gap:0;
    padding: 12px 24px; transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y:auto;
    z-index: 39;
  }
  .primary-nav.active{ transform: translateX(0); }
  .primary-nav a{ padding: 14px 0; width:100%; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:flex; }
  .head-actions .btn-outline{ display:none; }
  .masthead-strip .shell{ justify-content:center; text-align:center; }
  .masthead-strip a{ display:none; }
}
@media (max-width: 620px){
  .reasons-grid, .lineup-grid, .voices-grid{ grid-template-columns: 1fr; }
  .fld-pair{ grid-template-columns: 1fr; }
  .foot-cols{ grid-template-columns: 1fr; }
  .cta-panel{ flex-direction:column; align-items:flex-start; }
  h1{ font-size: 2.05rem; }
}