/* =============================================================================
   LUMINA DISPLAY SYSTEMS — storefront fix pack  v3.0  ·  MOBILE FIRST
   shop.luminadisplay.com  ·  Zoho Commerce "Spark"
   -----------------------------------------------------------------------------
   DEPLOY:  theme Custom CSS slot (whole file — @import must stay line 1)
   PAIRS WITH: lumina-fixes-v3.js → footer custom-code slot

   ⚠ SUPERSEDES v1 AND v2. Do not deploy either. Their selector map was wrong:
     · .theme-product-box-content is a CARD INNER, not the grid
     · .theme-product-details-area is the card's TEXT BLOCK, not the card
     · .theme-content-area is the WHOLE PAGE WRAPPER — v2 would have clamped
       the entire listing page to two lines
     Every selector below was harvested from the live DOM at 390px.

   HOW THIS FILE IS ORGANISED
     Base styles = the phone (390px). No media query wraps them.
     @media (min-width: 640px)  = large phone / small tablet
     @media (min-width: 1024px) = desktop, where the filter rail appears
     Nothing uses max-width. Screens earn density as they get bigger.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&display=swap');


/* =============================================================================
   TOKENS
   ========================================================================== */
:root {
  --lum-ink:        #0b1220;
  --lum-ink-2:      #111826;
  --lum-ink-3:      #38424f;
  --lum-gray:       #64707f;
  --lum-gray-2:     #93a0ae;

  --lum-green:      #67c15e;
  --lum-green-600:  #47a63f;
  --lum-green-700:  #2e6b2a;
  --lum-green-ink:  #06210a;
  --lum-green-soft: #edf7ec;
  --lum-green-line: #c9e6c5;

  --lum-red-soft:   #fff1f0;
  --lum-red-ink:    #b42318;

  --lum-bg:         #fff;
  --lum-surface:    #f7f9fb;
  --lum-surface-2:  #eef2f6;
  --lum-line:       #e3e8ee;
  --lum-line-2:     #d3dae2;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  /* phone-first type scale; the min-width blocks step it up */
  --fs-h1:   1.5rem;    /* 24 */
  --fs-h2:   1.25rem;   /* 20 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-xs:   0.75rem;   /* 12 */

  --gap:     10px;      /* grid gutter on phones */
  --pad:     16px;      /* page gutter — matches Zoho's .zpcontainer */

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(11,18,32,.05);
  --sh-2: 0 2px 4px rgba(11,18,32,.05), 0 6px 16px -6px rgba(11,18,32,.10);
  --tap: 44px;                              /* WCAG 2.1 AA minimum */

  --hdr: 64px;                              /* measured live header height */
  --ease: cubic-bezier(.22,.61,.36,1);
}


/* =============================================================================
   1. TYPE — one family. Icon elements excluded so glyph fonts survive.
   ========================================================================== */
body, p, li, td, th, label, input, select, textarea, blockquote,
h1, h2, h3, h4, h5,
a:not([class*="icon"]):not([class*="fa-"]),
span:not([class*="icon"]):not([class*="fa-"]),
div:not([class*="icon"]):not([class*="fa-"]),
button:not([class*="icon"]):not([class*="fa-"]) {
  font-family: var(--font) !important;
  font-feature-settings: 'cv05' 1, 'cv11' 1, 'ss01' 1;
}
/* <i>, .material-icons, .fa-*, [class*="icon"] deliberately absent — do not add */

body {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--lum-ink-2);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.2;
  color: var(--lum-ink-2);
  text-wrap: balance;
}

/* numerals that line up */
.theme-product-price, .lum-chip, .lum-count,
.theme-prod-specification-field + *, td {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* justified body copy produces rivers at 318px. Never justify on a phone. */
.theme-category-description, .theme-category-description *,
.theme-product-description, .theme-content-area p {
  text-align: left !important;
  hyphens: auto;
}


/* =============================================================================
   2. CATEGORY HEAD
   -----------------------------------------------------------------------------
   The whole point: get products onto the first screen. The JS moves
   .theme-category-description below the grid and builds .lum-cathead from the
   h1 + count. On phones this is a compact two-line head — deliberately NOT a
   full-bleed dark band, which cost ~180px of the first screen in v2.
   ========================================================================== */
.lum-cathead {
  padding: var(--pad) var(--pad) 10px;
  border-bottom: 1px solid var(--lum-line);
  background: var(--lum-bg);
  margin-bottom: var(--gap);
}
.lum-cathead-crumb {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lum-gray);
  margin-bottom: 6px;
}
.lum-cathead-crumb a { color: var(--lum-green-700); text-decoration: none; }
.lum-cathead h1, .lum-cathead .lum-cathead-title {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
  /* a slim navy accent instead of a full dark band */
  border-left: 3px solid var(--lum-ink);
  padding-left: 10px;
}
.lum-cathead-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--lum-gray);
}
.lum-count {
  background: var(--lum-green-soft);
  border: 1px solid var(--lum-green-line);
  color: var(--lum-green-700);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  font-weight: 700; font-size: var(--fs-xs);
}
/* the theme's own head, once the JS has copied it */
.lum-hidden { display: none !important; }

/* description, relocated below the grid by the JS */
.theme-category-description.lum-moved {
  margin: 28px var(--pad) 0;
  padding-top: 20px;
  border-top: 1px solid var(--lum-line);
  color: var(--lum-ink-3);
  font-size: var(--fs-sm);
  line-height: 1.7;
  max-width: 68ch;
}
.theme-category-description.lum-moved.lum-clamped {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.lum-readmore {
  background: none; border: 0; margin: 0 var(--pad);
  min-height: var(--tap);
  display: inline-flex; align-items: center;
  color: var(--lum-green-700);
  font: 700 var(--fs-sm)/1.4 var(--font);
  cursor: pointer;
}


/* =============================================================================
   3. PRODUCT GRID — the real one: .zprow.theme-product-ratio
   -----------------------------------------------------------------------------
   Live mobile ships 3 cards per row at 120px wide with a 60×60 image and a
   10.88px title. Phone base here is 2-up.
   ========================================================================== */
.zprow.theme-product-ratio {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--gap) !important;
  align-items: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* .zpcontainer already supplies the page gutter — don't double it */
  padding: 0 !important;
}

/* the card */
.theme-prod-box {
  flex: 1 1 calc(50% - (var(--gap) / 2)) !important;
  max-width: calc(50% - (var(--gap) / 2)) !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;                       /* anchor for the stretched link */
  background: var(--lum-bg);
  border: 1px solid var(--lum-line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
  /* skip layout/paint for off-screen cards on a 46-product listing */
  content-visibility: auto;
  contain-intrinsic-size: 260px;
}
.theme-prod-box:hover, .theme-prod-box:focus-within {
  border-color: var(--lum-line-2);
  box-shadow: var(--sh-2);
}
.theme-product-box-content {                /* card inner — NOT the grid */
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* --- image ----------------------------------------------------------------
   PRODUCT PHOTOS ARE NEVER ALTERED. Nothing here crops, recolours, dims or
   replaces an image — `object-fit: contain` guarantees the whole photo is
   always visible, letterboxed inside a square box. The only change is how
   much room the card gives it (live: a 60×60 image floating in a 108px box).
   Do not add object-fit: cover, filter, or opacity to these rules.
   ------------------------------------------------------------------------- */
.theme-product-image-area {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  background: var(--lum-surface);
  position: relative;
  overflow: hidden;
  display: block !important;
}
.theme-product-image-area > a,
.theme-product-image-area picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.theme-product-image-area img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  object-position: center;
  padding: 8px;
  display: block;
}
/* wishlist + ribbon must stay above the stretched link */
/* raise above the stretched link — the theme already positions these, so
   only the stacking order is touched */
.theme-wishlist-icon { z-index: 3; }
.theme-product-ribbon-area {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  display: block !important;
}
.theme-product-ribbon-area * {
  background: var(--lum-red-soft) !important;
  color: var(--lum-red-ink) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  box-shadow: var(--sh-1);
}

/* --- text block ----------------------------------------------------------- */
.theme-product-details-area {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  padding: 10px !important;
  gap: 4px;
}
.theme-product-name-price { width: 100% !important; }
.theme-product-name a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.012em;
  color: var(--lum-ink-2) !important;
  text-decoration: none;
  min-height: 2.7em;
}
/* whole card is the tap target — no separate button needed on a phone */
.theme-product-name a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}
.theme-product-price-coupon, .theme-product-detail-price-area { margin-top: auto !important; }
.theme-product-price {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--lum-ink-2) !important;
  letter-spacing: -0.02em;
}
/* spec chips injected by the JS from the product name */
.lum-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lum-chip {
  font-size: 10px; font-weight: 700; line-height: 1.6;
  padding: 1px 6px; border-radius: 4px;
  background: var(--lum-surface-2); color: var(--lum-ink-3);
  border: 1px solid transparent; white-space: nowrap;
}
.lum-chip--pitch { background: var(--lum-green-soft); color: var(--lum-green-700); border-color: var(--lum-green-line); }
.lum-chip--out { background: #eef4ff; color: #234b8f; }
.lum-chip--in  { background: #f4efff; color: #5b3fa0; }

/* the per-card CTA is 9 sub-44px targets per screen. Gone on phones. */
.theme-view-details-quick-view { display: none !important; }

/* out-of-stock: signalled by the ribbon and the label below — the photo itself
   is left exactly as it is (no grayscale, no dimming) */
.theme-prod-box.lum-oos { border-color: var(--lum-line-2); }
.lum-oos-tag {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--lum-red-ink);
}


/* =============================================================================
   4. FILTERS — bottom bar + drawer
   MOBILE ONLY. The Zoho theme only shows this bar on small screens; unguarded,
   these rules repainted it into a visible black block on desktop.
   ========================================================================== */
@media (max-width: 1023.98px) {
  .theme-product-filter-icon-mobile-container {
    background: var(--lum-ink) !important;    /* was #212121, in no palette */
    border-top: 0 !important;
    box-shadow: 0 -6px 22px rgba(11,18,32,.22);
    min-height: 58px !important;
    padding: 0 !important;
    padding-bottom: calc(0px + env(safe-area-inset-bottom)) !important;  /* notch clearance */
  }
  .theme-collection-sortby-section,
  .theme-product-filter-icon-mobile {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    color: #e8eef6 !important;
  }
  .theme-collection-sortby-section { border-right: 1px solid rgba(255,255,255,.12) !important; }
  .theme-collection-sortby-section select,
  .theme-sortby-label { color: #e8eef6 !important; font-size: var(--fs-sm) !important; font-weight: 600 !important; }
  .theme-product-filter-icon-mobile { color: var(--lum-green) !important; }

  /* drawer */
  .theme-produt-filter-row.theme-mobile-filter-show,        /* [sic] Zoho's typo */
  .theme-mobile-filters {
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  }
  .theme-filters-header-mobile {
    min-height: 56px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    font-size: var(--fs-h2) !important; font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    border-bottom: 1px solid var(--lum-line);
  }
  .theme-mobile-filter-overlay-close,
  .theme-close-mobile-filter,
  .theme-filters-header-mobile svg {
    min-width: var(--tap); min-height: var(--tap);
  }

  /* group headings were 66px tall while the tap targets were 18px. Invert that. */
  .theme-product-filter-type {
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 0 4px !important;
    font-size: var(--fs-xs) !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase;
    color: var(--lum-gray) !important;
  }
  .theme-product-filter-box { padding: 4px 0 !important; }

  /* THE touch-target fix: 29×18 → full width × 44 */
  label.theme-product-filter-text {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    width: 100% !important;
    min-height: var(--tap) !important;
    padding: 0 8px !important;
    margin: 0 -8px !important;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm) !important;
    color: var(--lum-ink-2) !important;
    cursor: pointer;
  }
  label.theme-product-filter-text:active { background: var(--lum-surface); }
  label.theme-product-filter-text input[type="checkbox"] {
    width: 20px !important; height: 20px !important;
    flex: 0 0 20px !important;
    accent-color: var(--lum-green-600);
    margin: 0 !important;
  }
  /* empty groups (Brand ships with zero options) */
  .theme-product-filter-box.lum-empty { display: none !important; }
  /* "Show more" off Zoho indigo */
  .theme-product-filter-box a,
  .theme-product-filter-show-more {
    color: var(--lum-green-700) !important;
    font-weight: 700 !important;
    min-height: var(--tap);
    display: inline-flex; align-items: center;
  }
}

/* NOTE: do NOT hide .theme-product-filter-icon-mobile-container on desktop.
   The Sort By control lives inside it and is used at every width. Verified on the
   live DOM 2026-08-10. Section 4 is scoped to <1024px so the bar simply keeps the
   theme's own styling on desktop. */

/* =============================================================================
   5. PDP
   -----------------------------------------------------------------------------
   Live mobile: title at 704px, price at 848px, Add to Cart at 1164px. The JS
   lifts the title + price block above the gallery; this styles the result and
   pins the buy bar.
   ========================================================================== */
.lum-buyhead {
  padding: 12px var(--pad) 4px;
}
.lum-buyhead .lum-buyhead-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.028em;
  margin: 0 0 6px;
}
.lum-buyhead .lum-buyhead-price {
  font-size: 1.5rem; font-weight: 800; color: var(--lum-ink-2);
  letter-spacing: -0.03em;
}

.theme-product-price, .theme-product-detail-price-area .theme-product-price {
  color: var(--lum-ink-2) !important;       /* off Zoho indigo, everywhere */
}
.theme-product-detail-price-area { min-height: 36px; }

/* one primary, one secondary — they ship as two identical primaries */
.theme-button-area {
  display: flex !important;
  flex-direction: row !important;          /* ships as two stacked equal pills */
  gap: 8px;
  padding: 8px var(--pad);
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
          backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--lum-line);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  /* DELETE THIS position/bottom/background block if it collides with the
     live theme footer on a real device. */
}
.theme-cart-button, .theme-cart-button.zpbutton-type-primary {
  flex: 1.5 !important;
  min-height: 50px !important;
  margin: 0 !important;
  background: var(--lum-green) !important;
  background-image: none !important;
  border: 1px solid var(--lum-green) !important;
  color: var(--lum-green-ink) !important;
  font-size: var(--fs-base) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--r-md) !important;
}
.theme-quote-button, .theme-quote-button.zpbutton-type-primary {
  flex: 1 !important;
  min-height: 50px !important;
  margin: 0 !important;
  background: #fff !important;
  background-image: none !important;
  border: 1.5px solid var(--lum-line-2) !important;
  color: var(--lum-ink-2) !important;
  font-size: var(--fs-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--r-md) !important;
}

/* thumbnail strip overflows the viewport today */
.theme-product-thumbnail, [class*="thumbnail-slider"], [class*="thumb-list"] {
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.theme-product-thumbnail::-webkit-scrollbar { display: none; }

/* specs */
.theme-product-specification { border-radius: var(--r-md); overflow: hidden; }
.theme-prod-specification-field {
  font-weight: 500 !important;
  color: var(--lum-gray) !important;
  width: auto !important;
  flex: 0 0 44% !important;
}
.theme-product-specification li {
  display: flex !important;
  gap: 10px;
  padding: 11px 14px !important;
  font-size: var(--fs-sm) !important;
  border: 0 !important;
  align-items: baseline;
}
.theme-product-specification li:nth-child(even) { background: var(--lum-surface); }
.theme-product-specification li > span:last-child { font-weight: 600; color: var(--lum-ink-2); }
.theme-product-review-container.lum-no-ratings { display: none !important; }

.theme-product-tag-name {
  background: var(--lum-green-soft) !important;
  border: 1px solid var(--lum-green-line) !important;
  color: var(--lum-green-700) !important;
  border-radius: 6px !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
}


/* =============================================================================
   6. GLOBAL TOUCH + FOCUS + HOUSEKEEPING
   ========================================================================== */
header a, nav a, .theme-mobile-header-style-05 a, .theme-mobile-header-style-05 button {
  min-height: var(--tap);
  min-width: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, label:focus-visible {
  outline: 2px solid var(--lum-green-600);
  outline-offset: 2px;
  border-radius: 4px;
}
a[href*="doondzn" i] { display: none !important; }
img { max-width: 100%; }


/* =============================================================================
   7. ≥640px — large phone / small tablet: 3 up
   ========================================================================== */
@media (min-width: 640px) {
  :root { --gap: 14px; --pad: 20px; --fs-h1: 1.75rem; }

  .theme-prod-box {
    flex-basis: calc(33.3333% - (var(--gap) * 2 / 3)) !important;
    max-width: calc(33.3333% - (var(--gap) * 2 / 3)) !important;
    contain-intrinsic-size: 320px;
  }
  .theme-product-name a { font-size: 0.9375rem !important; }
  .theme-product-price { font-size: 1.0625rem !important; }
  .lum-chip { font-size: 11px; padding: 2px 7px; }
}


/* =============================================================================
   8. ≥1024px — desktop: 4 up, filter rail returns, card CTA returns
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --gap: 18px; --pad: 24px; --fs-h1: 2.25rem; --fs-h2: 1.5rem; }

  .theme-prod-box {
    flex-basis: calc(25% - (var(--gap) * 3 / 4)) !important;
    max-width: calc(25% - (var(--gap) * 3 / 4)) !important;
    contain-intrinsic-size: 380px;
  }
  .theme-product-details-area { padding: 14px !important; }

  /* on a mouse the button is useful again, and hover can reveal it */
  .theme-view-details-quick-view { display: block !important; width: 100% !important; margin-top: 10px; }
  a.theme-product-details {
    display: flex !important;
    align-items: center; justify-content: center;
    min-height: 42px;
    border: 1px solid var(--lum-line-2) !important;
    background: #fff !important;
    color: var(--lum-ink-2) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-radius: var(--r-sm) !important;
    position: relative; z-index: 3;
  }
  .theme-prod-box:hover a.theme-product-details {
    border-color: var(--lum-green) !important;
    background: var(--lum-green-soft) !important;
    color: var(--lum-green-700) !important;
  }

  /* the slim navy band is a DESKTOP-only treatment — on a phone it cost
     ~180px of the first screen, which is the opposite of the goal */
  .lum-cathead {
    background: linear-gradient(180deg, #0b1220 0%, #0e1728 100%);
    color: #fff;
    border-bottom: 0;
    border-radius: var(--r-lg);
    padding: 22px 26px;
    margin: 0 var(--pad) 22px;
  }
  .lum-cathead h1, .lum-cathead .lum-cathead-title {
    color: #fff; border-left: 0; padding-left: 0;
  }
  .lum-cathead-crumb { color: #8fa3bd; }
  .lum-cathead-crumb a { color: #b8ffb0; }
  .lum-cathead-meta { color: #a9b8cb; }
  .lum-count {
    background: rgba(103,193,94,.16);
    border-color: rgba(103,193,94,.34);
    color: #b8ffb0;
  }

  /* buy box goes back to normal flow — no sticky bar needed with a mouse */
  .theme-button-area {
    position: static !important;
    background: none !important;
    border-top: 0 !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    max-width: 460px;
  }

  /* sticky filter rail, clearing the 64px header */
  .theme-filters-container, .theme-product-filter-container {
    position: sticky;
    top: calc(var(--hdr) + 16px);
    align-self: start;
    max-height: calc(100vh - var(--hdr) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .theme-category-description.lum-moved { margin-inline: var(--pad); }
}


/* =============================================================================
   9. MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  .theme-button-area, .theme-product-filter-icon-mobile-container,
  .theme-filters-container, .lum-readmore { display: none !important; }
  .lum-cathead { background: none !important; color: #000 !important; }
  .theme-product-specification li { break-inside: avoid; }
}