/* mrcomment — frosted-glass, compact product tab bar while it is stuck to the top (class set by tab-glass.js) */
.mrc-tabs-sentinel{display:block;height:1px;margin:0 0 -1px;visibility:hidden;pointer-events:none}
.mrc-tabs-spacer{display:block;height:max(var(--mrc-pull,0px),0px);margin-bottom:min(var(--mrc-pull,0px),0px);pointer-events:none}

/* the blur layer exists from the start (invisible behind the theme's opaque white) so Safari does not have to
   create it in the middle of a scroll — that is what made the bar blink */
html body #myTabb{-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);-webkit-transform:translateZ(0);transform:translateZ(0)}
html body #myTabb.mrc-stuck{
  background:rgba(255,255,255,.58)!important;
  box-shadow:0 1px 0 rgba(15,23,42,.07),0 8px 24px rgba(15,23,42,.08)!important;
  border:0!important;
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html body #myTabb.mrc-stuck{background:rgba(255,255,255,.96)!important}
}

/* compact: icon beside the label, 3px coloured underline (same on every tab), transparent tab "chips"
   (icon size of every tab: pandachild custom_rtl.css → #myTabb.mrc-stuck .sb-tab-ico) */
html body #myTabb.mrc-stuck .nav-item{margin:0 2px!important}
html body #myTabb.mrc-stuck .nav-item .nav-link{
  display:flex!important;flex-direction:row;align-items:center;justify-content:center;gap:6px;
  box-sizing:border-box;min-height:44px;height:auto!important;margin:0;
  padding:8px 4px 6px!important;
  border-width:0 0 3px!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  color:#5b6070;font-size:12.5px;line-height:1.5;white-space:nowrap;
}

/* active tab: tinted chip + thin ring in the tab's own colour (--mrc-tc is read from its underline by tab-glass.js) */
html body #myTabb.mrc-stuck .nav-item .nav-link.active{
  color:#23254e;font-weight:600;
  background:rgba(24,119,242,.11)!important;
  box-shadow:inset 0 1px 0 rgba(24,119,242,.34),inset 1px 0 0 rgba(24,119,242,.34),inset -1px 0 0 rgba(24,119,242,.34)!important;
  border-radius:7px 7px 0 0!important;
}
@supports (background:color-mix(in srgb,red 10%,transparent)){
  html body #myTabb.mrc-stuck .nav-item .nav-link.active{
    background:color-mix(in srgb,var(--mrc-tc,#1877f2) 13%,transparent)!important;
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mrc-tc,#1877f2) 42%,transparent),inset 1px 0 0 color-mix(in srgb,var(--mrc-tc,#1877f2) 42%,transparent),inset -1px 0 0 color-mix(in srgb,var(--mrc-tc,#1877f2) 42%,transparent)!important;
  }
}

@media (max-width:430px){
  html body #myTabb.mrc-stuck .nav-item{margin:0 1px!important}
  html body #myTabb.mrc-stuck .nav-item .nav-link{font-size:12px;gap:5px;padding-inline:2px!important}
  html body #myTabb.mrc-stuck.five-items .nav-item .nav-link{font-size:10.5px;min-height:42px}
}
@media (min-width:981px){
  html body #myTabb.mrc-stuck .nav-item .nav-link{min-height:48px;padding:10px 12px 8px!important;font-size:14px}
  /* the theme draws no coloured underline on desktop: only the active tab gets one, in its own colour */
  html body #myTabb.mrc-stuck .nav-item .nav-link:not(.active){border-bottom-color:transparent!important}
  html body #myTabb.mrc-stuck .nav-item .nav-link.active{border-bottom-color:var(--mrc-tc,#1877f2)!important}
}
