/* ============================================================
   Platform adapter — Shopline/Bottle DOM injections vs the
   ported Labbox cascade. Playbook §11. Loaded on every template.
   ============================================================ */

/* §11.1 — the platform wraps every section in <div class="section">.
   The ported sheet has its own .section rules; zero the wrapper only. */
[id^="shopline-section-"].section { padding: 0; margin: 0; }

/* §11.1 — a sticky header cannot escape its wrapper. Dissolve the box. */
[id^="shopline-section-"]:has(> .site-header) { display: contents; }

/* §11.2 — every block is wrapped too, which steals flex/grid parenting
   and breaks :first/:last-child. display:contents fixes paint; unwrap.js
   fixes measurement on the storefront (wrappers stay in the editor). */
[id^="shopline-block-"] { display: contents; }

/* §11.6 — the overscroll region paints from <html>, not <body>.
   Paint it with the footer's ground: that is the end people reach. */
html { background: #120e1e; }
body { background: var(--paper); }

/* §11.6 — anything parked off-screen is still painted. Clip, don't offset. */
.skip-to-content-link,
a[href="#MainContent"] {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-to-content-link:focus,
a[href="#MainContent"]:focus {
  position: fixed !important; top: 1rem; left: 1rem;
  width: auto; height: auto; margin: 0; padding: .75rem 1.5rem;
  overflow: visible; clip-path: none;
  background: var(--primary); color: #fff; border-radius: var(--r-pill); z-index: 200;
}

/* §11.6 — <details>-based hosts render a disclosure marker at the
   document end. A marker only exists on list-item. */
details > summary:empty { display: block; width: 0; height: 0; overflow: hidden; }
summary::-webkit-details-marker { display: none; }

/* §19.3 — the cart drawer is emitted by the layout, so it renders on
   templates where base/index.css is deliberately gated off. Supply the
   variables and the stacking context it depends on, mapped to brand tokens. */
.cart-drawer, cart-drawer, [class*="cart-drawer"] {
  --color-background: 244, 242, 248;
  --color-text: 22, 17, 36;
  --color-light-text: 22, 17, 36;
  --color-entry-line: 220, 218, 225;
  --color-button-background: 130, 63, 145;
  --color-button-text: 255, 255, 255;
  --color-card-background: 255, 255, 255;
  --color-media-background: 255, 255, 255;
  --color-mask: 22, 17, 36;
}
/* §19.4.3 — the panel is position:fixed with z-index:auto; the ported
   scrim paints over it. Give the host a stacking context above it. */
#cart-drawer-host, .cart-drawer-host { position: absolute; z-index: 120; }

/* The prototype's drawer (site.css "cart drawer": .drawer-head, .meter-wrap,
   .cart-line, .qty, .drawer-foot) on the platform panel. The rules below only
   undo what cart-drawer.css puts on the platform classes and fit the
   platform's quantity input into the prototype's pill. */
.cart-drawer__body.lb-drawer { width: min(480px, 100vw); height: 100%; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-drawer); }
.lb-drawer .cart-drawer__inner { flex: 1; padding: 0; overflow-y: auto; background: transparent; }
.lb-drawer .cart-drawer__loading { background: var(--paper); }
.lb-drawer .cart-line { padding: 18px 24px; }
.lb-drawer .cart-line.cart-item__disabled { opacity: .5; pointer-events: none; }
.lb-drawer .cart-line .thumb { display: block; background: var(--white); }
.lb-drawer .cart-line .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6%; display: block; }
.lb-drawer a.card-title { color: inherit; text-decoration: none; }
.lb-drawer a.card-title:hover { text-decoration: underline; }
.lb-line-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; font-weight: 600; opacity: .6; }
.lb-line-meta > span + span::before { content: "·"; margin-right: 6px; }
.lb-line-meta s { opacity: .8; }
.lb-line-remove { opacity: .5; text-decoration: underline; cursor: pointer; }
.lb-line-remove:hover { opacity: .8; }
.lb-drawer .qty theme-input-number { display: inline-flex; align-items: center; }
.lb-drawer .qty button { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; background: none; border: 0; color: inherit; cursor: pointer; }
.lb-drawer .qty button:disabled { opacity: .3; cursor: default; }
.lb-drawer .qty button svg { width: 10px; height: 10px; }
.lb-drawer .qty input { width: 26px; padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: center; -moz-appearance: textfield; }
.lb-drawer .qty input::-webkit-outer-spin-button,
.lb-drawer .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lb-drawer .cart-item__fail-tip:empty, .lb-drawer .cart-item__total-loading { display: none; }
.lb-drawer .cart-item__fail-tip { color: var(--red); }
.lb-drawer .drawer-foot form { margin: 0; }
.lb-drawer .drawer-foot .btn-split { border: 0; cursor: pointer; }
@media (max-width: 600px) {
  .lb-drawer .cart-line { padding: 14px var(--gutter); gap: 10px; }
  .lb-drawer .qty button { width: 38px; height: 38px; padding: 0; }
}

/* §11.3 — base/index.css out-specifies single-class ported rules.
   Anchor colour at (0,1,1) and the native font variables. */
:root { --sort-title-font: var(--font); --sort-body-font: var(--font); }

/* Each button variant is restated at anchor specificity (0,1,1) so it beats
   base/index.css's `a:not(.button)` rule on the templates where that sheet
   loads.
   NOT `a.btn { color: inherit }`: that is also (0,1,1) and therefore beats
   `.btn-paper`'s own (0,1,0) colour, so a paper button inside a band that
   sets `color: var(--paper)` rendered white text on a white pill — invisible,
   with correct geometry and a clean console. Name the variants. */
a.btn-paper, a.btn-paper:hover,
a.btn-white, a.btn-white:hover,
a.btn-outline, a.btn-outline:hover { color: var(--ink); }

a.btn-dark, a.btn-dark:hover,
a.btn-yellow, a.btn-yellow:hover { color: var(--white); }

a.btn-blue, a.btn-blue:hover { color: var(--paper); }

a.btn-outline-inv, a.btn-outline-inv:hover,
a.btn-ghost-inv, a.btn-ghost-inv:hover { color: var(--paper); }

a.mm-tile, a.mm-row, .nav-links > a { color: inherit; }

/* §11.7 — `all: revert` and the base sheet both drop the brand focus ring. */
[data-section-key] :is(input, select, textarea, button, a):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* The platform's own cart bubble is mounted clipped; we forward clicks to it
   from the designed header control (§19.4.2). Never offset off-screen. */
.cart-bubble-proxy {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* §11.6 cause 2 — the search overlay is a fixed panel parked above the
   viewport with `transform: translateY(-105%)` and a 60px drop shadow. It is
   still painted there, so dragging the page past its top reveals a dark slab
   that belongs to nothing on the page. Found by the overscroll probe on all
   12 templates.

   Taking it out of paint with `visibility` rather than reworking the
   transform keeps the slide animation exactly as designed: the delay on the
   closing transition lets the panel finish sliding out before it is hidden,
   and opening makes it visible immediately. */
.search-panel {
  visibility: hidden;
  transition: transform .25s var(--ease-out), visibility 0s linear .25s;
}
.search-panel.open {
  visibility: visible;
  transition: transform .25s var(--ease-out), visibility 0s linear 0s;
}