/* ===== Miris Čajnog Lista — Gothic Tea Revival ===== */
@view-transition { navigation: auto; }

:root{
  --plum: #2c1826;
  --plum-deep: #1b0f18;
  --plum-soft: #3e2537;
  --candle: #d9a14b;
  --candle-light: #f0c479;
  --sage: #6f8a5e;
  --sage-deep: #4f6a42;
  --sage-pale: #cedabb;
  --cream: #f8f2e4;
  --cream-deep: #efe4cd;
  --peach: #e9c3a1;
  --lilac: #c7b2d6;
  --ink: #2a2017;
  --ink-soft: #5b4d3d;
  --radius: 18px;
  --container: 1220px;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Consolas", "Courier New", monospace;
  --shadow-soft: 0 18px 40px -20px rgba(27,15,24,.45);
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ overflow-x: clip; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--serif); margin:0 0 .5em; color: var(--plum); line-height:1.1; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; }
button{ font-family: inherit; }

.container{ width:100%; max-width: var(--container); margin-inline:auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }

:focus-visible{
  outline: 3px solid var(--candle);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection{ background: var(--sage-pale); color: var(--plum-deep); }

/* ===== reveal-on-scroll ===== */
.reveal{ opacity: 1; }
.reveal.js-hide{ opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease, clip-path .7s ease; }
.reveal.js-hide.in-view{ opacity: 1; transform: none; }
.reveal.js-hide[data-reveal="clip"]{ clip-path: inset(0 0 100% 0); transform:none; }
.reveal.js-hide[data-reveal="clip"].in-view{ clip-path: inset(0 0 0% 0); }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal.js-hide{ opacity:1 !important; transform:none !important; clip-path:none !important; }
}

/* ===== grain overlay ===== */
.grain{ position: fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:999; opacity:.05; mix-blend-mode:overlay; }

/* ===== skip link ===== */
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--candle); color:var(--plum-deep); padding:.6em 1em; z-index:1000; }
.skip-link:focus{ left: 1rem; top: 1rem; }

/* ===== header ===== */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: var(--plum);
  color: var(--cream);
  border-bottom: 1px solid rgba(217,161,75,.35);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem; }
.brand{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.brand svg{ width:42px; height:42px; flex-shrink:0; }
.brand .word{ width: 168px; height:30px; }
.brand .word path, .brand .word text{ fill: var(--cream); }

.main-nav{ display:flex; align-items:center; gap: clamp(.8rem, 2vw, 1.8rem); }
.main-nav a{
  position:relative; font-size:.95rem; letter-spacing:.02em; padding:.3em 0; white-space:nowrap;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: var(--candle);
  transition: width .3s ease;
}
.main-nav a:hover::after, .main-nav a:focus-visible::after{ width:100%; }
.main-nav a[aria-current="page"]{ color: var(--candle-light); }

.header-actions{ display:flex; align-items:center; gap:.9rem; }
.cart-link{ display:flex; align-items:center; gap:.4em; }
.cart-link svg{ width:22px; height:22px; stroke: var(--cream); }
.cart-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:1.5em; height:1.5em;
  background: var(--candle); color: var(--plum-deep); border-radius:50%; font-size:.78rem; font-weight:700;
  padding: 0 .3em;
}
.cart-count.bump{ animation: bump .4s ease; }
@keyframes bump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.4); } 100%{ transform:scale(1); } }

.nav-toggle{
  display:none; background:none; border:2px solid var(--candle); border-radius:8px; width:44px; height:44px;
  align-items:center; justify-content:center; color:var(--cream); cursor:pointer;
}
.nav-toggle svg{ width:22px; height:22px; stroke: currentColor; }

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 330px); height:100vh;
    background: var(--plum-deep); flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 5.5rem 1.6rem 2rem; gap: 1.3rem;
    transform: translateX(100%); visibility: hidden; transition: transform .35s ease, visibility .35s ease;
    border-left: 1px solid rgba(217,161,75,.35);
  }
  .main-nav.open{ transform: translateX(0); visibility: visible; }
  .main-nav a{ font-size: 1.05rem; }
  .nav-scrim{ position:fixed; inset:0; background: rgba(27,15,24,.55); z-index:490; opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease; }
  .nav-scrim.open{ opacity:1; visibility:visible; }
}

/* ===== hero ===== */
.hero{ position:relative; background: var(--plum); color: var(--cream); overflow:hidden; }
.hero .rose-window{
  position:absolute; top: -8%; right: -10%; width: min(60vw, 560px); height: min(60vw, 560px);
  opacity:.16; animation: spin 140s linear infinite;
}
.hero-grid{
  position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem,4vw,3rem);
  align-items:center; padding-block: clamp(2.6rem, 7vw, 5.5rem);
}
.hero-copy .eyebrow{ display:inline-flex; align-items:center; gap:.5em; color: var(--candle-light); font-family: var(--mono); letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; margin-bottom:1em; }
.hero-copy h1{ color: var(--cream); font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing:-.01em; }
.hero-copy .lede{ font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--cream-deep); max-width: 34em; }
.hero-actions{ display:flex; gap: .9rem; flex-wrap:wrap; margin-top: 1.4rem; }

.hero-media{ position:relative; aspect-ratio: 4/5; }
.hero-media .frame{
  position:absolute; inset:0; clip-path: url(#archClip); overflow:hidden; background: var(--plum-soft);
}
.hero-media img{ width:100%; height:100%; object-fit:cover; transform: scale(1.12); transition: transform 1.1s ease; }
.hero-media.in-view img{ transform: scale(1); }
.hero-media .sprig{ position:absolute; bottom:-10%; left:-14%; width:46%; opacity:.95; filter: drop-shadow(0 10px 18px rgba(27,15,24,.4)); }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ order:-1; max-width: 360px; margin-inline:auto; }
}

/* ===== buttons ===== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.6em; border-radius: 999px; font-weight:600; font-size:.95rem; border:2px solid transparent;
  cursor:pointer; overflow:hidden; isolation:isolate; min-height:44px; transition: color .3s ease, border-color .3s ease, transform .15s ease;
}
.btn::before{
  content:""; position:absolute; inset:0; left:-100%; width:100%; z-index:-1; transition: left .35s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--candle); color: var(--plum-deep); }
.btn-primary::before{ background: var(--candle-light); }
.btn-primary:hover::before, .btn-primary:focus-visible::before{ left:0; }

.btn-outline{ border-color: var(--candle); color: var(--cream); background: transparent; }
.btn-outline::before{ background: var(--candle); }
.btn-outline:hover, .btn-outline:focus-visible{ color: var(--plum-deep); }
.btn-outline:hover::before, .btn-outline:focus-visible::before{ left:0; }

.btn-dark{ border-color: var(--plum); color: var(--plum); }
.btn-dark::before{ background: var(--plum); }
.btn-dark:hover, .btn-dark:focus-visible{ color: var(--cream); }
.btn-dark:hover::before, .btn-dark:focus-visible::before{ left:0; }

.btn-ghost{ border-color: var(--cream); color: var(--cream); background:transparent; }
.btn-ghost::before{ background: rgba(248,242,228,.18); }
.btn-ghost:hover::before, .btn-ghost:focus-visible::before{ left:0; }

.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn svg{ width:18px; height:18px; stroke:currentColor; position:relative; z-index:1; }
.btn span{ position:relative; z-index:1; }

/* ===== numbers grid (home composition) ===== */
.numbers{ background: var(--cream); padding-block: clamp(3rem, 7vw, 5.5rem); position:relative; }
.numbers-head{ max-width: 42em; margin-bottom: 2.4rem; }
.numbers-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-soft); border:1px solid var(--ink-soft); }
.num-card{
  position:relative; background: var(--cream); padding: 2rem 1.4rem 1.6rem; min-height: 230px;
  display:flex; flex-direction:column; justify-content:space-between; transition: background .3s ease;
}
.num-card:hover{ background: var(--cream-deep); }
.num-card .idx{
  font-family: var(--serif); font-size: clamp(3rem, 7vw, 4.6rem); color: transparent;
  -webkit-text-stroke: 1.5px var(--plum); line-height:1;
}
.num-card:hover .idx{ color: var(--candle); -webkit-text-stroke: 1.5px var(--plum); }
.num-card h3{ font-size: 1.2rem; margin: .5rem 0 .3rem; }
.num-card p{ color: var(--ink-soft); font-size: .92rem; margin:0; }
.num-card .go{ display:inline-flex; align-items:center; gap:.4em; margin-top:1rem; font-size:.85rem; font-weight:700; color: var(--sage-deep); }
.num-card .go svg{ width:16px; height:16px; stroke:currentColor; transition: transform .25s ease; }
.num-card:hover .go svg{ transform: translateX(5px); }

@media (max-width: 760px){ .numbers-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px){ .numbers-grid{ grid-template-columns: 1fr; } }

/* ===== section basics ===== */
.section{ padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.section-dark{ background: var(--plum); color: var(--cream); }
.section-dark h2, .section-dark h3{ color: var(--cream); }
.section-sage{ background: var(--sage-pale); }
.section-head{ max-width: 46em; margin-bottom: 2.2rem; }
.section-head .eyebrow{ font-family: var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; color: var(--sage-deep); }
.section-dark .section-head .eyebrow{ color: var(--candle-light); }

.divider{ display:block; width:100%; height:auto; max-width:300px; }
.divider-wrap{ display:flex; justify-content:center; padding: .4rem 0 1.6rem; }

/* ===== product grid / strip ===== */
.product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 1.6rem; }
.card{
  background: var(--cream); border:1px solid rgba(42,32,23,.1); border-radius: var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform: translateY(-7px); box-shadow: var(--shadow-soft); }
.card .thumb{ aspect-ratio: 1/1; overflow:hidden; background: var(--sage-pale); }
.card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.card:hover .thumb img{ transform: scale(1.08); }
.card .body{ padding: 1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card .cat{ font-family: var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--sage-deep); }
.card h3{ font-size: 1.12rem; margin:0; }
.card .price{ font-weight:700; color: var(--plum); margin-top:auto; font-size:1.1rem; }
.card .foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.4rem; }

.product-strip{ display:flex; gap:1.2rem; overflow-x:auto; padding-bottom:.6rem; scroll-snap-type:x mandatory; margin: 0 -0.2rem; padding-inline:.2rem; }
.product-strip .card{ min-width: 230px; scroll-snap-align:start; }

@media (min-width: 640px){ .product-strip{ overflow:visible; display:grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); } }

.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: 1.8rem; }
.filters button{
  border:1px solid var(--plum); background:transparent; color:var(--plum); border-radius:999px; padding:.5em 1.1em;
  font-size:.86rem; cursor:pointer; min-height:40px; transition: background .25s ease, color .25s ease;
}
.filters button.active, .filters button:hover{ background: var(--plum); color: var(--cream); }

/* ===== feature: Čajni Ritual ===== */
.ritual{ position:relative; background: var(--plum-deep); color: var(--cream); overflow:hidden; }
.ritual h2, .ritual h3{ color: var(--cream); }
.ritual::before{
  content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 10%, rgba(217,161,75,.18), transparent 60%);
}
.ritual-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.6rem,4vw,3rem); align-items:start; }
.ritual-panel{
  background: rgba(248,242,228,.06); border:1px solid rgba(217,161,75,.3); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.ritual-row{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.ritual-row label{ font-size:.85rem; color: var(--candle-light); font-family: var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.ritual-row select, .ritual-row input[type="number"]{
  background: var(--plum); border:1px solid rgba(217,161,75,.4); color: var(--cream); border-radius:10px;
  padding:.7em .9em; font-size:1rem; accent-color: var(--candle); min-height:44px;
}
.ritual-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:.8rem; margin: 1.2rem 0; }
.ritual-stats div{ background: rgba(217,161,75,.08); border-radius:12px; padding:.8rem; text-align:center; }
.ritual-stats strong{ display:block; font-family: var(--serif); font-size:1.3rem; color: var(--candle-light); }
.ritual-stats span{ font-size:.76rem; color: var(--cream-deep); }

.timer-wrap{ display:flex; flex-direction:column; align-items:center; gap:1rem; justify-content:center; text-align:center; }
.timer-ring{ position:relative; width: 220px; height:220px; }
.timer-ring svg{ width:100%; height:100%; transform: rotate(-90deg); }
.timer-ring circle{ fill:none; stroke-width:10; }
.timer-ring .track{ stroke: rgba(248,242,228,.15); }
.timer-ring .progress{ stroke: var(--candle); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.timer-time{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.timer-time strong{ font-family: var(--serif); font-size: 2.1rem; }
.timer-time span{ font-size:.75rem; color: var(--cream-deep); font-family: var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.timer-actions{ display:flex; gap:.7rem; }
.timer-status{ min-height:1.4em; font-size:.9rem; color: var(--candle-light); }

@media (max-width:860px){ .ritual-grid{ grid-template-columns: 1fr; } }

/* ===== about / story ===== */
.story-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3rem); align-items:center; }
.story-media{ position:relative; }
.story-media .frame{ clip-path: url(#archClip); overflow:hidden; aspect-ratio: 4/5; background: var(--sage-pale); }
.story-media img{ width:100%; height:100%; object-fit:cover; }
.story-media .seal{ position:absolute; bottom:-1.6rem; left:-1.6rem; width: 110px; height:110px; }
@media (max-width:860px){ .story-grid{ grid-template-columns:1fr; } .story-media .seal{ left:auto; right: 1rem; } }

.quote{ border-left: 3px solid var(--candle); padding-left: 1.2rem; font-family: var(--serif); font-size: 1.25rem; color: var(--plum); margin: 1.6rem 0; }

/* ===== values / list rows ===== */
.values{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.6rem; }
.value{ padding: 1.6rem; border-top: 2px solid var(--candle); background: var(--cream-deep); border-radius: 0 0 12px 12px; }
.value h3{ font-size:1.1rem; }

/* ===== FAQ accordion ===== */
.faq-item{ border-bottom: 1px solid rgba(42,32,23,.16); }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  padding: 1.2rem .2rem; font-weight:600; font-size:1.05rem; gap:1rem; min-height:44px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary svg{ width:20px; height:20px; stroke:currentColor; flex-shrink:0; transition: transform .25s ease; }
.faq-item[open] summary svg{ transform: rotate(45deg); }
.faq-item .a{ padding: 0 .2rem 1.3rem; color: var(--ink-soft); max-width: 48em; }

/* ===== forms ===== */
.form-card{ background: var(--cream-deep); border-radius: var(--radius); padding: clamp(1.4rem,3vw,2.2rem); max-width: 640px; }
.field{ margin-bottom: 1.1rem; }
.field label{ display:block; font-size:.88rem; font-weight:600; margin-bottom:.4em; color: var(--plum); }
.field:has(input:focus, textarea:focus, select:focus) label{ color: var(--sage-deep); }
.field input, .field textarea, .field select{
  width:100%; padding:.8em .9em; border-radius:10px; border:1.5px solid rgba(42,32,23,.25);
  background: var(--cream); font-family: inherit; font-size:1rem; accent-color: var(--sage-deep); min-height:44px;
}
.field textarea{ min-height: 120px; resize:vertical; }
.field input:invalid:not(:placeholder-shown){ border-color:#a4443a; }
.field .err{ display:none; color:#a4443a; font-size:.82rem; margin-top:.35em; }
.field.has-error input, .field.has-error textarea{ border-color:#a4443a; }
.field.has-error .err{ display:block; }
.checkbox-row{ display:flex; align-items:flex-start; gap:.6em; }
.checkbox-row input{ width:20px; height:20px; margin-top:.15em; accent-color: var(--sage-deep); flex-shrink:0; }
.checkbox-row label{ font-size:.9rem; font-weight:400; color: var(--ink-soft); }
.honeypot{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; overflow:hidden; }
.form-msg{ margin-top:1rem; padding:.9em 1em; border-radius:10px; display:none; font-size:.92rem; }
.form-msg.ok{ display:block; background: #dcecd3; color: #345427; }
.form-msg.fail{ display:block; background: #f6d9d4; color: #7a2b20; }

/* ===== cart / checkout ===== */
.cart-table{ width:100%; border-collapse:collapse; margin-bottom:1.6rem; }
.cart-table th{ text-align:left; font-family: var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); padding-bottom:.6em; border-bottom: 2px solid var(--plum); }
.cart-table td{ padding: .9em .4em; border-bottom: 1px solid rgba(42,32,23,.12); vertical-align:middle; }
.cart-row-name{ display:flex; align-items:center; gap:.8em; }
.cart-row-name img{ width:56px; height:56px; object-fit:cover; border-radius:8px; }
.qty-control{ display:inline-flex; align-items:center; border:1px solid var(--plum); border-radius:999px; }
.qty-control button{ width:34px; height:34px; border:none; background:transparent; cursor:pointer; font-size:1.1rem; color:var(--plum); }
.qty-control input{ width: 2.6em; border:none; background:transparent; text-align:center; font-size:1rem; }
.remove-btn{ color:#a4443a; background:none; border:none; cursor:pointer; font-size:.86rem; text-decoration:underline; min-height:44px; }
.cart-summary{ display:flex; justify-content:flex-end; }
.cart-summary table{ min-width: 260px; }
.cart-summary td{ padding:.4em .6em; }
.cart-summary .total td{ font-weight:700; font-size:1.2rem; border-top:2px solid var(--plum); }
.cart-empty{ text-align:center; padding: 3rem 1rem; color: var(--ink-soft); }

/* ===== legal text pages ===== */
.prose{ max-width: 62em; }
.prose h2{ margin-top:2rem; font-size:1.4rem; }
.prose ul{ padding-left:1.4rem; margin-bottom:1em; }
.prose li{ margin-bottom:.4em; }

/* ===== cookie banner ===== */
.cookie-banner{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:800; max-width: 680px; margin-inline:auto;
  background: var(--plum-deep); color: var(--cream); border-radius: var(--radius); padding: 1.3rem 1.4rem;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; box-shadow: var(--shadow-soft);
  border: 1px solid rgba(217,161,75,.4);
  transform: translateY(140%); transition: transform .4s ease;
}
.cookie-banner.show{ transform: translateY(0); }
.cookie-banner p{ margin:0; font-size:.92rem; flex:1 1 260px; color: var(--cream-deep); }
.cookie-banner a{ color: var(--candle-light); text-decoration:underline; }
.cookie-actions{ display:flex; gap:.7rem; flex-wrap:wrap; }

/* ===== footer ===== */
.site-footer{ background: var(--plum-deep); color: var(--cream-deep); }
.footer-top{ padding-block: clamp(2.4rem,5vw,3.6rem); display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 2rem; }
.footer-brand svg{ width:40px; height:40px; }
.footer-brand .word{ width:150px; height:26px; margin-top:.6rem; }
.footer-brand .word path, .footer-brand .word text{ fill: var(--cream); }
.footer-brand p{ color: var(--cream-deep); font-size:.9rem; margin-top:.8rem; max-width:26em; }
.footer-col h4{ color: var(--candle-light); font-family: var(--mono); text-transform:uppercase; font-size:.78rem; letter-spacing:.1em; margin-bottom:1rem; }
.footer-col ul li{ margin-bottom:.6em; }
.footer-col a{ font-size:.92rem; color: var(--cream-deep); }
.footer-col a:hover{ color: var(--candle-light); }
.newsletter-form{ display:flex; gap:.5rem; margin-top:.8rem; flex-wrap:wrap; }
.newsletter-form input{ flex:1; min-width:140px; padding:.7em .9em; border-radius:999px; border:1px solid rgba(217,161,75,.4); background: var(--plum); color:var(--cream); min-height:44px; }
.footer-bottom{ border-top:1px solid rgba(217,161,75,.25); padding: 1.4rem 0; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.84rem; color: var(--cream-deep); }
.footer-bottom a{ text-decoration:underline; }

@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }

@keyframes spin{ to{ transform: rotate(360deg); } }

/* ===== misc ===== */
.center{ text-align:center; }
.mt-lg{ margin-top: clamp(2rem,5vw,3.4rem); }
.badge-row{ display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.badge-row svg{ width:56px; height:56px; }
.icon-list{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1.6rem; }
.icon-list .item{ display:flex; gap:.9rem; align-items:flex-start; }
.icon-list svg{ width:30px; height:30px; stroke: var(--sage-deep); flex-shrink:0; }
.icon-list h3{ font-size:1.05rem; margin-bottom:.2em; }
.icon-list p{ font-size:.92rem; color: var(--ink-soft); margin:0; }
.section-dark .icon-list svg{ stroke: var(--candle-light); }
.section-dark .icon-list p{ color: var(--cream-deep); }

.breadcrumb{ font-size:.85rem; color: var(--ink-soft); margin-bottom:1rem; }
.breadcrumb a{ text-decoration:underline; }

.page-hero{ background: var(--sage-pale); padding-block: clamp(2.2rem,5vw,3.4rem); }
.page-hero h1{ font-size: clamp(2.1rem,5vw,3.1rem); }

.not-found{ min-height: 60vh; display:flex; align-items:center; justify-content:center; text-align:center; padding-block: 4rem; }
.not-found .idx{ font-family: var(--serif); font-size: clamp(5rem,16vw,9rem); color: transparent; -webkit-text-stroke: 2px var(--plum); line-height:1; }

.pd-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3rem); align-items:start; }
.pd-media .frame{ clip-path: url(#archClip); overflow:hidden; aspect-ratio:1/1; background: var(--sage-pale); }
.pd-media img{ width:100%; height:100%; object-fit:cover; }
.pd-info .price{ font-family: var(--serif); font-size:2rem; color: var(--plum); }
.pd-brew{ display:grid; grid-template-columns: repeat(3,1fr); gap:.8rem; margin: 1.4rem 0; }
.pd-brew div{ background: var(--sage-pale); border-radius:12px; padding:.8rem; text-align:center; }
.pd-brew strong{ display:block; font-family:var(--serif); }
.pd-brew span{ font-size:.76rem; color: var(--ink-soft); }
.qty-add{ display:flex; gap:.8rem; align-items:center; margin: 1.3rem 0; }
@media (max-width:760px){ .pd-grid{ grid-template-columns:1fr; } }

.related-strip{ margin-top: 3rem; }