/* Back Market components on the storefront, in OUR colours.
   Back Market (its Revolve design system, read off backmarket.fr) gives the shapes, sizes, type scale, shadows,
   motion and icons; the palette stays the shop's own theme variables (--brand*, --text, --muted, --bg, --bg-2, --red,
   --green), so every domain theme and dark mode follow. The greys Back Market draws in its own neutrals are mixed
   from --text and --bg. Rules sit under the page's own ids (#header, #catnav, #obsah) so they outrank the legacy layers
   without !important. Layout – grids, columns, positions, breakpoints – is untouched; phone sizes are restated at the
   legacy 760px breakpoint. */

:root {
  --bm-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10 2.25a7.75 7.75 0 1 0 4.924 13.735l5.546 5.545a.75.75 0 1 0 1.06-1.06l-5.545-5.546A7.75 7.75 0 0 0 10 2.25M3.75 10a6.25 6.25 0 1 1 12.5 0 6.25 6.25 0 0 1-12.5 0'/%3E%3C/svg%3E");
  --bm-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3.25a4.75 4.75 0 1 0 0 9.5 4.75 4.75 0 0 0 0-9.5M8.75 8a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0'/%3E%3Cpath d='M8 14.25A4.75 4.75 0 0 0 3.25 19v1a.75.75 0 0 0 1.5 0v-1A3.25 3.25 0 0 1 8 15.75h8A3.25 3.25 0 0 1 19.25 19v1a.75.75 0 0 0 1.5 0v-1A4.75 4.75 0 0 0 16 14.25H8'/%3E%3C/svg%3E");
  --bm-i-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.309 6.25a4.751 4.751 0 0 1 9.382 0H18.5a1.25 1.25 0 0 1 1.25 1.25v11a3.25 3.25 0 0 1-3.25 3.25h-9a3.25 3.25 0 0 1-3.25-3.25v-11A1.25 1.25 0 0 1 5.5 6.25h1.809m1.528 0a3.251 3.251 0 0 1 6.326 0H8.837M5.75 18.5V7.75h12.5V18.5a1.75 1.75 0 0 1-1.75 1.75h-9a1.75 1.75 0 0 1-1.75-1.75'/%3E%3C/svg%3E");
  --bm-i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.5 4.87a3.75 3.75 0 0 0-3.75 3.75c0 1.14.596 2.126 1.462 2.977l.014.014L12 19.01l6.774-7.4.014-.013c.866-.85 1.462-1.838 1.462-2.977a3.75 3.75 0 0 0-3.75-3.75c-.982 0-1.813.493-2.515 1.077a13 13 0 0 0-.7.634l-.209.197a5 5 0 0 1-.4.342C12.578 7.19 12.326 7.37 12 7.37c-.325 0-.578-.18-.676-.25a5 5 0 0 1-.4-.342L10.716 6.58c-.211-.2-.436-.414-.701-.634C9.313 5.363 8.482 4.87 7.5 4.87M2.25 8.62c0-2.9 2.35-5.25 5.25-5.25 1.503 0 2.672.757 3.474 1.423a16 16 0 0 1 .8.724L12 5.73a9 9 0 0 0 .226-.213 16 16 0 0 1 .8-.724c.802-.666 1.97-1.423 3.474-1.423 2.9 0 5.25 2.35 5.25 5.25 0 1.694-.888 3.038-1.896 4.033l-6.932 7.57a1.25 1.25 0 0 1-1.844 0l-6.932-7.57C3.138 11.658 2.25 10.313 2.25 8.62'/%3E%3C/svg%3E");
  --bm-i-heart-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.25 8.62c0-2.9 2.35-5.25 5.25-5.25 1.503 0 2.672.757 3.474 1.423a16 16 0 0 1 .8.724L12 5.73a9 9 0 0 0 .226-.213 16 16 0 0 1 .8-.724c.802-.666 1.97-1.423 3.474-1.423 2.9 0 5.25 2.35 5.25 5.25 0 1.694-.888 3.038-1.896 4.033l-6.932 7.57a1.25 1.25 0 0 1-1.844 0l-6.932-7.57C3.138 11.658 2.25 10.313 2.25 8.62'/%3E%3C/svg%3E");
  --bm-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.75 6a.75.75 0 0 0-1.5 0v5.25H6a.75.75 0 0 0 0 1.5h5.25V18a.75.75 0 0 0 1.5 0v-5.25H18a.75.75 0 0 0 0-1.5h-5.25V6'/%3E%3C/svg%3E");
  --bm-i-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='m13.043 12-3.47 3.47a.75.75 0 1 0 1.06 1.06l3.647-3.646a1.25 1.25 0 0 0 0-1.768L10.634 7.47a.75.75 0 0 0-1.06 1.06L13.042 12'/%3E%3C/svg%3E");
  --bm-i-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='m10.957 12 3.47-3.47a.75.75 0 1 0-1.06-1.06L9.72 11.116a1.25 1.25 0 0 0 0 1.768l3.646 3.646a.75.75 0 0 0 1.06-1.06L10.958 12'/%3E%3C/svg%3E");
  --bm-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.154 3.65c-.427-1.026-1.881-1.026-2.308 0L8.838 8.478l-5.21.418C2.519 8.984 2.07 10.367 2.914 11.09l3.97 3.4-1.213 5.085c-.258 1.082.919 1.937 1.868 1.357l4.46-2.724 4.462 2.724c.949.58 2.125-.275 1.867-1.357l-1.212-5.084 3.97-3.4c.844-.724.394-2.107-.714-2.196l-5.21-.418-2.008-4.826'/%3E%3C/svg%3E");
  --bm-i-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.5 2.25A.75.75 0 0 1 8.25 3c0 1.506.324 2.389.85 2.911C9.627 6.435 10.51 6.75 12 6.75a.75.75 0 0 1 0 1.5c-1.483 0-2.37.323-2.898.852C8.572 9.63 8.25 10.517 8.25 12a.75.75 0 0 1-1.5 0c0-1.482-.325-2.369-.855-2.898C5.365 8.572 4.478 8.25 3 8.25a.75.75 0 0 1 0-1.5c1.483 0 2.369-.315 2.897-.84C6.424 5.389 6.75 4.505 6.75 3A.75.75 0 0 1 7.5 2.25M7.499 6.287a3.7 3.7 0 0 1-1.222 1.218A3.74 3.74 0 0 1 7.499 8.73a3.7 3.7 0 0 1 1.22-1.225A3.7 3.7 0 0 1 7.5 6.287M15 8.25A.75.75 0 0 1 15.75 9c0 1.884.47 3.16 1.28 3.97s2.086 1.28 3.97 1.28a.75.75 0 0 1 0 1.5c-1.884 0-3.16.47-3.97 1.28s-1.28 2.086-1.28 3.97a.75.75 0 0 1-1.5 0c0-1.884-.47-3.16-1.28-3.97S10.884 15.75 9 15.75a.75.75 0 0 1 0-1.5c1.884 0 3.16-.47 3.97-1.28s1.28-2.086 1.28-3.97A.75.75 0 0 1 15 8.25m0 4.428a5.2 5.2 0 0 1-.97 1.352A5.2 5.2 0 0 1 12.678 15a5.2 5.2 0 0 1 1.352.97A5.2 5.2 0 0 1 15 17.322a5.2 5.2 0 0 1 .97-1.352A5.2 5.2 0 0 1 17.322 15a5.2 5.2 0 0 1-1.352-.97A5.2 5.2 0 0 1 15 12.678'/%3E%3C/svg%3E");
  --bm-i-price-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.75c-5.385 0-9.75-4.365-9.75-9.75S6.615 2.25 12 2.25s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75m2.864-5.636a1.25 1.25 0 0 0 1.25-1.25v-4.571a.75.75 0 0 0-1.5 0v3.26L9.53 8.47a.75.75 0 1 0-1.06 1.06l5.084 5.084h-3.261a.75.75 0 0 0 0 1.5h4.571'/%3E%3C/svg%3E");
  --bm-i-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M21.75 6a1.25 1.25 0 0 0-1.25-1.25h-17A1.25 1.25 0 0 0 2.25 6v12a1.25 1.25 0 0 0 1.25 1.25h17A1.25 1.25 0 0 0 21.75 18V6m-1.5 1.099V6.25H3.75v.849l8.25 5.5 8.25-5.5M3.75 8.9v8.849h16.5V8.901l-7.556 5.038a1.25 1.25 0 0 1-1.387 0L3.75 8.901'/%3E%3C/svg%3E");
  --bm-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.53 6.073a.75.75 0 0 1 0 1.06L9.884 17.78a1.25 1.25 0 0 1-1.768 0L3.47 13.134a.75.75 0 0 1 1.06-1.06L9 16.542l10.47-10.47a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E");
  --bm-i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.4 2.785a1.25 1.25 0 0 1 .883.366l8.693 8.693a1.25 1.25 0 0 1 0 1.767l-6.365 6.365a1.25 1.25 0 0 1-1.767 0L3.15 11.283A1.25 1.25 0 0 1 2.785 10.4V4.035l.007-.128a1.25 1.25 0 0 1 1.243-1.122H10.4M7.5 6a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3'/%3E%3C/svg%3E");
  --bm-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.503 5.686 12 3.502 4.497 5.687V9.49c0 4.162 2.417 7.99 7.503 11.004 5.087-3.013 7.503-6.838 7.503-11.004V5.686m1.488 4.257c-.173 4.673-3.018 8.764-8.258 11.859a1.44 1.44 0 0 1-.733.2l-.19-.013a1.4 1.4 0 0 1-.543-.187c-5.238-3.097-8.085-7.19-8.258-11.86L3 9.49V5.651a1.46 1.46 0 0 1 .93-1.355l.114-.038 7.553-2.2a1.46 1.46 0 0 1 .808 0l7.554 2.2h-.003A1.46 1.46 0 0 1 21 5.65v3.84l-.009.454'/%3E%3C/svg%3E");
  --bm-i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2.25 6A1.25 1.25 0 0 1 3.5 4.75h10a1.25 1.25 0 0 1 1.225 1h2.966a1.25 1.25 0 0 1 1.118.691l1.655 3.31H20.5A1.25 1.25 0 0 1 21.75 11v5a1.25 1.25 0 0 1-1.25 1.25h-.854a2.751 2.751 0 0 1-5.292 0h-3.707a2.751 2.751 0 0 1-5.293 0H3.5A1.25 1.25 0 0 1 2.25 16V6m12.5 8.919a2.751 2.751 0 0 1 4.897.832h.603v-4.5l-5.5-.001v3.669m0-5.169v-2.5h2.787l1.25 2.5H14.75m-1.5 6h-2.604a2.751 2.751 0 0 0-5.292 0H3.75v-9.5h9.5v9.5m-6.5.75a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0m9 0a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0'/%3E%3C/svg%3E");
  --bm-i-truck-express: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2.25 5.5A.75.75 0 0 1 3 4.75h10.5a1.25 1.25 0 0 1 1.225 1h2.966a1.25 1.25 0 0 1 1.118.691l1.655 3.31H20.5A1.25 1.25 0 0 1 21.75 11v5a1.25 1.25 0 0 1-1.25 1.25h-.854a2.751 2.751 0 0 1-5.292 0h-3.207a2.751 2.751 0 0 1-5.293 0H5A1.25 1.25 0 0 1 3.75 16v-5.5a.75.75 0 0 1 1.5 0v5.25h.604a2.751 2.751 0 0 1 5.292 0h2.104v-9.5H3A.75.75 0 0 1 2.25 5.5m18 10.25h-.604a2.751 2.751 0 0 0-4.896-.832V11.25h5.5v4.5m-5.5-6v-2.5h2.787l1.25 2.5H14.75m-7.5 6.75a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0M17 15.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5'/%3E%3Cpath d='M3.5 7.25a.75.75 0 0 0 0 1.5H7a.75.75 0 0 0 0-1.5H3.5'/%3E%3C/svg%3E");
  --bm-i-compare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2.25 4.5A2.25 2.25 0 0 1 4.5 2.25h9a2.25 2.25 0 0 1 2.25 2.25v3.75h3.75a2.25 2.25 0 0 1 2.25 2.25v9a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-3.75H4.5a2.25 2.25 0 0 1-2.25-2.25v-9m7.5 11.25v3.75a.75.75 0 0 0 .75.75h9a.75.75 0 0 0 .75-.75v-9a.75.75 0 0 0-.75-.75h-3.75v3.75a2.25 2.25 0 0 1-2.25 2.25H9.75m4.5-6v3.75a.75.75 0 0 1-.75.75H9.75V10.5a.75.75 0 0 1 .75-.75h3.75m0-1.5H10.5a2.25 2.25 0 0 0-2.25 2.25v3.75H4.5a.75.75 0 0 1-.75-.75v-9A.75.75 0 0 1 4.5 3.75h9a.75.75 0 0 1 .75.75v3.75'/%3E%3C/svg%3E");
  --bm-i-cookie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2m7-3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-6.25-2a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5m9.75 5.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m-4.75 2.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5'/%3E%3Cpath fill-rule='evenodd' d='M12.852 3.187a.75.75 0 0 0-.79-.934L12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75q0-.031-.003-.062a.75.75 0 0 0-.934-.79A3.25 3.25 0 0 1 16.75 8 .75.75 0 0 0 16 7.25a3.25 3.25 0 0 1-3.148-4.063M20 12.75a5 5 0 0 0 .217-.005 8.25 8.25 0 1 1-8.962-8.962A4.75 4.75 0 0 0 15.3 8.7a4.75 4.75 0 0 0 4.7 4.05'/%3E%3Cpath d='M17.5 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M20 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
  --bm-i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2.25 6.5A2.25 2.25 0 0 1 4.5 4.25h4.691a1.25 1.25 0 0 1 1.118.691l1.155 2.309H19.5a2.25 2.25 0 0 1 2.25 2.25v8a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25v-11m1.5 0A.75.75 0 0 1 4.5 5.75h4.536l1.155 2.309a1.25 1.25 0 0 0 1.118.691H19.5a.75.75 0 0 1 .75.75v1.263a2.3 2.3 0 0 0-.75-.128h-8.207l-1.14-1.053A1.25 1.25 0 0 0 9.304 9.25H4.5a2.3 2.3 0 0 0-.75.128V6.5m0 5v6a.75.75 0 0 0 .75.75h15a.75.75 0 0 0 .75-.75v-4.615a.75.75 0 0 0-.75-.75h-8.304a1.25 1.25 0 0 1-.848-.332L9.207 10.75H4.5a.75.75 0 0 0-.75.75'/%3E%3C/svg%3E");
  --bm-i-price-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.143 8.143A1 1 0 1 1 6.73 6.73a1 1 0 0 1 1.414 1.414'/%3E%3Cpath fill-rule='evenodd' d='M4.472 3.222a1.25 1.25 0 0 0-1.25 1.25v6.364a1.25 1.25 0 0 0 .366.884l8.692 8.692a1.25 1.25 0 0 0 1.768 0l6.364-6.364a1.25 1.25 0 0 0 0-1.768L11.72 3.588a1.25 1.25 0 0 0-.884-.366H4.472m.25 7.51v-6.01h6.01l8.443 8.442-6.01 6.01-8.443-8.442'/%3E%3C/svg%3E");
  --bm-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.25A.75.75 0 0 1 12.75 13v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 12 12.25'/%3E%3Cpath fill-rule='evenodd' d='M7.75 8.25V7.2c0-2.243 1.967-3.95 4.25-3.95s4.25 1.707 4.25 3.95v1.05h.25a3.25 3.25 0 0 1 3.25 3.25v6a3.25 3.25 0 0 1-3.25 3.25h-9a3.25 3.25 0 0 1-3.25-3.25v-6A3.25 3.25 0 0 1 7.5 8.25h.25m1.5-1.05c0-1.291 1.166-2.45 2.75-2.45s2.75 1.159 2.75 2.45v1.05h-5.5V7.2m7.25 2.55a1.75 1.75 0 0 1 1.75 1.75v6a1.75 1.75 0 0 1-1.75 1.75h-9a1.75 1.75 0 0 1-1.75-1.75v-6A1.75 1.75 0 0 1 7.5 9.75h9'/%3E%3C/svg%3E");
  --bm-i-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3.75a6.25 6.25 0 0 0-6.21 5.534A1.25 1.25 0 0 1 6.75 10.5v5a1.25 1.25 0 0 1-1.25 1.25 3.25 3.25 0 0 1-3.25-3.25v-1a3.25 3.25 0 0 1 2.016-3.008 7.75 7.75 0 0 1 15.468 0A3.25 3.25 0 0 1 21.75 12.5v1a3.25 3.25 0 0 1-2.242 3.09l-.993 1.49a3.75 3.75 0 0 1-3.12 1.67h-.748a2.751 2.751 0 1 1 0-1.5h.747a2.25 2.25 0 0 0 1.873-1.002l.493-.74a1.25 1.25 0 0 1-.51-1.008v-5a1.25 1.25 0 0 1 .96-1.216A6.25 6.25 0 0 0 12 3.75m-6.75 7.018a1.75 1.75 0 0 0-1.5 1.732v1a1.75 1.75 0 0 0 1.5 1.732v-4.464M12 20.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5m6.75-9.482v4.464a1.75 1.75 0 0 0 1.5-1.732v-1a1.75 1.75 0 0 0-1.5-1.732'/%3E%3C/svg%3E");
  --bm-i-medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.106 12.99-.837-1.695a.3.3 0 0 0-.538 0l-.837 1.696a.3.3 0 0 1-.226.164l-1.87.272a.3.3 0 0 0-.167.511l1.354 1.32a.3.3 0 0 1 .086.266l-.32 1.863a.3.3 0 0 0 .436.316l1.673-.88a.3.3 0 0 1 .28 0l1.673.88a.3.3 0 0 0 .435-.316l-.32-1.864a.3.3 0 0 1 .087-.265l1.354-1.32a.3.3 0 0 0-.166-.511l-1.871-.272a.3.3 0 0 1-.226-.164'/%3E%3Cpath fill-rule='evenodd' d='M3.217 4.328A1.25 1.25 0 0 1 4.325 2.5h3.872a1.25 1.25 0 0 1 1.108.672l2.52 4.83a7 7 0 0 1 .35 0l2.52-4.83A1.25 1.25 0 0 1 15.803 2.5h3.872a1.25 1.25 0 0 1 1.108 1.828l-3.348 6.418a6.75 6.75 0 1 1-10.87 0L3.217 4.328M8.045 4l2.207 4.229a6.7 6.7 0 0 0-2.6 1.358L4.737 4h3.308m8.303 5.587a6.7 6.7 0 0 0-2.6-1.358L15.956 4h3.308l-2.915 5.587M12 9.5A5.25 5.25 0 1 0 12 20a5.25 5.25 0 0 0 0-10.5'/%3E%3C/svg%3E");
  --bm-i-shop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 11.192a1.25 1.25 0 0 1-.84-1.473L3.5 4.994A2.25 2.25 0 0 1 5.694 3.25h12.614A2.25 2.25 0 0 1 20.5 4.994l1.09 4.725a1.25 1.25 0 0 1-.84 1.473V18.5a2.25 2.25 0 0 1-2.25 2.25H15a1.25 1.25 0 0 1-1.25-1.25V16a1.75 1.75 0 1 0-3.5 0v3.5A1.25 1.25 0 0 1 9 20.75H5.5a2.25 2.25 0 0 1-2.25-2.25v-7.308M9.685 4.75 9.296 9.025l.833.357a4.75 4.75 0 0 0 3.742 0l.833-.357-.39-4.275h-4.63m-2.11 6.051.95-.475.013.006 1 .429a6.25 6.25 0 0 0 4.924 0l1-.429.014-.006.95.475a4.25 4.25 0 0 0 1.9.449h.924v7.25a.75.75 0 0 1-.75.75h-3.25V16a3.25 3.25 0 0 0-6.5 0v3.25H5.5a.75.75 0 0 1-.75-.75v-7.25h.924a4.25 4.25 0 0 0 1.9-.449M7.79 9.016 8.179 4.75H5.693a.75.75 0 0 0-.73.581L3.942 9.75h1.73a2.75 2.75 0 0 0 1.23-.29L7.79 9.016m9.305.444L16.21 9.016 15.82 4.75h2.486a.75.75 0 0 1 .73.581l1.02 4.419h-1.73a2.75 2.75 0 0 1-1.23-.29'/%3E%3C/svg%3E");
  --bm-i-refund: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.25 12A9.75 9.75 0 0 1 12 2.25a9.72 9.72 0 0 1 6.75 2.714V3a.75.75 0 0 1 1.5 0v3.5A1.25 1.25 0 0 1 19 7.75h-3a.75.75 0 0 1 0-1.5h1.916l-.043-.044A8.25 8.25 0 1 0 12 20.25 8.25 8.25 0 0 0 20.25 12a.75.75 0 0 1 1.5 0c0 5.385-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12'/%3E%3Cpath d='M12 11.5c2.21 0 4-.672 4-1.5s-1.79-1.5-4-1.5S8 9.172 8 10s1.79 1.5 4 1.5'/%3E%3Cpath d='M15.092 11.763C14.264 12.073 13.17 12.25 12 12.25s-2.264-.177-3.092-.487a4.3 4.3 0 0 1-.644-.3C8.094 11.63 8 11.811 8 12c0 .829 1.79 1.5 4 1.5s4-.671 4-1.5c0-.19-.093-.37-.264-.537a4.3 4.3 0 0 1-.644.3'/%3E%3Cpath d='M12 14.25c1.17 0 2.264-.177 3.092-.487a4.3 4.3 0 0 0 .644-.3C15.906 13.63 16 13.811 16 14c0 .829-1.79 1.5-4 1.5S8 14.83 8 14c0-.19.093-.37.264-.537a4.3 4.3 0 0 0 .644.3C9.736 14.073 10.83 14.25 12 14.25'/%3E%3C/svg%3E");
  --bm-i-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3Cpath fill-rule='evenodd' d='M7.5 3.25A1.25 1.25 0 0 0 6.25 4.5v2.76a3.25 3.25 0 0 0-3 3.24v6a1.25 1.25 0 0 0 1.25 1.25h1.115l-.258 1.544A1.25 1.25 0 0 0 6.59 20.75h10.82a1.25 1.25 0 0 0 1.233-1.456l-.258-1.544H19.5a1.25 1.25 0 0 0 1.25-1.25v-6a3.25 3.25 0 0 0-3-3.24V4.5a1.25 1.25 0 0 0-1.25-1.25h-9M6.19 14.295 5.865 16.25H4.75V10.5A1.75 1.75 0 0 1 6.5 8.75h11a1.75 1.75 0 0 1 1.75 1.75v5.75h-1.115l-.326-1.956a1.25 1.25 0 0 0-1.233-1.044H7.423a1.25 1.25 0 0 0-1.233 1.044M16.25 7.25v-2.5h-8.5v2.5h8.5m-8.615 7.5-.75 4.5h10.23l-.75-4.5h-8.73'/%3E%3C/svg%3E");
  --bm-i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.25 5a.5.5 0 0 0-.5.5v2A.5.5 0 0 0 5.25 8h2a.5.5 0 0 0 .5-.5v-2A.5.5 0 0 0 7.25 5h-2m0 5.5a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-2m-.5 6a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2m5-10.75a.75.75 0 0 0 0 1.5h8.75a.75.75 0 0 0 0-1.5H9.75M9 17.5a.75.75 0 0 1 .75-.75h8.75a.75.75 0 0 1 0 1.5H9.75A.75.75 0 0 1 9 17.5m.75-6.25a.75.75 0 0 0 0 1.5h8.75a.75.75 0 0 0 0-1.5H9.75'/%3E%3C/svg%3E");
  --bm-i-quality: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.53 8.54a.75.75 0 0 0-1.06-1.061L11 12.949l-2.47-2.47a.75.75 0 0 0-1.06 1.06l2.646 2.647a1.25 1.25 0 0 0 1.768 0l5.646-5.647'/%3E%3Cpath fill-rule='evenodd' d='M4.5 2.759a1.25 1.25 0 0 0-1.25 1.25V8.73c0 9.392 7.29 12.1 8.395 12.455a1.15 1.15 0 0 0 .71 0C13.46 20.83 20.75 18.122 20.75 8.73V4.01a1.25 1.25 0 0 0-1.25-1.25h-15m.25 5.97V4.26h14.5v4.47c0 8.106-6.024 10.573-7.25 10.992-1.226-.419-7.25-2.886-7.25-10.992'/%3E%3C/svg%3E");
  --bm-i-official: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.548 9.512a.75.75 0 1 0-1.096-1.024L10.4 13.901l-1.852-1.984a.75.75 0 0 0-1.096 1.023l2.034 2.18a1.25 1.25 0 0 0 1.828 0l5.234-5.608'/%3E%3Cpath fill-rule='evenodd' d='M13.764 3.401c-.993-1.535-3.24-1.535-4.233 0A1.02 1.02 0 0 1 8.306 3.8C6.6 3.141 4.782 4.462 4.88 6.288A1.02 1.02 0 0 1 4.124 7.33C2.357 7.8 1.662 9.937 2.816 11.356a1.02 1.02 0 0 1 0 1.288c-1.154 1.42-.46 3.556 1.308 4.026a1.02 1.02 0 0 1 .757 1.042C4.782 19.538 6.6 20.86 8.306 20.201a1.02 1.02 0 0 1 1.225.398c.993 1.535 3.24 1.535 4.233 0A1.02 1.02 0 0 1 14.99 20.2c1.706.658 3.523-.663 3.425-2.489a1.02 1.02 0 0 1 .757-1.042c1.767-.47 2.461-2.607 1.308-4.026a1.02 1.02 0 0 1 0-1.288c1.153-1.42.46-3.556-1.308-4.026a1.02 1.02 0 0 1-.757-1.042c.098-1.826-1.719-3.147-3.425-2.489A1.02 1.02 0 0 1 13.765 3.4M10.79 4.216a1.02 1.02 0 0 1 1.715 0A2.52 2.52 0 0 0 15.529 5.2a1.02 1.02 0 0 1 1.387 1.008 2.52 2.52 0 0 0 1.869 2.572 1.02 1.02 0 0 1 .53 1.631 2.52 2.52 0 0 0 0 3.18 1.02 1.02 0 0 1-.53 1.63 2.52 2.52 0 0 0-1.869 2.573 1.02 1.02 0 0 1-1.387 1.008 2.52 2.52 0 0 0-3.024.983 1.02 1.02 0 0 1-1.715 0A2.52 2.52 0 0 0 7.766 18.8a1.02 1.02 0 0 1-1.387-1.008 2.52 2.52 0 0 0-1.87-2.572 1.02 1.02 0 0 1-.53-1.631 2.52 2.52 0 0 0 0-3.18 1.02 1.02 0 0 1 .53-1.63 2.52 2.52 0 0 0 1.87-2.573 1.02 1.02 0 0 1 1.387-1.008 2.52 2.52 0 0 0 3.024-.983'/%3E%3C/svg%3E");
  --bm-i-grade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4.5 2.759a1.25 1.25 0 0 0-1.25 1.25V8.73c0 9.392 7.29 12.1 8.395 12.455a1.15 1.15 0 0 0 .71 0C13.46 20.83 20.75 18.122 20.75 8.73V4.01a1.25 1.25 0 0 0-1.25-1.25h-15m.25 5.97V4.26h14.5v4.47c0 8.106-6.024 10.573-7.25 10.992-1.226-.419-7.25-2.886-7.25-10.992'/%3E%3Cpath d='M12.506 7.388a.548.548 0 0 0-1.012 0l-.88 2.117L8.327 9.69a.548.548 0 0 0-.313.963l1.741 1.491-.532 2.23a.548.548 0 0 0 .82.596L12 13.774l1.957 1.195a.548.548 0 0 0 .819-.595l-.532-2.23 1.741-1.492a.548.548 0 0 0-.313-.963l-2.285-.184-.88-2.117'/%3E%3C/svg%3E");
  --bm-i-returns: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.53 11.53a.75.75 0 0 1-1.06 0L3.823 8.884a1.25 1.25 0 0 1 0-1.768L6.47 4.47a.75.75 0 0 1 1.06 1.06L5.81 7.25H17a.75.75 0 0 1 0 1.5H5.81l1.72 1.72a.75.75 0 0 1 0 1.06M6.25 16A.75.75 0 0 0 7 16.75h11.19l-1.72 1.72a.75.75 0 1 0 1.06 1.06l2.647-2.646a1.25 1.25 0 0 0 0-1.768L17.53 12.47a.75.75 0 0 0-1.06 1.06l1.72 1.72H7A.75.75 0 0 0 6.25 16'/%3E%3C/svg%3E");
  --bm-i-trade-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.273 3.5a1.25 1.25 0 0 1 1.25 1.25v3.5a.75.75 0 0 1-1.5 0V5.813A8.25 8.25 0 0 0 11.75 20a.75.75 0 0 1 0 1.499C6.365 21.5 2 17.135 2 11.75A9.72 9.72 0 0 1 4.716 5H2.75a.75.75 0 0 1 0-1.5h3.523M11.75 2a9.75 9.75 0 0 1 9.75 9.75 9.72 9.72 0 0 1-2.7 6.734h1.95a.75.75 0 0 1 0 1.5h-3.5a1.25 1.25 0 0 1-1.25-1.25V15.25a.75.75 0 0 1 1.5 0v2.414A8.25 8.25 0 0 0 11.75 3.5a.75.75 0 0 1 0-1.5'/%3E%3Cpath d='M11.75 8a.75.75 0 0 1 .75.75V11h2.25a.75.75 0 0 1 0 1.5H12.5v2.25a.75.75 0 0 1-1.5 0V12.5H8.75a.75.75 0 0 1 0-1.5H11V8.75A.75.75 0 0 1 11.75 8'/%3E%3C/svg%3E");
  --bm-i-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6.841 6.23C6.354 4.31 7.861 2.5 9.811 2.5A3.1 3.1 0 0 1 12 3.4a3.12 3.12 0 0 1 2.19-.9c1.948 0 3.456 1.81 2.969 3.73A3 3 0 0 1 16.844 7H19.5a1.25 1.25 0 0 1 1.25 1.25v3a1.25 1.25 0 0 1-1.25 1.25h-.25v7.75A1.25 1.25 0 0 1 18 21.5H6a1.25 1.25 0 0 1-1.25-1.25V12.5H4.5a1.25 1.25 0 0 1-1.25-1.25v-3A1.25 1.25 0 0 1 4.5 7h2.656a3 3 0 0 1-.315-.77M12.75 20h5v-7.5h-5V20m-1.5-7.5V20h-5v-7.5h5m1.5-1.5h6.5V8.5h-6.5V11m-1.5-2.5V11h-6.5V8.5h6.5m4.455-2.639A1.53 1.53 0 0 1 14.215 7h-1.467l-.005-1.816a4 4 0 0 0-.009-.25A1.59 1.59 0 0 1 14.19 4c1.025 0 1.748.941 1.515 1.861m-4.462-.673L11.248 7H9.785a1.53 1.53 0 0 1-1.49-1.139C8.061 4.941 8.785 4 9.81 4a1.6 1.6 0 0 1 1.345.726c.049.076.088.213.088.462'/%3E%3C/svg%3E");
  --bm-i-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.25 12a8.25 8.25 0 1 0-16.5 0 8.25 8.25 0 0 0 16.5 0m1.5 0c0 5.385-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12 6.615 2.25 12 2.25s9.75 4.365 9.75 9.75'/%3E%3Cpath d='M12 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-.75-4c0-1.46 1.152-2.17 1.834-2.624.818-.545 1.166-.836 1.166-1.376 0-.853-.825-1.75-2.25-1.75S9.75 9.147 9.75 10a.75.75 0 0 1-1.5 0c0-1.908 1.743-3.25 3.75-3.25s3.75 1.342 3.75 3.25c0 1.46-1.152 2.17-1.834 2.624C13.098 13.169 12.75 13.46 12.75 14a.75.75 0 0 1-1.5 0'/%3E%3C/svg%3E");
  --bm-i-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='m12 10.957 3.47 3.47a.75.75 0 1 0 1.06-1.06L12.884 9.72a1.25 1.25 0 0 0-1.768 0L7.47 13.366a.75.75 0 0 0 1.06 1.06L12 10.958'/%3E%3C/svg%3E");
  --bm-i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='m12 13.043-3.47-3.47a.75.75 0 0 0-1.06 1.06l3.646 3.647a1.25 1.25 0 0 0 1.768 0l3.646-3.646a.75.75 0 0 0-1.06-1.06L12 13.042'/%3E%3C/svg%3E");
  --bm-i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.125c-1.774 0-3.485.657-4.755 1.842C5.937 5.188 5.25 7.23 5.25 8.875v3.5c0 1.836-.893 2.485-1.268 2.69C3.61 15.27 3.25 15.69 3.25 16.253v.123a1.25 1.25 0 0 0 1.25 1.25h15a1.25 1.25 0 0 0 1.25-1.25V16.24c0-.547-.343-.963-.708-1.17-.388-.22-1.292-.899-1.292-2.694v-3.5c0-1.646-.687-3.687-1.995-4.908-1.27-1.184-2.982-1.842-4.755-1.842m-5.25 6.75c0-1.324.577-2.932 1.519-3.811.981-.918 2.323-1.44 3.731-1.44s2.749.523 3.731 1.439c.942.879 1.519 2.487 1.519 3.811v3.5c0 2.073.933 3.196 1.673 3.75H5.102c.744-.553 1.648-1.668 1.648-3.75v-3.5'/%3E%3Cpath d='M10.76 19.282a.75.75 0 0 0-1.489.186 2.75 2.75 0 0 0 5.458 0 .75.75 0 1 0-1.489-.186 1.25 1.25 0 0 1-2.48 0'/%3E%3C/svg%3E");
  --bm-i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.47 3.47a.75.75 0 0 1 1.06 0L12 10.94l7.47-7.47a.75.75 0 1 1 1.06 1.06L13.06 12l7.47 7.47a.75.75 0 1 1-1.06 1.06L12 13.06l-7.47 7.47a.75.75 0 0 1-1.06-1.06L10.94 12 3.47 4.53a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
  --bm-i-burger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.25 7A.75.75 0 0 1 3 6.25h18a.75.75 0 0 1 0 1.5H3A.75.75 0 0 1 2.25 7m0 10A.75.75 0 0 1 3 16.25h18a.75.75 0 0 1 0 1.5H3A.75.75 0 0 1 2.25 17M3 11.25a.75.75 0 0 0 0 1.5h18a.75.75 0 0 0 0-1.5H3'/%3E%3C/svg%3E");
  --bm-i-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12.75 4.707 1.22 1.22a.75.75 0 1 0 1.06-1.06L12.884 2.72a1.25 1.25 0 0 0-1.768 0L8.97 4.866a.75.75 0 0 0 1.06 1.06l1.22-1.219v9.69a.75.75 0 0 0 1.5 0v-9.69'/%3E%3Cpath d='M7 9.646a.75.75 0 0 0-.75.75v9A.75.75 0 0 0 7 20.146h10a.75.75 0 0 0 .75-.75v-9A.75.75 0 0 0 17 9.646h-2a.75.75 0 0 1 0-1.5h2a2.25 2.25 0 0 1 2.25 2.25v9a2.25 2.25 0 0 1-2.25 2.25H7a2.25 2.25 0 0 1-2.25-2.25v-9A2.25 2.25 0 0 1 7 8.146h2a.75.75 0 0 1 0 1.5H7'/%3E%3C/svg%3E");
  --bm-i-comment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 6.25a.75.75 0 0 0 0 1.5h10a.75.75 0 0 0 0-1.5H7M6.25 10A.75.75 0 0 1 7 9.25h10a.75.75 0 0 1 0 1.5H7A.75.75 0 0 1 6.25 10M7 12.25a.75.75 0 0 0 0 1.5h10a.75.75 0 0 0 0-1.5H7'/%3E%3Cpath fill-rule='evenodd' d='M21.75 14.5v-9a3.25 3.25 0 0 0-3.25-3.25h-13A3.25 3.25 0 0 0 2.25 5.5v9a3.25 3.25 0 0 0 3.25 3.25h.75V21a.75.75 0 0 0 1.219.586l4.794-3.836H18.5a3.25 3.25 0 0 0 3.25-3.25m-1.5 0a1.75 1.75 0 0 1-1.75 1.75h-6.325a1.25 1.25 0 0 0-.78.274L7.75 19.439V17.5a1.25 1.25 0 0 0-1.25-1.25h-1a1.75 1.75 0 0 1-1.75-1.75v-9A1.75 1.75 0 0 1 5.5 3.75h13a1.75 1.75 0 0 1 1.75 1.75v9'/%3E%3C/svg%3E");
  --bm-i-check-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M17.53 8.073a.75.75 0 0 1 0 1.06l-6.646 6.647a1.25 1.25 0 0 1-1.768 0L6.47 13.134a.75.75 0 0 1 1.06-1.06L10 14.542l6.47-6.47a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E");
  --bm-i-check-large: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.53 6.073a.75.75 0 0 1 0 1.06L9.884 17.78a1.25 1.25 0 0 1-1.768 0L3.47 13.134a.75.75 0 0 1 1.06-1.06L9 16.542l10.47-10.47a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E");
  --bm-i-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.03 9.53a.75.75 0 0 0-1.06-1.06l-5.47 5.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l2.646 2.647a1.25 1.25 0 0 0 1.768 0L17.03 9.53'/%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25M3.75 12a8.25 8.25 0 1 1 16.5 0 8.25 8.25 0 0 1-16.5 0'/%3E%3C/svg%3E");
  --bm-i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 12c0-.414.241-.75.538-.75h12.924C18.759 11.25 19 11.586 19 12s-.241.75-.538.75H5.538C5.241 12.75 5 12.414 5 12'/%3E%3C/svg%3E");
  --bm-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.75 7.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a.75.75 0 0 1 .75-.75h1A1.25 1.25 0 0 1 12.75 11v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4.5H10.5a.75.75 0 0 1-.75-.75'/%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25M3.75 12a8.25 8.25 0 1 1 16.5 0 8.25 8.25 0 0 1-16.5 0'/%3E%3C/svg%3E");
  --bm-i-laptop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 6.5A2.25 2.25 0 0 1 5.5 4.25h13a2.25 2.25 0 0 1 2.25 2.25v8a2.24 2.24 0 0 1-.23.994 2.25 2.25 0 0 1-1.02 4.256h-15a2.25 2.25 0 0 1-1.02-4.256A2.24 2.24 0 0 1 3.25 14.5v-8m2.25 8.75h13a.75.75 0 0 0 .75-.75v-8a.75.75 0 0 0-.75-.75h-13A.75.75 0 0 0 4.75 6.5v8a.75.75 0 0 0 .75.75m13 1.5h-14a.75.75 0 0 0 0 1.5h15a.75.75 0 0 0 0-1.5h-1'/%3E%3C/svg%3E");
  --bm-i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6.47 6.47a.75.75 0 0 1 1.06 0L12 10.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L13.06 12l4.47 4.47a.75.75 0 1 1-1.06 1.06L12 13.06l-4.47 4.47a.75.75 0 0 1-1.06-1.06L10.94 12 6.47 7.53a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
  --bm-i-verified: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.53 3.401c.994-1.535 3.24-1.535 4.234 0A1.02 1.02 0 0 0 14.99 3.8c1.706-.658 3.523.663 3.425 2.489A1.02 1.02 0 0 0 19.17 7.33c1.767.47 2.461 2.607 1.308 4.026a1.02 1.02 0 0 0 0 1.288c1.153 1.42.46 3.556-1.308 4.026a1.02 1.02 0 0 0-.757 1.042c.098 1.826-1.719 3.147-3.425 2.489a1.02 1.02 0 0 0-1.225.398c-.993 1.535-3.24 1.535-4.233 0A1.02 1.02 0 0 0 8.306 20.2C6.6 20.859 4.782 19.538 4.88 17.712a1.02 1.02 0 0 0-.757-1.042c-1.767-.47-2.462-2.607-1.308-4.026a1.02 1.02 0 0 0 0-1.288C1.662 9.936 2.356 7.8 4.124 7.33A1.02 1.02 0 0 0 4.88 6.288C4.782 4.462 6.6 3.14 8.306 3.799A1.02 1.02 0 0 0 9.53 3.401m7.018 6.11a.75.75 0 1 0-1.096-1.023L10.4 13.901l-1.852-1.984a.75.75 0 0 0-1.096 1.023l2.034 2.18a1.25 1.25 0 0 0 1.828 0l5.234-5.608'/%3E%3C/svg%3E");
  --bm-i-gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.09 3.874a1.3 1.3 0 0 0-.438.08L5.857 5.375a1.25 1.25 0 0 0-.51.357l-2.63 3.07a1.25 1.25 0 0 0 .02 1.649l8.334 9.26a1.25 1.25 0 0 0 1.858 0l8.335-9.26a1.25 1.25 0 0 0 .02-1.65l-2.624-3.06a1.25 1.25 0 0 0-.554-.373l-4.292-1.43a1.3 1.3 0 0 0-.395-.064h-3.328M7.72 6.28l2.417-.906h3.242l2.799.932-2.27.568h-3.815L7.72 6.28M5.915 7.376 4.507 9.019l4.079 1.631.96-2.367-3.631-.907M5.15 10.892l4.95 5.498-1.677-4.19-3.273-1.307m8.751 5.498 4.95-5.499-3.274 1.31-1.676 4.19m5.593-7.371-1.409-1.644-3.632.908.961 2.367 4.08-1.631m-8.366-.645h1.744l.012.032 1.002 2.468h-3.772l1.002-2.468.012-.032m-1.02 4L12 17.104l1.892-4.73h-3.784'/%3E%3C/svg%3E");
  --bm-i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.65 8.75a.75.75 0 0 0-1.5 0v9a.75.75 0 1 0 1.5 0v-9M9.9 8a.75.75 0 0 1 .75.75v9a.75.75 0 1 1-1.5 0v-9A.75.75 0 0 1 9.9 8'/%3E%3Cpath fill-rule='evenodd' d='M9.166 5a1 1 0 0 1 .006-.093 2.75 2.75 0 0 1 5.458 0A1 1 0 0 1 14.635 5H19.6a.75.75 0 1 1 0 1.5h-.948v12.75a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25V6.5H4.4a.75.75 0 1 1 0-1.5h4.765m3.96 0a1.25 1.25 0 0 0-2.45 0h2.45M6.65 6.5h10.5v12.75A.75.75 0 0 1 16.4 20h-9a.75.75 0 0 1-.75-.75V6.5'/%3E%3C/svg%3E");
  --bm-i-chk-battery: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10.749 5.972-2.812 6.325A.5.5 0 0 0 8.394 13h2.231L9.93 17.864c-.05.345.43.483.571.165l2.812-6.326A.5.5 0 0 0 12.856 11h-2.231l.695-4.864c.05-.345-.43-.483-.571-.164'/%3E%3Cpath d='M7.872 8.75H5.125a.75.75 0 0 0-.75.75v5a.75.75 0 0 0 .75.75h3.663l-.214 1.5H5.125a2.25 2.25 0 0 1-2.25-2.25v-5a2.25 2.25 0 0 1 2.25-2.25h3.414l-.667 1.5m4.59 0h3.663a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-.75.75h-2.747l-.667 1.5h3.414a2.25 2.25 0 0 0 2.25-2.25v-5a2.25 2.25 0 0 0-2.25-2.25h-3.45l-.213 1.5m8.548 2.176a1.5 1.5 0 0 1 .115.574v1a1.5 1.5 0 0 1-1.202 1.47c-.162.033-.298-.104-.298-.27v-3.4c0-.166.136-.303.298-.27a1.5 1.5 0 0 1 1.088.896'/%3E%3C/svg%3E");
  --bm-i-chk-screen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19a1 1 0 1 0 0-2 1 1 0 0 0 0 2M10.5 4.75a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3'/%3E%3Cpath fill-rule='evenodd' d='M5.25 5.5A3.25 3.25 0 0 1 8.5 2.25h7a3.25 3.25 0 0 1 3.25 3.25v13a3.25 3.25 0 0 1-3.25 3.25h-7a3.25 3.25 0 0 1-3.25-3.25v-13M8.5 3.75A1.75 1.75 0 0 0 6.75 5.5v13a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75v-13a1.75 1.75 0 0 0-1.75-1.75h-7'/%3E%3C/svg%3E");
  --bm-i-chk-chargers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.616 7.882 7.993 11.98a.5.5 0 0 0 .42.77H10.5l-.662 3.144c-.069.326.366.505.546.224l2.624-4.1a.5.5 0 0 0-.422-.769H10.5l.662-3.145c.069-.326-.366-.504-.546-.223'/%3E%3Cpath fill-rule='evenodd' d='M2.75 7.5A3.25 3.25 0 0 1 6 4.25h9a3.25 3.25 0 0 1 3.24 3h2.26a.75.75 0 0 1 0 1.5h-2.25v7.75A3.25 3.25 0 0 1 15 19.75H6a3.25 3.25 0 0 1-3.25-3.25v-9m14 0v9A1.75 1.75 0 0 1 15 18.25H6a1.75 1.75 0 0 1-1.75-1.75v-9A1.75 1.75 0 0 1 6 5.75h9a1.75 1.75 0 0 1 1.75 1.75'/%3E%3C/svg%3E");
  --bm-i-chk-assembly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 3.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5M4.75 7a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0'/%3E%3Cpath d='M13 6.25a.75.75 0 0 0 0 1.5h5.19l-1.72 1.72a.75.75 0 1 0 1.06 1.06l2.647-2.646a1.25 1.25 0 0 0 0-1.768L17.53 3.47a.75.75 0 1 0-1.06 1.06l1.72 1.72H13m-7.19 10H11a.75.75 0 0 1 0 1.5H5.81l1.72 1.72a.75.75 0 1 1-1.06 1.06l-2.647-2.646a1.25 1.25 0 0 1 0-1.768L6.47 13.47a.75.75 0 1 1 1.06 1.06l-1.72 1.72'/%3E%3Cpath fill-rule='evenodd' d='M14.5 13.25a1.25 1.25 0 0 0-1.25 1.25v5a1.25 1.25 0 0 0 1.25 1.25h5a1.25 1.25 0 0 0 1.25-1.25v-5a1.25 1.25 0 0 0-1.25-1.25h-5m.25 6v-4.5h4.5v4.5h-4.5'/%3E%3C/svg%3E");
  --bm-i-chk-fans: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.75 13.5a7.25 7.25 0 0 1 10.422-6.522.75.75 0 1 0 .656-1.348 8.75 8.75 0 0 0-10.66 13.34.75.75 0 1 0 1.172-.94 7.2 7.2 0 0 1-1.59-4.53m15.12-3.829a.75.75 0 0 0-1.348.658A7.2 7.2 0 0 1 19.25 13.5a7.2 7.2 0 0 1-1.59 4.53.75.75 0 1 0 1.17.94 8.72 8.72 0 0 0 1.92-5.47 8.7 8.7 0 0 0-.88-3.829'/%3E%3Cpath d='M19.53 5.97a.75.75 0 0 1 0 1.06l-6.08 6.081a1.5 1.5 0 1 1-1.06-1.06l6.08-6.081a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E");
  --bm-i-chk-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='m16.695 4.75-.807 8.065c-.113 1.133-1.492 1.625-2.297.82l-3.325-3.324v2.482c0 1.114-1.346 1.671-2.134.884L4.766 10.31v8.939h14.452L18.31 4.75h-1.616m-1.47-.374a1.25 1.25 0 0 1 1.244-1.126h2.077a1.25 1.25 0 0 1 1.248 1.172l.937 15a1.25 1.25 0 0 1-1.247 1.328H4.516a1.25 1.25 0 0 1-1.25-1.25V9.707c0-1.114 1.347-1.671 2.134-.884l3.366 3.366V9.707c0-1.114 1.347-1.671 2.134-.884l3.527 3.528.798-7.975'/%3E%3C/svg%3E");
  --bm-i-chk-software: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3.75A8.25 8.25 0 1 0 20.25 12a.75.75 0 0 1 1.5 0c0 5.385-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12 6.615 2.25 12 2.25a.75.75 0 0 1 0 1.5'/%3E%3C/svg%3E");
  --bm-i-chk-cameras: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 10.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5M9.75 14a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0'/%3E%3Cpath fill-rule='evenodd' d='M8.178 4.197A1.25 1.25 0 0 1 9.39 3.25h5.22a1.25 1.25 0 0 1 1.212.947l.764 3.053H19.5a2.25 2.25 0 0 1 2.25 2.25v9a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25v-9A2.25 2.25 0 0 1 4.5 7.25h2.914l.764-3.053m6.236.553.626 2.5H8.96l.626-2.5h4.829m-9.914 4A.75.75 0 0 0 3.75 9.5v9a.75.75 0 0 0 .75.75h15a.75.75 0 0 0 .75-.75v-9a.75.75 0 0 0-.75-.75h-15'/%3E%3C/svg%3E");
  --bm-i-chk-ports: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 9.75H6v5.75a1.75 1.75 0 0 0 1.75 1.75h5a1.75 1.75 0 0 0 1.75-1.75V9.75M16 15.5a3.25 3.25 0 0 1-3.25 3.25h-5A3.25 3.25 0 0 1 4.5 15.5v-6a1.25 1.25 0 0 1 1.25-1.25h9A1.25 1.25 0 0 1 16 9.5v6'/%3E%3Cpath d='M15 9h-1.5V3.75H7V9H5.5V3.5a1.25 1.25 0 0 1 1.25-1.25h7A1.25 1.25 0 0 1 15 3.5V9m2.239 8.232 2.018-3.172c.183-.287.627-.097.545.233L19.25 16.5h1.63a.5.5 0 0 1 .431.752l-2.092 3.586c-.172.296-.626.118-.552-.216L19.25 18h-1.59a.5.5 0 0 1-.421-.768M9.5 21v-3a.75.75 0 0 1 1.5 0v3a.75.75 0 0 1-1.5 0'/%3E%3C/svg%3E");
  --bm-i-chk-wireless: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2.984 8.86a.75.75 0 0 0 1.061 1.06c4.393-4.393 11.517-4.393 15.91 0a.75.75 0 0 0 1.06-1.06c-4.979-4.98-13.051-4.98-18.03 0m2.829 2.828a.75.75 0 0 0 1.06 1.06 7.25 7.25 0 0 1 10.253 0 .75.75 0 0 0 1.061-1.06 8.75 8.75 0 0 0-12.374 0m2.828 3.889a.75.75 0 0 1 0-1.06 4.75 4.75 0 0 1 6.718 0 .75.75 0 1 1-1.061 1.06 3.25 3.25 0 0 0-4.596 0 .75.75 0 0 1-1.06 0M12 18.875a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
  --bm-i-chk-audio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3.75a6.25 6.25 0 0 0-6.21 5.534A1.25 1.25 0 0 1 6.75 10.5v5a1.25 1.25 0 0 1-1.25 1.25 3.25 3.25 0 0 1-3.25-3.25v-1a3.25 3.25 0 0 1 2.016-3.008 7.75 7.75 0 0 1 15.468 0A3.25 3.25 0 0 1 21.75 12.5v1a3.25 3.25 0 0 1-2.242 3.09l-.993 1.49a3.75 3.75 0 0 1-3.12 1.67h-.748a2.751 2.751 0 1 1 0-1.5h.747a2.25 2.25 0 0 0 1.873-1.002l.493-.74a1.25 1.25 0 0 1-.51-1.008v-5a1.25 1.25 0 0 1 .96-1.216A6.25 6.25 0 0 0 12 3.75m-6.75 7.018a1.75 1.75 0 0 0-1.5 1.732v1a1.75 1.75 0 0 0 1.5 1.732v-4.464M12 20.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5m6.75-9.482v4.464a1.75 1.75 0 0 0 1.5-1.732v-1a1.75 1.75 0 0 0-1.5-1.732'/%3E%3C/svg%3E");
  --bm-i-chk-oxidation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.613 7.617a.75.75 0 0 0-1.226.864l1.735 2.465a.75.75 0 0 0 1.227-.863l-1.736-2.466'/%3E%3Cpath fill-rule='evenodd' d='M12 21.652c4.341 0 7.75-3.732 7.75-7.95 0-1.033-.387-2.152-.922-3.222-.541-1.084-1.27-2.188-2.029-3.21-1.519-2.046-3.211-3.827-3.923-4.552a1.223 1.223 0 0 0-1.752 0C10.412 3.443 8.72 5.224 7.2 7.27c-.76 1.023-1.488 2.127-2.029 3.21-.535 1.071-.922 2.19-.922 3.223 0 4.218 3.409 7.95 7.75 7.95m6.25-7.95c0 3.453-2.8 6.45-6.25 6.45s-6.25-2.997-6.25-6.45c0-.69.27-1.562.764-2.552.488-.977 1.161-2.003 1.891-2.986 1.337-1.8 2.823-3.398 3.595-4.196.772.798 2.258 2.396 3.595 4.196.73.983 1.403 2.01 1.891 2.986.494.99.764 1.861.764 2.551'/%3E%3C/svg%3E");
  --bm-i-chk-gps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.763 8.861a1.75 1.75 0 1 1 2.474 2.475 1.75 1.75 0 0 1-2.474-2.475'/%3E%3Cpath fill-rule='evenodd' d='M12 2.348c-4.341 0-7.75 3.732-7.75 7.95 0 1.033.387 2.152.922 3.222.541 1.084 1.27 2.188 2.029 3.21 1.52 2.046 3.211 3.827 3.923 4.552a1.223 1.223 0 0 0 1.752 0c.712-.725 2.404-2.506 3.923-4.552.76-1.022 1.488-2.126 2.029-3.21.535-1.07.922-2.189.922-3.222 0-4.218-3.409-7.95-7.75-7.95m-6.25 7.95c0-3.453 2.8-6.45 6.25-6.45s6.25 2.997 6.25 6.45c0 .69-.27 1.562-.764 2.552-.488.976-1.161 2.003-1.891 2.986-1.337 1.8-2.823 3.398-3.595 4.196-.772-.798-2.258-2.396-3.595-4.196-.73-.983-1.403-2.01-1.891-2.986-.495-.99-.764-1.861-.764-2.552'/%3E%3C/svg%3E");
  --bm-i-chk-imei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%3E%3Cpath fill-rule='evenodd' d='M12 2.25A.75.75 0 0 1 12.75 3v1.286a7.75 7.75 0 0 1 6.964 6.964H21a.75.75 0 0 1 0 1.5h-1.286a7.75 7.75 0 0 1-6.964 6.964V21a.75.75 0 0 1-1.5 0v-1.286a7.75 7.75 0 0 1-6.964-6.964H3a.75.75 0 0 1 0-1.5h1.286a7.75 7.75 0 0 1 6.964-6.964V3A.75.75 0 0 1 12 2.25m-6.205 10.5H7a.75.75 0 0 0 0-1.5H5.795a6.25 6.25 0 0 1 5.455-5.455V7a.75.75 0 0 0 1.5 0V5.795a6.25 6.25 0 0 1 5.456 5.455H17a.75.75 0 0 0 0 1.5h1.206a6.25 6.25 0 0 1-5.456 5.456V17a.75.75 0 0 0-1.5 0v1.206a6.25 6.25 0 0 1-5.455-5.456'/%3E%3C/svg%3E");
  --bm-i-chk-other: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.875 11a.75.75 0 0 1 .75-.75h8.75a.75.75 0 0 1 0 1.5h-8.75A.75.75 0 0 1 6.875 11m.75 2.25a.75.75 0 0 0 0 1.5h8.75a.75.75 0 0 0 0-1.5h-8.75m0 3a.75.75 0 0 0 0 1.5h8.75a.75.75 0 0 0 0-1.5h-8.75'/%3E%3Cpath fill-rule='evenodd' d='M5.5 3.25A2.25 2.25 0 0 0 3.25 5.5v13a2.25 2.25 0 0 0 2.25 2.25h13a2.25 2.25 0 0 0 2.25-2.25v-13a2.25 2.25 0 0 0-2.25-2.25h-13M4.75 5.5A.75.75 0 0 1 5.5 4.75h13a.75.75 0 0 1 .75.75v13a.75.75 0 0 1-.75.75h-13a.75.75 0 0 1-.75-.75v-13'/%3E%3C/svg%3E");
  --bm-p-next-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%23ffffff' d='m13.043 12-3.47 3.47a.75.75 0 1 0 1.06 1.06l3.647-3.646a1.25 1.25 0 0 0 0-1.768L10.634 7.47a.75.75 0 0 0-1.06 1.06L13.042 12'/%3E%3C/svg%3E");
  --bm-p-prev-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%23ffffff' d='m10.957 12 3.47-3.47a.75.75 0 1 0-1.06-1.06L9.72 11.116a1.25 1.25 0 0 0 0 1.768l3.646 3.646a.75.75 0 0 0 1.06-1.06L10.958 12'/%3E%3C/svg%3E");
  --bm-p-next-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%230f1419' d='m13.043 12-3.47 3.47a.75.75 0 1 0 1.06 1.06l3.647-3.646a1.25 1.25 0 0 0 0-1.768L10.634 7.47a.75.75 0 0 0-1.06 1.06L13.042 12'/%3E%3C/svg%3E");
  --bm-p-prev-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%230f1419' d='m10.957 12 3.47-3.47a.75.75 0 1 0-1.06-1.06L9.72 11.116a1.25 1.25 0 0 0 0 1.768l3.646 3.646a.75.75 0 0 0 1.06-1.06L10.958 12'/%3E%3C/svg%3E");
  --bm-p-next-grey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%238e9095' d='m13.043 12-3.47 3.47a.75.75 0 1 0 1.06 1.06l3.647-3.646a1.25 1.25 0 0 0 0-1.768L10.634 7.47a.75.75 0 0 0-1.06 1.06L13.042 12'/%3E%3C/svg%3E");
  --bm-p-prev-grey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%238e9095' d='m10.957 12 3.47-3.47a.75.75 0 1 0-1.06-1.06L9.72 11.116a1.25 1.25 0 0 0 0 1.768l3.646 3.646a.75.75 0 0 0 1.06-1.06L10.958 12'/%3E%3C/svg%3E");
  --bm-p-check-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%23ffffff' d='M20.53 6.073a.75.75 0 0 1 0 1.06L9.884 17.78a1.25 1.25 0 0 1-1.768 0L3.47 13.134a.75.75 0 0 1 1.06-1.06L9 16.542l10.47-10.47a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E");
  --bm-p-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%230f1419' d='M20.53 6.073a.75.75 0 0 1 0 1.06L9.884 17.78a1.25 1.25 0 0 1-1.768 0L3.47 13.134a.75.75 0 0 1 1.06-1.06L9 16.542l10.47-10.47a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E");
  --bm-p-chevron-down-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%230f1419' d='m12 13.043-3.47-3.47a.75.75 0 0 0-1.06 1.06l3.646 3.647a1.25 1.25 0 0 0 1.768 0l3.646-3.646a.75.75 0 0 0-1.06-1.06L12 13.042'/%3E%3C/svg%3E");
}


:root {
  --bm-mid: color-mix(in srgb, var(--text) 7%, var(--bg));          /* fields, chips, icon wells (#edeff3) */
  --bm-mid-hover: color-mix(in srgb, var(--text) 13%, var(--bg));   /* … under the pointer (#d8d9df) */
  --bm-ghost-hover: color-mix(in srgb, var(--text) 6%, transparent);
  --bm-canvas: color-mix(in srgb, var(--text) 3%, var(--bg));       /* the page behind the cards (#f8f9fc) */
  --bm-promo: color-mix(in srgb, var(--text) 6%, var(--bg));        /* promo blocks (#f2f3f7) */
  --bm-card: var(--bg);
  --bm-line: color-mix(in srgb, var(--text) 11%, var(--bg));        /* hairlines (#dfe1e7) */
  --bm-sh-short: 0 2px 4px rgba(17, 15, 21, .05);
  --bm-sh-mid: 0 4px 8px rgba(17, 15, 21, .08);
  --bm-sh-long: 0 8px 16px rgba(17, 15, 21, .12);
  --bm-in: cubic-bezier(.4, 0, 1, 1);      /* buttons and links: 200ms */
  --bm-std: cubic-bezier(.4, 0, .2, 1);    /* chips: 225ms */
  --bm-info: color-mix(in srgb, var(--brand) 11%, var(--bg));       /* their info cards (#d9e4fc) in our brand tint */
  --bm-info-hover: color-mix(in srgb, var(--brand) 17%, var(--bg));
  --bm-deal: color-mix(in srgb, var(--green) 30%, var(--bg));       /* their success mint (#94f5bc) from our green */
  --bm-deal-ink: color-mix(in srgb, var(--green) 70%, #000);        /* …and its text (#006b40) */
  --bm-field: color-mix(in srgb, var(--text) 18%, var(--bg));       /* field hairline (#d2d4da) */
}
html[data-theme="dark"] {
  --bm-card: var(--bg-2);
  --bm-canvas: var(--bg);
  --bm-promo: var(--bg-2);
  --bm-mid: color-mix(in srgb, var(--text) 10%, var(--bg-2));
  --bm-mid-hover: color-mix(in srgb, var(--text) 16%, var(--bg-2));
  --bm-line: color-mix(in srgb, var(--text) 14%, var(--bg));
  --bm-sh-short: 0 0 0 1px var(--bm-line);
  --bm-sh-mid: 0 0 0 1px var(--bm-line), 0 4px 8px rgba(0, 0, 0, .3);
  --bm-sh-long: 0 0 0 1px var(--bm-line), 0 8px 16px rgba(0, 0, 0, .4);
  --bm-info: color-mix(in srgb, var(--brand) 16%, var(--bg-2));
  --bm-info-hover: color-mix(in srgb, var(--brand) 24%, var(--bg-2));
  --bm-deal: color-mix(in srgb, var(--green) 26%, var(--bg-2));
  --bm-deal-ink: color-mix(in srgb, var(--green) 55%, #fff);
  --bm-field: color-mix(in srgb, var(--text) 24%, var(--bg));
}

/* ======================================================================================================== header */

/* the row of small links over the header: 12px 600 in ink on the page colour, no band */
body:where(:has(#obsah)) .topbar { background: var(--bg); border-bottom: 0; color: var(--text); font-size: 12px; font-weight: 600; }
body:where(:has(#obsah)) .topbar a { color: var(--text); text-underline-offset: 2px; }
body:where(:has(#obsah)) .topbar a:hover { color: var(--text); text-decoration: underline; }
body:where(:has(#obsah)) .topbar .trust svg { width: 16px; height: 16px; }

#header { background: var(--bg); border-bottom-color: var(--bm-line); }

/* search: Back Market's pill – the field grey, fully rounded, 40px, the magnifier first, darker under the pointer */
#header .search { height: 40px; align-items: center; gap: 4px; padding: 0 8px 0 4px; border: 0; border-radius: 9999px; background: var(--bm-mid); box-shadow: none; transition: background-color .2s var(--bm-in), box-shadow .2s var(--bm-in); }
#header .search:hover { background: var(--bm-mid-hover); }
/* focused, Back Market's field stays the same plain grey pill – no ring round it and no box inside it (the shop's form styles
   ring the input itself on focus, which drew a box in the box): the caret and the cleared placeholder say it's active */
#header .search:focus-within { background: var(--bm-mid); box-shadow: none; }
#header .search input:focus, #header .search input:focus-visible, #header .search select:focus, #header .search select:focus-visible { border-radius: 0; outline: 0; box-shadow: none; }
#header .search input:focus { background: transparent; }
/* the suggestions as Back Market's search panel: white, 12px corners, the long shadow, 14px rows that go grey under the
   pointer, the price in ink, "show all" as their underlined link; it fades in */
#header .suggest { top: calc(100% + 8px); padding: 8px; border: 0; border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 1px var(--bm-line), var(--bm-sh-long); animation: bm-fade .2s var(--bm-std); }
#header .sg-item { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 8px; border: 0; border-radius: 8px; color: var(--text); font-size: 14px; line-height: 20px; transition: background-color .2s var(--bm-std); }
#header .sg-item:hover, #header .sg-item.on, #header .sg-item[aria-selected="true"] { background: var(--bm-mid); }
#header .sg-item img { width: 48px; height: 48px; border-radius: 8px; }
#header .sg-name { color: var(--text); font-size: 14px; font-weight: 400; }
#header .sg-price { color: var(--text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
#header .sg-all { display: block; margin: 4px 0 0; padding: 12px 8px 4px; border-top: 1px solid var(--bm-line); color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; text-decoration: underline; text-underline-offset: 3px; }
#header .sg-all:hover { color: var(--text); text-decoration-thickness: 2px; }
#header .search select { height: 32px; padding: 0 28px 0 12px; border: 0; border-right: 1px solid var(--bm-line); border-radius: 0; background-color: transparent; color: var(--text); font-size: 14px; font-weight: 400; }
#header .search input { height: 40px; padding: 0 8px; border: 0; background: transparent; color: var(--text); font-size: 16px; line-height: 24px; }
#header .search input::placeholder { color: var(--muted); opacity: 1; transition: color .2s var(--bm-in); }
#header .search input:focus::placeholder { color: transparent; }
#header .search button { order: -1; flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 9999px; background: transparent; box-shadow: none; color: var(--text); }
#header .search button > * { display: none; }
#header .search button::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--bm-i-search) center / contain no-repeat; mask: var(--bm-i-search) center / contain no-repeat; }

/* the icons on the right: 40px round ghost buttons with Back Market's glyphs, an ink-tinted circle under the pointer */
#header .header-actions { gap: 4px; }
#header .icon-link { min-width: 40px; height: 40px; padding: 0 8px; justify-content: center; border-radius: 9999px; color: var(--text); transition: background-color .2s var(--bm-in); }
#header .icon-link:hover { background: var(--bm-ghost-hover); color: var(--text); }
#header .icon-link svg { width: 24px; height: 24px; stroke-width: 1.5; }
#header #accLink > svg, #header .icon-link[href="/cart"] > svg { display: none; }
#header #accLink::before, #header .icon-link[href="/cart"]::before { content: ""; flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--bm-i-user) center / contain no-repeat; mask: var(--bm-i-user) center / contain no-repeat; }
#header .icon-link[href="/cart"]::before { -webkit-mask-image: var(--bm-i-bag); mask-image: var(--bm-i-bag); }
/* the cart count: Back Market's badge on the bag's shoulder, ringed in the header colour */
#header .cart-count { top: 2px; right: auto; left: 20px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 600; line-height: 18px; box-shadow: 0 0 0 2px var(--bg); }
#header .lang-btn { height: 40px; gap: 8px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 14px; font-weight: 600; transition: background-color .2s var(--bm-in); }
#header .lang-btn:hover { background: var(--bm-ghost-hover); }
#header .menu-toggle { width: 40px; height: 40px; border-radius: 9999px; transition: background-color .2s var(--bm-in); }
#header .menu-toggle:hover { background: var(--bm-ghost-hover); }

/* ===================================================================================================== categories */

/* Back Market's menu row: 14px regular links in ink; the one pointed at (or open) gets a 2px ink line lying on the row's bottom
   edge, there at once like theirs. The row sits above the page dimmer (below) so it stays bright while a panel is open. */
#catnav { position: relative; z-index: 46; background: var(--bg); border-bottom-color: var(--bm-line); }
#catnav li > a:not(.pill) { position: relative; padding: 12px; border-radius: 0; background: none; color: var(--text); font-size: 14px; font-weight: 400; line-height: 20px; }
#catnav li > a:not(.pill)::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: -4px; height: 2px; background: currentColor; opacity: 0; }
#catnav li > a:not(.pill):hover, #catnav li > a.active, #catnav li.dd.open > a { background: none; color: var(--text); }
#catnav li > a:not(.pill):hover::before, #catnav li > a.active::before, #catnav li.dd.open > a::before { opacity: 1; }
/* "Sale" as Back Market's "Bons plans": the sparkle in front, the accent colour, no pill */
#catnav a.pill.sale { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 4px; padding: 12px; border: 0; border-radius: 0; background: none; color: var(--brand); font-size: 14px; font-weight: 400; line-height: 20px; }
#catnav a.pill.sale::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--bm-i-sparkle) center / contain no-repeat; mask: var(--bm-i-sparkle) center / contain no-repeat; }
#catnav a.pill.sale:hover { background: none; color: var(--brand-dark, var(--brand)); text-decoration: underline; text-underline-offset: 4px; }

/* the category panel as Back Market's menu panel: white and square, flush under the row with a hairline on top, its white
   carried edge to edge past the container (a spread shadow clipped to the panel's height), no drop shadow – the dimmed page
   does the separating. Picture cards: the picture in a grey 12px well that darkens under the pointer, the name under it at
   16/600 on the left (underlined under the pointer), the count in grey; "All in …" as their underlined ink link. */
#catnav li.dd.mega > .dd-panel { padding: 24px 0 28px; border: 0; border-top: 1px solid var(--bm-line); border-radius: 0; background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); animation: bm-fade .2s var(--bm-std); }
#catnav .dd-panel .mt-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; }
#catnav .dd-panel .mt-grid a.mt { align-items: stretch; gap: 8px; padding: 0; border-radius: 6px; background: none; color: var(--text); text-align: left; transition: none; }
#catnav .dd-panel .mt-grid a.mt:hover { background: none; color: var(--text); }
#catnav .dd-panel .mt-img { display: flex; align-items: center; justify-content: center; height: 116px; padding: 12px; overflow: hidden; border-radius: 12px; background: var(--bm-promo); transition: background-color .2s var(--bm-std); }
#catnav .dd-panel .mt:hover .mt-img { background: var(--bm-mid); }
#catnav .dd-panel .mt-img img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
#catnav .dd-panel .mt b { color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; text-underline-offset: 3px; }
#catnav .dd-panel .mt:hover b { text-decoration: underline; }
#catnav .dd-panel .mt small { margin-top: -8px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 20px; }
#catnav .dd-panel a.dd-all, #catnav li.dd.mega > .dd-panel .dd-all { justify-content: flex-start; margin-top: 24px; padding: 16px 0 0; border-top: 1px solid var(--bm-line); border-radius: 0; background: none; color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; text-decoration: underline; text-underline-offset: 3px; }
#catnav .dd-panel a.dd-all:hover { background: none; color: var(--text); text-decoration-thickness: 2px; }

/* while a category panel is open, or search suggestions show, Back Market dims and blurs the page behind (40% ink, a 40px
   blur, 200ms); the header and the menu row stay above it, and it never takes a click */
body:where(:has(#obsah))::before { content: ""; position: fixed; inset: 0; z-index: 45; background: rgba(17, 15, 21, .4); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--bm-std), visibility 0s linear .2s; }
body:has(#catnav li.dd.mega.open)::before, body:has(#header .suggest:not([hidden]))::before { opacity: 1; visibility: visible; transition: opacity .2s var(--bm-std); }
body:where(:has(#obsah)) .topbar { position: relative; z-index: 46; }

/* ================================================================================================= product cards */

/* Back Market's product card: white, 12px corners, the short shadow, the middle one under the pointer (no lift) */
#obsah .product { border: 1px solid transparent; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); transform: none; transition: box-shadow .2s var(--bm-std), border-color .2s var(--bm-std); }
#obsah .product:hover { transform: none; border-color: transparent; box-shadow: var(--bm-sh-mid); }
body.home #obsah .product, body.home #obsah .product:hover { border-color: transparent; }
/* their card reads picture → badge → name: the labels leave the picture's corner and line up under it, just over the name */
#obsah .product .product-img:has(.lbls > *) { padding-bottom: 38px; }
#obsah .product .product-img .lbls { top: auto; right: 16px; bottom: 8px; left: 16px; flex-direction: row; flex-wrap: wrap; gap: 4px; }
#obsah .product-name { color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; min-height: 48px; }
#obsah .product-name:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
/* the specs as their one grey line of values with "•" between them */
#obsah .product .spec-lines { display: block; margin: 0; padding: 0; border-top: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
#obsah .product .spec-lines dt { display: none; }
#obsah .product .spec-lines dd { display: inline; margin: 0; overflow: visible; color: var(--muted); font-weight: 400; text-align: left; white-space: normal; }
#obsah .product .spec-lines dd:not(:last-of-type)::after { content: " • "; }
/* the price as theirs: 22/600, in the deal green when there's an old price to beat, the old one struck through under it */
#obsah .product .price { display: flex; flex-direction: column; }
#obsah .product .price strong { order: -1; color: var(--text); font-size: 22px; font-weight: 600; line-height: 32px; letter-spacing: 0; }
#obsah .product .price:has(s) strong { color: color-mix(in srgb, var(--green) 72%, #000); }
#obsah .product .price s { color: var(--muted); font-size: 14px; line-height: 20px; }
#obsah .product .avail .stock { font-size: 14px; font-weight: 600; }
#obsah .product .avail .dlv { color: var(--muted); font-size: 14px; }
/* the add-to-cart button as Back Market's secondary: an ink outline, 6px corners, 48px, 16 600, its plus in front */
#obsah .product .price-box .btn { gap: 8px; height: 48px; min-height: 48px; padding: 0 12px; border: 1px solid var(--text); border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; transition: background-color .2s var(--bm-in), color .2s var(--bm-in), border-color .2s var(--bm-in); }
#obsah .product .price-box .btn:hover { background: var(--bm-ghost-hover); color: var(--text); }
#obsah .product .price-box .btn > svg { display: none; }
#obsah .product .price-box .btn::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--bm-i-plus) center / contain no-repeat; mask: var(--bm-i-plus) center / contain no-repeat; }
#obsah .product .cmp { font-size: 14px; }
#obsah .product .card-desc { color: var(--muted); font-size: 14px; line-height: 20px; }

/* wishlist heart: a round white button with Back Market's heart (filled in our red once on the list) */
#obsah .wish-card { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9999px; background: color-mix(in srgb, var(--bm-card) 92%, transparent); box-shadow: var(--bm-sh-short); color: var(--text); transition: background-color .2s var(--bm-in), color .2s var(--bm-in); }
#obsah .wish-card:hover { transform: none; background: var(--bm-mid); color: var(--text); }
#obsah .wish-card > svg { display: none; }
#obsah .wish-card::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--bm-i-heart) center / contain no-repeat; mask: var(--bm-i-heart) center / contain no-repeat; }
#obsah .wish-card.on { color: var(--red); border: 0; }
#obsah .wish-card.on::before { -webkit-mask-image: var(--bm-i-heart-on); mask-image: var(--bm-i-heart-on); }

/* labels as Back Market's ticket badge: a soft tint of the label's own colour, dark text, notched ends (the product page's
   picture tags too) */
#obsah .product-img .lbls .lbl, #obsah .hp-pill, #obsah .main-img .itag, #obsah .detail .main-img .disc {
  --tk: var(--text);
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 3px;
  background: color-mix(in srgb, var(--tk) 17%, var(--bm-card)); color: color-mix(in srgb, var(--tk) 80%, #000);
  font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0; box-shadow: none;
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 3.5px, #000 4px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 3.5px, #000 4px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, #0000 3.5px, #000 4px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 3.5px, #000 4px) right / 51% 100% no-repeat;
}
#obsah .product-img .lbls .lbl-disc, #obsah .hp-pill, #obsah .detail .main-img .disc { --tk: var(--red); }
#obsah .hp-pill { height: 20px; padding: 0 8px; font-size: 11px; }
#obsah .product-img .lbls .lbl-gift, #obsah .main-img .itag-gift { --tk: #5b5bd6; }
#obsah .product-img .lbls .lbl-used, #obsah .hp-pill.soft, #obsah .main-img .itag-used, #obsah .main-img .itag-new { --tk: var(--green); }
#obsah .main-img .itag-best { --tk: var(--text); }
#obsah .main-img .itag, #obsah .detail .main-img .disc { height: 24px; padding: 0 10px; border-radius: 3px; font-size: 13px; }
#obsah .product-img .lbls .lbl-disc::before, #obsah .detail .main-img .disc::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: var(--bm-i-price-drop) center / contain no-repeat; mask: var(--bm-i-price-drop) center / contain no-repeat; }
html[data-theme="dark"] #obsah .product-img .lbls .lbl, html[data-theme="dark"] #obsah .hp-pill, html[data-theme="dark"] #obsah .main-img .itag, html[data-theme="dark"] #obsah .detail .main-img .disc { background: color-mix(in srgb, var(--tk) 28%, var(--bm-card)); color: color-mix(in srgb, var(--tk) 55%, #fff); }
html[data-theme="dark"] #obsah .product .price:has(s) strong { color: color-mix(in srgb, var(--green) 70%, #fff); }

/* ========================================================================================================== home */

body.home { background: var(--bm-canvas); }
#obsah .section-head h2 { font-size: 22px; font-weight: 600; line-height: 32px; letter-spacing: -.01em; }
#obsah .section-head > a { color: var(--text); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s var(--bm-in); }
#obsah .section-head > a:hover { color: var(--brand); }
#obsah .kicker { color: var(--brand-text, var(--brand)); font-size: 12px; font-weight: 600; letter-spacing: .02em; }

/* the hero: Back Market's brand-coloured block (in our brand tint), a big 600 headline, their primary button */
#obsah .hp-main { border: 0; border-radius: 12px; background: var(--brand-tint); }
#obsah .hp-main h1 { font-size: 40px; font-weight: 600; line-height: 44px; letter-spacing: -.02em; }
#obsah .hp-main p { color: var(--text); font-size: 16px; line-height: 24px; }
#obsah .hp-main-price b { font-size: 22px; font-weight: 600; }
#obsah .hp-main .btn, body.home #obsah .btn.btn-primary:not(.product .btn) { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px; border: 0; border-radius: 6px; box-shadow: none; font-size: 16px; font-weight: 600; line-height: 24px; transition: background-color .2s var(--bm-in), color .2s var(--bm-in); }
#obsah .hp-tile { border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); transition: box-shadow .2s var(--bm-std); }
#obsah .hp-tile:hover { border-color: transparent; box-shadow: var(--bm-sh-long); }
#obsah .hp-tile b { font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; }
#obsah .hp-tile .from { color: var(--muted); font-size: 14px; }

/* the four promises as Back Market's quality cards: separate white cards, the figure in a grey 8px well */
#obsah .hp-usp { gap: 12px; border: 0; border-radius: 0; background: none; overflow: visible; }
#obsah .hp-usp > div { padding: 16px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .hp-usp strong { display: grid; place-items: center; min-width: 48px; height: 40px; padding: 0 10px; border-radius: 8px; background: var(--bm-mid); color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: 0; }
#obsah .hp-usp b { font-size: 16px; font-weight: 600; line-height: 24px; }
#obsah .hp-usp span { color: var(--muted); font-size: 14px; line-height: 20px; }

/* carousels: white cards; arrows as Back Market's 40px ink circles with its chevrons */
#obsah .mcard { background: var(--bm-card); color: var(--text); border-radius: 12px; box-shadow: var(--bm-sh-short); transition: box-shadow .2s var(--bm-std); }
#obsah .mcard:hover { box-shadow: var(--bm-sh-long); }
#obsah .mcard b { color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; }
#obsah .mcard span { color: var(--muted); font-size: 14px; font-weight: 400; }
#obsah .mcard i { width: 32px; height: 32px; background: var(--text); box-shadow: none; }
#obsah .mcard i::before { width: 20px; height: 20px; border: 0; transform: none; background: var(--bg); -webkit-mask: var(--bm-i-next) center / contain no-repeat; mask: var(--bm-i-next) center / contain no-repeat; }
#obsah .mcar-btn { width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 9999px; background: var(--text); color: var(--bg); box-shadow: var(--bm-sh-mid); transition: background-color .3s var(--bm-in), color .3s var(--bm-in), opacity .3s var(--bm-in); animation: bm-fade .3s var(--bm-in); }
#obsah .mcar-btn:hover { background: color-mix(in srgb, var(--text) 85%, var(--bg)); }
#obsah .mcar-btn > svg { display: none; }
#obsah .mcar-btn::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--bm-i-next) center / contain no-repeat; mask: var(--bm-i-next) center / contain no-repeat; }
#obsah .mcar-btn.prev::before { -webkit-mask-image: var(--bm-i-prev); mask-image: var(--bm-i-prev); }
/* at either end the arrow doesn't vanish but turns into Back Market's disabled one – a faint ink well, the chevron in
   grey – fading in over their 300ms. The button itself stays hidden (out of reach of the pointer, the keyboard and screen
   readers), only its pseudo-elements paint; a row with nothing to scroll shows no arrows at all. Phones keep none.
   The shop's reset hides every [hidden] with !important, hence the layer's only !important here. */
@media (min-width: 761px) {
  #obsah .mcar-btn[hidden] { display: grid !important; visibility: hidden; pointer-events: none; animation: none; }
  #obsah .mcar-btn[hidden]::before, #obsah .mcar-btn[hidden]::after { visibility: visible; animation: bm-fade .3s var(--bm-in); }
  #obsah .mcar-btn[hidden]::before { background: color-mix(in srgb, var(--text) 45%, var(--bg)); }
  #obsah .mcar-btn[hidden]::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--text) 5%, transparent); }
  #obsah .mcar:has(> .prev[hidden]):has(> .next[hidden]) > .mcar-btn { display: none !important; }
  /* the pair sits where Back Market keeps it: top right, on the section title's line, the section's own link moved left of it */
  #obsah .section-head:has(+ .mcar) { padding-right: 104px; }
  #obsah .mcar-btn { top: -50px; margin-top: 0; }
  #obsah .mcar-btn.next { right: 0; }
  #obsah .mcar-btn.prev { right: 48px; left: auto; }
  #obsah .mcar-track { scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 90%, #0000); mask: linear-gradient(90deg, #000 90%, #0000); }
}
/* the category carousel's scroller ended exactly at the cards, so it (and its fade) cut their shadows off and the next row's
   head sat right under them: the same shadow room the other rows have – 12px round the cards, 24px under them – taken back
   at the top and sides so the cards stay on the page's line (the carousel box keeps its own top, so the arrows don't move) */
#obsah .mcar { display: flow-root; }
#obsah .mcar-track { margin: -12px -12px 0; padding: 12px 12px 24px; scroll-padding-inline: 12px; }

/* the home's product rows slide like Back Market's carousels: 5½ cards in view (3½ on small screens), the cut one fading out
   under their 90%→transparent mask so the row reads as "more this way", snapping card by card, smooth, no scrollbar, room
   kept round the cards for their shadows */
@media (min-width: 761px) {
  #obsah .hp-sec > .row-scroll { grid-auto-columns: calc((100% - 5 * 16px) / 5.5); gap: 16px; margin: -12px -12px 0; padding: 12px 12px 20px; scroll-padding-inline: 12px; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 90%, #0000); mask: linear-gradient(90deg, #000 90%, #0000); }
  #obsah .hp-sec > .row-scroll::-webkit-scrollbar { display: none; }
}
@media (min-width: 761px) and (max-width: 1199px) {
  #obsah .hp-sec > .row-scroll { grid-auto-columns: calc((100% - 3 * 16px) / 3.5); }
}
/* …with Back Market's arrow pair top right: the browser's own CSS scroll buttons (no script – it scrolls a pageful and greys
   the one with nowhere left to go, which fades over their 300ms). Browsers without them keep the swipe/scroll as before. */
@supports selector(::scroll-button(*)) {
  @media (min-width: 761px) {
    #obsah .hp-sec:has(> .row-scroll) { position: relative; }
    #obsah .hp-sec:has(> .row-scroll) > .section-head { padding-right: 104px; }
    #obsah .hp-sec > .row-scroll::scroll-button(*) { position: absolute; top: 22px; width: 40px; height: 40px; border: 0; border-radius: 9999px; background: var(--bm-p-next-light) center / 24px no-repeat, var(--text); box-shadow: none; cursor: pointer; transition: background-color .3s var(--bm-in); }
    #obsah .hp-sec > .row-scroll::scroll-button(inline-end) { content: "" / "Next"; right: 0; }
    #obsah .hp-sec > .row-scroll::scroll-button(inline-start) { content: "" / "Previous"; right: 48px; background-image: var(--bm-p-prev-light); }
    #obsah .hp-sec > .row-scroll::scroll-button(*):hover { background-color: color-mix(in srgb, var(--text) 85%, var(--bg)); }
    #obsah .hp-sec > .row-scroll::scroll-button(*):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    #obsah .hp-sec > .row-scroll::scroll-button(*):disabled { background-color: color-mix(in srgb, var(--text) 5%, transparent); cursor: default; }
    #obsah .hp-sec > .row-scroll::scroll-button(inline-end):disabled { background-image: var(--bm-p-next-grey); }
    #obsah .hp-sec > .row-scroll::scroll-button(inline-start):disabled { background-image: var(--bm-p-prev-grey); }
    html[data-theme="dark"] #obsah .hp-sec > .row-scroll::scroll-button(inline-end):not(:disabled) { background-image: var(--bm-p-next-dark); }
    html[data-theme="dark"] #obsah .hp-sec > .row-scroll::scroll-button(inline-start):not(:disabled) { background-image: var(--bm-p-prev-dark); }
  }
}

/* picture tiles ("what kind of phone", categories, series): white cards with the short shadow */
#obsah .ideal-tel a { overflow: hidden; background: var(--bm-card); border-radius: 12px; box-shadow: var(--bm-sh-short); transition: box-shadow .2s var(--bm-std); }
#obsah .ideal-tel a:hover { transform: none; box-shadow: var(--bm-sh-long); }
#obsah .ideal-tel b { font-size: 16px; font-weight: 600; line-height: 24px; }
#obsah .ideal-tel span { color: var(--muted); font-size: 14px; line-height: 20px; }
#obsah .hp-kat2 a { background: var(--bm-card); border-radius: 12px; box-shadow: var(--bm-sh-short); transition: box-shadow .2s var(--bm-std), background-color .2s var(--bm-std); }
#obsah .hp-kat2 a:hover { background: var(--bm-card); box-shadow: var(--bm-sh-long); }
#obsah .hp-kat2 img { padding: 4px; border-radius: 8px; background: var(--brand-tint); }
#obsah .hp-kat2 b { font-size: 14px; font-weight: 600; line-height: 20px; }
#obsah .hp-kat2 small { color: var(--muted); font-size: 12px; }
#obsah .mtile { border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); transition: box-shadow .2s var(--bm-std); }
#obsah .mtile:hover { border-color: transparent; box-shadow: var(--bm-sh-long); }
#obsah .mtile b { font-size: 16px; font-weight: 600; line-height: 24px; }
#obsah .mtile span { font-size: 14px; }

/* tabs as Back Market's chips: 32px pills, the chosen one in our brand tint */
#obsah .hp-tabs button { height: 32px; padding: 0 12px; border: 0; border-radius: 9999px; background: var(--bm-mid); color: var(--text); font-size: 14px; font-weight: 400; line-height: 16px; transition: background-color .225s var(--bm-std), color .225s var(--bm-std); }
#obsah .hp-tabs button:hover { border-color: transparent; background: var(--bm-mid-hover); }
#obsah .hp-tabs button.on { background: var(--brand-soft); color: var(--brand-ink, var(--text)); }

/* promos as Back Market's partner blocks: the promo grey, 12px corners, 24px 600 titles, a small primary button */
#obsah .hp-banner { border: 0; border-radius: 12px; background: var(--bm-promo); }
#obsah .hp-banner h3 { font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -.01em; }
#obsah .hp-banner p { color: var(--text); font-size: 16px; line-height: 24px; }
#obsah .hp-banner .link { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 6px; background: var(--brand-button); color: var(--brand-contrast); font-size: 14px; font-weight: 600; transition: background-color .2s var(--bm-in); }
#obsah .hp-banner:hover .link { background: var(--brand-button-hover); }
#obsah .hp-info-card { padding: 24px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .hp-info-card h3 { font-size: 22px; font-weight: 600; line-height: 32px; }
#obsah .hp-info-card p { color: var(--text); font-size: 16px; line-height: 24px; }
#obsah .hp-info-card .btn-pill { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--brand-button); color: var(--brand-contrast); font-size: 16px; font-weight: 600; transition: background-color .2s var(--bm-in); }
#obsah .hp-info-card .btn-pill:hover { background: var(--brand-button-hover); color: var(--brand-contrast); }

/* "Brands we carry" as Back Market's "Reconditionnés par la marque": the title on the left at the section size, every
   brand a white card with the short shadow (the long one under the pointer), its name centred in it like a logo */
#obsah .brandbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; color: var(--text); }
#obsah .brandbar-t { grid-column: 1 / -1; margin: 0 0 4px; color: var(--text); font-family: var(--font-heading, var(--font)); font-size: 22px; font-weight: 600; line-height: 32px; letter-spacing: -.01em; text-align: left; text-transform: none; }
#obsah .brandbar a { display: flex; align-items: center; justify-content: center; height: 80px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); color: var(--text); font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: -.02em; text-align: center; transition: box-shadow .2s var(--bm-std); }
#obsah .brandbar a:hover { border-color: transparent; background: var(--bm-card); box-shadow: var(--bm-sh-long); color: var(--text); }

/* "why refurbished": Back Market's quality cards, the icon in a grey 8px well */
#obsah .hp-why > div { padding: 16px; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .hp-why .ico { width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--bm-mid); color: var(--text); }
#obsah .hp-why .ico svg { width: 24px; height: 24px; stroke-width: 1.5; }
#obsah .hp-why b { font-size: 18px; font-weight: 600; line-height: 24px; text-decoration: none; }
#obsah .hp-why > div > span:not(.ico) { font-size: 14px; line-height: 20px; }

/* ============================================================================================== catalogue listing */

/* page head as Back Market's listing head: the title at 40/600 in the heading face, the intro in ink 16/24 */
#obsah .page-head { padding: 16px 0 24px; }
#obsah .page-head h1 { margin-top: 12px; font-size: 40px; font-weight: 600; line-height: 48px; letter-spacing: -.02em; }
#obsah .page-head p { max-width: 760px; margin-top: 8px; color: var(--text); font-size: 16px; line-height: 24px; }

/* the filter column as their filter panel: no box, "Filter" at 22/600 with an underlined "clear all", groups split by
   hairlines with 16/600 heads, 14px options with their 20px checkbox (6px corners; ticked = ink with their white check),
   counts in grey, the price as their 40px fields, the slider in ink */
#obsah .catalog { gap: 32px; }
#obsah .filters { padding: 0 4px 16px 0; border: 0; border-radius: 0; background: transparent; }
#obsah .filters .filters-head { padding: 0 0 12px; background: var(--bg); }
#obsah .filters-head h3 { font-size: 22px; font-weight: 600; line-height: 32px; }
#obsah .filters-head button:not(.filters-close) { color: var(--text); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#obsah .fgroup { padding: 16px 0; border-top-color: var(--bm-line); }
#obsah .fgroup h4 { margin-bottom: 8px; font-size: 16px; font-weight: 600; line-height: 24px; }
#obsah .fgroup label { gap: 12px; padding: 6px 0; color: var(--text); font-size: 14px; line-height: 20px; transition: color .2s var(--bm-in); }
#obsah .fgroup label:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#obsah .fgroup label .n { color: var(--muted); font-size: 12px; text-decoration: none; }
#obsah .fgroup input[type="checkbox"], #obsah .product .cmp input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; display: inline-block; width: 20px; height: 20px; margin: 0; border: 1px solid var(--text); border-radius: 6px; background: var(--bg) center / 16px no-repeat; cursor: pointer; transition: background-color .2s var(--bm-in), border-color .2s var(--bm-in); }
#obsah .fgroup input[type="checkbox"]:checked, #obsah .product .cmp input[type="checkbox"]:checked { border-color: transparent; background-color: var(--text); background-image: var(--bm-p-check-light); }
html[data-theme="dark"] #obsah .fgroup input[type="checkbox"]:checked, html[data-theme="dark"] #obsah .product .cmp input[type="checkbox"]:checked { background-image: var(--bm-p-check-dark); }
#obsah .fgroup input[type="checkbox"]:focus-visible, #obsah .product .cmp input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#obsah .range input { height: 40px; padding: 0 12px; border: 1px solid var(--bm-field); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 14px; transition: border-color .2s var(--bm-std); }
#obsah .range input:focus { border-color: var(--text); outline: 0; box-shadow: inset 0 0 0 .5px var(--text); }
#obsah .range-slider { accent-color: var(--text); }
#obsah .filters-foot .btn { height: 48px; border-radius: 6px; box-shadow: none; font-size: 16px; font-weight: 600; }

/* the quick chips and the sort as their 32px grey pills: the chosen chip in our brand tint, the chosen sort in ink; the sort
   select as their "Trier" pill; the count as their 12px grey line */
#obsah .toolbar { margin-bottom: 16px; }
#obsah .chips { gap: 8px; }
#obsah .chip { height: 32px; padding: 0 12px; border: 0; border-radius: 9999px; background: var(--bm-mid); color: var(--text); font-size: 14px; font-weight: 400; line-height: 32px; transition: background-color .225s var(--bm-std), color .225s var(--bm-std); }
#obsah .chip:hover { border-color: transparent; background: var(--bm-mid-hover); color: var(--text); }
#obsah .chip.active, #obsah .chip.active:hover { background: var(--brand-soft); color: var(--brand-ink, var(--text)); }
#obsah .sortbar { align-items: center; margin: 8px 0 16px; border-bottom: 0; }
#obsah .sort-tabs { gap: 8px; }
#obsah .sort-tabs button { height: 32px; margin: 0; padding: 0 12px; border: 0; border-radius: 9999px; background: var(--bm-mid); color: var(--text); font-size: 14px; font-weight: 400; line-height: 32px; white-space: nowrap; transition: background-color .225s var(--bm-std), color .225s var(--bm-std); }
#obsah .sort-tabs button:hover { background: var(--bm-mid-hover); color: var(--text); }
#obsah .sort-tabs button.on, #obsah .sort-tabs button.on:hover { background: var(--text); color: var(--bg); }
#obsah .sortbar-r { gap: 12px; padding-bottom: 0; }
#obsah .sortbar-r select, #obsah .sortbar #sort { height: 32px; padding: 0 36px 0 12px; border: 0; border-radius: 9999px; background-color: var(--bm-mid); color: var(--text); font-size: 14px; transition: background-color .225s var(--bm-std); }
#obsah .sortbar-r select:hover { background-color: var(--bm-mid-hover); }
#obsah .result-count { color: var(--muted); font-size: 12px; line-height: 16px; }
#obsah .filters-toggle { height: 32px; padding: 0 12px; border: 0; border-radius: 9999px; background: var(--bm-mid); color: var(--text); font-size: 14px; font-weight: 400; }

/* bestsellers as a white card with their short shadow: 22/600 title, hairline rows, 16/600 names and prices, the add as their
   small outline button */
#obsah .top-picks { padding: 16px 24px 8px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .top-picks h2 { margin-bottom: 4px; font-size: 22px; font-weight: 600; line-height: 32px; }
#obsah .top-picks li { padding: 12px 0; border-top-color: var(--bm-line); }
#obsah .top-picks .tp-info a { color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; }
#obsah .top-picks .tp-info a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#obsah .top-picks .tp-info .stock { font-size: 14px; font-weight: 600; }
#obsah .top-picks .tp-price { color: var(--text); font-size: 16px; font-weight: 600; }
#obsah .top-picks .tp-add { width: 40px; height: 40px; padding: 0; border: 1px solid var(--text); border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); transition: background-color .2s var(--bm-in); }
#obsah .top-picks .tp-add:hover { background: var(--bm-ghost-hover); color: var(--text); }
#obsah .top-picks .tp-add svg { width: 20px; height: 20px; }

/* "load more" as their secondary button; the category text in their type */
#obsah .load-more .btn { height: 48px; padding: 0 24px; border: 1px solid var(--text); border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); font-size: 16px; font-weight: 600; transition: background-color .2s var(--bm-in); }
#obsah .load-more .btn:hover { border-color: var(--text); background: var(--bm-ghost-hover); }
#obsah .cat-text h2 { font-size: 22px; font-weight: 600; line-height: 32px; letter-spacing: -.01em; }
#obsah .cat-text p { color: var(--text); font-size: 16px; line-height: 24px; }
#obsah .cat-links a { color: var(--text); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================================================ cart / checkout */

/* Back Market's checkout: the light grey canvas with white cards (12px corners, the short shadow, 24px in); their step dots
   in ink; their option rows (a hairline, 6px corners, grey under the pointer; chosen = ink border, our tint behind, their
   filled dot); 48px fields with their 6px corners and the 1.5px ink focus line; the summary as a white card with a 48px
   primary button */
body:has(#obsah .co) { background: var(--bm-canvas); }
#obsah .co-steps { gap: 12px; margin: 0 0 24px; }
#obsah .co-steps li { gap: 8px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 20px; }
#obsah .co-steps li + li::before { width: 48px; height: 1px; border-radius: 0; background: var(--bm-line); }
#obsah .co-steps li.on + li.on::before, #obsah .co-steps li.done + li::before { height: 2px; background: var(--text); }
#obsah .co-steps b { width: 24px; height: 24px; border: 1px solid var(--bm-field); background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 600; }
#obsah .co-steps li.on, #obsah .co-steps li.done { color: var(--text); font-weight: 600; }
#obsah .co-steps li.on b, #obsah .co-steps li.done b { border-color: var(--text); background: var(--text); color: var(--bg); }
#obsah .co { gap: 24px; }
#obsah .co-card { padding: 24px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .co-card + .co-card { margin-top: 16px; }
#obsah .co-card h2 { gap: 12px; margin-bottom: 16px; font-size: 22px; font-weight: 600; line-height: 32px; letter-spacing: -.01em; }
#obsah .co-card h2 .n { width: 28px; height: 28px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600; }
#obsah .co-card h2 small { color: var(--muted); font-size: 14px; font-weight: 400; }
#obsah .co-sub { margin: 24px 0 12px; font-size: 16px; font-weight: 600; line-height: 24px; }
/* cart lines */
#obsah .ci { gap: 16px; padding: 16px 0; border-top-color: var(--bm-line); }
#obsah .ci-img { border: 0; border-radius: 8px; background: var(--bm-promo); }
#obsah .ci-img img { mix-blend-mode: multiply; }
html[data-theme="dark"] #obsah .ci-img, html[data-theme="dark"] #catnav .dd-panel .mt-img, html[data-theme="dark"] #catnav .dd-panel .mt:hover .mt-img { background: #e9ecf0; } /* photos keep a light plate in dark mode, as the shop's own dark theme does */
html[data-theme="dark"] #catnav .dd-panel .mt-img img { mix-blend-mode: multiply; }
#obsah .ci-name { color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; }
#obsah .ci-name:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#obsah .ci-info .tag { height: 22px; padding: 0 9px; border-radius: 3px; font-size: 12px; font-weight: 600; line-height: 22px; -webkit-mask: radial-gradient(circle at 0 50%, #0000 3.5px, #000 4px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 3.5px, #000 4px) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, #0000 3.5px, #000 4px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 3.5px, #000 4px) right / 51% 100% no-repeat; }
#obsah .ci-meta { color: var(--muted); font-size: 14px; line-height: 20px; }
#obsah .ci-stock { font-size: 14px; font-weight: 600; line-height: 20px; }
#obsah .ci .qty { height: 40px; border: 1px solid var(--bm-field); border-radius: 6px; background: var(--bg); }
#obsah .ci .qty button { width: 36px; background: transparent; color: var(--text); transition: background-color .2s var(--bm-in); }
#obsah .ci .qty button:hover:not(:disabled) { background: var(--bm-ghost-hover); }
#obsah .ci .qty span { font-size: 16px; font-weight: 600; }
#obsah .ci-price s { color: var(--muted); font-size: 12px; }
#obsah .ci-price b { color: var(--text); font-size: 16px; font-weight: 600; letter-spacing: 0; }
#obsah .ci-rm { margin-top: 4px; color: var(--text); font-size: 14px; font-weight: 600; text-underline-offset: 3px; }
#obsah .ci-rm:hover { color: var(--text); text-decoration-thickness: 2px; }
/* shipping and payment choices as their option rows, the radio as their dot */
#obsah .co-card .options { gap: 8px; }
#obsah .opt { gap: 16px; padding: 12px 16px; border: 1px solid var(--bm-field); border-radius: 6px; background: var(--bg); box-shadow: none; transition: background-color .2s var(--bm-in), border-color .2s var(--bm-in); }
#obsah .opt:hover { border-color: var(--bm-field); background: var(--bm-mid); }
#obsah .opt.active, #obsah .opt.active:hover { border-color: var(--text); background: var(--brand-tint); box-shadow: none; }
#obsah .opt input[type="radio"], #obsah .pch-opt input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--text); border-radius: 9999px; background: var(--bg); cursor: pointer; transition: box-shadow .2s var(--bm-in), background-color .2s var(--bm-in); }
#obsah .opt input[type="radio"]:checked, #obsah .pch-opt input[type="radio"]:checked { background: var(--text); box-shadow: inset 0 0 0 2px var(--bg); }
#obsah .o-logo { border: 0; border-radius: 6px; }
#obsah .o-txt b { color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; }
#obsah .o-txt > span { color: var(--muted); font-size: 14px; line-height: 20px; }
#obsah .o-price { color: var(--bm-deal-ink); font-size: 14px; font-weight: 600; }
#obsah .pch-group legend { margin-bottom: 8px; color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
#obsah .pch-grid { gap: 8px; }
#obsah .pch-opt { min-height: 48px; gap: 12px; padding: 8px 12px; border: 1px solid var(--bm-field); border-radius: 6px; background: var(--bg); font-size: 14px; transition: background-color .2s var(--bm-in), border-color .2s var(--bm-in); }
#obsah .pch-opt:hover { border-color: var(--bm-field); background: var(--bm-mid); }
#obsah .pch-opt.active, #obsah .pch-opt.active:hover { border-color: var(--text); background: var(--brand-tint); }
#obsah .pch-name { font-weight: 600; overflow-wrap: normal; }
#obsah .pch-note { border-radius: 8px; background: var(--bm-info); font-size: 14px; }
#obsah .pch-note.cosmetic { border-left: 0; }
#obsah .pch-note:empty { display: none; }
#obsah .form-note { border-radius: 8px; font-size: 14px; line-height: 20px; }
/* the details form: 14/600 labels, 48px fields */
#obsah .form { gap: 16px; }
#obsah .form label { margin-bottom: 6px; color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; }
#obsah .form input:not([type="checkbox"]):not([type="radio"]), #obsah .form select, #obsah .form textarea { height: 48px; padding: 0 12px; border: 1px solid var(--bm-field); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 16px; transition: border-color .2s var(--bm-std), box-shadow .2s var(--bm-std); }
#obsah .form textarea { height: auto; padding: 12px; }
#obsah .form input:not([type="checkbox"]):not([type="radio"]):hover { border-color: color-mix(in srgb, var(--text) 40%, var(--bg)); }
#obsah .form input:not([type="checkbox"]):not([type="radio"]):focus, #obsah .form select:focus, #obsah .form textarea:focus { border-color: var(--text); outline: 0; box-shadow: inset 0 0 0 .5px var(--text); }
#obsah .form-hint { color: var(--muted); font-size: 14px; line-height: 20px; }
#obsah .form-hint a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#obsah .co-check input[type="checkbox"], #obsah .form input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--text); border-radius: 6px; background: var(--bg) center / 16px no-repeat; vertical-align: -5px; cursor: pointer; }
#obsah .co-check input[type="checkbox"]:checked, #obsah .form input[type="checkbox"]:checked { border-color: transparent; background-color: var(--text); background-image: var(--bm-p-check-light); }
html[data-theme="dark"] #obsah .co-check input[type="checkbox"]:checked, html[data-theme="dark"] #obsah .form input[type="checkbox"]:checked { background-image: var(--bm-p-check-dark); }
/* the summary */
#obsah .co-sum { padding: 24px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .co-sum h2 { margin-bottom: 12px; font-size: 22px; font-weight: 600; line-height: 32px; }
#obsah .cs-line { padding: 4px 0; color: var(--muted); font-size: 14px; line-height: 20px; }
#obsah .cs-line span:last-child { color: var(--text); font-weight: 400; }
#obsah .cs-line.save span:last-child, #obsah .cs-line .free { color: var(--bm-deal-ink); font-weight: 600; }
#obsah .cs-kod summary { color: var(--text); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#obsah .cs-kod-row input { height: 40px; padding: 0 12px; border: 1px solid var(--bm-field); border-radius: 6px; font-size: 14px; }
#obsah .cs-kod-row .btn { height: 40px; border: 1px solid var(--text); border-radius: 6px; background: transparent; color: var(--text); font-size: 14px; font-weight: 600; }
#obsah .cs-gift-next { border: 0; border-radius: 8px; background: var(--bm-info); color: var(--text); font-size: 14px; line-height: 20px; }
#obsah .cs-total { margin-top: 16px; padding-top: 16px; border-top-color: var(--bm-line); }
#obsah .cs-total span { font-size: 16px; font-weight: 600; }
#obsah .cs-total b { font-family: var(--font-heading, var(--font)); font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
#obsah .co-sum .btn-primary { height: 48px; margin-top: 16px; border-radius: 6px; box-shadow: none; font-size: 16px; font-weight: 600; transition: background-color .2s var(--bm-in); }
#obsah .cs-terms { color: var(--muted); font-size: 12px; line-height: 16px; }
#obsah .cs-trust { gap: 8px; border-top-color: var(--bm-line); color: var(--text); font-size: 14px; line-height: 20px; }
#obsah .cs-trust svg { width: 20px; height: 20px; margin-top: 0; color: var(--text); }
#obsah .co-bar { border-top-color: var(--bm-line); background: var(--bg); box-shadow: 0 -4px 12px rgba(17, 15, 21, .08); }
#obsah .co-bar b { font-size: 20px; font-weight: 600; letter-spacing: 0; }
#obsah .co-bar .btn { height: 48px; border-radius: 6px; box-shadow: none; font-size: 16px; font-weight: 600; }

/* ====================================================================================== account, info, other pages */

/* every plain checkbox on these pages as Back Market's: 20px, 6px corners, an ink hairline; ticked = ink with their check */
#obsah .check-line input[type="checkbox"], #obsah .fld input[type="checkbox"], #obsah .alert-form input[type="checkbox"], #obsah .ti-acc input[type="checkbox"], #obsah .auth-form input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--text); border-radius: 6px; background: var(--bg) center / 16px no-repeat; cursor: pointer; transition: background-color .2s var(--bm-in); }
#obsah .check-line input[type="checkbox"]:checked, #obsah .fld input[type="checkbox"]:checked, #obsah .alert-form input[type="checkbox"]:checked, #obsah .ti-acc input[type="checkbox"]:checked, #obsah .auth-form input[type="checkbox"]:checked { border-color: transparent; background-color: var(--text); background-image: var(--bm-p-check-light); }
html[data-theme="dark"] #obsah .check-line input[type="checkbox"]:checked, html[data-theme="dark"] #obsah .fld input[type="checkbox"]:checked, html[data-theme="dark"] #obsah .alert-form input[type="checkbox"]:checked, html[data-theme="dark"] #obsah .ti-acc input[type="checkbox"]:checked, html[data-theme="dark"] #obsah .auth-form input[type="checkbox"]:checked { background-image: var(--bm-p-check-dark); }
/* fields across the account, trade-in and alert forms: their 48px field, 6px corners, the 1.5px ink focus line */
#obsah .fld label { color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; }
#obsah .fld input:not([type="checkbox"]):not([type="radio"]), #obsah .fld select, #obsah .fld textarea, #obsah .alert-row input, #obsah .pickup-search input, #obsah .pickup.pickup-manual input { height: 48px; padding: 0 12px; border: 1px solid var(--bm-field); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 16px; transition: border-color .2s var(--bm-std), box-shadow .2s var(--bm-std); }
#obsah .fld textarea { height: auto; min-height: 112px; padding: 12px; }
#obsah .fld input:focus, #obsah .fld select:focus, #obsah .fld textarea:focus, #obsah .alert-row input:focus, #obsah .pickup-search input:focus { border-color: var(--text); outline: 0; box-shadow: inset 0 0 0 .5px var(--text); }
#obsah .fld .hint { color: var(--muted); font-size: 12px; line-height: 16px; }

/* sign-in / registration: a white card on the grey canvas, their tab bar as the switch, 28/600 title, their primary, ink links */
body:has(#obsah .auth-wrap) { background: var(--bm-canvas); }
#obsah .auth-wrap { border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .auth-form { padding: 32px 40px 40px; }
#obsah .auth-form h2 { margin-bottom: 4px; font-size: 28px; font-weight: 600; line-height: 40px; letter-spacing: -.01em; }
#obsah .auth-form .sub { color: var(--muted); font-size: 16px; line-height: 24px; }
#obsah .auth-switch { gap: 0; margin-bottom: 24px; padding: 0; border-bottom: 1px solid var(--bm-line); border-radius: 0; background: none; }
#obsah .auth-switch button { margin-bottom: -1px; padding: 12px 16px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; color: var(--muted); font-size: 16px; font-weight: 600; transition: color .2s var(--bm-in), border-color .2s var(--bm-in); }
#obsah .auth-switch button:hover { color: var(--text); }
#obsah .auth-switch button.active { border-bottom-color: var(--text); background: none; box-shadow: none; color: var(--text); }
#obsah .pw-toggle { color: var(--text); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#obsah .auth-form .btn-block { height: 48px; padding: 0 24px; border-radius: 6px; box-shadow: none; font-size: 16px; font-weight: 600; transition: background-color .2s var(--bm-in); }
#obsah .auth-form a, #obsah .auth-alt a, #obsah .auth-form .linklike { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#obsah .auth-alt { color: var(--muted); font-size: 14px; }

/* info pages: a borderless side menu (grey under the pointer, the open page in grey and 600), white section cards on the grey
   canvas, their table (a hairline frame, grey 12/600 heads, hairline rows), "free" as their mint ticket, steps and contact
   blocks as grey cards with ink figures */
body:has(#obsah .doc) { background: var(--bm-canvas); }
#obsah .inf-hero { padding: 32px 40px; border-radius: 12px; background: var(--brand-tint); }
#obsah .inf-hero h1 { font-size: 40px; font-weight: 600; line-height: 48px; letter-spacing: -.02em; }
#obsah .inf-hero p { color: var(--text); font-size: 16px; line-height: 24px; opacity: 1; }
#obsah .inf-hero .pills span { height: 32px; padding: 0 12px; background: var(--bg); color: var(--text); font-size: 14px; font-weight: 400; }
#obsah .inf-hero .pills svg { color: var(--text); }
#obsah .info-nav { padding: 0; border: 0; border-radius: 0; background: transparent; }
#obsah .info-nav a { gap: 12px; padding: 8px 12px; border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 400; line-height: 20px; transition: background-color .2s var(--bm-in); }
#obsah .info-nav a svg { width: 20px; height: 20px; color: var(--text); }
#obsah .info-nav a:hover { background: var(--bm-mid); }
#obsah .info-nav a.active { background: var(--bm-mid); color: var(--text); font-weight: 600; }
#obsah .info-nav a.active svg { color: var(--text); }
#obsah .info-nav .nav-t { padding: 16px 12px 4px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
#obsah .doc section { padding: 24px 32px 32px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .doc h2 { margin-bottom: 12px; font-size: 28px; font-weight: 600; line-height: 40px; letter-spacing: -.01em; }
#obsah .doc h3 { margin: 24px 0 8px; font-size: 18px; font-weight: 600; line-height: 24px; }
#obsah .doc p, #obsah .doc li { color: var(--text); font-size: 16px; line-height: 24px; }
#obsah .doc .lead { color: var(--text); font-size: 18px; line-height: 28px; }
#obsah .doc a:not(.btn):not(.btn-pill) { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#obsah .doc table { border-color: var(--bm-line); border-radius: 12px; font-size: 14px; }
#obsah .doc th, #obsah .doc td { padding: 12px 16px; border-bottom-color: var(--bm-line); }
#obsah .doc th { background: var(--bm-promo); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
#obsah .doc .free { height: 22px; padding: 0 9px; border-radius: 3px; background: var(--bm-deal); color: var(--bm-deal-ink); font-size: 12px; font-weight: 600; line-height: 22px; -webkit-mask: radial-gradient(circle at 0 50%, #0000 3.5px, #000 4px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 3.5px, #000 4px) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, #0000 3.5px, #000 4px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 3.5px, #000 4px) right / 51% 100% no-repeat; }
#obsah .facts svg, #obsah .grade small svg { color: var(--text); }
#obsah .steps div, #obsah .grade, #obsah .kontakt-card, #obsah .stav-card { border: 0; border-radius: 12px; background: var(--bm-promo); }
#obsah .steps div { padding: 16px; font-size: 14px; line-height: 20px; }
#obsah .steps b { width: 28px; height: 28px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600; }
#obsah .grade-top b { border-radius: 6px; }
#obsah .kontakt-card .tel { font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
#obsah .kontakt-card .tel:hover { color: var(--text); text-decoration: underline; }
#obsah .kontakt-card .k-row { font-size: 14px; line-height: 20px; }
#obsah .kontakt-card .k-row svg { color: var(--text); }
#obsah .kontakt-card .mails a { height: 32px; padding: 0 12px; border: 0; background: var(--bm-mid); color: var(--text); font-size: 14px; line-height: 32px; transition: background-color .225s var(--bm-std); }
#obsah .kontakt-card .mails a:hover { background: var(--bm-mid-hover); color: var(--text); }
#obsah .map { border: 0; border-radius: 12px; }
#obsah .form-vzor { border: 0; border-radius: 12px; background: var(--bm-promo); }
#obsah .note-box { border-radius: 12px; background: var(--bm-info); font-size: 14px; line-height: 20px; }
#obsah .doc .btn-pill { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--brand-button); color: var(--brand-contrast); font-size: 16px; font-weight: 600; transition: background-color .2s var(--bm-in); }
#obsah .doc .btn-pill:hover { background: var(--brand-button-hover); color: var(--brand-contrast); }
#obsah .legal-doc .legal-table th, #obsah .legal-doc .legal-table td { padding: 12px 8px; border-bottom-color: var(--bm-line); font-size: 14px; }

/* compare: their table (hairlines, a grey label column, 12/600 group rows in ink on grey) and their sticky bar; empty states
   as their grey card */
#obsah .empty, #obsah .co-empty { padding: 32px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .cmp-table-wrap { border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .cmp-table { font-size: 14px; }
#obsah .cmp-table th, #obsah .cmp-table td { padding: 12px 16px; border-bottom-color: var(--bm-line); }
#obsah .cmp-table thead th, #obsah .cmp-table thead td, #obsah .cmp-table tbody td { border-left-color: var(--bm-line); }
#obsah .cmp-table tbody th { background: var(--bm-promo); color: var(--muted); font-weight: 400; }
#obsah .cmp-table tr.grp th { background: var(--bm-mid); color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
#obsah .cmp-table thead .nm { color: var(--text); font-size: 16px; font-weight: 600; }
#obsah .cmp-table thead .pr strong { color: var(--text); font-size: 22px; font-weight: 600; }
#obsah .cmp-table .rm { border-color: var(--bm-line); border-radius: 9999px; }
body:where(:has(#obsah)) .cmp-bar { border-top-color: var(--bm-line); background: var(--bg); box-shadow: 0 -4px 12px rgba(17, 15, 21, .08); }
body:where(:has(#obsah)) .cmp-item { border-color: var(--bm-line); border-radius: 8px; }
body:where(:has(#obsah)) .cmp-act .btn { height: 40px; border-radius: 6px; box-shadow: none; font-size: 14px; font-weight: 600; }

/* trade-in: fieldsets as white cards, the categories as their chips, the condition picks as their option rows */
#obsah .ti-form fieldset { padding: 24px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .ti-form legend { float: left; width: 100%; margin-bottom: 16px; padding: 0; font-size: 22px; font-weight: 600; line-height: 32px; }
#obsah .ti-form legend b { width: 28px; height: 28px; background: var(--text); color: var(--bg); font-size: 14px; }
#obsah .ti-cats button { height: 32px; padding: 0 12px; border: 0; border-radius: 9999px; background: var(--bm-mid); color: var(--text); font-size: 14px; transition: background-color .225s var(--bm-std); }
#obsah .ti-cats button:hover { background: var(--bm-mid-hover); }
#obsah .ti-cats button.on { background: var(--brand-soft); color: var(--brand-ink, var(--text)); font-weight: 400; }
#obsah .ti-grade { padding: 12px 16px; border: 1px solid var(--bm-field); border-radius: 6px; transition: background-color .2s var(--bm-in); }
#obsah .ti-grade:hover { background: var(--bm-mid); }
#obsah .ti-grade.on { border-color: var(--text); background: var(--brand-tint); box-shadow: none; }
#obsah .ti-quote { border: 0; border-radius: 12px; background: var(--bm-info); }
#obsah .ti-photo, #obsah .ti-add { border-color: var(--bm-field); border-radius: 8px; }

/* every remaining button in the page body:where(:has(#obsah)) takes their button shape: 6px corners, no shadow, 600; the primary and secondary
   colours stay ours (brand fill / ink outline) */
#obsah .btn { border-radius: 6px; box-shadow: none; font-weight: 600; transition: background-color .2s var(--bm-in), color .2s var(--bm-in), border-color .2s var(--bm-in); }
#obsah .btn-outline { border: 1px solid var(--text); background: transparent; color: var(--text); }
#obsah .btn-outline:hover { border-color: var(--text); background: var(--bm-ghost-hover); color: var(--text); }
#obsah .empty .btn, #obsah .co-empty .btn, #obsah .nf-search .btn { height: 48px; padding: 0 24px; font-size: 16px; }

/* not found: the figure at 600 in our brand, a 28/600 title, the search as their 48px field, the categories as their chips */
#obsah .nf-code { font-family: var(--font-heading, var(--font)); font-size: 72px; font-weight: 600; letter-spacing: -.02em; }
#obsah .nf-box h1 { font-size: 28px; font-weight: 600; line-height: 40px; letter-spacing: -.01em; }
#obsah .nf-box > p { color: var(--text); font-size: 16px; line-height: 24px; }
#obsah .nf-search input { height: 48px; padding: 0 16px; border: 1px solid var(--bm-field); border-radius: 6px; font-size: 16px; transition: border-color .2s var(--bm-std), box-shadow .2s var(--bm-std); }
#obsah .nf-search input:focus { border-color: var(--text); outline: 0; box-shadow: inset 0 0 0 .5px var(--text); }
#obsah .nf-cats a { height: 32px; padding: 0 12px; border: 0; border-radius: 9999px; background: var(--bm-mid); color: var(--text); font-size: 14px; font-weight: 400; line-height: 32px; transition: background-color .225s var(--bm-std); }
#obsah .nf-cats a:hover { background: var(--bm-mid-hover); color: var(--text); }
#obsah .empty { color: var(--text); }

/* the price alert box under the buy area: a grey card */
#obsah .alert-form { gap: 12px; padding: 16px; border: 0; border-radius: 12px; background: var(--bm-promo); }
#obsah .alert-row .btn { height: 48px; border-radius: 6px; box-shadow: none; font-size: 16px; font-weight: 600; }

/* pickup point picker in the checkout */
#obsah .pickup { border-color: var(--bm-line); border-radius: 12px; }
#obsah .pickup-head { border-bottom-color: var(--bm-line); background: var(--bm-promo); }
#obsah .pickup-list { border-right-color: var(--bm-line); }
#obsah .pickup-list button { border-bottom-color: var(--bm-line); font-size: 14px; transition: background-color .2s var(--bm-in); }
#obsah .pickup-list button:hover, #obsah .pickup-list button.on { background: var(--bm-mid); }

/* ================================================================================================== product page */

/* layout as Back Market's product page (the user opened layout changes everywhere but the home page), in their proportions:
   104px thumbnails 8px from the picture, the picture as a white 12px card, a 64px gutter, then the buying column (42% of
   the row, 440–600px – theirs is 496 of 1120). The right column reads in their order: name, code, condition, the offer
   ticket (as wide as its text), the price on its own line, then one row of quantity + add to cart + buy now, the gift, the
   delivery card, the price watch, their info cards one per line, the small actions, then description, specs, guarantees,
   shipping (blocks the shop adds later fall in at the end) */
@media (min-width: 1101px) {
  #obsah .detail { grid-template-columns: minmax(0, 1fr) clamp(440px, 42%, 600px); gap: 64px; padding: 24px 0 56px; }
  #obsah .gallery:has(> .thumbs) { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; align-items: start; }
  #obsah .gallery:has(> .thumbs) > .main-img { grid-column: 2; grid-row: 1; }
  #obsah .gallery > .thumbs { grid-column: 1; grid-row: 1; flex-direction: column; gap: 8px; margin-top: 0; }
  #obsah .gallery:not(:has(> .thumbs)) > .main-img { max-width: 672px; }
}
#obsah .detail > div:not(.gallery) { display: flex; flex-direction: column; }
#obsah .detail > div:not(.gallery) > * { order: 20; }
#obsah .detail > div:not(.gallery) > h1 { order: 1; }
#obsah .detail > div:not(.gallery) > .prod-meta { order: 2; }
#obsah .detail > div:not(.gallery) > .pd-stav { order: 3; align-self: stretch; }
#obsah .detail > div:not(.gallery) > .pd-sale { order: 4; align-self: flex-start; min-width: min(380px, 100%); max-width: 100%; padding-right: 40px; }
#obsah .detail > div:not(.gallery) > .pd-buy { order: 5; }
#obsah .detail > div:not(.gallery) > .pd-trust { order: 6; margin-top: 8px; }
#obsah .detail > div:not(.gallery) > .pd-actions { order: 7; }
#obsah .detail > div:not(.gallery) > .pd-desc { order: 8; margin-top: 24px; }
#obsah .detail > div:not(.gallery) > .keyspecs { order: 9; }
#obsah .detail > div:not(.gallery) > .usp-mini { order: 10; }
#obsah .detail > div:not(.gallery) > .buy-box:not(.pd-buy) { order: 11; }
/* the buy area as one grid: stock, the price alone on its line, then quantity | add to cart | buy now on one row (their
   price + add-to-cart + heart row, with our extra controls), then the gift, delivery card, hint and price watch */
@media (min-width: 761px) {
  #obsah .pd-buy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "stock stock stock" "price price price" "qty cta buy" "gift gift gift" "info info info" "hint hint hint" "alert alert alert"; column-gap: 8px; align-items: center; }
  #obsah .pd-buy > * { grid-column: 1 / -1; }
  #obsah .pd-buy > .pd-price-row { display: contents; }
  #obsah .pd-buy > .pd-stock { grid-area: stock; }
  #obsah .pd-buy .pd-price { grid-area: price; margin-bottom: 16px; }
  #obsah .pd-buy .pd-price-row > .qty { grid-area: qty; align-self: stretch; height: auto; min-height: 48px; }
  #obsah .pd-buy > .pd-cta { grid-area: cta; }
  #obsah .pd-buy:not(:has(> .btn-outline.btn-block)) > .pd-cta { grid-column: 2 / -1; }
  #obsah .detail .pd-buy > .btn-outline.btn-block { grid-area: buy; align-self: stretch; width: auto; height: auto; min-height: 56px; margin-top: 0; padding: 0 24px; }
  #obsah .pd-buy > .pd-gift { grid-area: gift; margin-top: 16px; }
  #obsah .pd-buy > .pd-info { grid-area: info; }
  #obsah .pd-buy > .qty-hint { grid-area: hint; }
  #obsah .pd-buy > .alert-box { grid-area: alert; }
}

/* breadcrumb as Back Market's: links in ink at 600, the current page regular, their chevron between (the shop's " › " text
   separators are sized away) */
#obsah .crumbs { align-items: center; gap: 0; padding-top: 16px; color: var(--text); font-size: 0; }
#obsah .crumbs > * { font-size: 14px; line-height: 20px; }
#obsah .crumbs a { display: inline-flex; align-items: center; color: var(--text); font-weight: 600; text-underline-offset: 3px; }
#obsah .crumbs a:hover { color: var(--text); text-decoration: underline; }
#obsah .crumbs a::after { content: ""; flex: none; width: 16px; height: 16px; margin: 0 8px; background: var(--text); -webkit-mask: var(--bm-i-next) center / contain no-repeat; mask: var(--bm-i-next) center / contain no-repeat; }
#obsah .crumbs > span { color: var(--text); font-weight: 400; }

/* gallery: the picture as theirs – no frame, no grey plate, 12px corners; thumbnails as small hairline cards, the shown one
   ringed in ink */
#obsah .detail .main-img { padding: 32px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: none; }
#obsah .thumbs { gap: 8px; }
#obsah .thumbs button { width: 104px; height: 104px; padding: 8px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: none; transition: box-shadow .2s var(--bm-std); }
#obsah .thumbs button:hover, #obsah .thumbs button.active { border: 0; box-shadow: var(--bm-sh-short); }
html[data-theme="dark"] #obsah .detail .main-img, html[data-theme="dark"] #obsah .thumbs button { background: #fff; } /* the photos are white-backed JPGs */

/* title block: 28/600/40 like theirs, the code as their grey 14px line */
#obsah .detail h1 { margin: 0 0 4px; font-size: 28px; font-weight: 600; line-height: 40px; letter-spacing: -.01em; }
#obsah .prod-meta { margin-bottom: 16px; color: var(--text); font-size: 14px; line-height: 20px; }
#obsah .prod-meta .pm-code { margin-left: 0; color: var(--muted); }

/* the unit's condition as their chosen-condition row: ink border, the brand tint behind, their filled dot (carrying the
   grade letter), the label at 16/600 */
#obsah .pd-stav { gap: 12px; margin-bottom: 16px; padding: 12px 20px 12px 16px; border: 1px solid var(--text); border-radius: 6px; background: var(--brand-tint); }
#obsah .pd-stav-badge { width: 24px; height: 24px; border-radius: 9999px; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; }
#obsah .pd-stav-txt small { color: var(--muted); font-size: 12px; line-height: 16px; }
#obsah .pd-stav-txt b { color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; }

/* the description as a grey card, its "show more" as their underlined link */
#obsah .pd-desc { padding: 16px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .pd-desc p { color: var(--text); font-size: 14px; line-height: 20px; }
#obsah .pd-desc-more { margin-top: 8px; color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; text-underline-offset: 3px; }

/* the four promises as their info cards: tinted, 12px corners, the icon in ink, 14/600, their chevron at the end, a shade
   darker under the pointer (200ms) */
#obsah .pd-trust { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 16px; }
#obsah .pd-trust a { align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 12px; background: var(--bm-info); color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; transition: background-color .2s var(--bm-in); }
#obsah .pd-trust a:hover { background: var(--bm-info-hover); }
#obsah .pd-trust a span, #obsah .pd-trust a:hover span { color: var(--text); text-decoration: none; }
#obsah .pd-trust a { min-height: 64px; }
#obsah .pd-trust svg { width: 32px; height: 32px; color: var(--text); }
#obsah .pd-trust a::after { content: ""; flex: none; width: 20px; height: 20px; margin-left: auto; background: currentColor; -webkit-mask: var(--bm-i-next) center / contain no-repeat; mask: var(--bm-i-next) center / contain no-repeat; }

/* the sale strip as their offer ticket: mint from our green, notched at both ends, 12px corners, their tag icon then a column
   of punched holes, the title at 14/600 over the saving */
#obsah .pd-sale {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 24px; row-gap: 0; align-items: center; justify-content: stretch;
  min-height: 64px; margin-bottom: 16px; padding: 12px 24px; border-radius: 12px; background: var(--bm-deal); color: var(--bm-deal-ink); text-align: left;
  -webkit-mask:
    radial-gradient(circle 10px at 0 50%, #0000 98%, #000), radial-gradient(circle 10px at 100% 50%, #0000 98%, #000),
    radial-gradient(circle 3px at 60px 0, #0000 98%, #000), radial-gradient(circle 3px at 60px calc(50% - 12px), #0000 98%, #000),
    radial-gradient(circle 3px at 60px 50%, #0000 98%, #000), radial-gradient(circle 3px at 60px calc(50% + 12px), #0000 98%, #000),
    radial-gradient(circle 3px at 60px 100%, #0000 98%, #000);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 10px at 0 50%, #0000 98%, #000), radial-gradient(circle 10px at 100% 50%, #0000 98%, #000),
    radial-gradient(circle 3px at 60px 0, #0000 98%, #000), radial-gradient(circle 3px at 60px calc(50% - 12px), #0000 98%, #000),
    radial-gradient(circle 3px at 60px 50%, #0000 98%, #000), radial-gradient(circle 3px at 60px calc(50% + 12px), #0000 98%, #000),
    radial-gradient(circle 3px at 60px 100%, #0000 98%, #000);
  mask-composite: intersect;
}
#obsah .pd-sale::before { content: ""; grid-row: 1 / span 2; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--bm-i-tag) center / contain no-repeat; mask: var(--bm-i-tag) center / contain no-repeat; }
#obsah .pd-sale span { font-size: 14px; font-weight: 600; line-height: 20px; }
#obsah .pd-sale b { font-size: 14px; font-weight: 400; line-height: 20px; }

/* the buy area straight on the page like theirs (no grey box): stock 14/600 with its dot; the price 22/600 over the struck old
   one and the VAT note; the quantity as their 48px field; add-to-cart as their primary (6px corners), "buy now" as their
   secondary; the delivery lines in one info card; "watch the price" as their underlined link */
#obsah .pd-buy { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#obsah .pd-stock { margin-bottom: 8px; font-size: 14px; font-weight: 600; line-height: 20px; }
#obsah .pd-price-row { margin-bottom: 16px; }
#obsah .pd-price { column-gap: 8px; row-gap: 0; }
#obsah .pd-price strong { order: -1; flex-basis: 100%; color: var(--text); font-family: var(--font-heading, var(--font)); font-size: 22px; font-weight: 600; line-height: 32px; letter-spacing: 0; }
#obsah .pd-price:has(s) strong { color: var(--bm-deal-ink); }
#obsah .pd-price s { color: var(--muted); font-size: 14px; line-height: 20px; }
#obsah .pd-price .hvezda { margin-left: -6px; color: var(--muted); font-size: 14px; }
#obsah .pd-price small { width: auto; color: var(--muted); font-size: 12px; line-height: 20px; }
#obsah .pd-buy .qty { height: 48px; border: 1px solid var(--bm-field); border-radius: 6px; background: var(--bg); }
#obsah .pd-buy .qty button { width: 44px; background: transparent; color: var(--text); font-size: 20px; transition: background-color .2s var(--bm-in); }
#obsah .pd-buy .qty button:hover:not(:disabled) { background: var(--bm-ghost-hover); }
#obsah .pd-buy .qty span { min-width: 32px; font-size: 16px; font-weight: 600; }
#obsah .pd-cta { min-height: 56px; gap: 0; padding: 8px 24px; border: 0; border-radius: 6px; box-shadow: none; font-size: 16px; font-weight: 600; line-height: 24px; transition: background-color .2s var(--bm-in); }
#obsah .pd-cta small { font-size: 12px; font-weight: 400; line-height: 16px; opacity: .9; }
#obsah .pd-buy .btn-outline.btn-block { height: 48px; margin-top: 8px; border: 1px solid var(--text); border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); font-size: 16px; font-weight: 600; transition: background-color .2s var(--bm-in); }
#obsah .pd-buy .btn-outline.btn-block:hover { border-color: var(--text); background: var(--bm-ghost-hover); }
#obsah .pd-info { gap: 8px; margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--bm-info); font-size: 14px; line-height: 20px; }
#obsah .pd-info > div { gap: 12px; }
#obsah .pd-info svg { width: 24px; height: 24px; color: var(--text); }
#obsah .pd-info a { color: var(--text); font-size: 14px; font-weight: 600; text-underline-offset: 3px; }
#obsah .alert-open { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0; border: 0; background: none; color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#obsah .alert-open svg { width: 20px; height: 20px; color: var(--text); }

/* the small actions as their tertiary buttons: ink text and icon, a soft grey pill under the pointer */
#obsah .pd-actions { gap: 4px; margin: 16px -10px 0; }
#obsah .pd-act { height: 36px; gap: 8px; padding: 0 10px; border-radius: 9999px; color: var(--text); font-size: 14px; transition: background-color .2s var(--bm-in); }
#obsah .pd-act svg { width: 20px; height: 20px; color: var(--text); }
#obsah .pd-act:hover { background: var(--bm-ghost-hover); color: var(--text); }
#obsah .pd-act:hover svg { color: var(--text); }

/* key specs as their spec list: grey label left, ink value right, hairlines between, in a hairline card */
#obsah .keyspecs.pod-boxem { margin: 16px 0; padding: 4px 16px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); font-size: 14px; line-height: 20px; }
#obsah .keyspecs.pod-boxem li { padding: 12px 0; border-bottom: 1px solid var(--bm-line); }
#obsah .keyspecs.pod-boxem li:last-child { border-bottom: 0; }
#obsah .keyspecs.pod-boxem li span:first-child { color: var(--muted); }
#obsah .keyspecs.pod-boxem li span:last-child { color: var(--text); font-weight: 600; }

/* the four guarantees as grey quality cards, the icon in ink */
#obsah .usp-mini { gap: 8px; }
#obsah .usp-mini > div { grid-template-columns: 24px 1fr; column-gap: 12px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .usp-mini svg { width: 24px; height: 24px; margin-top: 0; color: var(--text); }
#obsah .usp-mini b { font-size: 14px; font-weight: 600; line-height: 20px; }
#obsah .usp-mini span { color: var(--muted); font-size: 12px; line-height: 16px; }

/* shipping and payment: a hairline card, 14px, its links as their underlined ink links */
#obsah .detail .buy-box:not(.pd-buy) { padding: 16px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .ship-row { font-size: 14px; line-height: 20px; }
#obsah .detail .buy-box:not(.pd-buy) p.muted { font-size: 14px; }
#obsah .detail .buy-box:not(.pd-buy) p.muted a { color: var(--text) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* the links carry an inline brand colour */

/* "recommended accessories" as their accessory carousel: a 24/600 title, 16/600 group heads with the chevron, the cards as
   their product cards (white, 12px, short shadow, 16px in), "Add" as their small secondary button whose box fills in ink
   once chosen; the total bar as their sticky bar */
#accSec .acc-h { font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -.01em; }
#accSec .acc-g { border-bottom-color: var(--bm-line); }
#accSec .acc-gh { font-size: 16px; font-weight: 600; line-height: 24px; }
#accSec .acc-gh svg { width: 24px; height: 24px; color: var(--text); transition: transform .2s var(--bm-std); }
#accSec .acc-row { gap: 16px; margin: -12px; padding: 12px 12px 20px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 90%, #0000); mask: linear-gradient(90deg, #000 90%, #0000); }
#accSec .acc-row::-webkit-scrollbar { display: none; }
#accSec .acc-card { gap: 8px; padding: 16px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); scroll-snap-align: start; transition: box-shadow .2s var(--bm-std); }
#accSec .acc-card:hover { box-shadow: var(--bm-sh-mid); }
#accSec .acc-card.on { box-shadow: 0 0 0 1px var(--text), var(--bm-sh-short); }
#accSec .acc-name { min-height: 40px; color: var(--text); font-size: 14px; line-height: 20px; }
#accSec .acc-name:hover { color: var(--text); text-decoration: underline; }
#accSec .acc-bottom b { font-size: 16px; font-weight: 600; }
#accSec .acc-add { height: 32px; gap: 6px; padding: 0 10px; border: 1px solid var(--text); border-radius: 6px; background: transparent; color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; transition: background-color .2s var(--bm-in), color .2s var(--bm-in); }
#accSec .acc-add:hover { background: var(--bm-ghost-hover); }
#accSec .acc-add i { width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 4px; }
#accSec .acc-add.on, #accSec .acc-add.on:hover { background: var(--text); color: var(--bg); }
#accSec .acc-add.on i { border-color: var(--bg); background: var(--bg); }
#accSec .acc-add.on i::after { border-color: var(--text); }
#accSec .acc-bar { background: var(--bg); box-shadow: 0 -1px 0 var(--bm-line), var(--bm-sh-long); }
#accSec .acc-bar-t { font-size: 16px; font-weight: 600; }
#accSec .acc-bar-sum { font-size: 22px; font-weight: 600; letter-spacing: 0; }
#accSec .acc-bar-btn { height: 48px; padding: 0 24px; border-radius: 6px; box-shadow: none; }

/* the tabs as their tab bar: no box, a hairline under the row, 16/600 labels in grey, the chosen one in ink on a 2px ink line */
#obsah #ptabs.tabs { gap: 0; margin: 40px 0 24px; border: 0; border-bottom: 1px solid var(--bm-line); border-radius: 0; background: none; overflow: visible; }
#obsah #ptabs.tabs button { margin: 0 0 -1px; padding: 12px 16px; border: 0; border-bottom: 2px solid transparent; background: none; box-shadow: none; color: var(--muted); font-size: 16px; font-weight: 600; line-height: 24px; transition: color .2s var(--bm-in), border-color .2s var(--bm-in); }
#obsah #ptabs.tabs button:hover { color: var(--text); }
#obsah #ptabs.tabs button.active { border-bottom-color: var(--text); background: none; color: var(--text); }
#obsah #ptabs.tabs button svg, #obsah #ptabs.tabs button.active svg { width: 20px; height: 20px; color: currentColor; }

/* the tab contents in their type and cards */
#obsah .desc-intro h2 { font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -.01em; }
#obsah .desc-lead, #obsah .desc-intro .desc-lead { color: var(--text); font-size: 16px; line-height: 24px; }
#obsah .desc-p { color: var(--muted); font-size: 14px; line-height: 20px; }
#obsah .desc-for, #obsah .desc-intro .desc-for { padding: 12px 16px; border-radius: 12px; background: var(--bm-info); color: var(--text); font-size: 14px; line-height: 20px; }
#obsah .desc-main h3 { margin: 32px 0 16px; padding: 0; border: 0; font-size: 22px; font-weight: 600; line-height: 32px; letter-spacing: -.01em; }
#obsah .part { padding: 16px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .part h4 { margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0; text-transform: none; }
#obsah .part-model { margin-bottom: 4px; font-size: 18px; font-weight: 600; line-height: 24px; }
#obsah .part p { color: var(--text); font-size: 14px; line-height: 20px; }
#obsah .box-list { color: var(--text); font-size: 14px; line-height: 20px; }
/* specifications as their spec table: grey label, ink 600 value, a hairline under each row – no boxes */
#obsah #tab-parametry .spec-cols { gap: 0 40px; column-gap: 40px; }
#obsah #tab-parametry .spec-cols .spec-group { margin: 0 0 8px; border: 0; border-radius: 0; background: none; overflow: visible; }
#obsah #tab-parametry .spec-cols .spec-group h4 { padding: 0; border: 0; background: none; }
#obsah #tab-parametry .spec-group h4 { margin: 24px 0 4px; color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; text-transform: none; }
#obsah #tab-parametry .spec-group dl { gap: 0; }
#obsah #tab-parametry .spec-group dt, #obsah #tab-parametry .spec-group dd { padding: 12px 0; border: 0; border-bottom: 1px solid var(--bm-line); border-radius: 0; background: none; font-size: 14px; line-height: 20px; }
#obsah #tab-parametry .spec-group dt { padding-right: 16px; color: var(--muted); font-weight: 400; }
#obsah #tab-parametry .spec-group dd { color: var(--text); font-weight: 600; }
/* FAQ as their accordion: no boxes, hairlines between, 16/600 questions, their chevron turning over as it opens */
#obsah .faq-accord details, #obsah .faq-accord details[open] { margin: 0; border: 0; border-bottom: 1px solid var(--bm-line); border-radius: 0; background: none; }
#obsah .faq-accord summary { padding: 16px 0; border-radius: 0; font-size: 16px; font-weight: 600; line-height: 24px; }
#obsah .faq-accord summary::after, #obsah .faq-accord details[open] summary::after { content: ""; flex: none; width: 24px; height: 24px; background: var(--text); -webkit-mask: var(--bm-i-next) center / contain no-repeat; mask: var(--bm-i-next) center / contain no-repeat; transform: rotate(90deg); transition: transform .2s var(--bm-std); }
#obsah .faq-accord details[open] summary::after { transform: rotate(-90deg); }
#obsah .faq-accord details > p, #obsah .faq-accord details > div { padding: 0 0 16px; color: var(--text); font-size: 14px; line-height: 20px; }
#obsah .faq-accord .ship-grid { padding: 0 0 16px; }
#obsah .ship-grid > div { border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah table.mini td { border-bottom-color: var(--bm-line); font-size: 14px; }
#obsah table.mini .hl { border-radius: 6px; background: var(--brand-tint); color: var(--brand-ink, var(--text)); }
#obsah .grade-box.big { padding: 16px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .grade-box.big .grade-badge { min-width: 28px; height: 24px; border-radius: 6px; background: var(--text); color: var(--bg); font-size: 12px; }
/* reviews and questions: their empty state (a grey card), the form as a hairline card with their 48px fields and button */
#obsah #tab-dotazy h3, #obsah .reviews h3 { margin: 32px 0 12px; font-size: 22px; font-weight: 600; line-height: 32px; }
#obsah .empty-soft { padding: 24px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); color: var(--muted); font-size: 14px; line-height: 20px; }
#obsah .qa-form { gap: 12px; padding: 16px; border: 0; border-radius: 12px; background: var(--bm-card); box-shadow: var(--bm-sh-short); }
#obsah .qa-form input, #obsah .qa-form textarea { padding: 12px; border: 1px solid var(--bm-field); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 16px; line-height: 24px; transition: border-color .2s var(--bm-std), box-shadow .2s var(--bm-std); }
#obsah .qa-form input { height: 48px; }
#obsah .qa-form textarea { min-height: 112px; }
#obsah .qa-form input:focus, #obsah .qa-form textarea:focus { border-color: var(--text); outline: 0; box-shadow: inset 0 0 0 .5px var(--text); }
#obsah .qa-form .btn-primary { height: 48px; padding: 0 24px; border-radius: 6px; box-shadow: none; font-size: 16px; font-weight: 600; }

/* ---- pass 4: Back Market's page canvas, carousels, sticky bar and motion ---- */

/* their pages sit on the light grey canvas (#f8f9fc) with white cards – ours too, everywhere (the home already did); the
   header, menu row and footer keep their white */
body:has(#obsah) { background: var(--bm-canvas); }

/* the free gift as their lilac offer card: the gift's own violet, 12px corners, the title 14/600, the value under it */
#obsah .pd-gift { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-radius: 12px; background: color-mix(in srgb, #5b5bd6 12%, var(--bm-card)); color: color-mix(in srgb, #5b5bd6 70%, #000); }
#obsah .pd-gift .pdg-head { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-size: 14px; font-weight: 600; line-height: 20px; }
#obsah .pd-gift .pdg-head svg { width: 20px; height: 20px; color: inherit; }
#obsah .pd-gift .pdg-item { display: block; color: var(--text); font-size: 14px; line-height: 20px; }
html[data-theme="dark"] #obsah .pd-gift { background: color-mix(in srgb, #5b5bd6 24%, var(--bm-card)); color: color-mix(in srgb, #5b5bd6 45%, #fff); }

/* past the add-to-cart button the shop un-hides its buy bar (phones only so far); on desktop it becomes Back Market's sticky
   product bar: white, flush at the top over the header, a hairline under it, the price on the left and the button on the
   right inside the page width – sliding down in 300ms */
@media (min-width: 761px) {
  #obsah .buybar:not([hidden]) { display: flex; position: fixed; top: 0; right: 0; bottom: auto; left: 0; z-index: 60; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 12px max(20px, calc((100% - var(--container, 1400px)) / 2)); border: 0; border-bottom: 1px solid var(--bm-line); background: var(--bg); box-shadow: var(--bm-sh-mid); animation: bm-drop .3s var(--bm-std) both; }
  #obsah .buybar b { display: block; color: var(--text); font-family: var(--font-heading, var(--font)); font-size: 22px; font-weight: 600; line-height: 32px; }
  #obsah .buybar span { color: var(--bm-deal-ink); font-size: 14px; font-weight: 600; line-height: 20px; }
  #obsah .buybar .btn { height: 48px; padding: 0 32px; border-radius: 6px; box-shadow: none; font-size: 16px; font-weight: 600; }
}
@keyframes bm-drop { from { transform: translateY(-100%); } }

/* "similar products" as one of their carousels: 3½ cards in view, the cut one fading out (their 90% mask), snapping, smooth,
   and their arrow pair top right as CSS scroll buttons */
body:has(#obsah .detail) #obsah > section.container > .grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 3 * 16px) / 3.5); gap: 16px; margin: -12px -12px 0; padding: 12px 12px 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 90%, #0000); mask: linear-gradient(90deg, #000 90%, #0000); }
body:has(#obsah .detail) #obsah > section.container > .grid > * { scroll-snap-align: start; }
body:has(#obsah .detail) #obsah > section.container > .grid::-webkit-scrollbar { display: none; }
@media (max-width: 760px) { body:has(#obsah .detail) #obsah > section.container > .grid { grid-auto-columns: 72%; } }
/* the accessory rows: their accessory cards (name 16/600, the price, a full-width "add" with their plus that turns into
   their check once chosen) and the same arrows on each row's title line, left of its fold chevron */
#accSec .acc-g { position: relative; }
#accSec .acc-row { grid-auto-columns: 248px; scroll-padding-inline: 12px; scroll-behavior: smooth; overscroll-behavior-x: contain; }
#accSec .acc-row .acc-card { padding: 16px; }
#accSec .acc-name { min-height: 48px; font-size: 16px; font-weight: 600; line-height: 24px; }
#accSec .acc-bottom { flex-direction: column; align-items: stretch; gap: 12px; }
#accSec .acc-bottom b { font-size: 18px; font-weight: 600; line-height: 24px; }
#accSec .acc-add { justify-content: center; height: 40px; gap: 8px; font-size: 14px; }
#accSec .acc-add i, #accSec .acc-add.on i { width: 20px; height: 20px; border: 0; border-radius: 0; background: currentColor; -webkit-mask: var(--bm-i-plus) center / contain no-repeat; mask: var(--bm-i-plus) center / contain no-repeat; }
#accSec .acc-add.on i { -webkit-mask-image: var(--bm-i-check); mask-image: var(--bm-i-check); }
#accSec .acc-add.on i::after { display: none; }
@supports selector(::scroll-button(*)) {
  @media (min-width: 761px) {
    body:has(#obsah .detail) #obsah > section.container:has(> .grid) { position: relative; }
    body:has(#obsah .detail) #obsah > section.container:has(> .grid) > .section-head { padding-right: 104px; }
    body:has(#obsah .detail) #obsah > section.container > .grid::scroll-button(*), #accSec .acc-row::scroll-button(*) { position: absolute; width: 40px; height: 40px; border: 0; border-radius: 9999px; background: var(--bm-p-next-light) center / 24px no-repeat, var(--text); box-shadow: none; cursor: pointer; transition: background-color .3s var(--bm-in); }
    body:has(#obsah .detail) #obsah > section.container > .grid::scroll-button(*) { top: var(--bm-head-top, -4px); }
    body:has(#obsah .detail) #obsah > section.container > .grid::scroll-button(inline-end) { content: "" / "Next"; right: 0; }
    body:has(#obsah .detail) #obsah > section.container > .grid::scroll-button(inline-start) { content: "" / "Previous"; right: 48px; background-image: var(--bm-p-prev-light); }
    #accSec .acc-row::scroll-button(*) { top: 4px; }
    #accSec .acc-row::scroll-button(inline-end) { content: "" / "Next"; right: 40px; }
    #accSec .acc-row::scroll-button(inline-start) { content: "" / "Previous"; right: 88px; background-image: var(--bm-p-prev-light); }
    body:has(#obsah .detail) #obsah > section.container > .grid::scroll-button(*):hover, #accSec .acc-row::scroll-button(*):hover { background-color: color-mix(in srgb, var(--text) 85%, var(--bg)); }
    body:has(#obsah .detail) #obsah > section.container > .grid::scroll-button(*):focus-visible, #accSec .acc-row::scroll-button(*):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    body:has(#obsah .detail) #obsah > section.container > .grid::scroll-button(*):disabled, #accSec .acc-row::scroll-button(*):disabled { background-color: color-mix(in srgb, var(--text) 5%, transparent); cursor: default; }
    body:has(#obsah .detail) #obsah > section.container > .grid::scroll-button(inline-end):disabled, #accSec .acc-row::scroll-button(inline-end):disabled { background-image: var(--bm-p-next-grey); }
    body:has(#obsah .detail) #obsah > section.container > .grid::scroll-button(inline-start):disabled, #accSec .acc-row::scroll-button(inline-start):disabled { background-image: var(--bm-p-prev-grey); }
    html[data-theme="dark"] body:has(#obsah .detail) #obsah > section.container > .grid::scroll-button(inline-end):not(:disabled), html[data-theme="dark"] #accSec .acc-row::scroll-button(inline-end):not(:disabled) { background-image: var(--bm-p-next-dark); }
    html[data-theme="dark"] body:has(#obsah .detail) #obsah > section.container > .grid::scroll-button(inline-start):not(:disabled), html[data-theme="dark"] #accSec .acc-row::scroll-button(inline-start):not(:disabled) { background-image: var(--bm-p-prev-dark); }
  }
}

/* the FAQ panels open and close like theirs, the height easing over 300ms (Chrome's details-content + size keywords) */
@supports selector(::details-content) {
  #obsah .faq-accord details { interpolate-size: allow-keywords; }
  #obsah .faq-accord details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--bm-std), content-visibility .3s var(--bm-std) allow-discrete; }
  #obsah .faq-accord details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #obsah .buybar:not([hidden]) { animation: none; }
  #obsah .faq-accord details::details-content { transition: none; }
}

/* ---- pass 5: Back Market's product-page measures, the ticket's motion, their icons ---- */

/* the product page in their exact grid: 1120px content (only inside the page – header and footer keep ours), 104px thumbs
   + 8 + 448px picture = 560, a 64px gutter, the 496px buying column */
body:has(#obsah .detail) #obsah { --container: 1120px; }
@media (min-width: 1101px) {
  #obsah .detail { grid-template-columns: minmax(0, 1fr) minmax(0, 496px); }
}
/* their buying row: the price block on the left, add to cart and the second button on the right of it, both 48px; the
   quantity under the price */
@media (min-width: 761px) {
  #obsah .pd-buy { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "price cta buy" "stock cta buy" "qty qty qty" "gift gift gift" "info info info" "hint hint hint" "alert alert alert"; column-gap: 12px; }
  #obsah .pd-buy .pd-price { margin-bottom: 0; }
  #obsah .pd-buy > .pd-stock { margin: 4px 0 0; }
  #obsah .pd-buy .pd-price-row > .qty { justify-self: start; align-self: start; height: 40px; min-height: 40px; margin-top: 12px; }
  #obsah .pd-buy > .pd-cta { align-self: center; min-width: 180px; }
  #obsah .detail .pd-buy > .btn-outline.btn-block { align-self: center; height: 48px; min-height: 48px; padding: 0 16px; }
  #obsah .pd-buy:not(:has(> .btn-outline.btn-block)) > .pd-cta { grid-column: 2 / -1; }
}
/* their add-to-cart is one line, 48px, 12px 16px in: the shop's "free shipping, ships today" line stays for screen readers
   only (the delivery card says it) */
#obsah .pd-cta { height: 48px; min-height: 48px; padding: 12px 16px; flex-direction: row; }
#obsah .pd-cta small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#obsah .pd-buy .qty button { width: 40px; }
/* the price block as their three lines: the price, then the green line (our stock, where they put the saving), then the grey
   line – the old price with their (i) where the shop wrote "*", and the price without VAT */
#obsah .pd-price { row-gap: 0; }
#obsah .pd-price .hvezda { display: inline-flex; margin-left: -4px; font-size: 0; }
#obsah .pd-price .hvezda::before { content: ""; width: 16px; height: 16px; background: var(--muted); -webkit-mask: var(--bm-i-info) center / contain no-repeat; mask: var(--bm-i-info) center / contain no-repeat; }
#obsah .pd-price small { font-size: 14px; line-height: 20px; }
#obsah .pd-buy > .pd-stock { color: var(--bm-deal-ink); }
#obsah .pd-buy > .pd-stock.low { color: #c2410c; }
/* the ticket: their 12px second line, the press-in to 98% under the pointer (300ms) and their white shine sweeping across
   every 7s (first in the opening 0.7s) */
#obsah .pd-sale b { font-size: 12px; font-weight: 400; line-height: 16px; }
#obsah .pd-sale { position: relative; overflow: hidden; transition: transform .3s var(--bm-std), opacity .3s var(--bm-std); }
@media (hover: hover) and (min-width: 768px) { #obsah .pd-sale:hover { transform: scale(.98); } }
#obsah .pd-sale::after { content: ""; position: absolute; top: 0; left: -200px; z-index: 1; width: 200px; height: 200px; background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .8) 50%, transparent 85%); pointer-events: none; animation: bm-shine 7s ease infinite; }
@keyframes bm-shine { 0% { left: -200px; } 10%, 100% { left: 100%; } }
/* their info cards: 8px 16px in, 64px tall, the 32px icon, 14/600 */
#obsah .pd-trust a { padding: 8px 16px; }

/* Back Market's icons everywhere the shop drew its own: the inline svg is hidden and the same box paints their glyph in
   the text colour (mask), at the size the shop used */
body:where(:has(#obsah)) .topbar .trust span > svg, #header .icon-link[href="/compare"] > svg, #header .menu-toggle > svg, #header .lang-btn > svg:last-child,
#obsah .main-img .itag-gift > svg, #obsah .pd-trust a > svg, #obsah .pd-info > div > svg, #obsah .pdg-head > svg, #obsah .alert-open > svg,
#obsah .pd-act > svg, #obsah .pd-desc-more > svg, #obsah .usp-mini > div > svg, #obsah #ptabs.tabs button > svg, #accSec .acc-gh > svg,
#obsah .buybar .btn > svg, #obsah .top-picks .tp-add > svg, #obsah .info-nav a > svg, #obsah .inf-hero .pills span > svg, #obsah .facts li > svg,
#obsah .kontakt-card .k-row > svg, #obsah .grade-box li > svg, #obsah .stav-card li > svg, #obsah .hp-why .ico > svg, body:where(:has(#obsah)) .cs-trust li > svg,
body:where(:has(#obsah)) .modal-x > svg, body:where(:has(#obsah)) .modal-head > svg, body:where(:has(#obsah)) .ship-bar > svg, body:where(:has(#obsah)) .chat-x > svg, body:where(:has(#obsah)) .chat-fab .i-on > svg, body:where(:has(#obsah)) .chat-fab .i-off > svg { display: none; }
body:where(:has(#obsah)) .topbar .trust span::before, #header .icon-link[href="/compare"]::before, #header .menu-toggle::before, #header .lang-btn::after,
#obsah .main-img .itag-gift::before, #obsah .pd-trust a::before, #obsah .pd-info > div::before, #obsah .pdg-head::before, #obsah .alert-open::before,
#obsah .pd-act::before, #obsah .pd-desc-more::after, #obsah .usp-mini > div::before, #obsah #ptabs.tabs button::before, #accSec .acc-gh::after,
#obsah .buybar .btn::before, #obsah .top-picks .tp-add::before, #obsah .info-nav a::before, #obsah .inf-hero .pills span::before, #obsah .facts li::before,
#obsah .kontakt-card .k-row::before, #obsah .grade-box li::before, #obsah .stav-card li::before, #obsah .hp-why .ico::before, body:where(:has(#obsah)) .cs-trust li::before,
body:where(:has(#obsah)) .modal-x::before, body:where(:has(#obsah)) .modal-head::before, body:where(:has(#obsah)) .ship-bar::before, body:where(:has(#obsah)) .chat-x::before, body:where(:has(#obsah)) .chat-fab .i-on::before, body:where(:has(#obsah)) .chat-fab .i-off::before {
  content: ""; flex: none; display: inline-block; width: 20px; height: 20px; background: currentColor; vertical-align: middle;
  -webkit-mask: var(--bm-ic, var(--bm-i-check-small)) center / contain no-repeat; mask: var(--bm-ic, var(--bm-i-check-small)) center / contain no-repeat;
}
/* sizes */
body:where(:has(#obsah)) .topbar .trust span::before { width: 16px; height: 16px; margin-right: 4px; }
#header .icon-link[href="/compare"]::before, #header .menu-toggle::before { width: 24px; height: 24px; }
#header .menu-toggle::before { display: block; margin: auto; }
#header .lang-btn::after, #obsah .pd-desc-more::after { width: 16px; height: 16px; }
#obsah .main-img .itag-gift::before { width: 14px; height: 14px; }
#obsah .pd-trust a::before { width: 32px; height: 32px; }
#obsah .pd-info > div::before, #obsah .usp-mini > div::before, #obsah .info-nav a::before, #obsah .kontakt-card .k-row::before, #obsah .hp-why .ico::before, #obsah .buybar .btn::before, #obsah .top-picks .tp-add::before { width: 24px; height: 24px; }
#obsah .usp-mini > div::before { grid-row: 1 / span 2; align-self: center; }
#obsah .hp-why .ico::before { width: 24px; height: 24px; }
#obsah .inf-hero .pills span::before, #obsah .facts li::before, #obsah .grade-box li::before, #obsah .stav-card li::before, body:where(:has(#obsah)) .cs-trust li::before { width: 20px; height: 20px; }
#obsah .facts li::before, #obsah .grade-box li::before, #obsah .stav-card li::before, body:where(:has(#obsah)) .cs-trust li::before { margin-top: 1px; }
#accSec .acc-gh::after { width: 24px; height: 24px; transition: transform .2s var(--bm-std); }
#accSec .acc-gh[aria-expanded="false"]::after { transform: rotate(180deg); }
#obsah .pd-desc-more::after { transition: transform .2s var(--bm-std); }
#obsah .pd-desc-more.up::after { transform: rotate(180deg); }
body:where(:has(#obsah)) .modal-x::before, body:where(:has(#obsah)) .chat-x::before, body:where(:has(#obsah)) .chat-fab .i-off::before { width: 20px; height: 20px; }
body:where(:has(#obsah)) .chat-fab .i-on::before { width: 26px; height: 26px; }
/* which glyph */
#obsah .facts li, #obsah .grade-box li, #obsah .stav-card li, body:where(:has(#obsah)) .cs-trust li { --bm-ic: var(--bm-i-check-small); }
#header .icon-link[href="/compare"], #obsah .pd-act.cmp { --bm-ic: var(--bm-i-compare); }
#header .menu-toggle { --bm-ic: var(--bm-i-burger); }
#header .lang-btn, #obsah .pd-desc-more { --bm-ic: var(--bm-i-chevron-down); }
#accSec .acc-gh { --bm-ic: var(--bm-i-chevron-up); }
#obsah .main-img .itag-gift, #obsah .pdg-head { --bm-ic: var(--bm-i-gift); }
#obsah .pd-trust a:nth-child(1) { --bm-ic: var(--bm-i-verified); }
#obsah .pd-trust a:nth-child(2) { --bm-ic: var(--bm-i-returns); }
#obsah .pd-trust a:nth-child(3) { --bm-ic: var(--bm-i-check-circle); }
#obsah .pd-trust a:nth-child(4) { --bm-ic: var(--bm-i-quality); }
#obsah .pd-info > div:nth-child(1) { --bm-ic: var(--bm-i-truck-express); }
body:where(:has(#obsah)) .ship-bar { --bm-ic: var(--bm-i-truck); }
#obsah .pd-info > div:nth-child(3) { --bm-ic: var(--bm-i-price-tag); }
#obsah .alert-open { --bm-ic: var(--bm-i-bell); }
#obsah .pd-act.wish-act { --bm-ic: var(--bm-i-heart); }
#obsah .pd-act.wish-act.on { --bm-ic: var(--bm-i-heart-on); }
#obsah .pd-actions > .pd-act:nth-child(3) { --bm-ic: var(--bm-i-print); }
#obsah .pd-actions > .pd-act:nth-child(4) { --bm-ic: var(--bm-i-comment); }
#obsah .pd-actions > .pd-act:nth-child(5) { --bm-ic: var(--bm-i-share); }
#obsah .usp-mini > div:nth-child(1) { --bm-ic: var(--bm-i-quality); }
#obsah .usp-mini > div:nth-child(2) { --bm-ic: var(--bm-i-returns); }
#obsah .usp-mini > div:nth-child(3) { --bm-ic: var(--bm-i-verified); }
#obsah .usp-mini > div:nth-child(4) { --bm-ic: var(--bm-i-truck-express); }
#obsah #ptabs.tabs button:nth-child(1) { --bm-ic: var(--bm-i-info); }
#obsah #ptabs.tabs button:nth-child(2) { --bm-ic: var(--bm-i-list); }
#obsah #ptabs.tabs button:nth-child(3) { --bm-ic: var(--bm-i-question); }
#obsah .buybar .btn, #obsah .top-picks .tp-add { --bm-ic: var(--bm-i-bag); }
#obsah .info-nav a[href="/info/doprava"] { --bm-ic: var(--bm-i-truck); }
#obsah .info-nav a[href="/info/odber"] { --bm-ic: var(--bm-i-shop); }
#obsah .info-nav a[href="/info/stavy"] { --bm-ic: var(--bm-i-grade); }
#obsah .info-nav a[href="/info/zaruka"] { --bm-ic: var(--bm-i-quality); }
#obsah .info-nav a[href="/info/vraceni"], #obsah .info-nav a[href="/info/odstoupeni-formular"] { --bm-ic: var(--bm-i-returns); }
#obsah .info-nav a[href="/info/firma"] { --bm-ic: var(--bm-i-file); }
#obsah .info-nav a[href="/info/vykup"] { --bm-ic: var(--bm-i-trade-in); }
#obsah .info-nav a[href="/info/ucet"] { --bm-ic: var(--bm-i-user); }
#obsah .info-nav a[href="/info/o-nas"] { --bm-ic: var(--bm-i-medal); }
#obsah .info-nav a[href="/info/kontakt-info"] { --bm-ic: var(--bm-i-headset); }
#obsah .info-nav a[href="/info/podminky"] { --bm-ic: var(--bm-i-list); }
#obsah .info-nav a[href="/info/reklamacni-rad"] { --bm-ic: var(--bm-i-official); }
#obsah .info-nav a[href="/info/gdpr"] { --bm-ic: var(--bm-i-lock); }
#obsah .info-nav a[href="/info/cookies"] { --bm-ic: var(--bm-i-cookie); }
#obsah .inf-hero .pills span:nth-child(1) { --bm-ic: var(--bm-i-truck); }
#obsah .inf-hero .pills span:nth-child(2) { --bm-ic: var(--bm-i-returns); }
#obsah .inf-hero .pills span:nth-child(3) { --bm-ic: var(--bm-i-shop); }
#obsah .inf-hero .pills span:nth-child(4) { --bm-ic: var(--bm-i-quality); }
#obsah .kontakt-card .k-row:nth-child(1) { --bm-ic: var(--bm-i-headset); }
#obsah .kontakt-card .k-row:nth-child(2) { --bm-ic: var(--bm-i-shop); }
#obsah .hp-why > div:nth-child(1) .ico { --bm-ic: var(--bm-i-price-tag); }
#obsah .hp-why > div:nth-child(2) .ico { --bm-ic: var(--bm-i-check-circle); }
#obsah .hp-why > div:nth-child(3) .ico { --bm-ic: var(--bm-i-quality); }
#obsah .hp-why > div:nth-child(4) .ico { --bm-ic: var(--bm-i-truck-express); }
body:where(:has(#obsah)) .modal-x, body:where(:has(#obsah)) .chat-x, body:where(:has(#obsah)) .chat-fab .i-off { --bm-ic: var(--bm-i-close); }
body:where(:has(#obsah)) .modal-head { --bm-ic: var(--bm-i-check-circle); }
body:where(:has(#obsah)) .chat-fab .i-on { --bm-ic: var(--bm-i-comment); }
/* (pass 6: BM's icon for each claim, as on their product page – free shipping their free-delivery truck, dispatch their delivery
   truck, returns their returns arrows; the sort dropdown's arrow their chevron) */
body:where(:has(#obsah)) .topbar .trust span:nth-child(1) { --bm-ic: var(--bm-i-truck); }
body:where(:has(#obsah)) .topbar .trust span:nth-child(2) { --bm-ic: var(--bm-i-truck-express); }
body:where(:has(#obsah)) .topbar .trust span:nth-child(3), #obsah .pd-info > div:nth-child(2) { --bm-ic: var(--bm-i-returns); }
#obsah select { background-image: var(--bm-p-chevron-down-ink); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; }
/* the menu's dropdown carets as their chevron */
#catnav li.dd > a::after, .catnav .dd-toggle::after { content: ""; display: inline-block; width: 16px; height: 16px; margin: 0 0 0 4px; border: 0; transform: none; background: currentColor; opacity: .7; vertical-align: -3px; -webkit-mask: var(--bm-i-chevron-down) center / contain no-repeat; mask: var(--bm-i-chevron-down) center / contain no-repeat; transition: transform .2s var(--bm-std); }
#catnav li.dd.open > a::after { transform: rotate(180deg); }
/* the quantity steppers' − and + as their glyphs */
#obsah .qty button, #obsah .pd-buy .qty button, #obsah .ci .qty button { font-size: 0; line-height: 0; }
#obsah .qty button::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--bm-i-plus) center / contain no-repeat; mask: var(--bm-i-plus) center / contain no-repeat; }
#obsah .qty button:first-child::before { -webkit-mask-image: var(--bm-i-minus); mask-image: var(--bm-i-minus); }
@media (prefers-reduced-motion: reduce) { #obsah .pd-sale::after { animation: none; } #obsah .pd-sale:hover { transform: none; } }

/* ---- pass 6: Back Market's header as it is, and the product page on their near-white ---- */

/* the page is the header's own colour (the user: "make the background same color as the header background") – white in
   light mode, the page colour in dark */
:root { --bm-canvas: var(--bg); }

@media (min-width: 761px) {
  /* their whole header stays put while the page scrolls: the 32px row of small links, the 56px logo row and the 48px menu
     row stick as one 137px block (one hairline, under the menu). Everything the shop pins under its header moves down with
     it, and anchors land below it. */
  :root { --bm-head: 137px; }
  html:where(:has(#obsah)) { scroll-padding-top: calc(var(--bm-head) + 16px); }
  body:where(:has(#obsah)) .topbar { position: sticky; top: 0; z-index: 51; }
  #header { top: 32px; border-bottom: 0; }
  #catnav { position: sticky; top: 88px; }
  body:where(:has(#obsah)) .filters, body:where(:has(#obsah)) .summary, body:where(:has(#obsah)) .acc-side, body:where(:has(#obsah)) .co-sum, body:where(:has(#obsah)) .pd-side, body:where(:has(#obsah)) .info-nav, body:where(:has(#obsah)) .paysum { top: calc(var(--bm-head) + 16px); }
  body:where(:has(#obsah)) .gallery, body:where(:has(#obsah)) .desc-side, body:where(:has(#obsah)) .acc-nav { top: calc(var(--bm-head) + 24px); }
  body:where(:has(#obsah)) .doc section { scroll-margin-top: calc(var(--bm-head) + 16px); }

  /* their widths where the page is on their line: the product page's content sits on their 1120px, so its small links, logo
     row and footer do too and the menu row takes their 1280; every other page keeps the shop's wider line for its content,
     and the header follows it there so the logo stays over the content's edge */
  body:has(#obsah .detail) { --container: 1120px; }
  body:has(#obsah .detail) #catnav { --container: 1280px; }

  /* the row of small links: 32px, 12/600/16 in ink, 24px apart, each promise's check 16px with 4px to its words */
  body:where(:has(#obsah)) .topbar .container { height: 32px; gap: 24px; }
  body:where(:has(#obsah)) .topbar .trust, body:where(:has(#obsah)) .topbar .right { gap: 24px; }
  body:where(:has(#obsah)) .topbar .trust span { gap: 0; line-height: 16px; }
  body:where(:has(#obsah)) .topbar a { line-height: 16px; }

  /* the logo row: 56px, the logo 32px from the field, the field filling the row, then their 8px-apart actions */
  #header .header-inner { height: 56px; gap: 8px; }
  #header a.logo { gap: 8px; margin-right: 24px; }
  #header .logo-mark { width: auto; height: 30px; }
  #header .logo-text { font-size: 22px; line-height: 24px; }
  #header .search { max-width: none; }
  #header .header-actions { gap: 8px; margin-left: 0; }
  /* account and cart as their bare 40px round icons (the words stay for screen readers); the language as their text link –
     16/600, 8px 12px, underlined under the pointer */
  #header #accLink > span, #header .icon-link[href="/cart"] > span:not(.cart-count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #header .icon-link { width: 40px; min-width: 40px; padding: 0; transition: background-color .3s var(--bm-in); }
  #header .lang-btn { padding: 8px 12px; font-size: 16px; font-weight: 600; line-height: 24px; text-underline-offset: 3px; }
  #header .lang-btn:hover { background: transparent; text-decoration: underline; }

  /* the menu row: 48px, 14/400 links 32px apart with no carets, the deals link first; under the pointer a link turns semibold
     (drawn with a hairline stroke so nothing shifts) and gets their 2px ink line lying on the row's hairline, at once, while its
     colour eases over 700ms */
  #catnav ul { flex-wrap: nowrap; align-items: stretch; gap: 32px; height: 48px; min-height: 48px; }
  #catnav li { display: flex; }
  #catnav li:has(> a.pill.sale) { order: -1; }
  #catnav li > a:not(.pill), #catnav a.pill.sale { display: flex; align-items: center; height: 100%; margin: 0; padding: 4px 0 0; border: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 400; line-height: 20px; white-space: nowrap; text-decoration: none; transition: color .7s ease-in-out; }
  #catnav li > a:not(.pill)::before { left: 0; right: 0; bottom: -1px; transition: none; }
  #catnav li.dd > a::after { display: none; }
  #catnav li > a:not(.pill):hover, #catnav li.dd.open > a { color: color-mix(in srgb, var(--text) 82%, var(--bg)); -webkit-text-stroke: .4px currentColor; }
  #catnav a.pill.sale { position: relative; gap: 4px; }
  #catnav a.pill.sale::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: currentColor; opacity: 0; }
  #catnav a.pill.sale:hover { background: none; color: var(--brand); text-decoration: none; -webkit-text-stroke: .4px currentColor; }
  #catnav a.pill.sale:hover::after { opacity: 1; }
  /* their menu panel opens as a wipe from the top: 300ms, decelerating */
  #catnav li.dd.mega > .dd-panel { animation: bm-wipe .3s cubic-bezier(0, 0, .2, 1); }
}
@media (min-width: 761px) and (max-width: 1180px) { #catnav ul { gap: 20px; } }
@media (min-width: 761px) and (max-width: 960px) { #catnav ul { gap: 12px; } #catnav li > a:not(.pill), #catnav a.pill.sale { font-size: 13px; } }
@media (min-width: 761px) and (max-width: 840px) { #catnav ul { gap: 8px; } #catnav li > a:not(.pill), #catnav a.pill.sale { font-size: 12px; } }
@keyframes bm-wipe { from { clip-path: inset(0 -100vmax 100% -100vmax); } to { clip-path: inset(0 -100vmax 0 -100vmax); } }

/* in dark mode too the row of small links is the header's colour (the shop's dark layer paints it a shade lighter) */
html[data-theme="dark"] body:where(:has(#obsah)) .topbar { background: var(--bg); border-bottom: 0; }

/* the field's words as theirs: "Search" in ink, then a product name that sweeps in from the left behind a band of colour (our
   brand, then its dark shade on the next name), stays 2.5s and sweeps out – 1.5s in, 0.5s out, a new name every 5s, the
   names the shop's own placeholder gives. The placeholder stays on the field for screen readers, drawn transparent; the words
   step aside as soon as there's text in the field. The category picker goes, as on theirs. */
#header .search { display: grid; grid-template-columns: 32px auto minmax(0, 1fr); grid-template-rows: 40px; align-items: center; column-gap: 4px; padding: 0 12px 0 4px; }
#header .search select { display: none; }
#header .search button { grid-area: 1 / 1; order: 0; }
#header .search input { grid-area: 1 / 2 / 2 / 4; min-width: 0; padding: 0 4px; }
#header .search input::placeholder, #header .search input:focus::placeholder { color: transparent; }
#header .search::before, #header .search::after { grid-row: 1; z-index: 1; min-width: 0; overflow: hidden; color: var(--text); font-size: 16px; font-weight: 400; line-height: 24px; white-space: nowrap; pointer-events: none; }
#header .search::before { content: "Search"; grid-column: 2; padding-left: 4px; }
:root:lang(cs) #header .search::before { content: "Hledat"; }
:root:lang(de) #header .search::before { content: "Suchen"; }
:root:lang(fr) #header .search::before { content: "Rechercher"; }
:root:lang(es) #header .search::before { content: "Buscar"; }
:root:lang(tl) #header .search::before, :root:lang(fil) #header .search::before { content: "Maghanap"; }
#header .search::after {
  content: "RTX 5070"; grid-column: 3; justify-self: start; max-width: 100%; margin-left: 3px; text-overflow: ellipsis;
  background: linear-gradient(to left, transparent 0, transparent 33%, var(--brand) 50%, var(--text) 66%, var(--text) 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: bm-ph-word 15s linear infinite, bm-ph-sweep 15s linear infinite;
}
#header .search:not(:has(input:placeholder-shown))::before, #header .search:not(:has(input:placeholder-shown))::after { visibility: hidden; }
@keyframes bm-ph-word {
  0%, 33.33% { content: "RTX 5070"; background-image: linear-gradient(to left, transparent 0, transparent 33%, var(--brand) 50%, var(--text) 66%, var(--text) 100%); }
  33.34%, 66.66% { content: "MacBook Air"; background-image: linear-gradient(to left, transparent 0, transparent 33%, var(--brand-dark, var(--brand)) 50%, var(--text) 66%, var(--text) 100%); }
  66.67%, 100% { content: "iPhone 17"; background-image: linear-gradient(to left, transparent 0, transparent 33%, var(--brand) 50%, var(--text) 66%, var(--text) 100%); }
}
@keyframes bm-ph-sweep {
  0%, 33.333%, 66.667% { background-position: 100% 0; animation-timing-function: ease; }
  10%, 43.333%, 76.667% { background-position: 0 0; }
  26.667%, 60%, 93.333% { background-position: 0 0; animation-timing-function: ease; }
  30%, 63.333%, 96.667%, 100% { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) { #header .search::after { animation: none; background-position: 0 0; } #catnav li.dd.mega > .dd-panel { animation: none; } }

/* the product page's pictures straight on the page like theirs: no white cards behind the photo or the thumbnails (the
   white-backed photos multiply into the page colour), the photo filling its 448px square, thumbnails 104px with no marker.
   Dark mode keeps the white plates – multiplying there would black the photos out. */
html:not([data-theme="dark"]) #obsah .detail .main-img, html:not([data-theme="dark"]) #obsah .thumbs button { background: transparent; box-shadow: none; }
html:not([data-theme="dark"]) #obsah .detail .main-img img, html:not([data-theme="dark"]) #obsah .thumbs button img { mix-blend-mode: multiply; }
/* (the gallery sticks, and a sticky box is its own stacking context – it carries the page colour so the multiply has something
   to fall on) */
html:not([data-theme="dark"]) #obsah .detail .gallery { background: var(--bm-canvas); }
html:not([data-theme="dark"]) #obsah .thumbs button:hover, html:not([data-theme="dark"]) #obsah .thumbs button.active { box-shadow: none; }
#obsah .detail .main-img { padding: 0; }
#obsah .thumbs button { padding: 0; overflow: hidden; }
#obsah .thumbs button img { border-radius: 12px; }
/* one column below 1101px: the same thumbnails-and-photo pair, centred, the photo at most 560px (it ran the full width) */
@media (min-width: 761px) and (max-width: 1100px) {
  #obsah .gallery:has(> .thumbs) { display: grid; grid-template-columns: 104px minmax(0, 560px); justify-content: center; gap: 8px; align-items: start; }
  #obsah .gallery:has(> .thumbs) > .main-img { grid-column: 2; grid-row: 1; }
  #obsah .gallery > .thumbs { grid-column: 1; grid-row: 1; flex-direction: column; gap: 8px; margin-top: 0; }
  #obsah .gallery:not(:has(> .thumbs)) > .main-img { max-width: 560px; margin-inline: auto; }
}

@media (min-width: 761px) {
  /* their product bar takes the header's place: once it slides in (past the add-to-cart button) the header lets go and
     scrolls away with the page, so only the 79px bar is on top; the photo column follows it up. The accessories' total bar
     hides the product bar (the shop's rule), and then the header stays. */
  #obsah .buybar:not([hidden]) { min-height: 79px; }
  body:not(.has-acc-bar):has(#obsah .buybar:not([hidden])) .topbar, body:not(.has-acc-bar):has(#obsah .buybar:not([hidden])) #header,
  body:not(.has-acc-bar):has(#obsah .buybar:not([hidden])) #catnav { position: relative; top: auto; }
  body:where(:has(#obsah)) .gallery { transition: top .3s var(--bm-std); }
  body:not(.has-acc-bar):has(#obsah .buybar:not([hidden])) .gallery { top: 103px; }
  /* the add-to-cart button at their width; buy-now level with it (the shop sets an inline 8px top margin and full width on it) */
  #obsah .pd-buy > .pd-cta { min-width: 205px; }
  #obsah .detail .pd-buy > .btn-outline.btn-block { margin: 0 !important; }
}

/* ======================================================================================================== footer */

/* Back Market's footer: the page colour under a hairline instead of the dark band, ink headings at 20/600, 14px ink links
   whose underline fades in under the pointer, the newsletter field as their 48px input (a hairline that turns into a
   1.5px ink line on focus, the envelope inside on the right with a grey well behind it under the pointer) next to a 48px
   primary button, the appearance switch as chips */
body:where(:has(#obsah)) .footer { border-top: 1px solid var(--bm-line); background: var(--bg); color: var(--text); font-size: 14px; line-height: 20px; }
html[data-theme="dark"] body:where(:has(#obsah)) .footer { background: var(--bg); }
body:where(:has(#obsah)) .footer h4 { margin-bottom: 16px; color: var(--text); font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -.01em; }
body:where(:has(#obsah)) .footer .footer-top h4 { margin-bottom: 4px; font-size: 22px; line-height: 32px; }
body:where(:has(#obsah)) .footer p.muted { color: var(--muted); }
body:where(:has(#obsah)) .footer .footer-top, body:where(:has(#obsah)) .footer .theme-bar, body:where(:has(#obsah)) .footer .fine { border-color: var(--bm-line); }
body:where(:has(#obsah)) .footer ul { gap: 8px; }
body:where(:has(#obsah)) .footer li a { color: var(--text); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .2s var(--bm-in); }
body:where(:has(#obsah)) .footer li a:hover { color: var(--text); text-decoration-color: currentColor; }
body:where(:has(#obsah)) .footer .logo-text, body:where(:has(#obsah)) .footer .logo-text i, body:where(:has(#obsah)) .footer .contact { color: var(--text); }
body:where(:has(#obsah)) .footer .logo-text b { color: var(--brand); }
/* the field: Back Market draws the envelope and its well inside the input; here they are the form's own pseudo-elements,
   slotted between the field and the button by flex order and pulled back over the field's right end by negative margins
   that add up to nothing, so the field keeps its width */
body:where(:has(#obsah)) .footer .newsletter input { height: 48px; padding: 0 44px 0 12px; border: 1px solid color-mix(in srgb, var(--text) 18%, var(--bg)); border-radius: 6px; outline: 0; background: var(--bg); color: var(--text); font-size: 16px; line-height: 24px; transition: border-color .2s var(--bm-std), box-shadow .2s var(--bm-std); }
body:where(:has(#obsah)) .footer .newsletter input::placeholder { color: var(--muted); opacity: 1; }
body:where(:has(#obsah)) .footer .newsletter input:focus { border-color: var(--text); box-shadow: inset 0 0 0 .5px var(--text); }
body:where(:has(#obsah)) .footer .newsletter::after { content: ""; order: 1; flex: none; align-self: center; width: 40px; height: 40px; margin: 0 0 0 -52px; border-radius: 6px; pointer-events: none; transition: background-color .2s var(--bm-std); }
body:where(:has(#obsah)) .footer .newsletter::before { content: ""; order: 2; flex: none; align-self: center; width: 20px; height: 20px; margin: 0 14px 0 -38px; background: var(--text); pointer-events: none; -webkit-mask: var(--bm-i-envelope) center / contain no-repeat; mask: var(--bm-i-envelope) center / contain no-repeat; }
body:where(:has(#obsah)) .footer .newsletter:has(input:hover)::after { background: var(--bm-mid); }
body:where(:has(#obsah)) .footer .newsletter .btn { order: 3; height: 48px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--brand-button); box-shadow: none; color: var(--brand-contrast); font-size: 16px; font-weight: 600; line-height: 24px; transition: background-color .2s var(--bm-in), color .2s var(--bm-in); }
body:where(:has(#obsah)) .footer .newsletter .btn:hover { background: var(--brand-button-hover); color: var(--brand-contrast); }
body:where(:has(#obsah)) .footer .theme-bar b { color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; }
body:where(:has(#obsah)) .footer .theme-bar span { color: var(--muted); font-size: 14px; line-height: 20px; }
body:where(:has(#obsah)) .footer .theme-choice button { height: 32px; gap: 6px; padding: 0 12px; border: 0; border-radius: 9999px; background: var(--bm-mid); color: var(--text); font-size: 14px; font-weight: 400; line-height: 16px; transition: background-color .225s var(--bm-std), color .225s var(--bm-std); }
body:where(:has(#obsah)) .footer .theme-choice button:hover { border-color: transparent; background: var(--bm-mid-hover); color: var(--text); }
body:where(:has(#obsah)) .footer .theme-choice button.on { border-color: transparent; background: var(--brand-soft); color: var(--brand-ink, var(--text)); }
body:where(:has(#obsah)) .footer .theme-choice button svg { width: 16px; height: 16px; }
body:where(:has(#obsah)) .footer .fine { color: var(--muted); font-size: 12px; line-height: 16px; }

/* ---- pass 6: the footer laid out as theirs ---- */

/* their newsletter line is ink, not grey, and so is the field's label (the placeholder here); the field greys a touch under
   the pointer, the envelope's well with it */
body:where(:has(#obsah)) .footer .footer-top p.muted { color: var(--text); font-size: 14px; line-height: 20px; }
body:where(:has(#obsah)) .footer .newsletter input::placeholder { color: var(--text); }
body:where(:has(#obsah)) .footer .newsletter input { border-color: var(--bm-field); transition: border-color .2s var(--bm-std), box-shadow .2s var(--bm-std), background-color .2s var(--bm-std); }
body:where(:has(#obsah)) .footer .newsletter input:hover, body:where(:has(#obsah)) .footer .newsletter:has(input:hover)::after { background: color-mix(in srgb, var(--text) 4%, var(--bg)); }
body:where(:has(#obsah)) .footer .newsletter input:focus { background: var(--bg); }

@media (min-width: 761px) {
  /* their footer: 32px above and below, on the page's line; the newsletter row first – the title and its line on the
     left, the field and the button on the right (530px), no hairline under it; one hairline above the bottom rows */
  body:where(:has(#obsah)) .footer { margin-top: 0; padding: 32px 0; }
  body:where(:has(#obsah)) .footer .footer-top { margin: 0 0 32px; padding: 0; border-bottom: 0; }
  body:where(:has(#obsah)) .footer .footer-grid { padding: 0; }
  body:where(:has(#obsah)) .footer ul { gap: 8px; }
  body:where(:has(#obsah)) .footer .theme-bar { margin-top: 20px; padding: 20px 0 0; border-top: 1px solid var(--bm-line); }
  body:where(:has(#obsah)) .footer .fine { padding: 20px 0 0; border-top: 0; }
  body:where(:has(#obsah)) .footer .fine > span:first-child { color: var(--text); font-size: 16px; line-height: 24px; }
  body:where(:has(#obsah)) .footer .fine > span + span { align-self: center; font-size: 14px; line-height: 20px; }
}
@media (min-width: 1101px) {
  body:where(:has(#obsah)) .footer .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 530px); grid-template-rows: auto auto; column-gap: 64px; row-gap: 0; align-items: start; }
  body:where(:has(#obsah)) .footer .footer-top > div:has(> form.newsletter) { display: contents; }
  body:where(:has(#obsah)) .footer .footer-top h4 { grid-column: 1; grid-row: 1; margin: 0; }
  body:where(:has(#obsah)) .footer .footer-top p.muted { grid-column: 1; grid-row: 2; margin: 0; }
  body:where(:has(#obsah)) .footer .footer-top form.newsletter { grid-column: 2; grid-row: 1 / span 2; width: 100%; max-width: none; margin: 0; }
  /* the link columns at their 160px with 32px between (six to the row, long names wrapping like theirs): the categories, the
     customer service, the information and the shipping-and-payment logos each in a column of their own, the brand mark in
     the last one where they keep their badges */
  body:where(:has(#obsah)) .footer .footer-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: 32px; row-gap: 0; align-items: start; }
  /* their column titles sit on one line (ours are longer than theirs: they run on into the gap, the column after the logos' is empty) */
  body:where(:has(#obsah)) .footer .footer-grid h4 { margin-top: 0; white-space: nowrap; }
  body:where(:has(#obsah)) .footer .footer-grid > div:not(:has(> a.logo)):not(:has(> .logos)) { grid-row: 1 / -1; }
  body:where(:has(#obsah)) .footer .footer-grid > div:has(> .logos) { display: contents; }
  body:where(:has(#obsah)) .footer .footer-grid > div:has(> .logos) > h4:nth-of-type(2) { grid-column: 3; grid-row: 1; margin-top: 0 !important; } /* (the shop spaces it with an inline margin) */
  body:where(:has(#obsah)) .footer .footer-grid > div:has(> .logos) > ul { grid-column: 3; grid-row: 2 / -1; }
  body:where(:has(#obsah)) .footer .footer-grid > div:has(> .logos) > h4:nth-of-type(1) { grid-column: 4; grid-row: 1; }
  body:where(:has(#obsah)) .footer .footer-grid > div:has(> .logos) > .logos:nth-of-type(1) { grid-column: 4; grid-row: 2; }
  body:where(:has(#obsah)) .footer .footer-grid > div:has(> .logos) > .logos:nth-of-type(2) { grid-column: 4; grid-row: 3; margin-top: 4px; }
  body:where(:has(#obsah)) .footer .footer-grid > div:has(> a.logo) { grid-column: 6; grid-row: 1 / -1; }
  /* the payment and courier marks at their small size: 24px plates, 4px apart */
  body:where(:has(#obsah)) .footer .logos { gap: 4px; }
  body:where(:has(#obsah)) .footer .logos .plogo, body:where(:has(#obsah)) .footer .logos .plogo-img:not(.plogo-card):not(.plogo-odber) { width: auto; height: 24px; padding: 2px 4px; }
  body:where(:has(#obsah)) .footer .logos .plogo img { width: auto; height: 100%; max-width: 64px; object-fit: contain; }
}

/* no dark mode any more (the user: "remove the dark mode"): the appearance switches go – the footer's and the account
   page's – and the preview/push drops any saved dark choice; the hairline the switch bar carried moves to the bottom row */
body:where(:has(#obsah)) .footer .theme-bar, #obsah :has(> h3 + .card-lead + .theme-choice) { display: none; }
@media (min-width: 761px) { body:where(:has(#obsah)) .footer .fine { margin-top: 20px; padding: 20px 0 0; border-top: 1px solid var(--bm-line); } }

/* ---- pass 6: the cart as Back Market's funnel (their cart and address steps, read logged in) ---- */

/* their funnel drops the shop around it: a 60px white bar with only the logo, 32px in from the left with a hairline under it
   (it scrolls away), no row of small links, menu row or footer; the page is their light canvas, and on wide screens the
   summary has its own grey panel down the right edge (440px) */
:root { --bm-funnel: color-mix(in srgb, var(--text) 3%, var(--bg)); --bm-funnel-panel: color-mix(in srgb, var(--text) 6%, var(--bg)); }
body:has(#obsah .co) { background: var(--bm-funnel); }
html:has(#obsah .co) { scroll-padding-top: 24px; }
body:has(#obsah .co) .topbar, body:has(#obsah .co) #catnav, body:has(#obsah .co) .footer,
body:has(#obsah .co) #header .search, body:has(#obsah .co) #header .header-actions { display: none; }
body:has(#obsah .co) #header { position: relative; top: auto; border-bottom: 1px solid var(--bm-line); background: var(--bg); }
body:has(#obsah .co) #header .header-inner { width: auto; max-width: none; height: 60px; margin: 0; padding: 0 32px; }
body:has(#obsah .co) #header .logo-mark { width: auto; height: 24px; }
body:has(#obsah .co) #header .logo-text { font-size: 18px; line-height: 20px; }
body:has(#obsah .co) #obsah > section.page-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body:has(#obsah .co) .co-sum { top: 24px; }

/* their step bar: the step's number out of the total and its name, centred over a 2px line filled in ink up to the step */
#obsah .co-steps { display: flex; justify-content: center; align-items: center; gap: 0; height: 48px; margin: 24px 0 0; padding: 0;
  background: linear-gradient(var(--text), var(--text)) 0 100% / var(--bm-step, 33.333%) 2px no-repeat, linear-gradient(var(--bm-line), var(--bm-line)) 0 100% / 100% 2px no-repeat; }
#obsah .co-steps:has(> li:nth-child(2).on) { --bm-step: 66.667%; }
#obsah .co-steps:has(> li:nth-child(3).on) { --bm-step: 100%; }
#obsah .co-steps li { display: none; }
#obsah .co-steps li::before { display: none; }
#obsah .co-steps li.on:not(:has(+ li.on)), #obsah .co-steps:not(:has(> li.on)) li:first-child { display: flex; align-items: center; gap: 4px; color: var(--text); font-size: 16px; font-weight: 400; line-height: 24px; }
#obsah .co-steps li b, #obsah .co-steps li.on b, #obsah .co-steps li.done b { display: inline; width: auto; height: auto; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
#obsah .co-steps li b::after { content: "/3"; }

/* their section titles sit on the canvas above each white card: 20/600, 24px over the card (drawn here by lifting the
   card's own title out of it); no step numbers */
#obsah .co-card { margin-top: 52px; padding: 24px; }
#obsah .co-card + .co-card { margin-top: 92px; }
#obsah .co-main > .co-card:first-child { margin-top: 100px; }
#obsah .co-card > h2 { margin: -76px -24px 48px; color: var(--text); font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: 0; }
#obsah .co-card > h2 .n { display: none; }
#obsah .co-card > h2 small { font-size: 14px; line-height: 20px; }

/* their cart line: the photo 110px, the name 16/600 with their outlined grade badge under it, the price 20/600 top right, the
   old price struck under it, then the quantity (their 32px control) and their outlined red "remove" */
#obsah .ci { grid-template-columns: 110px minmax(0, 1fr) auto auto; grid-template-areas: "img info price price" "img info old old" "img info qty rm"; grid-template-rows: auto auto 1fr; column-gap: 16px; row-gap: 4px; align-items: start; }
#obsah .ci-img { grid-area: img; width: 110px; height: 110px; padding: 0; background: transparent; }
#obsah .ci-info { grid-area: info; }
/* the photos are square shots with the product in the middle, so text started at the photo's top edge read as sitting above the
   product: the name block and the photo centre on each other instead (whichever is shorter moves) */
@media (min-width: 761px) { #obsah .ci-img, #obsah .ci-info { align-self: center; } }
#obsah .ci-price { display: contents; }
#obsah .ci-price > b { grid-area: price; justify-self: end; color: var(--text); font-size: 20px; font-weight: 600; line-height: 28px; }
#obsah .ci-price > s { grid-area: old; justify-self: end; color: var(--muted); font-size: 14px; line-height: 20px; }
#obsah .ci .ci-qty { grid-area: qty; align-self: end; height: 32px; border-radius: 6px; }
#obsah .ci .ci-qty button { width: 32px; }
#obsah .ci .ci-qty span { min-width: 20px; font-size: 14px; font-weight: 600; text-align: center; }
#obsah .ci-rm { grid-area: rm; align-self: end; height: 32px; margin: 0 0 0 4px; padding: 0 11px; border: 1px solid var(--red); border-radius: 6px; background: transparent; color: var(--red); font-size: 14px; font-weight: 600; line-height: 20px; text-decoration: none; transition: background-color .2s var(--bm-in); }
#obsah .ci-rm:hover { background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--red); text-decoration: none; }
@media (max-width: 760px) {
  /* on a phone their line stacks: the photo (80px) beside the name, the price under the name, quantity and remove along the bottom */
  #obsah .ci { grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-areas: "img info info" "img price price" "img old old" "qty qty rm"; grid-template-rows: auto auto 1fr auto; row-gap: 4px; }
  #obsah .ci-img { width: 80px; height: 80px; }
  #obsah .ci-price > b, #obsah .ci-price > s { justify-self: start; }
  #obsah .ci .ci-qty { justify-self: start; margin-top: 12px; }
  #obsah .ci-rm { margin-top: 12px; }
}
#obsah .ci-info .tag { height: 20px; padding: 0 4px; border: 1px solid color-mix(in srgb, var(--text) 35%, var(--bg)); border-radius: 2px; background: transparent; color: var(--text); font-size: 14px; font-weight: 600; line-height: 18px; -webkit-mask: none; mask: none; }

/* their fields: the label inside the 48px box – 12px grey at the top once there's something in it (or the caret), 16px ink
   in the middle like a placeholder while it's empty, easing between the two in 200ms */
#obsah .co .form > div { position: relative; }
#obsah .co .form > div > label:not(.co-check) { position: absolute; top: 5px; left: 13px; right: 13px; z-index: 1; margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; transition: top .2s var(--bm-std), font-size .2s var(--bm-std), line-height .2s var(--bm-std), color .2s var(--bm-std); }
#obsah .co .form > div > input:not([type="checkbox"]):not([type="radio"]) { padding: 14px 12px 0; }
#obsah .co .form > div:has(> input[value=""]:not(:focus)) > label:not(.co-check) { top: 12px; color: var(--text); font-size: 16px; line-height: 24px; }
/* a field's own hint (the phone's example number) only shows once the label has moved up */
#obsah .co .form input::placeholder { color: transparent; transition: color .2s var(--bm-std); }
#obsah .co .form input:focus::placeholder { color: var(--muted); }

/* their summary: the title on the panel above a white card, ink labels, the total at 16/600, the payment marks boxed in a
   hairline */
#obsah .co-sum > h2 { margin: -76px -24px 48px; color: var(--text); font-size: 20px; font-weight: 600; line-height: 28px; }
#obsah .cs-line { color: var(--text); }
#obsah .cs-total b { font-family: inherit; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; }
#obsah .cs-logos { justify-content: center; gap: 4px; margin-top: 16px; padding: 12px; border: 1px solid var(--bm-line); border-radius: 8px; }

@media (min-width: 1101px) {
  body:has(#obsah .co) { background: linear-gradient(90deg, var(--bm-funnel) calc(100% - 440px), var(--bm-funnel-panel) 0); }
  /* the steps and the cards in an 820px column centred left of the panel, the summary card in the panel (48px from its top
     edge counting its title, 24px from its sides) */
  #obsah section.container:has(> .co) { display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto 1fr; width: 100%; max-width: none; margin: 0; padding: 0; }
  #obsah section.container:has(> .co) > .co { display: contents; }
  #obsah .co-steps { grid-column: 1; grid-row: 1; justify-self: center; width: min(820px, 100% - 48px); }
  #obsah .co-main { grid-column: 1; grid-row: 2; justify-self: center; width: min(820px, 100% - 48px); padding: 0 0 64px; }
  #obsah .co-sum { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 100px 24px 24px; }
}

/* ---- pass 6: every page on the new design (the user: "make sure every component of the site matches our new design") ---- */

/* the wishlist in the header: their heart in ink in the same 40px round button as the account and the cart, its count in the
   cart's badge (the shop draws a red heart with a red count) */
#header .wish-link-h { color: var(--text); }
#header .wish-link-h > svg { display: none; }
#header .wish-link-h::before { content: ""; flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--bm-i-heart) center / contain no-repeat; mask: var(--bm-i-heart) center / contain no-repeat; }
#header .wish-link-h .cart-count { background: var(--brand); color: var(--brand-contrast); }

/* compare: the table straight on the white page – no box, no grey label column – with hairlines between rows, labels in grey,
   values in ink and the groups as 20/600 titles; each product heads its column like a product card (the photo, the name 16/600,
   its ticket badge, the price 22/600 – green where it's the better deal – over the struck one, stock and delivery at 14px, the
   cards' outlined "+ Add to cart"); differences in a soft tint of our brand; remove as a 32px round ghost button */
#obsah .cmp-table-wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#obsah .cmp-table th, #obsah .cmp-table td { padding: 12px 16px; border-left: 0; border-bottom: 1px solid var(--bm-line); }
#obsah .cmp-table thead th, #obsah .cmp-table thead td { padding: 16px 16px 24px; border-left: 0; background: none; text-align: left; vertical-align: top; }
#obsah .cmp-table thead .corner { padding-left: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 400; }
#obsah .cmp-table thead img { display: block; width: 100%; max-width: 180px; height: 160px; margin: 0 0 16px; object-fit: contain; mix-blend-mode: multiply; }
#obsah .cmp-table thead .nm { display: block; margin: 0 40px 8px 0; color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; }
#obsah .cmp-table thead .nm:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#obsah .cmp-table thead .tags { justify-content: flex-start; margin-bottom: 12px; }
#obsah .cmp-table thead .tags .tag, #obsah .grade-badge {
  --tk: var(--text);
  display: inline-flex; align-items: center; min-width: 0; height: 22px; padding: 0 9px; border: 0; border-radius: 3px;
  background: color-mix(in srgb, var(--tk) 17%, var(--bm-card)); color: color-mix(in srgb, var(--tk) 80%, #000);
  font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0; text-transform: none;
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 3.5px, #000 4px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 3.5px, #000 4px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, #0000 3.5px, #000 4px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 3.5px, #000 4px) right / 51% 100% no-repeat;
}
#obsah .cmp-table thead .tags .tag-new, #obsah .cmp-table thead .tags .tag-used { --tk: var(--green); }
#obsah .grade-badge, #obsah .grade-box.big .grade-badge { --tk: var(--orange); }
#obsah .cmp-table thead .pr { display: flex; flex-direction: column-reverse; align-items: flex-start; margin-bottom: 8px; }
#obsah .cmp-table thead .pr strong { color: var(--text); font-size: 22px; font-weight: 600; line-height: 32px; }
#obsah .cmp-table .best, #obsah .cmp-table thead .pr strong.best { color: var(--bm-deal-ink) !important; }
#obsah .cmp-table thead .pr s { color: var(--muted); font-size: 14px; line-height: 20px; }
#obsah .cmp-table thead .stock { font-size: 14px; font-weight: 600; line-height: 20px; }
#obsah .cmp-table thead .muted { color: var(--muted); font-size: 14px !important; line-height: 20px; } /* (the shop sizes it inline) */
#obsah .cmp-table thead .btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 16px !important; padding: 0 12px; border: 1px solid var(--text); border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; transition: background-color .2s var(--bm-in); }
#obsah .cmp-table thead .btn:hover { background: var(--bm-ghost-hover); color: var(--text); }
#obsah .cmp-table thead .btn::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--bm-i-plus) center / contain no-repeat; mask: var(--bm-i-plus) center / contain no-repeat; }
#obsah .cmp-table .rm { top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 9999px; background: var(--bg); color: var(--text); transition: background-color .2s var(--bm-in); }
#obsah .cmp-table .rm:hover { border: 0; background: var(--bm-mid); color: var(--text); }
#obsah .cmp-table .rm > svg { display: none; }
#obsah .cmp-table .rm::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--bm-i-cross) center / contain no-repeat; mask: var(--bm-i-cross) center / contain no-repeat; }
#obsah .cmp-table tbody th { width: 240px; padding-left: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 20px; }
#obsah .cmp-table tbody td { color: var(--text); font-size: 14px; line-height: 20px; }
#obsah .cmp-table tr.grp th { padding: 40px 0 12px; background: none; color: var(--text); font-family: var(--font-heading, inherit); font-size: 20px; font-weight: 600; line-height: 28px; text-transform: none; }
#obsah .cmp-table tbody tr:first-child.grp th { padding-top: 24px; }
#obsah .cmp-table tr.diff td { background: color-mix(in srgb, var(--brand) 6%, var(--bg)); }
#obsah .cmp-tools { margin-bottom: 16px; }
#obsah .cmp-tools .switch { gap: 8px; color: var(--text); font-size: 14px; line-height: 20px; }
#obsah .cmp-tools .switch input { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--text); border-radius: 6px; background: var(--bg) center / 16px no-repeat; cursor: pointer; }
#obsah .cmp-tools .switch input:checked { border-color: transparent; background-color: var(--text); background-image: var(--bm-p-check-light); }
#obsah .cmp-tools .btn { height: 40px; padding: 0 16px; border: 1px solid var(--text); border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); font-size: 14px; font-weight: 600; }
#obsah .cmp-tools .btn:hover { background: var(--bm-ghost-hover); color: var(--text); }

@media (max-width: 760px) {
  /* on a phone the comparison keeps its sideways scroll, with a narrow label column and smaller product heads */
  #obsah .cmp-table tbody th, #obsah .cmp-table thead .corner { width: 112px; min-width: 112px; padding-right: 12px; }
  #obsah .cmp-table { width: auto; min-width: 0; }
  #obsah .cmp-table thead th:not(.corner) { width: 200px; min-width: 200px; }
  #obsah .cmp-table thead img { height: 112px; }
  #obsah .cmp-table thead .nm { margin-right: 36px; font-size: 14px; line-height: 20px; }
  #obsah .cmp-table thead .pr strong { font-size: 18px; line-height: 24px; }
  #obsah .cmp-table thead .btn { height: 40px; font-size: 14px; }
  #obsah .cmp-table tr.grp th { padding-top: 32px; font-size: 18px; line-height: 24px; }
  /* the phone header keeps the logo and every icon on one row (it broke onto a third once the wishlist heart showed): the
     language as its flag alone, the icons in 36px wells */
  #header .lang-btn { gap: 0; padding: 4px; font-size: 0; }
  #header .lang-btn::after { display: none; }
  #header .header-actions .icon-link, #header .menu-toggle { width: 36px; min-width: 36px; height: 36px; padding: 0; justify-content: center; }
}

/* tables in the info pages as hairline tables: no box and no grey head – the head row in 14/600 ink, every row on a hairline */
#obsah .doc table { overflow: visible; border: 0; border-radius: 0; border-collapse: collapse; background: transparent; }
#obsah .doc table th, #obsah .doc table td { padding: 12px 16px 12px 0; border: 0; border-bottom: 1px solid var(--bm-line); background: none; text-align: left; }
#obsah .doc table th { color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; text-transform: none; letter-spacing: 0; }
#obsah .doc table td { color: var(--text); font-size: 14px; line-height: 20px; }

/* every form's fields as the checkout's: the 48px box with the label inside – 12px grey at the top once there's something in it or
   the caret, 16px ink in the middle while empty – and a field's own example text only once the label has moved up; text areas
   keep the label small at the top */
#obsah .fld:has(> label + input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), > label + textarea, > label + select, > label + .pw-wrap) { position: relative; }
#obsah .fld > label:has(+ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), + textarea, + select, + .pw-wrap) { position: absolute; top: 5px; left: 13px; right: 13px; z-index: 1; margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; transition: top .2s var(--bm-std), font-size .2s var(--bm-std), line-height .2s var(--bm-std), color .2s var(--bm-std); }
#obsah .fld > label + input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { height: 48px; padding: 14px 12px 0; }
#obsah .fld > label + select { height: 48px; padding-top: 14px; }
#obsah .fld > label + .pw-wrap > input { height: 48px; padding: 14px 64px 0 12px; }
#obsah .fld > label + textarea { padding: 24px 12px 8px; }
/* (the doubled class outranks the rule above, whose :has() counts three attribute tests) */
#obsah .fld.fld:has(> label + input[value=""]:not(:focus), > label + .pw-wrap > input[value=""]:not(:focus)) > label { top: 12px; color: var(--text); font-size: 16px; line-height: 24px; }
#obsah .fld > label + input::placeholder { color: transparent; transition: color .2s var(--bm-std); }
#obsah .fld > label + input:focus::placeholder { color: var(--muted); }

/* the trade-in steps: their titles float to sit inside the card, so whatever follows has to clear them (the category chips, the
   condition picks and the contact fields were squeezed into the zero width beside the title and spilled out of the cards) */
#obsah .ti-form legend + * { clear: both; }

/* an order that can't be loaded: its two ways out side by side as 48px secondary buttons */
#obsah .trk-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#obsah .trk-acts .btn { width: auto; height: 48px; padding: 0 24px; border: 1px solid var(--text); border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); font-size: 16px; font-weight: 600; }
#obsah .trk-acts .btn:hover { background: var(--bm-ghost-hover); color: var(--text); }

/* ---- pass 6: spacing between carousels as theirs, the filter column's scrolling ---- */

/* their carousels breathe: about 60px from the bottom of one row of cards to the next title (ours were 46px). The home's
   sections open up to that (cards' shadow room 20px + 44px), the product page's accessory groups drop the hairline between
   them and sit 60px apart, their titles at 18/600 like row titles */
#obsah .hp-sec { padding-top: 44px; }
@media (max-width: 760px) { #obsah .hp-sec { padding-top: 36px; } }
#accSec .acc-g { padding: 0; border-bottom: 0; }
#accSec .acc-g + .acc-g { margin-top: 52px; }
#accSec .acc-h { margin-bottom: 16px; }
#accSec .acc-gh { min-height: 48px; font-size: 18px; font-weight: 600; line-height: 24px; }

@media (min-width: 1101px) {
  /* the filter column scrolls on its own: its scrollbar gets a 16px lane of its own instead of lying over the counts, the column
     fits under the new header (it ran 43px past the bottom of the window), and what scrolls up under the sticky "Filter" head
     fades out over 16px instead of showing cut-off half lines */
  #obsah .filters { max-height: calc(100dvh - var(--bm-head, 137px) - 32px); padding-right: 16px; scrollbar-gutter: stable; }
  #obsah .filters .filters-head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 0%, transparent)); pointer-events: none; }
}

/* ---- pass 6: one button system everywhere (the user: "make sure the buttons of the site are on par with the new design all of
   em") – our green primary and the ink-outlined secondary, 6px corners, no shadow, 600; 48px with 16px type, small 40px with 14px ---- */

/* pop-ups (the cart's "added" one): their dialog – 16px corners, the long shadow, no frame – with the close as their 40px round
   ghost button; "continue shopping" as the secondary, "go to checkout" as the primary, the suggestion's "details" as the small
   secondary (it was a green pill with a shadow); the page behind dims and blurs as behind the menus */
body:where(:has(#obsah)) .modal { border: 0; border-radius: 16px; box-shadow: var(--bm-sh-long); }
body:where(:has(#obsah)) .modal-back.show { background: rgba(17, 15, 21, .4); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
body:where(:has(#obsah)) .modal-x { top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: var(--text); transition: background-color .2s var(--bm-in); }
body:where(:has(#obsah)) .modal-x:hover { background: var(--bm-mid); color: var(--text); }
body:where(:has(#obsah)) .modal-x::before { width: 24px; height: 24px; }
body:where(:has(#obsah)) .modal .btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 6px; box-shadow: none; font-size: 16px; font-weight: 600; line-height: 24px; text-decoration: none; transition: background-color .2s var(--bm-in), color .2s var(--bm-in); }
body:where(:has(#obsah)) .modal .btn-primary { background: var(--brand-button); color: var(--brand-contrast); }
body:where(:has(#obsah)) .modal .btn-primary:hover { background: var(--brand-button-hover); color: var(--brand-contrast); }
body:where(:has(#obsah)) .modal .btn-outline, body:where(:has(#obsah)) .modal .rec .btn { border-color: var(--text); background: transparent; color: var(--text); }
body:where(:has(#obsah)) .modal .btn-outline:hover, body:where(:has(#obsah)) .modal .rec .btn:hover { background: var(--bm-ghost-hover); color: var(--text); }
body:where(:has(#obsah)) .modal .btn-sm, body:where(:has(#obsah)) .modal .rec .btn { height: 40px; min-height: 40px; padding: 0 16px; font-size: 14px; line-height: 20px; }

/* the pages' small buttons at the small size (they were 38px with 13px type) and the trade-in form's and the info pages' big
   ones at 48px with 16px type (they were 46px at 14.7px) */
#obsah .btn.btn-sm { height: 40px; min-height: 40px; padding: 0 16px; font-size: 14px; line-height: 20px; }
#obsah .ti-foot .btn, #obsah .doc .btn:not(.btn-sm) { height: 48px; min-height: 48px; padding: 0 24px; font-size: 16px; line-height: 24px; }

/* the home's "Brands we carry" cards show each brand's real mark instead of its name (the name stays for screen readers): the
   mark in the brand's own colour, at most 112px wide and 36px tall in the card (the user: "use the real logos here") */
#obsah .brandbar a[href$="brand=Apple"], #obsah .brandbar a[href$="brand=Samsung"], #obsah .brandbar a[href$="brand=Xiaomi"], #obsah .brandbar a[href$="brand=Google"], #obsah .brandbar a[href$="brand=Honor"], #obsah .brandbar a[href$="brand=Motorola"], #obsah .brandbar a[href$="line=PlayStation"], #obsah .brandbar a[href$="line=Xbox"], #obsah .brandbar a[href$="line=Nintendo"], #obsah .brandbar a[href$="brand=Garmin"], #obsah .brandbar a[href$="brand=JBL"], #obsah .brandbar a[href$="brand=Logitech"], #obsah .brandbar a[href$="brand=Razer"], #obsah .brandbar a[href$="brand=Asus"], #obsah .brandbar a[href$="brand=MSI"], #obsah .brandbar a[href$="brand=Lenovo"], #obsah .brandbar a[href$="brand=HP"], #obsah .brandbar a[href$="brand=Sony"] { font-size: 0; }
#obsah .brandbar a[href$="brand=Apple"]::before, #obsah .brandbar a[href$="brand=Samsung"]::before, #obsah .brandbar a[href$="brand=Xiaomi"]::before, #obsah .brandbar a[href$="brand=Google"]::before, #obsah .brandbar a[href$="brand=Honor"]::before, #obsah .brandbar a[href$="brand=Motorola"]::before, #obsah .brandbar a[href$="line=PlayStation"]::before, #obsah .brandbar a[href$="line=Xbox"]::before, #obsah .brandbar a[href$="line=Nintendo"]::before, #obsah .brandbar a[href$="brand=Garmin"]::before, #obsah .brandbar a[href$="brand=JBL"]::before, #obsah .brandbar a[href$="brand=Logitech"]::before, #obsah .brandbar a[href$="brand=Razer"]::before, #obsah .brandbar a[href$="brand=Asus"]::before, #obsah .brandbar a[href$="brand=MSI"]::before, #obsah .brandbar a[href$="brand=Lenovo"]::before, #obsah .brandbar a[href$="brand=HP"]::before, #obsah .brandbar a[href$="brand=Sony"]::before { content: ""; display: block; width: min(112px, 72%); height: 36px; background: var(--bl-c); -webkit-mask: var(--bl) center / contain no-repeat; mask: var(--bl) center / contain no-repeat; }
#obsah .brandbar a[href$="brand=Apple"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.225 0 19.55 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E"); --bl-c: #000000; }
#obsah .brandbar a[href$="brand=Samsung"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 10.166 24 3.668'%3E%3Cpath d='M19.8166 10.2808l.0459 2.6934h-.023l-.7793-2.6934h-1.2837v3.3925h.8481l-.0458-2.785h.023l.8366 2.785h1.2264v-3.3925zm-16.149 0l-.6418 3.427h.9284l.4699-3.1175h.0229l.4585 3.1174h.9169l-.6304-3.4269zm5.1805 0l-.424 2.6132h-.023l-.424-2.6132H6.5788l-.0688 3.427h.8596l.023-3.0832h.0114l.573 3.0831h.8711l.5731-3.083h.023l.0228 3.083h.8596l-.0802-3.4269zm-7.2664 2.4527c.0343.0802.0229.1949.0114.2522-.0229.1146-.1031.2292-.3324.2292-.2177 0-.3438-.126-.3438-.3095v-.3323H0v.2636c0 .7679.6074.9971 1.2493.9971.6189 0 1.1346-.2178 1.2149-.7794.0458-.298.0114-.4928 0-.5616-.1605-.722-1.467-.9283-1.5588-1.3295-.0114-.0688-.0114-.1375 0-.1834.023-.1146.1032-.2292.3095-.2292.2063 0 .321.126.321.3095v.2063h.8595v-.2407c0-.745-.6762-.8596-1.1576-.8596-.6074 0-1.1117.2063-1.2034.7564-.023.149-.0344.2866.0114.4585.1376.7106 1.364.9169 1.5358 1.3524m11.152 0c.0343.0803.0228.1834.0114.2522-.023.1146-.1032.2292-.3324.2292-.2178 0-.3438-.126-.3438-.3095v-.3323h-.917v.2636c0 .7564.596.9857 1.2379.9857.6189 0 1.1232-.2063 1.2034-.7794.0459-.298.0115-.4814 0-.5616-.1375-.7106-1.4327-.9284-1.5243-1.318-.0115-.0688-.0115-.1376 0-.1835.0229-.1146.1031-.2292.3094-.2292.1948 0 .321.126.321.3095v.2063h.848v-.2407c0-.745-.6647-.8596-1.146-.8596-.6075 0-1.1004.1948-1.192.7564-.023.149-.023.2866.0114.4585.1376.7106 1.341.9054 1.513 1.3524m2.8882.4585c.2407 0 .3094-.1605.3323-.2522.0115-.0343.0115-.0917.0115-.126v-2.533h.871v2.4642c0 .0688 0 .1948-.0114.2292-.0573.6419-.5616.8482-1.192.8482-.6303 0-1.1346-.2063-1.192-.8482 0-.0344-.0114-.1604-.0114-.2292v-2.4642h.871v2.533c0 .0458 0 .0916.0115.126 0 .0917.0688.2522.3095.2522m7.1518-.0344c.2522 0 .3324-.1605.3553-.2522.0115-.0343.0115-.0917.0115-.126v-.4929h-.3553v-.5043H24v.917c0 .0687 0 .1145-.0115.2292-.0573.6303-.596.8481-1.2034.8481-.6075 0-1.1461-.2178-1.2034-.8481-.0115-.1147-.0115-.1605-.0115-.2293v-1.444c0-.0574.0115-.172.0115-.2293.0802-.6419.596-.8482 1.2034-.8482s1.1347.2063 1.2034.8482c.0115.1031.0115.2292.0115.2292v.1146h-.8596v-.1948s0-.0803-.0115-.1261c-.0114-.0802-.0802-.2521-.3438-.2521-.2521 0-.321.1604-.3438.2521-.0115.0458-.0115.1032-.0115.1605v1.5702c0 .0458 0 .0916.0115.126 0 .0917.0917.2522.3323.2522'/%3E%3C/svg%3E"); --bl-c: #1428A0; }
#obsah .brandbar a[href$="brand=Xiaomi"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.016 0 4.756.255 2.493 2.516.23 4.776 0 8.033 0 12.012c0 3.98.23 7.235 2.494 9.497C4.757 23.77 8.017 24 12 24c3.983 0 7.243-.23 9.506-2.491C23.77 19.247 24 15.99 24 12.012c0-3.984-.233-7.243-2.502-9.504C19.234.252 15.978 0 12 0zM4.906 7.405h5.624c1.47 0 3.007.068 3.764.827.746.746.827 2.233.83 3.676v4.54a.15.15 0 0 1-.152.147h-1.947a.15.15 0 0 1-.152-.148V11.83c-.002-.806-.048-1.634-.464-2.051-.358-.36-1.026-.441-1.72-.458H7.158a.15.15 0 0 0-.151.147v6.98a.15.15 0 0 1-.152.148H4.906a.15.15 0 0 1-.15-.148V7.554a.15.15 0 0 1 .15-.149zm12.131 0h1.949a.15.15 0 0 1 .15.15v8.892a.15.15 0 0 1-.15.148h-1.949a.15.15 0 0 1-.151-.148V7.554a.15.15 0 0 1 .151-.149zM8.92 10.948h2.046c.083 0 .15.066.15.147v5.352a.15.15 0 0 1-.15.148H8.92a.15.15 0 0 1-.152-.148v-5.352a.15.15 0 0 1 .152-.147Z'/%3E%3C/svg%3E"); --bl-c: #FF6900; }
#obsah .brandbar a[href$="brand=Google"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.307 0 23.386 24'%3E%3Cpath d='M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z'/%3E%3C/svg%3E"); --bl-c: #4285F4; }
#obsah .brandbar a[href$="brand=Honor"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 9.692 24 4.616'%3E%3Cpath d='M2.601 9.753v1.823H.807V9.753H0v4.498h.807v-1.874h1.794v1.874h.807V9.753h-.807Zm18.671.801h.898c.369 0 .667.297.667.662a.665.665 0 0 1-.667.663h-.898v-1.325Zm-.806-.801v4.498h.806v-2.002l1.68 2.002H24l-1.376-1.64a1.462 1.462 0 0 0-.444-2.858h-1.716.002Zm-7.63-.014v2.807l-1.959-2.807h-.644v4.498h.807v-2.82l1.968 2.82h.633V9.739h-.805Zm-7.532 2.26c0-.832.68-1.506 1.517-1.506A1.51 1.51 0 0 1 8.337 12c0 .832-.679 1.506-1.516 1.506-.403 0-.789-.159-1.073-.441A1.504 1.504 0 0 1 5.304 12v-.001ZM4.497 12c0 .933.566 1.774 1.434 2.132.869.357 1.868.16 2.533-.5.664-.66.863-1.653.503-2.515a2.324 2.324 0 0 0-2.146-1.425 2.316 2.316 0 0 0-2.323 2.307L4.497 12Zm11.04-.001a1.513 1.513 0 0 1 1.518-1.506c.838 0 1.516.675 1.516 1.507a1.513 1.513 0 0 1-1.518 1.506c-.402 0-.788-.159-1.072-.441a1.5 1.5 0 0 1-.444-1.066ZM14.73 12c0 .933.566 1.774 1.434 2.132.868.357 1.868.16 2.532-.5.665-.66.864-1.653.504-2.515a2.325 2.325 0 0 0-2.147-1.425 2.316 2.316 0 0 0-2.323 2.307V12Z'/%3E%3C/svg%3E"); --bl-c: #000000; }
#obsah .brandbar a[href$="brand=Motorola"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C24.002 5.375 18.632.002 12.007 0H12zm7.327 18.065s-.581-2.627-1.528-4.197c-.514-.857-1.308-1.553-2.368-1.532-.745 0-1.399.423-2.2 1.553-.469.77-.882 1.573-1.235 2.403 0 0-.29-.675-.63-1.343a8.038 8.038 0 0 0-.605-1.049c-.804-1.13-1.455-1.539-2.2-1.553-1.049-.021-1.854.675-2.364 1.528-.948 1.574-1.528 4.197-1.528 4.197h-.864l4.606-15.12 3.56 11.804.024.021.024-.021 3.56-11.804 4.61 15.113h-.862z'/%3E%3C/svg%3E"); --bl-c: #E1140A; }
#obsah .brandbar a[href$="line=PlayStation"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 2.596 24 18.808'%3E%3Cpath d='M8.984 2.596v17.547l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.18.76.814.76 1.505v5.875c2.441 1.193 4.362-.002 4.362-3.152 0-3.237-1.126-4.675-4.438-5.827-1.307-.448-3.728-1.186-5.39-1.502zm4.656 16.241l6.296-2.275c.715-.258.826-.625.246-.818-.586-.192-1.637-.139-2.357.123l-4.205 1.5V14.98l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.785.03 5.437.661 1.848.601 2.04 1.472 1.576 2.072-.465.6-1.622 1.036-1.622 1.036l-8.544 3.107V18.86zM1.807 18.6c-1.9-.545-2.214-1.668-1.352-2.32.801-.586 2.16-1.052 2.16-1.052l5.615-2.013v2.313L4.205 17c-.705.271-.825.632-.239.826.586.195 1.637.15 2.343-.12L8.247 17v2.074c-.12.03-.256.044-.39.073-1.939.331-3.996.196-6.038-.479z'/%3E%3C/svg%3E"); --bl-c: #0070D1; }
#obsah .brandbar a[href$="line=Xbox"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.102 21.033C6.211 22.881 8.977 24 12 24c3.026 0 5.789-1.119 7.902-2.967 1.877-1.912-4.316-8.709-7.902-11.417-3.582 2.708-9.779 9.505-7.898 11.417zm11.16-14.406c2.5 2.961 7.484 10.313 6.076 12.912C23.002 17.48 24 14.861 24 12.004c0-3.34-1.365-6.362-3.57-8.536 0 0-.027-.022-.082-.042-.063-.022-.152-.045-.281-.045-.592 0-1.985.434-4.805 3.246zM3.654 3.426c-.057.02-.082.041-.086.042C1.365 5.642 0 8.664 0 12.004c0 2.854.998 5.473 2.661 7.533-1.401-2.605 3.579-9.951 6.08-12.91-2.82-2.813-4.216-3.245-4.806-3.245-.131 0-.223.021-.281.046v-.002zM12 3.551S9.055 1.828 6.755 1.746c-.903-.033-1.454.295-1.521.339C7.379.646 9.659 0 11.984 0H12c2.334 0 4.605.646 6.766 2.085-.068-.046-.615-.372-1.52-.339C14.946 1.828 12 3.545 12 3.545v.006z'/%3E%3C/svg%3E"); --bl-c: #107C10; }
#obsah .brandbar a[href$="line=Nintendo"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 9.038 24 5.925'%3E%3Cpath d='m4.447 12.546-1.202-1.942h-.864v2.793h.864v-1.942l1.202 1.942h.856v-2.793H4.44l.007 1.942Zm6.828-1.001v-.279h-.451v-.376h-.841v.376h-.458v.279h.458v1.852h.841v-1.852h.451Zm-5.491 1.844h.834v-1.852h-.834v1.852Zm0-2.213h.841v-.572h-.841v.572Zm14.663.233c-.676 0-1.224.467-1.224 1.039 0 .572.548 1.039 1.224 1.039.676 0 1.225-.467 1.225-1.039 0-.572-.549-1.039-1.225-1.039Zm.338 1.431c0 .293-.173.414-.338.414-.165 0-.346-.121-.346-.414v-.783c0-.294.173-.414.346-.414.165 0 .338.12.338.414v.783Zm-2.659-1.212a1.093 1.093 0 0 0-.473-.166c-.601-.053-1.067.482-1.067.971 0 .648.496.881.571.919.285.128.646.135.961-.068v.105h.827v-2.785h-.827c.008 0 .008.595.008 1.024Zm.008.828v.331c0 .286-.196.361-.331.361s-.331-.075-.331-.361v-.662c0-.287.196-.362.331-.362.128 0 .33.075.33.362v.331h.001Zm-9.556-1.001a1.02 1.02 0 0 0-.668.278v-.196h-.834v1.852h.834V12.17c0-.158.172-.339.398-.339.225 0 .383.181.383.339v1.219h.834v-1.008c0-.731-.631-.942-.947-.926Zm6.798 0a1.01 1.01 0 0 0-.668.278v-.196h-.834v1.852h.834V12.17c0-.158.173-.339.398-.339.225 0 .383.181.383.339v1.219h.834v-1.008c0-.731-.631-.942-.947-.926Zm-1.75 1.016c0-.572-.556-1.054-1.232-1.054-.683 0-1.232.467-1.232 1.039 0 .572.549 1.039 1.232 1.039.564 0 1.044-.324 1.187-.76h-.834v.112c0 .339-.225.414-.345.414-.128 0-.353-.075-.353-.413v-.385l1.577.008Zm-1.517-.655a.346.346 0 0 1 .293-.166c.112 0 .225.053.293.166.052.09.052.203.052.361h-.698c0-.158.007-.263.06-.361Zm9.893-.866c0-.09-.068-.135-.203-.135h-.188v.474h.113v-.196h.06l.09.196h.128l-.105-.211c.067-.022.105-.068.105-.128Zm-.218.068h-.06v-.136h.052c.068 0 .105.023.105.068 0 .053-.029.068-.097.068Zm.007-.392a.433.433 0 0 0-.428.43c0 .233.196.429.429.429a.429.429 0 0 0 0-.859h-.001Zm0 .776a.35.35 0 0 1-.345-.346.35.35 0 0 1 .346-.347.35.35 0 0 1 .345.347.35.35 0 0 1-.345.346h-.001Zm-.938-2.364H3.132C1.254 9.03 0 10.386 0 12.004s1.254 2.959 3.14 2.959h17.72c1.886 0 3.14-1.34 3.14-2.959-.007-1.618-1.269-2.966-3.147-2.966Zm-.008 5.202H3.14c-1.495.008-2.404-1.001-2.404-2.236 0-1.235.917-2.228 2.404-2.236h17.705c1.487 0 2.404 1.001 2.404 2.236 0 1.235-.909 2.236-2.404 2.236Z'/%3E%3C/svg%3E"); --bl-c: #E60012; }
#obsah .brandbar a[href$="brand=Garmin"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 8.746 24 6.508'%3E%3Cpath d='M6.265 12.024a.289.289 0 0 0-.236-.146h-.182a.289.289 0 0 0-.234.146l-1.449 3.025c-.041.079.004.138.094.138h.335c.132 0 .193-.061.228-.134.037-.073.116-.234.13-.266.02-.045.083-.071.175-.071h1.559c.089 0 .148.016.175.071.018.035.098.179.136.256a.24.24 0 0 0 .234.142h.486c.089 0 .13-.069.098-.132-.034-.061-1.549-3.029-1.549-3.029zm-.914 2.224c-.089 0-.132-.067-.094-.148l.571-1.222c.039-.081.1-.081.136 0l.555 1.222c.037.081-.006.148-.096.148H5.351zm12.105-2.201v3.001c0 .083.073.138.163.138h.396c.089 0 .163-.057.163-.146v-2.998c0-.089-.059-.163-.148-.163h-.411c-.09-.001-.163.054-.163.168zm-6.631 1.88c-.051-.073-.022-.154.063-.181 0 0 .342-.102.506-.25.165-.146.246-.36.246-.636a1 1 0 0 0-.096-.457.787.787 0 0 0-.27-.303 1.276 1.276 0 0 0-.423-.171c-.165-.035-.386-.047-.386-.047a8.81 8.81 0 0 0-.325-.008H8.495a.164.164 0 0 0-.163.163v2.998c0 .089.073.146.163.146h.388c.089 0 .163-.057.163-.146v-1.193s.002 0 .002-.002l.738-.002c.089 0 .205.061.258.134l.766 1.077c.071.096.138.132.228.132h.508c.089 0 .104-.085.073-.128-.032-.038-.794-1.126-.794-1.126zm-.311-.61a1.57 1.57 0 0 1-.213.028 8.807 8.807 0 0 1-.325.006h-.763a.164.164 0 0 1-.163-.163v-.608c0-.089.073-.163.163-.163h.762c.089 0 .236.004.325.006 0 0 .114.004.213.028a.629.629 0 0 1 .24.098.358.358 0 0 1 .126.148.473.473 0 0 1 0 .374.352.352 0 0 1-.126.148.617.617 0 0 1-.239.098zm11.803-1.439c-.089 0-.163.059-.163.146v1.919c0 .089-.051.11-.114.047l-1.921-1.992a.376.376 0 0 0-.276-.118h-.362c-.114 0-.163.061-.163.122v3.068c0 .061.059.12.148.12h.362c.089 0 .152-.049.152-.132l.002-2.021c0-.089.051-.11.114-.045l2.004 2.082a.36.36 0 0 0 .279.116h.272a.164.164 0 0 0 .163-.163v-2.986a.164.164 0 0 0-.163-.163h-.334zm-7.835 1.87c-.043.079-.116.077-.159 0l-.939-1.724a.262.262 0 0 0-.236-.146h-.51a.164.164 0 0 0-.163.163v2.996c0 .089.059.15.163.15h.317c.089 0 .154-.057.154-.142 0-.041.002-2.179.004-2.179.004 0 1.173 2.177 1.173 2.177a.105.105 0 0 0 .189 0s1.179-2.173 1.181-2.173c.004 0 .002 2.11.002 2.173 0 .087.069.142.159.142h.364c.089 0 .163-.045.163-.163V12.04a.164.164 0 0 0-.163-.163h-.488a.265.265 0 0 0-.244.142l-.967 1.729zM0 13.529c0 1.616 1.653 1.697 1.984 1.697 1.098 0 1.561-.297 1.58-.309a.29.29 0 0 0 .152-.264v-1.116a.186.186 0 0 0-.187-.187H2.151c-.104 0-.171.083-.171.187v.116c0 .104.067.187.171.187h.797a.14.14 0 0 1 .14.14v.52c-.157.065-.874.274-1.451.136-.836-.199-.901-.89-.901-1.096 0-.173.053-1.043 1.079-1.13.831-.071 1.378.264 1.384.268.098.051.199.014.254-.089l.104-.209c.043-.085.028-.175-.077-.246-.006-.004-.59-.319-1.494-.319C.055 11.813 0 13.354 0 13.529zm22.134-2.478h-2.165c-.079 0-.148-.039-.187-.108s-.039-.146 0-.215l1.084-1.874a.21.21 0 0 1 .187-.108.21.21 0 0 1 .187.108l1.084 1.874a.203.203 0 0 1 0 .215.22.22 0 0 1-.19.108zm1.488 3.447c.207 0 .378.169.378.378a.379.379 0 0 1-.378.378.379.379 0 0 1-.378-.378.38.38 0 0 1 .378-.378zm.002.7c.173 0 .305-.14.305-.321s-.13-.321-.305-.321-.307.14-.307.321c0 .18.13.321.307.321zm-.146-.543h.169c.102 0 .152.041.152.124 0 .071-.045.122-.114.122l.126.195h-.077l-.124-.195h-.061v.195h-.073v-.441h.002zm.073.189h.085c.055 0 .091-.012.091-.069 0-.051-.045-.065-.091-.065h-.085v.134z'/%3E%3C/svg%3E"); --bl-c: #000000; }
#obsah .brandbar a[href$="brand=JBL"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 5.264 24 13.471'%3E%3Cpath d='M0 5.2645l2.0221 4.5892 2.0217-4.5892zm2.0221 7.601c.6982 0 1.2656-.5655 1.2656-1.2606 0-.6985-.5674-1.2618-1.2656-1.2618-.7003 0-1.2661.5633-1.2661 1.2618 0 .6951.5658 1.2607 1.2661 1.2607zm-1.0937 3.361c0 .9572.862 2.509 3.3142 2.509 2.4529 0 3.3154-1.1872 3.3154-2.509V5.2645H5.3693l.0011 11.3428c0 .6196-.5037 1.1392-1.1261 1.1392-.6231 0-1.1279-.5045-1.1279-1.124l-.0016-2.3108H.9284zm8.2885 2.3119V5.2645h4.3745c.8441 0 2.187.693 2.187 2.1628v2.2611c0 .6612-.5798 1.8328-1.4412 1.8328.8614 0 1.4412.7422 1.4412 1.3045v3.9788c0 .6767-.5463 1.7339-2.187 1.7339zm3.3802-7.559c.7955 0 .9944-.134.9944-2.2147 0-2.0801-.199-2.246-.9944-2.246h-1.1948v4.4575zm.9944 3.8108c0-2.0812 0-2.6906-.8636-2.6906h-1.3256v5.3482l1.3255.0027c.8636 0 .8636-.5807.8636-2.6603zm3.779 3.7482H24v-4.2267h-2.1886l.0016 2.3107c0 .6196-.5047 1.1241-1.1273 1.1241-.622 0-1.1273-.5045-1.1273-1.124V5.2644h-2.188Z'/%3E%3C/svg%3E"); --bl-c: #FF3300; }
#obsah .brandbar a[href$="brand=Logitech"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3.747 24 16.505'%3E%3Cpath d='M24 5.098a1.35 1.35 0 0 1-1.35 1.35 1.35 1.35 0 0 1-1.352-1.35 1.35 1.35 0 0 1 1.351-1.351A1.35 1.35 0 0 1 24 5.097zM16.549 18.31a2.289 2.289 0 0 1-2.322-2.322H12.2c0 2.449 1.9 4.264 4.306 4.264s4.348-1.857 4.348-4.264H18.87c-.043 1.351-1.056 2.322-2.322 2.322zm5.108-2.828h1.984V7.377h-1.984zM0 15.483h1.984V4H0v11.483zm7.135-8.359c-2.449 0-4.307 1.858-4.307 4.264a4.27 4.27 0 0 0 4.307 4.306c2.406 0 4.306-1.858 4.306-4.264S9.583 7.124 7.135 7.124zm0 6.628c-1.31 0-2.322-1.013-2.322-2.364a2.289 2.289 0 0 1 2.322-2.322 2.289 2.289 0 0 1 2.321 2.322c0 1.309-.97 2.364-2.321 2.364zm13.635-4.77V7.377h-2.828c-.464-.21-.929-.253-1.393-.253-2.449 0-4.348 1.858-4.348 4.306 0 2.449 1.9 4.264 4.306 4.264s4.306-1.858 4.306-4.264c0-.844-.254-1.604-.676-2.195zm-4.221 4.77c-1.309 0-2.322-1.013-2.322-2.364a2.289 2.289 0 0 1 2.322-2.322 2.289 2.289 0 0 1 2.322 2.322c0 1.309-1.056 2.364-2.322 2.364Z'/%3E%3C/svg%3E"); --bl-c: #00B8FC; }
#obsah .brandbar a[href$="brand=Razer"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.045 0 23.91 24'%3E%3Cpath d='M23.4 0a.385.385 0 00-.278.125L22.91.35l-.401.182a.711.711 0 00-.417 0 .305.305 0 01-.171 0 1.005 1.005 0 00-.567 0A.936.936 0 0021 .596a.877.877 0 00-.412.337l-.037.048a1.246 1.246 0 00-.898.684 1.07 1.07 0 00-.07.225 1.935 1.935 0 00-.337-.193 2.026 2.026 0 00-2.063.305 2.08 2.08 0 00-.69 2.139c.086.376.23.737.428 1.069.496.776 1.079 1.494 1.737 2.138.526.512.996 1.078 1.401 1.69l.053.096c.396.754.321 1.31-.219 1.647a1.358 1.358 0 01-.572.198 2.491 2.491 0 00-.144-2.07 2.342 2.342 0 00-.3-.406c-.79-.866-1.63-.674-1.962-.449a.385.385 0 00-.15.455l.027.058a.385.385 0 00.38.188 1.07 1.07 0 01.962.582c.23.384.23.862 0 1.246a4.812 4.812 0 01-.534-.535l-.07-.07-.037-.042a3.368 3.368 0 00-1.92-1.208 3.09 3.09 0 00-.406-1.455 4.368 4.368 0 00-1.358-1.48 2.673 2.673 0 00-.267-.16 3.085 3.085 0 00-2.251-2.717 2.7 2.7 0 00-2.968 1.139c-.053.086-.112.171-.165.267a12.26 12.26 0 00-1.038 2.78 11.64 11.64 0 01-.775 2.187l-.059.107c-.213.374-.406.583-.609.647a.406.406 0 01-.374-.064c-.203-.14-.155-.423 0-.973a3.33 3.33 0 00.128-.45c.07-.33-.005-.673-.203-.946a1.07 1.07 0 00-.786-.411c-.49-.018-.94.27-1.128.722l-.08.15a.968.968 0 00-.316-.46.936.936 0 00-.294-.129 1.016 1.016 0 00-.535-.198.342.342 0 01-.17-.053.711.711 0 00-.434-.097l-.326-.256-.144-.278c-.18-.35-.707-.238-.727.155a.385.385 0 00.032.727l.305.075.342.267c.026.14.093.268.192.37.043.04.072.092.086.149.058.184.167.347.315.47a.877.877 0 00.727.465h.06c.262.313.662.477 1.068.439a1.07 1.07 0 00.23-.054 1.935 1.935 0 000 .38 2.026 2.026 0 001.3 1.636 2.08 2.08 0 002.208-.481c.276-.26.51-.562.695-.893.422-.817.75-1.68.978-2.572.179-.711.433-1.401.76-2.058l.058-.096c.454-.722.973-.936 1.535-.637.18.096.338.231.46.396-.714.12-1.34.543-1.717 1.16-.084.146-.152.3-.203.46-.353 1.117.23 1.748.593 1.925.16.077.353.035.466-.102l.037-.053a.385.385 0 000-.423 1.07 1.07 0 010-1.128c.218-.384.627-.62 1.07-.615-.04.245-.1.486-.177.722l-.034.093a3.533 3.533 0 00-.084 2.324 3.09 3.09 0 00-1.07 1.07 4.368 4.368 0 00-.603 1.913 2.674 2.674 0 000 .31 3.085 3.085 0 00-1.23 3.31 2.7 2.7 0 002.47 2h.31a12.26 12.26 0 002.925-.493 11.64 11.64 0 012.283-.422h.117c.304-.037.61.035.866.203.102.09.152.224.134.358 0 .246-.289.348-.855.466a3.33 3.33 0 00-.45.117 1.192 1.192 0 00-.721.647 1.07 1.07 0 00.037.888c.229.435.704.683 1.193.62h.165a.968.968 0 00-.235.502.936.936 0 000 .364c-.019.183.013.368.091.535.03.054.045.115.043.176-.002.151.045.3.133.422l-.058.412-.166.262a.385.385 0 00.497.535c.287.265.74-.016.63-.39l-.085-.3.064-.433a.711.711 0 00.22-.353.305.305 0 01.085-.15c.131-.141.218-.318.252-.508a.936.936 0 00.122-.336.877.877 0 00-.085-.535v-.053c.134-.376.08-.794-.144-1.123a1.07 1.07 0 00-.16-.171c.115-.05.226-.11.33-.182a2.026 2.026 0 00.77-1.94 2.08 2.08 0 00-1.518-1.674 3.71 3.71 0 00-1.123-.155c-.919.043-1.83.19-2.716.438-.697.198-1.414.322-2.138.369h-.112c-.85-.032-1.294-.374-1.316-1.01-.007-.204.031-.407.113-.594.459.559 1.138.89 1.86.909.17 0 .338-.018.503-.054 1.144-.25 1.4-1.069 1.374-1.475a.385.385 0 00-.321-.353h-.064a.385.385 0 00-.353.235 1.07 1.07 0 01-.984.535 1.214 1.214 0 01-1.069-.631c.233-.088.473-.158.716-.209h.155a3.368 3.368 0 002.01-1.069c.449.243.95.372 1.46.374.679.01 1.35-.138 1.962-.433.094-.044.185-.094.273-.15a3.085 3.085 0 003.48-.587 2.7 2.7 0 00.498-3.139 6.884 6.884 0 00-.15-.273 12.259 12.259 0 00-1.887-2.288 11.64 11.64 0 01-1.508-1.764l-.064-.102a1.294 1.294 0 01-.257-.85.406.406 0 01.16-.267c.225-.107.444.08.83.508.1.118.21.228.326.331.25.225.584.334.92.3a1.07 1.07 0 00.748-.476c.263-.416.24-.951-.06-1.342l-.085-.145c.18.035.365.019.535-.048a.936.936 0 00.32-.197c.178-.076.33-.2.44-.359a.342.342 0 01.133-.123.711.711 0 00.3-.326l.384-.155h.31a.385.385 0 00.353-.577l-.005.01a.385.385 0 00-.118-.128A.385.385 0 0023.4 0zm.006.398l-.187.315.347.086-.395.005-.658.262a.262.262 0 01-.171.262c-.316.182-.198.321-.583.487-.08.032-.107.101-.256.176-.15.075-.407-.027-.535 0a.32.32 0 00-.203.535c.085.144.486.679.192 1.112a.711.711 0 01-1.107.102c-.368-.305-.866-1.214-1.577-.877-.71.336-.502 1.128-.085 1.796.882 1.39 2.705 2.673 3.523 4.277 1 2-1.107 4.336-3.673 3.117a2.326 2.326 0 01-.396.24c-1.069.535-2.512.578-3.395-.117-.395.941-1.79 1.182-2.031 1.24-.423.08-.832.22-1.214.418.487 1.614 2.47 1.454 2.908.427 0 0 .054.824-1.069 1.07a2.139 2.139 0 01-2.288-1.16c-.33.346-.507.81-.492 1.288.027.69.46 1.337 1.69 1.385 1.662.064 4.25-1.203 6.014-.669 1.344.335 1.723 2.065.642 2.93a2.732 2.732 0 01-1.23.385c-.182.01-.198.091-.181.145.016.053.117.053.278.053.582-.053 1.208.283.93 1.166-.043.123.155.352.117.534-.053.262-.112.203-.112.289-.07.412-.235.326-.337.679a.257.257 0 01-.203.208l-.101.706.112.38-.182-.321-.251.257.214-.332.101-.7a.262.262 0 01-.16-.267c0-.364-.182-.332-.128-.75.037-.085 0-.042 0-.31.016-.186.23-.341.272-.48.043-.14.054-.45-.369-.45-.198.006-.85.075-1.069-.39a.711.711 0 01.465-1.01c.45-.16 1.497-.123 1.556-.91.059-.785-.727-.999-1.513-.972-1.657.059-3.663 1.01-5.48.903-2.23-.128-3.198-3.133-.861-4.737a2.326 2.326 0 010-.465c.09-1.219.77-2.47 1.812-2.85-.593-.818-.128-2.149-.058-2.384.135-.4.213-.818.23-1.24-1.642-.37-2.497 1.411-1.824 2.304 0 0-.743-.369-.395-1.465a2.139 2.139 0 012.138-1.4 1.786 1.786 0 00-.871-1.07c-.61-.3-1.385-.267-2.043.77-.887 1.411-1.063 4.293-2.427 5.544-.961 1-2.652.463-2.86-.909a2.732 2.732 0 01.278-1.256c.08-.166.032-.214-.038-.23-.07-.016-.123.07-.187.214a.823.823 0 01-1.475.224c-.097-.107-.342.006-.535-.17-.192-.177-.128-.188-.192-.241-.321-.273-.16-.375-.418-.636a.257.257 0 01-.08-.284L.796 7.2.41 7.102h.38l-.102-.347.182.353.534.438a.262.262 0 01.31 0c.321.182.38.01.717.262.07.054.133.027.283.134.15.107.187.374.278.476a.32.32 0 00.572-.096c.086-.193.332-.77.866-.728.457.027.77.47.642.91-.091.47-.652 1.357 0 1.801.652.444 1.235-.134 1.604-.829.775-1.46.957-3.678 1.957-5.202 1.23-1.887 4.309-1.224 4.533 1.604.145.06.283.136.412.225 1.032.69 1.759 1.924 1.567 2.994 1.02-.129 1.919.957 2.09 1.138.28.328.606.612.968.845 1.165-1.23.037-2.865-1.07-2.732 0 0 .69-.46 1.466.39.61.728.666 1.772.139 2.561.465.113.956.034 1.363-.219.583-.353.925-1.07.353-2.138-.776-1.476-3.187-3.075-3.588-4.876-.384-1.333.928-2.528 2.219-2.021.38.21.705.51.946.871.102.155.166.134.214.086.048-.048-.005-.14-.096-.268a.823.823 0 01.534-1.39c.145-.027.161-.289.418-.374.256-.086.23-.016.31-.048.395-.15.406.043.759-.048.1-.038.212-.01.283.07l.68-.263zm-10.297 6.26c-.065.53-.348 1.647-.187 2.332.155.871.823.823 1.069.395.163-.332.2-.711.107-1.069a3.106 3.106 0 00-.984-1.636zm.256.872c.17.262.293.551.364.856a1.3 1.3 0 010 .759c-.086.187-.332.187-.423-.23-.04-.462-.02-.928.06-1.385zm1.727 2.661c-.517.012-.67.472-.47.82.207.31.521.534.882.63a3.106 3.106 0 001.908-.037c-.422-.32-1.25-1.123-1.903-1.342a1.255 1.255 0 00-.417-.07zm.088.401a.807.807 0 01.201.04c.429.197.83.45 1.192.753a2.82 2.82 0 01-.962-.107 1.3 1.3 0 01-.642-.396c-.095-.134-.036-.3.21-.29zm-2.285.183a1.54 1.54 0 00-.984.45 3.106 3.106 0 00-.936 1.673c.535-.203 1.604-.519 2.139-.973.663-.588.251-1.166-.22-1.15zm-.025.341c.188.008.276.217-.04.488a5.39 5.39 0 01-1.234.631c.134-.277.315-.528.534-.743a1.3 1.3 0 01.7-.374.284.284 0 01.04-.002z'/%3E%3C/svg%3E"); --bl-c: #44D62C; }
#obsah .brandbar a[href$="brand=Asus"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 9.522 24 4.956'%3E%3Cpath d='M23.904 10.788V9.522h-4.656c-.972 0-1.41.6-1.482 1.182v.018-1.2h-1.368v1.266h1.362zm-6.144.456l-1.368-.078v1.458c0 .456-.228.594-1.02.594H14.28c-.654 0-.93-.186-.93-.594v-1.596l-1.386-.102v1.812h-.03c-.078-.528-.276-1.14-1.596-1.23L6 11.22c0 .666.474 1.062 1.218 1.14l3.024.306c.24.018.414.09.414.288 0 .216-.18.24-.456.24H5.946V11.22l-1.386-.09v3.348h5.646c1.26 0 1.662-.654 1.722-1.2h.03c.156.864.912 1.2 2.19 1.2h1.41c1.494 0 2.202-.456 2.202-1.524zm4.398.258l-4.338-.258c0 .666.438 1.11 1.182 1.17l3.09.24c.24.018.384.078.384.276 0 .186-.168.258-.516.258h-4.212v1.29h4.302c1.356 0 1.95-.474 1.95-1.554 0-.972-.534-1.338-1.842-1.422zm-10.194-1.98h1.386v1.266h-1.386zM3.798 11.07l-1.506-.15L0 14.478h1.686zm7.914-1.548h-4.23c-.984 0-1.416.612-1.518 1.2v-1.2H3.618c-.33 0-.486.102-.642.33l-.648.936h9.384Z'/%3E%3C/svg%3E"); --bl-c: #000000; }
#obsah .brandbar a[href$="brand=MSI"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.139 0 19.722 24'%3E%3Cpath d='M16.362 10.042c-1.044.56-2.193 1.05-3.7 1.142a4.26 4.26 0 0 1-2.321-.556c-.155-.09-.51-.26-.503-.457.011-.242.582-.303.816-.306 5.262-.178 6.29-2.472 6.286-2.563 0-.083-.09.011-.09.011-1.38 1.777-4.937 1.973-4.937 1.973-.877.121-1.761-.08-2.215-.529a.794.794 0 0 1-.215-.39c-.102.122-.17.25-.291.379-.114.128-.458.499-.484.06-.019-.325.076-.393.2-.586a5.178 5.178 0 0 1 .193-.276c.374-.49.684-.997 1.123-1.402.037-.038.11-.075.09-.11a6.221 6.221 0 0 0-3.624 4.166 6.508 6.508 0 0 0-.23 1.72c0 .62.082 1.209.21 1.75.258 1.073.56 1.817 1.033 2.66.155-.211.219-.491.306-.752.098-.276.166-.642.302-.87.321-.528 2.079-.396 1.599-.763a3.613 3.613 0 0 1-.397-.359 7.083 7.083 0 0 1-.673-.831c-.412-.582-.756-1.285-.79-2.2.469 1.21 1.18 2.222 2.313 2.774.378.182.813.378 1.323.367-1.341-.253-2.162-1.285-2.717-2.374-.087-.17-.208-.332-.25-.476a.4.4 0 0 1-.011-.189c.076-.336.484-.17.726-.083a8.489 8.489 0 0 0 3.602.438 6.678 6.678 0 0 0 1.874-.476c.545-.227 1.04-.518 1.452-.896m-2.34 2.657a8.001 8.001 0 0 1-2.4-.189 3.969 3.969 0 0 1-1.754-.865c-.181-.166-.295-.469-.597-.397-.026.22.151.378.272.514a3.507 3.507 0 0 0 1.573.896c.835.257 2.003.283 2.906.038M11.35 10.22c-.178 0-.771-.098-.786.098-.012.121.245.212.381.25.53.136 1.255.086 1.784.037a8.515 8.515 0 0 0 2.098-.465c.99-.362 1.795-.88 2.457-1.55.181-.18.162-.234-.034-.067a6.365 6.365 0 0 1-1.769 1.032c-1.172.472-2.517.665-4.131.665m6.576-6.717c.136.034.299.027.37.068.133.08.133.273.224.431-.54.091-.718-.302-.972-.585.091.007.227.052.378.086M7.325 16.57c-.393-.613-2.39-3.19-.832-6.989 2.128-5.178 7.88-3.772 8.421-3.557.064-.434.257-.884.764-.994a1.712 1.712 0 0 1 .612 0c-.522.193-1.077.427-1.05.976.022.49.52.835.936.91 0 0 .33.072.567-.075a.019.019 0 0 0 .016-.012c.064-.037.12-.075.204-.105a.979.979 0 0 1 .529-.023c.049.011.143.09.227.087.052 0 .136-.076.211-.087.2-.038.397.072.582.147.125.053.465.099.488.273.011.12-.178.264-.28.34a1.765 1.765 0 0 1-.423.23c.56-.045 1.682-.48 1.512.246-.015.076-.057.14-.042.178.578-.197.76-.685.673-1.372-.076.022-.14.17-.2.215v-.004c0-.196.01-.491-.125-.612.068.359-.121.53-.382.654a6.176 6.176 0 0 0-.695-.975c-.027.113-.012.26-.046.37a.518.518 0 0 0-.438-.351c-.129-.02-.272.022-.427 0-.2-.034-.431-.174-.446-.325-.027-.25.423-.367.65-.428.049.163.117.295.17.45a1.693 1.693 0 0 1 .964-.43c.102 0 .329.037.363.113.079.162-.129.355-.19.427-.037.038-.098.08-.079.102.39-.102.567-.355.84-.544.143.189.196.59.173.858.31-.303.318-.824.291-1.376a1.761 1.761 0 0 1 .749.597 1.943 1.943 0 0 0-.68-.756c-.1-.064-.228-.094-.303-.166-.068-.068-.151-.303-.242-.322-.113-.022-.265.11-.397.118-.238.019-.367-.144-.416-.378-.578.158-.8-.197-.937-.632-.023-.075-.023-.18-.06-.264-.042-.106-.273-.212-.394-.257a1.092 1.092 0 0 0-.548-.068c-.17.026-.294.113-.491.12-.476.027-.971-.18-1.357-.37A8.289 8.289 0 0 1 12.896.113c-.03-.038-.053-.094-.11-.113.125.385.348.707.556 1.005.639.915 1.47 1.58 2.283 2.215a1.308 1.308 0 0 1-.805-.208 4.165 4.165 0 0 1-.65-.416c-.85.726-2.548.81-3.916 1.134.567-.019 1.417.163 1.916.246h-.015c-2.389.094-4.449.794-5.877 2.147.37-.136.706-.306 1.118-.405-.59.537-1.171 1.096-1.644 1.75-.468.647-.967 1.33-.986 2.404.287-.28.578-.642.979-.847a13.108 13.108 0 0 0-.85 2.268c-.197.718-.492 1.913-.02 2.582.03-.238.03-.51.19-.624.28.661.76 1.996 2.26 3.319m5.68-14.095c.114.102.333.273.465.265.208 0 .314-.189.458-.272-.719-.321-1.388-.786-2.034-1.168.098.151.227.28.355.435.239.272.477.506.756.74m-8.05 5.16c.075.155 0 .366.011.517.234-.635.688-1.134 1.119-1.572.023-.026.087-.08.049-.072-.227.11-.355.314-.665.34-.174-.196-.174-.793.06-.922.288.087.477-.162.446-.427-.056-.423-.578-.707-.816-.877.125.159.367.303.423.537.02.083.015.242-.075.268-.133.038-.208-.11-.34-.09-.114.018-.167.219-.19.359a2.76 2.76 0 0 0-.03.529c0 .087.034.219-.03.283-.08-.038-.098-.136-.132-.215-.125-.276-.34-.647-.254-1.013.057-.023.163.007.2-.03.02-.227-.143-.443-.29-.586a.983.983 0 0 0-.926-.227c.211.038.68.068.684.302 0 .087-.102.212-.129.28-.166.408.023.93.22 1.194.113.152.28.295.181.575-.128-.008-.246-.09-.363-.155-.166-.095-.34-.185-.423-.329-.083-.162-.09-.325-.204-.446-.284-.321-.896-.544-1.342-.272.378-.011.73.011.877.26a1.119 1.119 0 0 1 .12.454c.008.068-.01.16.023.208.057.098.235.083.34.144.14.08.227.298.382.435a1.02 1.02 0 0 0 .133.102c.242.143.816.196.937.446m3.046 10.057c-.578.306-.914.907-.986 1.67.113-.302.43-.46.767-.615.216-.099.601-.197.662-.397.053-.155.037-.405-.038-.507-.083-.113-.227-.147-.405-.15m1.406 2.683a1.708 1.708 0 0 0-.907 1.38c.117-.28.424-.398.734-.53.189-.076.517-.162.578-.317.045-.125.045-.326-.023-.416-.064-.095-.283-.167-.382-.121m1.701 1.625c-.321.287-.506.88-.476 1.444.08-.321.325-.446.605-.631.162-.102.491-.261.552-.42a.469.469 0 0 0-.118-.461c-.181-.151-.453-.026-.567.072m2.627.567c-.313.276-.415.831-.34 1.432.076-.302.238-.45.454-.635.128-.113.332-.264.374-.42.068-.256-.208-.51-.491-.377m.544-6.085c.174.022.34.113.476.158.011-.049-.05-.071-.08-.098-.385-.329-1.277-.196-1.473.208.034.072.155.076.173.162.016.091-.117.223-.185.295-.177.193-.344.303-.544.439-.098.068-.185.181-.302.17.06-.238.189-.333.29-.537.076-.136.25-.499.152-.646-.057-.095-.355-.046-.4-.151-.039-.087.03-.197.079-.25.14-.151.43-.234.687-.287-.393 0-1.103.132-1.27.457-.113.22-.015.53.231.556.095.306-.151.684-.333.824a.344.344 0 0 1-.15.083c-.303.038-.22-.31-.296-.53-.026-.075-.075-.139-.12-.2-.084.783.086 1.554.264 2.17-.019-.215.015-.43.151-.495.31-.151.726.075 1.089.098.378.019.597-.212.858-.22.136 0 .234.092.359.061.087-.022.159-.181.234-.28a1.017 1.017 0 0 1 .265-.256c.359-.208.73.075.967.208-.211-.39-.914-.688-1.451-.428-.113.053-.204.193-.336.265-.205.121-.48.087-.745.076-.09-.008-.189.019-.26-.042.067-.34.392-.351.634-.499.348-.208.68-.525.718-1.02 0-.068-.026-.163.027-.227.049-.068.174-.076.29-.06m3.138 5.204c-.136-.17-.446-.125-.488.087-.038.215.151.438.284.574a1.126 1.126 0 0 0 .514.36c.011 0 .019.018.022 0a1.01 1.01 0 0 1-.215-.477c-.038-.211-.026-.43-.12-.548m.585-9.343c.359.026.847.14.979.348-.087-.284-.631-1.867-3.156-1.758.503.151 1.077.321 1.512.597.132.08.325.204.302.405-.026.223-.446.434-.748.457-.325.023-.575-.128-.764-.227.321.409.847.715 1.591.635-.018-.094-.143-.204-.09-.347.038-.099.2-.125.374-.114m2.086 6.04c-.098.023-.219.163-.208.302.02.19.254.28.465.265a1.175 1.175 0 0 0 .718-.291c-.396.102-.672-.34-.975-.276m.34-.922c.235-.34.31-.896.393-1.414.042-.276.08-.529.16-.733.09-.22.241-.393.294-.616.05-.216-.038-.37-.113-.548-.174-.4-.348-.798-.673-1.002-.386-.245-.987-.177-1.535-.132a18.282 18.282 0 0 0-.767.076 5.216 5.216 0 0 1-.794.064c-1.096-.02-1.727-.548-1.848-1.542 0 0 0-.012-.011-.008-.151.99.408 1.576 1.21 1.75.064.136.21.257.162.446-.053.227-.424.234-.684.2a1.425 1.425 0 0 1-.658-.28 3.383 3.383 0 0 1-.854-1 2.699 2.699 0 0 0 2.721 1.836c.48-.034.919-.14 1.3-.287-.555 0-1.292.019-1.451-.367a.503.503 0 0 1 .06-.438c.47.056.889-.046 1.282-.068a2.744 2.744 0 0 1 .96.117 1.22 1.22 0 0 1 .642.438c.272.4.303.987.204 1.561a7.181 7.181 0 0 1-.453 1.41c-.37.922-1.111 2.317-1.697 2.835-.703.593-1.584.937-2.608 1.202a6.66 6.66 0 0 1-1.323.208c-1.054.045-1.901-.102-2.46-.598a2.445 2.445 0 0 1-.605-.914 6.474 6.474 0 0 1-.363-3.04c-.038-.007-.064.035-.083.046-.03.03-.057.065-.09.091-.371.333-1.146.813-1.834.488a.635.635 0 0 1-.314-.288c-.189-.363.095-.676.314-.846.162-.125.382-.284.654-.216.162.038.416.246.416.416 0 .098-.223.28-.394.28-.177 0-.29-.144-.377-.227-.016-.027-.046-.087-.087-.06-.19.83.986.8 1.39.404.348-.34.48-1.062.163-1.52-.189-.264-.54-.366-.93-.31-.347.053-.812.152-1.028.314-.302.235-.34.726-.46 1.111a3.651 3.651 0 0 1-.454.972c-.027.038-.072.064-.065.11.465.03.862.15 1.002.487a.907.907 0 0 1 .038.465c-.065.302-.238.555-.102.915.226.597 1.092.71 1.36 1.254.114.223.091.537.235.756.177.269.597.238.986.303.22.045.439.09.605.192.321.19.332.632.718.768.23.075.43-.038.624-.091.15-.042.31-.064.453-.09.337-.054.582.026.9.12a1.406 1.406 0 0 0 .895 0c.257-.098.443-.276.643-.438.408-.325.809-.631 1.353-.805.552-.174 1.21-.261 1.512-.643a2.124 2.124 0 0 0 .302-.839c.14-.631.344-1.202.639-1.652.151-.226.37-.4.525-.623m1.24-4.12c-.087.117-.28.132-.408.212-.027.46.476-.02.408-.216m.19 2.192c-.186.121-.553-.064-.711.095-.084.605.653.159.729-.068 0-.015 0-.03-.023-.027'/%3E%3C/svg%3E"); --bl-c: #FF0000; }
#obsah .brandbar a[href$="brand=Lenovo"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 7.997 24 8.006'%3E%3Cpath d='M21.044 12.288c0 .5-.343.867-.815.867-.464 0-.827-.38-.827-.867 0-.51.343-.868.815-.868.464 0 .827.381.827.868zm-14.305-.92a.787.787 0 0 0-.651.307.991.991 0 0 0-.172.738l1.479-.614a.708.708 0 0 0-.656-.43zm6.963.052c-.472 0-.816.358-.816.868 0 .486.364.867.828.867.472 0 .815-.368.815-.867 0-.487-.363-.868-.827-.868zM24 7.997v8.006H0V7.997h24zM5.01 13.05H3.088V9.825H2.23v4.003h2.78v-.777zm1.137-.094l2.163-.897a1.667 1.667 0 0 0-.37-.86c-.284-.33-.704-.505-1.216-.505-.931 0-1.633.686-1.633 1.593 0 .93.704 1.593 1.726 1.593.572 0 1.158-.272 1.432-.589l-.535-.411c-.357.264-.56.326-.885.326-.292 0-.52-.09-.682-.25zm5.57-1.039c0-.709-.507-1.223-1.252-1.223a1.28 1.28 0 0 0-1.005.494v-.442h-.846v3.081h.846v-1.753c0-.316.245-.651.698-.651.35 0 .712.243.712.651v1.753h.847v-1.91zm3.647.37c0-.904-.725-1.593-1.65-1.593-.933 0-1.663.7-1.663 1.593 0 .903.726 1.592 1.651 1.592.932 0 1.662-.7 1.662-1.592zm2.066 1.54l1.268-3.081h-.967l-.765 2.099-.765-2.1h-.966l1.268 3.081h.927zm4.449-1.54c0-.904-.725-1.593-1.65-1.593-.932 0-1.662.7-1.662 1.593 0 .903.725 1.592 1.65 1.592.932 0 1.662-.7 1.662-1.592z'/%3E%3C/svg%3E"); --bl-c: #E2231A; }
#obsah .brandbar a[href$="brand=HP"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.0069 24h-.3572l2.459-6.7453h3.3796c.5907 0 1.2364-.4533 1.4424-1.0166l2.6652-7.3085c.4396-1.1952-.2473-2.1706-1.525-2.1706h-4.6983l-3.929 10.798-2.2255 6.127C3.929 22.434 0 17.6806 0 12.007 0 6.498 3.7092 1.8546 8.7647.4396L6.4705 6.759 2.6514 17.2547h2.5415L8.4488 8.339h1.9095l-3.2558 8.9158H9.644l3.0223-8.3251c.4396-1.1952-.2473-2.1706-1.525-2.1706h-2.143l2.459-6.7453C11.636 0 11.8145 0 11.9931 0 18.6285 0 24 5.3715 24 12.007c.0137 6.6216-5.3578 11.993-11.9931 11.993zM19.2742 8.325h-1.9096l-2.6789 7.336h1.9096l2.6789-7.336z'/%3E%3C/svg%3E"); --bl-c: #0096D6; }
#obsah .brandbar a[href$="brand=Sony"] { --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 9.888 24 4.224'%3E%3Cpath d='M8.5505 9.8881c.921 0 1.6574.2303 2.2209.7423.3848.3485.5999.8454.5939 1.3665a1.9081 1.9081 0 0 1-.5939 1.3726c-.5272.4848-1.3483.7423-2.221.7423-.8725 0-1.6785-.2575-2.2148-.7423-.3908-.3485-.609-.8484-.603-1.3726 0-.518.2182-1.015.603-1.3665.5-.4545 1.3847-.7423 2.2149-.7423zm.003 3.6692c.4606 0 .8878-.1606 1.1878-.4575.2999-.2999.4332-.6605.4332-1.1029 0-.4242-.1484-.821-.4333-1.1029-.2938-.2908-.7332-.4545-1.1877-.4545s-.8938.1637-1.1907.4545c-.2848.2818-.4333.6787-.4333 1.103-.006.409.1485.806.4333 1.1029.2969.2939.7332.4575 1.1907.4575zm-4.8418-1.9665c.1605.0424.315.094.4666.1636a1.352 1.352 0 0 1 .3787.2576c.197.206.309.4817.306.7665a.9643.9643 0 0 1-.3787.7788 2.0662 2.0662 0 0 1-.709.3485 3.7231 3.7231 0 0 1-1.1938.1697c-.352 0-.5467-.0406-.8138-.0962l-.077-.016c-.294-.0666-.5817-.1575-.8575-.2787a.0695.0695 0 0 0-.0424-.0121c-.0454 0-.0818.0394-.0818.0848v.203H.1212v-1.4786h.5242a.7559.7559 0 0 0 .1363.418c.2121.2607.4394.3607.6575.4395.3666.1212.7514.1848 1.1362.1969.5526 0 .8756-.134.9455-.163l.009-.0037.0062-.0023c.0616-.0226.3119-.1143.3119-.3916 0-.2743-.2338-.334-.387-.373l-.022-.0058c-.1708-.046-.562-.0872-.9897-.1323l-.1526-.016c-.4848-.0515-.9696-.1273-1.1968-.1758-.4977-.1097-.6942-.2917-.816-.4045l-.0082-.0076A1.0192 1.0192 0 0 1 0 11.1608c0-.497.3394-.797.7575-.9817.4454-.2.9756-.288 1.4392-.288.8211.0031 1.4877.2697 1.727.394.097.0515.1455-.0121.1455-.0606v-.1484h.5272v1.2876h-.4727a.9056.9056 0 0 0-.2939-.4909 1.289 1.289 0 0 0-.297-.1787c-.3968-.1667-.821-.2515-1.2513-.2455-.4423 0-.8665.085-1.0786.2153-.1333.0818-.2.1848-.2.306 0 .1727.1454.2424.2182.2636.1967.0597.6328.103.972.1369.0736.0073.1426.0142.2036.0206.3272.0334 1.012.1243 1.315.2zm18.1673-.9966v-.4787H24v.4696h-.4757c-.1727 0-.2424.0334-.3727.1788l-1.4271 1.63a.098.098 0 0 0-.0182.0698v.7423a1.106 1.106 0 0 0 .0121.103.1496.1496 0 0 0 .1.0909.9368.9368 0 0 0 .1303.009h.4848v.4698h-2.5724v-.4697h.4606a.9343.9343 0 0 0 .1302-.0091.1627.1627 0 0 0 .1031-.091.5626.5626 0 0 0 .009-.1v-.7422c0-.0242 0-.0242-.0333-.0636a606.7592 606.7592 0 0 0-1.4119-1.6028c-.0758-.0788-.2061-.2061-.406-.2061h-.4576v-.4696h2.5876v.4696h-.3121c-.0697 0-.1182.0697-.0576.1455 0 0 .8696 1.0392.8787 1.0513.0091.0122.0152.0122.0273.003.0121-.009.8938-1.0453.8999-1.0543a.0912.0912 0 0 0-.0182-.1273.1095.1095 0 0 0-.0606-.0182zm-6.284-.0031h.4848c.2212 0 .2606.0848.2636.2909l.0273 1.5664-2.5815-2.324H11.944v.4697h.412c.297 0 .3182.1636.3182.309v2.2138c.0004.1285.0009.295-.1818.295h-.506v.4667h2.1634v-.4697h-.5273c-.212 0-.2211-.097-.2242-.303v-1.8816l2.9724 2.6511h.7575l-.0394-2.9966c.003-.218.0182-.2908.2424-.2908h.4726v-.4697H15.595Z'/%3E%3C/svg%3E"); --bl-c: #000000; }


/* ---- pass 6: refurbished units get their "Reconditionnement par des pros" row (the page script copies the unit's grade box
   into the buy column): the grade as the title – its ticket badge, 22/600 – the grade's description in grey, then every check
   as one of their iridescent cards (223×108, 12px corners; the holographic wash and fine wave lines are drawn here, not their
   images) with their checklist icon for its subject at 32px over a 14/600 label; the row slides with their arrow pair ---- */
#obsah .bm-refurb { order: 6; position: relative; margin-top: 32px; }
#obsah .bm-refurb .grade-head { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 104px 4px 0; }
#obsah .bm-refurb .grade-head b { color: var(--text); font-family: var(--font-heading, var(--font)); font-size: 22px; font-weight: 600; line-height: 32px; }
#obsah .bm-refurb-sub { margin: 0 0 16px; color: var(--muted); font-size: 16px; line-height: 24px; }
#obsah .bm-refurb-list { display: grid; grid-auto-flow: column; grid-auto-columns: 223px; gap: 16px; margin: -12px; padding: 12px 12px 20px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 90%, #0000); mask: linear-gradient(90deg, #000 90%, #0000); }
#obsah .bm-refurb-list::-webkit-scrollbar { display: none; }
#obsah .bm-refurb-list li {
  display: flex; flex-direction: column; gap: 8px; min-height: 108px; margin: 0; padding: 24px 24px 12px; border-radius: 12px; scroll-snap-align: start;
  /* like theirs, the holographic wash is pinned to the window (background-attachment: fixed) while the fine lines ride on the
     card, so a card shows other colours as the page or the row scrolls; the wash repeats its pastel bands across the window */
  background:
    repeating-radial-gradient(circle at 115% 135%, rgba(255, 255, 255, .6) 0 1px, transparent 1.6px 7px) scroll,
    linear-gradient(125deg, #e0dcff 0%, #fbdcef 8%, #d9edff 16%, #d8f7e8 24%, #ffeccf 32%, #e6dcff 40%, #fbdcef 48%, #d9edff 56%, #d8f7e8 64%, #ffeccf 72%, #e6dcff 80%, #fbdcef 88%, #d9edff 100%) 0 0 / 100vw 100vh no-repeat fixed;
  color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px;
}
#obsah .bm-refurb-list li::before { content: ""; flex: none; width: 32px; height: 32px; background: currentColor; -webkit-mask: var(--chk, var(--bm-i-check-circle)) center / contain no-repeat; mask: var(--chk, var(--bm-i-check-circle)) center / contain no-repeat; }
#obsah .bm-refurb-list li span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
#obsah .bm-refurb-list li[data-ic="battery"] { --chk: var(--bm-i-chk-battery); }
#obsah .bm-refurb-list li[data-ic="data"] { --chk: var(--bm-i-chk-data); }
#obsah .bm-refurb-list li[data-ic="clean"] { --chk: var(--bm-i-sparkle); }
#obsah .bm-refurb-list li[data-ic="assembly"] { --chk: var(--bm-i-chk-assembly); }
#obsah .bm-refurb-list li[data-ic="cameras"] { --chk: var(--bm-i-chk-cameras); }
#obsah .bm-refurb-list li[data-ic="screen"] { --chk: var(--bm-i-chk-screen); }
#obsah .bm-refurb-list li[data-ic="tested"] { --chk: var(--bm-i-check-circle); }
#obsah .bm-refurb-list li[data-ic="warranty"] { --chk: var(--bm-i-quality); }
#obsah .bm-refurb-list li[data-ic="returns"] { --chk: var(--bm-i-returns); }
#obsah .bm-refurb-list li[data-ic="chargers"] { --chk: var(--bm-i-chk-chargers); }
@supports selector(::scroll-button(*)) {
  @media (min-width: 761px) {
    #obsah .bm-refurb-list::scroll-button(*) { position: absolute; top: 0; width: 40px; height: 40px; border: 0; border-radius: 9999px; background: var(--bm-p-next-light) center / 24px no-repeat, var(--text); box-shadow: none; cursor: pointer; transition: background-color .3s var(--bm-in); }
    #obsah .bm-refurb-list::scroll-button(inline-end) { content: "" / "Next"; right: 0; }
    #obsah .bm-refurb-list::scroll-button(inline-start) { content: "" / "Previous"; right: 48px; background-image: var(--bm-p-prev-light); }
    #obsah .bm-refurb-list::scroll-button(*):hover { background-color: color-mix(in srgb, var(--text) 85%, var(--bg)); }
    #obsah .bm-refurb-list::scroll-button(*):disabled { background-color: color-mix(in srgb, var(--text) 5%, transparent); cursor: default; }
    #obsah .bm-refurb-list::scroll-button(inline-end):disabled { background-image: var(--bm-p-next-grey); }
    #obsah .bm-refurb-list::scroll-button(inline-start):disabled { background-image: var(--bm-p-prev-grey); }
  }
}

/* ---- pass 6: "Recently viewed" in one soft grey box everywhere (the user pointed at the product page's; the home drew a
   white box with an outline) – no outline, 16px corners, 24px in; its row as the other carousels (shadow room, the 90% fade,
   snapping, their arrow pair top right); on the product page's 1120px line it shows 4½ cards instead of 6, so the cards are
   wide enough for their buttons and stock lines (they were 168px and "Add to cart" broke in two) ---- */
#obsah .pblock.recent, body.home #obsah .pblock.recent { position: relative; padding: 24px 24px 12px; border: 0; border-radius: 16px; background: var(--bg-2); }
#obsah .pblock.recent > .section-head { padding-right: 104px; }
#obsah .pblock.recent > .row-scroll { gap: 16px; margin: -12px -12px 0; padding: 12px 12px 20px; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 90%, #0000); mask: linear-gradient(90deg, #000 90%, #0000); }
#obsah .pblock.recent > .row-scroll::-webkit-scrollbar { display: none; }
#obsah .pblock.recent > .row-scroll > * { scroll-snap-align: start; }
body:has(#obsah .detail) #obsah .pblock.recent > .row-scroll { grid-auto-columns: calc((100% - 4 * 16px) / 4.5); }
@media (max-width: 760px) { #obsah .pblock.recent > .row-scroll, body:has(#obsah .detail) #obsah .pblock.recent > .row-scroll { grid-auto-columns: 72%; } }
@supports selector(::scroll-button(*)) {
  @media (min-width: 761px) {
    #obsah .pblock.recent > .row-scroll::scroll-button(*) { position: absolute; top: 20px; width: 40px; height: 40px; border: 0; border-radius: 9999px; background: var(--bm-p-next-light) center / 24px no-repeat, var(--text); box-shadow: none; cursor: pointer; transition: background-color .3s var(--bm-in); }
    #obsah .pblock.recent > .row-scroll::scroll-button(inline-end) { content: "" / "Next"; right: 24px; }
    #obsah .pblock.recent > .row-scroll::scroll-button(inline-start) { content: "" / "Previous"; right: 72px; background-image: var(--bm-p-prev-light); }
    #obsah .pblock.recent > .row-scroll::scroll-button(*):hover { background-color: color-mix(in srgb, var(--text) 85%, var(--bg)); }
    #obsah .pblock.recent > .row-scroll::scroll-button(*):disabled { background-color: color-mix(in srgb, var(--text) 5%, transparent); cursor: default; }
    #obsah .pblock.recent > .row-scroll::scroll-button(inline-end):disabled { background-image: var(--bm-p-next-grey); }
    #obsah .pblock.recent > .row-scroll::scroll-button(inline-start):disabled { background-image: var(--bm-p-prev-grey); }
  }
}

/* ======================================================================================================= cookies */

/* the cookie notice in Back Market's consent-panel style – their grey card with 12px corners and 24px inside, ink text at
   14/22 with 600 underlined links, 48px buttons with 6px corners and their 200ms colour fades – but where ours lives:
   docked at the bottom with no backdrop, so the page stays usable around it. It floats 16px above the edge with the long
   shadow (Back Market's floating notices sit like that) and rises in over 300ms; only the card takes clicks */
body:where(:has(#obsah)) .cookie-bar { padding: 0 0 16px; border-top: 0; background: transparent; box-shadow: none; pointer-events: none; }
html[data-theme="dark"] body:where(:has(#obsah)) .cookie-bar { background: transparent; }
body:where(:has(#obsah)) .cookie-bar .cookie-inner { padding: 24px; border-radius: 12px; background: var(--bm-promo); box-shadow: var(--bm-sh-long); color: var(--text); pointer-events: auto; animation: bm-rise .3s var(--bm-std) both; }
body:where(:has(#obsah)) .cookie-bar .cookie-inner b { margin-bottom: 4px; color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; }
body:where(:has(#obsah)) .cookie-bar .cookie-inner p { color: var(--text); font-size: 14px; line-height: 22px; }
body:where(:has(#obsah)) .cookie-bar .cookie-inner a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
body:where(:has(#obsah)) .cookie-bar .cookie-act .btn { height: 48px; padding: 0 16px; border-radius: 6px; box-shadow: none; font-size: 16px; font-weight: 600; line-height: 20px; transition: background-color .2s var(--bm-in), color .2s var(--bm-in), border-color .2s var(--bm-in); }
body:where(:has(#obsah)) .cookie-bar .cookie-act .btn-outline { border: 1px solid var(--text); background: transparent; color: var(--text); }
body:where(:has(#obsah)) .cookie-bar .cookie-act .btn-outline:hover { border-color: var(--text); background: var(--bm-ghost-hover); }
body:where(:has(#obsah)) .cookie-bar .cookie-act .btn-primary { border-color: transparent; background: var(--brand-button); color: var(--brand-contrast); }
body:where(:has(#obsah)) .cookie-bar .cookie-act .btn-primary:hover { background: var(--brand-button-hover); }
body:where(:has(#obsah)) .cookie-bar .cookie-act .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* the shop lifts its other bottom bars (compare, checkout) above the notice by a fixed 84px; the card is taller now, so
   they go up by its height: 136px while the buttons sit beside the text, ~220px once they wrap under it */
@media (min-width: 1144px) { body:where(:has(#obsah)):has(.cookie-bar) .cmp-bar, body:where(:has(#obsah)):has(.cookie-bar) .co-bar { bottom: 136px; } }
@media (min-width: 761px) and (max-width: 1143px) { body:where(:has(#obsah)):has(.cookie-bar) .cmp-bar, body:where(:has(#obsah)):has(.cookie-bar) .co-bar { bottom: 220px; } }

@keyframes bm-fade { from { opacity: 0; } }
@keyframes bm-rise { from { opacity: 0; transform: translateY(16px); } }

/* ========================================================================================================= phones */

@media (max-width: 760px) {
  #obsah .product-name { font-size: 14px; line-height: 20px; min-height: 40px; }
  #obsah .product .price strong { font-size: 18px; line-height: 24px; }
  #obsah .product .price s { font-size: 12px; line-height: 16px; }
  #obsah .product .avail .stock { font-size: 12px; }
  #obsah .product .price-box .btn { height: 40px; min-height: 40px; padding: 0 8px; gap: 6px; font-size: 14px; }
  #obsah .product .price-box .btn::before { width: 16px; height: 16px; }
  #obsah .product-img .lbls .lbl { height: 20px; padding: 0 8px; font-size: 11px; }
  #obsah .wish-card { width: 32px; height: 32px; }
  #obsah .section-head h2 { font-size: 18px; line-height: 24px; }
  #obsah .hp-main h1 { font-size: 26px; line-height: 32px; }
  #obsah .hp-main p { font-size: 14px; line-height: 20px; }
  #obsah .hp-main .btn { height: 40px; font-size: 14px; }
  #obsah .hp-banner h3 { font-size: 18px; line-height: 24px; }
  #obsah .hp-banner p, #obsah .hp-info-card p { font-size: 14px; line-height: 20px; }
  #obsah .hp-info-card h3 { font-size: 18px; line-height: 24px; }
  #obsah .hp-info-card .btn-pill { height: 40px; font-size: 14px; }
  #obsah .hp-why b { font-size: 16px; }
  #obsah .mcard b { font-size: 15px; line-height: 20px; }
  #obsah .mcard span { font-size: 13px; }
  #obsah .brandbar { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #obsah .brandbar-t { font-size: 18px; line-height: 24px; }
  #obsah .brandbar a { height: 56px; padding: 0 8px; font-size: 15px; line-height: 20px; }
  body:where(:has(#obsah)) .footer h4 { margin-bottom: 12px; font-size: 18px; line-height: 24px; }
  body:where(:has(#obsah)) .footer .footer-top h4 { font-size: 20px; line-height: 28px; }
  body:where(:has(#obsah)) .cookie-bar { padding-bottom: 8px; }
  body:where(:has(#obsah)) .cookie-bar .cookie-inner { padding: 16px; }
  body:where(:has(#obsah)) .cookie-bar .cookie-inner p { line-height: 20px; }
  #obsah .detail h1 { font-size: 22px; line-height: 28px; }
  #obsah .thumbs button { width: 60px; height: 60px; }
  #obsah .pd-sale { padding: 12px 20px; column-gap: 20px; }
  #obsah #ptabs.tabs button { padding: 12px 8px; font-size: 14px; line-height: 20px; }
  #obsah .desc-intro h2 { font-size: 20px; line-height: 28px; }
  #obsah .desc-main h3, #obsah #tab-dotazy h3, #obsah .reviews h3 { font-size: 18px; line-height: 24px; }
  #accSec .acc-h { font-size: 20px; line-height: 28px; }
  /* the phone buy bar as their sticky bar: white, a hairline on top, the price in ink 600, their 48px primary */
  #obsah .buybar { border-top-color: var(--bm-line); background: var(--bg); box-shadow: 0 -4px 12px rgba(17, 15, 21, .08); }
  #obsah .buybar b { color: var(--text); font-size: 20px; font-weight: 600; line-height: 28px; }
  #obsah .buybar span { font-size: 12px; line-height: 16px; }
  #obsah .buybar .btn { height: 48px; padding: 0 20px; border-radius: 6px; box-shadow: none; font-size: 16px; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) {
  #catnav li > a:not(.pill)::before { transition: none; }
  body:where(:has(#obsah)) .cookie-bar .cookie-inner, #obsah .mcar-btn, #obsah .mcar-btn::before, #obsah .mcar-btn::after { animation: none; }
}