/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/app/(shop)/layout.module.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
.layout_shopShell__AoCH_ {
  width: 100%;
  /* Share the SAME max-width + gutter as ShopHeader/ShopFooter so the
     sidebar's left edge and the content's right edge line up with the
     header/footer instead of overhanging ~146px to each side. The rail
     and content live INSIDE the container as a two-column grid. */
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-3) var(--gutter) 0;
}

.layout_shopContent__SvoEK {
  min-width: 0;
}

.layout_shopContent__SvoEK:only-child {
  grid-column: 1 / -1;
}

/* Desktop: inline category sidebar + content as a two-column grid. */
@media (min-width: 768px) {
  .layout_shopShell__AoCH_ {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--s-4);
    padding: var(--s-6) var(--gutter) 0;
  }
}

@media (min-width: 1280px) {
  .layout_shopShell__AoCH_ {
    grid-template-columns: 268px minmax(0, 1fr);
    gap: var(--s-6);
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/components/shop/CategoryTree.module.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.CategoryTree_nav__EXWgP {
  padding: var(--s-2);
}

.CategoryTree_tree__G9BAd,
.CategoryTree_subtree__fDfkU {
  margin: 0;
  padding: 0;
  list-style: none;
}

.CategoryTree_allLink__jjNDP {
  min-height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: var(--s-1);
  padding: 0 var(--s-3);
  color: var(--c-ink-700);
  border-radius: var(--r-md);
  font-size: var(--fz-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  transition: background 140ms ease, color 140ms ease;
}

.CategoryTree_allLink__jjNDP:hover {
  color: var(--c-primary);
  background: var(--c-surface-2);
}

.CategoryTree_allLink__jjNDP[data-active="true"] {
  color: var(--c-primary-ink);
  background: var(--c-primary);
}

.CategoryTree_allLink__jjNDP[data-active="true"]:hover {
  color: var(--c-primary-ink);
  background: var(--c-primary-hover);
}

/* Row = the category link plus an optional expand/collapse toggle. Depth
   indentation lives here so the link and toggle shift together. */
.CategoryTree_row__3FhLH {
  display: flex;
  align-items: center;
  padding-left: calc(var(--depth) * 16px);
  border-radius: var(--r-md);
  transition: background 140ms ease;
}

.CategoryTree_row__3FhLH:hover {
  background: var(--c-surface-2);
}

.CategoryTree_row__3FhLH[data-has-children="false"]::after {
  content: "";
  flex: 0 0 40px;
  height: 40px;
  margin-right: var(--s-1);
  pointer-events: none;
}

/* Whole-row highlight when its link is the active route. */
.CategoryTree_row__3FhLH:has(.CategoryTree_categoryLink__HIv57[data-active="true"]) {
  background: var(--c-primary);
}

.CategoryTree_categoryLink__HIv57 {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-2) 0 var(--s-3);
  color: var(--c-ink-700);
  font-size: var(--fz-sm);
  line-height: var(--lh-snug);
  transition: color 140ms ease;
}

.CategoryTree_categoryLink__HIv57:hover {
  color: var(--c-primary);
}

.CategoryTree_categoryLink__HIv57[data-active="true"] {
  color: var(--c-primary-ink);
  font-weight: var(--fw-bold);
}

.CategoryTree_categoryLink__HIv57[data-active="true"]:hover {
  color: var(--c-primary-ink);
}

.CategoryTree_categoryLink__HIv57[data-active="true"] .CategoryTree_count__jEwWJ {
  color: var(--c-primary);
  background: var(--c-primary-ink);
}

.CategoryTree_linkLabel__Twc_y {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.CategoryTree_count__jEwWJ {
  min-width: 24px;
  padding: 2px 6px;
  color: var(--c-ink-500);
  background: var(--c-surface-2);
  border-radius: var(--r-pill);
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  text-align: center;
}

.CategoryTree_toggle__4yZFY {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-right: var(--s-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--c-ink-500);
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.CategoryTree_toggle__4yZFY:hover {
  color: var(--c-primary);
  background: var(--color-accent-soft, var(--c-surface-2));
}

.CategoryTree_toggle__4yZFY:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.CategoryTree_toggleIcon__vvKyX {
  width: 18px;
  height: 18px;
  transition: transform 160ms ease;
}

.CategoryTree_toggle__4yZFY[data-open="true"] .CategoryTree_toggleIcon__vvKyX {
  transform: rotate(90deg);
}

.CategoryTree_empty__B0R9Q {
  margin: 0;
  padding: var(--s-4);
  color: var(--c-ink-500);
  font-size: var(--fz-sm);
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/components/shop/CategoryDrawer.module.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.CategoryDrawer_mobileBar__VLgpS {
  margin-bottom: var(--s-3);
}

@media (min-width: 768px) {
  .CategoryDrawer_mobileBar__VLgpS {
    display: none;
  }
}

.CategoryDrawer_trigger__4uw_u {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-md);
  color: var(--c-ink-900);
  font-size: var(--fz-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.CategoryDrawer_trigger__4uw_u svg {
  width: 18px;
  height: 18px;
  color: var(--c-primary);
}

.CategoryDrawer_paper__vvt_e {
  width: min(86vw, 360px);
  max-width: 100%;
  padding: var(--s-2);
  box-sizing: border-box;
}

.CategoryDrawer_drawerHead__GspFT {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-3);
  color: var(--c-ink-900);
  font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--c-rule);
}

.CategoryDrawer_close__dNZBQ {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--c-ink-700);
  cursor: pointer;
}

.CategoryDrawer_close__dNZBQ svg {
  width: 20px;
  height: 20px;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/components/shop/CategorySideMenu.module.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
/* Inline accordion is desktop-only; below md the CategoryDrawer
   (off-canvas) replaces it so content gets the full mobile width. */
.CategorySideMenu_shell__1zKnA {
  display: none;
}

@media (min-width: 768px) {
  .CategorySideMenu_shell__1zKnA {
    display: block;
    align-self: start;
    position: sticky;
    top: calc(var(--shop-header-h, 0px) + var(--s-4));
    z-index: 3;
  }
}

.CategorySideMenu_panel__2rOEE {
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.CategorySideMenu_summary__EDaHH {
  min-height: 52px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  color: var(--c-ink-900);
  font-size: var(--fz-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--c-rule);
}

.CategorySideMenu_summary__EDaHH::-webkit-details-marker {
  display: none;
}

.CategorySideMenu_summaryIcon__lg39n {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  background: var(--color-accent-soft);
  border-radius: var(--r-md);
}

.CategorySideMenu_summaryIcon__lg39n svg,
.CategorySideMenu_chevron__uwcSv {
  width: 18px;
  height: 18px;
}

.CategorySideMenu_chevron__uwcSv {
  color: var(--c-ink-500);
  transition: transform 160ms ease;
}

.CategorySideMenu_panel__2rOEE[open] .CategorySideMenu_chevron__uwcSv {
  transform: rotate(90deg);
}

.CategorySideMenu_sidebarNav__E2kE1 {
  max-height: calc(100vh - 168px - var(--shop-header-h, 0px));
  overflow: auto;
}

.CategorySideMenu_sidebarSlot__czId3 {
  margin-top: var(--s-4);
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/components/shop/StoreLocationDialog.module.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
.StoreLocationDialog_backdrop__WtBkn {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  z-index: 200;
}

.StoreLocationDialog_dialog__EvLca {
  background: var(--c-surface);
  padding: var(--s-6);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  max-width: 640px;
}

.StoreLocationDialog_head__4aCmV {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.StoreLocationDialog_head__4aCmV h2 {
  margin: 0;
  font-size: var(--fz-lg);
  color: var(--c-ink-900);
}

.StoreLocationDialog_head__4aCmV button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-1);
  border: none;
  background: transparent;
  color: var(--c-ink-700);
  cursor: pointer;
}

.StoreLocationDialog_head__4aCmV button svg {
  width: 20px;
  height: 20px;
}

.StoreLocationDialog_address__xFYZB {
  margin: 0;
  font-size: var(--fz-sm);
  color: var(--c-ink-700);
}

.StoreLocationDialog_mapWrap__MEhUA {
  height: min(60vh, 420px);
  width: 100%;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-md);
  overflow: hidden;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/components/shop/ShopFooter.module.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
.ShopFooter_footer__37Xhq {
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule);
}

.ShopFooter_columns__LZmGt {
  max-width: var(--container);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin: 0 auto;
  padding: var(--s-6) var(--s-4);
}

.ShopFooter_store__KfqE_ {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-md);
}

.ShopFooter_store__KfqE_ strong {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fz-sm);
}

.ShopFooter_store__KfqE_ svg {
  width: 16px;
  height: 16px;
}

.ShopFooter_address__Gkd3z {
  margin: 0;
  font-size: var(--fz-sm);
  color: var(--c-ink-700);
}

.ShopFooter_showLocation__lOYGF {
  align-self: flex-start;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-2);
  margin-left: calc(-1 * var(--s-2));
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-link);
  font-size: var(--fz-sm);
  cursor: pointer;
  text-decoration: underline;
}

.ShopFooter_showLocation__lOYGF:hover {
  background: var(--c-surface-2);
  color: var(--c-link-hover);
}

.ShopFooter_column__kexB7 h2,
.ShopFooter_columns__LZmGt > div > h2 {
  margin: var(--s-6) 0 var(--s-3);
  color: var(--c-ink-900);
  font-size: var(--fz-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ShopFooter_column__kexB7 h2 {
  margin-top: 0;
}

.ShopFooter_column__kexB7 ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: var(--fz-sm);
}

.ShopFooter_bottom__vUohx {
  max-width: var(--container);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  margin: 0 auto;
  padding: var(--s-5) var(--s-4);
  color: var(--c-ink-500);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fz-xs);
  text-align: center;
}

.ShopFooter_bottom__vUohx strong {
  color: var(--c-ink-900);
  font-family: var(--f-display);
  font-size: var(--fz-xl);
  font-weight: var(--fw-black);
}

.ShopFooter_bottom__vUohx strong span {
  color: var(--c-primary);
}

.ShopFooter_bottom__vUohx p {
  margin: 0;
}

.ShopFooter_social__tgHKt {
  display: flex;
  gap: var(--s-4);
}

.ShopFooter_social__tgHKt a {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-700);
  border: 1px solid var(--c-rule);
  border-radius: 50%;
  font-size: 11px;
  font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
  .ShopFooter_columns__LZmGt {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    padding: var(--s-10) var(--gutter);
  }

  .ShopFooter_bottom__vUohx {
    flex-direction: row;
    padding: var(--s-6) var(--gutter);
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .ShopFooter_columns__LZmGt {
    grid-template-columns: 1.2fr repeat(4, 1fr);
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/shared/components/ThemeToggle.module.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
.ThemeToggle_toggle__vmXWH {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--c-ink-700);
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: 50%;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.ThemeToggle_toggle__vmXWH:hover {
  color: var(--c-ink-900);
  border-color: var(--c-ink-300);
  background: var(--c-surface-2);
}

.ThemeToggle_toggle__vmXWH svg {
  width: 18px;
  height: 18px;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/shop/features/search/SearchBar.module.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
/* Visual matches the pre-rewrite ShopHeader search bar: 44px tall,
   2px ink-900 border, medium border-radius, surface background. The
   only change from the original is `overflow: visible` (the original
   had `overflow: hidden`, which clipped the absolute-positioned
   autocomplete listbox - see Storefront log 2026-05-17 #156 for the
   incident write-up). The listbox sits BELOW the bar via
   `top: calc(100% + 4px)` and inherits its inner roundness from the
   listbox's own border-radius. */
.SearchBar_bar__1L_2I {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: 44px;
  background: var(--c-surface);
  border: 2px solid var(--c-ink-900);
  border-radius: var(--r-md);
  overflow: visible;
}

.SearchBar_scopeWrap__6hRIN {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Native <select> styled to match the pre-rewrite leading button
   (surface background, ink-700 text, 1px ink-rule divider on the
   right, custom chevron). The select keeps full native keyboard +
   mobile picker behaviour. */
.SearchBar_scopeButton__SZ6KV {
  display: inline-flex;
  align-items: center;
  padding: 0 28px 0 var(--s-4);
  min-width: 160px;
  max-width: 220px;
  height: 100%;
  color: var(--c-ink-700);
  background-color: var(--c-surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 0;
  border-right: 1px solid var(--c-rule);
  /* Inner-radius matches the outer bar's --r-md minus the 2px border
     so the select edge tracks the bar's rounded corner exactly. */
  border-radius: calc(var(--r-md) - 2px) 0 0 calc(var(--r-md) - 2px);
  font-size: var(--fz-sm);
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.SearchBar_scopeButton__SZ6KV:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

.SearchBar_input__9Rpgb {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--s-4);
  color: var(--c-ink-900);
  background: var(--c-surface);
  border: 0;
  font-size: var(--fz-base);
  outline: none;
}

.SearchBar_input__9Rpgb::placeholder {
  color: var(--c-ink-500);
}

.SearchBar_voiceButton__79CFX {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  color: var(--c-ink-500);
  background: var(--c-surface);
  border: 0;
  cursor: not-allowed;
}

.SearchBar_voiceButton__79CFX svg {
  width: 18px;
  height: 18px;
}

.SearchBar_searchButton__Xq_q0 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-5);
  color: var(--c-surface);
  background: var(--c-ink-900);
  border: 0;
  /* Inner-radius pattern as on .scopeButton: track the bar's outer
     curve precisely. */
  border-radius: 0 calc(var(--r-md) - 2px) calc(var(--r-md) - 2px) 0;
  font-size: var(--fz-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.SearchBar_searchButton__Xq_q0:hover {
  background: var(--c-primary, var(--c-ink-900));
}

.SearchBar_searchButton__Xq_q0 svg {
  width: 18px;
  height: 18px;
}

.SearchBar_listbox__ZczkI {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: var(--s-1) 0;
  max-height: 360px;
  overflow-y: auto;
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}

.SearchBar_listboxStatus__mfYWH {
  padding: var(--s-2) var(--s-3);
  color: var(--c-ink-500);
  font-size: var(--fz-sm);
}

.SearchBar_suggestion__S7_L_ {
  padding: var(--s-2) var(--s-3);
  color: var(--c-ink-900);
  font-size: var(--fz-sm);
  cursor: pointer;
}

.SearchBar_suggestionActive__8fm4l {
  background: var(--c-surface-2);
}

.SearchBar_suggestionFooter__mDXwr {
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fz-sm);
}

.SearchBar_suggestionFooter__mDXwr a,
.SearchBar_suggestionFooter__mDXwr button {
  display: inline;
  padding: 0;
  color: var(--c-link, var(--c-primary));
  background: transparent;
  border: 0;
  font-size: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.SearchBar_suggestionFooter__mDXwr a:hover,
.SearchBar_suggestionFooter__mDXwr button:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  /* Mobile keeps the same layout as desktop (search input + scope
     selector + voice + submit). We shrink the scope dropdown so it
     does not crowd the input on a 375 px viewport, but we deliberately
     do NOT hide it - per softrom-ui/CLAUDE.md, the mobile UI should
     diverge from desktop only when strictly necessary, and a tighter
     scope button is enough to make this row fit. */
  .SearchBar_scopeButton__SZ6KV {
    min-width: 0;
    max-width: 120px;
    padding: 0 26px 0 var(--s-2);
    font-size: var(--fz-xs);
  }

  .SearchBar_searchButton__Xq_q0 span,
  .SearchBar_searchButton__Xq_q0 {
    font-size: var(--fz-xs);
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/shop/components/ScrollRail.module.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
/* Positioning context the chevrons anchor to - owned by ScrollRail so the
   consumer's outer frame is free to be sticky / relative / unpositioned. */
.ScrollRail_viewport__x05sW {
  position: relative;
}

.ScrollRail_strip__CXnon {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  /* Per-side edge fade, toggled by .fadeStart / .fadeEnd. #000 here is a mask
     alpha (opaque = shown), not a paint color, so it is not a theme token. */
  --fade-start: 0px;
  --fade-end: 0px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-start),
    #000 calc(100% - var(--fade-end)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-start),
    #000 calc(100% - var(--fade-end)),
    transparent 100%
  );
}

.ScrollRail_strip__CXnon::-webkit-scrollbar {
  display: none;
}

.ScrollRail_fadeStart__6H6l_ {
  --fade-start: var(--s-8);
}

.ScrollRail_fadeEnd__i0nUD {
  --fade-end: var(--s-8);
}

@media (prefers-reduced-motion: no-preference) {
  .ScrollRail_strip__CXnon {
    scroll-behavior: smooth;
  }
}

.ScrollRail_nav__VqnSy {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-900);
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: color 140ms ease;
}

.ScrollRail_nav__VqnSy svg {
  width: 20px;
  height: 20px;
}

.ScrollRail_nav__VqnSy:hover {
  color: var(--c-primary);
}

.ScrollRail_nav__VqnSy:disabled {
  color: var(--c-ink-300);
  box-shadow: var(--sh-1);
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

.ScrollRail_prev__QSJbC {
  left: var(--s-1);
}

.ScrollRail_next__jUauq {
  right: var(--s-1);
}

/* Pointer (desktop) devices only - touch relies on swipe + the edge fade. */
@media (hover: hover) and (pointer: fine) {
  .ScrollRail_nav__VqnSy {
    display: inline-flex;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/shop/account/components/AccountMobileNav.module.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
.AccountMobileNav_nav__KI78Q {
  display: flex;
  flex-direction: column;
  padding: var(--s-2);
  background: var(--c-surface);
}
.AccountMobileNav_list___2CUE {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.AccountMobileNav_row__eYqdy {
  display: grid;
  grid-template-columns: 22px 1fr auto 16px;
  gap: var(--s-3);
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 12px var(--s-3);
  border: none;
  background: var(--c-surface);
  color: var(--c-ink-900);
  font-size: var(--fz-md);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--c-rule);
  text-decoration: none;
}
.AccountMobileNav_row__eYqdy:hover { background: var(--c-surface-3); }
.AccountMobileNav_label__pWuSp { min-width: 0; }
.AccountMobileNav_badge__7t2x8 {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #147a3a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
.AccountMobileNav_icon__WNUoT { width: 22px; height: 22px; flex: 0 0 22px; color: var(--c-ink-700); }
.AccountMobileNav_iconSmall__McrC3 { width: 16px; height: 16px; }
.AccountMobileNav_chevronEnd__8_9nF {
  grid-column: 4;
  width: 16px;
  height: 16px;
  color: var(--c-ink-500);
  justify-self: end;
}
.AccountMobileNav_back__g1xpB {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: none;
  color: var(--c-ink-700);
  cursor: pointer;
  font-size: var(--fz-sm);
}
.AccountMobileNav_back__g1xpB:hover { color: var(--c-ink-900); }
.AccountMobileNav_divider__joEp1 { border: none; border-top: 1px solid var(--c-rule); margin: var(--s-2) 0; }
.AccountMobileNav_signOut__COW9W { color: var(--c-ink-500); }

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/components/shop/AccountMenu.module.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
.AccountMenu_wrap__FUA_C { position: relative; display: inline-flex; align-items: center; }
.AccountMenu_trigger___Fzuj {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0;
  background: transparent; border: none; color: var(--c-ink-700);
  border-radius: 50%; cursor: pointer; font-size: var(--fz-xs);
}
.AccountMenu_trigger___Fzuj svg { width: 22px; height: 22px; }
.AccountMenu_chev__PRHCO { display: none; width: 12px; height: 12px; transition: transform 0.15s; }
.AccountMenu_chevOpen__E50XW { transform: rotate(180deg); }
.AccountMenu_avatar__QTvt3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--c-primary-ink);
  background: var(--c-primary);
  border: 1px solid var(--c-surface);
  border-radius: 50%;
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.AccountMenu_menu__FS0xH {
  position: absolute; right: 0; top: 100%; margin-top: 4px;
  min-width: 260px; padding: 8px;
  background: var(--c-surface); border: 1px solid var(--c-rule);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 50;
}
.AccountMenu_greeting__uvwmT { padding: 8px 12px; color: var(--c-ink-500); font-size: var(--fz-sm); }
.AccountMenu_item__8MGDd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 6px;
  color: var(--c-ink-700); text-decoration: none;
  background: transparent; border: none; width: 100%;
  text-align: left; cursor: pointer;
}
.AccountMenu_item__8MGDd:hover { background: var(--c-surface-3); }
.AccountMenu_item__8MGDd svg { width: 22px; height: 22px; }
.AccountMenu_divider__zfGb4 { border: none; border-top: 1px solid var(--c-rule); margin: 6px 0; }
.AccountMenu_signOut__VoWk1 { color: var(--c-ink-500); }

.AccountMenu_sheet__s0oRR {
  position: fixed; inset: 0; background: var(--c-surface);
  z-index: 100; display: flex; flex-direction: column;
}
.AccountMenu_sheetHeader__2Hssc {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3); border-bottom: 1px solid var(--c-rule);
}
.AccountMenu_sheetTitle__Dk3iR { font-weight: 600; color: var(--c-ink-900); }
.AccountMenu_closeBtn__wyQms {
  background: transparent; border: none; cursor: pointer;
  padding: 8px; color: var(--c-ink-700);
}
.AccountMenu_sheetBody__YAxuL { flex: 1 1; overflow-y: auto; }
.AccountMenu_guestList__6KI0K { display: flex; flex-direction: column; padding: var(--s-3); gap: var(--s-2); }
.AccountMenu_guestList__6KI0K a { color: var(--c-link); padding: var(--s-2) var(--s-3); }

@media (max-width: 1024px) {
  .AccountMenu_wrap__FUA_C {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .AccountMenu_trigger___Fzuj {
    position: relative;
    width: 40px;
    min-width: 40px;
    height: 40px;
    gap: 0;
  }

  .AccountMenu_trigger___Fzuj svg {
    width: 20px;
    height: 20px;
  }

  .AccountMenu_avatar__QTvt3 {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .AccountMenu_chev__PRHCO { transition: none; }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/components/shop/ShopHeader.module.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
.ShopHeader_header__OxhET {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-rule);
}

.ShopHeader_headerSpacer__pFCHy {
  height: var(--shop-header-reserved-h, 147px);
}

.ShopHeader_utilityBar__ZCMGv {
  /* Caps the band just above its one-line promo content so the .scrolled
     collapse to max-height:0 animates smoothly; raise this if the promo
     copy can ever wrap to more than one line, or it would clip. */
  max-height: 60px;
  overflow: hidden;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 6px var(--s-3);
  color: #ffffff;
  background: var(--c-utility-bar);
  font-size: 11px;
  text-align: center;
}

.ShopHeader_utilityBar__ZCMGv a {
  color: #ffffff;
  text-decoration: underline;
}

.ShopHeader_mainHeader__pgEKA {
  background: var(--c-surface);
}

.ShopHeader_logoRow__rLmUX,
.ShopHeader_searchRow__FhrCx,
.ShopHeader_navRail__8Zysw {
  max-width: var(--container);
  margin: 0 auto;
}

.ShopHeader_logoRow__rLmUX {
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-6);
  padding: 10px var(--s-3);
}

.ShopHeader_accountLinks__HxpWE {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--c-ink-700);
  font-size: var(--fz-sm);
}

.ShopHeader_logo__SWLgS {
  grid-column: 1;
  justify-self: start;
  color: var(--c-ink-900);
  font-family: var(--f-display);
  font-size: var(--fz-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
}

.ShopHeader_logo__SWLgS:hover {
  color: var(--c-ink-900);
}

.ShopHeader_logo__SWLgS span {
  color: var(--c-primary);
}

.ShopHeader_accountLinks__HxpWE {
  grid-column: 2;
  justify-content: flex-end;
  gap: var(--s-1);
}

.ShopHeader_localeToggle__Dm7QL {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 40px;
  padding: 0;
  color: var(--c-ink-700);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    color 140ms ease,
    background 140ms ease;
}

.ShopHeader_localeToggle__Dm7QL:hover {
  color: var(--c-primary);
  background: var(--c-surface-2);
}

.ShopHeader_localeToggle__Dm7QL:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.ShopHeader_localeToggle__Dm7QL svg {
  width: 18px;
  height: 18px;
}

.ShopHeader_accountLinks__HxpWE > a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 32px;
  height: 32px;
  color: var(--c-ink-700);
  font-size: 0;
}

.ShopHeader_accountLinks__HxpWE > a:hover {
  color: var(--c-primary);
}

.ShopHeader_accountLinks__HxpWE > a svg {
  width: 20px;
  height: 20px;
}

.ShopHeader_cartIconWrap__68qLN {
  position: relative;
  display: inline-flex;
}

/* Count bubble pinned to the cart icon's top-right. Its explicit
   font-size is what keeps the number visible under the mobile
   icon-only rule (.accountLinks > a { font-size: 0 }). */
.ShopHeader_cartBadge__y8Dhf {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: #ffffff;
  background: var(--c-primary);
  border-radius: var(--r-pill);
}

.ShopHeader_searchRow__FhrCx {
  padding: 0 var(--s-3) var(--s-3);
}

/* Transparent wrapper. The SearchBar component mounted inside owns
   its own layout, border, background, and inner controls - see
   src/shop/features/search/SearchBar.module.css. The wrapper used to
   carry the row layout for the old in-place button + input + buttons,
   but that fought with SearchBar's own styling AND its
   `overflow: hidden` clipped the absolute-positioned autocomplete
   listbox. */
.ShopHeader_searchBox__5E5ez {
  display: block;
}

/* Full-bleed band so the divider spans the viewport edge-to-edge,
   matching the header's full-width bottom border. The inner .nav keeps
   the container max-width so the links still align with the search row. */
.ShopHeader_navBar__thTN7 {
  display: none;
  max-height: 80px;
  border-top: 1px solid var(--c-rule);
}

/* The nav is ScrollRail's strip (stripClassName) - the flex display and
   overflow come from ScrollRail's base .strip, so this only adds the
   nav-specific alignment, gap and gutter. */
.ShopHeader_nav__7nXtl {
  min-height: 44px;
  align-items: center;
  gap: var(--s-6);
  padding-inline: var(--gutter);
}

.ShopHeader_nav__7nXtl a {
  color: var(--c-ink-900);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.ShopHeader_nav__7nXtl a:hover {
  color: var(--c-primary);
}

.ShopHeader_deals__VUj5O {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.ShopHeader_deals__VUj5O::before {
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: var(--c-primary);
}

@media (min-width: 768px) {
  .ShopHeader_headerSpacer__pFCHy {
    height: var(--shop-header-reserved-h, 209px);
  }
}

/* Tablet and up: full utility bar, three-column logo row, visible nav.
   Account links stay icon-only here; their text labels return at lg. */
@media (min-width: 768px) {
  .ShopHeader_utilityBar__ZCMGv {
    min-height: 34px;
    padding: var(--s-2) var(--s-4);
    font-size: var(--fz-sm);
  }

  .ShopHeader_logoRow__rLmUX {
    min-height: 68px;
    grid-template-columns: 1fr auto 1fr;
    padding: 0 var(--gutter);
  }

  .ShopHeader_logo__SWLgS {
    grid-column: 2;
    justify-self: auto;
    font-size: var(--fz-2xl);
  }

  .ShopHeader_accountLinks__HxpWE {
    grid-column: 3;
    gap: var(--s-2);
  }

  .ShopHeader_accountLinks__HxpWE > a {
    width: 40px;
    height: 40px;
  }

  .ShopHeader_localeToggle__Dm7QL {
    padding: 0 var(--s-2);
  }

  .ShopHeader_searchRow__FhrCx {
    padding: 0 var(--gutter) var(--s-4);
  }

  .ShopHeader_navBar__thTN7 {
    display: block;
  }
}

/* Desktop: account links show their text labels. */
@media (min-width: 1024px) {
  .ShopHeader_accountLinks__HxpWE {
    gap: var(--s-6);
  }

  .ShopHeader_accountLinks__HxpWE > a {
    width: auto;
    height: auto;
    font-size: var(--fz-xs);
  }

  .ShopHeader_accountLinks__HxpWE > a svg {
    width: 22px;
    height: 22px;
  }
}

/* Condensed (scrolled) state: drop the promo + nav bands and tighten the
   logo and search rows into a slim pinned header. The collapsed bands keep
   overflow hidden so their clipped content does not reflow. */
.ShopHeader_scrolled__J25FD .ShopHeader_utilityBar__ZCMGv {
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.ShopHeader_preserveUtilityBar__W92zT.ShopHeader_scrolled__J25FD .ShopHeader_utilityBar__ZCMGv {
  max-height: 60px;
  min-height: 30px;
  padding-top: 6px;
  padding-bottom: 6px;
  opacity: 1;
}

@media (min-width: 768px) {
  .ShopHeader_preserveUtilityBar__W92zT.ShopHeader_scrolled__J25FD .ShopHeader_utilityBar__ZCMGv {
    min-height: 34px;
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
  }
}

.ShopHeader_scrolled__J25FD .ShopHeader_navBar__thTN7 {
  max-height: 0;
  overflow: hidden;
  border-top-width: 0;
}

.ShopHeader_scrolled__J25FD .ShopHeader_logoRow__rLmUX {
  min-height: 0;
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}

.ShopHeader_scrolled__J25FD .ShopHeader_searchRow__FhrCx {
  padding-bottom: var(--s-2);
}

@media (prefers-reduced-motion: no-preference) {
  .ShopHeader_utilityBar__ZCMGv,
  .ShopHeader_navBar__thTN7,
  .ShopHeader_logoRow__rLmUX,
  .ShopHeader_searchRow__FhrCx {
    transition:
      max-height 160ms ease,
      min-height 160ms ease,
      padding 160ms ease,
      opacity 160ms ease,
      border-width 160ms ease;
  }
}