/* ═══════════════════════════════════════════════════════════
   SONCHAFA — Mobile polish
   ───────────────────────────────────────────────────────────
   Loaded LAST so these rules win the cascade against any
   stale @media blocks in main.css / checkout.css.

   Philosophy on a phone:
   • more breathing room, not denser
   • bigger touch targets (≥44×44)
   • 16px inputs (prevent iOS auto-zoom on focus)
   • Marathi accents stay, but a tick smaller so they don't
     fight body text in mixed-script paragraphs
   • clamp() for type so it scales smoothly 320 → 768px
   • hide pure-decoration chrome on small screens
   • honour safe-area-inset for notched phones
   ═══════════════════════════════════════════════════════════ */

/* ───────────── GLOBAL TWEAKS, all viewports ───────────── */
html {
  /* Stop Safari/Chrome from auto-resizing body text on rotate */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Cleaner tap feedback — kills the grey/blue flash, lets our
   own :active state shine through */
a, button, [role="button"], .nav-link, .icon-btn, .saree-card,
.mobile-menu-link, .drawer-item, .variant-swatch, .variant-arrow {
  -webkit-tap-highlight-color: transparent;
}

/* Inline Marathi accents — drop them by ~6% so they sit nicely
   inside body copy without dominating it */
.marathi-accent {
  font-size: 0.94em;
  line-height: 1.4;
}

/* ───────────── TABLET & BELOW (≤ 768px) ───────────── */
@media (max-width: 768px) {

  /* TYPOGRAPHY — fluid scaling between phone and tablet */
  body { font-size: 16px; line-height: 1.65; }

  .title-major   { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.1; }
  .title-script  { font-size: clamp(1.7rem, 7vw, 2.3rem); line-height: 1.15; }
  .title-grand   { font-size: clamp(1.85rem, 7.5vw, 2.3rem); line-height: 1.15; }
  .hero-subtitle, .section-subtitle {
    font-size: clamp(0.98rem, 3.6vw, 1.1rem);
    line-height: 1.6;
    max-width: 100%;
  }

  /* Section headings: nicer wrap on narrow screens */
  .section-title, .hero-title, .heritage-title {
    text-wrap: balance;
  }

  /* SECTION PADDING — generous side gutter, tighter vertical */
  .collection-section,
  .heritage-section,
  .atelier-section {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .section-header { margin-bottom: 1.75rem; }

  /* NAV — bigger touch targets */
  .nav { padding: 0.6rem 0; }
  .nav-inner { gap: 0.5rem; padding: 0 1rem; }
  .icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 8px;
  }
  .nav-actions { gap: 0.25rem; }
  .logo-crown img { height: 36px !important; }
  .logo-title { font-size: 1.1rem; letter-spacing: 0.06em; }
  .brand-marathi { font-size: 0.78rem; margin-top: 1px; }
  /* On phones the third logo sub-line "साडी तुमची..." crowds the
     header — drop it; users see the same line in the hero anyway. */
  .logo-sub-marathi { display: none !important; }

  /* HERO — shorter, less ornamental */
  .hero {
    padding: 88px 1.25rem 2.5rem;
    min-height: auto;
  }
  .hero-ornament { display: none; }
  .hero-eyebrow { margin-bottom: 1rem; gap: 0.5rem; }
  .eyebrow-line { max-width: 24px; }
  .eyebrow-text {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    line-height: 1.55;
  }
  .eyebrow-text .marathi { font-size: 0.88rem; }
  .hero-title { margin-bottom: 1.25rem; }
  .hero-subtitle { margin-bottom: 1.75rem; }

  .hero-actions {
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 1.75rem;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    padding: 0.95rem 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
  }

  /* Hero stats — line them up tighter, smaller eyebrow */
  .hero-stats {
    padding-top: 1.5rem;
    gap: 0.6rem;
    justify-content: space-between;
    width: 100%;
  }
  .stat { flex: 1; text-align: center; min-width: 0; }
  .stat strong { font-size: 1.35rem; display: block; }
  .stat span {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    line-height: 1.35;
    word-break: break-word;
  }
  .stat-divider { height: 32px; flex: 0 0 1px; }

  /* SHOWCASE — keep maintenance card breathable */
  .showcase { min-height: auto; }
  .maintenance-card {
    padding: 1.5rem 1.25rem;
    max-width: 100%;
    text-align: center;
  }
  .maintenance-eyebrow { font-size: 0.95rem; }
  .maintenance-title { font-size: 1.7rem; margin-bottom: 0.65rem; }
  .maintenance-desc { font-size: 0.92rem; line-height: 1.55; margin-bottom: 1.1rem; }
  .maintenance-card .btn { width: 100%; min-height: 46px; justify-content: center; }

  /* ORNATE DIVIDERS — keep but compress */
  .ornate-divider { padding: 2rem 1rem; }

  /* SAREE CARDS ──────────────────────────────────────────── */
  .saree-grid,
  .jewelry-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  /* Card hover effects can stay; only adjust spacing */
  .card-body { padding: 1.2rem 1.2rem 1.4rem; }
  .card-region {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    margin-bottom: 0.3rem;
  }
  .card-name {
    font-size: 1.4rem;
    margin-bottom: 0.35rem;
  }
  .card-fabric {
    font-size: 0.92rem;
    margin-bottom: 0.85rem;
    /* Stop super-long fabric strings ("Cotton-silk · zari ·
       embroidered borders") from wrapping into 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-meta {
    padding-top: 0.85rem;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .card-price-soon {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    padding: 0.35rem 0.6rem;
  }
  .card-tag {
    top: 0.75rem; left: 0.75rem;
    font-size: 0.58rem;
    padding: 0.28rem 0.7rem;
    letter-spacing: 0.24em;
  }
  .card-fav {
    top: 0.75rem; right: 0.75rem;
    width: 40px; height: 40px;          /* bigger, easier to tap */
  }

  /* Variant swatch bar — make swatches a touch bigger */
  .variant-bar {
    grid-template-columns: auto 1fr auto auto;
    padding: 0.55rem 0.55rem;
    gap: 0.5rem;
  }
  .variant-arrow { width: 32px; height: 32px; }
  .variant-swatch { width: 28px; height: 28px; }
  .variant-label {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }

  /* HERITAGE SECTION — was the heaviest copy block on mobile */
  .heritage-section { padding-top: 2.75rem; padding-bottom: 2.75rem; }
  .heritage-content { gap: 2rem; }
  .heritage-title .title-script { font-size: 1.8rem; }
  .heritage-title .title-grand  { font-size: 2rem; line-height: 1.12; }
  .heritage-para {
    font-size: 1rem;
    line-height: 1.7;
    text-align: left;
    margin-bottom: 1rem;
  }
  .heritage-para:first-letter { font-size: 2.3rem; }
  .heritage-frame { max-width: 240px; margin: 0 auto; }
  .signature-script { font-size: 1.9rem; }
  .signature-trans-marathi { font-size: 0.92rem !important; }

  /* JEWELRY / COMING-SOON */
  .coming-soon-overlay { padding: 1rem; }
  .coming-soon-card {
    padding: 1.75rem 1.25rem;
    max-width: 100%;
  }
  .coming-soon-eyebrow { font-size: 1rem; }
  .coming-soon-title  { font-size: 2.1rem; line-height: 1.05; }
  .coming-soon-desc   {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
  }
  .coming-soon-card .btn {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  /* ATELIER FORM */
  .atelier-section { padding-top: 3rem; padding-bottom: 3rem; }
  .atelier-content { padding: 0; }
  .atelier-form { margin-top: 1.75rem; }
  .form-row { grid-template-columns: 1fr; gap: 0.85rem; }
  .form-input,
  .checkout-form input,
  .checkout-form select,
  .checkout-form textarea,
  .atelier-form textarea {
    /* 16px is the magic number that prevents iOS Safari from
       zooming in when an input is focused */
    font-size: 16px !important;
    min-height: 48px;
    padding: 0.85rem 1rem;
    border-radius: 4px;
  }
  .atelier-form textarea { min-height: 110px; padding-top: 0.85rem; }
  .btn-large {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
  }

  /* FOOTER — single column, no awkward 2-col half states */
  .footer { padding: 2.75rem 1.25rem 1.5rem; }
  .footer-content {
    grid-template-columns: 1fr !important;
    gap: 1.75rem;
    text-align: left;
  }
  .footer-col h4 {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    margin-bottom: 0.65rem;
  }
  .footer-col ul li,
  .footer-col ul li a {
    font-size: 0.95rem;
    line-height: 1.85;
  }
  .footer-col ul li a {
    /* Bigger tap target for phone numbers + email */
    display: inline-block;
    padding: 0.15rem 0;
  }
  .footer-tagline { font-size: 0.95rem; line-height: 1.55; }
  .footer-bottom {
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.78rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
  }
  .footer-decoration { opacity: 0.6; }

  /* Designer credit — stack into rows on phone so name + links
     don't run off the edge */
  .footer-credit {
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.82rem;
  }
  .credit-name { font-size: 1rem; }
  .credit-name::before,
  .credit-name::after { margin: 0 0.35rem; }
  .credit-links { gap: 0.4rem; }
  .credit-link {
    /* Bigger tap target on phone — phone + LinkedIn are the
       whole point of this section */
    padding: 0.2rem 0.25rem;
  }

  /* DRAWERS (cart + favourites) — full-width sheets on phone */
  .drawer {
    max-width: 100%;
    width: 100%;
  }
  .drawer-header {
    padding: 1rem 1.1rem;
    /* Honour the notch */
    padding-top: max(1rem, env(safe-area-inset-top));
  }
  .drawer-body  { padding: 1rem 1.1rem; }
  .drawer-footer {
    padding: 1rem 1.1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .drawer-title h3 { font-size: 1.5rem; }
  .drawer-eyebrow  { font-size: 0.66rem; letter-spacing: 0.22em; }
  .drawer-close { width: 44px; height: 44px; }

  .drawer-item {
    grid-template-columns: 72px 1fr auto;
    gap: 0.75rem;
    padding: 0.75rem;
  }
  .drawer-item-img { width: 72px; height: 92px; }
  .drawer-item-name { font-size: 1rem; }
  .drawer-item-meta { font-size: 0.82rem; }

  .drawer-checkout {
    width: 100%;
    min-height: 50px;
    justify-content: center;
  }

  /* MOBILE MENU — bigger touch targets, less cramped */
  .mobile-menu {
    width: min(340px, 92vw);
    padding: 5.5rem 1.5rem 1.5rem;
    padding-top: max(5.5rem, calc(4rem + env(safe-area-inset-top)));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
  .mobile-menu-link {
    padding: 1rem 0.85rem;
    font-size: 1.55rem;
    min-height: 56px;
  }

  /* TOAST — sit safely above the iOS home indicator */
  .toast {
    bottom: max(1.5rem, calc(1rem + env(safe-area-inset-bottom)));
    font-size: 0.95rem;
    padding: 0.85rem 1.25rem;
    max-width: calc(100vw - 2rem);
  }
}

/* ───────────── PHONE (≤ 480px) — main mobile pass ───────────── */
@media (max-width: 480px) {

  /* Title-script wants a little more room not to crowd the major */
  .title-major  { font-size: clamp(1.85rem, 8.5vw, 2.4rem); }
  .title-script { font-size: clamp(1.55rem, 7vw, 2rem); }
  .title-grand  { font-size: clamp(1.75rem, 7.8vw, 2.15rem); }

  /* Section eyebrow gets cramped on tiny phones — break it */
  .section-eyebrow,
  .hero-eyebrow .eyebrow-text {
    flex-wrap: wrap;
    justify-content: center;
  }
  .section-eyebrow { gap: 0.4rem; }

  /* Hide one stat divider on iPhone-mini width to keep the row legible */
  .hero-stats { gap: 0.4rem; }
  .stat span { font-size: 0.58rem; }

  /* Tighter card body — but keep image breathing */
  .card-body { padding: 1rem 1rem 1.2rem; }
  .card-name { font-size: 1.28rem; }
  .card-fabric { font-size: 0.88rem; -webkit-line-clamp: 1; }

  /* Hero stats — go to 2 columns + hide divider on tiny screens */
  /* (kept 3-col on most phones; only collapse on truly small) */

  /* Drawer header type one notch smaller */
  .drawer-title h3 { font-size: 1.35rem; }
}

/* ───────────── SMALL PHONES (≤ 360px) ───────────── */
@media (max-width: 360px) {
  .nav-inner { padding: 0 0.75rem; }
  .icon-btn { width: 42px; height: 42px; }
  .nav-actions #favBtn { display: none; }  /* keep cart + menu only */
  .logo-title { font-size: 1rem; }
  .brand-marathi { font-size: 0.72rem; }

  .hero { padding-left: 1rem; padding-right: 1rem; }
  .collection-section,
  .heritage-section,
  .atelier-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* On 320–360px iPhones the 3-stat row gets too tight — drop the
     middle divider so each stat owns a comfortable column */
  .hero-stats .stat-divider:nth-of-type(2) { display: none; }
  .stat span { font-size: 0.55rem; }
}

/* ───────────── CHECKOUT MODAL on phones ───────────── */
@media (max-width: 700px) {
  .checkout-panel {
    width: 100%;
    height: 100dvh;       /* full viewport, dynamic-viewport-aware */
    max-height: 100dvh;
    border-radius: 0;
  }
  .checkout-header {
    padding: 0.9rem 1rem;
    padding-top: max(0.9rem, env(safe-area-inset-top));
    gap: 0.5rem;
  }
  .checkout-brand h2 { font-size: 1.15rem; }
  .checkout-brand .checkout-eyebrow { font-size: 0.62rem; }
  .checkout-secure { font-size: 0.65rem; }
  .checkout-logo { height: 32px; }

  /* Progress bar — keep numbers, hide labels on phone */
  .checkout-progress {
    padding: 0.7rem 0.85rem;
    gap: 0.3rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .checkout-progress::-webkit-scrollbar { display: none; }
  .step-item { gap: 0.3rem; min-width: auto; }
  .step-num { width: 28px; height: 28px; font-size: 0.8rem; }
  .step-label {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }
  .step-line { min-width: 14px; }

  .checkout-body {
    grid-template-columns: 1fr;
    padding: 1.1rem;
    padding-bottom: max(1.1rem, env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .step-title { font-size: 1.45rem; margin-bottom: 0.5rem; }
  .step-desc  { font-size: 0.95rem; margin-bottom: 1.25rem; }

  /* Order summary on phone — sits BELOW the form, not beside */
  .checkout-summary {
    position: static;
    margin-top: 1.5rem;
    padding: 1.1rem;
  }
  .checkout-summary h4 { font-size: 0.95rem; }

  /* Step navigation buttons full-width, stacked, primary first
     visually but with `Back` underneath */
  .step-actions {
    flex-direction: column-reverse;
    gap: 0.6rem;
    margin-top: 1.5rem;
  }
  .step-actions .btn {
    width: 100%;
    min-height: 50px;
    justify-content: center;
  }

  /* OTP input — make the dot field BIG on phone, easy to read */
  .otp-input {
    font-size: 1.6rem !important;
    letter-spacing: 0.5em;
    text-align: center;
    padding: 0.85rem 0.5rem;
    min-height: 56px;
  }

  /* Payment method tabs */
  .payment-tabs {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .payment-tab {
    padding: 0.9rem 0.65rem;
    min-height: 72px;
  }
  .payment-tab span:not(.payment-tab-soon) { font-size: 0.78rem; }
  .payment-tab-soon { font-size: 0.55rem; padding: 0.15rem 0.5rem; }
}

/* ───────────── SAFE-AREA / NOTCH SUPPORT (all phones) ───────────── */
/* Apply on body so background washes don't leak past the cutout */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .nav {
      padding-left:  env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
    .footer {
      padding-left:  max(1.25rem, env(safe-area-inset-left));
      padding-right: max(1.25rem, env(safe-area-inset-right));
      padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
  }
}

/* ───────────── FOCUS / KEYBOARD POLISH ─────────────
   Cleaner outline for users who tab through with a keyboard.
   Only show on :focus-visible so mouse clicks stay un-ringed. */
:focus-visible {
  outline: 2px solid var(--gold-rich);
  outline-offset: 2px;
  border-radius: 3px;
}
.btn:focus-visible,
.icon-btn:focus-visible,
.nav-link:focus-visible {
  outline-color: var(--gold-bright);
}

/* Better :active feedback on phone (replaces the killed tap highlight) */
@media (hover: none) {
  .btn:active,
  .icon-btn:active,
  .mobile-menu-link:active,
  .variant-swatch:active,
  .variant-arrow:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }
}

/* ───────────── REDUCED MOTION (accessibility) ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}