/* === css/blocks/010-foundation-_misc.css === */
/* _index.css — concatenated foundation + per-BEM-block files.
* Foundation first (tokens/themes/reset/baselines), then every block
* in alphabetical order. Source of truth for each block is its own file
* under static/css/blocks/. Regenerate via build_v2_index.py. */
/* =================== foundation (_misc.css) =================== */
/* _misc.css — rules that did not classify under any BEM block.
* Review and fold into appropriate blocks over time. */
:root {--hc-paper: #ffffff; --hc-paper-2: #fafaf8; --hc-paper-3: #f2efe9; --hc-bg: #f5f2ec; --hc-bg-warm: #f0ebe1; --hc-ink: #1a1714; --hc-ink-2: #3a3128; --hc-ink-soft: rgba(26, 23, 20, .70); --hc-ink-mid: rgba(26, 23, 20, .55); --hc-ink-muted: rgba(26, 23, 20, .30); --hc-accent: #8b7355; --hc-accent-dark: #5d4d3a; --hc-accent-soft: rgba(139, 115, 85, .08); --hc-gold: #d4b896; --hc-gold-soft: rgba(212, 184, 150, .15); --hc-gold-border: rgba(212, 184, 150, .38); --hc-success: #3d6b4f; --hc-success-soft: rgba(61, 107, 79, .10); --hc-warning: #a67426; --hc-warning-soft: rgba(166, 116, 38, .10); --hc-danger: #c9433a; --hc-danger-soft: rgba(201, 67, 58, .08); --hc-info: #3a6a8a; --hc-line: rgba(26, 23, 20, .08); --hc-line-2: rgba(26, 23, 20, .15); --hc-line-strong: rgba(26, 23, 20, .22); --hc-sh-1: 0 1px 2px rgba(26, 23, 20, .04); --hc-sh-2: 0 2px 8px rgba(26, 23, 20, .06); --hc-sh-3: 0 8px 28px rgba(26, 23, 20, .08); --hc-sh-4: 0 18px 50px -30px rgba(26, 23, 20, .28); --hc-sh-card: 0 18px 50px -44px rgba(26, 23, 20, .55), 0 1px 0 rgba(255, 255, 255, .9); --hc-sh-lift: 0 30px 72px -46px rgba(26, 23, 20, .58); --hc-r-xs: 4px; --hc-r-sm: 8px; --hc-r-md: 12px; --hc-r-lg: 16px; --hc-r-xl: 20px; --hc-r-2xl: 24px; --hc-r-3xl: 32px; --hc-r-pill: 9999px; --hc-sp-1: 4px; --hc-sp-2: 8px; --hc-sp-3: 12px; --hc-sp-4: 16px; --hc-sp-5: 24px; --hc-sp-6: 32px; --hc-sp-7: 48px; --hc-sp-8: 64px; --hc-sp-9: 96px; --hc-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --hc-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --hc-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; --hc-fs-xxs: 10px; --hc-fs-xs: 11px; --hc-fs-sm: 12px; --hc-fs-md: 14px; --hc-fs-lg: 16px; --hc-fs-xl: 18px; --hc-fs-2xl: 22px; --hc-fs-3xl: 28px; --hc-fs-4xl: 36px; --hc-fs-5xl: 48px; --hc-fs-6xl: 64px; --hc-lh-tight: 1.1; --hc-lh-snug: 1.25; --hc-lh-base: 1.5; --hc-lh-loose: 1.7; --hc-ls-tight: -0.02em; --hc-ls-normal: 0; --hc-ls-wide: 0.06em; --hc-ls-ultra: 0.14em; --hc-wrap: 1280px; --hc-wrap-wide: 1440px; --hc-hdr-h: 68px; --hc-dur-fast: 140ms; --hc-dur-base: 220ms; --hc-dur-slow: 360ms; --hc-ease: cubic-bezier(0.4, 0, 0.2, 1); --hc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --hc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --hc-z-header: 50; --hc-z-drawer: 80; --hc-z-modal: 100; --hc-z-toast: 120; --hc-z-tooltip: 140}
:root[data-theme="dark"] {--hc-paper: #1a1714; --hc-paper-2: #221d18; --hc-paper-3: #2a231e; --hc-bg: #14110e; --hc-bg-warm: #1f1a16; --hc-ink: #f5f2ec; --hc-ink-2: #e0d9cc; --hc-ink-soft: rgba(245, 242, 236, 0.70); --hc-ink-mid: rgba(245, 242, 236, 0.55); --hc-ink-muted: rgba(245, 242, 236, 0.30); --hc-line: rgba(245, 242, 236, 0.08); --hc-line-2: rgba(245, 242, 236, 0.14); --hc-line-strong: rgba(245, 242, 236, 0.24); --hc-accent-soft: rgba(212, 184, 150, 0.14); --hc-gold-soft: rgba(212, 184, 150, 0.10); --hc-gold-border: rgba(212, 184, 150, 0.30)}
[data-theme="warm-sand"], :root {--hc-bg: #f8f6f3; --hc-bg-warm: #f0ebe1; --hc-paper: #ffffff; --hc-paper-2: #fafaf8; --hc-paper-3: #f2efe9; --hc-ink: #1a1714; --hc-ink-2: #3a3128; --hc-ink-soft: rgba(26, 23, 20, 0.70); --hc-ink-mid: rgba(26, 23, 20, 0.55); --hc-ink-muted: rgba(26, 23, 20, 0.30); --hc-accent: #8b7355; --hc-accent-dark: #5d4d3a; --hc-accent-soft: rgba(139, 115, 85, 0.08); --hc-gold: #d4b896; --hc-gold-soft: rgba(212, 184, 150, 0.15); --hc-gold-border: rgba(212, 184, 150, 0.38); --hc-success: #3d6b4f; --hc-success-soft: rgba(61, 107, 79, 0.10); --hc-line: rgba(26, 23, 20, 0.08); --hc-line-2: rgba(26, 23, 20, 0.15); --hc-line-strong: rgba(26, 23, 20, 0.22); --hc-hero-grad: linear-gradient(160deg, #f3e9d6 0%, #e8dfd0 100%); --hc-cat-feat-grad: linear-gradient(160deg, #f3e9d6 0%, #e8dfd0 100%); --hc-cat-feat-hover-grad: linear-gradient(160deg, #ede2c9 0%, #d4b896 100%); --hc-b2b-grad: linear-gradient(135deg, #2c2820 0%, #4a3f30 100%); --hc-glow-color: rgba(212, 184, 150, 0.28); --hc-shadow-warm: 0 30px 80px -20px rgba(139, 115, 85, 0.30)}
[data-theme="midnight-brass"] {--hc-bg: #14110e; --hc-bg-warm: #1f1a16; --hc-paper: #221d18; --hc-paper-2: #2a2520; --hc-paper-3: #322b25; --hc-ink: #f5f0e8; --hc-ink-2: #e0d9cc; --hc-ink-soft: rgba(245, 240, 232, 0.72); --hc-ink-mid: rgba(245, 240, 232, 0.55); --hc-ink-muted: rgba(245, 240, 232, 0.30); --hc-accent: #d4b896; --hc-accent-dark: #b8966a; --hc-accent-soft: rgba(212, 184, 150, 0.10); --hc-gold: #d4b896; --hc-gold-soft: rgba(212, 184, 150, 0.10); --hc-gold-border: rgba(212, 184, 150, 0.30); --hc-success: #6ba480; --hc-success-soft: rgba(107, 164, 128, 0.15); --hc-line: rgba(245, 240, 232, 0.08); --hc-line-2: rgba(245, 240, 232, 0.14); --hc-line-strong: rgba(245, 240, 232, 0.24); --hc-hero-grad: linear-gradient(160deg, #2a2520 0%, #3d3329 100%); --hc-cat-feat-grad: linear-gradient(160deg, #2a2520 0%, #3d3329 100%); --hc-cat-feat-hover-grad: linear-gradient(160deg, #3d3329 0%, #5a4a3a 100%); --hc-b2b-grad: linear-gradient(135deg, #d4b896 0%, #b8966a 100%); --hc-glow-color: rgba(212, 184, 150, 0.35); --hc-shadow-warm: 0 30px 80px -20px rgba(0, 0, 0, 0.55)}
[data-theme="champagne-gold"] {--hc-bg: #fafaf7; --hc-bg-warm: #f5f1e8; --hc-paper: #ffffff; --hc-paper-2: #fbf9f3; --hc-paper-3: #f3eee0; --hc-ink: #2a2520; --hc-ink-2: #3d3329; --hc-ink-soft: rgba(42, 37, 32, 0.72); --hc-ink-mid: rgba(42, 37, 32, 0.55); --hc-ink-muted: rgba(42, 37, 32, 0.28); --hc-accent: #c9a961; --hc-accent-dark: #a8893f; --hc-accent-soft: rgba(201, 169, 97, 0.10); --hc-gold: #d4b061; --hc-gold-soft: rgba(212, 176, 97, 0.16); --hc-gold-border: rgba(212, 176, 97, 0.42); --hc-success: #4a7858; --hc-success-soft: rgba(74, 120, 88, 0.10); --hc-line: rgba(42, 37, 32, 0.07); --hc-line-2: rgba(42, 37, 32, 0.14); --hc-line-strong: rgba(42, 37, 32, 0.22); --hc-hero-grad: linear-gradient(160deg, #f7f0d9 0%, #e8d8a8 100%); --hc-cat-feat-grad: linear-gradient(160deg, #f7f0d9 0%, #e8d8a8 100%); --hc-cat-feat-hover-grad: linear-gradient(160deg, #f0e3b0 0%, #c9a961 100%); --hc-b2b-grad: linear-gradient(135deg, #2a2520 0%, #3d3329 100%); --hc-glow-color: rgba(212, 176, 97, 0.32); --hc-shadow-warm: 0 30px 80px -20px rgba(168, 137, 63, 0.28)}
[data-theme="forest-premium"] {--hc-bg: #f4f3ec; --hc-bg-warm: #e8e8d8; --hc-paper: #ffffff; --hc-paper-2: #fafaf2; --hc-paper-3: #ededdc; --hc-ink: #1d2418; --hc-ink-2: #2c3826; --hc-ink-soft: rgba(29, 36, 24, 0.72); --hc-ink-mid: rgba(29, 36, 24, 0.55); --hc-ink-muted: rgba(29, 36, 24, 0.30); --hc-accent: #5a7a5a; --hc-accent-dark: #3d5a3d; --hc-accent-soft: rgba(90, 122, 90, 0.10); --hc-gold: #c9a961; --hc-gold-soft: rgba(201, 169, 97, 0.14); --hc-gold-border: rgba(201, 169, 97, 0.38); --hc-success: #5a7a5a; --hc-success-soft: rgba(90, 122, 90, 0.12); --hc-line: rgba(29, 36, 24, 0.08); --hc-line-2: rgba(29, 36, 24, 0.15); --hc-line-strong: rgba(29, 36, 24, 0.24); --hc-hero-grad: linear-gradient(160deg, #d8e0c8 0%, #b8c8a0 100%); --hc-cat-feat-grad: linear-gradient(160deg, #d8e0c8 0%, #b8c8a0 100%); --hc-cat-feat-hover-grad: linear-gradient(160deg, #b8c8a0 0%, #5a7a5a 100%); --hc-b2b-grad: linear-gradient(135deg, #1d2418 0%, #2c3826 100%); --hc-glow-color: rgba(201, 169, 97, 0.30); --hc-shadow-warm: 0 30px 80px -20px rgba(61, 90, 61, 0.30)}
[data-theme="bordeaux-lux"] {--hc-bg: #f5f0ea; --hc-bg-warm: #ede2d4; --hc-paper: #ffffff; --hc-paper-2: #faf3eb; --hc-paper-3: #f0e3d2; --hc-ink: #2a1818; --hc-ink-2: #3d2828; --hc-ink-soft: rgba(42, 24, 24, 0.72); --hc-ink-mid: rgba(42, 24, 24, 0.55); --hc-ink-muted: rgba(42, 24, 24, 0.30); --hc-accent: #8b3a3a; --hc-accent-dark: #6b2828; --hc-accent-soft: rgba(139, 58, 58, 0.08); --hc-gold: #c9a961; --hc-gold-soft: rgba(201, 169, 97, 0.14); --hc-gold-border: rgba(201, 169, 97, 0.38); --hc-success: #4a7858; --hc-success-soft: rgba(74, 120, 88, 0.10); --hc-line: rgba(42, 24, 24, 0.08); --hc-line-2: rgba(42, 24, 24, 0.15); --hc-line-strong: rgba(42, 24, 24, 0.24); --hc-hero-grad: linear-gradient(160deg, #f0d8c0 0%, #d8a890 100%); --hc-cat-feat-grad: linear-gradient(160deg, #f0d8c0 0%, #c89888 100%); --hc-cat-feat-hover-grad: linear-gradient(160deg, #c89888 0%, #8b3a3a 100%); --hc-b2b-grad: linear-gradient(135deg, #2a1818 0%, #3d2828 100%); --hc-glow-color: rgba(139, 58, 58, 0.28); --hc-shadow-warm: 0 30px 80px -20px rgba(107, 40, 40, 0.30)}
[data-theme="onyx-pearl"] {--hc-bg: #fbfaf8; --hc-bg-warm: #f4f1ea; --hc-paper: #ffffff; --hc-paper-2: #faf8f3; --hc-paper-3: #f0ede5; --hc-ink: #0a0a0a; --hc-ink-2: #1a1a1a; --hc-ink-soft: rgba(10, 10, 10, 0.72); --hc-ink-mid: rgba(10, 10, 10, 0.55); --hc-ink-muted: rgba(10, 10, 10, 0.30); --hc-accent: #1a1a1a; --hc-accent-dark: #000000; --hc-accent-soft: rgba(10, 10, 10, 0.06); --hc-gold: #b8a48f; --hc-gold-soft: rgba(184, 164, 143, 0.14); --hc-gold-border: rgba(184, 164, 143, 0.38); --hc-success: #2c5a3a; --hc-success-soft: rgba(44, 90, 58, 0.08); --hc-line: rgba(10, 10, 10, 0.07); --hc-line-2: rgba(10, 10, 10, 0.14); --hc-line-strong: rgba(10, 10, 10, 0.24); --hc-hero-grad: linear-gradient(160deg, #ede9e0 0%, #d4cfc4 100%); --hc-cat-feat-grad: linear-gradient(160deg, #ede9e0 0%, #c8c4b8 100%); --hc-cat-feat-hover-grad: linear-gradient(160deg, #c8c4b8 0%, #1a1a1a 100%); --hc-b2b-grad: linear-gradient(135deg, #0a0a0a 0%, #2a2520 100%); --hc-glow-color: rgba(184, 164, 143, 0.30); --hc-shadow-warm: 0 30px 80px -20px rgba(0, 0, 0, 0.40)}
:root {
--cookie-banner-h: 96px;
--gx: 50%;
--gy: 50%;
--parallaxY: 0px;
--hc-bg-2: var(--hc-paper-3);
--hc-font: var(--hc-sans);
--hc-gold-1: #d4b896;
--hc-gold-2: #b8966a;
--hc-green: #3d6b4f;
--hc-muted: rgba(26, 23, 20, 0.66);
--hc-red: #8b3a2e;
--sf-gold: #b8966a;
--sf-red: #8b3a2e;
}
*, *::before, *::after {box-sizing: border-box}
* {margin: 0; padding: 0}
html {-webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; overflow-x: hidden}
html, body {margin: 0; padding: 0; background: #f5f2ec; color: #1a1714; font-family: 'Outfit',-apple-system,BlinkMacSystemFont,sans-serif}
html {min-height: 100%}
body {min-height: 100vh; display: flex; flex-direction: column; font-family: var(--hc-sans); font-size: var(--hc-fs-md); line-height: var(--hc-lh-base); color: var(--hc-ink); background: var(--hc-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-y: visible}
body > main {flex: 1 0 auto}
body > .hc-ftr, body > footer {flex-shrink: 0; margin-top: auto}
h1, h2, h3, h4, h5, h6 {font-family: var(--hc-serif); font-weight: 500; line-height: var(--hc-lh-tight); letter-spacing: var(--hc-ls-tight); color: var(--hc-ink); font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "ss01" 1; font-optical-sizing: auto; font-variant-ligatures: common-ligatures contextual; text-rendering: geometricPrecision}
h1 {font-size: var(--hc-fs-4xl); letter-spacing: -0.024em}
h2 {font-size: var(--hc-fs-3xl); letter-spacing: -0.018em}
h3 {font-size: var(--hc-fs-2xl); letter-spacing: -0.012em}
h4 {font-size: var(--hc-fs-xl)}
h5 {font-size: var(--hc-fs-lg)}
h6 {font-size: var(--hc-fs-md); font-family: var(--hc-sans); text-transform: uppercase; letter-spacing: var(--hc-ls-wide)}
p {line-height: var(--hc-lh-base)}
small {font-size: var(--hc-fs-xs)}
code, kbd, samp, pre {font-family: var(--hc-mono); font-size: 0.94em}
strong, b {font-weight: 600}
em, i {font-style: italic}
a {color: inherit; text-decoration: none; transition: color var(--hc-dur-fast) var(--hc-ease)}
a:hover {color: var(--hc-accent)}
img, video, svg {display: block; max-width: 100%; height: auto}
svg {fill: currentColor}
button, input, select, textarea {font: inherit; color: inherit}
button {background: transparent; border: 0; cursor: pointer}
input, textarea, select {background: transparent; border: 0}
textarea {resize: vertical}
:focus {outline: none}
:focus-visible {outline: 2px solid var(--hc-accent); outline-offset: 2px; border-radius: var(--hc-r-sm)}
::selection {background: var(--hc-gold-soft); color: var(--hc-ink)}
::-webkit-scrollbar {width: 10px; height: 10px}
::-webkit-scrollbar-track {background: transparent}
::-webkit-scrollbar-thumb {background: var(--hc-line-2); border-radius: var(--hc-r-pill); border: 2px solid transparent; background-clip: padding-box}
::-webkit-scrollbar-thumb:hover {background: var(--hc-line-strong); background-clip: padding-box; border: 2px solid transparent}
[x-cloak] {display: none}
[data-fx-glow] {position: relative; isolation: isolate}
[data-fx-glow]::before {content: ""; position: absolute; inset: 0; background: radial-gradient(
420px circle at var(--gx, 50%) var(--gy, 50%),
rgba(199, 155, 96, 0.14),
transparent 55%
); opacity: 0; transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 0; border-radius: inherit}
[data-fx-glow]:hover::before {opacity: 1}
[data-fx-glow] > * {position: relative; z-index: 1}
[data-fx-img-lift] img {transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
filter 0.4s ease}
[data-fx-img-lift]:hover img {transform: scale(1.04); filter: brightness(1.02) saturate(1.05)}
[hx-trigger="load"]:empty, [hx-get]:empty {min-height: 80px; background: linear-gradient(
90deg,
rgba(248, 244, 237, 0.3),
rgba(248, 244, 237, 0.7),
rgba(248, 244, 237, 0.3)
); background-size: 200% 100%; animation: hz-skeleton-shimmer 1.4s ease-in-out infinite; border-radius: 8px}
[data-fav-stat-num] {margin-right: 4px}
input[type="hidden"] {display: none}
[class*="stat"] strong, [class*="kpi"] strong, [class*="facts"] strong, .premium-surface > div > strong + span, .premium-surface > div > b + small {display: block}
[data-fx-parallax] {transform: translate3d(0, var(--parallaxY, 0px), 0); will-change: transform; transition: none}
[data-phone-reveal] {cursor: pointer; display: inline-flex; align-items: center; gap: 8px; position: relative}
[data-fx-draw] path, [data-fx-draw] circle, [data-fx-draw] line {stroke-dasharray: 100%; stroke-dashoffset: 100%}
@media(max-width:1024px) { section + section, .hc-sec + .hc-sec {position: relative} }
@keyframes hcToastIn { from { transform: translateY(20px); opacity: 0; } }
@keyframes hcToastIn { to { transform: translateY(0); opacity: 1; } }
@keyframes hcSpin { to { transform: rotate(360deg); } }
@keyframes hcSkel { 0% { background-position: 200% 0; } }
@keyframes hcSkel { 100% { background-position: -200% 0; } }
@keyframes hcShimmer { 0% { background-position: 100% 0; } }
@keyframes hcShimmer { 100% { background-position: -100% 0; } }
@keyframes hcFadeIn { from { opacity: 0; } }
@keyframes hcFadeIn { to { opacity: 1; } }
@keyframes hcSlideUp { from { opacity: 0; transform: translateY(20px) scale(.98); } }
@keyframes hcSlideUp { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hcPulse { 0%,100% {opacity:1} }
@keyframes hcPulse { 50% {opacity:.4} }
@keyframes hc-empty-float { 0%, 100% {
transform: translateY(0);
box-shadow: 0 10px 24px rgba(27, 20, 13, 0.10);
} }
@keyframes hc-empty-float { 50% {
transform: translateY(-4px);
box-shadow: 0 16px 30px rgba(27, 20, 13, 0.16);
} }
@keyframes hcFloat { 0%,100% {transform:translateY(0)} }
@keyframes hcFloat { 50% {transform:translateY(-10px)} }
@keyframes hzTileFloat { 0%, 100% { transform: translateY(0); } }
@keyframes hzTileFloat { 50% { transform: translateY(-2.5px); } }
@keyframes hz-orb-float { 0%, 100% { transform: translate(0, 0); } }
@keyframes hz-orb-float { 50% { transform: translate(3%, -4%); } }
@keyframes hcPhSpin { from { transform: rotate(0); } }
@keyframes hcPhSpinR { from { transform: rotate(360deg); } }
@keyframes hcPhSpinR { to { transform: rotate(0); } }
@keyframes hcPhDot { 0%,100% { r: 2; opacity: 0.85; } }
@keyframes hcPhDot { 50% { r: 2.8; opacity: 1; } }
@keyframes hcPhSchema { 0%,100% { opacity: 0.7; } }
@keyframes hcPhSchema { 50% { opacity: 1; } }
@keyframes hc-svg-draw { from { stroke-dashoffset: 100%; } }
@keyframes hc-svg-draw { to { stroke-dashoffset: 0; } }
@keyframes hc-float-y { 50% { transform: translateY(-6px); } }
@keyframes hc-pulse-glow { 0%, 100% { opacity: 0.55; transform: scale(1); } }
@keyframes hc-pulse-glow { 50% { opacity: 1; transform: scale(1.04); } }
@keyframes hc-orbit { from { transform: rotate(0deg) translateX(var(--orbit-r, 40px)) rotate(0deg); } }
@keyframes hc-orbit { to { transform: rotate(360deg) translateX(var(--orbit-r, 40px)) rotate(-360deg); } }
@keyframes hc-isearch-pop { from { transform: translateY(-12px) scale(0.98); opacity: 0; } }
@keyframes hc-isearch-pop { to { transform: none; opacity: 1; } }
@keyframes hc-livechat-pop { from { transform: scale(0.92) translateY(10px); opacity: 0; } }
@keyframes hcHingeSwing { 0%, 15% { transform: rotate(0deg); } }
@keyframes hcHingeSwing { 45%, 60% { transform: rotate(-108deg); } }
@keyframes hcHingeSwing { 92%, 100% { transform: rotate(0deg); } }
@keyframes hcDrawerSlide { 0%, 10% { transform: translateX(0); } }
@keyframes hcDrawerSlide { 45%, 55% { transform: translateX(140px); } }
@keyframes hcDrawerSlide { 90%, 100% { transform: translateX(0); } }
@keyframes hcMotionFade { 0%, 10% { opacity: 0.5; } }
@keyframes hcMotionFade { 45%, 55% { opacity: 0; } }
@keyframes hcMotionFade { 90%, 100% { opacity: 0.5; } }
@keyframes hcLiftRaise { 0%, 12% { transform: rotate(0deg); } }
@keyframes hcLiftRaise { 42%, 58% { transform: rotate(-85deg); } }
@keyframes hcLiftRaise { 88%, 100% { transform: rotate(0deg); } }
@keyframes hcRailSlide { 45%, 55% { transform: translateX(110px); } }
@keyframes hcTipOnPush { 0%, 25% { transform: translate(0, 0); opacity: 0; } }
@keyframes hcTipOnPush { 30%, 40% { transform: translate(0, -12px); opacity: 1; } }
@keyframes hcTipOnPush { 45%, 50% { transform: translate(0, 0); opacity: 0.7; } }
@keyframes hcTipOnPush { 55%, 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes hcTipOnSpring { 0%, 48% { transform: translateX(0); } }
@keyframes hcTipOnSpring { 52%, 75% { transform: translateX(30px); } }
@keyframes hcTipOnSpring { 85%, 100% { transform: translateX(0); } }
@keyframes hcCatGlow { 0%, 100% { opacity: 0.3; transform: scale(1); } }
@keyframes hcCatGlow { 50% { opacity: 0.7; transform: scale(1.05); } }
@keyframes hcCatPulse { 0%, 100% { opacity: 1; transform: scale(1); } }
@keyframes hcCatPulse { 50% { opacity: 0.8; transform: scale(1.08); } }
@keyframes hcCatArm { 0%, 85% { transform: rotate(0deg); } }
@keyframes hcCatArm { 92%, 100% { transform: rotate(-4deg); } }
@keyframes hcCatAvntos { 0%, 18% { transform: rotate(0deg); } }
@keyframes hcCatAvntos { 48%, 62% { transform: rotate(-70deg); } }
@keyframes hcCatTipOnDrawer { 0%, 45% { transform: translateX(0); } }
@keyframes hcCatTipOnDrawer { 55%, 70% { transform: translateX(32px); } }
@keyframes hcCatPush { 0%, 30% { opacity: 0; transform: translate(0, 0); } }
@keyframes hcCatPush { 40%, 50% { opacity: 1; transform: translate(0, -8px); } }
@keyframes hcCatPush { 58%, 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes hcCatBearings { 0%, 100% { opacity: 1; } }
@keyframes hcCatBearings { 50% { opacity: 0.65; } }
@keyframes hcCatShimmer { 0%, 100% { opacity: 0.5; } }
@keyframes hcCatShimmer { 50% { opacity: 0.85; } }
@keyframes hcCatArrow { 0%, 30% { opacity: 0.5; transform: translateX(0); } }
@keyframes hcCatArrow { 50% { opacity: 1; transform: translateX(8px); } }
@keyframes hcCatArrow { 70%, 100% { opacity: 0.5; transform: translateX(0); } }
@keyframes hcCatLed { 0%, 100% { fill: #3d6b4f; } }
@keyframes hcCatLed { 50% { fill: #7dbf96; } }
@keyframes hcCatCable { 0%, 100% { stroke-dashoffset: 0; } }
@keyframes hcCatCable { 50% { stroke-dashoffset: 8; } }
@keyframes hcCatSpin { 0% { transform: rotate(0deg); } }
@keyframes hcCatSpin { 100% { transform: rotate(360deg); } }
:root {--sf-ink: #1a1714;
--sf-muted: rgba(26, 23, 20, 0.66);
--sf-line: rgba(139, 115, 85, 0.24);
--sf-line-strong: rgba(139, 115, 85, 0.36);
--sf-paper: #ffffff;
--sf-soft: #f8f3e8;
--sf-radius-xl: 24px;
--sf-radius-lg: 18px;
--sf-radius-md: 14px;
--sf-shadow: 0 24px 56px -36px rgba(27, 20, 13, 0.34);}
@keyframes hc-hero-pulse { 0%, 100% { opacity: 1; transform: scale(1); } }
@keyframes hc-hero-pulse { 50% { opacity: 0.5; transform: scale(1.3); } }
@keyframes hc-pcard-stock-pulse { 0%, 100% { opacity: 1; transform: scale(1); } }
@keyframes hc-pcard-stock-pulse { 50% { opacity: 0.55; transform: scale(1.4); } }
@keyframes hc-fx-auto-reveal { to { opacity: 1; transform: none; } }
@keyframes hcCheckDraw { to { stroke-dashoffset:0; } }
@keyframes hcTimelinePulse { 0% { transform:scale(0.6); opacity:0.7; } }
@keyframes hcTimelinePulse { 100% { transform:scale(1.6); opacity:0; } }
:root {
--sp-4: 4px;
--sp-6: 6px;
--sp-8: 8px;
--sp-10: 10px;
--sp-12: 12px;
--sp-16: 16px;
--sp-20: 20px;
--sp-24: 24px;
--sp-32: 32px;
--sp-48: 48px;
--sp-64: 64px;
--fs-11: 11px;
--fs-12: 12px;
--fs-13: 13px;
--fs-14: 14px;
--fs-15: 15px;
--fs-16: 16px;
--fs-18: 18px;
--fs-20: 20px;
--fs-24: 24px;
--fs-32: 32px;
--fs-40: 40px;
--fs-48: 48px;
--fs-52: 52px;
--fw-400: 400;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;
--lh-1: 1;
--lh-1-1: 1.1;
--lh-1-2: 1.2;
--lh-1-4: 1.4;
--lh-1-5: 1.5;
--lh-1-6: 1.6;
--c-primary: #1a1716;
--c-primary-dark: #0f0d0b;
--c-primary-light: #2d2420;
--c-white: #fffcf7;
--c-bg: #f3f1ef;
--c-bg-light: #fafaf8;
--c-border: #e8e4e0;
--c-text: #1a1716;
--c-text-secondary: #6b6258;
--c-text-muted: #a6a29c;
--c-success: #3d6b4f;
--c-warning: #b8731c;
--c-error: #d63031;
--c-error-light: #ff7675;
--c-accent: #d4af37;
--c-accent-warm: #8b7355;
--sh-sm: 0 2px 8px rgba(27, 20, 13, 0.06);
--sh-md: 0 4px 16px rgba(27, 20, 13, 0.10);
--sh-lg: 0 8px 24px rgba(27, 20, 13, 0.12);
--sh-xl: 0 12px 32px rgba(27, 20, 13, 0.15);
--sh-2xl: 0 16px 48px rgba(27, 20, 13, 0.18);
--tr-fast: 0.15s ease-out;
--tr-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--tr-slow: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
--br-4: 4px;
--br-6: 6px;
--br-8: 8px;
--br-12: 12px;
--br-16: 16px;
--br-full: 9999px;
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 1000;
}
@keyframes badgePulse { 0%, 100% {
box-shadow: 0 2px 8px rgba(214, 48, 49, 0.3);
} }
@keyframes badgePulse { 50% {
box-shadow: 0 4px 12px rgba(214, 48, 49, 0.5);
} }
@keyframes salePulse { 0%, 100% { background: linear-gradient(90deg, transparent 0%, rgba(214, 48, 49, 0.05) 100%); } }
@keyframes salePulse { 50% { background: linear-gradient(90deg, transparent 0%, rgba(214, 48, 49, 0.10) 100%); } }
@keyframes pulse { 0%, 100% { opacity: 1; } }
@keyframes pulse { 50% { opacity: 0.5; } }
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
width: 100%;
padding: var(--sp-12) var(--sp-16);
border: 1px solid var(--c-border);
border-radius: var(--br-8);
font-size: var(--fs-16);
line-height: var(--lh-1-5);
font-family: inherit;
color: var(--c-text);
background: var(--c-white);
transition: all var(--tr-fast);
will-change: border-color, box-shadow;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px rgba(26, 23, 20, 0.06);
background: var(--c-white);
}
input::placeholder {
color: var(--c-text-muted);
}
@keyframes slideIn { from { width: 0; } }
@keyframes slideIn { to { width: 100%; } }
@keyframes hcFloat { 0%, 100% {
transform: translateY(0) translateZ(0);
} }
@keyframes hcFloat { 50% {
transform: translateY(-12px) translateZ(20px);
} }
@keyframes hcModalFadeIn { from {
opacity: 0;
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
} }
@keyframes hcModalFadeIn { to {
opacity: 1;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
} }
@keyframes hcModalSlideUp { from {
transform: translateY(40px) scale(0.95);
opacity: 0;
} }
@keyframes hcModalSlideUp { to {
transform: translateY(0) scale(1);
opacity: 1;
} }
@keyframes hcTabSlide { from {
width: 0;
left: 50%;
right: 50%;
} }
@keyframes hcTabSlide { to {
width: 100%;
left: 0;
right: 0;
} }
@keyframes hcGlowPulse { 0%, 100% {
text-shadow: 0 0 20px rgba(139, 115, 85, 0.3);
} }
@keyframes hcGlowPulse { 50% {
text-shadow: 0 0 30px rgba(139, 115, 85, 0.6);
} }
@keyframes hcShimmer { 0% {
background-position: -200% 0;
} }
@keyframes hcShimmer { 100% {
background-position: 200% 0;
} }
@keyframes hcPulseDot { 0% {
box-shadow: 0 0 0 0 rgba(61, 107, 79, 0.7);
} }
@keyframes hcPulseDot { 70% {
box-shadow: 0 0 0 10px rgba(61, 107, 79, 0);
} }
@keyframes hcPulseDot { 100% {
box-shadow: 0 0 0 0 rgba(61, 107, 79, 0);
} }
*:focus-visible {
outline: 2px solid var(--c-primary);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
} }
@keyframes hcModalFade { from { opacity: 0; } }
@keyframes hcModalFade { to { opacity: 1; } }
@keyframes hcModalRise { from { transform: translateY(20px) scale(0.98); opacity: 0; } }
@keyframes hcModalRise { to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes hcBlogRotate { from { transform: rotate(0deg); } }
@keyframes hcBlogRotate { to { transform: rotate(360deg); } }
@keyframes hcOrbitFloat { 0%, 100% { transform: scale(1); opacity: 0.7; } }
@keyframes hcOrbitFloat { 50% { transform: scale(1.4); opacity: 1; } }
@keyframes hcHaloPulse { 0%, 100% { transform: scale(1); opacity: 0.6; } }
@keyframes hcHaloPulse { 50% { transform: scale(1.08); opacity: 1; } }
@keyframes hc-acc-fade { from { opacity: 0; transform: translateY(-4px); } }
@keyframes hc-acc-fade { to { opacity: 1; transform: translateY(0); } }
[x-cloak] { display: none !important; }
@keyframes hc-pcard-stock-pulse { 0%, 100% { opacity: 1; } }
@keyframes hc-pcard-stock-pulse { 50% { opacity: 0.35; } }
@keyframes hc-isearch-shimmer { 0% { background-position: -220px 0; } }
@keyframes hc-isearch-shimmer { 100% { background-position: calc(100% + 220px) 0; } }
/* ---- folded from 084-hc-countup.css ---- */
/* =================== hc-countup.css =================== */
.hc-countup {font-variant-numeric: tabular-nums}
/* ---- folded from 112-hc-muted.css ---- */
.hc-muted {color: var(--hc-ink-mid)}
@media(max-width:1024px) {
.page-favorites .hc-muted {font-size: 15px; line-height: 1.55; max-width: 64ch; margin: 0 0 32px}
}
/* ---- folded from 153-hc-spinner.css ---- */
.hc-spinner {width: 18px; height: 18px; border: 2px solid var(--hc-line-2); border-top-color: var(--hc-accent); border-radius: 50%; animation: hcSpin 700ms linear infinite}
/* === css/blocks/243-cookie-banner.css === */
/* 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: calc(var(--cookie-banner-h, 96px) + 12px);
}
.cookie-banner__inner {
width: min(360px, calc(100vw - 28px));
display: grid;
grid-template-columns: 1fr;
gap: 10px;
align-items: start;
padding: 10px;
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: calc(var(--cookie-banner-h, 132px) + 10px);
}
.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;
}
}
/* === css/blocks/012-auth-premium.css === */
/* =================== auth-premium.css =================== */
/* auth-premium — premium auth page layout (2-col: form panel + value-prop
* aside with benefits list). Single source of truth.
*
* NB: previously every rule was wrapped in `@media(max-width:1024px)`,
* which silently hid the 2-col grid on desktop. Rules moved to base scope. */
.auth-premium {
padding: clamp(40px, 5vw, 80px) 0;
}
.auth-premium__grid {
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(260px, 320px);
gap: clamp(28px, 3vw, 52px);
align-items: start;
max-width: 1160px;
margin: 0 auto;
}
.auth-premium__panel {
padding: clamp(28px, 3vw, 40px);
background: var(--hc-paper, #ffffff);
border: 0.5px solid var(--hc-gold-border, rgba(180, 151, 115, 0.32));
border-radius: 18px;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 24px 60px -28px rgba(27, 20, 13, 0.18);
}
.auth-premium__aside {
padding: clamp(24px, 2.6vw, 36px);
background: linear-gradient(135deg, rgba(255, 252, 247, 0.95), rgba(248, 244, 237, 0.86));
border: 0.5px solid rgba(180, 151, 115, 0.22);
border-radius: 18px;
position: relative;
isolation: isolate;
overflow: hidden;
}
.auth-premium__aside::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(540px 280px at 80% -20%, rgba(212, 184, 150, 0.30), transparent 60%);
pointer-events: none;
}
.auth-premium__benefits {
list-style: none;
padding: 0;
margin: 16px 0 0;
display: grid;
gap: 10px;
}
.auth-premium__benefits li {
position: relative;
padding-left: 28px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13.5px;
line-height: 1.5;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72));
}
.auth-premium__benefits li strong {
display: block;
font-weight: 600;
color: var(--hc-ink, #1a1714);
}
.auth-premium__benefits li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 18px;
height: 18px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.32), rgba(184, 154, 111, 0.14));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.45));
border-radius: 50%;
}
.auth-premium__benefits li::after {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 18px;
height: 18px;
background-color: var(--hc-accent-dark, #7a6548);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 10px 10px;
mask-size: 10px 10px;
}
.auth-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.auth-consent {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 12px 0 18px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13px;
line-height: 1.45;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.74));
}
.auth-consent input[type="checkbox"] {
margin-top: 2px;
inline-size: 16px;
block-size: 16px;
accent-color: var(--hc-accent, #8b7355);
}
.auth-consent a {
color: var(--hc-accent-dark, #6a573f);
text-decoration: underline;
}
.auth-consent--compact {
margin: 6px 0 14px;
}
@media (max-width: 768px) {
.auth-premium__grid {
grid-template-columns: 1fr;
gap: var(--hc-sp-4);
}
}
/* === css/blocks/013-auth.css === */
/* auth base primitives used by premium auth layout and account forms */
.auth__form {
max-width: 480px;
margin: var(--hc-sp-5) auto;
display: grid;
gap: 14px;
}
.tracking-premium__grid > .auth__form {
margin: 0;
max-width: none;
width: auto;
}
.auth__err {
padding: var(--hc-sp-3);
background: var(--hc-danger-soft);
color: var(--hc-danger);
border-radius: var(--hc-r-sm);
margin-bottom: var(--hc-sp-3);
font-size: var(--hc-fs-sm);
}
.auth__alt {
margin-top: 10px;
padding-top: 10px;
border-top: 0.5px solid rgba(180, 151, 115, 0.18);
text-align: center;
font-size: 13px;
color: rgba(26, 23, 20, 0.65);
}
.auth__alt a {
color: var(--hc-accent, #8b7355);
text-decoration: underline;
}
.auth__sep {
margin-top: 6px;
padding-top: 10px;
border-top: 0.5px solid rgba(180, 151, 115, 0.18);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(26, 23, 20, 0.58);
}
.auth__grid2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 480px) {
.auth__grid2 {
grid-template-columns: 1fr;
}
}
/* === css/blocks/015-bc.css === */
/* =================== bc.css =================== */
.bc {display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--hc-fs-sm); color: var(--hc-ink-mid); margin-bottom: var(--hc-sp-4)}
.bc a {color: var(--hc-ink-soft); text-decoration: none}
.bc a:hover {color: var(--hc-accent-dark); text-decoration: underline}
.bc__sep {color: var(--hc-ink-muted)}
@media(max-width:1024px) {
.page-favorites .bc {font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-ink-mid, rgba(26, 23, 20, 0.5)); margin-bottom: 20px}
}
/* === css/blocks/028-ed.css === */
/* =================== ed.css =================== */
.ed__list {list-style: none; padding: 0; margin: 0; counter-reset: ed-counter; padding-left: 1.4em; line-height: 1.7}
.ed__list li {counter-increment: ed-counter; padding: 8px 0 8px 32px; position: relative; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7)); font-size: 14px; line-height: 1.55; margin-bottom: 0.4em}
.ed__list li::before {content: counter(ed-counter) "."; position: absolute; left: 0; top: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; color: var(--hc-accent, #8b7355)}
/* === css/blocks/029-editorial.css === */
/* =================== editorial.css =================== */
/* editorial — premium typography for legal / static pages (privacy, terms,
* blog posts). Wraps the article in serif headings, hierarchical heading
* accents, premium dash-list / numbered-list, and TOC sidebar.
*
* NB: rules were previously wrapped in `@media(max-width:1024px)`, which
* silently hid all typography on desktop. Moved to base scope. */
.editorial {
max-width: 760px;
margin: 0 auto;
padding: clamp(32px, 4vw, 56px) 0;
}
.editorial > .bc a,
.editorial > nav.bc a {
color: var(--hc-accent-dark, #5d4d3a);
text-decoration: none;
border-bottom: 0.5px solid transparent;
transition: border-color 0.2s ease;
}
.editorial > .bc a:hover { border-bottom-color: var(--hc-accent-dark, #5d4d3a); }
.editorial h1 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(32px, 4vw, 48px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 24px;
color: var(--hc-ink, #1a1714);
}
.editorial h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(22px, 2.5vw, 28px);
font-weight: 400;
line-height: 1.2;
margin: 40px 0 14px;
color: var(--hc-ink, #1a1714);
position: relative;
padding-top: 24px;
}
.editorial h2::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 1px;
background: var(--hc-accent, #8b7355);
}
.editorial h3 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 18px;
font-weight: 500;
margin: 28px 0 10px;
color: var(--hc-ink, #1a1714);
}
.editorial p {
font-size: 15px;
line-height: 1.65;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
margin: 0 0 14px;
max-width: 68ch;
}
.editorial ul {
list-style: none;
padding: 0;
margin: 14px 0 22px;
}
.editorial ul:not(.ed__list) li {
position: relative;
padding: 6px 0 6px 24px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
font-size: 15px;
line-height: 1.6;
}
.editorial ul:not(.ed__list) li::before {
content: "—";
position: absolute;
left: 0;
top: 6px;
color: var(--hc-accent, #8b7355);
font-weight: 500;
}
.editorial ul.ed__list li {
counter-increment: ed-counter;
padding: 8px 0 8px 36px;
position: relative;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
font-size: 15px;
line-height: 1.6;
}
.editorial ul.ed__list li::before {
content: counter(ed-counter) ".";
position: absolute;
left: 0;
top: 8px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 500;
color: var(--hc-accent, #8b7355);
}
.editorial ol {
padding-left: 24px;
margin: 14px 0 22px;
}
.editorial ol li {
font-size: 15px;
line-height: 1.65;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
padding-left: 8px;
margin-bottom: 8px;
}
.editorial ol li::marker {
color: var(--hc-accent, #8b7355);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-weight: 500;
}
.editorial a {
color: var(--hc-accent-dark, #5d4d3a);
text-decoration: none;
border-bottom: 0.5px solid var(--hc-accent, #8b7355);
transition: color 0.2s ease, border-color 0.2s ease;
}
.editorial a:hover {
color: var(--hc-ink, #1a1714);
border-color: var(--hc-ink, #1a1714);
}
.editorial strong,
.editorial b {
color: var(--hc-ink, #1a1714);
font-weight: 500;
}
.editorial__body {
font-size: 15px;
line-height: 1.7;
color: rgba(26, 23, 20, 0.78);
}
.editorial__body h2,
.editorial__body h3 {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-weight: 500;
color: var(--hc-ink, #1a1714);
margin: 1.6em 0 0.5em;
}
.editorial__body h2 { font-size: 22px; }
.editorial__body h3 { font-size: 17px; }
.editorial__body p { margin: 0 0 1em; }
.editorial__body a {
color: var(--hc-accent, #8b7355);
text-decoration: underline;
}
/* ─── Premium with-TOC variant (privacy / terms) ─── */
.editorial--with-toc {
max-width: 1100px;
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: clamp(28px, 3vw, 48px);
align-items: start;
}
.editorial--with-toc > nav.bc,
.editorial--with-toc > .editorial__meta {
grid-column: 1 / -1;
}
.editorial__toc {
position: sticky;
top: 24px;
align-self: start;
padding: 14px 0;
border-left: 0.5px solid rgba(141, 109, 71, 0.22);
}
.editorial__toc-h {
padding-left: 14px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.42));
margin-bottom: 6px;
}
.editorial__toc a {
display: block;
padding: 8px 14px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13px;
line-height: 1.4;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
text-decoration: none;
border: 0;
border-left: 2px solid transparent;
margin-left: -1px;
transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.editorial__toc a:hover,
.editorial__toc a.is-active {
color: var(--hc-ink, #1a1714);
border-left-color: var(--hc-accent, #8b7355);
background: rgba(212, 184, 150, 0.10);
}
.editorial__meta {
display: flex;
gap: 16px;
margin-bottom: 14px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.5));
}
@media (max-width: 1024px) {
.editorial--with-toc { grid-template-columns: 1fr; }
.editorial__toc { position: static; border-left: 0; border-bottom: 0.5px solid rgba(141,109,71,0.22); padding-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.editorial__toc a { border-left: 0; padding: 6px 10px; border-radius: 6px; }
.editorial > .bc, .editorial > nav.bc {font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-ink-mid, rgba(26, 23, 20, 0.5)); margin-bottom: 24px}
}
/* === css/blocks/035-hc-acc-nav.css === */
/* =================== hc-acc-nav.css =================== */
.hc-acc-nav {position: sticky; top: calc(84px + env(safe-area-inset-top)); padding: clamp(16px, 2vw, 22px); background: var(--hc-bg, #f8f6f3); border: 1px solid rgba(26, 23, 20, 0.08); border-radius: 22px}
.hc-acc-nav__user {display: flex; align-items: center; gap: 12px; margin-bottom: var(--hc-sp-4, 20px); padding-bottom: var(--hc-sp-3, 14px); border-bottom: 1px solid rgba(26, 23, 20, 0.08)}
.hc-acc-nav__avatar {display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--hc-gold, #d4b896), var(--hc-accent, #8b7355)); color: var(--hc-bg, #f8f6f3); font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-weight: 500; font-size: 18px; flex: none}
.hc-acc-nav__user-body {display: flex; flex-direction: column; gap: 2px; min-width: 0}
.hc-acc-nav__user-name {font-weight: 500; font-size: 14px; color: var(--hc-ink, #1a1714); overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.hc-acc-nav__tier {align-self: flex-start; font-size: 10px; letter-spacing: 0.04em; padding: 2px 8px; margin-top: 2px}
.hc-acc-nav__user-email {font-size: 11px; color: var(--hc-muted, rgba(26, 23, 20, 0.55)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.hc-acc-nav__list {list-style: none; padding: 0; margin: 0; display: grid; gap: 2px}
.hc-acc-nav__link {display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--hc-ink, #1a1714); font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.2s ease, color 0.2s ease}
.hc-acc-nav__link:hover {background: rgba(26, 23, 20, 0.04)}
.hc-acc-nav__link.is-active {background: rgba(139, 115, 85, 0.10); color: var(--hc-accent-dark, #7a6548)}
.hc-acc-nav__link--muted {color: var(--hc-muted, rgba(26, 23, 20, 0.58))}
.hc-acc-nav__link--muted:hover {color: var(--hc-red, #c0392b)}
.hc-acc-nav__ico {display: inline-grid; place-items: center; width: 20px; flex: none; font-size: 14px; color: var(--hc-accent, #8b7355)}
.hc-acc-nav__badge {margin-left: auto; font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 11px; padding: 2px 7px; background: rgba(26, 23, 20, 0.08); border-radius: 999px; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.65))}
.hc-acc-nav__sep {height: 1px; background: rgba(26, 23, 20, 0.08); margin: 6px 0}
/* === css/blocks/036-hc-accordion.css === */
/* =================== hc-accordion.css =================== */
.hc-accordion {
border-radius: var(--br-12);
overflow: hidden;
background: var(--c-white);
box-shadow: var(--sh-sm);
}
.hc-accordion__item {
border-bottom: 1px solid var(--c-border);
}
.hc-accordion__item:last-child {
border-bottom: none;
}
.hc-accordion__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--sp-16) var(--sp-24);
background: transparent;
border: none;
width: 100%;
cursor: pointer;
font-size: var(--fs-16);
font-weight: var(--fw-600);
color: var(--c-primary);
transition: all var(--tr-base);
user-select: none;
}
.hc-accordion__header:hover {
background: rgba(212, 184, 150, 0.08);
}
.hc-accordion__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
transition: transform var(--tr-base);
flex-shrink: 0;
}
.hc-accordion__content {
max-height: 0;
overflow: hidden;
transition: max-height var(--tr-base), padding var(--tr-base), opacity var(--tr-base);
opacity: 0;
padding: 0 var(--sp-24);
}
.hc-accordion__body {
color: var(--c-text-secondary);
font-size: var(--fs-14);
line-height: var(--lh-1-6);
}
.hc-accordion__item.is-active .hc-accordion__content {
max-height: 600px;
padding: 0 var(--sp-24) var(--sp-16) var(--sp-24);
opacity: 1;
}
.hc-accordion__item.is-active .hc-accordion__icon {
transform: rotate(180deg);
}
/* === css/blocks/042-hc-badge.css === */
/* =================== hc-badge.css =================== */
.hc-badge {
display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 500; line-height: 1.4; background: var(--hc-paper-3); color: var(--hc-ink-2); letter-spacing: 0.04em; margin-left: 6px
}
.hc-badge::before {
content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor
}
.hc-badge--ok {
background: rgba(90, 122, 90, 0.12); color: rgb(60, 95, 60)
}
.hc-badge--warn {
background: var(--hc-warning-soft); color: var(--hc-warning)
}
.hc-badge--err {
background: var(--hc-danger-soft); color: var(--hc-danger)
}
.hc-badge--gold {
background: linear-gradient(135deg, #d4a020, #b8860b); color: var(--hc-paper, #ffffff); font-weight: 500
}
.hc-pdp-head .hc-badge, .hc-pdp-trust__chips .hc-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
height: 28px;
font: 500 12px/1 var(--hc-sans, "Outfit", sans-serif);
letter-spacing: 0.02em;
border-radius: 9999px;
background: rgba(212, 184, 150, 0.14);
color: var(--hc-accent-dark, #5d4d3a);
border: 1px solid rgba(141, 109, 71, 0.18);
white-space: nowrap;
}
.hc-pdp__chips .hc-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
height: 28px;
font: 500 12px/1 var(--hc-sans, "Outfit", sans-serif);
letter-spacing: 0.02em;
border-radius: 9999px;
background: rgba(212, 184, 150, 0.14);
color: var(--hc-accent-dark, #5d4d3a);
border: 1px solid rgba(141, 109, 71, 0.18);
white-space: nowrap;
}
.hc-mobile-tabbar__cart .hc-badge {
position: absolute;
top: 6px;
right: 18%;
}
.hc-pdp-head .hc-badge--ok {
background: rgba(61, 107, 79, 0.12);
color: #2d5440;
border-color: rgba(61, 107, 79, 0.28);
}
.hc-pdp-head .hc-badge--ok::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* === css/blocks/048-hc-btn.css === */
/* =================== hc-btn.css =================== */
/* hc-btn - premium button primitive used across the site.
* Variants: --primary (filled dark), --gold (filled gold), --outline (ghost
* with border), --ghost (text-only), --accent (filled accent-dark), --ico
* (icon-only square), --magnetic (with shimmer), --lg/--sm/--xl size
* modifiers. Strictly .hc-btn / .hc-btn--*. */
.hc-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 22px;
font: inherit;
font-family: var(--hc-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1;
white-space: nowrap;
text-decoration: none;
color: inherit;
background: transparent;
border: 1px solid transparent;
border-radius: var(--hc-r-pill, 999px);
cursor: pointer;
isolation: isolate;
overflow: hidden;
transition:
transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1),
background 0.24s ease,
color 0.24s ease,
border-color 0.24s ease,
box-shadow 0.32s ease;
}
.hc-btn:focus-visible {
outline: 2px solid var(--hc-accent, #8b7355);
outline-offset: 3px;
}
.hc-btn:disabled,
.hc-btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.hc-btn--primary {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
box-shadow:
0 2px 4px rgba(40, 30, 15, 0.08),
0 10px 24px -10px rgba(40, 30, 15, 0.30);
}
.hc-btn--primary::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 50%;
height: 100%;
z-index: -1;
background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, 0.32) 50%, transparent 70%);
transform: skewX(-18deg);
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hc-btn--primary:hover {
background: linear-gradient(135deg, #2a2018, #3d3024);
transform: translateY(-1px);
box-shadow:
0 4px 8px rgba(40, 30, 15, 0.12),
0 18px 36px -12px rgba(40, 30, 15, 0.42);
}
.hc-btn--primary:hover::after { transform: skewX(-18deg) translateX(320%); }
.hc-btn--primary:active { transform: translateY(0); }
.hc-btn--gold {
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
box-shadow:
0 2px 4px rgba(184, 154, 111, 0.16),
0 10px 24px -10px rgba(184, 154, 111, 0.42);
}
.hc-btn--gold::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 50%;
height: 100%;
z-index: -1;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.50) 50%, transparent 70%);
transform: skewX(-18deg);
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hc-btn--gold:hover {
background: linear-gradient(135deg, #e0c4a4, #c9aa7d);
transform: translateY(-1px);
box-shadow:
0 4px 8px rgba(184, 154, 111, 0.22),
0 18px 36px -12px rgba(184, 154, 111, 0.52);
}
.hc-btn--gold:hover::after { transform: skewX(-18deg) translateX(320%); }
.hc-btn--outline {
background: transparent;
color: var(--hc-ink, #1a1714);
border-color: rgba(26, 23, 20, 0.22);
}
.hc-btn--outline:hover {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border-color: var(--hc-ink, #1a1714);
transform: translateY(-1px);
box-shadow: 0 12px 28px -12px rgba(40, 30, 15, 0.32);
}
.hc-btn--outline-light {
background: transparent;
color: var(--hc-paper, #ffffff);
border-color: rgba(255, 255, 255, 0.4);
}
.hc-btn--outline-light:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.7);
transform: translateY(-1px);
}
.hc-btn--ghost {
background: transparent;
color: var(--hc-ink, #1a1714);
border: 1px solid rgba(26, 23, 20, 0.20);
padding: 0 20px;
transition:
background 0.22s cubic-bezier(0.2, 0.84, 0.3, 1),
border-color 0.22s ease,
color 0.22s ease;
}
.hc-btn--ghost:hover {
background: rgba(212, 184, 150, 0.12);
border-color: var(--hc-accent, rgba(141, 109, 71, 0.55));
color: var(--hc-ink, #1a1714);
}
.hc-btn--accent {
background: var(--hc-accent-dark, #5d4d3a);
color: var(--hc-paper, #ffffff);
box-shadow:
0 2px 4px rgba(93, 77, 58, 0.16),
0 10px 24px -10px rgba(93, 77, 58, 0.36);
}
.hc-btn--accent:hover {
background: var(--hc-accent, #8b7355);
transform: translateY(-1px);
box-shadow: 0 14px 30px -10px rgba(93, 77, 58, 0.5);
}
.hc-btn--ico {
width: 44px;
height: 44px;
padding: 0;
gap: 0;
}
.hc-btn--ico.hc-btn--sm {
width: 36px;
height: 36px;
}
.hc-btn--full {
width: 100%;
display: flex;
}
.hc-btn--xs { height: 28px; padding: 0 12px; font-size: 12px; }
.hc-btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }
.hc-btn--lg { height: 52px; padding: 0 28px; font-size: 15px; }
.hc-btn--xl { height: 60px; padding: 0 36px; font-size: 16px; }
.hc-btn--magnetic {
--mx: 0;
--my: 0;
transition:
transform 0.18s cubic-bezier(0.22, 1.4, 0.36, 1),
background 0.24s ease,
color 0.24s ease,
border-color 0.24s ease,
box-shadow 0.32s ease;
}
.hc-btn--magnetic:hover {
transform: translate(calc(var(--mx) * 1px), calc(var(--my) * 1px - 1px));
}
.hc-cat-tbl__actions .hc-btn--ghost {
padding: 10px 14px; background: transparent;
color: rgba(26, 23, 20, 0.62); border: 1px solid rgba(26, 23, 20, 0.14);
border-radius: 8px; font-family: inherit; font-size: 12px; cursor: pointer;
}
.hc-cat-tbl__actions .hc-btn--ghost:hover:not(:disabled) {
border-color: #c0392b; color: #c0392b;
}
.hc-cat-tbl__actions .hc-btn--ghost:disabled {
opacity: 0.40; cursor: not-allowed;
}
.hc-cat-tbl__actions .hc-btn--primary {
padding: 10px 16px; background: var(--hc-ink, #1a1714); color: var(--hc-paper, #ffffff);
border: 0; border-radius: 8px; font-family: inherit; font-size: 12px;
font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
transition: background .15s;
}
.hc-cat-tbl__actions .hc-btn--primary:hover:not(:disabled) {
background: var(--hc-accent, #8b7355);
}
.hc-cat-tbl__actions .hc-btn--primary:disabled {
opacity: 0.40; cursor: not-allowed;
}
/* === css/blocks/050-hc-card.css === */
/* =================== hc-card.css =================== */
.hc-card {background: var(--hc-paper); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); padding: var(--hc-sp-4); transition: box-shadow var(--hc-dur-base), transform var(--hc-dur-base)}
.hc-card--hover:hover {box-shadow: var(--hc-sh-3); transform: translateY(-2px)}
.hc-card--flat {border: 0; background: var(--hc-paper-2)}
.hc-card--gold {background: linear-gradient(135deg, var(--hc-gold-soft), rgba(212,184,150,0.04)); border-color: var(--hc-gold-border)}
.hc-card[data-fx-orb], .hc-pcard[data-fx-orb] {position: relative; overflow: hidden; isolation: isolate}
.hc-card[data-fx-orb]::after, .hc-pcard[data-fx-orb]::after {content: ""; position: absolute; right: -20%; bottom: -55%; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(
circle,
rgba(199, 155, 96, 0.14),
transparent 65%
); opacity: 0; transform: translateY(18px); transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 0}
.hc-card[data-fx-orb]:hover::after, .hc-pcard[data-fx-orb]:hover::after {opacity: 1; transform: translateY(0)}
.hc-card[data-fx-orb] > *, .hc-pcard[data-fx-orb] > * {position: relative; z-index: 1}
.hc-card--hover {transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1)}
.hc-card--hover:hover {transform: translateY(-4px); box-shadow: 0 22px 60px rgba(26, 23, 20, 0.12); border-color: rgba(139, 115, 85, 0.28)}
.hc-card--soft {background: var(--hc-bg-2, var(--hc-paper-3, #f2efe9)); border-radius: 14px; border: 1px solid rgba(26, 23, 20, 0.06)}
@media(max-width:1024px) {
.hc-card.hc-card--hover {background: var(--hc-paper, #ffffff); border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18)); border-radius: 16px; padding: 22px 24px; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease}
.hc-card.hc-card--hover:hover {border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.42)); transform: translateY(-2px); box-shadow: 0 14px 36px -16px rgba(139, 115, 85, 0.20)}
}
.page-about .hc-card {
transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.page-about .hc-card:hover {
transform: translateY(-3px);
border-color: rgba(141, 109, 71, 0.35);
box-shadow: 0 24px 48px -32px rgba(27, 20, 13, 0.32);
}
.hc-card img:not([src]),
.hc-card img[src=""],
.hc-contact-card img:not([src]),
.hc-contact-card img[src=""] {
display: none;
}
/* ---- folded from 190-panel.css ---- */
.panel {padding: clamp(20px, 2.4vw, 28px); background: linear-gradient(180deg, rgba(255, 252, 247, 1), rgba(248, 244, 237, 0.6)); border: 0.5px solid rgba(180, 151, 115, 0.18); border-radius: 14px; margin-bottom: clamp(16px, 2vw, 24px)}
/* === css/blocks/074-hc-chip.css === */
/* =================== hc-chip.css =================== */
/* hc-chip - premium pill chip used for filters, tags, signals, quick-actions.
* Variants: --active (selected dark), --gold (premium accent), --dismiss
* (with close button), --toggle (checkbox variant). Strictly .hc-chip / .hc-chip__*. */
.hc-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
font-family: var(--hc-sans);
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.01em;
white-space: nowrap;
text-decoration: none;
color: var(--hc-ink, #1a1714);
background: rgba(255, 255, 255, 0.94);
border: 0.5px solid rgba(180, 151, 115, 0.28);
border-radius: 100px;
cursor: pointer;
isolation: isolate;
overflow: hidden;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.04),
0 6px 16px -8px rgba(40, 30, 15, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition:
background 0.20s ease,
border-color 0.20s ease,
color 0.20s ease,
transform 0.20s cubic-bezier(0.34, 1.4, 0.64, 1),
box-shadow 0.20s ease;
}
.hc-chip::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
background: radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.5), transparent 50%);
opacity: 0.7;
}
.hc-chip:hover {
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, #fbf5e8 100%);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
color: var(--hc-ink, #1a1714);
transform: translateY(-1px) scale(1.02);
box-shadow:
0 2px 4px rgba(40, 30, 15, 0.06),
0 12px 22px -8px rgba(184, 154, 111, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.hc-chip:focus-visible {
outline: 2px solid var(--hc-accent, #8b7355);
outline-offset: 3px;
}
/* active state — dark with gold inner glow */
.hc-chip--active, .hc-chip[aria-current="true"] {
background: linear-gradient(180deg, rgba(28, 24, 20, 0.96), rgba(17, 14, 12, 0.99));
color: var(--hc-paper, #ffffff);
border-color: rgba(0, 0, 0, 0.5);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.30),
0 14px 28px -10px rgba(0, 0, 0, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 0 0 1px rgba(212, 184, 150, 0.18);
}
.hc-chip--active:hover, .hc-chip[aria-current="true"]:hover {
background: linear-gradient(180deg, #2a2018, var(--hc-ink, #1a1714));
color: var(--hc-paper, #ffffff);
transform: translateY(-1px) scale(1.02);
}
/* gold premium variant */
.hc-chip--gold {
background: linear-gradient(135deg, rgba(212, 184, 150, 0.32), rgba(184, 154, 111, 0.18));
color: var(--hc-accent-dark, #7a6548);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
}
.hc-chip--gold:hover {
background: linear-gradient(135deg, rgba(212, 184, 150, 0.50), rgba(184, 154, 111, 0.30));
color: var(--hc-ink, #1a1714);
}
/* dismiss variant — has a close X on the right */
.hc-chip--dismiss {
padding-right: 6px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.20), rgba(184, 154, 111, 0.10));
color: var(--hc-accent-dark, #7a6548);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.50));
}
.hc-chip__x {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 4px;
background: rgba(139, 115, 85, 0.22);
color: var(--hc-accent-dark, #7a6548);
border-radius: 50%;
font-size: 12px;
line-height: 1;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.hc-chip__x:hover {
background: var(--hc-accent-dark, #7a6548);
color: var(--hc-paper, #ffffff);
transform: rotate(90deg) scale(1.1);
}
/* count badge inside a chip (e.g. "Все · 1121") */
.hc-chip__count {
display: inline-flex;
align-items: center;
margin-left: 4px;
padding: 2px 6px;
background: var(--hc-paper-3, #f2efe9);
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
border-radius: var(--hc-r-pill, 999px);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
letter-spacing: 0.04em;
transition: background 0.18s ease, color 0.18s ease;
}
.hc-chip[aria-current="true"] .hc-chip__count {
background: rgba(255, 255, 255, 0.16);
color: var(--hc-paper, #ffffff);
}
/* toggle variant — chip wrapping a checkbox label */
.hc-chip--toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: var(--hc-paper-3, #f2efe9);
border: 0.5px solid rgba(26, 23, 20, 0.12);
font-size: 13px;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease;
}
.hc-chip--toggle:hover {
background: rgba(212, 184, 150, 0.12);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.4));
}
.hc-chip--toggle input[type="checkbox"] {
width: 14px;
height: 14px;
accent-color: var(--hc-accent-dark, #7a6548);
cursor: pointer;
}
/* size modifiers */
.hc-chip--sm {
padding: 5px 11px;
font-size: 11px;
}
.hc-chip--lg {
padding: 11px 20px;
font-size: 14px;
}
.hc-chip--active .hc-chip__count {
background: rgba(255, 255, 255, 0.16);
color: var(--hc-paper, #ffffff);
}
/* === css/blocks/085-hc-crumbs.css === */
/* =================== hc-crumbs.css =================== */
.hc-crumbs {display: flex; align-items: center; flex-wrap: wrap; gap: var(--hc-sp-1); font-size: var(--hc-fs-sm); color: var(--hc-ink-mid); margin-bottom: var(--hc-sp-3)}
.hc-crumbs a {color: var(--hc-ink-soft)}
.hc-crumbs a:hover {color: var(--hc-accent)}
.hc-crumbs__sep {color: var(--hc-ink-muted); margin: 0 var(--hc-sp-1)}
.hc-crumbs__here {color: var(--hc-ink); font-weight: 500}
.hc-crumbs__here--truncate {max-width: 400px; display: inline-block; vertical-align: middle}
/* === css/blocks/089-hc-eyebrow.css === */
/* =================== hc-eyebrow.css =================== */
.hc-eyebrow {display: inline-block; font-family: var(--hc-mono); font-size: var(--hc-fs-xxs); font-weight: 500; letter-spacing: var(--hc-ls-ultra); text-transform: uppercase; color: var(--hc-accent)}
.hc-sec-h__title > .hc-eyebrow {display: block; margin-bottom: var(--hc-sp-1)}
.hc-error__links .hc-eyebrow {display: block; text-align: center; margin-bottom: clamp(16px, 2vw, 24px); font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hc-muted, rgba(26, 23, 20, 0.55))}
@media(max-width:1024px) {
.hc-ftr__b2b .hc-eyebrow {color: rgba(200, 175, 130, 0.85); font-size: 11px; letter-spacing: 2.5px}
}
.hc-ftr__b2b .hc-eyebrow {
color: rgba(255, 255, 255, 0.45);
}
.hc-ftr__b2b .hc-eyebrow {
display: inline-block;
align-self: start;
padding: 5px 10px;
background: rgba(212, 184, 150, 0.18);
border: 0.5px solid rgba(212, 184, 150, 0.34);
border-radius: var(--hc-r-pill, 999px);
font-family: var(--hc-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-gold, #d4b896);
}
.premium-surface--highlight .hc-eyebrow {
color: var(--hc-gold-1, var(--hc-gold, #d4b896));
}
/* === css/blocks/091-hc-field.css === */
/* =================== hc-field.css =================== */
.hc-field {display: block; margin-bottom: var(--hc-sp-4)}
.hc-field__label {display: block; font-size: var(--hc-fs-sm); color: var(--hc-ink-2); font-weight: 500; margin-bottom: var(--hc-sp-2)}
.hc-field__label em {color: var(--hc-danger); font-style: normal}
.hc-field__row {display: flex; align-items: center; gap: var(--hc-sp-2); padding: var(--hc-sp-2) 0}
/* === css/blocks/101-hc-input.css === */
/* =================== hc-input.css =================== */
.hc-field.is-valid .hc-input {border-color: var(--hc-success)}
.hc-field.is-invalid .hc-input {border-color: var(--hc-danger)}
.hc-input {width: 100%; padding: 11px 14px; font-family: inherit; font-size: var(--hc-fs-md); line-height: 1.4; color: var(--hc-ink); background: var(--hc-paper); border: 1px solid var(--hc-line-2); border-radius: var(--hc-r-sm); transition: border-color var(--hc-dur-fast), box-shadow var(--hc-dur-fast)}
.hc-input:focus {border-color: var(--hc-accent); box-shadow: 0 0 0 3px var(--hc-accent-soft); outline: none}
.hc-input::placeholder {color: var(--hc-ink-muted)}
.hc-input--sm {padding: 6px 10px; font-size: var(--hc-fs-sm)}
.hc-input {border: 1px solid var(--hc-line); background: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.35)}
/* ---- folded from 073-hc-checkbox.css ---- */
/* =================== hc-checkbox.css =================== */
.hc-checkbox, .hc-radio {width: 18px; height: 18px; margin-right: var(--hc-sp-2); accent-color: var(--hc-accent); cursor: pointer}
/* === css/blocks/103-hc-label.css === */
/* =================== hc-label.css =================== */
.hc-label {display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; background: var(--hc-ink); color: var(--hc-paper, #ffffff); border-radius: var(--hc-r-xs); font-family: var(--hc-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4}
.hc-label--sale {background: var(--hc-danger)}
.hc-label--hit {background: var(--hc-gold); color: var(--hc-ink-2)}
.hc-pdp-gallery__sale .hc-label--sale {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: linear-gradient(135deg, var(--hc-danger, #c9433a), #a82e26);
color: var(--hc-paper, #ffffff);
border-radius: var(--hc-r-pill);
font-family: var(--hc-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
box-shadow: 0 6px 14px -4px rgba(201, 67, 58, 0.42);
}
/* === css/blocks/111-hc-modal.css === */
/* =================== hc-modal.css =================== */
.hc-modal {
position: fixed; inset: 0; z-index: var(--hc-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--hc-sp-4); background: rgba(26, 23, 20, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity var(--hc-dur-base)
}
.hc-modal.is-open {
opacity: 1; pointer-events: auto
}
.hc-modal__panel {
position: relative; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; background: var(--hc-paper); border-radius: var(--hc-r-2xl); box-shadow: var(--hc-sh-4); transform: scale(0.94); transition: transform var(--hc-dur-base) var(--hc-ease-bounce)
}
.hc-modal.is-open .hc-modal__panel {
transform: scale(1)
}
.hc-modal__head {
position: sticky; top: 0; padding: var(--hc-sp-4) var(--hc-sp-5); background: var(--hc-paper); border-bottom: 1px solid var(--hc-line); display: flex; align-items: center; justify-content: space-between
}
.hc-modal__title {
font-size: var(--hc-fs-xl)
}
.hc-modal__x {
width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--hc-ink-mid)
}
.hc-modal__x:hover {
background: var(--hc-paper-3); color: var(--hc-ink)
}
.hc-modal__body {
padding: var(--hc-sp-5)
}
.hc-modal__foot {
padding: var(--hc-sp-4) var(--hc-sp-5); border-top: 1px solid var(--hc-line); display: flex; justify-content: flex-end; gap: var(--hc-sp-2)
}
@media(max-width:1024px) {
.hc-modal[x-show], .hc-dialog[x-show] {display: none}
.hc-modal[x-show="true"]:not([x-cloak]), .hc-dialog[x-show="true"]:not([x-cloak]) {display: block}
}
.hc-modal {
position: fixed;
inset: 0;
background: rgba(26, 23, 20, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: none;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
opacity: 0;
transition: opacity var(--tr-base);
animation: hcModalFadeIn var(--tr-base);
}
.hc-modal.is-active {
display: flex;
opacity: 1;
}
.hc-modal__content {
background: var(--c-white);
border-radius: var(--br-12);
padding: var(--sp-32);
max-width: 600px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--sh-2xl);
animation: hcModalSlideUp var(--tr-base);
}
.hc-modal__close {
position: absolute;
top: var(--sp-16);
right: var(--sp-16);
width: 36px;
height: 36px;
border: none;
background: var(--c-bg);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-20);
color: var(--c-primary);
transition: all var(--tr-base);
}
.hc-modal__close:hover {
background: var(--c-border);
transform: rotate(90deg) scale(1.15);
}
.hc-modal--wide .hc-modal__panel {
max-width: 960px
}
/* === css/blocks/114-hc-pag.css === */
/* =================== hc-pag.css =================== */
.hc-pag {display: flex; gap: 4px; justify-content: center; margin: var(--hc-sp-7) 0}
.hc-pag a, .hc-pag span {min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hc-line); border-radius: var(--hc-r-sm); background: var(--hc-paper); color: var(--hc-ink-soft); font-family: var(--hc-mono); font-size: var(--hc-fs-sm); transition: all var(--hc-dur-fast)}
.hc-pag a:hover {background: var(--hc-paper-3); color: var(--hc-ink)}
.hc-pag .is-current, .hc-pag [aria-current="page"] {background: var(--hc-ink); color: var(--hc-paper, #ffffff); border-color: var(--hc-ink)}
.hc-pag [aria-disabled="true"] {opacity: 0.35; pointer-events: none}
/* === css/blocks/144-hc-qty.css === */
/* =================== hc-qty.css =================== */
.hc-qty {display: inline-flex; align-items: center; background: rgba(26, 23, 20, 0.04); border: 1px solid var(--hc-line); border-radius: 999px; overflow: hidden; gap: 2px; padding: 4px}
.hc-qty__btn {width: 32px; height: 32px; font-size: 16px; color: var(--hc-ink, #1a1714); background: transparent; transition: background 0.2s ease; border-radius: 50%; border: none; cursor: pointer}
.hc-qty__btn:hover {background: rgba(255, 255, 255, 0.8); color: var(--hc-paper, #ffffff)}
.hc-qty__val {min-width: 42px; padding: 0 var(--hc-sp-2); background: transparent; font-family: var(--hc-mono); font-size: 15px; text-align: center; border: none; width: 40px; font-weight: 500; outline: none}
.hc-qty input,
.hc-qty__input,
.hc-pdp-qty input,
.qv-qty input,
.hc-cart-qty input,
input[type="number"].hc-input,
input[name="qty"],
input[name="quantity"] {
width: 56px;
height: 38px;
padding: 0 8px;
text-align: center;
font: 500 15px/1 var(--hc-mono, 'JetBrains Mono', monospace);
color: var(--hc-ink, #1a1714);
background: var(--hc-paper, #ffffff);
border: 1px solid rgba(141, 109, 71, 0.32);
border-radius: 8px;
-moz-appearance: textfield;
}
.hc-qty input::-webkit-outer-spin-button,
.hc-qty input::-webkit-inner-spin-button,
.qv-qty input::-webkit-outer-spin-button,
.qv-qty input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.hc-qty,
.qv-qty,
.hc-pdp-qty {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px;
background: var(--hc-paper-2, #fafaf8);
border: 1px solid rgba(141, 109, 71, 0.18);
border-radius: 12px;
}
.hc-qty button,
.qv-qty button,
.hc-pdp-qty button,
.hc-qty__btn {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
color: var(--hc-ink, #1a1714);
background: var(--hc-paper, #ffffff);
border: 1px solid rgba(141, 109, 71, 0.28);
border-radius: 8px;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease;
}
.hc-qty button:hover,
.qv-qty button:hover,
.hc-pdp-qty button:hover {
background: var(--hc-bg, #f5f2ec);
border-color: var(--hc-accent, #8b7355);
}
/* === css/blocks/147-hc-sec-h.css === */
/* =================== hc-sec-h.css =================== */
.hc-sec-h {display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hc-sp-4); margin-bottom: var(--hc-sp-5); flex-wrap: wrap}
.hc-sec-h__title > h2 {font-size: var(--hc-fs-3xl); margin: 0}
.hc-sec-h__side {font-size: var(--hc-fs-sm); color: var(--hc-accent-dark); display: inline-flex; align-items: center; gap: var(--hc-sp-1); transition: transform var(--hc-dur-base) var(--hc-ease)}
.hc-sec-h__side:hover {transform: translateX(3px); color: var(--hc-accent)}
.pdp-linked-section .hc-sec-h {align-items: flex-end}
.hc-sec-h__title {margin-top: var(--hc-sp-1, 6px); font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.08; letter-spacing: -0.01em; color: var(--hc-ink, #1a1714)}
/* === css/blocks/148-hc-sec.css === */
/* =================== hc-sec.css =================== */
.hc-sec {padding: 48px 0; position: relative}
.hc-sec--tight {padding: 32px 0}
.hc-sec--soft {background: var(--hc-bg-warm, #f5efde); padding: 56px 0}
.page-catalog main>.hc-sec:first-of-type {padding-top: clamp(14px,2vw,24px)}
.page-delivery main>.hc-sec:first-of-type, .page-favorites main>.hc-sec:first-of-type, .page-tracking main>.hc-sec:first-of-type, .page-cart main>.hc-sec:first-of-type, .page-checkout main>.hc-sec:first-of-type, .page-account main>.hc-sec:first-of-type {padding-top: clamp(18px,2.2vw,30px)}
.page-shared-cart .hc-sec {padding-block: clamp(40px, 5vw, 72px)}
/* ---- folded from 211-sec-divider.css ---- */
.sec-divider {border: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(180, 151, 115, 0.18) 50%, transparent 100%); margin: clamp(24px, 3vw, 40px) 0}
/* === css/blocks/149-hc-select.css === */
/* =================== hc-select.css =================== */
.hc-select {width: 100%; padding: 11px 38px 11px 14px; font-family: inherit; font-size: var(--hc-fs-md); line-height: 1.4; color: var(--hc-ink); background-color: var(--hc-paper); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; border: 1px solid var(--hc-line-2); border-radius: var(--hc-r-sm); transition: border-color var(--hc-dur-fast), box-shadow var(--hc-dur-fast); appearance: none; -webkit-appearance: none}
.hc-select:focus {border-color: var(--hc-accent); box-shadow: 0 0 0 3px var(--hc-accent-soft); outline: none}
/* === css/blocks/151-hc-skel.css === */
/* =================== hc-skel.css =================== */
.hc-skel {display: block; background: linear-gradient(90deg,
var(--hc-paper-3) 0%,
#ece7df 40%,
var(--hc-paper-3) 80%); background-size: 200% 100%; animation: hcShimmer 1.4s ease-in-out infinite; border-radius: var(--hc-r-sm); position: relative}
.hc-pcard-skel__body > .hc-skel {margin-bottom: 6px}
/* ─── folded from hc-skel-grid.css ─── */
.hc-skel-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hc-sp-4)}
/* === css/blocks/152-hc-small.css === */
/* =================== hc-small.css =================== */
.hc-small {
font-size: var(--hc-fs-xs)
}
.hc-acc-order__delivery-grid .hc-small.hc-muted {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px
}
/* === css/blocks/159-hc-tabs.css === */
/* =================== hc-tabs.css =================== */
.hc-tabs__nav {
display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--hc-line); scrollbar-width: none
}
.hc-tabs__nav::-webkit-scrollbar {
display: none
}
.hc-tabs__btn {
position: relative; padding: var(--hc-sp-3) var(--hc-sp-4); font-family: inherit; font-size: var(--hc-fs-md); font-weight: 500; color: var(--hc-ink-mid); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--hc-dur-fast), border-color var(--hc-dur-fast)
}
.hc-tabs__btn:hover {
color: var(--hc-ink)
}
.hc-tabs__btn.is-active {
color: var(--hc-ink); border-bottom-color: var(--hc-ink)
}
.hc-tabs__count {
margin-left: var(--hc-sp-1); padding: 1px 6px; background: var(--hc-paper-3); border-radius: var(--hc-r-pill); font-size: var(--hc-fs-xxs); color: var(--hc-ink-mid)
}
.hc-tabs__panel {
padding-top: var(--hc-sp-5)
}
.hc-tabs--premium {
margin-top: var(--hc-sp-7)
}
.hc-tabs__desc {
line-height: var(--hc-lh-base); color: var(--hc-ink-2)
}
.hc-tabs__group-title {
font-size: var(--hc-fs-lg); margin: var(--hc-sp-4) 0 var(--hc-sp-2)
}
.hc-tabs__spec-table {
width: 100%; border-collapse: collapse
}
.hc-tabs__spec-table tr {
border-bottom: 1px solid var(--hc-line)
}
.hc-tabs__spec-name {
width: 40%; padding: 10px 8px 10px 0; color: var(--hc-ink-mid); font-size: var(--hc-fs-sm); vertical-align: top
}
.hc-tabs__spec-value {
padding: 10px 0; font-size: var(--hc-fs-sm)
}
.hc-tabs__docs-note {
margin-bottom: var(--hc-sp-3)
}
.hc-tabs__delivery-grid {
display: grid; gap: var(--hc-sp-2)
}
.hc-tabs__loader {
margin: var(--hc-sp-5) auto
}
.hc-tabs__spec-table--structured {
margin-bottom: var(--hc-sp-4, 20px); border-left: 2px solid rgba(139, 115, 85, 0.25); padding-left: 14px
}
.hc-tabs__spec-table--structured td {
font-size: 13.5px; padding: 5px 8px
}
.hc-tabs__spec-table--structured code {
font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 12px; background: rgba(26, 23, 20, 0.05); padding: 1px 6px; border-radius: 4px
}
.hc-tabs {
display: flex;
border-bottom: 1px solid var(--c-border);
gap: var(--sp-8);
overflow-x: auto;
}
.hc-tabs__tab {
position: relative;
padding: var(--sp-12) var(--sp-20);
background: transparent;
border: none;
cursor: pointer;
font-size: var(--fs-14);
font-weight: var(--fw-500);
color: var(--c-text-secondary);
transition: color var(--tr-base);
white-space: nowrap;
flex-shrink: 0;
}
.hc-tabs__tab:hover {
color: var(--c-primary);
}
.hc-tabs__tab.is-active {
color: var(--c-primary);
}
.hc-tabs__tab.is-active::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: var(--c-primary);
animation: hcTabSlide var(--tr-base);
}
.hc-tabs__panel {
display: none;
animation: hcFadeIn var(--tr-base);
}
.hc-tabs__panel.is-active {
display: block;
}
.hc-tabs.hc-tabs--premium {
border-bottom: 1px solid rgba(141, 109, 71, 0.16);
}
.hc-tabs__nav {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: stretch;
}
.hc-tabs__btn {
position: relative;
padding: 12px 18px;
font: 500 14px/1 var(--hc-sans, "Outfit", sans-serif);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color 0.18s ease, border-color 0.18s ease;
}
.hc-tabs__btn:hover {
color: var(--hc-ink, #1a1714);
}
.hc-tabs__btn.is-active {
color: var(--hc-ink, #1a1714);
border-bottom-color: var(--hc-accent, #8b7355);
font-weight: 500;
}
.hc-tabs__btn.is-active .hc-tabs__count {
background: var(--hc-ink); color: var(--hc-paper, #ffffff)
}
.hc-tabs__btn .hc-tabs__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
margin-left: 6px;
padding: 0 6px;
font-size: 11px;
border-radius: 9px;
background: rgba(212, 184, 150, 0.22);
color: var(--hc-accent-dark, #5d4d3a);
}
/* === css/blocks/161-hc-textarea.css === */
/* =================== hc-textarea.css =================== */
.hc-textarea {width: 100%; min-height: 100px; padding: 11px 14px; resize: vertical; font-family: inherit; font-size: var(--hc-fs-md); line-height: 1.4; color: var(--hc-ink); background: rgba(255,255,255,.72); border: 1px solid var(--hc-line); border-radius: var(--hc-r-sm); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: border-color var(--hc-dur-fast), box-shadow var(--hc-dur-fast)}
.hc-textarea:focus {border-color: var(--hc-accent); box-shadow: 0 0 0 3px var(--hc-accent-soft), inset 0 1px 0 rgba(255,255,255,.35); outline: none}
.hc-textarea::placeholder {color: var(--hc-ink-muted)}
.hc-textarea--mono {font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 12.5px; line-height: 1.6}
/* === css/blocks/162-hc-toc.css === */
/* =================== hc-toc.css =================== */
.hc-toc {position: sticky; top: calc(var(--hc-hdr-h) + var(--hc-sp-5)); max-height: calc(100vh - var(--hc-hdr-h) - var(--hc-sp-7)); overflow-y: auto; padding: var(--hc-sp-4); border-left: 2px solid var(--hc-line)}
.hc-toc__label {font-family: var(--hc-mono); font-size: var(--hc-fs-xxs); color: var(--hc-ink-mid); letter-spacing: var(--hc-ls-wide); text-transform: uppercase; margin-bottom: var(--hc-sp-3)}
.hc-toc__list {list-style: none}
.hc-toc__link.is-active {color: var(--hc-ink); border-left-color: var(--hc-accent); font-weight: 500}
/* === css/blocks/086-hc-drawer.css === */
/* =================== hc-drawer.css =================== */
.hc-drawer {
position: fixed; inset: 0; z-index: var(--hc-z-drawer); pointer-events: none
}
.hc-drawer::before {
content: ""; position: absolute; inset: 0; background: rgba(26,23,20,.45); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--hc-dur-base)
}
.hc-drawer.is-open {
pointer-events: auto
}
.hc-drawer.is-open::before {
opacity: 1
}
.hc-drawer__panel {
position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 94vw; background: var(--hc-paper); box-shadow: var(--hc-sh-4); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--hc-dur-slow) var(--hc-ease-out)
}
.hc-drawer.is-open .hc-drawer__panel {
transform: translateX(0)
}
.hc-drawer__head {
padding: var(--hc-sp-4) var(--hc-sp-5); border-bottom: 1px solid var(--hc-line); display: flex; align-items: center; justify-content: space-between
}
.hc-drawer__body {
flex: 1; overflow-y: auto; padding: var(--hc-sp-4) var(--hc-sp-5)
}
.hc-drawer__title {
font-family: var(--hc-serif); font-size: var(--hc-fs-xl)
}
.hc-drawer--left .hc-drawer__panel {
right: auto; left: 0; transform: translateX(-100%)
}
.hc-drawer--left.is-open .hc-drawer__panel {
transform: translateX(0)
}
/* === css/blocks/093-hc-ftr.css === */
/* =================== hc-ftr.css =================== */
/* hc-ftr - premium site footer. Matches the live aspro-variant markup
* (.hc-ftr--brand-end.hc-ftr--aspro) with:
* - __servicebar (4 service cells at top)
* - __top (3-zone composition: manifesto / B2B / nav)
* - __manifesto > __brand-link > __brand + __brand-sub, __contact-list, __pay
* - __b2b with eyebrow + b2b-h + b2b-text
* - __nav > __nav-col (h6 headings)
* - __legal (P0 entity info) + __bottom (copyright + privacy links)
* Strictly .hc-ftr / .hc-ftr__*. */
.hc-ftr {
position: relative;
margin-top: clamp(48px, 6vw, 96px);
padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 2vw, 36px);
background:
radial-gradient(900px 700px at 0% 0%, rgba(212, 184, 150, 0.10), transparent 55%),
linear-gradient(180deg, var(--hc-ink, #1a1714) 0%, #14110e 100%);
color: rgba(245, 240, 232, 0.86);
isolation: isolate;
overflow: hidden;
}
.hc-ftr::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 184, 150, 0.55), transparent);
z-index: 1;
}
/* SERVICE BAR — 4 trust cells at the very top */
.hc-ftr__servicebar {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
padding-bottom: 32px;
margin-bottom: 36px;
border-bottom: 0.5px solid rgba(212, 184, 150, 0.18);
}
.hc-ftr__service {
display: grid;
gap: 6px;
padding: 18px 20px;
background: rgba(255, 255, 255, 0.03);
border: 0.5px solid rgba(212, 184, 150, 0.12);
border-radius: 14px;
text-decoration: none;
transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.hc-ftr__service:hover {
background: rgba(212, 184, 150, 0.08);
border-color: rgba(212, 184, 150, 0.32);
transform: translateY(-2px);
}
.hc-ftr__service-k {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--hc-gold, #d4b896);
}
.hc-ftr__service strong {
display: block;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 17px;
font-weight: 500;
line-height: 1.2;
color: var(--hc-paper, #ffffff);
}
.hc-ftr__service small {
display: block;
font-size: 12px;
line-height: 1.4;
color: rgba(245, 240, 232, 0.58);
}
/* TOP — 3-zone grid (manifesto / b2b / nav) */
.hc-ftr__top {
display: grid;
grid-template-columns: minmax(280px, 1.4fr) minmax(260px, 1fr) minmax(360px, 1.3fr);
gap: clamp(28px, 3vw, 48px);
align-items: start;
}
/* MANIFESTO column */
.hc-ftr__manifesto {
display: grid;
gap: 14px;
}
.hc-ftr__brand-link {
display: grid;
gap: 4px;
text-decoration: none;
color: inherit;
}
.hc-ftr__brand {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 28px;
font-weight: 500;
letter-spacing: 0.10em;
line-height: 1;
color: var(--hc-paper, #ffffff);
}
.hc-ftr__brand-sub {
display: block;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245, 240, 232, 0.48);
}
.hc-ftr__manifesto-text {
margin: 4px 0 0;
max-width: 44ch;
font-size: 14px;
line-height: 1.6;
color: rgba(245, 240, 232, 0.74);
}
/* Contact list (icons + main link + meta) */
.hc-ftr__contact-list {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: grid;
gap: 14px;
}
.hc-ftr__contact {
display: grid;
grid-template-columns: 36px 1fr;
align-items: center;
gap: 12px;
}
.hc-ftr__contact-ico {
grid-row: 1 / span 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(212, 184, 150, 0.12);
border: 0.5px solid rgba(212, 184, 150, 0.28);
border-radius: 10px;
color: var(--hc-gold, #d4b896);
}
.hc-ftr__contact-ico svg {
width: 16px;
height: 16px;
}
.hc-ftr__contact-main {
grid-column: 2;
grid-row: 1;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 16px;
font-weight: 500;
line-height: 1.1;
color: var(--hc-paper, #ffffff);
text-decoration: none;
transition: color 0.18s ease;
}
.hc-ftr__contact-main:hover {
color: var(--hc-gold, #d4b896);
}
.hc-ftr__contact-meta {
grid-column: 2;
grid-row: 2;
font-size: 11.5px;
letter-spacing: 0.02em;
color: rgba(245, 240, 232, 0.5);
}
/* Payments block — inline single-row layout: label + pills side-by-side */
.hc-ftr__pay {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 18px;
padding-top: 18px;
border-top: 0.5px solid rgba(212, 184, 150, 0.16);
}
.hc-ftr__pay-h {
display: inline-flex;
align-items: center;
margin: 0;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245, 240, 232, 0.5);
}
.hc-ftr__pay-h::after {
content: "";
width: 14px;
height: 1px;
margin-left: 10px;
background: rgba(245, 240, 232, 0.22);
}
.hc-ftr__pay-pills {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.hc-ftr__pay-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 28px;
padding: 0 10px;
background: rgba(255, 255, 255, 0.92);
border: 0;
border-radius: 5px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
color: #1a1f71;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hc-ftr__pay-pill:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22);
}
/* Brand-tinted variants by visual order (Visa / MC / МИР / СБП / Безнал) */
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(1) {
background: #1a1f71;
color: var(--hc-paper, #ffffff);
letter-spacing: 0.08em;
font-style: italic;
}
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(2) {
background: var(--hc-paper, #ffffff);
color: #eb001b;
position: relative;
padding-left: 22px;
}
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(2)::before {
content: "";
position: absolute;
left: 6px;
top: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
background: #eb001b;
transform: translateY(-50%);
}
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(2)::after {
content: "";
position: absolute;
left: 12px;
top: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
background: #f79e1b;
transform: translateY(-50%);
mix-blend-mode: multiply;
}
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(3) {
background: linear-gradient(90deg, #00754a 50%, #009b3a 50%);
color: var(--hc-paper, #ffffff);
}
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(4) {
background: linear-gradient(135deg, #00aff0 0%, #f6b900 100%);
color: var(--hc-paper, #ffffff);
}
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(5) {
background: rgba(255, 255, 255, 0.08);
border: 0.5px solid rgba(212, 184, 150, 0.32);
color: rgba(245, 240, 232, 0.92);
box-shadow: none;
}
/* B2B card */
.hc-ftr__b2b {
display: grid;
gap: 10px;
padding: 24px 26px;
background:
radial-gradient(circle at 100% 0%, rgba(212, 184, 150, 0.20), transparent 55%),
rgba(255, 255, 255, 0.04);
border: 0.5px solid rgba(212, 184, 150, 0.22);
border-radius: 18px;
}
.hc-ftr__b2b-h {
margin: 4px 0 0;
font-family: var(--hc-serif);
font-size: 22px;
font-weight: 500;
line-height: 1.2;
color: var(--hc-paper, #ffffff);
}
.hc-ftr__b2b-text {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: rgba(245, 240, 232, 0.72);
}
/* NAV — 3 columns (Каталог / Покупателям / Компания) */
.hc-ftr__nav,
.hc-ftr__nav--desktop {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2vw, 32px);
}
.hc-ftr__mobile-nav {
display: none;
}
.hc-ftr__nav-col {
display: grid;
gap: 10px;
align-content: start;
}
.hc-ftr__nav-col h6,
.hc-ftr__nav-col strong {
margin: 0 0 4px;
font-family: var(--hc-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-gold, #d4b896);
}
.hc-ftr__nav-col a,
.hc-ftr__nav-col li a {
display: inline-flex;
font-size: 13.5px;
color: rgba(245, 240, 232, 0.78);
text-decoration: none;
transition: color 0.18s ease, transform 0.18s ease;
}
.hc-ftr__nav-col a:hover {
color: var(--hc-paper, #ffffff);
transform: translateX(3px);
}
.hc-ftr__nav-col ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px;
}
/* Legal entity strip */
.hc-ftr__legal {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: clamp(28px, 3vw, 44px);
padding: 18px 0;
border-top: 0.5px dashed rgba(212, 184, 150, 0.16);
border-bottom: 0.5px dashed rgba(212, 184, 150, 0.16);
font-family: var(--hc-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(245, 240, 232, 0.58);
}
/* Bottom copyright strip */
.hc-ftr__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: clamp(24px, 3vw, 36px);
padding-top: 24px;
border-top: 0.5px solid rgba(212, 184, 150, 0.12);
font-size: 12px;
color: rgba(245, 240, 232, 0.5);
}
.hc-ftr__bottom a {
color: rgba(245, 240, 232, 0.62);
text-decoration: none;
transition: color 0.18s ease;
}
.hc-ftr__bottom a:hover {
color: var(--hc-gold, #d4b896);
}
@media (max-width: 1024px) {
.hc-ftr__servicebar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hc-ftr__top {
grid-template-columns: 1fr 1fr;
}
.hc-ftr__manifesto {
grid-column: 1 / -1;
}
.hc-ftr__nav,
.hc-ftr__nav--desktop {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.hc-ftr__servicebar {
grid-template-columns: 1fr;
gap: 8px;
}
.hc-ftr__top {
grid-template-columns: 1fr;
gap: 24px;
}
.hc-ftr__nav,
.hc-ftr__nav--desktop {
grid-template-columns: 1fr 1fr;
}
.hc-ftr__brand {
font-size: 22px;
}
}
@media (max-width: 480px) {
.hc-ftr {
padding: var(--hc-sp-5) 0 clamp(80px, 14vw, 110px);
}
.hc-ftr__b2b {
padding: 20px 22px;
}
.hc-ftr__bottom {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
}
/* === css/blocks/096-hc-hdr.css === */
/* =================== hc-hdr.css =================== */
/* hc-hdr — sticky site header (the one shown on every page).
Owns: header bar, brand logo, primary nav, mega-panel under "Каталог",
right-rail icons with their badges and tooltips, phone link, CTA button,
and the responsive collapse to burger ≤1024px. The drawer that the burger
opens lives in its own block (hc-mobile-menu). Strictly .hc-hdr*. */
.hc-hdr {
position: sticky;
top: 0;
z-index: var(--hc-z-header);
height: var(--hc-hdr-h);
background: rgba(255, 255, 255, 0.88);
backdrop-filter: saturate(1.4) blur(14px);
-webkit-backdrop-filter: saturate(1.4) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color var(--hc-dur-base), background var(--hc-dur-base), box-shadow var(--hc-dur-base);
}
.hc-hdr__in {
display: flex;
align-items: center;
gap: var(--hc-sp-4);
min-height: var(--hc-hdr-h);
padding: var(--hc-sp-3) 0;
}
.hc-hdr__logo {
font-family: var(--hc-serif);
font-size: var(--hc-fs-xl);
font-weight: 500;
color: var(--hc-ink);
letter-spacing: var(--hc-ls-tight);
white-space: nowrap;
flex-shrink: 0;
}
.hc-hdr__logo b {
color: var(--hc-accent);
font-weight: 500;
}
/* burger — hidden on desktop, shown ≤1024 (see @media block below). */
.hc-hdr__burger {
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
background: transparent;
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: var(--hc-r-sm, 6px);
color: var(--hc-ink, #1a1714);
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
}
.hc-hdr__burger:hover {
background: rgba(212, 184, 150, 0.10);
border-color: rgba(141, 109, 71, 0.35);
}
/* primary nav */
.hc-hdr__nav {
display: flex;
align-items: center;
gap: var(--hc-sp-1);
margin: 0 0 0 var(--hc-sp-3);
}
.hc-hdr__mega {
display: flex;
align-items: center;
position: relative;
}
.hc-hdr__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 37px;
padding: var(--hc-sp-2) var(--hc-sp-3);
border-radius: var(--hc-r-pill);
font-size: var(--hc-fs-md);
line-height: 1;
color: var(--hc-ink-soft);
transition: color var(--hc-dur-fast), background var(--hc-dur-fast);
}
.hc-hdr__link:hover, .hc-hdr__link--active {
color: var(--hc-ink);
background: var(--hc-accent-soft);
}
/* mega-panel — drops below "Каталог". Closed by default; opens on hover
or when the trigger gets .hc-hdr__mega--open. No: closed-state
selector is more specific than open-state, but we order rules so open wins. */
.hc-hdr__mega-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 560px;
padding: var(--hc-sp-5);
background: var(--hc-paper);
border: 1px solid var(--hc-line);
border-radius: var(--hc-r-lg);
box-shadow: var(--hc-sh-3);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--hc-dur-base), visibility var(--hc-dur-base), transform var(--hc-dur-base);
}
.hc-hdr__mega-panel.hc-hdr__mega--open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.hc-hdr__mega-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--hc-sp-4);
min-width: 540px;
}
/* right-rail: icons, badges, phone, CTA */
.hc-hdr__right {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--hc-sp-2);
}
.hc-hdr__phone {
font-family: var(--hc-serif);
font-size: var(--hc-fs-md);
color: var(--hc-ink);
margin: 0 var(--hc-sp-2);
white-space: nowrap;
}
.hc-hdr__ico {
position: relative;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 0;
border-radius: var(--hc-r-sm);
background: transparent;
color: var(--hc-ink, #1a1714);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.hc-hdr__ico:hover {
background: rgba(212, 184, 150, 0.10);
color: var(--hc-accent-dark, #7a6548);
}
.hc-hdr__badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--hc-accent);
color: var(--hc-paper, #ffffff);
border-radius: var(--hc-r-pill);
font-size: 10px;
font-weight: 600;
box-shadow: 0 0 0 2px var(--hc-paper);
}
/* hide the badge when count is zero — JS sets data-count / data-cart-count */
.hc-hdr [data-count="0"] .hc-hdr__count, .hc-hdr [data-cart-count="0"] {
display: none;
}
/* tooltip on icon buttons that carry an aria-label */
.hc-hdr__icon-btn, .hc-hdr__nav a[aria-label] {
position: relative;
}
.hc-hdr__icon-btn[aria-label]:hover::after, .hc-hdr__nav a[aria-label]:hover::after {
content: attr(aria-label);
position: absolute;
top: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
padding: 4px 10px;
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
font: 500 11px/1 var(--hc-sans, "Outfit", sans-serif);
white-space: nowrap;
border-radius: 6px;
z-index: 100;
pointer-events: none;
}
/* ≤1024px: collapse desktop nav, surface burger, drop phone + CTA so only
the essential icons + cart stay in the right rail. Burger toggles
.hc-mobile-menu (own block). */
@media (max-width: 1024px) {
.hc-hdr__burger { display: inline-flex; }
.hc-hdr__nav { display: none; }
.hc-hdr__phone { display: none; }
.hc-hdr__right .hc-btn { display: none; }
.hc-hdr__right { gap: var(--hc-sp-1); }
}
/* ≤480px: tighten the bar so a small viewport doesn't crush the logo. */
@media (max-width: 480px) {
.hc-hdr__in { gap: var(--hc-sp-2); }
.hc-hdr__logo { font-size: var(--hc-fs-lg); }
/* v8.6 — at ≤420px the four-icon right-rail used to spill past edge by ~12px.
Shrink icons to 32px and zero out gap so all four still fit inside 375px. */
.hc-hdr__right { gap: 0; }
.hc-hdr__ico { width: 32px; height: 32px; }
}
.hc-hdr__mega:hover .hc-hdr__mega-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* === css/blocks/109-hc-mobile-menu.css === */
/* =================== hc-mobile-menu.css =================== */
/* hc-mobile-menu — overlay drawer toggled by .hc-hdr__burger on ≤1024px.
Body class `hc-mobile-menu-open` (added by the burger click handler) puts
the drawer into its open state. Strictly .hc-mobile-menu* + the body-class
selectors that describe THIS drawer's own state. */
.hc-mobile-menu {
position: fixed;
inset: 0;
z-index: var(--hc-z-drawer, 80);
background: rgba(27, 20, 13, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.hc-mobile-menu__panel {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: min(320px, 90vw);
padding: 24px 20px;
overflow-y: auto;
background: var(--hc-paper, #fffcf7);
transform: translateX(-100%);
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hc-mobile-menu__nav {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 24px;
}
.hc-mobile-menu__nav a {
display: block;
padding: 12px 14px;
color: var(--hc-ink, #1a1714);
text-decoration: none;
font-size: 16px;
border-radius: 8px;
transition: background 0.12s;
}
.hc-mobile-menu__nav a:hover,
.hc-mobile-menu__nav a.is-active {
background: rgba(212, 184, 150, 0.18);
}
.hc-mobile-menu__nav strong {
display: block;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
margin: 16px 0 6px;
padding: 0 14px;
}
/* open state — body class controls only this drawer's own visuals */
body.hc-mobile-menu-open {
overflow: hidden;
}
body.hc-mobile-menu-open .hc-mobile-menu {
opacity: 1;
pointer-events: auto;
}
body.hc-mobile-menu-open .hc-mobile-menu__panel {
transform: none;
}
/* === css/blocks/110-hc-mobile-tabbar.css === */
/* =================== hc-mobile-tabbar.css =================== */
/* hc-mobile-tabbar — bottom fixed nav strip shown only on mobile (≤640px).
* 5 items: Home / Catalog / Favorites / Compare / Cart. Premium dark glass
* with backdrop-blur. Strictly .hc-mobile-tabbar / .hc-mobile-tabbar__*. */
.hc-mobile-tabbar {
display: none;
}
@media (max-width: 640px) {
.hc-mobile-tabbar {
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
z-index: var(--hc-z-header, 50);
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
padding: 6px;
background: rgba(20, 17, 14, 0.92);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
border: 0.5px solid rgba(212, 184, 150, 0.20);
border-radius: 20px;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.18),
0 24px 50px -16px rgba(0, 0, 0, 0.42);
}
}
.hc-mobile-tabbar__item {
/* flex (not inline-flex) so items stretch to fill grid cell; min-width:0
* lets them shrink below their intrinsic content width inside the grid. */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0;
gap: 2px;
padding: 8px 4px;
background: transparent;
border: 0;
border-radius: 14px;
color: rgba(245, 240, 232, 0.66);
text-decoration: none;
cursor: pointer;
font: inherit;
font-family: var(--hc-mono, JetBrains Mono, monospace);
font-size: 10px;
letter-spacing: 0.04em;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.hc-mobile-tabbar__item span {
font-size: 20px;
line-height: 1;
color: var(--hc-gold, #d4b896);
}
.hc-mobile-tabbar__item b {
/* Truncate label cleanly when grid cell is narrower than label content. */
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.hc-mobile-tabbar__item:hover,
.hc-mobile-tabbar__item.is-active {
background: rgba(212, 184, 150, 0.14);
color: var(--hc-paper, #ffffff);
}
.hc-mobile-tabbar__item:active {
transform: scale(0.96);
}
.hc-mobile-tabbar__cart {
position: relative;
}
.hc-mobile-tabbar__cart::after {
position: absolute;
top: 6px;
right: 18%;
}
/* Sub-360px (iPhone SE / Mini in zoomed display): tighten letter-spacing
* and font-size so labels still fit before truncation kicks in. */
@media (max-width: 359px) {
.hc-mobile-tabbar__item {
font-size: 9px;
letter-spacing: 0.02em;
padding-inline: 2px;
}
.hc-mobile-tabbar__item span {
font-size: 18px;
}
}
/* === css/blocks/171-hc-wrap.css === */
/* =================== hc-wrap.css =================== */
.hc-wrap {width: 100%; max-width: var(--hc-wrap); margin: 0 auto; padding: 0 var(--hc-sp-5)}
.page-catalog .hc-wrap, .page-favorites .hc-wrap, .page-delivery .hc-wrap, .page-blog-index .hc-wrap, .page-blog-detail .hc-wrap {max-width: min(1480px, calc(100vw - 44px))}
.page-catalog .hc-wrap {max-width: min(1480px,calc(100vw - 48px))}
.page-hero .hc-wrap {position: relative; z-index: 2}
.page-shared-cart .hc-wrap {max-width: 920px}
/* === css/blocks/011-article-hero-image.css === */
/* =================== article-hero-image.css =================== */
.article-hero-image {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; margin-bottom: var(--hc-sp-5); max-height: 480px; margin: 24px 0 32px; display: block}
@media(max-width:1024px) {
.article-hero-image, .article-related-card__img {width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; display: block; border-radius: 12px}
}
/* === css/blocks/014-bb2.css === */
/* =================== bb2.css =================== */
/* bb2 - premium bundle-builder v2 ("Комплектатор Blum"). Lives at
* /bundle-builder. Wizard-style 4-step header, 3-zone main layout (filter
* sidebar / cart-table center / recommendations right), premium products
* cards in the sidebar, table-style summary in the center. Strictly
* .bb2 / .bb2__*. */
.bb2 {
--bb2-gap: clamp(16px, 1.6vw, 24px);
--bb2-pad: clamp(16px, 1.8vw, 24px);
color: var(--hc-ink, #1a1714);
}
.bb2__hero {
position: relative;
margin-bottom: var(--bb2-gap);
padding: clamp(28px, 3vw, 44px) 0 clamp(20px, 2vw, 32px);
background:
radial-gradient(800px 500px at 100% -10%, rgba(212, 184, 150, 0.18), transparent 55%),
linear-gradient(160deg, var(--hc-paper, #ffffff) 0%, rgba(247, 240, 225, 0.92) 100%);
border-bottom: 1px solid rgba(185, 154, 111, 0.22);
isolation: isolate;
}
.bb2__title {
margin: 0;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(30px, 3.5vw, 48px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--hc-ink, #1a1714);
}
.bb2__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));
}
.bb2__wizard {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 18px 0 0;
}
.bb2__wizard span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
font: 500 12.5px/1 var(--hc-sans, "Outfit", sans-serif);
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;
}
.bb2__wizard span.is-active {
background: linear-gradient(135deg, #2a2018, var(--hc-ink, #1a1714));
color: var(--hc-paper, #ffffff);
border-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 20px -8px rgba(40, 30, 15, 0.32);
}
.bb2__wizard span.is-done {
background: linear-gradient(135deg, rgba(212, 184, 150, 0.22), rgba(184, 154, 111, 0.10));
color: var(--hc-accent-dark, #5d4d3a);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.42));
}
.bb2__tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 14px;
}
.bb2__tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
font: 500 13px/1 var(--hc-sans);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
background: transparent;
border: 0.5px solid transparent;
border-radius: 9999px;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.bb2__tab:hover {
background: rgba(212, 184, 150, 0.14);
color: var(--hc-ink, #1a1714);
}
.bb2__tab.is-active {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border-color: var(--hc-ink, #1a1714);
box-shadow: 0 8px 20px -8px rgba(40, 30, 15, 0.32);
}
.bb2__tab:disabled {
opacity: 0.52;
cursor: not-allowed;
}
.bb2__tab:disabled:hover {
background: transparent;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}
.bb2__tab-count {
display: inline-flex;
align-items: center;
padding: 2px 7px;
background: rgba(212, 184, 150, 0.20);
color: var(--hc-accent-dark, #7a6548);
border-radius: 9999px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
}
.bb2__main {
display: grid;
grid-template-columns: clamp(240px, 24%, 320px) minmax(0, 1fr) clamp(280px, 26%, 360px);
gap: var(--bb2-gap);
align-items: start;
}
.bb2__left {
display: grid;
gap: 14px;
padding: var(--bb2-pad);
background: rgba(255, 252, 247, 0.86);
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 18px;
position: sticky;
top: calc(var(--hc-hdr-h, 68px) + 16px);
max-height: calc(100vh - var(--hc-hdr-h, 68px) - 32px);
overflow-y: auto;
}
.bb2__h {
margin: 14px 0 6px;
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.bb2__h:first-child {
margin-top: 0;
}
.bb2__h-reset {
font-family: var(--hc-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--hc-accent-dark, #7a6548);
background: transparent;
border: 0;
cursor: pointer;
text-transform: none;
}
.bb2__h-reset:hover {
color: var(--hc-ink, #1a1714);
}
.bb2__presets {
display: flex;
flex-direction: column;
gap: 6px;
}
.bb2__preset {
display: inline-flex;
align-items: center;
padding: 9px 12px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 10px;
font: 500 13px/1.3 var(--hc-sans);
color: var(--hc-ink, #1a1714);
cursor: pointer;
text-align: left;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.bb2__preset:hover {
background: linear-gradient(180deg, var(--hc-paper, #ffffff), rgba(212, 184, 150, 0.12));
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.4));
transform: translateX(2px);
}
/* LOCAL-PATCH 008: active state for the currently-applied scenario pill */
.bb2__preset.is-active {
background: var(--hc-ink, #1a1714);
color: var(--hc-cream, #f8f6f3);
border-color: var(--hc-ink, #1a1714);
}
.bb2__preset.is-active:hover {
background: var(--hc-ink, #1a1714);
color: var(--hc-cream, #f8f6f3);
transform: translateX(2px);
}
.bb2__search {
width: 100%;
height: 38px;
padding: 0 14px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: var(--hc-r-pill, 999px);
font: inherit;
font-size: 13px;
color: var(--hc-ink, #1a1714);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bb2__search:focus {
outline: none;
border-color: var(--hc-accent, #8b7355);
box-shadow: 0 0 0 3px rgba(212, 184, 150, 0.20);
}
.bb2__filters {
display: grid;
gap: 8px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.bb2__filter {
display: grid;
gap: 6px;
position: relative;
padding: 10px 12px 12px;
background: linear-gradient(180deg, rgba(26, 23, 20, 0.025), rgba(26, 23, 20, 0.05));
border: 1px solid rgba(141, 109, 71, 0.18);
border-radius: 10px;
transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.bb2__filter:hover {
background: linear-gradient(180deg, rgba(26, 23, 20, 0.04), rgba(26, 23, 20, 0.08));
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow: 0 6px 14px -10px rgba(40, 30, 15, 0.22);
}
.bb2__filter-lbl {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--hc-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.bb2__filter-lbl::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: linear-gradient(135deg, var(--hc-gold-1, var(--hc-gold, #d4b896)), var(--hc-gold-2, #b89968));
box-shadow: 0 0 0 2px rgba(212, 184, 150, 0.18);
flex-shrink: 0;
}
.bb2__filter-val {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 38px;
padding: 0 34px 0 12px;
background-color: var(--hc-paper, #ffffff);
background-image:
linear-gradient(45deg, transparent 50%, var(--hc-accent, #8b7355) 50%),
linear-gradient(-45deg, transparent 50%, var(--hc-accent, #8b7355) 50%);
background-position:
right 14px center,
right 9px center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
border: 0.5px solid rgba(141, 109, 71, 0.28);
border-radius: 9px;
font: inherit;
font-family: var(--hc-mono);
font-size: 12px;
letter-spacing: 0.02em;
color: var(--hc-ink, #1a1714);
cursor: pointer;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}
.bb2__filter-val:hover {
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.65));
background-color: #fffdf8;
box-shadow: 0 4px 14px -10px rgba(40, 30, 15, 0.28);
transform: translateY(-1px);
}
.bb2__filter-val:focus {
outline: none;
border-color: var(--hc-accent, #8b7355);
box-shadow:
0 0 0 3px rgba(212, 184, 150, 0.28),
0 6px 18px -10px rgba(40, 30, 15, 0.32);
transform: translateY(-1px);
}
.bb2__filter-val:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.bb2__param-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
padding: 0 16px;
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border: 0;
border-radius: var(--hc-r-pill, 999px);
font: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
margin-top: 6px;
transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.bb2__param-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #2a2018, #3d3024);
transform: translateY(-1px);
box-shadow: 0 8px 18px -8px rgba(40, 30, 15, 0.32);
}
.bb2__param-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.bb2__param-note {
margin: 0;
font-size: 11px;
line-height: 1.5;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.bb2__products {
display: grid;
gap: 8px;
max-height: 360px;
overflow-y: auto;
padding-right: 4px;
}
.bb2__prod {
display: grid;
gap: 4px;
padding: 10px 12px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 10px;
cursor: pointer;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.bb2__prod:hover {
background: linear-gradient(180deg, var(--hc-paper, #ffffff), rgba(212, 184, 150, 0.10));
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.42));
transform: translateY(-1px);
box-shadow: 0 6px 14px -6px rgba(184, 154, 111, 0.22);
}
.bb2__prod-sku {
display: inline-block;
font-family: var(--hc-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--hc-accent-dark, #7a6548);
}
.bb2__prod-name {
font-family: var(--hc-serif);
font-size: 13px;
font-weight: 500;
line-height: 1.25;
color: var(--hc-ink, #1a1714);
}
.bb2__prod-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 2px;
}
.bb2__prod-tag {
display: inline-flex;
padding: 2px 6px;
background: rgba(212, 184, 150, 0.18);
border-radius: 4px;
font-family: var(--hc-mono);
font-size: 9px;
letter-spacing: 0.04em;
color: var(--hc-accent-dark, #7a6548);
}
.bb2__prod-price {
font-family: var(--hc-serif);
font-size: 14px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
}
.bb2__empty {
margin: 12px 0;
padding: 12px 14px;
background: rgba(255, 252, 247, 0.92);
border: 0.5px dashed rgba(141, 109, 71, 0.26);
border-radius: 10px;
font-size: 12px;
line-height: 1.55;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}
.bb2__center {
display: grid;
gap: 14px;
padding: var(--bb2-pad);
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.94) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 18px;
min-width: 0;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 14px 32px -18px rgba(40, 30, 15, 0.08);
}
.bb2__center-h {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 0.5px dashed rgba(141, 109, 71, 0.22);
}
.bb2__center-title {
margin: 0;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 22px;
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.005em;
color: var(--hc-ink, #1a1714);
}
.bb2__center-sub {
font-family: var(--hc-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.bb2__center-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 14px;
border-top: 0.5px solid rgba(141, 109, 71, 0.22);
}
.bb2__empty-state {
display: grid;
gap: 12px;
padding: clamp(28px, 4vw, 56px);
text-align: center;
background: rgba(255, 252, 247, 0.6);
border: 0.5px dashed rgba(141, 109, 71, 0.32);
border-radius: 14px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}
.bb2__empty-state strong {
font-family: var(--hc-serif);
font-size: 18px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
}
.bb2__tbl-wrap {
overflow-x: auto;
}
.bb2__tbl {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.bb2__tbl thead th {
text-align: left;
padding: 8px 12px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
border-bottom: 0.5px solid rgba(141, 109, 71, 0.18);
}
.bb2__tbl tbody td {
padding: 12px;
border-bottom: 0.5px dashed rgba(141, 109, 71, 0.14);
vertical-align: middle;
}
.bb2__tbl tbody tr:hover {
background: rgba(212, 184, 150, 0.08);
}
.bb2__tbl-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.bb2__tbl-sku {
font-family: var(--hc-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--hc-accent-dark, #7a6548);
}
.bb2__tbl-name {
font-family: var(--hc-serif);
font-size: 14px;
font-weight: 500;
line-height: 1.25;
color: var(--hc-ink, #1a1714);
}
.bb2__tbl-sub {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.55));
/* LOCAL-PATCH 009: hard-limit cart-row subtitle to 2 lines so descriptions don't bloat the table */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: 2.6em;
line-height: 1.3;
}
/* LOCAL-PATCH 009: also clamp the line name itself in cart rows */
.bb2__tbl-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 2.8em;
line-height: 1.35;
}
.bb2__tbl-price {
font-family: var(--hc-mono);
font-size: 12px;
color: var(--hc-ink, #1a1714);
}
.bb2__role {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--hc-r-pill, 999px);
font-family: var(--hc-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.bb2__role--hinge {
background: linear-gradient(135deg, rgba(201, 169, 97, 0.18), rgba(139, 115, 85, 0.10)); color: var(--hc-accent-dark, #7a6548);
}
.bb2__role--drawer {
background: linear-gradient(135deg, rgba(212, 184, 150, 0.22), rgba(184, 154, 111, 0.10)); color: var(--hc-accent-dark, #7a6548);
}
.bb2__role--lift {
background: linear-gradient(135deg, rgba(61, 107, 79, 0.18), rgba(107, 164, 128, 0.10)); color: var(--hc-success, #3d6b4f);
}
.bb2__role--rail {
background: linear-gradient(135deg, rgba(58, 106, 138, 0.18), rgba(107, 143, 168, 0.10)); color: var(--hc-info, #3a6a8a);
}
.bb2__role--component {
background: rgba(26, 23, 20, 0.08); color: var(--hc-ink, #1a1714);
}
.bb2__qty {
display: inline-flex;
align-items: center;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: var(--hc-r-pill, 999px);
overflow: hidden;
}
.bb2__qty button {
width: 26px;
height: 28px;
background: transparent;
border: 0;
font-size: 14px;
color: var(--hc-ink, #1a1714);
cursor: pointer;
transition: background 0.16s ease;
}
.bb2__qty button:hover {
background: rgba(212, 184, 150, 0.22);
}
.bb2__qty input {
/* LOCAL-PATCH 004: visible qty digit between − and + (40px → fits «999») */
width: 40px;
min-width: 40px;
height: 28px;
text-align: center;
background: transparent;
border: 0;
font: inherit;
font-family: var(--hc-mono);
font-size: 14px;
font-weight: 600;
color: var(--hc-ink, #1a1714);
-moz-appearance: textfield;
appearance: textfield;
}
.bb2__qty input::-webkit-outer-spin-button,
.bb2__qty input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.bb2__qty input:focus {
outline: 1px solid rgba(141, 109, 71, 0.45);
outline-offset: -1px;
border-radius: 4px;
}
.bb2__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
font: inherit;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
border-radius: var(--hc-r-pill, 999px);
cursor: pointer;
transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.bb2__btn--primary {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
box-shadow: 0 8px 20px -8px rgba(40, 30, 15, 0.32);
}
.bb2__btn--primary:hover {
background: linear-gradient(135deg, #2a2018, #3d3024);
transform: translateY(-1px);
box-shadow: 0 14px 28px -10px rgba(40, 30, 15, 0.42);
}
.bb2__btn--ghost {
background: transparent;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
border-color: rgba(26, 23, 20, 0.18);
}
.bb2__btn--ghost:hover {
background: rgba(212, 184, 150, 0.14);
color: var(--hc-ink, #1a1714);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.42));
}
.bb2__right {
display: grid;
gap: 14px;
padding: var(--bb2-pad);
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.96) 100%);
border: 1px 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 40px -22px rgba(184, 154, 111, 0.32);
position: sticky;
top: calc(var(--hc-hdr-h, 68px) + 16px);
max-height: calc(100vh - var(--hc-hdr-h, 68px) - 32px);
overflow-y: auto;
}
.bb2__right-h {
margin: 0;
font-family: var(--hc-serif);
font-size: 18px;
font-weight: 500;
line-height: 1.2;
color: var(--hc-ink, #1a1714);
}
.bb2__right-sub {
margin: -6px 0 6px;
font-size: 12px;
line-height: 1.5;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}
.bb2__rec-group {
display: grid;
gap: 6px;
}
.bb2__rec-group-h {
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: var(--hc-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
.bb2__rec-count {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
}
.bb2__rec {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(255, 252, 247, 0.92);
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 10px;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.bb2__rec:hover {
background: var(--hc-paper, #ffffff);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.4));
transform: translateY(-1px);
}
.bb2__rec-body {
display: grid;
gap: 2px;
min-width: 0;
}
.bb2__rec-sku {
font-family: var(--hc-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--hc-accent-dark, #7a6548);
}
.bb2__rec-name {
font-family: var(--hc-serif);
font-size: 13px;
font-weight: 500;
line-height: 1.25;
color: var(--hc-ink, #1a1714);
}
.bb2__rec-price {
font-family: var(--hc-mono);
font-size: 11px;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.bb2__rec-add {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border: 0;
border-radius: 50%;
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: background 0.18s ease, transform 0.18s ease;
}
.bb2__rec-add:hover {
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
transform: scale(1.08);
}
.bb2__quality {
display: grid;
gap: 6px;
margin-top: 8px;
}
.bb2__quality-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
font-family: var(--hc-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.bb2__warn {
display: grid;
grid-template-columns: 14px 1fr;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
font-size: 12px;
line-height: 1.4;
}
.bb2__warn--warn {
background: rgba(166, 116, 38, 0.10);
border: 0.5px solid rgba(166, 116, 38, 0.32);
color: var(--hc-warning, #a67426);
}
.bb2__warn--severe {
background: rgba(201, 67, 58, 0.10);
border: 0.5px solid rgba(201, 67, 58, 0.32);
color: var(--hc-danger, #c9433a);
}
.bb2__warn--ok {
background: rgba(61, 107, 79, 0.10);
border: 0.5px solid rgba(61, 107, 79, 0.32);
color: var(--hc-success, #3d6b4f);
}
/* ──────────────────────────────────────────────────────────────────────
* Sprint12.mobile-first: progressive collapse 3-col → 2-col → 1-col
* + tabs horizontal scroll + card-row table + mobile FAB CTA.
* ────────────────────────────────────────────────────────────────────── */
/* tablet landscape: drop right column under main 2-col body */
@media (max-width: 1180px) {
.bb2__main {
grid-template-columns: clamp(220px, 28%, 300px) minmax(0, 1fr);
}
.bb2__right {
grid-column: 1 / -1;
position: static;
max-height: none;
}
/* on this width 'Ваш комплект' becomes a row of cards rather than a column */
.bb2__rec-group {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
}
}
/* tablet portrait: un-sticky filters, allow horizontal tab overflow */
@media (max-width: 900px) {
.bb2__main {
gap: 14px;
}
.bb2__left {
position: static;
max-height: none;
/* drop scroll on the left; it's full-flow now */
overflow: visible;
}
.bb2__tabs {
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
margin-left: calc(var(--bb2-pad, 16px) * -1);
margin-right: calc(var(--bb2-pad, 16px) * -1);
padding: 4px var(--bb2-pad, 16px);
-webkit-overflow-scrolling: touch;
}
.bb2__tabs::-webkit-scrollbar { display: none; }
.bb2__tab {
flex: 0 0 auto;
scroll-snap-align: start;
}
.bb2__rec-group {
grid-template-columns: 1fr 1fr;
}
}
/* phone: full 1-col stack, table → card-rows, sticky-FAB primary CTA */
@media (max-width: 640px) {
.bb2__hero {
padding-block: 14px;
}
.bb2__title {
font-size: clamp(22px, 5.4vw, 28px);
}
.bb2__lede {
font-size: 13px;
}
.bb2__main {
grid-template-columns: 1fr;
gap: 12px;
}
.bb2__left,
.bb2__center,
.bb2__right {
padding: 14px;
border-radius: 14px;
}
.bb2__rec-group {
grid-template-columns: 1fr;
}
/* table → cards */
.bb2__tbl-wrap {
margin-inline: -4px;
}
.bb2__tbl {
font-size: 13px;
}
.bb2__tbl thead { display: none; }
.bb2__tbl tbody td {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 6px 12px;
}
.bb2__tbl tbody td::before {
content: attr(data-label);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.55));
}
.bb2__tbl tbody tr {
display: grid;
gap: 2px;
padding: 12px 4px;
margin-bottom: 8px;
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 12px;
background: var(--hc-paper, #ffffff);
}
/* mobile FAB: primary submit sticks to bottom */
.bb2__btn--primary {
position: sticky;
bottom: 12px;
z-index: 5;
box-shadow:
0 8px 24px -8px rgba(40, 30, 15, 0.42),
0 2px 6px rgba(40, 30, 15, 0.12);
}
/* tighter filter pills */
.bb2__filter-val {
padding: 7px 11px;
font-size: 12px;
}
.bb2__rec {
padding: 10px;
}
.bb2__wizard {
flex-wrap: wrap;
gap: 6px;
font-size: 11px;
}
}
/* hover effects disabled on touch — avoid sticky :hover on tap */
@media (hover: none) and (pointer: coarse) {
.bb2__rec:hover,
.bb2__prod:hover,
.bb2__tab:hover,
.bb2__preset:hover {
transform: none;
background: initial;
}
}
.bb2__rec.is-added .bb2__rec-add {
background: var(--hc-ink, #1a1714); color: var(--hc-paper, #ffffff); border-color: var(--hc-ink, #1a1714);
}
.bb2__tab.is-active .bb2__tab-count {
background: rgba(255, 255, 255, 0.16);
color: var(--hc-paper, #ffffff);
}
/* v8.6 — skeleton placeholder during initial domain fetch. */
.bb2__skeleton {
display: grid;
gap: 8px;
padding: 6px 0;
}
.bb2__skeleton-row {
height: 72px;
border-radius: 12px;
background: linear-gradient(90deg, var(--hc-paper-3, #f2efe9) 0%, rgba(255, 252, 247, 0.85) 50%, var(--hc-paper-3, #f2efe9) 100%);
background-size: 200% 100%;
animation: bb2-skel 1.4s ease-in-out infinite;
}
@keyframes bb2-skel {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.bb2__skeleton-row { animation: none; }
}
/* LOCAL-PATCH 002: visible spinner inside submit button + long-wait hint */
.bb2__btn--primary.is-loading {
cursor: progress;
opacity: 0.85;
}
.bb2__spinner {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 8px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: rgba(255, 255, 255, 0.95);
border-radius: 50%;
vertical-align: -2px;
animation: bb2-spin 0.7s linear infinite;
}
@keyframes bb2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.bb2__spinner { animation: none; border-top-color: rgba(255, 255, 255, 0.95); }
}
.bb2__submit-hint {
margin: 8px 0 0;
font: 500 12px/1.4 var(--hc-sans);
color: var(--hc-muted, #8e7a5f);
text-align: right;
}
/* LOCAL-PATCH 007: loading skeleton card (prevents empty-state flash on URL ?sku= bootstrap) */
.bb2__loading-card {
padding: 32px clamp(20px, 2vw, 32px);
background: rgba(255, 252, 247, 0.86);
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 14px;
display: grid;
gap: 10px;
}
.bb2__loading-card .bb2__skeleton-row {
height: 14px;
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: bb2-skel 1.4s ease-in-out infinite;
border-radius: 4px;
}
.bb2__loading-hint {
margin: 8px 0 0;
font: 500 12px/1.4 var(--hc-mono);
letter-spacing: 0.06em;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.5));
text-transform: uppercase;
}
/* LOCAL-PATCH 011: slot-grouping inside ◎ Рекомендуется (collapsible per-label sections) */
.bb2__rec-slot {
margin-top: 8px;
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 10px;
background: rgba(255, 252, 247, 0.6);
overflow: hidden;
}
.bb2__rec-slot-h {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
background: rgba(247, 240, 225, 0.55);
border: 0;
cursor: pointer;
text-align: left;
font: 600 12px/1.2 var(--hc-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--hc-ink, #1a1714);
transition: background 0.15s ease;
}
.bb2__rec-slot-h:hover { background: rgba(247, 240, 225, 0.85); }
.bb2__rec-slot-name { flex: 1; }
.bb2__rec-slot-count {
font-family: var(--hc-mono);
font-size: 11px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.55));
}
.bb2__rec-slot-toggle {
font: 700 16px/1 var(--hc-mono);
width: 18px;
text-align: center;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.5));
}
.bb2__rec-slot-list { padding: 4px 6px 8px; }
.bb2__rec-slot-list .bb2__rec { margin-top: 6px; }
/* LOCAL-PATCH 012: "Подобрать по параметрам" — visually distinguish enabled vs disabled */
.bb2__btn--ghost:not(:disabled):hover { opacity: 0.85; cursor: pointer; }
.bb2__btn--ghost:disabled { opacity: 0.4; cursor: not-allowed; }
/* LOCAL-PATCH 013: sub-filters inside slot (mount / color / lift facets) */
.bb2__slot-filters {
display: grid;
gap: 6px;
padding: 8px 8px 10px;
border-bottom: 0.5px dashed rgba(141, 109, 71, 0.18);
margin-bottom: 4px;
}
.bb2__slot-facet {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
}
.bb2__slot-facet-lbl {
font: 600 9.5px/1 var(--hc-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
margin-right: 4px;
}
.bb2__slot-facet-pill {
padding: 3px 8px;
font: 500 11px/1.2 var(--hc-sans);
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 9999px;
color: var(--hc-ink, #1a1714);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bb2__slot-facet-pill:hover { background: rgba(212, 184, 150, 0.14); }
.bb2__slot-facet-pill.is-active {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border-color: var(--hc-ink, #1a1714);
}
.bb2__slot-empty {
padding: 10px;
text-align: center;
font: 500 11px/1.3 var(--hc-sans);
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
/* LOCAL-PATCH 013: «★ рекомендуем» badge on default-pick inside slot */
.bb2__rec.is-default { border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.7)); background: rgba(247, 240, 225, 0.4); }
.bb2__rec-badge {
display: inline-block;
padding: 1px 6px;
margin-left: 6px;
font: 600 9px/1.2 var(--hc-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: #7a5d2e;
background: rgba(212, 184, 150, 0.32);
border-radius: 9999px;
vertical-align: middle;
}
/* LOCAL-PATCH 014: kit-without-accessories info banner */
.bb2__kit-msg {
padding: 14px 16px;
margin-bottom: 12px;
background: linear-gradient(180deg, rgba(212, 184, 150, 0.18), rgba(212, 184, 150, 0.05));
border: 0.5px solid rgba(212, 184, 150, 0.45);
border-radius: 12px;
}
.bb2__kit-msg strong {
display: block;
font: 600 13px/1.2 var(--hc-sans);
color: var(--hc-ink, #1a1714);
margin-bottom: 4px;
}
.bb2__kit-msg p {
margin: 0;
font: 500 12px/1.4 var(--hc-sans);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}
.bb2__kit-msg code {
font-family: var(--hc-mono);
background: rgba(255, 252, 247, 0.8);
padding: 0 4px;
border-radius: 3px;
}
/* LOCAL-PATCH 021: mutex slot UX — show "выбрать 1", "✓ выбрано" tags + hint + radio styling */
.bb2__rec-slot.is-mutex .bb2__rec-slot-h {
background: linear-gradient(180deg, rgba(212, 184, 150, 0.20), rgba(212, 184, 150, 0.08));
}
.bb2__rec-slot.is-mutex.is-picked .bb2__rec-slot-h {
background: linear-gradient(180deg, rgba(110, 165, 130, 0.18), rgba(110, 165, 130, 0.08));
}
.bb2__rec-slot-tag {
display: inline-block;
padding: 1px 6px;
margin-left: 6px;
font: 600 9px/1.2 var(--hc-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: #7a5d2e;
background: rgba(255, 252, 247, 0.85);
border: 0.5px solid rgba(141, 109, 71, 0.3);
border-radius: 9999px;
}
.bb2__rec-slot-tag--ok {
color: #2c6f4a;
background: rgba(220, 240, 226, 0.9);
border-color: rgba(110, 165, 130, 0.45);
}
.bb2__slot-hint {
margin: 0 0 8px;
padding: 8px 10px;
background: rgba(247, 240, 225, 0.55);
border-left: 3px solid var(--hc-gold-border, rgba(212, 184, 150, 0.6));
border-radius: 0 6px 6px 0;
font: 500 11.5px/1.45 var(--hc-sans);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}
.bb2__slot-foot {
margin: 8px 0 0;
padding: 6px 8px;
font: 400 10.5px/1.4 var(--hc-sans);
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.5));
font-style: italic;
}
.bb2__rec.is-mutex.is-added { background: rgba(220, 240, 226, 0.4); border-color: rgba(110, 165, 130, 0.5); }
.bb2__rec.is-mutex .bb2__rec-add { font-size: 14px; }
/* LOCAL-PATCH 024: Standard kit preview block */
.bb2__std-kit {
padding: 14px 16px;
margin-bottom: 14px;
background: linear-gradient(180deg, rgba(110, 165, 130, 0.10), rgba(110, 165, 130, 0.03));
border: 0.5px solid rgba(110, 165, 130, 0.35);
border-radius: 12px;
}
.bb2__std-kit-h {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.bb2__std-kit-h strong {
font: 600 13px/1.2 var(--hc-sans);
color: var(--hc-ink, #1a1714);
}
.bb2__std-kit-add {
padding: 4px 10px;
font: 500 11px/1.2 var(--hc-sans);
color: #fff;
background: #2c6f4a;
border: 0;
border-radius: 9999px;
cursor: pointer;
transition: background 0.15s ease;
}
.bb2__std-kit-add:hover { background: #225a3a; }
.bb2__std-kit-sub {
margin: 0 0 8px;
font: 500 11px/1.4 var(--hc-sans);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}
.bb2__std-kit-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 4px;
}
.bb2__std-kit-item {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 6px;
padding: 6px 8px;
background: rgba(255, 252, 247, 0.7);
border: 0.5px solid rgba(141, 109, 71, 0.15);
border-radius: 8px;
font: 500 11.5px/1.3 var(--hc-sans);
}
.bb2__std-kit-item.is-added { background: rgba(220, 240, 226, 0.5); border-color: rgba(110, 165, 130, 0.45); }
.bb2__std-kit-role {
grid-column: 1 / 4;
font: 600 9.5px/1.2 var(--hc-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
margin-bottom: 2px;
}
.bb2__std-kit-sku {
font-family: var(--hc-mono);
font-size: 10.5px;
color: var(--hc-accent-dark, #7a6548);
}
.bb2__std-kit-name {
grid-column: 1 / 3;
color: var(--hc-ink, #1a1714);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bb2__std-kit-price {
font-family: var(--hc-mono);
font-size: 11px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
text-align: right;
}
.bb2__std-kit-pick {
width: 24px;
height: 24px;
font: 700 14px/1 var(--hc-mono);
background: var(--hc-paper, #fff);
border: 0.5px solid rgba(141, 109, 71, 0.4);
border-radius: 50%;
cursor: pointer;
}
.bb2__std-kit-pick:disabled { background: #2c6f4a; color: #fff; border-color: #2c6f4a; cursor: default; }
/* LOCAL-PATCH 026: doors-count row */
.bb2__doors-row {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 14px; margin-top: 8px;
background: rgba(247, 240, 225, 0.55);
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.42));
border-radius: 10px;
}
.bb2__doors-lbl { font: 600 12px/1.3 var(--hc-sans); color: var(--hc-ink, #1a1714); }
.bb2__doors-input { display: inline-flex; align-items: center; gap: 0; border: 1px solid rgba(141, 109, 71, 0.3); border-radius: 8px; overflow: hidden; }
.bb2__doors-input button { width: 28px; height: 30px; background: var(--hc-paper, #fff); border: 0; cursor: pointer; font: 600 14px/1 var(--hc-mono); }
.bb2__doors-input button:hover:not(:disabled) { background: rgba(212, 184, 150, 0.18); }
.bb2__doors-input button:disabled { opacity: 0.3; cursor: not-allowed; }
.bb2__doors-input input { width: 48px; height: 30px; border: 0; border-left: 1px solid rgba(141, 109, 71, 0.2); border-right: 1px solid rgba(141, 109, 71, 0.2); text-align: center; font: 600 13px/1 var(--hc-mono); -moz-appearance: textfield; }
.bb2__doors-input input::-webkit-outer-spin-button, .bb2__doors-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bb2__doors-hint { font: 500 11px/1.3 var(--hc-mono); color: var(--hc-accent-dark, #7a6548); }
/* LOCAL-PATCH 027: conflicts banner */
.bb2__conflicts { display: grid; gap: 6px; margin: 8px 0 0; }
.bb2__conflict {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 14px; border-radius: 8px;
font: 500 12px/1.4 var(--hc-sans);
}
.bb2__conflict--high { background: rgba(220, 60, 50, 0.10); border: 1px solid rgba(220, 60, 50, 0.35); color: #8b1d15; }
.bb2__conflict--warn { background: rgba(220, 165, 50, 0.12); border: 1px solid rgba(220, 165, 50, 0.35); color: #6b4a10; }
.bb2__conflict-icon { font-size: 14px; line-height: 1.4; flex-shrink: 0; }
/* LOCAL-PATCH 028: saved bundles list */
.bb2__saved { margin-top: 14px; padding: 14px 16px; background: rgba(255, 252, 247, 0.7); border: 0.5px solid rgba(141, 109, 71, 0.18); border-radius: 12px; }
.bb2__saved-h { margin: 0 0 8px; font: 600 12px/1.2 var(--hc-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--hc-ink-mid, rgba(26, 23, 20, 0.6)); display: flex; align-items: center; gap: 8px; }
.bb2__saved-count { padding: 1px 7px; background: var(--hc-ink, #1a1714); color: #fff; border-radius: 9999px; font-size: 10px; }
.bb2__saved-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.bb2__saved-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--hc-paper, #fff); border-radius: 8px; border: 0.5px solid rgba(141, 109, 71, 0.12); }
.bb2__saved-info { flex: 1; min-width: 0; }
.bb2__saved-name { display: block; font: 600 12.5px/1.3 var(--hc-sans); color: var(--hc-ink, #1a1714); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb2__saved-name:hover { color: var(--hc-accent-dark, #7a6548); }
.bb2__saved-meta { font: 500 10.5px/1.3 var(--hc-mono); color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6)); }
.bb2__saved-del { width: 22px; height: 22px; background: transparent; border: 0; cursor: pointer; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.5)); font: 700 14px/1 var(--hc-mono); border-radius: 50%; }
.bb2__saved-del:hover { background: rgba(220, 60, 50, 0.1); color: #8b1d15; }
/* LOCAL-PATCH 030: 2-level form tree inside slot */
.bb2__rec-slot.is-multi .bb2__rec-slot-h {
background: linear-gradient(180deg, rgba(80, 130, 180, 0.12), rgba(80, 130, 180, 0.04));
}
.bb2__rec-slot.is-multi.is-complete .bb2__rec-slot-h {
background: linear-gradient(180deg, rgba(110, 165, 130, 0.18), rgba(110, 165, 130, 0.08));
}
.bb2__rec-slot.is-multi.is-picked:not(.is-complete) .bb2__rec-slot-h {
background: linear-gradient(180deg, rgba(220, 165, 50, 0.18), rgba(220, 165, 50, 0.08));
}
.bb2__rec-slot-tag--wait {
color: #6b4a10;
background: rgba(255, 215, 130, 0.6);
border-color: rgba(220, 165, 50, 0.5);
}
.bb2__slot-forms {
display: grid;
gap: 6px;
padding: 4px 0;
}
.bb2__slot-form {
border: 0.5px solid rgba(141, 109, 71, 0.15);
border-radius: 8px;
overflow: hidden;
}
.bb2__slot-form-h {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
cursor: pointer;
background: rgba(247, 240, 225, 0.5);
font: 600 11px/1.2 var(--hc-mono);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--hc-ink, #1a1714);
border-bottom: 0.5px solid rgba(141, 109, 71, 0.15);
}
.bb2__slot-form-h:hover { background: rgba(247, 240, 225, 0.85); }
.bb2__slot-form-name { flex: 1; }
.bb2__slot-form-count {
font-size: 10px;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.bb2__slot-form-toggle {
width: 16px;
text-align: center;
font: 700 13px/1 var(--hc-mono);
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.5));
}
.bb2__slot-form-list {
padding: 4px 6px 6px;
display: grid;
gap: 4px;
}
.bb2__rec.is-multi.is-added {
background: rgba(80, 130, 180, 0.10);
border-color: rgba(80, 130, 180, 0.4);
}
.bb2__rec.is-multi .bb2__rec-add { font-size: 14px; }
.bb2__slot-foot strong { font-weight: 700; color: var(--hc-ink, #1a1714); }
/* LOCAL-PATCH 032: Bulk-import paste panel */
.bb2__bulk {
margin-top: 8px;
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 10px;
background: rgba(255, 252, 247, 0.7);
overflow: hidden;
}
.bb2__bulk-toggle {
display: flex; align-items: center; gap: 8px;
width: 100%; padding: 10px 14px;
background: transparent; border: 0; cursor: pointer;
font: 600 12px/1.2 var(--hc-sans);
color: var(--hc-ink, #1a1714);
text-align: left;
}
.bb2__bulk-toggle:hover { background: rgba(247, 240, 225, 0.6); }
.bb2__bulk-toggle.is-open { background: rgba(247, 240, 225, 0.85); }
.bb2__bulk-toggle > span:first-child { width: 18px; text-align: center; font: 700 14px/1 var(--hc-mono); color: var(--hc-accent-dark, #7a6548); }
.bb2__bulk-panel { padding: 12px 14px; }
.bb2__bulk-hint { margin: 0 0 8px; font: 500 11.5px/1.4 var(--hc-sans); color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7)); }
.bb2__bulk-hint strong { color: var(--hc-ink, #1a1714); }
.bb2__bulk-input {
width: 100%; min-height: 120px; padding: 10px 12px;
font: 500 12px/1.4 var(--hc-mono);
background: var(--hc-paper, #fff); color: var(--hc-ink, #1a1714);
border: 0.5px solid rgba(141, 109, 71, 0.25); border-radius: 8px;
resize: vertical;
}
.bb2__bulk-input:focus { outline: none; border-color: var(--hc-accent, #8b7355); box-shadow: 0 0 0 3px rgba(212, 184, 150, 0.18); }
.bb2__bulk-actions { display: flex; gap: 8px; margin-top: 8px; }
.bb2__bulk-result { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 500 11.5px/1.3 var(--hc-sans); }
.bb2__bulk-ok { color: #2c6f4a; }
.bb2__bulk-fail { color: #8b1d15; }
.bb2__bulk-err { display: block; width: 100%; font-family: var(--hc-mono); color: #8b1d15; font-size: 10.5px; }
/* LOCAL-PATCH 033: Stock badge */
.bb2__rec-stock {
display: inline-block;
font: 500 10.5px/1.3 var(--hc-mono);
letter-spacing: 0.02em;
}
.bb2__rec-stock--in { color: #2c6f4a; }
.bb2__rec-stock--eta { color: #b8731a; }
/* LOCAL-PATCH 034: color preview dot in recs/Standard Kit */
.bb2__color-dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
margin-right: 5px;
vertical-align: middle;
border: 1px solid rgba(0,0,0,0.15);
box-shadow: 0 0 0 0.5px rgba(255,255,255,0.6) inset;
}
.bb2__std-kit-name { display: flex; align-items: center; gap: 4px; }
.bb2__std-kit-stock {
grid-column: 1 / 4;
font: 500 9.5px/1.2 var(--hc-mono);
letter-spacing: 0.04em;
margin-top: 2px;
}
.bb2__std-kit-item[title] { cursor: help; }
/* LOCAL-PATCH 036: Wizard CTA on bundle-builder */
.bb2__wizard-cta {
display: inline-flex; align-items: center; gap: 12px;
margin-top: 14px;
padding: 12px 18px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.18), rgba(212, 184, 150, 0.06));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.5));
border-radius: 14px;
text-decoration: none;
color: var(--hc-ink, #1a1714);
transition: all 0.18s ease;
max-width: 540px;
}
.bb2__wizard-cta:hover {
background: linear-gradient(135deg, rgba(212, 184, 150, 0.28), rgba(212, 184, 150, 0.10));
border-color: var(--hc-accent, #8b7355);
transform: translateY(-1px);
box-shadow: 0 8px 20px -10px rgba(40, 30, 15, 0.25);
}
.bb2__wizard-cta-icon { font-size: 24px; }
.bb2__wizard-cta-text { display: grid; gap: 2px; flex: 1; }
.bb2__wizard-cta-text strong { font: 600 13.5px/1.2 var(--hc-sans); color: var(--hc-ink, #1a1714); }
.bb2__wizard-cta-text small { font: 500 11.5px/1.4 var(--hc-sans); color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7)); }
.bb2__wizard-cta-arrow { font: 600 18px/1 var(--hc-mono); color: var(--hc-accent-dark, #7a6548); }
/* ─── Sprint13: bundle wizard step progression ─── */
/* Wizard pills: done → green check + line-through, current → black, future → outline */
.bb2__wizard span.is-done {
color: var(--hc-success, #3d6b4f);
background: rgba(61, 107, 79, 0.10);
border-color: rgba(61, 107, 79, 0.30);
}
.bb2__wizard span.is-done::before {
content: "✓ ";
font-weight: 700;
}
.bb2__wizard span.is-active {
/* already styled in source — emphasise: */
box-shadow: 0 8px 20px -10px rgba(40, 30, 15, 0.42);
transform: translateY(-1px);
}
.bb2__wizard span:not(.is-active):not(.is-done) {
opacity: 0.6;
}
/* "Стандартный комплект — Добавить всё" — gold accent instead of green */
.bb2__std-kit-add {
background: linear-gradient(135deg, var(--hc-gold, #d4b896), var(--hc-gold-dark, #b89a6f));
color: var(--hc-ink, #1a1714);
border-color: var(--hc-gold-dark, #b89a6f);
}
.bb2__std-kit-add:hover {
filter: brightness(1.05);
box-shadow: 0 8px 20px -8px rgba(184, 154, 111, 0.42);
}
/* === css/blocks/250-bw.css === */
/* =================== 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;
}
/* === css/blocks/016-blog-art.css === */
/* =================== blog-art.css =================== */
.blog-art {
position: relative;
display: block;
width: 100%;
height: 100%;
min-height: 220px;
border-radius: 18px;
overflow: hidden;
background: linear-gradient(135deg, #efe3cb 0%, var(--hc-gold, #d4b896) 60%, #b89767 100%);
isolation: isolate;
}
.blog-art--featured {
min-height: 480px;
}
.blog-art::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(80% 60% at 28% 20%, rgba(255, 252, 247, 0.55), transparent 60%),
radial-gradient(60% 50% at 80% 90%, rgba(26, 23, 20, 0.18), transparent 65%);
pointer-events: none;
}
.blog-art__rings {
position: absolute;
inset: -10%;
border-radius: 50%;
border: 1px dashed rgba(26, 23, 20, 0.18);
pointer-events: none;
}
.blog-art__rings::after {
content: "";
position: absolute;
inset: 14%;
border-radius: 50%;
border: 1px dashed rgba(26, 23, 20, 0.14);
}
.blog-art__node {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(26, 23, 20, 0.55);
box-shadow: 0 0 0 4px rgba(212, 184, 150, 0.32);
}
.blog-art__node--a {
top: 18%; left: 22%;
}
.blog-art__node--b {
bottom: 22%; right: 26%;
}
.blog-art__line {
position: absolute;
top: 50%;
left: 18%;
right: 18%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(26, 23, 20, 0.4), transparent);
transform: translateY(-50%) rotate(-12deg);
}
.blog-art__mark {
position: absolute;
bottom: 18px;
left: 22px;
font: 500 11px/1 var(--hc-mono, "JetBrains Mono", monospace);
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(26, 23, 20, 0.6);
}
.hc-blog-card:nth-of-type(3n+1) .blog-art {
background: linear-gradient(135deg, #efe3cb 0%, var(--hc-gold, #d4b896) 60%, #b89767 100%);
}
.hc-blog-card:nth-of-type(3n+2) .blog-art {
background: linear-gradient(135deg, #d8c8a8 0%, #b8a07a 60%, var(--hc-accent, #8b7355) 100%);
}
.hc-blog-card:nth-of-type(3n) .blog-art {
background: linear-gradient(135deg, #efe3d3 0%, #c9b89a 60%, #a08a64 100%);
}
.hc-blog-card:hover .blog-art__rings, .blog-index__featured:hover .blog-art__rings {
animation: hcBlogRotate 18s linear infinite;
}
/* === css/blocks/017-blog-index.css === */
/* =================== blog-index.css =================== */
.blog-index__title {
margin-bottom: var(--hc-sp-2); font-family: "Playfair Display", Georgia, serif; font-size: clamp(32px, 4vw, 48px); font-weight: 400; line-height: 1.05; margin: 16px 0 8px; color: var(--hc-ink, #1a1714)
}
.blog-index__lede {
max-width: 64ch; margin-bottom: var(--hc-sp-5); font-size: 16px; line-height: 1.5; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.65)); margin: 0 0 28px
}
.blog-index__chips {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--hc-sp-5); margin: 0 0 32px
}
.blog-index__featured {
display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; padding: var(--hc-sp-4); margin-bottom: var(--hc-sp-5); background: var(--hc-paper, #ffffff); align-items: stretch; border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18)); border-radius: 20px; overflow: hidden; margin: 0 0 32px; text-decoration: none
}
.blog-index__featured-cover {
display: block; min-height: 280px; border-radius: var(--hc-r-md); background: var(--hc-paper-2, #fafaf8); overflow: hidden
}
.blog-index__featured-image {
width: 100%; height: 100%; object-fit: cover; display: block
}
.blog-index__featured-title {
margin-top: var(--hc-sp-1)
}
.blog-index__featured-title a {
color: inherit; text-decoration: none
}
.blog-index__featured-excerpt {
margin: var(--hc-sp-2) 0 var(--hc-sp-3)
}
.blog-index__featured-badges {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--hc-sp-3)
}
.blog-index__readmore {
color: var(--hc-accent-dark)
}
.blog-index__empty {
grid-column: 1 / -1
}
.blog-index__cta {
margin-top: var(--hc-sp-5); padding: var(--hc-sp-4); background: var(--hc-paper-2)
}
.blog-index__cta-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--hc-sp-3)
}
.blog-index__cta-title {
margin-top: var(--hc-sp-1)
}
@media(max-width:1024px) {
.blog-index__grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px}
.blog-index__empty.hc-empty {grid-column: 1 / -1; width: 100%; min-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 32px; text-align: center}
}
.blog-index__side-picks {
gap: 20px;
}
.blog-index__side-pick.hc-card {
display: flex;
flex-direction: column;
background: linear-gradient(180deg, var(--hc-paper, #ffffff), #fbf7ec);
border: 1px solid rgba(141, 109, 71, 0.18);
border-radius: 18px;
padding: 0;
overflow: hidden;
transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.blog-index__side-pick.hc-card:hover {
transform: translateY(-2px);
border-color: rgba(141, 109, 71, 0.4);
box-shadow: 0 18px 40px -28px rgba(27, 20, 13, 0.32);
}
.blog-index__side-pick > picture, .blog-index__side-pick > img {
width: 100%;
height: 140px;
object-fit: cover;
background: linear-gradient(135deg, #efe3cb, var(--hc-gold, #d4b896));
display: block;
}
.blog-index__side-pick > div {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.blog-index__featured-title {
font-size: clamp(28px, 2.6vw, 40px);
line-height: 1.12;
letter-spacing: -0.01em;
}
.blog-index__featured-excerpt {
font-size: 14px;
line-height: 1.55;
color: rgba(26, 23, 20, 0.65);
}
.blog-index__lead-grid {
align-items: start;
}
.blog-index__side-picks {
align-content: start;
gap: 16px;
}
.blog-index__side-pick.hc-card {
min-height: 0;
padding: 16px 18px;
}
.blog-index__side-pick .blog-index__side-pick-body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.blog-index__side-pick .blog-index__side-pick-cover {
width: 100%;
height: 140px;
object-fit: cover;
background: linear-gradient(135deg, #efe3cb, var(--hc-gold, #d4b896));
display: block;
}
/* === css/blocks/018-blog-top-signals.css === */
/* =================== blog-top-signals.css =================== */
.blog-top-signals {display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 12px 0 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26, 23, 20, 0.55); margin-top: 8px}
.blog-top-signals span {display: inline-flex; align-items: center; position: relative}
.blog-top-signals span:not(:last-child)::after {content: "·"; margin-left: 14px; color: var(--hc-line-2, rgba(180, 151, 115, 0.5))}
.blog-top-signals > span:not(.blog-top-signals__sep) {white-space: nowrap}
.blog-top-signals__sep {color: rgba(180, 151, 115, 0.6)}
/* ─── Sprint 12.short: unified blog cover style ─── */
.hc-blog-card__cover,
.hc-blog__cover,
[class*="blog-card__cover"] img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
object-fit: cover;
border-radius: 14px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.10), rgba(184, 154, 111, 0.04));
transition: transform 0.42s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-blog-card:hover [class*="cover"] img,
.hc-blog__card:hover [class*="cover"] img {
transform: scale(1.04);
}
/* === css/blocks/019-contact-intent-grid.css === */
/* =================== contact-intent-grid.css =================== */
/* contact-intent-grid — 3-up grid of quick-intent cards on /contacts:
* "Подбор по проекту" / "Опт и B2B" / "Доставка по РФ". Each card is an
* with + ; we paint an animated SVG icon via ::before
* (per-nth-child mask-image) and apply premium hover with shimmer. */
.contact-intent-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: clamp(12px, 1.4vw, 18px);
margin-top: 20px;
}
.contact-intent-grid > a {
position: relative;
display: grid;
grid-template-columns: 44px 1fr;
column-gap: 14px;
row-gap: 4px;
align-items: start;
padding: 18px 20px;
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.92) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.20);
border-radius: 14px;
text-decoration: none;
color: var(--hc-ink, #1a1714);
isolation: isolate;
overflow: hidden;
transition: transform 0.28s cubic-bezier(0.2, 0.84, 0.3, 1), border-color 0.22s, box-shadow 0.28s;
}
.contact-intent-grid > a::after {
content: "";
position: absolute;
left: -120%;
top: 0;
bottom: 0;
width: 50%;
z-index: -1;
background: linear-gradient(115deg, transparent 30%, rgba(212, 184, 150, 0.32) 50%, transparent 70%);
transition: left 0.7s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.contact-intent-grid > a:hover {
transform: translateY(-4px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.62));
box-shadow: 0 2px 4px rgba(40, 30, 15, 0.04), 0 24px 50px -22px rgba(184, 154, 111, 0.32);
}
.contact-intent-grid > a:hover::after { left: 120%; }
/* Icon tile (square gold-tint with mask-image SVG inside) */
.contact-intent-grid > a::before {
content: "";
grid-row: 1 / span 2;
width: 44px;
height: 44px;
background-color: var(--hc-accent-dark, #7a6548);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 22px 22px;
mask-size: 22px 22px;
border-radius: 12px;
background-image: linear-gradient(135deg, rgba(212, 184, 150, 0.30), rgba(184, 154, 111, 0.12));
background-color: transparent;
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.45));
position: relative;
transition: background 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1);
}
/* Inner SVG icon via second pseudo on (since ::before is the tile bg) */
.contact-intent-grid > a strong {
position: relative;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-weight: 600;
font-size: 15px;
line-height: 1.25;
color: var(--hc-ink, #1a1714);
letter-spacing: -0.005em;
}
.contact-intent-grid > a span {
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 12.5px;
line-height: 1.45;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}
.contact-intent-grid > a:hover::before {
background-image: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
transform: rotate(-6deg) scale(1.06);
}
/* Per-nth-child icon overlay (since ::before is used for tile, place icon via
inline svg in markup OR with absolute pseudo on the link itself). We use
an extra `.contact-intent-grid > a` aria-hidden inline svg slot — but
since markup is fixed, we layer the icon on top via background-image of
::before using mask-image instead of bg. */
.contact-intent-grid > a:nth-child(1)::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
background-image: linear-gradient(135deg, rgba(212, 184, 150, 0.45), rgba(184, 154, 111, 0.22));
background-color: var(--hc-accent-dark, #7a6548);
border: 0;
border-radius: 12px;
/* Reset — we use mask + flat color */
}
.contact-intent-grid > a:nth-child(2)::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
background-color: var(--hc-accent-dark, #7a6548);
border: 0;
}
.contact-intent-grid > a:nth-child(3)::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
background-color: var(--hc-accent-dark, #7a6548);
border: 0;
}
.contact-intent-grid > a:hover::before {
background-color: #2a2018;
}
/* === css/blocks/020-contact-list.css === */
/* =================== contact-list.css =================== */
.contact-list {list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0}
.contact-list > li {padding: var(--hc-sp-2) 0; border-bottom: 1px solid var(--hc-line)}
.contact-list a {display: flex; align-items: baseline; gap: 4px; padding: 6px 0; text-decoration: none; color: var(--hc-ink, #1a1714); border-bottom: 0.5px solid rgba(180, 151, 115, 0.10); background: rgba(255, 255, 255, 0.6); border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18)); border-radius: 12px; flex-direction: column; transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease}
.contact-list a:last-child {border-bottom: none}
.contact-list a strong {font-weight: 400; color: var(--hc-ink, #1a1714); flex-shrink: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 15px}
.contact-list a span {color: var(--hc-accent-dark, #5d4d3a); font-weight: 500; font-size: 12px}
.contact-list a:hover {border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.5)); background: rgba(255, 255, 255, 0.95); transform: translateX(2px)}
.contact-list a:hover span {text-decoration: underline}
.contact-list strong {margin-right: 8px}
/* On ink-tinted cards (premium-surface--highlight) keep links readable. */
.premium-surface--highlight .contact-list a {
color: rgba(252, 248, 240, 0.92);
background: rgba(255, 252, 247, 0.04);
border-color: rgba(212, 184, 150, 0.22);
}
.premium-surface--highlight .contact-list a strong {color: #fffdf8}
.premium-surface--highlight .contact-list a span {color: var(--hc-gold-1, var(--hc-gold, #d4b896))}
.premium-surface--highlight .contact-list a:hover {
background: rgba(212, 184, 150, 0.10);
border-color: rgba(212, 184, 150, 0.55);
}
/* === css/blocks/021-contact-map-shell.css === */
/* =================== contact-map-shell.css =================== */
/* contact-map-shell - container for the map on /contacts. When the Yandex
* iframe hasn't loaded (or as a permanent backdrop), show a branded
* topographic placeholder so the area never reads as "empty gray box".
* Strictly .contact-map-shell. */
.contact-map-shell {
position: relative;
width: 100%;
min-height: 360px;
margin-top: clamp(16px, 2vw, 28px);
background:
/* Marker pin (CSS-painted) */
radial-gradient(circle at 50% 38%, rgba(201, 67, 58, 0.92) 0, rgba(201, 67, 58, 0.92) 9px, transparent 10px),
radial-gradient(circle at 50% 38%, rgba(201, 67, 58, 0.18) 0, rgba(201, 67, 58, 0.18) 22px, transparent 23px),
/* Faux topographic contour lines */
repeating-radial-gradient(
circle at 50% 50%,
transparent 0,
transparent 38px,
rgba(122, 101, 72, 0.10) 39px,
transparent 40px
),
/* Faux road network grid */
linear-gradient(35deg, transparent 49%, rgba(122, 101, 72, 0.14) 49.5%, rgba(122, 101, 72, 0.14) 50.5%, transparent 51%),
linear-gradient(125deg, transparent 49%, rgba(122, 101, 72, 0.10) 49.5%, rgba(122, 101, 72, 0.10) 50.5%, transparent 51%),
/* Base */
radial-gradient(circle at 20% 30%, rgba(255, 252, 247, 0.7), transparent 50%),
linear-gradient(160deg, #f7f3ea 0%, #efe8da 60%, #e3d9c4 100%);
border: 1px solid rgba(141, 109, 71, 0.22);
border-radius: clamp(16px, 1.6vw, 22px);
overflow: hidden;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.04),
0 22px 50px -28px rgba(40, 30, 15, 0.22);
}
.contact-map-shell::before {
content: "Долгопрудный, Лихачёвский пр-д, 33с1";
position: absolute;
left: 50%;
top: calc(38% + 32px);
transform: translateX(-50%);
padding: 8px 16px;
background: linear-gradient(180deg, rgba(28, 24, 20, 0.96), rgba(17, 14, 12, 0.99));
color: var(--hc-paper, #ffffff);
border-radius: var(--hc-r-pill, 999px);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
white-space: nowrap;
box-shadow: 0 8px 18px -6px rgba(40, 30, 15, 0.4);
pointer-events: none;
z-index: 1;
}
.contact-map-shell::after {
content: "Самовывоз и склад · Пн–Сб 09:00–19:00";
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
padding: 6px 12px;
background: rgba(255, 252, 247, 0.94);
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.55));
color: var(--hc-accent-dark, #5d4d3a);
border-radius: var(--hc-r-pill, 999px);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
pointer-events: none;
z-index: 1;
}
/* If iframe or div with real map renders inside, it covers the placeholder */
.contact-map-shell iframe,
.contact-map-shell [class*="map"]:not(.contact-map-shell) {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
min-height: inherit;
border: 0;
border-radius: inherit;
}
/* When real map is present, turn placeholder labels off so they never
* overlap with live map controls / tiles. */
.contact-map-shell:has(iframe)::before,
.contact-map-shell:has(iframe)::after {
opacity: 0;
}
/* === css/blocks/023-delivery-faq.css === */
/* =================== delivery-faq.css =================== */
/* delivery-faq — FAQ list on /delivery (and other pages reusing the layout).
Owns: centering, surrounding card, numbering badge placed before each .faq
summary. Strictly scoped to .delivery-faq* — does not touch .faq internals. */
.delivery-faq {
counter-reset: deliveryFaq;
max-width: 820px;
margin: 0 auto;
background: var(--hc-paper, #ffffff);
border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
border-radius: var(--hc-r-lg, 16px);
box-shadow: var(--hc-sh-3, 0 8px 28px rgba(26, 23, 20, 0.06));
overflow: hidden;
}
.delivery-faq > .faq {
counter-increment: deliveryFaq;
position: relative;
padding-left: 64px;
}
.delivery-faq > .faq::before {
content: counter(deliveryFaq, decimal-leading-zero);
position: absolute;
left: 22px;
top: 22px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--hc-accent, #8b7355);
}
.delivery-faq__link {
color: var(--hc-accent-dark, #5d4d3a);
font-weight: 500;
}
@media (max-width: 480px) {
.delivery-faq > .faq { padding-left: 52px; }
.delivery-faq > .faq::before{ left: 16px; top: 18px; font-size: 11px; }
}
/* === css/blocks/024-delivery-intents.css === */
/* =================== delivery-intents.css =================== */
.delivery-intents {margin-top: var(--hc-sp-4); padding: 24px; background: var(--hc-paper, #ffffff); border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18)); border-radius: 20px; margin-bottom: clamp(24px, 3.2vw, 40px); margin: 24px 0}
.delivery-intents__grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px}
.delivery-intents__text {margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.65)); margin: 0}
.delivery-intents__grid > div {padding: 18px 20px; background: rgba(255, 252, 247, 0.65); border: 0.5px solid rgba(180, 151, 115, 0.12); border-radius: 12px; transition: background 0.2s ease, border-color 0.2s ease}
.delivery-intents__grid > div:hover {background: rgba(255, 252, 247, 0.95); border-color: rgba(180, 151, 115, 0.32)}
.delivery-intents__grid > div strong {display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 17px; color: var(--hc-ink, #1a1714); margin-bottom: 6px}
/* === css/blocks/025-delivery-sec-title.css === */
/* =================== delivery-sec-title.css =================== */
/* delivery-sec-title — variant of .t-title used on /delivery. Centers itself;
doesn't touch sibling elements (eyebrow / body) — those keep their own styles. */
.delivery-sec-title {
text-align: center;
margin-bottom: 20px;
}
.delivery-sec-title + .delivery-faq,
.delivery-sec-title ~ .delivery-faq {
margin-top: 32px;
}
/* === css/blocks/026-delivery-stats.css === */
/* =================== delivery-stats.css =================== */
/* delivery-stats — 3-up stat row on /delivery: ОТ 1 ДНЯ / 4 СПОСОБА / 0 ₽.
* Each tile gets a premium animated SVG icon via ::before mask (per-nth)
* and serif metric + mono label. */
.delivery-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: clamp(12px, 1.4vw, 18px);
margin: 0 0 clamp(20px, 2.6vw, 32px);
}
.delivery-stats__item {
position: relative;
display: grid;
grid-template-columns: 44px 1fr;
column-gap: 14px;
row-gap: 4px;
align-items: center;
padding: 20px 22px 20px 22px;
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.92) 100%);
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.42));
border-radius: 16px;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 14px 32px -22px rgba(40, 30, 15, 0.14);
transition: transform 0.28s cubic-bezier(0.2, 0.84, 0.3, 1), border-color 0.22s, box-shadow 0.28s;
isolation: isolate;
overflow: hidden;
}
.delivery-stats__item::before {
content: "";
grid-row: 1 / span 2;
width: 44px;
height: 44px;
background-color: var(--hc-accent-dark, #7a6548);
border-radius: 12px;
-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;
transition: background-color 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.delivery-stats__item::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(360px 200px at 80% -10%, rgba(212, 184, 150, 0.20), transparent 60%);
opacity: 0;
transition: opacity 0.32s ease;
}
.delivery-stats__item:hover {
transform: translateY(-4px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.62));
box-shadow: 0 2px 4px rgba(40, 30, 15, 0.04), 0 26px 50px -20px rgba(184, 154, 111, 0.32);
}
.delivery-stats__item:hover::before {
background-color: #2a2018;
transform: rotate(-6deg) scale(1.06);
}
.delivery-stats__item:hover::after { opacity: 1; }
/* Per-nth icon: 1=clock, 2=grid, 3=warehouse */
.delivery-stats__item:nth-child(1)::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.delivery-stats__item:nth-child(2)::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.delivery-stats__item:nth-child(3)::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.delivery-stats__v {
margin: 0;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-weight: 500;
font-size: clamp(26px, 2.6vw, 34px);
line-height: 1;
letter-spacing: -0.01em;
color: var(--hc-ink, #1a1714);
}
.delivery-stats__v small {
/* Unit-suffix label ("дня", "₽"). Mono + tracked uppercase reads as a
* continuation of the metric, not a floating super-/sub-script. The
* vertical-align nudge plants the x-height near the cap-height of the
* adjacent serif numeral. */
display: inline-block;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-weight: 600;
font-size: 0.36em;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
vertical-align: 0.62em;
margin-left: 0.32em;
}
.delivery-stats__k {
margin: 0;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
line-height: 1.3;
}
/* ---- folded from 034-g4.css ---- */
.g4 {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px
}
.page-delivery .g4 {
align-items: stretch
}
@media(max-width:1024px) {
.page-delivery .g4 {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch}
}
/* === css/blocks/027-delivery-table.css === */
/* =================== delivery-table.css =================== */
.delivery-table {width: 100%; min-width: 500px; border-collapse: collapse; font-size: 14px}
.delivery-table thead tr {border-bottom: 2px solid var(--hc-line-2)}
.delivery-table th {text-align: left; padding: 12px; font-family: var(--hc-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--hc-ink-mid)}
.delivery-table td {padding: 12px}
.delivery-table tbody tr {border-bottom: 1px solid var(--hc-line)}
.delivery-table tbody tr:last-child {border-bottom: 0}
.delivery-table tbody td:first-child {font-weight: 600}
.delivery-table thead th {text-align: left; padding: 14px 16px; font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hc-ink-mid, rgba(26, 23, 20, 0.6)); font-weight: 500; background: rgba(248, 244, 237, 0.4); border-bottom: 0.5px solid rgba(180, 151, 115, 0.18)}
.delivery-table tbody td {padding: 14px 16px; border-bottom: 0.5px solid rgba(180, 151, 115, 0.08); color: var(--hc-ink, #1a1714)}
.delivery-table tbody tr:last-child td {border-bottom: none}
.delivery-table tbody tr:hover {background: rgba(255, 252, 247, 0.5)}
.delivery-table th:last-child,
.delivery-table td:last-child {
min-width: 200px;
}
@media (max-width: 768px) {
.delivery-table th:last-child,
.delivery-table td:last-child {
min-width: auto;
}
}
/* ─── folded from delivery-table-wrap.css ─── */
.delivery-table-wrap {overflow-x: auto; border-radius: 14px; margin: 24px 0; border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18)); overflow: hidden}
@media(max-width:1024px) {
.delivery-table-wrap table, .hc-table {width: 100%; border-collapse: collapse; font-size: 14px}
}
/* ---- folded from 022-delivery-b2b.css ---- */
/* =================== delivery-b2b.css =================== */
.delivery-b2b p {font-size: 15px; color: var(--hc-ink-soft); line-height: 1.7; margin-bottom: 16px}
/* === css/blocks/030-faq.css === */
/* =================== faq.css =================== */
/* faq — single accordion item …
…) для facet'ов с >5 значениями. */
.hc-cat-filters__section--collapsible {
list-style: none;
}
.hc-cat-filters__section--collapsible > .hc-cat-filters__section-head {
cursor: pointer;
user-select: none;
list-style: none;
position: relative;
padding-right: 24px;
}
.hc-cat-filters__section--collapsible > .hc-cat-filters__section-head::-webkit-details-marker {
display: none;
}
.hc-cat-filters__section--collapsible > .hc-cat-filters__section-head::after {
content: "";
position: absolute;
right: 4px;
top: 50%;
width: 8px;
height: 8px;
border-right: 1.4px solid var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
border-bottom: 1.4px solid var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
transform: translateY(-70%) rotate(45deg);
transition: transform 0.18s ease;
}
.hc-cat-filters__section--collapsible[open] > .hc-cat-filters__section-head::after {
transform: translateY(-30%) rotate(225deg);
}
.hc-cat-filters__section-count {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 500;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
margin-left: auto;
}
.hc-cat-filters__section-head h4,
.hc-cat-filters h4 {
margin: 0;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.hc-cat-filters__section-head h4::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
margin-right: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--hc-gold-1, #d4b896), var(--hc-accent, #8b7355));
vertical-align: middle;
}
/* .hc-small in filter heads is owned here, not in generic small.css */
.hc-cat-filters__section-head .hc-small,
.hc-cat-filters__section-head span {
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(26, 23, 20, 0.45);
white-space: nowrap;
}
.hc-cat-filters__section-head .hc-small {
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.42));
}
/* ─── categories stack ─── */
.hc-cat-filters__category-stack,
.hc-cat-filters__category-scroll {
display: grid;
gap: 2px;
width: 100%;
max-width: 100%;
}
.hc-cat-filters__category-scroll {
max-height: 320px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(141, 109, 71, 0.3) transparent;
}
.hc-cat-filters__cat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: 8px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72));
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
cursor: pointer;
word-break: break-word;
overflow-wrap: anywhere;
transition: background 0.16s ease, color 0.16s ease;
}
.hc-cat-filters__cat:hover {
background: rgba(212, 184, 150, 0.14);
color: var(--hc-ink, #1a1714);
}
.hc-cat-filters__cat.hc-chip--active,
.hc-cat-filters__cat[aria-current="true"] {
background: rgba(212, 184, 150, 0.22);
color: var(--hc-ink, #1a1714);
font-weight: 600;
}
.hc-cat-filters__cat .hc-chip__count {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 500;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
}
/* ─── quick grid (В наличии / Со скидкой / Новинки / Хиты) ─── */
.hc-cat-filters__quick-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
width: 100%;
}
/* ─── facet (checkbox row) ─── */
.hc-cat-filters__facet {
display: grid;
grid-template-columns: 16px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
width: 100%;
padding: 6px 8px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 500;
line-height: 1.3;
color: var(--hc-ink, #1a1714);
cursor: pointer;
word-break: break-word;
overflow-wrap: anywhere;
transition: background 0.16s ease;
}
.hc-cat-filters__facet:hover {
background: rgba(212, 184, 150, 0.14);
}
.hc-cat-filters__facet-label {
min-width: 0;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: normal;
overflow-wrap: normal;
}
.hc-cat-filters__facet--tile {
flex-wrap: wrap;
border: 0.5px solid rgba(141, 109, 71, 0.18);
padding: 9px 11px;
background: var(--hc-paper, #ffffff);
}
.hc-cat-filters__facet input[type="checkbox"],
.hc-cat-filters__facet .hc-checkbox {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
margin: 0;
background: var(--hc-paper, #ffffff);
border: 1.4px solid rgba(141, 109, 71, 0.42);
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
position: relative;
transition: background 0.18s ease, border-color 0.18s ease;
}
.hc-cat-filters__facet input[type="checkbox"]:hover,
.hc-cat-filters__facet .hc-checkbox:hover {
border-color: var(--hc-accent-dark, #5d4d3a);
}
.hc-cat-filters__facet input[type="checkbox"]:checked,
.hc-cat-filters__facet .hc-checkbox:checked {
background: linear-gradient(135deg, var(--hc-gold-1, #d4b896), var(--hc-accent, #8b7355));
border-color: var(--hc-accent-dark, #5d4d3a);
}
.hc-cat-filters__facet input[type="checkbox"]:checked::after,
.hc-cat-filters__facet .hc-checkbox:checked::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--hc-paper, #ffffff);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 12px 12px;
mask-size: 12px 12px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.hc-cat-filters__facet small {
margin-left: auto;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 500;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
flex-shrink: 0;
}
/* ─── facet-stack (vertical list of facets для group) ─── */
.hc-cat-filters__facet-stack {
display: grid;
gap: 2px;
width: 100%;
}
/* ─── price ─── */
.hc-cat-filters__price-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.hc-cat-filters__price-input {
height: 36px;
padding: 8px 12px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 10px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 13px;
color: var(--hc-ink, #1a1714);
}
.hc-cat-filters__price-input:focus {
outline: none;
border-color: var(--hc-accent, #8b7355);
box-shadow: 0 0 0 3px rgba(212, 184, 150, 0.20);
}
/* ─── price slider (single owner: hc-cat-filters) ─── */
.hc-cat-filters .hc-price-slider {
display: flex;
flex-direction: column;
gap: 10px;
padding: 6px 0;
}
.hc-cat-filters .hc-price-slider__track {
position: relative;
height: 4px;
background: rgba(141, 109, 71, 0.16);
border-radius: 999px;
margin: 12px 6px 6px;
}
.hc-cat-filters .hc-price-slider__track::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.hc-cat-filters .hc-price-slider__fill {
position: absolute;
inset: 0;
height: 4px;
background: var(--hc-accent, #8b7355);
border-radius: 999px;
}
.hc-cat-filters .hc-price-slider__thumb {
position: absolute;
top: 50%;
width: 100%;
height: 0;
margin: 0;
pointer-events: none;
-webkit-appearance: none;
appearance: none;
background: transparent;
border: 0;
outline: none;
transform: translateY(-50%);
}
.hc-cat-filters .hc-price-slider__thumb::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--hc-ink, #1a1714);
border: 2px solid var(--hc-paper, #ffffff);
box-shadow: 0 2px 6px rgba(20, 17, 14, 0.18);
pointer-events: auto;
cursor: pointer;
}
.hc-cat-filters .hc-price-slider__thumb::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--hc-ink, #1a1714);
border: 2px solid var(--hc-paper, #ffffff);
box-shadow: 0 2px 6px rgba(20, 17, 14, 0.18);
pointer-events: auto;
cursor: pointer;
}
.hc-cat-filters .hc-price-slider__bounds {
display: flex;
justify-content: space-between;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(26, 23, 20, 0.50);
font-variant-numeric: tabular-nums;
margin-top: 4px;
}
.hc-cat-filters--premium .hc-price-slider {
padding: 8px 4px 0;
}
.hc-cat-filters--premium .hc-price-slider__track {
height: 28px;
margin: 8px 0 14px;
background: transparent;
}
.hc-cat-filters--premium .hc-price-slider__track::before {
top: 50%;
bottom: auto;
height: 3px;
transform: translateY(-50%);
background: rgba(180, 151, 115, 0.20);
border-radius: 2px;
}
.hc-cat-filters--premium .hc-price-slider__fill {
top: 50%;
bottom: auto;
left: 0;
right: 0;
height: 3px;
transform: translateY(-50%);
background: linear-gradient(90deg, var(--hc-gold, #d4b896), var(--hc-accent, #8b7355));
border-radius: 2px;
}
.hc-cat-filters--premium .hc-price-slider__thumb {
inset: 0;
width: 100%;
height: 28px;
transform: none;
}
.hc-cat-filters--premium .hc-price-slider__thumb::-webkit-slider-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--hc-paper, #ffffff);
border: 2px solid var(--hc-ink, #1a1714);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
}
.hc-cat-filters--premium .hc-price-slider__thumb::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--hc-paper, #ffffff);
border: 2px solid var(--hc-ink, #1a1714);
}
/* ─── actions (sticky bottom) ─── */
.hc-cat-filters__actions {
position: sticky;
bottom: 0;
display: grid;
gap: 8px;
width: 100%;
margin-top: 12px;
padding: 14px 0 0;
background: linear-gradient(180deg, transparent, var(--hc-paper, #ffffff) 30%);
border-top: 0.5px solid rgba(141, 109, 71, 0.22);
}
/* ─── applied chips strip ─── */
.hc-cat-filters__applied {
display: flex;
flex-wrap: wrap;
gap: 6px;
width: 100%;
padding: 12px;
margin: 0 0 12px;
background: linear-gradient(180deg, rgba(212, 184, 150, 0.14), rgba(184, 154, 111, 0.06));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.42));
border-radius: 12px;
box-sizing: border-box;
}
.hc-cat-filters__applied-label {
font-family: var(--hc-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-accent-dark, #5d4d3a);
}
.hc-cat-filters__applied-clear {
margin-left: auto;
background: transparent;
border: 0;
font-family: var(--hc-mono);
font-size: 10px;
color: var(--hc-accent-dark, #5d4d3a);
cursor: pointer;
}
/* ---- folded from 059-hc-cat-filter-chip.css ---- */
.hc-cat-filter-chip[aria-pressed="true"],
.hc-cat-filter-chip.is-active {
background:rgba(212,184,150,0.22);
border-color:#c8a96a;
}
.hc-cat-filter-chip[aria-pressed="true"]::after,
.hc-cat-filter-chip.is-active::after {
content:"✓";
margin-left:5px;
color:var(--hc-accent-dark, #5d4d3a);
font-weight:700;
}
/* ---- folded from 067-hc-cat-results-loading.css ---- */
.hc-cat-results-loading {display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: var(--hc-paper, #ffffff); padding: 12px 0; border-radius: 12px}
/* === css/blocks/063-hc-cat-head.css === */
/* =================== hc-cat-head.css =================== */
/* hc-cat-head - premium catalog page header. Owns breadcrumbs slot, eyebrow,
* editorial title, lede, big serif stats, quick-filter chip row, and the 3-up
* guide grid (How to choose / What to look for / If in doubt). Strictly
* .hc-cat-head / .hc-cat-head__*. */
.hc-cat-head {
position: relative;
overflow: hidden;
isolation: isolate;
margin-bottom: 14px;
padding: 20px 26px 16px;
background:
radial-gradient(700px 360px at 100% -20%, rgba(212, 184, 150, 0.18), transparent 55%),
linear-gradient(150deg, var(--hc-paper, #ffffff) 0%, rgba(247, 241, 230, 0.92) 100%);
border: 0.5px solid rgba(185, 154, 111, 0.22);
border-radius: 16px;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 12px 32px -22px rgba(40, 30, 15, 0.14);
/* 2-col grid: title+lede left, stats top-right, chips full-width below.
Eliminates the empty top-right whitespace the user flagged. */
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: clamp(20px, 2vw, 36px);
row-gap: 6px;
align-items: start;
}
.hc-cat-head > .hc-crumbs {
grid-column: 1 / -1;
font: 500 12px/1 var(--hc-sans, "Outfit", sans-serif);
color: var(--hc-muted, #6b6660);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.hc-cat-head__title {
grid-column: 1; grid-row: 2;
}
.hc-cat-head__desc {
grid-column: 1; grid-row: 3;
}
.hc-cat-head__stats {
grid-column: 2; grid-row: 2 / span 2; align-self: end; margin-top: 0;
}
.hc-cat-head > .hc-cat-head__guide {
grid-column: 1 / -1; grid-row: 4;
}
.hc-cat-head::before {
content: "";
position: absolute;
right: -8%;
top: -40%;
width: 420px;
height: 420px;
z-index: 0;
pointer-events: none;
background: radial-gradient(circle, rgba(199, 155, 96, 0.24), transparent 64%);
border-radius: 50%;
filter: blur(20px);
}
.hc-cat-head > * {
position: relative; z-index: 1;
}
.hc-cat-head__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(30px, 3.6vw, 46px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--hc-ink, #1a1714);
margin: 0 0 var(--hc-sp-1);
}
.hc-cat-head__desc {
max-width: 56ch;
margin: 0 0 var(--hc-sp-3);
font-size: clamp(14px, 1.1vw, 16px);
line-height: 1.55;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}
.hc-cat-head__stats {
display: inline-flex;
flex-wrap: wrap;
gap: clamp(16px, 2vw, 24px);
margin-top: 0;
padding: 12px 18px;
background: rgba(255, 252, 247, 0.78);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 12px;
}
.hc-cat-head__stat {
display: flex;
flex-direction: column;
gap: 3px;
}
.hc-cat-head__stat b {
display: block;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(22px, 2vw, 28px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
color: var(--hc-ink, #1a1714);
font-variant-numeric: tabular-nums;
}
.hc-cat-head__stat span {
display: block;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
/* "Быстрый фильтр:" chip row — tightly packed below stats */
.hc-cat-head__quick-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 0;
margin-bottom: var(--hc-sp-3);
}
.hc-cat-head__quick-label {
display: inline-flex;
align-items: center;
margin-right: 8px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
/* guide block — HIDDEN by default. The 3 "How to choose / What to watch /
If in doubt" tips were eating vertical space in the hero. They live in
the catalog FAQ section instead. The container's chip row stays visible
(we lift the .hc-cat-head__quick-row out of the visual frame below). */
.hc-cat-head__guide {
margin: 0;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
}
.hc-cat-head__guide-grid {
display: none;
}
.page-catalog .hc-cat-head__guide-grid > div {
min-width: 0;
display: grid;
gap: 6px;
}
.page-catalog .hc-cat-head__guide-grid strong {
display: block;
line-height: 1.22;
}
.hc-cat-head__guide-cell {
position: relative;
display: grid;
grid-template-columns: 28px 1fr;
column-gap: 12px;
row-gap: 6px;
padding-left: 0;
transition: transform 0.22s ease;
}
.hc-cat-head__guide-cell:hover {
transform: translateY(-2px);
}
.hc-cat-head__guide-ico {
grid-row: 1 / span 2;
align-self: start;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: rgba(212, 184, 150, 0.18);
color: var(--hc-accent-dark, #7a6548);
border-radius: 8px;
transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.hc-cat-head__guide-ico svg {
width: 18px;
height: 18px;
}
.hc-cat-head__guide-cell strong, .hc-cat-head__guide-grid strong {
display: block;
font-family: var(--hc-sans);
font-size: 12.5px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--hc-ink, #1a1714);
}
.hc-cat-head__guide-text {
margin: 0;
max-width: 38ch;
font-size: 12px;
line-height: 1.5;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
overflow-wrap: anywhere;
}
@media (max-width: 768px) {
.hc-cat-head {
padding: var(--hc-sp-5) var(--hc-sp-4);
grid-template-columns: 1fr;
row-gap: 10px;
}
.hc-cat-head__stats {
gap: var(--hc-sp-3);
grid-column: 1;
grid-row: auto;
justify-self: start;
align-self: start;
width: fit-content;
max-width: 100%;
}
.hc-cat-head__guide-grid {
grid-template-columns: 1fr;
gap: var(--hc-sp-3);
}
.hc-cat-head__title {
font-size: clamp(28px, 8vw, 38px);
}
}
@media (max-width: 1024px) {
.page-catalog .hc-cat-head,
.page-catalog .hc-cat-head__row,
.page-catalog .hc-cat-head__meta {
min-width: 0;
}
.page-catalog .hc-cat-head__title,
.page-catalog .hc-cat-head h1 {
overflow-wrap: anywhere;
}
}
@media (max-width: 480px) {
.hc-cat-head {
padding: var(--hc-sp-4) var(--hc-sp-3);
border-radius: 14px;
}
}
.hc-cat-head__guide-cell:hover .hc-cat-head__guide-ico {
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
transform: rotate(-6deg) scale(1.08);
}
/* === css/blocks/065-hc-cat-page.css === */
/* =================== hc-cat-page.css =================== */
/* hc-cat-page — catalog page outer grid (aside + main). Owns the layout that
wraps the filter sidebar and the results column. Below 1024px it collapses
to a single column; the sidebar then becomes a slide-in drawer (rules in
hc-cat-filter-aside.css). Strictly .hc-cat-page*. */
.hc-cat-page {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: clamp(18px, 2.1vw, 30px);
align-items: start;
}
.hc-cat-results-wrap {
position: relative;
min-height: 200px;
}
.hc-cat-grid > *,
.g4 > *,
.products-grid > *,
.hc-cat-grid__item {
height: 100%;
}
@media (max-width: 1024px) {
.hc-cat-page {
grid-template-columns: 1fr;
gap: var(--hc-sp-4);
}
}
/* === css/blocks/066-hc-cat-postgrid.css === */
/* =================== hc-cat-postgrid.css =================== */
.hc-cat-postgrid--premium {margin-top: var(--hc-sp-5); padding: var(--hc-sp-4); background: linear-gradient(135deg,var(--hc-paper),var(--hc-paper-2))}
.hc-cat-postgrid__grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: var(--hc-sp-3)}
.hc-cat-postgrid__title {margin-top: var(--hc-sp-1)}
.hc-cat-postgrid__muted {margin-top: 6px}
.hc-cat-postgrid__cta-wrap {display: flex; align-items: center}
/* === css/blocks/069-hc-cat-sm.css === */
/* =================== hc-cat-sm.css =================== */
.hc-cat-sm {position: relative; overflow: hidden; isolation: isolate; background: var(--hc-bg, #f8f6f3); transition: transform 0.22s ease, border-color 0.22s ease; padding: clamp(20px, 2.4vw, 28px); border: 1px solid rgba(26, 23, 20, 0.08); border-radius: 22px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: var(--hc-ink, #1a1714)}
.hc-cat-sm::before {content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 88% 0%, var(--hc-glow-color) 0%, transparent 55%); opacity: 0; transition: opacity 0.35s ease; z-index: 0; pointer-events: none}
.hc-cat-sm > * {position: relative; z-index: 1}
.hc-cat-sm__bg {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0}
.hc-cat-sm::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.9) 100%); z-index: 0}
.hc-cat-sm:hover {transform: translateY(-3px); border-color: rgba(185, 154, 111, 0.42); box-shadow: 0 26px 60px -22px var(--hc-glow-color),
0 6px 18px rgba(27, 20, 13, 0.08)}
.hc-cat-sm:hover::before {opacity: 1}
.hc-cat-sm__title {transition: color 0.25s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-size: clamp(20px, 2vw, 26px); letter-spacing: var(--hc-ls-tight); font-weight: 400; margin-top: auto; line-height: 1; position: relative; z-index: 2}
.hc-cat-sm:hover .hc-cat-sm__title {color: var(--hc-accent-dark); transform: translateX(4px)}
.hc-cat-sm__count {transition: color 0.25s ease; font-size: 11px; color: var(--hc-muted, rgba(26, 23, 20, 0.55)); letter-spacing: 0.06em; font-family: var(--hc-mono, "JetBrains Mono", monospace); position: relative; z-index: 2}
.hc-cat-sm:hover .hc-cat-sm__count {color: var(--hc-accent)}
.hc-cat-sm {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
min-height: 220px;
padding: 20px;
background: var(--hc-paper, #ffffff);
border: 1px solid rgba(0, 0, 0, .06);
border-radius: 16px;
text-decoration: none;
color: inherit;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hc-cat-sm:hover {
transform: translateY(-3px);
border-color: rgba(141, 109, 71, .25);
box-shadow: 0 14px 28px rgba(20, 17, 14, .06);
}
.hc-cat-sm--blum {
min-height: 240px;
background:
linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,252,246,.42)),
radial-gradient(circle at 78% 22%, rgba(212,184,150,.28), transparent 42%),
linear-gradient(180deg, #f7f2e8, #b79e7a);
}
.hc-cat-sm--blum::after {
background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.76));
}
.hc-cat-sm__visual {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1.85;
margin-bottom: 8px;
color: rgba(55, 48, 39, .72);
border-radius: 14px;
background:
radial-gradient(circle at 44% 50%, transparent 0 28%, rgba(55,48,39,.18) 29% 30%, transparent 31%),
radial-gradient(circle at 44% 50%, transparent 0 12%, rgba(55,48,39,.38) 13% 15%, transparent 16%),
linear-gradient(90deg, transparent 0 24%, currentColor 25% 29%, transparent 30% 57%, currentColor 58% 86%, transparent 87%);
opacity: .92;
overflow: hidden;
}
.hc-cat-sm__plate {
position: absolute;
right: 10%;
top: 22%;
width: 28%;
height: 48%;
border: 2px solid currentColor;
border-radius: 4px;
opacity: .68;
}
.hc-cat-sm__rail {
position: absolute;
left: 15%;
top: 49%;
width: 23%;
height: 4px;
border-radius: 99px;
background: currentColor;
}
.hc-cat-sm__node {
position: absolute;
top: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
transform: translateY(-50%);
}
.hc-cat-sm__node--a { left: 12%; }
.hc-cat-sm__node--b { right: 8%; }
.hc-cat-sm--legrabox .hc-cat-sm__visual,
.hc-cat-sm--merivobox .hc-cat-sm__visual,
.hc-cat-sm--tandembox-antaro .hc-cat-sm__visual {
background:
linear-gradient(0deg, transparent 58%, currentColor 59% 62%, transparent 63%),
linear-gradient(90deg, currentColor 0 3%, transparent 4% 96%, currentColor 97%),
linear-gradient(180deg, transparent 0 68%, currentColor 69% 74%, transparent 75%);
}
.hc-cat-sm--movento .hc-cat-sm__visual,
.hc-cat-sm--aventos .hc-cat-sm__visual {
background:
radial-gradient(circle at 68% 42%, rgba(55,48,39,.14) 0 18%, transparent 19%),
linear-gradient(135deg, transparent 22%, currentColor 23% 27%, transparent 28%),
linear-gradient(0deg, transparent 65%, currentColor 66% 70%, transparent 71%);
}
.hc-cat-sm__count {
font: 500 10px/1 var(--hc-sans, 'Outfit', sans-serif);
color: var(--hc-muted, #6b6660);
text-transform: uppercase;
letter-spacing: .06em;
}
.hc-cat-sm__title {
font: 600 18px/1.2 var(--hc-serif, 'Cormorant Garamond', serif);
color: var(--hc-ink, #1a1714);
}
.hc-cat-sm__desc {
font: 400 13px/1.5 var(--hc-sans, 'Outfit', sans-serif);
color: var(--hc-muted, #6b6660);
margin: 0;
}
/* === css/blocks/070-hc-cat-table.css === */
/* =================== hc-cat-table.css =================== */
/* v7.61.17 — Excel-style catalog table (wholesale view) styles. */
.hc-cat-tbl {
background: var(--hc-paper, #ffffff);
border: 1px solid rgba(180, 151, 115, 0.18);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(26,23,20,0.04), 0 12px 32px -16px rgba(26,23,20,0.10);
}
/* ─── Sticky toolbar ─────────────────────────────────────────── */
.hc-cat-tbl__toolbar {
position: sticky; top: 64px; z-index: 30;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 18px;
padding: 14px 22px;
background: #fcf9f3;
border-bottom: 1px solid rgba(180, 151, 115, 0.22);
transition: background .2s, border-color .2s;
}
.hc-cat-tbl__toolbar.is-active {
background: linear-gradient(135deg, #fdfbf6, #f5efe3);
border-bottom-color: rgba(180, 151, 115, 0.42);
}
.hc-cat-tbl__select-all {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: rgba(26, 23, 20, 0.72);
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.06em; text-transform: uppercase;
cursor: pointer;
}
.hc-cat-tbl__select-all input {
accent-color: var(--hc-ink, #1a1714); cursor: pointer;
}
.hc-cat-tbl__counter, .hc-cat-tbl__sum {
display: grid; gap: 2px; line-height: 1.1;
}
.hc-cat-tbl__counter-r, .hc-cat-tbl__sum-r {
font-size: 10px; letter-spacing: 0.10em;
text-transform: uppercase; color: rgba(26, 23, 20, 0.55);
font-family: "JetBrains Mono", monospace;
}
.hc-cat-tbl__counter-v {
font-size: 13px; font-weight: 500; color: var(--hc-ink, #1a1714);
font-family: "JetBrains Mono", monospace;
}
.hc-cat-tbl__sum-v {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 22px; font-weight: 500; color: var(--hc-ink, #1a1714);
letter-spacing: -0.005em;
}
.hc-cat-tbl__actions {
display: flex; gap: 8px;
}
/* ─── Table ──────────────────────────────────────────────────── */
.hc-cat-tbl__wrap {
overflow-x: auto;
}
.hc-cat-tbl__table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.hc-cat-tbl__table thead {
background: #fdfbf6;
}
.hc-cat-tbl__table th {
padding: 12px 14px;
text-align: left;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(26, 23, 20, 0.55);
font-family: "JetBrains Mono", monospace;
border-bottom: 1px solid rgba(180, 151, 115, 0.22);
white-space: nowrap;
}
.hc-cat-tbl__th-check {
width: 40px;
}
.hc-cat-tbl__th-photo {
width: 72px;
}
.hc-cat-tbl__th-sku {
width: 130px;
}
.hc-cat-tbl__th-stock {
width: 100px;
}
.hc-cat-tbl__th-price {
width: 110px; text-align: right;
}
.hc-cat-tbl__th-qty {
width: 130px;
}
.hc-cat-tbl__th-total {
width: 110px; text-align: right;
}
.hc-cat-tbl__row {
transition: background .12s, border-color .12s;
border-bottom: 1px solid rgba(180, 151, 115, 0.10);
}
.hc-cat-tbl__row:last-child {
border-bottom: 0;
}
.hc-cat-tbl__row:hover {
background: rgba(212, 184, 150, 0.04);
}
.hc-cat-tbl__row.is-selected {
background: rgba(212, 184, 150, 0.10);
box-shadow: inset 3px 0 0 0 var(--hc-accent, #8b7355);
}
.hc-cat-tbl__row.is-out-of-stock {
opacity: 0.65;
}
.hc-cat-tbl__row td {
padding: 12px 14px;
vertical-align: middle;
}
/* ── Cells ──────────────────────────────────────────── */
.hc-cat-tbl__check {
display: inline-flex; cursor: pointer;
}
.hc-cat-tbl__check input {
accent-color: var(--hc-ink, #1a1714); cursor: pointer;
}
.hc-cat-tbl__thumb img {
width: 100%; height: 100%; object-fit: cover;
}
.hc-cat-tbl__thumb-ph {
display: grid; place-items: center;
width: 100%; height: 100%;
color: rgba(180, 151, 115, 0.55);
}
.hc-cat-tbl__sku code {
font-family: "JetBrains Mono", monospace;
font-size: 12px; font-weight: 500;
color: var(--hc-ink, #1a1714);
display: block;
}
.hc-cat-tbl__sku small {
font-size: 10px; color: rgba(26, 23, 20, 0.50);
letter-spacing: 0.06em; text-transform: uppercase;
font-family: "JetBrains Mono", monospace;
}
.hc-cat-tbl__name a {
color: var(--hc-ink, #1a1714);
text-decoration: none;
font-weight: 500;
font-size: 13px; line-height: 1.35;
display: block;
}
.hc-cat-tbl__name a:hover {
color: var(--hc-accent, #8b7355);
}
.hc-cat-tbl__name small {
display: block; font-size: 11px;
color: rgba(26, 23, 20, 0.55);
margin-top: 2px;
}
.hc-cat-tbl__props {
display: flex; flex-wrap: wrap; gap: 4px;
}
.hc-cat-tbl__chip {
display: inline-block;
padding: 2px 7px;
background: rgba(180, 151, 115, 0.10);
color: rgba(26, 23, 20, 0.72);
border-radius: 4px;
font-size: 10px;
letter-spacing: 0.04em;
font-family: "JetBrains Mono", monospace;
}
.hc-stock-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 999px;
font-size: 10px; letter-spacing: 0.04em;
font-family: "JetBrains Mono", monospace; font-weight: 500;
}
.hc-stock-pill--lots {
background: rgba(76, 162, 100, 0.13); color: #4ca264;
}
.hc-stock-pill--ok {
background: rgba(76, 162, 100, 0.13); color: #4ca264;
}
.hc-stock-pill--low {
background: rgba(218, 145, 34, 0.13); color: #c87410;
}
.hc-stock-pill--out {
background: rgba(26, 23, 20, 0.06); color: rgba(26, 23, 20, 0.55);
}
.hc-stock-pill--lots::before, .hc-stock-pill--ok::before {
content: ""; display: inline-block; width: 5px; height: 5px;
border-radius: 50%; background: currentColor;
}
.hc-stock-pill--low::before {
content: ""; display: inline-block; width: 5px; height: 5px;
border-radius: 50%; background: currentColor;
animation: hcStockPulse 1.6s ease-in-out infinite;
}
@keyframes hcStockPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.30; }
}
.hc-cat-tbl__price {
text-align: right;
font-family: "JetBrains Mono", monospace;
}
.hc-cat-tbl__price strong {
font-size: 14px; font-weight: 500;
color: var(--hc-ink, #1a1714);
}
.hc-cat-tbl__old {
display: block;
font-size: 11px;
color: rgba(26, 23, 20, 0.42);
text-decoration: line-through;
}
.hc-cat-tbl__qty-ctrl {
display: inline-flex;
align-items: center;
border: 1px solid rgba(26, 23, 20, 0.14);
border-radius: 7px;
overflow: hidden;
background: var(--hc-paper, #ffffff);
}
.hc-cat-tbl__qty-ctrl button {
width: 26px; height: 26px;
background: var(--hc-paper, #ffffff); border: 0; cursor: pointer;
color: rgba(26, 23, 20, 0.65);
font-size: 14px; font-family: inherit;
transition: background .12s;
}
.hc-cat-tbl__qty-ctrl button:hover:not(:disabled) {
background: #fcf9f3; color: var(--hc-ink, #1a1714);
}
.hc-cat-tbl__qty-ctrl button:disabled {
opacity: 0.40; cursor: not-allowed;
}
.hc-cat-tbl__qty-ctrl input {
width: 44px; height: 26px;
border: 0; text-align: center;
font-family: "JetBrains Mono", monospace;
font-size: 13px; font-weight: 500;
color: var(--hc-ink, #1a1714);
background: var(--hc-paper, #ffffff);
-moz-appearance: textfield;
}
.hc-cat-tbl__qty-ctrl input::-webkit-outer-spin-button, .hc-cat-tbl__qty-ctrl input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.hc-cat-tbl__qty-ctrl input:focus {
outline: none;
}
.hc-cat-tbl__total {
text-align: right;
font-family: "JetBrains Mono", monospace;
font-size: 14px; font-weight: 500;
color: var(--hc-ink, #1a1714);
}
@media (max-width: 1024px) {
.hc-cat-tbl__th-photo, .hc-cat-tbl__photo { display: none; }
.hc-cat-tbl__th-props, .hc-cat-tbl__props { display: none; }
}
@media (max-width: 768px) {
.hc-cat-tbl__toolbar {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.hc-cat-tbl__actions { grid-column: span 2; }
}
/* === css/blocks/071-hc-cat-toolbar.css === */
/* =================== hc-cat-toolbar.css =================== */
/* hc-cat-toolbar — sticky horizontal bar above the catalog grid. Owns count,
trust-signal chips, filter-trigger button, view switcher, and sort select.
Trust signals + view switcher are hidden on small viewports to keep the
bar reachable; the filter-trigger button is shown only ≤1024px since the
sidebar is always visible above that. */
.hc-cat-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(255, 252, 247, 0.86);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 12px;
margin-bottom: var(--hc-sp-3);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hc-cat-toolbar__count {
font-size: var(--hc-fs-sm);
}
.hc-cat-toolbar__count b {
font-family: var(--hc-serif);
font-size: var(--hc-fs-lg);
font-weight: 500;
}
.hc-cat-toolbar__signals {
display: flex;
gap: var(--hc-sp-1);
flex-wrap: wrap;
}
.hc-cat-toolbar__filter-trigger {
display: none;
}
.hc-cat-toolbar__view {
display: inline-flex;
gap: 2px;
padding: 3px;
margin-left: auto;
background: var(--hc-paper-3);
border-radius: var(--hc-r-pill);
}
.hc-cat-toolbar__view-btn {
position: relative;
padding: 5px 9px;
border-radius: var(--hc-r-pill);
font-size: var(--hc-fs-xs);
color: var(--hc-ink-mid);
cursor: pointer;
transition: background var(--hc-dur-fast), color var(--hc-dur-fast);
}
.hc-cat-toolbar__view-btn:hover {
color: var(--hc-ink);
}
.hc-cat-toolbar__view-btn.is-active {
background: var(--hc-ink);
color: var(--hc-paper, #ffffff);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 12px -7px rgba(26, 23, 20, 0.48);
}
.hc-cat-toolbar__view-btn.is-active::after {
content: "";
position: absolute;
left: 50%;
bottom: -6px;
width: 16px;
height: 2px;
border-radius: 2px;
background: var(--hc-ink, #1a1714);
transform: translateX(-50%);
}
.hc-cat-toolbar__sort {
width: auto;
padding: 7px 30px 7px 12px;
font-size: var(--hc-fs-sm);
}
@media (max-width: 1024px) {
.hc-cat-toolbar__filter-trigger { display: inline-flex; }
.hc-cat-toolbar__signals { display: none; }
}
@media (max-width: 480px) {
.hc-cat-toolbar {
padding: var(--hc-sp-2) var(--hc-sp-3);
gap: var(--hc-sp-2);
}
.hc-cat-toolbar__view { display: none; }
}
/* === css/blocks/080-hc-compare.css === */
/* =================== hc-compare.css =================== */
/* v7.61.17 — Premium compare table styling. */
.page-compare {
--hc-cmp-bd: rgba(180, 151, 115, 0.18);
--hc-cmp-bd-strong: rgba(180, 151, 115, 0.32);
--hc-cmp-cell-pad: 14px 18px;
}
.hc-cmp-head {display: flex; justify-content: space-between; align-items: center; gap: var(--hc-sp-3); flex-wrap: wrap; margin-bottom: var(--hc-sp-5)}
.hc-cmp-head__controls {display: flex; gap: 10px; align-items: center; flex-wrap: wrap}
.hc-cmp-head__badge {margin-left: 4px; font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 11px; color: var(--hc-muted, rgba(26, 23, 20, 0.55))}
.page-compare .hc-cmp-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: end;
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--hc-cmp-bd);
}
.page-compare .hc-cmp-head h1 {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 36px; font-weight: 500;
letter-spacing: -0.015em;
margin: 8px 0 0;
color: var(--hc-ink, #1a1714);
}
.page-compare .hc-cmp-head__badge {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--hc-accent, #8b7355);
}
.page-compare .hc-cmp-head__controls {
display: flex; gap: 10px; align-items: center;
flex-wrap: wrap;
}
.page-compare .hc-cmp-actions {
margin-top: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
}
@media (max-width: 1024px) {
.page-compare .hc-cmp-actions {grid-template-columns: 1fr}
}
.page-compare .hc-cmp-action {
background: var(--hc-paper, #ffffff);
border: 1px solid var(--hc-cmp-bd);
border-radius: 14px;
padding: 18px 22px;
position: relative;
}
.page-compare .hc-cmp-action--accent {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
display: grid; align-items: center; justify-items: center;
gap: 10px; text-align: center;
}
.page-compare .hc-cmp-action--accent strong {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 18px; font-weight: 500; line-height: 1.2;
color: var(--hc-paper, #ffffff); margin: 0 0 4px;
display: block;
}
.page-compare .hc-cmp-action--accent p {
font-size: 12px; line-height: 1.5;
color: rgba(255, 255, 255, 0.65);
margin: 0 0 12px;
}
.page-compare .hc-cmp-action--accent .hc-btn {
background: var(--hc-gold, #d4b896); color: var(--hc-ink, #1a1714);
padding: 10px 18px; border-radius: 8px;
text-decoration: none; font-size: 12px; font-weight: 500;
border: 0; display: inline-block;
}
.page-compare .hc-cmp-action__lbl {
font-size: 10px; letter-spacing: 0.10em;
text-transform: uppercase; font-weight: 500;
color: rgba(26, 23, 20, 0.55);
font-family: "JetBrains Mono", monospace;
margin-bottom: 6px;
display: block;
}
.page-compare .hc-cmp-action__text {
font-size: 13px; line-height: 1.5;
color: rgba(26, 23, 20, 0.62);
margin: 0;
}
.page-compare .hc-cmp-action__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 16px; font-weight: 500;
margin: 0 0 6px;
color: var(--hc-ink, #1a1714);
}
.hc-cmp-tbl {width: 100%; border-collapse: collapse; min-width: 600px}
.hc-cmp-tbl th, .hc-cmp-tbl td {padding: var(--hc-sp-3) var(--hc-sp-4); border-bottom: 1px solid var(--hc-line); vertical-align: top}
.hc-cmp-tbl__lbl {background: var(--hc-paper-2); font-weight: 500; color: var(--hc-ink-soft); font-size: var(--hc-fs-sm); min-width: 160px; text-align: left}
.hc-cmp-tbl__head {padding: var(--hc-sp-4); vertical-align: top; min-width: 200px; border-bottom: 2px solid var(--hc-line)}
.hc-cmp-tbl__prod {display: block; text-decoration: none; color: inherit}
.hc-cmp-tbl__prod img {width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; background: var(--hc-paper-2); border-radius: var(--hc-r-sm); padding: var(--hc-sp-2); margin-bottom: var(--hc-sp-2)}
.hc-cmp-tbl__prod-name {font-weight: 500; font-size: var(--hc-fs-sm); line-height: 1.3}
.hc-cmp-tbl__val {font-size: var(--hc-fs-sm)}
.hc-cmp-tbl__val.is-same {color: var(--hc-muted, rgba(26, 23, 20, 0.55))}
.hc-cmp-tbl sup {display: none}
.page-compare .hc-cmp-tbl {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.page-compare .hc-cmp-tbl thead tr {
background: linear-gradient(180deg, #fdfbf6, #fcf9f3);
border-bottom: 1px solid var(--hc-cmp-bd-strong);
}
.page-compare .hc-cmp-tbl tbody tr {
border-bottom: 1px solid rgba(180, 151, 115, 0.10);
transition: background .12s;
}
.page-compare .hc-cmp-tbl tbody tr:hover { background: rgba(212, 184, 150, 0.04); }
.page-compare .hc-cmp-tbl tbody tr:last-child { border-bottom: 0; }
.page-compare .hc-cmp-tbl tbody tr[data-diff="same"] { background: rgba(180, 151, 115, 0.03); }
.page-compare .hc-cmp-tbl tbody tr[data-diff="same"] .hc-cmp-tbl__lbl::after {
content: "·";
display: inline-block;
margin-left: 6px;
color: rgba(26, 23, 20, 0.30);
}
.page-compare .hc-cmp-tbl tbody tr[data-diff="diff"] .hc-cmp-tbl__lbl::after {
content: "⚡";
display: inline-block;
margin-left: 6px;
color: var(--hc-accent, #8b7355);
font-size: 9px;
vertical-align: super;
}
.page-compare .hc-cmp-tbl tfoot tr {
background: #fcf9f3;
border-top: 1px solid var(--hc-cmp-bd-strong);
}
.page-compare .hc-cmp-tbl tfoot td {
padding: 16px 18px;
border-right: 1px solid var(--hc-cmp-bd);
}
.page-compare .hc-cmp-tbl tfoot td:last-child { border-right: 0; }
.page-compare .hc-cmp-tbl tfoot .hc-btn--primary {
width: 100%; padding: 10px 16px;
background: var(--hc-ink, #1a1714); color: var(--hc-paper, #ffffff);
border: 0; border-radius: 8px;
font-family: inherit; font-size: 12px; font-weight: 500;
cursor: pointer;
transition: background .12s;
}
.page-compare .hc-cmp-tbl tfoot .hc-btn--primary:hover {
background: var(--hc-accent, #8b7355);
}
.page-compare .hc-cmp-tbl__best {
position: absolute;
top: 14px; right: 14px;
background: var(--hc-ink, #1a1714); color: var(--hc-gold, #d4b896);
font-size: 9px; letter-spacing: 0.10em;
text-transform: uppercase; font-weight: 500;
font-family: "JetBrains Mono", monospace;
padding: 3px 7px;
border-radius: 4px;
}
.page-compare .hc-cmp-tbl__head-meta {
display: flex; justify-content: space-between; align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--hc-cmp-bd);
}
.page-compare .hc-cmp-tbl__head {
padding: 18px 20px 16px;
vertical-align: top;
text-align: center;
border-right: 1px solid var(--hc-cmp-bd);
position: relative;
min-width: 220px;
}
.page-compare .hc-cmp-tbl__head:last-child { border-right: 0; }
.page-compare .hc-cmp-tbl__lbl {
width: 180px;
padding: var(--hc-cmp-cell-pad);
vertical-align: middle;
background: #fcf9f3;
border-right: 1px solid var(--hc-cmp-bd);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(26, 23, 20, 0.55);
font-family: "JetBrains Mono", monospace;
font-weight: 500;
}
@media (max-width: 1024px) {
.page-compare .hc-cmp-tbl__lbl {width: 120px}
}
.page-compare .hc-cmp-tbl__price {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 20px; font-weight: 500;
color: var(--hc-ink, #1a1714);
letter-spacing: -0.005em;
}
.page-compare .hc-cmp-tbl__prod-eyebrow {
font-size: 10px; letter-spacing: 0.10em;
text-transform: uppercase; font-weight: 500;
color: var(--hc-accent, #8b7355);
font-family: "JetBrains Mono", monospace;
margin-bottom: 4px;
display: block;
}
.page-compare .hc-cmp-tbl__prod-name {
font-size: 14px; font-weight: 500; line-height: 1.3;
color: var(--hc-ink, #1a1714);
margin: 0 0 4px;
min-height: 36px;
}
.page-compare .hc-cmp-tbl__prod-sku {
display: block;
font-size: 11px;
font-family: "JetBrains Mono", monospace;
color: rgba(26, 23, 20, 0.55);
margin-bottom: 8px;
}
.page-compare .hc-cmp-tbl__prod-thumb {
width: 96px; height: 96px;
margin: 0 auto 12px;
display: block;
border-radius: 12px;
background: linear-gradient(135deg, #fcf9f3, #f5efe3);
border: 1px solid var(--hc-cmp-bd);
object-fit: cover;
}
.page-compare .hc-cmp-tbl__prod-thumb {
display: grid; place-items: center;
color: rgba(180, 151, 115, 0.55);
}
.page-compare .hc-cmp-tbl__prod { display: block; text-decoration: none; color: inherit; }
.page-compare .hc-cmp-tbl__prod img {
width: 96px; height: 96px;
margin: 0 auto 12px;
display: block;
border-radius: 12px;
background: linear-gradient(135deg, #fcf9f3, #f5efe3);
border: 1px solid var(--hc-cmp-bd);
object-fit: cover;
}
.page-compare .hc-cmp-tbl__rm {
width: 28px; height: 28px;
border: 1px solid var(--hc-cmp-bd);
border-radius: 50%;
background: var(--hc-paper, #ffffff);
cursor: pointer;
color: rgba(26, 23, 20, 0.45);
display: grid; place-items: center;
transition: border-color .12s, color .12s;
}
.page-compare .hc-cmp-tbl__rm:hover { border-color: #c0392b; color: #c0392b; }
.page-compare .hc-cmp-tbl__val--best {
background: rgba(76, 162, 100, 0.06);
color: var(--hc-ink, #1a1714);
font-weight: 500;
position: relative;
}
.page-compare .hc-cmp-tbl__val--best::before {
content: "✓";
position: absolute;
left: 8px; top: 50%; transform: translateY(-50%);
color: #4ca264;
font-size: 12px;
font-weight: 600;
}
.page-compare .hc-cmp-tbl__val {
padding: var(--hc-cmp-cell-pad);
vertical-align: middle;
text-align: center;
border-right: 1px solid var(--hc-cmp-bd);
font-size: 14px;
color: var(--hc-ink, #1a1714);
position: relative;
}
.page-compare .hc-cmp-tbl__val:last-child { border-right: 0; }
.page-compare .hc-cmp-tbl__val.is-same {
color: rgba(26, 23, 20, 0.55);
background: rgba(180, 151, 115, 0.04);
}
.page-compare .hc-cmp-tbl-wrap {
background: var(--hc-paper, #ffffff);
border: 1px solid var(--hc-cmp-bd);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(26,23,20,0.04), 0 12px 32px -16px rgba(26,23,20,0.10);
}
.page-compare .bc {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.5));
margin-bottom: 20px;
}
.page-compare .t-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(32px, 4vw, 48px);
font-weight: 400;
line-height: 1.05;
margin: 0 0 12px;
}
.page-compare .hc-chip--toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--hc-paper, #ffffff);
border: 1px solid var(--hc-cmp-bd-strong);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
cursor: pointer;
transition: border-color .12s, background .12s;
}
.page-compare .hc-chip--toggle:hover {
border-color: var(--hc-accent, #8b7355);
background: #fcf9f3;
}
.page-compare .hc-chip--toggle input {
accent-color: var(--hc-ink, #1a1714);
cursor: pointer;
}
/* ─── Table ──────────────────────────────────────────────────── */
/* Header row with product cards */
/* Best-in-row badge */
/* Body rows */
/* Highlighted "best" cell (e.g. lowest price, highest stock) */
/* Footer with CTAs */
/* Bottom action band */
/* ==========================================================
v7.61.20 · Premium polish
========================================================== */
/* Alternate row backgrounds */
.hc-compare-table tbody tr:nth-child(even) {
background:rgba(212,184,150,0.04);
}
/* Diff toggle smooth row transitions */
.hc-compare-table.is-diff-only tr[data-same="true"] {
display:none;
}
.hc-compare-table tr {
transition:opacity 0.22s ease;
}
/* Sticky header for long tables */
.hc-compare-table thead th {
position:sticky;
top:0;
background:var(--hc-paper, #ffffff);
z-index:2;
box-shadow:0 1px 0 rgba(180,151,115,0.18);
}
/* Border-radius on first/last cells */
.hc-compare-table td:first-child {
border-top-left-radius:6px; border-bottom-left-radius:6px;
}
.hc-compare-table td:last-child {
border-top-right-radius:6px; border-bottom-right-radius:6px;
}
/* Best-cell pulse on initial reveal */
.hc-compare-cell--best {
animation:hcCompareBestReveal 0.62s ease-out;
}
@keyframes hcCompareBestReveal{
0% { background:rgba(212,184,150,0.32); }
100% { background:linear-gradient(165deg,rgba(212,184,150,0.16),rgba(212,184,150,0.04)); }
}
/* ---- folded from 079-hc-compare-bar.css ---- */
/* =================== hc-compare-bar.css =================== */
.hc-compare-bar {position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(120%); z-index: 45; display: flex; align-items: center; gap: var(--hc-sp-3); padding: var(--hc-sp-3) var(--hc-sp-4); background: var(--hc-ink); color: var(--hc-paper, #ffffff); border-radius: var(--hc-r-pill); box-shadow: var(--hc-sh-4); transition: transform var(--hc-dur-slow) var(--hc-ease-bounce); max-width: 92vw}
.hc-compare-bar.is-visible {transform: translateX(-50%) translateY(0)}
.hc-compare-bar__count {display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; background: var(--hc-gold); color: var(--hc-ink); border-radius: 50%; font-family: var(--hc-mono); font-weight: 600; font-size: var(--hc-fs-sm); padding: 0 6px}
.hc-compare-bar__label {font-size: var(--hc-fs-sm)}
.hc-compare-bar__clear {font-size: var(--hc-fs-xs); color: rgba(255,255,255,.5); padding: 0 var(--hc-sp-2)}
.hc-compare-bar__clear:hover {color: var(--hc-paper, #ffffff)}
.hc-compare-bar[hidden] {display: none}
/* === css/blocks/081-hc-compat.css === */
/* =================== hc-compat.css =================== */
.hc-compat {margin: var(--hc-sp-4) 0 var(--hc-sp-5); padding: var(--hc-sp-5)}
.hc-compat__head {display: flex; justify-content: space-between; align-items: flex-start; gap: var(--hc-sp-3); margin-bottom: var(--hc-sp-4)}
.hc-compat__title {font-size: var(--hc-fs-xl); margin-top: var(--hc-sp-1)}
.hc-compat__lead {margin-top: 6px; max-width: 52ch}
.hc-compat__grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hc-sp-3); margin-bottom: var(--hc-sp-4)}
.hc-compat__result {border-radius: var(--hc-r-md); margin-bottom: var(--hc-sp-3)}
.hc-compat__result--ok {display: flex; align-items: flex-start; gap: var(--hc-sp-3); padding: var(--hc-sp-4); background: var(--hc-success-soft); border: 1px solid var(--hc-success)}
.hc-compat__result-ico {font-size: 24px; color: var(--hc-success); line-height: 1}
.hc-compat__result-title {display: block}
.hc-compat__result-text {margin-top: 4px}
.hc-compat__result--warn {padding: var(--hc-sp-4); background: var(--hc-warning-soft); border: 1px solid var(--hc-warning); font-size: var(--hc-fs-sm)}
.hc-compat__warn-title {color: var(--hc-warning); display: block; margin-bottom: 4px}
.hc-compat__warn-btn {margin-top: var(--hc-sp-3)}
.hc-compat__actions {display: flex; flex-wrap: wrap; gap: var(--hc-sp-2); margin-top: var(--hc-sp-3)}
@media(max-width:1024px) {
.hc-compat__cta, [data-compat-submit] {white-space: normal; line-height: 1.3; padding: 14px 24px; min-height: 48px}
}
/* === css/blocks/083-hc-contact-channel.css === */
/* =================== hc-contact-channel.css =================== */
.hc-contact-channel { position:relative; }
.hc-contact-channel__copy {
display:none;
position:absolute;
top:8px;
right:8px;
background:transparent;
border:0.5px solid rgba(180,151,115,0.32);
color:rgba(26,23,20,0.55);
border-radius:100px;
padding:3px 9px;
font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;
letter-spacing:0.04em;
text-transform:uppercase;
cursor:pointer;
}
.hc-contact-channel:hover .hc-contact-channel__copy { display:inline-flex; align-items:center; gap:4px; }
.hc-contact-channel__copy:hover { color:var(--hc-ink, #1a1714); border-color:var(--hc-accent-dark, #5d4d3a); }
.hc-contact-channel__copy.is-copied { color:var(--hc-success, #3d6b4f); border-color:var(--hc-success, #3d6b4f); }
.hc-contact-channel__copy.is-copied::after { content:" ✓"; }
/* Premium contact card with animated SVG icon + shimmer-on-hover */
.hc-contact-channel {
position: relative;
display: flex;
flex-direction: column;
gap: 3px;
padding: 20px 22px 20px 78px;
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.92) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.20);
border-radius: 14px;
text-decoration: none;
color: var(--hc-ink, #1a1714);
isolation: isolate;
overflow: hidden;
transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.hc-contact-channel::after {
content: "";
position: absolute;
left: -120%;
top: 0;
bottom: 0;
width: 50%;
z-index: -1;
background: linear-gradient(115deg, transparent 30%, rgba(212, 184, 150, 0.32) 50%, transparent 70%);
transition: left 0.7s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-contact-channel:hover {
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.62));
box-shadow:
0 2px 4px rgba(40, 30, 15, 0.04),
0 24px 50px -22px rgba(184, 154, 111, 0.32);
transform: translateY(-3px);
}
.hc-contact-channel:hover::after { left: 120%; }
.hc-contact-channel::before {
content: "";
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 12px;
background-color: rgba(212, 184, 150, 0.20);
background-position: center;
background-repeat: no-repeat;
background-size: 22px 22px;
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.42));
transition: background-color 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-contact-channel:hover::before {
background-color: rgba(212, 184, 150, 0.36);
transform: translateY(-50%) rotate(-6deg) scale(1.08);
}
.hc-contact-channel[href^="tel:"]::before {
background-image: url("data:image/svg+xml;utf8,");
}
.hc-contact-channel[href^="mailto:"]::before {
background-image: url("data:image/svg+xml;utf8,");
}
.hc-contact-channel[href*="t.me"]::before,
.hc-contact-channel[href*="telegram"]::before {
background-image: url("data:image/svg+xml;utf8,");
}
.hc-contact-channel strong {
font: 500 16px/1.3 var(--hc-sans, 'Outfit', sans-serif);
color: var(--hc-ink, #1a1714);
}
.hc-contact-channel span {
font-size: 13px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
}
.hc-contact-channel__copy {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
padding: 6px 10px;
background: transparent;
border: 1px solid rgba(141, 109, 71, 0.28);
border-radius: 8px;
font-size: 12px;
color: var(--hc-accent-dark, #5d4d3a);
cursor: pointer;
}
/* === css/blocks/087-hc-empty-rail.css === */
/* =================== hc-empty-rail.css =================== */
/* hc-empty-rail — product rail shown below empty-state in /cart, /favorites,
* /compare. Lazy-loads via HTMX from /api/shop/fragments/bestsellers.
*
* Strict isolation: .hc-empty-rail / .hc-empty-rail__*. */
.hc-empty-rail {
margin: clamp(28px, 4vw, 56px) 0 0;
padding-top: clamp(20px, 2.4vw, 36px);
border-top: 0.5px dashed rgba(141, 109, 71, 0.22);
}
.hc-empty-rail__head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: clamp(14px, 1.6vw, 22px);
}
.hc-empty-rail__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(20px, 1.8vw, 26px);
font-weight: 500;
line-height: 1.15;
margin: 4px 0 0;
color: var(--hc-ink, #1a1714);
letter-spacing: -0.012em;
}
.hc-empty-rail__more {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
text-decoration: none;
margin-left: auto;
align-self: center;
}
.hc-empty-rail__more:hover {
color: var(--hc-ink, #1a1714);
}
.hc-empty-rail__body {
display: block;
width: 100%;
}
.hc-empty-rail__loading {
display: grid;
place-items: center;
min-height: 180px;
font-family: var(--hc-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
}
/* === css/blocks/088-hc-empty.css === */
/* =================== hc-empty.css =================== */
/* hc-empty — basic empty-state component (cart, search, blog index).
* Single source of truth for empty states. */
.hc-empty {
padding: 64px 32px;
text-align: center;
max-width: 420px;
margin: 24px auto;
background: var(--hc-bg-warm, #f5efde);
border: 0.5px dashed var(--hc-line-2, rgba(180, 151, 115, 0.3));
border-radius: 16px;
display: grid;
place-items: center;
min-height: 200px;
}
.hc-empty__ico {
width: 72px;
height: 72px;
margin: 0 auto var(--hc-sp-3, 14px);
border-radius: 50%;
background: rgba(139, 115, 85, 0.10);
color: var(--hc-accent, #8b7355);
display: inline-grid;
align-items: center;
justify-content: center;
place-items: center;
}
.hc-empty__title {
font-family: "Playfair Display", Georgia, serif;
font-size: 22px;
font-weight: 400;
line-height: 1.3;
color: var(--hc-ink, #1a1714);
margin: 0 0 8px;
white-space: normal;
}
.hc-empty__desc {
color: var(--hc-muted, rgba(26, 23, 20, 0.58));
max-width: 420px;
margin: 0 0 var(--hc-sp-4, 20px);
font-size: 14px;
line-height: 1.55;
}
.hc-empty__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.hc-empty__text, .hc-empty p {
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
font-size: 14px;
margin: 0;
max-width: 48ch;
line-height: 1.5;
}
.blog-index__empty .hc-empty__title {
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(22px, 2.6vw, 28px);
font-weight: 400;
line-height: 1.2;
white-space: normal;
word-break: normal;
max-width: 60ch;
}
.hc-empty--cart {
position: relative;
max-width: none;
min-height: clamp(340px, 34vw, 460px);
margin: 14px 0 clamp(34px, 4vw, 58px);
padding: clamp(28px, 4vw, 54px);
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
gap: clamp(26px, 4vw, 64px);
align-items: center;
text-align: left;
overflow: hidden;
background:
radial-gradient(circle at 84% 18%, rgba(212, 184, 150, 0.22), transparent 28%),
linear-gradient(135deg, #fffdfa 0%, #f4ede1 58%, #eee3d1 100%);
border-style: solid;
border-color: rgba(141, 109, 71, 0.18);
border-radius: 24px;
box-shadow: 0 28px 80px rgba(41, 30, 18, 0.08);
}
.hc-empty--cart::after {
content: "";
position: absolute;
right: clamp(28px, 6vw, 96px);
top: 50%;
width: clamp(210px, 20vw, 320px);
aspect-ratio: 1;
transform: translateY(-50%);
border: 1px solid rgba(141, 109, 71, 0.16);
border-radius: 50%;
opacity: 0.45;
pointer-events: none;
}
.hc-cart-empty__intro {
position: relative;
z-index: 1;
display: grid;
justify-items: start;
}
.hc-empty--cart .hc-empty__ico {
margin: 0 0 18px;
width: 68px;
height: 68px;
background: rgba(26, 23, 20, 0.08);
}
.hc-empty--cart .hc-empty__title {
font-size: clamp(36px, 4.4vw, 66px);
line-height: 0.96;
letter-spacing: -0.018em;
margin-bottom: 16px;
}
.hc-empty--cart .hc-empty__desc {
max-width: 58ch;
margin-bottom: 24px;
font-size: clamp(15px, 1.2vw, 18px);
color: rgba(26, 23, 20, 0.66);
}
.hc-empty--cart .hc-empty__actions {
justify-content: flex-start;
}
.hc-empty--cart .premium-empty__steps {
position: relative;
z-index: 1;
margin: 0;
padding: clamp(18px, 2.2vw, 26px);
background: rgba(255, 255, 255, 0.58);
border: 1px solid rgba(141, 109, 71, 0.18);
border-radius: 20px;
box-shadow: 0 18px 46px rgba(41, 30, 18, 0.08);
}
@media (max-width: 1024px) {
.hc-empty--cart {
grid-template-columns: 1fr;
padding: 28px 20px;
text-align: left;
}
.hc-empty--cart::after {
right: -90px;
top: 120px;
}
.hc-empty--cart .hc-empty__title {
font-size: clamp(32px, 10vw, 46px);
}
}
/* === css/blocks/090-hc-fab.css === */
/* =================== hc-fab.css =================== */
.hc-fab {position: fixed; bottom: var(--hc-sp-5); right: var(--hc-sp-5); z-index: 40; width: 56px; height: 56px; background: var(--hc-ink); color: var(--hc-paper, #ffffff); border-radius: 50%; box-shadow: var(--hc-sh-3); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--hc-dur-fast), background var(--hc-dur-fast)}
.hc-fab:hover {background: var(--hc-accent); transform: scale(1.06)}
.hc-fab,
.hc-chat-fab,
[data-chat-fab] {
position: fixed;
}
.hc-fab::after,
.hc-chat-fab::after {
content: attr(aria-label);
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
padding: 6px 12px;
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
font: 500 12px/1 var(--hc-sans, 'Outfit', sans-serif);
white-space: nowrap;
border-radius: 8px;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.hc-fab:hover::after,
.hc-chat-fab:hover::after {
opacity: 1;
transform: translateY(-50%) translateX(-2px);
}
/* === css/blocks/092-hc-filter-help.css === */
/* =================== hc-filter-help.css =================== */
.hc-filter-help {margin-top: var(--hc-sp-4); padding: var(--hc-sp-3); background: var(--hc-paper-2)}
.hc-filter-help__text {margin-top: 6px}
.hc-filter-help__cta {margin-top: var(--hc-sp-2)}
.hc-filter-help {
margin-top: 16px;
padding: 14px 14px;
background: linear-gradient(180deg, rgba(212, 184, 150, 0.14), rgba(212, 184, 150, 0.04));
border: 1px solid rgba(141, 109, 71, 0.22);
border-radius: 12px;
}
.hc-filter-help strong {
display: block;
font-size: 13px;
letter-spacing: 0.005em;
margin-bottom: 4px;
}
.hc-filter-help__text {
margin: 0 0 10px;
font-size: 12px;
line-height: 1.4;
color: rgba(26, 23, 20, 0.60);
}
.hc-filter-help__cta {
font-size: 12px;
height: 36px;
}
/* === css/blocks/094-hc-fx-orbits.css === */
/* =================== hc-fx-orbits.css =================== */
.hc-fx-orbits {position: absolute; inset: 0; pointer-events: none; overflow: hidden}
.hc-fx-orbits__dot {position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--hc-accent, #8b7355); box-shadow: 0 0 12px rgba(199, 155, 96, 0.6); animation: hc-orbit var(--orbit-dur, 8s) linear infinite}
.hc-fx-orbits__dot--a {--orbit-r: 120px; --orbit-dur: 9s}
.hc-fx-orbits__dot--b {--orbit-r: 86px; --orbit-dur: 6.5s; animation-direction: reverse; opacity: 0.7}
.hc-fx-orbits__dot--c {--orbit-r: 154px; --orbit-dur: 12s; opacity: 0.55}
/* === css/blocks/097-hc-hero-slider.css === */
/* =================== hc-hero-slider.css =================== */
.hc-hero-slider {position: relative; min-height: min(620px, 72vh); overflow: hidden; background: var(--hc-ink); color: var(--hc-paper, #ffffff)}
.hc-hero-slider__track {position: relative; height: 100%; min-height: inherit}
.hc-hero-slider__nav {position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); border-radius: 50%; color: var(--hc-paper, #ffffff); cursor: pointer; transition: background var(--hc-dur-fast), transform var(--hc-dur-fast)}
.hc-hero-slider__nav:hover {background: rgba(255,255,255,.22); transform: translateY(-50%) scale(1.06)}
.hc-hero-slider__nav--prev {left: var(--hc-sp-4)}
.hc-hero-slider__nav--next {right: var(--hc-sp-4)}
.hc-hero-slider__dots {position: absolute; left: 50%; bottom: var(--hc-sp-4); transform: translateX(-50%); z-index: 5; display: flex; gap: 6px}
.hc-hero-slider__dot {width: 28px; height: 3px; background: rgba(255,255,255,.28); border-radius: 2px; cursor: pointer; transition: background var(--hc-dur-fast), width var(--hc-dur-fast)}
.hc-hero-slider__dot.is-active {background: var(--hc-gold); width: 40px}
.hero-slider__dot.is-active {background: var(--hc-paper, #ffffff); transform: scale(1.4)}
.hc-hero-slide {position: absolute; inset: 0; min-height: inherit}
.hc-hero-slide__bg {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0}
.hc-hero-slide__bg--mobile {display: none}
.hc-hero-slide::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,12,.42) 0%, rgba(20,16,12,.20) 45%, rgba(20,16,12,.08) 100%); z-index: 1}
.hc-hero-slide__body {position: relative; z-index: 2; min-height: inherit; display: flex; align-items: center}
.hc-hero-slide__content {max-width: 620px; padding: var(--hc-sp-8) 0; color: var(--hc-paper, #fff)}
.hc-hero-slide--txt-dark .hc-hero-slide__content {color: #1f1a16}
.hc-hero-slide--txt-dark::after {background: linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 45%, rgba(255,255,255,.12) 100%)}
.hc-hero-slide__title {margin: 10px 0 12px; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.06}
.hc-hero-slide__desc {margin: 0 0 var(--hc-sp-4); font-size: clamp(16px, 1.6vw, 22px); max-width: 52ch}
.hc-hero-slide__btns {display: flex; gap: 12px; flex-wrap: wrap}
@media (max-width: 1024px) {
.hc-hero-slider {min-height: 520px}
.hc-hero-slide__content {padding: var(--hc-sp-6) 0}
.hc-hero-slide__title {font-size: clamp(28px, 8vw, 42px)}
}
/* === css/blocks/098-hc-hero.css === */
/* =================== hc-hero.css =================== */
/* hc-hero - premium homepage hero block. Editorial typography, gold-tinted
* gradient ambience, animated orbital fx behind copy, and a stock-card +
* trust-strip below CTAs. Variants: --editorial (full-bleed bg), --video (with
* background video). Strictly .hc-hero / .hc-hero__* / .hc-hero--*. */
.hc-hero {
position: relative;
padding: clamp(56px, 7vw, 110px) 0 clamp(40px, 5vw, 80px);
background: linear-gradient(180deg, var(--hc-bg-warm, #f0ebe1) 0%, var(--hc-bg, #f5f2ec) 100%);
min-height: min(680px, 78vh);
isolation: isolate;
overflow: hidden;
contain: layout paint;
}
.hc-hero--editorial {
background: var(--hc-bg, #f5f2ec);
}
.hc-hero--editorial::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(900px 600px at 10% -10%, rgba(212, 184, 150, 0.22), transparent 55%),
radial-gradient(700px 500px at 95% 110%, rgba(139, 115, 85, 0.14), transparent 50%),
radial-gradient(500px 400px at 50% 50%, rgba(255, 245, 220, 0.10), transparent 60%);
animation: hc-hero-breathe 12s ease-in-out infinite alternate;
}
@keyframes hc-hero-breathe {
from { transform: translate3d(0,0,0) scale(1); opacity: 0.85; }
to { transform: translate3d(-12px, 8px, 0) scale(1.05); opacity: 1; }
}
.hc-hero--editorial > .hc-wrap {
position: relative;
z-index: 2;
}
.hc-hero__bgfx {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.hc-hero__mesh {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.4;
}
.hc-hero__mesh path {
fill: none;
stroke: rgba(139, 115, 85, 0.20);
stroke-width: 1;
}
.hc-hero__orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(40px);
animation: hc-hero-orb 18s ease-in-out infinite alternate;
}
.hc-hero__orb--a {
width: 440px;
height: 440px;
top: -120px;
right: -100px;
background: radial-gradient(circle, rgba(212, 184, 150, 0.40), transparent 65%);
}
.hc-hero__orb--b {
width: 320px;
height: 320px;
bottom: -100px;
left: 4%;
background: radial-gradient(circle, rgba(139, 115, 85, 0.30), transparent 65%);
animation-delay: 4s;
}
@keyframes hc-hero-orb {
from { transform: translate3d(0,0,0); }
to { transform: translate3d(40px, -20px, 0); }
}
@media (min-width: 1440px) {
.hc-hero--editorial::before {
opacity: 0.72;
animation-duration: 18s;
}
.hc-hero__mesh {
opacity: 0.24;
}
.hc-hero__orb {
filter: blur(54px);
}
.hc-hero__orb--a,
.hc-hero__orb--b {
opacity: 0.66;
}
}
.hc-hero__grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: center;
}
.hc-hero__copy {
max-width: 640px;
}
.hc-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
padding: 6px 14px;
background: rgba(212, 184, 150, 0.16);
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.38));
border-radius: var(--hc-r-pill, 999px);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
.hc-hero__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(44px, 7vw, 88px);
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--hc-ink, #1a1714);
margin: var(--hc-sp-3, 14px) 0;
max-width: 14ch;
}
.hc-hero__title em {
display: inline-block;
position: relative;
color: var(--hc-accent-dark, #7a6548);
font-style: italic;
background: linear-gradient(135deg, #b89a6f 0%, var(--hc-gold, #d4b896) 45%, var(--hc-accent, #8b7355) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hc-hero__title em::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.05em;
height: 0.08em;
background: linear-gradient(90deg, transparent, rgba(212, 184, 150, 0.55), transparent);
transform: scaleX(0.9);
transform-origin: left;
}
.hc-hero__lede {
font-size: clamp(16px, 1.35vw, 19px);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72));
max-width: 50ch;
margin: 0 0 var(--hc-sp-5, 26px);
line-height: 1.55;
}
.hc-hero__mini-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 0 0 var(--hc-sp-5, 26px);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
.hc-hero__mini-meta span {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
}
.hc-hero__mini-meta span::before {
content: "";
width: 6px;
height: 6px;
background: linear-gradient(135deg, var(--hc-gold, #d4b896), var(--hc-accent, #8b7355));
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(212, 184, 150, 0.18);
}
.hc-hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 0 0 var(--hc-sp-6, 36px);
}
/* Each CTA prefers a 240px basis. Container width below ~520px (less gutter)
forces single-column wrap regardless of @media — works in any headless. */
.hc-hero__ctas > .hc-btn,
.hc-hero__ctas > a.hc-btn,
.hc-hero__ctas > button.hc-btn {
flex: 1 1 240px;
min-width: 0;
}
.hc-hero__timer {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 12px 20px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.18), rgba(184, 154, 111, 0.10));
border: 1px solid var(--hc-gold-border, rgba(212, 184, 150, 0.42));
box-shadow: 0 6px 18px -8px rgba(184, 154, 111, 0.32);
margin: 0 0 var(--hc-sp-5, 26px);
}
.hc-hero__timer-label {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
.hc-hero__timer-clock {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 16px;
font-weight: 600;
color: var(--hc-ink, #1a1714);
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.hc-hero__timer-clock b {
font-weight: 600;
color: var(--hc-accent-dark, #7a6548);
}
.hc-hero__stats {
display: flex;
flex-wrap: wrap;
gap: clamp(20px, 2.4vw, 36px);
margin-top: clamp(24px, 3vw, 44px);
padding-top: 20px;
border-top: 1px solid rgba(26, 23, 20, 0.10);
}
.hc-hero__stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.hc-hero__stat b {
display: block;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(28px, 3vw, 40px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
color: var(--hc-ink, #1a1714);
font-variant-numeric: oldstyle-nums proportional-nums;
}
.hc-hero__stat b small {
font-size: 0.55em;
opacity: 0.5;
font-weight: 400;
margin-left: 2px;
}
.hc-hero__stat span {
display: block;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
/* stock card — "В наличии сейчас N SKU · 3 заказа за час".
margin-bottom keeps the card visually anchored to the copy column and
prevents it from crashing into the trust-strip ribbon below the grid. */
.hc-hero__stock-card {
display: inline-flex;
align-items: center;
gap: 18px;
margin-top: 22px;
margin-bottom: clamp(28px, 3.6vw, 48px);
padding: 14px 22px;
background: var(--hc-paper, #ffffff);
border: 1px solid rgba(141, 109, 71, 0.22);
border-radius: 16px;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.04),
0 20px 40px -20px rgba(40, 30, 15, 0.22);
}
.hc-hero__stock-card-row {
display: flex;
flex-direction: column;
gap: 3px;
}
.hc-hero__stock-card-label {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.hc-hero__stock-card-value {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 22px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
color: var(--hc-ink, #1a1714);
}
.hc-hero__stock-card-divider {
width: 1px;
align-self: stretch;
background: rgba(141, 109, 71, 0.22);
}
.hc-hero__media {
display: flex;
justify-content: center;
align-items: center;
}
.hc-hero__orbit-card {
width: min(560px, 100%);
border-radius: 26px;
border: 1px solid rgba(141, 109, 71, 0.28);
background: linear-gradient(180deg, #f8f6f1 0%, #f1ebe0 100%);
box-shadow: 0 30px 60px -40px rgba(40, 30, 15, 0.38);
padding: 18px;
}
.hc-hero__orbit-card img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
object-fit: cover;
}
.hc-hero__orbit-label {
display: inline-block;
margin-bottom: 12px;
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-hero__orbit-note {
margin: -6px 0 10px;
font-size: 12px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72));
}
.hc-hero__stock-card-meta {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--hc-success, #3d6b4f);
font-size: 13px;
font-weight: 500;
}
.hc-hero__stock-card-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--hc-success, #3d6b4f);
box-shadow: 0 0 0 0 rgba(61, 107, 79, 0.55);
animation: hc-hero-pulse 1.8s ease-out infinite;
}
@keyframes hc-hero-pulse {
to { box-shadow: 0 0 0 12px rgba(61, 107, 79, 0); }
}
/* trust strip — series tag pills under the hero */
.hc-hero__series-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255, 252, 247, 0.86);
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.42));
border-radius: var(--hc-r-pill, 999px);
font-family: var(--hc-mono);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
max-width: 100%;
white-space: normal;
word-break: break-word;
}
.hc-hero__check-note {
margin-top: 14px;
font-size: 13px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}
/* trust-strip — facts ribbon below hero grid. Lighter background + larger
gap visually decouple it from the live stock-card above (different role:
stock-card = live data, trust-strip = static facts). */
.hc-hero__trust-strip {
display: flex;
flex-wrap: wrap;
gap: 14px;
padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 32px);
margin-top: clamp(36px, 4.4vw, 56px);
background: linear-gradient(180deg, rgba(255, 252, 247, 0.92) 0%, rgba(247, 241, 230, 0.78) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: clamp(14px, 1.4vw, 20px);
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 18px 44px -28px rgba(40, 30, 15, 0.16);
}
.hc-hero__trust-cell {
position: relative;
display: inline-flex;
flex: 1 1 0;
flex-direction: column;
gap: 4px;
padding: 10px 18px 10px 50px;
background: transparent;
border: 0;
border-right: 0.5px solid rgba(141, 109, 71, 0.16);
border-radius: 0;
transition: background 0.22s ease, transform 0.22s ease;
}
.hc-hero__trust-cell:last-child { border-right: 0; }
.hc-hero__trust-cell:hover { background: rgba(255, 255, 255, 0.55); }
/* Mini-icon left of each cell — per-nth-child SVG via mask-image */
.hc-hero__trust-cell::before {
content: "";
position: absolute;
left: 14px;
top: 50%;
width: 26px;
height: 26px;
transform: translateY(-50%);
background: linear-gradient(135deg, rgba(212, 184, 150, 0.30), rgba(184, 154, 111, 0.12));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.45));
border-radius: 8px;
transition: background 0.22s ease, transform 0.22s ease;
}
.hc-hero__trust-cell:hover::before {
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
transform: translateY(-50%) rotate(-4deg) scale(1.06);
}
.hc-hero__trust-cell::after {
content: "";
position: absolute;
left: 14px;
top: 50%;
width: 26px;
height: 26px;
transform: translateY(-50%);
background-color: var(--hc-accent-dark, #7a6548);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 14px 14px;
mask-size: 14px 14px;
transition: background-color 0.22s ease, transform 0.22s ease;
}
.hc-hero__trust-cell:hover::after {
background-color: #2a2018;
transform: translateY(-50%) rotate(-4deg) scale(1.06);
}
/* Cell 1 — Прямой дилер: handshake */
.hc-hero__trust-cell:nth-child(1)::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Cell 2 — 8 лет: calendar */
.hc-hero__trust-cell:nth-child(2)::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Cell 3 — гарантия: shield */
.hc-hero__trust-cell:nth-child(3)::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Cell 4 — доставка по РФ: truck */
.hc-hero__trust-cell:nth-child(4)::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Cell 5 — рейтинг: star */
.hc-hero__trust-cell:nth-child(5)::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* hero visual — right column. Premium ring + animated dots. */
.hc-hero__visual {
position: relative;
aspect-ratio: 1;
max-width: 560px;
margin-left: auto;
padding: var(--hc-sp-5);
border-radius: 32px;
background:
radial-gradient(circle at 22% 28%, rgba(255, 252, 247, 0.65), transparent 45%),
radial-gradient(circle at 80% 80%, rgba(184, 154, 111, 0.32), transparent 55%),
linear-gradient(135deg, #f3e9d6 0%, #e8dfd0 45%, #d4c5ac 100%);
overflow: hidden;
isolation: isolate;
box-shadow:
0 4px 8px rgba(184, 154, 111, 0.10),
0 32px 64px -24px rgba(184, 154, 111, 0.32);
}
/* Soft sheen overlay */
.hc-hero__visual::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(circle at 30% 30%, rgba(255, 252, 247, 0.55), transparent 50%),
repeating-conic-gradient(
from 0deg at 50% 50%,
transparent 0deg,
rgba(255, 250, 240, 0.05) 30deg,
transparent 60deg
);
animation: hc-hero-shimmer 22s linear infinite;
}
/* Decorative editorial composition — 3 concentric arcs + center dot */
.hc-hero__visual::after {
content: "";
position: absolute;
inset: 8%;
z-index: 2;
background-image:
radial-gradient(circle, transparent 64px, rgba(122, 101, 72, 0.32) 65px, rgba(122, 101, 72, 0.32) 66px, transparent 67px),
radial-gradient(circle, transparent 110px, rgba(122, 101, 72, 0.22) 111px, rgba(122, 101, 72, 0.22) 112px, transparent 113px),
radial-gradient(circle, transparent 160px, rgba(122, 101, 72, 0.14) 161px, rgba(122, 101, 72, 0.14) 162px, transparent 163px),
radial-gradient(circle at center, rgba(122, 101, 72, 0.55) 0, rgba(122, 101, 72, 0.55) 6px, transparent 7px);
background-position: center;
background-repeat: no-repeat;
animation: hc-hero-orbit 60s linear infinite;
}
@keyframes hc-hero-shimmer {
to { transform: rotate(360deg); }
}
@keyframes hc-hero-orbit {
to { transform: rotate(360deg); }
}
.hc-hero__svg-ring {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 2;
}
.hc-hero__svg-ring svg {
width: 78%;
height: 78%;
color: rgba(122, 101, 72, 0.42);
}
.hc-hero__svg-ring circle {
fill: none;
stroke: currentColor;
stroke-width: 1;
stroke-linecap: round;
}
.hc-hero__svg-ring circle:nth-child(1) {
animation: hc-hero-spin 32s linear infinite;
transform-origin: center;
stroke-dasharray: 4 14;
}
@keyframes hc-hero-spin {
to { transform: rotate(360deg); }
}
.hc-hero__visual-photo {
position: absolute;
inset: 0;
width: 72%;
height: 72%;
margin: auto;
object-fit: contain;
z-index: 3;
filter: drop-shadow(0 18px 36px rgba(26, 23, 20, 0.18));
}
.hc-hero__visual-fallback {
position: absolute;
inset: 12%;
display: grid;
place-items: center;
z-index: 2;
opacity: 0.78;
pointer-events: none;
}
.hc-hero__visual-fallback svg {
width: 100%;
height: 100%;
}
.hc-hero__visual-photo:not(.hc-img-broken) ~ .hc-hero__visual-fallback {
opacity: 0;
visibility: hidden;
}
.hc-hero__visual-photo.hc-img-broken {
display: none;
}
.hc-hero__visual-schema {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 3;
}
.hc-hero__visual-schema svg {
width: 64%;
height: 64%;
color: var(--hc-accent-dark, #7a6548);
}
@media (max-width: 1024px) {
.hc-hero__grid {
grid-template-columns: 1fr;
gap: var(--hc-sp-5);
}
.hc-hero__visual {
max-width: 380px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.hc-hero {
padding: clamp(32px, 5vw, 56px) 0 clamp(28px, 4vw, 48px);
min-height: 0;
}
.hc-hero__visual { display: none; }
.hc-hero__copy { max-width: 100%; }
.hc-hero__stats { gap: var(--hc-sp-4); }
}
@media (max-width: 480px) {
.page-home .hc-hero__title,
.hc-hero .hc-hero__title,
.hc-hero__title {
font-size: clamp(30px, 8.5vw, 40px);
line-height: 1.05;
max-width: 100%;
margin: var(--hc-sp-2) 0;
overflow-wrap: anywhere;
word-break: normal;
}
.hc-hero__lede {
font-size: 14.5px;
line-height: 1.5;
max-width: 100%;
}
.hc-hero__mini-meta {
font-size: 9.5px;
gap: 8px;
row-gap: 4px;
}
.hc-hero__mini-meta span + span::before {
margin-right: 8px;
margin-left: -4px;
}
/* Stack CTA buttons full-width — switch from flex to grid for deterministic
single-column layout (beats any .hc-btn--lg width or upstream flex tuning). */
.hc-hero .hc-hero__ctas,
.hc-hero__ctas {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
width: 100%;
}
.hc-hero .hc-hero__ctas > .hc-btn,
.hc-hero__ctas > .hc-btn,
.hc-hero__ctas > a.hc-btn {
width: 100%;
min-width: 0;
padding-left: var(--hc-sp-4);
padding-right: var(--hc-sp-4);
}
.hc-hero__stat b { font-size: 26px; }
.hc-hero__stock-card { flex-wrap: wrap; gap: 14px; padding: 12px 16px; }
}
/* ---- folded from 139-hc-phone-digits.css ---- */
[data-phone-reveal] .hc-phone-digits {filter: none; transition: opacity 0.2s ease; letter-spacing: 0.02em; user-select: text}
[data-phone-reveal][data-revealed] .hc-phone-digits {filter: none; user-select: text}
/* ---- folded from 140-hc-phone-hint.css ---- */
[data-phone-reveal] .hc-phone-hint {font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hc-accent-dark, #7a6548); opacity: 0.7; transition: opacity 0.3s ease}
[data-phone-reveal][data-revealed] .hc-phone-hint {opacity: 0; width: 0; overflow: hidden}
/* ─── Hero checker (Sprint 12.52) — interactive availability finder
that replaces decorative orbit-card. SKU/series input + popular chips. */
.hc-hero__checker {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
width: min(560px, 100%);
padding: clamp(24px, 2.2vw, 32px);
background:
linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 246, 234, 0.92) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: clamp(18px, 1.6vw, 24px);
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 28px 56px -28px rgba(40, 30, 15, 0.22);
isolation: isolate;
overflow: hidden;
}
/* Decorative gold ring rotating slowly (DIZ FX). */
.hc-hero__checker::after {
content: "";
position: absolute;
left: -40%;
top: -40%;
width: 180%;
height: 180%;
border-radius: 50%;
border: 1px dashed rgba(212, 184, 150, 0.28);
pointer-events: none;
z-index: -1;
animation: hc-hero-checker-spin 32s linear infinite;
}
@keyframes hc-hero-checker-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.hc-hero__checker::after { animation: none; }
}
/* Eyebrow row */
.hc-hero__checker-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
.hc-hero__checker-eyebrow svg {
flex-shrink: 0;
color: var(--hc-accent-dark, #7a6548);
}
/* Title */
.hc-hero__checker-title {
margin: 0;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(22px, 2vw, 30px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.018em;
color: var(--hc-ink, #1a1714);
}
.hc-hero__checker-note {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.68));
max-inline-size: 42ch;
}
/* Form layout — input grows, submit auto-width */
.hc-hero__checker-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
margin-top: 4px;
}
/* Input field with leading magnifier icon */
.hc-hero__checker-field {
position: relative;
display: flex;
align-items: center;
}
.hc-hero__checker-icon {
position: absolute;
left: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--hc-accent-dark, #7a6548);
pointer-events: none;
}
.hc-hero__checker-input {
width: 100%;
height: 50px;
padding: 0 16px 0 42px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.28);
border-radius: 12px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 14px;
color: var(--hc-ink, #1a1714);
outline: none;
transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.hc-hero__checker-input::placeholder {
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.42));
}
.hc-hero__checker-input:focus {
border-color: var(--hc-accent-dark, #7a6548);
box-shadow: 0 0 0 3px rgba(212, 184, 150, 0.24);
}
/* Submit button — primary black */
.hc-hero__checker-submit {
display: inline-flex;
align-items: center;
justify-content: center;
height: 50px;
padding: 0 22px;
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border: 0;
border-radius: 12px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
white-space: nowrap;
}
.hc-hero__checker-submit:hover {
background: linear-gradient(135deg, #2a2018, #3d3024);
transform: translateY(-1px);
box-shadow: 0 12px 26px -8px rgba(40, 30, 15, 0.36);
}
.hc-hero__checker-submit:active {
transform: translateY(0);
}
/* Popular series chips row */
.hc-hero__checker-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin-top: 10px;
padding-top: 14px;
border-top: 0.5px dashed rgba(141, 109, 71, 0.22);
}
.hc-hero__checker-chips-label {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
margin-right: 4px;
}
.hc-hero__checker-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
background: rgba(255, 252, 247, 0.86);
border: 0.5px solid rgba(212, 184, 150, 0.55);
border-radius: 999px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
text-decoration: none;
transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.hc-hero__checker-chip:hover {
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
border-color: var(--hc-accent-dark, #7a6548);
color: #2a2018;
transform: translateY(-1px);
}
/* Mobile — stack form vertically */
@media (max-width: 640px) {
.hc-hero__checker-form {
grid-template-columns: 1fr;
}
}
/* ─── Sprint 12.short: tighter padding on wide desktop ─── */
@media (min-width: 1280px) {
.hc-hero {
padding-block-end: clamp(28px, 3vw, 56px);
}
.hc-hero + section, .hc-hero + .hc-sec {
padding-block-start: clamp(40px, 4vw, 72px);
}
}
/* ─── Sprint13.P2: mobile hero (375-720) ─── */
@media (max-width: 720px) {
.hc-hero {
padding-block: 28px 32px;
}
.hc-hero__title,
.hc-hero h1 {
font-size: clamp(34px, 9vw, 52px);
line-height: 1.04;
}
.hc-hero__lede,
.hc-hero p {
font-size: 14px;
max-width: 95%;
}
.hc-hero__grid,
.hc-hero__cols {
grid-template-columns: 1fr !important;
gap: 24px;
}
.hc-hero__cta-row,
.hc-hero .cta-row {
flex-direction: column;
gap: 12px;
align-items: stretch;
}
.hc-hero__cta-row > * {
width: 100%;
justify-content: center;
}
/* checker card narrower on mobile */
.hc-hero__checker,
[class*="hero"][class*="checker"] {
padding: 18px 16px;
border-radius: 14px;
}
}
/* === css/blocks/099-hc-home-contact.css === */
/* =================== hc-home-contact.css =================== */
.hc-home-contact__grid {display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start}
.hc-home-contact__info {max-width: 520px}
.hc-home-contact__lede {margin-top: var(--hc-sp-3, 14px); font-size: 15px; line-height: 1.55; max-width: 48ch}
.hc-home-contact__list {display: grid; gap: var(--hc-sp-2, 10px); margin-top: var(--hc-sp-5, 28px)}
.hc-home-contact__row {display: flex; gap: var(--hc-sp-3, 14px); align-items: center; padding: var(--hc-sp-3, 14px) var(--hc-sp-4, 20px); text-decoration: none}
.hc-home-contact__ico {display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(139, 115, 85, 0.10); color: var(--hc-accent, #8b7355); flex: none}
.hc-home-contact__row-body {display: flex; flex-direction: column; gap: 2px; min-width: 0}
.hc-home-contact__row-body strong {font-size: 16px; font-weight: 500; color: var(--hc-ink, #1a1714)}
.hc-home-contact__row-body small {font-size: 12px; color: var(--hc-muted, rgba(26, 23, 20, 0.55))}
.hc-home-contact__form {padding: clamp(20px, 2.4vw, 28px)}
.hc-home-contact__legal {margin-top: var(--hc-sp-2, 10px); text-align: center}
.hc-home-contact {padding: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 40px); margin-block: clamp(24px, 3vw, 48px); background: var(--hc-bg-2, rgba(139,115,85,0.04)); border-radius: 16px; text-align: center}
/* ─── Sprint13: proof block spacing ─── */
.hc-home-contact__proof {
display: flex;
flex-wrap: wrap;
gap: 18px 28px;
margin-top: var(--hc-sp-4, 20px);
padding: 14px 18px;
background: rgba(212, 184, 150, 0.08);
border: 0.5px solid rgba(141, 109, 71, 0.16);
border-radius: 12px;
}
.hc-home-contact__proof > div {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: var(--hc-sans, "Outfit", sans-serif);
}
.hc-home-contact__proof strong {
font-size: 16px;
font-weight: 600;
color: var(--hc-ink, #1a1714);
letter-spacing: -0.01em;
}
.hc-home-contact__proof span {
font-size: 13px;
color: var(--hc-muted, rgba(26, 23, 20, 0.58));
}
/* === css/blocks/100-hc-img-broken.css === */
/* =================== hc-img-broken.css =================== */
.post-card__media img.hc-img-broken, .news-item__cover.hc-img-broken, .article-related-card__img.hc-img-broken {display: none}
@media(max-width:1024px) {
img.hc-img-broken {display: none}
.pcard-a__media img.hc-img-broken, .pcard-b__media img.hc-img-broken, .pcard-c__media img.hc-img-broken, .pcard-d__media img.hc-img-broken {display: none}
.hc-cart-drawer__thumb img.hc-img-broken, .related-card__img.hc-img-broken {display: none}
}
.hc-img-broken { display: none; }
/* === css/blocks/102-hc-isearch.css === */
/* =================== hc-isearch.css =================== */
.hc-isearch {position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; animation: hc-isearch-fade 0.18s ease-out}
.hc-isearch[hidden] {display: none}
.hc-isearch__backdrop {position: absolute; inset: 0; background: rgba(18, 14, 11, 0.55); backdrop-filter: blur(6px) saturate(140%); cursor: pointer}
.hc-isearch__panel {position: relative; width: 100%; max-width: 720px; max-height: 78vh; display: flex; flex-direction: column; background: var(--hc-bg, #f8f6f3); border: 1px solid rgba(26, 23, 20, 0.08); border-radius: 22px; overflow: hidden; box-shadow: 0 28px 90px rgba(18, 14, 11, 0.28); animation: hc-isearch-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1)}
.hc-isearch__form {display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(26, 23, 20, 0.08); background: var(--hc-paper, #ffffff)}
.hc-isearch__ico {display: grid; place-items: center; color: var(--hc-accent, #8b7355); flex: none}
.hc-isearch__input {flex: 1; border: none; outline: none; background: transparent; font-family: var(--hc-sans, "Outfit", -apple-system, sans-serif); font-size: 17px; color: var(--hc-ink, #1a1714); min-width: 0}
.hc-isearch__input::placeholder {color: var(--hc-muted, rgba(26, 23, 20, 0.4))}
.hc-isearch__kbd {font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.06em; padding: 4px 7px; background: rgba(26, 23, 20, 0.06); border: 1px solid rgba(26, 23, 20, 0.08); border-radius: 4px; color: var(--hc-muted, rgba(26, 23, 20, 0.5))}
.hc-isearch__close {width: 28px; height: 28px; border-radius: 50%; background: rgba(26, 23, 20, 0.04); border: none; color: var(--hc-muted, rgba(26, 23, 20, 0.55)); font-size: 14px; cursor: pointer; flex: none; transition: background 0.2s ease}
.hc-isearch__close:hover {background: rgba(26, 23, 20, 0.1)}
.hc-isearch__results {padding: 14px 18px 20px; overflow-y: auto; min-height: 120px; max-height: calc(78vh - 76px)}
.hc-isearch:has(input.htmx-request) #hc-isearch-results {
opacity: 0.35;
transition: opacity 0.18s ease;
pointer-events: none;
}
.hc-isearch__input.htmx-request {
background-image: linear-gradient(90deg, transparent 0%, rgba(141, 109, 71, 0.14) 50%, transparent 100%);
background-size: 220px 100%;
background-repeat: no-repeat;
animation: hc-isearch-shimmer 1.1s linear infinite;
}
/* ---- folded from 157-hc-sugg-hint.css ---- */
.hc-sugg-hint {padding: 16px 6px}
.hc-sugg-hint p {font-size: 13px; color: var(--hc-muted, rgba(26, 23, 20, 0.58)); margin: 0 0 12px}
.hc-sugg-hint__examples {display: flex; gap: 6px; flex-wrap: wrap}
/* === css/blocks/104-hc-lead-modal.css === */
/* =================== hc-lead-modal.css =================== */
.hc-lead-modal {position: fixed; inset: 0; z-index: var(--hc-z-modal); background: rgba(17,13,10,.34); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: hcFadeIn 160ms var(--hc-ease-out)}
.hc-lead-modal__panel {position: relative; background: var(--hc-paper); max-width: 460px; width: 100%; padding: var(--hc-sp-6) var(--hc-sp-5); border-radius: var(--hc-r-xl); box-shadow: var(--hc-sh-4); animation: hcSlideUp 260ms var(--hc-ease-out)}
.hc-lead-modal__close {position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--hc-ink-soft); transition: background var(--hc-dur-fast)}
.hc-lead-modal__close:hover {background: var(--hc-paper-2)}
.hc-lead-modal__title {font-family: var(--hc-serif); font-size: var(--hc-fs-xl); font-weight: 500; margin: 0}
.hc-lead-modal__subtitle {margin-top: var(--hc-sp-1)}
.hc-lead-modal__form {margin-top: var(--hc-sp-4); display: flex; flex-direction: column; gap: var(--hc-sp-3)}
.hc-lead-modal__required {color: var(--hc-danger)}
.hc-lead-modal__footnote {text-align: center}
.hc-lead-modal__policy-link {color: var(--hc-accent-dark)}
.hc-lead-modal__panel {position: relative; border: 1px solid rgba(46,34,24,.12); background: linear-gradient(180deg, rgba(255,252,247,.98), rgba(247,242,234,.98)); box-shadow: 0 40px 120px rgba(28,22,16,.18), 0 10px 30px rgba(28,22,16,.10); border-radius: 28px; overflow: hidden}
.hc-lead-modal__panel--narrow {max-width: 720px}
.hc-lead-modal__eyebrow {display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hc-gold-border); background: rgba(212,184,150,.10); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-accent-dark)}
.hc-lead-modal__title {max-width: 18ch}
.hc-lead-modal__close {display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid var(--hc-line); box-shadow: 0 8px 24px rgba(27,20,13,.08)}
.hc-lead-modal__proof {display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 4px}
.hc-lead-modal__proof span {padding: 7px 10px; border-radius: 999px; background: rgba(212,184,150,.12); border: 1px solid var(--hc-gold-border); font-size: 12px; color: var(--hc-accent-dark)}
.hc-lead-modal[x-cloak], .hc-modal[x-cloak] {display: none}
/* === css/blocks/105-hc-lightbox.css === */
/* =================== hc-lightbox.css =================== */
.hc-lightbox {position: fixed; inset: 0; z-index: 120; display: grid; align-items: center; justify-content: center; background: rgba(18, 14, 11, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 20px; place-items: center}
.hc-lightbox__close {position: absolute; top: 24px; right: 24px; z-index: 5; width: 44px; height: 44px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--hc-paper, #ffffff); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--hc-dur-fast)}
.hc-lightbox__close:hover {background: rgba(255,255,255,0.18)}
.hc-lightbox__nav {position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--hc-paper, #ffffff); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--hc-dur-fast), transform var(--hc-dur-fast)}
.hc-lightbox__nav:hover {background: rgba(255,255,255,.22); transform: translateY(-50%) scale(1.08)}
.hc-lightbox__nav--prev {left: 24px; top: 50%; transform: translateY(-50%)}
.hc-lightbox__nav--next {right: 24px; top: 50%; transform: translateY(-50%)}
.hc-lightbox__figure {position: relative; max-width: 90vw; max-height: 88vh; display: flex; align-items: center; justify-content: center}
.hc-lightbox__img {max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 120px -40px rgba(0,0,0,0.8)}
.hc-lightbox__caption {position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-family: var(--hc-mono); font-size: var(--hc-fs-sm)}
.hc-lightbox__counter {position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.8); font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 13px; letter-spacing: 0.1em}
.hc-lightbox__close, .hc-lightbox__nav {position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--hc-paper, #ffffff); border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer; transition: background 0.2s ease}
.hc-lightbox__close:hover, .hc-lightbox__nav:hover {background: rgba(255, 255, 255, 0.2)}
@media(max-width:1024px) {
.hc-lightbox__img.hc-img-broken {display: none}
}
/* === css/blocks/108-hc-livechat.css === */
/* =================== hc-livechat.css =================== */
.hc-livechat {
position: fixed; right: 20px; bottom: 20px; z-index: 70; font-family: var(--hc-sans, "Outfit", -apple-system, sans-serif)
}
.hc-livechat__fab {
width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--hc-ink, #1a1714), #2a221c); color: var(--hc-paper, #ffffff); border: none; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(26, 23, 20, 0.32); position: relative; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s
}
.hc-livechat__fab:hover {
transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 36px rgba(26, 23, 20, 0.4)
}
.hc-livechat__fab::after {
content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(212, 184, 150, 0.35), transparent 65%); opacity: 0; transition: opacity 0.28s; z-index: -1; pointer-events: none
}
.hc-livechat__fab:hover::after {
opacity: 1
}
.hc-livechat__dot {
position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--hc-green, var(--hc-success, #3d6b4f)); border: 2px solid var(--hc-ink, #1a1714); animation: hc-pulse-glow 2s ease-in-out infinite
}
.hc-livechat__fab svg {
color: var(--hc-gold, #d4b896)
}
.hc-livechat__panel {
position: absolute; bottom: 76px; right: 0; width: 340px; max-width: calc(100vw - 40px); background: var(--hc-bg, #f8f6f3); border: 1px solid rgba(26, 23, 20, 0.1); border-radius: 18px; box-shadow: 0 24px 72px rgba(18, 14, 11, 0.24); overflow: hidden; transform-origin: bottom right; animation: hc-livechat-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1)
}
.hc-livechat__panel[hidden] {
display: none
}
.hc-livechat__header {
padding: 18px 20px; background: linear-gradient(135deg, var(--hc-ink, #1a1714), #2a221c); color: var(--hc-paper, #ffffff); position: relative; overflow: hidden
}
.hc-livechat__header::after {
content: ""; position: absolute; top: 0; right: 0; width: 180px; height: 120px; background: radial-gradient(ellipse at top right, rgba(212, 184, 150, 0.25), transparent 60%); pointer-events: none
}
.hc-livechat__eyebrow {
font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hc-gold, #d4b896); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; position: relative
}
.hc-livechat__eyebrow i {
display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--hc-success, #3d6b4f); animation: hc-pulse-glow 2s ease-in-out infinite
}
.hc-livechat__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-weight: 500; font-size: 18px; margin: 0 0 2px; position: relative
}
.hc-livechat__sub {
font-size: 12px; color: rgba(255, 255, 255, 0.6); margin: 0; position: relative
}
.hc-livechat__close {
position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: none; color: var(--hc-paper, #ffffff); font-size: 13px; cursor: pointer; z-index: 2
}
.hc-livechat__body {
padding: 18px 20px
}
.hc-livechat__body p {
font-size: 13px; line-height: 1.55; margin: 0 0 12px; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72))
}
.hc-livechat__channels {
display: grid; gap: 8px; margin-bottom: 16px
}
.hc-livechat__channel {
display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--hc-paper, #ffffff); border: 1px solid rgba(26, 23, 20, 0.08); border-radius: 12px; text-decoration: none; color: var(--hc-ink, #1a1714); transition: transform 0.2s ease, border-color 0.2s ease
}
.hc-livechat__channel:hover {
transform: translateX(2px); border-color: var(--hc-accent, #8b7355)
}
.hc-livechat__channel-ico {
width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 16px
}
.hc-livechat__channel-body {
display: flex; flex-direction: column; gap: 2px; min-width: 0
}
.hc-livechat__channel-body strong {
font-weight: 500; font-size: 13.5px
}
.hc-livechat__channel-body span {
font-size: 11.5px; color: var(--hc-muted, rgba(26, 23, 20, 0.58))
}
.hc-livechat__form {
display: grid; gap: 8px; padding-top: 14px; border-top: 1px dashed rgba(26, 23, 20, 0.12)
}
.hc-livechat__form label {
font-size: 11px; color: var(--hc-muted, rgba(26, 23, 20, 0.55)); letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--hc-mono, "JetBrains Mono", monospace)
}
.hc-livechat__form input, .hc-livechat__form textarea {
width: 100%; padding: 10px 12px; background: var(--hc-paper, #ffffff); border: 1px solid rgba(26, 23, 20, 0.1); border-radius: 10px; font-size: 13px; font-family: inherit; outline: none; resize: vertical
}
.hc-livechat__form input:focus, .hc-livechat__form textarea:focus {
border-color: var(--hc-accent, #8b7355)
}
.hc-livechat__submit {
padding: 10px 14px; background: var(--hc-ink, #1a1714); color: #f8f6f3; border: none; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; transition: transform 0.2s ease
}
.hc-livechat__submit:hover {
transform: translateY(-1px)
}
.hc-livechat__done {
padding: 14px; background: rgba(61, 107, 79, 0.08); border: 1px solid rgba(61, 107, 79, 0.22); border-radius: 10px; font-size: 13px; color: var(--hc-green, var(--hc-success, #3d6b4f)); text-align: center
}
.hc-livechat__channel--tg .hc-livechat__channel-ico {
background: rgba(42, 170, 226, 0.14); color: #2aaae2
}
.hc-livechat__channel--wa .hc-livechat__channel-ico {
background: rgba(37, 211, 102, 0.14); color: #25d366
}
.hc-livechat__channel--phone .hc-livechat__channel-ico {
background: rgba(139, 115, 85, 0.14); color: var(--hc-accent, #8b7355)
}
/* === css/blocks/113-hc-newsletter.css === */
/* =================== hc-newsletter.css =================== */
.hc-newsletter {padding: clamp(40px, 6vw, 80px) 0; background: linear-gradient(135deg, var(--hc-gold-soft, rgba(212, 184, 150, 0.12)), rgba(212, 184, 150, 0.04)); border-top: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.38)); border-bottom: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.38))}
.hc-newsletter__grid {display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: center}
.hc-newsletter__title {font-size: clamp(24px, 2.6vw, 32px); max-width: 14ch; font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-weight: 400; line-height: 1.1; margin: 8px 0 12px}
.hc-newsletter__desc {color: var(--hc-ink-mid, rgba(26, 23, 20, 0.65)); margin: 0; max-width: 44ch; font-size: 15px}
.hc-newsletter__form {display: flex; gap: 12px; flex-direction: column}
.hc-newsletter__row {display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap}
.hc-newsletter__note {font-size: 12px; color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55)); margin: 0; line-height: 1.5; display: block; width: 100%; flex-basis: 100%}
.hc-newsletter__form, form.hc-newsletter {display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap}
.hc-newsletter__form input[type="email"], .hc-newsletter .hc-input {flex: 1 1 240px; min-width: 200px; height: 48px; min-height: 48px; max-height: 48px; padding: 0 18px; font-size: 15px; line-height: 48px; border-radius: 12px; border: 1px solid rgba(141, 109, 71, 0.22); background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease}
.hc-newsletter__form input[type="email"]:focus, .hc-newsletter .hc-input:focus {border-color: rgba(141, 109, 71, 0.55); box-shadow: 0 0 0 3px rgba(141, 109, 71, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6); background: var(--hc-paper, #ffffff); outline: none}
.hc-newsletter__form button[type="submit"] {flex: 0 0 auto; padding: 12px 22px; border-radius: 10px; background: var(--hc-ink, #1a1714); color: var(--hc-paper, #ffffff); font-weight: 500; border: none; white-space: nowrap; cursor: pointer}
@media(max-width:1024px) {
.hc-newsletter form {display: flex; flex-direction: column; gap: 10px; align-items: stretch}
.hc-newsletter__row, .hc-newsletter form > div:first-of-type {display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; width: 100%}
.hc-newsletter input[type="email"], .hc-newsletter .hc-input {flex: 1 1 240px; min-width: 0; width: auto}
.hc-newsletter button[type="submit"], .hc-newsletter .hc-btn {flex: 0 0 auto; white-space: nowrap; min-width: 140px}
}
.hc-newsletter .hc-newsletter__grid {
gap: 24px;
}
.hc-newsletter .hc-newsletter__form,
.hc-newsletter form.hc-newsletter,
form.hc-newsletter__form {
display: flex;
flex-direction: column;
gap: 10px;
align-items: stretch;
flex-wrap: nowrap;
}
.hc-newsletter .hc-newsletter__row {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-wrap: wrap;
width: 100%;
}
.hc-newsletter .hc-newsletter__note {
margin: 0;
font-size: 12px;
color: rgba(26, 23, 20, 0.55);
}
/* === css/blocks/115-hc-pay-card.css === */
/* =================== hc-pay-card.css =================== */
.hc-pay-card, [data-pay-method] {position: relative; min-height: 80px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px}
.hc-pay-card__badge, [data-pay-card] .hc-badge, [data-pay-card] .hc-pay-card__badge {position: absolute; top: 8px; right: 8px; font-size: 9px; letter-spacing: 0.06em; padding: 2px 6px; background: rgba(212, 184, 150, 0.20); color: var(--hc-accent-dark, #7a6548); border-radius: 4px}
/* === css/blocks/117-hc-pdp-articles.css === */
/* =================== hc-pdp-articles.css =================== */
/* hc-pdp-articles — premium cross-link card grid for editorial articles
* related to the current product / series. 3-col grid on desktop with
* thumbnail (SVG illustration), category eyebrow, title, reading-time and
* read-more chip. Strict isolation: .hc-pdp-articles / .hc-pdp-articles__*. */
.hc-pdp-articles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(14px, 1.6vw, 22px);
}
.hc-pdp-articles__card {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: inherit;
isolation: isolate;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 14px 32px -22px rgba(40, 30, 15, 0.14);
transition:
transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1),
border-color 0.22s ease,
box-shadow 0.32s ease;
}
.hc-pdp-articles__card:hover {
transform: translateY(-5px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow:
0 2px 4px rgba(40, 30, 15, 0.04),
0 26px 56px -20px rgba(184, 154, 111, 0.32);
}
.hc-pdp-articles__art {
position: relative;
width: 100%;
aspect-ratio: 1.7;
background: linear-gradient(160deg, #faf3e8 0%, #f0e6d3 100%);
overflow: hidden;
}
.hc-pdp-articles__art svg {
width: 100%; height: 100%;
transition: transform 0.55s cubic-bezier(0.2, 0.84, 0.3, 1);
}
/* Defeat the global `svg { fill: currentColor }` rule from _misc.css —
illustrations rely on stroke and explicit per-element fills. */
.hc-pdp-articles__art svg [fill="none"], .hc-pdp-articles__art svg circle:not([fill]), .hc-pdp-articles__art svg rect:not([fill]), .hc-pdp-articles__art svg ellipse:not([fill]), .hc-pdp-articles__art svg path:not([fill]), .hc-pdp-articles__art svg line:not([fill]) {
fill: none;
}
.hc-pdp-articles__art-cat {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.92);
border: 0.5px solid rgba(141, 109, 71, 0.20);
border-radius: 999px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
.hc-pdp-articles__art::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(560px 280px at 85% -10%, rgba(212, 184, 150, 0.22), transparent 60%);
opacity: 0;
transition: opacity 0.32s ease;
}
.hc-pdp-articles__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px 20px;
}
.hc-pdp-articles__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 18px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--hc-ink, #1a1714);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hc-pdp-articles__sub {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hc-pdp-articles__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 10px;
border-top: 0.5px dashed rgba(141, 109, 71, 0.22);
}
.hc-pdp-articles__time {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.5));
}
.hc-pdp-articles__more {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
transition: color 0.18s ease, transform 0.18s ease;
}
@media (max-width: 1024px) {
.hc-pdp-articles { grid-template-columns: 1fr; }
}
/* ─── Recently-viewed rail ─── */
.hc-pdp-recently {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: clamp(10px, 1.2vw, 14px);
margin-top: var(--hc-sp-6);
}
.hc-pdp-recently__card {
display: grid;
grid-template-rows: auto auto auto auto;
gap: 6px;
padding: 12px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.16);
border-radius: 12px;
text-decoration: none;
color: var(--hc-ink, #1a1714);
transition: transform 0.28s cubic-bezier(0.2, 0.84, 0.3, 1), border-color 0.22s ease, box-shadow 0.28s ease;
}
.hc-pdp-recently__card:hover {
transform: translateY(-3px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow: 0 16px 32px -18px rgba(184, 154, 111, 0.32);
}
.hc-pdp-recently__art {
width: 100%;
aspect-ratio: 1;
background: linear-gradient(160deg, var(--hc-paper, #ffffff), #fbf7ed);
border: 0.5px solid rgba(141, 109, 71, 0.10);
border-radius: 8px;
display: grid;
place-items: center;
color: rgba(141, 109, 71, 0.5);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 9.5px;
}
.hc-pdp-recently__art svg {
width: 60%; height: 60%; opacity: 0.8;
}
.hc-pdp-recently__art svg circle:not([fill]), .hc-pdp-recently__art svg rect:not([fill]), .hc-pdp-recently__art svg path:not([fill]), .hc-pdp-recently__art svg line:not([fill]) {
fill: none;
}
.hc-pdp-recently__sku {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.5));
}
.hc-pdp-recently__name {
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 12.5px;
font-weight: 500;
line-height: 1.3;
color: var(--hc-ink, #1a1714);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hc-pdp-recently__price {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 14px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
margin-top: auto;
}
.hc-pdp-articles__card:hover .hc-pdp-articles__art svg {
transform: scale(1.05);
}
.hc-pdp-articles__card:hover .hc-pdp-articles__art::after {
opacity: 1;
}
.hc-pdp-articles__card:hover .hc-pdp-articles__more {
color: var(--hc-ink, #1a1714);
transform: translateX(2px);
}
/* === css/blocks/119-hc-pdp-compat.css === */
/* =================== hc-pdp-compat.css =================== */
.hc-pdp-compat {
margin-top: var(--hc-sp-4, 20px); padding: clamp(20px, 2.4vw, 28px); background: linear-gradient(160deg, #f3e9d6 0%, #ece0c9 100%); border-radius: 22px; position: relative; overflow: hidden
}
.hc-pdp-compat::before {
content: ""; position: absolute; top: 0; right: 0; width: 240px; height: 180px; background: radial-gradient(ellipse at top right, rgba(212, 184, 150, 0.4), transparent 60%); pointer-events: none
}
.hc-pdp-compat > * {
position: relative
}
.hc-pdp-compat__head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: var(--hc-sp-3, 14px)
}
.hc-pdp-compat__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-weight: 500; font-size: 20px; margin: 4px 0 0; color: var(--hc-ink, #1a1714)
}
.hc-pdp-compat__sub {
font-size: 13px; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.65)); margin: 6px 0 0
}
.hc-pdp-compat__grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px
}
.hc-pdp-compat__item {
display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--hc-paper, #ffffff); border-radius: 12px; text-decoration: none; color: var(--hc-ink, #1a1714); transition: transform 0.2s ease
}
.hc-pdp-compat__item:hover {
transform: translateY(-2px)
}
.hc-pdp-compat__item-thumb {
width: 44px; height: 44px; background: var(--hc-bg-2, var(--hc-paper-3, #f2efe9)); border-radius: 8px; padding: 4px; flex: none
}
.hc-pdp-compat__item-thumb img {
width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply
}
.hc-pdp-compat__item-body {
display: flex; flex-direction: column; gap: 2px; min-width: 0
}
.hc-pdp-compat__item-kind {
font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.04em; color: var(--hc-accent-dark, #7a6548); text-transform: uppercase
}
.hc-pdp-compat__item-name {
font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.hc-pdp-compat__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: var(--hc-sp-3, 14px); padding: 10px 18px; background: var(--hc-ink, #1a1714); color: #f8f6f3; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 500; transition: transform 0.2s ease
}
.hc-pdp-compat__cta:hover {
transform: translateY(-1px)
}
.hc-pdp-compat__item--requires .hc-pdp-compat__item-kind {
color: var(--hc-red, #c0392b)
}
.hc-pdp-compat__item--optional .hc-pdp-compat__item-kind {
color: var(--hc-green, var(--hc-success, #3d6b4f))
}
/* === css/blocks/120-hc-pdp-delivery.css === */
/* =================== hc-pdp-delivery.css =================== */
/* hc-pdp-delivery — premium PDP delivery section. 3 method tiles (Самовывоз
* / Курьер / Транспортная компания) + payment-pills strip + small ETA hint.
* Strictly .hc-pdp-delivery / .hc-pdp-delivery__*. */
.hc-pdp-delivery__methods {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 1.4vw, 18px);
margin-bottom: 22px;
}
@media (max-width: 1024px) {
.hc-pdp-delivery__methods { grid-template-columns: 1fr; }
}
.hc-pdp-delivery__tile {
position: relative;
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 8px;
padding: 22px;
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.94) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 16px;
isolation: isolate;
overflow: hidden;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 14px 32px -22px rgba(40, 30, 15, 0.14);
transition: transform 0.28s cubic-bezier(0.2, 0.84, 0.3, 1), border-color 0.22s, box-shadow 0.28s;
}
.hc-pdp-delivery__tile::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(360px 200px at 80% -10%, rgba(212, 184, 150, 0.18), transparent 60%);
opacity: 0;
transition: opacity 0.32s ease;
}
.hc-pdp-delivery__tile:hover {
transform: translateY(-4px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow: 0 28px 56px -22px rgba(184, 154, 111, 0.32);
}
.hc-pdp-delivery__tile:hover::before {
opacity: 1;
}
.hc-pdp-delivery__tile-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.30), rgba(184, 154, 111, 0.12));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.45));
border-radius: 12px;
color: var(--hc-accent-dark, #7a6548);
transition: transform 0.32s ease, color 0.32s ease, background 0.32s ease;
}
.hc-pdp-delivery__tile-ico svg {
width: 22px; height: 22px;
}
.hc-pdp-delivery__tile-title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-weight: 500;
font-size: 18px;
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--hc-ink, #1a1714);
margin: 4px 0 0;
}
.hc-pdp-delivery__tile-desc {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}
.hc-pdp-delivery__tile-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding-top: 12px;
margin-top: auto;
border-top: 0.5px dashed rgba(141, 109, 71, 0.22);
}
.hc-pdp-delivery__tile-eta {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
.hc-pdp-delivery__tile-price {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 16px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
letter-spacing: -0.01em;
}
.hc-pdp-delivery__tile-price--free {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hc-success, #3d6b4f);
}
/* Payment strip */
.hc-pdp-delivery__pay {
display: grid;
gap: 12px;
padding: 18px 22px;
background: linear-gradient(180deg, var(--hc-paper, #ffffff), rgba(252, 248, 240, 0.96));
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 14px;
}
.hc-pdp-delivery__pay-h {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.52));
}
.hc-pdp-delivery__pay-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hc-pdp-delivery__pay-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.20);
border-radius: 999px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 12.5px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
}
.hc-pdp-delivery__pay-pill svg {
width: 16px; height: 16px;
}
.hc-pdp-delivery__pay-pill--visa {
background: linear-gradient(135deg, #0c2c8e, #1a1f71); color: var(--hc-paper, #ffffff); border-color: rgba(0,0,0,0.4);
}
.hc-pdp-delivery__pay-pill--mc {
background: var(--hc-paper, #ffffff); color: var(--hc-ink);
}
.hc-pdp-delivery__pay-pill--mir {
background: linear-gradient(135deg, #0a8553, #0c6e44); color: var(--hc-paper, #ffffff); border-color: rgba(0,0,0,0.3);
}
.hc-pdp-delivery__pay-pill--sbp {
background: linear-gradient(135deg, #ff4040, #1e9eff); color: var(--hc-paper, #ffffff); border-color: rgba(0,0,0,0.2);
}
.hc-pdp-delivery__pay-pill--upd {
background: rgba(212, 184, 150, 0.16); color: var(--hc-accent-dark, #5d4d3a);
}
.hc-pdp-delivery__note {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
padding: 14px 18px;
background: rgba(212, 184, 150, 0.12);
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.42));
border-radius: 12px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13.5px;
line-height: 1.5;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
}
.hc-pdp-delivery__note-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
border-radius: 50%;
color: #2a2018;
flex-shrink: 0;
}
.hc-pdp-delivery__note-ico svg {
width: 14px; height: 14px;
}
.hc-pdp-delivery__note b {
font-weight: 600; color: var(--hc-ink, #1a1714);
}
.hc-pdp-delivery__tile:hover .hc-pdp-delivery__tile-ico {
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
transform: rotate(-6deg) scale(1.06);
}
/* === css/blocks/121-hc-pdp-desc.css === */
/* =================== hc-pdp-desc.css =================== */
/* hc-pdp-desc — premium description panel for PDP "Описание" tab/chapter.
* Composed of: hero lede paragraph, key-features icon grid (3-up), and a
* checked spec list with gold accent. Replaces flat /
markup.
* Strictly .hc-pdp-desc / .hc-pdp-desc__*. */
.hc-pdp-desc {
display: grid;
gap: clamp(14px, 1.8vw, 22px);
}
/* ─── Lede: oversized editorial paragraph ─── */
.hc-pdp-desc__lede {
position: relative;
margin: 0;
padding: 12px 0 12px 24px;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-weight: 400;
font-size: clamp(18px, 1.5vw, 21px);
line-height: 1.45;
letter-spacing: -0.005em;
color: var(--hc-ink, #1a1714);
}
.hc-pdp-desc__lede::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 3px;
border-radius: 2px;
background: linear-gradient(180deg, var(--hc-gold, #d4b896), var(--hc-accent, #8b7355));
}
.hc-pdp-desc__lede em {
color: var(--hc-accent-dark, #7a6548);
font-style: italic;
}
/* ─── Feature grid: 3-up cards на всю ширину panel с большими tiles ─── */
.hc-pdp-desc__features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 1.8vw, 24px);
width: 100%;
}
.hc-pdp-desc__feature {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"num ico"
"title title"
"text text";
gap: 16px 14px;
padding: clamp(26px, 2.6vw, 36px) clamp(24px, 2.4vw, 32px) clamp(28px, 2.8vw, 36px);
background:
linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 246, 234, 0.88) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 18px;
min-height: 220px;
isolation: isolate;
overflow: hidden;
transition:
transform 0.42s cubic-bezier(0.2, 0.84, 0.3, 1),
border-color 0.32s ease,
box-shadow 0.42s cubic-bezier(0.2, 0.84, 0.3, 1);
}
/* Decorative radial glow on hover */
.hc-pdp-desc__feature::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(360px 220px at 100% -10%, rgba(212, 184, 150, 0.28), transparent 60%),
radial-gradient(220px 220px at 0% 110%, rgba(184, 154, 111, 0.16), transparent 60%);
opacity: 0;
transition: opacity 0.42s ease;
}
/* Soft animated dashed ring (rotates slowly on hover, like DIZ) */
.hc-pdp-desc__feature::after {
content: "";
position: absolute;
left: -40%;
top: -40%;
width: 180%;
height: 180%;
border-radius: 50%;
border: 1px dashed rgba(212, 184, 150, 0);
pointer-events: none;
z-index: -2;
transition: border-color 0.42s ease, transform 24s linear;
}
.hc-pdp-desc__feature:hover {
transform: translateY(-4px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow: 0 28px 56px -28px rgba(184, 154, 111, 0.40);
}
.hc-pdp-desc__feature:hover::before { opacity: 1; }
.hc-pdp-desc__feature:hover::after {
border-color: rgba(212, 184, 150, 0.32);
transform: rotate(360deg);
}
@media (max-width: 768px) {
.hc-pdp-desc__features { grid-template-columns: 1fr; gap: 12px; }
.hc-pdp-desc__feature { min-height: 0; padding: 22px; }
}
/* ─── Numbered badge (top-left): big serif "01" in gold circle ─── */
.hc-pdp-desc__feature-num {
grid-area: num;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background:
linear-gradient(135deg, rgba(212, 184, 150, 0.42), rgba(184, 154, 111, 0.16));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.55));
border-radius: 50%;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--hc-accent-dark, #7a6548);
transition: transform 0.42s cubic-bezier(0.2, 0.84, 0.3, 1), background 0.32s ease;
}
.hc-pdp-desc__feature-num::after {
/* Subtle checkmark backdrop, like DIZ step badges */
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border: 0.5px solid rgba(212, 184, 150, 0.42);
border-top-color: transparent;
border-right-color: transparent;
transform: rotate(-45deg);
pointer-events: none;
}
.hc-pdp-desc__feature:hover .hc-pdp-desc__feature-num {
transform: scale(1.08) rotate(-6deg);
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
}
/* ─── Icon pill (top-right): SVG in gold rounded-square ─── */
.hc-pdp-desc__feature-ico {
grid-area: ico;
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background:
linear-gradient(135deg, rgba(212, 184, 150, 0.28), rgba(184, 154, 111, 0.10));
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 12px;
color: var(--hc-accent-dark, #7a6548);
transition: transform 0.5s cubic-bezier(0.2, 0.84, 0.3, 1), background 0.32s ease, color 0.32s ease;
}
.hc-pdp-desc__feature-ico svg {
width: 22px;
height: 22px;
}
.hc-pdp-desc__feature:hover .hc-pdp-desc__feature-ico {
transform: rotate(8deg) translateY(-1px);
background: linear-gradient(135deg, rgba(212, 184, 150, 0.42), rgba(184, 154, 111, 0.18));
color: var(--hc-ink, #1a1714);
}
/* ─── Title and text ─── */
.hc-pdp-desc__feature-title {
grid-area: title;
margin: 6px 0 0;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-weight: 500;
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.15;
letter-spacing: -0.012em;
color: var(--hc-ink, #1a1714);
}
.hc-pdp-desc__feature-text {
grid-area: text;
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.68));
max-width: 36ch;
}
@media (prefers-reduced-motion: reduce) {
.hc-pdp-desc__feature,
.hc-pdp-desc__feature::after,
.hc-pdp-desc__feature-num,
.hc-pdp-desc__feature-ico { transition: none !important; }
.hc-pdp-desc__feature:hover::after { transform: none; }
}
/* ─── Section group with eyebrow ─── */
.hc-pdp-desc__section {
display: grid;
gap: 14px;
padding: 18px 20px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.20);
border-radius: 14px;
}
.hc-pdp-desc__section-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
.hc-pdp-desc__section-eyebrow::before {
content: "";
width: 18px;
height: 1px;
background: linear-gradient(90deg, var(--hc-gold, #d4b896), transparent);
}
.hc-pdp-desc__section-title {
margin: 0;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-weight: 500;
font-size: clamp(20px, 1.7vw, 24px);
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--hc-ink, #1a1714);
}
/* ─── Check-list (replaces ) ─── */
.hc-pdp-desc__checks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px;
margin: 4px 0 0;
padding: 0;
list-style: none;
}
.hc-pdp-desc__check {
display: grid;
grid-template-columns: 22px 1fr;
gap: 12px;
padding: 10px 12px;
background: rgba(252, 248, 240, 0.66);
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 10px;
transition: background 0.22s, border-color 0.22s;
}
.hc-pdp-desc__check:hover {
background: rgba(212, 184, 150, 0.16);
border-color: rgba(141, 109, 71, 0.32);
}
.hc-pdp-desc__check-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: linear-gradient(135deg, rgba(61, 107, 79, 0.20), rgba(107, 164, 128, 0.10));
border: 0.5px solid rgba(61, 107, 79, 0.28);
border-radius: 50%;
color: var(--hc-success, #3d6b4f);
flex-shrink: 0;
margin-top: 1px;
}
.hc-pdp-desc__check-ico svg {
width: 12px; height: 12px;
}
.hc-pdp-desc__check-text {
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13.5px;
line-height: 1.4;
color: var(--hc-ink, #1a1714);
}
.hc-pdp-desc__check-text strong {
font-weight: 600;
color: var(--hc-ink, #1a1714);
}
.hc-pdp-desc__check-text span {
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
/* ─── Highlight callout (для важных предупреждений) ─── */
.hc-pdp-desc__callout {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
align-items: start;
padding: 16px 18px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.16), rgba(184, 154, 111, 0.06));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.45));
border-radius: 12px;
}
.hc-pdp-desc__callout-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
border-radius: 50%;
flex-shrink: 0;
}
.hc-pdp-desc__callout-ico svg {
width: 16px; height: 16px;
}
.hc-pdp-desc__callout-body {
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13.5px;
line-height: 1.55;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
}
.hc-pdp-desc__callout-body b {
font-weight: 600;
color: var(--hc-ink, #1a1714);
}
.hc-pdp-desc__feature:hover .hc-pdp-desc__feature-ico {
transform: rotate(-5deg) scale(1.06);
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
}
/* ─── Structured body (output of format_pdp_desc filter) ───────────── */
.hc-pdp-desc__body {
display: grid;
gap: 14px;
font-family: var(--hc-sans, "Outfit", sans-serif);
color: var(--hc-ink, #1a1714);
line-height: 1.65;
}
.hc-pdp-desc__body > p {
margin: 0;
font-size: clamp(15px, 1.05vw, 16.5px);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.82));
}
.hc-pdp-desc__body > p:first-child {
position: relative;
padding: 12px 0 12px 24px;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(18px, 1.4vw, 21px);
line-height: 1.5;
color: var(--hc-ink, #1a1714);
letter-spacing: -0.005em;
}
.hc-pdp-desc__body > p:first-child::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 3px;
border-radius: 2px;
background: linear-gradient(180deg, var(--hc-gold, #d4b896), var(--hc-accent, #8b7355));
}
.hc-pdp-desc__body h4 {
margin: 12px 0 4px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
.hc-pdp-desc__body h4::before {
content: "";
display: inline-block;
width: 22px;
height: 1px;
margin-right: 8px;
vertical-align: middle;
background: linear-gradient(90deg, var(--hc-gold, #d4b896), transparent);
}
.hc-pdp-desc__body ul {
display: grid;
gap: 6px;
margin: 4px 0 8px;
padding: 0;
list-style: none;
counter-reset: pdp-bullet;
}
.hc-pdp-desc__body li {
counter-increment: pdp-bullet;
position: relative;
padding: 8px 12px 8px 44px;
font-size: 15px;
line-height: 1.55;
color: var(--hc-ink, #1a1714);
border-radius: 8px;
transition:
background 0.22s cubic-bezier(0.2, 0.84, 0.3, 1),
transform 0.22s cubic-bezier(0.2, 0.84, 0.3, 1),
color 0.22s ease;
animation: hc-pdp-desc-li-in 0.42s cubic-bezier(0.2, 0.84, 0.3, 1) backwards;
animation-delay: calc(var(--i, 0) * 30ms);
}
.hc-pdp-desc__body li::before {
/* Animated checkmark bullet — gold circle with ✓ inside */
content: "";
position: absolute;
left: 8px;
top: 9px;
width: 22px;
height: 22px;
border-radius: 50%;
background:
linear-gradient(135deg, rgba(212, 184, 150, 0.32), rgba(184, 154, 111, 0.12));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.55));
transition: background 0.32s ease, border-color 0.32s ease, transform 0.42s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-pdp-desc__body li::after {
/* Checkmark glyph (SVG-style via clip-path) */
content: "";
position: absolute;
left: 13px;
top: 14px;
width: 12px;
height: 12px;
background: var(--hc-accent-dark, #7a6548);
clip-path: polygon(14% 50%, 0% 64%, 38% 100%, 100% 28%, 86% 14%, 38% 72%);
transform: scale(0.78);
transition: background 0.32s ease, transform 0.42s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-pdp-desc__body li:hover {
background: linear-gradient(90deg, rgba(212, 184, 150, 0.14), rgba(212, 184, 150, 0.04));
transform: translateX(3px);
color: var(--hc-ink, #1a1714);
}
.hc-pdp-desc__body li:hover::before {
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
border-color: var(--hc-accent-dark, #7a6548);
transform: rotate(360deg);
}
.hc-pdp-desc__body li:hover::after {
background: #2a2018;
transform: scale(0.92);
}
/* Stagger entry — sets --i per li via :nth-child cascade up to 24 */
.hc-pdp-desc__body li:nth-child(1) { --i: 1; }
.hc-pdp-desc__body li:nth-child(2) { --i: 2; }
.hc-pdp-desc__body li:nth-child(3) { --i: 3; }
.hc-pdp-desc__body li:nth-child(4) { --i: 4; }
.hc-pdp-desc__body li:nth-child(5) { --i: 5; }
.hc-pdp-desc__body li:nth-child(6) { --i: 6; }
.hc-pdp-desc__body li:nth-child(7) { --i: 7; }
.hc-pdp-desc__body li:nth-child(8) { --i: 8; }
.hc-pdp-desc__body li:nth-child(9) { --i: 9; }
.hc-pdp-desc__body li:nth-child(10) { --i: 10; }
.hc-pdp-desc__body li:nth-child(11) { --i: 11; }
.hc-pdp-desc__body li:nth-child(12) { --i: 12; }
.hc-pdp-desc__body li:nth-child(n+13) { --i: 13; }
@keyframes hc-pdp-desc-li-in {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.hc-pdp-desc__body li,
.hc-pdp-desc__body li::before,
.hc-pdp-desc__body li::after {
animation: none !important;
transition: none !important;
}
}
/* === css/blocks/122-hc-pdp-docs-empty.css === */
/* =================== hc-pdp-docs-empty.css =================== */
.hc-pdp-docs-empty {padding: 18px; background: var(--hc-bg-2, var(--hc-paper-3, #f2efe9)); border: 1px dashed rgba(26, 23, 20, 0.12); border-radius: 12px; font-size: 13px; color: var(--hc-muted, rgba(26, 23, 20, 0.55)); text-align: center}
.hc-pdp-docs-empty strong {display: block; color: var(--hc-ink, #1a1714); font-weight: 500; margin-bottom: 4px}
/* === css/blocks/123-hc-pdp-gallery.css === */
/* =================== hc-pdp-gallery.css =================== */
/* hc-pdp-gallery - premium PDP gallery: tabs (Фото/360/Видео), big main image
* with subtle gold-tinted bg and zoom-on-hover, thumbnail grid below with
* gold-accent active state, and empty-state SVG placeholder when no images.
* Strictly .hc-pdp-gallery / .hc-pdp-gallery__*. */
.hc-pdp-gallery {
position: relative;
min-width: 0;
}
/* tabs (Фото / 360° / Видео / Схема) */
.hc-pdp-gallery__tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}
.hc-pdp-gallery__tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: rgba(255, 252, 247, 0.86);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: var(--hc-r-pill, 999px);
font: inherit;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.hc-pdp-gallery__tab:hover {
background: rgba(212, 184, 150, 0.16);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.4));
color: var(--hc-ink, #1a1714);
}
.hc-pdp-gallery__tab.is-active {
background: linear-gradient(180deg, rgba(28, 24, 20, 0.98), rgba(17, 14, 12, 1));
color: var(--hc-paper, #ffffff);
border-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.28);
}
/* main image — large, premium gold-tinted bg, smooth hover zoom */
.hc-pdp-gallery__main {
position: relative;
aspect-ratio: 1 / 1;
padding: clamp(8px, 1.8vw, 20px);
background:
radial-gradient(circle at 50% 108%, rgba(199, 155, 96, 0.12), transparent 58%),
linear-gradient(160deg, #fffdf8 0%, #f6efe2 100%);
border: 1px solid rgba(141, 109, 71, 0.22);
border-radius: clamp(20px, 2vw, 28px);
overflow: hidden;
isolation: isolate;
cursor: zoom-in;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 28px 70px -28px rgba(40, 30, 15, 0.22);
}
.hc-pdp-gallery__main::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.65), transparent 55%);
}
.hc-pdp-gallery__main--empty {
cursor: default;
}
.hc-pdp-gallery__main--zoomable {
--hc-zoom-x: 50%;
--hc-zoom-y: 50%;
}
.hc-pdp-gallery__main img, .hc-pdp-gallery__img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: var(--hc-zoom-x, 50%) var(--hc-zoom-y, 50%);
transition:
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.25s ease,
filter 0.55s ease;
}
.hc-pdp-gallery__main:hover img {
transform: scale(1.06);
filter: drop-shadow(0 28px 50px rgba(40, 30, 15, 0.22));
}
.hc-pdp-gallery__zoom {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.96);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 50%;
color: var(--hc-ink, #1a1714);
pointer-events: none;
box-shadow: 0 6px 14px -4px rgba(40, 30, 15, 0.18);
opacity: 0.85;
transition: opacity 0.22s ease;
}
.hc-pdp-gallery__counter {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 2;
padding: 6px 12px;
background: rgba(26, 23, 20, 0.84);
color: var(--hc-paper, #ffffff);
border-radius: var(--hc-r-pill);
font-family: var(--hc-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hc-pdp-gallery__sale {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
}
/* thumbnails grid — tight 7-column row под gallery, по mock M1.
Лишние превью (>7) скрываются вместо переноса во вторую строку. */
.hc-pdp-gallery__thumbs {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
margin-top: 14px;
padding-bottom: 0;
}
.hc-pdp-gallery__thumbs > :nth-child(n+8) {
display: none;
}
.hc-pdp-gallery__thumb {
aspect-ratio: 1;
padding: 6px;
background: var(--hc-paper-3, #f2efe9);
border: 1px solid rgba(141, 109, 71, 0.14);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition:
border-color 0.22s ease,
transform 0.22s ease,
box-shadow 0.22s ease;
}
.hc-pdp-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.hc-pdp-gallery__thumb:hover {
transform: translateY(-2px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow: 0 8px 18px -8px rgba(184, 154, 111, 0.32);
}
.hc-pdp-gallery__thumb.is-active {
border-color: var(--hc-accent, #8b7355);
background: rgba(212, 184, 150, 0.18);
box-shadow: 0 8px 22px -6px rgba(139, 115, 85, 0.32);
}
/* empty state — no images, SVG placeholder + CTA */
.hc-pdp-gallery__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
width: 100%;
min-height: 420px;
padding: clamp(24px, 4vw, 48px);
background: linear-gradient(160deg, #fcfaf6 0%, #f0e6d3 100%);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: clamp(20px, 2vw, 28px);
color: var(--hc-ink-mid);
text-align: center;
}
.hc-pdp-gallery__empty-art {
width: 100%;
max-width: 420px;
margin: 0 auto;
opacity: 0.85;
}
.hc-pdp-gallery__empty-msg {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
padding: 8px 16px;
text-align: center;
}
.hc-pdp-gallery__empty-msg strong {
display: block;
font-family: var(--hc-serif, "Playfair Display", serif);
font-weight: 500;
font-size: 17px;
color: var(--hc-ink, #1a1714);
margin-bottom: 4px;
}
.hc-pdp-gallery__empty-msg span {
display: block;
max-width: 44ch;
font-size: 13px;
line-height: 1.55;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
margin-bottom: 10px;
}
@media (max-width: 1024px) {
.hc-pdp-gallery__img.hc-img-broken { display: none; }
.hc-pdp-gallery__thumbs {
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.hc-pdp-gallery__thumbs > :nth-child(n+6) {
display: none;
}
}
@media (max-width: 480px) {
.hc-pdp-gallery__main { padding: clamp(10px, 3vw, 18px); }
.hc-pdp-gallery__zoom { width: 32px; height: 32px; top: 12px; right: 12px; }
}
.hc-pdp-gallery__main:hover .hc-pdp-gallery__img {
transform: scale(1.06);
filter: drop-shadow(0 28px 50px rgba(40, 30, 15, 0.22));
}
.hc-pdp-gallery__main.is-zooming .hc-pdp-gallery__img {
transform: scale(2.2);
}
.hc-pdp-gallery__main:hover .hc-pdp-gallery__zoom {
opacity: 1;
}
/* === css/blocks/124-hc-pdp-infographic.css === */
/* =================== hc-pdp-infographic.css =================== */
.hc-pdp-infographic {margin: var(--hc-sp-5, 28px) 0; padding: clamp(20px, 2.2vw, 32px); background: linear-gradient(135deg, rgba(139, 115, 85, 0.04), rgba(139, 115, 85, 0.02)); border: 0.5px solid rgba(139, 115, 85, 0.15); border-radius: 16px}
.hc-pdp-infographic__head {margin-bottom: clamp(14px, 1.8vw, 20px); text-align: center}
.hc-pdp-infographic__title {font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-weight: 500; font-size: clamp(18px, 2vw, 22px); margin: 4px 0 0; color: var(--hc-ink, #1a1714)}
.hc-pdp-infographic__viewer {background: var(--hc-paper, #ffffff); border-radius: 12px; padding: clamp(12px, 1.5vw, 18px); border: 0.5px solid rgba(26, 23, 20, 0.05)}
.hc-pdp-infographic__facts {display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin-top: 16px}
.hc-pdp-infographic__fact {text-align: center; padding: 12px 10px; background: var(--hc-paper, #ffffff); border: 0.5px solid rgba(26, 23, 20, 0.06); border-radius: 10px}
.hc-pdp-infographic__fact-num {display: block; font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-size: 22px; font-weight: 500; color: var(--hc-accent-dark, #7a6548); line-height: 1; margin-bottom: 4px}
.hc-pdp-infographic__fact-lbl {display: block; font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hc-muted, rgba(26, 23, 20, 0.55))}
/* === css/blocks/125-hc-pdp-m1.css === */
/* =================== hc-pdp-m1.css =================== */
/* hc-pdp-m1 — Editorial Premium PDP layout (variant 1):
* • 2-col hero (gallery 60% | info+buy 40%)
* • sticky tab-bar full-width under hero
* • tab panels open full-width with editorial typography
* • everything below hero is "below the fold" content sections
* Strict isolation: only .hc-pdp-m1 / .hc-pdp-m1__*. */
.hc-pdp-m1__hero {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr);
gap: clamp(20px, 2.4vw, 36px);
margin: 18px 0 28px;
align-items: start;
}
/* ─── Gallery (left) ─── */
.hc-pdp-m1__gallery {
position: relative;
}
.hc-pdp-m1__stage {
position: relative;
aspect-ratio: 1.05;
background:
radial-gradient(circle at 50% 110%, rgba(199, 155, 96, 0.18), transparent 60%),
linear-gradient(160deg, var(--hc-paper, #ffffff) 0%, #f4e9cd 100%);
border: 0.5px solid rgba(141, 109, 71, 0.20);
border-radius: clamp(20px, 2vw, 28px);
padding: clamp(28px, 4vw, 56px);
display: grid;
place-items: center;
overflow: hidden;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 28px 70px -28px rgba(40, 30, 15, 0.22);
}
.hc-pdp-m1__stage svg {
width: 80%; height: 80%;
}
.hc-pdp-m1__stage-badge {
position: absolute;
top: 16px;
left: 16px;
padding: 6px 12px;
background: linear-gradient(135deg, #8b3f32, #6f3329);
color: var(--hc-paper, #ffffff);
border-radius: 999px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
box-shadow: 0 6px 14px -4px rgba(111, 51, 41, 0.34);
}
.hc-pdp-m1__thumbs {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-top: 14px;
}
.hc-pdp-m1__thumb {
aspect-ratio: 1;
background: linear-gradient(160deg, var(--hc-paper-3, #f2efe9), #e8e2d5);
border: 0.5px solid rgba(141, 109, 71, 0.12);
border-radius: 12px;
cursor: pointer;
transition: border-color 0.18s ease, transform 0.18s ease;
}
.hc-pdp-m1__thumb:hover {
transform: translateY(-2px);
}
.hc-pdp-m1__thumb.is-active {
border: 1.5px solid var(--hc-accent, #8b7355);
}
/* ─── Info + buy aside (right) ─── */
.hc-pdp-m1__aside {
display: flex; flex-direction: column; gap: 14px;
align-self: start;
}
.hc-pdp-m1__eyebrow {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
.hc-pdp-m1__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(28px, 2.6vw, 40px);
font-weight: 500;
line-height: 1.06;
letter-spacing: -0.015em;
color: var(--hc-ink, #1a1714);
margin: 0;
max-width: 14ch;
}
.hc-pdp-m1__title em {
color: var(--hc-accent-dark, #7a6548);
font-style: italic;
}
.hc-pdp-m1__rating {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}
.hc-pdp-m1__rating-stars {
color: var(--hc-gold, #d4b896);
letter-spacing: 1px;
}
.hc-pdp-m1__buy {
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(251, 247, 237, 0.94) 100%);
border: 1px solid var(--hc-gold-border, rgba(212, 184, 150, 0.42));
border-radius: 18px;
padding: 22px;
position: sticky;
top: calc(var(--hc-hdr-h, 72px) + 12px);
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 18px 44px -28px rgba(40, 30, 15, 0.22);
}
/* compact SKU chip inside price card — half-width inline pill */
.hc-pdp-m1__sku-row {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 4px 4px 10px;
margin: 0 0 12px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.20), rgba(184, 154, 111, 0.08));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.45));
border-radius: 999px;
max-width: 100%;
}
.hc-pdp-m1__sku-key {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.hc-pdp-m1__sku-val {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--hc-ink, #1a1714);
user-select: all;
}
.hc-pdp-m1__sku-copy {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 50%;
color: var(--hc-accent-dark, #7a6548);
cursor: pointer;
transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.hc-pdp-m1__sku-copy:hover {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border-color: var(--hc-ink, #1a1714);
transform: scale(1.08);
}
.hc-pdp-m1__sku-copy svg {
width: 11px; height: 11px;
}
.hc-pdp-m1__sku-copy-label {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.hc-pdp-m1__price-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
}
.hc-pdp-m1__price {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 42px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--hc-ink, #1a1714);
}
.hc-pdp-m1__price-old {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 16px;
font-weight: 500;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.4));
text-decoration: line-through;
}
.hc-pdp-m1__sale-chip {
padding: 4px 10px;
background: #8b3f32;
color: var(--hc-paper, #ffffff);
border-radius: 6px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
}
.hc-pdp-m1__stock {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 12px 0 16px;
padding: 6px 12px;
background: rgba(61, 107, 79, 0.10);
border: 0.5px solid rgba(61, 107, 79, 0.28);
border-radius: 999px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hc-success, #3d6b4f);
}
.hc-pdp-m1__ctas {
display: flex;
flex-direction: column;
gap: 10px;
}
.hc-pdp-m1__qty {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 42px;
align-items: center;
min-height: 44px;
border: 1px solid rgba(141, 109, 71, 0.24);
border-radius: 12px;
background: rgba(255, 255, 255, 0.72);
overflow: hidden;
}
.hc-pdp-m1__qty-btn {
width: 42px;
height: 44px;
border: 0;
background: transparent;
color: var(--hc-ink, #1a1714);
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: background 0.18s ease;
}
.hc-pdp-m1__qty-btn:hover {
background: rgba(212, 184, 150, 0.18);
}
.hc-pdp-m1__qty-input {
width: 100%;
height: 44px;
border: 0;
border-inline: 1px solid rgba(141, 109, 71, 0.14);
background: transparent;
text-align: center;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 14px;
font-weight: 700;
color: var(--hc-ink, #1a1714);
appearance: textfield;
}
.hc-pdp-m1__qty-input::-webkit-outer-spin-button,
.hc-pdp-m1__qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.hc-pdp-m1__qty-input:focus {
outline: none;
}
.hc-pdp-m1__cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 50px;
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border: 0;
border-radius: 12px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.hc-pdp-m1__cta-primary:hover {
background: linear-gradient(135deg, #2a2018, #3d3024);
transform: translateY(-1px);
box-shadow: 0 12px 26px -8px rgba(40, 30, 15, 0.36);
}
.hc-pdp-m1__cta-outline {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 46px;
background: transparent;
color: var(--hc-ink, #1a1714);
border: 1px solid rgba(26, 23, 20, 0.22);
border-radius: 12px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.22s ease, border-color 0.22s ease;
}
.hc-pdp-m1__cta-outline:hover {
background: rgba(212, 184, 150, 0.16);
border-color: rgba(141, 109, 71, 0.42);
}
/* ─── Extended stock strip dots/labels ─────────────────────────────── */
.hc-pdp-m1__stock-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 0 currentColor;
animation: hc-pdp-m1-stock-pulse 2.4s ease-out infinite;
flex-shrink: 0;
}
@keyframes hc-pdp-m1-stock-pulse {
to { box-shadow: 0 0 0 10px transparent; }
}
.hc-pdp-m1__stock-label { font-weight: 700; }
.hc-pdp-m1__stock-aux {
font-weight: 500;
letter-spacing: 0.04em;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
text-transform: none;
}
.hc-pdp-m1__stock-aux::before {
content: "·";
margin: 0 6px;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.35));
}
.hc-pdp-m1__stock[data-state="out"] {
background: rgba(166, 116, 38, 0.10);
border-color: rgba(166, 116, 38, 0.28);
color: var(--hc-warn, #a67426);
}
@media (prefers-reduced-motion: reduce) {
.hc-pdp-m1__stock-dot { animation: none; }
}
/* ─── Integrated qty + CTA (Apple-style) ───────────────────────────── */
.hc-pdp-m1__atc {
display: grid;
grid-template-columns: 132px minmax(0, 1fr);
gap: 10px;
align-items: stretch;
}
.hc-pdp-m1__atc-form { display: contents; }
.hc-pdp-m1__atc .hc-pdp-m1__qty { height: 50px; min-height: 50px; }
.hc-pdp-m1__atc .hc-pdp-m1__qty-btn { height: 50px; }
.hc-pdp-m1__atc .hc-pdp-m1__qty-input { height: 50px; }
/* ─── Out-of-stock CTA variant ─────────────────────────────────────── */
.hc-pdp-m1__cta-primary--request {
background: linear-gradient(135deg, var(--hc-accent-dark, #7a6548), var(--hc-accent, #8b7355));
gap: 10px;
}
.hc-pdp-m1__cta-primary--request:hover {
background: linear-gradient(135deg, #6a5840, #7a6548);
transform: translateY(-1px);
box-shadow: 0 12px 26px -8px rgba(122, 101, 72, 0.36);
}
.hc-pdp-m1__cta-primary--request svg { width: 16px; height: 16px; }
/* ─── Icon-only action row (replaces old wide-pill .acts/.act) ─────── */
.hc-pdp-m1__icon-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-top: 18px;
padding-top: 14px;
border-top: 0.5px dashed rgba(141, 109, 71, 0.22);
}
.hc-pdp-m1__icon-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 4px 8px;
background: transparent;
border: 0;
border-radius: 12px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
text-align: center;
text-decoration: none;
cursor: pointer;
transition:
background 0.22s cubic-bezier(0.2, 0.84, 0.3, 1),
color 0.22s cubic-bezier(0.2, 0.84, 0.3, 1),
transform 0.22s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-pdp-m1__icon-btn::before {
content: "";
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.22), rgba(184, 154, 111, 0.08));
border: 0.5px solid rgba(141, 109, 71, 0.22);
transition:
background 0.22s cubic-bezier(0.2, 0.84, 0.3, 1),
border-color 0.22s cubic-bezier(0.2, 0.84, 0.3, 1),
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);
}
.hc-pdp-m1__icon-btn > svg {
width: 18px;
height: 18px;
color: var(--hc-accent-dark, #7a6548);
margin-block-start: -34px;
pointer-events: none;
transition: transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1), color 0.22s ease;
}
.hc-pdp-m1__icon-label { font-size: 10.5px; line-height: 1.2; }
.hc-pdp-m1__icon-btn:hover { color: var(--hc-ink, #1a1714); }
.hc-pdp-m1__icon-btn:hover::before {
background: linear-gradient(135deg, rgba(212, 184, 150, 0.42), rgba(184, 154, 111, 0.20));
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.62));
box-shadow: 0 8px 18px -8px rgba(184, 154, 111, 0.42);
transform: translateY(-2px);
}
.hc-pdp-m1__icon-btn:hover > svg {
transform: translateY(-2px) scale(1.08);
color: var(--hc-ink, #1a1714);
}
.hc-pdp-m1__icon-btn:active::before { transform: translateY(0) scale(0.96); }
.hc-pdp-m1__icon-btn:focus-visible::before {
outline: 2px solid var(--hc-accent, #8b7355);
outline-offset: 2px;
}
.hc-pdp-m1__icon-btn[data-active="true"] > svg { color: #c9433a; fill: #c9433a; }
/* ─── Trust strip ──────────────────────────────────────────────────── */
.hc-pdp-m1__trust {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 16px 0 0;
padding: 14px 16px;
background: rgba(212, 184, 150, 0.10);
border: 0.5px solid rgba(141, 109, 71, 0.16);
border-radius: 12px;
list-style: none;
}
.hc-pdp-m1__trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
flex: 1 1 auto;
white-space: nowrap;
}
.hc-pdp-m1__trust-item svg {
width: 16px;
height: 16px;
color: var(--hc-accent-dark, #7a6548);
flex-shrink: 0;
}
@media (max-width: 720px) {
.hc-pdp-m1__atc { grid-template-columns: 1fr; gap: 8px; }
.hc-pdp-m1__icon-row { gap: 4px; }
.hc-pdp-m1__trust { flex-direction: column; gap: 8px; }
.hc-pdp-m1__trust-item { white-space: normal; }
}
/* Per-action icon animations on hover */
@keyframes hc-pdp-m1-shake {
0%, 100% { transform: rotate(0); }
20% { transform: rotate(-14deg); }
40% { transform: rotate(12deg); }
60% { transform: rotate(-8deg); }
80% { transform: rotate(6deg); }
}
/* ─── Sticky tab bar ─── */
.hc-pdp-m1__tabs-bar {
position: sticky;
top: var(--hc-hdr-h, 72px);
z-index: 50;
margin: 0 calc(-1 * var(--hc-sp-5, 28px));
padding: 12px clamp(20px, 2.4vw, 32px);
background: rgba(245, 242, 236, 0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 0.5px solid rgba(141, 109, 71, 0.20);
border-bottom: 0.5px solid rgba(141, 109, 71, 0.20);
box-shadow: 0 8px 22px -16px rgba(40, 30, 15, 0.22);
}
.hc-pdp-m1__tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: 1360px;
margin: 0 auto;
}
.hc-pdp-m1__tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 999px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13px;
font-weight: 500;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.hc-pdp-m1__tab:hover {
background: rgba(212, 184, 150, 0.16);
border-color: rgba(141, 109, 71, 0.42);
color: var(--hc-ink, #1a1714);
}
.hc-pdp-m1__tab.is-active {
background: linear-gradient(180deg, #1f1a15, #14110d);
color: var(--hc-paper, #ffffff);
border-color: rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.28);
}
.hc-pdp-m1__tab__c {
display: inline-flex;
align-items: center;
padding: 2px 7px;
background: rgba(212, 184, 150, 0.22);
color: var(--hc-accent-dark, #7a6548);
border-radius: 999px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
}
/* ─── Tab panels (full-width content) ─── */
.hc-pdp-m1__panel {
padding: 36px 0 24px;
max-width: 1360px;
margin: 0 auto;
}
.hc-pdp-m1__panel h3 {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-weight: 500;
font-size: clamp(20px, 1.6vw, 24px);
margin: 24px 0 10px;
letter-spacing: -0.005em;
}
.hc-pdp-m1__panel h3:first-child {
margin-top: 0;
}
.hc-pdp-m1__panel p {
line-height: 1.65;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
margin: 0 0 12px;
}
.hc-pdp-m1__panel ul {
line-height: 1.7;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
padding-left: 18px;
margin: 0 0 16px;
}
.hc-pdp-m1__panel li {
margin: 6px 0;
}
/* spec table for «Характеристики» tab */
.hc-pdp-m1__spec-table {
width: 100%;
border-collapse: collapse;
margin-top: 14px;
}
.hc-pdp-m1__spec-table tr {
border-bottom: 0.5px solid rgba(141, 109, 71, 0.14);
}
.hc-pdp-m1__spec-table tr:last-child {
border-bottom: 0;
}
.hc-pdp-m1__spec-table td {
padding: 12px 14px;
vertical-align: top;
}
.hc-pdp-m1__spec-table td:first-child {
width: 44%;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.hc-pdp-m1__spec-table td:last-child {
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 14px;
font-weight: 600;
color: var(--hc-ink, #1a1714);
}
@media (max-width: 1024px) {
.hc-pdp-m1__hero {
grid-template-columns: 1fr;
}
.hc-pdp-m1__buy { position: static; top: auto; }
.hc-pdp-m1__tabs-bar {
margin: 0;
border-radius: 0;
}
}
@media (max-width: 1440px) and (min-width: 921px) {
}
.hc-pdp-m1__tab.is-active .hc-pdp-m1__tab__c {
background: rgba(255, 255, 255, 0.18);
color: var(--hc-paper, #ffffff);
}
.hc-pdp-m1__atc-form { display: contents; }
body.page-pdp .hc-mobile-tabbar { display: none; }
.page-pdp .hc-wrap { max-width: min(1480px, calc(100vw - 48px)); }
/* ---- folded from 130-hc-pdp-specs.css ---- */
/* =================== hc-pdp-specs.css =================== */
/* hc-pdp-specs — grouped premium specification list. Specs are bucketed
* into categories (identifiers, mechanics, dimensions, material, packaging,
* other) and rendered as section cards with SVG icon headers. Each row is
* a clean dt/dd pair (no chip-pills). Hover row highlight. */
.hc-pdp-specs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
gap: clamp(14px, 1.4vw, 22px);
margin: 0;
width: 100%;
}
.hc-pdp-specs__group {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(251, 247, 237, 0.86) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 14px;
overflow: hidden;
transition: border-color 0.32s ease, box-shadow 0.32s ease, transform 0.32s ease;
}
.hc-pdp-specs__group:hover {
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow: 0 18px 36px -22px rgba(184, 154, 111, 0.32);
}
.hc-pdp-specs__group-head {
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-bottom: 0.5px solid rgba(141, 109, 71, 0.16);
background: linear-gradient(135deg, rgba(212, 184, 150, 0.14), rgba(184, 154, 111, 0.04));
}
.hc-pdp-specs__group-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.32), rgba(184, 154, 111, 0.14));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.45));
border-radius: 10px;
color: var(--hc-accent-dark, #7a6548);
transition: transform 0.42s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-pdp-specs__group-ico svg { width: 18px; height: 18px; }
.hc-pdp-specs__group:hover .hc-pdp-specs__group-ico {
transform: rotate(-6deg) scale(1.08);
}
.hc-pdp-specs__group-title {
margin: 0;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 17px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--hc-ink, #1a1714);
}
.hc-pdp-specs__group-count {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--hc-accent-dark, #7a6548);
padding: 3px 9px;
background: rgba(212, 184, 150, 0.22);
border-radius: 999px;
}
.hc-pdp-specs__list {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.hc-pdp-specs__row {
display: grid;
grid-template-columns: minmax(160px, 0.9fr) minmax(0, 1.1fr);
align-items: baseline;
gap: 14px;
padding: 12px 18px;
margin: 0;
background: transparent;
border-bottom: 0.5px dashed rgba(141, 109, 71, 0.14);
transition: background 0.18s ease;
}
.hc-pdp-specs__row:last-child { border-bottom: 0; }
.hc-pdp-specs__row:hover {
background: linear-gradient(90deg, rgba(212, 184, 150, 0.12), rgba(212, 184, 150, 0.02));
}
.hc-pdp-specs__key {
margin: 0;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.hc-pdp-specs__val {
margin: 0;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 14.5px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
word-break: break-word;
}
.hc-pdp-specs__val--num {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-feature-settings: "tnum" 1;
letter-spacing: 0.03em;
}
.hc-pdp-specs__val--brand {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-style: italic;
font-size: 16px;
color: var(--hc-accent-dark, #7a6548);
}
@media (max-width: 720px) {
.hc-pdp-specs { grid-template-columns: 1fr; }
.hc-pdp-specs__row { grid-template-columns: 1fr; gap: 2px; padding: 10px 16px; }
.hc-pdp-specs__row:hover { background: rgba(212, 184, 150, 0.08); }
}
/* ---- folded from 136-hc-pdp.css ---- */
/* PDP base layout primitives. Variants own visual skin in 125/126/127. */
.hc-pdp {
padding-top: var(--hc-sp-5);
}
.hc-pdp__main,
.hc-pdp__grid {
display: grid;
gap: clamp(14px, 1.3vw, 22px);
align-items: start;
}
.page-pdp .hc-pdp__grid {
grid-template-columns: minmax(360px, 1.05fr) minmax(360px, 1fr) minmax(320px, 0.95fr);
margin-top: var(--hc-sp-4, 20px);
margin-bottom: clamp(40px, 4vw, 64px);
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.hc-pdp__title-col,
.hc-pdp__info,
.hc-pdp__main {
min-width: 0;
}
.hc-pdp__title {
font-size: clamp(26px, 2.4vw, 36px);
line-height: 1.12;
letter-spacing: -0.015em;
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.hc-pdp__related {
margin: 32px 0 12px;
}
.hc-pdp__related-title {
font-size: 18px;
margin: 0 0 12px;
font-weight: 500;
}
@media (max-width: 1440px) {
.page-pdp .hc-pdp__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
@media (max-width: 1024px) {
.hc-pdp__title-col,
.hc-pdp__info {
min-width: 0;
}
}
@media (max-width: 768px) {
.page-pdp .hc-pdp__grid {
grid-template-columns: 1fr;
}
}
/* ---- folded from 189-page-pdp.css ---- */
/* =================== page-pdp.css =================== */
.page-pdp .hc-pdp-engineer__grid a,
.page-pdp .hc-pdp-engineer__grid button {
min-height: 76px;
padding: 10px;
border-radius: 12px;
border: 1px solid var(--sf-line);
background: rgba(255, 255, 255, 0.96);
display: grid;
gap: 2px;
text-align: left;
}
.page-pdp .hc-pdp-engineer__grid b {
font-size: 13px;
line-height: 1.35;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
font-weight: 500;
color: var(--sf-ink, var(--hc-ink, #1a1714));
}
.page-pdp .hc-pdp-engineer__grid span,
.page-pdp .hc-pdp-engineer__grid b {
display: block;
white-space: normal;
overflow-wrap: anywhere;
}
.page-pdp .pdp-anchor-nav a {
display: inline-flex;
align-items: center;
padding: 12px 16px;
font-size: 13px;
font-weight: 500;
color: rgba(26, 23, 20, 0.62);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color .18s ease, border-color .18s ease;
white-space: nowrap;
}
.page-pdp .pdp-anchor-nav a:hover {
color: var(--sf-ink, var(--hc-ink, #1a1714));
border-bottom-color: rgba(180, 151, 115, 0.45);
}
.page-pdp .pdp-trust-strip__item b {
font-family: var(--hc-serif, 'Playfair Display', Georgia, serif);
font-size: 16px;
font-weight: 500;
color: var(--sf-ink, var(--hc-ink, #1a1714));
line-height: 1.25;
}
.page-pdp .pdp-trust-strip__item span {
font-size: 12px;
color: rgba(26, 23, 20, 0.60);
line-height: 1.45;
}
/* folded from 198-pdp-anchor-nav.css */
.page-pdp .pdp-anchor-nav {
display: flex;
flex-wrap: nowrap;
gap: 4px;
padding: 8px 0;
margin: 0 0 22px;
border-bottom: 1px solid rgba(180, 151, 115, 0.22);
position: sticky;
top: var(--hc-hdr-h, 72px);
z-index: 8;
background: rgba(248, 246, 243, 0.92);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
.page-pdp .pdp-anchor-nav a.is-active,
.page-pdp .pdp-anchor-nav a:target {
color: var(--sf-ink, var(--hc-ink, #1a1714));
border-bottom-color: var(--hc-accent, #8b7355);
}
/* folded from 199-pdp-cta-row.css (page-scoped part only) */
.page-pdp .pdp-cta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 32px;
}
/* folded from 203-pdp-sec-title.css */
.page-pdp .pdp-sec-title {
max-width: 16ch;
margin-top: var(--hc-sp-1);
}
/* folded from 202-pdp-sec-block.css */
.page-pdp .pdp-sec-block { margin-top: var(--hc-sp-5); }
.page-pdp .pdp-sec-block--spacious { margin-top: var(--hc-sp-7); }
.page-pdp .hc-pdp__grid > .pdp-anchor-nav { margin-bottom: 16px; }
.page-pdp .pdp-trust-strip { margin-top: 24px; }
.page-pdp .hc-pdp-m1__desc { margin-top: 12px; }
.page-pdp .hc-pdp-m1__why { margin-top: 16px; }
.page-pdp .hc-pdp-m1__why + .pdp-sec-block { margin-top: 20px; }
@media (max-width: 1024px) {
.page-pdp .hc-pdp__grid > .pdp-anchor-nav { margin-bottom: 12px; }
}
/* folded from 204-pdp-trust-strip.css */
.page-pdp .pdp-trust-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
padding: 24px;
margin: 32px 0 24px;
background: linear-gradient(135deg, rgba(255, 252, 247, 0.95), rgba(248, 244, 237, 0.86));
border: 1px solid rgba(180, 151, 115, 0.22);
border-radius: 18px;
}
@media (max-width: 768px) {
.page-pdp .pdp-trust-strip {
grid-template-columns: 1fr;
gap: 16px;
}
.page-pdp .pdp-anchor-nav a {
padding: 10px 12px;
font-size: 12px;
}
}
.page-pdp .pdp-trust-strip__item {
display: flex;
flex-direction: column;
gap: 4px;
}
.hc-pdp-sticky-dock {
position: fixed;
right: 24px;
bottom: 20px;
z-index: 80;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(255, 252, 247, 0.96);
border: 0.5px solid rgba(141, 109, 71, 0.24);
border-radius: 14px;
box-shadow: 0 18px 44px -28px rgba(40, 30, 15, 0.34);
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
}
.hc-pdp-sticky-dock.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.hc-pdp-sticky-dock__meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.hc-pdp-sticky-dock__sku {
font: 600 10px/1.1 var(--hc-mono, "JetBrains Mono", monospace);
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(26, 23, 20, 0.56);
}
.hc-pdp-sticky-dock__price {
font: 700 16px/1.2 var(--hc-sans, "Outfit", sans-serif);
color: var(--hc-ink, #1a1714);
}
.hc-pdp-sticky-dock__cta {
min-height: 40px;
padding: 0 16px;
border-radius: 10px;
border: 0;
background: #15120f;
color: #fff;
font: 600 14px/1 var(--hc-sans, "Outfit", sans-serif);
cursor: pointer;
}
@media (max-width: 1024px) {
.hc-pdp-sticky-dock { display: none; }
}
/* ---- folded from 118-hc-pdp-bc-signals.css ---- */
.hc-pdp-bc-signals {display: flex; flex-wrap: wrap; align-items: center; gap: var(--hc-sp-2); margin-bottom: var(--hc-sp-3)}
.hc-pdp-bc-signals__dot {color: var(--hc-accent)}
.hc-pdp-bc-signals__badges {display: flex; flex-wrap: wrap; gap: 6px}
/* ─── Sprint 12.short: sticky buy-panel stability ─── */
.hc-pdp-m1__buy {
/* improve sticky on long scroll: smooth + reasonable top offset */
scroll-margin-top: 100px;
will-change: transform;
}
@media (min-width: 921px) {
.hc-pdp-m1__buy {
/* ensure card doesn't overflow viewport vertically */
max-height: calc(100vh - 100px);
overflow-y: auto;
overscroll-behavior: contain;
}
}
/* ─── Sprint13.P2: PDP mobile responsive ─── */
@media (max-width: 720px) {
.hc-pdp-m1__hero {
grid-template-columns: 1fr;
gap: 16px;
}
.hc-pdp-m1__aside {
padding: 16px;
}
.hc-pdp-m1__title {
font-size: clamp(22px, 6vw, 30px);
}
/* atc: qty + cta stack vertically on phone */
.hc-pdp-m1__atc {
grid-template-columns: 1fr;
gap: 10px;
}
.hc-pdp-m1__cta-primary {
width: 100%;
justify-content: center;
}
.hc-pdp-m1__icon-row {
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.hc-pdp-m1__icon-btn::before {
width: 36px;
height: 36px;
}
.hc-pdp-m1__icon-label {
font-size: 10px;
}
/* Tab-bar horizontal scroll for many tabs */
.hc-pdp-m1__tabs-bar {
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
.hc-pdp-m1__tabs-bar::-webkit-scrollbar { display: none; }
}
/* ─── Sprint14.3: PDP specs full-width 2col grid ─── */
/* Tab "Характеристики" body — make full-width grid 2-col so both sides are used */
.hc-pdp-specs,
.hc-pdp-m1__specs,
[class*="pdp"][class*="specs-body"],
[id*="specs"][role="tabpanel"],
[id*="characteristics"] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: start;
}
@media (max-width: 920px) {
.hc-pdp-specs, .hc-pdp-m1__specs,
[class*="pdp"][class*="specs-body"],
[id*="specs"][role="tabpanel"] {
grid-template-columns: 1fr;
}
}
.hc-pdp-specs__group {
background: linear-gradient(135deg, rgba(255, 252, 247, 0.96), rgba(247, 240, 225, 0.42));
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 14px;
padding: 16px;
}
.hc-pdp-specs__group-h {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 0.5px dashed rgba(141, 109, 71, 0.22);
}
.hc-pdp-specs__group-ico {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--hc-gold, #d4b896), var(--hc-gold-dark, #b89a6f));
display: grid;
place-items: center;
color: var(--hc-ink, #1a1714);
}
.hc-pdp-specs__row,
[class*="pdp-specs"][class*="row"] {
display: grid;
grid-template-columns: minmax(140px, 0.5fr) 1fr;
gap: 14px;
padding: 7px 0;
border-bottom: 0.5px solid rgba(141, 109, 71, 0.10);
}
.hc-pdp-specs__row:last-child { border-bottom: none; }
.hc-pdp-specs__label {
font-family: var(--hc-mono, monospace);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.55));
}
.hc-pdp-specs__value {
font-size: 13.5px;
font-weight: 500;
color: var(--hc-ink, #1a1714);
}
/* === css/blocks/126-hc-pdp-m2.css === */
/* =================== hc-pdp-m2.css =================== */
/* hc-pdp-m2 — Compact Engineering variant.
*
* Все HTML-классы остаются `.hc-pdp-m1__*` (template их рендерит независимо
* от cookie pdp_variant). Различия M2 включаются через body-class
* `pdp-variant-m2`, который выставляется в product.html на основании
* cookie/?pdp= query. Так дискейп специфичности (0,2,1 vs 0,1,0) безопасно
* перебивает базовые M1-правила без усиления деклараций.
*
* Strict isolation: все селекторы должны начинаться с `body.pdp-variant-m2`. */
/* ─── HERO LAYOUT ─── compact 2-col, narrower aside ─── */
body.pdp-variant-m2 .hc-pdp-m1__hero {
grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
gap: clamp(20px, 2.2vw, 32px);
}
/* ─── TITLE ─── larger serif, tighter tracking ─── */
body.pdp-variant-m2 .hc-pdp-m1__title {
font-size: clamp(28px, 2.4vw, 36px);
line-height: 1.05;
letter-spacing: -0.02em;
}
/* ─── BUY CARD ─── paper-card with gold border, drop shadow ─── */
body.pdp-variant-m2 .hc-pdp-m1__buy {
background: var(--hc-paper, #ffffff);
border: 1px solid var(--hc-gold-border, rgba(212, 184, 150, 0.42));
border-radius: 18px;
padding: 22px;
box-shadow: 0 18px 44px -28px rgba(40, 30, 15, 0.22);
}
/* ─── PRICE ─── larger serif (44px), red sale chip ─── */
body.pdp-variant-m2 .hc-pdp-m1__price {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 44px;
font-weight: 500;
letter-spacing: -0.01em;
}
body.pdp-variant-m2 .hc-pdp-m1__sale-chip {
padding: 4px 10px;
background: var(--hc-danger, #c9433a);
color: var(--hc-paper, #ffffff);
border-radius: 6px;
font: 600 11px/1 var(--hc-mono, "JetBrains Mono", monospace);
letter-spacing: 0.04em;
}
/* ─── TABS BAR ─── non-sticky card with shadow ─── */
body.pdp-variant-m2 .hc-pdp-m1__tabs-bar {
position: static;
padding: 14px 18px;
margin: 0 0 14px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.20);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(40, 30, 15, 0.03), 0 14px 32px -22px rgba(40, 30, 15, 0.12);
}
body.pdp-variant-m2 .hc-pdp-m1__panel {
padding-top: 24px;
}
body.pdp-variant-m2 .hc-pdp-m1__tab {
padding: 11px 18px;
border-radius: 10px;
font-size: 13.5px;
}
body.pdp-variant-m2 .hc-pdp-m1__tab.is-active {
background: linear-gradient(180deg, #1f1a15, #14110d);
color: var(--hc-paper, #ffffff);
}
/* ─── ACTION GRID ─── 2-col compact tiles ─── */
body.pdp-variant-m2 .hc-pdp-m1__acts {
grid-template-columns: 1fr 1fr;
gap: 6px;
}
body.pdp-variant-m2 .hc-pdp-m1__act {
padding: 9px 10px 9px 12px;
border-radius: 10px;
font-size: 11.5px;
}
body.pdp-variant-m2 .hc-pdp-m1__act-ico {
width: 22px;
height: 22px;
border-radius: 6px;
}
/* ─── MOBILE collapse ─── */
@media (max-width: 1024px) {
body.pdp-variant-m2 .hc-pdp-m1__hero {
grid-template-columns: 1fr;
}
body.pdp-variant-m2 .hc-pdp-m1__aside {
position: static;
}
}
/* === css/blocks/127-hc-pdp-m3.css === */
/* =================== hc-pdp-m3.css =================== */
/* hc-pdp-m3 — Chapters + Sticky-Buy variant.
*
* Все HTML-классы остаются `.hc-pdp-m1__*`. Различия M3 включаются через
* body-class `pdp-variant-m3`. Главные акценты:
* • hero 1.25fr / 1fr — gallery визуально шире
* • buy aside остаётся sticky-внутри-hero (как M1), но кейс card-стилем
* • tabs-bar становится горизонтальной jump-nav под hero
* • заголовок крупнее, eyebrow выделяется
*
* Strict isolation: все селекторы начинаются с `body.pdp-variant-m3`. */
/* ─── HERO ─── gallery wider, buy aside narrower ─── */
body.pdp-variant-m3 .hc-pdp-m1__hero {
grid-template-columns: minmax(0, 1.25fr) minmax(380px, 1fr);
gap: clamp(20px, 2.4vw, 36px);
}
/* ─── ASIDE ─── more visible separation, lighter sticky-top ─── */
body.pdp-variant-m3 .hc-pdp-m1__aside {
position: sticky;
top: 88px;
align-self: start;
}
/* ─── EYEBROW ─── premium accent with monospace + uppercase ─── */
body.pdp-variant-m3 .hc-pdp-m1__eyebrow {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
padding: 4px 10px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.22), rgba(184, 154, 111, 0.10));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.45));
border-radius: 999px;
}
/* ─── TITLE ─── largest serif emphasis ─── */
body.pdp-variant-m3 .hc-pdp-m1__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(32px, 2.8vw, 42px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.02em;
}
/* ─── BUY CARD ─── solid card with deep shadow ─── */
body.pdp-variant-m3 .hc-pdp-m1__buy {
background: linear-gradient(180deg, var(--hc-paper, #ffffff), #fbf7ed);
border: 1px solid var(--hc-gold-border, rgba(212, 184, 150, 0.55));
border-radius: 20px;
padding: 24px;
box-shadow: 0 24px 60px -30px rgba(40, 30, 15, 0.30);
}
/* ─── PRICE ─── serif-large ─── */
body.pdp-variant-m3 .hc-pdp-m1__price {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 46px;
font-weight: 500;
letter-spacing: -0.012em;
}
/* ─── TABS BAR ─── jump-nav style, sticky-top with blur ─── */
body.pdp-variant-m3 .hc-pdp-m1__tabs-bar {
position: sticky;
top: 0;
z-index: 5;
padding: 12px 0;
margin: 0 0 14px;
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(255, 255, 255, 0.94) 80%, transparent 100%);
border-bottom: 0.5px solid rgba(141, 109, 71, 0.20);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
body.pdp-variant-m3 .hc-pdp-m1__panel {
padding-top: 24px;
}
body.pdp-variant-m3 .hc-pdp-m1__tab {
padding: 8px 16px;
border-radius: 999px;
font-size: 12.5px;
}
/* ─── ACTIONS ─── менее агрессивный grid ─── */
body.pdp-variant-m3 .hc-pdp-m1__acts {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
body.pdp-variant-m3 .hc-pdp-m1__act {
padding: 10px 12px;
border-radius: 12px;
}
/* ─── MOBILE collapse ─── */
@media (max-width: 1024px) {
body.pdp-variant-m3 .hc-pdp-m1__hero {
grid-template-columns: 1fr;
}
body.pdp-variant-m3 .hc-pdp-m1__aside {
position: static;
}
}
/* === css/blocks/129-hc-pdp-region.css === */
/* =================== hc-pdp-region.css =================== */
.hc-pdp-region { position: relative; display: inline-block; }
.hc-pdp-region__btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
.hc-pdp-region__chev {
transition: transform 0.2s ease;
margin-left: 2px;
color: var(--hc-accent-dark, #5d4d3a);
}
.hc-pdp-region__chev.is-open { transform: rotate(180deg); }
.hc-pdp-region__menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 30;
min-width: 220px;
padding: 10px;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(26, 23, 20, 0.14);
border-radius: 14px;
box-shadow: 0 18px 40px rgba(26, 23, 20, 0.12), 0 2px 8px rgba(26, 23, 20, 0.06);
display: flex;
flex-direction: column;
gap: 2px;
}
.hc-pdp-region__hint {
display: block;
padding: 4px 10px 8px;
font: 400 11px/1.3 var(--hc-sans, 'Outfit', sans-serif);
color: rgba(26, 23, 20, 0.55);
letter-spacing: 0.02em;
text-transform: uppercase;
border-bottom: 0.5px solid rgba(26, 23, 20, 0.08);
margin-bottom: 6px;
}
.hc-pdp-region__opt {
display: block;
width: 100%;
padding: 8px 12px;
font: 500 13px/1.2 var(--hc-sans, 'Outfit', sans-serif);
text-align: left;
background: transparent;
border: 0;
border-radius: 8px;
color: var(--hc-ink, #1a1714);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.hc-pdp-region__opt:hover {
background: rgba(193, 159, 104, 0.10);
}
.hc-pdp-region__opt.is-active {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
}
/* === css/blocks/131-hc-pdp-sticky.css === */
/* =================== hc-pdp-sticky.css =================== */
.hc-pdp-sticky {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-top: 0.5px solid rgba(26, 23, 20, 0.12); box-shadow: 0 -4px 24px rgba(26, 23, 20, 0.06); padding: 10px 14px env(safe-area-inset-bottom) 10px
}
.hc-pdp-sticky__inner {
display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; max-width: 1200px; margin: 0 auto
}
.hc-pdp-sticky__info {
min-width: 0
}
.hc-pdp-sticky__name {
font-size: 13px; font-weight: 500; color: var(--hc-ink, #1a1714); white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.hc-pdp-sticky__price {
display: flex; gap: 6px; align-items: baseline; margin-top: 2px
}
.hc-pdp-sticky__price strong {
font-family: var(--hc-serif, "Playfair Display", serif); font-size: 17px; font-weight: 500
}
.hc-pdp-sticky__old {
font-size: 11px; color: var(--hc-muted, rgba(26, 23, 20, 0.5)); text-decoration: line-through
}
.hc-pdp-sticky__actions {
display: flex; gap: 8px; align-items: center
}
.hc-pdp-sticky__fav {
width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 0.5px solid rgba(26, 23, 20, 0.15); cursor: pointer; font-size: 18px; line-height: 1; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7)); transition: background 0.15s ease, transform 0.1s ease
}
.hc-pdp-sticky__fav:hover {
background: rgba(26, 23, 20, 0.05)
}
.hc-pdp-sticky__fav:active {
transform: scale(0.95)
}
.hc-pdp-sticky__cta {
padding: 10px 22px; font-size: 13px; white-space: nowrap
}
@media (min-width: 768px) {
.hc-pdp-sticky,
[data-hc-pdp-sticky] {
display: none;
}
}
/* === css/blocks/132-hc-pdp-stickybar.css === */
/* =================== hc-pdp-stickybar.css =================== */
.hc-pdp-stickybar {display: flex; position: fixed; left: 8px; right: 8px; bottom: 58px; z-index: 80; padding: 10px 12px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px) saturate(160%); border-top: 1px solid var(--hc-line); box-shadow: 0 16px 40px rgba(27, 20, 13, 0.14); align-items: center; gap: 10px; border: 1px solid rgba(26, 23, 20, 0.08); border-radius: 18px; transform: translateY(110%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1)}
.hc-pdp-stickybar__thumb {width: 44px; aspect-ratio: 1; background: var(--hc-bg-2, var(--hc-paper-3, #f2efe9)); border-radius: 10px; padding: 4px; flex-shrink: 0; height: 44px; flex: none; overflow: hidden}
.hc-pdp-stickybar__thumb img {width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply}
.hc-pdp-stickybar__meta {min-width: 0; flex: 1}
.hc-pdp-stickybar__name {font-size: 12px; font-weight: 500; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7)); line-height: 1.3}
.hc-pdp-stickybar__price {font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-size: 15px; font-weight: 500; color: var(--hc-ink, #1a1714)}
.hc-pdp-stickybar.is-visible, .hc-pdp-stickybar[data-visible] {transform: none}
.hc-pdp-stickybar {pointer-events: none;}
.hc-pdp-stickybar.is-visible {pointer-events: auto;}
.hc-pdp-stickybar .hc-pdp-sticky__cta--primary {display: none;}
@media (min-width: 768px) {
.hc-pdp-stickybar {display: none;}
}
/* === css/blocks/133-hc-pdp-svg.css === */
/* =================== hc-pdp-svg.css =================== */
.hc-pdp-svg {
width: 100%; height: auto; max-height: 320px; display: block
}
.hc-pdp-svg--drawer .hc-pdp-svg__drawer {
animation: hcDrawerSlide 4.5s ease-in-out infinite
}
.hc-pdp-svg--hinge .hc-pdp-svg__facade {
animation: hcHingeSwing 5s ease-in-out infinite; transform-origin: 0 50%
}
.hc-pdp-svg--lift .hc-pdp-svg__lift-facade {
animation: hcLiftRaise 5.5s ease-in-out infinite
}
.hc-pdp-svg--drawer .hc-pdp-svg__motion {
animation: hcMotionFade 4.5s ease-in-out infinite
}
.hc-pdp-svg--tipon .hc-pdp-svg__push {
animation: hcTipOnPush 4s ease-in-out infinite
}
.hc-pdp-svg--rail .hc-pdp-svg__rail-drawer {
animation: hcRailSlide 4.5s ease-in-out infinite
}
.hc-pdp-svg--tipon .hc-pdp-svg__tipon-drawer {
animation: hcTipOnSpring 4s ease-in-out infinite
}
/* === css/blocks/134-hc-pdp-trust.css === */
/* =================== hc-pdp-trust.css =================== */
.hc-pdp-trust {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: var(--hc-sp-4, 20px) 0}
.hc-pdp-trust__i {padding: 12px 14px; background: var(--hc-bg, #f8f6f3); border-radius: 14px; position: relative; border: 1px solid rgba(26, 23, 20, 0.07); overflow: hidden; isolation: isolate; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1)}
.hc-pdp-trust__i b {display: block; font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-size: 15px; font-weight: 500; color: var(--hc-ink, #1a1714)}
.hc-pdp-trust__i span {display: block; font-size: 12px; color: var(--hc-muted, rgba(26, 23, 20, 0.55))}
.hc-pdp-trust__i::after {content: ""; position: absolute; right: -15%; bottom: -40%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(199, 155, 96, 0.16), transparent 62%); opacity: 0; transform: translateY(12px); transition: opacity 0.28s, transform 0.28s; pointer-events: none; z-index: -1}
.hc-pdp-trust__i:hover {transform: translateY(-2px); border-color: rgba(139, 115, 85, 0.24)}
.hc-pdp-trust__i:hover::after {opacity: 1; transform: translateY(0)}
.hc-pdp-trust {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 20px 0;
}
.hc-pdp-trust__i {
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 16px;
background: linear-gradient(180deg, var(--hc-paper, #ffffff), #fbf7ec);
border: 1px solid rgba(141, 109, 71, 0.18);
border-radius: 14px;
transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.hc-pdp-trust__i:hover {
transform: translateY(-1px);
border-color: rgba(141, 109, 71, 0.35);
box-shadow: 0 8px 20px -12px rgba(27, 20, 13, 0.25);
}
.hc-pdp-trust__i b {
display: block;
font-family: var(--hc-serif, 'Playfair Display', Georgia, serif);
font-size: 17px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--hc-ink, #1a1714);
}
.hc-pdp-trust__i span {
display: block;
margin-top: 2px;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.55));
}
/* === css/blocks/135-hc-pdp-variants.css === */
/* =================== hc-pdp-variants.css =================== */
.hc-pdp-variants {margin-bottom: var(--hc-sp-3); margin: var(--hc-sp-4) 0; padding: var(--hc-sp-4); background: var(--hc-paper-2); border-radius: var(--hc-r-md); border: 1px solid var(--hc-line)}
.hc-pdp-variants__label {font-size: var(--hc-fs-xs); color: var(--hc-ink-mid); margin-bottom: 8px; display: block; font-family: var(--hc-mono); text-transform: uppercase; letter-spacing: var(--hc-ls-wide)}
.hc-pdp-variants__row {display: flex; flex-wrap: wrap; gap: 8px}
.hc-pdp-variants__opt {padding: 8px 14px; background: var(--hc-paper); border: 1px solid var(--hc-line-2); border-radius: var(--hc-r-sm); font-size: var(--hc-fs-sm); color: var(--hc-ink-soft); cursor: pointer; transition: all var(--hc-dur-fast); display: inline-flex; align-items: center}
.hc-pdp-variants__opt:hover {border-color: var(--hc-ink-mid); color: var(--hc-ink)}
.hc-pdp-variants__opt.is-selected {background: var(--hc-gold-soft); border-color: var(--hc-accent); color: var(--hc-ink); font-weight: 500}
.hc-pdp-variants__opt.is-active {background: var(--hc-ink); color: var(--hc-paper, #ffffff); border-color: var(--hc-ink)}
.hc-pdp-variants__group {margin-bottom: var(--hc-sp-3)}
.hc-pdp-variants__opt-img {width: 20px; height: 20px; margin-right: 6px; border-radius: 3px; object-fit: cover; vertical-align: middle}
.hc-pdp-variants__delta {margin-left: 6px}
.hc-pdp-variants__sku {margin-top: var(--hc-sp-2); font-family: var(--hc-mono)}
/* === css/blocks/137-hc-pgrid.css === */
/* =================== hc-pgrid.css =================== */
/* hc-pgrid - product grid container. Wraps .pcard children. Used on catalog,
* search results, favorites, related-product rails, etc. Adapts column count
* to viewport with sensible breakpoints. Strictly .hc-pgrid / .hc-pgrid__*. */
.hc-pgrid {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: clamp(14px, 1.4vw, 22px);
/* Uniform row heights — cards stretch to the row baseline. The hoverband
is an absolute float, so only the hovered card visibly extends below
the row (siblings stay at row height). */
align-items: stretch;
}
/* List view toggle */
.hc-pgrid[data-view="list"] {
grid-template-columns: 1fr;
}
.hc-pgrid[data-view="compact"] {
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: var(--hc-sp-2);
}
#cat-results .hc-pgrid[data-view="list"] {
grid-template-columns: 1fr;
}
#cat-results .hc-pgrid[data-view="list"] .pcard {
display: grid;
grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
align-items: stretch;
}
#cat-results .hc-pgrid[data-view="list"] .pcard .pcard-shell {
display: grid;
grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
min-height: 240px;
}
#cat-results .hc-pgrid[data-view="list"] .pcard-stage {
min-height: 100%;
}
#cat-results .hc-pgrid[data-view="compact"] .pcard-caption,
#cat-results .hc-pgrid[data-view="compact"] .pcard-props,
#cat-results .hc-pgrid[data-view="compact"] .pcard-hoverband {
display: none;
}
#cat-results .hc-pgrid[data-view="compact"] .pcard-body {
padding: 12px;
}
/* Inline marketing banner inside the grid spans the full row */
.hc-pgrid__banner {
grid-column: 1 / -1;
}
/* Inside PDP cross-sell rails, gaps are tighter */
.pdp-commerce-sections .hc-pgrid,
.hc-pdp .hc-pgrid {
gap: clamp(12px, 1.2vw, 18px);
}
.hc-pgrid > .pcard {
min-width: 0;
}
/* Catalog page column system (single owner of hc-pgrid layout). */
.page-catalog .hc-pgrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1440px) {
.page-catalog .hc-pgrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.page-catalog .hc-pgrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.page-catalog .hc-pgrid {
grid-template-columns: 1fr;
}
}
/* Public wishlist keeps denser card spacing but stays in hc-pgrid ownership. */
.page-wishlist-public .hc-pgrid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--hc-sp-4, 20px);
}
/* === css/blocks/138-hc-ph.css === */
/* =================== hc-ph.css =================== */
.hc-ph {
display: block; width: 100%; height: 100%; max-width: 100%; aspect-ratio: 1 / 1
}
.hc-ph__orbit-out {
transform-origin: 140px 140px; animation: hcPhSpin 22s linear infinite
}
.hc-ph__orbit-in {
transform-origin: 140px 140px; animation: hcPhSpinR 32s linear infinite
}
.hc-ph__dot {
animation: hcPhDot 2.6s ease-in-out infinite
}
.hc-ph__schema {
animation: hcPhSchema 4s ease-in-out infinite
}
.hc-pcard__ph-wrap .hc-ph {
max-width: 100%; max-height: 100%
}
.pcard-a__ph .hc-ph, .pcard-b__ph .hc-ph, .pcard-c__ph .hc-ph, .pcard-d__ph .hc-ph {
width: 100%; height: 100%; display: block
}
@media(max-width:1024px) {
.hc-pcard__media .hc-ph, .hc-pcard__ph-wrap .hc-ph {position: absolute; inset: 0; width: 100%; height: 100%}
.pcard-a__ph .hc-ph, .pcard-b__ph .hc-ph, .pcard-c__ph .hc-ph, .pcard-d__ph .hc-ph {width: 100%; height: 100%; display: block}
.pcard--c .pcard-c__media .hc-ph {aspect-ratio: 1}
}
.hc-ph text[font-family*="Mono"] {
opacity: 0.4;
font-size: 8px;
}
.hc-pcard__ph-wrap .hc-ph {
width: 100%;
height: 100%;
}
.hc-pcard__media .hc-ph, .hc-pcard__ph-wrap .hc-ph {
filter: drop-shadow(0 4px 8px rgba(122, 101, 72, 0.16));
transition: filter 0.45s ease, transform 0.45s ease;
}
.hc-pdp-gallery__main .hc-ph {
filter: drop-shadow(0 12px 24px rgba(122, 101, 72, 0.18));
transition: filter 0.55s ease, transform 0.55s ease;
}
.hc-pdp-gallery__main:hover .hc-ph {
filter: drop-shadow(0 22px 40px rgba(122, 101, 72, 0.28));
}
.pcard-media__placeholder .hc-ph, .pcard-c__ph .hc-ph {
max-width: 100%;
max-height: 100%;
filter: drop-shadow(0 4px 8px rgba(122, 101, 72, 0.16));
}
.hc-hero__visual-schema .hc-ph__dot, .hc-hero__visual .hc-ph__dot {
animation: hcOrbitFloat 4s ease-in-out infinite;
}
.hc-pcard:hover .hc-ph__orbit-in {
animation-duration: 18s
}
.hc-hero__visual-schema .hc-ph__orbit-in .hc-ph__dot {
animation-delay: 1.2s;
}
.hc-pcard:hover .hc-ph__orbit-out {
animation-duration: 12s
}
.hc-hero__visual-schema .hc-ph__orbit-out .hc-ph__dot {
animation-delay: 0s;
}
/* === css/blocks/145-hc-rev.css === */
/* =================== hc-rev.css =================== */
/* hc-rev - premium reviews grid (home + PDP). Each card has stars, body text,
* a "who" footer with avatar (initials gold-on-dark), name + role/date,
* verified-badge (Yandex/manual moderation). Strictly .hc-rev / .hc-rev__*. */
.hc-rev__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.4vw, 22px);
}
.hc-rev__card {
position: relative;
display: grid;
gap: 14px;
padding: clamp(20px, 2.2vw, 28px);
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.16);
border-radius: 18px;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 14px 32px -18px rgba(40, 30, 15, 0.10);
transition: transform 0.28s cubic-bezier(0.22, 1.2, 0.36, 1), border-color 0.22s ease, box-shadow 0.32s ease;
}
.hc-rev__card:hover {
transform: translateY(-4px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow:
0 2px 4px rgba(40, 30, 15, 0.04),
0 28px 56px -22px rgba(184, 154, 111, 0.32);
}
.hc-rev__card::before {
content: "\201C";
position: absolute;
top: -16px;
right: 18px;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 100px;
line-height: 1;
color: rgba(212, 184, 150, 0.32);
pointer-events: none;
user-select: none;
}
.hc-rev__stars {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 16px;
letter-spacing: 3px;
color: var(--hc-gold, #d4b896);
text-shadow: 0 1px 0 rgba(184, 154, 111, 0.32);
}
.hc-rev__text {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--hc-ink-2, #3a3128);
}
.hc-rev__who {
display: grid;
grid-template-columns: 44px 1fr;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 0.5px dashed rgba(141, 109, 71, 0.22);
}
.hc-rev__who > div {
display: grid;
gap: 2px;
min-width: 0;
}
.hc-rev__av {
width: 44px;
height: 44px;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--hc-gold, #d4b896), var(--hc-accent, #8b7355));
color: #2a2018;
border-radius: 50%;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
box-shadow: 0 4px 10px -2px rgba(139, 115, 85, 0.42);
text-transform: uppercase;
}
.hc-rev__name {
font-family: var(--hc-serif);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
color: var(--hc-ink, #1a1714);
}
.hc-rev__date {
font-size: 11.5px;
line-height: 1.4;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.hc-rev__verified {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: linear-gradient(135deg, rgba(61, 107, 79, 0.16), rgba(107, 164, 128, 0.10));
border: 0.5px solid rgba(61, 107, 79, 0.32);
border-radius: var(--hc-r-pill, 999px);
font-family: var(--hc-mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hc-success, #3d6b4f);
align-self: center;
white-space: nowrap;
}
.hc-rev__verified::before {
content: "";
width: 10px;
height: 10px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
@media (max-width: 1024px) {
.hc-rev__grid { grid-template-columns: 1fr; }
}
/* === css/blocks/146-hc-russia-map.css === */
/* =================== hc-russia-map.css =================== */
.hc-russia-map { position:relative; }
.hc-russia-map__city {
cursor:pointer;
transition:background 0.18s ease, transform 0.18s ease;
}
.hc-russia-map__city:hover {
transform:translateY(-1px);
}
.hc-russia-map__svg [data-city] {
cursor:pointer;
transition:r 0.18s ease;
}
.hc-russia-map__svg [data-city]:hover {
r:6;
}
.hc-russia-map__tooltip {
position:absolute;
background:var(--hc-ink, #1a1714);
color:var(--hc-paper, #ffffff);
padding:8px 14px;
border-radius:10px;
font:500 11px/1.4 'Inter',sans-serif;
pointer-events:none;
opacity:0;
transform:translate(-50%,calc(-100% - 4px));
transition:opacity 0.18s ease;
white-space:nowrap;
z-index:5;
display:flex;
flex-direction:column;
gap:2px;
min-width:140px;
}
.hc-russia-map__tooltip.is-visible { opacity:1; }
.hc-russia-map__tooltip::after {
content:"";
position:absolute;
left:50%;
top:100%;
transform:translateX(-50%);
border:5px solid transparent;
border-top-color:var(--hc-ink, #1a1714);
}
.hc-russia-map__tooltip-city {
font-weight:600;
font-size:12px;
}
.hc-russia-map__tooltip-eta {
color:#c8a96a;
font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;
letter-spacing:0.04em;
}
.hc-russia-map__tooltip-carrier {
color:rgba(255,255,255,0.65);
font-size:10px;
}
/* === css/blocks/150-hc-skel-pcard.css === */
/* =================== hc-skel-pcard.css =================== */
.hc-skel-pcard {background: var(--hc-paper); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); overflow: hidden}
.hc-skel-pcard__media {aspect-ratio: 1.08}
.hc-skel-pcard__body {padding: var(--hc-sp-3) var(--hc-sp-4) var(--hc-sp-4)}
.hc-skel-pcard__line {height: 10px; background: var(--hc-paper-3); margin-bottom: 8px; border-radius: 2px}
.hc-skel-pcard__line--short {width: 40%}
.hc-skel-pcard__line--mid {width: 80%}
.hc-skel-pcard__line--full {width: 100%}
/* === css/blocks/154-hc-sugg-cat.css === */
/* =================== hc-sugg-cat.css =================== */
.hc-sugg-cat {display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--hc-ink, #1a1714); transition: background 0.15s ease}
.hc-sugg-cat:hover, .hc-sugg-cat.is-active {background: rgba(139, 115, 85, 0.08)}
.hc-sugg-cat__ico {display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(139, 115, 85, 0.1); color: var(--hc-accent-dark, #7a6548); font-size: 13px; flex: none}
.hc-sugg-cat__name {font-size: 14px; font-weight: 500}
/* === css/blocks/155-hc-sugg-chip.css === */
/* =================== hc-sugg-chip.css =================== */
.hc-sugg-chip {display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: rgba(26, 23, 20, 0.04); color: var(--hc-ink, #1a1714); text-decoration: none; font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background 0.2s ease, transform 0.2s ease}
.hc-sugg-chip:hover, .hc-sugg-chip.is-active {background: rgba(139, 115, 85, 0.14); transform: translateY(-1px)}
.hc-sugg-chip__icon {color: var(--hc-accent, #8b7355); font-size: 10px}
/* === css/blocks/156-hc-sugg-exact.css === */
/* =================== hc-sugg-exact.css =================== */
.hc-sugg-exact {display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: center; padding: 14px 16px; background: linear-gradient(135deg, rgba(61, 107, 79, 0.08), rgba(212, 184, 150, 0.08)); border: 1px solid rgba(61, 107, 79, 0.22); border-radius: 14px; text-decoration: none; color: var(--hc-ink, #1a1714); margin-bottom: 14px; transition: border-color 0.2s ease, transform 0.2s ease}
.hc-sugg-exact:hover, .hc-sugg-exact.is-active {border-color: var(--hc-green, var(--hc-success, #3d6b4f)); transform: translateY(-1px)}
.hc-sugg-exact__kicker {font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.06em; color: var(--hc-green, var(--hc-success, #3d6b4f)); white-space: nowrap}
.hc-sugg-exact__sku code {background: rgba(61, 107, 79, 0.1); color: var(--hc-green, var(--hc-success, #3d6b4f)); padding: 3px 8px; border-radius: 5px; font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 13px; font-weight: 500}
.hc-sugg-exact__name {font-size: 14px; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
/* === css/blocks/158-hc-sugg-prod.css === */
/* =================== hc-sugg-prod.css =================== */
.hc-sugg-prod {display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--hc-ink, #1a1714); transition: background 0.15s ease}
.hc-sugg-prod:hover, .hc-sugg-prod.is-active {background: rgba(139, 115, 85, 0.08)}
.hc-sugg-prod__thumb {display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--hc-bg-2, var(--hc-paper-3, #f2efe9)); overflow: hidden; padding: 4px; color: var(--hc-muted, rgba(26, 23, 20, 0.3))}
.hc-sugg-prod__thumb img {width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply}
.hc-sugg-prod__body {display: flex; flex-direction: column; gap: 2px; min-width: 0}
.hc-sugg-prod__kicker {font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 10.5px; letter-spacing: 0.04em; color: var(--hc-muted, rgba(26, 23, 20, 0.55))}
.hc-sugg-prod__kicker code {background: rgba(26, 23, 20, 0.04); padding: 1px 5px; border-radius: 4px; font-size: 10.5px}
.hc-sugg-prod__name {font-size: 13.5px; font-weight: 500; color: var(--hc-ink, #1a1714); overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.hc-sugg-prod__price {font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-weight: 500; font-size: 14px; color: var(--hc-ink, #1a1714); white-space: nowrap}
/* === css/blocks/164-hc-trust-card.css === */
/* =================== hc-trust-card.css =================== */
/* Premium trust-stat card — single instance of a stat tile inside
.hc-trust-cards grid. Bordered surface with soft gradient backdrop,
animated gold ring on hover, big serif number with gold underline. */
.hc-trust-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: clamp(20px, 1.8vw, 28px) clamp(20px, 1.8vw, 28px) clamp(22px, 2.2vw, 32px);
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(251, 247, 237, 0.78) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.16);
border-radius: 16px;
overflow: hidden;
isolation: isolate;
transition:
transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1),
border-color 0.32s ease,
box-shadow 0.32s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-trust-card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 16px;
background: radial-gradient(circle at 0% 0%, rgba(212, 184, 150, 0.22), transparent 60%);
opacity: 0;
transition: opacity 0.42s ease;
z-index: -1;
pointer-events: none;
}
.hc-trust-card::after {
content: "";
position: absolute;
width: 140%;
height: 140%;
top: -20%;
left: -20%;
border-radius: 50%;
border: 1px dashed rgba(212, 184, 150, 0);
pointer-events: none;
transition: border-color 0.32s ease, transform 14s linear;
z-index: -1;
}
.hc-trust-card:hover {
transform: translateY(-3px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow: 0 22px 44px -26px rgba(184, 154, 111, 0.40);
}
.hc-trust-card:hover::before { opacity: 1; }
.hc-trust-card:hover::after {
border-color: rgba(212, 184, 150, 0.32);
transform: rotate(360deg);
}
/* ─── Icon ─── */
.hc-trust-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
margin-bottom: 18px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.32), rgba(184, 154, 111, 0.10));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.55));
border-radius: 14px;
color: var(--hc-accent-dark, #7a6548);
transition: transform 0.42s cubic-bezier(0.2, 0.84, 0.3, 1), background 0.32s ease, color 0.32s ease;
}
.hc-trust-card__icon svg {
width: 32px;
height: 32px;
}
.hc-trust-card:hover .hc-trust-card__icon {
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
transform: rotate(-6deg) scale(1.06);
}
/* ─── Number with gold underline decoration ─── */
.hc-trust-card__num {
position: relative;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(34px, 3vw, 44px);
font-weight: 500;
line-height: 1.0;
letter-spacing: -0.025em;
color: var(--hc-ink, #1a1714);
margin-bottom: 14px;
font-variant-numeric: tabular-nums;
}
.hc-trust-card__num small {
font-size: 0.55em;
font-weight: 500;
color: var(--hc-accent-dark, #7a6548);
letter-spacing: 0;
margin-left: 2px;
}
.hc-trust-card__num::after {
content: "";
display: block;
width: 32px;
height: 2px;
margin-top: 10px;
background: linear-gradient(90deg, var(--hc-gold, #d4b896), var(--hc-accent, #8b7355));
border-radius: 2px;
transition: width 0.42s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-trust-card:hover .hc-trust-card__num::after { width: 60px; }
/* ─── Label (mono uppercase, w/ leading dash) ─── */
.hc-trust-card__lbl {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
margin-bottom: 10px;
}
/* ─── Sub-description ─── */
.hc-trust-card__sub {
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 13px;
line-height: 1.55;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.68));
max-width: 28ch;
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.hc-trust-card,
.hc-trust-card::after,
.hc-trust-card__icon,
.hc-trust-card__num::after {
transition: none !important;
}
.hc-trust-card:hover::after { transform: none; }
}
/* === css/blocks/165-hc-trust-cards.css === */
/* =================== hc-trust-cards.css =================== */
/* hc-trust-cards — premium 4-cell trust grid. Stat tiles with bordered
surfaces, gold accent details. Used on home page below hero.
Strict isolation: .hc-trust-cards / .hc-trust-cards__*. */
.hc-trust-cards {
display: block;
padding: clamp(56px, 6vw, 96px) 0;
background:
linear-gradient(180deg, transparent, rgba(212, 184, 150, 0.06) 40%, transparent),
radial-gradient(800px 320px at 50% 50%, rgba(212, 184, 150, 0.05), transparent 70%);
}
.hc-trust-cards__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 22px);
width: 100%;
max-width: var(--hc-wrap, 1344px);
margin: 0 auto;
padding: 0 clamp(20px, 2.4vw, 40px);
box-sizing: border-box;
}
@media (max-width: 1024px) {
.hc-trust-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.hc-trust-cards__grid { grid-template-columns: 1fr; }
}
/* === css/blocks/170-hc-why.css === */
/* =================== hc-why.css =================== */
.hc-why__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hc-sp-3)
}
.hc-why__card {
padding: var(--hc-sp-5); background: var(--hc-paper); border: 1px solid var(--hc-line); border-radius: var(--hc-r-md)
}
.hc-why__num {
font-family: var(--hc-mono); font-size: var(--hc-fs-xxs); color: var(--hc-accent); letter-spacing: var(--hc-ls-wide)
}
.hc-why__ico {
width: 40px; height: 40px; border-radius: var(--hc-r-sm); background: var(--hc-gold-soft); color: var(--hc-accent-dark); display: inline-flex; align-items: center; justify-content: center; margin: var(--hc-sp-2) 0 var(--hc-sp-3)
}
.hc-why__title {
font-size: var(--hc-fs-lg); margin-bottom: var(--hc-sp-2)
}
.hc-why__desc {
font-size: var(--hc-fs-sm); color: var(--hc-ink-soft)
}
.hc-why__spec {
margin-top: var(--hc-sp-3); padding-top: var(--hc-sp-2); border-top: 1px solid var(--hc-line); font-family: var(--hc-mono); font-size: var(--hc-fs-xxs); color: var(--hc-ink-mid); letter-spacing: 0.04em
}
.hc-why__ico {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: linear-gradient(135deg, rgba(212, 184, 150, 0.32), rgba(141, 109, 71, 0.18));
border: 1px solid rgba(141, 109, 71, 0.22);
position: relative;
margin-bottom: 12px;
}
.hc-why__ico > * {
display: none;
}
.hc-why__ico::after {
content: "";
width: 26px;
height: 26px;
background: var(--hc-ink, #1a1714);
-webkit-mask: var(--hc-why-icon) center/contain no-repeat;
mask: var(--hc-why-icon) center/contain no-repeat;
}
.hc-why__card:nth-child(1) .hc-why__ico {
--hc-why-icon: url("data:image/svg+xml;utf8,");
}
.hc-why__card:nth-child(2) .hc-why__ico {
--hc-why-icon: url("data:image/svg+xml;utf8,");
}
.hc-why__card:nth-child(3) .hc-why__ico {
--hc-why-icon: url("data:image/svg+xml;utf8,");
}
.hc-why__card:nth-child(4) .hc-why__ico {
--hc-why-icon: url("data:image/svg+xml;utf8,");
}
/* === css/blocks/174-hz-fx-reveal.css === */
/* =================== hz-fx-reveal.css =================== */
.hz-fx-reveal {opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform}
.hz-fx-reveal.is-visible, .hz-fx-reveal[data-revealed="1"] {opacity: 1; transform: none}
.stagger > .hz-fx-reveal:nth-child(1) {transition-delay: 0ms}
.stagger > .hz-fx-reveal:nth-child(2) {transition-delay: 80ms}
.stagger > .hz-fx-reveal:nth-child(3) {transition-delay: 160ms}
.stagger > .hz-fx-reveal:nth-child(4) {transition-delay: 240ms}
.stagger > .hz-fx-reveal:nth-child(5) {transition-delay: 320ms}
.stagger > .hz-fx-reveal:nth-child(6) {transition-delay: 400ms}
.hz-fx-reveal, [data-hc-reveal] {opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform}
.hz-fx-reveal.is-visible, [data-hc-reveal].is-visible, [data-hc-reveal][data-revealed] {opacity: 1; transform: translateY(0)}
.hz-fx-reveal, [data-hc-reveal], [data-fx-reveal] {animation: hc-fx-auto-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;}
.hz-fx-reveal--instant,
[data-fx-reveal].hz-fx-reveal--instant,
[data-hc-reveal].hz-fx-reveal--instant {
opacity: 1;
transform: none;
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.hz-fx-reveal, [data-hc-reveal], [data-fx-reveal] {animation: none;
opacity: 1;
transform: none;}
}
.hz-fx-magnetic,
[data-fx-magnetic] {
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform;
}
/* === css/blocks/175-hz-fx-stagger.css === */
/* =================== hz-fx-stagger.css =================== */
.hz-fx-stagger > * {opacity: 0; transform: translateY(12px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1)}
.hz-fx-stagger.is-visible > * {opacity: 1; transform: none}
.hz-fx-stagger.is-visible > *:nth-child(2) {transition-delay: 0.06s}
.hz-fx-stagger.is-visible > *:nth-child(3) {transition-delay: 0.12s}
.hz-fx-stagger.is-visible > *:nth-child(4) {transition-delay: 0.18s}
.hz-fx-stagger.is-visible > *:nth-child(5) {transition-delay: 0.24s}
.hz-fx-stagger.is-visible > *:nth-child(6) {transition-delay: 0.30s}
.hz-fx-stagger.is-visible > *:nth-child(7) {transition-delay: 0.36s}
.hz-fx-stagger.is-visible > *:nth-child(8) {transition-delay: 0.42s}
.hz-fx-stagger.is-visible > *:nth-child(n+9) {transition-delay: 0.48s}
/* === css/blocks/176-hz-orb.css === */
/* =================== hz-orb.css =================== */
.hz-orb {position: relative; inset: auto; width: auto; height: auto; border-radius: inherit; background: transparent; pointer-events: auto; z-index: auto; filter: none; transform: none; animation: none; isolation: isolate}
.hz-orb::before {content: ""; position: absolute; width: clamp(180px, 22vw, 280px); height: clamp(180px, 22vw, 280px); right: clamp(-72px, -4vw, -28px); top: 50%; border-radius: 50%; background: radial-gradient(circle, rgba(139,115,85,0.16) 0%, rgba(139,115,85,0.06) 46%, transparent 74%); pointer-events: none; z-index: 0; filter: blur(34px); transform: translate3d(0, -50%, 0); animation: hz-orb-float 18s ease-in-out infinite}
.hz-orb>* {position: relative; z-index: 1}
.hz-orb > * {position: relative; z-index: 1}
@media(max-width:1024px) {
.delivery-stats__item .hz-orb::before {display: none}
}
/* === css/blocks/177-hzlead.css === */
/* =================== hzlead.css =================== */
.hzlead {position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(26, 23, 20, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px)}
.hzlead[x-cloak] {display: none}
.hzlead__dialog {position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 32px 32px 28px; background: #fdf8ef; border-radius: 20px; box-shadow: 0 40px 120px rgba(28, 22, 16, 0.28)}
.hzlead__close {position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: 0.5px solid rgba(26, 23, 20, 0.12); color: rgba(26, 23, 20, 0.7); cursor: pointer; transition: background 0.18s, color 0.18s, transform 0.18s}
.hzlead__close:hover {background: var(--hc-ink, #1a1714); color: var(--hc-paper, #ffffff); transform: scale(1.05)}
.hzlead__head {margin: 0 0 18px; padding-right: 44px}
.hzlead__title {margin: 0 0 8px; font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--hc-ink, #1a1714)}
.hzlead__sub {margin: 0; font-size: 13px; line-height: 1.5; color: rgba(26, 23, 20, 0.62)}
.hzlead__chips {display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none}
.hzlead__chips li {position: relative; padding: 6px 12px 6px 26px; font-size: 12px; line-height: 1.3; color: #6f5a3c; background: rgba(212, 184, 150, 0.14); border: 0.5px solid rgba(180, 151, 115, 0.32); border-radius: 100px; white-space: nowrap}
.hzlead__chips li::before {content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 5px; border-left: 1.5px solid var(--hc-accent, #8b7355); border-bottom: 1.5px solid var(--hc-accent, #8b7355); transform: translateY(-65%) rotate(-45deg)}
.hzlead__form {display: grid; gap: 14px}
.hzlead__field {display: grid; gap: 6px}
.hzlead__label {font-size: 13px; font-weight: 500; color: var(--hc-ink, #1a1714)}
.hzlead__label em {font-style: normal; color: #c0392b; margin-left: 2px}
.hzlead__input, .hzlead__textarea {width: 100%; padding: 12px 14px; font-family: inherit; font-size: 14px; line-height: 1.4; color: var(--hc-ink, #1a1714); background: var(--hc-paper, #ffffff); border: 0.5px solid rgba(180, 151, 115, 0.35); border-radius: 10px; transition: border-color 0.15s, box-shadow 0.15s}
.hzlead__input::placeholder, .hzlead__textarea::placeholder {color: rgba(26, 23, 20, 0.4)}
.hzlead__input:focus, .hzlead__textarea:focus {outline: none; border-color: var(--hc-accent, #8b7355); box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.18)}
.hzlead__textarea {resize: vertical; min-height: 76px}
.hzlead__submit {height: 50px; margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--hc-ink, #1a1714); color: var(--hc-paper, #ffffff); border: 0; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background 0.18s, transform 0.18s}
.hzlead__submit:hover {background: #2c2620; transform: translateY(-1px)}
.hzlead__legal {margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: rgba(26, 23, 20, 0.55); text-align: center}
.hzlead__legal a {color: rgba(26, 23, 20, 0.7); text-decoration: underline; text-decoration-color: rgba(26, 23, 20, 0.3)}
.hzlead__legal a:hover {color: var(--hc-ink, #1a1714)}
.hzlead__close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 50%;
background: var(--hc-paper, #ffffff);
color: var(--hc-ink, #1a1714);
cursor: pointer;
z-index: 10;
transition: border-color .15s ease, color .15s ease;
}
.hzlead__close:hover {
border-color: var(--hc-accent, #8b7355);
color: var(--hc-accent, #8b7355);
}
.hzlead__close svg { width: 16px; height: 16px; }
.hzlead .hzlead__field[x-show] { min-width: 0; }
/* === css/blocks/178-iconcard.css === */
/* =================== iconcard.css =================== */
.iconcard {
padding: 24px; background: var(--hc-paper, #ffffff); border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18)); border-radius: 16px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; position: relative; box-shadow: 0 1px 2px rgba(27, 20, 13, 0.04), 0 8px 24px rgba(27, 20, 13, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; overflow: hidden; isolation: isolate; min-height: 100px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px
}
.iconcard__icon {
width: 48px; height: 48px; border-radius: 12px; background: var(--hc-gold-soft, rgba(212, 184, 150, 0.16)); color: var(--hc-accent-dark, #5d4d3a); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; overflow: hidden; grid-column: 1; grid-row: 1 / span 2
}
.iconcard__title {
font-weight: 400; margin: 0 0 6px; position: relative; z-index: 1; font-family: "Playfair Display", Georgia, serif; font-size: 17px; color: var(--hc-ink, #1a1714); margin-bottom: 4px; line-height: 1.25; white-space: normal; word-break: normal; overflow-wrap: break-word; display: block; grid-column: 2; grid-row: 1
}
.iconcard__text {
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.65)); font-size: 13px; margin: 0; position: relative; z-index: 1; line-height: 1.5; display: block; grid-column: 2; grid-row: 2
}
.page-delivery .iconcard {
height: 100%; min-height: 136px; grid-template-columns: 44px minmax(0, 1fr); display: grid; gap: 14px; width: 100%; min-width: 0
}
.iconcard::before {
content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 88% 0%, rgba(212, 184, 150, 0.18), transparent 45%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none
}
.iconcard:hover {
transform: translateY(-2px); border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.42)); box-shadow: 0 14px 36px -16px rgba(139, 115, 85, 0.20)
}
.iconcard:hover::before {
opacity: 1
}
.iconcard__icon::before {
content: ""; position: absolute; inset: 2px; border-radius: 10px; border: 1px dashed rgba(212, 184, 150, 0.55); opacity: 0.6; animation: hzCardIconRing 14s linear infinite; pointer-events: none
}
.iconcard:hover .iconcard__icon::before {
animation-duration: 7s; opacity: 1; border-color: rgba(212, 184, 150, 0.85)
}
.iconcard__icon svg {
position: relative; z-index: 2; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1)
}
.iconcard:hover .iconcard__icon svg {
transform: scale(1.08) rotate(-3deg)
}
@media(max-width:1024px) {
.iconcard > .iconcard__icon {grid-column: 1; grid-row: 1 / span 2; align-self: start}
.iconcard > .iconcard__title {grid-column: 2; grid-row: 1; min-width: 0}
.iconcard > .iconcard__text {grid-column: 2; grid-row: 2; min-width: 0}
body .iconcard, .hc-sec .iconcard, .page-delivery .iconcard, .hc-wrap .iconcard {display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; min-width: 0}
body .iconcard > .iconcard__icon {grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 44px; height: 44px; flex-shrink: 0}
body .iconcard > .iconcard__title {grid-column: 2; grid-row: 1; min-width: 0; word-break: normal; overflow-wrap: anywhere}
body .iconcard > .iconcard__text {grid-column: 2; grid-row: 2; min-width: 0; word-break: normal; overflow-wrap: anywhere; white-space: normal}
body .iconcard > *:nth-child(n+4) {grid-column: 2; grid-row: 3; min-width: 0}
}
.iconcard {
position: relative;
padding: 22px 20px 20px;
background: linear-gradient(180deg, var(--hc-paper, #ffffff), #fbf7ec);
border: 1px solid rgba(141, 109, 71, 0.18);
border-radius: 14px;
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.iconcard:hover {
transform: translateY(-2px);
border-color: rgba(141, 109, 71, 0.4);
box-shadow: 0 18px 40px -28px rgba(27, 20, 13, 0.32);
}
.iconcard__icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(212, 184, 150, 0.18);
border-radius: 12px;
color: var(--hc-accent-dark, #5d4d3a);
margin-bottom: 12px;
}
.iconcard__title {
font: 500 16px/1.2 var(--hc-serif, "Playfair Display", Georgia, serif);
color: var(--hc-ink, #1a1714);
margin-bottom: 4px;
}
.iconcard__text {
font-size: 13px;
line-height: 1.5;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.65));
}
[class*="shipping"] .iconcard:nth-child(3) .iconcard__icon, .delivery-methods .iconcard:nth-child(3) .iconcard__icon, .iconcard.iconcard--cdek .iconcard__icon {
background: linear-gradient(135deg, #00b259, #008f43);
color: var(--hc-paper, #ffffff);
position: relative;
}
[class*="shipping"] .iconcard:nth-child(3) .iconcard__icon::after, .delivery-methods .iconcard:nth-child(3) .iconcard__icon::after {
content: "СДЭК";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font: 600 10px/1 var(--hc-sans, "Outfit", sans-serif);
letter-spacing: 0.06em;
color: var(--hc-paper, #ffffff);
background: linear-gradient(135deg, #00b259, #008f43);
border-radius: inherit;
}
[class*="shipping"] .iconcard:nth-child(4) .iconcard__icon, .delivery-methods .iconcard:nth-child(4) .iconcard__icon, .iconcard.iconcard--dl .iconcard__icon {
background: linear-gradient(135deg, #d52020, #a91414);
color: var(--hc-paper, #ffffff);
}
[class*="shipping"] .iconcard:nth-child(4) .iconcard__icon::after, .delivery-methods .iconcard:nth-child(4) .iconcard__icon::after {
content: "ДЛ";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font: 700 13px/1 var(--hc-sans, "Outfit", sans-serif);
letter-spacing: 0.04em;
color: var(--hc-paper, #ffffff);
background: linear-gradient(135deg, #d52020, #a91414);
border-radius: inherit;
}
.iconcard__icon {
position: relative;
overflow: hidden;
}
.page-delivery .iconcard__text {
line-height: 1.55; word-break: normal; overflow-wrap: anywhere; hyphens: none; white-space: normal
}
.page-delivery .iconcard > * { min-width: 0; }
/* === css/blocks/179-intent-chip.css === */
/* =================== intent-chip.css =================== */
.intent-chip {display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--hc-paper, #ffffff); border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18)); border-radius: 14px; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease}
.intent-chip b {display: block; font-weight: 400; font-size: 15px; color: var(--hc-ink, #1a1714); font-family: 'Playfair Display', Georgia, serif}
.intent-chip span {display: block; font-size: 12px; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6)); line-height: 1.4}
.intent-chip > b, .intent-chip > strong {display: block; margin-bottom: 4px}
.intent-chip > span {display: block}
@media(max-width:1024px) {
.intent-chip:hover {transform: translateY(-2px); border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.42)); box-shadow: 0 10px 26px -14px rgba(139, 115, 85, 0.20)}
}
/* === css/blocks/182-lead-block.css === */
/* =================== lead-block.css =================== */
/* lead-block — final CTA "Нужна консультация по проекту?". Used on /about,
* /contacts, /delivery as the closing conversion block. Premium two-column
* card: editorial copy on the left, phone-input + manager CTA + Telegram
* pill on the right. Ink-tinted card so it stands out from the cream page
* background. Strictly .lead-block / .lead-block__*. */
.lead-block {
padding: clamp(44px, 5vw, 72px) 0;
}
.lead-block__card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(28px, 3vw, 48px);
align-items: center;
padding: clamp(36px, 3.6vw, 56px) clamp(28px, 3.2vw, 64px);
background:
radial-gradient(900px 540px at 0% 0%, rgba(212, 184, 150, 0.18), transparent 58%),
radial-gradient(700px 460px at 100% 100%, rgba(184, 154, 111, 0.12), transparent 62%),
linear-gradient(160deg, #1f1a16 0%, #14110e 100%);
border: 0.5px solid rgba(212, 184, 150, 0.32);
border-radius: clamp(20px, 1.8vw, 28px);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.14),
0 36px 80px -26px rgba(20, 14, 8, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
overflow: hidden;
isolation: isolate;
color: rgba(252, 248, 240, 0.92);
}
.lead-block__card::before {
content: "";
position: absolute;
top: 0;
left: clamp(28px, 3.2vw, 64px);
right: clamp(28px, 3.2vw, 64px);
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;
}
.lead-block__card::after {
content: "";
position: absolute;
bottom: -50%;
right: -10%;
width: 60%;
height: 200%;
background: radial-gradient(circle, rgba(212, 184, 150, 0.10), transparent 60%);
pointer-events: none;
z-index: 0;
}
.lead-block__body {
position: relative;
z-index: 1;
min-width: 0;
}
.lead-block__eyebrow {
display: inline-block;
padding: 6px 12px;
margin-bottom: 18px;
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-gold-1, var(--hc-gold, #d4b896));
background: rgba(212, 184, 150, 0.08);
border: 0.5px solid rgba(212, 184, 150, 0.28);
border-radius: 999px;
}
.lead-block__title {
margin: 0 0 16px;
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: #fffdf8;
}
.lead-block__desc {
margin: 0;
max-width: 48ch;
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.6;
color: rgba(252, 248, 240, 0.68);
}
.lead-block__ctas {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.lead-block__form {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.lead-block__phone {
width: 100%;
height: 56px;
padding: 16px 20px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 15px;
letter-spacing: 0.02em;
color: #fffdf8;
background: rgba(255, 252, 247, 0.06);
border: 0.5px solid rgba(212, 184, 150, 0.32);
border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.lead-block__phone::placeholder {
color: rgba(252, 248, 240, 0.36);
}
.lead-block__phone:focus {
outline: none;
border-color: var(--hc-gold-1, var(--hc-gold, #d4b896));
background: rgba(255, 252, 247, 0.10);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 3px rgba(212, 184, 150, 0.22);
}
.lead-block__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 56px;
padding: 0 24px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 14.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: #2a2018;
background: linear-gradient(135deg, #e8c896 0%, #c9a878 100%);
border: 0.5px solid rgba(212, 184, 150, 0.55);
border-radius: 14px;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.32),
0 12px 28px -10px rgba(212, 184, 150, 0.45),
0 1px 2px rgba(0, 0, 0, 0.14);
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.lead-block__btn:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, #f0d4a8 0%, var(--hc-gold, #d4b896) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
0 18px 38px -10px rgba(212, 184, 150, 0.60),
0 2px 4px rgba(0, 0, 0, 0.18);
}
.lead-block__tg {
display: inline-flex;
align-items: center;
align-self: flex-end;
gap: 8px;
padding: 8px 14px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--hc-gold-1, var(--hc-gold, #d4b896));
background: rgba(212, 184, 150, 0.06);
border: 0.5px solid rgba(212, 184, 150, 0.22);
border-radius: 999px;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lead-block__tg:hover {
background: rgba(212, 184, 150, 0.14);
border-color: rgba(212, 184, 150, 0.55);
color: #fffdf8;
}
.lead-block__tg svg {
width: 14px;
height: 14px;
}
@media (max-width: 1024px) {
.lead-block__card {
grid-template-columns: 1fr;
gap: 28px;
}
.lead-block__tg {
align-self: flex-start;
}
}
/* === css/blocks/183-or.css === */
/* =================== or.css =================== */
.or {text-align: center; color: var(--hc-ink-mid); font-size: var(--hc-fs-sm); margin: var(--hc-sp-3) 0; position: relative}
.or::before, .or::after {content: ''; position: absolute; top: 50%; width: 30%; height: 1px; background: var(--hc-line)}
.or::before {left: 0}
.or::after {right: 0}
.page-hero__surface .or, .hc-sec .or {max-width: 300px; margin-left: auto; margin-right: auto}
/* === css/blocks/197-pcard.css === */
/* =================== pcard.css =================== */
/* pcard - premium product card block. The actual catalog/list card on
* /shop, /favorites, PDP related, search results, etc. Variants:
* --a editorial (large media, title overlay)
* --b compact rail (horizontal mini)
* --c horizontal/grid DEFAULT (catalog grid)
* --d tagbar (lite with tag row)
* --mini cart-thumb / suggestions
*
* Sub-elements (BEM, all live in THIS file — pcard is one object):
* .pcard-shell inner card surface (border, padding, shadow)
* .pcard-stage media wrapper (aspect-ratio)
* .pcard-media media link (overflow:hidden — clips images!)
* .pcard-media__glow
* .pcard-media__img / .pcard-media__img--hover / .pcard-media__placeholder
* .pcard-overlay badges + actions overlay over media
* .pcard-badge small pill (sale/hit/new)
* .pcard-body text content
* .pcard-meta-row series + sku
* .pcard-series / .pcard-sku
* .pcard-title serif clamp-2 title
* .pcard-caption description body
* .pcard-props chips strip
* .pcard-hoverband hover-revealed prop band
* .pcard-footer price + cta row
* .pcard-pricebox / .pcard-pricebox__old / .pcard-pricebox__current
* .pcard-stock stock pill (success/warn/danger)
* .pcard-act tiny icon buttons (cmp/fav/qv/cart)
*
* The `.pcard-c__*` aliases mirror generic class names for variant-specific
* tuning when needed but defaults work for all variants. Strictly .pcard / .pcard-*. */
/* ============ Outer wrapper ============ */
.pcard {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
color: inherit;
text-decoration: none;
cursor: pointer;
isolation: isolate;
}
.pcard a {
color: inherit; text-decoration: none;
}
.pcard a, .pcard button {
cursor: pointer;
}
/* ============ Shell (the visible card surface) ============
overflow: VISIBLE so the absolute .pcard-hoverband (below body) can
escape the card on hover without being clipped. Rounded-corner clipping
moved to .pcard-stage (top corners) and .pcard-body (bottom corners). */
.pcard-shell {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
min-width: 0;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 18px;
overflow: visible;
isolation: isolate;
box-shadow:
0 1px 2px rgba(27, 20, 13, 0.03),
0 4px 14px -6px rgba(27, 20, 13, 0.06),
0 24px 60px -32px rgba(40, 30, 15, 0.10);
transition:
border-color 0.24s ease,
box-shadow 0.32s ease;
}
.pcard-shell::before {
content: "";
position: absolute;
inset: 0; /* was -1px — now stays inside the card to avoid halo */
z-index: 0;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(circle at 92% 0%, rgba(212, 184, 150, 0.22), transparent 42%),
radial-gradient(circle at 0% 100%, rgba(199, 155, 96, 0.10), transparent 50%);
opacity: 0;
transition: opacity 0.32s ease;
}
.pcard:hover .pcard-shell, .pcard:focus-within .pcard-shell {
transform: none;
border-color: rgba(185, 154, 111, 0.55);
box-shadow:
0 2px 4px rgba(27, 20, 13, 0.04),
0 12px 30px -8px rgba(27, 20, 13, 0.10),
0 38px 80px -28px rgba(40, 30, 15, 0.28);
}
.pcard:hover .pcard-shell::before {
opacity: 1;
}
/* ============ Stage (media wrapper) ============
Subtle near-white gradient. Owns the TOP rounded corners since shell is
overflow:visible (so the float hoverband can escape below the card). */
.pcard-stage {
position: relative;
width: 100%;
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, #fbf7ed 100%);
overflow: hidden;
isolation: isolate;
border-bottom: 0.5px solid rgba(141, 109, 71, 0.10);
border-radius: 17.5px 17.5px 0 0; /* clip media to shell's top corners */
}
.pcard-stage::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(560px 320px at 80% -20%, rgba(212, 184, 150, 0.14), transparent 60%);
opacity: 0;
transition: opacity 0.4s ease;
}
.pcard:hover .pcard-stage::before {
opacity: 1;
}
.pcard-stage--horizontal, .pcard-c__media-wrap {
aspect-ratio: 1.05;
}
.pcard--a .pcard-stage {
aspect-ratio: 1.2;
}
.pcard--b .pcard-stage {
aspect-ratio: 1;
}
/* ============ Media link ============ */
.pcard-media, .pcard-c__media {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 10%;
overflow: hidden;
isolation: isolate;
}
.pcard-media__glow {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(circle at 30% 25%, rgba(255, 252, 247, 0.55), transparent 50%);
}
.pcard-media__placeholder, .pcard-c__ph {
position: absolute;
inset: 0;
z-index: 0;
display: grid;
place-items: center;
width: 100%;
height: 100%;
padding: 10%;
pointer-events: none;
}
.pcard-media__placeholder svg, .pcard-c__ph svg {
max-width: 100%;
max-height: 100%;
filter: drop-shadow(0 4px 8px rgba(122, 101, 72, 0.16));
}
/* Inline SVG schematics inside pcard-stage rely on stroke; defeat the
global `svg { fill: currentColor }` baseline. */
.pcard-stage svg circle:not([fill]), .pcard-stage svg rect:not([fill]), .pcard-stage svg ellipse:not([fill]), .pcard-stage svg path:not([fill]), .pcard-stage svg line:not([fill]) {
fill: none;
}
.pcard-media__img, .pcard-media picture {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
}
.pcard-media__img, .pcard-media picture img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
padding: 10%;
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, filter 0.55s ease;
}
.pcard:hover .pcard-media__img, .pcard:hover .pcard-media picture img {
transform: scale(1.06);
filter: drop-shadow(0 18px 28px rgba(40, 29, 16, 0.16));
}
.pcard-media--has-img .pcard-media__placeholder, .pcard-media--has-img .pcard-c__ph {
display: none;
}
.pcard-media--has-img.hc-media-fallback .pcard-media__placeholder, .pcard-media--has-img.hc-media-fallback .pcard-c__ph {
display: grid;
}
/* If JS marks an img as broken, hide it and let the placeholder show */
.pcard-media__img.hc-img-broken {
display: none;
}
/* ============ Overlay (badges + actions over media) ============ */
.pcard-overlay {
position: absolute;
inset: 12px;
z-index: 4;
display: flex;
justify-content: space-between;
align-items: flex-start;
pointer-events: none;
}
.pcard-overlay--compact {
inset: 10px;
}
.pcard-overlay__badges {
display: flex;
flex-direction: column;
gap: 6px;
pointer-events: none;
}
/* Quick-action icon column (quickview / favorite / cart/compare).
Lives inside the media overlay so it is independent from the price footer. */
.pcard-overlay__actions, .pcard-c__actions {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center; /* keep children at their natural 30x30; no stretch */
gap: 6px;
width: 32px; /* clamp container so flex can't widen children */
opacity: 0.85;
transform: translateX(0);
transition: opacity 0.28s ease, transform 0.28s ease;
pointer-events: auto;
}
.pcard:hover .pcard-overlay__actions, .pcard:focus-within .pcard-overlay__actions, .pcard:hover .pcard-c__actions, .pcard:focus-within .pcard-c__actions {
opacity: 1;
transform: translateX(-2px);
}
/* ============ Badges ============ */
.pcard-badge, .pcard-c__chip {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: var(--hc-r-pill, 999px);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
background: linear-gradient(135deg, #2a2018, #4a3d2a);
color: var(--hc-paper, #ffffff);
box-shadow: 0 4px 10px -2px rgba(40, 30, 15, 0.25);
pointer-events: auto;
}
.pcard-badge--sale, .pcard-c__chip--sale {
background: linear-gradient(135deg, #8b3f32, #6f3329);
}
.pcard-badge--gold, .pcard-badge--bestseller, .pcard-badge--hit {
background: linear-gradient(135deg, #e8c896 0%, #c9a878 50%, #b89a6f 100%);
color: #2a2018;
border: 0.5px solid rgba(212, 184, 150, 0.7);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 4px 12px -2px rgba(212, 184, 150, 0.45),
0 1px 2px rgba(40, 30, 15, 0.18);
text-shadow: 0 1px 0 rgba(255, 252, 247, 0.32);
}
.pcard-badge--new {
background: linear-gradient(135deg, var(--hc-success, #3d6b4f), #2c5039);
}
/* ============ Action icon-buttons ============ */
.pcard-act, .pcard-c__sec {
flex: 0 0 30px; /* lock size — prevents flex-stretch from making them ovals */
width: 30px;
height: 30px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.94);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 50%;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
cursor: pointer;
box-shadow: 0 2px 6px -2px rgba(40, 30, 15, 0.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.pcard-act svg {
width: 14px;
height: 14px;
}
.pcard-act:hover, .pcard-c__sec:hover {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border-color: var(--hc-ink, #1a1714);
transform: scale(1.08);
}
.pcard-act--fav.is-active, .hc-atc-fav.is-active {
background: #c0392b;
color: var(--hc-paper, #ffffff);
border-color: #c0392b;
}
/* ============ Body ============
Flex column so the .pcard-footer's margin-top:auto pins it to the
bottom — guarantees identical footer-Y across all cards in a row when
align-items:stretch is on the grid (which it is). NOT position:relative
so absolute overlay actions resolve up to .pcard-shell. */
.pcard-body, .pcard-c__body {
isolation: isolate;
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px 18px;
min-width: 0;
background: var(--hc-paper, #ffffff);
border-radius: 0 0 17.5px 17.5px;
}
.pcard-meta-row {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.pcard-series, .pcard-c__series {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pcard-sku, .pcard-c__sku {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
white-space: nowrap;
flex-shrink: 0;
}
.pcard-title, .pcard-c__title {
/* Unified title clamping and flow behavior across all pcard variants. */
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 15.5px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--hc-ink, #1a1714);
text-decoration: none;
margin: 2px 0;
transition: color 0.18s ease;
/* Hard guards: break inside super-long tokens (SKUs / URLs) so the title
never escapes its grid column. */
min-width: 0;
max-width: 100%;
min-height: calc(15.5px * 1.3 * 2);
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
}
.pcard:hover .pcard-title, .pcard:hover .pcard-c__title {
color: var(--hc-accent-dark, #5d4d3a);
}
.pcard--b .pcard-title {
font-size: 14px;
}
.pcard-caption, .pcard-c__caption {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
font-size: 12.5px;
line-height: 1.45;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}
/* ============ Props chips (small spec pills) ============ */
.pcard-props, .pcard-c__props {
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
margin: 2px 0 4px;
}
.pcard-props__chip, .pcard-c__pill {
display: inline-flex;
align-items: center;
padding: 3px 8px;
background: rgba(212, 184, 150, 0.16);
border: 0.5px solid rgba(212, 184, 150, 0.32);
border-radius: var(--hc-r-pill, 999px);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--hc-accent-dark, #7a6548);
white-space: nowrap;
}
/* ============ Hover-revealed prop band ============
ABSOLUTE float panel below the card body. Card itself keeps uniform row
height (align-items:stretch on grids); ONLY the hovered card grows
visually by revealing this panel — siblings stay at row height. z-index
lifts the hovered card above neighbours. */
.pcard-hoverband {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 6;
margin-top: -1px;
padding: 0 14px;
max-height: 0;
opacity: 0;
pointer-events: none;
overflow: hidden;
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.98) 100%);
border: 0.5px solid transparent;
border-top: 0;
border-radius: 0 0 17.5px 17.5px;
box-shadow: 0 24px 44px -20px rgba(40, 30, 15, 0.28);
transition:
max-height 0.32s cubic-bezier(0.2, 0.8, 0.3, 1),
opacity 0.24s ease,
padding 0.30s ease,
border-color 0.30s ease;
}
.pcard:hover .pcard-hoverband, .pcard:focus-within .pcard-hoverband {
max-height: 280px;
opacity: 1;
padding: 12px 14px 14px;
pointer-events: auto;
border-color: rgba(141, 109, 71, 0.32);
}
.pcard {
z-index: 1;
}
.pcard:hover, .pcard:focus-within {
z-index: 8;
}
.pcard-hoverband--inline {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 11.5px;
color: var(--hc-ink-soft);
}
.pcard-hoverband__item {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 10px;
padding: 4px 0;
border-bottom: 0.5px dashed rgba(141, 109, 71, 0.20);
}
.pcard-hoverband__item:last-child {
border-bottom: 0;
}
.pcard-hoverband__item span {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.pcard-hoverband__item strong {
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 12px;
font-weight: 600;
color: var(--hc-ink, #1a1714);
text-align: right;
letter-spacing: -0.005em;
}
/* ============ Footer (price + CTA) ============
Column layout: pricebox stack (old / current / stock pill) on top,
CTA full-width below. The c_horizontal template nests .pcard-stock
inside .pcard-pricebox — we can't grid-place a nested element, so we
stack everything vertically and let pricebox handle the price + stock
internally as a flex column with the stock pill aligned to the start. */
.pcard-footer, .pcard-c__bottom {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 0.5px dashed rgba(141, 109, 71, 0.20);
}
.pcard-pricebox, .pcard-c__price-block {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
align-items: flex-start;
}
.pcard-pricebox__old, .pcard-c__price-old {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 12px;
line-height: 1;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
text-decoration: line-through;
text-decoration-color: rgba(201, 67, 58, 0.6);
}
.pcard-pricebox__current, .pcard-c__price {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 24px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
color: var(--hc-ink, #1a1714);
}
.pcard--b .pcard-pricebox__current {
font-size: 18px;
}
.pcard-pricebox__current.is-sale, .pcard-c__price--sale {
color: #8b3f32;
}
.pcard-pricebox__current.is-request, .pcard-c__price--ask {
font-size: 15px;
font-style: italic;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
/* ============ Stock indicator ============ */
.pcard-stock {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding: 3px 8px;
background: rgba(61, 107, 79, 0.10);
border: 0.5px solid rgba(61, 107, 79, 0.28);
border-radius: var(--hc-r-pill, 999px);
font-family: var(--hc-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--hc-success, #3d6b4f);
white-space: nowrap;
align-self: flex-start;
}
.pcard-stock::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.pcard-stock--warn {
background: rgba(166, 116, 38, 0.10);
border-color: rgba(166, 116, 38, 0.32);
color: var(--hc-warning, #a67426);
}
.pcard-stock--danger {
background: rgba(201, 67, 58, 0.10);
border-color: rgba(201, 67, 58, 0.32);
color: var(--hc-danger, #c9433a);
}
/* ============ Primary CTA ============
Full-width pill at the bottom of the card footer. */
.pcard-c__cta, .pcard-cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
padding: 0 18px;
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border: 0;
border-radius: 10px;
font: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
cursor: pointer;
transition: background 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}
.pcard-c__cta:hover, .pcard-cta:hover {
background: linear-gradient(135deg, #2a2018, #3d3024);
transform: translateY(-1px);
box-shadow: 0 8px 20px -8px rgba(40, 30, 15, 0.35);
}
.pcard-c__cta--request {
background: transparent;
color: var(--hc-ink, #1a1714);
border: 1px solid rgba(26, 23, 20, 0.22);
}
.pcard-c__cta--request:hover {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border-color: var(--hc-ink, #1a1714);
}
/* ============ Variants ============ */
/* --c (default catalog grid) — vertical card with media on top */
.pcard.pcard--c .pcard-shell {
grid-template-rows: auto 1fr;
}
.pcard--a .pcard-shell {
grid-template-rows: 1fr auto;
}
.pcard--b .pcard-shell {
display: grid;
grid-template-columns: 96px 1fr;
grid-template-rows: none;
}
.pcard--d .pcard-shell {
grid-template-rows: auto 1fr;
}
.pcard--c .pcard-shell--c {
grid-template-rows: auto 1fr;
}
/* --a (editorial) — large media with title overlay (kept simple here) */
/* --b (compact rail) — horizontal mini for cross-sell rails */
/* --d (tagbar) — same as c but with bigger props row */
/* --mini variant — fully owned by pcard-mini.css (separate block file).
This file no longer styles .pcard.pcard-mini to avoid the alphabetic
cascade overriding the dedicated mini block (pcard.css loads after
pcard-mini.css). */
@media (max-width: 1024px) {
.pcard-body { padding: 14px 14px 16px; gap: 5px; }
.pcard-title { font-size: 15px; }
.pcard-pricebox__current { font-size: 21px; }
.pcard-overlay__actions { opacity: 1; transform: none; }
.pcard-hoverband { display: none; }
}
.pcard.pcard-mini .pcard-mini__ph svg {
width: 100%;
height: 100%;
display: block;
}
/* ─── folded from pcard-body.css ─── */
.pcard--b .pcard-body {
padding: 12px 14px;
}
.pcard .pcard-overlay__actions, .pcard .pcard-c__actions {
z-index: 60;
pointer-events: auto;
}
.pcard .pcard-act, .pcard .qv-btn {
position: relative;
z-index: 61;
pointer-events: auto;
}
.pcard .pcard-stage, .pcard .pcard-c__media-wrap {
position: relative;
z-index: 3;
}
.pcard .pcard-body, .pcard .pcard-c__body {
z-index: 1;
}
/* ---- folded from 116-hc-pcard.css ---- */
/* =================== hc-pcard.css =================== */
/* hc-pcard - premium product card.
* Scope: every selector starts with .hc-pcard or .hc-pcard__*.
* Anything outside this scope is owned by its own block file. */
.hc-pcard {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
height: 100%;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.14);
border-radius: 18px;
overflow: hidden;
cursor: pointer;
isolation: isolate;
box-shadow:
0 1px 2px rgba(27, 20, 13, 0.03),
0 4px 14px -6px rgba(27, 20, 13, 0.06),
0 24px 60px -32px rgba(40, 30, 15, 0.10);
transition:
border-color 0.24s ease,
box-shadow 0.32s ease;
will-change: border-color, box-shadow;
}
.hc-pcard::before {
content: "";
position: absolute;
inset: -1px;
z-index: 0;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(circle at 92% 0%, rgba(212, 184, 150, 0.22), transparent 42%),
radial-gradient(circle at 0% 100%, rgba(199, 155, 96, 0.10), transparent 50%);
opacity: 0;
transition: opacity 0.32s ease;
}
.hc-pcard::after {
content: "";
position: absolute;
left: -55%;
top: -90%;
width: 42%;
height: 240%;
z-index: 2;
pointer-events: none;
background: linear-gradient(
115deg,
transparent 30%,
rgba(255, 250, 240, 0.55) 50%,
transparent 70%
);
opacity: 0;
transform: translateX(0);
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.hc-pcard:hover {
transform: none;
border-color: rgba(185, 154, 111, 0.55);
box-shadow:
0 2px 4px rgba(27, 20, 13, 0.04),
0 12px 30px -8px rgba(27, 20, 13, 0.10),
0 38px 80px -28px rgba(40, 30, 15, 0.28);
z-index: 5;
}
.hc-pcard:hover::before { opacity: 1; }
.hc-pcard:hover::after { opacity: 1; transform: translateX(260%); }
.hc-pcard:focus-within {
outline: 2px solid var(--hc-accent, #8b7355);
outline-offset: 3px;
}
.hc-pcard__media {
position: relative;
z-index: 1;
display: block;
width: 100%;
aspect-ratio: 1.08;
padding: 10%;
background: linear-gradient(160deg, #f7f3ea 0%, #efe8da 100%);
border-bottom: 0.5px solid rgba(141, 109, 71, 0.10);
overflow: hidden;
isolation: isolate;
}
.hc-pcard__media::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(circle at 50% 110%, rgba(199, 155, 96, 0.18), transparent 60%);
opacity: 0.6;
transition: opacity 0.5s ease;
}
.hc-pcard:hover .hc-pcard__media::before { opacity: 1; }
.hc-pcard__media picture,
.hc-pcard__media img,
.hc-pcard__svg-fallback,
.hc-pcard__svg-fallback svg {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
transition:
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.55s ease;
}
.hc-pcard:hover .hc-pcard__media img,
.hc-pcard:hover .hc-pcard__svg-fallback svg {
transform: scale(1.08) rotate(-1deg);
filter: drop-shadow(0 22px 36px rgba(40, 29, 16, 0.18));
}
.hc-pcard__svg-fallback {
display: grid;
place-items: center;
min-height: 100%;
}
.hc-pcard__badges {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 6px;
pointer-events: none;
}
.hc-pcard__badge {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: var(--hc-r-pill, 999px);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hc-paper, #ffffff);
background: linear-gradient(135deg, #2a2018, #4a3d2a);
box-shadow: 0 4px 10px -2px rgba(40, 30, 15, 0.25);
}
.hc-pcard__badge--sale {
background: linear-gradient(135deg, #8b3f32, #6f3329);
}
.hc-pcard__badge--gold,
.hc-pcard__badge--bestseller {
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
}
.hc-pcard__badge--new {
background: linear-gradient(135deg, var(--hc-success, #3d6b4f), #2c5039);
}
.hc-pcard__tools {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 6px;
opacity: 0;
transform: translateX(6px);
transition: opacity 0.28s ease, transform 0.28s ease;
}
.hc-pcard:hover .hc-pcard__tools,
.hc-pcard:focus-within .hc-pcard__tools {
opacity: 1;
transform: none;
}
.hc-pcard__tool {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
cursor: pointer;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.hc-pcard__tool:hover {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border-color: var(--hc-ink, #1a1714);
transform: scale(1.08);
}
.hc-pcard__tool.is-active {
background: #c0392b;
color: var(--hc-paper, #ffffff);
border-color: #c0392b;
}
.hc-pcard__tool--fav.is-active {
background: #c0392b;
}
.hc-pcard__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px 18px;
flex: 1 1 auto;
}
.hc-pcard__series {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
line-height: 1.4;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
margin-bottom: 2px;
}
.hc-pcard__series code {
font: inherit;
font-weight: 500;
background: none;
padding: 0;
letter-spacing: 0.04em;
text-transform: none;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.hc-pcard__title {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 17px;
font-weight: 500;
line-height: 1.22;
letter-spacing: -0.005em;
color: var(--hc-ink, #1a1714);
text-decoration: none;
min-height: 2.5em;
margin: 2px 0 6px;
transition: color 0.18s ease;
}
.hc-pcard:hover .hc-pcard__title {
color: var(--hc-accent-dark, #5d4d3a);
}
.hc-pcard__title-link {
color: inherit;
text-decoration: none;
}
.hc-pcard__price-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 6px;
}
.hc-pcard__price-wrap {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.hc-pcard__price {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 26px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
color: var(--hc-ink, #1a1714);
}
.hc-pcard__price-old {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 12px;
line-height: 1;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
text-decoration: line-through;
text-decoration-color: rgba(201, 67, 58, 0.6);
}
.hc-pcard__atc,
.hc-pcard__buy,
.hc-pcard__add,
.hc-pcard__cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
padding: 0 16px;
background: var(--hc-ink, #1a1714);
border: 0;
border-radius: var(--hc-r-pill, 999px);
color: var(--hc-paper, #ffffff);
font: inherit;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: background 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}
.hc-pcard__atc:hover,
.hc-pcard__buy:hover,
.hc-pcard__add:hover,
.hc-pcard__cta:hover {
background: linear-gradient(135deg, #2a2018, #3d3024);
transform: translateY(-1px);
box-shadow: 0 8px 20px -8px rgba(40, 30, 15, 0.35);
}
.hc-pcard__atc:active,
.hc-pcard__buy:active {
transform: translateY(0);
}
.hc-pcard__buy--outline {
background: transparent;
color: var(--hc-ink, #1a1714);
border: 1px solid rgba(26, 23, 20, 0.25);
}
.hc-pcard__buy--outline:hover {
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
border-color: var(--hc-ink, #1a1714);
}
.hc-pcard__specs {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
margin: 2px 0 6px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.hc-pcard__specs span + span::before {
content: "·";
margin-right: 10px;
margin-left: -3px;
color: var(--hc-accent, #8b7355);
}
.hc-pcard__gallery {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
pointer-events: none;
}
.hc-pcard__gallery-seg {
flex: 1;
pointer-events: auto;
}
.hc-pcard__gallery-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: inline-flex;
gap: 5px;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.hc-pcard:hover .hc-pcard__gallery-dots { opacity: 1; }
.hc-pcard__gallery-dot {
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(20, 17, 14, 0.18);
border-radius: 50%;
transition: background 0.15s ease, transform 0.15s ease;
}
.hc-pcard__gallery-dot.is-active {
background: var(--hc-ink, #1a1714);
border-color: var(--hc-ink, #1a1714);
transform: scale(1.25);
}
.hc-pcard__media-link {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.hc-pcard__media-alt {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.32s ease;
pointer-events: none;
}
.hc-pcard__media-alt.is-active { opacity: 1; }
.hc-pcard__hover-props {
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 12px;
background: rgba(255, 252, 247, 0.5);
border-radius: 12px;
transition: max-height 0.32s ease, opacity 0.24s ease, padding 0.32s ease, margin 0.32s ease;
font-size: 12px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}
.hc-pcard:hover .hc-pcard__hover-props,
.hc-pcard:focus-within .hc-pcard__hover-props {
max-height: 240px;
opacity: 1;
padding: 10px 12px;
margin: 6px 0;
}
.hc-pcard__ph-wrap {
width: 100%;
height: 100%;
position: relative;
}
@media (hover: none) {
.hc-pcard__tools,
.hc-pcard__hover-props {
opacity: 1;
transform: none;
max-height: none;
}
.hc-pcard__hover-props {
padding: 10px 12px;
margin: 6px 0;
}
}
@media (max-width: 1024px) {
.hc-pcard__body { padding: 14px 14px 16px; }
.hc-pcard__title { font-size: 15px; }
.hc-pcard__price { font-size: 22px; }
}
/* Premium SVG-fallback styling (when product has no real photo, .hc-ph
placeholder shows). Wrap with kinetic gold background. */
.hc-pcard__media:has(.hc-ph),
.hc-pcard__media:has(.hc-pcard__svg-fallback),
.hc-pcard__ph-wrap {
background:
radial-gradient(circle at 30% 25%, rgba(255, 252, 247, 0.7), transparent 50%),
radial-gradient(circle at 75% 80%, rgba(184, 154, 111, 0.20), transparent 55%),
linear-gradient(160deg, #f7f3ea 0%, #efe8da 60%, #e3d9c4 100%);
}
.hc-pcard:hover .hc-ph {
filter: drop-shadow(0 10px 18px rgba(122, 101, 72, 0.32));
}
/* ---- folded from 191-pcard-mini.css ---- */
/* =================== pcard-mini.css =================== */
/* pcard-mini — compact product card variant used on home bestsellers rail,
* cart suggestions, and other tight 3-up grids. Distinct namespace from the
* main .pcard (the parent carries .pcard pcard-mini but the child
* elements use .pcard-mini__* exclusively). Strictly .pcard-mini /
* .pcard-mini__*. */
.pcard.pcard-mini {
display: flex;
flex-direction: column;
position: relative;
background: var(--hc-paper, #ffffff);
border: 0.5px solid rgba(141, 109, 71, 0.16);
border-radius: clamp(14px, 1.2vw, 18px);
text-decoration: none;
color: var(--hc-ink, #1a1714);
overflow: hidden;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 14px 32px -20px rgba(40, 30, 15, 0.16);
transition:
transform 0.30s cubic-bezier(0.2, 0.8, 0.3, 1),
border-color 0.22s ease,
box-shadow 0.30s ease;
isolation: isolate;
}
.pcard.pcard-mini:hover {
transform: translateY(-4px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow:
0 2px 4px rgba(40, 30, 15, 0.05),
0 28px 60px -22px rgba(184, 154, 111, 0.32);
}
.pcard-mini__frame {
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
}
/* ─── media area ─── */
.pcard-mini__media {
position: relative;
aspect-ratio: 1;
background: linear-gradient(135deg, #fbf8f1 0%, #f3ede0 100%);
overflow: hidden;
}
.pcard-mini__glow {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(360px 240px at 80% -10%, rgba(212, 184, 150, 0.18), transparent 60%);
opacity: 0.85;
transition: opacity 0.30s ease;
}
.pcard-mini__ph, .pcard-mini__img {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.pcard-mini__img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 12px;
transition: transform 0.40s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.pcard-mini__ph svg {
width: 56%;
height: 56%;
opacity: 0.92;
}
.pcard-mini__badges {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
max-width: calc(100% - 56px);
}
/* .pcard-badge styling lives in its own block file */
.pcard-mini__fav-icon {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.92);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 50%;
color: rgba(26, 23, 20, 0.42);
cursor: pointer;
transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.pcard-mini__fav-icon:hover {
background: var(--hc-paper, #ffffff);
color: #b85c5c;
transform: scale(1.08);
}
.pcard-mini__fav-icon svg {
width: 16px;
height: 16px;
fill: currentColor;
stroke: currentColor;
stroke-width: 1.2;
}
/* ─── body ─── */
.pcard-mini__body {
display: grid;
grid-template-rows: auto auto auto 1fr auto auto;
gap: 6px;
padding: 14px 14px 14px;
min-width: 0;
}
.pcard-mini__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.5));
}
.pcard-mini__sku {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.pcard-mini__title {
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--hc-ink, #1a1714);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pcard-mini__caption {
margin: 0;
font-size: 12.5px;
line-height: 1.45;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pcard-mini__props {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 2px;
}
.pcard-mini__props span {
display: inline-flex;
align-items: center;
padding: 3px 8px;
background: rgba(212, 184, 150, 0.12);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 6px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
color: var(--hc-accent-dark, #7a6548);
letter-spacing: 0.04em;
white-space: nowrap;
}
.pcard-mini__price-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
padding-top: 10px;
border-top: 0.5px dashed rgba(141, 109, 71, 0.18);
}
.pcard-mini__price {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 19px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
color: var(--hc-ink, #1a1714);
font-variant-numeric: tabular-nums;
}
.pcard-mini__price.is-request {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
}
.pcard-mini__old {
font-size: 13px;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.42));
text-decoration: line-through;
text-decoration-color: rgba(166, 162, 156, 0.55);
font-variant-numeric: tabular-nums;
}
.pcard-mini__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 8px;
padding: 9px 14px;
background: var(--hc-ink, #1a1714);
border: 0;
border-radius: 10px;
color: var(--hc-paper, #ffffff);
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
text-align: center;
transition: background 0.22s ease, transform 0.22s ease;
}
.pcard-mini__cta:hover {
background: #000000;
transform: translateY(-1px);
}
.pcard-mini__cta--ghost {
background: transparent;
color: var(--hc-ink, #1a1714);
border: 0.5px solid rgba(141, 109, 71, 0.32);
}
.pcard-mini__cta--ghost:hover {
background: rgba(212, 184, 150, 0.16);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
}
.pcard-mini__hoverband {
display: none;
}
.pcard.pcard-mini:hover .pcard-mini__glow {
opacity: 1;
}
.pcard.pcard-mini:hover .pcard-mini__img {
transform: scale(1.04);
}
/* ---- folded from 222-pcard-a.css ---- */
/* =================== pcard-a.css =================== */
/* Variant A owns only .pcard--a / .pcard-a__*. No shared card-variant selectors. */
.pcard--a {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
min-width: 0;
height: 100%;
overflow: hidden;
border: 1px solid rgba(141, 109, 71, 0.14);
border-radius: 18px;
background: var(--hc-paper, #ffffff);
box-shadow: 0 18px 46px -28px rgba(40, 30, 15, 0.22);
color: var(--hc-ink, #1a1714);
text-decoration: none;
isolation: isolate;
}
.pcard--a:hover {
border-color: rgba(185, 154, 111, 0.42);
box-shadow: 0 28px 64px -30px rgba(40, 30, 15, 0.28);
}
.pcard-a__media-wrap {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #fffdfa 0%, #f7efe1 100%);
border-bottom: 1px solid rgba(141, 109, 71, 0.10);
}
.pcard-a__media {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1;
width: 100%;
overflow: hidden;
color: inherit;
text-decoration: none;
}
.pcard-a__ph {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 12%;
}
.pcard-a__media picture,
.pcard-a__media img {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
padding: 12%;
}
.pcard-a__chips {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: calc(100% - 58px);
pointer-events: none;
}
.pcard-a__chip {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 5px 9px;
border-radius: var(--hc-r-pill, 999px);
background: linear-gradient(135deg, #2a2018, #4a3d2a);
color: #fff;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 8px 18px -10px rgba(26, 23, 20, 0.45);
}
.pcard-a__chip--sale {
background: linear-gradient(135deg, var(--hc-danger, #c9433a), #a82e26);
}
.pcard-a__rail {
position: absolute;
top: 10px;
right: 10px;
z-index: 4;
display: flex;
flex-direction: column;
gap: 6px;
width: 32px;
}
.pcard-a__body {
display: grid;
align-content: start;
gap: 10px;
min-width: 0;
padding: 18px;
}
.pcard-a__series,
.pcard-a__sku {
min-width: 0;
overflow: hidden;
color: rgba(26, 23, 20, 0.56);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
line-height: 1.3;
letter-spacing: 0.12em;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
}
.pcard-a__title {
display: -webkit-box;
overflow: hidden;
color: var(--hc-ink, #1a1714);
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(19px, 1.5vw, 24px);
font-weight: 500;
line-height: 1.1;
text-decoration: none;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.pcard-a__caption {
display: -webkit-box;
overflow: hidden;
margin: 0;
color: rgba(26, 23, 20, 0.66);
font-size: 14px;
line-height: 1.48;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.pcard-a__rule {
height: 1px;
background: linear-gradient(90deg, rgba(141, 109, 71, 0.20), transparent);
}
.pcard-a__props {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pcard-a__row {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: baseline;
}
.pcard-a__price {
color: var(--hc-ink, #1a1714);
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 28px;
font-weight: 500;
line-height: 1;
}
.pcard-a__price--sale {
color: var(--sf-red, #c7442e);
}
.pcard-a__price-old {
color: rgba(26, 23, 20, 0.42);
text-decoration: line-through;
}
.pcard-a__stock {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 5px 10px;
border: 1px solid rgba(47, 111, 76, 0.18);
border-radius: var(--hc-r-pill, 999px);
background: rgba(47, 111, 76, 0.08);
color: #2f6f4c;
font-size: 12px;
font-weight: 600;
}
.pcard-a__stock--low {
border-color: rgba(186, 134, 42, 0.22);
background: rgba(186, 134, 42, 0.10);
color: #8a641e;
}
.pcard-a__stock--out {
border-color: rgba(141, 109, 71, 0.18);
background: rgba(141, 109, 71, 0.08);
color: rgba(26, 23, 20, 0.58);
}
.pcard-a__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
padding: 13px 18px;
border: 0;
border-radius: 12px;
background: var(--hc-ink, #1a1714);
color: #fff;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 14px;
font-weight: 700;
text-align: center;
cursor: pointer;
box-shadow: 0 14px 28px -18px rgba(26, 23, 20, 0.55);
}
.pcard-a__cta--ghost {
border: 1px solid rgba(141, 109, 71, 0.22);
background: transparent;
color: var(--hc-ink, #1a1714);
box-shadow: none;
}
@media (max-width: 768px) {
.pcard-a__body {
padding: 16px;
}
}
/* ---- folded from 223-pcard-b.css ---- */
/* =================== pcard-b.css =================== */
/* Variant B owns only .pcard--b / .pcard-b__*. */
.pcard--b {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
min-width: 0;
height: 100%;
overflow: hidden;
padding-bottom: 16px;
border: 1px solid rgba(141, 109, 71, 0.14);
border-radius: 18px;
background: var(--hc-paper, #ffffff);
box-shadow: 0 18px 46px -28px rgba(40, 30, 15, 0.22);
color: var(--hc-ink, #1a1714);
text-decoration: none;
isolation: isolate;
}
.pcard--b:hover {
border-color: rgba(185, 154, 111, 0.42);
box-shadow: 0 28px 64px -30px rgba(40, 30, 15, 0.28);
}
.pcard-b__media-wrap {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #fffdfa 0%, #f7efe1 100%);
border-bottom: 1px solid rgba(141, 109, 71, 0.10);
}
.pcard-b__media {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1;
width: 100%;
overflow: hidden;
color: inherit;
text-decoration: none;
}
.pcard-b__ph {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 12%;
}
.pcard-b__media picture,
.pcard-b__media img {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
padding: 12%;
}
.pcard-b__badges {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: calc(100% - 58px);
pointer-events: none;
}
.pcard-b__badge {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 5px 9px;
border-radius: var(--hc-r-pill, 999px);
background: linear-gradient(135deg, #2a2018, #4a3d2a);
color: #fff;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 8px 18px -10px rgba(26, 23, 20, 0.45);
}
.pcard-b__badge--sale {
background: linear-gradient(135deg, var(--hc-danger, #c9433a), #a82e26);
}
.pcard-b__badge--new {
background: linear-gradient(135deg, #f6e0b7, #d4b886);
color: #2a2018;
}
.pcard-b__rail {
position: absolute;
top: 10px;
right: 10px;
z-index: 4;
display: flex;
flex-direction: column;
gap: 6px;
width: 32px;
}
.pcard-b__series,
.pcard-b__title,
.pcard-b__caption,
.pcard-b__props,
.pcard-b__bottom {
margin-left: 18px;
margin-right: 18px;
}
.pcard-b__series {
display: flex;
justify-content: space-between;
gap: 10px;
min-width: 0;
margin-top: 18px;
overflow: hidden;
color: rgba(26, 23, 20, 0.56);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
line-height: 1.3;
letter-spacing: 0.12em;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
}
.pcard-b__series code {
color: rgba(26, 23, 20, 0.52);
font-family: inherit;
}
.pcard-b__title {
display: -webkit-box;
overflow: hidden;
margin-top: 8px;
color: var(--hc-ink, #1a1714);
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(19px, 1.5vw, 24px);
font-weight: 500;
line-height: 1.1;
text-decoration: none;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.pcard-b__caption {
display: -webkit-box;
overflow: hidden;
margin-top: 10px;
margin-bottom: 0;
color: rgba(26, 23, 20, 0.66);
font-size: 14px;
line-height: 1.48;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.pcard-b__props {
display: grid;
gap: 6px;
margin-top: 12px;
}
.pcard-b__prop {
display: grid;
grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
gap: 8px;
align-items: center;
padding: 8px 0;
border-top: 1px dashed rgba(141, 109, 71, 0.14);
}
.pcard-b__prop span {
min-width: 0;
overflow: hidden;
color: rgba(26, 23, 20, 0.52);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
letter-spacing: 0.08em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.pcard-b__prop b {
min-width: 0;
overflow: hidden;
color: var(--hc-ink, #1a1714);
font-size: 13px;
font-weight: 700;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.pcard-b__bottom {
display: grid;
gap: 12px;
margin-top: 14px;
}
.pcard-b__price-row {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: baseline;
}
.pcard-b__price {
color: var(--hc-ink, #1a1714);
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 28px;
font-weight: 500;
line-height: 1;
}
.pcard-b__rating {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 5px 10px;
border: 1px solid rgba(47, 111, 76, 0.18);
border-radius: var(--hc-r-pill, 999px);
background: rgba(47, 111, 76, 0.08);
color: #2f6f4c;
font-size: 12px;
font-weight: 600;
}
.pcard-b__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
padding: 13px 18px;
border: 0;
border-radius: 12px;
background: var(--hc-ink, #1a1714);
color: #fff;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 14px;
font-weight: 700;
text-align: center;
cursor: pointer;
box-shadow: 0 14px 28px -18px rgba(26, 23, 20, 0.55);
}
@media (max-width: 768px) {
.pcard-b__series,
.pcard-b__title,
.pcard-b__caption,
.pcard-b__props,
.pcard-b__bottom {
margin-left: 16px;
margin-right: 16px;
}
}
/* ---- folded from 224-pcard-d.css ---- */
/* =================== pcard-d.css =================== */
/* Variant D owns only .pcard--d / .pcard-d__*. */
.pcard--d {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
min-width: 0;
height: 100%;
overflow: hidden;
border: 1px solid rgba(141, 109, 71, 0.14);
border-radius: 18px;
background: var(--hc-paper, #ffffff);
box-shadow: 0 18px 46px -28px rgba(40, 30, 15, 0.22);
color: var(--hc-ink, #1a1714);
text-decoration: none;
isolation: isolate;
}
.pcard--d:hover {
border-color: rgba(185, 154, 111, 0.42);
box-shadow: 0 28px 64px -30px rgba(40, 30, 15, 0.28);
}
.pcard-d__media-wrap {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #fffdfa 0%, #f7efe1 100%);
border-bottom: 1px solid rgba(141, 109, 71, 0.10);
}
.pcard-d__media {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1;
width: 100%;
overflow: hidden;
color: inherit;
text-decoration: none;
}
.pcard-d__ph {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 12%;
}
.pcard-d__media picture,
.pcard-d__media img {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
padding: 12%;
}
.pcard-d__pill-row {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: calc(100% - 58px);
pointer-events: none;
}
.pcard-d__pill {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 5px 9px;
border-radius: var(--hc-r-pill, 999px);
background: linear-gradient(135deg, #2a2018, #4a3d2a);
color: #fff;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 8px 18px -10px rgba(26, 23, 20, 0.45);
}
.pcard-d__pill--sale {
background: linear-gradient(135deg, var(--hc-danger, #c9433a), #a82e26);
}
.pcard-d__rail {
position: absolute;
top: 10px;
right: 10px;
z-index: 4;
display: flex;
flex-direction: column;
gap: 6px;
width: 32px;
}
.pcard-d__body {
display: grid;
align-content: start;
gap: 10px;
min-width: 0;
padding: 18px;
}
.pcard-d__top-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
min-width: 0;
}
.pcard-d__series,
.pcard-d__sku {
min-width: 0;
overflow: hidden;
color: rgba(26, 23, 20, 0.56);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
line-height: 1.3;
letter-spacing: 0.12em;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
}
.pcard-d__title {
display: -webkit-box;
overflow: hidden;
color: var(--hc-ink, #1a1714);
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(19px, 1.5vw, 24px);
font-weight: 500;
line-height: 1.1;
text-decoration: none;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.pcard-d__caption {
display: -webkit-box;
overflow: hidden;
margin: 0;
color: rgba(26, 23, 20, 0.66);
font-size: 14px;
line-height: 1.48;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.pcard-d__tag-bar {
display: grid;
gap: 6px;
}
.pcard-d__tag {
display: grid;
grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
gap: 8px;
align-items: center;
padding: 8px 0;
border-top: 1px dashed rgba(141, 109, 71, 0.14);
}
.pcard-d__tag-k {
min-width: 0;
overflow: hidden;
color: rgba(26, 23, 20, 0.52);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
letter-spacing: 0.08em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.pcard-d__tag-v {
min-width: 0;
overflow: hidden;
color: var(--hc-ink, #1a1714);
font-size: 13px;
font-weight: 700;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.pcard-d__bottom {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: baseline;
}
.pcard-d__price {
color: var(--hc-ink, #1a1714);
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 28px;
font-weight: 500;
line-height: 1;
}
.pcard-d__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
padding: 13px 18px;
border: 0;
border-radius: 12px;
background: var(--hc-ink, #1a1714);
color: #fff;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 14px;
font-weight: 700;
text-align: center;
cursor: pointer;
box-shadow: 0 14px 28px -18px rgba(26, 23, 20, 0.55);
}
@media (max-width: 768px) {
.pcard-d__body {
padding: 16px;
}
}
/* ---- folded from 226-pcard-type-actions.css ---- */
/* Product-card secondary actions. Owns only .pcard-type-actions*. */
.pcard-type-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
.pcard-type-actions__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 28px;
padding: 6px 9px;
border: 1px solid rgba(141, 109, 71, 0.18);
border-radius: var(--hc-r-pill, 999px);
background: rgba(255, 255, 255, 0.72);
color: rgba(26, 23, 20, 0.68);
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 12px;
font-weight: 650;
line-height: 1.15;
text-align: center;
cursor: pointer;
transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.pcard-type-actions__btn:hover,
.pcard-type-actions__btn:focus-visible {
border-color: rgba(26, 23, 20, 0.28);
background: var(--hc-ink, #1a1714);
color: #fff;
}
.pcard--b .pcard-type-actions {
margin-left: 18px;
margin-right: 18px;
}
.pcard--c .pcard-type-actions {
margin-top: 2px;
}
.pcard--d .pcard-type-actions {
margin-top: 2px;
}
/* ---- folded from 227-pcard-type-modes.css ---- */
/* Product-card type profile accents. Scoped to .pcard--type-* and pcard type helpers only. */
.pcard-type-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.pcard-type-badge,
.pcard-mini__type {
display: inline-flex;
align-items: center;
max-width: 100%;
min-width: 0;
min-height: 24px;
padding: 5px 9px;
border: 1px solid rgba(141, 109, 71, 0.16);
border-radius: var(--hc-r-pill, 999px);
background: rgba(246, 241, 232, 0.86);
color: rgba(26, 23, 20, 0.64);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 750;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.pcard--type-material .pcard-type-badge,
.pcard--type-material .pcard-mini__type {
border-color: rgba(99, 126, 92, 0.24);
background: rgba(232, 239, 226, 0.86);
color: #4d6944;
}
.pcard--type-furniture .pcard-type-badge,
.pcard--type-furniture .pcard-mini__type {
border-color: rgba(137, 94, 126, 0.22);
background: rgba(244, 232, 239, 0.88);
color: #744c68;
}
.pcard--type-lighting .pcard-type-badge,
.pcard--type-lighting .pcard-mini__type {
border-color: rgba(189, 143, 51, 0.24);
background: rgba(252, 244, 219, 0.9);
color: #815f16;
}
.pcard--type-service .pcard-type-badge,
.pcard--type-service .pcard-mini__type {
border-color: rgba(82, 105, 142, 0.22);
background: rgba(230, 237, 246, 0.88);
color: #455f86;
}
.pcard--b .pcard-type-badge {
flex: 0 1 auto;
max-width: 42%;
overflow: hidden;
text-overflow: ellipsis;
}
.pcard--d[class*="pcard--type-"] .pcard-d__top-row {
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: start;
}
.pcard-mini__type {
justify-self: start;
min-height: 20px;
padding: 4px 7px;
font-size: 9px;
}
/* === css/blocks/206-premium-empty.css === */
/* =================== premium-empty.css =================== */
.premium-empty {
position:relative;
display:grid;
grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
gap: clamp(24px, 4vw, 56px);
align-items:center;
padding: clamp(28px, 4vw, 48px) clamp(24px, 3.5vw, 56px);
margin: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 64px);
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, #fbf8f1 100%);
border: 1px solid rgba(141, 109, 71, 0.18);
border-radius: 24px;
box-shadow: 0 18px 50px -32px rgba(27, 20, 13, 0.22), 0 1px 0 rgba(255,255,255,.9);
overflow: hidden;
}
.premium-empty::before {
content:"";
position:absolute;
inset:0;
background: radial-gradient(80% 60% at 18% 30%, rgba(212, 184, 150, 0.18), transparent 60%),
radial-gradient(60% 50% at 88% 80%, rgba(141, 109, 71, 0.10), transparent 65%);
pointer-events:none;
z-index:0;
}
.premium-empty__visual {
position:relative;
width:100%;
aspect-ratio: 1 / 1;
max-width: 280px;
margin-inline: auto;
border-radius: 20px;
background: radial-gradient(circle at 50% 50%, #fdfbf4 0%, #f3eadb 70%, #e9dec8 100%);
border: 1px solid rgba(141, 109, 71, 0.16);
display:grid;
place-items:center;
z-index:1;
overflow:hidden;
}
.premium-empty__orb {
position:relative;
width: 56%;
height: 56%;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--hc-paper, #ffffff) 0%, #efe3cb 60%, var(--hc-gold, #d4b896) 100%);
box-shadow: inset 0 4px 16px rgba(255,255,255,.8), 0 8px 24px -8px rgba(141, 109, 71, .35);
}
.premium-empty__orb::after {
content:"";
position:absolute;
inset: 22%;
border-radius:50%;
border: 1.5px solid rgba(26, 23, 20, 0.32);
}
.premium-empty__rail {
position:absolute;
border: 1px dashed rgba(141, 109, 71, 0.4);
border-radius:50%;
pointer-events:none;
}
.premium-empty__rail--a { inset: 12%; }
.premium-empty__rail--b { inset: 4%; opacity:.6; }
.premium-empty__dot {
position:absolute;
width:8px; height:8px; border-radius:50%;
background: var(--hc-accent, #8b7355);
box-shadow: 0 0 0 4px rgba(212,184,150,.25);
}
.premium-empty__dot--a { top: 8%; left: 50%; transform: translateX(-50%); }
.premium-empty__dot--b { bottom: 12%; right: 12%; }
.premium-empty__panel {
position:absolute;
width: 36%;
height: 56%;
border-radius: 12px;
border: 1.5px solid rgba(141, 109, 71, 0.4);
background: linear-gradient(180deg, var(--hc-paper, #ffffff), #f7efdc);
box-shadow: 0 12px 28px -16px rgba(27, 20, 13, 0.2);
}
.premium-empty__panel--left {
top: 22%; left: 14%;
transform: rotate(-3deg);
}
.premium-empty__panel--right {
top: 22%; right: 14%;
transform: rotate(3deg);
}
.premium-empty__bridge {
position:absolute;
top: 50%; left: 30%; right: 30%;
height: 2px;
background: linear-gradient(90deg, var(--hc-accent, #8b7355), var(--hc-gold, #d4b896));
border-radius: 2px;
z-index: 2;
}
.premium-empty__bridge::before, .premium-empty__bridge::after {
content:"";
position:absolute;
top: 50%;
width: 10px; height: 10px;
border-radius:50%;
background: var(--hc-accent, #8b7355);
transform: translateY(-50%);
}
.premium-empty__bridge::before { left: -6px; }
.premium-empty__bridge::after { right: -6px; }
.premium-empty__content {
position:relative;
z-index:2;
display:flex;
flex-direction:column;
gap: clamp(12px, 1.5vw, 18px);
min-width: 0;
}
.premium-empty__kicker {
display:inline-block;
font: 500 11px/1 var(--hc-mono, 'JetBrains Mono', monospace);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--hc-accent-dark, #5d4d3a);
padding: 6px 12px;
background: rgba(212, 184, 150, 0.18);
border-radius: 9999px;
align-self: start;
}
.premium-empty__title {
margin: 0;
font: 500 clamp(28px, 3.4vw, 40px)/1.1 var(--hc-serif, 'Playfair Display', Georgia, serif);
letter-spacing: -0.01em;
color: var(--hc-ink, #1a1714);
}
.premium-empty__text {
margin: 0;
font-size: clamp(14px, 1vw, 16px);
line-height: 1.6;
color: var(--hc-ink-soft, rgba(26, 23, 20, .7));
max-width: 56ch;
}
.premium-empty__actions {
display:flex;
flex-wrap:wrap;
gap: 12px;
margin-top: 8px;
}
/* Inline how-to-add steps (used on --compare, --favorites empty states) */
.premium-empty__steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin: 6px 0 4px;
padding: 14px 16px;
background: rgba(212, 184, 150, 0.10);
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.42));
border-radius: 12px;
}
.premium-empty__step {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
align-items: start;
}
.premium-empty__step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
border-radius: 50%;
font: 700 11.5px/1 var(--hc-mono, "JetBrains Mono", monospace);
letter-spacing: 0.04em;
box-shadow: 0 2px 6px -1px rgba(184, 154, 111, 0.42);
flex-shrink: 0;
}
.premium-empty__step-body strong {
display: block;
font: 600 13px/1.2 var(--hc-sans, "Outfit", sans-serif);
color: var(--hc-ink, #1a1714);
}
.premium-empty__step-body span {
display: block;
margin-top: 3px;
font: 500 11.5px/1.45 var(--hc-sans, "Outfit", sans-serif);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}
.premium-empty__notes {
position:relative;
z-index:2;
grid-column: 1 / -1;
display:flex;
flex-wrap:wrap;
gap: 8px;
margin-top: clamp(16px, 2vw, 24px);
padding-top: clamp(16px, 2vw, 24px);
border-top: 1px dashed rgba(141, 109, 71, 0.22);
}
.premium-empty__notes span {
display:inline-flex;
align-items:center;
gap:6px;
font: 500 12px/1 var(--hc-mono, 'JetBrains Mono', monospace);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hc-accent-dark, #5d4d3a);
padding: 8px 14px;
background: var(--hc-paper, #ffffff);
border: 1px solid rgba(141, 109, 71, 0.22);
border-radius: 9999px;
}
.premium-empty__notes span::before {
content:"";
width: 14px;
height: 14px;
background-color: var(--hc-accent-dark, #5d4d3a);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
@media (max-width: 768px) {
.premium-empty {
grid-template-columns: 1fr;
text-align: center;
}
.premium-empty__visual { max-width: 220px; }
.premium-empty__content { align-items: center; }
.premium-empty__kicker { align-self: center; }
.premium-empty__text { margin-inline: auto; }
.premium-empty__notes { justify-content: center; }
}
/* === css/blocks/207-premium-grid-2.css === */
/* =================== premium-grid-2.css =================== */
/* premium-grid-2 — 2-column auto-fit grid for stacked premium-surface cards
* on /about, /delivery and other content pages. Forms the visual rhythm of
* the page, so grid + gap must apply on desktop, not only mobile.
* Strictly .premium-grid-2 / .premium-grid-2__*. */
.premium-grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: clamp(20px, 2vw, 32px);
}
/* === css/blocks/208-premium-kpis.css === */
/* =================== premium-kpis.css =================== */
/* premium-kpis — stat-row block: serif metric + uppercase mono label.
* Used on /about ("Почему выбирают нас"), /delivery ("Доставим по России")
* and other content cards. Adapts to ink context (premium-surface--highlight)
* with cream metric + gold label so values stay visible on dark cards.
* Strictly .premium-kpis / .premium-kpis__*. */
.premium-kpis {
display: flex;
flex-wrap: wrap;
gap: clamp(20px, 2.4vw, 32px);
margin: 18px 0;
padding: 18px 0;
border-top: 0.5px solid rgba(180, 151, 115, 0.18);
border-bottom: 0.5px solid rgba(180, 151, 115, 0.18);
}
.premium-kpis > div {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
position: relative;
padding-bottom: 4px;
}
.premium-kpis strong {
display: block;
margin: 0;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(26px, 2.6vw, 36px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.015em;
color: var(--hc-ink, #1a1714);
font-variant-numeric: tabular-nums;
}
.premium-kpis span {
display: block;
margin-top: 2px;
padding-top: 8px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
position: relative;
}
.premium-kpis span::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 1.5px;
background: linear-gradient(90deg, var(--hc-gold-1, var(--hc-gold, #d4b896)), var(--hc-gold-2, #b89a6f));
border-radius: 999px;
}
/* Adaptation when KPIs live inside an ink-tinted card (premium-surface--highlight) */
.premium-surface--highlight .premium-kpis {
border-top-color: rgba(212, 184, 150, 0.22);
border-bottom-color: rgba(212, 184, 150, 0.22);
}
.premium-surface--highlight .premium-kpis strong {
color: #fffdf8;
}
.premium-surface--highlight .premium-kpis span {
color: rgba(252, 248, 240, 0.62);
}
/* === css/blocks/209-premium-surface.css === */
/* =================== premium-surface.css =================== */
/* premium-surface — premium content card (used on /about, /delivery, content
* pages). Adds depth via layered shadow + gold-tinted top-rule accent so cards
* read as objects on the cream page background instead of blending in.
* Strictly .premium-surface / .premium-surface--*. */
.premium-surface {
position: relative;
padding: clamp(28px, 3vw, 44px) clamp(24px, 2.4vw, 40px);
background: var(--hc-paper, #ffffff);
border-radius: clamp(16px, 1.4vw, 22px);
border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.22));
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.04),
0 22px 50px -28px rgba(40, 30, 15, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.32s ease;
isolation: isolate;
overflow: hidden;
}
.premium-surface::before {
content: "";
position: absolute;
top: 0;
left: clamp(24px, 2.4vw, 40px);
right: clamp(24px, 2.4vw, 40px);
height: 1px;
background: linear-gradient(
90deg,
transparent 0,
var(--hc-gold-1, var(--hc-gold, #d4b896)) 24%,
var(--hc-gold-2, #b89a6f) 50%,
var(--hc-gold-1, var(--hc-gold, #d4b896)) 76%,
transparent 100%
);
opacity: 0.62;
pointer-events: none;
}
.premium-surface::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(620px 360px at 100% -10%, rgba(212, 184, 150, 0.14), transparent 62%);
}
.premium-surface:hover {
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow:
0 2px 4px rgba(40, 30, 15, 0.05),
0 28px 62px -22px rgba(184, 154, 111, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.premium-surface > div > strong, .premium-surface > div > b {
display: block;
margin-bottom: 2px;
}
/* Highlight variant — used to break monotony in stacked-card sections.
* Inverted: ink-tinted card with cream content, gold accents stay. */
.premium-surface--highlight {
background:
radial-gradient(900px 460px at 0% 0%, rgba(212, 184, 150, 0.18), transparent 60%),
linear-gradient(160deg, #1f1a16 0%, #2a2018 100%);
border: 0.5px solid rgba(212, 184, 150, 0.32);
color: rgba(252, 248, 240, 0.92);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.12),
0 32px 70px -26px rgba(20, 14, 8, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.premium-surface--highlight::before {
opacity: 0.78;
}
.premium-surface--highlight::after {
background: radial-gradient(700px 380px at 100% 110%, rgba(212, 184, 150, 0.18), transparent 60%);
}
.premium-surface--highlight h1,
.premium-surface--highlight h2,
.premium-surface--highlight h3,
.premium-surface--highlight h4,
.premium-surface--highlight .t-title {
color: #fffdf8;
}
.premium-surface--highlight p {
color: rgba(252, 248, 240, 0.72);
}
.premium-surface--highlight [class*="eyebrow"] {
color: var(--hc-gold-1, var(--hc-gold, #d4b896));
}
.premium-surface--highlight:hover {
border-color: rgba(212, 184, 150, 0.55);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.16),
0 40px 80px -22px rgba(20, 14, 8, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* === css/blocks/212-share-cart-modal.css === */
/* =================== share-cart-modal.css =================== */
.share-cart-modal__panel {max-width: 760px}
@media(max-width:1024px) {
.share-cart-modal__body {padding: 20px 4px; display: grid; gap: 18px}
.share-cart-modal__tabs {display: flex; gap: 6px; border-bottom: 0.5px solid rgba(180, 151, 115, 0.22); margin-bottom: 4px}
.share-cart-modal__tab {padding: 8px 14px; background: transparent; border: 0; font-size: 13px; color: rgba(26, 23, 20, 0.6); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px}
.share-cart-modal__tab.is-active {color: var(--hc-ink, #1a1714); border-bottom-color: var(--hc-accent, #8b7355)}
.share-cart-modal__url {display: flex; gap: 8px; padding: 12px 14px; background: rgba(246, 239, 226, 0.55); border-radius: 10px; font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 12px; word-break: break-all}
.share-cart-modal__qr {display: flex; justify-content: center; padding: 16px; background: var(--hc-paper, #ffffff); border: 0.5px solid rgba(180, 151, 115, 0.18); border-radius: 10px}
.share-cart-modal__social {display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px}
}
/* === css/blocks/213-skip-nav.css === */
/* =================== skip-nav.css =================== */
.skip-nav {position: fixed; left: 14px; top: 10px; z-index: calc(var(--hc-z-header) + 6); display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--hc-gold-border); background: rgba(26,23,20,.96); color: var(--hc-paper, #ffffff); font-size: 12px; font-weight: 600; letter-spacing: .02em; box-shadow: 0 10px 26px rgba(26,23,20,.28); transform: translateY(-140%); opacity: 0; pointer-events: none; transition: transform .18s ease,opacity .18s ease}
.skip-nav:focus, .skip-nav:focus-visible {transform: translateY(0); opacity: 1; pointer-events: auto; outline: none; color: var(--hc-paper, #ffffff)}
/* === css/blocks/214-t-eyebrow.css === */
/* =================== t-eyebrow.css =================== */
.lead-block__body .t-eyebrow {font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hc-accent-dark, #5d4d3a); font-weight: 500; display: block; margin-bottom: 12px}
.t-eyebrow {display: inline-block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(26, 23, 20, 0.55); margin-bottom: 8px}
/* === css/blocks/215-t-label.css === */
/* =================== t-label.css =================== */
.t-label {display: inline-block; font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-accent-dark, #7a6548); margin-bottom: 10px}
@media(max-width:1024px) {
.premium-surface .t-label, .premium-surface .t-eyebrow {font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hc-accent-dark, #5d4d3a); font-weight: 500; display: block; margin-bottom: 12px}
}
/* === css/blocks/216-t-title.css === */
/* =================== t-title.css =================== */
.t-title {font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-size: clamp(24px, 3vw, 36px); font-weight: 400; line-height: 1.15; color: var(--hc-ink, #1a1714); margin: 0 0 clamp(20px, 2.4vw, 28px)}
@media(max-width:1024px) {
.premium-surface .t-title {font-family: 'Playfair Display', Georgia, serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; line-height: 1.15; margin: 0 0 16px; color: var(--hc-ink, #1a1714)}
.t-title {margin-bottom: 24px}
.page-favorites .t-title {font-family: 'Playfair Display', Georgia, serif; font-size: clamp(32px, 4vw, 48px); font-weight: 400; line-height: 1.05; margin: 0 0 12px}
}
/* === css/blocks/217-tab.css === */
/* =================== tab.css =================== */
.tab {
padding: var(--sp-12) var(--sp-16);
border: none;
background: transparent;
cursor: pointer;
font-size: var(--fs-15);
font-weight: var(--fw-500);
color: var(--c-text-secondary);
position: relative;
white-space: nowrap;
transition: color var(--tr-fast);
will-change: color;
}
.tab:hover {
color: var(--c-text);
}
.tab.active {
color: var(--c-primary);
font-weight: var(--fw-600);
}
.tab.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%);
animation: slideIn var(--tr-base);
}
/* === css/blocks/218-tile-badge.css === */
/* =================== tile-badge.css =================== */
.hc-pcard:hover .tile-badge, .iconcard:hover .tile-badge, .delivery-stats__item:hover .tile-badge {transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 18px rgba(27, 20, 13, 0.10); background: linear-gradient(180deg, rgba(212, 184, 150, 0.32), rgba(212, 184, 150, 0.16))}
.hc-pcard:hover .tile-badge {opacity: 1; transform: translateY(-3px) scale(1.06)}
.iconcard .tile-badge {display: none}
.delivery-stats__item .tile-badge {position: absolute; top: 50%; right: 16px; left: auto; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.42)); display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 2px 8px rgba(139, 115, 85, 0.10)}
.delivery-stats__item .tile-badge .tile-badge__ring {opacity: 0.25; stroke: currentColor}
.delivery-stats__item .tile-badge .tile-badge__shape {stroke: currentColor; opacity: 0.85; animation: none}
/* === css/blocks/219-tracking.css === */
/* =================== tracking.css =================== */
.tracking, .tracking-premium {padding: clamp(28px, 4vw, 56px) 0}
.tracking__items {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 24px 0}
.tracking__result {margin: 24px 0; padding: 20px; background: rgba(255, 252, 247, 0.82); border: 0.5px solid rgba(180, 151, 115, 0.22); border-radius: 14px}
/* ─── folded from tracking-premium.css ─── */
.tracking-premium__grid {display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); align-items: start; margin-top: clamp(20px, 2.6vw, 32px)}
/* === css/blocks/220-news-block.css === */
/* =================== news-block.css =================== */
.news-block {
background: var(--hc-bg, #f7f2e8);
}
.news-block .hc-sec-h {
align-items: end;
margin-bottom: clamp(20px, 2.4vw, 34px);
}
.news-block .hc-sec-h__title {
display: grid;
gap: 6px;
min-width: 0;
}
.news-block .hc-sec-h__title h2,
.news-block__aside h2 {
margin: 0;
color: var(--sf-ink, #1a1714);
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(34px, 3vw, 52px);
font-weight: 500;
line-height: 0.98;
}
.news-grid,
.news-block__main {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 1.5vw, 24px);
align-items: stretch;
}
.news-block__split {
display: grid;
grid-template-columns: minmax(240px, 0.38fr) minmax(0, 1fr);
gap: clamp(22px, 3vw, 46px);
align-items: start;
}
.news-block__aside {
display: grid;
gap: 14px;
align-content: start;
position: sticky;
top: 96px;
}
.news-item {
display: grid;
grid-template-rows: auto auto 1fr;
gap: 12px;
min-width: 0;
min-height: 0;
padding: 0 0 18px;
overflow: hidden;
border-radius: var(--sf-radius-xl, 24px);
border: 1px solid var(--sf-line, rgba(54, 45, 34, 0.14));
background: rgba(255, 252, 247, 0.92);
box-shadow: var(--sf-shadow, 0 18px 50px rgba(35, 28, 20, 0.08));
}
.news-item__cover-link {
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
min-height: 0;
background: linear-gradient(135deg, #f2eadb 0%, #e4d4bd 100%);
}
.news-item__cover,
.news-item__placeholder {
display: block;
width: 100%;
height: 100%;
}
.news-item__cover {
object-fit: cover;
object-position: center;
}
.news-item__placeholder {
position: relative;
background:
radial-gradient(circle at 22% 78%, rgba(184, 154, 112, 0.12) 0 20%, transparent 21%),
radial-gradient(circle at 82% 18%, rgba(120, 137, 115, 0.13) 0 18%, transparent 19%),
linear-gradient(135deg, #fbf5e9 0%, #dfcbb1 100%);
}
.news-item__placeholder::before {
content: "HOLZCOM BLUM";
position: absolute;
left: 26px;
top: 24px;
color: rgba(122, 94, 61, 0.8);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.34em;
}
.news-item__date,
.news-item h3,
.news-item p {
margin-left: 22px;
margin-right: 22px;
}
.news-item__date {
align-self: end;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.58));
font-size: 12px;
line-height: 1;
}
.news-item h3 {
margin-top: 0;
margin-bottom: 0;
color: var(--sf-ink, #1a1714);
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(19px, 1.45vw, 26px);
font-weight: 500;
line-height: 1.08;
}
.news-item h3 a {
color: inherit;
text-decoration: none;
}
.news-item h3 a:hover {
color: var(--sf-gold, #b9945f);
}
.news-item p {
margin-top: 0;
margin-bottom: 0;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.66));
font-size: 15px;
line-height: 1.55;
}
.news-block--t2 .news-block__main,
.news-block--t4 .news-block__main {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.news-block--t4 .news-item {
padding-top: 22px;
}
.news-block--t5 .news-item {
padding-top: 22px;
}
@media (max-width: 1024px) {
.news-grid,
.news-block__main,
.news-block--t2 .news-block__main,
.news-block--t4 .news-block__main {
grid-template-columns: 1fr;
}
.news-block__split {
grid-template-columns: 1fr;
}
.news-block__aside {
position: static;
}
}
/* === css/blocks/221-hc-qv.css === */
/* =================== hc-qv.css =================== */
body.hc-modal-open {
overflow: hidden;
}
.hc-qv {
position: fixed;
inset: 0;
z-index: 1200;
display: grid;
place-items: center;
padding: clamp(18px, 3vw, 44px);
background: rgba(26, 23, 20, 0.48);
backdrop-filter: blur(10px);
}
.hc-qv__panel {
position: relative;
width: min(980px, 100%);
max-height: calc(100dvh - 64px);
overflow: hidden;
border-radius: var(--sf-radius-xl, 24px);
border: 1px solid rgba(224, 210, 190, 0.9);
background: var(--hc-paper, #fffaf2);
box-shadow: 0 34px 90px rgba(26, 23, 20, 0.28);
}
.hc-qv__close {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid rgba(54, 45, 34, 0.14);
border-radius: 50%;
background: rgba(255, 252, 247, 0.92);
color: var(--sf-ink, #1a1714);
cursor: pointer;
box-shadow: 0 12px 28px rgba(26, 23, 20, 0.12);
}
.hc-qv__close:hover {
background: #fff;
}
.hc-qv__body {
display: grid;
grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1fr);
gap: clamp(20px, 2.4vw, 34px);
max-height: inherit;
padding: clamp(22px, 2.8vw, 42px);
}
.hc-qv__gallery {
position: relative;
display: grid;
place-items: center;
align-self: stretch;
width: 100%;
max-width: 100%;
min-height: 0;
aspect-ratio: 1 / 1;
max-height: 570px;
overflow: hidden;
border-radius: 22px;
background:
radial-gradient(circle at 20% 80%, rgba(184, 154, 112, 0.14) 0 20%, transparent 21%),
radial-gradient(circle at 86% 16%, rgba(120, 137, 115, 0.14) 0 19%, transparent 20%),
linear-gradient(145deg, #fbf6ea 0%, #eadbc4 100%);
}
.hc-qv__img {
display: block;
width: min(82%, 300px);
max-width: 100%;
max-height: 360px;
object-fit: contain;
filter: drop-shadow(0 20px 34px rgba(26, 23, 20, 0.12));
}
.hc-qv__placeholder {
display: grid;
place-items: center;
width: min(74%, 280px);
aspect-ratio: 1 / 1;
}
.hc-qv__placeholder .hc-ph {
display: block;
width: 100%;
height: 100%;
filter: drop-shadow(0 18px 30px rgba(26, 23, 20, 0.1));
}
.hc-qv__badge {
position: absolute;
top: 18px;
left: 18px;
}
.hc-qv__info {
display: grid;
align-content: start;
gap: 12px;
min-width: 0;
max-height: calc(100dvh - 148px);
overflow: auto;
padding-right: 10px;
}
.hc-qv__title {
margin: 0;
color: var(--sf-ink, #1a1714);
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(28px, 2.35vw, 40px);
font-weight: 500;
line-height: 1.02;
}
.hc-qv__price {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
align-items: baseline;
}
.hc-qv__old {
color: rgba(26, 23, 20, 0.48);
text-decoration: line-through;
font-size: 16px;
}
.hc-qv__cur {
color: var(--sf-red, #c7442e);
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(32px, 3vw, 46px);
font-weight: 500;
line-height: 1;
}
.hc-qv__cur--ask {
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.62));
font-size: 24px;
font-style: italic;
font-weight: 400;
}
.hc-qv__desc {
margin: 0;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.68));
font-size: 15px;
line-height: 1.5;
}
.hc-qv__specs {
display: grid;
gap: 0;
margin: 0;
}
.hc-qv__spec {
display: grid;
grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed rgba(54, 45, 34, 0.14);
}
.hc-qv__spec dt {
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.58));
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.hc-qv__spec dd {
margin: 0;
color: var(--sf-ink, #1a1714);
font-weight: 600;
}
.hc-qv__assurance {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
}
.hc-qv__buy {
display: grid;
gap: 10px;
}
.hc-qv__actions {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: stretch;
}
.hc-qv__secondary {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.hc-qv__secondary .hc-btn {
min-width: 0;
}
.hc-qv__ship {
align-self: start;
}
.hc-qv__oneclick {
display: grid;
gap: 10px;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(54, 45, 34, 0.12);
background: rgba(255, 255, 255, 0.74);
}
.hc-qv__msg {
min-height: 0;
}
@media (max-width: 768px) {
.hc-qv {
align-items: end;
padding: 10px;
}
.hc-qv__panel {
width: 100%;
max-height: calc(100dvh - 20px);
border-radius: 22px 22px 12px 12px;
}
.hc-qv__body {
grid-template-columns: 1fr;
gap: 20px;
padding: 18px;
overflow: auto;
}
.hc-qv__gallery {
min-height: 180px;
max-height: none;
aspect-ratio: 16 / 10;
}
.hc-qv__placeholder {
width: min(54%, 170px);
}
.hc-qv__info {
max-height: none;
overflow: visible;
padding-right: 0;
}
.hc-qv__title {
font-size: clamp(25px, 8vw, 31px);
}
.hc-qv__specs {
order: 7;
}
.hc-qv__assurance {
order: 5;
}
.hc-qv__buy {
order: 6;
}
.hc-qv__ship {
order: 8;
}
.hc-qv__actions {
grid-template-columns: 1fr;
}
.hc-qv__secondary {
grid-template-columns: 1fr;
}
.hc-qv__spec {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* ─── Sprint14.2: quickview premium redesign ─── */
/* Override the bland modal layout with premium 2-col + gold accents */
.hc-qv__dialog,
.hc-qv,
[class*="quickview"][class*="__dialog"],
[role="dialog"][class*="qv"] {
max-width: 980px;
border-radius: 18px;
overflow: hidden;
box-shadow:
0 4px 12px rgba(40, 30, 15, 0.08),
0 48px 120px -32px rgba(40, 30, 15, 0.42);
}
.hc-qv__body,
[class*="quickview"][class*="__body"] {
display: grid;
grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
gap: 0;
background: var(--hc-paper, #ffffff);
}
.hc-qv__media,
[class*="quickview"][class*="__media"] {
position: relative;
aspect-ratio: 1 / 1;
background:
radial-gradient(circle at 30% 30%, rgba(212, 184, 150, 0.12), transparent 55%),
linear-gradient(135deg, var(--hc-paper-2, #fbf8f3) 0%, var(--hc-paper-3, #f2efe9) 100%);
padding: 28px;
isolation: isolate;
}
.hc-qv__media::before {
content: "";
position: absolute;
inset: 24px;
border: 0.5px dashed rgba(141, 109, 71, 0.20);
border-radius: 50%;
z-index: 0;
animation: hc-qv-rot 60s linear infinite;
}
@keyframes hc-qv-rot {
to { transform: rotate(360deg); }
}
.hc-qv__media img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 16px 32px rgba(40, 30, 15, 0.18));
}
.hc-qv__info,
[class*="quickview"][class*="__info"] {
padding: 36px 36px 32px;
display: flex;
flex-direction: column;
gap: 14px;
}
.hc-qv__series,
.hc-qv__brand,
[class*="qv"][class*="__brand"] {
display: inline-block;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
padding: 5px 11px;
background: rgba(212, 184, 150, 0.12);
border: 0.5px solid rgba(141, 109, 71, 0.20);
border-radius: 9999px;
align-self: flex-start;
}
.hc-qv__title,
[class*="qv"][class*="__title"] {
font-family: var(--hc-serif, "Cormorant Garamond", serif);
font-size: 26px;
font-weight: 500;
line-height: 1.18;
color: var(--hc-ink, #1a1714);
margin: 0;
letter-spacing: -0.01em;
}
.hc-qv__sku,
[class*="qv"][class*="__sku"] {
font-family: var(--hc-mono, monospace);
font-size: 12px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.55));
letter-spacing: 0.05em;
}
.hc-qv__price,
[class*="qv"][class*="__price"] {
font-family: var(--hc-serif);
font-size: 36px;
font-weight: 500;
color: var(--hc-danger, #c9433a);
letter-spacing: -0.02em;
margin: 4px 0 2px;
}
.hc-qv__lede {
font-size: 13px;
line-height: 1.55;
color: var(--hc-ink-soft);
}
.hc-qv__specs {
display: grid;
gap: 6px;
padding: 12px 0;
border-top: 0.5px solid rgba(141, 109, 71, 0.14);
border-bottom: 0.5px solid rgba(141, 109, 71, 0.14);
}
.hc-qv__spec-row,
[class*="qv"][class*="__row"] {
display: grid;
grid-template-columns: 140px 1fr;
align-items: baseline;
gap: 12px;
padding: 6px 0;
}
.hc-qv__spec-label,
[class*="qv"][class*="__label"] {
font-family: var(--hc-mono, monospace);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--hc-ink-soft);
}
.hc-qv__spec-val,
[class*="qv"][class*="__value"] {
font-size: 13.5px;
font-weight: 500;
color: var(--hc-ink);
}
.hc-qv__trust {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: 11px;
color: var(--hc-ink-soft);
}
.hc-qv__trust span::before {
content: "✓ ";
color: var(--hc-success, #3d6b4f);
font-weight: 700;
}
.hc-qv__atc,
[class*="qv"][class*="__atc"],
[class*="qv"][class*="__buy"] {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: center;
margin-top: 8px;
}
.hc-qv__cta-primary,
.hc-qv__buy-btn,
[class*="qv"][class*="__cta"]:first-child {
background: var(--hc-ink, #1a1714) !important;
color: var(--hc-paper, #ffffff) !important;
padding: 14px 24px;
border-radius: 9999px;
font-weight: 500;
letter-spacing: 0.02em;
border: none;
cursor: pointer;
}
.hc-qv__cta-secondary,
[class*="qv"][class*="__secondary"] {
background: transparent;
border: 0.5px solid rgba(141, 109, 71, 0.32);
padding: 12px 22px;
border-radius: 9999px;
color: var(--hc-ink);
}
.hc-qv__close,
[class*="quickview"][class*="__close"] {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: 0.5px solid rgba(141, 109, 71, 0.16);
display: grid;
place-items: center;
cursor: pointer;
z-index: 10;
}
@media (max-width: 720px) {
.hc-qv__body, [class*="quickview"][class*="__body"] {
grid-template-columns: 1fr;
}
.hc-qv__media, [class*="quickview"][class*="__media"] {
aspect-ratio: 4 / 3;
}
.hc-qv__info, [class*="quickview"][class*="__info"] {
padding: 24px;
}
}
/* === css/blocks/225-about-visuals.css === */
/* about-visuals - illustrated proof cards on /about. */
.about-visuals {
padding-top: 32px;
}
.about-visuals__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.about-visual {
background: var(--hc-paper, #ffffff);
border: 1px solid rgba(180, 151, 115, 0.18);
border-radius: 18px;
overflow: hidden;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.about-visual:hover {
border-color: rgba(180, 151, 115, 0.42);
transform: translateY(-2px);
box-shadow: 0 12px 32px -16px rgba(26, 23, 20, 0.16);
}
.about-visual__art {
aspect-ratio: 280 / 200;
width: 100%;
overflow: hidden;
display: block;
}
.about-visual__art svg {
width: 100%;
height: 100%;
display: block;
}
.about-visual__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 17px;
font-weight: 500;
margin: 16px 22px 6px;
line-height: 1.25;
color: var(--hc-ink, #1a1714);
}
.about-visual__lede {
font-size: 13px;
line-height: 1.55;
color: rgba(26, 23, 20, 0.62);
margin: 0 22px 22px;
}
@media (max-width: 1024px) {
.about-visuals__grid {
grid-template-columns: 1fr;
}
}
/* === css/blocks/229-account-inbox.css === */
/* =================== account-inbox.css =================== */
/* Account support inbox + thread pages. Scoped to .acct-inbox__* and
* .acct-thread__* to avoid cross-page cascade bleed. */
.acct-inbox {
padding: clamp(16px, 2vw, 24px);
}
.acct-inbox__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.acct-inbox__head h2 {
margin: 0;
font-size: clamp(20px, 2.2vw, 28px);
}
.acct-inbox__list {
display: grid;
gap: 10px;
}
.acct-inbox__row {
display: grid;
gap: 8px;
padding: 14px;
border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
border-radius: var(--hc-r-lg, 16px);
text-decoration: none;
color: inherit;
background: var(--hc-paper, #ffffff);
transition: border-color var(--hc-dur-base, 220ms) var(--hc-ease, ease),
transform var(--hc-dur-fast, 140ms) var(--hc-ease-out, ease);
}
.acct-inbox__row:hover {
border-color: var(--hc-accent, #8b7355);
transform: translateY(-1px);
}
.acct-inbox__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.acct-inbox__snippet {
margin: 0;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}
.acct-thread {
padding: clamp(16px, 2vw, 24px);
display: grid;
gap: 16px;
}
.acct-thread__timeline {
display: grid;
gap: 10px;
}
.acct-thread__item {
padding: 12px 14px;
border-radius: 14px;
border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
background: var(--hc-paper-2, #fafaf8);
}
.acct-thread__item.is-mine {
border-color: rgba(139, 115, 85, 0.35);
background: rgba(212, 184, 150, 0.12);
}
.acct-thread__item-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
}
.acct-thread__item-title {
margin: 0 0 6px;
font-size: 15px;
}
.acct-thread__item-text {
margin: 0;
white-space: pre-wrap;
line-height: 1.5;
}
.acct-thread__reply {
border-top: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
padding-top: 14px;
display: grid;
gap: 12px;
}
/* === css/blocks/231-account-wishlist-public.css === */
/* =================== account-wishlist-public.css =================== */
.page-wishlist-public .premium-surface {
margin-bottom: var(--hc-sp-5, 24px);
}
.wl-public-card {
min-height: 100%;
}
.wl-public-card .hc-pcard__media {
min-height: 200px;
background: var(--hc-paper-2, #fafaf8);
}
.wl-public-card .hc-pcard__body {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 210px;
}
.wl-public-card .hc-pcard__bot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
}
/* === css/blocks/233-account-legal-entities.css === */
/* =================== account-legal-entities.css =================== */
.le-list {
padding: 16px;
}
.le-list__grid {
display: grid;
gap: 10px;
}
.le-list__item {
border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
border-radius: var(--hc-r-lg, 16px);
background: var(--hc-paper, #fff);
padding: 12px;
}
.le-list__head {
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
}
.le-list__actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* === css/blocks/234-account-shell.css === */
/* =================== account-shell.css =================== */
/* Shared account layout primitives: hero, tabs, quick links and orders table. */
.acct,
.acct-premium {
padding: var(--hc-sp-5, 24px) 0;
}
.acct-premium__hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: clamp(14px, 2vw, 28px);
flex-wrap: wrap;
margin-bottom: var(--hc-sp-5, 24px);
}
.acct-premium__hero h1 {
margin: 0;
font-size: clamp(28px, 3vw, 40px);
}
.acct-premium__tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 var(--hc-sp-5, 24px);
padding: 10px;
background: rgba(255, 255, 255, 0.72);
border: 0.5px solid rgba(180, 151, 115, 0.22);
border-radius: 14px;
}
.acct-premium__tabs > a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 8px 12px;
border-radius: 999px;
border: 0.5px solid rgba(180, 151, 115, 0.18);
background: rgba(255, 255, 255, 0.86);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72));
font-size: 13px;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.acct-premium__tabs > a:hover {
color: var(--hc-ink, #1a1714);
border-color: rgba(180, 151, 115, 0.42);
}
.acct-premium__tabs > a.is-active {
background: linear-gradient(180deg, #1f1a15, #14110d);
border-color: rgba(0, 0, 0, 0.34);
color: #fff;
}
.hc-tab-badge {
display: inline-block;
margin-left: 2px;
padding: 1px 8px;
background: #b8860b;
color: #fff;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
}
.acct-premium__quick {
margin: 0 0 var(--hc-sp-5, 24px);
}
.acct__orders {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 0.5px solid rgba(180, 151, 115, 0.22);
border-radius: 14px;
overflow: hidden;
background: #fff;
}
.acct__orders th,
.acct__orders td {
padding: 12px 14px;
border-bottom: 0.5px solid rgba(26, 23, 20, 0.08);
text-align: left;
font-size: 13px;
}
.acct__orders th {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
background: var(--hc-paper-2, #fafaf8);
}
.acct__orders tbody tr:last-child td {
border-bottom: 0;
}
.acct__orders .status {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(26, 23, 20, 0.08);
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72));
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (max-width: 1024px) {
.acct-premium__tabs {
padding: 8px;
}
.acct__orders {
display: block;
overflow-x: auto;
}
}
/* ---- folded from 230-account-documents.css ---- */
.acct-docs-table th,
.acct-docs-table td {
vertical-align: middle;
}
.acct-docs-table__actions {
white-space: nowrap;
}
@media (max-width: 1024px) {
.acct-docs-table {
min-width: 760px;
}
}
/* ---- folded from 232-account-approvals-bulk.css ---- */
.hc-approval-bulk {
padding: 14px;
margin-bottom: 14px;
display: grid;
gap: 10px;
}
.hc-approval-bulk__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hc-approval-card__chk {
margin-right: 8px;
display: inline-flex;
align-items: center;
}
.hc-approval-select {
width: 18px;
height: 18px;
}
/* === css/blocks/235-account-quick-order.css === */
/* =================== account-quick-order.css =================== */
/* Quick-order page styles only. */
.hc-qo-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--hc-sp-5, 28px);
align-items: start;
}
.hc-qo-main {
padding: var(--hc-sp-5, 28px);
}
.hc-qo__title {
margin-bottom: var(--hc-sp-2, 10px);
}
.hc-qo__lede {
margin: 0;
}
.hc-qo {
margin-top: var(--hc-sp-5, 28px);
}
.hc-qo__toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hc-sp-2, 10px);
margin-bottom: var(--hc-sp-3, 14px);
}
.hc-qo__upload {
cursor: pointer;
position: relative;
}
.hc-qo__file {
display: none;
}
.hc-qo__hint {
margin-left: auto;
}
.hc-qo-tbl {
width: 100%;
border-collapse: collapse;
}
.hc-qo-tbl thead tr {
border-bottom: 2px solid rgba(26, 23, 20, 0.1);
}
.hc-qo-tbl__th {
padding: 8px 4px;
text-align: left;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hc-muted, rgba(26, 23, 20, 0.55));
}
.hc-qo-tbl__th--sku {
width: 30%;
}
.hc-qo-tbl__th--qty {
width: 100px;
text-align: right;
}
.hc-qo-tbl__th--rm {
width: 40px;
}
.hc-qo-tbl__tr {
border-bottom: 1px solid rgba(26, 23, 20, 0.06);
}
.hc-qo-tbl__cell {
padding: var(--hc-sp-2, 10px) 4px;
vertical-align: top;
}
.hc-qo-tbl__cell--qty {
text-align: right;
}
.hc-qo-tbl__cell--rm {
text-align: center;
}
.hc-qo-tbl__sku-input {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
}
.hc-qo-tbl__qty-input {
width: 80px;
text-align: right;
}
.hc-qo-tbl__ok-name {
display: block;
margin-bottom: 2px;
font-size: 13px;
font-weight: 500;
}
.hc-qo-tbl__err {
font-size: 11px;
}
.hc-qo__footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--hc-sp-3, 14px);
margin-top: var(--hc-sp-5, 28px);
}
.hc-qo__footer-actions {
display: flex;
flex-wrap: wrap;
gap: var(--hc-sp-2, 10px);
}
.hc-qo-hint {
padding: var(--hc-sp-4, 20px);
}
.hc-qo-hint__text {
margin-top: var(--hc-sp-2, 10px);
}
.hc-qo-hint__pre {
margin-top: var(--hc-sp-2, 10px);
padding: var(--hc-sp-2, 10px);
border-radius: 8px;
background: var(--hc-bg, #f8f6f3);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
white-space: pre-wrap;
word-break: break-word;
}
.hc-qo-hint__note {
margin-top: var(--hc-sp-2, 10px);
}
@media (max-width: 1024px) {
.hc-qo-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hc-qo-main {
padding: var(--hc-sp-4, 16px);
}
.hc-qo-tbl__th:nth-child(2),
.hc-qo-tbl__cell:nth-child(2) {
min-width: 180px;
}
}
/* === css/blocks/236-account-referrals.css === */
/* =================== account-referrals.css =================== */
/* Referral page styles. */
.hc-ref-wrap {
padding: 32px 0 64px;
max-width: 820px;
}
.hc-ref__crumbs {
margin-bottom: 8px;
font-size: 12px;
color: var(--hc-muted, rgba(26, 23, 20, 0.45));
}
.hc-ref__title {
margin: 0 0 8px;
color: var(--hc-ink, #1a1714);
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.01em;
}
.hc-ref__lede {
margin: 0 0 28px;
font-size: 14px;
line-height: 1.55;
}
.hc-ref-share {
position: relative;
isolation: isolate;
overflow: hidden;
margin-bottom: 24px;
padding: 28px 32px;
border-radius: 18px;
background: linear-gradient(135deg, #2c2820 0%, #4a3f30 100%);
color: #fff;
}
.hc-ref-share__glow {
position: absolute;
top: -20%;
right: -10%;
width: 60%;
height: 140%;
background: radial-gradient(ellipse at center, rgba(212, 184, 150, 0.22), transparent 60%);
pointer-events: none;
}
.hc-ref-share__eyebrow {
margin-bottom: 12px;
opacity: 0.65;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.hc-ref-share__code {
margin-bottom: 16px;
color: #d4b896;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 32px;
font-weight: 500;
letter-spacing: 0.1em;
}
.hc-ref-share__row {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hc-ref-share__input {
flex: 1;
min-width: 200px;
padding: 10px 14px;
border: 0.5px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 13px;
}
.hc-ref-share__copy {
padding: 10px 18px;
border: 0;
border-radius: 6px;
background: #fff;
color: #1a1714;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: transform 0.2s ease;
}
.hc-ref-share__copy:hover {
transform: translateY(-1px);
}
.hc-ref-share__chips {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.hc-ref-share__chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 14px;
border: 0.5px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
background: rgba(255, 255, 255, 0.08);
color: #fff;
text-decoration: none;
font-size: 12px;
transition: background 0.2s ease;
}
.hc-ref-share__chip:hover {
background: rgba(255, 255, 255, 0.14);
}
.hc-ref-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 28px;
}
.hc-ref-stat {
border: 0.5px solid rgba(26, 23, 20, 0.08);
border-radius: 10px;
background: var(--hc-bg, #fff);
padding: 16px 18px;
}
.hc-ref-stat__lbl {
margin-bottom: 6px;
color: var(--hc-muted, rgba(26, 23, 20, 0.5));
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.hc-ref-stat__val {
color: var(--hc-ink, #1a1714);
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 28px;
font-weight: 500;
line-height: 1;
}
.hc-ref-sub {
margin: 28px 0 10px;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 16px;
font-weight: 500;
}
.hc-ref-uses {
border: 0.5px solid rgba(26, 23, 20, 0.08);
border-radius: 10px;
background: var(--hc-bg-2, #fafaf8);
overflow: hidden;
}
.hc-ref-uses__row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 16px;
border-bottom: 0.5px solid rgba(26, 23, 20, 0.08);
font-size: 13px;
}
.hc-ref-uses__row:last-child {
border-bottom: 0;
}
.hc-ref-uses__date {
color: var(--hc-muted, rgba(26, 23, 20, 0.5));
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11.5px;
}
.hc-ref-uses__order {
color: var(--hc-ink, #1a1714);
}
.hc-ref-uses__amt {
color: var(--hc-success, #3d6b4f);
font-weight: 500;
}
.hc-ref-uses--empty {
padding: 32px 24px;
border-style: dashed;
text-align: center;
color: var(--hc-muted, rgba(26, 23, 20, 0.5));
font-size: 13px;
}
.hc-ref-how {
padding-left: 20px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72));
font-size: 13.5px;
line-height: 1.7;
}
@media (max-width: 480px) {
.hc-ref-share {
padding: 18px;
}
.hc-ref-share__code {
font-size: 24px;
}
}
@media (max-width: 768px) {
.hc-ref-stats {
grid-template-columns: 1fr;
}
}
/* === css/blocks/237-account-wishlist-detail.css === */
/* =================== account-wishlist-detail.css =================== */
/* Wishlist detail page styles. */
.hc-wl__head {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--hc-sp-3, 14px);
margin-bottom: var(--hc-sp-5, 28px);
}
.hc-wl__head-main {
min-width: 0;
}
.hc-wl__title {
margin: 0;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(26px, 3vw, 36px);
font-weight: 400;
line-height: 1.1;
}
.hc-wl__desc {
margin-top: var(--hc-sp-2, 10px);
max-width: 560px;
}
.hc-wl__meta {
margin-top: var(--hc-sp-2, 10px);
}
.hc-wl__actions {
position: relative;
display: flex;
flex-wrap: wrap;
gap: var(--hc-sp-2, 10px);
}
.hc-wl__share-pop {
position: absolute;
right: 0;
top: 100%;
z-index: 5;
min-width: 320px;
margin-top: 8px;
padding: var(--hc-sp-3, 14px);
border: 1px solid rgba(26, 23, 20, 0.08);
border-radius: 14px;
background: var(--hc-bg, #f8f6f3);
box-shadow: 0 18px 60px rgba(26, 23, 20, 0.14);
}
.hc-wl__share-input {
min-width: 320px;
margin-top: 6px;
}
.hc-wl-bulk {
position: relative;
}
.hc-wl-bulk__toggle {
display: inline-flex;
align-items: center;
gap: 6px;
}
.hc-wl-bulk__toggle-input {
margin-right: 6px;
}
.hc-wl-bulk__actions {
margin-left: auto;
display: flex;
flex-wrap: wrap;
gap: var(--hc-sp-2, 10px);
}
.hc-wl-bulk__remove {
color: var(--hc-danger, #c9433a);
}
.hc-wl-grid {
margin-top: var(--hc-sp-4, 20px);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--hc-sp-4, 20px);
}
.hc-wl-item {
position: relative;
}
.hc-wl-item__check {
position: absolute;
left: 10px;
top: 10px;
z-index: 3;
}
.hc-wl-item__link {
display: block;
color: inherit;
text-decoration: none;
}
.hc-wl-item__ctas {
display: flex;
gap: var(--hc-sp-2, 10px);
padding: 0 var(--hc-sp-4, 20px) var(--hc-sp-3, 14px);
}
.hc-wl-item__atc {
margin: 0;
flex: 1;
}
.hc-wl-item__rm {
margin: 0;
}
.hc-wl-item__rm-btn {
color: var(--hc-danger, #c9433a);
}
.hc-wl-move-modal {
max-width: 460px;
position: relative;
}
.hc-wl-move-modal__sub {
margin-top: var(--hc-sp-1, 6px);
}
.hc-wl-move-modal__list {
margin-top: var(--hc-sp-4, 20px);
max-height: 320px;
overflow-y: auto;
border: 1px solid rgba(26, 23, 20, 0.08);
border-radius: 12px;
}
.hc-wl-move-modal__empty {
padding: var(--hc-sp-4, 20px);
text-align: center;
color: var(--hc-muted, rgba(26, 23, 20, 0.5));
font-size: 13px;
}
.hc-wl-move-modal__row {
display: flex;
gap: var(--hc-sp-2, 10px);
padding: var(--hc-sp-3, 14px);
border-bottom: 1px solid rgba(26, 23, 20, 0.06);
cursor: pointer;
transition: background 0.2s ease;
}
.hc-wl-move-modal__row:last-child {
border-bottom: 0;
}
.hc-wl-move-modal__row:hover {
background: rgba(139, 115, 85, 0.04);
}
.hc-wl-move-modal__row.is-selected {
background: rgba(212, 184, 150, 0.14);
}
.hc-wl-move-modal__row-body {
flex: 1;
}
.hc-wl-move-modal__row-body strong {
font-size: 14px;
font-weight: 500;
}
.hc-wl-move-modal__footer {
display: flex;
align-items: center;
gap: var(--hc-sp-2, 10px);
margin-top: var(--hc-sp-4, 20px);
}
.hc-wl-move-modal__spacer {
flex: 1;
}
@media (max-width: 480px) {
.hc-wl__share-pop,
.hc-wl__share-input {
min-width: 0;
width: min(92vw, 360px);
}
}
/* === css/blocks/238-auth-social.css === */
/* =================== auth-social.css =================== */
/* Quick channel row on auth screens. */
.auth-social {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 16px 0 6px;
}
.auth-social--links {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
margin: 12px 0 10px;
}
.auth-social__link {
color: var(--hc-accent-dark, #6a573f);
font-size: 12px;
font-weight: 500;
text-decoration: underline;
text-underline-offset: 2px;
}
.auth-social__link:hover {
color: var(--hc-ink, #1a1714);
}
.auth-social__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 8px 10px;
border-radius: 10px;
border: 0.5px solid rgba(180, 151, 115, 0.26);
background: rgba(255, 255, 255, 0.65);
color: var(--hc-ink, #1a1714);
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: border-color 0.18s ease, background 0.18s ease;
}
.auth-social__btn:hover {
border-color: rgba(180, 151, 115, 0.48);
background: rgba(212, 184, 150, 0.14);
}
@media (max-width: 480px) {
.auth-social {
grid-template-columns: 1fr;
}
.auth-social--links {
display: grid;
gap: 8px;
}
}
/* === css/blocks/242-grid-utilities.css === */
/* 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
}
/* === css/blocks/184-page-blog-index.css === */
/* =================== page-blog-index.css =================== */
.page-blog-index .blog-index__featured-title a {color: var(--sf-ink);
text-decoration: none;}
.page-blog-index .blog-index__chips {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 24px;
}
.page-blog-index .blog-index__featured-body {
padding: clamp(28px, 3vw, 48px);
display: grid;
align-content: start;
gap: 14px;
min-width: 0;
}
.page-blog-index .blog-index__featured-cover {
display: block;
min-height: 100%;
background: linear-gradient(145deg, #e4d3ac, #efe2c8);
}
.page-blog-index .blog-index__featured-cover .blog-art {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.page-blog-index .blog-index__featured-image {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.page-blog-index .blog-index__featured-title {
margin: 0;
font-size: clamp(36px, 3vw, 54px);
line-height: 0.98;
max-width: 15ch;
text-wrap: balance;
}
.page-blog-index .blog-index__featured {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
gap: 0;
overflow: hidden;
min-height: clamp(360px, 31vw, 470px);
border-radius: 22px;
box-shadow: 0 22px 70px rgba(41, 30, 18, 0.07);
}
.page-blog-index .blog-index__lead-grid {
display: grid;
grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.9fr);
gap: 18px;
align-items: stretch;
}
.page-blog-index .blog-index__lede {
font-size: 15px; line-height: 1.55;
color: rgba(26, 23, 20, 0.62);
max-width: 60ch;
margin: 8px 0 22px;
}
.page-blog-index .blog-index__side-pick {
min-height: 0;
}
.page-blog-index .blog-index__side-picks {
display: grid;
gap: 14px;
}
.page-blog-index .blog-index__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 36px; font-weight: 500;
letter-spacing: -0.015em;
margin: 18px 0 6px;
color: var(--hc-ink, #1a1714);
}
.page-blog-index .blog-top-signals {
display: flex; flex-wrap: wrap; gap: 6px 18px;
margin: 6px 0 10px;
}
.page-blog-index .blog-top-signals span {
font-size: 11px; letter-spacing: 0.10em;
text-transform: uppercase; font-weight: 500;
color: rgba(26, 23, 20, 0.55);
font-family: "JetBrains Mono", monospace;
position: relative;
padding-left: 14px;
}
.page-blog-index .blog-top-signals span::before {
content: ""; position: absolute;
left: 0; top: 50%; transform: translateY(-50%);
width: 6px; height: 6px; border-radius: 50%;
background: var(--hc-accent, #8b7355);
opacity: 0.45;
}
.page-blog-index .blog-top-signals span:first-child::before {
background: var(--hc-ink, #1a1714);
opacity: 0.85;
}
@media (max-width: 1024px) {
.page-blog-index .blog-index__lead-grid {grid-template-columns: 1fr;}
.page-blog-index .blog-index__featured {grid-template-columns: 1fr;
min-height: auto;}
.page-blog-index .blog-index__featured-cover {min-height: 280px;}
.page-blog-index .blog-index__featured-title {font-size: clamp(34px, 6.4vw, 50px);
max-width: 16ch;}
}
@media (max-width: 480px) {
.page-blog-index .blog-index__featured-cover {min-height: 220px;}
}
@media(max-width:1024px) {
.page-blog-index .blog-index__title {margin-top: 24px}
}
/* === css/blocks/244-page-catalog.css === */
/* =================== 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;
}
.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; }
}
/* === css/blocks/187-page-hero.css === */
/* =================== page-hero.css =================== */
.page-hero__quicklink {
position: relative; overflow: hidden; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; padding: 6px 14px; background: rgba(255, 255, 255, 0.6); border: 0.5px solid rgba(180, 151, 115, 0.18); border-radius: 999px; text-decoration: none; color: var(--hc-ink-mid, rgba(26, 23, 20, 0.7)); font-size: 13px; display: inline-flex; align-items: center
}
.page-hero__quicklink::before {
content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--hc-glow-color), transparent 60%); opacity: 0; transition: opacity 0.3s ease; z-index: -1
}
.page-hero__quicklink:hover {
transform: translateY(-1px); border-color: rgba(185, 154, 111, 0.42); color: var(--hc-ink, #1a1714); background: var(--hc-paper, #ffffff)
}
.page-hero__quicklink:hover::before {
opacity: 1
}
.page-hero, .cp-hero {
position: relative; padding: var(--hc-sp-8) 0 var(--hc-sp-7); background: var(--hc-bg-warm); overflow: hidden; margin-bottom: var(--hc-sp-6)
}
.page-hero__surface, .cp-hero__body {
position: relative; z-index: 2; max-width: 820px; padding: var(--hc-sp-6); background: linear-gradient(135deg, rgba(248,246,243,.85), rgba(248,246,243,.72)); backdrop-filter: blur(3px); border-radius: var(--hc-r-xl)
}
.page-hero__eyebrow {
display: inline-block; font-family: var(--hc-mono, "JetBrains Mono", monospace); letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; color: var(--hc-accent-dark, #7a6548); margin-bottom: 8px
}
.page-hero__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-size: clamp(28px, 4vw, 48px); line-height: 1.05; letter-spacing: var(--hc-ls-tight); margin: 0 0 12px; font-weight: 400; color: var(--hc-ink, #1a1714)
}
.page-hero__lede {
font-size: clamp(15px, 1.4vw, 17px); color: var(--hc-ink-mid, rgba(26, 23, 20, 0.7)); line-height: 1.5; max-width: 60ch; margin: 0 0 16px
}
.page-hero__quicklinks {
display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px
}
.page-delivery .page-hero, .page-static .page-hero {
padding: clamp(26px,3.4vw,40px) 0 clamp(20px,2.8vw,32px); margin-bottom: clamp(14px,1.8vw,24px)
}
.page-hero {
position: relative; overflow: hidden; padding: clamp(20px, 2.6vw, 32px) 0 clamp(16px, 2vw, 24px); margin-bottom: clamp(12px, 1.6vw, 20px)
}
.page-hero__bgfx {
position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden
}
.page-hero__mesh {
position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5
}
.page-hero__orb {
position: absolute; width: clamp(220px, 28vw, 360px); height: clamp(220px, 28vw, 360px); border-radius: 50%; background: radial-gradient(circle, rgba(212, 184, 150, 0.22) 0%, transparent 70%); filter: blur(40px); pointer-events: none; animation: hz-orb-float 18s ease-in-out infinite
}
.page-hero__orb--a {
top: -8%; right: -6%
}
.page-hero__orb--b {
bottom: -10%; left: -8%; animation-delay: -9s
}
.page-hero__surface {
max-width: min(960px, 100%); padding: clamp(20px, 2.4vw, 32px); background: rgba(255, 252, 247, 0.7); backdrop-filter: blur(12px); border: 0.5px solid rgba(180, 151, 115, 0.18); border-radius: 18px; box-shadow: 0 1px 2px rgba(27, 20, 13, 0.04), 0 12px 40px rgba(27, 20, 13, 0.06)
}
.page-hero:empty, .page-hero > .hc-wrap:empty {
display: none
}
@media(max-width:1024px) {
.page-hero, .hc-page-hero {background: linear-gradient(160deg, var(--hc-bg-warm, #f5efde) 0%, var(--hc-paper-3, #ede2c9) 100%); border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.32)); border-radius: 24px; padding: 48px 56px; margin-bottom: 32px; position: relative; overflow: hidden}
}
.page-hero__orb {
animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
animation-duration: 9s;
}
.page-blog-detail .page-hero__pill-bar {
display: none
}
.page-delivery .page-hero__surface, .page-static .page-hero__surface {
max-width: min(980px,100%); padding: clamp(18px,2.1vw,28px)
}
/* === css/blocks/188-page-home.css === */
/* =================== page-home.css =================== */
.page-home .hc-blog-latest-slot .post-card__media img, .page-home .hc-blog-latest-slot .post-card__media .post-card__ph {width: 100%;
height: 100%;
display: block;
object-fit: contain;}
.page-home .hc-blog-latest-slot .post-card__title a {text-decoration: none;
color: var(--sf-ink);}
.page-home .hc-blog-latest-slot .blog__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
}
.page-home .hc-blog-latest-slot .post-card {
display: grid;
grid-template-rows: auto 1fr;
min-height: 0;
border-radius: var(--sf-radius-xl);
border: 1px solid var(--sf-line);
overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 236, 0.96));
box-shadow: var(--sf-shadow);}
.page-home .hc-blog-latest-slot .post-card__media {
display: block;
aspect-ratio: 16 / 10;
min-height: 0;
max-height: 280px;
background: linear-gradient(145deg, #e7d3ab, #efe2c6);
}
.page-home .hc-blog-latest-slot .post-card__body {display: grid;
align-content: start;
gap: 10px;
padding: 18px 20px 20px;}
.page-home .hc-blog-latest-slot .post-card__title {margin: 0;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(28px, 2.1vw, 34px);
line-height: 1.04;
font-weight: 500;}
.page-home .hc-blog-latest-slot .post-card__excerpt {margin: 0;
font-size: 15px;
line-height: 1.55;
color: var(--sf-muted);}
.page-home .hc-blog-latest-slot .post-card--feature { grid-row: auto; }
@media (max-width: 1024px) {
.page-home .hc-blog-latest-slot .blog__grid {
grid-template-columns: 1fr;
}
}
/* ---- folded from 072-hc-cats.css ---- */
.hc-cats {display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: auto auto; gap: clamp(14px, 1.6vw, 22px); margin-top: 20px}
.hc-cats-sec {padding: clamp(48px, 6vw, 88px) 0}
/* === css/blocks/200-pdp-kit-products.css === */
/* =================== pdp-kit-products.css =================== */
/* pdp-kit-products — grid container for the "Для этого фасада обычно нужно"
* bundle. Each tile is a standard .pcard.pcard--c (same template as catalog,
* cross-sell, recently-viewed). The only kit-specific addition is the count
* badge (×1 / ×4 / опц.) placed inside .pcard-overlay__badges using
* .pcard-badge--count (a gold-gradient variant). Strictly .pdp-kit-* */
.pdp-kit-section {
margin: clamp(28px, 3.4vw, 44px) 0 clamp(20px, 2.4vw, 32px);
}
.pdp-kit-section > .hc-sec-h {
display: flex;
align-items: end;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}
.pdp-kit-products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(12px, 1.4vw, 18px);
align-items: stretch;
}
@media (max-width: 1440px) { .pdp-kit-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .pdp-kit-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pdp-kit-products { grid-template-columns: 1fr; } }
/* Count badge — kit-specific extension of .pcard-badge.
Lives inside .pcard-overlay__badges; gold-gradient pill with crisp number. */
.pcard-badge--count {
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
box-shadow: 0 2px 6px -1px rgba(184, 154, 111, 0.42);
}
.pcard-badge--count-opt {
background: linear-gradient(135deg, rgba(28, 24, 20, 0.92), rgba(28, 24, 20, 0.78));
color: var(--hc-paper, #ffffff);
}
/* === css/blocks/201-pdp-product-rail.css === */
/* =================== pdp-product-rail.css =================== */
/* pdp-product-rail - 4-column grid of related products on the PDP
* ("С этим товаром покупают", "Совместимые", "Похожие"). Each child is a
* .pcard (variant typically forced to "c"). Maintains consistent card
* heights and tight gaps. Strictly .pdp-product-rail. */
.pdp-product-rail {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(12px, 1.2vw, 18px);
align-items: stretch;
margin: clamp(20px, 2.4vw, 36px) 0;
}
.pdp-product-rail--premium {
padding: clamp(12px, 1.4vw, 20px);
background: linear-gradient(180deg, rgba(255, 252, 247, 0.6) 0%, transparent 100%);
border-radius: clamp(14px, 1.4vw, 20px);
}
.pdp-product-rail > .pcard {
min-width: 0;
height: 100%;
}
.pdp-product-rail:has(> .pcard:only-child) {
grid-template-columns: minmax(260px, 360px);
justify-content: start;
}
@media (max-width: 1440px) {
.pdp-product-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
.pdp-product-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.pdp-product-rail { grid-template-columns: 1fr; }
}
/* === css/blocks/205-pdp-variants.css === */
/* =================== pdp-variants.css =================== */
/* pdp-variants — visual differences between three PDP layouts (M1/M2/M3)
* driven by [data-pdp-variant] attribute on .hc-pdp and `pdp-variant-{m1,m2,m3}`
* class on . M1 is the default Editorial Premium (no overrides here —
* existing _pdp/* partials render in their default form). M2 is Compact
* Engineering (denser hero, neutral accents). M3 is Chapters (anchor-nav
* promoted to a vertical sticky sidebar). Strictly attribute/class selectors,
* no override of base block files. */
/* ===================== M1 — Editorial Premium ===================== */
/* (default — no overrides) */
/* ===================== M2 — Compact Engineering ===================== */
[data-pdp-variant="m2"] .pdp-anchor-nav {
padding: 6px 0;
gap: 16px;
font-size: 12px;
}
[data-pdp-variant="m2"] .hc-pdp__grid {
gap: clamp(20px, 1.6vw, 28px);
}
[data-pdp-variant="m2"] .pdp-trust-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 14px;
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(247, 240, 226, 0.86) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.18);
border-radius: 12px;
margin: 16px 0;
}
[data-pdp-variant="m2"] .pdp-trust-strip__item {
padding: 8px 12px;
background: transparent;
border: 0;
font-size: 12px;
}
[data-pdp-variant="m2"] .pdp-trust-strip__item b {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
[data-pdp-variant="m2"] .pdp-trust-strip__item span {
font-size: 11px;
}
/* Visual indicator badge under breadcrumbs */
[data-pdp-variant="m2"] .pdp-anchor-nav::before {
content: "M2 · Compact Engineering";
display: inline-flex;
align-items: center;
padding: 3px 8px;
margin-right: 12px;
background: rgba(26, 23, 20, 0.06);
border: 0.5px solid rgba(141, 109, 71, 0.24);
border-radius: 999px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
/* ===================== M3 — Chapters + Jump-nav ===================== */
[data-pdp-variant="m3"] {
position: relative;
}
[data-pdp-variant="m3"] .pdp-anchor-nav {
position: fixed;
left: max(16px, calc((100vw - 1320px) / 2 + 16px));
top: 120px;
width: 168px;
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px;
background:
linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.96) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.20);
border-radius: 14px;
box-shadow:
0 1px 2px rgba(40, 30, 15, 0.03),
0 18px 44px -28px rgba(40, 30, 15, 0.18);
z-index: 30;
}
[data-pdp-variant="m3"] .pdp-anchor-nav::before {
content: "Главы";
display: block;
padding: 0 4px 8px;
margin-bottom: 4px;
border-bottom: 0.5px dashed rgba(141, 109, 71, 0.28);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
}
[data-pdp-variant="m3"] .pdp-anchor-nav a {
position: relative;
padding: 7px 10px 7px 18px;
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 12.5px;
font-weight: 500;
line-height: 1.35;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
border-radius: 8px;
transition: background 0.18s ease, color 0.18s ease, padding 0.18s ease;
}
[data-pdp-variant="m3"] .pdp-anchor-nav a::before {
content: "";
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(141, 109, 71, 0.32);
transition: background 0.18s ease, transform 0.18s ease;
}
[data-pdp-variant="m3"] .pdp-anchor-nav a:hover,
[data-pdp-variant="m3"] .pdp-anchor-nav a.is-active {
background: rgba(212, 184, 150, 0.16);
color: var(--hc-ink, #1a1714);
}
[data-pdp-variant="m3"] .pdp-anchor-nav a:hover::before,
[data-pdp-variant="m3"] .pdp-anchor-nav a.is-active::before {
background: linear-gradient(135deg, var(--hc-gold-1, var(--hc-gold, #d4b896)), var(--hc-gold-2, #b89a6f));
transform: translateY(-50%) scale(1.4);
}
[data-pdp-variant="m3"] .hc-pdp .hc-wrap > :not(.pdp-anchor-nav):not(:first-child) {
padding-left: clamp(0px, 14vw, 200px);
}
[data-pdp-variant="m3"] .pdp-anchor-nav::after {
content: "M3 · Chapters";
display: inline-flex;
align-items: center;
margin-left: 12px;
padding: 3px 8px;
background: rgba(26, 23, 20, 0.06);
border: 0.5px solid rgba(141, 109, 71, 0.24);
border-radius: 999px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
[data-pdp-variant="m3"] .pdp-anchor-nav::after { display: none; }
/* === css/blocks/239-page-showroom-cards.css === */
/* Showroom page for product-card variants. Scoped under .page-showroom-cards. */
.page-showroom-cards .showroom-page {
padding-top: 28px;
padding-bottom: 64px;
}
.page-showroom-cards .showroom-page__head {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: flex-start;
margin-bottom: 20px;
}
.page-showroom-cards .showroom-page__title {
margin: 6px 0 8px;
font-size: clamp(30px, 3.4vw, 48px);
}
.page-showroom-cards .showroom-page__lead {
margin: 0;
color: rgba(24, 22, 20, 0.72);
max-width: 760px;
}
.page-showroom-cards .showroom-page__kpis {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.page-showroom-cards .showroom-kpi,
.page-showroom-cards .showroom-pill {
display: inline-flex;
align-items: center;
border: 1px solid rgba(111, 94, 72, 0.24);
background: rgba(255, 255, 255, 0.72);
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
line-height: 1.2;
}
.page-showroom-cards .showroom-controls {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 22px;
padding: 14px;
}
.page-showroom-cards .showroom-controls__field {
display: grid;
gap: 6px;
}
.page-showroom-cards .showroom-controls__field > span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(24, 22, 20, 0.68);
}
.page-showroom-cards .showroom-controls .hc-btn {
align-self: end;
min-height: 42px;
}
.page-showroom-cards .showroom-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.page-showroom-cards .showroom-cell {
border: 1px solid rgba(111, 94, 72, 0.18);
border-radius: 18px;
background: rgba(255, 255, 255, 0.58);
padding: 12px;
display: grid;
gap: 10px;
}
.page-showroom-cards .showroom-cell__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.page-showroom-cards .showroom-cell__qa {
display: inline-flex;
align-items: center;
min-height: 32px;
border-radius: 10px;
padding: 6px 10px;
font-size: 12px;
border: 1px solid rgba(111, 94, 72, 0.24);
background: rgba(255, 255, 255, 0.72);
}
.page-showroom-cards .showroom-cell__qa[data-status="pass"] {
border-color: rgba(24, 120, 71, 0.4);
color: #1b5f41;
}
.page-showroom-cards .showroom-cell__qa[data-status="warn"] {
border-color: rgba(166, 108, 29, 0.45);
color: #6a4715;
}
.page-showroom-cards .showroom-cell .pcard,
.page-showroom-cards .showroom-cell .pcard-mini {
margin: 0;
}
@media (max-width: 1024px) {
.page-showroom-cards .showroom-controls {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.page-showroom-cards .showroom-grid {
grid-template-columns: minmax(0, 1fr);
}
.page-showroom-cards .showroom-page__head {
flex-direction: column;
}
}
/* === css/blocks/240-pdp-qa.css === */
/* =================== 240-pdp-qa.css =================== */
/* PDP Q&A — premium list of customer questions + answers with "Ask" form.
* Q items show big gold avatar, italic question, gold-tinted answer panel
* with checkmark badge. Soft cream gradient cards, hover lift.
* Strict: .qa-list / .qa-item / .qa-item__* / .qa-ask-form. */
.qa-list-wrap {
display: grid;
gap: 24px;
}
.qa-list {
display: grid;
gap: 14px;
}
/* ─── Question card ─── */
.qa-item {
position: relative;
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
grid-template-areas:
"avatar head"
"avatar question"
"avatar answer";
gap: 6px 18px;
padding: 22px 24px;
background:
linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 246, 234, 0.84) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.20);
border-radius: 16px;
isolation: isolate;
overflow: hidden;
transition:
transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1),
border-color 0.32s ease,
box-shadow 0.32s cubic-bezier(0.2, 0.84, 0.3, 1);
animation: qa-item-in 0.42s cubic-bezier(0.2, 0.84, 0.3, 1) backwards;
}
.qa-item:nth-child(1) { animation-delay: 60ms; }
.qa-item:nth-child(2) { animation-delay: 120ms; }
.qa-item:nth-child(3) { animation-delay: 180ms; }
.qa-item:nth-child(4) { animation-delay: 240ms; }
.qa-item:nth-child(n+5) { animation-delay: 300ms; }
@keyframes qa-item-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.qa-item::before {
/* Decorative radial glow on hover */
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(420px 200px at 0% 0%, rgba(212, 184, 150, 0.22), transparent 65%);
opacity: 0;
transition: opacity 0.42s ease;
}
.qa-item:hover {
transform: translateY(-2px);
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
box-shadow: 0 22px 44px -28px rgba(184, 154, 111, 0.40);
}
.qa-item:hover::before { opacity: 1; }
/* ─── Avatar (initial in gold circle) ─── */
.qa-item__avatar {
grid-area: avatar;
align-self: start;
width: 56px;
height: 56px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: 22px;
font-weight: 500;
color: var(--hc-accent-dark, #7a6548);
background: linear-gradient(135deg, rgba(212, 184, 150, 0.42), rgba(184, 154, 111, 0.16));
border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.55));
text-transform: uppercase;
letter-spacing: -0.01em;
transition: transform 0.42s cubic-bezier(0.2, 0.84, 0.3, 1), background 0.32s ease;
}
.qa-item:hover .qa-item__avatar {
transform: rotate(-6deg) scale(1.06);
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
}
/* ─── Meta head: name + date ─── */
.qa-item__head {
grid-area: head;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 12px;
margin-bottom: 4px;
}
.qa-item__meta {
display: contents;
}
.qa-item__meta strong {
font-family: var(--hc-sans, "Outfit", sans-serif);
font-size: 14px;
font-weight: 600;
color: var(--hc-ink, #1a1714);
}
.qa-item__meta time {
display: inline-block;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
/* ─── Question text (with Q badge) ─── */
.qa-item__q {
grid-area: question;
position: relative;
margin: 0;
padding: 8px 0 12px 30px;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(15px, 1.1vw, 17px);
font-style: italic;
line-height: 1.5;
color: var(--hc-ink, #1a1714);
}
.qa-item__q::before {
content: "Q";
position: absolute;
left: 0;
top: 6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--hc-ink, #1a1714);
color: var(--hc-paper, #ffffff);
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 700;
font-style: normal;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0;
}
/* ─── Answer block (with A badge + gold gradient bg) ─── */
.qa-item__a {
grid-area: answer;
position: relative;
padding: 14px 16px 14px 46px;
margin-top: 6px;
background:
linear-gradient(135deg, rgba(212, 184, 150, 0.14), rgba(184, 154, 111, 0.04));
border-left: 2px solid var(--hc-gold, #d4b896);
border-radius: 0 12px 12px 0;
}
.qa-item__a::before {
content: "A";
position: absolute;
left: 16px;
top: 14px;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--hc-gold, #d4b896), var(--hc-accent, #8b7355));
color: #2a2018;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.qa-item__a-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hc-accent-dark, #7a6548);
margin-bottom: 6px;
}
.qa-item__a-label svg { display: none; } /* removed — replaced by A badge */
.qa-item__a p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--hc-ink, #1a1714);
}
/* ─── Pending state (no answer yet) ─── */
.qa-item__pending {
grid-area: answer;
padding: 12px 16px;
margin-top: 6px;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hc-warn, #a67426);
background: rgba(166, 116, 38, 0.06);
border-radius: 10px;
border-left: 2px solid var(--hc-warn, #a67426);
display: inline-flex;
align-items: center;
gap: 8px;
}
.qa-item__pending::before {
content: "⏱";
font-size: 12px;
letter-spacing: 0;
}
/* ─── Empty state ─── */
.qa-list-wrap > p.hc-muted {
padding: 22px 24px;
background: linear-gradient(180deg, rgba(252, 246, 234, 0.6), rgba(252, 246, 234, 0.3));
border: 0.5px dashed rgba(141, 109, 71, 0.30);
border-radius: 14px;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-style: italic;
font-size: 15px;
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
text-align: center;
margin: 0;
}
/* ─── Ask form ─── */
.qa-ask-form {
display: grid;
gap: 14px;
padding: 24px 26px;
background:
linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 246, 234, 0.78) 100%);
border: 0.5px solid rgba(141, 109, 71, 0.22);
border-radius: 16px;
position: relative;
isolation: isolate;
}
.qa-ask-form::before {
/* Decorative ribbon at top */
content: "Спросите HOLZCOM";
position: absolute;
top: -10px;
left: 26px;
padding: 4px 12px;
background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
color: #2a2018;
font-family: var(--hc-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 999px;
z-index: 1;
}
.qa-ask-form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 768px) {
.qa-ask-form__grid { grid-template-columns: 1fr; }
.qa-item {
grid-template-columns: 44px minmax(0, 1fr);
gap: 6px 12px;
padding: 18px 18px;
}
.qa-item__avatar { width: 44px; height: 44px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.qa-item, .qa-item__avatar { animation: none !important; transition: none !important; }
}
/* === css/blocks/241-pdp-bundles.css === */
/* PDP bundles rail — premium cards, unified vertical rhythm */
.hc-bundles__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.hc-bundles__grid:has(> .hc-bundle-card:only-child) {
grid-template-columns: 1fr;
}
.hc-bundle-card {
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 10px;
min-height: 100%;
padding: 16px;
border: 1px solid rgba(141, 109, 71, 0.22);
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 246, 238, 0.96));
}
.hc-bundle-card__head {
display: grid;
gap: 4px;
}
.hc-bundle-card__title {
margin: 0;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
font-size: clamp(24px, 2.1vw, 30px);
line-height: 1.1;
font-weight: 500;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hc-bundle-card__price {
margin: 0;
font-size: 28px;
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
}
.hc-bundle-card__items {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.hc-bundle-card__item {
position: relative;
display: block;
}
.hc-bundle-card__thumb {
aspect-ratio: 1;
border-radius: 10px;
border: 1px solid rgba(141, 109, 71, 0.18);
background: #f1f0f0;
display: grid;
place-items: center;
overflow: hidden;
}
.hc-bundle-card__thumb img,
.hc-bundle-card__thumb svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.hc-bundle-card__qty {
position: absolute;
left: -4px;
bottom: -4px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 6px;
border-radius: 999px;
background: #111;
color: #fff;
font-size: 12px;
}
.hc-bundle-card__foot {
margin-top: auto;
}
.hc-bundle-card__foot .hc-btn {
width: 100%;
}
.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card {
grid-template-columns: minmax(220px, 0.55fr) minmax(280px, 1fr) minmax(220px, 0.42fr);
grid-template-rows: auto auto;
align-items: center;
gap: clamp(16px, 2.4vw, 30px);
padding: clamp(20px, 2.4vw, 30px);
}
.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card__head {
align-self: start;
}
.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card__items {
grid-row: 1 / span 2;
grid-column: 2;
align-self: center;
}
.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card__foot {
grid-column: 3;
grid-row: 1 / span 2;
width: 100%;
align-self: center;
}
.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-small {
grid-column: 1;
}
@media (max-width: 1024px) {
.hc-bundles__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.hc-bundles__grid {
grid-template-columns: 1fr;
}
.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card__items,
.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card__foot,
.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-small {
grid-column: auto;
grid-row: auto;
}
}
/* === css/blocks/251-pdp-compat.css === */
/* =================== 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; }
}
/* === css/blocks/253-cat-banner.css === */
/* =================== 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; }
}
/* === css/blocks/255-pcard-parity.css === */
/* =================== 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; }
/* === css/blocks/256-pcard-system.css === */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ 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;
}
/* === css/blocks/258-hc-pdp-stickybar.css === */
/* 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;
}
/* === css/blocks/259-hc-pdp-specs-collapse.css === */
/* 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;
margin-top: -32px;
position: relative;
z-index: 3;
}
/* === css/blocks/260-hc-pdp-pdf-card.css === */
/* 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;
}
}
/* === css/blocks/261-hc-original-badge.css === */
/* 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;
}
/* If pcard variant places badge above other content (no parent flex) — center constraint */
[class*="pcard"] .hc-original-badge,
[class*="pcard"] .hc-original-badge--sm {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
}
/* === css/blocks/262-hc-cat-hero.css === */
/* 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; }
}
/* === css/blocks/263-hc-bundle-landing.css === */
/* hc-bundle-landing — /bundle/{slug} page set-items-grid + set-item-card (Sprint17) */
.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; }
}
/* ─── ALSO fix Готовые комплекты grid — was 3-col tight, narrow cards ─── */
.hc-bundles__grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
.hc-bundle-card {
min-width: 0 !important;
padding: 18px !important;
}
.hc-bundle-card__title {
font-size: 16px !important;
line-height: 1.25 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.hc-bundle-card__price strong {
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-bundle-card .hc-small {
font-size: 11px;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hc-bundle-card__items {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
max-width: 100% !important;
}
.hc-bundle-card__item {
flex: 0 0 auto !important;
width: 46px !important;
}
.hc-bundle-card__thumb {
width: 46px !important;
height: 46px !important;
}
.hc-bundle-card__thumb img,
.hc-bundle-card__thumb svg {
max-width: 46px !important;
max-height: 46px !important;
object-fit: contain !important;
}
.hc-bundle-card__qty {
width: 18px;
height: 18px;
font-size: 9px;
}
.hc-bundle-card__foot .hc-btn {
font-size: 12.5px;
padding: 10px 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* === css/blocks/037-hc-admin.css === */
/* =================== hc-admin.css =================== */
/* HOLZCOM Blum v7.61.1 · Admin editorial overlay
Keeps admin shell stable when the public bundle is aggressively pruned.
Loaded after storefront CSS modules; no overrides. */
.app{
--hc-admin-bg:#f6f1e8;
--hc-admin-panel:#fffaf2;
--hc-admin-ink:var(--hc-ink, #1a1714);
--hc-admin-muted:rgba(26,23,20,.58);
--hc-admin-line:rgba(141,109,71,.18);
--hc-admin-accent:var(--hc-accent, #8b7355);
--hc-admin-shadow:0 24px 70px rgba(27,20,13,.10);
}
body.admin-page{background:var(--hc-admin-bg);color:var(--hc-admin-ink)}
.app{min-height:100vh;display:grid;grid-template-columns:280px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;overflow:auto;padding:24px 18px;background:linear-gradient(180deg,#1f1a15,#15120f);color:var(--hc-paper, #ffffff);box-shadow:12px 0 40px rgba(27,20,13,.12)}
.sidebar-brand{display:block;color:var(--hc-paper, #ffffff);text-decoration:none;font:700 22px/1.1 var(--hc-font,Outfit,system-ui);letter-spacing:.08em;text-transform:uppercase}
.sidebar-sub{margin:6px 0 18px;color:rgba(255,255,255,.58);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.sidebar-cmdk{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 18px;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.08);color:var(--hc-paper, #ffffff);cursor:pointer}
.cmdk-kbd{font:600 11px/1 var(--hc-mono,ui-monospace,monospace);padding:4px 6px;border-radius:7px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.72)}
.sidebar-user{margin-top:24px;padding:14px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.86);font-size:13px}
.hc-admin-text-muted{color:rgba(255,255,255,.62);text-decoration:none}.hc-admin-text-muted:hover{color:var(--hc-paper, #ffffff)}
.main{min-width:0;padding:28px;overflow-x:hidden}.main>*:first-child{margin-top:0}
.admin-card,.hc-admin-card,.card{background:var(--hc-admin-panel);border:1px solid var(--hc-admin-line);border-radius:22px;box-shadow:var(--hc-admin-shadow)}
.admin-page-head,.hc-admin-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.admin-page-title,.hc-admin-page-title{margin:0;font:650 30px/1.08 var(--hc-font,Outfit,system-ui);letter-spacing:-.03em}
.admin-page-sub,.hc-admin-page-sub{margin:8px 0 0;color:var(--hc-admin-muted);font-size:14px;line-height:1.5}
.hc-util-mt-6{margin-top:6px}
.app button,.app input,.app select,.app textarea{font:inherit}
.app input,.app select,.app textarea{max-width:100%;border:1px solid var(--hc-admin-line);border-radius:12px;background:var(--hc-paper, #ffffff);color:var(--hc-admin-ink);padding:10px 12px;outline:none}
.app input:focus,.app select:focus,.app textarea:focus{border-color:rgba(139,115,85,.58);box-shadow:0 0 0 4px rgba(139,115,85,.12)}
.hc-swatch-svg,.color-dot-svg,.label-chip__dot{display:inline-block;width:12px;height:12px;vertical-align:-1px;border-radius:50%;box-shadow:0 0 0 1px rgba(26,23,20,.12)}
.label-chip{display:inline-flex;align-items:center;gap:6px}
.hc-admin-progress__bar{display:block;width:100%;height:8px;appearance:none;border:0;border-radius:999px;overflow:hidden;background:rgba(26,23,20,.08)}
.hc-admin-progress__bar::-webkit-progress-bar{background:rgba(26,23,20,.08);border-radius:999px}
.hc-admin-progress__bar::-webkit-progress-value{background:linear-gradient(90deg,#185FA5,#1D9E75);border-radius:999px;transition:width 600ms ease}
.hc-admin-progress__bar::-moz-progress-bar{background:linear-gradient(90deg,#185FA5,#1D9E75);border-radius:999px}
.hc-admin-cohort-cell{background:transparent}
.hc-admin-cohort-cell.is-bucket-1{background:rgba(29,158,117,.14)}
.hc-admin-cohort-cell.is-bucket-2{background:rgba(29,158,117,.19)}
.hc-admin-cohort-cell.is-bucket-3{background:rgba(29,158,117,.25)}
.hc-admin-cohort-cell.is-bucket-4{background:rgba(29,158,117,.30)}
.hc-admin-cohort-cell.is-bucket-5{background:rgba(29,158,117,.36)}
.hc-admin-cohort-cell.is-bucket-6{background:rgba(29,158,117,.41)}
.hc-admin-cohort-cell.is-bucket-7{background:rgba(29,158,117,.47)}
.hc-admin-cohort-cell.is-bucket-8{background:rgba(29,158,117,.52)}
.hc-admin-cohort-cell.is-bucket-9{background:rgba(29,158,117,.58)}
.hc-admin-cohort-cell.is-bucket-10{background:rgba(29,158,117,.63)}
@media (max-width:980px){.app{display:block}.sidebar{position:relative;height:auto}.main{padding:18px}.admin-page-head,.hc-admin-page-head{display:block}}