/* iCookMagic — constitution skin.
   Applies the design tokens (from theme.css.php variables) over the real components.
   Loaded AFTER component CSS so it wins; scoped to the agreed rules only:
   soft corners · small content-hugging buttons · the four-colour palette. */

/* ── soft corners (the radius ladder) ── */
.bz-card,.wc-card,.wc-acard,.fp-card,.js-card,.rc-card,.card,.hh-proof,.dt-main{
  border-radius:var(--radius-card,16px)!important;
}
.bz-tag,.wc-chip,.bz-badge,.dt-alg,.nutri div,.rm,.rb-macs .rm{
  border-radius:var(--radius-tile,8px)!important;
}

/* ── buttons: small, content-hugging, pill — never full-width or oversize ── */
.icm-cta,.bh-cta,.bz-act,.btn-pk,.btn-gh,.hh-shop,.hh-book,.wc-buy,.wc-buy2,
.dt-cart,.ck-btn,.ck-btn-pk,.ck-btn-gh,.bz-more>button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  width:auto!important;max-width:100%!important;
  height:auto!important;min-height:0!important;
  padding:7px 15px!important;
  border-radius:var(--radius-pill,9999px)!important;
  font-family:var(--ff-body)!important;font-weight:500!important;font-size:13px!important;line-height:1!important;
  white-space:nowrap!important;
}

/* primary = our one pink; hover = magenta dark */
.icm-cta.icm-cta-primary,.bz-act,.btn-pk,.hh-shop,.wc-buy,.wc-buy2,.dt-cart,.ck-btn-pk,.bh-cta.primary{
  background:var(--magenta,#FF3D7F)!important;color:#fff!important;border:0!important;
}
.icm-cta.icm-cta-primary:hover,.bz-act:hover,.btn-pk:hover,.hh-shop:hover,.wc-buy:hover,
.wc-buy2:hover,.dt-cart:hover,.ck-btn-pk:hover,.bh-cta.primary:hover{
  background:var(--magenta-dk,#D9266A)!important;
}
/* secondary = hairline black on white */
.btn-gh,.hh-book,.ck-btn-gh,.icm-cta.icm-cta-secondary,.bh-cta.ghost{
  background:#fff!important;color:#000!important;border:var(--border-hair,1px) solid #000!important;
}

/* ── shop card skin moved to /fwebcust.css.php (generated from f_webcust_token) ──
   Positions come from f_webcust_realestate; every design value comes from the DB tokens.
   Do not add .gp-* rules here — change a token row instead. */

/* ── shop page: 7 EQUAL columns · filter(1) · 5 cards(2–6) · right rail(7) · compact ── */
.bz-body{display:grid!important;grid-template-columns:repeat(7,1fr)!important;gap:10px!important;align-items:start!important;padding-top:14px!important}
.bz-body>.bz-rail{grid-column:1/2!important;position:static!important;width:auto!important;top:auto!important}
.bz-body>main{grid-column:2/7!important;min-width:0}
.bz-body>.bz-railR{grid-column:7/8!important;display:flex;flex-direction:column;gap:8px}
.bz-grid{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:10px!important}
/* compact filter rail */
.bz-rail{font-size:12px}
.bz-facet h4{margin:8px 0 4px!important;font-size:10px!important}
.bz-chk{font-size:12px!important;padding:2px 0!important}
/* right-rail icon tiles */
.bz-railR .rr-box{display:flex;flex-direction:column;align-items:center;gap:3px;border:.5px solid var(--line-soft,#ddd);border-radius:var(--radius-tile,8px);padding:8px 4px;text-decoration:none;color:#000;font-size:10px;font-weight:500;text-align:center}
.bz-railR .rr-ic{font-size:17px;line-height:1}
.bz-railR .rr-box.rr-hot{background:var(--magenta,#FF3D7F);color:#fff;border-color:var(--magenta,#FF3D7F)}
/* icon-first, compact Add button */
.gp-cta{gap:5px;display:inline-flex!important;align-items:center;justify-content:center}
.gp-cta-ic{font-size:13px}
/* mobile: collapse the 7-col grid */
@media(max-width:900px){
  .bz-body{grid-template-columns:1fr!important}
  .bz-body>.bz-rail,.bz-body>main,.bz-body>.bz-railR{grid-column:auto!important}
  .bz-railR{flex-direction:row!important;flex-wrap:wrap}
  .bz-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:1200px) and (min-width:901px){.bz-grid{grid-template-columns:repeat(3,1fr)!important}}