:root{
  --plum:#5f3f44; --plum-deep:#43292e; --rose:#d79aa6; --rose-soft:#f3dde1;
  --cream:#fbf6f2; --paper:#ffffff; --ink:#2f2326; --muted:#6e5c60;
  --head:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

/* Hero */
.hero{background:#5e3e45 url(img/texture.jpg) repeat;background-size:180px auto;color:#fff;text-align:center;padding:2.5rem 1.25rem 3rem}
.hero__inner{max-width:640px;margin:0 auto}
.hero__logo{width:min(78vw,340px);height:auto;margin:-1rem auto .5rem;-webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);mask-image:radial-gradient(closest-side,#000 84%,transparent 100%)}
.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}
.hero__lede{margin:0 auto 1.75rem;max-width:30ch;font-size:1.08rem;color:#f6e4e8}
.hero__actions{display:flex;flex-direction:column;gap:.75rem;align-items:center}
@media (min-width:560px){.hero__actions{flex-direction:row;justify-content:center}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.5rem;border-radius:999px;font-weight:600;font-size:.98rem;text-decoration:none;letter-spacing:.02em;transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--rose);color:var(--plum-deep);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.btn--primary:hover{background:#e3adb8}
.btn--ghost{border:1.5px solid rgba(255,255,255,.7);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.hero .btn{width:min(100%,300px)}
@media (min-width:560px){.hero .btn{width:auto}}

/* Section tabs */
.tabs{position:sticky;top:0;z-index:5;display:flex;justify-content:center;flex-wrap:wrap;gap:.25rem;background:rgba(251,246,242,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #ecdfe2;padding:.5rem}
.tabs a{text-decoration:none;font-family:var(--head);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--plum);padding:.45rem .6rem;border-radius:999px}
.tabs a:hover{background:var(--rose-soft)}

/* Sections */
.section{padding:2.75rem 1.1rem;scroll-margin-top:56px}
.section--alt{background:#f6ece8}
.section__head{text-align:center;max-width:560px;margin:0 auto 1.75rem}
.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;font-weight:700;color:#a8606f}
.section h2,.about h2{font-family:var(--head);font-weight:500;font-size:clamp(1.55rem,5.6vw,2.1rem);text-transform:uppercase;letter-spacing:.08em;color:var(--plum);margin:.25rem 0 .4rem;line-height:1.2}
.section__sub{margin:0;color:var(--muted)}

/* Grid + cards */
.grid{display:grid;grid-template-columns:1fr;gap:1.25rem;max-width:1120px;margin:0 auto}
@media (min-width:600px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid{grid-template-columns:repeat(3,1fr);gap:1.6rem}}
.card{background:var(--paper);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(67,41,46,.06),0 8px 24px rgba(67,41,46,.08)}
.card__media{position:relative;aspect-ratio:4/5;background:#f1e8e5;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__tag{position:absolute;left:.75rem;top:.75rem;background:var(--plum);color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.06em;padding:.3rem .7rem;border-radius:999px}
.card__body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card__head{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.card__name{margin:0;font-family:var(--head);font-size:1.02rem;font-weight:600;line-height:1.3;letter-spacing:.04em;color:var(--ink)}
.card__price{flex:none;font-weight:700;color:#9c4f60;white-space:nowrap}
.card__caption{margin:0;color:var(--muted);font-size:.97rem;flex:1}
.btn--shop{margin-top:.35rem;width:100%;background:var(--plum);color:#fff}
.btn--shop:hover{background:var(--plum-deep)}
.card--idea .card__caption{font-style:italic}

/* About */
.about{text-align:center;max-width:620px;margin:0 auto;padding:3.25rem 1.4rem 3.5rem;scroll-margin-top:56px}
.about__mark{display:block;font-family:var(--head);font-weight:500;font-size:3.2rem;line-height:1;color:var(--rose)}
.about p{color:var(--muted);margin:0 0 1rem}
.about .about__disclosure{font-size:.9rem}
.about .btn{margin-top:.5rem}
.noscript{text-align:center;padding:1rem}

/* Footer */
.footer{background:var(--plum-deep);color:#ecd6db;text-align:center;padding:2rem 1.25rem 2.5rem}
.footer__brand{font-family:var(--head);font-weight:500;font-size:1.4rem;letter-spacing:.3em;text-transform:uppercase;color:var(--rose);margin:0 0 .75rem}
.footer__disclosure{max-width:520px;margin:0 auto .75rem;font-size:.9rem}
.footer__small{margin:0;font-size:.8rem;opacity:.75}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

.card__was{font-weight:500;color:var(--muted);font-size:.85rem;margin-left:.2rem}
.card__price{text-align:right}
.card__note{display:block;font-weight:600;font-size:.78rem;color:var(--muted)}
.card__sizes{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.35rem}
.btn--size{flex:1 1 calc(50% - .45rem);min-height:44px;padding:.55rem .8rem;font-size:.9rem;background:var(--plum);color:#fff}
.btn--size:hover{background:var(--plum-deep)}

.card__track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:pointer}
.card__track::-webkit-scrollbar{display:none}
.card__track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.card__dots{position:absolute;left:0;right:0;bottom:.6rem;display:flex;justify-content:center;gap:.4rem}
.card__dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(67,41,46,.25);cursor:pointer}
.card__dot.is-on{background:#fff}

/* T&T = Tried & True badge */
.card__tt{position:absolute;right:.6rem;top:.6rem;z-index:2;font-family:var(--head);font-size:.68rem;font-weight:600;letter-spacing:.08em;line-height:1;color:#fff;background:rgba(160,96,111,.92);border:1.5px solid rgba(255,255,255,.85);padding:.36rem .55rem;border-radius:999px;box-shadow:0 2px 6px rgba(67,41,46,.22);pointer-events:auto}
.tt-legend{margin:0;padding:.6rem 1rem;background:var(--cream);text-align:center;font-size:.8rem;color:var(--muted);letter-spacing:.01em}
.tt-legend .tt-chip{display:inline-block;font-family:var(--head);font-size:.62rem;font-weight:600;letter-spacing:.08em;line-height:1;color:#fff;background:#a0606f;padding:.28rem .45rem;border-radius:999px;vertical-align:.1em;margin-right:.3rem}
