/*
 * Phone and tablet layout. Loaded last on every page (includes/page-top).
 * The desktop site is a fixed 960px layout; everything here sits inside
 * media queries, so desktop rendering is unchanged.
 *
 *   <= 979px  the 960px frame becomes fluid (tablets and phones)
 *   <= 640px  columns stack, the cart becomes cards (phones)
 *   <= 400px  tighter spacing for small phones
 */

/* The header phone number is a tel: link; keep it looking like the text it was */
#headerPhone a {
    color: inherit;
    text-decoration: none;
}

@media screen and (max-width: 979px) {

    /* iOS zooms into any field with text under 16px */
    input, select, textarea {
        font-size: 16px;
    }

    /* ---- Frame ---- */

    #outerPageContainer,
    #footer,
    #indexFooter {
        width: auto;
    }

    #contentColumn {
        width: auto;
        padding: 20px 15px 30px 15px;
    }

    /* The home page images run edge to edge, as on desktop */
    #index #contentColumn {
        width: auto;
        padding: 0;
    }

    #contentColumn img {
        max-width: 100%;
        height: auto;
    }

    h1 {
        font-size: 24px;
    }

    #contentColumn ul,
    #contentColumn ol {
        margin: 5px 0;
        padding: 5px 0 5px 22px;
    }

    /* ---- Header: the yellow name band stays the image's left edge, then the
       tagline, the nav (wrapping) and the phone number flow below it ---- */

    #header {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 50px 0 8px 0;
        background-color: #0391d5;
    }

    #tagLine {
        order: 1;
        position: static;
        margin: 0;
        padding: 11px 15px 6px 15px;
        font-size: 14px;
    }

    #nav {
        order: 2;
        position: static;
        width: auto;
        height: auto;
        margin: 4px 0 0 0;
        padding: 0 5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #nav li {
        float: none;
        height: auto;
        line-height: normal;
    }

    #nav li img {
        display: none;
    }

    #nav a {
        float: none;
        height: auto;
        padding: 0 9px;
        font-size: 14px;
        line-height: 40px;
    }

    #headerPhone {
        order: 3;
        position: static;
        margin: 0;
        padding: 6px 15px 0 15px;
        color: #ffffff;
        font-size: 14px;
        text-align: center;
    }

    #headerPhone a {
        text-decoration: underline;
    }

    /* ---- Home page ---- */

    #indexContentTable,
    #indexContentTable tbody,
    #indexContentTable tr,
    #indexContentTable td {
        display: block;
    }

    /* The logo panel keeps its size; its background and Shop Now button are
       positioned inside it */
    #indexLeft {
        position: relative;
        width: 334px;
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

    #indexRight img {
        float: none !important;
        display: block;
        width: 100%;
        height: auto;
    }

    #indexFooterTable,
    #indexFooterTable tbody,
    #indexFooterTable tr,
    #indexFooterTable td {
        display: block;
    }

    #indexFooterTable {
        margin: 0;
    }

    #indexFooterTable td {
        width: auto;
        height: auto;
        margin: 0 15px 10px 15px;
    }

    #indexFooter {
        padding-top: 15px;
    }

    /* ---- Shop ---- */

    body#order-a-bathboat #contentColumn img {
        box-sizing: border-box;
        margin: 10px 0;
    }

    body#order-a-bathboat #contentColumn #shopping-cart {
        text-align: right;
        margin-bottom: 10px;
    }

    body#order-a-bathboat #contentColumn #shopping-cart a {
        float: none;
    }

    #product-right input[type="text"],
    #product-right select,
    #product-right textarea {
        width: 100%;
        max-width: 420px;
        box-sizing: border-box;
        padding: 6px;
    }

    #product-right input[type="number"] {
        padding: 6px;
    }

    #product-right input[type="submit"] {
        font-size: 18px;
        padding: 10px 28px;
    }

    /* ---- Checkout: the summary (with Place order) follows the form ---- */

    .cart .checkout-form,
    .cart .checkout-summary {
        float: none;
        width: auto;
    }

    .cart .checkout-summary {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 640px) {

    /* ---- Content pages ---- */

    /* Floated photos in page text (FAQ) */
    #contentColumn img[style*="float"] {
        max-width: 45%;
    }

    /* ...but not the home page photo, which is floated inline too */
    #contentColumn #indexRight img[style*="float"] {
        max-width: 100%;
    }

    body#testimonials #contentColumn table,
    body#testimonials #contentColumn tbody,
    body#testimonials #contentColumn tr,
    body#testimonials #contentColumn td,
    body#in-the-news #contentColumn table,
    body#in-the-news #contentColumn tbody,
    body#in-the-news #contentColumn tr,
    body#in-the-news #contentColumn td {
        display: block;
        width: auto;
    }

    .testimonialText {
        min-height: 0;
        margin-bottom: 20px;
    }

    /* ---- Shop: one column ---- */

    table.category-choices,
    table.category-choices tbody,
    table.category-choices tr,
    table.category-choices td,
    table#gallery,
    table#gallery tbody,
    table#gallery tr,
    table#gallery td {
        display: block;
        width: auto;
    }

    table.category-choices td {
        padding: 0 0 20px 0;
    }

    body.custom-bath-boats table#gallery {
        float: none;
        width: auto !important;
    }

    body#order-a-bathboat #contentColumn .gallery-info {
        margin: 0 0 25px 0;
    }

    /* ---- Cart, review and order pages: "stack" tables become cards ---- */

    .cart table.stack,
    .cart table.stack tbody,
    .cart table.stack tr,
    .cart table.stack td {
        display: block;
        width: auto;
    }

    .cart table.stack thead {
        display: none;
    }

    .cart table.stack tr {
        border-bottom: 2px solid #aadbf3;
        padding: 6px 0;
    }

    .cart table.stack td {
        border-bottom: 0;
        padding: 4px 12px;
    }

    .cart table.stack td.num {
        text-align: left;
    }

    /* Contain the floated thumbnail */
    .cart table.stack td:first-child {
        overflow: hidden;
    }

    .cart table.stack td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: bold;
    }

    .cart table.stack.addresses td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: #0390d5;
        margin-bottom: 2px;
    }

    .cart table.totals,
    .cart .coupon-field {
        width: 100%;
    }

    /* Actions: the main button (checkout / confirm and pay) goes first, full width */
    .cart .actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 15px;
    }

    .cart .actions .right {
        float: none;
        order: -1;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* ---- Checkout fields: one per row ---- */

    .cart .field-pair .field {
        float: none;
        width: auto;
    }

    .cart .field-pair .field + .field {
        margin-left: 0;
    }

    #checkout-button {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

@media screen and (max-width: 400px) {

    /* Shrink the header image so the whole store name fits */
    #header {
        background-size: 850px auto;
        padding-top: 44px;
    }

    #contentColumn {
        padding-left: 10px;
        padding-right: 10px;
    }

    #index #contentColumn {
        padding: 0;
    }

    .cart fieldset,
    .cart .checkout-summary {
        padding: 12px 10px;
    }
}