/* ==========================================================================
   Safe Pools - WooCommerce
   ========================================================================== */

.woocommerce-page .sp-shop,
.woocommerce .sp-shop {
    padding: var(--sp-section-y) 0;
}

/* ==========================================================================
   PRICES
   --------------------------------------------------------------------------
   The Riyal glyph follows the figure in READING order, so in Arabic it sits to
   the LEFT of the number ("﷼ 3500", read right-to-left) and in English to the
   right. WooCommerce wraps prices in <bdi>, which isolates and auto-detects
   direction - and since digits are weak characters it always resolves to LTR,
   pinning the symbol to the wrong side in Arabic. Making the price follow the
   page direction instead puts it where the design has it.
   ========================================================================== */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
.sp-product-price,
.sp-product-price bdi {
    direction: inherit;
    unicode-bidi: embed;
}

.woocommerce-Price-currencySymbol {
    display: inline-block;
}

/* ==========================================================================
   NOTICES
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-line);
    border-top: 3px solid var(--sp-blue);
    background: var(--sp-bg);
    color: var(--sp-navy);
    padding: 16px 22px;
    margin-bottom: 26px;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.woocommerce-error {
    border-top-color: #C0392B;
}

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

.woocommerce-message .button,
.woocommerce-info .button {
    margin-inline-start: auto;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
    background: var(--sp-blue);
    color: var(--sp-white);
    border: 0;
    border-radius: var(--sp-radius);
    padding: 12px 30px;
    font-family: var(--sp-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    transition: background var(--sp-transition), transform var(--sp-transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: var(--sp-blue-dark);
    color: var(--sp-white);
    transform: translateY(-2px);
}

.woocommerce a.button.wc-backward {
    background: var(--sp-navy);
}

/* ==========================================================================
   SHOP / ARCHIVE - reuse the home product grid
   ========================================================================== */
.woocommerce .sp-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 30px;
}

/* The count and the sort dropdown are floated by WooCommerce. The toolbar had
   no styling of its own, so it collapsed to zero height and both floats stayed
   in flow beside the product grid - squeezing a 1110px grid down to 770px and
   pushing it 220px off the reading edge. Laying the toolbar out as a flex row
   takes the floats out of the equation entirely. */
.sp-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-bottom: 26px;
}

.woocommerce .sp-shop-toolbar .woocommerce-result-count,
.woocommerce .sp-shop-toolbar .woocommerce-ordering {
    float: none;
    margin: 0;
}

.woocommerce-result-count,
.woocommerce-ordering {
    color: var(--sp-muted-strong);
    font-size: 14px;
    margin-bottom: 26px;
}

.woocommerce-ordering select {
    padding: 9px 14px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    font-family: var(--sp-font);
    color: var(--sp-navy);
}

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
.woocommerce div.product {
    padding: var(--sp-section-y) 0;
}

.woocommerce div.product div.images img {
    border-radius: var(--sp-radius-lg);
}

.woocommerce div.product .product_title {
    font-size: var(--sp-h2);
    margin-bottom: 16px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--sp-blue);
    font-size: 26px;
    font-weight: 700;
    direction: ltr;
    display: inline-block;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: #4A4A4A;
    line-height: 2.1;
    margin: 18px 0;
}

.woocommerce div.product form.cart {
    margin-top: 26px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.woocommerce .quantity .qty {
    width: 84px;
    padding: 11px 8px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    font-family: var(--sp-font);
    text-align: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin-bottom: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: var(--sp-bg);
    border: 0;
    border-radius: var(--sp-radius);
    margin: 0;
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--sp-navy);
    padding: 11px 24px;
    display: block;
    font-weight: 400;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: var(--sp-blue);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--sp-white);
}

/* ==========================================================================
   CART
   ========================================================================== */
.woocommerce table.shop_table {
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.woocommerce table.shop_table th {
    background: var(--sp-bg);
    color: var(--sp-navy);
    font-weight: 700;
    padding: 16px 18px;
    border: 0;
}

.woocommerce table.shop_table td {
    padding: 18px;
    border-top: 1px solid var(--sp-line);
    vertical-align: middle;
}

.woocommerce table.shop_table img {
    width: 78px;
    border-radius: var(--sp-radius);
}

.woocommerce a.remove {
    color: #C0392B !important;
    font-size: 20px;
    line-height: 1;
}

.woocommerce a.remove:hover {
    background: #C0392B;
    color: var(--sp-white) !important;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--sp-bg);
    border-radius: var(--sp-radius-lg);
    padding: 28px;
    width: 100%;
}

.woocommerce .cart_totals h2 {
    font-size: 21px;
    margin-bottom: 18px;
}

.woocommerce .cart_totals table.shop_table {
    border: 0;
    background: transparent;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
    background: transparent;
    padding: 12px 4px;
}

.woocommerce .cart_totals .order-total .amount {
    color: var(--sp-blue);
    font-size: 20px;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: block;
    text-align: center;
    font-size: 16px;
    padding: 15px;
}

.woocommerce .coupon input.input-text {
    padding: 12px 16px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    font-family: var(--sp-font);
    margin-inline-end: 8px;
}

.woocommerce-cart-form {
    margin-bottom: 34px;
}

/* the "your cart is empty" state */
.cart-empty.woocommerce-info {
    justify-content: center;
    font-size: 17px;
}

.return-to-shop {
    text-align: center;
    margin-top: 20px;
}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.woocommerce form .form-row label {
    color: var(--sp-navy);
    font-size: 15px;
    margin-bottom: 7px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
    width: 100%;
    padding: 12px 16px;
    height: auto;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    font-family: var(--sp-font);
    font-size: 15px;
    color: var(--sp-text);
}

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

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--sp-blue);
    box-shadow: 0 0 0 3px rgba(3, 124, 200, .12);
}

.woocommerce-checkout h3 {
    font-size: 21px;
    margin-bottom: 20px;
}

.woocommerce-checkout #order_review_heading {
    margin-top: 34px;
}

.woocommerce-checkout #payment {
    background: var(--sp-bg);
    border-radius: var(--sp-radius-lg);
    padding: 8px 24px 24px;
}

.woocommerce-checkout #payment div.payment_box {
    background: var(--sp-white);
    border-radius: var(--sp-radius);
    color: #4A4A4A;
    font-size: 14px;
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--sp-white);
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--sp-line);
}

/* ==========================================================================
   MY ACCOUNT
   ========================================================================== */
.woocommerce-account .woocommerce {
    padding: var(--sp-section-y) 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 25%;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    background: var(--sp-bg);
    border-radius: var(--sp-radius-lg);
    padding: 12px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin-bottom: 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 18px;
    border-radius: var(--sp-radius);
    color: var(--sp-navy);
    font-size: 15px;
    transition: all var(--sp-transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--sp-white);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--sp-blue);
    color: var(--sp-white);
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 72%;
}

/* login / register */
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
    background: var(--sp-white);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    padding: 32px 28px;
    max-width: 48%;
}

.woocommerce form.login,
.woocommerce form.register {
    border: 0;
    padding: 0;
    margin: 0;
}

.woocommerce-form-login__rememberme {
    display: inline-block;
    margin-inline-end: 12px;
}

.woocommerce-LostPassword a {
    font-size: 14px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .woocommerce .sp-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .woocommerce .sp-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px 20px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
        float: none;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 26px;
    }

    .woocommerce-account .col2-set .col-1,
    .woocommerce-account .col2-set .col-2 {
        max-width: 100%;
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .woocommerce table.shop_table td,
    .woocommerce table.shop_table th {
        padding: 12px 10px;
    }

    .woocommerce table.shop_table img {
        width: 58px;
    }

    .woocommerce div.product form.cart {
        gap: 10px;
    }
}

/* ==========================================================================
   GRID COLLISION - bootstrap vs WooCommerce
   --------------------------------------------------------------------------
   WooCommerce names the two halves of a checkout / login screen .col-1 and
   .col-2 inside .col2-set. Bootstrap owns those same class names for its
   12-column grid, so it was capping the checkout billing column at 8.33% -
   every address field squeezed into 34px. Bootstrap's sizing is switched off
   for these two blocks only; its grid keeps working everywhere else.
   ========================================================================== */
.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;
    max-width: none;
    width: 100%;
    padding-inline: 0;
}

/* ==========================================================================
   PRODUCT - single
   ========================================================================== */
.sp-product-single .product {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
}

/* The two halves are grid tracks now, so WooCommerce's own 48% floats have to
   be switched off. Its selectors carry three classes and two element names, so
   the extra class here is what lets these win without !important. */
.sp-product-single .product .woocommerce-product-gallery.images {
    width: 100%;
    float: none;
    margin: 0;
}

.sp-product-single .woocommerce-product-gallery__wrapper {
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    border: 1px solid var(--sp-line);
}

.sp-product-single .flex-control-thumbs {
    display: flex;
    gap: 12px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.sp-product-single .flex-control-thumbs li {
    width: auto;
    flex: 0 0 84px;
    margin: 0;
}

.sp-product-single .flex-control-thumbs img {
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-line);
    opacity: 1;
}

.sp-product-single .flex-control-thumbs img.flex-active,
.sp-product-single .flex-control-thumbs img:hover {
    border-color: var(--sp-blue);
}

.sp-product-single .product .summary.entry-summary {
    width: 100%;
    float: none;
    margin: 0;
}

.sp-product-single .product_title {
    font-size: var(--sp-h2);
    line-height: 1.4;
    color: var(--sp-navy);
    margin-bottom: 14px;
}

/* the price is the loudest thing in the column, as on the product cards */
.sp-product-single .summary .price {
    display: block;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--sp-line);
}

.sp-product-single .woocommerce-product-details__short-description {
    color: #4A4A4A;
    line-height: 2.1;
    font-size: var(--sp-body);
    margin-bottom: 24px;
}

.sp-product-single form.cart {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.sp-product-single form.cart .button {
    flex: 1 1 200px;
}

/* The meta list is reference information, so it is set quietly rather than
   left as the stray italic run-on line the plugin prints by default. */
.sp-product-single .product_meta {
    border-top: 1px solid var(--sp-line);
    padding-top: 18px;
    font-size: var(--sp-small);
    color: var(--sp-muted-strong);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-product-single .product_meta > span {
    display: block;
}

/* WooCommerce prints the meta wrapper even when the product carries no SKU,
   category or tag, which left its top rule and 18px of padding hanging under
   the summary as a stray line. */
.sp-product-single .product_meta:empty {
    display: none;
}

.sp-product-single .product_meta a {
    color: var(--sp-navy);
}

.sp-product-single .product_meta a:hover {
    color: var(--sp-blue);
}

/* tabs and related products run the full width under the two columns */
.sp-product-single .woocommerce-tabs,
.sp-product-single .related,
.sp-product-single .upsells {
    grid-column: 1 / -1;
    margin-top: 60px;
}

.sp-product-single .woocommerce-tabs .panel {
    color: #4A4A4A;
    line-height: 2.1;
    padding-top: 22px;
}

.sp-product-single .woocommerce-tabs .panel > h2 {
    display: none;
}

.sp-product-single .related > h2,
.sp-product-single .upsells > h2 {
    font-size: var(--sp-h2);
    color: var(--sp-navy);
    margin-bottom: 30px;
}

/* ==========================================================================
   CART - table on one side, totals card on the other
   ========================================================================== */
.woocommerce-cart .sp-entry > .woocommerce {
    display: block;
}

.woocommerce-cart .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}

/* An empty cart has no table and no totals card, just a line of text and a
   button. Left to the two-column track they sat side by side, with the button
   stranded in the column the totals would have occupied. */
.woocommerce-cart .sp-entry > .woocommerce > .cart-empty,
.woocommerce-cart .sp-entry > .woocommerce > .wc-empty-cart-message,
.woocommerce-cart .sp-entry > .woocommerce > .return-to-shop {
    grid-column: 1 / -1;
}

.woocommerce-cart .woocommerce-cart-form {
    grid-column: 1;
    margin: 0;
}

.woocommerce-cart .cart-collaterals {
    grid-column: 2;
    width: 100%;
    margin: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
    background: var(--sp-bg);
    border-radius: var(--sp-radius-lg);
    padding: 26px 24px;
}

.woocommerce-cart .cart_totals h2 {
    font-size: var(--sp-h3);
    color: var(--sp-navy);
    margin-bottom: 18px;
}

.woocommerce-cart .cart_totals table.shop_table {
    border: 0;
    background: transparent;
    margin: 0;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
    border: 0;
    border-bottom: 1px solid var(--sp-line);
    padding: 12px 0;
    background: transparent;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    border-bottom: 0;
    font-size: 18px;
    color: var(--sp-navy);
}

.woocommerce-cart .wc-proceed-to-checkout {
    padding: 18px 0 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
    text-align: center;
    margin: 0;
}

/* the shipping choices read as a list, not as a run of naked radios */
.woocommerce-shipping-methods {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-shipping-methods li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.woocommerce-shipping-methods label {
    margin: 0;
    color: var(--sp-text);
}

.woocommerce-shipping-destination {
    color: var(--sp-muted-strong);
    font-size: var(--sp-small);
    margin-top: 8px;
}

/* Cart actions row: coupon on one side, update on the other.
   --------------------------------------------------------------------------
   This cell MUST keep display:table-cell. Making it a flex container takes it
   out of the table's column model - the browser wraps a non-cell child of a
   <tr> in an anonymous cell, which throws away the colspan="6" - so this row
   started contributing its full content width to the FIRST column. The remove
   column blew up to 350px and the rest collapsed behind it: the thumbnail cell
   fell to 50px, which clamped the 78px product image to 14px through
   max-width, and the product name was left wrapping inside 72px.
   The two halves are floated instead, and the cell contains them itself. */
.woocommerce-cart td.actions {
    display: table-cell;
    overflow: hidden;
}

.woocommerce-cart td.actions .coupon {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    float: right;
    margin: 0;
}

.woocommerce-cart td.actions > .button {
    float: left;
    margin: 0;
}

[dir="ltr"] .woocommerce-cart td.actions .coupon {
    float: left;
}

[dir="ltr"] .woocommerce-cart td.actions > .button {
    float: right;
}

.woocommerce-cart td.actions .coupon input.input-text {
    width: 190px;
    margin: 0;
}

/* Six columns inside a 720px track leaves 216px of the row to padding alone,
   so the horizontal gutter comes down and the fixed columns are pinned - the
   product name gets whatever is left rather than being squeezed last. */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
    padding-inline: 10px;
}

.woocommerce-cart table.cart td.product-remove,
.woocommerce-cart table.cart th.product-remove {
    width: 44px;
    text-align: center;
}

.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart th.product-thumbnail {
    width: 98px;
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
    white-space: nowrap;
}

/* ==========================================================================
   CHECKOUT - billing beside the order summary
   ========================================================================== */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon {
    margin-bottom: 24px;
}

/* The billing column spans both rows, so the row track holding the summary
   heading has to be pinned to its own content height - left on auto/auto the
   browser shares the billing column's height between the two tracks and drops
   the summary card a couple of hundred pixels below its heading. */
.woocommerce-checkout form.checkout {
    display: block;
}

.woocommerce-checkout form.checkout > .col2-set {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
}

.woocommerce-checkout form.checkout > #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
}

.woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}

.woocommerce-checkout #order_review {
    background: var(--sp-bg);
    border-radius: var(--sp-radius-lg);
    padding: 24px;
}

.woocommerce-checkout #order_review table.shop_table {
    border: 0;
    background: transparent;
    margin: 0 0 18px;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
    border: 0;
    border-bottom: 1px solid var(--sp-line);
    padding: 12px 0;
    background: transparent;
}

.woocommerce-checkout #order_review tfoot .order-total th,
.woocommerce-checkout #order_review tfoot .order-total td {
    border-bottom: 0;
    font-size: 18px;
    color: var(--sp-navy);
}

.woocommerce-checkout #payment {
    background: transparent;
    padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--sp-line);
    margin-bottom: 18px;
}

.woocommerce-checkout #payment .form-row.place-order {
    padding: 0;
    margin: 0;
}

.woocommerce-checkout #payment #place_order {
    width: 100%;
    display: block;
    float: none;
}

.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3 {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sp-line);
}

/* WooCommerce's form-row-first / form-row-last floats do not survive inside a
   grid column, so the pairing is rebuilt with a grid on the wrapper instead. */
.woocommerce form .form-row {
    display: block;
    margin-bottom: 16px;
    padding: 0;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    width: 100%;
    float: none;
}

@media (min-width: 576px) {
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 16px;
    }

    .woocommerce-billing-fields__field-wrapper > .form-row-wide,
    .woocommerce-shipping-fields__field-wrapper > .form-row-wide {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   ORDER RECEIVED
   ========================================================================== */
.woocommerce-order .woocommerce-thankyou-order-received {
    font-size: var(--sp-h3);
    color: var(--sp-navy);
    background: var(--sp-bg);
    border-radius: var(--sp-radius-lg);
    padding: 22px 26px;
    margin-bottom: 26px;
}

.woocommerce ul.order_details {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.woocommerce ul.order_details li {
    flex: 1 1 160px;
    background: var(--sp-white);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    padding: 16px 18px;
    margin: 0;
    float: none;
    font-size: var(--sp-small);
    color: var(--sp-muted-strong);
    text-transform: none;
}

.woocommerce ul.order_details li strong {
    display: block;
    margin-top: 6px;
    font-size: var(--sp-body);
    color: var(--sp-navy);
}

/* ==========================================================================
   MY ACCOUNT
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--sp-white);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    padding: 30px 28px;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
    margin-top: 0;
}

.woocommerce-account .col2-set {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
}

/* WooCommerce clears its own floats with ::before / ::after set to display:
   table. Once the wrapper is a grid those two become grid items in their own
   right and take the first cell of each row, which pushed the register card
   into a second row diagonally opposite the login card. */
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after {
    display: none;
}

/* The bootstrap-collision rule above zeroes the inline padding for every
   .col2-set, which is right for the checkout column but strips the login and
   register cards of their gutter - form fields ended up flush to the card
   edge. The card padding is restated here, after that rule. */
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
    max-width: none;
    margin: 0;
    padding: 32px 28px;
}

.woocommerce-account .col2-set h2 {
    font-size: var(--sp-h3);
    color: var(--sp-navy);
    margin-bottom: 18px;
}

/* ==========================================================================
   RESPONSIVE - shop pages
   ========================================================================== */
/* These blocks are declared single-column above and opened out here, rather
   than declared two-column and collapsed with max-width queries.
   --------------------------------------------------------------------------
   The reason is the boundary itself. Bootstrap's container steps from 720px to
   960px at exactly 992px, so the side column can only exist from 992px up. A
   `max-width: 991px` query is the wrong tool for that edge: on a viewport of
   991.5 CSS pixels - which fractional device pixel ratios produce routinely -
   it does not match, and neither does `min-width: 992px` for the container, so
   the page rendered a two-column grid with a 320px sidebar inside a 720px
   container. The cart table was left 377px wide, which crushed the thumbnail
   column to 32px and the product name to 32px.
   Sharing one `min-width: 992px` boundary with Bootstrap removes the gap. */
@media (min-width: 992px) {
    .sp-product-single .product {
        grid-template-columns: 46% 1fr;
        gap: 50px;
    }

    .sp-product-single .woocommerce-tabs,
    .sp-product-single .related,
    .sp-product-single .upsells {
        margin-top: 60px;
    }

    .woocommerce-cart .sp-entry > .woocommerce {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 30px;
        align-items: start;
    }

    .woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: 1fr 320px;
        grid-template-rows: auto 1fr;
        gap: 0 40px;
        align-items: start;
    }

    .woocommerce-account .col2-set {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .woocommerce-cart .sp-entry > .woocommerce {
        grid-template-columns: 1fr 360px;
    }

    .woocommerce-checkout form.checkout {
        grid-template-columns: 1fr 400px;
    }
}

/* stacked defaults, below 992px */
@media (max-width: 991.98px) {
    .woocommerce-cart .cart-collaterals {
        margin-top: 26px;
    }

    .woocommerce-checkout form.checkout > #order_review_heading {
        margin-top: 30px;
    }
}

/* Below this the cart and order tables stop working as tables: WooCommerce's
   own responsive mode turns each row into a labelled stack. */
@media (max-width: 767px) {
    .woocommerce table.shop_table_responsive tr td::before,
    .woocommerce-page table.shop_table_responsive tr td::before {
        color: var(--sp-navy);
        font-weight: 400;
    }

    /* WooCommerce's responsive mode already turns every cell into a block at
       this width, so the table has no columns left to protect and the two
       halves can simply stack. */
    .woocommerce-cart td.actions {
        display: block;
    }

    .woocommerce-cart td.actions .coupon,
    .woocommerce-cart td.actions > .button {
        display: flex;
        float: none;
        margin-bottom: 12px;
    }

    .woocommerce-cart td.actions .coupon input.input-text {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .woocommerce-cart td.actions .button {
        width: 100%;
    }

    .sp-product-single form.cart .button {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   LINK CONTRAST ON THE GREY PANELS
   --------------------------------------------------------------------------
   The brand blue reaches only 4.1:1 against the grey panel background - just
   under the readable threshold - so links sitting on those panels step down
   to the darker blue the buttons already use on hover. The brand colour
   itself is left exactly as the design specifies.
   ========================================================================== */
.woocommerce-info a,
.woocommerce-message a:not(.button),
.woocommerce-error a,
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-cart .cart_totals a,
.woocommerce-checkout #order_review a {
    color: var(--sp-blue-dark);
}

/* ==========================================================================
   CART - product image on small screens
   --------------------------------------------------------------------------
   WooCommerce's own smallscreen sheet hides .product-thumbnail entirely once
   its responsive cart mode takes over, leaving a phone user with a list of
   product names and no pictures. The image comes back, centred above the
   stacked detail lines. The query matches the plugin's 768px boundary rather
   than the theme's 767px one, so there is no width where neither rule applies.
   ========================================================================== */
@media (max-width: 768px) {
    .woocommerce-cart table.cart td.product-thumbnail {
        display: block;
        width: auto;
        text-align: center;
        padding-top: 18px;
        border-top: 0;
    }

    /* the stacked rows label every cell with its column heading - the picture
       does not need one */
    .woocommerce-cart table.cart td.product-thumbnail::before {
        display: none;
    }

    .woocommerce-cart table.cart td.product-thumbnail img {
        width: 108px;
        margin-inline: auto;
    }
}

/* ==========================================================================
   DISABLED BUTTONS
   --------------------------------------------------------------------------
   "Update cart" only wakes up once a quantity actually changes, so it spends
   most of its life disabled - it is the resting state people see. WooCommerce
   styles that state with `color: inherit`, which handed the button the page's
   dark grey body colour while the brand blue stayed underneath: grey text on
   blue at half opacity. It also kept the hover lift for a control that cannot
   be pressed. A real disabled treatment replaces both.
   ========================================================================== */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled] {
    background-color: #EDEDED;
    background-image: none;
    border: 1px solid var(--sp-line);
    color: #5A5A5A;
    opacity: 1;
    cursor: not-allowed;
}

.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce button.button.disabled:hover,
.woocommerce input.button:disabled:hover,
.woocommerce input.button:disabled[disabled]:hover {
    background: #EDEDED;
    color: #5A5A5A;
    transform: none;
}

/* The update button, the coupon field and the coupon button share one row, so
   they share a height - it ran 43px / 35px / 48px before. WooCommerce sizes the
   disabled button and the coupon field from selectors carrying four classes, so
   these are qualified down to the table and the cell to out-rank them rather
   than reaching for !important. */
.woocommerce-cart table.cart td.actions button.button,
.woocommerce-cart table.cart td.actions .coupon button.button {
    padding: 12px 30px;
    font-size: 15px;
    line-height: 1.6;
    /* the disabled button and the coupon field both carry a 1px border, so the
       enabled button takes a transparent one and all three land on 50px */
    border: 1px solid transparent;
}

.woocommerce-cart table.cart td.actions .coupon input.input-text {
    padding: 12px 16px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    font-family: var(--sp-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--sp-text);
}

/* ==========================================================================
   SINGLE PRODUCT - gallery
   --------------------------------------------------------------------------
   WooCommerce builds the gallery with FlexSlider once the theme opts in: a
   main stage plus a thumbnail strip it drives through .flex-control-thumbs.
   The stage is framed as a card in the site's own language - soft grey ground
   so a cut-out product photo still reads, brand radius, hairline border.
   ========================================================================== */
.sp-product-single .product .woocommerce-product-gallery.images {
    position: relative;
}

.sp-product-single .woocommerce-product-gallery__wrapper {
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    border: 1px solid var(--sp-line);
    background: var(--sp-bg);
    margin: 0;
}

.sp-product-single .woocommerce-product-gallery__image {
    margin: 0;
}

.sp-product-single .woocommerce-product-gallery__image img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* the zoom lens and the lightbox trigger sit above the frame */
.sp-product-single .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sp-white);
    box-shadow: var(--sp-shadow);
    color: var(--sp-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    text-indent: 0;
    transition: all var(--sp-transition);
}

.sp-product-single .woocommerce-product-gallery__trigger::before {
    content: '\f00e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 16px;
    color: inherit;
    border: 0;
    background: none;
    position: static;
    width: auto;
    height: auto;
}

.sp-product-single .woocommerce-product-gallery__trigger::after {
    display: none;
}

.sp-product-single .woocommerce-product-gallery__trigger:hover {
    background: var(--sp-blue);
    color: var(--sp-white);
}

/* --- thumbnail strip ----------------------------------------------------- */
.sp-product-single .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.sp-product-single .flex-control-thumbs li {
    width: auto;
    margin: 0;
    float: none;
    list-style: none;
}

.sp-product-single .flex-control-thumbs img {
    width: 100%;
    height: 84px;
    object-fit: cover;
    display: block;
    border-radius: var(--sp-radius);
    border: 2px solid transparent;
    opacity: 1;
    cursor: pointer;
}

.sp-product-single .flex-control-thumbs img.flex-active {
    border-color: var(--sp-blue);
}

/* the slider arrows are redundant next to a thumbnail strip */
.sp-product-single .flex-direction-nav {
    display: none;
}

/* ==========================================================================
   SINGLE PRODUCT - summary column
   ========================================================================== */
.sp-product-single .summary.entry-summary {
    padding-block: 4px;
}

/* availability badge, printed between the title and the price */
.sp-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 500px;
    font-size: var(--sp-small);
    margin-bottom: 18px;
}

.sp-stock-badge.is-in {
    background: rgba(3, 124, 200, .1);
    color: var(--sp-blue-dark);
}

.sp-stock-badge.is-out {
    background: rgba(192, 57, 43, .1);
    color: #A93226;
}

.sp-product-single .summary .price {
    font-size: 34px;
}

/* The quantity box and the button read as one control pair, so the stepper
   picks up the same height, radius and hairline as the field it sits beside. */
.sp-product-single form.cart .quantity {
    display: flex;
    align-items: stretch;
}

.sp-product-single form.cart .quantity .qty {
    width: 96px;
    height: 52px;
    padding: 0 8px;
    font-size: 16px;
    color: var(--sp-navy);
}

.sp-product-single form.cart .single_add_to_cart_button {
    height: 52px;
    padding-inline: 40px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sp-product-single form.cart .single_add_to_cart_button::before {
    content: '\f07a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 15px;
}

/* ==========================================================================
   SINGLE PRODUCT - tabs
   ========================================================================== */
.sp-product-single .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--sp-line);
    padding-bottom: 0;
    margin-bottom: 0;
    gap: 6px;
}

.sp-product-single .woocommerce-tabs ul.tabs li {
    background: transparent;
    border-radius: var(--sp-radius) var(--sp-radius) 0 0;
    border-bottom: 3px solid transparent;
}

.sp-product-single .woocommerce-tabs ul.tabs li a {
    padding: 13px 26px;
    color: var(--sp-muted-strong);
}

.sp-product-single .woocommerce-tabs ul.tabs li:hover {
    background: var(--sp-bg);
}

.sp-product-single .woocommerce-tabs ul.tabs li.active {
    background: var(--sp-bg);
    border-bottom-color: var(--sp-blue);
}

.sp-product-single .woocommerce-tabs ul.tabs li.active a {
    color: var(--sp-navy);
}

.sp-product-single .woocommerce-tabs .panel {
    background: var(--sp-bg);
    border-radius: 0 0 var(--sp-radius-lg) var(--sp-radius-lg);
    padding: 30px 32px;
    margin: 0;
}

/* ==========================================================================
   SINGLE PRODUCT - related
   ========================================================================== */
.sp-product-single .related > h2 {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
}

/* WooCommerce prints related products as ul.products, not the theme grid */
.sp-product-single .related ul.products,
.sp-product-single .upsells ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-product-single .related ul.products::before,
.sp-product-single .related ul.products::after,
.sp-product-single .upsells ul.products::before,
.sp-product-single .upsells ul.products::after {
    display: none;
}

.sp-product-single .related ul.products li.product,
.sp-product-single .upsells ul.products li.product {
    width: auto;
    margin: 0;
    float: none;
    list-style: none;
}

/* ==========================================================================
   SINGLE PRODUCT - responsive
   ========================================================================== */
@media (max-width: 1199px) {
    .sp-product-single .related ul.products,
    .sp-product-single .upsells ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .sp-product-single .woocommerce-product-gallery__image img {
        height: 380px;
    }

    .sp-product-single .related ul.products,
    .sp-product-single .upsells ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px 20px;
    }
}

@media (max-width: 575px) {
    .sp-product-single .woocommerce-product-gallery__image img {
        height: 280px;
    }

    .sp-product-single .flex-control-thumbs img {
        height: 62px;
    }

    .sp-product-single .summary .price {
        font-size: 28px;
    }

    .sp-product-single form.cart .single_add_to_cart_button {
        padding-inline: 24px;
    }

    .sp-product-single .woocommerce-tabs .panel {
        padding: 22px 18px;
    }

    .sp-product-single .woocommerce-tabs ul.tabs li a {
        padding: 11px 16px;
        font-size: 14px;
    }
}

/* ==========================================================================
   SINGLE PRODUCT - specificity corrections
   --------------------------------------------------------------------------
   WooCommerce sizes product imagery through selectors like
   `.woocommerce div.product div.images img`, which carries two classes AND two
   element names. Theme rules written only against the gallery's own class name
   lose to it, so the main image kept its intrinsic height and the thumbnails
   collapsed to 30px. Each rule below is qualified down through div.product so
   it out-ranks the plugin without resorting to !important.
   ========================================================================== */
.sp-product-single div.product div.images .woocommerce-product-gallery__image img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.sp-product-single div.product .flex-control-thumbs img {
    width: 100%;
    height: 84px;
    object-fit: cover;
    display: block;
    border-radius: var(--sp-radius);
    border: 2px solid transparent;
    opacity: 1;
    cursor: pointer;
}

.sp-product-single div.product .flex-control-thumbs img.flex-active,
.sp-product-single div.product .flex-control-thumbs img:hover {
    border-color: var(--sp-blue);
}

.sp-product-single div.product .woocommerce-product-gallery__trigger {
    width: 44px;
    height: 44px;
    padding: 0;
}

.sp-product-single div.product .summary .price,
.sp-product-single div.product .summary p.price {
    font-size: 34px;
    line-height: 1.3;
}

.sp-product-single div.product .woocommerce-tabs ul.tabs li {
    background: transparent;
    border-bottom: 3px solid transparent;
    border-radius: var(--sp-radius) var(--sp-radius) 0 0;
}

.sp-product-single div.product .woocommerce-tabs ul.tabs li.active {
    background: var(--sp-bg);
    border-bottom-color: var(--sp-blue);
}

.sp-product-single div.product .woocommerce-tabs ul.tabs li a {
    color: var(--sp-muted-strong);
}

.sp-product-single div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--sp-navy);
}

/* The stage carries the height now, not the photo inside it - see the image
   sizing block further down, where the photo is contained rather than cropped. */
@media (max-width: 991px) {
    .sp-product-single div.product div.images .woocommerce-product-gallery__image {
        height: 400px;
    }
}

@media (max-width: 575px) {

    .sp-product-single div.product .summary .price,
    .sp-product-single div.product .summary p.price {
        font-size: 28px;
    }
}

/* WooCommerce reaches the thumbnails and the lightbox trigger through
   `div.images .flex-control-thumbs li img` and `div.images .…__trigger` - four
   classes deep. These mirror that depth so the strip keeps its own height and
   the trigger its own size. */
.sp-product-single div.product div.images .flex-control-thumbs li img {
    width: 100%;
    height: 84px;
    object-fit: cover;
    display: block;
    border-radius: var(--sp-radius);
    border: 2px solid transparent;
    opacity: 1;
    cursor: pointer;
}

.sp-product-single div.product div.images .flex-control-thumbs li img.flex-active,
.sp-product-single div.product div.images .flex-control-thumbs li img:hover {
    border-color: var(--sp-blue);
}

.sp-product-single div.product div.images .woocommerce-product-gallery__trigger {
    width: 44px;
    height: 44px;
    padding: 0;
    top: 16px;
    inset-inline-end: 16px;
}

@media (max-width: 575px) {
    .sp-product-single div.product div.images .flex-control-thumbs li img {
        height: 62px;
    }
}

/* A grid item's min-width defaults to auto, so it refuses to shrink below its
   content. FlexSlider lays every slide out side by side on one long track -
   four slides came to 5522px - and once the layout went single-column that
   track dragged the whole page into a horizontal scroll. Allowing the columns
   to shrink, and clipping the track at its viewport, keeps the slider inside
   the layout at every width. */
.sp-product-single .product > * {
    min-width: 0;
}

.sp-product-single .flex-viewport {
    overflow: hidden;
    border-radius: var(--sp-radius-lg);
}

/* ==========================================================================
   SINGLE PRODUCT - image sizing
   --------------------------------------------------------------------------
   The uploaded product photos are 242x235 - small, and almost exactly square.
   Forcing them into a 460px-tall stage with object-fit:cover blew them up more
   than twice their size AND cropped the top and bottom off a square subject.
   The stage is squared to match the source instead, and the photo is contained
   and centred on a soft ground rather than stretched to fill: nothing is
   cropped, nothing is distorted, and the cap keeps enlargement to about 1.5x
   so the edges stay reasonably crisp.

   Replacing the source files with ~1000px images is the real fix - these rules
   scale up with them automatically, so nothing here needs revisiting.
   ========================================================================== */
.sp-product-single div.product div.images .woocommerce-product-gallery__image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 460px;
    padding: 28px;
    background: var(--sp-bg);
    box-sizing: border-box;
}

.sp-product-single div.product div.images .woocommerce-product-gallery__image img {
    width: auto;
    height: auto;
    max-width: 72%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 0;
}

/* the wrapper only carries the frame now - the ground moved onto the slide so
   every slide in the strip is grounded identically */
.sp-product-single .woocommerce-product-gallery__wrapper {
    background: transparent;
}

/* --- thumbnails ---------------------------------------------------------- */
.sp-product-single div.product div.images .flex-control-thumbs li img {
    width: 100%;
    height: 96px;
    object-fit: contain;
    padding: 8px;
    background: var(--sp-bg);
    box-sizing: border-box;
    display: block;
    border-radius: var(--sp-radius);
    border: 2px solid var(--sp-line);
    opacity: 1;
    cursor: pointer;
}

.sp-product-single div.product div.images .flex-control-thumbs li img.flex-active,
.sp-product-single div.product div.images .flex-control-thumbs li img:hover {
    border-color: var(--sp-blue);
}

@media (max-width: 575px) {
    .sp-product-single div.product div.images .woocommerce-product-gallery__image {
        height: 300px;
        padding: 18px;
    }

    .sp-product-single div.product div.images .flex-control-thumbs li img {
        height: 68px;
        padding: 5px;
    }
}

/* ==========================================================================
   SINGLE PRODUCT - reviews
   ========================================================================== */
.sp-product-single #reviews .woocommerce-Reviews-title {
    font-size: var(--sp-h3);
    color: var(--sp-navy);
    margin-bottom: 24px;
}

.sp-product-single #reviews .woocommerce-noreviews {
    background: var(--sp-white);
    border: 1px dashed var(--sp-line);
    border-radius: var(--sp-radius);
    color: var(--sp-muted-strong);
    padding: 18px 22px;
    margin: 0 0 26px;
}

/* --- the list of reviews ------------------------------------------------- */
.sp-product-single #reviews ol.commentlist {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    gap: 16px;
}

.sp-product-single #reviews ol.commentlist li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-product-single #reviews ol.commentlist li .comment_container {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--sp-white);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    padding: 22px 24px;
}

.sp-product-single #reviews ol.commentlist li img.avatar {
    position: static;
    float: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--sp-bg);
    margin: 0;
}

.sp-product-single #reviews ol.commentlist li .comment-text {
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.sp-product-single #reviews .comment-text p.meta {
    font-size: var(--sp-small);
    color: var(--sp-muted-strong);
    margin-bottom: 10px;
}

.sp-product-single #reviews .comment-text p.meta strong {
    color: var(--sp-navy);
    font-size: var(--sp-body);
    display: block;
    margin-bottom: 2px;
}

.sp-product-single #reviews .comment-text .description {
    color: #4A4A4A;
    line-height: 2;
}

/* --- stars --------------------------------------------------------------- */
.sp-product-single .star-rating,
.sp-product-single p.stars a {
    color: #E8A33D;
}

.sp-product-single .comment-text .star-rating {
    float: none;
    margin: 0 0 8px;
}

/* --- the review form ----------------------------------------------------- */
.sp-product-single #review_form_wrapper {
    background: var(--sp-white);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    padding: 30px 28px;
}

.sp-product-single #reviews #reply-title {
    font-size: var(--sp-h3);
    color: var(--sp-navy);
    display: block;
    margin-bottom: 6px;
}

.sp-product-single #reviews .comment-notes,
.sp-product-single #reviews .comment-form-cookies-consent label {
    font-size: var(--sp-small);
    color: var(--sp-muted-strong);
}

.sp-product-single #reviews .comment-form label {
    display: block;
    color: var(--sp-navy);
    font-size: 15px;
    margin-bottom: 7px;
}

.sp-product-single #reviews .comment-form input[type="text"],
.sp-product-single #reviews .comment-form input[type="email"],
.sp-product-single #reviews .comment-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-white);
    color: var(--sp-text);
    font-family: var(--sp-font);
    font-size: 15px;
}

.sp-product-single #reviews .comment-form textarea {
    min-height: 130px;
    resize: vertical;
}

.sp-product-single #reviews .comment-form input:focus,
.sp-product-single #reviews .comment-form textarea:focus {
    outline: none;
    border-color: var(--sp-blue);
    box-shadow: 0 0 0 3px rgba(3, 124, 200, .12);
}

.sp-product-single #reviews .comment-form p {
    margin-bottom: 16px;
}

/* name and e-mail sit side by side, like every other form on the site */
@media (min-width: 576px) {
    .sp-product-single #reviews .comment-form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 18px;
    }

    .sp-product-single #reviews .comment-form > *:not(.comment-form-author):not(.comment-form-email) {
        grid-column: 1 / -1;
    }
}

.sp-product-single #reviews .comment-form-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sp-product-single #reviews .comment-form-rating label {
    margin: 0;
}

.sp-product-single #reviews p.stars {
    margin: 0;
}

.sp-product-single #reviews .form-submit input[type="submit"] {
    background: var(--sp-blue);
    color: var(--sp-white);
    border: 0;
    border-radius: var(--sp-radius);
    padding: 13px 40px;
    font-family: var(--sp-font);
    font-size: 16px;
    cursor: pointer;
    transition: background var(--sp-transition), transform var(--sp-transition);
}

.sp-product-single #reviews .form-submit input[type="submit"]:hover {
    background: var(--sp-blue-dark);
    transform: translateY(-2px);
}

/* The thumbnail strip itself needs the same four-class depth as its images -
   WooCommerce lays the list out with `div.images .flex-control-thumbs li`
   (float + percentage width), which was overriding the grid and leaving each
   cell shrink-wrapped to about 30px. */
.sp-product-single div.product div.images .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.sp-product-single div.product div.images .flex-control-thumbs li {
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
    list-style: none;
}

/* WooCommerce styles the review avatar through `#reviews #comments ol… img.avatar`
   - two IDs deep - so the theme has to carry the same ids to resize it. */
.sp-product-single #reviews #comments ol.commentlist li img.avatar {
    position: static;
    float: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--sp-bg);
    margin: 0;
}

.sp-product-single #reviews #comments ol.commentlist li .comment-text {
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

/* Once the layout stacks, the gallery would otherwise run the full width of
   the column - a 634px-wide band around a square product. Capping and centring
   it keeps the stage close to the proportion of the photograph inside it. */
@media (max-width: 991px) {
    .sp-product-single div.product div.images {
        max-width: 460px;
        margin-inline: auto;
    }
}

/* ==========================================================================
   REVIEWS - panel padding
   --------------------------------------------------------------------------
   The reviews tab shares the description tab's grey panel, but its contents
   are cards on that grey rather than a run of text, so it needs its own
   breathing room inside the panel instead of sitting flush to the edges.
   ========================================================================== */
.sp-product-single #tab-reviews {
    padding: 36px 34px;
}

.sp-product-single #reviews #comments {
    margin-bottom: 34px;
}

.sp-product-single #reviews #comments:last-child {
    margin-bottom: 0;
}

/* the gallery no longer opens a lightbox, so the magnifier button is gone -
   any residual styling for it goes with it */
.sp-product-single div.product div.images .woocommerce-product-gallery__trigger {
    display: none;
}

@media (max-width: 991px) {
    .sp-product-single #tab-reviews {
        padding: 28px 24px;
    }
}

@media (max-width: 575px) {
    .sp-product-single #tab-reviews {
        padding: 22px 18px;
    }

    .sp-product-single #reviews #comments ol.commentlist li .comment_container {
        padding: 18px 16px;
        gap: 14px;
    }
}

/* WooCommerce zeroes the tab panel padding through
   `.woocommerce div.product .woocommerce-tabs .panel`, so the theme rule has
   to match that depth - the description tab was rendering flush to the edges
   of its grey panel while the reviews tab (targeted by id) had its own. */
.sp-product-single div.product .woocommerce-tabs .panel {
    background: var(--sp-bg);
    border-radius: 0 0 var(--sp-radius-lg) var(--sp-radius-lg);
    padding: 36px 34px;
    margin: 0;
    color: #4A4A4A;
    line-height: 2.1;
}

@media (max-width: 991px) {
    .sp-product-single div.product .woocommerce-tabs .panel {
        padding: 28px 24px;
    }
}

@media (max-width: 575px) {
    .sp-product-single div.product .woocommerce-tabs .panel {
        padding: 22px 18px;
    }
}

/* ==========================================================================
   SINGLE PRODUCT - main image proportion
   --------------------------------------------------------------------------
   The gallery column is 455px wide, but the photographs are only 242px. Shown
   at their natural size they filled barely half the frame and read as small
   and lost, with a wide grey margin all round.
   The frame is brought down to the size of the artwork instead of the artwork
   being left rattling around inside the frame: the gallery is capped and
   centred in its column, and the photo is allowed to fill it. That lands the
   product at roughly 87% of the frame with about 1.35x enlargement - the same
   kind of ratio the shop cards already use, where it reads cleanly.
   ========================================================================== */
.sp-product-single div.product div.images {
    max-width: 380px;
    margin-inline: auto;
}

.sp-product-single div.product div.images .woocommerce-product-gallery__image {
    height: 380px;
    padding: 24px;
}

.sp-product-single div.product div.images .woocommerce-product-gallery__image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sp-product-single div.product div.images .flex-control-thumbs li img {
    height: 82px;
    padding: 7px;
}

@media (max-width: 991px) {
    .sp-product-single div.product div.images {
        max-width: 360px;
    }

    .sp-product-single div.product div.images .woocommerce-product-gallery__image {
        height: 360px;
    }

    .sp-product-single div.product div.images .flex-control-thumbs li img {
        height: 78px;
    }
}

@media (max-width: 575px) {
    .sp-product-single div.product div.images {
        max-width: 300px;
    }

    .sp-product-single div.product div.images .woocommerce-product-gallery__image {
        height: 300px;
        padding: 18px;
    }

    .sp-product-single div.product div.images .flex-control-thumbs li img {
        height: 64px;
        padding: 5px;
    }
}

/* max-width only caps a picture, it never grows one - with width:auto the
   photo stayed at its natural 242px and still left a third of the frame empty.
   Filling the padded box and letting object-fit keep the ratio is what
   actually seats it in the frame. */
.sp-product-single div.product div.images .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

/* The gallery track is sized to the frame it holds, so the frame is not left
   floating in the middle of a much wider column. */
@media (min-width: 992px) {
    .sp-product-single .product {
        grid-template-columns: 380px 1fr;
        gap: 56px;
    }
}

/* The frame is squared to the artwork it holds - the photographs are 1.03:1,
   so a square stage leaves an even margin on all four sides instead of the
   taller-than-wide box a fixed height produced. Safe to use aspect-ratio here
   because the gallery width is now capped; earlier, on an uncapped column, it
   let the stage stretch to 634px on a tablet. */
.sp-product-single div.product div.images .woocommerce-product-gallery__image {
    height: auto;
    aspect-ratio: 1 / 1;
}

@media (max-width: 991px) {
    .sp-product-single div.product div.images .woocommerce-product-gallery__image {
        height: auto;
    }
}

@media (max-width: 575px) {
    .sp-product-single div.product div.images .woocommerce-product-gallery__image {
        height: auto;
    }
}

/* ==========================================================================
   SINGLE PRODUCT - price row
   --------------------------------------------------------------------------
   The availability badge and the price both render inline, so they sat flush
   against one another with no separation at all. They now share one row with a
   real gap and a common baseline, and the row carries the spacing that used to
   hang off the badge alone.
   ========================================================================== */
.sp-product-single div.product .summary .sp-stock-badge {
    margin-bottom: 0;
    margin-inline-end: 18px;
    vertical-align: middle;
}

.sp-product-single div.product .summary .price,
.sp-product-single div.product .summary p.price {
    vertical-align: middle;
    margin-bottom: 0;
}

/* the pair as a block: the divider under them keeps its distance from both */
.sp-product-single div.product .summary .sp-stock-badge + .price,
.sp-product-single div.product .summary .sp-stock-badge + p.price {
    margin-top: 0;
}

/* ==========================================================================
   SINGLE PRODUCT - gallery frame moved onto the viewport
   --------------------------------------------------------------------------
   The grey ground, the radius and the inner padding used to sit on the SLIDE.
   FlexSlider sizes each slide from the viewport's content box, so that 24px of
   padding came straight off the slide width: a 380px frame held 332px slides,
   and the 48px difference showed as a strip of the next photograph beside the
   main image.
   The frame now belongs to the viewport - which is the fixed part - and the
   slides are left plain and full-bleed inside it. Nothing is subtracted from
   the width FlexSlider measures, so the slides fill the frame exactly.
   ========================================================================== */
.sp-product-single div.product div.images .flex-viewport {
    background: var(--sp-bg);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    padding: 0;
    aspect-ratio: 1 / 1;
}

.sp-product-single div.product div.images .woocommerce-product-gallery__wrapper {
    background: transparent;
    border: 0;
    border-radius: 0;
    height: 100%;
}

.sp-product-single div.product div.images .woocommerce-product-gallery__image {
    background: transparent;
    padding: 24px;
    height: 100%;
    aspect-ratio: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-product-single div.product div.images .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 575px) {
    .sp-product-single div.product div.images .woocommerce-product-gallery__image {
        padding: 18px;
    }
}

/* FlexSlider writes an inline height onto the viewport. Combined with an
   aspect-ratio that height also decided the WIDTH, so the frame shrank to 328px
   and sat narrower than the thumbnail strip beneath it. The ratio is dropped:
   the viewport simply fills the column, and the square comes from the slide
   height instead, which FlexSlider reads rather than overrides. */
.sp-product-single div.product div.images .flex-viewport {
    width: 100%;
    aspect-ratio: auto;
}

.sp-product-single div.product div.images .woocommerce-product-gallery__image {
    height: 380px;
    aspect-ratio: auto;
}

@media (max-width: 991px) {
    .sp-product-single div.product div.images .woocommerce-product-gallery__image {
        height: 360px;
    }
}

@media (max-width: 575px) {
    .sp-product-single div.product div.images .woocommerce-product-gallery__image {
        height: 300px;
    }
}

/* ==========================================================================
   SINGLE PRODUCT - show the active slide, drop the sliding track
   --------------------------------------------------------------------------
   FlexSlider lays its slides on one long floated track and moves it with a
   transform, sizing everything from measurements it takes once, early. Those
   figures kept coming out a few dozen pixels short of the settled layout, and
   the difference showed as a strip of the neighbouring photograph inside the
   frame - retriggering a resize did not reliably correct it.
   The sliding is not wanted here anyway: the brief is that a thumbnail simply
   shows its image in the main frame. So the track is neutralised and only the
   active slide is rendered. FlexSlider still owns which slide is active, so
   the thumbnails keep working exactly as before - there is just no geometry
   left for it to get wrong.
   !important is required: these are inline styles written by its JavaScript.
   ========================================================================== */
.sp-product-single div.product div.images .woocommerce-product-gallery__wrapper {
    width: 100% !important;
    transform: none !important;
    transition: none !important;
    display: block;
}

.sp-product-single div.product div.images .woocommerce-product-gallery__image {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    display: none !important;
}

.sp-product-single div.product div.images .woocommerce-product-gallery__image.flex-active-slide {
    display: flex !important;
}

/* With one slide rendered at a time the track has no length of its own, so the
   stale inline height FlexSlider left on the viewport is released and the frame
   takes its height from the slide inside it. */
.sp-product-single div.product div.images .flex-viewport {
    height: auto !important;
}

/* ==========================================================================
   SINGLE PRODUCT - thumbnails, no motion
   --------------------------------------------------------------------------
   The strip is clipped by FlexSlider (overflow:hidden), so anything that moved
   a thumbnail even slightly - the 2px hover lift that used to be here - pushed
   part of it under that clip and it appeared to lose an edge. The lift is gone
   and the clip is released, so a thumbnail is never cut off: the only thing
   that changes on hover or when active is the border colour.
   ========================================================================== */
.sp-product-single div.product div.images .flex-control-thumbs {
    overflow: visible;
}

.sp-product-single div.product div.images .flex-control-thumbs li,
.sp-product-single div.product div.images .flex-control-thumbs li img {
    transition: none;
    transform: none;
    animation: none;
}

/* square cells, so a thumbnail matches the frame it feeds */
.sp-product-single div.product div.images .flex-control-thumbs li img {
    height: auto;
    aspect-ratio: 1 / 1;
}

/* ==========================================================================
   SINGLE PRODUCT - full-width gallery on phones
   --------------------------------------------------------------------------
   The 300px cap above was set while the gallery shared a row with the summary
   and a full-width stage would have read as a wide band around a square photo.
   Stacked on a phone the gallery has the column to itself, and the cap just
   left it floating in the middle with dead margin either side. It runs the
   full column instead, and the stage takes its height from its own width so
   the frame stays square at every phone size rather than at one of them.
   ========================================================================== */
@media (max-width: 575px) {
    .sp-product-single div.product div.images {
        max-width: none;
    }

    .sp-product-single div.product div.images .woocommerce-product-gallery__image {
        height: auto;
        aspect-ratio: 1 / 1;
    }
}