:root{
  --char:#17100C; --roast:#2E1F16; --roast-2:#3B291D;
  --raw:#94A06A; --raw-deep:#6E7A49;
  --bone:#E7DECB; --bone-dim:#A9A08E; --brass:#C9902F;
  --line:rgba(231,222,203,.16);
  --display:'Unbounded','Trebuchet MS',sans-serif;
  --body:'Golos Text','Segoe UI',system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit;}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px); scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{animation:none!important; transition:none!important;}}
body{margin:0; background:var(--char); color:var(--bone); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
body.lock{overflow:hidden;}
img{max-width:100%; display:block;}
button,input,select,textarea{font-family:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--char); border-bottom:1px solid var(--line);}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:16px; height:62px;}
.brand{display:flex; align-items:center; gap:12px; min-height:44px; text-decoration:none; color:var(--bone);}
.brand img{height:30px; width:auto;}
.brand span{font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.14em;}
.nav{display:flex; align-items:center; gap:22px;}
.nav a{font-size:14px; color:var(--bone-dim); text-decoration:none; padding:12px 0;}
.nav a:hover{color:var(--brass);}
.cart-btn{display:flex; align-items:center; gap:9px; background:transparent; border:1px solid var(--line); padding:8px 14px; min-height:44px; font-size:14px; cursor:pointer; border-radius:2px;}
.cart-btn:hover{border-color:var(--brass);}
.cart-count{min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--brass); color:#1B120C; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center;}
.cart-count.zero{background:var(--roast-2); color:var(--bone-dim);}

/* hero */
.hero{position:relative; display:grid; grid-template-columns:1fr 1fr; min-height:clamp(340px,52vh,480px);}
.hero-raw{background:linear-gradient(200deg,#A3AF77 0%,var(--raw-deep) 100%) center/cover;}
.hero-roast{background:linear-gradient(160deg,#4A3323 0%,#1B120C 100%) center/cover;}
.hero-in{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px; padding:40px 24px;}
.hero-in img{height:clamp(90px,13vh,130px); width:auto; filter:drop-shadow(0 6px 26px rgba(0,0,0,.55));}
.hero h1{font-family:var(--display); font-weight:300; font-size:clamp(21px,3.2vw,36px); line-height:1.3; margin:0; max-width:18ch; color:#fff; text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.5);}
.hero p{margin:0; max-width:46ch; color:rgba(255,255,255,.88); font-size:clamp(14px,1.5vw,17px); text-shadow:0 1px 14px rgba(0,0,0,.55);}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:4px;}
.btn{display:inline-block; padding:13px 26px; background:var(--brass); color:#1B120C; text-decoration:none; border:none; font-weight:600; font-size:15px; border-radius:2px; cursor:pointer; transition:background .18s ease;}
.btn:hover{background:#DEA139;}
.btn-ghost{background:rgba(23,16,12,.55); color:#fff; border:1px solid rgba(255,255,255,.35);}
.btn-ghost:hover{background:rgba(23,16,12,.8);}

/* blocks */
.block{padding:76px 0;}
.block-t{font-family:var(--display); font-weight:400; font-size:clamp(20px,2.6vw,30px); line-height:1.25; margin:0 0 10px;}
.lede{color:var(--bone-dim); max-width:62ch; margin:0 0 36px;}

/* catalog */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.card{background:var(--roast); border:1px solid var(--line); display:flex; flex-direction:column;}
.photo{position:relative; display:grid; grid-template-columns:1fr 1fr; aspect-ratio:16/9; overflow:hidden;}
.ph{background-size:cover; background-position:center; position:relative;}
.ph-raw{background:linear-gradient(200deg,#8C9862,#5E693D);}
.ph-roast{background:linear-gradient(160deg,#3E2A1D,#160E09);}
.ph span{position:absolute; left:12px; bottom:10px; font-size:11.5px; color:#fff; background:rgba(0,0,0,.62); padding:3px 8px; z-index:1; border-radius:2px;}
.card-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:14px; flex:1;}
.card h3{font-family:var(--display); font-weight:400; font-size:19px; margin:0;}
.spec{font-size:13px; color:var(--brass); margin:-8px 0 0;}
.desc{font-size:14.5px; color:var(--bone-dim); margin:0; line-height:1.62; max-width:60ch;}
.row-label{font-size:12.5px; color:var(--bone-dim); margin:0 0 7px;}
.seg{display:flex; flex-wrap:wrap; gap:7px;}
.opt{background:transparent; border:1px solid var(--line); padding:8px 14px; min-height:44px; min-width:52px; font-size:14px; cursor:pointer; border-radius:2px; transition:border-color .16s, background .16s, color .16s;}
.opt:disabled{color:#958C7A; border-style:dashed; cursor:not-allowed; text-decoration:line-through;}
.opt:disabled:hover{border-color:var(--line);}
.opt:not(:disabled):hover{border-color:var(--bone-dim);}
.opt[aria-pressed="true"]{background:var(--brass); border-color:var(--brass); color:#1B120C; font-weight:500;}
.buy{margin-top:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--line);}
.price{font-family:var(--display); font-size:22px; color:var(--brass); margin-right:auto;}
.qty{display:flex; align-items:center; border:1px solid var(--line); border-radius:2px;}
.qty button{background:transparent; border:none; width:44px; height:44px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.qty button:hover{color:var(--brass);}
.qty output{min-width:26px; text-align:center; font-size:15px;}
.add{padding:11px 18px; font-size:14.5px;}

/* delivery */
.delivery{background:var(--roast); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.carriers{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.carrier{background:var(--roast); padding:26px 24px;}
.carrier h3{font-family:var(--display); font-weight:400; font-size:17px; margin:0 0 10px;}
.carrier ul{margin:0; padding:0 0 0 18px; color:var(--bone-dim); font-size:14.5px;}
.carrier li{margin-bottom:6px;}
.note{margin:22px 0 0; font-size:14px; color:var(--bone-dim); max-width:70ch;}


/* drawer */
.veil{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:80; opacity:0; pointer-events:none; transition:opacity .2s ease;}
.veil.on{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); z-index:90; background:var(--char); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);}
.drawer.on{transform:none;}
.dr-head{display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--line);}
.dr-head h2{font-family:var(--display); font-weight:400; font-size:17px; margin:0;}
.x{background:transparent; border:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--bone-dim); margin-right:-10px;}
.x:hover{color:var(--brass);}
.dr-body{flex:1; overflow-y:auto; padding:18px 22px 26px;}
.empty{color:var(--bone-dim); font-size:15px; padding:30px 0; text-align:center;}
.line{display:grid; grid-template-columns:10px 1fr auto; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); align-items:center;}
.line-dot{width:10px; height:10px; border-radius:50%; align-self:start; margin-top:7px;}
.line-name{font-size:15px;}
.line-meta{font-size:12.5px; color:var(--bone-dim);}
.line-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.line-right .qty button{width:44px; height:44px;}
.line-sum{font-size:14.5px;}
.rm{background:none; border:none; font-size:12px; color:var(--bone-dim); cursor:pointer; text-decoration:underline; padding:12px 12px 12px 0; margin:-8px 0;}
.sec{margin-top:26px;}
.sec h3{font-family:var(--display); font-weight:400; font-size:15px; margin:0 0 12px;}
.f{margin-bottom:12px;}
.f label{display:block; font-size:12.5px; color:var(--bone-dim); margin-bottom:5px;}
.f input,.f select,.f textarea{width:100%; background:var(--roast); border:1px solid var(--line); padding:10px 12px; min-height:44px; font-size:16px; border-radius:2px;}
.f input::placeholder,.f textarea::placeholder{color:#9A917F;}
.two{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.sugg{list-style:none; margin:4px 0 0; padding:0; border:1px solid var(--line); background:var(--roast);}
.sugg li button{width:100%; text-align:left; background:none; border:none; padding:9px 12px; font-size:14px; cursor:pointer;}
.sugg li button:hover{background:var(--roast-2);}
.sugg:empty{display:none;}
.methods{display:flex; flex-direction:column; gap:8px;}
.method{display:flex; justify-content:space-between; gap:12px; align-items:center; text-align:left; width:100%;
  background:var(--roast); border:1px solid var(--line); padding:12px 14px; border-radius:2px; cursor:pointer;}
.method:hover{border-color:var(--bone-dim);}
.method[aria-pressed="true"]{border-color:var(--brass); background:var(--roast-2);}
.method b{font-weight:500; font-size:14.5px; display:block;}
.method small{font-size:12.5px; color:var(--bone-dim);}
.method .q{text-align:right; font-size:14px; white-space:nowrap;}
.method:disabled{opacity:.45; cursor:not-allowed;}
.hint{font-size:13px; color:var(--bone-dim); margin:0;}
.points{list-style:none; margin:0; padding:0; max-height:220px; overflow-y:auto; border:1px solid var(--line);}
.points li button{width:100%; text-align:left; background:var(--roast); border:none; border-bottom:1px solid var(--line); padding:10px 12px; cursor:pointer; font-size:13.5px;}
.points li:last-child button{border-bottom:none;}
.points li button[aria-pressed="true"]{background:var(--roast-2);}
.points li small{display:block; color:var(--bone-dim); font-size:12px;}
.dr-foot{border-top:1px solid var(--line); padding:16px 22px 18px; background:var(--char);}
.tr{display:flex; justify-content:space-between; font-size:14px; padding:3px 0; color:var(--bone-dim);}
.tr.total{color:var(--bone); font-size:15px; margin-top:6px; padding-top:10px; border-top:1px solid var(--brass);}
.tr.total strong{font-family:var(--display); font-weight:400; font-size:21px; color:var(--brass);}
.pay{width:100%; margin-top:12px;}
.pay:disabled{background:#4A4237; color:#8A8271; cursor:not-allowed;}
.msg{margin-top:10px; font-size:13.5px; padding:11px 13px; border:1px solid var(--raw); background:rgba(148,160,106,.1); display:none;}
.msg.on{display:block;}
.msg.err{border-color:var(--brass); background:rgba(201,144,47,.1);}

.toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 22px); transform:translate(-50%,20px); opacity:0;
  background:var(--bone); color:#1B120C; padding:11px 18px; font-size:14px; border-radius:2px; z-index:100; transition:opacity .2s, transform .2s; pointer-events:none;}
.toast.on{opacity:1; transform:translate(-50%,0);}


/* footer */
.foot{border-top:1px solid var(--line); padding:40px 0 30px; color:var(--bone-dim); font-size:13.5px;}
.foot a{color:var(--bone-dim);}
.foot a:hover{color:var(--brass);}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px;}
.foot-grid p{margin:0;}
.foot-logo{height:34px; opacity:.55; margin-bottom:12px;}
.foot-links{list-style:none; margin:0; padding:0;}
.foot-links li{margin:0;}
.foot-links a{display:inline-block; padding:6px 0;}
@media (max-width:860px){.foot-links a{padding:11px 0;}}
.pay-logos{margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px;}

/* checkout additions */
.f select{appearance:auto;}
.agree{display:flex; gap:12px; align-items:flex-start; min-height:44px; cursor:pointer; font-size:12.5px; color:var(--bone-dim); margin-top:12px; line-height:1.5;}
.agree input{margin-top:2px; width:20px; height:20px; accent-color:var(--brass); flex:0 0 auto;}
.agree a{color:var(--bone);}
.grind-row select{width:100%; min-height:44px; background:var(--char); border:1px solid var(--line); padding:9px 10px; font-size:16px; border-radius:2px;}
.grind-row label{display:block;}

/* text pages */
.doc{padding:56px 0 70px;}
.doc .wrap{max-width:820px;}
.doc h1{font-family:var(--display); font-weight:400; font-size:clamp(22px,3vw,32px); line-height:1.25; margin:0 0 8px;}
.doc h2{font-family:var(--display); font-weight:400; font-size:18px; margin:34px 0 10px;}
.doc p,.doc li{color:var(--bone); font-size:15.5px; max-width:70ch;}
.doc ul,.doc ol{padding-left:22px;}
.doc .muted{color:var(--bone-dim); font-size:14px;}
.doc a{color:var(--brass);}
.doc table{border-collapse:collapse; width:100%; font-size:15px; margin:10px 0;}
.doc td{border-bottom:1px solid var(--line); padding:9px 10px 9px 0; vertical-align:top;}
.doc td:first-child{color:var(--bone-dim); width:38%;}
.status{padding:22px; border:1px solid var(--line); background:var(--roast); margin:22px 0;}
.status.ok{border-color:var(--raw);}
.status.bad{border-color:var(--brass);}

@media (max-width:860px){ .grid{grid-template-columns:1fr;} .carriers{grid-template-columns:1fr;} .foot-grid{grid-template-columns:1fr;} }
@media (max-width:600px){
  .wrap{padding:0 18px;} .block{padding:56px 0;}
  .nav a{display:none;}
  .photo{aspect-ratio:4/3;}
  .two{grid-template-columns:1fr;}
}

/* мелочи браузера в цвет дизайна */
::selection{background:var(--brass); color:#1B120C;}
input,textarea{caret-color:var(--brass);}
html{scrollbar-color:var(--roast-2) var(--char);}
.price,.line-sum,.tr,.doc td,.cart-count,.qty output{font-variant-numeric:tabular-nums;}
a{text-underline-offset:3px; text-decoration-thickness:1px;}
.note a{color:var(--brass);}
.ic{display:block;}

/* честная заглушка фото: россыпь зёрен в цвете бленда (до съёмки) */
.ph::before{content:''; position:absolute; inset:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='rotate(-28 18 20)'%3E%3Cpath d='M17 7C8 9 8 31 17 33C14 26 14 14 17 7Z'/%3E%3Cpath d='M19 7C28 9 28 31 19 33C22 26 22 14 19 7Z'/%3E%3C/g%3E%3Cg transform='rotate(35 46 44)'%3E%3Cpath d='M45 31C36 33 36 55 45 57C42 50 42 38 45 31Z'/%3E%3Cpath d='M47 31C56 33 56 55 47 57C50 50 50 38 47 31Z'/%3E%3C/g%3E%3C/svg%3E") 0 0/58px 58px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='rotate(-28 18 20)'%3E%3Cpath d='M17 7C8 9 8 31 17 33C14 26 14 14 17 7Z'/%3E%3Cpath d='M19 7C28 9 28 31 19 33C22 26 22 14 19 7Z'/%3E%3C/g%3E%3Cg transform='rotate(35 46 44)'%3E%3Cpath d='M45 31C36 33 36 55 45 57C42 50 42 38 45 31Z'/%3E%3Cpath d='M47 31C56 33 56 55 47 57C50 50 50 38 47 31Z'/%3E%3C/g%3E%3C/svg%3E") 0 0/58px 58px;}
.ph-raw::before{background:#B4BF86; opacity:.55;}
.ph-roast::before{background:var(--c-soft,#6A4630); opacity:.9;}

/* сведения о товаре */
.facts{border-top:1px solid var(--line); padding-top:4px;}
.facts summary{cursor:pointer; font-size:14px; color:var(--bone); min-height:44px; display:flex; align-items:center;}
.facts summary:hover{color:var(--brass);}
.facts dl{margin:4px 0 6px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13.5px;}
.facts dt{color:var(--bone-dim);}
.facts dd{margin:0;}
.var-note{font-size:12.5px; color:var(--bone-dim); margin:8px 0 0;}
.ship{font-size:13px; color:var(--bone-dim); margin:0;}
.doc td a{display:inline-block; padding:10px 0;}