/* V_CODE V19 — quiet surfaces, vivid accents, category-first navigation. */
:root { --v19-radius:20px; --v19-accent:#66b6ff; }
html:not([data-theme="light"]) { --bg:#060b17; --surface:#0c1424; --surface-2:#111d32; --surface-3:#172740; --panel:#0d1728; --text:#f3f7ff; --muted:#97a8c2; --line:rgba(147,182,235,.15); --topbar-bg:#060b17; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--v19-accent)!important; outline-offset:3px; }
.app-shell { width:min(100%,1120px); padding-inline:20px; }
.topbar { height:calc(72px + var(--safe-top)); border-bottom-color:var(--line); margin-bottom:17px; }
.brand-lockup b { font-size:16px; letter-spacing:.13em; }
.brand-lockup small { font-size:12px; letter-spacing:.015em; }
.icon-btn { width:42px; height:42px; flex-basis:42px; border-radius:14px; }
.hero { min-height:262px; max-height:none; aspect-ratio:3.3; border-radius:25px; background:#091a35; }
.hero>img { position:absolute; inset:0; object-position:75% 50%; opacity:.74; }
.hero-overlay { background:linear-gradient(90deg,rgba(5,16,38,.98),rgba(5,16,38,.75) 45%,rgba(5,16,38,.05)); }
.hero-copy { left:32px; right:24px; bottom:26px; }
.hero h1 { margin:11px 0 10px; font-size:43px; line-height:1.02; letter-spacing:-.055em; max-width:560px; }
.hero .eyebrow { font-size:12px; font-weight:750; color:#91cfff; letter-spacing:.08em; }
.hero p { max-width:360px; font-size:15px; line-height:1.45; margin-bottom:19px; color:#b4c5df; }
.hero .primary-btn { min-height:44px; padding:11px 16px; font-size:14px; border-radius:12px; background:#3178f6; box-shadow:0 6px 24px #0e43a73d; }
.hero .primary-btn span { font-size:20px; }
.search-box { border-radius:15px; min-height:52px; margin:18px 0 24px; background:var(--panel); border-color:var(--line); }
.search-box input { font-size:16px; }
.search-box:focus-within { border-color:#6699ff; box-shadow:0 0 0 3px #4387ed18; }
.section-block { margin-top:25px; }
.section-head { margin-bottom:15px; gap:10px; }
.section-head h2 { margin-top:5px; font-size:24px; line-height:1.12; letter-spacing:-.035em; }
.kicker { font-size:12px; font-weight:700; letter-spacing:.09em; color:var(--v19-accent); }
.link-btn { min-height:44px; font-size:14px; flex-shrink:0; }
.department-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.department-card { position:relative; min-width:0; min-height:128px; display:grid; grid-template-columns:1fr auto; align-content:space-between; gap:14px 6px; padding:17px; border:1px solid var(--line); border-radius:var(--v19-radius); background:linear-gradient(145deg,#13243b,#0d1728 75%); color:var(--text); text-align:left; transition:transform .2s ease,border-color .2s ease,background .2s ease; overflow:hidden; }
.department-icon { width:34px; height:34px; color:#7bc4ff; display:block; }
.department-icon svg { width:100%; height:100%; }
.department-copy { grid-column:1/3; min-width:0; }
.department-copy strong { display:block; font-size:15px; font-weight:690; line-height:1.3; letter-spacing:-.015em; overflow-wrap:anywhere; }
.department-copy small { display:block; margin-top:6px; color:var(--muted); font-size:12px; line-height:1.35; }
.department-arrow { position:absolute; top:17px; right:16px; color:#7293bd; font-size:18px; font-weight:400; }
.department-card.accent-1 { background:linear-gradient(145deg,#182441,#0d1728 75%); }
.department-card.accent-2 { background:linear-gradient(145deg,#112b36,#0d1728 75%); }
.department-card.accent-2 .department-icon { color:#76d0cd; }
.department-card.accent-3 { background:linear-gradient(145deg,#252440,#0d1728 75%); }
.department-card.accent-3 .department-icon { color:#b4b1ff; }
.benefits { margin:24px 0 4px; padding:16px 0; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:none; border-radius:0; }
.benefits>div { min-width:0; }
.benefits b { font-size:15px; color:var(--text); }
.benefits span { font-size:12px; color:var(--muted); line-height:1.4; }
.product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.product-card { border-radius:19px; background:var(--panel); contain-intrinsic-size:325px; }
.product-open { border:0; padding:0; background:transparent; color:inherit; text-align:inherit; width:100%; height:100%; display:flex; flex:1; flex-direction:column; min-width:0; }
.product-open:focus-visible { outline-offset:-4px; border-radius:19px; }
.product-image-wrap { aspect-ratio:1.16; background:#0a1323; }
.product-image { padding:15px; }
.product-info { padding:14px; min-width:0; width:100%; }
.product-badge { font-size:12px; min-height:0; }
.product-badge:empty { display:none; }
.product-badge:not(:empty) { margin-bottom:5px; }
.product-meta { font-size:12px; letter-spacing:0; color:var(--muted); line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
.product-name { min-height:41px; font-size:15px; line-height:1.4; font-weight:640; margin:7px 0 12px; overflow-wrap:anywhere; }
.product-price { font-size:17px; letter-spacing:-.035em; }
.product-footer { gap:4px; flex-wrap:wrap; }
.product-arrow { display:grid; place-items:center; width:27px; height:27px; border-radius:9px; color:#9ecbff; background:#234b802e; flex:0 0 auto; }
.card-favorite,.product-card .compare-card-btn { width:34px; height:34px; top:8px; right:8px; border-radius:11px; backdrop-filter:blur(8px); background:#0c1728df; }
.product-card .compare-card-btn { top:48px; font-size:17px; }
.product-availability { color:#97b5a9; font-size:12px; line-height:1.4; margin:0 0 12px; }
.product-availability.ask { color:var(--muted); }
.product-no-photo { width:100%; min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px 38px 20px 20px; background:radial-gradient(ellipse at 50% 20%,#274e7828,transparent 75%); color:#45688e; }
.product-no-photo svg { width:47px; height:47px; opacity:.8; }
.product-no-photo>span { font-size:14px; font-weight:650; letter-spacing:.025em; margin-top:9px; color:#83a0c5; }
.product-no-photo small { font-size:12px; color:#778ca9; margin-top:5px; text-align:center; line-height:1.35; }
.page-head { padding:7px 0 14px; }
.page-head h1 { font-size:34px; letter-spacing:-.045em; line-height:1.12; overflow-wrap:anywhere; }
.page-head p { font-size:15px; line-height:1.5; }
.v19-catalog-controls { display:grid; gap:14px; }
.catalog-breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:4px 9px; font-size:14px; color:var(--muted); }
.catalog-breadcrumbs button { border:0; background:none; color:var(--muted); font-size:14px; min-height:40px; padding:0; text-align:left; }
.catalog-breadcrumbs .current { color:var(--text); }
.catalog-mode { display:inline-flex; width:fit-content; max-width:100%; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:4px; gap:4px; }
.catalog-mode button { border:0; border-radius:10px; padding:11px 21px; min-height:44px; font-size:15px; font-weight:650; background:transparent; color:var(--muted); }
.catalog-mode button.active { color:#fff; background:#296be3; box-shadow:0 3px 9px #0b225044; }
.catalog-search { margin:18px 0 12px; }
.v19-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.compact-select { font-size:14px; gap:7px; }
.compact-select select { border-radius:12px; font-size:14px; min-height:46px; width:100%; max-width:100%; padding-right:23px; text-overflow:ellipsis; background:var(--panel); }
.compact-select select:disabled { opacity:.6; }
.catalog-tools { margin:0 0 23px; min-height:0; gap:10px; }
.catalog-tools .compact-select { max-width:calc(50% - 5px); }
.filter-reset { min-height:46px; padding-inline:16px; font-size:14px; }
.filter-reset:disabled { color:var(--muted); opacity:.45; cursor:default; }
.catalog-departments { margin-bottom:28px; }
.v19-brands-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:28px; }
.v19-brand-card { display:flex; align-items:center; justify-content:space-between; gap:7px; min-width:0; min-height:50px; padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); text-align:left; }
.v19-brand-card strong { min-width:0; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.v19-brand-card small { font-size:12px; color:var(--muted); flex-shrink:0; }
.catalog-products-head { margin:0 0 15px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.catalog-products-head h2 { font-size:20px; letter-spacing:-.03em; margin:0; }
.counter { white-space:nowrap; font-size:12px; color:var(--muted); }
.catalog-loading { padding:40px 12px; color:var(--muted); text-align:center; font-size:15px; }
.catalog-page-status { text-align:center; color:var(--muted); font-size:14px; line-height:1.5; padding:14px 9px; }
.load-more { margin:18px 0 0; width:100%; min-height:48px; color:var(--text); border-radius:14px; font-size:15px; }
.load-more:disabled { opacity:.6; cursor:wait; }
.v19-empty { grid-column:1/-1; padding:32px 18px; font-size:15px; border:1px dashed var(--line); border-radius:18px; }
.v19-empty b { font-size:17px; }
.v19-empty p { font-size:15px; color:var(--muted); margin:10px auto 18px; max-width:350px; line-height:1.5; }
.v19-empty .secondary-btn { font-size:14px; }
.catalog-retry { grid-column:1/-1; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:14px; color:var(--text); }
.sheet-availability { font-size:14px; color:var(--muted); margin:10px 0; }
.sheet-availability:empty { display:none; }
.availability.availability-pending { color:var(--muted); }
#sheetAskManager { margin:10px 0 15px; font-size:14px; }
.service-card,.why-card { min-height:86px; border-radius:18px; }
.service-card b,.why-card b { font-size:15px; }
.service-card small,.why-card small { font-size:14px; line-height:1.45; }
.bottom-nav { width:min(1120px,100%); backdrop-filter:blur(20px); background:#09111ff2; padding-inline:15px; }
.nav-item { border-radius:14px; min-width:0; padding:6px 2px; }
.nav-item.active { background:#2b67ae18; color:#86c8ff; }
.nav-item small { font-size:12px; font-weight:550; letter-spacing:-.02em; }
.nav-item>span { font-size:21px; }
html[data-theme="light"] .hero-overlay { background:linear-gradient(90deg,rgba(7,26,58,.97),rgba(7,26,58,.78) 45%,rgba(7,26,58,.06)); }
html[data-theme="light"] .hero-copy h1 { color:#fff; }
html[data-theme="light"] .department-card { background:linear-gradient(145deg,#edf4ff,#f9fbff); border-color:#dbe5f4; }
html[data-theme="light"] .department-icon { color:#356ed2; }
html[data-theme="light"] .department-card.accent-2 .department-icon { color:#1f898e; }
html[data-theme="light"] .department-card.accent-3 .department-icon { color:#7462c6; }
html[data-theme="light"] .product-image-wrap { background:#f1f5fa; }
html[data-theme="light"] .product-no-photo { background:radial-gradient(ellipse at 50% 20%,#d6e5f98a,transparent 75%); }
html[data-theme="light"] .product-no-photo svg { color:#6f96bf; }
html[data-theme="light"] .product-no-photo>span { color:#426185; }
html[data-theme="light"] .product-no-photo small { color:#5d708b; }
html[data-theme="light"] .product-arrow { background:#e7effe; color:#2563cb; }
html[data-theme="light"] .product-availability { color:#347a62; }
html[data-theme="light"] .bottom-nav { background:#ffffffef; }
html[data-theme="light"] .nav-item.active { color:#2468c9; background:#eef4ff; }
html[data-theme="light"] .kicker { color:#286bd3; }
html[data-theme="light"] .product-availability.ask { color:var(--muted); }
@media(hover:hover) { .department-card:hover { transform:translateY(-3px); border-color:#638bc86e; } .v19-brand-card:hover { border-color:#638bc86e; background:var(--surface-2); } .product-card:hover { border-color:#638bc86e; } .catalog-breadcrumbs button:hover { color:var(--text); } }
@media(min-width:900px) { .home-search { max-width:none; } .service-strip { grid-template-columns:repeat(3,minmax(0,1fr)); } .service-card,.why-card { grid-template-columns:36px 1fr 13px; padding:16px 12px; gap:10px; } .service-icon,.why-logo { width:36px; height:40px; font-size:18px; } }
@media(max-width:760px) { .app-shell { padding-inline:16px; } .hero { min-height:262px; } .hero-copy { left:24px; bottom:23px; } .hero h1 { font-size:36px; } .department-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .department-card { min-height:128px; padding:15px; grid-template-columns:35px 1fr; align-items:center; gap:11px; align-content:center; } .department-copy { grid-column:2; padding-right:3px; } .department-arrow { top:8px; right:10px; font-size:14px; opacity:.65; } .department-copy strong { font-size:14px; } .department-copy small { font-size:12px; } .department-icon { width:33px; height:33px; } .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .v19-brands-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .topbar { margin-bottom:14px; } }
@media(max-width:560px) { .hero { aspect-ratio:auto; min-height:270px; } .hero>img { object-position:68% 50%; opacity:.55; } .hero-overlay { background:linear-gradient(90deg,rgba(5,16,38,.93),rgba(5,16,38,.62) 60%,rgba(5,16,38,.10)); } .hero-copy { left:21px; right:18px; bottom:22px; } .hero h1 { font-size:36px; max-width:270px; } .hero p { max-width:240px; font-size:14px; margin-bottom:15px; } .hero .eyebrow { font-size:12px; } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .product-info { padding:12px 11px; } .product-name { font-size:15px; min-height:42px; } .product-price { font-size:17px; } .product-meta { font-size:12px; } .product-image-wrap { aspect-ratio:1.08; } .product-image { padding:10px; } .page-head h1 { font-size:29px; } .section-head h2 { font-size:24px; } .v19-brands-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .catalog-mode { width:100%; display:grid; grid-template-columns:1fr 1fr; } .catalog-mode button { padding-inline:10px; } .catalog-tools .compact-select { max-width:none; } .benefits b { font-size:14px; } .benefits span { font-size:12px; } .catalog-products-head h2 { font-size:18px; } .counter { font-size:12px; } }
@media(max-width:360px) { .app-shell { padding-inline:12px; } .department-card { min-height:145px; display:flex; flex-direction:column; align-items:start; justify-content:space-between; gap:10px; padding:13px 12px; } .department-copy { padding:0; } .department-copy strong { font-size:14px; } .department-icon { width:28px; height:28px; } .product-grid { gap:8px; } .product-info { padding:12px 9px; } .product-price { font-size:16px; } .product-name { font-size:14px; } .product-arrow { width:24px; height:24px; } .card-favorite,.product-card .compare-card-btn { width:30px; height:30px; right:5px; } .product-card .compare-card-btn { top:43px; } .product-no-photo { padding-right:29px; } .hero h1 { font-size:34px; } .nav-item small { font-size:12px; } .page-head h1 { font-size:26px; } .section-head { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .department-card,.product-card,.hero,.nav-item { transition:none!important; } .department-card:hover { transform:none; } }