/* Cart page + drawer.
 *
 * Layout targets the original Archetype theme's cart page:
 *   - Single page-width column capped at 1200px.
 *   - Table-like row of line items: thumbnail | name+meta | qty
 *     | unit price | line total | remove.
 *   - Subtotal + "Check out" CTA pinned to the right column on
 *     desktop, stacked below the line items on mobile.
 *   - Cream section background to blend in with the rest of the
 *     storefront.
 */

.cart-page {
    width: 100%;
    background: #faf8f5;
    padding: 60px 24px 80px;
    min-height: 60vh;
}

.cart-page__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.cart-page__header {
    text-align: center;
    margin-bottom: 40px;
}

.cart-page__title {
    font-family: "Tenor Sans", "Cormorant Garamond", sans-serif;
    font-size: 36px;
    font-weight: 400;
    color: #000;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cart-page__flash {
    margin-bottom: 24px;
    padding: 12px 16px;
    background: #e9f5ec;
    border: 1px solid #2e7d32;
    color: #2e7d32;
    font-family: "Trirong", serif;
    font-size: 14px;
}

.cart-page__flash--error {
    background: #fdecea;
    border-color: #c62828;
    color: #c62828;
}

.cart-page__grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}

.cart-page__lines {
    background: #fff;
    border: 1px solid #e8e6e1;
}

.cart-line {
    display: grid;
    grid-template-columns: 100px 1fr auto auto auto;
    gap: 20px;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e8e6e1;
}

.cart-line:last-child {
    border-bottom: none;
}

.cart-line__image {
    width: 100px;
    height: 100px;
    background: #f5f3ee;
    overflow: hidden;
}

.cart-line__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-line__meta {
    min-width: 0;
}

.cart-line__title {
    font-family: "Trirong", serif;
    font-size: 15px;
    color: #1c1d1d;
    margin: 0 0 4px;
    font-weight: 600;
    line-height: 1.4;
}

.cart-line__title a {
    color: inherit;
    text-decoration: none;
}

.cart-line__title a:hover {
    text-decoration: underline;
}

.cart-line__variant {
    font-family: "Trirong", serif;
    font-size: 12px;
    color: #777;
}

.cart-line__stock {
    margin-top: 6px;
    font-family: "Trirong", serif;
    font-size: 12px;
    color: #2e7d32;
}

.cart-line__stock--error {
    color: #c62828;
    font-weight: 600;
}

.cart-line--overstock {
    background: #fff8f6;
}

.cart-line__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d6d2cb;
    background: #fff;
}

.cart-line__qty-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    color: #1c1d1d;
}

.cart-line__qty-input {
    width: 48px;
    height: 32px;
    border: 0;
    border-left: 1px solid #d6d2cb;
    border-right: 1px solid #d6d2cb;
    text-align: center;
    font-family: "Trirong", serif;
    font-size: 14px;
}

.cart-line__price,
.cart-line__total {
    font-family: "Trirong", serif;
    font-size: 14px;
    color: #1c1d1d;
    white-space: nowrap;
}

.cart-line__total {
    font-weight: 600;
}

.cart-line__remove {
    background: none;
    border: 0;
    cursor: pointer;
    color: #777;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}

.cart-line__remove:hover {
    color: #c62828;
}

.cart-page__summary {
    background: #fff;
    border: 1px solid #e8e6e1;
    padding: 24px;
    position: sticky;
    top: 24px;
}

.cart-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    font-family: "Trirong", serif;
    font-size: 14px;
    color: #1c1d1d;
}

.cart-summary__row--total {
    border-top: 1px solid #e8e6e1;
    padding-top: 12px;
    margin-top: 16px;
    font-size: 16px;
    font-weight: 600;
}

.cart-summary__notice {
    margin: 16px 0;
    font-family: "Trirong", serif;
    font-size: 12px;
    color: #777;
    text-align: center;
    line-height: 1.5;
}

.cart-summary__notice--error {
    color: #c62828;
    font-weight: 600;
}

.cart-summary__cta {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    font-family: "Trirong", serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4.2px;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.cart-summary__cta:hover {
    opacity: 0.85;
}

.cart-summary__cta--disabled {
    background: #d6d2cb;
    border-color: #d6d2cb;
    cursor: not-allowed;
    pointer-events: none;
}

.cart-summary__continue {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-family: "Trirong", serif;
    font-size: 13px;
    color: #1c1d1d;
    text-decoration: underline;
}

.cart-page__empty {
    background: #fff;
    border: 1px solid #e8e6e1;
    padding: 60px 24px;
    text-align: center;
    font-family: "Trirong", serif;
    color: #777;
}

.cart-page__empty p {
    margin: 0 0 16px;
    font-size: 15px;
}

.cart-page__empty a {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 24px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    font-family: "Trirong", serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4.2px;
    text-decoration: none;
}

@media (max-width: 989px) {
    .cart-page__grid {
        grid-template-columns: 1fr;
    }
    .cart-line {
        grid-template-columns: 80px 1fr auto;
        grid-template-areas:
            "image meta total"
            "image qty remove";
        gap: 12px;
    }
    .cart-line__image { grid-area: image; width: 80px; height: 80px; }
    .cart-line__meta { grid-area: meta; }
    .cart-line__price { display: none; }
    .cart-line__qty { grid-area: qty; }
    .cart-line__total { grid-area: total; }
    .cart-line__remove { grid-area: remove; }
}

/* --- Cart drawer (right-side slide-in). Mirrors the original's
 * `.drawer--right` / `.drawer__header` / `.drawer__inner` /
 * `.drawer__footer` class names so the existing CSS in `theme.css`
 * does most of the heavy lifting. --- */
.cart-drawer__lines {
    padding: 0;
}

.cart-drawer__line {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #e8e6e1;
}

.cart-drawer__line-image {
    width: 64px;
    height: 64px;
    background: #f5f3ee;
    overflow: hidden;
}

.cart-drawer__line-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-drawer__line-meta {
    min-width: 0;
    font-family: "Trirong", serif;
}

.cart-drawer__line-name {
    font-size: 13px;
    color: #1c1d1d;
    margin: 0 0 4px;
    font-weight: 600;
    line-height: 1.3;
}

.cart-drawer__line-name a {
    color: inherit;
    text-decoration: none;
}

.cart-drawer__line-name a:hover {
    text-decoration: underline;
}

.cart-drawer__line-price {
    font-size: 12px;
    color: #777;
    margin-bottom: 6px;
}

.cart-drawer__line-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d8d4ca;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 2px;
}

.cart-drawer__qty-btn {
    background: #f5f3ee;
    border: 0;
    padding: 0;
    width: 26px;
    height: 26px;
    font-size: 14px;
    line-height: 1;
    color: #1c1d1d;
    cursor: pointer;
    font-family: inherit;
}

.cart-drawer__qty-btn:hover {
    background: #e8e6e1;
}

.cart-drawer__qty-btn:disabled {
    color: #b8b8b8;
    cursor: not-allowed;
    background: #f5f3ee;
}

.cart-drawer__qty-input {
    width: 36px;
    height: 26px;
    text-align: center;
    border: 0;
    border-left: 1px solid #d8d4ca;
    border-right: 1px solid #d8d4ca;
    font-family: inherit;
    font-size: 12px;
    color: #1c1d1d;
    background: #fff;
    padding: 0;
    -moz-appearance: textfield;
}

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

.cart-drawer__qty-input:focus {
    outline: none;
    background: #fafaf6;
}

.cart-drawer__line-remove {
    background: none;
    border: 0;
    cursor: pointer;
    color: #777;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.cart-drawer__line-remove:hover {
    color: #c62828;
    background: #fdf0f0;
}

.cart-drawer__footer {
    padding: 16px;
    border-top: 1px solid #e8e6e1;
}

.cart-drawer__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: "Trirong", serif;
    font-size: 14px;
    color: #1c1d1d;
    margin-bottom: 8px;
}

.cart-drawer__notice {
    margin: 0 0 12px;
    font-family: "Trirong", serif;
    font-size: 11px;
    color: #777;
    text-align: center;
    line-height: 1.4;
}

.cart-drawer__checkout {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    font-family: "Trirong", serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4.2px;
    text-align: center;
    text-decoration: none;
}

.cart-drawer__empty {
    padding: 60px 24px;
    text-align: center;
    font-family: "Trirong", serif;
    color: #777;
}

/* --- Header cart icon bubble.
 *
 * A small red dot that sits on top of the bag icon when the cart
 * is non-empty. We intentionally do NOT show a numeric count —
 * the original Archetype theme's bubble was a flat 15×15 red dot,
 * and keeping it as a non-textual dot avoids the layout shift
 * that would otherwise occur when the count goes from 1 digit to
 * 2 digits (e.g. "9" → "10").
 *
 * Theme.css already defines a `.cart-link__bubble` / `--visible`
 * rule set at `top: 50%; right: 0;` with a 15×15 circle, but it
 * leaves the visual treatment to that stylesheet. We redefine
 * the properties here and mark them `!important` so the cart.css
 * version wins regardless of which file parses last.
 */
.cart-link {
    position: relative;
    display: inline-flex;
}

/* Align the icon with the rest of the header nav so it sits on the
 * same baseline as the user icon. Theme.css marks the link as
 * `display: inline-block` but doesn't set a baseline rule, so the
 * bag-minimal SVG (28px) ends up taller than the user icon (24px)
 * and the link wrapping it stretches to 49px while the user link
 * clamps to 43px. We force a flex-center so the SVG sits in the
 * middle of the link and the link itself sizes to the SVG.
 */
.site-nav__link--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cart-link__bubble {
    position: absolute !important;
    /* Anchor to the bottom-right corner of the icon so the dot
     * reads as a "notification badge on the bag" rather than a
     * stray pixel at the top of the link. */
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 14px !important;
    height: 14px !important;
    background-color: var(--colorCartDot, #ff4f33) !important;
    border: 2px solid var(--colorBody, #fff) !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    pointer-events: none;
    /* Pulse animation so the bubble grabs the eye rather than
     * looking like a stray pixel. The Archetype theme's original
     * commerce-stylesheet did the same — a slow outward pulse
     * looped infinitely while the cart was non-empty. We reuse
     * the timing because it's familiar to anyone who has shopped
     * the canonical Shopify theme. */
    animation: cartBubblePulse 1.6s ease-in-out infinite;
}

/* The pulsing dot — emulates the cycle Shopify cart-attention
 * indicators use elsewhere on the storefront. We animate two
 * properties concurrently so the breathing read stays smooth:
 *   - `transform: scale(...)` — the actual expansion that
 *     catches the eye.
 *   - `box-shadow spread / opacity` — a faux ring that radiates
 *     outward and fades. */
@keyframes cartBubblePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 79, 51, 0.55);
    }
    50% {
        transform: scale(1.12);
        box-shadow: 0 0 0 6px rgba(255, 79, 51, 0);
    }
}

/* Drawer fade-in stagger for inner sections.
 *
 * The original Shopify Archetype theme fades the inner sections up
 * in sequence as the drawer slides in. We mirror that here so the
 * contents don't pop in at full opacity the moment the panel
 * reaches its resting position.
 *
 * Implementation notes:
 *   - We use `animation` (not `transition`) because animations are
 *     the only way to honour a `delay` from the very first frame.
 *     A `transition` with `transition-delay` only takes effect when
 *     the element is already in its starting state and then changes
 *     — here, the drawer inner starts at `opacity: 0` and the
 *     `.drawer--is-open` class is added simultaneously, so the
 *     delay is dropped. Animations don't have that problem: the
 *     `backwards` fill-mode keeps the keyframe-0 state until the
 *     delay elapses.
 *   - We neutralise theme.css's `.appear-animation` rules with
 *     `animation: none` so they don't fight ours.
 *   - We slow the panel slide down to 0.45s so the stagger reads
 *     naturally against it.
 *   - Closing direction: the `animation` only plays once on the
 *     forward direction. On close, the drawer slides out and the
 *     contents stay at full opacity until the next open. To get a
 *     snappy close we fade everything back out via a `transition`
 *     on `opacity` triggered by the missing `.drawer--is-open`
 *     class, so the reverse path is in lockstep with the slide-out.
 */
html #CartDrawer .drawer__inner > * {
    /* Reset every animation property individually so the
     * `none` here can't clobber the per-child keyframe we set
     * below. The Archetype theme adds an `.appear-animation`
     * class on the drawer footer; we need to silence it
     * without disabling our own animation on open.
     *
     * Note: no `!important` on these — the open-state rule
     * below has the higher specificity (it also matches
     * `.drawer--is-open`) and needs to win for the keyframe
     * to apply. */
    animation-name: none;
    animation-duration: 0s;
    animation-delay: 0s;
    opacity: 0;
    transition: opacity 0.2s ease;
}

html #CartDrawer.drawer--is-open .drawer__inner > * {
    opacity: 1;
    animation-name: cartDrawerFadeUp;
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-fill-mode: backwards;
    /* Force the animation to restart every time the drawer
     * re-opens (the keyframe is otherwise cached and skipped
     * when the browser thinks the element already ran it). */
    animation-iteration-count: 1;
}

@keyframes cartDrawerFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger timing — each top-level section waits a bit longer
 * than the previous so the contents settle in one after the other,
 * matching the cadence of the Shopify Archetype theme. */
html #CartDrawer.drawer--is-open .drawer__inner > *:nth-child(1) { animation-delay: 0.20s; }
html #CartDrawer.drawer--is-open .drawer__inner > *:nth-child(2) { animation-delay: 0.35s; }
html #CartDrawer.drawer--is-open .drawer__inner > *:nth-child(3) { animation-delay: 0.50s; }
html #CartDrawer.drawer--is-open .drawer__inner > *:nth-child(4) { animation-delay: 0.65s; }

/* The Archetype theme sets the drawer's resting position on
 * `right: -450px` (off-screen right). When `--is-open` is
 * toggled, it adds `transform: translate(-450px)` to slide the
 * panel left into view. Theme.css's desktop rule is bundled
 * inside a media-query minified so aggressively that our
 * environment only sees the mobile default `translate(-350px)`,
 * leaving the panel still mostly off-screen at desktop sizes.
 * We mirror the desktop translation here. */
/* Force the drawer to be display:block at all times so the
 * slide transition actually runs. Theme.css sets
 * `.drawer { display: none }` and toggles it to `block` inside
 * the same rule that adds `transform: translate(...)`. When
 * `display` flips from `none` to `block` in the same paint
 * frame as the transform change, the browser skips the
 * transition — the element is treated as "just mounted", not
 * as "this element changed properties". That is why the panel
 * appears to pop in instantly even with transition-duration set
 * to 1.8s.
 *
 * Fix: keep the drawer `display: block` permanently. It still
 * sits off-screen via `right: -450px` while closed, so visually
 * nothing changes — but the transition engine now sees a real
 * `transform: none → translate(-450px)` swap and animates it.
 *
 * We also nudge it behind the page (z-index lower than header)
 * and turn pointer-events off so the off-screen invisible
 * drawer can't accidentally swallow clicks while closed. */
html #CartDrawer {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
}

html #CartDrawer.drawer--is-open {
    visibility: visible;
    pointer-events: auto;
}

@media only screen and (min-width: 769px) {
    html #CartDrawer.drawer--right.drawer--is-open {
        transform: translate(-450px);
    }
}

/* Slow the panel slide down so the fade-in reads naturally
 * against it. The Shopify original uses a 0.45s panel slide
 * with a faster inner fade; we lengthen the panel to 1.2s so
 * the slide is clearly readable - the original feels rushed
 * against the slower inner content.
 *
 * Specificity note: theme.css writes
 * `.drawer--right.drawer--is-open { transition-duration: 0.45s }`
 * which beats a bare `#CartDrawer` rule on its own. We mirror
 * the full selector here — `.drawer--right.drawer--is-open` plus
 * the ID — so the ID specificity adds without removing the class
 * chain the original relied on. */
html #CartDrawer.drawer--right.drawer--is-open,
html #CartDrawer.drawer--right,
html #CartDrawer {
    transition-duration: 1s !important;
    transition-delay: 0s !important;
}

/* Closing animation needs its own duration.
 *
 * The opening rule above uses `!important` to win over theme.css's
 * `transition-duration: 0.45s`. When the drawer closes, theme.css
 * strips the `drawer--is-open` class but keeps the same drawer in
 * the DOM, so the transition kicks in on the way back to the
 * resting off-screen position.
 *
 * With `!important` set globally, the closing slide also gets the
 * 1s duration — which is what we want here. If we ever want a
 * faster close (snappy dismiss), it would belong in a separate
 * non-!important rule for the closed state. */

/* Backdrop overlay opacity.
 *
 * Theme.css fades the `:after` overlay up to opacity 0.6, which
 * over the white `--colorModalBg` reads as a near-full grey wash
 * that buries the underlying storefront. The original Shopify
 * Archetype theme used 0.6 because it expected dark imagery
 * beneath, but our storefront is cream/white and the heavy wash
 * hides the products and header entirely.
 *
 * We override the keyframe at the cart-drawer scope only so the
 * newsletter popup, modal dialogs, etc. keep their original
 * behaviour. The new value lands at 0.25 — a "soft focus" tint
 * that lets the storefront show through while still cueing the
 * user that the drawer has focus. */
@keyframes cartDrawerOverlayOn {
    0% { opacity: 0; }
    to { opacity: 0.25; }
}

@keyframes cartDrawerOverlayOff {
    0% { opacity: 0.25; }
    to { opacity: 0; }
}

body.js-drawer-open .main-content::after,
body.js-drawer-open-cart .main-content::after {
    animation: cartDrawerOverlayOn 0.6s forwards !important;
}

body.js-drawer-closing .main-content::after {
    animation: cartDrawerOverlayOff 0.4s forwards !important;
}


/* Visibility:
 *
 * The bubble is a non-textual dot — its presence alone signals
 * "cart is non-empty". We rely on the `--visible` class which:
 *   - Server-renders with it set when itemCount > 0.
 *   - JS toggles it after every AJAX add/update/remove.
 *
 * When hidden, the bubble must be display:none (the original
 * theme.css already does this for `.cart-link__bubble`). We
 * re-state it here for clarity.
 */
.cart-link__bubble {
    display: none;
}

.cart-link__bubble--visible {
    display: block !important;
}

/* Empty-state visibility for the cart drawer.
 *
 * The server-rendered markup has two siblings inside the drawer:
 *   - `.drawer__inner` (line items + Subtotal + Checkout button)
 *   - `.drawer__cart-empty` ("Your cart is currently empty" message)
 *
 * The `#CartDrawer` element carries an `is-empty` class while the
 * cart has zero items — both server-rendered at first paint, and
 * toggled by /js/cart.js after every AJAX refresh. The original
 * Shopify Archetype theme hides the inner block and shows the empty
 * block in this state (see theme.css `.drawer.is-empty .drawer__inner`).
 *
 * Without these rules, both blocks render side-by-side — Subtotal
 * and the Checkout button stay visible even when the cart is empty,
 * which is visually wrong and confusing ("checkout with no items?").
 * We mirror the canonical Archetype behaviour here. */
html #CartDrawer.is-empty .drawer__inner {
    display: none !important;
}

html #CartDrawer.is-empty .drawer__cart-empty {
    display: block !important;
}

/* Defensive: when the cart is NOT empty, the empty-state block must
 * not be visible. Without this, an old `.is-empty` toggle race (e.g.
 * the AJAX refresh setting `is-empty` after `drawer__cart-empty` has
 * already been shown) could leave the empty message visible alongside
 * the line items. The Archetype theme has the same rule using the
 * `is-open` class; we use a positive selector so the rule reads
 * clearly. */
html #CartDrawer:not(.is-empty) .drawer__cart-empty {
    display: none !important;
}

/* Suppress the vertical scrollbar on the empty-state scrollable area.
 *
 * `.drawer__cart-empty > .drawer__scrollable` is a vestigial wrapper
 * around the "Your cart is currently empty" message. The Archetype
 * theme's vendor CSS sets `overflow-y: auto` on every `.drawer__scrollable`
 * so the line-items list can scroll vertically when it overflows the
 * drawer height. But the empty-state block contains only one line of
 * static text — the rule still triggers a 3px scrollbar gutter next to
 * the message, which looks wrong ("why is there a scroller next to a
 * single line of text?"). The same wrapper inside `.drawer__inner`
 * keeps its overflow behaviour so item lists still scroll. */
html #CartDrawer.is-empty .drawer__cart-empty .drawer__scrollable {
    overflow: visible !important;
}