/* ══ Box builder ═════════════════════════════════════════════════════ */
.fondbox{
  --fb-cocoa:#482424; --fb-cocoa-soft:#5E3533; --fb-sky:#C6DEF0; --fb-sky-deep:#9CC3E4;
  --fb-butter:#FCF6C0; --fb-butter-deep:#F2E79C; --fb-bone:#F0EAEA; --fb-white:#FFFDF7;
  --fb-display:"Poppins","Trebuchet MS",system-ui,sans-serif;
  --fb-body:"Poppins","Helvetica Neue",Arial,sans-serif;
  font-family:var(--fb-body);color:var(--fb-cocoa);line-height:1.55;
}
.fondbox *,.fondbox *::before,.fondbox *::after{box-sizing:border-box;}
.fondbox :focus-visible{outline:3px solid var(--fb-cocoa);outline-offset:2px;border-radius:6px;}

.fb-grid{display:grid;gap:clamp(20px,3vw,32px);grid-template-columns:1fr;align-items:start;}
@media (min-width:880px){ .fb-grid{grid-template-columns:minmax(0,1fr) 400px;} }

/* ── size switch ──────────────────────────────────────────────────── */
.fb-sizes{display:flex;gap:10px;margin:0 0 16px;padding:0;border:0;}
.fb-sizes legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.fb-size{flex:1;display:flex;flex-direction:column;gap:1px;align-items:flex-start;
  padding:11px 15px;cursor:pointer;font:inherit;text-align:left;
  background:var(--fb-white);color:var(--fb-cocoa);
  border:2px solid var(--fb-cocoa);border-radius:14px;
  transition:background .16s,transform .12s;}
.fb-size:hover{background:var(--fb-sky);}
.fb-size[aria-pressed="true"]{background:var(--fb-cocoa);color:var(--fb-butter);}
.fb-size-n{font-family:var(--fb-display);font-weight:800;font-size:17px;text-transform:uppercase;}
.fb-size-p{font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;opacity:.85;}

/* ── the box ──────────────────────────────────────────────────────── */
.fb-panel{background:var(--fb-white);border:2px solid var(--fb-cocoa);
  border-radius:24px;padding:clamp(15px,2.2vw,20px);}
@media (min-width:880px){ .fb-panel{position:sticky;top:82px;} }

.fb-box{position:relative;background:var(--fb-cocoa);border-radius:14px;padding:14px;}
.fb-box::before{content:"";position:absolute;inset:7px;border:1.5px dashed rgba(198,222,240,.42);
  border-radius:8px;pointer-events:none;}
.fb-slots{position:relative;display:grid;gap:10px;grid-template-columns:repeat(4,1fr);}
.fb-slot{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
  border:2px dashed rgba(198,222,240,.5);background:rgba(198,222,240,.07);
  color:var(--fb-sky);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;}
.fb-slot img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));}
.fb-slot.is-filled{border-color:transparent;background:none;}
.fb-slot.pop{animation:fb-pop .3s cubic-bezier(.34,1.45,.5,1);}
@keyframes fb-pop{from{transform:scale(.6);opacity:.3;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion:reduce){.fb-slot.pop{animation:none;}.fb-panel{transition:none!important;}}

/* ── tally ────────────────────────────────────────────────────────── */
.fb-tally{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:15px 0 5px;}
.fb-count{font-size:13px;font-weight:500;color:var(--fb-cocoa-soft);font-variant-numeric:tabular-nums;}
.fb-count strong{color:var(--fb-cocoa);font-weight:700;}
.fb-total{font-family:var(--fb-display);font-weight:800;font-size:23px;font-variant-numeric:tabular-nums;}
.fb-total span{font-size:12px;font-weight:500;color:var(--fb-cocoa-soft);}
.fb-bar{height:6px;border-radius:99px;background:var(--fb-bone);overflow:hidden;margin-bottom:15px;
  border:1px solid var(--fb-cocoa);}
.fb-bar i{display:block;height:100%;width:0;background:var(--fb-cocoa);transition:width .3s ease;}

.fb-cta{width:100%;padding:15px 20px;border:2px solid var(--fb-cocoa);border-radius:99px;cursor:pointer;
  font-family:var(--fb-display);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.03em;
  background:var(--fb-cocoa);color:var(--fb-butter);transition:background .16s,transform .12s;}
.fb-cta:hover:not(:disabled){background:var(--fb-cocoa-soft);}
.fb-cta:active:not(:disabled){transform:translateY(1px);}
.fb-cta:disabled{background:var(--fb-bone);color:var(--fb-cocoa-soft);
  border-color:var(--fb-cocoa-soft);cursor:not-allowed;opacity:.75;}
.fb-hint{margin:9px 0 0;font-size:12.5px;text-align:center;color:var(--fb-cocoa-soft);}
.fb-clear{background:none;border:0;padding:0;font:inherit;font-size:12.5px;
  color:var(--fb-cocoa-soft);text-decoration:underline;cursor:pointer;}

/* ── cookie list with counters ────────────────────────────────────── */
.fb-shelf-h{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fb-cocoa-soft);margin:0 0 12px;}
.fb-shelf{display:grid;gap:12px;grid-template-columns:1fr;list-style:none;margin:0;padding:0;}
@media (min-width:560px){ .fb-shelf{grid-template-columns:repeat(2,1fr);} }

.fb-cookie{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center;
  background:var(--fb-white);border:2px solid var(--fb-cocoa);border-radius:18px;padding:14px;
  transition:background .16s;}
.fb-cookie.has-some{background:var(--fb-sky);}
.fb-cookie>img{width:84px;height:84px;object-fit:contain;}
.fb-c-name{display:block;font-family:var(--fb-display);font-weight:800;font-size:15px;
  text-transform:uppercase;line-height:1.15;letter-spacing:.01em;}
.fb-c-desc{display:block;margin:4px 0 0;font-size:12.5px;line-height:1.4;color:var(--fb-cocoa-soft);}

.fb-counter{display:flex;align-items:center;gap:10px;margin-top:10px;}
.fb-step{width:34px;height:34px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:2px solid var(--fb-cocoa);border-radius:50%;background:var(--fb-white);
  color:var(--fb-cocoa);font-family:var(--fb-display);font-size:19px;font-weight:800;line-height:1;
  padding:0 0 2px;transition:background .14s,transform .1s;}
.fb-step:hover:not(:disabled){background:var(--fb-sky);}
.fb-step:active:not(:disabled){transform:scale(.92);}
.fb-step:disabled{opacity:.3;cursor:not-allowed;}
.fb-qty{min-width:2ch;text-align:center;font-family:var(--fb-display);font-weight:800;
  font-size:17px;font-variant-numeric:tabular-nums;}

.fb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

@media (max-width:879px){
  .fb-grid{grid-template-columns:1fr;}
  /* room for the fixed bar below the last card */
  .fb-shelf{padding-bottom:calc(196px + env(safe-area-inset-bottom));}

  /* the box becomes a compact bar pinned to the bottom of the screen */
  .fb-panel{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    border-radius:20px 20px 0 0;border-width:2px 0 0;
    padding:10px 14px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px -12px rgba(72,36,36,.55);
    transform:translateY(112%);transition:transform .28s ease;
    display:grid;grid-template-columns:1fr 1fr;grid-template-areas:
      "sizes sizes" "box box" "tally tally" "bar bar" "cta cta";gap:8px 10px;
  }
  .fb-sizes{grid-area:sizes;margin:0;gap:8px;}
  .fb-size{padding:7px 12px;flex-direction:row;align-items:baseline;gap:8px;border-radius:12px;}
  .fb-size-n{font-size:13px;}
  .fb-size-p{font-size:11.5px;}
  .fb-box{grid-area:box;padding:8px 10px;border-radius:12px;}
  .fb-box::before{inset:4px;border-radius:8px;}
  .fb-slots{gap:6px;grid-template-columns:repeat(8,1fr);}
  .fb-slots[data-size="4"]{grid-template-columns:repeat(4,1fr);max-width:220px;margin:0 auto;}
  .fb-slot{font-size:10px;border-width:1.5px;}
  .fb-tally{grid-area:tally;margin:0;}
  .fb-total{font-size:18px;}
  .fb-bar{grid-area:bar;margin:0;}
  .fb-cta{grid-area:cta;padding:12px 16px;font-size:14px;}
  .fondbox.is-onscreen .fb-panel{transform:none;}
  .fb-hint{display:none;}
  .fb-cookie{padding:12px;grid-template-columns:72px minmax(0,1fr);gap:12px;}
  .fb-cookie>img{width:72px;height:72px;}
}