/* ============================================
   RESPONSIVE FIXES - MOBILE, TABLET & LAPTOP
   Addresses horizontal overflow and layout issues
   across all device sizes
   ============================================ */

/* GLOBAL: Prevent any horizontal overflow on all devices */
html,
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* ============================================
   GLOBAL THEME CONSISTENCY
   Ensures light and dark mode have IDENTICAL
   layout, spacing, alignment on ALL screens.
   Only colors should differ between themes.
   ============================================ */

/* Reset dark mode layout overrides to match light mode */
/* Hero section - Remove dark-mode-specific layout constraints */
[data-theme="dark"] .mainscreen__cta {
    flex: unset;
    max-width: unset;
}

/* GLOBAL: Disable active card size increase on ALL mobile screens */
@media (max-width: 768px) {

    .account-row__item.--active,
    [data-theme="dark"] .account-row__item.--active {
        transform: none !important;
        animation: none !important;
    }

    /* Prevent active price from getting larger */
    .account-row__item.--active .account-row__price,
    [data-theme="dark"] .account-row__item.--active .account-row__price {
        font-size: 1rem !important;
    }
}

/* ============================================
   LAPTOP FIXES (1025px - 1366px)
   ============================================ */
@media (min-width: 1025px) and (max-width: 1366px) {
    .account-row {
        width: 100% !important;
        margin: 0 !important;
        gap: 16px !important;
    }

    .account-row__item {
        width: calc(33.333% - 12px) !important;
        min-width: unset !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .container {
        max-width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .region-btn {
        min-width: 150px !important;
    }
}

/* ============================================
   TABLET FIXES (769px - 1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .account-row {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 12px !important;
        justify-content: center !important;
    }

    .account-row__item {
        width: calc(50% - 8px) !important;
        min-width: unset !important;
        max-width: calc(50% - 8px) !important;
        margin: 0 !important;
        padding: 16px 18px !important;
        box-sizing: border-box !important;
    }

    .account-row__left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 95px) !important;
    }

    .account-row__right {
        flex: 0 0 auto !important;
        min-width: 85px !important;
    }

    .account-row__be {
        font-size: 1rem !important;
    }

    .account-row__badge {
        font-size: 0.55rem !important;
        padding: 2px 6px !important;
    }

    .container {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .region-selector {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .region-btn {
        min-width: 140px !important;
        flex: 0 1 auto !important;
    }

    /* Fix third-screen and other rows on tablet */
    .third-screen__row,
    .info-screen__container,
    .review-page__row,
    .order-form__row,
    .contact-page__row {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Bootstrap row fix for tablet */
    .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* ============================================
   MOBILE FIXES (up to 768px)
   ============================================ */

/* REGION BUTTONS: Remove fixed min-width on mobile */
@media (max-width: 768px) {
    .region-selector {
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .region-btn {
        min-width: unset !important;
        flex: 1 1 calc(50% - 8px) !important;
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .region-btn__flag {
        font-size: 1.5rem !important;
    }

    .region-btn__code {
        font-size: 0.95rem !important;
    }

    .region-btn__name {
        font-size: 0.65rem !important;
    }
}

@media (max-width: 480px) {
    .region-btn {
        flex: 1 1 100% !important;
        min-width: unset !important;
        padding: 12px 16px !important;
    }
}

/* ACCOUNT ROW: Fix the negative margin causing overflow */
@media (max-width: 768px) {
    .account-row {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 12px !important;
    }

    .account-row__item {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
}

/* ACCOUNT CARDS: Ensure text fits properly */
@media (max-width: 480px) {
    .account-row__item {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .account-row__left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 90px) !important;
        overflow: hidden !important;
    }

    .account-row__right {
        flex: 0 0 auto !important;
        min-width: 80px !important;
        max-width: 90px !important;
        text-align: right !important;
    }

    .account-row__box {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        align-items: center !important;
        max-width: 100% !important;
    }

    .account-row__be {
        font-size: 0.95rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 120px !important;
    }

    .account-row__badge {
        font-size: 0.55rem !important;
        padding: 2px 5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .account-row__caption {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }

    .account-row__price {
        font-size: 1.1rem !important;
        white-space: nowrap !important;
    }

    .account-row__oldprice {
        font-size: 0.7rem !important;
    }

    /* Stock indicator inline */
    .account-row__meta {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        margin-top: 4px !important;
    }

    .stock-visualizer {
        flex: 1 !important;
        max-width: 80px !important;
        transform: scale(0.9) !important;
        transform-origin: left center !important;
    }
}

/* ACCOUNT REVIEW SECTION: Fix footer overflow */
@media (max-width: 768px) {
    .account-review__footer {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 20px !important;
    }

    .account-review__col.--footer-left,
    .account-review__col.--footer-right {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .account-review__col.--footer-right {
        margin-top: 12px !important;
    }

    .account-review__row {
        padding: 16px !important;
    }

    .account-review__col {
        width: 50% !important;
        padding: 8px !important;
    }
}

@media (max-width: 480px) {
    .account-review__col {
        width: 100% !important;
        padding: 8px 0 !important;
    }

    .checkout-trust-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    .button.--checkout-action {
        width: 100% !important;
        font-size: 16px !important;
        height: 52px !important;
    }
}

/* HERO SECTION: Prevent background elements from causing overflow */
@media (max-width: 768px) {
    .logo-overlay {
        right: 0 !important;
        width: 100% !important;
        opacity: 0.5 !important;
    }

    .dust-particle {
        display: none !important;
    }

    .mainscreen__cta,
    [data-theme="dark"] .mainscreen__cta {
        padding: 0 16px !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        align-items: center !important;
    }

    .mainscreen__header,
    [data-theme="dark"] .mainscreen__header {
        font-size: 2rem !important;
        left: 0 !important;
        text-align: center !important;
    }

    .mainscreen__subheader,
    [data-theme="dark"] .mainscreen__subheader {
        max-width: 100% !important;
        text-align: center !important;
        font-size: 0.9rem !important;
    }

    .hero-trust,
    [data-theme="dark"] .hero-trust {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.8rem !important;
    }

    .hero-trust__divider {
        display: none !important;
    }
}

/* QUANTITY SELECTOR: Mobile optimization */
@media (max-width: 480px) {
    .quantity-inline {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    .quantity-inline__left {
        width: 100% !important;
        text-align: center !important;
        padding: 0 0 12px 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .quantity-inline__options {
        width: 100% !important;
        justify-content: center !important;
    }

    .quantity-inline__btn {
        flex: 1 !important;
        min-width: 60px !important;
        height: 44px !important;
    }

    .quantity-inline__total {
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding-top: 12px !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .quantity-inline__save,
    .quantity-inline__price {
        font-size: 0.9rem !important;
    }
}

/* CONTAINER: Ensure no overflow */
@media (max-width: 768px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .container.--main-screen {
        overflow: hidden !important;
    }
}

/* DISCORD BUTTON: Responsive */
@media (max-width: 480px) {
    .discord-btn {
        flex-direction: column !important;
        text-align: center !important;
        padding: 16px !important;
    }

    .discord-btn__left {
        align-items: center !important;
        margin-bottom: 12px !important;
    }

    .discord-btn__title {
        font-size: 1.2rem !important;
    }
}

/* GLASS PANELS: Responsive grid */
@media (max-width: 768px) {
    .glass-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .glass-panel {
        padding: 20px !important;
    }
}

/* SWIPER SLIDE: Mobile layout */
@media (max-width: 768px) {
    .swiper-slide.--space-between {
        flex-direction: column-reverse !important;
        gap: 20px !important;
    }

    .swiper-slide.--space-between picture {
        flex: 0 0 auto !important;
        max-width: 80% !important;
        margin: 0 auto !important;
    }
}

/* GOD TIER SVG CONNECTOR: Hide on mobile (too complex for small screens) */
@media (max-width: 768px) {
    .god-connector-svg {
        display: none !important;
    }
}

/* ============================================
   ADDITIONAL OVERFLOW FIXES
   Covers all sections using negative margin pattern
   ============================================ */

@media (max-width: 768px) {

    /* Third screen rows */
    .third-screen__row {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Info screen containers */
    .info-screen__container {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Review page rows */
    .review-page__row {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Order form rows */
    .order-form__row,
    .order-form__row.--flex {
        width: 100% !important;
        margin: 0 !important;
    }

    .order-form__box.--w-50 {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Contact page rows */
    .contact-page__row {
        width: 100% !important;
        margin: 0 !important;
    }

    .contact-page__box.--w-50 {
        width: 100% !important;
    }

    /* Third infoblock */
    .third-infoblock {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Bootstrap row override */
    .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Ensure all absolute positioned elements stay in bounds */
    [style*="right: -"],
    [style*="left: -"] {
        right: auto !important;
        left: auto !important;
    }
}

/* ============================================
   EXTRA SAFEGUARDS - ALL BREAKPOINTS
   ============================================ */

/* Mobile safeguard */
@media (max-width: 768px) {
    * {
        max-width: 100vw;
    }

    .main {
        overflow-x: hidden !important;
    }
}

/* Tablet safeguard */
@media (min-width: 769px) and (max-width: 1024px) {
    .main {
        overflow-x: hidden !important;
    }

    /* Prevent column overflow on tablets */
    .col,
    [class*="col-"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Laptop safeguard */
@media (min-width: 1025px) and (max-width: 1366px) {
    .main {
        overflow-x: hidden !important;
    }

    /* Ensure proper box-sizing */
    .col,
    [class*="col-"] {
        box-sizing: border-box !important;
    }
}

/* ============================================
   INLINE STYLE OVERRIDES FOR KNOWN ISSUES
   ============================================ */

/* Fix NAAccounts.razor image negative margin */
@media (max-width: 768px) {
    img[src*="unranked-smurfs"] {
        float: none !important;
        margin: 20px auto !important;
        display: block !important;
    }
}

/* ============================================
   SAMSUNG GALAXY S8+ SPECIFIC FIXES (360px)
   Addresses navbar crowding and region button
   text cut-off on narrow mobile screens
   ============================================ */

@media (max-width: 360px) {

    /* HEADER / NAVBAR FIXES */
    .header {
        padding: 10px 0 !important;
    }

    .header .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Logo smaller on S8+ */
    .header__logo,
    .header .logo,
    img[src*="logo"] {
        max-width: 120px !important;
        height: auto !important;
    }

    /* Currency picker button smaller */
    .currency-picker__trigger {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
        min-width: unset !important;
    }

    .currency-picker__current-code {
        font-size: 0.75rem !important;
    }

    /* Theme toggle smaller */
    .theme-toggle,
    .theme-switcher {
        width: 36px !important;
        height: 36px !important;
        padding: 6px !important;
    }

    /* Hamburger menu button */
    .hamburger,
    .menu-toggle,
    .mobile-menu-btn {
        padding: 8px !important;
        margin-left: 6px !important;
    }

    /* Header flex items spacing */
    .header__right,
    .header-right,
    .header-actions {
        gap: 6px !important;
    }

    /* REGION BUTTONS FIX - prevent text cut off */
    .region-selector {
        gap: 8px !important;
    }

    .region-btn {
        padding: 12px 10px !important;
        gap: 8px !important;
        flex: 1 1 100% !important;
        min-height: 56px !important;
    }

    .region-btn__flag {
        font-size: 1.4rem !important;
        flex-shrink: 0 !important;
    }

    .region-btn__text {
        flex: 1 !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    .region-btn__code {
        font-size: 1rem !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .region-btn__name {
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ACCOUNT CARDS - tighter spacing on S8+ (both themes) */
    .account-row__item,
    [data-theme="dark"] .account-row__item {
        padding: 12px !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    /* ACTIVE CARD - Disable transform/animation on S8+ to prevent overflow */
    .account-row__item.--active,
    [data-theme="dark"] .account-row__item.--active {
        transform: none !important;
        animation: none !important;
    }

    .account-row__be,
    [data-theme="dark"] .account-row__be {
        font-size: 0.9rem !important;
        max-width: none !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .account-row__badge,
    [data-theme="dark"] .account-row__badge {
        font-size: 0.5rem !important;
        padding: 2px 4px !important;
    }

    .account-row__price,
    [data-theme="dark"] .account-row__price {
        font-size: 1rem !important;
        white-space: nowrap !important;
    }

    /* ACTIVE CARD - Keep same size on S8+ to prevent cutoff */
    .account-row__item.--active .account-row__price,
    [data-theme="dark"] .account-row__item.--active .account-row__price {
        font-size: 1rem !important;
        text-shadow: none !important;
    }

    .account-row__right,
    [data-theme="dark"] .account-row__right {
        min-width: 85px !important;
        max-width: none !important;
        flex-shrink: 0 !important;
    }

    .account-row__left,
    [data-theme="dark"] .account-row__left {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: calc(100% - 95px) !important;
        overflow: hidden !important;
    }

    .account-row__box,
    [data-theme="dark"] .account-row__box {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* QUANTITY SELECTOR - Full width horizontal on S8+ (both themes) */
    .quantity-selector-card,
    [data-theme="dark"] .quantity-selector-card {
        padding: 12px !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    .quantity-selector-card__header,
    [data-theme="dark"] .quantity-selector-card__header {
        text-align: center !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
    }

    .quantity-inline,
    [data-theme="dark"] .quantity-inline {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        padding: 12px !important;
        min-height: unset !important;
        height: auto !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Show label on mobile - centered and compact */
    .quantity-inline__left,
    [data-theme="dark"] .quantity-inline__left {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-bottom: 0 !important;
    }

    .quantity-inline__label,
    [data-theme="dark"] .quantity-inline__label {
        font-size: 0.9rem !important;
        margin-bottom: 2px !important;
    }

    .quantity-inline__promo,
    [data-theme="dark"] .quantity-inline__promo {
        font-size: 0.75rem !important;
    }

    .quantity-inline__options {
        flex: 1 !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .quantity-inline__btn {
        min-width: 44px !important;
        height: 44px !important;
        padding: 6px 8px !important;
        font-size: 0.9rem !important;
        flex: 1 1 auto !important;
    }

    .quantity-inline__discount {
        font-size: 0.6rem !important;
        padding: 1px 4px !important;
    }

    .quantity-inline__total {
        flex: 0 0 auto !important;
        padding-left: 8px !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-top: none !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 2px !important;
    }

    .quantity-inline__save {
        font-size: 0.65rem !important;
    }

    .quantity-inline__price {
        font-size: 0.95rem !important;
    }

    /* HEADER FIXES - Better touch targets on S8+ */
    .header .container.--row {
        padding: 0 10px !important;
        gap: 6px !important;
        justify-content: space-between !important;
    }

    .logo svg {
        width: 90px !important;
        height: auto !important;
    }

    .header-actions {
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
    }

    .mobile-currency-select {
        font-size: 0.7rem !important;
        padding: 8px 10px !important;
        min-height: 40px !important;
        min-width: 70px !important;
        max-width: 75px !important;
    }

    .mobile-theme-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-theme-toggle svg {
        width: 20px !important;
        height: 20px !important;
    }

    .navbar-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    /* Promo banner - smaller text on S8+ */
    .headblock__text {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }

    .headblock .coupon-code-clickable {
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
    }

    /* HERO SECTION - Better layout on S8+ (both themes) */
    .mainscreen__header,
    [data-theme="dark"] .mainscreen__header {
        font-size: 1.75rem !important;
        text-align: center !important;
    }

    .mainscreen__subheader,
    [data-theme="dark"] .mainscreen__subheader {
        font-size: 0.9rem !important;
        text-align: center !important;
        max-width: 100% !important;
        line-height: 1.6 !important;
        padding: 0 8px !important;
    }

    .mainscreen__cta,
    [data-theme="dark"] .mainscreen__cta {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        padding: 0 16px !important;
    }

    .hero-trust,
    [data-theme="dark"] .hero-trust {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        text-align: center !important;
        font-size: 0.75rem !important;
    }

    .hero-trust__item,
    [data-theme="dark"] .hero-trust__item {
        white-space: nowrap !important;
    }

    /* REDUCE BLANK SPACE - Tighten hero section */
    .mainscreen,
    [data-theme="dark"] .mainscreen {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
    }

    /* Reduce gap after hero */
    .mainscreen+*,
    .mainscreen~.container {
        margin-top: 0 !important;
        padding-top: 16px !important;
    }

    /* Container tighter padding */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Extra small phones (below 340px) */
@media (max-width: 340px) {
    .region-btn {
        padding: 10px 8px !important;
    }

    .region-btn__code {
        font-size: 0.9rem !important;
    }

    .region-btn__name {
        display: none !important;
    }

    .account-row__be {
        max-width: 80px !important;
        font-size: 0.85rem !important;
    }

    .account-row__badge {
        display: none !important;
    }

    /* Hide quantity label completely on very small screens */
    .quantity-inline__left {
        display: none !important;
    }

    .quantity-inline__btn {
        min-width: 38px !important;
        padding: 4px 6px !important;
        font-size: 0.85rem !important;
    }

    .quantity-inline__total {
        min-width: 60px !important;
    }
}

/* ============================================
   MOBILE TOAST NOTIFICATIONS
   Make toasts more compact on mobile
   ============================================ */
@media (max-width: 768px) {

    .toast,
    div.toast,
    .toast--coupon {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        max-width: calc(100vw - 24px) !important;
        margin: 6px 12px !important;
    }

    .toast__message {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
    }

    .toast__icon {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }

    .toast__close {
        padding: 4px !important;
        font-size: 14px !important;
    }

    /* Coupon toast - single line if possible */
    .toast--coupon .toast__message {
        font-size: 0.75rem !important;
    }
}

/* ============================================
   MOBILE CHECKOUT PAGE FIXES
   Fix progress bar overflow and improve layout
   ============================================ */
@media (max-width: 480px) {

    /* Progress bar - prevent overflow */
    .checkout-progress,
    .checkout-progress--separated {
        padding: 0 8px !important;
        gap: 4px !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }

    .checkout-progress__step {
        flex-shrink: 0 !important;
        min-width: auto !important;
    }

    .checkout-progress__step-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }

    .checkout-progress__step-label {
        font-size: 0.65rem !important;
        white-space: nowrap !important;
    }

    .checkout-progress__connector {
        min-width: 16px !important;
        flex-shrink: 1 !important;
    }

    /* Checkout page container */
    .checkout-page,
    .checkout-page__container,
    .checkout-page__content {
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow-x: hidden !important;
    }

    .checkout-page__summary,
    .checkout-summary {
        padding: 12px !important;
    }
}

/* ============================================
   MOBILE MENU IMPROVEMENTS
   Minimal styling - don't break existing functionality
   ============================================ */
@media (max-width: 768px) {

    /* Just style improvements, don't override positioning */
    .header__menu.--column {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: 100vh !important;
        padding-bottom: 100px !important;
        -webkit-overflow-scrolling: touch !important;
        /* Smooth scroll on iOS */
    }

    .header__menu.--column li a {
        padding: 16px 8px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
    }

    /* Make dropdown arrow VERY visible - bright cyan for DARK MODE */
    .nav-angle,
    .header__menu.--column .nav-angle,
    .header__menu.--column li a .fa,
    .header__menu.--column li a i,
    .header__menu.--column li a svg,
    .header__menu.--column .fa,
    .header__menu.--column i,
    .header__dropdown .nav-angle {
        color: #00e5ff !important;
        opacity: 1 !important;
        font-size: 1.2rem !important;
        fill: #00e5ff !important;
    }

    /* X close button - SIDENAV - Filter the SVG to be white */
    .sidenav__close {
        background-color: transparent !important;
        filter: brightness(0) invert(1) !important;
        opacity: 1 !important;
    }

    /* Reset pseudo-elements if they were causing issues */
    .sidenav__close::before,
    .sidenav__close::after {
        display: none !important;
    }

    /* Also target close button by class */
    .header__menu.--column .navbar-close,
    .header__menu.--column .close-menu,
    .header__menu.--column button[aria-label*="close"],
    .header__menu.--column [class*="close"] {
        color: #ffffff !important;
        background-color: transparent !important;
        font-size: 1.5rem !important;
        opacity: 1 !important;
    }
}

/* Light mode mobile menu */
@media (max-width: 768px) {
    [data-theme="light"] .header__menu.--column li a:hover {
        color: #0891b2 !important;
    }

    [data-theme="light"] .header__menu.--column .fa,
    [data-theme="light"] .header__menu.--column i,
    [data-theme="light"] .header__menu.--column svg {
        color: #0891b2 !important;
    }

    [data-theme="light"] .header__menu.--column .navbar-close,
    [data-theme="light"] .header__menu.--column .close-menu,
    [data-theme="light"] .header__menu.--column [class*="close"] {
        color: #1e293b !important;
    }

    /* Light mode sidenav close - Filter to be dark */
    [data-theme="light"] .sidenav__close {
        filter: none !important;
        /* Original SVG is dark #2F3238 */
        background-color: transparent !important;
    }
}

/* ============================================
   MOBILE HELP DROPDOWN TOGGLE
   Click-to-toggle dropdown for mobile menu
   ============================================ */
@media (max-width: 768px) {

    /* Hide dropdown by default on mobile */
    .header__menu.--column .header__dropdown ul {
        display: none !important;
        position: relative !important;
        margin-top: 10px !important;
        padding-left: 16px !important;
        border-left: 2px solid #00e5ff !important;
    }

    /* Show dropdown when .open class is added */
    .header__menu.--column .header__dropdown.open ul,
    .header__menu.--column .header__dropdown ul.show {
        display: block !important;
    }

    /* Rotate arrow when open */
    .header__menu.--column .nav-angle.rotated {
        transform: rotate(180deg) !important;
    }

    .header__menu.--column .nav-angle {
        transition: transform 0.3s ease !important;
    }

    /* Make dropdown clickable */
    .header__menu.--column .header__dropdown {
        cursor: pointer !important;
    }

    /* Dropdown submenu items */
    .header__menu.--column .header__dropdown ul li a {
        padding: 12px 8px !important;
        font-size: 1rem !important;
        color: #e2e8f0 !important;
        opacity: 0.9 !important;
    }

    .header__menu.--column .header__dropdown ul li a:hover {
        color: #00e5ff !important;
        opacity: 1 !important;
    }
}

/* Light mode specific overrides for dropdown */
@media (max-width: 768px) {
    [data-theme="light"] .header__menu.--column .header__dropdown ul li a {
        color: #334155 !important;
    }

    [data-theme="light"] .header__menu.--column .header__dropdown ul li a:hover {
        color: #0891b2 !important;
    }

    [data-theme="light"] .header__menu.--column .header__dropdown ul {
        border-left-color: #0891b2 !important;
    }
}

/* ============================================
   LOL-SMURFS PAGE MOBILE FIXES
   Fix 2-column grid that overflows on mobile
   ============================================ */
@media (max-width: 768px) {

    /* Force 2-column grids to single column on mobile */
    div[style*="grid-template-columns: repeat(2"],
    div[style*="grid-template-columns:repeat(2"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* lw-section boxes - full width on mobile */
    .lw-section__box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px !important;
    }

    .lw-section__title {
        font-size: 1.2rem !important;
    }

    .lw-section__desc {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* Images in boxes - smaller on mobile */
    .lw-section__box img {
        width: 70px !important;
        height: auto !important;
        margin: 0 0 10px 10px !important;
    }

    /* Info screen section */
    .info-screen {
        padding: 20px 12px !important;
    }

    .info-content__list {
        padding-left: 0 !important;
    }

    .info-content__list li {
        margin-bottom: 15px !important;
    }

    /* Third infoblock - already has 480px but ensure full width */
    .third-infoblock {
        width: 100% !important;
        margin: 0 0 20px !important;
        flex-direction: column !important;
        padding: 20px 16px !important;
    }
}