/* ==========================================================================
   Rivolt LLC - responsive.css
   Desktop-first overrides. Tested widths:
   1920 / 1600 / 1440 / 1366 / 1280 (desktop) - 1024 / 768 (tablet)
   600 / 480 / 414 / 390 / 375 / 320 (mobile)
   ========================================================================== */

/* Touch devices: card actions are always visible (no hover to reveal them) */
@media (hover: none) {
  .pc-action { opacity: 1; transform: none; }
  .gallery-main .g-nav { opacity: 1; }
  .gallery-main { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- <= 1279px ---------- */
@media (max-width: 1279.98px) {
  .header-main .container { gap: 1.5rem; }
  .header-actions { gap: 1rem; }
  .cat-dropdown { flex-basis: 270px; }
  .hero { grid-template-columns: 270px minmax(0, 1fr); }
  .slide-title { font-size: 2.5rem; }
  .footer-about { flex-basis: 320px; max-width: 320px; }
  .footer-columns { padding-left: 2.5rem; }
}

/* ---------- <= 1199px : tablet landscape & below - mobile header ---------- */
@media (max-width: 1199.98px) {
  #site-header { min-height: calc(var(--header-mobile-h) + 1px); position: sticky; top: 0; z-index: 100; }
  .header-topbar, .header-main, .header-nav { display: none; }
  .header-mobile { display: block; }
  .site-header.is-scrolled .header-mobile { box-shadow: 0 4px 16px rgba(33, 37, 41, .08); }
  .mobile-bottom-menu { display: block; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .toast-region { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .back-to-top { bottom: calc(80px + env(safe-area-inset-bottom)); right: 16px; width: 42px; height: 42px; }

  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-spacer { display: none; }

  .products { --cols: 4; gap: 2rem 1.5rem; }
  .products.cols-4 { --cols: 3; }
  .carousel-track { --per: 4; --gap: 24px; }
  .carousel-arrow.prev { left: -12px; }
  .carousel-arrow.next { right: -12px; }
  .mega-products { grid-template-columns: repeat(4, 1fr); }

  .shop-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; }
  .shop-sidebar { top: 80px; }
  .product-gallery, .order-review { top: 80px; }

  .single-product { gap: 2rem; }
  .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; }
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; }

  .footer-widgets .container > .inner { flex-direction: column; gap: 2.5rem; padding: 3.5rem 0; }
  .footer-about { flex: none; max-width: none; padding-right: 0; border-right: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2.5rem; }
  .footer-about .f-logo, .footer-about > p { grid-column: 1; }
  .footer-about .footer-contact { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .footer-columns { padding-left: 0; }
  .newsletter-form { flex-basis: 380px; }
}

/* ---------- <= 991px : tablet portrait ---------- */
@media (max-width: 991.98px) {
  h1, .page-header h1 { font-size: 1.75rem; }

  .products { --cols: 3; gap: 1.75rem 1.25rem; }
  .products.cols-4, .products.cols-3 { --cols: 3; }
  .carousel-track { --per: 3; --gap: 20px; }

  .slide { aspect-ratio: 16 / 9; }
  .slide-content { width: 72%; padding: 2.5rem; }
  .slide-title { font-size: 2.125rem; }
  .slide-text { font-size: 1rem; }

  /* horizontally scrolling banners on tablet / mobile */
  .banner-grid.cols-3 {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 1.25rem; padding-bottom: .25rem;
  }
  .banner-grid.cols-3::-webkit-scrollbar { display: none; }
  .banner-grid.cols-3 > * { scroll-snap-align: start; }
  .banner-content { width: 90%; padding: 1.5rem; }
  .banner .entry-title { font-size: 1.125rem; }
  .banner-wide .banner-content { width: 80%; padding: 1.75rem; }
  .banner-wide .entry-title { font-size: 1.375rem; }
  .shop-banner .banner-content { width: 80%; padding: 2rem; }
  .shop-banner .entry-title { font-size: 1.5rem; }

  .category-module { grid-template-columns: minmax(0, 1fr); }
  .category-module .banner { min-height: 240px; }
  .category-module .banner > img { object-position: center 30%; }
  .category-module .banner-content { width: 70%; padding: 2rem; }
  .category-module .sale-percentage { font-size: 3rem; }
  .category-module .products { --cols: 4; }

  .deals-grid { grid-template-columns: minmax(0, 1fr); }
  .coupon-banner { gap: 1.5rem; padding: 1.25rem 1.5rem; }
  .coupon-sale { font-size: 2.25rem; }
  .coupon-title { font-size: 1.0625rem; }
  .testimonial-carousel .carousel-track { --per: 2; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* shop: sidebar becomes an off-canvas filter panel */
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .shop-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; max-height: none;
    width: min(360px, 90vw); padding: 0 1.25rem 1.25rem; background: #fff; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-102%); visibility: hidden; box-shadow: var(--shadow-lg);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility .35s;
  }
  .shop-sidebar.is-open { transform: none; visibility: visible; }
  .shop-sidebar .sidebar-head {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
    margin: 0 -1.25rem 1.25rem; padding: .75rem 1rem .75rem 1.25rem; background: #fff; border-bottom: 1px solid var(--border);
  }
  .shop-sidebar .sidebar-head h2 { margin: 0; font-size: 1.0625rem; }
  .shop-sidebar .sidebar-apply { display: block; position: sticky; bottom: 0; padding-top: .75rem; background: #fff; }
  .filter-toggle { display: inline-flex; }

  .single-product { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .product-gallery { position: static; }
  .product-tabs { margin-top: 3rem; }
  .reviews-wrap { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

  .cart-layout, .checkout-layout { grid-template-columns: minmax(0, 1fr); }
  .order-review { position: static; }

  .contact-grid, .about-intro { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .account-nav { display: flex; overflow-x: auto; gap: .25rem; scrollbar-width: none; }
  .account-nav::-webkit-scrollbar { display: none; }
  .account-nav li { flex-shrink: 0; }
  .account-nav button { white-space: nowrap; }
  .map-embed { aspect-ratio: 16 / 9; }

  .footer-newsletter .container > .inner { flex-direction: column; align-items: stretch; gap: 1.5rem; padding: 2.5rem 0; }
  .newsletter-form { flex: none; }
  .quickview { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .quickview .qv-image { max-width: 320px; margin: 0 auto; width: 100%; }
}

/* ---------- <= 767px : large phones ---------- */
@media (max-width: 767.98px) {
  body { font-size: .9375rem; }
  h1, .page-header h1 { font-size: 1.5rem; }
  .section { margin-top: 2rem; }
  .section-lg { margin-top: 2.75rem; }
  .breadcrumb { margin: 1rem 0 .75rem; }

  .products, .products.cols-4, .products.cols-3 { --cols: 2; gap: 1.5rem 1rem; }
  .category-module .products { --cols: 2; }
  .carousel-track { --per: 2; --gap: 16px; }
  .carousel-arrow { display: none; }
  .carousel-dots { margin-top: 1.125rem; }

  .module-header { margin-bottom: 1.125rem; padding-bottom: .875rem; }
  .module-header .entry-title { font-size: 1.125rem; }
  .module-header .entry-description { order: 3; width: 100%; font-size: .8125rem; }
  .tab-list { gap: .25rem 1.25rem; }
  .tab-list button { font-size: 1rem; }
  .tab-list button[aria-selected="true"]::after { bottom: -.95rem; }

  .hero { margin-top: 12px; }
  .slide { aspect-ratio: auto; min-height: 300px; }
  .slide > img { object-position: 75% center; }
  .slide::before { background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 70%, rgba(0, 0, 0, .1)); }
  .slide-content { width: 100%; padding: 2rem 1.5rem 3rem; }
  .slide-subtitle { font-size: .8125rem; margin-bottom: .5rem; }
  .slide-title { font-size: 1.75rem; margin-bottom: .625rem; }
  .slide-text { font-size: .875rem; margin-bottom: .875rem; max-width: 85%; }
  .slide-price { margin-bottom: 1rem; }
  .slide-price ins { font-size: 1.5rem; }
  .hero-slider .carousel-dots { right: 50%; transform: translateX(50%); bottom: .875rem; }

  .banner-grid.cols-3 { grid-auto-columns: 82%; gap: 1rem; }
  .banner-grid.cols-2 { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .banner-wide { aspect-ratio: 16 / 8; }
  .shop-banner { min-height: 170px; margin-bottom: 1.5rem; }
  .shop-banner .banner-content { width: 100%; padding: 1.5rem; }
  .shop-banner .entry-title { font-size: 1.25rem; }
  .shop-banner p { display: none; }

  .coupon-banner { flex-direction: column; align-items: center; text-align: center; gap: .625rem; padding: 1.25rem; }
  .coupon-code { margin: .25rem 0 0; }
  .coupon-code small { text-align: center; }
  .coupon-banner.style-2 { flex-direction: column; }

  .deal-item { flex-direction: column; align-items: stretch; gap: 1.25rem; padding: 1.25rem; }
  .deal-item .deal-thumb { flex-basis: auto; max-width: 260px; width: 100%; margin: 0 auto; }

  .testimonial-carousel .carousel-track { --per: 1; }
  .testimonial { padding: 1.5rem; }
  .logos li { height: 70px; }
  .logos img { max-height: 60px; }

  /* shop toolbar */
  .shop-toolbar { padding: .625rem; gap: .625rem; }
  .shop-toolbar .result-count { order: 3; width: 100%; }
  .shop-toolbar .toolbar-right { margin-left: 0; flex: 1; justify-content: flex-end; }
  .shop-toolbar .per-page, .view-buttons { display: none; }
  .shop-toolbar .form-select { max-width: 190px; }
  .products.list-view { --cols: 2 !important; gap: 1.5rem 1rem; }
  .products.list-view .product-card { display: flex; padding: 0; border: 0; gap: 0; }
  .products.list-view .product-card .pc-media { margin-bottom: 1rem; }
  .products.list-view .product-card .pc-excerpt, .products.list-view .product-card .pc-features { display: none; }
  .products.list-view .product-card .pc-title { font-size: .875rem; -webkit-line-clamp: 2; min-height: calc(2 * 1.2857em); }
  .products.list-view .product-card .pc-footer { margin-top: .875rem; }

  /* single product */
  .product-gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery-thumbs { order: 2; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: .5rem; }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
  .gallery-thumbs button { width: 68px; height: 68px; flex-shrink: 0; }
  .product-summary h1 { font-size: 1.5rem; }
  .product-summary .price { font-size: 1.5rem; }
  .cart-form .btn-primary { min-width: 0; }
  .product-iconboxes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 1rem; gap: .875rem; }
  .product-tabs .tab-list { gap: 1.25rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .product-tabs .tab-list button { white-space: nowrap; font-size: .9375rem; }
  .spec-table th { width: 40%; }

  /* cart table becomes stacked rows */
  .shop-table.is-responsive thead { display: none; }
  .shop-table.is-responsive, .shop-table.is-responsive tbody { display: block; }
  .shop-table.is-responsive tr {
    display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: .5rem .875rem; align-items: center;
    padding: 1rem 0; border-bottom: 1px solid var(--border);
  }
  .shop-table.is-responsive td { display: block; padding: 0; border: 0; }
  .shop-table.is-responsive .col-thumb { grid-column: 1; grid-row: 1 / span 4; align-self: start; width: auto; }
  .shop-table.is-responsive .col-thumb img { width: 76px; height: 76px; }
  .shop-table.is-responsive .col-name { grid-column: 2; grid-row: 1; }
  .shop-table.is-responsive .col-remove { grid-column: 3; grid-row: 1; width: auto; align-self: start; }
  .shop-table.is-responsive td[data-label] { grid-column: 2 / span 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .8125rem; }
  .shop-table.is-responsive td[data-label]::before { content: attr(data-label); font-weight: 500; color: var(--text-muted); }
  .cart-actions { flex-direction: column; }
  .coupon-form .form-control { width: auto; flex: 1; }
  .cart-actions > .btn { width: 100%; }

  .form-row { grid-template-columns: minmax(0, 1fr); }
  .card-box { padding: 1.5rem; }
  .auth-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .address-grid { grid-template-columns: minmax(0, 1fr); }
  .mission-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .mission-card { padding: 1.75rem; }
  .about-hero { min-height: 220px; }
  .about-hero .inner { padding: 2rem 1.5rem; }
  .about-hero h1 { font-size: 1.875rem; }
  .cta-band { padding: 2rem 1.5rem; }
  .cta-band h2 { font-size: 1.375rem; }
  .tracking-steps li { font-size: .6875rem; }

  .footer-about { display: block; }
  .footer-about .footer-contact { margin-top: 1.25rem; }
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .footer-columns .footer-col:first-child { grid-column: 1 / -1; }
  .newsletter-text { gap: 1rem; }
  .newsletter-text .text-icon { display: none; }
  .newsletter-text h2 { font-size: 1.1875rem; }
  .sub-banners { flex-direction: column; }
  .sub-banners li { justify-content: center; padding: .375rem 0; }
  .sub-banners li + li { border-left: 0; border-top: 1px solid rgba(0, 0, 0, .08); }
  .footer-copyright .container > .inner { flex-direction: column; text-align: center; padding: 1.75rem 0; }

  .modal-body { padding: 1.5rem; }
  .error-page .code { font-size: 5rem; }
}

/* ---------- <= 575px : phones (600 / 480 / 414 / 390 / 375) ---------- */
@media (max-width: 575.98px) {
  .container { padding: 0 16px; }
  .header-mobile .site-brand img { height: 28px; }
  .icon-btn { width: 42px; height: 42px; }

  .products, .products.cols-4, .products.cols-3 { gap: 1.375rem .875rem; }
  .product-card .pc-media { margin-bottom: .75rem; }
  .product-card .pc-thumb { border-radius: var(--radius-sm); }
  .product-card .pc-badges { top: .5rem; left: .5rem; }
  .product-card .badge { height: 20px; font-size: .625rem; padding: 0 .375rem; }
  .product-card .pc-actions { top: .5rem; right: .5rem; gap: .375rem; }
  .pc-action { width: 32px; height: 32px; }
  .pc-action .icon { width: 15px; height: 15px; }
  .product-card .pc-title { font-size: .8125rem; }
  .product-card .price { font-size: 1rem; }
  .product-card .price del { font-size: .75rem; }
  .product-card .pc-cart { height: 38px; font-size: .75rem; padding: 0 .5rem; gap: .375rem; }
  .product-card .pc-footer { margin-top: .75rem; }

  .carousel-track { --gap: 14px; }
  .banner-content { width: 92%; padding: 1.25rem; gap: .5rem; }
  .banner .entry-title { font-size: 1.0625rem; }
  .banner-wide { aspect-ratio: 16 / 9; }
  .banner-wide .banner-content { width: 92%; padding: 1.25rem; }
  .banner-wide .entry-title { font-size: 1.125rem; }
  .category-module .banner-content { width: 100%; padding: 1.5rem; }
  .category-module .sale-percentage { font-size: 2.5rem; }
  .category-module .banner p { font-size: .8125rem; }

  .deal-item .price { font-size: 1.125rem; }
  .logos { gap: 1rem; }

  .shop-toolbar .form-select { max-width: 160px; }
  .pagination { margin-top: 2rem; }
  .pagination button, .pagination span { min-width: 36px; height: 36px; padding: 0 .5rem; font-size: .8125rem; }

  .product-iconboxes { grid-template-columns: minmax(0, 1fr); }
  .cart-form { gap: .5rem; }
  .cart-form .qty { height: 48px; }
  .cart-form .btn-primary { height: 48px; flex-basis: calc(100% - 140px); }
  .cart-totals, .order-review { padding: 1.25rem; }
  .coupon-form { flex-direction: column; }
  .coupon-form .form-control { flex: none; width: 100%; }
  .card-fields { grid-template-columns: minmax(0, 1fr); }
  .dash-cards { grid-template-columns: minmax(0, 1fr); }
  .features-grid { grid-template-columns: minmax(0, 1fr); }
  .about-mosaic { gap: .625rem; }
  .contact-box { padding: 1rem; }
  .legal h2 { font-size: 1.125rem; }

  .newsletter-form form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }
  .toast { font-size: .8125rem; }
}

/* ---------- <= 359px : very small phones (320) ---------- */
@media (max-width: 359.98px) {
  .products, .products.cols-4, .products.cols-3, .products.list-view, .category-module .products { --cols: 1 !important; }
  .carousel-track { --per: 1; }
  .product-card .pc-title { font-size: .875rem; }
  .slide-title { font-size: 1.5rem; }
  .header-mobile .site-brand img { height: 24px; }
  .icon-btn { width: 38px; height: 38px; }
  .footer-columns { grid-template-columns: minmax(0, 1fr); }
  .mobile-bottom-menu a, .mobile-bottom-menu button { font-size: .5625rem; }
  .product-iconboxes { padding: .875rem; }
  .cart-form .btn-primary { flex-basis: 100%; }
}

/* ---------- Large desktop polish ---------- */
@media (min-width: 1600px) {
  .slide-title { font-size: 3.25rem; }
}

/* ---------- Print ---------- */
@media print {
  #site-header, #site-footer, .mobile-bottom-menu, .back-to-top, .toast-region, .pc-actions, .pc-footer { display: none !important; }
  body { padding: 0; }
}