/* ==========================================================================
   Nalichno theme v2 – extra CSS
   Idea: the logo's 3×3 grid becomes a real warehouse rack. Every unit has a
   place; the one red slot is always "the place you go to now".
   Tokens (colours, fonts, sizes, spacing) live in theme.json. Here: section
   helpers (.n-*), the hero rack (.nr-*), real app screenshots (.n-shot).
   Rules: no black, no shadows, no gradients, red only on the current place.
   ========================================================================== */

:root {
	--n-floor: var(--wp--preset--color--floor, #EBEEEC);
	--n-paper: var(--wp--preset--color--paper, #FFFFFF);
	--n-ink: var(--wp--preset--color--ink, #1F2B31);
	--n-steel: var(--wp--preset--color--steel, #4F5C63);
	--n-line: var(--wp--preset--color--line, #CBD3CF);
	--n-green: var(--wp--preset--color--green, #00966E);
	--n-deep: var(--wp--preset--color--deep, #006B4F);
	--n-tint: var(--wp--preset--color--tint, #DDEFE7);
	--n-on-deep: var(--wp--preset--color--on-deep, #C4E6D8);
	--n-red: var(--wp--preset--color--red, #D62612);
	--n-red-tint: var(--wp--preset--color--red-tint, #FCE7E4);
	--n-cond: var(--wp--preset--font-family--condensed, 'Sofia Sans Condensed', sans-serif);
	--n-r-control: 4px;
	--n-r-panel: 8px;
	--n-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Browser surfaces ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 1rem; scrollbar-color: #9AA7A1 var(--n-floor); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums; }
::selection { background: var(--n-tint); color: var(--n-ink); }
:focus-visible { outline: 2px solid var(--n-deep); outline-offset: 3px; border-radius: 2px; }
.has-deep-background-color :focus-visible { outline-color: var(--n-paper); }
a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
:where(.wp-site-blocks) > *,
main.wp-block-group > *,
.wp-block-template-part > * { margin-block-start: 0 !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- TODO placeholder marker (remove class before launch) ---------- */
.n-todo { background: #FEF3C7; color: #7C4A03; padding: 0 .3em; border-radius: 3px; font-weight: 600; }

/* ---------- Header ---------- */
.n-header .wp-block-navigation a { text-decoration: none; }
.n-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: .35em; }
.n-btn-compact .wp-block-button__link { padding: .7rem 1.1rem; }
@media (max-width: 781px) { .n-hide-mobile { display: none !important; } }

/* ---------- Shared bits ---------- */
.n-caption { margin-top: 1rem; }
.wp-block-heading { font-variant-numeric: lining-nums; }
.wp-element-button { transition: background-color .2s var(--n-ease); }
.is-style-outline .wp-block-button__link:hover { background: var(--n-ink); color: var(--n-paper); }

/* Square "slot" bullets taken from the logo grid:
   .n-slots = filled place (green), .n-slots--empty = free place (outline). */
.n-slots { list-style: none; padding-left: 0 !important; margin: 0; }
.n-slots li { position: relative; padding-left: 1.75rem; margin: .55rem 0; }
.n-slots li::before {
	content: ""; position: absolute; left: 0; top: .42em; width: .72rem; height: .72rem;
	background: var(--n-green); border-radius: 1px;
}
.n-slots strong { font-weight: 700; }
.n-slots--empty li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--n-steel); }
.n-slots--large li { font-size: var(--wp--preset--font-size--l); line-height: 1.4; padding-left: 2.25rem; margin: 0 0 1.35rem; }
.n-slots--large li::before { width: .95rem; height: .95rem; top: .32em; }

/* ---------- 1. Hero ---------- */
.n-hero-title { font-size: clamp(2.75rem, 6.9vw, 6rem); }
.n-hero-meta { align-items: flex-start; }
.n-hero-meta p { max-width: 34ch; }
.n-hero-index { padding-top: .3rem; }
.n-hero-index .n-slots li { margin: .35rem 0; }
@media (min-width: 782px) { .n-hero-index { border-left: 1px solid var(--n-line); padding-left: var(--wp--preset--spacing--40); } }

/* The rack: levels are rows of places resting on deep-green beams. */
.nr { margin-top: var(--wp--preset--spacing--50); font-size: 14px; line-height: 1.25; color: var(--n-ink); }
.nr * { box-sizing: border-box; }
.nr-head { display: flex; gap: 1.5rem; align-items: baseline; padding: 0 0 .75rem; border-bottom: 1px solid var(--n-line); margin-bottom: .9rem; color: var(--n-steel); }
.nr-head b { font-family: var(--n-cond); font-size: 1.375rem; font-weight: 700; color: var(--n-ink); letter-spacing: -.005em; }
.nr-head .nr-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.nr-level {
	display: grid; grid-template-columns: 4.5rem repeat(6, minmax(0, 1fr)); gap: 8px;
	padding: 8px 8px 10px 0; border-bottom: 7px solid var(--n-deep); margin-bottom: 14px;
	position: relative;
}
.nr-lvl { align-self: end; font-family: var(--n-cond); font-weight: 600; color: var(--n-steel); padding-bottom: 6px; font-size: 15px; }
.nr-bin {
	position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0;
	background: var(--n-paper); border-radius: 3px; padding: 9px 10px 8px;
	box-shadow: inset 0 0 0 1px var(--n-line);
}
.nr-code { font-family: var(--n-cond); font-weight: 750; font-size: 19px; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--n-ink); }
.nr-bin b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-q { color: var(--n-steel); font-variant-numeric: tabular-nums; font-size: 13px; }
.nr-q ins { text-decoration: none; color: var(--n-red); font-weight: 750; margin-left: .2em; }
.nr-bin .n-barcode { margin-top: 5px; height: 26px; color: var(--n-ink); }
.nr-bin.is-empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--n-line); }
.nr-bin.is-empty .nr-code { color: var(--n-steel); font-weight: 600; }
.nr-bin.is-empty .nr-q { margin-top: auto; }
.nr-bin.is-empty .n-barcode { opacity: .35; }
.nr-bin.is-now { background: var(--n-red-tint); box-shadow: inset 0 0 0 2px var(--n-red); }
.nr-bin.is-now .nr-code { color: var(--n-red); }
.nr-bin.is-now .n-barcode { color: var(--n-red); }
.nr-tag {
	position: absolute; left: -2px; right: -2px; bottom: calc(100% + 6px);
	background: var(--n-red); color: #fff; font-weight: 650; font-size: 12.5px; text-align: center;
	padding: 4px 6px; border-radius: 2px; white-space: nowrap;
}
.nr-floor { height: 0; }
/* the single authored motion: the red place "lands" once on load */
@keyframes nr-land { from { box-shadow: inset 0 0 0 2px transparent; background: var(--n-paper); } to { box-shadow: inset 0 0 0 2px var(--n-red); background: var(--n-red-tint); } }
@keyframes nr-tag { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nr-bin.is-now { animation: nr-land .7s var(--n-ease) .5s both; }
.nr-bin.is-now .nr-tag { animation: nr-tag .6s var(--n-ease) .9s both; }
.nr-level:first-of-type { margin-top: 2.2rem; }
@media (max-width: 1100px) {
	.nr-level { grid-template-columns: 3.6rem repeat(4, minmax(0, 1fr)); }
	.nr-level .nr-bin:nth-of-type(n+5) { display: none; }
}
@media (max-width: 640px) {
	.nr-level { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: 0; gap: 6px; }
	.nr-lvl { grid-column: 1 / -1; padding: 0; font-size: 14px; }
	.nr-level .nr-bin:nth-of-type(n+4) { display: none; }
	.nr-code { font-size: 16px; }
	.nr-bin { padding: 7px 7px 6px; }
	.nr-bin b { font-size: 12.5px; }
	.nr-head span:not(.nr-count) { display: none; }
	.nr-level:nth-of-type(2) { margin-top: 2.6rem; }
}

/* Barcode: SVG drawn by assets/js/barcode.js; before that a quiet placeholder. */
.n-barcode { display: block; height: 28px; width: 100%; }
.n-barcode:not(.is-drawn) { background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px); opacity: .25; }
.n-barcode svg { display: block; width: 100%; height: 100%; }

/* ---------- 2. Inside Shopify ---------- */
.n-statement { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.05; max-width: 17ch; }
@media (min-width: 782px) { .n-band .wp-block-column:first-child { position: sticky; top: 2rem; } }

/* ---------- 3. Features ---------- */
.n-features h2 { max-width: 20ch; }
.n-feature-title { font-family: var(--n-cond); font-weight: 700; line-height: 1.02; letter-spacing: -.01em; max-width: 18ch; }
.n-feature p { max-width: 46ch; }
@media (min-width: 782px) {
	.n-feature-flip { flex-direction: row; }
	.n-feature-low { padding-top: var(--wp--preset--spacing--60); }
}

/* ---------- 4. How it works (a real sequence, so numbered) ---------- */
.n-how h2 { color: var(--n-paper); }
.n-steps { counter-reset: step; border-top: 7px solid var(--n-green); }
.n-steps > .wp-block-column { position: relative; padding: 1.25rem 1.75rem 0 0; }
.n-steps > .wp-block-column + .wp-block-column { padding-left: 1.75rem; border-left: 1px solid rgba(196, 230, 216, .28); }
.n-steps > .wp-block-column::before {
	counter-increment: step; content: counter(step);
	display: block; font-family: var(--n-cond); font-weight: 700; font-size: clamp(4rem, 7vw, 6rem);
	line-height: .9; color: var(--n-paper); margin-bottom: 1.25rem; font-variant-numeric: lining-nums;
}
.n-steps h3 { color: var(--n-paper); margin-bottom: .5rem; }
@media (max-width: 781px) {
	.n-steps > .wp-block-column, .n-steps > .wp-block-column + .wp-block-column { padding: 1rem 0 0; border-left: 0; }
	.n-steps > .wp-block-column + .wp-block-column { border-top: 1px solid rgba(196, 230, 216, .28); padding-top: 1.25rem; }
	.n-steps > .wp-block-column::before { font-size: 3.5rem; margin-bottom: .75rem; }
}

/* ---------- 5. For whom ---------- */
.n-forwhom-yes { font-family: var(--n-cond); margin-bottom: 1.75rem; }
.n-notfor { padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--n-line); margin-top: var(--wp--preset--spacing--40) !important; }
.n-notfor h3 { font-family: var(--wp--preset--font-family--sans); }

/* ---------- 6. Pricing + FAQ ---------- */
.n-price { border-radius: var(--n-r-panel); }
.n-price h2 { font-size: var(--wp--preset--font-size--xl); }
.n-faq h2 { margin-bottom: var(--wp--preset--spacing--40); }
.n-faq .wp-block-details { margin-block-start: 4px; }
.n-faq .wp-block-details summary {
	font-weight: 650; cursor: pointer; list-style: none; position: relative; padding-left: 2rem;
	font-size: var(--wp--preset--font-size--m);
}
.n-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.n-faq .wp-block-details summary::before {
	content: ""; position: absolute; left: 0; top: .3em; width: .8rem; height: .8rem; border-radius: 1px;
	box-shadow: inset 0 0 0 1.5px var(--n-green); transition: background-color .25s var(--n-ease);
}
.n-faq .wp-block-details[open] summary::before { background: var(--n-green); }
.n-faq .wp-block-details summary:hover::before { background: var(--n-tint); }
.n-faq .wp-block-details[open] summary:hover::before { background: var(--n-green); }
.n-faq .wp-block-details > :not(summary) { margin-top: .6rem; padding-left: 2rem; max-width: 62ch; }

/* ---------- 7. Contact ---------- */
.n-email { font-family: var(--n-cond); font-weight: 700; font-size: clamp(2.25rem, 5.2vw, 4.5rem); line-height: 1; letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; }
.n-email a { text-decoration-thickness: 3px; text-underline-offset: .12em; }
.n-email a:hover { color: var(--n-deep); }

/* ---------- Footer ---------- */
.n-footer a { color: var(--n-paper); text-decoration: none; }
.n-footer a:hover { text-decoration: underline; }
.n-footer h3 { font-family: var(--wp--preset--font-family--sans); color: var(--n-on-deep); font-weight: 600; margin-bottom: .75rem; }
.n-footer .is-style-plain { list-style: none; }
.n-footer .is-style-plain li { margin: .4rem 0; }
.n-footer-logo img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   Real app screenshots (.n-shot) – core Image blocks in the patterns.
   Files: assets/img/screens/<name>.webp (+ -800.webp, .jpg fallback; see functions.php).
   Plain 1px frame on white. No window chrome, no shadow, no gradient.
   ========================================================================== */
.n-shot { margin: 0; }
.n-shot img { display: block; width: 100%; height: auto; background: var(--n-paper); border: 1px solid var(--n-line); border-radius: 6px; }
.n-shot figcaption,
.n-shot .wp-element-caption { margin: .7rem 0 0; color: var(--n-steel); font-size: var(--wp--preset--font-size--xs); line-height: 1.45; text-align: left; max-width: 60ch; }
.n-feature-pair .n-shot { margin-top: var(--wp--preset--spacing--30); }
.n-shot--narrow { max-width: 640px; }

/* ---------- Mobile tidy-ups ---------- */
@media (max-width: 781px) {
	.n-feature-flip { flex-direction: column-reverse; }
}