/* ══════════════════════════════════════════════════════════════
Modern Homepage — CruClub-inspired layout
Compact hero · title-wave · board cards · filter bar · product tiles
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
Editor hint — shown in Live Editor mode when no custom blocks
are saved for the homepage. Explains that this is the default
theme design and how to start editing.
══════════════════════════════════════════════════════════════ */
.cms-default-design-hint {
display: flex;
align-items: flex-start;
gap: 14px;
max-width: 900px;
margin: 24px auto;
padding: 16px 22px;
background: linear-gradient(135deg, rgba(29,181,254,.08) 0%, rgba(71,190,253,.04) 100%);
border: 1px solid rgba(29,181,254,.3);
border-radius: 8px;
color: #253748;
}
.cms-default-design-hint > svg {
color: #1DB5FE;
flex-shrink: 0;
margin-top: 2px;
}
.cms-default-design-hint__body {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
line-height: 1.55;
}
.cms-default-design-hint__body strong {
font-size: 14px;
font-weight: 800;
color: #009AE4;
}
.cms-default-design-hint__body span {
color: #3F5972;
}
/* ══════════════════════════════════════════════════════════════
VARIABLE OVERRIDES — highest priority
Marketplace theme.css sets --primary/--radius/--border/etc. on :root
using its own blue palette. We load AFTER it, so overriding :root
here rewires EVERY template (mega header, footer presets, catalog
pages) that reads var(--primary) in inline styles. No template
forking needed — they auto-pick up the sky-blue palette + 8px radii.
══════════════════════════════════════════════════════════════ */
:root {
/* Primary brand color — CruClub sky blue */
--primary: #1DB5FE;
--primary-hover: #009AE4;
--primary-light: #E1EBF5;
--primary-bg: #F2F9FF;
/* Text — CruClub blue-gray */
--text: #253748;
--text-secondary: #3F5972;
--text-muted: #7C8C9B;
/* Backgrounds */
--bg: #ffffff;
--bg-page: #F2F7FB;
--bg-surface: #ffffff;
--bg-hover: #F2F7FB;
/* Borders */
--border: #E1EBF5;
--border-light: #F2F7FB;
/* Status */
--success: #4BC200;
--success-bg: #ecfdf5;
--warning: #FDA04A;
--danger: #FF7E6C;
/* Radii — CruClub uses 8px primarily (147 out of ~420 uses) */
--radius: 8px;
--radius-sm: 4px;
--radius-lg: 8px;
/* Shadows — CruClub blue-tinted */
--shadow-sm: 0 2px 6px rgba(170, 175, 190, 0.18);
--shadow: 0 2px 8px rgba(170, 175, 190, 0.16);
--shadow-md: 0 4px 12px rgba(170, 175, 190, 0.18);
/* Footer */
--footer-bg: #253748;
}
/* ── Page background ── */
body {
background: #F2F7FB;
color: #253748;
}
/* ══════════════════════════════════════════════════════════════
Title with wave decoration (CruClub signature)
══════════════════════════════════════════════════════════════ */
.title-wave {
position: relative;
padding-left: 58px;
font-size: 32px;
line-height: 1.2;
font-weight: 800;
color: #253748;
margin: 0;
letter-spacing: -0.02em;
}
.title-wave__txt { display: inline; }
.title-wave__decor {
position: absolute;
left: 0;
top: 8px;
display: flex;
flex-direction: column;
color: var(--primary);
}
.title-wave__decor svg {
width: 40px;
height: 7px;
margin-bottom: 3px;
}
.title-wave__decor svg:last-child { margin-bottom: 0; }
.title-wave--section { margin-bottom: 28px; }
/* Hero variant: white wave + white text */
.page-hero .title-wave { color: #fff; font-size: 36px; padding-left: 58px; }
.page-hero .title-wave__decor { color: #fff; }
/* ══════════════════════════════════════════════════════════════
Page Hero — compact, bg image, overlay, destination buttons
══════════════════════════════════════════════════════════════ */
.page-hero {
position: relative;
color: #fff;
background-color: #3F5972;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
padding: 48px 0 40px;
overflow: hidden;
}
.page-hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(0, 139, 206, 0.65) 0%, color-mix(in srgb, var(--primary) 40%, transparent) 50%, rgba(37, 55, 72, 0.55) 100%);
z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__title { margin-bottom: 28px; }
.page-hero__sub {
font-size: 16px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
margin: 12px 0 0;
padding-left: 58px;
max-width: 640px;
}
/* Glass destination button grid */
.page-hero__box { margin-top: 8px; }
.page-hero__quick-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.btn--blur {
display: inline-flex;
align-items: center;
padding: 10px 18px;
background: rgba(37, 55, 72, 0.40);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: none;
border-radius: 8px;
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn--blur:hover {
background: #fff;
color: #3F5972;
}
@media (max-width: 768px) {
.page-hero { padding: 32px 0 28px; }
.page-hero .title-wave { font-size: 24px; padding-left: 48px; }
.page-hero__sub { padding-left: 48px; font-size: 14px; }
.btn--blur { padding: 8px 14px; font-size: 13px; }
}
/* ══════════════════════════════════════════════════════════════
Filter bar — horizontal search with 4 fields + submit
══════════════════════════════════════════════════════════════ */
.filter-bar-section {
padding: 0;
margin-top: -32px;
position: relative;
z-index: 5;
}
.filter-bar {
display: flex;
align-items: stretch;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(170, 175, 190, 0.16);
padding: 6px;
gap: 4px;
}
.filter-bar__item {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 8px;
position: relative;
min-width: 0;
transition: background 0.15s;
cursor: pointer;
}
.filter-bar__item:not(:last-of-type)::after {
content: "";
position: absolute;
right: -2px;
top: 12px;
bottom: 12px;
width: 1px;
background: #E1EBF5;
}
.filter-bar__item:hover { background: #F2F7FB; }
.filter-bar__ic {
width: 36px;
height: 36px;
border-radius: 8px;
background: #E1EBF5;
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.filter-bar__content { flex: 1; min-width: 0; }
.filter-bar__label {
font-size: 11px;
font-weight: 600;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.filter-bar__input {
border: none;
outline: none;
padding: 0;
font-size: 15px;
font-weight: 600;
color: #253748;
background: transparent;
width: 100%;
font-family: inherit;
}
.filter-bar__input::placeholder { color: #7C8C9B; font-weight: 500; }
.filter-bar__value {
font-size: 15px;
font-weight: 600;
color: #253748;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-bar__submit {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 28px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all 0.2s;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 18%, transparent);
flex-shrink: 0;
}
.filter-bar__submit:hover { background: var(--primary-hover); transform: translateY(-1px); }
@media (max-width: 900px) {
.filter-bar-section { margin-top: -16px; }
.filter-bar {
flex-wrap: wrap;
padding: 10px;
gap: 8px;
}
.filter-bar__item {
flex-basis: calc(50% - 4px);
padding: 10px 12px;
}
.filter-bar__item:not(:last-of-type)::after { display: none; }
.filter-bar__submit {
flex-basis: 100%;
padding: 14px;
justify-content: center;
}
}
/* ══════════════════════════════════════════════════════════════
Sections — spacing
══════════════════════════════════════════════════════════════ */
.section { padding: 56px 0; }
.section--pt { padding: 72px 0 56px; }
.section--pb { padding: 56px 0 80px; }
.section--tight { padding: 32px 0; }
.section--muted { background: #fff; }
.section-head-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.section-head-row .title-wave { margin-bottom: 0; }
.link-more {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: color 0.15s;
}
.link-more:hover { color: var(--primary-hover); }
/* ══════════════════════════════════════════════════════════════
Board cards — CruClub promo cards (image bg + dark gradient)
══════════════════════════════════════════════════════════════ */
.board-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1024px) { .board-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .board-grid { grid-template-columns: 1fr; } }
.board-card {
position: relative;
display: flex;
align-items: flex-end;
min-height: 340px;
padding: 24px 24px 22px;
border-radius: 8px;
background-color: #C4C7D6;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
color: #fff;
text-decoration: none;
overflow: hidden;
transition: transform 0.25s ease;
}
.board-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, #253748 4.82%, rgba(37, 55, 72, 0.28) 35.5%, rgba(37, 55, 72, 0) 100%);
border-radius: inherit;
transition: opacity 0.3s;
}
.board-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(170, 175, 190, 0.20);
color: #fff;
}
.board-card__inner {
position: relative;
z-index: 1;
width: 100%;
}
.board-card__title {
font-size: 22px;
font-weight: 700;
line-height: 1.25;
margin: 0 0 12px;
color: #fff;
text-shadow: 0 2px 8px rgba(37, 55, 72, 0.4);
}
.board-card__footer {
font-size: 15px;
line-height: 1.3;
color: rgba(255, 255, 255, 0.92);
}
.board-card__footer strong {
font-size: 20px;
font-weight: 800;
color: #fff;
}
.board-card--blue-linear::after {
background: linear-gradient(293deg, #008BCE -21%, var(--primary) 95%);
opacity: 0.85;
}
@media (max-width: 575px) {
.board-card { min-height: 220px; padding: 20px 18px; }
.board-card__title { font-size: 18px; margin-bottom: 8px; }
.board-card__footer { font-size: 14px; }
.board-card__footer strong { font-size: 17px; }
}
/* ══════════════════════════════════════════════════════════════
Product tiles — grid of listings (CruClub style)
══════════════════════════════════════════════════════════════ */
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .product-grid, .product-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .product-grid, .product-grid--3 { grid-template-columns: 1fr; } }
.product-tile {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: inherit;
border: 1px solid #E1EBF5;
transition: all 0.25s linear;
}
.product-tile:hover {
transform: translateY(-2px);
border-color: transparent;
filter: drop-shadow(0 4px 10px rgba(170, 175, 190, 0.2));
color: inherit;
}
.product-tile__img {
position: relative;
aspect-ratio: 16/10;
background: #F2F7FB;
overflow: hidden;
}
.product-tile__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.product-tile:hover .product-tile__img img { transform: scale(1.05); }
.product-tile__hit {
position: absolute;
top: 12px;
left: 12px;
padding: 5px 12px;
background: linear-gradient(135deg, #FF7E6C, #FF6652);
color: #fff;
border-radius: 4px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
box-shadow: 0 1px 4px rgba(255, 126, 108, 0.25);
}
.product-tile__hit--sale {
background: linear-gradient(135deg, var(--primary), #008BCE);
box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 22%, transparent);
}
.product-tile__rating {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(37, 55, 72, 0.88);
backdrop-filter: blur(8px);
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.product-tile__rating svg { color: #FDA04A; }
.product-tile__body {
padding: 18px 20px 12px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.product-tile__company {
font-size: 11px;
font-weight: 700;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.8px;
}
.product-tile__header {
font-size: 17px;
font-weight: 800;
line-height: 1.3;
color: #253748;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
letter-spacing: -0.01em;
}
.product-tile__datetime {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #7C8C9B;
margin-top: auto;
}
.product-tile__datetime svg { color: #7C8C9B; flex-shrink: 0; }
.dot-sep {
display: inline-block;
width: 3px;
height: 3px;
border-radius: 50%;
background: #B7C3D1;
margin: 0 2px;
}
.product-tile__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 18px;
gap: 12px;
border-top: 1px dashed #E1EBF5;
margin-top: 4px;
}
.product-tile__cost { display: flex; flex-direction: column; gap: 2px; }
.product-tile__cost-old {
font-size: 12px;
color: #B7C3D1;
text-decoration: line-through;
}
.product-tile__cost-new {
font-size: 18px;
font-weight: 800;
color: #253748;
letter-spacing: -0.02em;
}
.btn--product {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: transparent;
color: var(--primary);
border: 1px solid var(--primary);
border-radius: 8px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s;
}
.product-tile:hover .btn--product {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.btn--product svg { transition: transform 0.2s; }
.product-tile:hover .btn--product svg { transform: translateX(3px); }
/* ══════════════════════════════════════════════════════════════
Chip grid — compact category access
══════════════════════════════════════════════════════════════ */
.chip-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 900px) { .chip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .chip-grid { grid-template-columns: 1fr; } }
.chip-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
text-decoration: none;
color: #253748;
font-weight: 600;
font-size: 14px;
transition: all 0.2s;
}
.chip-card:hover {
background: #fff;
border-color: var(--primary);
color: var(--primary);
box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 12%, transparent);
transform: translateY(-2px);
}
.chip-card__count {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: #E1EBF5;
border-radius: 4px;
font-size: 11px;
color: #3F5972;
font-weight: 700;
transition: all 0.2s;
}
.chip-card:hover .chip-card__count {
background: var(--primary);
color: #fff;
}
/* ══════════════════════════════════════════════════════════════
Benefits strip — 4-col horizontal
══════════════════════════════════════════════════════════════ */
.benefits-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 32px;
background: #fff;
border-radius: 8px;
border: 1px solid #E1EBF5;
box-shadow: 0 1px 3px rgba(170, 175, 190, 0.12);
}
@media (max-width: 900px) { .benefits-strip { grid-template-columns: repeat(2, 1fr); padding: 24px; } }
@media (max-width: 480px) { .benefits-strip { grid-template-columns: 1fr; } }
.benefit {
display: flex;
align-items: flex-start;
gap: 14px;
}
.benefit__ic {
width: 48px;
height: 48px;
border-radius: 8px;
background: #E1EBF5;
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.benefit__title {
font-size: 15px;
font-weight: 800;
color: #253748;
margin-bottom: 4px;
}
.benefit__desc {
font-size: 13px;
color: #7C8C9B;
line-height: 1.5;
}
/* ══════════════════════════════════════════════════════════════
Stats strip — compact row with big numbers
══════════════════════════════════════════════════════════════ */
.stats-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding: 32px;
background: #fff;
border-radius: 8px;
border: 1px solid #E1EBF5;
text-align: center;
}
@media (max-width: 640px) { .stats-strip { grid-template-columns: repeat(2, 1fr); padding: 24px; gap: 16px; } }
.stats-strip__item b {
display: block;
font-size: 40px;
font-weight: 800;
color: var(--primary);
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.03em;
}
.stats-strip__item span {
display: block;
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.8px;
}
@media (max-width: 640px) { .stats-strip__item b { font-size: 32px; } }
/* ══════════════════════════════════════════════════════════════
CTA banner
══════════════════════════════════════════════════════════════ */
.cta-banner {
position: relative;
padding: 48px 40px;
background: linear-gradient(135deg, #253748 0%, #3F5972 100%);
border-radius: 8px;
color: #fff;
overflow: hidden;
box-shadow: 0 8px 40px rgba(37, 55, 72, 0.20);
}
.cta-banner::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 35%, transparent) 0%, transparent 50%),
radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 50%);
}
.cta-banner__inner {
position: relative;
max-width: 640px;
}
.cta-banner h2 {
font-size: 28px;
font-weight: 800;
color: #fff;
margin: 0 0 10px;
letter-spacing: -0.02em;
line-height: 1.2;
}
.cta-banner p {
font-size: 15px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.82);
margin: 0 0 24px;
}
.cta-banner__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.cta-banner .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s;
border: 1px solid transparent;
}
.cta-banner .btn--primary {
background: var(--primary);
color: #fff;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 24%, transparent);
}
.cta-banner .btn--primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
.cta-banner .btn--ghost-light {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(8px);
}
.cta-banner .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.2); }
@media (max-width: 768px) {
.cta-banner { padding: 32px 24px; }
.cta-banner h2 { font-size: 22px; }
.cta-banner p { font-size: 14px; }
}
/* ══════════════════════════════════════════════════════════════
MEGA HEADER OVERRIDES — the "mega" preset has inline styles that
CSS variables don't reach (hardcoded border-radius:50%, specific
button shapes). Force them to 8px squared chips to match our look.
Inline styles win on specificity so we need !important here.
══════════════════════════════════════════════════════════════ */
/* Round icon buttons → squared 8px chips */
[data-cms-header="mega"] .user-menu-btn,
[data-cms-header="mega"] a[href$="/account/login"],
[data-cms-header="mega"] a[href$="/account/favorites"],
[data-cms-header="mega"] button[onclick*="CartDrawer"],
[data-cms-header="mega"] button[onclick*="cart"],
[data-cms-header="mega"] a[title*="избранное" i],
[data-cms-header="mega"] a[title*="favorites" i],
[data-cms-header="mega"] a[title*="войти" i],
[data-cms-header="mega"] a[title*="корзина" i],
[data-cms-header="mega"] a[title*="cart" i] {
border-radius: 8px !important;
background: #F2F7FB !important;
border: 1px solid #E1EBF5 !important;
color: #253748 !important;
transition: all 0.15s !important;
}
[data-cms-header="mega"] .user-menu-btn:hover,
[data-cms-header="mega"] a[href$="/account/login"]:hover,
[data-cms-header="mega"] a[href$="/account/favorites"]:hover,
[data-cms-header="mega"] button[onclick*="CartDrawer"]:hover,
[data-cms-header="mega"] a[title*="избранное" i]:hover,
[data-cms-header="mega"] a[title*="войти" i]:hover,
[data-cms-header="mega"] a[title*="корзина" i]:hover {
background: #fff !important;
border-color: var(--primary) !important;
color: var(--primary) !important;
}
/* User avatar — becomes blue gradient square */
[data-cms-header="mega"] .user-menu-btn {
background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}
[data-cms-header="mega"] .user-menu-btn:hover {
background: linear-gradient(135deg, var(--primary-hover), #008BCE) !important;
transform: translateY(-1px);
color: #fff !important;
}
/* Search form in mega header — slimmer border, softer shadow */
[data-cms-header="mega"] form[action*="/search"] {
border: 1px solid #E1EBF5 !important;
border-width: 1px !important;
background: #F2F7FB !important;
transition: all 0.15s;
}
[data-cms-header="mega"] form[action*="/search"]:focus-within {
background: #fff !important;
border-color: var(--primary) !important;
box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 15%, transparent);
}
/* Search submit button in mega header */
[data-cms-header="mega"] form[action*="/search"] button[type="submit"] {
background: var(--primary) !important;
transition: background 0.15s;
}
[data-cms-header="mega"] form[action*="/search"] button[type="submit"]:hover {
background: var(--primary-hover) !important;
}
/* Top bar (thin colored strip above logo row) */
[data-cms-header="mega"] > div:first-child {
background: var(--primary) !important;
}
/* "+ Добавить" button and city-btn */
[data-cms-header="mega"] .mega-city-btn,
[data-cms-header="mega"] button[class*="submit"],
[data-cms-header="mega"] a[href*="add"] {
border-radius: 8px !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 20%, transparent) !important;
transition: all 0.15s !important;
}
[data-cms-header="mega"] .mega-city-btn:hover {
background: var(--primary-hover) !important;
transform: translateY(-1px);
}
/* Cart badge on mega header cart button */
[data-cms-header="mega"] button[onclick*="CartDrawer"] span,
[data-cms-header="mega"] .cart-count-badge {
background: #FF7E6C !important;
color: #fff !important;
border: 2px solid #fff !important;
border-radius: 10px !important;
}
/* Mega header nav row — bottom border + clean tab look.
Force overflow:visible so absolutely-positioned .mega-dropdown panels
are not clipped (any non-visible overflow on a parent with relatively-
positioned children clips both axes in most browsers). */
[data-cms-header="mega"] .header-nav {
background: #F2F7FB !important;
border-top: 1px solid #E1EBF5 !important;
border-bottom: 1px solid #E1EBF5 !important;
overflow: visible !important;
}
[data-cms-header="mega"] .header-nav .container {
overflow: visible !important;
}
[data-cms-header="mega"] .header-nav .mega-menu-trigger {
padding: 14px 16px !important;
color: #3F5972 !important;
font-weight: 600 !important;
border-bottom: 2px solid transparent !important;
transition: all 0.15s !important;
}
[data-cms-header="mega"] .header-nav .mega-menu-trigger:hover,
[data-cms-header="mega"] .header-nav .mega-menu-trigger.active {
color: var(--primary) !important;
border-bottom-color: var(--primary) !important;
background: transparent !important;
}
/* Any dropdown in mega header — shadow refresh */
[data-cms-header="mega"] .mega-topbar-dropdown,
[data-cms-header="mega"] .mega-city-dropdown,
[data-cms-header="mega"] .lang-dropdown,
[data-cms-header="mega"] .user-dropdown,
[data-cms-header="mega"] .submit-dropdown,
[data-cms-header="mega"] .mega-dropdown,
[data-cms-header="mega"] .mega-dropdown-inner,
[data-cms-header="mega"] .mega-twopanel {
border-color: #E1EBF5 !important;
box-shadow: 0 2px 8px rgba(170, 175, 190, 0.16) !important;
}
[data-cms-header="mega"] .mega-dropdown-inner,
[data-cms-header="mega"] .mega-twopanel {
border-radius: 8px !important;
}
/* ══════════════════════════════════════════════════════════════
BIG FOOTER PRESET — force dark-slate CruClub footer
══════════════════════════════════════════════════════════════ */
[data-cms-footer="big"] {
background: #253748 !important;
color: var(--primary-light) !important;
border-top: 4px solid var(--primary) !important;
}
[data-cms-footer="big"] h3,
[data-cms-footer="big"] h4 {
color: #fff !important;
}
[data-cms-footer="big"] a {
color: rgba(225, 235, 245, 0.68) !important;
transition: color 0.15s, transform 0.15s !important;
}
[data-cms-footer="big"] a:hover {
color: var(--primary) !important;
}
[data-cms-footer="big"] input,
[data-cms-footer="big"] textarea {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: #fff !important;
border-radius: 8px !important;
}
[data-cms-footer="big"] input::placeholder,
[data-cms-footer="big"] textarea::placeholder {
color: rgba(225, 235, 245, 0.5) !important;
}
[data-cms-footer="big"] button {
background: var(--primary) !important;
color: #fff !important;
border-radius: 8px !important;
border: none !important;
}
[data-cms-footer="big"] button:hover {
background: var(--primary-hover) !important;
}
/* ══════════════════════════════════════════════════════════════
SITE HEADER — override marketplace classic header to CruClub look
Target: .site-header, .header-top, .header-nav, etc. from base.html.twig
══════════════════════════════════════════════════════════════ */
.site-header {
background: #fff !important;
color: #253748 !important;
border-bottom: 1px solid #E1EBF5;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08);
}
.site-header .header-top {
padding: 14px 0;
background: #fff;
}
.site-header .header-top > .container {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: nowrap;
}
/* Logo */
.site-header .site-logo {
font-size: 22px;
font-weight: 800;
color: #253748 !important;
letter-spacing: -0.02em;
text-decoration: none;
flex-shrink: 0;
padding: 0;
}
.site-header .site-logo:hover { color: var(--primary) !important; }
/* City selector */
.site-header .city-selector { flex-shrink: 0; }
.site-header .city-selector-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
color: #253748;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.site-header .city-selector-btn:hover {
background: #fff;
border-color: var(--primary);
color: var(--primary);
}
.site-header .city-selector-btn svg { color: var(--primary); }
.site-header .city-dropdown {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(170, 175, 190, 0.16);
padding: 8px;
margin-top: 6px;
}
.site-header .city-dropdown a {
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
color: #253748;
}
.site-header .city-dropdown a:hover { background: #F2F7FB; color: var(--primary); }
.site-header .city-dropdown a.active { background: #E1EBF5; color: var(--primary-hover); font-weight: 700; }
.site-header .city-dropdown .count-badge {
background: #E1EBF5;
color: #3F5972;
border-radius: 4px;
font-size: 11px;
padding: 1px 6px;
}
/* Header search bar */
.site-header .header-search {
flex: 1;
max-width: 560px;
}
.site-header .header-search-form {
display: flex;
align-items: stretch;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
overflow: hidden;
transition: all 0.15s;
}
.site-header .header-search-form:focus-within {
background: #fff;
border-color: var(--primary);
box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 15%, transparent);
}
.site-header .header-search-select { position: relative; }
.site-header .header-search-select-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: transparent;
border: none;
border-right: 1px solid #E1EBF5;
color: #3F5972;
font-size: 13px;
font-weight: 600;
cursor: pointer;
height: 100%;
white-space: nowrap;
}
.site-header .header-search-select-btn:hover { color: var(--primary); }
.site-header .header-search-dropdown {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(170, 175, 190, 0.25);
padding: 6px;
margin-top: 4px;
min-width: 160px;
}
.site-header .header-search-option {
padding: 8px 12px;
border-radius: 6px;
color: #253748;
font-size: 13px;
}
.site-header .header-search-option:hover { background: #F2F7FB; color: var(--primary); }
.site-header .header-search-option.active { background: #E1EBF5; color: var(--primary-hover); font-weight: 700; }
.site-header .header-search-input {
flex: 1;
border: none;
outline: none;
background: transparent;
padding: 10px 14px;
font-size: 14px;
color: #253748;
font-family: inherit;
min-width: 0;
}
.site-header .header-search-input::placeholder { color: #7C8C9B; }
.site-header .header-search-submit {
padding: 0 18px;
background: var(--primary);
color: #fff;
border: none;
cursor: pointer;
transition: background 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.site-header .header-search-submit:hover { background: var(--primary-hover); }
/* Site nav (right side: cart, add-button, user menu) */
.site-header .site-nav {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
margin-left: auto;
}
.site-header .nav-divider {
width: 1px;
height: 24px;
background: #E1EBF5;
margin: 0 4px;
}
/* Cart button */
.site-header .nav-cart-btn,
.site-header .nav-search-btn {
position: relative;
width: 40px;
height: 40px;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
color: #253748;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s;
}
.site-header .nav-cart-btn:hover,
.site-header .nav-search-btn:hover {
background: #fff;
border-color: var(--primary);
color: var(--primary);
}
.site-header .cart-count-badge {
position: absolute;
top: -4px;
right: -4px;
background: #FF7E6C;
color: #fff;
font-size: 10px;
font-weight: 800;
padding: 2px 5px;
border-radius: 10px;
min-width: 16px;
text-align: center;
border: 2px solid #fff;
}
/* Submit selector (+ Добавить) */
.site-header .submit-selector { position: relative; }
.site-header .btn-submit {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 20%, transparent);
}
.site-header .btn-submit:hover { background: var(--primary-hover); transform: translateY(-1px); }
.site-header .submit-dropdown {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(170, 175, 190, 0.16);
padding: 8px;
margin-top: 6px;
min-width: 220px;
}
.site-header .submit-dropdown a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 6px;
color: #253748;
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
.site-header .submit-dropdown a:hover { background: #F2F7FB; color: var(--primary); }
/* User menu */
.site-header .user-menu { position: relative; }
.site-header .user-menu-btn {
position: relative;
padding: 0;
background: none;
border: none;
cursor: pointer;
border-radius: 50%;
transition: transform 0.15s;
}
.site-header .user-menu-btn:hover { transform: scale(1.05); }
.site-header .user-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
color: #fff;
border-radius: 8px;
font-weight: 800;
font-size: 15px;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 22%, transparent);
}
.site-header .user-badge {
position: absolute;
top: -2px;
right: -2px;
width: 10px;
height: 10px;
background: #FF7E6C;
border: 2px solid #fff;
border-radius: 50%;
}
.site-header .user-dropdown {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(170, 175, 190, 0.18);
padding: 10px;
margin-top: 8px;
min-width: 260px;
}
.site-header .user-dropdown-header {
padding: 8px 12px 14px;
}
.site-header .user-dropdown-name {
font-weight: 800;
color: #253748;
font-size: 14px;
}
.site-header .user-dropdown-email {
font-size: 12px;
color: #7C8C9B;
margin-top: 2px;
}
.site-header .user-dropdown-divider {
height: 1px;
background: #E1EBF5;
margin: 4px 0;
}
.site-header .user-dropdown a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 6px;
color: #253748;
font-size: 13px;
text-decoration: none;
}
.site-header .user-dropdown a:hover { background: #F2F7FB; color: var(--primary); }
.site-header .user-dropdown-count {
margin-left: auto;
background: #E1EBF5;
color: #3F5972;
padding: 1px 7px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
}
/* Auth buttons (when logged out) */
.site-header .site-nav a.btn,
.site-header .site-nav .btn {
padding: 10px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: all 0.15s;
}
/* ── Main nav (mega-menu row) ──
IMPORTANT: do NOT set overflow-x:auto on the .container here, even on
desktop. The mega-menu dropdowns are absolutely-positioned children
with top:100% — any overflow value other than `visible` clips them
(browsers force overflow-y to also clip when overflow-x is auto/scroll/
hidden). Mobile scroll is handled by the media query below. */
.site-header .header-nav {
background: #F2F7FB;
border-top: 1px solid #E1EBF5;
padding: 0;
overflow: visible;
}
.site-header .header-nav > .container {
display: flex;
align-items: stretch;
gap: 0;
overflow: visible;
}
.site-header .mega-menu-item { position: relative; display: flex; align-items: stretch; }
.site-header .mega-menu-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 16px;
color: #3F5972;
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: all 0.15s;
white-space: nowrap;
}
.site-header .mega-menu-trigger:hover,
.site-header .mega-menu-trigger.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.site-header .mega-menu-item:hover .mega-menu-trigger {
color: var(--primary);
border-bottom-color: var(--primary);
}
.site-header .mega-menu-trigger .nav-icon {
width: 18px;
height: 18px;
color: currentColor;
}
/* Mega-dropdown panels — restyle (the original class is .mega-dropdown,
not .mega-menu — fix the wrong selector from earlier commit). */
.site-header .mega-dropdown {
z-index: 200;
}
.site-header .mega-dropdown-inner {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
box-shadow: 0 4px 14px rgba(170, 175, 190, 0.18);
overflow: hidden;
}
.site-header .mega-dropdown-twopanel .mega-twopanel {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
box-shadow: 0 4px 14px rgba(170, 175, 190, 0.18);
overflow: hidden;
}
.site-header .mega-sidebar-item:hover {
background: #F2F7FB;
color: var(--primary);
}
.site-header .mega-sidebar-item.active {
background: #E1EBF5;
color: var(--primary-hover);
}
.site-header .mega-link {
color: #253748;
border-radius: 6px;
}
.site-header .mega-link:hover {
background: #F2F7FB;
color: var(--primary);
}
/* Language dropdown */
.site-header .lang-dropdown,
.site-header .lang-selector-btn {
font-size: 13px;
}
.site-header .lang-selector-btn {
padding: 8px 12px;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
color: #253748;
font-weight: 600;
cursor: pointer;
}
.site-header .lang-selector-btn:hover {
background: #fff;
border-color: var(--primary);
color: var(--primary);
}
.site-header .lang-dropdown {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(170, 175, 190, 0.25);
padding: 6px;
margin-top: 4px;
}
.site-header .lang-dropdown a {
padding: 7px 12px;
border-radius: 6px;
color: #253748;
font-size: 13px;
}
.site-header .lang-dropdown a:hover { background: #F2F7FB; color: var(--primary); }
.site-header .lang-dropdown a.active { background: #E1EBF5; color: var(--primary-hover); font-weight: 700; }
/* Mobile burger */
.site-header .mobile-burger {
width: 40px;
height: 40px;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
display: none;
align-items: center;
justify-content: center;
gap: 4px;
flex-direction: column;
cursor: pointer;
}
.site-header .mobile-burger span {
width: 18px;
height: 2px;
background: #253748;
border-radius: 2px;
}
.site-header .mobile-actions { display: none; }
@media (max-width: 900px) {
.site-header .header-top > .container { flex-wrap: wrap; }
.site-header .header-search { order: 5; flex-basis: 100%; max-width: none; margin-top: 10px; }
.site-header .site-nav { display: none; }
.site-header .mobile-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-header .mobile-burger { display: flex; }
.site-header .header-nav { display: none; }
}
/* Tablet: header-nav is still visible but needs horizontal scroll for many items.
Dropdowns are useless on touch anyway, so clipping them is fine here. */
@media (max-width: 1100px) and (min-width: 901px) {
.site-header .header-nav > .container,
[data-cms-header="mega"] .header-nav .container {
overflow-x: auto !important;
overflow-y: visible !important;
scrollbar-width: none;
}
.site-header .header-nav > .container::-webkit-scrollbar,
[data-cms-header="mega"] .header-nav .container::-webkit-scrollbar {
display: none;
}
}
/* ══════════════════════════════════════════════════════════════
SITE FOOTER — override marketplace classic footer
══════════════════════════════════════════════════════════════ */
.site-footer {
background: #253748 !important;
color: var(--primary-light) !important;
padding: 64px 0 0 !important;
margin-top: 80px;
border-top: 4px solid var(--primary);
}
.site-footer .container { position: relative; }
.site-footer .footer-grid {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(225, 235, 245, 0.12);
}
@media (max-width: 900px) {
.site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 560px) {
.site-footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
.site-footer .footer-col h3 {
color: #fff !important;
font-size: 13px !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 18px !important;
padding: 0;
border: none;
}
.site-footer .footer-col:first-child h3 {
font-size: 22px !important;
text-transform: none;
letter-spacing: -0.02em;
color: #fff !important;
margin-bottom: 14px !important;
}
.site-footer .footer-col p {
font-size: 14px;
line-height: 1.6;
color: rgba(225, 235, 245, 0.65);
margin: 0 0 18px;
max-width: 320px;
}
.site-footer .footer-col a {
display: block;
color: rgba(225, 235, 245, 0.68) !important;
font-size: 14px;
text-decoration: none;
padding: 6px 0;
transition: color 0.15s, transform 0.15s;
}
.site-footer .footer-col a:hover {
color: var(--primary) !important;
transform: translateX(4px);
}
/* Footer bottom strip */
.site-footer .footer-bottom {
padding: 24px 0 !important;
font-size: 13px !important;
color: rgba(225, 235, 245, 0.5) !important;
text-align: center;
border: none !important;
}
.site-footer .footer-bottom a { color: var(--primary) !important; }
/* ══════════════════════════════════════════════════════════════
INNER PAGES — catalog, services, companies, shop, news
Most marketplace styles already use var(--primary/--radius/--border)
which we rewired above. This section handles:
1. Hardcoded colors in theme.css that don't read from vars
2. Visual polish so inner cards feel consistent with the home
══════════════════════════════════════════════════════════════ */
/* Page content wrapper — soft background */
.content {
background: #F2F7FB;
padding: 32px 0 56px;
min-height: 60vh;
}
/* ── Marketplace .hero on inner pages had a hardcoded blue gradient.
Replace with CruClub sky-blue stack. ── */
.hero {
background: linear-gradient(135deg, #008BCE 0%, var(--primary) 50%, color-mix(in srgb, var(--primary) 80%, white) 100%) !important;
padding: 48px 0 !important;
border-radius: 0 !important;
}
.hero h1 { color: #fff !important; letter-spacing: -0.02em; }
.hero p { color: rgba(255, 255, 255, 0.88) !important; }
.hero .btn {
border-radius: 8px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}
.hero .btn:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}
/* ── Inner page h1 — add wave decoration on the left ── */
.content > .container > h1,
.catalog-main > h1 {
position: relative;
padding-left: 58px !important;
font-size: 28px;
font-weight: 800;
color: #253748 !important;
letter-spacing: -0.02em;
margin: 8px 0 24px !important;
}
.content > .container > h1::before,
.catalog-main > h1::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 18px;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat, no-repeat;
background-position: 0 0, 0 10px;
background-size: 40px 7px, 40px 7px;
}
/* ── Breadcrumbs ── */
.catalog-breadcrumbs {
font-size: 13px;
color: #7C8C9B;
margin-bottom: 16px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.catalog-breadcrumbs a {
color: #7C8C9B !important;
text-decoration: none;
transition: color 0.15s;
}
.catalog-breadcrumbs a:hover { color: var(--primary) !important; }
.catalog-breadcrumbs .sep {
color: #B7C3D1 !important;
margin: 0 4px !important;
}
.catalog-breadcrumbs .current {
color: #253748 !important;
font-weight: 600;
}
/* ── Catalog layout: sidebar + main ── */
.catalog-layout {
gap: 24px;
}
.catalog-sidebar {
top: 88px;
}
.sidebar-card {
background: #fff !important;
border: 1px solid #E1EBF5 !important;
border-radius: 8px !important;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08) !important;
padding: 20px !important;
margin-bottom: 16px;
}
.sidebar-title {
font-size: 13px !important;
font-weight: 800 !important;
color: #253748 !important;
text-transform: uppercase;
letter-spacing: 0.8px;
margin: 0 0 14px !important;
padding-bottom: 12px;
border-bottom: 1px solid #E1EBF5;
}
/* Filter links list */
.filter-link {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 8px 12px !important;
border-radius: 6px !important;
font-size: 13px;
color: #3F5972 !important;
transition: all 0.12s;
}
.filter-link:hover {
background: #F2F7FB !important;
color: var(--primary) !important;
}
.filter-link.active {
background: #E1EBF5 !important;
color: var(--primary-hover) !important;
font-weight: 700;
}
.filter-count {
color: #B7C3D1 !important;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
/* Filter button (chip) */
.filter-btn {
padding: 8px 14px !important;
border-radius: 8px !important;
border: 1px solid #E1EBF5 !important;
background: #fff !important;
color: #3F5972 !important;
font-size: 13px;
font-weight: 600;
transition: all 0.15s;
}
.filter-btn:hover {
border-color: var(--primary) !important;
color: var(--primary) !important;
}
.filter-btn.active {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: #fff !important;
}
/* ── Catalog toolbar (search + sort + view switcher) ── */
.catalog-toolbar {
padding: 16px;
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08);
margin-bottom: 20px;
}
.catalog-search input {
border-radius: 8px !important;
border: 1px solid #E1EBF5 !important;
background: #F2F7FB !important;
padding: 10px 14px 10px 40px !important;
font-size: 14px !important;
color: #253748 !important;
transition: all 0.15s;
}
.catalog-search input::placeholder { color: #7C8C9B !important; }
.catalog-search input:focus {
background: #fff !important;
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
outline: none !important;
}
.catalog-search svg { color: #7C8C9B !important; }
.catalog-sort select {
border-radius: 8px !important;
border: 1px solid #E1EBF5 !important;
background: #F2F7FB !important;
padding: 10px 36px 10px 14px !important;
font-size: 13px !important;
color: #253748 !important;
font-weight: 600;
cursor: pointer;
}
.catalog-sort select:focus {
background: #fff !important;
border-color: var(--primary) !important;
outline: none;
}
.view-switcher {
background: #F2F7FB !important;
border: 1px solid #E1EBF5 !important;
border-radius: 8px !important;
padding: 4px !important;
}
.view-switcher button {
border-radius: 6px !important;
width: 32px !important;
height: 32px !important;
}
.view-switcher button:hover { background: #fff !important; color: var(--primary) !important; }
.view-switcher button.active {
background: #fff !important;
color: var(--primary) !important;
box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}
/* ══════════════════════════════════════════════════════════════
Service cards — horizontal 3-column layout inspired by CruClub
[image 300px] [content 1fr] [price-card 220px absolute]
Collapses to single column below 900px.
══════════════════════════════════════════════════════════════ */
.service-card {
position: relative;
background: #fff !important;
border: 1px solid #E1EBF5 !important;
border-radius: 8px !important;
transition: all 0.25s ease !important;
overflow: hidden;
}
.service-card:hover {
border-color: transparent !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(170, 175, 190, 0.18) !important;
}
/* Horizontal list view — [image 300px] [content 1fr] with floating CTA */
@media (min-width: 901px) {
.service-cards.view-list {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.service-cards.view-list .service-card {
display: grid !important;
grid-template-columns: 300px minmax(0, 1fr) !important;
gap: 0 !important;
min-height: 220px !important;
padding: 0 !important;
overflow: hidden;
}
.service-cards.view-list .service-card-img-link {
grid-column: 1;
grid-row: 1;
display: block;
width: 100%;
height: 100%;
min-height: 220px;
background: linear-gradient(135deg, #F2F7FB, #E1EBF5);
overflow: hidden;
}
.service-cards.view-list .service-card-img {
width: 100% !important;
height: 100% !important;
min-height: 220px !important;
object-fit: cover !important;
transition: transform 0.5s ease;
}
.service-cards.view-list .service-card:hover .service-card-img {
transform: scale(1.04);
}
.service-cards.view-list .service-card-img-placeholder {
width: 100%;
height: 100%;
min-height: 220px;
display: flex !important;
align-items: center;
justify-content: center;
}
.service-cards.view-list .service-card-body {
grid-column: 2;
grid-row: 1;
padding: 24px 200px 24px 28px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
min-width: 0;
position: relative;
}
.service-cards.view-list .service-card-header {
margin-bottom: 2px !important;
order: 2;
}
.service-cards.view-list .service-card-title { margin: 0 !important; }
.service-cards.view-list .service-card-title a {
font-size: 19px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #253748 !important;
letter-spacing: -0.015em;
}
.service-cards.view-list .card-rating {
order: 3;
display: inline-flex !important;
align-items: center;
gap: 4px;
font-size: 13px;
color: #7C8C9B;
}
.service-cards.view-list .card-rating svg { width: 14px; height: 14px; }
.service-cards.view-list .card-rating .star-filled { color: #FDA04A; }
.service-cards.view-list .card-rating .star-empty { color: #E1EBF5; }
.service-cards.view-list .card-rating .rating-value {
color: #253748;
font-weight: 700;
margin-left: 2px;
}
.service-cards.view-list .service-card-desc {
order: 4;
color: #7C8C9B !important;
font-size: 13px !important;
line-height: 1.55 !important;
margin: 4px 0 0 !important;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.service-cards.view-list .service-card-footer {
order: 6;
margin-top: auto !important;
padding-top: 14px !important;
border-top: 1px dashed #E1EBF5;
display: flex !important;
flex-wrap: wrap;
gap: 6px !important;
align-items: center;
}
/* Category / feature tags inside list body */
.service-cards.view-list .service-card .card-badge,
.service-cards.view-list .service-card .badge-green,
.service-cards.view-list .service-card .badge-blue {
order: 5;
margin: 0 !important;
padding: 4px 10px !important;
background: #E1EBF5 !important;
color: var(--primary) !important;
border-radius: 4px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
align-self: flex-start;
}
.service-cards.view-list .service-card .card-date {
order: 1;
font-size: 11px !important;
color: var(--primary) !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 !important;
}
/* Hide the price block entirely in list view (user wants cards without
prices) */
.service-cards.view-list .service-card-price {
display: none !important;
}
/* Floating "Подробнее →" CTA in the bottom-right of the card */
.service-cards.view-list .service-card-body::after {
content: "Подробнее →";
position: absolute;
right: 24px;
bottom: 24px;
display: inline-flex;
align-items: center;
padding: 10px 22px;
background: var(--primary);
color: #fff;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 18%, transparent);
transition: all 0.2s;
pointer-events: none;
}
.service-cards.view-list .service-card:hover .service-card-body::after {
background: var(--primary-hover);
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 16%, transparent);
transform: translateY(-1px);
}
/* No-image cards: use full width with a blue accent bar on the left */
.service-cards.view-list .service-card.no-img {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
min-height: 180px !important;
}
.service-cards.view-list .service-card.no-img::before {
display: none;
}
.service-cards.view-list .service-card.no-img .service-card-body {
grid-column: 1 !important;
padding: 24px 200px 24px 32px !important;
border-left: 4px solid var(--primary);
}
}
/* Mobile / tablet: flat vertical stack */
@media (max-width: 900px) {
.service-cards.view-list .service-card {
display: flex !important;
flex-direction: column !important;
}
.service-cards.view-list .service-card-img-link {
width: 100%;
height: 180px;
}
.service-cards.view-list .service-card-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.service-cards.view-list .service-card-body {
padding: 18px 20px 64px 20px;
position: relative;
}
.service-cards.view-list .service-card-body::after {
content: "Подробнее →";
position: absolute;
right: 20px;
bottom: 16px;
padding: 8px 16px;
background: var(--primary);
color: #fff;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 20%, transparent);
}
.service-cards.view-list .service-card-price {
display: none !important;
}
}
/* No-image cards: give them a subtle gradient "header strip" instead of a
fake empty 200px column. Prevents the skinny-list look when services
don't have photos uploaded. */
.service-card.no-img::before {
content: "";
display: block;
height: 6px;
background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 80%, white), var(--primary));
}
.service-cards.view-grid .service-card.no-img,
.service-cards.view-list .service-card.no-img {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
}
.service-cards.view-grid .service-card.no-img .service-card-body,
.service-cards.view-list .service-card.no-img .service-card-body {
padding: 20px 22px !important;
}
.service-card-title a {
color: #253748 !important;
font-weight: 700 !important;
letter-spacing: -0.01em;
font-size: 16px !important;
line-height: 1.35 !important;
}
.service-card-title a:hover { color: var(--primary) !important; }
.service-card-price {
color: #253748 !important;
font-weight: 800 !important;
letter-spacing: -0.01em;
font-size: 18px !important;
margin-top: 6px;
}
.service-card-desc {
color: #7C8C9B !important;
font-size: 13px !important;
line-height: 1.55 !important;
margin-top: 8px;
}
/* Image cards: ensure the image corner rounds match the card */
.service-card-img {
background: linear-gradient(135deg, #F2F7FB, #E1EBF5) !important;
}
.service-card-img-placeholder {
background: linear-gradient(135deg, #F2F7FB 0%, #E1EBF5 100%) !important;
color: #B7C3D1 !important;
font-weight: 600;
}
.service-cards.view-grid { gap: 20px !important; }
.service-cards.view-grid .service-card { padding: 0 !important; }
/* Card badges (category, status) — CruClub coral/blue style */
.service-card .card-badge,
.service-card .badge-green {
display: inline-flex;
align-items: center;
padding: 4px 10px !important;
background: #E1EBF5 !important;
color: var(--primary) !important;
border-radius: 4px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 10px;
}
/* Date text inside cards — muted, small */
.service-card .card-date {
display: inline-block;
font-size: 11px !important;
color: #B7C3D1 !important;
margin-top: 8px;
margin-left: 8px;
}
/* Card footer (category, location, rating row) */
.service-card-footer {
border-top: 1px dashed #E1EBF5 !important;
padding-top: 12px;
}
/* Quick-view and quick-order floating buttons — show on hover only */
.service-card .quick-view-btn {
border-radius: 8px !important;
background: #fff !important;
border: 1px solid #E1EBF5 !important;
color: var(--primary) !important;
box-shadow: 0 2px 6px rgba(170, 175, 190, 0.2) !important;
}
.service-card:hover .quick-view-btn { opacity: 1 !important; }
.service-card .quick-view-btn:hover {
background: var(--primary) !important;
color: #fff !important;
border-color: var(--primary) !important;
}
/* Favorite icon — coral instead of the old red */
.card-fav-btn:hover,
.card-fav-btn.active { color: #FF7E6C !important; }
/* ── Pagination ── */
.pagination a,
.pagination span {
border-radius: 8px !important;
border: 1px solid #E1EBF5 !important;
background: #fff !important;
color: #3F5972 !important;
font-weight: 600 !important;
transition: all 0.15s;
}
.pagination a:hover {
border-color: var(--primary) !important;
color: var(--primary) !important;
background: #fff !important;
transform: translateY(-1px);
}
.pagination .current {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: #fff !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 22%, transparent);
}
/* ── Detail page — catalog/services/shop/.../show.html.twig ── */
.content:has(.detail-grid),
body:has(.detail-grid) .content {
padding-top: 32px;
}
.detail-grid {
gap: 32px;
margin-top: 24px;
}
@media (max-width: 1024px) {
.detail-grid {
grid-template-columns: 1fr !important;
gap: 24px;
}
}
/* Gallery */
.detail-gallery img {
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(170, 175, 190, 0.16);
width: 100%;
height: auto;
}
.detail-gallery > div[style*="no-photo"],
.detail-gallery > div[style*="aspect-ratio"] {
background: linear-gradient(135deg, #F2F7FB 0%, #E1EBF5 100%) !important;
border-radius: 8px !important;
color: #B7C3D1 !important;
font-weight: 600;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08);
}
/* Description block under gallery */
.detail-desc {
color: #3F5972 !important;
font-size: 15px !important;
line-height: 1.75 !important;
padding: 24px 0;
}
.detail-desc h2, .detail-desc h3, .detail-desc h4 {
color: #253748 !important;
margin-top: 24px;
margin-bottom: 10px;
font-weight: 800;
letter-spacing: -0.01em;
}
.detail-desc h2 { font-size: 22px; }
.detail-desc h3 { font-size: 18px; }
.detail-desc h4 { font-size: 16px; }
.detail-desc p { margin: 0 0 12px; }
.detail-desc ul, .detail-desc ol { padding-left: 24px; margin: 0 0 12px; }
.detail-desc li { margin-bottom: 6px; }
.detail-desc a { color: var(--primary); text-decoration: none; border-bottom: 1px solid #E1EBF5; }
.detail-desc a:hover { color: var(--primary-hover); border-bottom-color: var(--primary); }
/* Attributes list */
.detail-attrs {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 20px 24px;
margin-top: 8px;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08);
}
.detail-attrs dt {
color: #7C8C9B !important;
font-weight: 600 !important;
font-size: 13px;
padding: 10px 0 !important;
border-color: #E1EBF5 !important;
}
.detail-attrs dd {
color: #253748 !important;
font-weight: 600;
font-size: 14px;
padding: 10px 0 !important;
border-color: #E1EBF5 !important;
}
/* ── Sidebar info card (sticky) ── */
.detail-info > div {
background: #fff !important;
border: 1px solid #E1EBF5 !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(170, 175, 190, 0.16) !important;
padding: 28px !important;
}
.detail-info h1 {
font-size: 22px !important;
line-height: 1.3 !important;
color: #253748 !important;
font-weight: 800 !important;
letter-spacing: -0.02em;
margin: 0 0 14px !important;
}
/* Rating row */
.detail-info .card-rating {
display: flex;
align-items: center;
gap: 4px;
color: #FDA04A;
font-size: 14px;
font-weight: 700;
margin-bottom: 14px !important;
}
.detail-info .card-rating svg {
width: 16px;
height: 16px;
}
.detail-info .card-rating .star-filled { color: #FDA04A; }
.detail-info .card-rating .star-empty { color: #E1EBF5; }
.detail-info .card-rating .rating-value {
color: #253748;
margin-left: 4px;
}
.detail-info .card-rating > span:last-child {
color: #7C8C9B;
font-weight: 500;
margin-left: 2px;
}
/* Category badge inside detail info */
.detail-info .card-badge,
.detail-info .badge-blue {
display: inline-flex;
align-items: center;
padding: 5px 12px !important;
background: #E1EBF5 !important;
color: var(--primary) !important;
border-radius: 4px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px !important;
}
/* Big price in sidebar */
.detail-info .detail-price {
font-size: 32px !important;
color: #253748 !important;
font-weight: 800 !important;
letter-spacing: -0.02em;
border-color: #E1EBF5 !important;
}
/* Contact info block */
.detail-info > div > div[style*="bg-page"],
.detail-info > div > div[style*="background:var(--bg-page"] {
background: #F2F7FB !important;
border-radius: 8px !important;
padding: 16px !important;
border: 1px solid #E1EBF5;
}
.detail-info a[href^="tel:"] {
color: var(--primary) !important;
font-weight: 800 !important;
font-size: 18px;
letter-spacing: -0.01em;
}
.detail-info a[href^="tel:"]:hover { color: var(--primary-hover) !important; }
/* Action buttons inside sidebar — consistent 8px radius, brand shadow for primary */
.detail-info #add-to-cart-btn,
.detail-info button[id^="add-to-cart"],
.detail-info a[href*="write-message"],
.detail-info a[href*="/account/messages/new/"] {
background: var(--primary) !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
font-weight: 700 !important;
transition: all 0.2s !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}
.detail-info #add-to-cart-btn:hover,
.detail-info a[href*="/account/messages/new/"]:hover {
background: var(--primary-hover) !important;
transform: translateY(-1px);
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 16%, transparent) !important;
}
/* Top-promote button — warm orange */
.detail-info a[href*="/account/top-placement/"],
.detail-info a[href*="/top-placement/"] {
background: linear-gradient(135deg, #FDA04A, #FB7A19) !important;
color: #fff !important;
border-radius: 8px !important;
font-weight: 700 !important;
box-shadow: 0 2px 8px rgba(253, 160, 74, 0.22) !important;
transition: all 0.2s;
}
.detail-info a[href*="/account/top-placement/"]:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(253, 160, 74, 0.26) !important;
}
/* Favorite toggle button — coral when active, neutral when off */
.detail-info #fav-btn {
border-radius: 8px !important;
font-weight: 700 !important;
transition: all 0.15s;
background: #fff !important;
}
.detail-info #fav-btn[style*="#fecaca"],
.detail-info #fav-btn[style*="#ef4444"] {
border: 1px solid rgba(255, 126, 108, 0.35) !important;
background: rgba(255, 126, 108, 0.05) !important;
color: #FF7E6C !important;
}
.detail-info #fav-btn[style*="#fecaca"] #fav-icon,
.detail-info #fav-btn[style*="#ef4444"] #fav-icon {
color: #FF7E6C !important;
}
/* Published-at meta text */
.detail-info > div > div[style*="color:var(--text-muted"] {
color: #B7C3D1 !important;
font-size: 12px !important;
padding-top: 18px;
border-top: 1px dashed #E1EBF5;
margin-top: 20px !important;
}
/* ── Detail page on mobile: un-sticky the sidebar, widen gallery ── */
@media (max-width: 1024px) {
.detail-info > div {
position: static !important;
}
}
/* ══════════════════════════════════════════════════════════════
COMPANY PROFILE PAGE — /companies/{slug}
Hero card (cover + logo + tabs) + 2-column grid below
══════════════════════════════════════════════════════════════ */
.company-hero {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(170, 175, 190, 0.16);
}
.company-hero__cover {
height: 240px;
background: linear-gradient(135deg, #F2F7FB, #E1EBF5);
overflow: hidden;
position: relative;
}
.company-hero__cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(37, 55, 72, 0) 40%, rgba(37, 55, 72, 0.25) 100%);
}
.company-hero__cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.company-hero__body {
padding: 28px 32px 0;
}
.company-hero__main {
display: flex;
gap: 24px;
align-items: flex-start;
flex-wrap: wrap;
}
.company-hero__logo {
width: 110px;
height: 110px;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 28%, transparent);
display: flex;
align-items: center;
justify-content: center;
margin-top: -64px;
border: 4px solid #fff;
}
.company-hero__logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.company-hero__logo-initial {
font-size: 44px;
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
}
.company-hero__info {
flex: 1;
min-width: 0;
}
.company-hero__name {
margin: 0 0 8px !important;
font-size: 28px;
font-weight: 800;
color: #253748;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.company-hero__verified {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: #4BC200;
color: #fff;
border-radius: 4px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(75, 194, 0, 0.3);
vertical-align: middle;
}
.company-hero__desc {
margin: 0 0 14px;
color: #7C8C9B;
font-size: 15px;
line-height: 1.55;
max-width: 720px;
}
.company-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
font-size: 13px;
color: #7C8C9B;
}
.company-hero__meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
color: #3F5972;
text-decoration: none;
}
.company-hero__meta-item strong { color: #253748; font-weight: 800; }
.company-hero__meta-item svg { color: #7C8C9B; flex-shrink: 0; }
.company-hero__phone:hover { color: var(--primary); }
.company-hero__actions {
display: flex;
gap: 10px;
align-self: flex-start;
flex-wrap: wrap;
}
.company-hero__actions .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s;
}
.company-hero__actions .btn--primary {
background: var(--primary);
color: #fff;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 18%, transparent);
}
.company-hero__actions .btn--primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 16%, transparent);
}
.company-hero__actions .btn--ghost {
background: #fff;
color: #253748;
border-color: #E1EBF5;
}
.company-hero__actions .btn--ghost:hover {
border-color: var(--primary);
color: var(--primary);
}
.company-hero__actions .btn--ghost.is-active {
background: rgba(255, 126, 108, 0.08);
color: #FF7E6C;
border-color: rgba(255, 126, 108, 0.35);
}
/* Tabs row */
.company-tabs {
display: flex;
gap: 0;
margin-top: 28px;
border-top: 1px solid #E1EBF5;
overflow-x: auto;
scrollbar-width: none;
}
.company-tabs::-webkit-scrollbar { display: none; }
.company-tabs__link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 16px 20px;
color: #7C8C9B;
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: all 0.15s;
white-space: nowrap;
}
.company-tabs__link:hover { color: var(--primary); }
.company-tabs__link.is-active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.company-tabs__count {
display: inline-flex;
align-items: center;
padding: 1px 7px;
background: #E1EBF5;
color: #3F5972;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
}
.company-tabs__link.is-active .company-tabs__count {
background: var(--primary);
color: #fff;
}
/* ── Main grid: content + sidebar ── */
.company-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 24px;
}
@media (max-width: 1024px) {
.company-grid {
grid-template-columns: 1fr;
}
}
.company-block {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 28px;
margin-bottom: 20px;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08);
}
.company-block__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.company-block__head .title-wave {
margin-bottom: 0 !important;
}
.company-block .title-wave {
font-size: 22px;
padding-left: 58px;
margin-bottom: 20px;
color: #253748;
}
.company-block__text {
color: #3F5972;
font-size: 15px;
line-height: 1.7;
}
.company-block__text p { margin: 0 0 12px; }
.company-block__text p:last-child { margin-bottom: 0; }
.company-block__text a { color: var(--primary); text-decoration: none; border-bottom: 1px solid #E1EBF5; }
.company-block__text a:hover { color: var(--primary-hover); border-bottom-color: var(--primary); }
/* Services list inside company — rows instead of cards */
.company-services-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.company-service-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
background: var(--primary-bg);
border: 1px solid #E1EBF5;
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: all 0.2s;
}
.company-service-row:hover {
background: #fff;
border-color: var(--primary);
color: inherit;
transform: translateX(4px);
box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 12%, transparent);
}
.company-service-row__main { min-width: 0; flex: 1; }
.company-service-row__name {
font-size: 15px;
font-weight: 700;
color: #253748;
margin-bottom: 4px;
}
.company-service-row__meta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #7C8C9B;
}
.company-service-row__cta {
flex-shrink: 0;
padding: 8px 16px;
background: var(--primary);
color: #fff;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 28%, transparent);
transition: all 0.2s;
}
.company-service-row:hover .company-service-row__cta {
background: var(--primary-hover);
box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 38%, transparent);
}
/* Masters grid */
.masters-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.master-card {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 20px 16px;
text-align: center;
text-decoration: none;
color: inherit;
transition: all 0.25s;
}
.master-card:hover {
border-color: transparent;
color: inherit;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(170, 175, 190, 0.18);
}
.master-card__avatar {
width: 84px;
height: 84px;
margin: 0 auto 14px;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 18%, transparent);
display: flex;
align-items: center;
justify-content: center;
}
.master-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.master-card__avatar span {
font-size: 32px;
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
}
.master-card__name {
font-size: 15px;
font-weight: 800;
color: #253748;
margin-bottom: 4px;
}
.master-card__role {
font-size: 11px;
font-weight: 600;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.master-card__rating {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 700;
color: #253748;
}
.master-card__rating span {
color: #7C8C9B;
font-weight: 500;
}
/* Sidebar cards */
.company-grid__side {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 88px;
align-self: start;
}
@media (max-width: 1024px) {
.company-grid__side {
position: static;
}
}
.company-side-card {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 24px;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08);
}
.company-side-card__title {
font-size: 13px;
font-weight: 800;
color: #253748;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #E1EBF5;
}
.company-side-card__row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #F2F7FB;
}
.company-side-card__row:last-of-type { border-bottom: none; }
.company-side-card__ic {
width: 34px;
height: 34px;
border-radius: 8px;
background: #E1EBF5;
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.company-side-card__content { min-width: 0; flex: 1; }
.company-side-card__label {
font-size: 11px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.company-side-card__value {
font-size: 14px;
font-weight: 600;
color: #253748;
word-wrap: break-word;
}
.company-side-card__value--link {
color: var(--primary);
text-decoration: none;
display: block;
}
.company-side-card__value--link:hover { color: var(--primary-hover); }
.company-side-card__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 13px 22px;
margin-top: 18px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 18%, transparent);
transition: all 0.2s;
}
.company-side-card__cta:hover {
background: var(--primary-hover);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 16%, transparent);
}
/* Facts strip inside sidebar */
.company-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
gap: 12px;
}
.company-fact {
text-align: center;
padding: 14px 8px;
background: var(--primary-bg);
border-radius: 8px;
border: 1px solid #E1EBF5;
}
.company-fact__value {
font-size: 22px;
font-weight: 800;
color: var(--primary);
line-height: 1;
letter-spacing: -0.02em;
}
.company-fact__label {
font-size: 11px;
color: #7C8C9B;
font-weight: 600;
margin-top: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.company-hero__body { padding: 20px 20px 0; }
.company-hero__logo { width: 84px; height: 84px; margin-top: -48px; }
.company-hero__logo-initial { font-size: 34px; }
.company-hero__name { font-size: 22px; }
.company-hero__actions { width: 100%; }
.company-hero__actions .btn { flex: 1; justify-content: center; }
.company-block { padding: 20px; }
.company-side-card { padding: 20px; }
}
/* ══════════════════════════════════════════════════════════════
MASTERS INDEX — /masters
══════════════════════════════════════════════════════════════ */
.content h1 .h1-count {
display: inline-block;
margin-left: 10px;
font-size: 16px;
font-weight: 500;
color: #B7C3D1;
letter-spacing: 0;
vertical-align: middle;
}
.masters-search {
display: flex;
gap: 10px;
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 10px;
margin-bottom: 28px;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08);
transition: all 0.15s;
}
.masters-search:focus-within {
border-color: var(--primary);
box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 15%, transparent);
}
.masters-search__field {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
min-width: 0;
}
.masters-search__field svg { color: #7C8C9B; flex-shrink: 0; }
.masters-search__field input {
flex: 1;
border: none;
outline: none;
font-size: 15px;
color: #253748;
font-family: inherit;
background: transparent;
min-width: 0;
}
.masters-search__field input::placeholder { color: #7C8C9B; }
.masters-search__btn {
padding: 0 26px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 20%, transparent);
}
.masters-search__btn:hover {
background: var(--primary-hover);
transform: translateY(-1px);
}
/* Masters grid index — bigger cards with full info + CTA */
.masters-grid--index {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
gap: 20px !important;
}
.master-card--full {
padding: 24px 20px !important;
position: relative;
}
.master-card--full .master-card__avatar {
width: 96px !important;
height: 96px !important;
position: relative;
}
.master-card--full .master-card__avatar span {
font-size: 36px !important;
}
.master-card__badge {
position: absolute;
bottom: -2px;
right: -2px;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 8px;
background: #fff;
color: #253748;
border-radius: 6px;
font-size: 11px;
font-weight: 800;
box-shadow: 0 1px 3px rgba(170, 175, 190, 0.18);
border: 1px solid #E1EBF5;
}
.master-card__badge svg { color: #FDA04A; }
.master-card__meta {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed #E1EBF5;
}
.master-card__meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #7C8C9B;
justify-content: center;
}
.master-card__meta-item svg { color: #B7C3D1; }
.master-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 16px;
padding: 9px 18px;
background: var(--primary-bg);
color: var(--primary);
border: 1px solid #E1EBF5;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
transition: all 0.2s;
}
.master-card--full:hover .master-card__cta {
background: var(--primary);
color: #fff;
border-color: var(--primary);
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 20%, transparent);
}
.masters-empty {
text-align: center;
padding: 80px 20px;
background: #fff;
border: 1px dashed #E1EBF5;
border-radius: 8px;
}
.masters-empty svg { margin: 0 auto 16px; display: block; }
.masters-empty p {
font-size: 16px;
color: #7C8C9B;
margin: 0 0 16px;
}
.masters-empty .btn {
display: inline-flex;
align-items: center;
padding: 10px 22px;
background: #fff;
color: #253748;
border: 1px solid #E1EBF5;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: all 0.15s;
}
.masters-empty .btn:hover {
border-color: var(--primary);
color: var(--primary);
}
/* ══════════════════════════════════════════════════════════════
MASTER PROFILE — /masters/{slug}
══════════════════════════════════════════════════════════════ */
.master-hero {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 28px;
align-items: center;
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 32px;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(170, 175, 190, 0.16);
}
.master-hero__avatar {
width: 140px;
height: 140px;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 28%, transparent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.master-hero__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.master-hero__avatar span {
font-size: 56px;
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
}
.master-hero__info { min-width: 0; }
.master-hero__name {
margin: 0 0 6px;
font-size: 30px;
font-weight: 800;
color: #253748;
letter-spacing: -0.02em;
}
.master-hero__role {
font-size: 14px;
font-weight: 700;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 18px;
}
.master-hero__stats {
display: flex;
flex-wrap: wrap;
gap: 24px 36px;
}
.master-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.master-stat__value {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 22px;
font-weight: 800;
color: #253748;
letter-spacing: -0.02em;
line-height: 1;
}
.master-stat__label {
font-size: 11px;
font-weight: 600;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.master-hero__actions {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
align-self: center;
}
.master-hero__actions .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
min-width: 160px;
justify-content: center;
}
.master-hero__actions .btn--primary {
background: var(--primary);
color: #fff;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 18%, transparent);
}
.master-hero__actions .btn--primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
}
.master-hero__actions .btn--ghost {
background: #fff;
color: #253748;
border-color: #E1EBF5;
}
.master-hero__actions .btn--ghost:hover {
border-color: var(--primary);
color: var(--primary);
}
.master-hero__actions .btn--ghost.is-active {
background: rgba(255, 126, 108, 0.08);
color: #FF7E6C;
border-color: rgba(255, 126, 108, 0.35);
}
/* Main grid — same layout as company profile */
.master-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 24px;
}
@media (max-width: 1024px) {
.master-grid { grid-template-columns: 1fr; }
}
.master-grid__main { min-width: 0; }
/* Sidebar: list of companies the master works for */
.master-companies-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.master-company-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--primary-bg);
border: 1px solid #E1EBF5;
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: all 0.2s;
}
.master-company-item:hover {
background: #fff;
border-color: var(--primary);
color: inherit;
transform: translateX(3px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 12%, transparent);
}
.master-company-item__logo {
width: 48px;
height: 48px;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 800;
flex-shrink: 0;
}
.master-company-item__logo img { width: 100%; height: 100%; object-fit: cover; }
.master-company-item__body { min-width: 0; flex: 1; }
.master-company-item__name {
font-size: 14px;
font-weight: 700;
color: #253748;
margin-bottom: 2px;
line-height: 1.3;
}
.master-company-item__addr {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: #7C8C9B;
}
.master-company-item__addr svg { color: #B7C3D1; flex-shrink: 0; }
/* Master hero responsive */
@media (max-width: 900px) {
.master-hero {
grid-template-columns: auto minmax(0, 1fr);
padding: 24px;
gap: 20px;
}
.master-hero__actions {
grid-column: 1 / -1;
flex-direction: row;
}
.master-hero__actions .btn {
flex: 1;
min-width: 0;
}
.master-hero__stats {
gap: 16px 24px;
}
}
@media (max-width: 560px) {
.master-hero {
grid-template-columns: 1fr;
text-align: center;
}
.master-hero__avatar {
width: 110px;
height: 110px;
margin: 0 auto;
}
.master-hero__avatar span { font-size: 44px; }
.master-hero__name { font-size: 24px; }
.master-hero__stats {
justify-content: center;
}
}
/* ══════════════════════════════════════════════════════════════
CART PAGE — /account/cart
Horizontal cart items + sticky summary
══════════════════════════════════════════════════════════════ */
.cart-wrap,
.checkout-wrap {
min-width: 0;
}
.cart-wrap h1,
.checkout-wrap h1 {
font-size: 28px;
font-weight: 800;
color: #253748;
letter-spacing: -0.02em;
margin: 0 0 24px;
}
.cart-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.cart-item {
display: grid;
grid-template-columns: 100px minmax(0, 1fr) auto auto auto;
gap: 20px;
align-items: center;
padding: 18px 22px;
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08);
transition: all 0.2s;
}
.cart-item:hover {
border-color: var(--primary);
box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 12%, transparent);
}
.cart-item__img {
display: block;
width: 100px;
height: 100px;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(135deg, #F2F7FB, #E1EBF5);
flex-shrink: 0;
}
.cart-item__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-item__img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #B7C3D1;
font-size: 11px;
font-weight: 600;
}
.cart-item__info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.cart-item__eyebrow {
display: inline-flex;
align-self: flex-start;
padding: 3px 9px;
background: #E1EBF5;
color: var(--primary);
border-radius: 4px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.cart-item__eyebrow--shop { background: #E1EBF5; color: var(--primary); }
.cart-item__eyebrow--marketplace { background: #dcfce7; color: #16a34a; }
.cart-item__eyebrow--services { background: #fff7ed; color: #FDA04A; }
.cart-item__title {
margin: 0;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: #253748;
}
.cart-item__title a {
color: inherit;
text-decoration: none;
}
.cart-item__title a:hover { color: var(--primary); }
.cart-item__variant {
font-size: 12px;
color: #7C8C9B;
}
.cart-item__unavailable {
display: inline-block;
padding: 2px 8px;
background: rgba(255, 126, 108, 0.12);
color: #FF6652;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
}
.cart-item__price-per {
font-size: 13px;
color: #7C8C9B;
font-weight: 600;
margin-top: 2px;
}
.cart-item__price-per-label {
color: #B7C3D1;
font-weight: 500;
}
.cart-item__qty,
.cart-item__subtotal {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.cart-item__qty-label,
.cart-item__subtotal-label {
font-size: 10px;
font-weight: 700;
color: #B7C3D1;
text-transform: uppercase;
letter-spacing: 0.5px;
display: none; /* visible only on mobile */
}
.cart-item__subtotal strong {
font-size: 18px;
font-weight: 800;
color: #253748;
letter-spacing: -0.01em;
white-space: nowrap;
}
.cart-qty {
display: inline-flex;
align-items: center;
gap: 0;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 2px;
}
.cart-qty button {
width: 32px;
height: 32px;
border: none;
background: transparent;
color: #3F5972;
font-size: 16px;
font-weight: 700;
cursor: pointer;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.cart-qty button:hover {
background: #fff;
color: var(--primary);
box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 18%, transparent);
}
.cart-qty span {
min-width: 32px;
text-align: center;
font-size: 15px;
font-weight: 800;
color: #253748;
padding: 0 4px;
}
.cart-item__remove {
width: 36px;
height: 36px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: #B7C3D1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.cart-item__remove:hover {
background: rgba(255, 126, 108, 0.08);
border-color: rgba(255, 126, 108, 0.35);
color: #FF7E6C;
}
/* Summary bar below list */
.cart-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 20px;
padding: 24px 28px;
background: linear-gradient(135deg, var(--primary-bg) 0%, #E1EBF5 100%);
border: 1px solid #E1EBF5;
border-radius: 8px;
}
.cart-summary__info {
display: flex;
flex-direction: column;
gap: 4px;
}
.cart-summary__label {
font-size: 12px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cart-summary__total {
font-size: 28px;
font-weight: 800;
color: #253748;
letter-spacing: -0.02em;
line-height: 1;
}
.cart-summary__checkout {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: var(--primary);
color: #fff;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 22%, transparent);
transition: all 0.2s;
}
.cart-summary__checkout:hover {
background: var(--primary-hover);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 26%, transparent);
text-decoration: none;
}
.cart-empty {
text-align: center;
padding: 80px 20px;
background: #fff;
border: 1px dashed #E1EBF5;
border-radius: 8px;
}
.cart-empty svg {
color: #B7C3D1;
margin: 0 auto 16px;
display: block;
}
.cart-empty h3 {
font-size: 20px;
font-weight: 800;
color: #253748;
margin: 0 0 8px;
}
.cart-empty p {
color: #7C8C9B;
font-size: 14px;
margin: 0 0 20px;
}
.cart-empty .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--primary);
color: #fff;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 18%, transparent);
transition: all 0.2s;
}
.cart-empty .btn:hover {
background: var(--primary-hover);
transform: translateY(-1px);
color: #fff;
}
/* Cart mobile — stack */
@media (max-width: 768px) {
.cart-item {
grid-template-columns: 80px minmax(0, 1fr);
gap: 14px;
padding: 14px 16px;
}
.cart-item__img {
width: 80px;
height: 80px;
}
.cart-item__qty,
.cart-item__subtotal {
grid-column: 1 / -1;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 1px dashed #E1EBF5;
}
.cart-item__qty-label,
.cart-item__subtotal-label {
display: block;
}
.cart-item__remove {
position: absolute;
top: 10px;
right: 10px;
}
.cart-item { position: relative; }
.cart-summary {
flex-direction: column;
align-items: stretch;
padding: 18px 20px;
}
.cart-summary__checkout {
justify-content: center;
}
}
/* ══════════════════════════════════════════════════════════════
CHECKOUT PAGE — /account/checkout
══════════════════════════════════════════════════════════════ */
.checkout-alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
background: rgba(255, 126, 108, 0.08);
border: 1px solid rgba(255, 126, 108, 0.3);
color: #FF6652;
border-radius: 8px;
margin-bottom: 20px;
}
.checkout-alert svg { flex-shrink: 0; margin-top: 2px; }
.checkout-alert ul {
margin: 0;
padding-left: 16px;
font-size: 14px;
}
.checkout-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 24px;
align-items: start;
}
@media (max-width: 1024px) {
.checkout-grid {
grid-template-columns: 1fr;
}
}
.checkout-main {
display: flex;
flex-direction: column;
gap: 20px;
}
.checkout-block {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 28px;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08);
}
.checkout-block .title-wave {
font-size: 20px;
padding-left: 58px;
margin-bottom: 20px;
color: #253748;
}
/* Form elements */
.checkout-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.checkout-form .form-group { margin-bottom: 14px; }
.checkout-form .form-row .form-group { margin-bottom: 14px; }
.checkout-form .form-label {
display: block;
font-size: 11px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.checkout-form .form-input,
.checkout-form .form-textarea,
.form-input,
.form-textarea {
width: 100%;
padding: 12px 16px;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
font-size: 14px;
color: #253748;
font-family: inherit;
outline: none;
transition: all 0.15s;
}
.checkout-form .form-input:focus,
.checkout-form .form-textarea:focus,
.form-input:focus,
.form-textarea:focus {
background: #fff;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.checkout-form .form-textarea,
.form-textarea { resize: vertical; min-height: 88px; }
.checkout-form .form-input::placeholder,
.checkout-form .form-textarea::placeholder { color: #B7C3D1; }
@media (max-width: 640px) {
.checkout-form .form-row { grid-template-columns: 1fr; }
}
/* Radio options (shipping + payment) */
.checkout-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.checkout-options__loading,
.checkout-options__empty {
padding: 16px;
background: #F2F7FB;
border-radius: 8px;
color: #7C8C9B;
font-size: 13px;
text-align: center;
}
.checkout-option {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.checkout-option:hover {
border-color: var(--primary);
background: var(--primary-bg);
}
.checkout-option.is-selected {
border-color: var(--primary);
background: var(--primary-bg);
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 15%, transparent);
}
.checkout-option input[type="radio"] {
accent-color: var(--primary);
width: 18px;
height: 18px;
flex-shrink: 0;
}
.checkout-option__icon {
width: 40px;
height: 40px;
flex-shrink: 0;
background: #E1EBF5;
color: var(--primary);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.checkout-option.is-selected .checkout-option__icon {
background: var(--primary);
color: #fff;
}
.checkout-option__body {
flex: 1;
min-width: 0;
}
.checkout-option__title {
font-size: 14px;
font-weight: 700;
color: #253748;
line-height: 1.3;
}
.checkout-option__desc {
font-size: 12px;
color: #7C8C9B;
margin-top: 2px;
}
.checkout-option__price {
font-size: 15px;
font-weight: 800;
color: #253748;
white-space: nowrap;
}
.checkout-option__price.is-free {
color: #4BC200;
}
/* Order summary sidebar */
.checkout-side {
position: sticky;
top: 88px;
min-width: 0;
}
@media (max-width: 1024px) {
.checkout-side {
position: static;
order: -1;
}
}
.order-summary {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 24px;
box-shadow: 0 2px 8px rgba(170, 175, 190, 0.16);
}
.order-summary__title {
font-size: 13px;
font-weight: 800;
color: #253748;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #E1EBF5;
}
.order-summary__items {
display: flex;
flex-direction: column;
max-height: 260px;
overflow-y: auto;
margin: 0 -6px 8px;
padding: 0 6px;
}
.order-summary__items::-webkit-scrollbar { width: 6px; }
.order-summary__items::-webkit-scrollbar-thumb {
background: #E1EBF5;
border-radius: 3px;
}
.order-summary__items::-webkit-scrollbar-thumb:hover { background: #B7C3D1; }
.order-item {
display: flex;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #F2F7FB;
}
.order-item:last-child { border-bottom: none; }
.order-item__img {
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(135deg, #F2F7FB, #E1EBF5);
display: flex;
align-items: center;
justify-content: center;
color: #B7C3D1;
font-size: 12px;
}
.order-item__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.order-item__info {
flex: 1;
min-width: 0;
}
.order-item__title {
font-size: 13px;
font-weight: 700;
color: #253748;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.order-item__meta {
font-size: 11px;
color: #7C8C9B;
margin-top: 2px;
}
.order-item__price {
font-size: 13px;
font-weight: 800;
color: #253748;
white-space: nowrap;
}
/* Promo block */
.promo-block {
padding: 14px 0;
border-top: 1px solid #E1EBF5;
margin-top: 8px;
}
.promo-block__label {
display: block;
font-size: 11px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.promo-block__row {
display: flex;
gap: 6px;
}
.promo-block__row .form-input {
flex: 1;
padding: 10px 14px;
text-transform: uppercase;
font-size: 13px;
}
.promo-block__btn {
padding: 10px 18px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.promo-block__btn:hover { background: var(--primary-hover); }
.promo-block__result {
margin-top: 8px;
font-size: 12px;
min-height: 18px;
}
.promo-block__result .promo-ok {
color: #4BC200;
font-weight: 700;
}
.promo-block__result .promo-error {
color: #FF6652;
font-weight: 600;
}
/* Loyalty block */
.loyalty-block {
padding: 14px 0;
border-top: 1px solid #E1EBF5;
}
.loyalty-block__title {
font-size: 11px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.loyalty-block__balance {
font-size: 14px;
color: #253748;
margin-bottom: 8px;
}
.loyalty-block__balance #loyalty-balance {
font-weight: 800;
color: var(--primary);
}
.loyalty-block__value { color: #7C8C9B; font-size: 12px; }
.loyalty-block__row {
display: flex;
gap: 6px;
margin-top: 6px;
}
.loyalty-block__row .form-input {
width: 100px;
padding: 8px 12px;
}
.loyalty-block__btn {
padding: 8px 14px;
background: #E1EBF5;
color: var(--primary);
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
}
.loyalty-block__btn:hover { background: var(--primary); color: #fff; }
/* Breakdown + total */
.order-summary__breakdown {
padding: 14px 0 10px;
border-top: 1px solid #E1EBF5;
margin-top: 4px;
}
.order-summary__line {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
font-weight: 800;
color: #253748;
letter-spacing: -0.01em;
}
.order-summary__line span:first-child {
font-size: 13px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.order-summary__hint {
font-size: 11px;
color: #B7C3D1;
text-align: right;
margin-top: 4px;
}
/* Wallet info block */
.wallet-info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
margin: 14px 0;
background: var(--primary-bg);
border: 1px solid #E1EBF5;
border-radius: 8px;
}
.wallet-info__label {
font-size: 12px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.wallet-info__balance {
font-size: 18px;
font-weight: 800;
color: var(--primary);
letter-spacing: -0.01em;
}
/* Pay button */
.btn-pay {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 15px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 800;
cursor: pointer;
text-align: center;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 22%, transparent);
transition: all 0.2s;
}
.btn-pay:hover:not(:disabled) {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 26%, transparent);
}
.btn-pay:disabled {
background: #E1EBF5;
color: #B7C3D1;
cursor: not-allowed;
box-shadow: none;
}
.checkout-hint-danger {
text-align: center;
font-size: 12px;
color: #FF6652;
margin: 10px 0 0;
}
.checkout-hint-danger a {
color: var(--primary);
font-weight: 700;
text-decoration: none;
}
.checkout-hint-danger a:hover { color: var(--primary-hover); }
.checkout-back {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 14px;
padding: 10px;
font-size: 13px;
color: #7C8C9B;
text-decoration: none;
font-weight: 600;
transition: color 0.15s;
}
.checkout-back:hover { color: var(--primary); }
/* ══════════════════════════════════════════════════════════════
SHOP PRODUCT PAGE — /shop/{slug} additions
Reuses .detail-grid / .detail-info / .detail-gallery from the
catalog/services show styles. This block covers the product-only
bits: variant selector, stock info, action buttons, related.
══════════════════════════════════════════════════════════════ */
/* Gallery fallback placeholder */
.detail-gallery__placeholder {
aspect-ratio: 16/10;
background: linear-gradient(135deg, #F2F7FB, #E1EBF5);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #B7C3D1;
font-size: 14px;
font-weight: 600;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08);
}
/* Contact block inside sidebar */
.detail-info .detail-contact {
background: var(--primary-bg);
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 16px;
}
.detail-info .detail-contact__name {
font-size: 14px;
font-weight: 700;
color: #253748;
margin-bottom: 2px;
}
.detail-info .detail-contact__phone {
font-size: 18px;
font-weight: 800;
color: var(--primary) !important;
letter-spacing: -0.01em;
text-decoration: none;
}
.detail-info .detail-contact__phone:hover { color: var(--primary-hover) !important; }
/* ── Variant selector ── */
.variant-selector {
margin: 16px 0 6px;
transition: outline 0.2s;
border-radius: 8px;
}
.variant-selector:empty { margin: 0; }
.variant-selector.is-highlight {
outline: 2px solid #FF7E6C;
outline-offset: 8px;
}
.variant-group {
margin-bottom: 14px;
}
.variant-group:last-child { margin-bottom: 0; }
.variant-group__label {
font-size: 11px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.variant-group__options {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.variant-btn {
padding: 8px 16px;
background: #fff;
border: 1.5px solid #E1EBF5;
border-radius: 8px;
color: #253748;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.variant-btn:hover:not(.is-disabled) {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-bg);
}
.variant-btn.is-selected {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: #fff !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 32%, transparent);
}
.variant-btn.is-disabled {
background: #F2F7FB;
border-color: #F2F7FB;
color: #B7C3D1;
text-decoration: line-through;
cursor: not-allowed;
opacity: 0.6;
}
.variant-select {
width: 100%;
padding: 10px 14px;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
color: #253748;
cursor: pointer;
}
.variant-select:focus {
outline: none;
background: #fff;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
/* ── Stock indicator + notify ── */
.stock-info {
margin: 12px 0;
font-size: 13px;
font-weight: 600;
min-height: 20px;
}
.stock-info:empty { margin: 0; min-height: 0; }
.stock-ok { color: #4BC200; }
.stock-warn { color: #FDA04A; }
.stock-danger { color: #FF6652; }
.stock-notify {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px;
background: var(--primary-bg);
border: 1px solid #E1EBF5;
border-radius: 8px;
margin-bottom: 16px;
}
.stock-notify__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #fff;
color: var(--primary);
border: 1px solid var(--primary);
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.stock-notify__btn:hover {
background: var(--primary);
color: #fff;
}
.stock-notify__email {
padding: 10px 14px;
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
font-size: 13px;
font-family: inherit;
outline: none;
}
.stock-notify__email:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.stock-notify__result { font-size: 12px; min-height: 16px; }
/* ── Action buttons inside .detail-info ── */
.detail-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
}
.detail-actions .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.detail-actions .btn--block { width: 100%; }
.detail-actions .btn--primary {
background: var(--primary);
color: #fff;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 18%, transparent);
}
.detail-actions .btn--primary:hover:not(:disabled) {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 16%, transparent);
color: #fff;
}
.detail-actions .btn--primary:disabled {
background: #E1EBF5;
color: #B7C3D1;
cursor: not-allowed;
box-shadow: none;
}
.detail-actions .btn--ghost {
background: #fff;
color: #253748;
border-color: #E1EBF5;
}
.detail-actions .btn--ghost:hover {
border-color: var(--primary);
color: var(--primary);
}
.detail-actions .btn--fav {
background: #fff;
color: #7C8C9B;
border-color: #E1EBF5;
}
.detail-actions .btn--fav:hover {
border-color: #FF7E6C;
color: #FF7E6C;
}
.detail-actions .btn--fav.is-active {
background: rgba(255, 126, 108, 0.08);
color: #FF7E6C;
border-color: rgba(255, 126, 108, 0.35);
}
.detail-actions .btn--fav.is-active #fav-icon {
fill: #FF7E6C;
}
.detail-actions .btn--whatsapp {
background: #25D366;
color: #fff;
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.28);
}
.detail-actions .btn--whatsapp:hover {
background: #1EB155;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.38);
}
.detail-meta {
margin-top: 18px;
padding-top: 16px;
border-top: 1px dashed #E1EBF5;
color: #B7C3D1;
font-size: 12px;
}
/* ══════════════════════════════════════════════════════════════
RELATED PRODUCTS — bought-together / similar / recs / recently
══════════════════════════════════════════════════════════════ */
.related-section {
margin-top: 48px;
}
.related-section .title-wave {
font-size: 22px;
padding-left: 58px;
margin-bottom: 20px;
color: #253748;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
@media (max-width: 640px) {
.related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
.related-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: all 0.25s ease;
}
.related-card:hover {
border-color: transparent;
color: inherit;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(170, 175, 190, 0.18);
}
.related-card__img {
aspect-ratio: 4/3;
background: linear-gradient(135deg, #F2F7FB, #E1EBF5);
display: flex;
align-items: center;
justify-content: center;
color: #B7C3D1;
font-size: 11px;
overflow: hidden;
}
.related-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.related-card:hover .related-card__img img {
transform: scale(1.05);
}
.related-card__body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.related-card__title {
font-size: 13px;
font-weight: 700;
color: #253748;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-card__price {
margin-top: auto;
font-size: 15px;
font-weight: 800;
color: var(--primary);
letter-spacing: -0.01em;
}
/* ══════════════════════════════════════════════════════════════
NEWS INDEX — /news
══════════════════════════════════════════════════════════════ */
.news-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 1024px) { .news-grid { grid-template-columns: 1fr; } }
.news-grid--related {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-top: 20px;
}
.news-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: all 0.25s ease;
}
.news-card:hover {
border-color: transparent;
color: inherit;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(170, 175, 190, 0.18);
}
.news-card__img {
position: relative;
aspect-ratio: 16/10;
background: linear-gradient(135deg, #F2F7FB, #E1EBF5);
overflow: hidden;
}
.news-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-card:hover .news-card__img img { transform: scale(1.05); }
.news-card__img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #B7C3D1;
font-size: 13px;
font-weight: 600;
}
.news-card__category {
position: absolute;
top: 14px;
left: 14px;
padding: 5px 12px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
color: var(--primary);
border-radius: 4px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 1px 3px rgba(170, 175, 190, 0.12);
}
.news-card__body {
padding: 20px 22px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.news-card__title {
font-size: 17px;
font-weight: 800;
color: #253748;
line-height: 1.35;
letter-spacing: -0.01em;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card__desc {
font-size: 13px;
line-height: 1.6;
color: #7C8C9B;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card__meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: auto;
padding-top: 10px;
border-top: 1px dashed #E1EBF5;
font-size: 12px;
color: #7C8C9B;
}
.news-card__date,
.news-card__views {
display: inline-flex;
align-items: center;
gap: 5px;
}
.news-card__date svg,
.news-card__views svg { color: #B7C3D1; }
/* ══════════════════════════════════════════════════════════════
NEWS ARTICLE — /news/{id}.html
══════════════════════════════════════════════════════════════ */
.news-article {
max-width: 820px;
margin: 28px auto 48px;
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 40px 44px;
box-shadow: 0 1px 3px rgba(170, 175, 190, 0.12);
}
@media (max-width: 768px) {
.news-article { padding: 24px 20px; margin: 16px 0 32px; }
}
.news-article__header { margin-bottom: 24px; }
.news-article__badge { margin-bottom: 14px; }
.news-article__title {
font-size: 34px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.025em;
color: #253748;
margin: 0 0 14px;
}
@media (max-width: 640px) { .news-article__title { font-size: 24px; } }
.news-article__meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 13px;
color: #7C8C9B;
font-weight: 500;
}
.news-article__meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.news-article__meta-item svg { color: #B7C3D1; }
.news-article__figure {
margin: 0 -44px 28px;
padding: 0;
}
.news-article__figure img {
width: 100%;
max-height: 480px;
object-fit: cover;
display: block;
}
@media (max-width: 768px) {
.news-article__figure { margin: 0 -20px 24px; }
}
.news-article__body {
font-size: 16px;
line-height: 1.8;
color: #3F5972;
}
.news-article__body p { margin: 0 0 16px; }
.news-article__body p:last-child { margin-bottom: 0; }
.news-article__body h2,
.news-article__body h3,
.news-article__body h4 {
color: #253748;
letter-spacing: -0.02em;
font-weight: 800;
margin: 28px 0 12px;
}
.news-article__body h2 { font-size: 24px; }
.news-article__body h3 { font-size: 20px; }
.news-article__body h4 { font-size: 17px; }
.news-article__body ul,
.news-article__body ol {
padding-left: 24px;
margin: 0 0 16px;
}
.news-article__body li { margin-bottom: 8px; }
.news-article__body a {
color: var(--primary);
text-decoration: none;
border-bottom: 1px solid #E1EBF5;
}
.news-article__body a:hover {
color: var(--primary-hover);
border-bottom-color: var(--primary);
}
.news-article__body blockquote {
margin: 20px 0;
padding: 16px 22px;
border-left: 3px solid var(--primary);
background: var(--primary-bg);
border-radius: 0 8px 8px 0;
font-style: italic;
color: #3F5972;
}
.news-article__body img,
.news-article__body figure img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 16px 0;
box-shadow: 0 4px 16px rgba(170, 175, 190, 0.25);
}
.news-article__body table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
border: 1px solid #E1EBF5;
border-radius: 8px;
overflow: hidden;
}
.news-article__body th,
.news-article__body td {
padding: 10px 14px;
border-bottom: 1px solid #E1EBF5;
text-align: left;
}
.news-article__body th {
background: #F2F7FB;
font-weight: 700;
color: #253748;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.news-article__body tr:last-child td { border-bottom: none; }
/* ── Share row ── */
.news-article__share {
display: flex;
align-items: center;
gap: 14px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #E1EBF5;
flex-wrap: wrap;
}
.news-article__share-label {
font-size: 12px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.news-article__share-btns {
display: flex;
gap: 8px;
}
.share-btn {
width: 40px;
height: 40px;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
color: #3F5972;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
font-family: inherit;
padding: 0;
transition: all 0.15s;
position: relative;
}
.share-btn:hover {
background: #fff;
border-color: var(--primary);
color: var(--primary);
transform: translateY(-1px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 12%, transparent);
}
.share-btn--tg:hover { color: #26A5E4; border-color: #26A5E4; }
.share-btn--wa:hover { color: #25D366; border-color: #25D366; }
.share-btn--copy.is-copied::after {
content: "Скопировано ✓";
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: 6px 10px;
background: #253748;
color: #fff;
font-size: 11px;
font-weight: 700;
border-radius: 4px;
white-space: nowrap;
}
/* ── Comments ── */
.news-comments {
margin-top: 44px;
padding-top: 32px;
border-top: 1px solid #E1EBF5;
}
.news-comments__head { margin-bottom: 24px; }
.news-comments__head .title-wave {
font-size: 22px;
padding-left: 58px;
margin: 0;
}
.news-comments__head #comments-count {
color: #B7C3D1;
font-weight: 500;
margin-left: 4px;
}
.comment-form {
background: var(--primary-bg);
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
}
.comment-form__title {
font-size: 14px;
font-weight: 800;
color: #253748;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 14px;
}
.comment-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
@media (max-width: 640px) {
.comment-form__row { grid-template-columns: 1fr; }
}
.comment-form .form-input,
.comment-form .form-textarea {
background: #fff;
margin-bottom: 12px;
}
.comment-form .form-input:last-child,
.comment-form .form-textarea:last-of-type { margin-bottom: 0; }
.comment-form__error,
.comment-form__success {
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
margin: 10px 0;
}
.comment-form__error {
background: rgba(255, 126, 108, 0.08);
border: 1px solid rgba(255, 126, 108, 0.3);
color: #FF6652;
}
.comment-form__success {
background: rgba(75, 194, 0, 0.08);
border: 1px solid rgba(75, 194, 0, 0.3);
color: #3a9700;
}
.comment-form .btn--primary {
display: inline-flex;
align-items: center;
padding: 12px 24px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 12px;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 18%, transparent);
transition: all 0.2s;
}
.comment-form .btn--primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
}
.reply-indicator {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
margin-bottom: 12px;
background: #E1EBF5;
border-radius: 8px;
font-size: 13px;
color: var(--primary);
font-weight: 600;
}
.reply-indicator svg { flex-shrink: 0; }
.reply-indicator__close {
margin-left: auto;
background: none;
border: none;
color: #7C8C9B;
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 0 4px;
}
.reply-indicator__close:hover { color: #FF6652; }
.comments-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.comments-list__empty {
text-align: center;
padding: 32px 20px;
color: #7C8C9B;
font-size: 14px;
background: #F2F7FB;
border-radius: 8px;
}
.comment-item {
display: flex;
gap: 14px;
padding: 18px 0;
border-bottom: 1px solid #F2F7FB;
}
.comment-item:last-child { border-bottom: none; }
.comment-item__avatar {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 8px;
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
color: #fff;
font-weight: 800;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 28%, transparent);
}
.comment-item__body { flex: 1; min-width: 0; }
.comment-item__head {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 4px;
flex-wrap: wrap;
}
.comment-item__name {
font-size: 14px;
font-weight: 800;
color: #253748;
}
.comment-item__date {
font-size: 12px;
color: #B7C3D1;
}
.comment-item__text {
font-size: 14px;
line-height: 1.6;
color: #3F5972;
margin-bottom: 8px;
white-space: pre-wrap;
word-wrap: break-word;
}
.comment-item__reply {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: none;
padding: 0;
color: var(--primary);
font-size: 12px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
}
.comment-item__reply:hover { color: var(--primary-hover); }
.comment-children {
margin-top: 14px;
margin-left: 0;
padding-left: 16px;
border-left: 2px solid #E1EBF5;
}
.comment-children .comment-item { padding: 14px 0; }
/* Related news section */
.news-related { max-width: 820px; margin: 0 auto; }
/* ══════════════════════════════════════════════════════════════
AUTH PAGES — login, register, forgot-password, reset-password
══════════════════════════════════════════════════════════════ */
.auth-container {
max-width: 460px;
margin: 60px auto;
padding: 0 20px;
}
.auth-container--wide {
max-width: 560px;
}
.auth-card {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 40px 36px;
box-shadow: 0 2px 8px rgba(170, 175, 190, 0.16);
}
.auth-header {
text-align: center;
margin-bottom: 28px;
}
.auth-header__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 8px;
background: linear-gradient(135deg, var(--primary-bg), #E1EBF5);
color: var(--primary);
margin-bottom: 16px;
}
.auth-title {
font-size: 24px;
font-weight: 800;
color: #253748;
letter-spacing: -0.02em;
text-align: center;
margin: 0 0 6px;
}
.auth-subtitle {
font-size: 14px;
color: #7C8C9B;
text-align: center;
margin: 0 0 4px;
line-height: 1.55;
}
/* Alerts */
.auth-error,
.auth-success {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
margin-bottom: 20px;
}
.auth-error {
background: rgba(255, 126, 108, 0.08);
border: 1px solid rgba(255, 126, 108, 0.3);
color: #FF6652;
}
.auth-success {
background: rgba(75, 194, 0, 0.08);
border: 1px solid rgba(75, 194, 0, 0.3);
color: #3a9700;
}
.auth-error svg,
.auth-success svg { flex-shrink: 0; margin-top: 1px; }
.auth-error ul {
margin: 0;
padding-left: 16px;
}
/* Form */
.auth-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.auth-field { }
.auth-label {
display: block;
font-size: 11px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.auth-required { color: #FF7E6C; }
.auth-input-wrap {
position: relative;
}
.auth-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #B7C3D1;
pointer-events: none;
transition: color 0.15s;
}
.auth-input {
width: 100%;
padding: 13px 16px 13px 40px;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
font-size: 14px;
color: #253748;
font-family: inherit;
outline: none;
transition: all 0.15s;
}
.auth-input::placeholder { color: #B7C3D1; }
.auth-input:focus {
background: #fff;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.auth-input-wrap:focus-within .auth-input-icon { color: var(--primary); }
.auth-field__status {
margin-top: 6px;
font-size: 12px;
font-weight: 600;
min-height: 16px;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.auth-field__status--ok { color: #4BC200; }
.auth-field__status--warn { color: #FDA04A; }
.auth-field__status--err { color: #FF6652; }
.auth-field__status a {
color: var(--primary);
text-decoration: none;
margin-right: 4px;
padding: 2px 6px;
background: #E1EBF5;
border-radius: 4px;
}
.auth-field__status a:hover {
background: var(--primary);
color: #fff;
}
.auth-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 480px) {
.auth-row { grid-template-columns: 1fr; }
}
/* Role picker on register page */
.auth-roles {
display: grid;
gap: 8px;
}
.auth-role {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
position: relative;
}
.auth-role:hover {
background: var(--primary-bg);
border-color: var(--primary);
}
.auth-role input[type="radio"] {
width: 18px;
height: 18px;
accent-color: var(--primary);
margin-top: 1px;
flex-shrink: 0;
}
.auth-role__body { flex: 1; min-width: 0; }
.auth-role__title {
font-size: 14px;
font-weight: 700;
color: #253748;
}
.auth-role__desc {
font-size: 12px;
color: #7C8C9B;
margin-top: 2px;
line-height: 1.5;
}
.auth-role__check {
display: none;
color: #4BC200;
align-self: center;
flex-shrink: 0;
}
.auth-role:has(input[type="radio"]:checked) {
background: var(--primary-bg);
border-color: var(--primary);
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 15%, transparent);
}
.auth-role:has(input[type="radio"]:checked) .auth-role__check {
display: block;
}
/* Submit button */
.auth-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
margin-top: 10px;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 22%, transparent);
transition: all 0.2s;
}
.auth-btn:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 26%, transparent);
}
.auth-btn:active {
transform: translateY(0);
}
/* Footer links */
.auth-footer {
text-align: center;
margin-top: 18px;
font-size: 14px;
color: #7C8C9B;
}
.auth-footer a {
color: var(--primary);
font-weight: 700;
text-decoration: none;
transition: color 0.15s;
}
.auth-footer a:hover { color: var(--primary-hover); }
.auth-footer--last { margin-top: 14px; }
.auth-footer__link {
color: #7C8C9B !important;
font-weight: 600 !important;
}
.auth-footer__link:hover { color: var(--primary) !important; }
/* OAuth buttons wrapper (rendered by oauth_buttons() function) */
.auth-card > div:has(> a[href*="oauth"]),
.auth-card .oauth-divider,
.auth-card .oauth-btn-row {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid #E1EBF5;
position: relative;
}
/* Mobile */
@media (max-width: 480px) {
.auth-container { margin: 24px auto; }
.auth-card { padding: 28px 22px; border-radius: 8px; }
.auth-header__icon { width: 48px; height: 48px; }
.auth-title { font-size: 20px; }
}
/* ══════════════════════════════════════════════════════════════
ORDER DETAIL + SUCCESS HERO — /account/orders/{id}
══════════════════════════════════════════════════════════════ */
/* Success hero (shown after checkout completes) */
.order-success-hero {
display: flex;
align-items: center;
gap: 20px;
padding: 24px 28px;
margin-bottom: 20px;
background: linear-gradient(135deg, rgba(75, 194, 0, 0.08) 0%, color-mix(in srgb, var(--primary) 6%, transparent) 100%);
border: 1px solid rgba(75, 194, 0, 0.25);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(170, 175, 190, 0.12);
}
.order-success-hero__icon {
width: 64px;
height: 64px;
flex-shrink: 0;
background: #4BC200;
color: #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(75, 194, 0, 0.22);
}
.order-success-hero__text h2 {
font-size: 20px;
font-weight: 800;
color: #253748;
margin: 0 0 4px;
letter-spacing: -0.015em;
}
.order-success-hero__text p {
font-size: 13px;
color: #3F5972;
margin: 0;
line-height: 1.55;
}
.order-success-hero__text strong {
color: #253748;
font-weight: 800;
}
@media (max-width: 640px) {
.order-success-hero {
flex-direction: column;
text-align: center;
padding: 22px;
}
}
/* Order detail card */
.order-detail {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 32px;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08);
}
@media (max-width: 768px) {
.order-detail { padding: 20px; }
}
.order-detail__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px solid #E1EBF5;
}
.order-detail__eyebrow {
font-size: 11px;
font-weight: 700;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 4px;
}
.order-detail__number {
font-size: 26px;
font-weight: 800;
color: #253748;
letter-spacing: -0.02em;
margin: 0 0 8px;
}
.order-detail__date {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #7C8C9B;
}
.order-detail__date svg { color: #B7C3D1; }
.order-detail__head-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* Status badge with coloured dot */
.status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
background: #F2F7FB;
color: #253748;
border: 1px solid #E1EBF5;
}
.status-badge__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #B7C3D1;
}
.status-badge--pending { background: rgba(253, 160, 74, 0.1); color: #FDA04A; border-color: rgba(253, 160, 74, 0.3); }
.status-badge--pending .status-badge__dot { background: #FDA04A; }
.status-badge--paid { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary-hover); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.status-badge--paid .status-badge__dot { background: var(--primary); }
.status-badge--processing { background: color-mix(in srgb, var(--primary) 8%, transparent); color: color-mix(in srgb, var(--primary) 70%, black); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.status-badge--processing .status-badge__dot { background: var(--primary-hover); }
.status-badge--shipped { background: color-mix(in srgb, var(--primary) 12%, transparent); color: color-mix(in srgb, var(--primary) 70%, black); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.status-badge--shipped .status-badge__dot { background: color-mix(in srgb, var(--primary) 80%, white); }
.status-badge--delivered { background: rgba(75, 194, 0, 0.1); color: #3a9700; border-color: rgba(75, 194, 0, 0.3); }
.status-badge--delivered .status-badge__dot { background: #4BC200; }
.status-badge--cancelled { background: rgba(255, 126, 108, 0.08); color: #FF6652; border-color: rgba(255, 126, 108, 0.3); }
.status-badge--cancelled .status-badge__dot { background: #FF7E6C; }
.btn.btn--sm {
padding: 8px 14px;
font-size: 12px;
}
/* Meta cards row */
.order-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
margin-bottom: 28px;
}
.order-meta__item {
padding: 16px 18px;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
}
.order-meta__label {
font-size: 11px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.order-meta__value {
font-size: 17px;
font-weight: 800;
color: #253748;
letter-spacing: -0.01em;
}
.order-meta__value--primary {
color: var(--primary);
font-size: 20px;
}
.order-detail__section-title {
font-size: 20px !important;
padding-left: 58px !important;
margin: 32px 0 18px !important;
color: #253748 !important;
}
.order-detail__section-title:first-of-type { margin-top: 0 !important; }
/* Items list */
.order-items {
display: flex;
flex-direction: column;
gap: 1px;
background: #E1EBF5;
border: 1px solid #E1EBF5;
border-radius: 8px;
overflow: hidden;
}
.order-items__row {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto auto auto;
align-items: center;
gap: 18px;
padding: 16px 20px;
background: #fff;
}
.order-items__img {
width: 64px;
height: 64px;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(135deg, #F2F7FB, #E1EBF5);
display: flex;
align-items: center;
justify-content: center;
color: #B7C3D1;
font-size: 14px;
flex-shrink: 0;
}
.order-items__img img { width: 100%; height: 100%; object-fit: cover; }
.order-items__info { min-width: 0; }
.order-items__title {
font-size: 14px;
font-weight: 700;
color: #253748;
line-height: 1.35;
margin-bottom: 2px;
}
.order-items__variant {
font-size: 12px;
color: #7C8C9B;
}
.order-items__sku {
font-size: 11px;
color: #B7C3D1;
margin-top: 2px;
}
.order-items__qty,
.order-items__price,
.order-items__subtotal {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
white-space: nowrap;
}
.order-items__qty-label,
.order-items__price-label,
.order-items__subtotal-label {
font-size: 10px;
font-weight: 700;
color: #B7C3D1;
text-transform: uppercase;
letter-spacing: 0.5px;
display: none; /* only visible on mobile */
}
.order-items__qty strong { font-size: 14px; color: #253748; }
.order-items__price { font-size: 13px; color: #3F5972; font-weight: 600; }
.order-items__subtotal strong {
font-size: 16px;
font-weight: 800;
color: #253748;
letter-spacing: -0.01em;
}
.order-items__total {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 18px 24px;
background: linear-gradient(135deg, var(--primary-bg) 0%, #E1EBF5 100%);
border-top: 1px solid #E1EBF5;
}
.order-items__total span {
font-size: 14px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.order-items__total strong {
font-size: 22px;
font-weight: 800;
color: #253748;
letter-spacing: -0.02em;
}
@media (max-width: 768px) {
.order-items__row {
grid-template-columns: 56px minmax(0, 1fr);
gap: 14px;
padding: 14px 16px;
}
.order-items__img { width: 56px; height: 56px; }
.order-items__qty,
.order-items__price,
.order-items__subtotal {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
padding-top: 8px;
border-top: 1px dashed #E1EBF5;
}
.order-items__qty-label,
.order-items__price-label,
.order-items__subtotal-label { display: inline; }
}
/* Shipping card (reusing some side-card styles) */
.shipping-card {
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 20px 24px;
}
.shipping-card__row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(225, 235, 245, 0.6);
}
.shipping-card__row:last-child { border-bottom: none; }
.shipping-card__ic {
width: 34px;
height: 34px;
flex-shrink: 0;
background: #fff;
color: var(--primary);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.shipping-card__body { flex: 1; min-width: 0; }
.shipping-card__label {
font-size: 11px;
font-weight: 700;
color: #7C8C9B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.shipping-card__value {
font-size: 14px;
font-weight: 600;
color: #253748;
word-wrap: break-word;
}
.shipping-card__value--link { color: var(--primary); text-decoration: none; }
.shipping-card__value--link:hover { color: var(--primary-hover); }
.order-detail__back {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 24px;
padding: 10px 16px;
background: #fff;
color: #7C8C9B;
border: 1px solid #E1EBF5;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.15s;
}
.order-detail__back:hover {
border-color: var(--primary);
color: var(--primary);
}
/* ══════════════════════════════════════════════════════════════
ERROR PAGES — 404 / 403 / 500
══════════════════════════════════════════════════════════════ */
.error-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 70vh;
padding: 40px 20px;
}
.error-page__card {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 48px 40px;
max-width: 560px;
width: 100%;
text-align: center;
box-shadow: 0 2px 8px rgba(170, 175, 190, 0.16);
}
.error-page__illustration {
margin-bottom: 12px;
animation: errorFloat 3.5s ease-in-out infinite;
}
@keyframes errorFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.error-page__code {
font-size: 72px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 8px;
}
.error-page__illustration--500 + .error-page__code {
background: linear-gradient(135deg, #FF7E6C, #FF6652);
-webkit-background-clip: text;
background-clip: text;
}
.error-page__illustration--403 + .error-page__code {
background: linear-gradient(135deg, #FDA04A, #FB7A19);
-webkit-background-clip: text;
background-clip: text;
}
.error-page__title {
font-size: 22px;
font-weight: 800;
color: #253748;
letter-spacing: -0.015em;
margin: 0 0 10px;
}
.error-page__desc {
font-size: 14px;
color: #7C8C9B;
line-height: 1.6;
max-width: 440px;
margin: 0 auto 28px;
}
.error-page__actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 24px;
}
.error-page__actions .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
font-family: inherit;
transition: all 0.2s;
}
.error-page__actions .btn--primary {
background: var(--primary);
color: #fff;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 18%, transparent);
}
.error-page__actions .btn--primary:hover {
background: var(--primary-hover);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 16%, transparent);
}
.error-page__actions .btn--ghost {
background: #fff;
color: #253748;
border-color: #E1EBF5;
}
.error-page__actions .btn--ghost:hover {
border-color: var(--primary);
color: var(--primary);
}
/* Search box on 404 */
.error-page__search {
display: flex;
gap: 8px;
max-width: 460px;
margin: 0 auto;
}
.error-page__search-field {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
transition: all 0.15s;
}
.error-page__search-field:focus-within {
background: #fff;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.error-page__search-field svg { color: #B7C3D1; flex-shrink: 0; }
.error-page__search-field input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 14px;
color: #253748;
font-family: inherit;
min-width: 0;
}
.error-page__search-field input::placeholder { color: #B7C3D1; }
.error-page__search button {
padding: 12px 22px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 20%, transparent);
transition: all 0.2s;
}
.error-page__search button:hover {
background: var(--primary-hover);
transform: translateY(-1px);
}
@media (max-width: 640px) {
.error-page__card { padding: 32px 24px; }
.error-page__code { font-size: 56px; }
.error-page__title { font-size: 19px; }
.error-page__actions { flex-direction: column; width: 100%; }
.error-page__actions .btn { width: 100%; justify-content: center; }
.error-page__search { flex-direction: column; }
.error-page__search button { width: 100%; }
}
/* ══════════════════════════════════════════════════════════════
GLOBAL SEARCH — /search
══════════════════════════════════════════════════════════════ */
.search-page {
max-width: 920px;
margin: 0 auto;
}
.search-page__form {
display: flex;
gap: 10px;
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 10px;
margin-bottom: 24px;
box-shadow: 0 1px 2px rgba(170, 175, 190, 0.08);
transition: all 0.15s;
}
.search-page__form:focus-within {
border-color: var(--primary);
box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 15%, transparent);
}
.search-page__field {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
min-width: 0;
}
.search-page__field svg { color: #7C8C9B; flex-shrink: 0; }
.search-page__field input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 16px;
color: #253748;
font-family: inherit;
min-width: 0;
}
.search-page__field input::placeholder { color: #7C8C9B; }
.search-page__form button {
padding: 0 28px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 20%, transparent);
transition: all 0.15s;
}
.search-page__form button:hover {
background: var(--primary-hover);
transform: translateY(-1px);
}
.search-tabs {
display: flex;
gap: 0;
margin-bottom: 24px;
border-bottom: 1px solid #E1EBF5;
overflow-x: auto;
scrollbar-width: none;
}
.search-tabs::-webkit-scrollbar { display: none; }
.search-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 18px;
color: #7C8C9B;
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: all 0.15s;
white-space: nowrap;
}
.search-tab:hover { color: var(--primary); }
.search-tab.is-active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.search-tab__count {
display: inline-flex;
align-items: center;
padding: 1px 8px;
background: #E1EBF5;
color: #3F5972;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
}
.search-tab.is-active .search-tab__count {
background: var(--primary);
color: #fff;
}
.search-results {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 32px;
}
.search-result {
background: #fff;
border: 1px solid #E1EBF5;
border-radius: 8px;
padding: 22px 24px;
transition: all 0.2s;
}
.search-result:hover {
border-color: var(--primary);
box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 8%, transparent);
transform: translateY(-1px);
}
.search-result__head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.search-result__type {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
background: #E1EBF5;
color: var(--primary);
}
.search-result__type--services { background: rgba(75, 194, 0, 0.1); color: #3a9700; }
.search-result__type--marketplace { background: #E1EBF5; color: var(--primary); }
.search-result__type--news { background: rgba(253, 160, 74, 0.12); color: #FB7A19; }
.search-result__category {
font-size: 12px;
color: #7C8C9B;
font-weight: 600;
}
.search-result__title {
font-size: 18px;
font-weight: 800;
color: #253748;
line-height: 1.3;
letter-spacing: -0.01em;
margin: 0 0 8px;
}
.search-result__title a {
color: inherit;
text-decoration: none;
transition: color 0.15s;
}
.search-result__title a:hover { color: var(--primary); }
.search-result__desc {
font-size: 14px;
line-height: 1.6;
color: #7C8C9B;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.search-result__meta {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
font-size: 12px;
color: #7C8C9B;
}
.search-result__price {
font-size: 16px;
font-weight: 800;
color: #253748;
letter-spacing: -0.01em;
}
.search-result__meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.search-result__meta-item svg { color: #B7C3D1; flex-shrink: 0; }
.search-result__fav {
margin-left: auto;
background: #F2F7FB;
border: 1px solid #E1EBF5;
border-radius: 8px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #B7C3D1;
cursor: pointer;
transition: all 0.15s;
padding: 0;
}
.search-result__fav:hover {
border-color: #FF7E6C;
color: #FF7E6C;
}
.search-result__fav.active {
color: #FF7E6C;
background: rgba(255, 126, 108, 0.08);
border-color: rgba(255, 126, 108, 0.35);
}
.search-empty {
text-align: center;
padding: 80px 20px;
background: #fff;
border: 1px dashed #E1EBF5;
border-radius: 8px;
}
.search-empty svg { margin: 0 auto 16px; display: block; }
.search-empty h3 {
font-size: 18px;
font-weight: 800;
color: #253748;
margin: 0 0 8px;
}
.search-empty p {
font-size: 14px;
color: #7C8C9B;
margin: 0;
}
@media (max-width: 640px) {
.search-page__form { flex-direction: column; }
.search-page__form button { width: 100%; padding: 12px; }
.search-result { padding: 18px 20px; }
.search-result__title { font-size: 16px; }
}
/* ══════════════════════════════════════════════════════════════
ACCOUNT CABINET — fixup for inline-styled legacy pages
These pages ship their own