/*
 * Responsive layout over site.css + modern.css.
 * Desktop (>= 1024px) keeps the original 986px two-column arrangement, since the
 * banners and product artwork are drawn for it. Below that the page is fluid;
 * under 768px the columns stack and the header links fold behind a menu button.
 */

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

#main { width: auto; max-width: 986px; padding: 0 16px; }

/* columns: 270px sidebar + flexible main column */
.width270 { width: 270px; }
.width692 { width: calc(100% - 290px); max-width: 692px; }
.width600, .width500, .width275 { max-width: 100%; }
#header .header-nav { width: calc(100% - 230px); max-width: 692px; }

/* home slider: scale the 692x250 banners with the column */
.home_slider, .home_slider .slides_container { position: relative; width: 100%; aspect-ratio: 692 / 250; height: auto !important; }
#home_slide_show div img { width: 100%; height: auto; }

/* banner captions were placed in px on the 692x250 artwork; scale them with the banner */
.home_slider { container-type: inline-size; }
#home_slide_show div .block_head { left: 2.3%; top: 4%; width: 94%; height: auto; margin: 0; font-size: 3.1cqw; line-height: 1.15; }
#home_slide_show div .block_tagline { left: 1.9%; top: 37.6%; width: 20.2%; margin: 0; font-size: 1.9cqw; line-height: 1.3; }
@container (max-width: 520px) {
    #home_slide_show div .block_head { font-size: 3.7cqw; }
    #home_slide_show div .block_tagline { display: none; }
}
#home_as_seen_on img { margin: 0 auto !important; display: block; }

/* gallery/studio header strip (683x170 background image) */
.spaceblock { max-width: 100%; height: auto; background-size: cover; background-position: center; line-height: 0; }
.spaceblock img { display: block; }

/* main columns without a width class shrink-to-fit; keep them beside the sidebar */
.content > .right { max-width: calc(100% - 285px); }

/* wide data tables scroll inside their card instead of the page */
.content table { max-width: 100%; }

@media (min-width: 1024px) {
    #main { padding: 0; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
    .headersmllinks a { margin-left: 12px; }
    .headerlinks a { padding: 12px 10px; font-size: 14px; }
    .home-row { grid-template-columns: 1fr; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
    body { font-size: 15px; }
    #main { padding: 0 12px; }

    #header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 8px; }
    #header > br { display: none; }
    #logo { float: none; padding: 4px 0; }
    #logo img { width: 150px; height: auto; }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-ui);
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        background: var(--ink);
        border: 0;
        border-radius: var(--radius);
        padding: 10px 14px;
        cursor: pointer;
    }
    .nav-toggle::before {
        content: "";
        width: 16px; height: 2px;
        background: currentColor;
        box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
    }
    .nav-toggle::after { content: none; }
    .nav-toggle[aria-expanded="true"]::before,
    .nav-toggle[aria-expanded="true"]::after { content: ""; width: 16px; height: 2px; background: currentColor; box-shadow: none; transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"]::after { order: -1; margin-right: -24px; transform: rotate(-45deg); }

    #header .header-nav { float: none; width: 100%; max-width: none; display: none; }
    #header .header-nav.is-open { display: block; }
    /* main nav first, then account/help links, then phone numbers */
    #header .header-nav.is-open { display: flex; flex-direction: column; }
    .headerlinks { order: 1; flex-direction: column; margin-top: 10px; padding: 4px 0; }
    .headerlinks a { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 16px; }
    .headerlinks a:last-child { border-bottom: 0; }
    .header-util { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; text-align: left; margin-top: 10px; }
    .header-util a { margin: 0; padding: 10px 4px; border-bottom: 1px solid var(--rule); font-size: 15px; }
    .header-contact { order: 3; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; margin: 14px 0 6px; }
    .header-phone { gap: 6px 14px; }
    .header-phone a { margin: 0; }

    /* stack every two-column layout */
    .content { padding: 16px 14px; margin-top: 12px; }
    .content > .left, .content > .right, .width270, .width692, .width600, .width500 {
        float: none !important;
        width: 100% !important;
        max-width: 100%;
    }
    /* main column first; sidebar promos follow */
    .content { display: flex; flex-direction: column; }
    .content > .right { order: -1; }
    .content > * { min-width: 0; max-width: 100% !important; }
    .content div, .content form, .content fieldset { max-width: 100%; }
    /* order/checkout pages nest their two columns one or two levels down (.homeboxes, its form) */
    .homeboxes > .left, .homeboxes > .right, .homeboxes > form > .left, .homeboxes > form > .right {
        float: none !important;
        width: auto !important;
        max-width: 100%;
    }
    .content > .left { margin: 16px 0 0; }
    .product-picker { gap: 8px; }
    .product-picker label { padding: 8px 6px 10px; }
    .product-picker label strong { font-size: 13px; text-align: center; line-height: 1.2; }
    .content > .left br { display: none; }
    .content > .left img { display: block; margin: 0 auto 10px; }

    .content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* home: banner and start links first, then the "why" card */
    .content-home { display: flex; flex-direction: column; }
    .content-home > .home-main { order: -1; }
    .content-home > br { display: none; }

    .home-tabs { gap: 8px; }
    .home-tabs a { font-size: 14px; padding: 10px 12px 11px; }
    .home-tabs a span { display: none; }
    .home_subscribe_blk form { flex-direction: column; }
    .home_as_seen_on { padding: 14px 32px; }

    .footlinks { gap: 6px 16px; }
}

@media (max-width: 767px) {
    .sizenpricep1 { width: 60%; }
    .sizenpricep2 { width: 40%; margin-right: 0; }
    #dimensionsforcrossbrowser { padding-left: 0; order: -1; }
    /* custom border illustration is a background with the choices padded beside it; stack them */
    #ecdesignblockimg { padding-left: 0; padding-top: 0; background-size: contain; background-position: center top; }
    #ecdesignblockimg::before { content: ""; display: block; aspect-ratio: 620 / 180; margin-bottom: 8px; }
}

@media (max-width: 767px) {
    /* promo sidebar (free shipping, coupon, guarantee) after the page's own content */
    .content > .left:has(.bordergray) { order: 99; }

    /* cart: one card per item instead of a sideways-scrolling table */
    #carttable, #carttable tbody, #carttable tr, #carttable td { display: block; width: auto !important; overflow: visible; }
    #carttable tr:first-child { display: none; }
    #carttable tr:has(> td:nth-child(5)) {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        column-gap: 14px;
        padding: 12px 0;
        border-bottom: 1px solid var(--rule);
        text-align: left;
    }
    #carttable tr:has(> td:nth-child(5)) td { border: 0; padding: 2px 0; text-align: left; }
    #carttable tr:has(> td:nth-child(5)) td:first-child { grid-row: 1 / span 4; }
    #carttable:has(#cartupdate) td:nth-child(2)::before { content: "Quantity "; font-weight: 500; }
    #carttable:has(#cartupdate) td:nth-child(3)::before { content: "Size: "; font-weight: 500; }
    #carttable .width275 { width: auto; }
    #carttable td[colspan] { border: 0; padding: 10px 0 0; text-align: left; }
    #carttable td[colspan] .left, #carttable td[colspan] .right { float: none; width: auto; margin: 0 0 10px; }
    #carttable td[colspan] .button { width: 100%; }
    #checkout { font-size: 16px; padding: 13px 18px; }
}

@media (max-width: 767px) {
    /* testimonial form: label above field */
    #testi_form table, #testi_form tbody, #testi_form tr, #testi_form td { display: block; width: auto; overflow: visible; }
    #testi_form td { padding: 0; text-align: left; }
    #testi_form td.testitxt { padding-top: 10px; font-weight: 500; }
    #testi_form td[colspan] { clear: both; padding-top: 14px; font-weight: 400; }
    #testi_form td:nth-child(2):not(:only-child) { display: none; }
    #testi_form input[type=text], #testi_form textarea { width: 100%; }
    .testimonials-main .dimensionstitle { gap: 12px; }
    .testimonials-main .dimensionstitle > .left img { max-width: 96px; }
}
.nav.prev img, .nav.next img { height: 40px; } /* spacer hit areas, not square */

@media (max-width: 1023px) {
    /* cart first, coupon box after it (the table needs the full width below 1024px) */
    .homeboxes:has(> #carttbl) { flex-direction: column; gap: 16px; }
    .homeboxes:has(> #carttbl) > * { flex: none; width: 100% !important; }
    #carttbl { order: -1; }
}

@media (max-width: 1023px) {
    /* order review: one column (cart summary, note, then the boxes) */
    .homeboxes > form:has(> .right .billinfo) { grid-template-columns: minmax(0, 1fr); }
    .homeboxes > form:has(> .right .billinfo) > .right { grid-column: 1; grid-row: auto; margin-top: 20px; }
}
@media (max-width: 600px) {
    .homeboxes > form:has(> .right .billinfo) > .right { grid-template-columns: minmax(0, 1fr); }
}