/* Hooked on Handmade Co. · category & product pages (matches index.html) */
:root{
  --bg:#F5F2EC; --surface:#FBF9F5; --ink:#16201C; --muted:#5A6560; --line:#DCD8CE;
  --pine:#18302A; --on-pine:#EEF0E8; --on-pine-muted:#A3B3AA;
  --brass:#C4A167; --brass-deep:#9C7A42; --rose:#E29AA7;
  --gold:linear-gradient(115deg,#8E6B36 0%,#D9BC84 28%,#F3E2B6 42%,#C29A5B 58%,#E8D29E 76%,#9C7A42 100%);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --caps:.2em; color-scheme:light;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root{--bg:#101613;--surface:#161E1A;--ink:#EDE9E0;--muted:#A3A9A2;--line:#2A332E;--brass-deep:#C9A465;color-scheme:dark}}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1240px,100% - clamp(2.5rem,7vw,7rem));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--pine);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* header */
.top{background:var(--pine);color:var(--on-pine)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.1rem 0}
.mark{text-decoration:none;font:400 1.25rem/1 var(--serif);letter-spacing:.14em;text-transform:uppercase}
.mark em{font-style:italic;text-transform:none;letter-spacing:0;color:var(--brass)}
.mark small{display:block;margin-top:.4rem;font:500 .58rem/1 var(--sans);letter-spacing:var(--caps);color:var(--on-pine-muted)}
.top nav{display:flex;gap:1.6rem}
.top nav a{text-decoration:none;font:500 .66rem/1 var(--sans);letter-spacing:var(--caps);text-transform:uppercase;color:var(--on-pine)}
.top nav a:hover{color:var(--brass)}
@media (max-width:640px){.top nav a:not(:first-child){display:none}.mark{font-size:1.05rem}}

.catnav{border-bottom:1px solid color-mix(in srgb,var(--brass) 30%,var(--line));background:var(--surface)}
.catnav .wrap{display:flex;gap:1.6rem;overflow-x:auto;padding:.95rem 0;scrollbar-width:none}
.catnav a{flex:none;text-decoration:none;font:500 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:.3rem;border-bottom:1px solid transparent}
.catnav a:hover,.catnav a[aria-current]{color:var(--ink);border-color:var(--brass)}

.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:1.6rem}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs .sep{margin:0 .55rem;color:var(--brass)}

h1{font:400 clamp(2.6rem,6vw,4.6rem)/1 var(--serif);letter-spacing:-.01em;margin:0 0 1.4rem}
h2{font:400 clamp(1.9rem,3.6vw,2.8rem)/1.05 var(--serif);margin:0 0 1rem}

/* category intro */
.intro{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem)}
.intro p{max-width:40rem;color:var(--muted);font-size:1.06rem;margin:0 0 .9rem}
.facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin:2rem 0 0;border:1px solid color-mix(in srgb,var(--brass) 45%,var(--line))}
.facts div{padding:.9rem 1.4rem;border-right:1px solid color-mix(in srgb,var(--brass) 35%,var(--line))}
.facts div:last-child{border-right:0}
.facts dt{font:500 .58rem/1 var(--sans);letter-spacing:var(--caps);text-transform:uppercase;color:var(--brass-deep);margin-bottom:.45rem}
.facts dd{margin:0;font:400 1.2rem/1.1 var(--serif)}
@media (max-width:640px){.facts{grid-template-columns:1fr}.facts div{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--brass) 35%,var(--line))}.facts div:last-child{border-bottom:0}}

/* product grid */
.grid-sec{padding:0 0 clamp(3rem,7vw,5.5rem)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:clamp(1.2rem,2.5vw,2rem)}
.card{text-decoration:none;display:block}
.card .ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--surface)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.card .ph::after{content:"";position:absolute;inset:10px;border:1px solid rgba(196,161,103,0);transition:border-color .4s}
.card:hover .ph img{transform:scale(1.04)}
.card:hover .ph::after{border-color:rgba(196,161,103,.8)}
.card .nm{display:block;font:400 1.35rem/1.15 var(--serif);margin-top:.8rem}
.card .pr{display:block;font:500 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);margin-top:.45rem}
.ai{position:absolute;left:.7rem;bottom:.7rem;font:500 .55rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#F5F2EC;background:rgba(16,32,27,.72);border:1px solid rgba(196,161,103,.55);padding:.4rem .55rem}

/* custom CTA */
.cta{background:var(--pine);color:var(--on-pine);padding:clamp(3.5rem,8vw,6rem) 0}
.cta p{max-width:38rem;color:var(--on-pine-muted);margin:0 0 1.8rem}
.btn{display:inline-block;text-decoration:none;font:500 .7rem/1 var(--sans);letter-spacing:var(--caps);text-transform:uppercase;padding:1.15rem 1.9rem;background:var(--ink);color:var(--bg);border:1px solid var(--ink);transition:background .25s,color .25s}
.btn:hover{background:transparent;color:var(--ink)}
.cta .btn{background:var(--on-pine);color:var(--pine);border-color:var(--on-pine)}
.cta .btn:hover{background:transparent;color:var(--on-pine)}
.btn.off{opacity:.5;pointer-events:none}

/* product page */
.product{padding:clamp(2rem,5vw,3.5rem) 0 0}
.pgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:860px){.pgrid{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.gallery figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--surface)}
.gallery figure.main{grid-column:1 / -1}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figure::after{content:"";position:absolute;inset:10px;border:1px solid rgba(196,161,103,.55);pointer-events:none}
.gallery figcaption{position:absolute;right:.7rem;bottom:.7rem;font:500 .55rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;background:rgba(251,249,245,.85);color:#16201C;padding:.4rem .55rem}
.info{position:sticky;top:1.5rem}
@media (max-width:860px){.info{position:static}}
.info .cat{font:500 .62rem/1 var(--sans);letter-spacing:var(--caps);text-transform:uppercase;color:var(--brass-deep);margin:0 0 .9rem}
.info h1{font-size:clamp(2.4rem,4.6vw,3.6rem);margin-bottom:.7rem}
.info .price{font:500 1rem/1 var(--sans);letter-spacing:.14em;margin:0 0 1.4rem}
.info .desc{color:var(--muted);font-size:1.06rem;margin:0 0 1.6rem;max-width:34rem}
.spec{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.5rem;border-top:1px solid color-mix(in srgb,var(--brass) 40%,var(--line));padding-top:1.3rem;margin:0 0 1.8rem;font-size:.94rem}
.spec dt{font:500 .58rem/1.9 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.spec dd{margin:0}
.buy .btn{width:100%;text-align:center}
.small{font-size:.8rem;color:var(--muted);margin:.7rem 0 0}
.link{display:block;margin-top:1.1rem;font:500 .66rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);text-decoration:none}
.link:hover{color:var(--ink)}
.aino{font-size:.8rem;line-height:1.5;color:var(--muted);margin:1.6rem 0 0;padding-left:.8rem;border-left:2px solid var(--brass)}
.more{padding:clamp(4rem,8vw,6rem) 0;margin-top:clamp(3rem,7vw,5rem);border-top:1px solid color-mix(in srgb,var(--brass) 30%,var(--line))}
.more .link{margin-top:2rem}

/* footer */
.foot{background:var(--pine);color:var(--on-pine);padding:clamp(3.5rem,7vw,5rem) 0 2rem;overflow:hidden}
.cta + .foot,.more + .foot{border-top:1px solid rgba(196,161,103,.25)}
.foot .big{font:400 clamp(3rem,11vw,9rem)/.85 var(--serif);letter-spacing:-.03em;margin:0 0 2.5rem;white-space:nowrap}
.foot .big em{font-style:italic;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em .12em 0}
.foot .cols{display:grid;grid-template-columns:auto auto 1fr;gap:clamp(2rem,6vw,5rem);padding-bottom:2rem;border-bottom:1px solid rgba(196,161,103,.35)}
@media (max-width:700px){.foot .cols{grid-template-columns:1fr 1fr}.foot .note{grid-column:1 / -1}}
.foot h2{font:500 .6rem/1 var(--sans);letter-spacing:var(--caps);text-transform:uppercase;color:var(--brass);margin:0 0 1rem}
.foot .cols a{display:block;text-decoration:none;color:var(--on-pine-muted);font-size:.92rem;margin-bottom:.5rem}
.foot .cols a:hover{color:var(--on-pine)}
.foot .note{color:var(--on-pine-muted);font-size:.92rem;max-width:22rem;margin:0;justify-self:end}
@media (max-width:700px){.foot .note{justify-self:start}}
.foot .legal{font:500 .58rem/1 var(--sans);letter-spacing:var(--caps);text-transform:uppercase;color:var(--on-pine-muted);margin:1.6rem 0 0}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
/* a single extra photo spans the full width instead of leaving a gap */
.gallery figure.alt:nth-child(2):last-child{grid-column:1 / -1;aspect-ratio:5/4}