/* Liquid Glass 2.1 — LOCAL PREVIEW DRAFT, not a production release.
   Opt in in the initial HTML: data-md-theme="lg21". Solid: data-md-glass="off".
   Load in the early head after the accepted mobile CSS; never add a late wrapper.
   Existing mobile DOM, links, photos, SVG, grids and commerce remain unchanged.
   Only the header and bottom navigation may blur. No opacity on containers.
   Targeted !important rules override existing fixed-height/compact-type rules.
   Product/cart/keyboard/200% geometry still require the planned visual QA. */
html[data-md-theme="lg21"] {
  --lg-font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --lg-text: #20242b;
  --lg-muted: #596273;
  --lg-accent: #c62832;
  --lg-control-line: #737d8a;
  --lg-focus: #005ab8;
}
/* Desktop typography only: no desktop sizing, grids, positioning or blur. */
@media (min-width: 768px) {
  html[data-md-theme="lg21"] body { font-family: var(--lg-font); }
  html[data-md-theme="lg21"] :is(button, input, select, textarea) { font-family: var(--lg-font); }
}
@media (max-width: 767.98px) {
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] {
    --lg-font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    --lg-space-1: .25rem;
    --lg-space-2: .5rem;
    --lg-space-3: .75rem;
    --lg-space-4: 1rem;
    --lg-space-6: 1.5rem;
    --lg-space-8: 2rem;
    --lg-canvas: #f4f5f7;
    --lg-surface: #fff;
    --lg-text: #20242b;
    --lg-muted: #596273;
    --lg-accent: #c62832;
    --lg-line: #d8dee5;
    --lg-control-line: #737d8a;
    --lg-focus: #005ab8;
    --lg-radius-control: .875rem;
    --lg-radius-card: 1rem;
    --lg-radius-panel: 1.375rem;
    --lg-shadow-card: 0 2px 8px rgb(32 36 43 / .06);
    --lg-shadow-nav: 0 2px 12px rgb(32 36 43 / .07);
    --lg-header-height: calc(3.5rem + env(safe-area-inset-top, 0px));
    --lg-nav-height: calc(4.5rem + 1px + env(safe-area-inset-bottom, 0px));
    --lg-buy-height: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    --lg-z-header: 300;
    --lg-z-search: 310;
    --lg-z-bottom: 200;
    --lg-z-buy: 205;
    --lg-z-dialog: 10000;
    --mdm-bg: var(--lg-canvas);
    --mdm-card: var(--lg-surface);
    --mdm-surface: #eef0f3;
    --mdm-text: var(--lg-text);
    --mdm-muted: var(--lg-muted);
    --mdm-red: var(--lg-accent);
    --mdm-active: var(--lg-accent);
    --mdm-line: var(--lg-line);
    --mdm-bottom-space: var(--lg-nav-height);
    font-size: 100%;
    scroll-padding-top: calc(var(--lg-header-height) + 4rem);
    scroll-padding-bottom: var(--mdm-bottom-space);
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"][data-mdm-page="product"] {
    --mdm-bottom-space: var(--lg-buy-height);
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active {
    font-family: var(--lg-font);
    font-size: 1rem;
    line-height: 1.5;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(button, input, select, textarea) {
    font-family: var(--lg-font);
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-header {
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: var(--lg-z-header);
    height: var(--lg-header-height);
    min-height: var(--lg-header-height);
    padding: calc(.25rem + env(safe-area-inset-top, 0px)) max(.5rem, env(safe-area-inset-right, 0px)) .25rem max(.5rem, env(safe-area-inset-left, 0px));
    gap: .25rem;
    background: var(--lg-surface);
    color: var(--lg-text);
    border-bottom: 1px solid var(--lg-line);
    box-shadow: var(--lg-shadow-nav);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-brand {
    min-width: 0;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: normal;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-brand-title {
    min-width: 0;
    overflow-wrap: anywhere;
    letter-spacing: normal;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-header .mdm-icon-button, .mdm-search button) {
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-basis: 44px;
    border-radius: var(--lg-radius-control);
  }
  /* The existing search sibling stays opaque: never a third glass layer. */
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-search {
    top: var(--lg-header-height);
    z-index: var(--lg-z-search);
    background: var(--lg-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-search form {
    min-height: 2.875rem;
    border: 1px solid var(--lg-control-line);
    border-radius: var(--lg-radius-control);
    background: var(--lg-surface);
    box-shadow: none;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-search input:not([type="hidden"]) {
    min-height: 2.75rem;
    font-size: 1rem;
    line-height: 1.4;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"][data-mdm-firstpaint="1"] .header-search {
    height: auto !important;
    margin: 0 .5rem !important;
    padding: 2px 0 .5rem !important;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"][data-mdm-firstpaint="1"] body.mdm-active #mse2_form,
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-search #mse2_form {
    height: auto !important;
    min-height: 2.875rem !important;
    border-color: var(--lg-control-line) !important;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"][data-mdm-firstpaint="1"] body.mdm-active #mse2_form :is(input[type="text"], input[type="search"]) {
    height: 2.75rem !important;
    font: 1rem/1.4 var(--lg-font) !important;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-search form:focus-within {
    outline: 3px solid var(--lg-focus);
    outline-offset: 2px;
    border-color: var(--lg-focus);
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-bottom-nav {
    box-sizing: border-box;
    grid-template-columns: repeat(5, minmax(max-content, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    z-index: var(--lg-z-bottom);
    min-height: var(--lg-nav-height);
    padding: .25rem max(.25rem, env(safe-area-inset-right, 0px)) calc(.25rem + env(safe-area-inset-bottom, 0px)) max(.25rem, env(safe-area-inset-left, 0px));
    background: var(--lg-surface);
    color: var(--lg-text);
    border-color: var(--lg-line);
    box-shadow: 0 -2px 12px rgb(32 36 43 / .07);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Keep horizontal keyboard/touch access without adding scrollbar height
     beyond the shared safe-area/content reserve at large text sizes. */
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-bottom-nav::-webkit-scrollbar {
    display: none;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-bottom-nav a {
    min-height: 4rem;
    min-width: 44px;
    gap: .25rem;
    padding: .125rem 0;
    color: var(--lg-muted);
    font-size: .75rem;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-bottom-nav a[aria-current="page"] {
    color: var(--lg-accent);
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  /* Keep existing product-only purchase bar and native button behaviour. */
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-buybar {
    box-sizing: border-box;
    z-index: var(--lg-z-buy);
    min-height: var(--lg-buy-height);
    background: var(--lg-surface);
    border-color: var(--lg-line);
    box-shadow: var(--lg-shadow-nav);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-buy-price, .price-current) {
    color: var(--lg-text);
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: anywhere;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .descriptions-name {
    font-size: 1.5rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-buy-button, .mdm-primary-button, .mdm-module-buy, .ms2_form .btn-basket) {
    min-height: 44px;
    border-radius: var(--lg-radius-control);
    background: var(--lg-accent);
    color: #fff;
    font-size: 1rem;
    line-height: 1.4;
    white-space: normal;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-module-actions a, .mdm-filter-group > summary, .mdm-filter-choice-more) {
    min-height: 44px;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-card {
    border-radius: var(--lg-radius-card);
    background: var(--lg-surface);
    box-shadow: var(--lg-shadow-card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-card .description .name {
    font-size: .875rem !important;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-card .description .price {
    font-size: 1.375rem !important;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-card :is(.mdm-status, .mdm-card-details, .mdm-card-meta, .ts-tile-specs, .ts-delivery) {
    font-size: .875rem !important;
    line-height: 1.4 !important;
  }
  /* Existing catalog refresh uses ID-scoped important font shorthands.
     Override just these text nodes, not the accepted grid or data handlers. */
  html[data-md-theme="lg21"][data-catalog-refresh="1"][data-mdm-page="catalog"] body.mdm-active #mse2_results .description > .price {
    font: 700 1.375rem/1.35 var(--lg-font) !important;
  }
  html[data-md-theme="lg21"][data-catalog-refresh="1"][data-mdm-page="catalog"] body.mdm-active #mse2_results .name a {
    font: 500 .875rem/1.4 var(--lg-font) !important;
  }
  html[data-md-theme="lg21"][data-catalog-refresh="1"][data-mdm-page="catalog"] body.mdm-active #mse2_results :is(.mdm-card-details, .mdm-card-id, .mdm-status, .mdm-price-warning) {
    font: .875rem/1.4 var(--lg-font) !important;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-filter-dialog, .mdm-navigation-body, .mdm-dialog-heading, .mdm-dialog-actions, #msCart, #msOrder) {
    background: var(--lg-surface);
    color: var(--lg-text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-filter-dialog {
    z-index: var(--lg-z-dialog);
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 1rem);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 1rem);
    border: 1px solid var(--lg-control-line);
    border-radius: var(--lg-radius-panel) var(--lg-radius-panel) 0 0;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-filter-dialog::backdrop {
    background: rgb(32 36 43 / .38);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active.mdm-dialog-open { overflow: hidden; }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-dialog-actions {
    flex-wrap: wrap;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-dialog-heading {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-dialog-heading h2 {
    flex: 1 1 0;
    min-width: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active .mdm-dialog-heading > button {
    flex: 0 0 44px;
    align-self: flex-start;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-filter-dialog, #msOrder) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    min-height: 44px;
    max-width: 100%;
    border-color: var(--lg-control-line);
    background: var(--lg-surface);
    color: var(--lg-text);
    font-size: 1rem;
    line-height: 1.4;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--lg-focus);
    outline-offset: 2px;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-header, .mdm-bottom-nav) :is(a, button):focus-visible {
    outline: 3px solid var(--lg-focus);
    outline-offset: -3px;
  }
}
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  @media (max-width: 767.98px) {
    html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-header, .mdm-bottom-nav) {
      background: rgb(255 255 255 / .92);
      -webkit-backdrop-filter: blur(12px) saturate(120%);
      backdrop-filter: blur(12px) saturate(120%);
    }
  }
}
@media (max-width: 767.98px) {
  html[data-md-theme="lg21"][data-md-mobile-preview="1"][data-md-glass="off"] body.mdm-active :is(.mdm-header, .mdm-bottom-nav) {
    background: var(--lg-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (max-width: 767.98px) and (prefers-reduced-transparency: reduce) {
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-header, .mdm-bottom-nav) {
    background: var(--lg-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] { scroll-behavior: auto; }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-header, .mdm-search, .mdm-bottom-nav, .mdm-buybar, .mdm-filter-dialog, .mdm-card) {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }
}
@media (max-width: 767.98px) and (forced-colors: active) {
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] {
    --lg-canvas: Canvas;
    --lg-surface: Canvas;
    --lg-text: CanvasText;
    --lg-muted: CanvasText;
    --lg-control-line: ButtonText;
    --lg-line: CanvasText;
    --lg-accent: LinkText;
    --lg-focus: Highlight;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-header, .mdm-bottom-nav, .mdm-card, .mdm-buybar, .mdm-filter-dialog) {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-buy-button, .mdm-primary-button, .mdm-module-buy, .ms2_form .btn-basket) {
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
  html[data-md-theme="lg21"][data-md-mobile-preview="1"] body.mdm-active :is(.mdm-header, .mdm-bottom-nav) svg { color: CanvasText; }
}