/*
 * WC Advanced Shop — Public Styles
 * All colours, fonts, sizes come from CSS custom properties set by WCAS_Dynamic_CSS.
 * This file only defines structure, layout, transitions, and component anatomy.
 */

/* ─── Reset & Base ──────────────────────────────────────────────────────────── */

.wcas-shop-wrapper *,
.wcas-shop-wrapper *::before,
.wcas-shop-wrapper *::after {
    box-sizing: border-box;
}

.wcas-shop-wrapper {
    --wcas-transition: 200ms ease;
    font-family: var(--wcas-font-family);
    font-size: var(--wcas-font-body);
    font-weight: var(--wcas-weight-body);
    color: var(--wcas-text);
    background: var(--wcas-bg);
    opacity: var(--wcas-opacity-wrapper);
    line-height: 1.5;
    width: 100%;
}

/* ─── Search Bar ─────────────────────────────────────────────────────────────── */

.wcas-search-bar {
    position: relative;
    margin-bottom: 16px;
}

.wcas-search-input-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
    background: var(--wcas-card-bg);
    padding: 0 12px;
    gap: 8px;
    transition: border-color var(--wcas-transition), box-shadow var(--wcas-transition);
}

.wcas-search-input-wrap:focus-within {
    border-color: var(--wcas-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wcas-primary) 15%, transparent);
}

.wcas-search-icon {
    color: var(--wcas-text-muted);
    flex-shrink: 0;
    display: flex;
}

.wcas-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--wcas-font-body);
    color: var(--wcas-text);
    padding: 11px 0;
}

.wcas-search-input::placeholder { color: var(--wcas-text-muted); }

.wcas-search-clear,
.wcas-search-spinner {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--wcas-text-muted);
    padding: 4px;
}

.wcas-search-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--wcas-card-border);
    border-top-color: var(--wcas-primary);
    border-radius: 50%;
    animation: wcas-spin .6s linear infinite;
}

.wcas-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--wcas-card-bg);
    border: 1.5px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-card);
    box-shadow: var(--wcas-card-hover-shadow);
    z-index: 1000;
    overflow: hidden;
    max-height: 380px;
    overflow-y: auto;
}

.wcas-search-result-item,
.wcas-search-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--wcas-transition);
    text-decoration: none;
    color: var(--wcas-text);
    border-bottom: 1px solid var(--wcas-card-border);
}

.wcas-search-result-item:last-child,
.wcas-search-history-item:last-child { border-bottom: none; }

.wcas-search-result-item:hover,
.wcas-search-history-item:hover,
.wcas-search-result-item.is-focused,
.wcas-search-history-item.is-focused {
    background: color-mix(in srgb, var(--wcas-primary) 6%, transparent);
}

.wcas-search-result-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--wcas-surface);
}

.wcas-search-result-info { flex: 1; min-width: 0; }
.wcas-search-result-name { font-size: var(--wcas-font-body); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcas-search-result-price { font-size: 12px; color: var(--wcas-price-color); font-weight: 600; }

.wcas-search-section-header {
    padding: 8px 14px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wcas-text-muted);
    font-weight: 600;
}

.wcas-search-no-results {
    padding: 20px;
    text-align: center;
    color: var(--wcas-text-muted);
    font-size: var(--wcas-font-body);
}

/* ─── Layout Columns ─────────────────────────────────────────────────────────── */

.wcas-layout-columns {
    display: grid;
    grid-template-columns: var(--wcas-sidebar-width) 1fr var(--wcas-cart-width);
    gap: 20px;
    align-items: start;
}

.wcas-no-sidebar .wcas-layout-columns {
    grid-template-columns: 1fr var(--wcas-cart-width);
}

.wcas-no-cart .wcas-layout-columns {
    grid-template-columns: var(--wcas-sidebar-width) 1fr;
}

.wcas-no-sidebar.wcas-no-cart .wcas-layout-columns {
    grid-template-columns: 1fr;
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────────── */

.wcas-sidebar {
    background: var(--wcas-surface);
    opacity: var(--wcas-opacity-sidebar);
    border-radius: var(--wcas-radius-card);
    overflow: hidden;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wcas-card-border) transparent;
}

.wcas-sidebar-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--wcas-text-muted);
    padding: 16px 16px 8px;
}

/* ─── Category Nav ─────────────────────────────────────────────────────────────── */

.wcas-cat-nav { padding: 0 0 8px; }

.wcas-cat-list,
.wcas-cat-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wcas-cat-children {
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms ease;
}

.wcas-cat-children.is-open { max-height: 1000px; }

.wcas-cat-item { position: relative; }

.wcas-cat-btn {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--wcas-font-body);
    color: var(--wcas-text);
    gap: 6px;
    transition: background var(--wcas-transition), color var(--wcas-transition);
    border-radius: 0;
}

.wcas-cat-btn:hover { background: color-mix(in srgb, var(--wcas-primary) 8%, transparent); }

.wcas-cat-item.is-active > .wcas-cat-btn {
    background: color-mix(in srgb, var(--wcas-primary) 12%, transparent);
    color: var(--wcas-primary);
    font-weight: 600;
}

.wcas-cat-children .wcas-cat-btn { padding-left: 32px; font-size: calc(var(--wcas-font-body) - 1px); }
.wcas-cat-children .wcas-cat-children .wcas-cat-btn { padding-left: 48px; }

.wcas-cat-count {
    margin-left: auto;
    font-size: 11px;
    background: var(--wcas-card-border);
    border-radius: 99px;
    padding: 1px 7px;
    color: var(--wcas-text-muted);
    min-width: 24px;
    text-align: center;
}

.wcas-cat-toggle {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--wcas-text-muted);
    font-size: 10px;
    padding: 0;
    transition: transform var(--wcas-transition);
    margin-left: auto;
}

.wcas-cat-toggle.is-open { transform: rotate(90deg); }

/* ─── Filter Panels ─────────────────────────────────────────────────────────── */

.wcas-filter-panel {
    border-top: 1px solid var(--wcas-card-border);
    padding: 0;
}

.wcas-filter-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-size: var(--wcas-font-body);
    font-weight: 600;
    color: var(--wcas-text);
    user-select: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.wcas-filter-panel-header:hover { background: color-mix(in srgb, var(--wcas-primary) 5%, transparent); }

.wcas-filter-panel-chevron {
    transition: transform var(--wcas-transition);
    color: var(--wcas-text-muted);
}

.wcas-filter-panel-header.is-open .wcas-filter-panel-chevron { transform: rotate(180deg); }

.wcas-filter-panel-body {
    padding: 0 16px 14px;
    display: none;
}

.wcas-filter-panel-body.is-open { display: block; }

/* ─── Sidebar panel ordering ───────────────────────────────────────────────────
   The category menu is a flex column so the Categories panel and each filter
   panel can be reordered via a CSS `order` value (set in JS from the admin
   "Panel Order" setting). `.wcas-filter-panels` uses display:contents so its
   panel children participate directly in this flex flow and can interleave with
   the Categories panel. Clear-all and wishlist are anchored to the bottom. */
.wcas-category-menu {
    display: flex;
    flex-direction: column;
}
.wcas-category-menu > .wcas-filter-panels { display: contents; }
.wcas-category-menu > .wcas-filter-clear-wrap { order: 9998; }
.wcas-category-menu > .wcas-wishlist-section  { order: 9999; }

/* Categories panel body holds the full-width category tree, so drop the
   side padding the generic filter-panel body applies. */
.wcas-cat-panel-body { padding: 0 0 8px; }
.wcas-cat-panel .wcas-cat-nav { padding: 0 0 4px; }

/* Price slider */
.wcas-price-range { display: flex; flex-direction: column; gap: 8px; }

.wcas-price-inputs {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wcas-price-input {
    flex: 1;
    border: 1.5px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
    padding: 6px 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--wcas-text);
    background: var(--wcas-card-bg);
    width: 100%;
}

.wcas-price-sep { color: var(--wcas-text-muted); }

/* Attribute checkboxes */
.wcas-attr-options { display: flex; flex-direction: column; gap: 6px; }

.wcas-attr-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--wcas-font-body);
}

.wcas-attr-option input[type="checkbox"] {
    accent-color: var(--wcas-primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* Color swatches */
.wcas-color-swatches { display: flex; flex-wrap: wrap; gap: 6px; }

.wcas-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--wcas-card-border);
    cursor: pointer;
    transition: transform var(--wcas-transition), border-color var(--wcas-transition);
}

.wcas-color-swatch.is-active,
.wcas-color-swatch:hover {
    transform: scale(1.2);
    border-color: var(--wcas-primary);
}

/* Rating filter */
.wcas-rating-options { display: flex; flex-direction: column; gap: 6px; }

.wcas-rating-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: var(--wcas-font-body);
}

.wcas-stars { color: #f59e0b; letter-spacing: 1px; font-size: 14px; }

/* ─── Toolbar ─────────────────────────────────────────────────────────────────── */

.wcas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--wcas-card-border);
    gap: 12px;
    flex-wrap: wrap;
}

.wcas-product-count {
    font-size: 13px;
    color: var(--wcas-text-muted);
}

.wcas-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wcas-sort-select {
    border: 1.5px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
    padding: 7px 10px;
    font-family: inherit;
    font-size: var(--wcas-font-body);
    color: var(--wcas-text);
    background: var(--wcas-card-bg);
    cursor: pointer;
    outline: none;
}

.wcas-sort-select:focus { border-color: var(--wcas-primary); }

.wcas-filter-toggle {
    display: none; /* shown on mobile */
    gap: 6px;
    align-items: center;
    font-size: var(--wcas-font-btn);
}

/* Active filter tags */
.wcas-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.wcas-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: color-mix(in srgb, var(--wcas-primary) 10%, transparent);
    color: var(--wcas-primary);
    border-radius: 99px;
    padding: 3px 10px 3px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--wcas-primary) 25%, transparent);
}

.wcas-filter-tag-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    opacity: .7;
}

.wcas-filter-tag-remove:hover { opacity: 1; }

/* ─── Product Grid ────────────────────────────────────────────────────────────── */

.wcas-product-grid {
    display: grid;
    gap: 16px;
    /* Column count set by WCAS_Dynamic_CSS based on admin settings */
}

/* Reload state: keep the current products on screen (no skeleton flash) but
   dim them slightly and block clicks while the next page/filter loads in. */
.wcas-product-grid.wcas-grid-loading {
    position: relative;
    opacity: .55;
    pointer-events: none;
    transition: opacity 160ms ease;
}

/* ─── Product Card ────────────────────────────────────────────────────────────── */

.wcas-product-card {
    background: var(--wcas-card-bg);
    opacity: var(--wcas-opacity-card);
    border: 1px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-card);
    box-shadow: var(--wcas-card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--wcas-transition), transform var(--wcas-transition);
    position: relative;
}

.wcas-product-card:hover {
    box-shadow: var(--wcas-card-shadow-hover);
    transform: translateY(-2px);
}

/* Image */
.wcas-card-image-wrap {
    position: relative;
    overflow: hidden;
    background: var(--wcas-surface);
    aspect-ratio: 1 / 1;
}

.wcas-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 350ms ease;
    display: block;
}

.wcas-product-card:hover .wcas-card-image-wrap img { transform: scale(1.05); }

/* Badges */
.wcas-badge-group {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.wcas-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.6;
}

.wcas-badge-sale { background: var(--wcas-accent); color: #fff; }
.wcas-badge-out-of-stock { background: var(--wcas-text-muted); color: #fff; opacity: .85; }
.wcas-badge-in-stock { background: #22c55e; color: #fff; }

/* Card overlay actions
   Positioned on .wcas-product-card (which has position:relative, no overflow:hidden)
   NOT inside .wcas-card-image-wrap (which has overflow:hidden and would clip them).
   The initial translateX pushes them just off the right edge; on hover they slide in. */
.wcas-card-overlay-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity var(--wcas-transition), transform var(--wcas-transition);
    pointer-events: none;
}

.wcas-product-card:hover .wcas-card-overlay-actions {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.wcas-overlay-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--wcas-card-bg);
    border: 1px solid var(--wcas-card-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wcas-text);
    transition: background var(--wcas-transition), color var(--wcas-transition), transform var(--wcas-transition);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    padding: 0;
}

.wcas-overlay-btn:hover {
    background: var(--wcas-primary);
    color: #fff;
    border-color: var(--wcas-primary);
    transform: scale(1.1);
}

.wcas-overlay-btn.is-active { background: var(--wcas-accent); color: #fff; border-color: var(--wcas-accent); }

/* Card body */
.wcas-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
}

.wcas-card-category {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wcas-primary);
    font-weight: 600;
    margin-bottom: 2px;
}

.wcas-card-name {
    font-size: var(--wcas-font-heading);
    font-weight: var(--wcas-weight-heading);
    color: var(--wcas-text);
    line-height: 1.35;
    margin: 0;
    /* No line clamp — let the name use as many lines as it needs.
       The card body is a flex column; the footer is pushed to the bottom
       via margin-top:auto, so the name growing never cuts the footer off.
       Cards in a row use CSS subgrid (or a JS-applied min-height) to align. */
    overflow: visible;
    flex-shrink: 0;
}

.wcas-card-name a {
    color: inherit;
    text-decoration: none;
    transition: color var(--wcas-transition);
}

.wcas-card-name a:hover { color: var(--wcas-primary); }

.wcas-card-short-desc {
    font-size: calc(var(--wcas-font-body) - 1px);
    color: var(--wcas-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 4px 0;
}

/* ── Card attribute strip ──────────────────────────────────────────────────
   Optional list of product attribute values rendered just above the price
   on grid cards. Controlled by the `Grid Card Attributes` setting on the
   General tab. Each row is one taxonomy; rendered in admin-defined order.
   Hidden completely when no attribute on the product has terms.

   ── Layout anchoring ─────────────────────────────────────────────────────
   `.wcas-card-body` is a flex column with `gap: 4px`. The footer (price +
   ATC) already uses `margin-top: auto` to pin itself to the bottom. We want
   the attribute strip to sit DIRECTLY above the footer regardless of how
   tall the title is — so every card in a row lines up its attribute strip
   to the same vertical position from the bottom, even when one card has a
   single-line title and its neighbour has a three-line one.

   The trick: put the strip immediately before the footer in DOM order and
   give it `margin-top: auto`. In a flex column, only the first item with
   `margin-top: auto` consumes the available space — so the strip pushes
   itself to the bottom of the body, and the footer (which still has its
   own `margin-top: auto`) just sits below it. Cards without a strip fall
   back to the old behaviour (footer is the only auto, it pins to bottom).

   ── Padding / alignment ──────────────────────────────────────────────────
   Default `<ul>` has `padding-inline-start: 40px`; Divi and other themes
   often add extra padding and bottom margin to `ul`/`li`. The selector
   prefix `.wcas-product-card` raises specificity enough to win without
   `!important`. Zero left padding/margin keeps the strip flush with the
   title and price; zero bottom margin keeps the spacing-above-price
   controlled by the parent gap + footer padding-top (≈ 12px total), close
   to the requested "about 10px above the price". */
.wcas-product-card .wcas-card-attrs {
    list-style: none;
    margin: auto 0 0 0;
    padding: 0;
    padding-inline-start: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: calc(var(--wcas-font-body) - 1px);
    color: var(--wcas-text-muted);
    line-height: 1.35;
}

.wcas-product-card .wcas-card-attr {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wcas-product-card .wcas-card-attr-name {
    font-weight: 600;
    color: var(--wcas-text);
}

.wcas-product-card .wcas-card-attr-value {
    color: var(--wcas-text-muted);
}

.wcas-card-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--wcas-text-muted);
}

.wcas-card-stars {
    color: #f59e0b;
    font-size: 13px;
    letter-spacing: 1px;
}

.wcas-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    flex-shrink: 0;       /* never let the footer compress off the bottom */
}

/* Stacked layout: price above, button full-width below */
.wcas-card-footer.wcas-footer-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.wcas-card-footer.wcas-footer-stacked .wcas-add-to-cart,
.wcas-card-footer.wcas-footer-stacked .wcas-select-options-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.wcas-card-price {
    font-size: var(--wcas-font-price);
    font-weight: 700;
    color: var(--wcas-price-color);
}

.wcas-card-price ins { text-decoration: none; }

.wcas-card-price del {
    font-size: calc(var(--wcas-font-price) - 2px);
    color: var(--wcas-text-muted);
    font-weight: 400;
    margin-right: 4px;
}

.wcas-card-price del + ins { color: var(--wcas-accent); }

/* Add to cart button */
.wcas-add-to-cart {
    flex-shrink: 0;
    padding: 8px 14px;
    background: var(--wcas-primary);
    color: var(--wcas-btn-text);
    border: none;
    border-radius: var(--wcas-radius-btn);
    font-size: var(--wcas-font-btn);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--wcas-transition), transform var(--wcas-transition);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

.wcas-add-to-cart:hover { background: var(--wcas-primary-hover); transform: scale(1.02); }
.wcas-add-to-cart:active { transform: scale(.98); }

.wcas-add-to-cart.is-loading { opacity: .7; pointer-events: none; }

.wcas-add-to-cart.is-added {
    background: #22c55e;
    pointer-events: none;
}

/* Variable product — show link instead of direct add */
.wcas-select-options-btn {
    padding: 8px 14px;
    background: transparent;
    color: var(--wcas-primary);
    border: 1.5px solid var(--wcas-primary);
    border-radius: var(--wcas-radius-btn);
    font-size: var(--wcas-font-btn);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--wcas-transition), color var(--wcas-transition);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.wcas-select-options-btn:hover {
    background: var(--wcas-primary);
    color: var(--wcas-btn-text);
}

/* Skeleton cards */
.wcas-card-skeleton {
    background: var(--wcas-card-bg);
    border: 1px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-card);
    overflow: hidden;
    padding-bottom: 14px;
}

.wcas-skeleton-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--wcas-surface);
    animation: wcas-shimmer 1.4s ease infinite;
}

.wcas-skeleton-line {
    display: block;
    height: 12px;
    background: var(--wcas-surface);
    border-radius: 4px;
    margin: 10px 14px 0;
    animation: wcas-shimmer 1.4s ease infinite;
}

/* ─── Pagination ─────────────────────────────────────────────────────────────── */

.wcas-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 24px 0;
    flex-wrap: wrap;
}

.wcas-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
    background: var(--wcas-card-bg);
    color: var(--wcas-text);
    font-family: inherit;
    font-size: var(--wcas-font-body);
    cursor: pointer;
    transition: background var(--wcas-transition), color var(--wcas-transition), border-color var(--wcas-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wcas-page-btn:hover {
    background: var(--wcas-primary);
    color: #fff;
    border-color: var(--wcas-primary);
}

.wcas-page-btn.is-active {
    background: var(--wcas-primary);
    color: #fff;
    border-color: var(--wcas-primary);
    font-weight: 700;
    pointer-events: none;
}

.wcas-page-btn:disabled { opacity: .4; pointer-events: none; }

/* ─── Cart overlay ───────────────────────────────────────────────────────────
   The backdrop behind an open drawer: it dims the page and closing is a click
   on it.

   This used to be declared ONLY inside the ≤1200px media queries, which was
   fine while the drawer was a mobile-only affair. The standalone
   [wc_advanced_cart] drawer opens at every width, so above the breakpoint the
   overlay element was completely unstyled — an invisible, zero-height div. No
   backdrop, nothing to click, and since opening also sets
   body { overflow: hidden }, the page was left frozen with no way out.

   Declared globally now. The copies inside the media queries and in dynamic
   CSS are redundant, and harmless.
──────────────────────────────────────────────────────────────────────────── */

.wcas-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 2147483646;
    display: none;
}

.wcas-cart-overlay.is-open { display: block; }

/* ─── Cart Panel ─────────────────────────────────────────────────────────────── */

.wcas-cart-panel {
    background: var(--wcas-surface);
    border-radius: var(--wcas-radius-card);
    overflow: hidden;
}

.wcas-cart-panel.is-sticky {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wcas-card-border) transparent;
}

.wcas-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--wcas-card-border);
}

.wcas-cart-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wcas-font-heading);
    font-weight: var(--wcas-weight-heading);
    color: var(--wcas-text);
}

.wcas-cart-count-badge {
    background: var(--wcas-primary);
    color: #fff;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    padding: 1px 8px;
    min-width: 22px;
    text-align: center;
}

/* Cart items */
.wcas-cart-items {
    padding: 8px 0;
    min-height: 80px;
}

.wcas-cart-item {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--wcas-card-border);
    align-items: flex-start;
}

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

.wcas-cart-item-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--wcas-card-bg);
}

.wcas-cart-item-info { flex: 1; min-width: 0; }

.wcas-cart-item-name {
    font-size: var(--wcas-font-body);
    font-weight: 500;
    color: var(--wcas-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}

.wcas-cart-item-name:hover { color: var(--wcas-primary); }

.wcas-cart-item-variation {
    font-size: 11px;
    color: var(--wcas-text-muted);
    margin-bottom: 4px;
}

.wcas-cart-item-price {
    font-size: var(--wcas-font-body);
    font-weight: 600;
    color: var(--wcas-price-color);
}

.wcas-cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.wcas-qty-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1.5px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
    overflow: hidden;
}

.wcas-qty-btn {
    width: 28px;
    height: 28px;
    background: var(--wcas-card-bg);
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--wcas-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--wcas-transition);
    padding: 0;
    line-height: 1;
}

.wcas-qty-btn:hover { background: color-mix(in srgb, var(--wcas-primary) 12%, transparent); }

.wcas-qty-value {
    min-width: 28px;
    text-align: center;
    font-size: var(--wcas-font-body);
    font-weight: 600;
    color: var(--wcas-text);
    background: transparent;
    border: none;
    padding: 0;
}

.wcas-cart-item-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--wcas-text-muted);
    font-size: 13px;
    padding: 2px;
    transition: color var(--wcas-transition);
    line-height: 1;
}

.wcas-cart-item-remove:hover { color: #ef4444; }

.wcas-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px;
    color: var(--wcas-text-muted);
    gap: 8px;
    text-align: center;
}

.wcas-cart-item-skeleton {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
}

.wcas-cart-item-skeleton::before {
    content: '';
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: var(--wcas-card-border);
    flex-shrink: 0;
    animation: wcas-shimmer 1.4s ease infinite;
}

.wcas-cart-item-skeleton::after {
    content: '';
    flex: 1;
    height: 52px;
    border-radius: 8px;
    background: var(--wcas-card-border);
    animation: wcas-shimmer 1.4s ease infinite;
}

/* Coupon */
.wcas-cart-coupon {
    padding: 10px 14px;
    border-top: 1px solid var(--wcas-card-border);
}

.wcas-coupon-details summary {
    font-size: 13px;
    color: var(--wcas-primary);
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
    list-style: none; /* remove disclosure triangle in Firefox */
}

/* Remove native disclosure triangle (Chrome/Safari) */
.wcas-coupon-details summary::-webkit-details-marker { display: none; }
.wcas-coupon-details summary::marker { display: none; }

.wcas-coupon-form {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.wcas-coupon-input {
    flex: 1;
    border: 1.5px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
    padding: 7px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--wcas-text);
    background: var(--wcas-card-bg);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.wcas-coupon-input:focus { border-color: var(--wcas-primary); }

.wcas-coupon-apply {
    flex-shrink: 0;
}

.wcas-applied-coupons { margin-top: 6px; }

.wcas-applied-coupon-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: color-mix(in srgb, #22c55e 12%, transparent);
    color: #16a34a;
    border-radius: 99px;
    padding: 3px 8px 3px 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid color-mix(in srgb, #22c55e 25%, transparent);
}

/* Totals */
.wcas-cart-totals {
    padding: 12px 14px 8px;
    border-top: 1px solid var(--wcas-card-border);
}

.wcas-cart-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--wcas-font-body);
    color: var(--wcas-text);
}

.wcas-cart-subtotal-value {
    font-weight: 700;
    font-size: var(--wcas-font-price);
    color: var(--wcas-price-color);
}

/* Subtotal busy state: small inline spinner. Shown while any cart-mutating
   AJAX is in flight, so the user knows the server is still working and
   shouldn't navigate away. */
.wcas-cart-subtotal-value .wcas-subtotal-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    border: 2px solid var(--wcas-text-muted, #999);
    border-top-color: transparent;
    border-radius: 50%;
    animation: wcas-subtotal-spin 0.8s linear infinite;
}
@keyframes wcas-subtotal-spin {
    to { transform: rotate(360deg); }
}

/* Action buttons in their busy/disabled state. Native `disabled` attribute
   handles the <button>; <a> elements rely on `aria-disabled` + CSS. */
.wcas-cart-actions .wcas-btn-view-cart.wcas-is-busy,
.wcas-cart-actions .wcas-btn-checkout.wcas-is-busy,
.wcas-cart-actions .wcas-btn-update-cart:disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Optimistically-inserted cart item (placeholder while ATC AJAX is in
   flight). Slightly faded + interactivity disabled because it has no real
   cart_key yet — its qty / remove buttons would fail server-side. */
.wcas-cart-item-pending {
    opacity: 0.7;
    position: relative;
}
.wcas-cart-item-pending .wcas-qty-btn,
.wcas-cart-item-pending .wcas-cart-item-remove {
    cursor: not-allowed;
    opacity: 0.5;
}
.wcas-cart-item-pending::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--wcas-text-muted, #999);
    border-top-color: transparent;
    border-radius: 50%;
    animation: wcas-pending-spin 0.8s linear infinite;
}
@keyframes wcas-pending-spin {
    to { transform: rotate(360deg); }
}

/* Cart actions */
.wcas-cart-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 14px;
}

.wcas-btn-update-cart,
.wcas-btn-view-cart {
    text-align: center;
    text-decoration: none;
}

.wcas-btn-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 700;
}

/* ─── Quick View Modal ───────────────────────────────────────────────────────── */

.wcas-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(3px);
    animation: wcas-fade-in 200ms ease;
}

.wcas-modal-overlay[hidden] { display: none; }

.wcas-modal {
    background: var(--wcas-card-bg);
    border-radius: var(--wcas-radius-card);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    max-width: 860px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: wcas-slide-up 250ms ease;
}

.wcas-modal-close {
    position: sticky;
    float: right;
    top: 12px;
    margin-right: 14px;
    margin-top: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wcas-surface);
    border: 1px solid var(--wcas-card-border);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: var(--wcas-text);
    transition: background var(--wcas-transition);
}

.wcas-modal-close:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

.wcas-modal-body {
    padding: 20px 24px 24px;
}

/* ─── Compare Bar ────────────────────────────────────────────────────────────── */

.wcas-compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--wcas-card-bg);
    border-top: 1.5px solid var(--wcas-card-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,.1);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 9998;
    flex-wrap: wrap;
    animation: wcas-slide-up-sm 200ms ease;
}

.wcas-compare-bar[hidden] { display: none; }

.wcas-compare-items { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }

.wcas-compare-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--wcas-surface);
    border: 1px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
    padding: 5px 10px;
    font-size: 13px;
    max-width: 160px;
}

.wcas-compare-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.wcas-compare-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wcas-compare-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ─── Recently Viewed ────────────────────────────────────────────────────────── */

.wcas-recently-viewed {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1.5px solid var(--wcas-card-border);
}

.wcas-recently-viewed-title {
    font-size: var(--wcas-font-heading);
    font-weight: var(--wcas-weight-heading);
    margin: 0 0 14px;
    color: var(--wcas-text);
}

.wcas-recently-viewed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

/* ─── No Products ────────────────────────────────────────────────────────────── */

.wcas-no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 20px;
    color: var(--wcas-text-muted);
}

.wcas-no-products svg { opacity: .3; margin-bottom: 12px; }
.wcas-no-products p { font-size: var(--wcas-font-body); margin: 0; }

/* ─── Buttons (shared) ──────────────────────────────────────────────────────── */

.wcas-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--wcas-primary);
    color: var(--wcas-btn-text) !important;
    border: none;
    border-radius: var(--wcas-radius-btn);
    font-family: inherit;
    font-size: var(--wcas-font-btn);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--wcas-transition), transform var(--wcas-transition);
}

.wcas-btn-primary:hover { background: var(--wcas-primary-hover); }

.wcas-btn-secondary {
    background: transparent;
    color: var(--wcas-text);
    border: 1.5px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
    font-family: inherit;
    font-size: var(--wcas-font-btn);
    cursor: pointer;
    padding: 8px 16px;
    transition: border-color var(--wcas-transition), background var(--wcas-transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.wcas-btn-secondary:hover { border-color: var(--wcas-primary); color: var(--wcas-primary); }

/* ─── Animations ─────────────────────────────────────────────────────────────── */

@keyframes wcas-spin   { to { transform: rotate(360deg); } }
@keyframes wcas-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wcas-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wcas-slide-up-sm { from { transform: translateY(100%); } to { transform: translateY(0); } }

@keyframes wcas-shimmer {
    0%   { opacity: 1; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    /* Both sidebar and cart become fixed drawers — grid is just 1fr content */
    .wcas-layout-columns {
        grid-template-columns: 1fr;
    }

    .wcas-cart-panel {
        display: none; /* cart becomes slide-over on tablet */
    }

    .wcas-cart-panel.is-open {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(var(--wcas-cart-width), 90vw);
        border-radius: 0;
        z-index: 9999;
        max-height: 100vh;
        overflow-y: auto;
        box-shadow: -4px 0 24px rgba(0,0,0,.15);
        animation: wcas-slide-in-right 250ms ease;
    }

    .wcas-cart-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 9998;
    }

    .wcas-cart-overlay.is-open { display: block; }
}

@media (max-width: 1200px) {
    /* Sidebar drawer mechanics — see definitive overrides at the end of this
       file (search for "Mobile drawers — definitive overrides"). The reason
       the rules live there is so they cascade ABOVE any theme/builder CSS
       loaded after this stylesheet. Keeping this block intentionally empty
       prevents the older visibility-based approach (which could leave the
       sidebar stuck off-screen) from interfering. */
}

@media (max-width: 768px) {
    .wcas-layout-columns {
        grid-template-columns: 1fr;
    }

    .wcas-toolbar { flex-direction: column; align-items: stretch; }
    .wcas-toolbar-right { justify-content: space-between; }
    .wcas-sort-select { flex: 1; }
}

@keyframes wcas-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes wcas-slide-in-left  { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ─── Phase 2 additions ──────────────────────────────────────────────────────── */

/* Mini card (Recently Viewed strip) */
.wcas-mini-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: var(--wcas-text);
    background: var(--wcas-card-bg);
    border: 1px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-card);
    overflow: hidden;
    transition: box-shadow var(--wcas-transition), transform var(--wcas-transition);
}

.wcas-mini-card:hover {
    box-shadow: var(--wcas-card-shadow-hover);
    transform: translateY(-2px);
    color: var(--wcas-primary);
}

.wcas-mini-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.wcas-mini-card-name {
    font-size: 12px;
    font-weight: 500;
    padding: 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

.wcas-mini-card-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--wcas-price-color);
    padding: 0 8px 8px;
}

/* Load More button */
.wcas-load-more-btn {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 10px 32px;
    font-size: var(--wcas-font-btn);
    font-weight: 600;
}

/* Scroll sentinel */
.wcas-scroll-sentinel {
    height: 1px;
    margin-top: 20px;
    pointer-events: none;
}

/* Pagination ellipsis */
.wcas-page-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    color: var(--wcas-text-muted);
    font-size: var(--wcas-font-body);
    user-select: none;
}

/* Out of stock label */
.wcas-out-of-stock-label {
    font-size: 12px;
    color: var(--wcas-text-muted);
    font-weight: 500;
    padding: 4px 0;
}

/* Notify me bell in card footer */
.wcas-notify-me-btn {
    width: auto;
    height: auto;
    border-radius: var(--wcas-radius-btn);
    padding: 7px 12px;
    gap: 5px;
    display: inline-flex;
    font-size: var(--wcas-font-btn);
    font-weight: 600;
}

/* Grid card stagger animation */
.wcas-product-card {
    will-change: opacity, transform;
}

/* Hide PHP-rendered skeletons once JS has taken over */
.wcas-shop-wrapper[data-js-ready="1"] .wcas-card-skeleton {
    display: none;
}

/* ─── Phase 3–6 additions ────────────────────────────────────────────────────── */

/* Search: highlight match text */
.wcas-search-result-item mark {
    background: color-mix(in srgb, var(--wcas-accent) 30%, transparent);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* Search: "see all" row */
.wcas-search-see-all {
    padding: 10px 14px;
    border-top: 1px solid var(--wcas-card-border);
}

.wcas-search-see-all-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--wcas-font-body);
    color: var(--wcas-primary);
    padding: 0;
    text-align: left;
    width: 100%;
}

.wcas-search-see-all-btn:hover { text-decoration: underline; }

/* Search: history item remove button */
.wcas-history-remove {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--wcas-text-muted);
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity var(--wcas-transition);
}

.wcas-search-history-item:hover .wcas-history-remove { opacity: 1; }
.wcas-history-remove:hover { background: #fee2e2; color: #dc2626; }

/* Filter: on-sale toggle switch */
.wcas-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: var(--wcas-font-body);
    user-select: none;
}

.wcas-toggle-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wcas-toggle-track {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    background: var(--wcas-card-border);
    border-radius: 99px;
    transition: background var(--wcas-transition);
    flex-shrink: 0;
}

.wcas-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--wcas-transition);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.wcas-toggle-label input:checked ~ .wcas-toggle-track {
    background: var(--wcas-primary);
}

.wcas-toggle-label input:checked ~ .wcas-toggle-track .wcas-toggle-thumb {
    transform: translateX(16px);
}

/* Filter clear wrap */
.wcas-filter-clear-wrap {
    padding: 12px 16px;
    border-top: 1px solid var(--wcas-card-border);
}

.wcas-clear-filters {
    width: 100%;
    text-align: center;
    font-size: 13px;
}

/* Coupon messages */
.wcas-coupon-message {
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 4px;
    margin-top: 6px;
}

.wcas-coupon-message.is-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.wcas-coupon-message.is-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Cart: quantity value display */
.wcas-qty-value {
    padding: 0 6px;
}

/* Cart open button (for slide-over mode, visible on tablet/mobile only)
   display:none by default; display:flex enabled inside @media (max-width:1200px) below */
/*
   Corner and edge spacing are admin-controlled (Cart tab). Both floating cart
   buttons — the main store's and the standalone one [wc_advanced_cart] adds —
   are this same element reading these same two variables, so they can never
   end up disagreeing about where the cart button lives.

   Geometry is marked !important, for the same reason the drawer's is. This is
   a fixed overlay, not part of the page flow, so a theme has no legitimate
   claim on its shape or position — and an ordinary page-builder rule like
   `.et_pb_text button { position: static; padding: 18px 32px }` (specificity
   0,1,1) beats a single plugin class (0,1,0) without needing !important of its
   own. Measured: dropped inside a Divi text module without these, the button
   rendered as a grey 86x58 static block in the page flow.

   `display` is deliberately NOT !important here — the media query below and
   the standalone modifier both need to be able to turn it on.
*/
.wcas-open-cart-btn {
    display: none;
    position: fixed !important;
    bottom: var(--wcas-cart-fab-bottom, 20px) !important;
    right: var(--wcas-cart-fab-side, 20px) !important;
    left: auto !important;
    top: auto !important;
    z-index: 9990;
    width: 52px !important;
    height: 52px !important;
    min-width: 0;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--wcas-primary) !important;
    color: #fff;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    font-size: 22px;
    align-items: center;
    justify-content: center;
    transition: transform var(--wcas-transition), background var(--wcas-transition);
}

.wcas-open-cart-btn.wcas-fab-bottom-left {
    right: auto !important;
    left: var(--wcas-cart-fab-side, 20px) !important;
}

/*
   The standalone button is shown at every width. The main store's FAB can hide
   above the drawer breakpoint because the cart is a visible column up there;
   a page with only [wc_advanced_cart] on it has no such column, so hiding the
   button would leave no way into the cart at all.
*/
.wcas-open-cart-btn.wcas-cart-fab-standalone { display: flex !important; }

.wcas-open-cart-btn:hover { transform: scale(1.08); background: var(--wcas-primary-hover) !important; }

.wcas-open-cart-btn .wcas-cart-fab-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--wcas-accent);
    color: #fff;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

@media (max-width: 1200px) {
    .wcas-open-cart-btn { display: flex; }
}

/* ── "Back to top" FAB (Load More mode) ─────────────────────────────────────
   Desktop: bottom-right (no cart FAB there to clash with).
   Mobile:  sits to the LEFT of the cart FAB (which is bottom-right).
   Hidden until JS adds .is-visible once the user scrolls ~1 viewport down. */
.wcas-scroll-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9989;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--wcas-surface);
    color: var(--wcas-text);
    border: 1px solid var(--wcas-card-border);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease, background var(--wcas-transition), color var(--wcas-transition);
}

.wcas-scroll-top-btn[hidden] { display: none; }

.wcas-scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wcas-scroll-top-btn:hover {
    background: var(--wcas-primary);
    color: #fff;
    border-color: var(--wcas-primary);
}

@media (max-width: 1200px) {
    /* Cart FAB occupies right:20px, so shift this to its left. */
    .wcas-scroll-top-btn { right: 84px; bottom: 23px; }
    /* When the cart is hidden there's no cart FAB to sit beside — reclaim the corner. */
    .wcas-shop-wrapper.wcas-no-cart .wcas-scroll-top-btn { right: 20px; }
    /* Same when the cart button has been moved to the opposite corner. */
    .wcas-shop-wrapper.wcas-fab-left .wcas-scroll-top-btn {
        right: var(--wcas-cart-fab-side, 20px);
    }
}


/* Filter panel radio/checkbox alignment */
.wcas-attr-option input[type="radio"] {
    accent-color: var(--wcas-primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* Active filter tag clear button */
.wcas-filter-tag-remove {
    line-height: 1;
    font-size: 13px;
}

/* ─── Phase 8–9 additions ────────────────────────────────────────────────────── */

/* Quick View modal content */
.wcas-qv-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 600px) {
    .wcas-qv-inner { grid-template-columns: 1fr; }
}

.wcas-qv-gallery {}

.wcas-qv-main-img-wrap {
    /* No fixed aspect ratio — the wrap shrinks to the loaded image so there's
       no grey letterbox below/around portrait or landscape product photos.
       min-height keeps it from collapsing before the image loads. */
    background: var(--wcas-surface);
    border-radius: var(--wcas-radius-card);
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.wcas-qv-main-img {
    width: 100%;
    height: auto;            /* follow the image's natural aspect ratio */
    max-height: 70vh;        /* cap very tall images so the modal stays usable */
    object-fit: contain;
    display: block;
    transition: opacity 200ms ease;
}

.wcas-qv-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wcas-qv-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--wcas-card-border);
    cursor: pointer;
    transition: border-color var(--wcas-transition);
}

.wcas-qv-thumb.is-active,
.wcas-qv-thumb:hover {
    border-color: var(--wcas-primary);
}

.wcas-qv-title {
    font-size: var(--wcas-font-heading);
    font-weight: var(--wcas-weight-heading);
    margin: 0 0 8px;
    color: var(--wcas-text);
}

.wcas-qv-price {
    font-size: calc(var(--wcas-font-price) + 2px);
    font-weight: 700;
    color: var(--wcas-price-color);
    margin: 8px 0;
}

.wcas-qv-desc {
    font-size: var(--wcas-font-body);
    color: var(--wcas-text-muted);
    line-height: 1.55;
    margin: 10px 0;
}

.wcas-qv-attrs {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
    margin: 10px 0;
}

.wcas-qv-attrs th,
.wcas-qv-attrs td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--wcas-card-border);
    text-align: left;
}

.wcas-qv-attrs th { color: var(--wcas-text-muted); font-weight: 500; width: 40%; }

.wcas-qv-sku {
    font-size: 12px;
    color: var(--wcas-text-muted);
    margin: 6px 0;
}

.wcas-qv-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.wcas-qv-actions .button {
    flex: 1;
    min-width: 120px;
    text-align: center;
}

.wcas-qv-loading {
    display: flex;
    justify-content: center;
    padding: 48px 20px;
}

.wcas-qv-error {
    padding: 32px;
    text-align: center;
    color: var(--wcas-text-muted);
}

/* Compare table modal */
.wcas-compare-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(3px);
}

.wcas-compare-modal-overlay[hidden] { display: none; }

.wcas-compare-modal {
    background: var(--wcas-card-bg);
    border-radius: var(--wcas-radius-card);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    max-width: 960px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    position: relative;
}

.wcas-compare-modal-close {
    position: sticky;
    float: right;
    top: 12px;
    margin: 12px 14px 0 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wcas-surface);
    border: 1px solid var(--wcas-card-border);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: var(--wcas-text);
}

.wcas-compare-modal-close:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

.wcas-compare-table-wrap {
    padding: 16px 20px 24px;
    overflow-x: auto;
}

.wcas-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wcas-compare-table th,
.wcas-compare-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--wcas-card-border);
    text-align: left;
    vertical-align: top;
    min-width: 160px;
}

.wcas-compare-table thead th {
    font-size: var(--wcas-font-body);
    font-weight: 600;
    color: var(--wcas-text);
    background: var(--wcas-surface);
}

.wcas-compare-table thead th:first-child { min-width: 100px; }

.wcas-compare-table tbody th {
    color: var(--wcas-text-muted);
    font-weight: 500;
    background: var(--wcas-surface);
    white-space: nowrap;
}

.wcas-compare-table a {
    color: var(--wcas-primary);
    text-decoration: none;
}

.wcas-compare-table a:hover { text-decoration: underline; }

/* Compare bar — full state flash */
.wcas-compare-bar.is-full {
    animation: wcas-shake 400ms ease;
}

@keyframes wcas-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-4px); }
    75%       { transform: translateX(4px); }
}

/* Sidebar overlay (injected by responsive.js) */
.wcas-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9998;
}

.wcas-sidebar-overlay.is-open {
    display: block;
}

/* ─── Overlay button tooltips ───────────────────────────────────────────────────
   Pure CSS, driven by the data-tooltip attribute set in card.js.
   Tooltip appears to the left of the button column on hover.
   Uses the button's own position context (.wcas-overlay-btn has position relative
   via its parent's flex layout; we add position:relative explicitly here).
────────────────────────────────────────────────────────────────────────────────── */

.wcas-overlay-btn {
    position: relative; /* tooltip anchor */
}

/* Tooltip bubble */
.wcas-overlay-btn[data-tooltip]::before {
    content: attr( data-tooltip );
    position: absolute;
    right: calc( 100% + 8px );
    top: 50%;
    transform: translateY( -50% ) translateX( 4px );
    background: rgba( 15, 23, 42, 0.88 );
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: 10;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0;
}

/* Tooltip arrow (pointing right toward the button) */
.wcas-overlay-btn[data-tooltip]::after {
    content: '';
    position: absolute;
    right: calc( 100% + 1px );
    top: 50%;
    transform: translateY( -50% ) translateX( 6px );
    border: 5px solid transparent;
    border-left-color: rgba( 15, 23, 42, 0.88 );
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: 10;
}

/* Show on hover — delay slightly so it doesn't flash on fast passes */
.wcas-overlay-btn[data-tooltip]:hover::before,
.wcas-overlay-btn[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY( -50% ) translateX( 0 );
    transition-delay: 120ms;
}

/* Don't show tooltip while the card overlay is still animating in */
.wcas-product-card:not(:hover) .wcas-overlay-btn[data-tooltip]::before,
.wcas-product-card:not(:hover) .wcas-overlay-btn[data-tooltip]::after {
    opacity: 0;
    transition: none;
}

/* ─── ATC icon-only mode ─────────────────────────────────────────────────────── */

.wcas-add-to-cart.wcas-atc-icon-only {
    padding: 8px;
    min-width: 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wcas-add-to-cart.wcas-atc-icon-only svg {
    width: 16px;
    height: 16px;
}

/* ─── Cart panel button design vars ─────────────────────────────────────────────
   These CSS custom properties are set in :root by WCAS_Dynamic_CSS and control
   the appearance of the three cart action buttons independently.
────────────────────────────────────────────────────────────────────────────────── */

/* View Cart button */
.wcas-btn-view-cart {
    background:    var(--wcas-cart-view-bg,     transparent) !important;
    color:         var(--wcas-cart-view-color,  var(--wcas-text)) !important;
    border-color:  var(--wcas-cart-view-border, var(--wcas-card-border)) !important;
    border-width:  1.5px;
    border-style:  solid;
    border-radius: var(--wcas-radius-btn);
    font-size:     var(--wcas-font-btn);
    font-weight:   600;
    transition: background var(--wcas-transition), color var(--wcas-transition), border-color var(--wcas-transition);
}

.wcas-btn-view-cart:hover {
    background:   var(--wcas-cart-view-bg-hover,     color-mix(in srgb, var(--wcas-cart-view-border, var(--wcas-card-border)) 10%, transparent)) !important;
    border-color: var(--wcas-cart-view-border-hover, var(--wcas-primary)) !important;
    color:        var(--wcas-cart-view-color-hover,  var(--wcas-primary)) !important;
}

/* Update Cart button */
.wcas-btn-update-cart {
    background:    var(--wcas-cart-update-bg,     transparent) !important;
    color:         var(--wcas-cart-update-color,  var(--wcas-text-muted)) !important;
    border-color:  var(--wcas-cart-update-border, var(--wcas-card-border)) !important;
    border-width:  1.5px;
    border-style:  solid;
    border-radius: var(--wcas-radius-btn);
    font-size:     var(--wcas-font-btn);
    transition: background var(--wcas-transition), color var(--wcas-transition), border-color var(--wcas-transition);
}

.wcas-btn-update-cart:hover {
    background:   var(--wcas-cart-update-bg-hover,     color-mix(in srgb, var(--wcas-primary) 6%, transparent)) !important;
    border-color: var(--wcas-cart-update-border-hover, var(--wcas-primary)) !important;
    color:        var(--wcas-cart-update-color-hover,  var(--wcas-primary)) !important;
}

/* Checkout button */
.wcas-btn-checkout {
    background:    var(--wcas-cart-checkout-bg,     var(--wcas-primary)) !important;
    color:         var(--wcas-cart-checkout-color,  var(--wcas-btn-text)) !important;
    border-color:  var(--wcas-cart-checkout-border, var(--wcas-primary)) !important;
    border-width:  1.5px;
    border-style:  solid;
    border-radius: var(--wcas-radius-btn);
    font-size:     var(--wcas-font-btn);
    font-weight:   700;
    transition: background var(--wcas-transition), color var(--wcas-transition), border-color var(--wcas-transition), filter var(--wcas-transition);
}

.wcas-btn-checkout:hover {
    filter: brightness(1.08);
}

/* ─── Bug fixes & additions ──────────────────────────────────────────────────── */

/* 1. Category list: remove all browser-default bullet points */
.wcas-cat-list,
.wcas-cat-children {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Filters toggle button: hidden on desktop, shown as drawer trigger at ≤1200px */
.wcas-filter-toggle {
    display: none !important;  /* hidden at desktop; shown in @media below */
    background: var(--wcas-primary) !important;
    color: var(--wcas-btn-text) !important;
    border: 1.5px solid var(--wcas-primary) !important;
    border-radius: var(--wcas-radius-btn) !important;
    padding: 7px 14px !important;
    font-weight: 600 !important;
    font-size: var(--wcas-font-btn) !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: background var(--wcas-transition), border-color var(--wcas-transition) !important;
    align-items: center;
    gap: 6px;
}

.wcas-filter-toggle:hover {
    background: var(--wcas-primary-hover) !important;
    border-color: var(--wcas-primary-hover) !important;
}

/* 3. Show Filters toggle whenever sidebar becomes a drawer */
@media (max-width: 1200px) {
    .wcas-filter-toggle {
        display: flex !important;
    }
}

/* 3b. EXCEPT when list+dropdowns mode is active: the dropdown bar IS the
   filter UI in that mode, so the drawer-trigger button is redundant on
   every breakpoint. The wrapper-level `.wcas-list-dropdowns` class is
   toggled by filters.js when list_filter_style == 'dropdowns' AND layout
   is 'list'. The selector is more specific than the @media rule above so
   it wins without !important duplication. */
.wcas-shop-wrapper.wcas-list-dropdowns .wcas-filter-toggle {
    display: none !important;
}

/* 4. Quick View modal action buttons — use CSS vars with sensible fallbacks */
.wcas-qv-actions .wcas-add-to-cart,
.wcas-qv-actions .wcas-qv-atc {
    background:   var(--wcas-qv-atc-bg,     var(--wcas-primary)) !important;
    color:        var(--wcas-qv-atc-color,  var(--wcas-btn-text)) !important;
    border-color: var(--wcas-qv-atc-border, var(--wcas-primary)) !important;
    border-width: 1.5px;
    border-style: solid;
    border-radius: var(--wcas-radius-btn);
    font-size:    var(--wcas-font-btn);
    font-weight:  700;
    transition: filter var(--wcas-transition);
    flex: 1;
    justify-content: center;
    text-align: center;
}

.wcas-qv-actions .wcas-add-to-cart:hover,
.wcas-qv-actions .wcas-qv-atc:hover {
    filter: brightness(1.08);
}

.wcas-qv-actions .wcas-btn-secondary,
.wcas-qv-actions a.button {
    background:   var(--wcas-qv-view-bg,     transparent) !important;
    color:        var(--wcas-qv-view-color,  var(--wcas-primary)) !important;
    border-color: var(--wcas-qv-view-border, var(--wcas-primary)) !important;
    border-width: 1.5px;
    border-style: solid;
    border-radius: var(--wcas-radius-btn);
    font-size:    var(--wcas-font-btn);
    font-weight:  600;
    flex: 1;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: background var(--wcas-transition), color var(--wcas-transition);
}

.wcas-qv-actions .wcas-btn-secondary:hover,
.wcas-qv-actions a.button:hover {
    background: color-mix(in srgb, var(--wcas-qv-view-color, var(--wcas-primary)) 8%, transparent) !important;
}

/* ─── Category menu row layout (name button + chevron in flex row) ───────────── */

.wcas-cat-row {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Name button takes all remaining space */
.wcas-cat-row .wcas-cat-btn {
    flex: 1;
    /* Remove the margin-left:auto from the count badge — chevron is now separate */
}

/* Chevron stays right-aligned, doesn't grow */
.wcas-cat-row .wcas-cat-toggle {
    flex-shrink: 0;
    margin-left: 0;
}

/* Empty chevron slot for parents with no children — occupies the same box as a
   real chevron so the count badge aligns across all rows, but shows nothing. */
.wcas-cat-toggle-empty {
    visibility: hidden;
    pointer-events: none;
}

/* Ensure no list markers anywhere in the category nav */
.wcas-cat-nav,
.wcas-cat-nav * {
    list-style: none !important;
}

/* ─── Card equal-height rows & natural name wrapping ─────────────────────────────
   Cards in a row must be equal height. We achieve this via:
   1. .wcas-product-grid uses align-items:stretch (default for grid)
   2. .wcas-product-card is a flex column that fills its grid cell
   3. .wcas-card-body flex:1 fills remaining card space
   4. .wcas-card-footer margin-top:auto pins footer to bottom
   5. .wcas-card-name has no line-clamp — full name shows on as many lines as needed
   This means cards in the same row are all the same height and no content is cut off.
────────────────────────────────────────────────────────────────────────────────── */

/* Card fills its grid cell height */
.wcas-product-card {
    height: 100%;
}

/* Body takes all available vertical space between image and footer */
.wcas-card-body {
    flex: 1;
    min-height: 0; /* allow flex child to shrink in older browsers */
}

/* Footer always at the bottom */
.wcas-card-footer {
    margin-top: auto;
}

/* ─── Quick View description variants ────────────────────────────────────────── */

.wcas-qv-short-desc {
    font-size: var(--wcas-font-body);
    color: var(--wcas-text-muted);
    line-height: 1.6;
}

.wcas-qv-long-desc {
    font-size: var(--wcas-font-body);
    color: var(--wcas-text);
    line-height: 1.7;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wcas-card-border) transparent;
    padding-right: 4px;
    border-top: 1px solid var(--wcas-card-border);
    padding-top: 10px;
    margin-top: 4px;
}

/* When both are shown, add a separator */
.wcas-qv-short-desc + .wcas-qv-long-desc {
    border-top: 1px solid var(--wcas-card-border);
    padding-top: 10px;
    margin-top: 6px;
}

/* ─── Card image button (Quick View click mode) ───────────────────────────────
   When card_click_action = 'quick_view', the image is wrapped in a <button>
   instead of an <a>. It must look identical: full-width block, no button chrome. */

.wcas-card-img-btn {
    display: block;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0; /* prevent gap below img */
}

/* Both clickable image wrappers — the Quick View <button> and the plain <a> —
   must fill the square image frame so the photo covers it at ANY source size,
   not only the square-cropped catalog thumbnail. Without the explicit height,
   a non-square larger image (medium/large/full) collapses to its natural
   ratio and leaves a grey band in the frame. */
.wcas-card-image-wrap > a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.wcas-card-img-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Card name button (Quick View click mode) */
.wcas-card-name-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: var(--wcas-text);
    text-align: left;
    line-height: inherit;
    transition: color var(--wcas-transition);
}

.wcas-card-name-btn:hover {
    color: var(--wcas-primary);
}

/* ─── Coupon input: hide native number-spinner arrows ─────────────────────── */
.wcas-coupon-input[type="text"]::-webkit-search-cancel-button,
.wcas-coupon-input::-webkit-inner-spin-button,
.wcas-coupon-input::-webkit-outer-spin-button { display: none; }

/* Hide the browser's native clear/cancel button on text inputs in the mini cart */
.wcas-coupon-form input[type="text"]::-webkit-search-cancel-button,
.wcas-coupon-form input[type="text"]::-ms-clear,
.wcas-coupon-form input[type="text"]:hover::-webkit-search-cancel-button { display: none; }

/* ─── Compare bar buttons — match primary/secondary button style ──────────── */
.wcas-compare-now {
    background:    var(--wcas-primary) !important;
    color:         var(--wcas-btn-text) !important;
    border:        1.5px solid var(--wcas-primary) !important;
    border-radius: var(--wcas-radius-btn) !important;
    font-family:   inherit !important;
    font-size:     var(--wcas-font-btn) !important;
    font-weight:   600 !important;
    padding:       8px 18px !important;
    cursor:        pointer !important;
    transition:    background var(--wcas-transition), border-color var(--wcas-transition) !important;
    display:       inline-flex !important;
    align-items:   center !important;
    gap:           6px !important;
}

.wcas-compare-now:hover {
    background:   var(--wcas-primary-hover) !important;
    border-color: var(--wcas-primary-hover) !important;
}

.wcas-compare-clear {
    background:    transparent !important;
    color:         var(--wcas-text) !important;
    border:        1.5px solid var(--wcas-card-border) !important;
    border-radius: var(--wcas-radius-btn) !important;
    font-family:   inherit !important;
    font-size:     var(--wcas-font-btn) !important;
    font-weight:   500 !important;
    padding:       8px 14px !important;
    cursor:        pointer !important;
    transition:    border-color var(--wcas-transition), color var(--wcas-transition) !important;
    display:       inline-flex !important;
    align-items:   center !important;
}

.wcas-compare-clear:hover {
    border-color: var(--wcas-primary) !important;
    color:        var(--wcas-primary) !important;
}

/* ─── Mobile drawers — definitive overrides (highest specificity, end of file) ──
 *
 * These rules deliberately sit at the end of the stylesheet so they win against
 * any earlier rule. !important is used because Divi and other page builders
 * inject their own header/section styles with very high z-index (often 99999)
 * and sometimes use !important themselves.
 *
 * The mechanics:
 *   1. Sidebar is always display:block at ≤1200px (no display toggling)
 *   2. .is-open just toggles transform:translateX(-100%) → translateX(0)
 *   3. No visibility:hidden timing dance — pointer-events does focus blocking
 *   4. z-index uses INT_MAX (2147483647) so we ALWAYS sit above the theme
 *
 * Why this version supersedes the earlier @media (max-width: 1200px) rule:
 * Some themes (Divi in particular) re-apply !important on .et_pb_section and
 * fixed headers that would otherwise overlap our drawer. Bumping our drawer
 * to z-index: 2147483647 with !important guarantees we cover the theme chrome.
 */

@media (max-width: 1200px) {

    /* ── Cart slide-over drawer ──────────────────────────────────────────── */
    /* Note: no .wcas-shop-wrapper ancestor in these selectors — the cart is
       portaled (moved) to document.body when opened, so it has no wrapper
       ancestor at that time. See cart.js portalCartToBody(). */
    .wcas-cart-panel.is-open {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: min(var(--wcas-cart-width, 300px), 90vw) !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
        box-shadow: -4px 0 24px rgba(0,0,0,.2) !important;
        z-index: 2147483647 !important; /* INT_MAX */
        background: var(--wcas-surface, #f8fafc) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        margin: 0 !important;
    }

    .wcas-cart-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,.45) !important;
        z-index: 2147483646 !important;
        display: none !important;
    }

    .wcas-cart-overlay.is-open {
        display: block !important;
    }

    /* ── Sidebar / filter drawer ─────────────────────────────────────────── */
    /* The sidebar is also portaled to document.body when opened (see
       responsive.js portalToBody()). When at body, it has no .wcas-shop-wrapper
       ancestor — selectors must be bare. */
    /* ── Sidebar / filter drawer ─────────────────────────────────────────── */
    /* Before JS runs, the sidebar lives inside the wrapper at column 1 of the
       grid. At mobile the grid collapses to 1fr so the sidebar would appear
       as row 1 above the product grid. Hide it in that state — once JS runs,
       it's portaled to document.body and the `body > .wcas-sidebar` rule
       below shows it (off-screen) as a slide-in drawer. */
    .wcas-shop-wrapper > .wcas-layout-columns > .wcas-sidebar {
        display: none !important;
    }

    body > .wcas-sidebar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: auto !important;
        width: min(320px, 90vw) !important;
        max-width: 320px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
        box-shadow: 4px 0 24px rgba(0,0,0,.2) !important;
        z-index: 2147483647 !important; /* INT_MAX */
        background: var(--wcas-surface, #f8fafc) !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin: 0 !important;
        padding: 16px !important;
        /* Off-screen by default at mobile */
        transform: translate3d(-100%, 0, 0) !important;
        transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
        pointer-events: auto !important;
    }

    body > .wcas-sidebar.is-open {
        transform: translate3d(0, 0, 0) !important;
    }

    /* Sidebar backdrop (overlay) */
    .wcas-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,.45) !important;
        z-index: 2147483646 !important;
        display: none !important;
    }

    .wcas-sidebar-overlay.is-open {
        display: block !important;
    }
}

/* ─── Quick View "View Product" — let Divi's default arrow positioning work ─
 *
 * Our .wcas-btn-secondary class applies `display: inline-flex; justify-content:
 * center; gap: 6px` to make the button align icon + label nicely. But that flex
 * layout interferes with Divi's default hover-arrow effect: Divi positions the
 * ::after arrow assuming an inline-block button with text-align centering.
 * When wrapped in our inline-flex, the arrow ends up centered with the text
 * rather than flowing to the right edge as it does on plain .button elements.
 *
 * Reset the layout here so Divi (and similar page builders) sees a plain
 * inline-block button and applies its hover arrow correctly — the same way it
 * does on every other .button on the site.
 */
.wcas-qv-actions .wcas-qv-view-link,
.wcas-qv-actions a.button.wcas-qv-view-link,
.wcas-qv-actions a.wcas-btn-secondary.wcas-qv-view-link {
    display: inline-block !important;
    text-align: center !important;
    gap: 0 !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    /* Keep the colors/borders from the existing .wcas-btn-secondary rules
       above (which apply via the class without using display/flex). */
}

/* ─── Mini-cart coupon: remove disclosure triangle & input chrome ──────────
 *
 * The <summary> element gets a native disclosure triangle ("▶") in Chrome,
 * Safari, and Firefox. Each browser uses a different selector to remove it:
 *   ::-webkit-details-marker (Chrome/Safari)
 *   ::marker                  (Firefox & modern Chrome)
 *   list-style on <summary>   (also needed in some browsers)
 *
 * Themes (Divi in particular) often add a background-image arrow/search icon
 * to <input type="text"> via global selectors. The rules below scrub any such
 * image inside the mini-cart so only our hover effect remains visible.
 */
.wcas-mini-cart .wcas-coupon-details,
.wcas-mini-cart details {
    list-style: none !important;
}

.wcas-mini-cart .wcas-coupon-details > summary,
.wcas-mini-cart details > summary,
.wcas-cart-coupon details > summary {
    list-style: none !important;
    list-style-type: none !important;
    display: block !important; /* overrides the default list-item display */
}

.wcas-mini-cart .wcas-coupon-details > summary::-webkit-details-marker,
.wcas-mini-cart details > summary::-webkit-details-marker,
.wcas-cart-coupon details > summary::-webkit-details-marker {
    display: none !important;
    content: '' !important;
}

.wcas-mini-cart .wcas-coupon-details > summary::marker,
.wcas-mini-cart details > summary::marker,
.wcas-cart-coupon details > summary::marker {
    content: '' !important;
    color: transparent !important;
    font-size: 0 !important;
}

/* Block any theme-injected before/after pseudo-content on the summary */
.wcas-mini-cart .wcas-coupon-details > summary::before,
.wcas-cart-coupon details > summary::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

.wcas-mini-cart .wcas-coupon-details > summary::after,
.wcas-cart-coupon details > summary::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Strip any theme-injected background-image (search icons, arrows) from
   text inputs inside the mini cart. Divi & friends use this pattern. */
.wcas-mini-cart input,
.wcas-mini-cart input[type="text"],
.wcas-cart-panel input,
.wcas-cart-panel input[type="text"],
.wcas-coupon-form input,
.wcas-coupon-form input[type="text"] {
    background-image: none !important;
    background-repeat: no-repeat !important;
    text-indent: 0 !important;
    padding-left: 10px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.wcas-mini-cart input:hover,
.wcas-mini-cart input:focus,
.wcas-cart-panel input:hover,
.wcas-cart-panel input:focus,
.wcas-coupon-form input:hover,
.wcas-coupon-form input:focus {
    background-image: none !important;
}

.wcas-mini-cart input::-webkit-search-cancel-button,
.wcas-mini-cart input::-webkit-search-decoration,
.wcas-mini-cart input::-webkit-search-results-button,
.wcas-mini-cart input::-webkit-inner-spin-button,
.wcas-mini-cart input::-webkit-outer-spin-button,
.wcas-cart-panel input::-webkit-search-cancel-button,
.wcas-cart-panel input::-ms-clear {
    display: none !important;
    -webkit-appearance: none !important;
}


/* ─── Mini-cart vertical-center fallback ──────────────────────────────────────
   When portaling-to-body doesn't fully escape a theme's sticky header (rare
   but possible with extreme z-index tricks), this opt-in variant centers the
   cart vertically and uses a modal-style backdrop instead of a full-height
   drawer. Toggle via Settings → Cart → "Center cart vertically on mobile". */

@media (max-width: 1200px) {
    .wcas-cart-panel.wcas-mobile-centered.is-open {
        top: 50% !important;
        right: 50% !important;
        bottom: auto !important;
        left: auto !important;
        transform: translate(50%, -50%) !important;
        width: min(360px, 92vw) !important;
        height: auto !important;
        max-height: 80vh !important;
        border-radius: 12px !important;
        box-shadow: 0 16px 48px rgba(0,0,0,.35) !important;
    }
}

/* ─── Mini-cart action buttons — force centered text ──────────────────────
 * Divi's `.button` styling can apply `text-align: left` to the cart buttons,
 * leaving the labels aligned to the left edge. Force every button in the
 * cart actions block to centered, including the Checkout (a flex container),
 * Update Cart, and View Cart. */
.wcas-cart-actions .button,
.wcas-cart-actions a.button,
.wcas-cart-actions .wcas-btn-update-cart,
.wcas-cart-actions .wcas-btn-view-cart,
.wcas-cart-actions .wcas-btn-checkout {
    text-align: center !important;
    justify-content: center !important;
}

/* ─── Quick View — weight & dimensions meta rows ──────────────────────────── */
.wcas-qv-meta {
    margin: 12px 0 6px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--wcas-card-border) 25%, transparent);
    border-radius: var(--wcas-radius-card);
    font-size: 13px;
}

.wcas-qv-meta-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}

.wcas-qv-meta-row + .wcas-qv-meta-row {
    border-top: 1px solid var(--wcas-card-border);
    margin-top: 3px;
    padding-top: 6px;
}

.wcas-qv-meta-label {
    color: var(--wcas-text-muted);
    font-weight: 600;
}

.wcas-qv-meta-value {
    color: var(--wcas-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WISHLIST UI
   ───────────────────────────────────────────────────────────────────────────
   - Desktop: wishlist section lives in the sidebar (below filters), visible inline
   - Mobile : wishlist section in the sidebar is HIDDEN; a separate drawer with
              its own FAB button takes over (mirror of the cart FAB on the left)
   The same JS renderer fills both .wcas-wishlist-items lists so either UI is
   always in sync.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar wishlist section (desktop) ──────────────────────────────────── */
.wcas-wishlist-section {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--wcas-card-border);
}

.wcas-wishlist-section .wcas-sidebar-heading {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wcas-wishlist-count-badge {
    background: var(--wcas-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 99px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}

.wcas-wishlist-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wcas-wishlist-empty {
    font-size: 13px;
    color: var(--wcas-text-muted);
    padding: 8px 16px 12px;
    font-style: italic;
}

.wcas-wishlist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--wcas-card-border) 60%, transparent);
    transition: background var(--wcas-transition);
}

.wcas-wishlist-item:last-child { border-bottom: none; }
.wcas-wishlist-item:hover { background: color-mix(in srgb, var(--wcas-card-border) 25%, transparent); }

.wcas-wishlist-item-img {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--wcas-radius-card);
    overflow: hidden;
    background: var(--wcas-card-bg);
    display: block;
}

.wcas-wishlist-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wcas-wishlist-item-body {
    flex: 1;
    min-width: 0;
}

.wcas-wishlist-item-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--wcas-text);
    text-decoration: none;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--wcas-transition);
}

.wcas-wishlist-item-name:hover { color: var(--wcas-primary); }

.wcas-wishlist-item-price {
    font-size: 12px;
    color: var(--wcas-text-muted);
    margin-top: 2px;
}

.wcas-wishlist-item-price .amount,
.wcas-wishlist-item-price ins {
    text-decoration: none;
    font-weight: 600;
    color: var(--wcas-text);
}

.wcas-wishlist-item-remove {
    background: none;
    border: none;
    color: var(--wcas-text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    line-height: 1;
    border-radius: 50%;
    transition: background var(--wcas-transition), color var(--wcas-transition);
}

.wcas-wishlist-item-remove:hover {
    background: color-mix(in srgb, var(--wcas-danger, #ef4444) 12%, transparent);
    color: var(--wcas-danger, #ef4444);
}

/* ── Mobile wishlist drawer (left slide-out, mirror of cart drawer) ─────── */
.wcas-wishlist-drawer {
    display: none; /* shown at mobile via media query + portaling */
    background: var(--wcas-surface);
    overflow: hidden;
}

.wcas-wishlist-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--wcas-card-border);
}

.wcas-wishlist-drawer-title {
    margin: 0;
    font-size: var(--wcas-font-heading);
    font-weight: var(--wcas-weight-heading);
    color: var(--wcas-text);
}

.wcas-wishlist-drawer-close {
    background: none;
    border: none;
    color: var(--wcas-text-muted);
    cursor: pointer;
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--wcas-transition), color var(--wcas-transition);
}

.wcas-wishlist-drawer-close:hover {
    background: color-mix(in srgb, var(--wcas-card-border) 50%, transparent);
    color: var(--wcas-text);
}

/* ── Wishlist FAB (mobile only — mirror of cart FAB, left side) ──────────── */
.wcas-open-wishlist-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9990;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--wcas-accent, var(--wcas-primary));
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    font-size: 22px;
    align-items: center;
    justify-content: center;
    transition: transform var(--wcas-transition);
}

.wcas-open-wishlist-btn:hover { transform: scale(1.08); }

.wcas-open-wishlist-btn .wcas-wishlist-fab-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--wcas-primary);
    color: #fff;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ── Mobile breakpoint: show FAB + drawer, hide sidebar wishlist section ─── */
@media (max-width: 1200px) {
    .wcas-open-wishlist-btn { display: flex; }

    /* Hide the sidebar's inline wishlist on mobile — the drawer takes over */
    .wcas-wishlist-section { display: none; }

    /* Wishlist drawer — same shape as the sidebar filters drawer (left side) */
    body > .wcas-wishlist-drawer {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: auto !important;
        width: min(320px, 90vw) !important;
        max-width: 320px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
        box-shadow: 4px 0 24px rgba(0,0,0,.2) !important;
        z-index: 2147483647 !important;
        background: var(--wcas-surface, #f8fafc) !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translate3d(-100%, 0, 0) !important;
        transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
        pointer-events: auto !important;
    }

    body > .wcas-wishlist-drawer.is-open {
        transform: translate3d(0, 0, 0) !important;
    }

    /* Wishlist drawer overlay (lives on body) */
    .wcas-wishlist-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,.45) !important;
        z-index: 2147483646 !important;
        display: none !important;
    }

    .wcas-wishlist-overlay.is-open {
        display: block !important;
    }

    /* Make the wishlist items area inside the drawer scrollable independently */
    body > .wcas-wishlist-drawer .wcas-wishlist-items {
        padding: 8px 0;
    }

    body > .wcas-wishlist-drawer .wcas-wishlist-item {
        padding: 10px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIST / TABLE LAYOUT  (Phase B)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Layout toggle button ─────────────────────────────────────────────────── */
.wcas-layout-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--wcas-surface);
    border: 1.5px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
    cursor: pointer;
    color: var(--wcas-text-muted);
    transition: background var(--wcas-transition), color var(--wcas-transition), border-color var(--wcas-transition);
    flex-shrink: 0;
}

.wcas-layout-toggle:hover {
    border-color: var(--wcas-primary);
    color: var(--wcas-primary);
    background: color-mix(in srgb, var(--wcas-primary) 6%, transparent);
}

/* ─── Product grid — list mode wrapper ─────────────────────────────────────── */
.wcas-product-grid.wcas-layout-list {
    /* Override the CSS grid display so the <table> fills the container */
    display: block !important;
    overflow-x: auto; /* horizontal scroll on very narrow viewports */
}

/* ─── Product table ─────────────────────────────────────────────────────────── */
.wcas-product-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wcas-font-body);
    color: var(--wcas-text);
    /* table-layout:auto lets the browser size columns to content — prevents
       the ATC column from being clipped when the button label is wide */
    table-layout: auto;
}

.wcas-product-table th,
.wcas-product-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--wcas-card-border);
}

/* Column widths */
.wcas-th-thumbnail,
.wcas-td-thumbnail { width: 76px; }
.wcas-th-name,
.wcas-td-name      { min-width: 150px; }
.wcas-th-category,
.wcas-td-category  { width: 130px; }
.wcas-th-sku,
.wcas-td-sku       { width: 100px; font-family: monospace; font-size: 12px; color: var(--wcas-text-muted); }
.wcas-th-price,
.wcas-td-price     { width: 100px; }
.wcas-th-stock,
.wcas-td-stock     { width: 90px; }
.wcas-th-quantity,
.wcas-td-quantity  { width: 120px; }
.wcas-th-atc,
.wcas-td-atc       { width: 130px; }

/* Attribute taxonomy columns (key = attr:<taxonomy>, class suffix sanitised
   to 'attr-<taxonomy>'). Selector matches every attribute column without
   needing to know which taxonomies exist on the site. */
[class*="wcas-th-attr-"],
[class*="wcas-td-attr-"] { width: 120px; font-size: 13px; color: var(--wcas-text); }

/* Header row */
.wcas-product-table thead tr {
    background: color-mix(in srgb, var(--wcas-card-border) 35%, transparent);
}

.wcas-product-table thead th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wcas-text-muted);
    white-space: nowrap;
    user-select: none;
    padding: 8px 12px;
}

/* Sticky header when table is tall */
.wcas-product-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--wcas-surface);
}

/* Sortable column headers */
.wcas-th-sortable { cursor: pointer; }

.wcas-th-btn {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wcas-text-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: color var(--wcas-transition);
}

.wcas-th-sortable:hover .wcas-th-btn,
.wcas-th-sortable.is-active .wcas-th-btn {
    color: var(--wcas-primary);
}

.wcas-th-sort-icon {
    font-size: 13px;
    font-style: normal;
    opacity: 0.7;
    transition: opacity var(--wcas-transition);
}

.wcas-th-sort-idle {
    opacity: 0.35;
}

.wcas-th-sortable.is-active .wcas-th-sort-icon {
    opacity: 1;
}

/* Body rows */
.wcas-product-row:hover {
    background: color-mix(in srgb, var(--wcas-primary) 4%, transparent);
}

.wcas-product-row:last-child td {
    border-bottom: none;
}

/* Thumbnail cell */
.wcas-table-thumb {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: var(--wcas-radius-card);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--wcas-card-bg);
}

.wcas-table-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Name cell */
.wcas-table-name {
    font-weight: 600;
    color: var(--wcas-text);
    text-decoration: none;
    display: block;
    line-height: 1.3;
    transition: color var(--wcas-transition);
}

.wcas-table-name:hover { color: var(--wcas-primary); }

.wcas-table-badges { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }

/* Stock badges */
.wcas-stock-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
}

.wcas-stock-in  { background: color-mix(in srgb, #22c55e 14%, transparent); color: #15803d; }
.wcas-stock-out { background: color-mix(in srgb, #ef4444 12%, transparent); color: #dc2626; }

/* Qty stepper in table */
.wcas-table-qty {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
    overflow: hidden;
    width: fit-content;
}

.wcas-table-qty .wcas-qty-btn {
    background: var(--wcas-surface);
    border: none;
    width: 28px;
    height: 28px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: var(--wcas-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--wcas-transition);
}

.wcas-table-qty .wcas-qty-btn:hover {
    background: color-mix(in srgb, var(--wcas-primary) 10%, transparent);
    color: var(--wcas-primary);
}

.wcas-table-qty .wcas-qty-input {
    width: 36px;
    border: none;
    border-left: 1px solid var(--wcas-card-border);
    border-right: 1px solid var(--wcas-card-border);
    text-align: center;
    font-size: 13px;
    padding: 0;
    height: 28px;
    background: var(--wcas-card-bg);
    color: var(--wcas-text);
    -moz-appearance: textfield;
    appearance: textfield;
}

.wcas-table-qty .wcas-qty-input::-webkit-inner-spin-button,
.wcas-table-qty .wcas-qty-input::-webkit-outer-spin-button { display: none; }

/* ATC button in table — inherits .wcas-add-to-cart styles (same class as card).
   Just ensure it fills the cell and doesn't get clipped. */
.wcas-td-atc .wcas-add-to-cart {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

/* Empty table state */
.wcas-table-empty {
    text-align: center;
    color: var(--wcas-text-muted);
    font-style: italic;
    padding: 32px;
}

/* Admin column builder badge */
.wcas-col-sortable-badge {
    font-size: 11px;
    color: #a7aaad;
    margin-left: 4px;
}

/* ─── Mobile: list mode becomes compact cards ───────────────────────────────── */
@media (max-width: 768px) {
    .wcas-product-table,
    .wcas-product-table thead,
    .wcas-product-table tbody,
    .wcas-product-table tr,
    .wcas-product-table th,
    .wcas-product-table td {
        display: block;
        width: 100% !important;
    }

    .wcas-product-table thead { display: none; } /* hide header row */

    .wcas-product-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
        border-bottom: 1px solid var(--wcas-card-border);
        align-items: center;
        background: var(--wcas-card-bg);
        border-radius: var(--wcas-radius-card);
        margin-bottom: 8px;
    }

    .wcas-product-row:last-child { border-bottom: none; margin-bottom: 0; }

    .wcas-td-thumbnail {
        flex-shrink: 0;
        width: 64px !important;
        padding: 0;
    }

    .wcas-td-name {
        flex: 1;
        min-width: 0;
        padding: 0;
    }

    .wcas-td-category,
    .wcas-td-sku,
    .wcas-td-stock { 
        font-size: 11px;
        color: var(--wcas-text-muted);
        padding: 0 0 0 72px;  /* indent past thumbnail */
        width: auto !important;
    }

    /* Attribute columns (dynamic) — mirror the category/sku/stock treatment */
    [class*="wcas-td-attr-"] {
        font-size: 11px;
        color: var(--wcas-text-muted);
        padding: 0 0 0 72px;
        width: auto !important;
    }

    .wcas-td-price {
        margin-left: 72px;
        font-weight: 700;
        color: var(--wcas-text);
        padding: 0;
    }

    .wcas-td-quantity { display: none; } /* compact mode: ATC direct */

    .wcas-td-atc {
        margin-left: auto;
        padding: 0;
        width: auto !important;
    }

    .wcas-td-atc .wcas-add-to-cart-btn {
        font-size: 12px;
        padding: 6px 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE C — DROPDOWN FILTER BAR
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container — sits between toolbar and table */
.wcas-filter-dropdowns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--wcas-card-border);
    margin-bottom: 12px;
}

.wcas-filter-dropdowns[hidden] { display: none !important; }

/* Each filter's label + control wrapper */
.wcas-dropdown-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 130px;
    max-width: 200px;
    flex: 1;
}

.wcas-dropdown-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wcas-text-muted);
    white-space: nowrap;
}

/* Standard select dropdown */
.wcas-filter-dropdown {
    height: 34px;
    padding: 0 28px 0 10px;
    border: 1.5px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
    background: var(--wcas-card-bg);
    color: var(--wcas-text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color var(--wcas-transition);
    width: 100%;
}

.wcas-filter-dropdown:focus {
    outline: none;
    border-color: var(--wcas-primary);
}

.wcas-filter-dropdown:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wcas-primary) 30%, transparent);
}

/* Active (filtered) state — highlight the dropdown */
.wcas-filter-dropdown.is-active {
    border-color: var(--wcas-primary);
    color: var(--wcas-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235b5ef4'/%3E%3C/svg%3E");
}

/* Sub-category dropdown — disabled state when "All Categories" is the
   active parent, or when the active parent has no children. The native
   :disabled pseudo handles the <select> itself; the wrapper class fades
   the label too so the whole control reads as muted. */
.wcas-dropdown-wrap.is-disabled .wcas-dropdown-label {
    opacity: .5;
}
.wcas-filter-dropdown:disabled {
    cursor: not-allowed;
    opacity: .55;
    background-color: color-mix(in srgb, var(--wcas-card-bg) 92%, var(--wcas-text-muted));
}

/* Price dropdown — two inputs in a row */
.wcas-dropdown-price { max-width: 200px; }

.wcas-price-dropdown-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wcas-price-dropdown-input {
    width: 0;
    flex: 1;
    height: 34px;
    padding: 0 8px;
    border: 1.5px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
    background: var(--wcas-card-bg);
    color: var(--wcas-text);
    font-family: inherit;
    font-size: 13px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: border-color var(--wcas-transition);
}

.wcas-price-dropdown-input::-webkit-inner-spin-button,
.wcas-price-dropdown-input::-webkit-outer-spin-button { display: none; }

.wcas-price-dropdown-input:focus {
    outline: none;
    border-color: var(--wcas-primary);
}

.wcas-price-dropdown-sep {
    flex-shrink: 0;
    color: var(--wcas-text-muted);
    font-size: 13px;
}

/* Clear-all button — secondary outline style matching the plugin's
   global button look (.wcas-select-options-btn). Plugin CSS vars drive
   colour/radius/font so it follows the Design tab settings, and we don't
   use the bare `.button` class so themes like Divi can't override it. */
.wcas-dropdown-clear {
    height: 34px;
    align-self: flex-end;
    background: transparent;
    color: var(--wcas-primary);
    border: 1.5px solid var(--wcas-primary);
    border-radius: var(--wcas-radius-btn);
    font-family: inherit;
    font-size: var(--wcas-font-btn);
    font-weight: 600;
    padding: 0 14px;
    cursor: pointer;
    transition: background var(--wcas-transition), color var(--wcas-transition);
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.wcas-dropdown-clear:hover,
.wcas-dropdown-clear:focus-visible {
    background: var(--wcas-primary);
    color: var(--wcas-btn-text);
    outline: none;
}

/* Mobile / small-tablet: stack dropdowns full-width.
 *
 * The 768px breakpoint catches landscape phones and portrait small tablets
 * — the previous 640px breakpoint left a band (640–767px) where dropdowns
 * still wrapped to 2-per-row at ~50% width, which the user reported as
 * "right-aligned 50% width" on mobile.
 *
 * Selectors are scoped to .wcas-shop-wrapper to win specificity against
 * Divi's column rules (parent themes sometimes apply text-align/width to
 * the surrounding column). `min-width: 0` is needed to let flex children
 * actually shrink below their content's intrinsic size in some themes. */
@media (max-width: 768px) {
    .wcas-shop-wrapper .wcas-filter-dropdowns {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .wcas-shop-wrapper .wcas-dropdown-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }
    .wcas-shop-wrapper .wcas-dropdown-clear {
        width: 100%;
        justify-content: center;
    }
}

/* ─── Sidebar in dropdown-filter mode ─────────────────────────────────────────
   When list_filter_style = 'dropdowns' and layout is 'list', filters move to
   the dropdown bar above the table. The sidebar should only show the wishlist.
   .wcas-list-dropdowns is toggled by filters.js on the <aside class="wcas-sidebar">. */

.wcas-sidebar.wcas-list-dropdowns .wcas-cat-list,
.wcas-sidebar.wcas-list-dropdowns .wcas-cat-panel,
.wcas-sidebar.wcas-list-dropdowns .wcas-filter-panels,
.wcas-sidebar.wcas-list-dropdowns .wcas-filter-clear-wrap,
.wcas-sidebar.wcas-list-dropdowns .wcas-active-filters,
.wcas-sidebar.wcas-list-dropdowns .wcas-category-menu > .wcas-sidebar-heading:first-child {
    display: none !important;
}

/* Keep the wishlist section and its heading visible */
.wcas-sidebar.wcas-list-dropdowns .wcas-wishlist-section {
    display: block !important;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* When list-mode dropdown filters are active AND the wishlist is disabled,
   the sidebar has no remaining content (cats/filters hidden, wishlist off).
   Hide it entirely and reflow the grid so the main column reclaims the
   space. The .wcas-no-wishlist class is added by shop-wrapper.php from
   $settings['enable_wishlist']; .wcas-list-dropdowns is toggled by
   filters.js when the user (or the admin layout-mode setting) puts the
   shop into list+dropdowns mode. Switching back to grid removes
   .wcas-list-dropdowns and the sidebar reappears with its filter panels. */
.wcas-shop-wrapper.wcas-list-dropdowns.wcas-no-wishlist > .wcas-layout-columns > .wcas-sidebar {
    display: none;
}
.wcas-shop-wrapper.wcas-list-dropdowns.wcas-no-wishlist .wcas-layout-columns {
    grid-template-columns: 1fr var(--wcas-cart-width);
}
.wcas-shop-wrapper.wcas-list-dropdowns.wcas-no-wishlist.wcas-no-cart .wcas-layout-columns {
    grid-template-columns: 1fr;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOP-BAR LAYOUT MODE (layout_mode = 'topbar')
   ═══════════════════════════════════════════════════════════════════════════
   Moves filtering into the dropdown bar above the grid (rendered by filters.js,
   which also stamps .wcas-list-dropdowns on the wrapper/sidebar so the bar and
   its styling activate). Here we drop the filter sidebar entirely and let the
   product grid span the full width, keeping the cart panel where it is. The
   wishlist moves to its floating button/drawer on this layout. */
.wcas-shop-wrapper.wcas-layout-topbar > .wcas-layout-columns > .wcas-sidebar {
    display: none !important;
}
.wcas-shop-wrapper.wcas-layout-topbar > .wcas-layout-columns {
    grid-template-columns: 1fr var(--wcas-cart-width);
}
.wcas-shop-wrapper.wcas-layout-topbar.wcas-no-cart > .wcas-layout-columns {
    grid-template-columns: 1fr;
}

/* List-mode thumbnail when cardClickAction = quick_view — must look identical
   to the <a> thumbnail wrapper (block, no button chrome). */
.wcas-table-thumb-btn {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: var(--wcas-radius-card);
    overflow: hidden;
    background: var(--wcas-card-bg);
    border: none;
    padding: 0;
    cursor: pointer;
}

.wcas-table-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* List-mode name as button (cardClickAction = quick_view) */
.wcas-table-name.wcas-card-name-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 600;
    color: var(--wcas-text);
    cursor: pointer;
    text-align: left;
    display: block;
    width: 100%;
    transition: color var(--wcas-transition);
}

.wcas-table-name.wcas-card-name-btn:hover {
    color: var(--wcas-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUOTE MODE  (Phase D1)
   Applied when body has .wcas-quote-mode class.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Price elements — belt-and-braces hide for any price that slips through.
   The PHP filter woocommerce_get_price_html already returns '' in quote mode;
   these rules catch anything rendered before the filter had a chance to run. */
.wcas-quote-mode .wcas-card-price,
.wcas-quote-mode .wcas-cart-item-price,
.wcas-quote-mode .wcas-cart-subtotal,
.wcas-quote-mode .wcas-cart-total-row,
.wcas-quote-mode .wcas-wishlist-item-price,
.wcas-quote-mode .woocommerce-Price-amount,
.wcas-quote-mode .price,
.wcas-quote-mode .wcas-td-price {
    display: none !important;
}

/* ATC button — visually distinguish quote-mode button with accent colour */
.wcas-quote-mode .wcas-add-to-cart,
.wcas-quote-mode .wcas-add-to-cart-btn {
    background:    var(--wcas-accent, var(--wcas-primary)) !important;
    color:         #fff !important;
    border-color:  var(--wcas-accent, var(--wcas-primary)) !important;
}

.wcas-quote-mode .wcas-add-to-cart:hover,
.wcas-quote-mode .wcas-add-to-cart-btn:hover {
    filter: brightness(1.08);
}

/* Mini-cart — hide the subtotal/total rows since there are no prices */
.wcas-quote-mode .wcas-cart-subtotal-row,
.wcas-quote-mode .wcas-cart-coupon,
.wcas-quote-mode .wcas-cart-total-row {
    display: none !important;
}

/* Checkout page via WooCommerce — hide order total, coupon, payment section */
.wcas-quote-mode .woocommerce-shipping-totals.shipping,
.wcas-quote-mode th.product-total,
.wcas-quote-mode tr.order-total,
.wcas-quote-mode tr.cart-subtotal,
.wcas-quote-mode td.product-total,
.wcas-quote-mode .order_details tfoot,
.wcas-quote-mode .woocommerce-Price-amount,
.wcas-quote-mode .wc-block-components-totals-item.wc-block-components-totals-footer-item,
.wcas-quote-mode #payment,
.wcas-quote-mode .woocommerce-checkout #payment {
    display: none !important;
}

/* Make first-column take full width in the order review table since price cols are gone */
.wcas-quote-mode #order_review table.shop_table tr > *:first-child {
    width: 100% !important;
}

/* Quote-active notice in admin settings */
.wcas-quote-active-notice {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 12px;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: 4px;
    color: #065f46;
    font-size: 13px;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURED STORES  (v2.0.0)

   A featured store block reuses the product-card styles above verbatim — the
   only new geometry is the block frame (heading + controls), the slider track
   and the capped static grid.

   Column counts arrive as inline custom properties on the block element (see
   featured-store.php), so a block can differ from the main store's grid
   without a per-block stylesheet or any dynamic CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

.wcas-featured-store,
.wcas-featured-store *,
.wcas-featured-store *::before,
.wcas-featured-store *::after {
    box-sizing: border-box;
}

.wcas-featured-store {
    --wcas-fs-gap: 16px;
    display: block;
    margin: 0 0 32px;
    font-family: var(--wcas-font-family, inherit);
    font-size: var(--wcas-font-body, 14px);
    color: var(--wcas-text, #1e293b);
    position: relative;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */

.wcas-featured-store__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.wcas-featured-store__heading {
    margin: 0;
    font-size: calc(var(--wcas-font-heading, 18px) * 1.25);
    font-weight: var(--wcas-weight-heading, 600);
    color: var(--wcas-text, #1e293b);
    line-height: 1.25;
}

.wcas-featured-store__controls {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.wcas-featured-store__controls button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wcas-radius-btn, 8px);
    border: 1px solid var(--wcas-card-border, #e2e8f0);
    background: var(--wcas-card-bg, #fff);
    color: var(--wcas-text, #1e293b);
    cursor: pointer;
    padding: 0;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.wcas-featured-store__controls button:hover {
    background: var(--wcas-primary, #2563eb);
    border-color: var(--wcas-primary, #2563eb);
    color: var(--wcas-btn-text, #fff);
}

.wcas-featured-store__controls button:focus-visible {
    outline: 2px solid var(--wcas-primary, #2563eb);
    outline-offset: 2px;
}

/* A slider whose items all fit needs no controls or dots. */
.wcas-featured-store.wcas-fs-single-page .wcas-featured-store__controls,
.wcas-featured-store.wcas-fs-single-page .wcas-featured-store__dots {
    display: none;
}

/* ─── Static grid ─────────────────────────────────────────────────────────── */

.wcas-fs-layout-static .wcas-featured-store__track {
    display: grid;
    gap: var(--wcas-fs-gap);
    grid-template-columns: repeat(var(--wcas-fs-cols-desktop, 4), minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .wcas-fs-layout-static .wcas-featured-store__track {
        grid-template-columns: repeat(var(--wcas-fs-cols-tablet, 2), minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .wcas-fs-layout-static .wcas-featured-store__track {
        grid-template-columns: repeat(var(--wcas-fs-cols-mobile, 1), minmax(0, 1fr));
    }
}

@media (min-width: 1600px) {
    .wcas-fs-layout-static .wcas-featured-store__track {
        grid-template-columns: repeat(var(--wcas-fs-cols-wide, 4), minmax(0, 1fr));
    }
}

@media (min-width: 2400px) {
    .wcas-fs-layout-static .wcas-featured-store__track {
        grid-template-columns: repeat(var(--wcas-fs-cols-ultrawide, 5), minmax(0, 1fr));
    }
}

/* ─── Slider ──────────────────────────────────────────────────────────────── */
/*
   Native horizontal scrolling with snap points: touch, trackpad, shift-wheel
   and keyboard all work without a library, and the block still scrolls if the
   JS never runs.
*/

.wcas-fs-layout-slider .wcas-featured-store__track {
    display: flex;
    gap: var(--wcas-fs-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* legacy Edge */
    padding-bottom: 4px;
}

.wcas-fs-layout-slider .wcas-featured-store__track::-webkit-scrollbar {
    display: none;
}

.wcas-fs-layout-slider .wcas-featured-store__track > * {
    flex: 0 0 calc(
        (100% - (var(--wcas-fs-slider-desktop, 4) - 1) * var(--wcas-fs-gap))
        / var(--wcas-fs-slider-desktop, 4)
    );
    scroll-snap-align: start;
    min-width: 0;
}

@media (max-width: 1024px) {
    .wcas-fs-layout-slider .wcas-featured-store__track > * {
        flex-basis: calc(
            (100% - (var(--wcas-fs-slider-tablet, 2) - 1) * var(--wcas-fs-gap))
            / var(--wcas-fs-slider-tablet, 2)
        );
    }
}

@media (max-width: 640px) {
    .wcas-fs-layout-slider .wcas-featured-store__track > * {
        flex-basis: calc(
            (100% - (var(--wcas-fs-slider-mobile, 1) - 1) * var(--wcas-fs-gap))
            / var(--wcas-fs-slider-mobile, 1)
        );
    }
}

@media (min-width: 1600px) {
    .wcas-fs-layout-slider .wcas-featured-store__track > * {
        flex-basis: calc(
            (100% - (var(--wcas-fs-slider-wide, 4) - 1) * var(--wcas-fs-gap))
            / var(--wcas-fs-slider-wide, 4)
        );
    }
}

@media (min-width: 2400px) {
    .wcas-fs-layout-slider .wcas-featured-store__track > * {
        flex-basis: calc(
            (100% - (var(--wcas-fs-slider-ultrawide, 5) - 1) * var(--wcas-fs-gap))
            / var(--wcas-fs-slider-ultrawide, 5)
        );
    }
}

/*
   Equal card heights in a slider.

   A card carries `height: 100%` so it fills its grid cell in the main store's
   grid (see the equal-height block further up). In the slider the track is a
   flex row whose height is auto, so `height: 100%` resolves against an
   indefinite parent — and, crucially, a definite cross-size opts the card OUT
   of `align-items: stretch`. Each card fell back to its own content height and
   a row of cards came out ragged.

   Restoring `auto` lets stretch do its job, and the row levels out exactly as
   it does in the grid.
*/
.wcas-fs-layout-slider .wcas-featured-store__track > .wcas-product-card {
    height: auto;
    align-self: stretch;
}

@media (prefers-reduced-motion: reduce) {
    .wcas-fs-layout-slider .wcas-featured-store__track { scroll-behavior: auto; }
}

/* ── [hidden] must actually hide ──────────────────────────────────────────── */
/*
   `[hidden] { display: none }` comes from the browser's own stylesheet, and
   ANY author `display` declaration beats it. This sheet had learned that the
   hard way four times already — .wcas-modal-overlay[hidden],
   .wcas-compare-bar[hidden], .wcas-scroll-top-btn[hidden] and
   .wcas-compare-modal-overlay[hidden] all exist to patch one instance each.

   Two were still unpatched:
     • .wcas-cart-empty is display:flex, so "Your cart is empty." rendered
       above the item list even on a full cart — cart.js toggles its .hidden
       on every render and nothing ever came of it.
     • Featured store cards past the static row cap, which .wcas-product-card's
       own display would have kept visible.

   One scoped rule covers both and every future case, without touching
   elements outside the plugin.
*/
.wcas-shop-wrapper [hidden],
.wcas-featured-store [hidden],
.wcas-cart-panel [hidden],
.wcas-page-chrome [hidden],
.wcas-cart-standalone-host [hidden] {
    display: none !important;
}

/* ─── Dots ────────────────────────────────────────────────────────────────── */

.wcas-featured-store__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

/*
   Colours and size come from per-block overrides when set (Appearance tab),
   falling back to the block's inherited card-border / primary tokens.
*/
.wcas-fs-dot {
    width: var(--wcas-fs-dot-size, 8px);
    height: var(--wcas-fs-dot-size, 8px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--wcas-fs-dot, var(--wcas-card-border, #e2e8f0));
    cursor: pointer;
    transition: background .15s ease, width .15s ease;
}

.wcas-fs-dot.is-active {
    background: var(--wcas-fs-dot-active, var(--wcas-primary, #2563eb));
    /* The active dot stretches into a pill, scaled from whatever size is set. */
    width: calc(var(--wcas-fs-dot-size, 8px) * 2.5);
    border-radius: 99px;
}

.wcas-fs-dot:focus-visible {
    outline: 2px solid var(--wcas-primary, #2563eb);
    outline-offset: 2px;
}

/* ─── View all ────────────────────────────────────────────────────────────── */

.wcas-featured-store__footer {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.wcas-fs-view-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--wcas-font-btn, 13px);
    font-weight: 600;
    text-decoration: none;
    color: var(--wcas-primary, #2563eb);
    border: 1px solid var(--wcas-primary, #2563eb);
    border-radius: var(--wcas-radius-btn, 8px);
    padding: 8px 18px;
    transition: background .15s ease, color .15s ease;
}

.wcas-fs-view-all:hover {
    background: var(--wcas-primary, #2563eb);
    color: var(--wcas-btn-text, #fff);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STANDALONE SIDE CART  —  [wc_advanced_cart]
   ═══════════════════════════════════════════════════════════════════════════ */

/*
   [wc_advanced_cart] no longer renders an inline pill — it contributes the
   floating button above instead. The `.wcas-cart-trigger` class is still an
   opener as far as cart.js is concerned, so you can put it on a button of your
   own (a Divi button module, say) and it will open the cart; styling one of
   those is then yours to do, which is why the plugin no longer ships opinions
   about how it looks.
*/

/*
   The standalone drawer is a drawer at every viewport width, whatever
   `cart_position` says — that setting describes the main store's layout, and
   this cart has no layout to sit in. The geometry mirrors the ≤1200px rules
   above; !important matches the house pattern for beating theme chrome
   (Divi's fixed headers in particular).
*/

.wcas-cart-standalone-host { display: contents; }

.wcas-cart-panel.wcas-cart-standalone:not(.is-open) {
    display: none !important;
}

.wcas-cart-panel.wcas-cart-standalone.is-open {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(var(--wcas-cart-width, 300px), 90vw) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    box-shadow: -4px 0 24px rgba(0,0,0,.2) !important;
    z-index: 2147483647 !important;
    background: var(--wcas-surface, #f8fafc) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    margin: 0 !important;
}

/* The drawer's own close control. The panel is portaled to document.body when
   open, so only very generic theme rules (a bare `button { }`) can reach it —
   every box property is therefore stated outright rather than inherited. */
.wcas-cart-standalone-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--wcas-text-muted, #64748b);
    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.wcas-cart-standalone-close:hover {
    background: var(--wcas-card-border, #e2e8f0);
    color: var(--wcas-text, #1e293b);
}

.wcas-cart-standalone-close:focus-visible {
    outline: 2px solid var(--wcas-primary);
    outline-offset: 2px;
}

/* Keep the close control clear of the mini-cart's title and count badge. */
.wcas-cart-standalone .wcas-cart-header {
    padding-right: 52px;
}

/* The chrome host itself is layout-neutral; its children position themselves. */
.wcas-page-chrome { display: contents; }

/* ─── Notify me (back in stock) inline capture ───────────────────────────────
   Replaces the bell in the card footer. Scoped with :has() so the footer only
   starts wrapping while the form is open — the normal price/button row keeps
   its single-line layout. */

.wcas-card-footer:has(.wcas-notify-form) {
    flex-wrap: wrap;
    row-gap: 8px;
}

.wcas-notify-form {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.wcas-notify-email {
    flex: 1 1 120px;
    min-width: 0;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
    color: var(--wcas-text);
    background: var(--wcas-bg, #fff);
    border: 1px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-btn);
}

.wcas-notify-email:focus {
    outline: 2px solid var(--wcas-primary);
    outline-offset: -1px;
}

.wcas-notify-submit {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--wcas-btn-text);
    background: var(--wcas-primary);
    border: 0;
    border-radius: var(--wcas-radius-btn);
    cursor: pointer;
    line-height: 1.4;
}

.wcas-notify-submit:hover:not(:disabled) { background: var(--wcas-primary-hover); }
.wcas-notify-submit:disabled { opacity: .7; cursor: default; }

.wcas-notify-cancel {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wcas-text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.wcas-notify-cancel:hover { color: var(--wcas-text); }

.wcas-notify-msg {
    flex: 1 1 100%;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--wcas-text-muted);
}

.wcas-notify-msg.is-error { color: #dc2626; }

.wcas-notify-form.is-done .wcas-notify-msg { color: var(--wcas-text); }

/* Shake the field on an obviously malformed address. */
.wcas-notify-form.is-invalid .wcas-notify-email {
    border-color: #dc2626;
    animation: wcas-notify-shake .3s ease;
}

@keyframes wcas-notify-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .wcas-notify-form.is-invalid .wcas-notify-email { animation: none; }
}

/* ─── Brand tiles (featured store, "Brands" source) ──────────────────────────
   Tiles sit in the same track as product cards, so the slider and static-grid
   geometry above applies unchanged — only the tile itself is new. */

/*
   A brand tile is a picture with a caption, not a card with a thumbnail in it.
   The logo takes the full width of the tile and a fixed slice of its height;
   the name fills whatever is left, sitting directly on the card background
   (which is customisable per featured store), so the strip reads as a label
   rather than as another box.

   `--wcas-fs-brand-ratio` decides how much of the tile the image gets. The
   caption is a fixed ~38px strip, so at the default 3/2 the image works out to
   roughly 83% of the tile on a narrow column and 88% on a wide one — "the top
   ~80% of the card" either way. Measured: a 290px tile gives 193px of image,
   a 442px tile gives 293px.

   Override it in Custom CSS per store:

     .wcas-featured-store--my-brands { --wcas-fs-brand-ratio: 16 / 9; }
*/
.wcas-brand-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    /* Clip the media to the card's rounded corners. */
    overflow: hidden;
    min-width: 0;
    text-decoration: none;
    color: var(--wcas-text);
    background: var(--wcas-card-bg);
    border: 1px solid var(--wcas-card-border);
    border-radius: var(--wcas-radius-card);
    box-shadow: var(--wcas-card-shadow);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.wcas-brand-tile:hover {
    box-shadow: var(--wcas-card-shadow-hover);
    border-color: var(--wcas-primary);
    transform: translateY(-2px);
}

.wcas-brand-tile:focus-visible {
    outline: 2px solid var(--wcas-primary);
    outline-offset: 2px;
}

/* The tile whose brand is currently filtering the store. */
.wcas-brand-tile.is-active {
    border-color: var(--wcas-primary);
    box-shadow: 0 0 0 2px var(--wcas-primary) inset;
}

.wcas-brand-tile__media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
    /* A fixed box keeps a row of tiles optically aligned even though brand
       artwork arrives at wildly different aspect ratios. */
    aspect-ratio: var(--wcas-fs-brand-ratio, 3 / 2);
    /* No inset: the artwork runs to the edges of the tile (v2.2.1). */
    padding: 0;
    overflow: hidden;
}

/*
   `cover`, not `contain`: real brand artwork is mostly portrait marketing
   graphics and product shots, and `contain` left them floating in a band of
   card background with white down both sides. Filling the box means the box
   crops — which is the trade this makes deliberately.

   A brand whose artwork is a bare logo that must not be cropped can opt out
   per store in Custom CSS, and the box's shape is a variable too:

       .wcas-featured-store--my-brands .wcas-brand-tile__media img { object-fit: contain; }
       .wcas-featured-store--my-brands { --wcas-fs-brand-ratio: 1 / 1; }
*/
.wcas-brand-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--wcas-fs-brand-fit, cover);
    object-position: center;
}

/* Brand with no image set: the name carries the tile instead of leaving a gap. */
.wcas-brand-tile__fallback {
    font-size: calc(var(--wcas-font-heading) * .9);
    font-weight: var(--wcas-weight-heading);
    color: var(--wcas-text-muted);
    text-align: center;
    line-height: 1.25;
    padding: 0 8px;
}

/*
   The caption strip. `flex: 1 1 auto` lets it absorb the leftover height, which
   is what keeps a row of tiles level when one brand's name wraps to two lines
   and its neighbours' don't. It sits on the card background with no fill of its
   own, so the per-store card colour carries it.
*/
.wcas-brand-tile__name {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 12px;
    font-size: var(--wcas-font-body);
    font-weight: var(--wcas-weight-heading);
    text-align: center;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* A tile that is only a name needs no second copy of it. */
.wcas-brand-tile--no-image .wcas-brand-tile__name { display: none; }

/*
   No caption: the image has the whole tile to itself. The aspect ratio stays
   as the box's base size rather than going `auto` — with `object-fit: cover`
   an auto-height box has nothing to fill, and the tile would collapse to the
   image's natural height instead.
*/
.wcas-fs-names-none .wcas-brand-tile__media {
    flex: 1 1 auto;
}

/* ─── Featured store pagination (v2.2.0) ──────────────────────────────────── */
/*
   The container carries `.wcas-pagination` as well as its own class, so the
   page buttons and the Load More button are already styled by the main store's
   rules above — that is the point of reusing initPagination() rather than
   writing a second set of controls. Only the block-level spacing and the
   "keep the current page visible while the next one loads" dim are new.
*/

.wcas-featured-store__pagination {
    padding: 20px 0 0;
}

.wcas-featured-store__track.wcas-grid-loading {
    opacity: .55;
    pointer-events: none;
    transition: opacity 160ms ease;
}