/* Edara Storefront — storefront cart + toast styles.
   Uses theme custom properties: --c-primary, --c-accent, --c-bg, --c-fg, --c-border, --c-muted. */

:root {
    /* Local tokens for this file's own magic numbers. This file is loaded
       alongside base.css/theme.css on every page but is architecturally
       separate (a shared widget, not shop content), so values here are named
       and de-duplicated in place rather than force-fit onto base.css's --t-fs-*
       scale — except two that already landed within 1.5% of an existing step,
       which reuse that step directly instead of adding a near-duplicate.
       Every value below is UNCHANGED from what it replaces; this is a naming
       pass, not a retuning.
       Prefixed --sf- (storefront-file-local), not after the mini-cart's own
       .emc- class namespace — half these tokens style things outside the
       mini-cart (toast, search input, pagination, field errors), so a
       component-scoped name would misrepresent their reach. */
    --sf-radius: 8px;     /* panel corners, buttons, search input — was 4 identical literals */
    --sf-radius-sm: 4px;  /* qty stepper buttons — deliberately tighter than --sf-radius */
    /* Same shadow recipe, mirrored for RTL — only the x-offset sign differs.
       Named together so the shared blur/colour only has to change once. */
    --sf-shadow-ltr: -8px 0 32px rgba(0, 0, 0, 0.18);
    --sf-shadow-rtl: 8px 0 32px rgba(0, 0, 0, 0.18);
    --sf-fs-xs: 13px;  /* qty text; also absorbs the field-error's old 0.82rem (13.12px, <1% off) */
    --sf-fs-sm: 14px;  /* line title/price, toast, pagination status — 4 identical literals */
    --sf-fs-xl: 18px;  /* mini-cart panel header */
}

/* O1 — global visible focus indicator (storefront has none otherwise).
   currentColor fallback keeps the ring visible even if --c-primary is too
   dark or too light against the focused element's own background. */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.edara-mini-cart .emc-qty button:focus-visible,
.edara-mini-cart .emc-close:focus-visible,
.cart-line-remove:focus-visible {
    outline: 2px solid currentColor;
    outline: 2px solid var(--c-primary, currentColor);
    outline-offset: 2px;
    border-radius: inherit;
}

.edara-mini-cart {
    position: fixed; inset: 0; z-index: 9000;
    pointer-events: none; opacity: 0;
    transition: opacity 180ms ease;
}
.edara-mini-cart.open { pointer-events: auto; opacity: 1; }

.edara-mini-cart .emc-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.edara-mini-cart .emc-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(420px, 100%);
    background: var(--c-bg, #ffffff);
    color: var(--c-fg, #1a1a1a);
    box-shadow: var(--sf-shadow-ltr);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 220ms ease;
}
.edara-mini-cart.open .emc-panel { transform: translateX(0); }
[dir="rtl"] .edara-mini-cart .emc-panel { right: auto; left: 0; transform: translateX(-100%); box-shadow: var(--sf-shadow-rtl); }
[dir="rtl"] .edara-mini-cart.open .emc-panel { transform: translateX(0); }

.edara-mini-cart .emc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border, #e8e6e2);
}
.edara-mini-cart .emc-header h3 { margin: 0; font-size: var(--sf-fs-xl); }
.edara-mini-cart .emc-close {
    background: transparent; border: 0; font-size: 28px; line-height: 1;
    cursor: pointer; color: var(--c-muted, #6b6b6b);
    /* O5 — 44x44 actionable box, glyph stays visually centered */
    min-width: 44px; min-height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
}

.edara-mini-cart .emc-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.edara-mini-cart .emc-empty { color: var(--c-muted, #6b6b6b); text-align: center; padding: 32px 0; }

.edara-mini-cart .emc-line {
    display: flex; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--c-border, #e8e6e2);
}
.edara-mini-cart .emc-thumb {
    width: 64px; height: 64px; border-radius: var(--sf-radius);
    object-fit: cover; background: #f3f1ec; flex-shrink: 0;
}
.edara-mini-cart .emc-thumb.placeholder { background: linear-gradient(135deg, #ece9e2, #d9d4c8); }
.edara-mini-cart .emc-line-body { flex: 1; min-width: 0; }
.edara-mini-cart .emc-line-title { font-weight: 600; font-size: var(--sf-fs-sm); }
.edara-mini-cart .emc-line-price { color: var(--c-accent, #c19a6b); font-size: var(--sf-fs-sm); margin: 4px 0 8px; }
.edara-mini-cart .emc-qty { display: flex; align-items: center; gap: 8px; font-size: var(--sf-fs-xs); }
.edara-mini-cart .emc-qty button {
    border: 1px solid var(--c-border, #e8e6e2);
    background: transparent; cursor: pointer; border-radius: var(--sf-radius-sm);
    /* O5 — keep ~26px visual via inner sizing, 44px actionable hit area */
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
}
.edara-mini-cart .emc-qty .emc-remove {
    width: auto; padding: 0 8px; margin-inline-start: auto; color: var(--c-muted, #6b6b6b);
    border: 0; background: transparent;
}

.edara-mini-cart .emc-footer {
    padding: 16px 20px; border-top: 1px solid var(--c-border, #e8e6e2);
    display: flex; flex-direction: column; gap: 8px;
}
.edara-mini-cart .emc-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 4px; font-size: var(--t-fs-md, 15px);
}
.edara-mini-cart .emc-btn {
    display: block; text-align: center; padding: 10px 16px;
    border-radius: var(--sf-radius); text-decoration: none; font-weight: 600;
}
.edara-mini-cart .emc-btn.primary { background: var(--c-primary, #1a1a1a); color: var(--c-on-primary, #fff); }
.edara-mini-cart .emc-btn.ghost { border: 1px solid var(--c-border, #e8e6e2); color: var(--c-fg, #1a1a1a); }

.edara-mini-cart .emc-added {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 20px;
    background: var(--st-ok-bg, #e7f5ec); color: var(--st-ok-fg, #10603a); font-size: var(--sf-fs-sm); font-weight: 600;
}
.edara-mini-cart .emc-free { padding: 12px 20px 0; }
.edara-mini-cart .emc-min { margin: 12px 20px 0; }
.edara-mini-cart .emc-btn[aria-disabled="true"] { opacity: 0.45; }
.edara-mini-cart .emc-free:empty { display: none; }
.edara-mini-cart .emc-line-title a { color: inherit; }
.edara-mini-cart .emc-qty .qty-stepper button { min-width: 36px; min-height: 36px; }
.edara-mini-cart .emc-qty .qty-stepper output { width: 30px; }

/* Full /cart page rows: layout in base.css (.cart-line); only the remove
   button's hit area is here, beside the mini-cart's. */
.cart-line-remove {
    background: transparent; border: 0; color: var(--c-muted, #6b6b6b); cursor: pointer;
    font: inherit; font-size: var(--sf-fs-sm); text-decoration: underline; text-underline-offset: 2px;
    /* O5 — 44px actionable hit area */
    min-height: 44px; padding: 0 8px;
    display: inline-flex; align-items: center;
}

/* Checkout inline error */
[data-checkout-error] { display: none; color: #b00020; margin: 8px 0; }
[data-checkout-error].show { display: block; }

/* Toast */
.edara-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 12px);
    background: var(--c-primary, #1a1a1a); color: #fff;
    padding: 10px 18px; border-radius: var(--sf-radius); font-size: var(--sf-fs-sm);
    opacity: 0; transition: opacity 220ms ease, transform 220ms ease;
    z-index: 9100; pointer-events: none;
}
.edara-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* U2 — persistent, per-field validation errors (AA: #b00020 on white ~6:1) */
.field-error{
  display:block;margin-top:4px;color:#b00020;font-size:var(--sf-fs-xs);font-weight:600;
}
[aria-invalid="true"]{outline:2px solid #b00020;outline-offset:1px;}

/* Pagination (shared base macro) */
.pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; margin: 28px 0 8px;
}
.pagination-status { color: var(--c-muted, #6b6b6b); font-size: var(--sf-fs-sm); }