:root {
    /* The steel-blue tones the owner chose (dark #263f55 to #2b6a8f) */
    --orange: #2b6f9a;
    --orange-dark: #1f5577;
    --orange-soft: #e8f1f8;
    --ink: #1d3446;
    --ink-2: #536b7f;
    --line: #dfe7ee;
    --bg: #f2f6f9;
    --blue: #3d9ad1;
    --green: #4fc3a1;
    --sale: #e5383b;
    --amber: #7cc4f0;    /* the logo's light-blue tick (was the amber accent): the one accent on dark surfaces */
    --steel: #1f3a52;    /* flat, the logo's colour (was a gradient) */
    --radius: 10px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; }
  html, body { overflow-x: hidden; }
  /* Nunito: round strokes like the logo's monoline letters (static/fonts, self-hosted) */
  body { font-family: "Nunito", "Segoe UI", Arial, sans-serif; color: var(--ink); background: #fff; font-size: 15px; }
  input, select, textarea, button { font-family: inherit; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

  /* Top bar */
  .topbar { background: #172b3b; color: #b8cad8; font-size: 12.5px; }
  .topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 34px; gap: 16px; }
  .topbar b { color: #fff; font-weight: 600; }
  .topbar .links { display: flex; gap: 18px; }

  /* Header */
  header { border-bottom: 1px solid var(--line); }
  header .wrap { display: flex; align-items: center; gap: 22px; height: 86px; }
  .logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .logo-mark { width: 50px; height: 50px; border-radius: 14px; background: var(--steel); color: #fff;
    display: grid; place-items: center; font-size: 22px; position: relative;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--blue); }
  .logo-text { line-height: 1; }
  .logo-text b { font-family: "Arial Black", Arial, sans-serif; font-size: 26px; color: var(--ink); letter-spacing: -0.5px; }
  .logo-text span { display: block; font-size: 12px; letter-spacing: 3.6px; color: var(--orange); font-weight: 700; margin-top: 3px; }
  footer .logo-text span { color: var(--blue); }
  .search { flex: 1; display: flex; align-items: center; height: 48px; border: 2px solid var(--orange);
    border-radius: 999px; padding-left: 18px; background: #fff; }
  .search .ai { font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #1f6fa3, #12795a);
    border-radius: 999px; padding: 3px 8px; margin-right: 10px; white-space: nowrap; }
  .search input { flex: 1; border: 0; outline: 0; font-size: 15px; color: var(--ink-2); background: transparent; min-width: 0; }
  .search .photo { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; margin-right: 4px;
    border-radius: 999px; background: var(--orange-soft); color: var(--orange-dark); font-weight: 600; white-space: nowrap; }
  .search .go { width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: #fff;
    display: grid; place-items: center; margin-right: 3px; font-size: 18px; }
  .icons { display: flex; gap: 18px; align-items: center; flex-shrink: 0; }
  .icon { display: flex; flex-direction: column; align-items: center; font-size: 11.5px; color: var(--ink-2); gap: 2px; position: relative; }
  .icon i { font-style: normal; font-size: 22px; }
  .icon .badge { position: absolute; top: -4px; right: -2px; background: var(--orange); color: #fff; font-size: 10px;
    border-radius: 999px; padding: 1px 5px; font-weight: 700; }
  .cart-sum { font-weight: 700; color: var(--ink); }

  /* Navigation */
  nav.main { background: var(--steel); }
  nav.main .wrap { display: flex; align-items: stretch; height: 48px; }
  .catalog-btn { background: var(--ink); color: #fff; display: flex; align-items: center; gap: 10px; padding: 0 22px;
    font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; min-width: 240px; }
  .catalog-btn .grid { display: grid; grid-template-columns: repeat(3, 5px); gap: 3px; }
  .catalog-btn { background: #172b3b; }
  .catalog-btn .grid span { width: 5px; height: 5px; background: var(--blue); border-radius: 1px; }
  nav.main ul { display: flex; list-style: none; flex: 1; }
  nav.main li { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600;
    font-size: 13px; letter-spacing: 0.4px; border-left: 1px solid rgba(255,255,255,0.18); text-transform: uppercase; }
  nav.main li.hot::before { content: "🔥"; margin-right: 6px; }

  /* Hero */
  .hero { background: var(--bg); padding: 22px 0; }
  .hero .wrap { display: grid; grid-template-columns: 1fr 300px; gap: 18px; }
  .banner { position: relative; border-radius: 20px; overflow: hidden; min-height: 330px; color: #fff;
    background: linear-gradient(120deg, #22384b 0%, #263f55 35%, #2b6a8f 100%); display: flex; align-items: center; padding: 40px 46px; }
  .banner .text { flex: 1 1 300px; max-width: 420px; position: relative; z-index: 1; }
  .banner .tag { display: inline-block; background: var(--amber); color: #1d3446; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .banner h2 { font-size: 38px; line-height: 1.1; margin: 14px 0 10px; font-weight: 800; }
  .banner h2 em { font-style: normal; color: var(--amber); }
  .banner p { color: #cbd2d9; font-size: 15px; line-height: 1.5; }
  .banner .btn { display: inline-block; margin-top: 20px; background: #fff; color: var(--ink); font-weight: 700;
    border-radius: 999px; padding: 13px 26px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
  /* The goods stand next to the text, never over it */
  .banner { justify-content: space-between; gap: 24px; }
  .banner .goods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 0 1 470px; align-items: end; }
  .banner .goods img { width: 100%; aspect-ratio: 1; background: #fff; border-radius: 18px; padding: 12px; object-fit: contain; box-shadow: 0 14px 30px rgba(0,0,0,0.35); }
  .banner .goods img:nth-child(2) { transform: translateY(-18px) scale(1.12); }
  .banner .dots { position: absolute; bottom: 16px; left: 46px; display: flex; gap: 6px; }
  .banner .dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); }
  .banner .dots span:first-child { width: 24px; border-radius: 4px; background: #fff; }
  .side { display: grid; gap: 18px; }
  .side-card { border-radius: 20px; padding: 20px; position: relative; overflow: hidden; }
  .side-card h3 { font-size: 17px; margin-bottom: 6px; }
  .side-card p { font-size: 13px; line-height: 1.4; }
  .side-card.photo { background: linear-gradient(135deg, #2b6a8f, var(--blue)); color: #fff; }
  .side-card.photo .cam { font-size: 34px; }
  .side-card.photo .btn { display: inline-block; margin-top: 10px; background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; }
  .side-card.week { background: #fff; border: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
  .side-card.week img { width: 92px; height: 92px; object-fit: contain; flex-shrink: 0; }
  .side-card.week .lbl { font-size: 12px; font-weight: 700; color: var(--orange); letter-spacing: 0.08em; text-transform: uppercase; }
  .side-card.week .price { font-size: 20px; font-weight: 800; margin-top: 6px; }

  /* Sections */
  section.block { padding: 38px 0; border-bottom: 1px solid var(--line); }
  .head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
  .head h2 { font-size: 24px; font-weight: 800; }
  .head h2 small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); margin-top: 4px; }
  .head a { color: var(--orange); font-weight: 600; white-space: nowrap; }
  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
  .chip { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--ink-2); }
  .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

  /* Product cards */
  .cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column;
    background: #fff; position: relative; transition: box-shadow .2s; }
  .card:hover { box-shadow: 0 10px 26px rgba(31,41,51,0.12); }
  .card .img { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: #fff; margin-bottom: 10px; }
  .card .img img { max-width: 88%; max-height: 88%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(31,41,51,0.18)); }
  .card .fav, .card .off { z-index: 2; }
  .card .fav { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg);
    display: grid; place-items: center; font-size: 15px; color: var(--ink-2); }
  .card .why { font-size: 12px; color: #0b7650; background: #e6f8ef; border-radius: 6px; padding: 3px 7px; align-self: flex-start; margin-bottom: 6px; }
  .card .name { font-size: 13.5px; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
  .card .stock { font-size: 12px; color: #0b7650; margin-bottom: 8px; }
  .card .bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
  .card .price { font-size: 19px; font-weight: 800; }
  .card .price s { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
  .card .price.red { color: var(--sale); }
  .card .buy { width: 42px; height: 42px; border-radius: 12px; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: 19px; }
  .card .off { position: absolute; top: 12px; left: 12px; background: var(--sale); color: #fff; font-weight: 800; font-size: 12px; border-radius: 8px; padding: 4px 8px; }

  /* Category tiles */
  .cat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; position: relative; }
  .tile { border-radius: var(--radius); overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }
  .tile .pic { aspect-ratio: 1.1; display: grid; place-items: center; }
  .tile .pic img { max-width: 72%; max-height: 72%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(31,41,51,0.2)); }
  .tile .label { background: #fff; border-top: 3px solid var(--orange); padding: 10px; text-align: center; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.3px; }
  .tile .label small { display: block; font-weight: 400; color: var(--ink-2); text-transform: none; margin-top: 2px; letter-spacing: 0; }
  .arrow { position: absolute; top: 42%; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    display: grid; place-items: center; font-size: 18px; color: var(--ink); }
  .arrow.l { left: -14px; } .arrow.r { right: -14px; }

  /* Advantages */
  .adv { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .adv div { text-align: center; padding: 18px 10px; }
  .adv i { font-style: normal; font-size: 30px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--orange-soft); margin: 0 auto 10px; }
  .adv b { display: block; font-size: 14px; margin-bottom: 4px; }
  .adv span { font-size: 12.5px; color: var(--ink-2); }

  /* On sale strip (instead of the brands strip) */
  .sale { background: linear-gradient(180deg, var(--orange-soft), #fff); }
  .sale-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; position: relative; }
  .sale-strip .card .name { height: 36px; }
  .timer { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); }
  .timer b { background: var(--ink); color: #fff; border-radius: 6px; padding: 3px 7px; font-variant-numeric: tabular-nums; }

  /* About */
  .about { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; }
  .about h2 { font-size: 24px; margin-bottom: 12px; }
  .about p { color: var(--ink-2); line-height: 1.6; margin-bottom: 10px; }
  .about ul { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
  .about li::before { content: "✓"; color: #fff; background: var(--orange); border-radius: 50%; width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: 11px; margin-right: 8px; }
  .about .collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .about .collage div { aspect-ratio: 1; border-radius: 12px; background: var(--bg); display: grid; place-items: center; }
  .about .collage img { max-width: 75%; max-height: 75%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(31,41,51,0.2)); }

  /* Footer */
  footer { background: var(--steel); color: #cfdde8; margin-top: 0; }
  footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; padding: 40px 20px; }
  footer h4 { color: #fff; font-size: 14px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
  footer li { list-style: none; margin-bottom: 9px; font-size: 13px; }
  footer .logo-text b { color: #fff; }
  footer .pay { display: flex; gap: 8px; margin-top: 16px; }
  footer .pay span { background: #fff; color: var(--ink); border-radius: 6px; padding: 4px 9px; font-weight: 800; font-size: 12px; }
  .copy { text-align: center; font-size: 12px; color: #7b8794; padding: 14px; border-top: 1px solid #323f4b; }

  /* Bottom tab bar on the phone */
  .tabbar { display: none; }

  @media (max-width: 760px) {
    .wrap { padding: 0 14px; }
    .topbar, .icons .icon:not(.cart), nav.main, .side-card.week, .head a span { display: none; }
    header .wrap { height: auto; flex-wrap: wrap; padding: 12px 14px; gap: 12px; }
    .logo-mark { width: 40px; height: 40px; font-size: 18px; }
    .logo-text b { font-size: 21px; }
    .icons { margin-left: auto; }
    .search { order: 3; flex-basis: 100%; height: 46px; padding-left: 14px; }
    .search .ai { display: none; }
    .search .photo { padding: 0 10px; }
    .search .photo span { display: none; }
    .hero { padding: 14px 0; }
    .hero .wrap { grid-template-columns: 1fr; gap: 12px; }
    .banner { min-height: 0; padding: 24px 22px 40px; flex-direction: column; align-items: stretch; gap: 26px; }
    .banner h2 { font-size: 27px; }
    .banner p { font-size: 13.5px; }
    .banner .goods { flex: none; gap: 10px; padding: 0 6px; }
    .banner .goods img { padding: 8px; border-radius: 14px; }
    .banner .dots { left: 22px; bottom: 14px; }
    .side-card.photo { display: flex; gap: 14px; align-items: center; }
    section.block { padding: 26px 0; }
    .head h2 { font-size: 20px; }
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .banner .text { max-width: none; flex: none; }
    .head { flex-wrap: wrap; }
    .catalog-btn { min-width: 0; }
    .cards .card:nth-child(n+5) { display: none; }
    .cat-row, .sale-strip { display: flex; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory; padding-bottom: 4px; }
    .cat-row .tile { flex: 0 0 38%; }
    .sale-strip .card { flex: 0 0 46%; }
    .arrow { display: none; }
    .adv { grid-template-columns: repeat(2, 1fr); }
    .adv div:last-child { display: none; }
    .about { grid-template-columns: 1fr; }
    footer .wrap { grid-template-columns: 1fr 1fr; padding-bottom: 90px; }
    .copy { display: none; }
    .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: 64px;
      background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,0.06); z-index: 10; }
    .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-2); gap: 2px; }
    .tabbar a i { font-style: normal; font-size: 21px; }
    .tabbar a.on { color: var(--orange); font-weight: 700; }
    .tabbar a.cam i { width: 50px; height: 50px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center;
      margin-top: -26px; box-shadow: 0 6px 16px rgba(43,111,154,0.45); border: 4px solid #fff; }
  }