/* ══════════════════════════════════════════════════════════════════════════════
   Calm layer — loaded after app / company / home / theme-dark.
   Arad's look: one accent (blue), ink text, quiet prices, plenty of space, no decoration.
   Rules here only take away (colour, ornament, noise); layout stays in the base sheets.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --calm-chip-bg: var(--c-bg-subtle);
  --calm-chip-fg: var(--c-graphite);
  --calm-hairline: var(--c-border);
}

/* ── Prices: the price is the information, not an alarm ──────────────────── */
/* Discounted prices stay ink; the old price is a small grey line above. */
.price--discounted .price__main,
.search-item__price.is-sale .search-item__now,
.page-home .product-card .price--discounted .price__main,
.page-home .product-card__was ~ .product-card__now,
.hero-deal .price__main { color: var(--c-ink); }
.price__deadline { color: var(--c-muted); font-weight: 500; }

/* "≈" before converted prices: the currency already says it; the guide explains it. */
.price__approx, .product-card__approx { display: none; }
/* The old price's strike line: grey, like the number under it. */
:is(.price__was del, .product-card__was, .search-item__was del, del.inv-was) bdi::after { background: currentColor; opacity: .55; }

/* Product page: one price in the visitor's currency. The base price, the same price in other
   currencies and the conversion note are bookkeeping, not buying information. */
.pdp-buy .price__note:not(.price__deadline),
.pdp-buy > .price-alts,
.pdp-buy > .caption { display: none; }

/* Discount marks: one small neutral chip, no gradient, glow or red. */
.product-card__off,
.price__off,
.search-item__off,
.hero-deal__off,
.brand-tabs__off {
  background: var(--calm-chip-bg) !important;
  color: var(--calm-chip-fg) !important;
  box-shadow: none !important;
  border: 1px solid var(--calm-hairline);
  font-weight: 600 !important;
  letter-spacing: 0;
}
.product-card__off { padding: .22rem .6rem; font-size: .7rem; }

/* ── Header: neutral controls, the accent only for the active state ───────── */
.header-cart,
.header-cart:hover { background: var(--c-bg-subtle); color: var(--c-ink); filter: none; }
.header-cart .icon-btn__count { background: var(--c-ink); }
.header-phone .icon { background: var(--c-bg-subtle); color: var(--c-ink); }
/* Reading-progress line under the header: decoration. */
.site-header::after { display: none !important; }

/* Announcement bar: a quiet line of information, not a coloured banner (any tone). */
.announce, .announce--red, .announce--amber, .announce--dark {
  --a-bg: var(--c-bg-subtle); --a-fg: var(--c-graphite); --a-pill: var(--c-border);
  border-block-end: 1px solid var(--c-border); font-weight: 500;
}
.announce__dot { background: var(--c-accent) !important; box-shadow: none !important; }

/* ── Catalog ─────────────────────────────────────────────────────────────── */
/* Quick switches: a plain card; the accent only on what is switched on. */
.filter-quick { border-color: var(--c-border); background: var(--c-surface); }
.filter-quick .filter-switch + .filter-switch { border-block-start-color: var(--c-border); }
.filter-quick .filter-switch:hover { background: var(--c-bg-subtle); }
/* Brand strip: logos in one tone, colour on hover. */
.logo-strip__item img { filter: grayscale(1); opacity: .62; transition: filter var(--t) var(--ease), opacity var(--t) var(--ease); }
.logo-strip__item:hover img, .logo-strip__item:focus-visible img { filter: none; opacity: 1; }

/* ── Store landing (/store) ──────────────────────────────────────────────── */
/* Hero posters: the product on a clean field — no grid, rings, glow or tilted tile. */
.hero-poster { background-image: none !important; }
.hero-poster::before, .hero-slider::before { display: none !important; }
.hero-orbit__glow, .hero-orbit__ring, .hero-orbit__tile { display: none !important; }
/* Deal card: a quiet label instead of the red ribbon and the pulsing sticker. */
.hero-deal__ribbon { background: none; color: var(--c-muted); font-size: .82rem; font-weight: 600; margin-block-end: .2rem; }
.hero-deal__sticker { animation: none; rotate: 0deg; width: 64px; height: 64px; inset-block-start: .75rem; inset-inline-start: .75rem;
  background: var(--c-surface); color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-border); }
.hero-deal__sticker b { font-size: 1.15rem; font-weight: 800; }
.hero-deal__sticker small { font-size: .62rem; font-weight: 600; color: var(--c-muted); }

/* Brand bands: one solid dark field (no coloured glow, no diagonal lines, no notch). */
.deal-band, .deal-band--brand, .deal-band--special { background: var(--c-dark, #0f1012) !important; }
.deal-band__notch { display: none; }
.brand-tabs__tab::after { background: #fff !important; }

/* Brand cards: white card, logo and products; no grid, coloured rings or discount discs. */
.brand-card { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
.brand-card::before { display: none; }
.brand-card:hover { box-shadow: 0 18px 40px -28px rgb(15 16 18 / 35%); border-color: var(--c-border-strong) !important; }
.brand-card__disc { background: var(--c-bg-subtle) !important; box-shadow: none !important; border: 0 !important; }
.brand-card__tile { display: none; }
.brand-card__sticker { background: var(--c-surface) !important; color: var(--c-ink) !important; box-shadow: 0 0 0 1px var(--c-border) !important; }
.brand-card__sticker small { color: var(--c-muted); }
.brand-card__kicker { color: var(--c-muted); }
.brand-card__kicker::before { display: none; }

/* ── Inner pages: no rings, glow or grid behind the page head ─────────────── */
body:not(.page-home):has(.site-header)::before,
body:has(.pdp)::before { display: none !important; }

/* ── Dark theme: the same restraint ───────────────────────────────────────── */
[data-theme="dark"] {
  --calm-chip-bg: rgb(255 255 255 / 6%);
  --calm-chip-fg: var(--c-on-dark, #f3f2ef);
  --calm-hairline: rgb(255 255 255 / 10%);
}
[data-theme="dark"] .announce { --a-bg: var(--c-dark-2, #18191c); --a-fg: var(--c-on-dark-muted, #9c9ca2); border-block-end-color: rgb(255 255 255 / 8%); }
/* Photo areas stay light in the dark theme (product shots are on white): so do the marks on them. */
[data-theme="dark"] .brand-card__disc { background: #f3f2ef !important; }
[data-theme="dark"] .product-card__off { background: #f3f2ef !important; color: #2a2b2e !important; border-color: #e8e7e3; }
[data-theme="dark"] .filter-quick { background: transparent; border-color: rgb(255 255 255 / 10%); }
[data-theme="dark"] .header-cart,
[data-theme="dark"] .header-phone .icon { background: rgb(255 255 255 / 6%); color: inherit; }