/* Shared catalogue layer. Canonical brand, type, header, focus, and footer styles come from site-core.css + site-active.css. */

.catalog-page {
      --blue: var(--fiord-blue);
      --dark: var(--fiord-dark);
      --ice: var(--fiord-ice);
      --ice-strong: var(--fiord-ice-strong);
      --cream: var(--fiord-cream);
      --red: var(--fiord-red);
      --red-dark: var(--fiord-red-dark);
      --canvas: #f8fafc;
      --muted-2: #8791a5;
      --line-strong: rgba(37, 42, 114, .22);
      --soft-blue: #f0f5fb;
      --soft-blue-2: #e9eff5;
      --soft-cream: #f3ede4;
      --shadow: 0 22px 60px rgba(30, 49, 90, .09);
      --shadow-hover: 0 18px 42px rgba(30, 49, 90, .10);
      --header-h: var(--site-header-height);
      --radius: var(--radius-lg);
      --radius-sm: var(--radius-md);
      font-weight: 400;
    }

    html:has(body.catalog-page) { scroll-padding-top: calc(var(--site-header-height) + 18px); }
    .catalog-page.is-locked { overflow: hidden; }
    .catalog-page button, .catalog-page a { -webkit-tap-highlight-color: transparent; }
    .catalog-page button { color: inherit; }

    .catalog-page .main-nav .is-current::after { transform: scaleX(1); transform-origin: left; }
    .catalog-page .main-nav .is-current { color: var(--blue); }

    .breadcrumb {
      min-height: 48px;
      display: flex;
      align-items: center;
      gap: 9px;
      color: #8791a3;
      font-size: 11px;
      font-weight: 500;
    }
    .breadcrumb b { color: #65718b; font-weight: 600; }

    /* Compact category visual: intentionally not a homepage-sized hero. */
    .catalogue-intro {
      position: relative;
      min-height: 214px;
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
      overflow: hidden;
      background:
        radial-gradient(circle at 78% 4%, rgba(255,255,255,.72), transparent 26%),
        linear-gradient(112deg, var(--soft-cream) 0%, #f1f0ea 52%, #dbe8f3 100%);
      border: 1px solid rgba(37,42,114,.08);
      border-radius: var(--radius);
    }
    .catalogue-intro::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .09;
      background: url("assets/steam-seamless.webp") center / 620px auto repeat;
      mix-blend-mode: screen;
      pointer-events: none;
    }
    .intro-copy {
      position: relative;
      z-index: 2;
      align-self: center;
      padding: 34px clamp(30px, 4.2vw, 62px);
    }
    .intro-copy h1 {
      max-width: 760px;
      margin-bottom: 10px;
      color: var(--dark);
      font-size: clamp(38px, 4.2vw, 64px);
      font-weight: 900;
      line-height: .98;
      letter-spacing: -.035em;
    }
    .intro-copy > p:last-child {
      max-width: 650px;
      margin-bottom: 0;
      color: #42506e;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.6;
    }
    .intro-visual {
      position: relative;
      z-index: 1;
      height: 214px;
      min-height: 214px;
      margin: 0;
      overflow: hidden;
      border-radius: var(--radius) 0 0 var(--radius);
    }
    .intro-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(201,223,239,.94) 0%, rgba(201,223,239,.12) 30%, transparent 58%);
      pointer-events: none;
    }
    .intro-visual img { width: 100%; height: 100%; padding: 16px 24px; object-fit: contain; object-position: center; filter: drop-shadow(0 18px 24px rgba(37,42,114,.11)); }
    .intro-badge {
      position: absolute;
      z-index: 2;
      right: 18px;
      bottom: 18px;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 12px;
      color: var(--dark);
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(255,255,255,.62);
      border-radius: 999px;
      backdrop-filter: blur(8px);
      font-size: 10px;
      font-weight: 700;
    }
    .intro-badge i { width: 7px; height: 7px; background: var(--red); border-radius: 50%; }

    .category-section { padding: 18px 0 16px; }
    .section-line {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 12px;
    }
    .section-line h2 { margin-bottom: 0; font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
    .section-line p { margin-bottom: 1px; color: var(--muted); font-size: 11px; line-height: 1.5; }
    .section-line-copy { min-width: 0; }
    .category-rail-controls { display: flex; flex: 0 0 auto; gap: 8px; }
    .category-rail-controls button {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      padding: 0;
      color: var(--blue);
      background: var(--white);
      border: 1px solid rgba(37,42,114,.18);
      border-radius: 50%;
      cursor: pointer;
      transition: color .2s ease, background .2s ease, transform .2s ease;
    }
    .category-rail-controls button:hover { color: var(--white); background: var(--blue); transform: translateY(-2px); }
    .category-rail-controls button:disabled,
    .category-rail-controls .swiper-button-disabled { opacity: .35; cursor: default; }
    .category-rail-controls button:disabled:hover,
    .category-rail-controls .swiper-button-disabled:hover { color: var(--blue); background: var(--white); transform: none; }
    .category-rail {
      --category-rail-fade: clamp(24px, 3vw, 48px);
      --category-rail-left-edge-alpha: 1;
      --category-rail-right-edge-alpha: 0;
      position: relative;
      width: 100%;
      overflow: hidden;
      padding: 2px 0 8px;
      -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,var(--category-rail-left-edge-alpha)) 0, #000 var(--category-rail-fade), #000 calc(100% - var(--category-rail-fade)), rgba(0,0,0,var(--category-rail-right-edge-alpha)) 100%);
      mask-image: linear-gradient(to right, rgba(0,0,0,var(--category-rail-left-edge-alpha)) 0, #000 var(--category-rail-fade), #000 calc(100% - var(--category-rail-fade)), rgba(0,0,0,var(--category-rail-right-edge-alpha)) 100%);
    }
    .category-rail .swiper-wrapper { align-items: stretch; }
    .category-rail.is-native-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-mask-image: none;
      mask-image: none;
      scrollbar-width: none;
      overscroll-behavior-inline: contain;
      scroll-snap-type: x proximity;
    }
    .category-rail.is-native-scroll::-webkit-scrollbar { display: none; }
    .category-rail.is-native-scroll > .swiper-wrapper { width: max-content; gap: 10px; transform: none !important; }
    .category-rail.is-native-scroll .category-card { scroll-snap-align: start; }
    .category-card {
      width: clamp(132px, 13.2vw, 170px);
      min-width: 132px;
      flex: 0 0 auto;
      aspect-ratio: 1 / 1;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      overflow: hidden;
      padding: 0;
      color: #526078;
      background: #f7f9fb;
      border: 1px solid rgba(37,42,114,.08);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
      text-align: left;
    }
    .category-card:hover { transform: translateY(-2px); color: var(--blue); background: #fff; border-color: rgba(37,42,114,.18); }
    .category-card.is-active { color: var(--blue); background: #f0f5fb; border-color: rgba(37,42,114,.14); }
    .category-card img {
      width: 100%;
      height: 100%;
      min-height: 0;
      padding: 12px 14px 4px;
      object-fit: contain;
      background: #e9eff5;
    }
    .category-card.is-active img { background: #e7f0f8; }
    .category-card span { display: block; padding: 10px 12px 12px; }
    .category-card strong { display: block; font-size: 12px; font-weight: 700; line-height: 1.25; }
    .category-card small { display: block; margin-top: 3px; color: #8791a5; font-size: 9px; font-weight: 500; line-height: 1.25; }
    .category-card.is-active small { color: #66708c; }

    .catalogue-area {
      padding: 8px 0 72px;
      background:
        linear-gradient(180deg, rgba(37,42,114,.055) 0, rgba(37,42,114,0) 96px),
        linear-gradient(180deg, var(--soft-cream) 0, #fff 150px, #fff calc(100% - 180px), #f7f2ea calc(100% - 80px), var(--soft-cream) 100%);
    }
    .catalog-page.has-cart .catalogue-area { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
    html:has(body.catalog-page.has-cart) { scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
    .catalogue-toolbar {
      position: relative;
      z-index: 10;
      min-height: 60px;
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      padding: 8px;
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(37,42,114,.09);
      border-radius: 24px;
      box-shadow: var(--shadow);
    }
    .search-box {
      min-height: 44px;
      display: grid;
      grid-template-columns: 40px 1fr auto;
      align-items: center;
      padding: 0 8px 0 2px;
      background: #f7fafc;
      border: 1px solid rgba(37,42,114,.13);
      border-radius: 13px;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .search-box:focus-within { background: var(--white); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(180,203,230,.32); }
    .search-box svg { width: 19px; margin: auto; fill: none; stroke: var(--blue); stroke-width: 1.7; }
    .search-box input { min-width: 0; width: 100%; height: 40px; padding: 0; color: var(--dark); background: transparent; border: 0; outline: 0; font-size: 15px; }
    .search-box input::placeholder { color: #98a2b2; }
    .search-box input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
    .search-clear {
      min-width: 32px;
      min-height: 32px;
      display: none;
      place-items: center;
      padding: 0;
      color: #7c879b;
      background: transparent;
      border: 0;
      border-radius: 8px;
      cursor: pointer;
      font-size: 18px;
    }
    .search-clear.is-visible { display: grid; }
    .result-summary { white-space: nowrap; }
    .result-summary strong { display: block; color: var(--dark); font-size: 12px; font-weight: 800; }
    .result-summary span { display: block; margin-top: 2px; color: #8791a5; font-size: 10px; }
    .catalog-page .result-summary strong { display: flex; align-items: baseline; gap: 4px; }
    .catalog-page .result-summary .result-count-value {
      flex: 0 0 2ch;
      width: 2ch;
      margin-top: 0;
      color: var(--dark);
      font-size: 12px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .sort-wrap { display: flex; align-items: center; gap: 8px; }
    .sort-wrap label { color: #78849c; font-size: 12px; font-weight: 700; }
    .sort-wrap select {
      min-height: 40px;
      max-width: 190px;
      padding: 0 30px 0 11px;
      color: var(--dark);
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 10px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
    }
    .mobile-filter-button {
      display: none;
      min-height: 40px;
      align-items: center;
      gap: 8px;
      padding: 0 13px;
      color: var(--blue);
      background: var(--soft-blue);
      border: 1px solid rgba(37,42,114,.14);
      border-radius: 10px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
    }
    .mobile-filter-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

    .catalogue-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 26px; align-items: start; }
    .products-main { min-width: 0; }
    .products-results {
      position: relative;
      min-width: 0;
      overflow: hidden;
      transition: height .38s cubic-bezier(.22,.8,.24,1);
    }
    .products-results > .product-grid,
    .products-results > .empty-state { transition: opacity .18s ease, transform .28s ease; }
    .products-results.is-loading > .product-grid:not(.product-skeleton-grid),
    .products-results.is-loading > .empty-state { opacity: 0; transform: translateY(5px); pointer-events: none; }
    .filters {
      position: sticky;
      top: calc(var(--header-h) + 16px);
      padding: 20px;
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(37,42,114,.09);
      border-radius: 24px;
      box-shadow: 0 14px 40px rgba(30,49,90,.055);
    }
    @media (min-width: 901px) {
      .catalog-page--subcategory .filters { max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; scrollbar-width: thin; }
    }
    .filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
    .filter-heading h2 { margin-bottom: 0; font-size: 15px; font-weight: 800; }
    .reset-button {
      padding: 3px 0;
      color: var(--blue);
      background: transparent;
      border: 0;
      cursor: pointer;
      font-size: 10px;
      font-weight: 700;
    }
    .filter-group { padding: 15px 0; border-top: 1px solid rgba(37,42,114,.10); }
    .filter-group h3 { margin-bottom: 11px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
    .filter-option {
      min-height: 32px;
      display: flex;
      align-items: center;
      gap: 9px;
      color: #5e6678;
      cursor: pointer;
      font-size: 11px;
      line-height: 1.35;
    }
    .filter-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
    .filter-option span { flex: 1; }
    .filter-option small { color: #939db0; font-size: 10px; }
    .filter-details { border-top: 1px solid rgba(37,42,114,.10); }
    .filter-details summary {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--blue);
      cursor: pointer;
      list-style: none;
      font-size: 11px;
      font-weight: 800;
    }
    .filter-details summary::-webkit-details-marker { display: none; }
    .filter-details summary::after { content: "+"; font-size: 16px; font-weight: 500; }
    .filter-details[open] summary::after { content: "−"; }
    .filter-details p { margin: 0 0 12px; color: #78849c; font-size: 10px; line-height: 1.55; }
    .filter-pill {
      min-height: 31px;
      display: inline-flex;
      align-items: center;
      margin: 0 4px 6px 0;
      padding: 0 9px;
      color: #66738b;
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(37,42,114,.11);
      border-radius: 999px;
      font-size: 10px;
      font-weight: 600;
    }

    .catalog-page--root .catalogue-intro { margin-bottom: 16px; }

    .catalog-page--root .category-tree { display: grid; gap: 2px; }
    .catalog-page--root .category-tree-section { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(37,42,114,.10); }
    .catalog-page--root .category-tree-label { display: flex; align-items: baseline; gap: 7px; margin-bottom: 5px; color: var(--blue); font-size: 11px; font-weight: 800; }
    .catalog-page--root .category-tree-label span { flex: 1; }
    .catalog-page--root .category-tree-label small { color: #939db0; font-size: 10px; font-weight: 600; }
    .catalog-page--root .category-tree-item {
      width: 100%; min-height: 30px; display: flex; align-items: center; gap: 8px; padding: 5px 0;
      color: #4f5b72; background: transparent; border: 0; cursor: pointer; font-size: 11px; font-weight: 600; text-align: left;
    }
    .catalog-page--root .category-tree-item::before { content: "✳"; flex: 0 0 auto; color: #4f8bc8; font-size: 10px; }
    .catalog-page--root .category-tree-item span { flex: 1; min-width: 0; }
    .catalog-page--root .category-tree-item small { flex: 0 0 auto; color: #939db0; font-size: 9px; font-weight: 500; }
    .catalog-page--root .category-tree-item.is-child { min-height: 27px; padding-left: 16px; font-size: 11px; }
    .catalog-page--root .category-tree-item.is-child::before { content: "•"; font-size: 12px; }
    .catalog-page--root .category-tree-item:hover, .catalog-page--root .category-tree-item:focus-visible { color: var(--blue); }
    .catalog-page--root .category-tree-item.is-active { color: var(--red); font-weight: 800; }
    .catalog-page--root .category-tree-item.is-active::before { color: var(--red); }
    .catalog-page--root .product-price { display: block; margin: -2px 0 10px; color: var(--blue); font-size: 16px; font-weight: 800; }

    .products-head {
      min-height: 46px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 14px;
    }
    .products-head h2 { margin: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.035em; }
    .products-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
    .active-filter { color: var(--blue); }
    .view-toggle { display: flex; align-items: center; gap: 4px; }
    .view-toggle button {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      padding: 0;
      color: #8590a4;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 10px;
      cursor: pointer;
    }
    .view-toggle button.is-active { color: var(--white); background: var(--blue); border-color: var(--blue); }
    .view-toggle svg { width: 15px; fill: currentColor; }

    .quick-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 16px;
    }
    .quick-filter {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 13px;
      color: #66708c;
      background: #f7f9fb;
      border: 1px solid rgba(37,42,114,.08);
      border-radius: 999px;
      cursor: pointer;
      font-size: 10px;
      font-weight: 700;
      transition: color .18s ease, background .18s ease, border-color .18s ease;
    }
    .quick-filter:hover { border-color: rgba(37,42,114,.28); color: var(--blue); }
    .quick-filter.is-active { color: var(--blue); background: #f0f5fb; border-color: rgba(37,42,114,.14); }

    .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
    .product-grid.is-compact { grid-template-columns: 1fr; }
    .product-grid.is-compact .product-card { display: grid; grid-template-columns: 176px minmax(0, 1fr); }
    .product-grid.is-compact .product-media { min-width: 0; width: 100%; max-width: 100%; min-height: 176px; height: 100%; }
    .product-grid.is-compact .product-media img { min-height: 176px; }
    .product-grid.is-compact .product-body { padding: 17px 18px 15px; }
    .product-skeleton-grid {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .18s ease, visibility 0s linear .18s;
    }
    .products-results.is-loading > .product-skeleton-grid {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }
    .skeleton-card {
      min-width: 0;
      overflow: hidden;
      background: #f7f9fb;
      border: 1px solid rgba(37,42,114,.08);
      border-radius: 18px;
    }
    .skeleton-media,
    .skeleton-line,
    .skeleton-action {
      background: linear-gradient(100deg, #e8edf2 20%, #f5f8fa 38%, #e8edf2 56%);
      background-size: 220% 100%;
      animation: skeleton-shimmer 1.15s linear infinite;
    }
    .skeleton-media { aspect-ratio: 1.12 / 1; }
    .skeleton-body { padding: 15px 16px 14px; }
    .skeleton-line { height: 10px; border-radius: 999px; }
    .skeleton-line + .skeleton-line { margin-top: 10px; }
    .skeleton-line.is-kicker { width: 35%; height: 8px; }
    .skeleton-line.is-title { width: 82%; height: 16px; margin-top: 12px; }
    .skeleton-line.is-title-short { width: 62%; height: 16px; }
    .skeleton-action { width: 100%; height: 36px; margin: 12px 0 10px; border-radius: 999px; }
    .skeleton-line.is-meta { width: 48%; height: 9px; margin-top: 9px; }
    .product-skeleton-grid.is-compact .skeleton-card { display: grid; grid-template-columns: 176px minmax(0, 1fr); }
    .product-skeleton-grid.is-compact .skeleton-media { min-height: 176px; height: 100%; aspect-ratio: auto; }
    .product-skeleton-grid.is-compact .skeleton-body { padding: 17px 18px 15px; }
    .product-skeleton-grid.is-compact .skeleton-action { width: 146px; }
    @keyframes skeleton-shimmer { to { background-position-x: -220%; } }
    .product-card {
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #f7f9fb;
      border: 1px solid rgba(37,42,114,.08);
      border-radius: 18px;
      transition: transform .2s ease, border-color .2s ease;
    }
    .product-card[hidden] { display: none; }
    .product-card:hover { transform: translateY(-2px); border-color: rgba(37,42,114,.16); }
    .product-media {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1.12 / 1;
      background: #e9eff5;
    }
    .product-media img { width: 100%; height: 100%; padding: 12px; object-fit: contain; transition: transform .34s ease; }
    .product-card:hover .product-media img { transform: scale(1.025); }
    .card-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      min-height: 26px;
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      color: var(--blue);
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(255,255,255,.6);
      border-radius: 999px;
      backdrop-filter: blur(8px);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .02em;
    }
    .product-body { min-width: 0; flex: 1; display: flex; flex-direction: column; padding: 15px 16px 14px; }
    .product-kicker { margin-bottom: 6px; color: #78849c; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .product-card h3 { min-height: 46px; margin-bottom: 12px; font-size: 18px; font-weight: 750; line-height: 1.25; letter-spacing: -.02em; }
    .product-meta {
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 0;
      padding-top: 9px;
      color: #78849c;
      border-top: 1px solid rgba(37,42,114,.09);
      font-size: 12px;
    }
    .product-link {
      padding: 0;
      color: var(--blue);
      background: transparent;
      border: 0;
      cursor: pointer;
      font-size: 12px;
      font-weight: 750;
      white-space: nowrap;
    }
    .product-link:hover { color: var(--dark); }

    .catalog-page .product-add-button {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin: auto 0 10px;
      padding: 0 13px;
      color: var(--white);
      background: var(--blue);
      border: 1px solid var(--blue);
      border-radius: 999px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 800;
      transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
    }
    .product-add-button::before { content: "+"; font-size: 16px; font-weight: 500; line-height: 1; }
    .product-add-button:hover:not(:disabled) { transform: translateY(-1px); background: var(--dark); border-color: var(--dark); }
    .product-add-button.is-added {
      color: var(--blue);
      background: var(--soft-blue);
      border-color: rgba(37,42,114,.12);
      cursor: default;
    }
    .product-add-button.is-added::before { content: "✓"; font-size: 12px; font-weight: 800; }
    .product-grid.is-compact .product-add-button { align-self: flex-start; min-width: 146px; }

    .catalog-page .floating-cart-button {
      position: fixed;
      z-index: 70;
      right: clamp(16px, 2vw, 28px);
      bottom: calc(clamp(16px, 2vw, 28px) + env(safe-area-inset-bottom));
      min-height: 54px;
      display: inline-flex;
      align-items: center;
      gap: 11px;
      padding: 0 11px 0 20px;
      color: var(--white);
      background: var(--blue);
      border: 0;
      border-radius: 999px;
      box-shadow: 0 16px 38px rgba(37,42,114,.28);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(18px) scale(.94);
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
      transition: opacity .24s ease, transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s linear .34s, background .18s ease;
    }
    .floating-cart-button.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
      transition-delay: 0s;
    }
    .floating-cart-button.is-visible:hover { transform: translateY(-2px); background: var(--dark); }
    .floating-cart-button strong {
      min-width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      padding: 0 8px;
      color: var(--blue);
      background: var(--white);
      border-radius: 999px;
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .empty-state {
      display: none;
      min-height: 340px;
      place-items: center;
      padding: 34px;
      text-align: center;
      background: linear-gradient(150deg, var(--soft-blue), #fff 65%);
      border: 1px dashed rgba(37,42,114,.19);
      border-radius: 22px;
    }
    .empty-state.is-visible { display: grid; }
    .empty-state-inner { max-width: 430px; }
    .empty-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      margin: 0 auto 16px;
      color: var(--blue);
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 50%;
      box-shadow: 0 10px 30px rgba(30,49,90,.08);
      font-size: 24px;
    }
    .empty-state h3 { margin-bottom: 7px; font-size: 18px; font-weight: 800; }
    .empty-state p { margin-bottom: 16px; color: var(--muted); font-size: 11px; line-height: 1.55; }
    .secondary-button {
      min-height: 38px;
      padding: 0 14px;
      color: var(--blue);
      background: var(--white);
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      cursor: pointer;
      font-size: 10px;
      font-weight: 700;
    }

    .catalog-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 24px;
    }
    .catalog-pagination[hidden] { display: none; }
    .catalog-pagination-pages { display: flex; gap: 6px; }
    .catalog-pagination button {
      min-width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      padding: 0 10px;
      color: #66708c;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 10px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 750;
    }
    .catalog-pagination button:hover:not(:disabled),
    .catalog-pagination button.is-active { color: var(--white); background: var(--blue); border-color: var(--blue); }
    .catalog-pagination button:disabled { cursor: default; opacity: .35; }

    .prototype-note {
      margin-top: 28px;
      padding: 14px 16px;
      color: #7b8799;
      background: rgba(255,255,255,.68);
      border: 1px solid rgba(37,42,114,.08);
      border-radius: 14px;
      font-size: 10px;
      line-height: 1.55;
    }

    .footer-inner {
      min-height: 122px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      color: var(--muted);
      font-size: 12px;
    }
    .footer-inner img { width: auto; height: 54px; opacity: .92; }
    .footer-inner p { margin: 0; }

    /* Filter sheet */
    .filter-backdrop {
      position: fixed;
      z-index: 79;
      inset: 0;
      display: none;
      background: rgba(22,29,53,.46);
      backdrop-filter: blur(3px);
    }
    .filter-backdrop.is-visible { display: block; }
    .filter-sheet {
      position: fixed;
      z-index: 80;
      right: 0;
      bottom: 0;
      left: 0;
      max-height: min(82vh, 660px);
      display: none;
      overflow: auto;
      padding: 12px 16px 22px;
      background: var(--white);
      border-radius: 24px 24px 0 0;
      box-shadow: 0 -24px 70px rgba(22,29,53,.18);
    }
    .filter-sheet.is-open { display: block; animation: sheet-in .22s ease both; }
    @keyframes sheet-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
    .sheet-grip { width: 42px; height: 4px; margin: 0 auto 14px; background: #d7dce4; border-radius: 999px; }
    .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
    .sheet-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
    .sheet-close { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: var(--blue); background: var(--soft-blue); border: 0; border-radius: 50%; cursor: pointer; font-size: 21px; }
    .sheet-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
    .sheet-option {
      min-height: 48px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 0 11px;
      color: #5f6b82;
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
    }
    .sheet-option input { accent-color: var(--blue); }
    .sheet-actions { position: sticky; bottom: -22px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin: 18px -16px -22px; padding: 12px 16px 18px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
    .sheet-actions button { min-height: 44px; border-radius: 12px; cursor: pointer; font-size: 11px; font-weight: 700; }
    .sheet-reset { color: var(--blue); background: var(--white); border: 1px solid var(--line-strong); }
    .sheet-apply { color: var(--white); background: var(--blue); border: 1px solid var(--blue); }

    @media (max-width: 1180px) {
      .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .product-grid.is-compact { grid-template-columns: 1fr; }
    }

    @media (min-width: 901px) and (max-width: 1020px) {
      .products-head { align-items: flex-start; flex-wrap: wrap; }
      .products-head-actions { width: 100%; justify-content: space-between; }
    }

    @media (max-width: 900px) {
      .catalogue-intro { grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); min-height: 198px; }
      .intro-copy { padding: 26px 32px; }
      .intro-copy h1 { font-size: clamp(36px, 6vw, 52px); }
      .intro-visual { height: 198px; min-height: 198px; }
      .catalogue-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
      .products-head-actions { gap: 8px; }
      .catalogue-layout { grid-template-columns: 1fr; }
      .filters { display: none; }
      .mobile-filter-button { display: inline-flex; }
      .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .quick-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
      .quick-filter { flex: 0 0 auto; }
      .prototype-note { margin-top: 22px; }
    }

    @media (max-width: 720px) {
      .catalogue-intro { grid-template-columns: 1fr; min-height: 0; }
      .intro-copy { padding: 28px 26px 24px; }
      .intro-copy h1 { max-width: 520px; font-size: clamp(35px, 9vw, 48px); }
      .intro-copy > p:last-child { font-size: 12px; }
      .intro-visual { height: 150px; min-height: 150px; max-height: 170px; border-radius: 20px 20px 0 0; order: -1; }
      .intro-visual::after { background: linear-gradient(180deg, transparent 48%, rgba(222,237,248,.88) 100%); }
      .intro-badge { right: 12px; bottom: 12px; }
      .section-line { align-items: center; flex-direction: row; gap: 16px; }
      .section-line p { display: none; }
      .catalogue-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
      .products-head { align-items: flex-start; flex-wrap: wrap; }
      .products-head-actions { width: 100%; justify-content: space-between; }
      .sort-wrap label { display: none; }
      .sort-wrap select { width: 126px; max-width: 126px; }
      .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .product-grid.is-compact { grid-template-columns: 1fr; }
      .product-grid.is-compact .product-card { grid-template-columns: 132px minmax(0, 1fr); }
      .product-grid.is-compact .product-media,
      .product-grid.is-compact .product-media img { min-height: 132px; }
      .product-skeleton-grid.is-compact .skeleton-card { grid-template-columns: 132px minmax(0, 1fr); }
      .product-skeleton-grid.is-compact .skeleton-media { min-height: 132px; }
    }

    @media (max-width: 520px) {
      .breadcrumb { min-height: 42px; }
      .catalogue-intro { border-radius: 20px; }
      .intro-copy { padding: 24px 20px 22px; }
      .intro-copy h1 { font-size: clamp(34px, 10.5vw, 44px); }
      .intro-visual { height: 132px; min-height: 132px; }
      .category-section { padding-top: 18px; }
      .category-rail { -webkit-mask-image: none; mask-image: none; }
      .category-rail-controls button { width: 40px; height: 40px; }
      .category-card { width: calc((100% - 10px) / 2); min-width: calc((100% - 10px) / 2); aspect-ratio: 1 / 1; border-radius: 18px; }
      .category-card img { width: 100%; height: 100%; padding: 10px 12px 2px; }
      .category-card span { padding: 8px 10px 10px; }
      .catalogue-area { padding-bottom: 54px; }
      .catalog-page.has-cart .catalogue-area { padding-bottom: calc(134px + env(safe-area-inset-bottom)); }
      .catalogue-toolbar { position: sticky; top: calc(var(--header-h) + 6px); grid-template-columns: 1fr auto; margin-inline: -4px; padding: 8px; border-radius: 16px; }
      .search-box { min-height: 42px; grid-template-columns: 36px 1fr auto; }
      .search-box input { font-size: 14px; }
      .mobile-filter-button { min-height: 42px; padding: 0 11px; }
      .mobile-filter-button span { display: none; }
      .products-head { min-height: 40px; gap: 8px; margin-bottom: 12px; }
      .products-head h2 { font-size: 22px; }
      .products-head-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
      .result-summary { display: block; min-width: 0; white-space: normal; }
      .sort-wrap { display: flex; }
      .sort-wrap select { width: min(168px, 54vw); max-width: 168px; min-height: 38px; padding-right: 26px; }
      .view-toggle { display: none; }
      .product-grid,
      .product-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .product-grid.is-compact .product-card { display: flex; flex-direction: column; }
      .product-grid.is-compact .product-media { min-height: 0; height: auto; }
      .product-grid.is-compact .product-media img { min-height: 0; }
      .product-skeleton-grid.is-compact .skeleton-card { display: block; }
      .product-skeleton-grid.is-compact .skeleton-media { min-height: 0; height: auto; aspect-ratio: 1 / 1; }
      .product-skeleton-grid.is-compact .skeleton-body { padding: 11px 11px 10px; }
      .product-media { aspect-ratio: 1 / 1; }
      .card-tag { top: 7px; left: 7px; min-height: 22px; padding: 0 7px; font-size: 8px; }
      .product-body,
      .product-grid.is-compact .product-body { padding: 11px 11px 10px; }
      .product-kicker { font-size: 9px; }
      .product-card h3 { min-height: 38px; margin-bottom: 8px; font-size: 14px; }
      .product-meta { min-height: 26px; padding-top: 7px; font-size: 9px; }
      .product-link { font-size: 0; }
      .product-link::after { content: "→"; font-size: 12px; }
      .catalog-page .product-add-button { min-height: 32px; margin-bottom: 8px; padding: 0 8px; font-size: 9px; }
      .skeleton-action { height: 32px; margin: 8px 0; }
      .product-skeleton-grid.is-compact .skeleton-action { width: 100%; }
      .product-grid.is-compact .product-add-button { align-self: stretch; min-width: 0; }
      .catalog-page .floating-cart-button { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); min-height: 50px; padding: 0 9px 0 17px; }
      .floating-cart-button strong { min-width: 30px; height: 30px; }
      .footer-inner { min-height: 112px; align-items: flex-start; justify-content: center; flex-direction: column; }
      .sheet-options { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
      .skeleton-media, .skeleton-line, .skeleton-action { animation: none !important; }
    }