/* =============================================================================
   RESPONSIVE.CSS — Smartware Tanzania
   Targets only the site's custom CSS classes (not Tailwind utilities).
   Breakpoints mirror Tailwind's defaults:
     ≥ 1536px  2xl
     ≥ 1280px  xl
     ≤ 1024px  below lg
     ≤  768px  below md
     ≤  640px  below sm
     ≤  480px  phone
     ≤  375px  small phone
     ≤  320px  extra-small
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   ULTRA-WIDE / 2XL  ≥ 1536px
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1536px) {
    .max-w-7xl {
        max-width: 1400px;
    }

    .logo-text {
        font-size: 2.75rem;
    }

    .related-product-card__img-wrap {
        height: 240px;
    }

    .brand-card {
        min-width: 250px;
    }

    .welcome-deal {
        min-width: 360px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LARGE DESKTOP  ≥ 1280px
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
    .related-product-card__img-wrap {
        height: 210px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BELOW LAPTOP  ≤ 1024px
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Neumorphic shadows: slightly reduced */
    .neumorphic-card {
        box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
    }

    /* Hero carousel: scale down image area */
    .related-product-card__img-wrap {
        height: 170px;
    }

    /* Logo */
    .logo-text {
        font-size: 1.85rem;
    }

    /* Welcome deals */
    .welcome-deal {
        min-width: 270px;
    }

    /* Brand cards */
    .brand-card {
        min-width: 205px;
    }

    /* Wishlist checkout sticky sidebar: unstick */
    body.wishlist-checkout-page .sticky-sidebar {
        position: static;
    }

    /* Filter sidebar uses slide-in on tablet too */
    .filter-sidebar {
        max-width: 340px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABLET PORTRAIT  ≤ 768px
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Logo */
    .logo-text {
        font-size: 1.5rem;
    }

    .logo-text1 {
        font-size: 1.1rem;
    }

    /* Carousel nav buttons */
    .carousel-nav-btn {
        width: 36px;
        height: 36px;
    }

    .carousel-nav-btn .material-symbols-outlined {
        font-size: 20px;
    }

    /* Related product card */
    .related-product-card__img-wrap {
        height: 150px;
    }

    .related-product-card__img-wrap img {
        padding: 12px;
    }

    .related-product-card__name {
        font-size: 12px;
    }

    .related-product-card__price {
        font-size: 13px;
    }

    /* Welcome deal cards */
    .welcome-deal {
        min-width: 245px;
    }

    /* Brand cards */
    .brand-card {
        min-width: 185px;
    }

    /* Compact product card */
    .compact-product-img {
        width: 64px;
        height: 64px;
    }

    .compact-product-title {
        font-size: 0.8rem;
    }

    .compact-product-price {
        font-size: 0.8rem;
    }

    /* Widget heading */
    .widget-splide-heading {
        font-size: 1rem;
    }

    /* Search dropdown */
    .sw-srch-dropdown {
        min-width: 0;
        border-radius: 14px;
    }

    /* Filter sidebar */
    .filter-sidebar {
        max-width: 320px;
    }

    .cat-filter-sidebar {
        width: 85vw;
        max-width: 300px;
    }

    /* Toast — stretch across bottom */
    .toast {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        width: auto;
    }

    body.wishlist-checkout-page .toast {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    /* Modal — slide up from bottom */
    .modal {
        align-items: flex-end;
    }

    .modal-content {
        border-radius: 1.5rem 1.5rem 0 0;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        transform: translateY(20px);
    }

    .modal.active .modal-content {
        transform: translateY(0);
    }

    /* FAQ */
    .faq-question-text {
        font-size: 0.9rem;
    }

    .faq-icon-bubble {
        width: 2rem;
        height: 2rem;
    }

    /* Breadcrumb */
    .breadcrumb-item:not(:last-child)::after {
        margin: 0 4px;
    }

    /* Notification */
    .notification {
        top: 80px;
        right: 10px;
    }

    /* Wishlist qty controls */
    body.wishlist-checkout-page .qty-btn {
        width: 26px;
        height: 26px;
        font-size: 0.9rem;
    }

    body.wishlist-checkout-page .qty-display {
        width: 32px;
        height: 26px;
        font-size: 0.85rem;
    }

    /* Tag badge */
    .tag-badge {
        padding: 10px 18px;
        font-size: 0.875rem;
    }

    /* Related tag */
    .related-tag {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Brand logo initials */
    .brand-logo {
        font-size: 1.5rem;
    }

    /* Page loader spinner */
    .loader-spinner {
        width: 48px;
        height: 48px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LARGE PHONE / PHABLET  ≤ 640px
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Hide scroll-to-top button — replaced by the wishlist FAB */
    #scrollToTop {
        display: none !important;
    }

    /* Category card name — trim to ~10 chars */
    .category-item span.font-bold {
        max-width: 10ch;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        text-align: center;
    }

    /* Logo */
    .logo-text {
        font-size: 1.35rem;
    }

    .logo-text1 {
        font-size: 0.95rem;
    }

    /* Neumorphic — lighter shadows for performance on mobile */
    .neumorphic-card {
        box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
        border-radius: 16px;
    }

    .neumorphic-inset {
        border-radius: 12px;
    }

    /* Carousel nav buttons */
    .carousel-nav-btn {
        width: 32px;
        height: 32px;
    }

    .carousel-nav-btn .material-symbols-outlined {
        font-size: 18px;
    }

    /* Related product card */
    .related-product-card {
        border-radius: 14px;
    }

    .related-product-card__img-wrap {
        height: 130px;
    }

    .related-product-card__img-wrap img {
        padding: 10px;
    }

    .related-product-card__badge {
        font-size: 8px;
        padding: 2px 10px;
    }

    .related-product-card__name {
        font-size: 11px;
        min-height: auto;
    }

    .related-product-card__price {
        font-size: 12px;
    }

    .related-product-card__info {
        padding: 10px 10px 8px;
    }

    /* Flash sale stats (Live Deals / Max Off / Sold) */
    #flashCountdown ~ .grid > div {
        padding: 0.5rem 0.25rem;
        border-radius: 0.75rem;
    }

    #flashCountdown ~ .grid > div > div:first-child {
        font-size: 1rem;
        line-height: 1.2;
    }

    #flashCountdown ~ .grid > div > div:last-child {
        font-size: 0.6rem;
    }

    /* Featured products grid — fixed card width on mobile */
    #productsGrid .product-card {
        min-width: 200px;
        width: 200px;
    }

    /* Welcome deals */
    .welcome-deal {
        min-width: 220px;
    }

    /* Badge label (e.g. "WELCOME OFFER") */
    .welcome-deal .flex > span:first-child {
        font-size: 0.6rem;
        padding: 2px 8px;
    }

    /* Discount percentage (e.g. "15% OFF") */
    .welcome-deal .flex > span:last-child {
        font-size: 0.8rem;
    }

    /* Brand cards */
    .brand-card {
        min-width: 165px;
    }

    .brand-card h3 {
        font-size: 0.85rem;
    }

    .brand-card p {
        font-size: 0.6rem;
    }

    /* Footer copyright */
    footer .border-t div {
        font-size: 0.6rem;
    }

    /* Compact product card */
    .compact-product-card {
        padding: 0.625rem;
        gap: 0.625rem;
        border-radius: 12px;
    }

    .compact-product-img {
        width: 56px;
        height: 56px;
    }

    .compact-product-title {
        font-size: 0.78rem;
    }

    .compact-product-price {
        font-size: 0.78rem;
    }

    .compact-product-category {
        font-size: 0.55rem;
    }

    /* Widget splide */
    .widget-splide-heading {
        font-size: 0.9rem;
    }

    .widget-splide-prev,
    .widget-splide-next {
        width: 1.75rem;
        height: 1.75rem;
    }

    .widget-slide-group {
        gap: 0.625rem;
    }

    /* Search results */
    .sw-srch-img {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .sw-srch-img-sm {
        width: 36px;
        height: 36px;
    }

    .sw-srch-name {
        font-size: 0.78rem;
    }

    .sw-srch-price {
        font-size: 0.7rem;
    }

    .sw-srch-meta {
        font-size: 0.65rem;
    }

    /* Filter sidebar */
    .filter-sidebar {
        max-width: 85vw;
    }

    .cat-filter-sidebar {
        width: 88vw;
        max-width: 280px;
    }

    /* Toast */
    .toast {
        bottom: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        border-radius: 10px;
        font-size: 0.8rem;
    }

    /* Notification */
    .notification {
        right: 0.5rem;
        transform: translateX(calc(100% + 0.5rem));
    }

    .notification.show {
        transform: translateX(0);
    }

    /* FAQ */
    .faq-icon-bubble {
        width: 1.875rem;
        height: 1.875rem;
    }

    .faq-icon-bubble .material-symbols-outlined {
        font-size: 18px;
    }

    .faq-question-text {
        font-size: 0.85rem;
    }

    .faq-item {
        border-radius: 16px;
    }

    /* Tag & related tags */
    .tag-badge {
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    .related-tag {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    /* Primary button */
    .primary-button {
        box-shadow: 3px 3px 8px rgba(157, 16, 28, 0.3);
    }

    /* Wishlist badge */
    body.wishlist-checkout-page .badge-in-stock,
    body.wishlist-checkout-page .badge-low-stock {
        font-size: 0.6rem;
    }

    /* Brand hero */
    .brand-hero::before {
        width: 80%;
        right: -20%;
    }

    /* Star rating */
    .star-rating {
        gap: 1px;
    }

    /* Breadcrumb */
    .breadcrumb-item {
        font-size: 0.6rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   STANDARD PHONE  ≤ 480px
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Logo */
    .logo-text {
        font-size: 1.2rem;
    }

    .logo-text1 {
        font-size: 0.875rem;
    }

    /* Neumorphic — minimal shadows */
    .neumorphic-card {
        box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
        border-radius: 14px;
    }

    .neumorphic-inset {
        border-radius: 10px;
    }

    .neumorphic-button {
        box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    }

    /* Related product card */
    .related-product-card__img-wrap {
        height: 115px;
    }

    .related-product-card__name {
        font-size: 10px;
    }

    .related-product-card__price {
        font-size: 11px;
    }

    /* Welcome deals */
    .welcome-deal {
        min-width: 200px;
    }

    /* Brand cards */
    .brand-card {
        min-width: 148px;
    }

    /* Compact product */
    .compact-product-img {
        width: 50px;
        height: 50px;
        padding: 0.375rem;
    }

    .compact-product-title {
        font-size: 0.75rem;
    }

    .compact-product-price {
        font-size: 0.75rem;
    }

    /* Search dropdown */
    .sw-srch-dropdown {
        border-radius: 12px;
        max-height: 350px;
    }

    .sw-srch-img {
        width: 40px;
        height: 40px;
    }

    .sw-srch-name {
        font-size: 0.75rem;
    }

    .sw-srch-seeall {
        padding: 10px 12px;
        font-size: 0.72rem;
    }

    /* FAQ */
    .faq-question-text {
        font-size: 0.82rem;
    }

    .faq-item {
        border-radius: 14px;
    }

    /* Filter sidebar */
    .filter-sidebar,
    .cat-filter-sidebar {
        width: 90vw;
    }

    /* Modal */
    .modal-content {
        border-radius: 1rem 1rem 0 0;
    }

    /* Wishlist */
    body.wishlist-checkout-page .qty-btn {
        width: 24px;
        height: 24px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    body.wishlist-checkout-page .qty-display {
        width: 28px;
        height: 24px;
        font-size: 0.78rem;
    }

    body.wishlist-checkout-page .item-checkbox {
        width: 18px;
        height: 18px;
    }

    body.wishlist-checkout-page .item-checkbox:checked::after {
        left: 5px;
        width: 5px;
        height: 9px;
    }

    /* Spinner */
    .spinner {
        width: 32px;
        height: 32px;
        border-width: 3px;
    }

    .loader-spinner {
        width: 44px;
        height: 44px;
        border-width: 3px;
    }

    /* Discount pill */
    body.wishlist-checkout-page .discount-pill {
        font-size: 0.58rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SMALL PHONE  ≤ 375px
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
    /* Logo */
    .logo-text {
        font-size: 1.05rem;
    }

    .logo-text1 {
        font-size: 0.8rem;
    }

    /* Neumorphic */
    .neumorphic-card {
        border-radius: 12px;
        box-shadow: 3px 3px 7px var(--shadow-dark), -3px -3px 7px var(--shadow-light);
    }

    /* Related product card */
    .related-product-card__img-wrap {
        height: 100px;
    }

    .related-product-card__img-wrap img {
        padding: 8px;
    }

    .related-product-card__info {
        padding: 8px 8px 6px;
    }

    .related-product-card__badge {
        font-size: 7px;
        padding: 2px 8px;
    }

    /* Welcome deals */
    .welcome-deal {
        min-width: 185px;
    }

    /* Brand cards */
    .brand-card {
        min-width: 135px;
    }

    /* Compact product */
    .compact-product-card {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .compact-product-img {
        width: 44px;
        height: 44px;
    }

    .compact-product-title {
        font-size: 0.72rem;
    }

    .compact-product-price {
        font-size: 0.72rem;
    }

    /* Search results */
    .sw-srch-img {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .sw-srch-name {
        font-size: 0.72rem;
    }

    .sw-srch-item {
        gap: 8px;
        padding: 8px 10px;
    }

    /* Widget */
    .widget-splide-heading {
        font-size: 0.85rem;
    }

    .widget-splide-prev,
    .widget-splide-next {
        width: 1.5rem;
        height: 1.5rem;
    }

    .widget-slide-group {
        gap: 0.5rem;
    }

    /* FAQ */
    .faq-question-text {
        font-size: 0.78rem;
    }

    .faq-question-row {
        gap: 0.5rem;
    }

    /* Filter sidebar */
    .filter-sidebar,
    .cat-filter-sidebar {
        width: 92vw;
    }

    /* Tag badge */
    .tag-badge {
        padding: 7px 12px;
        font-size: 0.75rem;
    }

    .related-tag {
        padding: 5px 10px;
        font-size: 0.7rem;
    }

    /* Carousel nav */
    .carousel-nav-btn {
        width: 28px;
        height: 28px;
    }

    .carousel-nav-btn .material-symbols-outlined {
        font-size: 16px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   EXTRA-SMALL / LEGACY  ≤ 320px
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 320px) {
    /* Logo */
    .logo-text {
        font-size: 0.95rem;
    }

    .logo-text1 {
        font-size: 0.75rem;
    }

    /* Neumorphic */
    .neumorphic-card {
        border-radius: 10px;
        box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    }

    /* Related product */
    .related-product-card__img-wrap {
        height: 85px;
    }

    /* Welcome deals */
    .welcome-deal {
        min-width: 170px;
    }

    /* Brand cards */
    .brand-card {
        min-width: 118px;
    }

    /* Compact product */
    .compact-product-img {
        width: 38px;
        height: 38px;
    }

    .compact-product-title {
        font-size: 0.68rem;
    }

    .compact-product-price {
        font-size: 0.68rem;
    }

    /* Search */
    .sw-srch-img {
        width: 32px;
        height: 32px;
    }

    .sw-srch-name {
        font-size: 0.68rem;
    }

    /* Filter sidebar */
    .filter-sidebar,
    .cat-filter-sidebar {
        width: 96vw;
    }

    /* FAQ */
    .faq-question-text {
        font-size: 0.72rem;
    }

    .faq-icon-bubble {
        width: 1.625rem;
        height: 1.625rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOUCH DEVICES — disable sticky hover states
   ───────────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .neumorphic-card:hover,
    .related-product-card:hover,
    .welcome-deal:hover,
    .today-deal:hover,
    .compact-product-card:hover,
    .product-widget:hover,
    .tag-badge:hover,
    .related-tag:hover,
    .faq-item:hover,
    .brand-card:hover,
    .category-card:hover {
        transform: none;
        box-shadow: inherit;
    }

    /* Larger tap targets */
    .carousel-nav-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Remove tap highlight */
    a,
    button {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED 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;
    }

    .skeleton {
        animation: none;
        background: #e0e5ec;
    }

    .badge-pulse {
        animation: none;
    }

    #connectionIndicator {
        animation: none;
    }

    #pageLoader {
        animation: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────────────────────────────────────── */
@media print {
    nav#mainNav,
    #pageLoader,
    .carousel-nav-btn,
    .notification,
    .toast,
    .modal,
    .backdrop,
    .filter-sidebar,
    .cat-filter-sidebar,
    #filterPanel,
    .sw-srch-dropdown {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .neumorphic-card,
    .neumorphic-inset,
    .neumorphic-button {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .related-product-card,
    .today-deal,
    .welcome-deal {
        break-inside: avoid;
    }
}