/* The 18 Parvas Source: shop listing, follows the Clayrified course page */
:root{--paper:#efe6da;--card:#e9dcc9;--tile:#e6d9c7;--ink:#2a211c;--soft:#6d6157;--line:#d8cbb9;--clay:#c8623a;
  --serif:"EB Garamond",Georgia,serif;--sans:"Jost",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--sans)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
h1,h2{font-family:var(--serif);font-weight:400;margin:0}

.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem clamp(16px,3vw,44px);
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:5}
.brand{display:flex;align-items:center;gap:.7rem;font:600 1.05rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.brand img{width:40px;height:40px;object-fit:cover;object-position:50% 12%;border-radius:50%;background:#7fb8f0}
.bar nav{display:flex;gap:1.6rem;font:500 .82rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.bar nav a[aria-current]{border-bottom:1px solid var(--ink);padding-bottom:3px}

.product{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(320px,1fr);gap:clamp(1.5rem,5vw,5rem);
  max-width:1420px;margin:0 auto;padding:clamp(1rem,2.4vw,2rem) clamp(16px,3vw,44px) 4rem;align-items:start}
.gallery{display:grid;grid-template-columns:104px minmax(0,1fr);gap:clamp(1rem,3.4vw,3.4rem);position:sticky;top:84px}
.thumbs{display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 110px);overflow:auto;scrollbar-width:none;padding:2px}
.thumbs button{all:unset;box-sizing:border-box;cursor:pointer;background:var(--tile);border-radius:14px;padding:12px 10px 14px;
  aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between;gap:8px;flex:none}
.thumbs button[aria-selected="true"]{box-shadow:0 0 0 2px var(--ink)}
.thumbs button:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.thumbs b{font:400 .78rem/1.1 var(--serif)}
.thumbs img{border-radius:4px;border:2px solid #fff;aspect-ratio:3/2;object-fit:cover}
.mini{display:grid;gap:5px}.mini i{height:5px;border-radius:3px;background:#fff}.mini i:nth-child(2){width:80%}.mini i:nth-child(4){width:62%}

.stage{background:var(--card);border-radius:4px;display:grid}
.slide{grid-area:1/1;padding:clamp(1.4rem,4.2vw,3.6rem);display:flex;flex-direction:column;gap:clamp(1rem,3vw,2.2rem)}
.slide[hidden]{display:none}
.slide h2{font-size:clamp(2.2rem,5vw,4rem);line-height:1.02;letter-spacing:-.01em}
.stack{position:relative;flex:none;aspect-ratio:1.28;margin:0 4% 0 6%}
.stack img{position:absolute;width:82%;border:7px solid #fff;border-radius:16px;box-shadow:0 18px 30px rgba(60,40,20,.22);aspect-ratio:3/2;object-fit:cover}
.stack img:nth-child(1){left:0;top:0;transform:rotate(-2.5deg)}
.stack img:nth-child(2){left:8%;top:13%;transform:rotate(1.2deg)}
.stack img:nth-child(3){left:17%;top:27%}
.stack.one{aspect-ratio:auto}
.stack.one img{position:static;width:100%;transform:rotate(-1deg)}
.foot{margin-top:auto!important;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0;color:var(--soft);font-weight:500}
.foot em{font-style:normal;font-weight:600;color:#fff;background:var(--clay);padding:.5rem 1.1rem;border-radius:999px;white-space:nowrap}
.list{list-style:none;margin:0;padding:0;flex:1;background:#fff;border-radius:14px;padding:.4rem 1.2rem}
.list li{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;border-bottom:1px solid var(--line)}
.list li:last-child{border:0}.list b{font-weight:500}.list span{color:var(--soft);text-align:right}

.buy h1{font-size:clamp(2rem,3.2vw,2.6rem);line-height:1.1}
.price{font:500 1.7rem/1.2 var(--serif);margin:.5rem 0 0}
.sub{margin:.2rem 0 0;color:var(--soft);font-size:.92rem}
.blurb{margin:1.5rem 0 0;max-width:34em}
.cart{width:100%;margin:1.6rem 0 0;padding:1.25rem;border:0;border-radius:999px;background:var(--ink);color:#fff;
  font:600 1rem/1 var(--sans);cursor:pointer}
.cart:disabled,.cart.off{opacity:.55;cursor:not-allowed}
a.cart{display:block;text-align:center;box-sizing:border-box}
.inside{font:400 .95rem/1 var(--sans);color:var(--soft);margin:2.6rem 0 .9rem}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.25rem 0;font:600 1.12rem/1.2 var(--sans)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 1.5rem/1 var(--sans);color:var(--clay)}
details[open] summary::after{content:"–"}
details ul{margin:0 0 1.3rem;padding-left:1.1rem;color:#4a4039;max-width:36em}
details li{margin:.35rem 0}
.end{border-top:1px solid var(--line);padding:1.6rem 16px;text-align:center;color:var(--soft);font-size:.9rem}

@media (max-width:900px){
  .product{grid-template-columns:1fr}
  .gallery{position:static;grid-template-columns:1fr}
  .thumbs{order:2;flex-direction:row;max-height:none}
  .thumbs button{width:92px}
  .stage{min-height:0}
  .stack{margin:0}
}

/* tiers and country pricing */
.price small{font:500 .78rem/1 var(--sans);color:var(--clay);border:1px solid var(--clay);border-radius:999px;padding:.2rem .55rem;vertical-align:middle;margin-left:.4rem}
.tiers{border:0;margin:1.6rem 0 0;padding:0;display:grid;gap:.6rem}
.tiers legend{font:400 .95rem/1 var(--sans);color:var(--soft);padding:0;margin-bottom:.7rem}
.tiers label{display:flex;align-items:center;gap:.9rem;padding:.95rem 1.1rem;border:1px solid var(--line);border-radius:16px;cursor:pointer;background:rgba(255,255,255,.35)}
.tiers label:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:#fff}
.tiers input{accent-color:var(--ink);width:1.1rem;height:1.1rem;flex:none}
.tiers span{flex:1;display:grid}
.tiers b{font-weight:600}
.tiers i{font-style:normal;color:var(--soft);font-size:.92rem}
.tiers em{font:500 1.35rem/1 var(--serif);font-style:normal;white-space:nowrap}
.cart{margin-top:1rem}
.pick{margin:0 0 .9rem}
.pick select{font:inherit;padding:.4rem .6rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);max-width:100%}
.bands{width:100%;border-collapse:collapse;font-size:.92rem}
.bands caption{text-align:left;color:var(--soft);padding-bottom:.4rem}
.bands th{text-align:left;vertical-align:top;white-space:nowrap;padding:.6rem 1rem .6rem 0;font:500 1.15rem/1.2 var(--serif)}
.bands th small{font:400 .8rem/1.2 var(--sans);color:var(--soft)}
.bands td{padding:.6rem 0;color:#4a4039}
.bands tr{border-top:1px solid var(--line)}
.fine{color:var(--soft);font-size:.88rem;margin:.8rem 0 1.3rem}

.end nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center;margin-bottom:.7rem}
.end nav a{text-decoration:underline;text-underline-offset:3px}
.end p{margin:0}

/* ---------- reveal on scroll (reveal.js) ---------- */
.js-reveal [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js-reveal [data-reveal].in{opacity:1;transform:none}

/* page-load and gallery motion */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.gallery,.shop-head,.order>div:first-child{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.buy,.summary{animation:rise .6s .12s cubic-bezier(.2,.8,.2,1) both}
.slide.on{animation:rise .4s cubic-bezier(.2,.8,.2,1) both}
.slide.on .stack img:nth-child(1){animation:deal .6s .05s cubic-bezier(.2,.9,.3,1.2) both}
.slide.on .stack img:nth-child(2){animation:deal .6s .15s cubic-bezier(.2,.9,.3,1.2) both}
.slide.on .stack img:nth-child(3){animation:deal .6s .25s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes deal{from{opacity:0;translate:0 26px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
.thumbs button{transition:transform .2s,box-shadow .2s}
.thumbs button:hover{transform:translateY(-2px)}
.cart,.go{transition:transform .15s,background .2s}
.cart:not(:disabled):hover,.go:not(:disabled):hover{transform:translateY(-2px)}
details ul,details>p,details>table{animation:rise .3s ease both}
@media (prefers-reduced-motion:reduce){
  .gallery,.shop-head,.order>div:first-child,.buy,.summary,.slide.on,.slide.on .stack img,details ul,details>p,details>table{animation:none}
  .thumbs button,.cart,.go{transition:none}
}