/* ============================================
   Ndazog Clothing - Responsive Styles
   File: responsive.css
   Purpose: Media queries and responsive overrides ONLY
   Note: Assumes main.css + page CSS contain base styles
   ============================================ */

/* --------------------------------------------
   GLOBAL RESPONSIVE RESETS
   Prevent horizontal scroll & ensure fluid scaling
-------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

input, button, textarea, select {
  max-width: 100%;
}

/* --------------------------------------------
   MOBILE STYLES (max-width: 480px)
   Single column, touch-optimized, compact spacing
-------------------------------------------- */
@media (max-width: 480px) {
  
  /* === Global Layout === */
  .container,
  .header-container,
  .footer-grid,
  .footer-bottom,
  .cart-container,
  .checkout-container,
  .product-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* === Typography Scaling === */
  h1, .hero-title, .page-title, .cart-title, .section-title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
    line-height: 1.25 !important;
  }
  
  h2, .section-header h2 {
    font-size: clamp(1.35rem, 4.5vw, 1.75rem) !important;
  }
  
  p, .hero-subtitle, .product-desc, .cart-empty p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  
  .nav-link, .footer-col a, .cat-link {
    font-size: 0.9rem !important;
    padding: 0.4rem 0 !important;
  }
  
  /* === Header & Navigation === */
  .header-container {
    height: 70px !important;
    padding: 0 1rem !important;
  }
  
  .logo {
    font-size: 1.5rem !important;
  }
  
  .header-icons {
    gap: 0.8rem !important;
  }
  
  .icon-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  .cart-count {
    width: 14px !important;
    height: 14px !important;
    font-size: 0.6rem !important;
  }
  
  .menu-btn {
    width: 24px !important;
    gap: 4px !important;
  }
  
  .menu-btn span {
    height: 2px !important;
  }
  
  /* === Hero Section === */
  .hero {
    min-height: 500px !important;
    height: calc(100vh - 70px) !important;
  }
  
  .hero-content {
    padding: 0 1.25rem !important;
    text-align: center !important;
  }
  
  .hero-tag {
    font-size: 0.75rem !important;
    letter-spacing: 2px !important;
  }
  
  .hero-title {
    letter-spacing: -1px !important;
  }
  
  .hero-subtitle {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .hero-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }
  
  .btn {
    width: 100% !important;
    max-width: 280px !important;
    padding: 0.9rem 1.5rem !important;
    font-size: 0.9rem !important;
  }
  
  /* === Category Grid === */
  .category-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .category-card {
    height: 220px !important;
  }
  
  .cat-name {
    font-size: 1.25rem !important;
  }
  
  /* === Product Grids (All Pages) === */
  .products-grid,
  .related-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .product-card,
  .related-card {
    border-radius: 6px !important;
  }
  
  .prod-img-wrap,
  .product-image,
  .card-image {
    aspect-ratio: 4/5 !important;
    border-radius: 6px 6px 0 0 !important;
  }
  
  .prod-info,
  .product-info,
  .card-info {
    padding: 0.85rem 0.75rem !important;
  }
  
  .prod-name,
  .product-name,
  .card-name {
    font-size: 0.95rem !important;
  }
  
  .prod-price,
  .product-price,
  .card-price {
    font-size: 1rem !important;
  }
  
  .prod-badge,
  .product-badge {
    top: 0.6rem !important;
    left: 0.6rem !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.6rem !important;
  }
  
  .prod-actions,
  .product-actions {
    right: 0.6rem !important;
    top: 0.6rem !important;
  }
  
  .action-btn {
    width: 34px !important;
    height: 34px !important;
  }
  
  .quick-add {
    padding: 0.8rem !important;
    font-size: 0.8rem !important;
  }
  
  /* === Product Detail Page === */
  .product-container {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 1.5rem 1rem !important;
  }
  
  .product-gallery {
    position: static !important;
    top: auto !important;
  }
  
  .main-image {
    aspect-ratio: 4/5 !important;
    border-radius: 6px !important;
  }
  
  .product-details {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .current-price {
    font-size: 1.5rem !important;
  }
  
  .original-price {
    font-size: 0.95rem !important;
  }
  
  .size-options {
    gap: 0.4rem !important;
  }
  
  .size-btn {
    padding: 0.55rem 1rem !important;
    font-size: 0.8rem !important;
    min-width: 40px !important;
  }
  
  .qty-wrap {
    transform: scale(0.9) !important;
    transform-origin: left !important;
  }
  
  .actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .btn-primary,
  .btn-outline {
    width: 100% !important;
    justify-content: center !important;
    padding: 1rem !important;
    font-size: 0.95rem !important;
  }
  
  .product-features {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    margin-top: 1.5rem !important;
    padding-top: 1.25rem !important;
  }
  
  .feature {
    font-size: 0.85rem !important;
    gap: 0.5rem !important;
  }
  
  .feature svg {
    width: 18px !important;
    height: 18px !important;
  }
  
  /* === Cart Page === */
  .cart-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .cart-summary {
    position: static !important;
    top: auto !important;
    order: 2 !important;
  }
  
  .cart-items {
    order: 1 !important;
  }
  
  .cart-item {
    flex-direction: column !important;
    padding: 1rem !important;
    gap: 0.75rem !important;
  }
  
  .cart-item-img {
    width: 100% !important;
    height: 160px !important;
    border-radius: 6px !important;
  }
  
  .cart-item-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
  }
  
  .remove-btn {
    align-self: flex-end !important;
    margin: -0.25rem -0.5rem !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  .cart-item-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-top: 0.5rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid var(--border) !important;
    width: 100% !important;
  }
  
  .qty-control {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .qty-val {
    width: 36px !important;
    font-size: 0.9rem !important;
  }
  
  .cart-item-line-total {
    font-size: 0.95rem !important;
    width: 100% !important;
    text-align: center !important;
    padding-top: 0.25rem !important;
  }
  
  .cart-empty {
    padding: 2.5rem 1rem !important;
  }
  
  .continue-link {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.9rem !important;
  }
  
  .summary-title {
    font-size: 1.1rem !important;
  }
  
  .summary-row {
    font-size: 0.9rem !important;
  }
  
  .summary-total {
    font-size: 1.1rem !important;
  }
  
  .checkout-link {
    padding: 1rem !important;
    font-size: 0.95rem !important;
  }
  
  /* === Checkout Page === */
  .checkout-container {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin: 1rem auto !important;
  }
  
  .cart-summary-section {
    order: -1 !important;
    position: static !important;
    top: auto !important;
  }
  
  .checkout-form-section {
    padding: 1.25rem !important;
  }
  
  .section-title {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
  }
  
  .form-group.full-width {
    grid-column: span 1 !important;
  }
  
  .form-input {
    padding: 0.85rem 0.9rem !important;
    font-size: 1rem !important;
    min-height: 46px !important;
  }
  
  .form-label {
    font-size: 0.75rem !important;
  }
  
  .error-msg {
    font-size: 0.7rem !important;
  }
  
  .pay-btn {
    padding: 1.2rem !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
  }
  
  .secure-note {
    font-size: 0.7rem !important;
    gap: 0.4rem !important;
  }
  
  .cart-items {
    max-height: none !important;
    padding-right: 0 !important;
  }
  
  .cart-item {
    gap: 0.75rem !important;
  }
  
  .item-img {
    width: 60px !important;
    height: 75px !important;
  }
  
  .item-name {
    font-size: 0.9rem !important;
  }
  
  .item-price,
  .item-total {
    font-size: 0.85rem !important;
  }
  
  .qty-control {
    transform: scale(0.95) !important;
    transform-origin: left !important;
  }
  
  .qty-btn {
    padding: 0.35rem 0.6rem !important;
    font-size: 1rem !important;
  }
  
  .qty-val {
    padding: 0.35rem 0.75rem !important;
  }
  
  .remove-btn {
    right: 0 !important;
    top: -0.25rem !important;
    padding: 0.4rem !important;
  }
  
  .remove-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  .totals-box {
    padding-top: 0.75rem !important;
    margin-top: 0.5rem !important;
  }
  
  .total-row {
    font-size: 0.85rem !important;
  }
  
  .grand-total {
    font-size: 1.1rem !important;
    padding-top: 0.5rem !important;
  }
  
  .empty-state {
    padding: 2.5rem 1rem !important;
  }
  
  .empty-title {
    font-size: 1.2rem !important;
  }
  
  .shop-link {
    width: 100% !important;
    padding: 0.9rem !important;
    font-size: 0.85rem !important;
    justify-content: center !important;
  }
  
  .loading-text {
    font-size: 1rem !important;
  }
  
  .spinner {
    width: 32px !important;
    height: 32px !important;
    border-width: 3px !important;
  }
  
  /* === Footer === */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: center !important;
  }
  
  .footer-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .footer-brand .logo {
    margin-bottom: 0.5rem !important;
  }
  
  .footer-col ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }
  
  .footer-legal {
    justify-content: center !important;
    gap: 1rem !important;
  }
  
  .copyright {
    font-size: 0.8rem !important;
  }
}

/* --------------------------------------------
   TABLET STYLES (max-width: 768px)
   Two-column grids, adjusted spacing, stacked layouts where needed
-------------------------------------------- */
@media (max-width: 768px) {
  
  /* === Global Layout === */
  .container,
  .header-container,
  .footer-grid,
  .cart-container,
  .checkout-container,
  .product-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  /* === Typography === */
  h1, .hero-title, .page-title, .cart-title {
    font-size: clamp(1.75rem, 4.5vw, 2.25rem) !important;
  }
  
  h2, .section-title {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
  }
  
  /* === Header === */
  .header-container {
    height: 75px !important;
  }
  
  .logo {
    font-size: 1.65rem !important;
  }
  
  .nav-list {
    display: none !important;
  }
  
  .menu-btn {
    display: flex !important;
  }
  
  .header-left,
  .header-right {
    display: none !important;
  }
  
  .header-center {
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
  }
  
  /* === Hero === */
  .hero {
    min-height: 550px !important;
  }
  
  .hero-content {
    padding: 0 2rem !important;
  }
  
  .hero-tag {
    font-size: 0.8rem !important;
  }
  
  .hero-title {
    font-size: clamp(2rem, 5.5vw, 3rem) !important;
  }
  
  .hero-subtitle {
    font-size: 1rem !important;
    max-width: 450px !important;
  }
  
  .hero-buttons {
    gap: 0.875rem !important;
  }
  
  .btn {
    padding: 0.95rem 2rem !important;
    font-size: 0.95rem !important;
  }
  
  /* === Category Grid === */
  .category-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
  
  .category-card {
    height: 250px !important;
  }
  
  /* === Product Grids === */
  .products-grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
  
  .prod-img-wrap,
  .product-image,
  .card-image {
    aspect-ratio: 3/4 !important;
  }
  
  .prod-info,
  .product-info,
  .card-info {
    padding: 1rem 0.6rem !important;
  }
  
  .prod-name,
  .product-name,
  .card-name {
    font-size: 0.9rem !important;
  }
  
  .prod-price,
  .product-price,
  .card-price {
    font-size: 1.05rem !important;
  }
  
  /* === Product Detail Page === */
  .product-container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 2rem 1.5rem !important;
  }
  
  .product-gallery {
    position: static !important;
    top: auto !important;
  }
  
  .main-image {
    aspect-ratio: 4/5 !important;
  }
  
  .product-details {
    padding-left: 0 !important;
  }
  
  .current-price {
    font-size: 1.75rem !important;
  }
  
  .size-btn {
    padding: 0.65rem 1.25rem !important;
    font-size: 0.85rem !important;
  }
  
  .qty-wrap {
    transform: scale(0.95) !important;
    transform-origin: left !important;
    margin-bottom: 1.25rem !important;
  }
  
  .actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .btn-primary,
  .btn-outline {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .product-features {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* === Cart Page === */
  .cart-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  .cart-summary {
    position: static !important;
    order: 2 !important;
  }
  
  .cart-items {
    order: 1 !important;
  }
  
  .cart-item {
    flex-direction: column !important;
    padding: 1.1rem !important;
  }
  
  .cart-item-img {
    width: 100% !important;
    height: 180px !important;
  }
  
  .cart-item-header {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .cart-item-actions {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0.75rem !important;
  }
  
  .qty-control {
    width: auto !important;
  }
  
  .cart-item-line-total {
    width: auto !important;
    text-align: left !important;
    padding-top: 0 !important;
  }
  
  .summary-title {
    font-size: 1.15rem !important;
  }
  
  .summary-row {
    font-size: 0.95rem !important;
  }
  
  .summary-total {
    font-size: 1.15rem !important;
  }
  
  .checkout-link {
    padding: 1.05rem !important;
    font-size: 1rem !important;
  }
  
  /* === Checkout Page === */
  .checkout-container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    margin: 1.5rem auto !important;
  }
  
  .cart-summary-section {
    order: -1 !important;
    position: static !important;
  }
  
  .checkout-form-section {
    padding: 1.5rem !important;
  }
  
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .form-group.full-width {
    grid-column: span 1 !important;
  }
  
  .form-input {
    padding: 0.9rem !important;
    font-size: 0.95rem !important;
  }
  
  .pay-btn {
    padding: 1.1rem !important;
    font-size: 1rem !important;
  }
  
  .cart-items {
    max-height: 350px !important;
  }
  
  .item-img {
    width: 65px !important;
    height: 80px !important;
  }
  
  .item-name {
    font-size: 0.95rem !important;
  }
  
  .item-price,
  .item-total {
    font-size: 0.9rem !important;
  }
  
  .qty-control {
    transform: none !important;
  }
  
  .qty-btn {
    padding: 0.3rem 0.6rem !important;
  }
  
  .remove-btn {
    right: -0.5rem !important;
    top: 0 !important;
  }
  
  .totals-box {
    padding-top: 0.875rem !important;
  }
  
  .total-row {
    font-size: 0.9rem !important;
  }
  
  .grand-total {
    font-size: 1.15rem !important;
  }
  
  .empty-state {
    padding: 3rem 1.5rem !important;
  }
  
  .empty-title {
    font-size: 1.3rem !important;
  }
  
  .shop-link {
    width: auto !important;
    padding: 0.95rem 2rem !important;
  }
  
  /* === Footer === */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.75rem !important;
    text-align: left !important;
  }
  
  .footer-brand {
    display: block !important;
    align-items: flex-start !important;
  }
  
  .footer-col ul {
    display: block !important;
    align-items: flex-start !important;
  }
  
  .footer-bottom {
    flex-direction: row !important;
    justify-content: space-between !important;
    text-align: left !important;
  }
  
  .footer-legal {
    justify-content: flex-start !important;
  }
}

/* --------------------------------------------
   SMALL DESKTOP / LAPTOP (max-width: 1024px)
   Three-column grids, optimized spacing, refined layouts
-------------------------------------------- */
@media (max-width: 1024px) {
  
  /* === Global === */
  .container,
  .header-container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  /* === Typography === */
  h1, .hero-title, .page-title {
    font-size: clamp(2rem, 4vw, 2.75rem) !important;
  }
  
  /* === Hero === */
  .hero {
    min-height: 580px !important;
  }
  
  .hero-content {
    padding: 0 3rem !important;
  }
  
  .hero-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem) !important;
  }
  
  .hero-subtitle {
    font-size: 1.05rem !important;
    max-width: 480px !important;
  }
  
  .btn {
    padding: 1rem 2.25rem !important;
    font-size: 0.95rem !important;
  }
  
  /* === Category Grid === */
  .category-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  
  .category-card {
    height: 270px !important;
  }
  
  /* === Product Grids === */
  .products-grid,
  .related-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
  }
  
  .prod-info,
  .product-info,
  .card-info {
    padding: 1.1rem 0.65rem !important;
  }
  
  /* === Product Detail Page === */
  .product-container {
    gap: 3rem !important;
    padding: 2.5rem 2rem !important;
  }
  
  .main-image {
    aspect-ratio: 3/4 !important;
  }
  
  .current-price {
    font-size: 1.9rem !important;
  }
  
  .size-btn {
    padding: 0.7rem 1.4rem !important;
    font-size: 0.9rem !important;
  }
  
  .product-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
  
  /* === Cart Page === */
  .cart-layout {
    gap: 2.5rem !important;
  }
  
  .cart-item {
    padding: 1.15rem !important;
  }
  
  .cart-item-img {
    width: 85px !important;
    height: 105px !important;
  }
  
  .cart-item-name {
    font-size: 1rem !important;
  }
  
  .cart-item-price {
    font-size: 0.95rem !important;
  }
  
  .qty-control {
    transform: none !important;
  }
  
  .summary-title {
    font-size: 1.15rem !important;
  }
  
  .summary-total {
    font-size: 1.15rem !important;
  }
  
  .checkout-link {
    padding: 1.05rem !important;
  }
  
  /* === Checkout Page === */
  .checkout-container {
    gap: 2.5rem !important;
    margin: 2.5rem auto !important;
  }
  
  .checkout-form-section,
  .cart-summary-section {
    padding: 1.75rem !important;
  }
  
  .form-grid {
    gap: 1.1rem !important;
  }
  
  .form-input {
    padding: 0.9rem 1rem !important;
  }
  
  .pay-btn {
    padding: 1.1rem !important;
  }
  
  .cart-items {
    max-height: 380px !important;
  }
  
  .item-img {
    width: 68px !important;
    height: 83px !important;
  }
  
  .totals-box {
    padding-top: 0.9rem !important;
  }
  
  .grand-total {
    font-size: 1.18rem !important;
  }
  
  .empty-state {
    padding: 3.5rem 2rem !important;
  }
  
  .empty-title {
    font-size: 1.35rem !important;
  }
  
  /* === Footer === */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }
}

/* --------------------------------------------
   LARGE SCREENS (min-width: 1440px)
   Constrain max-width, enhance spacing, center content
-------------------------------------------- */
@media (min-width: 1440px) {
  
  /* === Global Containers === */
  .container,
  .header-container,
  .footer-grid,
  .footer-bottom,
  .cart-container,
  .checkout-container,
  .product-container {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* === Hero === */
  .hero-content {
    max-width: 1440px !important;
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
  
  .hero-title {
    max-width: 720px !important;
  }
  
  .hero-subtitle {
    max-width: 540px !important;
  }
  
  /* === Section Spacing === */
  section {
    padding: 6rem 3rem !important;
  }
  
  .section-header {
    margin-bottom: 4rem !important;
  }
  
  /* === Product Grids === */
  .products-grid,
  .related-grid {
    gap: 2rem !important;
  }
  
  .product-card,
  .related-card {
    border-radius: 8px !important;
  }
  
  .prod-img-wrap,
  .product-image,
  .card-image {
    border-radius: 8px 8px 0 0 !important;
  }
  
  .prod-info,
  .product-info,
  .card-info {
    padding: 1.4rem 0.75rem !important;
  }
  
  /* === Product Detail Page === */
  .product-container {
    padding: 4rem 3rem !important;
    gap: 5rem !important;
  }
  
  .product-gallery {
    top: 120px !important;
  }
  
  .main-image {
    border-radius: 12px !important;
  }
  
  .product-details h1 {
    font-size: clamp(2.25rem, 3.5vw, 3.25rem) !important;
  }
  
  .current-price {
    font-size: 2.2rem !important;
  }
  
  .product-desc {
    max-width: 580px !important;
    font-size: 1.05rem !important;
  }
  
  .size-btn {
    padding: 0.75rem 1.6rem !important;
    font-size: 0.95rem !important;
  }
  
  .qty-wrap {
    transform: none !important;
  }
  
  .btn-primary,
  .btn-outline {
    padding: 1.2rem 2.5rem !important;
    font-size: 1.05rem !important;
  }
  
  .product-features {
    gap: 2rem !important;
    margin-top: 3rem !important;
    padding-top: 2.5rem !important;
  }
  
  .feature {
    font-size: 0.95rem !important;
  }
  
  .feature svg {
    width: 22px !important;
    height: 22px !important;
  }
  
  /* === Cart Page === */
  .cart-container {
    padding: 3rem 2.5rem !important;
  }
  
  .cart-title {
    margin-bottom: 3rem !important;
  }
  
  .cart-layout {
    gap: 3.5rem !important;
  }
  
  .cart-item {
    padding: 1.4rem !important;
    border-radius: 10px !important;
  }
  
  .cart-item-img {
    width: 95px !important;
    height: 115px !important;
    border-radius: 8px !important;
  }
  
  .cart-item-name {
    font-size: 1.1rem !important;
  }
  
  .cart-item-price {
    font-size: 1rem !important;
  }
  
  .qty-control {
    border-radius: 6px !important;
  }
  
  .qty-btn {
    width: 36px !important;
    height: 36px !important;
  }
  
  .qty-val {
    width: 42px !important;
    font-size: 1rem !important;
  }
  
  .cart-item-line-total {
    font-size: 1rem !important;
  }
  
  .cart-summary {
    padding: 2.25rem !important;
    border-radius: 10px !important;
    top: 120px !important;
  }
  
  .summary-title {
    font-size: 1.3rem !important;
    padding-bottom: 1rem !important;
  }
  
  .summary-row {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .summary-total {
    font-size: 1.3rem !important;
  }
  
  .checkout-link {
    padding: 1.2rem !important;
    font-size: 1.05rem !important;
    border-radius: 8px !important;
  }
  
  .cart-empty {
    padding: 5rem 3rem !important;
    border-radius: 10px !important;
  }
  
  .empty-title {
    font-size: 1.6rem !important;
  }
  
  .empty-text {
    font-size: 1.05rem !important;
    margin-bottom: 2.5rem !important;
  }
  
  .continue-link,
  .shop-link {
    padding: 1.1rem 3rem !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
  }
  
  /* === Checkout Page === */
  .checkout-container {
    margin: 4rem auto !important;
    gap: 4rem !important;
  }
  
  .checkout-form-section,
  .cart-summary-section {
    padding: 2.5rem !important;
    border-radius: 10px !important;
  }
  
  .section-title {
    font-size: 1.6rem !important;
    margin-bottom: 1.75rem !important;
    padding-bottom: 1.1rem !important;
  }
  
  .form-grid {
    gap: 1.5rem !important;
  }
  
  .form-input {
    padding: 1rem 1.25rem !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
  }
  
  .form-label {
    font-size: 0.9rem !important;
  }
  
  .pay-btn {
    padding: 1.25rem !important;
    font-size: 1.05rem !important;
    border-radius: 8px !important;
  }
  
  .secure-note {
    font-size: 0.85rem !important;
    margin-top: 1.25rem !important;
  }
  
  .cart-items {
    max-height: 450px !important;
    padding-right: 1rem !important;
  }
  
  .cart-item {
    padding-bottom: 1.5rem !important;
  }
  
  .item-img {
    width: 75px !important;
    height: 90px !important;
    border-radius: 8px !important;
  }
  
  .item-name {
    font-size: 1rem !important;
  }
  
  .item-price,
  .item-total {
    font-size: 0.95rem !important;
  }
  
  .qty-control {
    border-radius: 6px !important;
  }
  
  .qty-btn {
    padding: 0.35rem 0.7rem !important;
  }
  
  .qty-val {
    padding: 0.35rem 0.9rem !important;
  }
  
  .remove-btn {
    right: -1.25rem !important;
    padding: 0.4rem !important;
  }
  
  .remove-btn svg {
    width: 15px !important;
    height: 15px !important;
  }
  
  .totals-box {
    padding-top: 1.25rem !important;
    margin-top: 1.25rem !important;
    border-top-width: 3px !important;
  }
  
  .total-row {
    font-size: 0.95rem !important;
  }
  
  .grand-total {
    font-size: 1.35rem !important;
    padding-top: 1rem !important;
  }
  
  .empty-state {
    padding: 5rem 3rem !important;
  }
  
  .empty-title {
    font-size: 1.5rem !important;
  }
  
  .empty-text {
    font-size: 1rem !important;
  }
  
  .shop-link {
    padding: 1.1rem 3rem !important;
    font-size: 1rem !important;
  }
  
  .loading-text {
    font-size: 1.3rem !important;
  }
  
  .spinner {
    width: 48px !important;
    height: 48px !important;
    border-width: 5px !important;
  }
  
  /* === Footer === */
  footer {
    padding: 5rem 3rem 2.5rem !important;
  }
  
  .footer-grid {
    gap: 2.5rem !important;
    margin-bottom: 4rem !important;
  }
  
  .footer-col h4 {
    font-size: 1.05rem !important;
    margin-bottom: 1.25rem !important;
  }
  
  .footer-col a {
    font-size: 0.95rem !important;
    margin-bottom: 0.65rem !important;
  }
  
  .footer-bottom {
    padding-top: 2rem !important;
  }
  
  .copyright {
    font-size: 0.9rem !important;
  }
  
  .footer-legal a {
    font-size: 0.9rem !important;
  }
}

/* --------------------------------------------
   ULTRA-WIDE SCREENS (min-width: 1920px)
   Further constrain content width for optimal readability
-------------------------------------------- */
@media (min-width: 1920px) {
  
  .container,
  .header-container,
  .footer-grid,
  .footer-bottom,
  .cart-container,
  .checkout-container,
  .product-container {
    max-width: 1600px !important;
  }
  
  .hero-content {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
  
  .hero-title {
    font-size: clamp(2.5rem, 4vw, 4rem) !important;
  }
  
  section {
    padding: 7rem 4rem !important;
  }
  
  .products-grid,
  .related-grid {
    gap: 2.5rem !important;
  }
  
  .product-container {
    padding: 5rem 4rem !important;
    gap: 6rem !important;
  }
  
  .cart-container {
    padding: 4rem 3rem !important;
  }
  
  .checkout-container {
    margin: 5rem auto !important;
    gap: 5rem !important;
  }
  
  footer {
    padding: 6rem 4rem 3rem !important;
  }
}

/* --------------------------------------------
   PRINT MEDIA QUERIES (Optional Utility)
   Ensure clean print output across all pages
-------------------------------------------- */
@media print {
  header,
  footer,
  .hero,
  .btn,
  .action-btn,
  .quick-add,
  .remove-btn,
  .qty-control,
  .checkout-link,
  .pay-btn,
  .shop-link,
  .continue-link,
  .mobile-menu,
  .menu-btn,
  .icon-btn,
  .cart-count,
  .loading-overlay {
    display: none !important;
  }
  
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt !important;
    line-height: 1.4 !important;
  }
  
  .container,
  .product-container,
  .cart-container,
  .checkout-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .product-image img,
  .cart-item-img img,
  .item-img {
    object-fit: contain !important;
    filter: grayscale(100%) contrast(120%) !important;
  }
  
  a {
    text-decoration: none !important;
    color: #000 !important;
  }
  
  .product-name,
  .item-name,
  .cart-item-name {
    font-weight: 700 !important;
  }
  
  .price-current,
  .current-price,
  .item-price,
  .item-total,
  .grand-total {
    color: #000 !important;
    font-weight: 700 !important;
  }
  
  .original-price,
  .price-original {
    opacity: 0.6 !important;
  }
}

/* --------------------------------------------
   HIGH CONTRAST MODE SUPPORT
   Enhance visibility for accessibility
-------------------------------------------- */
@media (prefers-contrast: high) {
  
  .product-card,
  .cart-item,
  .checkout-form-section,
  .cart-summary-section {
    border-width: 2px !important;
  }
  
  .form-input:focus,
  .form-input.error {
    border-width: 2px !important;
  }
  
  .size-btn.active,
  .color-swatch.active {
    outline: 2px solid var(--text-primary) !important;
    outline-offset: 2px !important;
  }
  
  .original-price,
  .price-original {
    opacity: 0.7 !important;
    text-decoration-thickness: 2px !important;
  }
  
  .totals-box,
  .product-features {
    border-top-width: 3px !important;
  }
  
  .grand-total {
    border-top-width: 2px !important;
  }
  
  .error-msg {
    font-weight: 600 !important;
  }
}

/* --------------------------------------------
   REDUCED MOTION PREFERENCE
   Disable animations for users who prefer less motion
-------------------------------------------- */
@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;
  }
  
  .hero-slide,
  .fade-in,
  .product-card,
  .cart-item,
  .related-card,
  .main-image img,
  .product-image img,
  .item-img,
  .cart-item-img img,
  .btn,
  .btn-primary,
  .btn-outline,
  .checkout-link,
  .pay-btn,
  .shop-link,
  .continue-link,
  .action-btn,
  .quick-add,
  .size-btn,
  .qty-btn,
  .remove-btn,
  .nav-link::after,
  .hero-tag,
  .hero-title,
  .hero-subtitle,
  .hero-buttons,
  .modal-content,
  .cart-drawer,
  .toast,
  .loading-overlay,
  .spinner {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  
  .product-card:hover,
  .related-card:hover,
  .cart-item:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }
  
  .main-image:hover img,
  .product-image:hover img,
  .item-img:hover,
  .cart-item-img:hover img {
    transform: none !important;
  }
  
  .hero-slide.active {
    opacity: 1 !important;
  }
  
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------
   TOUCH DEVICE OPTIMIZATIONS
   Enhance tap targets and spacing for touchscreens
-------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  
  /* Increase tap targets */
  .btn,
  .btn-primary,
  .btn-outline,
  .checkout-link,
  .pay-btn,
  .shop-link,
  .continue-link,
  .action-btn,
  .quick-add,
  .size-btn,
  .qty-btn,
  .remove-btn,
  .icon-btn,
  .menu-btn,
  .nav-link,
  .footer-col a,
  .cat-link {
    min-height: 44px !important;
    min-width: 44px !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  .form-input {
    min-height: 48px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
  
  /* Add spacing between interactive elements */
  .size-options,
  .color-options,
  .product-actions,
  .qty-control,
  .header-icons,
  .footer-legal {
    gap: 0.75rem !important;
  }
  
  /* Ensure scrollable areas are touch-friendly */
  .cart-items,
  .thumbnail-gallery,
  .tab-list {
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }
  
  /* Prevent accidental zoom on form inputs */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  
  /* Improve hover fallbacks for touch */
  .product-card:hover .prod-actions,
  .product-card:hover .quick-add,
  .product-card:hover .product-image img {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .prod-actions,
  .quick-add {
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
    margin-top: 0.5rem !important;
  }
  
  .quick-add {
    position: relative !important;
    transform: none !important;
    margin-top: 0.75rem !important;
  }
}