/**
 * Studio community kit · ext/easycommerce.css · EasyCommerce through the library's StoreBridge,
 * contract §5.11
 *
 * Registered as `template.kestrel.store`; StoreBridge enqueues it on store pages when EasyCommerce
 * is installed. The library's `ec-bridge.css` prints AFTER the template (framework B7), so every rule
 * here carries one extra `html` (0,1,1 over its 0,1,0).
 * Sections 1–5 are byte-identical in every template (kit-owned); section 6 is the design skin.
 *
 * What the bridge brings (EasyCommerce is not installed on the test sites; verified against the
 * library's ec-bridge.css and the drawer DOM that ec-bridge.js builds, on a fixture page inside the
 * real template chrome):
 * - the slide-over cart `aside#ts-cart-drawer.ts-drawer` + `.ts-drawer-backdrop` appended to <body>
 *   (z 1290/1300, above the template ladder, below app dialogs), cart lines `.ts-cart-line*` with a
 *   quantity stepper `.ts-qty-btn`, a floating `.ts-cart-fab` when the header has no cart action,
 *   and the cart page `.ts-cart-grid` / `.ts-cart-summary-card`;
 * - actions drawn with the template's own `.ts-btn` / `.ts-btn--outline` (components.css);
 * - the EasyCommerce SPA itself is re-themed by ec-bridge.js from eight hex tokens (bg, fg, surface,
 *   surface-2, fg-2, border, accent, accent-fg), which is why tokens.css keeps them literal hex (B8).
 */

/* ==========================================================================
   1. Variable map
   None in CSS: ec-bridge.js reads the eight hex --ec-* tokens and writes the store SPA's variables.
   ========================================================================== */

/* ==========================================================================
   2. Containment
   The drawer lives under <body>, outside every template region: its heading and controls are set
   explicitly in section 5 instead of inheriting Reboot or template defaults.
   ========================================================================== */

/* ==========================================================================
   3. Leak neutralisers
   None known: the bridge's classes are all `ts-*`.
   ========================================================================== */

/* ==========================================================================
   4. Default module markup
   None: the store's home sections are Studio Pages sections, skinned in pages.css.
   ========================================================================== */

/* ==========================================================================
   5. Page frame: cart drawer, cart lines, floating cart button, cart page
   ========================================================================== */

html .ts-drawer-backdrop {
    background: var(--ts-scrim);
}

html .ts-drawer {
    border-inline-start: 1px solid var(--ec-border);
    background: var(--ec-surface);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    box-shadow: var(--ts-overlay-shadow);
}

html .ts-drawer__head,
html .ts-drawer__foot {
    border-color: var(--ec-border);
}

html .ts-drawer__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.25rem;
    font-style: var(--ec-disp-style, normal);
    font-weight: var(--ec-disp-weight, 700);
    line-height: 1.2;
    letter-spacing: var(--ec-disp-tracking, normal);
    text-transform: var(--ec-disp-transform, none);
}

html .ts-drawer__close {
    border-radius: var(--ec-btn-radius);
    color: var(--ec-fg-2);
}

html .ts-drawer__close:hover {
    background: var(--ec-surface-2);
    color: var(--ec-fg);
}

html .ts-drawer__subtotal {
    align-items: baseline;
    color: var(--ec-fg);
}

html .ts-drawer__subtotal strong {
    font-variant-numeric: tabular-nums;
}

html .ts-cart-line {
    border-color: var(--ec-border);
}

html .ts-cart-line__img {
    border-radius: var(--ec-img-radius);
    background: var(--ec-surface-2);
}

html .ts-cart-line__title {
    color: var(--ec-fg);
}

html .ts-cart-line__price,
html :is(.ts-cart-empty, .ts-cart-loading, .ts-cart-summary__note) {
    color: var(--ec-fg-2);
}

/* the stepper is a control: its outline needs >= 3:1 */
html .ts-cart-line__qty {
    border-color: var(--ts-control);
    border-radius: var(--ec-btn-radius);
}

html .ts-qty-btn {
    color: var(--ec-fg);
}

html .ts-qty-btn:hover {
    background: var(--ec-surface-2);
}

html .ts-cart-line__remove {
    min-block-size: 1.5rem;
    color: var(--ts-link);
    text-underline-offset: 0.15em;
}

html .ts-cart-line__remove:hover {
    color: var(--ts-link-hover);
}

html .ts-cart-fab {
    border-color: var(--ts-btn-primary-border, var(--ec-accent));
    background: var(--ts-btn-primary-bg, var(--ec-accent));
    color: var(--ts-btn-primary-fg, var(--ec-accent-fg));
    box-shadow: var(--ts-overlay-shadow);
}

html .ts-cart-fab__badge {
    background: var(--ec-fg);
    color: var(--ec-bg);
    font-family: var(--ec-font-body);
}

html :is(.ts-drawer__close, .ts-qty-btn, .ts-cart-line__remove, .ts-cart-fab):focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
}

html .ts-cart-summary-card {
    border-color: var(--ec-border);
    border-radius: var(--ec-radius);
    background: var(--ec-surface);
    box-shadow: var(--ec-shadow);
}

html .ts-cart-summary-card__title {
    font-family: var(--ec-font-display);
    font-weight: var(--ec-disp-weight, 700);
    letter-spacing: var(--ec-disp-tracking, normal);
    text-transform: var(--ec-disp-transform, none);
}

html :is(.ts-cart-lines, .ts-cart-line--page .ts-cart-line__img) {
    border-color: var(--ec-border);
}

/* the page cart summary sticks below a sticky template header (store pages are not app pages) */
html .ts-cart-aside {
    top: calc(var(--ts-sticky-offset, 0px) + 1.5rem);
}

/* ==========================================================================
   6. Design skin (template-owned; ≤ 30% of this file)
   ========================================================================== */

/* @ts-kit section-6 begin: 6. Design skin (template-owned; sync-kit.mjs keeps everything between these two markers) */
/* 6. Kestrel skin (INTEGRATIONS.md 8, K8, M4a): for owners who turn the header cart on. The drawer
   head on the 2px rule under a display title, cart lines on hairlines, 44px quantity buttons with
   8px corners and Kestrel's focus ring, the subtotal in tabular mono, the floating cart button as a
   48px accent square with the "You" badge's look on its count. Actions are the template's .ts-btn. */
html .ts-drawer__head {
    border-block-end: 2px solid var(--ke-rule);
}

html .ts-drawer__title {
    font-weight: 650;
    letter-spacing: -0.02em;
}

html .ts-cart-line {
    border-block-end: 1px solid var(--ec-border);
}

html .ts-qty-btn {
    min-inline-size: 44px;
    min-block-size: 44px;
    border-radius: var(--ec-btn-radius);
}

html :is(.ts-drawer__close, .ts-qty-btn, .ts-cart-line__remove, .ts-cart-fab):focus-visible {
    outline: 2px solid var(--ts-focus);
    outline-offset: 3px;
}

html .ts-drawer__subtotal strong {
    font-family: var(--ts-font-mono);
    font-variant-numeric: tabular-nums;
}

html .ts-cart-fab {
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--ec-btn-radius);
}

html .ts-cart-fab__badge {
    background: var(--ec-accent);
    color: var(--ec-accent-fg);
    font-weight: 600;
}

/* @ts-kit section-6 end */