.
Sibling rails on PDP use .pdp-product-rail (4-col grid), which would
constrain hc-bundles section into a single ~320px cell. This wrapper
stays block-level so the inner .hc-bundles__grid governs layout. */
.hc-bundles__mount {
display: block;
width: 100%;
}
/* Shared responsive grid utilities for repeated card/rail patterns */
.hc-grid-fit-220 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.hc-grid-fit-240 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.hc-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--hc-sp-3);
}
.hc-grid-4-3-2-1 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hc-util-autofit-240 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--hc-sp-3, 14px);
}
.hc-util-mt-3 { margin-top: var(--hc-sp-3, 14px); }
.hc-util-my-3 { margin: var(--hc-sp-3, 14px) 0; }
.hc-util-pad-4 { padding: var(--hc-sp-4, 20px); }
.hc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-link-accent { color: var(--hc-accent-dark, #7a6548); }
.hc-link-accent:hover { text-decoration: underline; text-underline-offset: 2px; }
.hc-link-underline { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1440px) {
.hc-grid-4-3-2-1 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.hc-grid-4-3-2-1 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hc-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.hc-grid-4-3-2-1 {
grid-template-columns: 1fr;
}
}
/* ---- folded from 033-g2.css ---- */
/* =================== g2.css =================== */
.g2 {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px}
.page-delivery .g2 {
align-items: stretch
}
/* cookie-banner.css - consent banner component. */
.cookie-banner {
position: fixed;
left: auto;
right: max(14px, env(safe-area-inset-right));
bottom: max(14px, env(safe-area-inset-bottom));
z-index: 70;
display: flex;
justify-content: flex-end;
pointer-events: none;
}
body.cookie-banner-open {
padding-bottom: 0;
}
.cookie-banner__inner {
/* Sprint43: tighter desktop footprint — was min(360px, ...) padding:10px
overlapping card actions at viewport bottom-right. */
width: min(300px, calc(100vw - 28px));
display: grid;
grid-template-columns: 1fr;
gap: 8px;
align-items: start;
padding: 12px 14px;
background: rgba(255, 252, 247, 0.96);
border: 1px solid rgba(141, 109, 71, 0.22);
border-radius: 14px;
box-shadow: 0 14px 44px -30px rgba(26, 23, 20, 0.35);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
pointer-events: auto;
}
.cookie-banner__body {
min-width: 0;
display: grid;
gap: 5px;
}
.cookie-banner__body strong {
font-family: var(--hc-serif, Georgia, serif);
font-size: 15px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
}
.cookie-banner__body p {
margin: 0;
max-width: 68ch;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.70));
font-size: 10px;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cookie-banner__body a {
color: var(--hc-accent-dark, #5d4d3a);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.cookie-banner__details {
margin-top: 2px;
font-size: 12px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.70));
}
.cookie-banner__details summary {
width: max-content;
cursor: pointer;
font-family: var(--hc-mono, ui-monospace, monospace);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.cookie-banner__toggle {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 8px 10px 0 0;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.70));
}
.cookie-banner__toggle input {
accent-color: var(--hc-ink, #1a1714);
}
.cookie-banner__toggle small {
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.cookie-banner__ctas {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-start;
}
.cookie-banner .btn {
min-height: 32px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid rgba(26, 23, 20, 0.16);
background: rgba(255, 255, 255, 0.78);
color: var(--hc-ink, #1a1714);
font-family: var(--hc-sans, system-ui, sans-serif);
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
.cookie-banner .btn--primary {
border-color: var(--hc-ink, #1a1714);
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
}
.cookie-banner .btn--ghost:hover {
background: rgba(212, 184, 150, 0.18);
border-color: rgba(141, 109, 71, 0.34);
}
@media (max-width: 768px) {
.cookie-banner {
left: 8px;
right: 8px;
bottom: 8px;
}
body.cookie-banner-open {
padding-bottom: 0;
}
.cookie-banner__inner {
width: 100%;
grid-template-columns: 1fr;
gap: 10px;
padding: 12px;
border-radius: 12px;
}
.cookie-banner__body strong {
font-size: 15px;
}
.cookie-banner__body p {
font-size: 12px;
}
.cookie-banner__ctas {
display: grid;
grid-template-columns: 1fr 1fr;
}
.cookie-banner .btn {
width: 100%;
min-height: 34px;
padding: 0 10px;
}
.cookie-banner #cookieReject {
grid-column: 1 / -1;
}
}
/* =================== page-catalog.css =================== */
.page-catalog .pcard.pcard-mini .pcard-mini__ph svg {
width: 100%;
height: 100%;
display: block;
}
.page-catalog .hc-cat-main {
min-width: 0;
}
.page-catalog .hc-cat-tile {
position: relative;
overflow: hidden;
border-radius: 8px;
min-height: 56px;
padding: 0;
border: 1px solid rgba(141, 109, 71, 0.18);
background: #ded8ce;
}
.page-catalog .hc-cat-tiles-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.page-catalog .hc-cat-tile__fallback {
position: absolute;
inset: 0;
display: grid;
place-items: center;
overflow: hidden;
}
.page-catalog .hc-cat-tile__fallback::before {
content: "";
position: absolute;
inset: auto -8% -28% -8%;
height: 62%;
border-radius: 999px;
background: rgba(255, 255, 255, 0.32);
}
.page-catalog .hc-cat-tile__mark {
position: relative;
z-index: 1;
width: 48px;
height: 48px;
border-radius: 999px;
border: 1px solid rgba(26, 23, 20, 0.16);
display: grid;
place-items: center;
font-family: var(--hc-serif, Georgia, serif);
font-size: 20px;
color: rgba(26, 23, 20, 0.72);
background: rgba(255, 255, 255, 0.7);
}
.page-catalog .hc-cat-tile__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.03);
transform: scale(1.01);
transition: filter 220ms ease, transform 240ms ease;
}
.page-catalog .hc-cat-tile__overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 6px;
padding: 8px 10px;
background: linear-gradient(
to top,
rgba(17, 15, 14, 0.72) 0%,
rgba(17, 15, 14, 0.28) 52%,
rgba(17, 15, 14, 0.06) 100%
);
}
.page-catalog .hc-cat-tile__title {
margin: 0;
color: #f6f4f1;
font-size: 11px;
line-height: 1.15;
letter-spacing: 0.01em;
text-transform: uppercase;
max-width: 88%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
/* Sprint48 — усиленный text-shadow для читаемости на светлых изображениях
* (Системы направляющих, Мебельные петли). Двойной shadow: близкий + дальний
* mimics a soft dark backdrop без перекрытия пиксельным наложением. */
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.62),
0 0 8px rgba(0, 0, 0, 0.38);
}
.page-catalog .hc-cat-tile__count {
color: #f6f4f1;
font-size: 10px;
line-height: 1;
letter-spacing: 0.02em;
border: 1px solid rgba(246, 244, 241, 0.45);
border-radius: 999px;
padding: 3px 6px;
background: rgba(20, 16, 13, 0.44);
white-space: nowrap;
}
.page-catalog .hc-cat-tile:hover .hc-cat-tile__img,
.page-catalog .hc-cat-tile:focus-visible .hc-cat-tile__img {
filter: grayscale(0);
transform: scale(1.04);
}
.page-catalog .hc-cat-tile:hover .hc-cat-tile__overlay,
.page-catalog .hc-cat-tile:focus-visible .hc-cat-tile__overlay {
background: linear-gradient(
to top,
rgba(17, 15, 14, 0.82) 0%,
rgba(17, 15, 14, 0.58) 52%,
rgba(17, 15, 14, 0.1) 100%
);
}
.page-catalog .hc-cat-tile__fallback--1 { background: linear-gradient(160deg, #ede5d5 0%, #d8c6aa 100%); }
.page-catalog .hc-cat-tile__fallback--2 { background: linear-gradient(160deg, #f0ece3 0%, #d8cdb8 100%); }
.page-catalog .hc-cat-tile__fallback--3 { background: linear-gradient(160deg, #e7e2d8 0%, #cdbca2 100%); }
.page-catalog .hc-cat-tile__fallback--4 { background: linear-gradient(160deg, #efe7dc 0%, #d6c3a9 100%); }
@media (max-width: 1024px) {
.page-catalog .hc-cat-tiles-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.page-catalog .hc-cat-tiles-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.page-catalog .hc-cat-tile {
min-height: 52px;
}
}
/* ─── Sprint 12.short: stronger view-mode active state ─── */
.hc-cat-toolbar__view-btn.is-active,
.hc-cat-toolbar__view-btn[aria-pressed="true"],
.hc-cat-toolbar__view-btn[data-active="true"] {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border-color: var(--hc-ink, #1a1714);
box-shadow: 0 6px 14px -6px rgba(40, 30, 15, 0.32);
}
.hc-cat-toolbar__view-btn.is-active::after,
.hc-cat-toolbar__view-btn[aria-pressed="true"]::after {
content: "";
position: absolute;
inset: -2px;
border: 1.5px solid var(--hc-gold, #d4b896);
border-radius: inherit;
pointer-events: none;
}
/* ─── Sprint13: category tile series-color accents ─── */
/* Series-color stripe — accents on category tiles by series-slug.
Targets common category data-slug attributes on the tile. */
[data-series-key="clip-top"] { --hc-tile-accent: #5b8a8a; }
[data-series-key="legrabox"] { --hc-tile-accent: #8b6e47; }
[data-series-key="merivobox"] { --hc-tile-accent: #4a5d76; }
[data-series-key="aventos"] { --hc-tile-accent: #b8894a; }
[data-series-key="movento"] { --hc-tile-accent: #5a4a3d; }
[data-series-key="tandembox"] { --hc-tile-accent: #7d6048; }
[data-series-key="orga-line"] { --hc-tile-accent: #6b8a5e; }
[data-series-key="tip-on"] { --hc-tile-accent: #908070; }
.hc-cat-tile,
.hc-shop-tile,
.hc-cat-pill,
[class*="cat-tile"] {
position: relative;
isolation: isolate;
}
.hc-cat-tile::before,
.hc-shop-tile::before,
.hc-cat-pill::before,
[class*="cat-tile"]::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--hc-tile-accent, var(--hc-gold, #d4b896));
border-radius: 3px 0 0 3px;
opacity: 0.86;
pointer-events: none;
z-index: 1;
}
/* ─── Sprint13.P2: shop mobile (375-720) ─── */
@media (max-width: 720px) {
/* Filter sidebar — collapse to dropdown/sheet */
.hc-shop__layout,
[class*="shop__layout"] {
grid-template-columns: 1fr !important;
}
/* Category tiles 4-col → 2-col on phone */
[class*="cat-tile"]:not(.hc-cat-pill),
.hc-cat-tile {
grid-template-columns: 1fr 1fr;
}
/* Filter dropdown becomes full-width bottom sheet trigger */
.hc-shop__filters,
[class*="shop"][class*="filters"] {
position: sticky;
bottom: 0;
background: var(--hc-paper, #ffffff);
z-index: 10;
}
/* PCard grid 4-col → 2-col on phone, 1-col under 420px */
.hc-shop__grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
}
@media (max-width: 420px) {
.hc-shop__grid {
grid-template-columns: 1fr;
}
}
/* ─── Sprint14.6: floating DIZ-style circles on tiles ─── */
/* Add 2 floating gold dots that orbit each category tile (DIZ-style FX) */
.hc-cat-tile,
.hc-shop-tile,
.hc-cat-pill,
[class*="cat-tile"]:not(.hc-cat-pill) {
position: relative;
overflow: hidden;
isolation: isolate;
}
.hc-cat-tile::after,
.hc-shop-tile::after,
.hc-cat-pill::after,
[class*="cat-tile"]:not(.hc-cat-pill)::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--hc-gold, #d4b896);
box-shadow: 0 0 12px rgba(212, 184, 150, 0.62);
top: 20%;
right: 28%;
opacity: 0;
z-index: 2;
transition: opacity 0.4s ease;
animation: hc-tile-orbit-a 8s ease-in-out infinite;
pointer-events: none;
}
.hc-cat-tile:hover::after,
.hc-shop-tile:hover::after,
.hc-cat-pill:hover::after,
[class*="cat-tile"]:hover::after {
opacity: 0.85;
}
/* Second floating dot via inner span if available, else use double-pulse keyframes */
@keyframes hc-tile-orbit-a {
0%, 100% {
transform: translate(0, 0) scale(1);
}
25% {
transform: translate(-22px, 18px) scale(1.4);
}
50% {
transform: translate(-44px, 4px) scale(0.7);
}
75% {
transform: translate(-16px, -22px) scale(1.2);
}
}
@media (prefers-reduced-motion: reduce) {
.hc-cat-tile::after,
.hc-shop-tile::after,
[class*="cat-tile"]::after {
animation: none;
}
}
/* ─── Sprint14.9: premium category tiles (v3 — correct markup) ─── */
.hc-cat-tile,
.hc-shop-tile {
position: relative !important;
display: block !important;
height: 132px !important;
border-radius: 16px !important;
overflow: hidden !important;
text-decoration: none !important;
isolation: isolate !important;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.04),
0 12px 28px -20px rgba(40, 30, 15, 0.18) !important;
transition: transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1), box-shadow 0.32s !important;
}
.hc-cat-tile:hover,
.hc-shop-tile:hover {
transform: translateY(-3px) !important;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.04),
0 28px 56px -28px rgba(184, 154, 111, 0.42) !important;
}
.hc-cat-tile__img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.5s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-cat-tile:hover .hc-cat-tile__img {
transform: scale(1.06);
}
.hc-cat-tile__overlay {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
gap: 4px !important;
padding: 18px 20px !important;
background: linear-gradient(180deg,
transparent 0%,
transparent 40%,
rgba(20, 16, 12, 0.42) 70%,
rgba(15, 12, 8, 0.85) 100%) !important;
}
.hc-cat-tile__title {
font-family: var(--hc-serif, "Cormorant Garamond", serif) !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 1.15 !important;
letter-spacing: -0.005em !important;
color: #ffffff !important;
text-transform: none !important;
margin: 0 !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}
.hc-cat-tile__count {
font-family: var(--hc-mono, "JetBrains Mono", monospace) !important;
font-size: 11px !important;
color: rgba(255, 255, 255, 0.86) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
}
.hc-cat-tile__count::before {
content: "";
width: 4px;
height: 4px;
background: var(--hc-gold, #d4b896);
border-radius: 50%;
display: inline-block;
}
/* Left vertical accent stripe (series color) */
.hc-cat-tile::before {
content: "";
position: absolute;
left: 0;
top: 14%;
bottom: 14%;
width: 3px;
background: var(--hc-tile-accent, var(--hc-gold, #d4b896));
border-radius: 0 3px 3px 0;
opacity: 0.94;
z-index: 3;
transition: opacity 0.3s, top 0.3s, bottom 0.3s;
}
.hc-cat-tile:hover::before {
top: 0;
bottom: 0;
opacity: 1;
}
/* Rotating dashed ring decoration top-right (DIZ-style) */
.hc-cat-tile::after {
content: "";
position: absolute;
top: -28px;
right: -28px;
width: 96px;
height: 96px;
border-radius: 50%;
border: 0.5px dashed rgba(212, 184, 150, 0.42);
z-index: 2;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
animation: hc-tile-rot 70s linear infinite;
}
.hc-cat-tile:hover::after {
opacity: 0.7;
}
@keyframes hc-tile-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.hc-cat-tile::after { animation: none; }
}
@media (max-width: 720px) {
.hc-cat-tile, .hc-shop-tile {
height: 108px !important;
}
.hc-cat-tile__title { font-size: 16px !important; }
.hc-cat-tile::after { display: none; }
}
/* =================== bw.css =================== */
/* bw - Bundle Wizard «Соберу с нуля». Lives at /bundle-wizard.
* 4-step DIY flow: категория → задача → параметры → готовый комплект. */
.bw {
color: var(--hc-ink, #1a1714);
}
.bw__hero {
padding: clamp(28px, 3vw, 44px) 0 clamp(20px, 2vw, 32px);
background: linear-gradient(160deg, var(--hc-paper, #fff) 0%, rgba(247, 240, 225, 0.92) 100%);
border-bottom: 1px solid rgba(185, 154, 111, 0.22);
}
.bw__title {
margin: 0;
font: 400 clamp(28px, 3.4vw, 44px)/1.05 var(--hc-serif, "Playfair Display", Georgia, serif);
letter-spacing: -0.02em;
}
.bw__lede {
margin: 8px 0 0;
max-width: 64ch;
font-size: clamp(14px, 1.1vw, 16px);
line-height: 1.55;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}
.bw__steps {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
.bw__steps span {
padding: 9px 16px;
font: 500 12.5px/1 var(--hc-sans);
letter-spacing: 0.02em;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.55));
background: rgba(255, 252, 247, 0.86);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 9999px;
transition: all 0.22s ease;
}
.bw__steps span.is-active {
background: linear-gradient(135deg, #2a2018, var(--hc-ink, #1a1714));
color: var(--hc-paper, #fff);
border-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 20px -8px rgba(40, 30, 15, 0.32);
}
.bw__steps span.is-done {
background: linear-gradient(135deg, rgba(110, 165, 130, 0.18), rgba(110, 165, 130, 0.06));
color: #2c6f4a;
border-color: rgba(110, 165, 130, 0.35);
}
.bw__main {
padding-top: clamp(24px, 3vw, 36px);
padding-bottom: clamp(40px, 5vw, 80px);
}
.bw__step {
display: grid;
gap: 18px;
}
.bw__step--result {
max-width: 720px;
margin: 0 auto;
text-align: center;
padding: 40px 24px;
background: linear-gradient(180deg, rgba(110, 165, 130, 0.10), rgba(110, 165, 130, 0.02));
border: 0.5px solid rgba(110, 165, 130, 0.30);
border-radius: 16px;
}
.bw__back {
align-self: flex-start;
font: 500 12.5px/1.3 var(--hc-sans);
color: var(--hc-accent-dark, #7a6548);
background: transparent; border: 0; cursor: pointer;
padding: 4px 0;
}
.bw__back:hover { color: var(--hc-ink, #1a1714); }
.bw__step-h {
margin: 0;
font: 600 clamp(20px, 2.2vw, 26px)/1.2 var(--hc-serif);
color: var(--hc-ink, #1a1714);
}
.bw__cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.bw__cards--small {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.bw__card {
display: flex; flex-direction: column; gap: 6px;
padding: 22px 18px;
background: var(--hc-paper, #fff);
border: 1px solid rgba(141, 109, 71, 0.20);
border-radius: 14px;
text-align: left;
cursor: pointer;
transition: all 0.18s ease;
}
.bw__card:hover {
background: linear-gradient(180deg, var(--hc-paper, #fff), rgba(212, 184, 150, 0.10));
border-color: rgba(212, 184, 150, 0.55);
transform: translateY(-2px);
box-shadow: 0 12px 24px -16px rgba(40, 30, 15, 0.25);
}
.bw__card.is-active {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #fff);
border-color: var(--hc-ink, #1a1714);
}
.bw__card-emoji {
font-size: 28px;
line-height: 1;
}
.bw__card-title {
font: 600 15px/1.3 var(--hc-sans);
}
.bw__card-sub {
font: 500 12px/1.4 var(--hc-sans);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
}
.bw__card.is-active .bw__card-sub { color: rgba(255, 255, 255, 0.7); }
.bw__form {
display: grid;
gap: 18px;
max-width: 720px;
padding: 24px;
background: rgba(255, 252, 247, 0.7);
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 14px;
}
.bw__field {
display: grid;
gap: 8px;
}
.bw__field label {
font: 600 12px/1.2 var(--hc-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.bw__opts {
display: flex; flex-wrap: wrap; gap: 6px;
}
.bw__opts button {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
font: 500 13px/1.2 var(--hc-sans);
background: var(--hc-paper, #fff);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 9999px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.bw__opts button:hover { background: rgba(212, 184, 150, 0.14); }
.bw__opts button.is-on {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #fff);
border-color: var(--hc-ink, #1a1714);
}
.bw__dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.2);
}
.bw__num {
width: 100px;
height: 38px;
padding: 0 12px;
font: 500 14px/1 var(--hc-mono);
background: var(--hc-paper, #fff);
border: 0.5px solid rgba(141, 109, 71, 0.25);
border-radius: 8px;
text-align: center;
}
.bw__num:focus { outline: none; border-color: var(--hc-accent, #8b7355); box-shadow: 0 0 0 3px rgba(212, 184, 150, 0.20); }
.bw__hint {
font: 500 11.5px/1.4 var(--hc-sans);
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.bw__cta {
margin-top: 16px;
display: grid;
gap: 8px;
}
.bw__btn {
display: inline-block;
padding: 12px 24px;
font: 600 14px/1.2 var(--hc-sans);
border: 0;
border-radius: 9999px;
cursor: pointer;
text-decoration: none;
text-align: center;
transition: all 0.15s ease;
}
.bw__btn--primary {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #fff);
}
.bw__btn--primary:hover { background: #2a2018; }
.bw__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bw__cta-hint {
font: 500 12px/1.4 var(--hc-sans);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.65));
}
.bw__result-msg {
font: 500 16px/1.5 var(--hc-sans);
color: var(--hc-ink, #1a1714);
margin: 0 0 16px;
}
.bw__result-msg strong {
background: rgba(212, 184, 150, 0.25);
padding: 2px 8px;
border-radius: 4px;
font-family: var(--hc-mono);
font-weight: 600;
}
.bw__result-sub {
font: 500 13px/1.5 var(--hc-sans);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
margin: 16px 0 8px;
}
/* =================== pdp-compat.css =================== */
/* PDP compat-suggest widget — "Готовый комплект под этот товар".
* Driven by /api/bundle/suggest. Strictly .hc-pdp-compat / .hc-pdp-compat__*. */
.hc-pdp-compat {
margin: clamp(24px, 3vw, 36px) 0;
padding: clamp(20px, 2.4vw, 28px);
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.94) 100%);
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.42));
border-radius: 18px;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 18px 38px -24px rgba(40, 30, 15, 0.14);
}
.hc-pdp-compat__lead {
margin: 4px 0 0;
max-width: 56ch;
}
.hc-pdp-compat__panel {
margin-top: 18px;
display: grid;
gap: 14px;
}
.hc-pdp-compat__group {
background: rgba(255, 254, 252, 0.86);
border: 0.5px solid rgba(212, 184, 150, 0.28);
border-radius: 14px;
overflow: hidden;
}
.hc-pdp-compat__group[data-kind="requires"] {
border-color: rgba(184, 124, 76, 0.42);
background: linear-gradient(180deg, #fff8ee 0%, rgba(255, 248, 238, 0.7) 100%);
}
.hc-pdp-compat__group-h {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
border-bottom: 0.5px solid rgba(212, 184, 150, 0.28);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
.hc-pdp-compat__group-h strong {
font-weight: 600;
}
.hc-pdp-compat__list {
list-style: none;
margin: 0;
padding: 0;
}
.hc-pdp-compat__row {
display: grid;
grid-template-columns: 28px 1fr auto auto;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-top: 0.5px solid rgba(212, 184, 150, 0.18);
}
.hc-pdp-compat__row:first-child {
border-top: 0;
}
.hc-pdp-compat__check {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
cursor: pointer;
}
.hc-pdp-compat__check input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.hc-pdp-compat__check-mark {
width: 18px;
height: 18px;
border: 1.4px solid rgba(122, 101, 72, 0.42);
border-radius: 5px;
background: #ffffff;
transition: border-color 0.18s ease, background 0.18s ease;
}
.hc-pdp-compat__check input:checked + .hc-pdp-compat__check-mark {
border-color: var(--hc-accent-dark, #7a6548);
background: var(--hc-accent-dark, #7a6548);
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
}
.hc-pdp-compat__name {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-weight: 500;
font-size: 16px;
color: var(--hc-ink, #1a1714);
text-decoration: none;
line-height: 1.3;
}
.hc-pdp-compat__name:hover {
color: var(--hc-accent-dark, #7a6548);
text-decoration: underline;
text-underline-offset: 3px;
}
.hc-pdp-compat__sku {
font-size: 11px;
letter-spacing: 0.04em;
}
.hc-pdp-compat__price {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-weight: 600;
font-size: 14px;
color: var(--hc-ink, #1a1714);
white-space: nowrap;
text-align: right;
min-width: 80px;
}
.hc-pdp-compat__foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
margin-top: 4px;
padding: 14px 16px;
background: rgba(255, 252, 246, 0.7);
border: 0.5px solid rgba(212, 184, 150, 0.28);
border-radius: 14px;
}
.hc-pdp-compat__total {
display: grid;
gap: 2px;
}
.hc-pdp-compat__total strong {
font-family: var(--hc-serif);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1;
}
.hc-pdp-compat__skel {
margin-top: 18px;
display: grid;
gap: 8px;
}
.hc-pdp-compat__skel-row {
height: 44px;
border-radius: 12px;
background: linear-gradient(90deg, rgba(212, 184, 150, 0.10), rgba(212, 184, 150, 0.22), rgba(212, 184, 150, 0.10));
background-size: 200% 100%;
animation: hc-pdp-compat-shimmer 1.4s linear infinite;
}
@keyframes hc-pdp-compat-shimmer {
from { background-position: 0% 50%; }
to { background-position: -200% 50%; }
}
.hc-pdp-compat__empty {
margin-top: 14px;
padding: 16px;
border: 1px dashed rgba(122, 101, 72, 0.35);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
@media (max-width: 640px) {
.hc-pdp-compat__row {
grid-template-columns: 28px 1fr auto;
grid-template-areas: 'check name price' 'check sku price';
row-gap: 2px;
}
.hc-pdp-compat__check { grid-area: check; }
.hc-pdp-compat__name { grid-area: name; }
.hc-pdp-compat__sku { grid-area: sku; }
.hc-pdp-compat__price { grid-area: price; align-self: center; }
}
/* =================== cat-banner.css =================== */
/* Category landing hero — image cap + body overlays bottom-left. */
.cat-banner {
position: relative;
max-height: 460px;
overflow: hidden;
border-radius: 22px;
margin: clamp(20px, 2.4vw, 32px) 0;
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.92) 100%);
isolation: isolate;
}
.cat-banner__bg {
display: block;
width: 100%;
height: auto;
max-height: 460px;
object-fit: contain;
object-position: center;
margin-inline: auto;
}
.cat-banner__body {
position: absolute;
inset: auto 0 0 0;
padding: clamp(20px, 2.4vw, 32px);
background: linear-gradient(180deg, transparent 0%, rgba(255, 252, 246, 0.88) 36%, rgba(255, 252, 246, 0.96) 100%);
backdrop-filter: blur(2px) saturate(1.1);
}
.cat-banner__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-weight: 500;
font-size: clamp(28px, 3.6vw, 44px);
line-height: 1.05;
letter-spacing: -0.022em;
margin: 0 0 6px;
}
.cat-banner__sub {
margin: 0;
max-width: 64ch;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
font-size: clamp(14px, 1.1vw, 16px);
line-height: 1.5;
}
.cat-banner--dark { color: var(--hc-paper, #ffffff); }
.cat-banner--dark .cat-banner__body {
background: linear-gradient(180deg, transparent 0%, rgba(26, 23, 20, 0.72) 50%, rgba(26, 23, 20, 0.92) 100%);
color: #ffffff;
}
.cat-banner--dark .cat-banner__sub { color: rgba(255, 255, 255, 0.85); }
.cat-banner--light { color: var(--hc-ink, #1a1714); }
@media (max-width: 768px) {
.cat-banner { max-height: 340px; }
.cat-banner__bg { max-height: 340px; }
}
/* =================== pcard-parity.css =================== */
/* Sprint 10 — bring variants A/B/D/Mini up to C-variant premium parity.
* Adds hover micro-interactions, stock indicators, mobile responsive
* refinements, and a unified glow/orb FX system so all cards meet the
* "10/10" premium bar (matching B&O / Vitra / Cassina catalog tiles). */
/* ──────────────────────────────────────────────────────────────────────
* Universal pcard premium FX
* ──────────────────────────────────────────────────────────────────── */
/* Subtle lift on hover for ALL variants. */
.pcard {
transition:
transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1),
box-shadow 0.32s cubic-bezier(0.2, 0.84, 0.3, 1),
border-color 0.22s ease;
will-change: transform;
}
.pcard:hover {
transform: translateY(-3px);
box-shadow:
0 28px 56px -28px rgba(40, 30, 15, 0.20),
0 4px 12px rgba(40, 30, 15, 0.06);
}
/* ──────────────────────────────────────────────────────────────────────
* Media glow — orbital ring on hover for A/B/D (was C-only)
* ──────────────────────────────────────────────────────────────────── */
.pcard-a__media,
.pcard-b__media,
.pcard-d__media {
position: relative;
overflow: hidden;
}
.pcard-a__media::before,
.pcard-b__media::before,
.pcard-d__media::before {
content: "";
position: absolute;
inset: -2%;
z-index: 0;
pointer-events: none;
background: radial-gradient(
circle at 50% 50%,
rgba(212, 184, 150, 0.22) 0%,
rgba(212, 184, 150, 0) 55%
);
opacity: 0;
transition: opacity 0.42s ease;
}
.pcard:hover .pcard-a__media::before,
.pcard:hover .pcard-b__media::before,
.pcard:hover .pcard-d__media::before {
opacity: 1;
}
/* Media image: subtle scale on hover (premium pattern). */
.pcard-a__media img,
.pcard-b__media img,
.pcard-d__media img {
transition: transform 0.62s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.pcard:hover .pcard-a__media img,
.pcard:hover .pcard-b__media img,
.pcard:hover .pcard-d__media img {
transform: scale(1.045);
}
/* ──────────────────────────────────────────────────────────────────────
* Variant A — Editorial premium upgrades
* ──────────────────────────────────────────────────────────────────── */
/* Stock + rating meta-row (when present). */
.pcard-a__meta-extra {
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0 8px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.65));
}
.pcard-a__meta-extra .pcard-a__rating {
color: var(--hc-accent-dark, #7a6548);
font-weight: 600;
}
.pcard-a__meta-extra .pcard-a__stock-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--hc-success, #3d6b4f);
margin-right: 4px;
vertical-align: middle;
}
/* Card-A: own pill class (was using pcard-c__pill). */
.pcard-a__pill {
display: inline-block;
padding: 4px 10px;
background: rgba(212, 184, 150, 0.14);
border: 0.5px solid rgba(212, 184, 150, 0.32);
border-radius: 999px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
letter-spacing: 0.04em;
color: var(--hc-accent-dark, #7a6548);
}
/* Mobile stack for A. */
@media (max-width: 640px) {
.pcard--a .pcard-a__body {
padding: 14px;
}
.pcard--a .pcard-a__title {
font-size: 18px;
line-height: 1.2;
}
}
/* ──────────────────────────────────────────────────────────────────────
* Variant B — Compact rail premium upgrades
* ──────────────────────────────────────────────────────────────────── */
/* Hoverband for B: 3 hidden props revealed on hover (C-feature parity). */
.pcard--b .pcard-b__hoverband {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 10px 14px;
margin: 0;
background: linear-gradient(180deg, rgba(252, 248, 240, 0.92), rgba(248, 244, 235, 0.96));
border-top: 0.5px solid rgba(212, 184, 150, 0.28);
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.32s cubic-bezier(0.2, 0.84, 0.3, 1), opacity 0.22s ease;
}
.pcard--b:hover .pcard-b__hoverband {
max-height: 80px;
opacity: 1;
}
.pcard-b__hoverband-item {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.pcard-b__hoverband-item span {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 9.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hc-ink-muted, rgba(26, 23, 20, 0.5));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pcard-b__hoverband-item strong {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-weight: 500;
font-size: 13px;
color: var(--hc-ink, #1a1714);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Mobile: collapse hoverband always-visible. */
@media (max-width: 640px) {
.pcard--b .pcard-b__hoverband {
max-height: 80px;
opacity: 1;
}
}
/* ──────────────────────────────────────────────────────────────────────
* Variant D — Tagbar premium upgrades
* ──────────────────────────────────────────────────────────────────── */
/* Tagbar already info-rich; add glow + mobile responsive tag-grid. */
@media (max-width: 640px) {
.pcard--d .pcard-d__tag-bar {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.pcard--d .pcard-d__tag {
padding: 6px 10px;
}
.pcard--d .pcard-d__tag-k {
font-size: 9.5px;
}
.pcard--d .pcard-d__tag-v {
font-size: 12px;
}
}
/* ──────────────────────────────────────────────────────────────────────
* Variant Mini — full premium upgrade
* ──────────────────────────────────────────────────────────────────── */
/* Hover lift + border-glow (Mini had no hover-state previously). */
.pcard-mini {
position: relative;
border: 0.5px solid rgba(212, 184, 150, 0.20);
border-radius: 14px;
transition:
transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1),
border-color 0.22s ease,
box-shadow 0.32s ease;
}
.pcard-mini:hover {
transform: translateY(-2px) scale(1.012);
border-color: rgba(212, 184, 150, 0.55);
box-shadow:
0 18px 38px -18px rgba(40, 30, 15, 0.18),
0 3px 8px rgba(40, 30, 15, 0.05);
}
.pcard-mini__media {
position: relative;
overflow: hidden;
}
.pcard-mini__img {
transition: transform 0.52s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.pcard-mini:hover .pcard-mini__img {
transform: scale(1.06);
}
/* Stock dot for Mini (premium feature parity). */
.pcard-mini__stock {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
margin-top: 4px;
}
.pcard-mini__stock-dot {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--hc-success, #3d6b4f);
}
.pcard-mini__stock--low .pcard-mini__stock-dot {
background: var(--hc-warning, #a67426);
}
.pcard-mini__stock--out .pcard-mini__stock-dot {
background: var(--hc-ink-muted, rgba(26, 23, 20, 0.35));
}
/* Type-label conditional hide for hardware (handled inline; this is fallback). */
.pcard-mini--type-hardware .pcard-mini__type {
display: none;
}
/* ──────────────────────────────────────────────────────────────────────
* Mobile: universal pcard tightening (all variants)
* ──────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.pcard {
min-width: 0;
}
.pcard:hover {
/* Disable hover-lift on touch devices to avoid sticky-hover. */
transform: none;
}
}
@media (hover: none) {
.pcard:hover {
transform: none;
box-shadow: none;
}
.pcard:hover .pcard-a__media img,
.pcard:hover .pcard-b__media img,
.pcard:hover .pcard-d__media img,
.pcard-mini:hover .pcard-mini__img {
transform: none;
}
}
/* ──────────────────────────────────────────────────────────────────────
* DIZ-port: animated FX layer (Sprint 12.57)
* Ports the "flying" effects from diz.holzcom-mebel.ru — rotating dashed
* ring on ::after, gold-tinted hover shadow, action-button micro-rotations,
* badge bounce, CTA shine. Applies to all .pcard variants (A/B/C/D/Mini).
* ──────────────────────────────────────────────────────────────────── */
.pcard {
isolation: isolate;
}
/* Rotating dashed gold ring — invisible until hover. */
.pcard::after {
content: "";
position: absolute;
left: -20%;
top: -20%;
width: 140%;
height: 140%;
border-radius: 50%;
border: 1px dashed rgba(212, 184, 150, 0);
pointer-events: none;
z-index: 0;
transition: border-color 0.42s ease, transform 18s linear;
}
.pcard:hover::after {
border-color: rgba(212, 184, 150, 0.30);
transform: rotate(360deg);
}
/* Radial glow at corner on hover — adds soft "lit-from-edge" feeling. */
.pcard::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(360px 220px at 100% -10%, rgba(212, 184, 150, 0.26), transparent 60%);
opacity: 0;
transition: opacity 0.42s cubic-bezier(0.2, 0.84, 0.3, 1);
pointer-events: none;
z-index: 0;
border-radius: inherit;
}
.pcard:hover::before {
opacity: 1;
}
/* Gold-tinted premium shadow on hover (overrides earlier subtle one). */
.pcard:hover {
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.04),
0 28px 56px -28px rgba(184, 154, 111, 0.36);
}
/* Title color shift to gold accent on parent hover. */
.pcard:hover .pcard-c__title,
.pcard:hover .pcard-a__caption,
.pcard:hover .pcard-b__title,
.pcard:hover .pcard-d__title,
.pcard:hover .pcard-mini__title,
.pcard:hover .pcard-title {
color: var(--hc-accent-dark, #7a6548);
transition: color 0.32s ease;
}
/* Action buttons (eye / heart / cart) — rotate + scale animations.
The legacy classes are .pcard-act with --qv (quick view), --fav, --cart. */
.pcard-act {
transition:
background 0.22s ease,
color 0.22s ease,
transform 0.42s cubic-bezier(0.2, 0.84, 0.3, 1),
box-shadow 0.32s ease;
}
.pcard-act:hover {
transform: scale(1.12) rotate(-4deg);
box-shadow: 0 6px 14px -6px rgba(184, 154, 111, 0.42);
}
.pcard-act--fav:hover {
transform: scale(1.18);
background: linear-gradient(135deg, #ff6b6b, #c0392b);
color: #ffffff;
}
.pcard-act--qv:hover {
transform: scale(1.14) rotate(6deg);
}
.pcard-act--cart:hover {
transform: scale(1.14) translateY(-2px);
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
}
/* Badges (sale/hot/new/etc.) — subtle bounce when card is hovered. */
.pcard-badge {
transition: transform 0.42s cubic-bezier(0.2, 0.84, 0.3, 1), box-shadow 0.32s ease;
}
.pcard:hover .pcard-badge {
transform: scale(1.06) translateY(-1px);
box-shadow: 0 6px 16px -6px rgba(40, 30, 15, 0.22);
}
/* Primary CTA — shine sweep on hover (skewed gradient passes left to right). */
.pcard-c__cta,
.pcard-d__cta,
.pcard-b__cta,
.pcard-a__cta {
position: relative;
overflow: hidden;
isolation: isolate;
}
.pcard-c__cta::before,
.pcard-d__cta::before,
.pcard-b__cta::before,
.pcard-a__cta::before {
content: "";
position: absolute;
inset-block: 0;
left: -120%;
width: 60%;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
transition: left 0.7s cubic-bezier(0.2, 0.84, 0.3, 1);
pointer-events: none;
z-index: 1;
}
.pcard:hover .pcard-c__cta::before,
.pcard-d__cta::before,
.pcard:hover .pcard-d__cta::before,
.pcard:hover .pcard-b__cta::before,
.pcard:hover .pcard-a__cta::before {
left: 120%;
}
/* Mini variant — extra emphasis since it has no CTA. Whole card becomes
subtly luminous on hover. */
.pcard-mini::before {
background: radial-gradient(220px 140px at 50% -10%, rgba(212, 184, 150, 0.32), transparent 65%);
}
.pcard-mini:hover::before { opacity: 1; }
/* Touch / reduced motion fallbacks. */
@media (hover: none) {
.pcard::after,
.pcard::before { display: none; }
.pcard-act:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.pcard::after,
.pcard-act,
.pcard-badge,
.pcard-c__cta::before,
.pcard-d__cta::before,
.pcard-b__cta::before,
.pcard-a__cta::before {
transition: none !important;
}
.pcard:hover::after { transform: none; }
}
/* ──────────────────────────────────────────────────────────────────────
* Empty-gap fix (Sprint 12.61) — fills middle whitespace in pcard-c
* when content above is short. Stronger dashed divider + gold accent dot
* above it so the gap reads as 'intentional divider', not empty space.
* ──────────────────────────────────────────────────────────────────── */
.pcard-c__bottom,
.pcard-footer {
position: relative;
border-top: 1px dashed rgba(141, 109, 71, 0.32);
padding-top: 14px;
}
.pcard-c__bottom::before,
.pcard-footer::before {
content: "";
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, var(--hc-gold, #d4b896), var(--hc-accent, #8b7355));
box-shadow: 0 0 0 3px var(--hc-paper, #ffffff);
}
/* Mini variant has no bottom CTA block, skip */
.pcard-mini .pcard-footer::before { display: none; }
/* ╔══════════════════════════════════════════════════════════════════════╗
║ 256-pcard-system.css ║
║ Sprint 11 — единая premium-система карточек товара. ║
║ Заменяет: legacy 197-pcard.css фрагменты + 255-pcard-parity.css. ║
║ ║
║ Принципы: ║
║ · CSS Custom Properties для всех tokens ║
║ · CSS Grid + aspect-ratio (никаких float / position-hacks) ║
║ · Container queries (адаптация по ширине КАРТОЧКИ, не viewport) ║
║ · clamp() для fluid type ║
║ · logical properties (inline/block) ║
║ · Один источник hover-FX (.pc:hover) — никаких per-variant дублей ║
║ · prefers-reduced-motion / forced-colors / focus-visible ║
║ · BEM strict: .pc для всего, .pc-a/.pc-b/.pc-c/.pc-d/.pc-mini ║
║ · Ноль !important. Ноль каскадов. Ноль inline-стилей. ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* ─── 1. Tokens ─────────────────────────────────────────────────────── */
.pc {
/* surface */
--pc-radius: 20px;
--pc-radius-sm: 12px;
--pc-bg: #fcfaf6;
--pc-bg-soft: #f6f0e3;
--pc-border: 1px solid rgba(212, 184, 150, 0.20);
--pc-divider: 0.5px solid rgba(212, 184, 150, 0.28);
--pc-shadow-rest: 0 1px 2px rgba(40, 30, 15, 0.03), 0 12px 28px -22px rgba(40, 30, 15, 0.12);
--pc-shadow-hover: 0 2px 6px rgba(40, 30, 15, 0.05), 0 32px 64px -28px rgba(40, 30, 15, 0.24);
/* spacing */
--pc-pad: clamp(16px, 1.7vw, 22px);
--pc-gap: clamp(8px, 0.9vw, 12px);
--pc-gap-lg: clamp(12px, 1.3vw, 18px);
/* type */
--pc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
--pc-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--pc-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
--pc-fs-meta: 11px;
--pc-fs-sku: 11.5px;
--pc-fs-stock: 12px;
--pc-fs-name: clamp(15px, 1.2vw, 18px);
--pc-fs-name-a: clamp(28px, 3.2vw, 40px);
--pc-fs-price: clamp(18px, 1.6vw, 22px);
--pc-fs-cta: 13.5px;
/* color */
--pc-c-ink: #1a1714;
--pc-c-ink-soft: rgba(26, 23, 20, 0.62);
--pc-c-ink-mute: rgba(26, 23, 20, 0.40);
--pc-c-accent: #7a6548;
--pc-c-accent-soft: rgba(212, 184, 150, 0.42);
--pc-c-gold: #d4b896;
--pc-c-paper: #ffffff;
--pc-c-stock-ok: #3d6b4f;
--pc-c-stock-low: #a67426;
--pc-c-stock-out: rgba(26, 23, 20, 0.36);
--pc-c-sale: #c9433a;
--pc-c-hit: #1a1714;
--pc-c-new: #3a6a8a;
/* motion */
--pc-dur: 320ms;
--pc-ease: cubic-bezier(0.2, 0.84, 0.3, 1);
--pc-zoom: 1.045;
--pc-lift: -4px;
/* image */
--pc-img-ratio: 4 / 3;
--pc-img-bg: linear-gradient(180deg, var(--pc-bg) 0%, var(--pc-bg-soft) 100%);
}
/* ─── 2. Base card surface ─────────────────────────────────────────── */
.pc {
container-type: inline-size;
container-name: pcard;
position: relative;
display: flex;
flex-direction: column;
background: var(--pc-c-paper);
border: var(--pc-border);
border-radius: var(--pc-radius);
box-shadow: var(--pc-shadow-rest);
overflow: hidden;
isolation: isolate;
transition:
transform var(--pc-dur) var(--pc-ease),
border-color var(--pc-dur) var(--pc-ease),
box-shadow var(--pc-dur) var(--pc-ease);
color: var(--pc-c-ink);
font-family: var(--pc-sans);
}
/* Body fills remaining space below media */
.pc-c__body,
.pc-b__body {
flex: 1 1 auto;
}
.pc:hover {
transform: translateY(var(--pc-lift));
border-color: var(--pc-c-accent-soft);
box-shadow: var(--pc-shadow-hover);
}
.pc:focus-within {
outline: 2px solid var(--pc-c-accent);
outline-offset: 4px;
}
/* ─── 3. Universal primitives ──────────────────────────────────────── */
/* Media — image holder with aspect-ratio. */
.pc-media {
position: relative;
display: grid;
place-items: center;
inline-size: 100%;
aspect-ratio: var(--pc-img-ratio);
background: var(--pc-img-bg);
overflow: hidden;
isolation: isolate;
}
/* Lazy-load shimmer skeleton — animated gradient behind image.
When image loads, opaque img covers shimmer naturally via z-index. */
.pc-media::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
100deg,
rgba(212, 184, 150, 0) 30%,
rgba(212, 184, 150, 0.22) 50%,
rgba(212, 184, 150, 0) 70%
),
var(--pc-img-bg);
background-size: 200% 100%, 100% 100%;
background-repeat: no-repeat;
animation: pc-shimmer 1.8s linear infinite;
z-index: 0;
pointer-events: none;
}
@keyframes pc-shimmer {
0% { background-position: 200% 0, 0 0; }
100% { background-position: -200% 0, 0 0; }
}
.pc-media__img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
object-position: center;
padding: clamp(12px, 1.6vw, 24px);
transition: transform var(--pc-dur) var(--pc-ease);
position: relative;
z-index: 1;
}
.pc:hover .pc-media__img {
transform: scale(var(--pc-zoom));
}
/* Subtle radial glow at media center on hover. */
.pc-media::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 55%, rgba(212, 184, 150, 0.22), rgba(212, 184, 150, 0) 55%);
opacity: 0;
transition: opacity var(--pc-dur) var(--pc-ease);
pointer-events: none;
z-index: 0;
}
.pc:hover .pc-media::after {
opacity: 1;
}
.pc-media__img,
.pc-media__placeholder {
position: relative;
z-index: 1;
}
.pc-media__placeholder {
display: grid;
place-items: center;
inline-size: 60%;
aspect-ratio: 1;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.12), rgba(184, 154, 111, 0.06));
border-radius: 50%;
font-family: var(--pc-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pc-c-accent);
opacity: 0.55;
}
/* Single badge — sale / hit / new / out-of-stock. */
.pc-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 11px;
background: var(--pc-c-hit);
color: var(--pc-c-paper);
font-family: var(--pc-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
white-space: nowrap;
}
.pc-badge--sale { background: var(--pc-c-sale); }
.pc-badge--hit { background: var(--pc-c-hit); }
.pc-badge--new { background: var(--pc-c-new); }
.pc-badge--out {
background: rgba(26, 23, 20, 0.08);
color: var(--pc-c-ink-soft);
}
/* Action button — heart / cart / quickview (36×36 circular). */
.pc-action {
inline-size: 36px;
block-size: 36px;
display: inline-grid;
place-items: center;
background: var(--pc-c-paper);
border: 0.5px solid rgba(26, 23, 20, 0.08);
border-radius: 50%;
color: var(--pc-c-ink-soft);
cursor: pointer;
transition:
background var(--pc-dur) var(--pc-ease),
color var(--pc-dur) var(--pc-ease),
transform var(--pc-dur) var(--pc-ease);
}
.pc-action:hover {
background: var(--pc-c-ink);
color: var(--pc-c-paper);
transform: scale(1.06);
}
.pc-action:focus-visible {
outline: 2px solid var(--pc-c-accent);
outline-offset: 2px;
}
.pc-action[aria-pressed="true"] {
background: var(--pc-c-sale);
color: var(--pc-c-paper);
border-color: transparent;
}
.pc-action svg {
inline-size: 16px;
block-size: 16px;
}
/* Meta-row: series · sku */
.pc-meta {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
font-family: var(--pc-mono);
font-size: var(--pc-fs-meta);
letter-spacing: 0.06em;
color: var(--pc-c-ink-soft);
}
.pc-meta__series {
font-weight: 600;
color: var(--pc-c-accent);
text-transform: uppercase;
}
.pc-meta__sku {
color: var(--pc-c-ink-mute);
}
/* Title */
.pc-title {
margin: 0;
font-family: var(--pc-serif);
font-weight: 500;
font-size: var(--pc-fs-name);
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--pc-c-ink);
font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;
text-rendering: geometricPrecision;
}
.pc-title a {
color: inherit;
text-decoration: none;
transition: color var(--pc-dur) var(--pc-ease);
}
.pc:hover .pc-title a {
color: var(--pc-c-accent);
}
/* Stock indicator: dot + text */
.pc-stock {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--pc-mono);
font-size: var(--pc-fs-stock);
letter-spacing: 0.02em;
color: var(--pc-c-ink-soft);
}
.pc-stock__dot {
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: var(--pc-c-stock-ok);
}
.pc-stock--low .pc-stock__dot { background: var(--pc-c-stock-low); }
.pc-stock--out .pc-stock__dot { background: var(--pc-c-stock-out); }
/* Price row */
.pc-price {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--pc-serif);
}
.pc-price__current {
font-size: var(--pc-fs-price);
font-weight: 500;
color: var(--pc-c-ink);
font-variant-numeric: tabular-nums;
}
.pc-price__current--sale {
color: var(--pc-c-sale);
}
.pc-price__old {
font-size: 14px;
color: var(--pc-c-ink-mute);
text-decoration: line-through;
text-decoration-thickness: 0.5px;
font-variant-numeric: tabular-nums;
}
.pc-price__ask {
font-size: 16px;
font-style: italic;
color: var(--pc-c-accent);
}
/* CTA */
.pc-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
inline-size: 100%;
padding: 12px 18px;
background: var(--pc-c-ink);
color: var(--pc-c-paper);
border: 0;
border-radius: 12px;
font-family: var(--pc-sans);
font-size: var(--pc-fs-cta);
font-weight: 500;
letter-spacing: 0.02em;
cursor: pointer;
transition: background var(--pc-dur) var(--pc-ease), transform 120ms var(--pc-ease);
}
.pc-cta:hover {
background: #2a2018;
}
.pc-cta:active {
transform: scale(0.985);
}
.pc-cta:focus-visible {
outline: 2px solid var(--pc-c-accent);
outline-offset: 2px;
}
.pc-cta--ghost {
background: transparent;
color: var(--pc-c-ink);
border: 1px solid var(--pc-c-ink);
}
.pc-cta--ghost:hover {
background: var(--pc-c-ink);
color: var(--pc-c-paper);
}
/* Inline (auto-width) CTA — used in hero/editorial where multiple CTAs sit on one row */
.pc-cta--inline {
inline-size: auto;
}
.pc-cta__price {
font-family: var(--pc-mono);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.pc-cta__price::before {
content: "·";
margin: 0 6px;
opacity: 0.6;
}
/* Overlay positioning helpers — used inside .pc-media */
.pc-media__overlay {
position: absolute;
inset: 12px;
display: flex;
justify-content: space-between;
align-items: start;
pointer-events: none;
z-index: 2;
}
.pc-media__overlay > * {
pointer-events: auto;
}
.pc-media__overlay--bottom {
align-items: end;
}
.pc-media__actions {
display: flex;
flex-direction: column;
gap: 6px;
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Variant C — Default Catalog ║
║ Размер: ~320×460. Используется на 90% страниц. ║
║ Image top (4:3) — meta — title — stock — price — CTA. ║
╚══════════════════════════════════════════════════════════════════════╝ */
.pc-c {
--pc-img-ratio: 4 / 3;
min-inline-size: 0;
}
.pc-c__body {
display: flex;
flex-direction: column;
gap: var(--pc-gap);
padding: var(--pc-pad);
min-inline-size: 0;
}
.pc-c__body > .pc-cta {
margin-block-start: auto;
}
/* C inside narrow containers (≤300px): tighten padding */
@container pcard (max-width: 300px) {
.pc-c__body { padding: 16px; gap: 10px; }
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Variant A — Editorial (hero / landing only) ║
║ Размер: ~720×420 (two-column at desktop, stack at mobile). ║
║ Used in /promo, landing pages, «Серия месяца». ║
╚══════════════════════════════════════════════════════════════════════╝ */
.pc-a {
--pc-img-ratio: 3 / 2;
--pc-radius: 28px;
display: grid;
grid-template-rows: auto auto;
grid-template-columns: 1fr;
}
@media (min-width: 760px) {
.pc-a {
grid-template-rows: auto;
grid-template-columns: 1.1fr 1fr;
min-block-size: 460px;
}
.pc-a .pc-media {
block-size: 100%;
aspect-ratio: auto;
}
.pc-a .pc-media__img {
block-size: 100%;
object-fit: cover;
padding: 0;
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-a:hover .pc-media__img {
transform: scale(1.06);
}
/* Soft vignette overlay for editorial mood */
.pc-a .pc-media::after {
background:
linear-gradient(135deg, rgba(26, 23, 20, 0) 60%, rgba(26, 23, 20, 0.10) 100%),
radial-gradient(circle at 30% 40%, rgba(212, 184, 150, 0.15), rgba(212, 184, 150, 0) 60%);
opacity: 1;
}
}
.pc-a__body {
display: grid;
align-content: center;
gap: var(--pc-gap-lg);
padding: clamp(28px, 3.2vw, 48px);
}
.pc-a__eyebrow {
font-family: var(--pc-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pc-c-accent);
}
.pc-a__title {
font-family: var(--pc-serif);
font-weight: 500;
font-size: var(--pc-fs-name-a);
line-height: 1.04;
letter-spacing: -0.024em;
margin: 0;
color: var(--pc-c-ink);
}
.pc-a__lede {
font-family: var(--pc-sans);
font-size: clamp(14px, 1.1vw, 16px);
line-height: 1.55;
color: var(--pc-c-ink-soft);
max-inline-size: 56ch;
margin: 0;
}
.pc-a__row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-block-start: 8px;
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Variant B — Rail Compact ║
║ Размер: ~260×420. Для horizontal rails (related, cross-sell). ║
║ Square image — meta — title — stock — price — CTA (short). ║
╚══════════════════════════════════════════════════════════════════════╝ */
.pc-b {
--pc-img-ratio: 1 / 1;
min-inline-size: 0;
}
.pc-b__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 18px 18px;
min-inline-size: 0;
}
.pc-b .pc-title {
font-size: 15px;
}
.pc-b .pc-cta {
padding: 10px 14px;
margin-block-start: auto;
}
.pc-b__hoverband {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 10px 14px;
background: linear-gradient(180deg, rgba(252, 248, 240, 0.96), rgba(248, 244, 235, 1));
border-block-start: var(--pc-divider);
transform: translateY(100%);
transition: transform var(--pc-dur) var(--pc-ease);
pointer-events: none;
z-index: 10;
}
.pc-b:hover .pc-b__hoverband {
transform: translateY(0);
pointer-events: auto;
}
.pc-b__hoverband-item {
display: grid;
gap: 2px;
min-inline-size: 0;
}
.pc-b__hoverband-item span {
font-family: var(--pc-mono);
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pc-c-ink-mute);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pc-b__hoverband-item strong {
font-family: var(--pc-serif);
font-weight: 500;
font-size: 12.5px;
color: var(--pc-c-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Variant D — Spec Table (B2B engineering) ║
║ Размер: ~400×360. Image left thumb — spec rows — price+CTA bottom. ║
║ Used: /compare, B2B-heavy categories (выдвижение/AVENTOS). ║
╚══════════════════════════════════════════════════════════════════════╝ */
.pc-d {
display: grid;
grid-template-columns: 132px 1fr;
grid-template-rows: auto;
grid-template-areas: "media body";
}
.pc-d .pc-media { grid-area: media; aspect-ratio: 1; align-self: start; }
.pc-d__body { grid-area: body; min-inline-size: 0; }
@media (max-width: 480px) {
.pc-d {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-template-areas: "media" "body";
}
.pc-d .pc-media { aspect-ratio: 4 / 3; }
}
.pc-d__body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 18px;
min-inline-size: 0;
}
.pc-d__body > .pc-d__bottom {
margin-block-start: auto;
}
.pc-d .pc-title { font-size: 16px; }
.pc-d__specs {
display: grid;
gap: 4px;
margin-block-start: 4px;
padding-block-start: 8px;
border-block-start: var(--pc-divider);
}
.pc-d__spec {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 12px;
font-size: 12.5px;
line-height: 1.4;
padding: 4px 6px;
margin-inline: -6px;
border-radius: 4px;
transition: background var(--pc-dur) var(--pc-ease);
}
.pc-d__spec:hover {
background: rgba(212, 184, 150, 0.10);
}
.pc-d__spec dt {
font-family: var(--pc-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pc-c-ink-mute);
margin: 0;
}
.pc-d__spec dd {
font-family: var(--pc-sans);
font-weight: 500;
color: var(--pc-c-ink);
margin: 0;
text-align: end;
}
.pc-d__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-block-start: 6px;
padding-block-start: 10px;
border-block-start: var(--pc-divider);
}
.pc-d .pc-cta {
inline-size: auto;
padding: 10px 18px;
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Variant Mini — Pure Visual ║
║ Размер: ~180×280. Image-dominant. No CTA (whole card is link). ║
║ Used: recently-viewed, blog widgets, footer suggestions. ║
╚══════════════════════════════════════════════════════════════════════╝ */
.pc-mini {
--pc-radius: 14px;
--pc-img-ratio: 1 / 1;
text-decoration: none;
color: inherit;
min-inline-size: 0;
}
.pc-mini__body {
display: grid;
gap: 4px;
padding: 10px 12px 14px;
}
.pc-mini .pc-title {
font-size: 13.5px;
font-family: var(--pc-serif);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pc-mini__sku {
font-family: var(--pc-mono);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--pc-c-ink-mute);
}
.pc-mini__price-row {
display: flex;
align-items: baseline;
gap: 6px;
margin-block-start: 4px;
}
.pc-mini__price {
font-family: var(--pc-serif);
font-size: 15px;
font-weight: 500;
color: var(--pc-c-ink);
font-variant-numeric: tabular-nums;
}
.pc-mini__price-old {
font-family: var(--pc-serif);
font-size: 12px;
color: var(--pc-c-ink-mute);
text-decoration: line-through;
}
/* ─── 4. Accessibility & motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.pc,
.pc *,
.pc::after,
.pc::before,
.pc-media::before {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (forced-colors: active) {
.pc {
border: 1px solid CanvasText;
}
.pc-cta {
background: ButtonText;
color: ButtonFace;
border: 1px solid ButtonText;
}
.pc-badge {
border: 1px solid CanvasText;
}
}
@media (hover: none) {
.pc:hover {
transform: none;
box-shadow: var(--pc-shadow-rest);
}
.pc:hover .pc-media__img {
transform: none;
}
.pc:hover .pc-media::after {
opacity: 0;
}
.pc-b__hoverband {
/* Touch: always visible on B variant */
position: static;
transform: none;
pointer-events: auto;
}
}
/* ─── 5. Card-link variant (whole card clickable) ──────────────────── */
a.pc,
.pc--link {
text-decoration: none;
color: inherit;
}
a.pc:visited {
color: inherit;
}
/* End of file. 530 lines. No !important (except a11y-required). */
/* ─── Sprint13: pcard same-height grid + desc line-clamp ─── */
/* Each pcard fills its grid cell height fully so cards in a row stay equal */
.pcard {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.pcard__body, .pcard-a__body, .pcard-b__body, .pcard-c__body, .pcard-d__body {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
/* Spacer that pushes price/cta to bottom when body content is short */
.pcard__spacer-flex, .pcard__pre-price {
flex: 1 0 auto;
}
/* Description: max 2 lines with ellipsis (prevents overflow) */
.pcard__desc, .pcard-a__desc, .pcard-b__desc, .pcard-c__desc, .pcard-d__desc,
[class*="pcard"][class*="__desc"] {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 2.6em; /* reserve space so cards align even with 1-line desc */
}
/* Tag chips wrap row never overflows card */
.pcard__tags, .pcard-a__tags, .pcard-b__tags, .pcard-c__tags, .pcard-d__tags,
[class*="pcard"][class*="__tags"] {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: 100%;
overflow: hidden;
}
[class*="pcard"][class*="__tag"] {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ─── Sprint13.P2: actions overlay polish ─── */
/* Ensure __media-wrap is positioning context for __rail overlay */
.pcard-a__media-wrap,
.pcard-b__media-wrap,
.pcard-d__media-wrap,
[class*="pcard"][class*="__media-wrap"] {
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Rail buttons get subtle backdrop so they're readable over any photo */
.pcard-a__rail .pcard-act,
.pcard-b__rail .pcard-act,
.pcard-d__rail .pcard-act {
background: rgba(255, 252, 247, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 0.5px solid rgba(141, 109, 71, 0.18);
box-shadow: 0 4px 12px -4px rgba(40, 30, 15, 0.18);
}
.pcard-a__rail .pcard-act:hover,
.pcard-b__rail .pcard-act:hover,
.pcard-d__rail .pcard-act:hover {
background: var(--hc-paper, #ffffff);
border-color: var(--hc-gold, #d4b896);
transform: translateX(-2px);
}
/* ─── Sprint14.1: chip overflow + cheaper-pill align ─── */
/* Long chip tags must truncate, not overflow card */
[class*="pcard"][class*="__tag"],
[class*="pcard"][class*="__pill"],
[class*="pcard"] .hc-chip {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* "Нашли дешевле?" pill — fixed slot above the gold dot divider */
.hc-found-cheaper,
[class*="found-cheaper"],
[class*="pcard"] [class*="cheaper"] {
margin-top: auto !important; /* push to bottom of card body */
align-self: flex-start;
}
/* Card body: explicit flex column, items have predictable order */
.pcard-a__body,
.pcard-b__body,
.pcard-d__body {
display: flex;
flex-direction: column;
gap: 8px;
}
.pcard-a__body > *:last-of-type,
.pcard-b__body > *:last-of-type,
.pcard-d__body > *:last-of-type {
margin-top: auto;
}
/* hc-pdp-blog — PDP cross-link to blog articles (Sprint14.4) */
.hc-pdp-blog-wrap {
margin-block: clamp(48px, 6vw, 96px);
}
.hc-pdp-blog__skeleton {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.hc-pdp-blog__skel {
height: 260px;
border-radius: 14px;
background: linear-gradient(90deg,
var(--hc-paper-3, #f2efe9) 0%,
rgba(255, 252, 247, 0.92) 50%,
var(--hc-paper-3, #f2efe9) 100%);
background-size: 200% 100%;
animation: hc-pdp-blog-skel 1.6s ease-in-out infinite;
}
@keyframes hc-pdp-blog-skel {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.hc-pdp-blog {
background: linear-gradient(135deg, rgba(212, 184, 150, 0.06), rgba(184, 154, 111, 0.02));
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 22px;
padding: clamp(28px, 4vw, 56px);
}
.hc-pdp-blog__head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
margin-bottom: clamp(20px, 2.4vw, 36px);
gap: 16px;
}
.hc-pdp-blog__eyebrow {
display: inline-block;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--hc-accent-dark, #7a6548);
margin-bottom: 8px;
}
.hc-pdp-blog__title {
font-family: var(--hc-serif, "Cormorant Garamond", serif);
font-size: clamp(26px, 3vw, 38px);
font-weight: 500;
color: var(--hc-ink, #1a1714);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.1;
}
.hc-pdp-blog__all {
font-size: 13px;
color: var(--hc-accent-dark, #7a6548);
text-decoration: none;
white-space: nowrap;
padding-bottom: 4px;
border-bottom: 0.5px dashed currentColor;
transition: color 0.2s, border-color 0.2s;
}
.hc-pdp-blog__all:hover {
color: var(--hc-ink);
border-color: var(--hc-ink);
}
.hc-pdp-blog__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 1.6vw, 24px);
}
.hc-pdp-blog__card {
display: flex;
flex-direction: column;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.12);
border-radius: 16px;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.2, 0.84, 0.3, 1),
box-shadow 0.3s,
border-color 0.3s;
}
.hc-pdp-blog__card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 48px -20px rgba(40, 30, 15, 0.18);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.42));
}
.hc-pdp-blog__media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--hc-paper-3, #f2efe9);
}
.hc-pdp-blog__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-pdp-blog__card:hover .hc-pdp-blog__media img {
transform: scale(1.06);
}
.hc-pdp-blog__tag {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
font-family: var(--hc-mono, monospace);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--hc-paper, #ffffff);
background: rgba(26, 23, 20, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 5px 11px;
border-radius: 9999px;
}
.hc-pdp-blog__body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.hc-pdp-blog__h3 {
font-family: var(--hc-serif);
font-size: 18px;
font-weight: 500;
line-height: 1.25;
margin: 0;
letter-spacing: -0.005em;
}
.hc-pdp-blog__h3 a {
color: var(--hc-ink);
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size 0.3s ease;
}
.hc-pdp-blog__h3 a:hover {
background-size: 100% 1px;
}
.hc-pdp-blog__excerpt {
font-size: 13px;
line-height: 1.55;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hc-pdp-blog__cta {
margin-top: auto;
padding-top: 10px;
font-family: var(--hc-mono, monospace);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--hc-accent-dark, #7a6548);
text-decoration: none;
align-self: flex-start;
transition: color 0.2s, transform 0.2s;
}
.hc-pdp-blog__cta:hover {
color: var(--hc-ink);
transform: translateX(4px);
}
@media (max-width: 920px) {
.hc-pdp-blog__grid,
.hc-pdp-blog__skeleton {
grid-template-columns: 1fr;
}
.hc-pdp-blog__head {
grid-template-columns: 1fr;
}
.hc-pdp-blog__all {
align-self: flex-start;
}
}
/* hc-pdp-stickybar — sticky tab nav + compact CTA on scroll-out (Sprint15.1) */
.hc-pdp-stickybar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
padding: 12px clamp(20px, 3vw, 36px);
background: rgba(252, 250, 246, 0.96);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 0.5px solid rgba(141, 109, 71, 0.18);
transform: translateY(-100%);
opacity: 0;
transition: transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1), opacity 0.32s ease;
pointer-events: none;
}
.hc-pdp-stickybar.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.hc-pdp-stickybar__tabs {
display: flex;
flex-wrap: nowrap;
gap: 24px;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
margin: 0;
padding: 0;
list-style: none;
}
.hc-pdp-stickybar__tabs::-webkit-scrollbar { display: none; }
.hc-pdp-stickybar__tab {
position: relative;
flex: 0 0 auto;
padding: 14px 0;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 14px;
font-weight: 500;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
text-decoration: none;
background: none;
border: none;
cursor: pointer;
transition: color 0.2s;
}
.hc-pdp-stickybar__tab:hover { color: var(--hc-ink, #1a1714); }
.hc-pdp-stickybar__tab.is-active {
color: var(--hc-ink, #1a1714);
font-weight: 600;
}
.hc-pdp-stickybar__tab.is-active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, var(--hc-gold, #d4b896), var(--hc-gold-dark, #b89a6f));
border-radius: 2px;
}
.hc-pdp-stickybar__buy {
display: flex;
align-items: center;
gap: 14px;
}
.hc-pdp-stickybar__price {
font-family: var(--hc-serif, "Cormorant Garamond", serif);
font-size: 22px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
letter-spacing: -0.01em;
white-space: nowrap;
}
.hc-pdp-stickybar__price-suffix {
font-family: var(--hc-sans);
font-size: 12px;
font-weight: 400;
color: var(--hc-ink-soft);
margin-left: 4px;
}
.hc-pdp-stickybar__cart {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 22px;
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
font-family: var(--hc-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
border-radius: 9999px;
border: none;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: transform 0.18s, box-shadow 0.18s;
}
.hc-pdp-stickybar__cart:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px -10px rgba(40, 30, 15, 0.42);
}
.hc-pdp-stickybar__icons {
display: flex;
gap: 8px;
}
.hc-pdp-stickybar__ico {
width: 38px;
height: 38px;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.74);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 50%;
color: var(--hc-ink-soft);
cursor: pointer;
transition: color 0.2s, border-color 0.2s, transform 0.18s;
}
.hc-pdp-stickybar__ico:hover {
color: var(--hc-ink);
border-color: var(--hc-gold, #d4b896);
transform: translateY(-1px);
}
.hc-pdp-stickybar__ico.is-active {
color: var(--hc-danger, #c9433a);
border-color: var(--hc-danger);
}
.hc-pdp-stickybar__ico svg {
width: 16px;
height: 16px;
}
/* On mobile: hide tabs and show only CTA inline */
@media (max-width: 720px) {
.hc-pdp-stickybar {
grid-template-columns: 1fr auto;
gap: 12px;
padding: 10px 14px;
}
.hc-pdp-stickybar__tabs { display: none; }
.hc-pdp-stickybar__price { font-size: 18px; }
.hc-pdp-stickybar__cart { padding: 9px 18px; font-size: 13px; }
.hc-pdp-stickybar__icons { display: none; }
}
/* Sprint15.1.fix — force compact height */
.hc-pdp-stickybar {
max-height: 64px !important;
height: 64px !important;
overflow: hidden !important;
align-items: center !important;
}
.hc-pdp-stickybar__tabs {
max-height: 48px !important;
align-self: center !important;
}
.hc-pdp-stickybar__tabs li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
}
.hc-pdp-stickybar__buy {
align-self: center !important;
max-height: 48px !important;
}
/* Sprint20.fix — hide old pdp-sticky-dock when new bar visible */
/* When new top stickybar is visible — hide legacy bottom dock to avoid duplicate CTAs */
.hc-pdp-stickybar.is-visible ~ #pdp-sticky-dock,
.hc-pdp-stickybar.is-visible + #pdp-sticky-dock {
display: none !important;
}
/* Belt-and-suspenders — when stickybar is visible (via JS), kill the dock entirely */
body:has(.hc-pdp-stickybar.is-visible) #pdp-sticky-dock {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* hc-pdp-specs-collapse — fade-out + show-more for long spec lists (Sprint15.2) */
.hc-pdp-specs {
position: relative;
}
.hc-pdp-specs--collapsible[data-collapsed="true"] {
max-height: 380px;
overflow: hidden;
}
.hc-pdp-specs--collapsible[data-collapsed="true"]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 96px;
background: linear-gradient(to bottom,
rgba(252, 250, 246, 0) 0%,
rgba(252, 250, 246, 0.7) 45%,
var(--hc-paper, #ffffff) 100%);
pointer-events: none;
}
.hc-pdp-specs__show-more {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 16px auto 0;
padding: 12px 28px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.28);
border-radius: 9999px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
position: relative;
z-index: 2;
}
.hc-pdp-specs__show-more:hover {
background: var(--hc-paper-2, #fbf8f3);
border-color: var(--hc-gold, #d4b896);
transform: translateY(-1px);
}
.hc-pdp-specs__show-more svg {
width: 14px;
height: 14px;
transition: transform 0.2s;
}
.hc-pdp-specs--collapsible:not([data-collapsed="true"]) .hc-pdp-specs__show-more svg {
transform: rotate(180deg);
}
.hc-pdp-specs__show-more-count {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.55));
margin-left: 4px;
}
.hc-pdp-specs__show-more-wrap {
display: grid;
place-items: center;
/* Default: positive margin (separate from spec cards in expanded state).
При collapsed уезжает вверх -32px чтобы лечь поверх fade-out gradient. */
margin-top: 20px;
position: relative;
z-index: 3;
}
.hc-pdp-specs--collapsible[data-collapsed="true"] + .hc-pdp-specs__show-more-wrap {
margin-top: -32px;
}
/* hc-pdp-pdf-card — standalone PDF spec download card (Sprint15.4) */
.hc-pdp-pdf-card {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 24px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.10), rgba(184, 154, 111, 0.04));
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 16px;
text-decoration: none;
color: var(--hc-ink, #1a1714);
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
margin-block: clamp(20px, 2.4vw, 36px);
}
.hc-pdp-pdf-card:hover {
border-color: var(--hc-gold, #d4b896);
transform: translateY(-2px);
box-shadow: 0 18px 36px -16px rgba(184, 154, 111, 0.32);
}
.hc-pdp-pdf-card__ico {
flex-shrink: 0;
width: 52px;
height: 52px;
display: grid;
place-items: center;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 12px;
color: var(--hc-accent-dark, #7a6548);
}
.hc-pdp-pdf-card:hover .hc-pdp-pdf-card__ico {
background: linear-gradient(135deg, var(--hc-gold, #d4b896), var(--hc-gold-dark, #b89a6f));
color: var(--hc-ink, #1a1714);
}
.hc-pdp-pdf-card__ico svg {
width: 24px;
height: 24px;
}
.hc-pdp-pdf-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.hc-pdp-pdf-card__eyebrow {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--hc-accent-dark, #7a6548);
}
.hc-pdp-pdf-card__title {
font-family: var(--hc-serif, "Cormorant Garamond", serif);
font-size: 18px;
font-weight: 500;
line-height: 1.25;
margin: 0;
color: var(--hc-ink, #1a1714);
}
.hc-pdp-pdf-card__meta {
font-size: 12px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.55));
}
.hc-pdp-pdf-card__arrow {
flex-shrink: 0;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.18);
color: var(--hc-ink-soft);
transition: transform 0.3s, background 0.3s;
}
.hc-pdp-pdf-card:hover .hc-pdp-pdf-card__arrow {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
transform: translateX(4px);
}
.hc-pdp-pdf-card__arrow svg {
width: 16px;
height: 16px;
}
@media (max-width: 720px) {
.hc-pdp-pdf-card {
padding: 16px;
gap: 14px;
}
.hc-pdp-pdf-card__title {
font-size: 16px;
}
}
/* hc-original-badge — sky-blue ОРИГИНАЛ trust chip (Sprint15.3)
Used on PDP under H1 and on pcard variants near eyebrow/series. */
.hc-original-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: linear-gradient(135deg, #1e7fc4, #1565a3);
color: #ffffff;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
border-radius: 9999px;
box-shadow: 0 4px 10px -4px rgba(21, 101, 163, 0.42);
white-space: nowrap;
}
.hc-original-badge::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background-color: #ffffff;
/* Inline checkmark via mask */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
}
.hc-original-badge--sm {
padding: 3px 9px;
font-size: 9.5px;
letter-spacing: 0.08em;
}
.hc-original-badge--sm::before {
width: 9px;
height: 9px;
}
/* Sprint14.9.fix — prevent stretch in flex/grid parents */
.hc-original-badge,
.hc-original-badge--sm {
width: auto !important;
max-width: max-content !important;
align-self: flex-start !important;
flex-shrink: 0;
}
/* Sprint46: убран cascading absolute positioning, который форсил
* badge поверх sale-chip на всех pcard вариантах.
* Теперь каждый pcard вариант сам позиционирует badge в template
* (pcard-a → pcard-type-head, pcard-b → series-row, pcard-c → top-of-article,
* pcard-d → top-row). Badge рендерится в естественном потоке там, где
* его поставил шаблон — без оверлапа с другими бэйджами. */
/* hc-cat-hero — premium category page hero (Sprint14.9) */
.hc-cat-hero {
position: relative;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(28px, 4vw, 56px);
align-items: center;
padding: clamp(28px, 4vw, 56px);
margin-bottom: clamp(28px, 4vw, 56px);
background:
radial-gradient(circle at 88% 24%, rgba(212, 184, 150, 0.14), transparent 50%),
linear-gradient(135deg, var(--hc-paper, #ffffff) 0%, var(--hc-paper-2, #fbf8f3) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.16);
border-radius: 22px;
overflow: hidden;
isolation: isolate;
}
.hc-cat-hero::before {
content: "";
position: absolute;
top: -64px;
right: -64px;
width: 320px;
height: 320px;
border-radius: 50%;
border: 0.5px dashed rgba(141, 109, 71, 0.16);
z-index: 0;
animation: hc-cat-hero-rot 90s linear infinite;
}
@keyframes hc-cat-hero-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.hc-cat-hero::before { animation: none; }
}
.hc-cat-hero__body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 14px;
}
.hc-cat-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
padding: 6px 14px;
background: rgba(212, 184, 150, 0.14);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 9999px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--hc-accent-dark, #7a6548);
}
.hc-cat-hero__eyebrow::before {
content: "";
width: 5px;
height: 5px;
background: var(--hc-gold, #d4b896);
border-radius: 50%;
}
.hc-cat-hero__title {
font-family: var(--hc-serif, "Cormorant Garamond", serif);
font-size: clamp(34px, 5vw, 60px);
font-weight: 500;
line-height: 1.04;
letter-spacing: -0.015em;
color: var(--hc-ink, #1a1714);
margin: 0;
}
.hc-cat-hero__lede {
font-size: 15px;
line-height: 1.62;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
max-width: 52ch;
margin: 0;
}
.hc-cat-hero__stats {
display: flex;
gap: 32px;
margin-top: 8px;
padding: 16px 20px;
background: rgba(212, 184, 150, 0.06);
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 14px;
align-self: flex-start;
}
.hc-cat-hero__stat { display: flex; flex-direction: column; gap: 2px; }
.hc-cat-hero__stat-num {
font-family: var(--hc-serif);
font-size: 28px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
letter-spacing: -0.01em;
}
.hc-cat-hero__stat-lbl {
font-family: var(--hc-mono, monospace);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.55));
}
.hc-cat-hero__cta-row {
display: flex;
gap: 14px;
margin-top: 14px;
flex-wrap: wrap;
}
.hc-cat-hero__cta-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border-radius: 9999px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
border: none;
cursor: pointer;
transition: transform 0.18s, box-shadow 0.18s;
}
.hc-cat-hero__cta-primary:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px -10px rgba(40, 30, 15, 0.42);
}
.hc-cat-hero__cta-ghost {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.28);
border-radius: 9999px;
font-family: var(--hc-sans);
font-size: 14px;
color: var(--hc-ink, #1a1714);
text-decoration: none;
cursor: pointer;
transition: border-color 0.18s, transform 0.18s;
}
.hc-cat-hero__cta-ghost:hover {
border-color: var(--hc-gold, #d4b896);
transform: translateY(-1px);
}
.hc-cat-hero__media {
position: relative;
z-index: 1;
aspect-ratio: 1 / 1;
max-width: 420px;
margin-left: auto;
border-radius: 18px;
overflow: hidden;
background:
radial-gradient(circle at 30% 30%, rgba(212, 184, 150, 0.20), transparent 60%),
linear-gradient(135deg, var(--hc-paper-3, #f2efe9), var(--hc-paper-2, #fbf8f3));
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.04),
0 32px 64px -28px rgba(184, 154, 111, 0.32);
}
.hc-cat-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 920px) {
.hc-cat-hero {
grid-template-columns: 1fr;
gap: 24px;
padding: 24px;
}
.hc-cat-hero__media { max-width: 100%; margin: 0; }
.hc-cat-hero__stats { gap: 24px; padding: 14px 16px; }
.hc-cat-hero__stat-num { font-size: 22px; }
.hc-cat-hero__cta-row { flex-direction: column; }
.hc-cat-hero__cta-row > * { width: 100%; justify-content: center; }
}
/* hc-bundle-landing — /bundle/{slug} page set-items-grid + set-item-card (Sprint17) */
/* ─── Sprint48 — set-hero premium upgrade ───
* До: спартанский hero "Готовый комплект" + текст + price + 2 stat-cards inline.
* После: премиум-карточка с Cormorant Garamond title, dashed gold rule, gold-accent
* eyebrow chip, big serif price, premium CTA pill, и 2-up benefits grid в одном стиле
* с остальными premium-страницами (PDP, /delivery, /about). */
.set-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(20px, 2vw, 28px);
padding: clamp(32px, 3.6vw, 56px) clamp(24px, 2.6vw, 40px);
background:
radial-gradient(900px 540px at 0% 0%, rgba(212, 184, 150, 0.14), transparent 58%),
linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, var(--hc-paper-2, #fbf8f3) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.20);
border-radius: clamp(20px, 1.8vw, 28px);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.04),
0 28px 64px -32px rgba(40, 30, 15, 0.22);
isolation: isolate;
overflow: hidden;
}
.set-hero::before {
content: "";
position: absolute;
top: 0;
left: clamp(24px, 2.6vw, 40px);
right: clamp(24px, 2.6vw, 40px);
height: 1px;
background: linear-gradient(90deg, transparent, var(--hc-gold-1, var(--hc-gold, #d4b896)) 30%, var(--hc-gold-2, #b89a6f) 50%, var(--hc-gold-1, var(--hc-gold, #d4b896)) 70%, transparent);
opacity: 0.72;
pointer-events: none;
}
.set-hero__body {
display: flex;
flex-direction: column;
gap: clamp(14px, 1.4vw, 18px);
}
.set-hero .hc-eyebrow,
.set-hero__eyebrow {
display: inline-block;
align-self: flex-start;
padding: 6px 12px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
background: rgba(212, 184, 150, 0.10);
border: 0.5px solid rgba(212, 184, 150, 0.32);
border-radius: 999px;
}
.set-hero .t-title {
margin: 0;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(28px, 3.4vw, 44px);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.018em;
color: var(--hc-ink, #1a1714);
}
.set-hero .t-lede {
margin: 0;
max-width: 60ch;
font-size: clamp(15px, 1.05vw, 16.5px);
line-height: 1.55;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.68));
}
.set-hero__price {
display: flex;
align-items: baseline;
gap: 14px;
padding: 10px 0 4px;
}
.set-hero__total {
font-family: var(--hc-serif, "Cormorant Garamond", "Playfair Display", Georgia, serif);
font-size: clamp(28px, 3.0vw, 38px);
font-weight: 500;
line-height: 1;
color: var(--hc-ink, #1a1714);
letter-spacing: -0.01em;
}
.set-hero__was {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 14px;
color: var(--hc-ink-muted, rgba(26, 23, 20, 0.42));
text-decoration: line-through;
}
.set-hero form {
margin-top: clamp(6px, 0.6vw, 10px);
}
.set-hero .hc-btn--primary {
padding: 14px 28px;
font-size: 15px;
letter-spacing: 0.01em;
}
/* benefits row внутри set-hero — пары "title + sub" */
.set-hero .pdp-trust-strip--compact {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin-top: clamp(10px, 1vw, 14px);
}
.set-hero .pdp-trust-strip__item {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: rgba(255, 252, 247, 0.6);
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 14px;
font-family: var(--hc-sans, "Outfit", sans-serif);
}
.set-hero .pdp-trust-strip__item b {
font-size: 13.5px;
font-weight: 600;
color: var(--hc-ink, #1a1714);
}
.set-hero .pdp-trust-strip__item span {
font-size: 12.5px;
line-height: 1.45;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}
.set-items-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 18px;
margin-top: clamp(20px, 2.4vw, 32px);
}
.set-item-card {
display: flex;
flex-direction: column;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.16);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.3s cubic-bezier(0.2, 0.84, 0.3, 1),
box-shadow 0.3s,
border-color 0.3s;
}
.set-item-card:hover {
transform: translateY(-3px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.62));
box-shadow: 0 24px 48px -20px rgba(40, 30, 15, 0.18);
}
.set-item-card__img {
display: block;
width: 100%;
height: 180px !important;
max-height: 180px !important;
object-fit: contain !important;
background: linear-gradient(135deg, var(--hc-paper-2, #fbf8f3), var(--hc-paper-3, #f2efe9));
padding: 14px;
box-sizing: border-box;
transition: transform 0.5s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.set-item-card:hover .set-item-card__img {
transform: scale(1.04);
}
.set-item-card__body {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px 16px;
flex: 1;
}
.set-item-card__title {
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13.5px;
font-weight: 500;
line-height: 1.36;
color: var(--hc-ink, #1a1714);
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0 0 4px;
}
.set-item-card__body .hc-muted {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
letter-spacing: 0.04em;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.55));
margin: 0;
}
.set-item-card__price {
margin-top: auto;
padding-top: 8px;
font-family: var(--hc-serif, "Cormorant Garamond", serif);
font-size: 18px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
letter-spacing: -0.005em;
}
@media (max-width: 720px) {
.set-items-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.set-item-card__img {
height: 140px !important;
padding: 10px;
}
.set-item-card__title { font-size: 12.5px; }
.set-item-card__price { font-size: 16px; }
}
@media (max-width: 420px) {
.set-items-grid { grid-template-columns: 1fr; }
.set-item-card__img { height: 200px !important; }
}
/* ─── Sprint37 #1: hero bottom-row premium oформление ───
trust pills + stats row становятся карточками с тонкими бордерами,
premium gradient, hover-glow. Заменяет голый текст под H1. */
/* Trust pills row: убираем плоский look, добавляем premium border + gradient */
.hc-hero__trust {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 22px 0 6px;
padding: 14px 0 4px;
border-top: 0.5px solid rgba(141, 109, 71, 0.16);
}
.hc-hero__trust-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hc-ink, #1a1714);
background: linear-gradient(180deg, rgba(255, 252, 247, 0.85) 0%, rgba(252, 246, 234, 0.6) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 999px;
box-shadow: 0 1px 2px rgba(40, 30, 15, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.hc-hero__trust-badge:hover {
transform: translateY(-1px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.5));
box-shadow: 0 4px 12px -6px rgba(184, 154, 111, 0.32);
}
.hc-hero__trust-badge svg {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--hc-accent-dark, #7a6548);
}
/* Stats row: 3 ячейки с разделителями становятся premium cards */
.hc-hero__stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin: 18px 0 0;
padding: 24px 0;
border-top: 0.5px solid rgba(141, 109, 71, 0.18);
border-bottom: 0.5px solid rgba(141, 109, 71, 0.18);
background: linear-gradient(180deg, rgba(255, 252, 247, 0.4) 0%, transparent 100%);
}
.hc-hero__stat {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 24px;
text-decoration: none;
color: var(--hc-ink, #1a1714);
border-right: 0.5px solid rgba(141, 109, 71, 0.14);
transition: color 180ms ease;
}
.hc-hero__stat:last-child {
border-right: none;
}
.hc-hero__stat:hover {
color: var(--hc-accent-dark, #7a6548);
}
.hc-hero__stat:hover .hc-hero__stat-num {
color: var(--hc-accent-dark, #7a6548);
}
.hc-hero__stat-num {
font-family: var(--hc-serif, "Cormorant Garamond", serif);
font-size: clamp(26px, 2.4vw, 32px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
color: var(--hc-ink, #1a1714);
transition: color 180ms ease;
}
.hc-hero__stat-num sub,
.hc-hero__stat-num sup {
font-size: 0.5em;
font-weight: 400;
vertical-align: baseline;
margin-left: 2px;
}
.hc-hero__stat-num svg {
width: 18px;
height: 18px;
margin-right: 6px;
vertical-align: -2px;
color: var(--hc-accent, #d4b896);
}
.hc-hero__stat-lbl {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.55));
line-height: 1.4;
}
/* Старые .hc-hero__stat-sep больше не нужны — bordrer-right в .hc-hero__stat */
.hc-hero__stat-sep {
display: none !important;
}
/* Mobile compact */
@media (max-width: 720px) {
.hc-hero__trust {
padding: 10px 0 2px;
}
.hc-hero__trust-badge {
font-size: 9.5px;
padding: 6px 10px;
}
.hc-hero__stats {
grid-template-columns: 1fr;
gap: 0;
padding: 16px 0;
}
.hc-hero__stat {
padding: 12px 0;
border-right: none;
border-bottom: 0.5px solid rgba(141, 109, 71, 0.12);
}
.hc-hero__stat:last-child {
border-bottom: none;
}
}
/* ─── Sprint37 #2: category banner — было 460px высокая плавающая картинка,
делаем premium hero с overlay-title, gradient bg, structure ─── */
/* Targets actual class: .cat-banner / .cat-banner--light */
.cat-banner {
position: relative;
min-height: 280px !important;
max-height: 360px !important;
padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 52px) !important;
margin-bottom: clamp(20px, 2.4vw, 36px);
border-radius: clamp(16px, 1.6vw, 22px);
overflow: hidden;
background:
radial-gradient(800px 400px at 100% 0%, rgba(212, 184, 150, 0.32), transparent 60%),
linear-gradient(135deg, var(--hc-bg-warm, #f5efde) 0%, var(--hc-paper-3, #ede2c9) 100%) !important;
border: 0.5px solid rgba(141, 109, 71, 0.18);
box-shadow: 0 1px 2px rgba(40, 30, 15, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
}
.cat-banner__media,
.cat-banner img:not(.cat-banner__icon),
.cat-banner__bg {
position: absolute;
top: 50%;
right: 4%;
transform: translateY(-50%);
max-height: 80%;
max-width: 45%;
object-fit: contain;
opacity: 0.92;
z-index: 0;
pointer-events: none;
}
.cat-banner__body,
.cat-banner > div:not(.cat-banner__media) {
position: relative;
z-index: 1;
max-width: 580px;
}
.cat-banner__title,
.cat-banner h1,
.cat-banner__h1 {
font-family: var(--hc-serif, "Cormorant Garamond", serif);
font-size: clamp(36px, 4.5vw, 60px);
font-weight: 500;
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--hc-ink, #1a1714);
margin: 0 0 14px;
}
.cat-banner__subtitle,
.cat-banner p {
font-size: clamp(14px, 1.1vw, 15.5px);
line-height: 1.6;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.72));
margin: 0;
max-width: 480px;
}
@media (max-width: 720px) {
.cat-banner {
min-height: 200px !important;
max-height: none !important;
padding: 24px 20px !important;
}
.cat-banner__media {
opacity: 0.18;
max-width: 80%;
right: 50%;
transform: translate(50%, -50%);
}
.cat-banner__title,
.cat-banner h1 {
font-size: clamp(28px, 7vw, 36px);
}
}
/* ─── Sprint37 #5: pdp-trust-strip — было плоское grid 3-ячейки текста,
делаем premium cards с иконкой, gradient, hover-glow ─── */
.pdp-trust-strip {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 14px !important;
margin: clamp(28px, 3vw, 40px) 0 !important;
padding: 0 !important;
background: transparent !important;
}
.pdp-trust-strip__item {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 22px 24px;
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 246, 234, 0.6) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(40, 30, 15, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.pdp-trust-strip__item:hover {
transform: translateY(-2px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.5));
box-shadow: 0 8px 24px -12px rgba(184, 154, 111, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Premium gold-orb-индикатор перед заголовком */
.pdp-trust-strip__item::before {
content: "";
display: block;
width: 32px;
height: 32px;
margin-bottom: 4px;
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 35%),
linear-gradient(135deg, rgba(212, 184, 150, 0.45) 0%, rgba(141, 109, 71, 0.18) 100%);
border-radius: 50%;
border: 0.5px solid rgba(141, 109, 71, 0.28);
}
.pdp-trust-strip__item b {
font-family: var(--hc-serif, "Cormorant Garamond", serif);
font-size: 17px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
line-height: 1.2;
letter-spacing: -0.005em;
}
.pdp-trust-strip__item span {
font-size: 12.5px;
line-height: 1.45;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.62));
}
@media (max-width: 720px) {
.pdp-trust-strip {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.pdp-trust-strip__item {
padding: 18px 20px;
}
}
/* ─── Sprint40: per-card animated SVG icons (mask-image) ───
Icons differentiate the 3 trust messages. CSS mask + animation:
- n=1 (Проверенный ассортимент) → shield-check
- n=2 (Проверка комплекта) → gear/wrench
- n=3 (Доставка по РФ) → truck
На hover: rotate + glow для premium feel. */
.pdp-trust-strip__item::before {
/* Override Sprint37 #5 plain gold-orb with proper icon container */
width: 44px;
height: 44px;
border-radius: 12px;
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 45%),
linear-gradient(135deg, rgba(212, 184, 150, 0.55) 0%, rgba(141, 109, 71, 0.22) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.32);
display: grid;
place-items: center;
transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 320ms ease;
position: relative;
}
.pdp-trust-strip__item::after {
content: "";
position: absolute;
top: 22px;
left: 24px;
width: 22px;
height: 22px;
background: var(--hc-ink, #1a1714);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 22px 22px;
mask-size: 22px 22px;
pointer-events: none;
transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), background 320ms ease;
}
/* Item 1: shield-check (Проверенный ассортимент) */
.pdp-trust-strip__item:nth-child(1)::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,
");
mask-image: url("data:image/svg+xml;utf8,
");
}
/* Item 2: wrench/settings (Проверка комплекта) */
.pdp-trust-strip__item:nth-child(2)::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,
");
mask-image: url("data:image/svg+xml;utf8,
");
}
/* Item 3: truck (Доставка по РФ) */
.pdp-trust-strip__item:nth-child(3)::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,
");
mask-image: url("data:image/svg+xml;utf8,
");
}
/* Hover state: icon container gets gold halo + lift, icon scales and tints */
.pdp-trust-strip__item:hover::before {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 16px -6px rgba(184, 154, 111, 0.4);
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0%, transparent 50%),
linear-gradient(135deg, var(--hc-gold, #d4b896) 0%, var(--hc-accent-dark, #7a6548) 100%);
}
.pdp-trust-strip__item:hover::after {
transform: scale(1.10);
background: var(--hc-paper, #ffffff);
}
/* Subtle ambient pulse — каждая иконка дышит с offset */
@keyframes hc-trust-icon-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
.pdp-trust-strip__item::before {
animation: hc-trust-icon-pulse 4s ease-in-out infinite;
}
.pdp-trust-strip__item:nth-child(1)::before { animation-delay: 0s; }
.pdp-trust-strip__item:nth-child(2)::before { animation-delay: 1.2s; }
.pdp-trust-strip__item:nth-child(3)::before { animation-delay: 2.4s; }
.pdp-trust-strip__item:hover::before {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.pdp-trust-strip__item::before,
.pdp-trust-strip__item::after {
animation: none;
transition: none;
}
}
/* ─── Sprint37 #6: hc-bundle-card «Собрать комплект →» CTA — premium ───
Было: маленькая 285x44 кнопка в пустой большой области.
Делаем: full-width primary CTA в footer'е карточки + accent shimmer ─── */
.hc-bundle-card__foot {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
padding-top: 14px;
border-top: 0.5px dashed rgba(141, 109, 71, 0.18);
}
.hc-bundle-card__foot a.hc-btn,
.hc-bundle-card__foot .hc-btn--primary {
position: relative;
width: 100%;
padding: 14px 20px !important;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 12.5px !important;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
text-align: center;
background: linear-gradient(180deg, var(--hc-ink, #1a1714) 0%, #2a221c 100%) !important;
color: var(--hc-paper, #ffffff) !important;
border: none;
border-radius: 999px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 10px 24px -10px rgba(26, 23, 20, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
overflow: hidden;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.hc-bundle-card__foot a.hc-btn:hover,
.hc-bundle-card__foot .hc-btn--primary:hover {
transform: translateY(-1px);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.12),
0 16px 32px -10px rgba(26, 23, 20, 0.48),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
/* Shimmer-эффект при hover (premium accent) */
.hc-bundle-card__foot a.hc-btn::after,
.hc-bundle-card__foot .hc-btn--primary::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(212, 184, 150, 0.18) 50%, transparent 100%);
transition: left 600ms ease;
}
.hc-bundle-card__foot a.hc-btn:hover::after,
.hc-bundle-card__foot .hc-btn--primary:hover::after {
left: 100%;
}
/* ─── Sprint37 #7: каталог-dropdown — заголовки серий читаемы.
Target: .hc-hdr__mega-grid (правильный селектор). ─── */
.hc-hdr__mega-grid a {
display: block !important;
padding: 12px 16px !important;
text-decoration: none !important;
border-radius: 10px;
transition: background 180ms ease;
}
.hc-hdr__mega-grid a strong {
display: block;
font-family: var(--hc-serif, "Cormorant Garamond", serif);
font-size: 16px;
font-weight: 500;
line-height: 1.15;
color: var(--hc-ink, #1a1714);
letter-spacing: -0.005em;
margin-bottom: 4px;
}
.hc-hdr__mega-grid a br {
display: none;
}
.hc-hdr__mega-grid a small,
.hc-hdr__mega-grid a .hc-muted {
display: block;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.06em;
line-height: 1.4;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
text-transform: uppercase;
}
.hc-hdr__mega-grid a:hover {
background: rgba(212, 184, 150, 0.10);
}
.hc-hdr__mega-grid a:hover strong {
color: var(--hc-accent-dark, #7a6548);
}
/* ─── Sprint37 #8: hc-cat-filters__actions sticky bottom — больше не залазит.
Было: position:sticky с прозрачным фоном → фасеты просвечивают.
Делаем: solid background + border-top + box-shadow для отделения ─── */
.hc-cat-filters__actions {
position: sticky;
bottom: 0;
z-index: 5;
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 4px 4px;
margin-top: 14px;
/* Solid bg чтобы facets не просвечивали */
background: linear-gradient(180deg, transparent 0%, var(--hc-paper, #ffffff) 18%, var(--hc-paper, #ffffff) 100%);
border-top: 0.5px solid rgba(141, 109, 71, 0.18);
box-shadow: 0 -8px 16px -8px rgba(40, 30, 15, 0.08);
}
.hc-cat-filters__actions .hc-btn {
width: 100%;
}
/* primary "Показать товары" — premium accent */
.hc-cat-filters__actions .hc-btn--primary {
padding: 12px 18px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* hc-recent — "Недавно смотрели" компонент на PDP.
Renders inside .hc-recently-block (which has the H2 title).
Empty-state: API returns '' for no items → parent block hides. */
.hc-recently-block:has(> .hc-pdp-recently:empty) {
display: none;
}
.hc-recent {
display: grid;
gap: 16px;
}
.hc-recent__head {
display: flex;
justify-content: flex-end;
}
.hc-recent__clear {
appearance: none;
background: transparent;
border: 1px solid rgba(141, 109, 71, 0.28);
border-radius: 999px;
padding: 6px 14px;
font-size: 12px;
color: var(--hc-ink-soft, #5a4e3f);
cursor: pointer;
transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.hc-recent__clear:hover {
background: rgba(141, 109, 71, 0.08);
border-color: rgba(141, 109, 71, 0.5);
color: var(--hc-ink, #1a1714);
}
.hc-recent__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.hc-recent-card {
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 6px;
padding: 12px;
border: 1px solid rgba(141, 109, 71, 0.18);
border-radius: 14px;
background: linear-gradient(180deg, #ffffff, #faf6ee);
color: inherit;
text-decoration: none;
transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms ease, border-color 220ms ease;
}
.hc-recent-card:hover {
transform: translateY(-2px);
border-color: rgba(141, 109, 71, 0.4);
box-shadow: 0 8px 20px -10px rgba(141, 109, 71, 0.28);
}
.hc-recent-card__media {
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
background: #f7f3eb;
border-radius: 10px;
overflow: hidden;
}
.hc-recent-card__img {
width: 100%;
height: 100%;
object-fit: contain;
}
.hc-recent-card__empty {
font-size: 11px;
color: var(--hc-ink-soft, #8a7d6b);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hc-recent-card__sku {
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--hc-ink-soft, #8a7d6b);
}
.hc-recent-card__name {
font-size: 13px;
line-height: 1.35;
color: var(--hc-ink, #1a1714);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hc-recent-card__price {
font-family: var(--hc-display-serif, 'Source Serif Pro', Georgia, serif);
font-size: 16px;
font-weight: 600;
color: var(--hc-ink, #1a1714);
}
@media (max-width: 900px) {
.hc-recent__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.hc-recent__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* === 283-tracking-steps.css === */
/* Tracking result — step strip + items + history + total.
tracking.html uses
+
+ + . None had CSS,
so they rendered as default OL (visible "1. 2. 3." marker fighting with
our own numbers) and bullet UL lists. This file scopes those four
blocks; no overrides of existing rules. */
/* 1. Step strip — horizontal progress with circles instead of OL markers. */
.track-steps {
list-style: none;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin: 24px 0 28px;
padding: 0;
position: relative;
}
.track-steps li {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
text-align: center;
color: var(--hc-muted, #8a7e6c);
font-size: var(--hc-fs-sm, 13px);
line-height: 1.3;
}
.track-steps li > span {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(180, 151, 115, 0.12);
color: var(--hc-muted, #8a7e6c);
font-weight: 600;
font-size: 14px;
border: 1.5px solid transparent;
transition: background .2s, color .2s, border-color .2s;
z-index: 1;
}
.track-steps li > b {
font-weight: 500;
letter-spacing: 0.01em;
}
/* connector line between steps */
.track-steps li:not(:last-child)::after {
content: "";
position: absolute;
top: 18px;
left: calc(50% + 22px);
right: calc(-50% + 22px);
height: 2px;
background: rgba(180, 151, 115, 0.18);
z-index: 0;
}
.track-steps li.is-done > span {
background: var(--hc-ink, #1a1716);
color: #f6f2ec;
border-color: var(--hc-ink, #1a1716);
}
.track-steps li.is-done > b {
color: var(--hc-ink, #1a1716);
font-weight: 600;
}
.track-steps li.is-done:not(:last-child)::after {
background: var(--hc-ink, #1a1716);
}
/* 2. Items list — kill default bullets, use card-row layout. */
.tracking__items {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px;
margin: 16px 0 24px;
}
.tracking__items li {
padding: 12px 14px;
background: rgba(255, 252, 247, 0.6);
border: 0.5px solid rgba(180, 151, 115, 0.18);
border-radius: 10px;
font-size: var(--hc-fs-sm, 14px);
color: var(--hc-ink, #1a1716);
line-height: 1.4;
}
/* 3. Status history — clean bullet-less timeline. */
.status-hist {
list-style: none;
padding: 0;
margin: 12px 0 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.status-hist li {
padding-left: 16px;
position: relative;
font-size: var(--hc-fs-sm, 13px);
color: var(--hc-muted, #8a7e6c);
}
.status-hist li::before {
content: "";
position: absolute;
left: 4px;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--hc-accent, #b49773);
}
.status-hist li strong {
color: var(--hc-ink, #1a1716);
font-weight: 600;
}
/* 4. Total — pin "Итого по заказу" label on the left, sum on the right. */
.tracking__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
margin: 16px 0;
background: rgba(180, 151, 115, 0.08);
border: 0.5px solid rgba(180, 151, 115, 0.18);
border-radius: 10px;
}
/* 5. Status pill at the top of result — color-code current status. */
.tracking__result .status {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: var(--hc-fs-sm, 13px);
font-weight: 500;
background: rgba(180, 151, 115, 0.12);
color: var(--hc-ink, #1a1716);
margin-left: 8px;
}
.tracking__result .status--paid,
.tracking__result .status--processing,
.tracking__result .status--packing,
.tracking__result .status--shipped,
.tracking__result .status--in_transit { background: rgba(180, 151, 115, 0.22); }
.tracking__result .status--delivered,
.tracking__result .status--completed { background: rgba(46, 125, 50, 0.14); color: #2e7d32; }
.tracking__result .status--canceled,
.tracking__result .status--cancelled { background: rgba(198, 40, 40, 0.12); color: #c62828; }
/* Cancelled state */
.track-cancelled {
padding: 14px 16px;
background: rgba(198, 40, 40, 0.08);
border: 0.5px solid rgba(198, 40, 40, 0.22);
border-radius: 10px;
color: #c62828;
margin: 16px 0;
}
/* Mobile: step strip collapses to vertical stack */
@media (max-width: 640px) {
.track-steps {
grid-template-columns: 1fr;
gap: 12px;
}
.track-steps li {
flex-direction: row;
gap: 12px;
text-align: left;
justify-content: flex-start;
}
.track-steps li:not(:last-child)::after {
left: 18px;
right: auto;
top: 36px;
width: 2px;
height: 12px;
}
}
/* === 284-blog-detail.css === */
/* Blog post (/blog/{slug}) — meta-bar, share buttons, TOC.
None of the four blocks below had CSS, so they rendered as inline runs
("Редакция HOLZCOM18.05.20262 мин чтенияПетли", TOC items concatenated,
share buttons stacked without spacing). New rules only; no overrides. */
/* 1. Meta-bar with pills under h1 */
.article-meta-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 12px 0 20px;
}
.article-meta-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
background: rgba(180, 151, 115, 0.08);
color: var(--hc-muted, #8a7e6c);
font-size: var(--hc-fs-sm, 13px);
line-height: 1.4;
white-space: nowrap;
}
.article-meta-pill svg { flex-shrink: 0; }
.article-meta-pill--accent {
background: var(--hc-ink, #1a1716);
color: #f6f2ec;
}
/* 2. Table of Contents */
.blog-toc {
padding: 18px 20px;
background: rgba(255, 252, 247, 0.6);
border: 0.5px solid rgba(180, 151, 115, 0.18);
border-radius: 12px;
margin: 20px 0 28px;
font-size: var(--hc-fs-sm, 14px);
}
.blog-toc.is-hidden { display: none; }
.blog-toc__title {
font-weight: 600;
color: var(--hc-ink, #1a1716);
margin-bottom: 10px;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#blogTOCLinks {
display: flex;
flex-direction: column;
gap: 8px;
}
#blogTOCLinks a,
#blogTOCLinks > * {
display: block;
padding: 4px 0 4px 12px;
color: var(--hc-muted, #8a7e6c);
text-decoration: none;
border-left: 2px solid transparent;
transition: color .2s, border-color .2s;
}
#blogTOCLinks a:hover,
#blogTOCLinks a.is-active {
color: var(--hc-ink, #1a1716);
border-left-color: var(--hc-accent, #b49773);
}
/* 3. Share buttons */
.share-btns, .blog-share {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 28px 0;
padding: 16px 18px;
background: rgba(255, 252, 247, 0.6);
border: 0.5px solid rgba(180, 151, 115, 0.18);
border-radius: 12px;
}
.share-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fff;
border: 0.5px solid rgba(180, 151, 115, 0.28);
border-radius: 8px;
font-size: var(--hc-fs-sm, 13px);
color: var(--hc-ink, #1a1716);
cursor: pointer;
transition: background .15s, border-color .15s;
}
.share-btn:hover {
background: rgba(180, 151, 115, 0.06);
border-color: rgba(180, 151, 115, 0.45);
}
.share-btn svg { flex-shrink: 0; }
/* 4. Layout — article + TOC sidebar on wide screens */
.blog-detail__layout {
display: grid;
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
gap: 32px;
margin-top: 24px;
}
.blog-detail__layout > .blog-toc {
position: sticky;
top: 100px;
align-self: start;
margin: 0;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
@media (max-width: 900px) {
.blog-detail__layout { grid-template-columns: 1fr; }
.blog-detail__layout > .blog-toc {
position: static;
max-height: none;
}
}
/* 5. Hero image + title — pin h1 above the cover so it lands above fold */
.article-hero-image {
width: 100%;
height: clamp(220px, 28vw, 380px);
object-fit: cover;
border-radius: 16px;
margin: 16px 0;
}
.blog-detail__title {
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.15;
margin: 8px 0 4px;
}
/* === 285-pdp-m1-acts.css === */
/* PDP variant m1 — action row (Telegram / Подбор / Наличие / В избранное).
125-hc-pdp-m1.css styles only hero/gallery/stage/thumbs — left the .__acts
block unstyled. SVGs inside .__act-ico have no width/height attrs, so they
expand to the column width and render as 600×600 black blobs below the CTAs.
Below: scoped rules for the row, individual button, and icon container. */
.hc-pdp-m1__acts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
margin-top: 14px;
}
.hc-pdp-m1__act {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #fff;
border: 0.5px solid rgba(180, 151, 115, 0.28);
border-radius: 10px;
font-size: 13px;
color: var(--hc-ink, #1a1716);
text-decoration: none;
cursor: pointer;
transition: background .15s, border-color .15s;
text-align: left;
line-height: 1.2;
}
.hc-pdp-m1__act:hover {
background: rgba(180, 151, 115, 0.06);
border-color: rgba(180, 151, 115, 0.45);
}
.hc-pdp-m1__act-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
color: var(--hc-accent, #b49773);
}
/* Hard-cap any SVG inside the icon container — defensive against future
markup additions that forget to set width/height attributes. */
.hc-pdp-m1__act-ico svg {
width: 18px;
height: 18px;
display: block;
}
/* === 286-pdp-bundles-rail-fix.css === */
/* PDP template wraps the bundle HTMX fragment in `.pdp-product-rail`
(4-col grid intended for .pcard children). When the fragment loads,
the inserted takes a single grid cell
(~25% width on desktop), squeezing the inner 3-col card grid to
~80px per card with truncated titles and CTAs.
Make the bundles section span the full row so its own 3-col grid gets
the whole content area. */
.pdp-product-rail > .hc-bundles {
grid-column: 1 / -1;
}
.pdp-product-rail:has(> .hc-bundles) {
display: block;
margin: clamp(20px, 2.4vw, 36px) 0;
}
/* === 287-shop-tile-overlay-boost.css === */
/* I1: /shop "Основные категории" — strengthen .hc-cat-tile__overlay readability
on light/grayscale tile backgrounds (LEGRABOX, MERIVOBOX, ORGA-LINE etc.).
The existing gradient peaks at 0.72 alpha at the very bottom but the title
was still hard to read on top of bright tile photos. Boost: darker peak +
solid pill behind text for guaranteed contrast on any photo. */
.page-catalog .hc-cat-tile__overlay {
background: linear-gradient(
to top,
rgba(17, 15, 14, 0.88) 0%,
rgba(17, 15, 14, 0.55) 40%,
rgba(17, 15, 14, 0.18) 75%,
rgba(17, 15, 14, 0.02) 100%
);
padding: 14px 14px 12px;
}
.page-catalog .hc-cat-tile__title {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.85),
0 0 12px rgba(0, 0, 0, 0.55);
}
.page-catalog .hc-cat-tile__count {
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
/* === 288-cat-banner-image-blend.css === */
/* I2: /shop/{category} hero — eliminate light-gray rectangle artifact behind
product cutout images (PNG/JPG with non-transparent backgrounds). The
cat-banner__bg uses object-fit: contain on a paper-tinted container, but
source images often ship with white/light backgrounds that look like
floating rectangles next to the cutout.
mix-blend-mode: multiply merges any near-white pixels into the paper bg
without changing the actual product silhouette. */
.cat-banner__bg {
mix-blend-mode: multiply;
}
/* === 289-shop-sidebar-desktop.css === */
/* I3: /shop/{category} — sidebar "Закрыть" button shows on desktop where the
sidebar is permanently visible. The button is only meaningful as the
drawer-close action on mobile. Hide on viewports where the filter aside
sits next to the catalog grid (≥1024px). */
@media (min-width: 1024px) {
.hc-cat-filter-aside .hc-cat-filters__head .hc-btn--ghost {
display: none;
}
}
/* I4: ЦЕНА numeric inputs were rendering "500" instead of "50000" because
their fixed width was too narrow. Give them enough room for a 6-digit max. */
.hc-cat-filters__price-row input[type="number"],
.hc-cat-filters__price-row .hc-input {
min-width: 84px;
width: 100%;
}
/* === 290-cart-upsell-autofill.css === */
/* I9: /cart "Часто берут вместе" — fix orphan card in the second row.
The rail uses a fixed 3-col grid, leaving the 4th card alone in row 2.
Switch to auto-fill so cards wrap naturally without orphans, and cap
minmax so cards keep readable width on wider viewports. */
.hc-cart-upsell__rail {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}
@media (min-width: 1280px) {
.hc-cart-upsell__rail {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}
}
/* === 291-bb2-recs-sticky.css === */
/* I8: /bundle-builder — center "Ваш комплект" pane is short (1 base + a few
lines) while right "Что добавить" can be 132 items × 5 screens, leaving
a giant empty rectangle below the cart pane.
Pin the right pane sticky with its own scroll, so the center pane no
longer needs to fill the entire right-column height. */
@media (min-width: 1024px) {
.bb2__main > .bb2__recs,
.bb2__main > aside:last-child {
position: sticky;
top: 100px;
align-self: start;
max-height: calc(100vh - 120px);
overflow-y: auto;
}
.bb2__main {
align-items: start;
}
}
/* === 292-set-hero-cover.css === */
/* I7: /sets/{slug} hero cover image — never had CSS, never displayed
(also product_set.cover_url was always NULL in DB). Now template falls
back to items[0].product.primary_image_url so we always have a cover.
This block defines the cover frame next to the title. */
.set-hero {
display: grid;
grid-template-columns: minmax(280px, 380px) 1fr;
gap: clamp(20px, 2.4vw, 36px);
align-items: center;
}
.set-hero__cover {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(255, 252, 246, 0.9), rgba(252, 248, 240, 0.6));
border-radius: 16px;
padding: 16px;
min-height: 220px;
overflow: hidden;
}
.set-hero__cover img {
max-width: 100%;
max-height: 280px;
object-fit: contain;
mix-blend-mode: multiply;
}
@media (max-width: 768px) {
.set-hero {
grid-template-columns: 1fr;
}
.set-hero__cover {
min-height: 160px;
}
.set-hero__cover img {
max-height: 180px;
}
}
/* === 293-sets-card-uniform.css === */
/* /sets — карточки имели разные media-heights (218..278px) из-за
aspect-ratio + object-fit:cover на разных по форме изображениях.
Фиксируем media-height и body-min-height, чтобы grid выровнял
все карточки в идеальную сетку. */
.hc-set-card {
display: flex;
flex-direction: column;
}
.hc-set-card__media {
aspect-ratio: 4 / 3;
flex-shrink: 0;
overflow: hidden;
}
.hc-set-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
padding: 14px;
mix-blend-mode: multiply;
}
.hc-set-card__body {
flex: 1;
min-height: 130px;
justify-content: space-between;
}
.hc-set-card__name {
/* tighten line-clamp to 2 lines so all cards align uniformly */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: calc(17px * 1.3 * 2);
}
/* v7.64.19 — компактная карточка рейла (variant C): ниже высота */
.pcard-stage--horizontal,.pcard-c__media-wrap{aspect-ratio:1.3}
.pcard-c__caption{display:none}
.pcard-c__title{-webkit-line-clamp:2;line-clamp:2}
.pcard-c__body{padding:12px 14px 13px;gap:4px}