/* Side cart drawer. IDs and !important beat Avada's input styles; keep them. */

/* --capers-sc-accent / --capers-sc-button are the admin's colours; use them, not literals. */
:root {
    --capers-sc-accent: #b08d78;
    --capers-sc-button: #2c1a0e;

    --capers-sc-surface:  #f7f4f2;
    --capers-sc-hairline: #e3dcd6;
    --capers-sc-muted:    #8a7a6d;
    --capers-sc-ink:      #222;
}

#capers-sc-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    opacity: 0; visibility: hidden; transition: opacity .25s ease;
    z-index: 99998;
}
#capers-sc-overlay.capers-sc-open { opacity: 1; visibility: visible; }
body.capers-sc-noscroll { overflow: hidden; }

#capers-sc-drawer {
    position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw;
    background: #fff; z-index: 99999; display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .3s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    font-family: inherit;
}
#capers-sc-drawer.capers-sc-open { transform: translateX(0); }

.capers-sc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; background: var( --capers-sc-button ); color: #fff; flex-shrink: 0;
}
.capers-sc-head h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
#capers-sc-close { background: none; border: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }

.capers-sc-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
/* Flex column with one 8px gap: no margins on its children. flex-shrink: 0 keeps Checkout on screen. */
.capers-sc-foot {
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 8px;
    padding: 8px 20px 10px;
    border-top: 1px solid #eee;
}

/* Coupon and save-cart links share a row; opened (:has) each takes the full width, as do coupon chips. */
.capers-sc-foot-utility {
    display: flex; flex-wrap: wrap;
    justify-content: space-between; align-items: flex-start;
    gap: 4px 12px;
}
.capers-sc-foot-utility > * { flex: 0 1 auto; min-width: 0; }
.capers-sc-foot-utility > details[open],
.capers-sc-foot-utility > *:has( details[open] ),
.capers-sc-foot-utility > *:has( .capers-sc-coupon-chip ) { flex: 1 0 100%; }

.capers-sc-empty { text-align: center; padding: 40px 10px; color: #666; }
.capers-sc-empty p { margin: 0 0 16px; }

.capers-sc-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
.capers-sc-item-img { width: 64px; height: 64px; flex-shrink: 0; overflow: hidden; border-radius: 4px; }
.capers-sc-item-img img { width: 100%; height: 100%; object-fit: cover; }
.capers-sc-item-info { flex: 1; min-width: 0; }
.capers-sc-item-name { font-size: 0.9rem; font-weight: 600; color: #333; margin-bottom: 4px; }
.capers-sc-item-meta { font-size: 0.75rem; color: #666; margin-bottom: 6px; line-height: 1.4; }
.capers-sc-item-meta p { margin: 0; }
.capers-sc-item-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.capers-sc-item-total { font-size: 0.9rem; font-weight: 600; color: #333; white-space: nowrap; align-self: flex-start; }

.capers-sc-qty { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 3px; }
.capers-sc-qty button { background: none; border: none; width: 26px; height: 26px; cursor: pointer; font-size: 1rem; color: #555; }
.capers-sc-qty button:hover { background: #f5f5f5; }
.capers-sc-qty-val { min-width: 24px; text-align: center; font-size: 0.85rem; }

.capers-sc-remove, .capers-sc-savelater, .capers-sc-saved-move {
    background: none; border: none; padding: 0; font-size: 0.75rem; color: #555;
    text-decoration: underline; cursor: pointer;
}
.capers-sc-remove:hover, .capers-sc-savelater:hover, .capers-sc-saved-move:hover { color: var( --capers-sc-accent ); }

.capers-sc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 16px; border-radius: 3px; font-size: 0.85rem; font-weight: 600;
    text-decoration: none; text-align: center; cursor: pointer; border: none;
    flex: 1;
}
.capers-sc-btn-outline { background: #fff; color: var( --capers-sc-button ); border: 1px solid var( --capers-sc-button ); }
.capers-sc-btn-solid { background: var( --capers-sc-button ); color: #fff; }
.capers-sc-actions { display: flex; gap: 10px; }

.capers-sc-totals-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 0.875rem; color: #555; line-height: 1.35; }
/* On the totals <summary>, so no top border or margin. The name stays; other selectors use it. */
.capers-sc-totals-grand { font-size: 1rem; font-weight: 700; color: #222; }

/* The open breakdown is capped and scrolls so it cannot push the cart off-screen. */
/* list-style: none removes the triangle; the flex row is an inner span, not display: flex on <summary> (see sidecart_render_totals_html). */
.capers-sc-totals-disclosure > summary { cursor: pointer; list-style: none; }
.capers-sc-totals-disclosure > summary::-webkit-details-marker { display: none; }
.capers-sc-totals-grand-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.capers-sc-totals-grand-label { display: inline-flex; align-items: baseline; gap: 8px; }
.capers-sc-totals-more {
    font-size: 0.65rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase;
    color: var( --capers-sc-muted ); border: 1px solid var( --capers-sc-hairline );
    border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}
.capers-sc-totals-disclosure[open] .capers-sc-totals-more {
    color: var( --capers-sc-button ); border-color: var( --capers-sc-button );
}
.capers-sc-totals-breakdown { max-height: 132px; overflow-y: auto; padding-top: 4px; }

.capers-sc-coupons-applied { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.capers-sc-coupon-chip {
    background: #f5f0e8; border: 1px solid var( --capers-sc-accent ); color: #7a5c3a;
    font-size: 0.75rem; padding: 4px 8px; border-radius: 3px; display: inline-flex; align-items: center; gap: 6px;
}
.capers-sc-coupon-remove { background: none; border: none; cursor: pointer; color: #7a5c3a; font-size: 0.9rem; line-height: 1; }
.capers-sc-coupon-toggle summary { cursor: pointer; font-size: 0.8rem; color: var( --capers-sc-button ); text-decoration: underline; }
.capers-sc-coupon-form { display: flex; gap: 6px; margin-top: 8px; }
.capers-sc-coupon-form input { flex: 1; padding: 8px 10px; border: 1px solid #ddd; border-radius: 3px; font-size: 0.8rem; }
.capers-sc-coupon-form button { padding: 8px 14px; background: var( --capers-sc-button ); color: #fff; border: none; border-radius: 3px; font-size: 0.8rem; cursor: pointer; }
.capers-sc-error { color: #c0392b; font-size: 0.75rem; margin-top: 6px; }

#capers-sc-saved-wrap, #capers-sc-suggest-wrap { margin-top: 22px; padding-top: 18px; border-top: 1px solid #eee; }
#capers-sc-saved-wrap h3, #capers-sc-suggest-wrap h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: #888; margin: 0 0 12px; }

.capers-sc-saved-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.capers-sc-saved-img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 3px; overflow: hidden; }
.capers-sc-saved-img img { width: 100%; height: 100%; object-fit: cover; }
.capers-sc-saved-info { flex: 1; min-width: 0; }
.capers-sc-saved-name { font-size: 0.8rem; font-weight: 600; color: #333; }
.capers-sc-saved-price { font-size: 0.75rem; color: #777; }
.capers-sc-saved-remove { background: none; border: none; cursor: pointer; color: #777; font-size: 1rem; }

.capers-sc-suggest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.capers-sc-suggest-card { border: 1px solid #f0f0f0; border-radius: 4px; padding: 8px; display: flex; flex-direction: column; position: relative; }
.capers-sc-suggest-img { display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: 3px; margin-bottom: 6px; }
.capers-sc-suggest-img img { width: 100%; height: 100%; object-fit: cover; }
.capers-sc-suggest-name { font-size: 0.75rem; color: #333; text-decoration: none; display: block; line-height: 1.3; margin-bottom: 4px; }
.capers-sc-suggest-price { font-size: 0.75rem; color: #777; }
.capers-sc-suggest-add {
    position: absolute; bottom: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
    background: var( --capers-sc-button ); color: #fff; border: none; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
}

#capers-sc-toggle {
    position: fixed; top: 50%; transform: translateY(-50%);
    background: #000; color: #fff; border: none; cursor: pointer; z-index: 99997;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 15px 9px; font-family: inherit;
    box-shadow: 0 3px 16px rgba(0,0,0,0.35); transition: background .15s ease;
}
#capers-sc-toggle:hover { background: #1a1a1a; }
#capers-sc-toggle.capers-sc-toggle-bottom-right { right: 0; border-radius: 10px 0 0 10px; }
#capers-sc-toggle.capers-sc-toggle-bottom-left  { left: 0;  border-radius: 0 10px 10px 0; }
#capers-sc-toggle .capers-sc-tab-icon { width: 22px; height: 22px; display: block; flex-shrink: 0; }
#capers-sc-toggle .capers-sc-tab-text {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: 14px; font-weight: 700; letter-spacing: 0.14em; line-height: 1;
    text-transform: uppercase; color: #fff; margin: 0;
}
.capers-sc-badge {
    min-width: 20px; height: 20px; padding: 0 5px;
    background: var( --capers-sc-accent ); color: var( --capers-sc-button ); border-radius: 10px;
    font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
@media (max-width: 480px) {
    #capers-sc-toggle { padding: 12px 7px; gap: 7px; }
    #capers-sc-toggle .capers-sc-tab-text { font-size: 12px; letter-spacing: 0.1em; }
    #capers-sc-toggle .capers-sc-tab-icon { width: 18px; height: 18px; }
}

.capers-sc-adding { opacity: 0.6 !important; cursor: wait !important; pointer-events: none !important; }

#capers-sc-drawer #capers-sc-sched {
    padding: 10px 16px 12px !important; border-bottom: 1px solid #eee; background: #fafafa;
    flex-shrink: 0; line-height: 1.25 !important;
}
#capers-sc-drawer #capers-sc-sched,
#capers-sc-drawer #capers-sc-sched * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    box-sizing: border-box;
}
#capers-sc-drawer .capers-sc-sched-tabs { display: flex; background: #ececec; border-radius: 999px; padding: 3px; margin-bottom: 9px !important; }
#capers-sc-drawer .capers-sc-sched-tab {
    flex: 1; border: none !important; background: none; cursor: pointer; padding: 6px 6px !important; border-radius: 999px;
    font-size: 12px !important; font-weight: 600 !important; color: #444; display: inline-flex; align-items: center;
    justify-content: center; gap: 5px; line-height: 1 !important; height: auto !important; margin: 0 !important;
    text-transform: none !important; letter-spacing: normal !important;
}
#capers-sc-drawer .capers-sc-sched-tab.active { background: #111 !important; color: #fff !important; }
#capers-sc-drawer .capers-sc-sched-tab svg { width: 13px !important; height: 13px !important; }
#capers-sc-drawer .capers-sc-sched-field { margin-bottom: 7px; }
#capers-sc-drawer .capers-sc-sched-field label {
    display: block !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: .03em !important; color: #666 !important; margin: 0 0 3px !important; line-height: 1.2 !important;
}
#capers-sc-drawer .capers-sc-sched-field .req { color: #c0392b; }
/* Desktop sizes; the phone band repeats these selectors to override them. Rename in both. */
#capers-sc-drawer .capers-sc-sched-input,
#capers-sc-drawer .capers-sc-sched-select {
    width: 100% !important; padding: 7px 10px !important; border: 1px solid #d5d5d5 !important; border-radius: 6px !important;
    font-size: 13px !important; line-height: 1.2 !important; background: #fff !important; color: #222 !important;
    height: auto !important; min-height: 0 !important; margin: 0 !important; box-shadow: none !important;
}
#capers-sc-drawer .capers-sc-sched-input:focus,
#capers-sc-drawer .capers-sc-sched-select:focus { outline: none !important; border-color: #111 !important; }
#capers-sc-drawer .capers-sc-sched-input:focus-visible,
#capers-sc-drawer .capers-sc-sched-select:focus-visible { outline: 2px solid var( --capers-sc-button ) !important; outline-offset: 1px; }
#capers-sc-drawer .capers-sc-sched-input + .capers-sc-sched-input { margin-top: 6px !important; }
#capers-sc-drawer .capers-sc-sched-row { display: flex; gap: 8px; }
#capers-sc-drawer .capers-sc-sched-row .capers-sc-sched-field { flex: 1; margin-bottom: 0; }
#capers-sc-drawer .capers-sc-addr-parts { margin-top: 6px; }
#capers-sc-drawer .capers-sc-addr-parts .capers-sc-sched-input { margin-top: 0 !important; }
#capers-sc-drawer .capers-sc-f-city  { flex: 3 !important; }
#capers-sc-drawer .capers-sc-f-state { flex: 1 !important; }
#capers-sc-drawer .capers-sc-f-zip   { flex: 2 !important; }
#capers-sc-drawer .capers-sc-sched-input.capers-sc-invalid { border-color: #c0392b !important; }

/* No `display` here: the row ships `hidden` and JS shows it; any display would beat [hidden]. */
#capers-sc-drawer .capers-sc-sched-summary {
    width: 100%; box-sizing: border-box;
    padding: 11px 12px !important; margin: 0 0 8px !important;
    background: var( --capers-sc-surface ) !important;
    border: 1px solid var( --capers-sc-hairline ) !important;
    border-radius: 8px !important;
    font: inherit !important; font-size: 13px !important; line-height: 1.3 !important;
    color: var( --capers-sc-ink ) !important;
    text-align: left !important; cursor: pointer;
    text-transform: none !important; letter-spacing: normal !important;
    min-height: 44px !important;
}
#capers-sc-drawer .capers-sc-sched-summary > span {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#capers-sc-drawer .capers-sc-sched-summary-chev { flex: 0 0 auto; color: var( --capers-sc-muted ); }

/* Shown only by .capers-sc-sched-expanded in the phone block; it is also the only way to close the form. */
#capers-sc-drawer .capers-sc-sched-cart-tab {
    display: none !important;
    box-sizing: border-box;
    width: calc( 100% + 32px );
    margin: 8px -16px 0 !important;
    padding: 9px 16px 10px !important;
    /* border: 0 must come before border-top, or the shorthand erases it. */
    border: 0 !important;
    border-top: 1px solid var( --capers-sc-hairline ) !important;
    border-radius: 0 !important;
    background: var( --capers-sc-surface ) !important;
    font: inherit !important; font-size: 12px !important; line-height: 1.3 !important;
    color: var( --capers-sc-ink ) !important;
    text-align: left !important; cursor: pointer;
    text-transform: none !important; letter-spacing: normal !important;
    min-height: 44px !important;
}
#capers-sc-drawer .capers-sc-sched-cart-grip {
    display: block; width: 40px; height: 4px; margin: 0 auto 7px;
    border-radius: 999px; background: var( --capers-sc-muted );
}
#capers-sc-drawer .capers-sc-sched-cart-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
#capers-sc-drawer .capers-sc-sched-cart-label { font-weight: 600; }
#capers-sc-drawer .capers-sc-sched-cart-count { color: var( --capers-sc-muted ); }

/* Rules key on JS-set classes, not a width; syncCartRoom() re-measures on resize. */
/* Expanded: the scheduler takes the cart's space; scrolling lives in the detail pane so the tab stays on screen. */
/* The squeezed rules win on specificity, not order, so the state that hides the cart cannot lose a reordering. */
#capers-sc-drawer.capers-sc-sched-expanded #capers-sc-sched {
    flex: 0 0 auto;
    /* min-height: 0 is load-bearing: a flex item's default min-height: auto will not shrink, so a small cart pushes the foot off the sheet. */
    min-height: 0;
    max-height: none;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0 !important;
}
#capers-sc-drawer.capers-sc-sched-expanded #capers-sc-sched > * { flex: 0 0 auto; }
/* Must stay after the rule above: both are (2,1,0). */
#capers-sc-drawer.capers-sc-sched-expanded #capers-sc-sched-detail {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
}
#capers-sc-drawer.capers-sc-sched-expanded > .capers-sc-body { min-height: 0; }

/* The tab stays on the open panel: it is the only control that closes the form. */
#capers-sc-drawer.capers-sc-sched-expanded .capers-sc-sched-cart-tab { display: block !important; }
#capers-sc-drawer.capers-sc-sched-expanded:not(.capers-sc-cart-squeezed) .capers-sc-sched-cart-count { display: none !important; }

#capers-sc-drawer.capers-sc-sched-expanded.capers-sc-cart-squeezed #capers-sc-sched { flex: 1 1 auto; }
#capers-sc-drawer.capers-sc-sched-expanded.capers-sc-cart-squeezed #capers-sc-sched-detail { flex: 1 1 auto; }
#capers-sc-drawer.capers-sc-sched-expanded.capers-sc-cart-squeezed > .capers-sc-body { display: none !important; }

#capers-sc-drawer .capers-sc-fold-row { cursor: pointer; list-style-position: inside; }
#capers-sc-drawer .capers-sc-fold-row h3 { display: inline; }

/* A flex child, not an absolute overlay, so no offset to keep in sync with the header. */
#capers-sc-drawer.capers-sc-gated > #capers-sc-sched,
#capers-sc-drawer.capers-sc-gated > .capers-sc-body,
#capers-sc-drawer.capers-sc-gated > .capers-sc-foot { display: none !important; }
#capers-sc-gate {
    flex: 1; background: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 20px; overflow-y: auto;
}
#capers-sc-gate[hidden] { display: none; }
#capers-sc-gate .capers-sc-gate-inner { width: 100%; max-width: 320px; text-align: center; }
#capers-sc-gate h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 600; color: #111; }
#capers-sc-gate p { margin: 0 0 16px; font-size: 0.82rem; line-height: 1.5; color: #555; }
#capers-sc-gate .capers-sc-gate-form { display: flex; flex-direction: column; gap: 8px; }
#capers-sc-gate input {
    width: 100%; padding: 11px 12px; border: 1px solid #d5d5d5; border-radius: 7px;
    font-size: 0.9rem; box-sizing: border-box;
}
#capers-sc-gate input:focus { outline: none; border-color: #111; }
#capers-sc-gate input:focus-visible { outline: 2px solid var( --capers-sc-button ); outline-offset: 1px; }
#capers-sc-gate input.capers-sc-invalid { border-color: #c0392b; }
#capers-sc-gate button {
    padding: 11px 16px; background: var( --capers-sc-button ); color: #fff;
    border: none; border-radius: 7px; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
#capers-sc-gate button:disabled { opacity: .6; cursor: wait; }
#capers-sc-gate .capers-sc-gate-msg { font-size: 0.78rem; margin-top: 10px; min-height: 1em; color: #c0392b; }
#capers-sc-gate .capers-sc-gate-fine { margin: 14px 0 0; font-size: 0.7rem; color: #666; }

/* Same shape as the gate; the two overlays are mutually exclusive by construction. */
#capers-sc-drawer.capers-sc-welcoming > #capers-sc-sched,
#capers-sc-drawer.capers-sc-welcoming > .capers-sc-body,
#capers-sc-drawer.capers-sc-welcoming > .capers-sc-foot { display: none !important; }
#capers-sc-welcome {
    flex: 1; background: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 20px; overflow-y: auto;
}
#capers-sc-welcome[hidden] { display: none; }
#capers-sc-welcome .capers-sc-welcome-inner { width: 100%; max-width: 320px; text-align: center; }
#capers-sc-welcome .capers-sc-welcome-eyebrow {
    margin: 0 0 6px; font-size: 0.62rem; letter-spacing: .14em; text-transform: uppercase;
    color: var( --capers-sc-accent, #b08d78 ); font-weight: 600;
}
#capers-sc-welcome h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 600; color: #111; }
#capers-sc-welcome #capers-sc-welcome-body { margin: 0 0 16px; font-size: 0.82rem; line-height: 1.5; color: #555; }
#capers-sc-welcome .capers-sc-welcome-items {
    text-align: left; border: 1px solid #eee; border-radius: 6px; overflow: hidden; margin: 0 0 16px;
}
#capers-sc-welcome .capers-sc-welcome-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #f2f2f2;
}
#capers-sc-welcome .capers-sc-welcome-item:last-child { border-bottom: 0; }
#capers-sc-welcome .capers-sc-welcome-item img {
    width: 42px; height: 42px; flex: 0 0 auto; border-radius: 4px; object-fit: cover; background: #f4efea;
}
#capers-sc-welcome .capers-sc-welcome-item-name {
    flex: 1; min-width: 0; font-size: 0.78rem; line-height: 1.35; color: #333;
}
#capers-sc-welcome .capers-sc-welcome-item-qty { display: block; color: #999; font-size: 0.7rem; }
#capers-sc-welcome .capers-sc-welcome-item-price { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
#capers-sc-welcome .capers-sc-welcome-more { padding: 8px 10px; font-size: 0.75rem; color: #666; }
#capers-sc-welcome .capers-sc-welcome-total {
    display: flex; justify-content: space-between; padding: 9px 10px; background: #faf7f3;
    border-top: 1px solid #eee; font-size: 0.82rem; font-weight: 700;
}
#capers-sc-welcome #capers-sc-welcome-restore {
    display: block; width: 100%; min-height: 44px; margin: 0 0 10px;
}
#capers-sc-welcome .capers-sc-welcome-dismiss {
    display: block; width: 100%; min-height: 44px; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 0.78rem; color: #777; text-decoration: underline;
}
#capers-sc-welcome .capers-sc-welcome-fine { margin: 12px 0 0; font-size: 0.7rem; color: #666; }
#capers-sc-welcome button:disabled { opacity: .6; cursor: wait; }
#capers-sc-drawer .capers-sc-sched-note { font-size: 11px !important; color: #666; margin-top: 6px; }
#capers-sc-drawer .capers-sc-sched-note.warn { color: #c0392b !important; }

/* A box, not red text, so a delivery refusal is not read past. Ships [hidden]; a server answer reveals it. */
#capers-sc-drawer .capers-sc-area-note[hidden] { display: none; }
#capers-sc-drawer .capers-sc-area-note {
    margin-top: 10px; padding: 12px 14px; border-radius: 6px;
    font-size: 0.8125rem; line-height: 1.45; color: #888;
}
#capers-sc-drawer .capers-sc-area-note.refused {
    border: 1px solid #c0392b; background: #fdf3f2; color: #c0392b; font-weight: 600;
}

.pac-container { z-index: 100001 !important; max-width: calc(100vw - 16px) !important; box-sizing: border-box !important; overflow-x: hidden; }
.pac-item { white-space: normal; }

.capers-sc-savecart summary { cursor: pointer; font-size: 0.8rem; color: var( --capers-sc-button ); text-decoration: underline; list-style: none; }
.capers-sc-savecart summary::-webkit-details-marker { display: none; }
.capers-sc-savecart-hint { font-size: 0.75rem; color: #666; margin: 8px 0; }
.capers-sc-savecart-form input[hidden] { display: none; }
.capers-sc-savecart-form:has(input[hidden]) button { flex: 1; }
.capers-sc-savecart-change { margin: 8px 0 0; }
.capers-sc-savecart-change[hidden] { display: none; }
.capers-sc-savecart-change button {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 0.72rem; color: #888; text-decoration: underline;
}
.capers-sc-savecart-change button:hover { color: #111; }
.capers-sc-savecart-form { display: flex; gap: 6px; }
.capers-sc-savecart-form input { flex: 1; padding: 9px 11px; border: 1px solid #d5d5d5; border-radius: 7px; font-size: 0.82rem; box-sizing: border-box; }
.capers-sc-savecart-form button { padding: 9px 14px; background: #111; color: #fff; border: none; border-radius: 7px; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.capers-sc-savecart-form button:disabled { opacity: .6; cursor: wait; }
.capers-sc-savecart-msg { font-size: 0.75rem; margin-top: 8px; }
.capers-sc-savecart-msg.ok { color: #1e7e34; }
.capers-sc-savecart-msg.err { color: #c0392b; }

/* Phone: the same 900px as PHONE_MQ in side-cart.js. Desktop matches none of it. */
@media (max-width: 900px) {

    /* Same specificity as the desktop rule, wins on source order; the vh height must precede the dvh one. */
    #capers-sc-drawer {
        top: auto; bottom: 0; left: 0; right: 0;
        width: 100%; max-width: 100%;
        height: 92vh;
        height: 92dvh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
        transform: translateY(100%);
    }
    /* Wins on source order. Without it the sheet never reveals itself. */
    #capers-sc-drawer.capers-sc-open { transform: translateY(0); }

    #capers-sc-drawer::before {
        content: "";
        position: absolute;
        top: 8px; left: 50%;
        width: 36px; height: 4px;
        margin-left: -18px;
        border-radius: 2px;
        background: var( --capers-sc-surface );
        opacity: .6;
        pointer-events: none;
    }

    /* Clears the iOS home indicator; (1,1,0) beats both foot rules. */
    #capers-sc-drawer .capers-sc-foot {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    /* 16px stops the iOS focus zoom; min-height undoes the desktop min-height: 0. */
    #capers-sc-drawer .capers-sc-sched-input,
    #capers-sc-drawer .capers-sc-sched-select {
        font-size: 16px !important;
        min-height: 44px !important;
    }

    /* Cap the scheduler at 21% so it scrolls itself; never below its collapsed ~115px. */
    #capers-sc-drawer #capers-sc-sched {
        max-height: 21%;
        overflow-y: auto;
    }


    /* Block row so the children's flex: N !important is ignored. Not on .capers-sc-sched-row: Date/Time stays two-across. */
    #capers-sc-drawer .capers-sc-addr-parts { display: block; }
    #capers-sc-drawer .capers-sc-addr-parts .capers-sc-sched-field + .capers-sc-sched-field { margin-top: 6px; }

    /* box-sizing is set here because none of these sits inside #capers-sc-sched's border-box scope. */
    .capers-sc-head { padding: 12px 16px; }
    #capers-sc-close {
        box-sizing: border-box; min-width: 44px; min-height: 44px;
        display: flex; align-items: center; justify-content: center;
    }
    .capers-sc-qty button { box-sizing: border-box; width: 44px; height: 44px; }
    #capers-sc-drawer .capers-sc-remove, #capers-sc-drawer .capers-sc-coupon-remove, #capers-sc-drawer .capers-sc-saved-remove, #capers-sc-drawer .capers-sc-suggest-add { box-sizing: border-box; min-width: 44px; min-height: 44px; }
    #capers-sc-drawer .capers-sc-btn { box-sizing: border-box; min-height: 44px; }

    #capers-sc-toggle { min-width: 44px; box-sizing: border-box; }

}

@media (max-width: 480px) {
    .capers-sc-body { padding: 12px 16px; }
    .capers-sc-foot { padding: 8px 16px 10px; }
}

/* Hide Avada's hover mini-cart flyout; the body class mirrors the nav_integration setting. */
body.capers-sc-nav-integration li.fusion-menu-cart .fusion-menu-cart-items,
body.capers-sc-nav-integration li.avada-main-menu-cart .fusion-menu-cart-items { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    #capers-sc-drawer, #capers-sc-overlay { transition: none; }
}

/* Fallback for themes without WordPress's .screen-reader-text (Avada has one). Scoped to our own
   elements so it never reaches the theme's skip links. */
#capers-sc-live,
#capers-sc-drawer .screen-reader-text { border: 0; clip: rect( 1px, 1px, 1px, 1px ); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }