/*
 * PEPTAS cart drawer — Release 2.
 *
 * Loaded only on views that carry an add-to-cart control (src/CartDrawer/CartDrawer.php),
 * and only while `cart_drawer_enabled` is true.
 *
 * SCOPING RULE. Every selector in this file begins with `.peptas-cart-drawer`, with one
 * documented exception at the bottom: the `html.peptas-cart-drawer-open` scroll lock, which
 * by definition has to reach the document element. There is no bare element selector, no
 * `:root` block, and no new custom property — every colour, radius, shadow and font comes
 * from the tokens the child theme already declares, with a literal fallback in each var()
 * so the panel stays readable if the theme's stylesheet ever fails to load.
 *
 * Z-INDEX. The site already has a stacking order and this file slots into it rather than
 * shouting over it:
 *
 *     1 900 000 000   theme cart toast
 *   > 1 950 000 000   THIS DRAWER
 *     2 000 000 000   consent banner
 *     2 100 000 000   consent preferences dialog
 *     2 147 483 000   professional-access gate
 *
 * The drawer sits above the toast (it supersedes it) and below every consent and access
 * surface. Directive §10.4 requires that the drawer never appear above or inside the
 * unaccepted access gate; the z-index makes that true and the `display: none` rule at the
 * bottom makes it true even if a future stylesheet changes the stacking.
 */

.peptas-cart-drawer {
    bottom: 0;
    font-family: var(--peptas-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1950000000;
}

.peptas-cart-drawer[hidden] {
    display: none;
}

.peptas-cart-drawer__backdrop {
    background: rgba(16, 33, 61, 0.46);
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 220ms ease;
}

.peptas-cart-drawer__backdrop[hidden] {
    display: none;
}

.peptas-cart-drawer.is-open .peptas-cart-drawer__backdrop {
    opacity: 1;
}

/* ---------------------------------------------------------------------------------------
 * Panel — a right-hand drawer on desktop.
 * ------------------------------------------------------------------------------------ */

.peptas-cart-drawer__panel {
    background: var(--peptas-surface, #ffffff);
    bottom: 0;
    box-shadow: var(--peptas-shadow, 0 14px 38px rgba(16, 33, 61, 0.12));
    color: var(--peptas-ink, #10213d);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform 240ms ease;
    width: 420px;
}

.peptas-cart-drawer.is-open .peptas-cart-drawer__panel {
    transform: translateX(0);
}

.peptas-cart-drawer__panel:focus {
    outline: none;
}

.peptas-cart-drawer__header {
    align-items: center;
    border-bottom: 1px solid var(--peptas-line, #dbe2ea);
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    justify-content: space-between;
    padding: 18px 20px;
}

.peptas-cart-drawer__title {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0;
}

.peptas-cart-drawer__title:focus {
    outline: 2px solid var(--peptas-blue, #1457d9);
    outline-offset: 4px;
}

.peptas-cart-drawer__close {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--peptas-ink-soft, #34445d);
    cursor: pointer;
    display: flex;
    font-size: 24px;
    justify-content: center;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
}

.peptas-cart-drawer__close:hover,
.peptas-cart-drawer__close:focus-visible {
    background: var(--peptas-surface-soft, #f5f7fa);
    border-color: var(--peptas-line, #dbe2ea);
    color: var(--peptas-ink, #10213d);
}

.peptas-cart-drawer__error {
    background: var(--peptas-surface-soft, #f5f7fa);
    border-left: 4px solid var(--peptas-red, #a7343d);
    color: var(--peptas-ink, #10213d);
    flex: 0 0 auto;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    padding: 12px 20px;
}

.peptas-cart-drawer__error[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------------------
 * Body — the only scrolling region.
 * ------------------------------------------------------------------------------------ */

.peptas-cart-drawer__body {
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 20px 16px;
}

.peptas-cart-drawer__empty {
    color: var(--peptas-ink-soft, #34445d);
    padding: 28px 0;
}

.peptas-cart-drawer__empty[hidden] {
    display: none;
}

.peptas-cart-drawer__empty p {
    margin: 0 0 6px;
}

.peptas-cart-drawer__empty-help {
    color: var(--peptas-muted, #64748b);
    font-size: 0.9rem;
}

.peptas-cart-drawer__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.peptas-cart-drawer__items[hidden] {
    display: none;
}

.peptas-cart-drawer__item {
    border-bottom: 1px solid var(--peptas-line, #dbe2ea);
    display: flex;
    gap: 14px;
    padding: 16px 0;
}

.peptas-cart-drawer__item.is-pending {
    opacity: 0.6;
}

.peptas-cart-drawer__item-media {
    flex: 0 0 auto;
    /* Reserved box: the image cannot move the layout as it loads (directive §14.4, CLS). */
    height: 64px;
    width: 64px;
}

.peptas-cart-drawer__item-media[hidden] {
    display: none;
}

.peptas-cart-drawer__item-media img {
    border: 1px solid var(--peptas-line, #dbe2ea);
    border-radius: 6px;
    display: block;
    height: 64px;
    object-fit: cover;
    width: 64px;
}

.peptas-cart-drawer__item-detail {
    flex: 1 1 auto;
    min-width: 0;
}

.peptas-cart-drawer__item-name {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 4px;
}

.peptas-cart-drawer__item-name a {
    color: var(--peptas-ink, #10213d);
    text-decoration: none;
}

.peptas-cart-drawer__item-name a:hover,
.peptas-cart-drawer__item-name a:focus-visible {
    text-decoration: underline;
}

.peptas-cart-drawer__item-meta {
    color: var(--peptas-muted, #64748b);
    font-size: 0.82rem;
    margin: 0 0 2px;
}

.peptas-cart-drawer__item-meta[hidden] {
    display: none;
}

.peptas-cart-drawer__item-unit,
.peptas-cart-drawer__item-total {
    display: flex;
    font-size: 0.88rem;
    gap: 8px;
    justify-content: space-between;
    margin: 6px 0 0;
}

.peptas-cart-drawer__item-label {
    color: var(--peptas-muted, #64748b);
}

.peptas-cart-drawer__item-total {
    font-weight: 700;
}

/*
 * Volume pricing is reported, never calculated here — the Store API line prices already
 * include the mu-plugin's tiers. The wording stays factual and carries no percentage.
 */
.peptas-cart-drawer__item-volume {
    background: var(--peptas-surface-blue, #eef4ff);
    border-radius: 4px;
    color: var(--peptas-teal, #087a76);
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 6px 0 0;
    padding: 3px 8px;
}

.peptas-cart-drawer__item-volume[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------------------
 * Quantity and remove controls. Every interactive box is at least 44 × 44 CSS pixels
 * (directive §10.4: "adequate touch targets").
 * ------------------------------------------------------------------------------------ */

.peptas-cart-drawer__item-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.peptas-cart-drawer__qty {
    align-items: stretch;
    border: 1px solid var(--peptas-line-strong, #aeb9c8);
    border-radius: 6px;
    display: flex;
    overflow: hidden;
}

.peptas-cart-drawer__qty[hidden] {
    display: none;
}

.peptas-cart-drawer__qty-button {
    background: var(--peptas-surface-soft, #f5f7fa);
    border: 0;
    color: var(--peptas-ink, #10213d);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
}

.peptas-cart-drawer__qty-button:disabled {
    color: var(--peptas-muted, #64748b);
    cursor: not-allowed;
    opacity: 0.55;
}

.peptas-cart-drawer__qty-button:hover:not(:disabled) {
    background: var(--peptas-surface-blue, #eef4ff);
}

.peptas-cart-drawer__qty-input {
    -moz-appearance: textfield;
    appearance: textfield;
    border: 0;
    border-left: 1px solid var(--peptas-line, #dbe2ea);
    border-right: 1px solid var(--peptas-line, #dbe2ea);
    color: var(--peptas-ink, #10213d);
    font-size: 0.95rem;
    min-height: 44px;
    padding: 0 6px;
    text-align: center;
    width: 58px;
}

.peptas-cart-drawer__qty-input::-webkit-outer-spin-button,
.peptas-cart-drawer__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.peptas-cart-drawer__qty-static {
    color: var(--peptas-ink-soft, #34445d);
    font-size: 0.88rem;
    margin: 0;
}

.peptas-cart-drawer__qty-static[hidden] {
    display: none;
}

.peptas-cart-drawer__remove {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--peptas-red, #a7343d);
    cursor: pointer;
    font-size: 0.85rem;
    min-height: 44px;
    padding: 0 10px;
    text-decoration: underline;
}

.peptas-cart-drawer__remove[hidden] {
    display: none;
}

.peptas-cart-drawer__remove:hover:not(:disabled),
.peptas-cart-drawer__remove:focus-visible {
    background: var(--peptas-surface-soft, #f5f7fa);
    border-color: var(--peptas-line, #dbe2ea);
}

.peptas-cart-drawer__remove:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* ---------------------------------------------------------------------------------------
 * Footer — sticky, always reachable without scrolling past the lines.
 * ------------------------------------------------------------------------------------ */

.peptas-cart-drawer__footer {
    background: var(--peptas-surface, #ffffff);
    border-top: 1px solid var(--peptas-line, #dbe2ea);
    box-shadow: 0 -6px 18px rgba(16, 33, 61, 0.06);
    flex: 0 0 auto;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
}

.peptas-cart-drawer__totals {
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.peptas-cart-drawer__totals-label {
    color: var(--peptas-ink-soft, #34445d);
}

/*
 * Directive §10.3's compliance notice. Small, but never hidden, never truncated and never
 * collapsed behind a control — it is also the dialog's accessible description.
 */
.peptas-cart-drawer__notice {
    border-left: 3px solid var(--peptas-line-strong, #aeb9c8);
    color: var(--peptas-ink-soft, #34445d);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0 0 14px;
    padding-left: 10px;
}

.peptas-cart-drawer__actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

.peptas-cart-drawer__action {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    font-size: 0.9rem;
    font-weight: 700;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
    text-align: center;
    text-decoration: none;
}

/*
 * Full width on its own row, as the third grid item. Deliberately NOT reordered with
 * `order`, which would put it first visually while leaving it last in the tab sequence —
 * a visual/keyboard mismatch is an accessibility bug, not a layout preference. DOM order,
 * reading order and tab order are the same here: Continue browsing, View cart, Proceed to
 * checkout.
 */
.peptas-cart-drawer__action--primary {
    background: var(--peptas-blue, #1457d9);
    color: #ffffff;
    grid-column: 1 / -1;
}

.peptas-cart-drawer__action--primary:hover,
.peptas-cart-drawer__action--primary:focus-visible {
    background: var(--peptas-blue-dark, #0c3f9f);
    color: #ffffff;
}

.peptas-cart-drawer__action--secondary {
    background: var(--peptas-surface-blue, #eef4ff);
    border-color: var(--peptas-line, #dbe2ea);
    color: var(--peptas-blue-dark, #0c3f9f);
}

.peptas-cart-drawer__action--ghost {
    background: transparent;
    border-color: var(--peptas-line-strong, #aeb9c8);
    color: var(--peptas-ink-soft, #34445d);
}

.peptas-cart-drawer__action:focus-visible {
    outline: 2px solid var(--peptas-blue, #1457d9);
    outline-offset: 2px;
}

/* Hidden from sight, still announced. Mirrors the theme's own .screen-reader-text. */
.peptas-cart-drawer .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ---------------------------------------------------------------------------------------
 * Mobile — a near-full-width bottom sheet.
 * ------------------------------------------------------------------------------------ */

@media (max-width: 600px) {
    .peptas-cart-drawer__panel {
        border-radius: 14px 14px 0 0;
        bottom: 0;
        height: auto;
        left: 0;
        max-height: 92vh;
        max-height: 92dvh;
        right: 0;
        top: auto;
        transform: translateY(100%);
        width: 100%;
    }

    .peptas-cart-drawer.is-open .peptas-cart-drawer__panel {
        transform: translateY(0);
    }

    .peptas-cart-drawer__header,
    .peptas-cart-drawer__body,
    .peptas-cart-drawer__footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .peptas-cart-drawer__item-media,
    .peptas-cart-drawer__item-media img {
        height: 52px;
        width: 52px;
    }
}

/* ---------------------------------------------------------------------------------------
 * Reduced motion — directive §10.4. Nothing slides; the panel is simply there.
 * ------------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .peptas-cart-drawer__panel,
    .peptas-cart-drawer__backdrop {
        transition: none;
    }

    .peptas-cart-drawer__panel {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------------------
 * The professional-access gate always wins (directive §10.4). Belt and braces: the drawer
 * already sits ~200 million below the gate in the stacking order, and this removes it from
 * the page entirely while the gate is unaccepted, so it cannot appear above or inside it
 * even if the stacking order is ever changed.
 * ------------------------------------------------------------------------------------ */

.peptas-access-required .peptas-cart-drawer {
    display: none;
}

/* ---------------------------------------------------------------------------------------
 * THE ONE UNSCOPED RULE, and it is deliberate.
 *
 * Background scroll must stop while the drawer is open (directive §10.4), and on iOS Safari
 * `overflow: hidden` on <body> alone does not achieve that. Pinning the body at its current
 * offset does, and the script restores the exact scroll position on close so the visitor's
 * place in a shop archive is preserved (§10.2 item 8).
 *
 * The class is applied by cart-drawer.js only while the drawer is open, and removed on
 * close. It is prefixed, it is ours, and nothing else on the site uses it.
 * ------------------------------------------------------------------------------------ */

html.peptas-cart-drawer-open,
html.peptas-cart-drawer-open body {
    overflow: hidden;
}

html.peptas-cart-drawer-open body {
    left: 0;
    position: fixed;
    right: 0;
    width: 100%;
}