/* ==========================================================================
   woocommerce.css — Product Grid, Single Product, Cart, Checkout & My Account
   Herba Sparsh Child Theme
   Author: Pratik Patil
   ========================================================================== */

/* ==========================================================================
   1. PRODUCT GRID (SHOP / ARCHIVE PAGES)
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    width: 100% !important;
    gap: var(--space-lg) !important;
    padding: var(--space-xl) 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: box-shadow 250ms ease, transform 250ms ease;
    position: relative;
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

/* ---- Product Image ---- */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin: 0 !important;
    border-radius: 0;
    transition: transform 400ms ease;
}

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

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    overflow: hidden;
    text-decoration: none;
}

/* ---- Product Title ---- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-family: var(--font-heading) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--color-foreground) !important;
    padding: var(--space-md) var(--space-md) var(--space-xs) var(--space-md) !important;
    margin: 0 !important;
    line-height: 1.4;
}

/* ---- Product Price ---- */
.woocommerce ul.products li.product .price {
    font-family: var(--font-body) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    padding: 0 var(--space-md) var(--space-md) var(--space-md) !important;
    margin: 0 !important;
    display: block;
}

.woocommerce ul.products li.product .price del {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-foreground-muted) !important;
    opacity: 1;
}

.woocommerce ul.products li.product .price ins {
    font-weight: 700;
    text-decoration: none;
    color: var(--color-primary) !important;
}

/* ---- Add to Cart (Grid) ---- */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.product_type_simple {
    display: block !important;
    margin: 0 var(--space-md) var(--space-md) var(--space-md) !important;
    text-align: center;
    padding: 10px 16px !important;
    font-size: 13px !important;
    border-radius: var(--radius-md) !important;
}

/* ---- Star Ratings ---- */
.woocommerce ul.products li.product .star-rating {
    margin: var(--space-xs) var(--space-md) 0 var(--space-md);
    font-size: 0.75rem;
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
    color: var(--color-gold) !important;
}

.woocommerce ul.products li.product .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    margin: 0 !important;
}

/* ==========================================================================
   2. RESPONSIVE PRODUCT GRID
   ========================================================================== */

@media (max-width: 1199px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 1023px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 374px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Edge gutter on phones only. Desktop/tablet already get side
   breathing room from Storefront's own .col-full padding around the grid;
   that padding shrinks away on narrow phone widths, so without this the
   product cards run flush to the screen edges. Matches the 16px inter-card
   gap set above so the outer gutter reads as part of the same rhythm,
   rather than a different, arbitrary margin. ---- */
@media (max-width: 767px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products {
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   3. SINGLE PRODUCT PAGE
   ========================================================================== */

.woocommerce div.product {
    padding: var(--space-2xl) 0;
}

.woocommerce div.product .product_title {
    font-family: var(--font-heading) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--color-foreground) !important;
    margin-bottom: var(--space-sm) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: var(--font-body) !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
}

.woocommerce div.product p.price del {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-foreground-muted) !important;
}

/* The default sale flash (span.onsale) renders as a full-width ribbon with
   no reliable position in this layout; hidden here in favour of the small
   inline tag hst_single_product_sale_tag() prints right after the price
   (inc/product-page.php), matching the shop-loop treatment. */
.single-product span.onsale {
    display: none !important;
}

.single-product .hst-product-card__sale-tag {
    margin-left: var(--space-sm);
    vertical-align: middle;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-foreground);
    margin-bottom: var(--space-lg);
}

.woocommerce div.product form.cart .quantity input[type="number"] {
    width: 70px;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px;
    font-family: var(--font-body);
    font-size: 16px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0 !important;
    margin: var(--space-2xl) 0 var(--space-lg) 0 !important;
    border-bottom: 2px solid var(--color-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-foreground-muted);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 200ms ease, border-color 200ms ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-accent);
}

.woocommerce div.product .woocommerce-tabs .panel {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-foreground);
}

.woocommerce div.product .product_meta {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-foreground-muted);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
}

.woocommerce div.product .product_meta a {
    color: var(--color-secondary);
}

/* ---- Product Gallery (classic WooCommerce template markup — verified
   against this site's actual single-product page HTML) ---- */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-muted);
}

.woocommerce div.product .woocommerce-product-gallery__image img {
    border-radius: var(--radius-xl);
}

/* A side column now (see .woocommerce-product-gallery's flex-direction:
   row-reverse in product.css), not a row below the image — fixed-width,
   stacked, scrollable if a product has more images than fit the main
   image's height. */
.woocommerce div.product .flex-control-thumbs {
    /* WooCommerce's own default stylesheet targets this same element via
       `.woocommerce div.product div.images .flex-control-thumbs` — the
       gallery wrapper carries a legacy `images` class alongside
       `woocommerce-product-gallery`, so that selector genuinely matches
       here too, and its extra class gives it HIGHER specificity (0,4,2)
       than this rule (0,3,1) despite loading first. !important is the
       same fix already used throughout this file for that exact fight. */
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 64px;
    gap: var(--space-sm);
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    /* `max-height: 100%` doesn't actually work here: percentage heights
       only resolve against a DEFINITE ancestor height, and
       .woocommerce-product-gallery (the flex row) has no height of its
       own — it's auto, sized by its own tallest child. With 5-6+
       thumbnails that child ends up being this list itself, so the
       percentage was computed against nothing and silently ignored
       (spec says "treat as none"), letting the column grow to its full
       content height and spill out below the main image instead of
       scrolling. product.js measures the main image's actual rendered
       height (a genuinely definite number) with a ResizeObserver and
       writes it here as --hst-gallery-height, so this list's max-height
       always matches the image next to it, with extra thumbnails
       scrolling inside that height instead of pushing the page down.
       70vh is only the fallback before JS runs (or if it's unsupported). */
    max-height: var( --hst-gallery-height, 70vh );
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.woocommerce div.product .flex-control-thumbs li {
    /* Same specificity fight as above — core's `div.images` ancestor
       selector sets width:25%; float:left on this exact element. */
    width: 100% !important;
    float: none !important;
    flex: 0 0 auto !important;
}

.woocommerce div.product .flex-control-thumbs li img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 200ms ease, border-color 200ms ease;
}

.woocommerce div.product .flex-control-thumbs li img:hover {
    opacity: 1;
}

.woocommerce div.product .flex-control-thumbs li img.flex-active {
    opacity: 1;
    border-color: var(--color-accent);
}

/* ---- Related Products — reuses the same grid rules already applied to
   .woocommerce ul.products site-wide (see section 1), this just styles
   the section heading/spacing so it doesn't look like an afterthought
   bolted below the product tabs. ---- */
.woocommerce div.product .related.products {
    margin-top: var(--space-3xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--color-border);
}

.woocommerce div.product .related.products > h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-foreground);
    text-align: center;
    margin-bottom: var(--space-xl);
}

/* ---- Storefront's own default spacing here is large enough to read as
   broken empty space rather than intentional breathing room: ~3em
   (~47px) padding-top before the tabs, ~3em (~48px) padding-bottom on the
   whole .product wrapper PLUS another ~3em margin-bottom on #main before
   the footer — the two stack into a highly visible gap between "related
   products" and the footer. Scoped to single-product pages only, so it
   doesn't touch shop/cart/checkout spacing. ---- */
.single-product div.product {
    padding-bottom: var(--space-lg) !important;
}
.single-product .woocommerce-tabs {
    padding-top: var(--space-lg) !important;
}
.single-product #main {
    margin-bottom: var(--space-lg) !important;
}

/* ==========================================================================
   4. CART PAGE
   ==========================================================================
   IMPORTANT: this WooCommerce install renders Cart with the WooCommerce
   BLOCKS cart (Gutenberg block, React-hydrated Store API data), not the
   classic [woocommerce_cart] shortcode/table. Confirmed directly against
   the live page markup, not assumed — the old rules this replaced targeted
   `table.shop_table`, which this page never actually outputs, so that CSS
   was silently dead weight. If a site is ever switched back to the classic
   cart shortcode, `.woocommerce table.shop_table` styling would need to be
   reinstated; don't assume it's still needed by default going forward.

   Everything below targets WooCommerce Blocks' own documented, stable CSS
   class API (`wc-block-components-*` / `wp-block-woocommerce-*`) —
   confirmed against this site's actual rendered HTML wherever a class name
   is used below without a caveat. Cart items only populate client-side via
   the Store API (no server-rendered item markup to check against here),
   so the innermost per-item selectors are WooCommerce's documented public
   class names rather than something verified pixel-for-pixel on this
   install — worth an eyes-on check in a real browser once deployed. ---- */

.wp-block-woocommerce-cart {
    font-family: var(--font-body);
}

.wp-block-woocommerce-filled-cart-block {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    align-items: flex-start;
}

.wp-block-woocommerce-cart-items-block {
    flex: 1 1 480px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}

.wp-block-woocommerce-cart-totals-block {
    flex: 0 1 340px;
    min-width: 300px;
}

/* ONE card for the whole summary (cart + checkout). WooCommerce nests many
   wrappers inside it (coupon, subtotal, shipping, total) — those stay plain and
   are separated by hairlines, otherwise every row becomes its own clipped box. */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}

.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block [class*="wp-block-woocommerce-checkout-order-summary-"]:not(.wp-block-woocommerce-checkout-order-summary-block),
.wp-block-woocommerce-cart-order-summary-block [class*="wp-block-woocommerce-cart-order-summary-"]:not(.wp-block-woocommerce-cart-order-summary-block) {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-sm) 0;
}

.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper + .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper + .wc-block-components-totals-wrapper {
    border-top: 1px solid var(--color-border);
}

.wc-block-cart-item__product-name,
.wc-block-components-product-name {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    color: var(--color-foreground) !important;
    text-decoration: none !important;
}

.wc-block-components-product-price,
.wc-block-components-totals-item__value {
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
}

.wc-block-components-quantity-selector {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
}

.wc-block-components-button,
.wc-block-cart__submit-container .wc-block-components-button {
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
}

.wc-block-components-button.wp-element-button:not(.is-link) {
    background: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
}

.wc-block-components-button.wp-element-button:not(.is-link):hover {
    background: var(--color-accent-hover) !important;
}

/* ---- Mobile: stack the items column and the totals sidebar instead of
   sitting side by side — the flex-wrap above already does most of this
   work; this just forces the full-width stack below the point the items
   column would otherwise get uncomfortably narrow. ---- */
@media (max-width: 768px) {
    .wp-block-woocommerce-filled-cart-block {
        flex-direction: column;
    }

    .wp-block-woocommerce-cart-items-block,
    .wp-block-woocommerce-cart-totals-block {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
}

/* Each cart line is a CSS Grid row with only 2 explicit columns
   (`80px 132px`, set by WooCommerce core) but 3 actual grid items — image,
   name+quantity, and price. The price, having no column of its own, gets
   auto-placed into an implicit 3rd column sized to its own content width;
   on a narrow phone that pushes it past the card's right edge instead of
   wrapping, since the grid container doesn't clip. Give it an explicit
   column (2, same as the name) and its own row instead, so it reflows
   underneath the title/quantity rather than overflowing beside them. */
@media (max-width: 480px) {
    table.wc-block-cart-items .wc-block-cart-items__row {
        grid-template-columns: 70px 1fr !important;
    }

    /* !important throughout: WooCommerce Blocks' own cart.css defines the
       exact same selectors (same specificity), and loads after this
       stylesheet, so a plain override here loses the cascade tie — verified
       via computed styles, not assumed. */
    .wc-block-cart-item__total {
        grid-column: 2 !important;
        grid-row-start: 2 !important;
        justify-content: flex-start !important;
        margin-top: var(--space-xs);
    }
}

/* ==========================================================================
   5. CHECKOUT PAGE
   ==========================================================================
   Same situation as Cart above: this is the WooCommerce Blocks checkout
   (Gutenberg block), not the classic [woocommerce_checkout] shortcode/form
   — confirmed against this site's actual page content, not assumed. ---- */

.wp-block-woocommerce-checkout {
    font-family: var(--font-body);
}

.wp-block-woocommerce-checkout-fields-block {
    flex: 1 1 480px;
}

.wp-block-woocommerce-checkout-totals-block {
    flex: 0 1 340px;
    min-width: 300px;
}

.wc-block-components-checkout-step {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.wc-block-components-checkout-step__title {
    font-family: var(--font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--color-foreground) !important;
}

.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-combobox input {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
}

.wc-block-components-checkout-place-order-button {
    background: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    width: 100%;
}

.wc-block-components-checkout-place-order-button:hover {
    background: var(--color-accent-hover) !important;
}

@media (max-width: 768px) {
    .wp-block-woocommerce-checkout-fields-block,
    .wp-block-woocommerce-checkout-totals-block {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
}

/* ---- Trust badges before checkout — see hst_render_checkout_trust_badges()
   in functions.php for why these sit ABOVE the whole checkout block rather
   than literally glued to the place-order button: the Checkout block is a
   React component, and inserting content at a specific spot *inside* it
   requires WooCommerce's JS Slot/Fill extension API (a whole new webpack/
   build pipeline this theme doesn't have) — a PHP content filter can only
   wrap the block, not reach inside it. This is the honest equivalent: the
   same reassurance, at the point the customer starts checking out. ---- */
.hst-checkout-trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
    padding: var(--space-md) 0 var(--space-lg) 0;
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.hst-checkout-trust-badges__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-foreground-muted);
}

.hst-checkout-trust-badges__item svg {
    flex-shrink: 0;
    color: var(--color-secondary);
}

/* ==========================================================================
   6. MY ACCOUNT PAGE OVERHAUL (GUEST & LOGGED IN)
   ========================================================================== */

.woocommerce-account .entry-content .woocommerce,
.woocommerce-account .woocommerce {
    max-width: 1080px !important;
    margin: var(--space-xl) auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-account .entry-title,
.woocommerce-account .page-title {
    text-align: center !important;
    font-family: var(--font-heading) !important;
    font-size: 2.25rem !important;
    margin-bottom: var(--space-2xl) !important;
    color: var(--color-foreground) !important;
}

/* ---- Guest / Logged Out: Focused Single-Card Tabbed Layout ---- */
.woocommerce-account .u-columns.col2-set,
.woocommerce-account #customer_login {
    display: block !important;
    width: 100% !important;
    max-width: var(--account-card-max-width) !important;
    margin: 0 auto !important;
    float: none !important;
}

.hst-account-tab-header {
    display: flex;
    max-width: var(--account-card-max-width);
    margin: 0 auto var(--space-lg) auto;
    background: var(--color-muted);
    border-radius: var(--radius-md);
    padding: 4px;
}

.hst-account-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-foreground-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 200ms ease;
}

.hst-account-tab-btn.active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .col-1,
.woocommerce-account .col-2 {
    width: 100% !important;
    float: none !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-2xl) var(--space-xl) !important;
    box-shadow: var(--shadow-md) !important;
    box-sizing: border-box !important;
}

.woocommerce-account h2 {
    font-family: var(--font-heading) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--color-foreground) !important;
    margin: 0 0 var(--space-lg) 0 !important;
    padding-bottom: var(--space-sm) !important;
    border-bottom: 2px solid var(--color-accent) !important;
}

.woocommerce-account .woocommerce-form p.form-row,
.woocommerce-account .woocommerce-form-login p.form-row,
.woocommerce-account .woocommerce-form-register p.form-row {
    width: 100% !important;
    float: none !important;
    margin-bottom: var(--space-md) !important;
    padding: 0 !important;
}

.woocommerce-account .woocommerce-form label {
    display: block !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--color-foreground) !important;
    margin-bottom: var(--space-xs) !important;
}

.woocommerce-account input.input-text {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

.woocommerce-account button.button {
    width: 100% !important;
    justify-content: center !important;
    margin-top: var(--space-md) !important;
    padding: 12px 28px !important;
}

.hst-account-switch-link {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-foreground-muted);
    margin-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
}

.hst-account-switch-link a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Hide duplicate phone field in registration form (the login-helper plugin
   injects its own phone field with intl-tel-input; the WooCommerce default
   billing phone field is redundant on the register form). */
.woocommerce-form-register p.form-row:has(input[name="phone"]) {
    display: none !important;
}

/* ---- Logged In Dashboard: 2-Column Layout ----
   Flexbox, not floats: floats here were landing the content column on a
   line of its own below the nav (confirmed live — the shared parent's
   height collapsed to 0 and content's own offsetTop sat right at nav's
   full height, i.e. it was wrapping, not sitting beside it, despite
   float:right computing correctly and there being plenty of horizontal
   room — a real, reproducible float-flow quirk, not a specificity issue).
   Flex removes the ambiguity entirely and is the more robust choice. */
.woocommerce-account .woocommerce {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--account-content-gap) !important;
}

/* Logged-out view: this same .woocommerce wrapper holds the tab header +
   #customer_login card instead of the nav+content pair above — as flex
   children, both default to fit-content width and left-align (flex's
   default justify-content), so the login/register card sat noticeably
   left-of-center instead of centered on the page. Back to block so the
   tab header's and card's own `max-width: var(--account-card-max-width);
   margin: 0 auto` actually centers them. */
.woocommerce-account .woocommerce:has(#customer_login) {
    display: block !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 var(--account-nav-width) !important;
    width: var(--account-nav-width) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-foreground);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 200ms ease, color 200ms ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child a {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: var(--color-muted);
    color: var(--color-primary);
}

.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* lets the content column actually shrink instead of overflowing its flex basis */
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-xl) !important;
    box-shadow: var(--shadow-sm) !important;
    box-sizing: border-box !important;
}

@media (max-width: 840px) {
    .woocommerce-account .u-columns.col2-set,
    .woocommerce-account #customer_login {
        grid-template-columns: 1fr !important;
        gap: var(--space-xl) !important;
    }
    .woocommerce-account .woocommerce {
        flex-direction: column !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        flex-basis: auto !important;
        margin-bottom: var(--space-lg) !important;
    }
}

/* ==========================================================================
   7. GLOBAL — FULL WIDTH & OVERFLOW
   ========================================================================== */

body,
html {
    overflow-x: hidden !important;
}

.woocommerce .content-area,
.woocommerce-page .content-area,
.site-content .content-area {
    width: 100% !important;
    float: none !important;
}

/* ==========================================================================
   BREADCRUMB ALIGNMENT — cart / checkout / account
   Storefront's breadcrumb uses its own narrower column, so it floated ~170px
   right of the page content. Match the shop/homepage 1200px column.
   ========================================================================== */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .storefront-breadcrumb {
    margin: 0;
    padding: var(--space-md) 0 0;
    background: transparent;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .storefront-breadcrumb > .col-full {
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: var(--space-xl);
    box-sizing: content-box;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-breadcrumb {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-foreground-muted);
}

/* ==========================================================================
   CART: "PROCEED TO CHECKOUT" MUST ALWAYS BE VISIBLE ON DESKTOP
   WooCommerce's Cart block decides between an in-place button and a mobile
   "sticky" bar using an IntersectionObserver that runs ONCE, while the cart is
   still loading. If it lands on "sticky", WooCommerce's own CSS hides that
   variant at >=783px, leaving desktop customers with no checkout button until
   the viewport happens to change. Show the button in place whichever variant
   it picked. (Phones keep WooCommerce's fixed bottom bar.)
   ========================================================================== */
@media (min-width: 783px) {
    .wc-block-cart .wc-block-cart__submit-container--sticky {
        display: block !important;
        position: static;
        padding: 0;
        width: auto;
        background: transparent !important;
        box-shadow: none;
    }

    .wc-block-cart .wc-block-cart__submit-container--sticky::before {
        display: none;
    }
}