/* ============================================================
   DNA YOUR ART® — Mobile Experience Layer
   Dedicated phone UX. Loaded last so it can safely refine
   both the new Maison pages and legacy public pages.
   ============================================================ */

@media (max-width: 48rem) {
  :root {
    --mobile-header-h: calc(4.25rem + env(safe-area-inset-top));
    --mobile-dock-h: calc(4.35rem + env(safe-area-inset-bottom));
    --mobile-gutter: clamp(1rem, 4.8vw, 1.35rem);
  }

  html {
    scroll-padding-top: calc(var(--mobile-header-h) + 0.65rem);
    -webkit-text-size-adjust: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body.mobile-dock-enabled {
    padding-bottom: var(--mobile-dock-h);
  }

  /* Never split luxury/editorial words in the middle. */
  h1, h2, h3, h4, h5, h6,
  .lede, blockquote,
  .maison-hero__title,
  .story-hero__title,
  .contact-hero__title,
  .events-hero,
  .vip__copy,
  .feature__copy {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  h1, h2, blockquote {
    text-wrap: balance;
  }

  p, li, dd, dt, a, button, label, input, select, textarea {
    overflow-wrap: break-word;
  }

  button, a, input, select, textarea, summary {
    -webkit-tap-highlight-color: transparent;
  }

  button, .button, .header-action, .text-link,
  input, select {
    min-height: 44px;
  }

  input, select, textarea {
    font-size: 16px !important; /* prevents iOS focus zoom */
  }

  .shell,
  .container {
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  /* ---------- Unified public header: icon + logo + cart/menu ---------- */
  .site-header {
    height: var(--mobile-header-h) !important;
    padding-top: env(safe-area-inset-top);
    background: rgba(247, 243, 235, 0.94);
    color: var(--ink, #151310);
    border-bottom: 1px solid rgba(20, 18, 15, 0.10);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }

  body[data-page="home"] .site-header:not(.is-solid) {
    background: linear-gradient(180deg, rgba(15, 12, 9, 0.78), rgba(15, 12, 9, 0.56));
    color: #fffdf8;
    border-bottom-color: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
  }

  .site-header__inner,
  body[data-page="home"] .site-header__inner {
    width: calc(100% - 1rem) !important;
    grid-template-columns: 2.65rem 1fr auto !important;
    gap: 0.35rem !important;
  }

  .site-nav--home,
  .site-nav--unified {
    display: flex !important;
    justify-self: start !important;
    width: 2.65rem;
    gap: 0 !important;
  }

  .site-nav--home a:not(.home-link),
  .site-nav--unified a:not(.home-link) {
    display: none !important;
  }

  .home-link,
  body[data-page="home"] .home-link,
  .site-nav--unified .home-link {
    width: 2.65rem !important;
    height: 2.65rem !important;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
  }

  .home-link svg,
  body[data-page="home"] .home-link svg,
  .site-nav--unified .home-link svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
  }

  .brand--signature,
  .brand--unified,
  body[data-page="home"] .brand--signature {
    position: absolute !important;
    left: 50% !important;
    top: calc(50% + (env(safe-area-inset-top) / 2)) !important;
    transform: translate(-50%, -50%) !important;
  }

  .brand--signature .brand__mark,
  .brand--unified .brand__mark,
  body[data-page="home"] .brand--signature .brand__mark {
    width: 3.15rem !important;
    max-height: 3.2rem;
    object-fit: contain;
  }

  .site-header__actions,
  body[data-page="home"] .site-header__actions {
    grid-column: 3 !important;
    justify-self: end !important;
    gap: 0.15rem !important;
  }

  /* Language and account live in the drawer on phones. */
  .site-header__actions > .lang-switch,
  .site-header__actions > a[data-account-link] {
    display: none !important;
  }

  .cart-trigger,
  .unified-cart-link {
    position: relative;
    width: 2.65rem;
    min-width: 2.65rem;
    height: 2.65rem;
    min-height: 2.65rem !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    font-size: 0 !important;
  }

  .cart-trigger [data-cart-label],
  .unified-cart-link [data-cart-label] {
    display: none !important;
  }

  .cart-trigger::before,
  .unified-cart-link::before {
    content: "";
    width: 0.92rem;
    height: 0.78rem;
    border: 1px solid currentColor;
    border-radius: 0.05rem;
    transform: translateY(0.12rem);
  }

  .cart-trigger::after,
  .unified-cart-link::after {
    content: "";
    position: absolute;
    top: 0.72rem;
    width: 0.48rem;
    height: 0.34rem;
    border: 1px solid currentColor;
    border-bottom: 0;
    border-radius: 0.45rem 0.45rem 0 0;
  }

  .cart-trigger [data-cart-count],
  .unified-cart-link [data-cart-count] {
    position: absolute;
    top: 0.28rem;
    right: 0.18rem;
    min-width: 1.05rem;
    height: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 0.22rem;
    background: var(--gold, #b58a45);
    color: #111;
    font-family: var(--sans, sans-serif);
    font-size: 0.58rem !important;
    line-height: 1;
  }

  .menu-button {
    display: grid !important;
    width: 2.65rem !important;
    height: 2.65rem !important;
    min-height: 2.65rem !important;
    place-items: center;
  }

  .mobile-drawer {
    padding: calc(var(--mobile-header-h) + 2.15rem) var(--mobile-gutter) calc(2rem + env(safe-area-inset-bottom)) !important;
    background: rgba(20, 18, 15, 0.985) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .mobile-drawer nav {
    gap: 0 !important;
  }

  .mobile-drawer nav a {
    padding: 0.48rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.10);
    font-size: clamp(2rem, 9.5vw, 3.2rem) !important;
    line-height: 1.08 !important;
  }

  .mobile-drawer__footer {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.8rem !important;
  }

  .mobile-lang-switch {
    display: flex;
    gap: 0.45rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.14);
  }

  .mobile-lang-switch button {
    min-width: 3.4rem;
    min-height: 2.65rem;
    border: 1px solid rgba(255,255,255,.28);
    background: transparent;
    color: #fff;
    font: 700 0.7rem var(--sans, sans-serif);
    letter-spacing: .12em;
  }

  .mobile-lang-switch button[aria-pressed="true"] {
    border-color: var(--gold, #c9b28a);
    color: var(--gold, #c9b28a);
  }

  /* ---------- Mobile bottom dock ---------- */
  .mobile-quick-dock {
    position: fixed;
    z-index: 850;
    inset: auto 0 0;
    height: var(--mobile-dock-h);
    padding: 0.38rem max(0.5rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(0.5rem, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.2rem;
    background: rgba(248, 245, 238, 0.96);
    border-top: 1px solid rgba(20,18,15,.12);
    box-shadow: 0 -12px 30px rgba(0,0,0,.08);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
    transition: transform 220ms ease, opacity 220ms ease;
  }

  .mobile-quick-dock.is-hidden {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }

  .mobile-quick-dock a,
  .mobile-quick-dock button {
    min-width: 0;
    min-height: 3.25rem;
    border: 0;
    border-radius: 0;
    padding: 0.28rem 0.1rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.18rem;
    background: transparent;
    color: #1a1815;
    font-family: var(--sans, sans-serif);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mobile-quick-dock svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
  }

  .mobile-quick-dock .mobile-dock-configure {
    background: #1b1916;
    color: #fffdf8;
  }

  .mobile-quick-dock .mobile-dock-cart {
    position: relative;
  }

  .mobile-quick-dock [data-mobile-cart-count] {
    position: absolute;
    top: .18rem;
    left: calc(50% + .33rem);
    min-width: .95rem;
    height: .95rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    padding: 0 .18rem;
    background: var(--gold, #b58a45);
    color: #111;
    font-size: .52rem;
  }

  /* ---------- HOME: immersive, swipe-first storefront ---------- */
  body[data-page="home"] .hero {
    min-height: 92svh;
    padding-bottom: 0;
  }

  body[data-page="home"] .hero__media img {
    object-position: 36% center !important;
  }

  body[data-page="home"] .hero__media::after {
    background:
      linear-gradient(180deg, rgba(10,9,7,.22), transparent 30%),
      linear-gradient(0deg, rgba(10,9,7,.94) 0%, rgba(10,9,7,.36) 42%, transparent 70%) !important;
  }

  body[data-page="home"] .hero__statement {
    top: auto !important;
    bottom: 15.6rem !important;
    left: var(--mobile-gutter) !important;
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    transform: none !important;
    text-align: left !important;
    font-size: clamp(.92rem, 4vw, 1.08rem) !important;
    line-height: 1.22 !important;
    letter-spacing: .09em !important;
    white-space: normal !important;
  }

  body[data-page="home"] .hero__content {
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    margin: 0 auto 1.15rem !important;
    display: block !important;
  }

  body[data-page="home"] .hero__meta {
    max-width: none !important;
    width: 100%;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.35);
  }

  body[data-page="home"] .hero__meta p {
    max-width: 18rem;
    margin-bottom: .45rem !important;
    font-size: .92rem;
    line-height: 1.45;
  }

  body[data-page="home"] .hero__price {
    margin-bottom: .8rem !important;
    font-size: 1.45rem !important;
  }

  body[data-page="home"] .hero__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .5rem !important;
  }

  body[data-page="home"] .hero__actions .button {
    min-height: 3rem;
    padding: .7rem .45rem;
    font-size: .58rem;
    letter-spacing: .08em;
  }

  body[data-page="home"] .intro {
    padding: 4.2rem 0 3.4rem !important;
  }

  body[data-page="home"] .intro__grid {
    gap: 1.35rem !important;
  }

  body[data-page="home"] .intro h2 {
    max-width: 11ch !important;
    margin-bottom: 1rem !important;
    font-size: clamp(2.5rem, 11.5vw, 3.6rem) !important;
    line-height: .98;
  }

  body[data-page="home"] .intro .lede {
    font-size: 1rem !important;
    line-height: 1.52 !important;
  }

  body[data-page="home"] .collection-section {
    padding-bottom: 4rem !important;
  }

  body[data-page="home"] .section-heading {
    margin-bottom: 1.25rem !important;
    gap: .7rem !important;
  }

  body[data-page="home"] .section-heading h2 {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }

  body[data-page="home"] .section-heading p {
    font-size: .92rem;
    line-height: 1.55;
  }

  /* Premium swipe carousel instead of seven huge vertical cards. */
  body[data-page="home"] .collection-grid {
    display: flex !important;
    gap: .8rem !important;
    width: calc(100% + (var(--mobile-gutter) * 2));
    margin-left: calc(var(--mobile-gutter) * -1);
    padding: 0 var(--mobile-gutter) .8rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body[data-page="home"] .collection-grid::-webkit-scrollbar,
  body[data-page="home"] .process-list::-webkit-scrollbar,
  .collection-detail-gallery__rail::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .collection-card,
  body[data-page="home"] .collection-card:last-child {
    flex: 0 0 min(84vw, 22rem) !important;
    grid-column: auto !important;
    scroll-snap-align: center;
  }

  body[data-page="home"] .collection-card__media {
    height: auto !important;
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] .collection-card__body {
    padding: .85rem .05rem 1rem !important;
    grid-template-columns: 1fr auto !important;
    gap: .55rem !important;
  }

  body[data-page="home"] .collection-card h3 {
    font-size: clamp(1.7rem, 8vw, 2.3rem) !important;
  }

  body[data-page="home"] .collection-card p {
    font-size: .78rem;
  }

  body[data-page="home"] .collection-card__price {
    white-space: nowrap;
    font-size: .64rem;
  }

  body[data-page="home"] .statement {
    min-height: 52svh !important;
    padding: 4rem var(--mobile-gutter) !important;
  }

  body[data-page="home"] .statement p {
    font-size: clamp(3rem, 14vw, 4.6rem) !important;
  }

  /* Process becomes a swipeable five-card journey. */
  body[data-page="home"] .process {
    padding: 4.2rem 0 !important;
  }

  body[data-page="home"] .process-intro,
  body[data-page="home"] .process-intro__copy {
    display: block !important;
  }

  body[data-page="home"] .process-intro h2 {
    margin: .5rem 0 1rem;
    font-size: clamp(2.35rem, 10vw, 3.25rem);
    line-height: 1;
  }

  body[data-page="home"] .process-lead {
    font-size: .98rem;
    line-height: 1.5;
  }

  body[data-page="home"] .process-list,
  body[data-page="home"] .process-list--detailed {
    display: flex !important;
    width: calc(100% + (var(--mobile-gutter) * 2));
    margin: 1.7rem 0 1.5rem calc(var(--mobile-gutter) * -1) !important;
    padding: 0 var(--mobile-gutter) .7rem !important;
    gap: .7rem !important;
    border-top: 0 !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body[data-page="home"] .process-list li,
  body[data-page="home"] .process-list li:nth-child(4),
  body[data-page="home"] .process-list li:nth-child(n+5) {
    flex: 0 0 min(84vw, 22rem);
    min-height: 16rem !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start;
    gap: .75rem;
    padding: 1.25rem !important;
    border: 1px solid var(--line) !important;
    background: rgba(255,255,255,.34);
    scroll-snap-align: center;
  }

  body[data-page="home"] .process-list strong {
    margin: .3rem 0 0 !important;
    font-size: 1.55rem !important;
  }

  body[data-page="home"] .process-list p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
  }

  body[data-page="home"] .process-outro {
    margin-top: 1rem;
  }

  body[data-page="home"] .process-keywords {
    font-size: .65rem;
    line-height: 1.55;
  }

  /* Gold feature = editorial card, not another full viewport. */
  body[data-page="home"] .feature {
    display: block !important;
    min-height: 0 !important;
  }

  body[data-page="home"] .feature__media {
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] .feature__copy {
    padding: 2.4rem var(--mobile-gutter) 3rem !important;
  }

  body[data-page="home"] .feature__copy h2 {
    font-size: clamp(2.45rem, 11vw, 3.4rem) !important;
  }

  /* ---------- CONFIGURATOR: clear steps + touch-first cards ---------- */
  body[data-page="home"] .configurator {
    padding: 4.25rem 0 3.25rem !important;
  }

  body[data-page="home"] .configurator__head {
    margin-bottom: 1.35rem !important;
    gap: .75rem !important;
  }

  body[data-page="home"] .configurator__head h2 {
    max-width: 11ch !important;
    font-size: clamp(2.6rem, 11vw, 3.6rem) !important;
    line-height: 1;
  }

  body[data-page="home"] .configurator__head p {
    font-size: .88rem;
    line-height: 1.55;
  }

  body[data-page="home"] .configurator__layout {
    display: block !important;
  }

  body[data-page="home"] .configurator__main {
    min-height: 0 !important;
    padding: 0 !important;
  }

  body[data-page="home"] .config-steps {
    position: sticky;
    z-index: 20;
    top: var(--mobile-header-h);
    margin: 0 calc(var(--mobile-gutter) * -1) 1.25rem !important;
    padding: .7rem var(--mobile-gutter) .55rem !important;
    gap: .35rem !important;
    overflow-x: auto;
    background: rgba(247,243,235,.96);
    border-block: 1px solid rgba(20,18,15,.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    scrollbar-width: none;
  }

  body[data-page="home"] .config-steps li {
    flex: 0 0 auto !important;
    min-width: 5.3rem;
    font-size: .58rem !important;
    gap: .28rem !important;
  }

  body[data-page="home"] .config-panel h3 {
    max-width: 14ch !important;
    margin-bottom: .55rem !important;
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
    line-height: 1.02;
  }

  body[data-page="home"] .config-panel > p {
    margin-bottom: 1.15rem !important;
    font-size: .88rem;
    line-height: 1.5;
  }

  body[data-page="home"] .option-grid,
  body[data-page="home"] .option-grid--products {
    grid-template-columns: 1fr !important;
    gap: .65rem !important;
  }

  body[data-page="home"] .option-card {
    min-height: 0 !important;
    padding: 1rem !important;
    gap: .65rem;
  }

  body[data-page="home"] .option-card strong {
    font-size: 1.38rem !important;
  }

  /* Keep product/detail galleries obvious and swipeable at every step. */
  body[data-page="home"] .collection-detail-gallery {
    margin: 1rem 0 1.3rem !important;
  }

  body[data-page="home"] .collection-detail-gallery__head {
    display: block !important;
    margin-bottom: .65rem !important;
  }

  body[data-page="home"] .collection-detail-gallery__rail {
    width: calc(100% + var(--mobile-gutter));
    grid-auto-columns: min(82vw, 21rem) !important;
    gap: .55rem !important;
    scroll-snap-type: x mandatory !important;
  }

  body[data-page="home"] .collection-detail-gallery__item {
    scroll-snap-align: center !important;
  }

  body[data-page="home"] .collection-detail-gallery__zoom,
  body[data-page="home"] .gene-map-reference button {
    width: 2.55rem !important;
    height: 2.55rem !important;
  }

  body[data-page="home"] .gene-map-intro {
    grid-template-columns: 1fr 5.5rem !important;
    gap: .75rem !important;
  }

  body[data-page="home"] .gene-map-reference {
    width: 5.5rem !important;
  }

  body[data-page="home"] .chromosome-map-grid {
    grid-template-columns: 1fr !important;
    gap: .5rem !important;
  }

  body[data-page="home"] .chromosome-map-card {
    min-height: 0 !important;
    padding: .85rem 1rem !important;
    grid-template-columns: 2.5rem 1fr;
    align-items: start;
    column-gap: .75rem;
  }

  body[data-page="home"] .chromosome-map-card > span {
    grid-row: 1 / span 2;
    font-size: 1.45rem;
  }

  body[data-page="home"] .config-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .55rem !important;
    margin-top: 1.3rem !important;
  }

  body[data-page="home"] .configurator__aside {
    position: static !important;
    margin-top: 1.6rem;
    padding: 1.2rem 0 0 !important;
    border-top: 1px solid var(--line);
  }

  body[data-page="home"] .config-summary__image {
    margin-bottom: 1rem !important;
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] .config-summary h3 {
    margin-bottom: .8rem !important;
  }

  body[data-page="home"] .config-summary dl > div {
    gap: .6rem !important;
  }

  body[data-page="home"] .config-summary dd {
    max-width: 65%;
  }

  body[data-page="home"] .config-summary__price {
    font-size: 2.25rem !important;
  }

  /* Lightboxes behave like a photo viewer on phones. */
  .config-lightbox,
  .event-lightbox,
  .product-lightbox {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    padding: max(.65rem, env(safe-area-inset-top)) .5rem max(.65rem, env(safe-area-inset-bottom)) !important;
    background: rgba(8,7,6,.98) !important;
  }

  .config-lightbox img,
  .event-lightbox img,
  .product-lightbox img {
    max-width: calc(100vw - 1rem) !important;
    max-height: 82dvh !important;
    object-fit: contain !important;
  }

  .config-lightbox__nav {
    width: 2.65rem !important;
    height: 2.65rem !important;
    font-size: 1.65rem !important;
  }

  /* ---------- Materials / kit / VIP / Event on Home ---------- */
  body[data-page="home"] .materials {
    padding: 4rem 0 !important;
  }

  body[data-page="home"] .materials__grid {
    gap: 1.6rem !important;
  }

  body[data-page="home"] .materials__image {
    aspect-ratio: 4 / 5;
  }

  body[data-page="home"] .kit {
    display: flex !important;
    min-height: 0 !important;
    flex-direction: column;
  }

  body[data-page="home"] .kit__media {
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    order: 0 !important;
  }

  body[data-page="home"] .kit__copy {
    padding: 2.6rem var(--mobile-gutter) 3rem !important;
    order: 1;
  }

  body[data-page="home"] .vip {
    min-height: 72svh !important;
    place-items: end start !important;
  }

  body[data-page="home"] .vip::after {
    background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.08) 72%) !important;
  }

  body[data-page="home"] .vip__copy {
    width: 100% !important;
    padding: 3rem var(--mobile-gutter) 3.2rem;
  }

  body[data-page="home"] .vip__copy h2 {
    font-size: clamp(2.8rem, 13vw, 4rem);
  }

  .home-event__media {
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
  }

  .home-event__copy {
    padding: 2.5rem var(--mobile-gutter) 3rem !important;
  }

  /* ---------- STORY / CONTACT / MAISON PAGES ---------- */
  .story-hero,
  .contact-hero,
  .maison-hero,
  .events-hero {
    min-height: 0 !important;
    padding-top: calc(var(--mobile-header-h) + 3rem) !important;
    padding-bottom: 3.25rem !important;
  }

  .story-hero__grid,
  .contact-hero__grid,
  .maison-hero__grid,
  .events-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 1.35rem !important;
  }

  .story-hero h1,
  .contact-hero h1,
  .maison-hero h1,
  .events-hero h1 {
    max-width: 11ch !important;
    font-size: clamp(2.9rem, 13vw, 4.35rem) !important;
    line-height: .96 !important;
  }

  .story-hero .lede,
  .contact-hero .lede,
  .maison-hero .lede,
  .events-hero .lede {
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
  }

  .story-principles,
  .contact-direct,
  .maison-cards,
  .partner-section,
  .editorial-gallery,
  .event-gallery,
  .event-limited,
  .event-video,
  .event-press {
    padding-block: 3.5rem !important;
  }

  .story-section-heading,
  .contact-section-heading,
  .maison-section-heading,
  .event-gallery__head {
    margin-bottom: 1.4rem !important;
  }

  .story-principles__grid,
  .contact-grid,
  .maison-card-grid--2,
  .maison-card-grid--3,
  .partner-grid,
  .editorial-gallery__grid {
    grid-template-columns: 1fr !important;
    gap: .8rem !important;
  }

  .story-principle,
  .contact-card,
  .maison-card,
  .maison-card--text,
  .partner-card {
    min-height: 0 !important;
    padding: 1.25rem !important;
  }

  .story-feature,
  .maison-feature,
  .event-feature,
  .story-philosophy__grid,
  .story-closing__grid,
  .maison-dark__grid,
  .event-limited__grid,
  .event-video__grid,
  .event-press__grid {
    grid-template-columns: 1fr !important;
  }

  .story-feature__media,
  .maison-feature__media,
  .event-feature__media {
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
  }

  .story-feature__copy,
  .maison-feature__copy,
  .event-feature__copy {
    padding: 2.4rem var(--mobile-gutter) 3rem !important;
  }

  .story-feature__copy h2,
  .maison-feature__copy h2,
  .event-feature__copy h2,
  .story-philosophy blockquote,
  .maison-dark h2 {
    font-size: clamp(2.55rem, 11vw, 3.55rem) !important;
    line-height: 1 !important;
  }

  .story-philosophy,
  .maison-dark {
    padding-block: 4rem !important;
  }

  .story-closing {
    padding-block: 3.6rem !important;
  }

  .story-closing__actions,
  .contact-hero__actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: .6rem !important;
  }

  /* Event media becomes native swipe content. */
  .event-gallery__rail {
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-inline: contain;
  }

  .event-gallery__item {
    flex-basis: 84vw !important;
    scroll-snap-align: center;
  }

  .event-video video {
    width: 100%;
    max-height: 70svh;
    object-fit: contain;
    background: #000;
  }

  /* ---------- FOOTER: readable, touch friendly ---------- */
  .site-footer {
    padding: 3.4rem 0 calc(2rem + env(safe-area-inset-bottom)) !important;
  }

  .site-footer__top {
    grid-template-columns: 1fr !important;
    gap: 1.7rem !important;
    padding-bottom: 2rem !important;
  }

  .site-footer__brand {
    grid-column: auto !important;
    font-size: clamp(2.5rem, 12vw, 3.8rem) !important;
  }

  .site-footer nav {
    gap: 0 !important;
  }

  .site-footer nav a {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: .9rem !important;
  }

  .site-footer__bottom {
    padding-top: 1.5rem !important;
    gap: .5rem !important;
    font-size: .6rem !important;
    line-height: 1.5;
  }

  /* ---------- Legacy public pages: tame their old fixed controls ---------- */
  body[data-page="processo"],
  body[data-page="nft"],
  body[data-page="la-nascita"],
  body[data-page="smart-connect"] {
    padding-bottom: var(--mobile-dock-h) !important;
  }

  body[data-page="processo"] .dna-nav,
  body[data-page="nft"] .dna-nav,
  body[data-page="la-nascita"] .dna-nav,
  body[data-page="smart-connect"] .dna-nav {
    height: var(--mobile-header-h) !important;
    padding-top: env(safe-area-inset-top) !important;
  }

  body[data-page="processo"] .page-hero,
  body[data-page="nft"] .page-hero,
  body[data-page="la-nascita"] .page-hero,
  body[data-page="smart-connect"] .page-hero {
    min-height: 42svh !important;
    padding: calc(var(--mobile-header-h) + 2.2rem) var(--mobile-gutter) 2.5rem !important;
  }

  body[data-page="processo"] .page-hero h1,
  body[data-page="nft"] .page-hero h1,
  body[data-page="la-nascita"] .page-hero h1,
  body[data-page="smart-connect"] .page-hero h1 {
    font-size: clamp(2.65rem, 12vw, 4rem) !important;
  }

  /* ---------- Shop/product pages ---------- */
  .shop-maison-nav {
    height: var(--mobile-header-h) !important;
    padding: env(safe-area-inset-top) var(--mobile-gutter) 0 !important;
  }

  .shop-maison-nav .nav-links {
    display: none !important;
  }

  .shop-brand span {
    display: none;
  }

  .shop-brand img {
    width: 2.7rem !important;
    height: 2.7rem !important;
  }

  .shop-product-main,
  .product-shell,
  .shop-shell {
    padding-inline: var(--mobile-gutter) !important;
  }

  .shop-product-layout,
  .product-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .shop-product-gallery,
  .product-gallery {
    position: static !important;
  }

  .product-gallery__thumbs {
    display: flex !important;
    overflow-x: auto;
    gap: .45rem !important;
    scrollbar-width: none;
  }

  .product-gallery__thumbs button {
    flex: 0 0 5.4rem;
  }

  .product-info h1,
  .shop-product-info h1 {
    font-size: clamp(2.25rem, 10vw, 3.25rem) !important;
  }

  .product-trust {
    grid-template-columns: 1fr !important;
  }

  .shop-toolbar,
  .shop-results__bar {
    grid-template-columns: 1fr !important;
  }

  /* Reduce motion when the device/user asks for it. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}

@media (max-width: 23.5rem) {
  .mobile-quick-dock a,
  .mobile-quick-dock button {
    font-size: .49rem;
  }

  body[data-page="home"] .hero__actions {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .hero__statement {
    bottom: 18.8rem !important;
  }

  .story-hero h1,
  .contact-hero h1,
  .maison-hero h1,
  .events-hero h1 {
    font-size: clamp(2.55rem, 12.5vw, 3.4rem) !important;
  }
}

@media (max-width: 48rem) {
  .mobile-universal-menu {
    position: fixed;
    z-index: 1400;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1.5rem;
    padding: calc(1rem + env(safe-area-inset-top)) var(--mobile-gutter) calc(1rem + env(safe-area-inset-bottom));
    background: rgba(20,18,15,.99);
    color: #fffdf8;
    transform: translateY(105%);
    visibility: hidden;
    transition: transform 320ms ease, visibility 320ms;
  }

  .mobile-universal-menu.is-open {
    transform: translateY(0);
    visibility: visible;
  }

  .mobile-universal-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.4rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .mobile-universal-menu__head strong {
    color: var(--gold, #c9b28a);
    font-family: var(--serif, Georgia, serif);
    font-size: 1.15rem;
    font-weight: 400;
  }

  .mobile-universal-menu__close {
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
  }

  .mobile-universal-menu nav {
    display: grid;
    align-content: center;
  }

  .mobile-universal-menu nav a {
    display: flex;
    min-height: 3.6rem;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: #fffdf8;
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(1.8rem, 8.5vw, 2.7rem);
    line-height: 1.05;
    text-decoration: none;
  }

  .mobile-universal-menu__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: rgba(255,255,255,.6);
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}

@media (max-width: 48rem) {
  body[data-page="processo"] .lang-toggle,
  body[data-page="nft"] .lang-toggle,
  body[data-page="la-nascita"] .lang-toggle,
  body[data-page="smart-connect"] .lang-toggle {
    top: auto !important;
    right: max(.7rem, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mobile-dock-h) + .7rem) !important;
    z-index: 820 !important;
    background: rgba(248,245,238,.96) !important;
    border: 1px solid rgba(20,18,15,.12) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  body[data-page="processo"] .nav-links,
  body[data-page="nft"] .nav-links,
  body[data-page="la-nascita"] .nav-links,
  body[data-page="smart-connect"] .nav-links {
    top: var(--mobile-header-h) !important;
    right: 0 !important;
    width: 100vw !important;
    max-height: calc(100dvh - var(--mobile-header-h) - var(--mobile-dock-h)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: .65rem var(--mobile-gutter) 1.25rem !important;
    background: rgba(20,18,15,.985) !important;
    color: #fffdf8 !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.22) !important;
  }

  body[data-page="processo"] .nav-links li a,
  body[data-page="nft"] .nav-links li a,
  body[data-page="la-nascita"] .nav-links li a,
  body[data-page="smart-connect"] .nav-links li a {
    min-height: 2.9rem !important;
    padding: .55rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: #fffdf8 !important;
    font-size: .86rem !important;
    letter-spacing: .06em;
  }
}


/* ================================================================
   MOBILE POLISH 2026-08-27B
   - Home hero: show the complete artwork image instead of a severe crop.
   - Mobile drawer: keep the header/X above the drawer so it is always closable.
   ================================================================ */
@media (max-width: 48rem) {
  /* The drawer sits below the active header. The hamburger therefore turns
     into a visible X and remains reachable while the menu is open. */
  body.menu-open .site-header {
    z-index: 1451 !important;
    background: rgba(20, 18, 15, 0.99) !important;
    color: #fffdf8 !important;
    border-bottom-color: rgba(255,255,255,.10) !important;
    -webkit-backdrop-filter: blur(20px) saturate(115%);
    backdrop-filter: blur(20px) saturate(115%);
  }

  body.menu-open .mobile-drawer {
    z-index: 1450 !important;
  }

  body.menu-open .menu-button {
    position: relative;
    z-index: 2;
  }

  /* Full-image mobile hero. The source image was composed as one artwork,
     therefore phones should see the complete frame rather than a narrow crop. */
  body[data-page="home"] .hero {
    display: block !important;
    min-height: 0 !important;
    padding: var(--mobile-header-h) 0 0 !important;
    background: #171512 !important;
    overflow: hidden;
  }

  body[data-page="home"] .hero__media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1616 / 973;
    background: #171512;
    overflow: hidden;
  }

  body[data-page="home"] .hero__media img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  body[data-page="home"] .hero__media::after {
    background: linear-gradient(0deg, rgba(10,9,7,.34) 0%, transparent 32%) !important;
    pointer-events: none;
  }

  body[data-page="home"] .hero__statement {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    margin: 1.15rem auto .85rem !important;
    transform: none !important;
    text-align: center !important;
    font-size: clamp(.88rem, 3.9vw, 1.05rem) !important;
    line-height: 1.3 !important;
    letter-spacing: .09em !important;
    white-space: normal !important;
  }

  body[data-page="home"] .hero__content,
  body[data-page="home"] .hero__content--meta-only {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    margin: 0 auto !important;
    padding: 0 0 1.25rem !important;
    display: block !important;
  }

  body[data-page="home"] .hero__meta {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: .95rem !important;
    border-top: 1px solid rgba(255,255,255,.28);
  }

  body[data-page="home"] .hero__meta p {
    max-width: 23rem !important;
  }

  body[data-page="home"] .hero__scroll {
    display: none !important;
  }
}