/* VEYLOVA responsive foundation — 0.4.26
   Loaded after the legacy stylesheet so mobile layout has one authoritative layer. */

html,
body,
.page {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

.site-header,
.site-header .container.nav,
.site-header .nav,
.site-header .brand,
.site-header .nav-links,
main,
section,
.container,
.footer-inner,
.gallery-grid,
.journal-feature-grid,
.journal-grid,
.cart-layout,
.policy-grid {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 760px) {
  :root {
    --header-height: 62px;
  }

  .container {
    width: calc(100% - 24px) !important;
    margin-inline: auto !important;
  }

  .site-header .container.nav,
  .site-header .nav,
  body.home-page .site-header .container.nav,
  body.customizer-page .site-header .container.nav,
  body.designer-page .site-header .container.nav,
  body.blog-page .site-header .container.nav,
  body.article-page .site-header .container.nav,
  body.cart-page .site-header .container.nav {
    width: 100% !important;
    min-height: 62px !important;
    display: grid !important;
    grid-template-columns: clamp(70px, 19vw, 88px) minmax(0, 1fr) !important;
    grid-template-rows: 44px !important;
    align-items: center !important;
    gap: clamp(4px, 1.4vw, 8px) !important;
    padding: 9px max(6px, env(safe-area-inset-right)) 9px max(6px, env(safe-area-inset-left)) !important;
  }

  .site-header .brand,
  body.home-page .site-header .brand,
  body.customizer-page .site-header .brand,
  body.designer-page .site-header .brand,
  body.blog-page .site-header .brand,
  body.article-page .site-header .brand,
  body.cart-page .site-header .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .site-header .brand-logo,
  .brand-logo,
  body.home-page .brand-logo,
  body.customizer-page .brand-logo,
  body.designer-page .brand-logo,
  body.blog-page .brand-logo,
  body.article-page .brand-logo,
  body.cart-page .brand-logo {
    width: 100% !important;
    max-width: 86px !important;
    height: auto !important;
    max-height: 30px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body[class] .site-header .container.nav .brand > .brand-logo,
  body[class] .site-header .nav .brand > .brand-logo {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 30px !important;
    flex: 0 1 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
  }

  .site-header .nav-links,
  body.home-page .site-header .nav-links,
  body.customizer-page .site-header .nav-links,
  body.designer-page .site-header .nav-links,
  body.blog-page .site-header .nav-links,
  body.article-page .site-header .nav-links,
  body.cart-page .site-header .nav-links {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.04fr) minmax(0, 1.16fr) minmax(0, .85fr) repeat(2, clamp(28px, 8vw, 34px)) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: clamp(1px, 0.6vw, 3px) !important;
    padding: 3px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
  }

  .site-header .nav-links a:not(.button),
  body.home-page .site-header .nav-links a:not(.button),
  body.customizer-page .site-header .nav-links a:not(.button),
  body.designer-page .site-header .nav-links a:not(.button),
  body.blog-page .site-header .nav-links a:not(.button),
  body.article-page .site-header .nav-links a:not(.button),
  body.cart-page .site-header .nav-links a:not(.button) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 clamp(1px, 0.8vw, 5px) !important;
    overflow: hidden !important;
    font-size: clamp(7.2px, 1.95vw, 9.5px) !important;
    line-height: 1 !important;
    letter-spacing: 0.015em !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .site-header .nav-links a.nav-cart-icon,
  .site-header .nav-links a.nav-account-icon,
  .site-header .nav-links a.nav-orders-link.nav-account-icon {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
  }

  .site-header .nav-links a.nav-cart-icon svg,
  .site-header .nav-links a.nav-account-icon svg,
  .site-header .nav-links a.nav-orders-link.nav-account-icon svg {
    width: clamp(15px, 4.4vw, 19px) !important;
    height: clamp(15px, 4.4vw, 19px) !important;
  }

  .customizer-embed-page,
  .customizer-embed-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-inline: clamp(4px, 2vw, 10px) !important;
    overflow: clip !important;
  }

  .customizer-embed {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .home-review-section {
    contain-intrinsic-size: auto 520px !important;
  }

  body.home-page .home-review-header h2,
  body.home-page .home-review-header p {
    max-width: 100% !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }

  body.home-page .home-review-scroll {
    width: calc(100% + 24px) !important;
    margin-inline: -12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 12px !important;
  }

  body.home-page .home-review-grid {
    display: flex !important;
    width: max-content !important;
    max-width: none !important;
    gap: 10px !important;
    padding: 0 12px 4px !important;
  }

  body.home-page .home-review-card {
    width: min(82vw, 300px) !important;
    min-width: min(82vw, 300px) !important;
    max-width: 300px !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    grid-template-rows: auto auto !important;
    overflow: hidden !important;
  }

  body.home-page .home-review-photo {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 400px !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #f6f3ee !important;
  }

  body.home-page .home-review-body {
    min-height: 0 !important;
    height: auto !important;
    max-height: 190px !important;
    padding: 14px 16px 16px !important;
    overflow: hidden !important;
  }

  .home-flow-grid,
  .gallery-grid,
  .journal-feature-grid,
  .journal-grid,
  .policy-grid,
  .cart-layout {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .journal-feature-grid,
  .cart-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gallery-grid,
  .journal-grid,
  .policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .gallery-grid > *,
  .journal-grid > *,
  .journal-feature-grid > *,
  .policy-grid > *,
  .cart-layout > *,
  .home-flow-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .journal-hero,
  .journal-hero-panel,
  .journal-cta-panel,
  .home-journal-panel,
  .home-final-cta-inner,
  .journal-article,
  .panel,
  .checkout-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .hero-actions,
  .journal-hero-actions,
  .journal-cta-actions,
  .actions {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  .footer-inner {
    width: calc(100% - 24px) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 390px) {
  .container {
    width: calc(100% - 18px) !important;
  }

  .site-header .container.nav,
  .site-header .nav {
    grid-template-columns: clamp(68px, 20vw, 76px) minmax(0, 1fr) !important;
    gap: 4px !important;
    padding-inline: max(4px, env(safe-area-inset-left)) !important;
  }

  .site-header .nav-links,
  body.home-page .site-header .nav-links,
  body.customizer-page .site-header .nav-links,
  body.designer-page .site-header .nav-links,
  body.blog-page .site-header .nav-links,
  body.article-page .site-header .nav-links,
  body.cart-page .site-header .nav-links {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.04fr) minmax(0, 1.16fr) minmax(0, .85fr) repeat(2, 28px) !important;
    gap: 1px !important;
    padding: 2px !important;
  }

  .site-header .nav-links a:not(.button),
  body.home-page .site-header .nav-links a:not(.button),
  body.customizer-page .site-header .nav-links a:not(.button),
  body.designer-page .site-header .nav-links a:not(.button),
  body.blog-page .site-header .nav-links a:not(.button),
  body.article-page .site-header .nav-links a:not(.button),
  body.cart-page .site-header .nav-links a:not(.button) {
    padding-inline: 1px !important;
    font-size: clamp(6.7px, 1.92vw, 7.5px) !important;
    letter-spacing: 0 !important;
  }

  body[class] .site-header .nav-links a[href="index.html"]:not(.button):not(.nav-cart-icon):not(.nav-account-icon),
  body[class] .site-header .nav-links a[href="customizer.html"]:not(.button):not(.nav-cart-icon):not(.nav-account-icon),
  body[class] .site-header .nav-links a[href="designer.html"]:not(.button):not(.nav-cart-icon):not(.nav-account-icon),
  body[class] .site-header .nav-links a[href="blog.html"]:not(.button):not(.nav-cart-icon):not(.nav-account-icon) {
    padding-inline: 0 !important;
    font-size: clamp(5.8px, 1.72vw, 6.7px) !important;
    letter-spacing: -0.01em !important;
  }

  body.home-page .home-review-card {
    width: min(86vw, 286px) !important;
    min-width: min(86vw, 286px) !important;
    max-width: 286px !important;
  }

  .gallery-grid,
  .journal-grid,
  .policy-grid {
    gap: 10px !important;
  }
}

@media (max-width: 330px) {
  .site-header .nav-links,
  body.home-page .site-header .nav-links,
  body.customizer-page .site-header .nav-links,
  body.designer-page .site-header .nav-links,
  body.blog-page .site-header .nav-links,
  body.article-page .site-header .nav-links,
  body.cart-page .site-header .nav-links {
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.03fr) minmax(0, 1.15fr) minmax(0, .84fr) 28px 28px !important;
  }

  body[class] .site-header .nav-links a[href="index.html"]:not(.button):not(.nav-cart-icon):not(.nav-account-icon),
  body[class] .site-header .nav-links a[href="customizer.html"]:not(.button):not(.nav-cart-icon):not(.nav-account-icon),
  body[class] .site-header .nav-links a[href="designer.html"]:not(.button):not(.nav-cart-icon):not(.nav-account-icon),
  body[class] .site-header .nav-links a[href="blog.html"]:not(.button):not(.nav-cart-icon):not(.nav-account-icon) {
    font-size: clamp(5.2px, 1.6vw, 5.6px) !important;
    letter-spacing: -0.015em !important;
  }

  .gallery-grid,
  .journal-grid,
  .policy-grid,
  .home-flow-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --header-height: 54px;
  }

  .site-header .container.nav,
  .site-header .nav {
    min-height: 54px !important;
    grid-template-rows: 40px !important;
    padding-block: 7px !important;
  }

  .site-header .nav-links {
    height: 40px !important;
    min-height: 40px !important;
  }

  .site-header .nav-links a:not(.button),
  .site-header .nav-links a.nav-cart-icon,
  .site-header .nav-links a.nav-account-icon {
    height: 34px !important;
    min-height: 34px !important;
  }
}

/* Homepage hero and proof strip — fluid across phone widths. */
body.home-page .home-hero.home-hero-v2.home-hero-carousel::before,
body.home-page .home-hero.home-hero-v2.home-hero-carousel::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

body.home-page .home-hero-carousel .hero-copy {
  width: min(100%, 560px) !important;
  min-width: 0 !important;
}

body.home-page .home-hero-carousel .hero-actions {
  max-width: 100% !important;
  flex-wrap: wrap !important;
}

body.home-page .home-proof-v2 .standard-strip,
body.home-page .home-proof-v2 .standard-item,
body.home-page .home-proof-v2 .standard-copy {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.home-page .home-proof-v2 .standard-copy strong,
body.home-page .home-proof-v2 .standard-copy small {
  display: block !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

@media (max-width: 760px) {
  body.home-page .home-hero.home-hero-v2.home-hero-carousel,
  body.home-page .home-hero-carousel {
    width: 100% !important;
    height: clamp(330px, 75vw, 445px) !important;
    min-height: clamp(330px, 75vw, 445px) !important;
    max-height: 445px !important;
    aspect-ratio: auto !important;
    touch-action: pan-y pinch-zoom !important;
  }

  body.home-page .home-hero-carousel .home-hero-slide .hero-full-image {
    object-fit: cover !important;
    object-position: var(--hero-mobile-position, 62% center) !important;
  }

  body.home-page .home-hero-carousel .hero-full-content {
    width: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: clamp(20px, 5vw, 30px) 12px clamp(52px, 11vw, 66px) !important;
    pointer-events: none !important;
  }

  body.home-page .home-hero-carousel .hero-copy {
    gap: clamp(14px, 4vw, 20px) !important;
    pointer-events: auto !important;
  }

  body.home-page .home-hero-carousel h1 {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    font-size: clamp(31px, 8.4vw, 48px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.035em !important;
    text-wrap: balance !important;
  }

  body.home-page .home-hero-carousel .hero-actions {
    width: 100% !important;
    gap: clamp(7px, 2vw, 10px) !important;
  }

  body.home-page .home-hero-carousel .hero-actions .button {
    min-height: 44px !important;
    padding-inline: clamp(13px, 3.8vw, 20px) !important;
    font-size: clamp(11px, 3vw, 13px) !important;
    white-space: nowrap !important;
  }

  body.home-page .home-hero-carousel-controls {
    left: 8px !important;
    bottom: 6px !important;
    gap: 0 !important;
  }

  body.home-page .home-hero-carousel-controls button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body.home-page .home-hero-carousel-controls button::before {
    left: 10px !important;
    right: 10px !important;
    top: 20px !important;
  }

  body.home-page .home-proof-section.home-proof-v2 {
    padding: clamp(10px, 3vw, 16px) 0 6px !important;
  }

  body.home-page .home-proof-v2 .standard-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  body.home-page .home-proof-v2 .standard-item,
  body.home-page .home-proof-v2 .standard-item:first-child,
  body.home-page .home-proof-v2 .standard-strip:hover .standard-item:first-child:not(:hover) {
    display: grid !important;
    grid-template-columns: clamp(32px, 9vw, 38px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(7px, 2vw, 10px) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: clamp(10px, 2.8vw, 13px) !important;
  }

  body.home-page .home-proof-v2 .standard-icon {
    width: clamp(32px, 9vw, 38px) !important;
    height: clamp(32px, 9vw, 38px) !important;
    min-width: 0 !important;
    flex-basis: auto !important;
  }

  body.home-page .home-proof-v2 .standard-icon img,
  body.home-page .home-proof-v2 .standard-icon svg {
    width: clamp(17px, 4.8vw, 20px) !important;
    height: clamp(17px, 4.8vw, 20px) !important;
  }

  body.home-page .home-proof-v2 .standard-copy strong {
    font-size: clamp(10.5px, 2.85vw, 12px) !important;
    line-height: 1.18 !important;
  }

  body.home-page .home-proof-v2 .standard-copy small {
    margin-top: 4px !important;
    font-size: clamp(9px, 2.45vw, 10.5px) !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 350px) {
  body.home-page .home-proof-v2 .standard-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.home-page .home-proof-v2 .standard-item,
  body.home-page .home-proof-v2 .standard-item:first-child,
  body.home-page .home-proof-v2 .standard-strip:hover .standard-item:first-child:not(:hover) {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    padding: 10px 12px !important;
  }

  body.home-page .home-proof-v2 .standard-copy strong {
    font-size: 11.5px !important;
  }

  body.home-page .home-proof-v2 .standard-copy small {
    font-size: 10px !important;
  }
}

/* Designer collection — separate introduction, media, and action layers. */
body.designer-page #collection {
  padding-top: clamp(18px, 4vw, 42px) !important;
  padding-bottom: clamp(42px, 7vw, 76px) !important;
  background: #fffdfb !important;
}

body.designer-page #collection .section-header {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  display: grid !important;
  gap: 8px !important;
  margin: 0 auto clamp(20px, 4vw, 30px) !important;
  padding: clamp(16px, 3.5vw, 24px) !important;
  border-block: 1px solid rgba(118, 84, 99, 0.14) !important;
  border-radius: 10px !important;
  background: #f8f3f1 !important;
  text-align: center !important;
}

body.designer-page #collection .section-header h2,
body.designer-page #collection .section-header p {
  max-width: 100% !important;
  margin: 0 !important;
}

body.designer-page #collection .section-header h2 {
  font-size: clamp(28px, 5vw, 42px) !important;
  line-height: 1.05 !important;
  text-wrap: balance !important;
}

body.designer-page #collection .section-header p {
  color: #514b4f !important;
  font-size: clamp(13px, 2.2vw, 16px) !important;
  line-height: 1.5 !important;
  text-wrap: pretty !important;
}

body.designer-page #designerGrid.gallery-grid {
  align-items: stretch !important;
  gap: clamp(12px, 2.4vw, 20px) !important;
}

body.designer-page #designerGrid .product-card {
  display: grid !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-rows: auto minmax(110px, auto) !important;
  align-content: stretch !important;
  overflow: hidden !important;
  border: 1px solid rgba(118, 84, 99, 0.16) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1), border-color 180ms ease, background-color 180ms ease !important;
}

body.designer-page #designerGrid .product-card > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: var(--product-mobile-pos, var(--product-pos, center)) !important;
  background: #fbf8f6 !important;
}

body.designer-page #designerGrid .product-card .content {
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 110px !important;
  height: auto !important;
  grid-template-rows: auto 1fr auto !important;
  align-content: stretch !important;
  gap: 10px !important;
  padding: clamp(11px, 2.6vw, 16px) !important;
  overflow: visible !important;
  border-top: 1px solid rgba(118, 84, 99, 0.12) !important;
  background: #fffdfb !important;
}

body.designer-page #designerGrid .product-meta {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  margin: 0 !important;
}

body.designer-page #designerGrid .product-meta span {
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 28px !important;
  margin-inline: auto !important;
  padding: 4px 10px !important;
  overflow-wrap: anywhere !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body.designer-page #designerGrid .product-actions,
body.designer-page #designerGrid .cart-actions {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: end !important;
  margin: 0 !important;
}

body.designer-page #designerGrid .cart-actions {
  display: block !important;
}

body.designer-page #designerGrid .text-button {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px clamp(10px, 2.8vw, 16px) !important;
  border-radius: 8px !important;
  background: #765463 !important;
  color: #fffdfb !important;
  font-size: clamp(11.5px, 2.5vw, 13px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

body.designer-page #designerGrid .product-card .content .product-actions,
body.designer-page #designerGrid .product-card .content .product-actions .cart-actions {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: end !important;
  justify-content: stretch !important;
  margin: 0 !important;
}

body.designer-page #designerGrid .product-card .content .product-actions .cart-actions .text-button {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 9px clamp(10px, 2.8vw, 16px) !important;
  line-height: 1.18 !important;
  white-space: normal !important;
}

body.designer-page #designerGrid .product-card:focus-visible {
  outline: 3px solid rgba(118, 84, 99, 0.34) !important;
  outline-offset: 3px !important;
}

body.designer-page #designerGrid .product-card:active {
  transform: scale(.992) !important;
  border-color: rgba(118, 84, 99, 0.38) !important;
  background: #fffaf7 !important;
}

@media (hover: hover) and (pointer: fine) {
  body.designer-page #designerGrid .product-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(118, 84, 99, 0.32) !important;
    background: #fffaf7 !important;
  }

  body.designer-page #designerGrid .text-button:hover {
    background: #684655 !important;
    color: #fff !important;
  }
}

@media (max-width: 760px) {
  body.designer-page #collection > .container {
    width: calc(100% - 24px) !important;
  }

  body.designer-page #collection .section-header {
    margin-bottom: 20px !important;
    padding: 16px 14px 18px !important;
  }

  body.designer-page #collection .section-header h2 {
    font-size: clamp(28px, 8vw, 34px) !important;
  }

  body.designer-page #collection .section-header p {
    font-size: clamp(13px, 3.5vw, 15px) !important;
  }

  body.designer-page #designerGrid.gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(10px, 2.6vw, 14px) !important;
  }

  body.designer-page #designerGrid .product-card .content {
    min-height: 116px !important;
  }
}

@media (max-width: 390px) {
  body.designer-page #collection > .container {
    width: calc(100% - 18px) !important;
  }

  body.designer-page #designerGrid.gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.designer-page #designerGrid .product-card {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  body.designer-page #designerGrid .product-card .content {
    min-height: 122px !important;
    gap: 8px !important;
    padding: 9px 7px 10px !important;
  }

  body.designer-page #designerGrid .text-button {
    min-height: 44px !important;
    padding: 7px 5px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: balance !important;
  }

  body.designer-page #designerGrid .product-meta span {
    min-height: 26px !important;
    padding: 4px 6px !important;
    font-size: 10.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.designer-page #designerGrid .product-card,
  body.designer-page #designerGrid .text-button {
    transition: none !important;
  }
}

/* Homepage hero — image-led desktop composition and split mobile layout. */
body.home-page .home-hero.home-hero-v2.home-hero-carousel .hero-full-content {
  width: min(calc(100% - clamp(32px, 8vw, 96px)), 1160px) !important;
  margin-inline: auto !important;
}

body.home-page .home-hero.home-hero-v2.home-hero-carousel .hero-copy {
  width: min(46vw, 560px) !important;
  max-width: 560px !important;
}

body.home-page .home-hero.home-hero-v2.home-hero-carousel h1 {
  max-width: 560px !important;
  font-size: clamp(44px, 4.5vw, 66px) !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance !important;
  text-shadow: 0 1px 1px rgba(255, 253, 249, 0.32) !important;
}

@media (min-width: 901px) {
  body.home-page .home-hero.home-hero-v2.home-hero-carousel .hero-line {
    white-space: nowrap !important;
  }
}

@media (max-width: 760px) {
  body.home-page .home-hero.home-hero-v2.home-hero-carousel {
    --home-hero-ratio: 1672 / 941;
    position: relative !important;
    display: grid !important;
    align-items: end !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    aspect-ratio: var(--home-hero-ratio) !important;
    overflow: hidden !important;
    background: #f5efe8 !important;
    touch-action: pan-y pinch-zoom !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(255, 253, 249, 0) 42%,
      rgba(255, 253, 249, 0.18) 58%,
      rgba(255, 253, 249, 0.74) 100%
    ) !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel .home-hero-slides {
    inset: 0 !important;
    height: 100% !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel .home-hero-slide {
    inset: 0 !important;
    height: 100% !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel .home-hero-slide .hero-full-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel .hero-full-content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    margin: 0 !important;
    padding: clamp(10px, 2.8vw, 14px) clamp(12px, 3.5vw, 18px) clamp(32px, 8vw, 42px) !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: auto !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: end !important;
    gap: clamp(8px, 2.2vw, 12px) !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #2f2327 !important;
    font-size: clamp(23px, 6.5vw, 32px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
    text-shadow: 0 1px 1px rgba(255, 253, 249, 0.55) !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel .hero-actions {
    width: min(100%, 420px) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel .hero-actions .button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-content: center !important;
    padding-inline: clamp(13px, 3vw, 18px) !important;
    font-size: clamp(10.5px, 2.6vw, 12px) !important;
    white-space: nowrap !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel .home-hero-carousel-controls {
    top: auto !important;
    right: auto !important;
    bottom: 2px !important;
    left: 8px !important;
    gap: 0 !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel .home-hero-carousel-controls button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel .home-hero-carousel-controls button::before {
    left: 10px !important;
    right: 10px !important;
    top: 20px !important;
  }
}

@media (max-width: 430px) {
  body.home-page .home-hero.home-hero-v2.home-hero-carousel .hero-copy {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel h1 {
    max-width: 100% !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel .hero-actions {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.home-page .home-hero.home-hero-v2.home-hero-carousel .hero-actions .button {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .home-hero.home-hero-v2.home-hero-carousel .home-hero-slide {
    transform: none !important;
    transition: opacity 180ms ease !important;
  }
}