/* =========================================================================
   modual Portal Theme — Extended Component Styles
   ========================================================================= */

/* =========================================================================
   Site Header
   ========================================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-height);
    background: var(--white);
    box-shadow: 0 1px 0 var(--border-1);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    gap: var(--sp-5);
}

.site-header__divider {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--yellow);
}

/* Logo */
.site-logo img,
.site-header .custom-logo {
    height: 36px;
    width: auto;
    display: block;
}
.site-logo,
.site-header a.custom-logo-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* Nav */
.site-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.site-nav__list a {
    display: block;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    color: var(--fg-2);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}

.site-nav__list a:hover {
    color: var(--blue);
    background: var(--blue-50);
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
    color: var(--blue);
    font-weight: var(--weight-semi);
}

/* Header actions */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.site-header__user-name {
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    color: var(--fg-2);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hamburger toggle */
.site-header__nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 8px;
}

.nav-toggle__bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--grey-700);
    border-radius: 1px;
    transition: transform var(--dur-state) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}

.site-header__nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-header__nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}
.site-header__nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================================
   Site Footer
   ========================================================================= */
.site-footer {
    background: var(--grey-900);
    color: var(--fg-on-dark);
    padding: var(--sp-7) 0 var(--sp-6);
    margin-top: auto;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--sp-8);
}

.site-footer__logo-link {
    display: inline-block;
    text-decoration: none;
}

.site-footer__tagline {
    color: var(--grey-300);
    margin-top: var(--sp-2);
}

.site-footer__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--sp-5);
}

.site-footer__nav-list a {
    font-size: var(--fs-small);
    color: var(--grey-300);
    text-decoration: none;
    transition: color var(--dur-micro) var(--ease-out);
}
.site-footer__nav-list a:hover { color: var(--white); }

.site-footer__meta p {
    color: var(--grey-500);
    white-space: nowrap;
}

/* =========================================================================
   Page content
   ========================================================================= */
.page-content {
    padding: var(--sp-9) var(--sp-5);
}

.tmpl-fullwidth {
    width: 100%;
}

.fullwidth-page .entry-content,
.fullwidth-page > * {
    width: 100%;
}

/* =========================================================================
   Fallback nav (when no menu assigned)
   ========================================================================= */
.site-nav--fallback {
    display: flex;
    gap: var(--sp-2);
}

.site-nav--fallback a {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    color: var(--fg-2);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: color var(--dur-micro) var(--ease-out);
}
.site-nav--fallback a:hover { color: var(--blue); }

/* =========================================================================
   Portal page header band (above shortcode content)
   ========================================================================= */
.portal-page-header {
    background: var(--bg-2);
    border-bottom: 1px solid var(--border-1);
    padding: var(--sp-5) 0;
}

.portal-page-header__inner {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
}

.portal-page-header__eyebrow {
    color: var(--blue);
}

.portal-page-header h1 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
}

/* =========================================================================
   Login / registration page — centered card layout
   ========================================================================= */
.portal-auth-wrap {
    min-height: calc(100vh - var(--header-height) - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-9) var(--sp-5);
    background: var(--bg-2);
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
        text-align: center;
    }
    .site-footer__nav-list {
        justify-content: center;
        flex-wrap: wrap;
    }
    .site-footer__meta { text-align: center; }
}

@media (max-width: 768px) {
    :root {
        --fs-h1: 36px;
        --fs-h2: 28px;
        --container-pad: var(--sp-4);
    }

    .site-header__nav-toggle {
        display: flex;
    }

    .site-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--white);
        border-bottom: 1px solid var(--border-1);
        padding: var(--sp-4);
        display: none;
        z-index: 99;
        box-shadow: var(--shadow-2);
    }

    .site-nav.is-open {
        display: block;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-1);
    }

    .site-nav__list a {
        padding: var(--sp-3) var(--sp-4);
    }

    .site-header__user-name {
        display: none;
    }
}

@media (max-width: 480px) {
    .site-header__actions .btn--sm {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* =========================================================================
   Accessibility
   ========================================================================= */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 999;
    padding: var(--sp-3) var(--sp-5);
    background: var(--blue);
    color: var(--white);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: top var(--dur-micro);
}
.skip-link:focus { top: 0; }

/* =========================================================================
   WordPress core alignments
   ========================================================================= */
.alignleft  { float: left; margin-right: var(--sp-5); }
.alignright { float: right; margin-left: var(--sp-5); }
.aligncenter { margin: 0 auto; display: block; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--fs-small); color: var(--fg-3); margin-top: var(--sp-2); }

/* =========================================================================
   Header — Cart icon + count
   ========================================================================= */
.site-header__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--fg-2);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}
.site-header__cart:hover {
    color: var(--blue);
    background: var(--blue-50);
}
.site-header__cart svg {
    display: block;
    flex-shrink: 0;
}

.site-header__cart-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--grey-200);
    color: var(--grey-700);
    font-size: 10px;
    font-weight: var(--weight-bold);
    line-height: 16px;
    text-align: center;
    border-radius: var(--radius-pill);
    transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.site-header__cart-count.has-items {
    background: var(--blue);
    color: var(--white);
}

/* user-name as link */
.site-header__user-name {
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    color: var(--fg-2);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--dur-micro) var(--ease-out);
}
.site-header__user-name:hover { color: var(--blue); }

/* =========================================================================
   WooCommerce — Portal layout
   ========================================================================= */
.wc-page-outer {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-9);
}

.wc-content-wrap {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
    box-sizing: border-box;
}

/* Single-product, shop archive and my-account get wider canvas */
.single-product .wc-content-wrap,
.woocommerce-account .wc-content-wrap,
.post-type-archive-product .wc-content-wrap {
    max-width: 1200px;
}

/* Breadcrumb */
.woocommerce-breadcrumb {
    font-size: var(--fs-small);
    color: var(--fg-3);
    margin-bottom: var(--sp-5);
}
.woocommerce-breadcrumb a {
    color: var(--fg-3);
    text-decoration: none;
}
.woocommerce-breadcrumb a:hover { color: var(--blue); }

/* Notices. WooCommerce core wraps notices in <ul> with .button floated
   right and a ::before icon using a dashicon; we neutralise all of that
   so the notice reads as a single clean row. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
.woocommerce p.no-comments {
    position: relative;
    border: 1px solid var(--border-1);
    border-left: 4px solid var(--blue);
    background: var(--blue-50);
    padding: var(--sp-4) var(--sp-5);
    margin: 0 0 var(--sp-5);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--fs-body);
    color: var(--fg-1);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    line-height: 1.5;
    min-height: 48px;
}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    content: none !important;
    display: none !important;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    margin-left: auto;
    float: none;
}
.woocommerce-error {
    border-left-color: #d9534f;
    background: #fff5f5;
}
.woocommerce-message {
    border-left-color: #2e7d32;
    background: #f1f8f3;
}

/* Cart table */
.woocommerce table.shop_table {
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: var(--fs-body);
    overflow: hidden;
    background: var(--white);
}
.woocommerce table.shop_table th {
    background: var(--grey-50);
    padding: var(--sp-3) var(--sp-4);
    font-weight: var(--weight-medium);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--fg-3);
    border-bottom: 1px solid var(--border-1);
    text-align: left;
}
.woocommerce table.shop_table td {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border-1);
    vertical-align: middle;
    color: var(--fg-1);
}
.woocommerce table.shop_table tr:last-child td {
    border-bottom: 0;
}

/* Product thumbnail cell. Note: many Modual products are rendered on
   white BG; we give the thumbnail wrapper grey-50 so the contour stays
   visible even for fully-white product photos. */
.woocommerce table.shop_table td.product-thumbnail { width: 88px; }
.woocommerce table.shop_table td.product-thumbnail a {
    display: inline-block;
    background: var(--grey-50);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    padding: var(--sp-1);
    line-height: 0;
}
.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce table.shop_table td.product-thumbnail a img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 2px;
    display: block;
    background: transparent;
    border: 0;
}

/* Product name link */
.woocommerce table.shop_table td.product-name a {
    color: var(--fg-1);
    text-decoration: none;
    font-weight: var(--weight-medium);
    transition: color var(--dur-micro) var(--ease-out);
}
.woocommerce table.shop_table td.product-name a:hover { color: var(--blue); }

/* Remove button (×) */
.woocommerce table.shop_table td.product-remove { width: 48px; text-align: center; }
.woocommerce a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--grey-500) !important;
    font-size: 18px;
    line-height: 1;
    font-weight: var(--weight-regular);
    text-decoration: none;
    transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.woocommerce a.remove:hover {
    background: var(--grey-100);
    color: #d9534f !important;
}

/* Quantity input */
.woocommerce table.shop_table td.product-quantity { width: 96px; }
.woocommerce .quantity .qty,
.woocommerce table.shop_table input.qty {
    width: 64px;
    height: 40px;
    padding: 0 var(--sp-2);
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--weight-medium);
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    color: var(--fg-1);
    transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.woocommerce .quantity .qty:focus,
.woocommerce table.shop_table input.qty:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: var(--shadow-focus);
}

/* Actions row (Update cart, coupon) */
.woocommerce table.shop_table td.actions {
    background: transparent;
    padding: var(--sp-4);
    border-top: 1px solid var(--border-1);
}
.woocommerce table.shop_table td.actions .coupon {
    float: none;
    display: inline-flex;
    gap: var(--sp-2);
    margin-right: auto;
}
.woocommerce table.shop_table td.actions .coupon input.input-text {
    width: 180px;
    height: 40px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
}
.woocommerce table.shop_table td.actions .coupon button { height: 40px; }
.woocommerce table.shop_table td.actions > button[name="update_cart"],
.woocommerce table.shop_table td.actions > input[name="update_cart"] {
    float: right;
    height: 40px;
}

/* Right-align numeric columns, tabular digits so CHF amounts stack
   perfectly. */
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table th.product-price,
.woocommerce table.shop_table th.product-subtotal {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.woocommerce table.shop_table td.product-quantity,
.woocommerce table.shop_table th.product-quantity {
    text-align: center;
}

/* Cart totals + checkout */
.woocommerce-cart-form,
.woocommerce-checkout,
#order_review {
    max-width: 100%;
}

/* Cart collaterals — single-column stack.

   Layout decision: rather than a 2-column side-by-side, we stack the
   totals directly under the product table (visually merged into one clean
   summary table) and push the installer-picker card to the bottom so the
   core financials stay above the fold.

   DOM order is not guaranteed (WooCommerce emits cross-sells + cart_totals;
   our configurator injects #mc-checkout-installer-wrap as first child), so
   we use `order:` on a flex column to control visual order. */
.woocommerce .cart-collaterals {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    margin-top: 0;
    max-width: 100%;
}
.woocommerce .cart-collaterals .cart_totals        { order: 1; }
.woocommerce .cart-collaterals .cross-sells        { order: 2; }
.woocommerce .cart-collaterals #mc-checkout-installer-wrap { order: 3; }

.woocommerce .cart-collaterals .cross-sells:empty,
.woocommerce .cart-collaterals .shipping-calculator-form:empty { display: none; }

/* Totals styled as direct continuation of the product shop_table above:
   same width, same border, zero rounding on top, zero top border so the
   two tables visually read as one cohesive summary. */
.woocommerce-cart .woocommerce-cart-form {
    margin-bottom: 0;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
}
.woocommerce-cart .cart_totals {
    margin-top: 0;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--border-1);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: hidden;
}
.woocommerce-cart .cart_totals h2 {
    display: none; /* header now carried by the shop_table above */
}
.woocommerce-cart .cart_totals table.shop_table {
    border: 0;
    border-radius: 0;
    background: transparent;
    margin: 0;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
    background: transparent;
    border-bottom: 1px solid var(--border-1);
    padding: var(--sp-4);
    vertical-align: middle;
}
.woocommerce-cart .cart_totals table.shop_table th {
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    color: var(--fg-2);
    text-transform: none;
    letter-spacing: 0;
    width: 60%;
}
.woocommerce-cart .cart_totals table.shop_table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
}
.woocommerce-cart .cart_totals table.shop_table tr:last-child th,
.woocommerce-cart .cart_totals table.shop_table tr:last-child td {
    border-bottom: 0;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    background: var(--grey-50);
    font-weight: var(--weight-semi);
    font-size: var(--fs-body-lg);
    color: var(--fg-1);
    border-top: 2px solid var(--blue);
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
}
.woocommerce-cart .cart_totals .order-total td {
    font-size: var(--fs-h4);
    font-weight: var(--weight-semi);
}

/* Non-cart cart_totals (e.g. cart totals shown elsewhere) retain a
   standalone card look. */
.woocommerce:not(.woocommerce-cart) .cart_totals,
.woocommerce-checkout #order_review_heading {
    background: var(--grey-50);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
}
.woocommerce:not(.woocommerce-cart) .cart_totals h2,
.woocommerce-checkout h3 {
    font-size: var(--fs-h4);
    font-weight: var(--weight-medium);
    margin-bottom: var(--sp-4);
}

/* Checkout proceed wrapper — primary CTA inside the merged totals table */
.woocommerce-cart .wc-proceed-to-checkout {
    padding: var(--sp-5);
    margin: 0;
    background: var(--white);
    border-top: 1px solid var(--border-1);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    width: 100%;
    padding: 14px 22px;
    font-size: var(--fs-body-lg);
}

/* Installer-picker card (injected by modual-wp-configurator) */
#mc-checkout-installer-wrap {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
}
#mc-checkout-installer-wrap h3,
#mc-checkout-installer-wrap .mc-installer-picker-title {
    font-size: var(--fs-h4);
    font-weight: var(--weight-medium);
    margin: 0 0 var(--sp-2);
    color: var(--fg-1);
}
#mc-checkout-installer-wrap p {
    color: var(--fg-2);
    font-size: var(--fs-small);
    margin: 0 0 var(--sp-4);
}
#mc-checkout-installer-wrap .mc-cart-plz-row,
#mc-checkout-installer-wrap form,
#mc-checkout-installer-wrap .mc-installer-plz {
    display: flex;
    gap: var(--sp-3);
    align-items: stretch;
}
#mc-checkout-installer-wrap input[type="text"],
#mc-checkout-installer-wrap input[type="number"],
#mc-checkout-installer-wrap input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 220px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 var(--sp-3);
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--fg-1);
    transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
#mc-checkout-installer-wrap input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: var(--shadow-focus);
}
#mc-checkout-installer-wrap button,
#mc-checkout-installer-wrap .button {
    height: 40px;
    box-sizing: border-box;
    padding: 0 var(--sp-4);
    background: var(--blue);
    color: var(--white);
    border: 0;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--weight-medium);
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-micro) var(--ease-out);
}
#mc-checkout-installer-wrap button:hover { background: var(--blue-700); }
#mc-checkout-installer-wrap ul,
#mc-checkout-installer-wrap .mc-installer-results {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    border-top: 1px solid var(--border-1);
}
#mc-checkout-installer-wrap li,
#mc-checkout-installer-wrap .mc-installer-result-item {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-1);
    transition: background var(--dur-micro) var(--ease-out);
}
#mc-checkout-installer-wrap li:hover,
#mc-checkout-installer-wrap .mc-installer-result-item:hover {
    background: var(--grey-50);
}

/* WC buttons → use theme style. Primary CTA is Electric Blue per brand
   guideline; Yellow is reserved for accents (badges, savings, warnings). */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
#place_order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    background: var(--blue);
    color: var(--white) !important;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--weight-medium);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
    line-height: 1;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
#place_order:hover {
    background: var(--blue-700);
}

/* Secondary / ghost button (Update cart, Apply coupon) */
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"],
.woocommerce button[name="apply_coupon"],
.woocommerce input[name="apply_coupon"] {
    background: var(--white);
    color: var(--fg-1) !important;
    border: 1px solid var(--border-2);
}
.woocommerce button[name="update_cart"]:hover:not([disabled]),
.woocommerce input[name="update_cart"]:hover:not([disabled]),
.woocommerce button[name="apply_coupon"]:hover:not([disabled]),
.woocommerce input[name="apply_coupon"]:hover:not([disabled]) {
    background: var(--grey-50);
    border-color: var(--grey-700);
}

/* Disabled state — ensure disabled buttons do not render as washed-out
   colour (WC default is aria-disabled with 0.5 opacity which looks
   broken). */
.woocommerce a.button[disabled],
.woocommerce a.button.disabled,
.woocommerce button.button[disabled],
.woocommerce input.button[disabled] {
    background: var(--grey-100) !important;
    color: var(--grey-500) !important;
    border-color: var(--border-1);
    cursor: not-allowed;
    opacity: 1;
}
.woocommerce a.button[disabled]:hover,
.woocommerce button.button[disabled]:hover,
.woocommerce input.button[disabled]:hover {
    background: var(--grey-100) !important;
    color: var(--grey-500) !important;
}

/* WC form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--fg-1);
    width: 100%;
    transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.woocommerce form .form-row textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--blue);
    box-shadow: var(--shadow-focus);
    outline: none;
}
.woocommerce form .form-row label {
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    color: var(--fg-2);
    margin-bottom: var(--sp-2);
    display: block;
}

/* =========================================================================
   Checkout layout — 2-column grid

   WC DOM (all direct children of form.checkout):
     #customer_details   → col 1, spans all rows
     #order_review_heading → col 2, row 1
     #order_review         → col 2, row 2

   We assign row 1 / row 1+N explicitly so both right-col elements
   stack tightly in column 2 while customer_details fills col 1.
   The right column gets a sticky wrapper via position:sticky on the
   first right-col element.
   ========================================================================= */
.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    grid-template-rows: auto 1fr;
    column-gap: var(--sp-6);
    row-gap: 0;
    align-items: start;
}
.woocommerce-checkout form.checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 3;
}
.woocommerce-checkout form.checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-height) + var(--sp-5));
}
.woocommerce-checkout form.checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: calc(var(--header-height) + var(--sp-5) + 52px);
}
@media (max-width: 900px) {
    .woocommerce-checkout form.checkout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .woocommerce-checkout form.checkout #customer_details {
        grid-column: 1;
        grid-row: auto;
    }
    .woocommerce-checkout form.checkout #order_review_heading,
    .woocommerce-checkout form.checkout #order_review {
        grid-column: 1;
        grid-row: auto;
        position: static;
    }
}

.woocommerce-checkout #customer_details {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
}
.woocommerce-checkout #customer_details h3 {
    font-size: var(--fs-h4);
    font-weight: var(--weight-medium);
    margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-1);
}
.woocommerce-checkout #order_review {
    background: var(--grey-50);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
}
.woocommerce-checkout #order_review_heading {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 var(--sp-4);
}
.woocommerce-checkout #payment {
    background: transparent;
    margin-top: var(--sp-4);
}
.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--border-1);
    padding: 0 0 var(--sp-3);
    margin: 0 0 var(--sp-4);
}
.woocommerce-checkout #payment ul.payment_methods li {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-2);
    list-style: none;
}
.woocommerce-checkout #payment div.payment_box {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    margin: var(--sp-2) 0 0;
    padding: var(--sp-3) var(--sp-4);
    color: var(--fg-2);
    font-size: var(--fs-small);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #place_order {
    display: block;
    width: 100%;
    padding: 14px 22px;
    font-size: var(--fs-body-lg);
    margin-top: var(--sp-4);
}

/* =========================================================================
   Order received / Thank-you
   ========================================================================= */
.woocommerce-order {
    max-width: 800px;
    margin: 0 auto;
}
.woocommerce-order-received h1,
.woocommerce-thankyou-order-received {
    font-size: var(--fs-h2);
    font-weight: var(--weight-light);
    margin-bottom: var(--sp-5);
    letter-spacing: var(--tr-h2);
}
.woocommerce-order p.woocommerce-notice,
.woocommerce-order p.woocommerce-thankyou-order-received {
    font-size: var(--fs-body-lg);
    color: var(--fg-2);
    margin-bottom: var(--sp-6);
}
.woocommerce-order ul.woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    list-style: none;
    margin: 0 0 var(--sp-7);
    padding: var(--sp-5);
    background: var(--grey-50);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    text-transform: none;
}
.woocommerce-order ul.woocommerce-order-overview li {
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--fg-3);
    border-bottom: 0;
    padding: 0 var(--sp-4);
    border-right: 1px solid var(--border-1);
}
.woocommerce-order ul.woocommerce-order-overview li:last-child { border-right: 0; }
.woocommerce-order ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-body);
    font-weight: var(--weight-medium);
    color: var(--fg-1);
    text-transform: none;
    letter-spacing: 0;
}
.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    font-size: var(--fs-h3);
    font-weight: var(--weight-light);
    margin: 0 0 var(--sp-4);
}
.woocommerce-order-details,
.woocommerce-customer-details {
    margin-bottom: var(--sp-7);
}
.woocommerce-order-details table.shop_table,
.woocommerce-customer-details address {
    margin: 0;
}
.woocommerce-customer-details address {
    padding: var(--sp-5);
    background: var(--grey-50);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    font-style: normal;
    line-height: 1.6;
}

/* =========================================================================
   My Account — sidebar nav (left) + content (right)
   ========================================================================= */
.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
}
.woocommerce-MyAccount-navigation {
    margin: 0;
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
}
.woocommerce-MyAccount-navigation ul li { margin: 0; }
.woocommerce-MyAccount-navigation ul li + li {
    border-top: 1px solid var(--border-1);
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-body);
    font-weight: var(--weight-regular);
    color: var(--fg-2);
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    text-decoration: none;
    transition: color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--blue);
    background: var(--grey-50);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--fg-1);
    background: var(--blue-50);
    border-left-color: var(--blue);
    font-weight: var(--weight-medium);
}
.woocommerce-MyAccount-content {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
}
.woocommerce-MyAccount-content > :first-child { margin-top: 0; }

@media (max-width: 900px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
    }
    .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
    }
}

/* =========================================================================
   Configurator iFrame — WC in iframe (full-viewport, no portal chrome)
   ========================================================================= */
.is-iframe .wc-content-wrap {
    padding: var(--sp-5);
    max-width: 820px;
    margin: 0 auto;
}

.is-iframe .woocommerce-breadcrumb { display: none; }

.is-iframe .woocommerce-cart-form,
.is-iframe .cart-collaterals {
    margin-bottom: var(--sp-5);
}

/* =========================================================================
   Responsive — WC
   ========================================================================= */
@media (max-width: 768px) {
    .woocommerce table.shop_table td,
    .woocommerce table.shop_table th {
        padding: var(--sp-2) var(--sp-3);
    }
    .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
    }
}

/* =========================================================================
   WooCommerce — Single Product Page
   ========================================================================= */

/* -----------------------------------------------------------------------
   Single Product Layout
   Controlled via template override:
   woocommerce/content-single-product.php → .mc-product-layout wrapper.
   The gallery column gives flexslider a stable block context to initialise
   against, avoiding the image-below-summary rendering bug.
   ----------------------------------------------------------------------- */

.mc-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 55%) minmax(0, 1fr);
    column-gap: var(--sp-8);
    align-items: start;
    padding: var(--sp-7) 0 0;
}

.mc-product-col {
    min-width: 0;
}

/* Gallery: tell WC the container width so flexslider measures correctly */
.mc-product-col--gallery .woocommerce-product-gallery,
.mc-product-col--gallery div.images {
    width: 100% !important;
    float: none !important;
    margin-bottom: 0;
}

/* Summary: flex column with consistent spacing */
.mc-product-col--summary .entry-summary {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    float: none !important;
    width: auto !important;
    padding-left: 0;
    margin-bottom: 0;
}

.mc-product-col--summary .entry-summary > * {
    margin: 0;
}

/* Below the two columns: tabs, related, upsells */
.mc-product-full {
    padding-bottom: var(--sp-9);
}

/* Keep WC div.product as neutral container (not a grid itself) */
.woocommerce div.product {
    padding: 0;
}

/* Product title */
.woocommerce div.product .product_title {
    font-family: var(--font-display);
    font-weight: var(--weight-light);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--tr-h2);
    color: var(--fg-1);
    margin: 0 0 var(--sp-2);
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: var(--fs-h3);
    font-weight: var(--weight-medium);
    color: var(--fg-1);
    line-height: 1.2;
}

.woocommerce div.product p.price .woocommerce-Price-amount,
.woocommerce div.product span.price .woocommerce-Price-amount {
    color: var(--fg-1);
}

.woocommerce div.product p.price bdi,
.woocommerce div.product span.price bdi {
    white-space: nowrap;
    font-weight: var(--weight-semi);
}

.woocommerce div.product p.price .woocommerce-Price-currencySymbol {
    font-size: 0.75em;
    font-weight: var(--weight-medium);
    margin-right: 3px;
    vertical-align: baseline;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--fg-2);
}

.woocommerce div.product .woocommerce-product-details__short-description p {
    margin: 0;
}

/* Stock / availability */
.woocommerce div.product .stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--grey-100);
    color: var(--grey-700);
    width: fit-content;
}

.woocommerce div.product .in-stock {
    background: #e8f5e9;
    color: #2e7d32;
}

.woocommerce div.product .available-on-backorder {
    background: var(--yellow-50);
    color: var(--grey-800);
    border: 1px solid var(--yellow-300);
}

.woocommerce div.product .out-of-stock {
    background: #fff5f5;
    color: #c62828;
}

/* Add to cart form */
.woocommerce div.product form.cart {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

/* Quantity input */
.woocommerce div.product form.cart .quantity {
    display: flex;
    align-items: center;
}

.woocommerce div.product form.cart input.qty {
    width: 72px;
    height: 48px;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--weight-medium);
    color: var(--fg-1);
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    text-align: center;
    transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}

.woocommerce div.product form.cart input.qty:focus {
    border-color: var(--blue);
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* Primary CTA — Add to cart. Electric Blue per brand guideline (Yellow
   reserved for accents only). */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .button.single_add_to_cart_button {
    height: 48px;
    padding: 0 var(--sp-6);
    background: var(--blue) !important;
    color: var(--white) !important;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--weight-medium);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-micro) var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
    background: var(--blue-700) !important;
}

/* Product meta (categories, tags) */
.woocommerce div.product .product_meta {
    font-size: var(--fs-small);
    color: var(--fg-3);
    border-top: 1px solid var(--border-1);
    padding-top: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.woocommerce div.product .product_meta span {
    display: block;
}

.woocommerce div.product .product_meta span > span,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as {
    color: var(--fg-3);
    font-size: var(--fs-small);
}

.woocommerce div.product .product_meta a {
    color: var(--blue);
    text-decoration: none;
}

.woocommerce div.product .product_meta a:hover {
    color: var(--blue-700);
    text-decoration: underline;
}

/* Gallery */
.woocommerce div.product div.images {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.woocommerce div.product div.images img {
    border-radius: var(--radius-md);
    display: block;
}

.woocommerce-product-gallery__trigger {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: opacity var(--dur-micro);
}

.woocommerce-product-gallery__trigger:hover {
    opacity: 1;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs {
    margin-top: var(--sp-7);
    border-top: 1px solid var(--border-1);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--border-1);
    background: transparent;
    overflow: visible;
}

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

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    color: var(--fg-3);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color var(--dur-micro), border-color var(--dur-micro);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--fg-1);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--fg-1);
    font-weight: var(--weight-semi);
    border-bottom-color: var(--blue);
}

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: var(--sp-6) 0;
    border: none;
    background: transparent;
}

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
    font-size: var(--fs-h3);
    font-weight: var(--weight-light);
    margin-bottom: var(--sp-5);
}

/* Responsive — single product */
@media (max-width: 768px) {
    .mc-product-layout {
        grid-template-columns: 1fr;
        padding-top: var(--sp-5);
    }

    .woocommerce div.product .product_title {
        font-size: var(--fs-h3);
    }

    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: var(--fs-h4);
    }

    .woocommerce div.product form.cart button.single_add_to_cart_button {
        width: 100%;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: var(--sp-3) var(--sp-3);
        font-size: var(--fs-eyebrow);
    }
}

/* =========================================================================
   WooCommerce — Shop / Product Archive
   ========================================================================= */

/* Archive header bar */
.woocommerce .woocommerce-products-header {
    margin-bottom: var(--sp-5);
}

.woocommerce .woocommerce-products-header__title {
    font-size: var(--fs-h2);
    font-weight: var(--weight-light);
    margin-bottom: var(--sp-2);
}

.woocommerce p.woocommerce-result-count {
    font-size: var(--fs-small);
    color: var(--fg-3);
    margin: 0;
}

.woocommerce form.woocommerce-ordering select {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--fg-2);
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    cursor: pointer;
}

/* Product grid */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    list-style: none;
    margin: var(--sp-6) 0 0 !important;
    padding: 0;
    float: none !important;
    clear: both;
}

.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* WooCommerce clearfix pseudo-elements become ghost grid items — suppress them */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

/* Product card */
.woocommerce ul.products li.product {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out);
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product:hover {
    border-color: var(--grey-300);
    box-shadow: var(--shadow-2);
}

/* Card image */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a:first-child {
    display: block;
    text-decoration: none;
}

.woocommerce ul.products li.product img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    display: block;
    background: var(--grey-50);
    padding: var(--sp-4);
    transition: transform var(--dur-state) var(--ease-out);
}

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

/* Card body */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--weight-medium);
    color: var(--fg-1);
    margin: 0;
    padding: var(--sp-4) var(--sp-4) var(--sp-2);
    line-height: var(--lh-body);
}

.woocommerce ul.products li.product .price {
    font-size: var(--fs-small);
    font-weight: var(--weight-semi);
    color: var(--fg-1);
    padding: 0 var(--sp-4) var(--sp-4);
    margin: 0;
    line-height: 1.3;
}

.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol {
    font-size: 0.8em;
    font-weight: var(--weight-medium);
}

/* Sale badge */
.woocommerce ul.products li.product .onsale {
    background: var(--yellow);
    color: var(--grey-900);
    font-size: var(--fs-eyebrow);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    top: var(--sp-3);
    left: var(--sp-3);
}

/* Card add-to-cart button */
.woocommerce ul.products li.product .button {
    display: block;
    margin: auto var(--sp-4) var(--sp-4);
    padding: 10px var(--sp-4);
    background: var(--grey-900);
    color: var(--white) !important;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    border: none;
    border-radius: var(--radius-sm);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-micro) var(--ease-out);
}

.woocommerce ul.products li.product .button:hover {
    background: var(--grey-800);
}

.woocommerce ul.products li.product .button.added::after {
    content: ' ✓';
}

/* No products notice */
.woocommerce .woocommerce-info {
    border-left: 4px solid var(--yellow);
    background: var(--yellow-50);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    gap: var(--sp-2);
    list-style: none;
    padding: 0;
    margin: var(--sp-7) 0 0;
    justify-content: center;
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    color: var(--fg-2);
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: border-color var(--dur-micro), color var(--dur-micro);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    border-color: var(--grey-700);
    color: var(--fg-1);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--grey-900);
    color: var(--white);
    border-color: var(--grey-900);
}

/* Responsive — shop archive */
@media (max-width: 900px) {
    .woocommerce ul.products,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================================================
   Single-product — delivery-time badge (injected by bridge @ priority 29)
   ========================================================================= */
.mc-delivery-time-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-4) 0;
    padding: var(--sp-2) var(--sp-4);
    background: var(--blue-50);
    border: 1px solid var(--blue-200, var(--border-1));
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    color: var(--blue-700);
    line-height: 1;
}
.mc-delivery-time-badge__label {
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    font-weight: var(--weight-semi);
    color: var(--blue);
}
.mc-delivery-time-badge__value {
    font-weight: var(--weight-medium);
    color: var(--fg-1);
}

/* =========================================================================
   Checkout progress breadcrumb (rendered by theme PHP on cart/checkout
   pages via modual_portal_checkout_progress())
   ========================================================================= */
.mc-checkout-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin: 0 auto var(--sp-6);
    padding: 0;
    list-style: none;
    font-size: var(--fs-small);
    color: var(--fg-3);
}
.mc-checkout-progress__step {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--fg-3);
}
.mc-checkout-progress__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--grey-100);
    color: var(--fg-3);
    font-size: var(--fs-eyebrow);
    font-weight: var(--weight-semi);
}
.mc-checkout-progress__step.is-current .mc-checkout-progress__step-num {
    background: var(--blue);
    color: var(--white);
}
.mc-checkout-progress__step.is-current {
    color: var(--fg-1);
    font-weight: var(--weight-medium);
}
.mc-checkout-progress__step.is-done .mc-checkout-progress__step-num {
    background: var(--blue-100, var(--blue-50));
    color: var(--blue);
}
.mc-checkout-progress__step.is-done { color: var(--fg-2); }
.mc-checkout-progress__sep {
    width: 32px;
    height: 1px;
    background: var(--border-2);
}

/* =========================================================================
   Sticky mobile checkout CTA — cart page only, only below 900px
   ========================================================================= */
@media (max-width: 900px) {
    .woocommerce-cart .wc-proceed-to-checkout {
        position: sticky;
        bottom: 0;
        background: var(--white);
        border-top: 1px solid var(--border-2);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
        z-index: 10;
    }
}

/* Header — user-bar balance: Anmelden/Abmelden share identical visual
   weight as secondary-ghost buttons. No override needed beyond the
   btn--secondary utility class. */

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