:root{--bg:#171511;--surface:#211e18;--ivory:#f4eadb;--muted:#b4ab9d;--line:#3c372f;--ember:#cf8150;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--ivory);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased}body:has(dialog[open]){overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button, a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--ember);outline-offset:6px}button{border:0;background:none}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.site-header{margin:0 5%;height:102px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.wordmark{font-family:'Manrope',var(--sans);font-size:19px;font-weight:700;letter-spacing:.045em;white-space:nowrap}.brand-period{color:var(--ember)}nav{display:flex;gap:32px;align-items:center;font-size:14px}nav button{padding:10px 0}.nav-list{display:flex;gap:28px;align-items:center;list-style:none;margin:0;padding:0}.nav-list li{display:block}.nav-list a,.nav-soon{display:block;padding:10px 0;white-space:nowrap}.nav-list a:hover{color:var(--ember)}.nav-list a[aria-current="page"]{position:relative}.nav-list a[aria-current="page"]:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--ember)}.nav-soon{color:var(--muted)}.nav-soon small{font-size:9px;letter-spacing:.14em;margin-left:6px;opacity:.75;vertical-align:middle}.menu-wrap{position:relative}.menu-toggle{display:flex;align-items:center;gap:8px}.menu-toggle svg{width:16px;transition:transform .2s}.menu-toggle[aria-expanded=true] svg{transform:rotate(180deg)}.dropdown{position:absolute;right:0;top:50px;z-index:3;min-width:285px;background:#26221c;border:1px solid #514536;padding:25px;box-shadow:0 20px 50px #0005}.dropdown .eyebrow{display:block;color:var(--muted);margin:0 0 17px}.dropdown a{display:flex;justify-content:space-between;gap:24px;padding:17px 0;border-top:1px solid var(--line)}.dropdown a:hover{color:var(--ember)}.bag-toggle{display:flex;gap:10px;align-items:center;border-left:1px solid var(--line);padding-left:28px}.bag-count{font-size:12px;background:var(--ivory);color:var(--bg);width:20px;height:20px;border-radius:50%;display:grid;place-items:center}main{max-width:1680px;margin:auto;padding:0 5%}.collection-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:45px;padding:66px 0 60px}.eyebrow{font-size:12px;line-height:1.5;letter-spacing:.16em;font-weight:500;margin:0}.collection-intro .eyebrow{display:flex;align-items:center;gap:12px;color:var(--muted)}.line-accent{display:block;width:27px;height:1px;background:var(--ember)}h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,5.1vw,80px);line-height:1.1;letter-spacing:-.04em;margin:23px 0 0}em{font-weight:400}h1 em{color:#c6b6a0}.intro-copy{padding:0 5% 5px 0;min-width:250px}.intro-copy p{color:var(--muted);line-height:1.65;margin:0}.text-link{display:inline-flex;gap:36px;align-items:center;padding-bottom:9px;border-bottom:1px solid #76614b;font-size:14px}.text-link span{color:var(--ember);font-size:22px}.catalog-bar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:24px 0}.catalog-bar h2{font-size:14px;font-weight:500;margin:0;display:flex;gap:12px;align-items:center}.catalog-bar h2 span{font-size:12px;border:1px solid var(--line);padding:3px 7px;color:var(--muted)}.catalog-note{font-size:13px;color:var(--muted)}.ritual-card{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);background:var(--surface)}.artwork{display:block;position:relative;overflow:hidden;text-align:left;padding:0;min-height:555px}.artwork img{height:100%;width:100%;position:absolute;inset:0;object-fit:cover;object-position:48% center;transition:transform .7s ease}.artwork:hover img{transform:scale(1.035)}.art-label{position:absolute;left:25px;top:25px;padding:9px 13px;background:#171511b8;border:1px solid #f4eadb40;backdrop-filter:blur(10px);font-size:11px;letter-spacing:.13em}.image-open{position:absolute;right:25px;bottom:25px;border:1px solid #f4eadb80;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;font-size:23px;background:#17151166}.ritual-info{padding:40px 42px;display:flex;flex-direction:column;justify-content:space-between;gap:30px}.category{color:#d79567}.ritual-info h3{font-family:var(--serif);font-size:clamp(29px,2.65vw,43px);line-height:1.14;letter-spacing:-.025em;font-weight:400;margin:20px 0}.title-button{text-align:left;padding:0;line-height:inherit;letter-spacing:inherit}.title-button em{color:#c9b89f}.availability{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;margin:0 0 17px}.availability span:first-child{color:var(--ivory)}.availability span:last-child{color:var(--muted)}.primary{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:54px;padding:15px 22px;background:var(--ivory);color:#211a12;font-size:14px;font-weight:600;transition:background .2s}.primary:hover{background:#e5bd99}.primary span{font-size:22px;font-weight:400}.collection-end{border-bottom:1px solid var(--line);display:flex;align-items:center;gap:30px;padding:36px 0 44px}.collection-end .eyebrow{font-size:10px;color:var(--muted);max-width:120px;line-height:1.8}.collection-end p{font-family:var(--serif);font-size:21px;color:#c8bcab;margin:0}.end-index{margin-left:auto;color:#9e8f7c;font-size:12px;letter-spacing:.2em}footer{margin:0 5%;padding:43px 0 36px;display:flex;align-items:center;justify-content:space-between;gap:20px}footer .wordmark{font-size:13px}footer p{color:var(--muted);font-size:13px;margin:0}footer>span{font-size:12px;color:#9b9286}dialog{padding:0;border:1px solid var(--line);background:var(--surface);color:var(--ivory);max-height:92dvh;width:min(660px,calc(100% - 32px));max-width:none;overflow:auto}dialog::backdrop{background:#060503b8;backdrop-filter:blur(5px)}.close{position:absolute;right:15px;top:15px;border:1px solid #ffffff45;background:#171511d9;border-radius:50%;width:42px;height:42px;font-size:27px;display:grid;place-items:center;z-index:1}.detail-image{width:100%;height:220px;object-fit:cover;display:block}.detail-content{padding:30px 36px}.detail-content h2{font-family:var(--serif);font-size:36px;font-weight:400;line-height:1.18;margin:14px 0 20px}.detail-content h2 em{color:#c9b89f}.detail-content>p{font-size:15px;line-height:1.7;color:var(--muted)}.detail-status{border-top:1px solid var(--line);padding:20px 0;display:grid;gap:8px}.detail-status strong{font-size:14px;font-weight:500}.detail-status span{font-size:14px;color:var(--muted);line-height:1.6}.detail-content .detail-footnote{font-size:12px;text-align:center;margin:12px 0 0}.bag-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(470px,100%);padding:28px;position:fixed;inset:0;flex-direction:column}.bag-drawer[open]{display:flex}.bag-heading{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:28px}.bag-heading h2{font-family:var(--serif);font-size:30px;margin:0;font-weight:400}.bag-heading h2 span{font-family:var(--sans);font-size:14px;color:var(--muted)}.bag-heading .close{top:23px;right:23px}.bag-bottom{margin-top:auto;padding-top:30px}.bag-bottom p{font-size:14px;line-height:1.6;color:var(--muted)}.bag-item{display:grid;grid-template-columns:95px 1fr;gap:20px}.bag-item img{width:95px;height:125px;object-fit:cover}.bag-item h3{font-family:var(--serif);font-size:20px;font-weight:400;line-height:1.3;margin:0 0 12px}.bag-item p{font-size:13px;color:var(--muted);margin:0 0 14px}.remove{font-size:13px;color:var(--muted);text-decoration:underline;padding:8px 0}.empty-bag{padding:55px 10px;text-align:center}.empty-bag svg{width:38px;height:38px;color:var(--muted);margin-bottom:12px}.empty-bag p{font-family:var(--serif);font-size:25px}.empty-bag span{font-size:14px;color:var(--muted)}.skip{position:absolute;left:16px;top:-80px;background:var(--ivory);color:var(--bg);padding:15px;z-index:10}.skip:focus{top:15px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.site-header,footer{max-width:1512px;margin-left:auto;margin-right:auto}}@media(max-width:1050px){.ritual-info{padding:32px}.artwork{min-height:530px}.intro-copy{padding-right:0}.ritual-card{grid-template-columns:1.1fr 1fr}.availability{font-size:12px}.desktop-break{display:none}footer p{display:none}}
/* Six nav links plus the bag button need about 1010px on one row, so below that the nav drops to its own scrolling row. Same layout the phone block already uses. */
@media(max-width:1050px){.site-header{height:auto;margin:0;padding:0 5%;gap:0;flex-wrap:wrap;align-items:center}.site-header .wordmark{flex:1 1 auto;min-height:72px;display:flex;align-items:center}.site-nav{order:3;flex:1 0 100%;border-top:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -5%;padding:0 5%;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}.site-nav::-webkit-scrollbar{display:none}.bag-toggle{min-height:72px}}@media(max-width:700px){.site-header{height:auto;margin:0;padding:0 6%;gap:0;flex-wrap:wrap;align-items:center}.site-header .wordmark{flex:1 1 auto;min-height:62px;display:flex;align-items:center}.site-nav{order:3;flex:1 0 100%;border-top:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -6%;padding:0 6%;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}.site-nav::-webkit-scrollbar{display:none}.wordmark{font-size:14px;letter-spacing:.015em}nav{gap:15px}.nav-list{gap:22px;font-size:13px}.nav-list a,.nav-soon{padding:13px 0}.bag-toggle{padding-left:13px;gap:6px;min-height:62px}.bag-label{display:none}.bag-toggle svg{width:19px}.bag-count{width:17px;height:17px;font-size:10px}main{padding:0 6%}.collection-intro{padding:36px 0 30px;display:block}.collection-intro .eyebrow{font-size:10px;letter-spacing:.14em}h1{font-size:46px;margin-top:17px;line-height:1.13}.intro-copy{margin-top:21px;min-width:0}.intro-copy p{font-size:14px;line-height:1.6;margin:0}.intro-copy p br{display:none}.text-link{font-size:12px;white-space:nowrap;gap:12px;min-height:44px;padding-bottom:3px}.catalog-bar{padding:19px 0}.catalog-note{display:none}.catalog-bar h2{font-size:13px}.ritual-card{display:flex;flex-direction:column}.artwork{min-height:0;aspect-ratio:1.32}.artwork img{object-position:46% center}.art-label{top:16px;left:16px;font-size:9px;padding:8px 10px}.image-open{right:16px;bottom:16px;width:35px;height:35px;font-size:20px}.ritual-info{padding:27px 25px;gap:26px}.category{font-size:10px}.ritual-info h3{font-size:33px;line-height:1.17;margin:16px 0}.availability{font-size:12px;gap:8px}.primary{min-height:54px}.collection-end{padding:29px 0;display:block}.collection-end .eyebrow{max-width:none;font-size:9px}.collection-end p{font-size:20px;line-height:1.4;margin-top:10px;max-width:270px}.end-index{display:none}footer{margin:0 6%;padding:28px 0 30px;align-items:flex-start;flex-direction:column;gap:13px}footer .wordmark{font-size:12px}footer>span{font-size:11px}.dropdown{right:-40px;top:48px;min-width:260px}.detail-content{padding:25px}.detail-content h2{font-size:29px}.detail-image{height:175px}.bag-drawer{padding:25px}.bag-item{grid-template-columns:80px 1fr;gap:16px}.bag-item img{width:80px;height:110px}}@media(max-width:370px){h1{font-size:40px}.wordmark{font-size:12px}nav{gap:9px}.ritual-info{padding:24px 20px}.ritual-info h3{font-size:29px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.thumb-track{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

.price{font-size:27px!important;font-weight:500;letter-spacing:-.03em}.price small,.bag-total small{font-size:11px;font-weight:400;letter-spacing:.03em;color:var(--muted);margin-left:4px}.availability{align-items:center}.bag-total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px}.bag-total strong{font-size:23px;font-weight:500}


body::before{content:"";position:fixed;inset:0;z-index:-1;background-image:linear-gradient(175deg,rgba(20,17,15,.42) 0%,rgba(20,17,15,.66) 40%,rgba(20,17,15,.80) 100%),url(assets/bg-clouds.webp);background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat}
body{background:#141110}
.ritual-card{background:rgba(28,25,21,.86);-webkit-backdrop-filter:blur(14px) saturate(1.05);backdrop-filter:blur(14px) saturate(1.05);border:1px solid rgba(244,234,219,.07)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ritual-card{background:rgba(33,30,24,.94)}}

/* ---- tarot gift popup ---- */
.gift-dialog{max-width:min(640px,calc(100vw - 32px));width:100%;border:1px solid rgba(244,234,219,.14);border-radius:20px;background:linear-gradient(180deg,rgba(23,21,17,.9),rgba(20,17,15,.98)),url("assets/bg-clouds.webp") center/cover;color:var(--ivory);padding:38px 30px 34px;position:relative;overflow:hidden}
.gift-dialog::backdrop{background:rgba(10,9,7,.78)}
@supports (backdrop-filter:blur(2px)){.gift-dialog::backdrop{backdrop-filter:blur(3px)}}
.gift-dialog::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 50% -10%,rgba(207,129,80,.16),transparent 62%)}
.gift-dialog>*{position:relative}
.gift-dialog .close{position:absolute;top:12px;right:14px;z-index:2}
.gift-dialog .eyebrow{justify-content:center;text-align:center}
.gift-stage,.gift-reveal,.gift-unlocked{text-align:center}
#gift-title{font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:clamp(1.7rem,6vw,2.3rem);letter-spacing:.16em;text-transform:uppercase;margin:.35em 0 .3em}
.gift-sub{color:var(--muted);font-size:.95rem;margin:0 0 26px}

.tarot-row{display:flex;gap:14px;justify-content:center;align-items:flex-start}
.tarot{width:clamp(88px,26vw,138px);aspect-ratio:2/3;padding:0;border:0;background:none;cursor:pointer;perspective:900px;border-radius:12px;transition:transform .3s ease,opacity .3s ease}
.tarot:hover:not(.chosen):not(.dimmed){transform:translateY(-8px)}
.tarot:focus-visible{outline:2px solid var(--ember);outline-offset:5px}
.tarot-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.7,.25,1)}
.tarot.chosen .tarot-inner{transform:rotateY(180deg)}
.tarot-side{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:12px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 12px 30px rgba(0,0,0,.42)}
.tarot-back{background:var(--card-back,url("assets/tarot-back.webp")) center/cover no-repeat,#2b1f33}
/* Swap in real face art later: add style="--card-face:url(assets/tarot-face-stone.webp)" on the .tarot button. */
.tarot-face{transform:rotateY(180deg);background:var(--card-face,linear-gradient(168deg,#3a2743,#241a2c 58%,#171018));border:1px solid rgba(214,168,96,.42);background-size:cover;background-position:center}
.tarot-glyph{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.6rem,6vw,2.2rem);color:#d6a860;line-height:1}
.tarot-name{font-family:'Manrope',system-ui,sans-serif;font-size:.55rem;letter-spacing:.24em;color:rgba(244,234,219,.72)}
.tarot.dimmed{opacity:0;transform:scale(.86);pointer-events:none}

.gift-reveal,.gift-unlocked{animation:giftIn .5s ease both}
@keyframes giftIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal-title{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(1.55rem,5.4vw,2.15rem);line-height:1.2;letter-spacing:.01em;margin:.3em 0 .5em}
.reveal-title em{font-style:italic}
.reveal-body{color:var(--muted);font-size:.95rem;line-height:1.7;max-width:44ch;margin:0 auto 22px}
.gift-field{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#gift-email{flex:1 1 220px;min-width:0;padding:14px 16px;border-radius:10px;border:1px solid var(--line);background:#191710;color:var(--ivory);font:inherit;font-size:1rem}
#gift-email:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:transparent}
#gift-email::placeholder{color:#6f675b}
.gift-field .primary{flex:0 1 auto;white-space:nowrap}
.gift-footnote{color:#7d7566;font-size:.76rem;margin:14px 0 0}
.gift-status{font-size:.88rem;margin:12px 0 0;min-height:1.2em;color:var(--ember)}
#gift-audio{width:100%;max-width:420px;margin:6px auto 18px;display:block}
.gift-unlocked .text-link{justify-content:center}
@media (max-width:420px){.gift-dialog{padding:34px 18px 28px}.tarot-row{gap:9px}}
@media (prefers-reduced-motion:reduce){
  .tarot,.tarot-inner{transition:none}
  .tarot:hover{transform:none}
  .gift-reveal,.gift-unlocked{animation:none}
}
.gift-dialog.is-revealed #gift-title,.gift-dialog.is-revealed .gift-sub,.gift-dialog.is-revealed .gift-stage .eyebrow{display:none}
.gift-dialog.is-revealed .tarot-row{margin-bottom:4px}
.gift-field .primary{width:auto;padding-inline:22px}
.gift-dialog.is-revealed .tarot{width:clamp(70px,18vw,96px)}
@media (max-width:560px){.gift-field .primary{width:100%}}
.gift-dialog .close:focus:not(:focus-visible){outline:none;box-shadow:none;border-color:var(--line)}

.gift-status:empty{min-height:0;margin:0}
@media(max-width:700px){body::before{background-image:linear-gradient(175deg,rgba(20,17,15,.30) 0%,rgba(20,17,15,.55) 45%,rgba(20,17,15,.82) 100%),url(assets/bg-mobile.webp);bottom:auto;height:100vh;height:100lvh}}
.tarot-name{white-space:nowrap}
.tarot-face{justify-content:flex-end;gap:0}
.tarot-face .tarot-name{width:100%;padding:22px 4px 7px;text-align:center;color:#f4e7cd;text-shadow:0 1px 3px rgba(10,7,14,.85);background:linear-gradient(to top,rgba(10,7,14,.9),rgba(10,7,14,.5) 60%,rgba(10,7,14,0))}
.tarot-face::after{content:"";position:absolute;inset:5px;border:1px solid rgba(214,168,96,.45);border-radius:8px}

/* ---- product shelves. Jewelry uses these, and so does every shelf added after
   it: one .product-grid holding 4 to 6 .product-card blocks, nothing else. ---- */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
/* A two card shelf in four columns leaves the right half of the desktop row
   empty, which reads as a page that failed to load rather than a small
   collection. Two cards take a half of the row each instead. Counted in CSS,
   not marked on the page, so a third card on either shelf puts it straight
   back to the four column rule with no edit here. A browser without :has()
   keeps the four columns, which is only today's look, never a broken one.
   Phone is untouched: two per row is already two per row down there. */
@media(min-width:901px){
 .product-grid:has(>.product-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}}
.product-card{display:flex;flex-direction:column;background:rgba(28,25,21,.86);-webkit-backdrop-filter:blur(14px) saturate(1.05);backdrop-filter:blur(14px) saturate(1.05);border:1px solid rgba(244,234,219,.07)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.product-card{background:rgba(33,30,24,.94)}}
/* Scoped so the wide ritual cards keep their own tall artwork untouched. */
.product-card .artwork{min-height:0;aspect-ratio:1.4}
.product-card .art-label{left:12px;top:12px;padding:6px 9px;font-size:9px;letter-spacing:.1em}
.product-card .image-open{right:12px;bottom:12px;width:32px;height:32px;font-size:18px}
.product-body{display:flex;flex-direction:column;flex:1;padding:20px 18px 18px}
.product-body .eyebrow{font-size:9px;letter-spacing:.14em;color:var(--muted)}
.product-body h3{font-family:var(--serif);font-size:24px;line-height:1.16;letter-spacing:-.02em;font-weight:400;margin:11px 0 0}
.product-note{font-size:13px;line-height:1.6;color:var(--muted);margin:11px 0 0}
.product-buy{margin-top:auto;padding-top:18px;display:grid;gap:11px}
.product-buy .price{font-size:22px!important}
.product-card .primary{min-height:52px;padding:14px 16px;font-size:13px;justify-content:center;gap:10px;text-align:left}
.product-card .primary span{font-size:19px}
@media(max-width:900px){
 .product-body{padding:15px 13px 14px}
 .product-body h3{font-size:20px}
 .product-note{display:none}
 .product-buy{padding-top:14px;gap:9px}
 .product-buy .price{font-size:19px!important}
 .product-card .primary{min-height:48px;padding:12px 9px;font-size:12px;gap:7px}
 .product-card .primary span{font-size:16px}
 .product-card .art-label{left:8px;top:8px;font-size:8px;padding:5px 7px;letter-spacing:.06em}
 .product-card .image-open{display:none}
}
/* ---- The ritual shelf now sits in the same .product-grid, so its cards stand
   up vertically with square artwork like every other shelf. Written with two
   classes so they outrank the older wide-card rules above on specificity, not
   on source order. The description stays visible at every width: a $97 ritual
   is sold by its words, unlike the jewellery cards that hide their note. ---- */
.product-card.ritual-card{display:flex;flex-direction:column;grid-template-columns:none}
.product-card.ritual-card .artwork{min-height:0;aspect-ratio:1}
.product-card.ritual-card .ritual-info{gap:0;justify-content:flex-start}
.product-card.ritual-card .availability{margin:0}
/* The titles carry hand-placed line breaks written for the old half-row card,
   and those only switch off below 1051px. In a quarter-row card they fire
   inside a 170-220px column and cost an extra line. The wording is frozen, so
   the breaks stay in the HTML and the card just stops honouring them. */
.product-card.ritual-card h3 br.desktop-break{display:none}
.product-card.ritual-card .ritual-description{font-size:13px;line-height:1.6;color:var(--muted);margin:11px 0 0;max-width:none}
@media(max-width:900px){.product-card.ritual-card .ritual-description{font-size:12px;line-height:1.55;margin:8px 0 0}}
/* The dialog is a column: photo, one scrolling middle, then a footer that never
   scrolls away. The footer is what keeps "add to bag" on screen the moment the
   dialog opens, however tall the picker above it grows, which is the part the
   next shelves reuse without changing anything here. */
.product-dialog{width:min(720px,calc(100% - 32px));max-width:min(720px,calc(100vw - 32px));overflow:hidden}
/* The [open] gate is not optional. A bare display on a dialog beats the browser's
   own "a closed dialog is hidden" rule, which leaves a ghost panel and a stray
   working buy button sitting on the page. Same shape as .bag-drawer[open] above. */
.product-dialog[open]{display:flex;flex-direction:column}
/* The plate only centres the photo. The white used to live here, and this row
   spans the whole popup, so a square photograph showed as a white banner with
   the picture stranded in the middle of it. */
.hero-plate{flex:0 0 auto;display:flex;justify-content:center;padding:12px 0}
/* A square button, sized here so app.js can measure against it. The photos are
   shot on white, so the white belongs on this square and nowhere wider: a square
   photograph now fills it edge to edge with no margin at all. A photograph that
   is taller than it is wide still sits inside with white either side, which is
   why app.js works out where the picture really is before it crops. Change this
   size and that sum still holds. */
.hero-zoom{position:relative;display:block;width:248px;height:248px;padding:0;border:0;background:#fff no-repeat;cursor:zoom-in;touch-action:pan-y pinch-zoom}
.product-dialog .product-hero{display:block;width:100%;height:100%;object-fit:contain}
/* The crop size is set in app.js from the photo's own real pixels, because the
   photographs are not all the same shape. A fixed number here would squash the
   tall ones and invent detail the file does not hold. */
.hero-zoom.zooming .product-hero,.hero-zoom.zooming .zoom-badge{opacity:0}
.zoom-badge{position:absolute;right:8px;bottom:8px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(23,21,17,.68);pointer-events:none}
.zoom-badge svg{width:17px;height:17px;fill:none;stroke:var(--ivory);stroke-width:1.9;stroke-linecap:round}
.hero-zoom:focus-visible{outline:2px solid var(--ember);outline-offset:-2px}
/* A close-up is worth nothing if it cannot fill the screen, so this one is not
   a panel in the middle of the page, it is the whole viewport. */
.zoom-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:var(--bg)}
.zoom-dialog[open]{display:flex;flex-direction:column;align-items:center;justify-content:center}
.zoom-dialog #zoom-image{width:min(700px,100vw);max-height:calc(100dvh - 96px);object-fit:contain;background:#fff;cursor:zoom-out}
.zoom-dialog .zoom-caption{font-size:13px;line-height:1.55;color:var(--muted);text-align:center;margin:14px 20px 0}
.zoom-dialog .close{z-index:2}
/* min-height:0 is load bearing: without it a flex child refuses to shrink and
   the middle pushes the footer off the bottom instead of scrolling. */
.product-dialog .detail-content{flex:1 1 auto;min-height:0;overflow-y:auto}
.product-footer{flex:0 0 auto;padding:16px 36px 22px;border-top:1px solid var(--line);background:var(--surface)}
.product-footer .picked-name{margin:0 0 12px}
.product-footer .add-big{margin-top:0}
.product-footer .detail-footnote{font-size:12px;color:var(--muted);text-align:center;margin:12px 0 0}
/* .bag-bottom p already sets a size, and an element plus class beats a lone
   class, so this has to be written the same shape or the size never lands. */
.bag-bottom p.checkout-note{font-size:13px;line-height:1.55;text-align:center;margin:10px 0 0}
.shot-note{font-size:12px;line-height:1.5;color:#d79567;margin:0 0 14px}
/* Same column as .product-dialog above, for the same reason: on a 640px tall
   phone the ritual text is longer than the screen, so a buy button that sits
   inside the scrolling middle starts life below the fold. */
#ritual-dialog{overflow:hidden}
#ritual-dialog[open]{display:flex;flex-direction:column}
#ritual-dialog .detail-image{flex:0 0 auto}
#ritual-dialog .detail-content{flex:1 1 auto;min-height:0;overflow-y:auto}
/* The scrolling middle carries tabindex so a keyboard can reach the lower half
   of the text, and the site's focus ring is scoped to button and a, so the ring
   has to be named here the same way .howto summary does it. */
.detail-content:focus-visible{outline:2px solid var(--ember);outline-offset:-4px}
/* The page Stripe returns to. One column, held to a readable measure. */
.thanks{max-width:620px;margin:0 auto;padding:90px 24px 70px;text-align:center}
.thanks h1{font-family:var(--serif);font-size:44px;font-weight:400;line-height:1.15;margin:14px 0 22px}
.thanks .eyebrow{justify-content:center}
.thanks-lead{font-size:18px;line-height:1.6;margin:0 0 22px}
.thanks-note{font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 16px}
.thanks-note a{color:var(--ember)}
.thanks-actions{display:grid;gap:18px;justify-items:center;margin-top:34px}
.thanks-button{min-height:60px;display:inline-flex;align-items:center;justify-content:center;padding:0 30px;text-decoration:none}
@media(max-width:700px){.thanks{padding:64px 20px 54px}.thanks h1{font-size:34px}}
.product-dialog .detail-content h2{margin:12px 0 14px}
.product-dialog .price{display:block}
/* Smaller photo and title on a phone, so more of the picker is visible at once. */
@media(max-width:700px){.hero-zoom{width:190px;height:190px}.product-dialog .detail-content h2{font-size:26px;margin:10px 0 10px}}
.add-big{min-height:64px;font-size:15px;letter-spacing:.01em;margin-top:22px}
.add-big span{font-size:26px}
.product-blurb{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}
.product-picker{margin:22px 0 4px}
.picker-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
/* This one names the design you have picked, so it reads as a sentence at a
   readable size instead of a tiny all-caps hint. It keeps the inherited muted
   ink: it sits on the dark dialog, not on a pale swatch.

   Two lines of room are always reserved. Measured in Chrome, the widest line
   this can render is "Selected design: White Diamond, Red Heart (5 of 8)" at
   296px, which does not fit the 291px the label gets on a 375px phone, so it
   wraps. Without the reservation the swatch strip jumped 16px down under the
   finger that had just picked that design and snapped back on the next pick.
   Truncating instead would eat the "(5 of 8)" that tells you the strip
   scrolls, so reserve the space rather than cut the words.

   The line-height is load-bearing, not decoration: pinning it makes a line box
   exactly 16.25px whatever font wins, which is the only thing that makes 2.6em
   provably two lines. The test reads these two numbers out of this one plain
   rule and checks the reservation is at least twice the line, so keep them
   together here, in em, and do not add padding to this rule. */
#product-variant-label{font-size:12.5px;letter-spacing:.01em;text-transform:none;line-height:1.3;min-height:2.6em}
/* One sideways strip, never a wall. A grid of 23 designs pushed the buy button
   off the bottom of the phone and read as clutter; a strip keeps the row one
   card tall. It scrolls sideways only, so the dialog middle still owns the
   up and down gesture and the footer stays put. */
.swatch-row{display:flex;gap:10px;padding:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.swatch-row::-webkit-scrollbar{display:none}
.swatch{position:relative;flex:0 0 84px;display:block;padding:0;border:1px solid var(--line);background:#f7f2ea;cursor:pointer;text-align:center;color:#5c5348;transition:border-color .2s ease,color .2s ease}
.swatch img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.swatch span{display:block;font-size:9px;line-height:1.35;letter-spacing:.05em;padding:6px 3px 7px}
.swatch:hover{border-color:#8a6a49;color:#2a241d}
.swatch.picked{border-color:#8a6a49;color:#241e18;box-shadow:inset 0 0 0 1px rgba(138,106,73,.55)}
/* A border alone is easy to miss on a phone, so the chosen one also wears a tick. */
.swatch.picked::before{content:"";position:absolute;top:5px;right:5px;width:17px;height:17px;border-radius:50%;background:#8a6a49;box-shadow:0 0 0 2px #f7f2ea}
.swatch.picked::after{content:"";position:absolute;top:11px;right:9.5px;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.size-wrap{margin-top:22px}
.size-row{display:flex;flex-wrap:wrap;gap:8px}
.size{min-width:46px;padding:10px 12px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:13px;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.size:hover{border-color:rgba(201,184,159,.55);color:var(--ivory)}
.size.picked{border-color:#c9b89f;color:#e8dcc7;background:rgba(201,184,159,.09)}
.picked-name{font-family:var(--serif);font-size:19px;color:#c8bcab;margin:18px 0 0}
@media(max-width:700px){.swatch-row{gap:8px}.swatch{flex-basis:72px}.picked-name{font-size:17px}.size-wrap{margin-top:16px}.product-footer{padding:13px 25px 18px}.product-footer .picked-name{margin:0 0 10px}}
/* The photo strip sits directly under the big picture, the way a shopper expects
   it on any store: one large image, a row of small ones, arrows to walk the row.
   The same three class names are all the next shelves need. */
.thumb-strip{display:flex;align-items:center;gap:6px;padding:14px 0 4px}
.strip-arrow{flex:0 0 32px;height:62px;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);transition:color .2s ease,border-color .2s ease}
.strip-arrow:hover{color:var(--ivory);border-color:rgba(201,184,159,.55)}
.strip-arrow svg{width:17px;height:17px}
.thumb-track{flex:1 1 auto;display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.thumb-track::-webkit-scrollbar{display:none}
.shot{flex:0 0 62px;padding:0;border:1px solid var(--line);background:#f7f2ea;cursor:pointer;transition:border-color .2s ease}
.shot img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.shot:hover{border-color:rgba(201,184,159,.55)}
.shot.picked{border-color:#8a6a49;box-shadow:inset 0 0 0 1px rgba(138,106,73,.55)}
.bag-item.bag-product img{object-fit:contain;background:#f7f2ea}
/* The bag follows a phone shopper down the shelf once it holds something.
   Fixed, never sticky: a sticky bar reserves no room and paints over the cards. */
.bag-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;background:#171511;border-top:1px solid var(--line)}
.bag-bar-sum{flex:0 1 auto;display:flex;flex-direction:column;line-height:1.25;white-space:nowrap}
.bag-bar-sum strong{font-family:var(--serif);font-size:17px;color:var(--ivory)}
.bag-bar-sum span{font-size:13px;color:var(--muted)}
.bag-bar .primary{flex:0 0 auto;width:auto;min-height:48px;padding:13px 18px;font-size:13px;gap:12px;white-space:nowrap}
@media(max-width:700px){.bag-bar:not([hidden]){display:flex}body.bag-bar-on{padding-bottom:82px}}
.bag-item .bag-variant{font-family:var(--serif);font-size:15px;color:#c8bcab;margin:0 0 8px}
/* .detail-content>p already sets 15px, so the badge has to outrank it by name
   or it renders at body size and reads as one more paragraph */
.detail-content>p.trust-badge{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:12px;letter-spacing:.03em;color:var(--muted)}
.trust-tick{width:14px;height:14px;flex:0 0 auto;stroke:#c9b89f;stroke-width:2}
.howto{border-top:1px solid var(--line);margin-top:20px;padding-top:4px}
.howto summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.howto summary::-webkit-details-marker{display:none}
.howto summary:hover{color:var(--ivory)}
/* the site's focus ring is scoped to button and a, and a summary is neither */
.howto summary:focus-visible{outline:2px solid var(--ember);outline-offset:5px}
.howto-chevron{width:16px;height:16px;flex:0 0 auto;color:#c9b89f;transition:transform .2s ease}
.howto[open] .howto-chevron{transform:rotate(180deg)}
.howto ul{margin:2px 0 6px;padding:0 0 0 18px}
.howto li{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 8px}
.howto li:last-child{margin-bottom:0}
/* Review v1: spacious photography and a single choice at a time. */
*{scrollbar-width:thin;scrollbar-color:#796953 #211e18}
.primary{border-radius:999px;justify-content:center;min-height:54px}
.primary:disabled{opacity:.5;cursor:not-allowed}
.product-card{border-radius:18px;overflow:hidden}
.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.product-body h3{font-size:27px}
.product-dialog{width:min(1100px,calc(100vw - 48px));max-width:none;max-height:92dvh;border-radius:24px;overflow:auto;padding:24px}
.product-dialog[open]{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:0 28px;align-items:start}
.product-dialog .hero-plate{grid-column:1;grid-row:1 / 3;position:sticky;top:0;width:100%;padding:0}
.hero-zoom{width:100%;height:auto;aspect-ratio:1;border-radius:16px;overflow:hidden}
.product-dialog .detail-content{grid-column:2;padding:20px 0 0;overflow:visible;min-width:0}
.product-dialog .detail-content h2{font-size:34px;line-height:1.15;padding-right:30px}
.product-dialog .product-footer{grid-column:2;padding:18px 0 0;background:none}
.product-dialog .close{position:sticky;grid-column:2;grid-row:1;justify-self:end;top:0;right:0;margin-bottom:-44px;z-index:5}
.photo-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid #f4eadb55;border-radius:50%;background:#211e18d9;color:#fff;font-size:30px;line-height:1;z-index:2}
.photo-nav.prev{left:10px}.photo-nav.next{right:10px}
.photo-count{position:absolute;bottom:12px;left:12px;border-radius:99px;padding:7px 12px;font-size:12px;color:#fff;background:#211e18d9;pointer-events:none}
.picker-step{font-size:16px;color:var(--ivory);margin:0 0 8px}
.swatch-row{gap:12px;padding:8px 3px 14px;scroll-snap-type:x proximity}
.swatch{flex:0 0 146px;border-radius:12px;overflow:hidden;scroll-snap-align:start;background:#f7f2ea}
.swatch img{height:140px;object-fit:contain}
.swatch span{font-size:12px;line-height:1.4;letter-spacing:0;padding:9px 7px;min-height:50px;display:flex;align-items:center;justify-content:center}
#product-variant-label{font-size:14px;min-height:2.6em;letter-spacing:0}
.size{border-radius:12px;min-height:50px;font-size:15px;padding:12px 16px}
.size-wrap{margin:16px 0 28px}.size-row{gap:10px}
.product-blurb{margin-top:16px}.picked-name{font-size:17px}
.gift-dialog{position:fixed;inset:0;margin:auto;width:min(540px,calc(100vw - 32px));max-width:none;height:fit-content;max-height:calc(100dvh - 32px);overflow-y:auto;padding:44px 28px 30px;border-radius:24px;background:linear-gradient(180deg,rgba(23,21,17,.92),rgba(20,17,15,.98)),url("assets/bg-clouds.webp") center/cover}
.gift-dialog::before{display:none}.gift-dialog::backdrop{background:#100d0bc9;backdrop-filter:none}
#gift-title{font-family:var(--serif);font-size:34px;text-transform:none;letter-spacing:-.025em;font-weight:400}
.gift-dialog.is-revealed .tarot.dimmed{display:none}
.gift-dialog.is-revealed .tarot-row{justify-content:center;margin:0 auto 20px}
.gift-dialog.is-revealed .tarot{width:82px}
.gift-dialog .reveal-body{font-size:15px;line-height:1.6;margin-bottom:20px}
.gift-field{display:grid;grid-template-columns:1fr;gap:12px}.gift-field .primary{width:100%;min-height:52px}
.gift-footnote{color:var(--muted);line-height:1.5}.gift-trigger{padding:12px 20px;border:1px solid #a38b70;border-radius:99px;font-size:14px}
.gift-dialog.is-unlocked .gift-stage{display:none}
.bag-item img{border-radius:10px}.bag-drawer{border-radius:22px 0 0 22px}
.bag-recommendation{border:1px solid var(--line);border-radius:16px;padding:18px;margin:22px 0 0}
.bag-recommendation p{font-size:14px;color:var(--muted);line-height:1.5;margin:8px 0 12px}
.bag-recommendation a{font-size:14px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){
 .product-grid{grid-template-columns:1fr;gap:24px}.product-card .artwork{aspect-ratio:1.15}.product-body{padding:22px}.product-body h3{font-size:29px}.product-card .primary{font-size:15px}.product-buy .price{font-size:24px!important}.product-note{display:block;font-size:15px}.product-card .art-label{font-size:10px}.product-card.ritual-card .ritual-description{font-size:15px;line-height:1.6}
 .product-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px;border-radius:20px}
 .product-dialog[open]{display:block}.product-dialog .hero-plate{position:relative;top:auto;width:100%}.hero-zoom{width:100%;height:auto;aspect-ratio:1}
 .product-dialog .close{position:absolute;right:20px;top:20px;margin:0;z-index:5}
 .product-dialog .detail-content{padding:20px 6px 0;overflow:visible}.product-dialog .detail-content h2{font-size:29px;padding-right:0}
 .product-dialog .product-footer{padding:16px 6px 6px}.product-footer .add-big{min-height:56px}
 .swatch{flex-basis:136px}.swatch img{height:130px}.swatch span{font-size:12px}
 .gift-dialog{padding:44px 20px 24px}.tarot{width:clamp(72px,24vw,112px)}.tarot-row{gap:10px}
 .gift-dialog.is-revealed .tarot{width:72px}.reveal-title{font-size:28px}
 .zoom-dialog #zoom-image{touch-action:pan-x pan-y pinch-zoom}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}