/* ============================================================
   IceBox — MSL primary navigation v1.1
   Softer palette, contained mega card, explicit legacy-button
   overrides (Twenty Twenty-One styles bare <button> elements).
   ============================================================ */
.ibx-header,.ibx-drawer,.ibx-overlay{
  --plum:#A21E6B;--plum-dark:#8A1A5B;
  --plum-tint:rgba(162,30,107,.07);
  --plum-tint-2:rgba(162,30,107,.13);
  --navy:#2A3563;--ink:#4E5885;--ink-soft:#78819F;
  --surface:#FAF8FC;--line:#ECE6F0;--line-soft:#F2EDF5;--white:#fff;
  --shadow:0 24px 60px rgba(42,53,99,.12),0 2px 10px rgba(42,53,99,.05);
  --ease:200ms cubic-bezier(.32,.72,.35,1);
}
@media (prefers-reduced-motion:reduce){
  .ibx-header *,.ibx-drawer *,.ibx-overlay{transition:none!important;animation:none!important}
}
.ibx-header *,.ibx-drawer *{box-sizing:border-box;margin:0;padding:0}
.ibx-header ul,.ibx-drawer ul{list-style:none}
.ibx-header a,.ibx-drawer a{text-decoration:none;color:inherit}

/* neutralise theme button styling in all states */
.ibx-header button,.ibx-drawer button,
.ibx-header button:hover,.ibx-drawer button:hover,
.ibx-header button:focus,.ibx-drawer button:focus,
.ibx-header button:active,.ibx-drawer button:active{
  -webkit-appearance:none;appearance:none;
  background:transparent;border:0;box-shadow:none;outline:none;
  font:inherit;color:inherit;cursor:pointer;
  letter-spacing:normal;text-transform:none;
}
.ibx-header :focus-visible,.ibx-drawer :focus-visible{
  outline:2px solid var(--plum);outline-offset:3px;border-radius:10px;
}

/* ---------- header bar ---------- */
.ibx-header{position:sticky;top:0;z-index:9990;background:var(--white);border-bottom:1px solid var(--line)}
body.admin-bar .ibx-header{top:32px}
@media (max-width:782px){body.admin-bar .ibx-header{top:46px}}
.ibx-container{max-width:1240px;margin:0 auto;padding:0 24px}
.ibx-bar{height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ibx-brand{display:flex;align-items:center;flex:0 0 auto}
.ibx-brand img{height:56px;width:auto;display:block;max-width:none}

/* ---------- desktop nav ---------- */
.ibx-nav{display:none}
@media (min-width:1024px){.ibx-nav{display:block}}
.ibx-nav>ul{display:flex;align-items:center;gap:4px}
.ibx-header .ibx-link,.ibx-header .ibx-toggle{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 18px;font-size:16px;font-weight:600;line-height:1.3;
  color:var(--navy);background:transparent;border-radius:999px;white-space:nowrap;
  transition:color var(--ease),background-color var(--ease);
}
.ibx-header .ibx-link:hover,
.ibx-header .ibx-toggle:hover,
.ibx-header .ibx-item.is-open>.ibx-toggle{background:var(--plum-tint);color:var(--plum)}
.ibx-header .ibx-toggle .ibx-chev{width:12px;height:12px;flex:0 0 auto;opacity:.7;transition:transform var(--ease)}
.ibx-header .ibx-item.is-open>.ibx-toggle .ibx-chev{transform:rotate(180deg);opacity:1}

.ibx-header .ibx-btn,.ibx-drawer .ibx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 28px;border-radius:999px;font-weight:600;font-size:15px;line-height:1.2;
  transition:background-color var(--ease);
}
.ibx-header .ibx-btn-plum,.ibx-drawer .ibx-btn-plum{background:var(--plum);color:#fff}
.ibx-header .ibx-btn-plum:hover,.ibx-drawer .ibx-btn-plum:hover{background:var(--plum-dark);color:#fff}
.ibx-cta{display:none}
@media (min-width:1024px){.ibx-cta{display:inline-flex}}

/* ---------- panel shell ---------- */
.ibx-item{position:relative}
.ibx-panel{
  position:absolute;top:calc(100% + 12px);
  visibility:hidden;opacity:0;transform:translateY(8px);
  transition:opacity var(--ease),transform var(--ease),visibility var(--ease);
  background:var(--white);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);text-align:left;
}
.ibx-item.is-open>.ibx-panel{visibility:visible;opacity:1;transform:translateY(0)}
.ibx-panel::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}

/* About dropdown */
.ibx-drop{left:0;min-width:290px;padding:12px}
.ibx-drop a{display:block;padding:10px 14px;font-size:15px;color:var(--ink);border-radius:10px;
  transition:background-color var(--ease),color var(--ease)}
.ibx-drop a:hover{background:var(--plum-tint);color:var(--plum)}
.ibx-drop-group{margin-top:8px;padding-top:10px;border-top:1px solid var(--line-soft)}
.ibx-drop-group>a:first-child{font-weight:600;color:var(--navy)}
.ibx-drop-sub{margin:2px 0 0 18px;padding-left:12px;border-left:2px solid var(--line)}
.ibx-drop-sub a{font-size:14.5px;color:var(--ink-soft);padding:8px 14px}

/* ---------- mega panel: contained floating card ---------- */
.ibx-item.ibx-mega{position:static}
.ibx-panel-mega{
  left:50%;right:auto;width:min(1240px,calc(100vw - 40px));
  transform:translate(-50%,8px);padding:0;overflow:hidden;border-radius:18px;
}
.ibx-item.is-open>.ibx-panel-mega{transform:translate(-50%,0)}
.ibx-mega-grid{display:grid;grid-template-columns:2.3fr 1fr 1.2fr 1.25fr;gap:14px;padding:22px}
.ibx-fam{background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;padding:20px 22px}
.ibx-fam-head{
  display:block;font-size:16px;font-weight:700;color:var(--navy);
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);
  transition:color var(--ease);
}
a.ibx-fam-head:hover{color:var(--plum)}
.ibx-fam-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ibx-fam-cols>*+*{padding-left:26px;border-left:1px solid var(--line)}
.ibx-grp+.ibx-grp{margin-top:22px}
.ibx-grp-label{display:inline-block;font-size:13px;font-weight:700;color:var(--plum);margin-bottom:6px;letter-spacing:.1px}
a.ibx-grp-label:hover{text-decoration:underline;text-underline-offset:3px}
.ibx-links li a{
  display:block;padding:7px 10px;margin:0 -10px;border-radius:9px;
  font-size:14.5px;line-height:1.35;color:var(--ink);
  transition:background-color var(--ease),color var(--ease);
}
.ibx-links li a:hover{background:var(--plum-tint);color:var(--plum)}
.ibx-links li.ibx-sub{margin:2px 0 2px 10px;padding-left:12px;border-left:2px solid var(--line)}
.ibx-links li.ibx-sub a{font-size:13.5px;color:var(--ink-soft)}
.ibx-mega-foot{background:var(--surface);border-top:1px solid var(--line-soft)}
.ibx-mega-foot-inner{padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ibx-mega-foot p{font-size:14.5px;color:var(--ink)}
.ibx-mega-foot-links{display:flex;gap:10px}
.ibx-mega-foot-links a{font-size:14.5px;font-weight:600;color:var(--plum);padding:8px 14px;border-radius:999px;transition:background-color var(--ease)}
.ibx-mega-foot-links a:hover{background:var(--plum-tint-2)}

/* ---------- hamburger ---------- */
.ibx-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:11px;border-radius:14px;transition:background-color var(--ease)}
.ibx-burger span{display:block;height:2.5px;width:100%;background:var(--navy);border-radius:2px}
.ibx-header .ibx-burger:hover{background:var(--plum-tint)}
@media (min-width:1024px){.ibx-burger{display:none}}

/* ---------- drawer ---------- */
.ibx-overlay{position:fixed;inset:0;background:rgba(42,53,99,.42);opacity:0;visibility:hidden;
  transition:opacity var(--ease),visibility var(--ease);z-index:100000}
.ibx-overlay.is-open{opacity:1;visibility:visible}
.ibx-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);background:var(--white);
  z-index:100001;transform:translateX(102%);transition:transform 260ms cubic-bezier(.32,.72,.35,1);
  display:flex;flex-direction:column;box-shadow:-14px 0 44px rgba(42,53,99,.18)}
.ibx-drawer.is-open{transform:translateX(0)}
.ibx-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid var(--line);flex:0 0 auto}
.ibx-drawer-head img{height:44px;width:auto}
.ibx-drawer-close{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:var(--navy)}
.ibx-drawer .ibx-drawer-close:hover{background:var(--plum-tint);color:var(--plum)}
.ibx-drawer-body{flex:1 1 auto;overflow-y:auto;padding:10px 12px 20px;-webkit-overflow-scrolling:touch}
.ibx-drawer-foot{flex:0 0 auto;padding:16px 18px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.ibx-drawer-foot .ibx-btn{width:100%}

.ibx-m-item{border-bottom:1px solid var(--line-soft)}
.ibx-m-item:last-child{border-bottom:0}
.ibx-m-row{display:flex;align-items:stretch;border-radius:12px;transition:background-color var(--ease)}
.ibx-m-link{flex:1 1 auto;display:flex;align-items:center;min-height:52px;padding:12px 12px;
  font-size:16px;font-weight:600;color:var(--navy);border-radius:12px}
.ibx-m-acc{flex:0 0 52px;display:grid;place-items:center;color:var(--navy);border-radius:12px}
.ibx-m-acc .ibx-chev{width:14px;height:14px;opacity:.7;transition:transform var(--ease)}
.ibx-m-item.is-open>.ibx-m-row{background:var(--plum-tint)}
.ibx-m-item.is-open>.ibx-m-row .ibx-m-acc .ibx-chev{transform:rotate(180deg);opacity:1}
.ibx-m-item.is-open>.ibx-m-row .ibx-m-link,
.ibx-m-item.is-open>.ibx-m-row .ibx-m-acc{color:var(--plum)}
.ibx-m-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 240ms cubic-bezier(.32,.72,.35,1)}
.ibx-m-body>div{overflow:hidden}
.ibx-m-item.is-open>.ibx-m-body{grid-template-rows:1fr}
.ibx-m-pad{margin:8px 0 12px 12px;padding:2px 0 2px 14px;border-left:2px solid var(--line)}
.ibx-m-sub .ibx-m-link{min-height:46px;font-size:15px;font-weight:600;color:var(--ink)}
.ibx-m-sub .ibx-m-item{border-bottom:0}
.ibx-m-glabel{display:block;padding:14px 12px 4px;font-size:13px;font-weight:700;color:var(--plum)}
.ibx-m-leaf{display:flex;align-items:center;min-height:44px;padding:10px 12px;font-size:15px;
  color:var(--ink);border-radius:10px}
.ibx-m-leaf:active,.ibx-m-link:active{background:var(--plum-tint);color:var(--plum)}
.ibx-m-leaf.ibx-indent{margin-left:10px;padding-left:12px;border-left:2px solid var(--line);
  font-size:14px;color:var(--ink-soft);border-radius:0 10px 10px 0}
body.ibx-locked{overflow:hidden}

/* ---- v1.2: menu-driven mega grid (column count varies) ---- */
.ibx-mega-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));align-items:start}
.ibx-fam-wide{grid-column:span 2}
.ibx-fam-body:not(.ibx-fam-cols)>*+*{margin-top:20px}
.ibx-fam-body.ibx-fam-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:1120px){.ibx-mega-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}

/* ---- v2.2: restore menu-driven grid rules lost in the v1.1 rollback ---- */
.ibx-mega-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));align-items:start}
.ibx-fam-wide{grid-column:span 2}
.ibx-fam-body:not(.ibx-fam-cols)>*+*{margin-top:20px}
.ibx-fam-body.ibx-fam-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:1120px){.ibx-mega-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}

/* ---- v2.2: theme button styling was still winning on the nav toggles ---- */
.ibx-header .ibx-toggle,
.ibx-header .ibx-toggle:hover,
.ibx-header .ibx-toggle:focus,
.ibx-header .ibx-burger,
.ibx-drawer .ibx-m-acc,
.ibx-drawer .ibx-drawer-close{background-color:transparent!important;color:var(--navy)!important}
.ibx-header .ibx-toggle:hover,
.ibx-header .ibx-item.is-open>.ibx-toggle{background-color:var(--plum-tint)!important;color:var(--plum)!important}
.ibx-header .ibx-burger:hover{background-color:var(--plum-tint)!important}

/* ---- v2.2: breathing room between the header and page content ---- */
body:not(.home) .page_main{padding-top:48px}
@media (max-width:767px){body:not(.home) .page_main{padding-top:32px}}

/* ---- v2.3: overflow-x:hidden on html/body (style.css:573) was disabling
   position:sticky. overflow:clip prevents horizontal scroll the same way
   without creating a scroll container, so sticky works again. ---- */
html,body{overflow-x:clip}

/* ================= v2.4: logo, burger, chevrons, mobile CTA ================= */

/* larger logo, bar grown to suit */
.ibx-bar{height:96px}
.ibx-brand img{height:72px}
@media (max-width:1023px){
  .ibx-bar{height:84px}
  .ibx-brand img{height:58px}
}
.ibx-drawer-head img{height:54px}

/* CTA out of the mobile bar — v1.1 raised .ibx-header .ibx-btn above
   .ibx-cta{display:none}, so the hide rule was losing on specificity */
.ibx-header .ibx-cta{display:none}
@media (min-width:1024px){.ibx-header .ibx-cta{display:inline-flex}}

/* burger: brand plum, thinner bars, narrower so it reads lighter */
.ibx-burger span{height:2px;width:22px;margin:0 auto;background:var(--plum);border-radius:2px}
.ibx-burger{gap:6px}

/* chevrons: smaller, lighter stroke, plum instead of near-black */
.ibx-chev{width:11px!important;height:11px!important}
.ibx-chev path{stroke-width:1.4}
.ibx-header .ibx-toggle .ibx-chev{opacity:.55}
.ibx-drawer .ibx-m-acc{color:var(--plum)!important}
.ibx-drawer .ibx-m-acc .ibx-chev{opacity:.75}
.ibx-drawer .ibx-drawer-close{color:var(--plum)!important}
.ibx-burger{background:var(--plum)!important;border-radius:999px;width:44px;height:44px}
.ibx-burger span{background:#fff}

/* v2.4.2: circle burger needs to outrank the v2.2 transparent !important */
.ibx-header .ibx-burger{background-color:var(--plum)!important;border-radius:999px;width:44px;height:44px;padding:11px}
.ibx-header .ibx-burger span{background:#fff}
.ibx-header .ibx-burger:hover{background-color:var(--plum-dark)!important}

/* v2.4.3: back to bare plum bars, no circle */
.ibx-header .ibx-burger{background-color:transparent!important;border-radius:14px;width:46px;height:46px}
.ibx-header .ibx-burger span{background:var(--plum)}

/* v2.5: larger drawer chevrons, larger logo both breakpoints */
.ibx-drawer .ibx-m-acc .ibx-chev{width:15px!important;height:15px!important}
.ibx-drawer .ibx-m-acc{flex:0 0 56px}
.ibx-bar{height:104px}
.ibx-brand img{height:84px}
@media (max-width:1023px){
  .ibx-bar{height:92px}
  .ibx-brand img{height:70px}
}
.ibx-drawer-head img{height:62px}

/* v2.5: larger drawer chevrons, larger logo both breakpoints */
.ibx-drawer .ibx-m-acc .ibx-chev{width:15px!important;height:15px!important}
.ibx-drawer .ibx-m-acc{flex:0 0 56px}
.ibx-bar{height:104px}
.ibx-brand img{height:84px}
@media (max-width:1023px){
  .ibx-bar{height:92px}
  .ibx-brand img{height:70px}
}
.ibx-drawer-head img{height:62px}

/* v2.6: the v2.2 padding was too broad — inner pages have full-bleed hero
   bands that sit flush to the header. Only the collection login needs it. */
body:not(.home) .page_main{padding-top:0}
body.page-template-template-book-a-collection .page_main{padding-top:48px}
@media (max-width:767px){
  body.page-template-template-book-a-collection .page_main{padding-top:32px}
}

/* v2.7: drawer — logo out, actions moved up under the head, phone button */
.ibx-drawer-head .ibx-brand{display:none}
.ibx-drawer-head{justify-content:flex-end;order:1}
.ibx-drawer-foot{order:2}
.ibx-drawer-body{order:3}
.ibx-drawer-foot{
  border-top:0;border-bottom:1px solid var(--line);
  padding:14px 18px;display:flex;flex-direction:column;gap:10px;
}
.ibx-drawer-foot .ibx-btn{width:100%}
.ibx-drawer .ibx-btn-tel{
  background:transparent;color:var(--plum);
  border:1.5px solid var(--plum);gap:9px;
}
.ibx-drawer .ibx-btn-tel:active{background:var(--plum-tint)}

/* v2.8: buttons back under the nav list, in flow rather than pinned */
.ibx-drawer-head{order:0}
.ibx-drawer-body{order:0;flex:0 1 auto}
.ibx-drawer-foot{
  order:0;flex:0 0 auto;
  border-bottom:0;border-top:1px solid var(--line);
  margin-top:8px;
  padding:16px 18px calc(20px + env(safe-area-inset-bottom));
}
.ibx-drawer{overflow-y:auto}

/* v2.9: nav right-aligned, sitting next to the CTA instead of centred */
@media (min-width:1024px){
  .ibx-nav{flex:1 1 auto;display:flex;justify-content:flex-end}
  .ibx-nav>ul{justify-content:flex-end}
  .ibx-bar{gap:18px}
  .ibx-cta{margin-left:14px}
}

/* v2.10: subtle per-section tints on the mega panel blocks.
   Colours come from the theme's own --global--color-* vars (style.css:560)
   with fallbacks. Mixed with transparent so they layer over the white panel.
   To add a new family: .ibx-fam--<slug-of-menu-title>{...} */
.ibx-fam--cosmetics{
  background:color-mix(in srgb, var(--global--color-cosmetics,#d1478f) 7%, transparent);
  border-color:color-mix(in srgb, var(--global--color-cosmetics,#d1478f) 16%, transparent);
}
.ibx-fam--cosmetics .ibx-fam-head{
  border-bottom-color:color-mix(in srgb, var(--global--color-cosmetics,#d1478f) 32%, transparent);
}
.ibx-fam--vegansure{
  background:color-mix(in srgb, var(--global--color-vegansure,#009c50) 7%, transparent);
  border-color:color-mix(in srgb, var(--global--color-vegansure,#009c50) 16%, transparent);
}
.ibx-fam--vegansure .ibx-fam-head{
  border-bottom-color:color-mix(in srgb, var(--global--color-vegansure,#009c50) 32%, transparent);
}
.ibx-fam--biocides{
  background:color-mix(in srgb, var(--global--color-biocides,#6fb3d9) 9%, transparent);
  border-color:color-mix(in srgb, var(--global--color-biocides,#6fb3d9) 20%, transparent);
}
.ibx-fam--biocides .ibx-fam-head{
  border-bottom-color:color-mix(in srgb, var(--global--color-biocides,#6fb3d9) 38%, transparent);
}
.ibx-fam--specialist-services{
  background:color-mix(in srgb, var(--global--color-textiles,#8ea337) 9%, transparent);
  border-color:color-mix(in srgb, var(--global--color-textiles,#8ea337) 20%, transparent);
}
.ibx-fam--specialist-services .ibx-fam-head{
  border-bottom-color:color-mix(in srgb, var(--global--color-textiles,#8ea337) 38%, transparent);
}

/* v2.11: stronger section tints (theme vars confirmed at style.css:558-561) */
.ibx-fam--cosmetics{
  background:color-mix(in srgb, var(--global--color-cosmetics) 14%, transparent);
  border-color:color-mix(in srgb, var(--global--color-cosmetics) 30%, transparent);
}
.ibx-fam--cosmetics .ibx-fam-head{
  border-bottom-color:color-mix(in srgb, var(--global--color-cosmetics) 50%, transparent);
}
.ibx-fam--vegansure{
  background:color-mix(in srgb, var(--global--color-vegansure) 14%, transparent);
  border-color:color-mix(in srgb, var(--global--color-vegansure) 30%, transparent);
}
.ibx-fam--vegansure .ibx-fam-head{
  border-bottom-color:color-mix(in srgb, var(--global--color-vegansure) 50%, transparent);
}
.ibx-fam--biocides{
  background:color-mix(in srgb, var(--global--color-biocides) 16%, transparent);
  border-color:color-mix(in srgb, var(--global--color-biocides) 34%, transparent);
}
.ibx-fam--biocides .ibx-fam-head{
  border-bottom-color:color-mix(in srgb, var(--global--color-biocides) 54%, transparent);
}
.ibx-fam--specialist-services{
  background:color-mix(in srgb, var(--global--color-textiles) 16%, transparent);
  border-color:color-mix(in srgb, var(--global--color-textiles) 34%, transparent);
}
.ibx-fam--specialist-services .ibx-fam-head{
  border-bottom-color:color-mix(in srgb, var(--global--color-textiles) 54%, transparent);
}

/* v2.12: mega panel links were too faint against the tints —
   darker ink + slightly more weight (not bold) */
.ibx-links li a{color:#333B5E;font-weight:500}
.ibx-links li.ibx-sub a{color:#4A5478;font-weight:500}
.ibx-grp-label{font-size:13.5px}
.ibx-drop a{color:#333B5E;font-weight:500}
.ibx-drop-sub a{color:#4A5478}