/* ==========================================================================
   responsive.css  —  GLOBAL rules only
   Loaded by ALL master pages.
   Does NOT contain page-specific rules — those live in:
     responsive-header.css     (header / nav — all masters)
     responsive-standard.css   (StandardLayout only)
     responsive-simple.css     (SimpleLayout only)
     responsive-checkout.css   (CheckoutLayout only)
     responsive-profile.css    (ProfileLayout only)
     responsive-home.css       (FrontPageLayout only)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Page minimum width — single source of truth for the 1006px layout floor.
   Both body and #Header are held together so the header never escapes the
   content scroll boundary.
   -------------------------------------------------------------------------- */
/* StandardLayout: hold at 1006px above the 900px category-collapse point */
@media (min-width: 901px) {
    .std-layout body,
    .std-layout #Header { min-width: 1006px; }
}
/* At ≤900px category menu collapses — body and header both go fluid */
@media (max-width: 900px) {
    .std-layout #Header { min-width: 0 !important; }
}

/* SimpleLayout: no sidebar collapse, hold at 1006px above the mobile breakpoint */
@media (min-width: 641px) {
    .simple-layout body,
    .simple-layout #Header { min-width: 1006px; }
}
@media (max-width: 640px) {
    .simple-layout #Header { min-width: 0 !important; }
}

/* ProfileLayout: has sidebar that collapses at 900px — same breakpoint as StandardLayout */
@media (min-width: 901px) {
    .profile-layout body,
    .profile-layout #Header { min-width: 1006px; }
}
@media (max-width: 900px) {
    .profile-layout #Header { min-width: 0 !important; }
}

/* FrontPageLayout: has sidebar, collapses at 900px like StandardLayout */
@media (min-width: 901px) {
    .frontpage-layout body,
    .frontpage-layout #Header { min-width: 1006px; }
}
@media (max-width: 900px) {
    .frontpage-layout #Header { min-width: 0 !important; }
}

/* CheckoutLayout: no sidebar, collapses at 640px */
@media (min-width: 641px) {
    .checkout-layout body,
    .checkout-layout #Header { min-width: 1006px; }
}
@media (max-width: 640px) {
    .checkout-layout #Header { min-width: 0 !important; }
}

/* EmptyLayout: minimal shell, no sidebar, collapses at 640px (same as SimpleLayout/CheckoutLayout) */
@media (min-width: 641px) {
    .empty-layout body,
    .empty-layout #Header { min-width: 1006px; }
}
@media (max-width: 640px) {
    .empty-layout #Header { min-width: 0 !important; }
}

/* --------------------------------------------------------------------------
   1. Viewport container reset
   -------------------------------------------------------------------------- */
/* Suppress horizontal scroll only on mobile — let any page scroll naturally
   at tablet/desktop widths until their own collapse point is reached. */
@media (max-width: 640px) {
    html {
        overflow-x: hidden;
    }
}
#container {
    width: 100% !important;
    box-sizing: border-box;
}

/* Cancel main.css fixed min-width on #container at mobile so nav/content don't overflow */
@media (max-width: 900px) {
    #container { min-width: 0 !important; }
}

.rsp-content {
    width: 100%;
    max-width: 990px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    display: block !important;
}

@media (max-width: 900px) { .rsp-content { padding: 0 8px; } }
@media (max-width: 480px) { .rsp-content { padding: 0 4px; } }

/* --------------------------------------------------------------------------
   2. Shared utility classes used across multiple page types
      (safe to be global — all are scoped to specific class names)
   -------------------------------------------------------------------------- */

/* Generic scrollable table wrapper */
.rsp-scroll-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Generic fluid input (shared by checkout + profile + simple pages) */
.rsp-form-input {
    width: 100% !important;
    max-width: 400px;
    box-sizing: border-box;
}

/* Checkout dropdowns — used in both CheckoutLayout and StandardLayout (cart) */
.rsp-co-select { width: 100% !important; max-width: 735px; box-sizing: border-box; }

/* --------------------------------------------------------------------------
   3. Footer  (FooterResponsive.ascx — all masters)
   -------------------------------------------------------------------------- */
.rsp-ftr-sep { display: inline; }

/* --------------------------------------------------------------------------
   4. Main layout — collapse sidebar margin at narrow widths
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* Category menu becomes a toggle — mainContent takes full width */
    .mainContent { margin-left: 0 !important; }
}

.rsp-ftr-nav {
    white-space: normal !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    line-height: 1.8;
}

/* Override min-widths added to main.css that prevent mobile layout */
.footerPanel { min-width: 0 !important; }
.minfcw      { min-width: 0 !important; }

@media (max-width: 640px) {
    .rsp-ftr-nav { flex-direction: column; align-items: center; gap: 4px; }
    .rsp-ftr-sep { display: none; }

    .footer.wsnw { white-space: normal !important; }
    .footer .fs  { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

    .footerPanel #FWL { height: 25px !important; }
}

/* contact.aspx mobile rules live in responsive-simple.css under #rsp-contact-wrap */

/* --------------------------------------------------------------------------
   Sidebar + mainContent collapse (used by StandardLayout and ProfileLayout)
   -------------------------------------------------------------------------- */
.rsp-cat-toggle {
    display: none;
    margin: 8px 0 4px 8px;
    padding: 6px 12px;
    background: #223F7F;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
}

@media (max-width: 900px) {
    .rsp-cat-toggle { display: inline-block; }

    #ctl00_CatMenu {
        float: none !important;
        width: 100% !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        box-sizing: border-box;
    }
    #ctl00_CatMenu.rsp-catmenu--open { max-height: 2000px; }

    /* Clear all margins so 100% width doesn't overflow the container */
    .mainContent {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* --------------------------------------------------------------------------
   My Account menu — 2-column tap grid at ≤640px
   Activated by catmenu.js adding body.rsp-profile-ctx (works on both
   ProfileLayout and StandardLayout without duplication).
   -------------------------------------------------------------------------- */

/* Desktop / tablet (≥901px): hide toggle, keep menu always expanded */
@media (min-width: 901px) {
    body.rsp-profile-ctx .rsp-cat-toggle { display: none !important; }
    body.rsp-profile-ctx #ctl00_CatMenu  { max-height: none !important; overflow: visible !important; }
}

/* Tablet (641–900px): constrain open menu to sidebar width */
@media (max-width: 900px) {
    body.rsp-profile-ctx #ctl00_CatMenu.rsp-catmenu--open {
        width: auto !important;
        max-width: 240px !important;
    }
}

/* Mobile (≤640px): hide toggle, always-visible 2-column grid */
@media (max-width: 640px) {
    body.rsp-profile-ctx .rsp-cat-toggle { display: none !important; }
    body.rsp-profile-ctx #ctl00_CatMenu {
        max-height: none !important;
        overflow: visible !important;
        margin-top: 8px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    body.rsp-profile-ctx #ctl00_CatMenu .w215 {
        width: 100% !important;
        max-width: none !important;
    }
    body.rsp-profile-ctx #ctl00_CatMenu .ml5 { margin-left: 0 !important; }
    body.rsp-profile-ctx #ctl00_CatMenu table.w215 { width: 100% !important; }
    body.rsp-profile-ctx #ctl00_CatMenu tr.h12 { display: none !important; }
    body.rsp-profile-ctx #ctl00_CatMenu td.SeaBlue.bar {
        width: 100% !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    #ctl00_SecondaryNavigation_ProfileMenu_ProfileMenu {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #ctl00_SecondaryNavigation_ProfileMenu_ProfileMenu tbody { display: contents !important; }
    #ctl00_SecondaryNavigation_ProfileMenu_ProfileMenu tr   { display: contents !important; }
    #ctl00_SecondaryNavigation_ProfileMenu_ProfileMenu tr.h7 { display: none !important; }
    #ctl00_SecondaryNavigation_ProfileMenu_ProfileMenu td.ProfileMenuItem,
    #ctl00_SecondaryNavigation_ProfileMenu_ProfileMenu td.ProfileMenuItemSelected {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 8px 10px !important;
        background-image: none !important;
        border: 1px solid #c8c8c8 !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
        white-space: normal !important;
    }
    #ctl00_SecondaryNavigation_ProfileMenu_ProfileMenu td.ProfileMenuItemSelected {
        background-color: #223F7F !important;
        color: #fff !important;
        font-weight: bold !important;
    }
    #ctl00_SecondaryNavigation_ProfileMenu_ProfileMenu td.ProfileMenuItem a {
        display: block !important;
        width: 100% !important;
        color: inherit !important;
        text-decoration: none !important;
        font-size: 9pt !important;
    }
    .mainContent td.Black.tar.pl20[colspan="2"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .mainContent .w100 .w100 td.tar.pr20.pt22 {
        padding-right: 10px !important;
    }
}