/* The Nice Gift — static preview stylesheet.
   Part 1 mirrors the real theme (tng-theme.css); Part 2 adds preview-only pieces
   (header/footer layout, emoji artwork panels, preview banner). */

/* ───────────────────────── Part 1 — real theme tokens ───────────────── */
:root {
  --tng-primary: #1f3d2b;
  --tng-secondary: #fbf8f3;
  --tng-accent: #b98a2f;
  --tng-ink: #201d18;
  --tng-ink-soft: #5c574d;
  --tng-rose: #b8425e;
  --tng-line: #e7e1d6;
  --tng-radius: 10px;
  --tng-radius-pill: 999px;
  --tng-space-1: 0.5rem;
  --tng-space-2: 1rem;
  --tng-space-3: 1.5rem;
  --tng-space-4: 2.5rem;
  --tng-space-5: 4rem;
  --tng-shadow: 0 1px 2px rgb(32 29 24 / 0.06), 0 6px 24px rgb(32 29 24 / 0.06);
  --tng-max-width: 76rem;
  --tng-font-display: Georgia, "Times New Roman", serif;
  --tng-font-body: "Segoe UI", -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; color: var(--tng-ink); background: var(--tng-secondary); font-family: var(--tng-font-body); font-size: 1rem; line-height: 1.55; }
img { max-inline-size: 100%; display: block; }
h1, h2, h3 { font-family: var(--tng-font-display); margin: 0 0 .4em; color: var(--tng-primary); }
p { margin: 0 0 1em; }
a { color: var(--tng-primary); }

.tng-container { max-inline-size: var(--tng-max-width); margin-inline: auto; padding-inline: var(--tng-space-2); }
.tng-section { padding-block: var(--tng-space-5); }
.tng-section + .tng-section { padding-block-start: 0; }

.tng-display { font-size: clamp(2rem, 4.5vw + 0.5rem, 3.4rem); line-height: 1.08; letter-spacing: -0.015em; font-weight: 600; }
.tng-h2 { font-size: clamp(1.4rem, 2vw + 0.6rem, 2rem); line-height: 1.15; font-weight: 600; }
.tng-eyebrow { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tng-accent); font-weight: 600; font-family: var(--tng-font-body); }
.tng-muted { color: var(--tng-ink-soft); }

.tng-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-block-size: 48px; padding: .7em 1.5em; border-radius: var(--tng-radius-pill);
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; font-family: var(--tng-font-body);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.tng-btn--primary { background: var(--tng-primary); color: #fff; }
.tng-btn--primary:hover { background: #16301f; }
.tng-btn--secondary { background: transparent; color: var(--tng-primary); border-color: var(--tng-primary); }
.tng-btn--secondary:hover { background: rgb(31 61 43 / .08); }
.tng-btn[disabled] { opacity: .5; cursor: not-allowed; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--tng-accent); outline-offset: 2px; border-radius: 4px; }

.tng-badge { display: inline-block; padding: .2em .7em; border-radius: var(--tng-radius-pill); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.tng-badge--sponsored { background: #f1e8d4; color: #6d5312; }
.tng-badge--deal { background: #e8f1ea; color: var(--tng-primary); }
.tng-badge--hot { background: var(--tng-primary); color: #fff; }
.tng-badge--wanted { background: #f7e4e9; color: var(--tng-rose); }
.tng-badge--status { background: var(--tng-line); color: var(--tng-ink-soft); }
.tng-badge--gifted { background: #e8f1ea; color: var(--tng-primary); }

.tng-gift-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tng-line); border-radius: var(--tng-radius); overflow: hidden; box-shadow: var(--tng-shadow); }
.tng-gift-card__media { aspect-ratio: 4 / 3; background: #f2eee6; position: relative; display: grid; place-items: center; }
.tng-gift-card__body { display: flex; flex-direction: column; gap: .4rem; padding: var(--tng-space-2); flex: 1; }
.tng-gift-card__title { font-weight: 600; font-size: 1rem; line-height: 1.3; font-family: var(--tng-font-body); color: var(--tng-ink); }
.tng-gift-card__price { font-weight: 600; }
.tng-gift-card__price s { color: var(--tng-ink-soft); font-weight: 400; margin-inline-start: .4em; }
.tng-gift-card__why { font-size: .88rem; color: var(--tng-ink-soft); }
.tng-gift-card__actions { display: flex; gap: .5rem; margin-block-start: auto; padding-block-start: var(--tng-space-1); }
.tng-gift-card__actions .tng-btn { min-block-size: 44px; padding-block: .45em; flex: 1; font-size: .92rem; }

.tng-grid { display: grid; gap: var(--tng-space-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .tng-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tng-grid { grid-template-columns: repeat(4, 1fr); } }

.tng-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 20rem); gap: var(--tng-space-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--tng-space-1); scrollbar-width: thin; }
.tng-carousel > * { scroll-snap-align: start; }
.tng-carousel-nav { display: flex; gap: .5rem; justify-content: flex-end; margin-block-end: var(--tng-space-1); }
.tng-carousel-nav button { inline-size: 44px; block-size: 44px; border-radius: 50%; border: 1.5px solid var(--tng-primary); background: #fff; color: var(--tng-primary); cursor: pointer; font-size: 1.1rem; }

.tng-progress { block-size: 8px; border-radius: 4px; background: var(--tng-line); overflow: hidden; }
.tng-progress > span { display: block; block-size: 100%; background: var(--tng-accent); }

.tng-registry-hero { text-align: center; padding-block: var(--tng-space-4); }
.tng-registry-hero__cover { aspect-ratio: 3 / 1; border-radius: var(--tng-radius); overflow: hidden; margin-block-end: -2rem; display: grid; place-items: center; }
.tng-registry-hero__photo { inline-size: 96px; block-size: 96px; border-radius: 50%; border: 4px solid #fff; box-shadow: var(--tng-shadow); position: relative; display: grid; place-items: center; font-size: 2.6rem; margin-inline: auto; }
.tng-registry-hero__message { max-inline-size: 42rem; margin-inline: auto; color: var(--tng-ink-soft); }

.tng-ribbon-rule { inline-size: 72px; block-size: 3px; margin-block: var(--tng-space-1) var(--tng-space-2); background: linear-gradient(90deg, var(--tng-accent), transparent); border: 0; }
.tng-ribbon-rule--center { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--tng-accent), transparent); }

.tng-visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

input, select, textarea { font: inherit; color: inherit; padding: .6em .8em; border: 1.5px solid var(--tng-line); border-radius: var(--tng-radius); background: #fff; inline-size: 100%; }
label { display: block; font-weight: 600; font-size: .92rem; margin-block-end: 1rem; }
label > input, label > select, label > textarea { margin-block-start: .35rem; font-weight: 400; }

/* ─────────────────────── Part 2 — preview-only styles ───────────────── */

.pv-banner { background: var(--tng-primary); color: #f5efdf; font-size: .85rem; text-align: center; padding: .5rem 1rem; }
.pv-banner strong { color: #ecd9a8; }

.pv-header { background: var(--tng-secondary); border-block-end: 1px solid var(--tng-line); position: sticky; top: 0; z-index: 20; }
.pv-header__inner { display: flex; align-items: center; gap: 1.25rem; padding-block: .8rem; flex-wrap: wrap; }
.pv-logo { font-family: var(--tng-font-display); font-size: 1.35rem; font-weight: 700; color: var(--tng-primary); text-decoration: none; letter-spacing: .01em; }
.pv-logo span { color: var(--tng-accent); }
.pv-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .95rem; }
.pv-nav a { text-decoration: none; color: var(--tng-ink); }
.pv-nav a:hover, .pv-nav a[aria-current="page"] { color: var(--tng-primary); font-weight: 600; }
.pv-header__actions { margin-inline-start: auto; display: flex; gap: 1rem; align-items: center; font-size: .95rem; }
.pv-header__actions a { text-decoration: none; }
.pv-rule { height: 3px; background: linear-gradient(90deg, var(--tng-accent), #e6cf95 40%, transparent 90%); }

.pv-hero { display: grid; gap: var(--tng-space-4); align-items: center; padding-block: var(--tng-space-5); }
@media (min-width: 900px) { .pv-hero { grid-template-columns: 1.1fr .9fr; } }
.pv-hero__art { border-radius: var(--tng-radius); aspect-ratio: 5 / 4; display: grid; place-items: center; font-size: clamp(4rem, 9vw, 7rem); background:
  radial-gradient(circle at 30% 25%, #f7ecd2 0 18%, transparent 19%),
  radial-gradient(circle at 75% 70%, #e8f1ea 0 22%, transparent 23%),
  linear-gradient(150deg, #f3ead7, #eef2ea 60%, #f7f3ea);
  box-shadow: var(--tng-shadow); position: relative; overflow: hidden; }
.pv-hero__art::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 14px; background: var(--tng-accent); opacity: .85; }
.pv-hero__art::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: 14px; background: var(--tng-accent); opacity: .85; }
.pv-hero__art > span { position: relative; z-index: 1; filter: drop-shadow(0 6px 12px rgb(32 29 24 / .18)); }

.pv-art { display: grid; place-items: center; font-size: 3.2rem; inline-size: 100%; block-size: 100%; }
.pv-art--1 { background: linear-gradient(140deg, #f3ead7, #efe3c9); }
.pv-art--2 { background: linear-gradient(140deg, #e8f1ea, #d9e7dd); }
.pv-art--3 { background: linear-gradient(140deg, #f7e4e9, #f0d7de); }
.pv-art--4 { background: linear-gradient(140deg, #e9ecf5, #dfe4f0); }
.pv-art--5 { background: linear-gradient(140deg, #f5efdf, #ece1c6); }
.pv-art--6 { background: linear-gradient(140deg, #eaf2f0, #d8e6e2); }

.pv-badges { position: absolute; top: .6rem; inset-inline-start: .6rem; display: flex; gap: .35rem; }

.pv-panel { background: #fff; border: 1px solid var(--tng-line); border-radius: var(--tng-radius); box-shadow: var(--tng-shadow); padding: var(--tng-space-3); }
.pv-panel--tint { background: linear-gradient(150deg, #ffffff, #faf5ea); }

.pv-steps { display: grid; gap: var(--tng-space-2); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .pv-steps { grid-template-columns: repeat(3, 1fr); } }
.pv-step { position: relative; padding: var(--tng-space-3); background: #fff; border: 1px solid var(--tng-line); border-radius: var(--tng-radius); }
.pv-step::before { counter-increment: step; content: counter(step); position: absolute; top: -14px; inset-inline-start: var(--tng-space-3); inline-size: 28px; block-size: 28px; display: grid; place-items: center; background: var(--tng-accent); color: #fff; border-radius: 50%; font-weight: 700; font-size: .9rem; }
.pv-step h3 { font-size: 1.05rem; margin-block-start: .2rem; }
.pv-step p { margin: 0; font-size: .92rem; color: var(--tng-ink-soft); }

.pv-chiprow { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1rem; }
.pv-chip { border: 1.5px solid var(--tng-line); background: #fff; border-radius: var(--tng-radius-pill); padding: .45em 1em; cursor: pointer; font: inherit; font-size: .92rem; }
.pv-chip[aria-pressed="true"] { border-color: var(--tng-primary); background: var(--tng-primary); color: #fff; }

.pv-occasions { display: grid; gap: var(--tng-space-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .pv-occasions { grid-template-columns: repeat(4, 1fr); } }
.pv-occasion { text-decoration: none; text-align: center; padding: var(--tng-space-3) var(--tng-space-2); background: #fff; border: 1px solid var(--tng-line); border-radius: var(--tng-radius); transition: transform 160ms ease, box-shadow 160ms ease; }
.pv-occasion:hover { transform: translateY(-3px); box-shadow: var(--tng-shadow); }
.pv-occasion .em { font-size: 2rem; display: block; margin-block-end: .4rem; }
.pv-occasion .name { font-weight: 600; color: var(--tng-ink); }
.pv-occasion .cnt { display: block; font-size: .82rem; color: var(--tng-ink-soft); }

.pv-diaspora { background: var(--tng-primary); color: #f5efdf; border-radius: var(--tng-radius); padding: var(--tng-space-4); display: grid; gap: var(--tng-space-3); align-items: center; }
@media (min-width: 860px) { .pv-diaspora { grid-template-columns: 1fr auto; } }
.pv-diaspora h2 { color: #fff; }
.pv-diaspora .cities { color: #cdbd93; font-size: .9rem; letter-spacing: .06em; }

.pv-footer { background: #17281d; color: #cfc9ba; margin-block-start: var(--tng-space-5); }
.pv-footer .tng-container { padding-block: var(--tng-space-4); }
.pv-footer a { color: #e8dfc8; text-decoration: none; }
.pv-footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-block: 1rem; font-size: .95rem; }
.pv-footer .fine { font-size: .82rem; color: #9a9484; max-inline-size: 52rem; }
.pv-lang { display: inline-flex; gap: .8rem; margin-block-start: .6rem; font-size: .9rem; }
.pv-lang a[aria-current="true"] { text-decoration: underline; text-underline-offset: .25em; font-weight: 700; }

.pv-searchbar { display: flex; gap: .5rem; }
.pv-searchbar input { flex: 1; }

.pv-result { display: flex; align-items: center; gap: 1rem; padding: 1rem; text-decoration: none; }
.pv-result .thumb { inline-size: 56px; block-size: 56px; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; flex-shrink: 0; }

.pv-toast { position: fixed; inset-inline: 0; bottom: 1.2rem; display: grid; place-items: center; pointer-events: none; z-index: 50; }
.pv-toast > div { background: var(--tng-primary); color: #fff; padding: .7rem 1.4rem; border-radius: var(--tng-radius-pill); box-shadow: var(--tng-shadow); opacity: 0; transform: translateY(8px); transition: opacity 220ms ease, transform 220ms ease; }
.pv-toast.show > div { opacity: 1; transform: none; }

.pv-statline { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .95rem; color: var(--tng-ink-soft); margin-block: .4rem 1.4rem; }
.pv-statline strong { color: var(--tng-primary); font-size: 1.15rem; }

.pv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.pv-list li { background: #fff; border: 1px solid var(--tng-line); border-radius: var(--tng-radius); padding: .8rem 1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }

details.pv-manage { background: #fff; border: 1px solid var(--tng-line); border-radius: var(--tng-radius); padding: 0; overflow: hidden; }
details.pv-manage > summary { list-style: none; cursor: pointer; padding: 1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
details.pv-manage > summary::-webkit-details-marker { display: none; }
details.pv-manage[open] > summary { border-block-end: 1px solid var(--tng-line); }
.pv-manage__body { padding: 1.2rem; display: grid; gap: var(--tng-space-3); }
@media (min-width: 900px) { .pv-manage__body { grid-template-columns: 1fr 1fr; } }

.pv-filterbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-block: 1rem 1.5rem; }