/* =================================================================
   RESPONSIVE STYLES
   Loaded last — overrides fixed-width layout for tablet & mobile.
   Breakpoints: 1060px (tablet), 767px (mobile), 480px (small)
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ----------------------------------------------------------------
   Hamburger button — hidden on desktop, shown on mobile
   ---------------------------------------------------------------- */
#menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    line-height: 0;
    flex-shrink: 0;
}
#menu-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--color-palette-1);
    margin: 5px 0;
    border-radius: 2px;
    transition: background 0.2s;
}
#menu-toggle:hover span { background: var(--color-palette-3); }


/* ================================================================
   TABLET  ≤ 1060px
   ================================================================ */
@media (max-width: 1060px) {

    #header { padding: 0 16px; }
    #core { width: 100%; padding: 0 15px; }

    #menu > li > a { padding: 10px 10px; font-size: 11px; }

    /* Keep dropdowns on screen */
    .nav-dropdown { left: auto; right: 0; }

    .content    { width: 100%; }
    .main_title { width: 100%; }
    .slider     { width: 100%; }
    .main_banner { width: 100%; background-size: cover; }

    /* Cart tables */
    .basket_table, .basket_table_t { width: auto; margin-left: 10px; }
    .ordTotal, .ordTotal2          { width: auto; margin-left: 10px; }
}


/* ================================================================
   MOBILE  ≤ 767px
   ================================================================ */
@media (max-width: 767px) {

    /* ----- Header ----- */
    #headerall {
        height: auto;
        min-height: 70px;
        position: relative;
    }
    #header { padding: 0; }

    #header { height: 64px; padding: 0 16px; }
    #logo img { max-height: 40px; }

    /* ----- Hamburger ----- */
    #menu-toggle { display: flex; flex-direction: column; justify-content: center; }

    /* ----- Mobile nav ----- */
    #menu {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-top: 2px solid var(--color-palette-1);
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        z-index: 9999;
    }
    #menu.is-open { display: flex; }

    #menu > li {
        border-bottom: 1px solid var(--color-palette-4);
    }
    #menu > li:hover { background: var(--color-palette-1-tint); }

    #menu > li > a,
    #menu > li > a:hover,
    body.page-home #menu > li > a,
    body.page-home #menu > li > a:hover {
        padding: 14px 20px;
        font-size: 13px;
        color: var(--color-palette-1) !important;
    }

    #menu > li > a::after { display: none; }

    /* Hide dropdowns on mobile — top-level links only */
    #menu .nav-dropdown { display: none !important; }

    /* ----- Slider ----- */
    #galleryall { overflow: hidden; }
    #galleryall img { display: block; width: 100%; }

    /* ----- Core / content ----- */
    #coreall  { overflow-x: hidden; }
    #core     { padding: 0 10px; }
    .main_title { width: 100%; }
    .content    { width: 100%; }
    .slider     { width: 100%; }
    .main_banner { width: 100%; background-size: cover; }
    .text       { font-size: 14px; }

    /* Left sidebar: stacks above or below main content */
    .leftNv, .leftW {
        float: none;
        width: 100%;
    }
    .leftNv_top { width: 100%; background-size: cover; }

    /* ----- Product grids ----- */
    .pBox2 {
        width: calc(50% - 8px);
        height: auto;
    }
    .pBox2_bottom { width: 100%; }
    .pBox3 {
        width: calc(50% - 30px);
        height: auto;
    }

    /* pBox list rows */
    .pBox { width: 100%; height: auto; }
    .pBox_right { width: calc(100% - 178px); height: auto; }
    .pBox_desc  { height: auto; }

    /* Full product page */
    .fpImg, .fpBot, .fpDsc { width: 100%; }
    .fpImg_b { margin-right: 10px; }
    .Fprod_price, .Fprod_nav { float: none; width: 100%; }

    /* News grid */
    .new { width: 100%; float: none; margin: 10px 0; }

    /* ----- Subfooter ----- */
    #subfooterall { height: auto; padding: 20px 10px; }
    #subfooter    { padding: 0; }
    #find {
        float: none;
        width: 100%;
        height: auto;
        text-align: center;
        padding: 10px 20px;
    }
    .newsletter {
        float: none;
        width: 100%;
        padding: 10px 20px;
        text-align: center;
    }
    .nsField { width: 80%; max-width: 280px; }

    /* ----- Footer ----- */
    #footerall { height: auto; padding: 15px 0; }
    #footer    { padding: 12px 10px; }

    /* ----- Cart / checkout forms ----- */
    .formDiv, .formDiv2 {
        float: none;
        width: 100%;
        padding: 15px 10px 20px 10px;
    }
    .formDivNoF { width: 100%; padding: 15px 10px; }
    .basket_table, .basket_table_t {
        width: 100%;
        margin: 5px 0;
    }
    .other_form         { padding: 10px 15px; }
    .ordTotal, .ordTotal2 { width: 100%; margin: 5px 0; }
    .finalForm_data,
    .finalForm_data2,
    .finalForm_data2_wide {
        float: none;
        width: 100%;
        margin: 0 0 10px 0;
    }
    .udata { padding: 20px 0 0 10px; }

    /* Cookie notice */
    #cookieNotice { left: 0; right: 0; border-radius: 0; }
}


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

    #logo     { width: 130px; height: 60px; }
    #menuarea { width: calc(100% - 130px); height: 60px; }
    #menu-toggle { margin-top: 12px; }
    #menu     { top: 60px; }

    .pBox2, .pBox3 {
        width: 100%;
        float: none;
        margin: 5px 0;
    }

    .cartField1, .cartField1co,
    .cartField2, .cartField1_error,
    .cartField2_error { width: calc(100% - 10px); }

    .cartSelect1, .cartSelect2,
    .cartSelect1_error, .cartSelect2_error { width: 100%; }

    .basket_table_t, .other_form { font-size: 11px; }
}