/* =============================================================================
   Bigscreen store — cart drawer skin (sections/eg-cart-drawer.liquid).

   The drawer is an EcomGraduates app section wearing Bootstrap's offcanvas and
   Dawn's .button/.quantity; its look came from beyond-store.css / beyond-copy.css,
   which predate the rebuild. This sheet re-dresses it in the store system —
   bevel corner language, off-white frames, Fragment Mono labels, the violet
   signal on the one CTA — without touching the app's markup or behaviour.

   Loads from INSIDE the section, immediately after its inline <style>, so it
   wins the cascade over base.css, beyond-*.css, bs-chrome.css AND the section's
   own block. Everything is scoped to #cart-drawer so the /cart page and the
   quick-view modal keep their existing styling.
   ============================================================================= */

/* ---- Panel ----------------------------------------------------------------
   Desktop: flush to three viewport edges, so there is no corner to shape — the
   panel stays square and the shape language lives on the objects inside it.
   Mobile: it IS a sheet with two visible top corners, so it gets the angle. */
@media only screen and (max-width: 991.98px) {
  #cart-drawer.offcanvas-end {
    border-radius: 3px 28px 0 0;
    corner-shape: round bevel round round;
  }
}

/* ---- One scroll, pinned checkout ------------------------------------------
   The section shipped as three stacked scroll regions: the items in a box that
   flexed down to ~130px once the footer took its 52vh, the upsell in a second
   box inside that footer, and the drawer itself. Five items showed two and a
   half, and what the customer was about to pay for hid behind the smallest
   scrollbar on the page. Now the drawer is the standard sheet: header pinned,
   ONE flexing scroll region (items first, "people also bought" below them —
   the upsell markup moved out of the footer for this), and the footer pinned
   at natural height so subtotal + checkout never leave the screen. The vh caps
   in the section's own CSS are dead once flex-basis does the sizing. */
#cart-drawer form { min-height: 0; }
#cart-drawer .offcanvas-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* the page must not scroll under the sheet */
}
#cart-drawer .offcanvas-footer {
  flex: 0 0 auto;
  max-height: none;
}
/* the section's mobile rule is `padding: 0px 12px 0px` — the checkout button
   sat flush on the sheet's bottom edge (and under the iPhone home bar) */
@media only screen and (max-width: 991.98px) {
  #cart-drawer .offcanvas-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* "More below" cue — the honest mobile version of a tooltip: a white fade over
   the scroll region's bottom edge while there is content beneath it, gone once
   the end is reached. First shipped as a scroll-driven animation
   (animation-timeline: scroll()) so nothing would need re-binding after the
   drawer's form re-renders — but Safari doesn't run scroll timelines, which is
   every iPhone, which is exactly where the cue matters. So: a class
   (.bs-more-below) toggled by the drawer section's own script, from listeners
   that live on document/#cart-drawer and therefore survive the re-renders. */
#cart-drawer .offcanvas-body::after {
  content: "";
  position: sticky; bottom: 0;
  display: block; height: 56px;
  margin-top: -56px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur, 300ms);
}
#cart-drawer .offcanvas-body.bs-more-below::after { opacity: 1; }

/* Persistent scroll indicator (built by the drawer section's script) — iOS
   only paints its overlay scrollbar while the finger moves, so a static sheet
   shows no sign the list continues. The drawer draws its own: a 3px thumb on
   the sheet's right edge, always there while the list overflows. The native
   scrollbar is hidden so desktop doesn't render two. */
#cart-drawer .offcanvas-body { scrollbar-width: none; }
#cart-drawer .offcanvas-body::-webkit-scrollbar { display: none; }
#cart-drawer .bs-scroll-rail {
  position: absolute; right: 5px; top: 0;
  width: 4px; z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur, 300ms);
  /* faint full-height track: the line itself says "this region scrolls",
     before the thumb's position says how far */
  background: rgba(10, 10, 12, .08);
  border-radius: 2px;
}
#cart-drawer .bs-scroll-rail.is-visible { opacity: 1; }
#cart-drawer .bs-scroll-thumb {
  width: 100%;
  border-radius: 2px;
  background: rgba(10, 10, 12, .5);   /* was .28/3px — real phones read that as nothing */
}

/* The chevron cue (built by the same script): a hairline arrow bobbing at the
   bottom centre of the list, on the fade, just above the subtotal divider —
   the explicit "scroll for more" the scrollbar only implies. Drawn like the
   hamburger: 1.5px hairlines in near-black, no glyph font. Bob is a 5px
   breathe, slow enough to invite rather than nag; reduced-motion gets it
   static. */
#cart-drawer .bs-scroll-cue {
  position: absolute; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 4px;                        /* room for the bob within the fade */
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur, 300ms);
}
#cart-drawer .bs-scroll-cue.is-visible { opacity: 1; }
#cart-drawer .bs-scroll-cue span {
  display: block;
  width: 11px; height: 11px;
  border-right: 1.5px solid rgba(10, 10, 12, .6);
  border-bottom: 1.5px solid rgba(10, 10, 12, .6);
  transform: rotate(45deg);
  animation: bsCueBob 1.6s ease-in-out infinite;
}
@keyframes bsCueBob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 5px; }
}
@media (prefers-reduced-motion: reduce) {
  #cart-drawer .bs-scroll-cue span { animation: none; }
}

/* ---- Header ---------------------------------------------------------------
   The close control gets a real 40px target on a bevel plate, matching the
   nav's ghost cart button rather than sitting as a bare 14px glyph. */
#cart-drawer .btn-close {
  box-sizing: border-box;
  width: 40px; height: 40px;
  padding: 0; margin: 0;
  background-color: transparent;
  background-size: 14px 14px;
  border-radius: 2px 2px 10px 2px;
  corner-shape: round round bevel round;
  transition: background-color var(--dur, 300ms);
}
#cart-drawer .btn-close:hover { background-color: var(--off-white); }
#cart-drawer .btn-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- Line-item frames -----------------------------------------------------
   The plate already hugs the render (the image carries its own #F4F3F3 field at
   whatever width the render is); all that changes is the corner. 8px round to
   the store's bevel, stepped by frame size the way the configurator's option
   thumbs are: 14px on the ~96px item frames, 10px on the ~56px add-on frames. */
#cart-drawer .cart-item__image {
  background: var(--off-white);
  border-radius: 3px 3px 14px 3px;
  corner-shape: round round bevel round;
}
#cart-drawer .addon .cart-item__image {
  border-radius: 2px 2px 10px 2px;
  corner-shape: round round bevel round;
}
@media only screen and (max-width: 991.98px) {
  #cart-drawer .cart-item__image {
    border-radius: 2px 2px 12px 2px;
    corner-shape: round round bevel round;
  }
}

/* the store's one secondary grey (#70777A), not the site's #787E81 */
#cart-drawer .product-title > div.product-option,
#cart-drawer .product-title + div > .product-option,
#cart-drawer .cart-delivery { color: #70777A; }

/* ---- Quantity select ------------------------------------------------------
   Was a 40px pill on nothing — an invisible control. Same off-white plate and
   #DFDFDF hover as every other tonal control in the store, on the bevel. */
#cart-drawer select.quantity__input {
  padding: 10px 40px 10px 16px;
  background-color: var(--off-white);
  border: 0;
  border-radius: 2px 2px 10px 2px;
  corner-shape: round round bevel round;
  font-family: var(--font-display);
  font-weight: 400; font-size: 16px; line-height: 20px;
  transition: background-color var(--dur, 300ms);
}
#cart-drawer select.quantity__input:hover { background-color: var(--hairline); }
#cart-drawer select.quantity__input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media only screen and (max-width: 991.98px) {
  #cart-drawer select.quantity__input { padding: 8px 34px 8px 14px; }
}

#cart-drawer cart-remove-button > a.button { color: #70777A; }
#cart-drawer cart-remove-button > a.button:hover { color: #000; }

/* ---- Totals block ---------------------------------------------------------
   These two ran .font-label, which asks for weight 600 from a family where only
   Roman exists — synthetic bold, which the store never uses. Roman 400 fixes
   that, and the metrics stay where they were.
   NOT the mono/uppercase Label treatment (tried, reverted — Max's call): these
   are sentence-case names sitting next to prose values ("3-4 weeks"), not
   instrument labels on a caliper readout, and setting them in caps made the
   quietest row in the drawer the loudest. */
#cart-drawer .cart-total > .font-label,
#cart-drawer .cart-delivery > .font-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px; line-height: 22px;
  letter-spacing: .02em;
  text-transform: none;
  color: #70777A;
}

/* The subtotal row is the pinned area's HEADER. Once the upsell moved into the
   scroll, the pinned block needed to announce itself as "the order area" — but
   there is no translated string for a literal "Order summary" heading, and a
   hardcoded one would ship English to ~40 markets. "Estimated subtotal" is
   already there, already translated (cart metaobject), and already the first
   line: so it does the job — label in black instead of the quiet grey, price
   stepped up to the product page's total register (.bsp-total, Subhead 32/40 →
   26/32 on mobile, tabular). The ship-date row below stays grey, which is what
   makes this row read as the header. */
#cart-drawer .cart-total > .font-label {
  font-size: 16px; line-height: 20px;   /* Detail 16/20, same as .bsp-ship-label */
  color: #000;
}
#cart-drawer #cart-subtotal-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px; line-height: 40px;
  font-variant-numeric: tabular-nums;
  color: #000;
}
@media only screen and (max-width: 991.98px) {
  #cart-drawer #cart-subtotal-value { font-size: 26px; line-height: 32px; }
}

/* ---- Buttons --------------------------------------------------------------
   Dawn draws its button border and shadow with ::before / ::after rings that
   still use --buttons-radius, so they have to be switched off before a beveled
   fill reads clean — otherwise a rounded ghost outline floats over the angle. */
#cart-drawer .button::before,
#cart-drawer .button::after { display: none; }
#cart-drawer .button:focus,
#cart-drawer .button:focus-visible { box-shadow: none; }

/* Check out — the drawer's one action, so it carries the violet signal in the
   same shape and mono voice as "Order now" in the nav and on the product page.
   Full width: it now lines up with the item rows above it instead of sitting on
   its own 82.67% measure. */
#cart-drawer .offcanvas-footer .cart__checkout-button {
  width: 100%;
  height: 56px; min-height: 56px;
  margin: 0;
  padding: 0 24px;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 2px 2px 14px 2px;
  corner-shape: round round bevel round;
  font-family: var(--font-mono);
  font-size: 15px; line-height: 22px;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background-color var(--dur, 300ms);
}
/* Hover goes to black, not to --brand-deep. #4D1EF7 → #4000FF is a step of
   saturation at the same value, so on a violet this size it reads as no answer
   at all; black is an unmistakable one, keeps the white label, and introduces
   no second hue. It is also what this brand's buy button used to be — the old
   storefront's "Order now" was a black pill. Paired with .bsp-order in
   bs-product.css: the two buttons that take money share one hover. */
#cart-drawer .offcanvas-footer .cart__checkout-button:hover {
  background: #000;
  color: #fff;
}
#cart-drawer .offcanvas-footer .cart__checkout-button:focus-visible {
  outline: 2px solid #000; outline-offset: 3px;
}

/* Secondary actions (View cart, Save note) — tonal plate, no outline ring */
#cart-drawer .offcanvas-footer .button--secondary,
#cart-drawer #eg-cart-drawer-note .button--secondary {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  background: var(--off-white);
  color: #000;
  border: 0;
  border-radius: 2px 2px 12px 2px;
  corner-shape: round round bevel round;
  font-family: var(--font-display);
  font-weight: 400; font-size: 16px; line-height: 20px;
  letter-spacing: 0; text-transform: none;
  transition: background-color var(--dur, 300ms);
}
#cart-drawer .offcanvas-footer .button--secondary:hover,
#cart-drawer #eg-cart-drawer-note .button--secondary:hover { background: var(--hairline); }

/* Financing / tax fine print: the store's grey, and the Terms link on the
   violet signal so it reads as the one thing to click in that paragraph. */
#cart-drawer .offcanvas-footer .font-detail,
#cart-drawer .cart-upsell .font-detail { color: #70777A; }   /* .cart-upsell: the tagline kept this grey when the upsell left the footer */
#cart-drawer .offcanvas-footer .font-detail a { color: var(--brand); text-decoration: none; }
#cart-drawer .offcanvas-footer .font-detail a:hover { text-decoration: underline; }

/* ---- "People also bought" add button --------------------------------------
   A button wearing .quantity__input because it sits in the same slot as the
   quantity select. Tonal plate, no hairline ring — separated from the white
   panel by fill, and escalating to the black solid on hover the way the story
   band's slider arrows do. Mono uppercase is what distinguishes it from the
   quantity select it shares a class with: this one is an action, not a value.
   Deliberately not violet: the drawer spends its one signal on Check out. */
#cart-drawer .btn-add-cart button.quantity__input {
  padding: 11px 20px;
  background-color: var(--off-white);
  color: #000;
  border: 0;
  border-radius: 2px 2px 10px 2px;
  corner-shape: round round bevel round;
  font-family: var(--font-mono);
  font-size: 12px; line-height: 16px;
  letter-spacing: .06em; text-transform: uppercase;
  /* the row squeezes this cell before it squeezes the product title, so without
     this the label stacks one word per line inside a 38px-tall control */
  white-space: nowrap;
  transition: background-color var(--dur, 300ms), color var(--dur, 300ms);
}
#cart-drawer .btn-add-cart button.quantity__input:hover {
  background-color: #0a0a0c; color: #fff;
}
#cart-drawer .btn-add-cart button.quantity__input:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* ---- Cart note textarea ---- */
#cart-drawer #eg-cart-drawer-note .text-area {
  background: var(--off-white);
  border: 0;
  border-radius: 3px 3px 14px 3px;
  corner-shape: round round bevel round;
  font-family: var(--font-display);
  font-weight: 400;
}

/* ---- Bevel fallback — no corner-shape support (Safari/iOS, Firefox): the
   bevel radius would render as a fat curve. Fill surfaces get the real cut
   via clip-path; convention, polygon template, and the outline-ring
   exception live in bs-chrome.css ("BEVEL FALLBACK"). ---- */
@supports not (corner-shape: round round bevel round) {
  #cart-drawer .btn-close { border-radius: 2px; }
  #cart-drawer .cart-item__image {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 14px), calc(100% - 14px) 100%, -80px calc(100% + 80px));
  }
  #cart-drawer .addon .cart-item__image {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 10px), calc(100% - 10px) 100%, -80px calc(100% + 80px));
  }
  #cart-drawer select.quantity__input,
  #cart-drawer .btn-add-cart button.quantity__input {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 10px), calc(100% - 10px) 100%, -80px calc(100% + 80px));
  }
  #cart-drawer .offcanvas-footer .cart__checkout-button {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 14px), calc(100% - 14px) 100%, -80px calc(100% + 80px));
  }
  #cart-drawer #eg-cart-drawer-note .button--secondary {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 12px), calc(100% - 12px) 100%, -80px calc(100% + 80px));
  }
  #cart-drawer #eg-cart-drawer-note .text-area {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 14px), calc(100% - 14px) 100%, -80px calc(100% + 80px));
  }
  /* mobile: sheet cut is on the TOP-right (28px, mirrored polygon); item
     frames step down to 12px. Last in the block so it wins the base rules. */
  @media only screen and (max-width: 991.98px) {
    #cart-drawer.offcanvas-end {
      border-radius: 3px 3px 0 0;
      clip-path: polygon(-80px calc(100% + 80px), -80px -80px, calc(100% - 28px) -80px, calc(100% - 28px) 0, 100% 28px, calc(100% + 80px) 28px, calc(100% + 80px) calc(100% + 80px));
    }
    #cart-drawer .cart-item__image {
      border-radius: 2px;
      clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 12px), calc(100% - 12px) 100%, -80px calc(100% + 80px));
    }
  }
}