/* ============================================================
   SHAINY CREATION – mobile.css  v2.0  (COMPREHENSIVE FIX)
   ─────────────────────────────────────────────────────────
   Covers ALL pages: index, shop, cart, product, shipping,
   contact, about, faq, franchise, bulk-order, best-sellers,
   track-order, account, order-confirmation
   Load AFTER all other CSS files on every page.
   ============================================================ */

/* ═══════════════════════════════════════════════════
   SECTION 1 — BASE FIXES (apply at all sizes)
   ═══════════════════════════════════════════════════ */

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

img, video, iframe {
  max-width: 100%;
}

/* All buttons: minimum 44px touch target */
.btn, button, [role="button"] {
  min-height: 44px;
  cursor: pointer;
}

/* Prevent iOS zoom on input focus (font-size must be >= 16px) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
  font-size: 16px !important;
}

/* Nav icon buttons — minimum tap target */
.nav-icon-btn {
  min-width: 40px;
  min-height: 40px;
}

/* Fix: very long product/item names break layout everywhere */
.card-name,
.sum-item-name,
.cart-item-name,
.wish-card-name {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Ensure buttons never overflow their container */
.btn {
  max-width: 100%;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════
   SECTION 2 — TABLET  (max-width: 1024px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  .site-nav { padding: 0 28px; }
  .section-pad    { padding: 52px 32px; }
  .section-pad-sm { padding: 36px 32px; }
  .breadcrumb-bar { padding: 12px 28px; }

  .products-grid  { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .why-grid       { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .steps-grid     { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .category-grid  { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .stats-row      { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-top: 1px solid var(--border-soft); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer { padding: 48px 32px 24px; }

  .carousel-wrap { padding: 0 20px; }
  .carousel-track .product-card { flex: 0 0 calc(33.33% - 15px); }

  .shop-page-header { padding: 20px 32px 0; }
  .shop-layout      { padding: 20px 32px 52px; }
  .cart-layout { padding: 32px 32px 52px; }
  .product-detail-wrap { padding: 32px 32px; gap: 40px; }
  .product-tabs-wrap   { padding: 32px 32px; }
  .shipping-layout { padding: 28px 32px 52px; }
  .confirm-layout { padding: 28px 32px !important; }
}

/* ═══════════════════════════════════════════════════
   SECTION 3 — MOBILE  (max-width: 768px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Nav ── */
  .site-nav { padding: 0 16px; height: 58px; }
  .nav-left, .nav-right-links { display: none; }
  .hamburger { display: flex; }
  .logo { font-size: 1.125rem; }

  /* ── Top Bar ── */
  .top-bar {
    font-size: 10px;
    padding: 7px 12px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
    line-height: 1.5;
  }

  /* ── Sections ── */
  .section-pad    { padding: 40px 18px; }
  .section-pad-sm { padding: 28px 18px; }
  .breadcrumb-bar { padding: 10px 18px; font-size: 11px; }

  /* ── Typography ── */
  .section-heading h2 { font-size: 1.5rem; margin-bottom: 10px; }
  .section-heading p  { font-size: 0.875rem; }
  .hero-page h1 { font-size: 1.875rem; }
  .hero-page p  { font-size: 0.875rem; }

  /* ── Grids ── */
  .products-grid     { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .why-grid          { grid-template-columns: 1fr 1fr; gap: 14px; }
  .steps-grid        { grid-template-columns: 1fr 1fr; gap: 14px; }
  .category-grid     { grid-template-columns: 1fr 1fr; gap: 12px; }
  .testimonials-grid { grid-template-columns: 1fr; gap: 16px; }
  .stats-row         { grid-template-columns: 1fr 1fr; }

  /* ── Contact ── */
  .contact-layout { grid-template-columns: 1fr; gap: 24px; }
  .form-2col      { grid-template-columns: 1fr; gap: 0; }
  .contact-form-card { padding: 24px 18px; }
  .contact-form-card h2 { font-size: 1.375rem; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .site-footer { padding: 40px 18px 24px; }
  .footer-desc { max-width: 100%; }

  /* ── Newsletter ── */
  .newsletter-section { padding: 44px 18px; }
  .newsletter-inner h2 { font-size: 1.625rem; }
  .newsletter-form {
    flex-direction: column;
    border-radius: 4px;
    max-width: 100%;
  }
  .newsletter-form input { border-radius: 4px 4px 0 0; }
  .newsletter-form .btn  { border-radius: 0 0 4px 4px; width: 100%; }

  /* ── Promo banner ── */
  .promo-banner { padding: 44px 18px; }
  .promo-content h2 { font-size: 1.625rem; }

  /* ── Carousel ── */
  .carousel-wrap { padding: 0 12px; }
  .carousel-track .product-card { flex: 0 0 calc(50% - 8px); }

  /* ── Toast ── */
  .toast { bottom: 72px; right: 12px; left: 12px; min-width: 0; text-align: center; }

  /* ── Floating Cart ── */
  .floating-cart { display: flex; bottom: 16px; right: 14px; }

  /* ── Checkout Steps ── */
  .checkout-steps { padding: 14px 12px; gap: 4px; }
  .step           { font-size: 0.625rem; gap: 5px; }
  .step-num       { width: 26px; height: 26px; font-size: 10px; }
  .step-divider   { width: 24px; margin: 0 4px; }

  /* ── Stats ── */
  .stat-number { font-size: 2.25rem; }
  .stat-item   { padding: 24px 16px; }

  /* ── Testimonials ── */
  .testimonial-card { padding: 22px 18px; }

  /* ── Track order ── */
  .track-card { padding: 24px 18px; }
  .track-form-row { flex-direction: column; gap: 0; }
  .track-form-row .track-input {
    border-right: 1.5px solid var(--border);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
  }
  .track-form-row .btn { border-radius: 0 0 4px 4px; width: 100%; font-size: 11px; letter-spacing: .12em; padding: 13px; }
  .track-info-grid { grid-template-columns: 1fr; gap: 20px; }

  /* ── BUTTONS: Responsive text + sizing on mobile ── */
  /* Global btn: slightly smaller on mobile to prevent overflow */
  .btn {
    font-size: 12px;
    padding: 12px 20px;
    letter-spacing: .05em;
  }
  .btn-sm {
    font-size: 10px;
    padding: 9px 16px;
    letter-spacing: .04em;
    min-height: 40px;
  }
  .btn-lg {
    font-size: 12px;
    padding: 14px 28px;
  }
  /* Button SVG icons scale with font */
  .btn svg { width: 12px; height: 12px; }

  /* ─────────────────────────────────────────────
     INDEX PAGE
   ───────────────────────────────────────────── */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-content { padding: 44px 18px 24px; }
  .hero-title   { font-size: 2rem; line-height: 1.1; }
  .hero-sub     { font-size: 0.875rem; max-width: 100%; margin-bottom: 24px; }
  .hero-actions { gap: 10px; flex-wrap: wrap; }
  .hero-actions .btn { flex: 1; min-width: 140px; justify-content: center; }
  .hero-trust   { gap: 12px; flex-wrap: wrap; }
  .hero-visual  { height: 240px; }

  .age-grid   { gap: 10px; }
  .age-card   { min-width: 80px; padding: 14px 10px; }
  .age-icon   { width: 58px; height: 80px; margin-bottom: 10px; }
  .age-label  { font-size: 0.875rem; }

  .cat-img    { height: 160px; }
  .cat-body   { padding: 14px 16px; }
  .cat-body h3 { font-size: 1rem; }
  .cat-body p  { display: none; }

  /* ─────────────────────────────────────────────
     SHOP PAGE
   ───────────────────────────────────────────── */
  .shop-page-header { padding: 16px 18px 0; flex-wrap: wrap; gap: 8px; }
  .shop-page-header h1 { font-size: 1.5rem; }
  .shop-layout  { padding: 16px 18px 52px; gap: 16px; grid-template-columns: 1fr; }
  .shop-sidebar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    max-width: 320px;
    z-index: 260;
    overflow-y: auto;
    background: var(--white);
    padding: 28px 20px 40px;
    box-shadow: 4px 0 28px rgba(0,0,0,.12);
  }
  .shop-sidebar.open { display: block; }
  /* Filters button on mobile — responsive text */
  .mobile-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; }
  .mobile-filter-bar .btn,
  .mobile-filter-bar .btn-outline { font-size: 11px; padding: 9px 14px; }
  .shop-view-toggle  { display: none; }
  .shop-grid[data-cols="4"],
  .shop-grid[data-cols="2"] { grid-template-columns: 1fr 1fr; gap: 12px; }
  .shop-grid .product-img   { height: 200px; }

  /* ─────────────────────────────────────────────
     PRODUCT CARD (all pages)
   ───────────────────────────────────────────── */
  .card-body  { padding: 10px 12px 14px; }
  .card-name  { font-size: 13px; line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .card-meta  { font-size: 11px; margin-bottom: 5px; }
  .card-price { font-size: 14px; gap: 5px; }
  .card-price .original { font-size: 12px; }

  /* ─────────────────────────────────────────────
     CART PAGE
     Note: cart-item mobile layout is fully handled
     in cart.css (block layout, no grid on mobile)
   ───────────────────────────────────────────── */
  .cart-header-row h2 { font-size: 1.25rem; }

  /* Cart item name: 2-line clamp */
  .cart-item-name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 13px;
  }

  /* Cart summary rows — amounts never overflow */
  .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .summary-row span:first-child { flex: 1; min-width: 0; }
  .summary-row span:last-child  { flex-shrink: 0; white-space: nowrap; }

  /* "Proceed to Checkout" button — responsive */
  .checkout-btn { font-size: 11px; padding: 14px 16px; letter-spacing: .08em; }

  /* Coupon button */
  .coupon-btn { font-size: 10px; padding: 10px 12px; letter-spacing: .1em; }

  /* Clear cart button */
  .clear-cart-btn { font-size: 10px; }

  /* ─────────────────────────────────────────────
     PRODUCT PAGE
   ───────────────────────────────────────────── */
  .product-detail-wrap { grid-template-columns: 1fr; gap: 24px; padding: 22px 18px; }
  .product-images      { position: static; }
  .product-main-img    { height: 340px; }
  .product-thumbnails  { gap: 8px; }
  .product-thumb       { width: 62px; height: 70px; }
  .product-name        { font-size: 1.625rem; }
  .product-price       { font-size: 1.625rem; }
  .product-desc        { font-size: 0.875rem; }
  .product-tabs-wrap   { padding: 24px 18px; }
  .ptab                { padding: 11px 14px; font-size: 0.625rem; }

  /* Size buttons — wrap gracefully */
  .size-options        { display: flex; flex-wrap: wrap; gap: 8px; }
  .size-btn            { padding: 8px 14px; font-size: 12px; min-height: 40px; }

  /* Add to cart / wishlist buttons */
  .product-cta .btn    { font-size: 11px; letter-spacing: .12em; padding: 14px; }
  .wishlist-full-btn   { font-size: 10px; letter-spacing: .1em; padding: 12px; }

  /* Share button (inline-styled in product.html) — override */
  [onclick="shareProduct()"] {
    font-size: 10px !important;
    letter-spacing: .08em !important;
    padding: 10px 8px !important;
  }

  /* ─────────────────────────────────────────────
     SHIPPING / CHECKOUT PAGE
   ───────────────────────────────────────────── */
  .shipping-layout { grid-template-columns: 1fr; padding: 18px 18px 52px; gap: 20px; }
  .order-summary   { position: static; padding: 18px; width: 100%; box-sizing: border-box; }
  .form-card-body  { padding: 18px; }
  .form-card-head  { padding: 14px 18px; }
  .form-card-head h2 { font-size: 1rem; }
  .form-grid       { grid-template-columns: 1fr; }

  /* OTP row — stack on mobile */
  .input-btn-row {
    flex-direction: column;
    border-radius: 4px;
    overflow: visible;
    border: none;
    gap: 8px;
  }
  .input-btn-row input {
    border: 1.5px solid var(--border) !important;
    border-radius: 4px !important;
    width: 100%;
  }
  .otp-btn {
    border-radius: 4px;
    width: 100%;
    text-align: center;
    min-width: auto;
    font-size: 11px !important;
    letter-spacing: .1em !important;
    padding: 13px !important;
  }
  .otp-verify-row { flex-direction: column; gap: 8px; }
  .otp-verify-row input {
    border: 1.5px solid var(--border) !important;
    border-radius: 4px !important;
    width: 100%;
  }
  .otp-verify-btn { width: 100%; border-radius: 4px !important; }

  /* Payment options */
  .pay-option-body { padding: 12px 14px; gap: 12px; }
  .pay-option-body strong { font-size: 0.875rem; }

  /* Place Order button — responsive */
  .place-order-btn { font-size: 11px !important; letter-spacing: .14em !important; padding: 14px !important; }

  /* Order summary — prevent price cutoff */
  .sum-item        { gap: 8px; }
  .sum-item-info   { flex: 1 1 0; min-width: 0; overflow: hidden; }
  .sum-item-name   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 12px; }
  .sum-item-price  { flex-shrink: 0; white-space: nowrap; font-size: 13px; }

  /* ─────────────────────────────────────────────
     CONTACT / FRANCHISE / BULK-ORDER
   ───────────────────────────────────────────── */
  .contact-form-card { padding: 20px 16px; }
  .contact-form-card h2 { font-size: 1.25rem; }

  /* Submit buttons on forms — full width on mobile */
  .contact-form-card .btn-block,
  .franchise-form .btn-block { font-size: 12px; letter-spacing: .1em; padding: 14px; }

  /* ─────────────────────────────────────────────
     ABOUT PAGE
   ───────────────────────────────────────────── */
  /* CTA button row → column */
  .about-cta-row,
  [style*="display:flex"][style*="gap:16px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .about-cta-row .btn { width: 100%; justify-content: center; }

  /* ─────────────────────────────────────────────
     FAQ PAGE
   ───────────────────────────────────────────── */
  .faq-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .faq-tab  { flex-shrink: 0; font-size: 10px; padding: 10px 14px; letter-spacing: .07em; }
  .faq-question { font-size: 13px; }
  /* FAQ CTA buttons — stack */
  .faq-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .faq-cta-row .btn { width: 100%; justify-content: center; }

  /* ─────────────────────────────────────────────
     ORDER CONFIRMATION
   ───────────────────────────────────────────── */
  .confirm-layout {
    grid-template-columns: 1fr !important;
    padding: 20px 18px !important;
    gap: 20px !important;
  }
  .conf-summary { position: static !important; }
  .addr-grid    { grid-template-columns: 1fr !important; }
  .confirm-hero h1 { font-size: 1.625rem !important; }
  .confirm-hero { padding: 36px 18px 28px !important; }
  .action-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .action-row .btn,
  .action-row .btn-invoice {
    width: 100% !important;
    justify-content: center !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
  }

  /* ─────────────────────────────────────────────
     ACCOUNT PAGE
   ───────────────────────────────────────────── */
  .account-layout {
    grid-template-columns: 1fr !important;
    padding: 0 18px 52px !important;
    margin-top: 20px !important;
  }
  .account-sidebar {
    position: static !important;
    display: flex !important;
    overflow-x: auto !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 24px !important;
    -webkit-overflow-scrolling: touch;
  }
  .account-nav-item {
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    white-space: nowrap !important;
    padding: 10px 16px !important;
    flex-shrink: 0;
    font-size: 11px;
    letter-spacing: .06em;
  }
  .account-nav-item.active {
    border-bottom-color: var(--rose) !important;
    background: none !important;
  }
  .pane-title { font-size: 1.5rem !important; }
  .wishlist-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .wish-card-img { height: 180px !important; }
  .wish-add-btn { font-size: 10px !important; letter-spacing: .1em !important; padding: 10px !important; }
}

/* ═══════════════════════════════════════════════════
   SECTION 4 — SMALL PHONES  (max-width: 480px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Global ── */
  .section-pad    { padding: 32px 14px; }
  .section-pad-sm { padding: 24px 14px; }
  .site-nav { padding: 0 14px; }
  body { font-size: 0.875rem; }

  /* ── Top bar ── */
  .top-bar { font-size: 9px; padding: 6px 14px; }
  .top-bar span:nth-child(2) { display: none; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 6px; }
  .site-footer { padding: 32px 14px 20px; }

  /* ── Grids ── */
  .products-grid  { grid-template-columns: 1fr 1fr; gap: 10px; }
  .why-grid       { grid-template-columns: 1fr 1fr; gap: 12px; }
  .steps-grid     { grid-template-columns: 1fr; gap: 12px; }
  .category-grid  { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stats-row      { grid-template-columns: 1fr 1fr; }

  /* ── Hero ── */
  .hero { display: flex; flex-direction: column; }
  .hero-visual { display: none; }
  .hero-content { padding: 36px 18px 32px; }
  .hero-title { font-size: 1.75rem; line-height: 1.12; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; padding: 14px 20px; }

  /* ── Buttons: fluid sizing on small phones ── */
  .btn {
    font-size: 11px;
    padding: 11px 16px;
    letter-spacing: .04em;
    min-height: 44px;
  }
  .btn-sm {
    font-size: 9px;
    padding: 8px 12px;
    letter-spacing: .04em;
    min-height: 38px;
  }
  .btn-lg {
    font-size: 11px;
    padding: 13px 22px;
  }
  /* Full-width action buttons */
  .btn-block { font-size: 11px; letter-spacing: .08em; }

  /* ── Page headings ── */
  .section-heading h2 { font-size: 1.375rem; }
  .hero-page h1       { font-size: 1.625rem; }
  .hero-page p        { font-size: 0.8125rem; }

  /* ── Product cards ── */
  .card-body   { padding: 10px 12px 14px; }
  .card-name   { font-size: 12px; }
  .card-price  { font-size: 13px; }
  .card-meta   { font-size: 10px; margin-bottom: 4px; }

  /* ── Product page ── */
  .product-main-img { height: 280px; }
  .product-name     { font-size: 1.375rem; }
  .product-price    { font-size: 1.375rem; }
  .size-btn         { padding: 7px 12px; font-size: 11px; }
  .product-cta .btn { padding: 13px; font-size: 10px; letter-spacing: .1em; }
  .wishlist-full-btn { font-size: 9px; letter-spacing: .09em; }

  /* ── Cart ── */
  .cart-layout { padding: 16px 14px 44px; }
  .cart-item-img { width: 56px; height: 68px; }
  .cart-summary  { padding: 18px 14px; }

  /* ── Shipping / checkout ── */
  .shipping-layout { padding: 14px 14px 44px; }
  .order-summary   { padding: 14px !important; }
  .form-card-body  { padding: 14px; }
  .form-card-head  { padding: 12px 14px; }
  .form-card-head h2 { font-size: 0.9375rem; }

  /* Order summary — tighter on small phones */
  .sum-item  { gap: 7px; }
  .sum-item-name  { font-size: 11px; }
  .sum-item-price { font-size: 12px; }
  .summary-row    { gap: 6px; }
  .summary-row span:first-child { flex: 1; }
  .summary-row span:last-child  { white-space: nowrap; flex-shrink: 0; font-size: 12px; }
  .summary-row.total span:last-child { font-size: 14px; }

  /* Place Order button */
  .place-order-btn { font-size: 10px !important; letter-spacing: .12em !important; }

  /* OTP send button text — fits at 320px */
  .otp-btn { font-size: 10px !important; letter-spacing: .08em !important; }

  /* ── Checkout steps ── */
  .checkout-steps { padding: 12px 10px; }
  .step { font-size: 0; gap: 4px; } /* hide text, show only numbers */
  .step-num { width: 26px; height: 26px; font-size: 10px; }
  .step-divider { width: 16px; margin: 0 3px; }

  /* ── Track order ── */
  .track-card { padding: 20px 14px; }

  /* ── Size table ── */
  .size-table th,
  .size-table td { padding: 8px 10px; font-size: 0.75rem; }

  /* ── Testimonials ── */
  .testimonial-card { padding: 18px 14px; }

  /* ── Contact form ── */
  .contact-form-card { padding: 18px 14px; }

  /* ── Account ── */
  .wishlist-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .wish-card-img { height: 150px !important; }
  .account-layout { padding: 0 14px 44px !important; }

  /* ── Order confirmation ── */
  .confirm-layout { padding: 16px 14px !important; }
  .conf-card-body { padding: 16px !important; }
  .confirm-hero h1 { font-size: 1.375rem !important; }

  /* ── Promo/Newsletter ── */
  .promo-content h2    { font-size: 1.375rem; }
  .newsletter-inner h2 { font-size: 1.375rem; }

  /* ── Highlight cards ── */
  .highlight-card { padding: 22px 16px; }
  .highlight-card h3 { font-size: 1rem; }
  .step-card { padding: 20px 16px; }
  .step-card .step-num { font-size: 2.5rem; }

  /* ── FAQ CTA buttons row ── */
  [style*="display:flex"][style*="gap:12px"] .btn,
  [style*="display:flex"][style*="gap:16px"] .btn {
    flex: 1;
    min-width: 0;
    text-align: center;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════
   SECTION 5 — EXTRA SMALL  (max-width: 360px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 360px) {

  .hero-title { font-size: 1.375rem; }
  .logo       { font-size: 0.9375rem; }

  .products-grid  { grid-template-columns: 1fr 1fr; gap: 8px; }
  .why-grid       { grid-template-columns: 1fr; }
  .age-card       { min-width: 65px; }

  .section-pad    { padding: 24px 12px; }
  .section-pad-sm { padding: 18px 12px; }
  .site-nav       { padding: 0 12px; }

  /* Even smaller buttons on 360px */
  .btn { font-size: 10px; padding: 11px 14px; }
  .btn-block { font-size: 10px; letter-spacing: .06em; }

  .cart-layout    { padding: 14px 12px 40px; }
  .shipping-layout { padding: 12px 12px 40px; }
  .shop-layout    { padding: 12px 12px 40px; }

  .checkout-steps { padding: 10px 8px; }
  .step-divider   { width: 12px; margin: 0 2px; }
}

/* ═══════════════════════════════════════════════════
   SECTION 6 — LANDSCAPE PHONE FIX
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero-visual { height: 200px; }
  .product-main-img { height: 260px; }
  .checkout-steps { padding: 10px; }
}

/* ═══════════════════════════════════════════════════
   SECTION 7 — STICKY PANEL OVERRIDES
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cart-summary,
  .order-summary,
  .conf-summary,
  .product-images { position: static !important; }
}

/* ═══════════════════════════════════════════════════
   SECTION 8 — COMPONENT-SPECIFIC FIXES
   ═══════════════════════════════════════════════════ */

/* Mobile nav drawer animation */
@media (max-width: 768px) {
  .mobile-nav-drawer {
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .mobile-nav.open .mobile-nav-drawer {
    transform: translateX(0);
  }
}

/* Search overlay */
@media (max-width: 768px) {
  .search-overlay { padding-top: 70px; }
  .search-box { width: calc(100% - 24px); }
  .search-results { width: calc(100% - 24px); }
}

/* Product thumbnails scroll on mobile */
@media (max-width: 768px) {
  .product-thumbnails {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
}

/* FAQ tabs overflow */
@media (max-width: 768px) {
  .faq-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .faq-tabs::-webkit-scrollbar { display: none; }
  .faq-tab { flex-shrink: 0; }
  .faq-question { font-size: 0.875rem; }
  .faq-answer   { font-size: 13px; }
}

/* Product tabs overflow */
@media (max-width: 768px) {
  .product-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-tabs::-webkit-scrollbar { display: none; }
  .ptab { flex-shrink: 0; }
}

/* Pagination */
@media (max-width: 480px) {
  .pagination { gap: 4px; flex-wrap: wrap; justify-content: center; }
  .page-btn   { width: 34px; height: 34px; font-size: 0.75rem; }
}

/* Carousel on small screens */
@media (max-width: 480px) {
  .carousel-wrap { padding: 0 10px; }
  .carousel-track .product-card { flex: 0 0 calc(60% - 8px); }
}

/* Checkout steps — hide text on very small screens */
@media (max-width: 360px) {
  .step span:last-child { display: none; }
}

/* Form state select */
@media (max-width: 480px) {
  .form-group select { width: 100%; min-width: 0; }
}

/* UPI QR image */
@media (max-width: 480px) {
  #upi-section img { width: 140px !important; max-width: 100% !important; }
}

/* Track order page width */
@media (max-width: 768px) {
  #track-result, #track-hint, .track-card { width: 100%; }
}

/* About page CTA buttons */
@media (max-width: 480px) {
  .hero-actions,
  .action-row {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn,
  .action-row .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Card wishlist tap area */
.card-wishlist { width: 36px; height: 36px; }

/* Ensure no element causes horizontal scroll */
@media (max-width: 768px) {
  .hero-product-stack { overflow: hidden; padding: 20px 16px; gap: 8px; }
  .hero-product-img { max-height: 200px; }
  .hero-product-img .dress-ph { max-height: 190px; }
}

/* ═══════════════════════════════════════════════════
   SECTION 9 — BREADCRUMB INLINE STYLE OVERRIDE
   Product page breadcrumb uses inline padding:12px 48px
   which breaks on mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #breadcrumb { padding: 10px 18px !important; font-size: 11px !important; }
}
@media (max-width: 480px) {
  #breadcrumb { padding: 8px 14px !important; }
}

/* ═══════════════════════════════════════════════════
   SECTION 10 — INLINE STYLE OVERRIDES
   Some elements use inline styles that can't be
   overridden without !important on mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Track order heading */
  [style*="font-size:38px"] { font-size: 1.625rem !important; line-height: 1.2 !important; }
  /* Shipping page "Place Order" duplicate button */
  [style*="margin-top:20px"][style*="padding:16px"][style*="font-size:13px"] {
    font-size: 11px !important;
    padding: 14px 16px !important;
    letter-spacing: .08em !important;
  }
}
@media (max-width: 480px) {
  /* Hero page large inline headings */
  [style*="font-size:32px"] { font-size: 1.375rem !important; }
  [style*="font-size:38px"] { font-size: 1.375rem !important; }
  /* Inline desc text */
  [style*="font-size:14px"][style*="line-height:2"] { font-size: 13px !important; }
  /* Franchise investment figure */
  [style*="font-size:32px"][style*="color:var(--rose)"] { font-size: 1.5rem !important; }
}

/* ═══════════════════════════════════════════════════
   SECTION 11 — HOMEPAGE SPECIFIC
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* hp-hero-cta: responsive button text */
  .hp-hero-cta {
    font-size: 11px !important;
    padding: 12px 22px !important;
    letter-spacing: .08em !important;
  }
  /* Arrow buttons for carousel */
  .hp-arrow { width: 36px !important; height: 36px !important; font-size: 18px !important; }
}
@media (max-width: 480px) {
  .hp-hero-cta {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    padding: 13px 18px !important;
  }
  /* Budget buttons - already handled in index.css, reinforce here */
  .hp-budget-btn { font-size: 11px !important; padding: 11px 16px !important; }
}