/* ==========================================
   GLOBAL CARD SAFETY (all viewports)
   ========================================== */
.product-card, .category-card {
    min-width: 0;
    box-sizing: border-box;
}

/* Prevent horizontal overflow globally */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ==========================================
   LARGE MONITORS / TV VIEWS (1600px+)
   ========================================== */
@media (min-width: 1600px) {
    .container {
        max-width: 1440px;
    }
    .hero-title {
        font-size: 5.5rem !important;
    }
    .section-title {
        font-size: 3rem;
    }
}

/* ==========================================
   LAPTOP & SMALL DESKTOP (Under 1280px)
   ========================================== */
@media (max-width: 1280px) {
    .container {
        padding: 0 24px;
    }
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
    }
    .hero-title {
        font-size: 4rem !important;
    }
}

/* ==========================================
   TABLET LANDSCAPE & SMALL LAPTOPS (Under 1024px)
   ========================================== */
@media (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }

    /* Hide desktop nav, show hamburger */
    .nav-menu {
        display: none !important;
    }
    .hamburger-btn {
        display: block !important;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--color-text);
    }

    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    .category-grid-6 {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 30px;
    }
    .hero-title {
        font-size: 3rem !important;
    }
    .mega-menu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    .mega-menu {
        padding: 30px 0 !important;
    }

    /* Mobile Shop layout filters slide-in drawer styling */
    .sidebar-filters {
        position: fixed !important;
        top: 0;
        right: -380px !important;
        width: 100% !important;
        max-width: 360px !important;
        height: 100vh !important;
        background-color: var(--color-card-bg) !important;
        z-index: 205 !important;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05) !important;
        padding: 24px !important;
        display: flex !important;
        flex-direction: column;
        overflow-y: auto !important;
        transition: right var(--transition-fast) !important;
        border-radius: 0 !important;
        border: none !important;
        margin-bottom: 0 !important;
    }

    .sidebar-filters.active {
        right: 0 !important;
    }

    .desktop-catalog-bar {
        display: none !important;
    }

    .mobile-catalog-bar {
        display: flex !important;
    }

    .mobile-catalog-bar #mobile-filter-trigger,
    .mobile-catalog-bar .custom-select-trigger {
        height: 44px !important;
        font-size: 0.85rem !important;
        border-radius: var(--radius-sm) !important;
        border: 2px solid var(--color-border) !important;
    }

    .mobile-catalog-bar #mobile-filter-trigger {
        padding: 8px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-catalog-bar .custom-select-trigger {
        padding: 8px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}

/* ==========================================
   TABLET PORTRAIT (Under 768px)
   ========================================== */
@media (max-width: 768px) {

    /* ---- Sections ---- */
    .section {
        padding: 50px 0;
    }
    .section-title {
        font-size: 1.8rem !important;
    }
    .section-subtitle {
        font-size: 0.95rem !important;
    }

    /* ---- Announcement Bar ---- */
    /* Only show the first span, hide the rest */
    .announcement-wrapper .divider {
        display: none !important;
    }
    .announcement-wrapper span:not(:first-child) {
        display: none !important;
    }
    .announcement-wrapper {
        gap: 0 !important;
        padding: 0 16px;
    }
    .announcement-bar {
        font-size: 0.78rem;
        padding: 9px 0;
    }

    /* ---- Header / Logo ---- */
    .logo img {
        height: 44px !important;
    }
    /* Hide user account icon in header to prevent row wrap */
    .header-actions #login-trigger,
    .header-actions a[aria-label="User Account"] {
        display: none !important;
    }
    .header-actions {
        gap: 14px;
    }

    /* ---- Hero Section ---- */
    .hero-section {
        padding: 40px 0 !important;
        border-bottom-left-radius: 24px !important;
        border-bottom-right-radius: 24px !important;
    }
    .hero-split {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center;
    }
    .hero-content {
        flex: unset !important;
        padding-right: 0 !important;
        width: 100%;
    }
    .hero-title {
        font-size: 2.8rem !important;
        letter-spacing: -0.5px !important;
    }
    .hero-round-features {
        justify-content: center !important;
        gap: 12px !important;
    }
    .hero-split > div:last-child {
        width: 100%;
        align-items: center !important;
    }
    /* Hero image fills width */
    .hero-split > div:last-child img {
        width: 85% !important;
        margin: 0 auto;
    }
    /* Floating strip inside hero */
    .hero-floating-strip {
        flex-direction: column !important;
        gap: 14px !important;
        padding: 18px 20px !important;
        align-items: flex-start !important;
        border-radius: 20px !important;
        width: 85% !important;
        margin: -10px auto 0 !important;
    }
    .hero-floating-strip > div[style*="width:1px"] {
        display: none !important;
    }
    .hero-floating-strip > div {
        width: 100% !important;
    }

    /* ---- Category Grid ---- */
    .category-grid-6 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px;
    }

    /* ---- Trust Bar ---- */
    .trust-divider {
        display: none !important;
    }
    .section div[style*="background-color: #FFEFEF"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
        border-radius: 20px !important;
        padding: 20px 16px !important;
        gap: 16px !important;
    }

    /* ---- Standard Grids ---- */
    .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }
    .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }

    /* ---- Page Layouts ---- */
    .shop-layout,
    .checkout-layout,
    .cart-layout,
    .account-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .form-row-3 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    /* Removed static filter sidebar styling to keep drawer layout on smaller viewports */

    /* ---- Promo Banner ---- */
    .promo-banner {
        padding: 36px 20px !important;
        border-radius: 20px !important;
    }
    .promo-banner h2 {
        font-size: 2rem !important;
    }
    .promo-banner .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        text-align: center !important;
    }
    .promo-banner .grid-2 > div:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* ---- Cart Table ---- */
    #cart-table thead {
        display: none !important;
    }
    #cart-table tr {
        display: block !important;
        padding: 15px !important;
        border-bottom: 1px solid var(--color-border) !important;
    }
    #cart-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border: none !important;
    }
    #cart-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--color-text);
        font-size: 0.85rem;
    }
    #cart-table td:first-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important;
        justify-content: flex-start !important;
        padding-left: 0 !important;
    }
    #cart-table td:first-child::before {
        content: none !important;
    }
    #cart-table td img {
        margin: 0 !important;
    }

    /* ---- Order Tracking Timeline ---- */
    .timeline-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 30px !important;
        padding-left: 20px !important;
        position: relative;
    }
    .timeline-bar-bg, #timeline-progress-bar {
        display: none !important;
    }
    .timeline-container::after {
        content: '';
        position: absolute;
        left: 47px;
        top: 20px;
        bottom: 20px;
        width: 4px;
        background-color: var(--color-light-grey);
        z-index: 0;
    }
    .timeline-node {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 20px !important;
        z-index: 1;
    }
    .timeline-node .node-circle {
        margin: 0 !important;
    }
    .timeline-node span {
        margin-top: 0 !important;
    }

    /* ---- Search Overlay ---- */
    .search-overlay {
        padding: 60px 20px !important;
    }

    /* ---- Quick View Modal ---- */
    #quick-view-modal .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    #quick-view-modal .modal-content {
        max-width: 96vw !important;
        padding: 20px !important;
    }
    #quick-view-modal #qv-img {
        max-height: 250px !important;
    }

    /* ---- Footer ---- */
    footer {
        padding: 50px 0 24px !important;
    }
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        text-align: center !important;
    }
    .footer-col:first-child {
        grid-column: span 1 !important;
    }
    .social-links {
        justify-content: center !important;
        margin-top: 12px;
    }
    .footer-col ul li a:hover {
        padding-left: 0 !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }
    .payment-icons {
        justify-content: center !important;
    }
}

/* ==========================================
   MOBILE (Under 480px)
   ========================================== */
@media (max-width: 480px) {

    .container {
        padding: 0 16px;
    }

    /* ---- Hero ---- */
    .hero-section {
        padding: 30px 0 !important;
    }
    .hero-title {
        font-size: 2.3rem !important;
    }
    .hero-split > div:last-child img {
        width: 100% !important;
    }
    .hero-floating-strip {
        width: 100% !important;
    }
    /* Show hero image above content on mobile */
    .hero-split {
        flex-direction: column !important;
    }

    /* ---- Category grid: 2 cols on mobile ---- */
    .category-grid-6 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .category-title {
        font-size: 0.85rem !important;
    }

    /* ---- Standard grids ---- */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ---- Product grids stay 2-col ---- */
    #shop-catalog-grid,
    #homepage-best-sellers,
    #age-filtered-grid,
    #search-results-grid,
    #wishlist-page-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ---- Product card tweaks ---- */
    .product-details {
        padding: 10px !important;
    }
    .product-name {
        font-size: 0.85rem !important;
        margin-bottom: 4px !important;
    }
    .product-category {
        font-size: 0.65rem !important;
        margin-bottom: 4px !important;
    }
    .product-price {
        font-size: 0.95rem !important;
    }
    .product-rating {
        margin-bottom: 8px !important;
    }
    .btn-card-atc {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }
    /* Hide wishlist button on mobile product cards to save space */
    .product-wishlist-btn {
        width: 30px !important;
        height: 30px !important;
        top: 8px !important;
        right: 8px !important;
    }
    .product-wishlist-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* ---- Promo banner ---- */
    .promo-banner {
        padding: 28px 16px !important;
    }
    .promo-banner h2 {
        font-size: 1.6rem !important;
        line-height: 1.25 !important;
    }

    /* ---- Newsletter ---- */
    #newsletter-form {
        flex-direction: column !important;
        gap: 12px !important;
    }
    #newsletter-form input {
        border-radius: var(--radius-md) !important;
        text-align: center;
    }
    #newsletter-form button {
        width: 100% !important;
        border-radius: var(--radius-md) !important;
    }
    .newsletter-section-wrap {
        padding: 28px 16px !important;
        border-radius: 20px !important;
    }

    /* ---- Footer links ---- */
    .footer-grid {
        gap: 20px !important;
    }

    /* ---- Product page buy wrap ---- */
    #product-buy-btn-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    #product-buy-btn-wrap > div {
        display: flex;
        justify-content: center;
    }
    #product-buy-btn-wrap button {
        width: 100% !important;
    }

    /* ---- Search overlay ---- */
    .search-input {
        font-size: 1.4rem !important;
    }
    .search-suggestions {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* ---- Modals ---- */
    .modal-content {
        padding: 24px 16px !important;
        max-width: 96vw !important;
        border-radius: 20px !important;
    }

    /* ---- Toasts ---- */
    .toast-container {
        left: 12px;
        right: 12px;
        bottom: 16px;
    }
    .toast {
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    /* ---- GDPR Banner ---- */
    .gdpr-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 16px;
        max-width: unset !important;
    }

    /* ---- Header ---- */
    .header-actions {
        gap: 10px;
    }
    .logo img {
        height: 40px !important;
    }
}

/* ==========================================
   MICRO-MOBILE (Under 360px)
   ========================================== */
@media (max-width: 360px) {
    .container {
        padding: 0 12px;
    }

    .logo img {
        height: 36px !important;
    }
    .header-actions {
        gap: 8px !important;
    }

    /* Tighter product grids */
    #shop-catalog-grid,
    #homepage-best-sellers,
    #age-filtered-grid,
    #search-results-grid,
    #wishlist-page-grid {
        gap: 8px !important;
    }
    .product-details {
        padding: 8px !important;
    }
    .product-name {
        font-size: 0.78rem !important;
    }
    .product-price {
        font-size: 0.85rem !important;
    }
    .btn-card-atc {
        padding: 6px 8px !important;
        font-size: 0.7rem !important;
    }

    .hero-title {
        font-size: 1.9rem !important;
    }
    .section-title {
        font-size: 1.5rem !important;
    }
    .announcement-bar {
        font-size: 0.7rem !important;
        padding: 7px 0;
    }
}