/* Inter (variable, weights 400-600), self-hosted, latin + cyrillic subsets from Google Fonts */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/inter-var-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/inter-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Lovelas theme — plain CSS, no framework. Layout reference: koshka.com.ua, mobile category list: laluna.com.ua */
:root {
  --font: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --c-text: #393939;
  --c-muted: #7f7f7f;
  --c-bg: #ffffff;
  --c-soft: #f7f7f7;
  --c-line: #e6e6e6;
  --c-accent: #c0392b;
  --c-dark: #1f1f1f;
  --c-brand: #1c100b;
  --c-on-dark: #ffffff;
  --c-dark-hover: #000000;
  --c-border: #cccccc;
  --c-hover: #f3f1ee;
  --c-ok-bg: #f1f6ee;
  --c-error-bg: #fbf1f0;
  --w: 1760px;
  --pad: 16px;
  --hdr-h: 60px;
  --radius: 2px;
  --c-star: #e0a100;
  --c-chip: #7b4fd8;
  --c-chip-bg: #f6f2ff;
}
@media (min-width: 1024px) { :root { --hdr-h: 76px; --pad: 32px; } }

/* ---------- dark theme: the button in the header puts data-theme="dark" on <html>, the choice lives in localStorage ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-text: #e9e6e2;
  --c-muted: #a09c97;
  --c-bg: #1b1819;
  --c-soft: #262224;
  --c-line: #383335;
  --c-accent: #ee7d70;
  --c-dark: #f1eeea;
  --c-brand: #f1eeea;
  --c-on-dark: #1b1819;
  --c-dark-hover: #ffffff;
  --c-border: #4a4446;
  --c-hover: #2e292b;
  --c-ok-bg: #22301f;
  --c-error-bg: #3a2220;
  --c-star: #f0b429;
  --c-chip: #b59cf4;
  --c-chip-bg: #2a2336;
}
:root[data-theme="dark"] .hdr__mark, :root[data-theme="dark"] .ftr__logo img { filter: invert(1) hue-rotate(180deg); }
.hdr__theme .hdr__theme-sun, :root[data-theme="dark"] .hdr__theme .hdr__theme-moon { display: none; }
:root[data-theme="dark"] .hdr__theme .hdr__theme-sun { display: block; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--c-text); background: var(--c-bg); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input[type="text"], input[type="search"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], select, textarea { color: var(--c-text); background-color: var(--c-bg); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--c-dark); outline-offset: 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px; background: var(--c-dark); color: var(--c-on-dark); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--radius); transition: background .2s; }
.btn:hover { background: var(--c-dark-hover); }
.btn--ghost { background: transparent; color: var(--c-dark); border: 1px solid var(--c-dark); }
.btn--ghost:hover { background: var(--c-soft); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 13px; }

/* ---------- alerts ---------- */
.alerts { position: fixed; top: calc(var(--hdr-h) + 12px); right: 12px; z-index: 60; display: grid; gap: 8px; max-width: min(360px, calc(100% - 24px)); }
.alert { padding: 12px 16px; background: var(--c-dark); color: var(--c-on-dark); font-size: 14px; border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0,0,0,.18); animation: alert-in .25s ease; }
.alert--error { background: var(--c-accent); color: #fff; }
@keyframes alert-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- header ---------- */
.hdr { position: relative; z-index: 50; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.hdr__in { display: flex; align-items: center; gap: 8px; height: var(--hdr-h); max-width: var(--w); margin: 0 auto; padding: 0 var(--pad); }
.hdr__left, .hdr__right { display: flex; align-items: center; gap: 0; }
.hdr__left { display: none; }
.hdr__btn--wishlist, .hdr__cart-wrap { display: none; }
body { padding-bottom: 64px; }
.hdr__right { flex: 1; justify-content: space-evenly; }
.hdr__btn { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 40px; padding: 0 4px; color: var(--c-text); border-radius: var(--radius); }
.hdr__btn svg { flex: none; width: 26px; height: 26px; }
.hdr__btn:hover { background: var(--c-soft); }
.hdr__btn-text { display: none; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.hdr__link { display: none; padding: 0 10px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.hdr__link--sale { color: var(--c-accent); }
.hdr__logo { display: inline-flex; align-items: center; gap: 7px; justify-self: start; min-width: 0; padding: 0 6px; color: var(--c-brand); }
.hdr__mark { flex: none; width: auto; height: 30px; }
.hdr__word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: -.2em; font-size: 17px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.hdr__cart-wrap { display: contents; }
.hdr__cart { position: relative; }
.hdr__btn--account { display: none; }
.hdr__badge { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; text-align: center; color: var(--c-on-dark); background: var(--c-dark); border-radius: 8px; }
.dd { position: relative; display: block; }
.dd__btn { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 4px; font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--c-text); }
.dd__caret { width: 10px; height: 10px; transition: transform .2s; }
.dd.is-open .dd__caret { transform: rotate(180deg); }
.dd__menu { display: none; position: absolute; top: 100%; left: 50%; z-index: 60; min-width: 76px; padding: 6px 0; background: var(--c-bg); box-shadow: 0 10px 25px rgba(0,0,0,.08); transform: translateX(-50%); }
.dd.is-open .dd__menu { display: block; }
.dd__item { display: block; width: 100%; padding: 7px 16px; font-size: 13px; letter-spacing: .04em; text-align: center; color: var(--c-muted); }
.dd__item:hover, .dd__item.is-active { color: var(--c-text); }
.dd__item.is-active { font-weight: 600; }
@media (min-width: 1024px) {
  .hdr__in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; }
  .hdr__right { flex: none; justify-content: flex-end; }
  .hdr__left { display: flex; }
  .hdr__logo { justify-self: center; }
  .hdr__btn--wishlist, .hdr__cart-wrap { display: contents; }
  .hdr__btn--wishlist { display: inline-flex; }
  body { padding-bottom: 0; }
  .hdr__left, .hdr__right { gap: 4px; }
  .hdr__btn { padding: 0 8px; }
  .hdr__btn--account { display: inline-flex; }
  .hdr__btn svg { width: 24px; height: 24px; }
  .hdr__btn-text, .hdr__link { display: inline-block; }
  .dd__btn { gap: 4px; padding: 0 8px; font-size: 14px; }
  .hdr__logo { gap: 10px; padding: 0 8px; }
  .hdr__mark { height: 40px; }
  .hdr__word { font-size: 24px; letter-spacing: .28em; margin-right: -.28em; }
}
/* the open search lies over the page: the page under it is dimmed, so the panel does not look like a cut picture */
.search { border-top: 1px solid var(--c-line); background: var(--c-bg); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .42); clip-path: inset(0 -100vmax -100vmax -100vmax); }
.search__form { display: flex; max-width: 720px; margin: 0 auto; padding: 10px var(--pad); gap: 8px; }
.search__input { flex: 1; height: 44px; padding: 0 14px; font: inherit; border: 1px solid var(--c-line); border-radius: var(--radius); }
.search__input:focus { outline: none; border-color: var(--c-dark); }
.search__submit { width: 44px; height: 44px; display: grid; place-items: center; background: var(--c-dark); color: var(--c-on-dark); border-radius: var(--radius); }

/* ---------- drawer (menu) ---------- */
.drawer { position: fixed; inset: 0; z-index: 70; }
.drawer__backdrop { position: absolute; z-index: 1; inset: 0; background: transparent; cursor: default; }
.drawer__panel { position: absolute; z-index: 2; top: 0; left: 0; bottom: 0; width: min(360px, 88vw); display: flex; flex-direction: column; background: var(--c-bg); overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; box-shadow: 8px 0 32px rgba(0,0,0,.12); border-right: 1px solid var(--c-line); animation: drawer-in .25s ease; overflow-x: hidden; }
@keyframes drawer-in { from { transform: translateX(-100%); } }
.drawer__head { position: sticky; top: 0; z-index: 1; background: var(--c-bg); flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--hdr-h); padding: 0 8px 0 20px; border-bottom: 1px solid var(--c-line); }
.drawer__title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.drawer__close { width: 40px; height: 40px; display: grid; place-items: center; }
.dnav { flex: none; }
.dnav__item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--c-line); }
.dnav__link { flex: 1; padding: 14px 20px; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.dnav__link:hover { background: var(--c-soft); }
.dnav__item--pinned { margin-top: 10px; border-top: 1px solid var(--c-line); }
.dnav__more { width: 48px; height: 48px; display: grid; place-items: center; color: var(--c-muted); transition: transform .2s; }
.dnav__more[aria-expanded="true"] { transform: rotate(90deg); }
.dnav__tree { flex-basis: 100%; padding: 4px 0 8px; background: var(--c-soft); }
.dnav__sublink { display: block; padding: 12px 20px 12px 32px; font-size: 17px; color: var(--c-text); }
.dnav__sublink:hover { color: var(--c-text); }
.dnav__sublink--3 { padding-left: 48px; font-size: 16px; color: var(--c-text); }
.dnav__sublink--4 { padding-left: 64px; font-size: 16px; color: var(--c-text); }
.dnav__sublink--5, .dnav__sublink--6, .dnav__sublink--7 { padding-left: 80px; font-size: 16px; color: var(--c-text); }
/* a subcategory with its own subcategories opens with its own arrow, like the first level (Oleg 26.09) */
.dnav__subitem.has-children { display: flex; flex-wrap: wrap; align-items: center; }
.dnav__subitem.has-children > .dnav__sublink { flex: 1; min-width: 0; }
.dnav__subitem > .dnav__tree { flex-basis: 100%; padding: 0; background: transparent; }
.drawer__foot { flex: none; display: grid; gap: 2px; padding: 12px 20px 20px; border-top: 1px solid var(--c-line); font-size: 14px; }
.drawer__foot a { padding: 6px 0; color: var(--c-muted); }
.drawer__switch { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; }
.drawer .dd { display: block; }
.drawer .dd__btn { display: none; }
.drawer .dd__menu { position: static; display: flex; gap: 2px; min-width: 0; padding: 0; background: none; box-shadow: none; transform: none; }
.drawer .dd__item { width: auto; padding: 4px 6px; }
.alert a { color: var(--c-on-dark); text-decoration: underline; }

/* ---------- sections ---------- */
.sec { max-width: var(--w); margin: 40px auto; padding: 0 var(--pad); }
.sec__title { margin: 0 0 20px; font-size: 22px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.sec__head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; }
.sec__head .sec__title { margin: 0; }
.rail__nav { display: none; gap: 8px; flex: none; }
.rail__btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--c-text); border: 1px solid var(--c-line); border-radius: 50%; transition: border-color .2s, opacity .2s; }
.rail__btn:hover:not(:disabled) { border-color: var(--c-dark); }
.rail__btn:disabled { opacity: .35; cursor: default; }
@media (min-width: 1024px) {
  .sec { margin: 72px auto; }
  .sec__title { font-size: 36px; margin-bottom: 32px; }
  .sec__head { position: relative; justify-content: center; margin-bottom: 32px; }
  .rail__nav { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .rail__nav { display: flex; }
  .rail__nav.is-static { display: none; }
}

/* product rail: horizontal scroll on mobile, 4 columns on desktop */
/* sideways rows scroll sideways only: overflow-x alone makes overflow-y auto, and a fractional height then gave them a
   vertical axis of their own that caught vertical drags on the iPhone (see .hero__track) */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; }
.rail::-webkit-scrollbar { display: none; }
.rail__item { scroll-snap-align: start; }
@media (min-width: 640px) { .rail { grid-auto-columns: 42%; } }
@media (min-width: 1024px) { .rail { grid-auto-columns: calc((100% - 3 * 12px) / 4); gap: 12px; margin: 0; padding: 0 0 4px; } }

/* ---------- product card ---------- */
.card { position: relative; display: flex; flex-direction: column; }
.card__img { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-soft); }
.card__mark { position: absolute; z-index: 1; display: grid; place-items: center; color: #4a4a4a; background: rgba(255,255,255,.92); border: 1px solid #d9d9d9; }
/* NEW is as see-through as the heart and the video mark (Oleg, 16.09 18:34) */
.card__mark--new { top: 8px; left: 8px; min-width: 44px; height: 22px; padding: 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; border-radius: 11px; opacity: .7; }
/* the heart and the video mark share one size and sit half-transparent, so they do not pull the eye off the photo (Oleg, 16.09 18:12) */
.card__mark--video { right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; opacity: .7; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__img img { transform: scale(1.03); }
.card__wish { position: absolute; top: 8px; right: 8px; opacity: .7; transition: opacity .2s; }
.card__wish:hover, .card__wish:focus-within { opacity: 1; }
.card__wish button { width: 28px; height: 28px; display: grid; place-items: center; color: #4a4a4a; background: rgba(255,255,255,.92); border: 1px solid #d9d9d9; border-radius: 50%; transition: color .2s; }
.card__wish button svg { width: 15px; height: 15px; }
.card__wish button:hover { color: var(--c-accent); }
.card__body { padding: 10px 0 0; }
/* two lines are kept for the name, as koshka does, so the price and the colour dots sit at one level across a row (Oleg, 16.09 19:18) */
.card__name { display: block; min-height: 2.7em; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; line-height: 1.35; }
.card__price { margin-top: 6px; font-size: 15px; font-weight: 500; }
.card__price-new { color: var(--c-accent); }
.card__price-old { margin-left: 6px; font-weight: 400; color: var(--c-muted); }
.card__wholesale { margin-top: 2px; font-size: 13px; color: var(--c-muted); }
@media (min-width: 1024px) { .card__name, .card__price { font-size: 16px; } .card__wholesale { font-size: 14px; } }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero__track::-webkit-scrollbar { display: none; }
.hero__slide { position: relative; scroll-snap-align: start; }
.hero__link { display: block; }
.hero picture { display: block; }
.hero__img { width: 100%; height: auto; }
@media (min-width: 768px) { .hero__slide--mobile { display: none; } }
@media (max-width: 767px) {
  .hero__img { max-height: calc(100vh - 150px); max-height: calc(100svh - 64px - env(safe-area-inset-bottom) - 28px); object-fit: cover; object-position: 50% 85%; }
  /* lovelas.js keeps the height the banner had at load: the bottom safe area in the formula changes on the iPhone
     while Safari folds its toolbar during a scroll, the banner shrank and its picture slid under the header (Oleg, 23.09) */
  .hero.is-sized .hero__img { max-height: var(--hero-max); }
  /* the dots sit in the gap under the banner: over the picture they covered the button painted at its bottom */
  .hero .hero__dots { bottom: -20px; }
}
/* phones: no native scroller under the finger at the top of the page, as koshka's Swiper (overflow hidden, touch-action
   pan-y). A native one also took the vertical axis (fractional height) and on the iPhone the header set off before the
   banner when the page was dragged from it (Oleg, 23.09). A vertical drag now moves the page at once; lovelas.js moves
   the slides on a sideways one. */
@media (hover: none) and (pointer: coarse) {
  .hero__track { overflow: hidden; touch-action: pan-y; scroll-snap-type: none; }
}
.hero__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.2); }
.hero__dot.is-active { background: var(--c-dark); }

/* ---------- categories: tiles on desktop, list on mobile (laluna) ---------- */
.cats__grid { display: none; }
.cats__list { border-top: 1px solid var(--c-line); }
.cats__list a { display: block; padding: 13px 0; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text); border-bottom: 1px solid var(--c-line); }
@media (min-width: 1024px) {
  .cats__list { display: none; }
  .cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .cats__tile a { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-soft); }
  .cats__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
  .cats__tile a:hover img { transform: scale(1.03); }
  .cats__name { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 10px 14px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; text-align: center; background: rgba(255,255,255,.92); }
}

/* ---------- prose / pages ---------- */
.page { max-width: 860px; margin: 24px auto 56px; padding: 0 var(--pad); }
.page__title { margin: 12px 0 20px; font-size: 26px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--c-muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; }
.crumbs a:hover { color: var(--c-text); }
.prose { color: var(--c-text); line-height: 1.65; }
.prose h2, .prose h3 { margin: 24px 0 10px; font-weight: 600; }
.prose h2 { font-size: 20px; } .prose h3 { font-size: 17px; }
.prose p, .prose ul, .prose ol { margin: 0 0 12px; }
.prose ul { list-style: disc; padding-left: 22px; } .prose ol { list-style: decimal; padding-left: 22px; }
.prose img { margin: 12px 0; }
.seo__in { display: grid; gap: 24px; }
.seo__title { font-size: 26px; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.seo__text { color: var(--c-muted); font-size: 15px; }
.seo__text h2, .seo__text h3 { font-size: 20px; color: var(--c-text); text-transform: none; letter-spacing: 0; margin-top: 0; }
.seo__text.is-collapsed { position: relative; max-height: 150px; overflow: hidden; }
.seo__text.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, var(--c-bg)); }
.seo__more { margin-top: 8px; padding: 4px 0; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text); border-bottom: 1px solid var(--c-text); }
@media (min-width: 1024px) { .seo__in { grid-template-columns: 1fr 1.6fr; gap: 48px; } .seo__title { font-size: 36px; } }

/* ---------- footer ---------- */
.ftr { margin-top: 56px; background: var(--c-soft); border-top: 1px solid var(--c-line); }
.ftr__in { display: grid; align-items: start; gap: 32px; max-width: var(--w); margin: 0 auto; padding: 40px var(--pad) 32px; }
@media (max-width: 767px) { body.route-product-product .ftr__col--links { display: none; } }
/* phones: «Покупцеві» and «Інформація» side by side as on koshka, the rest across the width (Oleg, 29.09) */
@media (max-width: 767px) {
  .ftr__in { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .ftr__in > .ftr__col:not(.ftr__col--links) { grid-column: 1 / -1; }
}
@media (min-width: 768px) { .ftr__in { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 40px; padding-top: 56px; } .ftr__brand { padding-right: 48px; border-right: 1px solid var(--c-line); } }
.ftr__logo { display: flex; align-items: flex-start; gap: 10px; margin: -6px 0 12px; font-size: 20px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--c-brand); }
.ftr__logo img { flex: none; width: auto; height: 40px; }
.ftr__hours { margin: 26px 0 14px; font-size: 15px; font-weight: 600; line-height: 1.4; text-transform: uppercase; color: var(--c-text); max-width: 200px; }
.ftr__city { margin-top: 2px; font-size: 15px; color: var(--c-muted); }
.ftr__contact { display: block; padding: 2px 0; font-size: 15px; color: var(--c-muted); }
.ftr__title { margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ftr__list li { padding: 4px 0; font-size: 14px; color: var(--c-muted); }
.ftr__list a:hover { color: var(--c-text); }
.ftr__bottom { padding: 16px var(--pad); font-size: 13px; color: var(--c-muted); text-align: center; border-top: 1px solid var(--c-line); }

/* ---------- cookie bar ---------- */
.cookie { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; display: grid; gap: 12px; padding: 16px; background: var(--c-bg); border: 1px solid var(--c-line); box-shadow: 0 8px 32px rgba(0,0,0,.12); font-size: 14px; }
.cookie__btns { display: flex; gap: 8px; }
@media (min-width: 768px) { .cookie { left: auto; max-width: 420px; } }
.cookie__text { margin: 0; line-height: 1.45; }
.cookie__text a { text-decoration: underline; }
/* above the bottom bar of phones and tablets */
@media (max-width: 1023px) { .cookie { bottom: calc(72px + env(safe-area-inset-bottom)); } }

/* ---------- legacy bridge: pages still rendered by core Bootstrap templates ---------- */
body.legacy { padding-top: 0; }
body.legacy #container { max-width: var(--w); margin: 0 auto; padding: 16px var(--pad); }
body.legacy #top, body.legacy #logo, body.legacy #menu { display: none; }

/* ---------- wordmark logo: a wide image without the store name next to it ---------- */
.hdr__logo--wordmark .hdr__mark { height: 46px; }
.ftr__logo--wordmark img { height: 56px; }
@media (min-width: 1024px) { .hdr__logo--wordmark .hdr__mark { height: 60px; } }

/* ---------- category icons (emoji set in admin: Lovelas menu) ---------- */
.dnav__icon, .cats__icon { display: inline-block; margin-right: 8px; font-size: 1.1em; line-height: 1; vertical-align: -1px; }

/* ---------- product listing pages (new arrivals, later categories) ---------- */
.listing { max-width: var(--w); margin: 16px auto 56px; padding: 0 var(--pad); }
.listing__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 12px 0 20px; }
.listing__title { font-size: 22px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.listing__count { font-size: 13px; color: var(--c-muted); }
.listing__empty { padding: 40px 0; text-align: center; color: var(--c-muted); }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 8px; }
/* phones: cards as tall as laluna's (2:3) and the grid runs closer to the screen edges; the photos are 3:4, so their sides are trimmed like laluna does (Oleg, 16.09 18:30) */
@media (max-width: 639px) { .grid { margin: 0 calc(8px - var(--pad)); } .grid .card__img { aspect-ratio: 2 / 3; } }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 28px 16px; } }
@media (min-width: 1024px) { .listing { margin-top: 24px; } .listing__title { font-size: 30px; } .grid { grid-template-columns: repeat(4, 1fr); gap: 32px 12px; } }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 40px 0 0; }
.pager__page, .pager__btn { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; font-size: 14px; color: var(--c-text); border: 1px solid var(--c-line); border-radius: var(--radius); }
.pager__page:hover, .pager__btn:hover { border-color: var(--c-dark); }
.pager__page.is-active { color: var(--c-on-dark); background: var(--c-dark); border-color: var(--c-dark); }
/* a phone keeps one line: the first and the last page buttons, two pages each side of this one (Oleg 30.09) */
@media (max-width: 640px) { .pager { gap: 4px; } .pager__page, .pager__btn { min-width: 36px; height: 38px; padding: 0 6px; } .pager__page--far { display: none; } }

/* ---------- home: new arrivals as a grid block (laluna) ---------- */
.sec--grid .sec__title { text-align: center; }
.sec__more { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- footer social icons ---------- */
.social { display: flex; gap: 12px; margin-top: 40px; }
.social__link { display: grid; place-items: center; width: 52px; height: 52px; color: var(--c-text); border: 1px solid var(--c-line); border-radius: 4px; transition: border-color .2s, color .2s; }
.social__link:hover { color: var(--c-dark); border-color: var(--c-dark); }
.pay { display: flex; gap: 10px; }
.pay__card { display: grid; place-items: center; height: 56px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 4px; background: #fff; }
.ftr__title { max-width: 360px; }
.seo__title { display: grid; gap: 6px; }
.seo__brand { font-size: 40px; font-weight: 700; letter-spacing: .12em; color: var(--c-brand); }
.seo__tagline { font-size: 20px; font-weight: 500; letter-spacing: .04em; color: var(--c-text); }
@media (min-width: 1024px) { .seo__brand { font-size: 56px; } .seo__tagline { font-size: 24px; } }
/* the text block at the bottom of the home page on phones (Oleg, 29.09: "нагромождено", koshka shows none): the text
   stays for Google, but centred, under one small heading (the big LOVELAS stands in the footer right below) and
   folded to a few lines with «Детальніше» */
@media (max-width: 767px) {
  .seo--home { margin-top: 32px; margin-bottom: 8px; }
  .seo--home .seo__in { gap: 0; text-align: center; }
  .seo--home .seo__title { display: none; }
  .seo--home .seo__text { font-size: 14px; line-height: 1.6; }
  .seo--home .seo__text h2, .seo--home .seo__text h3 { font-size: 17px; line-height: 1.35; margin-bottom: 8px; }
  .seo--home .seo__text.is-collapsed { max-height: 136px; }
  .seo--home .seo__text.is-collapsed::after { height: 48px; }
  .seo--home .seo__more { display: block; width: fit-content; margin: 10px auto 0; }
  body.route-common-home .ftr { margin-top: 32px; }
}
.search__close { width: 44px; height: 44px; display: grid; place-items: center; color: var(--c-text); border-radius: var(--radius); }
.search__close:hover { background: var(--c-soft); }

/* ---------- phone tab bar (koshka): home, menu, sign in, wishlist, cart ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr); height: 60px; padding-bottom: env(safe-area-inset-bottom); background: var(--c-bg); border-top: 1px solid var(--c-line); }
.tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; letter-spacing: .02em; color: var(--c-text); }
.tabbar__item svg { width: 22px; height: 22px; }
.tabbar__item--menu { color: #f86c9e; font-weight: 600; }
@media (max-width: 1023px) { .hdr__btn--wishlist, .hdr__cart-wrap { display: none !important; } }

/* ---------- home: header lies over the banner and scrolls away with it (koshka) ---------- */
body.route-common-home .hdr { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; }
body.route-common-home .hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.35) 70%, rgba(255,255,255,0)); pointer-events: none; }
body.route-common-home .search { background: var(--c-bg); }
:root[data-theme="dark"] body.route-common-home .hdr::before { background: linear-gradient(rgba(27,24,25,.8), rgba(27,24,25,.4) 70%, rgba(27,24,25,0)); }

/* ---------- catalog: category and Sale pages (filters, sorting) ---------- */
.catalog__side { display: none; }
/* side category tree (koshka): arrows open the branches, the branch of the page is open, no product counts */
.catalog__side-title { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0 0 20px; padding: 8px 12px; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-align: center; text-transform: uppercase; border: 1px solid var(--c-border); }
.ctree { display: grid; }
.ctree__row { display: flex; align-items: center; gap: 8px; }
.ctree__link { flex: 1; min-width: 0; padding: 8px 0; font-size: 16px; line-height: 1.35; color: var(--c-muted); transition: color .2s; }
.ctree__link:hover, .ctree__link.is-active { color: var(--c-text); }
.ctree__link.is-active { font-weight: 600; }
.ctree__toggle { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--c-text); transition: transform .2s; }
.ctree__item.is-open > .ctree__row > .ctree__toggle { transform: rotate(-90deg); }
.ctree--1 > .ctree__item.is-open > .ctree__row { border-bottom: 1px solid var(--c-dark); }
.ctree--1 > .ctree__item.is-open > .ctree__row > .ctree__link { font-weight: 600; color: var(--c-text); }
.ctree__sub { padding: 8px 0 12px 12px; }
.ctree__sub .ctree__link { font-size: 15px; }
.ctree--pinned { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--c-border); }
.ctree--pinned .ctree__link { font-weight: 500; color: var(--c-text); }
.catalog__subs { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; margin: 0 calc(-1 * var(--pad)) 12px; padding: 0 var(--pad) 4px; scrollbar-width: none; }
.catalog__subs::-webkit-scrollbar { display: none; }
.catalog__subs a { flex: none; padding: 8px 14px; font-size: 13px; white-space: nowrap; border: 1px solid var(--c-line); border-radius: 999px; }
.catalog__subs a.is-active { color: var(--c-on-dark); background: var(--c-dark); border-color: var(--c-dark); }
/* search page: the categories whose name holds the words, the violet chips of the suggestions; one row that scrolls
   sideways on phones (as the subcategory row), wrapped lines on desktop */
.found-cats { display: flex; align-items: center; gap: 8px; margin: 0 calc(-1 * var(--pad)) 16px; padding: 0 var(--pad) 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.found-cats::-webkit-scrollbar { display: none; }
.found-cats .ss__cat { flex: none; white-space: nowrap; }
.found-cats__title { flex: none; margin-right: 4px; font-size: 14px; color: var(--c-muted); }
@media (min-width: 1024px) {
  .found-cats { flex-wrap: wrap; margin: 0 0 16px; padding: 0; overflow: visible; }
}
.catalog__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.catalog__open, .srt__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; padding: 0 12px; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--c-line); border-radius: var(--radius); }
.catalog__open { flex: 1; }
.catalog__about { margin-top: 48px; }
.catalog-page .listing__count { margin: 0 0 16px; }
.listing__empty .btn { margin-top: 16px; }

/* opened with .is-open: the theme hides [hidden] with !important, which the desktop layout could not undo */
.flt { display: none; position: fixed; inset: 0; z-index: 80; background: var(--c-bg); }
.flt.is-open { display: block; }
.flt__form { display: flex; flex-direction: column; height: 100%; }
.flt__head { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--hdr-h); padding: 0 8px 0 20px; border-bottom: 1px solid var(--c-line); }
.flt__groups { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 20px 24px; }
.flt__group { padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.flt__btn { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.flt__caret { flex: none; width: 10px; height: 10px; margin-left: auto; transition: transform .2s; }
.flt__group.is-open .flt__caret, .srt.is-open .flt__caret { transform: rotate(180deg); }
/* phone: the groups start folded and one opens at a time, as on koshka; the fold buttons did nothing before (Oleg, 16.09 20:46) */
.flt__menu { display: none; padding-top: 10px; }
.flt__group.is-open .flt__menu { display: block; }
.flt__list { display: grid; }
.flt__opt { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; cursor: pointer; }
.flt__opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--c-dark); }
.flt__count { margin-left: auto; font-size: 12px; color: var(--c-muted); }
/* search inside a long colour or size list (stage 5, item 8); it stays on top while the list scrolls */
.flt__search { position: sticky; top: 0; z-index: 1; display: block; width: 100%; height: 40px; margin: 0 0 6px; padding: 0 10px; font: inherit; font-size: 14px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); }
.flt__search:focus { outline: none; border-color: var(--c-dark); }
.flt__list > li[hidden] { display: none; }
.flt__none { margin: 6px 0; font-size: 14px; color: var(--c-muted); }
.flt__opt .swatch { width: 22px; height: 22px; }
/* sizes are a plain list with counts like the colours, not a grid of chips (Oleg, 16.09 21:09) */
.flt__badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--c-on-dark); background: var(--c-dark); border-radius: 9px; }
.flt__price { display: flex; align-items: center; gap: 8px; }
.flt__price input { width: 100%; min-width: 0; height: 44px; padding: 0 10px; font: inherit; font-size: 15px; border: 1px solid var(--c-line); border-radius: var(--radius); }
.flt__symbol { flex: none; color: var(--c-muted); }
.flt__apply { display: none; }
.flt__foot { flex: none; display: flex; align-items: center; gap: 16px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line); }
.flt__foot .btn { flex: 1; }
.flt__reset, .chips__reset { font-size: 13px; color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; }

.srt { position: relative; flex: 1; }
.srt__label { display: none; }
.srt__menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 220px; padding: 6px 0; background: var(--c-bg); border: 1px solid var(--c-line); box-shadow: 0 10px 25px rgba(0,0,0,.08); }
.srt.is-open .srt__menu { display: block; }
.srt__item { display: block; padding: 9px 16px; font-size: 14px; color: var(--c-muted); }
.srt__item:hover, .srt__item.is-active { color: var(--c-text); }
.srt__item.is-active { font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; font-size: 13px; background: var(--c-soft); border-radius: 999px; }
.chip:hover { background: var(--c-line); }
.chip svg { width: 9px; height: 9px; }

@media (min-width: 1024px) {
  .catalog--side { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
  .catalog__side { display: block; }
  .catalog__subs, .catalog__open, .flt__head, .flt__foot { display: none; }
  .catalog__bar { gap: 16px; margin-bottom: 16px; }
  .flt, .flt.is-open { position: static; display: block; flex: 1; z-index: auto; background: none; }
  .flt__form { display: block; height: auto; }
  .flt__groups { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; overflow: visible; }
  .flt__group { position: relative; padding: 0; border: 0; }
  .flt__btn { width: auto; height: 40px; padding: 0 14px; font-size: 13px; border: 1px solid var(--c-line); border-radius: var(--radius); }
  .flt__btn:hover, .flt__group.is-open .flt__btn { border-color: var(--c-dark); }
  .flt__caret { margin-left: 4px; }
  .flt__menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 240px; max-height: 380px; overflow-y: auto; padding: 8px 16px; background: var(--c-bg); border: 1px solid var(--c-line); box-shadow: 0 10px 25px rgba(0,0,0,.08); }
  .flt__group.is-open .flt__menu { display: block; }
  .flt__menu--price { width: 320px; padding: 14px 16px; }
  .flt__price input { height: 40px; font-size: 14px; }
  .flt__apply { display: flex; width: 100%; margin-top: 10px; }
  .flt__search { top: -8px; height: 36px; margin-top: 0; }
  .srt { flex: none; }
  .srt__btn { width: auto; height: 40px; border: 0; font-size: 14px; letter-spacing: 0; text-transform: none; }
  .srt__label { display: inline; color: var(--c-muted); }
}

/* ---------- colour dots on product cards (koshka): the colour itself, next to the price ---------- */
/* price, wholesale line, then the colour dots on their own line at the left, as koshka does (Oleg, 16.09 19:19) */
.card__meta { margin-top: 6px; }
.card__meta .card__price { margin-top: 0; }
.card__prices { min-width: 0; }
.card__colors { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.card__colors li { display: block; }
.swatch { display: block; width: 14px; height: 14px; overflow: hidden; background: var(--swatch, var(--c-soft)); border: 1px solid #c8c8c8; border-radius: 50%; transition: box-shadow .2s; }
.swatch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swatch--pattern { background: conic-gradient(#e46b6b, #f2c14e, #6cc28a, #5b8def, #b07cd8, #e46b6b); }
.swatch:hover, .swatch:focus-visible { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 3px var(--c-dark); }
.card__colors-more { font-size: 12px; line-height: 14px; color: var(--c-muted); }

/* ---------- product page (koshka): photos in a column on phones and in a row with arrows on desktop; then the
   title and the details on the left, the choices, the price and both buttons on the right ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pp { display: flex; flex-direction: column; }
.pp__gallery { order: 1; position: relative; margin: -16px calc(-1 * var(--pad)) 0; }
.pp__crumbs { order: 2; margin-top: 14px; }
.pp__head { order: 3; margin-top: 12px; }
.pp__buy { order: 4; margin-top: 18px; }
.pp__details { order: 5; margin-top: 40px; }
.pp__track { display: grid; }
.pp__slide { position: relative; margin: 0; aspect-ratio: 2 / 3; background: var(--c-soft); }
.pp__slide + .pp__slide { border-top: 2px solid var(--c-line); }
.pp__slide { overflow: hidden; min-height: 0; }
.pp__slide > a, .pp__slide > img, .pp__slide > .pp__video, .pp__slide > .pp__video-file, .pp__slide > .pp__iframe, .pp__slide > iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pp__slide img { width: 100%; height: 100%; object-fit: cover; }
/* a photo shown whole (a table, text, a collage with measurements): in the phone column at its own proportions,
   no taller than the usual 2:3 frame (Oleg 29.09: the frame cut the words of a square size table) */
.pp__slide--fit { background: #fff; aspect-ratio: var(--ratio, 2 / 3); max-height: 150vw; }
.pp__slide--fit img { object-fit: contain; object-position: center; }
.pp__video { display: block; width: 100%; height: 100%; background: #000; }
.pp__video img { opacity: .85; }
.pp__play-icon { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(0,0,0,.55); border-radius: 50%; }
.pp__play-icon::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
.pp__iframe, .pp__video-file { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; border: 0; }
.pp__arrows { display: none; }
.pp__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; }
.pp__sku { margin: 4px 0 0; font-size: 12px; color: var(--c-muted); }
.pp__form { display: grid; gap: 18px; }
.pp__field { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.pp__label { display: block; float: none; margin: 0 0 8px; padding: 0; font-size: 14px; color: var(--c-muted); }
.pp__label [data-color-name] { color: var(--c-text); }
.pp__label--row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; }
.pp__chart-link { flex: none; font-size: 13px; color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; }
.pp__chart-link:hover { color: var(--c-text); }
.pp__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.pp__size { position: relative; }
.pp__size span { display: grid; place-items: center; min-width: 64px; height: 42px; padding: 0 12px; font-size: 15px; border: 1px solid var(--c-border); border-radius: 4px; cursor: pointer; transition: border-color .2s; }
.pp__size span:hover { border-color: var(--c-dark); }
.pp__size input:checked + span { color: var(--c-on-dark); background: var(--c-dark); border-color: var(--c-dark); }
.pp__colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pp__color { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--swatch, var(--c-soft)); border: 1px solid var(--c-border); border-radius: 4px; cursor: pointer; }
.pp__color--photo { border-color: transparent; }
.pp__color img { width: 100%; height: 100%; object-fit: cover; }
.pp__color--pattern { background: conic-gradient(#e46b6b, #f2c14e, #6cc28a, #5b8def, #b07cd8, #e46b6b); }
.pp__color input, .pp__size input { position: absolute; opacity: 0; pointer-events: none; }
.pp__color:has(input:checked) { border-color: var(--c-dark); box-shadow: inset 0 0 0 1px var(--c-dark); }
.pp__color:has(input:checked)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; background: rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 16px no-repeat; border-radius: 50%; }
.pp__color:has(input:focus-visible), .pp__size input:focus-visible + span { outline: 2px solid var(--c-dark); outline-offset: 2px; }
.pp__select { width: 100%; height: 44px; padding: 0 10px; font: inherit; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); }
.pp__error { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: #e02424; }
.pp__error:empty { display: none; }
.pp__stock { margin: 0; padding: 6px 12px; font-size: 15px; line-height: 1.4; text-align: center; color: #2fa850; background: #b6f4c6; border: 1px solid #7ad99a; border-radius: 4px; }
.pp__stock--out { color: var(--c-muted); background: var(--c-soft); border-color: var(--c-line); }
.pp__deal { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pp__qty { flex: none; display: flex; align-items: center; gap: 4px; }
.pp__qty-btn { display: grid; place-items: center; width: 32px; height: 42px; color: var(--c-text); }
.pp__qty-btn:disabled { color: #c8c8c8; cursor: default; }
.pp__qty-input { width: 44px; height: 42px; padding: 0; font: inherit; font-size: 15px; text-align: center; color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 4px; -moz-appearance: textfield; appearance: textfield; }
.pp__qty-input::-webkit-outer-spin-button, .pp__qty-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.pp__prices { min-width: 0; text-align: right; }
.pp__price { font-size: 22px; font-weight: 500; line-height: 1.3; }
.pp__price-new { color: var(--c-accent); }
.pp__price-old { margin-left: 8px; font-size: 16px; font-weight: 400; color: var(--c-muted); }
.pp__wholesale { margin: 2px 0 0; font-size: 16px; color: #31bc58; }
.pp__hint { margin: 6px 0 0; font-size: 12px; font-weight: 500; line-height: 1.35; color: #f86c9e; }
.pp__buttons { display: grid; gap: 12px; margin-top: 10px; }
.pp__buttons .btn, .pp-bar .btn { width: 100%; min-height: 48px; padding: 0 12px; font-size: 14px; }
.btn--ghost.pp__wish, .btn--ghost.pp-bar__wish { background: var(--c-bg); }
.pp__details { border-top: 1px solid var(--c-border); }
.pp__acc { border-bottom: 1px solid var(--c-border); }
.pp__acc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 4px; font-size: 16px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; list-style: none; cursor: pointer; }
.pp__acc-head::-webkit-details-marker { display: none; }
.pp__acc-icon { position: relative; flex: none; width: 16px; height: 16px; }
.pp__acc-icon::before, .pp__acc-icon::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 1.5px; background: currentColor; transition: transform .2s; }
.pp__acc-icon::after { transform: rotate(90deg); }
.pp__acc[open] .pp__acc-icon::after { transform: rotate(0deg); }
.pp__acc-body { padding: 0 4px 20px; }
.pp__acc-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.pp__specs { width: 100%; font-size: 14px; border-collapse: collapse; }
.pp__specs th, .pp__specs td { padding: 8px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.pp__specs th { width: 45%; font-weight: 400; color: var(--c-muted); }
.pp__related, .pp__viewed-rail { margin-top: 48px; }
.pp-bar { position: fixed; left: 12px; right: 12px; bottom: 72px; z-index: 44; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
dialog.lightbox { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; background: #000; border: 0; }
dialog::backdrop { background: rgba(0,0,0,.6); }
.lightbox__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; }
.lightbox__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; }
.lightbox__close { position: fixed; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: rgba(0,0,0,.45); border-radius: 50%; }
dialog.modal { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 0; border-radius: var(--radius); }
.modal__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.modal__title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.modal__body { padding: 16px 20px 24px; overflow-x: auto; }
.modal__close { display: grid; place-items: center; width: 40px; height: 40px; color: var(--c-muted); }
.modal__close:hover { color: var(--c-text); }
/* the window with the sizes (and colours) of "to cart" without a choice (Oleg 09.10) */
dialog.pick-popup { width: min(560px, calc(100vw - 32px)); }
.pick-popup__group + .pick-popup__group { margin-top: 20px; }
.pick-popup__label { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.pick-popup .pp__colors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
button.pp__size { padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button.pp__color { width: 100%; padding: 0; font: inherit; }
.pick-popup__option.pp__size.is-picked span { color: var(--c-on-dark); background: var(--c-dark); border-color: var(--c-dark); }
.pick-popup__option.pp__color.is-picked { border-color: var(--c-dark); box-shadow: inset 0 0 0 1px var(--c-dark); }
.pick-popup__option:disabled { opacity: .4; cursor: default; }
.pick-popup__option.pp__size:focus-visible { outline: none; }
.pick-popup__option.pp__size:focus-visible span, .pick-popup__option.pp__color:focus-visible { outline: 2px solid var(--c-dark); outline-offset: 2px; }
.cart-popup { width: min(600px, calc(100vw - 24px)); }
.wish-popup { width: min(460px, calc(100vw - 24px)); }
.wish-popup__text { margin: 0; font-size: 15px; line-height: 1.5; }
.wish-popup__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.wish-popup__buttons .btn { flex: 1; }
.cart-popup .modal__body { padding: 8px 20px 20px; }
.cart-popup .cart { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cart-popup .cart__item { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px 36px 12px 0; }
.cart-popup .cart__photo img { width: 72px; height: 108px; }
.cart-popup .cart__summary { position: static; padding: 16px; }
.cart-popup .cart-empty { padding: 0 0 8px; }
.modal__body table { width: 100%; font-size: 14px; border-collapse: collapse; }
.modal__body th, .modal__body td { padding: 6px 8px; text-align: center; border: 1px solid var(--c-line); }

@media (min-width: 1024px) {
  .pp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "crumbs crumbs" "gallery gallery" "head buy" "details buy"; grid-template-rows: auto auto auto 1fr; column-gap: 72px; align-items: start; }
  .pp__crumbs { grid-area: crumbs; margin: 0 0 20px; }
  .pp__gallery { grid-area: gallery; margin: 0; }
  .pp__head { grid-area: head; margin-top: 40px; }
  .pp__buy { grid-area: buy; margin-top: 40px; }
  .pp__details { grid-area: details; margin-top: 24px; }
  .pp__track { display: flex; justify-content: safe center; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pp__track::-webkit-scrollbar { display: none; }
  .pp__slide { flex: 0 0 calc(100% / 3); aspect-ratio: 3 / 4; scroll-snap-align: start; }
  .pp__slide + .pp__slide { border-top: 0; border-left: 2px solid var(--c-line); }
  .pp__slide img { object-position: 50% 25%; }
  .pp__slide--fit { max-height: none; }
  .pp__slide--fit img { object-position: center; }
  .pp__arrows { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: flex; gap: 8px; }
  .pp__arrows.is-static { display: none; }
  .pp__arrow { width: 56px; height: 56px; background: rgba(255,255,255,.92); }
  .pp__arrow svg { width: 26px; height: 26px; }
  .pp__title { font-size: 32px; font-weight: 500; line-height: 1.2; }
  .pp__sku { margin-top: 8px; font-size: 13px; }
  .pp__colors { grid-template-columns: repeat(auto-fill, 84px); gap: 10px; }
  .pp__stock { justify-self: end; min-width: 200px; }
  .pp__buttons { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
  .pp__wish { order: -1; }
  .pp-bar { display: none; }
}
@media (min-width: 1600px) { .pp__slide { flex-basis: 25%; } }

/* ---------- cart page ---------- */
.cart-page { max-width: 1240px; }
.cart { display: grid; gap: 24px; }
.cart__list { border-top: 1px solid var(--c-line); }
.cart__item { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px 40px 16px 0; border-bottom: 1px solid var(--c-line); transition: opacity .2s; }
.cart__item.is-busy { opacity: .45; pointer-events: none; }
.cart__photo img { width: 96px; height: 144px; object-fit: cover; background: var(--c-soft); }
.cart__name { display: block; font-weight: 500; line-height: 1.35; }
.cart__name:hover { text-decoration: underline; }
.cart__meta { margin-top: 2px; font-size: 13px; color: var(--c-muted); }
.cart__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 8px; }
.cart__old { font-size: 14px; color: var(--c-muted); }
.cart__now { font-weight: 600; }
.cart__now.is-reduced { color: var(--c-accent); }
.cart__mark { padding: 2px 6px; font-size: 11px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--c-on-dark); background: var(--c-dark); border-radius: var(--radius); }
.cart__error { margin: 6px 0 0; font-size: 13px; color: var(--c-accent); }
.cart__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; }
.cart__sum { font-size: 17px; font-weight: 600; }
.cart__remove { position: absolute; top: 10px; right: 0; display: grid; place-items: center; width: 40px; height: 40px; color: var(--c-muted); }
.cart__remove:hover { color: var(--c-text); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line); border-radius: var(--radius); }
.qty:focus-within { border-color: var(--c-dark); }
.qty__btn { display: grid; place-items: center; width: 40px; height: 40px; }
.qty__btn:disabled { color: var(--c-line); cursor: default; }
.qty__input { width: 40px; height: 40px; padding: 0; font: inherit; text-align: center; color: inherit; background: none; border: 0; -moz-appearance: textfield; appearance: textfield; }
.qty__input:focus { outline: none; }
.qty__input::-webkit-inner-spin-button, .qty__input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.cart__summary { display: grid; gap: 12px; align-content: start; padding: 20px; background: var(--c-soft); }
.cart__note { padding: 10px 12px; font-size: 14px; line-height: 1.4; background: var(--c-bg); border-left: 3px solid var(--c-accent); }
.cart__note.is-on { border-left-color: var(--c-dark); }
.cart__total { display: flex; justify-content: space-between; gap: 16px; }
.cart__total--grand { font-size: 18px; font-weight: 600; }
.cart__total + .cart__total--grand { padding-top: 12px; border-top: 1px solid var(--c-line); }
.cart__btn { width: 100%; }
.cart-empty { display: grid; justify-items: start; gap: 20px; padding: 8px 0 24px; }
@media (min-width: 1024px) {
  .cart { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 48px; }
  .cart__item { grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding-block: 20px; }
  .cart__photo img { width: 120px; height: 180px; }
  .cart__summary { position: sticky; top: 24px; }
}

/* ---------- stage 2 QA: tab bar only on phones and tablets, its cart count, size charts, surcharges, 404 ---------- */
@media (min-width: 1024px) { .tabbar { display: none; } }
.tabbar__item { position: relative; }
.tabbar__badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; text-align: center; color: var(--c-on-dark); background: var(--c-dark); border-radius: 8px; }
.size-chart { margin: 0 0 12px; overflow-x: auto; }
.size-chart table, .prose table { width: 100%; font-size: 14px; border-collapse: collapse; }
.size-chart th, .size-chart td, .prose th, .prose td { padding: 6px 8px; text-align: center; white-space: nowrap; border: 1px solid var(--c-line); }
.size-chart th, .prose th { font-weight: 600; background: var(--c-soft); }
.size-chart tbody tr:nth-child(even) { background: var(--c-soft); }
.size-chart__note { font-size: 13px; line-height: 1.5; color: var(--c-muted); }
.pp__surcharge { display: block; font-size: 11px; line-height: 1.2; color: var(--c-muted); }
.not-found .btn { margin-top: 20px; }

/* ---------- checkout (one page) and the thank-you page ---------- */
.co-page { max-width: 1240px; }
.co { display: grid; gap: 24px; }
.co__main { display: grid; gap: 28px; min-width: 0; }
.co__block { min-width: 0; margin: 0; padding: 0; border: 0; }
.co__legend { margin: 0 0 14px; padding: 0; font-size: 17px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.co__grid { display: grid; gap: 14px; }
.co__choices { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; }
.co__choices--column { flex-direction: column; margin-bottom: 0; }
.co__other { margin-top: 14px; }
.co__hint--top { margin: 12px 0 14px; }
.co__hint { margin: 10px 0 0; font-size: 13px; color: var(--c-muted); }
/* Nova Poshta: a branch or the courier, in a list under the two carriers (Oleg 30.09) */
.co__np-mode { max-width: 420px; margin: 0 0 14px; }
.co__np-mode[hidden] { display: none; }
.fld__input--select { padding-right: 36px; cursor: pointer; }
.co__error { margin: 0; font-size: 14px; color: var(--c-accent); }
.co__error:empty { display: none; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld__label { font-size: 14px; color: var(--c-muted); }
.fld__req { color: var(--c-accent); }
.fld__input { width: 100%; height: 48px; padding: 0 14px; font: inherit; color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); transition: border-color .2s; }
.fld__input:focus { border-color: var(--c-dark); outline: none; }
.fld__input.is-invalid { border-color: var(--c-accent); }
.fld__input--area { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.4; resize: vertical; }
.search__suggest { max-width: var(--w); margin: 0 auto; padding: 4px var(--pad) 18px; max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.search__suggest[hidden] { display: none; }
.ss__title { margin: 14px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted, #777); }
.ss__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* the categories above the products found stand out in violet (Oleg 09.10) */
.ss__cat { display: block; padding: 7px 12px; font-size: 14px; color: var(--c-text); background: var(--c-chip-bg); border: 1.5px solid var(--c-chip); border-radius: var(--radius); }
.ss__cat:hover, .ss__cat:focus-visible, .ss__cat.is-active { color: var(--c-bg); background: var(--c-chip); border-color: var(--c-chip); }
.ss__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 20px; margin: 14px 0 0; padding: 0; list-style: none; }
.ss__item { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: var(--radius); }
.ss__item:hover, .ss__item:focus-visible, .ss__item.is-active { background: var(--c-hover); }
.ss__img { flex: none; width: 48px; height: 64px; object-fit: cover; background: var(--c-hover); }
.ss__name { display: block; font-size: 14px; line-height: 1.3; }
.ss__meta { display: block; margin-top: 3px; font-size: 13px; color: var(--c-muted, #777); }
.ss__price { color: var(--c-text); font-weight: 600; }
.ss__price--sale { color: var(--c-accent); }
.ss__old { margin-left: 6px; text-decoration: line-through; }
.ss__all { display: inline-block; margin-top: 14px; font-size: 14px; text-decoration: underline; }
.ss__empty { margin: 14px 0 0; font-size: 14px; color: var(--c-muted, #777); }
.callme { position: fixed; right: 20px; bottom: 24px; z-index: 44; display: grid; place-items: center; width: 56px; height: 56px; color: var(--c-on-dark); background: var(--c-dark); border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: transform .2s; }
.callme:hover, .callme:focus-visible { transform: scale(1.06); }
.route-checkout-checkout .callme, .route-checkout-cart .callme { bottom: 88px; }
@media (max-width: 1023px) { .callme { right: 14px; bottom: calc(74px + env(safe-area-inset-bottom)); width: 50px; height: 50px; } .route-product-product .callme { bottom: calc(142px + env(safe-area-inset-bottom)); } }
@media print { .callme { display: none; } }
dialog.modal.callback { width: min(420px, calc(100vw - 24px)); }
.callback form, .cnt__form { display: grid; gap: 14px; }
.callback__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-muted, #777); }
.callback__btn { width: 100%; }
.rq__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rq__done { margin: 0; padding: 12px 14px; font-size: 15px; line-height: 1.45; background: var(--c-ok-bg); border-radius: var(--radius); }
.rq__done[hidden] { display: none; }
form.is-sent > *:not(.rq__done) { display: none; }
.pp__quick { grid-column: 1 / -1; justify-self: center; min-height: 40px; padding: 0 8px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: var(--c-text); }
.pp__quick:hover { color: var(--c-accent); }
.callback__text[data-quick-what] { font-weight: 500; color: var(--c-text); }
.callback__text[data-quick-what]:empty { display: none; }
form.is-sent .rq__done { padding: 22px 18px; font-size: 17px; text-align: center; }
.cnt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 56px; align-items: start; }
.cnt__row { display: grid; gap: 4px; margin: 0 0 18px; }
.cnt__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted, #777); }
.cnt__value { font-size: 16px; line-height: 1.5; }
.cnt__value--big { font-size: 22px; font-weight: 600; }
.cnt__links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cnt__links a { text-decoration: underline; }
.cnt__call { margin-top: 6px; }
.cnt__title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 767px) { .cnt { grid-template-columns: 1fr; gap: 28px; } }
.page--narrow { max-width: 520px; }
.page--wide { max-width: 1100px; }
.acc__form { display: grid; gap: 14px; }
.acc__lead { margin: 0 0 18px; line-height: 1.55; color: var(--c-muted, #777); }
.acc__lead a, .acc__links a { color: var(--c-text); text-decoration: underline; }
.acc__links { margin: 4px 0 0; font-size: 14px; }
.acc__alert { margin: 0 0 16px; padding: 12px 14px; font-size: 15px; line-height: 1.45; color: var(--c-accent); background: var(--c-error-bg); border-radius: var(--radius); }
.acc__aside { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.acc__aside p { margin: 0 0 14px; line-height: 1.55; color: var(--c-muted, #777); }
.acc__subtitle { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.fld__hint { margin: 0; font-size: 12px; color: var(--c-muted, #777); }
.acc__cols { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: start; }
.acc__nav { display: grid; border: 1px solid var(--c-line); border-radius: var(--radius); }
.acc__nav a { padding: 13px 16px; font-size: 15px; border-bottom: 1px solid var(--c-line); }
.acc__nav a:last-child { border-bottom: 0; color: var(--c-muted, #777); }
.acc__nav a:hover { background: var(--c-soft); }
.acc__nav a.is-active { font-weight: 600; background: var(--c-soft); }
.acc__main .acc__form { max-width: 460px; }
.acc__hello { margin: 0 0 18px; font-size: 17px; }
/* the personal discount of the customer (stage 5, item 10), in red as the discount lines (Oleg 28.09 22:28) */
.acc__discount { margin: 0 0 18px; padding: 12px 14px; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--c-accent); background: var(--c-bg); border-left: 3px solid var(--c-accent); }
.acc__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.acc__tile { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--c-line); border-radius: var(--radius); transition: border-color .2s; }
.acc__tile:hover { border-color: var(--c-dark); }
.acc__tile strong { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.acc__tile span { font-size: 14px; line-height: 1.45; color: var(--c-muted, #777); }
.acc__table { overflow-x: auto; margin-bottom: 18px; }
.acc__table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.acc__table th { padding: 10px 12px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-align: left; text-transform: uppercase; color: var(--c-muted, #777); border-bottom: 1px solid var(--c-line); }
.acc__table td { padding: 14px 12px; vertical-align: middle; border-bottom: 1px solid var(--c-line); }
.acc__table tfoot td { padding: 8px 12px; text-align: right; border-bottom: 0; }
.acc__table small { color: var(--c-muted, #777); }
.acc__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 0 0 24px; }
.acc__facts dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted, #777); }
.acc__facts dd { margin: 4px 0 0; line-height: 1.5; }
.acc__note { margin: 0 0 18px; line-height: 1.55; }
.acc__empty { margin: 0 0 18px; color: var(--c-muted, #777); }
.acc__wish { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.acc__wish-item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.acc__wish-img img { width: 84px; height: 112px; object-fit: cover; background: var(--c-soft); }
.acc__wish-text { display: grid; gap: 5px; }
.acc__wish-name { font-size: 15px; line-height: 1.35; }
.acc__wish-meta { font-size: 13px; color: var(--c-muted, #777); }
.acc__wish-price { font-weight: 600; }
.acc__wish-price s { margin-left: 6px; font-weight: 400; color: var(--c-muted, #777); }
.acc__wish-actions { display: grid; gap: 8px; }
.co__register { margin-top: 14px; max-width: 420px; }
.fld__label.is-required::after { content: " *"; color: var(--c-accent); }
@media (max-width: 900px) {
  .acc__cols { grid-template-columns: 1fr; gap: 22px; }
  .acc__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc__nav a { border-right: 1px solid var(--c-line); font-size: 14px; padding: 11px 12px; }
  .acc__tiles, .acc__facts { grid-template-columns: 1fr; }
  .acc__table thead { display: none; }
  .acc__table tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
  .acc__table td { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border: 0; }
  .acc__table td[data-label]::before { content: attr(data-label); font-size: 12px; color: var(--c-muted, #777); text-transform: uppercase; letter-spacing: .05em; }
  .acc__table tfoot tr { border-bottom: 0; padding: 4px 0; }
  .acc__table tr.acc__table-total { grid-template-columns: 1fr auto; align-items: baseline; }
  .acc__table td.acc__table-name { display: block; font-weight: 500; }
  .acc__wish-item { grid-template-columns: 72px minmax(0, 1fr); }
  .acc__wish-img img { width: 72px; height: 96px; }
  .acc__wish-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
.sg { position: relative; }
.sg__list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; margin: 0; padding: 4px 0; overflow-y: auto; list-style: none; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0, 0, 0, .12); overscroll-behavior: contain; }
/* the city and the branch read at a glance (Oleg 09.10: the list was too pale next to koshka) */
.sg__item { padding: 10px 14px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--c-dark); cursor: pointer; }
.sg__item.is-active, .sg__item:hover { background: var(--c-hover); }
.sg__note { display: block; margin-top: 1px; font-size: 13px; font-weight: 400; color: var(--c-muted, #777); }
.sg__empty { padding: 10px 14px; font-size: 13px; color: var(--c-muted, #777); }
.fld__error { margin: 0; font-size: 13px; color: var(--c-accent); }
.fld__error:empty { display: none; }
.chk { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 15px; cursor: pointer; }
.chk input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--c-dark); }
.choice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; line-height: 1.35; border: 1px solid var(--c-border); border-radius: var(--radius); cursor: pointer; transition: border-color .2s; }
.choice:has(input:checked) { border-color: var(--c-dark); box-shadow: inset 0 0 0 1px var(--c-dark); }
.choice input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--c-dark); }
.co__summary { display: grid; gap: 14px; align-content: start; padding: 20px; background: var(--c-soft); }
.co__summary .co__legend { margin: 0; }
.co__items { display: grid; gap: 14px; margin: 0; padding: 0 0 14px; list-style: none; border-bottom: 1px solid var(--c-line); }
.co__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.co__photo { width: 64px; height: 96px; object-fit: cover; background: var(--c-bg); }
.co__name { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; }
.co__meta { margin: 2px 0 0; font-size: 13px; color: var(--c-muted); }
.co__sum { font-weight: 600; white-space: nowrap; }
.co__totals { display: grid; gap: 8px; }
.cart__total--discount { color: var(--c-accent); }
.co__back { justify-self: center; font-size: 14px; color: var(--c-muted); text-decoration: underline; }
.co__back:hover { color: var(--c-text); }
.ok-page { max-width: 760px; }
.ok { display: grid; gap: 16px; justify-items: start; padding-bottom: 32px; }
.ok__number { margin: 0; font-size: 20px; font-weight: 600; }
.ok__text { margin: 0; }
.ok__facts { display: grid; gap: 8px; width: 100%; margin: 0; padding: 16px 20px; background: var(--c-soft); }
.ok__facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.ok__facts dt { color: var(--c-muted); }
.ok__facts dd { margin: 0; }
.ok__bank { width: 100%; padding: 16px 20px; border: 1px solid var(--c-dark); }
.ok__bank p { margin: 0; line-height: 1.6; }
@media (min-width: 640px) {
  .co__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .co { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; gap: 56px; }
  .co__summary { position: sticky; top: 16px; }
}

/* ---------- reviews (stage 4, step 5): stars, the row in the product accordions and the button under them
   (Oleg, 25.09: placed like koshka), the form in a window, the page of all reviews ---------- */
.stars { position: relative; display: inline-block; font-size: 16px; line-height: 1; letter-spacing: 2px; color: var(--c-line); white-space: nowrap; }
.stars::before, .stars__on::before { content: "★★★★★"; }
.stars__on { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--c-star); }
.stars--lg { font-size: 22px; }
.pp__rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; }
.pp__rating:hover { color: var(--c-text); }
.rv__summary { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rv__avg { font-size: 22px; font-weight: 600; }
.rv__count { font-size: 13px; color: var(--c-muted); }
.rv__item { padding: 18px 0; border-top: 1px solid var(--c-line); }
.rv__text { margin-top: 8px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.rv__meta { margin-top: 6px; font-size: 13px; color: var(--c-muted); }
.rv__author { font-weight: 500; color: var(--c-text); }
.rv__empty { color: var(--c-muted); }
.rv__more { margin-top: 16px; }
.rv__cta, .rv__login { margin-top: 16px; }
.rv__login { color: var(--c-muted); }
.rv__login a { text-decoration: underline; text-underline-offset: 3px; }
dialog.modal.rv-dialog { width: min(480px, calc(100vw - 24px)); }
.rv__rate { margin: 0; padding: 0; border: 0; min-width: 0; }
.rv__rate legend { padding: 0; margin-bottom: 6px; }
/* the radios are 1..5 in DOM order (no row-reverse), so the arrow keys move the rating the way the stars are drawn;
   :has() lights the stars left of the hovered/checked one (the theme already relies on it, .pp__color) */
.rv__stars { display: inline-flex; gap: 4px; font-size: 34px; line-height: 1; }
.rv__star-input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.rv__star { color: var(--c-line); cursor: pointer; transition: color .15s; }
.rv__star:hover, .rv__star:has(~ .rv__star:hover), .rv__star-input:checked + .rv__star, .rv__star:has(~ .rv__star-input:checked) { color: var(--c-star); }
.rv__star-input:focus-visible + .rv__star { outline: 2px solid var(--c-dark); outline-offset: 2px; border-radius: 2px; }
.rv__btn { width: 100%; }
.rv__grid .rv__item { padding: 0; border: 0; }
.rv__photo { display: block; aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 10px; background: var(--c-soft); }
.rv__photo img { width: 100%; height: 100%; object-fit: cover; }
.rv__product { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; letter-spacing: .02em; line-height: 1.35; text-transform: uppercase; }
.rv__grid .rv__text { font-size: 15px; }
@media (max-width: 639px) { .rv__open { width: 100%; } .rv__grid { margin: 0; } }


/* ---------- journal (stage 7, item 8): the cards of the list and of the home block, the article ---------- */
.jr__grid { display: grid; grid-template-columns: 1fr; gap: 28px 24px; }
.jr__card { display: flex; flex-direction: column; gap: 8px; }
.jr__photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-soft); border-radius: 4px; }
.jr__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.jr__card:hover .jr__photo img { transform: scale(1.03); }
.jr__date { font-size: 13px; color: var(--c-muted); }
.jr__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; text-align: left; }
.jr__title a { color: inherit; text-decoration: none; }
.jr__title a:hover { color: var(--c-accent); }
.jr__intro { margin: 0; font-size: 15px; line-height: 1.5; color: var(--c-muted); }
.jr__more { font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.jr__article { max-width: 800px; margin: 0 auto; }
.jr__heading { margin: 0 0 8px; font-size: 28px; font-weight: 600; line-height: 1.25; }
.jr__image { display: block; width: 100%; height: auto; margin: 20px 0 28px; border-radius: 4px; }
.jr__text { font-size: 17px; line-height: 1.65; }
.jr__text img { max-width: 100%; height: auto; }
.jr__back { margin: 32px 0 0; }
.jr__others { margin-top: 56px; }
.sec.jr .jr__title { font-size: 16px; }
@media (min-width: 640px) { .jr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jr__grid { grid-template-columns: repeat(3, 1fr); gap: 36px 32px; } .jr__heading { font-size: 34px; } }

/* «Ми в Instagram» on the home page (stage 7, item 7): square photos of the posts; a rail on phones, a row of six on desktops */
.ig__head { flex-wrap: wrap; }
.ig__handle { font-size: 15px; font-weight: 500; color: var(--c-muted); text-decoration: none; }
.ig__handle:hover { color: var(--c-accent); }
.ig__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; }
.ig__grid::-webkit-scrollbar { display: none; }
.ig__item { display: block; aspect-ratio: 1; overflow: hidden; background: var(--c-soft); border-radius: 4px; scroll-snap-align: start; }
.ig__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ig__item:hover img { transform: scale(1.04); }
@media (min-width: 768px) {
  .ig__grid { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; gap: 12px; overflow: visible; margin: 0; padding: 0; }
}