:root{
  /* Warm cream ground rather than white: every pack shot is photographed on
     white, and on a white page they lose their edges. */
  --paper:#FBF7F0;
  --paper-2:#F4EDE1;
  --plate:#EFE6D8;
  --line:#E4D9C7;
  --line-2:#D2C3AC;

  /* Warm near-black. Deliberately brown-black rather than blue-black: a cold
     navy belongs to another site in this portfolio and would read as the same
     hand. */
  --ink:#241B16;
  --ink-2:#5B4C43;
  --ink-3:#8B7A6E;
  --on-dark:#FBF7F0;
  --on-dark-2:#C6B5A4;

  /* Flame sits inside the catalogue's own dominant hue band. */
  --flame:#E2452B;
  --flame-ink:#B8331D;
  --gold:#E9A62B;
  --gold-deep:#C9861A;
  --teal:#1E8C93;
  --teal-pale:#E2F0F0;
  --plum:#7A3E6B;
  --amber-pale:#FCF0DA;

  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:26px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(36,27,22,.06), 0 3px 10px rgba(36,27,22,.05);
  --sh-2:0 4px 12px rgba(36,27,22,.08), 0 18px 40px rgba(36,27,22,.10);
  --ring:0 0 0 3px rgba(226,69,43,.34);
  --ease:cubic-bezier(.2,.7,.3,1);
  --wrap:1280px;
  --gut:clamp(16px,4vw,36px);

  /* The motif. A scatter of dots at two scales, because the goods themselves
     are small round repeated things. Used as a section ground, never over
     text. */
  --dots:radial-gradient(circle at 12% 22%, rgba(226,69,43,.10) 0 5px, transparent 6px),
         radial-gradient(circle at 78% 12%, rgba(233,166,43,.14) 0 7px, transparent 8px),
         radial-gradient(circle at 34% 78%, rgba(30,140,147,.10) 0 4px, transparent 5px),
         radial-gradient(circle at 62% 58%, rgba(122,62,107,.09) 0 6px, transparent 7px),
         radial-gradient(circle at 90% 84%, rgba(226,69,43,.08) 0 5px, transparent 6px);
}

@font-face{font-family:"Fraunces";src:url("/assets/fraunces-latin.7e744849.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"PlexSans";src:url("/assets/plexsans-latin.e2291e84.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"PlexSans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--flame-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}
[hidden]{display:none!important}

/* Display face. The optical-size and soft axes are pushed warm on purpose:
   Fraunces at default settings is a magazine serif, and this brand is a party
   aisle. */
h1,h2,h3,.display{
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-variation-settings:"opsz" 96,"SOFT" 40,"WONK" 1;
  font-weight:700;line-height:1.06;letter-spacing:-.015em;margin:0 0 .5em;color:var(--ink);
}
h1{font-size:clamp(2.3rem,1.35rem + 3.7vw,4rem)}
h2{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.7rem)}
h3{font-size:clamp(1.12rem,1rem + .6vw,1.4rem);font-variation-settings:"opsz" 40,"SOFT" 30,"WONK" 0}
h4{font-size:1rem;font-weight:700;margin:0 0 .5em;font-family:"PlexSans",sans-serif}
p{margin:0 0 1em}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
li{margin:.28em 0}
strong{font-weight:700}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.lede{font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);color:var(--ink-2);max-width:62ch}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--flame);margin:0 0 .8em;display:flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--gold);flex:0 0 auto}
.tiny{font-size:.8rem;color:var(--ink-3)}
.muted{color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ header */
.um-topbar{background:var(--ink);color:var(--on-dark-2);font-size:.78rem}
.um-topbar .wrap{display:flex;gap:18px;justify-content:center;align-items:center;min-height:38px;flex-wrap:wrap;text-align:center}
.um-topbar b{color:var(--gold);font-weight:700}
.um-head{position:sticky;top:0;z-index:40;background:rgba(251,247,240,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.um-head .wrap{display:flex;align-items:center;gap:20px;min-height:74px}
.wordmark{font-family:"Fraunces",serif;font-variation-settings:"opsz" 96,"SOFT" 50,"WONK" 1;font-weight:800;font-size:1.5rem;letter-spacing:.02em;color:var(--ink);line-height:1}
.wordmark:hover{text-decoration:none;color:var(--flame)}
.wordmark small{display:block;font-family:"PlexSans",sans-serif;font-size:.57rem;letter-spacing:.2em;color:var(--ink-3);font-weight:600;margin-top:5px;text-transform:uppercase}
.um-nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.um-nav a,.um-nav button{font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);background:none;border:0;padding:9px 13px;border-radius:var(--r-pill);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.um-nav a:hover,.um-nav button:hover{background:var(--paper-2);text-decoration:none;color:var(--flame-ink)}
.um-nav a[aria-current="page"]{background:var(--plate)}
.um-panel{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--sh-2)}
.um-panel .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 22px;padding-block:24px}
.um-panel a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:9px 12px;border-radius:var(--r-sm);color:var(--ink);font-weight:600;font-size:.92rem;border-left:3px solid transparent}
.um-panel a:hover{background:var(--paper-2);text-decoration:none;border-left-color:var(--c,var(--flame))}
.um-panel .n{color:var(--ink-3);font-size:.8rem;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------------- hero
   A mosaic, not a hero shot. The brand's claim is abundance, so the picture is
   many products at once. Each tile is drawn far smaller than its source file,
   which is also the only honest way to fill the width: the largest photograph
   available is 1500px and a full-bleed band would have to stretch it (§4.2). */
.um-hero{position:relative;background:var(--ink);overflow:hidden;isolation:isolate}
.hero-mosaic{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:1fr;gap:2px;opacity:.5}
.hero-mosaic img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.15)}
.um-hero::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(105deg, rgba(36,27,22,.97) 0%, rgba(36,27,22,.92) 42%, rgba(36,27,22,.62) 72%, rgba(36,27,22,.5) 100%)}
.um-hero .wrap{position:relative;z-index:2;padding-block:clamp(46px,6.5vw,92px)}
.hero-grid{display:grid;gap:clamp(24px,3vw,48px);grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end}
.um-hero h1{color:var(--on-dark);max-width:15ch}
.um-hero .lede{color:var(--on-dark-2);max-width:52ch}
.um-hero .eyebrow{color:var(--gold)}
.um-hero .eyebrow::before{background:var(--flame)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* The count, as the brand's own voice. Circular because the goods are round. */
.hero-stats{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
/* Figures lifted out of a paragraph and set as a list. Not decoration: a block
   of 279 words with nothing but paragraphs in it is what the owner means by a
   wall of text, and the four numbers here were already in the prose. */
/* Полоса цифр, сравнение и FAQ (задача 18.08). Аккордеон: семь развёрнутых
   ответов — стена текста, свёрнутые читаются как оглавление вопросов. */
.trustbar{background:var(--paper,#fbf7f1);border-block:1px solid var(--line)}
.trustbar .wrap{display:flex;flex-wrap:wrap;gap:24px 44px;justify-content:center;padding-block:18px}
.trustbar .num{display:block;font-size:24px;line-height:1.1}
.trustbar span{font-size:13.5px;color:var(--ink-2)}
.faq{display:grid;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:var(--r,10px);background:var(--panel,#fff)}
.faq-item summary{cursor:pointer;padding:14px 18px;list-style:none;display:flex;align-items:center;gap:10px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";margin-left:auto;font-weight:700;color:var(--ink-2)}
.faq-item[open] summary::after{content:"–"}
.faq-item summary h3{font-size:16.5px;margin:0}
.faq-a{padding:0 18px 16px}
.faq-a p{margin:0;font-size:15px;line-height:1.65}
.rt-scroll{overflow-x:auto;margin:18px 0}
.rt-scroll .rt{margin:0}
.facts-list{list-style:none;margin:14px 0 22px;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.facts-list li{margin:0;padding:11px 14px;background:rgba(36,27,22,.045);
  border-left:3px solid var(--gold);font-variant-numeric:tabular-nums}
.stat{width:clamp(112px,13vw,152px);aspect-ratio:1/1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;background:rgba(251,247,240,.07);border:2px solid rgba(233,166,43,.5);backdrop-filter:blur(3px)}
.stat:nth-child(2){background:var(--gold);border-color:var(--gold)}
.stat b{font-family:"Fraunces",serif;font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1;font-size:calc(clamp(1.6rem,3.2vw,2.5rem) * var(--fs,1));font-weight:800;line-height:1.04;font-variant-numeric:tabular-nums;color:var(--gold);display:block}
.stat:nth-child(2) b{color:var(--ink)}
.stat span{font-size:.68rem;line-height:1.25;color:var(--on-dark-2);display:block;margin-top:6px;padding-inline:6px}
.stat:nth-child(2) span{color:rgba(36,27,22,.78)}

/* ----------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--r-pill);border:2px solid transparent;font:inherit;font-size:.92rem;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease)}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
/* Надпись кнопки — картинка (правило владельца 2026-08-12), высота задаётся
   ДОЛЕЙ от кегля кнопки, а не самим кеглем: кадр обрезан по чернилам
   (_tools/render-buy-labels.js), доля = высота чернил / кегль отрисовки.
   При height:.92rem буквы выходили на треть мельче прежнего текста, и на
   .btn-sm (.83rem) надпись вдобавок не уменьшалась — rem не слышит кнопку. */
.btn .buy-label{height:calc(1em * .9171);width:auto;display:block;max-width:none}
.btn-primary{background:var(--flame);color:#fff;box-shadow:0 3px 0 var(--flame-ink)}
.btn-primary:hover{background:var(--flame-ink);color:#fff;box-shadow:0 5px 0 #8E2716}
.btn-dark{background:var(--ink);color:var(--on-dark)}
.btn-dark:hover{background:#3A2C24;color:var(--on-dark)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--paper-2);color:var(--ink)}
.btn-sm{padding:9px 15px;font-size:.83rem;border-width:2px}
.on-dark .btn-ghost,.um-hero .btn-ghost{color:var(--on-dark);border-color:rgba(251,247,240,.42)}
.on-dark .btn-ghost:hover,.um-hero .btn-ghost:hover{background:rgba(251,247,240,.12);color:var(--on-dark)}

/* ---------------------------------------------------------------- sections */
.sec{padding-block:clamp(42px,5.5vw,80px)}
.sec-band{background:var(--paper-2)}
.sec-dots{background-image:var(--dots);background-repeat:no-repeat;background-size:cover}
.sec-dark{background:var(--ink);color:var(--on-dark-2)}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:var(--on-dark)}
.sec-dark a{color:var(--gold)}
.sec-dark .lede{color:var(--on-dark-2)}
.sec-dark .eyebrow{color:var(--gold)}
.sec-head{margin-bottom:8px;max-width:70ch}
.sec-head h2{margin-bottom:.32em}

/* ------------------------------------------------------------------- cards */
.grid{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
/* Полка: колонки ЖЁСТКО 4/2/1, потому что четыре заполняет ряд нацело на всех
   трёх. auto-fill даёт плавающее число колонок и сирот в последнем ряду. */
.grid.shelf-grid{display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid.shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid.shelf-grid{grid-template-columns:minmax(0,1fr)}}
.card{container-type:inline-size;display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
/* The plate. Almost every product is white or clear plastic photographed on
   white, and without a tinted ground behind it half the grid had no visible
   edge at all. The colour sits on the PARENT, never on the img. */
.card-media{position:relative;display:block;background:var(--plate);aspect-ratio:1/1;overflow:hidden}
.card-media img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
/* The count badge: a gold disc, the loudest thing on the card, because it is
   the fact the buyer is shopping for. */
.pack{position:absolute;left:11px;top:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;height:52px;padding:0 7px;border-radius:var(--r-pill);background:var(--gold);color:var(--ink);font-family:"Fraunces",serif;font-variation-settings:"opsz" 40,"SOFT" 40,"WONK" 1;font-weight:800;font-size:1rem;line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums;box-shadow:0 2px 0 var(--gold-deep)}
.pack small{display:block;font-family:"PlexSans",sans-serif;font-size:.52rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.72;margin-top:1px}
.card-body{display:flex;flex-direction:column;gap:6px;padding:15px 16px 17px;min-width:0;flex:1}
.card-dept{font-size:.65rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--c,var(--flame));display:flex;align-items:center;gap:6px}
.card-dept::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.card-name{font-family:"Fraunces",serif;font-variation-settings:"opsz" 30,"SOFT" 20,"WONK" 0;font-size:1rem;font-weight:600;line-height:1.28;margin:0;min-width:0}
.card-name a{color:var(--ink)}
.card-name a:hover{color:var(--flame-ink)}
.card-spec{font-size:.78rem;color:var(--ink-2)}
.card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:auto;padding-top:12px}
.price{font-family:"Fraunces",serif;font-variation-settings:"opsz" 40,"SOFT" 30,"WONK" 0;font-size:1.22rem;font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap;color:var(--ink)}
.price-unit{font-family:"PlexSans",sans-serif;font-size:.72rem;color:var(--ink-3);font-weight:600}
.price-none{font-size:.8rem;font-weight:700;color:var(--ink-3);flex:0 0 auto}
.card-foot .btn{margin-left:auto;flex:0 0 auto;white-space:nowrap}
/* Below this the price and the button stop sharing a line rather than
   squeezing into one. The card decides, not the viewport: a grid of four at
   1550 and a grid of three at 800 give similar viewport widths and very
   different card widths. */
@container (max-width:240px){
  .card-foot{flex-direction:column;align-items:stretch;gap:10px}
  .card-foot .btn{margin-left:0;width:100%}
}

/* ------------------------------------------------------------ ratings ---- */
.um-rating{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}
/* The partial star is a clipped overlay, not a glyph: the half-star character
   is missing from the fonts here and renders as an empty box. Both rows carry
   identical text so they align exactly, and the top one is clipped to the
   rating. letter-spacing must match on both or the clip lands mid-gap. */
.um-rating-stars{position:relative;display:inline-block;font-size:.92rem;line-height:1;white-space:nowrap}
.um-stars-off,.um-stars-on{letter-spacing:.04em;font-family:"PlexSans",sans-serif}
.um-stars-off{color:var(--line-2)}
.um-stars-on{position:absolute;left:0;top:0;overflow:hidden;color:var(--gold-deep)}
.um-rating-v{font-family:"Fraunces",serif;font-weight:700;font-size:.86rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.um-rating-n{font-size:.74rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.um-rating-n::before{content:"("}
.um-rating-n::after{content:")"}
.um-rating.is-small .um-rating-stars{font-size:.82rem}
.pdp-info .um-rating{margin:-2px 0 4px}
.pdp-info .um-rating-stars{font-size:1.1rem}
.pdp-info .um-rating-v{font-size:1rem}

/* ------------------------------------------------------------- department tiles
   Colour chips, not thumbnails. Fourteen departments is the biggest structural
   fact about this range, and colour is how a person keeps track of fourteen of
   anything. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.tile{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--paper);box-shadow:var(--sh-1);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.tile a{display:block;color:inherit}
.tile a:hover{text-decoration:none}
.tile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--plate);mix-blend-mode:multiply}
.tile-body{padding:13px 14px 15px;border-top:4px solid var(--c,var(--flame))}
.tile-name{display:block;font-family:"Fraunces",serif;font-variation-settings:"opsz" 30,"SOFT" 20,"WONK" 0;font-weight:700;font-size:1rem;color:var(--ink);line-height:1.2}
.tile-n{display:block;font-size:.74rem;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------- gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.gallery figure{margin:0}
.gallery a{display:block;border-radius:var(--r-md);overflow:hidden;background:var(--plate);box-shadow:var(--sh-1);transition:transform .18s var(--ease)}
.gallery a:hover{transform:translateY(-3px);text-decoration:none}
.gallery img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;mix-blend-mode:multiply}
.gallery figcaption{padding:9px 11px 11px;font-size:.76rem;color:var(--ink-2);line-height:1.35;background:var(--paper)}

/* -------------------------------------------------------------------- tool */
.tool{background:var(--paper);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,28px);box-shadow:var(--sh-1);border:2px solid var(--line)}
.tool-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.field input,.field select{width:100%;font:inherit;padding:12px 14px;border-radius:var(--r-sm);border:2px solid var(--line-2);background:var(--paper);color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--flame);box-shadow:var(--ring)}
.tool-out{margin-top:18px;font-size:.95rem}
.tool-out table{margin-top:8px}

/* ----------------------------------------------------------------- reviews */
.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:24px}
.review{background:var(--paper);border-radius:var(--r-md);padding:17px 18px;display:flex;flex-direction:column;gap:8px;min-width:0;box-shadow:var(--sh-1);border-top:4px solid var(--gold)}
.review-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.review-badge{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:var(--teal-pale);padding:3px 8px;border-radius:var(--r-pill)}
.review-title{font-family:"Fraunces",serif;font-variation-settings:"opsz" 30,"SOFT" 20,"WONK" 0;font-size:1rem;font-weight:700;margin:0;line-height:1.28;min-width:0;overflow-wrap:anywhere}
.review-quote{margin:0;padding:0;border:0}
.review-quote p{margin:0;font-size:.88rem;line-height:1.58;color:var(--ink-2);overflow-wrap:anywhere}
.review-meta{margin:auto 0 0;font-size:.73rem;color:var(--ink-3);overflow-wrap:anywhere}
.review-on{margin:0;font-size:.76rem}

/* --------------------------------------------------------------- product page */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3.4vw,52px);align-items:start}
.pdp-photo{background:var(--plate);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1)}
.pdp-photo img{display:block;width:100%;mix-blend-mode:multiply}
.filmstrip{display:grid;gap:8px;margin-top:12px}
.filmstrip button{padding:0;border:2px solid transparent;background:var(--plate);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;line-height:0}
.filmstrip button[aria-current="true"]{border-color:var(--flame)}
.filmstrip img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;mix-blend-mode:multiply}
.pdp-info h1{margin-bottom:.24em}
.pdp-price{font-family:"Fraunces",serif;font-variation-settings:"opsz" 96,"SOFT" 30,"WONK" 0;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);font-weight:800;font-variant-numeric:tabular-nums;margin:0 0 .1em;color:var(--ink)}
.pdp-buy{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.badges{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:20px 0 0}
.badge{font-size:.74rem;font-weight:700;padding:6px 12px;border-radius:var(--r-pill);background:var(--amber-pale);color:var(--gold-deep)}
.pdp-sec{margin-top:34px}
.pdp-sec h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}

/* ------------------------------------------------------------------ tables */
.table-wrap{overflow-x:auto;border-radius:var(--r-md);background:var(--paper);box-shadow:var(--sh-1)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
thead th{text-align:left;font-family:"PlexSans",sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2);background:var(--ink);padding:12px 14px}
tbody td{padding:11px 14px;border-top:1px solid var(--line)}
tbody tr:nth-child(even){background:var(--paper-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.table-note{font-size:.78rem;color:var(--ink-3);margin-top:10px}
.row-note td{color:var(--ink-3);font-style:italic}
/* On a phone each row becomes a small card of label/value pairs: fourteen rows
   of five columns cannot hold a grid at 390px. The label travels with the cell
   as data-label (table.js), so the head row is dropped entirely. */
@media (max-width:760px){
  .rt thead{display:none}
  .rt,.rt tbody,.rt tr{display:block;width:100%}
  .rt caption{display:block;padding:10px 14px}
  .rt colgroup{display:none}
  .rt tr{padding:10px 14px;border-top:1px solid var(--line)}
  .rt th[scope=row],.rt td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:4px 0;border:0;text-align:right}
  .rt td::before,.rt th[scope=row]::before{content:attr(data-label);font-weight:400;font-style:normal;color:var(--ink-3);text-align:left;flex:0 1 auto}
}

/* -------------------------------------------------------------------- misc */
.prose{max-width:72ch}
.prose h2{margin-top:1.5em}
.prose figure{margin:1.6em 0}
.prose figcaption{font-size:.8rem;color:var(--ink-3);margin-top:8px}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:22px}
.panel{background:var(--paper);border-radius:var(--r-md);padding:18px 19px;box-shadow:var(--sh-1);border-left:5px solid var(--flame)}
.panel h3{font-size:1.05rem;margin-bottom:.35em}
.panel p{margin:0;font-size:.9rem;color:var(--ink-2)}
.panel-teal{border-left-color:var(--teal)}
.panel-amber{border-left-color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:16px 0 0}
.chip{font-size:.78rem;font-weight:600;padding:6px 13px;border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--sh-1);color:var(--ink-2)}
.count{font-family:"Fraunces",serif;font-weight:800;font-variant-numeric:tabular-nums}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,3vw,40px)}
.facts{list-style:none;padding:0;margin:14px 0 0}
.facts li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:9px 0;border-top:1px solid var(--line);font-size:.9rem}
.facts .k{color:var(--ink-2);flex:0 1 auto}
.facts .v{font-weight:700;text-align:right;overflow-wrap:anywhere}
.filterbar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:22px}
.crumbs{margin-bottom:18px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;font-size:.79rem;color:var(--ink-3)}
.crumbs li::after{content:"/";margin-left:7px;color:var(--line-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-2)}
.toc{background:var(--paper-2);border-radius:var(--r-md);padding:16px 18px;margin:22px 0}
.toc h2{font-size:1rem;margin-bottom:.4em}
.toc ol{margin:0;font-size:.88rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:var(--on-dark);padding:10px 16px;border-radius:var(--r-sm)}
.awaiting{background:var(--paper-2);border-radius:var(--r-md);padding:20px}
.awaiting h3{margin-bottom:.3em}
.awaiting p{margin:0;color:var(--ink-2);font-size:.9rem}
dialog{border:0;padding:0;background:transparent;max-width:min(94vw,1200px)}
dialog::backdrop{background:rgba(36,27,22,.86)}
dialog figure{margin:0;background:var(--paper);border-radius:var(--r-md);overflow:hidden}
dialog img{display:block;margin-inline:auto}
dialog figcaption{padding:12px 16px;font-size:.85rem;color:var(--ink-2)}

/* ------------------------------------------------------------------ footer */
.um-foot{background:var(--ink);color:var(--on-dark-2);padding-block:clamp(38px,4.6vw,62px) 0;margin-top:0}
.um-foot a{color:var(--on-dark-2)}
.um-foot a:hover{color:var(--gold)}
.um-foot h3{color:var(--on-dark);font-size:.78rem;font-family:"PlexSans",sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1em}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:30px}
.foot-brand .wordmark{color:var(--on-dark)}
.foot-brand .wordmark small{color:var(--on-dark-2)}
.foot-brand p{font-size:.86rem;margin-top:14px;max-width:44ch}
.foot-list{list-style:none;padding:0;margin:0;font-size:.87rem}
.foot-list li{margin:.42em 0}
.foot-cols{columns:2;column-gap:22px}
.foot-cols li{break-inside:avoid}
/* The middle band of the reference: socials, payment marks, store buttons on
   one rule-topped row. The payment plates are plain images with the method in
   the alt, the socials come back to this site, the store buttons go to the
   stores' owners: none of it claims a payment happens here, and the line right
   below says where it does happen. */
.foot-mid{margin-top:34px;padding-top:26px;border-top:1px solid rgba(251,247,240,.14);display:flex;flex-wrap:wrap;gap:24px 38px;align-items:center;justify-content:space-between}
.soc{display:flex;gap:10px}
.soc a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(251,247,240,.1);color:var(--on-dark-2);transition:background .18s var(--ease),color .18s var(--ease)}
.soc a:hover{background:rgba(251,247,240,.2);color:var(--gold);text-decoration:none}
.soc svg{width:20px;height:20px;display:block}
.foot-label{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);margin:0 0 9px}
.pay-marks{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.pay-chip{display:flex;align-items:center;justify-content:center;height:34px;padding:0 12px;background:#fff;border-radius:5px}
.pay-chip img{display:block}
.store-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.store-btns a{display:block;line-height:0;border-radius:7px;transition:transform .16s var(--ease)}
.store-btns a:hover{transform:translateY(-2px)}
.store-btns img{display:block}
.foot-bot{margin-top:30px;padding:22px 0 26px;border-top:1px solid rgba(251,247,240,.14);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:.8rem}
.foot-bot .legal{display:flex;flex-wrap:wrap;gap:12px 16px}
.disclosure{color:var(--on-dark-2);max-width:62ch}

/* --------------------------------------------------------------- responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-stats{justify-content:flex-start}
  .pdp{grid-template-columns:1fr}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-mosaic{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:720px){
  /* Sticky was eating a third of a phone screen once the nav wrapped to three
     rows. Relative, not static: the department panel is positioned against
     this box and static would drop it to the bottom of the page. */
  .um-head{position:relative}
  .um-head .wrap{flex-wrap:wrap;gap:2px 10px;min-height:0;padding-block:10px}
  .um-nav{margin-left:0;width:100%;gap:0}
  .um-nav a,.um-nav button{padding:7px 10px;font-size:.85rem}
}
@media (max-width:560px){
  .foot-top{grid-template-columns:1fr}
  .stat{width:96px}
  .hero-mosaic{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .btn:hover,.card:hover,.tile:hover,.gallery a:hover{transform:none}
}

/* ---- brand story block (волна брендового SEO, 2026-08-13) --------------
   Композиция, а не простыня: ряды чередуют текст и фотографию, сторона
   задаётся ПОРЯДКОМ В РАЗМЕТКЕ (класс .rev только помечает ряд — реверс
   через flex-direction отменял бы порядок и ставил все фото на одну
   сторону, поймано на bbto 13.08).
   Колонка фото ограничена 340px: карточный тир ровно такой, и просить
   больше значило бы растянуть кадр выше исходника (§4.2).
   min-width:0 на тексте — флекс-ребёнок иначе не сжимается (§5). */
.sec-brand{background:var(--paper-2)}
.brand-story{max-width:980px;margin:0 auto}
.b-lede{font-size:1.14rem;line-height:1.62;color:var(--ink-2)}
.b-quote{margin:24px 0;padding:12px 0 12px 18px;border-left:3px solid var(--accent,#E2452B);
  font-family:var(--display,inherit);font-size:1.28rem;line-height:1.42;color:var(--ink)}
.b-row{display:flex;gap:30px;align-items:center;margin:30px 0}
.b-row.rev{flex-direction:row}
.b-text{flex:1 1 auto;min-width:0}
.b-text h3{margin:0 0 .4em;font-size:1.18rem}
.b-text p{margin:0 0 .8em;color:var(--ink-2)}
.b-text p:last-child{margin-bottom:0}
.b-photo{flex:0 0 340px;max-width:340px;margin:0}
.b-photo img{width:100%;height:auto;display:block;border-radius:var(--r-sm);background:#fff}
.b-photo figcaption{margin-top:8px;font-size:.82rem;color:var(--ink-3);line-height:1.45}
@media (max-width:860px){
  .b-row,.b-row.rev{flex-direction:column;gap:16px;margin:24px 0}
  .b-text{order:0}
  .b-photo{order:1;flex:1 1 auto;max-width:100%;align-self:stretch}
}