@layer base, shell, blocks;
@layer base {
  :root {
    --ink: #0b0b0b; --paper: #fff; --shopfloor: #141414; --soft: #f4f2ec;
    --gold: #b39b00; --gold-deep: #8f7c00; --signal: #d02830;
    --line: #e3e0d6; --mut: #5c5950;
    --disp: "Archivo Black", "Arial Black", sans-serif;
    --body: "Archivo", "Segoe UI", sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper);
         line-height: 1.6; font-size: 1rem; }
  img { max-inline-size: 100%; block-size: auto; display: block; }
  a { color: inherit; }
  h1, h2, h3 { font-family: var(--disp); line-height: 1.12; font-weight: 400; margin-block: 0 .6em; }
  p { margin-block: 0 1em; }
  blockquote, figure, dd, fieldset { margin: 0; }
  ul { margin: 0; padding: 0; list-style: none; }
}
@layer shell {
  .bk-wrap { inline-size: min(1180px, 100% - 2rem); margin-inline: auto; }
  .bk-head { border-block-start: 4px solid var(--gold); background: var(--paper);
             position: sticky; inset-block-start: 0; z-index: 40;
             box-shadow: 0 1px 0 var(--line); }
  .bk-head__row { display: flex; align-items: center; gap: 1.2rem; min-block-size: 64px; }
  .bk-head__logo img { block-size: 26px; inline-size: auto; }
  .bk-head__nav { margin-inline-start: auto; }
  .bk-head__nav ul { display: flex; gap: 1.15rem; flex-wrap: wrap; }
  .bk-head__nav a { text-decoration: none; font-weight: 600; font-size: .83rem;
                    letter-spacing: .02em; text-transform: uppercase; }
  .bk-head__nav a:hover { color: var(--gold-deep); }
  .bk-stamp { display: inline-block; background: var(--gold); border-radius: 6px;
              padding: .55rem 1rem; line-height: 0; border: 0; cursor: pointer; }
  .bk-stamp:hover { background: var(--gold-deep); }
  .bk-stamp img { block-size: 13px; inline-size: auto; }
  .bk-stamp--hero img { block-size: 17px; }
  .bk-stamp--card { inline-size: 100%; text-align: center; padding-block: .8rem; }
  .bk-stamp--card img { block-size: 14px; display: inline-block; }
  .bk-stamp--big { padding: 1rem 1.6rem; }
  .bk-stamp--big img { block-size: 19px; }
  .bk-burger { display: none; }
  .bk-foot { background: var(--shopfloor); color: #cfccc2; margin-block-start: 4rem;
             border-block-start: 6px solid var(--gold); }
  .bk-foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
                   gap: 2rem; padding-block: 3rem 2rem; }
  .bk-foot__plate { background: #fff; padding: .7rem .9rem; border-radius: 4px;
                    display: inline-block; }
  .bk-foot__plate img { block-size: 22px; inline-size: auto; }
  .bk-foot h3 { color: #fff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
  .bk-foot a { color: #cfccc2; text-decoration: none; }
  .bk-foot a:hover { color: var(--gold); text-decoration: underline; }
  .bk-foot li { margin-block-end: .45rem; font-size: .9rem; }
  .bk-foot__legal { border-block-start: 1px solid #2c2c2c; padding-block: 1.1rem;
                    font-size: .78rem; color: #8f8c82; }
  .bk-crumbs { font-size: .8rem; color: var(--mut); padding-block: 1rem 0; }
  .bk-crumbs a { color: var(--mut); }
  @media (max-width: 860px) {
    .bk-head__row { flex-wrap: wrap; padding-block: .6rem; }
    .bk-burger { display: block; order: 3; inline-size: 100%; }
    .bk-burger summary { list-style: none; cursor: pointer; font-weight: 700;
      font-size: .85rem; text-transform: uppercase; padding-block: .4rem; }
    .bk-burger summary::before { content: "\2630\00a0 "; color: var(--gold-deep); }
    .bk-head__nav { display: none; }
    .bk-burger ul { padding-block: .4rem; }
    .bk-burger a { text-decoration: none; font-weight: 600; display: block;
                   padding-block: .35rem; }
  }
}
@layer blocks {
  .bk-hero { background: linear-gradient(135deg, #fff 62%, var(--soft) 62%); }
  .bk-hero__grid { display: grid; gap: 2.5rem; align-items: center;
                   grid-template-columns: 1.1fr 1fr; padding-block: 3.5rem; }
  .bk-hero__eyebrow { color: var(--signal); font-weight: 700; letter-spacing: .14em;
                      text-transform: uppercase; font-size: .8rem; margin-block-end: .8rem; }
  .bk-hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-block-end: .5em; }
  .bk-hero__sub { color: var(--mut); font-size: 1.06rem; max-inline-size: 34rem; }
  .bk-hero__shot { border-block-end: 10px solid var(--signal); border-radius: 8px;
                   overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.18); }
  .bk-hero__cta { display: flex; align-items: center; gap: 1.1rem; margin-block-start: 1.6rem;
                  flex-wrap: wrap; }
  .bk-hero__hint { font-size: .8rem; color: var(--mut); max-inline-size: 13rem; }
  .bk-ribbon { background: var(--gold); color: var(--ink); font-weight: 700;
               text-align: center; padding-block: .55rem; font-size: .86rem;
               letter-spacing: .04em; }
  .bk-trust { border-block-end: 1px solid var(--line); }
  .bk-trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                    gap: 1.2rem; padding-block: 1.6rem; }
  .bk-trust__cell { display: flex; gap: .8rem; align-items: center; }
  .bk-trust__cell svg { flex: none; }
  .bk-trust__cell b { display: block; font-size: .86rem; text-transform: uppercase;
                      letter-spacing: .03em; }
  .bk-trust__cell span { font-size: .8rem; color: var(--mut); }
  .bk-sec { padding-block: 3.6rem 1rem; }
  .bk-sec__kick { color: var(--gold-deep); font-weight: 700; font-size: .78rem;
                  letter-spacing: .16em; text-transform: uppercase; }
  .bk-sec h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
  .bk-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
             gap: 1.2rem; padding-block: 1.4rem 0; }
  .bk-cat { position: relative; border: 1px solid var(--line); border-radius: 8px;
            overflow: hidden; text-decoration: none; background: #fff;
            transition: box-shadow .15s; }
  .bk-cat:hover { box-shadow: 0 14px 30px rgba(0,0,0,.12); }
  .bk-cat img { aspect-ratio: 4 / 3; object-fit: contain; padding: 1.2rem;
                inline-size: 100%; height: auto; }
  .bk-cat__bar { border-block-start: 3px solid var(--gold); padding: .8rem 1rem 1rem;
                 display: flex; justify-content: space-between; align-items: baseline; }
  .bk-cat__bar b { font-family: var(--disp); font-weight: 400; font-size: .98rem; }
  .bk-cat__bar span { font-size: .78rem; color: var(--mut); }
  .bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
             gap: 1.3rem; padding-block: 1.4rem 0; }
  .bk-card { border: 1px solid var(--line); border-radius: 8px; background: #fff;
             display: flex; flex-direction: column; overflow: hidden; }
  .bk-card__pic { padding: 1.1rem; }
  .bk-card__pic img { aspect-ratio: 1; object-fit: contain; inline-size: 100%; height: auto; }
  .bk-card__body { padding: 0 1.1rem 1.1rem; display: flex; flex-direction: column;
                   gap: .45rem; flex: 1; }
  .bk-card__name { font-weight: 700; font-size: .93rem; line-height: 1.35;
                   text-decoration: none; }
  .bk-card__name:hover { color: var(--gold-deep); }
  .bk-card__meta { display: flex; align-items: center; gap: .5rem; font-size: .8rem;
                   color: var(--mut); }
  .bk-card__price { font-family: var(--disp); font-size: 1.15rem; margin-block-start: auto; }
  .bk-stars { display: inline-block; position: relative; inline-size: 86px; block-size: 16px;
              background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 20"><path fill="%23d8d4c6" d="M10 1l2.7 6.2 6.6.5-5 4.4 1.5 6.5L10 15l-5.8 3.6 1.5-6.5-5-4.4 6.6-.5zM32 1l2.7 6.2 6.6.5-5 4.4 1.5 6.5L32 15l-5.8 3.6 1.5-6.5-5-4.4 6.6-.5zM54 1l2.7 6.2 6.6.5-5 4.4 1.5 6.5L54 15l-5.8 3.6 1.5-6.5-5-4.4 6.6-.5zM76 1l2.7 6.2 6.6.5-5 4.4 1.5 6.5L76 15l-5.8 3.6 1.5-6.5-5-4.4 6.6-.5zM98 1l2.7 6.2 6.6.5-5 4.4 1.5 6.5L98 15l-5.8 3.6 1.5-6.5-5-4.4 6.6-.5z"/></svg>') 0 0 / 110px 20px no-repeat; }
  .bk-stars__fill { position: absolute; inset: 0; overflow: hidden;
              background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 20"><path fill="%23b39b00" d="M10 1l2.7 6.2 6.6.5-5 4.4 1.5 6.5L10 15l-5.8 3.6 1.5-6.5-5-4.4 6.6-.5zM32 1l2.7 6.2 6.6.5-5 4.4 1.5 6.5L32 15l-5.8 3.6 1.5-6.5-5-4.4 6.6-.5zM54 1l2.7 6.2 6.6.5-5 4.4 1.5 6.5L54 15l-5.8 3.6 1.5-6.5-5-4.4 6.6-.5zM76 1l2.7 6.2 6.6.5-5 4.4 1.5 6.5L76 15l-5.8 3.6 1.5-6.5-5-4.4 6.6-.5zM98 1l2.7 6.2 6.6.5-5 4.4 1.5 6.5L98 15l-5.8 3.6 1.5-6.5-5-4.4 6.6-.5z"/></svg>') 0 0 / 110px 20px no-repeat; }
  .bk-band { background: var(--signal); color: #fff; margin-block-start: 3.6rem; }
  .bk-band__inner { padding-block: 3rem; text-align: center; }
  .bk-band h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); color: #fff;
                max-inline-size: 48rem; margin-inline: auto; }
  .bk-band p { max-inline-size: 44rem; margin-inline: auto; color: #ffd9dc; }
  .bk-dark { background: var(--shopfloor); color: #e8e5db; margin-block-start: 3.6rem;
             padding-block: 3.4rem 2.4rem; }
  .bk-dark .bk-sec__kick { color: var(--gold); }
  .bk-dark h2 { color: #fff; }
  .bk-featrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
                gap: 2rem; align-items: center; padding-block: 1.6rem;
                border-block-end: 1px solid #262626; }
  .bk-featrow:last-of-type { border-block-end: 0; }
  .bk-featrow img { border-radius: 6px; background: #fff; padding: 1rem;
                    aspect-ratio: 4/3; object-fit: contain; inline-size: 100%; height: auto; }
  .bk-featrow h3 { color: var(--gold); font-size: 1.2rem; }
  .bk-featrow p { color: #b5b2a8; }
  .bk-featrow:nth-of-type(even) > figure { order: 2; }
  @media (max-width: 700px) { .bk-featrow:nth-of-type(even) > figure { order: 0; } }
  .bk-triple { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
               gap: 1.2rem; padding-block: 1.4rem 0; }
  .bk-triple a { position: relative; display: grid; border-radius: 8px; overflow: hidden;
                 text-decoration: none; background: var(--shopfloor); }
  .bk-triple img { opacity: .55; aspect-ratio: 16/10; object-fit: cover; inline-size: 100%;
                   height: auto; }
  .bk-triple b { position: absolute; inset-block-end: 0; inset-inline: 0; padding: 1rem;
                 color: #fff; font-family: var(--disp); font-weight: 400; font-size: 1.1rem;
                 background: linear-gradient(transparent, rgba(0,0,0,.75)); }
  .bk-rev { background: #000; color: #e8e5db; margin-block-start: 3.6rem;
            padding-block: 3.4rem 3rem; }
  .bk-rev h2 { color: #fff; }
  .bk-rev__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                  gap: 1.2rem; padding-block: 1.2rem 0; }
  .bk-quote { background: #121212; border: 1px solid #262626; border-radius: 8px;
              padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
  .bk-quote b { color: #fff; }
  .bk-quote p { color: #b5b2a8; font-size: .9rem; }
  .bk-quote footer { margin-block-start: auto; font-size: .8rem; color: #8f8c82; }
  .bk-quote footer a { color: var(--gold); }
  .bk-seo { padding-block: 3.6rem 0; }
  .bk-seo__badge { display: inline-block; background: var(--gold); color: var(--ink);
                   font-family: var(--disp); font-size: 1.3rem; padding: .5rem 1.4rem;
                   clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
  .bk-seo__cols { column-count: 2; column-gap: 2.6rem; margin-block-start: 1.4rem; }
  .bk-seo__cols p { break-inside: avoid; color: #3c3a33; }
  @media (max-width: 760px) { .bk-seo__cols { column-count: 1; } }
  .bk-faq { padding-block: 3.2rem 0; }
  .bk-faq details { border-block-end: 1px solid var(--line); }
  .bk-faq summary { cursor: pointer; font-weight: 700; padding-block: .9rem;
                    list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
  .bk-faq summary::after { content: "+"; color: var(--gold-deep); font-family: var(--disp); }
  .bk-faq details[open] summary::after { content: "\2212"; }
  .bk-faq details p { color: var(--mut); padding-block-end: 1rem; max-inline-size: 52rem; }
  .bk-cta { background: var(--gold); margin-block-start: 4rem; }
  .bk-cta__inner { padding-block: 3rem; display: flex; flex-wrap: wrap; gap: 1.5rem;
                   align-items: center; justify-content: space-between; }
  .bk-cta h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
  .bk-cta .bk-stamp { background: var(--ink); }
  .bk-cta .bk-stamp:hover { background: #000; }
  .bk-pdp { display: grid; grid-template-columns: minmax(300px, 520px) 1fr; gap: 2.6rem;
            padding-block: 1.6rem; align-items: start; }
  @media (max-width: 820px) { .bk-pdp { grid-template-columns: 1fr; } }
  .bk-look input { position: absolute; opacity: 0; pointer-events: none; }
  .bk-look__main { border: 1px solid var(--line); border-radius: 8px; padding: 1.2rem; }
  .bk-look__main img { aspect-ratio: 1; object-fit: contain; inline-size: 100%; height: auto;
                       display: none; }
  .bk-look__thumbs { display: flex; gap: .7rem; margin-block-start: .8rem; flex-wrap: wrap; }
  .bk-look__thumbs label { border: 1px solid var(--line); border-radius: 6px; padding: .4rem;
                           cursor: pointer; inline-size: 72px; }
  .bk-look__thumbs img { aspect-ratio: 1; object-fit: contain; inline-size: 100%; height: auto; }
  .bk-pdp h1 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
  .bk-pdp__meta { display: flex; align-items: center; gap: .7rem; color: var(--mut);
                  font-size: .86rem; flex-wrap: wrap; }
  .bk-pdp__price { font-family: var(--disp); font-size: 1.9rem; margin-block: .8rem .2rem; }
  .bk-pdp__price small { font-size: .65rem; color: var(--mut); font-family: var(--body);
                         font-weight: 400; display: block; }
  .bk-pdp__buy { margin-block: 1.1rem 1.6rem; max-inline-size: 26rem; }
  .bk-ticks { margin-block: 1.2rem; display: grid; gap: .55rem; }
  .bk-ticks li { padding-inline-start: 1.5rem; position: relative; font-size: .95rem; }
  .bk-ticks li::before { content: ""; position: absolute; inset-inline-start: 0;
                         inset-block-start: .4em; inline-size: .7em; block-size: .4em;
                         border-inline-start: 3px solid var(--gold-deep);
                         border-block-end: 3px solid var(--gold-deep);
                         transform: rotate(-45deg); }
  .bk-packs { border: 1px solid var(--line); border-radius: 8px; margin-block: 1.4rem;
              overflow: hidden; }
  .bk-packs caption { text-align: start; font-weight: 700; padding: .8rem 1rem;
                      background: var(--soft); caption-side: top; }
  .bk-packs { display: block; }
  .bk-packs table { border-collapse: collapse; inline-size: 100%; }
  .bk-packs td { padding: .7rem 1rem; border-block-start: 1px solid var(--line);
                 font-size: .9rem; }
  .bk-packs td:last-child { text-align: end; }
  .bk-packs a { color: var(--gold-deep); font-weight: 700; text-decoration: none; }
  .bk-facts { inline-size: 100%; border-collapse: collapse; margin-block: 1.2rem; }
  .bk-facts th { text-align: start; padding: .55rem .8rem; background: var(--soft);
                 inline-size: 38%; font-size: .85rem; border: 1px solid var(--line); }
  .bk-facts td { padding: .55rem .8rem; font-size: .9rem; border: 1px solid var(--line); }
  @media (max-width: 560px) {
    .bk-facts th, .bk-facts td { display: block; inline-size: auto; }
    .bk-facts th { border-block-end: 0; }
    .bk-facts td { border-block-start: 0; }
  }
  .bk-prose { max-inline-size: 60rem; }
  .bk-prose h2 { margin-block-start: 1.6em; }
  .bk-prose--page { padding-block: 1rem 0; }
}