/* =====================================================================
   Home carousel — designed slides (admin «Карусель главной» → constructor; renderer
   js/components/home-carousel.js designHtml). Loaded by the storefront AND by the admin, so the
   constructor's preview is drawn by the same markup and rules as the site.
   A slide: the frame (image + «idle» layer) and the «hover» layer. Positions come inline in per
   cent of the frame; text sizes scale with the frame (container units, with a readable minimum).
   State switches by class, not by media query, so the admin can preview a phone or a touch screen:
     .hcv--hover / .hcv--idle  forced state (constructor)
     .hcv--touch               no hover on this device → the content («hover») state is shown
     .hcv--phone               < 640px: the frame on top, the content stacked under it
   ===================================================================== */
.hcv { position: absolute; inset: 0; --hcv-move: 340ms; }
.hcv__track { position: absolute; inset: 0; }
.hcv__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--hc-dur, 600ms) ease, visibility 0s linear var(--hc-dur, 600ms); }
.hcv__slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity var(--hc-dur, 600ms) ease, visibility 0s; }

.hcv-s { container-type: inline-size; background: var(--home-panel, var(--sf-panel, #F4F2EE)); font-family: inherit; }
.hcv-frame { position: absolute; inset: 0; overflow: hidden; }
.hcv-s .hcv-img { position: absolute; display: block; left: var(--ix); top: var(--iy); width: var(--iw); height: var(--ih); opacity: var(--i-vis, 1); overflow: hidden; border-radius: 0;
	transition: left var(--hcv-move) cubic-bezier(.2, .7, .2, 1), top var(--hcv-move) cubic-bezier(.2, .7, .2, 1), width var(--hcv-move) cubic-bezier(.2, .7, .2, 1), height var(--hcv-move) cubic-bezier(.2, .7, .2, 1), opacity 240ms ease, border-radius var(--hcv-move) ease; }
.hcv-s .hcv-img img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: var(--ifit, contain); transform: none; mix-blend-mode: normal; }
.hcv-s .hcv-img--product img { mix-blend-mode: multiply; }
.hcv-s .hcv-img:focus-visible { outline: 2px solid var(--sf-ink, #16181A); outline-offset: -4px; }
.hcv-layer { position: absolute; inset: 0; pointer-events: none; transition: opacity 240ms ease, visibility 0s linear 240ms; }
.hcv-layer--hover { opacity: 0; visibility: hidden; }
.hcv-e { position: absolute; box-sizing: border-box; margin: 0; }
.hcv-e a { pointer-events: auto; }

/* ---- the «hover» state: forced, touch screens, real hover / keyboard focus */
.hcv--hover:not(.hcv--phone) .hcv-s .hcv-img,
.hcv--touch:not(.hcv--idle):not(.hcv--phone) .hcv-s .hcv-img,
.hcv:not(.hcv--idle):not(.hcv--phone):not(.hcv--touch):hover .hcv-s.is-active .hcv-img,
.hcv:not(.hcv--idle):not(.hcv--phone):not(.hcv--touch):has(:focus-visible) .hcv-s.is-active .hcv-img { left: var(--hx); top: var(--hy); width: var(--hw); height: var(--hh); opacity: var(--h-vis, 1); }
.hcv--hover:not(.hcv--phone) .hcv-s .hcv-img img,
.hcv--touch:not(.hcv--idle):not(.hcv--phone) .hcv-s .hcv-img img,
.hcv:not(.hcv--idle):not(.hcv--phone):not(.hcv--touch):hover .hcv-s.is-active .hcv-img img,
.hcv:not(.hcv--idle):not(.hcv--phone):not(.hcv--touch):has(:focus-visible) .hcv-s.is-active .hcv-img img { object-fit: var(--hfit, contain); }
.hcv--hover:not(.hcv--phone) .hcv-s--banner .hcv-img,
.hcv--touch:not(.hcv--idle):not(.hcv--phone) .hcv-s--banner .hcv-img,
.hcv:not(.hcv--idle):not(.hcv--phone):not(.hcv--touch):hover .hcv-s--banner.is-active .hcv-img,
.hcv:not(.hcv--idle):not(.hcv--phone):not(.hcv--touch):has(:focus-visible) .hcv-s--banner.is-active .hcv-img { border-radius: 14px; }
.hcv--hover:not(.hcv--phone) .hcv-s .hcv-layer--idle,
.hcv--touch:not(.hcv--idle):not(.hcv--phone) .hcv-s .hcv-layer--idle,
.hcv:not(.hcv--idle):not(.hcv--phone):not(.hcv--touch):hover .hcv-s.is-active .hcv-layer--idle,
.hcv:not(.hcv--idle):not(.hcv--phone):not(.hcv--touch):has(:focus-visible) .hcv-s.is-active .hcv-layer--idle { opacity: 0; visibility: hidden; }
.hcv--hover:not(.hcv--phone) .hcv-s .hcv-layer--hover,
.hcv--touch:not(.hcv--idle):not(.hcv--phone) .hcv-s .hcv-layer--hover,
.hcv:not(.hcv--idle):not(.hcv--phone):not(.hcv--touch):hover .hcv-s.is-active .hcv-layer--hover,
.hcv:not(.hcv--idle):not(.hcv--phone):not(.hcv--touch):has(:focus-visible) .hcv-s.is-active .hcv-layer--hover { opacity: 1; visibility: visible; transition: opacity 280ms ease 60ms, visibility 0s; }

/* ---- card, decorative element */
.hcv-e--card { background: var(--c-bg); border: var(--c-bw) solid var(--c-line); border-radius: var(--c-r); }
/* A card that lines up its content: a column from the top, the button at the bottom; the card
   grows with its content (its height is a minimum), long names push the rest down instead of overlapping. */
.hcv-stack { display: flex; flex-direction: column; align-items: stretch; gap: max(6px, .9cqw); padding: max(14px, 2.6cqw); }
.hcv-stack > .hcv-in { position: static; width: auto; }
.hcv-stack > .hcv-e--chip { align-self: flex-start; max-width: 100%; }
.hcv-stack > .hcv-e--button { margin-top: auto; padding-top: max(4px, .5cqw); }
.hcv-e--card.has-shadow { box-shadow: 0 10px 30px rgba(22, 24, 26, .10), 0 1px 3px rgba(22, 24, 26, .06); }
.hcv-deco--bar { background: var(--d-c); border-radius: 2px; }
.hcv-deco--line { height: 0 !important; border-top: 2px solid var(--d-c); }
.hcv-deco--dot { height: auto !important; aspect-ratio: 1; border-radius: 50%; background: var(--d-c); }

/* ---- texts: size steps scale with the frame; long texts end in «…» (the constructor warns) */
.hcv-e--title { color: var(--t-c); font-weight: 600; line-height: 1.25; }
.hcv-e--title.hcv-size-S { font-size: max(12px, 2.2cqw); }
.hcv-e--title.hcv-size-M { font-size: max(13px, 2.9cqw); }
.hcv-e--title.hcv-size-L { font-size: max(14px, 3.8cqw); }
.hcv-e--title.hcv-size-XL { font-size: max(16px, 5.2cqw); line-height: 1.12; }
.hcv-e--text { color: var(--t-c); line-height: 1.45; }
.hcv-e--text.hcv-size-S { font-size: max(11px, 1.75cqw); }
.hcv-e--text.hcv-size-M { font-size: max(12px, 2.05cqw); }
.hcv-e--text.hcv-size-L { font-size: max(12px, 2.4cqw); }
.hcv-e--text.hcv-size-XL { font-size: max(13px, 2.9cqw); }
.hcv-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hcv-brand { display: block; margin-bottom: .25em; font-size: .62em; font-weight: 600; color: var(--sf-label, #5C5F63); }
.hcv-e--price { color: var(--t-c); }
.hcv-e--price.hcv-size-S { font-size: max(14px, 2.4cqw); }
.hcv-e--price.hcv-size-M { font-size: max(15px, 3cqw); }
.hcv-e--price.hcv-size-L { font-size: max(16px, 3.8cqw); }
.hcv-e--price.hcv-size-XL { font-size: max(18px, 4.8cqw); }
.hcv-e--price .hcv__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .5em; justify-content: inherit; }
.hcv-e--price .hcv__price-now { font-family: var(--font-mono, monospace); font-size: 1em; font-weight: 700; color: inherit; }
.hcv-e--price .hcv__price-old { font-family: var(--font-mono, monospace); font-size: .62em; color: var(--sf-label, #5C5F63); }
.hcv-e--price .hcv__price-unit { font-size: .55em; color: var(--sf-label, #5C5F63); }
.hcv-e--price .hcv__stock { margin: .2em 0 0; font-size: .5em; color: var(--sf-label, #5C5F63); }

/* ---- button: main / outline / quiet */
.hcv-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: .6em; width: 100%; box-sizing: border-box; padding: .75em 1em; border-radius: var(--btn-r); font-weight: 600; line-height: 1.2; text-decoration: none; }
.hcv-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcv-btn svg { flex: none; width: 1.2em; height: 1.2em; }
.hcv-btn.hcv-size-S { font-size: max(12px, 1.75cqw); }
.hcv-btn.hcv-size-M { font-size: max(13px, 2.05cqw); }
.hcv-btn.hcv-size-L { font-size: max(14px, 2.5cqw); }
.hcv-btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.hcv-btn--primary:hover { filter: brightness(1.12); }
.hcv-btn--outline { background: transparent; color: var(--btn-bg); box-shadow: inset 0 0 0 2px var(--btn-bg); }
.hcv-btn--quiet { width: auto; padding-left: 0; padding-right: 0; background: transparent; color: var(--btn-bg); justify-content: flex-start; text-decoration: underline; text-underline-offset: .2em; }
.hcv-btn:focus-visible { outline: 2px solid var(--sf-ink, #16181A); outline-offset: 2px; }

/* ---- compact mark in the card */
.hcv-chip { display: inline-flex; align-items: center; max-width: 100%; padding: .3em .85em; border-radius: 999px; font-size: max(11px, 1.7cqw); font-weight: 600; line-height: 1.2; background: var(--b-bg); color: var(--b-fg); box-shadow: inset 0 0 0 1px var(--b-line); overflow-wrap: anywhere; }

/* ---- the big advertising mark: as wide as its text (up to its line limit), one transform about its
   centre (rotate + scale with flips, --b-t) — the plate scales as a whole, nothing is overwritten. */
.hcv-e--badge { width: fit-content; transform: var(--b-t, none); transform-origin: 50% 50%; }
/* ---- the big advertising mark: one system, ten shapes */
.hcv-b { position: relative; display: inline-flex; align-items: center; max-width: 100%; box-sizing: border-box; padding: .45em .9em; font-weight: 700; line-height: 1.1; color: var(--b-fg); background: var(--b-bg); border: var(--b-bw) solid var(--b-line); border-radius: var(--b-r); overflow-wrap: anywhere; }
.hcv-b--size-S { font-size: max(11px, 1.7cqw); }
.hcv-b--size-M { font-size: max(12px, 2.4cqw); }
.hcv-b--size-L { font-size: max(13px, 3.4cqw); }
.hcv-b--size-XL { font-size: max(18px, 6cqw); }
/* Shapes without a background: the palette's main colour (its «Фон») is the colour of the text. */
.hcv-b--plain { background: none; border: 0; padding: 0; color: var(--b-bg); }
.hcv-b--rect { border-radius: 0; }
.hcv-b--bevel { border-radius: 0; clip-path: polygon(.6em 0, 100% 0, 100% calc(100% - .6em), calc(100% - .6em) 100%, 0 100%, 0 .6em); }
.hcv-b--corners { border-radius: 0; margin: .3em; }
.hcv-b--corners::before, .hcv-b--corners::after { content: ""; position: absolute; width: .8em; height: .8em; border: 2px solid var(--b-deco); }
.hcv-b--corners::before { left: -.35em; top: -.35em; border-right: 0; border-bottom: 0; }
.hcv-b--corners::after { right: -.35em; bottom: -.35em; border-left: 0; border-top: 0; }
.hcv-b--corners.hcv-b--d2::before, .hcv-b--corners.hcv-b--d2::after { width: 1.1em; height: 1.1em; border-width: 3px; }
.hcv-b--outline { outline: 1.5px solid var(--b-deco); outline-offset: .22em; margin: .3em; }
.hcv-b--outline.hcv-b--d2 { box-shadow: .45em .45em 0 -.05em var(--b-deco); }
.hcv-b--torn { border-radius: 0; border: 0; padding: .55em 1.1em; clip-path: polygon(0 6%, 4% 0, 18% 5%, 33% 0, 50% 6%, 66% 1%, 82% 6%, 96% 0, 100% 8%, 98% 50%, 100% 92%, 95% 100%, 80% 95%, 64% 100%, 48% 94%, 32% 100%, 16% 95%, 3% 100%, 0 92%, 2% 50%); }
.hcv-b--glow { box-shadow: 0 0 .8em -.1em var(--b-glow); }
.hcv-b--glowing { box-shadow: 0 0 .7em -.15em var(--b-glow); }
.hcv-b--vertical { border-left: .25em solid var(--b-deco); }
.hcv-b--v { writing-mode: vertical-rl; transform: rotate(180deg); padding: .9em .45em; }
.hcv-b--bigtext { background: none; border: 0; padding: 0; color: var(--b-bg); font-weight: 800; font-size-adjust: none; letter-spacing: -.02em; line-height: 1.02; flex-direction: column; align-items: flex-start; }
.hcv-b--bigtext::after { content: ""; display: block; width: 2.2em; height: .1em; margin-top: .25em; background: var(--b-deco); }
.hcv-b--bigtext.hcv-b--d0::after { display: none; }
.hcv-b--bigtext.hcv-b--d2::after { height: .16em; width: 3em; }
.hcv-b--d0::before, .hcv-b--d0::after { display: none; }
.hcv-b--d0.hcv-b--outline { outline: 0; }

/* ---- the counter and dots over a designed slide get a light backing */
.hcv:not(.hcv--phone):has(.hcv-s.is-active) .hcv__count, .hcv:not(.hcv--phone):has(.hcv-s.is-active) .hcv__dots { padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .88); }
.hcv:not(.hcv--phone):has(.hcv-s.is-active) .hcv__count { line-height: 24px; }

/* ---- phones: the frame (image + idle composition) on top, the content stacked under it */
.hcv--phone { position: relative; inset: auto; }
.hcv--phone .hcv__track { position: relative; inset: auto; display: grid; }
.hcv--phone .hcv__slide { position: relative; inset: auto; grid-area: 1 / 1; display: flex; flex-direction: column; }
.hcv--phone .hcv-frame { position: relative; inset: auto; aspect-ratio: 16 / 11; }
.hcv--phone .hcv-layer--hover { position: static; opacity: 1; visibility: inherit; display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0 12px; padding: 14px; border-radius: 18px; background: #fff; pointer-events: auto; }
.hcv--phone .hcv-layer--hover:not(:has(.hcv-e--chip, .hcv-e--title, .hcv-e--text, .hcv-e--price, .hcv-e--button)) { display: none; }
.hcv--phone .hcv-layer--hover .hcv-e { position: static; width: auto !important; text-align: left !important; }
.hcv--phone .hcv-layer--hover .hcv-e--card:not(.hcv-stack), .hcv--phone .hcv-layer--hover .hcv-e--deco, .hcv--phone .hcv-layer--hover .hcv-e--badge { display: none; }
.hcv--phone .hcv-layer--hover .hcv-stack { display: contents; }
/* The plate is already on the picture: no second copy in the content under it. */
.hcv--phone .hcv-s:has(.hcv-layer--idle .hcv-e--badge) .hcv-layer--hover .hcv-e--chip { display: none; }
.hcv--phone .hcv-layer--hover .hcv-e--title { font-size: 17px; }
.hcv--phone .hcv-layer--hover .hcv-e--text { font-size: 13px; }
.hcv--phone .hcv-layer--hover .hcv-e--price { font-size: 20px; }
.hcv--phone .hcv-layer--hover .hcv-chip { font-size: 12px; }
.hcv--phone .hcv-layer--hover .hcv-btn { font-size: 14px; min-height: 44px; }
.hcv--phone .hcv__controls { position: static; padding: 10px 12px 12px 16px; }

@media (prefers-reduced-motion: reduce) {
	.hcv-s .hcv-img, .hcv-layer { transition: none !important; }
}