/*
    Template 3: shared layout for the five landing-page themes (theme IDs 19-23).
    Loaded after newDesign/StyleSheetNew.min.css, which still styles the inner pages.

    Every rule is scoped to form.template3. Per-theme looks are the form.theme19 ... form.theme23
    blocks at the bottom. --primaryColor is written by MasterPageNew from the store's saved colour.

    Images (see Assets/Images/Templates/README.txt):
      /Assets/Images/Templates/{ThemeID}/hero.jpg, promo.jpg
      /Assets/Images/Templates/Categories/{category-name}.png
*/

/* ---------- Shared tokens ---------- */
form.template3 {
    --headerHeight: 76px;
    --t3-width: 1240px;
    --t3-primary: var(--primaryColor);
    --t3-accent: var(--primaryColor);
    --t3-text: #1f1f1f;
    --t3-muted: #5f5f5f;
    --t3-border: #e3e3e3;
    --t3-surface: #ffffff;
    --t3-page: #ffffff;
    --t3-radius: 8px;
    --t3-heading-font: "Inter", "Mulish", sans-serif;
    --t3-body-font: "Inter", "Mulish", sans-serif;
    --t3-footer-bg: #f5f5f5;
    --t3-footer-text: #333333;
    --t3-footer-muted: #666666;
    color: var(--t3-text);
}

/* :where keeps this at low specificity so heading rules and icon fonts (Font Awesome, Material Symbols) still win. */
form.template3 :where(*:not(.fa):not(.material-symbols-outlined)) {
    font-family: var(--t3-body-font);
}

form.template3:has(.t3-announcement) {
    --headerHeight: 106px;
}

form.template3 .t3-width {
    width: var(--t3-width);
    max-width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
}

form.template3 .pageBg,
form.template3 .pageBg.defaultPage {
    background: var(--t3-page);
}

form.template3 .t3-heading,
form.template3 .t3-hero h1,
form.template3 .t3-promo h2 {
    font-family: var(--t3-heading-font);
}

form.template3 .t3-heading {
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 20px;
    color: var(--t3-text);
}

/* ---------- Buttons ---------- */
form.template3 .t3-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: var(--t3-radius);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 2px solid var(--t3-primary);
    transition: opacity .2s;
}

form.template3 .t3-btn:hover {
    opacity: .85;
}

form.template3 .t3-btn-primary {
    background: var(--t3-primary);
    color: #fff !important;
}

form.template3 .t3-btn-secondary {
    background: transparent;
    color: var(--t3-primary) !important;
}

form.template3 .t3-btn-promo {
    background: #fff;
    border-color: #fff;
    color: var(--t3-text) !important;
    text-transform: none;
}

/* ---------- Header ---------- */
form.template3 header.t3-header {
    height: auto;
    min-height: var(--headerHeight);
    padding: 0;
    background: var(--t3-surface);
    border-bottom: 1px solid var(--t3-border);
}

form.template3 .t3-announcement {
    background: var(--t3-primary);
    color: #fff;
    text-align: center;
    font-size: 13px;
    padding: 6px 16px;
}

form.template3 .t3-header-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo search nav actions";
    align-items: center;
    gap: 24px;
    min-height: var(--headerHeight);
}

form.template3 .t3-logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

form.template3 .t3-logo-img {
    max-height: 48px;
    max-width: 180px;
}

form.template3 .t3-logo-text {
    font-family: var(--t3-heading-font);
    font-size: 24px;
    font-weight: 700;
    color: var(--t3-primary);
    white-space: nowrap;
}

form.template3 .t3-search {
    grid-area: search;
    display: flex;
    align-items: center;
    max-width: 520px;
    width: 100%;
    justify-self: center;
    border: 1px solid var(--t3-border);
    border-radius: var(--t3-radius);
    background: #fff;
    overflow: hidden;
}

form.template3 .t3-search-category {
    display: none;
    border: 0;
    border-right: 1px solid var(--t3-border);
    background: #f7f7f7;
    padding: 0 10px;
    height: 40px;
    max-width: 150px;
    font-size: 13px;
}

form.template3 .t3-search-text {
    flex: 1;
    border: 0;
    outline: 0;
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    min-width: 0;
}

form.template3 .t3-search-btn {
    display: flex;
    align-items: center;
    padding: 0 14px;
    height: 40px;
    color: var(--t3-text);
}

form.template3 .t3-nav {
    grid-area: nav;
}

form.template3 .t3-nav > ul {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

form.template3 .t3-nav a {
    color: var(--t3-text);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

form.template3 .t3-nav a:hover {
    color: var(--t3-primary);
}

form.template3 .t3-nav-shop {
    position: relative;
}

form.template3 .t3-nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: 100;
    min-width: 240px;
    max-height: 70vh;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: #fff;
    border: 1px solid var(--t3-border);
    border-radius: var(--t3-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

/* Opens on click (header script), like the account menu, so a second click or a click elsewhere closes it. */
form.template3 .t3-nav-shop.t3-open .t3-nav-dropdown {
    display: block;
}

form.template3 .t3-nav-shop-toggle:focus {
    outline: none;
}

form.template3 .t3-nav-shop-toggle:focus-visible {
    outline: 2px solid var(--t3-primary);
    outline-offset: 4px;
    border-radius: 2px;
}

form.template3 .t3-nav-dropdown a {
    display: block;
    padding: 8px 16px;
    text-transform: none;
    font-weight: 500;
}

form.template3 .t3-header-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 12px;
}

form.template3 .t3-cart .cart-icon {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    color: var(--t3-text);
}

form.template3 .t3-cart .cs_cartNumber {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--t3-primary);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

form.template3 .t3-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--t3-text);
    cursor: pointer;
}

/* Account: person icon with Sign In / My Account / Logout. None of the designs show these as text links. */
form.template3 .t3-account {
    position: relative;
}

form.template3 .t3-account-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    min-width: 160px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--t3-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

form.template3 .t3-account.t3-open .t3-account-menu {
    display: block;
}

form.template3 .t3-account-menu a {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--t3-text);
    text-decoration: none;
    white-space: nowrap;
}

form.template3 .t3-account-menu a:hover {
    color: var(--t3-primary);
    background: #f6f6f6;
}

form.template3 .t3-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: 0;
    padding: 6px;
    cursor: pointer;
}

form.template3 .t3-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--t3-text);
}

/* ---------- Hero ---------- */
form.template3 .t3-hero {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: center;
}

form.template3 .t3-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

form.template3 .t3-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .75) 40%, rgba(255, 255, 255, 0) 65%);
}

form.template3 .t3-hero-content {
    position: relative;
    z-index: 1;
    padding: 56px 0;
}

form.template3 .t3-hero h1 {
    max-width: 560px;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--t3-text);
}

form.template3 .t3-hero p {
    max-width: 480px;
    font-size: 16px;
    color: var(--t3-muted);
    margin: 0 0 28px;
}

form.template3 .t3-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------- Value tiles ---------- */
form.template3 .t3-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 40px;
    border: 1px solid var(--t3-border);
    border-radius: var(--t3-radius);
    background: var(--t3-surface);
}

form.template3 .t3-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 16px;
    color: var(--t3-primary);
    font-weight: 600;
    font-size: 15px;
}

form.template3 .t3-value + .t3-value {
    border-left: 1px solid var(--t3-border);
}

form.template3 .t3-value svg {
    width: 24px;
    height: 24px;
    flex: none;
}

/* ---------- Categories ---------- */
form.template3 .t3-categories {
    margin-top: 56px;
}

form.template3 .t3-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}

form.template3 .t3-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    text-decoration: none !important;
    color: var(--t3-text) !important;
}

form.template3 .t3-category-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

form.template3 .t3-category-img img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform .2s;
}

form.template3 .t3-category:hover .t3-category-img img {
    transform: scale(1.05);
}

form.template3 .t3-category-name {
    font-size: 14px;
    font-weight: 500;
}

/* ---------- Promo ---------- */
form.template3 .t3-promo {
    position: relative;
    overflow: hidden;
    margin-top: 64px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--t3-radius);
    background: var(--t3-primary);
    color: #fff;
}

form.template3 .t3-promo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

form.template3 .t3-promo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

form.template3 .t3-promo-content {
    position: relative;
    z-index: 1;
    padding: 40px 24px;
    text-align: center;
}

form.template3 .t3-promo h2 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 10px;
    color: #fff;
}

form.template3 .t3-promo h2 .t3-hl {
    display: block;
}

form.template3 .t3-promo p {
    margin: 0 0 20px;
    font-size: 15px;
    color: rgba(255, 255, 255, .9);
}

/* ---------- Featured products ---------- */
form.template3 .t3-featured {
    margin-top: 64px;
}

form.template3 .t3-product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--t3-border);
    border-left: 1px solid var(--t3-border);
}

form.template3 .t3-product {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--t3-surface);
    border-right: 1px solid var(--t3-border);
    border-bottom: 1px solid var(--t3-border);
}

form.template3 .t3-product-img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

form.template3 .t3-product-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* All Template 3 themes: equal-height product image boxes so names, prices and buttons line up
   (a flex column lets the image's own height stretch the 1:1 box) */
form.template3 .t3-product-img {
    min-height: 0;
    overflow: hidden;
}

form.template3 .t3-product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

form.template3 .t3-product-name {
    font-size: 13px;
    line-height: 1.35;
    color: var(--t3-text) !important;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

form.template3 .t3-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

form.template3 .t3-product-price {
    font-weight: 700;
    font-size: 15px;
    color: var(--t3-primary);
}

form.template3 .t3-add-to-cart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--t3-text) !important;
    text-decoration: none !important;
}

form.template3 .t3-add-to-cart:hover {
    color: var(--t3-primary) !important;
}

form.template3 .t3-add-to-cart-text {
    display: none;
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Why choose us ---------- */
form.template3 .t3-why {
    margin-top: 64px;
    margin-bottom: 64px;
}

form.template3 .t3-why-intro {
    max-width: 720px;
    color: var(--t3-muted);
    margin: -8px 0 28px;
}

form.template3 .t3-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

form.template3 .t3-why-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px;
    border: 1px solid var(--t3-border);
    border-radius: var(--t3-radius);
    background: var(--t3-surface);
}

form.template3 .t3-why-item svg {
    width: 36px;
    height: 36px;
    color: var(--t3-primary);
    margin-bottom: 14px;
}

form.template3 .t3-why-item h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--t3-primary);
    margin: 0 0 6px;
}

form.template3 .t3-why-item p {
    font-size: 13px;
    color: var(--t3-muted);
    margin: 0;
}

form.template3 .t3-why-num {
    display: none;
    font-family: var(--t3-heading-font);
    font-size: 28px;
    font-weight: 700;
    color: var(--t3-primary);
    margin-bottom: 10px;
}

/* ---------- Footer ---------- */
form.template3 footer.t3-footer {
    padding: 48px 0 0;
    margin: 0;
    background: var(--t3-footer-bg);
    color: var(--t3-footer-text);
}

form.template3 .t3-footer-columns {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 36px;
}

form.template3 .t3-footer-brand img {
    max-height: 48px;
    max-width: 180px;
}

form.template3 .t3-footer-brand p {
    margin: 14px 0 0;
    max-width: 260px;
    color: var(--t3-footer-muted);
    font-size: 14px;
}

form.template3 .t3-footer-column h2 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 14px;
    color: var(--t3-footer-text);
}

form.template3 .t3-footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

form.template3 .t3-footer-column li {
    margin-bottom: 8px;
}

form.template3 .t3-footer a {
    color: var(--t3-footer-muted) !important;
    font-size: 14px;
    text-decoration: none;
}

form.template3 .t3-footer a:hover {
    color: var(--t3-footer-text) !important;
}

form.template3 .t3-footer-bottom {
    background: #fff;
    color: #333;
    font-size: 13px;
}

form.template3 .t3-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}

form.template3 .t3-powered,
form.template3 .t3-payments {
    display: flex;
    align-items: center;
    gap: 12px;
}

form.template3 .t3-powered img {
    height: 22px;
}

form.template3 .t3-payments img {
    height: 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    form.template3 .t3-category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    form.template3 .t3-product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1023px) {
    form.template3 {
        --headerHeight: 112px;
    }

    form.template3:has(.t3-announcement) {
        --headerHeight: 142px;
    }

    form.template3 .t3-header-main {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "logo . actions"
            "search search search";
        gap: 10px 16px;
        padding: 10px 0;
    }

    form.template3 .t3-search {
        max-width: none;
    }

    form.template3 .t3-menu-toggle {
        display: flex;
    }

    form.template3 .t3-nav {
        display: none;
        grid-column: 1 / -1;
        grid-row: 3;
    }

    form.template3 .t3-header.t3-menu-open .t3-nav {
        display: block;
    }

    form.template3 .t3-nav > ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    form.template3 .t3-nav > ul > li {
        width: 100%;
        border-top: 1px solid var(--t3-border);
    }

    form.template3 .t3-nav > ul > li > a {
        display: block;
        padding: 12px 0;
    }

    form.template3 .t3-nav-dropdown {
        position: static;
        box-shadow: none;
        border: 0;
        max-height: none;
        padding: 0 0 8px 12px;
    }

    form.template3 .t3-nav-shop:hover .t3-nav-dropdown {
        display: none;
    }

    form.template3 .t3-nav-shop.t3-open .t3-nav-dropdown {
        display: block;
    }

    form.template3 .t3-hero {
        min-height: 340px;
    }

    form.template3 .t3-hero h1 {
        font-size: 34px;
    }

    form.template3 .t3-values {
        grid-template-columns: repeat(2, 1fr);
    }

    form.template3 .t3-value:nth-child(3) {
        border-left: 0;
    }

    form.template3 .t3-value:nth-child(n+3) {
        border-top: 1px solid var(--t3-border);
    }

    form.template3 .t3-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    form.template3 .t3-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    form.template3 .t3-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    form.template3 .t3-footer-columns {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    form.template3 .t3-hero {
        min-height: 300px;
    }

    form.template3 .t3-hero::after {
        background: rgba(255, 255, 255, .8);
    }

    form.template3 .t3-hero h1 {
        font-size: 28px;
    }

    form.template3 .t3-values {
        grid-template-columns: 1fr;
    }

    form.template3 .t3-value {
        justify-content: flex-start;
    }

    form.template3 .t3-value + .t3-value {
        border-left: 0;
        border-top: 1px solid var(--t3-border);
    }

    form.template3 .t3-category-grid,
    form.template3 .t3-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    form.template3 .t3-promo h2 {
        font-size: 24px;
    }

    form.template3 .t3-why-grid,
    form.template3 .t3-footer-columns {
        grid-template-columns: 1fr;
    }

    form.template3 .t3-footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* =====================================================================
   Theme 19 - Landing Page 1 (teal)
   Announcement bar, category dropdown in search, rounded hero, circle
   categories, gradient promo strip, one-card "Why choose us".
   ===================================================================== */
form.theme19 {
    --t3-accent: #3ba776;
    --t3-radius: 10px;
    /* Landing Page 1 tint behind Categories, the promo, Featured Products and Why Choose Us
       (5% of the store colour; the design's #f2f7f7 for the Teal default). */
    --t3-tint: color-mix(in srgb, var(--t3-primary) 5%, #fff);
}

/* Header: teal top line, search centred on the page as a pill with a round button, tinted round icons. */
form.theme19 {
    --headerHeight: 110px;
}

form.theme19:has(.t3-announcement) {
    --headerHeight: 140px;
}

form.theme19 header.t3-header {
    border-top: 3px solid var(--t3-primary);
}

form.theme19 .t3-header-main {
    position: relative;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "logo . nav actions";
    gap: 32px;
    min-height: 107px;
}

form.theme19 .t3-search {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 415px;
    max-width: 415px;
    height: 44px;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--t3-primary) 10%, #e6e6e6);
    border-radius: 999px;
}

form.theme19 .t3-search-category {
    display: block;
    flex: none;
    height: 38px;
    max-width: 150px;
    padding: 0 34px 0 16px;
    border: 0;
    border-radius: 999px;
    -webkit-appearance: none;
    appearance: none;
    background: color-mix(in srgb, var(--t3-primary) 9%, #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;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

form.theme19 .t3-search-text {
    height: 38px;
    padding: 0 12px;
    font-size: 14px;
}

form.theme19 .t3-search-btn {
    flex: none;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    background: var(--t3-primary);
    color: #fff;
}

form.theme19 .t3-nav > ul {
    gap: 32px;
}

form.theme19 .t3-nav > ul > li > a {
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
    color: #1a1a1a;
}

form.theme19 .t3-header-actions {
    gap: 10px;
}

form.theme19 .t3-icon-btn {
    width: 44px;
    height: 44px;
    background: color-mix(in srgb, var(--t3-primary) 8%, #fff);
    color: #1a1a1a;
}

form.theme19 .t3-cart .cs_cartNumber {
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 11px;
}

/* Value tiles: four separate tinted cards, icon above a dark label. */
form.theme19 .t3-values {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    border: 0;
    border-radius: 0;
    background: none;
}

form.theme19 .t3-values .t3-value {
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    min-height: 128px;
    padding: 24px 16px;
    text-align: center;
    background: color-mix(in srgb, var(--t3-primary) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--t3-primary) 12%, #fff);
    border-radius: 14px;
    color: #111;
    font-size: 17px;
    font-weight: 600;
}

form.theme19 .t3-values .t3-value svg {
    width: 30px;
    height: 30px;
    color: var(--t3-primary);
}

/* Hero: rounded photo card, light large headline, pill buttons. */
form.theme19 .t3-hero {
    width: var(--t3-width);
    max-width: calc(100% - 32px);
    min-height: 470px;
    margin: 24px auto 0;
    border-radius: 22px;
}

form.theme19 .t3-hero::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .38) 45%, rgba(0, 0, 0, 0) 72%);
}

form.theme19 .t3-hero-content {
    padding: 56px 40px;
}

form.theme19 .t3-hero h1 {
    max-width: 540px;
    margin-bottom: 36px;
    font-size: 60px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #fff;
}

form.theme19 .t3-hero h1 .t3-hl {
    display: block;
}

form.theme19 .t3-hero p {
    max-width: 420px;
    margin-bottom: 40px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
}

form.theme19 .t3-hero-buttons {
    gap: 10px;
}

form.theme19 .t3-hero .t3-btn {
    padding: 14px 23px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
}

form.theme19 .t3-hero .t3-btn-secondary {
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Categories: uppercase heading, white circles with a thin border on the tint, black labels.
   The tint starts 40px below the value tiles and runs on under the promo banner. */
form.theme19 .t3-categories {
    position: relative;
    margin-top: 96px;
}

form.theme19 .t3-categories::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -56px;
    bottom: -133px;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background: var(--t3-tint);
}

form.theme19 .t3-categories .t3-heading {
    margin: 0 0 38px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #000;
}

form.theme19 .t3-category-grid {
    gap: 40px 20px;
}

form.theme19 .t3-category {
    gap: 8px;
}

form.theme19 .t3-category-img {
    box-sizing: border-box;
    padding: 12.2%;
    border: 1px solid #e4e7e9;
    border-radius: 50%;
    background: #fff;
}

/* Product cut-outs sit centred inside the circle. */
form.theme19 .t3-category-img img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

/* Stand-in scene photos (from /Assets/Images/MainCategories) fill the whole circle. */
form.theme19 .t3-category-img:has(.t3-category-photo) {
    padding: 0;
}

form.theme19 .t3-category-img img.t3-category-photo {
    object-fit: cover;
}

form.theme19 .t3-category-name {
    font-size: 17px;
    font-weight: 500;
    line-height: 20px;
    color: #000;
}

/* Promo: the design's olive-to-teal gradient, 32px headline, white Learn More button. */
form.theme19 .t3-promo {
    margin-top: 113px;
    min-height: 134px;
    justify-content: space-between;
    border-radius: 12px;
    background: radial-gradient(ellipse 1126px 290px at 153px 23px, #678429 0%, #13543c 55.48%, #128372 100%);
    /* Tint beside the banner (clipped to its height), so the band from Categories runs on into Featured. */
    box-shadow: 0 0 0 100vmax var(--t3-tint);
    clip-path: inset(0 -100vmax);
}

form.theme19 .t3-promo-img,
form.theme19 .t3-promo::after {
    display: none;
}

form.theme19 .t3-promo-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title button" "text button";
    align-items: center;
    text-align: left;
    padding: 33px 32px 32px;
}

form.theme19 .t3-promo h2 {
    grid-area: title;
    margin: 0 0 7px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: capitalize;
}

form.theme19 .t3-promo h2 .t3-hl {
    display: inline;
}

form.theme19 .t3-promo p {
    grid-area: text;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.35px;
    text-transform: capitalize;
    color: #fff;
}

form.theme19 .t3-promo .t3-btn {
    grid-area: button;
    justify-content: flex-start;
    gap: 9px;
    width: 176px;
    height: 44px;
    padding: 0 0 0 32px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    color: var(--t3-primary) !important;
}

form.theme19 .t3-promo .t3-btn span {
    width: 12px;
    height: 12px;
    font-size: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9.78 3.1L2.01 10.87C1.89 10.99 1.75 11.04 1.57 11.04C1.4 11.04 1.25 10.98 1.14 10.86C1.02 10.75 0.96 10.6 0.96 10.43C0.96 10.26 1.02 10.12 1.14 10L8.91 2.22L2.07 2.22C1.9 2.22 1.75 2.16 1.63 2.04C1.51 1.92 1.45 1.78 1.45 1.6C1.45 1.42 1.51 1.27 1.63 1.15C1.75 1.03 1.9 0.97 2.07 0.97L10.28 0.97C10.49 0.97 10.67 1.05 10.82 1.19C10.96 1.34 11.03 1.51 11.03 1.73L11.03 9.93C11.03 10.11 10.97 10.26 10.85 10.38C10.73 10.5 10.59 10.56 10.41 10.56C10.23 10.56 10.08 10.5 9.96 10.38C9.84 10.26 9.78 10.11 9.78 9.93L9.78 3.1Z'/%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 12 12'%3E%3Cpath d='M9.78 3.1L2.01 10.87C1.89 10.99 1.75 11.04 1.57 11.04C1.4 11.04 1.25 10.98 1.14 10.86C1.02 10.75 0.96 10.6 0.96 10.43C0.96 10.26 1.02 10.12 1.14 10L8.91 2.22L2.07 2.22C1.9 2.22 1.75 2.16 1.63 2.04C1.51 1.92 1.45 1.78 1.45 1.6C1.45 1.42 1.51 1.27 1.63 1.15C1.75 1.03 1.9 0.97 2.07 0.97L10.28 0.97C10.49 0.97 10.67 1.05 10.82 1.19C10.96 1.34 11.03 1.51 11.03 1.73L11.03 9.93C11.03 10.11 10.97 10.26 10.85 10.38C10.73 10.5 10.59 10.56 10.41 10.56C10.23 10.56 10.08 10.5 9.96 10.38C9.84 10.26 9.78 10.11 9.78 9.93L9.78 3.1Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Why Choose Us: white rounded card on a full-width tinted band, items in a row with dividers */
/* Full-width tinted band behind the card (drawn by ::before, clipped to the page width) */
form.theme19 .t3-home {
    position: relative;
    z-index: 0;
    overflow-x: clip;
}

form.theme19 .t3-why {
    position: relative;
    margin: 112px auto 48px;
    padding: 48px 40px;
    background: #fff;
    border: 1px solid var(--t3-border);
    border-radius: 18px;
}

form.theme19 .t3-why::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -48px;
    bottom: -48px;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background: var(--t3-tint);
}

form.theme19 .t3-why .t3-heading {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--t3-text);
}

form.theme19 .t3-why .t3-hl {
    color: inherit;
}

form.theme19 .t3-why-intro {
    max-width: 660px;
    margin: 0 0 48px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--t3-text);
}

/* Four items in one row, separated by thin vertical dividers */
form.theme19 .t3-why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 0;
    border-radius: 0;
}

form.theme19 .t3-why-item,
form.theme19 .t3-why-item + .t3-why-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon title"
        ".    text";
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    align-content: start;
    padding: 2px 20px;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 0;
}

form.theme19 .t3-why-item:first-child {
    padding-left: 0;
}

form.theme19 .t3-why-item + .t3-why-item {
    border-left: 1px solid var(--t3-border);
}

form.theme19 .t3-why-item svg {
    grid-area: icon;
    width: 20px;
    height: 20px;
    margin: 0;
    color: var(--t3-primary);
}

form.theme19 .t3-why-item h3 {
    grid-area: title;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--t3-text);
}

form.theme19 .t3-why-item p {
    grid-area: text;
    width: auto;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    text-transform: capitalize;
    color: var(--t3-muted);
}

form.theme19 .t3-why-num {
    display: none;
}

/* Tablet: 2 x 2 */
@media (max-width: 1023px) {
    form.theme19 .t3-why {
        padding: 36px 28px;
    }

    form.theme19 .t3-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 28px;
    }

    form.theme19 .t3-why-item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
}

/* Phone: one per row, dividers between rows */
@media (max-width: 767px) {
    form.theme19 .t3-why {
        margin-top: 88px;
        padding: 28px 20px;
    }

    form.theme19 .t3-why-intro {
        margin-bottom: 28px;
        font-size: 15px;
    }

    form.theme19 .t3-why-grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    form.theme19 .t3-why-item,
    form.theme19 .t3-why-item + .t3-why-item {
        padding: 16px 0;
        border-left: 0;
    }

    form.theme19 .t3-why-item + .t3-why-item {
        border-top: 1px solid var(--t3-border);
    }
}

/* Footer: white top with brand + link columns, tinted bottom bar (Powered by | copyright | payments) */
form.theme19 footer.t3-footer {
    padding: 44px 0 0;
    background: #fff;
    color: var(--t3-text);
}

form.theme19 .t3-footer-columns {
    grid-template-columns: 1.5fr 1fr 1fr auto;
    gap: 32px;
    padding-bottom: 52px;
}

form.theme19 .t3-footer-brand .t3-logo img {
    max-height: 40px;
}

form.theme19 .t3-footer-brand .t3-logo-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--t3-primary);
}

form.theme19 .t3-footer-brand p {
    max-width: 230px;
    margin: 24px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--t3-text);
}

form.theme19 .t3-footer-column h2 {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--t3-text);
}

/* The design sets only "CONTACT INFORMATION" in capitals */
form.theme19 .t3-footer-column:last-child h2 {
    text-transform: uppercase;
}

form.theme19 .t3-footer-column li {
    margin-bottom: 8px;
}

form.theme19 .t3-footer a {
    font-size: 13px;
    color: var(--t3-muted) !important;
}

form.theme19 .t3-footer a:hover {
    color: var(--t3-primary) !important;
}

/* Bottom bar: Powered by | copyright | payment icons */
form.theme19 .t3-footer-bottom {
    background: color-mix(in srgb, var(--t3-primary) 6%, #fff);
}

form.theme19 .t3-footer-bottom-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 22px 0;
}

form.theme19 .t3-powered {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 10px;
    font-weight: 500;
    color: var(--t3-text);
}

form.theme19 .t3-powered img {
    height: 24px;
}

form.theme19 .t3-copyright {
    order: 2;
    font-size: 13px;
    color: var(--t3-muted);
}

form.theme19 .t3-copyright strong {
    font-weight: 700;
    color: var(--t3-text);
}

form.theme19 .t3-payments {
    order: 3;
    justify-self: end;
    gap: 16px;
}

form.theme19 .t3-payments img {
    height: 18px;
}

@media (max-width: 1023px) {
    form.theme19 .t3-footer-columns {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    form.theme19 .t3-footer-columns {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    form.theme19 .t3-footer-bottom-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    form.theme19 .t3-powered {
        align-items: center;
    }

    form.theme19 .t3-payments {
        justify-self: center;
    }
}

/* Let the Why Choose Us band run straight into the footer (the page wrapper adds 25px bottom padding) */
form.theme19:has(.t3-home) .cs_body {
    padding-bottom: 0 !important;
}

@media (max-width: 1023px) {
    form.theme19 {
        --headerHeight: 128px;
    }

    form.theme19:has(.t3-announcement) {
        --headerHeight: 158px;
    }

    form.theme19 .t3-header-main {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "logo . actions"
            "search search search";
        gap: 10px 16px;
        min-height: 0;
    }

    form.theme19 .t3-search {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
    }

    form.theme19 .t3-values {
        grid-template-columns: repeat(2, 1fr);
    }

    form.theme19 .t3-hero {
        min-height: 400px;
    }

    form.theme19 .t3-hero h1 {
        font-size: 46px;
        margin-bottom: 24px;
    }

    form.theme19 .t3-hero p {
        margin-bottom: 28px;
    }
}

@media (max-width: 767px) {
    form.theme19 .t3-search-category {
        display: none;
    }

    form.theme19 .t3-values {
        gap: 12px;
    }

    form.theme19 .t3-values .t3-value {
        justify-content: center;
        gap: 14px;
        min-height: 110px;
        padding: 18px 12px;
        font-size: 15px;
    }

    form.theme19 .t3-hero {
        min-height: 340px;
        border-radius: 16px;
    }

    form.theme19 .t3-hero::after {
        background: linear-gradient(90deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .45) 100%);
    }

    form.theme19 .t3-hero-content {
        padding: 36px 24px;
    }

    form.theme19 .t3-hero h1 {
        font-size: 34px;
        margin-bottom: 16px;
    }

    form.theme19 .t3-hero p {
        font-size: 15px;
        margin-bottom: 24px;
    }

    form.theme19 .t3-categories {
        margin-top: 72px;
    }

    form.theme19 .t3-categories::before {
        top: -40px;
        bottom: -84px;
    }

    form.theme19 .t3-categories .t3-heading {
        margin-bottom: 24px;
        font-size: 20px;
    }

    form.theme19 .t3-category-grid {
        gap: 24px 16px;
    }

    form.theme19 .t3-category-name {
        font-size: 15px;
    }

    form.theme19 .t3-promo {
        margin-top: 64px;
    }

    form.theme19 .t3-promo-content {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "text" "button";
        gap: 12px;
        padding: 28px 24px;
    }

    form.theme19 .t3-promo h2 {
        font-size: 24px;
    }

    form.theme19 .t3-promo p {
        font-size: 15px;
    }
}

/* Featured Products (Landing Page 1): separate white rounded cards on a
   full-width tinted band that starts under the promo (so the tint from Categories is
   continuous whatever the promo's height) and runs into the Why Choose Us band below;
   uppercase heading, black name and price, teal add-to-cart icon. */
form.theme19 .t3-featured {
    position: relative;
    margin-top: 117px;
}

form.theme19 .t3-featured::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -137px;
    bottom: -65px; /* 1px overlap with the Why Choose Us band, so no seam */
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background: var(--t3-tint);
}

form.theme19 .t3-featured .t3-heading {
    margin: 0 0 42px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #000;
}

form.theme19 .t3-product-grid {
    gap: 40px 25px;
    border: 0;
}

form.theme19 .t3-product {
    gap: 0;
    padding: 21px 16px 20px;
    border: 1px solid #dbdfe3;
    border-radius: 12px;
    background: #fff;
}

form.theme19 .t3-product-img {
    aspect-ratio: auto;
    height: 184px;
}

form.theme19 .t3-product-name {
    margin-top: 24px;
    font-size: 14px;
    line-height: 21px;
    min-height: 42px;
    color: #000 !important;
}

form.theme19 .t3-product-footer {
    margin-top: 13px;
}

form.theme19 .t3-product-price {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #000;
}

/* Add-to-cart: the design's cart-with-plus icon in the theme colour */
form.theme19 .t3-add-to-cart svg {
    display: none;
}

form.theme19 .t3-add-to-cart::before {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--t3-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.17 6L7.5 6C7.26 6 7.06 5.92 6.9 5.76C6.75 5.6 6.67 5.4 6.67 5.16C6.67 4.93 6.75 4.73 6.9 4.57C7.06 4.41 7.26 4.33 7.5 4.33L9.17 4.33L9.17 2.66C9.17 2.43 9.25 2.23 9.4 2.07C9.56 1.91 9.76 1.83 10 1.83C10.23 1.83 10.43 1.91 10.59 2.07C10.75 2.23 10.83 2.43 10.83 2.66L10.83 4.33L12.5 4.33C12.73 4.33 12.93 4.41 13.09 4.57C13.25 4.73 13.33 4.93 13.33 5.16C13.33 5.4 13.25 5.6 13.09 5.76C12.93 5.92 12.73 6 12.5 6L10.83 6L10.83 7.66C10.83 7.9 10.75 8.1 10.59 8.26C10.43 8.42 10.23 8.5 10 8.5C9.76 8.5 9.56 8.42 9.4 8.26C9.25 8.1 9.17 7.9 9.17 7.66L9.17 6ZM4.65 18.84C4.33 18.52 4.17 18.12 4.17 17.66C4.17 17.21 4.33 16.81 4.65 16.49C4.98 16.16 5.37 16 5.83 16C6.29 16 6.68 16.16 7.01 16.49C7.34 16.81 7.5 17.21 7.5 17.66C7.5 18.12 7.34 18.52 7.01 18.84C6.68 19.17 6.29 19.33 5.83 19.33C5.37 19.33 4.98 19.17 4.65 18.84ZM12.99 18.84C12.66 18.52 12.5 18.12 12.5 17.66C12.5 17.21 12.66 16.81 12.99 16.49C13.31 16.16 13.71 16 14.17 16C14.62 16 15.02 16.16 15.34 16.49C15.67 16.81 15.83 17.21 15.83 17.66C15.83 18.12 15.67 18.52 15.34 18.84C15.02 19.17 14.62 19.33 14.17 19.33C13.71 19.33 13.31 19.17 12.99 18.84ZM2.5 4.33L1.67 4.33C1.43 4.33 1.23 4.25 1.07 4.09C0.91 3.93 0.83 3.73 0.83 3.5C0.83 3.26 0.91 3.06 1.07 2.9C1.23 2.74 1.43 2.66 1.67 2.66L3.04 2.66C3.19 2.66 3.34 2.71 3.48 2.79C3.62 2.87 3.72 2.99 3.79 3.14L7.1 10.16L12.94 10.16L15.96 4.75C16.03 4.61 16.12 4.5 16.25 4.44C16.37 4.37 16.51 4.33 16.67 4.33C16.98 4.33 17.22 4.47 17.38 4.74C17.54 5.01 17.55 5.28 17.39 5.56L14.42 10.96C14.26 11.23 14.06 11.45 13.8 11.6C13.54 11.75 13.26 11.83 12.96 11.83L6.75 11.83L5.83 13.5L15 13.5C15.23 13.5 15.43 13.58 15.59 13.74C15.75 13.9 15.83 14.1 15.83 14.33C15.83 14.57 15.75 14.77 15.59 14.93C15.43 15.08 15.23 15.16 15 15.16L5.83 15.16C5.21 15.16 4.73 14.89 4.4 14.35C4.08 13.81 4.07 13.26 4.37 12.71L5.5 10.66L2.5 4.33Z'/%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 20 20'%3E%3Cpath d='M9.17 6L7.5 6C7.26 6 7.06 5.92 6.9 5.76C6.75 5.6 6.67 5.4 6.67 5.16C6.67 4.93 6.75 4.73 6.9 4.57C7.06 4.41 7.26 4.33 7.5 4.33L9.17 4.33L9.17 2.66C9.17 2.43 9.25 2.23 9.4 2.07C9.56 1.91 9.76 1.83 10 1.83C10.23 1.83 10.43 1.91 10.59 2.07C10.75 2.23 10.83 2.43 10.83 2.66L10.83 4.33L12.5 4.33C12.73 4.33 12.93 4.41 13.09 4.57C13.25 4.73 13.33 4.93 13.33 5.16C13.33 5.4 13.25 5.6 13.09 5.76C12.93 5.92 12.73 6 12.5 6L10.83 6L10.83 7.66C10.83 7.9 10.75 8.1 10.59 8.26C10.43 8.42 10.23 8.5 10 8.5C9.76 8.5 9.56 8.42 9.4 8.26C9.25 8.1 9.17 7.9 9.17 7.66L9.17 6ZM4.65 18.84C4.33 18.52 4.17 18.12 4.17 17.66C4.17 17.21 4.33 16.81 4.65 16.49C4.98 16.16 5.37 16 5.83 16C6.29 16 6.68 16.16 7.01 16.49C7.34 16.81 7.5 17.21 7.5 17.66C7.5 18.12 7.34 18.52 7.01 18.84C6.68 19.17 6.29 19.33 5.83 19.33C5.37 19.33 4.98 19.17 4.65 18.84ZM12.99 18.84C12.66 18.52 12.5 18.12 12.5 17.66C12.5 17.21 12.66 16.81 12.99 16.49C13.31 16.16 13.71 16 14.17 16C14.62 16 15.02 16.16 15.34 16.49C15.67 16.81 15.83 17.21 15.83 17.66C15.83 18.12 15.67 18.52 15.34 18.84C15.02 19.17 14.62 19.33 14.17 19.33C13.71 19.33 13.31 19.17 12.99 18.84ZM2.5 4.33L1.67 4.33C1.43 4.33 1.23 4.25 1.07 4.09C0.91 3.93 0.83 3.73 0.83 3.5C0.83 3.26 0.91 3.06 1.07 2.9C1.23 2.74 1.43 2.66 1.67 2.66L3.04 2.66C3.19 2.66 3.34 2.71 3.48 2.79C3.62 2.87 3.72 2.99 3.79 3.14L7.1 10.16L12.94 10.16L15.96 4.75C16.03 4.61 16.12 4.5 16.25 4.44C16.37 4.37 16.51 4.33 16.67 4.33C16.98 4.33 17.22 4.47 17.38 4.74C17.54 5.01 17.55 5.28 17.39 5.56L14.42 10.96C14.26 11.23 14.06 11.45 13.8 11.6C13.54 11.75 13.26 11.83 12.96 11.83L6.75 11.83L5.83 13.5L15 13.5C15.23 13.5 15.43 13.58 15.59 13.74C15.75 13.9 15.83 14.1 15.83 14.33C15.83 14.57 15.75 14.77 15.59 14.93C15.43 15.08 15.23 15.16 15 15.16L5.83 15.16C5.21 15.16 4.73 14.89 4.4 14.35C4.08 13.81 4.07 13.26 4.37 12.71L5.5 10.66L2.5 4.33Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

form.theme19 .t3-add-to-cart:hover::before {
    background: var(--t3-text);
}

@media (max-width: 1199px) {
    form.theme19 .t3-product-grid {
        gap: 32px 20px;
    }
}

@media (max-width: 767px) {
    form.theme19 .t3-featured {
        margin-top: 80px;
    }

    form.theme19 .t3-featured::before {
        top: -100px;
    }

    form.theme19 .t3-featured .t3-heading {
        margin-bottom: 24px;
        font-size: 20px;
    }

    form.theme19 .t3-product-grid {
        gap: 16px 12px;
    }

    form.theme19 .t3-product {
        padding: 16px 12px 14px;
    }

    form.theme19 .t3-product-img {
        height: 138px;
    }

    form.theme19 .t3-product-name {
        margin-top: 14px;
        font-size: 13px;
        line-height: 19px;
        min-height: 38px;
    }

    form.theme19 .t3-product-footer {
        margin-top: 10px;
    }

    form.theme19 .t3-product-price {
        font-size: 15px;
    }
}

/* =====================================================================
   Theme 20 - Landing Page 2 (indigo)
   Links beside the logo, plain search + round button on the right; light
   full-width hero with bold headline and indigo last line; lavender value
   cards; white circle category images; dark indigo promo banner; bordered
   product cards with "ADD TO CART" text buttons; bordered Why Choose Us
   cards; lavender footer.
   ===================================================================== */
form.theme20 {
    --t3-accent: #2a1e5c;
    --t3-radius: 10px;
    --t3-tint: color-mix(in srgb, var(--t3-primary) 5%, #fff);
}

/* ---------- Header ---------- */
form.theme20 header.t3-header {
    border-bottom: 0;
}

form.theme20 .t3-header-main {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "logo nav search actions";
    gap: 48px;
}

form.theme20 .t3-nav > ul {
    gap: 28px;
}

form.theme20 .t3-nav > ul > li > a {
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: #1a1a1a;
}

form.theme20 .t3-search {
    justify-self: end;
    max-width: 320px;
    border: 0;
    background: transparent;
}

form.theme20 .t3-search-text {
    text-align: right;
    font-size: 13px;
    color: #555;
}

form.theme20 .t3-search-btn {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: #f1f1f4;
    color: #1a1a1a;
}

form.theme20 .t3-header-actions {
    gap: 6px;
}

form.theme20 .t3-cart .cs_cartNumber {
    background: #e5372f;
}

/* ---------- Hero: light full-width band, photo on the right ---------- */
form.theme20 .t3-hero {
    min-height: 570px;
    background: linear-gradient(90deg, #fff 0%, #f4f4f7 100%);
}

form.theme20 .t3-hero-img {
    left: auto;
    width: 58%;
    object-fit: cover;
}

form.theme20 .t3-hero::after {
    background: linear-gradient(90deg, #fff 42%, rgba(255, 255, 255, 0) 60%);
}

form.theme20 .t3-hero h1 {
    max-width: 640px;
    margin-bottom: 26px;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #111;
}

form.theme20 .t3-hero h1 .t3-hl {
    display: block;
    color: var(--t3-primary);
}

form.theme20 .t3-hero p {
    max-width: none;
    margin-bottom: 36px;
    font-size: 17px;
    line-height: 1.5;
    text-transform: capitalize;
    color: #333;
}

form.theme20 .t3-hero-buttons {
    gap: 10px;
}

form.theme20 .t3-hero .t3-btn {
    height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
}

form.theme20 .t3-hero .t3-btn-secondary {
    background: #fff;
    border: 1px solid #e6e6ee;
    color: #111 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

/* ---------- Value tiles: four lavender cards ---------- */
form.theme20 .t3-values {
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    margin-top: 56px;
    border: 0;
    border-radius: 0;
    background: none;
}

form.theme20 .t3-values .t3-value {
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    min-height: 140px;
    padding: 24px 16px;
    text-align: center;
    background: var(--t3-tint);
    border: 1px solid color-mix(in srgb, var(--t3-primary) 6%, #fff);
    border-radius: var(--t3-radius);
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 500;
}

form.theme20 .t3-values .t3-value svg {
    width: 30px;
    height: 30px;
    color: var(--t3-primary);
}

/* ---------- Categories: product image in a white circle ---------- */
form.theme20 .t3-categories {
    margin-top: 88px;
}

form.theme20 .t3-heading {
    font-size: 26px;
    font-weight: 600;
}

form.theme20 .t3-category-grid {
    row-gap: 40px;
}

form.theme20 .t3-category {
    gap: 14px;
}

form.theme20 .t3-category-img {
    width: 116px;
    height: 116px;
    aspect-ratio: auto;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}

form.theme20 .t3-category-img img {
    max-width: 68%;
    max-height: 68%;
}

/* Stand-in scene photos fill the circle */
form.theme20 .t3-category-img img.t3-category-photo {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

form.theme20 .t3-category-name {
    font-size: 15px;
    font-weight: 500;
}

/* ---------- Promo: dark indigo banner, text left, photo right ---------- */
form.theme20 .t3-promo {
    min-height: 264px;
    margin-top: 100px;
    justify-content: flex-start;
    background: var(--t3-accent);
    border-radius: var(--t3-radius);
}

form.theme20 .t3-promo-img {
    left: auto;
    width: 62%;
}

form.theme20 .t3-promo::after {
    background: linear-gradient(90deg, var(--t3-accent) 38%, color-mix(in srgb, var(--t3-primary) 70%, transparent) 62%, rgba(42, 30, 92, .15) 100%);
}

form.theme20 .t3-promo-content {
    max-width: 560px;
    padding: 40px 34px;
    text-align: left;
}

form.theme20 .t3-promo h2 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
}

form.theme20 .t3-promo p {
    max-width: 420px;
    margin: 12px 0 24px;
    font-size: 15px;
    line-height: 1.5;
    text-transform: capitalize;
}

form.theme20 .t3-btn-promo {
    height: 42px;
    padding: 0 30px;
    border: 0;
    border-radius: 4px;
    background: #0f0b2e;
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
}

/* ---------- Featured products: separate bordered cards, text button ---------- */
form.theme20 .t3-featured {
    margin-top: 100px;
}

form.theme20 .t3-product-grid {
    gap: 14px;
    border: 0;
}

form.theme20 .t3-product {
    padding: 20px 14px;
    border: 1px solid #e8e8ef;
    border-radius: 8px;
}

/* Slightly taller cards: the image area is 12% taller than it is wide. */
form.theme20 .t3-product-img {
    aspect-ratio: 1 / 1.12;
}

form.theme20 .t3-product-price {
    font-size: 15px;
}

form.theme20 .t3-add-to-cart svg {
    display: none;
}

form.theme20 .t3-add-to-cart-text {
    display: inline;
    padding: 4px 10px;
    border: 1px solid #cfcfd8;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

form.theme20 .t3-add-to-cart:hover .t3-add-to-cart-text {
    border-color: var(--t3-primary);
}

/* ---------- Why Choose Us: four bordered cards ---------- */
form.theme20 .t3-why {
    margin-top: 100px;
    margin-bottom: 88px;
}

form.theme20 .t3-why-intro {
    max-width: 520px;
    margin: 0 0 40px;
    font-size: 13px;
    line-height: 1.5;
    text-transform: capitalize;
    color: #333;
}

form.theme20 .t3-why-grid {
    gap: 16px;
}

form.theme20 .t3-why-item {
    padding: 32px 20px;
    border: 1px solid #e6e6ee;
    border-radius: 8px;
}

form.theme20 .t3-why-item svg {
    width: 34px;
    height: 34px;
}

form.theme20 .t3-why-item h3 {
    font-size: 16px;
    color: #1a1a1a;
}

form.theme20 .t3-why-item p {
    font-size: 12px;
    text-transform: capitalize;
}

/* ---------- Footer: lavender, divider above the bottom row ---------- */
form.theme20 footer.t3-footer {
    padding: 64px 0 0;
    background: color-mix(in srgb, var(--t3-primary) 10%, #fff);
    color: #1a1a1a;
}

form.theme20 .t3-footer-columns {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding-bottom: 56px;
}

form.theme20 .t3-footer-brand .t3-logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--t3-primary);
}

form.theme20 .t3-footer-brand p {
    max-width: 200px;
    font-size: 13px;
    color: #1a1a1a;
}

form.theme20 .t3-footer-column h2 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #1a1a1a;
}

form.theme20 .t3-footer a {
    font-size: 13px;
    color: #555 !important;
}

form.theme20 .t3-footer a:hover {
    color: var(--t3-primary) !important;
}

form.theme20 .t3-footer-bottom {
    background: transparent;
}

form.theme20 .t3-footer-bottom-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 22px 0 28px;
    border-top: 1px solid rgba(0, 0, 0, .18);
}

form.theme20 .t3-copyright {
    order: 1;
    font-size: 12px;
    color: #555;
}

form.theme20 .t3-copyright strong {
    color: #1a1a1a;
}

form.theme20 .t3-powered {
    order: 2;
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a;
}

form.theme20 .t3-payments {
    order: 3;
    justify-self: end;
    gap: 14px;
}

form.theme20 .t3-payments img {
    height: 18px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    form.theme20 .t3-header-main {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "logo . actions"
            "search search search";
        gap: 10px 16px;
    }

    form.theme20 .t3-search {
        max-width: none;
        border: 1px solid var(--t3-border);
        border-radius: 999px;
    }

    form.theme20 .t3-search-text {
        text-align: left;
    }

    form.theme20 .t3-hero {
        min-height: 440px;
    }

    form.theme20 .t3-hero-img {
        width: 100%;
    }

    form.theme20 .t3-hero::after {
        background: rgba(255, 255, 255, .85);
    }

    form.theme20 .t3-hero h1 {
        font-size: 46px;
    }

    form.theme20 .t3-values {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    form.theme20 .t3-promo-img {
        width: 100%;
    }

    form.theme20 .t3-promo::after {
        background: linear-gradient(90deg, var(--t3-accent) 0%, rgba(42, 30, 92, .75) 100%);
    }

    form.theme20 .t3-footer-columns {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    form.theme20 .t3-hero {
        min-height: 380px;
    }

    form.theme20 .t3-hero h1 {
        font-size: 34px;
    }

    form.theme20 .t3-hero p {
        font-size: 15px;
    }

    form.theme20 .t3-values .t3-value {
        min-height: 110px;
        font-size: 14px;
    }

    form.theme20 .t3-category-img {
        width: 96px;
        height: 96px;
    }

    form.theme20 .t3-promo h2 {
        font-size: 24px;
    }

    form.theme20 .t3-footer-columns {
        grid-template-columns: 1fr;
    }

    form.theme20 .t3-footer-bottom-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    form.theme20 .t3-payments {
        justify-self: center;
    }
}

/* =====================================================================
   Theme 21 - Landing Page 3 (orange)
   Transparent header over a light amber hero (photo on the right) on the
   home page; regular-weight black headline with black buttons; peach value
   cards; Categories, Featured Products and Why Choose Us each inside a
   bordered white card; amber promo with dark text; peach footer.
   ===================================================================== */
form.theme21 {
    --t3-accent: #3a1d0b;
    --t3-radius: 8px;
    --t3-tint: color-mix(in srgb, var(--t3-primary) 9%, #fff);
}

/* ---------- Header: logo + links left, search + icons right ---------- */
form.theme21 .t3-header-main {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "logo nav search actions";
    gap: 48px;
}

form.theme21 .t3-nav > ul {
    gap: 28px;
}

/* Text logo (stores without an uploaded logo) is dark in the header, as in the design */
form.theme21 header.t3-header .t3-logo-text {
    color: #111;
}

form.theme21 .t3-nav > ul > li > a {
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: #1a1a1a;
}

form.theme21 .t3-search {
    justify-self: end;
    max-width: 320px;
    border: 0;
    background: transparent;
}

form.theme21 .t3-search-text {
    background: transparent;
    font-size: 13px;
}

form.theme21 .t3-search-btn {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: #f1f1f4;
    color: #1a1a1a;
}

form.theme21 .t3-header-actions {
    gap: 6px;
}

form.theme21 .t3-cart .cs_cartNumber {
    background: #e5372f;
}

/* Home page: header sits transparently on top of the hero; the right side is over the photo */
form.theme21:has(.t3-home) .cs_body {
    padding-top: 0;
}

form.theme21:has(.t3-home) header.t3-header {
    position: absolute;
    background: transparent;
    border-bottom: 0;
}

form.theme21:has(.t3-home) .t3-search-text {
    color: #fff;
}

form.theme21:has(.t3-home) .t3-search-text::placeholder {
    color: rgba(255, 255, 255, .9);
}

form.theme21:has(.t3-home) .t3-search-btn,
form.theme21:has(.t3-home) .t3-header-actions .t3-icon-btn {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

form.theme21:has(.t3-home) .t3-nav-dropdown a {
    color: var(--t3-text);
}

/* ---------- Hero: amber band, warehouse photo on the right ---------- */
form.theme21 .t3-hero {
    min-height: 580px;
    padding-top: var(--headerHeight);
    background: var(--t3-primary);
}

form.theme21 .t3-hero-img {
    left: auto;
    width: 58%;
}

form.theme21 .t3-hero::after {
    background: linear-gradient(90deg, var(--t3-primary) 42%, color-mix(in srgb, var(--t3-primary) 55%, transparent) 58%, rgba(0, 0, 0, 0) 78%);
}

form.theme21 .t3-hero h1 {
    max-width: 600px;
    margin-bottom: 24px;
    font-size: 68px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #111;
}

form.theme21 .t3-hero h1 .t3-hl {
    display: block;
}

form.theme21 .t3-hero p {
    max-width: 420px;
    margin-bottom: 36px;
    font-size: 14px;
    line-height: 1.5;
    text-transform: capitalize;
    color: #222;
}

form.theme21 .t3-hero-buttons {
    gap: 14px;
}

form.theme21 .t3-hero .t3-btn {
    height: 44px;
    padding: 0 26px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
}

form.theme21 .t3-hero .t3-btn-primary {
    background: #111;
    border-color: #111;
    color: #fff !important;
}

form.theme21 .t3-hero .t3-btn-secondary {
    background: transparent;
    border: 1px solid #111;
    color: #111 !important;
}

form.theme21 .t3-hero .t3-btn-secondary::after {
    content: "\2197";
    font-size: 13px;
}

/* ---------- Value tiles: peach cards, icon and label left-aligned ---------- */
form.theme21 .t3-values {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 56px;
    border: 0;
    border-radius: 0;
    background: none;
}

form.theme21 .t3-values .t3-value {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    min-height: 142px;
    padding: 24px 18px;
    text-align: left;
    background: var(--t3-tint);
    border: 0;
    border-radius: 6px;
    color: #333;
    font-size: 15px;
    font-weight: 500;
}

form.theme21 .t3-values .t3-value svg {
    width: 28px;
    height: 28px;
    color: var(--t3-primary);
}

/* ---------- Shared: Categories / Featured / Why Choose Us inside bordered cards ---------- */
form.theme21 .t3-categories,
form.theme21 .t3-featured,
form.theme21 .t3-why {
    padding: 30px 32px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: var(--t3-radius);
}

form.theme21 .t3-heading {
    margin-bottom: 24px;
    font-size: 22px;
    font-weight: 600;
}

/* ---------- Categories: faint white circles, product filling them ---------- */
form.theme21 .t3-categories {
    margin-top: 56px;
}

form.theme21 .t3-category-grid {
    gap: 36px 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
}

form.theme21 .t3-category {
    gap: 12px;
}

form.theme21 .t3-category-img {
    width: 100px;
    height: 100px;
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .045);
}

form.theme21 .t3-category-img img {
    max-width: 92%;
    max-height: 92%;
}

form.theme21 .t3-category-img img.t3-category-photo {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 50%;
}

form.theme21 .t3-category-name {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

/* ---------- Promo: amber fading into the photo, dark text ---------- */
form.theme21 .t3-promo {
    min-height: 262px;
    margin-top: 56px;
    justify-content: flex-start;
    background: var(--t3-primary);
    border-radius: var(--t3-radius);
}

form.theme21 .t3-promo-img {
    left: auto;
    width: 62%;
}

form.theme21 .t3-promo::after {
    background: linear-gradient(90deg, var(--t3-primary) 36%, color-mix(in srgb, var(--t3-primary) 45%, transparent) 58%, rgba(0, 0, 0, 0) 80%);
}

form.theme21 .t3-promo-content {
    max-width: 560px;
    padding: 40px 34px;
    text-align: left;
}

form.theme21 .t3-promo h2 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--t3-accent);
}

form.theme21 .t3-promo p {
    max-width: 420px;
    margin: 12px 0 22px;
    font-size: 14px;
    line-height: 1.5;
    text-transform: capitalize;
    color: var(--t3-accent);
}

form.theme21 .t3-btn-promo {
    height: 40px;
    padding: 0 28px;
    border: 0;
    border-radius: 4px;
    background: var(--t3-accent);
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
}

/* ---------- Featured products: no cell borders inside the card, text button ---------- */
form.theme21 .t3-featured {
    margin-top: 56px;
}

form.theme21 .t3-product-grid {
    gap: 40px 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
}

form.theme21 .t3-product {
    padding: 0;
    border: 0;
    background: transparent;
}

/* Slightly taller cards: the image area is 16% taller than it is wide. */
form.theme21 .t3-product-img {
    aspect-ratio: 1 / 1.16;
}

form.theme21 .t3-product-price {
    font-size: 16px;
    color: #111;
}

form.theme21 .t3-add-to-cart svg {
    display: none;
}

form.theme21 .t3-add-to-cart-text {
    display: inline;
    padding: 4px 10px;
    border: 1px solid #cfcfd8;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

form.theme21 .t3-add-to-cart:hover .t3-add-to-cart-text {
    border-color: var(--t3-primary);
}

/* ---------- Why Choose Us: numbered items, large outline icons ---------- */
form.theme21 .t3-why {
    margin-top: 56px;
    margin-bottom: 56px;
}

form.theme21 .t3-why-intro {
    max-width: 520px;
    margin: -10px 0 40px;
    font-size: 13px;
    line-height: 1.5;
    text-transform: capitalize;
    color: #333;
}

form.theme21 .t3-why-grid {
    gap: 24px;
    border: 0;
    border-radius: 0;
}

form.theme21 .t3-why-item,
form.theme21 .t3-why-item + .t3-why-item {
    align-items: flex-start;
    padding: 0 12px;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 0;
}

form.theme21 .t3-why-num {
    display: none;
}

form.theme21 .t3-why-item svg {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    color: var(--t3-primary);
}

form.theme21 .t3-why-item h3 {
    font-size: 15px;
    color: #1a1a1a;
}

form.theme21 .t3-why-item p {
    font-size: 12px;
    text-transform: capitalize;
}

/* ---------- Footer: peach, divider above the bottom row ---------- */
form.theme21 footer.t3-footer {
    padding: 64px 0 0;
    background: color-mix(in srgb, var(--t3-primary) 13%, #fff);
    color: #1a1a1a;
}

form.theme21 .t3-footer-columns {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding-bottom: 56px;
}

form.theme21 .t3-footer-brand .t3-logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--t3-primary);
}

form.theme21 .t3-footer-brand p {
    max-width: 200px;
    font-size: 13px;
    color: #1a1a1a;
}

form.theme21 .t3-footer-column h2 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #1a1a1a;
}

form.theme21 .t3-footer a {
    font-size: 13px;
    color: #555 !important;
}

form.theme21 .t3-footer a:hover {
    color: var(--t3-accent) !important;
}

form.theme21 .t3-footer-bottom {
    background: transparent;
}

form.theme21 .t3-footer-bottom-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 22px 0 28px;
    border-top: 1px solid rgba(0, 0, 0, .18);
}

form.theme21 .t3-copyright {
    order: 1;
    font-size: 12px;
    color: #555;
}

form.theme21 .t3-copyright strong {
    color: #1a1a1a;
}

form.theme21 .t3-powered {
    order: 2;
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a;
}

form.theme21 .t3-payments {
    order: 3;
    justify-self: end;
    gap: 14px;
}

form.theme21 .t3-payments img {
    height: 18px;
}

/* Theme 21 refinements (matched to Landing Page 3) */
/* Design colour pinned for this template, so it no longer depends on the colour saved on the store/theme row */
form.theme21 {
    --primaryColor: #f4a347;
    --t3-primary: #f4a347;
    --t3-tint: #fdf6ec;
}

/* Header over the hero: frosted search pill with a dark round button, frosted icon circles */
form.theme21:has(.t3-home) .t3-search {
    max-width: 340px;
    height: 42px;
    padding: 0 3px 0 4px;
    background: rgba(255, 255, 255, .28);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

form.theme21:has(.t3-home) .t3-search-text {
    text-align: left;
    color: #fff;
}

form.theme21:has(.t3-home) .t3-search-btn {
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, .35);
    color: #fff;
}

form.theme21:has(.t3-home) .t3-header-actions .t3-icon-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .28);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Hero: softer amber wash that runs further into the photo */
form.theme21 .t3-hero-img {
    width: 62%;
}

form.theme21 .t3-hero::after {
    background: linear-gradient(90deg, var(--t3-primary) 38%, color-mix(in srgb, var(--t3-primary) 70%, transparent) 50%, color-mix(in srgb, var(--t3-primary) 25%, transparent) 66%, rgba(0, 0, 0, 0) 85%);
}

form.theme21 .t3-hero h1 {
    font-size: 64px;
}

/* Value tiles: cream cards, grey regular-weight labels */
form.theme21 .t3-values .t3-value {
    min-height: 136px;
    gap: 20px;
    background: var(--t3-tint);
    color: #444;
    font-weight: 400;
}

form.theme21 .t3-values .t3-value svg {
    width: 26px;
    height: 26px;
}

/* Categories card: slightly lighter border, heading weight as in the design */
form.theme21 .t3-categories,
form.theme21 .t3-featured,
form.theme21 .t3-why {
    border-color: #ededed;
}

form.theme21 .t3-heading {
    color: #2a1a12;
}

form.theme21 .t3-category-name {
    font-weight: 400;
    color: #222;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    form.theme21 .t3-header-main {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "logo . actions"
            "search search search";
        gap: 10px 16px;
    }

    form.theme21 .t3-search {
        max-width: none;
        background: rgba(255, 255, 255, .95);
        border-radius: 999px;
    }

    form.theme21:has(.t3-home) .t3-search-text {
        color: var(--t3-text);
    }

    form.theme21:has(.t3-home) .t3-search-text::placeholder {
        color: #777;
    }

    form.theme21:has(.t3-home) .t3-header.t3-menu-open {
        background: #fff;
    }

    form.theme21 .t3-hero {
        min-height: 460px;
    }

    form.theme21 .t3-hero-img {
        width: 100%;
    }

    form.theme21 .t3-hero::after {
        background: color-mix(in srgb, var(--t3-primary) 85%, transparent);
    }

    form.theme21 .t3-hero h1 {
        font-size: 48px;
    }

    form.theme21 .t3-values {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    form.theme21 .t3-promo-img {
        width: 100%;
    }

    form.theme21 .t3-promo::after {
        background: color-mix(in srgb, var(--t3-primary) 85%, transparent);
    }

    form.theme21 .t3-footer-columns {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    form.theme21 .t3-hero {
        min-height: 400px;
    }

    form.theme21 .t3-hero h1 {
        font-size: 36px;
    }

    form.theme21 .t3-categories,
    form.theme21 .t3-featured,
    form.theme21 .t3-why {
        padding: 22px 18px;
    }

    form.theme21 .t3-category-img {
        width: 84px;
        height: 84px;
    }

    form.theme21 .t3-promo h2 {
        font-size: 24px;
    }

    form.theme21 .t3-why-grid {
        row-gap: 28px;
    }

    form.theme21 .t3-footer-columns {
        grid-template-columns: 1fr;
    }

    form.theme21 .t3-footer-bottom-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    form.theme21 .t3-payments {
        justify-self: center;
    }
}

/* =====================================================================
   Theme 22 - Landing Page 4 (terracotta)
   Warm cream page with serif headings. Header: logo left, small links +
   bordered search on the right. Hero: photo blends into cream, "Business"
   in terracotta, pill buttons. White value cards. Categories and Featured
   Products on full-width beige bands with white cards; full-width promo
   band; centered "Why Choose Us" with text-only cards; beige footer.
   ===================================================================== */
form.theme22 {
    --primaryColor: #c46a51;
    --t3-primary: #c46a51;
    --t3-accent: #3b2418;
    --t3-radius: 8px;
    --t3-heading-font: "Libre Baskerville", Georgia, serif;
    --t3-page: #f9f5f0;
    --t3-band: #f1eae1;
    --t3-card-border: #ece4da;
    --t3-footer-bg: #f1eae1;
}

form.theme22 .t3-home {
    position: relative;
    z-index: 0;
    overflow-x: clip;
}

/* ---------- Header ---------- */
form.theme22 header.t3-header {
    background: var(--t3-page);
    border-bottom: 0;
}

form.theme22 .t3-header-main {
    grid-template-areas: "logo . nav search actions";
    grid-template-columns: auto 1fr auto auto auto;
    gap: 28px;
}

form.theme22 header.t3-header .t3-logo-text {
    font-family: var(--t3-heading-font);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #1a1a1a;
}

form.theme22 .t3-nav > ul {
    justify-content: flex-end;
    gap: 26px;
}

form.theme22 .t3-nav > ul > li > a {
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    color: #1a1a1a;
}

form.theme22 .t3-nav > ul > li.t3-nav-shop > a {
    color: var(--t3-primary);
}

form.theme22 .t3-search {
    width: 230px;
    max-width: 230px;
    height: 38px;
    background: #fff;
    border: 1px solid var(--t3-card-border);
    border-radius: 6px;
}

form.theme22 .t3-search-text {
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
}

form.theme22 .t3-search-btn {
    height: 36px;
    padding: 0 12px;
}

form.theme22 .t3-header-actions {
    gap: 4px;
}

form.theme22 .t3-cart .cs_cartNumber {
    background: #e5372f;
}

/* ---------- Hero: cream, photo on the right blending in ---------- */
form.theme22 .t3-hero {
    min-height: 540px;
    background: var(--t3-page);
}

form.theme22 .t3-hero-img {
    left: auto;
    width: 60%;
}

form.theme22 .t3-hero::after {
    display: block;
    background: linear-gradient(90deg, var(--t3-page) 40%, color-mix(in srgb, var(--t3-page) 60%, transparent) 50%, rgba(0, 0, 0, 0) 64%);
}

form.theme22 .t3-hero-content > * {
    max-width: none;
}

form.theme22 .t3-hero h1 {
    max-width: 470px;
    margin-bottom: 26px;
    font-family: var(--t3-heading-font);
    font-size: 54px;
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: #1a1a1a;
}

form.theme22 .t3-hero h1 .t3-hl {
    display: block;
    color: inherit;
}

form.theme22 .t3-hero h1 .t3-hl-2 {
    color: var(--t3-primary);
}

form.theme22 .t3-hero p {
    max-width: 400px;
    margin-bottom: 32px;
    font-size: 14px;
    line-height: 1.55;
    color: #444;
}

form.theme22 .t3-hero-buttons {
    gap: 12px;
}

form.theme22 .t3-hero .t3-btn {
    height: 42px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
}

form.theme22 .t3-hero .t3-btn-primary::after {
    content: "\203A";
    font-size: 17px;
    line-height: 1;
}

form.theme22 .t3-hero .t3-btn-secondary {
    background: #fff;
    border: 1px solid #d9d2c8;
    color: #1a1a1a !important;
}

/* ---------- Value tiles: white cards on cream ---------- */
form.theme22 .t3-values {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
    margin-bottom: 72px;
    border: 0;
    border-radius: 0;
    background: none;
}

form.theme22 .t3-values .t3-value {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    min-height: 118px;
    padding: 22px 22px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--t3-card-border);
    border-radius: var(--t3-radius);
    color: #333;
    font-size: 14px;
    font-weight: 400;
}

form.theme22 .t3-values .t3-value + .t3-value {
    border-left: 1px solid var(--t3-card-border);
}

form.theme22 .t3-values .t3-value svg {
    width: 22px;
    height: 22px;
    color: var(--t3-primary);
}

/* ---------- Shared: full-width beige bands behind Categories and Featured ---------- */
form.theme22 .t3-categories,
form.theme22 .t3-featured {
    position: relative;
    margin-top: 0;
    padding: 80px 0;
}

form.theme22 .t3-categories::before,
form.theme22 .t3-featured::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background: var(--t3-band);
}

form.theme22 .t3-heading {
    margin-bottom: 34px;
    font-family: var(--t3-heading-font);
    font-size: 32px;
    font-weight: 400;
    color: #1a1a1a;
}

/* ---------- Categories: white cards, label inside at the bottom ---------- */
form.theme22 .t3-category-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

form.theme22 .t3-category {
    align-items: stretch;
    gap: 0;
    padding-bottom: 14px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--t3-card-border);
    border-radius: var(--t3-radius);
    overflow: hidden;
}

form.theme22 .t3-category-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 0;
}

form.theme22 .t3-category-img img {
    max-width: 80%;
    max-height: 80%;
}

form.theme22 .t3-category-name {
    padding: 4px 12px 0;
    font-size: 12px;
    font-weight: 500;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Promo: full-width band, cream fading into the photo ---------- */
form.theme22 .t3-promo {
    width: 100%;
    max-width: none;
    min-height: 330px;
    margin-top: 0;
    border-radius: 0;
    background: var(--t3-band);
}

form.theme22 .t3-promo-img {
    left: auto;
    width: 64%;
}

form.theme22 .t3-promo::after {
    background: linear-gradient(90deg, var(--t3-band) 36%, color-mix(in srgb, var(--t3-band) 55%, transparent) 46%, rgba(0, 0, 0, 0) 60%);
}

form.theme22 .t3-promo-content {
    width: var(--t3-width);
    max-width: calc(100% - 32px);
    padding: 48px 0;
    text-align: left;
}

form.theme22 .t3-promo-content > * {
    max-width: 380px;
}

form.theme22 .t3-promo h2 {
    font-family: var(--t3-heading-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    color: #1a1a1a;
}

form.theme22 .t3-promo h2 .t3-hl {
    display: inline;
}

form.theme22 .t3-promo p {
    margin: 12px 0 24px;
    font-size: 13px;
    line-height: 1.5;
    text-transform: capitalize;
    color: #333;
}

form.theme22 .t3-btn-promo {
    height: 38px;
    padding: 0 22px;
    border: 0;
    border-radius: 4px;
    background: var(--t3-accent);
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
}

/* ---------- Featured products: white cards, divider above price row ---------- */
form.theme22 .t3-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    border: 0;
}

form.theme22 .t3-product {
    gap: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--t3-card-border);
    border-radius: var(--t3-radius);
    overflow: hidden;
}

form.theme22 .t3-product-img {
    padding: 18px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--t3-card-border);
}

form.theme22 .t3-product-name {
    margin: 14px 16px 16px;
    font-size: 13px;
}

form.theme22 .t3-product-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--t3-card-border);
}

form.theme22 .t3-product-price {
    font-family: var(--t3-heading-font);
    font-size: 13px;
    font-weight: 400;
    color: #1a1a1a;
}

form.theme22 .t3-add-to-cart svg {
    display: none;
}

form.theme22 .t3-add-to-cart-text {
    display: inline;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--t3-primary);
}

/* ---------- Why Choose Us: centered heading, text-only bordered cards ---------- */
/* Padding, not margin: a margin would collapse out of the page and show white bands */
form.theme22 .t3-why {
    margin: 0 auto;
    padding: 88px 0;
}

form.theme22:has(.t3-home) .cs_body {
    padding-bottom: 0 !important;
    background: var(--t3-page);
}

form.theme22 .t3-why .t3-heading {
    margin-bottom: 18px;
    text-align: center;
}

form.theme22 .t3-why .t3-hl {
    color: var(--t3-primary);
}

form.theme22 .t3-why-intro {
    max-width: 520px;
    margin: 0 auto 40px;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    color: #444;
}

form.theme22 .t3-why-grid {
    gap: 22px;
}

form.theme22 .t3-why-item {
    align-items: flex-start;
    padding: 22px 20px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--t3-card-border);
    border-radius: var(--t3-radius);
}

form.theme22 .t3-why-item svg,
form.theme22 .t3-why-num {
    display: none;
}

form.theme22 .t3-why-item h3 {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

form.theme22 .t3-why-item p {
    font-size: 11px;
    color: #666;
}

/* ---------- Footer: beige ---------- */
form.theme22 footer.t3-footer {
    padding: 60px 0 0;
    background: var(--t3-footer-bg);
    color: #1a1a1a;
}

form.theme22 .t3-footer-columns {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    padding-bottom: 64px;
}

form.theme22 .t3-footer-brand .t3-logo-text {
    font-family: var(--t3-heading-font);
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    color: #1a1a1a;
}

form.theme22 .t3-footer-brand p {
    max-width: 180px;
    font-size: 11px;
    color: #333;
}

form.theme22 .t3-footer-column h2 {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #1a1a1a;
}

form.theme22 .t3-footer a {
    font-size: 11px;
    color: #666 !important;
}

form.theme22 .t3-footer a:hover {
    color: var(--t3-primary) !important;
}

form.theme22 .t3-footer-bottom {
    background: transparent;
}

form.theme22 .t3-footer-bottom-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 0 30px;
}

form.theme22 .t3-copyright {
    order: 1;
    font-size: 10px;
    color: #777;
}

form.theme22 .t3-powered {
    order: 2;
    font-size: 10px;
    color: #555;
}

form.theme22 .t3-payments {
    order: 3;
    justify-self: end;
    gap: 14px;
}

form.theme22 .t3-payments img {
    height: 16px;
}

/* Highlighted words inside serif headings keep the serif (the shared body-font rule would otherwise reset them) */
form.theme22 .t3-hero h1 *,
form.theme22 .t3-promo h2 *,
form.theme22 .t3-heading * {
    font-family: inherit;
}

/* The design shows two rows of four featured products */
form.theme22 .t3-product:nth-child(n+9) {
    display: none;
}

/* Categories refinements (matched to the design): rounder cards, smaller centred images, label in a cream strip */
form.theme22 .t3-categories .t3-heading {
    margin-bottom: 56px;
    font-size: 40px;
}

form.theme22 .t3-category-grid {
    gap: 22px 18px;
}

form.theme22 .t3-category {
    padding-bottom: 0;
    border-radius: 14px;
}

form.theme22 .t3-category-img {
    aspect-ratio: 1 / 1;
}

form.theme22 .t3-category-img img {
    max-width: 66%;
    max-height: 66%;
}

/* Stand-in scene photos (until the cut-outs are added) sit at the same size, rounded */
form.theme22 .t3-category-img img.t3-category-photo {
    width: 66%;
    height: 66%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 6px;
}

form.theme22 .t3-category-name {
    padding: 16px 22px 18px;
    background: #f8f4ee;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
}

@media (max-width: 767px) {
    form.theme22 .t3-categories .t3-heading {
        margin-bottom: 32px;
        font-size: 30px;
    }

    form.theme22 .t3-category-name {
        padding: 12px 14px 14px;
        font-size: 13px;
    }
}

/* Featured Products refinements (matched to the design): cream cards, white image panel, divider above price */
form.theme22 .t3-featured .t3-heading {
    margin-bottom: 56px;
    font-size: 40px;
}

form.theme22 .t3-product-grid {
    gap: 22px;
}

form.theme22 .t3-product {
    background: #f8f4ee;
    border: 1px solid var(--t3-card-border);
    border-radius: 14px;
}

form.theme22 .t3-product-img {
    aspect-ratio: auto;
    height: 244px;
    padding: 18px 0;
    background: #fff;
    border-bottom: 0;
    border-radius: 0 0 14px 14px;
}

form.theme22 .t3-product-name {
    margin: 20px 20px 18px;
    font-size: 15px;
    line-height: 1.4;
    color: #222 !important;
}

form.theme22 .t3-product-footer {
    padding: 16px 20px;
    border-top: 1px solid #e6dfd3;
}

form.theme22 .t3-product-price {
    font-size: 14px;
}

/* The price text sits in an inner span; keep it in the serif */
form.theme22 .t3-product-price * {
    font-family: inherit;
}

form.theme22 .t3-add-to-cart-text {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
}

@media (max-width: 767px) {
    form.theme22 .t3-featured .t3-heading {
        margin-bottom: 32px;
        font-size: 30px;
    }

    form.theme22 .t3-product-img {
        height: 184px;
    }

    form.theme22 .t3-product-name {
        margin: 14px 14px 12px;
        font-size: 13px;
    }

    form.theme22 .t3-product-footer {
        padding: 12px 14px;
    }
}

/* Why Choose Us refinements (matched to the design): see-through cards, larger text */
form.theme22 .t3-why .t3-heading {
    margin-bottom: 20px;
    font-size: 36px;
}

form.theme22 .t3-why-intro {
    max-width: 580px;
    margin-bottom: 48px;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}

form.theme22 .t3-why-grid {
    gap: 20px;
}

form.theme22 .t3-why-item {
    padding: 28px 20px;
    background: transparent;
    border: 1px solid #e8e1d5;
    border-radius: 14px;
}

form.theme22 .t3-why-item h3 {
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 500;
    color: #1a1a1a;
}

form.theme22 .t3-why-item p {
    font-size: 13px;
    color: #555;
}

@media (max-width: 767px) {
    form.theme22 .t3-why .t3-heading {
        font-size: 28px;
    }

    form.theme22 .t3-why-intro {
        font-size: 14px;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    form.theme22 .t3-header-main {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "logo . actions"
            "search search search";
    }

    form.theme22 .t3-search {
        width: 100%;
        max-width: none;
    }

    form.theme22 .t3-nav > ul {
        justify-content: flex-start;
    }

    form.theme22 .t3-hero {
        min-height: 440px;
    }

    form.theme22 .t3-hero-img {
        width: 100%;
    }

    form.theme22 .t3-hero::after {
        background: color-mix(in srgb, var(--t3-page) 82%, transparent);
    }

    form.theme22 .t3-hero h1 {
        font-size: 42px;
    }

    form.theme22 .t3-values {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    form.theme22 .t3-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    form.theme22 .t3-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    form.theme22 .t3-promo-img {
        width: 100%;
    }

    form.theme22 .t3-promo::after {
        background: color-mix(in srgb, var(--t3-band) 82%, transparent);
    }

    form.theme22 .t3-footer-columns {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    form.theme22 .t3-hero h1 {
        font-size: 32px;
    }

    form.theme22 .t3-categories,
    form.theme22 .t3-featured {
        padding: 48px 0;
    }

    form.theme22 .t3-category-grid,
    form.theme22 .t3-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    form.theme22 .t3-footer-columns {
        grid-template-columns: 1fr;
    }

    form.theme22 .t3-footer-bottom-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    form.theme22 .t3-payments {
        justify-self: center;
    }
}

/* =====================================================================
   Theme 23 - Landing Page 5 (maroon)
   Serif hero headline, light fade hero, bordered category grid,
   dark promo with red gradient, dark brown footer.
   ===================================================================== */
form.theme23 {
    --t3-accent: #3a0b0b;
    --t3-radius: 2px;
    --t3-heading-font: "Libre Baskerville", Georgia, serif;
    --t3-footer-bg: #2b1d1a;
    --t3-footer-text: #ffffff;
    --t3-footer-muted: rgba(255, 255, 255, .7);
}

form.theme23 .t3-heading,
form.theme23 .t3-promo h2 {
    font-family: var(--t3-body-font);
}

form.theme23 .t3-category-grid {
    gap: 0;
    border-top: 1px solid var(--t3-border);
    border-left: 1px solid var(--t3-border);
}

form.theme23 .t3-category {
    padding: 20px 12px;
    border-right: 1px solid var(--t3-border);
    border-bottom: 1px solid var(--t3-border);
}

form.theme23 .t3-promo {
    background: #111;
}

form.theme23 .t3-promo::after {
    background: linear-gradient(115deg, rgba(10, 10, 10, .9) 0%, color-mix(in srgb, var(--t3-primary) 75%, transparent) 45%, rgba(10, 10, 10, .9) 100%);
}

form.theme23 .t3-footer .t3-logo-text {
    color: #fff;
}

/* Slightly taller Featured Products cards: more padding, image area 12% taller than wide. */
form.theme23 .t3-product {
    padding: 21px 16px;
}

form.theme23 .t3-product-img {
    aspect-ratio: 1 / 1.12;
}

/* =====================================================================
   Product cards: product list page and Similar Products (all Template 3 themes).
   Styled like the home page Featured Products (.t3-product): bordered cells,
   fixed image area, 2-line name, bold theme-colour price. Keeps the quantity
   box and Add to cart button. Overrides newDesign/StyleSheetNew rules.
   ===================================================================== */
form.template3 {
    --t3-btn-radius: 8px;
}

form.theme19 {
    --t3-btn-radius: 999px;
}

/* Grid: joined cells with shared borders, like Featured Products */
form.template3 .productListPage.listPage .productListSection .productList:not(.owl-carousel) {
    --count: 4;
    grid-template-columns: repeat(var(--count), minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--t3-border);
    border-left: 1px solid var(--t3-border);
    grid-auto-rows: auto;
}

form.template3 .productListPage .productList .productBlock {
    position: relative;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    margin: 0 !important;
    padding: 16px !important;
    background: var(--t3-surface) !important;
    border: 0 !important;
    border-right: 1px solid var(--t3-border) !important;
    border-bottom: 1px solid var(--t3-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

form.template3 .productListPage .productList .productBlock:hover {
    background: var(--t3-surface) !important;
}

/* Image: square area, product fully visible, no hover overlay */
form.template3 .productListPage .productList .productBlock .productImage {
    flex: none;
    height: 210px !important;
    overflow: hidden;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

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

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

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

/* Name: 13px, two lines max. Brand hidden, as in Featured Products. */
form.template3 .productListPage .productList .productBlock .manufacturerName {
    display: none !important;
}

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

form.template3 .productListPage .productList .productBlock .productName * {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
}

/* Price: bold, theme colour */
form.template3 .productListPage .productList .productBlock .productPrice {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

form.template3 .productListPage .productList .productBlock .price {
    display: inline-block;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--t3-primary) !important;
}

form.template3 .productListPage .productList .productBlock .contactForAvailability,
form.template3 .productListPage .productList .productBlock .productPrice > a {
    font-size: 13px;
    color: var(--t3-primary) !important;
}

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

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

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

form.template3 .productListPage .productList .productBlock .addtoCart .btn {
    order: 2;
    flex: 1;
    width: auto !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: var(--t3-btn-radius) !important;
    background: var(--t3-primary) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0;
    text-transform: none;
}

form.template3 .productListPage .productList .productBlock .addtoCart .btn:hover {
    opacity: .88;
}

/* Favourite heart, top-right; special-order badge below it */
form.template3 .productListPage .productList .productBlock .BAddToFavouritesContainer {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

form.template3 .productListPage .productList .productBlock .BAddToFavouritesContainer a {
    color: var(--t3-primary) !important;
    font-size: 18px;
}

form.template3 .productListPage .productList .productBlock .special-order {
    position: absolute;
    top: 40px !important;
    right: 12px !important;
}

/* Similar Products (carousel): same card, each with its own border because the carousel spaces the items */
form.template3 .UC_RelatedProducts .sectionHeading {
    font-size: 26px !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    color: var(--t3-text) !important;
}

form.template3 .UC_RelatedProducts .productList.owl-carousel {
    padding: 0 !important;
}

/* Border drawn inside the card (inset shadow) so the carousel's overflow clipping can't cut it off */
form.template3 .UC_RelatedProducts .productList .productBlock {
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--t3-border) !important;
}

/* The carousel can start an item a fraction of a pixel outside its clip area; inset each card slightly */
form.template3 .UC_RelatedProducts .productList.owl-carousel .owl-item .productBlock {
    width: calc(100% - 4px) !important;
    margin-left: 2px !important;
}

/* Responsive */
@media (max-width: 1199px) {
    form.template3 .productListPage.listPage .productListSection .productList:not(.owl-carousel) {
        --count: 3;
    }
}

@media (max-width: 767px) {
    form.template3 .productListPage.listPage .productListSection .productList:not(.owl-carousel) {
        --count: 2;
    }

    form.template3 .productListPage .productList .productBlock {
        padding: 12px !important;
    }

    form.template3 .productListPage .productList .productBlock .productImage {
        height: 150px !important;
    }

    form.template3 .productListPage .productList .productBlock .addtoCart .btn {
        padding: 0 8px !important;
        font-size: 13px !important;
    }
}

/* =====================================================================
   Product details page (all Template 3 themes): framed sticky image,
   dark title, theme-colour price, quantity + pill Add to cart row,
   divided Description / Details / Shipping sections.
   Overrides newDesign/StyleSheetNew rules.
   ===================================================================== */

/* Two columns: framed image (sticky) | details */
form.template3 .productDetailsPage .productDetails.siteWidth {
    width: var(--t3-width);
    max-width: calc(100% - 32px);
    margin: 32px auto 0;
}

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

form.template3 .productDetailsPage .productSection > .productImage {
    position: sticky;
    top: calc(var(--headerHeight) + 24px);
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    padding: 40px;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    background: #fff !important;
    border: 1px solid var(--t3-border);
    border-radius: var(--t3-radius) !important;
}

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

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

/* Title: dark, normal letter spacing; price: bold theme colour */
form.template3 .productDetailsPage .productDetails.mainSection .productName {
    margin: 0 0 16px !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: var(--t3-text) !important;
}

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

form.template3 .productDetailsPage .mainSection > .price {
    margin: 0 0 24px !important;
}

form.template3 .productDetailsPage .mainSection > .price .ProductDetailPrice {
    margin: 0 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--t3-primary) !important;
}

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

/* Quantity + Add to cart on one row, quantity first, pill on Teal */
form.template3 .productDetailsPage .cartOptions {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px;
    max-width: 440px;
    margin: 0 0 32px !important;
    padding: 0 0 32px !important;
    border-bottom: 1px solid var(--t3-border);
}

form.template3 .productDetailsPage .cartOptions .quantityContainer {
    order: 1;
    flex: none;
    width: 72px !important;
    margin: 0 !important;
}

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

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

form.template3 .productDetailsPage .cartOptions .btnAndPrice .btn {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: var(--t3-btn-radius) !important;
    background: var(--t3-primary) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

form.template3 .productDetailsPage .cartOptions .btnAndPrice .btn:hover {
    opacity: .88;
}

/* Contact for availability: same pill, outlined */
form.template3 .productDetailsPage .mainSection > .btnAndPrice .btn {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 24px !important;
    border: 1px solid var(--t3-primary) !important;
    border-radius: var(--t3-btn-radius) !important;
    background: transparent !important;
    color: var(--t3-primary) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* Description / Details / Shipping & Returns: stacked sections with dividers */
form.template3 .productDetailsPage .productDescriptionBlock {
    margin: 0 0 28px !important;
    padding: 0 0 28px !important;
    background: none !important;
    border-bottom: 1px solid var(--t3-border);
}

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

form.template3 .productDetailsPage .productPageSectionHeading {
    margin: 0 0 14px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--t3-text) !important;
}

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

/* Supplier description HTML. Its <hr> tags end the <p> early, so most of the text sits directly in
   .productDescriptionBlock; style the whole block, not just .productDescription. */
form.template3 .productDetailsPage .productDescriptionBlock {
    font-size: 14px;
    line-height: 1.65;
    color: var(--t3-muted);
}

/* Description HTML from the database. Two formats: hand-written (<b>Label:</b> text<br><br>, links with
   inline blue styles) and supplier feed (<b>Heading</b><hr>text). */
/* Bold stays inline (labels like "Backrest:" keep their text on the same line) */
form.template3 .productDetailsPage .productDescriptionBlock b,
form.template3 .productDetailsPage .productDescriptionBlock strong {
    display: inline;
    margin: 0;
    font-size: inherit;
    font-weight: 600;
    color: var(--t3-text);
}

/* Supplier-feed headings are followed by an <hr>: put those on their own line with space above */
form.template3 .productDetailsPage .productDescriptionBlock b:has(+ hr),
form.template3 .productDetailsPage .productDescriptionBlock strong:has(+ hr) {
    display: block;
    margin: 16px 0 4px;
}

form.template3 .productDetailsPage .productDescriptionBlock .productDescription > span > b:first-child {
    margin-top: 0;
}

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

/* Links in the description (e.g. other colours of the product): theme colour instead of the inline blue */
form.template3 .productDetailsPage .productDescriptionBlock a {
    color: var(--t3-primary) !important;
    font-weight: 500;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

form.template3 .productDetailsPage .productDescriptionBlock a:hover {
    opacity: .8;
}

/* Responsive */
@media (max-width: 1023px) {
    form.template3 .productDetailsPage .productSection {
        gap: 32px;
    }

    form.template3 .productDetailsPage .productDetails.mainSection .productName {
        font-size: 24px !important;
    }
}

@media (max-width: 767px) {
    form.template3 .productDetailsPage .productSection {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    form.template3 .productDetailsPage .productSection > .productImage {
        position: static;
        height: auto !important;
        padding: 24px;
    }

    form.template3 .productDetailsPage .cartOptions {
        max-width: none;
    }

    form.template3 .productDetailsPage .mainSection > .price .ProductDetailPrice {
        font-size: 24px !important;
    }
}

/* =====================================================================
   Product list page chrome (all Template 3 themes): contained rounded
   category banner, pill Sort by select, card-style Filter by sidebar.
   Overrides StyleSheet / newDesign/StyleSheetNew rules.
   ===================================================================== */

/* Category banner: contained, rounded, title on the left - like the home page hero */
form.template3 .productListPage.listPage .productListBanner {
    width: var(--t3-width);
    max-width: calc(100% - 32px);
    height: auto !important;
    min-height: 180px !important;
    margin: 24px auto 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    overflow: hidden;
    border-radius: var(--t3-radius);
}

form.theme19 .productListPage.listPage .productListBanner {
    border-radius: 22px;
}

form.template3 .productListPage.listPage .productListBanner::before {
    opacity: 1 !important;
}

form.template3 .productListPage.listPage .productListBanner::after {
    opacity: .35;
    background-size: cover !important;
}

form.template3 .productListPage.listPage .productListBanner .overlay {
    position: relative;
    z-index: 1;
    padding: 40px;
}

form.template3 .productListPage.listPage .productListBanner .overlay h1 {
    margin: 0 !important;
    font-family: var(--t3-heading-font);
    font-size: 44px !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
    color: #fff !important;
}

/* Sort by: muted label + pill select with a chevron */
form.template3 .productListPage .breadcrumbAndSearchBar {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
}

form.template3 .productListPage .breadcrumbAndSearchBar .inner {
    width: var(--t3-width) !important;
    max-width: calc(100% - 32px);
    margin: 0 auto !important;
    padding: 20px 0 !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

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

form.template3 .productListPage .sortByAndLayout .sortBy {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

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

form.template3 .productListPage .sortByAndLayout .sortBy > select {
    height: 40px !important;
    min-width: 180px;
    padding: 0 38px 0 16px !important;
    border: 1px solid var(--t3-border) !important;
    border-radius: var(--t3-btn-radius) !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 14px center / 14px !important;
    font-size: 14px !important;
    color: var(--t3-text) !important;
    cursor: pointer;
}

/* Filter sidebar: bordered card, plain section headers, tinted active item */
form.template3 .productListPage .productListContainer {
    width: var(--t3-width) !important;
    max-width: calc(100% - 32px);
    margin-left: auto !important;
    margin-right: auto !important;
}

form.template3 .productListPage .productListContainer .productFilterSection {
    width: 260px !important;
    padding-right: 32px !important;
}

form.template3 .productListPage .productFilterSection .filterInner {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--t3-border);
    border-radius: var(--t3-radius);
}

form.template3 .productListPage .productFilterSection .filterInner .productFilterHeading {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--t3-text) !important;
}

form.template3 .productListPage .productFilterSection .filterInner .filterTab {
    margin: 0 !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--t3-border) !important;
    border-radius: 0 !important;
    background: none !important;
}

form.template3 .productListPage .productFilterSection .filterInner .filterTab .tabLabel {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--t3-text) !important;
    cursor: pointer;
}

form.template3 .productListPage .productFilterSection .filterInner .filterTab .tabLabel::after {
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    font-size: 16px !important;
    color: var(--t3-muted) !important;
}

form.template3 .productListPage .productFilterSection .filterInner .productFilterItems {
    max-height: 280px;
    overflow-y: auto;
    margin-top: 10px !important;
    padding: 0 4px 0 0 !important;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--t3-primary) 35%, #fff) transparent;
}

form.template3 .productListPage .productFilterSection .filterInner .productFilterItems ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

form.template3 .productListPage .productFilterSection .filterInner .productFilterItems li {
    margin: 0 0 2px !important;
    padding: 0 !important;
    border: 0 !important;
}

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

form.template3 .productListPage .productFilterSection .filterInner .productFilterItems li a:hover {
    background: #f4f6f6;
    color: var(--t3-text) !important;
}

form.template3 .productListPage .productFilterSection .filterInner .productFilterItems li.active a {
    background: color-mix(in srgb, var(--t3-primary) 9%, #fff);
    color: var(--t3-primary) !important;
    font-weight: 600 !important;
}

/* Price range checkboxes */
form.template3 .productListPage .productFilterSection .filterInner .productFilterItems li > span {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 10px;
}

form.template3 .productListPage .productFilterSection .filterInner .productFilterItems li input[type=checkbox] {
    flex: none;
    position: static !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: var(--t3-primary);
    cursor: pointer;
}

form.template3 .productListPage .productFilterSection .filterInner .productFilterItems li > span > label {
    padding: 6px 8px !important;
    cursor: pointer;
}

/* Phone/tablet: keep the existing "FILTER BY" toggle, styled as a pill */
form.template3 .productListPage .productFilterSection .filterMenuToggle_label {
    border: 1px solid var(--t3-border) !important;
    border-radius: var(--t3-btn-radius) !important;
    background: #fff !important;
    color: var(--t3-text) !important;
    font-weight: 500;
}

@media (max-width: 767px) {
    form.template3 .productListPage.listPage .productListBanner {
        min-height: 120px !important;
    }

    form.template3 .productListPage.listPage .productListBanner .overlay {
        padding: 24px;
    }

    form.template3 .productListPage.listPage .productListBanner .overlay h1 {
        font-size: 30px !important;
    }

    form.template3 .productListPage .sortByAndLayout .sortBy > select {
        min-width: 150px;
    }
}


/* =====================================================================
   Login page (all Template 3 themes).
   Same layout as the older templates: breadcrumb, centred heading, Sign in
   and Create account columns, floating-label fields with an underline.
   Restyled with the theme's font, colours and button shape; each column
   sits in a light bordered card like the home page cards.
   ===================================================================== */
form.template3 .loginPage {
    --maxWidth: 1080px;
    padding-bottom: 72px;
}

/* Breadcrumb: aligned with the page content, small muted text */
form.template3 .loginPage .breadcrumbAndSearchBar {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}

form.template3 .loginPage .breadcrumbAndSearchBar .inner {
    width: var(--t3-width) !important;
    max-width: calc(100% - 32px);
    margin: 0 auto !important;
    padding: 20px 0 0 !important;
}

form.template3 .loginPage .breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    font-size: 13px !important;
    letter-spacing: .04em;
}

form.template3 .loginPage .breadcrumb a {
    color: var(--t3-muted) !important;
    text-decoration: none !important;
}

form.template3 .loginPage .breadcrumb span:last-child a {
    color: var(--t3-text) !important;
}

form.template3 .loginPage .breadcrumb a:hover {
    color: var(--t3-primary) !important;
}

/* Page heading: theme heading font and text colour (was fixed navy) */
form.template3 .loginPage .pageHeadingSection {
    padding: 40px 0 0 !important;
}

form.template3 .loginPage .pageHeadingSection p {
    margin: 0 !important;
    font-family: var(--t3-heading-font) !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -.01em;
    text-transform: none !important;
    color: var(--t3-text) !important;
}

/* Two columns, each a bordered card */
form.template3 .loginPage .loginPage_lefRight {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-top: 40px !important;
}

form.template3 .loginPage .loginPage_lefRight .loginPage_left,
form.template3 .loginPage .loginPage_lefRight .loginPage_right {
    width: calc(50% - 16px) !important;
    padding: 36px 40px 40px !important;
    border: 1px solid var(--t3-border);
    border-radius: var(--t3-btn-radius);
    background: var(--t3-surface, #fff);
}

form.theme19 .loginPage .loginPage_lefRight .loginPage_left,
form.theme19 .loginPage .loginPage_lefRight .loginPage_right {
    border-radius: 16px;
}

form.template3 .loginPage .loginPage_lefRight h2 {
    margin: 0 0 4px !important;
    font-family: var(--t3-heading-font) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--t3-text) !important;
}

form.template3 .loginPage .loginPage_lefRight h2 * {
    font-family: inherit;
}

/* Fields: keep the floating labels; theme colours for the underline and focus */
form.template3 .loginPage .formStyle .textField .form-control,
form.template3 .loginPage .formStyle .ddlField .form-control {
    height: 44px;
    padding: 0 10px !important;
    border-bottom: 1px solid var(--t3-border) !important;
    font-size: 15px !important;
    color: var(--t3-text) !important;
    box-shadow: none !important;
    transition: border-color .2s;
}

form.template3 .loginPage .formStyle .textField .form-control:focus,
form.template3 .loginPage .formStyle .ddlField .form-control:focus {
    border-bottom-color: var(--t3-primary) !important;
    box-shadow: inset 0 -1px 0 var(--t3-primary) !important;
}

/* Browser autofill: white instead of the blue fill */
form.template3 .loginPage .formStyle .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px #fff inset !important;
    -webkit-text-fill-color: var(--t3-text);
}

form.template3 .loginPage .formStyle .textField label {
    font-size: 15px;
    color: var(--t3-muted);
}

form.template3 .loginPage .formStyle .textField .form-control:not(:placeholder-shown) ~ label,
form.template3 .loginPage .formStyle .textField .form-control:focus ~ label {
    font-size: 12px;
    color: var(--t3-muted);
}

form.template3 .loginPage .formStyle .textField .form-control:focus ~ label {
    color: var(--t3-primary);
}

form.template3 .loginPage .paraField {
    padding-top: 24px;
    font-size: 14px;
    color: var(--t3-muted);
}

form.template3 .loginPage .paraField a {
    color: var(--t3-primary) !important;
    font-weight: 600;
}

form.template3 .loginPage .formStyle .checkBoxField {
    align-items: flex-start;
    padding-top: 24px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--t3-text);
}

form.template3 .loginPage .formStyle .checkBoxField input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--t3-primary);
}

form.template3 .loginPage .formStyle .checkBoxField label {
    padding-left: 12px;
}

/* Buttons: the theme's primary button */
form.template3 .loginPage .btnContainer {
    padding-top: 28px;
}

form.template3 .loginPage .btnContainer .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 28px !important;
    border: 0 !important;
    border-radius: var(--t3-btn-radius) !important;
    background: var(--t3-primary) !important;
    color: #fff !important;
    font-family: var(--t3-body-font);
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

form.template3 .loginPage .btnContainer .btn:hover {
    opacity: .88;
}

form.template3 .loginPage .ValidationError {
    display: block;
    padding-top: 6px;
    font-size: 13px;
    color: #c62828 !important;
}

@media (max-width: 991px) {
    form.template3 .loginPage .loginPage_lefRight .loginPage_left,
    form.template3 .loginPage .loginPage_lefRight .loginPage_right {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    form.template3 .loginPage .pageHeadingSection p {
        font-size: 24px !important;
    }

    form.template3 .loginPage .loginPage_lefRight .loginPage_left,
    form.template3 .loginPage .loginPage_lefRight .loginPage_right {
        padding: 24px 20px 28px !important;
    }

    form.template3 .loginPage .btnContainer .btn {
        width: 100%;
    }
}


/* =====================================================================
   Product list, phone and tablet (up to 1024px).
   The base stylesheet pins "FILTER BY" 65px above the products at 100px
   wide; with the wider Template 3 filter column that lands on the banner.
   Here the Filter button and Sort by share one toolbar row under the
   banner, and the filter panel drops down over the products.
   ===================================================================== */
/* Base CSS stacks this row into a column below 1200px, which centres Sort by */
form.template3 .productListPage .breadcrumbAndSearchBar .inner {
    flex-direction: row !important;
}

@media (max-width: 1024px) {
    /* Base CSS hides the whole filter on tablets (768-1024px); show it */
    form.template3 .productListPage #ContentPlaceHolder1_FilterMenu_ctl00 {
        display: block !important;
        flex: none;
        width: 0;
    }

    form.template3 .productListPage .breadcrumbAndSearchBar .inner {
        min-height: 72px;
        padding: 16px 0 !important;
    }

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

    form.template3 .productListPage .breadcrumbAndSearchBar .sortByAndLayout .sortBy {
        height: auto !important;
    }

    form.template3 .productListPage .productListContainer {
        position: relative;
        margin-top: 0 !important;
    }

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

    /* Button: left end of the toolbar row, level with the Sort by select */
    form.template3 .productListPage .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 18px 0 42px !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 16px center / 18px !important;
        font-size: 14px !important;
        font-weight: 600;
        line-height: 38px !important;
        letter-spacing: 0;
        text-transform: lowercase;
        white-space: nowrap;
        cursor: pointer;
    }

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

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

    /* Panel: full width of the content, just under the toolbar row */
    form.template3 .productListPage .productListContainer .productFilterSection .filterInner {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        width: auto !important;
        max-height: 70vh;
        overflow-y: auto;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    }

    form.template3 .productListPage .productListContainer .productListSection {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {
    form.template3 .productListPage .sortByAndLayout .sortBy > select {
        min-width: 140px;
    }
}


/* =====================================================================
   About Us page (all Template 3 themes).
   Same structure as before: banner, store's heading, text with the photo
   beside it. The banner matches the category page banner (rounded card
   inside the page width, title on the left in the theme heading font),
   and the content lines up with the header and footer width.
   ===================================================================== */
form.template3 .aboutPage .productListBanner {
    width: var(--t3-width);
    max-width: calc(100% - 32px);
    height: auto !important;
    min-height: 180px !important;
    margin: 24px auto 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    overflow: hidden;
    border-radius: var(--t3-radius);
}

form.theme19 .aboutPage .productListBanner {
    border-radius: 22px;
}

form.template3 .aboutPage .productListBanner::before {
    opacity: 1 !important;
}

form.template3 .aboutPage .productListBanner::after {
    opacity: .35;
    background-size: cover !important;
}

form.template3 .aboutPage .productListBanner .overlay {
    z-index: 1;
    padding: 40px;
    text-align: left !important;
}

form.template3 .aboutPage .productListBanner .overlay h1 {
    margin: 0 !important;
    font-family: var(--t3-heading-font);
    font-size: 44px !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
    text-align: left !important;
    color: #fff !important;
}

/* Store heading and content: aligned with the header and footer */
form.template3 .aboutPage .aboutPageHeading,
form.template3 .aboutPage .aboutPageContent {
    width: var(--t3-width) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

form.template3 .aboutPage .aboutPageHeading {
    margin-top: 56px !important;
}

form.template3 .aboutPage .aboutPageHeading h1,
form.template3 .aboutPage .aboutPageHeading h1 span {
    margin: 0;
    font-family: var(--t3-heading-font);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--t3-text);
}

form.template3 .aboutPage .aboutPageContent {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 64px;
    margin-top: 32px !important;
    padding-bottom: 88px !important;
}

form.template3 .aboutPage .aboutPageContent .aboutPageText {
    flex: 1 1 auto;
    width: auto !important;
    padding: 0 !important;
    font-size: 16px;
    line-height: 1.75;
    color: #444;
}

form.template3 .aboutPage .aboutPageText p {
    margin: 0 0 16px;
}

form.template3 .aboutPage .aboutPageText h2,
form.template3 .aboutPage .aboutPageText h3 {
    margin: 32px 0 12px;
    font-family: var(--t3-heading-font);
    font-weight: 600;
    line-height: 1.3;
    color: var(--t3-text);
}

form.template3 .aboutPage .aboutPageText h2 {
    font-size: 24px;
}

form.template3 .aboutPage .aboutPageText h3 {
    font-size: 20px;
}

form.template3 .aboutPage .aboutPageText strong,
form.template3 .aboutPage .aboutPageText b {
    font-weight: 600;
    color: var(--t3-text);
}

form.template3 .aboutPage .aboutPageText a {
    color: var(--t3-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

form.template3 .aboutPage .aboutPageText ul,
form.template3 .aboutPage .aboutPageText ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

form.template3 .aboutPage .aboutPageContent .aboutPageImg {
    flex: none;
    width: 520px !important;
    height: auto !important;
}

form.template3 .aboutPage .aboutPageContent .aboutPageImg img {
    display: block;
    width: 100%;
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--t3-radius);
}

form.theme19 .aboutPage .aboutPageContent .aboutPageImg img {
    border-radius: 22px;
}

@media (max-width: 1199px) {
    form.template3 .aboutPage .aboutPageContent {
        gap: 40px;
    }

    form.template3 .aboutPage .aboutPageContent .aboutPageImg {
        width: 420px !important;
    }
}

/* Tablet and phone: photo on top (as before), then the text */
@media (max-width: 1024px) {
    form.template3 .aboutPage .aboutPageContent {
        flex-direction: column;
        gap: 28px;
        padding-bottom: 64px !important;
    }

    form.template3 .aboutPage .aboutPageContent .aboutPageImg {
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (max-width: 767px) {
    form.template3 .aboutPage .productListBanner {
        min-height: 120px !important;
    }

    form.template3 .aboutPage .productListBanner .overlay {
        padding: 24px;
    }

    form.template3 .aboutPage .productListBanner .overlay h1 {
        font-size: 30px !important;
    }

    form.template3 .aboutPage .aboutPageHeading {
        margin-top: 32px !important;
    }

    form.template3 .aboutPage .aboutPageHeading h1,
    form.template3 .aboutPage .aboutPageHeading h1 span {
        font-size: 26px;
    }

    form.template3 .aboutPage .aboutPageContent {
        margin-top: 20px !important;
        padding-bottom: 48px !important;
    }
}

/* Pages with a .pageBg wrapper (About Us): the body behind it takes the
   page colour too, so no white strips show above the banner (collapsed
   banner margin) or above the footer (body min-height on short pages). */
form.template3 .cs_body:has(> .pageBg) {
    background: var(--t3-page);
}

/* Terracotta inner pages: thin warm line under the header. The home page
   keeps no line so the header still blends into the hero. */
form.theme22:not(:has(.t3-home)) header.t3-header {
    border-bottom: 1px solid color-mix(in srgb, var(--t3-accent) 14%, var(--t3-page));
}

/* =====================================================================
   Contact Us page (all Template 3 themes).
   Same content as before: banner, help text and contact details on the
   left, contact form on the right. Banner matches About Us and the
   category pages; the form sits in a bordered card like the Login page,
   with the same fields and button. Content lines up with the header.
   ===================================================================== */
form.template3 .cs_body:has(.contactUsPage) {
    background: var(--t3-page);
}

form.template3 .cs_body:has(.contactUsPage) > .productListBanner {
    width: var(--t3-width);
    max-width: calc(100% - 32px);
    height: auto !important;
    min-height: 180px !important;
    margin: 24px auto 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    overflow: hidden;
    border-radius: var(--t3-radius);
}

form.theme19 .cs_body:has(.contactUsPage) > .productListBanner {
    border-radius: 22px;
}

form.template3 .cs_body:has(.contactUsPage) > .productListBanner::before {
    opacity: 1 !important;
}

form.template3 .cs_body:has(.contactUsPage) > .productListBanner::after {
    opacity: .35;
    background-size: cover !important;
}

form.template3 .cs_body:has(.contactUsPage) > .productListBanner .overlay {
    z-index: 1;
    padding: 40px;
    text-align: left !important;
}

form.template3 .cs_body:has(.contactUsPage) > .productListBanner .overlay h1 {
    margin: 0 !important;
    font-family: var(--t3-heading-font);
    font-size: 44px !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
    text-align: left !important;
    color: #fff !important;
}

/* Two columns: details on the left, form card on the right */
form.template3 .contactUsPage .ContactPage {
    width: var(--t3-width) !important;
    max-width: calc(100% - 32px) !important;
    margin: 56px auto 88px !important;
    padding: 0 !important;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 64px;
}

form.template3 .contactUsPage .ContactPage .leftSection {
    flex: none;
    width: 340px !important;
}

form.template3 .contactUsPage .ContactPage .leftSection .sectionHeading {
    margin: 0 0 12px !important;
    font-family: var(--t3-heading-font);
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--t3-text) !important;
}

form.template3 .contactUsPage .ContactPage .leftSection .sectionText {
    margin: 0 0 40px !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #444 !important;
}

form.template3 .contactUsPage .ContactPage .leftSection .sectionText div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px !important;
}

form.template3 .contactUsPage .ContactPage .leftSection .sectionText div .material-symbols-outlined {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    border-radius: 50%;
    background: color-mix(in srgb, var(--t3-primary) 10%, #fff);
    font-size: 20px;
    color: var(--t3-primary) !important;
}

form.template3 .contactUsPage .ContactPage .leftSection .sectionText div a {
    font-size: 15px;
    font-weight: 500;
    color: var(--t3-text) !important;
    text-decoration: none;
}

form.template3 .contactUsPage .ContactPage .leftSection .sectionText div a:hover {
    color: var(--t3-primary) !important;
}

form.template3 .contactUsPage .ContactPage .rightSection {
    flex: 1 1 auto;
    width: auto !important;
    margin: 0 !important;
}

form.template3 .contactUsPage .ContactPage .rightSection .formSection {
    width: auto !important;
    padding: 36px 40px 40px !important;
    border: 1px solid var(--t3-border);
    border-radius: var(--t3-btn-radius);
    background: var(--t3-surface, #fff);
}

form.theme19 .contactUsPage .ContactPage .rightSection .formSection {
    border-radius: 16px;
}

/* Form: two columns of fields, comment, consent and button full width */
form.template3 .contactUsPage .ContactPage .formSection .formStyle {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    margin: 0 !important;
    padding: 0 !important;
}

form.template3 .contactUsPage .ContactPage .formSection .formStyle > .sectionHeading,
form.template3 .contactUsPage .ContactPage .formSection .formStyle > .textField:has(#ContentPlaceHolder1_TNote),
form.template3 .contactUsPage .ContactPage .formSection .formStyle > .checkBoxField,
form.template3 .contactUsPage .ContactPage .formSection .formStyle > .btnContainer {
    grid-column: 1 / -1;
}

form.template3 .contactUsPage .ContactPage .formSection .formStyle .sectionHeading {
    margin: 0 0 4px !important;
    font-family: var(--t3-heading-font);
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--t3-text) !important;
}

/* Fields: same as the Login page */
form.template3 .contactUsPage .formStyle .textField .form-control {
    height: 44px;
    padding: 0 10px !important;
    border-bottom: 1px solid var(--t3-border) !important;
    font-size: 15px !important;
    color: var(--t3-text) !important;
    box-shadow: none !important;
    transition: border-color .2s;
}

form.template3 .contactUsPage .formStyle .textField .form-control:focus {
    border-bottom-color: var(--t3-primary) !important;
    box-shadow: inset 0 -1px 0 var(--t3-primary) !important;
}

form.template3 .contactUsPage .formStyle .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px #fff inset !important;
    -webkit-text-fill-color: var(--t3-text);
}

form.template3 .contactUsPage .formStyle .textField label {
    font-size: 15px;
    color: var(--t3-muted);
}

form.template3 .contactUsPage .formStyle .textField .form-control:not(:placeholder-shown) ~ label,
form.template3 .contactUsPage .formStyle .textField .form-control:focus ~ label {
    font-size: 12px;
    color: var(--t3-muted);
}

form.template3 .contactUsPage .formStyle .textField .form-control:focus ~ label {
    color: var(--t3-primary);
}

form.template3 .contactUsPage .formStyle .checkBoxField {
    align-items: flex-start;
    padding-top: 28px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--t3-text);
}

form.template3 .contactUsPage .formStyle .checkBoxField input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--t3-primary);
}

form.template3 .contactUsPage .formStyle .checkBoxField label {
    padding-left: 12px;
}

/* Button: the theme's primary button, as on Login */
form.template3 .contactUsPage .formStyle .btnContainer {
    padding-top: 28px;
}

form.template3 .contactUsPage .ContactPage .formSection .formStyle .btnContainer .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 180px;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 28px !important;
    border: 0 !important;
    border-radius: var(--t3-btn-radius) !important;
    background: var(--t3-primary) !important;
    box-shadow: none !important;
}

form.template3 .contactUsPage .ContactPage .formSection .formStyle .btnContainer .btn span {
    font-family: var(--t3-body-font);
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #fff !important;
}

form.template3 .contactUsPage .ContactPage .formSection .formStyle .btnContainer .btn:hover {
    opacity: .88;
}

@media (max-width: 1199px) {
    form.template3 .contactUsPage .ContactPage {
        gap: 40px;
    }

    form.template3 .contactUsPage .ContactPage .leftSection {
        width: 280px !important;
    }
}

/* Tablet and phone: details above the form */
@media (max-width: 991px) {
    form.template3 .contactUsPage .ContactPage {
        flex-direction: column;
        gap: 8px;
        margin: 40px auto 64px !important;
    }

    form.template3 .contactUsPage .ContactPage .leftSection,
    form.template3 .contactUsPage .ContactPage .rightSection {
        width: 100% !important;
    }

    form.template3 .contactUsPage .ContactPage .leftSection .sectionText {
        margin-bottom: 28px !important;
    }
}

@media (max-width: 767px) {
    form.template3 .cs_body:has(.contactUsPage) > .productListBanner {
        min-height: 120px !important;
    }

    form.template3 .cs_body:has(.contactUsPage) > .productListBanner .overlay {
        padding: 24px;
    }

    form.template3 .cs_body:has(.contactUsPage) > .productListBanner .overlay h1 {
        font-size: 30px !important;
    }

    form.template3 .contactUsPage .ContactPage {
        margin: 32px auto 48px !important;
    }

    form.template3 .contactUsPage .ContactPage .rightSection .formSection {
        padding: 24px 20px 28px !important;
    }

    form.template3 .contactUsPage .ContactPage .formSection .formStyle {
        grid-template-columns: minmax(0, 1fr);
    }

    form.template3 .contactUsPage .ContactPage .formSection .formStyle .btnContainer .btn {
        width: 100% !important;
    }
}

/* =====================================================================
   Legal pages (all Template 3 themes): Privacy Policy, Terms of Use,
   Terms and Conditions, Returns Policy (.procurementPage.legalPage).
   The title block becomes a rounded banner like the About and Contact
   pages, set a little further from the header; the text sits in a
   readable column on the page background with a hairline between sections.
   ===================================================================== */
form.template3 .cs_body:has(.legalPage) {
    background: var(--t3-page);
}

form.template3 .legalPage {
    padding-bottom: 88px;
}

form.template3 .legalPage * {
    font-family: var(--t3-body-font);
}

form.template3 .legalPage .topParagraphs {
    width: var(--t3-width);
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding: 0;
    font-size: 16px;
}

/* Title banner */
form.template3 .legalPage .topParagraphs:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 180px;
    margin-top: 32px;
    padding: 40px;
    border-radius: var(--t3-radius);
    background: linear-gradient(120deg, var(--t3-primary) 0%, color-mix(in srgb, var(--t3-primary) 72%, #000) 100%);
}

form.theme19 .legalPage .topParagraphs:first-child {
    border-radius: 22px;
}

form.template3 .legalPage .topParagraphs:first-child h1 {
    margin: 0;
    font-family: var(--t3-heading-font);
    font-size: 44px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
}

form.template3 .legalPage .topParagraphs:first-child p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .85);
}

/* Text column */
form.template3 .legalPage .topParagraphs + .topParagraphs {
    margin-top: 56px;
}

form.template3 .legalPage .topParagraphs + .topParagraphs > * {
    max-width: 860px;
}

form.template3 .legalPage .topParagraphs + .topParagraphs p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.75;
    color: color-mix(in srgb, var(--t3-text) 82%, #fff);
}

form.template3 .legalPage .topParagraphs + .topParagraphs h2 {
    margin: 48px 0 16px;
    padding-top: 40px;
    border-top: 1px solid var(--t3-border);
    font-family: var(--t3-heading-font);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--t3-text);
}

form.template3 .legalPage .topParagraphs + .topParagraphs h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

form.template3 .legalPage .topParagraphs + .topParagraphs h3 {
    margin: 28px 0 10px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--t3-text);
}

form.template3 .legalPage .topParagraphs + .topParagraphs ul {
    margin: 0 0 20px;
    padding-left: 22px;
}

form.template3 .legalPage .topParagraphs + .topParagraphs li {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.7;
    color: color-mix(in srgb, var(--t3-text) 82%, #fff);
}

form.template3 .legalPage .topParagraphs + .topParagraphs li::marker {
    color: var(--t3-primary);
}

form.template3 .legalPage .topParagraphs + .topParagraphs a {
    font-weight: 500;
    color: var(--t3-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

form.template3 .legalPage .topParagraphs + .topParagraphs a:hover {
    color: var(--t3-text);
}

form.template3 .legalPage .topParagraphs + .topParagraphs strong {
    font-weight: 600;
    color: var(--t3-text);
}

form.template3 .legalPage .topParagraphs + .topParagraphs em {
    font-style: italic;
}

@media (max-width: 767px) {
    form.template3 .legalPage {
        padding-bottom: 56px;
    }

    form.template3 .legalPage .topParagraphs:first-child {
        min-height: 140px;
        margin-top: 20px;
        padding: 28px 24px;
    }

    form.template3 .legalPage .topParagraphs:first-child h1 {
        font-size: 32px;
    }

    form.template3 .legalPage .topParagraphs + .topParagraphs {
        margin-top: 36px;
    }

    form.template3 .legalPage .topParagraphs + .topParagraphs h2 {
        margin-top: 36px;
        padding-top: 28px;
        font-size: 20px;
    }

    form.template3 .legalPage .topParagraphs + .topParagraphs p,
    form.template3 .legalPage .topParagraphs + .topParagraphs li {
        font-size: 15px;
    }
}

/* Tablet and phone: on these themes the fixed header (search on its own row) is taller than the
   shared 112px offset, so the top of every page sat under it. Match each header's height (the
   1px bottom border overlaps the page, as on desktop). */
@media (max-width: 1023px) {
    form.theme20 {
        --headerHeight: 120px;
    }

    form.theme21 {
        --headerHeight: 118px;
    }

    form.theme22 {
        --headerHeight: 134px;
    }

    form.theme23 {
        --headerHeight: 120px;
    }
}

/* Header (Landing Page 4): 89px tall with a faint bottom line, menu centred on the page,
   larger search box with the cart beside it. Desktop only; tablet and phone keep their layout. */
@media (min-width: 1024px) {
    form.theme22 {
        --headerHeight: 89px;
    }

    form.theme22 header.t3-header {
        border-bottom: 1px solid color-mix(in srgb, #000 4%, var(--t3-page));
    }

    form.theme22 .t3-header-main {
        position: relative;
        grid-template-areas: "logo . search actions";
        grid-template-columns: auto 1fr auto auto;
        gap: 16px;
    }

    form.theme22 .t3-nav {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    form.theme22 .t3-nav > ul {
        gap: 40px;
    }

    form.theme22 .t3-nav > ul > li > a {
        font-size: 14.5px;
        color: #5c5857;
    }

    form.theme22 .t3-nav > ul > li.t3-nav-shop > a {
        color: var(--t3-primary);
    }

    form.theme22 .t3-nav-us {
        display: none;
    }

    form.theme22 .t3-search {
        width: 269px;
        max-width: 269px;
        height: 48px;
        border-color: #ebe8e0;
    }

    form.theme22 .t3-search-text {
        height: 46px;
        padding: 0 0 0 20px;
        font-size: 14px;
    }

    form.theme22 .t3-search-text::placeholder {
        font-size: 14px;
        color: #77878f;
    }

    form.theme22 .t3-search-btn {
        height: 46px;
        padding: 0 20px 0 12px;
    }

    form.theme22 .t3-search-btn svg {
        width: 17px;
        height: 17px;
    }
}

/* Account menu (desktop): drop it from the header's bottom line instead of overlapping it, right edge
   on the icon. --t3-account-drop is the gap from the icon's bottom to the header's bottom per theme. */
@media (min-width: 1024px) {
    form.template3 .t3-account-menu {
        top: calc(100% + var(--t3-account-drop, 8px));
        border-top: 0;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
    }

    form.theme19 {
        --t3-account-drop: 32px;
    }

    form.theme20,
    form.theme21 {
        --t3-account-drop: 18px;
    }

    form.theme22 {
        --t3-account-drop: 25px;
    }

    form.theme23 {
        --t3-account-drop: 19px;
    }
}

/* Open state: a soft tint behind the icon instead of the browser's black focus ring. */
form.template3 .t3-account-toggle:focus {
    outline: none;
}

form.template3 .t3-account-toggle:focus-visible {
    outline: 2px solid var(--t3-primary);
    outline-offset: 2px;
}

form.template3 .t3-account.t3-open .t3-account-toggle {
    background: color-mix(in srgb, var(--t3-primary) 10%, transparent);
    color: var(--t3-primary);
}

/* Shop menu (desktop): drop it from the header's bottom line like the account menu.
   --t3-shop-drop is the gap from the Shop item's bottom to the header's bottom per theme. */
@media (min-width: 1024px) {
    form.template3 .t3-nav-dropdown {
        top: calc(100% + var(--t3-shop-drop, 8px));
        border-top: 0;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
    }

    form.theme19 {
        --t3-shop-drop: 42px;
    }

    form.theme20,
    form.theme21 {
        --t3-shop-drop: 26px;
    }

    form.theme22 {
        --t3-shop-drop: 33px;
    }

    form.theme23 {
        --t3-shop-drop: 27px;
    }
}

/* =====================================================================
   Header cart panel (all Template 3 themes): same layout as before, but
   lined up with the header width, in the template's font and colours,
   with lighter column labels, framed thumbnails, hairlines between items
   and buttons in the template style.
   ===================================================================== */
form.template3 .similar-checkout-div {
    box-shadow: 0 16px 32px rgba(0, 0, 0, .08);
}

form.template3 .headerCart {
    position: relative;
    border-top: 0;
    border-bottom: 0;
    padding: 8px 0 24px;
}

form.template3 .headerCart .cs_table,
form.template3 .headerCart .cs_cartButtonsContainer {
    width: auto !important;
    max-width: min(var(--t3-width), calc(100% - 32px));
    margin: 0 auto;
}

form.template3 .headerCart .cs_table {
    position: relative;
}

form.template3 .headerCart .cs_tableRow {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Column labels */
form.template3 .headerCart .cs_tableHead .cs_tableRow {
    padding: 16px 0 12px;
    border-bottom: 1px solid var(--t3-border);
}

form.template3 .headerCart .cs_tableHead .cs_tableColumn {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t3-muted);
}

/* Items */
form.template3 .headerCart .cs_tableBody > .cs_tableRow {
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--t3-border);
}

form.template3 .headerCart .cs_tableBody > .cs_tableRow:last-child {
    border-bottom: 0;
}

form.template3 .headerCart .cs_image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    padding: 6px;
    border: 1px solid var(--t3-border);
    border-radius: 8px;
    background: #fff;
}

form.template3 .headerCart .cs_image a img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

form.template3 .headerCart .cs_ShoppingCartProductName {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--t3-text);
}

form.template3 .headerCart .cs_ShoppingCartSummary a:hover .cs_ShoppingCartProductName {
    color: var(--t3-primary);
}

form.template3 .headerCart .cs_ShoppingCartProductType {
    margin-top: 4px;
    font-size: 13px;
    color: var(--t3-muted);
}

form.template3 .headerCart .cs_Quantity label,
form.template3 .headerCart .cs_Price label,
form.template3 .headerCart .cs_Total label {
    margin: 0;
    font-size: 15px;
    color: var(--t3-text);
}

form.template3 .headerCart .cs_Total label {
    font-weight: 600;
}

form.template3 .headerCart .cs_Delete .fa {
    font-size: 16px;
    color: var(--t3-muted);
}

form.template3 .headerCart .cs_Delete a:hover .fa {
    color: var(--t3-primary);
}

/* Close: one muted X in the label row; the bottom one only on phones, where the labels are hidden */
form.template3 .headerCart .close-btn {
    color: var(--t3-muted);
    font-size: 16px;
    cursor: pointer;
}

form.template3 .headerCart .close-btn.topbtn {
    right: 0;
}

form.template3 .headerCart .close-btn:hover {
    color: var(--t3-primary);
}

@media (min-width: 768px) {
    form.template3 .headerCart > .close-btn {
        display: none;
    }
}

/* Buttons */
form.template3 .headerCart .cs_cartButtonsContainer {
    padding-top: 20px;
}

/* The global .btn rule is all !important, hence the !important here (as on the product list buttons). */
form.template3 .headerCart .cs_cartButtonsContainer .btn {
    padding: 11px 26px !important;
    border: 1px solid var(--t3-primary) !important;
    border-radius: var(--t3-btn-radius) !important;
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
}

form.template3 .headerCart .cs_cartButtonsContainer .btn.btnBlue {
    background: transparent !important;
    color: var(--t3-primary) !important;
}

form.template3 .headerCart .cs_cartButtonsContainer .btn.btnBlue:hover {
    background: color-mix(in srgb, var(--t3-primary) 8%, #fff) !important;
}

form.template3 .headerCart .cs_cartButtonsContainer .btn.btnOrange {
    background: var(--t3-primary) !important;
}

form.template3 .headerCart .cs_cartButtonsContainer .btn.btnOrange:hover {
    background: color-mix(in srgb, var(--t3-primary) 85%, #000) !important;
}

/* Orange: white text is hard to read on the light orange, so use the black of its hero buttons */
form.theme21 .headerCart .cs_cartButtonsContainer .btn {
    border-color: #111 !important;
}

form.theme21 .headerCart .cs_cartButtonsContainer .btn.btnBlue {
    color: #111 !important;
}

form.theme21 .headerCart .cs_cartButtonsContainer .btn.btnBlue:hover {
    background: #f4f4f4 !important;
}

form.theme21 .headerCart .cs_cartButtonsContainer .btn.btnOrange,
form.theme21 .headerCart .cs_cartButtonsContainer .btn.btnOrange:hover {
    background: #111 !important;
}

@media (max-width: 767px) {
    form.template3 .headerCart .cs_ShoppingCartProductName {
        font-size: 14px;
    }

    form.template3 .headerCart .cs_image a {
        width: 64px;
        height: 64px;
    }
}

/* =====================================================================
   Page navigation (product list, all Template 3 themes): no box around
   it; first/previous/next/last as outlined icon buttons in the template's
   button shape, a matching page select, and lighter text between them.
   ===================================================================== */
form.template3 .PageNavigation {
    max-width: none;
    margin: 40px auto 8px;
    padding: 0;
    border: 0;
}

form.template3 .PageNavigation .innerTable {
    width: auto !important;
    border-collapse: separate;
}

form.template3 .PageNavigation .innerTable td {
    padding: 0 4px;
    vertical-align: middle;
}

form.template3 .PageNavigation a.NavigationButtonPressed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--t3-primary) 30%, #fff);
    border-radius: var(--t3-btn-radius);
    background: #fff;
    color: var(--t3-primary);
    transition: background-color .15s, border-color .15s, color .15s;
}

form.template3 .PageNavigation a.NavigationButtonPressed:hover {
    border-color: var(--t3-primary);
    background: var(--t3-primary);
    color: #fff;
}

/* Orange: the light orange is too faint for the arrows, so use black as on its other buttons */
form.theme21 .PageNavigation a.NavigationButtonPressed {
    border-color: #ddd;
    color: #111;
}

form.theme21 .PageNavigation a.NavigationButtonPressed:hover {
    border-color: #111;
    background: #111;
    color: #fff;
}

form.template3 .PageNavigation a.NavigationButtonPressed .material-symbols-outlined {
    font-size: 20px;
}

/* Middle: "Total: 5726 - Showing Page : [n] of 191" */
form.template3 .PageNavigation .innerTable td:nth-child(3) {
    padding: 0 20px;
    white-space: nowrap;
}

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

form.template3 .PageNavigation select {
    width: auto !important;
    min-width: 76px;
    height: 40px;
    margin: 0 6px;
    padding: 0 34px 0 16px;
    border: 1px solid var(--t3-border);
    border-radius: var(--t3-btn-radius);
    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 14px center;
    font-size: 14px;
    font-weight: 600;
    color: var(--t3-text);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

form.template3 .PageNavigation select:hover,
form.template3 .PageNavigation select:focus {
    border-color: var(--t3-primary);
    outline: none;
}

@media (max-width: 767px) {
    form.template3 .PageNavigation {
        margin-top: 28px;
    }

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

    form.template3 .PageNavigation .innerTable tr {
        justify-content: center !important;
        gap: 8px;
    }

    form.template3 .PageNavigation .innerTable td {
        width: auto !important;
        min-width: 40px !important;
        padding: 0;
    }

    form.template3 .PageNavigation .innerTable td:nth-child(3) {
        white-space: normal;
        text-align: center;
    }

    form.template3 .PageNavigation font {
        font-size: 13px;
    }
}

/* Footer: a hairline across the top to separate it from the page (all Template 3 themes) */
form.template3 footer.t3-footer {
    border-top: 1px solid var(--t3-border);
}