/* ===== PRODUCT DETAIL MODAL ===== */
.product-modal {
  position: fixed;
  inset: 0;
  z-index: 60000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}
.product-modal.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* Backdrop */
.product-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

/* Content card — two-column grid on desktop (image | body), stacks on mobile */
.product-modal-content {
  position: relative;
  width: 92%;
  max-width: min(1180px, 92vw);
  height: auto;
  max-height: 95vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: scale(0.7);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Close button */
.product-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s var(--ease-expo);
}
.product-modal-close:hover {
  transform: rotate(90deg);
}

/* Image area — left column */
.product-modal-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 16px 0 0 16px;
  padding: clamp(12px, 1.4vw, 20px);
  overflow: hidden;
}

/* CTA pill — anchored to the right column bottom, toggles desc <-> form.
   margin-top: auto pins it to the bottom of the flex column body so its
   visual position doesn't shift when config/price collapse out of flow
   during desc <-> form transitions. */
.product-modal-cta {
  --pill-h: 60px;
  align-self: flex-end;
  min-width: 240px;
  padding: 0 40px;
  margin-top: auto;
  flex-shrink: 0;
}
.product-modal-cta .btn-pill-text {
  font-size: 16px;
  letter-spacing: 0.12em;
}
.product-modal-image svg,
.product-modal-image img {
  width: 100%;
  height: 100%;
  max-height: 720px;
  object-fit: contain;
  border-radius: 20px;
}

/* ===== IMAGE SLIDER (multi-photo gallery inside modal image area) =====
   Two absolutely-positioned <img> layers swapped by GSAP for crossfade-with-slide.
   Wrapper provides the relative coordinate system; .product-modal-slider-stage
   pins both layers into the same box so they overlay perfectly during transitions. */
.product-modal-image-slider {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-modal-slider-stage {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.product-modal-image-slider img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  max-height: 720px;
  object-fit: contain;
  border-radius: 20px;
  /* GSAP owns opacity + transform — no CSS transition (would fight the tween) */
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Prev / next arrows — circular, centered vertically inside image area */
.product-modal-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  border-radius: 50%;
  color: var(--dark);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease-expo), background 0.3s var(--ease-expo), transform 0.3s var(--ease-expo);
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.product-modal-slider-arrow:hover {
  opacity: 1;
  background: #fff;
}
.product-modal-slider-arrow svg {
  width: 22px;
  height: 22px;
  border-radius: 0;
}
.product-modal-slider-arrow--prev { left: 14px; }
.product-modal-slider-arrow--next { right: 14px; }

/* Dark variant — used when card is from .section--dark (e.g. chairs) */
.product-modal-image-slider--dark .product-modal-slider-arrow {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.product-modal-image-slider--dark .product-modal-slider-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Counter «1 / 3» — bottom right, small dark pill */
.product-modal-slider-counter {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 12px;
  border-radius: 100px;
  z-index: 2;
  pointer-events: none;
}

/* Body — right column.
   overflow-y: auto so the right column itself becomes the scroll container on
   shorter laptops (~13", ~800px viewport). Without it, the body's intrinsic
   height (config + price + hint + CTA + messengers) can exceed 88vh and the
   parent .product-modal-content's vertical centering visually clips the title
   off the top of the viewport. With auto here, the column scrolls internally
   so the title is always anchored at the top of the body. */
.product-modal-body {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px) clamp(32px, 3.2vw, 44px) clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  /* Override the global ::-webkit-scrollbar { width: 0 } from main.css —
     when the body overflows on shorter laptops, the user needs a visible affordance
     telling them content is hidden below. Thin, low-contrast handlebar only. */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
.product-modal-body::-webkit-scrollbar {
  width: 6px;
}
.product-modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.product-modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}
.product-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Tag */
.product-modal-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid rgba(58, 143, 163, 0.35);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.product-modal-tag:empty {
  display: none;
}

/* Name */
.product-modal-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 400;
  color: var(--dark);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 8px;
}

/* Description */
.product-modal-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 300;
  color: var(--warm);
  line-height: 1.55;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

/* ===== INFO STATE STACK (desc <-> form crossfade — driven by GSAP) =====
   Opacity, transform, and absolute positioning are managed by setInfoState()
   in catalog.js. Only structural rules live here. */
.product-modal-info {
  position: relative;
  margin-bottom: 4px;
}
.product-modal-info .info-state {
  will-change: opacity, transform;
}
/* Reset bottom margin on stacked desc — info wrapper owns the spacing now */
.product-modal-info .product-modal-desc {
  margin: 0;
}
/* Reset margin on form so it sits flush inside the stack */
.product-modal-info .product-modal-form {
  margin: 0;
}

/* Price */
.product-modal-price {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  display: inline-block;
  line-height: 1;
  padding: 10px 20px;
  text-align: center;
  border: 1.5px solid var(--accent);
  border-radius: 14px;
  background: rgba(58, 143, 163, 0.04);
  margin-top: 4px;
}

/* Hint — sits between price and CTA. Matches center-column alignment of the
   price/CTA stack. Hidden alongside price when the form opens (data-state="form")
   and during the success state. */
.product-modal-hint {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(13px, 1.4vw, 15px);
  color: var(--warm);
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 0 0 10px;
}

/* Form inside modal */
.product-modal-form .form-group {
  margin-bottom: 14px;
}
.product-modal-form .form-group label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--warm);
  margin-bottom: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.product-modal-form .form-group input {
  width: 100%;
  padding: 11px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  background: #fff;
  border: 1.5px solid #e0ddd8;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.4s var(--ease-expo), box-shadow 0.4s var(--ease-expo);
  letter-spacing: -0.02em;
  box-sizing: border-box;
}
.product-modal-form .form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58, 143, 163, 0.08);
}
.product-modal-form .form-submit {
  width: 100%;
  padding: 17px 28px;
  background: var(--accent);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: background 0.85s var(--ease-expo), transform 0.4s var(--ease-expo);
  margin-top: clamp(8px, 1vw, 12px);
  margin-bottom: 0;
}
.product-modal-form .form-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .product-modal-content {
    width: 94%;
    max-width: 520px;
    height: auto;
    max-height: 95vh;
    grid-template-columns: 1fr;
  }
  /* Modal image area on mobile — fixed height (NOT per-orientation aspect-ratio).
     The previous aspect-ratio approach (4/3 for tables, 3/4 for chairs) made the
     image area variable-height; combined with grid stacking that produced layouts
     where the landscape-table image visually appeared to encroach on the body text.
     A single predictable height + object-fit: contain keeps both orientations safe:
     landscape gets some air top/bottom, portrait gets some air left/right, and the
     body always begins at a stable y-offset. aspect-ratio: auto disables the desktop
     fallback so this height rule actually wins. */
  .product-modal-image {
    height: 44vh;
    min-height: 240px;
    max-height: 380px;
    aspect-ratio: auto;
    border-radius: 16px 16px 0 0;
    padding: 16px;
  }
  /* Orientation overrides removed on mobile — same fixed box for tables and chairs. */
  .product-modal-cta {
    --pill-h: 54px;
    align-self: stretch;
    min-width: 0;
    padding: 0 24px;
  }
  .product-modal-cta .btn-pill-text {
    font-size: 15px;
  }
  .product-modal-image svg,
  .product-modal-image img {
    max-height: 100%;
  }
  .product-modal-image-slider img {
    max-height: 100%;
  }
  .product-modal-slider-arrow {
    width: 36px;
    height: 36px;
    /* iOS memory mitigation — drop blur backdrop on phones (see hero notes). */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.92);
  }
  .product-modal-image-slider--dark .product-modal-slider-arrow {
    background: rgba(0, 0, 0, 0.7);
  }
  .product-modal-slider-counter {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.7);
  }
  .product-modal-slider-arrow svg {
    width: 18px;
    height: 18px;
  }
  .product-modal-slider-arrow--prev { left: 8px; }
  .product-modal-slider-arrow--next { right: 8px; }
  .product-modal-slider-counter {
    bottom: 10px;
    right: 10px;
    font-size: 11px;
    padding: 4px 10px;
  }
  .product-modal-body {
    padding: 22px 24px 36px;
  }
  .product-modal-tag {
    margin-bottom: 10px;
  }
  .product-modal-name {
    font-size: 28px;
    margin-bottom: 10px;
  }
  .product-modal-desc {
    font-size: 16px;
    margin-bottom: 14px;
  }
  .product-modal-price {
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 1;
    padding: 10px 20px;
    border-radius: 12px;
  }
  .product-modal-hint {
    font-size: 13px;
    margin-bottom: 12px;
  }
  /* Success block — match body padding on mobile so it fills the same area. */
  .product-modal-success {
    inset: 22px 24px 36px;
  }
  .product-modal-success-back {
    --pill-h: 48px;
    min-width: 0;
    align-self: stretch;
  }
}

@media (max-width: 480px) {
  .product-modal-body {
    padding: 18px 20px 32px;
  }
  /* Tighter padding on small phones — height is inherited from the 768px fixed-height rule */
  .product-modal-image {
    padding: 12px;
  }
  .product-modal-name {
    font-size: 24px;
  }
  .product-modal-price {
    font-size: 16px;
    margin-bottom: 8px;
    line-height: 1;
    padding: 9px 18px;
    border-radius: 11px;
  }
  .product-modal-hint {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .product-modal-success {
    inset: 18px 20px 32px;
  }
}

/* ===== SUCCESS STATE =====
   Static block in markup (NOT injected via innerHTML — that destroyed the form
   node and orphaned every getElementById ref, breaking subsequent submits and
   leaving the success message stuck on the next card opened).
   Visibility is driven by [data-state="success"] on .product-modal-body. Inside
   the body, the success block is absolute-positioned + opacity:0 by default and
   fades in/out via CSS transitions on opacity. When in success state we hide the
   tag/name/info/config/price/cta + the back-button is the only interactive element. */
.product-modal-success {
  position: absolute;
  inset: clamp(22px, 2.4vw, 32px) clamp(32px, 3.2vw, 44px) clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-expo), visibility 0.5s var(--ease-expo);
}
.product-modal-body[data-state="success"] .product-modal-success {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Hide non-success siblings while in success state. .messenger-links is now a
   direct child of .product-modal-body (moved out of the form), so it must be
   listed here explicitly — it no longer disappears as a side-effect of the form
   hiding. Visible in both desc- and form-state, hidden only on success. */
.product-modal-body[data-state="success"] .product-modal-tag,
.product-modal-body[data-state="success"] .product-modal-name,
.product-modal-body[data-state="success"] .product-modal-info,
.product-modal-body[data-state="success"] .product-modal-config,
.product-modal-body[data-state="success"] .product-modal-price,
.product-modal-body[data-state="success"] .product-modal-hint,
.product-modal-body[data-state="success"] .product-modal-cta,
.product-modal-body[data-state="success"] .messenger-links {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-expo), visibility 0.4s var(--ease-expo);
}

/* Hide hint when form is open — mirrors the GSAP-driven collapse of price/config
   in setInfoState() by taking the hint out of layout flow (position: absolute)
   so its height collapses smoothly while opacity fades in sync with siblings,
   instead of snap-collapsing height/margin. Pure CSS so JS stays untouched. */
.product-modal-body[data-state="form"] .product-modal-hint {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-expo), visibility 0.35s var(--ease-expo);
}
.product-modal-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto clamp(20px, 3vh, 28px);
  border-radius: 50%;
  background: rgba(58, 143, 163, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.product-modal-success-icon svg {
  width: 32px;
  height: 32px;
}
.product-modal-success h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 400;
  color: var(--accent);
  margin: 0 0 12px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.product-modal-success p {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(16px, 1.35vw, 19px);
  color: var(--warm);
  font-weight: 300;
  line-height: 1.5;
  margin: 0 0 clamp(24px, 3.5vh, 36px);
  max-width: 360px;
}
/* Back button — outline pill, smaller scale than the primary CTA. */
.product-modal-success-back {
  --pill-h: 50px;
  min-width: 220px;
  padding: 0 32px;
}
.product-modal-success-back .btn-pill-text {
  font-size: 14px;
  letter-spacing: 0.12em;
}

/* Force visibility — prevent global GSAP form animations from hiding modal form */
.product-modal-form .form-group,
.product-modal-form .form-submit {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   PRODUCT CONFIGURATOR (hybrid: selects + visual swatches)
   Inserted between .product-modal-desc and .product-modal-price.
   Hidden via [hidden] when card has no slug in TABLES_PRICING.
   ============================================================ */
.product-modal-config {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 2px 0 16px;
}
.product-modal-config[hidden] {
  display: none;
}

/* Top row — two selects side by side */
.config-row--selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.config-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.config-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm);
}

.config-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 16px; /* iOS zoom guard */
  letter-spacing: -0.01em;
  color: var(--dark);
  padding: 12px 40px 12px 14px;
  background: #fff;
  border: 1px solid rgba(142, 120, 103, 0.3);
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.4s var(--ease-expo), box-shadow 0.4s var(--ease-expo);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%238e7867' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  text-overflow: ellipsis;
}
.config-select:hover,
.config-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58, 143, 163, 0.08);
}
.config-select option[disabled] {
  color: #b8b3ac;
}

/* Swatch group (frame color, glass type, ceramic type) */
.config-swatches {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.config-swatches[hidden] {
  display: none;
}

.config-swatches-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

.config-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  font-family: inherit;
  transition: transform 0.4s var(--ease-expo);
}
.config-swatch:hover {
  transform: translateY(-2px);
}
.config-swatch[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.config-swatch-chip {
  position: relative;
  display: block;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.4s var(--ease-expo);
}
.config-swatch:hover .config-swatch-chip {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.config-swatch.is-active .config-swatch-chip {
  box-shadow: 0 0 0 2px var(--accent), 0 6px 16px rgba(58, 143, 163, 0.18);
}

/* Round (frame color) */
.config-swatch--circle .config-swatch-chip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}
.config-swatch--circle:hover .config-swatch-chip {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14), inset 0 1px 2px rgba(255, 255, 255, 0.25);
}
.config-swatch--circle.is-active .config-swatch-chip {
  box-shadow: 0 0 0 2px var(--accent), 0 6px 16px rgba(58, 143, 163, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

/* Square (glass / ceramic surface) */
.config-swatch--square .config-swatch-chip {
  width: 56px;
  height: 56px;
  border-radius: 10px;
}

.config-swatch-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.3;
  text-align: center;
  max-width: 90px;
  white-space: pre-line; /* honors \n inside option.name so labels can break to 2 lines */
}

.config-swatch-price {
  display: block;
  white-space: nowrap;          /* keep digits + ₽ on one line */
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: -0.01em;
  color: var(--warm);
  opacity: 0.85;
  text-align: center;
  margin-top: 2px;
}

/* Frame color fills */
.config-frame--black {
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
}
.config-frame--graphite {
  background: linear-gradient(135deg, #4a4a4a, #2e2e2e);
}
.config-frame--gold {
  background: linear-gradient(135deg, #e8c878, #b8923a 55%, #d4a850);
}
.config-frame--bronze {
  background: linear-gradient(135deg, #b08868, #8b5a3c 55%, #a07050);
}

/* Glass fills */
.config-glass--standard {
  background: linear-gradient(135deg, rgba(220, 230, 235, 0.55) 0%, rgba(245, 250, 252, 0.7) 100%);
  border: 1px solid rgba(142, 120, 103, 0.18);
}
.config-glass--optiwhite {
  background: linear-gradient(135deg, rgba(220, 235, 240, 0.85) 0%, rgba(255, 255, 255, 0.95) 100%);
  border: 1px solid rgba(58, 143, 163, 0.22);
}
.config-glass--matte {
  background: linear-gradient(135deg, #d8e0e4 0%, #eef2f5 100%);
}

/* Ceramic fills */
.config-ceramic--matte {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='40' height='40' filter='url(%23n)'/></svg>"),
    #e8e3dd;
}
.config-ceramic--glossy {
  background: linear-gradient(135deg, #ffffff 0%, #d8d8d8 50%, #ffffff 100%);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .product-modal-config {
    gap: 20px;
    margin: 2px 0 18px;
  }
  .config-row--selects {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .config-swatches-row {
    gap: 10px;
  }
  .config-swatch--circle .config-swatch-chip {
    width: 40px;
    height: 40px;
  }
  .config-swatch--square .config-swatch-chip {
    width: 50px;
    height: 50px;
  }
  .config-swatch-name {
    font-size: 10px;
    max-width: 80px;
  }
  .config-swatch-price {
    font-size: 10px;
  }
}

/* ============================================================
   FORM-STATE — collapse of config + price is animated by GSAP
   in setInfoState() (catalog.js). Only the CTA outline restyle
   remains as a static state-driven CSS rule.
   ============================================================ */

/* CTA in form-state — quieter outline pill ("Скрыть форму" is a secondary action).
   margin-top: auto preserved so the CTA stays pinned to the body bottom across states. */
.product-modal-body[data-state="form"] .product-modal-cta {
  --pill-h: 44px;
  background: transparent;
  border: 1px solid rgba(142, 120, 103, 0.4);
  color: var(--warm);
  min-width: 160px;
  padding: 0 24px;
  margin-top: auto;
  transition: background 0.4s var(--ease-expo),
              color 0.4s var(--ease-expo),
              border-color 0.4s var(--ease-expo);
}
.product-modal-body[data-state="form"] .product-modal-cta:hover {
  background: rgba(142, 120, 103, 0.08);
  border-color: rgba(142, 120, 103, 0.6);
  color: var(--text);
}
.product-modal-body[data-state="form"] .product-modal-cta .btn-pill-text {
  font-size: 12px;
  letter-spacing: 0.1em;
  height: 44px;
  line-height: 44px;
}