/* Template 2 (themes 11, 13, 17, 18) phone and tablet fixes. Loaded after StyleSheetNew.min.css, Template 2 only. */

/* Theme 17's footer is dark olive: the logo sits on a white tile at every screen size so dark logos stay readable */
form.theme17 footer .footer_columns .footer_column.logos .logo a {
    display: inline-block;
    background: #fff;
    border-radius: 8px;
    padding: 10px 14px;
}

form.theme17 footer .footer_columns .footer_column.logos .logo a img {
    display: block;
}

/* Themes 11 and 13: a category with no icon in the database (e.g. Fleet & Automotive) gets a white car outline,
   so its card matches the others at every screen size */
form:is(.theme11, .theme13) .featuredSection .categoryList .productBlock .productCategoryImg:not(:has(svg))::before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11l1.6-4.3A2 2 0 0 1 8.5 5.4h7a2 2 0 0 1 1.9 1.3L19 11'/%3E%3Cpath d='M3.5 17.5v-4.5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v4.5z'/%3E%3Cpath d='M5 17.5v1.8h2.5v-1.8M16.5 17.5v1.8H19v-1.8'/%3E%3Ccircle cx='7.5' cy='14.2' r='1'/%3E%3Ccircle cx='16.5' cy='14.2' r='1'/%3E%3Cpath d='M10.5 14.5h3'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11l1.6-4.3A2 2 0 0 1 8.5 5.4h7a2 2 0 0 1 1.9 1.3L19 11'/%3E%3Cpath d='M3.5 17.5v-4.5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v4.5z'/%3E%3Cpath d='M5 17.5v1.8h2.5v-1.8M16.5 17.5v1.8H19v-1.8'/%3E%3Ccircle cx='7.5' cy='14.2' r='1'/%3E%3Ccircle cx='16.5' cy='14.2' r='1'/%3E%3Cpath d='M10.5 14.5h3'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 992px) {
    /* Header: one compact row (logo | cart + menu) with the search under it.
       The page content starts at --headerHeight, so the header is held to exactly that height;
       a full-size logo made it ~264px tall and it covered the top of every page. */
    form {
        --headerHeight: 140px;
    }

    form header {
        height: var(--headerHeight);
        padding: 12px 0;
    }

    form header .header-Top {
        align-items: center;
        padding-top: 0;
    }

    form header .header-Left {
        width: auto;
        max-width: calc(100% - 110px);
        height: 64px;
    }

    form header .header-Left > a {
        height: 64px;
    }

    form header .header-Left > a img {
        width: auto;
        max-width: 100%;
        max-height: 64px !important;
        object-fit: contain;
    }

    form header .header-Right {
        align-self: center;
    }

    form header .header-Center {
        margin-top: 12px;
    }

    /* Home banner: the image fills the box behind the centred text */
    form .cs_body .mainPageBanner {
        height: 220px;
    }

    form .cs_body .mainPageBanner .bannerImage {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 767px) {
    form .cs_body .mainPageBanner {
        height: 200px;
    }

    form .cs_body .mainPageBanner .overlay {
        font-size: 24px;
        line-height: 30px;
    }

    /* Theme 17 banner photo is light: an even dark tint keeps the white text readable */
    form.theme17 .cs_body .mainPageBanner::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .38);
    }

    form.theme17 .cs_body .mainPageBanner .overlay {
        z-index: 1;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    }

    /* Header: soft shadow so content scrolling underneath has an edge */
    form header {
        box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    }

    /* Home spacing: banner to Categories 75px -> 28px, no white band before the footer */
    form .cs_body {
        padding-bottom: 0;
    }

    form .defaultPage .productListPage .productListContainer {
        margin-top: 28px;
        margin-bottom: 0;
    }

    form .defaultPage .featuredSection.featuredCategoriesSection {
        margin-top: 0;
    }

    form .defaultPage .productListPage .productListContainer .productListSection.myStore {
        margin-bottom: 32px;
    }

    /* Footer: compact, everything left-aligned; the logo sits on a white tile so dark logos read on dark footers */
    form footer {
        padding-top: 32px;
    }

    form footer .footer_columns {
        padding-bottom: 28px !important;
        border-bottom: 0;
        row-gap: 22px;
    }

    form footer .footer_columns .footer_column {
        margin-top: 0;
        padding-left: 0 !important;
    }

    form footer .footer_columns .footer_column.logos {
        text-align: left;
    }

    form footer .footer_columns .footer_column.logos .logo a {
        display: inline-block;
        background: #fff;
        border-radius: 8px;
        padding: 8px 12px;
    }

    form footer .footer_columns .footer_column.logos .logo a img {
        display: block;
        max-width: 160px;
        max-height: 56px;
    }

    form footer .footer_columns .footer_column.list h1 {
        font-size: 11px;
        letter-spacing: .08em;
        opacity: .75;
        margin-bottom: 8px;
    }

    form footer .footer_columns .footer_column.list ul {
        margin: 0;
        padding: 0;
    }

    form footer .footer_columns .footer_column.list ul li {
        margin-bottom: 6px;
    }

    form footer .footer_columns .footer_column.list ul li a {
        font-size: 15px;
        font-weight: 500;
    }

    /* Theme 17 home categories: one list with a line between rows, names on one line, arrow centred */
    form.theme17 .featuredSection.featuredCategoriesSection > .sectionHeading {
        font-size: 24px;
        margin-bottom: 14px;
    }

    form.theme17 .productListPage .productListContainer .productListSection .productList.categoryList {
        padding: 0;
    }

    form.theme17 .productListPage .productListContainer .productListSection .productList.categoryList .productBlock {
        flex: 0 0 100% !important;
        margin: 0 !important;
        min-height: 58px !important;
        padding: 8px 40px 8px 2px !important;
        gap: 14px;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, .25) !important;
    }

    form.theme17 .productListPage .productListContainer .productListSection .productList.categoryList .productBlock:first-child {
        border-top: 1px solid rgba(0, 0, 0, .25) !important;
    }

    form.theme17 .featuredSection .productList .productBlock .categoryIconImg {
        width: 34px !important;
        height: 34px !important;
    }

    form.theme17 .featuredSection .productList .productBlock .productName span.d-block {
        font-size: 17px !important;
        padding: 0;
    }

    /* The arrow holder took half the row (a shared rule sets width:100% on every name span), wrapping the names */
    form.theme17 .featuredSection .productList .productBlock .productName a .shopCategory {
        flex: 0 0 0;
        width: 0 !important;
        padding: 0 !important;
    }

    form.theme17 .featuredSection .productList .productBlock .productName a .shopCategory:after {
        width: 22px;
        height: 22px;
        right: 8px;
    }

    /* Themes 11 and 13 home categories: two tiles per row, icon above the name (desktop cards were ~250px tall, one per screen) */
    form:is(.theme11, .theme13) .featuredSection.featuredCategoriesSection > .sectionHeading {
        margin-bottom: 14px;
    }

    form:is(.theme11, .theme13) .productListContainer .productListSection .featuredSection .productList.categoryList {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px !important;
        padding: 0 !important;
    }

    form:is(.theme11, .theme13) .productListContainer .productListSection .featuredSection .productList.categoryList .productBlock {
        flex: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        min-height: 140px !important;
        padding: 18px 10px !important;
        border-radius: 12px;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    /* The empty icon link (only used by theme 17) takes no space */
    form:is(.theme11, .theme13) .productListContainer .productListSection .featuredSection .productList.categoryList .productBlock > a:not(:has(img)) {
        display: none;
    }

    form:is(.theme11, .theme13) .productListContainer .productListSection .featuredSection .productList.categoryList .productBlock .productImage {
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    form:is(.theme11, .theme13) .productListContainer .productListSection .featuredSection .productList.categoryList .productBlock .productImage .productImageInner {
        display: block;
        padding: 0 !important;
        text-align: center !important;
    }

    form:is(.theme11, .theme13) .productListContainer .productListSection .featuredSection .productList.categoryList .productBlock .productCategoryImg svg,
    form:is(.theme11, .theme13) .productListContainer .productListSection .featuredSection .productList.categoryList .productBlock .productCategoryImg:not(:has(svg))::before {
        display: block;
        width: 56px !important;
        height: 56px !important;
        max-width: none !important;
        margin: 0 auto;
    }

    form:is(.theme11, .theme13) .productListContainer .productListSection .featuredSection .productList.categoryList .productBlock .productName {
        width: 100%;
        margin: 0 !important;
    }

    form:is(.theme11, .theme13) .productListContainer .productListSection .featuredSection .productList.categoryList .productBlock .productName a {
        text-decoration: none !important;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.25;
    }

    form:is(.theme11, .theme13) .productListContainer .productListSection .featuredSection .productList.categoryList .productBlock .productName span {
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        text-align: center;
    }
}

@media (max-width: 992px) {
    /* Phone menu: hangs exactly from the bottom of the header (it used a fixed 70px offset tuned for the old, taller header) */
    form header .header-Bottom .cs_hearderRow3.fixed {
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0;
    }

    /* The page behind is dimmed; the shadow is clipped so it never covers the header */
    form header .header-Bottom .cs_hearderRow3.fixed .nav {
        box-shadow: 0 0 0 100vh rgba(0, 0, 0, .45);
        clip-path: inset(0 0 -100vh 0);
    }

    /* White panel; a long menu (SHOP open) scrolls inside it */
    form header .header-Bottom .cs_hearderRow3.fixed .main_nav {
        max-height: calc(100vh - var(--headerHeight));
        overflow-y: auto;
        border-top: 1px solid rgba(0, 0, 0, .08);
    }

    /* Burger turns into a close icon while the menu is open */
    body.show_Menu form header .menuTrigger::before {
        content: "\f00d";
    }

    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li,
    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li:hover {
        background-color: #fff;
    }

    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li a,
    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li:hover a {
        padding: 14px 20px !important;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .04em;
        color: #222 !important;
    }

    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li.shopMenu > div > a,
    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li.shopMenu .fa,
    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li.shopMenu .fa::before {
        color: var(--primaryColor) !important;
    }

    /* Divider lines line up with the text */
    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li::after {
        left: 20px;
        right: 20px;
        width: auto !important;
        transform: none;
        background: rgba(0, 0, 0, .1);
    }

    /* SHOP categories: light warm grey list, indented, no heavy bottom border */
    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li .sub_nav {
        background: #f6f5f1;
        border-bottom: 0;
    }

    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li .sub_nav .nav_column_list .li_heading .nav_column .nav_column_heading > a {
        padding: 12px 20px 12px 36px !important;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0;
        color: #333 !important;
    }

    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li .sub_nav .nav_column_list .li_heading .nav_column .nav_column_heading > a::after {
        left: 36px;
        right: 20px;
        width: auto !important;
        transform: none;
        background: rgba(0, 0, 0, .08);
    }

    /* Tapped / hovered category: soft tint of the theme colour with theme-colour text
       (the old hover was a near-black fill, unreadable with the dark text; phones keep the last tapped link in hover) */
    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li .sub_nav .nav_column_list .li_heading .nav_column .nav_column_heading > a:hover,
    form header .header-Bottom .cs_hearderRow3.fixed .main_nav .main_li .sub_nav .nav_column_list .li_heading .nav_column .nav_column_heading > a:focus {
        background-color: #ebe9e2;
        background-color: color-mix(in srgb, var(--primaryColor) 12%, #fff);
        color: var(--primaryColor) !important;
        font-weight: 600;
    }

    /* Slim, light scrollbar inside the menu instead of the site-wide 8px theme-colour bar */
    form header .header-Bottom .cs_hearderRow3.fixed .main_nav {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, .25) transparent;
    }

    form header .header-Bottom .cs_hearderRow3.fixed .main_nav::-webkit-scrollbar {
        width: 4px;
    }

    form header .header-Bottom .cs_hearderRow3.fixed .main_nav::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, .25);
        border-radius: 4px;
    }

    form header .header-Bottom .cs_hearderRow3.fixed .main_nav::-webkit-scrollbar-track {
        background: transparent;
        box-shadow: none;
    }
}

/* Shop (product list) page on phones, modelled on the Template 3 list page: inset banner, Filter + Sort by toolbar,
   drop-down filter panel, two cards per row, compact pager. */
@media (max-width: 767px) {
    form {
        --t2-border: #e3e3e3;
        --t2-muted: #707070;
        --t2-text: #222;
    }

    /* Banner: shorter card inside the page width, title on the left */
    form .productListPage.listPage .productListBanner {
        width: calc(100% - 32px);
        height: auto !important;
        min-height: 110px !important;
        margin: 16px auto 0 !important;
        justify-content: flex-start !important;
        text-align: left !important;
        border-radius: 12px;
        overflow: hidden;
    }

    form .productListPage.listPage .productListBanner .overlay {
        position: relative;
        z-index: 1;
        width: 100%;
        padding: 24px 20px;
        text-align: left;
    }

    form .productListPage.listPage .productListBanner .overlay h1 {
        margin: 0 !important;
        font-size: 26px !important;
        line-height: 1.15 !important;
        text-align: left !important;
        color: #fff !important;
    }

    /* Toolbar: Filter button (left) and Sort by (right) on one row; the empty breadcrumb row is gone */
    form .productListPage.listPage .breadcrumbAndSearchBar {
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
        border: 0 !important;
    }

    form .productListPage.listPage .breadcrumbAndSearchBar .inner {
        width: calc(100% - 32px) !important;
        min-height: 72px;
        margin: 0 auto !important;
        padding: 16px 0 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center;
    }

    form .productListPage.listPage .breadcrumbAndSearchBar .breadcrumb {
        display: none !important;
    }

    form .productListPage.listPage .breadcrumbAndSearchBar .sortByAndLayout {
        display: flex !important;
        width: auto !important;
        justify-content: flex-end !important;
    }

    form .productListPage.listPage .sortByAndLayout .sortBy {
        display: flex !important;
        align-items: center;
        gap: 8px;
        height: auto !important;
    }

    form .productListPage.listPage .sortByAndLayout .sortBy > label {
        display: inline !important;
        margin: 0 !important;
        font-size: 14px !important;
        color: var(--t2-muted) !important;
    }

    form .productListPage.listPage .sortByAndLayout .sortBy > select {
        height: 40px !important;
        min-width: 140px;
        padding: 0 36px 0 14px !important;
        border: 1px solid var(--t2-border) !important;
        border-radius: 8px !important;
        -webkit-appearance: none;
        appearance: none;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px !important;
        font-size: 14px !important;
        color: var(--t2-text) !important;
    }

    form .productListPage.listPage .productListContainer {
        position: relative;
        width: calc(100% - 32px) !important;
        margin: 0 auto !important;
    }

    form .productListPage.listPage .productListContainer .productFilterSection {
        position: static !important;
        flex: none;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
    }

    /* Theme 18 gives the filter area padding and a black background with a more specific rule */
    form.theme18 .productListPage.listPage .productListContainer .productFilterSection {
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
    }

    form .productListPage.listPage .productListContainer .productFilterSection .filterMenuToggle_label {
        position: absolute;
        top: -56px;
        left: 0;
        z-index: 10;
        display: inline-block !important;
        width: auto !important;
        height: 40px;
        margin: 0 !important;
        padding: 0 16px 0 40px !important;
        border: 1px solid var(--t2-border) !important;
        border-radius: 8px !important;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") no-repeat 14px center / 18px !important;
        color: var(--t2-text) !important;
        font-size: 14px !important;
        font-weight: 600;
        line-height: 38px !important;
        letter-spacing: 0;
        text-transform: lowercase;
        white-space: nowrap;
        box-shadow: none !important;
    }

    form .productListPage.listPage .productListContainer .productFilterSection .filterMenuToggle_label::first-letter {
        text-transform: uppercase;
    }

    form .productListPage.listPage .productListContainer .productFilterSection:has(.filterMenuToggle_input:checked) .filterMenuToggle_label {
        border-color: var(--primaryColor) !important;
        color: var(--primaryColor) !important;
    }

    /* Filter panel: drops down over the products, white card */
    form .productListPage.listPage .productListContainer .productFilterSection .filterInner {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        width: auto !important;
        max-height: 70vh;
        overflow-y: auto;
        padding: 16px !important;
        background: #fff !important;
        border: 1px solid var(--t2-border);
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    }

    form .productListPage.listPage .productFilterSection .filterInner .productFilterHeading {
        margin: 0 0 6px !important;
        padding: 0 !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: var(--t2-text) !important;
    }

    form .productListPage.listPage .productFilterSection .filterInner .filterTab {
        margin: 0 !important;
        padding: 12px 0 !important;
        border-top: 1px solid var(--t2-border) !important;
        background: none !important;
    }

    form .productListPage.listPage .productFilterSection .filterInner .filterTab .tabLabel {
        margin: 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--t2-text) !important;
    }

    form .productListPage.listPage .productFilterSection .filterInner .productFilterItems li a,
    form .productListPage.listPage .productFilterSection .filterInner .productFilterItems li label {
        display: block;
        padding: 6px 10px !important;
        border-radius: 8px;
        font-size: 14px !important;
        font-weight: 400 !important;
        text-transform: none !important;
        color: #444 !important;
        text-decoration: none !important;
    }

    form .productListPage.listPage .productFilterSection .filterInner .productFilterItems li.active a {
        background: #ebe9e2;
        background: color-mix(in srgb, var(--primaryColor) 10%, #fff);
        color: var(--primaryColor) !important;
        font-weight: 600 !important;
    }

    /* Products: two per row, joined cells with shared borders */
    form .productListPage.listPage .productListSection .productList:not(.owl-carousel) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        padding: 0 !important;
        border-top: 1px solid var(--t2-border);
        border-left: 1px solid var(--t2-border);
    }

    form .productListPage.listPage .productList .productBlock {
        position: relative;
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        height: 100%;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px !important;
        background: #fff !important;
        border: 0 !important;
        border-right: 1px solid var(--t2-border) !important;
        border-bottom: 1px solid var(--t2-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    form .productListPage.listPage .productList .productBlock .productImage {
        flex: none;
        height: 150px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        background: transparent !important;
        border-radius: 0 !important;
    }

    form .productListPage.listPage .productList .productBlock .productImage a {
        height: 100% !important;
        padding: 0 !important;
    }

    form .productListPage.listPage .productList .productBlock .productImage a::after {
        display: none !important;
    }

    form .productListPage.listPage .productList .productBlock .productImage img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Brand: small muted caps; name: two lines max */
    form .productListPage.listPage .productList .productBlock .productName {
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    form .productListPage.listPage .productList .productBlock .productName .manufacturerName,
    form .productListPage.listPage .productList .productBlock .productName .manufacturerName * {
        margin: 0 0 2px !important;
        padding: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--t2-muted) !important;
    }

    form .productListPage.listPage .productList .productBlock .productName > div:not(.manufacturerName) {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.7em;
        padding: 0 !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        color: var(--t2-text) !important;
    }

    form .productListPage.listPage .productList .productBlock .productPrice {
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    form .productListPage.listPage .productList .productBlock .price {
        padding: 0 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--primaryColor) !important;
    }

    /* Quantity + Add to cart on one row at the bottom of the card */
    form .productListPage.listPage .productList .productBlock .priceAndAddtoCart {
        margin-top: auto !important;
        padding: 0 !important;
    }

    form .productListPage.listPage .productList .productBlock .addtoCart {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px;
        width: 100%;
        margin: 0 !important;
    }

    form .productListPage.listPage .productList .productBlock .addtoCart .txtBox {
        order: 1;
        flex: none;
        width: 44px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        border: 1px solid var(--t2-border) !important;
        border-radius: 8px !important;
        background: #fff !important;
        font-size: 14px !important;
        text-align: center;
    }

    form .productListPage.listPage .productList .productBlock .addtoCart .btn {
        order: 2;
        flex: 1;
        width: auto !important;
        min-width: 0;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: var(--primaryColor) !important;
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: .02em;
    }

    /* Favourite heart in the theme colour, top-right of the card */
    form .productListPage.listPage .productList .productBlock .BAddToFavouritesContainer {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
    }

    form .productListPage.listPage .productList .productBlock .BAddToFavouritesContainer a,
    form .productListPage.listPage .productList .productBlock .BAddToFavouritesContainer a::before {
        color: var(--primaryColor) !important;
        font-size: 18px;
    }

    /* Pager: page info on its own line, then the four arrow buttons together */
    form .PageNavigation {
        max-width: none;
        margin: 28px auto 8px;
        padding: 0;
        border: 0;
    }

    form .PageNavigation .innerTable {
        width: 100% !important;
    }

    form .PageNavigation .innerTable tr {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 10px 8px;
    }

    form .PageNavigation .innerTable td {
        width: auto !important;
        padding: 0;
    }

    form .PageNavigation .innerTable td:nth-child(3) {
        order: -1;
        flex: 0 0 100%;
        text-align: center;
        white-space: nowrap;
    }

    form .PageNavigation font {
        font-size: 14px;
        font-weight: 500 !important;
        color: var(--t2-muted);
    }

    form .PageNavigation select {
        width: auto !important;
        min-width: 70px;
        height: 38px;
        margin: 0 6px;
        padding: 0 30px 0 14px;
        border: 1px solid var(--t2-border);
        border-radius: 8px;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f5f5f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
        font-size: 14px;
        font-weight: 600;
        color: var(--t2-text);
        -webkit-appearance: none;
        appearance: none;
    }

    form .PageNavigation a.NavigationButtonPressed {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 40px;
        border: 1px solid var(--t2-border);
        border-radius: 8px;
        background: #fff;
        color: var(--primaryColor);
    }

    /* Arrows drawn with CSS masks so they never depend on the icon web font */
    form .PageNavigation a.NavigationButtonPressed .material-symbols-outlined {
        display: block;
        width: 20px;
        height: 20px;
        overflow: hidden;
        font-size: 0;
        background: currentColor;
        -webkit-mask: var(--t2-pager-icon) no-repeat center / contain;
        mask: var(--t2-pager-icon) no-repeat center / contain;
    }

    form .PageNavigation a[id$="_BFirst"] {
        --t2-pager-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6l-6 6 6 6M19 6l-6 6 6 6'/%3E%3C/svg%3E");
    }

    form .PageNavigation a[id$="_BBack"] {
        --t2-pager-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
    }

    form .PageNavigation a[id$="_BNext"] {
        --t2-pager-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    }

    form .PageNavigation a[id$="_BLast"] {
        --t2-pager-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6l6 6-6 6M12 6l6 6-6 6'/%3E%3C/svg%3E");
    }
}

/* Product details page on phones, modelled on the Template 3 product page: framed image, dark title, theme-colour price,
   quantity + full-width Add to cart, divided sections, tidied supplier description, bordered Similar Products cards. */
@media (max-width: 767px) {
    /* Image in a square white frame, details stacked under it */
    form .productDetailsPage .productDetails.siteWidth {
        width: calc(100% - 32px) !important;
        max-width: none;
        margin: 20px auto 0 !important;
    }

    form .productDetailsPage .productSection {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    form .productDetailsPage .productSection > .productImage {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1;
        margin: 0 !important;
        padding: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center;
        background: #fff !important;
        border: 1px solid var(--t2-border);
        border-radius: 12px !important;
    }

    form .productDetailsPage .productSection > .productImage img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    form .productDetailsPage .productDetails.mainSection {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Title: smaller and dark; price: bold theme colour */
    form .productDetailsPage .productDetails.mainSection .productName {
        margin: 0 0 12px !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
        color: var(--t2-text) !important;
    }

    form .productDetailsPage .productDetails.mainSection .productName * {
        font: inherit !important;
        letter-spacing: inherit !important;
        color: inherit !important;
    }

    form .productDetailsPage .productSection .productDetails.mainSection > .price {
        margin: 0 0 20px !important;
    }

    form .productDetailsPage .productSection .productDetails.mainSection > .price .ProductDetailPrice {
        margin: 0 !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: var(--primaryColor) !important;
    }

    form .productDetailsPage .productSection .productDetails.mainSection > .price .ProductDetailPrice * {
        font: inherit !important;
        color: inherit !important;
    }

    /* Quantity first, then a full-width Add to cart */
    form .productDetailsPage .productSection .productDetails.mainSection .cartOptions {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start;
        gap: 10px;
        margin: 0 0 24px !important;
        padding: 0 0 24px !important;
        border-bottom: 1px solid var(--t2-border);
    }

    form .productDetailsPage .productSection .productDetails.mainSection .cartOptions .quantityContainer {
        order: 1;
        flex: none;
        width: 72px !important;
        margin: 0 !important;
        font-size: 0;
    }

    form .productDetailsPage .productSection .productDetails.mainSection .cartOptions .quantityContainer .form-control {
        width: 100% !important;
        height: 48px !important;
        padding: 0 8px !important;
        border: 1px solid var(--t2-border) !important;
        margin: 0 !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        text-align: center;
    }

    form .productDetailsPage .productSection .productDetails.mainSection .cartOptions .btnAndPrice {
        order: 2;
        flex: 1;
        width: auto !important;
        margin: 0 !important;
    }

    form .productDetailsPage .productSection .productDetails.mainSection .cartOptions .btnAndPrice .btn {
        width: 100% !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 20px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: var(--primaryColor) !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-transform: none !important;
    }

    /* Contact for availability: same shape, outlined */
    form .productDetailsPage .productSection .productDetails.mainSection > .btnAndPrice .btn {
        display: inline-flex;
        align-items: center;
        height: 48px;
        padding: 0 20px !important;
        border: 1px solid var(--primaryColor) !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: var(--primaryColor) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    /* Description / Details / Shipping & Returns: plain sections with dividers */
    form .productDetailsPage .productDescriptionBlock {
        margin: 0 0 24px !important;
        padding: 0 0 24px !important;
        background: none !important;
        border-bottom: 1px solid var(--t2-border);
        border-radius: 0 !important;
        font-size: 14px;
        line-height: 1.6;
        color: var(--t2-muted);
    }

    form .productDetailsPage .productDescriptionBlock:last-of-type {
        border-bottom: 0;
    }

    form .productDetailsPage .productPageSectionHeading {
        margin: 0 0 12px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        color: var(--t2-text) !important;
    }

    form .productDetailsPage .productDescription,
    form .productDetailsPage .productNumber,
    form .productDetailsPage .productDimensions,
    form .productDetailsPage .productDimensions p {
        margin: 0 0 4px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: var(--t2-muted) !important;
    }

    form .productDetailsPage .productDimensions p:empty,
    form .productDetailsPage .productDimensions p:has(> span:empty) {
        display: none;
    }

    /* Description HTML from the supplier feed: <b>Heading</b><hr> then "label:value" lines.
       Its <div>s end the <p> early, so the sections sit directly in the block. */
    form .productDetailsPage .productDescriptionBlock b,
    form .productDetailsPage .productDescriptionBlock strong {
        display: inline;
        margin: 0;
        font-size: inherit;
        font-weight: 600;
        color: var(--t2-text);
    }

    form .productDetailsPage .productDescriptionBlock b:has(+ hr),
    form .productDetailsPage .productDescriptionBlock strong:has(+ hr) {
        display: block;
        margin: 18px 0 6px;
        font-size: 15px;
    }

    form .productDetailsPage .productDescriptionBlock > div:first-of-type > b:first-child,
    form .productDetailsPage .productDescriptionBlock .productDescription > span > div:first-child > b:first-child {
        margin-top: 0;
    }

    form .productDetailsPage .productDescriptionBlock hr {
        display: none;
    }

    /* Field labels ("Manufacturer", "Shape"...) in the darker text colour */
    form .productDetailsPage .productDescriptionBlock > div:not([class]) > span,
    form .productDetailsPage .productDescriptionBlock .productDescription div > span {
        font-weight: 600;
        color: #444;
    }

    /* No blank lines after lists and paragraphs inside the description */
    form .productDetailsPage .productDescriptionBlock ul + br,
    form .productDetailsPage .productDescriptionBlock p + br {
        display: none;
    }

    form .productDetailsPage .productDescriptionBlock ul {
        margin: 2px 0 4px !important;
        padding-left: 20px !important;
    }

    form .productDetailsPage .productDescriptionBlock div > p {
        margin: 2px 0 4px !important;
    }

    form .productDetailsPage .productDescriptionBlock a {
        color: var(--primaryColor) !important;
        font-weight: 500;
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }

    /* Similar Products: smaller heading; each card has its own rounded border */
    form .productListPage.UC_RelatedProducts {
        margin: 8px auto 0 !important;
        padding: 8px 0 32px !important;
    }

    form .productListPage.UC_RelatedProducts .sectionHeading {
        width: auto;
        margin: 0 0 16px !important;
        font-size: 22px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        color: var(--t2-text) !important;
    }

    form .productListPage.UC_RelatedProducts .productListContainer {
        width: 100% !important;
        margin: 0 !important;
    }

    form .productListPage.UC_RelatedProducts .productList .productBlock {
        border: 0 !important;
        border-radius: 12px !important;
        box-shadow: inset 0 0 0 1px var(--t2-border) !important;
    }

    form .productListPage.UC_RelatedProducts .productList.owl-carousel .owl-item .productBlock {
        width: calc(100% - 4px) !important;
        margin-left: 2px !important;
    }

    form .productListPage.UC_RelatedProducts .productList .productBlock .productImage {
        height: 180px !important;
    }

    form .productListPage.UC_RelatedProducts .productList .productBlock .productName {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.7em;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        color: var(--t2-text) !important;
    }

    form .productListPage.UC_RelatedProducts .owl-dots .owl-dot span {
        width: 8px;
        height: 8px;
        background: #d5d5d5;
    }

    form .productListPage.UC_RelatedProducts .owl-dots .owl-dot.active span {
        background: var(--primaryColor);
    }
}