:root { --blue:#64b4dc; --blue-deep:#1682bd; --orange:#f6a33a; --red:#dd403b; --ink:#333640; --muted:#7c818b; --line:#dde1e5; --paper:#fff; --soft:#f5f6f7; --dark:#353942; --wrap:1180px; color-scheme:light; font-family:Arial,"Helvetica Neue",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(calc(100% - 48px),var(--wrap)); margin-inline:auto; }

.preview-bar { position:sticky; top:0; z-index:80; display:flex; min-height:64px; align-items:center; justify-content:center; gap:28px; padding:10px 24px; color:#fff; background:#0d0f12; font-size:13px; }
.preview-back { position:absolute; left:24px; color:#aeb3bc; }.preview-back:hover { color:#fff; }
.preview-modes,.preview-switch { display:flex; align-items:center; gap:10px; }.preview-modes span,.preview-switch span { color:#898f99; }
.preview-modes button { width:34px; height:34px; border:1px solid #3b4048; border-radius:4px; color:#c8cdd5; background:#181b20; cursor:pointer; font-size:22px; line-height:1; }.preview-modes button.is-active { border-color:var(--blue); color:var(--blue); }
.preview-switch select { min-width:130px; padding:9px 32px 9px 12px; border:1px solid #3b4048; border-radius:4px; color:#fff; background:#181b20; }
.preview-cta { padding:11px 17px; border-radius:4px; color:#fff; background:var(--red); font-weight:800; }
.demo-stage { min-height:calc(100vh - 64px); padding:0; scroll-margin-top:64px; background:#fff; transition:padding .28s ease,background .28s ease; }
.demo-page { width:100%; margin-inline:auto; overflow:clip; padding-bottom:50px; background:#fff; container-name:storefront; container-type:inline-size; transition:width .3s ease,border-radius .3s ease,box-shadow .3s ease; }
html[data-preview-size="mobile"] .demo-stage { padding:24px; background:#25282e; }
html[data-preview-size="mobile"] .demo-page { width:420px; max-width:100%; border-radius:18px; box-shadow:0 28px 80px rgba(0,0,0,.4); }
html[data-preview-size="mobile"] .bottom-cart { right:auto; left:50%; width:min(420px,calc(100% - 48px)); transform:translateX(-50%); }

.metro-header { background:#fff; }
.utility { color:#7b8088; background:#f4f4f5; font-size:11px; }.utility .wrap { display:flex; min-height:38px; align-items:center; justify-content:space-between; }.utility button { padding:0; border:0; color:inherit; background:transparent; cursor:pointer; }.utility b { color:#555a62; border-bottom:1px dotted #777; }.utility nav { display:flex; gap:25px; }
.header-main { display:grid; min-height:125px; grid-template-columns:235px minmax(280px,1fr) 235px; grid-template-rows:auto auto; align-items:center; gap:12px 25px; }
.metro-logo { display:grid; width:max-content; color:#2e3f55; line-height:.9; }.metro-logo strong { font-size:33px; font-weight:900; letter-spacing:-1.8px; }.metro-logo strong::first-letter { color:var(--blue-deep); }.metro-logo span { margin-top:7px; color:#89909a; font-size:7px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; }
.metro-search { display:flex; height:48px; border:1px solid #d7dbe0; }.metro-search:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(100,180,220,.14); }.metro-search input { min-width:0; flex:1; padding:0 16px; border:0; outline:0; color:#3e4249; }.metro-search button { width:100px; border:0; color:#fff; background:var(--blue); cursor:pointer; font-size:25px; }
.header-contact { display:grid; justify-items:end; }.header-contact > a { color:#3a3e45; font-size:23px; font-weight:800; }.header-contact span { margin-top:7px; color:var(--blue-deep); font-size:10px; }.header-contact button { padding:0; border:0; color:inherit; background:transparent; cursor:pointer; }
.header-cart { grid-column:3; grid-row:1; align-self:start; justify-self:end; margin-top:17px; padding:7px 10px; border:1px solid var(--line); color:#50545b; background:#fff; cursor:pointer; font-size:10px; }.header-cart span { margin-right:5px; }.header-cart b { display:inline-grid; min-width:18px; height:18px; margin-left:5px; place-items:center; color:#fff; background:var(--blue-deep); }
.header-contact { grid-column:3; grid-row:2; align-self:start; margin-top:-19px; }
.navigation { display:grid; height:49px; grid-template-columns:275px 1fr; color:#fff; }
.catalog-toggle { display:flex; align-items:center; gap:13px; padding:0 18px; border:0; color:#fff; background:var(--blue); cursor:pointer; font-weight:700; }.catalog-toggle i,.catalog-toggle i::before,.catalog-toggle i::after { display:block; width:17px; height:2px; background:currentColor; content:""; }.catalog-toggle i { position:relative; }.catalog-toggle i::before { position:absolute; top:-6px; }.catalog-toggle i::after { position:absolute; top:6px; }.catalog-toggle b { margin-left:auto; font-size:23px; }
.navigation > nav { display:flex; min-width:0; align-items:stretch; background:linear-gradient(#464a53,#30343c); }.navigation > nav a { display:flex; align-items:center; padding:0 19px; border-right:1px solid rgba(255,255,255,.08); font-size:12px; }.navigation > nav a:hover { background:#262a30; }
.mobile-catalog { display:none; padding-block:12px; gap:8px; }.mobile-catalog.is-open { display:flex; }.mobile-catalog a { padding:9px 12px; color:#3f7b9b; background:#e9f6fc; font-size:11px; font-weight:700; }

.metro-layout { display:grid; grid-template-columns:275px minmax(0,1fr); gap:20px; padding-top:20px; }
.side-column { min-width:0; }
.side-catalog { border:1px solid var(--line); border-top:3px solid var(--blue); }.side-catalog button { display:grid; width:100%; min-height:52px; grid-template-columns:25px 1fr auto; align-items:center; gap:8px; padding:0 14px; border:0; border-bottom:1px solid var(--line); color:#65707a; background:#fff; cursor:pointer; text-align:left; }.side-catalog button:last-child { border-bottom:0; }.side-catalog button:hover,.side-catalog button.is-active { color:var(--blue-deep); background:#f5fbfe; }.side-catalog button span { color:#9aa1aa; font-size:17px; text-align:center; }.side-catalog button i { color:#c1c5ca; font-size:22px; font-style:normal; }
.side-news { margin-top:32px; }.side-news header { display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--dark); }.side-news h2 { margin:0 0 11px; font-size:22px; font-weight:500; }.side-news header a { color:var(--blue-deep); font-size:10px; }.side-news article { padding:16px 0; border-bottom:1px solid var(--line); }.side-news article a { color:#397d9f; font-size:12px; line-height:1.4; }.side-news time { display:block; margin-top:7px; color:#9a9fa7; font-size:9px; }
.gift-card { position:relative; display:block; min-height:155px; margin-top:25px; overflow:hidden; padding:27px 24px; color:#fff; background:linear-gradient(135deg,#d94b45,#a82834); }.gift-card::after { position:absolute; right:-28px; bottom:-42px; width:150px; height:150px; border:18px solid rgba(255,255,255,.12); border-radius:50%; content:""; }.gift-card span { display:block; font-size:9px; letter-spacing:.15em; }.gift-card b { display:block; margin-top:5px; font-size:31px; }.gift-card small { display:block; margin-top:8px; }.gift-card i { position:absolute; right:18px; top:18px; z-index:1; font-size:21px; font-style:normal; }
.content-column { min-width:0; }
.commerce-hero { display:grid; grid-template-columns:minmax(0,1fr) 205px; gap:20px; }
.main-offer { position:relative; min-height:420px; overflow:hidden; color:#fff; background:linear-gradient(90deg,rgba(4,32,80,.94),rgba(5,50,100,.18) 64%),url("assets/hero.jpg") center/cover; }.main-offer > div { position:relative; z-index:2; max-width:510px; padding:72px 46px; }.main-offer span { font-size:9px; font-weight:800; letter-spacing:.17em; }.main-offer h1 { margin:16px 0; font-size:44px; line-height:1.02; letter-spacing:-1.8px; }.main-offer h1 strong { color:#77d8ff; }.main-offer p { max-width:330px; color:#dcecff; font-size:14px; line-height:1.55; }.main-offer a { display:inline-flex; margin-top:12px; padding:14px 19px; color:#fff; background:var(--orange); font-size:11px; font-weight:800; text-transform:uppercase; }.main-offer footer { position:absolute; left:46px; bottom:22px; display:flex; gap:7px; }.main-offer footer button { width:28px; height:3px; padding:0; border:0; background:rgba(255,255,255,.38); }.main-offer footer button.is-active { width:45px; background:#fff; }
.deal-card { padding:17px 15px 14px; border:1px solid var(--line); text-align:center; }.deal-card > span { color:var(--red); font-size:8px; font-weight:900; letter-spacing:.18em; }.deal-card h2 { margin:5px 0 2px; font-size:21px; }.deal-card > p { margin:0; color:#7f838a; font-size:10px; }.countdown { display:flex; align-items:flex-start; justify-content:center; gap:4px; margin:10px 0; }.countdown b { display:grid; min-width:37px; padding:6px 4px 4px; color:#fff; background:#4b4f56; font-size:17px; line-height:1; }.countdown small { margin-top:4px; color:#d7d9dc; font-size:6px; font-weight:400; text-transform:uppercase; }.countdown i { padding-top:5px; font-style:normal; }.deal-product { position:relative; height:128px; }.deal-product span { display:block; height:100%; background:url("assets/products.jpg") 0 0/200% 200% no-repeat; }.deal-product em { position:absolute; right:1px; bottom:6px; display:grid; width:50px; height:50px; place-items:center; border-radius:50%; color:#fff; background:var(--red); font-size:13px; font-style:normal; font-weight:900; transform:rotate(-10deg); }.deal-card h3 { margin:6px 0 4px; color:#367e9f; font-size:12px; }.deal-card s { display:block; color:#9ca0a6; font-size:9px; }.deal-card > strong { display:block; margin-top:3px; font-size:17px; }.deal-card > button { width:100%; margin-top:9px; padding:9px 5px; border:0; color:#fff; background:var(--dark); cursor:pointer; font-size:9px; font-weight:800; }
.service-strip { display:grid; grid-template-columns:repeat(3,1fr); margin-top:20px; border:1px solid var(--line); }.service-strip article { display:flex; min-height:72px; align-items:center; gap:12px; padding:12px 17px; border-left:1px solid var(--line); }.service-strip article:first-child { border-left:0; }.service-strip i { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; color:#fff; background:var(--blue); font-style:normal; }.service-strip span { display:grid; gap:4px; }.service-strip b { font-size:11px; }.service-strip small { color:#969ba2; font-size:8px; }

.product-section { padding-top:58px; scroll-margin-top:20px; }.section-title { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:20px; padding-bottom:13px; border-bottom:2px solid var(--dark); }.section-title span { color:var(--blue-deep); font-size:8px; font-weight:900; letter-spacing:.15em; }.section-title h2 { margin:5px 0 0; font-size:26px; font-weight:500; }.section-title a { color:#4386a5; font-size:10px; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }.product-card { position:relative; min-width:0; padding:0 13px 14px; border:1px solid var(--line); border-left:0; }.product-card:first-child { border-left:1px solid var(--line); }.product-card[hidden] { display:none; }.product-image { position:relative; aspect-ratio:1/.92; margin-inline:-13px; background-color:#f3f4f5; background-image:url("assets/products.jpg"); background-repeat:no-repeat; background-size:200% 200%; }.image-a { background-position:0 0; }.image-b { background-position:100% 0; }.image-c { background-position:0 100%; }.image-d { background-position:100% 100%; }.product-image > button { position:absolute; right:9px; top:9px; display:grid; width:31px; height:31px; place-items:center; border:1px solid rgba(0,0,0,.1); border-radius:50%; color:#6f747c; background:rgba(255,255,255,.9); cursor:pointer; font-size:17px; }.product-image > button.is-active { color:var(--red); }.product-label { position:absolute; left:9px; top:9px; z-index:1; padding:6px 7px; color:#fff; background:#5d6874; font-size:7px; font-weight:900; text-transform:uppercase; }.product-label--hit { background:#ec9d2e; }.product-label--new { background:#77931e; }.product-label--sale { background:var(--red); }.rating { margin-top:13px; color:#e3a62f; font-size:10px; letter-spacing:.05em; }.rating span { margin-left:4px; color:#9ca1a8; letter-spacing:0; }.product-card h3 { min-height:42px; margin:8px 0; color:#4a7590; font-size:12px; font-weight:500; line-height:1.45; }.price { display:flex; min-height:38px; flex-direction:column; justify-content:end; }.price s { color:#999ea5; font-size:9px; }.price b { font-size:18px; }.add { width:100%; margin-top:11px; padding:10px 5px; border:0; color:#fff; background:var(--blue-deep); cursor:pointer; font-size:10px; font-weight:800; }.add:hover,.add.is-added { background:#286b8f; }.product-card > label { display:block; margin-top:12px; color:#777c83; font-size:9px; }.product-card > label input { accent-color:var(--blue-deep); }.products-empty { padding:65px 20px; border:1px dashed var(--line); text-align:center; }
.promo-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; }.promo-row > a { position:relative; min-height:210px; overflow:hidden; padding:31px; color:#fff; background:linear-gradient(135deg,#273d61,#147eb7); }.promo-row > a:nth-child(2) { color:#30343b; background:linear-gradient(135deg,#f3f5f7,#d8e6ed); }.promo-row span { font-size:8px; font-weight:900; letter-spacing:.18em; }.promo-row h3 { position:relative; z-index:1; margin:12px 0 28px; font-size:28px; line-height:1.05; }.promo-row b { position:relative; z-index:1; padding-bottom:3px; border-bottom:1px solid currentColor; font-size:9px; }.promo-row i { position:absolute; right:5px; top:0; width:55%; height:100%; background-image:url("assets/products.jpg"); background-repeat:no-repeat; background-size:200% 200%; }.promo-headphones { background-position:0 0; }.promo-watch { background-position:0 100%; }
.product-section--new { padding-bottom:65px; }.brands { padding-bottom:75px; }.brands > div:last-child { display:grid; grid-template-columns:repeat(6,1fr); border-block:1px solid var(--line); }.brands > div span { display:grid; min-height:82px; place-items:center; border-left:1px solid var(--line); color:#7a8189; font-size:13px; font-weight:900; letter-spacing:.08em; }.brands > div span:first-child { border-left:0; }
.metro-footer { padding:55px 0 23px; color:#aeb4bd; background:#24272e; }.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:45px; }.metro-logo--light { color:#fff; }.footer-grid p { max-width:330px; color:#8c929c; font-size:11px; line-height:1.6; }.footer-grid nav,.footer-grid > div:last-child { display:grid; align-content:start; gap:10px; }.footer-grid b { color:#fff; font-size:11px; }.footer-grid a { font-size:10px; }.footer-grid a:hover { color:#fff; }.footer-bottom { display:flex; justify-content:space-between; margin-top:39px; padding-top:20px; border-top:1px solid #3a3e47; font-size:9px; }.bottom-cart { position:fixed; right:0; bottom:0; left:0; z-index:60; display:flex; min-height:44px; align-items:center; justify-content:flex-end; gap:22px; padding:0 max(24px,calc((100% - var(--wrap))/2)); color:#dfe3e8; background:rgba(39,43,50,.96); font-size:10px; }.bottom-cart span { margin-right:auto; }.bottom-cart span b { display:inline-grid; min-width:19px; height:18px; margin-right:6px; place-items:center; background:var(--blue-deep); }.bottom-cart strong { color:#fff; }.bottom-cart a { padding:9px 13px; color:#fff; background:var(--red); font-weight:800; }
.demo-toast { position:fixed; right:24px; bottom:62px; z-index:70; padding:14px 18px; color:#fff; background:#282c33; box-shadow:0 14px 35px rgba(0,0,0,.2); opacity:0; transform:translateY(12px); transition:.2s; pointer-events:none; }.demo-toast.is-visible { opacity:1; transform:none; }

@media (max-width:1000px) {
  .preview-back { position:static; }.preview-back span,.preview-modes span,.preview-switch span { display:none; }
}
@container storefront (max-width:1000px) {
  .header-main { grid-template-columns:180px minmax(220px,1fr) 180px; gap:12px; }.header-contact > a { font-size:17px; }.header-cart { display:none; }.navigation { grid-template-columns:220px 1fr; }.navigation > nav a { padding:0 11px; font-size:10px; }.metro-layout { grid-template-columns:220px minmax(0,1fr); }.commerce-hero { grid-template-columns:1fr; }.deal-card { display:grid; grid-template-columns:1fr 1.2fr 1fr; align-items:center; text-align:left; }.deal-card > span,.deal-card h2,.deal-card > p,.deal-card .countdown { grid-column:1; }.deal-product { grid-column:2; grid-row:1 / span 5; width:100%; }.deal-card h3,.deal-card s,.deal-card > strong,.deal-card > button { grid-column:3; }.product-grid { grid-template-columns:repeat(2,1fr); }.product-card:nth-child(odd) { border-left:1px solid var(--line); }.product-card:nth-child(n+3) { border-top:0; }.service-strip { grid-template-columns:1fr 1fr; }.service-strip article:nth-child(3) { display:none; }
}
@media (max-width:680px) {
  .preview-bar { justify-content:space-between; gap:9px; padding:9px 13px; }.preview-switch { display:none; }.preview-cta { padding:10px 11px; font-size:11px; }
  html[data-preview-size="mobile"] .demo-stage { padding:10px; }
  html[data-preview-size="mobile"] .bottom-cart { width:min(420px,calc(100% - 20px)); }
}
@container storefront (max-width:680px) {
  .wrap { width:min(calc(100% - 24px),var(--wrap)); }.utility { display:none; }.header-main { display:grid; min-height:116px; grid-template-columns:1fr auto; grid-template-rows:55px 47px; gap:7px; }.metro-logo strong { font-size:25px; }.metro-logo span { font-size:6px; }.metro-search { grid-column:1 / -1; grid-row:2; height:43px; }.metro-search input { padding-inline:11px; font-size:11px; }.metro-search button { width:49px; }.header-contact { display:none; }.header-cart { display:block; position:relative; grid-column:2; grid-row:1; align-self:center; margin:0; }.navigation { width:100%; height:46px; grid-template-columns:1fr; }.catalog-toggle { width:100%; }.navigation > nav { display:none; }.mobile-catalog.is-open { flex-wrap:wrap; }.metro-layout { grid-template-columns:1fr; padding-top:12px; }.side-column { display:none; }.commerce-hero { gap:12px; }.main-offer { min-height:520px; background-position:63% center; }.main-offer > div { padding:49px 24px; }.main-offer h1 { max-width:310px; font-size:37px; }.main-offer p { max-width:245px; font-size:12px; }.main-offer footer { left:24px; }.deal-card { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; padding:17px; }.deal-card > span,.deal-card h2,.deal-card > p,.deal-card .countdown { grid-column:1; }.deal-product { grid-column:2; grid-row:1 / span 4; }.deal-card h3 { grid-column:1 / -1; margin-top:12px; }.deal-card s,.deal-card > strong { grid-column:1; }.deal-card > button { grid-column:2; grid-row:5 / span 2; align-self:end; }.service-strip { grid-template-columns:1fr; }.service-strip article { border-top:1px solid var(--line); border-left:0; }.service-strip article:first-child { border-top:0; }.service-strip article:nth-child(3) { display:flex; }.product-section { padding-top:45px; }.section-title h2 { font-size:22px; }.section-title a { display:none; }.product-grid { grid-template-columns:repeat(2,1fr); }.product-card { padding:0 8px 12px; }.product-image { margin-inline:-8px; }.product-card h3 { min-height:48px; font-size:10px; }.price b { font-size:14px; }.price s { font-size:8px; }.rating { font-size:8px; }.add { padding:9px 3px; font-size:9px; }.promo-row { grid-template-columns:1fr; }.promo-row > a { min-height:185px; padding:25px; }.brands > div:last-child { grid-template-columns:repeat(3,1fr); }.brands > div span:nth-child(4) { border-left:0; }.footer-grid { grid-template-columns:1fr 1fr; gap:35px 20px; }.footer-grid > div:first-child { grid-column:1 / -1; }.footer-grid > div:last-child { display:none; }.footer-bottom { align-items:flex-start; flex-direction:column; gap:7px; }.bottom-cart { left:10px; right:10px; bottom:8px; gap:10px; min-height:48px; padding:0 8px; box-shadow:0 10px 35px rgba(0,0,0,.3); }.bottom-cart span { display:none; }
}