/* =========================================================================
   Wicked Pines — store chrome for /shop/, /cart/, /custom/ and the Site
   Manager pages
   -------------------------------------------------------------------------
   Loaded THIRD, after /pines-base.css (her tokens, the masthead) and
   /pines.css (the stage). It does four things:

     1. Aliases her --pw-* tokens into the --wp-* names that shop.css,
        cart.css and admin.css read. Those three sheets came from
        standardcontraband.com, which in turn came from printedwicked.com,
        and all three were written against the same token NAMES (void / bone
        / brass / rule / display / body / mono) with the prefix swapped. So
        "brass" here is her frost — moonlight — not brass. The name is kept
        so the sheets port without a rewrite; the value is hers.

     2. Opts a page into the stage with class="wp-on-stage": the pine palette
        the landing page sets on .wp-page, the room the fixed strip + crumbs
        need, and the body background that shows when the video has not
        painted yet.

     3. Draws the breadcrumb row and the footer. The STRIP IS NOT HERE — it is
        pines-base.css's .wp-strip, the same bar the landing page draws; only
        the cart badge and the aria-current state are added below.

     4. Puts a sheet behind the page's content. The plate keeps moving behind
        a product grid, which is the point of choosing it, but type over
        drifting fog is type you cannot read. .wrap (shop/cart) and .wp-cms
        get a translucent, blurred backing: enough contrast to read a price,
        little enough that the forest still shows round the edges.
   ========================================================================= */

:root {
  /* Her palette, through the names the store sheets expect. DECLARED AGAIN
     on .wp-on-stage below, and that copy is the one that matters: a custom
     property is computed where it is declared, so an alias set here would
     freeze --pw-brass at :root's value (pines-base.css's brass) and never see
     the pine/frost overrides the body sets. Measured: the price rendered
     gold until the aliases moved onto the body. These :root ones only serve
     an element outside <body class="wp-on-stage">, which is none. */
  --wp-void:        var(--pw-void);
  --wp-void-2:      var(--pw-void-2);
  --wp-ink:         #0b1511;
  --wp-bone:        var(--pw-bone);
  --wp-bone-dim:    var(--pw-bone-dim);
  --wp-bone-faint:  var(--pw-bone-faint);
  --wp-brass:       var(--pw-brass);
  --wp-brass-bright:var(--pw-brass-bright);
  --wp-brass-dim:   var(--pw-brass-dim);
  --wp-rule:        var(--pw-rule);

  --wp-display: var(--pw-display);
  --wp-brutal:  var(--pw-brutal);
  --wp-body:    var(--pw-body);
  --wp-mono:    var(--pw-mono);

  --wp-strip-h:  var(--pw-strip-h);
  --wp-crumbs-h: 1.95rem;
  --wp-chrome-h: calc(var(--wp-strip-h) + var(--wp-crumbs-h));

  --wp-link:        var(--wp-brass);
  --wp-link-bright: var(--wp-brass-bright);
  --wp-link-dim:    var(--wp-brass-dim);
}

html { -webkit-text-size-adjust: 100%; }

/* A page opts in. Same overrides .wp-page makes in pines.css, so the strip,
   the stage's own background and every alias above go cold-pine here too.
   The frost accent trio comes from .pw-accent-frost in pines-base.css —
   restated here so the body does not need two classes. */
.wp-on-stage {
  --pw-void: #04070a;
  --pw-void-2: #0a1210;
  --pw-bone: #eef3f0;
  --pw-bone-dim: #9fb2b6;
  --pw-bone-faint: #62767b;
  --pw-brass: #a8cfd6;
  --pw-brass-bright: #d8eef2;
  --pw-brass-dim: #3f5c62;
  --pw-rule: rgba(200, 226, 230, 0.13);
  /* Two bands on these pages, so the chrome is taller than the landing
     page's single strip. pines.css's .wp-frame reads --pw-chrome-h too, but
     no store page has a frame. */
  --pw-chrome-h: var(--wp-chrome-h);

  --wp-pine: #0a1410;
  --wp-moon: #cfe2ea;
  --wp-frost: #a8cfd6;
  --wp-sage: #7fb59b;

  /* The aliases, on the element that holds the overrides — see :root. */
  --wp-void:        var(--pw-void);
  --wp-void-2:      var(--pw-void-2);
  --wp-bone:        var(--pw-bone);
  --wp-bone-dim:    var(--pw-bone-dim);
  --wp-bone-faint:  var(--pw-bone-faint);
  --wp-brass:       var(--pw-brass);
  --wp-brass-bright:var(--pw-brass-bright);
  --wp-brass-dim:   var(--pw-brass-dim);
  --wp-rule:        var(--pw-rule);
  --wp-link:        var(--pw-brass);
  --wp-link-bright: var(--pw-brass-bright);
  --wp-link-dim:    var(--pw-brass-dim);

  margin: 0;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--pw-void) !important;
  color: var(--pw-bone);
  padding-top: var(--wp-chrome-h);
  font-family: var(--wp-body);
}

.wp-on-stage ::selection { background: var(--wp-brass); color: var(--wp-void); }

/* The cart's summary panel and the empty-cart notice. */
.wp-panel {
  background: color-mix(in srgb, var(--pw-void) 80%, transparent);
  border: 1px solid var(--wp-rule);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.wp-panel--solid { background: color-mix(in srgb, var(--pw-void) 92%, transparent); }
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .wp-panel { background: rgba(4, 7, 10, 0.82); }
  .wp-panel--solid { background: rgba(4, 7, 10, 0.93); }
}

/* ------------------------------------------------------ the content sheet
   Behind .wrap (shop, cart, custom) and .wp-cms (Site Manager pages). A
   blurred, translucent slab: the plate reads through it as colour and
   movement, the type reads over it as type. Padding is added because the
   page sheets set .wrap's padding-bottom to 0 (the footer used to follow
   directly). */
.wp-on-stage .wrap,
.wp-on-stage .wp-cms {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--pw-void) 72%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid var(--wp-rule);
  border-top: 0;
  border-bottom: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 30px 80px rgba(0, 0, 0, 0.45);
  padding-bottom: clamp(2rem, 6vw, 4rem);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .wp-on-stage .wrap, .wp-on-stage .wp-cms { background: rgba(4, 7, 10, 0.8); }
}
/* The Site Manager sheet pads its own top by the chrome height; the body
   already does that here. */
.wp-on-stage .wp-cms { padding-top: clamp(2rem, 6vw, 4rem); margin-top: 0; }

/* -------------------------------------------------- strip additions only
   pines-base.css owns .wp-strip, __mark, __nav, __nav-link and __link. */

.wp-strip__mark[aria-current="page"],
.wp-strip__nav-link[aria-current="page"] {
  color: var(--pw-brass-bright);
  border-bottom-color: var(--wp-blue);
}
.wp-strip__nav-link--net { opacity: 0.8; }

.wp-strip__cart { color: var(--pw-bone-dim); }
.wp-strip__cart[aria-current="page"] { color: var(--pw-brass); }

.wp-strip__cartn {
  display: inline-block;
  min-width: 1.3em;
  padding: 0 0.35em;
  margin-left: 0.25em;
  border-radius: 999px;
  background: var(--pw-brass);
  color: var(--pw-void);
  text-align: center;
  font-weight: 600;
}

/* ---------------------------------------------------------- breadcrumbs */

.wp-crumbs {
  position: fixed;
  top: var(--wp-strip-h);
  left: 0; right: 0;
  z-index: 49;
  height: var(--wp-crumbs-h);
  display: flex;
  align-items: center;
  padding: 0 clamp(0.7rem, 2.5vw, 1.5rem);
  background: color-mix(in srgb, var(--pw-void) 68%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wp-rule);
  font-family: var(--wp-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-x: auto;
  white-space: nowrap;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .wp-crumbs { background: rgba(4, 7, 10, 0.72); }
}
.wp-crumbs__list { display: flex; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.wp-crumbs__item + .wp-crumbs__item::before { content: "/"; color: var(--wp-bone-faint); margin-right: 0.6rem; }
.wp-crumbs__link { color: var(--wp-bone-dim); text-decoration: none; }
.wp-crumbs__link:hover { color: var(--wp-brass); }
.wp-crumbs__here { color: var(--wp-bone); }

/* ---------------------------------------------------------------- footer */

.wp-footer {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 8vw, 6rem);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--wp-rule);
  background: color-mix(in srgb, var(--pw-void) 78%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--wp-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp-bone-faint);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .wp-footer { background: rgba(4, 7, 10, 0.8); }
}
.wp-footer a { color: var(--wp-bone-dim); text-decoration: none; }
.wp-footer a:hover { color: var(--wp-brass); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons shared by the shop, cart and custom builder: the frost accent as
   a filled block, the way the landing page's tilt button inverts on hover. */
.wp-btn {
  display: inline-block;
  font-family: var(--wp-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.75rem 1.2rem;
  border: 2px solid var(--pw-brass);
  background: transparent;
  color: var(--pw-brass);
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.wp-btn:hover, .wp-btn:focus-visible { background: var(--pw-brass); color: var(--pw-void); }
.wp-btn--solid { background: var(--pw-brass); color: var(--pw-void); }
.wp-btn--solid:hover { background: var(--pw-brass-bright); }
.wp-btn:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 30rem) {
  .wp-crumbs { font-size: 0.56rem; }
}

/* ------------------------------------------------------------ her mark
   On store pages the mark sits in the corner UNDER the content sheet (the
   sheet is z-index 1; the mark 0), so it shows in the margin beside the
   grid and through the sheet's translucency, and never over a price or a
   form field. Sized to the margin that the 72rem sheet leaves, and gone
   below the width where there is no margin. The glow and the float come
   from pines.css's .wp-mark rules. */
.wp-mark--store {
  right: 1.5rem;
  bottom: 6rem;   /* clear of the footer band (z-index 1), which would clip it */
  width: min(16vw, 15rem, calc((100vw - 72rem) / 2 + 6rem));
  opacity: 0.9;
}
@media (max-width: 64rem) {
  .wp-mark--store { width: 9rem; opacity: 0.55; }
}
@media (max-width: 40rem) {
  .wp-mark--store { display: none; }
}