/* ==========================================================================
   NOVURA FINE JEWELRY - RESPONSIVE & MOBILE POLISH STYLESHEET
   Guarantees: Zero horizontal (left/right) scrolling. Down/up vertical scrolling only.
   Clean, razor-sharp luxury mobile viewport.
   ========================================================================== */

/* Universal Mobile Overflow Guard */
html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative !important;
  touch-action: pan-y !important;
  -webkit-text-size-adjust: 100% !important;
}

*, *::before, *::after {
  max-width: 100%;
}

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

/* Tablet & Smaller (Max-width 1024px) */
@media (max-width: 1024px) {
  :root {
    --container-max: 100%;
  }

  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .main-nav {
    display: none !important; /* Hamburger only on tablet/mobile */
  }

  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .hero-content {
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .hero-cta-group {
    justify-content: center !important;
  }

  .hero-trust-tag {
    position: static !important;
    margin: 1.5rem auto 0 !important;
    display: inline-flex !important;
  }

  .category-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem 1rem !important;
  }

  .editorial-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem !important;
  }

  .footer-brand {
    grid-column: 1 / -1 !important;
  }

  /* Multi-page layout collapses */
  #checkout-main-view,
  #cart-page-content,
  #pdp-layout-grid,
  #account-grid-layout {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}

/* Mobile Screens (Max-width 768px) */
@media (max-width: 768px) {
  /* Prevent iOS automatic input zooming */
  input, select, textarea {
    font-size: 16px !important;
  }

  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
  }

  .section-spacing {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .section-spacing-sm {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .site-header .header-inner {
    height: 60px !important;
  }

  .brand-logo {
    font-size: 1.45rem !important;
    letter-spacing: 0.14em !important;
  }

  .header-actions {
    gap: 0.5rem !important;
  }

  .header-btn {
    width: 38px !important;
    height: 38px !important;
  }

  /* Announcement bar */
  .announcement-bar {
    font-size: 0.6875rem !important;
    padding: 0.45rem 0.75rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .announcement-bar .hide-mobile {
    display: none !important;
  }

  /* Hero */
  .hero-section {
    min-height: auto !important;
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
  }

  .hero-title {
    font-size: 2.15rem !important;
    line-height: 1.15 !important;
  }

  .hero-desc {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.75rem !important;
  }

  .hero-cta-group {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .hero-cta-group .btn {
    width: 100% !important;
    padding: 0.85rem 1.25rem !important;
  }

  /* Horizontal Category Bar: Contain scroll horizontally strictly inside the bar */
  .category-pills-bar {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .category-tabs-list {
    padding: 0.75rem 1rem !important;
    gap: 0.75rem !important;
  }

  .category-tab-btn {
    font-size: 0.6875rem !important;
    padding: 0.4rem 0.75rem !important;
    white-space: nowrap !important;
  }

  /* Featured Category Cards */
  .category-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .category-card {
    aspect-ratio: 1 / 1.1 !important;
  }

  .category-card-overlay {
    padding: 1rem !important;
  }

  .category-card-title {
    font-size: 1.2rem !important;
  }

  .category-card-cta {
    font-size: 0.625rem !important;
  }

  /* 2-Column Mobile Product Grid */
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem 0.65rem !important;
  }

  .product-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .product-img-wrap {
    aspect-ratio: 1 / 1.1 !important;
    margin-bottom: 0.65rem !important;
  }

  .product-title {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.25rem !important;
  }

  .product-desc {
    display: none !important; /* Keep mobile view minimal, clean & elegant */
  }

  .product-price {
    font-size: 0.9375rem !important;
  }

  .product-actions {
    grid-template-columns: 1fr !important;
    gap: 0.35rem !important;
    margin-top: 0.5rem !important;
  }

  .product-actions .btn {
    padding: 0.55rem 0.4rem !important;
    font-size: 0.625rem !important;
    min-height: 34px !important;
  }

  /* Horizontal Product Slider / Carousel on Mobile */
  .carousel-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .carousel-track-wrapper {
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .carousel-track {
    gap: 0.75rem !important;
  }

  .carousel-track .product-card {
    flex: 0 0 calc(50vw - 1.25rem) !important;
    width: calc(50vw - 1.25rem) !important;
    min-width: 150px !important;
    max-width: 220px !important;
  }

  .carousel-nav-btn {
    display: none !important; /* Swipe smoothly on mobile without protruding buttons */
  }

  /* Editorial Craftsmanship Section */
  .editorial-quote {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
  }

  .editorial-features {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Newsletter */
  .newsletter-section {
    padding: 3.5rem 1rem !important;
  }

  .newsletter-title {
    font-size: 1.75rem !important;
  }

  .newsletter-form {
    flex-direction: column !important;
    width: 100% !important;
  }

  .newsletter-form .btn {
    width: 100% !important;
    height: 44px !important;
  }

  /* Footer */
  .site-footer {
    padding-top: 3.5rem !important;
    padding-bottom: 2rem !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
  }

  /* Cart Drawer Fullscreen on mobile */
  .cart-drawer {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Search Modal */
  .search-modal {
    padding: 1.5rem 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .search-input {
    font-size: 1.25rem !important;
    padding: 0.65rem 2.5rem 0.65rem 0 !important;
  }

  /* Floating Support Modal */
  #support-modal {
    width: calc(100vw - 32px) !important;
    max-width: 340px !important;
    right: 16px !important;
    left: auto !important;
    bottom: 76px !important;
  }

  .floating-support-btn {
    bottom: 16px !important;
    right: 16px !important;
    padding: 0.65rem !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }

  .floating-support-btn span.label-text {
    display: none !important;
  }

  /* Dedicated Cart Page Item Rows on Mobile */
  #cart-page-content {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .btn-cart-remove {
    padding: 0.35rem 0 !important;
  }

  /* Checkout on Mobile */
  #checkout-main-view {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .checkout-grid-row-2,
  .checkout-grid-row-3 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Product Filter Bar on Mobile */
  #category-product-count {
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }

  #filter-material,
  #filter-stone,
  #filter-price,
  #sort-select {
    width: calc(50% - 0.4rem) !important;
    font-size: 0.75rem !important;
    padding: 0.45rem 0.5rem !important;
  }

  /* Product Detail Page on Mobile */
  #pdp-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  #pdp-title {
    font-size: 1.65rem !important;
  }

  /* About & Contact Grids */
  .editorial-grid,
  #account-grid-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* Extra Small Mobile (Max-width 420px) */
@media (max-width: 420px) {
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .product-grid {
    gap: 1rem 0.5rem !important;
  }

  .category-cards-grid {
    gap: 0.5rem !important;
  }

  .product-title {
    font-size: 0.9375rem !important;
  }

  .product-price {
    font-size: 0.875rem !important;
  }
}