/* ==========================================================================
   TILO CHROME (13 Sep 2026): one floating glass bottom bar for every page.
   Loaded site-wide by mu-plugins/tilo-premium-skin.php after each template's
   inline styles. Covers the five bars the templates draw:
     home      .tilo-bottom-nav        (.tilo-bottom-nav-item)
     category  .tilo-bottom-bar        (.tilo-bar-item)
     product   .tilo-pdp-bottom-nav    (.tilo-pdp-nav-item)
     cart      .tilo-cart-bottom-nav   (.tilo-cbn-item)
     collection .mobile-bar            (.bar-item)
   Recipe = taste-skill Appendix C / apple-design 12: thick material, capsule,
   specular highlight, inner hairline, vibrancy labels, solid fallbacks.
   ========================================================================== */
@media (max-width:768px){
html body .tilo-bottom-nav,html body .tilo-bottom-bar,html body .tilo-pdp-bottom-nav,html body .tilo-cart-bottom-nav,html body .mobile-bar{
  position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));top:auto;z-index:1400;
  isolation:isolate;overflow:hidden;border-radius:999px;border:1px solid rgba(255,255,255,.34);border-top-width:1px;
  padding:.45rem .35rem;margin:0;max-width:none;
  background:linear-gradient(135deg,rgba(255,255,255,.44),rgba(255,255,255,.16)),rgba(251,248,243,.58);
  -webkit-backdrop-filter:blur(24px) saturate(180%) contrast(1.05);backdrop-filter:blur(24px) saturate(180%) contrast(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(255,255,255,.14),0 2px 14px -4px rgba(74,10,30,.16),0 1px 2px rgba(74,10,30,.06);
  animation:tiloMaterialize .5s cubic-bezier(.32,.72,0,1)}
html body .tilo-bottom-nav::before,html body .tilo-bottom-bar::before,html body .tilo-pdp-bottom-nav::before,html body .tilo-cart-bottom-nav::before,html body .mobile-bar::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.55),transparent 34%),linear-gradient(90deg,rgba(255,255,255,.18),transparent 42%,rgba(255,255,255,.14))}
html body .tilo-bottom-nav::after,html body .tilo-bottom-bar::after,html body .tilo-pdp-bottom-nav::after,html body .tilo-cart-bottom-nav::after,html body .mobile-bar::after{
  content:'';position:absolute;inset:1px;border-radius:inherit;border:1px solid rgba(255,255,255,.14);pointer-events:none}
@keyframes tiloMaterialize{from{transform:scale(.97);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}to{transform:none}}

/* inner rows */
html body .tilo-bottom-nav-inner,html body .tilo-bottom-bar-inner,html body .mobile-bar-inner{display:flex;justify-content:space-around;align-items:stretch;max-width:none;margin:0}
html body .tilo-pdp-bottom-nav,html body .tilo-cart-bottom-nav{display:flex;align-items:stretch}

/* items: same label, same icon, same active colour everywhere */
html body .tilo-bottom-nav-item,html body .tilo-bar-item,html body .tilo-pdp-nav-item,html body .tilo-cbn-item,html body .bar-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  padding:.45rem .25rem;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;
  color:#231B17;text-decoration:none;text-align:center;font-family:'Jost','Karla',sans-serif;
  font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  transition:transform .16s cubic-bezier(.23,1,.32,1),color .2s ease}
html body .tilo-bottom-nav-item span,html body .tilo-bar-item span,html body .tilo-pdp-nav-label,html body .tilo-cbn-item>span:last-child,html body .bar-item span{
  font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1}
html body .tilo-bottom-nav-item svg,html body .tilo-bar-item svg,html body .tilo-pdp-nav-ico svg,html body .tilo-cbn-ico svg,html body .bar-item svg{
  width:22px;height:22px;stroke:currentColor;stroke-width:1.5;fill:none;margin:0}
html body .tilo-pdp-nav-ico,html body .tilo-cbn-ico{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
html body .tilo-bottom-nav-item:active,html body .tilo-bar-item:active,html body .tilo-pdp-nav-item:active,html body .tilo-cbn-item:active,html body .bar-item:active{transform:scale(.94);background:transparent}
html body .tilo-bottom-nav-item.active,html body .tilo-bar-item.active,html body .tilo-cbn-item.active,html body .bar-item.active,html body .tilo-bar-filter-btn.has-filters{color:#6B0F2B}
html body .tilo-bottom-nav-item.active svg,html body .tilo-bar-item.active svg,html body .bar-item.active svg{stroke:#6B0F2B}
/* WhatsApp "Ask" keeps its green glyph */
html body .tilo-pdp-nav-wa .tilo-pdp-nav-ico svg,html body .tilo-cbn-wa .tilo-cbn-ico svg{fill:#25D366;stroke:none;color:#25D366}
/* collection page: the filter pill becomes a plain item like the rest */
html body .bar-filter{flex-direction:column;gap:.2rem;background:transparent;color:#231B17;padding:.45rem .25rem;border-radius:0;box-shadow:none}
html body .bar-filter svg{stroke:currentColor}
/* badges */
html body .tilo-bottom-nav-item .badge,html body .tilo-cbn-badge,html body .tilo-filter-badge{background:#6B0F2B;color:#fff;font-weight:600}

/* things that sit above the bar */
html body .tilo-whatsapp,html body .tilo-wa-fab{bottom:calc(102px + env(safe-area-inset-bottom,0px));right:16px}
html body .tilo-mobile-sticky{bottom:calc(90px + env(safe-area-inset-bottom,0px));left:12px;right:12px;z-index:1401;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.7);padding:.6rem .75rem;background:rgba(251,248,243,.94);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:0 12px 36px -14px rgba(74,10,30,.35)}
/* room under the page for a floating bar */
html body:has(.tilo-bottom-nav,.tilo-bottom-bar,.tilo-pdp-bottom-nav,.tilo-cart-bottom-nav,.mobile-bar){padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
html body:has(.tilo-mobile-sticky){padding-bottom:calc(170px + env(safe-area-inset-bottom,0px))}

@media (prefers-reduced-transparency:reduce){
  html body .tilo-bottom-nav,html body .tilo-bottom-bar,html body .tilo-pdp-bottom-nav,html body .tilo-cart-bottom-nav,html body .mobile-bar{background:rgba(251,248,243,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  html body .tilo-bottom-nav,html body .tilo-bottom-bar,html body .tilo-pdp-bottom-nav,html body .tilo-cart-bottom-nav,html body .mobile-bar{background:#FBF8F3;border-color:#4A0A1E;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  html body .tilo-bottom-nav,html body .tilo-bottom-bar,html body .tilo-pdp-bottom-nav,html body .tilo-cart-bottom-nav,html body .mobile-bar{animation:none}
}
}