/* Liquid-glass control system: one pill shape, one glass recipe per surface, one gold active state.
   Loaded last so it unifies chips, tabs and toggles that earlier sheets styled individually. */
:root {
  --lg-radius: 999px;
  --lg-blur: blur(18px) saturate(180%);
  --lg-ease: cubic-bezier(.2, .8, .2, 1);
  --lg-gold: #dba965;
  --lg-gold-deep: #8a5d1f;
}

/* Controls on light surfaces */
.filter-tab,
.carpet-chip,
.gallery-tab-btn,
#load-more {
  border-radius: var(--lg-radius) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .58)) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(29, 30, 27, .06), 0 6px 18px rgba(29, 30, 27, .08) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  color: #1d1e1b !important;
  transition: transform .25s var(--lg-ease), box-shadow .25s var(--lg-ease), background .25s var(--lg-ease) !important;
}

/* Controls on dark surfaces */
.video-tab-btn,
.calc-preset-btn,
.spc-finish-btn,
.studio-pause,
.lane-pill,
.col-quick-view-btn {
  border-radius: var(--lg-radius) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 22px rgba(0, 0, 0, .28) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  color: #f3f0e8 !important;
  transition: transform .25s var(--lg-ease), box-shadow .25s var(--lg-ease), background .25s var(--lg-ease) !important;
}
.lane-pill { background: linear-gradient(180deg, rgba(28, 55, 68, .82), rgba(28, 55, 68, .66)) !important; }

/* Hover and press feel */
:is(.filter-tab, .carpet-chip, .gallery-tab-btn, #load-more, .video-tab-btn, .calc-preset-btn, .spc-finish-btn, .studio-pause, .lane-pill, .col-quick-view-btn):hover {
  transform: translateY(-1px) !important;
}
:is(.filter-tab, .carpet-chip, .gallery-tab-btn, #load-more, .video-tab-btn, .calc-preset-btn, .spc-finish-btn, .studio-pause, .lane-pill, .col-quick-view-btn):active {
  transform: scale(.97) !important;
}

/* One active state everywhere: gold-tinted glass */
:is(.filter-tab, .carpet-chip, .gallery-tab-btn, .video-tab-btn, .calc-preset-btn, .spc-finish-btn, .lane-pill):is(.active, .is-active, [aria-pressed="true"], [aria-selected="true"]) {
  background: linear-gradient(180deg, rgba(231, 173, 82, .95), rgba(196, 136, 52, .92)) !important;
  border-color: rgba(255, 230, 180, .9) !important;
  color: #1d1e1b !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 22px rgba(196, 136, 52, .35) !important;
}
:is(.filter-tab, .carpet-chip, .gallery-tab-btn, .video-tab-btn, .calc-preset-btn, .spc-finish-btn, .lane-pill):is(.active, .is-active, [aria-pressed="true"], [aria-selected="true"]) span {
  color: inherit !important;
}

/* Main buttons share the same capsule and highlight */
.button {
  border-radius: var(--lg-radius) !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  transition: transform .25s var(--lg-ease), box-shadow .25s var(--lg-ease), filter .25s var(--lg-ease) !important;
}
.button:active { transform: scale(.97) !important; }

@media (prefers-reduced-motion: reduce) {
  :is(.filter-tab, .carpet-chip, .gallery-tab-btn, #load-more, .video-tab-btn, .calc-preset-btn, .spc-finish-btn, .studio-pause, .lane-pill, .col-quick-view-btn, .button):is(:hover, :active) {
    transform: none !important;
  }
}

/* Spec FAQ: answers collapse until opened */
.spec-accordion-box:not(.open) .spec-accordion-body { display: none; }

/* Open mobile menu keeps the header (and its close button) above the overlay */
@media (max-width: 900px) {
  body.menu-open .site-header { z-index: 95 !important; }
}

/* Loading shimmer only while the image is still on its way */
:is(.product-media, .col-card-media, .space-card, .modal-media, .lightbox-media, .studio-room).media-ready { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.product-media, .col-card-media, .space-card, .modal-media, .lightbox-media, .studio-room) { animation: none !important; }
}

/* Phones: 44px touch targets (Apple HIG) and an 11px floor for micro labels */
@media (max-width: 640px) {
  :is(.filter-tab, .carpet-chip, .gallery-tab-btn, .video-tab-btn, .calc-preset-btn, .spc-finish-btn, .studio-pause, .lane-pill, .col-quick-view-btn, .button, #load-more) {
    min-height: 44px !important;
  }
  :is(.text-link, .col-card-cta, .quality-strip-link) {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
  }
  :is(.eyebrow, .card-kicker, .catalog-meta, .form-note, .freight-eyebrow, .lane-badge, .lane-region-title, .layer-badge,
      .product-spec-pill, .sales-role, .sample-badge, .space-card-action, .space-card-tag, .telemetry-label, .telemetry-sub,
      .term-kicker, .tile-caption, .video-badge, .calc-label, .calc-rec-label, .calc-tag, .col-card-badge, .product-category,
      .studio-coordinate, .swatch-label) {
    font-size: 11px !important;
  }
  .quote-form label { font-size: 12px !important; }
}

.calc-estimate-note { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: #c9c4b6; }

/* 3D plank on phones: `scale` composes with the orbit animation's transform, explode depth is tightened,
   and the side labels (which ran off-screen) give way to the layer cards and status line. */
@media (max-width: 640px) {
  .spc-3d-viewport { height: 300px; overflow: hidden; perspective: 900px; }
  .spc-3d-plank-assembly { scale: .84; }
  .spc-3d-plank-assembly.exploded .slab-layer-1 { transform: translateZ(60px); }
  .spc-3d-plank-assembly.exploded .slab-layer-2 { transform: translateZ(36px); }
  .spc-3d-plank-assembly.exploded .slab-layer-3 { transform: translateZ(12px); }
  .spc-3d-plank-assembly.exploded .slab-layer-4 { transform: translateZ(-12px); }
  .spc-3d-plank-assembly.exploded .slab-layer-5 { transform: translateZ(-36px); }
  .spc-3d-plank-assembly.exploded .slab-layer-6 { transform: translateZ(-60px); }
  .spc-3d-plank-assembly .slab-label-tag { display: none !important; }
  .spc-3d-controls { display: flex; flex-wrap: wrap; gap: 10px; }
  .spc-3d-controls .button { flex: 1 1 140px; justify-content: center; }
}

/* Popups are pinned to the screen. An earlier `.product-modal { position: relative !important }` made iOS Safari
   draw open dialogs at the top of the page, so taps further down only dimmed the screen and looked stuck. */
dialog[open]:is(.product-modal, .legal-modal, .po-receipt-modal, .whatsapp-chooser-modal) {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
dialog[open].hd-lightbox { position: fixed !important; inset: 0 !important; margin: 0 !important; }

/* Phones: WhatsApp button sits lower, clear of the home indicator */
@media (max-width: 900px) {
  .whatsapp-float { bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)) !important; right: 14px !important; }
}

/* No leftover focus ring after a tap; keyboard focus still shows */
:is(.space-card, .product-card, .collection-signature-card, .plank-layer):focus:not(:focus-visible) { outline: none !important; box-shadow: none; }

/* Phones: slimmer layer cards */
@media (max-width: 640px) {
  .plank-layer .layer-badge { display: none !important; }
  .plank-layer { padding-top: 16px !important; padding-bottom: 16px !important; }
}

/* Phones: long card stacks become iOS-style swipe rows (one card plus a peek of the next, snapping card by card).
   This cuts the page height sharply without hiding any content. */
@media (max-width: 640px) {
  :is(.spaces-grid, .collections-signature-grid, .terms-grid, .worked-example-grid, .production-timeline-strip,
      .factory-metrics-panel, .story-pillars, .catalog-grid, .promise-list, .process-track) {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: -16px !important;
    padding: 4px 16px 16px !important;
  }
  :is(.spaces-grid, .collections-signature-grid, .terms-grid, .worked-example-grid, .production-timeline-strip,
      .factory-metrics-panel, .story-pillars, .catalog-grid, .promise-list, .process-track)::-webkit-scrollbar { display: none; }
  :is(.spaces-grid, .collections-signature-grid, .terms-grid, .worked-example-grid, .production-timeline-strip,
      .factory-metrics-panel, .story-pillars, .catalog-grid, .promise-list, .process-track) > * {
    flex: 0 0 84% !important;
    max-width: 84% !important;
    min-width: 0;
    scroll-snap-align: start;
    margin: 0 !important;
  }
  .production-timeline-strip > .timeline-arrow { display: none !important; }

  /* Port pills: one horizontal row per region instead of a tall grid */
  .lane-options {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    scrollbar-width: none;
    margin-inline: -16px !important;
    padding: 2px 16px 8px !important;
    scroll-snap-type: x proximity;
  }
  .lane-options::-webkit-scrollbar { display: none; }
  .lane-options > .lane-pill { flex: 0 0 auto !important; width: auto !important; scroll-snap-align: start; }
}

/* Inquiry form: optional fields tucked behind a glass toggle */
.form-more { grid-column: 1 / -1; margin: 6px 0 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); }
.form-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 0 18px; font-weight: 700; font-size: 14px; }
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary span { font-weight: 500; opacity: .7; margin-left: 6px; margin-right: auto; }
.form-more > summary::after { content: "+"; font-size: 20px; line-height: 1; transition: transform .25s var(--lg-ease); }
.form-more[open] > summary::after { transform: rotate(45deg); }
.form-more-fields { padding: 4px 18px 16px; display: grid; gap: 0 18px; }
@media (min-width: 1200px) { .form-more-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-more-fields label:last-child { grid-column: 1 / -1; } }

@media (max-width: 640px) {
  .factory-metrics-panel, .plank-layers-stack { flex-direction: row !important; }
  .plank-layers-stack {
    display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; overflow-x: auto !important;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px !important; padding: 4px 16px 16px !important;
  }
  .plank-layers-stack::-webkit-scrollbar { display: none; }
  .plank-layers-stack > * { flex: 0 0 84% !important; max-width: 84% !important; scroll-snap-align: start; margin: 0 !important; }
}

/* Phones: shipping section trimmed to what a buyer acts on (map, ports, calculator, timeline) */
@media (max-width: 640px) {
  .route-telemetry-hud,
  .landed-cost-worked-example .worked-example-grid,
  .calc-cif-box p { display: none !important; }
  .freight-footer-bar { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
  .freight-footer-bar > * { max-width: none !important; width: 100% !important; }
  .freight-footer-bar .button { justify-content: center; }
}

/* Phones: tighter vertical rhythm between sections */
@media (max-width: 640px) {
  main > section.section:not(.hero) { padding-top: 52px !important; padding-bottom: 52px !important; }
  main > section .section-intro { margin-bottom: 24px !important; }
}