/*
 * Southbank Shop - WooCommerce styles.
 *
 * This is the child theme's real stylesheet; style.css carries only the theme
 * header WordPress reads. Enqueued as `southbank-shop-style` after the parent's
 * `kyubi-custom-css`, so rules here override the parent's without needing to
 * out-specify it.
 */

/* ==========================
   Colour variables
   ==========================

   These names are kept - fifty-odd declarations across this file use them - but
   the brand ones now resolve to the site's Default Colour Profile rather than
   to the hex values they were frozen at when the shop was a child of the old
   theme. The shop follows Global Options from here, like the rest of the site,
   instead of staying on Kyubi's blue.

   The Default profile is the right one throughout: every surface in the shop -
   cards, cart, checkout - is white, which is the case the Default profile
   describes. The old values stay as var() fallbacks, so a site with no profile
   configured looks exactly as it did.

   The neutrals below the brand block are deliberately literal. Borders, page
   tints and the two error reds are not brand colours, there is no token for
   them, and pointing them at one would tie a hairline border to whatever a
   school picks as its link colour. */
:root {
    /* Brand - wired to the Default Colour Profile. */
    --color-brand-blue: var(--cwb-default-link, #204ccf);
    --color-btn-blue: var(--cwb-default-btn-bg, #3c78bd);
    --color-btn-blue-hover: var(--cwb-default-btn-bg-hover, #2f5f96);
    --color-text-dark: var(--cwb-body-text, #10171e);

    /* Neutrals and states - intentionally not themed. */
    --color-border: #e6e6e6;
    --color-bg-light: #fafaf5;
    --color-white: #fff;
    --color-badge-red: #e53935;
    --color-delete-red: #dc2626;
}

/* Center align the custom shop header */
.custom-shop-header {
    text-align: center;
    margin-top: 60px;
}

/* Shop page title styling */
.custom-shop-title {
    font-size: 64px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

/* Grade filter instructions block, shown above the Grade filter */
/*
 * The intro sits on the same left edge as the products it introduces.
 *
 * It was 900px centred inside the 1140px content area, so it started 120px in
 * from the grid below it - measured at x=263 against the grid's x=143 - and the
 * page read as two columns that did not line up. The reading measure is kept by
 * capping the text rather than centring a narrower box.
 */
.shop-grade-intro {
    max-width: 900px;
    margin: 0 0 40px;
    text-align: left;
    color: var(--color-text-dark);
    font-size: 16px;
    line-height: 1.6;
}

.shop-grade-intro p {
    margin: 0 0 20px;
}

.shop-grade-intro p:last-child {
    margin-bottom: 0;
}


/*
 * The main WooCommerce content area.
 *
 * `margin: auto` only centres something that has a width to spare, and this
 * rule never set one - the 1140px came from a site-level inline stylesheet
 * (WPCode / Customizer) on the old site rather than from any theme file, so it
 * did not travel with the theme and the shop rendered full-bleed from x=0.
 * It is declared here now so it deploys with the code.
 *
 * Not the theme's .container: that is 1320px at 1400px and up, where the shop
 * has always been a flat 1140px.
 */
body.woocommerce div#primary,
body.woocommerce-cart div#primary,
body.woocommerce-checkout div#primary {
    max-width: 1170px;
    margin: 70px auto;
    padding-left: 15px;
    padding-right: 15px;
}

/*
 * One horizontal inset for every shop template.
 *
 * The 15px gutter above is the shop's only side inset: the content column is
 * 1140px and, once the screen is narrower than that, sits 15px in from each
 * edge - the same 15px the header logo and the footer text sit at on a phone.
 * Nothing inside it adds more, so every template lines up with every other.
 *
 * It replaces breakpoint patches that gave each template a different answer.
 * Shop, category and product pages were padded through `main#main` below
 * 1025px and checkout through `.woocommerce`; the cart through nothing at all,
 * so on a phone its return link, cart item, Order Summary and empty-cart
 * notice ran to both edges of the screen. Cart, checkout and order-received
 * also take their breadcrumb from the parent's page.php, inside a
 * `.container-fluid` whose own 12px put it out of line with the content below
 * it on desktop.
 */
body.woocommerce #primary .container-fluid,
body.woocommerce-cart #primary .container-fluid,
body.woocommerce-checkout #primary .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/*
 * The same vertical rhythm on the page-based screens as on the shop.
 *
 * On shop and category pages the title block sits above #primary: the title
 * starts 60px under the site header, and #primary's 70px top margin is the gap
 * between the title and the breadcrumb, with 30px from there to the content.
 * On cart, checkout and order received the title and breadcrumb are printed
 * inside #primary (southbank_shop_print_page_header()), so the title's 60px
 * merged with #primary's 70px and the breadcrumb sat hard against the title.
 */
body.woocommerce-cart div#primary,
body.woocommerce-checkout div#primary {
    margin-top: 60px;
}

.custom-shop-header + .woocommerce-breadcrumb {
    margin-top: 70px;
}

/*
 * WooCommerce's own base layout.
 *
 * The parent theme drops WooCommerce's stylesheets entirely
 * (`woocommerce_enqueue_styles` -> `__return_empty_array`) because the other
 * Cognita Europe schools have no shop, and the parent's woocommerce.css
 * replaces only part of what that removes. The rest - the list reset, the
 * centred cell, the fluid image, the loop title's size - was being supplied by
 * that same inline stylesheet.
 *
 * Without the list reset the browser leaves `ul.products` as a shrink-to-fit
 * box, so the floated items sized themselves against roughly half the page:
 * measured at 600px wide instead of 1140px, which is what pushed the tiles into
 * a narrow stack against the left edge.
 *
 * These are WooCommerce's own values, kept verbatim, so the parent's
 * woocommerce.css - written on top of them - behaves as it always has.
 */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: block;
    margin: 0 0 1em;
    padding: 0;
    list-style: none outside;
    clear: both;
}

.woocommerce .columns-3 {
    width: 100%;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    text-align: center;
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 1em;
    box-shadow: none;
}

/*
 * The loop title. Left to the theme it inherits the h2 scale - measured at
 * 32px against the 16px it has always been - which is what made the category
 * names tower over the tiles and wrap their item counts onto a second line.
 * Size and rhythm are pinned here; the colour is deliberately not, so the shop
 * follows Cognita Europe's link colour rather than the old theme's blue.
 */
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 0.5em 0;
    margin: 0;
    font-size: 1em;
    line-height: 28px;
}

/* Add spacing below the WooCommerce breadcrumb */
.woocommerce .woocommerce-breadcrumb {
    margin-bottom: 30px;
}

/* Grade filter: styled dropdown + "Filter" button, side by side.
   Shares the same max-width/centering as .shop-grade-intro so the filter
   row lines up under the intro text instead of sitting at the page's
   full-width left edge. */
/* Same left edge as the intro above it and the products below it. */
.grade-filter-wrapper {
    display: flex;
    align-items: stretch;
    gap: 12px;
    max-width: 900px;
    margin: 0 0 40px;
}

.grade-filter-select {
    position: relative;
    min-width: 220px;
}

/* Custom dropdown arrow (replaces the native one) */
.grade-filter-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-text-dark);
    border-bottom: 2px solid var(--color-text-dark);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.grade-filter-select select#grade-filter {
    width: 100%;
    height: 100%;
    min-width: 220px;
    padding: 14px 40px 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    font-size: 15px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.grade-filter-select select#grade-filter:focus {
    outline: none;
    border-color: var(--color-btn-blue);
}

.grade-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 140px;
    padding: 14px 22px;
    border: none;
    border-radius: 6px;
    background-color: var(--color-btn-blue);
    color: var(--color-white);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.grade-filter-button:hover,
.grade-filter-button:focus {
    background-color: var(--color-btn-blue-hover);
}

.grade-filter-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.grade-filter-button-icon {
    font-size: 16px;
    line-height: 1;
}

/* Any notice shown inside the Grade filter results area - the "select a
   grade" prompt, WooCommerce's own "No products were found matching your
   selection." after filtering to an empty grade, etc. Overrides the
   parent theme's default `.woocommerce-info` / `.woocommerce-error`
   banner (solid color background, full-width table display) with a
   softer callout that lines up in the same column as the intro
   text/filter, so every notice in this area looks consistent. */
#shop-loop-results .woocommerce-info,
#shop-loop-results .woocommerce-error,
#shop-loop-results .woocommerce-message,
#shop-loop-results .woocommerce-no-products-found {
    display: block;
    max-width: 900px;
    /* Left-aligned with the intro and the filter above it, and with the product
       grid that replaces it, rather than centred in the content area - which
       put it on a fourth left edge of its own. */
    margin: 0 0 40px;
    padding: 16px 20px;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-dark);
    font-size: 15px;
    text-align: left;
    clear: none;
}

#shop-loop-results .woocommerce-info::before,
#shop-loop-results .woocommerce-error::before,
#shop-loop-results .woocommerce-message::before {
    content: none;
}

/* The "no products found" template wraps its own .woocommerce-info in a
   .woocommerce-no-products-found div - avoid double padding/border from
   both layers matching the rule above. */
#shop-loop-results .woocommerce-no-products-found .woocommerce-info {
    padding: 0;
    border: 0;
    background: none;
}

/*
 * The parent theme relies on `ul.products { display: table; }` to contain
 * its floated li.product grid items, which doesn't reliably size the list
 * to its floated children - the list collapses to ~0 height and whatever
 * comes after it (the footer) overlaps the products. Give the AJAX
 * results wrapper its own explicit clearfix so the products render with
 * correct height both on first load and after the Grade filter reloads it.
 */
#shop-loop-results::after {
    content: "";
    display: table;
    clear: both;
}

/* Hide Basket text */
.basket-menu .ubermenu-target-text {
    display: none !important;
}

/* Center the icon and set the positioning context for the badge */
.basket-menu .ubermenu-target {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Add Font Awesome icon */
.basket-menu .ubermenu-target::before {
    content: "\f07a";
    /* Shopping Cart/Basket */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 22px;
}

/* Style the cart item count badge */
.basket-menu .cart-count {
    position: absolute;
    top: -2px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-badge-red);
    color: var(--color-white);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
}

.single-product .woocommerce-message:focus {
    outline: none;
    box-shadow: none;
}

/* Default: Hide cart icon */
.basket-menu {
    display: none !important;
}

/* Show only on WooCommerce pages */
body.post-type-archive-product .basket-menu,
body.tax-product_cat .basket-menu,
body.tax-product_tag .basket-menu,
body.single-product .basket-menu,
body.woocommerce-cart .basket-menu,
body.woocommerce-checkout .basket-menu {
    display: list-item !important;
}

.single-product .single_add_to_cart_button,
.single-product .view-cart-btn {
    line-height: 1.4 !important;
}

/* ==========================
   Grade Info (single product page)
========================== */

/* Grade is shown in the Product Add-Ons totals summary box (next to
   Student First Name / Last Name) - the field itself stays hidden so
   only that summary line is visible, not a separate input on the page. */
#wc-pao-addon-shop-grade {
    display: none;
}

/* ==========================
   Cart Notices (e.g. "Product removed. Undo?")
========================== */

.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info {
    display: block;
    margin: 0 0 30px;
    padding: 16px 20px;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-dark);
    font-size: 15px;
    text-align: left;
}

.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-cart .woocommerce-info::before {
    content: none;
}

.woocommerce-cart .woocommerce-message a,
.woocommerce-cart .woocommerce-error a,
.woocommerce-cart .woocommerce-info a {
    color: var(--color-brand-blue);
    font-weight: 600;
    text-decoration: underline;
}

/* ==========================
   Checkout Error Notices - accessibility fix
   (parent theme leaves .woocommerce-error text color unset, so it falls
   back to the site's blue link/heading color on the red background,
   which fails contrast. Force white text/bullets instead. Covers both
   the billing field validation list and the Stripe card-errors box,
   since both render as a plain .woocommerce-error on this page.)
========================== */

.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-error li,
.woocommerce-checkout .woocommerce-error a {
    color: var(--color-white);
}

/* Space the Stripe card error notice away from the card icons/fields
   above it, on the checkout page only - the same markup (payment_method_stripe_cc
   > .woocommerce-NoticeGroup) also appears on My Account > Payment Methods
   and the order-pay page, where this spacing isn't needed. */
.woocommerce-checkout div.payment_method_stripe_cc > .woocommerce-NoticeGroup {
    margin: 10px 0px 0px 18px;
}

.woocommerce-checkout ul.wc_payment_methods.payment_methods.methods li.wc_payment_method {
    margin-bottom: 15px !important;
}

/* ==========================
   Cart Layout
========================== */

.woocommerce-cart .custom-ecommerce-cart {
    width: 68%;
    margin-right: 20px;
}

.woocommerce-cart .custom-cart-collaterals {
    width: 30%;
    border: 2px solid var(--color-border);
    padding: 20px;
    background: var(--color-bg-light);
    border-radius: 25px;
}


/* ==========================
   Cart Table
========================== */

.woocommerce-cart .custom-ecommerce-cart .shop_table {
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0 40px;
    margin-top: -40px;
}

.woocommerce-cart .custom-ecommerce-cart tr.woocommerce-cart-form__cart-item.cart_item {
    display: flex;
    align-items: stretch;
    margin-bottom: 20px;
}

.woocommerce-cart .custom-ecommerce-cart .shop_table td {
    padding: 0 !important;
    border-top: 0 !important;
    vertical-align: top;
    background: var(--color-bg-light);
}

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr td {
    border-top: 2px solid var(--color-border) !important;
    border-bottom: 2px solid var(--color-border);
    width: 100%;
}

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr td:first-child {
    border-left: 2px solid var(--color-border) !important;
    width: 200px;
}

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr td:last-child {
    border-right: 2px solid var(--color-border) !important;
}

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tbody tr td:first-child {
    border-radius: 25px 0 0 25px;
}

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tbody tr td:last-child {
    border-radius: 0 25px 25px 0;
}

/* Continue Shopping Row */

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr.continue-shopping-button td {
    border: 0 !important;
    background: var(--color-white);
}


/* ==========================
   Product
========================== */

.woocommerce-cart .custom-ecommerce-cart img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    border-radius: 25px 0 0 25px;
    width: 200px;
    height: 100%;
    object-fit: cover;
    display: block;
}

.woocommerce-cart .custom-ecommerce-cart td.product-name {
    padding: 20px !important;
}

.woocommerce-cart .custom-ecommerce-cart .product-name a {
    color: var(--color-text-dark);
    font-size: 24px;
    line-height: 30px;
}

.woocommerce-cart .custom-ecommerce-cart .product-price .woocommerce-Price-amount.amount {
    display: block;
    margin-bottom: 20px;
    padding: 10px 0;
    color: var(--color-brand-blue);
    font-size: 24px;
    font-weight: 600;
}


/* ==========================
   Quantity
========================== */

.woocommerce-cart .custom-ecommerce-cart input.qty {
    width: 20% !important;
    padding: 8px 15px;
    border: 2px solid var(--color-border);
    border-radius: 43px;
    outline: none;
}

.woocommerce-cart .custom-ecommerce-cart .product-quantity {
    margin-top: 35px;
}


/* ==========================
   return to product
========================== */

/* "Return to products" is a secondary action - the page's job is to get you to
   payment - so it is a link with the site's chevron rather than a second solid
   button competing with "Continue to payment". Same treatment on the thank-you
   and View Order pages, where it is the same action.

   inline-flex matters as well as looking right: WooCommerce's own
   `.button{display:inline-block}` is not on the page, so these were inline
   elements whose vertical padding did not affect the line box - which is why
   the heading above overlapped the button and the arrow sat on top of the
   label. */
.woocommerce-cart .custom-returns-to-products a.button.return-products-btn,
.order-details-return-to-shop a.button.return-products-btn {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cwb-default-link, #7d52ff);
    font-family: var(--font-family-base, inherit);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    transition: color .2s ease;
}

.woocommerce-cart .custom-returns-to-products a.button.return-products-btn:hover,
.woocommerce-cart .custom-returns-to-products a.button.return-products-btn:focus,
.order-details-return-to-shop a.button.return-products-btn:hover,
.order-details-return-to-shop a.button.return-products-btn:focus {
    background: none;
    color: var(--cwb-default-link-hover, #3f2980);
}

/* "Continue to payment" is the primary action, so it keeps the solid button -
   from the Default profile, and it does change background on hover, which is
   what a solid button does everywhere else on the site. */
.woocommerce-cart .custom-cart-collaterals .checkout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 26px;
    border: 2px solid var(--cwb-default-btn-bg, #7d52ff);
    border-radius: 6px;
    background: var(--cwb-default-btn-bg, #7d52ff);
    color: var(--cwb-default-btn-text, #fff);
    font-family: var(--font-family-base, inherit);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.woocommerce-cart .custom-cart-collaterals .checkout-button:hover,
.woocommerce-cart .custom-cart-collaterals .checkout-button:focus {
    border-color: var(--cwb-default-btn-bg-hover, #3f2980);
    background: var(--cwb-default-btn-bg-hover, #3f2980);
    color: var(--cwb-default-btn-text-hover, #fff);
}

/* Thank you page + My Account "View order" page both render this via the
   shared order/order-details.php template. Displayed inline (not the
   cart's fixed 300px) since it sits above the order summary, not in a
   full-width cart layout. */
.order-details-return-to-shop {
    margin-bottom: 30px;
}

/* Thank you page only: `.custom-order-confirmation-details` (thankyou.php)
   wraps the "Thank you..." message and, further down, the order details
   template - this button included. It doesn't exist on My Account >
   View Order, so this row layout can't affect that page. Put the
   message and button on one row, then force the order/customer detail
   sections onto their own full-width line below. */
.custom-order-confirmation-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.custom-order-confirmation-details .woocommerce-thankyou-order-received {
    margin: 0;
    text-align: left;
}

.custom-order-confirmation-details .order-details-return-to-shop {
    margin: 0;
}

.custom-order-confirmation-details .woocommerce-order-details,
.custom-order-confirmation-details .woocommerce-customer-details {
    flex: 1 0 100%;
}

/* WooCommerce's `table.shop_table { width: 100% }` is not on the page - the
   parent drops WooCommerce's stylesheet - so the order details table shrank
   to its content, about 865px at 1440px, above a billing card the full 1140px
   wide. Same fault, and same fix, as the cart's Order Summary table. */
.custom-order-confirmation-details table.shop_table {
    width: 100%;
}

/* The page title is printed on woocommerce_before_thankyou, which fires inside
   this flex row - so it was a 350px item beside the message rather than the
   centred full-width title every other shop page has. */
.custom-order-confirmation-details > .custom-shop-header,
.custom-order-confirmation-details > .woocommerce-breadcrumb {
    flex: 1 0 100%;
}

/* Margins do not collapse inside a flex row, and the row adds its own 16px gap,
   so the title's 60px landed on top of #primary's and both breadcrumb gaps grew
   by 16px. These put the page back on the rhythm the other shop pages use: 60px
   to the title, 70px to the breadcrumb, 30px to the content. */
.custom-order-confirmation-details > .custom-shop-header {
    margin-top: 0;
}

.custom-order-confirmation-details > .custom-shop-header + .woocommerce-breadcrumb {
    margin-top: 54px;
    margin-bottom: 14px;
}

/* The order actions - Pay and Cancel on an unpaid order - are printed back to
   back with nothing between them, so they read as one word, "PayCancel".
   WooCommerce's own button styling spaced them, and it is not on the page. */
.order-actions-button + .order-actions-button {
    margin-left: 1.25em;
}



/* ==========================
   Buttons Icons
========================== */

/* The site's own chevron - the same glyph `.link .btn-link:after` puts on every
   link - so the two actions here are marked the same way as links elsewhere.
   It sits in the flow as a flex sibling rather than absolutely at right:18px,
   which is what had it printing on top of the label. */
.woocommerce-cart a.button.return-products-btn::after,
.woocommerce-cart .custom-cart-collaterals .checkout-button::after,
.order-details-return-to-shop a.button.return-products-btn::after {
    content: "\f105";
    margin-left: 10px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}


/* ==========================
   Cart Totals
========================== */

.woocommerce-cart .custom-cart-collaterals .cart_totals h2 {
    margin: 0 0 20px;
    font-family: var(--font-family-heading, inherit);
    font-size: var(--h4-size, 22px);
    font-weight: 700;
    line-height: var(--heading-line-height, 1.2);
    color: var(--cwb-body-text, #10171e);
}

/* The totals table needs a width.
 *
 * WooCommerce's `table.shop_table{width:100%}` is not on the page, so the table
 * was shrink-to-fit and the label sat directly against the figure - "Subtotal"
 * and the amount reading as one word - with nothing pushing the amount to the
 * right-hand edge that `td:last-child{text-align:right}` was aiming at. */
.woocommerce-cart .custom-cart-collaterals table.shop_table {
    width: 100%;
    margin: 0 0 24px;
    border: 0 !important;
    border-collapse: collapse;
}

.woocommerce-cart .custom-cart-collaterals .shop_table th,
.woocommerce-cart .custom-cart-collaterals .shop_table td {
    padding: 8px 0;
    border: 0 !important;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-text-dark);
    text-align: left;
    vertical-align: baseline;
}

.woocommerce-cart .custom-cart-collaterals .shop_table th {
    font-weight: 700;
}

/* The order total is the figure that matters, so it is separated from the
   subtotal above it and carries the weight. */
.woocommerce-cart .custom-cart-collaterals .shop_table tr.order-total th,
.woocommerce-cart .custom-cart-collaterals .shop_table tr.order-total td {
    padding-top: 16px;
    border-top: 1px solid var(--color-border) !important;
    font-family: var(--font-family-heading, inherit);
    font-size: var(--h4-size, 22px);
    font-weight: 700;
    color: var(--cwb-body-text, #10171e);
}

.woocommerce-cart .custom-cart-collaterals .shop_table td:last-child {
    width: 40%;
    text-align: right;
    white-space: nowrap;
}

.woocommerce-cart .custom-cart-collaterals .checkout-button {
    width: 100%;
}

/* The button had nothing between it and the total above, so on a narrow
   summary the two ran together. */
.woocommerce-cart .custom-cart-collaterals .wc-proceed-to-checkout {
    margin: 0;
    padding: 0;
}


/* ==========================
   Variation Data
========================== */

.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dt.variation-StudentFirstName,
.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dt.variation-StudentLastName,
.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dt.variation-StudentGrade,
.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dt p {
    display: flex;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dt p {
    margin-left: 10px;
}

.woocommerce-cart .custom-cart-page {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.woocommerce-cart .custom-cart-page .product-quantity {
    position: relative;
}

.woocommerce-cart .custom-cart-page .product-name a.cart-item-delete-icon {
    color: var(--color-delete-red);
    font-size: 16px;
}

.woocommerce-cart .custom-cart-page .product-quantity .cart-item-removed-icon {
    position: absolute;
    top: 7px;
    left: 14%;
    cursor: pointer;
}

.woocommerce-cart .custom-cart-page .product-quantity input[type="number"]::-webkit-inner-spin-button,
.woocommerce-cart .custom-cart-page .product-quantity input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.woocommerce-cart .custom-cart-page .product-quantity input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/***cart empty css*/

.woocommerce-tabs.custom-product-desc h2.custom-product-desc-heading {
    margin-bottom: 0 !important;
    padding-top: 40px;
}



/* ==========================================================================
   Product tiles as cards
   ==========================================================================

   The same card treatment as the category tiles on the shop landing, so a
   visitor moving from campus to lunches sees one thing rather than two: white
   card, the theme's shadow, a cropped image, a linked title and the price as a
   meta line. Colour and type come from the tokens, not from this file.

   The layout is a grid for the same reason as the category tiles - floats
   cannot give equal-height cards, and product names here run to three lines,
   so neighbours were ending up different heights. The float reset sits inside
   the :has() guard with the grid, so a browser without :has() keeps the float
   widths and still gets the card styling. */
.woocommerce ul.products li.product:not(.product-category) {
    text-align: left;
    background: #fff;
    border-radius: var(--bs-card-border-radius, 6px);
    overflow: hidden;
    box-shadow: 0 0 30px rgba(16, 23, 30, .15);
    transition: box-shadow .25s ease;
}

.woocommerce ul.products:has(li.product:not(.product-category)) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 0 0 1em;
}

.woocommerce ul.products:has(li.product:not(.product-category)) li.product {
    width: auto;
    max-width: none;
    float: none;
    clear: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 576px) {
    .woocommerce ul.products:has(li.product:not(.product-category)) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .woocommerce ul.products.columns-2:has(li.product:not(.product-category)) {
        grid-template-columns: repeat(2, 1fr);
    }

    .woocommerce ul.products.columns-3:has(li.product:not(.product-category)) {
        grid-template-columns: repeat(3, 1fr);
    }

    .woocommerce ul.products.columns-4:has(li.product:not(.product-category)) {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* The card is a column so the button can sit on the bottom edge whatever the
   title runs to - which is what keeps a row of cards looking level. */
.woocommerce ul.products li.product:not(.product-category) {
    display: flex;
    flex-direction: column;
}

.woocommerce ul.products li.product:not(.product-category) > a.woocommerce-LoopProduct-link {
    display: block;
    text-decoration: none;
}

.woocommerce ul.products li.product:not(.product-category):hover,
.woocommerce ul.products li.product:not(.product-category):focus-within {
    box-shadow: 0 8px 36px rgba(16, 23, 30, .22);
}

.woocommerce ul.products li.product:not(.product-category) > a:focus-visible {
    outline: 2px solid var(--cwb-default-link, #7d52ff);
    outline-offset: 3px;
}

/* Square crop, matching the category tiles, rather than the fixed 350px height
   the tiles used before - which cropped differently at every column count. */
.tax-product_cat.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product:not(.product-category) a img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    margin: 0;
    border-radius: 0;
    transition: transform .35s ease;
}

.woocommerce ul.products li.product:not(.product-category):hover a img {
    transform: scale(1.04);
}

/* The card body.
 *
 * One padded block with its own rhythm rather than each element carrying its
 * own edge padding, which is what made the card feel cramped: the title, price
 * and button were each 16px from the edge with nothing between them.
 */
.woocommerce ul.products li.product:not(.product-category) > a.woocommerce-LoopProduct-link {
    padding: 24px 24px 0;
}

.tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0;
    margin: 0 0 12px;
    min-height: 0;
    font-family: var(--font-family-heading, inherit);
    font-size: var(--h4-link-size, 22px);
    line-height: var(--heading-line-height, 1.2);
    color: var(--cwb-default-link, #7d52ff);
}

.woocommerce ul.products li.product:not(.product-category):hover .woocommerce-loop-product__title {
    color: var(--cwb-default-link-hover, #3f2980);
}

/* The price is the card's headline fact, so it carries weight of its own -
   16px in the body colour read as a caption next to a 22px title. It sits in
   the body text colour rather than the link colour: it is information, not
   something to click. */
.tax-product_cat.woocommerce ul.products li.product span.price,
.woocommerce ul.products li.product:not(.product-category) span.price {
    display: block;
    min-height: 0;
    padding: 0;
    margin: 0;
    font-family: var(--font-family-heading, inherit);
    font-size: var(--h4-size, 22px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--cwb-body-text, #10171e);
}

.woocommerce ul.products li.product:not(.product-category) span.price del,
.woocommerce ul.products li.product:not(.product-category) span.price ins {
    text-decoration: inherit;
    background: none;
    color: inherit;
}

/* A sale price sits beside the original, which is struck through and quieter. */
.woocommerce ul.products li.product:not(.product-category) span.price del {
    margin-right: 8px;
    font-weight: 400;
    text-decoration: line-through;
    opacity: .6;
}

/* The card's button.
 *
 * WooCommerce's button styling is not on the page - the parent theme drops its
 * stylesheets - so this rendered as a bare text link. It takes the outline
 * button the site's other cards use, wired to the Default Colour Profile.
 *
 * Border and text change on hover; the background does not. That is what
 * .cwb-default-colours does with a.btn.btn-primary--border everywhere else on
 * the site, and filling the button on hover made it read as a different kind of
 * control from the same button in a WPBakery card.
 *
 * The auto top margin pushes it to the card's bottom edge, so a row of cards
 * has its buttons on one line however long the titles run.
 */
.woocommerce ul.products li.product:not(.product-category) .button {
    align-self: center;
    margin: auto 24px 24px;
    padding: 12px 28px;
    border: 2px solid var(--cwb-default-btn-outline-border, #7d52ff);
    border-radius: 6px;
    background: transparent;
    color: var(--cwb-default-btn-outline-text, #10171e);
    font-family: var(--font-family-base, inherit);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

.woocommerce ul.products li.product:not(.product-category) .button:hover,
.woocommerce ul.products li.product:not(.product-category) .button:focus {
    border-color: var(--cwb-default-btn-outline-border-hover, #3f2980);
    color: var(--cwb-default-btn-outline-text-hover, #10171e);
    background: transparent;
}

.woocommerce ul.products li.product:not(.product-category) .button:active {
    color: var(--cwb-default-btn-outline-text-active, #10171e);
}

/* The price needs room above the button without the button losing its grip on
   the bottom edge, so the gap belongs to the link block that ends above it. */
.woocommerce ul.products li.product:not(.product-category) > a.woocommerce-LoopProduct-link {
    margin-bottom: 20px;
}

/* Added to the cart, WooCommerce swaps in a "View cart" link beside the button;
   it gets the same alignment so the pair does not read as two different kinds
   of control. */
.woocommerce ul.products li.product:not(.product-category) .added_to_cart {
    align-self: center;
    margin: 0 24px 24px;
    font-size: 16px;
    color: var(--cwb-default-link, #7d52ff);
}

/* The image is flush to the card's edges; the padding above belongs to the
   text, not the picture. */
.woocommerce ul.products li.product:not(.product-category) > a.woocommerce-LoopProduct-link img {
    margin: -24px -24px 20px;
    width: calc(100% + 48px);
    max-width: none;
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product:not(.product-category),
    .woocommerce ul.products li.product:not(.product-category) a img {
        transition: none;
    }

    .woocommerce ul.products li.product:not(.product-category):hover a img {
        transform: none;
    }
}

/* ==========================================================================
   Single product
   ==========================================================================

   The two-column layout - picture on the left, everything you act on to the
   right - came from WooCommerce's own stylesheet, which the parent theme drops.
   Without it both halves ran the full width and stacked, so the page was a
   large photograph followed by a price, with the title missing entirely.

   The proportions are WooCommerce's own and match the live site measured at
   1440px: two 48% columns with a 4% gutter, 547px each inside the 1140px
   content area. Below 992px they stack, which is what the existing media
   queries further down this file already expect. */
@media (min-width: 992px) {

    .single-product.woocommerce div.product::after {
        content: "";
        display: table;
        clear: both;
    }

    .single-product.woocommerce div.product div.images {
        float: left;
        width: 48%;
        margin-bottom: 0;
    }

    .single-product.woocommerce div.product div.summary {
        float: right;
        width: 48%;
        margin-bottom: 0;
    }
}

/* The product title.
 *
 * The parent theme hides `h1.entry-title` site-wide - its pages get their title
 * from WPBakery instead - and WooCommerce's product title is
 * `<h1 class="product_title entry-title">`, so it was caught by that rule and
 * the product page had no heading at all. It is restored here, for the shop
 * only, rather than by loosening the parent's rule for every page. */
.single-product.woocommerce div.product h1.product_title.entry-title {
    display: block;
    margin: 0 0 12px;
    font-family: var(--font-family-heading, inherit);
    font-size: var(--h1-size, 36px);
    font-weight: 400;
    line-height: var(--heading-line-height, 1.2);
    color: var(--cwb-body-text, #10171e);
}

.single-product.woocommerce div.product div.images img {
    display: block;
    width: 100%;
    height: 480px;
    box-shadow: none;
    object-fit: cover;
    border-radius: var(--bs-card-border-radius, 6px);
}

/* The price gets the same treatment as the one on the product card, so the
   figure looks the same in the listing and on the product itself. */
.woocommerce.single-product div.product p.price {
    margin: 0 0 24px;
    font-family: var(--font-family-heading, inherit);
    font-size: var(--h4-size, 22px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--cwb-body-text, #10171e);
}

.single-product form.cart h2.wc-pao-addon-heading {
    margin: 0 0 4px;
    font-family: var(--font-family-heading, inherit);
    font-size: var(--h4-size, 22px);
    font-weight: 700;
    line-height: var(--heading-line-height, 1.2);
    color: var(--cwb-body-text, #10171e);
}

.single-product form.cart .wc-pao-addon .wc-pao-addon-description {
    font-style: italic;
    margin-bottom: 10px;
}

.single-product form.cart .quantity {
    display: none;
}

/* The add-on fields. WooCommerce's form styling is not on the page either, so
   these were unstyled browser defaults sitting next to a themed page. */
.single-product form.cart .wc-pao-addon-name {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-dark);
}

.single-product form.cart .wc-pao-addon input[type="text"],
.single-product form.cart .wc-pao-addon input[type="email"],
.single-product form.cart .wc-pao-addon textarea,
.single-product form.cart .wc-pao-addon select {
    width: 100%;
    max-width: 420px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-white);
    color: var(--color-text-dark);
    font-family: var(--font-family-base, inherit);
    font-size: 16px;
}

.single-product form.cart .wc-pao-addon input[type="text"]:focus,
.single-product form.cart .wc-pao-addon textarea:focus,
.single-product form.cart .wc-pao-addon select:focus {
    outline: none;
    border-color: var(--cwb-default-link, #7d52ff);
}

/* Add to cart is the page's one committing action, so it takes the solid
   button from the Default profile rather than the outline used for "View
   Product" in the listing. A solid button does change its background on
   hover - that is what .cwb-default-colours does with .btn-primary. */
.single-product .single_add_to_cart_button.button {
    display: inline-block;
    margin-top: 8px;
    padding: 14px 32px;
    border: 2px solid var(--cwb-default-btn-bg, #7d52ff);
    border-radius: 6px;
    background: var(--cwb-default-btn-bg, #7d52ff);
    color: var(--cwb-default-btn-text, #fff);
    font-family: var(--font-family-base, inherit);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.single-product .single_add_to_cart_button.button:hover,
.single-product .single_add_to_cart_button.button:focus {
    border-color: var(--cwb-default-btn-bg-hover, #3f2980);
    background: var(--cwb-default-btn-bg-hover, #3f2980);
    color: var(--cwb-default-btn-text-hover, #fff);
}

.single-product .single_add_to_cart_button.button:active {
    color: var(--cwb-default-btn-text-active, #fff);
}

/* The product meta - the "Categories:" line under the form. */
.single-product .product_meta {
    margin-top: 20px;
    font-size: 16px;
    color: var(--color-text-dark);
}

/* The description sits under both columns, full width. */
.single-product .custom-product-desc {
    clear: both;
    padding-top: 40px;
}

.single-product .woocommerce-tabs .panel h2:first-of-type,
.single-product .custom-product-desc-heading {
    margin: 0 0 12px;
    font-family: var(--font-family-heading, inherit);
    font-size: var(--h3-size, 28px);
    font-weight: 600;
    line-height: var(--heading-line-height, 1.2);
    color: var(--cwb-body-text, #10171e);
}

.single-product .wc-pao-addon .wc-pao-addon-wrap {
    margin-bottom: 10px;
}

/***cart page css returns to products***/
.custom-returns-to-products .return-to-products-wrapper {
    padding: 0 0 30px;
}

.custom-returns-to-products .return-to-products-wrapper p.return-text {
    margin-bottom: 10px;
    font-size: 26px;
    line-height: 30px;
}

/***thanyou page design css*****/

.custom-order-confirmation-details p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}

.woocommerce .custom-order-confirmation-details table.shop_table,
.woocommerce-checkout .woocommerce table.shop_table {
    border: 2px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-bg-light);
}

.woocommerce .custom-order-confirmation-details table.shop_table tr td:last-child,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr td:last-child {
    text-align: right;
}

/* The "Subtotal" column header is a <th>, not a <td>, so the rule above
   doesn't reach it - without this it sits left-aligned while every value
   underneath it is right-aligned, making the column look off. */
.woocommerce .custom-order-confirmation-details table.shop_table thead th:last-child,
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:last-child {
    text-align: right;
}

.woocommerce .custom-order-confirmation-details table.shop_table tr td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr td {
    padding: 10px 25px 0px 20px;
    border-top: 0px;
    vertical-align: top;
}

.woocommerce .custom-order-confirmation-details table.shop_table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table th {
    padding-left: 20px;
    padding-right: 25px;
}

.woocommerce .custom-order-confirmation-details table.shop_table tr:last-child th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr:last-child th {
    padding-bottom: 20px;
}

.woocommerce .custom-order-confirmation-details table.shop_table tr td ul.wc-item-meta,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr td ul.wc-item-meta {
    list-style: none;
    margin-bottom: 0px;
    margin-top: 8px;
}

.woocommerce .custom-order-confirmation-details table.shop_table tr td ul li,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr td ul li {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Product Add-Ons meta (Student First/Last Name, Grade) shown under each
   line item - same markup/rule as the cart page's variation-dd-item-data,
   extended to the checkout review table so both look consistent. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .variation-dd-item-data dt.variation-StudentFirstName,
.woocommerce-checkout .woocommerce-checkout-review-order-table .variation-dd-item-data dt.variation-StudentLastName,
.woocommerce-checkout .woocommerce-checkout-review-order-table .variation-dd-item-data dt.variation-StudentGrade,
.woocommerce-checkout .woocommerce-checkout-review-order-table .variation-dd-item-data dt p {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--color-text-dark);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .variation-dd-item-data dt p {
    margin: 2px 0 8px;
    font-weight: 400;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart-subtotal th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart-subtotal td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td {
    border-top: 1px solid var(--color-border);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td {
    padding-top: 14px;
    padding-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
}

#order_review_heading {
    margin-bottom: 16px;
}

.custom-order-confirmation-details section.woocommerce-customer-details {
    background: var(--color-bg-light);
    padding: 20px;
    border-radius: 20px;
    border: 2px solid var(--color-border);
    margin-bottom: 25px;
}

.custom-order-confirmation-details h2.custom-order-summary-title,
.custom-order-confirmation-details .woocommerce-column__title,
.custom-order-confirmation-details h2.woocommerce-order-details__title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 32px;
}

.custom-order-confirmation-details h2.custom-order-summary-title {
    margin-bottom: 0;
}


/*
 * Mobile cart link, beside the menu toggle.
 *
 * Rendered on the parent's cognita_header_mobile_toggle hook, inside
 * .header-mobile-toggle-wrap - which the parent shows below 992px and hides
 * above it (d-lg-none), together with the menu toggle. So the link is visible
 * exactly when the toggle is, and needs no script. It used to wait for
 * custom.js to find #shiftnav-toggle-main, ShiftNav's own toggle bar from the
 * old Kyubi header; this header renders its own toggle instead, so the class
 * the link waited for never arrived and it stayed hidden on every phone.
 *
 * The parent sizes the column for the toggle alone (60px). On pages that carry
 * the cart the body has .southbank-shop-header-cart (functions.php) and the
 * column sizes to its content instead - in the resting header and in the
 * sticky one, whose parent selector is matched here with one class more.
 *
 * It takes the header CTA buttons' colours (Contact / Visit / Apply, set in
 * Global Options), published as custom properties by functions.php, so in the
 * sticky header it reads as one more of those buttons.
 */
@media screen and (max-width: 991px) {
    body.southbank-shop-header-cart .header .header-mobile-toggle-wrap,
    body.southbank-shop-header-cart.darkHeader-down .header.header.darkHeader .header-mobile-toggle-wrap {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        gap: 7px;
    }

    .header .mobile-cart-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border-radius: 3px;
        background: var(--southbank-shop-cta-bg, var(--color-brand-blue));
        color: var(--southbank-shop-cta-text, var(--color-white));
        font-size: 20px;
        text-decoration: none;
    }

    .header .mobile-cart-icon:hover,
    .header .mobile-cart-icon:focus-visible {
        background: var(--southbank-shop-cta-bg-hover, var(--southbank-shop-cta-bg, var(--color-brand-blue)));
        color: var(--southbank-shop-cta-text-hover, var(--southbank-shop-cta-text, var(--color-white)));
    }

    .header .mobile-cart-icon .cart-count {
        position: absolute;
        top: -7px;
        right: -6px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--color-badge-red);
        color: var(--color-white);
        font-size: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/****payment options css*****/

/* Payment Methods Wrapper */
.woocommerce-checkout .wc_payment_methods {
    list-style: none;
    margin: 0 0px 0 0;
    padding: 0;
}


/* Individual Payment Method */
.woocommerce-checkout .wc_payment_methods .wc_payment_method {
    position: relative;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 16px;
    background: var(--color-white);
    overflow: hidden;
    transition: border-color .2s ease;
}

/* Highlight the currently selected payment method */
.woocommerce-checkout .wc_payment_methods .wc_payment_method:has(> input:checked) {
    border-color: var(--color-btn-blue);
}

/* Label */
.woocommerce-checkout .wc_payment_methods .wc_payment_method>label {
    display: flex;
    align-items: center;
    padding: 18px 22px;
    padding-right: 60px;
    cursor: pointer;
    margin: 0;
    font-weight: 600;
}

/* Radio Button */
.woocommerce-checkout .wc_payment_methods .wc_payment_method input[type="radio"] {
    margin: 0;
    accent-color: var(--color-btn-blue);
    width: 18px;
    height: 18px;
}

/* Fixed offset from the top of the card, not top:50% - the card's total
   height grows a lot when its payment_box (card fields, wallet notice...)
   expands below the label for the selected method, and centering by
   percentage against that full height drags the radio down into the
   middle of the expanded content instead of staying next to the label. */
.woocommerce-checkout .wc_payment_methods .wc_payment_method>input[type="radio"] {
    position: absolute;
    top: 18px;
    right: 22px;
}

.woocommerce-checkout .wc_payment_methods li.wc_payment_method.payment_method_stripe_googlepay.wc-stripe-no-desc {
    margin-bottom: 20px !important;
}

/* Card Icons */
.woocommerce-checkout .wc-stripe-card-icons-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.woocommerce-checkout .wc-stripe-card-icon {
    height: 28px;
    width: auto;
}

/* Wallet Icons */
.woocommerce-checkout .payment_method_stripe_googlepay label img,
.woocommerce-checkout .payment_method_stripe_applepay label img {
    height: 36px;
    width: auto;
}

/* stripe card */
.woocommerce-checkout .wc-stripe_cc-container.wc-stripe-gateway-container {
    padding: 20px;
    padding-bottom: 0;
}

.woocommerce-checkout .wc-stripe-wallet-notice {
    border: 0px;
    padding: 20px;
    box-shadow: none;
}

/* The wallet notice repeats the same wallet icon (Google Pay/Apple Pay)
   already shown in the method's label right above it - drop the repeat
   so the icon only appears once per method. */
.woocommerce-checkout .wc-stripe-wallet-notice--mark {
    display: none;
}

/****order details - your order sections css***********/

/**place order button css***/

.woocommerce-checkout button#place_order {
    margin-bottom: 20px;
}

.woocommerce-checkout section.woocommerce-order-details td.custom-order-detail-items {
    font-size: 16px;
    font-weight: 600;
}

.woocommerce .custom-order-confirmation-details table.shop_table tfoot span.woocommerce-Price-amount.amount {
    font-weight: 600;
    font-size: 20px;
}

.woocommerce .custom-order-confirmation-details table.shop_table .order-item-separator td {
    border-bottom: 2px solid var(--color-border);
    padding: 5px 0;
}


/* Responsive*/

@media screen and (max-width: 959px) {
    body.admin-bar.woocommerce #shiftnav-toggle-main,
    body.admin-bar.woocommerce .shiftnav,
    body.admin-bar.woocommerce-page #shiftnav-toggle-main,
    body.admin-bar.woocommerce-page .shiftnav {
        top: 11px !important;
    }
}

@media (min-width:768px) and (max-width:1024px) {

    .woocommerce-cart .custom-ecommerce-cart td.product-name {
        padding: 13px !important;
    }

    .woocommerce-cart .custom-ecommerce-cart input.qty {
        width: 21% !important;
    }

    /***post type product category products***/

    .tax-product_cat .grade-filter-wrapper {
        margin-top: 0;
    }

    .tax-product_cat.woocommerce ul.products li.product a img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .tax-product_cat.woocommerce ul.products li.product .button {
        font-weight: 500;
    }

    .tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 18px;
        line-height: 24px;
    }

    /***single product tab css***/

    .woocommerce.single-product div.product .product_title {
        font-size: 24px;
        line-height: 34px;
        font-weight: 600;
        margin-bottom: 15px;
    }

}


@media (min-width:768px) and (max-width:915px) {
    .woocommerce-cart .custom-ecommerce-cart input.qty {
        width: 34% !important;
    }

    .tax-product_cat .grade-filter-wrapper {
        margin-top: 40px;
    }

    .woocommerce-cart .custom-cart-page .product-quantity .cart-item-removed-icon {
        left: 22%;
    }

    .woocommerce-cart .custom-ecommerce-cart img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
        height: 100%;
    }

    .woocommerce-cart .custom-cart-collaterals .checkout-button {
        padding: 20px 14px;
        font-size: 15px;
    }

    .woocommerce-cart .custom-cart-collaterals .checkout-button::after {
        margin-right: -6px;
    }


}

@media (max-width:820px) {
    .tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 19px;
        line-height: 24px;
    }

    .tax-product_cat .grade-filter-wrapper {
        margin-top: 40px;
    }

}


@media (min-width:768px) and (max-width:819px) {
    .tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 17px;
        line-height: 24px;
    }

    .tax-product_cat .grade-filter-wrapper {
        margin-top: 40px;
    }
}

/* The cart item and the Order Summary sit side by side only once there is room
   for both. Between 768 and 991px the summary was squeezed to about 215px
   beside the item; it goes underneath now, as it already did on a phone. */
@media (max-width: 991px) {
    .woocommerce-cart .custom-cart-page {
        display: block;
    }

    .woocommerce-cart .custom-ecommerce-cart {
        width: 100%;
        margin-right: 0;
    }

    .woocommerce-cart .custom-cart-collaterals {
        width: 100%;
        margin-top: 0;
        margin-bottom: 10px;
    }
}

@media (max-width:767px) {
    .tax-product_cat .grade-filter-wrapper {
        margin-top: 40px;
    }

    .woocommerce-cart .custom-ecommerce-cart tr.woocommerce-cart-form__cart-item.cart_item {
        display: block;
        margin-bottom: 20px;
    }

    .woocommerce-cart .custom-ecommerce-cart img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
        border-radius: 25px 25px 0 0;
        width: 100%;
        height: 250px;
        border-top: 2px solid var(--color-border);
    }

    .woocommerce-cart .custom-ecommerce-cart .shop_table.cart tbody tr td:first-child {
        border-right: 2px solid var(--color-border) !important;
        border-radius: 25px 25px 0 0;
        width: 100%;
    }

    .woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr td:last-child {
        border-left: 2px solid var(--color-border) !important;
        border-radius: 0 0px 25px 25px !important;
    }

    .woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr td {
        border-top: 0px solid var(--color-border) !important;
    }

    .woocommerce-cart .custom-ecommerce-cart .shop_table tr.woocommerce-cart-form__cart-item td:before,
    .woocommerce-cart .custom-cart-page table.shop_table_responsive tr.cart-subtotal td::before {
        display: none;
    }

    .woocommerce-cart .custom-cart-page table.shop_table_responsive tr.cart-subtotal {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .woocommerce-cart .custom-cart-page table.shop_table_responsive tr td {
        text-align: left;
    }

    .woocommerce-cart .custom-ecommerce-cart input.qty {
        width: 35% !important;
    }

    .woocommerce-cart .custom-cart-page .product-quantity .cart-item-removed-icon {
        left: 25%;
    }

    .woocommerce-cart .custom-ecommerce-cart .shop_table {
        border-spacing: 0 20px;
    }

    .woocommerce-cart .custom-ecommerce-cart .shop_table.cart tbody tr.continue-shopping-button td:first-child {
        border-right: 0px !important;
        border-left: 0px !important;
    }


    /***post type product category products***/

    .tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
        display: block;
        min-height: auto;
        padding-bottom: 15px;
    }

    /*** single product css******/

    .woocommerce.single-product #content div.product div.summary,
    .woocommerce.single-product div.product div.summary,
    .woocommerce-page.single-product #content div.product div.summary,
    .woocommerce-page.single-product div.product div.summary {
        float: left;
        width: 100%;
    }

    .woocommerce.single-product div.product .product_title {
        margin-top: 15px;
        font-size: 28px;
        line-height: 34px;
    }

    .woocommerce.single-product #content div.product div.images,
    .woocommerce.single-product div.product div.images,
    .woocommerce-page.single-product #content div.product div.images,
    .woocommerce-page.single-product div.product div.images {
        width: 100%;
    }

    .woocommerce.single-product div.product div.images img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .woocommerce.single-product p.price {
        font-size: 24px;
        margin-top: 18px;
    }

    .woocommerce.single-product .wc-pao-addon-heading {
        margin: 15px 0 0;
        font-size: 24px;
        text-align: left;
        font-weight: 600;
    }

    .woocommerce.single-product .wc-pao-addon {
        padding: 0 2px;
        margin-bottom: 10px;
    }

    .woocommerce.single-product .woocommerce-tabs .panel h2:first-of-type {
        font-size: 25px;
        text-align: left;
        padding-top: 10px;
    }

    .woocommerce.single-product .woocommerce-Tabs-panel--description p {
        line-height: 28px;
    }


    /***return to product button css*****/
    .custom-returns-to-products .return-to-products-wrapper p.return-text {
        font-size: 22px;
    }

    .custom-returns-to-products .return-to-products-wrapper {
        margin-bottom: 10px;
    }

    /***cart page remove space from list of products css***/
    .woocommerce-cart .woocommerce-cart-form table.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents {
        margin-bottom: 0;
    }


    body.woocommerce-checkout #content {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .custom-order-confirmation-details p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
        font-size: 20px;
    }

    .custom-order-confirmation-details h2.woocommerce-order-details__title {
        text-align: left;
        font-size: 18px;
    }

    .woocommerce .custom-order-confirmation-details table.shop_table tr td ul li {
        display: block;
    }

}

/* Common styles */
@media (max-width: 540px) {

    /* Stack the Grade select above the Filter button on small screens */
    .tax-product_cat .grade-filter-wrapper {
        flex-direction: column;
    }

    .tax-product_cat .grade-filter-select,
    .tax-product_cat .grade-filter-select select#grade-filter,
    .tax-product_cat .grade-filter-button {
        width: 100%;
        min-width: 0;
    }

    .woocommerce-cart .custom-ecommerce-cart input.qty {
        width: 22% !important;
    }

    .woocommerce-cart .custom-cart-page .product-quantity .cart-item-removed-icon {
        left: 15%;
    }
}

@media (max-width: 430px) {
    .woocommerce-cart .custom-ecommerce-cart input.qty {
        width: 36% !important;
    }

    .woocommerce-cart .custom-cart-page .product-quantity .cart-item-removed-icon {
        left: 26%;
    }
}


/* ==========================================================================
   Shop landing: category tiles as cards
   ==========================================================================

   The category tiles are given the same card treatment the WPBakery card
   elements use - white card, the theme's own shadow, a cropped image and a
   linked title - so the shop reads as part of the site rather than as stock
   WooCommerce output.

   Colour and type are taken from the tokens the theme already publishes on
   :root, not restated here: --cwb-default-* is the Default Colour Profile
   (correct for these cards, whose background is always white), and the type
   sizes follow the typography tokens, so a change in Global Options moves the
   shop with the rest of the site.

   Scope is `li.product-category` only. Product tiles on a category page keep
   the float layout and rules they already have; they are a different job. */

/* The card look itself carries no :has(), so it applies whatever the layout
   below resolves to. */
.woocommerce ul.products li.product-category {
    text-align: left;
    background: #fff;
    border-radius: var(--bs-card-border-radius, 6px);
    overflow: hidden;
    box-shadow: 0 0 30px rgba(16, 23, 30, .15);
    transition: box-shadow .25s ease;
}

/* The listing becomes a grid. Floats cannot give equal-height cards - a longer
   category name made its neighbour shorter.
 *
 * The float reset lives inside the same :has() as the grid, deliberately. In a
 * browser without :has() the whole block is dropped, and the tiles keep the
 * parent theme's float widths with the card styling above - a working layout.
 * Resetting the floats outside the guard would leave those browsers with one
 * full-width card per row, which is worse than the floats it replaced. */
.woocommerce ul.products:has(li.product-category) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 0 0 1em;
}

.woocommerce ul.products:has(li.product-category) li.product-category {
    width: auto;
    max-width: none;
    float: none;
    clear: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 576px) {
    .woocommerce ul.products:has(li.product-category) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .woocommerce ul.products.columns-2:has(li.product-category) {
        grid-template-columns: repeat(2, 1fr);
    }

    .woocommerce ul.products.columns-3:has(li.product-category) {
        grid-template-columns: repeat(3, 1fr);
    }

    .woocommerce ul.products.columns-4:has(li.product-category) {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* The whole tile is one link, so the card is the hover and focus target. */
.woocommerce ul.products li.product-category > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

/* The card itself does not move. Lifting it took the title and the card's
   bottom edge with it, which read as the whole tile jumping rather than as the
   image responding; only the image scales now, and the card answers with a
   slightly deeper shadow, which changes nothing's position. */
.woocommerce ul.products li.product-category:hover,
.woocommerce ul.products li.product-category:focus-within {
    box-shadow: 0 8px 36px rgba(16, 23, 30, .22);
}

/* Keyboard users get the same visible ring the rest of the site uses, on the
   card rather than on the bare link, which would otherwise draw a box round
   the image and title separately. */
.woocommerce ul.products li.product-category > a:focus-visible {
    outline: 2px solid var(--cwb-default-link, #7d52ff);
    outline-offset: 3px;
}

/* Square crop, matching the other card elements: the image is stretched to the
   box and object-fit crops it rather than distorting it. The 1em gap the base
   rules give a loop image belongs to the card padding here. */
.woocommerce ul.products li.product-category a img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    margin: 0;
    border-radius: 0;
    transition: transform .35s ease;
}

.woocommerce ul.products li.product-category:hover a img {
    transform: scale(1.04);
}

/* The image sits in its own box so the zoom above is cropped by the card
   instead of spilling over the corners. */
.woocommerce ul.products li.product-category a > img {
    display: block;
}

/* The card body. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--bs-card-spacer-y, 16px) var(--bs-card-spacer-x, 16px);
    margin: 0;
    font-family: var(--font-family-heading, inherit);
    font-size: var(--h4-link-size, 22px);
    line-height: var(--heading-line-height, 1.2);
    color: var(--cwb-default-link, #7d52ff);
    transition: color .2s ease;
}

.woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title {
    color: var(--cwb-default-link-hover, #3f2980);
}

/* The item count, now "4 items" rather than "(4)". It sits under the title as
   a quiet meta line - the same shape the card elements use - rather than
   trailing the heading, which is why the title is a column rather than a row.
   `mark` is kept in the selector in case WooCommerce's own markup is reached. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .southbank-shop-cat-count,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark {
    display: block;
    margin-top: 4px;
    background: none;
    padding: 0;
    font-family: var(--font-family-base, inherit);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--cwb-body-text, #10171e);
    opacity: .65;
}

/* Movement is decoration here, so it goes when the visitor has asked for less
   of it; the colour and focus changes stay. */
@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product-category,
    .woocommerce ul.products li.product-category a img {
        transition: none;
    }

    .woocommerce ul.products li.product-category:hover a img {
        transform: none;
    }
}

/* The filter's label. The field had none: a disabled placeholder option is not
   a label, and a screen reader reaching the select announced only its options.
   It is a visible label rather than a hidden one, because a form control that
   looks unlabelled is a problem for sighted users too.

   It sits in .grade-filter-field, a wrapper of its own, rather than inside
   .grade-filter-select. The chevron is positioned at 50% of .grade-filter-select,
   so putting the label in there measured that 50% across the label and the
   field together and pushed the arrow up out of the box. */
.grade-filter-field {
    display: flex;
    flex-direction: column;
}

.grade-filter-label {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-text-dark);
}

/* Bottom-aligned, so the button lines up with the select rather than with the
   top of the label above it. */
.grade-filter-wrapper {
    align-items: flex-end;
}

/* Below 540px an earlier rule turns this row into a column, and in a column
   `flex-end` aligns to the right rather than the bottom - which pushed the
   whole field to the right-hand edge. The alignment is only meaningful while
   the two sit side by side. */
@media (max-width: 540px) {

    .grade-filter-wrapper {
        align-items: stretch;
    }

    .grade-filter-field {
        width: 100%;
    }
}

/* Choosing a grade filters immediately, so the button is only there for the
   no-JavaScript form underneath. The script adds this class, which means the
   button stays visible - and usable - if the script never runs. */
.grade-filter-wrapper--js .grade-filter-button {
    display: none;
}

/* The Grade filter's loading message, styled like the notices it replaces so
   the results area does not jump between two different kinds of block while
   waiting. */
.shop-filter-loading {
    display: block;
    max-width: 900px;
    margin: 0 0 40px;
    padding: 16px 20px;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-dark);
    font-size: 16px;
}


/* ==========================================================================
   Shop card surfaces
   ==========================================================================

   One definition of what a card looks like in the shop, matching the WPBakery
   card elements: white, a soft shadow, a 6px radius and no border.

   The cart and order screens had been drawing their panels a different way -
   a cream fill with a 2px border and a 25px radius - which is why the cart
   read as a different site from the listing pages. The values are the same
   ones .card uses in the parent theme, so the two stay together.

   These rules sit at the end of the file deliberately: the borders they undo
   are declared with !important further up, and unpicking each of those in
   place would mean touching a dozen rules that are otherwise correct. */
:root {
    --shop-card-bg: #fff;
    --shop-card-radius: var(--bs-card-border-radius, 6px);
    --shop-card-shadow: 0 0 30px rgba(16, 23, 30, .15);
}

/* The cart item.
 *
 * The row is already `display: flex`, so it is the card - the cells inside it
 * go transparent and lose the borders that used to draw the box. Doing it this
 * way means one shadow around the item rather than an attempt to shadow
 * individual table cells, which does not work. */
.woocommerce-cart .custom-ecommerce-cart tr.woocommerce-cart-form__cart-item.cart_item {
    background: var(--shop-card-bg);
    border-radius: var(--shop-card-radius);
    box-shadow: var(--shop-card-shadow);
    overflow: hidden;
}

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr.woocommerce-cart-form__cart-item td,
.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr.woocommerce-cart-form__cart-item td:first-child,
.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr.woocommerce-cart-form__cart-item td:last-child,
.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tbody tr.woocommerce-cart-form__cart-item td:first-child,
.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tbody tr.woocommerce-cart-form__cart-item td:last-child {
    background: transparent;
    border: 0 !important;
    border-radius: 0 !important;
}

/* The radius belongs to the row now, which clips the picture for us. */
.woocommerce-cart .custom-ecommerce-cart img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    border-radius: 0;
    border-top: 0;
}

/* The Order Summary, and the panels on the thank-you and View Order pages. */
.woocommerce-cart .custom-cart-collaterals,
.woocommerce .custom-order-confirmation-details table.shop_table,
.custom-order-confirmation-details section.woocommerce-customer-details,
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout #order_review .wc_payment_methods .wc_payment_method {
    background: var(--shop-card-bg);
    border: 0;
    border-radius: var(--shop-card-radius);
    box-shadow: var(--shop-card-shadow);
}

/* The order tables are painted by `.woocommerce-checkout .woocommerce
   table.shop_table` - three classes and an element - which outranks the shared
   surface above and was keeping both the cream and its 20px radius. Matched
   here rather than raised everywhere, so the specificity war stays local. */
.woocommerce-checkout .woocommerce table.shop_table.woocommerce-checkout-review-order-table,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
    background: var(--shop-card-bg);
    border: 0;
    border-radius: var(--shop-card-radius);
    box-shadow: var(--shop-card-shadow);
}

/* The cells inside those panels are transparent, so the card's own white shows
   through. The order tables had their tint on the cells rather than the table,
   so setting the table white on its own left the cream where it was. */
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th,
.woocommerce .custom-order-confirmation-details table.shop_table th,
.woocommerce .custom-order-confirmation-details table.shop_table td,
.custom-order-confirmation-details section.woocommerce-customer-details {
    background: transparent;
}

/* The cream tint stays only where it is doing a job - marking a notice out from
   the page rather than pretending to be a card. */

/* ==========================================================================
   Checkout
   ==========================================================================

   The same story as every other page in the shop: WooCommerce's stylesheet is
   dropped by the parent, so `.form-row`, `.form-row-first/last` and the field
   styling were all absent. Labels and inputs were running together as inline
   content - the "First name" and "Last name" labels wrapped over their own
   fields - and every input was at its browser default width.

   Billing and Additional information stay stacked at full width, as they are
   on the live site; only the name pair sits side by side. */
/* WooCommerce's checkout columns collide with Bootstrap's grid.
 *
 * The checkout wraps its billing and additional fields in `.col-1` and
 * `.col-2` inside `.col2-set` - class names WooCommerce has used since long
 * before Bootstrap 5 claimed them for grid columns. The parent theme loads
 * Bootstrap, so `.col-1` was resolving to `width: 8.333%`: the whole billing
 * form was rendering inside a 95px column, which is why every label wrapped
 * onto two lines and every field was a stub.
 *
 * Scoped to `.col2-set` so it only touches WooCommerce's use of the names and
 * leaves real Bootstrap columns alone. */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review_heading {
    margin: 32px 0 16px;
    font-family: var(--font-family-heading, inherit);
    font-size: var(--h4-size, 22px);
    font-weight: 700;
    line-height: var(--heading-line-height, 1.2);
    color: var(--cwb-body-text, #10171e);
}

.woocommerce-checkout .form-row {
    display: block;
    margin: 0 0 20px;
    padding: 0;
}

.woocommerce-checkout .form-row label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-family-base, inherit);
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-text-dark);
}

.woocommerce-checkout .form-row .required {
    color: var(--color-badge-red);
    text-decoration: none;
}

.woocommerce-checkout .form-row .optional {
    color: var(--color-text-dark);
    opacity: .7;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-white);
    color: var(--color-text-dark);
    font-family: var(--font-family-base, inherit);
    font-size: 16px;
    line-height: 1.4;
}

.woocommerce-checkout .form-row textarea {
    min-height: 100px;
    resize: vertical;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    outline: none;
    border-color: var(--cwb-default-link, #7d52ff);
}

/* Select2 draws the country field, and its own stylesheet assumes
   WooCommerce's is present too. */
.woocommerce-checkout .select2-container .select2-selection--single {
    height: auto;
    display: flex;
    align-items: center;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.4;
    color: var(--color-text-dark);
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 10px;
}

@media (min-width: 768px) {

    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after,
    .woocommerce-checkout .woocommerce-additional-fields__field-wrapper::after {
        content: "";
        display: table;
        clear: both;
    }

    .woocommerce-checkout .form-row-first {
        float: left;
        width: 48%;
    }

    .woocommerce-checkout .form-row-last {
        float: right;
        width: 48%;
    }

    .woocommerce-checkout .form-row-wide {
        clear: both;
    }
}

/* The order table, matching the cart's Order Summary. */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100%;
    margin: 0 0 24px;
    border-collapse: collapse;
}

/* One padding for every cell.
 *
 * The header row, the line items and the total row each carried a different
 * horizontal padding - 0, 20/25px and 0 - so nothing lined up down either edge,
 * and the table itself had a 24px padding on top of that. The cells own the
 * inset now, which is what gives the panel its gutter. */
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr td,
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr:last-child th {
    padding: 14px 24px;
    border: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-dark);
    text-align: left;
    vertical-align: top;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
    padding-top: 24px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td {
    padding-bottom: 24px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th:last-child,
.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child {
    width: 30%;
    text-align: right;
    white-space: nowrap;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td {
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-family-heading, inherit);
    font-size: var(--h4-size, 22px);
    font-weight: 700;
    color: var(--cwb-body-text, #10171e);
}

/* The add-on values under each line, which arrive as a definition list. */
.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation {
    margin: 8px 0 0;
    font-size: 15px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dt {
    font-weight: 700;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dd {
    margin: 0 0 6px;
}

/* Payment methods. */
.woocommerce-checkout #order_review .wc_payment_methods {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.woocommerce-checkout #order_review .wc_payment_methods .wc_payment_method {
    margin-bottom: 12px;
    padding: 18px 20px;
    list-style: none;
}

.woocommerce-checkout #order_review .wc_payment_methods .wc_payment_method label {
    display: inline;
    font-weight: 700;
    color: var(--color-text-dark);
}

.woocommerce-checkout #order_review .payment_box {
    margin-top: 10px;
    font-size: 16px;
    color: var(--color-text-dark);
}

/* Place order is the page's committing action, so it is the solid profile
   button, the same as Add to cart and Continue to payment. */
.woocommerce-checkout #place_order,
.woocommerce-checkout .place-order button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    border: 2px solid var(--cwb-default-btn-bg, #7d52ff);
    border-radius: 6px;
    background: var(--cwb-default-btn-bg, #7d52ff);
    color: var(--cwb-default-btn-text, #fff);
    font-family: var(--font-family-base, inherit);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus,
.woocommerce-checkout .place-order button.button:hover {
    border-color: var(--cwb-default-btn-bg-hover, #3f2980);
    background: var(--cwb-default-btn-bg-hover, #3f2980);
    color: var(--cwb-default-btn-text-hover, #fff);
}

/* The "Have a coupon?" bar, styled like the shop's other notices instead of
   an unstyled strip of link text. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    display: block;
    margin: 0 0 24px;
    padding: 16px 20px;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-dark);
    font-size: 16px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
    content: none;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
    color: var(--cwb-default-link, #7d52ff);
}

/* The cart's item data is a proper <dl> again - label in the <dt>, value in the
   <dd> - so the pair needs putting back on one line here rather than relying on
   the markup to do it by merging the two. */
.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dt {
    flex: 0 0 auto;
}

.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dd {
    flex: 0 0 100%;
    margin: 0;
}

@media (min-width: 576px) {
    .woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dd {
        flex: 1 1 auto;
        margin-left: 10px;
    }
}

.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dd p {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* The order-received page, on the same card surface as the rest of the shop. */
.custom-order-confirmation-details .woocommerce-order-details__title,
.custom-order-confirmation-details .woocommerce-column__title {
    margin: 0 0 16px;
    font-family: var(--font-family-heading, inherit);
    font-size: var(--h4-size, 22px);
    font-weight: 700;
    line-height: var(--heading-line-height, 1.2);
    color: var(--cwb-body-text, #10171e);
}

.custom-order-confirmation-details .woocommerce-thankyou-order-received {
    font-size: 18px;
    color: var(--color-text-dark);
}

.woocommerce .custom-order-confirmation-details table.shop_table th,
.woocommerce .custom-order-confirmation-details table.shop_table td {
    padding: 14px 24px;
    border: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-dark);
    vertical-align: top;
}

.woocommerce .custom-order-confirmation-details table.shop_table tr.order-item-separator td {
    padding: 0;
    border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   The cart icon at the end of the desktop navigation bar
   ========================================================================== */

/* The theme-rendered icon, for a menu that has no `basket-menu` item of its
   own. It keeps the `basket-menu` class so the badge rules above and the
   WooCommerce add-to-cart fragment apply to it unchanged, and it overrides the
   `display: none` those rules set by default - it is only printed at all on a
   shop page, so it has nothing to hide from. */
.header .navigation-bar .nav-col {
    display: flex;
    align-items: stretch;
}

.header .navigation-bar .nav-col > .navbar-collapse,
.header .navigation-bar .nav-col > .ubermenu {
    flex: 1 1 auto;
    min-width: 0;
}

.header .navigation-bar .nav-col .shop-cart-menu {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 18px;
}

.header .navigation-bar .nav-col .shop-cart-menu .shop-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 4px;
    color: var(--color-white, #fff);
    font-size: 22px;
    line-height: 1;
}

.header .navigation-bar .nav-col .shop-cart-menu .shop-cart-link:hover,
.header .navigation-bar .nav-col .shop-cart-menu .shop-cart-link:focus {
    color: var(--color-white, #fff);
    opacity: .85;
}

/* The badge sits on the icon rather than on the column, so it follows the
   glyph wherever the bar puts it. */
.header .navigation-bar .nav-col .shop-cart-menu .cart-count {
    position: absolute;
    top: -2px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 50%;
    background: var(--color-badge-red, #c41f2f);
    color: var(--color-white, #fff);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* The mobile icon covers small screens, where the desktop bar is not shown. */
@media (max-width: 991px) {
    .header .navigation-bar .nav-col .shop-cart-menu {
        display: none !important;
    }
}