/*
 * MSP Checkout — WooCommerce override layer.
 *
 * Restyles the default WC components (cart table, checkout form, review order,
 * notices, form fields, buttons, my-account dashboard) to match the brand
 * tokens declared in brand.css.
 *
 * Only loaded on WC pages (gated in functions.php), so it can use generic
 * selectors like `table.shop_table` without worrying about bleeding elsewhere.
 *
 * Order:
 *   1. Forms (inputs, labels, selects, radios)
 *   2. Buttons (WC's default .button gets brand styling)
 *   3. Notices (added-to-cart, error, success)
 *   4. Cart page
 *   5. Checkout page
 *   6. Order review / thank-you
 *   7. My account
 *   8. Shop archive / single product
 */

/* ╭──────────────────────────────────────────────────────────────────────╮
   │ 1. Forms                                                             │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.msp-wc-page .form-row,
.msp-wc-page .woocommerce-input-wrapper,
.msp-wc-page p.form-row {
    margin-bottom: 16px;
}
.msp-wc-page label,
.msp-wc-page .form-row label {
    display: block;
    font-size: 13px; font-weight: 600;
    color: var(--msp-ink);
    margin-bottom: 6px;
}
.msp-wc-page abbr.required {
    color: var(--msp-accent);
    border: none; text-decoration: none;
    margin-left: 2px;
}

.msp-wc-page input[type="text"],
.msp-wc-page input[type="email"],
.msp-wc-page input[type="password"],
.msp-wc-page input[type="tel"],
.msp-wc-page input[type="number"],
.msp-wc-page input[type="search"],
.msp-wc-page input[type="url"],
.msp-wc-page select,
.msp-wc-page textarea,
.msp-wc-page .select2-container .select2-selection--single,
.msp-wc-page .select2-container--default .select2-selection--single {
    width: 100%;
    padding: 12px 14px;
    height: auto;
    line-height: 1.4;
    font-size: 15px;
    background: var(--msp-surface);
    color: var(--msp-ink);
    border: 1px solid var(--msp-line);
    border-radius: 12px;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.msp-wc-page select { padding-right: 38px; }
.msp-wc-page textarea { min-height: 96px; resize: vertical; }

.msp-wc-page input:focus,
.msp-wc-page select:focus,
.msp-wc-page textarea:focus,
.msp-wc-page .select2-container--default.select2-container--focus .select2-selection--single,
.msp-wc-page .select2-container--open .select2-selection--single {
    outline: none;
    border-color: var(--msp-accent);
    box-shadow: 0 0 0 4px rgba(224, 79, 200, 0.16);
}

/* Select2 (used by WC for country dropdown) */
.msp-wc-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px; color: var(--msp-ink); padding-left: 0;
}
.msp-wc-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%; right: 12px;
}
.msp-wc-page .select2-dropdown {
    border: 1px solid var(--msp-line); border-radius: 12px; overflow: hidden;
}

/* Radio / checkbox — let payment method radios breathe */
.msp-wc-page .woocommerce-form__input-checkbox,
.msp-wc-page input[type="radio"],
.msp-wc-page input[type="checkbox"] {
    margin-right: 8px;
    accent-color: var(--msp-accent);
}

/* Errored field */
.msp-wc-page .woocommerce-invalid input.input-text,
.msp-wc-page .woocommerce-invalid select,
.msp-wc-page .woocommerce-invalid .select2-container .select2-selection {
    border-color: var(--msp-danger) !important;
    box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.12);
}


/* ╭──────────────────────────────────────────────────────────────────────╮
   │ 2. Buttons — replace WC's default .button styling with the brand pill │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.msp-wc-page .button,
.msp-wc-page button.button,
.msp-wc-page input[type="submit"].button,
.msp-wc-page a.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px;
    border-radius: var(--msp-radius-pill);
    background: linear-gradient(135deg, var(--msp-accent-3) 0%, var(--msp-accent) 55%, var(--msp-accent-2) 100%);
    color: #fff;
    font-size: 14px; font-weight: 700;
    border: none;
    text-decoration: none;
    cursor: pointer;
    text-shadow: none;
    box-shadow: 0 6px 18px rgba(224, 79, 200, 0.18);
    transition: opacity 0.18s, transform 0.05s;
    line-height: 1.2;
}
.msp-wc-page .button:hover,
.msp-wc-page button.button:hover,
.msp-wc-page a.button:hover {
    opacity: 0.94;
    color: #fff;
}
.msp-wc-page .button:active { transform: scale(0.985); }
.msp-wc-page .button[disabled],
.msp-wc-page .button.disabled { opacity: 0.55; cursor: not-allowed; }

/* Secondary action — used for "Update cart", "Apply coupon" */
.msp-wc-page .button.alt-secondary,
.msp-wc-page button[name="update_cart"],
.msp-wc-page button[name="apply_coupon"] {
    background: transparent;
    color: var(--msp-ink);
    border: 1px solid var(--msp-line);
    box-shadow: none;
}
.msp-wc-page button[name="update_cart"]:hover,
.msp-wc-page button[name="apply_coupon"]:hover {
    border-color: var(--msp-ink-soft);
    color: var(--msp-ink);
}


/* ╭──────────────────────────────────────────────────────────────────────╮
   │ 3. Notices                                                           │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.msp-wc-page .woocommerce-message,
.msp-wc-page .woocommerce-info,
.msp-wc-page .woocommerce-error,
.msp-wc-page .woocommerce-notices-wrapper > div {
    margin: 0 0 24px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--msp-line);
    background: var(--msp-surface);
    color: var(--msp-ink);
    font-size: 14px;
    list-style: none;
}
.msp-wc-page .woocommerce-message { border-color: #BBF7D0; background: #ECFDF5; color: #166534; }
.msp-wc-page .woocommerce-error   { border-color: #FECDD3; background: #FFF1F2; color: #9F1239; }
.msp-wc-page .woocommerce-info    { border-color: #DBEAFE; background: #EFF6FF; color: #1E3A8A; }

.msp-wc-page .woocommerce-notices-wrapper .button {
    padding: 8px 16px;
    font-size: 12px;
    margin-left: 12px;
}


/* ╭──────────────────────────────────────────────────────────────────────╮
   │ 4. Cart page                                                         │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.msp-wc-page table.shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--msp-surface);
    border: 1px solid var(--msp-line);
    border-radius: var(--msp-radius-card);
    overflow: hidden;
    margin-bottom: 24px;
}
.msp-wc-page table.shop_table th {
    background: var(--msp-bg);
    color: var(--msp-ink-soft);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    padding: 14px 18px;
    border-bottom: 1px solid var(--msp-line);
    text-align: left;
}
.msp-wc-page table.shop_table td {
    padding: 18px;
    border-bottom: 1px solid var(--msp-line);
    vertical-align: middle;
    font-size: 14px;
}
.msp-wc-page table.shop_table tr:last-child td { border-bottom: none; }

.msp-wc-page .cart_item .product-name a {
    color: var(--msp-ink);
    text-decoration: none;
    font-weight: 600;
}
.msp-wc-page .cart_item .product-name a:hover { color: var(--msp-accent); }
.msp-wc-page .cart_item .product-thumbnail img {
    width: 80px; height: 80px; object-fit: cover;
    border-radius: 12px; border: 1px solid var(--msp-line);
}
.msp-wc-page .cart_item .variation,
.msp-wc-page .cart_item dl.variation,
.msp-wc-page .product-name .wc-item-meta {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--msp-mute);
}
.msp-wc-page .cart_item .variation dt,
.msp-wc-page .cart_item .variation dd { display: inline; margin: 0; }
.msp-wc-page .cart_item .variation dt { font-weight: 600; }
.msp-wc-page .cart_item .variation dd { margin-right: 8px; }

.msp-wc-page .product-remove a.remove {
    width: 24px; height: 24px;
    line-height: 22px; text-align: center;
    border-radius: 9999px;
    background: var(--msp-line);
    color: var(--msp-ink-soft) !important;
    font-weight: 700;
    text-decoration: none;
}
.msp-wc-page .product-remove a.remove:hover {
    background: var(--msp-danger);
    color: #fff !important;
}

.msp-wc-page .quantity input.qty {
    width: 64px; padding: 8px 10px; text-align: center;
}

.msp-wc-page .coupon { display: flex; gap: 8px; align-items: stretch; }
.msp-wc-page .coupon input.input-text { padding: 12px 14px; }

/* Checkout page — two-column layout: customer details left, order
   review (sticky) right. WC's default markup is two stacked siblings
   inside `.checkout`:
     <div id="customer_details">  …billing/shipping fields…
     <h3>Your order</h3>
     <table id="order_review_heading">  (optional)
     <div id="order_review">       …line items + totals…
   We grid `form.checkout` so the customer_details and order_review
   columns sit side by side, and force the heading + review-heading
   table (when present) to span the right column. */
@media (min-width: 980px) {
    .msp-wc-page .woocommerce-checkout form.checkout {
        display: grid !important;
        grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr);
        gap: 36px;
        align-items: start;
    }
    .msp-wc-page .woocommerce-checkout form.checkout > #customer_details {
        grid-column: 1 / 2;
        min-width: 0;
    }
    .msp-wc-page .woocommerce-checkout form.checkout > h3#order_review_heading,
    .msp-wc-page .woocommerce-checkout form.checkout > #order_review_heading {
        grid-column: 2 / 3;
        margin: 0 0 12px;
    }
    .msp-wc-page .woocommerce-checkout form.checkout > #order_review {
        grid-column: 2 / 3;
        position: sticky;
        top: 96px;
        margin: 0;
    }
    /* Any leftover sibling (e.g. notices wrapper, terms checkbox area
       WC drops outside #order_review on some setups) spans full width
       so it doesn't break the two-column rhythm. */
    .msp-wc-page .woocommerce-checkout form.checkout > .woocommerce-notices-wrapper {
        grid-column: 1 / -1;
    }
}

/* Cart page — two-column layout: items table left, totals card right.
   Targets the SHORTCODE cart (form.woocommerce-cart-form). The .woocommerce
   wrapper holds 3 children: the notices wrapper, the items form, and the
   collaterals (which contains the totals card). We grid the wrapper into
   two columns; force the notices wrapper to span both so the form + totals
   line up cleanly in the second row. */
@media (min-width: 980px) {
    .msp-wc-page .woocommerce-cart .woocommerce {
        display: grid !important;
        grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
        gap: 36px;
        align-items: start;
    }
    .msp-wc-page .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
        grid-column: 1 / -1;
    }
    .msp-wc-page .woocommerce-cart .woocommerce > form.woocommerce-cart-form {
        margin: 0;
        grid-column: 1 / 2;
    }
    .msp-wc-page .woocommerce-cart .woocommerce > .cart-collaterals {
        margin-top: 0;
        grid-column: 2 / 3;
        position: sticky;
        top: 96px;
    }
}
.msp-wc-page .cart-collaterals {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
}
.msp-wc-page .cart_totals {
    background: var(--msp-ink);
    color: var(--msp-bg);
    border-radius: var(--msp-radius-card);
    padding: 28px;
}
.msp-wc-page .cart_totals h2 {
    color: var(--msp-bg);
    margin: 0 0 18px;
    font-size: 22px;
}
.msp-wc-page .cart_totals table.shop_table {
    background: transparent; border: none;
}
.msp-wc-page .cart_totals table.shop_table th,
.msp-wc-page .cart_totals table.shop_table td {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    padding: 12px 0;
    font-size: 14px;
    text-transform: none; letter-spacing: 0;
}
.msp-wc-page .cart_totals .order-total th,
.msp-wc-page .cart_totals .order-total td {
    font-size: 18px; color: #fff; font-weight: 700;
    border-bottom: none; padding-top: 18px;
}
.msp-wc-page .cart_totals .wc-proceed-to-checkout {
    margin-top: 20px; padding-top: 0;
}
.msp-wc-page .cart_totals .wc-proceed-to-checkout .checkout-button {
    width: 100%;
    padding: 16px 28px;
    font-size: 15px;
}

/* ── WC Cart BLOCK (Gutenberg) layout ───────────────────────────────────
   Pages built with the modern WC Cart block (wp-block-woocommerce-cart)
   use a different class structure than the classic [woocommerce_cart]
   shortcode. Without targeted rules the block falls back to its WP
   defaults — items column ends up full-width and the totals sidebar
   collapses into a narrow strip below it. These rules give the block
   the same two-column shape the shortcode version has, brand-styled. */
.msp-wc-page .wp-block-woocommerce-cart,
.msp-wc-page .wp-block-woocommerce-filled-cart-block {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}
.msp-wc-page .wp-block-woocommerce-filled-cart-block {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
}
@media (min-width: 980px) {
    .msp-wc-page .wp-block-woocommerce-filled-cart-block {
        grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
        gap: 36px;
    }
}
/* Left column — line items list */
.msp-wc-page .wp-block-woocommerce-cart-items-block {
    background: var(--msp-surface);
    border: 1px solid var(--msp-line);
    border-radius: var(--msp-radius-card);
    padding: 24px;
    min-width: 0;
}
@media (min-width: 980px) {
    .msp-wc-page .wp-block-woocommerce-cart-items-block { padding: 32px; }
}
/* Right column — sticky totals so it stays visible while the customer
   scrolls a long item list. */
.msp-wc-page .wp-block-woocommerce-cart-totals-block {
    background: var(--msp-ink);
    color: var(--msp-bg);
    border-radius: var(--msp-radius-card);
    padding: 24px;
    min-width: 0;
    position: sticky;
    top: 96px; /* header (~84px) + breathing room */
}
@media (min-width: 980px) {
    .msp-wc-page .wp-block-woocommerce-cart-totals-block { padding: 32px; }
}

/* Heading + table inside the block totals — match the dark cart_totals
   panel styling we already had for the shortcode version. */
.msp-wc-page .wp-block-woocommerce-cart-totals-block h2,
.msp-wc-page .wp-block-woocommerce-cart-order-summary-block h2 {
    color: var(--msp-bg);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 22px;
    margin: 0 0 18px;
}
.msp-wc-page .wc-block-components-totals-item {
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding: 12px 0;
    font-size: 14px;
}
.msp-wc-page .wc-block-components-totals-footer-item,
.msp-wc-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-bottom: none;
    padding-top: 18px;
}
/* "Proceed to checkout" button — full width, brand magenta. */
.msp-wc-page .wc-block-cart__submit-container .wc-block-cart__submit-button,
.msp-wc-page .wp-block-woocommerce-proceed-to-checkout-block a.wc-block-components-button {
    width: 100%;
    padding: 16px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--msp-radius-pill);
    background: var(--msp-accent);
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
}
.msp-wc-page .wc-block-cart__submit-container .wc-block-cart__submit-button:hover {
    background: var(--msp-accent-2);
    color: var(--msp-ink);
}

/* Shipping calculator / address picker inside the totals block — keep
   text legible on the dark background. */
.msp-wc-page .wp-block-woocommerce-cart-totals-block .wc-block-components-shipping-calculator-address a,
.msp-wc-page .wp-block-woocommerce-cart-totals-block .wc-block-components-totals-shipping__change-address-button {
    color: var(--msp-accent-2);
    text-decoration: none;
    font-weight: 600;
}
.msp-wc-page .wp-block-woocommerce-cart-totals-block label,
.msp-wc-page .wp-block-woocommerce-cart-totals-block legend {
    color: rgba(255, 255, 255, 0.85);
}

/* Coupon block — give it room from the line items, neutral surface. */
.msp-wc-page .wp-block-woocommerce-cart-order-summary-coupon-form-block,
.msp-wc-page .wp-block-woocommerce-cart-accepted-payment-methods-block {
    margin-top: 16px;
}


/* ╭──────────────────────────────────────────────────────────────────────╮
   │ 5. Checkout page                                                     │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.msp-wc-page form.checkout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
@media (min-width: 1000px) {
    .msp-wc-page form.checkout { grid-template-columns: 1.3fr 1fr; gap: 48px; }
}
.msp-wc-page #customer_details {
    background: var(--msp-surface);
    border: 1px solid var(--msp-line);
    border-radius: var(--msp-radius-card);
    padding: 32px;
}
.msp-wc-page #customer_details > .col-1,
.msp-wc-page #customer_details > .col-2 { width: 100%; float: none; }
.msp-wc-page #customer_details h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--msp-line);
}
.msp-wc-page #customer_details > .col-2 { margin-top: 32px; }

.msp-wc-page #order_review_heading {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 22px; margin: 0 0 16px;
}
.msp-wc-page #order_review {
    background: var(--msp-ink); color: var(--msp-bg);
    border-radius: var(--msp-radius-card);
    padding: 28px;
    position: sticky; top: 96px;
}
.msp-wc-page #order_review table.shop_table {
    background: transparent; border: none; margin-bottom: 18px;
}
.msp-wc-page #order_review table.shop_table th,
.msp-wc-page #order_review table.shop_table td {
    background: transparent; border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
    padding: 12px 0;
    font-size: 13px; text-transform: none; letter-spacing: 0;
}
.msp-wc-page #order_review .order-total th,
.msp-wc-page #order_review .order-total td {
    font-size: 18px; color: #fff; font-weight: 700; border-bottom: none;
}

/* Payment methods */
.msp-wc-page #payment {
    background: transparent;
    margin-top: 18px;
}
.msp-wc-page #payment .wc_payment_methods {
    padding: 0; list-style: none; margin: 0;
}
.msp-wc-page #payment .wc_payment_method {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.msp-wc-page #payment .wc_payment_method label {
    color: #fff; font-weight: 600; font-size: 14px;
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; margin: 0;
}
.msp-wc-page #payment .payment_box {
    background: rgba(255,255,255,0.04);
    border: none; border-radius: 10px;
    padding: 14px; margin-top: 10px;
    color: rgba(255,255,255,0.8); font-size: 13px;
}
.msp-wc-page #payment .payment_box::before { display: none; }

.msp-wc-page #payment .place-order .button {
    width: 100%;
    padding: 16px 28px;
    font-size: 15px;
    margin-top: 16px;
}
.msp-wc-page #payment .terms { color: rgba(255,255,255,0.75); font-size: 12px; margin-top: 12px; }


/* ╭──────────────────────────────────────────────────────────────────────╮
   │ 6. Order received / thank-you                                        │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.msp-wc-page .woocommerce-order-received .msp-page-title { display: none; }
.msp-wc-page .woocommerce-thankyou-order-received {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: var(--msp-display-1);
    color: var(--msp-ink);
    margin: 0 0 12px;
    line-height: 1.05;
}
.msp-wc-page .woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 28px 0 36px;
    padding: 0; list-style: none;
}
@media (min-width: 700px) { .msp-wc-page .woocommerce-order-overview { grid-template-columns: repeat(4, 1fr); } }
.msp-wc-page .woocommerce-order-overview li {
    background: var(--msp-surface);
    border: 1px solid var(--msp-line);
    border-radius: 14px;
    padding: 16px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--msp-mute);
}
.msp-wc-page .woocommerce-order-overview li strong {
    display: block;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    color: var(--msp-ink);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 4px;
}
.msp-wc-page .woocommerce-order-details,
.msp-wc-page .woocommerce-customer-details {
    margin-bottom: 32px;
}


/* ╭──────────────────────────────────────────────────────────────────────╮
   │ 7. My account                                                         │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.msp-wc-page .woocommerce-MyAccount-navigation {
    background: var(--msp-surface);
    border: 1px solid var(--msp-line);
    border-radius: 14px;
    padding: 6px;
    margin-bottom: 24px;
}
.msp-wc-page .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.msp-wc-page .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 10px 16px;
    border-radius: 10px;
    color: var(--msp-ink-soft);
    text-decoration: none;
    font-size: 14px; font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.msp-wc-page .woocommerce-MyAccount-navigation li a:hover {
    background: var(--msp-bg);
    color: var(--msp-ink);
}
.msp-wc-page .woocommerce-MyAccount-navigation li.is-active a {
    /* Brand-gradient active state — matches the primary CTA on the
       marketing site so the active tab feels like part of the same
       design language as Build / Continue buttons. */
    background-image: linear-gradient(135deg, #7C6BFF 0%, #E04FC8 50%, #FF8E6E 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(224, 79, 200, 0.25);
}


/* ╭──────────────────────────────────────────────────────────────────────╮
   │ 8. Shop archive — full restyle                                       │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.msp-shop-head {
    text-align: center;
    margin-bottom: 40px;
}
.msp-shop-head p { margin: 8px auto 0; max-width: 540px; color: var(--msp-ink-soft); }

.msp-wc-page ul.products {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 640px) { .msp-wc-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 960px) { .msp-wc-page ul.products { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.msp-wc-page ul.products li.product {
    background: var(--msp-surface);
    border: 1px solid var(--msp-line);
    border-radius: 20px;
    padding: 16px;
    list-style: none;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    position: relative;
    overflow: hidden;
}
.msp-wc-page ul.products li.product:hover {
    transform: translateY(-2px);
    border-color: var(--msp-ink-soft);
    box-shadow: 0 14px 40px -20px rgba(0,0,0,0.2);
}
.msp-wc-page ul.products li.product a { text-decoration: none; color: inherit; display: block; }
.msp-wc-page ul.products li.product .msp-product-thumb {
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    background: var(--msp-bg);
    margin-bottom: 14px;
    display: block;
}
.msp-wc-page ul.products li.product .msp-product-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.msp-wc-page ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px; font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.msp-wc-page ul.products li.product .price {
    color: var(--msp-ink-soft);
    font-size: 14px; font-weight: 600;
}
.msp-wc-page ul.products li.product .price ins { background: none; font-weight: 700; color: var(--msp-ink); }
.msp-wc-page ul.products li.product .button {
    margin-top: 12px;
    padding: 10px 18px;
    font-size: 13px;
    box-shadow: none;
}
.msp-wc-page ul.products li.product .onsale {
    position: absolute; top: 14px; right: 14px;
    padding: 4px 10px;
    border-radius: 9999px;
    background: var(--msp-accent);
    color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase;
}
.msp-wc-page span.price, .msp-wc-page p.price { color: var(--msp-ink); font-weight: 600; }
.msp-wc-page del { color: var(--msp-mute); opacity: 0.7; margin-right: 6px; }

.msp-wc-page .woocommerce-result-count {
    color: var(--msp-mute); font-size: 13px; margin-bottom: 16px;
}
.msp-wc-page .woocommerce-ordering select {
    max-width: 260px;
    margin-bottom: 16px;
}
.msp-wc-page nav.woocommerce-pagination ul {
    border: none; padding: 0; margin: 32px 0 0;
    display: inline-flex; gap: 6px;
}
.msp-wc-page nav.woocommerce-pagination ul li {
    border: none; display: inline-block;
}
.msp-wc-page nav.woocommerce-pagination ul li a,
.msp-wc-page nav.woocommerce-pagination ul li span {
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--msp-surface);
    border: 1px solid var(--msp-line);
    color: var(--msp-ink-soft);
    text-decoration: none;
    font-size: 14px; font-weight: 600;
    transition: all 0.18s;
}
.msp-wc-page nav.woocommerce-pagination ul li a:hover {
    border-color: var(--msp-ink);
    color: var(--msp-ink);
}
.msp-wc-page nav.woocommerce-pagination ul li span.current {
    background: var(--msp-ink);
    color: var(--msp-bg);
    border-color: var(--msp-ink);
}


/* ╭──────────────────────────────────────────────────────────────────────╮
   │ 9. Single product page                                               │
   │ Keeps every Page Fields hook intact — only the surrounding chrome   │
   │ is restyled. PF's fields render inside .summary on the right column. │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.msp-wc-page .product .images,
.msp-wc-page .product .woocommerce-product-gallery {
    margin: 0; padding: 0;
}
.msp-wc-page div.product {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: flex-start;
}
@media (min-width: 960px) {
    .msp-wc-page div.product { grid-template-columns: 1.1fr 1fr; gap: 56px; }
}
.msp-wc-page .product .woocommerce-product-gallery {
    background: var(--msp-surface);
    border: 1px solid var(--msp-line);
    border-radius: 20px;
    padding: 18px;
    overflow: hidden;
}
.msp-wc-page .product .woocommerce-product-gallery img {
    border-radius: 14px;
    width: 100% !important;
    height: auto;
    display: block;
}
.msp-wc-page .product .summary {
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
}
.msp-wc-page .product .summary .product_title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(1.8rem, 2vw + 1rem, 2.8rem);
    margin: 0 0 12px;
    line-height: 1.1;
    letter-spacing: -0.015em;
}
.msp-wc-page .product .summary .price {
    font-size: 22px; font-weight: 700;
    color: var(--msp-ink);
    margin: 0 0 18px;
}
.msp-wc-page .product .woocommerce-product-details__short-description {
    color: var(--msp-ink-soft);
    line-height: 1.65;
    margin-bottom: 20px;
}
.msp-wc-page .product .single_add_to_cart_button {
    width: 100%;
    padding: 16px 28px;
    font-size: 15px;
}
.msp-wc-page .product form.cart {
    display: block;
    background: var(--msp-bg);
    border: 1px solid var(--msp-line);
    border-radius: 16px;
    padding: 20px;
    margin: 24px 0;
}
.msp-wc-page .product form.cart .quantity {
    margin-right: 10px;
}

/* Tabs (Description / Additional info / Reviews) */
.msp-wc-page .woocommerce-tabs {
    margin-top: 48px;
    grid-column: 1 / -1;
}
.msp-wc-page .woocommerce-tabs ul.tabs {
    list-style: none; padding: 0; margin: 0 0 24px;
    border-bottom: 1px solid var(--msp-line);
    display: inline-flex; gap: 4px;
}
.msp-wc-page .woocommerce-tabs ul.tabs li {
    padding: 0;
    border: none !important;
    background: transparent !important;
}
.msp-wc-page .woocommerce-tabs ul.tabs li::before,
.msp-wc-page .woocommerce-tabs ul.tabs li::after { display: none !important; }
.msp-wc-page .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 14px 20px;
    color: var(--msp-ink-soft);
    text-decoration: none;
    font-size: 14px; font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.18s, border-color 0.18s;
}
.msp-wc-page .woocommerce-tabs ul.tabs li.active a,
.msp-wc-page .woocommerce-tabs ul.tabs li a:hover {
    color: var(--msp-ink);
    border-bottom-color: var(--msp-accent);
}
.msp-wc-page .woocommerce-tabs .panel {
    color: var(--msp-ink);
    line-height: 1.7;
}
.msp-wc-page .woocommerce-tabs .panel h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 22px;
    margin: 0 0 16px;
}

/* Related products */
.msp-wc-page .related, .msp-wc-page .upsells {
    margin-top: 56px;
    grid-column: 1 / -1;
}
.msp-wc-page .related > h2, .msp-wc-page .upsells > h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 24px;
    margin: 0 0 24px;
}


/* ╭──────────────────────────────────────────────────────────────────────╮
   │ 10. My Account                                                       │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.msp-wc-page .woocommerce-MyAccount-content {
    background: var(--msp-surface);
    border: 1px solid var(--msp-line);
    border-radius: 18px;
    padding: 28px;
}
@media (min-width: 768px) { .msp-wc-page .woocommerce-MyAccount-content { padding: 36px; } }
.msp-wc-page .woocommerce-MyAccount-content > h2:first-child,
.msp-wc-page .woocommerce-MyAccount-content > h3:first-child {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 24px;
    margin: 0 0 18px;
    color: var(--msp-ink);
}
.msp-wc-page .woocommerce-MyAccount-content p { line-height: 1.65; }
.msp-wc-page .woocommerce-MyAccount-content a {
    color: var(--msp-accent);
    text-decoration: none;
    font-weight: 600;
}
.msp-wc-page .woocommerce-MyAccount-content a:hover { color: var(--msp-accent-3); }

/* Layout: nav left, content right */
.msp-account-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 900px) {
    .msp-account-grid { grid-template-columns: 240px 1fr; gap: 36px; }
}
.msp-wc-page .woocommerce-MyAccount-navigation { margin-bottom: 0; }

/* ── Targeted my-account layout fixes ───────────────────────────────
   1. Sidebar nav items: force full pill width so the active-state
      background extends to the edge of the rail and the label
      ("Dashboard", "Downloads", "Account details") doesn't get
      truncated to "Dashb…" by an upstream ellipsis rule.
   2. Content column: min-width:0 lets it shrink correctly in the
      grid track so the inner grids (addresses) can actually expand.
   3. Addresses page: render billing + shipping side-by-side cards
      with a proper flex header (title vs Edit button), so the address
      content doesn't squish into a single narrow column. */
/* Sidebar nav — overrides for the parent pixfort theme.
   The parent rules cascade with higher specificity AND something (a
   flex container, an inline-block, an overflow:hidden) was keeping the
   active dark pill narrower than the sidebar column, clipping
   "Dashboard" → "Dashb". This block carpet-bombs every property that
   could be constraining the active link width. */
body.msp-wc-page .woocommerce-MyAccount-navigation,
body.msp-wc-page .woocommerce-MyAccount-navigation ul,
body.msp-wc-page .woocommerce-MyAccount-navigation li {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    float: none !important;
}
body.msp-wc-page .woocommerce-MyAccount-navigation li a,
body.msp-wc-page .woocommerce-MyAccount-navigation li.is-active a,
body.msp-wc-page .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    float: none !important;
    flex: none !important;
    text-align: start !important;
}
.msp-wc-page .woocommerce-MyAccount-content {
    min-width: 0;
}

/* Addresses landing — billing + shipping side-by-side.
   Inline style attributes on the template were fighting these rules; the
   template was edited to remove them so the layout is owned by CSS now. */
body.msp-wc-page .msp-addresses-heading {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 24px;
    margin: 0 0 6px;
    color: var(--msp-ink);
}
body.msp-wc-page .msp-addresses-intro {
    margin: 0 0 24px;
}
body.msp-wc-page .woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 8px;
    width: 100% !important;
}
@media (min-width: 720px) {
    body.msp-wc-page .woocommerce-Addresses {
        grid-template-columns: 1fr 1fr !important;
    }
}
body.msp-wc-page .woocommerce-Address {
    background: var(--msp-bg);
    border: 1px solid var(--msp-line);
    border-radius: 12px;
    padding: 20px;
    min-width: 0 !important;
    width: auto !important;
}
body.msp-wc-page .woocommerce-Address-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 0 12px !important;
    flex-wrap: nowrap !important;
}
body.msp-wc-page .woocommerce-Address-title h2,
body.msp-wc-page .woocommerce-Address-title h3 {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 18px !important;
    margin: 0 !important;
    color: var(--msp-ink) !important;
    flex: 1 1 auto !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}
body.msp-wc-page .msp-address-edit {
    padding: 6px 14px;
    font-size: 12px;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}
body.msp-wc-page .woocommerce-Address address {
    font-style: normal;
    color: var(--msp-ink-soft);
    line-height: 1.6;
    word-break: normal;
    white-space: normal;
    display: block;
    width: 100%;
}

/* Downloads page — keep the "no downloads" empty state from
   overlapping the action button. */
.msp-wc-page .woocommerce-MyAccount-downloads,
.msp-wc-page .woocommerce-MyAccount-downloads-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.msp-wc-page .woocommerce-info,
.msp-wc-page .woocommerce-MyAccount-content .woocommerce-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-radius: 12px;
    background: var(--msp-surface);
    border: 1px solid var(--msp-line);
    margin: 0;
    color: var(--msp-ink-soft);
    position: relative;
}
/* Hide WC's default ::before pseudo-icon — it's absolutely positioned with
   `left: 1.5em` and assumes a `padding-left: 3em` on the parent which our
   flex layout no longer reserves. Result was the icon glyph overlapping
   the start of the message ("No downloads available yet."). Our flex
   row already reads cleanly without it. */
.msp-wc-page .woocommerce-info::before,
.msp-wc-page .woocommerce-MyAccount-content .woocommerce-info::before {
    content: none !important;
    display: none !important;
}
.msp-wc-page .woocommerce-info a.button,
.msp-wc-page .woocommerce-MyAccount-content .woocommerce-info .button {
    flex-shrink: 0;
}

/* Account dashboard intro */
.msp-account-hero {
    background: linear-gradient(135deg, rgba(124,107,255,0.08), rgba(224,79,200,0.08));
    border: 1px solid var(--msp-line);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}
.msp-account-hero .msp-eyebrow { color: var(--msp-accent); }
.msp-account-hero h1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(1.6rem, 2vw + 0.5rem, 2.2rem);
    margin: 8px 0 4px;
    color: var(--msp-ink);
}
.msp-account-hero p { margin: 0; color: var(--msp-ink-soft); }

/* Quick action tiles on the dashboard */
.msp-account-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
}
@media (min-width: 600px) {
    .msp-account-tiles { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
.msp-account-tiles a {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px;
    border: 1px solid var(--msp-line);
    border-radius: 14px;
    text-decoration: none;
    color: var(--msp-ink) !important;
    background: var(--msp-surface);
    transition: border-color 0.2s, transform 0.2s;
    font-weight: 600;
}
.msp-account-tiles a:hover { border-color: var(--msp-ink); transform: translateY(-1px); }
.msp-account-tiles a span { color: var(--msp-ink-soft); font-size: 12px; font-weight: 500; }
.msp-account-tiles a .msp-tile-icon { color: var(--msp-accent); margin-bottom: 4px; }

/* Orders table on account page */
.msp-wc-page .woocommerce-orders-table {
    border: 1px solid var(--msp-line);
    border-radius: 14px;
    overflow: hidden;
}
.msp-wc-page .woocommerce-orders-table .button {
    padding: 8px 16px;
    font-size: 12px;
}
.msp-wc-page .woocommerce-Address {
    background: var(--msp-bg);
    border: 1px solid var(--msp-line);
    border-radius: 14px;
    padding: 20px;
    margin-top: 12px;
}
.msp-wc-page .woocommerce-Address-title {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 10px;
}
.msp-wc-page .woocommerce-Address-title h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    margin: 0;
}

/* Login form (myaccount) */
.msp-wc-page .u-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}
@media (min-width: 800px) {
    .msp-wc-page .u-columns { grid-template-columns: 1fr 1fr; gap: 36px; }
}
.msp-wc-page .u-column1 form,
.msp-wc-page .u-column2 form {
    background: var(--msp-surface);
    border: 1px solid var(--msp-line);
    border-radius: 16px;
    padding: 28px;
}
.msp-wc-page .u-column1 h2,
.msp-wc-page .u-column2 h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    margin: 0 0 18px;
    font-size: 22px;
}


/* ╭──────────────────────────────────────────────────────────────────────╮
   │ Misc + mobile polish                                                 │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.msp-wc-page .widget_shopping_cart_content { display: none; }
.msp-wc-page .return-to-shop { margin-top: 24px; }

/* Tighter spacing on small screens for the main shell */
@media (max-width: 640px) {
    .msp-wc-page #customer_details { padding: 22px; }
    .msp-wc-page #order_review { padding: 22px; position: static; }
    .msp-wc-page .cart_totals { padding: 22px; }
    .msp-wc-page table.shop_table th,
    .msp-wc-page table.shop_table td { padding: 12px; font-size: 13px; }
    .msp-wc-page .cart_item .product-thumbnail img { width: 56px; height: 56px; }
    .msp-wc-page .msp-card { padding: 22px; }
    .msp-wc-page .msp-card-dark { padding: 22px; }
}