/* =============================================================================
   PEARL VEIL — RESPONSIVE.CSS  (complete rewrite, Phase 7 v2)
   =============================================================================
   Single source of truth for all mobile/tablet adjustments.
   Loaded LAST on every page so these rules always win.
   Desktop (>900px) is completely untouched — every rule here is inside a
   max-width media query or a mobile-only feature query.

   Tested widths: 320px · 375px · 390px · 414px · 768px · 1024px
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 0 — GLOBAL OVERFLOW PREVENTION
   Applied unconditionally. Prevents any element from causing horizontal scroll.
───────────────────────────────────────────────────────────────────────────── */

html {
  overflow-x: hidden;
  /* Prevent iOS tap callout on non-interactive elements */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Every element respects its container width */
*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;           /* critical: allows flex/grid children to shrink below content size */
  max-width: 100%;
}

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

/* Text never creates horizontal overflow */
p, span, a, h1, h2, h3, h4, h5, h6,
li, td, th, label, button, dt, dd {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Prevent iOS Safari font size inflation */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;    /* prevents iOS zoom on focus */
  }
}

/* Remove tap highlight flash on all interactive elements */
@media (max-width: 768px) {
  a, button, [role="button"], input, select, textarea, label {
    -webkit-tap-highlight-color: transparent;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 1 — ANNOUNCEMENT BAR
   Problem: 90-character text in a single-line bar clips on all phones.
   Fix: Allow text to wrap to 2 lines, increase bar height, add padding.
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  :root {
    --announcement-height: auto;   /* remove fixed height so it can grow */
  }

  .announcement-bar {
    height: auto !important;
    min-height: 40px;
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4);
    position: fixed;
  }

  .announcement-bar__text {
    white-space: normal;
    text-align: center;
    line-height: var(--leading-relaxed);
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: var(--space-1) 0;
  }

  /* main-content offset recalculates via JS — if bar changes height the
     offset still works because JS reads offsetHeight at runtime */
  .main-content {
    padding-top: calc(var(--nav-height) + 48px);  /* 48px covers 2-line bar */
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 2 — SITE HEADER / NAVIGATION
   Problem: 3-column grid (logo | nav | actions) — at 320px the logo text
   "Pearl Veil" (white-space:nowrap) and 4 icon buttons overlap.
   Fix: Tighten grid padding, reduce logo size, reduce icon gap.
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .site-header__inner {
    padding: 0 var(--space-4);
    grid-template-columns: 40px 1fr 40px;   /* hamburger | logo (centered) | cart */
  }

  .site-header__logo {
    justify-content: center;
  }

  .logo-wordmark {
    font-size: var(--text-lg);
    letter-spacing: 0.15em;
  }

  /* Actions — only show search + cart on mobile (hide wishlist, account) */
  .site-header__actions {
    gap: 0;
    justify-content: flex-end;
  }

  .header-action-btn {
    width: 36px;
    height: 36px;
  }

  /* Hide wishlist and account icons to prevent crowding at 320px */
  .header-action-btn[aria-label="Wishlist"],
  .header-action-btn[aria-label="Account"] {
    display: none;
  }
}

@media (max-width: 360px) {
  .logo-wordmark {
    font-size: 1rem;
    letter-spacing: 0.1em;
  }

  .site-header__inner {
    padding: 0 var(--space-3);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 3 — LAYOUT / CONTAINERS
   Ensure containers have consistent safe padding on all phones.
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  :root {
    --container-padding: 1rem;     /* 16px — comfortable thumb zone */
    --section-gap:       2.5rem;   /* tighter vertical rhythm */
  }

  .container,
  .container-narrow,
  .container-wide {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
}

@media (max-width: 360px) {
  :root {
    --container-padding: 0.875rem;  /* 14px — minimum comfortable padding */
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 4 — HOME PAGE / HERO
   Problem: hero title too large, actions row overflows, trust bar clips,
            features-strip items overflow horizontally.
───────────────────────────────────────────────────────────────────────────── */

/* Hero headline */
@media (max-width: 480px) {
  .hero__title,
  .hero__headline {
    font-size: clamp(1.9rem, 8.5vw, 2.75rem) !important;
    line-height: 1.2;
    hyphens: auto;
  }
}

@media (max-width: 360px) {
  .hero__title,
  .hero__headline {
    font-size: clamp(1.6rem, 9vw, 2.2rem) !important;
  }
}

/* Hero CTA buttons */
@media (max-width: 480px) {
  .hero__actions,
  .hero__cta-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero__actions .btn,
  .hero__cta-group .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Hero trust numbers bar */
@media (max-width: 480px) {
  .hero__trust {
    gap: var(--space-2) !important;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero__trust-item {
    min-width: 80px;
    flex: 0 0 auto;
  }

  .hero__trust-number {
    font-size: var(--text-xl);
  }

  .hero__trust-label {
    font-size: 9px;
    letter-spacing: 0.05em;
  }

  .hero__trust-divider {
    display: none;
  }
}

/* Decorative background circle — hides on mobile to prevent overflow */
@media (max-width: 768px) {
  .hero__bg-circle {
    display: none !important;
  }
}

/* Features strip — horizontal items cause scroll */
@media (max-width: 768px) {
  .features-strip__track {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    white-space: normal;
    animation: none !important;
    transform: none !important;
  }

  .feature-strip-item {
    white-space: normal;
    gap: var(--space-2);
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-3) var(--space-2);
  }

  .feature-strip-item span {
    font-size: 10px;
    letter-spacing: 0.07em;
  }

  .feature-strip-divider {
    display: none !important;
  }
}

@media (max-width: 360px) {
  .features-strip__track {
    grid-template-columns: 1fr !important;
    gap: var(--space-2);
  }
}

/* Home page section headings */
@media (max-width: 480px) {
  .section-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .section-header {
    text-align: center;
  }
}

/* Newsletter form in homepage */
@media (max-width: 480px) {
  .newsletter-form {
    flex-direction: column !important;
    gap: var(--space-3) !important;
  }

  .newsletter-form input,
  .newsletter-form .btn {
    width: 100% !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 5 — PRODUCT GRIDS
   Already 2-col at ≤860px (layout.css). This handles edge cases.
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .product-grid-4,
  .product-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3) !important;
  }

  .product-card__name {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  .product-card__price {
    font-size: var(--text-sm);
  }
}

@media (max-width: 320px) {
  .product-grid-4,
  .product-grid-3 {
    grid-template-columns: 1fr !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 6 — PRODUCT DETAIL PAGE
   Problems:
   • .product-info__actions = quantity-selector + flex:1 ATC button + 50px icon
     at 320px this row is ~360px wide and overflows
   • color swatch row doesn't wrap on narrow screens
   • product tabs don't scroll horizontally
   • gallery thumbs clip
───────────────────────────────────────────────────────────────────────────── */

/* ── 6a. Add-to-Bag row ── */
@media (max-width: 600px) {
  .product-info__actions {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: center;
  }

  /* quantity-selector stays as-is (auto width) */
  /* ATC button stretches to fill middle */
  .product-info__actions .btn-add-to-cart,
  #product-add-to-cart {
    min-width: 0;
    width: 100% !important;
    font-size: var(--text-xs);
    padding: 0 var(--space-3);
    letter-spacing: 0.08em;
  }

  /* Wishlist icon button — keep its fixed 50px width but let grid handle it */
  #product-wishlist-btn {
    flex-shrink: 0;
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 390px) {
  /* On SE — stack: [quantity row] then [full-width ATC] then [wishlist] */
  .product-info__actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .product-info__actions .quantity-selector {
    flex: 0 0 auto;
  }

  .product-info__actions .btn-add-to-cart,
  #product-add-to-cart {
    flex: 1;
    min-width: 120px;
    height: 48px !important;
    font-size: var(--text-xs);
  }

  #product-wishlist-btn {
    width: 44px !important;
    height: 48px !important;
    flex: 0 0 44px;
  }
}

/* ── 6b. Quantity selector — tap-friendly size ── */
@media (max-width: 768px) {
  .quantity-selector__btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: var(--text-lg);
  }

  .quantity-selector__input {
    height: 40px;
    width: 44px;
    text-align: center;
  }
}

/* ── 6c. Color options — wrap and don't overflow ── */
@media (max-width: 480px) {
  .color-options {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .color-option {
    width: 36px;
    height: 36px;
  }

  .product-option-group__label {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .product-option-group__label .selected-value {
    width: 100%;
    font-size: var(--text-xs);
  }
}

/* ── 6d. Gallery main image ── */
@media (max-width: 600px) {
  .product-gallery__main {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-sm);
  }

  /* Disable zoom on touch — confusing UX */
  .product-gallery__main {
    cursor: default !important;
  }

  .product-gallery__zoom-hint {
    display: none !important;
  }
}

/* ── 6e. Gallery thumbnails — horizontal scroll ── */
@media (max-width: 600px) {
  .product-gallery__thumbs {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
    gap: var(--space-2);
  }

  .product-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }

  .product-gallery__thumb {
    width: 64px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
  }
}

/* ── 6f. Product tabs — horizontal scroll ── */
@media (max-width: 600px) {
  .product-tabs__nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding-bottom: 0;
  }

  .product-tabs__nav::-webkit-scrollbar {
    display: none;
  }

  .product-tabs__btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
  }
}

/* ── 6g. Product trust badges — tighter on mobile ── */
@media (max-width: 480px) {
  .product-trust-badges {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding: var(--space-4) 0;
  }

  .product-trust-badge svg {
    width: 18px;
    height: 18px;
  }

  .product-trust-badge span {
    font-size: 9px;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 360px) {
  .product-trust-badges {
    grid-template-columns: 1fr !important;
    gap: var(--space-3);
  }

  .product-trust-badge {
    flex-direction: row;
    text-align: left;
    gap: var(--space-3);
  }
}

/* ── 6h. Reviews section ── */
@media (max-width: 480px) {
  .reviews-summary {
    flex-direction: column;
    gap: var(--space-6);
  }

  .reviews-summary__bars {
    min-width: unset;
    width: 100%;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 7 — SHOP PAGE
   Problems: filter sidebar bleeding, toolbar cramped, pagination clips.
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .shop-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .shop-toolbar__left,
  .shop-toolbar > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .shop-toolbar__controls,
  .shop-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .mobile-filter-toggle {
    flex: 1;
    justify-content: center;
  }

  .shop-sort-group,
  .shop-sort-group select {
    flex: 1;
    width: 100%;
  }

  /* Active filter tags wrap */
  .active-filter-tags {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .active-filter-tag {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }
}

/* Pagination */
@media (max-width: 480px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
  }

  .pagination-btn {
    min-width: 36px;
    height: 36px;
    font-size: var(--text-xs);
    padding: 0 var(--space-2);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 8 — CART PAGE
   Problems: .cart-page-item grid clips price column; quantity controls too small;
             order summary mini items clip; promo input row overflows.
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* Cart item — already handled in cart-checkout.css at 600px.
     Here we fix sub-600px edge cases. */
  .cart-page-item {
    gap: var(--space-3) !important;
    padding: var(--space-4) var(--space-4) !important;
  }

  .cart-page-item__image {
    width: 72px !important;
    height: 90px !important;
    border-radius: var(--radius-xs);
  }

  .cart-page-item__name {
    font-size: var(--text-base);
  }

  /* Quantity + price row within the 2-col grid layout */
  .cart-page-item__qty {
    justify-self: start;
  }

  .cart-page-item__price {
    white-space: nowrap;
    font-size: var(--text-sm);
  }
}

/* Promo form — stack on narrow screens */
@media (max-width: 480px) {
  .promo-form,
  #promo-form {
    display: flex;
    flex-direction: column !important;
    gap: var(--space-3) !important;
  }

  .promo-form .form-input,
  #promo-input {
    width: 100%;
  }

  .promo-form .btn,
  #promo-apply {
    width: 100%;
    justify-content: center;
  }
}

/* Shipping options */
@media (max-width: 480px) {
  .shipping-option {
    padding: var(--space-4);
    gap: var(--space-3);
    align-items: flex-start;
  }

  .shipping-option__label {
    font-size: var(--text-sm);
  }

  .shipping-option__eta {
    font-size: var(--text-xs);
  }

  .shipping-option__price {
    white-space: nowrap;
    font-size: var(--text-sm);
    flex-shrink: 0;
  }
}

/* Order summary mini items */
@media (max-width: 480px) {
  .summary-item {
    gap: var(--space-3);
  }

  .summary-item__name {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
  }

  .summary-item__price {
    font-size: var(--text-xs);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .cost-row {
    font-size: var(--text-sm);
  }

  .cost-row--total {
    font-size: var(--text-base);
  }

  .order-summary-panel__header {
    padding: var(--space-4) var(--space-4);
  }

  .order-summary-panel__body {
    padding: var(--space-4);
  }
}

/* Cart drawer — full viewport width on phones */
@media (max-width: 480px) {
  .cart-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0;
  }

  .cart-drawer__header {
    padding: var(--space-4);
  }

  .cart-drawer__items {
    padding: 0 var(--space-4);
  }

  .cart-item__image {
    width: 72px !important;
    height: 90px !important;
  }

  .cart-item__name {
    font-size: var(--text-base);
  }

  .cart-item__bottom {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .cart-drawer__footer {
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  .cart-drawer__actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .cart-drawer__actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 9 — CHECKOUT PAGE
   Problems: step-indicator clips labels at 320px; panel padding cramped;
             back+continue button pairs shrink CTA; payment icon row overflows.
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .checkout-page-header {
    padding-top: var(--space-8);
    padding-bottom: var(--space-5);
  }

  .checkout-page-header__title {
    font-size: var(--text-xl);
  }
}

/* Step indicator */
@media (max-width: 600px) {
  .checkout-steps {
    gap: var(--space-2);
    padding: var(--space-4) 0;
  }

  .checkout-step__number {
    width: 28px;
    height: 28px;
    font-size: var(--text-xs);
    flex-shrink: 0;
  }

  .checkout-step__label {
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .checkout-step__connector {
    min-width: 20px;
    flex: 1;
    max-width: 40px;
  }
}

@media (max-width: 360px) {
  .checkout-step__label {
    display: none;
  }

  .checkout-step__connector {
    min-width: 12px;
    max-width: 20px;
  }

  .checkout-step__number {
    width: 24px;
    height: 24px;
  }
}

/* Panel body */
@media (max-width: 480px) {
  .checkout-panel {
    margin-bottom: var(--space-4);
    border-radius: var(--radius-sm);
  }

  .checkout-panel__header {
    padding: var(--space-4) var(--space-4);
  }

  .checkout-panel__body {
    padding: var(--space-5) var(--space-4) !important;
  }

  .checkout-panel__summary {
    padding: var(--space-3) var(--space-4);
  }

  /* Stack the back + continue button pairs */
  .checkout-panel__body > div[style*="flex"]:has(button),
  #checkout-panel-2 .checkout-panel__body > div:last-child,
  #checkout-panel-3 .checkout-panel__body > div:last-child {
    flex-wrap: wrap;
    gap: var(--space-3) !important;
  }

  #btn-step2-continue,
  #btn-place-order {
    flex: 1;
    min-width: 120px;
  }

  #btn-back-step2,
  #btn-back-step3 {
    flex-shrink: 0;
    min-width: 80px;
  }
}

/* Payment icons */
@media (max-width: 480px) {
  .payment-icons {
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
  }

  .payment-icon-badge {
    font-size: 10px;
    padding: var(--space-1) var(--space-2);
  }
}

/* Stripe placeholder */
@media (max-width: 480px) {
  .stripe-placeholder {
    font-size: var(--text-xs);
    gap: var(--space-2);
    flex-wrap: wrap;
    height: auto !important;
    min-height: var(--input-height);
    padding: var(--space-3) var(--space-3);
  }
}

/* All form rows in checkout stack at 390px */
@media (max-width: 390px) {
  .form-row {
    grid-template-columns: 1fr !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 10 — CHECKOUT SUCCESS PAGE
───────────────────────────────────────────────────────────────────────────── */

.success-shipping-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 600px) {
  .success-shipping-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-5);
  }

  .success-card {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-md);
  }

  .success-card__actions {
    flex-direction: column !important;
    gap: var(--space-3);
  }

  .success-card__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .success-order-number {
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-wide);
    word-break: break-all;
  }

  .success-item {
    gap: var(--space-3);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 11 — ACCOUNT / AUTH PAGES
   Problems: auth card too wide at 320px, form padding cramped.
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .auth-page {
    padding: var(--space-10) var(--space-4) var(--space-8);
    align-items: flex-start;
    min-height: 100svh;
  }

  .auth-card {
    padding: var(--space-7) var(--space-5);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 100%;
  }

  .auth-card__title {
    font-size: var(--text-xl);
  }

  .auth-card__subtitle {
    font-size: var(--text-sm);
  }

  .auth-form {
    gap: var(--space-4);
  }

  .auth-footer {
    font-size: var(--text-sm);
  }
}

/* Password strength bar — doesn't clip */
@media (max-width: 480px) {
  .password-strength {
    margin-top: var(--space-2);
  }

  .password-field-wrap .form-input {
    padding-right: var(--space-10);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 12 — STATIC / INFORMATIONAL PAGES
───────────────────────────────────────────────────────────────────────────── */

/* Static hero */
@media (max-width: 480px) {
  .static-hero {
    padding-top: var(--space-10);
    padding-bottom: var(--space-8);
  }

  .static-hero__title {
    font-size: clamp(1.5rem, 7vw, 2.25rem) !important;
    hyphens: auto;
  }

  .static-hero__subtitle {
    font-size: var(--text-sm);
  }

  .static-hero__breadcrumb {
    flex-wrap: wrap;
    row-gap: var(--space-1);
    justify-content: center;
  }
}

/* About page */
@media (max-width: 768px) {
  .about-mission {
    grid-template-columns: 1fr !important;
    gap: var(--space-8);
  }

  .about-mission__image {
    aspect-ratio: 4/3;
    max-height: 300px;
  }

  .founder-card {
    grid-template-columns: 1fr !important;
    text-align: center;
    padding: var(--space-6);
  }

  .founder-card__image {
    max-width: 160px;
    margin: 0 auto;
  }

  .founder-card__quote {
    font-size: var(--text-xl);
  }

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

/* Contact page */
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: var(--space-8);
  }
}

@media (max-width: 480px) {
  .contact-form-panel {
    padding: var(--space-6) var(--space-5);
  }
}

/* FAQ */
@media (max-width: 480px) {
  .faq-question {
    padding: var(--space-4) 0;
    gap: var(--space-3);
  }

  .faq-question__text {
    font-size: var(--text-sm);
    flex: 1;
    min-width: 0;
  }

  .faq-answer {
    font-size: var(--text-sm);
    padding-bottom: var(--space-4);
  }
}

/* Shipping table — horizontal scroll container */
@media (max-width: 768px) {
  .shipping-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--container-padding));
    padding: 0 var(--container-padding);
  }

  .shipping-table {
    min-width: 480px;
  }
}

/* Prose pages */
@media (max-width: 480px) {
  .prose h2 {
    font-size: var(--text-xl);
  }

  .prose h3 {
    font-size: var(--text-lg);
  }

  .prose {
    font-size: var(--text-sm);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 13 — ORDER TRACKING
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .tracking-search-card {
    padding: var(--space-7) var(--space-5);
  }

  .tracking-search-card__title {
    font-size: var(--text-xl);
  }

  /* Form stacks on mobile */
  #tracking-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  #tracking-input {
    width: 100%;
  }

  #tracking-lookup-btn {
    width: 100%;
    justify-content: center;
  }

  .tracking-event__status {
    font-size: var(--text-sm);
  }

  .tracking-event__date {
    font-size: 11px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 14 — WISHLIST
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .wishlist-share-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .wishlist-share-bar__actions {
    display: flex;
    gap: var(--space-2);
  }

  .wishlist-share-bar__actions .btn {
    flex: 1;
    justify-content: center;
  }

  .wishlist-empty .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 15 — MODALS (Quick View, Search)
───────────────────────────────────────────────────────────────────────────── */

/* Quick view — full screen on phones */
@media (max-width: 640px) {
  .quick-view-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    height: 100dvh;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Also stack QV content */
  .quick-view-body > div,
  .quick-view-body > .grid {
    grid-template-columns: 1fr !important;
  }

  .quick-view-body .product-info__actions {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

/* Search overlay padding on mobile */
@media (max-width: 480px) {
  .search-overlay {
    padding: var(--space-10) var(--space-4) var(--space-8) !important;
  }

  .search-overlay__close {
    top: var(--space-4);
    right: var(--space-4);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 16 — NEWSLETTER POPUP
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .nl-popup {
    grid-template-columns: 1fr !important;
    width: min(400px, 95vw) !important;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nl-popup__image {
    display: none !important;
  }

  .nl-popup__content {
    padding: var(--space-8) var(--space-6);
  }

  .nl-popup__title {
    font-size: var(--text-xl);
  }

  .nl-popup__input-row {
    flex-direction: column;
    gap: var(--space-3);
  }

  .nl-popup__input-row .form-input,
  .nl-popup__input-row .btn {
    width: 100%;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 17 — COOKIE CONSENT BANNER
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .cookie-banner__text {
    font-size: var(--text-sm);
  }

  .cookie-banner__actions {
    display: flex;
    gap: var(--space-3);
    width: 100%;
  }

  .cookie-banner__accept,
  .cookie-banner__decline {
    flex: 1;
    text-align: center;
    padding: var(--space-3) var(--space-4);
  }
}

@media (max-width: 360px) {
  .cookie-banner__text {
    font-size: 12px;
  }

  .cookie-banner__accept,
  .cookie-banner__decline {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 18 — FOOTER
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }

  .footer-bottom__links {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .footer-newsletter-form {
    flex-direction: column;
    gap: var(--space-3);
  }

  .footer-newsletter-form input,
  .footer-newsletter-form .btn {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .footer-column__link {
    padding: var(--space-2) 0;
    font-size: var(--text-xs);
  }
}

/* Safe-area bottom padding for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .cart-drawer__footer {
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  }

  .cookie-banner {
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 19 — TOASTS / NOTIFICATIONS
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .toast-container {
    left: var(--space-3) !important;
    right: var(--space-3) !important;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    align-items: stretch !important;
  }

  .toast {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    font-size: var(--text-sm);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 20 — 404 PAGE
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .not-found-page__number {
    font-size: clamp(4.5rem, 22vw, 8rem);
  }

  .not-found-page__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .not-found-page__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .not-found-page__suggestions > div {
    justify-content: center;
  }

  .not-found-page__suggestions .btn {
    font-size: 11px;
    padding: var(--space-2) var(--space-3);
    min-height: 36px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 21 — ADMIN DASHBOARD
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .admin-stat-card {
    padding: var(--space-4);
  }

  .admin-stat-card__value {
    font-size: var(--text-xl);
    word-break: break-all;
  }

  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-table {
    min-width: 540px;
  }

  .admin-table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .admin-search-input {
    width: 100%;
    min-width: unset;
  }

  .admin-page {
    padding: var(--space-5) var(--space-4);
  }

  /* Discount creation form stacks */
  #page-discounts .admin-card > div[style*="grid"],
  #page-discounts .admin-card > div[style*="display:grid"] {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-4);
  }
}

@media (max-width: 390px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 22 — BUTTONS (global tap target safety net)
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .btn {
    min-height: 44px;    /* WCAG 2.1 AA minimum touch target */
  }

  .btn-sm {
    min-height: 38px;
  }

  /* Prevent double-tap zoom on buttons */
  .btn, button, a {
    touch-action: manipulation;
  }

  /* Momentum scrolling on overflow containers */
  .cart-drawer__items,
  .mobile-nav__drawer,
  .filter-sidebar.mobile-open,
  .quick-view-modal,
  .admin-main {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 23 — TABLET (601px–1024px) GRID ADJUSTMENTS
   Desktop stays at >1024px (layout.css handles 900px already).
───────────────────────────────────────────────────────────────────────────── */

@media (min-width: 601px) and (max-width: 1024px) {
  .product-grid-4 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  .admin-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  /* Contact layout — 1 column on tablet portrait */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 24 — CHECKOUT BUTTON ROWS (class-targeted)
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .checkout-btn-row {
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
  }

  .checkout-btn-row .btn-outline {
    flex: 0 0 auto;
    min-width: 80px;
  }

  .checkout-btn-row .btn-primary {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .checkout-btn-row {
    flex-direction: column !important;
  }

  .checkout-btn-row .btn {
    width: 100% !important;
    justify-content: center;
  }
}