@font-face{font-family:"BF Bricolage";src:url("/assets/bricolage-grotesque.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"BF Gazpacho";src:url("/assets/gazpacho-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"BF Gazpacho";src:url("/assets/gazpacho-medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"BF Gazpacho";src:url("/assets/gazpacho-bold-italic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}

:root{
  --bf-ink:#141414;
  --bf-night:#0e0e0e;
  --bf-yellow:#ffd400;
  --bf-cream:#fff8e1;
  --bf-card:#fffdf4;
  --bf-line:#e8dcaa;
  --bf-line-strong:#c9bb86;
  --bf-picked:#ffe680;
  --bf-soft:#fff0b8;
  --bf-sand:#f6ecc6;
  --bf-muted:#5a5034;
  --bf-sans:"BF Bricolage",system-ui,sans-serif;
  --bf-serif:"BF Gazpacho",Georgia,serif;
}
html{scroll-behavior:smooth;scroll-padding-top:16px}
html,body.bf-page{background:var(--bf-cream)}
body.bf-page{margin:0;color:var(--bf-ink);font-family:var(--bf-sans)}
.bf-page *,.bf-page *::before,.bf-page *::after{box-sizing:border-box}
.bf-page button,.bf-page input{font:inherit;color:inherit}
.bf-page [hidden]{display:none!important}
.bf-ticker img,.bf-header img,.bf-hero img{display:block;max-width:100%}
.bf-hero :where(p,h1,h2,ul,dl,dd,figure){margin:0}
.bf-hero ul{padding:0;list-style:none}
.bf-page :focus-visible{outline:3px solid var(--bf-ink);outline-offset:3px}
.bf-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bf-skip{position:absolute;top:8px;left:12px;z-index:30;background:var(--bf-yellow);color:var(--bf-ink);padding:12px;font-weight:700;transform:translateY(-200%)}
.bf-skip:focus{transform:none}

/* Ticker: contagem + marquee */
.bf-ticker{display:flex;align-items:center;height:44px;background:var(--bf-yellow);overflow:hidden}
.bf-countdown{display:flex;align-items:center;gap:12px;flex:none;height:100%;padding:0 18px;background:#222;white-space:nowrap}
.bf-countdown-label{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--bf-yellow)}
.bf-countdown-digits{display:flex;align-items:baseline;gap:6px}
.bf-countdown-digits>span{display:flex;align-items:baseline;gap:1px}
.bf-countdown b{font-size:15px;font-weight:700;color:var(--bf-cream);font-variant-numeric:tabular-nums}
.bf-countdown small{font-size:10px;color:#b9b09a}
.bf-marquee{flex:1;min-width:0;overflow:hidden}
.bf-marquee-track{display:flex;width:max-content}
.bf-marquee-group{display:flex;align-items:center;gap:20px;margin:0;padding:0 20px 0 20px;list-style:none;white-space:nowrap}
.bf-marquee-group li{display:flex;align-items:center;gap:20px;font-size:13px;font-weight:700;color:#222}
.bf-marquee-group li::after{content:"";width:1px;height:14px;background:rgba(20,20,20,.4)}
.bf-ticker[data-ready=true] .bf-marquee-track{animation:bf-marquee var(--bf-marquee-duration,38s) linear infinite}
@media(hover:hover){.bf-marquee:hover .bf-marquee-track{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){.bf-ticker[data-ready=true] .bf-marquee-track{animation:none}}
@keyframes bf-marquee{to{transform:translateX(calc(-1 * var(--bf-marquee-distance)))}}

/* Header */
.bf-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 32px;background:var(--bf-night);border-bottom:1px solid #333;color:var(--bf-cream)}
.bf-header a{color:inherit;text-decoration:none}
.bf-header-left{display:flex;align-items:center;gap:28px}
.bf-menu-button{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer}
.bf-logo{display:flex;align-items:center;gap:7.7px;height:29px}
.bf-logo img{width:96.5px;height:24.85px}
.bf-logo span{font:italic 700 18.27px/.95 var(--bf-serif);letter-spacing:-.02em;color:#ffd60a}
.bf-nav{display:flex;align-items:center;gap:28px}
.bf-nav a{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:500}
.bf-nav a:hover{color:var(--bf-yellow)}
.bf-header-actions{display:flex;align-items:center;gap:20px}
.bf-header-cta{padding:10px 18px;border-radius:999px;background:var(--bf-yellow);color:var(--bf-ink)!important;font-size:14px;font-weight:700;line-height:1.2}
.bf-header-icon{display:grid;place-items:center;width:22px;height:22px}
.bf-menu-panel{position:absolute;top:100%;left:0;right:0;display:grid;padding:8px 16px 16px;background:var(--bf-night);border-bottom:1px solid #333}
.bf-menu-panel a{padding:14px 0;border-bottom:1px solid #262626;font-size:16px;font-weight:500}
.bf-menu-panel a:last-child{border-bottom:0}

/* Hero */
.bf-hero{display:grid;grid-template-columns:556px 548px;grid-template-rows:auto 1fr;grid-template-areas:"gallery offer" "faq offer";gap:40px 48px;align-items:start;justify-content:center;width:100%;max-width:1200px;margin:0 auto;padding:50px 24px 56px}
.bf-gallery{grid-area:gallery;display:grid;gap:12px;min-width:0}
.bf-faq{grid-area:faq}
.bf-gallery:focus-visible{outline-offset:6px;border-radius:20px}
.bf-gallery-window{overflow:hidden;border-radius:20px;background:var(--bf-sand);aspect-ratio:1;touch-action:pan-y}
.bf-gallery-track{display:flex;height:100%;transition:transform .3s ease;will-change:transform}
.bf-slide{flex:0 0 100%;min-width:0;height:100%}
.bf-slide picture{display:block;width:100%;height:100%}
.bf-slide img{width:100%;height:100%;object-fit:cover}
.bf-slide-wide{display:grid;place-items:center;background:var(--bf-cream)}
.bf-slide-wide img{height:auto;object-fit:contain}
.bf-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.bf-thumb{aspect-ratio:1;padding:0;border:1px solid var(--bf-line-strong);border-radius:10px;background:var(--bf-sand);overflow:hidden;cursor:pointer}
.bf-thumb img{width:100%;height:100%;object-fit:cover}
.bf-thumb[aria-current=true]{border:2px solid var(--bf-ink)}
/* Miniatura 1: foto limpa do kit, ampliada como no Figma (137px numa caixa de 103px). */
@media (min-width:768px){.bf-thumb [data-kit-thumb]{transform:scale(1.33)}}

.bf-offer{grid-area:offer;display:flex;flex-direction:column;gap:24px;min-width:0}
.bf-intro{display:flex;flex-direction:column;gap:14px}
.bf-rating{display:flex;align-items:center;gap:14px;font-size:14px;letter-spacing:.02em}
/* Estrelas numa caixa de 100x20, como no Figma. */
.bf-rating img{box-sizing:content-box;width:95.83px;height:15.08px;padding:2.08px 2.08px 2.84px}
.bf-rating strong{font-weight:700}
.bf-intro h1{font:500 25px/1.15 var(--bf-serif)}
.bf-h1-strong{font-weight:700}
.bf-description{font-size:18px;line-height:1.5;color:var(--bf-muted)}

/* Banner de estoque C2 (dark com brilho): Figma 6998:426 desktop / 6998:436 mobile. */
.bf-stock{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;height:150px;padding:0 24px 0 28px;border-radius:16px;overflow:hidden;color:var(--bf-cream);background:radial-gradient(60% 140% at 85% 50%,rgba(255,212,0,.5) 0%,rgba(255,212,0,.1) 50%,rgba(255,212,0,0) 72%),#111}
.bf-stock::before{content:"";position:absolute;inset:0;z-index:-1;background:url("/assets/blessy-friday/grain.png") 0 0/24px 24px;opacity:.1;mix-blend-mode:screen;pointer-events:none}
.bf-stock-text{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.bf-stock-title{font-size:26px;font-weight:500;line-height:1.08;letter-spacing:-.015em;white-space:nowrap}
.bf-stock-title span{color:var(--bf-yellow)}
.bf-stock-pill{display:flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid rgba(255,212,0,.45);border-radius:999px;background:rgba(255,248,225,.08);font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
/* Bolinha do contador: vermelha, com halo pulsando. */
.bf-stock-dot{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 6px rgb(255 59 48 / 75%)}
.bf-stock-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#ff3b30;animation:bf-dot-ping 1.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes bf-dot-ping{75%,100%{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.bf-stock-dot::after{animation:none;opacity:0}}
.bf-stock-pill strong{color:var(--bf-yellow)}
.bf-stock[hidden]{display:none}
/* Odômetro do contador de garrafas */
.bf-odo{display:inline-flex;font-variant-numeric:tabular-nums}
.bf-odo-digit{display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;vertical-align:bottom}
.bf-odo-reel{display:flex;flex-direction:column}
.bf-odo-reel span{display:block;height:1.2em;line-height:1.2em}
/* Foto em camada própria (não empurra o texto nem a largura da coluna), ancorada como no Figma. */
.bf-stock-photo{position:absolute;top:16px;right:24px;display:grid;grid-template:118px/150px;place-items:center;width:150px;height:118px;pointer-events:none}
.bf-stock-photo img{width:208px;height:208px;max-width:none;object-fit:contain}
@keyframes bf-pulse{50%{opacity:.35}}

.bf-kits{display:grid;gap:14px;padding:24px;border:1px solid var(--bf-line);border-radius:16px;background:var(--bf-card)}
.bf-kits h2,.bf-gifts h2{font-size:17px;font-weight:700;line-height:1.2}
.bf-kit-list{display:grid;gap:14px}
.bf-kit{position:relative;display:flex;align-items:center;gap:14px;padding:16px;border:2px solid var(--bf-line);border-radius:16px;background:var(--bf-card);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.bf-kit:hover{border-color:var(--bf-line-strong)}
.bf-kit:has(.bf-kit-input:checked){background:var(--bf-picked);border-color:var(--bf-ink)}
.bf-kit:has(.bf-kit-input:focus-visible){outline:3px solid var(--bf-ink);outline-offset:3px}
.bf-kit-input{position:absolute;opacity:0;pointer-events:none}
.bf-radio{flex:none;width:22px;height:22px;border:2px solid var(--bf-line-strong);border-radius:50%;display:grid;place-items:center}
.bf-kit-input:checked+.bf-radio{border-color:var(--bf-ink)}
.bf-kit-input:checked+.bf-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--bf-ink)}
.bf-kit-body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.bf-kit-name{display:flex;align-items:center;gap:6px;font-size:17px;font-weight:700}
.bf-kit-note{font-size:13px;color:var(--bf-muted)}
.bf-kit-tags{display:flex;flex-wrap:wrap;gap:4px}
.bf-tag{display:inline-block;padding:3px 7px;border-radius:999px;background:var(--bf-yellow);color:var(--bf-ink);font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap}
.bf-tag-dark{padding:3px 8px;background:var(--bf-ink);color:var(--bf-yellow);font-weight:700}
.bf-tag-lg{padding:4px 10px;font-size:13px;font-weight:700}
.bf-kit-price{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap;text-align:right}
.bf-kit-price s{font-size:12px;color:var(--bf-muted)}
.bf-kit-price strong{font-size:20px;font-weight:700}
.bf-kit-savings{font-size:11px;font-weight:700}
.bf-kit-badge{position:absolute;top:-13px;right:36px;padding:4px 8px;border-radius:999px;background:var(--bf-ink);color:var(--bf-yellow);font-size:10px;font-weight:700;letter-spacing:.06em;line-height:1.2}

.bf-gifts{display:grid;gap:14px;padding:18px;border-radius:16px;background:var(--bf-soft)}
.bf-gift-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:10px}
.bf-gift{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border:1.5px solid var(--bf-ink);border-radius:12px;background:var(--bf-card);text-align:center}
.bf-gift-photo{display:block;width:100%;height:140px;border-radius:10px;overflow:hidden;background:var(--bf-sand)}
.bf-gift-photo-light{background:var(--bf-cream)}
.bf-gift-photo img{width:100%;height:100%;object-fit:cover}
.bf-gift-name{font-size:14px;font-weight:700}
.bf-gift-free{position:absolute;top:6.5px;left:6.5px;padding:2px 6px;border-radius:999px;background:var(--bf-ink);color:var(--bf-yellow);font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.2}
.bf-gift-hint,.bf-gift-lock{display:none}
.bf-gift[data-locked=true]{border-color:var(--bf-line)}
.bf-gift[data-locked=true] .bf-gift-photo{opacity:.4}
.bf-gift[data-locked=true] .bf-gift-name{color:var(--bf-muted)}
.bf-gift[data-locked=true] .bf-gift-free{display:none}
.bf-gift[data-locked=true] .bf-gift-hint{display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:600;color:var(--bf-muted)}
.bf-gift[data-locked=true] .bf-gift-lock,.bf-gift[data-just-unlocked=true] .bf-gift-lock{display:grid;place-items:center;position:absolute;top:60px;left:calc(50% - 20px);width:40px;height:40px;border-radius:50%;background:var(--bf-ink)}
.bf-gift-lock svg{display:block;width:20px;height:20px;overflow:visible}
/* Brinde bloqueado sempre por último (à direita). */
.bf-gift[data-locked=true]{order:1}
/* Destravou: a alça do cadeado abre, o cadeado some e a foto acende. Só transform/opacity. */
.bf-gift-photo{transition:opacity .15s ease .06s}
.bf-lock-shackle{transform-box:view-box;transform-origin:13.333px 9.167px}
.bf-gift[data-just-unlocked=true]{animation:bf-unlock .25s ease}
.bf-gift[data-just-unlocked=true] .bf-gift-lock{animation:bf-lock-out .24s ease forwards}
.bf-gift[data-just-unlocked=true] .bf-lock-shackle{animation:bf-shackle-open .12s cubic-bezier(.3,1.4,.5,1) forwards}
.bf-gift[data-just-unlocked=true] .bf-gift-free{animation:bf-fade-in .12s ease .14s both}
@keyframes bf-unlock{60%{transform:scale(1.04)}}
@keyframes bf-shackle-open{35%{transform:translateY(-3px)}100%{transform:translateY(-3px) rotate(-38deg)}}
@keyframes bf-lock-out{0%,45%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}
@keyframes bf-fade-in{from{opacity:0;transform:scale(.8)}}
/* Confete da garrafa e do pote extra destravados. Camada fixa, sem capturar clique. */
.bf-confetti{position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:none}
.bf-confetti i{position:absolute;width:var(--w);height:var(--h);border-radius:1px;background:var(--c);opacity:0;animation:bf-confetti var(--d) linear var(--t) forwards}
@keyframes bf-confetti{0%{transform:translate(-50%,-50%) scale(.6);opacity:0;animation-timing-function:cubic-bezier(.1,.7,.3,1)}8%{opacity:1}32%{transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) rotate(calc(var(--r) * .35)) scale(1);animation-timing-function:cubic-bezier(.45,0,.8,.6)}80%{opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.bf-gift[data-just-unlocked=true],.bf-gift[data-just-unlocked=true] *{animation:none!important}.bf-gift[data-just-unlocked=true] .bf-gift-lock{display:none}.bf-gift-photo{transition:none}}

/* Garantia (embaixo do botão de compra) */
.bf-guarantee{display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px dashed var(--bf-yellow);border-radius:16px;background:var(--bf-card)}
.bf-guarantee img{flex:none;width:72px;height:70px;object-fit:contain}
.bf-guarantee p{font-size:14px;line-height:1.3;color:var(--bf-muted)}
.bf-guarantee h2{margin:3px 0!important;font-size:17px;font-weight:700;line-height:1.2;color:var(--bf-ink)}
.bf-guarantee .bf-guarantee-note{font-size:13px}

/* FAQ da hero: mesmo desenho da FAQ da /comprar (cartões compactos), nas cores da Blessy Friday.
   Desktop: coluna esquerda, embaixo da galeria; mobile: no fim da hero. */
.bf-faq{display:grid;gap:8px;min-width:0}
.bf-faq details{border:1px solid #e4e0cf;border-radius:15px;background:#fffefa;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.bf-faq>details:first-child{border-radius:19px;background:#fdfbf3}
.bf-faq details:hover{border-color:#d9cfa5;box-shadow:0 8px 22px rgb(20 20 20 / 6%)}
.bf-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 21px 0 30px;color:var(--bf-ink);font-size:16px;font-weight:500;line-height:1.2;list-style:none;cursor:pointer}
.bf-faq summary::-webkit-details-marker{display:none}
.bf-faq summary:focus-visible{outline:2px solid var(--bf-ink);outline-offset:-4px;border-radius:14px}
.bf-faq-chevron{flex:none;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.bf-faq details[open]>summary .bf-faq-chevron{transform:rotate(180deg)}
.bf-faq-answer{margin:6px 26px 22px 30px;color:#5f5c52;font-size:14px;line-height:1.45}
.bf-faq-answer p{margin:0 0 12px}
.bf-faq-answer p:last-child{margin-bottom:0}
.bf-faq-answer :is(ul,ol){margin:0 0 12px 18px!important;padding:0!important}
.bf-faq-answer ul{list-style:disc!important}
.bf-faq-answer ol{list-style:decimal!important}
.bf-faq-answer li{margin-bottom:6px}
.bf-faq-answer strong{color:var(--bf-ink)}
.bf-faq-answer small{display:block;color:#7a7668;font-size:11px;line-height:1.35}
.bf-faq .nutrition-table-wrap{margin:10px 0 14px;overflow-x:auto;border:1px solid #e4e0cf;border-radius:12px;background:#fff}
.bf-faq .nutrition-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px;line-height:1.25;color:#4d4a40}
.bf-faq .nutrition-table :is(th,td){padding:7px 10px;border-bottom:1px solid #efeadb;text-align:left;vertical-align:top}
.bf-faq .nutrition-table th{background:var(--bf-soft);color:var(--bf-ink);font-weight:700}
.bf-faq .nutrition-table :is(th,td):nth-child(1){width:48%}
.bf-faq .nutrition-table :is(th,td):nth-child(2){width:31%;text-align:right}
.bf-faq .nutrition-table :is(th,td):nth-child(3){width:21%;text-align:right}
.bf-faq .nutrition-table tbody tr:last-child td{border-bottom:0}
/* "Mais dúvidas sobre a Blessy Friday": sub-FAQ dentro do cartão, em linhas. */
.bf-faq-more>summary{font-weight:600}
.bf-faq-sub{margin:0 14px 12px;border-top:1px solid #efeadb}
.bf-faq-sub details{border:0;border-bottom:1px solid #efeadb;border-radius:0;background:transparent;box-shadow:none}
.bf-faq-sub details:last-child{border-bottom:0}
.bf-faq-sub details:hover{box-shadow:none}
.bf-faq-sub summary{min-height:46px;padding:0 7px 0 16px;font-size:15px}
.bf-faq-sub .bf-faq-answer{margin:2px 12px 16px 16px}

.bf-buy{display:grid;gap:14px;padding-top:20px;border-top:1px solid var(--bf-line)}
.bf-summary{padding:14px 16px;border-radius:14px;background:var(--bf-soft)}
.bf-summary h2{font-size:15px;font-weight:700;line-height:1.2}
.bf-summary-line{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px}
.bf-summary-line dt{font-weight:600}
.bf-summary-line dd{font-weight:700}
.bf-summary-base dt,.bf-summary-base dd{font-weight:400}
.bf-summary-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:0;padding-top:10px;border-top:1.5px solid var(--bf-ink);font-weight:700}
.bf-summary-total dt{font-size:15px}
.bf-summary-total dd{font-size:26px}
.bf-summary-unit{display:flex;justify-content:flex-end;padding-top:6px}
.bf-cta{display:flex;align-items:center;justify-content:center;gap:10px;height:58px;border-radius:999px;background:var(--bf-ink);color:var(--bf-yellow);font-size:17px;font-weight:700;text-decoration:none;transition:transform .15s ease}
.bf-cta:hover{transform:translateY(-1px)}
.bf-cta img{width:20px;height:20px}
.bf-cta[aria-disabled=true]{opacity:.55;cursor:wait}
.bf-status{padding:12px 14px;border-radius:12px;background:#ffe3df;color:#8a1c12;font-size:14px;line-height:1.4}

/* Tablet: duas colunas fluidas */
@media (max-width:1179px) and (min-width:768px){
  .bf-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:40px 24px 56px}
  .bf-nav{display:none}
}
@media (max-width:959px) and (min-width:768px){
  .bf-gift-photo{height:110px}
  .bf-stock{padding:0 20px}
  .bf-stock-text{gap:12px}
  .bf-stock-title{font-size:17.08px}
  .bf-stock-pill{gap:8.5px;padding:6.83px 11.96px;border-width:.85px;font-size:11.1px}
  .bf-stock-dot{width:7.69px;height:7.69px}
  .bf-stock-photo{right:-10.85px}
  .bf-stock-photo img{width:150px;height:149px}
  .bf-kit-badge{right:16px}
}

/* Mobile */
@media (max-width:767px){
  .bf-ticker{height:32px}
  .bf-countdown{display:none}
  .bf-header{height:56px;padding:0 16px}
  .bf-header-left{gap:14px}
  .bf-nav,.bf-header-cta,.bf-header-desktop{display:none}
  .bf-hero{display:flex;flex-direction:column;align-items:stretch;gap:20px;padding:16px 16px 32px}
  .bf-gallery{position:static;width:100%;gap:12px}
  .bf-gallery-window{aspect-ratio:358/303}
  .bf-thumbs{gap:8px}
  .bf-thumb{aspect-ratio:auto;height:62px;border-radius:8px}
  .bf-offer{gap:20px}
  .bf-intro{gap:10px}
  .bf-rating{gap:8px;font-size:13px}
  .bf-intro h1{font-size:22px;font-weight:700}
  .bf-description{font-size:16px}
  .bf-stock{padding:0 20px}
  .bf-stock-text{gap:12px}
  .bf-stock-title{font-size:17.08px}
  .bf-stock-pill{gap:8.5px;padding:6.83px 11.96px;border-width:.85px;font-size:11.1px}
  .bf-stock-dot{width:7.69px;height:7.69px}
  .bf-stock-photo{right:-10.85px}
  .bf-stock-photo img{width:150px;height:149px}
  .bf-kits{gap:12px;padding:14px}
  .bf-kit-list{gap:12px}
  .bf-kit{gap:10px;padding:16px 12px}
  .bf-kit-badge{top:-12px;right:24px}
  .bf-gifts{padding:14px}
  .bf-gift-list{gap:8px}
  .bf-gift{padding:10px 6px}
  .bf-gift-photo{height:90px}
  .bf-gift-name{font-size:13px}
  .bf-gift-free{top:2.5px;left:2.5px;font-size:10px}
  .bf-gift[data-locked=true] .bf-gift-hint{font-size:10px}
  .bf-gift[data-locked=true] .bf-gift-lock,.bf-gift[data-just-unlocked=true] .bf-gift-lock{top:35px}
  .bf-guarantee{padding:14px}
  .bf-guarantee img{width:60px;height:58px}
  .bf-guarantee h2{font-size:16px}
  .bf-faq{align-self:stretch;width:100%}
  .bf-faq summary{padding:0 18px 0 22px;font-size:15px}
  .bf-faq-answer{margin:6px 20px 20px 22px}
  .bf-faq-sub summary{padding:0 6px 0 12px;font-size:14px}
  .bf-faq-sub .bf-faq-answer{margin:2px 10px 14px 12px}
  .bf-summary{padding:14px}
}
@media (max-width:359px){
  .bf-kit-price strong{font-size:18px}
  .bf-kit-name{font-size:16px}
}