/* Richie Gold & Diamonds — mobile-native storefront refinement, 2026-09-21.
 * A presentation-only layer for compact devices. It preserves catalogue data,
 * checkout policy and route actions while improving small-screen readability,
 * touch comfort, safe-area spacing and overflow resilience.
 */

:root {
  --richie-mobile-edge: max(12px, env(safe-area-inset-left, 0px));
  --richie-mobile-edge-right: max(12px, env(safe-area-inset-right, 0px));
  --richie-mobile-tabbar: calc(68px + env(safe-area-inset-bottom, 0px));
  --richie-mobile-actionbar: calc(76px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 100px;
    scroll-padding-bottom: calc(var(--richie-mobile-tabbar) + 24px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent;
  }

  /* Shared customer-route shell: an intentionally compact but comfortable
     control strip that stays inside 320px once the language selector mounts. */
  .nav {
    min-height: 64px;
    gap: 6px;
    padding: 8px var(--richie-mobile-edge) 8px var(--richie-mobile-edge);
  }
  .brand {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    gap: 7px;
  }
  .logo-img {
    width: 64px;
    height: 34px;
  }
  .brand-text {
    display: block;
    min-width: 0;
    max-width: calc(100vw - 184px);
  }
  .brand-name {
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand-sub { display: none; }
  .nav-links {
    flex: 0 0 auto;
    min-width: 0;
    gap: 4px;
  }
  .nav-links .lang-switch {
    position: relative;
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.03);
  }
  .nav-links .lang-switch .lang-globe {
    position: absolute;
    z-index: 0;
    display: grid;
    inset: 0;
    place-items: center;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
  }
  .nav-links .lang-switch select {
    position: relative;
    z-index: 1;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    color: transparent;
    background: transparent;
    cursor: pointer;
  }
  .nav-links .lang-switch select option { color: #f4f1e8; background: #081426; }
  .cur-toggle {
    flex: 0 0 auto;
    min-height: 44px;
    border-radius: 13px;
  }
  .cur-toggle button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    font-size: 10px;
    line-height: 1;
  }
  .nav-links .wa { display: none; }

  /* Catalogue: preserve a quick visual scan while giving price and actions
     stable reading space instead of allowing content to crowd the image. */
  #grid .card { min-width: 0; }
  #grid .card-body { padding: 10px; }
  #grid .card-name {
    display: -webkit-box;
    min-height: 2.35em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.18;
  }
  #grid .origin-price-row .card-price-now {
    font-size: clamp(17px, 5.15vw, 21px);
    letter-spacing: -0.015em;
  }
  #grid .card-actions {
    gap: 6px;
    margin-top: 2px;
  }
  #grid .card-actions .btn,
  #grid .card-actions .card-view {
    min-height: 44px;
    padding: 7px 3px;
    font-size: 8px;
  }

  /* Product detail: descriptions remain comfortably readable; the sticky
     controls reserve room for both the tab bar and device home indicator. */
  .crumbs {
    padding: 102px var(--richie-mobile-edge) 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .crumbs::-webkit-scrollbar { display: none; }
  .pdp {
    gap: 20px;
    padding-right: var(--richie-mobile-edge-right);
    padding-left: var(--richie-mobile-edge);
  }
  .pdp-media { margin-inline: calc(var(--richie-mobile-edge) * -1); }
  .pdp-info h1 {
    font-size: clamp(27px, 8.2vw, 34px);
    line-height: 1.08;
    text-wrap: balance;
  }
  .pdp-spec {
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: 0.025em;
  }
  .pdp-price-now { font-size: clamp(29px, 9.6vw, 36px); }
  .pdp-desc {
    color: #e1ded7;
    font-size: 16px;
    line-height: 1.7;
    text-wrap: pretty;
  }
  .pdp-origin {
    margin-bottom: 20px;
    padding: 14px;
    border-radius: 14px;
  }
  .pdp-origin h2 { font-size: 21px; }
  .origin-required {
    flex: 0 0 auto;
    padding: 4px 7px;
    font-size: 8px;
    letter-spacing: 0.09em;
  }
  .pdp-origin-copy {
    color: #e1ded7;
    font-size: 14px;
    line-height: 1.65;
  }
  .pdp-origin-disclosure {
    color: #d7e0e3;
    font-size: 12px;
    line-height: 1.55;
  }
  .origin-choice-group { grid-template-columns: minmax(0, 1fr); }
  .origin-choice { min-height: 56px; padding: 12px; }
  .origin-choice strong { font-size: 13px; }
  .origin-choice small { font-size: 11px; }
  .origin-choice b { font-size: 18px; }
  .pdp-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 14px;
    font-size: 11.5px;
    line-height: 1.35;
  }
  .pdp-trust span {
    display: block;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
  }
  .pdp-related { padding-inline: var(--richie-mobile-edge); }
  .pdp-actionbar {
    bottom: calc(var(--richie-mobile-tabbar) + 1px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(78px, .92fr) minmax(78px, .92fr);
    min-height: 76px;
    gap: 8px;
    padding: 10px var(--richie-mobile-edge) 10px var(--richie-mobile-edge);
    border-color: rgba(212, 175, 55, 0.27);
    background: rgba(8, 20, 38, 0.98);
  }
  .pdp-actionbar-price { min-width: 0; }
  .pdp-actionbar-name { max-width: none; font-size: 10px; }
  .pdp-actionbar-price strong { font-size: 18px; }
  .pdp-actionbar .btn {
    min-width: 0;
    min-height: 54px;
    padding: 10px 7px;
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: 0.04em;
  }
  .pdp-actionbar .btn-primary,
  .pdp-actionbar .btn-ghost { flex: initial; }
  body[data-page="product"] { padding-bottom: var(--richie-mobile-actionbar); }
  body[data-page="product"] .chat-fab { bottom: calc(var(--richie-mobile-actionbar) + 12px); }
  body[data-page="product"] .chat-panel { bottom: calc(var(--richie-mobile-actionbar) + 76px); }

  /* Checkout: retain a native, thumb-first summary in a single narrow column. */
  .co-grid {
    gap: 20px;
    padding: 106px var(--richie-mobile-edge) calc(var(--richie-mobile-tabbar) + 32px);
  }
  .co-line {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
  }
  .co-thumb img { width: 68px; height: 68px; }
  .co-line-name { font-size: 17px; line-height: 1.15; }
  .co-line-meta { line-height: 1.4; }
  .co-line-price { grid-column: 2; font-size: 19px; }
  .co-qty { gap: 8px; }
  .co-qty button { min-width: 40px; min-height: 40px; }
  .co-remove { min-height: 40px; }
  .co-form { padding: 18px; border-radius: 18px; }
  .co-form input,
  .co-form textarea { font-size: 16px; }
  .p404 { padding: 154px var(--richie-mobile-edge) calc(var(--richie-mobile-tabbar) + 38px); }
  .p404 .btn { width: 100%; min-height: 52px; }

  /* Native tab shell: consistent 44px-plus targets and no home-indicator clash. */
  .tabbar {
    min-height: var(--richie-mobile-tabbar);
    padding: 5px max(4px, env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
    background: rgba(8, 20, 38, 0.98);
    border-top-color: rgba(212, 175, 55, 0.2);
  }
  .tabbar a { min-height: 58px; font-size: 9px; letter-spacing: 0.06em; }
  .tabbar a svg { width: 20px; height: 20px; }
  .tabbar a:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }

  /* Digital Atelier: keep bespoke copy and form controls composed inside a
     320px viewport without losing labels, controls, or the original hierarchy. */
  .atelier-page { overflow-x: clip; }
  .atelier-header {
    width: min(100% - 24px, 1240px);
    gap: .45rem;
    overflow: hidden;
  }
  .atelier-brand { min-width: 0; gap: .45rem; }
  .atelier-brand span { min-width: 0; }
  .atelier-brand strong {
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .atelier-nav { flex: 0 0 auto; gap: .35rem; }
  .atelier-nav a { min-height: 44px; font-size: .57rem; letter-spacing: .055em; }
  .atelier-hero {
    min-height: auto;
    padding: 3.5rem 12px 2.5rem;
  }
  .atelier-hero h1 {
    max-width: 8ch;
    font-size: clamp(3.75rem, 18vw, 4.7rem);
    line-height: .9;
  }
  .atelier-intro { margin: 1.4rem 0 1.6rem; line-height: 1.6; }
  .atelier-study { margin-top: 2.2rem; }
  .atelier-builder-wrap,
  .atelier-brief-section,
  .atelier-ai-chat,
  .atelier-process,
  .atelier-education { width: min(100% - 24px, 1240px); }
  .atelier-section-title h2,
  .atelier-brief-head h2,
  .atelier-ai-chat h2,
  .atelier-process h2,
  .atelier-education h2 { font-size: clamp(2.35rem, 12vw, 3.1rem); }
  .atelier-intent-field { padding: 1rem !important; }
  .atelier-intent-field textarea,
  .atelier-selects input,
  .atelier-selects select,
  #atelier-chat-input { font-size: 16px; }
  .atelier-choice { min-height: 48px; font-size: .7rem; }
  .atelier-brief-panel { padding: 1rem; }
  #atelier-live-summary strong { font-size: clamp(1.9rem, 10vw, 2.4rem); }
  .atelier-ai-chat { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  .atelier-chat-shell { margin-top: 1.5rem; }
  .atelier-chat-form { padding: .85rem; }
  .atelier-composer { gap: .4rem; padding: .45rem; }
  .atelier-icon-button { min-width: 44px; min-height: 44px; }
  .atelier-chat-send { min-height: 50px; }
  .atelier-footer {
    width: min(100% - 24px, 1240px);
    min-height: 88px;
    flex-wrap: wrap;
    padding-block: 18px;
    line-height: 1.5;
  }
  .atelier-page :focus-visible { outline-offset: 2px; }
}

@media (max-width: 375px) {
  .nav { gap: 3px; padding-inline: 10px; }
  .brand { gap: 5px; }
  .logo-img { width: 50px; height: 32px; }
  .brand-text { max-width: 88px; }
  .brand-name { font-size: 12.5px; }
  .nav-links { gap: 0; }
  .nav-links .lang-switch,
  .nav-links .lang-switch select,
  .cur-toggle button { min-width: 44px; }
  .pdp-actionbar {
    grid-template-columns: minmax(0, 1fr) 80px 80px;
    gap: 6px;
    padding-inline: 10px;
  }
  .pdp-actionbar-name { display: none; }
  .pdp-actionbar-price strong { font-size: 17px; }
  .pdp-actionbar .btn { font-size: 9.5px; }
  .pdp-trust { gap: 6px; font-size: 11px; }
  .pdp-trust span { padding: 8px; }
  .atelier-header { width: min(100% - 16px, 1240px); gap: .25rem; }
  .atelier-brand img { width: 34px; height: 34px; }
  .atelier-brand small { display: none; }
  .atelier-brand strong { font-size: .92rem; }
  .atelier-nav { gap: .24rem; }
  .atelier-nav a { font-size: .54rem; letter-spacing: .035em; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-actionbar,
  .pdp-actionbar .btn,
  .tabbar a,
  .atelier-hero-cta,
  .atelier-handoff,
  .atelier-submit,
  .atelier-chat-send {
    transition: none !important;
  }
}