/*-- -------------------------- -->
<---   Crooz Consulting Store   -->
<--- -------------------------- -*/

/*
  Re-skins WooCommerce to match the theme: Playfair headings, Roboto body,
  the --primary teal palette, and the same card treatment used by the blog.

  woocommerce-layout.css and woocommerce-smallscreen.css are dequeued in
  functions.php, so the grid, cart table and checkout columns below are the
  only ones in play. woocommerce-general.css is still loaded for component
  mechanics (star-rating font, select2, gallery slider) and is re-skinned here.
*/

:root {
    --shopSurface: #ffffff;
    --shopSurfaceAlt: #f7f7f7;
    --shopBorder: #e5e5e5;
    --shopMuted: #767676;
    --shopRadius: 0.5rem;
}

/*-- -------------------------- -->
<---     Shop / Page Shell      -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    #shop-main,
    #page-main {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: var(--sectionPadding);
        background-color: var(--shopSurface);
    }
    #shop-main .cs-container,
    #page-main .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
    }
    /* WooCommerce prints a clearing div after floated elements we no longer float. */
    #shop-main .clear {
        clear: both;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #shop-main,
    body.dark-mode #page-main {
        background-color: var(--dark);
    }
}

/*-- -------------------------- -->
<---      Buttons (global)      -->
<--- -------------------------- -*/

/* Matches WooCommerce's own button selector list so ours wins on source order. */
@media only screen and (min-width: 0rem) {
    .woocommerce #respond input#submit,
    .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.alt {
        font-family: inherit;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        text-decoration: none;
        text-transform: none;
        padding: 1rem 1.75rem;
        color: #fff;
        background-color: var(--primary);
        border: none;
        border-radius: 0.25rem;
        cursor: pointer;
        display: inline-block;
        position: relative;
        z-index: 1;
        overflow: hidden;
        transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
    }
    .woocommerce #respond input#submit:hover,
    .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,
    .woocommerce #respond input#submit.alt:hover {
        color: #fff;
        background-color: #1a1a1a;
        transform: translateY(-2px);
    }
    .woocommerce a.button.disabled,
    .woocommerce button.button:disabled,
    .woocommerce button.button:disabled[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }
    /* Secondary / outline treatment */
    .woocommerce a.button.wc-backward,
    .woocommerce .cart .button[name="update_cart"],
    .woocommerce button.button[name="update_cart"] {
        color: var(--primary);
        background-color: transparent;
        border: 2px solid var(--primary);
        padding: 0.875rem 1.625rem;
    }
    .woocommerce a.button.wc-backward:hover,
    .woocommerce .cart .button[name="update_cart"]:hover,
    .woocommerce button.button[name="update_cart"]:hover {
        color: #fff;
        background-color: var(--primary);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce #respond input#submit,
    body.dark-mode .woocommerce a.button,
    body.dark-mode .woocommerce button.button,
    body.dark-mode .woocommerce input.button,
    body.dark-mode .woocommerce a.button.alt,
    body.dark-mode .woocommerce button.button.alt,
    body.dark-mode .woocommerce input.button.alt {
        color: var(--dark);
        background-color: var(--secondaryLight);
    }
    body.dark-mode .woocommerce #respond input#submit:hover,
    body.dark-mode .woocommerce a.button:hover,
    body.dark-mode .woocommerce button.button:hover,
    body.dark-mode .woocommerce input.button:hover,
    body.dark-mode .woocommerce a.button.alt:hover,
    body.dark-mode .woocommerce button.button.alt:hover,
    body.dark-mode .woocommerce input.button.alt:hover {
        color: var(--dark);
        background-color: #fff;
    }
    body.dark-mode .woocommerce a.button.wc-backward,
    body.dark-mode .woocommerce button.button[name="update_cart"] {
        color: var(--secondaryLight);
        background-color: transparent;
        border-color: var(--secondaryLight);
    }
}

/*-- -------------------------- -->
<---          Notices           -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce-notices-wrapper:empty {
        display: none;
    }
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error {
        font-size: 1rem;
        line-height: 1.5em;
        list-style: none;
        margin: 0 0 2rem 0;
        padding: 1.125rem 1.25rem;
        box-sizing: border-box;
        background-color: var(--shopSurfaceAlt);
        border: none;
        border-left: 4px solid var(--primary);
        border-radius: 0 var(--shopRadius) var(--shopRadius) 0;
        color: var(--headerColor);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 1rem;
    }
    .woocommerce-message::before,
    .woocommerce-info::before,
    .woocommerce-error::before {
        /* WooCommerce's icon font pseudo-elements are positioned absolutely by
           its own stylesheet; flex layout here is cleaner. */
        position: static;
        color: var(--primary);
    }
    .woocommerce-error {
        border-left-color: #c0392b;
    }
    .woocommerce-error::before {
        color: #c0392b;
    }
    .woocommerce-message .button,
    .woocommerce-info .button,
    .woocommerce-error .button {
        margin-left: auto;
        padding: 0.625rem 1.125rem;
        font-size: 0.875rem;
    }
    .woocommerce-error li {
        list-style: none;
        width: 100%;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce-message,
    body.dark-mode .woocommerce-info,
    body.dark-mode .woocommerce-error {
        background-color: var(--medium);
        color: var(--bodyTextColorWhite);
        border-left-color: var(--secondaryLight);
    }
    body.dark-mode .woocommerce-message::before,
    body.dark-mode .woocommerce-info::before {
        color: var(--secondaryLight);
    }
}

/*-- -------------------------- -->
<---   Result Count / Sorting   -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering {
        margin: 0;
        float: none;
    }
    #shop-main .cs-shop-toolbar,
    .woocommerce .woocommerce-notices-wrapper + .woocommerce-result-count {
        margin-bottom: 0;
    }
    .woocommerce .woocommerce-result-count {
        font-size: 0.9375rem;
        color: var(--shopMuted);
    }
    .woocommerce .woocommerce-ordering select,
    .woocommerce-page .woocommerce-ordering select {
        font-family: inherit;
        font-size: 0.9375rem;
        padding: 0.6875rem 1rem;
        color: var(--headerColor);
        background-color: var(--shopSurfaceAlt);
        border: 1px solid var(--shopBorder);
        border-radius: 0.25rem;
        cursor: pointer;
    }
    /* Sits the count and the sort dropdown on one row above the grid. */
    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering {
        display: inline-block;
        vertical-align: middle;
    }
    .woocommerce .woocommerce-ordering {
        float: right;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce .woocommerce-result-count {
        color: var(--bodyTextColorWhite);
        opacity: 0.7;
    }
    body.dark-mode .woocommerce .woocommerce-ordering select {
        color: var(--bodyTextColorWhite);
        background-color: var(--medium);
        border-color: var(--accent);
    }
}

/*-- -------------------------- -->
<---       Product Grid         -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        width: 100%;
        margin: 2.5rem 0 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 16px - 32px */
        gap: clamp(1rem, 2.5vw, 2rem);
        clear: both;
    }
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        /* Neutralises the float widths from WooCommerce's own stylesheets. */
        width: 100%;
        float: none;
        clear: none;
        margin: 0;
        padding: 0;
        list-style: none;
        grid-column: span 12;
        background-color: var(--shopSurface);
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    }
    .woocommerce ul.products li.product:hover {
        transform: translateY(-0.4375rem);
        box-shadow: 0px 12px 36px rgba(0, 0, 0, 0.12);
        border-color: var(--primary);
    }
    .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
        text-decoration: none;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    .woocommerce ul.products li.product img {
        width: 100%;
        height: 14rem;
        margin: 0;
        object-fit: cover;
        display: block;
        box-shadow: none;
        transition: transform 0.6s;
    }
    .woocommerce ul.products li.product:hover img {
        transform: scale(1.05);
    }
    /* The image is the only thing that should be clipped by the scale. */
    .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
        overflow: hidden;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-family: 'Playfair Display', serif;
        font-size: 1.25rem;
        line-height: 1.3em;
        font-weight: 700;
        margin: 0;
        padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem) 0.5rem;
        color: var(--headerColor);
        transition: color 0.3s;
    }
    .woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
        color: var(--primary);
    }
    .woocommerce ul.products li.product .price {
        font-size: 1.125rem;
        font-weight: 700;
        /* Push the price to the bottom of the flex column so it sits on one
           line across cards whose titles run one line or three. The button
           already does this; the price was missed. */
        margin: auto 0 0;
        padding: 0 clamp(1.25rem, 3vw, 1.75rem) 1.25rem;
        color: var(--primary);
        display: block;
    }
    .woocommerce ul.products li.product .price del {
        font-size: 0.9375rem;
        font-weight: 400;
        opacity: 0.6;
        margin-right: 0.5rem;
    }
    .woocommerce ul.products li.product .price ins {
        text-decoration: none;
        font-weight: 700;
    }
    .woocommerce ul.products li.product .star-rating {
        margin: 0 clamp(1.25rem, 3vw, 1.75rem) 0.75rem;
        font-size: 0.875rem;
        color: var(--primary);
    }
    /* The add-to-cart button sits outside the product link. */
    .woocommerce ul.products li.product .button {
        margin: auto clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
        padding: 0.875rem 1.25rem;
        font-size: 0.9375rem;
        text-align: center;
    }
    .woocommerce ul.products li.product .added_to_cart {
        margin: 0 clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--primary);
        text-decoration: underline;
        display: inline-block;
    }
    /* Sale flash */
    .woocommerce ul.products li.product .onsale,
    .woocommerce span.onsale {
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        min-height: auto;
        min-width: auto;
        padding: 0.5rem 0.875rem;
        margin: 0;
        color: #fff;
        background-color: var(--secondary);
        border-radius: 2rem;
        position: absolute;
        top: 1rem;
        /* Opposite corner from .cs-tier, which owns top/left. The two pills
           stacked on top of each other on any product that went on sale. */
        right: 1rem;
        left: auto;
        z-index: 2;
    }
    /* No products found */
    .woocommerce .woocommerce-info.woocommerce-no-products-found,
    .woocommerce-no-products-found .woocommerce-info {
        margin-top: 2rem;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        grid-column: span 6;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        grid-column: span 4;
    }
    /* Related / upsell rows stay 3-up too */
    .woocommerce .related ul.products li.product,
    .woocommerce .up-sells ul.products li.product {
        grid-column: span 4;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce ul.products li.product {
        background-color: var(--medium);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce ul.products li.product:hover {
        border-color: var(--secondaryLight);
    }
    body.dark-mode .woocommerce ul.products li.product .woocommerce-loop-product__title {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
        color: var(--secondaryLight);
    }
    body.dark-mode .woocommerce ul.products li.product .price,
    body.dark-mode .woocommerce ul.products li.product .star-rating,
    body.dark-mode .woocommerce ul.products li.product .added_to_cart {
        color: var(--secondaryLight);
    }
}

/*-- -------------------------- -->
<---     Shop Pagination        -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce nav.woocommerce-pagination {
        margin: clamp(2.5rem, 5vw, 4rem) 0 0 0;
        text-align: center;
    }
    .woocommerce nav.woocommerce-pagination ul {
        margin: 0;
        padding: 0;
        border: none;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .woocommerce nav.woocommerce-pagination ul li {
        border: none;
        margin: 0;
        overflow: visible;
    }
    .woocommerce nav.woocommerce-pagination ul li a,
    .woocommerce nav.woocommerce-pagination ul li span {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0 0.875rem;
        box-sizing: border-box;
        color: var(--bodyTextColor);
        background-color: var(--shopSurfaceAlt);
        border: 1px solid var(--shopBorder);
        border-radius: 0.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    }
    .woocommerce nav.woocommerce-pagination ul li a:hover,
    .woocommerce nav.woocommerce-pagination ul li span.current {
        color: #fff;
        background-color: var(--primary);
        border-color: var(--primary);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce nav.woocommerce-pagination ul li a,
    body.dark-mode .woocommerce nav.woocommerce-pagination ul li span {
        color: var(--bodyTextColorWhite);
        background-color: var(--medium);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce nav.woocommerce-pagination ul li a:hover,
    body.dark-mode .woocommerce nav.woocommerce-pagination ul li span.current {
        color: var(--dark);
        background-color: var(--secondaryLight);
        border-color: var(--secondaryLight);
    }
}

/*-- -------------------------- -->
<---      Single Product        -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce div.product {
        display: flex;
        flex-direction: column;
        gap: clamp(2rem, 4vw, 3rem);
    }
    .woocommerce div.product .woocommerce-product-gallery {
        width: 100%;
        float: none;
        margin: 0;
        opacity: 1 !important; /* gallery JS fades this in; avoid a blank frame */
    }
    .woocommerce div.product .woocommerce-product-gallery__wrapper {
        border-radius: var(--shopRadius);
        overflow: hidden;
    }
    .woocommerce div.product .woocommerce-product-gallery img {
        border-radius: var(--shopRadius);
    }
    .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
        margin: 0.75rem 0 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }
    .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li {
        width: 100%;
        float: none;
        margin: 0;
        list-style: none;
    }
    .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img {
        border: 1px solid var(--shopBorder);
        border-radius: 0.375rem;
        opacity: 0.6;
        transition: opacity 0.3s, border-color 0.3s;
    }
    .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
    .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img:hover {
        opacity: 1;
        border-color: var(--primary);
    }
    .woocommerce div.product div.summary {
        width: 100%;
        float: none;
        margin: 0;
    }
    .woocommerce div.product .product_title {
        font-family: 'Playfair Display', serif;
        /* 31px - 49px */
        font-size: clamp(1.9375rem, 3.9vw, 3.0625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 1rem 0;
        padding: 0;
        color: var(--headerColor);
    }
    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: clamp(1.5rem, 3vw, 1.875rem);
        font-weight: 700;
        line-height: 1.2em;
        margin: 0 0 1.5rem 0;
        color: var(--primary);
    }
    .woocommerce div.product p.price del {
        font-size: 0.7em;
        font-weight: 400;
        opacity: 0.6;
        margin-right: 0.5rem;
    }
    .woocommerce div.product p.price ins {
        text-decoration: none;
    }
    .woocommerce div.product .woocommerce-product-details__short-description {
        font-size: clamp(1rem, 1.5vw, 1.125rem);
        line-height: 1.7em;
        margin: 0 0 2rem 0;
        color: var(--bodyTextColor);
    }
    .woocommerce div.product .woocommerce-product-details__short-description p:last-child {
        margin-bottom: 0;
    }
    .woocommerce div.product form.cart {
        margin: 0 0 2rem 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }
    .woocommerce div.product form.cart .quantity {
        display: flex;
    }
    .woocommerce div.product form.cart div.quantity input.qty,
    .woocommerce .quantity input.qty {
        font-family: inherit;
        font-size: 1rem;
        width: 4.5rem;
        height: 3.375rem;
        padding: 0 0.5rem;
        text-align: center;
        color: var(--headerColor);
        background-color: var(--shopSurface);
        border: 1px solid var(--shopBorder);
        border-radius: 0.25rem;
    }
    .woocommerce div.product form.cart .button {
        flex: 1;
        min-width: 12rem;
        padding: 1.125rem 1.75rem;
    }
    /* Reassurance line under add-to-cart for digital goods */
    .woocommerce div.product .cs-purchase-note {
        font-size: 0.875rem;
        line-height: 1.5em;
        width: 100%;
        margin: 0.25rem 0 0 0;
        color: var(--shopMuted);
    }
    .woocommerce div.product .product_meta {
        font-size: 0.9375rem;
        line-height: 1.8em;
        margin: 0;
        padding: 1.5rem 0 0 0;
        border-top: 1px solid var(--shopBorder);
        color: var(--shopMuted);
    }
    .woocommerce div.product .product_meta > span {
        display: block;
    }
    .woocommerce div.product .product_meta a {
        color: var(--primary);
        text-decoration: none;
    }
    .woocommerce div.product .product_meta a:hover {
        text-decoration: underline;
    }
    .woocommerce div.product .stock.in-stock {
        color: var(--primary);
        font-weight: 700;
    }
    .woocommerce div.product .stock.out-of-stock {
        color: #c0392b;
        font-weight: 700;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    .woocommerce div.product {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        column-gap: clamp(2.5rem, 5vw, 4.5rem);
    }
    .woocommerce div.product .woocommerce-product-gallery,
    .woocommerce div.product div.summary {
        grid-column: auto;
    }
    /* Tabs, related and upsells run the full width beneath the two columns. */
    .woocommerce div.product .woocommerce-tabs,
    .woocommerce div.product .related,
    .woocommerce div.product .up-sells,
    .woocommerce div.product .woocommerce-product-gallery + .summary + * {
        grid-column: 1 / -1;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce div.product .product_title {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .woocommerce div.product p.price,
    body.dark-mode .woocommerce div.product span.price,
    body.dark-mode .woocommerce div.product .product_meta a,
    body.dark-mode .woocommerce div.product .stock.in-stock {
        color: var(--secondaryLight);
    }
    body.dark-mode .woocommerce div.product .woocommerce-product-details__short-description {
        color: var(--bodyTextColorWhite);
        opacity: 0.9;
    }
    body.dark-mode .woocommerce div.product .product_meta,
    body.dark-mode .woocommerce div.product .cs-purchase-note {
        color: var(--bodyTextColorWhite);
        opacity: 0.7;
        border-top-color: var(--accent);
    }
    body.dark-mode .woocommerce .quantity input.qty {
        color: var(--bodyTextColorWhite);
        background-color: var(--medium);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce div.product .flex-control-thumbs img {
        border-color: var(--accent);
    }
}

/*-- -------------------------- -->
<---       Product Tabs         -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce div.product .woocommerce-tabs {
        width: 100%;
        margin-top: clamp(1rem, 3vw, 2rem);
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        margin: 0 0 2rem 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        border-bottom: 1px solid var(--shopBorder);
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs::before,
    .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 {
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        list-style: none;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        padding: 0.875rem 1.25rem;
        color: var(--bodyTextColor);
        border-bottom: 3px solid transparent;
        display: block;
        transition: color 0.3s, border-color 0.3s;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
    .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }
    .woocommerce div.product .woocommerce-tabs .panel {
        margin: 0;
        padding: 0;
    }
    .woocommerce div.product .woocommerce-tabs .panel h2 {
        font-family: 'Playfair Display', serif;
        font-size: clamp(1.375rem, 2.6vw, 1.75rem);
        font-weight: 700;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
    }
    .woocommerce div.product .woocommerce-tabs .panel p,
    .woocommerce div.product .woocommerce-tabs .panel li {
        font-size: 1rem;
        line-height: 1.7em;
        color: var(--bodyTextColor);
    }
    .woocommerce table.shop_attributes th,
    .woocommerce table.shop_attributes td {
        padding: 0.75rem;
        border-bottom: 1px solid var(--shopBorder);
        text-align: left;
        font-style: normal;
    }
    .woocommerce table.shop_attributes th {
        font-weight: 700;
        color: var(--headerColor);
        background-color: var(--shopSurfaceAlt);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce div.product .woocommerce-tabs ul.tabs {
        border-bottom-color: var(--accent);
    }
    body.dark-mode .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        color: var(--bodyTextColorWhite);
        opacity: 0.8;
    }
    body.dark-mode .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
    body.dark-mode .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
        color: var(--secondaryLight);
        border-bottom-color: var(--secondaryLight);
        opacity: 1;
    }
    body.dark-mode .woocommerce div.product .woocommerce-tabs .panel h2 {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .woocommerce div.product .woocommerce-tabs .panel p,
    body.dark-mode .woocommerce div.product .woocommerce-tabs .panel li {
        color: var(--bodyTextColorWhite);
        opacity: 0.9;
    }
    body.dark-mode .woocommerce table.shop_attributes th {
        color: var(--bodyTextColorWhite);
        background-color: var(--medium);
    }
    body.dark-mode .woocommerce table.shop_attributes th,
    body.dark-mode .woocommerce table.shop_attributes td {
        border-bottom-color: var(--accent);
        color: var(--bodyTextColorWhite);
    }
}

/*-- -------------------------- -->
<---   Related / Section Head   -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce .related,
    .woocommerce .up-sells,
    .woocommerce .cross-sells {
        width: 100%;
        margin-top: clamp(2.5rem, 5vw, 4rem);
    }
    .woocommerce .related > h2,
    .woocommerce .up-sells > h2,
    .woocommerce .cross-sells > h2,
    .woocommerce .cart_totals > h2,
    .woocommerce-checkout h3 {
        font-family: 'Playfair Display', serif;
        font-size: clamp(1.375rem, 2.8vw, 1.875rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 1.5rem 0;
        color: var(--headerColor);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce .related > h2,
    body.dark-mode .woocommerce .up-sells > h2,
    body.dark-mode .woocommerce .cross-sells > h2,
    body.dark-mode .woocommerce .cart_totals > h2,
    body.dark-mode .woocommerce-checkout h3 {
        color: var(--bodyTextColorWhite);
    }
}

/*-- -------------------------- -->
<---      Forms & Inputs        -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce form .form-row {
        margin: 0 0 1.25rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .woocommerce form .form-row label {
        font-size: 0.9375rem;
        font-weight: 700;
        line-height: 1.4em;
        margin: 0 0 0.375rem 0;
        color: var(--headerColor);
    }
    .woocommerce form .form-row .required {
        color: #c0392b;
        text-decoration: none;
        border: none;
    }
    .woocommerce form .form-row input.input-text,
    .woocommerce form .form-row textarea,
    .woocommerce form .form-row select,
    .woocommerce-page form .form-row input.input-text,
    .woocommerce .select2-container .select2-selection--single {
        font-family: inherit;
        font-size: 1rem;
        line-height: 1.5em;
        width: 100%;
        height: auto;
        min-height: 3.25rem;
        padding: 0.8125rem 1rem;
        box-sizing: border-box;
        color: var(--headerColor);
        background-color: var(--shopSurface);
        border: 1px solid var(--shopBorder);
        border-radius: 0.25rem;
        transition: border-color 0.3s;
    }
    .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(--primary);
    }
    .woocommerce form .form-row textarea {
        min-height: 8rem;
        resize: vertical;
    }
    .woocommerce form .form-row.woocommerce-invalid input.input-text {
        border-color: #c0392b;
    }
    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last {
        width: 100%;
        float: none;
    }
    /* select2 (country/state pickers) */
    .woocommerce .select2-container .select2-selection--single {
        display: flex;
        align-items: center;
    }
    .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
        padding: 0;
        line-height: inherit;
        color: inherit;
    }
    .woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
        top: 50%;
        transform: translateY(-50%);
        right: 0.75rem;
    }
    /* Login / coupon toggles */
    .woocommerce-form-login-toggle .woocommerce-info,
    .woocommerce-form-coupon-toggle .woocommerce-info {
        margin-bottom: 1.5rem;
    }
    .woocommerce form.login,
    .woocommerce form.checkout_coupon,
    .woocommerce form.register {
        margin: 0 0 2rem 0;
        padding: clamp(1.5rem, 3vw, 2rem);
        background-color: var(--shopSurfaceAlt);
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last {
        width: 48%;
        float: left;
    }
    .woocommerce form .form-row-last {
        float: right;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce form .form-row label {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .woocommerce form .form-row input.input-text,
    body.dark-mode .woocommerce form .form-row textarea,
    body.dark-mode .woocommerce form .form-row select,
    body.dark-mode .woocommerce .select2-container .select2-selection--single {
        color: var(--bodyTextColorWhite);
        background-color: rgba(255, 255, 255, 0.08);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce form.login,
    body.dark-mode .woocommerce form.checkout_coupon,
    body.dark-mode .woocommerce form.register {
        background-color: var(--medium);
        border-color: var(--accent);
    }
}

/*-- -------------------------- -->
<---          Cart Page         -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce table.shop_table {
        width: 100%;
        margin: 0 0 2rem 0;
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
        border-collapse: collapse;
        overflow: hidden;
    }
    .woocommerce table.shop_table th {
        font-size: 0.8125rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
        padding: 1rem;
        color: var(--headerColor);
        background-color: var(--shopSurfaceAlt);
        border: none;
    }
    .woocommerce table.shop_table td {
        padding: 1.25rem 1rem;
        border-top: 1px solid var(--shopBorder);
        vertical-align: middle;
        color: var(--bodyTextColor);
    }
    .woocommerce table.shop_table img {
        width: 4.5rem;
        height: 4.5rem;
        object-fit: cover;
        border-radius: 0.375rem;
        display: block;
    }
    .woocommerce table.shop_table .product-name a {
        font-weight: 700;
        color: var(--headerColor);
        text-decoration: none;
    }
    .woocommerce table.shop_table .product-name a:hover {
        color: var(--primary);
    }
    .woocommerce a.remove {
        font-size: 1.25rem;
        line-height: 1.5rem;
        width: 1.5rem;
        height: 1.5rem;
        color: var(--shopMuted) !important;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s, color 0.3s;
    }
    .woocommerce a.remove:hover {
        color: #fff !important;
        background-color: #c0392b;
    }
    .woocommerce .cart .actions {
        padding: 1.25rem 1rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    .woocommerce .cart .actions .coupon {
        display: flex;
        gap: 0.5rem;
        flex: 1;
        min-width: 16rem;
    }
    .woocommerce .cart .actions .coupon .input-text {
        font-family: inherit;
        font-size: 1rem;
        width: auto;
        flex: 1;
        min-width: 8rem;
        padding: 0.8125rem 1rem;
        box-sizing: border-box;
        color: var(--headerColor);
        background-color: var(--shopSurface);
        border: 1px solid var(--shopBorder);
        border-radius: 0.25rem;
    }
    .woocommerce .cart-collaterals {
        width: 100%;
    }
    .woocommerce .cart-collaterals .cart_totals {
        width: 100%;
        float: none;
        padding: clamp(1.5rem, 3vw, 2rem);
        background-color: var(--shopSurfaceAlt);
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
        box-sizing: border-box;
    }
    .woocommerce .cart_totals table.shop_table {
        margin-bottom: 1.5rem;
        border: none;
        background: transparent;
    }
    .woocommerce .cart_totals table.shop_table th,
    .woocommerce .cart_totals table.shop_table td {
        background: transparent;
        padding: 0.875rem 0;
        border-top: 1px solid var(--shopBorder);
        text-transform: none;
        font-size: 1rem;
    }
    .woocommerce .cart_totals .order-total th,
    .woocommerce .cart_totals .order-total td {
        font-size: 1.125rem;
        color: var(--headerColor);
    }
    .woocommerce .cart_totals .order-total .amount {
        color: var(--primary);
    }
    .woocommerce .wc-proceed-to-checkout {
        padding: 0;
    }
    .woocommerce .wc-proceed-to-checkout a.checkout-button {
        width: 100%;
        margin: 0;
        font-size: 1.0625rem;
        padding: 1.125rem 1.5rem;
    }
    /* Empty cart */
    .woocommerce .cart-empty,
    .woocommerce .wc-empty-cart-message .cart-empty {
        font-family: 'Playfair Display', serif;
        font-size: clamp(1.375rem, 3vw, 1.75rem);
        text-align: center;
        margin: 0 0 1.5rem 0;
        color: var(--headerColor);
    }
    .woocommerce .return-to-shop {
        text-align: center;
    }
}
/* Mobile stacked cart table (replaces woocommerce-smallscreen.css) */
@media only screen and (max-width: 47.9375rem) {
    .woocommerce table.shop_table_responsive thead {
        display: none;
    }
    .woocommerce table.shop_table_responsive tr {
        display: block;
        margin-bottom: 1rem;
        padding: 1rem;
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
    }
    .woocommerce table.shop_table_responsive tr td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 0;
        border-top: none;
        text-align: right;
    }
    .woocommerce table.shop_table_responsive tr td::before {
        content: attr(data-title) ": ";
        font-size: 0.8125rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--headerColor);
    }
    .woocommerce table.shop_table_responsive tr td.product-remove::before,
    .woocommerce table.shop_table_responsive tr td.product-thumbnail::before {
        display: none;
    }
    .woocommerce table.shop_table_responsive tr td.product-thumbnail {
        justify-content: center;
    }
    .woocommerce .cart .actions {
        flex-direction: column;
        align-items: stretch;
    }
    .woocommerce .cart .actions .coupon {
        min-width: 0;
    }
    .woocommerce .cart .actions .button {
        width: 100%;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    .woocommerce .cart-collaterals .cart_totals {
        width: 28rem;
        margin-left: auto;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce table.shop_table {
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce table.shop_table th {
        color: var(--bodyTextColorWhite);
        background-color: var(--medium);
    }
    body.dark-mode .woocommerce table.shop_table td {
        border-top-color: var(--accent);
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .woocommerce table.shop_table .product-name a,
    body.dark-mode .woocommerce .cart_totals .order-total th,
    body.dark-mode .woocommerce .cart_totals .order-total td,
    body.dark-mode .woocommerce .cart-empty {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .woocommerce .cart_totals .order-total .amount,
    body.dark-mode .woocommerce table.shop_table .product-name a:hover {
        color: var(--secondaryLight);
    }
    body.dark-mode .woocommerce .cart-collaterals .cart_totals {
        background-color: var(--medium);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce .cart_totals table.shop_table th,
    body.dark-mode .woocommerce .cart_totals table.shop_table td {
        border-top-color: var(--accent);
    }
    body.dark-mode .woocommerce .cart .actions .coupon .input-text {
        color: var(--bodyTextColorWhite);
        background-color: rgba(255, 255, 255, 0.08);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce table.shop_table_responsive tr {
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce table.shop_table_responsive tr td::before {
        color: var(--bodyTextColorWhite);
    }
}

/*-- -------------------------- -->
<---         Checkout           -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce .col2-set,
    .woocommerce-page .col2-set {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .woocommerce .col2-set .col-1,
    .woocommerce .col2-set .col-2 {
        width: 100%;
        float: none;
    }
    .woocommerce-checkout #order_review_heading {
        margin-top: 2.5rem;
    }
    .woocommerce-checkout #order_review {
        padding: clamp(1.5rem, 3vw, 2rem);
        background-color: var(--shopSurfaceAlt);
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
        box-sizing: border-box;
    }
    .woocommerce-checkout #order_review table.shop_table {
        border: none;
        margin-bottom: 0;
    }
    .woocommerce-checkout #order_review table.shop_table th,
    .woocommerce-checkout #order_review table.shop_table td {
        background: transparent;
        padding: 0.875rem 0;
        border-top: 1px solid var(--shopBorder);
    }
    .woocommerce-checkout #order_review .order-total .amount {
        color: var(--primary);
        font-size: 1.125rem;
    }
    /* Payment box */
    .woocommerce-checkout #payment {
        background: transparent;
        border-radius: 0;
        margin-top: 1.5rem;
    }
    .woocommerce-checkout #payment ul.payment_methods {
        margin: 0 0 1.5rem 0;
        padding: 0;
        border-bottom: 1px solid var(--shopBorder);
    }
    .woocommerce-checkout #payment ul.payment_methods li {
        list-style: none;
        margin-bottom: 0.75rem;
    }
    .woocommerce-checkout #payment ul.payment_methods li label {
        font-weight: 700;
        color: var(--headerColor);
        display: inline-block;
    }
    .woocommerce-checkout #payment div.payment_box {
        font-size: 0.9375rem;
        line-height: 1.6em;
        margin: 0.75rem 0 0 0;
        padding: 1rem;
        color: var(--bodyTextColor);
        background-color: var(--shopSurface);
        border-radius: 0.25rem;
    }
    .woocommerce-checkout #payment div.payment_box::before {
        display: none;
    }
    .woocommerce-checkout #payment .form-row.place-order {
        padding: 0;
        margin: 0;
    }
    .woocommerce-checkout #payment #place_order {
        width: 100%;
        font-size: 1.0625rem;
        padding: 1.125rem 1.5rem;
        float: none;
    }
    .woocommerce-privacy-policy-text p,
    .woocommerce-terms-and-conditions-wrapper p {
        font-size: 0.875rem;
        line-height: 1.6em;
        color: var(--shopMuted);
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    .woocommerce .col2-set,
    .woocommerce-page .col2-set {
        flex-direction: row;
        gap: clamp(2rem, 4vw, 3.5rem);
    }
    .woocommerce .col2-set .col-1,
    .woocommerce .col2-set .col-2 {
        width: 50%;
    }
    /* Form column beside the order summary */
    .woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: start;
        column-gap: clamp(2rem, 4vw, 3.5rem);
    }
    .woocommerce-checkout form.checkout #customer_details {
        grid-column: 1;
    }
    .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;
        position: sticky;
        top: 7rem;
    }
    /* Billing/shipping stack inside the left column */
    .woocommerce-checkout #customer_details.col2-set {
        flex-direction: column;
    }
    .woocommerce-checkout #customer_details.col2-set .col-1,
    .woocommerce-checkout #customer_details.col2-set .col-2 {
        width: 100%;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce-checkout #order_review {
        background-color: var(--medium);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce-checkout #order_review table.shop_table th,
    body.dark-mode .woocommerce-checkout #order_review table.shop_table td {
        border-top-color: var(--accent);
    }
    body.dark-mode .woocommerce-checkout #order_review .order-total .amount {
        color: var(--secondaryLight);
    }
    body.dark-mode .woocommerce-checkout #payment ul.payment_methods {
        border-bottom-color: var(--accent);
    }
    body.dark-mode .woocommerce-checkout #payment ul.payment_methods li label {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .woocommerce-checkout #payment div.payment_box {
        color: var(--bodyTextColorWhite);
        background-color: rgba(255, 255, 255, 0.07);
    }
    body.dark-mode .woocommerce-privacy-policy-text p,
    body.dark-mode .woocommerce-terms-and-conditions-wrapper p {
        color: var(--bodyTextColorWhite);
        opacity: 0.7;
    }
}

/*-- -------------------------- -->
<---        My Account          -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce-account .woocommerce {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100%;
        float: none;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        margin: 0;
        padding: 0.5rem;
        background-color: var(--shopSurfaceAlt);
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li {
        list-style: none;
        margin: 0;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li a {
        font-size: 0.9375rem;
        font-weight: 700;
        text-decoration: none;
        padding: 0.75rem 1rem;
        color: var(--bodyTextColor);
        border-radius: 0.25rem;
        display: block;
        transition: background-color 0.3s, color 0.3s;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
    .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
        color: #fff;
        background-color: var(--primary);
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
        float: none;
    }
    .woocommerce-account .woocommerce-MyAccount-content p,
    .woocommerce-account .woocommerce-MyAccount-content li {
        font-size: 1rem;
        line-height: 1.7em;
        color: var(--bodyTextColor);
    }
    .woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
        color: var(--primary);
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    .woocommerce-account .woocommerce {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(2rem, 4vw, 3rem);
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 16rem;
        flex: none;
        position: sticky;
        top: 7rem;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        flex: 1;
        min-width: 0;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce-account .woocommerce-MyAccount-navigation ul {
        background-color: var(--medium);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce-account .woocommerce-MyAccount-navigation li a {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
    body.dark-mode .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
        color: var(--dark);
        background-color: var(--secondaryLight);
    }
    body.dark-mode .woocommerce-account .woocommerce-MyAccount-content p,
    body.dark-mode .woocommerce-account .woocommerce-MyAccount-content li {
        color: var(--bodyTextColorWhite);
        opacity: 0.9;
    }
    body.dark-mode .woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
        color: var(--secondaryLight);
    }
}

/*-- -------------------------- -->
<---   Block Cart / Checkout    -->
<--- -------------------------- -*/

/*
  Modern WooCommerce ships block-based Cart and Checkout by default. They use a
  completely separate .wc-block-* class namespace, so none of the classic
  .woocommerce rules above reach them -- which is why the cart read as black
  text and default-purple links in dark mode. The blocks handle their own
  layout; what follows is type, colour and dark-mode treatment.
*/
@media only screen and (min-width: 0rem) {
    .wp-block-woocommerce-cart,
    .wp-block-woocommerce-checkout {
        width: 100%;
        max-width: 80rem;
        margin: auto;
    }
    /* Headings: "Products in cart", "Cart totals", checkout step titles */
    .wc-block-components-title,
    .wc-block-cart__totals-title,
    .wc-block-components-checkout-step__title,
    .wc-block-components-order-summary__title,
    .wp-block-woocommerce-cart h1,
    .wp-block-woocommerce-cart h2,
    .wp-block-woocommerce-checkout h1,
    .wp-block-woocommerce-checkout h2 {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        color: var(--headerColor);
    }
    /* Column headers on the cart table */
    .wc-block-cart-items__header,
    .wc-block-cart-items__header th,
    .wc-block-cart-items__header-product,
    .wc-block-cart-items__header-total {
        font-size: 0.8125rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 700;
        color: var(--headerColor);
        border-bottom: 1px solid var(--shopBorder);
    }
    .wc-block-cart-items__row,
    .wc-block-cart-item__wrap {
        border-color: var(--shopBorder);
    }
    /* Product title link -- has its own class, so the theme's untyped-link
       rule never reached it and it fell back to browser blue/purple. */
    .wc-block-components-product-name {
        font-weight: 700;
        color: var(--headerColor);
        text-decoration: none;
    }
    a.wc-block-components-product-name:hover {
        color: var(--primary);
        text-decoration: underline;
    }
    .wc-block-components-product-metadata,
    .wc-block-components-product-metadata__description {
        font-size: 0.9375rem;
        line-height: 1.6em;
        color: var(--bodyTextColor);
    }
    /* Prices */
    .wc-block-components-product-price,
    .wc-block-components-product-price__value,
    .wc-block-formatted-money-amount {
        color: var(--headerColor);
    }
    .wc-block-components-product-price__regular-price,
    .wc-block-components-product-price del {
        opacity: 0.6;
    }
    .wc-block-components-sale-badge {
        font-size: 0.75rem;
        font-weight: 700;
        color: #fff;
        background-color: var(--secondary);
        border: none;
        border-radius: 2rem;
        padding: 0.25rem 0.625rem;
    }
    /* Quantity stepper */
    .wc-block-components-quantity-selector {
        border-color: var(--shopBorder);
        border-radius: 0.25rem;
    }
    .wc-block-components-quantity-selector__input,
    .wc-block-components-quantity-selector__button {
        color: var(--headerColor);
        background-color: transparent;
    }
    .wc-block-cart-item__remove-link,
    .wc-block-components-product-metadata + .wc-block-cart-item__remove-link {
        color: var(--shopMuted);
    }
    .wc-block-cart-item__remove-link:hover {
        color: #c0392b;
    }
    /*
      Totals panel. The block ships this with uneven internal padding, so once
      a background is applied the card reads as clipped down the right edge.
      Setting padding explicitly on all four sides (with border-box so it can't
      overflow) gives it an even, card-like gutter.
    */
    .wc-block-cart__sidebar .wc-block-components-sidebar,
    .wp-block-woocommerce-cart .wc-block-components-sidebar,
    .wc-block-components-sidebar {
        padding: clamp(1.25rem, 3vw, 1.75rem);
        box-sizing: border-box;
        background-color: var(--shopSurfaceAlt);
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
    }
    /* Nothing inside the panel should push past that gutter. */
    .wc-block-components-sidebar > *,
    .wc-block-components-sidebar .wc-block-components-totals-wrapper,
    .wc-block-components-sidebar .wc-block-cart__totals-title,
    .wc-block-components-sidebar .wc-block-cart__submit-container {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .wc-block-components-sidebar .wc-block-cart__submit-button {
        width: 100%;
    }

    /* "View Cart" beside Add to Cart on the product page */
    .woocommerce div.product form.cart + .cs-view-cart,
    .woocommerce a.button.cs-view-cart {
        color: var(--primary);
        background-color: transparent;
        border: 2px solid var(--primary);
        padding: 0.875rem 1.5rem;
    }
    .woocommerce a.button.cs-view-cart:hover {
        color: #fff;
        background-color: var(--primary);
    }
    .wc-block-components-totals-item,
    .wc-block-components-totals-item__label,
    .wc-block-components-totals-item__value {
        color: var(--headerColor);
    }
    .wc-block-components-totals-item__description {
        color: var(--shopMuted);
    }
    .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
    .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
        color: var(--primary);
    }
    .wc-block-components-totals-wrapper {
        border-color: var(--shopBorder);
    }
    /* "Add coupons" disclosure */
    .wc-block-components-panel__button,
    .wc-block-components-totals-coupon__button {
        font-weight: 700;
        color: var(--primary);
    }
    .wc-block-components-panel__button:hover {
        color: #1a1a1a;
    }
    /* Buttons */
    .wc-block-components-button:not(.is-link) {
        font-family: inherit;
        font-weight: 700;
        color: #fff;
        background-color: var(--primary);
        border-radius: 0.25rem;
    }
    .wc-block-components-button:not(.is-link):hover {
        background-color: #1a1a1a;
        color: #fff;
    }
    /* Checkout form fields */
    .wc-block-components-text-input input[type="text"],
    .wc-block-components-text-input input[type="email"],
    .wc-block-components-text-input input[type="tel"],
    .wc-block-components-text-input input[type="number"],
    .wc-block-components-textarea,
    .wc-block-components-select__container,
    .wc-block-components-combobox-control input {
        font-family: inherit;
        color: var(--headerColor);
        background-color: var(--shopSurface);
        border-color: var(--shopBorder);
        border-radius: 0.25rem;
    }
    .wc-block-components-text-input label,
    .wc-block-components-checkbox__label,
    .wc-block-components-radio-control__label,
    .wc-block-components-select__label {
        color: var(--bodyTextColor);
    }
    .wc-block-components-checkout-step__description,
    .wc-block-checkout__terms,
    .wc-block-checkout__terms p,
    .wc-block-components-checkout-step__heading-content {
        font-size: 0.9375rem;
        line-height: 1.6em;
        color: var(--bodyTextColor);
    }
    .wc-block-checkout__terms a,
    .wc-block-components-checkout-step__description a {
        color: var(--primary);
    }
    /* Order summary rows on checkout */
    .wc-block-components-order-summary-item__description,
    .wc-block-components-order-summary-item__individual-prices,
    .wc-block-components-order-summary-item__total-price,
    .wc-block-components-order-summary__button-text {
        color: var(--headerColor);
    }
    .wc-block-components-order-summary-item__quantity {
        color: var(--bodyTextColor);
        background-color: var(--shopSurfaceAlt);
        border-color: var(--shopBorder);
    }
    .wc-block-components-notice-banner {
        border-radius: var(--shopRadius);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .wc-block-components-title,
    body.dark-mode .wc-block-cart__totals-title,
    body.dark-mode .wc-block-components-checkout-step__title,
    body.dark-mode .wc-block-components-order-summary__title,
    body.dark-mode .wp-block-woocommerce-cart h1,
    body.dark-mode .wp-block-woocommerce-cart h2,
    body.dark-mode .wp-block-woocommerce-checkout h1,
    body.dark-mode .wp-block-woocommerce-checkout h2,
    body.dark-mode .wc-block-cart-items__header,
    body.dark-mode .wc-block-cart-items__header th,
    body.dark-mode .wc-block-cart-items__header-product,
    body.dark-mode .wc-block-cart-items__header-total,
    body.dark-mode .wc-block-components-product-name,
    body.dark-mode .wc-block-components-product-price,
    body.dark-mode .wc-block-components-product-price__value,
    body.dark-mode .wc-block-formatted-money-amount,
    body.dark-mode .wc-block-components-totals-item,
    body.dark-mode .wc-block-components-totals-item__label,
    body.dark-mode .wc-block-components-totals-item__value,
    body.dark-mode .wc-block-components-order-summary-item__description,
    body.dark-mode .wc-block-components-order-summary-item__individual-prices,
    body.dark-mode .wc-block-components-order-summary-item__total-price,
    body.dark-mode .wc-block-components-order-summary__button-text,
    body.dark-mode .wc-block-components-quantity-selector__input,
    body.dark-mode .wc-block-components-quantity-selector__button {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode a.wc-block-components-product-name:hover {
        color: var(--secondaryLight);
    }
    body.dark-mode .wc-block-components-product-metadata,
    body.dark-mode .wc-block-components-product-metadata__description,
    body.dark-mode .wc-block-components-text-input label,
    body.dark-mode .wc-block-components-checkbox__label,
    body.dark-mode .wc-block-components-radio-control__label,
    body.dark-mode .wc-block-components-select__label,
    body.dark-mode .wc-block-components-checkout-step__description,
    body.dark-mode .wc-block-checkout__terms,
    body.dark-mode .wc-block-checkout__terms p,
    body.dark-mode .wc-block-components-checkout-step__heading-content,
    body.dark-mode .wc-block-components-totals-item__description {
        color: var(--bodyTextColorWhite);
        opacity: 0.85;
    }
    body.dark-mode .wc-block-checkout__terms a,
    body.dark-mode .wc-block-components-checkout-step__description a,
    body.dark-mode .wc-block-components-panel__button,
    body.dark-mode .wc-block-components-totals-coupon__button,
    body.dark-mode .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
    body.dark-mode .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
        color: var(--secondaryLight);
        opacity: 1;
    }
    body.dark-mode .wc-block-components-panel__button:hover {
        color: #fff;
    }
    /* Borders and separators */
    body.dark-mode .wc-block-cart-items__header,
    body.dark-mode .wc-block-cart-items__row,
    body.dark-mode .wc-block-cart-item__wrap,
    body.dark-mode .wc-block-components-totals-wrapper,
    body.dark-mode .wc-block-components-quantity-selector,
    body.dark-mode .wc-block-components-sidebar,
    body.dark-mode .wc-block-cart__totals-title {
        border-color: var(--accent);
    }
    body.dark-mode .wc-block-cart__sidebar .wc-block-components-sidebar,
    body.dark-mode .wp-block-woocommerce-cart .wc-block-components-sidebar,
    body.dark-mode .wc-block-components-sidebar {
        background-color: var(--medium);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce a.button.cs-view-cart {
        color: var(--secondaryLight);
        background-color: transparent;
        border-color: var(--secondaryLight);
    }
    body.dark-mode .woocommerce a.button.cs-view-cart:hover {
        color: var(--dark);
        background-color: var(--secondaryLight);
    }
    /* Buttons */
    body.dark-mode .wc-block-components-button:not(.is-link) {
        color: var(--dark);
        background-color: var(--secondaryLight);
    }
    body.dark-mode .wc-block-components-button:not(.is-link):hover {
        color: var(--dark);
        background-color: #fff;
    }
    /* Inputs */
    body.dark-mode .wc-block-components-text-input input[type="text"],
    body.dark-mode .wc-block-components-text-input input[type="email"],
    body.dark-mode .wc-block-components-text-input input[type="tel"],
    body.dark-mode .wc-block-components-text-input input[type="number"],
    body.dark-mode .wc-block-components-textarea,
    body.dark-mode .wc-block-components-select__container,
    body.dark-mode .wc-block-components-combobox-control input {
        color: var(--bodyTextColorWhite);
        background-color: rgba(255, 255, 255, 0.08);
        border-color: var(--accent);
    }
    body.dark-mode .wc-block-components-order-summary-item__quantity {
        color: var(--bodyTextColorWhite);
        background-color: var(--medium);
        border-color: var(--accent);
    }
    body.dark-mode .wc-block-components-notice-banner {
        background-color: var(--medium);
        color: var(--bodyTextColorWhite);
    }
    /* Remove-link and misc muted text */
    body.dark-mode .wc-block-cart-item__remove-link {
        color: var(--bodyTextColorWhite);
        opacity: 0.65;
    }
    body.dark-mode .wc-block-cart-item__remove-link:hover {
        color: #ff8a80;
        opacity: 1;
    }
}

/*-- -------------------------- -->
<---    Page Content Wrapper    -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .cs-page-content {
        width: 100%;
    }
    .cs-page-links {
        margin-top: 2rem;
        font-weight: 700;
    }
}

/*-- -------------------------- -->
<---         Breadcrumb         -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce .woocommerce-breadcrumb {
        font-size: 0.875rem;
        line-height: 1.5em;
        margin: 0 0 1.5rem 0;
        padding: 0;
        color: var(--shopMuted);
    }
    .woocommerce .woocommerce-breadcrumb a {
        color: var(--primary);
        text-decoration: none;
    }
    .woocommerce .woocommerce-breadcrumb a:hover {
        text-decoration: underline;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce .woocommerce-breadcrumb {
        color: var(--bodyTextColorWhite);
        opacity: 0.7;
    }
    body.dark-mode .woocommerce .woocommerce-breadcrumb a {
        color: var(--secondaryLight);
    }
}

/*-- -------------------------- -->
<---   Product Category Tiles   -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce ul.products li.product-category > a {
        text-decoration: none;
        display: block;
    }
    .woocommerce ul.products li.product-category .woocommerce-loop-category__title {
        font-family: 'Playfair Display', serif;
        font-size: 1.25rem;
        line-height: 1.3em;
        font-weight: 700;
        margin: 0;
        padding: clamp(1.25rem, 3vw, 1.75rem);
        color: var(--headerColor);
        transition: color 0.3s;
    }
    .woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title {
        color: var(--primary);
    }
    .woocommerce ul.products li.product-category .count {
        font-size: 0.8125rem;
        font-weight: 700;
        margin-left: 0.5rem;
        padding: 0.1875rem 0.5rem;
        color: var(--bodyTextColor);
        background-color: rgba(0, 0, 0, 0.07);
        border-radius: 1rem;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce ul.products li.product-category .woocommerce-loop-category__title {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title {
        color: var(--secondaryLight);
    }
    body.dark-mode .woocommerce ul.products li.product-category .count {
        color: var(--bodyTextColorWhite);
        background-color: rgba(255, 255, 255, 0.12);
    }
}

/*-- -------------------------- -->
<---  Order Received / Details  -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce .woocommerce-order p,
    .woocommerce .woocommerce-order-details p,
    .woocommerce .woocommerce-customer-details p,
    .woocommerce .woocommerce-thankyou-order-received {
        font-size: 1rem;
        line-height: 1.7em;
        color: var(--bodyTextColor);
    }
    .woocommerce .woocommerce-thankyou-order-received {
        font-size: clamp(1.25rem, 2.6vw, 1.5rem);
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: var(--headerColor);
    }
    .woocommerce ul.order_details {
        margin: 0 0 2rem 0;
        padding: clamp(1.25rem, 3vw, 1.75rem);
        background-color: var(--shopSurfaceAlt);
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem 2.5rem;
    }
    .woocommerce ul.order_details li {
        font-size: 0.8125rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 700;
        list-style: none;
        margin: 0;
        padding: 0;
        border: none;
        color: var(--shopMuted);
    }
    .woocommerce ul.order_details li strong {
        font-size: 1.0625rem;
        text-transform: none;
        letter-spacing: 0;
        display: block;
        margin-top: 0.375rem;
        color: var(--headerColor);
    }
    .woocommerce .woocommerce-customer-details address {
        font-style: normal;
        font-size: 1rem;
        line-height: 1.7em;
        padding: 1.25rem;
        color: var(--bodyTextColor);
        background-color: var(--shopSurfaceAlt);
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
    }
    .woocommerce table.woocommerce-table--order-details,
    .woocommerce table.woocommerce-table--order-downloads {
        margin-bottom: 2rem;
    }
    /* My Account -> Addresses */
    .woocommerce .woocommerce-Addresses {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .woocommerce .woocommerce-Address {
        width: 100%;
        float: none;
        padding: clamp(1.25rem, 3vw, 1.75rem);
        background-color: var(--shopSurfaceAlt);
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
        box-sizing: border-box;
    }
    .woocommerce .woocommerce-Address-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .woocommerce .woocommerce-Address-title h2,
    .woocommerce .woocommerce-Address-title h3 {
        font-family: 'Playfair Display', serif;
        font-size: 1.125rem;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
    }
    .woocommerce .woocommerce-Address-title .edit {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--primary);
        text-decoration: none;
    }
    .woocommerce .woocommerce-Address address {
        font-style: normal;
        font-size: 1rem;
        line-height: 1.7em;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--bodyTextColor);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    .woocommerce .woocommerce-Addresses {
        grid-template-columns: 1fr 1fr;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce .woocommerce-order p,
    body.dark-mode .woocommerce .woocommerce-order-details p,
    body.dark-mode .woocommerce .woocommerce-customer-details p,
    body.dark-mode .woocommerce .woocommerce-thankyou-order-received,
    body.dark-mode .woocommerce ul.order_details li strong {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .woocommerce ul.order_details {
        background-color: var(--medium);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce ul.order_details li {
        color: var(--bodyTextColorWhite);
        opacity: 0.7;
    }
    body.dark-mode .woocommerce ul.order_details li strong {
        opacity: 1;
    }
    body.dark-mode .woocommerce .woocommerce-customer-details address {
        color: var(--bodyTextColorWhite);
        background-color: var(--medium);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce .woocommerce-Address {
        background-color: var(--medium);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce .woocommerce-Address-title h2,
    body.dark-mode .woocommerce .woocommerce-Address-title h3 {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .woocommerce .woocommerce-Address-title .edit {
        color: var(--secondaryLight);
    }
    body.dark-mode .woocommerce .woocommerce-Address address {
        color: var(--bodyTextColorWhite);
        opacity: 0.9;
    }
}

/*-- -------------------------- -->
<---   Checkboxes / Password    -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    .woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
    .woocommerce-form__label-for-checkbox,
    .woocommerce-terms-and-conditions-checkbox-text {
        font-size: 0.9375rem;
        font-weight: 400;
        line-height: 1.5em;
        color: var(--bodyTextColor);
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        cursor: pointer;
    }
    .woocommerce-form__input-checkbox,
    .woocommerce input[type="checkbox"],
    .woocommerce input[type="radio"] {
        width: 1.0625rem;
        height: 1.0625rem;
        margin: 0.1875rem 0 0 0;
        accent-color: var(--primary);
        flex: none;
    }
    .woocommerce .woocommerce-password-strength {
        font-size: 0.875rem;
        font-weight: 700;
        text-align: left;
        padding: 0.625rem 0.875rem;
        margin-top: 0.5rem;
        border-radius: 0.25rem;
    }
    .woocommerce .woocommerce-password-strength.strong {
        color: #12633f;
        background-color: #d8f3e5;
    }
    .woocommerce .woocommerce-password-strength.good {
        color: #7a5c00;
        background-color: #fdf3d4;
    }
    .woocommerce .woocommerce-password-strength.short,
    .woocommerce .woocommerce-password-strength.bad {
        color: #8a2620;
        background-color: #fbe3e1;
    }
    .woocommerce .woocommerce-password-hint {
        font-size: 0.8125rem;
        line-height: 1.5em;
        margin-top: 0.5rem;
        color: var(--shopMuted);
        display: block;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
    body.dark-mode .woocommerce-form__label-for-checkbox,
    body.dark-mode .woocommerce-terms-and-conditions-checkbox-text {
        color: var(--bodyTextColorWhite);
        opacity: 0.9;
    }
    body.dark-mode .woocommerce input[type="checkbox"],
    body.dark-mode .woocommerce input[type="radio"] {
        accent-color: var(--secondaryLight);
    }
    body.dark-mode .woocommerce .woocommerce-password-strength.strong {
        color: #a9efcd;
        background-color: rgba(18, 99, 63, 0.35);
    }
    body.dark-mode .woocommerce .woocommerce-password-strength.good {
        color: #f5dd9a;
        background-color: rgba(122, 92, 0, 0.35);
    }
    body.dark-mode .woocommerce .woocommerce-password-strength.short,
    body.dark-mode .woocommerce .woocommerce-password-strength.bad {
        color: #f6b7b2;
        background-color: rgba(138, 38, 32, 0.35);
    }
    body.dark-mode .woocommerce .woocommerce-password-hint {
        color: var(--bodyTextColorWhite);
        opacity: 0.7;
    }
}

/*-- -------------------------- -->
<---     Product Reviews        -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    #reviews .woocommerce-Reviews-title {
        font-family: 'Playfair Display', serif;
        font-size: clamp(1.375rem, 2.6vw, 1.75rem);
        font-weight: 700;
        margin: 0 0 1.5rem 0;
        color: var(--headerColor);
    }
    #reviews ol.commentlist {
        margin: 0 0 2.5rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
    #reviews ol.commentlist li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #reviews ol.commentlist li .comment_container {
        padding: clamp(1.25rem, 3vw, 1.75rem);
        background-color: var(--shopSurfaceAlt);
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }
    #reviews ol.commentlist li img.avatar {
        width: 3rem;
        height: 3rem;
        position: static;
        float: none;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        flex: none;
    }
    #reviews ol.commentlist li .comment-text {
        width: auto;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        flex: 1;
    }
    #reviews .comment-text .meta {
        font-size: 0.9375rem;
        margin-bottom: 0.75rem;
        color: var(--headerColor);
    }
    #reviews .comment-text .woocommerce-review__author {
        font-weight: 700;
    }
    #reviews .comment-text .woocommerce-review__published-date {
        color: var(--shopMuted);
        font-weight: 400;
    }
    #reviews .comment-text p {
        font-size: 1rem;
        line-height: 1.7em;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #reviews .star-rating,
    .woocommerce .star-rating {
        color: var(--primary);
    }
    /* Review form */
    #review_form_wrapper {
        padding: clamp(1.5rem, 3vw, 2rem);
        background-color: var(--shopSurfaceAlt);
        border: 1px solid var(--shopBorder);
        border-radius: var(--shopRadius);
    }
    #reviews #reply-title {
        font-family: 'Playfair Display', serif;
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0 0 1.25rem 0;
        color: var(--headerColor);
        display: block;
    }
    #reviews .comment-form label {
        font-size: 0.9375rem;
        font-weight: 700;
        margin-bottom: 0.375rem;
        color: var(--headerColor);
        display: block;
    }
    #reviews .comment-form input[type="text"],
    #reviews .comment-form input[type="email"],
    #reviews .comment-form textarea {
        font-family: inherit;
        font-size: 1rem;
        width: 100%;
        padding: 0.8125rem 1rem;
        margin-bottom: 1rem;
        box-sizing: border-box;
        color: var(--headerColor);
        background-color: var(--shopSurface);
        border: 1px solid var(--shopBorder);
        border-radius: 0.25rem;
    }
    #reviews .comment-form textarea {
        min-height: 8rem;
        resize: vertical;
    }
    #reviews p.stars a {
        color: var(--primary);
    }
    #reviews .comment-form-rating label {
        margin-bottom: 0.5rem;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #reviews .woocommerce-Reviews-title,
    body.dark-mode #reviews #reply-title,
    body.dark-mode #reviews .comment-form label,
    body.dark-mode #reviews .comment-text .meta {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #reviews ol.commentlist li .comment_container,
    body.dark-mode #review_form_wrapper {
        background-color: var(--medium);
        border-color: var(--accent);
    }
    body.dark-mode #reviews .comment-text p {
        color: var(--bodyTextColorWhite);
        opacity: 0.9;
    }
    body.dark-mode #reviews .comment-text .woocommerce-review__published-date {
        color: var(--bodyTextColorWhite);
        opacity: 0.65;
    }
    body.dark-mode #reviews .star-rating,
    body.dark-mode .woocommerce .star-rating,
    body.dark-mode #reviews p.stars a {
        color: var(--secondaryLight);
    }
    body.dark-mode #reviews .comment-form input[type="text"],
    body.dark-mode #reviews .comment-form input[type="email"],
    body.dark-mode #reviews .comment-form textarea {
        color: var(--bodyTextColorWhite);
        background-color: rgba(255, 255, 255, 0.08);
        border-color: var(--accent);
    }
}

/*-- -------------------------- -->
<---   select2 & Gallery Zoom   -->
<--- -------------------------- -*/

/* select2 renders its dropdown at the end of <body>, outside any .woocommerce
   wrapper, so it needs body-level dark rules of its own. */
@media only screen and (min-width: 0rem) {
    .select2-dropdown {
        background-color: #fff;
        border-color: var(--shopBorder);
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected],
    .select2-container--default .select2-results__option--highlighted[data-selected] {
        background-color: var(--primary);
        color: #fff;
    }
    .select2-container--default .select2-search--dropdown .select2-search__field {
        font-family: inherit;
        padding: 0.5rem 0.625rem;
        border: 1px solid var(--shopBorder);
        border-radius: 0.25rem;
    }
    /*
      WooCommerce renders the zoom trigger as a literal magnifying-glass emoji.
      Emoji glyphs carry their own colour and ignore `color`, which is why it
      stayed dark on a dark chip. The glyph is hidden with font-size: 0 and
      replaced by an inline SVG so the icon colour is actually controllable.
    */
    .woocommerce div.product .woocommerce-product-gallery__trigger {
        font-size: 0;
        text-indent: 0;
        text-decoration: none;
        width: 2.5rem;
        height: 2.5rem;
        top: 1rem;
        right: 1rem;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1.125rem 1.125rem;
        border-radius: 50%;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
        display: block;
        z-index: 10;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .select2-dropdown {
        background-color: var(--medium);
        border-color: var(--accent);
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .select2-container--default .select2-results__option {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected],
    body.dark-mode .select2-container--default .select2-results__option--highlighted[data-selected] {
        background-color: var(--secondaryLight);
        color: var(--dark);
    }
    body.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field {
        color: var(--bodyTextColorWhite);
        background-color: rgba(255, 255, 255, 0.08);
        border-color: var(--accent);
    }
    body.dark-mode .woocommerce div.product .woocommerce-product-gallery__trigger {
        /* White magnifier on a dark chip. */
        background-color: rgba(0, 0, 0, 0.65);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
    }
}

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

/*-- -------------------------- -->
<---   Crooz: Product Tiers     -->
<--- -------------------------- -*/
/*
  The catalogue spans $13.95 workbooks and ~$5,000 engagements. These rules are
  what stop those reading as the same kind of object in one grid.
  See inc/woocommerce.php -- crooz_product_tier() is where the band is decided.
*/

.woocommerce ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
}

.cs-tier {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 1rem;
  background-color: #fff;
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(26, 26, 26, 0.14);
}

.cs-tier-flagship {
  background-color: var(--primary);
  color: #fff;
}

.cs-tier-workbook {
  background-color: var(--secondary);
  color: #1a1a1a;
}

.cs-loop-excerpt {
  font-size: 0.875rem;
  line-height: 1.55em;
  color: var(--bodyTextColor);
  margin: 0 0 0.75rem 0;
  /* Same inset as the title above it and the price below it. */
  padding: 0 clamp(1.25rem, 3vw, 1.75rem);
}

/*
  Flagship products link to the page instead of adding to the cart. Styled as a
  secondary action so it reads as "read more" rather than "buy now".
*/
.woocommerce a.button.cs-loop-considered {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.woocommerce a.button.cs-loop-considered:hover {
  background-color: var(--primary);
  color: #fff;
}

/*
  Long marketing titles are the norm in this catalogue; keep cards even.

  The clamp clips at the third line, but the title's bottom padding sits inside
  the clipped box, so the top of the fourth line painted into it as a sliver of
  stray text under the ellipsis. The space below a clamped title has to be
  margin, which is never painted, not padding.
*/
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}

/* Push the button to the bottom so a 1-line and a 3-line card still align. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.cs-loop-considered {
  margin-top: auto;
}

/*-- -------------------------- -->
<---   Crooz: Reassurance       -->
<--- -------------------------- -*/

.cs-reassure {
  margin-top: 1.25rem;
  /* form.cart is display:flex, so this is a flex item sitting beside the
     quantity and the buy button unless it is forced onto its own line.
     `clear` does nothing in a flex container. */
  flex-basis: 100%;
  width: 100%;
}

.cs-reassure-line {
  font-size: 0.9375rem;
  line-height: 1.6em;
  color: var(--bodyTextColor);
  margin: 0;
  padding: 0.875rem 1rem;
  background-color: #f7f8fa;
  border-left: 3px solid var(--primary);
  border-radius: 0 0.375rem 0.375rem 0;
}

.cs-reassure-line strong {
  color: var(--headerColor);
}

.cs-view-cart {
  display: inline-block;
  margin-left: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
}

/*-- -------------------------- -->
<---   Crooz: Tiers Dark Mode   -->
<--- -------------------------- -*/

body.dark-mode .cs-tier {
  background-color: #2b2f37;
  color: var(--primaryLight);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

body.dark-mode .cs-tier-flagship {
  background-color: var(--primaryLight);
  color: #14181f;
}

body.dark-mode .cs-tier-workbook {
  background-color: var(--secondary);
  color: #1a1a1a;
}

body.dark-mode .cs-loop-excerpt {
  color: #b8bcc6;
}

body.dark-mode .woocommerce a.button.cs-loop-considered {
  color: var(--primaryLight);
  border-color: var(--primaryLight);
}

body.dark-mode .woocommerce a.button.cs-loop-considered:hover {
  background-color: var(--primaryLight);
  color: #14181f;
}

body.dark-mode .cs-reassure-line {
  background-color: #23262d;
  border-left-color: var(--primaryLight);
  color: #b8bcc6;
}

body.dark-mode .cs-reassure-line strong {
  color: var(--bodyTextColorWhite);
}

body.dark-mode .cs-view-cart {
  color: var(--primaryLight);
}
/*-- -------------------------- -->
<---   Woo component mechanics  -->
<--- -------------------------- -*/

/*
  crooz_dequeue_woocommerce_layout() removes woocommerce-general along with the
  two layout sheets. That sheet carried more than skinning: it held the
  @font-face for the 'WooCommerce' star glyph font and the machinery that turns
  .star-rating into stars. Without it, ratings printed as the literal text
  "Rated 5.00 out of 5" and the review form's rating selector rendered as five
  bare numbered links reading "12345".

  Re-enqueuing the whole 87 KB sheet to get five glyphs is the wrong trade, so
  the stars are rebuilt here from ordinary characters. No font file, no request,
  no coupling to the plugin's asset paths.
*/
.woocommerce .star-rating {
  font-size: 0.9375rem;
  line-height: 1;
  height: 1em;
  width: 5.4em;
  overflow: hidden;
  position: relative;
  display: inline-block;
  font-family: inherit;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--secondary);
}
.woocommerce .star-rating::before {
  content: "\2606\2606\2606\2606\2606";
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.45;
}
/* Woo emits the accessible text inside a nested <span>, sized by percentage. */
.woocommerce .star-rating span {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 1.5em;
  height: 0;
}
.woocommerce .star-rating span::before {
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--secondary);
}

/* The review form's rating picker: five links that must read as stars. */
.woocommerce #review_form #respond p.stars {
  margin: 0 0 1rem;
  line-height: 1;
}
.woocommerce #review_form #respond p.stars a {
  position: relative;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  margin-right: 0.125rem;
  text-indent: -999em;
  text-decoration: none;
  color: var(--secondary);
}
.woocommerce #review_form #respond p.stars a::before {
  content: "\2606";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.4em;
  font-size: 1.25rem;
  line-height: 1;
  text-indent: 0;
  opacity: 0.55;
}
.woocommerce #review_form #respond p.stars a:hover::before,
.woocommerce #review_form #respond p.stars a:focus-visible::before,
.woocommerce #review_form #respond p.stars.selected a.active::before,
.woocommerce #review_form #respond p.stars.selected a:not(.active)::before {
  content: "\2605";
  opacity: 1;
}
.woocommerce #review_form #respond p.stars.selected a.active ~ a::before {
  content: "\2606";
  opacity: 0.55;
}
.woocommerce #review_form #respond p.stars a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/*
  Float clearing on checkout and address forms. woocommerce.css floats
  .form-row-first and .form-row-last at 48% each from 48rem up, and Woo's
  general sheet used to supply the `clear: both` for the wide rows between
  them. Without it a wide row is a flex BFC squeezed into the ~4% gutter, so
  billing company and country rendered as a sliver column.
*/
@media only screen and (min-width: 48rem) {
  .woocommerce form .form-row-wide,
  .woocommerce form .form-row.notes,
  .woocommerce form p.form-row:not(.form-row-first):not(.form-row-last) {
    clear: both;
  }
}

/* Payment gateway marks were uncapped and rendered at native size. */
.woocommerce-checkout #payment ul.payment_methods li img {
  max-height: 1.5rem;
  width: auto;
  margin-left: 0.5rem;
  vertical-align: middle;
  box-shadow: none;
  display: inline-block;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Shipping options inherited default list bullets inside the totals table. */
.woocommerce ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce ul#shipping_method li {
  margin: 0 0 0.375rem;
  padding: 0;
}

/* Inline terms dumped the entire policy into the checkout column. */
.woocommerce-terms-and-conditions {
  max-height: 12.5rem;
  overflow: auto;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--shopBorder);
  border-radius: 0.375rem;
}

/*
  Variable and grouped products. form.cart is display:flex, which turns
  table.variations and .single_variation_wrap into side-by-side columns. None
  of these selectors had a rule anywhere in the theme.
*/
.woocommerce div.product form.cart.variations_form,
.woocommerce div.product form.cart.grouped_form {
  display: block;
}
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.woocommerce-grouped-product-list {
  width: 100%;
  margin: 0 0 1rem;
  border-collapse: collapse;
}
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
  padding: 0 0 0.75rem;
  text-align: left;
  vertical-align: middle;
}
.woocommerce div.product form.cart table.variations select {
  width: 100%;
  max-width: 22rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--shopBorder);
  border-radius: 0.375rem;
  background-color: #fff;
  color: var(--bodyTextColor);
  font: inherit;
}
.woocommerce div.product form.cart .reset_variations {
  font-size: 0.875rem;
  color: var(--primary);
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.woocommerce div.product .woocommerce-variation-price {
  margin-bottom: 0.75rem;
}

/* No blockUI spinner without Woo's sheet -- the panel just greyed out. */
.woocommerce .blockUI.blockOverlay::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.875rem 0 0 -0.875rem;
  border: 2px solid rgba(56, 82, 122, 0.25);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: crooz-wc-spin 0.7s linear infinite;
}
@keyframes crooz-wc-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce .blockUI.blockOverlay::before {
    animation: none;
  }
}

/* Dark Mode */
body.dark-mode .woocommerce div.product form.cart table.variations select {
  background-color: var(--dark);
  color: var(--bodyTextColorWhite);
  border-color: var(--accent);
}
body.dark-mode .woocommerce-terms-and-conditions {
  border-color: var(--accent);
}