/**
 * BW Product Loop Card — the Accessories grid card.
 *
 * Scoped under .elementor-widget-bw-woo-card so the rules outrank both the
 * Elementor global kit and WooCommerce's own loop styles, which are specific
 * (.woocommerce a.button) and would otherwise win against a single class.
 *
 * Selector weights are kept at parity with the CSS Elementor generates from
 * the widget controls, so controls win on source order rather than being
 * locked out by a heavier default.
 */

.elementor-widget-bw-woo-card {
    --bw-blue: #005eb8;
    --bw-blue-dk: #00427f;
    --bw-orange: #f28120;
    --bw-ink: #101720;
    --bw-body: #5b6570;
    --bw-mute: #8a95a1;
    --bw-line: #e2e6ea;
    --bw-soft: #f7f9fb;
}

.elementor-widget-bw-woo-card * {
    box-sizing: border-box;
}

.elementor-widget-bw-woo-card .bw-wc {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--bw-line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.elementor-widget-bw-woo-card .bw-wc:hover {
    border-color: #cfd8e3;
    box-shadow: 0 6px 18px rgba(16, 23, 32, .06);
}

/* ------------------------------------------------------------- media --- */
.elementor-widget-bw-woo-card .bw-wc-media {
    position: relative;   /* badge containing block */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 16px;
    background: radial-gradient(circle at 50% 42%, #fff, #eef2f6 78%);
    text-decoration: none;
}

/* ------------------------------------------------------------ badges --- *
 * The catalog number and the price can each overlay the image instead of
 * sitting in the body. Both share .bw-wc-badge for geometry so one set of
 * controls (radius, padding, inset) drives them together, while .bw-wc-cat
 * and .bw-wc-price keep their own colour and typography controls in either
 * position.                                                                *
 * Defaults are deliberately at single-class weight so the Elementor control
 * CSS, which lands at .elementor-element-N .bw-wc-badge, always outranks
 * them rather than being silently ignored.                                 */
.elementor-widget-bw-woo-card .bw-wc-badge {
    position: absolute;
    top: 10px;
    z-index: 2;
    max-width: calc(100% - 20px);
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* the image uses mix-blend-mode: multiply; without isolation the badge
       would blend into the product shot behind it */
    isolation: isolate;
    mix-blend-mode: normal;
}

.elementor-widget-bw-woo-card .bw-wc-badge.is-tl {
    left: 10px;
}

.elementor-widget-bw-woo-card .bw-wc-badge.is-tr {
    right: 10px;
}

.elementor-widget-bw-woo-card .bw-wc-price.is-badge {
    background: var(--bw-orange);
    color: #fff;
}

.elementor-widget-bw-woo-card .bw-wc-price.is-badge .amount,
.elementor-widget-bw-woo-card .bw-wc-price.is-badge bdi {
    color: inherit;
}

.elementor-widget-bw-woo-card .bw-wc-cat.is-badge {
    background: var(--bw-ink);
    color: #fff;
    letter-spacing: .8px;
    font-weight: 700;
}

/* Fit inside (default): the whole shot is visible, so a tall image
   letterboxes rather than being cropped. */
.elementor-widget-bw-woo-card .bw-wc-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    /* product shots are on white, so multiply drops the box seam */
    mix-blend-mode: multiply;
}

/* Fill: the image covers the whole frame. object-fit needs real width and
   height to work against, and the max-* caps above have to be lifted or the
   image can never grow past its natural size. Padding is removed too —
   otherwise the "fill" stops short of the edges. */
.elementor-widget-bw-woo-card .bw-wc-media.is-cover {
    padding: 0;
}

.elementor-widget-bw-woo-card .bw-wc-media.is-cover img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
}

/* The WooCommerce placeholder is a flat grey graphic, not a product shot on
   white — multiply would turn it muddy. */
.elementor-widget-bw-woo-card .bw-wc-media img.woocommerce-placeholder {
    mix-blend-mode: normal;
}

.elementor-widget-bw-woo-card .bw-wc-noimg {
    font: 700 9.5px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--bw-mute);
}

/* -------------------------------------------------------------- body --- */
.elementor-widget-bw-woo-card .bw-wc-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 4px;
    padding: 14px 16px 16px;
    min-width: 0;
}

.elementor-widget-bw-woo-card .bw-wc-cat {
    font: 400 11px/1.3 'Open Sans', Arial, sans-serif;
    letter-spacing: .6px;
    color: var(--bw-mute);
}

.elementor-widget-bw-woo-card .bw-wc-title {
    margin: 0;
    padding: 0;
    font: 700 13.5px/1.45 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
}

.elementor-widget-bw-woo-card .bw-wc-title a {
    color: inherit;
    text-decoration: none;
}

.elementor-widget-bw-woo-card .bw-wc-title a:hover {
    color: var(--bw-blue);
}

/* price and button share the last row, pinned to the bottom of the card so a
   grid of cards with different title lengths still lines its buttons up */
/* with the price moved to a badge there is nothing to sit opposite, so the
   button stretches instead of hugging one edge */
.elementor-widget-bw-woo-card .bw-wc-foot.is-cart-only {
    justify-content: stretch;
}

.elementor-widget-bw-woo-card .bw-wc-foot.is-cart-only .bw-wc-cart {
    flex: 1 1 auto;
}

.elementor-widget-bw-woo-card .bw-wc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    flex-wrap: wrap;
}

.elementor-widget-bw-woo-card .bw-wc-price {
    font: 800 15px/1.2 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
    letter-spacing: -.01em;
}

/* get_price_html() wraps the figure in Woo's .amount, which the theme may
   colour independently. Inheriting keeps the Price controls in charge of it.
   Kept at (0,3,0) — the same weight Elementor generates — so those controls
   still win on source order. */
.elementor-widget-bw-woo-card .bw-wc-price .amount,
.elementor-widget-bw-woo-card .bw-wc-price bdi {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.elementor-widget-bw-woo-card .bw-wc-price del {
    font-weight: 400;
    font-size: 12.5px;
    color: var(--bw-mute);
    margin-right: 5px;
}

.elementor-widget-bw-woo-card .bw-wc-price ins {
    text-decoration: none;
}

/* ------------------------------------------------------------ button --- */
/* WooCommerce ships .woocommerce a.button styles at (0,2,1); naming the
   anchor inside two of our own classes clears that comfortably. */
.elementor-widget-bw-woo-card .bw-wc-cart a,
.elementor-widget-bw-woo-card .bw-wc-cart .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 2px solid var(--bw-blue);
    border-radius: 999px;
    background-color: var(--bw-blue);
    color: #fff;
    font: 800 10.5px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.elementor-widget-bw-woo-card .bw-wc-cart a:hover,
.elementor-widget-bw-woo-card .bw-wc-cart .button:hover {
    background-color: var(--bw-blue-dk);
    border-color: var(--bw-blue-dk);
    color: #fff;
}

/* Woo's "View cart" follow-up link and the loading state */
.elementor-widget-bw-woo-card .bw-wc-cart .added_to_cart {
    margin-left: 8px;
    background-color: transparent;
    border-color: var(--bw-line);
    color: var(--bw-body);
}

.elementor-widget-bw-woo-card .bw-wc-cart a.loading {
    opacity: .6;
}

.elementor-widget-bw-woo-card .bw-wc-cart a:focus-visible {
    outline: 2px solid var(--bw-orange);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .elementor-widget-bw-woo-card .bw-wc-media {
        height: 130px;
    }
    .elementor-widget-bw-woo-card .bw-wc-foot {
        gap: 8px;
    }
}