/* Shared by shop.html and product.html (index.html still carries its own copy; fold together when the WordPress theme is cut).
   Palette: ash black, charcoal, bone, #6E0F14 deep blood red (the only red). Fonts: Pirata One display, Play body. */
:root{
  --canvas:#0c0a09; --surface:#171311; --ink:#efe7da; --ink-soft:#a89e92; --blood:#6e0f14; --gold:#d9a441;
  --hair:color-mix(in oklab,var(--ink) 14%,transparent); --hair2:color-mix(in oklab,var(--ink) 26%,transparent);
  --display:"Pirata One",serif; --text:"Play",system-ui,sans-serif; --dg:"Deutsch Gothic","Pirata One",serif;
  --bar-h:3.5rem; --gutter:clamp(1.1rem,4.5vw,4.5rem); --r:18px; --ease:cubic-bezier(.23,1,.32,1);
}
@font-face{font-family:"Deutsch Gothic";src:url(../fonts/Deutsch.ttf) format("truetype");font-display:swap}
*{box-sizing:border-box}
html{scroll-padding-top:var(--bar-h);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.disp{font-family:var(--display);font-weight:400}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:fixed;left:1rem;top:-4rem;z-index:200;background:var(--blood);color:var(--ink);padding:.7rem 1rem;border-radius:6px;font-weight:700}
.skip:focus{top:1rem}
.label{font:700 .75rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* chrome */
.bar{position:fixed;inset:0 0 auto 0;z-index:90;height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;padding:0 max(1rem,env(safe-area-inset-right)) 0 max(1rem,env(safe-area-inset-left));pointer-events:none}
.bar>*{pointer-events:auto}
@media(max-width:899px){.bar{background:linear-gradient(rgba(12,10,9,.92) 60%,rgba(12,10,9,0))}}
.mark{font:400 1.5rem/1 var(--display);letter-spacing:.02em;color:var(--ink);text-decoration:none;padding:.75rem .25rem}
.bar nav.top{display:none;gap:1.6rem;margin-left:auto;margin-right:1rem}
.bar nav.top a{text-decoration:none;font-weight:700;font-size:.95rem;color:var(--ink);opacity:.85;padding:.5rem 0}
.bar nav.top a:hover,.bar nav.top a[aria-current]{opacity:1;box-shadow:0 2px 0 var(--blood)}
@media(min-width:900px){.bar nav.top{display:flex}}
.cartlink{position:relative;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--hair2);background:color-mix(in oklab,var(--canvas) 78%,transparent);backdrop-filter:blur(8px);margin-right:.5rem;text-decoration:none}
.cartlink b{position:absolute;top:2px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--blood);font:700 .7rem/18px var(--text);text-align:center;color:var(--ink);padding:0 4px}
.burger{width:48px;height:48px;border-radius:50%;border:1px solid var(--hair2);background:color-mix(in oklab,var(--canvas) 78%,transparent);backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.burger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .24s var(--ease),background-color .24s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .24s var(--ease)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:80;background:radial-gradient(90% 70% at 85% 100%,color-mix(in oklab,var(--blood) 85%,transparent),transparent 72%),var(--canvas);display:grid;align-content:center;padding:6rem var(--gutter) 3rem;opacity:0;visibility:hidden;transform:translateY(-1.2rem);transition:opacity .32s var(--ease),transform .32s var(--ease),visibility 0s .32s}
.menu.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu ul{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.2rem}
.menu a{display:flex;align-items:baseline;gap:1.2rem;padding:.4rem 0;font:400 clamp(2.6rem,9vw,5.4rem)/1 var(--display);color:var(--ink);text-decoration:none;min-height:48px;text-transform:uppercase}
.menu a small{font:500 .95rem/1.3 var(--text);text-transform:none;color:var(--ink-soft);transition:opacity .25s,transform .25s var(--ease)}
@media(hover:hover){.menu a small{opacity:0;transform:translateX(-10px)}.menu a:hover small,.menu a:focus-visible small{opacity:1;transform:none}}
.menu a:hover,.menu a:focus-visible{color:#b8232d}
.skipnote{margin-top:2.4rem;color:var(--ink-soft);font-size:.9rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.8rem 1.6rem;border-radius:999px;background:var(--blood);color:var(--ink);font:700 1rem/1 var(--text);text-decoration:none;border:1px solid var(--hair2);cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.btn:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--ink) 55%,transparent)}
.btn--ghost{background:transparent}
.btn--block{width:100%}
.row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* footer */
.foot{border-top:1px solid var(--hair);margin-top:clamp(4rem,9vw,8rem);padding:3rem var(--gutter) 2.4rem;display:grid;gap:1.4rem;color:var(--ink-soft);font-size:.95rem;position:relative;overflow:hidden}
.foot .ghost{font:400 clamp(4rem,18vw,18rem)/.8 var(--display);color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--ink) 12%,transparent);white-space:nowrap;text-align:center;user-select:none;pointer-events:none}
.foot .links{display:flex;flex-wrap:wrap;gap:.4rem 2rem}.foot a{color:var(--ink);text-underline-offset:3px}

/* reviews */
.stars{display:inline-flex;gap:2px;color:var(--ink)}
.stars svg{width:16px;height:16px;fill:currentColor}
.review{border:1px solid var(--hair);border-radius:var(--r);padding:1.4rem;background:var(--surface);display:grid;gap:.6rem;align-content:start}
.review p{margin:0}.review .who{font-weight:700}.review .meta{color:var(--ink-soft);font-size:.88rem}
.stars svg.off{opacity:.25}
.rv-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.5rem}
.rv-media img,.rv-media video{width:100%;border-radius:10px;border:1px solid var(--hair);aspect-ratio:1;object-fit:cover;background:#000}
.rv-media video{grid-column:1/-1;aspect-ratio:16/9}
.rv-notice{background:var(--surface);border:1px solid var(--hair2);border-radius:12px;padding:1rem 1.2rem;margin:0 0 1.2rem}
.rv-empty{color:var(--ink-soft);max-width:40rem}
.rv-details{margin-top:1.6rem}.rv-details>summary{list-style:none;cursor:pointer}.rv-details>summary::-webkit-details-marker{display:none}
.rv-form{max-width:40rem;margin-top:1.4rem;display:grid;gap:.2rem}
.rv-note{color:var(--ink-soft);font-size:.92rem;margin:0 0 1rem}
.rv-stars{border:0;padding:0;margin:0 0 1.1rem}
.rv-row{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.2rem}
.rv-stars legend{padding:0;font-weight:700;font-size:.95rem;margin-bottom:.4rem}
.rv-stars input{position:absolute;opacity:0;width:1px;height:1px}
.rv-stars label{cursor:pointer;display:inline-grid;place-items:center;width:44px;height:44px}
.rv-stars label svg{width:30px;height:30px;fill:none;stroke:var(--ink-soft);stroke-width:1.4}
.rv-stars input:checked~label svg,.rv-stars label:hover svg,.rv-stars label:hover~label svg{fill:var(--ink);stroke:var(--ink)}
.rv-stars input:focus-visible+label{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}