/* ==================================================================
   Rośe — shared stylesheet
   Every visual decision lives here. Change the tokens at the top and
   the whole site follows.
   ================================================================== */

:root{
  --wine:#6B1F35; --wine-deep:#4A1425; --petal:#D9A5A8; --petal-soft:#F2DEDD;
  --cream:#FBF7F2; --bone:#F3EDE4; --brass:#B08D57;
  --ink:#2B2320; --muted:#7A6E68; --line:#E7DED2; --white:#FFFFFF;
  --ok:#2F6B4F; --warn:#8A5B00; --err:#A32B2B;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(43,35,32,.05),0 8px 30px rgba(43,35,32,.07);
  --r:3px;
  --hdr:66px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:var(--wine);text-underline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0;letter-spacing:.01em}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:20px}
@media(min-width:800px){.wrap{padding-inline:36px}}
.narrow{max-width:840px}

/* ------------------------------ buttons --------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:50px;padding:0 26px;border-radius:var(--r);
  font-size:15px;font-weight:500;letter-spacing:.04em;text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease;
}
.btn-primary{background:var(--wine);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--wine-deep)}
.btn-ghost{background:transparent;color:var(--wine);border:1px solid var(--petal)}
.btn-ghost:hover:not(:disabled){background:var(--petal-soft)}
.btn-quiet{background:none;color:var(--muted);min-height:auto;padding:6px 0;font-size:14px;text-decoration:underline;display:inline-flex;gap:.4em;align-items:center}
.btn-quiet:hover{color:var(--wine)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-block{width:100%}

/* ------------------------------ header ---------------------------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(251,247,242,.95);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:16px;min-height:var(--hdr)}
.mark{font-family:var(--serif);font-size:30px;letter-spacing:.1em;color:var(--wine);text-decoration:none;line-height:1}
.mark small{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.28em;color:var(--brass);text-transform:uppercase;margin-top:3px}
.nav{display:none;margin-left:auto;gap:28px}
@media(min-width:880px){.nav{display:flex}}
.nav a{color:var(--muted);text-decoration:none;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;transition:color .18s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--wine)}
.cart-link{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);font-size:14px;text-decoration:none;color:var(--ink);transition:border-color .18s}
@media(min-width:880px){.cart-link{margin-left:24px}}
.cart-link:hover{border-color:var(--petal)}
.pill{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:var(--wine);color:#fff;font-size:11.5px;font-weight:600}
.pill.zero{background:var(--line);color:var(--muted)}

/* ------------------------------- hero ----------------------------- */
.hero{padding:64px 0 52px;text-align:center;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--cream) 0%,var(--bone) 100%)}
@media(min-width:800px){.hero{padding:104px 0 88px}}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);margin-bottom:22px}
.hero h1{font-size:clamp(40px,10vw,74px);color:var(--wine-deep);font-weight:400}
.hero h1 em{font-style:italic;color:var(--wine)}
.hero p{max-width:32em;margin:20px auto 30px;color:var(--muted);font-size:17px}
.rule{width:52px;height:1px;background:var(--brass);margin:24px auto 22px;opacity:.6}

/* ----------------------------- sections --------------------------- */
section{scroll-margin-top:calc(var(--hdr) + 12px)}
.sec{padding:64px 0}
.sec-alt{background:var(--bone);border-block:1px solid var(--line)}
.sec-head{text-align:center;margin-bottom:40px}
.sec-head h2{font-size:clamp(28px,6vw,40px);color:var(--wine-deep)}
.sec-head p{color:var(--muted);margin:12px auto 0;max-width:34em}
.page-head{padding-block:34px 8px}   /* padding-block only — a shorthand here would cancel .wrap's side gutters */
.crumbs{font-size:13px;color:var(--muted);margin-bottom:20px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--wine);text-decoration:underline}
.crumbs span{margin:0 8px;opacity:.5}

/* ------------------------------- grid ----------------------------- */
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media(max-width:560px){.grid{grid-template-columns:repeat(2,1fr);gap:14px}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-align:left;text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.card:hover{border-color:var(--petal);box-shadow:var(--shadow);transform:translateY(-2px)}
.card-img{position:relative;aspect-ratio:3/4;background:var(--bone);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-img img{transform:scale(1.035)}
.card-img.oos img{filter:grayscale(.65) opacity(.62)}
.badge{position:absolute;top:10px;left:10px;background:var(--wine);color:#fff;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border-radius:2px}
.badge.soft{background:var(--white);color:var(--wine);border:1px solid var(--petal)}
.card-body{padding:14px 14px 18px;flex:1;display:flex;flex-direction:column;gap:7px}
.card-title{font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--ink)}
.card-price{font-size:15px;color:var(--wine);font-weight:500}
.swatches{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:6px}
.sw{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:2px 7px;background:var(--cream)}
.card-note{font-size:12px;color:var(--muted)}

.sk{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sk .b{background:linear-gradient(90deg,var(--bone) 25%,#EFE7DB 37%,var(--bone) 63%);background-size:400% 100%;animation:sh 1.4s ease infinite}
.sk .b1{aspect-ratio:3/4}.sk .b2{height:15px;margin:14px 14px 8px;border-radius:2px}.sk .b3{height:13px;width:45%;margin:0 14px 18px;border-radius:2px}
@keyframes sh{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* --------------------------- product page ------------------------- */
.pd{display:grid;gap:28px;padding-bottom:20px}
@media(min-width:900px){.pd{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:start}}
.pd-media{display:flex;flex-direction:column;gap:12px}
.pd-hero{background:var(--bone);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pd-hero img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media(min-width:900px){.pd-hero img{aspect-ratio:auto;height:min(74vh,720px)}}
.pd-thumbs{display:flex;gap:9px;flex-wrap:wrap}
.pd-thumbs button{width:62px;height:80px;border:1px solid var(--line);border-radius:2px;overflow:hidden;padding:0;background:var(--bone);transition:border-color .15s}
.pd-thumbs button[aria-current="true"]{border-color:var(--wine)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.pd-info{position:sticky;top:calc(var(--hdr) + 28px)}}
.pd-info h1{font-size:clamp(28px,5vw,40px);color:var(--wine-deep);margin-bottom:10px}
.pd-price{font-size:22px;color:var(--wine);margin-bottom:6px}
.pd-desc{font-size:15px;color:var(--muted);margin-top:6px}
.pd-desc p{margin:0 0 .7em}
.field-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;display:block}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1px solid var(--line);background:var(--white);border-radius:2px;padding:10px 16px;font-size:14px;min-height:44px;transition:.15s}
.opt[aria-pressed="true"]{border-color:var(--wine);background:var(--petal-soft);color:var(--wine-deep)}
.opt:disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--white)}
.qty button{width:46px;height:46px;font-size:19px;color:var(--muted);transition:.15s}
.qty button:hover:not(:disabled){background:var(--bone);color:var(--wine)}
.qty button:disabled{opacity:.3;cursor:not-allowed}
.qty span{min-width:42px;text-align:center;font-size:15px}
.stock{font-size:13px;color:var(--muted)}
.stock.low{color:var(--warn)}
.stock.out{color:var(--err)}
.stack{display:flex;flex-direction:column;gap:18px}
.meta{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;display:grid;gap:6px}

/* ------------------------------ cart ------------------------------ */
.cart-grid{display:grid;gap:30px;padding-bottom:40px}
@media(min-width:900px){.cart-grid{grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start}}
.li{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.li:first-child{border-top:1px solid var(--line)}
.li img{width:84px;height:108px;object-fit:cover;background:var(--bone);border-radius:2px}
.li-t{font-family:var(--serif);font-size:19px;line-height:1.25}
.li-t a{color:inherit;text-decoration:none}
.li-t a:hover{color:var(--wine)}
.li-v{font-size:13px;color:var(--muted);margin-top:2px}
.li-p{font-size:16px;color:var(--wine);white-space:nowrap}
.li .qty button{width:38px;height:38px;font-size:17px}
.li .qty span{min-width:34px;font-size:14px}
@media(max-width:560px){
  /* two columns on a phone: photo on the left, everything else stacked right */
  .li{grid-template-columns:74px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 14px}
  .li-photo{grid-column:1;grid-row:1 / span 2}
  .li img{width:74px;height:96px}
  .li-main{grid-column:2;grid-row:1}
  .li-p{grid-column:2;grid-row:2;text-align:left;font-size:16px;padding-top:2px}
}
.summary{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
@media(min-width:900px){.summary{position:sticky;top:calc(var(--hdr) + 28px)}}
.totrow{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);padding:4px 0;gap:16px}
.totrow.big{font-size:18px;color:var(--ink);font-weight:600;padding-top:12px;margin-top:10px;border-top:1px solid var(--line)}
.totrow.big span:last-child{color:var(--wine)}
.free{font-size:13px;color:var(--ok);text-align:center;margin-bottom:12px}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.empty h2{font-size:26px;color:var(--wine-deep);margin-bottom:10px}

/* ----------------------------- forms ------------------------------ */
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.panel + .panel{margin-top:18px}
.panel h2{font-size:21px;color:var(--wine-deep);margin-bottom:4px}
.panel .hint{font-size:13px;color:var(--muted);margin:0 0 18px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.req{color:var(--wine)}
input,select,textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px;min-height:50px;transition:border-color .15s ease,box-shadow .15s ease;
}
textarea{min-height:86px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%237A6E68' d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(107,31,53,.09)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--err);background:#FEF7F7}
input[readonly]{background:var(--bone);color:var(--muted)}
.err{display:none;color:var(--err);font-size:12.5px;margin-top:5px}
.err.on{display:block}
.row{display:grid;gap:0 14px}
@media(min-width:560px){.row-2{grid-template-columns:1fr 1fr}.row-3{grid-template-columns:1.4fr 1fr 1fr}}

.pay{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:12px;background:var(--white);transition:.15s}
.pay[aria-pressed="true"]{border-color:var(--wine);background:var(--petal-soft)}
.pay-t{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:var(--ink)}
.pay-d{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.5}
.dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 auto;display:grid;place-items:center}
.pay[aria-pressed="true"] .dot{border-color:var(--wine)}
.pay[aria-pressed="true"] .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--wine)}

.note{background:var(--petal-soft);border-left:3px solid var(--wine);padding:16px 18px;font-size:14.5px;line-height:1.6;border-radius:0 2px 2px 0}
.note strong{color:var(--wine-deep)}
.big-num{font-family:var(--serif);font-size:28px;color:var(--wine-deep);letter-spacing:.02em;display:block;margin:6px 0 2px}
.alert{border-radius:var(--r);padding:14px 16px;font-size:14px;line-height:1.6;margin-bottom:18px;display:none}
.alert.on{display:block}
.alert-err{background:#FDF3F3;border:1px solid #F0CFCF;color:#7A2020}
.alert-warn{background:#FFFAEE;border:1px solid #EBD9A8;color:#6B4E00}
.alert a{color:inherit}
.mini{display:grid;grid-template-columns:52px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.mini.noimg{grid-template-columns:1fr auto}
.mini img{width:52px;height:66px;object-fit:cover;background:var(--bone);border-radius:2px}
.mini-t{font-size:14px;line-height:1.3}
.mini-v{font-size:12px;color:var(--muted)}

/* -------------------------- confirmation -------------------------- */
.conf-head{text-align:center;padding:44px 0 6px}
.tick{width:58px;height:58px;border-radius:50%;background:var(--petal-soft);color:var(--wine);display:grid;place-items:center;margin:0 auto 20px;font-size:27px}
.conf-head h1{font-size:clamp(30px,7vw,42px);color:var(--wine-deep)}
.order-no{font-family:var(--serif);font-size:36px;color:var(--wine);letter-spacing:.04em;margin:8px 0 2px}

/* --------------------------- accordion ---------------------------- */
.acc{border-top:1px solid var(--line)}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc h3{margin:0}
.acc button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px;padding:19px 2px;text-align:left;font-family:var(--serif);font-size:19px;color:var(--ink)}
.acc .ic{color:var(--brass);font-size:20px;transition:transform .2s}
.acc button[aria-expanded="true"] .ic{transform:rotate(45deg)}
.acc .body{display:none;padding:0 2px 20px;color:var(--muted);font-size:15px;max-width:62em}
.acc .body.on{display:block}
.acc .body p{margin:0 0 .8em}

/* ----------------------------- footer ----------------------------- */
.ft{background:var(--wine);color:#fff;padding:52px 0 34px}
.ft .mark{color:#fff}
.ft .mark small{color:var(--petal)}
.ft-grid{display:grid;gap:30px}
@media(min-width:700px){.ft-grid{grid-template-columns:1.2fr 1fr 1fr}}
.ft h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--petal);margin:0 0 12px;font-weight:500;font-family:var(--sans)}
.ft a{color:#fff;text-decoration:none;font-size:15px}
.ft a:hover{text-decoration:underline}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft p,.ft li.plain{color:rgba(255,255,255,.78);font-size:14.5px;margin:0}
.ft-b{border-top:1px solid rgba(255,255,255,.16);margin-top:34px;padding-top:20px;font-size:12.5px;color:rgba(255,255,255,.6);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

/* ------------------------------ toast ----------------------------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--wine-deep);color:#fff;padding:14px 22px;border-radius:var(--r);font-size:14.5px;z-index:200;opacity:0;pointer-events:none;transition:.25s;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 8px 30px rgba(43,35,32,.25)}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}