/*
 * GSR Global - Responsive Stylesheet
 * Add this AFTER all other CSS links in every page:
 * <link href="styles/responsive.css" rel="stylesheet" type="text/css"/>
 *
 * Breakpoints:
 *   768px  = tablet
 *   480px  = mobile
 */

/* ============================================================
   TABLET  (max-width: 768px)
   ============================================================ */
@media screen and (max-width: 768px) {

    /* --- Layout containers --- */
    #header,
    #header-wrapper,
    #page,
    #content,
    #footer,
    #bottom-bg {
        width: 100% !important;
        box-sizing: border-box;
    }

    body {
        margin-top: 10px;
        overflow-x: hidden;
    }

    /* --- Header --- */
    #header {
        height: auto !important;
        margin-bottom: 10px !important;
        padding: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /* --- Logo --- */
    #logoholder {
        width: auto !important;
        height: auto !important;
        float: none !important;
        padding: 5px !important;
    }

    #logoholder img {
        max-width: 180px;
        height: auto;
    }

    /* --- Navigation: hamburger toggle --- */
    #menu {
        float: none !important;
        padding: 0 !important;
        width: 100%;
    }

    /* Hamburger button (injected via CSS) */
    #p7menubar::before {
        content: "☰  menu";
        display: block;
        color: #fff;
        font-family: Jura, sans-serif;
        font-size: 18px;
        padding: 10px 15px;
        cursor: pointer;
        background: #2a2d2e;
        border-radius: 4px;
        margin-bottom: 4px;
        letter-spacing: 2px;
    }

    /* Stack nav items vertically */
    #p7menubar,
    #p7menubar ul {
        width: 100% !important;
    }

    #p7menubar li {
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid #333;
    }

    #p7menubar a {
        padding: 12px 15px !important;
        font-size: 16px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Dropdowns: always visible on mobile (stacked) */
    #p7menubar li ul {
        position: static !important;
        display: block !important;
        width: 100% !important;
        background-color: #2a2d2e !important;
        opacity: 1 !important;
        filter: none !important;
        border-left: 3px solid #336699;
    }

    #p7menubar ul li a {
        width: 100% !important;
        padding: 10px 10px 10px 25px !important;
        font-size: 14px !important;
        color: #aaa !important;
        box-sizing: border-box;
    }

    #p7menubar li:hover a,
    #p7menubar li:hover ul a {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* --- Slideshow (homepage) --- */
    .slideshow {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .slide-frame {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
        position: relative !important;
        animation: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Hide second frame on mobile - show all 8 tiles from frame1 */
    #frame2 {
        display: none !important;
    }

    .slide-frame a {
        width: 48% !important;
        display: inline-block !important;
        position: relative !important;
    }

    .slide-frame img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Hide absolute overlays on mobile - positions are hardcoded px and break layout */
    #image1overlay, #image2overlay, #image3overlay, #image4overlay,
    #image5overlay, #image6overlay, #image7overlay, #image8overlay,
    #image9overlay {
        display: none !important;
    }

    /* --- Product grid (subcategory / sfplist pages) --- */
    #SFPManus {
        gap: 15px;
        justify-content: center;
    }

    .rift_red,
    .rift_purple {
        width: 160px !important;
    }

    /* inline-width divs on product/subcategory pages */
    div[style*="width: 880px"],
    div[style*="width: 900px"],
    div[style*="width: 840px"] {
        width: 100% !important;
        padding-left: 15px !important;
        box-sizing: border-box;
    }

    /* --- Product detail page --- */
    div[style*="width: 600px"][style*="float: left"],
    div[style*="width: 280px"][style*="float: right"] {
        width: 100% !important;
        float: none !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box;
    }

    .imagecontainer {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        margin-bottom: 20px !important;
    }

    .imagecontainer img {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }

    .drop-shadow {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin: 0 0 15px 0 !important;
    }

    /* Product info sits below image, not floated beside it */
    #productdetail {
        float: none !important;
        width: 100% !important;
        margin-top: 10px !important;
        clear: both;
    }

    /* Zoom button hidden on mobile */
    .zoom-btn {
        display: none !important;
    }

    #tabs-headings {
        width: 100% !important;
        flex-wrap: wrap;
    }

    .tabs-content-container {
        width: 100% !important;
        box-sizing: border-box;
    }

    .dropshadowbluelarge,
    .dropshadowblue {
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
        margin-top: 20px;
    }

    /* --- Page title overlays --- */
    [id^="pagetitleoverlay"] {
        position: relative !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        width: auto !important;
        height: auto !important;
        font-size: 28px !important;
        padding: 10px 15px;
        display: inline-block;
        float: none !important;
        margin-bottom: 20px;
    }

    /* --- Footer --- */
    #footer {
        width: 100% !important;
        height: auto !important;
        padding: 10px 0;
    }

    #footer a {
        color: white !important;
    }

    /* --- Video page --- */
    #grassgreenmodaloverlay {
        position: relative !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }

    #grassgreenmodaloverlay iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
    }

    #smallgrassgreenmodaloverlayform {
        position: relative !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }
}

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

    #logoholder img {
        max-width: 140px;
    }

    /* Slideshow: single column on small phones */
    .slide-frame a {
        width: 90% !important;
    }

    /* Product tiles: 2 per row */
    .rift_red,
    .rift_purple {
        width: 130px !important;
    }

    /* SFP list images */
    #SFPManus a.demo img {
        width: 100% !important;
        height: auto !important;
    }

    #SFPManus a.demo {
        width: 130px !important;
        float: none !important;
        display: inline-block;
    }

    /* Page title overlays smaller */
    [id^="pagetitleoverlay"] {
        font-size: 22px !important;
    }

    /* Tab labels wrap nicely */
    #tabs-headings li label {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    /* Zoom modal full screen on phone */
    #zoom-modal {
        width: 100% !important;
        max-width: 100% !important;
    }

    h2 {
        font-size: 16px;
    }

    /* Breadcrumb trail */
    #TrailLabel {
        font-size: 11px;
        word-break: break-word;
    }
}