/* The demo interaction layer's stylesheet: DEMO-CONTRACT.md §B, generic.
 *
 * Pairs with interaction-layer.js. Every color and width is a custom
 * property with a neutral default, so a page paints the panels in its own
 * hues by setting the variables in its own stylesheet, never by editing this
 * file. The panels are fixed and hidden at rest, so a page measures the same
 * with the layer on: nothing here touches the flow. */

:root {
  --stc-panel-bg: Canvas;
  --stc-panel-ink: CanvasText;
  --stc-panel-width: min(420px, 88vw);
  --stc-overlay: rgba(0, 0, 0, .55);
  --stc-focus: currentColor;
  --stc-hover-opacity: .85;
  --stc-error: currentColor;
  --stc-z: 900;
}

/* ---------- anchors (B3) ---------- */
html { scroll-behavior: smooth; }

/* ---------- overlay and panels (B2, B4, B11) ---------- */
body.stc-locked { overflow: hidden; }

[data-overlay] {
  position: fixed; inset: 0; z-index: var(--stc-z);
  background: var(--stc-overlay);
  opacity: 0; transition: opacity .28s ease;
}
[data-overlay].is-open { opacity: 1; }
[data-overlay][hidden], [data-nav-drawer][hidden], [data-cart-drawer][hidden], [data-modal][hidden] { display: none; }

[data-nav-drawer], [data-cart-drawer] {
  position: fixed; top: 0; bottom: 0; z-index: calc(var(--stc-z) + 10);
  /* border-box regardless of the page's reset: a page without Tailwind's
     preflight is content-box, and the padding then widened a 343px drawer to
     391px -- the whole viewport, with no backdrop left to click. */
  box-sizing: border-box;
  width: var(--stc-panel-width);
  background: var(--stc-panel-bg); color: var(--stc-panel-ink);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 0 40px rgba(0, 0, 0, .3);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
[data-nav-drawer] { left: 0; transform: translateX(-100%); }
[data-cart-drawer] { right: 0; transform: translateX(100%); }
[data-nav-drawer].is-open, [data-cart-drawer].is-open { transform: none; }

[data-modal] {
  position: fixed; inset-inline: 0; top: 0; z-index: calc(var(--stc-z) + 10);
  box-sizing: border-box;
  background: var(--stc-panel-bg); color: var(--stc-panel-ink);
  transform: translateY(-100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
[data-modal].is-open { transform: none; }

/* ---------- cart internals (B4) ---------- */
.stc-cart-lines { list-style: none; margin: 0; padding: 0; }
.stc-cart-line {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: .75rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.stc-cart-line p { margin: 0; }
.stc-cart-line-name { font-weight: 700; }
.stc-cart-line-each { opacity: .75; font-size: .85em; margin-top: .2em; }
.stc-cart-line-side { text-align: right; }
.stc-cart-line-total { font-weight: 700; }
.stc-qty {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: .5rem;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 6px; padding: .15rem .5rem;
}
.stc-qty button, .stc-remove, .stc-checkout {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0;
}
.stc-qty button { line-height: 1; padding: .1rem .3rem; font-size: 1.1em; }
.stc-qty [data-qty-value] { min-width: 1.2em; text-align: center; }
.stc-remove { margin-top: .5rem; font-size: .85em; text-decoration: underline; opacity: .8; }
.stc-cart-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid currentColor; }
.stc-subtotal { display: flex; justify-content: space-between; font-weight: 700; margin: 0 0 .75rem; }
.stc-checkout {
  display: block; width: 100%; padding: .8rem 1rem; border: 2px solid currentColor; border-radius: 6px;
  font-weight: 700; text-align: center;
}
a.stc-checkout { text-decoration: none; color: inherit; }
[data-checkout][disabled], [data-checkout][aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
[data-checkout][aria-disabled="true"] { pointer-events: none; }
/* Checkout lands somewhere (B4): the preview panel, when the drawer names no store. */
.stc-checkout-panel {
  margin-top: .75rem; padding: .75rem .9rem; border: 1px dashed currentColor; border-radius: 6px;
  font-size: .9em; line-height: 1.4;
}
.stc-checkout-panel[hidden] { display: none; }
.stc-checkout-panel p { margin: 0; }
.stc-checkout-panel-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: .6rem !important; }
.stc-checkout-reply { font-weight: 700; color: inherit; text-decoration: underline; }
.stc-checkout-reply[hidden] { display: none; }
.stc-checkout-back {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; opacity: .8;
}
.stc-cart-empty[hidden] { display: none; }

/* ---------- carousels (B6) ---------- */
[data-carousel-track] { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
[data-carousel-track] img { -webkit-user-drag: none; }
[data-carousel]:focus-visible { outline: 3px solid var(--stc-focus); outline-offset: 4px; }
/* Overlaid, not in flow: the dots add no height, so the source's boxes hold. */
.stc-dots {
  position: absolute; left: 0; right: 0; bottom: .5rem; z-index: 5;
  display: flex; justify-content: center; gap: 9px; pointer-events: none;
}
.stc-dots[hidden] { display: none; }
.stc-dot {
  width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0;
  background: currentColor; opacity: .35; cursor: pointer; pointer-events: auto;
  transition: opacity .2s, transform .2s;
}
.stc-dot[aria-current="true"] { opacity: 1; transform: scale(1.25); }
/* A token, not a literal, because how far a source dims its spent control is
   a brand value and often a *tiered* one -- one page reads 0.35 at desktop and
   1 at the narrow tier. A page-side rule cannot simply restate this: it would
   carry the same specificity and lose the source-order tie, since this sheet
   loads after the page's own. Setting the property on the element wins that
   tie whatever the order, which is the pattern the panels already use. */
[data-carousel-prev][disabled], [data-carousel-next][disabled] {
  opacity: var(--stc-disabled-opacity, .4); cursor: default;
}

/* ---------- newsletter (B8) ---------- */
[data-newsletter-message][data-state="error"] { color: var(--stc-error); }
[data-newsletter-message]:empty { visibility: hidden; }

/* ---------- states (B9) ---------- */
/* Zero-specificity fallbacks: a page's own hover and focus rules win on
   equal properties; these only fill in where the page declared none. An
   element carrying a Tailwind `hover:` utility, wrapping one, or marked
   `data-own-hover`, keeps its own hover untouched. */
:where(a[href], button:not([disabled]), summary, [role="button"], input, select, textarea):focus-visible {
  outline: 3px solid var(--stc-focus); outline-offset: 3px;
}
:where(a[href], button:not([disabled]), summary, [role="button"]):hover { opacity: var(--stc-hover-opacity); }
:where(a[href], button, summary, [role="button"]) { transition: opacity .18s ease; }
:where([class*="hover:"], [data-own-hover], :has(> [class*="hover:"])) { --stc-hover-opacity: 1; }

/* ---------- reduced motion (B10) ---------- */
@media (prefers-reduced-motion: reduce) {
  /* !important: the page's own `html { scroll-behavior: smooth }` usually
     sits later in the cascade, and B3 asks for auto under reduced motion. */
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}