/*
 * nz-soft.css -- last layer of the Bazar redesign: softer, rounder, more "graphic".
 * Loaded after nz-fidelity/nz-inner, so it only re-tunes tokens and adds the category chips and the
 * no-photo plates; it never restructures markup. Every rule degrades to the previous look if removed.
 */
.nz, .bz-modal, .bz-consent, .bz-pwa {
  --r-m: 18px;
  --r-l: 26px;
  --shadow-1: 0 1px 2px rgba(96, 58, 24, .04), 0 8px 22px rgba(96, 58, 24, .07);
  --shadow-2: 0 20px 48px rgba(96, 58, 24, .15);
  --nzs-ease: cubic-bezier(.22, 1, .36, 1);
}

/* soft ambient colour washes behind the whole page (peach top-right, rose bottom-left); the faint lattice sits above them */
body:has(.nz) {
  background:
    radial-gradient(900px 520px at 94% 14%, rgba(255, 190, 140, .30), transparent 62%),
    radial-gradient(820px 560px at 4% 58%, rgba(255, 160, 160, .16), transparent 62%),
    radial-gradient(700px 480px at 70% 96%, rgba(255, 214, 150, .22), transparent 64%),
    var(--nzc-bg, #faf6ef);
  background-attachment: scroll;
}
[data-nzc-mode="dark"] body:has(.nz) { background: var(--nzc-bg, #1a1420); }

/* panels + cards: rounder, softer depth */
.nz-panel, .nz-stats, .nz-promo, .nz-how, .nz-channels, .nz-search { border-radius: var(--r-l); }
.nz-panel, .nz-stats { box-shadow: var(--shadow-1); }

.nz-ad { border-radius: 22px; box-shadow: var(--shadow-1); transition: transform .5s var(--nzs-ease), box-shadow .5s var(--nzs-ease); }
.nz-ad:hover { transform: translateY(-7px); box-shadow: var(--shadow-2); }
.nz-thumb { border-radius: 16px; overflow: hidden; }
.nz-thumb > img { transition: transform .9s var(--nzs-ease); }
.nz-ad:hover .nz-thumb > img { transform: scale(1.07); }

/* buttons: gentle glow + press */
.nz-btn { transition: transform .35s var(--nzs-ease), box-shadow .35s var(--nzs-ease), background-color .25s; }
.nz-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 38%, transparent); }
.nz-btn:active { transform: translateY(0) scale(.975); }

/* ---------- category strip: one row of soft gradient "app icon" chips ---------- */
.nz-cats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; justify-content: stretch;
  padding: 14px 14px 12px; border-radius: var(--r-l); box-shadow: var(--shadow-1);
}
.nz-cat { flex: none; min-height: 0; gap: 8px; padding: 12px 2px 10px; border-radius: 20px; }
.nz-cat > span:last-child { font-size: 12px; line-height: 1.45; }
.nz-cat__chip {
  --_c: #e0a458;
  width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--_c) 55%, #fff) 0%, var(--_c) 52%, color-mix(in srgb, var(--_c) 80%, #000) 100%);
  box-shadow: 0 12px 20px -8px color-mix(in srgb, var(--_c) 65%, transparent), inset 0 1.5px 0 rgba(255, 255, 255, .6), inset 0 -3px 5px rgba(0, 0, 0, .12);
  transition: transform .45s var(--nzs-ease);
}
.nz-cat__chip .nz-ic { width: 27px; height: 27px; stroke-width: 1.9; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .22)); }
.nz-cat:hover .nz-cat__chip { transform: translateY(-4px) rotate(-5deg) scale(1.07); }

/* ---------- no-photo ads: tinted plate + the same chip ---------- */
.nz-thumb__empty {
  background: linear-gradient(150deg, color-mix(in srgb, var(--_c, #e0a458) 12%, #fff) 0%, color-mix(in srgb, var(--_c, #e0a458) 28%, #fff) 100%);
}
.nz-thumb__chip {
  position: relative; width: 66px; height: 66px; border-radius: 22px; display: grid; place-items: center; color: #fff; font-style: normal;
  background: linear-gradient(150deg, color-mix(in srgb, var(--_c, #e0a458) 55%, #fff) 0%, var(--_c, #e0a458) 52%, color-mix(in srgb, var(--_c, #e0a458) 80%, #000) 100%);
  box-shadow: 0 16px 24px -10px color-mix(in srgb, var(--_c, #e0a458) 70%, transparent), inset 0 1.5px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(0, 0, 0, .12);
}
.nz-thumb__chip .nz-ic { width: 32px; height: 32px; stroke-width: 1.8; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .22)); }
.nz-thumb__empty span { color: color-mix(in srgb, var(--_c, #e0a458) 45%, #6b5a4a); }
[data-nzc-mode="dark"] .nz-thumb__empty { background: linear-gradient(150deg, color-mix(in srgb, var(--_c, #e0a458) 20%, #241a15), color-mix(in srgb, var(--_c, #e0a458) 8%, #1d1512)); }

/* (No scroll-driven entrance animation on purpose: a view() timeline never completes for blocks near the page bottom or taller
   than the screen, which left the last sections stuck half-transparent -- caught in a real 390px render.) */
@media (prefers-reduced-motion: reduce) { .nz-ad, .nz-cat__chip, .nz-btn { transition: none; } }

/* nz-fidelity re-declares the login page's two-column grid with a more specific selector than nz-pages' <=1000px override, so on a
   phone the "why us" column sat off-screen to the left (page 633px wide in a 500px viewport). Stack it again. */
@media (max-width: 1000px) {
  .nz-loginpage__in .nz-login { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* ---------- phone (390px) fixes ---------- */
.nz-search > *, .nz-search__sel { min-width: 0; }
.nz-search select { width: 100%; min-width: 0; max-width: 100%; }
@media (max-width: 700px) {
  .nz-search { grid-template-columns: 1fr 1fr; }
  .nz-search__q, .nz-search .nz-btn { grid-column: 1 / -1; }
  .nz-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 8px; }
  .nz-cat__chip { width: 48px; height: 48px; border-radius: 16px; }
  .nz-stats { grid-template-columns: 1fr 1fr; }
  .nz-stat { flex-direction: column; text-align: center; gap: 8px; padding: 14px 8px; }
  .nz-stat + .nz-stat::before { display: none; }
  .nz-stat span { white-space: normal; }
  .nz-ad__loc { flex-wrap: wrap; row-gap: 2px; }
  .nz-ad__media { aspect-ratio: 4 / 3; }
  .nz-thumb__chip { width: 44px; height: 44px; border-radius: 15px; }
  .nz-thumb__chip .nz-ic { width: 23px; height: 23px; }
  .nz-thumb__empty { gap: 0; }
  .nz-thumb__empty span { display: none; }
}

/* ---------- polish pass 2: things the owner flagged on the live site ---------- */

/* 1) the search panel must paint OVER the channel strip below it, otherwise the suggestion list slides under the tiles */
.nz-search { position: relative; z-index: 8; }
.nz-channels { position: relative; z-index: 1; }

/* 2) focus: the global 3px outline drew a hard rectangle inside our rounded fields -- the field itself shows the ring instead */
.bz .nz .nz-search__q input:focus-visible, .bz .nz .nz-input input:focus-visible, .bz .nz .nz-input select:focus-visible,
.bz .nz .nz-input textarea:focus-visible, .bz .nz .bz-field__box input:focus-visible, .bz .nz .bz-field__box select:focus-visible { outline: none; }
.nz-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.nz-search__q input { background: transparent; }

/* 3) icon-only buttons (favourite / share on the ad page) collapsed to a blank square: the glyph shrank to 0 wide inside a
   46px box that still had the text-button padding */
.bz .nzc-btn--icon { padding: 0; justify-content: center; align-items: center; flex: none; }
.bz .nzc-btn--icon .nzc-i { width: 20px; height: 20px; flex: none; }
.nz-inner .bz-pricecard__act { display: flex; gap: 10px; align-items: stretch; }
.nz-inner .bz-pricecard__act > a.nzc-btn, .nz-inner .bz-pricecard__act > .nzc-btn:not(.nzc-btn--icon) { flex: 1 1 auto; min-width: 0; }
.nz-inner .bz-pricecard__act .nzc-btn--icon { width: 48px; min-height: 48px; border-radius: 14px; }

/* 4) gold filigree corners: keep them as a quiet background, smaller, always BEHIND the photo/text (they used to sit on top of
   ad photos, seller avatars and the trust-card text) */
.nz-card--orn, .nz-card--orn2, .nz-panel--warm { isolation: isolate; }
.nz-card--orn::before, .nz-card--orn2::after { z-index: -1; width: 74px; height: 76px; opacity: .55; }
.nz-panel--warm::before, .nz-panel--warm::after { z-index: -1; opacity: .7; }
[data-nzc-mode="dark"] .nz-panel--warm::before, [data-nzc-mode="dark"] .nz-panel--warm::after { background-image: none; }

/* 5) "top businesses" rows: the badge and the counter no longer wrap into a cramped 3-line stack; head row wraps politely */
.nz-biz__head { flex-wrap: wrap; gap: 8px 10px; }
.nz-biz .nz-more { background: var(--surface); color: var(--text); border-color: var(--line); }
.nz-biz__row { align-items: center; }
.nz-biz__meta { flex-wrap: wrap; gap: 4px 10px; }
.nz-biz__meta > span { white-space: nowrap; }
.nz-biz__row b { overflow-wrap: anywhere; }
.nz-biz__head { flex-wrap: nowrap; }
.nz-biz__tab { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 6px; padding: 8px 10px; font-size: 13px; white-space: normal; line-height: 1.5; }
.nz-biz__tab .nz-ic { flex: none; width: 15px; height: 15px; }
.nz-biz .nz-more { flex: none; padding: 6px 12px; font-size: 12px; }
.nz-biz__head { flex-wrap: wrap; }
.nz-biz__tab { flex: 0 1 auto; white-space: nowrap; font-size: 12.5px; padding: 8px 11px; }
.nz-biz .nz-more { margin-inline-start: auto; }

/* ---------- polish pass 3 ---------- */

/* A) dialogs / consent / install prompt live outside .nz: they now get the same tokens (see nz-tokens/nz-fidelity selector lists), so they
   are solid and rounded instead of see-through squares. Share dialog = soft sheet with coloured app tiles. */
.tp-bazar .bz-modal { width: min(28rem, calc(100vw - 2rem)); background: var(--nzf-card, #fffdfa); border-radius: 28px; box-shadow: 0 40px 90px rgba(40, 24, 10, .38), 0 0 0 1px rgba(255, 255, 255, .6) inset; }
.tp-bazar .bz-modal__in { gap: 16px; padding: 22px 22px 22px; background:
  radial-gradient(360px 140px at 100% 0, rgba(255, 190, 140, .28), transparent 70%), radial-gradient(300px 120px at 0 100%, rgba(255, 160, 160, .14), transparent 70%); }
.tp-bazar .bz-modal__in > header { padding-bottom: 12px; }
.tp-bazar .bz-modal__in h2 { font-size: 19px; }
.tp-bazar .bz-modal__x { width: 38px; height: 38px; transition: transform .3s var(--nzs-ease), background .2s; }
.tp-bazar .bz-modal__x:hover { transform: rotate(90deg); background: #f0dfca; }
.tp-bazar .bz-copy { gap: 8px; padding: 6px; border: 1.5px solid var(--nzf-line-2, #e6d6c2); border-radius: 18px; background: var(--nzf-field, #fff); }
.tp-bazar .bz-copy input { height: 44px; border: 0; background: transparent; box-shadow: none; outline: none; color: var(--text, #2b1d14); }
.tp-bazar .bz-copy .nzc-btn { border-radius: 13px; min-height: 44px; white-space: nowrap; }
.tp-bazar .bz-sharebtns { gap: 10px; }
.tp-bazar .bz-sharebtns .nzc-btn { min-height: 58px; justify-content: flex-start; gap: 12px; padding: 8px 12px; border: 1.5px solid var(--nzf-line, #f0e3d2); border-radius: 18px; background: var(--nzf-field, #fff); box-shadow: 0 6px 16px rgba(96, 58, 24, .07); font-weight: 800;
  transition: transform .35s var(--nzs-ease), box-shadow .35s var(--nzs-ease), border-color .2s; }
.tp-bazar .bz-sharebtns .nzc-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(96, 58, 24, .16); border-color: var(--_c); }
.tp-bazar .bz-sharebtns .nzc-btn .nzc-i { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 8px; border-radius: 14px; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--_c) 78%, #fff), var(--_c)); box-shadow: 0 6px 12px color-mix(in srgb, var(--_c) 35%, transparent); }
.tp-bazar .bz-sharebtns .nzc-btn:nth-child(1) { --_c: #19a974; }
.tp-bazar .bz-sharebtns .nzc-btn:nth-child(2) { --_c: #2a9df4; }
.tp-bazar .bz-sharebtns .nzc-btn:nth-child(3) { --_c: #25c15a; }
.tp-bazar .bz-sharebtns .nzc-btn:nth-child(4) { --_c: #8b6cf0; }
[data-nzc-mode="dark"] .tp-bazar .bz-modal__x, [data-nzc-mode="dark"].tp-bazar .bz-modal__x { background: var(--surface-2); }

/* B) edges: the photo bands (hero, inner-page header) end in a soft wave instead of a milky fade / hard cut */
.nz-head--photo { background: none; }
.nz-head--photo::before {
  background: linear-gradient(to bottom, rgba(255, 246, 238, .34), rgba(255, 246, 238, .08) 55%, rgba(255, 246, 238, .22)), var(--nz-head-full, none) center top / cover no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 19px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H160V10C140 20 120 20 80 10S20 0 0 10Z'/%3E%3C/svg%3E") bottom / 160px 20px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 19px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H160V10C140 20 120 20 80 10S20 0 0 10Z'/%3E%3C/svg%3E") bottom / 160px 20px repeat-x;
}
[data-nzc-mode="dark"] .nz-head--photo::before { background: linear-gradient(rgba(15, 11, 9, .6), rgba(15, 11, 9, .6)), var(--nz-head-full, none) center top / cover no-repeat; }
.nz-head--photo::after { display: none; }
.nz-head--photo { padding-bottom: 8px; }

/* hero: same idea, a slower/larger wave; the milky bottom fog is gone (only the left text-side fade + top tint remain) */
.nz-hero { padding-block-end: 86px; }
.nz-hero::before, .nz-hero::after {
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 39px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V18C210 40 165 40 120 18S30 -4 0 18Z'/%3E%3C/svg%3E") bottom / 240px 40px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 39px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V18C210 40 165 40 120 18S30 -4 0 18Z'/%3E%3C/svg%3E") bottom / 240px 40px repeat-x;
}
.nz-hero::after { background:
  linear-gradient(to left, color-mix(in srgb, var(--bg) 94%, transparent) 0, color-mix(in srgb, var(--bg) 80%, transparent) 24%, color-mix(in srgb, var(--bg) 40%, transparent) 42%, transparent 60%),
  linear-gradient(to bottom, rgba(255, 244, 236, .5) 0, transparent 30%); }
[data-nzc-mode="dark"] .nz-hero::after { background: linear-gradient(to left, var(--bg) 0, color-mix(in srgb, var(--bg) 78%, transparent) 30%, transparent 70%); }
.nz-hero, [data-nzc-mode="dark"] .nz-hero { background: none; }
@media (max-width: 800px) {
  /* narrow screens: the copy sits right on the scenery -> a stronger warm veil keeps the headline legible */
  .nz-hero::after { background: linear-gradient(to bottom, rgba(255, 247, 240, .82) 0, rgba(255, 247, 240, .7) 45%, rgba(255, 247, 240, .18) 78%, transparent); }
  [data-nzc-mode="dark"] .nz-hero::after { background: linear-gradient(to bottom, rgba(20, 14, 12, .7), rgba(20, 14, 12, .45) 60%, transparent); }
  .nz-hero { padding-block-end: 84px; }
}