.header {
  --header-column-gap: 8px;
  --color-text: var(--color-header-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background-color: rgb(var(--color-header-background));
  color: rgb(var(--transparent-color-text, var(--color-header-text)));
}
.header a:not(.button),
.header a:not(.button):hover {
  color: inherit;
}
.header .header__menu-drawer .modal__content {
  color: rgb(var(--color-text));
  background: rgb(var(--color-header-background));
}
.header .search-modal__content {
  color: rgb(var(--color-text));
}
@media screen and (max-width: 959px) {
  .header {
    --header-column-gap: 0px;

    min-height: 60px;
  }
}
.header #cart-icon-bubble-wrapper,
.header #cart-icon-bubble-wrapper-mobile {
  display: flex;
}
.header.is-transparent {
  position: absolute;
  width: 100%;
  background-color: transparent;
}
.header.is-transparent.is-transparent--active::before {
  transform: scaleY(1);
}
.header.is-transparent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: -1;
  background: rgba(var(--color-page-background, #fff));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.shopline-section-header-scrolling .header.is-transparent::before {
  transition: none;
}
.header__full_width {
  max-width: 100%;
}
.header__container {
  display: grid;
  column-gap: var(--header-column-gap);
  align-items: center;
}
@media (max-width: 959px) {
  .header__container {
    grid-template: "tools logo buttons" auto / auto 1fr !important;
  }
  .header__container .header__buttons {
    justify-self: end;
    display: flex;
  }
}
.header__container--left-left {
  grid-template: "logo menu tools icons" auto / auto 1fr auto auto;
}
@media screen and (min-width: 960px) {
  .header__container--left-left .header__heading {
    margin-right: 12px;
  }
}
@media (min-width: 960px) {
  .tile-search.header__container--left-left {
    grid-template: "logo menu tools icons" auto / auto 1fr minmax(auto, 348px) auto;
  }
}
.header__container--left-line {
  grid-template:
    "logo . tools icons" auto
    "menu menu menu menu" auto
    / auto 1fr auto auto;
}
.header__container--left-line .header-inline-menus__item:first-child {
  padding-left: 0;
}
@media (min-width: 960px) {
  .tile-search.header__container--left-line {
    grid-template:
      "logo tools tools icons" auto
      "menu menu menu menu" auto
      / auto 1fr auto auto;
  }
  .tile-search.header__container--left-line .header__tools {
    /* 2026-06-27: was justify-self: center
       which put the search form in the middle
       of the tools cell, leaving a visible
       gap on both sides against logo and
       icons. The merchant's reference puts
       the search flush against the right
       icons cluster — switch to
       justify-content: flex-end so the form
       hugs the right edge of the cell (and
       therefore the icons). justify-self is
       for grid items and only aligns the
       cell's own box; the form INSIDE the
       cell is a flex child of the tools
       container, so the layout that needs to
       be tweaked is the inner flex
       justify-content, not the outer
       grid-justify-self. */
    justify-content: flex-end;
  }
}
@media screen and (min-width: 960px) {
  .header__container--middle-line {
    grid-template:
      "tools logo buttons" auto
      "menu menu menu" auto
      / 1fr auto 1fr;
  }
}
@media screen and (max-width: 959px) {
  .header__container--middle-line {
    grid-template:
      "logo buttons" auto
      "menu menu" auto
      / auto 1fr;
  }
}
.header__container--middle-line .header__inline-nav {
  /* Center the inline nav in its
     grid track. The grid template
     is "menu menu menu" — the menu
     cell spans the full width of
     the 3 columns (1fr + auto + 1fr).
     For the nav's flex children
     (the <ul> of links) to be
     centered, we need:
     - justify-self: center (align
       the nav's box in the cell)
     - the nav itself to use flex /
       inline-flex so its children
       hug the center.
     margin: auto alone is not
     enough because the menu track
     is full width. justify-self:
     center overrides the default
     stretch behavior. */
  margin: auto;
  justify-self: center;
  align-self: center;
  width: auto;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__container--middle-line .header__buttons {
  grid-area: buttons;
  justify-self: end;
  display: flex;
}
@media screen and (min-width: 960px) {
  .header__container--middle-left {
    grid-template: "menu logo buttons" auto / 1fr auto 1fr;
  }
}
@media screen and (max-width: 959px) {
  .header__container--middle-left {
    grid-template: "logo buttons" auto / auto 1fr;
  }
}
.header__container--middle-left .header__buttons {
  grid-area: buttons;
  justify-self: end;
  display: flex;
}
@media (min-width: 960px) {
  .tile-search.header__container--middle-left .header__buttons {
    width: 100%;
  }
}

/* ============================================================
   2026-06-27: "logo-only" navigation layout.

   New 5th option. Row 1 on PC is logo | (1fr gap) |
   search | btnbox (user + cart) | locale; row 2 is
   the centered inline main menu.

   Element → grid-area mapping for .header__container--logo-only:
     .header__heading                       -> logo
       (default grid-area: logo already
        matches, no override needed.)
     .header__tools.display-none-desktop    -> menu
       (mobile hamburger)
     .header__tools.display-none-tablet     -> search
       (PC tile-search; default grid-area
        is `tools`, which doesn't exist in
        this grid, so auto-placement would
        dump it into the 1fr `.` gap cell —
        which is exactly the "search is in
        the middle" bug from the first
        attempt. Explicit override below.)
     .header__btn-box.display-none-desktop  -> btnbox
       (user + cart; the mobile user+cart
        wrapper is reused on both
        breakpoints in this layout. No
        default grid-area.)
     .header__icons--locale.display-none-tablet -> locale
       (default grid-area is `icons`, which
        doesn't exist in this grid either;
        needs the same override. Without
        this, locale gets dumped into the
        next free cell on the right after
        btnbox, overlapping it.)
     .header__icons--user-cart.display-none-tablet -> HIDDEN entirely
       (we reuse the mobile .header__btn-box
        for user + cart on both breakpoints.)
   ============================================================ */

/* PC (>= 960px) grid.

   Two rows, matching the merchant's reference
   mock (Chiclody logo + 300px search form on
   the left, then a 1fr gap that pushes the
   right cluster — user/cart + locale trigger
   all in one cell — to the right edge):
     row 1 — "logo search . btnbox"
       logo on the left, then the tile-search
       form (column = minmax(0, 300px)),
       then a 1fr `.` gap that pushes the
       btnbox cell (user / cart / locale
       trigger) to the right edge. The earlier
       ordering "logo . search btnbox locale"
       put search in the middle of the row and
       also gave locale its own grid cell,
       which is no longer correct now that
       locale is just another icon inside
       btnbox.
     row 2 — "menu menu menu"
       the inline main menu spans the full
       width of the container; the items
       themselves are centered via
       .header__container--logo-only
       .header__inline-menus
       { justify-content: center; } below. */
@media (min-width: 960px) {
  .header__container--logo-only {
    grid-template:
      "logo search . btnbox" auto
      "menu menu menu" auto
      / auto minmax(0, 300px) 1fr auto;
  }
  .tile-search.header__container--logo-only {
    /* Same track list as the non-tile-search
       variant. With enabled_tile_search the
       form's max-width: 300px caps the search
       column visually, but the track itself is
       minmax(0, 300px) so the column claims
       its 300px share of the row (rather than
       collapsing to the form's intrinsic
       min-content ~150px). */
    grid-template:
      "logo search . btnbox" auto
      "menu menu menu" auto
      / auto minmax(0, 300px) 1fr auto;
  }
  /* Center the inline main menu items in the
     logo-only layout. Without this, the
     default flex (justify-content: flex-start)
     leaves the items left-aligned. left-line
     already does this — mirror it for
     logo-only.

     2026-06-27: bump specificity to (0,3,0)
     so this rule wins over the base
     .header__container--left-line rule below
     (which has the same specificity (0,2,0)
     but comes LATER in the file, so by
     source order it would win otherwise and
     our justify-content: center would be
     overridden — that's exactly the bug
     where the menu is centered on first
     paint and then drifts left after the
     cascade settles). The extra
     .header__inline-menus on the selector
     bumps us over (0,3,0) which beats
     (0,2,0).

     2026-06-27: also force the first/last
     item to 0 padding-inline so a 16px
     padding on the first/last item doesn't
     visually shift the whole row half a step
     to the left — the items ARE centered,
     but the first/last had uneven padding
     pulling the whole group off-center. */
  .header__container--logo-only
    .header__inline-menus.header__inline-menus {
    justify-content: center;
  }
  .header__container--logo-only
    .header-inline-menus__item:first-child {
    padding-left: 0;
  }
  .header__container--logo-only
    .header-inline-menus__item:last-child {
    padding-right: 0;
  }
  /* 2026-06-27: third-party mega-menu plugin
     (scoped CSS, hash class
     ._navigation_1mi6u_2 mega-menu-root
     mega-menu-root-pc) ships with a
     flex-start on the menu root and beats
     our specificity. The plugin's runtime
     stylesheet uses !important, so we have
     to as well. We add the wrapper
     .header__container--logo-only to the
     selector so the override only kicks in
     for the new layout — the other 4
     layouts are unaffected.

     The selector `_navigation_1mi6u_2
     mega-menu-root mega-menu-root-pc` is a
     CSS-Modules hash; the merchant's plugin
     (likely SHOPLINE Mega Menu) emits a
     fresh hash on rebuild, so we can't pin
     to a specific hash. The .mega-menu-root
     + .mega-menu-root-pc class is stable
     across rebuilds (the hash class is
     applied in addition to it), so we
     target the un-hashed class names only.

     The original selector the user
     requested:
       ._navigation_1mi6u_2
       .mega-menu-root.mega-menu-root-pc
     is rewritten to just
       .mega-menu-root.mega-menu-root-pc
     since the hash is plugin-emitted and
     changes on every plugin build. */
  .header__container--logo-only
    .mega-menu-root.mega-menu-root-pc {
    justify-content: center !important;
  }
}

/* Mobile (<= 959px) grid: 2 rows, logo centered. */
@media (max-width: 959px) {
  .header__container--logo-only {
    grid-template:
      "logo" auto
      "menu search btnbox" auto
      / auto 1fr auto;
  }
  .header__container--logo-only .header__heading {
    grid-area: logo;
    justify-self: center;
  }
  .header__container--logo-only .header__tools.display-none-desktop {
    grid-area: menu;
  }
  .header__container--logo-only .header__tools.display-none-tablet {
    grid-area: search;
    width: 100%;
  }
  .header__container--logo-only .header__btn-box {
    grid-area: btnbox;
    justify-self: end;
  }
}

/* The btnbox (mobile user+cart wrapper) is
   display-none-desktop by default — in the new
   layout we want it on BOTH breakpoints, so
   override to flex and use it as the source of
   truth for the user + cart icons.

   2026-06-27: also strip the `.header__icons`
   side-effects that bleed into this wrapper.
   The .header__icons base class sets
     .header__icons { margin-left:
       calc(-1 * var(--header-column-gap)); }
     .header__icons > * { margin-left:
       var(--header-column-gap); }
   The btnbox has both `gap: var(--header-column-gap)`
   and those base rules, so the user + cart
   icons get 8px gap + 8px margin-left = 16px
   between them, and the wrapper is wider than
   its 1fr cell. When that happens the locale
   cell slides off the right edge and ends up
   overlapping the user/cart icons. We zero
   the inherited margin-left on the wrapper
   itself and on its direct children. */
.header__container--logo-only .header__btn-box {
  display: flex !important;
  align-items: center;
  gap: var(--header-column-gap);
  grid-area: btnbox;
  justify-self: end;
  margin-left: 0;
}
.header__container--logo-only .header__btn-box > * {
  margin-left: 0;
}

/* Pin the user-cart wrapper to the btnbox
   cell. The default `.header__icons` has
   grid-area: icons which doesn't exist in
   the new grid ("logo search . btnbox") —
   without this override the user-cart
   wrapper would auto-place into the next
   free cell, overlapping the search form.

   position: relative is required so the
   locale popup (now a child of this wrapper
   after the cart icon) can be absolutely
   positioned against the wrapper's right
   edge. */
.header__container--logo-only .header__icons--user-cart {
  grid-area: btnbox;
  position: relative;
  justify-self: end;
  margin-left: 0;
}
.header__container--logo-only .header__icons--user-cart > * {
  margin-left: 0;
}

/* The locale trigger + popup are now a
   single child inside user-cart. The
   wrapper still needs to be a positioning
   context (it inherits position: relative
   from the rule above). Reset its own
   margin-left so the trigger doesn't get
   a spurious 8px offset (it's a direct
   child of .header__icons which adds
   margin-left: var(--header-column-gap)
   to its children). */
.header__container--logo-only .header__locale {
  margin-left: 0;
  display: inline-flex !important;
  align-items: center;
  position: relative !important;
}
.header__container--logo-only .header__locale > * {
  margin-left: 0;
}

/* The locale .header__icons is gone in the new
   layout — the locale trigger now lives
   INSIDE .header__icons--user-cart (right
   after the cart icon) and uses that wrapper
   as its positioning context for the popup.

   2026-06-27: removed the `display: none`
   on .header__icons--user-cart. The mobile
   btnbox (`.header__btn-box`) was supposed
   to replace it for the user + cart icons,
   but the locale trigger lives inside
   user-cart — so we need this wrapper to
   show on PC. On mobile, the base
   `display-none-tablet` keeps it hidden as
   before. */

/* The PC tile-search lives inside
   .header__tools.display-none-tablet, which is
   hidden on mobile by default. The new layout
   wants it on mobile too — override to flex
   on the wrapper, and on the inner
   .search-modal__content (the snippet itself
   also stamps display-none-tablet). The
   `grid-area: search` override is the critical
   fix — without it the default `grid-area:
   tools` would auto-place the search into the
   1fr `.` gap cell, putting it in the middle
   of the row instead of next to btnbox. */
.header__container--logo-only .header__tools.display-none-tablet {
  display: flex !important;
  grid-area: search;
  /* Default .header__tools { justify-self:
     flex-start; } puts the form at the left
     edge of the search cell, which means
     when the form is smaller than the cell
     (e.g. when the form doesn't grow to its
     300px max) there'd be a visible gap
     between the form and btnbox. flex-end
     anchors the form to the right edge of
     the cell so it always sits flush
     against the btnbox. */
  justify-self: flex-end;
}
.header__container--logo-only .header__tools.display-none-tablet .search-modal__content.display-none-tablet {
  display: flex !important;
}

/* The mobile .header__tools also contains a
   modal search trigger (<header-modal>). In the
   new layout we only want the hamburger
   (<header-menu-drawer>) on mobile — the modal
   search is replaced by the inline tile-search.
   Hide the modal trigger so the user doesn't
   see two search affordances. */
.header__container--logo-only .header__tools.display-none-desktop .header__search {
  display: none !important;
}

/* ============================================================
   Logo-only: locale is a hover/click popup
   (not an inline row of dropdowns).

   Trigger: a single .header__locale-trigger
   button (renders the country ISO code by
   default, the merchant can replace the
   label with a flag SVG or a custom icon).
   Popup: .header__locale-popup wraps the
   existing <localization-form>, which still
   contains the country + language
   <dropdown-menu>s — they're just collapsed
   until the trigger is activated.

   Show rules:
     - :hover on the wrapper (desktop)
     - .is-open class on the popup
       (toggled by JS so the popup is also
       accessible via click / keyboard / touch)
   ============================================================ */

.header__container--logo-only .header__locale-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.header__container--logo-only .header__locale-trigger:hover {
  background-color: rgba(var(--color-entry-line, 0 0 0), 0.06);
}

/* Defensive: every property here is
   !important because the popup's display
   is being reset by a downstream rule
   that we can't see. The bug we hit: the
   popup showed up in the normal flow
   (not absolutely positioned) when the
   trigger was clicked, so the 3 sections
   rendered side-by-side under the user
   cart icons. Most likely a base.css
   rule with .is-open or :hover sets
   position: static + display: block; we
   preempt by force-marking our intent. */
.header__container--logo-only .header__locale-popup {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: auto !important;
  right: 0 !important;
  margin-top: 12px !important;
  background: rgb(var(--color-background, 255 255 255)) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  /* Lock the popup to 360px so the width
     is identical before and after a
     list expands. min-width alone does
     not fix width: max-content (which
     wins); we set width: 360px and
     max-width: 360px so the layout is
     fully determined and the JS
     positionPopup() in
     section-header-locale-popup.js
     can compute a stable right offset. */
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  z-index: 100 !important;
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  float: none !important;
  clear: none !important;
}
/* Hover-driven: no .is-open class needed
   anymore. The popup is shown on mouseenter
   of the wrapper and hidden on mouseleave.
   We keep CSS :hover as a backup in case
   JS fails. */
.header__container--logo-only .header__locale:hover .header__locale-popup,
.header__container--logo-only .header__locale-popup.is-open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Small upward arrow pointing at the trigger. */
.header__container--logo-only .header__locale-popup::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 12px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgb(var(--color-background, 255 255 255));
}
/* 2026-06-30: dead duplicate. The other copy above (without
   !important) was a fallback that pre-dated the JS-only
   approach. Now that the JS sets everything inline with
   !important, this rule is a no-op; kept for diff stability
   but commented. */
.header__container--logo-only .header__locale-popup.is-open {
  display: block;
}

/* Reset the inner localization layout: the
   base CSS lays the language + country
   dropdowns out side-by-side (suitable for
   inline use); inside the popup we want
   them stacked vertically. */
.header__container--logo-only .header__locale-popup .header__localization {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.header__container--logo-only
  .header__locale-popup
  .header__localization
  form {
  /* The base .header__localization form is
     a row flex (column-gap: 20px) — that's
     the inline 2-up country/language layout
     used in the standard theme. Inside the
     popup we want the three sections
     stacked, so flip the form's direction
     to column too. Without this override
     the form row would keep Country /
     Currency / Language side-by-side even
     though .header__localization itself
     is column. */
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.header__container--logo-only
  .header__locale-popup
  .dropdown-menu.dropdown-menu {
  width: 100% !important;
  background: #F9F9F9 !important;
  border-radius: 4px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  /* Display: block so the dropdown-menu
     custom element + the .dropdown-menu
     div both stack vertically. Without
     this the SHOPLINE base may render
     them inline-block side-by-side. */
  display: block !important;
}
.header__container--logo-only
  .header__locale-popup
  button.dropdown-menu__button.dropdown-menu__button {
  width: 100% !important;
  /* Left-align the label, push the
     caret (svg / icon) to the right
     edge. The base .body5 class
     applies `text-align: center;
     justify-content: center;` which
     centers the contents; we override
     with `text-align: left; justify-
     content: space-between;` so the
     flag+country name sits flush left
     and the ▾ arrow sits flush right.

     Selector includes `button`
     (element) to bump specificity
     to (0,4,1) — base.css's
     `button.dropdown-menu__button.body5`
     is (0,3,1); we beat it by 1 in
     the class column. */
  text-align: left !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 12px;
  border: 0;
  border-radius: 4px;
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
  /* Force 40px height — the user's
     reference (menu.html) shows each
     collapsed row at 40px. Without an
     explicit `height`, the button is
     38.2px (line-height * 13px + 20px
     padding), which feels off when
     placed next to 40px sibling
     blocks. */
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  /* Match the parent .dropdown-menu
     background (#F9F9F9) — the user
     wants the collapsed button to
     sit on the same gray fill, not
     transparent over white. */
  background: #F9F9F9 !important;
  /* Reset default <button> look —
     base.css may have outline /
     box-shadow. */
  outline: 0 !important;
  box-shadow: none !important;
  /* Inside the button, force the
     text node (the country name) to
     also be left-aligned in case
     base.css wraps the text in a
     <span data-label>. */
  text-align: left !important;
}
.header__container--logo-only
  .header__locale-popup
  button.dropdown-menu__button.dropdown-menu__button
  span {
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.4 !important;
}
/* Caret (the ▼ / arrow-down icon at the
   right end of each button). Rotate
   180° when the button is expanded
   (aria-expanded="true") so the arrow
   points up — this is the standard
   dropdown pattern.

   The base.css .icon-arrow may have
   its own transform or transition; we
   re-assert both with !important to
   win.

   transition 0.2s makes the rotation
   smooth, not snap. */
.header__container--logo-only
  .header__locale-popup
  .dropdown-menu__button
  .icon-arrow {
  display: inline-block !important;
  transition: transform 0.2s ease !important;
  transform: rotate(0deg) !important;
  flex-shrink: 0;
}
.header__container--logo-only
  .header__locale-popup
  .dropdown-menu__button[aria-expanded="true"]
  .icon-arrow {
  /* When the list is open, rotate the
     arrow 180° so it points up. */
  transform: rotate(180deg) !important;
}
.header__container--logo-only
  .header__locale-popup
  .dropdown-menu__list-wrapper.dropdown-menu__list-wrapper {
  /* The base list opens at the bottom of
     the dropdown button with absolute
     positioning (the `.bottom` modifier
     anchors it below the trigger). Inside
     the popup we want it to be a normal
     flow block so the popup grows to
     fit. SHOPLINE base.css applies
     `position: absolute; top: 100%;
     left: 0; right: auto` to
     `.dropdown-menu__list-wrapper.bottom`,
     which floats the list to the wrong
     anchor. We use double-class to bump
     specificity to (0,4,0) — base.css
     uses single class (0,2,0) plus
     `.bottom` modifier (0,1,0) which
     totals (0,3,0). Our double class
     wins even without !important, but
     we add !important defensively in
     case SHOPLINE also bumps specificity. */
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 4px 0 0 0 !important;
  margin-top: 4px !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  animation: none !important;
  transform: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  float: none !important;
  clear: both !important;
  z-index: auto !important;
  /* Same flag-ready indicator:
     placeholder state uses the inline
     class; we don't want base.css
     background: white at the .bottom
     or .body4 stage. */
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
.header__container--logo-only .header__locale-popup
  .dropdown-menu__list-wrapper[hidden] {
  /* Re-enable the [hidden] attribute's
     intended behavior (display: none).
     Our other rule makes the wrapper
     `display: block !important` which
     would otherwise override [hidden]
     (because double-class specificity
     0,4,0 > attribute selector 0,1,0).
     Here we re-assert the [hidden]
     state by combining the attribute
     selector with our specificity class,
     reaching 0,5,0, which beats our
     own display: block !important. */
  display: none !important;
}
/* List (Country / Language) — capped at
   280px and scrolls internally. The list
   itself takes 280px; the popup's height
   grows to fit (each section is its own
   column flex child of the form). The
   280px cap is a soft limit: if the list
   has fewer than 6 items it will be
   shorter; the popup simply won't grow
   past 280px for that section. */
.header__container--logo-only .header__locale-popup .dropdown-menu__list {
  max-height: 280px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  /* Custom scrollbar: thin and subtle.
     Webkit (Chrome / Edge / Safari). */
  scrollbar-width: 3px;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.header__container--logo-only .header__locale-popup .dropdown-menu__list::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.header__container--logo-only .header__locale-popup .dropdown-menu__list::-webkit-scrollbar-track {
  background: transparent;
}
/* Hide the up / down arrow buttons on
   the scrollbar — only the draggable
   thumb remains visible.

   The arrow buttons are the
   `::-webkit-scrollbar-button:vertical:decrement`
   (▲ at top) and `:vertical:increment`
   (▼ at bottom) stateful
   pseudo-elements. Just hiding the
   `::-webkit-scrollbar-button` base
   pseudo-element isn't enough; the
   `:vertical:decrement` /
   `:vertical:increment` /
   `:horizontal:decrement` /
   `:horizontal:increment` variants
   have their own state. */
.header__container--logo-only
  .header__locale-popup .dropdown-menu__list::-webkit-scrollbar-button,
.header__container--logo-only
  .header__locale-popup
  .dropdown-menu__list::-webkit-scrollbar-button:vertical,
.header__container--logo-only
  .header__locale-popup
  .dropdown-menu__list::-webkit-scrollbar-button:vertical:decrement,
.header__container--logo-only
  .header__locale-popup
  .dropdown-menu__list::-webkit-scrollbar-button:vertical:increment,
.header__container--logo-only
  .header__locale-popup
  .dropdown-menu__list::-webkit-scrollbar-button:horizontal,
.header__container--logo-only
  .header__locale-popup
  .dropdown-menu__list::-webkit-scrollbar-button:horizontal:decrement,
.header__container--logo-only
  .header__locale-popup
  .dropdown-menu__list::-webkit-scrollbar-button:horizontal:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  visibility: hidden !important;
  -webkit-appearance: none !important;
}
.header__container--logo-only .header__locale-popup .dropdown-menu__list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}
/* The corner where horizontal and
   vertical scrollbars meet. Hide it
   so the chrome stays clean. */
.header__container--logo-only .header__locale-popup .dropdown-menu__list::-webkit-scrollbar-corner {
  background: transparent;
  display: none;
}
.header__container--logo-only .header__locale-popup .dropdown-menu__list li {
  display: flex !important;
  align-items: center;
  width: 100%;
  /* Force 40px — matches the
     collapsed button height. The
     reference (menu.html) shows each
     list row at 40px. base.css may
     set padding on <li> directly;
     we override min-height so the
     row stays 40px regardless of
     padding. */
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  /* The <a> inside the <li> needs to
     be the clickable area, so the <a>
     stretches to fill the 40px row. */
}
.header__container--logo-only .header__locale-popup .dropdown-menu__list a {
  display: flex !important;
  align-items: center;
  /* Stretch to the <li>'s 40px row
     so the entire row is clickable
     and the hover background covers
     the full row. */
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  color: rgb(var(--color-text, 33 33 33)) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  /* 2026-06-30: was white-space: nowrap. Changed to
     normal so long country names (e.g. "United Kingdom
     of Great Britain and Northern Ireland") wrap to
     multiple lines instead of causing the column to
     scroll horizontally. The popup is locked to 360px
     (see layout section) so wrapped text fits within
     the fixed width and the position stays stable. */
  white-space: normal !important;
  word-break: break-word !important;
  /* The base.css .dropdown-menu__list
     a may set a fixed min-height
     (e.g. 36px); force 0 so the <a>
     shrinks / grows with the <li>. */
  min-height: 0 !important;
}
.header__container--logo-only .header__locale-popup .dropdown-menu__list li:hover,
.header__container--logo-only .header__locale-popup .dropdown-menu__list a:hover {
  /* Hover background — the same
     #F9F9F9 fill as the collapsed
     button. base.css may set
     background on the <li> or <a> on
     hover with a different color;
     we re-assert with !important.
     The hover covers the entire 40px
     row (not just the text). */
  background: #F9F9F9 !important;
}
/* ==== NUCLEAR OPTION for popup inner layout ====
   The platform's base `.header__localization`
   rules (lines 936+) plus the platform's
   custom-element wrapper <localization-form>
   keep the 3 sections inline. We've tried
   (in order):
     1. Override .header__localization form
        to flex-direction: column
     2. Override each .header__locale-popup-section
        to display: block !important
   Neither is winning on the merchant's live
   preview. The most likely cause is that the
   platform's <localization-form> shadow
   boundary or its inner runtime CSS is
   intercepting our rules.
   So we hit it from a different angle: use
   the descendant combinator with the highest
   available pseudo-classes and the
   platform-neutral :is() selector. Selectors
   that target the actual element NAMES
   (form, h3, dropdown-menu) are still
   reachable through the real DOM, and
   `* { ... !important }` forces our intent
   past any platform-injected rule. */

/* Bump the .header__localization selector
   specificity to (0,3,0) by repeating the
   class name — this beats the base
   .header__localization form (0,1,1) and
   any other platform rule that uses a
   single .header__localization class. The
   double-class trick is supported in all
   evergreen browsers. */
.header__container--logo-only
  .header__locale-popup
  .header__localization.header__localization {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}
.header__container--logo-only
  .header__locale-popup
  .header__localization.header__localization
  form {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Each section: 6px bottom margin for a
   tiny visual breath between the 3
   sections (Country / Currency / Language)
   so the user's eye can pick out where
   one section ends and the next begins.
   The form's row-gap is 0; the
   inter-section gap comes from this
   margin. */
.header__container--logo-only
  .header__locale-popup
  .header__localization.header__localization
  form > * {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 6px 0 !important;
  float: none !important;
  clear: both !important;
}
.header__container--logo-only
  .header__locale-popup
  .header__localization.header__localization
  form > *:last-child {
  margin-bottom: 0 !important;
}
/* Also flatten the custom-element wrapper
   <localization-form> which is the parent
   of the <form>. If the platform styles
   that with display: inline-block or
   similar, it can also break the column
   layout. */
.header__container--logo-only
  .header__locale-popup
  .header__localization
  localization-form {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* The label in the popup. Originally we
   used h3 but the base `h3` global reset
   brings `font-size: 1.5em / 1.6em`,
   `font-weight: 700`, `margin: 0.83em 0`.
   We switched the markup to <div> to dodge
   that. Keep the explicit font-size: 13px
   + a small opacity to read as a secondary
   label like the reference. Use the
   double-class specificity bump to defeat
   any base.css rule that targets
   `.body5` or `.label` on this element. */
.header__container--logo-only
  .header__locale-popup
  .header__locale-popup-title.header__locale-popup-title {
  margin: 0 0 5px 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: rgb(var(--color-text, 33 33 33)) !important;
  opacity: 0.75 !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* The currency symbol ($, €, £, ¥) in the
   Currency section. The base
   .header__localization .dropdown-menu__button
   > span { margin-right: 6px } rule puts a
   6px gap between text fragments; we want
   the symbol snug against the ISO code. */
.header__container--logo-only
  .header__locale-popup
  .header__locale-popup-currency-symbol {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  margin-right: 6px;
  color: rgb(var(--color-text, 33 33 33));
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}
.header__container--logo-only
  .header__locale-popup
  .header__locale-popup-currency-code {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: rgb(var(--color-text, 33 33 33));
  vertical-align: baseline;
}
/* The trigger's flag span (in the header,
   next to the user/cart icons) — circular
   flag clipped from the square emoji. The
   view button inside the popup uses square
   flags; only the trigger (which is just a
   22x22 icon-button) gets a round crop.

   Implementation: 22x22 box with
   border-radius: 50% + overflow: hidden.
   The emoji glyph inside is left at its
   natural square aspect; the box's
   border-radius crops it into a circle.
   22x22 (vs the popup's 22x16) means the
   circle has the same height as a 16-tall
   square's diameter when its width is
   22px — slightly bigger than the square
   flag in the list, which is what the user
   asked for ("trigger 是圆形国旗, list 是
   方形"). */
.header__container--logo-only
  .header__locale-trigger-flag.header__locale-trigger-flag {
  /* Double-class selector bumps
     specificity to (0,3,0); base.css may
     set the flag span to 38x38 (matching
     the parent .header__icon-button's
     38x38 button size). We want 20x20
     to match the visual weight of the
     cart / user icons (20x20 glyphs
     inside the 38x38 button). */
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  border-radius: 50% !important;
  overflow: hidden;
  background: transparent;
  flex-shrink: 0;
  line-height: 20px;
  font-size: 0;
}
/* Flag <img> inside the popup (country
   list items + country view button +
   language list items). Mounted by JS
   (flagcdn.com PNG). The span itself
   stays 22x16; the <img> fills the
   span.

   Selector uses the class twice
   (`.header__locale-popup-flag.header__locale-popup-flag`)
   to bump specificity to (0,3,0) — base.css
   may set width/height with a single
   class (specificity 0,1,0) or with an
   element selector (0,0,1) which would
   otherwise win. !important is the
   belt-and-braces. */
.header__container--logo-only
  .header__locale-popup-flag.header__locale-popup-flag {
  display: inline-block !important;
  width: 20px !important;
  height: 14px !important;
  margin-right: 10px !important;
  border-radius: 2px !important;
  flex-shrink: 0;
  background: rgba(var(--color-entry-line, 0 0 0), 0.08);
  overflow: hidden;
  vertical-align: middle;
  line-height: 14px;
  font-size: 0;
}
/* The actual <img> mounted by JS.
   width: 100% + height: 100% fill the
   parent span (20x14 in popup, 20x20
   in trigger). object-fit: cover
   crops the 4:3 source to fill the box
   without stretching; object-position:
   center keeps the central coat of
   arms (UK, Australia) visible. */
.header__container--logo-only
  .header__locale-popup-flag.header__locale-popup-flag
  .header__locale-popup-flag-img.header__locale-popup-flag-img {
  /* Double class on the <img> to bump
     specificity to (0,5,0). base.css may
     style `.header__icon-button img`
     (specificity 0,1,1) or
     `.header__locale-popup-flag img`
     (0,1,1) with width: 100%; height:
     100% relative to a 38x38 button —
     making the flag fill the whole
     button. !important + double-class
     here forces 20x14. */
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 2px !important;
  flex-shrink: 0;
}
/* Same <img> style, but inside the
   trigger (20x20 round). object-fit:
   cover + the wrapper's overflow: hidden
   + border-radius: 50% crops the 4:3
   flag to a circle. */
.header__container--logo-only
  .header__locale-trigger-flag.header__locale-trigger-flag
  .header__locale-popup-flag-img.header__locale-popup-flag-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}
/* Gap (10px) between the flag <img>
   and the country name text node.
   base.css may set margin: 0 on
   <img> directly; we re-assert on
   the <img> inside the .header__locale-popup
   (the popup flag, NOT the trigger
   flag — the trigger flag is wrapped
   in <a class="header__locale-trigger-flag">
   and is a single round 20x20 badge,
   so margin would break its width).

   The .header__locale-popup ancestor
   selector scopes the rule to
   inside-popup only. */
.header__container--logo-only
  .header__locale-popup
  .header__locale-popup-flag-img {
  margin-right: 10px !important;
}
.header__container--logo-only
  .header__locale-popup-flag.header__locale-popup-flag[data-flag-ready="true"] {
  /* Once the <img> is mounted, hide the
     placeholder grey background. */
  background: transparent !important;
}
/* Hover state on list rows. The base
   .dropdown-menu__list a has its own hover;
   we add a visible background change. */
.header__container--logo-only
  .header__locale-popup
  .dropdown-menu__list
  a:hover {
  background: rgba(var(--color-entry-line, 0 0 0), 0.05);
}

/* The new layout keeps the inline main menu
   visible (it lives on row 2, centered) — see
   the PC grid above. We only need to hide the
   PC drawer nav, because in logo-only there
   is no PC-side drawer trigger (the hamburger
   trigger is mobile-only, so leaving
   .header__drawer-nav visible on PC would
   render an empty grid cell). */
.header__container--logo-only .header__drawer-nav {
  display: none !important;
}
.header__nav-style--drawer.header__container--left-line,
.header__nav-style--drawer.header__container--left-left {
  grid-template: "drawer_menu logo tools icons" auto / auto 1fr auto auto;
}
.header__nav-style--drawer.header__container--left-line .header__heading,
.header__nav-style--drawer.header__container--left-left .header__heading {
  width: 100%;
}
.header__nav-style--drawer.header__container--middle-line,
.header__nav-style--drawer.header__container--middle-left {
  grid-template: "drawer_menu logo buttons" auto / 1fr auto 1fr;
}
.header__container--left-line .header__inline-nav--has-divider::before,
.header__container--middle-line .header__inline-nav--has-divider::before {
  position: absolute;
  content: "";
  width: 100%;
  left: 0;
  border-top: 1px solid rgb(var(--color-entry-line));
}
.header__drawer-nav {
  grid-area: drawer_menu;
}
.header__inline-nav {
  grid-area: menu;
  /* Defensive centering — works
     across all header layouts
     (left-line, middle-line,
     middle-left). Without
     justify-self + flex centering,
     the <ul> of links either
     stretches to fill the menu
     track (default grid stretch)
     or sits left-aligned. */
  justify-self: center;
  align-self: center;
  width: auto;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__tools {
  grid-area: tools;
  justify-self: flex-start;
}
.tile-search .header__tools {
  width: 100%;
}
.header__icons {
  grid-area: icons;
  justify-self: flex-end;
}
.header__icons,
.header__tools {
  display: flex;
  align-items: center;
  margin-left: calc(-1 * var(--header-column-gap));
}
.header__icons > *,
.header__tools > * {
  margin-left: var(--header-column-gap);
}
.header__container--middle-left .header__icons {
  margin-left: 0;
}
.header__icon-button {
  display: flex;
  padding: 6px;
}
.header__cart-point {
  background-color: rgba(var(--color-cart-dot));
  border-radius: 20px;
  color: rgba(var(--color-cart-dot-text));
  top: 6px;
  right: 2px;
  line-height: 14px;
  min-width: 14px;
  padding: 0 4px;
  position: absolute;
  text-align: center;
  font-size: 9px;
  white-space: nowrap;
  max-width: 28px;
  text-overflow: ellipsis;
  overflow: hidden;
  z-index: 1;
}
.header .drawer .modal__content {
  position: fixed;
  top: var(--header-top-position, 0);
  height: calc(100% - var(--header-top-position, 0));
}
.header .drawer .modal__content details[open] .modal__overlay::after {
  position: absolute;
}
/* reset cart color */
header-layout + cart-notification .cart-notification {
  background-color: rgb(var(--color-header-background)) !important;
  color: rgb(var(--color-header-text)) !important;
  --color-text: var(--color-header-text) !important;
}
/* pc user center menu */
@media (min-width: 960px) {
  .user__container:hover ul {
    display: block;
  }
  .user__container {
    position: relative;
  }
  .user__container ul {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: rgb(var(--color-image-background));
    box-shadow: 0px 10px 20px 0px rgba(var(--color-text), 0.1);
    padding: 10px 20px;
    color: rgb(var(--color-text));
    width: 170px;
    z-index: 1;
  }
  .user__container ul li {
    padding: 4px 0;
  }
  .user__container ul li a {
    display: block;
  }
  .user__container ul li.user__menu-sign-out {
    text-decoration: underline;
  }
  .user__container ul .user__menu-title-line {
    width: 100%;
    height: 1px;
    background-color: rgb(var(--color-entry-line));
    margin: 10px 0;
  }
}
#shopline-section-header {
  position: relative;
  z-index: 30;
}
#shopline-section-header.animate {
  transition: all 0.15s ease-out;
}
#shopline-section-header.shopline-section-header-sticky {
  position: sticky;
  top: var(--header-sticky-top, 0px);
}
#shopline-section-header.shopline-section-header-sticky .is-transparent {
  position: relative;
}
@media (max-width: 959px) {
  #shopline-section-header.shopline-section-header-sticky {
    top: var(--mobile-header-sticky-top, 0px);
  }
}
#shopline-section-header.shopline-section-header-hidden:not(.menu-open) {
  transform: translateY(-200%);
}
#shopline-section-header:not(.shopline-section-header-scrolling) {
  top: 0 !important;
}
#shopline-section-header.shopline-section-header-sticky--always {
  position: sticky;
  top: var(--header-sticky-top, 0px);
  animation: modalSlideInTop 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#shopline-section-header.shopline-section-header-sticky--always
  .is-transparent {
  position: relative;
}
@media (max-width: 959px) {
  #shopline-section-header.shopline-section-header-sticky--always {
    top: var(--mobile-header-sticky-top, 0px);
  }
}
.header__heading {
  grid-area: logo;
  margin: 14px auto;
  display: flex;
}
@media screen and (max-width: 959px) {
  .header__heading {
    margin: 10px auto;
  }
}
.header__heading-link {
  color: rgb(var(--color-text));
  font-size: 30px;
  text-align: left;
  text-decoration: none;
}
.header__heading-logo {
  display: block;
  width: var(--header-logo-pc-width, 200px);
  height: auto;
}
@media screen and (max-width: 959px) {
  .header__heading-logo {
    width: var(--header-logo-mobile-width, 100px);
  }
}
/*transform change*/
.is-transparent
  .header__heading-logo--transparent
  + .header__heading-logo--nomal {
  display: none;
}
header.is-transparent--active .header__heading-logo--transparent {
  display: none;
}
header.is-transparent--active
  .header__heading-logo--nomal.header__heading-logo--nomal {
  display: block;
}
@keyframes animateBottomLocalization {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(10px);
  }
}
@keyframes animateTopLocalization {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(-10px);
  }
}
.header__localization form {
  display: flex;
  column-gap: 20px;
  justify-content: center;
}
.header__localization .dropdown-menu__button {
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  color: inherit;
}
.header__localization .dropdown-menu__button > span {
  margin-right: 6px;
}
.header__localization .dropdown-menu__list-wrapper {
  opacity: 1;
}
.header__localization .dropdown-menu__list-wrapper.bottom {
  animation: animateBottomLocalization 200ms ease;
  transform: translateY(10px);
}
.header__localization span[data-label] {
  white-space: nowrap;
}
/* header drawer mode */
.header-drawer__localization {
  padding: 10px 0;
  position: relative;
}
.header-drawer__localization:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(var(--color-entry-line));
}
.header-drawer__localization form {
  display: block;
}
.header-drawer__localization .dropdown-menu__button {
  height: 44px;
  display: flex;
  gap: 8px;
  align-items: center;
  text-align: left;
}
.header-drawer__localization .dropdown-menu__button > span {
  margin-right: 0;
}
.header-drawer__localization span[data-label] {
  white-space: initial;
}
.header-drawer__localization .dropdown-menu__list-wrapper.top {
  animation: animateTopLocalization 200ms ease;
  transform: translateY(-10px);
  border: 1px solid rgba(var(--color-text), 0.1);
}
/* drawer_footer_extra — a hard-coded
   100% width block rendered directly
   under the language / country
   selectors in the mobile drawer.

   Anchoring strategy:
   - The block sits inside
     .drawer_footer which is the
     natural last child of the
     drawer body.
   - `position: sticky; bottom: 0;`
     keeps the block pinned to the
     bottom edge of the scroll
     container as the user scrolls
     the menu list above. The
     sticky parent is the drawer's
     modal__content which has
     overflow-y: auto set on the
     .drawer__main.
   - The block has a 1px top border
     that matches the
     `.drawer__head--divider` style
     (a thin line above the footer
     block) and a subtle white
     background so it stands out
     from the menu list as it
     scrolls under it.

   Width 100% — the surrounding
   .drawer__content has its own
   padding (var(--drawer-padding-inline)),
   so 100% here fills the content
   area, not the viewport. For true
   full-bleed (edge-to-edge in the
   drawer), use
   `margin-left: calc(
   -1 * var(--drawer-padding-inline));
   margin-right: calc(
   -1 * var(--drawer-padding-inline));`
   on the block. */
.drawer_footer_extra {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 14px
    var(--drawer-padding-inline, 0);
  border-top: 1px solid
    rgba(var(--color-text), 0.1);
  background: rgb(
    var(--color-header-background, 255 255 255)
  );
  /* Sticky to the bottom of the
     scrollable area. The parent
     .drawer_footer (or .drawer
     .modal__content) must be a
     scroll container for sticky to
     work — that's already the case
     for .modal__content. */
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.drawer_footer_extra-link {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: 4px;
  background: rgba(
    var(--color-text), 0.05
  );
  color: rgb(var(--color-text, 33 33 33));
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  box-sizing: border-box;
  transition: background 0.15s ease;
}
.drawer_footer_extra-link:hover {
  background: rgba(
    var(--color-text), 0.1
  );
}
.menus__link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: rgb(var(--color-text));
  opacity: 1;
  transition: opacity 0.2s;
  cursor: pointer;
}
.header__inline-menus {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
}
@media (min-width: 960px) {
  .header__container--left-line .header__inline-menus {
    justify-content: center;
  }
}
.header-inline-menus__link {
  --padding-inline: 0px;
  --padding-block: 12px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--padding-block) var(--padding-inline);
font-weight: 500;
    font-size: 15px;
}
/* .header-inline-menus__link::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  will-change: transform;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgb(var(--color-text));
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
} */
.header-inline-menus__link .icon-arrow {
    margin-inline-start: 5px;
    transition: transform 0.2s ease-out;
}
.header-inline-menus__item:hover .icon-arrow {
    transform: rotate(180deg);
}
.header-inline-menus__link:hover::after,
.header-inline-menus__link:focus::after {
  transform: scale(1);
}
.header-inline-menus__item {
  padding: 0 16px;
}
.header-inline-menus__item--has-submenu {
  position: relative;
}
.header-inline-menus__item--has-submenu.is-megamenu:hover
  .header__inline-submenus,
.header-inline-menus__item--has-submenu.is-megamenu:focus
  .header__inline-submenus {
  pointer-events: initial;
  visibility: visible;
  opacity: 1;
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.header-inline-menus__item--has-submenu .header-inline-menus__arrow {
  display: initial;
}
.header-inline-menus__item.is-megamenu {
  position: static;
}
/*hover polyfill*/
.header-inline-menus__item--has-submenu:hover::before {
  content: attr(data-item-title);
  position: absolute;
  height: 100%;
  top: 0;
  margin-left: -30px;
  padding-left: 30px;
  padding-right: 30px;
  opacity: 0;
}
.header-inline-menus__arrow {
  display: none;
  margin-left: 5px;
}
.header__inline-submenus {
  display: flex;
  position: absolute;
  left: 0;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(var(--color-header-background));
  width: 100%;
  z-index: 10;
  box-shadow: 0 10px 20px rgb(0 0 0 / 9%);
  max-height: 760px;
  min-height: 280px;
  overflow: auto;
}
.megamenu__list {
  padding: 40px;
  padding-block-start: 0;
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  flex: 1;
  grid-auto-columns: minmax(100px, 280px);
  grid-auto-flow: column;
}
/*dropdown-menu*/
.header-inline-menus__item--has-submenu:not(.is-megamenu):hover
  .header-dropdown-menu,
.header-inline-menus__item--has-submenu:not(.is-megamenu):focus
  .header-dropdown-menu {
  pointer-events: initial;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.header-dropdown-menu {
  display: block;
  position: absolute;
  left: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(-10px);
  opacity: 0;
  transition: all 0.2s;
  background-color: rgba(var(--color-header-background));
  z-index: 10;
  min-width: 200px;
  width: max-content;
  max-width: 300px;
  max-height: 760px;
  overflow: auto;
  padding: 10px 0 5px;
  box-shadow: 0 10px 20px rgb(0 0 0 / 9%);

}
.header-dropdown-menu ul {
  padding: 0;
}
.header-dropdown-menu .header-inline-submenus__item {
  padding: 8px 16px;
}
.header-dropdown-menu .header-inline-submenus__link::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  will-change: transform;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgb(var(--color-text));
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.header-dropdown-menu .header-inline-submenus__link:hover::after,
.header-dropdown-menu .header-inline-submenus__link:focus::after {
  transform: scale(1);
}
.header-nav-list .menus__link:not(a) {
  cursor: default;
}
.header-nav-list .menus__link:not(a):hover {
  opacity: 1;
}
.header-nav-list .menus__link::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  will-change: transform;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgb(var(--color-text));
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.header-nav-list .menus__link:hover::after,
.header-nav-list .menus__link:focus::after {
  transform: scale(1);
}
.megamenu-list__submenu {
  padding: 0;
}
.megamenu-submenu__item + .megamenu-submenu__item {
  margin-top: 8px;
}
.megamenu-list__item-title {
  display: inline-block;
  margin-bottom: 10px;
}
.header__image {
  width: 25vw;
  position: relative;
  overflow: hidden;
}
.header__image .header__image__content {
  height: 100%;
  overflow: hidden;
  position: relative;
}
.header__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  will-change: transform;
  transition: all 0.5s cubic-bezier(0.104, 0.204, 0.492, 1);
  object-position: 50% 50%;
}
.header__image img:hover {
  transform: scale(1.05);
}
.header__image .header__image--cover {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 100%;
  white-space: normal;
  padding: 0 50px 50px;
}
.header__image .header__image--cover .header__image_title {
  text-transform: uppercase;
  margin-bottom: 15px;
  font-weight: 600;
}
.header__image .header__image--cover .header__image_button {
  text-transform: uppercase;
  position: relative;
}
.header__inline-menus--img-normal .header__image__content {
  height: 0;
}
.header__inline-menus--img-normal .header__image {
  width: calc(25vw - 20px);
  overflow-y: auto;
}
.header__inline-menus--img-normal .header__image img {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  object-fit: unset;
}
.header__inline-menus--img-normal .megamenu__list {
  padding: 0;
}
.header__inline-menus--img-normal .header-nav-list {
  gap: 20px;
  padding: 40px;
  padding-block-start: 0;
}
.header__inline-menus--img-normal .header__image--cover {
  position: unset;
  padding: 0;
  padding-bottom: 6px;
}
.header__inline-menus--img-normal .header__image--cover .header__image_title {
  text-transform: none;
  margin-bottom: 0;
  margin-top: 8px;
}
.menu-item--highlight {
  background: linear-gradient(
    90deg,
    var(--header-highlight-background) 0%,
    rgba(201, 245, 47, 0) 100%
  );
  background-clip: content-box;
  color: var(--header-highlight-text-color) !important;
}
.header__menu-drawer .drawer__main {
  margin-left: calc(-1 * var(--drawer-padding-inline));
  margin-right: calc(-1 * var(--drawer-padding-inline));
  position: relative;
}
.header__user-center-button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  letter-spacing: 0.1em;
}
.header__user-center-button .icon {
  margin-right: 8px;
}
.drawer-menus__sub-menus {
  background: rgba(var(--color-text), 0.05);
}
.drawer-menus__sub-menus .drawer-menus__sub-menus {
  background: transparent;
}
.drawer-menus__sub-menus .drawer-menus__sub-menus .drawer-menus__sub-item {
  padding-left: 15px;
}
.drawer-menus__item,
.drawer-menus__sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
  text-decoration: none;
  text-transform: capitalize;

  background: transparent;
  transition: background 0.2s;
}
.drawer-menus__item > a,
.drawer-menus__sub-item > a {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  word-break: break-word;
}
.drawer-menus__item > a {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: var(--drawer-padding-inline);
  font-weight: bold;
}
.drawer-menus__sub-item > a {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: var(--drawer-padding-inline);
}
.drawer-menus__item-icon {
  display: flex;
  padding: 0 var(--drawer-padding-inline);
}
.drawer-menus__item-icon .icon-arrow {
  position: revert;
}
.drawer-menus__item-icon-off {
  display: none;
}
details[open] > summary > .drawer-menus__item > .drawer-menus__item-icon-on {
  display: none;
}
details[open] > summary > .drawer-menus__item > .drawer-menus__item-icon-off {
  display: flex;
}
details[open]
  > summary
  > .drawer-menus__sub-item
  > .drawer-menus__item-icon-on {
  display: none;
}
details[open]
  > summary
  > .drawer-menus__sub-item
  > .drawer-menus__item-icon-off {
  display: flex;
}
@keyframes headerSearchModal {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.header__search .modal__content {
  position: absolute;
  background-color: rgb(var(--color-header-background));
}
.header__search details[open] .modal__overlay::after {
  position: absolute;
  top: 100%;
  z-index: initial;
}
.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 960px) {
  .tile-search .search-modal__content {
    justify-content: flex-end;
    padding: 20px 0px 20px 20px;
  }
  .tile-search .right-search .search-modal__content {
    justify-content: flex-start;
  }

  .header__container--middle-line.tile-search .search-modal__content {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 20px;
    min-width: 300px;
  }

  .header__container--left-line.tile-search .search-modal__content {
    justify-content: center;
  }
}
.search-modal__close-button {
  margin-left: 4px;
  padding: 12px;
  margin-right: 8px;
}
.search-modal__close-button .icon {
  width: 16px;
  height: 16px;
}
@media screen and (max-width: 959px) {
  .search-modal__close-button .icon {
    width: 10px;
    height: 10px;
  }
}
.search-modal__form {
  position: relative;
  flex: 1 0 0;
}
@media screen and (max-width: 959px) {
  .search-modal__form {
    position: static;
  }

  .search-modal__form .predictive-search {
    border-top: 1px solid rgb(var(--color-entry-line));
  }
}
.search-modal__field {
  position: relative;
  margin: 0;
  background-color: rgb(var(--color-header-background));
  color: rgb(var(--color-header-text));
}
.search-modal__input {
  height: 60px;
  padding: 28px 68px 10px 20px;
}
@media screen and (max-width: 959px) {
  .search-modal__input {
    height: 38px;
    padding: 16px 68px 4px 20px;
  }
}
@media (min-width: 960px) {
  .tile-search .search-modal__field {
    background: transparent;
    color: rgb(var(--color-header-pc-searchbar-text));
  }

  .tile-search .search-modal__field::after {
    border-color: rgb(var(--color-header-pc-searchbar-border));
  }
  .tile-search .search-modal__form {
    max-width: 300px;
  }
  .tile-search .search-modal__input {
    height: 48px;
    padding: 10px 10px 10px 48px;
    color: rgb(var(--color-header-pc-searchbar-text));
    background-color: rgba(var(--color-header-pc-searchbar-bg), 1);
  }
  .tile-search .search-modal__submit-button {
    color: rgb(var(--color-header-pc-searchbar-text));
    left: 0;
    right: unset;
    width: 48px;
  }
  .tile-search .search-modal__input::placeholder {
    opacity: 1;
    color: rgb(var(--color-header-pc-searchbar-text));
  }

  .tile-search .search-modal__field-label {
    width: calc(100% - 48px);
    left: 48px;
  }
}
.search-modal__field-label {
  width: calc(100% - 68px);
  left: 20px;
}
.search-modal__submit-button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  width: 68px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.search-modal__content[data-show-menu] .predictive-search__suggested-menu {
  display: block;
}
.predictive-search__suggested-menu {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: none;
}
.predictive-search__suggested-menu .predictive-search__suggested-menu__link {
  display: block;
  padding: 9px 12px;
}
.predictive-search__suggested-menu
  .predictive-search__suggested-menu__link:hover {
  background: var(--general-text-10, rgba(0, 0, 0, 0.1));
  border-radius: 2px;
}
.gallery__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 0;
}
@media (min-width: 960px) {
  .gallery__list {
    overflow: hidden;
  }
}
.gallery__list .gallery__item {
  overflow: hidden;
  width: 50%;
  height: 100%;
  flex-grow: 1;
}
@media (min-width: 960px) {
  .gallery__list .gallery__item {
    flex-grow: 0;
    width: 25%;
  }
}
@media (min-width: 960px) {
  .gallery__list .gallery__item--images {
    transform: scale(1.05);
  }
}
.gallery__list .gallery__item--empty .gallery__box.gallery__box {
  padding-bottom: unset;
}
.gallery__list .gallery__item {
  transform-origin: top;
}
.gallery__list .gallery__item .gallery__box {
  transform: scale(1.01);
  padding-bottom: 100%;
  position: relative;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.5s;
}
.gallery__list .gallery__item .gallery__box img {
  object-fit: cover;
  object-position: 50% 50% !important;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}
.gallery__list .gallery__item .gallery__box .gallery__box__mark {
  --bg-opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / var(--bg-opacity));
}
.gallery__list .gallery__item .gallery__box .gallery__box__title {
  --bg-opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gallery__list .gallery__item.adapt .gallery__box {
  padding-bottom: 0%;
}
.gallery__list .gallery__item.adapt img {
  max-height: 400px;
  position: static;
}
.gallery__list .gallery__box--hover:hover {
  transform: scale(1.05);
}
.gallery__list svg {
  border: 1px solid hsla(206, 6%, 50%, 0.2);
  display: block;
}
@media (min-width: 960px) {
  .gallery__list svg {
    border-top: none;
  }
}
.header-inline-menus__item--has-submenu:hover
  .gallery__list
  .gallery__item.gallery__item--images {
  transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: scale(1.01);
}
.header-inline-menus__item--has-submenu.gallery .header__inline-submenus {
  min-height: auto;
}
@media (min-width: 960px) {
  .mobile-top-nav {
    display: none;
  }
}
.mobile-top-nav .mobile-site-nav {
  list-style: none;
  margin: 0;
  padding: 0 var(--page-padding);
  scroll-padding-left: var(--page-padding);
  scroll-padding-right: var(--page-padding);
  display: flex;
  flex-wrap: nowrap;
}
.mobile-top-nav .mobile-site-nav > li:first-child .mobile-site-nav__item__link {
  padding-left: 0;
}
.mobile-top-nav .mobile-site-nav > li:last-child .mobile-site-nav__item__link {
  padding-right: 0;
}
.mobile-top-nav .mobile-site-nav .mobile-site-nav__item__link {
  color: inherit;
  padding: 12px 16px;
  display: inline-block;
  white-space: nowrap;
}
.mobile-top-nav
  .mobile-site-nav
  .mobile-site-nav__item
  .mobile-site-nav__item__link--active
  .mobile-site-nav__item__link__text {
  position: relative;
  font-weight: 500;
}
.mobile-top-nav
  .mobile-site-nav
  .mobile-site-nav__item
  .mobile-site-nav__item__link--active
  .mobile-site-nav__item__link__text:before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -8px;
  width: 100%;
  background-color: rgba(var(--color-text));
  height: 2px;
}
.color-scheme-1
  .mobile-site-nav
  .mobile-site-nav__item
  .mobile-site-nav__item__link--active
  .mobile-site-nav__item__link__text:before {
  background-color: rgba(var(--color-scheme-1-text));
}
.color-scheme-2
  .mobile-site-nav
  .mobile-site-nav__item
  .mobile-site-nav__item__link--active
  .mobile-site-nav__item__link__text:before {
  background-color: rgba(var(--color-scheme-2-text));
}
.color-scheme-3
  .mobile-site-nav
  .mobile-site-nav__item
  .mobile-site-nav__item__link--active
  .mobile-site-nav__item__link__text:before {
  background-color: rgba(var(--color-scheme-3-text));
}
.shopline-section-header-scrolling .mobile-top-nav {
  display: none;
}
.predictive-search {
  --predictive-search-result-padding: 20px;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: rgb(var(--color-header-background));
  color: rgb(var(--color-header-text));
  border-radius: 0 0 var(--menu-modal-border-radius)
    var(--menu-modal-border-radius);
  z-index: 1;
}
.predictive-search__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--predictive-search-result-padding) 0
    calc(var(--predictive-search-result-padding) / 2) 0;
  text-transform: uppercase;
  margin: 0 var(--predictive-search-result-padding)
    calc(var(--predictive-search-result-padding) / 2)
    var(--predictive-search-result-padding);
  border-bottom: 1px solid rgb(var(--color-entry-line));
}
.predictive-search__head .predictive-search__spinner {
  display: none;
}
.predictive-search__head .predictive-search__rusults {
  text-transform: initial;
}
.predictive-search__list-item > * {
  padding: calc(var(--predictive-search-result-padding) / 2);
  transition: color 0.3s, background 0.3s;
}
.predictive-search__list-item[selected="true"] > *,
.predictive-search__list-item:hover > * {
  color: rgb(var(--color-text));
  background-color: rgba(var(--color-text), 0.08);
}
.predictive-search__item {
  display: grid;
  grid-template: "image content" auto / auto 1fr;
  gap: var(--predictive-search-result-padding);
}
.predictive-search__item-image {
  display: block;
  width: 62px;
  height: 62px;
  grid-area: image;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 959px) {
  .predictive-search__item-image {
    width: 56px;
    height: 56px;
  }
}
.predictive-search__item-content {
  grid-area: content;
  justify-content: center;
}
.predictive-search__item-head {
  margin: 0;
}
.predictive-search__item-price {
  margin: 0;
}
.predictive-search__item-price .line-through {
  text-decoration: line-through;
  opacity: 0.5;
}
.predictive-search__term {
  margin: var(--predictive-search-result-padding);
}
.predictive-search__term-icon {
  display: inline-flex;
  transition: transform 0.3s;
  width: 20px;
  height: 20px;
}
.predictive-search__spinner {
  display: inline-flex;
  animation: button-loading linear 1.5s infinite;
}
.predictive-search__spinner .icon {
  width: 15px;
  height: 15px;
}
.predictive-search__loading-state {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.predictive-search__results {
  overflow: hidden;
  overflow-y: auto;
}
predictive-search[data-focus][open] .predictive-search,
predictive-search[data-focus][loading] .predictive-search {
  display: block;
}
predictive-search[data-focus][loading]
  .predictive-search__results:empty
  ~ .predictive-search__loading-state {
  display: flex;
}
predictive-search[data-focus][loading]
  .predictive-search__head
  .predictive-search__spinner {
  display: flex;
}
.predictive-search__results-list {
  display: grid;
  /* row-gap: var(--predictive-search-result-padding);
  column-gap: var(--predictive-search-result-padding); */
  margin-top: calc(var(--predictive-search-result-padding) / 2);
  padding: 0 calc(var(--predictive-search-result-padding) / 2);
}
.search-modal__content[data-col="4"] .predictive-search__results-list {
  grid-template-columns: repeat(4, 1fr);
}
.search-modal__content[data-col="3"] .predictive-search__results-list {
  grid-template-columns: repeat(3, 1fr);
}
.search-modal__content[data-col="2"] .predictive-search__results-list {
  grid-template-columns: repeat(2, 1fr);
}
.search-modal__content[data-col="1"] .predictive-search__results-list {
  grid-template-columns: repeat(1, 1fr);
}
/* The ipad end responds to the mobile end in vertical screen */
/* @custom-media --tablet (max-width: 959px); */
/* @custom-media --gt-mobile (min-width: 751px); */
/* detectingScreen need to consider the configuration of the tablet */