/* V04 · Лист у коробці. Світлий льняний аркуш, вузька колонка, один шрифт. */
:root{
  --bg:#E8E1D3; --paper:#F3EDE2; --ink:#241F19; --muted:#7C7266; --line:rgba(36,31,25,.16);
  --accent:#7A5C34; --sku:#A50A26;
  --ob-bg:#F3EDE2; --ob-ink:#241F19; --ob-muted:#7C7266; --ob-line:rgba(36,31,25,.22);
  --ob-accent:#7A5C34; --ob-font:'Lora',Georgia,serif; --ob-radius:0px;
  --pad:clamp(18px,4vw,40px); --col:min(940px,100%);
}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Lora',Georgia,serif; font-weight:400; font-size:17px; line-height:1.78;
  background-image:radial-gradient(rgba(36,31,25,.035) 1px, transparent 1px);
  background-size:3px 3px; overflow-x:hidden;
}
h1,h2{margin:0; font-weight:500; letter-spacing:.004em;}
p{margin:0 0 1.15em;}

.hd{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px var(--pad); background:rgba(232,225,211,.94); border-bottom:1px solid var(--line);
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
}
.hd__m{color:var(--muted);}
.hd button{background:var(--accent); color:#F3EDE2; border:0; padding:9px 18px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;}
@media(max-width:640px){ .hd__m{display:none;} }

.sheet{
  width:var(--col); margin:0 auto; background:var(--paper); padding:clamp(28px,5vw,72px) clamp(22px,5vw,84px);
  box-shadow:0 1px 0 rgba(36,31,25,.08), 0 22px 44px rgba(36,31,25,.07);
}
.sheet--first{margin-top:clamp(24px,5vw,64px);}
.sheet--last{margin-bottom:clamp(30px,6vw,80px);}
.stamp{
  display:inline-block; border:1px solid var(--line); padding:5px 13px; font-size:10.5px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin:0 0 26px;
}
.sheet--first h1{font-size:clamp(30px,4.4vw,58px); line-height:1.14; margin-bottom:24px;}
.drop{font-size:18px; color:#3A332B; max-width:62ch;}
.drop::first-letter{
  float:left; font-size:64px; line-height:.86; padding:6px 12px 0 0; color:var(--accent); font-weight:500;
}
.sheet__pair{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,3vw,44px); align-items:center; margin-top:34px;}
.sheet__facts p{font-size:16px; color:#3A332B;}
.sheet__facts b{font-weight:500;}
@media(max-width:760px){ .sheet__pair{grid-template-columns:1fr;} }

.card-img{margin:0;}
.card-img img{width:100%; aspect-ratio:4/3; object-fit:cover; box-shadow:0 8px 18px rgba(36,31,25,.14);}
.card-img--tall img{aspect-ratio:3/4;}
.card-img figcaption,.wide figcaption{
  margin-top:9px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.wide{margin:34px 0 0;}
.wide img{width:100%; aspect-ratio:16/9; object-fit:cover; box-shadow:0 8px 18px rgba(36,31,25,.14);}

.rule{
  width:var(--col); margin:0 auto; display:flex; align-items:center; gap:16px; padding:clamp(20px,3vw,40px) clamp(22px,5vw,84px);
}
.rule::before,.rule::after{content:''; flex:1; height:1px; background:var(--line);}
.rule span{font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); white-space:nowrap;}

.sign{display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(20px,3vw,46px); align-items:center; padding:clamp(20px,3vw,40px) 0; border-bottom:1px solid var(--line);}
.sign--rev{direction:rtl;} .sign--rev > *{direction:ltr;}
.sign h2{font-size:clamp(24px,2.8vw,36px); margin-bottom:6px;}
.sign__s{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;}
.sign p:last-child{color:#3A332B; margin:0;}
@media(max-width:760px){ .sign{grid-template-columns:1fr;} .sign--rev{direction:ltr;} }

/* товар */
.buy{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,50px); align-items:center;}
.buy__vis{display:grid; place-items:center; padding:18px; background:#EDE5D8; box-shadow:inset 0 0 0 1px var(--line);}
.buy__vis img{width:min(360px,90%);}
.buy__t h2{font-size:clamp(26px,3vw,40px); margin-bottom:8px;}
.buy__price{font-size:26px; color:var(--accent); margin-bottom:16px;}
.lbl{font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin:20px 0 9px;}
.row{display:flex; gap:9px; flex-wrap:wrap;}
.mat{flex:1 1 160px; text-align:left; background:none; border:1px solid var(--line); padding:11px 14px; font-size:14px; color:var(--ink);}
.mat em{display:block; font-style:normal; font-size:12px; color:var(--muted); margin-top:2px;}
.mat.is-on{border-color:var(--accent); background:#EDE5D8;}
.mat[disabled]{opacity:.45;}
.sws{display:flex; gap:10px; flex-wrap:wrap;}
.sw{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--c); padding:0; transition:transform .2s;}
.sw:hover{transform:translateY(-2px);}
.sw.is-on{box-shadow:0 0 0 2px var(--accent);}
.buy__mean{margin-top:16px; font-size:15px; color:#3A332B; min-height:3.4em; max-width:44ch;}
.btn{margin-top:8px; padding:15px 34px; border:0; background:var(--accent); color:#F3EDE2; font-size:11px; letter-spacing:.22em; text-transform:uppercase;}
.btn:hover{filter:brightness(1.08);}
.btn--big{padding:18px 46px; font-size:12px;}
@media(max-width:760px){ .buy{grid-template-columns:1fr;} }

.tbl{width:100%; border-collapse:collapse; margin-top:34px;}
.tbl caption{text-align:left; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); padding-bottom:10px;}
.tbl td{padding:10px 0; border-top:1px solid var(--line); font-size:15px;}
.tbl td:first-child{color:var(--muted); width:44%;}
.tbl--free .tot td{border-top:1px solid var(--accent); color:var(--accent); font-size:16px;}
.tbl--free td:last-child{text-align:right;}

.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.6vw,20px); margin-top:34px;}
@media(max-width:700px){ .trio{grid-template-columns:1fr;} }

.h-mid{font-size:clamp(26px,3.4vw,44px); text-align:center; margin-bottom:14px;}
.mid{text-align:center; max-width:60ch; margin:0 auto 32px; color:#3A332B;}
.quad{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.5vw,18px);}
.quad .card-img img{aspect-ratio:3/4;}
@media(max-width:820px){ .quad{grid-template-columns:repeat(2,1fr);} }

.make{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(20px,3vw,50px); align-items:center;}
.make h2{font-size:clamp(24px,3vw,38px); margin-bottom:20px;}
.steps{margin:0; padding-left:20px;}
.steps li{padding:9px 0; font-size:16px; color:#3A332B;}
.steps b{font-weight:500; color:var(--ink);}
.thread{margin-top:18px; font-size:16px; color:#3A332B;}
.thread b{color:var(--accent); font-size:22px; font-weight:500;}
@media(max-width:760px){ .make{grid-template-columns:1fr;} }

.pal{display:grid; grid-template-columns:repeat(7,1fr); gap:clamp(6px,1vw,14px);}
.pal button{background:none; border:1px solid transparent; padding:10px 6px; text-align:center;}
.pal img{width:100%; margin-bottom:8px;}
.pal b{display:block; font-size:12.5px; font-weight:500;}
.pal em{display:block; font-style:normal; font-size:11px; color:var(--muted); line-height:1.4; margin-top:3px;}
.pal button:hover,.pal button.is-on{border-color:var(--accent); background:#EDE5D8;}
.pal__note{margin-top:22px; text-align:center; color:#3A332B; font-size:15.5px; max-width:60ch; margin-left:auto; margin-right:auto; min-height:3em;}
@media(max-width:900px){ .pal{grid-template-columns:repeat(4,1fr);} }
@media(max-width:560px){ .pal{grid-template-columns:repeat(2,1fr);} }

.card{display:grid; grid-template-columns:1fr .85fr; gap:clamp(20px,3vw,48px);}
.card__g{background:#fff; padding:10px; box-shadow:0 8px 18px rgba(36,31,25,.12);}
.card__main{width:100%; aspect-ratio:4/5; object-fit:cover; background:#fff;}
.card__th{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:7px;}
.card__th img{aspect-ratio:1/1; object-fit:cover;}
.card__s h2{font-size:clamp(20px,2.2vw,28px); line-height:1.25; margin-bottom:10px;}
.card__price{font-size:23px; color:var(--accent); margin-bottom:14px;}
.acc{border-top:1px solid var(--line);}
.acc:last-of-type{border-bottom:1px solid var(--line); margin-bottom:16px;}
.acc__h{width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:0; padding:15px 0; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink);}
.acc__h i{width:11px; height:1px; background:currentColor; position:relative;}
.acc__h i::after{content:''; position:absolute; inset:0; background:currentColor; transform:rotate(90deg); transition:transform .3s;}
.acc.is-open .acc__h i::after{transform:rotate(0);}
.acc__b{display:none; padding-bottom:16px; font-size:15px; color:#3A332B;}
.acc.is-open .acc__b{display:block;}
.acc__b p{margin:0 0 8px;} .acc__b b{font-weight:500;}
@media(max-width:760px){ .card{grid-template-columns:1fr;} }

.set{display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(20px,3vw,48px); align-items:center;}
.set__l{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 20px;}
.set__l li{border:1px solid var(--line); padding:6px 14px; font-size:13.5px;}
.award{text-align:center; background:#241F19; padding:22px 18px;}
.award img{width:min(170px,60%); margin:0 auto 12px;}
.award p{font-size:12.5px; color:#B9AFA2; line-height:1.6; margin:0;}
@media(max-width:760px){ .set{grid-template-columns:1fr;} }

.final{text-align:center; margin-top:clamp(34px,5vw,64px); padding-top:clamp(28px,4vw,50px); border-top:1px solid var(--line);}
.final h2{font-size:clamp(28px,4vw,52px); margin-bottom:12px;}
.final p{color:#3A332B; max-width:46ch; margin:0 auto 22px;}
.ft{
  width:var(--col); margin:0 auto; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:20px clamp(22px,5vw,84px) 40px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}