/* ==========================================================================
   Product Card — Batterioutlet
   Rebuilt WooCommerce product list-view card (grid + list views).
   BEM prefix `bo-card-` / `bo-card__`. Prefixed to avoid conflicts with
   Astra parent theme and WooCommerce default `.product` styles.

   Design tokens come from the global :root (see assets/header.css). Green,
   red and radius are NOT in the global :root, so they are declared locally
   on `.bo-card` below.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   LOCAL TOKENS
   Declared on the card so every element can reference them. The accent /
   text / bg / border tokens fall back to the global :root values but are
   restated here as fallbacks in case the card is used in isolation.
   --------------------------------------------------------------------------- */
.bo-card {
    --bo-green: #17a34a;   /* in-stock / added-to-cart success */
    --bo-red: #dc2626;     /* out-of-stock / saved wishlist */
    --bo-radius: 10px;     /* card corner radius */
    --bo-radius-chip: 8px; /* chips / inputs / stepper */
    --bo-pill: 30px;       /* buttons & sale pill */

    /* Local fallbacks mirroring the global :root */
    --bo-c-accent: var(--bo-accent, #F0C100);
    --bo-c-accent-dark: var(--bo-accent-dark, #B39002);
    --bo-c-text: var(--bo-text, #24262B);
    --bo-c-muted: var(--bo-text-muted, #666);
    --bo-c-bg: var(--bo-bg, #fff);
    --bo-c-bg-2: var(--bo-bg-secondary, #FAFAFA);
    --bo-c-border: var(--bo-border, #eee);
}

/* Predictable box model so paddings never shrink widths (e.g. the media
   background not reaching the card edges). */
.bo-card,
.bo-card * {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   GRID WRAPPER
   `.bo-cards` wraps WooCommerce's `ul.products`. We OWN the columns here (an
   explicit CSS grid) instead of relying on Astra — Astra's per-`li` column
   width fights our `width:100%` and collapses category archives to one giant
   card per row. Grid also makes every card in a row equal height, so the
   price/actions line up even when only some cards have attribute chips.
   --------------------------------------------------------------------------- */
.bo-cards {
    font-family: var(--bo-c-font, var(--bo-font, "Cabinet Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif));
}

.bo-cards ul.products {
    margin: 0;
    padding: 0;
}

/* Grid view — responsive auto-fill columns, equal-height cards.
   `!important` on display because Astra/WC set `display:grid` on ul.products and
   we must own the layout in both views (otherwise list view stays a grid). */
.bo-cards[data-view="grid"] ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* WooCommerce puts clearfix ::before/::after on `ul.products.columns-N`. In a
   CSS grid those pseudo-elements become grid items and leave an empty first
   cell (the gap at the start of row 1). Remove them. */
.bo-cards[data-view="grid"] ul.products::before,
.bo-cards[data-view="grid"] ul.products::after {
    content: none;
    display: none;
}

/* List view — plain vertical stack of full-width rows. `!important` overrides
   Astra/WC `display:grid` on ul.products (which was keeping list view a 2-col
   grid on mobile). */
.bo-cards[data-view="list"] ul.products {
    display: block !important;
    grid-template-columns: none !important;
}

/* ---------------------------------------------------------------------------
   VIEW TOGGLE (grid / list) — sits in the archive toolbar
   --------------------------------------------------------------------------- */
.bo-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--bo-bg-secondary, #FAFAFA);
    border: 1px solid var(--bo-border, #eee);
    border-radius: var(--bo-radius-chip, 8px);
}

.bo-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: #999;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    /* Parent theme resets */
    font-family: inherit;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.bo-view-toggle__btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.bo-view-toggle__btn:hover {
    color: var(--bo-text, #24262B);
    box-shadow: none;
}

.bo-view-toggle__btn.is-active {
    background: #fff;
    color: var(--bo-text, #24262B);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   CARD BASE — GRID VIEW (default)
   Flat vertical card. Override Astra/WC `ul.products li.product` defaults
   (center text, borders, padding, float widths) so the card owns its layout.
   ========================================================================== */
/* Container visuals apply wherever the card renders — the .bo-cards grid/list
   (category, shop, wishlist) AND the home popular-products / related rows that
   sit under `.woocommerce` without a `.bo-cards` wrapper. `padding:0` is what
   lets the media gray reach the card edges (Astra pads the li otherwise).
   Column WIDTH is intentionally NOT set here: our grid owns it below; the home
   row keeps Astra's column width. */
.bo-cards ul.products li.product.bo-card,
.woocommerce ul.products li.product.bo-card {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    background: var(--bo-c-bg, #fff);
    border: 1px solid var(--bo-c-border, #eee);
    border-radius: var(--bo-radius, 10px);
    overflow: hidden;
    text-align: left;            /* Astra centers product li text */
    box-shadow: none;            /* flat at rest, lifts on hover */
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    list-style: none;
}

.bo-cards[data-view="grid"] ul.products li.product.bo-card {
    width: 100%;                 /* fill the grid track */
    margin: 0;                   /* grid `gap` handles spacing */
}

.bo-cards ul.products li.product.bo-card::before,
.bo-cards ul.products li.product.bo-card::after,
.woocommerce ul.products li.product.bo-card::before,
.woocommerce ul.products li.product.bo-card::after {
    content: none;
}

.bo-cards ul.products li.product.bo-card:hover,
.woocommerce ul.products li.product.bo-card:hover {
    border-color: #e2e2e2;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
}

/* WooCommerce injects its own <a>, title, price, button markup inside the li.
   Our BEM elements below fully restyle those, but reset the default WC title /
   price / button so nothing leaks through. */
.bo-card a {
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   ASTRA / WOOCOMMERCE OVERRIDE GUARD
   Astra + WC core style the loop with descendant selectors like
   `.woocommerce ul.products li.product .price` (0,4,2), `... .onsale` (0,4,2)
   and `... img` (0,3,3) that outrank our single-class BEM rules. Re-assert the
   properties they fight, scoped under the card container (0,6,2) so we win the
   cascade without scattering !important. (Responsive price size is re-asserted
   at the same specificity inside the mobile block below.)
   --------------------------------------------------------------------------- */

/* WC core adds `margin: 0 0 1em` + float to loop images — neutralise it. */
.bo-cards ul.products li.product.bo-card .bo-card__media img,
.woocommerce ul.products li.product.bo-card .bo-card__media img {
    margin: 0;
    width: 100%;
    height: 100%;
    float: none;
}

/* Price: Astra colours/sizes `.price`; keep our accent-dark bold value. */
.bo-cards ul.products li.product.bo-card .bo-card__price,
.bo-cards ul.products li.product.bo-card .bo-card__price .price,
.bo-cards ul.products li.product.bo-card .bo-card__price .woocommerce-Price-amount,
.woocommerce ul.products li.product.bo-card .bo-card__price,
.woocommerce ul.products li.product.bo-card .bo-card__price .price,
.woocommerce ul.products li.product.bo-card .bo-card__price .woocommerce-Price-amount {
    margin: 0;
    float: none;
    color: var(--bo-c-accent-dark, #B39002);
    font-size: 1.2rem;
    font-weight: 800;
}

.bo-cards ul.products li.product.bo-card .bo-card__price del,
.bo-cards ul.products li.product.bo-card .bo-card__price del .woocommerce-Price-amount,
.woocommerce ul.products li.product.bo-card .bo-card__price del,
.woocommerce ul.products li.product.bo-card .bo-card__price del .woocommerce-Price-amount {
    font-size: 0.82rem;
    font-weight: 500;
    color: #9aa0a6;
}

/* Sale flag: Astra positions `.onsale` absolutely on the li — keep it static
   inside our flags stack. */
.bo-cards ul.products li.product.bo-card .bo-card__flags .onsale,
.woocommerce ul.products li.product.bo-card .bo-card__flags .onsale {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    margin: 0;
}

/* Title + link colour: Astra colours `li.product a`. */
.bo-cards ul.products li.product.bo-card .bo-card__title,
.bo-cards ul.products li.product.bo-card .bo-card__title a,
.woocommerce ul.products li.product.bo-card .bo-card__title,
.woocommerce ul.products li.product.bo-card .bo-card__title a {
    color: var(--bo-c-text, #24262B);
}

/* ---------------------------------------------------------------------------
   MEDIA — image area with flags + wishlist
   --------------------------------------------------------------------------- */
.bo-card__media {
    position: relative;
    width: 100%;                 /* gray frame spans the full card width */
    background: var(--bo-c-bg-2, #FAFAFA);
}

.bo-card__img-link {
    display: block;
    /* Fixed-ratio image box using padding — keeps rows aligned */
    padding: 16px;
    aspect-ratio: 1 / 1;
    overflow: hidden;            /* clip the hover zoom */
}

.bo-card__img-link img,
.bo-card__media img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    /* Kill WC/Astra default image spacing */
    display: block;
    box-shadow: none;
    transition: transform 0.3s ease;
}

/* Subtle image zoom on hover — only on true hover devices */
@media (hover: hover) {
    .bo-cards ul.products li.product.bo-card:hover .bo-card__img-link img,
    .woocommerce ul.products li.product.bo-card:hover .bo-card__img-link img {
        transform: scale(1.04);
    }
}

/* Respect reduced-motion: no lift, no zoom */
@media (prefers-reduced-motion: reduce) {
    .bo-cards ul.products li.product.bo-card,
    .bo-cards ul.products li.product.bo-card:hover .bo-card__img-link img,
    .woocommerce ul.products li.product.bo-card,
    .woocommerce ul.products li.product.bo-card:hover .bo-card__img-link img {
        transition: none;
        transform: none;
    }
}

/* ----- Flags (sale % + badge), stacked top-left ----- */
.bo-card__flags {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}

/* WooCommerce sale flash — restyle as a yellow pill */
.bo-card__flags .onsale {
    position: static;
    display: inline-block;
    margin: 0;
    padding: 3px 10px;
    min-height: 0;
    min-width: 0;
    line-height: 1.3;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--bo-c-text, #24262B);
    background: var(--bo-c-accent, #F0C100);
    border: none;
    border-radius: var(--bo-pill, 30px);
    box-shadow: none;
}

/* ----- Badges (per-type) ----- */
.bo-card__badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.3;
    border-radius: var(--bo-pill, 30px);
    color: #fff;
    background: var(--bo-c-text, #24262B);
}

/* Bestseller — dark chip with accent text */
.bo-card__badge--bestseller {
    background: var(--bo-c-text, #24262B);
    color: var(--bo-c-accent, #F0C100);
}

/* Nyhet (new) — green */
.bo-card__badge--nyhet {
    background: var(--bo-green, #17a34a);
    color: #fff;
}

/* Kampanj (campaign) — red */
.bo-card__badge--kampanj {
    background: var(--bo-red, #dc2626);
    color: #fff;
}

/* Rekommenderas (recommended) — accent */
.bo-card__badge--rekommenderas {
    background: var(--bo-c-accent, #F0C100);
    color: var(--bo-c-text, #24262B);
}

/* Begränsat (limited) — muted */
.bo-card__badge--begransat {
    background: #6b7280;
    color: #fff;
}

/* Custom / fallback — dark */
.bo-card__badge--custom {
    background: var(--bo-c-text, #24262B);
    color: #fff;
}

/* ----- Wishlist button (round, top-right) ----- */
.bo-card__wish {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--bo-c-border, #eee);
    border-radius: 50%;
    color: var(--bo-c-muted, #666);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
    /* Parent theme resets */
    font-family: inherit;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.bo-card__wish:hover {
    color: var(--bo-red, #dc2626);
    border-color: #f4b4b4;
    background: #fff;
    box-shadow: none;
}

.bo-card__wish-icon {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: fill 0.15s, stroke 0.15s;
}

/* Saved state — filled red heart */
.bo-card__wish.is-saved {
    color: var(--bo-red, #dc2626);
    border-color: #f4b4b4;
}

.bo-card__wish.is-saved .bo-card__wish-icon {
    fill: var(--bo-red, #dc2626);
    stroke: var(--bo-red, #dc2626);
}

/* ---------------------------------------------------------------------------
   BODY
   --------------------------------------------------------------------------- */
.bo-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;                     /* fill remaining height so actions align */
    padding: 14px 16px 16px;
    gap: 8px;
}

/* The body splits into two zones: identity (.bo-card__info) and commerce
   (.bo-card__purchase). Grid view stacks them — info at the top, purchase
   pinned to the bottom; list view (further down) sits them side by side. */
.bo-card__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.bo-card__purchase {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;            /* push the commerce zone to the card bottom */
}

/* Category — small uppercase muted link */
.bo-card__cat {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--bo-c-accent-dark, #B39002);
    transition: color 0.15s;
    /* Truncate long category names so they can't push the SKU off the row */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-card__cat:hover {
    color: var(--bo-c-text, #24262B);
}

/* Title — 2-line clamp */
.bo-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bo-c-text, #24262B);
}

.bo-card__title,
.bo-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: inherit;
    transition: color 0.15s;
}

.bo-card__title a:hover {
    color: var(--bo-c-accent-dark, #B39002);
}

/* ----- Eyebrow: category (left) + SKU (right) on one row above the title ----- */
.bo-card__eyebrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.bo-card__sku {
    font-size: 0.72rem;
    color: var(--bo-c-muted, #666);
    margin-left: auto;           /* keep SKU right even if the category is absent */
    white-space: nowrap;
    flex-shrink: 0;
}

/* ----- Chips (attributes / tags) — always a single row, scroll if overflowing ----- */
.bo-card__chips {
    display: flex;
    flex-wrap: nowrap;           /* keep to one row */
    gap: 5px;
    overflow-x: auto;            /* horizontal scroll when they don't fit */
    scrollbar-width: none;       /* Firefox: hide scrollbar */
    -ms-overflow-style: none;    /* IE / old Edge */
    padding-bottom: 1px;         /* don't clip chip borders */
}

.bo-card__chips::-webkit-scrollbar {
    display: none;               /* WebKit: hide scrollbar */
}

.bo-card__chip {
    display: inline-block;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bo-c-text, #24262B);
    background: var(--bo-c-bg-2, #FAFAFA);
    border: 1px solid var(--bo-c-border, #eee);
    border-radius: var(--bo-radius-chip, 8px);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   PRICE + STOCK ROW
   --------------------------------------------------------------------------- */
.bo-card__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-top: 4px;
}

/* Price — large bold accent. WC wraps price in <span class="price">;
   restyle the whole price node. */
.bo-card__price,
.bo-card__price .price,
.bo-card__price .woocommerce-Price-amount {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--bo-c-accent-dark, #B39002);
    line-height: 1.2;
}

.bo-card__price {
    color: var(--bo-c-accent-dark, #B39002);
}

/* Struck-through original price (WC <del>) — muted, smaller */
.bo-card__price del,
.bo-card__price del .woocommerce-Price-amount {
    font-size: 0.82rem;
    font-weight: 500;
    color: #9aa0a6;
}

.bo-card__price ins {
    text-decoration: none;
}

/* ----- Stock indicator ----- */
.bo-card__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.bo-card__stock-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.bo-card__stock.is-instock {
    color: var(--bo-green, #17a34a);
}

.bo-card__stock.is-instock .bo-card__stock-dot {
    background: var(--bo-green, #17a34a);
}

.bo-card__stock.is-outofstock {
    color: var(--bo-red, #dc2626);
}

.bo-card__stock.is-outofstock .bo-card__stock-dot {
    background: var(--bo-red, #dc2626);
}

/* ---------------------------------------------------------------------------
   DELIVERY — small muted line with room for a leading icon
   --------------------------------------------------------------------------- */
.bo-card__delivery {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--bo-c-muted, #666);
    line-height: 1.4;
}

.bo-card__delivery svg,
.bo-card__delivery img {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   ACTIONS — qty stepper (left) + buy button (right)
   Stepper mirrors assets/side-cart.css .bo-side-cart__qty.
   --------------------------------------------------------------------------- */
.bo-card__actions {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;            /* separate the buy zone from the value zone */
}

/* ----- Qty stepper ----- */
.bo-card__qty {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    border: 1px solid #ddd;
    border-radius: var(--bo-radius-chip, 8px);
    overflow: hidden;
}

.bo-card__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: 40px;
    align-self: stretch;
    padding: 0;
    background: none;
    border: none;
    font-size: 1.1rem;
    flex-grow: 1;
    line-height: 1;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
    /* Parent theme resets */
    font-family: inherit;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.bo-card__qty-btn:hover {
    background: #f5f5f5;
    box-shadow: none;
}

.bo-card__qty-btn:disabled {
    color: #ccc;
    cursor: default;
}

.bo-card__qty-val {
    width: 44px;
    min-height: 40px;
    align-self: stretch;
    padding: 0;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500 !important;
    color: var(--bo-c-text, #24262B);
    background: #fff;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-radius: 0;
    /* Kill number-input spinners */
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
}

.bo-card__qty-val::-webkit-outer-spin-button,
.bo-card__qty-val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bo-card__qty-val:focus {
    outline: none;
}

/* ----- Buy button (Köp) ----- */
.bo-card__buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 44px;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--bo-c-text, #24262B);
    background: var(--bo-c-accent, #F0C100);
    border: none;
    border-radius: var(--bo-pill, 30px);
    box-shadow: 0 2px 8px rgba(240, 193, 0, 0.3);
    cursor: pointer;
    transition: filter 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    /* Parent theme resets */
    font-family: inherit;
    line-height: 1.2;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    -webkit-appearance: none;
    appearance: none;
    white-space: nowrap;
}

/* Cart icon leading the Köp label. Inherits currentColor, so the
   .is-loading transparent-text state hides it automatically. */
.bo-card__buy-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.bo-card__buy:hover {
    filter: brightness(1.08);
    background: var(--bo-c-accent, #F0C100);
    color: var(--bo-c-text, #24262B);
    box-shadow: 0 3px 10px rgba(240, 193, 0, 0.38);
}

/* Loading state — dim, disabled, spinner */
.bo-card__buy.is-loading {
    color: transparent;
    pointer-events: none;
    filter: none;
    position: relative;
}

.bo-card__buy.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(36, 38, 43, 0.35);
    border-top-color: var(--bo-c-text, #24262B);
    border-radius: 50%;
    animation: bo-card-spin 0.6s linear infinite;
}

@keyframes bo-card-spin {
    to { transform: rotate(360deg); }
}

/* Added state — green with white text */
/* "Added" flash — on-brand dark (the green clashed with the yellow CTA). */
.bo-card__buy.is-added {
    background: var(--bo-c-text, #24262B);
    color: #fff;
    box-shadow: 0 2px 8px rgba(36, 38, 43, 0.25);
    filter: none;
}

.bo-card__buy.is-added:hover {
    background: var(--bo-c-text, #24262B);
    color: #fff;
    filter: brightness(1.15);
}

/* Belt-and-suspenders: hide WooCommerce's "Visa varukorg" link if it ever gets
   injected next to a card button (the JS also stops passing the button). */
.bo-card .added_to_cart,
.bo-cards .added_to_cart {
    display: none !important;
}

/* Variable/grouped products link to the product page instead of add-to-cart.
   Styled as a subtle outlined button so it reads as secondary. */
.bo-card__buy--select {
    background: #fff;
    color: var(--bo-c-text, #24262B);
    border: 1px solid #ddd;
    box-shadow: none;
}

.bo-card__buy--select:hover {
    background: var(--bo-c-bg-2, #FAFAFA);
    color: var(--bo-c-text, #24262B);
    border-color: #ccc;
    filter: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   BULK HINT — accent-tinted pill, hidden until JS reveals it
   --------------------------------------------------------------------------- */
.bo-card__bulk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 5px 12px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--bo-c-accent-dark, #B39002);
    background: var(--bo-c-bg-2, #FAFAFA);
    border: 1px solid var(--bo-c-border, #eee);
    border-radius: var(--bo-pill, 30px);
    line-height: 1.3;
}

/* Hidden by default via the [hidden] attribute; JS adds .is-visible */
.bo-card__bulk[hidden] {
    display: none;
}

.bo-card__bulk.is-visible {
    display: inline-flex;
}

/* ---------------------------------------------------------------------------
   COMPARE — small muted checkbox row
   --------------------------------------------------------------------------- */
.bo-card__compare {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    font-size: 0.76rem;
    color: var(--bo-c-muted, #666);
    cursor: pointer;
    user-select: none;
}

.bo-card__compare-cb {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--bo-c-accent, #F0C100);
    cursor: pointer;
}

.bo-card__compare:hover {
    color: var(--bo-c-text, #24262B);
}

/* ---------------------------------------------------------------------------
   FOCUS — visible keyboard focus ring on every interactive element
   --------------------------------------------------------------------------- */
.bo-card__buy:focus-visible,
.bo-card__wish:focus-visible,
.bo-card__qty-btn:focus-visible,
.bo-card__cat:focus-visible,
.bo-card__title a:focus-visible,
.bo-card__compare-cb:focus-visible,
.bo-view-toggle__btn:focus-visible {
    outline: 2px solid var(--bo-c-accent-dark, #B39002);
    outline-offset: 2px;
}

/* ==========================================================================
   LIST VIEW
   `.bo-cards[data-view="list"]` turns each card into a horizontal row:
   small image left, body in the middle, price + stepper + Köp on the right.
   ========================================================================== */
.bo-cards[data-view="list"] ul.products li.product.bo-card {
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: none;             /* override Astra column width */
    margin: 0 0 12px;
    float: none;
}

/* Media: fixed square thumbnail on the left, vertically centered — so a short
   image no longer stretches into a tall gray column. */
.bo-cards[data-view="list"] .bo-card__media {
    flex: 0 0 132px;
    width: 132px;
    align-self: center;
    aspect-ratio: 1 / 1;
}

.bo-cards[data-view="list"] .bo-card__img-link {
    width: 100%;
    height: 100%;
    padding: 14px;
}

/* Body: one row — identity (info) grows on the left, commerce (purchase) is a
   compact right-aligned column, both vertically centered. This keeps the row
   short instead of wrapping each commerce element onto its own line. */
.bo-cards[data-view="list"] .bo-card__body {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
    padding: 16px 20px;
}

.bo-cards[data-view="list"] .bo-card__info {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
}

.bo-cards[data-view="list"] .bo-card__title {
    font-size: 1rem;
}

.bo-cards[data-view="list"] .bo-card__chips {
    margin-top: 2px;
}

/* Commerce column pinned right, compact and right-aligned. */
.bo-cards[data-view="list"] .bo-card__purchase {
    flex: 0 0 auto;
    margin-top: 0;
    align-items: flex-end;
    text-align: right;
    gap: 6px;
    min-width: 180px;
}

.bo-cards[data-view="list"] .bo-card__price-row {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding-top: 0;
    text-align: right;
}

.bo-cards[data-view="list"] .bo-card__delivery {
    justify-content: flex-end;
}

.bo-cards[data-view="list"] .bo-card__actions {
    margin-top: 4px;
    justify-content: flex-end;
}

.bo-cards[data-view="list"] .bo-card__compare {
    justify-content: flex-end;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ----- Tablet & down: tighten the list-view rhythm ----- */
@media (max-width: 1024px) {
    .bo-cards[data-view="list"] .bo-card__body {
        gap: 6px 12px;
        padding: 12px 14px;
    }
}

/* ----- Mobile (max 767px) -----
   We own the grid: force a tight 2-up layout with a 12px gap (the gap owns the
   inter-card spacing now — no card margins). The grid card just needs smaller
   paddings & type. List view stays a readable row. */
@media (max-width: 767px) {

    /* --- 2-up grid, tighter gap --- */
    .bo-cards[data-view="grid"] ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .bo-card__body {
        padding: 12px 12px 14px;
        gap: 7px;
    }

    .bo-card__img-link {
        padding: 12px;
    }

    /* Re-assert the mobile price size at guard specificity so it beats both
       Astra and our own desktop override guard above. */
    .bo-cards ul.products li.product.bo-card .bo-card__price,
    .bo-cards ul.products li.product.bo-card .bo-card__price .price,
    .bo-cards ul.products li.product.bo-card .bo-card__price .woocommerce-Price-amount,
    .woocommerce ul.products li.product.bo-card .bo-card__price,
    .woocommerce ul.products li.product.bo-card .bo-card__price .price,
    .woocommerce ul.products li.product.bo-card .bo-card__price .woocommerce-Price-amount {
        font-size: 1.05rem;
    }

    .bo-card__title {
        font-size: 0.88rem;
    }

    /* Category + SKU stack on separate rows on mobile */
    .bo-card__eyebrow {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .bo-card__sku {
        margin-left: 0;
    }

    /* Actions stack on the narrow 2-up column: full-width qty row above the
       full-width Köp button (which keeps its 44px min-height from the base). */
    .bo-cards[data-view="grid"] .bo-card__actions {
        flex-wrap: wrap;
    }

    /* Full-width stepper: the −/+ buttons expand to fill (their hover bg then
       covers the whole button) with no gaps around the centered input. */
    .bo-cards[data-view="grid"] .bo-card__qty {
        flex: 1 1 auto;
    }

    .bo-cards[data-view="grid"] .bo-card__qty-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .bo-cards[data-view="grid"] .bo-card__buy {
        flex-basis: 100%;
    }

    /* Bulk hint is noise on the tight 2-up grid — hide it */
    .bo-cards[data-view="grid"] .bo-card__bulk.is-visible {
        display: none;
    }

    /* --- List view: image left, content stacked, smaller --- */
    .bo-cards[data-view="list"] .bo-card__media {
        flex-basis: 96px;
        width: 96px;
    }

    .bo-cards[data-view="list"] .bo-card__body {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    .bo-cards[data-view="list"] .bo-card__purchase {
        min-width: 0;
        align-items: stretch;
        text-align: left;
    }

    .bo-cards[data-view="list"] .bo-card__price-row {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
    }

    .bo-cards[data-view="list"] .bo-card__delivery,
    .bo-cards[data-view="list"] .bo-card__actions,
    .bo-cards[data-view="list"] .bo-card__compare {
        justify-content: flex-start;
    }
}

/* ----- Small phones (max 480px) -----
   Let the actions wrap so the Köp button can drop below the stepper. */
@media (max-width: 480px) {
    .bo-card__actions {
        flex-wrap: wrap;
    }

    .bo-card__qty {
        flex: 1 1 auto;
        justify-content: space-between;
    }

    .bo-card__buy {
        flex-basis: 100%;
    }

    /* List view stays a compact row (small image left) even on the smallest
       phones — stacking it full-width made it look like the grid, not a list. */
    .bo-cards[data-view="list"] .bo-card__media {
        flex-basis: 84px;
        width: 84px;
    }

    .bo-cards[data-view="list"] .bo-card__img-link {
        padding: 10px;
    }
}