/* ==========================================================================
   AECS "Modern cart" — composite component + addon rendering inside the cart.
   Design-module feature, loaded ONLY on cart/checkout/order pages and gated by
   the `aecs_modern_cart` toggle (everything is scoped under body.aecs-modern-cart
   so it can't leak and the toggle is authoritative even with a cached file).

   Scope of this stylesheet: the per-PRODUCT rendering only — composite
   components shown as nested cards on the parent row, and addons as a tagged
   sub-row. The surrounding cart shell (column header, totals/summary box,
   shipping selector, checkout button) is rendered by the Elementor Pro Cart
   widget and is styled there, not here.

   Inherits the gemfire tokens from aecs-frontend.css when present, with safe
   fallbacks so it stands alone on the cart page.
   ========================================================================== */

.aecs-modern-cart {
    --gf-bg:     var(--gf-bg, #FAFAFA);
    --gf-text:   var(--gf-text, #0E1111);
    --gf-muted:  var(--gf-muted, #999);
    --gf-border: var(--gf-border, #d0d0d0);
    --gf-accent: var(--gf-accent, var(--wp--preset--color--primary, #E8001E));
}

/* ── Composite components are shown ONCE, nested in the parent row's card.
   Hide the redundant per-component child line rows (cart + order). display:none
   is visual only — they're still real line items, so totals are unchanged and
   the parent row already rolls up their subtotal. ── */
.aecs-modern-cart tr.cart_item.aecs_component_child_item,
.aecs-modern-cart tr.order_item.aecs_component_child_item,
.aecs-modern-cart .woocommerce-mini-cart .aecs_component_child_item,
.aecs-modern-cart .widget_shopping_cart_content .aecs_component_child_item,
.aecs-modern-cart .elementor-menu-cart__product.aecs_component_child_item {
    display: none !important;
}

/* Bundled addons live in the parent's breakdown, so hide their standalone row.
   Orphan addons (parent removed) drop .aecs_addon_bundled and reappear.
   Mini-cart selectors are tag-agnostic to also catch Elementor Pro's Menu Cart
   (<div class="elementor-menu-cart__product … cart_item">), which is not the
   <li class="mini_cart_item"> the default widget emits. */
.aecs-modern-cart tr.aecs_addon_bundled,
.aecs-modern-cart .woocommerce-mini-cart .aecs_addon_bundled,
.aecs-modern-cart .widget_shopping_cart_content .aecs_addon_bundled,
.aecs-modern-cart .elementor-menu-cart__product.aecs_addon_bundled {
    display: none !important;
}

/* ── Breakdown card: the nested component list on the composite parent row.
   Each row = [label · qty · name · attribute pills · price]. ── */
.aecs-modern-cart .aecs_cart_breakdown {
    list-style: none;
    margin: 12px 0 2px;
    padding: 12px 0 0;
    border-top: 1px dashed var(--gf-border, rgba(0, 0, 0, 0.12));
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.85em;
    line-height: 1.45;
}
.aecs-modern-cart .aecs_cart_breakdown_item {
    margin: 0;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 7px;
    max-width: 100%;
    background: var(--gf-bg, #fafafa);
    border-radius: 6px;
    border-left: 2px solid var(--gf-border, #ddd);
}
.aecs-modern-cart .aecs_cart_breakdown_item::before { content: none; }
.aecs-modern-cart .aecs_cart_breakdown_component {
    color: var(--gf-muted, #888);
    font-weight: 400;
    white-space: nowrap;
}
.aecs-modern-cart .aecs_cart_breakdown_qty {
    font-weight: 700;
    color: var(--gf-accent, #d63638);
    white-space: nowrap;
}
/* Product name may be long — let it wrap inside the column instead of
   overflowing it (min-width:0 lets the flex item shrink). */
.aecs-modern-cart .aecs_cart_breakdown_product {
    font-weight: 500;
    color: var(--gf-text, #111);
    min-width: 0;
    overflow-wrap: anywhere;
}
.aecs-modern-cart .aecs_cart_breakdown_attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.aecs-modern-cart .aecs_cart_attr_pill {
    background: #fff;
    border: 1px solid var(--gf-border, #ededed);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.82em;
    color: var(--gf-muted, #888);
    white-space: nowrap;
}
/* Per-component price is informational (catalog price × qty) — it doesn't sum
   to the parent line total, so keep it muted/quiet so it can't be misread as a
   chargeable amount next to the real product price. */
.aecs-modern-cart .aecs_cart_breakdown_price {
    margin-left: auto;
    padding-left: 8px;
    font-weight: 500;
    color: var(--gf-muted, #888);
    white-space: nowrap;
}

/* ── Addon row: harmonised with the component rows — same rhythm, just an accent
   left edge + a light "doplněk" tag instead of a heavy boxed badge. The addon
   DOES change the price, so its "+price" keeps the accent colour (the only
   coloured price in the breakdown), which reads as meaningful, not noisy. ── */
.aecs-modern-cart .aecs_cart_breakdown_addon {
    border-left-color: var(--gf-accent, #d63638);
}
.aecs-modern-cart .aecs_cart_addon_badge {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gf-accent, #d63638);
    background: none;
    border: none;
    padding: 0;
    white-space: nowrap;
}
.aecs-modern-cart .aecs_cart_breakdown_addon .aecs_cart_breakdown_price {
    color: var(--gf-accent, #d63638);
    font-weight: 600;
}

/* ── Variation attributes for ANY product (not just composites) — WooCommerce
   prints the selected attributes as <dl class="variation"> under the product
   name; render it as the same pill card so every variable product reads the
   same way in the cart. Markup is WC's own, this is pure styling. ── */
.aecs-modern-cart .cart_item .product-name dl.variation {
    margin: 8px 0 0;
    padding: 4px 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 5px;
    max-width: 100%;
    background: var(--gf-bg, #fafafa);
    border-radius: 5px;
    border-left: 2px solid var(--gf-border, #ddd);
    font-size: 0.85em;
    line-height: 1.4;
    overflow: hidden;
}
.aecs-modern-cart .cart_item .product-name dl.variation dt {
    margin: 0;
    padding: 0;
    color: var(--gf-muted, #888);
    font-weight: 400;
    white-space: nowrap;
}
.aecs-modern-cart .cart_item .product-name dl.variation dd {
    margin: 0;
    padding: 0;
}
.aecs-modern-cart .cart_item .product-name dl.variation dd p {
    margin: 0;
    padding: 1px 5px;
    background: #fff;
    border: 1px solid var(--gf-border, #e8e8e8);
    border-radius: 4px;
    font-size: 0.95em;
    color: #555;
    overflow-wrap: anywhere;
}