/* RUAN v9 · handset and tablet responsive finishing pass.
   Desktop remains unchanged. Mobile is the same design system, recomposed for touch. */

/* Tablet: keep the desktop visual language but remove crowding. */
@media (max-width: 1023px) and (min-width: 768px) {
  .site-header { padding-inline: 20px; }
  .header-side { gap: 8px; }
  .header-control { min-width: 42px; min-height: 44px; }
  .wordmark { font-size: 30px; }

  .page-main { padding-top: 56px; padding-bottom: 88px; }
  .catalog-header { margin-bottom: 32px; }
  .product-grid--four, .selection-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 52px 18px; }
  .reference-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px 18px; }

  .store-toolbar--catalog { min-height: 60px; }
  .store-toolbar--catalog .store-count { margin-left: auto; }
  .store-toolbar--catalog .store-sort { margin-left: 8px; }
  .store-toolbar--catalog .store-sort span { display: inline; }
  .store-toolbar--catalog .store-sort select { max-width: 190px; }

  .pdp-main { display: block; }
  .pdp-gallery { width: min(100%, 760px); margin-inline: auto; }
  .gallery-frame { max-height: 72svh; }
  .entry-summary { padding: 48px 32px 72px; }
  .commerce-panel { max-width: 600px; }

  .footer-main { grid-template-columns: 1fr; gap: 36px; }
  .footer-nav { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 28px; }
}

/* Handsets */
@media (max-width: 767px) {
  html { overflow-x: clip; scroll-padding-top: calc(var(--header) + var(--admin-bar) + 12px); }
  body { min-width: 0; overflow-x: clip; }
  .shell { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

  /* Header: visual center is the viewport center, independent of icon count. */
  .site-header {
    position: sticky;
    grid-template-columns: 1fr 1fr;
    height: 54px;
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
  }
  .site-header .wordmark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    min-height: 44px;
    font-size: 27px;
    white-space: nowrap;
  }
  .header-side { gap: 0; min-width: 0; }
  .header-side--right { justify-self: end; }
  .header-control { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 10px; }
  .header-control svg { width: 20px; height: 20px; }
  .header-search, .header-account { display: none; }
  .favorites-count, .cart-count { right: 1px; top: 1px; }

  /* Full-height navigation and search, with safe-area handling. */
  .drawer[open] { display: flex; flex-direction: column; width: 100vw; height: 100dvh; max-height: 100dvh; }
  .overlay__head {
    flex: 0 0 auto;
    min-height: 54px;
    padding: 5px max(12px, env(safe-area-inset-right)) 5px max(16px, env(safe-area-inset-left));
  }
  .primary-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 30px max(20px, env(safe-area-inset-right)) 24px max(20px, env(safe-area-inset-left));
  }
  .primary-nav ul { gap: 0; }
  .primary-nav a { min-height: 52px; font-size: clamp(27px,8vw,34px); letter-spacing: -.035em; }
  .primary-nav .sub-menu { padding-left: 12px; }
  .primary-nav .sub-menu a { min-height: 44px; font-size: 17px; }
  .drawer-utility {
    flex: 0 0 auto;
    padding: 12px max(20px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    gap: 0;
  }
  .drawer-utility > a, .drawer-utility__action { min-height: 48px; font-size: 13px; }

  .search-panel[open] { display: flex; flex-direction: column; height: 100dvh; max-height: 100dvh; }
  .search-panel__inner { flex: 1 1 auto; overflow-y: auto; padding: 20px 16px calc(32px + env(safe-area-inset-bottom)); }
  .search-form > label { font-size: 12px; }
  .search-field input[type=search] { min-height: 52px; font-size: 19px; }
  .search-field button { width: 48px; min-width: 48px; height: 48px; }
  .search-results { display: block; }
  .search-result { gap: 14px; min-height: 92px; }
  .search-result img { width: 58px; height: 72px; }

  /* Hero: preserve full-bleed impact, but keep controls clear of browser chrome. */
  .hero { height: 100svh; min-height: 560px; max-height: 920px; }
  .hero__poster img, .hero__video { object-position: var(--focal-mobile,center); }
  .hero__shade { background: linear-gradient(to bottom,rgba(0,0,0,.10),rgba(0,0,0,.34)); }
  .hero__copy { left: 20px; right: 20px; bottom: max(44px, calc(24px + env(safe-area-inset-bottom))); }
  .hero__copy h1 { font-size: clamp(36px,11vw,48px); }
  .hero__copy p { margin-top: 12px; font-size: 13px; }
  .hero__cta { margin-top: 12px; }
  .hero__video-control { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 44px; min-width: 44px; height: 44px; }

  /* Section rhythm and typography. */
  .section { padding-block: 72px; }
  .section-heading { align-items: center; gap: 16px; margin-bottom: 28px; }
  .section-heading .section-title, .section-title { font-size: 25px; line-height: 1.05; }
  .section-heading .text-link { flex: 0 0 auto; min-height: 40px; font-size: 12px; }

  /* Home: real two-column commerce grid rather than oversized horizontal cards. */
  .home-collection { padding-top: 72px; padding-bottom: 88px; }
  .home-collection__grid,
  .reference-product-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    justify-content: initial;
    gap: 36px 10px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }
  .home-collection__grid > .product-card,
  .reference-product-grid .product-card { min-width: 0; width: auto; flex: initial; scroll-snap-align: none; }
  .home-collection__grid > :only-child { grid-column: 1/-1; width: min(100%,440px); justify-self: center; }
  .product-card__image { aspect-ratio: 4/5; }
  .product-card__info { padding-top: 12px; }
  .product-card h3, .product-grid .product-card h3 { font-size: 15px; line-height: 1.25; }
  .product-card__color, .product-grid .product-card__color { margin-top: 5px; font-size: 11px; line-height: 1.35; }
  .product-card .price, .product-grid .price { margin-top: 7px; font-size: 13px; }
  .store-card .favorite-toggle { right: 5px; top: 5px; width: 40px; min-width: 40px; height: 40px; padding: 9px; }

  .home-journal { padding-block: 64px 72px; }
  .journal-grid { grid-template-columns: 1fr; gap: 44px; }
  .journal-card__info { padding-top: 14px; }
  .journal-card h3 { font-size: 17px; }

  .home-details { padding-block: 72px 84px; }
  .details-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -16px;
    padding: 0 16px 8px;
  }
  .details-grid::-webkit-scrollbar { display:none; }
  .details-grid figure { flex: 0 0 76vw; scroll-snap-align: start; }
  .details-grid figcaption { margin-top: 12px; font-size: 12px; }

  /* Content pages. */
  .page-main { padding-top: 38px; padding-bottom: 72px; }
  .page-title { margin-bottom: 28px; font-size: 29px; line-height: 1.05; }
  .catalog-header { margin-bottom: 26px; }
  .page-content, .article-body { font-size: 16px; line-height: 1.65; }
  .page-content > * + *, .article-body > * + * { margin-top: 20px; }
  .page-content h2, .article-body h2 { margin-top: 40px; }

  /* Collection toolbar: count gets its own quiet row; controls never collide. */
  .store-toolbar--catalog {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "count count" "filter sort";
    gap: 0;
    min-height: 0;
    margin-bottom: 28px;
    padding: 0;
    border-block: 1px solid var(--line);
  }
  .store-toolbar--catalog .store-count {
    grid-area: count;
    display: flex;
    align-items: center;
    min-height: 38px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    text-align: left;
  }
  .store-toolbar--catalog .store-filter-panel { grid-area: filter; min-width: 0; border-right: 1px solid var(--line); }
  .store-toolbar--catalog .store-filter-panel > summary { min-height: 52px; padding-right: 16px; gap: 12px; font-size: 13px; }
  .store-toolbar--catalog .store-sort {
    grid-area: sort;
    display: block;
    position: relative;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 28px 0 14px;
  }
  .store-toolbar--catalog .store-sort span { display: none; }
  .store-toolbar--catalog .store-sort::after { right: 14px; }
  .store-toolbar--catalog .store-sort select {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 52px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    text-overflow: ellipsis;
  }
  .store-filter-panel__body {
    position: fixed;
    z-index: 105;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-height: min(76dvh,640px);
    overflow-y: auto;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line);
    box-shadow: 0 -18px 50px rgba(0,0,0,.14);
    background: var(--paper);
  }
  .store-price-filter { grid-template-columns: 1fr 1fr; gap: 10px; }
  .store-filter-panel__body input, .store-filter-panel__body select { min-height: 50px; }
  .favorites-summary { min-height: 38px; margin: -8px 0 24px; }
  .favorites-summary .store-count { font-size: 11px; }

  /* Collection and favorites: two columns, no horizontal page overflow. */
  .product-grid,
  .product-grid--four,
  .selection-grid,
  .search-page-grid,
  .woocommerce ul.products {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 36px 10px;
  }
  .selection-grid { margin-top: 28px; }
  .favorite-card-actions, .favorite-card-actions:has(select) { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .favorite-card-actions select, .favorite-card-actions .favorite-add { min-height: 44px; width: 100%; font-size: 12px; }

  /* Product detail: swipe gallery and compact purchase hierarchy. */
  .pdp-main { display: block; min-height: 0; }
  .pdp-gallery { width: 100%; }
  .gallery-stage { width: 100%; touch-action: pan-y pinch-zoom; }
  .gallery-frame { aspect-ratio: 4/5; max-height: 72svh; }
  .gallery-frame img { padding: 5%; }
  .gallery-controls { min-height: 42px; padding: 8px 16px; }
  .gallery-thumbs { display: none; }
  .gallery-fraction { margin-left: auto; font-size: 11px; }
  .entry-summary, .storefront-page .entry-summary { padding: 26px 16px 88px; }
  .commerce-panel { max-width: none; }
  .commerce-panel .product_title { padding-right: 44px; margin-bottom: 8px; font-size: 25px; }
  .product-type { font-size: 12px; }
  .commerce-panel > .price { margin-top: 18px; margin-bottom: 22px; font-size: 15px; }
  .commerce-panel .product-favorite { top: -5px; right: -6px; width: 44px; min-width: 44px; height: 44px; }
  .product-availability { margin-top: 11px; font-size: 12px; }
  .product-code { margin-top: 12px; font-size: 11px; }
  .commerce-panel .cart { margin-top: 24px; }
  .variations, .variations tbody, .variations tr, .variations th, .variations td { display: block; width: 100%; }
  .variations th, .variations td { padding: 0; }
  .variations th { margin-bottom: 8px; }
  .native-color-select { min-height: 48px; }
  .swatches { gap: 8px; margin-top: 12px; }
  .swatch { min-height: 46px; padding: 8px 10px 8px 5px; font-size: 12px; }
  .swatch-color { width: 26px; height: 26px; }
  .product-accordions { margin-top: 30px; }
  .accordion summary { min-height: 54px; font-size: 13px; }
  .accordion__body { padding-bottom: 20px; font-size: 13px; }

  .mobile-cart {
    min-height: 68px;
    gap: 10px;
    padding: 8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    box-shadow: 0 -8px 22px rgba(0,0,0,.06);
  }
  .mobile-cart > span { min-width: 0; max-width: 38%; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-cart .button { flex: 1 1 auto; min-width: 0; min-height: 50px; padding-inline: 16px; }
  .ruan-product-page .site-footer, .single-product .site-footer { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }

  .zoom-panel { padding: 56px 8px calc(12px + env(safe-area-inset-bottom)); }
  .zoom-close { top: max(8px,env(safe-area-inset-top)); right: 8px; background: rgba(255,255,255,.84); }

  /* Cart / checkout / account */
  .cart-drawer-content { padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .shop_table.cart tr.cart_item { grid-template-columns: 84px minmax(0,1fr) 40px; gap: 10px; }
  .shop_table.cart .product-thumbnail { width: 84px; }
  .shop_table.cart .product-thumbnail img { width: 80px; height: 100px; }
  .shop_table.cart .product-remove { width: 40px; }
  .shop_table.cart .product-remove a { min-width: 40px; min-height: 40px; }
  .cart-collaterals { margin-top: 40px; }
  .cart_totals h2 { font-size: 21px; }
  .checkout :where(#order_review_heading) { margin-top: 40px; }
  .checkout :where(#order_review) { margin-inline: -16px; padding: 22px 16px; }
  .woocommerce-MyAccount-navigation { margin-bottom: 26px; }
  .woocommerce-MyAccount-navigation ul { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display:none; }
  .woocommerce-MyAccount-navigation li { flex: 0 0 auto; }
  .woocommerce-MyAccount-navigation a { min-height: 46px; padding: 0 14px; border-bottom: 0; white-space: nowrap; }
  .woocommerce-MyAccount-navigation .is-active a { border-bottom: 1px solid var(--ink); }
  .woocommerce-MyAccount-content { overflow-x: visible; }
  .woocommerce-Addresses { gap: 20px; }

  /* Journal article */
  .journal-article { padding-top: 0; padding-bottom: 72px; }
  .article-lead img { width: 100%; min-height: 0; max-height: 68svh; object-fit: cover; }
  .article-header { padding: 36px 16px 26px; }
  .article-header h1 { font-size: 30px; }
  .article-header .meta { margin-top: 16px; }

  /* Footer: unmistakably interactive accordion on touch devices. */
  .site-footer { padding-block: 44px 20px; }
  .footer-brand { margin-bottom: 26px; }
  .footer-wordmark { font-size: 36px; }
  .footer-group summary { min-height: 54px; font-size: 13px; }
  .footer-group summary .footer-group__icon { width: 20px; height: 20px; }
  .footer-group a { min-height: 42px; font-size: 13px; }
  .footer-bottom { margin-top: 26px; gap: 14px; }
  .footer-locale, .footer-legal-inline, .footer-copyright { font-size: 10px; }
  .footer-legal-inline { gap: 10px 14px; }

  .toast { bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); max-width: none; padding-left: 14px; }
}

/* Very narrow handsets: preserve two-column shopping, simplify copy. */
@media (max-width: 359px) {
  .site-header .wordmark { font-size: 24px; }
  .header-control { width: 40px; min-width: 40px; }
  .home-collection__grid, .reference-product-grid, .product-grid, .product-grid--four, .selection-grid, .search-page-grid, .woocommerce ul.products { gap-inline: 8px; }
  .product-card h3, .product-grid .product-card h3 { font-size: 14px; }
  .store-toolbar--catalog .store-sort { padding-left: 10px; padding-right: 24px; }
  .store-toolbar--catalog .store-sort::after { right: 10px; }
  .mobile-cart > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .details-grid, .gallery-stage { scroll-behavior: auto; }
}