/* Product pages only: enable Variant B with html.product-experience. */
:root.product-experience {
  --line: rgba(30, 34, 33, .10);
  --radius: 12px;
  --ui-ease: cubic-bezier(.2, .8, .2, 1);
  --ui-fast: 160ms;
  --ui-medium: 240ms;
  --shadow: 0 16px 44px rgba(30, 34, 33, .10);
}

/* Type retains the site's existing families; small labels recede. */
.product-experience .eyebrow { gap: 8px; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: none; }
.product-experience .hero .eyebrow, .product-experience .section-dark .eyebrow { color: var(--brass-light); }
.product-experience .eyebrow::before { width: 16px; opacity: .65; }
.product-experience .hero h1, .product-experience .page-hero h1, .product-experience .detail-copy h1 { letter-spacing: -.025em; line-height: 1.08; }
.product-experience .product-link { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.product-experience .footer-label { font-weight: 700; letter-spacing: .06em; text-transform: none; }
.product-experience .reveal { animation: none; }

/* Press feedback stays within each control's existing bounds. */
.product-experience .header-cta, .product-experience .button-primary, .product-experience .button-secondary {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0;
  touch-action: manipulation;
  transition: background var(--ui-fast) ease, border-color var(--ui-fast) ease,
    color var(--ui-fast) ease, transform var(--ui-fast) var(--ui-ease);
}
.product-experience .header-cta:hover, .product-experience .button-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: none;
}
.product-experience .button-secondary:hover { border-color: var(--line); }
.product-experience .header-cta:active, .product-experience .button-primary:active, .product-experience .button-secondary:active { transform: scale(.98); }
.product-experience .language-trigger, .product-experience .menu-trigger, .product-experience .modal-close { border-radius: 50%; touch-action: manipulation; }
.product-experience .menu-trigger, .product-experience .modal-close { transition: background var(--ui-fast) ease, transform var(--ui-fast) var(--ui-ease); }
.product-experience .menu-trigger:active, .product-experience .modal-close:active { transform: scale(.94); }
.product-experience .quick-inquiry-trigger, .product-experience .mobile-whatsapp {
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(30, 34, 33, .14);
  transition: background var(--ui-fast) ease, transform var(--ui-fast) var(--ui-ease);
}
.product-experience .quick-inquiry-trigger:active, .product-experience .mobile-whatsapp:active { transform: scale(.98); }

/* Product photography remains the primary visual. */
.product-experience .product-index { display: none; }
.product-experience .product-image, .product-experience .blog-card { border-radius: 16px; }
.product-experience .product-image img, .product-experience .blog-card-image img { transition: transform var(--ui-medium) var(--ui-ease); }
.product-experience .product-card:hover .product-image img, .product-experience .blog-card:hover .blog-card-image img { transform: none; }
.product-experience .product-variant-cue {
  padding: 6px 9px;
  border: 0;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}
.product-experience .product-arrow {
  border: 0;
  box-shadow: 0 2px 10px rgba(30, 34, 33, .08);
  transition: background var(--ui-fast) ease, color var(--ui-fast) ease;
}
.product-experience .product-card:hover .product-link .fy-icon { transform: none; }
.product-experience[dir="rtl"] .product-card:hover .product-link .fy-icon-direction { transform: scaleX(-1); }
.product-experience .blog-card { overflow: hidden; border-color: transparent; box-shadow: none; }
.product-experience .blog-card:hover { transform: none; box-shadow: none; }

/* Native selects and scrollable categories remain familiar. */
.product-experience .category-filter { gap: 6px; padding-block: 12px; border: 0; }
.product-experience .category-filter button {
  min-height: 44px;
  padding-inline: 16px;
  border-color: transparent;
  border-radius: 999px;
  font-weight: 600;
  transition: background var(--ui-fast) ease, color var(--ui-fast) ease,
    transform var(--ui-fast) var(--ui-ease);
}
.product-experience .category-filter button:hover:not(.is-active) { background: var(--paper-deep); border-color: transparent; color: var(--ink); }
.product-experience .category-filter button.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.product-experience .category-filter button:active { transform: scale(.98); }
.product-experience .catalog-color-filter { padding: 12px 0 24px; border-bottom: 0; }
.product-experience .catalog-color-control label { font-weight: 600; }
.product-experience .catalog-color-control select { border-color: transparent; padding-inline-start: 14px; }
.product-experience .catalog-filter-reset { font-weight: 600; }

/* A compact, stable surface keeps color and size together. */
.product-experience .variant-gallery figure { border-radius: 20px; overflow: hidden; }
.product-experience .variant-gallery [data-variant-image] {
  aspect-ratio: 1;
  object-fit: contain;
  transition: opacity var(--ui-fast) ease;
}
.product-experience .variant-gallery [data-variant-image].is-updating { opacity: .45; }
.product-experience .variant-gallery figcaption { padding: 12px 16px; border-top: 0; font-size: 11px; }
.product-experience .variant-gallery figcaption span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.product-experience .detail-copy > .detail-code {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.product-experience .detail-copy h1 { margin-top: 0; }
.product-experience .spec-table { margin-block: 28px; border-top: 0; }
.product-experience .variant-selector {
  gap: 20px;
  margin-block: 26px 30px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .75);
}
.product-experience .variant-group legend { color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.product-experience .variant-options { gap: 8px; }
.product-experience .variant-options button {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  border-color: transparent;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12px;
  font-weight: 600;
  touch-action: manipulation;
  transition: background var(--ui-fast) ease, border-color var(--ui-fast) ease,
    color var(--ui-fast) ease, opacity var(--ui-fast) ease, transform var(--ui-fast) var(--ui-ease);
}
.product-experience .variant-options button.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.product-experience .variant-options button:hover:not(:disabled):not(.is-active) { border-color: var(--line); }
.product-experience .variant-options button:active:not(:disabled) { transform: scale(.98); }
.product-experience .variant-options button:disabled { opacity: .38; }

/* Transient panels use a soft edge, not stacked glass layers. */
.product-experience .contact-form-panel { border-color: transparent; border-radius: 20px; }
.product-experience .inquiry-form input, .product-experience .inquiry-form select, .product-experience .inquiry-form textarea { border-radius: 12px; }
.product-experience .inquiry-modal, .product-experience .language-modal {
  transition: opacity var(--ui-fast) ease, visibility 0s linear var(--ui-medium);
}
.product-experience .inquiry-modal.is-open, .product-experience .language-modal.is-open { transition-delay: 0s; }
.product-experience .inquiry-backdrop, .product-experience .language-backdrop { background: rgba(17, 20, 19, .44); backdrop-filter: none; }
.product-experience .inquiry-dialog {
  border-radius: 20px 0 0 20px;
  box-shadow: -12px 0 36px rgba(30, 34, 33, .12);
  transform: translateX(24px);
  transition: transform var(--ui-medium) var(--ui-ease);
}
.product-experience .inquiry-modal.is-open .inquiry-dialog { transform: translateX(0); }
.product-experience .language-dialog { border-radius: 20px; transform: translateY(10px); transition: transform var(--ui-medium) var(--ui-ease); }
.product-experience .language-modal.is-open .language-dialog { transform: translateY(0); }
.product-experience .language-options button { min-height: 56px; border-color: transparent; border-radius: 12px; background: var(--white); }
.product-experience .language-options button:hover { border-color: var(--line); }
.product-experience[dir="rtl"] .inquiry-dialog {
  right: auto;
  left: 0;
  border-radius: 0 20px 20px 0;
  box-shadow: 12px 0 36px rgba(30, 34, 33, .12);
  transform: translateX(-24px);
}
.product-experience[dir="rtl"] .inquiry-modal.is-open .inquiry-dialog { transform: translateX(0); }

/* Keep the original full-cover failsafe; internal routes use a slim bar. */
.product-experience .page-transition { transition: opacity var(--ui-fast) ease, visibility 0s linear var(--ui-fast); }
.product-experience .page-transition.is-active { transition-delay: 0s; }
.product-experience .page-transition.is-inline {
  inset: 0 0 auto;
  display: block;
  width: 100%;
  height: 2px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none !important;
}
.product-experience .page-transition.is-inline .page-transition-brand, .product-experience .page-transition.is-inline .page-transition-label { display: none; }
.product-experience .page-transition.is-inline .page-transition-progress { display: block; width: 100%; height: 2px; margin: 0; background: transparent; }
.product-experience .page-transition.is-inline .page-transition-progress::after {
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
  animation-duration: .8s;
}

@media (hover: hover) and (pointer: fine) {
  .product-experience .header-cta:hover, .product-experience .button-primary:hover { background: var(--dark); border-color: var(--dark); }
  .product-experience .button-secondary:hover { background: var(--white); border-color: rgba(30, 34, 33, .22); }
  .product-experience .menu-trigger:hover, .product-experience .modal-close:hover { background: var(--paper-deep); }
  .product-experience .product-card:hover .product-image img, .product-experience .blog-card:hover .blog-card-image img { transform: scale(1.02); }
  .product-experience .product-card:hover .product-link .fy-icon { transform: translateX(2px); }
  .product-experience[dir="rtl"] .product-card:hover .product-link .fy-icon-direction { transform: translateX(-2px) scaleX(-1); }
}

@media (max-width: 720px) {
  /* Header dimensions stay inherited, including the existing 320px rules. */
  .product-experience .header-cta { min-height: 44px; }
  .product-experience .desktop-nav {
    display: flex;
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    padding: 10px;
    overflow-y: auto;
    border-color: var(--line);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 0 12px 32px rgba(30, 34, 33, .10);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--ui-fast) ease, transform var(--ui-medium) var(--ui-ease),
      visibility 0s linear var(--ui-medium);
  }
  .product-experience .desktop-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
  .product-experience .desktop-nav a { min-height: 44px; padding: 11px 12px; border-bottom: 0; border-radius: 12px; }
  .product-experience .desktop-nav a.is-active { background: var(--paper-deep); }
  .product-experience .site-header.is-over-hero:not(.is-scrolled) .desktop-nav a { color: var(--ink); }
  .product-experience .category-filter { padding-block: 10px; }
  .product-experience .category-filter button { min-height: 44px; padding-inline: 14px; }
  .product-experience .catalog-filter-reset { min-height: 44px; }
  .product-experience .detail-hero { padding-top: 96px; }
  .product-experience .detail-layout { gap: 22px; }
  .product-experience .detail-gallery img { height: min(56vh, 84vw); height: min(56svh, 84vw); }
  .product-experience .detail-copy h1 { margin-block: 0 10px; }
  .product-experience .detail-copy > p { margin-block: 0 16px; font-size: 14px; }
  .product-experience .detail-copy > .variant-selector { margin: 4px 0 24px; padding: 18px; }
  .product-experience .detail-copy > .spec-table { margin-bottom: 24px; }
  /* Keep the choices clear; contact actions return after this panel scrolls away. */
  .product-experience body.is-configuring-product .quick-inquiry-trigger,
  .product-experience body.is-configuring-product .mobile-whatsapp { visibility: hidden; opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .product-experience .site-header.is-scrolled, .product-experience .category-filter { background: var(--paper); backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.product-experience { scroll-behavior: auto; }
  .product-experience .header-cta, .product-experience .button-primary, .product-experience .button-secondary, .product-experience .menu-trigger, .product-experience .modal-close,
  .product-experience .quick-inquiry-trigger, .product-experience .mobile-whatsapp, .product-experience .category-filter button, .product-experience .variant-options button,
  .product-experience .product-image img, .product-experience .blog-card-image img, .product-experience .product-link .fy-icon, .product-experience [data-variant-image],
  .product-experience .desktop-nav, .product-experience .inquiry-dialog, .product-experience .language-dialog, .product-experience .inquiry-modal, .product-experience .language-modal { transition: none; }
  .product-experience .header-cta:active, .product-experience .button-primary:active, .product-experience .button-secondary:active, .product-experience .menu-trigger:active,
  .product-experience .modal-close:active, .product-experience .quick-inquiry-trigger:active, .product-experience .mobile-whatsapp:active,
  .product-experience .category-filter button:active, .product-experience .variant-options button:active:not(:disabled),
  .product-experience .product-card:hover .product-image img, .product-experience .blog-card:hover .blog-card-image img,
  .product-experience .product-card:hover .product-link .fy-icon { transform: none; }
  .product-experience[dir="rtl"] .product-card:hover .product-link .fy-icon-direction { transform: scaleX(-1); }
  .product-experience .desktop-nav { transform: none; }
  .product-experience .inquiry-dialog, .product-experience[dir="rtl"] .inquiry-dialog, .product-experience .language-dialog { transform: none; }
  .product-experience .page-transition { transition-duration: .01ms; }
  .product-experience .page-transition-progress::after { animation: none; transform: none; }
}