@charset "UTF-8";
/*!
Theme Name: Nyta Deus
Theme URI: https://github.com/nytafar/nyta-deus
Template: ousia
Author: Lasse Jellum
Author URI: https://jellum.net
Description: Nyta 2.0 — the first site on the Ousia 1.0 spine. Grown from the ousia-child starter; brand lands on top, never inside.
Version: 2.0.0-dev
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: nyta-deus
*/
:root {
  /* Ink — warm, never pure black */
  --text-color: #2b2118; /* body ink */
  --text-color-dark: #20180f; /* full-strength: headings, emphasis */
  --text-color-muted: #4a3c2c; /* soft ink — holds AA on paper */
  /* Surfaces — papers, not grays */
  --bg-color: #f6f0e4; /* the default page */
  --bg-color-light: #fbf8f1; /* freshest leaf: cards, sheets, inputs */
  --bg-color-hover: #efe6d4; /* aged paper */
  --bg-color-selected: #e6d9c1; /* deeper parchment */
  /* Lines — hairlines in warm ink, not gray borders */
  --border-color: rgba(43, 33, 24, 0.34); /* strong: emphasis (≥3:1) */
  --border-color-light: rgba(43, 33, 24, 0.16); /* the ledger hairline */
  /* Paint — the role split is the brand:
     links = reishi oxblood (rare emphasis, working for a living),
     action = ink on paper (quiet, confident),
     focus = amber (warm, visible, never default blue). */
  --accent-color: #7c2f1d; /* reishi — links, rare emphasis */
  --accent-contrast: #f6f0e4; /* paper on top of ink/reishi */
  --button-fill: var(--text-color-dark); /* primary action is ink */
  --focus-color: #b07724; /* dried-root amber */
  --shadow-color: rgba(46, 33, 18, 0.12); /* warm and low — weight, not gloss */
  /* Shape — nearly square, print-like (≈4px at body size, riding the sweep) */
  --border-radius: 0.25em;
  /* Validation — earthy, not signal-bright (reishi doubles as "bad") */
  --border-input-danger: #7c2f1d;
  --text-danger: #7c2f1d;
  /* ── Nyta registers (site tokens, consumed by the brand partials) ──── */
  --highlight: #cf9a3e; /* beeswax/honey — underlines, marks */
  --highlight-wash: rgba(207, 154, 62, 0.18);
  --highlight-ink: #b07724; /* the honey that reads — glyphs on paper (≥3:1 on every surface) */
  /* Paper grain — a faint fractal noise laid over paper colors. A core
     warmth signal (substrate, not noise); never grunge. */
  --texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-normal-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-normal-var-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-italic-var-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-italic-var-latin-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/plex-sans-normal-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/plex-sans-normal-var-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/plex-sans-italic-400-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/plex-sans-italic-400-latin-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-normal-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-normal-400-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-normal-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-normal-500-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --font-family-body: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-family-heading: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-family-ui: "IBM Plex Sans", var(--font-family-system);
  --font-family-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

body {
  line-height: 1.62; /* long-form reading leading — the design's register */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.018em;
}

a:where(:hover, :focus-visible) {
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 0.12em;
}

::selection {
  background: var(--highlight-wash);
}

:where(button, .button, input[type=submit], input[type=button]) {
  font-family: var(--font-family-ui);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.single_add_to_cart_button {
  --button-fill: var(--accent-color);
}

article hr {
  border: none;
  border-top: 1.5px solid var(--border-color-light);
  margin-block: var(--margin-block, 3em);
  /* the second, fainter line of the ledger rule */
}
article hr::after {
  content: "";
  display: block;
  border-top: 1px solid var(--border-color-light);
  opacity: 0.55;
  margin-top: 3px;
}

/* Citations and asides — the footnote register. A ledger rule, an
   eyebrow summary, then sources in small italic serif: they flow like
   the foot of a well-sourced book, not numbered armor. Native details;
   the editor already owns it. */
article details {
  border-top: 1.5px solid var(--border-color-light);
  padding-top: 1em;
}
article details summary {
  font-family: var(--font-family-ui);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-color-muted);
  cursor: pointer;
}
article details > :not(summary) {
  font-style: italic;
  font-size: 0.85em;
  color: var(--text-color-muted);
}

/* Long-form headlines balance; prose avoids runts. Quiet, no classes. */
article :is(h1, h2) {
  text-wrap: balance;
}

article p {
  text-wrap: pretty;
}

/* The columns want the wide measure, not the prose measure — re-scope
   the layout token on the composition (the cascade is the API). */
.footer-columns {
  --max-width: var(--wide-width);
}

.site-footer {
  background-color: var(--bg-color-hover);
  background-image: var(--texture-paper);
  border-top: 1px solid var(--border-color-light);
  font-size: 0.9em;
}
.site-footer a {
  color: var(--text-color-muted);
  transition: color 120ms ease;
}
.site-footer a:hover {
  color: var(--text-color-dark);
}
.site-footer {
  /* Column titles (widget headings), when a column carries one —
     the spaced small-caps eyebrow */
}
.site-footer h2 {
  font-family: var(--font-family-ui);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-color-muted);
}
.site-footer li {
  justify-content: flex-start;
  padding-block: 0.25em;
}

.footer-col,
.site-footer .widget {
  justify-items: start;
  align-content: start; /* columns top-align; short ones don't stretch */
}

/* Mobile — columns collapse into ledger sections under hairlines */
@media (max-width: 539px) {
  .footer-col + .footer-col {
    border-top: 1px solid var(--border-color-light);
    padding-top: 1.5em;
  }
}
.copyright {
  font-family: var(--font-family-mono);
  font-size: 0.72em;
  letter-spacing: 0.02em;
  color: var(--text-color-muted);
  border-top: 1px solid var(--border-color-light);
  margin-top: 3em;
  padding-block: 1.5em 2em;
}

/* Price — the buy box's one loud number is loud by SIZE, in ink */
.summary > .price > .woocommerce-Price-amount {
  color: var(--text-color-dark);
  font-weight: 500;
}

/* One price speaks. The chooser's live price is bound to the chosen
   variant; while it's on the page the static "Fra kr …" header retires.
   (Without :has() both remain — the old reading, not a break.) */
.summary:has(.woocommerce-variation-price .price) > .price {
  display: none;
}

/* Subtitle (the latin name) — the lede register: fine italic, soft ink */
.summary > h2 {
  font-style: italic;
  font-weight: 400;
  color: var(--text-color-muted);
}

/* Stars — beeswax, not oxblood; a rating is warmth, not emphasis.
   The deep honey ink: warmth that still reads at 3:1 on every paper. */
.star-rating span {
  color: var(--highlight-ink);
}

/* Variation label — the spaced small-caps eyebrow. Scoped to the row
   header: option tiles keep sentence case (caps are a label device,
   never option shouting). */
.variations th label {
  font-family: var(--font-family-ui);
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-color-muted);
}

/* Reset ("Nullstill") — quiet UI chrome, present but subtle */
.reset_variations {
  font-family: var(--font-family-ui);
  font-size: 0.78em;
  color: var(--text-color-muted);
}

/* ── The buy box, one instrument ─────────────────────────────────────
   One compact rhythm from tiles to action: the chooser, its footnote,
   the plan pair, the record, the ledger, the button. The flex gap
   owns the column's spacing; the default paragraph margins retire. */
.single-product .single_variation {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

/* Variation description — inlined on the tile faces now (the ledger
   script maps it from the variation JSON), so both forms speak before
   the choice. The below-the-tiles copy would say the same thing
   twice; it parks. */
.woocommerce-variation-description {
  display: none;
}

/* Stock — the same record voice: one quiet mark before the ledger */
.single-product .stock {
  font-family: var(--font-family-mono);
  font-size: 0.72em;
  letter-spacing: 0.02em;
  margin: 0;
}

/* The plan prompt sits over its pair like VARIANT over the tiles */
.wcsatt-options-wrapper .wcsatt-options-product-prompt {
  margin-bottom: 0.5em;
}

/* Meta — the record-keeper's line. SKU and taxonomy set in mono like
   a lot number: checkable, quiet, part of the notes. */
.product_meta {
  font-family: var(--font-family-mono);
  font-size: 0.72em;
  letter-spacing: 0.02em;
  color: var(--text-color-muted);
}

/* The quiet line under the buy button — same record-keeper register.
   Two facts, one hairline of type; the reassurance is that it doesn't
   need to shout. The buy row (flex on variable, grid on simple) lets
   it wrap to its own full line beneath the button. */
.woocommerce-variation-add-to-cart {
  flex-wrap: wrap;
}

.purchase-notes {
  flex-basis: 100%;
  grid-column: 1/-1;
  margin: 0.6em 0 0;
  font-family: var(--font-family-mono);
  font-size: 0.72em;
  letter-spacing: 0.02em;
  color: var(--text-color-muted);
}

/* ── The subscription switcher ───────────────────────────────────────────
   Plans are enclosed, pressable rows — enclosure is affordance, and
   choosing a cadence is the buy box's second decision. The chosen plan
   is the current entry in the ledger: ink border, honey wash. No dots,
   no edge marks — the state is the surface, same subtle grammar as the
   trough's segments. */
/* The token is the switch (parent contract): the plan pair divides
   the row — the same grammar as the variant tiles above it, so the
   buy box asks its two questions with one device. Under 9em a column
   wraps to its own full row (wrapping, not an axis flip). */
.wcsatt-options-product {
  --plan-option-flex: 1 1 9em;
  width: 100%;
}

.wcsatt-options-prompt-radios {
  width: 100%;
}

/* The prompt — the spaced small-caps eyebrow */
.wcsatt-options-prompt-text-label {
  font-family: var(--font-family-ui);
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-color-muted);
}

.wcsatt-options-product li {
  width: 100%;
}
.wcsatt-options-product li label {
  display: block;
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
  background-color: var(--bg-color-light);
  padding: 0.8em 1em;
  cursor: pointer;
}
.wcsatt-options-product li label:hover {
  background-color: var(--bg-color-hover);
}
.wcsatt-options-product li label:has(input:checked) {
  border-color: var(--border-color);
  background-color: var(--highlight-wash);
}
.wcsatt-options-product li {
  /* the register and size are the parent's control voice; inside a
     structured plan, each line takes its own register below */
}
.wcsatt-options-product li .one-time-option-details,
.wcsatt-options-product li .subscription-option-details {
  font-weight: 500;
  color: var(--text-color);
}
.wcsatt-options-product li {
  /* ── The plan card's registers ────────────────────────────────────
     The parent's grid gives the anatomy; the voices are the brand's:
     the cadence is chrome (a decision), the price is prose (the
     record), the saving is the honey mark. */
  /* (.plan-name carries no rule of its own: it inherits the option
     details' 500/ink — the same voice as the tile names. Its old
     600/dark was hierarchy against the price line, now retired.) */
}
.wcsatt-options-product li .plan-save {
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.wcsatt-options-product li {
  /* the plan's price stays in the DOM — the ledger reads its ins/del
     to compute the sum — but never paints: the boxes name the
     choice, the ledger names the price. The saving mark alone
     differentiates the standing order. */
}
.wcsatt-options-product li .plan-price {
  display: none;
}
.wcsatt-options-product li {
  /* The terms — the commitment answered where it forms. Only the
     chosen plan speaks; the others stay quiet rows. */
}
.wcsatt-options-product li .plan-terms {
  display: none;
  grid-column: 1/-1;
  font-family: var(--font-family-ui);
  font-size: 0.78em;
  color: var(--text-color-muted);
}
.wcsatt-options-product li label:has(input:checked) .plan-terms {
  display: block;
}

/* The switch's voice rides the parent's control register; the child
   adds weight, ink, and the quiet second line (the price suffix above
   already speaks the full sentence) */
.wcsatt-options-prompt-action {
  font-weight: 500;
  color: var(--text-color);
}
.wcsatt-options-prompt-action .prompt-save {
  font-weight: 400;
  color: var(--text-color-muted);
}

/* ── Standing orders carry the ledger's mark ─────────────────────────────
   The recurring entries distinguish themselves with one quiet device:
   the saving underlined in honey. No edge, no dot, no icon — the
   highlight register doing its one job (warmth, marks), in every SATT
   mode — the flat plan list and the grouped subscribe-toggle alike. */
.wcsatt-options-product .wcsatt-sub-discount,
.wcsatt-options-prompt-radios .wcsatt-sub-discount {
  text-decoration: underline;
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.ousia-tiles > label {
  /* the register and size are the parent's control voice now — the
     child adds only weight and ink */
}
.ousia-tiles > label > div {
  font-weight: 500;
  color: var(--text-color);
}
.ousia-tiles > label {
  /* chosen: the current entry in the ledger — honey wash, ink border.
     The parent's parchment fill and inset weight retire; the wash
     carries the state, no dot, no mark. */
}
.ousia-tiles > label input:checked + div {
  border-color: var(--border-color);
  background-color: var(--highlight-wash);
  box-shadow: none;
}

/* ── The variant axis earns its composition ──────────────────────────
   Two forms, one decision: the tiles divide the row equally and each
   face stacks name over its own description (js/buy-ledger.js inks it
   from Woo's variation JSON) — both forms speak before the choice,
   not after it. The price still lives in one place, the ledger.
   Left-aligned like the plan rows below: entries in one ledger, not
   button bars. */
.ousia-tiles.attribute-pa_variant > label {
  flex: 1 1 0;
  min-width: 0;
}
.ousia-tiles.attribute-pa_variant > label > div {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2em;
  padding-block: 0.65em;
  text-align: start;
  /* the description arrives by script — reserve its line so the
     tiles don't grow under the reader (CLS insurance) */
  min-height: 3.5em;
}

.ousia-tiles .tile-desc {
  font-family: var(--font-family-mono);
  font-size: 0.72em;
  letter-spacing: 0.02em;
  color: var(--text-color-muted);
}

@property --bloom-r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --press-r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
/* ── The button carries the sum ─────────────────────────────────────────
   Verb over record: the two lines stack and center; the sum hides
   ([hidden]) until a variation is chosen, and the verb stands alone. */
/* The two-line button re-declares the buy row's height through the
   parent's own token — the stepper reads the same --buyrow-h, so the
   pair stays symmetric at any button height (hardcoding min-height
   here once broke that contract). The reservation also serves CLS:
   the sum arrives by script into space that already exists. */
.single-product form.cart {
  --buyrow-h: 3.4em;
}

.single_add_to_cart_button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  padding-block: 0.45em;
  line-height: 1.2; /* the verb line stays tight — two lines must fit the token */
  min-height: var(--buyrow-h);
}

/* The variation payload (plan chooser, stock) is inserted by Woo's JS
   on load — reserve its resting height so the buy row doesn't jump
   down when it lands. Slightly under the hydrated 134px so the settle
   is a few quiet pixels, never a hole. When Woo hides the block
   (variant cleared), display:none beats the reservation. */
.variations_form .single_variation {
  min-height: 6.5em;
}

.buy-cta__sum {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45ch; /* flex trims edge whitespace — the gap is the space */
  font-family: var(--font-family-mono);
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.buy-cta__sum[hidden] {
  display: none;
}

.buy-cta__per[hidden] {
  display: none;
}

/* " / måned" — the cadence rides quiet after the sum */
.buy-cta__per {
  font-size: 0.85em;
  font-weight: 400;
}

/* Digit roll — each digit clips its own column while it turns */
.buy-ledger__digits {
  display: inline-flex;
  overflow: hidden;
}

.buy-ledger__d {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  white-space: pre; /* the thousands separator is a digit box of one
   space — pre keeps it from collapsing to zero */
}

.buy-ledger__dcol {
  display: flex;
  flex-direction: column;
}
.buy-ledger__dcol > span {
  display: block;
  height: 1em;
}

/* The settle — new ink drying: blur clears as it lands (a reshaped
   sum rebuilds whole and settles once) */
@keyframes buy-ledger-settle {
  from {
    opacity: 0;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
.buy-ledger__digits.is-settling {
  animation: buy-ledger-settle 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The ghost — the sum, lifted off the button and carried to the cart */
.buy-ledger__ghost {
  position: fixed;
  z-index: 9999;
  font-family: var(--font-family-mono);
  font-size: 1em;
  font-weight: 600;
  color: var(--text-color-dark);
  pointer-events: none;
  will-change: transform, opacity;
}

/* While the script runs, the duplicate unit prices retire to
   screen-reader-only — sighted readers get the button's sum; AT keeps
   the announcements. Two seams: the variation price (variable
   products) and the summary header price (simple products). Both stay
   in the DOM: they are the script's own price sources. */
html.buy-ledger-live .woocommerce-variation-price > .price,
html.buy-ledger-live .summary > .price {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── The honey bloom ────────────────────────────────────────────────────
   The chosen state's wash, grown from the point of touch. The gradient
   sizes to the farthest corner, so a corner tap still floods the face;
   the soft inner stop is the ink's feathered edge. Every state that
   paints `background` shorthand upstream re-declares the image here,
   so the bloom survives hover and checked alike. */
/* Variant tiles — the face is the canvas */
.ousia-tiles > label > div, .ousia-tiles > label:hover > div,
.ousia-tiles > label input:checked + div {
  background-image: radial-gradient(circle at var(--bloom-x, 50%) var(--bloom-y, 50%), var(--highlight-wash) calc(var(--bloom-r, 0%) * 0.72), transparent var(--bloom-r, 0%));
}
.ousia-tiles > label input:checked + div {
  /* overshoot: the feathered edge (72% of r) passes the farthest
     corner, so the resting state is the full flat wash — the
     travel blooms, the destination is solid */
  --bloom-r: 165%;
  background-color: var(--bg-color-light); /* the wash rides the bloom now */
  border-color: var(--border-color);
  box-shadow: none;
}

/* Plan rows — same material, same mechanic */
.wcsatt-options-product li label, .wcsatt-options-product li label:hover, .wcsatt-options-product li label:has(input:checked) {
  background-image: radial-gradient(circle at var(--bloom-x, 50%) var(--bloom-y, 50%), var(--highlight-wash) calc(var(--bloom-r, 0%) * 0.72), transparent var(--bloom-r, 0%));
}
.wcsatt-options-product li label:has(input:checked) {
  --bloom-r: 165%; /* same overshoot — solid at rest */
  background-color: var(--bg-color-light);
}

/* ── The letterpress ────────────────────────────────────────────────────
   The buy action presses into the paper: a hair of travel, the shadow
   swallowed, ink deepening from the tap point. */
.single_add_to_cart_button:active {
  --press-r: 101%;
  translate: 0 1px;
  box-shadow: inset 0 2px 6px rgba(32, 24, 15, 0.4);
}

/* ── Motion — one family, gated once ────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .ousia-tiles > label > div,
  .wcsatt-options-product li label {
    transition: --bloom-r 440ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .single_add_to_cart_button {
    background-image: radial-gradient(circle at var(--bloom-x, 50%) var(--bloom-y, 50%), rgba(32, 24, 15, 0.24) calc(var(--press-r, 0%) * 0.72), transparent var(--press-r, 0%));
    transition: --press-r 400ms cubic-bezier(0.22, 1, 0.36, 1), translate 90ms ease-out, box-shadow 90ms ease-out;
  }
  .single_add_to_cart_button:active {
    transition: --press-r 240ms ease-out, translate 60ms ease-out, box-shadow 60ms ease-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  .buy-ledger__digits.is-settling {
    animation: none;
  }
}
.woocommerce-review__published-date {
  font-family: var(--font-family-mono);
  font-size: 0.72em;
  letter-spacing: 0.02em;
  color: var(--text-color-muted);
}

/* Generosity — retune the parent's declared gaps, shop and rails alike */
.ousia-shop .products,
.related .products,
.archive .products {
  gap: clamp(1.25em, 2.5vw, 2.25em) clamp(0.75em, 1.6vw, 1.5em);
}

/* Shortcode shelves ([products] on content pages) get the same grid —
   the parent only grids .related/.archive/.ousia-shop contexts. The
   shelf wants the wide measure: re-scope the layout token. */
article > .woocommerce {
  --max-width: var(--wide-width);
}

.woocommerce ul.products {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11em), 1fr));
  gap: clamp(1.25em, 2.5vw, 2.25em) clamp(0.75em, 1.6vw, 1.5em);
}

/* The card — pressable paper */
.products > .product {
  background-color: var(--bg-color-light);
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.products > .product:hover {
  border-color: var(--border-color);
  box-shadow: 0 2px 6px var(--shadow-color);
}

.products .woocommerce-loop-product__title {
  font-size: 1.05em;
  line-height: 1.3;
  padding-inline: 0.75em;
  color: var(--text-color-dark); /* the card is the link; the title is ink */
}

.products .price {
  color: var(--text-color-dark);
  font-weight: 500;
}

/* Subscription fragments in cards — one quiet record line, no arithmetic.
   The struck base price and the dash are PDP detail; the shelf keeps the
   useful fact ("fra … / måned") in the record-keeper's register. */
.products .wcsatt-sub-options {
  font-family: var(--font-family-mono);
  font-size: 0.72em;
  color: var(--text-color-muted);
  padding-inline: 1em;
  text-wrap: balance;
}
.products .wcsatt-sub-options del {
  display: none;
}

/* Category sections — a header is a heading on a rule, not a chapter */
.ousia-shop-category__header {
  border-bottom: 1.5px solid var(--border-color-light);
  padding-bottom: 0.75em;
}
.ousia-shop-category__header p {
  font-size: 0.95em;
  color: var(--text-color-muted);
  max-width: 60ch;
}

/* Continue is the buy action — reishi, paper text, full width */
.wc-proceed-to-checkout .checkout-button {
  --button-fill: var(--accent-color);
  color: var(--accent-contrast);
  display: block;
  width: 100%;
  text-align: center;
}

/* A disabled action recedes; it does not smoulder */
.woocommerce-cart-form button:disabled {
  background: transparent;
  color: var(--text-color-muted);
  border: 1px solid var(--border-color-light);
  opacity: 1;
}

/* Subscription choice inside the table — the parent owns the reset and
   the control voice; here it speaks a step quieter, with reishi radios.
   The full switcher ceremony belongs to the product page. */
.woocommerce-cart-form .wcsatt-options {
  --control-size: 0.85em;
}
.woocommerce-cart-form .wcsatt-options input[type=radio] {
  accent-color: var(--accent-color);
}

/* Section headings seat on the ledger rule */
.woocommerce-checkout h3 {
  padding-bottom: 0.4em;
  border-bottom: 1.5px solid var(--border-color-light);
}

/* The order card — freshest leaf on a warm low shadow: weight, not gloss */
.woocommerce-checkout-review-order {
  background-color: var(--bg-color-light);
  box-shadow: 0 2px 6px var(--shadow-color);
}

/* The chosen payment method is marked in honey, not boxed in accent */
.wc_payment_method:has(> input:checked) {
  background: var(--highlight-wash);
}

/* Confirming the order is the buy action — the page's one reishi
   surface, standing full width */
#place_order {
  --button-fill: var(--accent-color);
  width: 100%;
}

/* The fine print stays fine */
.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
  font-size: 0.85em;
  color: var(--text-color-muted);
}

.numenu .sheet {
  border-bottom: 1px solid var(--border-color-light);
}

@media (min-width: 768px) {
  .numenu .panel {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    overflow: hidden;
    box-shadow: 0 1.25em 2.5em -1em color-mix(in srgb, var(--text-color-dark) 35%, transparent);
  }
}
.numenu > .mobile-header,
.numenu > .header {
  border-bottom: 1px solid var(--border-color-light);
}

.numenu > .header .nav .btn {
  font-family: var(--font-family-ui);
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-color-muted);
  transition: color 120ms ease;
}
.numenu > .header {
  /* The open panel is the current section: strong ink, honey rule */
}
.numenu > .header .nav.active .btn {
  color: var(--text-color-dark);
}
.numenu > .header .nav {
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
}
.numenu > .header .nav.active {
  border-bottom-color: var(--highlight);
}
.numenu > .header .nav .divider {
  background: var(--border-color-light);
}
.numenu > .header {
  /* The ghost — the monogram as a watermark: pressed into the paper,
     not printed on it */
}
.numenu > .header .header-ghost {
  fill: var(--text-color);
  opacity: 0.05;
}

/* Brand glyphs draw in ink */
#branding svg {
  fill: var(--text-color-dark);
}

.numenu .meny-content .item {
  font-family: var(--font-family-ui);
  font-size: 0.95em;
  font-weight: 500;
  color: var(--text-color);
}
.numenu .meny-content {
  /* submenu entries: one register quieter than their parent row */
}
.numenu .meny-content .submenu-item {
  font-family: var(--font-family-ui);
  font-size: 0.9em;
  font-weight: 400;
  color: var(--text-color-muted);
}
.numenu .meny-content .submenu-item:hover, .numenu .meny-content .submenu-item:focus-visible {
  color: var(--link-color);
}

/* "Categories" — the spaced small-caps eyebrow */
.numenu .cat-label {
  font-family: var(--font-family-ui);
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-color-muted);
}

.numenu .butikk-content {
  /* The CTA — the button stack delivers everything (ink fill, line
     follows the fill); the brand's only call here is the register */
}
.numenu .butikk-content .btn-primary {
  font-family: var(--font-family-ui);
  font-size: 0.9em;
  font-weight: 600;
}
.numenu .butikk-content {
  /* Destination cards — the parent's surface/hairline stand as-is;
     the brand adds the register, the sweep and the aged-paper hover */
}
.numenu .butikk-content .btn-nav,
.numenu .butikk-content .btn-cat {
  font-family: var(--font-family-ui);
  font-size: 0.9em;
  font-weight: 500;
  border-radius: var(--border-radius);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.numenu .butikk-content .btn-nav:hover, .numenu .butikk-content .btn-nav:focus-visible,
.numenu .butikk-content .btn-cat:hover,
.numenu .butikk-content .btn-cat:focus-visible {
  background: var(--bg-color-hover);
  border-color: var(--border-color);
}

.numenu .bottomnav {
  background-color: var(--bg-color-light);
  background-image: var(--texture-paper);
}
.numenu .bottomnav .btn {
  color: var(--text-color-muted);
  transition: color 120ms ease;
}
.numenu .bottomnav .btn svg {
  width: 1.5em;
  height: 1.5em;
  stroke-width: 1.75;
}
.numenu .bottomnav .btn:active {
  background: var(--bg-color-hover);
}
.numenu .bottomnav .btn {
  /* The open sheet is the current section: strong ink, honey mark */
}
.numenu .bottomnav .btn.active {
  color: var(--text-color-dark);
}
.numenu .bottomnav .btn.active svg {
  stroke-width: 1.9;
}
.numenu .bottomnav .btn.active .label {
  text-decoration: underline;
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}
.numenu .bottomnav .label {
  font-family: var(--font-family-mono);
  font-size: 0.6875em;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.numenu .bottomnav .divider {
  display: none;
}
.numenu .bottomnav {
  /* The count — a ledger entry in reishi, ringed by the bar's paper.
     Hidden at zero (parent markup + lean-cart own the mechanism). */
}
.numenu .bottomnav .badge {
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 500;
  min-width: 1.5em;
  height: 1.5em;
  border-radius: 0.75em;
  top: -0.4em;
  right: -0.6em;
  background: var(--accent-color);
  color: var(--accent-contrast);
  border: 1.5px solid var(--bg-color-light);
}

.xoo-el-popup-notice {
  position: fixed;
  inset: 0;
  z-index: 600;
}

/* Same parking problem, main popup container: display it only when the
   plugin opens it (its own active-state CSS takes over from there). */
.xoo-el-container:not(.xoo-el-active) {
  display: none;
}

/* ── Inline account forms — warm the plugin chrome to the skin ─────────
   The action buttons already ride .button (ink); what remains is the
   plugin's own furniture: a black tab slab and cool-gray field chrome. */
.xoo-el-form-container .xoo-el-tabs li {
  background: transparent;
  color: var(--text-color-muted);
  font-family: var(--font-family-ui);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1.5px solid var(--border-color-light);
}
.xoo-el-form-container .xoo-el-tabs li.xoo-el-active {
  background: transparent;
  color: var(--text-color-dark);
  border-bottom-color: var(--highlight);
}

.xoo-el-form-container .xoo-aff-field {
  border-color: var(--border-color-light);
  background-color: var(--bg-color-light);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.xoo-el-form-container .xoo-aff-input-icon {
  background: var(--bg-color-hover);
  color: var(--text-color-muted);
  border: 1px solid var(--border-color-light);
  border-inline-end: 0;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

/*# sourceMappingURL=style.css.map */