/*
 * WooCommerce custom styles — ThisIsE theme
 * Loaded only on WooCommerce pages via functions.php
 */

/* ═══════════════════════════════════════════════════════
   SHOP TOP BAR (filter pills + sort — one clean row)
═══════════════════════════════════════════════════════ */

.shop-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

/* ── Sort control inside topbar ── */
/* ── Custom sort dropdown (.shop-sort) ─────────────────
   Replaces the native <select>. Styled to match the filter pills. */
.shop-sort {
    position: relative;
    display: inline-block;
}

.shop-sort__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 16px;
    border: none;
    border-radius: 100px;
    background: color-mix(in srgb, var(--text) 7%, var(--bg));
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    outline: none;
    transition: background 0.15s ease;
}

.shop-sort__trigger:hover {
    background: color-mix(in srgb, var(--text) 12%, var(--bg));
}

.shop-sort__trigger:focus-visible {
    box-shadow: 0 0 0 2px var(--text);
}

.shop-sort__value {
    line-height: 1;
}

.shop-sort__chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.shop-sort[data-open="true"] .shop-sort__chevron {
    transform: rotate(180deg);
}

.shop-sort__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 100;
}

.shop-sort[data-open="true"] .shop-sort__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.shop-sort__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.12s ease;
    white-space: nowrap;
}

.shop-sort__item:hover,
.shop-sort__item:focus-visible {
    background: color-mix(in srgb, var(--text) 5%, var(--bg));
    outline: none;
}

.shop-sort__item.is-active {
    color: var(--accent);
    font-weight: 600;
}

.shop-sort__check {
    color: var(--accent);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   CATEGORY FILTER TABS
═══════════════════════════════════════════════════════ */

.shop-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: none;
}

.shop-filter__btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    line-height: 1;
    text-decoration: none;  /* in case rendered as <a> */
}

.shop-filter__btn:hover {
    border-color: var(--text);
    color: var(--text);
}

.shop-filter__btn.active {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}

/* ═══════════════════════════════════════════════════════
   PRODUCTS GRID
═══════════════════════════════════════════════════════ */

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 64px;
}

.products-grid--home {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* ═══════════════════════════════════════════════════════
   PRODUCT CARD — styles live in style.css (unified system)
   Only WooCommerce-specific overrides here.
═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   SINGLE PRODUCT
═══════════════════════════════════════════════════════ */

.single-product-page .woocommerce-notices-wrapper {
    margin-bottom: 0;
}

/* ── Grid layout ── */
.woocommerce div.product {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 0;
    padding: 24px 0 clamp(32px, 4vw, 56px);
    align-items: start;
}

@media (max-width: 860px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 24px;
    }
}

@media (max-width: 600px) {
    .woocommerce div.product {
        padding-top: 12px;  /* tighter gap between breadcrumb and gallery on mobile */
    }
}

/* ── Breadcrumb — soft-fill pill with home icon + chevrons ── */
.woocommerce-breadcrumb {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: none;
    border-radius: 999px;
    /* Soft fill that adapts to light/dark via var(--text). No hairline
       so the site doesn't feel over-stroked. */
    background: color-mix(in srgb, var(--text) 5%, var(--bg));
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    margin: 12px 0 20px;
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
}

.woocommerce-breadcrumb .bc-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.woocommerce-breadcrumb a {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.woocommerce-breadcrumb a:hover {
    color: var(--text);
}

.woocommerce-breadcrumb .bc-home-icon {
    display: block;
}

.woocommerce-breadcrumb .bc-sep {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    opacity: 0.5;
    flex-shrink: 0;
}

.woocommerce-breadcrumb .bc-current {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Mobile: full-width pill, breathing room above so it's not kissing the nav */
@media (max-width: 600px) {
    .woocommerce-breadcrumb {
        display: flex;
        width: 100%;
        max-width: 100%;
        font-size: 0.75rem;
        padding: 9px 14px;
        margin: 14px 0 10px;
        justify-content: flex-start;
    }
    .woocommerce-breadcrumb .bc-inner {
        gap: 8px;
        width: 100%;
    }
}

/* ── Gallery column ── */
.woocommerce div.product div.images {
    align-self: start;
    min-width: 0;      /* prevent flexslider from blowing out the grid track */
    overflow: hidden;  /* clip any residual flexslider overflow */
    border-bottom: none;
}

/* Force gallery + flexslider viewport to respect the grid cell width */
.woocommerce-product-gallery,
.woocommerce-product-gallery .flex-viewport {
    max-width: 100% !important;
    width: 100% !important;
}

/* Remove any WooCommerce-injected HR in the product layout */
.woocommerce div.product hr,
.woocommerce div.product div.images hr {
    display: none;
}

/* Hide WooCommerce zoom icon + disable zoom cursor (image protection) */
.woocommerce-product-gallery__trigger { display: none !important; }
.woocommerce-product-gallery img,
.woocommerce-product-gallery__image img { cursor: default !important; -webkit-user-drag: none; }
.woocommerce-product-gallery .zoomImg { display: none !important; }

/* Disable gallery image links — prevent navigation to raw image files */
.woocommerce-product-gallery__image a {
    pointer-events: none;
    cursor: default;
}
.woocommerce-product-gallery .flex-control-thumbs a {
    pointer-events: none;
    cursor: default;
}

/* DVD-bounce watermark — floats over main gallery image */
.dvd-wm {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    width: 128px;
    height: 144px;
    color: rgba(255, 255, 255, 0.08);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
    animation: dvd-x 7s linear infinite alternate,
               dvd-y 5.3s linear infinite alternate;
}
.dvd-wm svg {
    width: 100%;
    height: 100%;
    display: block;
}
@keyframes dvd-x {
    from { left: 12px; }
    to   { left: calc(100% - 140px); }
}
@keyframes dvd-y {
    from { top: 12px; }
    to   { top: calc(100% - 156px); }
}

/* Vibrancy boost — counteract WordPress JPEG compression dulling */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-control-nav img,
.products-grid img,
.wc-block-grid__product-image img {
    filter: saturate(1.15);
}

/* Main gallery image — transparent, uniform light rounding */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
    line-height: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image {
    background: transparent;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; /* matches wrapper — all slides rounded, not just first */
}

/* Thumbnail strip wrapper — positions arrows + fade masks */
.thumb-nav-wrap {
    position: relative;
    overflow: visible;
}

/* Fade masks on edges */
.thumb-nav-wrap::before,
.thumb-nav-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.thumb-nav-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--bg), transparent);
}
.thumb-nav-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--bg), transparent);
}
.thumb-nav-wrap.has-scroll-left::before  { opacity: 1; }
.thumb-nav-wrap.has-scroll-right::after  { opacity: 1; }

/* Thumbnail strip */
.woocommerce div.product div.images .flex-control-nav {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    border: none;       /* remove any default ol border */
    background: none;
}
.woocommerce div.product div.images .flex-control-nav::-webkit-scrollbar { display: none; }

/* Thumbnail scroll arrows */
.thumb-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    padding: 0;
}
.thumb-nav-wrap:hover .thumb-nav-arrow:not(.is-hidden) {
    opacity: 1;
}
.thumb-nav-arrow:hover {
    background: var(--bg-secondary);
    color: var(--text);
}
.thumb-nav-arrow.is-hidden {
    opacity: 0 !important;
    pointer-events: none;
}
.thumb-nav-arrow--left  { left: 4px; }
.thumb-nav-arrow--right { right: 4px; }
.thumb-nav-arrow svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}

.woocommerce div.product div.images .flex-control-nav li {
    flex: 0 0 auto;
}

.woocommerce div.product div.images .flex-control-nav img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px; /* unified with main image */
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.18s ease, opacity 0.18s ease;
    opacity: 0.65;
    display: block;
}

.woocommerce div.product div.images .flex-control-nav img.flex-active,
.woocommerce div.product div.images .flex-control-nav img:hover {
    border-color: var(--accent);
    opacity: 1;
}

/* ── Summary column ── */
.woocommerce div.product div.summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;       /* prevent content from blowing out the 1.1fr/1fr grid ratio */
}

/* Title */
.woocommerce div.product .product_title {
    font-size: clamp(1.625rem, 3vw, 2.375rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0 0 14px;
    color: var(--text);
}

/* ── Quality badges ── */
.prod-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.prod-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 3px;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .prod-badges {
        gap: 5px;
    }
    .prod-badge {
        flex: 1;
        justify-content: center;
        text-align: center;
        padding: 6px 6px;
    }
}

/* Two-tone badge system on the product page — mirrors .product-card-tag.
   Black fill for permanent/technical attributes, gold outline for
   editorial/craft attributes. */

/* 8K + iOS & iPadOS — black fill */
.prod-badge--8k,
.prod-badge--ios {
    background: #111111;
    color: #ffffff;
    border: 1.5px solid #111111;
    letter-spacing: 0.18em;
}
.prod-badge--ios {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
[data-theme="dark"] .prod-badge--8k,
[data-theme="dark"] .prod-badge--ios {
    background: #f0f0f0;
    color: #111111;
    border-color: #f0f0f0;
}

/* 6K — dark grey fill, set apart slightly from 8K's solid black */
.prod-badge--6k {
    background: #3A3A3A;
    color: #ffffff;
    border: 1.5px solid #3A3A3A;
    letter-spacing: 0.18em;
}
[data-theme="dark"] .prod-badge--6k {
    background: #cfcfcf;
    color: #111111;
    border-color: #cfcfcf;
}

/* 10K — premium tier in the signature accent red. Intentionally keeps its
   red fill in both light AND dark themes, like the gold collab/handmade
   badges — colored badges don't invert, only the monochrome 8K/6K tiers do. */
.prod-badge--10k {
    background: var(--accent);
    color: #ffffff;
    border: 1.5px solid var(--accent);
    letter-spacing: 0.18em;
}

/* Handmade + Collab — warm gold outline */
.prod-badge--handmade,
.prod-badge--collab {
    background: transparent;
    color: #8B6B1F;
    border: 1.5px solid #C8A246;
}
[data-theme="dark"] .prod-badge--handmade,
[data-theme="dark"] .prod-badge--collab {
    color: #D7B456;
    border-color: rgba(215,180,86,0.6);
}

/* Instant Download — quiet utility, minimal outline */
.prod-badge--download {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
[data-theme="dark"] .prod-badge--download {
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ── Rating ── */
.woocommerce div.product .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

.woocommerce .star-rating {
    color: #f59e0b;
}

/* ── Price ── */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
    margin: 0 0 16px;
    line-height: 1;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    text-decoration: none;
    color: var(--text);
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    color: var(--text-muted);
    font-size: 1.125rem;
    font-weight: 400;
    margin-right: 8px;
    letter-spacing: 0;
}

/* ── Short description ── */
.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

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

/* ── Highlights list ── */
.prod-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}

.prod-highlights__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.prod-highlights__item svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--accent);
}

/* ── Add to cart ── */
.woocommerce div.product form.cart {
    margin: 0 0 10px;
}

/* Hide quantity — sold individually */
.woocommerce div.product form.cart .quantity {
    display: none !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 15px 28px;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    letter-spacing: -0.01em;
    text-transform: none;
    display: block;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.woocommerce div.product form.cart .single_add_to_cart_button:active {
    transform: translateY(0);
}

/* ── Access card (post-purchase trust) ── */
/* Frictionless purchase agreement line, sits just under the Buy button */
.prod-purchase-terms {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 10px 0 0;
    text-align: center;
}
.prod-purchase-terms a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--border);
}
.prod-purchase-terms a:hover {
    color: var(--text);
    text-decoration-color: var(--text);
}

.prod-access-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 15px;
    background: var(--bg-secondary);
    margin-top: 14px;
    margin-bottom: 4px;
}

.prod-access-card__label {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 12px;
    text-align: center;
}

.prod-access-card__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 6px;
    gap: 8px 0;
    margin-bottom: 11px;
}

@media (max-width: 600px) {
    .prod-access-card__items {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.prod-access-card__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.prod-access-card__item svg { flex-shrink: 0; }

.prod-access-card__license-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--border);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.prod-access-card__license-link:hover {
    color: var(--text);
    text-decoration-color: var(--text);
}

.prod-access-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 6px 0;
    border-top: 1px solid var(--border);
}

.prod-access-card__creator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.01em;
}

.prod-access-card__creator svg { flex-shrink: 0; }

.prod-access-card__yt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.prod-access-card__yt:hover { color: var(--text); }
.prod-access-card__yt svg { flex-shrink: 0; }

/* ── Product meta ── */
.woocommerce div.product .product_meta {
    font-size: 0.8125rem;
    color: var(--text-muted);
    padding-top: 12px;
    border-top: none;
}

.woocommerce div.product .product_meta > span {
    display: block;
    margin-bottom: 4px;
}

/* Tags are internal (drive badges) — not shown to customers */
.woocommerce div.product .product_meta .tagged_as {
    display: none;
}

.woocommerce div.product .product_meta a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

/* ── Tabs / full-width description section ── */
.woocommerce div.product .woocommerce-tabs {
    grid-column: 1 / -1;
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: 0;
    padding-bottom: 0;  /* spacing to the next section comes from that section's padding-top */
    border-top: none;
}

/* Tab nav hidden — only Description tab exists (reviews removed) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: none;
}

/* Panel — full width, no max-width constraint */
.woocommerce div.product .woocommerce-tabs .panel {
    max-width: none;
}

/* Description tab title hidden (only tab, no need for the label) */
.woocommerce div.product .woocommerce-tabs .panel > h2 {
    display: none;
}

/* 2-column editorial layout for description text
   Note: WooCommerce puts both classes on the SAME div, so compound selector (no space) */
.woocommerce-Tabs-panel--description.entry-content {
    columns: 2;
    column-gap: clamp(32px, 4vw, 56px);
    padding: clamp(24px, 3vw, 40px);
    border-radius: 14px;
    /* Gentle diagonal gradient — color-mix auto-adapts to light/dark via var(--text). */
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--text) 3%, var(--bg)) 0%,
        color-mix(in srgb, var(--text) 6%, var(--bg)) 100%
    );
}

/* Wallpapers get a deeper card tone so the description holds its own
   against the heavier gallery imagery above. */
.product_cat-wallpapers .woocommerce-Tabs-panel--description.entry-content {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--text) 6%, var(--bg)) 0%,
        color-mix(in srgb, var(--text) 11%, var(--bg)) 100%
    );
}

.woocommerce-Tabs-panel--description.entry-content p,
.woocommerce-Tabs-panel--description.entry-content h3,
.woocommerce-Tabs-panel--description.entry-content ul,
.woocommerce-Tabs-panel--description.entry-content ol {
    break-inside: avoid;
}

/* List styling inside description */
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0 0 14px;
    padding-left: 20px;
}

.woocommerce div.product .woocommerce-tabs .panel li {
    margin-bottom: 6px;
}

.woocommerce div.product .woocommerce-tabs .panel li:last-child {
    margin-bottom: 0;
}

@media (max-width: 860px) {
    .woocommerce-Tabs-panel--description.entry-content {
        columns: 1;
        column-rule: none;
    }
}

/* Description typography — condensed for readability */
.woocommerce div.product .woocommerce-tabs .panel p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0 0 14px;
}

.woocommerce div.product .woocommerce-tabs .panel p:last-child { margin-bottom: 0; }

.woocommerce div.product .woocommerce-tabs .panel h3 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 8px;         /* zero top margin so h3 at column-top aligns with p at column-top */
    break-after: avoid;      /* keep heading with the content that follows */
}

/* Section rhythm comes from bottom margin on preceding p/ul/ol.
   This way, both columns START at Y=0 regardless of whether the first element
   is a <p> or an <h3> — a margin-bottom at column end is just dead space that
   doesn't affect the next column's starting position. */
.woocommerce-Tabs-panel--description.entry-content > p,
.woocommerce-Tabs-panel--description.entry-content > ul,
.woocommerce-Tabs-panel--description.entry-content > ol {
    margin-bottom: 20px;
}

.woocommerce-Tabs-panel--description.entry-content > *:last-child {
    margin-bottom: 0;
}

/* .prod-creator-note removed — now lives inside .prod-access-card */

/* ── Category note (inside description, flows into right column) ── */
.prod-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 8px;
    margin-top: 20px;
    break-inside: avoid;
}

.prod-note svg {
    flex-shrink: 0;
}

.prod-note p {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0;
}

/* Wallpaper gallery note — quiet aside, now with stronger text presence */
.prod-note--gallery {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.prod-note--gallery svg { color: var(--text-secondary); }
.prod-note--gallery p { color: var(--text-secondary); }

/* Widget purchase note — orange (was amber) for clearer "heads up" */
.prod-note--warning {
    background: rgba(234, 88, 12, 0.07);
    border: 1px solid rgba(234, 88, 12, 0.28);
    color: var(--text-secondary);
}
.prod-note--warning svg { color: #ea580c; }
.prod-note--warning p { color: var(--text-secondary); }

[data-theme="dark"] .prod-note--warning {
    background: rgba(249, 115, 22, 0.08);
    border-color: rgba(249, 115, 22, 0.24);
}
[data-theme="dark"] .prod-note--warning svg { color: #fb923c; }

/* Version cross-link note — brand accent, for v1↔v2 product cross-referencing.
   Sits at the top of a description, so it needs bottom margin (the base
   .prod-note has only margin-top, which is correct for bottom-of-content use). */
.prod-note--version {
    background: rgba(44, 205, 212, 0.07);
    border: 1px solid rgba(44, 205, 212, 0.32);
    color: var(--text-secondary);
    margin-top: 0;
    margin-bottom: 24px;
}
.prod-note--version svg { color: var(--accent); }
.prod-note--version p { color: var(--text-secondary); }
.prod-note--version a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Reviews ── */
#reviews #comments .woocommerce-Reviews-title { display: none; }

#reviews .comment_container {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

#reviews .comment-text {
    flex: 1;
}

#reviews .star-rating { color: #f59e0b; margin-bottom: 8px; }

#reviews .description { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }

#reviews #respond {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

#reviews #respond .comment-reply-title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    color: var(--text);
}

/* ── Tutorial video – thumbnail player ── */
.prod-tutorial-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* Match .woocommerce-tabs margin-top so the card-to-card rhythm
       (gallery→description == description→video) is identical. */
    padding-top: clamp(24px, 3vw, 36px);
    padding-bottom: 8px;
}

.prod-tutorial-grid .prod-tutorial {
    grid-column: auto;
    border-top: none;
    padding-top: 0;
    padding-bottom: 0;
}

/* Slightly smaller text in side-by-side layout */
.prod-tutorial-grid .prod-tutorial__title {
    font-size: 1rem;
}

.prod-tutorial-grid .prod-tutorial__play-icon {
    width: 60px;
    height: 60px;
}

@media (max-width: 680px) {
    .prod-tutorial-grid {
        grid-template-columns: 1fr;
    }
}

.prod-tutorial {
    grid-column: 1 / -1;
    padding-top: clamp(24px, 3vw, 36px);
    padding-bottom: 8px;
}

/* 16:9 card — shows first frame / thumbnail */
.prod-tutorial__player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #111;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.12);
}

[data-theme="dark"] .prod-tutorial__player {
    border-color: rgba(255,255,255,0.08);
}

.prod-tutorial__player video,
.prod-tutorial__player img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Blur the low-res thumbnail so pixelation reads as atmospheric color
       instead of jagged detail. scale(1.06) prevents blur edges from
       showing at the container boundary. saturate(1.12) keeps the color
       vibrant through the blur. */
    filter: blur(14px) saturate(1.12);
    transform: scale(1.06);
    transition: filter 0.35s ease, transform 0.35s ease;
}

/* Once playing, show the video sharp */
.prod-tutorial__player.is-playing video,
.prod-tutorial__player.is-playing img {
    filter: none;
    transform: none;
}

.prod-tutorial__bg-dark {
    position: absolute;
    inset: 0;
    background: #1a1a1a;
}

/* Bottom gradient + text overlay — stronger now that the bg is blurred */
.prod-tutorial__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.28) 45%,
        rgba(0, 0, 0, 0.05) 100%
    );
    display: flex;
    align-items: flex-end;
    padding: 24px 28px;
    pointer-events: none;
}

.prod-tutorial__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.prod-tutorial__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}

.prod-tutorial__sub {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.68);
    font-weight: 400;
}

/* Red CTA play button — truly centered now that bg is blurred */
.prod-tutorial__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    padding: 0;
}

.prod-tutorial__play-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.prod-tutorial__play-icon svg {
    margin-left: 3px; /* optical center for triangle */
}

.prod-tutorial__play:hover .prod-tutorial__play-icon {
    background: var(--accent-hover);
    transform: scale(1.07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32), 0 3px 8px rgba(0, 0, 0, 0.22);
}

/* Once playing — hide the play UI, let native controls take over */
.prod-tutorial__player.is-playing .prod-tutorial__play,
.prod-tutorial__player.is-playing .prod-tutorial__overlay {
    display: none;
}

.prod-tutorial__player.is-playing video {
    object-fit: contain; /* letterbox once controls are visible */
}

/* ── Related products ── */
.related.products {
    grid-column: 1 / -1;
    padding-top: 56px;
}

.related.products > h2,
.upsells.products > h2 {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 28px;
    color: var(--text);
}

.related.products .products,
.upsells.products .products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* li.product is an extra wrapper WooCommerce injects — collapse it so
   the inner .wc-block-grid__product card sits directly in the grid */
.related.products .products li.product,
.upsells.products .products li.product {
    display: contents;
}

/* ═══════════════════════════════════════════════════════
   CART & CHECKOUT — SHARED BLOCK LAYOUT
═══════════════════════════════════════════════════════ */

/* Two-column sidebar layout */
.wc-block-components-sidebar-layout {
    display: flex;
    align-items: flex-start;
    gap: clamp(32px, 4vw, 64px);
    padding: 40px 0 80px;
}

.wc-block-components-main {
    flex: 1 1 0;
    min-width: 0;
}

.wc-block-components-sidebar {
    flex: 0 0 360px;
    width: 360px;
}

/* Page-level heading (Cart / Checkout) */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
    padding-top: 32px;
}

/* Snackbar notices */
.wc-block-components-notices__snackbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
}

/* ── Shared totals rows ── */
.wc-block-components-totals-wrapper {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.wc-block-components-totals-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.wc-block-components-totals-item:last-child {
    border-bottom: none;
}

.wc-block-components-totals-item__label {
    font-weight: 500;
    color: var(--text-secondary);
}

.wc-block-components-totals-item__value {
    font-weight: 600;
    color: var(--text);
}

/* Grand total row */
.wc-block-components-totals-footer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 4px;
    border-top: 2px solid var(--border);
    margin-top: 4px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.wc-block-components-totals-footer-item-tax-value {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    text-align: right;
    margin-top: 2px;
}

/* Coupon accordion */
.wc-block-components-panel {
    border: none;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 4px;
}

.wc-block-components-panel__button {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition);
}

.wc-block-components-panel__button:hover {
    color: var(--text);
}

.wc-block-components-totals-coupon {
    margin-top: 12px;
}

.wc-block-components-totals-coupon__form {
    display: flex;
    gap: 8px;
}

.wc-block-components-totals-coupon__input {
    flex: 1;
}

/* ── Shared text inputs ── */
.wc-block-components-text-input,
.wc-blocks-components-select__container {
    position: relative;
    margin-bottom: 16px;
}

.wc-block-components-text-input input,
.wc-blocks-components-select__select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    transition: border-color var(--transition);
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
    border-color: var(--text);
    box-shadow: none;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* Floating label style (WC blocks use this) */
.wc-block-components-text-input .wc-block-components-text-input__label {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 0.9375rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.15s ease;
    background: var(--bg);
    padding: 0 3px;
}

.wc-block-components-text-input.is-active .wc-block-components-text-input__label,
.wc-block-components-text-input input:focus ~ .wc-block-components-text-input__label,
.wc-block-components-text-input input:not(:placeholder-shown) ~ .wc-block-components-text-input__label {
    top: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

/* Checkbox */
.wc-block-components-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0;
}

.wc-block-components-checkbox__input {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    accent-color: var(--text);
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
}

.wc-block-components-checkbox__label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Notice banner (e.g. no payment methods) */
.wc-block-components-notice-banner {
    border-left: 3px solid var(--accent);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════
   CART — BLOCK STYLES
═══════════════════════════════════════════════════════ */

/* Cart items table header */
.wc-block-cart-items__header {
    display: grid;
    grid-template-columns: 80px 1fr 100px;
    gap: 16px;
    padding: 0 0 12px;
    border-bottom: 2px solid var(--border);
    align-items: center;
}

.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.wc-block-cart-items__header-total {
    text-align: right;
}

/* Cart item row */
.wc-block-cart-items__row {
    display: grid;
    grid-template-columns: 80px 1fr 100px;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-subtle);
    align-items: start;
}

/* Product image */
.wc-block-cart-item__image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

/* Product info */
.wc-block-cart-item__wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wc-block-components-product-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-decoration: none;
}

.wc-block-components-product-name:hover {
    color: var(--text-secondary);
}

.wc-block-components-product-metadata__description {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Price in item row */
.wc-block-cart-item__prices .wc-block-components-product-price {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Remove link */
.wc-block-cart-item__remove-link {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-top: 4px;
    display: inline-block;
    transition: color var(--transition);
    border-bottom: 1px solid transparent;
}

.wc-block-cart-item__remove-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Quantity control */
.wc-block-cart-item__quantity {
    margin-top: 8px;
}

.wc-block-components-quantity-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg);
}

.wc-block-components-quantity-selector__button {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
}

.wc-block-components-quantity-selector__button:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

.wc-block-components-quantity-selector__input {
    width: 36px;
    height: 32px;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: center;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    outline: none;
}

/* Line total */
.wc-block-cart-item__total {
    text-align: right;
}

.wc-block-cart-item__total .wc-block-components-product-price__value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

/* Cart sidebar */
.wc-block-cart__sidebar {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    position: sticky;
    top: 120px;
}

.wc-block-cart__totals-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

/* Checkout button */
.wc-block-cart__submit-container {
    margin-top: 20px;
}

.wc-block-cart__submit-button {
    display: block;
    width: 100%;
    background: var(--accent);
    color: #fff !important;
    border: none;
    border-radius: var(--radius-sm);
    padding: 15px 24px;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background var(--transition), transform 0.15s ease;
    letter-spacing: -0.01em;
}

.wc-block-cart__submit-button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* Payment options (Apple Pay etc) */
.wc-block-cart__payment-options {
    margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════
   CHECKOUT — BLOCK STYLES
═══════════════════════════════════════════════════════ */

/* Step sections */
.wc-block-components-checkout-step {
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
}

.wc-block-components-checkout-step:last-child {
    border-bottom: none;
}

.wc-block-components-checkout-step__heading {
    margin-bottom: 20px;
}

.wc-block-components-checkout-step__title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

/* Address form grid */
.wc-block-components-address-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.wc-block-components-address-form__email,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__country,
.wc-block-components-address-form__city {
    grid-column: 1 / -1;
}

/* Country/state selects */
.wc-blocks-components-select__container {
    margin-bottom: 16px;
}

.wc-blocks-components-select__select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* Address card (saved address display) */
.wc-block-components-address-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 16px;
    background: var(--bg-secondary);
}

.wc-block-components-address-card__edit {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-sans);
    margin-top: 8px;
    display: inline-block;
    transition: color var(--transition);
}

.wc-block-components-address-card__edit:hover {
    color: var(--text);
}

/* Checkout actions row */
.wc-block-checkout__actions_row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 28px;
}

.wc-block-components-checkout-place-order-button {
    width: 100%;
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 16px 24px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-family: var(--font-sans) !important;
    cursor: pointer !important;
    transition: background var(--transition), transform 0.15s ease !important;
    letter-spacing: -0.01em !important;
}

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

.wc-block-components-checkout-return-to-cart-button {
    background: none !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 24px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    font-family: var(--font-sans) !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: border-color var(--transition), color var(--transition) !important;
    width: 100% !important;
}

.wc-block-components-checkout-return-to-cart-button:hover {
    border-color: var(--text) !important;
    color: var(--text) !important;
}

/* Order note */
.wc-block-checkout__add-note {
    font-size: 0.875rem;
}

.wc-block-checkout__add-note textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text);
    background: var(--bg);
    resize: vertical;
    outline: none;
    transition: border-color var(--transition);
    box-sizing: border-box;
}

.wc-block-checkout__add-note textarea:focus {
    border-color: var(--text);
}

/* Terms */
/* Terms disclaimer — sits between Return to Cart and trust strip.
   Subtle legal text that blends with the trust note below it. */
.wc-block-checkout__terms {
    font-size: 0.6875rem !important;
    color: var(--text-muted) !important;
    padding-top: 4px !important;
    text-align: center !important;
    order: 10 !important;
    opacity: 0.45 !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
    border: none !important;
}
/* Hide the separator that WC Blocks adds */
.wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
    border-top: none !important;
    padding-top: 0 !important;
}

/* Checkout sidebar — order summary */
.wc-block-checkout__sidebar {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-top: 3px solid var(--accent) !important;  /* brand accent */
    border-radius: 0 !important;                      /* no rounded corners */
    padding: 28px !important;
    position: sticky !important;
    top: 80px !important;
    max-height: calc(100dvh - 104px) !important;
    overflow-y: auto !important;
}

/* Account for WP admin bar pushing topbar down */
.admin-bar .wc-block-checkout__sidebar {
    top: 140px !important;
    max-height: calc(100dvh - 160px) !important; /* 140px top + 20px buffer */
}

/* Kill ALL inner sub-block card styling WC Blocks nests inside the sidebar */
.wc-block-checkout__sidebar [class*="wp-block-woocommerce-checkout-order-summary"],
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.wc-block-components-checkout-order-summary__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
}

.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-price {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    letter-spacing: -0.02em !important;
}

.wc-block-components-checkout-order-summary__title-icon {
    display: none;
}

/* Order summary items */
.wc-block-components-order-summary-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
    align-items: start;
}

.wc-block-components-order-summary-item__image {
    position: relative;
}

.wc-block-components-order-summary-item__image img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

.wc-block-components-order-summary-item__quantity {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--text);
    color: var(--bg);
    font-size: 0.625rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wc-block-components-order-summary-item__description {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-size: 0.875rem;
}

.wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
}

/* Checkout totals */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
    margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════
   CART & CHECKOUT — RESPONSIVE
═══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .wc-block-components-sidebar-layout {
        flex-direction: column;
    }

    .wc-block-components-sidebar {
        flex: none;
        width: 100%;
    }

    .wc-block-cart__sidebar,
    .wc-block-checkout__sidebar {
        position: static;
    }
}

@media (max-width: 600px) {
    .wc-block-cart-items__header {
        grid-template-columns: 64px 1fr 80px;
    }

    .wc-block-cart-items__row {
        grid-template-columns: 64px 1fr 80px;
    }

    .wc-block-cart-item__image img {
        width: 64px;
        height: 64px;
    }

    .wc-block-components-address-form {
        grid-template-columns: 1fr;
    }

    .wc-block-components-address-form__email,
    .wc-block-components-address-form__address_1,
    .wc-block-components-address-form__country,
    .wc-block-components-address-form__city {
        grid-column: 1;
    }
}

/* ═══════════════════════════════════════════════════════
   NOTICES
═══════════════════════════════════════════════════════ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 0.9375rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    border-left: 3px solid var(--accent);
    background: var(--bg-secondary);
}

.woocommerce-message {
    border-left-color: var(--success);
}

.woocommerce-error {
    border-left-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════ */

.woocommerce-pagination,
.woocommerce nav.woocommerce-pagination {
    margin: 48px 0 80px;
    display: flex;
    justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    border-color: var(--text);
    color: var(--text);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}

/* ═══════════════════════════════════════════════════════
   MINI CART / CART ICON
═══════════════════════════════════════════════════════ */

.cart-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    text-decoration: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.cart-icon:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

.cart-icon svg {
    width: 20px;
    height: 20px;
}

.cart-icon__count {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════
   RESULT COUNT & ORDERING
═══════════════════════════════════════════════════════ */

/* Result count hidden — clean shop, no clutter */
.woocommerce-result-count {
    display: none;
}

.woocommerce-ordering select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    cursor: pointer;
    outline: none;
}

/* ═══════════════════════════════════════════════════════
   LOGIN / REGISTER FORM
═══════════════════════════════════════════════════════ */

/* Center the login form and hide the generic "My account" page header */
.woocommerce-account:not(.logged-in) .page-header {
    display: none;
}
.woocommerce-account:not(.logged-in) .page-content {
    display: flex;
    justify-content: center;
    padding: 0 var(--site-gutter, 24px) clamp(60px, 8vw, 100px) !important;
}
.woocommerce-account:not(.logged-in) .page-content article {
    width: 100%;
    /* Wide enough for the split login/register grid (880px + breathing room).
       Single-column inner blocks (reset password, non-split fallback) carry
       their own 420px caps. */
    max-width: 920px;
}
.woocommerce-account:not(.logged-in) .page-body {
    max-width: none;
}

/* The .woocommerce wrapper holds notices + h2 + form as siblings */
.woocommerce-account:not(.logged-in) .page-body > .woocommerce {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding-top: 0 !important;
    gap: 0 !important;
}

/* Kill all inherited spacing inside login wrapper */
.woocommerce-account:not(.logged-in) .page-body > * + * {
    margin-top: 0 !important;
}
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper:empty {
    display: none;
}
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper {
    margin: 0 0 12px !important;
}

/* Error/info notices — remove focus outline */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    outline: none !important;
}
.woocommerce-error:focus,
.woocommerce-message:focus,
.woocommerce-info:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Login heading */
.woocommerce-account:not(.logged-in) .page-body > .woocommerce > h2 {
    font-size: clamp(1.5rem, 3.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
    margin: 40px 0 16px !important;
    color: var(--text);
}

/* Form card wrapper — matches .contact-form-wrap */
.woocommerce-form-login {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 32px;
    box-sizing: border-box;
    text-align: left;
}

/* Labels */
.woocommerce-form-login label[for] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.woocommerce-form-login label .required {
    color: var(--accent);
    font-weight: 700;
}

/* Text inputs — unified sizing with contact form */
.woocommerce-form-login .woocommerce-Input {
    width: 100% !important;
    padding: 11px 14px !important;
    font-size: 0.9375rem !important;
    font-family: inherit !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    transition: border-color 0.15s ease;
    margin-bottom: 20px;
    box-sizing: border-box;
    -webkit-appearance: none;
}
.woocommerce-form-login .woocommerce-Input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Show password toggle */
.woocommerce-form-login .show-password-input {
    position: relative;
    top: -2px;
    cursor: pointer;
    color: var(--text-muted);
    border: none;
    background: none;
    font-size: 0.8125rem;
    padding: 4px 0;
}
.woocommerce-form-login .show-password-input:hover {
    color: var(--text);
}

/* Remember me checkbox row */
.woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: 20px;
}
.woocommerce-form-login__rememberme input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* Submit button — matches .contact-form__submit / .btn-primary */
.woocommerce-form-login .woocommerce-form-login__submit {
    display: block !important;
    width: 100% !important;
    padding: 12px 24px !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #fff !important;
    background: var(--accent) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer;
    transition: opacity 0.15s ease;
    box-sizing: border-box;
    margin-top: 4px;
}
.woocommerce-form-login .woocommerce-form-login__submit:hover {
    opacity: 0.85;
}

/* Lost password link */
.woocommerce-form-login p.lost_password,
.woocommerce-form-login a[href*="lost-password"] {
    display: block;
    text-align: center;
    margin-top: 16px;
    margin-bottom: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}
.woocommerce-form-login a[href*="lost-password"]:hover {
    color: var(--accent);
}

/* Lost password form (separate page) */
.woocommerce-account .woocommerce-ResetPassword {
    max-width: 420px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 32px;
}
.woocommerce-account .woocommerce-ResetPassword label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 7px;
}
.woocommerce-account .woocommerce-ResetPassword input[type="text"],
.woocommerce-account .woocommerce-ResetPassword input[type="email"] {
    width: 100%;
    padding: 11px 14px;
    font-size: 0.9375rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    box-sizing: border-box;
    margin-bottom: 20px;
    -webkit-appearance: none;
}
.woocommerce-account .woocommerce-ResetPassword input:focus {
    outline: none;
    border-color: var(--accent);
}
.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button {
    display: block;
    width: 100%;
    padding: 12px 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button:hover {
    opacity: 0.85;
}

@media (max-width: 480px) {
    .woocommerce-form-login,
    .woocommerce-account .woocommerce-ResetPassword {
        padding: 24px 20px;
    }
}


/* ═══════════════════════════════════════════════════════
   ACCOUNT PAGES — Full overhaul
═══════════════════════════════════════════════════════ */

/* ── Page-level layout ────────────────────────────── */
.woocommerce-account.logged-in .page-content {
    padding-top: clamp(24px, 3vw, 40px) !important;
}
.woocommerce-account .page-header {
    margin-bottom: clamp(20px, 2.5vw, 32px) !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}
.woocommerce-account .page-body {
    max-width: none;
}
.woocommerce-account .page-body > * + * {
    margin-top: 0 !important;
}
.woocommerce-account .woocommerce {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    padding-top: 4px;
}

/* ── Login form ──────────────────────────────────── */
.thisise-login {
    max-width: 420px;
    margin: 0 auto;
    padding: 20px 0 60px;
}
/* Tabbed card: one compact panel, segmented "Welcome back | New here?" switch
   (same pill language as the theme toggle and store filters). */
.thisise-login--tabbed {
    max-width: 440px;
    margin: clamp(36px, 7vh, 80px) auto 0; /* clear air below the fixed nav */
    background: var(--bg-elev, var(--bg));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px;
    text-align: left; /* guard against inherited centering */
    position: relative; /* anchor for the hidden-pane height measurement */
}
.thisise-login__tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    margin-bottom: 24px;
}
.thisise-login__tab {
    flex: 1;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition, 0.2s ease);
}
.thisise-login__tab:hover {
    color: var(--text);
}
.thisise-login__tab.is-active {
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}
/* Both panes live in the same grid cell: the card's height is always the
   tallest pane's height, so switching tabs never reshapes the card. */
.thisise-login--tabbed {
    display: grid;
    grid-template-columns: 100%;
}
.thisise-login__tabs { grid-row: 1; }
.thisise-login__pane {
    grid-row: 2;
    grid-column: 1;
    visibility: hidden;
    pointer-events: none;
}
.thisise-login__pane.is-active {
    visibility: visible;
    pointer-events: auto;
}
.thisise-login__pane-sub {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 0 22px;
}
.thisise-login__guest-note {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-muted);
}
/* Keep the remember/forgot row on one line */
.thisise-login__options { flex-wrap: nowrap; }
.thisise-login__remember span,
.thisise-login__forgot { white-space: nowrap; }
/* WC's injected privacy boilerplate in the register pane: quiet it down */
.thisise-login--tabbed .woocommerce-privacy-policy-text p {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-muted);
    text-align: left;
    margin: 0 0 4px;
}
.thisise-login__submit--ghost {
    background: transparent !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.thisise-login__submit--ghost:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
.thisise-login__header {
    text-align: left;
    margin-bottom: 28px;
}
.thisise-login__title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 8px !important;
}
.thisise-login__sub {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
}
.thisise-login__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.thisise-login__field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.thisise-login__field input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    transition: border-color 0.15s ease;
    outline: none;
}
[data-theme="dark"] .thisise-login__field input {
    background: var(--bg-secondary);
}
.thisise-login__field input:focus {
    border-color: var(--accent);
}
.thisise-login__field input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}
.thisise-login__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.thisise-login__remember {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.thisise-login__remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}
.thisise-login__forgot {
    font-size: 0.8125rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.thisise-login__forgot:hover {
    text-decoration: underline;
}
.thisise-login__submit {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.thisise-login__submit:hover {
    opacity: 0.9;
}
.thisise-login__register {
    text-align: center;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-muted);
}
.thisise-login__register a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.thisise-login__register a:hover {
    text-decoration: underline;
}

/* ── Sidebar navigation ──────────────────────────── */
.woocommerce-MyAccount-navigation {
    width: 200px;
    flex-shrink: 0;
    position: sticky;
    top: 96px;
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
    border-radius: var(--radius-sm);
}
.woocommerce-MyAccount-navigation li.is-active a {
    color: var(--text);
    font-weight: 700;
    background: var(--bg-secondary);
}
.woocommerce-MyAccount-navigation li a:hover {
    color: var(--text);
    background: var(--bg-secondary);
}

/* ── Main content area ────────────────────────────── */
.woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0;
}

/* ── Dashboard tab ────────────────────────────────── */
/* Hide default WC "Hello... From your account dashboard..." text
   only when our custom dashboard is present */
.woocommerce-MyAccount-content:has(.dashboard-welcome) > p {
    display: none !important;
}

/* Dashboard welcome */
.dashboard-welcome {
    margin-bottom: 28px;
}
.dashboard-welcome__greeting {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 6px !important;
    text-transform: none !important;
}
.dashboard-welcome__sub {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
}

/* Dashboard stats */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
.dashboard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    text-decoration: none !important;
    transition: border-color 0.15s ease;
}
.dashboard-stat:hover {
    border-color: var(--accent);
}
.dashboard-stat__icon {
    color: var(--text-muted);
}
.dashboard-stat__value {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1;
}
.dashboard-stat__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Dashboard action cards */
.dashboard-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dashboard-action {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    text-decoration: none !important;
    transition: border-color 0.15s ease;
}
.dashboard-action:hover {
    border-color: var(--accent);
}
.dashboard-action__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 10px;
    color: var(--text);
}
.dashboard-action__text {
    flex: 1;
    min-width: 0;
}
.dashboard-action__title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.dashboard-action__desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.dashboard-action__arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}
.dashboard-action:hover .dashboard-action__arrow {
    transform: translateX(3px);
    color: var(--accent);
}

/* ── Global mark tag reset (WC yellow highlights) ── */
.woocommerce-MyAccount-content mark {
    background: none !important;
    color: var(--text) !important;
    font-weight: 700;
}

/* ── Global button style for account pages ───────── */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 22px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: var(--text) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 0.15s ease;
    -webkit-appearance: none;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
    border-color: var(--text) !important;
}
/* Primary buttons — accent background */
.woocommerce-MyAccount-content .button.alt,
.woocommerce-MyAccount-content .woocommerce-Button--alt,
.woocommerce-MyAccount-content form.edit-account button[type="submit"],
.woocommerce-MyAccount-content form.edit-address button[type="submit"],
.woocommerce-MyAccount-content button#place_order,
.woocommerce-MyAccount-content input#place_order {
    color: #fff !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    width: auto !important;
}
.woocommerce-MyAccount-content .button.alt:hover,
.woocommerce-MyAccount-content .woocommerce-Button--alt:hover,
.woocommerce-MyAccount-content form.edit-account button[type="submit"]:hover,
.woocommerce-MyAccount-content form.edit-address button[type="submit"]:hover,
.woocommerce-MyAccount-content button#place_order:hover,
.woocommerce-MyAccount-content input#place_order:hover {
    opacity: 0.88;
    border-color: var(--accent) !important;
}

/* ── Orders table ─────────────────────────────────── */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.woocommerce-orders-table thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0 24px 12px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
.woocommerce-orders-table thead th:last-child {
    padding-right: 0;
    text-align: right;
}
.woocommerce-orders-table tbody td {
    padding: 16px 24px 16px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text);
    vertical-align: middle;
}
.woocommerce-orders-table tbody td:last-child {
    padding-right: 0;
    text-align: right;
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover {
    color: var(--accent);
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
    font-weight: 600;
    font-size: 0.8125rem;
}

/* ── Order detail / view-order (receipt) ─────────── */
.woocommerce-MyAccount-content > p:first-child mark {
    font-weight: 700;
}
/* Wrap order info in a card-like receipt */
.woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-MyAccount-content .woocommerce-order-downloads {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 28px;
    margin-bottom: 24px;
}
[data-theme="dark"] .woocommerce-MyAccount-content .woocommerce-order-details,
[data-theme="dark"] .woocommerce-MyAccount-content .woocommerce-order-downloads {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.07);
}
.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content .woocommerce-order-downloads__title {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 16px !important;
    padding: 0;
}
.woocommerce-MyAccount-content .woocommerce-order-details .shop_table,
.woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table {
    background: none !important;
    border: none !important;
}
.woocommerce-MyAccount-content .woocommerce-order-details .shop_table thead th,
.woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0 12px 10px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.woocommerce-MyAccount-content .woocommerce-order-details .shop_table td,
.woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table td {
    padding: 12px 12px 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text);
    vertical-align: middle;
}
.woocommerce-MyAccount-content .woocommerce-order-details .shop_table td:last-child,
.woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table td:last-child {
    padding-right: 0;
    text-align: right;
}
.woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table thead th:last-child {
    text-align: right;
    padding-right: 0;
}
/* Right-align the TOTAL column (header + body) to match tfoot */
.woocommerce-MyAccount-content .woocommerce-order-details .shop_table thead th:last-child,
.woocommerce-MyAccount-content .woocommerce-order-details .shop_table tbody td:last-child {
    text-align: right;
    padding-right: 0;
}
/* Order totals rows */
.woocommerce-MyAccount-content .woocommerce-order-details tfoot th,
.woocommerce-MyAccount-content .woocommerce-order-details tfoot td {
    padding: 8px 0;
    font-size: 0.875rem;
    border: none;
    text-align: right;
}
.woocommerce-MyAccount-content .woocommerce-order-details tfoot th {
    padding-right: 16px;
    font-weight: 600;
    color: var(--text-secondary);
}
.woocommerce-MyAccount-content .woocommerce-order-details tfoot tr:last-child th,
.woocommerce-MyAccount-content .woocommerce-order-details tfoot tr:last-child td {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
/* Product links in order */
.woocommerce-MyAccount-content .woocommerce-order-details a,
.woocommerce-MyAccount-content .woocommerce-order-downloads a:not(.button) {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}
.woocommerce-MyAccount-content .woocommerce-order-details a:hover,
.woocommerce-MyAccount-content .woocommerce-order-downloads a:not(.button):hover {
    color: var(--accent);
}
/* Order again button — hidden (digital products don't need reorder) */
.woocommerce-MyAccount-content .order-again {
    display: none !important;
}
/* Billing address on order detail */
.woocommerce-MyAccount-content .woocommerce-customer-details {
    margin-top: 24px;
}
.woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column__title {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.woocommerce-MyAccount-content .woocommerce-customer-details address {
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
}
[data-theme="dark"] .woocommerce-MyAccount-content .woocommerce-customer-details address {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.07);
}

/* ── Empty states / info messages ────────────────── */
.woocommerce-MyAccount-content .woocommerce-message--info,
.woocommerce-MyAccount-content .woocommerce-info {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    text-align: center;
}
.woocommerce-MyAccount-content .woocommerce-message--info a,
.woocommerce-MyAccount-content .woocommerce-info a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

/* ── Addresses ────────────────────────────────────── */
.woocommerce-MyAccount-content > p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}
.woocommerce-MyAccount-content .woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.woocommerce-MyAccount-content .woocommerce-Address {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    transition: border-color 0.15s ease;
}
.woocommerce-MyAccount-content .woocommerce-Address:hover {
    border-color: var(--text-muted);
}
[data-theme="dark"] .woocommerce-MyAccount-content .woocommerce-Address {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .woocommerce-MyAccount-content .woocommerce-Address:hover {
    border-color: rgba(255,255,255,0.15);
}
.woocommerce-MyAccount-content .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0;
}
.woocommerce-MyAccount-content .woocommerce-Address-title a {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title a:hover {
    text-decoration: underline !important;
}
.woocommerce-MyAccount-content address {
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--text-secondary);
}
.woocommerce-MyAccount-content .woocommerce-Addresses + .woocommerce-Addresses {
    margin-top: 0;
}

/* ── Payment methods table ───────────────────────── */
.woocommerce-MyAccount-content .woocommerce-MyPaymentMethods,
.woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    border-collapse: collapse;
}
.woocommerce-MyAccount-content .woocommerce-MyPaymentMethods thead th,
.woocommerce-MyAccount-content table.shop_table thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0 12px 12px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.woocommerce-MyAccount-content .woocommerce-MyPaymentMethods tbody td,
.woocommerce-MyAccount-content table.shop_table tbody td {
    padding: 14px 12px 14px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text);
    vertical-align: middle;
}
/* Add payment method link */
.woocommerce-MyAccount-content a.add-payment-method,
.woocommerce-MyAccount-content a[href*="add-payment-method"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent) !important;
    text-decoration: none !important;
}
.woocommerce-MyAccount-content a.add-payment-method:hover,
.woocommerce-MyAccount-content a[href*="add-payment-method"]:hover {
    text-decoration: underline !important;
}

/* ── Add payment method page ─────────────────────── */
.woocommerce-MyAccount-content #payment {
    max-width: 520px;
}
.woocommerce-MyAccount-content #payment .payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.woocommerce-MyAccount-content #payment .payment_methods li {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 12px;
}
[data-theme="dark"] .woocommerce-MyAccount-content #payment .payment_methods li {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.07);
}
.woocommerce-MyAccount-content #payment .payment_methods li label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.woocommerce-MyAccount-content #payment .payment_methods li .payment_box {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.woocommerce-MyAccount-content #payment .payment_methods li .payment_box p {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}
/* Stripe test mode notice */
.woocommerce-MyAccount-content .woocommerce-stripe-test-mode-notice,
.woocommerce-MyAccount-content #payment .payment_methods li .testmode {
    font-size: 0.8125rem !important;
    color: var(--text-muted) !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 16px !important;
    margin-bottom: 16px;
}
/* Stripe UPE elements container */
.woocommerce-MyAccount-content .wc-stripe-upe-element,
.woocommerce-MyAccount-content .wc-stripe-elements-field {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
    background: var(--bg);
}
.woocommerce-MyAccount-content #payment .place-order {
    margin-top: 20px;
}
/* Stripe terms/privacy text */
.woocommerce-MyAccount-content #payment .place-order p {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ── Account details form ─────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-MyAccount-content form.edit-account {
    max-width: 520px;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row,
.woocommerce-MyAccount-content form.edit-account .form-row {
    margin-bottom: 20px;
}
/* Shared label styles for all forms */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm label,
.woocommerce-MyAccount-content form.edit-account label,
.woocommerce-MyAccount-content form.edit-address label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
/* Shared input styles for all forms */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm input[type="text"],
.woocommerce-MyAccount-content .woocommerce-EditAccountForm input[type="email"],
.woocommerce-MyAccount-content .woocommerce-EditAccountForm input[type="password"],
.woocommerce-MyAccount-content form.edit-account input[type="text"],
.woocommerce-MyAccount-content form.edit-account input[type="email"],
.woocommerce-MyAccount-content form.edit-account input[type="password"],
.woocommerce-MyAccount-content form.edit-address input[type="text"],
.woocommerce-MyAccount-content form.edit-address input[type="tel"],
.woocommerce-MyAccount-content form.edit-address input[type="email"],
.woocommerce-MyAccount-content form.edit-address select {
    width: 100%;
    padding: 11px 14px;
    font-size: 0.9375rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text);
    transition: border-color 0.15s ease;
    -webkit-appearance: none;
}
[data-theme="dark"] .woocommerce-MyAccount-content .woocommerce-EditAccountForm input[type="text"],
[data-theme="dark"] .woocommerce-MyAccount-content .woocommerce-EditAccountForm input[type="email"],
[data-theme="dark"] .woocommerce-MyAccount-content .woocommerce-EditAccountForm input[type="password"],
[data-theme="dark"] .woocommerce-MyAccount-content form.edit-account input[type="text"],
[data-theme="dark"] .woocommerce-MyAccount-content form.edit-account input[type="email"],
[data-theme="dark"] .woocommerce-MyAccount-content form.edit-account input[type="password"],
[data-theme="dark"] .woocommerce-MyAccount-content form.edit-address input,
[data-theme="dark"] .woocommerce-MyAccount-content form.edit-address select {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm input:focus,
.woocommerce-MyAccount-content form.edit-account input:focus,
.woocommerce-MyAccount-content form.edit-address input:focus,
.woocommerce-MyAccount-content form.edit-address select:focus {
    outline: none;
    border-color: var(--accent);
}
/* Description text under inputs */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm em,
.woocommerce-MyAccount-content form.edit-account em {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
    display: block;
    margin-top: 6px;
}
/* Password change fieldset — card treatment */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    margin: 28px 0;
}
[data-theme="dark"] .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.07);
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset legend,
.woocommerce-MyAccount-content form.edit-account fieldset legend {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    padding: 0 10px;
}
/* Inputs inside fieldset should use main bg for contrast */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset input[type="password"] {
    background: var(--bg) !important;
}

/* ── Edit address form ────────────────────────────── */
.woocommerce-MyAccount-content form.edit-address {
    max-width: 520px;
}
.woocommerce-MyAccount-content form.edit-address .form-row {
    margin-bottom: 16px;
}

/* ── Newsletter checkbox ─────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-form-row--wide .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
}

/* ── Password show/hide toggle ───────────────────── */
.woocommerce-MyAccount-content .password-input {
    position: relative;
    display: block;
}
.woocommerce-MyAccount-content .show-password-input {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-muted);
    font-size: 0;
    line-height: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.woocommerce-MyAccount-content .show-password-input::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.woocommerce-MyAccount-content .show-password-input:hover {
    color: var(--text);
}
.woocommerce-MyAccount-content .password-input input[type="password"],
.woocommerce-MyAccount-content .password-input input[type="text"] {
    padding-right: 44px !important;
}

/* ── WC Notices inside account ────────────────────── */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-info {
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    font-size: 0.875rem;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    outline: none !important;
}
.woocommerce-MyAccount-content .woocommerce-error {
    border-left: 3px solid var(--accent);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    .woocommerce-account.logged-in .page-content {
        padding-top: 20px !important;
    }
    .woocommerce-account .page-header {
        margin-bottom: 16px !important;
    }
    .woocommerce-account .woocommerce {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    .woocommerce-MyAccount-navigation {
        width: 100%;
        position: relative;
        top: auto;
        overflow: hidden;
        margin-bottom: 24px;
    }
    /* Fade indicators for scroll hint */
    .woocommerce-MyAccount-navigation::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to right, transparent, var(--bg));
        pointer-events: none;
        z-index: 1;
    }
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 40px 2px 0;
        flex-direction: row;
    }
    .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none;
    }
    .woocommerce-MyAccount-navigation li {
        flex-shrink: 0;
    }
    .woocommerce-MyAccount-navigation li a {
        padding: 8px 16px;
        font-size: 0.8125rem;
        white-space: nowrap;
        border: 1px solid var(--border);
        border-radius: 99px;
    }
    .woocommerce-MyAccount-navigation li.is-active a {
        background: var(--text);
        color: var(--bg);
        border-color: var(--text);
    }
    /* Content adjustments */
    .woocommerce-MyAccount-content .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }
    .woocommerce-MyAccount-content .woocommerce-order-details,
    .woocommerce-MyAccount-content .woocommerce-order-downloads {
        padding: 20px 16px;
    }
    .woocommerce-MyAccount-content #payment {
        max-width: none;
    }
    .woocommerce-MyAccount-content .woocommerce-EditAccountForm,
    .woocommerce-MyAccount-content form.edit-account,
    .woocommerce-MyAccount-content form.edit-address {
        max-width: none;
    }
    /* Orders table card layout */
    .woocommerce-orders-table thead {
        display: none;
    }
    .woocommerce-orders-table,
    .woocommerce-orders-table tbody,
    .woocommerce-orders-table tr,
    .woocommerce-orders-table td {
        display: block;
        width: 100%;
    }
    .woocommerce-orders-table tr {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 20px;
        margin-bottom: 12px;
    }
    .woocommerce-orders-table td {
        border: none;
        padding: 4px 0;
        text-align: left !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .woocommerce-orders-table td::before {
        content: attr(data-title);
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        min-width: 72px;
        flex-shrink: 0;
    }
    /* Hide the ACTIONS label, just show the button */
    .woocommerce-orders-table td:last-child::before {
        display: none;
    }
    .woocommerce-orders-table td:last-child {
        margin-top: 12px;
    }
    .woocommerce-orders-table td:last-child .button {
        width: 100% !important;
        color: #fff !important;
        background: var(--accent) !important;
        border-color: var(--accent) !important;
    }

    /* ── Order detail responsive ───────────────────── */
    /* Downloads table inside order detail — compact on mobile */
    .woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table thead {
        display: none;
    }
    .woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table,
    .woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table tbody,
    .woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table tr,
    .woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table td {
        display: block;
        width: 100%;
    }
    .woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }
    .woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table td {
        padding: 3px 0;
        border: none;
        font-size: 0.8125rem;
    }
    /* Add inline labels via data-title */
    .woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table td::before {
        content: attr(data-title) ": ";
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    /* Product name — no label prefix needed */
    .woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table td:first-child {
        font-weight: 700;
        font-size: 0.875rem;
        margin-bottom: 4px;
    }
    .woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table td:first-child::before {
        display: none;
    }
    /* Download button cell — no label */
    .woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table td:last-child::before {
        display: none;
    }
    /* Download button inside order — prevent text wrapping */
    .woocommerce-MyAccount-content .woocommerce-order-downloads .button {
        white-space: nowrap !important;
        width: 100% !important;
        margin-top: 8px !important;
    }
    /* Order details table — tighter on mobile */
    .woocommerce-MyAccount-content .woocommerce-order-details .shop_table thead th,
    .woocommerce-MyAccount-content .woocommerce-order-details .shop_table td {
        padding: 10px 8px 10px 0;
        font-size: 0.8125rem;
    }
    .woocommerce-MyAccount-content .woocommerce-order-details tfoot th {
        font-size: 0.8125rem;
        padding-right: 8px;
    }

    /* ── Dashboard responsive ─────────────────────────── */
    .dashboard-welcome {
        margin-bottom: 20px;
    }
    .dashboard-welcome__greeting {
        font-size: 1.125rem;
    }
    .dashboard-stats {
        gap: 10px;
        margin-bottom: 20px;
    }
    .dashboard-stat {
        padding: 18px 12px;
    }
    .dashboard-stat__value {
        font-size: 1.5rem;
    }
    .dashboard-action {
        padding: 14px 16px;
        gap: 12px;
    }
    .dashboard-action__icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
    .dashboard-action__icon svg {
        width: 18px;
        height: 18px;
    }
    .dashboard-action__title {
        font-size: 0.875rem;
    }
    .dashboard-action__desc {
        font-size: 0.75rem;
    }

    /* ── Payment methods responsive ───────────────────── */
    .woocommerce-MyAccount-content .woocommerce-info {
        font-size: 0.8125rem;
        padding: 12px 14px;
    }
}

/* ═══════════════════════════════════════════════════════
   ORDER RECEIVED / THANK YOU — fallback for default WC
═══════════════════════════════════════════════════════ */

/* Style the default WC order-received output in case custom template
   doesn't load (e.g., block-based checkout fallback) */
.woocommerce-order {
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 60px) var(--site-gutter, 24px);
}

.woocommerce-order .woocommerce-thankyou-order-received {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    text-align: center;
    margin-bottom: 32px;
}

/* Order overview list (order number, date, email, total, payment) */
.woocommerce-order .woocommerce-order-overview {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0;
    list-style: none !important;
    padding: 20px 24px !important;
    margin: 0 0 32px !important;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
}
[data-theme="dark"] .woocommerce-order .woocommerce-order-overview {
    background: var(--bg-card, rgba(255,255,255,0.03));
    border-color: rgba(255,255,255,0.07);
}
.woocommerce-order .woocommerce-order-overview li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}
.woocommerce-order .woocommerce-order-overview li::before {
    display: none;
}

/* Downloads table on order-received */
.woocommerce-order h2,
.woocommerce-order-downloads h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}
.woocommerce-order table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
}
.woocommerce-order table.shop_table thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0 12px 12px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.woocommerce-order table.shop_table tbody td {
    padding: 14px 12px 14px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text);
    vertical-align: middle;
}
.woocommerce-order table.shop_table tbody td a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.woocommerce-order table.shop_table tbody td a:hover {
    text-decoration: underline;
}
.woocommerce-order table.shop_table tfoot th {
    text-align: left;
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.woocommerce-order table.shop_table tfoot td {
    text-align: right;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text);
}
.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td {
    font-weight: 700;
    font-size: 1rem;
    border-bottom: none;
    padding-top: 14px;
}

/* Customer details on order-received */
.woocommerce-order .woocommerce-customer-details {
    display: block !important;
}
.woocommerce-order section.woocommerce-customer-details h2 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 12px;
}
.woocommerce-order .woocommerce-customer-details address {
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
}
[data-theme="dark"] .woocommerce-order .woocommerce-customer-details address {
    background: var(--bg-card, rgba(255,255,255,0.03));
    border-color: rgba(255,255,255,0.07);
}

/* Order details section */
.woocommerce-order .woocommerce-order-details {
    display: block !important;
}

/* Unhide these only inside .woocommerce-order context */
.woocommerce-order .woocommerce-order-overview {
    display: grid !important;
}

@media (max-width: 600px) {
    .woocommerce-order .woocommerce-order-overview {
        grid-template-columns: 1fr 1fr;
        padding: 16px 18px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .shop-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .product-card__body {
        padding: 12px;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 10px 12px;
        font-size: 0.8125rem;
    }
}

/* ═══════════════════════════════════════════════════════
   CART DRAWER — slide-in side panel
═══════════════════════════════════════════════════════ */

/* Lock scroll when drawer is open */
body.cart-drawer-open {
    overflow: hidden;
}

/* ── Overlay (scrim) ── */
#cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#cart-drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ── Drawer panel ── */
#cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    z-index: 10001;
    transform: translateX(100%);
    transition: transform 0.36s cubic-bezier(0.32, 0, 0.16, 1);
    will-change: transform;
    display: flex;
    flex-direction: column;
}

#cart-drawer.is-open {
    transform: translateX(0);
}

/* Inner wrapper carries the background so we can animate the panel cleanly */
.cd-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg);
    border-left: 1px solid var(--border);
    overflow: hidden;
}

[data-theme="dark"] .cd-inner {
    background: #141414;
    border-left-color: rgba(255,255,255,0.08);
}

/* ── Header ── */
.cd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.cd-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}

.cd-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
}

.cd-close:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

/* ── Body (scrollable items) ── */
.cd-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    /* Custom thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.cd-body::-webkit-scrollbar { width: 4px; }
.cd-body::-webkit-scrollbar-track { background: transparent; }
.cd-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Skeleton loader ── */
.cd-skeleton {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cd-skeleton__item {
    height: 80px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    background-image: linear-gradient(
        90deg,
        var(--bg-secondary) 0%,
        var(--border-subtle) 50%,
        var(--bg-secondary) 100%
    );
    background-size: 200% 100%;
    animation: cd-shimmer 1.4s ease infinite;
}

@keyframes cd-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Items list ── */
.cd-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cd-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-subtle);
    transition: opacity 0.2s ease, background 0.15s ease;
}

.cd-item:last-child {
    border-bottom: none;
}

.cd-item:hover {
    background: var(--bg-secondary);
}

.cd-item.is-removing {
    opacity: 0.35;
    pointer-events: none;
}

.cd-item__img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: block;
    border: 1px solid var(--border-subtle);
}

.cd-item__img--placeholder {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.cd-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cd-item__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition);
}

.cd-item__name:hover {
    color: var(--accent);
}

.cd-item__price {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
}

.cd-item__remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), opacity var(--transition);
    /* Always visible at low opacity — clear on mobile without hover */
    opacity: 0.45;
}

.cd-item:hover .cd-item__remove,
.cd-item__remove:focus-visible {
    opacity: 1;
}

.cd-item__remove:hover {
    background: rgba(232, 53, 42, 0.1);
    color: var(--accent);
    opacity: 1;
}

/* ── Empty state ── */
.cd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 64px 24px;
    text-align: center;
    color: var(--text-muted);
}

.cd-empty svg {
    opacity: 0.3;
}

.cd-empty__msg {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}

.cd-empty__cta {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition);
}

.cd-empty__cta:hover {
    border-bottom-color: var(--accent);
}

/* ── Error state ── */
.cd-error {
    padding: 32px 24px;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    text-align: center;
}

.cd-error a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Footer ── */
.cd-footer {
    flex-shrink: 0;
    padding: 20px 24px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg);
}

[data-theme="dark"] .cd-footer {
    background: #141414;
}

.cd-footer--hidden {
    display: none !important;
}

.cd-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.cd-total__label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.cd-total__price {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
}

.cd-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: var(--font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), transform 0.15s ease;
    letter-spacing: -0.01em;
    text-align: center;
}

.cd-checkout-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    color: #fff;
}


/* ── Cart drawer "Pairs well with" ── */
.cd-pairs {
    padding: 16px 20px 8px;
    border-top: 1px solid var(--border);
}
.cd-pairs__heading {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.cd-pairs__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    transition: border-color var(--transition);
}
.cd-pairs__item:hover {
    border-color: rgba(0,0,0,0.12);
}
[data-theme="dark"] .cd-pairs__item:hover {
    border-color: rgba(255,255,255,0.12);
}
.cd-pairs__link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: var(--text);
}
.cd-pairs__link:hover {
    text-decoration: none;
    color: var(--text);
}
.cd-pairs__thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.cd-pairs__thumb--empty {
    background: var(--bg);
}
.cd-pairs__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.cd-pairs__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-pairs__price {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.cd-pairs__add {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.cd-pairs__add:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cd-pairs__add.is-loading {
    opacity: 0.5;
    pointer-events: none;
}


/* ── Fly-to-cart particle ── */
.cart-fly-particle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(232, 53, 42, 0.6);
}

/* ── Cart icon bounce when particle lands ── */
@keyframes cd-cart-bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.32); }
    55%  { transform: scale(0.92); }
    75%  { transform: scale(1.12); }
    90%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}

.nav-cart.cart-bounce {
    animation: cd-cart-bounce 0.46s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    #cart-drawer,
    #cart-drawer-overlay {
        transition: none;
    }
    .cd-skeleton__item {
        animation: none;
    }
    .nav-cart.cart-bounce {
        animation: none;
    }
}

/* ── Responsive ── */
@media (max-width: 480px) {
    #cart-drawer {
        width: 100vw;
    }
    .cd-header {
        padding: 16px 20px;
    }
    .cd-item {
        padding: 14px 20px;
    }
    .cd-footer {
        padding: 16px 20px 20px;
    }
}

/* ═══════════════════════════════════════════════════════
   CHECKOUT PAGE — PREMIUM DESIGN
═══════════════════════════════════════════════════════ */

/* ── Page reset — hide main nav, full-width focus ── */

/* Checkout gets its own topbar — hide the site nav entirely */
.woocommerce-checkout .site-nav {
    display: none !important;
}

.woocommerce-checkout .site-main {
    padding-top: 0 !important;
}

.admin-bar.woocommerce-checkout .site-main {
    padding-top: 0 !important;
}

.woocommerce-checkout .site-container {
    max-width: none;
    padding: 0;
}

/* ── Checkout topbar — injected via render_block filter ── */
.checkout-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 40px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 100;
}

.admin-bar .checkout-topbar {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .checkout-topbar {
        top: 46px;
    }
}

.checkout-topbar__logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none !important;
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.checkout-topbar__logo svg {
    flex-shrink: 0;
}

.checkout-topbar__secure {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ── Checkout layout wrapper ── */
.checkout-layout {
    max-width: 1120px;
    margin: 0 auto;
    padding: 48px 40px 80px;
}

/* Override WC block's sidebar layout inside our wrapper */
.checkout-layout .wc-block-components-sidebar-layout {
    padding: 0;
    gap: clamp(32px, 5vw, 72px);
    align-items: flex-start;
}

/* ── Step sections ── */

/* Reset + counter on the form */
.wc-block-checkout__form {
    counter-reset: checkout-steps;
}

.wc-block-components-checkout-step {
    counter-increment: checkout-steps;
    padding: 32px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.wc-block-components-checkout-step:last-child {
    border-bottom: none;
    padding-bottom: 8px;
}

/* Heading row: number badge + title */
.wc-block-components-checkout-step__heading-container {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}

.wc-block-components-checkout-step__heading-container::before {
    content: counter(checkout-steps);
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--text);
    color: var(--bg);
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 3px;
    letter-spacing: 0;
}

.wc-block-components-checkout-step__heading {
    flex: 1;
}

.wc-block-components-title.wc-block-components-checkout-step__title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--text) !important;
    margin: 0 !important;
    text-transform: none !important; /* WC Blocks forces uppercase — override it */
}

/* ── Form fields ── */
.wc-block-components-checkout-step__content .wc-block-components-text-input input,
.wc-block-components-checkout-step__content .wc-blocks-components-select__select {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.wc-block-components-checkout-step__content .wc-block-components-text-input input:focus,
.wc-block-components-checkout-step__content .wc-blocks-components-select__select:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
    outline: none;
}

[data-theme="dark"] .wc-block-components-checkout-step__content .wc-block-components-text-input input:focus,
[data-theme="dark"] .wc-block-components-checkout-step__content .wc-blocks-components-select__select:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

/* ── Payment options ── */
.wc-block-components-radio-control {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    background: var(--bg);
}

.wc-block-components-radio-control-accordion-option:has(input:checked),
.wc-block-components-radio-control__option:has(input:checked) {
    border-color: var(--text);
    background: var(--bg-secondary);
}

.wc-block-components-radio-control-accordion-option input[type="radio"],
.wc-block-components-radio-control__option input[type="radio"] {
    accent-color: var(--text);
}

/* Payment method logos/icons row */
.wc-block-components-payment-method-icons {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.wc-block-components-payment-method-label__icon-wrapper {
    height: 22px;
    display: flex;
    align-items: center;
}

/* ── Actions row (Place order + Return to cart + trust strip + terms) ── */
.wc-block-checkout__actions_row {
    padding-top: 24px;
    gap: 12px;
}

.wc-block-components-checkout-place-order-button {
    order: -1; /* Show above return button */
    border-radius: var(--radius-sm) !important;
    font-size: 1rem !important;
    padding: 16px 28px !important;
    letter-spacing: -0.015em !important;
}

/* Trust note — last element in the actions row, after terms */
.wc-block-checkout__actions_row::after {
    content: 'SSL encrypted · No account required · Personal use license';
    display: block;
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-align: center;
    padding-top: 0;
    letter-spacing: 0.01em;
    font-family: var(--font-sans);
    opacity: 0.45;
    line-height: 1.6;
    order: 15; /* after terms (10) */
}

.wc-block-components-checkout-return-to-cart-button {
    font-size: 0.8125rem !important;
    color: var(--text-muted) !important;
    border: none !important;
    background: none !important;
    padding: 8px 0 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    width: auto !important;
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
}

.wc-block-components-checkout-return-to-cart-button svg {
    display: none; /* hide back arrow on this link */
}

.wc-block-components-checkout-return-to-cart-button:hover {
    color: var(--text) !important;
    border: none !important;
}

/* ── Sidebar (order summary) ── */
.wc-block-checkout__sidebar {
    top: 100px; /* below topbar */
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .wc-block-checkout__sidebar {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.08);
    box-shadow: none;
}

/* Order summary title — parent selector wins specificity battle */
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--border) !important;
    cursor: default !important;
    pointer-events: none !important;
}

.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text p,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text span {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-price,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-price span {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

/* Order items — 3-col grid: thumb | info | price */
.wc-block-checkout__sidebar .wc-block-components-order-summary-item {
    display: grid !important;
    grid-template-columns: 52px 1fr auto !important;
    gap: 0 12px !important;
    align-items: start !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.wc-block-checkout__sidebar .wc-block-components-order-summary-item:last-child {
    border-bottom: none !important;
}

.wc-block-checkout__sidebar .wc-block-components-order-summary-item__image img {
    width: 52px !important;
    height: 52px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-subtle) !important;
    object-fit: cover !important;
    display: block !important;
}

/* Hide short description — clutters the sidebar */
.wc-block-checkout__sidebar .wc-block-components-product-metadata__description,
.wc-block-checkout__sidebar .wc-block-components-product-metadata {
    display: none !important;
}

/* Hide duplicate inline price (we show it in the right column) */
.wc-block-checkout__sidebar .wc-block-components-order-summary-item__description .wc-block-components-product-price {
    display: none !important;
}

.wc-block-checkout__sidebar .wc-block-components-order-summary-item__description {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.wc-block-checkout__sidebar .wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1.4 !important;
}

.wc-block-checkout__sidebar .wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
}

/* Quantity badge */
.wc-block-checkout__sidebar .wc-block-components-order-summary-item__quantity {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    top: -5px !important;
    right: -5px !important;
}

/* Totals in sidebar */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
    margin-top: 20px;
}

.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.25rem;
    font-weight: 800;
}

/* ── Checkout responsive ── */
@media (max-width: 900px) {
    .checkout-topbar {
        padding: 16px 24px;
    }

    .checkout-layout {
        padding: 32px 24px 60px;
    }

    .wc-block-checkout__sidebar {
        position: static;
    }

    /* On mobile, order summary first */
    .wc-block-components-sidebar-layout .wc-block-components-sidebar {
        order: -1;
    }

    .wc-block-components-checkout-order-summary__title {
        pointer-events: auto; /* re-enable toggle on mobile */
        cursor: pointer;
    }
}

@media (max-width: 600px) {
    .checkout-topbar {
        padding: 14px 20px;
    }

    .checkout-layout {
        padding: 24px 20px 48px;
    }

    .wc-block-components-checkout-step {
        padding: 24px 0;
    }

    .wc-block-checkout__actions_row::after {
        font-size: 0.6875rem;
    }
}

/* ═══════════════════════════════════════════════════════
   STRIPE / EXPRESS CHECKOUT — POLISH
   UX principles: visible labels, 44px+ touch targets,
   consistent border language, minimal noise
═══════════════════════════════════════════════════════ */

/* "EXPRESS CHECKOUT" → small muted uppercase label (not an h2 heading) */
.wc-block-components-express-payment__title-container {
    padding-bottom: 14px;
}

.wc-block-components-express-payment__title {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Remove WC's default card/border wrapping the button area */
.wc-block-components-express-payment__content {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* Gap between Apple Pay / G Pay / Link buttons */
.wc-block-components-express-payment__event-buttons {
    gap: 10px !important;
    display: flex !important;
    width: 100% !important;
}

/* "Or continue below" → proper centered rule with lines on both sides */
.wc-block-components-express-payment-continue-rule {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 28px 0 !important;
    color: var(--text-muted) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--border) !important;
    display: block !important;
}

/* Apple Pay + Google Pay placeholder fix — when the device doesn't
   support either, Stripe Elements still renders the wrapper divs as
   ~1px-tall boxes with visible borders, which read as two thin black
   horizontal lines flanking the centered Link button. The real
   buttons (when present) style themselves inside their iframes, so
   the wrapper border isn't needed in any case. */
#wc-stripe-express-checkout-element-applePay,
#wc-stripe-express-checkout-element-googlePay {
    border: none !important;
}

/* ── Stripe test-mode instruction banner ── */
.wc-stripe-payment-method-instruction {
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
    line-height: 1.55 !important;
}

.wc-stripe-payment-method-instruction strong {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

/* ── Payment accordion (Stripe "Card" selected option) ── */
.wc-block-components-radio-control-accordion-option {
    border-color: var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 16px 18px !important;
    background: var(--bg) !important;
}

.wc-block-components-radio-control-accordion-option:has(input:checked) {
    border-color: var(--text) !important;
    background: var(--bg) !important;
}

/* Stripe card iframe container — breathing room */
.wc-block-components-radio-control-accordion-content {
    padding: 16px 0 4px !important;
}

/* ── Form fields — UX rule: min 44px touch target ──
   padding 15px×2 + 1rem(16px) + 2px border ≈ 48px total height */
.wc-block-components-text-input input,
.wc-blocks-components-select__select {
    padding: 15px 16px !important;
    min-height: 52px !important;
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    background: var(--bg) !important; /* overrides WC Blocks' hardcoded #fff in all themes */
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
    border-color: var(--text) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
}

[data-theme="dark"] .wc-block-components-text-input input:focus,
[data-theme="dark"] .wc-blocks-components-select__select:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07) !important;
}

/* Step-scoped fields — same height standard */
.wc-block-components-checkout-step__content .wc-block-components-text-input input,
.wc-block-components-checkout-step__content .wc-blocks-components-select__select {
    padding: 15px 16px !important;
    min-height: 52px !important;
}

/* Floating label — recalibrate for taller inputs */
.wc-block-components-text-input .wc-block-components-text-input__label {
    top: 50% !important;
    left: 16px !important;
    font-size: 0.9375rem !important;
    color: var(--text-muted) !important;
}

.wc-block-components-text-input.is-active .wc-block-components-text-input__label,
.wc-block-components-text-input input:focus ~ .wc-block-components-text-input__label,
.wc-block-components-text-input input:not(:placeholder-shown) ~ .wc-block-components-text-input__label {
    top: 0 !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--text-secondary) !important;
}

/* Newsletter checkbox — generous spacing */
.wc-block-components-checkout-step__content .wc-block-components-checkbox {
    margin: 12px 0 4px !important;
}

.wc-block-components-checkbox__label {
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.4 !important;
}

/* ── Place Order — explicit primary CTA styling ── */
.wc-block-components-checkout-place-order-button {
    order: -1 !important;
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    width: 100% !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    font-family: var(--font-sans) !important;
    letter-spacing: -0.02em !important;
    padding: 17px 28px !important;
    cursor: pointer !important;
    transition: opacity 0.18s ease !important;
}

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

/* ═══════════════════════════════════════════════════════
   v1.0.64 — CHECKOUT REDESIGN: FIX ALL VISUAL ISSUES
   Matching store page design language:
   flat/minimal, Inter font, #E8352A accent, clean spacing
═══════════════════════════════════════════════════════ */

/* ── 1. SIDEBAR: remove floating card effect ── */
.wc-block-checkout__sidebar {
    box-shadow: none !important;
}

/* ── 2. SIDEBAR: collapse excessive wrapper spacing ──
   WC blocks stacks multiple .wc-block-components-totals-wrapper
   divs with margin-top:20px + padding:16px each — this creates
   the giant gap seen between items/coupons/subtotal/total */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Cart items section — sits directly under the title/separator */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-cart-items-block {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
}

/* Coupon row — separated with hairline, tight padding */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
    margin-top: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Totals rows: Subtotal */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-totals-block {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.wc-block-checkout__sidebar .wc-block-components-totals-item {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin: 0 !important;
    border: none !important;
}

/* Total row — visually heavier */
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
    border-top: 1px solid var(--border) !important;
    margin-top: 4px !important;
    padding-top: 14px !important;
    padding-bottom: 6px !important;
}

.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}

.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.0625rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    letter-spacing: -0.03em !important;
}

/* Product prices in sidebar — dark, not muted */
.wc-block-checkout__sidebar .wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* Subtotal label and value */
.wc-block-checkout__sidebar .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__label {
    font-size: 0.8125rem !important;
    color: var(--text-muted) !important;
}

.wc-block-checkout__sidebar .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__value {
    font-size: 0.8125rem !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* ── 3. FLOATING LABEL: fix overlap when field has a value ──
   WC blocks adds .is-active when field has content.
   Default padding:15px 16px means value text starts at 15px,
   but the label also lives at that Y — they collide.
   Fix: asymmetric top padding when label is floating. */
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input:focus-within input {
    padding-top: 22px !important;
    padding-bottom: 8px !important;
}

/* Label when floating (active state) */
.wc-block-components-text-input.is-active .wc-block-components-text-input__label,
.wc-block-components-text-input:focus-within .wc-block-components-text-input__label {
    top: 8px !important;
    transform: none !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.02em !important;
    color: var(--text-muted) !important;
}

/* ── 4. INPUT / SELECT: consistent border-radius and height ──
   Fields currently render with mismatched rounding.
   Store page uses flat/minimal — 4px is the correct radius. */
.wc-block-components-text-input,
.wc-block-components-text-input input,
.wc-blocks-components-select,
.wc-blocks-components-select select,
.wc-blocks-components-select__select {
    border-radius: 4px !important;
}

/* Select wrapper — needs explicit border so it looks like a field */
.wc-blocks-components-select {
    border: 1px solid var(--border) !important;
    background: var(--bg) !important;
    position: relative !important;
}

/* Make select fill its wrapper cleanly */
.wc-blocks-components-select__select {
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 40px 14px 16px !important;
    font-size: 0.9375rem !important;
    color: var(--text) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

/* Select with floating label (State, Country) — asymmetric padding */
.wc-blocks-components-select.is-active .wc-blocks-components-select__select,
.wc-blocks-components-select:focus-within .wc-blocks-components-select__select {
    padding-top: 22px !important;
    padding-bottom: 8px !important;
}

/* Focus state for select wrapper */
.wc-blocks-components-select:focus-within {
    border-color: var(--text) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
}

/* ── 5. FOOTER: fix left-clip on checkout page ──
   .site-footer .site-container loses its horizontal padding
   in the checkout context — content bleeds to viewport edge. */
.woocommerce-checkout .site-footer .site-container {
    padding-left: clamp(24px, 4vw, 48px) !important;
    padding-right: clamp(24px, 4vw, 48px) !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* ── 6. QUANTITY BADGE: match the minimal flat aesthetic ── */
.wc-block-checkout__sidebar .wc-block-components-order-summary-item__quantity {
    background: var(--text) !important;
    color: var(--bg) !important;
    border: none !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── 7. SIDEBAR ORDER SUMMARY TITLE: uppercase label style ── */
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border) !important;
}

/* ── 8. COUPON ACCORDION: clean arrow, no default WC styling ── */
.wc-block-checkout__sidebar .wc-block-components-panel__button {
    font-size: 0.8125rem !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* ── 9. STEP HEADING: badge inline with title ──
   WC blocks wraps the step heading inconsistently;
   force the container to be a proper flex row. */
.wc-block-components-checkout-step__heading-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

/* ── 10. FORM FIELD GAPS: tighten vertical rhythm ── */
.wc-block-components-checkout-step__content .wc-block-components-address-form,
.wc-block-components-checkout-step__content .wc-block-components-form {
    gap: 12px !important;
}

/* Field rows (2-column grids) */
.wc-block-components-checkout-step__content .wc-block-components-address-form__field-wrapper {
    gap: 12px !important;
}

/* ── 11. TOTAL MONEY AMOUNT: override nested span gray color ──
   WC Blocks nests a wc-block-formatted-money-amount span inside the value
   div with its own gray color — must target it explicitly. */
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
    color: var(--text) !important;
}

/* Also ensure all money amounts in the sidebar are styled consistently */
.wc-block-checkout__sidebar .wc-block-components-totals-item__value .wc-block-formatted-money-amount {
    color: inherit !important;
}

/* ═══════════════════════════════════════════════════════
   v1.0.66 — NAV RESTORE · SELECT HEIGHT · FLOATING LABELS
═══════════════════════════════════════════════════════ */

/* ── 1. RESTORE FULL SITE NAV ON CHECKOUT ──
   We previously hid .site-nav in favour of a custom topbar.
   User prefers the consistent site navigation. */
.woocommerce-checkout .site-nav {
    display: block !important;
}

/* ── 2. HIDE CUSTOM CHECKOUT TOPBAR ──
   No longer needed — site nav is visible above. */
.woocommerce-checkout .checkout-topbar {
    display: none !important;
}

/* ── 3. RESTORE SITE-MAIN PADDING ──
   Site nav is position:fixed (80px). Content must clear it. */
.woocommerce-checkout .site-main {
    padding-top: 80px !important;
}
.admin-bar.woocommerce-checkout .site-main {
    padding-top: 112px !important; /* 80px nav + 32px admin bar */
}
@media screen and (max-width: 782px) {
    .admin-bar.woocommerce-checkout .site-main {
        padding-top: 126px !important; /* 80px nav + 46px mobile admin bar */
    }
}

/* ── 4. FIX SELECT WRAPPER HEIGHT ──
   .wc-blocks-components-select wrapper defaults to 70px in WC Blocks.
   Constrain to 52px to match text input height. */
.wc-blocks-components-select {
    min-height: 52px !important;
    height: 52px !important;
    overflow: hidden !important;
}

/* ── 5. FLOATING LABEL ON COUNTRY / STATE SELECTS ──
   Country/Region and State always have a value — the label should
   always float to the top and the value sit in the lower portion. */
.wc-block-components-country-input .wc-blocks-components-select__select,
.wc-block-components-state-input .wc-blocks-components-select__select {
    padding-top: 22px !important;
    padding-bottom: 8px !important;
}


/* ═══════════════════════════════════════════════════════
   v1.0.67 — NAV DISPLAY FIX · EXPRESS CHECKOUT SPACING
═══════════════════════════════════════════════════════ */

/* ── 1. NAV: block display (not flex) matches homepage behaviour ──
   The original .site-nav is display:block. v1.0.66 incorrectly set flex,
   which caused .nav-inner to shrink-wrap content (1014px) instead of
   filling to its max-width (1400px). This rule overrides v1.0.66. */
.woocommerce-checkout .site-nav {
    display: block !important;
}

/* ── 2. EXPRESS CHECKOUT: breathing room between title and buttons ──
   WC Blocks default only gives 14px paddingBottom on the title container.
   Increase so "EXPRESS CHECKOUT" label doesn't crowd the payment buttons. */
.wc-block-components-express-payment__title-container {
    padding-bottom: 24px !important;
}

/* ── 3. EXPRESS CHECKOUT: space below buttons before the divider ──
   Small bottom margin so buttons don't crowd "OR CONTINUE BELOW". */
.wc-block-components-express-payment__event-buttons {
    margin-bottom: 8px !important;
}

/* ═══════════════════════════════════════════════════════
   v1.0.68 — MOBILE ORDER SUMMARY FIX · DARK MODE AUDIT
═══════════════════════════════════════════════════════ */

/* ── 1. MOBILE SIDEBAR: kill sticky so it doesn't overlap content ──
   position:sticky !important (line 1485) overrides the earlier media-query
   position:static without !important. Also reset top/max-height/overflow
   that were set for the desktop sticky column. */
@media (max-width: 900px) {
    .wc-block-cart__sidebar,
    .wc-block-checkout__sidebar {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* ── 2. RE-ENABLE ACCORDION TOGGLE ON MOBILE ──
       pointer-events:none was set on desktop to prevent toggling.
       On mobile WC Blocks renders the sidebar as a collapsible — restore it. */
    .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* ── 3. SITE NAV PADDING — mobile admin bar is 46px ──
       Ensure content clears nav (80px) + mobile admin bar (46px). */
    .admin-bar.woocommerce-checkout .site-main {
        padding-top: 126px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   v1.0.69 — DARK MODE INPUT FIX · MOBILE MAX-HEIGHT FIX
═══════════════════════════════════════════════════════ */

/* ── 1. MOBILE: also reset admin-bar sidebar max-height ──
   .admin-bar .wc-block-checkout__sidebar has higher specificity than
   our earlier mobile reset, so we need to override it explicitly. */
@media (max-width: 900px) {
    .admin-bar .wc-block-checkout__sidebar {
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* ═══════════════════════════════════════════════════════
   v1.0.70 — EXPRESS CHECKOUT: pull title into normal flow
═══════════════════════════════════════════════════════ */

/* ── WC Blocks sets position:absolute; top:-4px on the title container ──
   This renders the "EXPRESS CHECKOUT" label layered behind the Stripe button
   iframes, making it invisible. Pull it into the document flow so it appears
   above the buttons as a proper divider. padding-top only works in-flow. */
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container,
.wc-block-components-express-payment__title-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    padding-top: 28px !important;
    padding-bottom: 20px !important;
}

/* ═══════════════════════════════════════════════════════
   v1.0.72 — DARK MODE INPUT FIXES · STEP NUMBER ALIGNMENT
═══════════════════════════════════════════════════════ */

/* ── 1. SELECT CONTAINER: WC Blocks hardcodes background:rgb(255,255,255) ──
   on .wc-blocks-components-select .wc-blocks-components-select__container
   (checkout.css). The <select> itself is transparent, so the white bleeds
   through. Override the container to match the theme background. */
.wc-blocks-components-select .wc-blocks-components-select__container {
    background: var(--bg) !important;
}

/* ── 2. INPUT BORDERS: increase contrast in dark mode ──
   --border is #222222 in dark mode — barely distinguishable from
   the #0a0a0a page background. Lift to #383838 so inputs have
   a clear visual boundary without being harsh. */
[data-theme="dark"] .wc-block-components-text-input input,
[data-theme="dark"] .wc-blocks-components-select__select {
    border-color: #383838 !important;
}

/* ── 3. STEP NUMBER CIRCLE: remove margin-top offset ──
   The ::before circle was nudged 3px down for flex-start alignment.
   The container now uses align-items:center (line 3074), so the offset
   shifts the circle below center. Reset it to let centering take over. */
.wc-block-components-checkout-step__heading-container::before {
    margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   v1.0.73 — STEP CIRCLE ALIGNMENT · INPUT BACKGROUNDS
═══════════════════════════════════════════════════════ */

/* ── 1. HEADING DIV MARGIN: move spacing off the flex child ──
   Line 1335 sets margin-bottom:20px on .wc-block-components-checkout-step__heading.
   That div is a flex item in a row container. In flexbox, a flex item's margin
   participates in cross-axis sizing — so the 20px margin-bottom inflates the
   container from 26px (circle height) to 42.4px, which causes align-items:center
   to center the circle at 21.2px instead of at 13px (center of 26px circle vs
   center of 22.4px text). The spacing already exists on the container itself
   (margin-bottom:20px !important at line 3074). Zero out the child margin. */
.wc-block-components-checkout-step__heading {
    margin-bottom: 0 !important;
}

/* ── 2. INPUT BACKGROUNDS: subtle gray lift in dark mode ──
   Text inputs and select containers render the same #0a0a0a as the page,
   making fields invisible unless the border is focused. Give them a slightly
   elevated surface so they read as interactive input fields at a glance. */
[data-theme="dark"] .wc-block-components-text-input input,
[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__container,
[data-theme="dark"] .wc-blocks-components-select__select {
    background: #161616 !important;
}

/* ═══════════════════════════════════════════════════════
   v1.0.74 — FORM GRID MARGINS · NEWSLETTER CHECKBOX
   (v1.0.75 patched: scoped margin reset to inner forms)
═══════════════════════════════════════════════════════ */

/* ── 1. ZERO OUT WC BLOCKS' STACKED MARGINS — SCOPED TO INNER FORMS ──
   packages-style.css / checkout.css set margin-bottom:16px on step-content
   children and margin-top:12px on text inputs. These stack with the grid gap
   creating ~40px gutters. Scope the reset to forms INSIDE step content only
   (not the outer .wc-block-checkout__form whose children are the steps). */
.wc-block-components-checkout-step__content .wc-block-components-address-form > *,
.wc-block-components-checkout-step__content .wc-block-components-form > *,
.wc-block-components-checkout-step__content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── 2. NEWSLETTER CHECKBOX: span both grid columns ── */
.wc-block-components-address-form .wc-block-components-checkbox,
.wc-block-components-form .wc-block-components-checkbox {
    grid-column: 1 / -1 !important;
}

/* ═══════════════════════════════════════════════════════
   v1.0.75 — CHECKOUT SPACING OVERHAUL (8dp rhythm)
   Spacing tiers: 8 · 12 · 16 · 24
     24px — section padding (between steps)
     16px — heading → form content
     12px — form field grid gap
      8px — internal component padding
═══════════════════════════════════════════════════════ */

/* ── 1. STEP PADDING: beat WC Blocks' 2-class override ──
   packages-style.css sets .wc-block-components-form .wc-block-components-checkout-step
   { padding: 0 } — 2-class specificity beats our 1-class rule. Match the
   selector and add !important for a clean 24px vertical rhythm. */
.wc-block-components-form .wc-block-components-checkout-step {
    padding: 24px 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}
.wc-block-components-form .wc-block-components-checkout-step:last-child {
    border-bottom: none !important;
    padding-bottom: 8px !important;
}
/* First step: no top padding (express checkout provides its own) */
.wc-block-components-form .wc-block-components-checkout-step:first-child {
    padding-top: 0 !important;
}

/* ── 2. HEADING → CONTENT GAP: 16px (down from 20px) ── */
.wc-block-components-checkout-step__heading-container {
    margin-bottom: 16px !important;
}

/* ── 3. EXPRESS CHECKOUT: tighter vertical rhythm ──
   Pull the EXPRESS CHECKOUT section closer together. */
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container,
.wc-block-components-express-payment__title-container {
    padding-top: 16px !important;
    padding-bottom: 12px !important;
}
.wc-block-components-express-payment__event-buttons {
    margin-bottom: 4px !important;
}
/* OR CONTINUE BELOW divider */
.wc-block-components-express-payment-continue-rule {
    margin: 16px 0 !important;
}

/* ── 4. FORM GRID GAP: consistent 12px ── */
.wc-block-components-checkout-step__content .wc-block-components-address-form,
.wc-block-components-checkout-step__content .wc-block-components-form {
    gap: 12px !important;
}

/* ── 5. "+ ADD APARTMENT" TOGGLE: pull into grid rhythm ── */
.wc-block-components-address-form__address_2-toggle {
    margin-top: -4px !important;
    margin-bottom: 0 !important;
}

/* ── 6. INPUT FIELD RADIUS: subtle rounding ── */
.wc-block-components-text-input input,
.wc-blocks-components-select .wc-blocks-components-select__container {
    border-radius: 6px !important;
}

/* ── 7. SIDEBAR ORDER SUMMARY: tighten spacing ── */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
    padding: 12px 0 !important;
}

/* ═══════════════════════════════════════════════════════
   v1.0.76 — PAYMENT BORDERS + BOTTOM SPACING CLEANUP
   Fixes:
     · Remove border-bottom on all steps (padding gap is enough)
     · Zero out WC Blocks' stacked margin-bottom on steps
     · Target order-notes step directly (not :last-child — actions
       block follows it, so :last-child never matched)
     · Remove payment method ::after outline (visible in dark mode)
     · Fix checked option bg in dark mode (rgb(246,246,246) = bright white)
     · Remove terms separator border-top + tighten vertical spacing
═══════════════════════════════════════════════════════ */

/* ── 1. STEP BORDERS + DOUBLE MARGIN ──
   Our v1.0.75 border-bottom is removed — padding provides separation.
   WC Blocks sets margin: 0 0 24px on steps; zero it to avoid
   stacking with our 24px padding-bottom. */
.wc-block-components-form .wc-block-components-checkout-step {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* ── 2. ORDER NOTES STEP: tighter bottom padding ──
   .wc-block-checkout__order-notes is NOT :last-child of the form —
   the actions block (Place Order button) follows it as the real
   last child. Target it directly. */
.wc-block-checkout__order-notes.wc-block-components-checkout-step {
    padding-bottom: 8px !important;
}

/* ── 3. PAYMENT METHOD OUTLINE: remove ::after border ──
   --highlight-checked::after injects a border via color-mix() that
   renders as a faint white outline in dark mode around the payment area. */
.wc-block-components-radio-control--highlight-checked::after {
    border: none !important;
}

/* ── 4. DARK MODE: fix checked payment option background ──
   WC Blocks sets rgb(246,246,246) on .radio-control__option-checked —
   that's bright white on a dark surface. Match the input surface color. */
[data-theme="dark"] .wc-block-components-radio-control__option-checked {
    background: #161616 !important;
}

/* ── 5. TERMS BLOCK: remove separator border + tighten spacing ──
   checkout.css adds border-top via --with-separator class.
   Remove it; order-notes padding-bottom provides the gap. */
.wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
    border-top: none !important;
    padding-top: 8px !important;
    margin-bottom: 8px !important;
}

/* ═══════════════════════════════════════════════════════
   v1.0.77 — RESPONSIVE ORDER SUMMARY FIX (updated in 1.0.78)
   position:sticky !important removed at is-small; static flow.
═══════════════════════════════════════════════════════ */

/* Reset sticky + accent border at mobile */
.wc-block-components-sidebar-layout.is-small .wc-block-checkout__sidebar {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    border-top: 1px solid var(--border) !important;
    padding: 16px !important;
}

/* ═══════════════════════════════════════════════════════
   v1.0.78 — MOBILE ORDER SUMMARY: right place, right look
   Design decision: hide the top sidebar toggle entirely and
   let the full order summary block inside .wc-block-checkout__actions
   do all the work — it renders just above the Place Order button,
   which is the correct placement (review → pay in one scroll).

   The v1.0.77 approach (top toggle + hide duplicate) had the
   logical flow backwards: ORDER SUMMARY at the very top, Place Order
   at the very bottom. Hiding the top sidebar and keeping only the
   actions-area block fixes this.

   Styling: mirror the desktop sidebar card — bg-secondary, border,
   proper padding, matching item grid/typography.
═══════════════════════════════════════════════════════ */

/* ── 1. HIDE THE TOP SIDEBAR TOGGLE AT MOBILE ──
   No more order summary header floating above the form. */
.wc-block-components-sidebar-layout.is-small .wc-block-checkout__sidebar {
    display: none !important;
}

/* ── 2. RESTORE + STYLE THE ACTIONS BLOCK ORDER SUMMARY ──
   Show the full summary block above the Place Order button. */
.wc-block-components-sidebar-layout.is-small
    .wc-block-checkout__actions
    .wp-block-woocommerce-checkout-order-summary-block {
    display: block !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    border-top: 3px solid var(--accent) !important;
    box-shadow: none !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}

[data-theme="dark"] .wc-block-components-sidebar-layout.is-small
    .wc-block-checkout__actions
    .wp-block-woocommerce-checkout-order-summary-block {
    background: #1a1a1a !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-top-color: var(--accent) !important;
}

/* ── 3. ORDER SUMMARY HEADING IN ACTIONS ──
   Match the "ORDER SUMMARY" label style from the desktop sidebar. */
.wc-block-components-sidebar-layout.is-small
    .wc-block-checkout__actions
    .wc-block-components-checkout-step__title {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    margin: 0 0 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border) !important;
}

/* ── 4. REMOVE INNER CARD BORDERS — we have outer card already ── */
.wc-block-components-sidebar-layout.is-small
    .wc-block-checkout__actions
    .checkout-order-summary-block-fill,
.wc-block-components-sidebar-layout.is-small
    .wc-block-checkout__actions
    .wc-block-components-totals-wrapper {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ── 5. TOTALS SPACING IN ACTIONS BLOCK ── */
.wc-block-components-sidebar-layout.is-small
    .wc-block-checkout__actions
    .wc-block-components-totals-wrapper {
    padding: 10px 0 !important;
}

/* ── 6. QUANTITY BADGE — match desktop sidebar style ── */
.wc-block-components-sidebar-layout.is-small
    .wc-block-checkout__actions
    .wc-block-components-order-summary-item__quantity {
    background: var(--text) !important;
    color: var(--bg) !important;
    border: none !important;
    font-size: 0.625rem !important;
    width: 18px !important;
    height: 18px !important;
    top: -5px !important;
    right: -5px !important;
}

/* ═══════════════════════════════════════════════════════
   v1.0.79 — MOBILE CHECKOUT: GAP + NAV SCROLL FIXES
   ① Admin bar double-count: WP adds html { margin-top: 46px } for the
     admin bar on mobile. Our site-main padding of 126px (80px nav + 46px
     admin bar) double-counts that 46px. Drop to 80px (nav height only)
     so content starts right at nav bottom instead of 46px below it.
   ② Nav scroll gap: admin bar is position:absolute on mobile — it scrolls
     away. Our fixed nav at top:46px leaves a 46px dead zone above it once
     the admin bar is gone. Drop to top:0 so nav snaps to viewport edge.
═══════════════════════════════════════════════════════ */

/* ── 1. ADMIN BAR GAP FIX: remove double-counted offset ──
   html { margin-top: 32px } on desktop / 46px on mobile (WP).
   Correct padding = nav_height(80) - html_margin.
   Desktop: 80 - 32 = 48px. Mobile: 80 - 46 = 34px. */
.admin-bar.woocommerce-checkout .site-main {
    padding-top: 48px !important;  /* desktop: 80px nav - 32px html margin */
}

@media screen and (max-width: 782px) {
    .admin-bar.woocommerce-checkout .site-main {
        padding-top: 34px !important;  /* mobile: 80px nav - 46px html margin */
    }

    /* ── 2. NAV SCROLL FIX: no dead zone above nav after admin bar scrolls ── */
    .admin-bar.woocommerce-checkout .site-nav {
        top: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════
   v1.0.81 — MOBILE CHECKOUT: NOTE + TERMS POSITION
   JS moves .wc-block-checkout__order-notes and __terms
   inside .wc-block-checkout__actions, between the ORDER
   SUMMARY block and the Place Order row.
   These rules style them correctly in that context.
═══════════════════════════════════════════════════════ */

/* Separator above the note block when it's been moved inside actions */
@media (max-width: 782px) {
    .wc-block-checkout__actions .wc-block-checkout__order-notes {
        border-top: 1px solid var(--border) !important;
        padding-top: 16px !important;
        margin-top: 4px !important;
    }

    /* The order-notes step header is redundant — it's already labelled inside */
    .wc-block-checkout__actions .wc-block-checkout__order-notes
        .wc-block-components-checkout-step__heading {
        display: none !important;
    }

    /* Terms text — tighten spacing, no extra margin before Place Order */
    .wc-block-checkout__actions .wc-block-checkout__terms {
        padding: 12px 0 0 !important;
        margin: 0 !important;
    }

    /* Remove the horizontal rule WC Blocks adds above terms (separator-style) */
    .wc-block-checkout__actions .wc-block-checkout__terms--with-separator::before {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════
   v1.0.82 — ORDER SUMMARY POLISH + STATE ALIGNMENT + GOOGLE PAY

   ① ORDER SUMMARY SPACING: Empty discount/fee wrappers (no
     cart discounts or fees on this order) still consume 24px
     each from padding: 12px 0. Collapse them.
   ② ORDER SUMMARY TYPOGRAPHY: Unify item prices, subtotal,
     and total across desktop (sidebar) + mobile (actions block).
     Hide the redundant individual unit-price row below each
     product name — it duplicates the right-column total.
   ③ STATE SELECT ALIGNMENT: State dropdown always shows a
     floating label (top:6px) while empty text inputs use a
     centred placeholder. Remove the floating label and centre
     the select value to match text input placeholder behaviour.
   ④ GOOGLE PAY DARK MODE: The Stripe iframe renders Google Pay's
     default light-theme border. Use an inset box-shadow on a
     pseudo-element to cover the 1px internal border with the
     page background colour — matching Apple Pay's clean look.
═══════════════════════════════════════════════════════ */

/* ── 1. COLLAPSE EMPTY ORDER SUMMARY WRAPPER DIVS ────────────
   WC Blocks renders discount + fee blocks even when empty.
   padding:12px 0 on each = 48px dead space between Subtotal
   and Total. Use :empty to suppress them entirely. */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper:empty,
.wc-block-checkout__actions  .wc-block-components-totals-wrapper:empty,
.wp-block-woocommerce-checkout-order-summary-discount-block:empty,
.wp-block-woocommerce-checkout-order-summary-fee-block:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── 2a. ORDER SUMMARY — hide redundant individual unit price ──
   The "individual price" element shows the per-item price below
   the product name. When qty = 1 it's identical to the right-column
   total — pure clutter. */
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__individual-price {
    display: none !important;
}

/* ── 2b. UNIFIED TYPOGRAPHY — applies to BOTH contexts ──────── */

/* Product name: clear, medium weight */
.wc-block-components-order-summary-item
    .wc-block-components-product-name {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1.35 !important;
}

/* Item total price (right column): match name weight + colour
   3-class specificity to beat the existing sidebar rule at line ~2941 */
.wc-block-checkout__sidebar
    .wc-block-components-order-summary-item__total-price
    .wc-block-components-product-price__value,
.wc-block-checkout__actions
    .wc-block-components-order-summary-item__total-price
    .wc-block-components-product-price__value {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

/* Subtotal row: muted label, secondary value */
.wc-block-components-totals-item:not(.wc-block-components-totals-footer-item)
    .wc-block-components-totals-item__label {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}
.wc-block-components-totals-item:not(.wc-block-components-totals-footer-item)
    .wc-block-components-totals-item__value {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

/* Total row: prominent on both sides */
.wc-block-components-totals-footer-item
    .wc-block-components-totals-item__label {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}
.wc-block-components-totals-footer-item
    .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item
    .wc-block-formatted-money-amount {
    font-size: 1.0625rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    letter-spacing: -0.02em !important;
}

/* ── 3. STATE / COUNTRY SELECT ALIGNMENT ────────────────────────
   Selects use floating-label layout (padding-top:22px + label at
   top:6px) while empty text inputs centre their placeholder.
   Remove the floating label and let the native <select> centre
   its value — matching the text input placeholder position. */
.wc-blocks-components-select__label {
    display: none !important;
}
/* 2-class selector to beat WC Blocks' own 2-class rule in checkout.css */
.wc-blocks-components-select .wc-blocks-components-select__select {
    padding: 0 40px 0 16px !important;
}

/* ── 4. GOOGLE PAY DARK MODE BORDER ─────────────────────────────
   Stripe renders Google Pay inside an iframe with its own 1px border.
   We can't reach inside the iframe with CSS. Strategy: clip the wrapper
   tight so the iframe's internal border is cut off. The iframe uses
   margin:-4px to bleed 4px on each side — we clip it by setting
   the wrapper to overflow:hidden with a 1px inset via padding
   so the border falls outside the visible area. */
/* All express checkout button wrappers — clean in dark mode */
[data-theme="dark"] .wc-block-components-express-payment__event-buttons > li {
    overflow: hidden !important;
    border-radius: 6px !important;
    border: none !important;
    outline: none !important;
}
/* Google Pay dark-mode border fix: the Stripe iframe renders a visible
   1px border we can't reach. We cover it with a 3px inset black ring
   on both the wrapper AND an ::after overlay for full coverage. */
[data-theme="dark"]
    #express-payment-method-express_checkout_element_googlePay {
    background: #000 !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 0 3px #000 !important;
}
[data-theme="dark"]
    #express-payment-method-express_checkout_element_googlePay::after {
    content: '' !important;
    position: absolute !important;
    inset: -1px !important;
    border-radius: 6px !important;
    border: 3px solid #000 !important;
    pointer-events: none !important;
    z-index: 10 !important;
}
[data-theme="dark"]
    #express-payment-method-express_checkout_element_googlePay iframe {
    border: none !important;
    outline: none !important;
    display: block !important;
}
/* Also target any express button wrapper that Stripe uses */
[data-theme="dark"] .wc-block-components-express-payment__event-buttons > li > div {
    overflow: hidden !important;
    border-radius: 6px !important;
}

/* Express checkout buttons: prevent overflow on narrow screens.
   WooCommerce checkout.css sets min-width:150px with selector
   .wc-block-components-express-payment .wc-block-…__event-buttons > li
   so we must match that specificity. */
.wc-block-components-express-payment .wc-block-components-express-payment__event-buttons > li,
.wc-block-components-express-payment .wc-block-components-express-payment__event-buttons > div {
    min-width: 0 !important;
    flex: 1 1 0 !important;
}
@media (max-width: 480px) {
    .wc-block-components-express-payment__event-buttons {
        gap: 6px !important;
    }
}

/* ── 5. COUPON FORM — UNIFIED STYLING (both themes) ─────────────
   The coupon input and Apply button must match the site's form
   language: 6px radius, var(--border) borders, Inter font,
   matching heights, proper dark mode surfaces. */

/* Coupon form layout */
.wc-block-components-totals-coupon__form {
    display: flex !important;
    gap: 8px !important;
    align-items: stretch !important;
}

/* Coupon input — match billing form fields */
.wc-block-components-totals-coupon__input input,
.wc-block-components-totals-coupon input[type="text"] {
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    padding: 12px 14px !important;
    min-height: 48px !important;
    height: 48px !important;
    outline: none !important;
    transition: border-color 0.18s ease !important;
    box-sizing: border-box !important;
}
.wc-block-components-totals-coupon__input input:focus,
.wc-block-components-totals-coupon input[type="text"]:focus {
    border-color: var(--text) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="dark"] .wc-block-components-totals-coupon__input input,
[data-theme="dark"] .wc-block-components-totals-coupon input[type="text"] {
    background: #161616 !important;
    border-color: #383838 !important;
}
[data-theme="dark"] .wc-block-components-totals-coupon__input input:focus,
[data-theme="dark"] .wc-block-components-totals-coupon input[type="text"]:focus {
    border-color: var(--text) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07) !important;
}

/* Coupon floating label — match form field labels */
.wc-block-components-totals-coupon .wc-block-components-text-input__label {
    font-size: 0.875rem !important;
    color: var(--text-muted) !important;
}

/* Coupon input — asymmetric padding when field has content (is-active).
   Extra padding-top pushes the typed text below the floating label. */
.wc-block-components-totals-coupon .wc-block-components-text-input.is-active input,
.wc-block-components-totals-coupon .wc-block-components-text-input:focus-within input {
    padding-top: 24px !important;
    padding-bottom: 4px !important;
}
.wc-block-components-totals-coupon .wc-block-components-text-input.is-active .wc-block-components-text-input__label,
.wc-block-components-totals-coupon .wc-block-components-text-input:focus-within .wc-block-components-text-input__label {
    top: 4px !important;
    transform: none !important;
    font-size: 0.5625rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
}

/* Apply button — clean outlined style, both themes */
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon button[type="submit"] {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0 20px !important;
    min-height: 48px !important;
    height: 48px !important;
    cursor: pointer !important;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
.wc-block-components-totals-coupon__button:hover,
.wc-block-components-totals-coupon button[type="submit"]:hover {
    background: var(--text) !important;
    color: var(--bg) !important;
    border-color: var(--text) !important;
}
/* Dark mode refinements */
[data-theme="dark"] .wc-block-components-totals-coupon__button,
[data-theme="dark"] .wc-block-components-totals-coupon button[type="submit"] {
    border-color: #383838 !important;
    color: var(--text) !important;
}
[data-theme="dark"] .wc-block-components-totals-coupon__button:hover,
[data-theme="dark"] .wc-block-components-totals-coupon button[type="submit"]:hover {
    background: var(--text) !important;
    color: var(--bg) !important;
    border-color: var(--text) !important;
}
/* Disabled state (no code entered) — still visible but muted */
.wc-block-components-totals-coupon__button:disabled,
.wc-block-components-totals-coupon button[type="submit"]:disabled {
    opacity: 0.4 !important;
    cursor: default !important;
}

/* ═══════════════════════════════════════════════════════
   v1.0.84 — CHECKOUT COHERENCE PASS
   ① Remove jarring red accent bar from order summary
   ② Dark-mode Stripe card area: dark bg on container
   ③ Mobile sidebar: CSS-only hide before WC JS adds .is-small/.is-medium
   ④ Consistent "ORDER SUMMARY" heading in mobile actions block
   ⑤ Fix .is-small → also target .is-medium (WC Blocks uses is-medium
     at 390px, is-small only below ~300px)
═══════════════════════════════════════════════════════ */

/* ── 1. ORDER SUMMARY: remove red accent bar ──
   border-top: 3px solid var(--accent) is visually harsh.
   Replace with a clean 1px border matching the card outline. */
.wc-block-checkout__sidebar {
    border-top: 1px solid var(--border) !important;
}
[data-theme="dark"] .wc-block-checkout__sidebar {
    border-top-color: rgba(255,255,255,0.08) !important;
}
/* Mobile actions block summary — remove red bar (both is-small and is-medium) */
.wc-block-components-sidebar-layout.is-small
    .wc-block-checkout__actions
    .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar-layout.is-medium
    .wc-block-checkout__actions
    .wp-block-woocommerce-checkout-order-summary-block {
    border-top: 1px solid var(--border) !important;
}
[data-theme="dark"] .wc-block-components-sidebar-layout.is-small
    .wc-block-checkout__actions
    .wp-block-woocommerce-checkout-order-summary-block,
[data-theme="dark"] .wc-block-components-sidebar-layout.is-medium
    .wc-block-checkout__actions
    .wp-block-woocommerce-checkout-order-summary-block {
    border-top-color: rgba(255,255,255,0.08) !important;
}

/* ── 2. STRIPE CARD IFRAME: dark mode container ──
   Stripe controls the iframe internals, but the outer
   .wc-block-components-radio-control-accordion-content
   container can carry a dark bg + rounded corners so the
   white iframe edges don't flash against the dark page. */
[data-theme="dark"] .wc-block-components-radio-control-accordion-content {
    background: #1e1e1e !important;
    border-radius: 6px !important;
    padding: 16px 12px 8px !important;
}

/* ── 3. MOBILE SIDEBAR: CSS-only hide ──
   WC Blocks adds .is-small/.is-medium via JS after hydration. Between first
   paint and hydration, the sidebar renders with desktop styles.
   This media query hides it immediately so users never see a flash. */
@media (max-width: 900px) {
    .wc-block-checkout__sidebar {
        display: none !important;
    }
}

/* ── 4. MOBILE ORDER SUMMARY HEADING: match desktop uppercase ──
   The actions-area order summary uses "Order summary" (mixed case)
   from the step title. Force uppercase to match the desktop sidebar.
   Target both the H2 (.checkout-step__title) AND its parent div
   (.checkout-step__heading) which can override the H2 visually. */
.wc-block-components-sidebar-layout.is-small
    .wc-block-checkout__actions
    .wc-block-components-checkout-step__heading,
.wc-block-components-sidebar-layout.is-small
    .wc-block-checkout__actions
    .wc-block-components-checkout-step__title,
.wc-block-components-sidebar-layout.is-medium
    .wc-block-checkout__actions
    .wc-block-components-checkout-step__heading,
.wc-block-components-sidebar-layout.is-medium
    .wc-block-checkout__actions
    .wc-block-components-checkout-step__title {
    text-transform: uppercase !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    color: var(--text-muted) !important;
}

/* ── 5. is-medium MIRROR: replicate all is-small mobile rules ──
   WC Blocks applies .is-medium at typical mobile widths (375-600px)
   and .is-small only at very narrow viewports (<300px). All the mobile
   checkout rules from v1.0.77-78 targeted .is-small — mirror them. */

/* Hide sidebar at is-medium (matches the is-small hide at line 3478) */
.wc-block-components-sidebar-layout.is-medium .wc-block-checkout__sidebar {
    display: none !important;
}

/* Show + style the actions block order summary (mirrors line 3483) */
.wc-block-components-sidebar-layout.is-medium
    .wc-block-checkout__actions
    .wp-block-woocommerce-checkout-order-summary-block {
    display: block !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}
[data-theme="dark"] .wc-block-components-sidebar-layout.is-medium
    .wc-block-checkout__actions
    .wp-block-woocommerce-checkout-order-summary-block {
    background: #1a1a1a !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Heading style in actions (mirrors line 3506) */
.wc-block-components-sidebar-layout.is-medium
    .wc-block-checkout__actions
    .wc-block-components-checkout-step__title {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    color: var(--text-muted) !important;
    margin: 0 0 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Remove inner card borders (mirrors line 3520) */
.wc-block-components-sidebar-layout.is-medium
    .wc-block-checkout__actions
    .checkout-order-summary-block-fill,
.wc-block-components-sidebar-layout.is-medium
    .wc-block-checkout__actions
    .wc-block-components-totals-wrapper {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Totals spacing (mirrors line 3532) */
.wc-block-components-sidebar-layout.is-medium
    .wc-block-checkout__actions
    .wc-block-components-totals-wrapper {
    padding: 10px 0 !important;
}

/* Quantity badge (mirrors line 3539) */
.wc-block-components-sidebar-layout.is-medium
    .wc-block-checkout__actions
    .wc-block-components-order-summary-item__quantity {
    background: var(--text) !important;
    color: var(--bg) !important;
    border: none !important;
    font-size: 0.625rem !important;
    width: 18px !important;
    height: 18px !important;
    top: -5px !important;
    right: -5px !important;
}

/* ═══════════════════════════════════════════════════════
   v1.0.91 — CHECKOUT POLISH PASS

   ① Google Pay dark-mode border: thicker inset ring + overflow clip
   ② Coupon input: taller field (48px), more padding-top when active
      so typed text doesn't overlap the floating "Enter code" label
   ③ Terms disclaimer: pushed below Return to Cart (order:10),
      opacity lowered to blend with trust strip
   ④ Add-a-note / Place Order alignment: consistent left alignment
   ⑤ Store page responsive: topbar stays single-line on mobile
═══════════════════════════════════════════════════════ */

/* ── Add-a-note alignment with Place Order button ──
   The note checkbox sits inside a checkout step with a counter badge
   that creates ~40px left offset. The actions row has no offset.
   Ensure the Place Order row matches the step content alignment. */
.wc-block-checkout__actions_row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── STORE PAGE RESPONSIVE: keep topbar on one line ──
   On mobile, filters + sort dropdown should stay horizontal,
   scroll if needed, with tighter spacing overall. */
@media (max-width: 600px) {
    .shop-topbar {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 0 16px !important;
        margin-bottom: 16px !important;
    }

    /* Let filters fill remaining space */
    .shop-filter {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        flex: 1 !important;
    }

    /* Smaller filter pills on mobile */
    .shop-filter__btn {
        padding: 6px 12px !important;
        font-size: 0.8125rem !important;
        white-space: nowrap !important;
    }

    /* Icon-only sort trigger on mobile — shows the arrow-down-up icon
       in a circular pill; label text is hidden to save space */
    .shop-sort {
        flex-shrink: 0;
    }
    .shop-sort__trigger {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        gap: 0;
    }
    .shop-sort__trigger .shop-sort__value {
        display: none;
    }
    .shop-sort__trigger .shop-sort__chevron {
        display: none;
    }
    .shop-sort__trigger::before {
        content: "";
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16m0 0-4-4m4 4 4-4M17 20V4m0 0 4 4m-4-4-4 4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    /* Reduce bottom margin on grid */
    .products-grid {
        margin-bottom: 40px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   v1.1.9 — EMPTY CART + ORDER SUMMARY HEADING REINFORCEMENT
═══════════════════════════════════════════════════════ */

/* ── EMPTY CART PAGE ─────────────────────────────────── */
.wc-block-cart__empty-cart__container,
.wp-block-woocommerce-empty-cart-block {
    text-align: center !important;
    padding: clamp(40px, 8vw, 80px) 0 !important;
}

/* Sad face icon — subtle, not giant */
.wc-block-cart__empty-cart__container svg,
.wp-block-woocommerce-empty-cart-block svg {
    width: 48px !important;
    height: 48px !important;
    opacity: 0.3 !important;
    margin-bottom: 16px !important;
}

/* "YOUR CART IS CURRENTLY EMPTY!" — match our heading style */
.wc-block-cart__empty-cart__container p,
.wp-block-woocommerce-empty-cart-block p {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    margin-bottom: 24px !important;
}

/* Product recommendations in empty cart — "NEW IN STORE" heading */
.wc-block-cart .cross-sells-product-table-block,
.wc-block-cart [class*="cross-sells"],
.wp-block-woocommerce-empty-mini-cart-contents-block {
    margin-top: 32px !important;
}

/* Cross-sells heading */
.wc-block-cart .cross-sells-product-table-block h2,
.wc-block-cart [class*="cross-sells"] h2 {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}

/* Cross-sells product cards */
.wc-block-cart .cross-sells-product-table-block .wc-block-components-product-name,
.wc-block-cart [class*="cross-sells"] .wc-block-components-product-name {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    text-decoration: none !important;
}

/* Cross-sells product images */
.wc-block-cart .cross-sells-product-table-block img,
.wc-block-cart [class*="cross-sells"] img {
    border-radius: var(--radius-sm) !important;
}

/* Cross-sells "Add to cart" button — NOT the Proceed to Checkout button */
.wc-block-cart .wc-block-components-product-button__button,
.wc-block-cart__empty-cart__container .wp-element-button {
    background: var(--text) !important;
    color: var(--bg) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
}

[data-theme="dark"] .wc-block-cart .wc-block-components-product-button__button,
[data-theme="dark"] .wc-block-cart__empty-cart__container .wp-element-button {
    background: var(--text) !important;
    color: var(--bg) !important;
}

/* ── ORDER SUMMARY HEADING: nuclear specificity for Safari ──
   Safari on iPhone ignores our is-medium selectors. Use the
   broadest possible approach — target ANY "Order summary" heading
   in the checkout actions block regardless of layout class. */
.wc-block-checkout__actions .wc-block-components-checkout-step__heading,
.wc-block-checkout__actions .wc-block-components-checkout-step__title,
.wc-block-checkout__actions .wc-block-components-checkout-step__heading *,
.wc-block-checkout__actions .wc-block-components-checkout-step__title * {
    text-transform: uppercase !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    color: var(--text-muted) !important;
    line-height: 1 !important;
}

/* Also style the actions-area order summary card without relying on is-small/is-medium */
.wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}

[data-theme="dark"] .wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block {
    background: #1a1a1a !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Order summary items in actions block */
.wc-block-checkout__actions .wc-block-components-order-summary-item {
    display: grid !important;
    grid-template-columns: 52px 1fr auto !important;
    gap: 0 12px !important;
    padding: 12px 0 !important;
    align-items: start !important;
}

.wc-block-checkout__actions .wc-block-components-order-summary-item__image img {
    width: 52px !important;
    height: 52px !important;
    border-radius: var(--radius-sm) !important;
    object-fit: cover !important;
}

.wc-block-checkout__actions .wc-block-components-order-summary-item__quantity {
    background: var(--text) !important;
    color: var(--bg) !important;
    border: none !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 0.625rem !important;
    border-radius: 50% !important;
}

.wc-block-checkout__actions .wc-block-components-order-summary-item .wc-block-components-product-name {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

.wc-block-checkout__actions .wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

/* Totals in actions block */
.wc-block-checkout__actions .wc-block-components-totals-wrapper:empty {
    display: none !important;
}

.wc-block-checkout__actions .wc-block-components-totals-item__label {
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
}

.wc-block-checkout__actions .wc-block-components-totals-item__value {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

/* Total row — bold */
.wc-block-checkout__actions .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-checkout__actions .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════════
   v1.2.0 — CART PAGE STYLING
   Style the WooCommerce Blocks cart page to match theme.
═══════════════════════════════════════════════════════ */

/* Cart page — hide default page header (handled by WC Blocks) */
.woocommerce-cart .page-header {
    display: none;
}

/* ── CART TABLE HEADERS ── */
.wc-block-cart-items__header {
    border-bottom: 1px solid var(--border) !important;
}
.wc-block-cart-items__header span,
.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
}

/* ── CART ITEMS ── */
.wc-block-cart-items .wc-block-cart-items__row {
    border-bottom: 1px solid var(--border) !important;
    padding: 20px 0 !important;
}

/* Product image */
.wc-block-cart-item__image img {
    border-radius: var(--radius-sm) !important;
}

/* Product name */
.wc-block-cart-item__product .wc-block-components-product-name {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    text-decoration: none !important;
}

/* Product price */
.wc-block-cart-item__product .wc-block-components-product-price {
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
}

/* Product description/metadata */
.wc-block-cart-item__product .wc-block-components-product-metadata {
    font-size: 0.8125rem !important;
    color: var(--text-muted) !important;
    line-height: 1.5 !important;
}

/* Remove button */
.wc-block-cart-item__remove-link {
    font-size: 0.8125rem !important;
    color: var(--text-muted) !important;
    opacity: 0.6 !important;
    transition: opacity var(--transition) !important;
}
.wc-block-cart-item__remove-link:hover {
    opacity: 1 !important;
    color: var(--accent) !important;
}

/* Item total price */
.wc-block-cart-item__total .wc-block-components-product-price {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

/* ── CART SIDEBAR (TOTALS) ── */
.wc-block-cart__sidebar {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 24px !important;
}

[data-theme="dark"] .wc-block-cart__sidebar {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* "CART TOTALS" heading — find it via the totals heading class */
.wc-block-cart__sidebar .wc-block-components-totals-header,
.wp-block-woocommerce-cart-totals-block > .wc-block-components-panel__button,
.wc-block-cart__sidebar h2 {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Subtotal / Estimated total */
.wc-block-cart__sidebar .wc-block-components-totals-item__label {
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
}
.wc-block-cart__sidebar .wc-block-components-totals-item__value {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

/* Estimated total — bold */
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}

/* Coupon accordion */
.wc-block-cart__sidebar .wc-block-components-totals-coupon__button {
    background: var(--text) !important;
    color: var(--bg) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

/* Empty totals wrappers */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper:empty {
    display: none !important;
    padding: 0 !important;
}

/* "Proceed to Checkout" button */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wc-block-cart__submit .wc-block-components-button {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: opacity var(--transition) !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit .wc-block-components-button:hover {
    opacity: 0.9 !important;
}

/* "OR" divider */
.wc-block-cart__payment-options-or,
.wc-block-components-express-payment-continue-rule {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
}

/* Express payment in cart sidebar */
.wc-block-cart__sidebar .wc-block-components-express-payment__event-buttons > li {
    min-width: 0 !important;
    flex: 1 1 0 !important;
}

/* ═══════════════════════════════════════════════════════
   v1.2.3 — CART REDESIGN: Match store card design language
   Filled cart + empty cart, light + dark mode, all breakpoints.
   v1.2.3b — Surgical fixes: TD borders, button underline, remove button.
═══════════════════════════════════════════════════════ */

/* ── FILLED CART: Switch from flat table to cards ─────── */

/* Hide PRODUCT / TOTAL column headers — card layout makes them redundant */
.wc-block-cart-items__header {
    display: none !important;
}

/* ── Cart item row → product card ──────────────────────
   Mirrors: background, border-radius, shadow, hover-lift from .product-card */
.wc-block-cart-items .wc-block-cart-items__row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 20px !important;
    margin-bottom: 14px !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease !important;
    position: relative !important;
}

.wc-block-cart-items .wc-block-cart-items__row:hover {
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
    border-color: transparent !important;
}

[data-theme="dark"] .wc-block-cart-items .wc-block-cart-items__row {
    background: var(--bg-card) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .wc-block-cart-items .wc-block-cart-items__row:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── Product image: square with store-card gray bg ─── */
.wc-block-cart-item__image {
    flex: 0 0 120px !important;
    width: 120px !important;
    height: 120px !important;
    background: var(--bg-card) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.wc-block-cart-item__image img {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    display: block !important;
    transition: transform 0.35s ease !important;
}

.wc-block-cart-items .wc-block-cart-items__row:hover .wc-block-cart-item__image img {
    transform: scale(1.04) !important;
}

[data-theme="dark"] .wc-block-cart-item__image {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ── Product info column ─────────────────────────────── */
.wc-block-cart-item__wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-self: stretch !important;
}

.wc-block-cart-item__product .wc-block-components-product-name {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    display: block !important;
}

.wc-block-cart-item__prices .wc-block-components-product-price {
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

.wc-block-cart-item__product .wc-block-components-product-metadata {
    font-size: 0.8125rem !important;
    color: var(--text-muted) !important;
    line-height: 1.5 !important;
    margin-top: 2px !important;
}

/* Remove link — bottom of info column, quiet until hovered */
.wc-block-cart-item__remove-link {
    display: inline-block !important;
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    opacity: 0.45 !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    transition: opacity 0.18s ease, color 0.18s ease !important;
    letter-spacing: 0.01em !important;
}

.wc-block-cart-item__remove-link:hover {
    opacity: 1 !important;
    color: var(--accent) !important;
    text-decoration: none !important;
}

/* ── Total price: right column, prominent ─────────── */
.wc-block-cart-item__total {
    flex: 0 0 auto !important;
    text-align: right !important;
    align-self: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wc-block-cart-item__total .wc-block-components-product-price {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    letter-spacing: -0.025em !important;
    white-space: nowrap !important;
}

/* ── Sidebar: upgraded to card visual language ──────── */
.wc-block-cart__sidebar {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 24px !important;
}

[data-theme="dark"] .wc-block-cart__sidebar {
    background: var(--bg-card) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ── MOBILE CART ITEMS: vertical card layout ────────── */
@media (max-width: 600px) {
    .wc-block-cart-items .wc-block-cart-items__row {
        flex-direction: column !important;
        gap: 14px !important;
        padding: 16px !important;
    }

    .wc-block-cart-item__image {
        flex: none !important;
        width: 100% !important;
        height: 160px !important;
        border-radius: 8px !important;
    }

    .wc-block-cart-item__image img {
        width: 100% !important;
        height: 160px !important;
        border-radius: 8px !important;
    }

    /* Price floats top-right when card is vertical */
    .wc-block-cart-item__total {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   EMPTY CART — Intentional empty state design
═══════════════════════════════════════════════════════ */

.wc-block-cart__empty-cart__container,
.wp-block-woocommerce-empty-cart-block {
    text-align: center !important;
    padding: clamp(56px, 10vw, 100px) 0 clamp(40px, 6vw, 64px) !important;
}

/* Icon — larger, well-spaced */
.wc-block-cart__empty-cart__container svg,
.wp-block-woocommerce-empty-cart-block svg {
    width: 56px !important;
    height: 56px !important;
    opacity: 0.18 !important;
    display: block !important;
    margin: 0 auto 20px !important;
}

/* Empty state heading */
.wc-block-cart__empty-cart__container p,
.wp-block-woocommerce-empty-cart-block p {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    margin-bottom: 28px !important;
    line-height: 1.5 !important;
}

/* "Return to shop" CTA — accent button */
.wc-block-cart__empty-cart__container .wp-block-button__link,
.wc-block-cart__empty-cart__container a[href*="shop"],
.wc-block-cart__empty-cart__container a[href*="store"],
.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
    display: inline-block !important;
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
    font-family: var(--font-sans) !important;
    letter-spacing: -0.01em !important;
}

.wc-block-cart__empty-cart__container .wp-block-button__link:hover,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
}

/* ── Cross-sells: styled like the store page ────────── */
.wc-block-cart [class*="cross-sells"],
.wc-block-cart .cross-sells-product-table-block {
    margin-top: 48px !important;
    padding-top: 40px !important;
    border-top: 1px solid var(--border) !important;
}

.wc-block-cart [class*="cross-sells"] h2,
.wc-block-cart .cross-sells-product-table-block h2 {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    text-align: center !important;
    margin-bottom: 28px !important;
}

/* Cross-sells product images: same gray-bg card container as store */
.wc-block-cart [class*="cross-sells"] .wc-block-grid__product-image,
.wc-block-cart [class*="cross-sells"] .wc-block-components-product-image {
    background: var(--bg-card) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.wc-block-cart [class*="cross-sells"] img,
.wc-block-cart .cross-sells-product-table-block img {
    border-radius: 10px !important;
    transition: transform 0.35s ease !important;
}

/* Cross-sells product name */
.wc-block-cart [class*="cross-sells"] .wc-block-components-product-name,
.wc-block-cart .cross-sells-product-table-block .wc-block-components-product-name {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
}

/* Cross-sells Add to cart button — matches store card style */
.wc-block-cart .wc-block-components-product-button__button,
.wc-block-cart__empty-cart__container .wp-element-button {
    background: var(--text) !important;
    color: var(--bg) !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    transition: opacity 0.18s ease !important;
}

.wc-block-cart .wc-block-components-product-button__button:hover,
.wc-block-cart__empty-cart__container .wp-element-button:hover {
    opacity: 0.85 !important;
}

[data-theme="dark"] .wc-block-cart .wc-block-components-product-button__button,
[data-theme="dark"] .wc-block-cart__empty-cart__container .wp-element-button {
    background: #fff !important;
    color: #000 !important;
}

/* ═══════════════════════════════════════════════════════
   v1.2.3b — CART SURGICAL FIXES
   1. Kill WooCommerce's <td> border-top (cross-origin block CSS)
   2. Kill button underline (WP element-button class)
   3. Style the remove BUTTON element properly
   4. Hide duplicate middle-column price, clean up layout
═══════════════════════════════════════════════════════ */

/* ── 1. Kill ALL <td>/<th> borders inside cart item rows ── */
.wc-block-cart-items td,
.wc-block-cart-items th,
.wc-block-cart-items .wc-block-cart-item__image,
.wc-block-cart-items .wc-block-cart-item__product,
.wc-block-cart-items .wc-block-cart-item__total {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* ── 2. Kill button underline — target every class WC puts on it ── */
a.wc-block-cart__submit-button,
.wc-block-cart__submit-button.wc-block-components-button,
.wc-block-cart__submit-button.wp-element-button,
.wc-block-cart__submit-button.contained,
.wc-block-cart__submit .wc-block-components-button,
.wc-block-cart__submit .wp-element-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
    text-decoration: none !important;
}

/* ── 3. Remove button: clean icon positioned bottom-right of card ── */
.wc-block-cart-item__remove-link {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    /* Absolute bottom-right of the card (card has position:relative) */
    position: absolute !important;
    bottom: 18px !important;
    right: 18px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    opacity: 0.25 !important;
    transition: opacity 0.18s ease, background 0.18s ease !important;
    color: var(--text) !important;
}

.wc-block-cart-item__remove-link:hover {
    opacity: 1 !important;
    background: rgba(228, 71, 42, 0.1) !important;
    color: var(--accent) !important;
}

.wc-block-cart-item__remove-link svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
    fill: currentColor !important;
    color: inherit !important;
}

/* ── 4. Hide the redundant in-row price (right column has the total) ── */
.wc-block-cart-item__prices {
    display: none !important;
}

/* ── 5. Total column: pad bottom so price clears the absolute trash icon ── */
.wc-block-cart-item__total {
    padding-bottom: 28px !important;
}

/* ── 6. Item wrap: remove bottom gap that was spacing for the old remove pos ── */
.wc-block-cart-item__wrap {
    padding-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   v1.2.4 — DE-TABLE CART
   Kill the browser's table layout engine so WC block CSS
   can never bleed table-specific border/spacing behaviour
   onto our card layout again.
═══════════════════════════════════════════════════════ */

/* 1. Turn <table> into a plain block container */
.wc-block-cart-items {
    display: block !important;
}

/* 2. Turn <tbody> into the flex column that stacks item cards */
.wc-block-cart-items tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* 3. Kill the border-top WC puts on <tr> via cross-origin CSS */
.wc-block-cart-items .wc-block-cart-items__row {
    border: none !important;
    border-top: none !important;
}

/* ═══════════════════════════════════════════════════════
   v1.2.5 — CLASSIC CART: Full custom layout, no tables.
   Template: woocommerce/cart/cart.php
═══════════════════════════════════════════════════════ */

/* ── Two-column layout wrapper ───────────────────────── */
.thisise-cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
    margin-bottom: 80px;
}

.thisise-cart-form {
    min-width: 0;
}

.thisise-cart-sidebar {
    position: sticky;
    top: 104px;
}

/* ── Cart item cards ─────────────────────────────────── */
.thisise-cart-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.thisise-cart-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    text-decoration: none;
}

.thisise-cart-item:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.10);
    transform: translateY(-3px);
    border-color: transparent;
}

[data-theme="dark"] .thisise-cart-item {
    background: var(--bg-card);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .thisise-cart-item:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

/* ── Product image ───────────────────────────────────── */
.thisise-cart-item__image {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    background: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .thisise-cart-item__image {
    background: rgba(255, 255, 255, 0.05);
}

.thisise-cart-item__image a {
    display: block;
    width: 100%;
    height: 100%;
}

.thisise-cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    transition: transform 0.28s ease;
}

.thisise-cart-item:hover .thisise-cart-item__image img {
    transform: scale(1.04);
}

/* ── Product info ────────────────────────────────────── */
.thisise-cart-item__info {
    flex: 1 1 auto;
    min-width: 0;
}

.thisise-cart-item__name {
    margin: 0 0 6px;
}

.thisise-cart-item__name a {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.thisise-cart-item__name a:hover {
    color: var(--accent);
}

.thisise-cart-item__desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Price ───────────────────────────────────────────── */
.thisise-cart-item__price {
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    text-align: right;
    padding-right: 40px;
}

.thisise-cart-item__price .woocommerce-Price-amount {
    font-size: 1rem;
    font-weight: 700;
}

/* ── Remove link ─────────────────────────────────────── */
.thisise-cart-item__remove {
    position: absolute;
    bottom: 18px;
    right: 18px;
}

.thisise-cart-item__remove .remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--text);
    opacity: 0.25;
    text-decoration: none;
    transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.thisise-cart-item__remove .remove:hover {
    opacity: 1;
    background: rgba(228, 71, 42, 0.1);
    color: var(--accent);
}

/* ── Cart actions (update button) ────────────────────── */
.thisise-cart-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.thisise-cart-update {
    background: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 8px 16px;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.thisise-cart-update:hover {
    border-color: var(--text);
    color: var(--text);
}

/* ── Cart totals sidebar ─────────────────────────────── */
.thisise-cart-sidebar .cart_totals {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .thisise-cart-sidebar .cart_totals {
    background: var(--bg-card);
    border-color: rgba(255, 255, 255, 0.08);
}

.thisise-cart-sidebar .cart_totals h2 {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 20px;
}

/* Totals table — label/value data, legitimate table use */
.thisise-cart-sidebar .shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.thisise-cart-sidebar .shop_table th,
.thisise-cart-sidebar .shop_table td {
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: 0.9375rem;
    color: var(--text);
    text-align: left;
    vertical-align: middle;
}

.thisise-cart-sidebar .shop_table td {
    text-align: right;
}

.thisise-cart-sidebar .shop_table .order-total th,
.thisise-cart-sidebar .shop_table .order-total td {
    border-bottom: none;
    font-weight: 700;
    font-size: 1.0625rem;
    padding-top: 18px;
}

/* ── Proceed to Checkout button ──────────────────────── */
.thisise-cart-sidebar .wc-proceed-to-checkout {
    margin-top: 8px;
}

.thisise-cart-sidebar .wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: var(--accent);
    color: #fff !important;
    border: none;
    border-radius: 5px !important;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-sizing: border-box;
}

.thisise-cart-sidebar .wc-proceed-to-checkout .checkout-button:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* ── Empty cart state ────────────────────────────────── */
.thisise-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 24px;
    gap: 16px;
}

.thisise-cart-empty__icon {
    color: var(--text-secondary);
    opacity: 0.35;
    margin-bottom: 8px;
}

.thisise-cart-empty__title {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}

.thisise-cart-empty__text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
}

.thisise-btn-browse {
    display: inline-block;
    margin-top: 8px;
    padding: 14px 28px;
    background: var(--accent);
    color: #fff !important;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.thisise-btn-browse:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* ── Coupon field ────────────────────────────────────── */
.woocommerce-cart .coupon {
    display: flex;
    gap: 8px;
    align-items: center;
}

.woocommerce-cart .coupon #coupon_code {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.875rem;
}

.woocommerce-cart .coupon .button {
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.18s ease;
}

.woocommerce-cart .coupon .button:hover {
    border-color: var(--text);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 860px) {
    .thisise-cart-layout {
        grid-template-columns: 1fr;
    }

    .thisise-cart-sidebar {
        position: static;
    }
}

@media (max-width: 600px) {
    .thisise-cart-item {
        flex-wrap: wrap;
        gap: 16px;
        padding: 16px;
    }

    .thisise-cart-item__image {
        flex: 0 0 80px;
        width: 80px;
        height: 80px;
    }

    .thisise-cart-item__info {
        flex: 1 1 0;
    }

    .thisise-cart-item__price {
        width: 100%;
        text-align: left;
        padding-right: 0;
        padding-left: calc(80px + 16px);
    }

    .thisise-cart-item__remove {
        bottom: 16px;
        right: 16px;
    }
}

/* ═══════════════════════════════════════════════════════
   v1.2.9 — CHECKOUT: Constrained & fully polished
   Template: woocommerce/checkout/form-checkout.php
═══════════════════════════════════════════════════════ */

/* ── THE width fix: constrain checkout content ───────── */
/* Old block-checkout CSS forced site-container to no max-width.
   We constrain the inner .woocommerce wrapper instead.        */
.woocommerce-checkout .woocommerce,
.woocommerce-checkout .woocommerce.wp-block-group,
.woocommerce-checkout .wp-block-group.alignwide {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 40px 24px 80px !important;
    box-sizing: border-box;
    width: 100%;
}

/* ── Page header ─────────────────────────────────────── */
.thisise-checkout-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.thisise-checkout-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
}
.thisise-checkout-title svg {
    color: var(--accent);
    flex-shrink: 0;
}
.thisise-checkout-secure {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.thisise-checkout-secure svg { color: var(--success); flex-shrink: 0; }

/* ── Coupon toggle ───────────────────────────────────── */
.woocommerce-form-coupon-toggle {
    margin-bottom: 20px;
}
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: transparent;
    border: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 10px 16px;
    margin: 0;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.woocommerce-form-coupon-toggle .woocommerce-info a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}
.woocommerce-form-coupon-toggle .woocommerce-info a:hover {
    text-decoration: underline;
}

/* ── Two-column grid ─────────────────────────────────── */
/* At 1000px wrapper with 24px padding = 952px content.
   952 - 24 gap - 320 sidebar = 608px for billing form.  */
.thisise-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

.thisise-checkout-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Express checkout card — no border, blends with page ─ */
.thisise-express-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.thisise-express-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 14px;
}

/* ── Stripe express checkout container ───────────────── */
.wc-stripe-express-checkout-element {
    margin-bottom: 0;
}

/* ── "— OR —" separator ─────────────────────────────── */
.wc-stripe-express-checkout-button-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.wc-stripe-express-checkout-button-separator::before,
.wc-stripe-express-checkout-button-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Billing card ────────────────────────────────────── */
.thisise-billing-wrap {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .thisise-billing-wrap {
    background: var(--bg-card);
    border-color: rgba(255, 255, 255, 0.07);
}

/* ── Kill WooCommerce's float columns inside our card ── */
.thisise-checkout-left #customer_details { margin: 0; }
.thisise-checkout-left .col-1,
.thisise-checkout-left .col-2 {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.thisise-checkout-left .col-2:empty,
.thisise-checkout-left .col-2 .woocommerce-shipping-fields:empty { display: none; }

/* ── Section headings ────────────────────────────────── */
.thisise-checkout-left .woocommerce-billing-fields > h3,
.thisise-checkout-left .woocommerce-additional-fields > h3 {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 20px;
    display: block;
}
.thisise-checkout-left .woocommerce-additional-fields > h3 {
    margin-top: 0;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

/* ── Sidebar "Your order" label ──────────────────────── */
.thisise-checkout-order-label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--text);
    margin: 0 0 20px;
    display: block;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

/* ── Field wrapper — flex layout ─────────────────────── */
.thisise-checkout-left .woocommerce-billing-fields__field-wrapper,
.thisise-checkout-left .woocommerce-additional-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
}

/* Every form row full-width by default */
.thisise-checkout-left .form-row {
    flex: 0 0 100%;
    width: auto !important;
    float: none !important;
    clear: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
}
/* First / Last name: side by side */
.thisise-checkout-left .form-row-first,
.thisise-checkout-left .form-row-last {
    flex: 0 0 calc(50% - 6px) !important;
}

/* ── Labels ──────────────────────────────────────────── */
.thisise-checkout-left .form-row label,
#order_review .form-row label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.thisise-checkout-left .form-row label .required {
    color: var(--accent);
    margin-left: 1px;
}

/* ── Inputs, selects, textarea ───────────────────────── */
/* !important needed — WooCommerce plugin CSS overrides theme background */
.thisise-checkout-left .form-row input.input-text,
.thisise-checkout-left .form-row select,
.thisise-checkout-left .form-row textarea,
#order_review .form-row input.input-text {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--bg) !important;   /* white on --bg-secondary card */
    color: var(--text) !important;
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.thisise-checkout-left .form-row textarea {
    height: auto;
    padding: 12px 14px;
    resize: vertical;
    min-height: 88px;
    line-height: 1.5;
}

/* Focus */
.thisise-checkout-left .form-row input.input-text:focus,
.thisise-checkout-left .form-row select:focus,
.thisise-checkout-left .form-row textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(44, 205, 212, 0.13);
}

/* Dark mode inputs */
[data-theme="dark"] .thisise-checkout-left .form-row input.input-text,
[data-theme="dark"] .thisise-checkout-left .form-row select,
[data-theme="dark"] .thisise-checkout-left .form-row textarea {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text) !important;
}

/* Validation errors */
.thisise-checkout-left .form-row.woocommerce-invalid input.input-text,
.thisise-checkout-left .form-row.woocommerce-invalid select {
    border-color: #e4472a !important;
    box-shadow: 0 0 0 3px rgba(228, 71, 42, 0.12) !important;
}
.thisise-checkout-left .form-row .woocommerce-error {
    font-size: 0.8125rem;
    color: #e4472a;
    margin-top: 4px;
    display: block;
}

/* ── Custom select arrow ─────────────────────────────── */
.thisise-checkout-left .form-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

/* ── Select2 (country / state dropdowns) ─────────────── */
.thisise-checkout-left .select2-container { width: 100% !important; }
.thisise-checkout-left .select2-container--default .select2-selection--single {
    height: 48px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    display: flex;
    align-items: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
}
.thisise-checkout-left .select2-container--default.select2-container--focus .select2-selection--single,
.thisise-checkout-left .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(44, 205, 212, 0.13);
}
.thisise-checkout-left .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text);
    font-size: 0.9375rem;
    padding-left: 14px;
    line-height: 48px;
}
.thisise-checkout-left .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 10px;
}
.thisise-checkout-left .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent;
}
.thisise-checkout-left .select2-dropdown {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
.thisise-checkout-left .select2-results__option {
    padding: 10px 14px;
    font-size: 0.9375rem;
    color: var(--text);
}
.thisise-checkout-left .select2-results__option--highlighted[aria-selected] {
    background: var(--accent) !important;
    color: #fff !important;
}
.thisise-checkout-left .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.875rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
[data-theme="dark"] .thisise-checkout-left .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .thisise-checkout-left .select2-dropdown {
    background: #1c1c1c;
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .thisise-checkout-left .select2-results__option { color: var(--text); }
[data-theme="dark"] .thisise-checkout-left .select2-search--dropdown .select2-search__field {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

/* ── Order sidebar card ──────────────────────────────── */
.thisise-checkout-sidebar {
    position: sticky;
    top: 96px;
}
.thisise-checkout-order-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .thisise-checkout-order-card {
    background: var(--bg-card);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ── Order review table ──────────────────────────────── */
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    table-layout: fixed;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text);
    text-align: left;
    vertical-align: middle;
    line-height: 1.4;
}
/* Column widths for 3-col layout: thumb | name | price */
.woocommerce-checkout-review-order-table .product-thumb { width: 60px; }
.woocommerce-checkout-review-order-table .product-name  { font-size: 0.8125rem; font-weight: 500; }
.woocommerce-checkout-review-order-table .product-total { text-align: right; width: 60px; white-space: nowrap; }

/* Tfoot label (first td) = left, price (last td) = right */
.woocommerce-checkout-review-order-table tfoot td {
    text-align: left;
}
.woocommerce-checkout-review-order-table tfoot td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* Subtotal row — muted */
.woocommerce-checkout-review-order-table tfoot .cart-subtotal td {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Total row — prominent */
.woocommerce-checkout-review-order-table tfoot .order-total td {
    border-bottom: none;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    padding-top: 16px;
    padding-bottom: 0;
}

/* ── Product thumbnails in order review ──────────────── */
.woocommerce-checkout-review-order-table .product-thumb {
    width: 52px;
    padding: 10px 0 10px;
}
.checkout-product-thumb-wrap {
    position: relative;
    display: inline-block;
}
.checkout-product-thumb-wrap img,
.woocommerce-checkout-review-order-table .product-thumb img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}
.checkout-product-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--text);
    color: var(--bg);
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.woocommerce-checkout-review-order-table .product-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    padding-left: 0;
}
.woocommerce-checkout-review-order-table .product-total {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    text-align: right;
    white-space: nowrap;
}

/* ── Payment section ─────────────────────────────────── */
#payment {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
#payment ul.payment_methods {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
#payment ul.payment_methods li label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Strip WC default payment box styling */
#payment .payment_box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 8px;
}
#payment .payment_box::before { display: none !important; }

/* Remove browser-default fieldset groove border from Stripe UPE form */
#payment fieldset,
#wc-stripe-upe-form,
.wc-upe-form,
.wc-payment-form {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Stripe test-mode instruction box — keep but make it subtle */
.wc-stripe-payment-method-instruction {
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
}

/* ── Privacy policy text ─────────────────────────────── */
.woocommerce-checkout .woocommerce-privacy-policy-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 16px 0 0;
}
.woocommerce-checkout .woocommerce-privacy-policy-text a {
    color: var(--accent);
    text-decoration: none;
}
.woocommerce-checkout .woocommerce-privacy-policy-text a:hover { text-decoration: underline; }

/* ── Newsletter / terms checkboxes ───────────────────── */
.woocommerce-checkout p.form-row input[type="checkbox"] { margin-right: 6px; }
.woocommerce-checkout p.form-row span,
.woocommerce-checkout p.form-row label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ── Place Order button ──────────────────────────────── */
#place_order {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: var(--accent);
    color: #fff !important;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.01em;
    box-sizing: border-box;
    margin-top: 20px;
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 16px rgba(232, 53, 42, 0.35);
}
#place_order:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(232, 53, 42, 0.42);
}
#place_order:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(232, 53, 42, 0.3);
}

/* ── Trust badge below Place Order ───────────────────── */
.woocommerce-checkout-payment::after {
    content: '';
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 12px;
    letter-spacing: 0.03em;
}

/* ── Checkout notices ────────────────────────────────── */
.woocommerce-checkout-payment .woocommerce-error li { list-style: none; }
.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error {
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════
   v1.2.13 — Coupon form, Stripe card rounding
═══════════════════════════════════════════════════════ */

/* ── Coupon toggle link — above the form ─────────────── */
/* Already styled; ensure the coupon form itself matches  */

/* ── Coupon form (classic checkout) ──────────────────── */
.woocommerce-form-coupon {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin: 0 0 20px;
}
[data-theme="dark"] .woocommerce-form-coupon {
    background: var(--bg-card);
    border-color: rgba(255, 255, 255, 0.07);
}
.woocommerce-form-coupon p.form-row {
    flex: 1;
    margin: 0 !important;
}
#coupon_code {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}
#coupon_code:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(44, 205, 212, 0.12);
}
#coupon_code::placeholder {
    color: var(--text-muted);
}
.woocommerce-form-coupon .button[name="apply_coupon"],
.woocommerce-form-coupon .button {
    flex-shrink: 0;
    height: 44px;
    padding: 0 20px;
    background: var(--text) !important;
    color: var(--bg) !important;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: opacity 0.15s ease;
}
.woocommerce-form-coupon .button:hover {
    opacity: 0.85;
}
[data-theme="dark"] .woocommerce-form-coupon .button[name="apply_coupon"],
[data-theme="dark"] .woocommerce-form-coupon .button {
    background: #fff !important;
    color: #0a0a0a !important;
}

/* ── Stripe UPE card element — clip corners, no outer border ─ */
.wc-stripe-upe-element.StripeElement,
#wc-stripe-upe-element {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: none !important;
}

/* ── Hide "Save payment info to account" checkbox (Stripe Link leftover) ── */
.woocommerce-SavedPaymentMethods-saveNew,
#wc-stripe-new-payment-method,
label[for="wc-stripe-new-payment-method"] {
    display: none !important;
}

/* ── Express wallets (Stripe ECE 10.8.4+ markup) ──
   The plugin now renders one iframe per wallet; wrappers must flex-fill and
   iframes stretch 100%, or buttons show half-width / collapse invisible.
   Legacy #757575 borders retired — native wallet buttons are self-styled. */
#wc-stripe-express-checkout-element {
    display: flex;
    gap: 10px;
    width: 100%;
}
#wc-stripe-express-checkout-element > div {
    flex: 1 1 0;
    min-width: 0;
    border: none !important;
    border-radius: 6px;
    overflow: hidden;
}
#wc-stripe-express-checkout-element iframe {
    width: 100% !important;
    min-width: 0 !important;
    display: block;
}

/* ═══════════════════════════════════════════════════════
   v1.2.19 — Product page express spacing; notice links;
             cart button rounding unified
═══════════════════════════════════════════════════════ */

/* ── Product page: tighten gap between Buy Now + express ─── */
.single-product-page #wc-stripe-express-checkout-element {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}



/* ── Hide WooCommerce "View cart" link after add-to-cart ─────
   The side cart drawer opens automatically on every add,
   so the default .added_to_cart link is redundant. */
.added_to_cart,
a.added_to_cart.wc-forward {
    display: none !important;
}

/* ── WooCommerce notices: "View cart" / inline links → button ─ */
.woocommerce-error a,
.woocommerce-message a {
    display: inline-block;
    background: var(--text);
    color: var(--bg) !important;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none !important;
    margin-left: auto;
    white-space: nowrap;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}
.woocommerce-error a:hover,
.woocommerce-message a:hover {
    opacity: 0.75;
}

/* ── Cart: express buttons — match "Proceed to checkout" 12px ─ */
.cart_totals #wc-stripe-express-checkout-element-applePay {
    border-radius: 5px !important;
    overflow: hidden !important;
    transition: filter 0.15s ease;
}
.cart_totals #wc-stripe-express-checkout-element-applePay:hover {
    filter: brightness(1.35);
}
.cart_totals #wc-stripe-express-checkout-element-googlePay {
    border-radius: 5px !important;
    background: #000 !important;
    /* overflow:hidden applied via JS after Stripe renders — setting it in CSS collapses the iframe */
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 960px) {
    .thisise-checkout-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .thisise-checkout-sidebar {
        position: static;
    }
    .thisise-checkout-left { order: 1; }
    .thisise-checkout-sidebar { order: 2; }
}
@media (max-width: 600px) {
    .thisise-checkout-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 24px;
        padding-bottom: 16px;
    }
    .thisise-checkout-left .form-row-first,
    .thisise-checkout-left .form-row-last {
        flex: 0 0 100% !important;
    }
    .thisise-billing-wrap {
        padding: 20px;
    }
    .thisise-checkout-order-card {
        padding: 20px;
    }
    .thisise-express-card {
        padding: 16px 20px 20px;
    }
}


/* ═══════════════════════════════════════════════════════
   THANK YOU / ORDER RECEIVED PAGE
═══════════════════════════════════════════════════════ */

.thisise-thankyou {
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 80px) var(--site-gutter, 24px) clamp(60px, 8vw, 100px);
}

/* ── Status banner (success / failed) ─────────────── */
.thisise-thankyou__status {
    text-align: center;
    margin-bottom: 40px;
}
.thisise-thankyou__icon {
    margin-bottom: 16px;
}
.thisise-thankyou__icon svg {
    display: inline-block;
}
.thisise-thankyou__heading {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 8px;
    color: var(--text);
}
.thisise-thankyou__sub {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 auto !important;
    max-width: 440px;
    line-height: 1.6;
    text-align: center !important;
}

/* ── Failed state ─────────────────────────────────── */
.thisise-thankyou__status--failed .thisise-thankyou__icon svg {
    stroke: #e8352a;
}
.thisise-thankyou__retry {
    margin-top: 20px;
    display: inline-block;
}

/* ── Order details grid ───────────────────────────── */
.thisise-thankyou__details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 32px;
}
[data-theme="dark"] .thisise-thankyou__details-grid {
    background: var(--bg-card, rgba(255,255,255,0.03));
    border-color: rgba(255,255,255,0.07);
}
.thisise-thankyou__detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}
.thisise-thankyou__detail-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.thisise-thankyou__detail-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

/* ── Items table ──────────────────────────────────── */
.thisise-thankyou__items {
    margin-bottom: 32px;
}
.thisise-thankyou__section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.thisise-thankyou__table {
    width: 100%;
    border-collapse: collapse;
}
.thisise-thankyou__table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.thisise-thankyou__table tbody td {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text);
    vertical-align: middle;
}
.thisise-thankyou__table tfoot th,
.thisise-thankyou__table tfoot td {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: left;
}
.thisise-thankyou__table tfoot tr:last-child th,
.thisise-thankyou__table tfoot tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    padding-top: 14px;
}

/* Product cell with thumbnail */
.thisise-thankyou__product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}
.thisise-thankyou__product-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
}
.thisise-thankyou__product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thisise-thankyou__product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.thisise-thankyou__product-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text);
}
.thisise-thankyou__product-qty {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.thisise-thankyou__table-total {
    text-align: right !important;
    white-space: nowrap;
}

/* ── Downloads section — the main event ───────────── */
.thisise-thankyou__downloads {
    margin: 40px 0 32px;
    padding: 28px 24px 24px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border);
    border-radius: 14px;
}
.thisise-thankyou__downloads .thisise-thankyou__section-title {
    font-size: 1.125rem;
    margin-bottom: 20px;
}
.thisise-thankyou__download-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.thisise-thankyou__download-item,
.thisise-thankyou__download-item:hover,
.thisise-thankyou__download-item:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    text-decoration: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.thisise-thankyou__download-item:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
[data-theme="dark"] .thisise-thankyou__downloads {
    background: var(--bg-card, rgba(255,255,255,0.03));
    border-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .thisise-thankyou__download-item {
    background: var(--bg);
    border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .thisise-thankyou__download-item:hover {
    border-color: var(--accent);
}
.thisise-thankyou__download-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}
.thisise-thankyou__download-btn {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    padding: 8px 18px;
    border-radius: 8px;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.thisise-thankyou__download-item:hover .thisise-thankyou__download-btn {
    opacity: 0.88;
}

/* ── Hide default WC order output — our template replaces it all ─ */
.thisise-thankyou ~ .woocommerce-order-details,
.thisise-thankyou ~ .woocommerce-order-overview,
.thisise-thankyou ~ .woocommerce-customer-details,
.thisise-thankyou .woocommerce-order-details,
.thisise-thankyou .woocommerce-order-overview,
.thisise-thankyou .woocommerce-customer-details,
.thisise-thankyou .woocommerce-order-downloads,
.thisise-thankyou .order-again {
    display: none !important;
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 600px) {
    .thisise-thankyou {
        padding: 32px var(--site-gutter, 16px) 48px;
    }
    .thisise-thankyou__details-grid {
        grid-template-columns: 1fr 1fr;
        padding: 16px 18px;
    }
    .thisise-thankyou__product-thumb {
        width: 40px;
        height: 40px;
    }
    .thisise-thankyou__download-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ============================================================
   COUPON REMOVE LINK — styled × replacing WC's raw "[Remove]"
   ============================================================ */
.woocommerce-remove-coupon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    color: var(--text-secondary, #888);
    background: transparent;
    transition: color 0.15s ease, background 0.15s ease;
    vertical-align: middle;
}
.woocommerce-remove-coupon:hover {
    color: #fff;
    background: var(--accent);
}