/* ==========================================================================
   RADICO header
   Figma: hyvOoR3M4Ln10eJ0dkXgBE node 2201:21479 (Navigation, 1920x167)

   Height breakdown, reconciled against the design:
     Top nav    94px = 32 padding + 30 content (the compare pill: 3+24+3) + 32
     Bottom nav 73px = 24 padding + 25.2 menu line box (18px x 1.4) + 24
     Total     167px  ✓ matches the Figma frame

   The 1920x89 "Navigation" at node 2201:21892 is a DIFFERENT variant with no
   icon row — do not use it as the target for this one.
   No min-heights: content drives the box, exactly as in the design.
   ========================================================================== */

/* The three top-nav groups must size to content so the logo stays where the
   design puts it. Elementor emits --width from the container's Width control;
   this is a belt-and-braces guard for the flex shorthand. */
.radico-header__top > .radico-header__group {
  flex: 0 0 auto;
}

/* Image widgets inherit the container's line-height, which adds descender
   space below the SVG (a 24px icon rendered a 27.6px box). */
.radico-header .elementor-widget-image {
  line-height: 0;
  font-size: 0;
}

.radico-header .elementor-widget-image img {
  display: block;
  height: auto;
}

/* ---- Home office / Бизнес audience switch -------------------------------
   Figma: track 36x20, 2px inset, knob 16x16 with shadow-sm, track #D1D8D8.
   Labels are Roboto 16/400 in the file (inherited from a UI-kit component);
   rendered in Geologica here for system consistency — see docs/deviations.md.
   -------------------------------------------------------------------------- */
/* --- Audience switch ------------------------------------------------------
   One control. The side the visitor is already on is inert text; the other is
   the link that switches. The track and knob only show which side is active —
   they take no clicks, so the two names are the only hit targets. */
.radico-audience-switch {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.radico-audience-switch__label {
  font-family: var(--radico-font);
  font-size: 16px;
  font-weight: var(--radico-fw-light);
  line-height: 1.5;
  color: var(--radico-space-950);
  white-space: nowrap;
  text-decoration: none;
}
a.radico-audience-switch__label { cursor: pointer; }
a.radico-audience-switch__label:hover { color: var(--radico-blue-700); }

.radico-audience-switch__label.is-active {
  font-weight: var(--radico-fw-bold);
  cursor: default;
}

.radico-audience-switch__track {
  flex: 0 0 auto;
  position: relative;
  display: block;
  width: 36px;
  height: 20px;
  border: 0;
  border-radius: var(--radico-radius-full);
  background: var(--radico-space-300);
  cursor: pointer;
  transition: background-color .25s ease;
}
.radico-audience-switch--business .radico-audience-switch__track {
  background: var(--radico-blue-950);
}

/* The knob slides rather than jumping between two flex positions, so the
   switch reads as a toggle rather than two states. */
.radico-audience-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  transition: transform .25s ease;
  border-radius: var(--radico-radius-full);
  background: var(--radico-space-50);
  box-shadow: var(--radico-shadow-sm);
}
.radico-audience-switch--business .radico-audience-switch__knob {
  transform: translateX(16px);
}

/* --- Page transition ------------------------------------------------------
   Switching audience swaps the whole page, so it cross-fades instead of
   flashing white. The fade-out is driven by header.js; the fade-in runs on
   load. `prefers-reduced-motion` opts out of both.
   -------------------------------------------------------------------------- */
body.radico-page-fade { opacity: 0; transition: opacity .22s ease; }
@keyframes radico-fade-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: radico-fade-in .2s ease both; }
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  body.radico-page-fade { opacity: 1; transition: none; }
  .radico-audience-switch__knob { transition: none; }
}

/* ---- Bottom nav bar colour, per audience --------------------------------
   Figma draws the bar in Hippie Blue 100 on the Home office pages and in
   Akaroa 100 on the Business ones (2149:16927 and 2149:17143). The client
   asked for the Akaroa bar on Home office, so the two are swapped and each
   side of the switch gets its own colour.

   Elementor writes the container's background as
   `.elementor-NNN .elementor-element-XXXX`, so naming the body's mode class
   alongside the bar's own class is what it takes to outrank it.
   -------------------------------------------------------------------------- */
body.radico-mode-homeoffice .radico-header__bottom {
  background-color: var(--radico-akaroa);
}
body.radico-mode-business .radico-header__bottom {
  background-color: var(--radico-hippie-100);
}

/* ---- Bottom nav menu ----------------------------------------------------
   Spacing (50px) and typography come from the widget's own controls; these
   only remove Elementor's default item padding and underline treatment.
   -------------------------------------------------------------------------- */
.radico-header__bottom .elementor-nav-menu a.elementor-item {
  padding: 0;
}

.radico-header__bottom .elementor-nav-menu--main .elementor-item:focus,
.radico-header__bottom .elementor-nav-menu--main .elementor-item:hover {
  background: transparent;
}

/* ==========================================================================
   Header controls — search overlay, mega panel, compare/wishlist, mini cart
   ========================================================================== */
/* Every slot in the icon row is the same 24px box with its contents centred:
   the compare control carries a count and the cart a badge, so left to
   themselves the boxes are different heights and the glyphs sit at different
   baselines. */
.radico-header__tabs > * {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}
.radico-header__icon {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  text-decoration: none;
  line-height: 0;
}
.radico-header__icon img,
.radico-header__tabs img {
  display: block;
  width: 24px;
  height: 24px;
}
.radico-list-count,
.radico-header__compare .radico-list-count {
  font: var(--radico-fw-light) 16px/1 var(--radico-font);
  color: var(--radico-space-950);
}
.radico-header__compare p { margin: 0; }

/* --- Search overlay -------------------------------------------------------
   A sheet that drops from under the navigation over a blurred page, rather
   than a full-screen takeover: the header stays visible and in place, so the
   overlay reads as part of it.
   -------------------------------------------------------------------------- */
/* The scrim starts where the header ends: the bar stays sharp and only the
   page below it is dimmed and blurred. */
.radico-search {
  position: fixed;
  top: var(--radico-search-top, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9000;
  background: rgba(11, 47, 65, .18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: radico-search-scrim .2s ease both;
}
.radico-search[hidden] { display: none; }
body.radico-search-open { overflow: hidden; }

@keyframes radico-search-scrim {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes radico-search-drop {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}

.radico-search__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  max-height: calc(100vh - var(--radico-search-top, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 40px 84px 48px;
  background: var(--radico-white);
  border-top: 1px solid var(--radico-space-200);
  box-shadow: 0 24px 48px rgba(11, 47, 65, .12);
  animation: radico-search-drop .22s ease both;
}
.radico-search__inner {
  max-width: var(--radico-content);
  margin-inline: auto;
}
.radico-search__close {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* The glyph is drawn rather than typed so it matches the icon set's weight. */
.radico-search__close::before,
.radico-search__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 1.5px;
  background: var(--radico-blue-950);
}
.radico-search__close::before { transform: rotate(45deg); }
.radico-search__close::after { transform: rotate(-45deg); }

.radico-search__form {
  display: flex;
  gap: 16px;
  align-items: stretch;
  border-bottom: 1px solid var(--radico-blue-950);
  padding-bottom: 16px;
}
/* hello-elementor's reset gives every input a border and a radius; the field
   is a bare line under the design's rule, so the element and its own class are
   both named to outrank it. */
.radico-search .radico-search__form input.radico-search__field,
.radico-search__field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  font: var(--radico-fw-light) 28px/1.2 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-search__field::-webkit-search-cancel-button { display: none; }
.radico-search__field::placeholder { color: var(--radico-space-400); }
.radico-search__field:focus { outline: 0; }
.radico-search__submit {
  flex: 0 0 auto;
  align-self: center;
  padding: 12px 28px;
  border: 0;
  background: var(--radico-blue-950);
  color: var(--radico-space-50);
  font: var(--radico-fw-bold) 16px/1.4 var(--radico-font);
  cursor: pointer;
}
.radico-search__submit:hover { background: var(--radico-blue-700); color: var(--radico-space-50); }

.radico-search__hint {
  margin: 24px 0 0;
  font: var(--radico-fw-light) 16px/1.5 var(--radico-font);
  color: var(--radico-space-500);
}

/* The cards are the mega panel's. The overlay is wider than the panel and the
   result count varies, so the columns are sized rather than counted: fewer
   results stay card-sized instead of stretching to half the screen. The media
   keeps the card's own ratio — a fixed height on a stretched column gave a
   letterbox. */
/* Named through the overlay: the element also carries
   `.radico-mega__products`, whose three-column rule sits later in this file
   and would otherwise win on source order. */
.radico-search .radico-search__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 32px 24px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.radico-search__list .radico-mega__card-name { font-size: 15px; }
.radico-search__list .radico-mega__card-price { font-size: 14px; }
.radico-search__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  text-decoration: none;
  padding: 8px;
  margin: -8px;
  border-radius: var(--radico-radius-xs);
  transition: background-color .15s;
}
.radico-search__item:hover { background: var(--radico-space-100); }
.radico-search__item img,
.radico-search__thumb {
  grid-row: 1 / span 2;
  width: 72px;
  height: 72px;
  object-fit: cover;
  background: var(--radico-space-100);
}
.radico-search__name {
  font: var(--radico-fw-bold) 16px/1.3 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-search__price {
  font: var(--radico-fw-light) 14px/1.5 var(--radico-font);
  color: var(--radico-space-500);
}

.radico-search__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--radico-space-200);
  list-style: none;
}
.radico-search__cats a {
  display: inline-block;
  padding: 8px 16px;
  background: var(--radico-space-100);
  font: var(--radico-fw-light) 14px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
  text-decoration: none;
}
.radico-search__cats a:hover { background: var(--radico-space-200); }
.radico-search__cats span { color: var(--radico-space-500); }

@media (prefers-reduced-motion: reduce) {
  .radico-search,
  .radico-search__panel { animation: none; }
}
@media (max-width: 1024px) {
  .radico-search__panel { padding: 32px 48px 40px; }
}
@media (max-width: 767px) {
  /* A phone has no room for a sheet under the header: the overlay covers the
     screen and carries the logo itself. */
  .radico-search { background: var(--radico-white); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .radico-search__panel {
    top: 0;
    bottom: 0;
    max-height: none;
    height: 100%;
    padding: 24px 24px 32px;
    border-top: 0;
    box-shadow: none;
  }
  .radico-search__field { font-size: 20px; }
  .radico-search__submit { padding: 10px 18px; }
}

/* --- Mega panel -----------------------------------------------------------
   Sub-links on the left with the "all" link in bold and a promo block beneath,
   a vertical rule, then a row of product cards — the structure the client's
   reference (branchfurniture.com) uses. Figma's header draws no mega menu.
   -------------------------------------------------------------------------- */
.radico-mega {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--radico-white);
  border-top: 1px solid var(--radico-space-200);
  box-shadow: 0 24px 48px rgba(11, 47, 65, .08);
  animation: radico-mega-drop .22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.radico-mega[hidden] { display: none; }
/* Drops from the top, under the row it belongs to. */
@keyframes radico-mega-drop {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
/* The links and cards settle a beat after the panel. */
.radico-mega__links a,
.radico-mega__card { transition: color .15s, opacity .15s, transform .2s ease; }
.radico-mega__card:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .radico-mega { animation: none; }
  .radico-mega__card { transition: none; }
}

.radico-mega__inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 44px;
  max-width: var(--radico-content);
  margin-inline: auto;
  padding: 40px 84px 48px;   /* 84 = the site's scaled section gutter */
}

/* With no products behind a category the cards column would be an empty half,
   so the sub-links spread across the panel instead. */
.radico-mega--links-only .radico-mega__inner {
  grid-template-columns: 1fr;
}
.radico-mega--links-only .radico-mega__col {
  padding-right: 0;
  border-right: 0;
}
.radico-mega--links-only .radico-mega__links {
  columns: 3;
  column-gap: 44px;
}
.radico-mega--links-only .radico-mega__links li {
  break-inside: avoid;
}
.radico-mega--links-only .radico-mega__links li + li { margin-top: 0; }
.radico-mega--links-only .radico-mega__links a {
  display: block;
  padding: 6px 0;
}
.radico-mega--links-only .radico-mega__promo {
  max-width: 340px;
}

/* The rule between the two halves, as in the reference. */
.radico-mega__col {
  padding-right: 44px;
  border-right: 1px solid var(--radico-space-200);
}

.radico-mega__links { list-style: none; margin: 0; padding: 0; }
.radico-mega__links li + li { margin-top: 12px; }
.radico-mega__links a {
  font: var(--radico-fw-light) 16px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
  text-decoration: none;
}
.radico-mega__links a:hover { color: var(--radico-blue-700); }
/* The "all" link closes the list in bold. */
.radico-mega__links-all a { font-weight: var(--radico-fw-bold); }

.radico-mega__promo {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--radico-space-200);
}
.radico-mega__promo-title {
  margin: 0 0 8px;
  font: var(--radico-fw-bold) 16px/1.3 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-mega__promo-text {
  margin: 0;
  font: var(--radico-fw-light) 14px/1.5 var(--radico-font);
  color: var(--radico-space-500);
}
.radico-mega__promo-link {
  display: inline-block;
  margin-top: 12px;
  font: var(--radico-fw-light) 14px/1.5 var(--radico-font);
  color: var(--radico-blue-700);
  text-decoration: underline;
}

/* --- Product cards -------------------------------------------------------- */
.radico-mega__products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-content: start;
}
.radico-mega__card { text-decoration: none; display: block; }
.radico-mega__card-media {
  position: relative;
  display: grid;
  place-items: center;
  /* Square, like the photographs themselves since the set was reprocessed.
     It was 2:3 when the stills were portrait; against a square still that box
     left a band of empty ground above and below every chair. */
  aspect-ratio: 1 / 1;
  background: var(--radico-space-100);
  overflow: hidden;
}
/* Contain, not cover: a square still fills a square box either way, and an
   older portrait photograph keeps its base instead of being cut. */
.radico-mega__card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.radico-mega__badge {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 10px;
  background: var(--radico-blue-950);
  color: var(--radico-space-50);
  font: var(--radico-fw-bold) 11px/1.4 var(--radico-font);
  letter-spacing: .04em;
}
.radico-mega__card-name {
  display: block;
  margin-top: 12px;
  font: var(--radico-fw-bold) 16px/1.3 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-mega__card-price {
  display: block;
  margin-top: 4px;
  font: var(--radico-fw-light) 14px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-mega__card-price del { color: var(--radico-space-400); margin-right: 6px; }
.radico-mega__card-price ins { text-decoration: none; }
.radico-mega__card-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.radico-stars {
  position: relative;
  display: inline-block;
  width: 92px;
  height: 15px;
  background: var(--radico-space-300);
  -webkit-mask: url("img/stars-5.svg") left center / contain no-repeat;
  mask: url("img/stars-5.svg") left center / contain no-repeat;
}
/* The mask clips the element AND its children, so the filled portion is just
   an overlay cut to the rating's percentage. */
.radico-stars::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--radico-stars, 0%);
  background: var(--radico-blue-950);
}

.radico-mega__card-reviews {
  font: var(--radico-fw-light) 13px/1.4 var(--radico-font);
  color: var(--radico-space-500);
  text-decoration: underline;
}

/* The open item, the hovered item and the current page all carry the short
   underline the reference uses. Elementor's nav widget has an underline
   pointer of its own, but it animates from the centre and spans the full item
   — this is the static rule under the word. */
.radico-header__bottom .elementor-nav-menu a.elementor-item {
  position: relative;
}
/* Elementor parks the pointer pseudo-element at opacity 0 with a (0,5,1)
   selector — `.elementor-item:not(:hover):not(:focus):not(.elementor-item-active
   ):not(.highlighted):after`. Naming the nav container as well as the list puts
   these at (0,5,2), which is what it takes to outrank it. */
.radico-header__bottom .elementor-nav-menu--main .elementor-nav-menu .radico-has-mega.is-mega-open > a.elementor-item::after,
.radico-header__bottom .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover::after,
.radico-header__bottom .elementor-nav-menu--main .elementor-nav-menu .current-menu-item > a.elementor-item::after,
.radico-header__bottom .elementor-nav-menu--main .elementor-nav-menu .current_page_item > a.elementor-item::after,
.radico-header__bottom .elementor-nav-menu--main .elementor-nav-menu .current-menu-ancestor > a.elementor-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  /* Elementor's nav pointer styles own ::after and park it at opacity 0. */
  opacity: 1;
  transform: none;
}

@media (max-width: 1024px) {
  .radico-mega__inner { grid-template-columns: 1fr; gap: 32px; }
  .radico-mega__col { padding-right: 0; border-right: 0; }
  .radico-mega__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .radico-mega { display: none; }   /* the mobile menu carries the links */
}

/* --- Header at tablet and phone ------------------------------------------
   Figma only draws the 1920 header. At 390 the three groups (switch, logo,
   icons) total more than the line, so each one wrapped onto a row of its own
   and the icons then wrapped one per line. Here the logo and the icons share
   the first line and the audience switch takes the second.
   -------------------------------------------------------------------------- */
/* Elementor only stores the desktop value of the width control, so below the
   desktop breakpoint every one of these containers falls back to the default
   `--width: 100%` and each icon claims a line of its own. */
@media (max-width: 1024px) {
  /* The three groups do not fit one line at 834 and, without wrapping, they
     ran 34px past the viewport and scrolled the whole site sideways. */
  .radico-header__top {
    flex-wrap: wrap;
    row-gap: 12px;
    padding: 20px 24px;
  }
  .radico-header__tabs { gap: 20px; }
  .radico-header__logo,
  .radico-header__switch,
  .radico-header__tabs,
  .radico-header__tabs > * {
    --width: auto;
    width: auto;
    flex: 0 0 auto;
  }
}

/* --- Mobile menu ----------------------------------------------------------
   Elementor's dropdown is an unstyled box sized to its longest item. The
   design has no mobile frame, so it becomes a full-width sheet under the bar
   with the same type and hairlines as the rest of the site.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* The bar is the dropdown's containing block, and the header must not clip
     it. */
  .radico-header { position: relative; z-index: 900; overflow: visible; }
  .radico-header__bottom { position: relative; }
  /* Elementor's nav widget is `position: relative`, so an absolute dropdown
     resolves against the 42px toggle rather than the bar. */
  .radico-header__bottom .elementor-widget-nav-menu { position: static; }

  /* The trigger sits at the end of the bar, not in the middle of it. */
  .radico-header__bottom { justify-content: flex-end; padding-inline: 20px; }
  .radico-header__bottom .elementor-menu-toggle {
    margin-inline: 0 0;
    padding: 8px;
    border-radius: 0;
    background: none;
    color: var(--radico-blue-950);
  }
  .radico-header__bottom .elementor-menu-toggle svg { width: 26px; height: 26px; }

  .radico-header__bottom .elementor-nav-menu--dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    /* Above the page: the hero paints over an unlayered dropdown. */
    z-index: 950;
    width: 100%;
    max-width: none;
    padding: 8px 20px 16px;
    background: var(--radico-white);
    border-top: 1px solid var(--radico-space-200);
    box-shadow: 0 18px 32px rgba(11, 47, 65, .08);
  }
  .radico-header__bottom .elementor-nav-menu--dropdown li { display: block; }
  .radico-header__bottom .elementor-nav-menu--dropdown li + li {
    border-top: 1px solid var(--radico-space-200);
  }
  .radico-header__bottom .elementor-nav-menu--dropdown a.elementor-item {
    display: block;
    padding: 16px 0;
    font: var(--radico-fw-light) 18px/1.4 var(--radico-font);
    color: var(--radico-blue-950);
    background: none;
  }
  /* The mega panel never opens on touch, so its underline would sit on every
     item at once. */
  .radico-header__bottom .elementor-nav-menu--dropdown a.elementor-item::after {
    content: none;
  }

  /* Each mega item carries its own disclosure and an inline sub-list. */
  .radico-header__bottom .elementor-nav-menu--dropdown li.has-submenu {
    position: relative;
  }
  .radico-submenu-toggle {
    position: absolute;
    top: 8px;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: var(--radico-chevron-down) center / 16px 16px no-repeat;
    cursor: pointer;
    transition: transform .2s ease;
  }
  li.is-open > .radico-submenu-toggle { transform: rotate(180deg); }

  .radico-submenu {
    margin: 0 0 12px;
    padding: 0 0 0 16px;
    border-left: 1px solid var(--radico-space-200);
  }
  .radico-submenu[hidden] { display: none; }
  .radico-submenu a {
    display: block;
    padding: 10px 0;
    font: var(--radico-fw-light) 16px/1.4 var(--radico-font);
    color: var(--radico-blue-950);
    text-decoration: none;
  }
  .radico-submenu a.radico-submenu__all {
    font-weight: var(--radico-fw-bold);
  }
}

@media (max-width: 767px) {
  .radico-header__top {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
  }
  .radico-header__logo { order: 1; }
  .radico-header__tabs { order: 2; gap: 16px; }
  .radico-header__switch {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
  }
  .radico-header__bottom { padding: 8px 20px; }
}

/* --- Mini cart ------------------------------------------------------------ */
/* Elementor's menu-cart ships its own bag icon; the design uses the RADICO
   glyph, so the widget's icon is replaced by the uploaded SVG as a mask. */
.radico-header__cart .elementor-button-icon i,
.radico-header__cart .elementor-button-icon svg {
  display: none;
}
.radico-header__cart .elementor-button-icon::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--radico-space-950);
  -webkit-mask: url("/wp-content/uploads/2026/09/icon-cart.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/09/icon-cart.svg") center / contain no-repeat;
}
.radico-header__cart .elementor-menu-cart__toggle .elementor-button {
  padding: 0;
  border: 0;
  background: none;
}
.radico-header__cart .elementor-button-text { display: none; }
.radico-header__cart .elementor-button-icon-qty {
  background: var(--radico-blue-950);
  color: var(--radico-space-50);
  font: var(--radico-fw-bold) 11px/1 var(--radico-font);
}

/* --- Compare / wishlist toggles ------------------------------------------ */
.radico-list-toggle {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: var(--radico-fw-light) 14px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-list-toggle::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--radico-space-500);
  transition: background-color .15s;
}
/* The glyph lives on the pseudo-element, but the button reset clears the
   button's own background on hover — which is what the mask paints through on
   the cart toggle and the header icons. */
.radico-header__icon:hover,
.radico-header__icon:focus,
.radico-cart-toggle:hover,
.radico-cart-toggle:focus { background-color: transparent; }
.radico-list-toggle--compare::before {
  -webkit-mask: url("/wp-content/uploads/2026/09/icon-compare.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/09/icon-compare.svg") center / contain no-repeat;
}
.radico-list-toggle--wishlist::before {
  -webkit-mask: url("/wp-content/uploads/2026/09/icon-heart.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/09/icon-heart.svg") center / contain no-repeat;
}
.radico-list-toggle.is-active::before,
.radico-list-toggle:hover::before { background-color: var(--radico-blue-950); }
/* With a label the control becomes a text button. */
.radico-list-toggle:not(:empty) {
  display: inline-flex;
  gap: 8px;
  width: auto;
  text-decoration: underline;
}

/* ==========================================================================
   Mini cart (Figma 2201:21708)
   A 685px panel from the right: heading over a hairline, one row per line
   (174x221 thumb, name/price, remove, stepper), then total and two buttons.
   ========================================================================== */
:root {
  --radico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --radico-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --radico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* --- Header button -------------------------------------------------------- */
.radico-cart-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.radico-cart-toggle__icon {
  width: 24px;
  height: 24px;
  background-color: var(--radico-space-950);
  -webkit-mask: url("/wp-content/uploads/2026/09/icon-cart.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/09/icon-cart.svg") center / contain no-repeat;
}
.radico-cart-toggle__count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radico-radius-full);
  background: var(--radico-blue-950);
  color: var(--radico-space-50);
  font: var(--radico-fw-bold) 11px/16px var(--radico-font);
  text-align: center;
}
.radico-cart-toggle__count[hidden] { display: none; }

/* --- Panel ---------------------------------------------------------------- */
.radico-minicart { position: fixed; inset: 0; z-index: 10001; }
.radico-minicart[hidden] { display: none; }
.radico-minicart__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 47, 65, .45);
}
.radico-minicart__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: min(685px, 100%);
  padding: 42px;
  background: var(--radico-white);
  font-family: var(--radico-font);
  overflow-y: auto;
}

.radico-minicart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--radico-space-100);
}
.radico-minicart__title {
  margin: 0;
  font-size: 32px;
  font-weight: var(--radico-fw-bold);
  line-height: 1.1;
  color: var(--radico-blue-950);
}
.radico-minicart__close {
  width: 32px;
  height: 32px;
  border: 0;
  background-color: var(--radico-blue-950);
  cursor: pointer;
  -webkit-mask: var(--radico-x) center / 24px 24px no-repeat;
  mask: var(--radico-x) center / 24px 24px no-repeat;
}

/* --- Lines ---------------------------------------------------------------- */
.radico-minicart__items {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 0;
  overflow-y: auto;
}
.radico-minicart__row {
  display: flex;
  align-items: center;
  gap: 32px;
}
/* The box took a fixed 221px, so a squarer photograph sat in a band of grey
   top and bottom. It follows the image's own height now. */
.radico-minicart__thumb {
  flex: 0 0 174px;
  align-self: flex-start;
  display: grid;
  place-items: center;
  background: var(--radico-nevada-200, #e4e6e7);
}
.radico-minicart__thumb img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.radico-minicart__body {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.radico-minicart__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.radico-minicart__copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.radico-minicart__name {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--radico-blue-950);
  text-decoration: none;
}
.radico-minicart__price {
  font-size: 20px;
  font-weight: var(--radico-fw-bold);
  line-height: 1.5;
  color: var(--radico-blue-950);
}
.radico-minicart__remove {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 0;
  background-color: var(--radico-space-500);
  cursor: pointer;
  -webkit-mask: var(--radico-trash) center / 18px 20px no-repeat;
  mask: var(--radico-trash) center / 18px 20px no-repeat;
}
.radico-minicart__remove:hover { background-color: var(--radico-blue-950); }

.radico-minicart__qty {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 16px;
  background: var(--radico-space-100);
}
.radico-minicart__step {
  width: 20px;
  height: 20px;
  border: 0;
  background-color: var(--radico-blue-950);
  cursor: pointer;
}
.radico-minicart__step--minus {
  -webkit-mask: var(--radico-minus) center / contain no-repeat;
  mask: var(--radico-minus) center / contain no-repeat;
}
.radico-minicart__step--plus {
  -webkit-mask: var(--radico-plus) center / contain no-repeat;
  mask: var(--radico-plus) center / contain no-repeat;
}
.radico-minicart__count {
  min-width: 8px;
  font-size: 18px;
  font-weight: var(--radico-fw-light);
  line-height: 1.4;
  color: var(--radico-blue-950);
  text-align: center;
}

.radico-minicart__empty {
  font: var(--radico-fw-light) 18px/1.4 var(--radico-font);
  color: var(--radico-space-500);
}

/* --- Footer --------------------------------------------------------------- */
.radico-minicart__foot { display: flex; flex-direction: column; gap: 42px; }
.radico-minicart__total {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  font-size: 24px;
  line-height: 1.1;
  color: var(--radico-blue-950);
}
.radico-minicart__total-label { font-weight: 400; }
.radico-minicart__total-value { font-weight: var(--radico-fw-bold); }
.radico-minicart__total .amount { font-weight: inherit; }

.radico-minicart__actions { display: flex; gap: 16px; }
.radico-minicart__btn {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 16px 24px;
  font: var(--radico-fw-bold) 16px/1.4 var(--radico-font);
  text-align: center;
  text-decoration: none;
}
.radico-minicart__btn--secondary {
  background: var(--radico-space-100);
  color: var(--radico-blue-950);
}
.radico-minicart__btn--primary {
  background: var(--radico-blue-950);
  color: var(--radico-space-50);
}

@media (max-width: 767px) {
  .radico-minicart__panel { padding: 24px; }
  .radico-minicart__title { font-size: 24px; }
  .radico-minicart__row { gap: 16px; }
  .radico-minicart__thumb { flex-basis: 108px; }
  .radico-minicart__name,
  .radico-minicart__price { font-size: 16px; }
  .radico-minicart__actions { flex-direction: column; }
}


/* ==========================================================================
   Mini cart — motion and button colours
   The panel slides in from the right and back out. Its two buttons are
   <a>/<button> elements, so the global reset's `color: inherit` on hover was
   erasing the dark button's white label.
   ========================================================================== */
.radico-minicart__panel { transition: transform .3s ease; }
.radico-minicart:not(.is-open) .radico-minicart__panel { transform: translateX(100%); }
.radico-minicart.is-open .radico-minicart__panel { transform: none; }

.radico-minicart__scrim { transition: opacity .3s ease; }
.radico-minicart:not(.is-open) .radico-minicart__scrim { opacity: 0; }
.radico-minicart.is-open .radico-minicart__scrim { opacity: 1; }

body.radico-cart-open { overflow: hidden; }

/* Both buttons are anchors, so the global reset's `color: inherit` on hover
   was erasing the dark button's white label. */
.radico-minicart__btn--primary,
.radico-minicart__btn--primary:hover,
.radico-minicart__btn--primary:focus {
  background: var(--radico-blue-950);
  color: var(--radico-space-50);
}
.radico-minicart__btn--primary:hover { background: var(--radico-blue-700); }
.radico-minicart__btn--secondary,
.radico-minicart__btn--secondary:hover,
.radico-minicart__btn--secondary:focus {
  background: var(--radico-space-100);
  color: var(--radico-blue-950);
}
.radico-minicart__btn--secondary:hover { background: var(--radico-space-200); }
.radico-minicart__btn { transition: background-color .15s; }

@media (prefers-reduced-motion: reduce) {
  .radico-minicart__panel,
  .radico-minicart__scrim { transition: none; }
}

/* --- Mobile bar: switch left, burger right ---------------------------------
   header.js moves the audience switch into this bar below 1024 so the two
   controls share one line instead of stacking. The order is stated here.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .radico-header__bottom {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .radico-header__bottom .radico-header__switch {
    order: 1;
    flex: 0 0 auto;
    --width: auto;
    width: auto;
    justify-content: flex-start;
    margin: 0;
  }
  .radico-header__bottom .elementor-widget-nav-menu {
    order: 2;
    margin-left: auto;
  }

  /* The menu covers the page rather than pushing it: a sheet anchored under
     the bar left the content visible behind a half-height panel. */
  /* Elementor writes `top` and an animated `max-height` inline on this
     element, so the sheet's geometry has to be stated with `!important` or it
     opens 10px down and 0px tall. */
  .radico-header__bottom .elementor-nav-menu--dropdown {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 9500;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow-y: auto;
    /* The sheet carries its own logo now, so it needs only its own inset. */
    padding: 28px 24px 40px;
    background: var(--radico-white);
    box-shadow: none;
    /* Elementor slides this open by animating max-height, which the fixed
       height above turns into a jump. A fade is calmer and does not move the
       list under the reader. */
    /* Elementor's own `hide-scroll` keyframes otherwise win here. */
    animation: radico-sheet-in .16s ease-out both !important;
  }
  /* Barely a fade — the sheet is already full-bleed, so a long one reads as a
     lag rather than a transition. */
  @keyframes radico-sheet-in {
    from { opacity: .55; }
    to { opacity: 1; }
  }
  /* The close control sits in the sheet's own top-right corner rather than
     wherever the bar happens to leave it — it was landing on the first menu
     row. */
  body.radico-menu-open .radico-header__bottom .elementor-menu-toggle {
    position: fixed;
    top: 40px;
    right: 20px;
    z-index: 9600;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
  }
  .radico-header__bottom .elementor-menu-toggle {
    position: relative;
    z-index: 9600;
  }
  body.radico-menu-open { overflow: hidden; }
}

/* Below 768 the switch keeps its own full-width row no longer — it is in the
   bar with the burger. */
@media (max-width: 767px) {
  .radico-header__bottom .radico-header__switch {
    flex: 0 0 auto;
    justify-content: flex-start;
  }
}

/* --- Mobile menu footer ----------------------------------------------------
   Elementor's dropdown is only the list, so header.js appends a way onward:
   a button through to the shop and the controls the top bar carries.
   -------------------------------------------------------------------------- */
.radico-mobilenav__extras {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--radico-space-200);
}
/* The theme's own link colour reaches this anchor, so the label is stated with
   the element in the selector — it was rendering dark on the dark button. */
a.radico-mobilenav__cta,
.radico-mobilenav__cta {
  display: grid;
  place-items: center;
  min-height: 56px;
  padding: 14px 24px;
  border-radius: 4px;
  background: var(--radico-blue-950);
  font: var(--radico-fw-bold) 16px/1.4 var(--radico-font);
  color: #fff;
  text-decoration: none;
  transition: background .15s;
}
a.radico-mobilenav__cta:hover,
a.radico-mobilenav__cta:focus-visible { color: #fff; }
.radico-mobilenav__cta:hover,
.radico-mobilenav__cta:focus-visible { background: var(--radico-blue-700, #194960); }

/* Five across on one line: `auto-fit` with an 88px floor broke them 4 + 1. */
.radico-mobilenav__icons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-top: 24px;
}
.radico-mobilenav__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  font: var(--radico-fw-light) 12px/1.3 var(--radico-font);
  color: var(--radico-blue-950);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.radico-mobilenav__icon:hover { background: var(--radico-space-100); }
/* The glyph is painted through a mask, like the header's own icons. */
.radico-mobilenav__glyph {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--radico-blue-950);
}
.radico-mobilenav__icon--search .radico-mobilenav__glyph {
  -webkit-mask: url("/wp-content/uploads/2026/09/icon-search.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/09/icon-search.svg") center / contain no-repeat;
}
.radico-mobilenav__icon--compare .radico-mobilenav__glyph {
  -webkit-mask: url("/wp-content/uploads/2026/09/icon-compare.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/09/icon-compare.svg") center / contain no-repeat;
}
.radico-mobilenav__icon--cart .radico-mobilenav__glyph {
  -webkit-mask: url("/wp-content/uploads/2026/09/icon-cart.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/09/icon-cart.svg") center / contain no-repeat;
}
.radico-mobilenav__icon--heart .radico-mobilenav__glyph {
  -webkit-mask: url("/wp-content/uploads/2026/09/icon-heart.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/09/icon-heart.svg") center / contain no-repeat;
}
.radico-mobilenav__icon--user .radico-mobilenav__glyph {
  -webkit-mask: url("/wp-content/uploads/2026/09/icon-user.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/09/icon-user.svg") center / contain no-repeat;
}

/* --- Sticky header ---------------------------------------------------------
   The bar follows the page. On scroll the white row tightens — less padding, a
   smaller mark — so the navigation gives the page back some height. header.js
   adds `is-stuck` past 24px.
   -------------------------------------------------------------------------- */
header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 950;
}
/* The admin bar is fixed over the top of the viewport for logged-in users. */
body.admin-bar header.elementor-location-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar header.elementor-location-header { top: 46px; }
}

.radico-header__top,
.radico-header__bottom {
  transition: padding .25s ease;
}
.radico-header__logo img {
  transition: height .25s ease, width .25s ease;
}

.radico-header.is-stuck .radico-header__top {
  padding-top: 14px;
  padding-bottom: 14px;
}
.radico-header.is-stuck .radico-header__bottom {
  padding-top: 12px;
  padding-bottom: 12px;
}
.radico-header.is-stuck .radico-header__logo img {
  height: 26px;
  width: auto;
}
/* A hairline once the bar is over content, so it separates from the page. */
.radico-header.is-stuck {
  box-shadow: 0 1px 0 rgba(11, 47, 65, .08);
}

@media (prefers-reduced-motion: reduce) {
  .radico-header__top,
  .radico-header__bottom,
  .radico-header__logo img { transition: none; }
}

/* The sheet's mark — cloned into the dropdown by arrangeMobileHeader(). */
.radico-menu-logo {
  display: block;
  margin: 0 0 48px;
  line-height: 0;
}
.radico-menu-logo img {
  height: 26px;
  width: auto;
}
@media (prefers-reduced-motion: reduce) {
  .radico-header__bottom .elementor-nav-menu--dropdown { animation: none; }
}

/* --- Mobile menu: the bar behind the sheet --------------------------------
   The sheet carries its own mark and its own controls, so the header's row
   underneath printed a second logo through the top of it. It is hidden for as
   long as the menu is open; the toggle stays, since it is the way out.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body.radico-menu-open .radico-header__top,
  body.radico-menu-open .radico-header__bottom .radico-header__switch {
    opacity: 0;
    pointer-events: none;
  }
  /* More air between the mark and the first row of the menu. */
  .radico-menu-logo { margin-bottom: 48px; }
}