/* =============================================================================
 * LM Surface — Materijali listing stylesheet
 *
 * SOURCE OF TRUTH — edit only this file (not materijali-page.css in the plugin).
 * Deployed as: lm-surface-engine/assets/css/materijali-page.css
 *
 * Sync:  bash "Website/Plugin/LM Surface Engine/scripts/sync-materijali-css.sh"
 * Deploy: bash "Website/Plugin/LM Surface Engine/scripts/package-lm-surface-engine-zip.sh"
 *
 * SECTION A — .lm-surface-materials-explorer
 *   Naslov, hints, pretraga, filteri, sort, chips (stranica Materijali).
 *
 * SECTION B — .lm-surface-material-grid
 *   Grid kartice, drawer, obrade (Materijali + arhiva /kolekcije/{slug}/).
 *
 * SECTION C — .lm-surface-material-page
 *   Single materijal: kolekcija grid (iste kartice kao /materijali), bez duplog paddinga.
 *
 * lm-surface-engine.css — deljeno: struktura kartice, toggle, finish blokovi,
 * single materijal, index kolekcija. Ne duplirati drawer/layout ovde.
 * ============================================================================= */

/* ===== SECTION A — Explorer (header, search, filters) ===== */
.lm-surface-materials-explorer {
  /* Horizontal padding breakpoints — match laminam-header-mega-menu-premium-v3 (tablet ≤1120px, mobile ≤767px). */
  --lm-content-max: 1440px;
  --lm-page-padding-x: 40px;
  --lm-page-padding-y: 40px;
  --lm-surface-tag-radius: 6px;
  --lm-navy: #002a3a;
  --lm-navy-mid: #073343;
  --lm-warm-50: #faf9f7;
  --lm-card-radius: 14px;
  --lm-control-radius: 10px;
  /* Horizontal padding for search, filter fields, buttons (matches search input). */
  --lm-control-padding-x: 1.1rem;
  /* Filter checkbox dropdown panels */
  --lm-filter-dropdown-padding: 0.75rem 0.9rem;
  --lm-filter-dropdown-gap-row: 0.35rem;
  --lm-border: #e5e7eb;
  --lm-text: #1f2937;
  --lm-muted: #6b7280;
  --lm-bg-soft: #f8fafc;
  --lm-accent: #14224a;
  --lm-sticky-offset: 94px;
  /* Row 1: search + Filter/Sort */
  --lm-toolbar-control-height: 38px;
  --lm-search-font-size: 0.875rem;
  /* Row 2: Kolekcija… chips + Primeni */
  --lm-filter-chip-height: 36px;
  --lm-filter-chip-padding-x: 0.95rem;
  --lm-apply-btn-height: 34px;
}

@media (max-width: 1120px) {
  .lm-surface-materials-explorer {
    --lm-page-padding-x: 20px;
    --lm-page-padding-y: 20px;
  }
}

@media (max-width: 767px) {
  .lm-surface-materials-explorer {
    --lm-page-padding-x: 16px;
    --lm-page-padding-y: 16px;
  }
}

/*
 * Theme + Elementor wrappers must not add gutters.
 * Single horizontal source: --lm-page-padding-x on .lm-surface-materials-explorer (40 / 20 / 16).
 */
body.lm-surface-materijali-page {
  --lm-content-max: 1440px;
  --lm-page-padding-x: 40px;
}

@media (max-width: 1120px) {
  body.lm-surface-materijali-page {
    --lm-page-padding-x: 20px;
  }
}

@media (max-width: 767px) {
  body.lm-surface-materijali-page {
    --lm-page-padding-x: 16px;
  }
}

body.lm-surface-materijali-page .site-content,
body.lm-surface-materijali-page #content,
body.lm-surface-materijali-page #primary,
body.lm-surface-materijali-page .site-main,
body.lm-surface-materijali-page .page-content,
body.lm-surface-materijali-page .entry-content,
body.lm-surface-materijali-page article.page,
body.lm-surface-materijali-page .hentry {
  max-width: none !important;
  width: 100% !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.lm-surface-materijali-page main .elementor,
body.lm-surface-materijali-page main .elementor-section,
body.lm-surface-materijali-page main .elementor-container,
body.lm-surface-materijali-page main .elementor-column,
body.lm-surface-materijali-page main .elementor-column-wrap,
body.lm-surface-materijali-page main .elementor-widget-wrap,
body.lm-surface-materijali-page main .e-con,
body.lm-surface-materijali-page main .e-con-inner,
body.lm-surface-materijali-page main .elementor-widget,
body.lm-surface-materijali-page main .elementor-widget-container,
body.lm-surface-materijali-page main .elementor-widget-shortcode {
  display: flex !important;
  flex-direction: column !important;
  max-width: none !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  --padding-top: 0px !important;
  --padding-left: 0px !important;
  --padding-right: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  --padding-block-start: 0px !important;
  --container-default-padding-top: 0px !important;
  --container-default-padding-left: 0px !important;
  --container-default-padding-right: 0px !important;
  --row-gap: 0px !important;
  gap: 0 !important;
}

body.lm-surface-materijali-page .lm-surface-materials-explorer {
  width: 100%;
  overflow-x: clip;
}

/* Pretraži — secondary (theme-safe) */
.lm-surface-materials-explorer .lm-surface-filters__search-btn.laminam-btn--secondary,
.lm-surface-materials-explorer .lm-surface-filters__search-btn.laminam-btn--secondary:hover,
.lm-surface-materials-explorer .lm-surface-filters__search-btn.laminam-btn--secondary:focus-visible {
  background: rgba(0, 42, 58, 0.035) !important;
  border: 1px solid rgba(0, 42, 58, 0.16) !important;
  color: #002a3a !important;
  box-shadow: none !important;
  transform: none !important;
}

.lm-surface-materials-explorer .lm-surface-filters__search-btn.laminam-btn--secondary:hover,
.lm-surface-materials-explorer .lm-surface-filters__search-btn.laminam-btn--secondary:focus-visible {
  background: #eef4f6 !important;
  border-color: rgba(0, 42, 58, 0.34) !important;
  color: #002a3a !important;
}

/* Laminam button system — explorer (theme-safe; heights set per control tier) */
.lm-surface-materials-explorer .laminam-btn {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-color: #002a3a;
  --btn-color-hover: #002a3a;
  --btn-border: transparent;
  --btn-border-hover: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 0;
  padding: 0 0.9rem;
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-color);
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.lm-surface-materials-explorer .laminam-btn--primary {
  --btn-bg: #002a3a;
  --btn-bg-hover: #073343;
  --btn-color: #fff;
  --btn-color-hover: #fff;
  --btn-border: #002a3a;
  --btn-border-hover: #073343;
}

.lm-surface-materials-explorer .laminam-btn--secondary {
  --btn-bg: rgba(0, 42, 58, 0.035);
  --btn-bg-hover: #eef4f6;
  --btn-color: #002a3a;
  --btn-color-hover: #002a3a;
  --btn-border: rgba(0, 42, 58, 0.16);
  --btn-border-hover: rgba(0, 42, 58, 0.34);
}

.lm-surface-materials-explorer .laminam-btn--tertiary:not(.lm-surface-filters__toolbar-btn) {
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #002a3a;
  text-decoration: underline;
  text-underline-offset: 6px;
  transform: none;
}

.lm-surface-materials-explorer .laminam-btn--primary:hover,
.lm-surface-materials-explorer .laminam-btn--primary:focus-visible {
  background: var(--btn-bg-hover);
  color: var(--btn-color-hover);
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--btn-border-hover) !important;
}

.lm-surface-materials-explorer .laminam-btn--secondary:hover,
.lm-surface-materials-explorer .laminam-btn--secondary:focus-visible {
  background: var(--btn-bg-hover);
  color: var(--btn-color-hover);
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--btn-border-hover) !important;
}

/* Primeni + pill controls: theme tertiary:hover sets border:0 — keep box size */
.lm-surface-materials-explorer .lm-surface-filters__actions .lm-surface-js-apply-filters.laminam-btn--primary:hover,
.lm-surface-materials-explorer .lm-surface-filters__actions .lm-surface-js-apply-filters.laminam-btn--primary:focus-visible {
  border: 1px solid var(--btn-border-hover, #073343) !important;
  transform: none !important;
}

.lm-surface-filters__group-toggle {
  outline: none !important;
}

.lm-surface-filters__group-toggle:focus {
  outline: none !important;
}

.lm-surface-filters__group-toggle:hover {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom-color: rgba(0, 42, 58, 0.18) !important;
  transform: none !important;
}

.lm-surface-filters__group-toggle:hover .lm-surface-filters__group-label {
  color: var(--lm-navy, #002a3a) !important;
}

.lm-surface-filters__group-toggle:hover .lm-surface-filters__group-caret {
  color: rgba(0, 42, 58, 0.55) !important;
}

.lm-surface-filters__group-toggle:focus-visible {
  border-color: transparent !important;
  border-bottom-color: #7fa9b6 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: 2px solid rgba(127, 169, 182, 0.55) !important;
  outline-offset: 2px !important;
  transform: none !important;
}

/* Filter row: fields + apply (apply sits after last dropdown) */
.lm-surface-filters__filter-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.45rem !important;
  flex-wrap: wrap !important;
}

.lm-surface-filters__filter-row .lm-surface-filters__actions:not(.lm-surface-filters__actions--drawer) {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  align-self: center !important;
}

/* Tier 2 — Primenite filtere (aligned with dropdown chips, not oversized) */
.lm-surface-materials-explorer .lm-surface-filters__actions .lm-surface-js-apply-filters.laminam-btn--primary {
  min-height: var(--lm-apply-btn-height, 36px) !important;
  height: var(--lm-apply-btn-height, 36px) !important;
  padding: 0 0.95rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  transform: none !important;
}

.lm-surface-filters__filter-row .lm-surface-filters__actions .lm-surface-btn {
  width: auto !important;
}

.lm-surface-filters__filter-row .lm-surface-filters__reset {
  white-space: nowrap;
}

/* Filter fields — one row, width = label + caret + horizontal padding */
.lm-surface-filters__filter-row .lm-surface-filters__grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 0.35rem !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Primeni — quiet outline when inactive (not a dead gray block). */
.lm-surface-materials-explorer .lm-surface-js-apply-filters:disabled,
.lm-surface-materials-explorer .lm-surface-js-apply-filters.is-inactive {
  background: #fff !important;
  border: 1px solid rgba(0, 42, 58, 0.16) !important;
  color: rgba(0, 42, 58, 0.4) !important;
  -webkit-text-fill-color: rgba(0, 42, 58, 0.4) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.lm-surface-materials-explorer .lm-surface-js-apply-filters:disabled:hover,
.lm-surface-materials-explorer .lm-surface-js-apply-filters.is-inactive:hover {
  background: #fff !important;
  border-color: rgba(0, 42, 58, 0.16) !important;
  color: rgba(0, 42, 58, 0.4) !important;
  transform: none !important;
}

.lm-surface-filters__group {
  position: relative !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.lm-surface-filters__legend {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  display: block !important;
}

/*
 * Factor row = tabs (Tier 2), not pills.
 * Continuous hairline track; active tab sits on a navy underline.
 * Options below = chips (Tier 3). Actions stay laminam-btn pills.
 */
.lm-surface-filters__group-toggle {
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--lm-navy, #002a3a) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
  margin: 0 0 -1px !important;
  padding: 0.55rem 0.7rem 0.6rem !important;
  white-space: nowrap !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition:
    color var(--lm-motion-duration-fast, 180ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color var(--lm-motion-duration-fast, 180ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.lm-surface-filters__group-label {
  flex: 0 1 auto !important;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 0.8125rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.015em !important;
  text-transform: none !important;
  color: rgba(0, 42, 58, 0.52) !important;
  font-weight: 500 !important;
}

.lm-surface-filters__group-caret {
  flex: 0 0 auto !important;
  align-self: center !important;
  width: 4px !important;
  height: 4px !important;
  margin: 0.05rem 0 0 !important;
  border-right: 1.25px solid currentColor !important;
  border-bottom: 1.25px solid currentColor !important;
  color: rgba(0, 42, 58, 0.38) !important;
  transform: rotate(45deg) !important;
  transition:
    transform var(--lm-motion-duration-fast, 180ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    color var(--lm-motion-duration-fast, 180ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) !important;
  opacity: 1;
}

.lm-surface-filters__group-toggle[aria-expanded='false']:not(:hover):not(:focus-visible) {
  background: transparent !important;
  border-color: transparent !important;
}

.lm-surface-filters__group-toggle[aria-expanded='true'],
.lm-surface-filters__group-toggle[aria-expanded='true']:hover,
.lm-surface-filters__group-toggle[aria-expanded='true']:focus-visible {
  border: 0 !important;
  border-bottom: 2px solid var(--lm-navy, #002a3a) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 -1px !important;
  padding: 0.55rem 0.7rem 0.6rem !important;
  background: transparent !important;
  color: var(--lm-navy, #002a3a) !important;
  transform: none !important;
  box-shadow: none !important;
}

.lm-surface-filters__group-toggle[aria-expanded='true'] .lm-surface-filters__group-label {
  color: var(--lm-navy, #002a3a) !important;
  font-weight: 600 !important;
}

.lm-surface-filters__group-toggle[aria-expanded='true'] .lm-surface-filters__group-caret {
  color: var(--lm-navy, #002a3a) !important;
  transform: rotate(225deg) !important;
}

/* Critical: checklist only for opened factor */
.lm-surface-filters__group .lm-surface-js-filter-group-panel[hidden]:not(.is-closing) {
  display: none !important;
}

/*
 * Filter drawer — compact under factor tabs.
 * Soft option strip; chips hug content; apply sits tight below.
 */
.lm-surface-filters__filter-row {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.lm-surface-filters__filter-row .lm-surface-filters__grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 0.15rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 42, 58, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box;
}

.lm-surface-filters__filter-drawer:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0.55rem 0 0 !important;
  padding: 0.75rem 0.85rem 0.7rem;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(0, 42, 58, 0.03);
  box-shadow: none !important;
  box-sizing: border-box;
  overflow: visible;
}

.lm-surface-filters__filter-row:has(.lm-surface-js-filter-drawer:not([hidden])) .lm-surface-filters__grid {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 42, 58, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Pending chips live in the footer strip — hide the old top block. */
.lm-surface-filters__filter-drawer > .lm-surface-filters__pending {
  display: none !important;
}

.lm-surface-filters__filter-accordion-slot {
  display: block;
  flex: 0 0 auto !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-sizing: border-box;
  overflow: visible;
  background: transparent;
}

.lm-surface-filters__filter-drawer .lm-surface-js-filter-group-panel,
.lm-surface-filters__filter-drawer .lm-surface-popover,
.lm-surface-filters__filter-drawer .lm-surface-filters__options--grid {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(42vh, 14rem) !important;
  z-index: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  flex: 0 0 auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-content: flex-start !important;
  align-items: center !important;
  gap: 0.4rem !important;
  grid-template-columns: none !important;
}

body.lm-surface-materijali-page .lm-surface-filters__filter-drawer .lm-surface-filters__option,
.lm-surface-filters__filter-drawer .lm-surface-filters__option {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 1.85rem !important;
  height: auto !important;
  padding: 0.3rem 0.7rem !important;
  margin: 0 !important;
  border: 1px solid rgba(0, 42, 58, 0.1) !important;
  border-radius: var(--lm-surface-tag-radius, 6px) !important;
  background: #fff !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 0 rgba(0, 42, 58, 0.03);
  transition:
    background-color var(--lm-motion-duration-fast, 180ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color var(--lm-motion-duration-fast, 180ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    color var(--lm-motion-duration-fast, 180ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow var(--lm-motion-duration-fast, 180ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    gap var(--lm-motion-duration-fast, 180ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    padding var(--lm-motion-duration-fast, 180ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.lm-surface-filters__filter-drawer .lm-surface-filters__option:hover {
  background: #fff !important;
  border-color: rgba(0, 42, 58, 0.28) !important;
  box-shadow: 0 1px 2px rgba(0, 42, 58, 0.06);
}

.lm-surface-filters__filter-drawer .lm-surface-filters__option:has(input:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(127, 169, 182, 0.55);
}

/* Selected: soft tint + navy outline + check (not solid invert — reserve that for actions). */
.lm-surface-filters__filter-drawer .lm-surface-filters__option:has(input:checked) {
  gap: 0.35rem !important;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem !important;
  background: var(--lm-navy-50, #eef4f6) !important;
  border-color: rgba(0, 42, 58, 0.55) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 42, 58, 0.04);
}

.lm-surface-filters__filter-drawer .lm-surface-filters__option:has(input:checked)::before {
  content: '';
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin: 0;
  background-color: var(--lm-navy, #002a3a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M4.7 9.2 1.6 6.1l1.1-1.1 2 2 4.6-4.6 1.1 1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M4.7 9.2 1.6 6.1l1.1-1.1 2 2 4.6-4.6 1.1 1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lm-surface-filters__filter-drawer .lm-surface-filters__option:has(input:checked):hover {
  background: #e4eef2 !important;
  border-color: var(--lm-navy, #002a3a) !important;
}

.lm-surface-filters__filter-drawer .lm-surface-filters__option input[type='checkbox'] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.lm-surface-filters__filter-drawer .lm-surface-filters__option span {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 0.75rem !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--lm-navy, #002a3a) !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.lm-surface-filters__filter-drawer .lm-surface-filters__option:has(input:checked) span {
  color: var(--lm-navy, #002a3a) !important;
  font-weight: 600;
}

.lm-surface-filters__filter-row .lm-surface-filters__actions--drawer {
  position: relative;
  display: flex !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.4rem 0.55rem !important;
  margin: 0.55rem 0 0 !important;
  padding: 0.55rem 0 0 !important;
  border-top: 1px solid rgba(0, 42, 58, 0.08) !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.lm-surface-filters__filter-row .lm-surface-filters__actions--drawer::before {
  display: none;
}

.lm-surface-filters__filter-row .lm-surface-filters__actions--drawer .lm-surface-js-filter-pending-inline {
  order: 1;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: min(100%, 28rem);
}

.lm-surface-filters__filter-row .lm-surface-filters__actions--drawer .lm-surface-js-filter-pending-inline:empty {
  display: none;
}

.lm-surface-filters__filter-row .lm-surface-filters__actions--drawer .lm-surface-filters__reset {
  order: 2;
  margin-right: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(0, 42, 58, 0.65);
}

.lm-surface-filters__filter-row .lm-surface-filters__actions--drawer .lm-surface-js-apply-filters {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  order: 3;
  width: auto !important;
  min-width: 7.75rem;
  min-height: 1.95rem !important;
  height: 1.95rem !important;
  padding: 0 0.9rem !important;
  border-radius: 999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

.lm-surface-filters__filter-row .lm-surface-filters__actions--drawer .lm-surface-js-apply-filters:disabled,
.lm-surface-filters__filter-row .lm-surface-filters__actions--drawer .lm-surface-js-apply-filters.is-inactive {
  background: transparent !important;
  border: 1px solid rgba(0, 42, 58, 0.14) !important;
  color: rgba(0, 42, 58, 0.38) !important;
  -webkit-text-fill-color: rgba(0, 42, 58, 0.38) !important;
  box-shadow: none !important;
}

.lm-surface-filters__filter-row .lm-surface-filters__actions--drawer .lm-surface-js-apply-filters:not(:disabled):not(.is-inactive) {
  background: var(--lm-navy, #002a3a) !important;
  border-color: var(--lm-navy, #002a3a) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Legacy popover panels (if not in drawer) */
.lm-surface-filters__group .lm-surface-js-filter-group-panel:not([hidden]),
.lm-surface-filters__group .lm-surface-js-filter-group-panel.is-closing {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--lm-filter-dropdown-gap-row) !important;
  padding: var(--lm-filter-dropdown-padding) !important;
  max-height: 240px !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

.lm-surface-filters__group .lm-surface-js-filter-group-panel .lm-surface-filters__option {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: auto !important;
  max-width: none !important;
  padding: 0.35rem 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  cursor: pointer !important;
  border-bottom: 1px solid rgba(216, 221, 230, 0.65);
}

.lm-surface-filters__group .lm-surface-js-filter-group-panel .lm-surface-filters__option:last-child {
  border-bottom: 0;
}

.lm-surface-filters__group .lm-surface-js-filter-group-panel .lm-surface-filters__option input[type='checkbox'] {
  flex: 0 0 auto !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  accent-color: #002a3a;
}

.lm-surface-filters__group .lm-surface-js-filter-group-panel .lm-surface-filters__option span {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  font-size: 0.8125rem !important;
  color: #374151 !important;
  white-space: nowrap !important;
}


@media (max-width: 900px) {
  .lm-surface-filters__filter-row .lm-surface-filters__actions {
    width: auto !important;
    justify-content: flex-start !important;
  }
}

/* Sort dropdown — subtle list menu (override theme primary button styles) */
.lm-surface-materials-explorer .lm-surface-filters__sort-menu {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(96vw, max-content) !important;
  padding: 0.35rem !important;
  border: 1px solid #d8dde6 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 28, 61, 0.1) !important;
}

.lm-surface-materials-explorer .lm-surface-filters__sort-menu .lm-surface-filters__sort-option,
.lm-surface-materials-explorer .lm-surface-filters__sort-menu .lm-surface-js-sort-option {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 0.9rem !important;
  padding-right: 0.9rem !important;
  white-space: nowrap !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #374151 !important;
  font-family: "Work Sans", Arial, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  cursor: pointer !important;
  transform: none !important;
}

.lm-surface-materials-explorer .lm-surface-filters__sort-menu .lm-surface-filters__sort-option:hover,
.lm-surface-materials-explorer .lm-surface-filters__sort-menu .lm-surface-js-sort-option:hover,
.lm-surface-materials-explorer .lm-surface-filters__sort-menu .lm-surface-filters__sort-option:focus-visible,
.lm-surface-materials-explorer .lm-surface-filters__sort-menu .lm-surface-js-sort-option:focus-visible {
  background: #f3f6fb !important;
  color: #002a3a !important;
  border: 0 !important;
  transform: none !important;
}

.lm-surface-materials-explorer .lm-surface-filters__sort-menu .lm-surface-filters__sort-option.is-active,
.lm-surface-materials-explorer .lm-surface-filters__sort-menu .lm-surface-js-sort-option.is-active {
  background: #eef4f6 !important;
  color: #002a3a !important;
  font-weight: 600 !important;
}

/* Sort: native <select> only for form submit — never visible in toolbar */
.lm-surface-materials-explorer .lm-surface-filters__sort-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  flex: 0 0 auto !important;
}

.lm-surface-materials-explorer .lm-surface-filters__sort-native select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
}

.lm-surface-materials-explorer .lm-surface-filters__sort-popover {
  position: relative;
}

.lm-surface-materials-explorer .lm-surface-filters__sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
}

.lm-surface-materials-explorer .lm-surface-filters__sort-menu[hidden]:not(.is-closing) {
  display: none !important;
}

/* 1440px centered page column */
.lm-surface-materials-explorer__header,
.lm-surface-materials-explorer > .lm-surface-filters,
.lm-surface-materials-explorer > .lm-surface-material-grid,
.lm-surface-materials-explorer > .lm-surface-material-grid--empty,
.lm-surface-materials-explorer > .lm-surface-materials-explorer__pagination {
  width: 100%;
  max-width: var(--lm-content-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.lm-surface-materials-explorer__header {
  max-width: var(--lm-content-max);
  margin: 0 auto 1.1rem;
  padding: var(--lm-page-padding-y, 40px) var(--lm-page-padding-x) 0;
  box-sizing: border-box;
}

.lm-surface-materials-explorer__title {
  margin: 0 0 0.45rem;
  font-family: "Bricolage Grotesque", "Work Sans", Arial, sans-serif !important;
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  font-weight: 400 !important;
  letter-spacing: 0;
  color: var(--lm-accent);
  line-height: 1.15;
}

.lm-surface-materials-explorer__intro {
  margin: 0;
  color: var(--lm-muted);
  max-width: 72ch;
  line-height: 1.45;
  font-size: 0.95rem;
}

.lm-surface-materials-explorer__leads {
  display: grid;
  gap: 0.65rem;
  max-width: 72ch;
}

.lm-surface-materials-explorer__leads .lm-surface-materials-explorer__intro {
  max-width: none;
}

.lm-surface-materials-explorer__hints {
  margin: 0.45rem 0 0;
  padding: 0 0 0 1.05rem;
  max-width: 78ch;
  color: var(--lm-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  list-style: disc;
}

.lm-surface-materials-explorer__hint {
  margin: 0.15rem 0 0;
}

.lm-surface-materials-explorer__hint strong {
  color: var(--lm-text);
  font-weight: 600;
}

/* ===== Filter panel ===== */
.lm-surface-filters {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 var(--lm-page-padding-x) 1rem;
  margin: 0 auto;
  max-width: var(--lm-content-max);
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(20, 34, 74, 0.14);
}

/* Toolbar row: search + actions */
.lm-surface-filters__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

/* Toolbar content width */
.lm-surface-filters__toolbar,
.lm-surface-filters__sort,
.lm-surface-filters__advanced,
.lm-surface-filters__chips,
.lm-surface-materials-explorer__results-meta,
.lm-surface-materials-explorer__count {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.lm-surface-filters__search {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.lm-surface-filters__search label {
  display: none;
}

.lm-surface-filters__search-wrap {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  z-index: var(--laminam-z-page-dropdown, 15);
  --lm-search-icon-size: 1.15rem;
  --lm-search-icon-inset: 1rem;
  touch-action: manipulation;
}

/* Icon-only submit — neutralize theme/Elementor primary button on type=submit */
.lm-surface-materials-explorer .lm-surface-filters__search-wrap .lm-surface-filters__search-icon,
.lm-surface-materials-explorer .lm-surface-filters__search-wrap .lm-surface-js-search-submit,
.lm-surface-materials-explorer .lm-surface-filters__search-wrap button.lm-surface-filters__search-icon {
  position: absolute;
  right: var(--lm-search-icon-inset);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--lm-search-icon-size);
  height: var(--lm-search-icon-size);
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--lm-muted) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}

.lm-surface-materials-explorer .lm-surface-filters__search-wrap .lm-surface-filters__search-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lm-surface-materials-explorer .lm-surface-filters__search-wrap .lm-surface-filters__search-icon:hover,
.lm-surface-materials-explorer .lm-surface-filters__search-wrap .lm-surface-filters__search-icon:focus-visible,
.lm-surface-materials-explorer .lm-surface-filters__search-wrap .lm-surface-filters__search-icon:active {
  color: var(--lm-accent) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  transform: translateY(-50%) !important;
}

.lm-surface-materials-explorer .lm-surface-filters__search-wrap.has-value .lm-surface-filters__search-icon {
  color: var(--lm-accent) !important;
}

/* Suggest dropdown — positioned in search-wrap (see block below chips) */

.lm-surface-filters__search-btn {
  display: none !important;
}

.lm-surface-filters__toolbar-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

/* Tier 1 — Filter / Sortiranje: ista kutija u svim stanjima (theme tertiary/expanded skida border + padding) */
.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel,
.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel:visited,
.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel:hover,
.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel:focus-visible,
.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel:active,
.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel[aria-expanded='true'],
.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-js-toggle-panel.laminam-btn--tertiary.lm-surface-filters__toolbar-btn[aria-expanded='true'] {
  box-sizing: border-box !important;
  min-height: var(--lm-toolbar-control-height, 38px) !important;
  height: var(--lm-toolbar-control-height, 38px) !important;
  padding: 0 0.75rem !important;
  gap: 0.35rem !important;
  border: 1px solid rgba(0, 42, 58, 0.16) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 0.8125rem !important;
  transform: none !important;
}

.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel[aria-expanded='false']:not(:hover):not(:focus-visible),
.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel:visited[aria-expanded='false']:not(:hover):not(:focus-visible) {
  background: #fff !important;
  border-color: rgba(0, 42, 58, 0.16) !important;
  color: #002a3a !important;
}

.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel:hover,
.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel:focus-visible {
  background: #eef4f6 !important;
  border-color: rgba(0, 42, 58, 0.34) !important;
  color: #002a3a !important;
}

/* Open menu/panel only — not when chip row is merely visible on desktop */
.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel[aria-expanded='true'],
.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel[aria-expanded='true']:hover,
.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel[aria-expanded='true']:focus-visible {
  background: #eef4f6 !important;
  border: 1px solid rgba(0, 42, 58, 0.34) !important;
  color: #002a3a !important;
}

.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn .laminam-btn__icon {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0;
}

.lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__sort-popover {
  display: flex;
  flex: 0 0 auto;
}

.lm-surface-filters__sort {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 0;
}

.lm-surface-filters__advanced--inline {
  margin: 0.35rem 0 0.25rem;
  padding: 0;
  border-top: 0;
}

.lm-surface-filters__advanced--inline[hidden] {
  display: none !important;
}

.lm-surface-materials-explorer .lm-surface-filters__search input[type='search'],
.lm-surface-materials-explorer .lm-surface-filters__search-input,
.lm-surface-filters__sort select {
  border: 1px solid #d1d5db;
  border-radius: 999px !important;
  min-height: var(--lm-toolbar-control-height, 44px);
  height: var(--lm-toolbar-control-height, 44px);
  padding-left: var(--lm-control-padding-x) !important;
  padding-right: calc(var(--lm-control-padding-x) + var(--lm-search-icon-size, 1.15rem) + 0.45rem) !important;
  width: 100%;
}

/* Bela pozadina samo na search polju (ne na celoj filter sekciji) */
.lm-surface-materials-explorer .lm-surface-filters__search input[type='search'],
.lm-surface-materials-explorer .lm-surface-filters__search-input {
  background-color: #ffffff !important;
  background: #ffffff !important;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: light;
}

/* Search copy — 0.875rem; focus zoom blocked via viewport patch on Materijali page (see page-styles.php) */
.lm-surface-filters__search input[type='search'] {
  font-size: var(--lm-search-font-size, 0.875rem);
  color: var(--lm-muted);
  transform: none;
  -webkit-text-size-adjust: 100%;
}

.lm-surface-filters__sort select {
  font-size: 15px;
  color: var(--lm-text);
}

.lm-surface-filters__search-wrap.has-value .lm-surface-js-search-input {
  color: var(--lm-accent);
}

.lm-surface-filters__search input[type='search']::placeholder {
  font-size: var(--lm-search-font-size, 0.875rem);
  color: var(--lm-muted);
  opacity: 1;
}

.lm-surface-materials-explorer .lm-surface-filters__search input[type='search']:focus,
.lm-surface-materials-explorer .lm-surface-filters__search-input:focus {
  outline: none;
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(20, 34, 74, 0.12);
  transform: none;
  background-color: #ffffff !important;
  background: #ffffff !important;
}

.lm-surface-filters__sort select:focus {
  outline: none;
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(20, 34, 74, 0.12);
}

.lm-surface-filters__filter-row .lm-surface-filters__group {
  border: 0 !important;
  border-radius: 0 !important;
}

.lm-surface-materials-explorer .lm-surface-filters__actions .lm-surface-filters__reset {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: var(--lm-apply-btn-height, 36px) !important;
  color: #002a3a !important;
}


.lm-surface-filters__reset {
  position: relative;
  text-decoration: none !important;
  border-bottom: 0;
}

.lm-surface-filters__reset::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 0.22s ease;
}

.lm-surface-filters__reset:hover::after {
  transform: scaleX(0.7);
}

/* ===== Active chips ===== */
.lm-surface-filters__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.5rem 0 0.55rem;
}

.lm-surface-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.45rem 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #dbe3ee;
  background: #eef3fb;
  color: #1f2a44;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
}

.lm-surface-filters__chip-text {
  display: inline-block;
}

.lm-surface-filters__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border: 0;
  border-radius: 999px;
  background: #d5deed;
  color: #172033;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.lm-surface-filters__chip-remove:hover,
.lm-surface-filters__chip-remove:focus-visible {
  background: #c4d0e4;
  color: #172033;
  text-decoration: none;
}

/* Pending selections (before "Primeni filtere") */
.lm-surface-filters__pending {
  flex: 0 0 auto;
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.65rem 0.6rem;
  border: 1px solid rgba(127, 169, 182, 0.35);
  border-radius: var(--lm-surface-tag-radius, 6px);
  background: #f7fafb;
}

.lm-surface-filters__pending[hidden] {
  display: none !important;
}

.lm-surface-filters__pending-label {
  margin: 0 0 0.4rem;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lm-navy-light, #7fa9b6);
}

.lm-surface-filters__pending-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.lm-surface-filters__chip--pending {
  border-radius: var(--lm-surface-tag-radius, 6px);
  border-color: rgba(127, 169, 182, 0.45);
  background: #fff;
  color: var(--lm-navy-mid, #073343);
}

.lm-surface-filters__chip--pending .lm-surface-filters__chip-remove {
  border-radius: var(--lm-surface-tag-radius, 6px);
  background: rgba(127, 169, 182, 0.2);
  color: var(--lm-navy, #002a3a);
}

.lm-surface-filters__chip--pending .lm-surface-filters__chip-remove:hover,
.lm-surface-filters__chip--pending .lm-surface-filters__chip-remove:focus-visible {
  background: rgba(127, 169, 182, 0.35);
}

.lm-surface-filters__chip--pending.is-removed {
  opacity: 0.72;
  text-decoration: line-through;
  text-decoration-color: rgba(7, 51, 67, 0.45);
}

.lm-surface-filters__group-toggle.has-selection {
  border-color: transparent !important;
  border-bottom-color: rgba(127, 169, 182, 0.7) !important;
  background: transparent !important;
}

.lm-surface-filters__group-toggle.has-selection .lm-surface-filters__group-label {
  color: var(--lm-navy, #002a3a) !important;
}

.lm-surface-filters__group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  border-radius: var(--lm-surface-tag-radius, 6px);
  background: var(--lm-navy, #002a3a);
  color: #fff;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* ===== Search suggest dropdown ===== */
.lm-surface-filters__search-wrap .lm-surface-search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0;
  border: 1px solid #d8dde6;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 28, 61, 0.12);
  box-sizing: border-box;
  overflow: hidden;
  z-index: calc(var(--laminam-z-page-dropdown, 15) + 2);
}

.lm-surface-search-suggest__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lm-surface-search-suggest__item {
  margin: 0;
  padding: 0;
}

.lm-surface-materials-explorer .lm-surface-search-suggest__btn,
.lm-surface-filters__search-wrap .lm-surface-search-suggest__btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.7rem !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.5rem var(--lm-control-padding-x) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: "Work Sans", Arial, sans-serif !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #14224a !important;
  cursor: pointer !important;
  transform: none !important;
}

.lm-surface-materials-explorer .lm-surface-search-suggest__swatch,
.lm-surface-filters__search-wrap .lm-surface-search-suggest__swatch {
  flex: 0 0 2.25rem !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  max-width: 2.25rem !important;
  min-height: 2.25rem !important;
  max-height: 2.25rem !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #eef0f3;
  box-shadow: inset 0 0 0 1px rgba(15, 28, 61, 0.1);
}

.lm-surface-materials-explorer .lm-surface-search-suggest__swatch img,
.lm-surface-filters__search-wrap .lm-surface-search-suggest__swatch img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.lm-surface-materials-explorer .lm-surface-search-suggest__text,
.lm-surface-filters__search-wrap .lm-surface-search-suggest__text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.lm-surface-materials-explorer .lm-surface-search-suggest__btn:hover,
.lm-surface-materials-explorer .lm-surface-search-suggest__btn:focus-visible,
.lm-surface-filters__search-wrap .lm-surface-search-suggest__btn:hover,
.lm-surface-filters__search-wrap .lm-surface-search-suggest__btn:focus-visible {
  background: #f6f8fb !important;
  transform: none !important;
}

.lm-surface-search-suggest__meta {
  display: block !important;
  order: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Work Sans", Arial, sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #9aa3b2 !important;
  vertical-align: baseline !important;
}

.lm-surface-search-suggest__label {
  display: block !important;
  order: 2;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Work Sans", Arial, sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.28 !important;
  letter-spacing: 0.012em !important;
  text-transform: none !important;
  color: #14224a !important;
  vertical-align: baseline !important;
}

.lm-surface-materials-explorer .lm-surface-search-suggest__btn:hover .lm-surface-search-suggest__label,
.lm-surface-materials-explorer .lm-surface-search-suggest__btn:focus-visible .lm-surface-search-suggest__label {
  color: #002a3a !important;
}

/* ===== SECTION B — Listing grid + drawer ===== */
/* Shell layout: explorer grid (1440px column) + kolekcija archive (parent .lm-surface-material-page caps width). */
.lm-surface-materials-explorer > .lm-surface-material-grid,
.lm-surface-materials-explorer > .lm-surface-material-grid--empty {
  width: 100%;
  max-width: var(--lm-content-max);
  padding-left: var(--lm-page-padding-x);
  padding-right: var(--lm-page-padding-x);
  box-sizing: border-box;
  align-items: start;
  --lm-card-media-aspect: 1 / 2 !important;
  --lm-card-body-padding-x: 0.7rem;
  --lm-card-body-padding-y: 0.55rem;
  --lm-surface-grid-cols: 4 !important;
  gap: 0.85rem;
  margin-left: auto;
  margin-right: auto;
}

body.lm-surface-collections-page .lm-surface-collection-archive .lm-surface-material-grid,
body.lm-surface-collections-page .lm-surface-collection-archive .lm-surface-material-grid--empty {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  align-items: start;
  --lm-card-media-aspect: 1 / 2 !important;
  --lm-card-body-padding-x: 0.7rem;
  --lm-card-body-padding-y: 0.55rem;
  --lm-card-corner-inset: 0.45rem;
  --lm-card-toggle-size: 1.75rem;
  --lm-surface-grid-cols: 4 !important;
  gap: 0.85rem;
  margin: 0;
}

@media (min-width: 1280px) {
  body.lm-surface-collections-page .lm-surface-collection-archive .lm-surface-material-grid,
  body.lm-surface-collections-page .lm-surface-collection-archive .lm-surface-material-grid--empty {
    --lm-surface-grid-cols: 5 !important;
  }
}

@media (max-width: 1120px) {
  body.lm-surface-collections-page .lm-surface-collection-archive .lm-surface-material-grid,
  body.lm-surface-collections-page .lm-surface-collection-archive .lm-surface-material-grid--empty {
    --lm-surface-grid-cols: 3 !important;
  }
}

@media (max-width: 560px) {
  body.lm-surface-collections-page .lm-surface-collection-archive .lm-surface-material-grid,
  body.lm-surface-collections-page .lm-surface-collection-archive .lm-surface-material-grid--empty {
    --lm-surface-grid-cols: 2 !important;
  }
}

.lm-surface-materials-explorer > .lm-surface-material-grid,
.lm-surface-materials-explorer > .lm-surface-material-grid--empty {
  --lm-surface-grid-cols: 4 !important;
}

@media (min-width: 1280px) {
  .lm-surface-materials-explorer > .lm-surface-material-grid,
  .lm-surface-materials-explorer > .lm-surface-material-grid--empty {
    --lm-surface-grid-cols: 5 !important;
  }
}

/* Card polish applies wherever listing grid renders (explorer, archive, single, primene, vodiči). */
.lm-surface-material-grid,
.lm-surface-material-grid--empty {
  --lm-sage-50: #f1f5f4;
  --lm-sage-100: #dfe9e7;
  --lm-sage-300: #9fb8b3;
  --lm-sage-500: #5d7975;
  --lm-sage-700: #374a48;
  --lm-card-radius: 14px;
  --lm-card-corner-inset: 0.45rem;
  --lm-card-toggle-size: 1.75rem;
  --lm-card-media-aspect: 1 / 2 !important;
  --lm-card-body-padding-x: 0.7rem;
  --lm-card-body-padding-y: 0.55rem;
  gap: 0.85rem;
  align-items: start;
}

/* Standard listing grid columns — same on /materijali, primene, vodiči, kolekcije. Do not use --cols-* modifiers. */
.lm-surface-material-grid:not(.lm-surface-material-grid--empty) {
  --lm-surface-grid-cols: 4 !important;
}

@media (min-width: 1280px) {
  .lm-surface-material-grid:not(.lm-surface-material-grid--empty) {
    --lm-surface-grid-cols: 5 !important;
  }
}

@media (max-width: 1120px) {
  .lm-surface-material-grid:not(.lm-surface-material-grid--empty) {
    --lm-surface-grid-cols: 3 !important;
    gap: 0.75rem;
  }
}

/* 2 cols only on narrow phones. 561–767 (Flip/Fold open, flex, landscape)
   stays at 3 so 3:5 cards fit the viewport instead of one oversized pair. */
@media (max-width: 560px) {
  .lm-surface-material-grid:not(.lm-surface-material-grid--empty) {
    --lm-surface-grid-cols: 2 !important;
  }
}

/* Embedded listing grids — parent section controls vertical rhythm. */
.lm-surface-related .lm-surface-material-grid,
.lm-applications-page .lm-surface-material-grid:not(.lm-applications-closer__grid),
.lm-guides-page .lm-surface-material-grid {
  margin: 0;
}

.lm-surface-material-grid .lm-surface-card--listing .lm-surface-card__media {
  aspect-ratio: var(--lm-card-media-aspect);
  border-radius: var(--lm-card-radius) var(--lm-card-radius) 0 0;
  background: #eef0f3;
  border-bottom: 0;
  overflow: hidden;
}

.lm-surface-material-grid .lm-surface-card--listing .lm-surface-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* Crop Thron CDN adjustcrop=extend gray frame on legacy swatches (e.g. Bianco Assoluto). */
  transform: scale(1.06);
}

.lm-surface-material-grid .lm-surface-card--listing:hover:not(.is-detail-open) .lm-surface-card__img {
  transform: scale(1.08);
}

.lm-surface-material-grid .lm-surface-card__media-link,
.lm-surface-material-grid .lm-surface-card__img,
.lm-surface-material-grid .lm-surface-card__media--placeholder {
  border-radius: 0 !important;
}

.lm-surface-material-grid .lm-surface-card,
.lm-surface-material-grid article {
  border-radius: var(--lm-card-radius);
  overflow: hidden;
}

.lm-surface-material-grid .lm-surface-card__frame {
  border-radius: inherit;
}

/* Listing cards — premium catalog scan */
.lm-surface-material-grid .lm-surface-card--listing {
  --lm-card-corner-inset: 0.45rem;
  --lm-card-toggle-size: 1.75rem;
  --lm-card-peek-gap-head-inner: 0.24rem;
  --lm-drawer-gap-head-inner: 0.14rem;
  --lm-drawer-gap-after-title: 0.62rem;
  --lm-drawer-gap-before-tags: 0.58rem;
  --lm-drawer-body-pad-bottom: 0.72rem;
  --lm-drawer-finish-pad-y: 0.5rem;
  --lm-drawer-finish-pad-x: 0.55rem;
  --lm-drawer-finish-groups-gap: 0.42rem;
  --lm-drawer-finish-name-gap: 0.34rem;
  --lm-drawer-format-row-py: 0.38rem;
  --lm-drawer-tags-gap: 0.28rem;
  --lm-card-drawer-top: 0px;
  border-color: rgba(0, 42, 58, 0.08);
  background: #fff;
}

.lm-surface-material-grid .lm-surface-card--listing:hover {
  border-color: rgba(0, 42, 58, 0.14);
}

.lm-surface-material-grid .lm-surface-card--listing .lm-surface-card__body {
  box-sizing: border-box;
  padding: var(--lm-card-body-padding-y) var(--lm-card-body-padding-x) 0.65rem;
  gap: 0.1rem;
  transition: none !important;
}

/* Closed listing cards — frame height = media only; drawer overlays image from bottom */
.lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__frame {
  display: block !important;
  grid-template-rows: unset !important;
  grid-template-columns: unset !important;
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}

.lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__media {
  display: block;
  grid-row: unset !important;
  grid-column: unset !important;
  border-bottom: 0;
  width: 100%;
  min-width: 0;
}

.lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__body {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  grid-row: unset !important;
  grid-column: unset !important;
  align-self: unset !important;
  justify-self: unset !important;
  z-index: 3;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  box-sizing: border-box !important;
  min-height: var(--lm-card-body-peek-min, 4.15rem);
  max-height: var(--lm-card-body-peek-max, 48%) !important;
  margin: 0 !important;
  padding: 0.5rem var(--lm-card-body-padding-x) 0.58rem !important;
  /* visible: live-dots sit above the panel (bottom: 100%) */
  overflow: visible;
  background: #fff;
  border-top: 1px solid rgba(0, 42, 58, 0.06);
  box-shadow: none;
}

.lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__body-head {
  flex: 0 1 auto;
  min-height: 0;
}

.lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__body-head .lm-surface-card__body-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--lm-card-peek-gap-head-inner, 0.24rem) !important;
}

.lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__body-block--spec {
  flex: 0 0 auto;
  margin-top: 0.08rem;
}

.lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.22;
}

.lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lm-surface-material-grid .lm-surface-card__collection,
.lm-surface-material-grid .lm-surface-card__tags-label {
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lm-surface-material-grid .lm-surface-card__collection {
  color: #9aa3b2;
}

.lm-surface-material-grid .lm-surface-card__name {
  font-family: inherit;
  font-size: 0.88rem;
  letter-spacing: 0.012em;
  color: #14224a;
}

.lm-surface-material-grid .lm-surface-card__summary {
  font-size: 0.66rem;
  color: #7a8494;
}

.lm-surface-material-grid .lm-surface-card__body-block--price {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  min-width: 0;
}

.lm-surface-material-grid .lm-surface-card__price {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: 0.66rem;
  line-height: 1.3;
  color: #7a8494;
}

.lm-surface-material-grid .lm-surface-card__price-label {
  font-weight: 500;
  color: #9aa3b2;
}

.lm-surface-material-grid .lm-surface-card__price-value {
  font-weight: 600;
  color: #3d4a5c;
}

.lm-surface-material-grid .lm-surface-card__price-hint.lm-surface-finish-formats__hint {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  min-width: 1.05rem;
  padding: 0;
  margin: 0;
}

.lm-surface-material-grid .lm-surface-card__price-hint .lm-surface-finish-formats__hint-icon {
  width: 0.72rem;
  height: 0.72rem;
}

.lm-surface-material-grid .lm-surface-card__price-hint .lm-surface-finish-formats__hint-icon svg {
  width: 0.72rem;
  height: 0.72rem;
}

/*
 * Closed cards: cover-link (z-index 5) sits over the peek body. Raise body above it
 * (clicks still fall through via pointer-events:none) and re-enable the price hint.
 */
.lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__body {
  z-index: 6 !important;
}

.lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__price-hint {
  position: relative;
  z-index: 7;
  pointer-events: auto !important;
}

.lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__body-block--price {
  flex: 0 0 auto;
}

.lm-surface-material-grid .lm-surface-card__tags--full {
  gap: 0.22rem;
}

.lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__body-block--tags {
  display: none !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__tags--full {
  display: flex !important;
  flex-wrap: wrap;
  margin-top: 0;
}

.lm-surface-material-grid .lm-surface-card__tags-label {
  display: block;
  margin: 0 0 0.5rem;
  padding-top: 0;
  color: #7fa9b6;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__tags-label {
  margin: 0 0 0.5rem !important;
  line-height: 1.25 !important;
}

.lm-surface-material-grid .lm-surface-card__tag {
  border-color: #e8ecf1;
  background: #f9fafb;
  color: #3d4a5c;
  font-size: 0.58rem;
  padding: 0.08rem 0.38rem;
  text-decoration: none;
}

.lm-surface-material-grid .lm-surface-card__body-foot,
.lm-surface-material-grid .lm-surface-card__body-foot:hover,
.lm-surface-material-grid .lm-surface-card__body-foot:focus-visible,
.lm-surface-material-grid .lm-surface-card__body-foot .lm-surface-card__tag {
  text-decoration: none !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open {
  position: relative !important;
  z-index: 6 !important;
  box-shadow: 0 12px 32px rgba(55, 74, 72, 0.14);
  isolation: auto;
  overflow: hidden !important;
  border-color: transparent !important;
}

/* Drawer bela podloga — na body, ne ::after (Safari je crtao vertikalnu liniju pri otvaranju) */
.lm-surface-material-grid .lm-surface-card--listing.is-detail-open::after {
  display: none !important;
  content: none !important;
}

.lm-surface-material-grid .lm-surface-card__media {
  z-index: 1;
}

.lm-surface-material-grid .lm-surface-card__body {
  position: relative;
  z-index: 2;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open {
  height: var(--lm-card-frame-height, auto) !important;
  min-height: var(--lm-card-frame-height, auto) !important;
  max-height: var(--lm-card-frame-height, auto) !important;
  box-sizing: border-box !important;
}

/* Drawer open: flex column — image strip on top, white panel in-flow below (all viewports) */
.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__frame {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  z-index: auto !important;
  overflow: hidden !important;
  height: var(--lm-card-frame-height, auto) !important;
  min-height: var(--lm-card-frame-height, auto) !important;
  max-height: var(--lm-card-frame-height, auto) !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__frame::after {
  display: none !important;
  content: none !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__media {
  pointer-events: auto !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
  flex: 0 0 auto !important;
  height: var(--lm-card-drawer-top, auto) !important;
  max-height: var(--lm-card-drawer-top, auto) !important;
  min-height: 0 !important;
  grid-row: auto !important;
  border-radius: 0 !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__media-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 8 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  grid-row: auto !important;
  padding: var(--lm-card-body-padding-y, 0.55rem) var(--lm-card-body-padding-x) var(--lm-drawer-body-pad-bottom, 0.72rem) !important;
  overflow: hidden !important;
  background-color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body::before {
  display: none !important;
  content: none !important;
}

.lm-surface-material-grid .lm-surface-card__drawer-peek {
  display: none !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__drawer-peek {
  display: block !important;
  position: absolute !important;
  top: var(--lm-card-corner-inset) !important;
  left: var(--lm-card-body-padding-x) !important;
  right: var(--lm-card-drawer-strip-end) !important;
  z-index: 3 !important;
  width: auto !important;
  height: var(--lm-card-drawer-strip-height) !important;
  border-radius: 999px !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.lm-surface-material-grid .lm-surface-card__drawer-peek-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.lm-surface-material-grid .lm-surface-card__drawer-peek--placeholder {
  background: linear-gradient(145deg, #e8ecf1 0%, #dfe5ec 100%) !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body-head {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body-head .lm-surface-card__body-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--lm-drawer-gap-head-inner) !important;
}

/* Drawer open — vertical rhythm (is-detail-expanded was never set in JS) */
.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__collection {
  margin: 0 !important;
  line-height: 1.25 !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__name {
  margin: 0 !important;
  line-height: 1.24 !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body-block {
  margin-top: 0 !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body-block--spec {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: block !important;
  margin-top: var(--lm-drawer-gap-after-title) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body-block--spec::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__spec-detail {
  display: block !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__finish-groups {
  gap: var(--lm-drawer-finish-groups-gap) !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__finish-section {
  padding: var(--lm-drawer-finish-pad-y) var(--lm-drawer-finish-pad-x) !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__finish-name {
  margin: 0 0 var(--lm-drawer-finish-name-gap) !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__format-specs {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__format-spec {
  padding: var(--lm-drawer-format-row-py) 0 !important;
  gap: 0.28rem !important;
  border-bottom-color: rgba(223, 233, 231, 0.95) !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__format-spec__size {
  font-size: 0.7rem !important;
  line-height: 1.35 !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__format-spec__chips {
  gap: 0.24rem !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__format-spec__chip {
  padding: 0.14rem 0.32rem !important;
  font-size: 0.66rem !important;
  line-height: 1.2 !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__format-spec__chip .lm-surface-finish-formats__bracket {
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body-block--tags {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  margin-top: auto !important;
  padding-top: var(--lm-drawer-gap-before-tags) !important;
  position: relative !important;
  z-index: 3 !important;
  background-color: #fff !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__tags--full {
  margin-top: 0 !important;
  gap: var(--lm-drawer-tags-gap) !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__tag {
  padding: 0.12rem 0.42rem !important;
  line-height: 1.3 !important;
}

.lm-surface-material-grid .lm-surface-card__finish-name {
  font-family: inherit !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 0 0.3rem !important;
}

.lm-surface-material-grid button.lm-surface-card__detail-toggle,
.lm-surface-material-grid .lm-surface-card__detail-toggle {
  top: var(--lm-card-corner-inset);
  right: var(--lm-card-corner-inset);
  width: var(--lm-card-toggle-size) !important;
  height: var(--lm-card-toggle-size) !important;
  min-width: var(--lm-card-toggle-size) !important;
  max-width: var(--lm-card-toggle-size) !important;
  min-height: var(--lm-card-toggle-size) !important;
  max-height: var(--lm-card-toggle-size) !important;
  display: block !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 0 !important;
  font-weight: 400 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  gap: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  border: 1px solid var(--lm-sage-300, #9fb8b3) !important;
  border-color: var(--lm-sage-300, #9fb8b3) !important;
  background: var(--lm-sage-50, #f1f5f4) !important;
  color: var(--lm-sage-700, #374a48) !important;
  box-shadow: 0 2px 10px rgba(20, 30, 28, 0.2) !important;
  --lm-toggle-icon-size: 15px;
}

.lm-surface-material-grid .lm-surface-card__detail-toggle-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: var(--lm-toggle-icon-size, 15px) !important;
  height: var(--lm-toggle-icon-size, 15px) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

.lm-surface-material-grid .lm-surface-card__detail-toggle-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  flex-shrink: 0 !important;
}

.lm-surface-material-grid .lm-surface-card__detail-toggle-icon--close {
  visibility: hidden !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__detail-toggle-icon--close {
  visibility: visible !important;
}

@media (min-width: 1121px) {
  .lm-surface-material-grid .lm-surface-card__detail-toggle {
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-width: 1.75rem !important;
    max-width: 1.75rem !important;
    min-height: 1.75rem !important;
    max-height: 1.75rem !important;
  }
}

/* Tablet landscape / medium viewport — malo veći od desktopa, ne glomazno */
@media (min-width: 1121px) and (max-width: 1199px) {
  .lm-surface-material-grid .lm-surface-card--listing {
    --lm-card-toggle-size: 2rem;
  }

  .lm-surface-material-grid .lm-surface-card__detail-toggle {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    max-width: 2rem !important;
    min-height: 2rem !important;
    max-height: 2rem !important;
    --lm-toggle-icon-size: 16px;
  }
}

.lm-surface-material-grid button.lm-surface-card__detail-toggle:hover,
.lm-surface-material-grid button.lm-surface-card__detail-toggle:focus-visible,
.lm-surface-material-grid .lm-surface-card__detail-toggle:hover,
.lm-surface-material-grid .lm-surface-card__detail-toggle:focus-visible {
  background: var(--lm-sage-100, #dfe9e7) !important;
  border-color: var(--lm-sage-500, #5d7975) !important;
  color: var(--lm-sage-700, #374a48) !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open button.lm-surface-card__detail-toggle,
.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__detail-toggle {
  background: var(--lm-sage-500, #5d7975) !important;
  border-color: var(--lm-sage-500, #5d7975) !important;
  color: #fff !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open button.lm-surface-card__detail-toggle:hover,
.lm-surface-material-grid .lm-surface-card--listing.is-detail-open button.lm-surface-card__detail-toggle:focus-visible,
.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__detail-toggle:hover,
.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__detail-toggle:focus-visible {
  background: var(--lm-sage-700, #374a48) !important;
  border-color: var(--lm-sage-700, #374a48) !important;
  color: #fff !important;
}

.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__detail-toggle svg,
.lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__detail-toggle svg path {
  stroke: #fff;
}

.lm-surface-material-grid .lm-surface-card__spec-detail {
  margin-top: 0.35rem;
}

/* Ista pozadina za sve obrade (bez naizmeničnog belo/zeleno; poništava temu + stari nth-child) */
.lm-surface-material-grid .lm-surface-card__finish-groups > .lm-surface-card__finish-section,
.lm-surface-material-grid .lm-surface-card__finish-section,
.lm-surface-material-grid .lm-surface-card__finish-section:nth-child(odd),
.lm-surface-material-grid .lm-surface-card__finish-section:nth-child(even),
.lm-surface-material-grid .lm-surface-card__finish-groups > section.lm-surface-card__finish-section:nth-child(even) {
  margin: 0 !important;
  padding: 0.45rem 0.5rem !important;
  border: 1px solid var(--lm-sage-100, #dfe9e7) !important;
  border-radius: 8px !important;
  background: var(--lm-sage-50, #f1f5f4) !important;
  background-color: var(--lm-sage-50, #f1f5f4) !important;
}

.lm-surface-material-grid .lm-surface-card__finish-name {
  color: var(--lm-sage-500);
}

.lm-surface-material-grid .lm-surface-card__format-row {
  font-size: 0.76rem;
  color: var(--lm-sage-700);
  border-bottom-color: rgba(223, 233, 231, 0.95);
}

/* ===== Listing cards — tablet/mobile (touch target + proportions) ===== */
@media (max-width: 1120px) {
  .lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body {
    margin-top: -1px !important;
  }

  .lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body-block--spec {
    margin-bottom: -1px !important;
  }

  .lm-surface-material-grid .lm-surface-card--listing {
    --lm-card-corner-inset: 0.38rem;
    --lm-drawer-gap-head-inner: 0.16rem;
    --lm-drawer-gap-after-title: 0.58rem;
    --lm-drawer-gap-before-tags: 0.55rem;
    --lm-drawer-body-pad-bottom: 0.68rem;
    --lm-drawer-format-row-py: 0.36rem;
  }
}

/* Tablet portrait — veći info toggle */
@media (min-width: 561px) and (max-width: 1120px) {
  .lm-surface-material-grid .lm-surface-card--listing {
    --lm-card-toggle-size: 2.5rem;
  }

  .lm-surface-material-grid .lm-surface-card__detail-toggle {
    --lm-toggle-icon-size: 18px;
  }
}

@media (max-width: 900px) {
  .lm-surface-material-grid,
  .lm-surface-material-grid--empty {
    --lm-card-media-aspect: 3 / 5 !important;
  }
}

@media (max-width: 560px) {
  .lm-surface-material-grid,
  .lm-surface-material-grid--empty {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    --lm-surface-grid-cols: 2 !important;
    --lm-card-media-aspect: 3 / 5 !important;
    gap: 0.65rem;
  }

  .lm-surface-material-grid {
    --lm-card-body-padding-x: 0.72rem;
    --lm-card-body-padding-y: 0.5rem;
  }

  .lm-surface-material-grid .lm-surface-card--listing {
    --lm-card-corner-inset: 0.4rem;
    --lm-card-peek-gap-head-inner: 0.22rem;
    --lm-card-body-peek-max: 50%;
    --lm-card-body-peek-min: 4.25rem;
    --lm-card-toggle-size: 2.35rem;
  }

  .lm-surface-material-grid .lm-surface-card__detail-toggle {
    width: 2.35rem !important;
    height: 2.35rem !important;
    min-width: 2.35rem !important;
    max-width: 2.35rem !important;
    min-height: 2.35rem !important;
    max-height: 2.35rem !important;
    --lm-toggle-icon-size: 17px;
  }

  .lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__body {
    padding: 0.44rem var(--lm-card-body-padding-x) 0.52rem;
  }

  .lm-surface-material-grid .lm-surface-card--listing .lm-surface-card__body {
    padding: var(--lm-card-body-padding-y) var(--lm-card-body-padding-x) var(--lm-drawer-body-pad-bottom, 0.65rem) !important;
    gap: 0;
  }

  .lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body {
    padding-top: 0.4rem !important;
  }

  .lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body-block--spec {
    margin-top: 0.4rem !important;
    min-height: 5.5rem !important;
    padding-bottom: 0.35rem !important;
  }

  .lm-surface-material-grid .lm-surface-card--listing {
    --lm-drawer-gap-after-strip: 0.65rem;
    --lm-drawer-gap-head-inner: 0.12rem;
    --lm-drawer-gap-after-title: 0.4rem;
    --lm-drawer-gap-before-tags: 0.45rem;
    --lm-drawer-body-pad-bottom: 0.65rem;
    --lm-drawer-finish-pad-y: 0.46rem;
    --lm-drawer-finish-pad-x: 0.5rem;
    --lm-drawer-finish-groups-gap: 0.38rem;
    --lm-drawer-finish-name-gap: 0.3rem;
    --lm-drawer-format-row-py: 0.34rem;
    --lm-drawer-tags-gap: 0.26rem;
  }

  .lm-surface-material-grid .lm-surface-card__collection,
  .lm-surface-material-grid .lm-surface-card__tags-label {
    font-size: 0.625rem;
    letter-spacing: 0.07em;
    line-height: 1.2;
  }

  .lm-surface-material-grid .lm-surface-card__tags-label {
    margin-bottom: 0.48rem;
  }

  .lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__tags-label {
    margin-bottom: 0.48rem !important;
  }

  .lm-surface-material-grid .lm-surface-card__name {
    font-size: 0.875rem;
    line-height: 1.22;
  }

  .lm-surface-material-grid .lm-surface-card__summary {
    font-size: 0.75rem;
    line-height: 1.32;
  }

  .lm-surface-material-grid .lm-surface-card__tag {
    font-size: 0.6875rem;
    padding: 0.14rem 0.42rem;
    line-height: 1.28;
  }

  .lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__tags--full {
    gap: var(--lm-drawer-tags-gap) !important;
  }

  .lm-surface-material-grid .lm-surface-card--listing:not(.is-detail-open) .lm-surface-card__spec-detail {
    margin-top: 0.2rem;
  }

}

@media (min-width: 1121px) {
  .lm-surface-material-grid .lm-surface-card--listing.is-detail-open .lm-surface-card__body-block--spec {
    min-height: 3.5rem !important;
  }
}

.lm-surface-filters .lm-surface-materials-explorer__count {
  color: var(--lm-muted);
  margin: 0;
  padding: 0;
  text-align: left !important;
  width: auto;
  max-width: none;
  font-size: 0.88rem;
}

.lm-surface-materials-explorer__results-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  width: 100%;
  max-width: 100%;
  margin: 0.75rem 0 0.35rem;
}

.lm-surface-view-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  margin: 0 0 0.85rem;
}

.lm-surface-view-toggle {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 3px;
  border: 1px solid rgba(0, 42, 58, 0.14);
  border-radius: 999px;
  background: #f4f7f8;
  overflow: hidden;
  isolation: isolate;
}

.lm-surface-view-toggle__pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: #dcebed;
  box-shadow: inset 0 0 0 1px rgba(0, 42, 58, 0.08);
  pointer-events: none;
  transform: translate(0, 0);
  will-change: transform, width, height;
}

.lm-surface-view-toggle.is-pill-ready .lm-surface-view-toggle__pill {
  transition:
    transform var(--lm-motion-duration, 320ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    width var(--lm-motion-duration, 320ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    height var(--lm-motion-duration, 320ms) var(--lm-motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

@media (prefers-reduced-motion: reduce) {
  .lm-surface-view-toggle.is-pill-ready .lm-surface-view-toggle__pill {
    transition: none;
  }
}

/* Beat Elementor kit / theme button chrome (magenta fill on inactive). */
body.elementor-kit-6 .lm-surface-view-toggle button.lm-surface-view-toggle__btn,
body.elementor-kit-6 .lm-surface-materials-explorer button.lm-surface-view-toggle__btn,
.lm-surface-materials-explorer .lm-surface-view-toggle button.lm-surface-view-toggle__btn,
.lm-surface-view-toggle__btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative;
  z-index: 1;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  min-height: 34px !important;
  height: auto !important;
  padding: 0.42rem 0.9rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #626b6d !important;
  -webkit-text-fill-color: #626b6d !important;
  font-family: "Work Sans", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transform: none !important;
  transition:
    color var(--lm-motion-duration-fast, 180ms) ease;
}

.lm-surface-view-toggle__label {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  -webkit-text-fill-color: inherit;
}

.lm-surface-view-toggle__desc {
  margin: 0;
  padding: 0 0.35rem;
  max-width: 100%;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: #7f8a8c;
  text-align: right;
}

body.elementor-kit-6 .lm-surface-view-toggle button.lm-surface-view-toggle__btn:hover,
body.elementor-kit-6 .lm-surface-view-toggle button.lm-surface-view-toggle__btn:focus,
body.elementor-kit-6 .lm-surface-view-toggle button.lm-surface-view-toggle__btn:focus-visible,
.lm-surface-materials-explorer .lm-surface-view-toggle button.lm-surface-view-toggle__btn:hover,
.lm-surface-materials-explorer .lm-surface-view-toggle button.lm-surface-view-toggle__btn:focus-visible,
.lm-surface-view-toggle__btn:hover,
.lm-surface-view-toggle__btn:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  color: #002a3a !important;
  -webkit-text-fill-color: #002a3a !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

body.elementor-kit-6 .lm-surface-view-toggle button.lm-surface-view-toggle__btn.is-active,
body.elementor-kit-6 .lm-surface-materials-explorer button.lm-surface-view-toggle__btn.is-active,
.lm-surface-materials-explorer .lm-surface-view-toggle button.lm-surface-view-toggle__btn.is-active,
.lm-surface-view-toggle__btn.is-active {
  background: transparent !important;
  background-color: transparent !important;
  color: #002a3a !important;
  -webkit-text-fill-color: #002a3a !important;
}

body.elementor-kit-6 .lm-surface-view-toggle button.lm-surface-view-toggle__btn.is-active:hover,
body.elementor-kit-6 .lm-surface-view-toggle button.lm-surface-view-toggle__btn.is-active:focus-visible,
.lm-surface-materials-explorer .lm-surface-view-toggle button.lm-surface-view-toggle__btn.is-active:hover,
.lm-surface-materials-explorer .lm-surface-view-toggle button.lm-surface-view-toggle__btn.is-active:focus-visible,
.lm-surface-view-toggle__btn.is-active:hover,
.lm-surface-view-toggle__btn.is-active:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  color: #002a3a !important;
  -webkit-text-fill-color: #002a3a !important;
}

/* Live sample close-ups: crop into the studio photo like finish swatches. */
.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-sample="1"]
  .lm-surface-card__img {
  transform: scale(1.45);
  transform-origin: center center;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-sample="1"]:hover:not(.is-detail-open)
  .lm-surface-card__img {
  transform: scale(1.48);
  transform-origin: center center;
}

/*
 * Detail drawer must not drop live crop to scale(1) — that reveals studio
 * backdrop beside the tile. Keep a strong crop (slightly softer than closed).
 */
.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-material-grid
  .lm-surface-card--listing[data-has-live-sample="1"].is-detail-open
  .lm-surface-card__img {
  transform: scale(1.38) !important;
  transform-origin: center center !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.lm-surface-card__live-empty {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 0.75rem;
  background: #eef0f3;
  pointer-events: none;
}

.lm-surface-card__live-empty p {
  margin: 0;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: #002a3a;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-sample="0"]
  .lm-surface-card__media {
  position: relative;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-sample="0"]
  .lm-surface-card__live-empty {
  display: flex;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-sample="0"]
  .lm-surface-card__media-link--cover img,
.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-sample="0"]
  .lm-surface-card__media--placeholder {
  visibility: hidden;
}

/* Live finish samples (tag always; horizontal carousel when 2+). */
.lm-surface-card__live-rail {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]
  .lm-surface-card__media {
  position: relative;
  z-index: 4;
}

/* Keep cover in layout for aspect-ratio height; hide visually. */
.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]
  .lm-surface-card__media-link--cover {
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]
  .lm-surface-card__live-rail {
  display: block;
  pointer-events: auto;
}

/* Drop cover overlay below media so the rail can scroll / show tag. */
.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]:not(.is-detail-open)
  .lm-surface-card__cover-link {
  z-index: 0 !important;
  pointer-events: none !important;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]:not(.is-detail-open)
  .lm-surface-card__body {
  z-index: 5 !important;
  /* Let horizontal drag/swipe pass through the peek panel to the rail. */
  pointer-events: none;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]:not(.is-detail-open)
  .lm-surface-card__body a,
.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]:not(.is-detail-open)
  .lm-surface-card__body button {
  pointer-events: auto;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]
  .lm-surface-card__live-track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* Native X-only scroller: overflow-y: clip means no Y scroll container,
     so vertical pans go straight to the page with native momentum. */
  overflow-x: auto;
  overflow-y: hidden;
  overflow-y: clip;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  scrollbar-width: none;
  touch-action: pan-x pan-y pinch-zoom;
  user-select: none;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-gallery="1"]
  .lm-surface-card__live-track {
  cursor: grab;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-gallery="1"]
  .lm-surface-card__live-track.is-dragging,
.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-gallery="1"]
  .lm-surface-card__live-rail.is-dragging
  .lm-surface-card__live-track {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-gallery="1"]
  .lm-surface-card__live-track.is-dragging
  .lm-surface-card__live-slide,
.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-gallery="1"]
  .lm-surface-card__live-rail.is-dragging
  .lm-surface-card__live-slide {
  pointer-events: none;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]
  .lm-surface-card__live-track::-webkit-scrollbar {
  display: none;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]
  .lm-surface-card__live-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  text-decoration: none !important;
  color: inherit;
  overflow: hidden;
  -webkit-user-drag: none;
  user-select: none;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]
  .lm-surface-card__live-slide .lm-surface-card__img--live {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.45);
  transform-origin: center center;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]:hover:not(.is-detail-open)
  .lm-surface-card__live-slide .lm-surface-card__img--live {
  transform: scale(1.48);
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"].is-detail-open
  .lm-surface-card__live-slide .lm-surface-card__img--live {
  transform: scale(1.38) !important;
}

.lm-surface-card__live-finish {
  position: absolute;
  left: 0.45rem;
  top: 0.45rem;
  z-index: 2;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - var(--lm-card-toggle-size, 1.75rem) - var(--lm-card-corner-inset, 0.45rem) - 0.9rem);
  padding: 0.16rem 0.34rem;
  border-radius: var(--lm-surface-tag-radius, 6px);
  background: rgba(255, 255, 255, 0.92);
  color: #002a3a;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: break-word;
  overflow: hidden;
  pointer-events: none;
}

/* Anchored to the white drawer top — rises automatically with 2-line titles. */
.lm-surface-card__live-dots {
  display: none;
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 100%;
  z-index: 4;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  margin: 0 0 0.55rem;
  padding: 0.22rem 0.4rem;
  border-radius: var(--lm-surface-tag-radius, 6px);
  background: rgba(0, 24, 34, 0.45);
  transform: translateX(-50%);
  pointer-events: none;
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]:not(.is-detail-open)
  .lm-surface-card__live-dots {
  display: flex;
}

.lm-surface-card__live-dot {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background-color 160ms ease, transform 160ms ease;
}

.lm-surface-card__live-dot.is-active {
  background: #fff;
  transform: scale(1.2);
}

.lm-surface-materials-explorer[data-lm-view="live"]
  .lm-surface-card--listing[data-has-live-rail="1"]
  .lm-surface-card__live-finish {
  top: 0.45rem;
  bottom: auto;
}

@media (max-width: 767px) {
  .lm-surface-card__live-finish {
    max-width: min(
      5.75rem,
      calc(100% - var(--lm-card-toggle-size, 1.75rem) - var(--lm-card-corner-inset, 0.45rem) - 0.9rem)
    );
  }

  .lm-surface-materials-explorer__results-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin-top: 0.85rem;
  }

  .lm-surface-view-toggle {
    width: 100%;
  }

  body.elementor-kit-6 .lm-surface-view-toggle button.lm-surface-view-toggle__btn,
  .lm-surface-view-toggle__btn {
    flex: 1 1 0;
    min-height: 38px !important;
    padding: 0.4rem 0.4rem !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.04em !important;
    text-align: center;
    white-space: normal;
  }

  .lm-surface-view-toggle-wrap {
    width: 100%;
    align-items: stretch;
  }

  .lm-surface-view-toggle {
    width: 100%;
  }

  .lm-surface-view-toggle__desc {
    text-align: center;
    padding: 0;
  }
}

/* ===== Pagination — Laminam branded (overrides theme / Elementor) ===== */

.lm-surface-materials-explorer__pagination,
.lm-surface-page-shell .navigation.pagination,
.lm-surface-page-shell .nav-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  width: 100%;
  max-width: var(--lm-content-max);
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0 !important;
  padding-left: var(--lm-page-padding-x);
  padding-right: var(--lm-page-padding-x);
  box-sizing: border-box;
  font-family: "Work Sans", Arial, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
}

.lm-surface-materials-explorer__pagination .page-numbers,
.lm-surface-page-shell .navigation.pagination .page-numbers,
.lm-surface-page-shell .nav-links .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  padding: 0.35rem 0.65rem !important;
  margin: 0 !important;
  border: 1px solid rgba(0, 42, 58, 0.14) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: "Work Sans", Arial, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--lm-navy-mid, #073343) !important;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.lm-surface-materials-explorer__pagination a.page-numbers:hover,
.lm-surface-materials-explorer__pagination a.page-numbers:focus-visible,
.lm-surface-page-shell .navigation.pagination a.page-numbers:hover,
.lm-surface-page-shell .navigation.pagination a.page-numbers:focus-visible,
.lm-surface-page-shell .nav-links a.page-numbers:hover,
.lm-surface-page-shell .nav-links a.page-numbers:focus-visible {
  background: var(--lm-warm-50, #faf9f7) !important;
  border-color: rgba(0, 42, 58, 0.28) !important;
  color: var(--lm-navy, #002a3a) !important;
  outline: none;
}

.lm-surface-materials-explorer__pagination .page-numbers.current,
.lm-surface-page-shell .navigation.pagination .page-numbers.current,
.lm-surface-page-shell .nav-links .page-numbers.current {
  background: var(--lm-navy, #002a3a) !important;
  border-color: var(--lm-navy, #002a3a) !important;
  color: #fff !important;
  cursor: default;
  pointer-events: none;
}

.lm-surface-materials-explorer__pagination .page-numbers.dots,
.lm-surface-page-shell .navigation.pagination .page-numbers.dots,
.lm-surface-page-shell .nav-links .page-numbers.dots {
  min-width: auto !important;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--lm-muted, #626b6d) !important;
  font-weight: 500 !important;
  pointer-events: none;
}

.lm-surface-materials-explorer__pagination .prev.page-numbers,
.lm-surface-materials-explorer__pagination .next.page-numbers,
.lm-surface-page-shell .navigation.pagination .prev.page-numbers,
.lm-surface-page-shell .navigation.pagination .next.page-numbers,
.lm-surface-page-shell .nav-links .prev.page-numbers,
.lm-surface-page-shell .nav-links .next.page-numbers {
  min-width: auto !important;
  padding-left: 0.85rem !important;
  padding-right: 0.85rem !important;
  font-weight: 500 !important;
}

.lm-surface-materials-explorer__pagination {
  width: 100%;
  max-width: var(--lm-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--lm-page-padding-x);
  padding-right: var(--lm-page-padding-x);
  box-sizing: border-box;
}

@media (max-width: 1120px) {
  .lm-surface-materials-explorer {
    --lm-page-padding-x: 20px;
  }

  /*
   * laminam-header-mega-menu-premium-v3: @media (max-width:1120px) { .laminam-btn { display:none } }
   * Explorer Filter/Sort + Primeni koriste .laminam-btn — vraćamo ih samo ovde.
   */
  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .laminam-btn.lm-surface-filters__toolbar-btn,
  .lm-surface-materials-explorer .lm-surface-filters__actions .laminam-btn.lm-surface-js-apply-filters {
    display: inline-flex !important;
    visibility: visible !important;
  }

  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .laminam-btn__icon {
    display: block !important;
    flex-shrink: 0;
  }

  /* Tablet: search pill white (desktop filter row unchanged) */
  .lm-surface-materials-explorer .lm-surface-filters__search input[type='search'],
  .lm-surface-materials-explorer .lm-surface-filters__search-input {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
}

/* Phone only — icon toolbar, horizontal chips, accordion panel, full-width apply */
@media (max-width: 767px) {
  .lm-surface-materials-explorer {
    --lm-page-padding-x: 16px;
    --lm-filter-chip-height: 34px;
    --lm-filter-chip-padding-x: 0.8rem;
  }

  .lm-surface-filters__toolbar {
    margin-bottom: 0.5rem;
  }

  .lm-surface-filters__advanced--inline {
    margin-top: 0.2rem !important;
    margin-bottom: 0 !important;
  }

  .lm-surface-filters__advanced--inline.lm-surface-js-panel[data-panel='filters']:not([hidden]) {
    display: block !important;
  }

  .lm-surface-filters__toolbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
  }

  .lm-surface-filters__search {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .lm-surface-filters__search-wrap {
    width: 100%;
    max-width: none;
  }

  .lm-surface-filters__toolbar-actions {
    flex: 0 0 auto;
    width: auto;
    gap: 0.35rem;
  }

  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel,
  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel:hover,
  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel:focus-visible,
  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel[aria-expanded='true'],
  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel[aria-expanded='true']:hover {
    width: var(--lm-toolbar-control-height, 38px) !important;
    min-width: var(--lm-toolbar-control-height, 38px) !important;
    max-width: var(--lm-toolbar-control-height, 38px) !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 42, 58, 0.16) !important;
  }

  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel:hover,
  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel:focus-visible,
  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel[aria-expanded='true'],
  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel[aria-expanded='true']:hover {
    border: 1px solid rgba(0, 42, 58, 0.34) !important;
  }

  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__toolbar-btn.laminam-btn.lm-surface-js-toggle-panel[aria-expanded='true']:not(:hover):not(:focus-visible) {
    background: #eef4f6 !important;
    border-color: rgba(0, 42, 58, 0.34) !important;
  }

  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__sort-popover {
    flex: 0 0 auto;
    width: auto;
  }

  .lm-surface-materials-explorer .lm-surface-filters__toolbar-actions .lm-surface-filters__sort-popover > .lm-surface-filters__toolbar-btn {
    width: var(--lm-toolbar-control-height, 44px) !important;
  }

  .lm-surface-filters__filter-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  .lm-surface-filters__filter-row .lm-surface-filters__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 0.3rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overflow-y: clip !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y pinch-zoom;
    scrollbar-width: none;
    padding-bottom: 0.1rem;
    margin-bottom: 0.35rem;
  }

  .lm-surface-filters__filter-row .lm-surface-filters__group-toggle {
    gap: 0.28rem !important;
  }

  .lm-surface-filters__filter-row .lm-surface-filters__grid::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .lm-surface-filters__filter-row .lm-surface-filters__group {
    flex: 0 0 auto !important;
  }

  .lm-surface-filters__filter-row:has(.lm-surface-js-filter-drawer:not([hidden])) .lm-surface-filters__grid {
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 42, 58, 0.1) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .lm-surface-filters__filter-drawer:not([hidden]) {
    margin: 0.5rem 0 0 !important;
    padding: 0.65rem 0.7rem 0.6rem !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    background: rgba(0, 42, 58, 0.03) !important;
  }

  .lm-surface-filters__filter-accordion-slot {
    padding: 0;
    margin: 0;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    background: transparent !important;
  }

  .lm-surface-filters__filter-drawer .lm-surface-js-filter-group-panel,
  .lm-surface-filters__filter-drawer .lm-surface-popover,
  .lm-surface-filters__filter-drawer .lm-surface-filters__options--grid {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    height: auto !important;
    max-height: min(42vh, 12.5rem) !important;
    gap: 0.4rem !important;
  }

  .lm-surface-filters__filter-drawer .lm-surface-filters__option {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 1.85rem !important;
    padding: 0.28rem 0.65rem !important;
    border-radius: var(--lm-surface-tag-radius, 6px) !important;
  }

  .lm-surface-filters__filter-row .lm-surface-filters__actions--drawer {
    margin-top: 0.5rem !important;
    padding: 0.5rem 0 0 !important;
    background: transparent !important;
    justify-content: stretch !important;
  }

  .lm-surface-filters__filter-row .lm-surface-filters__actions--drawer .lm-surface-js-apply-filters {
    width: 100% !important;
    min-width: 0;
    order: 3;
  }

  .lm-surface-filters__filter-row .lm-surface-filters__actions--drawer .lm-surface-filters__reset {
    order: 2;
    margin-right: 0;
    width: 100%;
    text-align: center;
  }

  .lm-surface-materials-explorer .lm-surface-filters__sort-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: var(--laminam-z-page-dropdown, 15) !important;
  }
}

/* ===== Mobile polish ===== */
@media (max-width: 560px) {
  .lm-surface-filters {
    padding-bottom: 0.85rem;
  }

  .lm-surface-filters__actions {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .lm-surface-filters__chip {
    font-size: 12px;
  }

  .lm-surface-filters__chip-remove {
    width: 1.3rem;
    height: 1.3rem;
  }
}

/* ===== SECTION C — Single material page ===== */
.lm-surface-material-page {
  --lm-card-radius: 14px;
  --lm-control-radius: 10px;
}

.lm-surface-material-page .lm-surface-material-grid,
.lm-surface-material-page .lm-surface-material-grid--empty {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Ista kolekcija: iste kolone i kartice kao /materijali listing (4 → 5 na širokom ekranu). */
.lm-surface-material-page .lm-surface-single-collection__grid {
  --lm-surface-grid-cols: 4 !important;
  --lm-sage-50: #f1f5f4;
  --lm-sage-100: #dfe9e7;
  --lm-sage-300: #9fb8b3;
  --lm-sage-500: #5d7975;
  --lm-sage-700: #374a48;
  --lm-card-corner-inset: 0.45rem;
  --lm-card-toggle-size: 1.75rem;
  --lm-card-media-aspect: 1 / 2 !important;
  --lm-card-body-padding-x: 0.7rem;
  --lm-card-body-padding-y: 0.55rem;
  gap: 0.85rem;
  align-items: start;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

@media (min-width: 1280px) {
  .lm-surface-material-page .lm-surface-single-collection__grid {
    --lm-surface-grid-cols: 5 !important;
  }
}

@media (max-width: 1120px) {
  .lm-surface-material-page .lm-surface-single-collection__grid {
    --lm-surface-grid-cols: 3 !important;
    gap: 0.75rem;
  }
}

@media (max-width: 900px) {
  .lm-surface-material-page .lm-surface-single-collection__grid {
    --lm-card-media-aspect: 3 / 5 !important;
  }
}

@media (max-width: 767px) {
  .lm-surface-material-page .lm-surface-single-collection__grid {
    --lm-card-media-aspect: 3 / 5 !important;
    gap: 0.75rem;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    justify-items: start;
  }

  .lm-surface-material-page .lm-surface-single-collection__grid > .lm-surface-card {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .lm-surface-material-page .lm-surface-single-collection__grid {
    --lm-surface-grid-cols: 2 !important;
    gap: 0.65rem;
  }
}

.lm-surface-material-page .lm-surface-single-collection__all-link.laminam-btn--tertiary {
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #002a3a;
  text-decoration: underline;
  text-underline-offset: 6px;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* cache-bust: filters-accordion-dirty-2026-07-08 */

/* Acero space cover: shift crop left so kitchen/island stays in frame. */
.lm-surface-material-grid .lm-surface-card[data-material-id="2852"] .lm-surface-card__img {
  object-position: 78% 46% !important;
}

/* Verderame space only: slab is on the right — pin crop to the right edge. */
.lm-surface-materials-explorer[data-lm-view="space"]
  .lm-surface-material-grid
  .lm-surface-card[data-material-id="3877"]
  .lm-surface-card__img {
  object-position: right center !important;
}

/* Taj Mahal Book Match space: book-match panel on the right. */
.lm-surface-materials-explorer[data-lm-view="space"]
  .lm-surface-material-grid
  .lm-surface-card[data-material-id="4084"]
  .lm-surface-card__img {
  object-position: right center !important;
}