:root { --ink:#183b5f; --brand:#00b3aa; --coral:#db7d81; --paper:#fff; --soft:#f4f0e4; --muted:#718198; --line:#dfe3e7; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:#fff; font-family:'DM Sans',sans-serif; } a { color:inherit; text-decoration:none; }
.catalog-header { border-bottom:1px solid var(--line); background:#fff; } .utility-bar,.main-bar { display:flex; align-items:center; justify-content:space-between; padding:0 7vw; } .utility-bar { min-height:62px; font-size:13px; gap:28px; } .utility-bar nav,.main-bar nav { display:flex; align-items:center; gap:30px; } .utility-bar > span:first-of-type { margin-left:auto; color:#1689e8; font-weight:700; } .country { border:1px solid var(--line); border-radius:30px; padding:10px 16px; } .main-bar { min-height:84px; } .logo img { display:block; width:154px; transform:translateX(-10px); } .main-bar nav { font-size:14px; font-weight:600; } .main-bar nav a:hover,.utility-bar a:hover { color:var(--coral); } .cart { font-size:21px; }
main { max-width:1240px; margin:auto; padding:0 5.5vw 90px; } .breadcrumbs { margin-top:22px; color:var(--muted); font-size:12px; } .breadcrumbs a { color:#9aabba; } .breadcrumbs span { padding:0 8px; } .catalog-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; padding:66px 0 55px; } .kicker { display:flex; align-items:center; gap:10px; margin:0 0 17px; color:var(--coral); text-transform:uppercase; letter-spacing:1.8px; font-size:10px; font-weight:700; } .kicker span { width:24px; height:2px; background:var(--brand); } h1 { margin:0; font:600 clamp(48px,6vw,78px)/.9 'Space Grotesk',sans-serif; letter-spacing:-4px; } h1 em { color:var(--brand); font-style:normal; } .catalog-search { display:flex; align-items:center; width:min(320px,100%); height:48px; border:1px solid #cbd3db; color:var(--ink); } .catalog-search span { padding:0 15px; font-size:24px; } .catalog-search input { width:100%; height:100%; border:0; outline:0; color:var(--ink); font:14px 'DM Sans',sans-serif; } .catalog-search input::placeholder { color:#9aabba; }
.catalog-layout { display:grid; grid-template-columns:235px 1fr; gap:84px; } .filter-panel h2,.results-heading h2 { margin:0; font:600 26px 'Space Grotesk',sans-serif; } .filter-rule { height:2px; margin:9px 0 27px; background:#c8c9c6; } .filter { display:block; width:100%; margin:0; padding:11px 0; border:0; background:none; color:var(--ink); text-align:left; font:600 13px 'DM Sans',sans-serif; cursor:pointer; } .filter.active,.filter:hover { color:var(--coral); } .results-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:27px; } .results-heading span { color:var(--muted); font-size:12px; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:45px 30px; } .catalog-card { overflow:hidden; background:#fff; border-top:4px solid var(--brand); box-shadow:0 8px 22px rgba(24,59,95,.08); transition:transform .2s,box-shadow .2s; } .catalog-card:nth-child(3n+2) { border-top-color:var(--coral); } .catalog-card:nth-child(3n) { border-top-color:var(--ink); } .catalog-card:hover { transform:translateY(-6px); box-shadow:0 16px 30px rgba(24,59,95,.15); } .catalog-card > img { display:block; width:100%; height:224px; object-fit:cover; background:var(--soft); } .card-body { min-height:258px; padding:17px 15px 18px; display:flex; flex-direction:column; align-items:flex-start; } .card-body h3 { min-height:42px; margin:0 0 10px; font:600 16px/1.35 'DM Sans',sans-serif; } .card-body p { min-height:62px; margin:0; color:#60728a; font-size:13px; line-height:1.6; } .price { margin-top:12px; } .price span { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; } .price strong { font:700 19px 'DM Sans',sans-serif; } .price small { font-size:12px; font-weight:600; } .card-body > a { display:inline-flex; align-items:center; gap:16px; margin-top:auto; padding:11px 14px; color:var(--ink); background:var(--brand); font-size:13px; font-weight:700; } .card-body > a span { font-size:22px; line-height:12px; } .card-body > a:hover { background:#11c6bb; } .empty-state { display:none; color:var(--muted); } .empty-state.show { display:block; }
@media (max-width:900px) { .main-bar nav { display:none; } .catalog-heading { align-items:start; flex-direction:column; padding-top:52px; } .catalog-search { width:100%; } .catalog-layout { grid-template-columns:175px 1fr; gap:35px; } .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .utility-bar { min-height:52px; padding:0 6vw; font-size:11px; } .utility-bar nav a:nth-child(2),.utility-bar > span:first-of-type { display:none; } .main-bar { min-height:70px; padding:0 6vw; } .logo img { width:130px; } .back-link { font-size:11px; } main { padding:0 6vw 65px; } .catalog-heading { padding:45px 0 38px; } h1 { font-size:53px; } .catalog-layout { display:block; } .filter-panel { margin-bottom:38px; } .filter-panel h2 { font-size:22px; } .filter { display:inline-block; width:auto; margin-right:18px; } .catalog-grid { gap:22px 13px; } .catalog-card > img { height:145px; } .card-body { min-height:245px; padding:13px 10px; } .card-body h3 { font-size:14px; } .card-body p { font-size:12px; } .card-body > a { width:100%; justify-content:space-between; gap:4px; padding:10px 8px; font-size:11px; } }