/* Built by tools/build-css.php from main.css. Do not edit; edit the source files. */
@layer reset, tokens, base, layout, pinova, wc, components, woocommerce, utilities;

/* 00-tokens.css */
@layer tokens {
/* Design tokens: the source of truth (theme.json mirrors them). ADR-0001, ADR-0002.
   Light only until Phase 2; dark mode gets its own palette through the same names. */
:root {
  color-scheme: light;

  /* brand (sampled from the logo) */
  --brand-yellow: #FFD400;
  --brand-red: #C9252C;
  --brand-black: #000000;

  /* semantic */
  --bg: #F6F3EA;
  --surface: #FFFDF6;
  --fg: #14120C;
  --muted: #57534A;            /* 6.6:1 on --bg */
  --line: #14120C;
  --line-soft: #CFCABB;        /* decorative rules only, never text */
  --accent: var(--brand-red);
  --accent-text: #B81F27;      /* 5.7:1 on --bg */
  --on-accent: #FFFFFF;
  --highlight: var(--brand-yellow);
  --highlight-soft: #FFF1A6;
  --on-highlight: #000000;
  --muted-on-highlight: #3B3300; /* 9.6:1 on yellow */
  --band-bg: #14120C;
  --band-fg: #F6F3EA;
  --band-muted: #C2BDAE;       /* 9.4:1 on band */
  --success: #1E6B3A;
  --danger-bg: #FFF5F4;

  /* type */
  --font-display: "Anjoman", system-ui, sans-serif;
  --font-body: "IRANSans", Tahoma, sans-serif;
  --text-2xs: 0.6875rem;   /* 11px tab labels */
  --text-xs: 0.8125rem;    /* 13px min secondary */
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;  /* 17px body */
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.2rem + 4.4vw, 4.75rem);
  --leading-body: 1.8;
  --leading-tight: 1.3;

  /* space */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4.5rem;

  /* shape, motion, size */
  --rule: 1px solid var(--line);
  --rule-soft: 1px solid var(--line-soft);
  --radius-control: 0.5rem;    /* buttons, inputs, segmented controls */
  --radius-small: 0.25rem;
  --touch: 44px;
  --tab-bar-h: 49px;
  --header-h: 4.25rem;
  --container: 77.5rem;
  --shadow-hard: -5px 5px 0 var(--line);
  --dur: 180ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* z-index scale */
  --z-header: 30;
  --z-tab-bar: 30;
  --z-safe-top: 40;
  --z-toast: 50;
}
}

/* 01-reset.css */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
img, video, iframe { display: block; max-inline-size: 100%; }
img { block-size: auto; }
}

/* 02-base.css */
@layer base {
/* Client's licensed fonts, Persian-digit builds (ADR-0001): IRANSansX FaNum for body, Anjoman Max FN for display. */
@font-face { font-family: "IRANSans"; font-weight: 400; font-display: swap; src: url("../fonts/IRANSansXFaNum-Regular.woff2") format("woff2"); }
@font-face { font-family: "IRANSans"; font-weight: 500; font-display: swap; src: url("../fonts/IRANSansXFaNum-Medium.woff2") format("woff2"); }
@font-face { font-family: "IRANSans"; font-weight: 600; font-display: swap; src: url("../fonts/IRANSansXFaNum-DemiBold.woff2") format("woff2"); }
@font-face { font-family: "IRANSans"; font-weight: 700; font-display: swap; src: url("../fonts/IRANSansXFaNum-Bold.woff2") format("woff2"); }
@font-face { font-family: "IRANSans"; font-weight: 800; font-display: swap; src: url("../fonts/IRANSansXFaNum-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "IRANSans"; font-weight: 900; font-display: swap; src: url("../fonts/IRANSansXFaNum-Black.woff2") format("woff2"); }
@font-face { font-family: "Anjoman"; font-weight: 400; font-display: swap; src: url("../fonts/AnjomanMaxFN-Regular.woff2") format("woff2"); }
@font-face { font-family: "Anjoman"; font-weight: 500; font-display: swap; src: url("../fonts/AnjomanMaxFN-Medium.woff2") format("woff2"); }
@font-face { font-family: "Anjoman"; font-weight: 600; font-display: swap; src: url("../fonts/AnjomanMaxFN-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Anjoman"; font-weight: 700; font-display: swap; src: url("../fonts/AnjomanMaxFN-Bold.woff2") format("woff2"); }
@font-face { font-family: "Anjoman"; font-weight: 800; font-display: swap; src: url("../fonts/AnjomanMaxFN-ExBold.woff2") format("woff2"); }
@font-face { font-family: "Anjoman"; font-weight: 900; font-display: swap; src: url("../fonts/AnjomanMaxFN-Black.woff2") format("woff2"); }

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body);
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; z-index: var(--z-safe-top);
  block-size: env(safe-area-inset-top, 0px); background: var(--bg);
}
h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); text-wrap: balance; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-text); }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.icon { inline-size: 24px; block-size: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon.is-small { inline-size: 18px; block-size: 18px; }
time, .num { font-variant-numeric: tabular-nums; }
::selection { background: var(--highlight); color: var(--on-highlight); }
}

/* 03-layout.css */
@layer layout {
.container {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--space-6));
  margin-inline: auto;
  padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}
@media (width >= 1024px) {
  .container { padding-inline: max(var(--space-6), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
}
.section { padding-block: var(--space-7); }
.section + .section { border-block-start: var(--rule); }
.section.is-tight { padding-block: var(--space-5); }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.grid { display: grid; gap: 1px; background: var(--line); border: var(--rule); padding: 0; list-style: none; }
.grid > * { background: var(--bg); min-inline-size: 0; }
.grid.is-2 { grid-template-columns: repeat(2, 1fr); }
@media (width >= 640px) { .grid.is-2-md { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 1024px) { .grid.is-3-lg { grid-template-columns: repeat(3, 1fr); } .grid.is-4-lg { grid-template-columns: repeat(4, 1fr); } }
.page-head { padding-block: var(--space-6) var(--space-5); display: grid; gap: var(--space-3); }
.page-title { font-size: var(--text-3xl); font-weight: 900; max-inline-size: 22ch; }
.page-lead { font-size: var(--text-lg); color: var(--muted); max-inline-size: 48ch; }
}

/* 04-components/buttons.css */
@layer components {
.primary-button, .secondary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--touch); padding-inline: var(--space-5); padding-block: var(--space-2);
  border-radius: var(--radius-control); border: 1.5px solid var(--fg);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); line-height: 1.3;
  max-inline-size: 100%; text-align: center; white-space: nowrap; cursor: pointer; /* a button label never wraps */
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.primary-button { background: var(--fg); color: var(--bg); }
.primary-button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.primary-button:disabled, .primary-button[aria-disabled="true"] { background: var(--line-soft); border-color: var(--line-soft); color: var(--muted); cursor: not-allowed; }
.secondary-button { background: transparent; color: var(--fg); }
.secondary-button:hover { background: var(--fg); color: var(--bg); }
.secondary-button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.is-compact { padding-inline: var(--space-4); }
.primary-button.is-wide { inline-size: 100%; margin-block-start: var(--space-5); }
.is-loading { position: relative; color: transparent; pointer-events: none; }
.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; inline-size: 1.25rem; block-size: 1.25rem;
  border: 2px solid currentColor; border-inline-start-color: transparent; border-radius: 50%; color: var(--bg);
  animation: fe-spin .8s linear infinite;
}
.text-button {
  display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--touch);
  border: 0; background: none; padding: 0; cursor: pointer;
  font-weight: 700; font-size: var(--text-sm);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px;
}
.text-button.is-quiet { text-decoration: none; color: var(--muted); font-weight: 500; font-size: var(--text-xs); }
.text-button.is-quiet:hover { color: var(--fg); }
.icon-button {
  position: relative; display: inline-grid; place-items: center; inline-size: var(--touch); block-size: var(--touch);
  border-radius: var(--radius-control); border: 1.5px solid transparent; background: transparent; cursor: pointer; flex: none;
}
.icon-button:hover { border-color: var(--fg); color: var(--fg); }
.icon-button.is-filled { background: var(--fg); color: var(--bg); }
.icon-button.is-filled:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.count-badge {
  position: absolute; inset-block-start: 4px; inset-inline-end: 2px;
  min-inline-size: 1.15rem; block-size: 1.15rem; padding-inline: 4px; border-radius: 999px;
  display: grid; place-items: center; background: var(--accent); color: var(--on-accent);
  font-size: var(--text-2xs); font-weight: 800; line-height: 1; border: 1.5px solid var(--bg);
}
.count-badge.is-inline { position: static; border: 0; }
.count-badge:empty { display: none; }

/* save (bookmark) toggle; state arrives from fe/v1/me after load (rule 13) */
.save-button { position: relative; z-index: 2; }
.save-button .icon-on { display: none; }
.save-button[aria-pressed="true"] .icon-on { display: block; fill: currentColor; }
.save-button[aria-pressed="true"] .icon-off { display: none; }
.save-button[aria-pressed="true"] { color: var(--accent-text); }
.secondary-button.save-button[aria-pressed="true"] { color: var(--bg); }

@keyframes fe-spin { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) {
  .primary-button, .secondary-button { transition: none; }
  .is-loading::after { animation: none; }
}
}

/* 04-components/header.css */
@layer components {
.dateline { border-block-end: var(--rule); font-size: var(--text-xs); color: var(--muted); }
.dateline .container { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-header);
  background: var(--bg); border-block-end: var(--rule);
  transition: transform 220ms var(--ease);
}
.header-inner { display: flex; align-items: center; gap: var(--space-5); min-block-size: var(--header-h); }
.brand { display: block; flex: none; inline-size: 3.25rem; block-size: 3.25rem; }
.brand img { inline-size: 100%; block-size: 100%; }
.main-nav { display: none; flex: 1; }
.main-nav ul { display: flex; gap: var(--space-1); }
.main-nav a { display: inline-flex; align-items: center; min-block-size: var(--touch); padding-inline: var(--space-3); font-weight: 500; font-size: var(--text-sm); white-space: nowrap; }
.main-nav a[aria-current="page"] { font-weight: 800; }
.main-nav a[aria-current="page"]::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent); margin-inline-end: var(--space-2); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.auth-full, .header-search { display: none; }
.auth-compact {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-1);
  min-block-size: 2rem; padding-inline: var(--space-3); border: 1.5px solid var(--fg); border-radius: var(--radius-control);
  font-size: var(--text-xs); font-weight: 700; line-height: 1;
}
.auth-compact::after { content: ""; position: absolute; inset: -6px -2px; } /* 44px hit area */
.auth-compact:hover { background: var(--fg); color: var(--bg); }
.avatar {
  display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--highlight); color: var(--on-highlight); border: 1.5px solid var(--line);
  font-family: var(--font-display); font-weight: 900; font-size: var(--text-sm); line-height: 1;
}
.avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.avatar[data-tone="r"] { background: var(--brand-red); color: #fff; }
.avatar[data-tone="k"] { background: var(--fg); color: var(--bg); }
.avatar[data-tone="p"] { background: var(--surface); color: var(--fg); }
.avatar.is-large { inline-size: 3rem; block-size: 3rem; font-size: var(--text-lg); }
.avatar.is-xl { inline-size: 6rem; block-size: 6rem; font-size: var(--text-2xl); }
.user-link { display: inline-grid; place-items: center; inline-size: var(--touch); block-size: var(--touch); }
/* Logged-in header actions are hidden until fe/v1/me answers (rule 13). */
.site[data-auth="guest"] .auth-user, .site[data-auth="user"] .auth-guest { display: none; }
.site[data-auth="user"] .auth-user { display: contents; }
@media (width >= 1024px) {
  .main-nav, .header-search { display: flex; }
  .site[data-auth="guest"] .auth-full { display: contents; }
  .auth-compact { display: none; }
}
@media (width < 1024px) {
  .site-header.is-hidden { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
}
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
}

/* 04-components/tab-bar.css */
@layer components {
/* Bottom tab bar, < 1024px, same size on phone and tablet (ARCHITECTURE §5.5, rule 7). */
.tab-bar { display: none; }
@media (width < 1024px) {
  .site { padding-block-end: calc(var(--tab-bar-h) + env(safe-area-inset-bottom, 0px)); }
  .tab-bar {
    display: block; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-tab-bar);
    background: var(--bg); border-block-start: var(--rule);
    padding-block-end: env(safe-area-inset-bottom, 0px);
    padding-inline: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }
  .tab-bar-items { display: grid; grid-template-columns: repeat(5, 1fr); max-inline-size: 560px; margin-inline: auto; block-size: var(--tab-bar-h); }
  .tab-bar-item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    block-size: 100%; min-inline-size: var(--touch); color: var(--muted); font-size: var(--text-2xs); font-weight: 500; line-height: 1.1;
  }
  .tab-bar-item[aria-current="page"] { color: var(--fg); font-weight: 800; }
  .tab-bar-item[aria-current="page"]::before {
    content: ""; position: absolute; inset-block-start: 4px; inset-inline-start: calc(50% + 9px);
    inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent);
  }
}
}

/* 04-components/section-header.css */
@layer components {
.section-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-5); }
.section-title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-2xl); font-weight: 900; }
.section-title::before { content: ""; inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: var(--accent); flex: none; }
.section-title.is-small { font-size: var(--text-xl); }
.section-kicker { color: var(--muted); font-size: var(--text-xs); margin-block-start: var(--space-1); }
.section.is-inverse { --bg: var(--band-bg); --fg: var(--band-fg); --muted: var(--band-muted); --line: var(--band-fg); --accent-text: var(--brand-yellow); background: var(--bg); color: var(--fg); }
.section.is-inverse + .section { border-block-start: 0; }
.empty-state { padding: var(--space-6); border: 1.5px dashed var(--line-soft); text-align: center; color: var(--muted); font-size: var(--text-sm); }
}

/* 04-components/badge.css */
@layer components {
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding-inline: var(--space-2); border: var(--rule); border-radius: var(--radius-small); font-size: var(--text-xs); font-weight: 700; line-height: 1.7; inline-size: fit-content; white-space: nowrap; }
.badge.is-solid { background: var(--fg); color: var(--bg); }
.badge.is-highlight { background: var(--highlight); color: var(--on-highlight); border-color: var(--on-highlight); }
.badge.is-success { color: var(--success); border-color: var(--success); }
.badge.is-warning { color: var(--accent-text); border-color: var(--accent-text); border-style: dashed; }
.card-meta { font-size: var(--text-xs); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.card-meta b { color: var(--fg); font-weight: 700; }
.card-meta a:hover { color: var(--accent-text); }
.rating { display: inline-flex; gap: 4px; }
.rating span { inline-size: 0.7rem; block-size: 0.7rem; border-radius: 50%; border: 1.5px solid var(--accent); }
.rating span.is-on { background: var(--accent); }
.clip { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xs); color: var(--muted); border-block: var(--rule-soft); padding-block: var(--space-1); }
}

/* 04-components/card.css */
@layer components {
/* Cards: one component, variants as modifiers (.hot-item, .latest-row, .product-card, .video-card, .past-card, .book-card). */
.card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card:hover { z-index: 1; transform: translate(4px, -4px); box-shadow: var(--shadow-hard); }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-title { font-size: var(--text-lg); font-weight: 800; }
.card-excerpt { font-size: var(--text-sm); color: var(--muted); }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-block-start: auto; }
.card-footer .save-button { margin-inline-end: calc(-1 * var(--space-2)); }

/* media: real images, or poster blocks from the logo when there is none */
.card-media { aspect-ratio: 16 / 10; max-inline-size: 100%; background-color: #1d1b14; position: relative; overflow: hidden; }
.card-media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.card-media[data-tone="1"] { background: radial-gradient(circle at 30% 42%, var(--brand-yellow) 0 24%, transparent 24.5%), linear-gradient(160deg, #26231a, #000); }
.card-media[data-tone="2"] { background: linear-gradient(118deg, var(--brand-yellow) 0 56%, #000 56.3%); }
.card-media[data-tone="3"] { background: radial-gradient(circle, #F6F3EA 0 16%, transparent 17%) 0 50% / 33.34% 100% repeat-x, var(--brand-red); }
.card-media[data-tone="4"] { background: repeating-linear-gradient(90deg, #000 0 11%, #2b2820 11% 12.5%); }
.card-media[data-tone="5"] { background: radial-gradient(ellipse at 75% 20%, rgb(201 37 44 / .75), transparent 55%), linear-gradient(170deg, #3a352a, #0d0c09); }
.card-media[data-tone="6"] { background: radial-gradient(#5d594f 32%, transparent 33%) 0 0 / 7px 7px, #a9a497; }
.card-media[data-tone="7"] { background: linear-gradient(0deg, #000 0 38%, transparent 38%), radial-gradient(circle at 50% 62%, var(--brand-red) 0 26%, var(--brand-yellow) 26.5%); }

/* magazine products */
.product-grid { grid-template-columns: repeat(2, 1fr); }
@media (width >= 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
.cover-thumb {
  aspect-ratio: 3 / 4; max-inline-size: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
  padding: var(--space-3); border: var(--rule); background: #000; color: var(--brand-yellow);
  font-family: var(--font-display); font-weight: 900;
}
.cover-thumb img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cover-thumb small { font-size: var(--text-xs); color: #F6F3EA; font-weight: 700; }
.cover-thumb strong { font-size: clamp(2.5rem, 8vw, 4rem); line-height: 1; }
.cover-thumb[data-tone="y"] { background: var(--brand-yellow); color: #000; }
.cover-thumb[data-tone="y"] small { color: #000; }
.cover-thumb[data-tone="r"] { background: var(--brand-red); color: #fff; }
.cover-thumb[data-tone="r"] small { color: #fff; }
.product-card .card-title { font-size: var(--text-base); }
.card-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-block-start: auto; }
.price { font-weight: 800; font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.price small { font-weight: 500; font-size: var(--text-xs); color: var(--muted); }
.product-card.is-sold-out .cover-thumb { filter: grayscale(1); }

/* hot */
.hot-list { grid-template-columns: 1fr; }
.hot-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.hot-rank { font-family: var(--font-display); font-weight: 900; font-size: 2.75rem; line-height: 1; color: var(--accent-text); min-inline-size: 1.4ch; }
.hot-item.is-featured { display: flex; }
.hot-item.is-featured .hot-rank { position: absolute; inset-block-start: var(--space-4); inset-inline-start: var(--space-4); z-index: 1; display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 1.75rem; }
.hot-item.is-featured .card-title { font-size: var(--text-xl); }
@media (width >= 1024px) {
  .hot-list { grid-template-columns: 2fr 1fr 1fr; }
  .hot-item.is-featured { grid-row: span 2; }
}

/* latest (dated rows) */
.latest-row { position: relative; display: grid; grid-template-columns: 7.5rem 1fr; grid-template-areas: "date date" "media body"; gap: var(--space-3) var(--space-4); padding: var(--space-4); }
.latest-date { grid-area: date; font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); line-height: 1; color: var(--muted); }
.latest-row .card-media { grid-area: media; aspect-ratio: 1; }
.latest-body { grid-area: body; display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.latest-row .card-excerpt { display: none; }
.latest-row.is-highlight { --bg: var(--highlight); --fg: var(--on-highlight); --muted: var(--muted-on-highlight); --line: #000; --accent-text: #000; background: var(--bg); color: var(--fg); }
@media (width >= 768px) {
  .latest-row { grid-template-columns: 11rem 14rem 1fr; grid-template-areas: "date media body"; padding: var(--space-4) var(--space-5); }
  .latest-date { font-size: var(--text-2xl); }
  .latest-row .card-media { aspect-ratio: 16 / 10; }
  .latest-row .card-excerpt { display: block; max-inline-size: 60ch; }
}

/* videos */
.video-grid { grid-template-columns: 1fr; }
.video-card .card-media { display: grid; place-items: center; }
.play { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; background: var(--brand-yellow); color: #000; border: 1.5px solid #000; }
.play .icon { fill: currentColor; }
.duration { position: absolute; inset-block-end: var(--space-2); inset-inline-start: var(--space-2); background: #000; color: #fff; font-size: var(--text-xs); font-weight: 700; padding-inline: var(--space-2); font-variant-numeric: tabular-nums; }
.video-card.is-featured .card-title { font-size: var(--text-xl); }
.video-card.is-featured .play { inline-size: 4.5rem; block-size: 4.5rem; }
@media (width >= 768px) {
  .video-grid { grid-template-columns: 2fr 1fr; }
  .video-card.is-featured { grid-row: span 2; }
}

/* reviews / past / books */
.review-grid { grid-template-columns: 1fr; }
@media (width >= 640px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 1024px) { .review-grid { grid-template-columns: repeat(4, 1fr); } }
.past-grid { grid-template-columns: 1fr; }
@media (width >= 768px) { .past-grid { grid-template-columns: repeat(3, 1fr); } }
.past-card .card-media { filter: grayscale(1) contrast(1.1); aspect-ratio: 4 / 3; }
.book-grid { grid-template-columns: repeat(2, 1fr); }
@media (width >= 1024px) { .book-grid { grid-template-columns: repeat(4, 1fr); } }
.book-cover {
  aspect-ratio: 2 / 3; max-inline-size: 100%; display: flex; flex-direction: column; justify-content: end; gap: var(--space-2); overflow: hidden;
  padding: var(--space-3); padding-inline-start: var(--space-5); border: var(--rule); position: relative;
  font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); line-height: 1.3;
}
.book-cover img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.book-cover::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0.6rem; background: rgb(0 0 0 / .25); z-index: 1; }
.book-cover small { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); }
.book-cover[data-tone="a"] { background: #000; color: var(--brand-yellow); }
.book-cover[data-tone="b"] { background: var(--brand-yellow); color: #000; }
.book-cover[data-tone="c"] { background: var(--brand-red); color: #fff; }
.book-cover[data-tone="d"] { background: #E9E4D6; color: #14120C; }

/* generic listing grid (archives) */
.post-grid { grid-template-columns: 1fr; }
@media (width >= 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}
}

/* 04-components/issue-hero.css */
@layer components {
.issue-hero {
  --bg: var(--highlight); --fg: var(--on-highlight); --muted: var(--muted-on-highlight); --line: #000; --accent-text: #000;
  background: var(--bg); color: var(--fg); border-block-end: var(--rule); overflow: clip;
}
.issue-hero-inner { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-7); align-items: center; }
.issue-hero .eyebrow { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.issue-hero h1, .issue-hero .hero-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 900; line-height: var(--leading-tight); margin-block: var(--space-4); }
.issue-hero .lead { font-size: var(--text-lg); max-inline-size: 34ch; margin-block-end: var(--space-5); }
.issue-cover-wrap { position: relative; justify-self: center; inline-size: min(100%, 22rem); }
.issue-cover {
  display: flex; flex-direction: column; aspect-ratio: 3 / 4; background: #000; color: #F6F3EA; position: relative; overflow: hidden;
  border: 1.5px solid #000; padding: var(--space-4); gap: var(--space-3); box-shadow: -10px 10px 0 #000;
  transform: rotate(-2deg); transition: transform var(--dur) var(--ease);
}
.issue-cover:hover { color: #F6F3EA; transform: rotate(0deg); }
.issue-cover img.cover-image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.issue-cover-top { display: flex; justify-content: space-between; align-items: start; font-size: var(--text-xs); }
.issue-cover-top img { inline-size: 4.25rem; block-size: 4.25rem; }
.issue-cover-number { font-family: var(--font-display); font-weight: 900; font-size: 5.5rem; line-height: 1; color: var(--brand-yellow); margin-block-start: auto; }
.issue-cover-story { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.3; }
.issue-cover-dots { display: flex; gap: var(--space-2); }
.issue-cover-dots span { inline-size: 1rem; block-size: 1rem; border-radius: 50%; background: var(--brand-red); }
.sticker {
  position: absolute; inset-block-start: -1.25rem; inset-inline-end: -0.75rem; z-index: 1;
  display: grid; place-items: center; inline-size: 6.25rem; block-size: 6.25rem; border-radius: 50%;
  background: var(--brand-red); color: #fff; border: 1.5px solid #000;
  font-family: var(--font-display); font-weight: 900; font-size: var(--text-base); line-height: 1.2; text-align: center;
  transform: rotate(12deg);
}
@media (width >= 768px) { .issue-hero-inner { grid-template-columns: 1.35fr 1fr; padding-block: var(--space-7) var(--space-8); } }

/* issue page */
.issue-page { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-7); }
.issue-page .issue-cover-wrap { inline-size: min(100%, 18rem); justify-self: start; }
.toc { border-block-start: var(--rule); }
.toc li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding-block: var(--space-3); border-block-end: var(--rule-soft); align-items: baseline; }
.toc .toc-title { font-weight: 700; }
.toc .toc-title a { text-decoration: underline; text-underline-offset: 4px; }
.toc .toc-page { font-family: var(--font-display); font-weight: 900; color: var(--muted); }
.toc .toc-writers { font-size: var(--text-xs); color: var(--muted); }
@media (width >= 1024px) { .issue-page { grid-template-columns: 18rem 1fr; align-items: start; } }
.issues-year { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 900; margin-block: var(--space-6) var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
.issues-year::after { content: ""; flex: 1; border-block-start: var(--rule); }
.issue-grid { grid-template-columns: repeat(2, 1fr); }
@media (width >= 640px) { .issue-grid { grid-template-columns: repeat(3, 1fr); } }
@media (width >= 1024px) { .issue-grid { grid-template-columns: repeat(6, 1fr); } }
}

/* 04-components/month-strips.css */
@layer components {
.month-strips { grid-template-columns: repeat(3, 1fr); }
.month-strip { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); min-block-size: 5.5rem; padding: var(--space-3); font-family: var(--font-display); }
.month-name { font-size: var(--text-lg); font-weight: 900; }
.month-count { font-family: var(--font-body); font-size: var(--text-xs); color: var(--muted); }
a.month-strip:hover { background: var(--fg); color: var(--bg); }
a.month-strip:hover .month-count { color: var(--bg); }
.month-strip.is-current { --muted: var(--muted-on-highlight); background: var(--highlight); color: var(--on-highlight); }
.month-strip.is-upcoming { color: var(--muted); background: repeating-linear-gradient(-45deg, transparent 0 9px, var(--line-soft) 9px 10px); }
.month-strip.is-upcoming .month-name { font-weight: 700; }
.month-strip.is-empty { color: var(--muted); }
@media (width >= 640px) { .month-strips { grid-template-columns: repeat(6, 1fr); } }
@media (width >= 1024px) {
  .month-strips { grid-template-columns: repeat(12, 1fr); }
  .month-strip { min-block-size: 17rem; align-items: center; padding: var(--space-4) var(--space-2); }
  .month-name { writing-mode: vertical-rl; font-size: var(--text-xl); margin-block: auto; }
}
}

/* 04-components/segmented.css */
@layer components {
.segmented { display: inline-flex; flex-wrap: wrap; border: var(--rule); border-radius: var(--radius-control); overflow: hidden; }
.segmented button, .segmented a {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: var(--touch); min-inline-size: 4rem; padding-inline: var(--space-3);
  border: 0; border-inline-start: var(--rule); background: transparent; font-weight: 700; font-size: var(--text-sm); cursor: pointer;
}
.segmented > :first-child { border-inline-start: 0; }
.segmented button:hover, .segmented a:hover { background: var(--highlight-soft); color: var(--fg); }
.segmented button[aria-pressed="true"], .segmented a[aria-current] { background: var(--fg); color: var(--bg); }
}

/* 04-components/form.css */
@layer components {
.field { display: grid; gap: var(--space-2); }
.field > label { font-weight: 700; font-size: var(--text-sm); }
.input, .select {
  inline-size: 100%; min-block-size: var(--touch); padding: var(--space-3);
  border: 1.5px solid var(--line); border-radius: var(--radius-control); background: var(--bg);
  font-size: var(--text-base); line-height: var(--leading-body);
}
textarea.input { min-block-size: 7.5rem; resize: vertical; }
.input::placeholder { color: var(--muted); }
.input[aria-invalid="true"] { border-color: var(--accent-text); background: var(--danger-bg); }
.field-hint { font-size: var(--text-xs); color: var(--muted); }
.field-error { display: flex; gap: var(--space-2); align-items: start; font-size: var(--text-xs); font-weight: 700; color: var(--accent-text); }
.field-error .icon { inline-size: 18px; block-size: 18px; }
.checkbox { display: flex; gap: var(--space-2); align-items: center; min-block-size: var(--touch); font-size: var(--text-sm); }
.checkbox input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--fg); }
.search-form { display: flex; gap: var(--space-2); max-inline-size: 40rem; }
.search-form .input { flex: 1; }
/* OpenPorte widget inside our forms */
.altcha-widget { --altcha-border-radius: var(--radius-control); --altcha-color-border: var(--line); --altcha-color-base: var(--bg); --altcha-color-text: var(--fg); --altcha-max-width: 100%; font-family: inherit; font-size: var(--text-sm); }
.altcha-slot { flex: 1 1 16rem; min-inline-size: 0; }
}

/* 04-components/article.css */
@layer components {
.article-header { padding-block: var(--space-6) var(--space-5); display: grid; gap: var(--space-4); }
.article-title { font-size: var(--text-3xl); font-weight: 900; max-inline-size: 22ch; }
.article-kicker { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--accent-text); }
.article-dek { font-size: var(--text-lg); color: var(--muted); max-inline-size: 48ch; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.byline .card-meta { font-size: var(--text-xs); }
.byline-writers { display: flex; align-items: center; gap: var(--space-2); }
.byline-writers .avatar { margin-inline-end: calc(-1 * var(--space-3)); }
.byline-writers .avatar:last-of-type { margin-inline-end: 0; }
.article-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-3); border-block: var(--rule); }
.article-toolbar .spacer { flex: 1; }
.article-hero { aspect-ratio: 21 / 9; margin-block: var(--space-5); border: var(--rule); }
.article-hero img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.article-hero-caption { font-size: var(--text-xs); color: var(--muted); margin-block-start: calc(-1 * var(--space-3)); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding-block-end: var(--space-7); }
.article-layout > * { min-inline-size: 0; }
@media (width >= 1024px) { .article-layout { grid-template-columns: minmax(0, 40rem) 1fr; } }
.aside-list { position: sticky; top: calc(var(--header-h) + var(--space-5)); align-self: start; }
.issue-box { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-4); border: var(--rule); background: var(--surface); max-inline-size: 40rem; margin-block: var(--space-6); }
.issue-box .stack { min-inline-size: 0; align-items: start; }
.issue-box .cover-thumb strong { font-size: 2rem; }
.article-topics { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-5); }
.article-films { display: grid; gap: var(--space-3); margin-block: var(--space-5); }

/* video facade: nothing third-party loads before the reader presses play (ADR-0003 §2) */
.video-facade { position: relative; aspect-ratio: 16 / 9; margin-block: var(--space-5); border: var(--rule); background: #000; display: grid; place-items: center; overflow: hidden; }
.video-facade img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .75; }
.video-facade .play { inline-size: 4.5rem; block-size: 4.5rem; cursor: pointer; }
.video-facade iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.video-facade .video-provider { position: absolute; inset-block-end: var(--space-3); inset-inline-end: var(--space-3); background: #000; color: #fff; font-size: var(--text-xs); padding-inline: var(--space-2); z-index: 1; }

/* writer page */
.writer-head { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center; padding-block: var(--space-6); }
.writer-head .page-title { font-size: var(--text-2xl); }
.writer-bio { color: var(--muted); font-size: var(--text-base); max-inline-size: 60ch; white-space: pre-line; }
.writer-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--touch); }

/* film page */
.film-head { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr; gap: var(--space-5); align-items: start; padding-block: var(--space-6); }
.film-poster { aspect-ratio: 2 / 3; border: var(--rule); background: #000; }
.film-poster img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.film-title-en { font-family: var(--font-body); font-weight: 500; color: var(--muted); font-size: var(--text-lg); direction: ltr; text-align: start; }
.writer-box { display: grid; gap: var(--space-2); padding: var(--space-4); border: var(--rule); max-inline-size: 40rem; margin-block: var(--space-5); }
.writer-box .writer-bio { font-size: var(--text-sm); }
}

/* 04-components/prose.css */
@layer components {
/* Post content (also loaded in the editor). */
.prose { max-inline-size: 40rem; font-size: var(--text-base); }
.prose > * + * { margin-block-start: 1.1em; }
.prose h2 { font-size: var(--text-xl); font-weight: 900; margin-block-start: 1.8em; }
.prose h3 { font-size: var(--text-lg); font-weight: 800; margin-block-start: 1.5em; }
.prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.prose mark { background: var(--highlight); color: var(--on-highlight); padding-inline: 2px; }
.prose blockquote, .pull-quote { border-block: 3px solid var(--line); padding-block: var(--space-4); font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.5; }
.prose blockquote::before, .pull-quote::before { content: ""; display: block; inline-size: 0.7rem; block-size: 0.7rem; border-radius: 50%; background: var(--accent); margin-block-end: var(--space-2); }
.prose blockquote p + p { margin-block-start: .6em; }
.prose figure { margin-inline: 0; }
.prose figcaption { font-size: var(--text-xs); color: var(--muted); margin-block-start: var(--space-2); }
.prose img { border: var(--rule); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-block-start: .4em; }
.prose hr { border: 0; border-block-start: var(--rule); margin-block: var(--space-6); }
.prose table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { border: var(--rule-soft); padding: var(--space-2) var(--space-3); text-align: start; }
.prose .wp-block-embed__wrapper, .prose .wp-block-video { border: var(--rule); }
.prose iframe { max-inline-size: 100%; }
.prose .alignwide, .prose .alignfull { max-inline-size: none; }
.prose .wp-element-caption { font-size: var(--text-xs); color: var(--muted); }
.prose .footnotes { font-size: var(--text-sm); color: var(--muted); border-block-start: var(--rule-soft); padding-block-start: var(--space-4); }

/* Editor presets from theme.json, mapped to tokens (core global-styles is not loaded, inc/assets.php). */
.prose .has-bg-color { color: var(--bg); }
.prose .has-bg-background-color { background-color: var(--bg); }
.prose .has-surface-color { color: var(--surface); }
.prose .has-surface-background-color { background-color: var(--surface); }
.prose .has-fg-color { color: var(--fg); }
.prose .has-fg-background-color { background-color: var(--fg); }
.prose .has-muted-color { color: var(--muted); }
.prose .has-muted-background-color { background-color: var(--muted); }
.prose .has-accent-color { color: var(--accent); }
.prose .has-accent-background-color { background-color: var(--accent); }
.prose .has-highlight-color { color: var(--highlight); }
.prose .has-highlight-background-color { background-color: var(--highlight); }
.prose .has-xs-font-size { font-size: var(--text-xs); }
.prose .has-sm-font-size { font-size: var(--text-sm); }
.prose .has-base-font-size { font-size: var(--text-base); }
.prose .has-lg-font-size { font-size: var(--text-lg); }
.prose .has-xl-font-size { font-size: var(--text-xl); }
}

/* 04-components/comments.css */
@layer components {
.comments { max-inline-size: 46rem; display: grid; gap: var(--space-5); scroll-margin-block-start: calc(var(--header-h) + var(--space-5)); }
.comments-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.comments-rules { display: flex; gap: var(--space-2); align-items: start; font-size: var(--text-xs); color: var(--muted); }
.composer { border: var(--rule); background: var(--surface); padding: var(--space-4); display: grid; gap: var(--space-3); }
.composer-who { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.composer-who span { color: var(--muted); font-size: var(--text-xs); }
.composer-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.counter { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.comment-list { display: grid; gap: 0; border-block-start: var(--rule); }
.comment-list .children { list-style: none; padding: 0; }
.comment { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding-block: var(--space-4); border-block-end: var(--rule-soft); scroll-margin-block-start: calc(var(--header-h) + var(--space-5)); }
.comment-body { display: grid; gap: var(--space-1); min-inline-size: 0; }
.comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.comment-head b { font-weight: 800; }
.comment-head time, .comment-head .reply-to { font-size: var(--text-xs); color: var(--muted); }
.comment-text { font-size: var(--text-base); overflow-wrap: anywhere; }
.comment-text p + p { margin-block-start: .5em; }
.comment-actions { display: flex; gap: var(--space-4); }
.comment-replies, .comment > .children { grid-column: 2; display: grid; border-inline-start: 2px solid var(--line); padding-inline-start: var(--space-4); margin-block-start: var(--space-2); }
.comment-replies .comment, .children .comment { border-block-end: 0; padding-block: var(--space-3); }
.comment.is-pending { padding-inline: var(--space-3); border: 1.5px dashed var(--accent-text); background: var(--surface); }
.comment.is-highlight, .comment:target { background: var(--highlight-soft); box-shadow: 0 0 0 var(--space-2) var(--highlight-soft); }
.comments-gate { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-5); border: var(--rule); background: var(--surface); }
.comment-nav { display: flex; justify-content: space-between; gap: var(--space-3); }
}

/* 04-components/account.css */
@layer components {
/* My Account: WooCommerce markup styled through its stable classes + our panels (no template overrides, rule 4). */
.account-head { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-6) var(--space-5); }
.account-head h1 { font-size: var(--text-2xl); font-weight: 900; }
.account-head p { color: var(--muted); font-size: var(--text-sm); }
.account-layout, .woocommerce-account .woocommerce { display: grid; gap: var(--space-5); padding-block-end: var(--space-7); }
.account-nav, .woocommerce-MyAccount-navigation { overflow-x: auto; border: var(--rule); }
.account-nav ul, .woocommerce-MyAccount-navigation ul { display: flex; list-style: none; margin: 0; padding: 0; }
.account-nav a, .woocommerce-MyAccount-navigation a {
  display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--touch); padding-inline: var(--space-4);
  white-space: nowrap; font-size: var(--text-sm); font-weight: 500; border-inline-start: var(--rule);
}
.account-nav li:first-child a, .woocommerce-MyAccount-navigation li:first-child a { border-inline-start: 0; }
.account-nav a[aria-current="page"], .woocommerce-MyAccount-navigation li.is-active a { background: var(--fg); color: var(--bg); font-weight: 800; }
@media (width >= 1024px) {
  .account-layout, .woocommerce-account .woocommerce { grid-template-columns: 16rem 1fr; align-items: start; }
  .account-nav, .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
  .account-nav ul, .woocommerce-MyAccount-navigation ul { flex-direction: column; }
  .account-nav a, .woocommerce-MyAccount-navigation a { border-inline-start: 0; border-block-start: var(--rule); justify-content: space-between; }
  .account-nav li:first-child a, .woocommerce-MyAccount-navigation li:first-child a { border-block-start: 0; }
}
.account-main, .woocommerce-MyAccount-content { display: grid; gap: var(--space-6); min-inline-size: 0; }
.panel { display: grid; gap: var(--space-4); scroll-margin-block-start: calc(var(--header-h) + var(--space-5)); }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.panel-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xl); font-weight: 900; }
.notification { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-4); }
.notification-text { font-size: var(--text-sm); }
.notification time { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.notification.is-unread { background: var(--surface); }
.notification.is-unread .notification-text { font-weight: 700; }
.notification.is-unread::before { content: ""; position: absolute; inset-block-start: var(--space-4); inset-inline-start: calc(var(--space-2) - 2px); inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); }
.notification-icon { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: var(--rule); border-radius: 50%; background: var(--bg); }
.latest-comment {
  --bg: var(--highlight); --fg: var(--on-highlight); --muted: var(--muted-on-highlight); --line: #000; --accent-text: #000;
  display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--bg); color: var(--fg); border: var(--rule);
}
.latest-comment blockquote { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1.6; }
.latest-comment .where { font-size: var(--text-sm); }
.latest-comment .where a { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.my-comment { display: grid; gap: var(--space-2); padding: var(--space-4); }
.my-comment p { font-size: var(--text-sm); }
.saved-grid { grid-template-columns: 1fr; }
@media (width >= 640px) { .saved-grid { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 1200px) { .saved-grid { grid-template-columns: repeat(3, 1fr); } }
.saved-card .card-media { aspect-ratio: 16 / 9; }
}

/* 04-components/login.css */
@layer components {
/* Sign-in page: Pinova's partial inside the site layout (inc/login.php). Its own CSS is scoped to .pinova-container. */
.login-page .page-head { text-align: center; justify-items: center; }
.login-page .page-lead { margin-inline: auto; }
.login-box { max-inline-size: 26rem; margin-inline: auto; padding: var(--space-4); border: var(--rule); background: var(--surface); }
.login-box label { display: block; font-weight: 700; font-size: var(--text-sm); margin-block-end: var(--space-2); }
.login-box input:is([type="text"], [type="tel"], [type="password"], [type="number"]) {
  inline-size: 100%; min-block-size: var(--touch); padding: var(--space-3);
  border: 1.5px solid var(--line); border-radius: var(--radius-control); background: var(--bg); color: var(--fg); font-size: var(--text-base);
}
.login-box .primary-button { inline-size: 100%; text-align: center; }
.login-box .pinova-step { display: grid; gap: var(--space-3); }
.login-box .required { color: var(--accent-text); }
/* Pinova's history-back arrow on the first step; the site header already navigates. */
.login-box [pinova-on\:click="pinovaGoBack()"] { display: none; }
.login-box [pinova-on\:click="backStep()"] { display: grid; place-items: center; min-inline-size: var(--touch); min-block-size: var(--touch); }
}

/* 04-components/pagination.css */
@layer components {
.pagination { display: flex; justify-content: center; margin-block: var(--space-6); }
.pagination .nav-links { display: inline-flex; flex-wrap: wrap; border: var(--rule); border-radius: var(--radius-control); overflow: hidden; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--touch); min-block-size: var(--touch); padding-inline: var(--space-3); border-inline-start: var(--rule); font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.pagination .page-numbers:first-child { border-inline-start: 0; }
.pagination .page-numbers:hover { background: var(--highlight-soft); color: var(--fg); }
.pagination .page-numbers.current { background: var(--fg); color: var(--bg); }
.pagination .page-numbers.dots { color: var(--muted); }
.post-nav { display: grid; gap: 1px; background: var(--line); border: var(--rule); margin-block: var(--space-6); }
.post-nav a { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--bg); }
.post-nav small { color: var(--muted); font-size: var(--text-xs); }
.post-nav b { font-family: var(--font-display); font-weight: 800; }
@media (width >= 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
}

/* 04-components/toast.css */
@layer components {
.toast {
  position: fixed; z-index: var(--z-toast); inset-inline: max(var(--space-4), env(safe-area-inset-left, 0px)); inset-block-end: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  margin-inline: auto; max-inline-size: 26rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--band-bg); color: var(--band-fg);
  font-size: var(--text-sm); box-shadow: -4px 4px 0 var(--brand-yellow);
}
.toast a { color: var(--brand-yellow); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; min-block-size: var(--touch); display: inline-flex; align-items: center; }
@media (width < 1024px) { .toast { inset-block-end: calc(var(--tab-bar-h) + var(--space-3) + env(safe-area-inset-bottom, 0px)); } }
}

/* 04-components/footer.css */
@layer components {
.site-footer { --bg: var(--band-bg); --fg: var(--band-fg); --muted: var(--band-muted); --line: var(--band-fg); --accent-text: var(--brand-yellow); background: var(--bg); color: var(--fg); }
.footer-inner { display: grid; gap: var(--space-6); padding-block: var(--space-7); }
.footer-brand { display: flex; align-items: center; gap: var(--space-4); }
.footer-brand img { inline-size: 4.5rem; block-size: 4.5rem; }
.footer-brand p { color: var(--muted); font-size: var(--text-sm); max-inline-size: 30ch; }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.footer-cols h2 { font-size: var(--text-sm); color: var(--muted); font-weight: 700; margin-block-end: var(--space-2); }
.footer-cols a { display: inline-flex; align-items: center; min-block-size: var(--touch); font-size: var(--text-sm); }
.footer-legal { border-block-start: 1px solid #4A463C; padding-block: var(--space-4); font-size: var(--text-xs); color: var(--muted); }
@media (width >= 1024px) {
  .footer-inner { grid-template-columns: 1fr 2fr; }
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
}
}

/* 05-woocommerce.css */
@layer woocommerce {
/* WooCommerce: its own stable classes mapped onto tokens (ARCHITECTURE §6). No template overrides. */
.woocommerce .button, .wc-block-components-button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--touch); padding-inline: var(--space-5); padding-block: var(--space-2);
  border-radius: var(--radius-control); border: 1.5px solid var(--fg); background: var(--fg); color: var(--bg);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); line-height: 1.3; white-space: nowrap; cursor: pointer;
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.woocommerce .button.alt { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.woocommerce .button:disabled, .woocommerce button.button:disabled { background: var(--line-soft); border-color: var(--line-soft); color: var(--muted); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-input-wrapper .input-text {
  inline-size: 100%; min-block-size: var(--touch); padding: var(--space-3);
  border: 1.5px solid var(--line); border-radius: var(--radius-control); background: var(--bg); font-size: var(--text-base);
}
.woocommerce form .form-row label { font-weight: 700; font-size: var(--text-sm); }
.woocommerce form .form-row input[readonly] { background: var(--surface); color: var(--muted); }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border: var(--rule); border-inline-start: 4px solid var(--accent); padding: var(--space-3) var(--space-4); background: var(--surface); font-size: var(--text-sm); list-style: none; margin-block: var(--space-4); }
.woocommerce-message { border-inline-start-color: var(--success); }
.woocommerce table.shop_table { border: var(--rule); border-collapse: collapse; inline-size: 100%; font-size: var(--text-sm); border-radius: 0; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-block-end: var(--rule-soft); padding: var(--space-3); text-align: start; }
.woocommerce table.shop_table th { font-weight: 800; background: var(--surface); }
.woocommerce .woocommerce-breadcrumb { display: none; }
.woocommerce .price, .woocommerce div.product p.price { color: var(--fg); font-weight: 800; font-variant-numeric: tabular-nums; }
.woocommerce .price del { color: var(--muted); font-weight: 500; }
.woocommerce div.product .product_title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 900; }
.woocommerce div.product form.cart .quantity .qty { min-block-size: var(--touch); border: 1.5px solid var(--line); border-radius: var(--radius-control); }
.woocommerce div.product div.images img { border: var(--rule); }
.woocommerce span.onsale { background: var(--accent); color: var(--on-accent); border-radius: var(--radius-small); font-weight: 800; min-block-size: 0; line-height: 1.8; padding-inline: var(--space-2); }
.woocommerce ul.products li.product { border: var(--rule); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: var(--bg); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 800; }
.woocommerce ul.products li.product a img { border: var(--rule); margin-block-end: 0; aspect-ratio: 3 / 4; object-fit: cover; }
.woocommerce ul.products li.product .button { margin-block-start: auto; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { font-size: var(--text-sm); color: var(--muted); }
.woocommerce .woocommerce-ordering select { min-block-size: var(--touch); border: var(--rule); border-radius: var(--radius-control); padding-inline: var(--space-3); background: var(--bg); }
.woocommerce nav.woocommerce-pagination ul { border: var(--rule); border-radius: var(--radius-control); overflow: hidden; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; border-inline-start: var(--rule); }
.woocommerce nav.woocommerce-pagination ul li:first-child { border-inline-start: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-inline-size: var(--touch); min-block-size: var(--touch); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--fg); color: var(--bg); }
.woocommerce-account .woocommerce-MyAccount-navigation li a::before { display: none; }
.woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 { font-family: var(--font-display); font-weight: 900; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button { padding-inline: var(--space-3); min-block-size: 2.25rem; }
.wc-block-components-notice-banner { border-radius: var(--radius-control); }
/* Notices: the coloured inline-start border is the signal; WooCommerce's icon is positioned for its own padding. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.woocommerce-message .button { margin-inline-start: var(--space-3); }
/* Block cart on phones: image | product | line total, without overflowing the container. */
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 80px minmax(0, 1fr) auto; column-gap: var(--space-3); }
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-item__total { grid-column: 3; }
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { inline-size: 100%; background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-size: var(--text-base); }
.wc-block-components-totals-wrapper, .wc-block-cart-items { border-color: var(--line-soft); }
.wc-block-components-text-input input, .wc-block-components-textarea, .wc-block-components-combobox .wc-block-components-combobox-control input {
  min-block-size: var(--touch); border: 1.5px solid var(--line); border-radius: var(--radius-control); background: var(--bg); color: var(--fg);
}
.wc-block-components-quantity-selector { border-radius: var(--radius-control); }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { min-inline-size: var(--touch); min-block-size: var(--touch); }
/* Order received / view order: overview as a two-column grid instead of floated dashed items. */
.woocommerce ul.order_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); padding: 0; margin-block: var(--space-4); }
.woocommerce ul.order_details::before, .woocommerce ul.order_details::after { content: none; }
.woocommerce ul.order_details li { float: none; margin: 0; padding: var(--space-3); border: var(--rule-soft); font-size: var(--text-sm); color: var(--muted); }
.woocommerce ul.order_details li strong { display: block; margin-block-start: var(--space-1); color: var(--fg); font-size: var(--text-base); }
}

/* 06-utilities.css */
@layer utilities {
[hidden] { display: none; }
.visually-hidden, .screen-reader-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.screen-reader-text:focus { position: static; inline-size: auto; block-size: auto; clip-path: none; white-space: normal; padding: var(--space-2) var(--space-4); background: var(--highlight); color: var(--on-highlight); }
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flow > * + * { margin-block-start: var(--space-4); }
.skip-link { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 60; }
}