/* Header, ported from Webzi header v60. Webzi-only rules (widget bridges, editor guards, box byte limits) are gone. */

/* 1. Variables */
.ree-hdr{
  --bg: var(--ree-bg);
  --ink: var(--ree-text);
  --blue: var(--ree-blue);
  --line: rgba(26,26,26,.10);

  --h: calc(4.75*var(--u));
  --logo-h: calc(1.25*var(--u));
  --pad: clamp(calc(1*var(--u)), calc(.5*var(--u) + 2vw), calc(2.5*var(--u)));
  --maxw: 1440px;

  /* Sticky instead of Webzi's fixed + measured spacer: the page flows under it with no JS.
     WordPress sets --wp-admin--admin-bar--height when the admin bar is visible. */
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 1000;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ree-font-body);
  box-sizing: border-box;
  transition: box-shadow .2s ease;
}
/* Below 600px the admin bar scrolls away, so the header sticks to the very top. */
@media(max-width:600px){ .ree-hdr{ top: 0 } }

.ree-hdr *{ box-sizing: border-box }

@media(min-width:1181px){
  .ree-hdr{ --logo-h: calc(1.625*var(--u)) }
  .ree-hdr .ree-hdr__logo{ padding-block: 0 }
}

.ree-hdr.is-scrolled{ box-shadow: 0 4px 18px rgba(0,0,0,.06) }

.ree-hdr::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

/* 2. Main bar */
.ree-hdr__bar{
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  min-height: var(--h);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: calc(.5*var(--u));
}
.ree-hdr__bar--mobile{ display: none }

.ree-hdr__nav{
  justify-self: start;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(calc(.94*var(--u)), calc(.3*var(--u) + 1vw), calc(1.56*var(--u)));
  white-space: nowrap;
}

.ree-hdr__item{ position: relative; display: flex; align-items: center }

.ree-hdr__link,
.ree-hdr__navbtn{
  position: relative;
  border: 0;
  background: transparent;
  padding: calc(.25*var(--u)) 0;
  margin: 0;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(calc(.94*var(--u)), calc(.72*var(--u) + .3vw), calc(1.05*var(--u)));
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
  transition: color .18s ease;
}

/* Underline instead of bold, so neighbours don't jump on hover */
.ree-hdr__link::after,
.ree-hdr__navbtn::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .18s ease;
}
.ree-hdr__link:hover,
.ree-hdr__link.is-current,
.ree-hdr__item:hover .ree-hdr__navbtn{ color: var(--blue) }

.ree-hdr__link:hover::after,
.ree-hdr__link.is-current::after,
.ree-hdr__item:hover .ree-hdr__navbtn::after{ transform: scaleX(1) }

/* Separate block: in old browsers an unknown :has() voids the whole rule */
.ree-hdr__item:has(:focus-visible) .ree-hdr__navbtn{ color: var(--blue) }
.ree-hdr__item:has(:focus-visible) .ree-hdr__navbtn::after{ transform: scaleX(1) }

.ree-hdr__chev{
  display: inline-block;
  margin-inline-start: calc(.25*var(--u));
  font-family: Arial, sans-serif;
  font-size: .65em;
  transition: transform .18s ease;
}
.ree-hdr__item:hover .ree-hdr__chev{ transform: rotate(180deg) }
.ree-hdr__item:has(:focus-visible) .ree-hdr__chev{ transform: rotate(180deg) }

/* Desktop submenu: CSS only */

/* Invisible bridge so hover isn't lost in the gap between button and submenu */
.ree-hdr__item::after{
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: calc(.75*var(--u));
}

.ree-hdr__sub{
  position: absolute;
  top: calc(100% + .75 * var(--u));
  right: 0;
  min-width: calc(11.9*var(--u));
  padding: calc(.8*var(--u));
  background: #fff;
  border: 1px solid rgba(26,26,26,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.11);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index: 20;
}
.ree-hdr__item:hover .ree-hdr__sub{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
/* Keyboard focus only: a mouse click must not keep the menu open */
.ree-hdr__item:has(:focus-visible) .ree-hdr__sub{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
/* Wide touch devices: open on tap */
@media(hover:none){
  .ree-hdr__item:focus-within .ree-hdr__sub{
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
}
.ree-hdr__sub a{
  display: block;
  padding: calc(.56*var(--u)) calc(.5*var(--u));
  color: #2A2A2A;
  text-decoration: none;
  font-size: calc(.94*var(--u));
  line-height: 1.65;
  font-weight: 500;
  border-radius: 2px;
  white-space: nowrap;
}
.ree-hdr__sub a:hover,
.ree-hdr__sub a:focus-visible{ color: var(--blue); background: #F3F3F3 }

/* Info links under "More", set apart from product categories (as in the mobile drawer) */
.ree-hdr__sep{
  display: block;
  height: 1px;
  margin: calc(.4*var(--u)) calc(.5*var(--u));
  background: var(--line);
}
.ree-hdr__sub a.ree-hdr__meta{ color: #6A6A6A; font-size: calc(.875*var(--u)) }
.ree-hdr__sub a.ree-hdr__meta:hover,
.ree-hdr__sub a.ree-hdr__meta:focus-visible{ color: var(--blue) }

/* Logo */
.ree-hdr__logo{
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: calc(.25*var(--u));
}
.ree-hdr__logo img{
  height: var(--logo-h);
  width: auto;
  /* The J's tail stretches the image box downwards; this shift centres the capitals
     (not the box) on the icons. It scales with the height, so leave it alone. */
  transform: translateY(calc(var(--logo-h) * .12));
  max-width: min(calc(14*var(--u)), 38vw);
  object-fit: contain;
  display: block;
}

/* Tools */
.ree-hdr__tools{
  justify-self: end;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(calc(.75*var(--u)), calc(.3*var(--u) + .75vw), calc(1.25*var(--u)));
  white-space: nowrap;
}
.ree-hdr__tools > a:not(.ree-hdr__icon){
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(calc(.82*var(--u)), calc(.66*var(--u) + .22vw), calc(.91*var(--u)));
  line-height: 1.2;
  font-weight: 500;
  transition: color .18s ease;
}
.ree-hdr__tools > a:not(.ree-hdr__icon):hover{ color: var(--blue) }

.ree-hdr__icon{
  text-decoration: none;
  width: calc(2.75*var(--u));
  height: calc(2.75*var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  transition: color .18s ease, background .18s ease;
}
/* Icon hover = text hover: colour only. The media query stops hover sticking after a tap. */
@media(hover:hover) and (pointer:fine){
  .ree-hdr__icon:hover{ color: var(--blue) }
  .ree-hdr.is-auth .ree-js-account:hover,
  .ree-hdr__icon.has-items:hover,
  .ree-hdr__searchwrap[open] .ree-hdr__searchbtn:hover{ color: var(--ree-blue-hover) }
  .ree-hdr__icon.has-items:hover .ree-hdr__count{ color: var(--ree-blue-hover) }
}
/* Phosphor Light icons (inc/icons.php): filled shapes, so size alone sets their weight. */
.ree-hdr__icon svg{ width: 26px; height: 26px; display: block }

/* "Active" = solid blue (account: logged in, cart: has items).
   Active hover is a darker blue, otherwise it vanishes into the blue. */
/* svg.… so these beat «.ree-hdr__icon svg{display:block}» above. */
.ree-hdr__icon svg.ree-ico-solid{ display: none }
.ree-hdr.is-auth .ree-js-account svg.ree-ico-line,
.ree-hdr__icon.has-items svg.ree-ico-line{ display: none }
.ree-hdr.is-auth .ree-js-account svg.ree-ico-solid,
.ree-hdr__icon.has-items svg.ree-ico-solid{ display: block }
.ree-hdr.is-auth .ree-js-account,
.ree-hdr__icon.has-items,
.ree-hdr__searchwrap[open] .ree-hdr__searchbtn{ color: var(--blue) }

/* Search open: blue only (a filled magnifier looks like a lollipop). */

/* Cart count: above the icon, no bubble. The button width stays fixed. */
.ree-hdr__count{
  position: absolute;
  top: 0;
  left: calc(.3*var(--u));
  display: none;
  font-family: var(--ree-font-body);
  font-size: calc(.82*var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.ree-hdr__icon.has-items .ree-hdr__count{ display: block }

/* Search: opening is CSS too (<details>) */
.ree-hdr__searchwrap{ position: static; display: flex; align-items: center }
.ree-hdr__searchbtn{ list-style: none }
.ree-hdr__searchbtn::-webkit-details-marker{ display: none }
.ree-hdr__searchbtn::marker{ content: "" }
.ree-hdr__search{
  position: absolute;
  top: 100%;
  left: var(--pad);
  width: min(calc(23*var(--u)), calc(100vw - 3.5 * var(--u)));
  padding: 0;
  background: #fff;
  border: 1px solid rgba(26,26,26,.22);
  box-shadow: 0 16px 38px rgba(0,0,0,.10);
  z-index: 15;
}
.ree-hdr__search form{ display: flex; gap: 0 }
/* Only one frame: the panel itself. The field inside stays borderless. */
.ree-hdr__search:focus-within{ border-color: var(--blue) }
.ree-hdr__search input:focus-visible{ outline: none }
.ree-hdr__search input[type="search"]{
  flex: 1; min-width: 0;
  border: 0;
  background: #fff;
  outline: none;
  padding: calc(.75*var(--u)) calc(.9*var(--u));
  font-family: inherit;
  font-size: calc(.82*var(--u));
}
.ree-hdr__search button{
  border: 0;
  flex: none;
  background: var(--blue);
  color: #fff;
  padding-inline: calc(1.4*var(--u));
  font-family: inherit;
  font-size: calc(.75*var(--u));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(.45*var(--u));
  transition: background .18s ease, box-shadow .18s ease;
}
.ree-hdr__search button svg{
  width: calc(1.05*var(--u)); height: calc(1.05*var(--u));
  flex: 0 0 auto;
}

/* Under 700 the panel goes full width but the button didn't grow (only 12.6% of the panel at 700).
   Must come after the rule above or it loses on equal specificity. */
@media(max-width:700px){
  .ree-hdr__search button{
    font-size: calc(.88*var(--u));
    padding-inline: calc(2.1*var(--u));
  }
  .ree-hdr__search button svg{
    width: calc(1.15*var(--u)); height: calc(1.15*var(--u));
  }
}
.ree-hdr__search button:hover,
.ree-hdr__search button:focus-visible{
  background: var(--ree-blue-hover);
  box-shadow: 0 3px 10px rgba(36,59,143,.22);
}

/* 3. Mobile bar */
@media(max-width:1180px){
  .ree-hdr__bar--desktop{ display: none }
  .ree-hdr__bar--mobile{ display: grid; grid-template-columns: 1fr auto 1fr }
  .ree-hdr__mstart{ justify-self: start; display: flex; align-items: center; gap: calc(.15*var(--u)) }

  /* Mobile search: full width under the header */
  .ree-hdr__bar--mobile .ree-hdr__search{
    left: var(--pad);
    right: var(--pad);
    width: auto;
  }

  /* 16px on purpose: iPhone Safari zooms into any field with a smaller font while typing. */
  .ree-hdr__bar--mobile .ree-hdr__search input[type="search"]{ font-size: 16px }
  .ree-hdr__mend{ justify-self: end; display: flex; align-items: center; gap: calc(.15*var(--u)) }
  .ree-hdr__icon{ width: calc(2.4*var(--u)); height: calc(2.4*var(--u)) }
  .ree-hdr__count{ font-size: calc(.78*var(--u)) }
  /* This range runs up to 1180 (tablets too), hence 26 not 24. */
  .ree-hdr__icon svg{ width: 25px; height: 25px }

  .ree-hdr__logo{ padding-block: 0 }
  .ree-hdr__logo img{ max-width: min(calc(10*var(--u)), 42vw) }
}

/* On tablets a full-width field is pointless; the panel opens from the right with a capped width. */
@media(min-width:701px) and (max-width:1180px){
  .ree-hdr__bar--mobile .ree-hdr__search{
    left: auto;
    right: var(--pad);
    width: min(calc(30*var(--u)), calc(100vw - 2*var(--pad)));
  }
}

/* 4. Mobile drawer */
/* Drawer switch, no JS */
.ree-toggle{
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
/* Lock background scroll while the drawer is open. The scrollbar gutter is always
   reserved, otherwise the page shifts sideways when the scrollbar disappears. */
html{ scrollbar-gutter: stable }
html:has(.ree-toggle:checked){
  overflow: hidden;
  padding-right: var(--ree-sbw, 0px);
}

#ree-layer{
  position: fixed;
  inset: 0;
  z-index: 1010;
  pointer-events: none;
  visibility: hidden;
}
.ree-toggle:checked ~ #ree-layer{ pointer-events: auto; visibility: visible }

#ree-layer .ree-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.28);
  opacity: 0;
  transition: opacity .24s ease;
  cursor: pointer;
}
.ree-toggle:checked ~ #ree-layer .ree-backdrop{ opacity: 1 }

#ree-layer .ree-drawer{
  position: absolute;
  top: 0; bottom: 0; right: 0;     /* no viewport units, so the height doesn't jump with mobile toolbars */
  width: min(80vw, calc(18.75*var(--u)));
  overflow: auto;
  overscroll-behavior: contain;
  background: #F4F4F2;
  padding: calc(1.06*var(--u)) calc(1.13*var(--u)) calc(1.75*var(--u));
  transform: translateX(102%);
  transition: transform .29s cubic-bezier(.22,.61,.36,1);
  box-shadow: -12px 0 35px rgba(0,0,0,.10);
  direction: rtl;
  font-family: var(--ree-font-body);
  color: var(--ree-text);
}
.ree-toggle:checked ~ #ree-layer .ree-drawer{ transform: translateX(0) }

#ree-layer .ree-drawer-head{
  min-height: calc(2.6*var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(.8*var(--u));
  border-bottom: 1px solid rgba(26,26,26,.10);
}
#ree-layer .ree-drawer-head img{
  height: calc(3.25*var(--u)); width: auto;
  max-width: calc(9*var(--u)); object-fit: contain;
}
#ree-layer .ree-close{
  width: calc(2.25*var(--u)); height: calc(2.25*var(--u));
  padding: 0; border: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--ree-text);
}
#ree-layer .ree-close svg{
  width: calc(1.4*var(--u)); height: calc(1.4*var(--u));
}

/* Accordion with plain <details> */
#ree-layer .ree-acc{ border-bottom: 1px solid rgba(26,26,26,.08) }

#ree-layer .ree-accbtn{
  width: 100%;
  min-height: calc(3*var(--u));
  padding: calc(.5*var(--u)) calc(.12*var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(.5*var(--u));
  color: var(--ree-text);
  font-size: calc(.875*var(--u));
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
#ree-layer .ree-accbtn::-webkit-details-marker{ display: none }
#ree-layer .ree-accbtn::marker{ content: "" }

#ree-layer .ree-plus{
  font-family: Arial, sans-serif;
  font-size: calc(1.25*var(--u));
  font-weight: 300;
  color: #555;
  line-height: 1;
}
#ree-layer .ree-plus::before{ content: "+" }
#ree-layer .ree-acc[open] .ree-plus::before{ content: "−" }
#ree-layer .ree-acc[open] .ree-accbtn{ color: var(--ree-blue) }
#ree-layer .ree-acc[open] .ree-plus{ color: var(--ree-blue) }

/* Touch feedback while pressing, not after. Hover sticks on touch, so it is mouse-only. */
#ree-layer .ree-mlink:active,
#ree-layer .ree-accbtn:active,
#ree-layer .ree-meta a:active,
#ree-layer .ree-panel-in a:active{ background: rgba(36,59,143,.07) }

@media(hover:hover){
  #ree-layer .ree-mlink:hover,
  #ree-layer .ree-accbtn:hover{ color: var(--ree-blue) }
}

#ree-layer .ree-mlink{
  width: 100%;
  min-height: calc(3*var(--u));
  padding: calc(.5*var(--u)) calc(.12*var(--u));
  border-bottom: 1px solid rgba(26,26,26,.08);
  display: flex;
  align-items: center;
  color: var(--ree-text);
  text-decoration: none;
  font-size: calc(.875*var(--u));
  font-weight: 500;
}
#ree-layer .ree-mlink.is-current{ color: var(--ree-blue) }

/* Info links, set apart from product categories */
#ree-layer .ree-meta{ margin-top: calc(1.25*var(--u)) }
#ree-layer .ree-meta a{
  display: flex; align-items: center;
  min-height: calc(2.4*var(--u));
  padding: 0 calc(.12*var(--u));
  color: #6A6A6A;
  text-decoration: none;
  font-size: calc(.78*var(--u));
}
#ree-layer .ree-meta a.is-current{ color: var(--ree-blue) }
@media(hover:hover){ #ree-layer .ree-meta a:hover{ color: var(--ree-blue) } }

#ree-layer .ree-panel-in{
  margin: calc(.31*var(--u)) 0 calc(.56*var(--u));
  padding: calc(.31*var(--u)) calc(.8*var(--u)) calc(.44*var(--u)) 0;
  border-right: 2px solid rgba(36,59,143,.25);
}
#ree-layer .ree-panel-in a{
  position: relative;
  display: block;
  padding: calc(.5*var(--u)) calc(.31*var(--u));
  color: #4A4A4A;
  text-decoration: none;
  font-size: calc(.82*var(--u));
  line-height: 1.65;
  transition: color .16s ease;
}
#ree-layer .ree-panel-in a::before{
  content: "";
  position: absolute;
  right: calc(-.8*var(--u) - 2px);   /* exactly on the vertical line beside the submenu */
  top: 0; bottom: 0;
  width: 2px;
  background: var(--ree-blue);
  transform: scaleY(.3);
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}
#ree-layer .ree-panel-in a:hover,
#ree-layer .ree-panel-in a:focus-visible,
#ree-layer .ree-panel-in a.is-current{ color: var(--ree-blue); font-weight: 600 }

#ree-layer .ree-panel-in a:hover::before,
#ree-layer .ree-panel-in a:focus-visible::before,
#ree-layer .ree-panel-in a.is-current::before{
  opacity: 1; transform: scaleY(1);
}

@media(min-width:1181px){ #ree-layer{ display: none !important } }

/* 5. Accessibility */
.ree-hdr :focus-visible,
#ree-layer :focus-visible{
  outline: 2px solid var(--blue, #243B8F);
  outline-offset: 2px;
}

@media(prefers-reduced-motion:reduce){
  .ree-hdr *, #ree-layer, #ree-layer *{ transition-duration: .01ms !important }
}