/* Compact category navigation; independent of generated utility classes. */
.category-navigation { display: none; }
@media (min-width: 64rem) { .category-navigation { display: grid; } }
.category-browser {
  --cat-bg: #fff;
  --cat-soft: #f8f9fb;
  --cat-ink: #374151;
  --cat-muted: #6b7280;
  --cat-line: #eceef2;
  --cat-accent: #434ece;
  color: var(--cat-ink);
  background: var(--cat-bg);
  text-align: start;
}
.dark .category-browser {
  --cat-bg: #18181b;
  --cat-soft: #202024;
  --cat-ink: #e4e4e7;
  --cat-muted: #a1a1aa;
  --cat-line: #303036;
  --cat-accent: #a5b4fc;
}
.category-menu-button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 0;
  color: inherit;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.category-menu-button > svg:first-child { width: 19px; height: 19px; }
.category-menu-button[aria-expanded="true"] { color: #434ece; }
.dark .category-menu-button[aria-expanded="true"] { color: #a5b4fc; }
.category-chevron { flex: 0 0 14px; width: 14px; height: 14px; margin-inline-start: auto; }
.category-menu-button .category-chevron { transform: rotate(-90deg); }
.category-menu-button[aria-expanded="true"] .category-chevron { transform: rotate(90deg); }
.category-mobile-trigger { display: flex; align-items: center; gap: 5px; font-size: 11px; }
#category-menu-panel {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  width: min(880px, 100%);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 0 0 10px 10px;
  background: #fff;
  box-shadow: 0 12px 28px #11182714;
  z-index: 60;
}
.dark #category-menu-panel { border-color: #303036; background: #18181b; }
#category-menu-panel[hidden] { display: none; }
.category-tree {
  position: relative;
  height: min(340px, calc(100dvh - 210px));
  min-height: 160px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0;
  background: linear-gradient(to left, var(--cat-soft) 190px, var(--cat-bg) 190px);
  scrollbar-width: thin;
}
.category-root { width: 190px; }
.category-root > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 14px;
  border-inline-start: 2px solid transparent;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  cursor: pointer;
  list-style: none;
  overflow-wrap: anywhere;
}
.category-root > summary::-webkit-details-marker { display: none; }
.category-root > summary:hover { color: var(--cat-accent); }
.category-root[open] > summary { color: var(--cat-accent); border-inline-start-color: var(--cat-accent); background: var(--cat-bg); }
.category-root > summary .category-chevron { color: var(--cat-muted); width: 12px; height: 12px; }
.category-panel {
  position: absolute;
  inset-inline-start: 190px;
  inset-inline-end: 0;
  top: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 17px 22px 22px;
  border-inline-start: 1px solid var(--cat-line);
}
.category-panel-heading { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--cat-line); }
.category-panel-heading h3 { font-size: 13px; font-weight: 600; line-height: 1.8; }
.category-cards { columns: 3; column-gap: 26px; }
.category-card { break-inside: avoid; padding-bottom: 19px; overflow-wrap: anywhere; }
.category-card h4 { padding-inline-start: 8px; border-inline-start: 2px solid var(--cat-accent); font-size: 12px; font-weight: 600; line-height: 1.6; margin-bottom: 8px; }
.category-card ul { display: grid; gap: 3px; padding-inline-start: 10px; }
.category-card li { font-size: 12px; line-height: 1.9; color: var(--cat-muted); }
.category-loading, .category-empty { padding: 20px; color: #6b7280; font-size: 12px; line-height: 1.9; }
.category-empty { padding: 0; color: var(--cat-muted); }
.category-loading button { display: block; padding: 10px 0; color: #434ece; text-decoration: underline; }
.category-menu-button:focus-visible, .category-root > summary:focus-visible, .category-mobile-trigger:focus-visible, .category-home-link:focus-visible { outline: 2px solid #818cf8; outline-offset: -2px; border-radius: 3px; }
/* Override the original decorative drawer and retain scrolling for long trees. */
#offcanvas-right { width: min(320px, 88vw) !important; overflow-y: auto !important; overscroll-behavior: contain; background: #fff; padding-bottom: env(safe-area-inset-bottom); scrollbar-width: thin; }
.dark #offcanvas-right { background: #18181b; }
#offcanvas-right > div:first-child { position: sticky; top: 0; z-index: 2; min-height: 56px; padding: 10px 16px !important; background: #fff; backdrop-filter: none; }
.dark #offcanvas-right > div:first-child { background: #18181b; }
#offcanvas-right #store-menu-title { font-size: 14px; font-weight: 600; }
#offcanvas-right #store-menu-title::before { display: none; }
#offcanvas-right > div:first-child button { width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; }
#offcanvas-right > div:first-child button:hover { transform: none; background: #f1f2f6; color: #434ece; }
#offcanvas-right > div:first-child button svg { width: 18px; height: 18px; }
.category-home-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 16px; padding: 10px 0; border-bottom: 1px solid #eceef2; font-size: 12px; color: #6b7280; }
.dark .category-home-link { border-color: #303036; color: #a1a1aa; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-tree { height: auto; min-height: 0; padding: 4px 16px 16px; overflow: visible; background: var(--cat-bg); }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-root { width: 100%; border-bottom: 1px solid var(--cat-line); }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-root > summary { min-height: 48px; padding: 12px 0; border: 0; font-size: 13px; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-root > summary .category-chevron { transform: rotate(-90deg); }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-root[open] > summary .category-chevron { transform: rotate(90deg); }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-panel { position: static; height: auto; padding: 2px 10px 6px; border: 0; overflow: visible; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-panel-heading { display: none; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-cards { columns: 1; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-card { padding-bottom: 15px; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-card ul { gap: 5px; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-card li { line-height: 2; }
@media (min-width: 64rem) and (max-width: 75rem) {
  #megaMenu nav { column-gap: 12px; }
  #megaMenu nav > ul { column-gap: 16px; }
}
/* A slightly roomier scale, with the same light column layout. */
#category-menu-panel { width: min(1080px, 100%); border-color: #dfe3f5; border-top: 3px solid #818cf8; border-radius: 0 0 14px 14px; box-shadow: 0 22px 48px #252b5c24, 0 5px 14px #252b5c12; }
.dark #category-menu-panel { border-color: #424565; border-top-color: #818cf8; box-shadow: 0 22px 48px #0008, 0 5px 14px #0005; }
.category-browser { --cat-soft: #f2f4ff; --cat-line: #e3e7f6; }
.dark .category-browser { --cat-soft: #222437; --cat-line: #383b50; }
.category-tree { height: min(440px, calc(100dvh - 210px)); background: linear-gradient(to left, var(--cat-soft) 230px, var(--cat-bg) 230px); }
.category-tree { direction: ltr; }
.category-root { width: 230px; margin-left: auto; direction: rtl; }
.category-root > summary { min-height: 50px; padding: 11px 17px; font-size: 15px; }
.category-root[open] > summary { background: linear-gradient(to left, var(--cat-soft), var(--cat-bg)); font-weight: 600; }
.category-root > summary > a { padding: 3px 0; }
.category-root > summary > a { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.category-root-icon { width: 19px; height: 19px; flex: 0 0 19px; color: var(--cat-accent); }
.category-panel { inset-inline-start: 230px; inset-inline-end: 0; direction: rtl; padding: 24px 30px 30px; }
.category-tree, .category-panel, #offcanvas-right { scrollbar-width: thin; scrollbar-color: #aab2e5 transparent; }
.dark .category-tree, .dark .category-panel, .dark #offcanvas-right { scrollbar-color: #676d9c transparent; }
.category-tree::-webkit-scrollbar, .category-panel::-webkit-scrollbar, #offcanvas-right::-webkit-scrollbar { width: 7px; }
.category-tree::-webkit-scrollbar-track, .category-panel::-webkit-scrollbar-track, #offcanvas-right::-webkit-scrollbar-track { background: transparent; }
.category-tree::-webkit-scrollbar-thumb, .category-panel::-webkit-scrollbar-thumb, #offcanvas-right::-webkit-scrollbar-thumb { background: #aab2e5; border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
.category-tree::-webkit-scrollbar-thumb:hover, .category-panel::-webkit-scrollbar-thumb:hover, #offcanvas-right::-webkit-scrollbar-thumb:hover { background-color: #737ed0; }
.dark .category-tree::-webkit-scrollbar-thumb, .dark .category-panel::-webkit-scrollbar-thumb, .dark #offcanvas-right::-webkit-scrollbar-thumb { background-color: #676d9c; }
.category-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.category-panel-heading h3 { font-size: 16px; }
.category-panel-heading > a { font-size: 13px; color: var(--cat-accent); white-space: nowrap; }
.category-panel-heading > a span { display: inline-block; margin-inline-start: 6px; }
.category-card { padding-bottom: 22px; }
.category-card h4 { font-size: 15px; border-inline-start-width: 3px; }
.category-card li { font-size: 14px; }
.category-card a { display: block; padding: 3px 4px; border-radius: 4px; transition: color 150ms, background-color 150ms; }
.category-browser a:hover { color: var(--cat-accent); }
.category-card a:hover { background: var(--cat-soft); }
.category-card li ul { margin: 4px 0 6px; border-inline-start: 1px solid var(--cat-line); }
.category-browser a:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; border-radius: 3px; }
#offcanvas-right { width: min(390px, 92vw) !important; box-shadow: -16px 0 40px #252b5c30; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-tree { direction: rtl; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-root { margin-left: 0; }
.dark #offcanvas-right { box-shadow: -16px 0 40px #0009; }
#offcanvas-right > div:first-child { background: #f2f4ff; border-bottom: 1px solid #dfe3f5; box-shadow: 0 4px 12px #252b5c10; }
.dark #offcanvas-right > div:first-child { background: #222437; border-bottom-color: #383b50; box-shadow: 0 4px 12px #0004; }
#offcanvas-right #store-menu-title { font-size: 16px; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-root > summary { min-height: 56px; font-size: 15px; gap: 16px; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-root > summary > a { padding: 6px 0; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-panel-heading { display: flex; border: 0; padding: 0 0 10px; margin: 0; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-panel-heading h3 { display: none; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-panel-heading > a { padding: 8px 0; }
:is(#offcanvas-right, #mobile-site-menu-categories) .category-card a { padding-top: 7px; padding-bottom: 7px; }
.category-home-link { font-size: 14px; }
/* Category landing pages reuse the store's product cards. */
.category-results { padding-top: 26px; padding-bottom: 60px; }
.category-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: #6b7280; }
.category-breadcrumbs a:hover { color: #434ece; }
#shop-breadcrumb { margin-bottom: 18px; }
.category-results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 24px 0 18px; }
.category-results-heading h1 { font-size: 24px; font-weight: 700; }
.category-results-heading > span { font-size: 14px; color: #6b7280; }
.category-subcategories { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.category-subcategories a { display: flex; gap: 14px; padding: 10px 15px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; font-size: 14px; }
.category-subcategories a:hover { border-color: #818cf8; color: #434ece; }
.category-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.category-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; font-size: 14px; }
.category-pagination a { padding: 10px 16px; border: 1px solid #d9dcf4; border-radius: 7px; color: #434ece; }
.category-results-empty { padding: 32px 20px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 15px; line-height: 2; }
.dark .category-subcategories a { background: #202024; border-color: #303036; }
.dark .category-pagination a { color: #a5b4fc; border-color: #43465e; }
.dark .category-results-empty { border-color: #303036; }
.dark .category-breadcrumbs, .dark .category-results-heading > span { color: #a1a1aa; }
@media (max-width: 63.99rem) { .category-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .category-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .category-results-heading h1 { font-size: 21px; } }
@media (max-width: 23rem) { .category-product-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .category-card a { transition: none; } }
.shop-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 24px; }
.shop-filters { padding: 20px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.shop-filters form { display: grid; gap: 10px; }
.shop-filters h2 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.shop-filters label { font-size: 14px; }
.shop-filters input[type="search"], .shop-filters select { width: 100%; min-width: 0; padding: 9px; border: 1px solid #d1d5db; border-radius: 8px; background: inherit; }
.shop-filters .shop-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.shop-filters button { padding: 10px; background: #434ece; color: white; border-radius: 8px; }
.shop-filters a { text-align: center; font-size: 13px; color: #434ece; }
.shop-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.shop-results { min-width: 0; }
.dark .shop-filters { background: #202024; border-color: #303036; }
@media (max-width: 60rem) { .shop-layout { grid-template-columns: 1fr; } .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 35rem) { .shop-product-grid { grid-template-columns: 1fr; } }
#searchResults { max-height: 440px; overflow-y: auto; }
/* Store filters and ordering */
.shop-layout { grid-template-columns: minmax(250px, 275px) minmax(0, 1fr); gap: 22px; }
.shop-filters { border-radius: 18px; padding: 20px; box-shadow: 0 12px 32px rgba(38, 46, 105, .07); }
.shop-filters form { gap: 12px; }
.shop-filters h2 { font-size: 19px; margin-bottom: 2px; }
.shop-filters input[type="search"], .shop-filters input[type="number"] { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #dfe3f5; border-radius: 10px; background: #fff; color: #1f2937; }
.shop-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 7px; padding-top: 14px; border-top: 1px solid #edf0fa; font-size: 15px; font-weight: 800; }
.shop-filter-heading span { font-size: 11px; color: #8189a0; font-weight: 500; }
.shop-category-tree { max-height: 350px; overflow: auto; padding: 4px 2px 4px 8px; scrollbar-width: thin; }
.shop-category-branch { margin: 4px 0; }
.shop-category-branch summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; }
.shop-category-branch summary::-webkit-details-marker { display: none; }
.shop-category-branch summary:hover, .shop-category-choice:hover { background: #f1f3ff; }
.shop-chevron { display: inline-block; color: #6873ba; transition: transform .2s; }
.shop-category-branch[open] > summary .shop-chevron { transform: rotate(180deg); }
.shop-category-children { margin-inline-start: 12px; padding-inline-start: 8px; border-inline-start: 1px solid #dfe3f5; }
.shop-category-choice { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1.7; }
.shop-category-choice input, .shop-check input { accent-color: #434ece; width: 16px; height: 16px; flex: 0 0 auto; }
.shop-price-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shop-price-range label { display: grid; gap: 5px; color: #6b7280; }
.shop-filters button { font-weight: 700; box-shadow: 0 8px 18px rgba(67, 78, 206, .22); }
.shop-sort-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; padding: 14px 18px; margin-bottom: 20px; border: 1px solid #e1e5f6; border-radius: 16px; background: linear-gradient(110deg, #fff, #f4f5ff); box-shadow: 0 9px 26px rgba(36, 48, 102, .07); }
.shop-sort-heading { display: flex; align-items: center; gap: 9px; font-size: 14px; white-space: nowrap; }
.shop-sort-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #e9ebff; color: #434ece; font-size: 20px; }
.shop-sort-options { display: flex; flex-wrap: wrap; gap: 5px; }
.shop-sort-options a { padding: 8px 11px; border-radius: 9px; font-size: 13px; color: #5c657a; white-space: nowrap; transition: background .2s, color .2s; }
.shop-sort-options a:hover { background: #e9ebff; color: #303ba8; }
.shop-sort-options a.is-active { background: #434ece; color: #fff; box-shadow: 0 5px 12px rgba(67, 78, 206, .2); }
.dark .shop-sort-bar { background: linear-gradient(110deg, #242431, #202024); border-color: #3a3d56; }
.dark .shop-sort-options a { color: #c5c8df; }
.dark .shop-sort-options a.is-active { color: white; }
.dark .shop-category-branch summary:hover, .dark .shop-category-choice:hover { background: #30334c; }
.dark .shop-filter-heading { border-color: #3a3d56; }
.dark .shop-filters input[type="search"], .dark .shop-filters input[type="number"] { background: #292a39; border-color: #484a62; color: white; }
@media (max-width: 60rem) { .shop-layout { grid-template-columns: 1fr; } .shop-category-tree { max-height: 240px; } }
@media (max-width: 35rem) { .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .shop-sort-bar { padding: 12px; } .shop-sort-options { gap: 3px; } .shop-sort-options a { padding: 7px 9px; font-size: 12px; } .shop-filters { padding: 16px; } }
@media (max-width: 23rem) { .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }
@media (max-width: 430px) {
  .storefront-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-product-content { padding: .6rem; }
  .store-product-title { font-size: .74rem; line-height: 1.5; }
  .store-product-price strong { font-size: .9rem; }
}
.shop-filter-status { margin-bottom: 8px; color: #434ece; font-size: 13px; }
#shop-ajax-results[aria-busy="true"] { opacity: .55; transition: opacity .2s; }
/* Desktop mega menu: two independent scroll areas. */
#megaMenu nav > ul > li > a, #megaMenu .category-menu-button { font-size: 1rem; font-weight: inherit; line-height: 1.5; }
#category-menu-panel .category-browser { position: relative; height: min(440px, calc(100dvh - 210px)); min-height: 160px; }
#category-menu-panel .category-tree { width: 230px; height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; background: var(--cat-soft); }
#category-menu-panel .category-panel-viewport { position: absolute; inset-inline-start: 230px; inset-inline-end: 0; top: 0; bottom: 0; overflow: hidden; border-inline-start: 1px solid var(--cat-line); background: var(--cat-bg); }
#category-menu-panel .category-panel-viewport > .category-panel { position: absolute; inset: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; border: 0; }
#category-menu-panel .category-panel-viewport > .category-panel[hidden] { display: none; }
.shop-results { position: relative; }
.shop-filter-status { position: absolute; z-index: 2; top: -28px; inset-inline-start: 0; padding: 3px 8px; border-radius: 7px; background: #eef0ff; }
.shop-load-more { display: block; width: 100%; min-height: 32px; margin-top: 12px; text-align: center; color: #6670b8; font-size: 13px; }
.shop-sort-bar { margin-bottom: 18px; }
.shop-result-count { margin-inline-start: auto; color: #6b7280; font-size: 12px; white-space: nowrap; }
.category-seo-description { padding: 20px; border: 1px solid #e1e5f6; border-radius: 16px; background: #fff; }
.category-seo-description > h1 { margin-bottom: 12px; }
.category-description-summary { cursor: pointer; list-style: none; }
.category-description-summary::-webkit-details-marker { display: none; }
.category-description-preview { display: block; max-height: 5.85em; overflow: hidden; color: #5c657a; font-size: 14px; line-height: 1.95; -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 100%); mask-image: linear-gradient(to bottom, #000 25%, transparent 100%); }
.category-description-action { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 10px 12px; margin-top: 6px; color: #434ece; font-size: 13px; font-weight: 700; }
.category-description-action svg { width: 18px; height: 18px; }
.category-description-less { display: none; }
.category-description-accordion[open] .category-description-preview, .category-description-accordion[open] .category-description-more { display: none; }
.category-description-accordion[open] .category-description-less { display: inline; }
.category-description-accordion[open] .category-description-action svg { transform: rotate(180deg); }
.category-description-full { padding-top: 10px; }
.category-description-summary:focus-visible { outline: 2px solid #434ece; outline-offset: 4px; border-radius: 8px; }
.dark .category-seo-description { background: #202024; border-color: #3a3d56; }
.dark .category-description-preview { color: #c5c8df; }
.dark .category-description-action { color: #b0b7ff; }
@media (max-width: 35rem) { .category-seo-description { padding: 16px; } }

/* Mobile product filter toolbar and side drawer. */
.shop-mobile-toolbar, .shop-mobile-sort { display: none; }
.shop-filters [data-filter-section] { min-width: 0; }
.shop-filters [data-filter-section] > label { display: block; margin-bottom: 8px; }
#shop-filter-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(88vw, 360px); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: #fff; color: #1f2937; overflow-y: auto; }
#shop-filter-drawer::backdrop { background: rgb(15 23 42 / .45); }
.shop-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #e5e7eb; }
.shop-drawer-header h2 { font-size: 18px; font-weight: 700; }
.shop-drawer-header button { width: 44px; height: 44px; font-size: 26px; }
.dark #shop-filter-drawer { background: #202024; color: #fff; }
@media (max-width: 60rem) {
    .shop-mobile-ready .shop-mobile-toolbar { display: flex; align-items: center; gap: 3px; margin-bottom: 16px; min-width: 0; }
    .shop-filter-track { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 4px 1px; }
    .shop-filter-track::-webkit-scrollbar { display: none; }
    .shop-filter-track button { flex: 0 0 auto; white-space: nowrap; min-height: 44px; padding: 9px 14px; border: 1px solid #dfe3f5; border-radius: 12px; background: #fff; color: #475569; font-size: 13px; }
    .shop-filter-track button.is-active, .shop-filter-track button[aria-pressed="true"] { color: #434ece; border-color: #434ece; background: #eef0ff; }
    .shop-filter-arrow { flex: 0 0 24px; width: 24px; height: 44px; color: #64748b; font-size: 25px; font-weight: 300; }
    .shop-filter-arrow[hidden] { display: none; }
    .shop-filter-arrow:disabled { opacity: .25; }
    .shop-mobile-ready .shop-sort-bar .shop-sort-heading, .shop-mobile-ready .shop-sort-bar .shop-sort-options { display: none; }
    #shop-filter-drawer .shop-filters { padding: 20px; border: 0; border-radius: 0; box-shadow: none; }
    #shop-filter-drawer .shop-filters h2, #shop-filter-drawer .shop-check, #shop-filter-drawer [data-filter-section] { display: none; }
    #shop-filter-drawer [data-filter-section].is-visible { display: block; }
    #shop-filter-drawer .shop-category-tree { max-height: none; }
    .dark .shop-filter-track button { background: #202024; color: #c5c8df; border-color: #484a62; }
    .dark .shop-filter-track button.is-active, .dark .shop-filter-track button[aria-pressed="true"] { background: #31365e; color: #d9ddff; border-color: #818cf8; }
    #shop-filter-drawer[open] { animation: shop-drawer-enter .2s ease-out; }
}
@keyframes shop-drawer-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { #shop-filter-drawer[open] { animation: none; } }

/* Searchable multi-select color facet and direct sort choices. */
.shop-color-search-label { color: #64748b; font-size: 12px !important; }
.shop-color-options { display: grid; gap: 6px; max-height: 290px; overflow-y: auto; margin-top: 10px; padding: 2px; }
.shop-color-choice { display: flex !important; align-items: center; gap: 10px; min-height: 44px; margin: 0 !important; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background .15s, border-color .15s; }
.shop-color-choice:hover { background: #f5f6ff; }
.shop-color-choice:has(input:checked) { background: #eef0ff; border-color: #c7ceff; }
.shop-color-choice input { width: 16px; height: 16px; accent-color: #434ece; flex-shrink: 0; }
.shop-color-swatch { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--swatch-color, #e5e7eb); border: 1px solid rgb(100 116 139 / .35); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35); }
.shop-color-swatch.is-unknown { background: linear-gradient(135deg, #e5e7eb 48%, #94a3b8 49%, #94a3b8 53%, #e5e7eb 54%); }
.shop-color-choice[hidden], .shop-color-empty[hidden] { display: none !important; }
.shop-color-empty { padding: 12px 4px; color: #64748b; font-size: 13px; }
.shop-sort-choices { display: grid; gap: 10px; }
.shop-filters .shop-sort-choice { display: flex; align-items: center; gap: 12px; min-height: 54px; margin: 0; padding: 14px; border: 1px solid #e1e5f0; border-radius: 12px; cursor: pointer; transition: background .15s, border-color .15s; }
.shop-sort-choice input { width: 18px; height: 18px; accent-color: #434ece; }
.shop-sort-choice-mark { margin-inline-start: auto; opacity: 0; color: #434ece; }
.shop-sort-choice:has(input:checked) { background: #eef0ff; border-color: #434ece; color: #434ece; font-weight: 700; }
.shop-sort-choice:has(input:checked) .shop-sort-choice-mark { opacity: 1; }
.shop-sort-choice:focus-within, .shop-color-choice:focus-within { outline: 2px solid #818cf8; outline-offset: 2px; }
.dark .shop-sort-choice { border-color: #484a62; }
.dark .shop-color-choice:hover { background: #292a39; }
.dark .shop-sort-choice:has(input:checked), .dark .shop-color-choice:has(input:checked) { background: #31365e; color: #d9ddff; border-color: #818cf8; }
.dark .shop-color-search-label, .dark .shop-color-empty { color: #b4bbcf; }
@media (max-width: 60rem) { #shop-filter-drawer .shop-color-options { max-height: none; } }

.product-category-breadcrumb { margin: 8px 0 24px; font-size: 13px; color: #64748b; }
.product-category-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.9; }
.product-category-breadcrumb li { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.product-category-breadcrumb li + li::before { content: " / "; opacity: .5; }
.product-category-breadcrumb a:hover { color: #434ece; }
.product-category-breadcrumb [aria-current="page"] { color: #334155; overflow-wrap: anywhere; }
.dark .product-category-breadcrumb { color: #a1a1aa; }
.dark .product-category-breadcrumb [aria-current="page"] { color: #e4e4e7; }

.product-purchase-category { color: #434ece; display: inline-block; margin-inline-start: 6px; }
.product-purchase-category:hover { text-decoration: underline; }
.dark .product-purchase-category { color: #a5b4fc; }