/*
 * Shop responsive additions, version 1.0.2.
 * Load after the existing stylesheets and before the legacy page scripts.
 * Desktop rules are intentionally untouched.
 */

.shop-responsive-menu {
    display: none;
}

@media only screen and (max-width: 767px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-width: 0;
    }

    .box-layout {
        padding-bottom: 20px;
    }

    .box-wrapper,
    .box-wrapper_cart,
    .inner,
    .footer,
    .site-generator,
    .box-layout .top-wrapper .inner,
    .box-layout .fws_wrapper,
    .bannercontainer,
    .box-layout .bannercontainer,
    .full-portfolio-bannercontainer,
    .full-portfolio-banner,
    .portfolio-bannercontainer,
    .portfolio-banner,
    .container,
    .megafolio-container {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .inner,
    .footer,
    .site-generator {
        padding-left: 16px;
        padding-right: 16px;
    }

    /*
     * Revolution Slider reads its container dimensions at initialization.
     * Keep its native 470px starting height until that initializer scales it
     * to the early-applied responsive width; do not use height:auto here.
     */
    .slider-wrapper .bannercontainer {
        padding: 10px;
    }

    .slider-wrapper .banner {
        width: 100% !important;
        height: 470px;
    }

    /* The legacy slider can leave its direct hero image at source dimensions after init. */
    .slider-wrapper .banner > img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Keep every slide selector within a narrow initialized slider. */
    .slider-wrapper .tp-bullets {
        box-sizing: border-box;
        left: 0 !important;
        width: 100% !important;
        max-width: 100%;
        text-align: center;
    }

    .slider-wrapper .tp-bullets.simplebullets .bullet {
        margin-right: 4px;
    }

    .slider-wrapper .tp-bullets.simplebullets .bullet.last {
        margin-right: 0;
    }

    .one-half,
    .one-third,
    .two-third,
    .three-fourth,
    .one-fourth,
    .one-fifth,
    .two-fifth,
    .three-fifth,
    .four-fifth,
    .one-sixth,
    .five-sixth,
    .content,
    .sidebar,
    .item-details,
    .two-col .video-wrapper,
    .two-col .video-details,
    .side-tab-container .panel-container,
    .tab-container .panel-container,
    .tab-container .tab-item {
        box-sizing: border-box;
        float: none;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Legacy tab panels use content-box plus 20px side padding. */
    .tab-container .panel-container,
    .side-tab-container .panel-container {
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }

    .one-half,
    .one-third,
    .two-third,
    .three-fourth,
    .one-fourth,
    .one-fifth,
    .two-fifth,
    .three-fifth,
    .four-fifth,
    .one-sixth,
    .five-sixth {
        margin-bottom: 20px;
    }

    .sidebar {
        background: none;
        margin-top: 24px;
    }

    .sidebox,
    .sidebox:first-child {
        margin-left: 0;
        margin-top: 20px;
        padding-top: 20px;
    }

    .row [class*="span"] {
        box-sizing: border-box;
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .pull-right {
        float: none;
    }

    /* Product hero images sit outside .box-wrapper; preserve every pixel on phones. */
    img.responsiveImage,
    #primary-img > img {
        box-sizing: border-box;
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .box-wrapper img {
        box-sizing: border-box;
        max-width: 100%;
        height: auto;
    }

    /*
     * Script adds this class only to a genuinely large left/right-floated CMS
     * image in article/tab content. It then becomes a full-width content item
     * before its prose rather than leaving a narrow one-word text column.
     */
    .shop-responsive-stack-image {
        box-sizing: border-box;
        display: block;
        float: none !important;
        max-width: 100%;
        height: auto;
        margin: 0 auto 16px !important;
    }

    .pricing.three,
    .pricing.four {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }

    .pricing.three .plan,
    .pricing.four .plan {
        float: none;
        width: auto;
        margin: 0 !important;
        clear: none !important;
    }

    .related ul,
    .items,
    .items.col2,
    .items.col3,
    .items.col4 {
        width: 100%;
        margin-right: 0;
    }

    .related ul li,
    .items.col2 li,
    .items.col3 li,
    .items.col4 li {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    /* Legacy content tables remain reachable without widening the document. */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #footer .footer > table,
    #footer .footer > table tbody,
    #footer .footer > table tr,
    #footer .footer > table td {
        display: block;
        width: 100% !important;
        text-align: center;
    }

    #footer .footer > table td + td {
        margin-top: 14px;
    }

    body input,
    body textarea,
    body select,
    body button {
        font-size: 16px !important;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select,
    button,
    input[type="submit"],
    input[type="button"],
    a.button {
        min-height: 44px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: auto;
        min-width: 20px;
        min-height: 20px;
        vertical-align: middle;
    }

    .forms fieldset .text-input,
    .forms fieldset .text-area,
    .searchform input,
    .comment-form input,
    .comment-form textarea {
        box-sizing: border-box;
        height: auto;
        min-height: 44px;
        padding: 10px 12px;
    }

    .forms fieldset .text-area,
    .comment-form textarea {
        min-height: 160px;
    }

    .forms label,
    .control-label {
        float: none;
        width: auto;
        padding-top: 0;
        margin-bottom: 6px;
        font-size: 16px;
        line-height: 1.35;
    }

    .control-group .controls {
        margin-left: 0;
    }

    .product-cart-form {
        padding: 16px;
    }

    /* Pricing-grid basket links already have grid spacing; remove legacy 20px tail. */
    .pricing .select > div > a.button,
    .pricing .select > form > div > a.button {
        box-sizing: border-box;
        max-width: 100%;
        margin-bottom: 0;
    }

    .out-of-stock div {
        margin-left: 0;
    }

    /*
     * The legacy AJAX add-to-cart response inserts this fixed notification.
     * Keep it at the viewport top on phones and reserve its measured height
     * in .box-wrapper_cart so it cannot cover the page or its form controls.
     */
    #cart_main {
        box-sizing: border-box;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 99999;
        width: 100% !important;
        max-width: 100%;
        height: auto;
        min-height: 44px;
        padding: 0 16px;
        text-align: left;
    }

    .box-wrapper_cart {
        padding-bottom: var(--shop-responsive-cart-notice-height, 56px);
    }

    #cart_main a {
        min-height: 44px;
        padding: 4px 0;
        line-height: 36px;
        font-size: 16px;
    }

    #cart_main .cart_bg {
        margin-top: 6px;
    }

    /* No-JS fallback: the original header list remains visible and complete. */
    #header .dropdown_4columns,
    #header_inner .dropdown_4columns,
    .shop-responsive-menu .dropdown_4columns {
        box-sizing: border-box;
        display: block;
        position: static;
        float: none;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #header .dropdown_4columns .one-fourth,
    #header_inner .dropdown_4columns .one-fourth,
    .shop-responsive-menu .dropdown_4columns .one-fourth {
        box-sizing: border-box;
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .shop-responsive-menu {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        padding: 12px 16px 0;
    }

    .shop-responsive-menu > details {
        display: block;
        width: 100%;
        margin: 0 0 16px;
        border: 1px solid #6094b4;
        background: #ffffff;
        color: #505050;
    }

    .shop-responsive-menu summary {
        display: block;
        position: relative;
        min-height: 44px;
        padding: 11px 42px 11px 14px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        line-height: 22px;
        list-style: none;
    }

    .shop-responsive-menu summary::-webkit-details-marker {
        display: none;
    }

    .shop-responsive-menu summary::after {
        content: "+";
        position: absolute;
        top: 8px;
        right: 14px;
        font-size: 24px;
        font-weight: 400;
        line-height: 28px;
    }

    .shop-responsive-menu details[open] summary::after {
        content: "−";
    }

    .shop-responsive-menu__panel {
        border-top: 1px solid #d9d9d9;
        padding: 8px 14px 14px;
    }

    .shop-responsive-menu__panel p {
        margin: 0;
        padding: 8px 0;
        border-bottom: 1px solid #e6e6e6;
    }

    .shop-responsive-menu__panel .one-fourth:last-child p:last-child {
        border-bottom: 0;
    }

    .shop-responsive-menu__panel h14 {
        display: block;
    }

    .shop-responsive-menu__panel a {
        display: inline-block;
        min-height: 44px;
        padding: 11px 0;
        color: #505050;
        font-size: 16px;
        line-height: 22px;
        text-decoration: none;
    }

    .shop-responsive-menu__panel strong > a {
        padding: 4px 0;
    }

    .shop-responsive-menu a:hover {
        color: #6094b4;
        text-decoration: underline;
    }

    .shop-responsive-menu summary:focus,
    .shop-responsive-menu a:focus,
    input:focus,
    textarea:focus,
    select:focus,
    button:focus {
        outline: 3px solid #6094b4;
        outline-offset: 2px;
    }
}

@media only screen and (max-width: 360px) {
    .inner,
    .footer,
    .site-generator {
        padding-left: 12px;
        padding-right: 12px;
    }

    .pricing.three,
    .pricing.four {
        grid-template-columns: 1fr;
    }
}

/* Only prevent the known tablet product-image overflow; the slider is outside .box-wrapper. */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .box-wrapper .inner img,
    .box-wrapper .content img {
        max-width: 100%;
        height: auto;
    }
}

/* Integrated scoped basket refinements; must remain after the general rules. */
/*
 * GoCart basket refinement — load after shop-responsive-1.0.css.
 * Scope is supplied only by the staged view_cart.php hook.  No cart data,
 * prices, stock state, handlers, or form semantics are changed here.
 */

/* The legacy 140px tablet button rule can wrap its label outside its 29px box. */
.basket-checkout #ord1 a.button,
.basket-checkout #ord2 a.button {
    box-sizing: border-box;
    height: auto;
    min-height: 29px;
    line-height: 1.35;
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: center;
    white-space: normal;
}

/* The legacy stylesheet has no 768–779px layout rule. Keep this cart page fluid
 * through 799px without changing other pages or desktop widths. */
@supports selector(:has(*)) {
@media only screen and (max-width: 799px) {
    .box-layout:has(.basket-checkout) .box-wrapper,
    .box-layout:has(.basket-checkout) .white-wrapper {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
    }

    .box-layout:has(.basket-checkout) .basket-checkout {
        box-sizing: border-box;
        width: auto !important;
        max-width: none;
        margin-right: 16px;
        margin-left: 16px;
        padding-right: 0;
        padding-left: 0;
    }

    /* The product grid becomes a fully labelled card list, not a scrolled table. */
    .basket-checkout > table.table_style,
    .basket-checkout > table.table_style > tbody {
        display: block;
        width: 100% !important;
        max-width: 100%;
        overflow: visible;
    }

    .basket-checkout > table.table_style > tbody > tr {
        display: block;
        width: 100%;
    }

    /* Hide the legacy table chrome; product data rows retain every control and link. */
    .basket-checkout > table.table_style > tbody > tr:first-child,
    .basket-checkout > table.table_style > tbody > tr:has(> td h3),
    .basket-checkout > table.table_style > tbody > tr.tr_color,
    .basket-checkout > table.table_style > tbody > tr:has(> td h3) + tr,
    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) + tr {
        display: none;
    }

    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(104px, 0.82fr);
        gap: 0 16px;
        width: 100%;
        margin: 0 0 14px;
        padding: 16px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        background: #f5f5f5;
    }

    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td {
        box-sizing: border-box;
        display: block;
        width: auto !important;
        min-width: 0;
        height: auto !important;
        padding: 7px 0;
        background: transparent !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:first-of-type {
        display: none;
    }

    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(2) {
        grid-column: 1 / -1;
        padding-top: 0;
        font-weight: 700;
    }

    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(2)::before,
    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(3)::before,
    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(4)::before,
    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(5)::before,
    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(6)::before,
    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(7)::before {
        display: block;
        margin-bottom: 3px;
        color: #606060;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .02em;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(2)::before { content: "Item"; }
    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(3)::before { content: "Size"; }
    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(4)::before { content: "Pack details"; }
    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(5)::before { content: "Price"; }
    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(6)::before { content: "Quantity"; }
    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(7)::before { content: "Item total"; }

    .basket-checkout > table.table_style select[id^="size"] {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
    }

    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(6) {
        grid-column: 1 / -1;
        white-space: normal;
    }

    .basket-checkout > table.table_style > tbody > tr:has(> td.table_width2):not(:has(> td h3)) > td:nth-of-type(6) a {
        display: inline-flex;
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }

    .basket-checkout > table.table_style > tbody > tr.row_style {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .basket-checkout > table.table_style > tbody > tr.row_style > td {
        display: block;
        box-sizing: border-box;
        width: 100% !important;
        height: auto !important;
        padding: 0;
        text-align: left !important;
    }

    .basket-checkout > table.table_style > tbody > tr.row_style > td:first-of-type,
    .basket-checkout > table.table_style > tbody > tr.row_style > td:nth-of-type(3),
    .basket-checkout > table.table_style > tbody > tr.row_style > td:nth-of-type(4),
    .basket-checkout > table.table_style > tbody > tr.row_style > td:nth-of-type(5),
    .basket-checkout > table.table_style > tbody > tr.row_style > td:nth-of-type(6) {
        display: none;
    }

    .basket-checkout > table.table_style > tbody > tr.row_style a.button,
    .basket-checkout #ord1 a.button,
    .basket-checkout #ord2 a.button {
        box-sizing: border-box;
        display: block;
        width: 100% !important;
        min-height: 44px;
        margin: 0 0 16px;
        padding: 11px 16px;
        line-height: 22px;
        text-align: center;
    }

    .basket-checkout .prod_date,
    .basket-checkout .prod_date > tbody,
    .basket-checkout .prod_date > tbody > tr,
    .basket-checkout .prod_date > tbody > tr > td {
        display: block;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        margin: 0;
        padding: 0;
    }

    .basket-checkout .prod_date > tbody > tr:first-child > td:first-of-type,
    .basket-checkout .prod_date > tbody > tr:last-child > td:first-of-type {
        display: none;
    }

    .basket-checkout .prod_date img.image_width {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-width: 575px;
        margin: 0 auto 20px;
    }

    /* Delivery choice, totals, and payments become one vertical checkout column. */
    .basket-checkout-layout,
    .basket-checkout-layout > tbody,
    .basket-checkout-layout > tbody > tr,
    .basket-checkout-layout > tbody > tr > td {
        display: block;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
    }

    .basket-checkout-layout > tbody > tr > td {
        padding: 0;
        text-align: left !important;
    }

    .basket-checkout-layout > tbody > tr:first-child > td:not(:last-child),
    .basket-checkout-layout > tbody > tr:nth-child(3) > td:first-of-type,
    .basket-checkout-layout > tbody > tr:nth-child(6) > td:first-of-type,
    .basket-checkout-layout > tbody > tr:nth-child(4),
    .basket-checkout-layout > tbody > tr:nth-child(5),
    .basket-checkout-layout > tbody > tr:nth-child(7) {
        display: none;
    }

    .basket-checkout-layout h4 {
        margin: 8px 0;
        font-size: 18px;
        line-height: 1.3;
    }

    .basket-checkout-layout #checkshipping {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        margin: 0 0 10px;
    }

    .basket-checkout-layout .note-box,
    .basket-checkout-layout .bookmark_notice,
    .basket-checkout-layout .download-box {
        box-sizing: border-box;
        width: 100%;
        margin: 0 0 16px;
        overflow-wrap: anywhere;
    }

    .basket-checkout #ord1 > tbody,
    .basket-checkout #ord2 > tbody {
        display: block;
        width: 100%;
    }

    .basket-checkout #ord1 > tbody > tr,
    .basket-checkout #ord2 > tbody > tr {
        display: none;
        box-sizing: border-box;
        width: 100%;
    }

    .basket-checkout #ord1 > tbody > tr:nth-child(1),
    .basket-checkout #ord1 > tbody > tr:nth-child(3),
    .basket-checkout #ord1 > tbody > tr:nth-child(4),
    .basket-checkout #ord1 > tbody > tr:nth-child(5),
    .basket-checkout #ord1 > tbody > tr:nth-child(6),
    .basket-checkout #ord2 > tbody > tr:nth-child(1),
    .basket-checkout #ord2 > tbody > tr:nth-child(3),
    .basket-checkout #ord2 > tbody > tr:nth-child(4),
    .basket-checkout #ord2 > tbody > tr:nth-child(5),
    .basket-checkout #ord2 > tbody > tr:nth-child(6) {
        display: grid;
    }

    .basket-checkout #ord1 > tbody > tr > td,
    .basket-checkout #ord2 > tbody > tr > td {
        display: none;
        box-sizing: border-box;
        width: auto !important;
        min-width: 0;
        padding: 9px 12px;
        background: #f5f5f5;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .basket-checkout #ord1 > tbody > tr:nth-child(1),
    .basket-checkout #ord2 > tbody > tr:nth-child(1) {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 16px;
    }

    .basket-checkout #ord1 > tbody > tr:nth-child(1) > td:last-of-type,
    .basket-checkout #ord2 > tbody > tr:nth-child(1) > td:last-of-type {
        display: block;
        grid-column: 1;
        background: #ebebeb;
    }

    .basket-checkout #ord1 > tbody > tr:nth-child(1) h4,
    .basket-checkout #ord2 > tbody > tr:nth-child(1) h4 {
        margin: 0;
    }

    .basket-checkout #ord1 > tbody > tr:nth-child(3),
    .basket-checkout #ord1 > tbody > tr:nth-child(4),
    .basket-checkout #ord1 > tbody > tr:nth-child(5),
    .basket-checkout #ord2 > tbody > tr:nth-child(3),
    .basket-checkout #ord2 > tbody > tr:nth-child(4),
    .basket-checkout #ord2 > tbody > tr:nth-child(5) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .basket-checkout #ord1 > tbody > tr:nth-child(3) > td:nth-of-type(4),
    .basket-checkout #ord1 > tbody > tr:nth-child(3) > td:last-of-type,
    .basket-checkout #ord1 > tbody > tr:nth-child(4) > td:nth-of-type(4),
    .basket-checkout #ord1 > tbody > tr:nth-child(4) > td:last-of-type,
    .basket-checkout #ord1 > tbody > tr:nth-child(5) > td:nth-of-type(4),
    .basket-checkout #ord1 > tbody > tr:nth-child(5) > td:last-of-type,
    .basket-checkout #ord2 > tbody > tr:nth-child(3) > td:nth-of-type(4),
    .basket-checkout #ord2 > tbody > tr:nth-child(3) > td:last-of-type,
    .basket-checkout #ord2 > tbody > tr:nth-child(4) > td:nth-of-type(4),
    .basket-checkout #ord2 > tbody > tr:nth-child(4) > td:last-of-type,
    .basket-checkout #ord2 > tbody > tr:nth-child(5) > td:nth-of-type(4),
    .basket-checkout #ord2 > tbody > tr:nth-child(5) > td:last-of-type {
        display: block;
    }

    .basket-checkout #ord1 > tbody > tr:nth-child(6) {
        grid-template-columns: minmax(0, 1fr);
    }

    .basket-checkout #ord1 > tbody > tr:nth-child(6) > td:last-of-type,
    .basket-checkout #ord2 > tbody > tr:nth-child(6) > td:last-of-type {
        display: block;
        grid-column: 1;
        padding-top: 12px;
    }

    .basket-checkout #ord1 > tbody > tr:nth-child(6) a.button,
    .basket-checkout #ord2 a.button {
        margin-bottom: 0;
    }

    .basket-checkout #transfer_frm {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .basket-checkout #transfer_frm .content,
    .basket-checkout #transfer_frm .sidebar {
        box-sizing: border-box;
        float: none;
        width: 100%;
        max-width: 100%;
    }

    .basket-checkout #transfer_frm .content {
        margin-bottom: 24px;
    }

    .basket-checkout #transfer_frm .forms fieldset .text-input,
    .basket-checkout #transfer_frm .forms input.btn-submit,
    .basket-checkout #bank_turnstile {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .basket-checkout #transfer_frm .sidebar {
        margin-top: 0;
        background: none;
    }

    .basket-checkout #transfer_frm .sidebox {
        margin-left: 0;
        padding-top: 0;
    }

    .basket-checkout #transfer_frm .sidebox table,
    .basket-checkout #transfer_frm .sidebox tbody,
    .basket-checkout #transfer_frm .sidebox tr,
    .basket-checkout #transfer_frm .sidebox td {
        display: block;
        box-sizing: border-box;
        width: 100% !important;
        height: auto !important;
    }

    .basket-checkout #transfer_frm .sidebox td:first-of-type {
        width: 44px !important;
    }
}

}

/* Complete the basket's known 768-799px legacy footer width gap. */
@supports selector(:has(*)) {
  @media only screen and (min-width: 768px) and (max-width: 799px) {
    .box-layout:has(.basket-checkout) .footer-wrapper,
    .box-layout:has(.basket-checkout) .footer,
    .box-layout:has(.basket-checkout) .site-generator {
      box-sizing: border-box;
      width: 100% !important;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 16px;
      padding-right: 16px;
    }
    .box-layout:has(.basket-checkout) #footer .footer > table,
    .box-layout:has(.basket-checkout) #footer .footer > table tbody,
    .box-layout:has(.basket-checkout) #footer .footer > table tr,
    .box-layout:has(.basket-checkout) #footer .footer > table td {
      box-sizing: border-box;
      display: block;
      width: 100% !important;
      max-width: 100%;
      text-align: center;
    }
    .box-layout:has(.basket-checkout) #footer .footer > table td + td {
      margin-top: 14px;
    }
  }
}
/* Preserve the existing rowspan instruction pairs: number before its text. */
@supports selector(:has(*)) {
  @media only screen and (max-width: 799px) {
    .basket-checkout #transfer_frm .sidebox table > tbody {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 16px 8px;
    }
    .basket-checkout #transfer_frm .sidebox table > tbody > tr {
      display: contents;
    }
    .basket-checkout #transfer_frm .sidebox table > tbody > tr:nth-of-type(odd) > td:first-of-type {
      display: none;
    }
    .basket-checkout #transfer_frm .sidebox table > tbody > tr:nth-of-type(odd) > td:last-of-type {
      grid-column: 2;
    }
    .basket-checkout #transfer_frm .sidebox table > tbody > tr:nth-of-type(even) > td:first-of-type {
      grid-column: 1;
      width: 36px !important;
    }
    .basket-checkout #transfer_frm .sidebox table > tbody > tr:nth-of-type(1) > td:last-of-type,
    .basket-checkout #transfer_frm .sidebox table > tbody > tr:nth-of-type(2) > td:first-of-type { grid-row: 1; }
    .basket-checkout #transfer_frm .sidebox table > tbody > tr:nth-of-type(3) > td:last-of-type,
    .basket-checkout #transfer_frm .sidebox table > tbody > tr:nth-of-type(4) > td:first-of-type { grid-row: 2; }
    .basket-checkout #transfer_frm .sidebox table > tbody > tr:nth-of-type(5) > td:last-of-type,
    .basket-checkout #transfer_frm .sidebox table > tbody > tr:nth-of-type(6) > td:first-of-type { grid-row: 3; }
    .basket-checkout #transfer_frm .sidebox table > tbody > tr:nth-of-type(7) > td:last-of-type,
    .basket-checkout #transfer_frm .sidebox table > tbody > tr:nth-of-type(8) > td:first-of-type { grid-row: 4; }
  }
}

/* 1.0.2: centre pricing labels in the existing accessible mobile tap target. */
@media only screen and (max-width: 767px) {
    .pricing .select > div > a.button,
    .pricing .select > form > div > a.button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 44px;
        line-height: 22px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}