/** Shopify CDN: Minification failed

Line 1426:0 Unexpected "}"

**/
/* ==========================================================================
   Dailus Retail — site chrome
   Requires dailus-home.css (tokens + primitives).

   Figma sources:
     104:644  header bar          104:671  category nav row
     104:5253 desktop mega menu   104:5581 mobile menu (full screen)
     222:359  header bar (v2)     222:385  category nav row (v2)
     226:1549 mobile bar (v2)     104:1074 / 104:5670  mobile tab bar

   Desktop and mobile now live in ONE section (dr-header). The swap happens
   here, at 990px, rather than in two section-scoped style blocks.
   ========================================================================== */

:root {
  /* chrome palette — Instrument Sans layer, distinct from the page tokens */
  --dr-hd-ink: #1e1b20;
  --dr-hd-ink-2: #4a444e;
  --dr-hd-ink-3: #8d858f;
  --dr-hd-ink-4: #a79ea8;
  --dr-hd-line: #e7e3e0;
  --dr-hd-line-2: #efebe7;
  --dr-hd-field: #f4f1ee;
  --dr-hd-placeholder: #9a9299;
  --dr-hd-surface-alt: #fbfaf8;
  --dr-hd-accent: #2e7d5b;      /* nav active — the visible brand green; #14261f reads as black */
  --dr-hd-accent-2: #2e7d5b;    /* "ready to ship" highlight */
  --dr-hd-orange: #2e7d5b;      /* offers */
  --dr-hd-badge: #f98132;       /* cart badge — 222:383 */

  /* Header nav row and action labels are drawn in Teachers (222:385 / 222:366).
     It is a separate face from the Instrument Sans chrome used in the fields
     and badges, so it gets its own token rather than overloading --dr-chrome. */
  --dr-ui: "Teachers", "Instrument Sans", "Archivo", system-ui, sans-serif;

  /* One curve for the whole navigation, so the panel, the caret and the
     underline read as parts of a single gesture rather than three components
     that happen to move at the same time.

     It leaves gently instead of snapping off the mark, spends its speed in the
     middle and settles for a long time at the end. That long settle is the
     whole difference between "fast" and "considered" — a cubic-out starts at
     full speed, which is exactly the suddenness this replaces. */
  --dr-hd-ease: cubic-bezier(.32, .72, 0, 1);
}

/* ==========================================================================
   0. Breakpoint swap

   One section renders both bars, so exactly one of them has to be taken out of
   the layout at a time. Done with display rather than a media-query-driven
   reflow of a single markup set: the two bars share almost nothing — the
   desktop one is three columns with a centred logo and a 458px field, the
   mobile one is a row plus its own full-width field plus a chip rail — and
   bending one into the other costs more rules than writing both.
   ========================================================================== */

@media (max-width: 989px) {
  .dr-hd,
  .dr-navwrap { display: none; }
}
@media (min-width: 990px) {
  .dr-mh { display: none; }
}

/* Shared icon box. Both dimensions come from the markup, so an icon never
   depends on its container to size it and an uploaded image cannot stretch. */
.dr-hd__icon-svg { display: block; flex: 0 0 auto; }
.dr-hd__icon-img { display: block; flex: 0 0 auto; object-fit: contain; }

/* ==========================================================================
   1. Desktop header bar   (222:359 — 1440 x 108)

   Three columns, and the middle one is the whole point: `1fr auto 1fr` holds
   the logo on the page's centre line however wide the search field or the
   action row grow. Flexed apart instead, the logo would sit wherever the
   leftover space happened to land and would shift every time the phone number
   or the cart label changed length.
   ========================================================================== */

.dr-hd {
  background: var(--dr-hd-bg, #fff);
  position: relative;
  z-index: 20;
}
.dr-hd__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: var(--dr-hd-h, 84px);
  padding: 0 var(--dr-hd-pad, 51px);
}

/* ---- left column: menu button + search (222:361) ----
   One flex row rather than two grid children, so the button can appear and
   disappear without the search field changing width or the logo leaving the
   page's centre line. */
.dr-hd__lead {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

.dr-hd__search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--dr-hd-searchw, 458px);
  display: flex;
  align-items: center;
  gap: 10px;
  /* 222:361 is padding-driven: 11px above and below a 20px icon, which is the
     42px below. Written as a height with the vertical padding folded into it
     because the field is a flex row that centres its own contents - the two
     compute the same box, and a fixed height keeps the bar's row from
     resizing if a control inside it ever changes. */
  height: 42px;
  padding: 0 14px;
  background: var(--dr-search-bg, var(--dr-hd-field));
  border: 1px solid var(--dr-search-border, var(--dr-hd-line));
  /* A rounded rectangle, not a pill. The frame draws 10px, and the difference
     is not decoration: a pill reads as a chip or a button, and this is a field
     that takes typing. Everything else on the bar - the logo, the icons, the
     cart badge - already keeps its own shape, so the field was the one element
     borrowing a shape from somewhere else.

     var-with-fallback rather than a bare 10px so a merchant setting can be
     added later without hunting for the value. */
  border-radius: var(--dr-search-r, 10px);
  /* A field that answers the cursor before it is even clicked is most of what
     separates a considered header from a stock one. Colour only — no size
     change, which would nudge the row it sits in. */
  transition:
    background-color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}
/* ---- the field holds still ----

   No hover state and no mouse-focus state. The frame draws ONE field, and
   every version of a reaction here has been wrong in a different way: the
   resting fill was once the dark one so the control looked switched off until
   pointed at; then hover lifted the edge; then focus repainted the whole box
   white. A search field that a shopper is about to type into does not need to
   be told it exists, and at 458px wide it is not a target anyone struggles to
   hit.

   So rest, hover and click are all the same box: #f4f1ee behind a #e7e3e0
   hairline, exactly as 222:361 draws it.

   WHAT SURVIVES, AND WHY IT HAS TO

   :has(:focus-visible) is not the state that was removed. focus-visible is the
   browser's own judgement about whether focus was reached by KEYBOARD - it
   does not match a mouse click, which is the ring that was objected to, and it
   does match Tab, which is the only way anyone navigating without a mouse can
   tell where they are. Dropping that as well would leave the field invisible
   to a keyboard for the sake of a ring nobody using a mouse would ever see.

   Neutral ink rather than the accent, because --dr-hd-accent is still the old
   green and a green ring belongs to no part of this design.

   Same pattern the collection cards use, and for the same reason: :focus-within
   fires for a mouse and :has(:focus-visible) does not. */
.dr-hd__search:has(:focus-visible) {
  border-color: var(--dr-hd-ink-3, #8c8880);
  box-shadow: 0 0 0 3px rgba(30, 27, 32, .08);
}
.dr-hd__search-icon {
  display: flex;
  flex: 0 0 auto;
  color: var(--dr-hd-placeholder);
}
.dr-hd__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--dr-chrome);
  font-size: 14px;
  line-height: 1.2;
  color: var(--dr-hd-text, var(--dr-hd-ink));
}
/* Chrome draws its own clear button inside every type="search" field. With
   ours already in the icon slot that put TWO crosses in one search bar, a few
   hundred pixels apart, doing different things — the browser's empties the
   text, ours closes the panel. The panel's own input has always hidden it;
   the header's had not. */
.dr-hd__search-input::-webkit-search-cancel-button,
.dr-hd__search-input::-webkit-search-decoration,
.dr-mh__search input::-webkit-search-cancel-button,
.dr-mh__search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.dr-hd__search-input::placeholder { color: var(--dr-hd-placeholder); }
.dr-hd__search-input:focus { outline: none; }

/* ---- logo, centre (222:360) ---- */
.dr-hd__logo {
  grid-column: 2;
  justify-self: center;
  display: block;
}
/* aspect-ratio, so the box is the right height on the first frame rather than
   collapsing to zero and growing when the bitmap arrives. See the note beside
   --dr-logo-ar in dr-header.liquid. `auto` keeps the old behaviour if no logo
   image is set. */
.dr-hd__logo img {
  display: block;
  width: var(--dr-logo-w, 161px);
  height: auto;
  aspect-ratio: var(--dr-logo-ar, auto);
}
.dr-hd__logo-text {
  font-family: var(--dr-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--dr-hd-text, var(--dr-hd-ink));
}

/* ---- actions, right (222:366) ---- */
.dr-hd__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 22px;
}
.dr-hd__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dr-ui);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--dr-hd-text, var(--dr-hd-ink));
  white-space: nowrap;
  transition: color .24s ease;
}
/* A hairline that draws in from the left, the same gesture the nav row uses, so
   the two halves of the header answer the cursor in one language. Opacity was
   doing the job before, and fading a label to 70% reads as the control being
   switched off rather than being pointed at. */
.dr-hd__action::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left center;
  transition: scale .34s cubic-bezier(.22, 1, .36, 1);
}
.dr-hd__action:hover { color: var(--dr-hd-accent); }
.dr-hd__action:hover::after { scale: 1 1; }
.dr-hd__action-icon { display: flex; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .dr-hd__action::after { transition: none; }
}
.dr-hd__badge {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 17px;
  padding-inline: 7px;
  border-radius: var(--dr-r-pill);
  background: var(--dr-cart-badge, var(--dr-hd-badge));
  color: #fff;
  font-family: var(--dr-chrome);
  font-size: 12px;
  line-height: 1;
}
.dr-hd__badge[hidden] { display: none; }

/* Below about 1200 the three columns stop fitting at their drawn widths: the
   phone number is the least load-bearing of them, so it is what goes. */
@media (min-width: 990px) and (max-width: 1199px) {
  .dr-hd__bar { gap: 16px; }
  .dr-hd__actions { gap: 16px; }
  .dr-hd__action--phone { display: none; }
}

/* ==========================================================================
   2. Desktop nav row + mega menu   (104:671 / 104:5253)
   ========================================================================== */

/* Above .dr-hd so the panel's drop shadow is never clipped by the bar. */
.dr-navwrap { position: relative; z-index: 21; }

.dr-nav {
  background: var(--dr-nav-bg, #fff);
  border-top: 1px solid var(--dr-nav-border, var(--dr-hd-line));
  border-bottom: 1px solid var(--dr-nav-border, var(--dr-hd-line));
}

/* Three columns — flexible, items, flexible — so the row of categories sits on
   the page's own centre line and the "ready to ship" link owns the right edge
   without pulling them off it. The flexible tracks collapse before the items
   do, so a narrow desktop loses the empty space rather than the navigation. */
.dr-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--dr-nav-pad, 80px);
}
.dr-nav__items {
  grid-column: 2;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(16px, 2.1vw, 32px);
}

.dr-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 15px;
  font-family: var(--dr-ui);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.005em;
  color: var(--dr-nav-text, var(--dr-hd-ink-2));
  white-space: nowrap;
  background: none;
  cursor: pointer;
  transition: color .24s ease;
}

/* The underline is a pseudo-element that scales, not a border that toggles.
   A 2px border appearing on hover shifts nothing but reads as a switch being
   thrown; a rule that draws itself in from the left reads as a response. It
   also means the resting and active states share one line rather than one
   being transparent and the other not. */
.dr-nav__item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--dr-nav-active, var(--dr-hd-accent));
  scale: 0 1;
  /* FROM THE CENTRE, OUTWARDS.

     This used to grow from the left and retract to the right, swapping
     transform-origin between the two states so the line always travelled the
     same way. That solved a real problem - a line that grows from the left and
     then collapses back into the left reads as being undone - but it solved it
     by giving the line a direction, and a direction is a thing the eye has to
     follow. On a row of eight items the cursor is usually moving horizontally,
     so the line was travelling with or against the pointer depending on which
     way you came, and the two felt like different animations.

     Growing from the centre has no direction to get wrong. It opens under the
     word symmetrically and closes back into it the same way, so arriving and
     leaving are the same gesture reversed, and it reads identically whichever
     side the cursor came from. It also needs no origin swap, which means one
     fewer thing changing mid-transition. */
  transform-origin: center;
  transition: scale 560ms var(--dr-hd-ease);
}
/* The chevron runs on the same curve as the shell and for almost as long, so
   it is part of the panel's movement rather than a second, quicker animation
   that happens to start at the same moment. At 440ms against the shell's 760
   it was finishing while the menu was barely half open, which is why it read
   as flicking rather than turning. 600ms lands it just before the panel
   settles - leading the gesture slightly, which is right for the thing that
   announces it.

   It is driven by aria-expanded, which the script sets when the menu actually
   opens, so the chevron and the panel start on the same frame by construction. */
.dr-nav__item svg {
  width: 9px;
  height: 9px;
  transition: transform 600ms var(--dr-hd-ease);
}
.dr-nav__item:hover { color: var(--dr-nav-active, var(--dr-hd-accent)); }
.dr-nav__item:hover::after { scale: 1 1; }
.dr-nav__item[aria-expanded="true"] svg { transform: rotate(180deg); }
.dr-nav__item--active,
.dr-nav__item[aria-expanded="true"] {
  color: var(--dr-nav-active, var(--dr-hd-accent));
}
.dr-nav__item--active::after,
.dr-nav__item[aria-expanded="true"]::after { scale: 1 1; }

.dr-nav__spacer { display: none; }

.dr-nav__cta {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: 15px;
  font-family: var(--dr-ui);
  font-weight: 600;
  /* Figma draws this one italic (222:414). Teachers ships a real italic, which
     is why the font request asks for the axis — a synthesised slant next to
     the upright nav items two words away reads as a different typeface. */
  font-style: italic;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: var(--dr-nav-cta, var(--dr-hd-accent-2));
  white-space: nowrap;
  transition: opacity .24s ease;
}
/* The one accent on the row, so it carries a marker of its own rather than
   competing with the category labels on weight alone. */
.dr-nav__cta::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.dr-nav__cta:hover { opacity: .68; }

@media (prefers-reduced-motion: reduce) {
  .dr-nav__item::after,
  .dr-nav__item svg { transition: none; }
}

/* Under ~1280 eight categories stop fitting between the drawn insets. The row
   gives up the third column and most of its side padding first, then tightens
   the gap and the type — in that order, because empty space is the cheapest
   thing on the row to spend.

   It still centres, and it is still allowed to wrap as a last resort. A nav
   row that runs off the side of the window loses its first item with no way
   to reach it; one that takes a second line is merely less pretty. */
@media (min-width: 990px) and (max-width: 1279px) {
  .dr-nav__inner {
    grid-template-columns: 1fr;
    padding-inline: 20px;
  }
  .dr-nav__items {
    grid-column: 1;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(10px, 1.5vw, 22px);
  }
  .dr-nav__item { font-size: 14px; }
  .dr-nav__cta { display: none; }
}

/* ---- the mega menu ----

   One shell, every category's contents stacked inside it.

   The shell owns the geometry: it is the white surface, it carries the shadow,
   and its HEIGHT is what animates — from zero on a first open, and from one
   category's height to the next when the reader moves along the row. Because
   both are the same property on the same element, opening the menu and
   changing category are literally the same movement on the same clock, which
   is the thing that could not be true while every category had a box of its
   own.

   Height is animated from an explicit pixel value the script measures on each
   hover. That is a layout-driven transition and it is normally worth avoiding
   — but it is one element, once per hover, and the alternative (clip-path, as
   this used to use) cannot morph between two different content heights. It can
   only uncover a box that is already the right size, which is exactly why
   swapping between panels of different lengths snapped. */
.dr-mega-shell {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 25;
  height: 0;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--dr-nav-border, var(--dr-hd-line));
  box-shadow: 0 30px 60px -34px rgba(30, 27, 32, .22);
  /* ARRIVING AND LEAVING ARE NOT THE SAME TRANSITION, and they cannot share
     one declaration. This is the leaving half - see .is-open below for the
     other. A single `opacity 300ms` meant the shell was fully transparent
     340ms before it had finished collapsing: the menu went blank and then an
     invisible box carried on shrinking. Fading across 560ms of the 760ms
     collapse keeps something on screen for nearly the whole movement, so the
     menu closes rather than switching off. */
  transition:
    height 760ms var(--dr-hd-ease),
    opacity 560ms ease;
}
.dr-mega-shell[hidden] { display: none; }

/* Closed, the shadow and the border would still draw across the page as a
   1px line under the nav row, because neither is clipped by a zero height. */
.dr-mega-shell:not(.is-open) {
  opacity: 0;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* Arriving, the opacity leads: the panel is legible early and then settles
   into its height, which is what makes an opening feel answered rather than
   waited for. Only the opacity is re-declared, so the height keeps the single
   760ms clock that makes "open" and "change category" the same movement. */
.dr-mega-shell.is-open {
  opacity: 1;
  transition:
    height 760ms var(--dr-hd-ease),
    opacity 260ms ease;
}

/* The menu can never be taller than the room under the header. Applied only
   while open: a max-height on a box being animated to zero would fight the
   close.

   --dr-hd-top is written by the script — how far down the window the nav row
   currently ends, which changes as the header pins and goes compact.

   The shell does NOT scroll, and that is the fix for a scrollbar that had
   nothing to do with the category being looked at. It used to carry
   overflow-y: auto, and the panels it holds are stacked on top of each other
   with the inactive ones hidden by `visibility` — which keeps them in layout.
   A visibility:hidden box still contributes scrollable overflow, so the shell
   could always be scrolled to the height of the TALLEST category, whichever
   one was actually showing. Under Baby & Kids that meant a scrollbar, and a
   drop of blank white underneath the real content where an invisible panel was
   holding the space open.

   The scroll belongs to the panel instead — see .dr-mega.is-on. Only one panel
   is ever in flow, so only one can ever ask for it. */
.dr-mega-shell.is-open {
  max-height: calc(100vh - var(--dr-hd-top, 190px) - 24px);
}

/* ---- the contents ----

   Every category is in the shell at once. The active one is in FLOW, so it is
   what the shell measures and what scrolls; the rest are taken out of flow and
   stacked at the top, so they can fade without holding the box open at their
   own height.

   visibility, not display: a display:none panel cannot be measured, and the
   script has to read the incoming height before it can animate to it. The
   `visibility 0s linear <duration>` delay is what keeps an outgoing panel on
   screen for its whole fade and then takes it out of the accessibility tree. */
.dr-mega {
  position: absolute;
  inset-inline: 0;
  top: 0;
  display: flex;
  gap: 44px;
  /* No bottom padding on the box itself, and that is deliberate.

     This element is the scroll container, and a scroll container's own
     padding-bottom is dropped at the END of the scroll once its content is
     laid out by flex — the browser scrolls to the bottom of the content box
     and stops. The 42px was there the whole time and never showed: the last
     link sat flush against the window edge and the menu read as cut off.

     Moved onto the flex children below, where it is ordinary content height
     and cannot be discarded. */
  padding: 38px var(--dr-nav-pad, 80px) 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 460ms ease,
    visibility 0s linear 460ms;
}
.dr-mega.is-on {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* The active panel is the scroller, because it is the only one in flow and
     therefore the only one whose height is real. A long category scrolls
     itself; a short one has nothing to scroll and shows no bar at all, which
     is what the shell could never manage while the hidden panels were
     stacked inside it.

     The same cap as the shell, so the two agree: the script measures this
     panel and animates the shell to exactly what it reports, and when the
     content is taller than the room available both stop in the same place. */
  max-height: calc(100vh - var(--dr-hd-top, 190px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* Scroll ends where the content ends, unless the content overflows — see
     below. scroll-padding keeps a keyboard tab-through from parking a link
     hard against either edge. */
  scroll-padding-block: 12px 24px;
  /* In slightly slower than out, and starting after it, so the two never share
     the middle of the cross-fade at half strength — which is what makes two
     overlapping panels look like a double exposure. */
  transition:
    opacity 420ms ease 120ms,
    visibility 0s;
}

/* ---- the tail ----

   A run of empty space after the last link, and ONLY on a panel long enough to
   scroll. The script adds the class; a category that fits never gets it, so no
   menu is made taller than its own content.

   It exists because the end of a scroll is not the same as the end of a list.
   A panel that stops exactly on its final link leaves that link pinned against
   the bottom of the window with nothing beneath it, and the eye reads that as
   the menu having been cut off rather than having ended. Somewhere to scroll
   past the last item is what says there is nothing more.

   padding, not margin: it is inside the scrollable box, so it becomes travel
   the reader can reach rather than space around a box they cannot. */
.dr-mega__main,
.dr-mega__rail { padding-bottom: 42px; }

/* The run of space after the last link on a panel long enough to scroll.

   display: none rather than height: 0, because .dr-mega__main is a grid with a
   30px gap — a zero-height child would still cost a row and a gap on every
   panel, including the short ones this must not touch. A display:none child
   creates neither. */
.dr-mega__tail { display: none; }
.dr-mega.is-on.is-scrollable .dr-mega__tail {
  display: block;
  height: 80px;
}

/* The copy settles down into the box a beat behind the edge, so the reveal has
   a front and a back rather than arriving as one flat sheet. Identical on a
   first open and on a change of category, because those are the same event as
   far as this element is concerned. */
.dr-mega__main,
.dr-mega__rail {
  opacity: 0;
  transform: translate3d(0, -14px, 0);
  transition:
    transform 640ms var(--dr-hd-ease) 120ms,
    opacity 420ms ease 120ms;
}
.dr-mega.is-on .dr-mega__main,
.dr-mega.is-on .dr-mega__rail {
  opacity: 1;
  transform: none;
}

/* ---- THE SUDDEN DISAPPEARANCE WAS HERE ----

   This rule used to be `transition: none`, with the reasoning that the
   contents should hold still on the way out and let the shell do the work.
   The intent was right and the implementation did the opposite: `none` does
   not hold anything still, it removes the transition from OPACITY as well, so
   the moment .is-on came off, the panel's contents jumped to zero on the very
   next frame. Everything inside the menu vanished instantly while the shell
   spent its full duration collapsing an empty white box. That is the whole of
   what "suddenly disappearing" was.

   They now leave on their own clock. The fade is shorter than the shell's
   collapse so the box is empty before it finishes closing rather than after,
   and the 14px drift is allowed back because it travels the same direction the
   shell is already going - up - which makes it part of one movement instead of
   the competing second gesture the old note was worried about. */
.dr-mega:not(.is-on) .dr-mega__main,
.dr-mega:not(.is-on) .dr-mega__rail {
  transition:
    transform 520ms var(--dr-hd-ease),
    opacity 400ms ease;
}

/* ---- the columns, arriving one after another ----
   Small — 8px and a fifteenth of a second apart. Enough that the eye is led
   left to right across the panel instead of meeting every column at once, not
   so much that anyone waits for the last one. Capped at four, because there
   are never more than four. */
.dr-mega__group {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 380ms ease,
    transform 560ms var(--dr-hd-ease);
}
.dr-mega.is-on .dr-mega__group { opacity: 1; transform: none; }
.dr-mega.is-on .dr-mega__group:nth-child(1) { transition-delay: 220ms; }
.dr-mega.is-on .dr-mega__group:nth-child(2) { transition-delay: 285ms; }
.dr-mega.is-on .dr-mega__group:nth-child(3) { transition-delay: 350ms; }
.dr-mega.is-on .dr-mega__group:nth-child(n + 4) { transition-delay: 415ms; }

/* The stagger is dropped on the way out but the fade is not - same correction
   as the block above. Un-staggering in reverse would leave one column lit
   after the rest had gone, so all four leave together; what matters is only
   that they leave over time rather than in a single frame. */
.dr-mega:not(.is-on) .dr-mega__group {
  transition:
    opacity 340ms ease,
    transform 420ms var(--dr-hd-ease);
  transition-delay: 0s;
}

/* ==========================================================================
   MOVING FROM ONE CATEGORY TO ANOTHER

   ---- why this needs rules of its own ----

   Opening from closed and changing category were supposedly "the same
   movement", and in terms of the property being animated they are: the shell
   is aimed at the height of whatever is now inside it, either way. But that
   equivalence hides the thing that actually makes an opening feel slow.

   From closed, the shell travels 0 -> H. That is a large, unmistakable
   movement lasting the full 760ms, and it CARRIES the whole event; the fades
   happening inside it are almost incidental.

   On a swap the shell travels H(a) -> H(b), and two categories with similar
   column counts are within a few pixels of each other. The box therefore
   barely moves, the 760ms height transition has nothing to show for itself,
   and the entire event collapses to the cross-fade underneath - two panels
   changing opacity at the same time over 460ms. A simultaneous cross-fade is
   read at its CROSSOVER, not at its end: both panels sit at half strength
   around 230ms in, and that midpoint is the moment the eye calls "changed".
   So a swap registered in about a quarter of a second while an open took
   three quarters, and nothing in either duration explained the difference.

   ---- what these rules do ----

   They turn the blend into a HANDOVER. The outgoing panel leaves first and is
   gone before the incoming one starts, instead of the two crossing through
   each other:

     outgoing contents  fade out      0 -> 260ms
     outgoing panel     fade out      0 -> 300ms
     incoming panel     fades in    200 -> 620ms
     incoming contents  rise and fade 300 -> 940ms
     incoming columns   stagger in   400 -> 1155ms

   There is no moment when both categories are legible at once, which is what
   made the change read as instant, and the sequence is longer end to end than
   a first open - which is correct, because a swap has no box growth doing the
   work for it.

   .is-swap is put on the SHELL by the script for the length of the handover
   and taken off again, so a first open is never slowed by delays that exist
   only to wait for a panel that is not there.
   ========================================================================== */

.dr-mega-shell.is-swap .dr-mega:not(.is-on) {
  transition:
    opacity 300ms ease,
    visibility 0s linear 300ms;
}
.dr-mega-shell.is-swap .dr-mega:not(.is-on) .dr-mega__main,
.dr-mega-shell.is-swap .dr-mega:not(.is-on) .dr-mega__rail {
  transition:
    opacity 260ms ease,
    transform 320ms var(--dr-hd-ease);
}
.dr-mega-shell.is-swap .dr-mega:not(.is-on) .dr-mega__group {
  transition:
    opacity 220ms ease,
    transform 300ms var(--dr-hd-ease);
}

/* The 200ms is the handover itself: it is what the incoming panel waits for
   rather than a stylistic pause. visibility is taken at 0s because the panel
   is arriving - it must be in the accessibility tree from the start, and only
   an OUTGOING panel needs the delayed hand-off. */
.dr-mega-shell.is-swap .dr-mega.is-on {
  transition:
    opacity 420ms ease 200ms,
    visibility 0s;
}
.dr-mega-shell.is-swap .dr-mega.is-on .dr-mega__main,
.dr-mega-shell.is-swap .dr-mega.is-on .dr-mega__rail {
  transition:
    transform 640ms var(--dr-hd-ease) 300ms,
    opacity 420ms ease 300ms;
}

/* The same 65ms ladder as a first open, shifted to start after the handover.
   Shifted rather than rewritten, so the columns keep the rhythm they have
   everywhere else and only their starting point moves. */
.dr-mega-shell.is-swap .dr-mega.is-on .dr-mega__group:nth-child(1) { transition-delay: 400ms; }
.dr-mega-shell.is-swap .dr-mega.is-on .dr-mega__group:nth-child(2) { transition-delay: 465ms; }
.dr-mega-shell.is-swap .dr-mega.is-on .dr-mega__group:nth-child(3) { transition-delay: 530ms; }
.dr-mega-shell.is-swap .dr-mega.is-on .dr-mega__group:nth-child(n + 4) { transition-delay: 595ms; }

@media (prefers-reduced-motion: reduce) {
  .dr-mega-shell,
  .dr-mega,
  .dr-mega.is-on,
  .dr-mega__main,
  .dr-mega__rail,
  .dr-mega__group {
    transition: none !important;
  }
  .dr-mega.is-on .dr-mega__main,
  .dr-mega.is-on .dr-mega__rail,
  .dr-mega.is-on .dr-mega__group {
    opacity: 1;
    transform: none;
  }
}

.dr-mega__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 30px; align-content: start; }

/* An editorial masthead rather than a label. The category name is set in the
   page's display face at heading size with "Shop all" sitting on its baseline —
   which is what tells the reader this panel is a place, not a tooltip. At
   20px semibold in the UI face it read as a form legend. */
.dr-mega__title {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--dr-hd-line-2);
}
.dr-mega__title h3 {
  font-family: var(--dr-display);
  font-weight: 400;
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--dr-hd-ink);
}
.dr-mega__shopall {
  position: relative;
  font-family: var(--dr-ui);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--dr-hd-ink-2);
  /* Underlined at rest, because it is the one link in the panel that is not in
     a list and would otherwise read as a caption. */
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .24s ease;
}
.dr-mega__shopall:hover { color: var(--dr-nav-active, var(--dr-hd-accent)); }

.dr-mega__cols {
  display: grid;
  grid-template-columns: repeat(var(--dr-mega-cols, 3), minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.dr-mega__group { display: grid; gap: 8px; align-content: start; min-width: 0; }
.dr-mega__group-head {
  display: flex;
  gap: 7px;
  align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--dr-hd-line-2);
}
.dr-mega__group-title {
  font-family: var(--dr-chrome);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--dr-hd-ink);
}
.dr-mega__group-count {
  font-family: var(--dr-chrome);
  font-size: 11.5px;
  color: var(--dr-hd-ink-3);
}
.dr-mega__link {
  display: flex;
  gap: 7px;
  align-items: baseline;
  font-family: var(--dr-chrome);
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--dr-hd-ink-2);
}
.dr-mega__link:hover { color: var(--dr-nav-active, var(--dr-hd-accent)); }
.dr-mega__link-count { font-size: 11.5px; color: var(--dr-hd-ink-4); }

/* shown when a column's list is longer than the configured limit */
.dr-mega__more {
  margin-top: 2px;
  font-family: var(--dr-chrome);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--dr-nav-active, var(--dr-hd-accent));
}
.dr-mega__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- right rail ---- */
.dr-mega__rail {
  flex: 0 0 300px;
  border-left: 1px solid var(--dr-hd-line-2);
  padding-left: 28px;
  display: grid;
  gap: 18px;
  align-content: start;
}
.dr-mega__rail-head {
  font-family: var(--dr-chrome);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .09em;
  color: var(--dr-hd-ink-3);
}
.dr-mega__brands { display: flex; flex-wrap: wrap; gap: 7px; }
.dr-mega__brand {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--dr-hd-line);
  border-radius: 20px;
  font-family: var(--dr-chrome);
  font-size: 12.5px;
  line-height: 1.2;
  color: #2a2630;
  white-space: nowrap;
}
.dr-mega__brand:hover { border-color: var(--dr-hd-ink-3); }
.dr-mega__brand--all {
  border-color: transparent;
  font-weight: 600;
  color: var(--dr-nav-active, var(--dr-hd-accent));
}
.dr-mega__promo {
  border: 1px solid var(--dr-hd-line);
  border-radius: 11px;
  overflow: hidden;
  display: block;
}
/* min-height as well as aspect-ratio: an empty box relying on aspect-ratio
   alone collapses if anything in the theme overrides it. */
.dr-mega__promo-media {
  position: relative;
  aspect-ratio: 272 / 130;
  min-height: 110px;
  background: var(--dr-hd-field);
  overflow: hidden;
}
.dr-mega__promo-media > img,
.dr-mega__promo-media > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Shopify's onboarding graphic, shown until a real image is picked. */
.dr-mega__promo-media .placeholder-svg {
  fill: var(--dr-hd-ink-3);
  opacity: .22;
  background: var(--dr-hd-field);
}
.dr-mega__promo-body { padding: 12px 14px 14px; display: grid; gap: 5px; }
.dr-mega__promo-eyebrow {
  font-family: var(--dr-chrome);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .1em;
  color: var(--dr-hd-ink-3);
}
.dr-mega__promo-title {
  font-family: var(--dr-chrome);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--dr-hd-ink);
}
.dr-mega__promo-link {
  font-family: var(--dr-chrome);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--dr-nav-active, var(--dr-hd-accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Narrower laptops: drop the rail before squeezing the columns. */
@media (max-width: 1199px) {
  .dr-mega__rail { display: none; }
  .dr-mega { --dr-mega-cols: 3; }
}

/* ==========================================================================
   2b. Scroll behaviour — pinned, compact, and the menu button

   Three classes, written onto <html> by the header's own script:

     .dr-hd-pinned    the bar has reached the top of the window
     .dr-hd-compact   the SCROLL has rolled the category row away. Not "the row
                      is closed" — it stays set while the button has the row
                      open, because it is also what keeps that button on the
                      bar. Rules that care whether the row is actually showing
                      pair it with :not(.dr-hd-navopen).
     .dr-hd-navopen   the menu button has pulled the row back down

   Everything here is scoped to 990px up. The phone keeps the header it has.

   ---- the row's height is scrubbed, not transitioned ----

   The category row does not animate away on a threshold. Its height is a
   function of the scroll position, written every frame:

       navRow = clamp(0, (announcement + header − bar) − scrollY, navRowHeight)

   which is the same as saying: the header is never shorter than the distance
   from the top of the window to the top of the content. That is the whole
   reason this shape was chosen, because it makes a gap impossible to express
   rather than merely unlikely.

   A transition cannot promise that. Whatever duration it runs at, a scroll
   faster than the animation leaves the header briefly shorter than the space
   it reserves — and that difference IS the empty band that used to appear
   under the bar on the way back up. Scrubbing has no duration to outrun.

   The one collapse that IS animated is the menu button's, because that one is
   driven by a click rather than by the scroll and so can never race it. It
   opts in with dr-hd-anim.
   ========================================================================== */

/* Fixed at all times and at BOTH breakpoints, with the section behind it
   holding the full height. The bar therefore never disappears and never has to
   re-enter the flow — there is no `position` change anywhere in the scroll
   path, and `position` is the one property that cannot be animated out of a
   jump.

   On a phone this is what keeps the bar and the search field together in one
   compact sticky block while the announcement bar scrolls out from above them
   and the category chips roll away below. Same mechanism as desktop; only the
   element being rolled away differs. */
/* ---- WHY THERE IS A TRANSFORM HERE AND NOT JUST top: 0 ----

   The wrap is fixed from the first frame, so without an offset it covers the
   announcement bar sitting in normal flow above it. That offset is written per
   frame by the script (slide = ABAR - scrollY), which is correct once the
   script is running and useless before it: for the first second of every page
   view the header sat at top: 0 with the bar invisible underneath, and then
   jumped down when the measurement arrived.

   The resting value is now declared in CSS, from a variable the announcement
   bar prints at render time. The bar is therefore visible on the very first
   painted frame, at the right position, with no script involved. The script
   still owns every frame after that - it writes an inline transform, which
   beats this one - so hide-on-scroll is completely unaffected.

   --dr-abar-h defaults to 0px, so a page with no announcement bar (or a bar
   with no messages) puts the header flush at the top exactly as before. */
.dr-hdwrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  transform: translate3d(0, var(--dr-abar-h, 0px), 0);
}

/* ---- the header is not part of what the search panel dims ----

   The overlay layer is z-index 70 and its scrim covers the whole viewport, so
   at 60 the header went under it: opening search greyed out the logo, the
   account and cart controls, and the very search field that had just been
   clicked. The thing you are using cannot be the thing that looks disabled.

   Raised only while search is open, and only above the scrim — the cart
   drawer still dims everything, because there the header is not in use. */
html.dro-search-open .dr-hdwrap { z-index: 80; }

/* ---- magnifier becomes a cross ----

   THE CROSS IS AN IN-FLOW ELEMENT, NOT AN OVERLAY, and that is the whole
   point of this block.

   It was an absolutely positioned button sitting on top of the magnifier,
   revealed by flipping opacity and pointer-events. It was reliably visible
   and reliably not clickable: the cursor stayed an arrow over it and the
   click fell through to the icon behind, which has no handler — so the panel
   stayed open and the field just lost focus. Escape closed the panel
   perfectly the whole time, which is what proved the close logic was never
   the problem and the button simply was not the thing being clicked.

   Stacking something over something else means winning a hit test, and a hit
   test has a lot of ways to go wrong: paint order between a positioned box
   and its siblings, a third-party overlay at z-index 999999, a pointer-events
   declaration that loses the cascade. None of it can be relied on for the
   only way out of a panel.

   So the two glyphs now take turns in the SAME flex slot. One is display:none
   while the other is displayed. Nothing overlaps anything, there is no hit
   test to win, and the slot is a fixed size so the input beside it does not
   move when they swap. */
.dr-hd__search-icon,
.dr-mh__search-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* THE SLOT IS A FIXED BOX, and the note above this block already said it was.

   It was not. The slot was sized by whichever glyph happened to be in it, and
   the two are not the same: the magnifier is a 20px icon and the cross is a
   15px SVG. So opening search narrowed the slot by 5px and the placeholder
   beside it slid left to take up the slack - a small movement, on the exact
   line of text a shopper is about to type into.

   20px because that is the magnifier's size and the resting state is the one
   that should not have to move. The cross stays 15px and simply centres in the
   box, which is also the right optical weight for a close control next to a
   heavier search glyph.

   Desktop only. The mobile slot takes its icon size from a setting, so pinning
   it to 20 here would override a merchant's choice. */
.dr-hd__search-icon {
  width: 20px;
  height: 20px;
}

/* ---- the two glyphs turn, they do not cut ----

   The swap is still display:none / display:grid, and that is not changing: the
   note above this block is the record of what happened the last time these two
   were stacked and the close button stopped answering clicks. Hit testing stays
   exactly as it is.

   What was wrong is that a display swap is instantaneous, and the only thing
   softening it was 180ms of straight opacity on the ARRIVING glyph. The leaving
   one simply stopped existing, so there was a frame with no icon at all and
   then a new icon fading up in its place - read as a blink rather than as one
   thing becoming another.

   A turn fixes that without any overlap. Each glyph enters rotated and
   undersized and settles into place, and because they rotate in OPPOSITE
   directions the pair reads as a single control winding one way to become a
   cross and unwinding to become a magnifier again. The eye fills in the middle
   it never actually sees.

   260ms on the panel's own in-curve, so the glyph and the panel it belongs to
   are plainly one event rather than two things that happened at once. */
.dr-hd__search-mag {
  display: flex;
  transform-origin: 50% 50%;
}
/* Only after search has been opened once - see dro-search-armed in
   dr-overlays.liquid for why this cannot simply be declared outright. */
html.dro-search-armed .dr-hd__search-mag {
  animation: dr-hd-glyph-back 260ms cubic-bezier(.22, 1, .36, 1) both;
}

.dr-hd__search-x {
  display: none;
  place-items: center;
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  line-height: 0;
}
.dr-hd__search-x svg { width: 15px; height: 15px; display: block; }

/* The button itself is only as big as its glyph, which is under every touch
   target guideline there is. This extends what can be pressed without adding
   a single pixel to the layout — and if anything ever did cover this halo,
   the glyph underneath is still a normal in-flow hit target of its own. */
.dr-hd__search-x::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
}

/* dro-search-x, not dro-search-open: which glyph is shown is now timed to the
   glyph's own animation rather than to the panel's teardown. See the note
   beside iconTimer in dr-overlays.liquid. */
html.dro-search-x .dr-hd__search-mag { display: none; }
/* 380ms in, against 260ms for the magnifier's return, and the two are meant to
   FEEL the same rather than measure the same.

   They were both 260ms - identical duration, identical curve, identical
   quarter turn - and the cross still read as the hurried one. Nothing was
   wrong with the animation; the difference is what else is on screen. The
   cross arrives on the same frame the panel starts dropping, so at 260ms it
   was finished and sitting still while most of the window was still moving,
   and a small thing that stops early next to a large thing still going looks
   rushed. The magnifier returns 240ms into the close with the cross already
   gone and the panel folding away from it, so the same 260ms has the screen to
   itself and reads as deliberate.

   380ms is --dro-in-ms, the panel's own in-time. The glyph now settles on the
   same frame the panel does, so they finish as one movement instead of one
   overtaking the other.

   The magnifier is deliberately left at 260ms. It is not competing with
   anything, it already reads correctly, and matching it to this number would
   make the close drag. */
html.dro-search-x .dr-hd__search-x {
  display: grid;
  transform-origin: 50% 50%;
  animation: dr-hd-glyph-in var(--dro-in-ms, 380ms) cubic-bezier(.22, 1, .36, 1) both;
}

/* ---- and the cross unwinds on the way out ----

   THE NUMBERS HERE ARE NOT FREE CHOICES.

   NO DELAY. The turn begins on the frame the press lands.

   It used to wait 180ms so the panel's sections could leave first, on the
   reasoning that the header should move last. That reads as lag: the one
   thing a shopper is looking at when they press close is the thing they
   pressed, and it sat still while everything else moved. Whatever is
   theoretically tidier about a staggered exit, a control that does not answer
   its own click immediately feels broken.

   240ms, and it matches ICON_MS in dr-overlays.liquid - the script drops
   dro-search-x on that same clock, so display:none lands on a cross that has
   already reached opacity 0 and the magnifier turns in straight behind it.
   Those two numbers have to stay equal; if one moves the slot either blinks
   empty or the turn is cut off mid-rotation. */
html.dro-search-closing .dr-hd__search-x {
  animation: dr-hd-glyph-out 240ms cubic-bezier(.4, 0, 1, 1) both;
}

/* Opposite directions on purpose. Winding one way and unwinding the other is
   what makes the pair read as one control changing its mind, rather than two
   icons that each happen to spin on arrival. */
@keyframes dr-hd-glyph-in {
  from { opacity: 0; transform: rotate(-90deg) scale(.55); }
  to   { opacity: 1; transform: none; }
}
/* The exact reverse of glyph-in, so the cross retraces the path it arrived on
   rather than leaving by a route it never took. */
@keyframes dr-hd-glyph-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: rotate(-90deg) scale(.55); }
}
@keyframes dr-hd-glyph-back {
  from { opacity: 0; transform: rotate(90deg) scale(.55); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.dro-search-open .dr-hd__search-x,
  html.dro-search-closing .dr-hd__search-x,
  html.dro-search-armed .dr-hd__search-mag { animation: none; }
}

/* The spacer. --dr-hd-spacer is written by the script from a measurement of
   the header with its tail fully open; the calc is only the value used for the
   first frame, before that measurement exists. */
.dr-hd-section {
  box-sizing: border-box;
  min-height: var(--dr-hd-spacer, calc(var(--dr-hd-h, 84px) + 48px));
}

/* The chips are the phone's collapsible tail, the way the category row is the
   desktop's. overflow goes here so the row can be scrubbed to nothing. */
.dr-mh__chips { box-sizing: border-box; overflow: hidden; }

/* The shadow says the bar is floating over the page rather than sitting in it,
   and on a phone it is the only thing that does. */
.dr-mh { transition: box-shadow 260ms ease; }
@media (max-width: 989px) {
  .dr-mh { box-shadow: none; }
  html.dr-hd-pinned .dr-mh { box-shadow: 0 6px 18px -12px rgba(30, 27, 32, .34); }
}

@media (min-width: 990px) {

  /* Reading the resting height. Forces the row open with every transition off
     for exactly as long as the script needs to measure it — otherwise a resize
     part-way down the page would record a half-collapsed row and every
     threshold derived from it would be wrong. */
  html.dr-hd-measuring .dr-nav {
    height: auto !important;
    transition: none !important;
  }
  html.dr-hd-measuring .dr-nav__inner {
    transform: none !important;
    transition: none !important;
  }

  /* The shadow is the only thing that says the bar is now floating over the
     page rather than sitting in it. */
  .dr-hd { transition: box-shadow 260ms ease; }
  html.dr-hd-pinned .dr-hd {
    box-shadow: 0 1px 0 var(--dr-hd-line-2), 0 18px 34px -30px rgba(30, 27, 32, .30);
  }

  /* ---- the category row ----
     Height comes from the script as an inline pixel value. overflow goes here
     and NOT on .dr-navwrap: the mega menu is absolutely positioned against the
     wrap and hangs below it, so clipping at that level would cut every panel
     off at the row's own bottom edge. */
  .dr-nav {
    box-sizing: border-box;
    overflow: hidden;
  }

  /* The row itself NEVER changes size. It keeps its full height and slides up
     behind the bar; the box above is what shrinks, and it does the clipping.

     Scrubbing the row's own height instead — which is what this did — is
     geometrically correct and visually wrong: the type squashes towards the
     middle as the box closes on it, and on a smooth-scrolled page you see
     every frame of that. Only the position moves now.

     The translate is written by the script rather than derived from a custom
     property on <html>, because a variable set at the root invalidates style
     for the whole document on every frame of a scroll. Two element-scoped
     writes cost nothing by comparison. */
  .dr-nav__inner { will-change: transform; }

  /* A border draws outside the content box, so a row scrubbed to zero height
     still leaves its two rules on screen — a 2px seam under the bar that reads
     as a rendering fault. Removed at the exact frame the row reaches zero, so
     the change is never visible. */
  html.dr-hd-compact:not(.dr-hd-navopen) .dr-nav {
    border-top-color: transparent;
    border-bottom-color: transparent;
  }

  /* An open panel has nowhere to hang once the row it belongs to has gone. */
  html.dr-hd-compact:not(.dr-hd-navopen) .dr-mega-shell { display: none; }

  /* The one transition on this element, and it is opt-in. The script adds
     dr-hd-anim around a menu-button click and takes it off again the moment
     the scroll touches the row, so it can never end up on the frame path. */
  html.dr-hd-anim .dr-nav {
    transition: height var(--dr-hd-collapse, 380ms) cubic-bezier(.4, 0, .2, 1);
  }
  /* The slide has to run on the same clock as the clip, or the row would
     arrive at its resting position before the box had finished opening for it
     and the last frames would show it cut off. */
  html.dr-hd-anim .dr-nav__inner {
    transition: transform var(--dr-hd-collapse, 380ms) cubic-bezier(.4, 0, .2, 1);
  }

  /* ---- the menu button ----
     Always in the markup, never in the way. Width and margin animate alongside
     opacity so the search field slides over to meet it instead of being
     shoved, and so nothing occupies space while the button is invisible.

     This one is free to animate: it lives inside the bar and changes nothing
     about the header's height, so it cannot open a gap however fast it runs. */
  .dr-hd__burger {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 0;
    height: 40px;
    margin-right: -14px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dr-hd-text, var(--dr-hd-ink));
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    cursor: pointer;
    transition:
      width 300ms cubic-bezier(.4, 0, .2, 1),
      margin-right 300ms cubic-bezier(.4, 0, .2, 1),
      opacity 200ms ease,
      background-color .24s ease;
  }
  html.dr-hd-compact .dr-hd__burger {
    width: 40px;
    margin-right: 0;
    opacity: 1;
    pointer-events: auto;
  }
  html.dr-hd-compact .dr-hd__burger:hover { background: var(--dr-hd-field); }

  /* The glyph itself lives outside this media query — see .dr-burger, which
     both the desktop and the mobile button use. */


  /* ---- holding the page still while a mega panel is open ----
     The scrollbar is given back as padding, because `overflow: hidden` on the
     document takes it away and the page would otherwise widen by its width. */
  html.dr-hd-locked {
    overflow: hidden;
    padding-right: var(--dr-hd-sbw, 0px);
  }

  /* A fixed element is sized against the VIEWPORT, not against the padded
     document, so the header would stay full width while the page under it
     narrowed — the bar and the content below it visibly out of step by the
     width of a scrollbar. Both locks are compensated: this theme's cart drawer
     and search panel use dro-locked, and they had the same problem. */
  html.dr-hd-locked .dr-hdwrap { right: var(--dr-hd-sbw, 0px); }
  html.dro-locked .dr-hdwrap { right: var(--dro-sbw, 0px); }
  html.dr-ws-locked .dr-hdwrap { right: var(--dr-ws-sbw, 0px); }
  /* The variant picker is the fourth. Its lock pads the BODY, which a fixed
     header never sees - so the page held still underneath while the bar alone
     widened by the scrollbar and slid right. */
  html.drcv-locked .dr-hdwrap { right: var(--drcv-sbw, 0px); }
}

@media (prefers-reduced-motion: reduce) {
  .dr-hd,
  .dr-nav,
  .dr-nav__inner,
  .dr-hd__burger,
}

/* ==========================================================================
   The hamburger

   One glyph, both breakpoints. The bar widths are the proportions of the
   `menu` icon's own paths — 68% / 100% / 68% — so it reads as the same mark
   the rest of the theme draws, while being three elements that can move.

   Three spans rather than that SVG, because of the close state: the outer two
   rotate into the strokes of a cross and the middle one collapses along its
   own length between them. One continuous movement of the same elements. An
   SVG could only be exchanged for another SVG, and an exchange at the moment
   the panel opens reads as a flicker.

   The open state keys off aria-expanded, which both buttons already carry for
   assistive tech, so there is no second source of truth to keep in step.
   ========================================================================== */

.dr-burger {
  position: relative;
  display: block;
  width: 20px;
  height: 15px;
}
.dr-burger__bar {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1.6px;
  margin-top: -.8px;
  border-radius: 2px;
  background: currentColor;
  transition:
    width 320ms cubic-bezier(.62, .01, .2, 1),
    transform 420ms cubic-bezier(.62, .01, .2, 1),
    opacity 200ms ease 120ms;
}
.dr-burger__bar:nth-child(1) { width: 68%; transform: translateY(-6px); }
.dr-burger__bar:nth-child(2) { width: 100%; }
.dr-burger__bar:nth-child(3) { width: 68%; transform: translateY(6px); }

/* Widened to 100% as they turn, so the cross is centred in the box and the
   same size as the mark it replaced. Left at 68% they would make a small X
   sitting against the left edge. */
[aria-expanded="true"] .dr-burger__bar:nth-child(1) { width: 100%; transform: rotate(45deg); }
[aria-expanded="true"] .dr-burger__bar:nth-child(3) { width: 100%; transform: rotate(-45deg); }

/* The middle bar goes first and the outer two turn as it does, so the cross is
   never drawn over a bar that is still on its way out. */
[aria-expanded="true"] .dr-burger__bar:nth-child(2) {
  transform: scaleX(0);
  opacity: 0;
  transition:
    transform 300ms cubic-bezier(.62, .01, .2, 1),
    opacity 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .dr-burger__bar { transition: none !important; }
}

/* ==========================================================================
   3. Mobile header   (226:1549 — 375 x 105)

   A row of three, then the search field, then the optional chip rail. The row
   uses the same `1fr auto 1fr` as the desktop bar so the logo is centred on
   the screen rather than centred in whatever is left between the burger and
   the icons — those two are different widths, and splitting the difference
   would push the wordmark visibly off-centre.
   ========================================================================== */

.dr-mh {
  background: var(--dr-mh-bg, #fff);
  color: var(--dr-mh-text, #1f1f1f);
  padding: 19px 16px 9px;
  position: relative;
  z-index: 20;
  /* The shadow is owned by the scroll section above, which only shows it once
     the bar is actually floating over the page. A permanent one here would win
     on source order and the bar would look lifted even at the top. */
}
.dr-mh__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 20px;
}
.dr-mh__burger {
  grid-column: 1;
  justify-self: start;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  /* Pulled back by the padding the tap target adds, so the glyph itself lands
     on the 16px gutter the design draws it on rather than 16px + the slack. */
  margin-inline-start: -4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.dr-mh__logo { grid-column: 2; justify-self: center; display: block; }
.dr-mh__logo img {
  display: block;
  width: var(--dr-mlogo-w, 96px);
  height: auto;
  aspect-ratio: var(--dr-mlogo-ar, auto);
}
.dr-mh__logo--empty { min-height: 20px; }
.dr-mh__logo-text {
  font-family: var(--dr-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--dr-mh-text, var(--dr-hd-ink));
}
.dr-mh__icons {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dr-mh__icon {
  position: relative;
  display: grid;
  place-items: center;
  color: inherit;
}
.dr-mh__badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -8px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding-inline: 4px;
  border-radius: var(--dr-r-pill);
  background: var(--dr-cart-badge, var(--dr-hd-badge));
  color: #fff;
  font-family: var(--dr-chrome);
  font-weight: 500;
  font-size: 9.5px;
  line-height: 1;
}
.dr-mh__badge[hidden] { display: none; }

/* 226:1557 — a real field, with the glyph at the trailing end. */
.dr-mh__search {
  margin-top: 19px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding-inline: 14px;
  background: #fff;
  border: 1px solid var(--dr-mh-field-border, #d8d5d2);
  border-radius: 32px;
}
.dr-mh__search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--dr-ui);
  font-size: 12px;
  line-height: 1.658;
  color: var(--dr-mh-text, #1f1f1f);
}
.dr-mh__search input::placeholder { color: var(--dr-mh-placeholder, #1f1f1f); }
.dr-mh__search input:focus { outline: none; }
.dr-mh__search-icon {
  display: flex;
  flex: 0 0 auto;
  color: var(--dr-mh-text, #1f1f1f);
}

.dr-mh__chips {
  display: flex;
  gap: 5px;
  margin-top: 12px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: -16px;
  padding-inline: 16px;
}
.dr-mh__chips::-webkit-scrollbar { display: none; }

/* ==========================================================================
   4. Mobile navigation drawer

   Replaces the full-screen mobile menu. It arrives from the left, which is the
   edge its own button sits on — see the note in the markup for why that beat a
   bottom sheet and a right-hand drawer.

   The panel and the scrim animate on separate properties: the panel on
   transform, the scrim on opacity. Neither touches layout, so opening it
   cannot move the page behind it however long the category list turns out to
   be.
   ========================================================================== */

.drm {
  position: fixed;
  inset: 0;
  z-index: 95;
}
.drm[hidden] { display: none; }

.drm__scrim {
  position: absolute;
  inset: 0;
  appearance: none;
  border: 0;
  padding: 0;
  cursor: default;
  background: rgba(20, 17, 14, .46);
  /* Blurring what is behind it is most of what separates a drawer that feels
     placed over the page from one that feels pasted onto it. Guarded, because
     a phone that cannot do it should get the tint alone rather than a panel
     that stutters. */
  opacity: 0;
  transition: opacity 420ms ease;
}
@supports (backdrop-filter: blur(2px)) {
  .drm__scrim { backdrop-filter: blur(2px); }
}
.drm.is-open .drm__scrim { opacity: 1; }

.drm__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  /* Never the full width. The strip of page left showing is what says the
     drawer is over the site rather than a page of its own, and it gives the
     thumb somewhere to tap that is not a close button. */
  width: min(86vw, 400px);
  display: flex;
  flex-direction: column;
  background: var(--dr-mh-bg, #fff);
  box-shadow: 0 0 60px -12px rgba(20, 17, 14, .38);
  transform: translate3d(-100%, 0, 0);
  /* Out faster than in. A panel that leaves at the speed it arrived feels
     reluctant; the eye only needs to follow it on the way in. */
  transition: transform 340ms cubic-bezier(.4, 0, .2, 1);
}
.drm.is-open .drm__panel {
  transform: none;
  transition: transform 460ms var(--dr-hd-ease, cubic-bezier(.32, .72, 0, 1));
}

/* ---- head ---- */
.drm__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--dr-hd-line-2);
}
.drm__brand { display: block; line-height: 0; }
.drm__logo { display: block; width: var(--dr-mlogo-w, 88px); height: auto; aspect-ratio: var(--dr-mlogo-ar, auto); }
.drm__brand-text {
  font-family: var(--dr-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--dr-mh-text, var(--dr-hd-ink));
}

.drm__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--dr-hd-field);
  color: var(--dr-mh-text, var(--dr-hd-ink));
  cursor: pointer;
}
.drm__close-box { position: relative; display: block; width: 15px; height: 15px; }
.drm__close-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.6px;
  margin-top: -.8px;
  border-radius: 2px;
  background: currentColor;
}
.drm__close-bar:nth-child(1) { transform: rotate(45deg); }
.drm__close-bar:nth-child(2) { transform: rotate(-45deg); }

/* ---- search ---- */
.drm__search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 18px 6px;
  padding: 0 14px;
  height: 46px;
  background: var(--dr-hd-field);
  border: 1px solid var(--dr-mh-field-border, var(--dr-hd-line));
  border-radius: var(--dr-r-pill, 999px);
}
.drm__search-icon { display: flex; flex: 0 0 auto; color: var(--dr-hd-placeholder); }
.drm__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--dr-chrome);
  font-size: 15px;   /* 16 or above avoids iOS zooming the page on focus; 15
                        is the compromise the rest of the theme's fields use,
                        and the field is not focused from this panel anyway —
                        submitting hands over to the search page. */
  color: var(--dr-mh-text, var(--dr-hd-ink));
}
.drm__search-input:focus { outline: none; }

/* ---- the scrolling body ---- */
.drm__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 max(24px, env(safe-area-inset-bottom));
}

.drm__list { margin: 0; padding: 0; list-style: none; }
.drm__item { border-bottom: 1px solid var(--dr-hd-line-2); }
.drm__item:last-child { border-bottom: 0; }

.drm__row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  min-height: 56px;          /* comfortably past the 44px touch target floor */
  border: 0;
  background: none;
  text-align: start;
  cursor: pointer;
  color: var(--dr-mh-text, var(--dr-hd-ink));
}
.drm__row-title {
  flex: 1 1 auto;
  font-family: var(--dr-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
}
.drm__row-count {
  flex: 0 0 auto;
  font-family: var(--dr-mono);
  font-size: 11px;
  color: var(--dr-hd-ink-3);
}
.drm__go { flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--dr-hd-ink-3); }

/* The plus that becomes a minus — two bars, because a character can only be
   exchanged for another character. */
.drm__sign { position: relative; flex: 0 0 auto; width: 16px; height: 16px; color: var(--dr-hd-ink-2); }
.drm__sign-bar {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  margin-top: -.75px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 360ms var(--dr-hd-ease, cubic-bezier(.32, .72, 0, 1));
}
.drm__sign-bar--v { transform: rotate(90deg); }
.drm__row[aria-expanded="true"] .drm__sign-bar { transform: rotate(180deg); }
.drm__row[aria-expanded="true"] .drm__sign-bar--v { transform: rotate(180deg) scaleX(0); }

/* 0fr -> 1fr. The browser interpolates the track itself, so this is a real
   height animation at any content length with nothing measured in JavaScript
   and nothing written on the frame path. */
.drm__panel-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--dr-hd-ease, cubic-bezier(.32, .72, 0, 1));
}
.drm__sub-in {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 240ms ease,
    visibility 0s linear 420ms;
}
.drm__row[aria-expanded="true"] + .drm__panel-sub { grid-template-rows: 1fr; }
.drm__row[aria-expanded="true"] + .drm__panel-sub .drm__sub-in {
  visibility: visible;
  opacity: 1;
  transition: opacity 300ms ease 120ms, visibility 0s;
}

.drm__all,
.drm__group,
.drm__sub {
  display: block;
  font-family: var(--dr-ui);
  color: var(--dr-mh-text, var(--dr-hd-ink));
}
.drm__all {
  margin: 2px 18px 10px;
  padding: 9px 14px;
  border-radius: var(--dr-r-pill, 999px);
  background: var(--dr-hd-field);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  color: var(--dr-nav-active, var(--dr-hd-accent));
}
.drm__group {
  padding: 11px 18px 4px;
  font-weight: 600;
  font-size: 14.5px;
}
.drm__subs { padding: 0 18px 10px; }
.drm__sub {
  padding: 9px 0 9px 14px;
  font-weight: 400;
  font-size: 14px;
  color: var(--dr-hd-ink-2);
  /* A hairline lane down the left, so the third level reads as belonging to
     the second rather than as a shorter version of it. */
  border-left: 1px solid var(--dr-hd-line-2);
}

/* ---- offers, banner, account ---- */
.drm__offers {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 16px 18px;
  border-top: 1px solid var(--dr-hd-line-2);
  font-family: var(--dr-ui);
  color: var(--dr-mmenu-offers, var(--dr-hd-accent));
}
.drm__offers-title { flex: 1 1 auto; font-weight: 600; font-size: 15px; }
.drm__offers-sub { flex: 0 0 auto; font-family: var(--dr-mono); font-size: 11px; opacity: .8; }

.drm__banner {
  margin: 14px 18px 4px;
  padding: 16px;
  border-radius: 12px;
  background: var(--dr-mmenu-banner-bg, #eef6f1);
  border: 1px solid var(--dr-mmenu-banner-border, #cbe2d5);
  display: grid;
  gap: 4px;
  justify-items: start;
}
.drm__banner-title {
  font-family: var(--dr-ui);
  font-weight: 700;
  font-size: 15px;
  color: var(--dr-mmenu-banner-title, var(--dr-hd-accent));
}
.drm__banner-sub {
  font-family: var(--dr-ui);
  font-size: 13px;
  color: var(--dr-mmenu-banner-sub, #4a7d64);
}
.drm__banner-cta {
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: var(--dr-r-pill, 999px);
  background: var(--dr-mmenu-banner-title, var(--dr-hd-accent));
  color: #fff;
  font-family: var(--dr-ui);
  font-weight: 600;
  font-size: 13px;
}

.drm__foot {
  margin-top: 14px;
  padding: 6px 18px 0;
  border-top: 1px solid var(--dr-hd-line-2);
}
.drm__footlink {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-family: var(--dr-ui);
  font-size: 14.5px;
  color: var(--dr-hd-ink-2);
}
.drm__footlink-icon { display: flex; flex: 0 0 auto; color: var(--dr-hd-ink-3); }

/* Nothing here is load-bearing for reading the menu, so reduced motion gets
   the panel placed rather than moved. */
@media (prefers-reduced-motion: reduce) {
  .drm__scrim,
  .drm__panel,
  .drm__panel-sub,
  .drm__sub-in,
  .drm__sign-bar { transition: none !important; }
}

/* Holding the page still while the drawer is open. Its own class, so it can
   overlap the cart drawer's lock without either releasing the other. */
html.drm-locked {
  overflow: hidden;
  padding-right: var(--drm-sbw, 0px);
}
html.drm-locked .dr-hdwrap { right: var(--drm-sbw, 0px); }

/* The variant picker, at every width rather than only on desktop. The rule
   inside the 990px block covers the case this actually bites - a narrow window
   on a desktop still has a classic scrollbar - but a lock that compensates the
   page and not the header is wrong at any size, and on a system with overlay
   scrollbars the variable is 0 and this costs nothing. */
html.drcv-locked .dr-hdwrap { right: var(--drcv-sbw, 0px); }

/* The drawer is a phone component. Above the breakpoint the desktop nav row is
   the navigation, and leaving this reachable would give a wide window two. */
@media (min-width: 990px) {
  .drm { display: none !important; }
}

/* ==========================================================================
   5. Mobile tab bar — REMOVED

   The fixed Home / Shop / Offers / Cart / Account row that used to sit at the
   bottom of every mobile page is gone, along with the space it reserved.

   It set two things the rest of the theme read: body.dr-has-tabbar, which
   padded 62px off the bottom of the page, and --dr-tabbar-space, which other
   floating elements used to hold themselves clear of it. Both are gone here,
   and every remaining var(--dr-tabbar-space, 0px) now resolves to its 0px
   fallback rather than to 62 — which is why those call sites did not all have
   to be found and edited for the page to lay out correctly. They were tidied
   anyway, so nothing is left asking about a bar that does not exist.
   ========================================================================== */


/* ==========================================================================
   THE MOBILE CATEGORY CHIPS, 226:1560

   They were .dr-chip--plain: a bordered, uppercase, letter-spaced token in the
   theme's mono face, which is the shape this site uses for a FILTER. These are
   not filters. They are the first thing under the search field and the fastest
   way into a category, and the frame draws them accordingly - a warm filled
   pill with the category's own photograph at the head of it.

   The picture is the whole difference. A row of words is a list of links; a row
   of small round photographs is somewhere to go, and it is legible at a glance
   on a bar that a thumb is already resting on.

   Sizes are the frame's, rounded off its sub-pixel values: 3.919 -> 4, 11.757
   -> 12, 21.162 -> 21, 32.135 -> 32. Keeping the decimals would be false
   precision on a box whose height is decided by a 13px line.
   ========================================================================== */
.dr-mh__chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Asymmetric on purpose: the image sits almost flush at the leading edge and
     the word needs room after it, which is what makes the pill read as a badge
     with a picture rather than a button with an icon dropped in. */
  padding: 4px 12px 4px 4px;
  border: 0;
  border-radius: 32px;
  background: var(--dr-mh-chip-bg, #fff2e6);
  font-family: var(--dr-ui);
  font-weight: 500;
  font-size: 13px;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: var(--dr-mh-chip-ink, #000);
  white-space: nowrap;
}

/* A link with no image to borrow keeps the pill and loses the inset, so it
   still reads as one of the row rather than as a chip missing its picture. */
.dr-mh__chip:not(.dr-mh__chip--img) { padding-left: 12px; }

.dr-mh__chip-img {
  flex: 0 0 auto;
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  object-fit: cover;
}

.dr-mh__chip-t { display: block; }

/* The current category, said with weight rather than with another colour. The
   row is already warm, and a second fill in it would compete with the search
   field directly above. */
.dr-mh__chip.is-on { font-weight: 700; }


/* The slot the category chips are moved into, and the row itself once it is
   there. Both are laid out here rather than in the section's own stylesheet
   because this is where the row ends up and what it has to line up with - the
   search field directly above it.

   The slot collapses to nothing while it is empty, which is every desktop
   page and every page before the script has run. */
.dr-mh__chipslot:empty { display: none; }

.dr-cats__chips {
  display: flex;
  gap: 5px;
  margin-top: 12px;
  /* Bled to the bar's edge so the last chip can clear it, then re-inset, which
     is the same trick the logo strip uses. Without it the row stops short of
     the edge and reads as cut off rather than as continuing. */
  margin-inline: calc(var(--dr-mh-px, 16px) * -1);
  padding-inline: var(--dr-mh-px, 16px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dr-cats__chips::-webkit-scrollbar { display: none; }
.dr-cats__chips[hidden] { display: none; }