/* ==========================================================================
   Meridian Coffee Roasters — demo build by Ascenza.
   Shared stylesheet: index (shop) / product / cart
   ========================================================================== */

:root{
  --cream:#FAF6F0;
  --cream-2:#F1E9DD;
  --paper:#FFFFFF;
  --espresso:#2B1B14;
  --ink:#1A120D;
  --body:#6B5B50;
  --faint:#9C8B7E;
  --crema:#C4703C;
  --crema-dk:#A85B2C;
  --green:#3F7255;
  --line:rgba(26,18,13,.13);

  --r:14px;
  --gut:clamp(18px,4.5vw,44px);
  --maxw:1220px;
  --sect:clamp(56px,8vw,104px);
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 22px 50px -28px rgba(43,27,20,.5);
  --font:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font); background:var(--cream); color:var(--body);
  font-size:16px; line-height:1.65; letter-spacing:-.008em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.locked{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--crema); outline-offset:3px; }
::selection{ background:var(--cream-2); }

h1,h2,h3,h4{ color:var(--ink); line-height:1.14; letter-spacing:-.03em; font-weight:700; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sect); }
.center{ text-align:center; }
.narrow{ max-width:660px; margin-inline:auto; }

.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--crema);
}
h1.big{ font-size:clamp(2.2rem,5.6vw,3.7rem); }
h2.title{ font-size:clamp(1.7rem,3.8vw,2.6rem); margin-top:12px; }
.lede{ margin-top:14px; font-size:1.03rem; max-width:58ch; }
.center .lede{ margin-inline:auto; }

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:99px;
  font-size:.92rem; font-weight:700; white-space:nowrap;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn svg{ width:17px; height:17px; }
.btn:hover{ transform:translateY(-2px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn--dark{ background:var(--espresso); color:#fff; box-shadow:0 12px 26px -14px rgba(43,27,20,.9); }
.btn--dark:hover{ background:#3D2A20; }
.btn--crema{ background:var(--crema); color:#fff; box-shadow:0 12px 26px -14px rgba(196,112,60,.9); }
.btn--crema:hover{ background:var(--crema-dk); }
.btn--line{ border:1.5px solid var(--line); color:var(--ink); }
.btn--line:hover{ border-color:var(--ink); }
.btn--full{ width:100%; }
.btn--sm{ padding:10px 18px; font-size:.85rem; }

/* ------------------------------------------------------------------ header */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(250,246,240,.93);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:22px; padding-block:15px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); font-size:1.08rem; letter-spacing:-.03em; }
.logo-mark{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--espresso); color:var(--crema);
  display:grid; place-items:center; font-family:var(--serif); font-size:1.05rem;
}
.nav{ display:flex; gap:28px; }
.nav a{ font-size:.92rem; font-weight:600; color:var(--ink); position:relative; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
  background:var(--crema); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

.hdr-act{ display:flex; align-items:center; gap:12px; }
.cart-btn{ position:relative; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); transition:border-color .3s, background .3s; }
.cart-btn:hover{ border-color:var(--ink); background:var(--paper); }
.cart-btn svg{ width:19px; height:19px; color:var(--ink); }
.badge{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
  border-radius:99px; background:var(--crema); color:#fff;
  font-size:.7rem; font-weight:800; display:grid; place-items:center;
  transform:scale(0); transition:transform .3s var(--ease);
}
.badge.on{ transform:scale(1); }

.burger{ display:none; width:42px; height:42px; place-items:center; border:1px solid var(--line); border-radius:50%; }
.burger span{ display:block; width:17px; height:1.8px; background:var(--ink); border-radius:2px; transition:.35s var(--ease); }
.burger span+span{ margin-top:4.5px; }
.burger.on span:nth-child(1){ transform:translateY(6.3px) rotate(45deg); }
.burger.on span:nth-child(2){ opacity:0; }
.burger.on span:nth-child(3){ transform:translateY(-6.3px) rotate(-45deg); }
.sheet{ display:none; border-top:1px solid var(--line); padding:10px var(--gut) 20px; background:var(--cream); }
.sheet.on{ display:block; }
.sheet a{ display:block; padding:13px 0; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); }

/* announcement */
.ann{ background:var(--espresso); color:#E9DDD2; text-align:center; padding:9px 16px; font-size:.83rem; font-weight:500; }
.ann b{ color:var(--crema); }

/* ------------------------------------------------------------------ hero */
.hero{ position:relative; overflow:hidden; background:var(--cream-2); }
.hero-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,5vw,60px); align-items:center; padding-block:clamp(44px,7vw,88px); }
.hero-art{ position:relative; aspect-ratio:1/1; border-radius:50%; overflow:hidden; box-shadow:var(--shadow); }

/* Faux photography — gradients only, no external assets */
.ph{ position:absolute; inset:0; }
.ph-beans   { background:radial-gradient(circle at 38% 34%,#7A4A2B 0 12%,transparent 12.5%),radial-gradient(circle at 66% 58%,#8B5733 0 14%,transparent 14.5%),radial-gradient(circle at 30% 72%,#6B3E22 0 11%,transparent 11.5%),linear-gradient(150deg,#3E2617,#5C3820); }
.ph-pour    { background:radial-gradient(circle at 50% 62%,#D7B892 0 26%,transparent 26.5%),linear-gradient(#2E1D13,#4A2F1D); }
.ph-eth     { background:linear-gradient(150deg,#E9C9A0 0 52%,#C48A52); }
.ph-col     { background:linear-gradient(150deg,#D9B48C 0 52%,#A9683C); }
.ph-bra     { background:linear-gradient(150deg,#C9A57E 0 52%,#8D5A34); }
.ph-ken     { background:linear-gradient(150deg,#E0B8B0 0 52%,#A8544C); }
.ph-hou     { background:linear-gradient(150deg,#C0A08A 0 52%,#6E4630); }
.ph-dec     { background:linear-gradient(150deg,#CBBBA6 0 52%,#7E6A54); }
.ph-farm    { background:linear-gradient(#BBD3C4 0 40%,#6E9478 40% 72%,#47664F 72%); }
.ph-roast   { background:linear-gradient(150deg,#3A2418 0 50%,#6A4126); }

/* ------------------------------------------------------------------ shop */
.filters{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:34px; }
.filter{
  padding:9px 18px; border-radius:99px; font-size:.86rem; font-weight:600;
  border:1px solid var(--line); color:var(--body); background:var(--paper);
  transition:all .3s var(--ease);
}
.filter:hover{ border-color:var(--ink); color:var(--ink); }
.filter.on{ background:var(--espresso); border-color:var(--espresso); color:#fff; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:clamp(18px,2.6vw,30px); }

.prod{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.prod:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.prod.hide{ display:none; }
.prod-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--cream-2); }
.prod-media .ph{ transition:transform .8s var(--ease); }
.prod:hover .prod-media .ph{ transform:scale(1.07); }
.chip{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:5px 11px; border-radius:99px; background:rgba(255,255,255,.94);
  font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink);
}
.chip--sold{ background:rgba(43,27,20,.9); color:#fff; }
.prod-body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; gap:7px; }
.prod-body h3{ font-size:1.06rem; }
.prod-origin{ font-size:.8rem; color:var(--faint); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.notes{ font-size:.88rem; }
.prod-foot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.price{ font-size:1.15rem; font-weight:800; color:var(--ink); }
.price small{ font-size:.76rem; font-weight:600; color:var(--faint); }

/* ------------------------------------------------------------------ product page */
.pd{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4.5vw,60px); align-items:start; }
.pd-media{ position:relative; aspect-ratio:1/1; border-radius:var(--r); overflow:hidden; background:var(--cream-2); }
.pd-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.pd-thumb{ position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.crumb{ font-size:.85rem; color:var(--faint); margin-bottom:16px; }
.crumb a:hover{ color:var(--ink); }
.pd h1{ font-size:clamp(1.7rem,3.4vw,2.4rem); }
.pd .price{ font-size:1.6rem; margin-top:14px; display:block; }
.spec{ margin-top:26px; border-top:1px solid var(--line); }
.spec div{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.spec dt{ color:var(--faint); font-weight:600; }
.spec dd{ color:var(--ink); font-weight:600; text-align:right; }

.opt{ margin-top:24px; }
.opt > span{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.opt-row{ display:flex; flex-wrap:wrap; gap:9px; }
.opt-row label{
  padding:10px 18px; border-radius:99px; border:1.5px solid var(--line);
  font-size:.88rem; font-weight:600; color:var(--ink); cursor:pointer;
  transition:all .25s var(--ease);
}
.opt-row input{ position:absolute; opacity:0; pointer-events:none; }
.opt-row input:checked + label{ background:var(--espresso); border-color:var(--espresso); color:#fff; }
.opt-row input:focus-visible + label{ outline:2px solid var(--crema); outline-offset:2px; }

.qty{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:99px; overflow:hidden; }
.qty button{ width:42px; height:44px; display:grid; place-items:center; color:var(--ink); font-size:1.1rem; font-weight:700; transition:background .25s; }
.qty button:hover{ background:var(--cream-2); }
.qty input{ width:46px; text-align:center; border:0; background:transparent; font-weight:700; color:var(--ink); -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.buy-row{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.buy-row .btn{ flex:1; min-width:170px; }

/* ------------------------------------------------------------------ cart */
.cart-grid{ display:grid; grid-template-columns:1.5fr .9fr; gap:clamp(24px,4vw,50px); align-items:start; }
.line{
  display:grid; grid-template-columns:92px 1fr auto; gap:18px; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.line-media{ position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:var(--cream-2); }
.line h3{ font-size:1rem; }
.line .grind{ font-size:.83rem; color:var(--faint); margin-top:3px; }
.line-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.line .price{ font-size:1.05rem; }
.rm{ font-size:.8rem; color:var(--faint); text-decoration:underline; text-underline-offset:3px; }
.rm:hover{ color:#B4453C; }
.qty--sm button{ width:34px; height:36px; font-size:1rem; }
.qty--sm input{ width:38px; font-size:.9rem; }

.summary{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,3vw,30px); position:sticky; top:96px;
}
.summary h2{ font-size:1.2rem; }
.sum-row{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; font-size:.95rem; }
.sum-row.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:16px; font-size:1.18rem; font-weight:800; color:var(--ink); }
.ship-note{ font-size:.82rem; color:var(--faint); margin-top:4px; }
.free-bar{ height:6px; border-radius:99px; background:var(--cream-2); overflow:hidden; margin:12px 0 8px; }
.free-bar span{ display:block; height:100%; background:var(--green); border-radius:99px; transition:width .5s var(--ease); }

.empty{ text-align:center; padding:60px 20px; }
.empty-mark{ width:70px; height:70px; margin:0 auto 20px; border-radius:50%; background:var(--cream-2); display:grid; place-items:center; color:var(--faint); }
.empty-mark svg{ width:30px; height:30px; }

.paid{ display:none; text-align:center; padding:56px 20px; }
.paid-mark{ width:72px; height:72px; margin:0 auto 22px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; }
.paid-mark svg{ width:32px; height:32px; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:300;
  transform:translate(-50%,120%);
  display:flex; align-items:center; gap:11px;
  padding:14px 22px; border-radius:99px;
  background:var(--espresso); color:#fff;
  font-size:.9rem; font-weight:600;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  transition:transform .5s var(--ease);
}
.toast.on{ transform:translate(-50%,0); }
.toast svg{ width:18px; height:18px; color:var(--crema); }

/* ------------------------------------------------------------------ misc */
.band{ background:var(--cream-2); }
.trust3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:28px; text-align:center; }
.trust3 .ic{ width:48px; height:48px; margin:0 auto 14px; border-radius:50%; background:var(--paper); display:grid; place-items:center; color:var(--crema); border:1px solid var(--line); }
.trust3 .ic svg{ width:22px; height:22px; }
.trust3 h3{ font-size:1.02rem; }
.trust3 p{ font-size:.9rem; margin-top:6px; }

.ftr{ background:var(--espresso); color:#B7A497; padding-block:clamp(44px,6vw,70px) 30px; }
.ftr .logo{ color:#fff; }
.ftr-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px 26px; }
.ftr h4{ color:#fff; font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; }
.ftr li{ margin-bottom:9px; font-size:.91rem; }
.ftr a:hover{ color:#fff; }
.ftr p{ margin-top:16px; font-size:.91rem; max-width:32ch; }
.ftr-bot{ margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.15); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.82rem; }

.by{
  position:fixed; right:14px; bottom:14px; z-index:280;
  display:flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:99px;
  background:rgba(43,27,20,.92); color:#fff;
  font-size:.75rem; font-weight:600;
  backdrop-filter:blur(8px);
  transition:transform .3s var(--ease);
}
.by:hover{ transform:translateY(-2px); }
.by b{ color:var(--crema); }

.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ------------------------------------------------------------------ media */
@media (max-width:940px){
  .nav{ display:none; }
  .burger{ display:grid; }
  .hero-in{ grid-template-columns:1fr; }
  .hero-art{ max-width:380px; margin-inline:auto; }
  .pd{ grid-template-columns:1fr; }
  .cart-grid{ grid-template-columns:1fr; }
  .summary{ position:static; }
  .ftr-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .line{ grid-template-columns:70px 1fr; gap:14px; }
  .line-right{ grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between; }
  .ftr-grid{ grid-template-columns:1fr; gap:28px; }
  .ftr-bot{ justify-content:center; text-align:center; }
  .buy-row .btn{ min-width:100%; }
  .by{ bottom:12px; right:12px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition-duration:.001ms !important; }
  .rv{ opacity:1; transform:none; }
}