:root { --ink:#1a2744; --ember:#e4570e; --deal:#e10600; --muted:#5f6368; --line:#eee; }
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin:0; max-width:100%; font-family: "Segoe UI", Noto Sans, sans-serif; color:#1c1c1c; background:#f7f7f7; }
a { color: inherit; }
img { max-width:100%; }
.wrap { width:100%; max-width:1120px; margin:0 auto; padding:0 16px; }
.topbar { background:#111; color:#fff; text-align:center; font-size:12px; line-height:1.4; padding:6px 12px; }
header.site { position:sticky; top:0; z-index:40; background:#fff; box-shadow:0 1px 0 #ececec; }
.head { display:flex; align-items:center; gap:12px; padding-top:12px; padding-bottom:12px; min-width:0; }
.logo { text-decoration:none; line-height:1; flex:0 0 auto; }
.logo small { display:block; font-size:9px; letter-spacing:.48em; font-weight:700; }
.logo b { display:block; font-size:1.7rem; letter-spacing:-.07em; }
.logo i { display:inline-block; width:7px; height:7px; margin-left:3px; border-radius:50%; background:var(--deal); vertical-align:super; }
.search { flex:1; min-width:0; display:flex; background:#f3f3f3; border-radius:999px; height:42px; padding:0 6px 0 16px; }
.search input { flex:1; min-width:0; width:100%; border:0; background:transparent; outline:none; font:inherit; font-size:14px; }
.search button { border:0; background:transparent; width:36px; flex:0 0 auto; cursor:pointer; font-weight:700; }
.tools { margin-left:auto; display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.tools a { text-decoration:none; white-space:nowrap; }
.call { font-size:14px; font-weight:700; }
.bag { position:relative; text-decoration:none; font-size:20px; line-height:1; }
.bag span { position:absolute; top:-8px; right:-10px; background:var(--deal); color:#fff; border-radius:99px; font-size:10px; min-width:16px; text-align:center; padding:1px 4px; }
nav.desktop { display:none; border-top:1px solid #f2f2f2; }
nav.desktop .wrap { display:flex; flex-wrap:wrap; }
nav.desktop a { display:inline-block; padding:10px 12px; text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; }
details.menu { position:relative; }
details.menu summary { list-style:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; }
details.menu summary::-webkit-details-marker { display:none; }
details.menu nav { position:absolute; left:0; top:100%; background:#fff; width:min(86vw,320px); border:1px solid var(--line); box-shadow:0 12px 32px rgba(0,0,0,.12); max-height:70vh; overflow:auto; }
details.menu nav a { display:block; padding:12px 16px; border-bottom:1px solid #f0f0f0; text-decoration:none; }
.mobile-search { padding-bottom:12px; }
footer { background:#fff; border-top:1px solid var(--line); margin-top:24px; }
.foot { display:grid; gap:24px; padding:28px 0; }
footer h2 { font-size:14px; margin:0 0 8px; }
footer a { text-decoration:none; }
footer li { margin:6px 0; }
.legal { font-size:12px; color:#666; line-height:1.5; }
.subfoot { border-top:1px solid var(--line); background:#fafafa; font-size:12px; color:#666; }
.subfoot .wrap { display:flex; justify-content:space-between; gap:12px; padding:12px 16px; flex-wrap:wrap; }
.hero { background:#111; overflow:hidden; width:100%; line-height:0; }
.hero a { display:block; }
.hero img, .cat-banner { display:block; width:100%; height:clamp(200px, 34vw, 440px); object-fit:cover; object-position:center 12%; background:#111; }
.page-banner { background:#111; width:100%; overflow:hidden; line-height:0; }
.service { background:#fff; border-bottom:1px solid var(--line); }
.service-row { display:grid; grid-template-columns:1fr 1fr; list-style:none; margin:0; padding:0; }
.service-row li { padding:14px 16px; border-top:1px solid #f2f2f2; }
.service-row strong { display:block; font-size:14px; }
.service-row span { display:block; margin-top:3px; color:#5c6370; font-size:12px; font-weight:400; line-height:1.35; }
.seller-line { margin-top:0; margin-bottom:0; padding:4px 16px 16px; color:#333; font-size:13px; line-height:1.55; background:#fff; }
.summary li > div, .crumbs, .card h3 a, .overview { overflow-wrap:anywhere; }
.summary li > div { min-width:0; flex:1; }
@keyframes slide {
  0%,16% { transform:translateX(0); }
  20%,36% { transform:translateX(-20%); }
  40%,56% { transform:translateX(-40%); }
  60%,76% { transform:translateX(-60%); }
  80%,96% { transform:translateX(-80%); }
  100% { transform:translateX(0); }
}
.note { color:#555; font-size:12px; line-height:1.5; }
.trust { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:0; list-style:none; margin:0; padding:0; }
.facts li, .facts > div, .facts > a { padding:12px; text-align:center; }
.facts strong, .facts span { display:block; }
.facts span, .facts a span { color:#666; font-size:12px; font-weight:400; }
.block { padding:22px 0; }
.block h1 { margin:0 0 10px; font-size:28px; line-height:1.2; }
.block h2 { margin:0; font-size:20px; }
.row-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cat { background:#fff; text-align:center; padding:12px; text-decoration:none; box-shadow:0 0 0 1px var(--line); }
.cat img { width:120px; height:120px; object-fit:contain; }
.cat strong, .cat span { display:block; }
.cat span { color:#666; font-size:12px; font-weight:400; margin-top:4px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.card { background:#fff; box-shadow:0 0 0 1px var(--line); display:flex; flex-direction:column; min-width:0; }
.card-photo { position:relative; display:block; }
.card img { width:100%; aspect-ratio:1; object-fit:contain; background:#fff; }
.oos-badge { position:absolute; left:8px; top:8px; background:var(--ink); color:#fff; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 6px; }
.card-body { padding:8px; display:flex; flex-direction:column; flex:1; border-top:1px solid #f0f0f0; }
.brand { color:#6b7280; font-size:12px; margin:0; }
.card h3 { font-size:14px; font-weight:500; line-height:1.35; margin:4px 0; }
.card h3 a { text-decoration:none; }
.price { font-weight:700; margin:8px 0; }
.price s, s { color:#9ca3af; font-weight:400; font-size:12px; }
.price b, .save { color:#1b7f3b; }
.oos { color:#9ca3af; font-weight:700; }
.card-actions { margin-top:auto; display:grid; grid-template-columns:1fr; gap:8px; }
.card-actions form { display:flex; min-width:0; }
.card-actions form button, .card-actions .btn { width:100%; min-width:0; height:44px; padding:0 10px; font-size:14px; white-space:nowrap; }
.card-actions .wide { grid-column:1 / -1; }
button, .btn { height:44px; border:1px solid var(--ink); background:#fff; color:var(--ink); font-weight:700; font-size:15px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
.buy-actions { display:grid; gap:10px; margin:14px 0; }
.buy-actions .qty-line { display:flex; align-items:center; gap:8px; font-weight:700; }
.buy-actions input { width:84px; height:44px; border:1px solid #ccc; padding:8px; font:inherit; }
.buy-actions button { width:100%; height:48px; font-size:16px; }
.pay-actions { display:grid; gap:10px; }
.pay-actions button { width:100%; height:auto; min-height:58px; padding:12px 14px; font-size:16px; line-height:1.25; white-space:normal; flex-direction:column; }
.pay-actions button small { display:block; margin-top:4px; font-size:12px; font-weight:500; line-height:1.35; }
.pay-actions button.buy small { color:#fff; }
.pay-screen { padding-top:24px; padding-bottom:48px; }
.pay-screen .summary { background:#fff; border:1px solid var(--line); margin:12px 0 16px; }
.pay-screen #pay-now, .pay-screen .buy { width:100%; height:52px; font-size:17px; }
.btn.buy, button.buy { background:var(--ember); color:#fff; border-color:var(--ember); }
.btn.block, button.block { display:flex; width:100%; height:48px; font-size:16px; }
.product { padding:24px 0 48px; }
.crumbs { font-size:13px; color:#666; }
.product-grid { display:grid; gap:16px; }
.photo { background:#fff; border:1px solid #e6e6e6; }
.photo img { width:100%; aspect-ratio:1; object-fit:contain; }
.buybox { background:#fff; border:1px solid #e6e6e6; padding:16px; }
.big-price { font-size:32px; font-weight:700; color:var(--ember); margin:8px 0; }
.oos.big { font-size:28px; }
.buy-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.buy-row input { width:64px; height:40px; }
.plain { padding-left:18px; font-size:14px; line-height:1.5; }
.overview { max-width:720px; line-height:1.6; }
.specs { display:grid; gap:8px; padding:0; list-style:none; }
.specs li { background:#fff; border:1px solid var(--line); padding:8px 12px; }
.narrow { max-width:760px; padding:28px 16px 48px; }
.cart-list { list-style:none; padding:0; background:#fff; border:1px solid var(--line); }
.cart-list li { display:flex; gap:12px; padding:12px; border-bottom:1px solid var(--line); align-items:flex-start; }
.cart-list li > div { flex:1; min-width:0; }
.cart-list img { width:80px; height:80px; object-fit:contain; flex:0 0 auto; }
.cart-list strong { display:block; }
.qty { display:inline; }
.qty button, .link { height:28px; }
.link { border:0; background:none; text-decoration:underline; color:#666; }
.total { display:flex; justify-content:space-between; align-items:center; }
.checkout { background:#f1f3f6; padding:16px 0 40px; }
.checkout-grid { display:grid; gap:12px; }
.checkout section, .checkout aside { background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.checkout header { display:flex; gap:10px; align-items:center; background:var(--ember); color:#fff; padding:12px 16px; }
.checkout header span { width:24px; height:24px; background:#fff; color:var(--ember); display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }
.checkout header h2 { margin:0; font-size:14px; letter-spacing:.04em; text-transform:uppercase; }
.pad, .checkout aside { padding:16px; }
.checkout label { display:block; font-size:13px; margin:10px 0; }
.checkout input, .checkout textarea { width:100%; margin-top:4px; height:40px; border:1px solid #ccc; padding:8px; font:inherit; }
.checkout textarea { height:auto; }
.pay { display:flex; gap:10px; padding:12px 16px; border-bottom:1px solid #f0f0f0; align-items:flex-start; }
.pay input { width:auto; height:auto; margin-top:4px; flex:0 0 auto; }
.pay span { min-width:0; }
.pay small { display:block; color:#666; }
.check { display:flex; gap:8px; align-items:flex-start; }
.check input { width:auto; height:auto; margin-top:3px; }
.summary { list-style:none; margin:0; padding:0; }
.summary li { display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid #f0f0f0; }
.summary img { width:64px; height:64px; object-fit:contain; }
.checkout aside p { display:flex; justify-content:space-between; font-size:14px; }
.due { border-top:1px dashed #e0e0e0; padding-top:12px; font-size:16px; }
.error { color:#b00020; }
.page { background:#fff; }
.page .wrap { padding:28px 16px 48px; max-width:760px; }
.page h1 { margin-top:0; }
.page p, .page li { line-height:1.6; }
.wa { position:fixed; right:16px; bottom:16px; background:#128C7E; color:#fff; text-decoration:none; padding:10px 14px; border-radius:999px; font-weight:700; z-index:30; }
body:has(.pay-actions) .wa, body:has(.pay-screen) .wa { display:none; }
@media (max-width: 1199px) {
  .call { display:none; }
}
@media (min-width: 700px) {
  .grid { grid-template-columns:repeat(3,1fr); gap:12px; }
  .cats { grid-template-columns:repeat(4,1fr); }
  .foot { grid-template-columns:1fr 1fr; }
}
@media (min-width: 800px) {
  .service-row { grid-template-columns:repeat(4,1fr); }
  .service-row li { border-top:0; border-left:1px solid #eee; padding:16px 18px; }
  .service-row li:first-child { border-left:0; }
  .facts { grid-template-columns:repeat(4,1fr); }
  .facts.three { grid-template-columns:repeat(3,1fr); text-align:left; }
  details.menu, .mobile-search { display:none; }
  nav.desktop { display:block; }
}
@media (min-width: 800px) and (max-width: 1099px) {
  nav.desktop a { padding:8px 8px; font-size:13px; }
}
@media (min-width: 900px) {
  .product-grid { grid-template-columns:1.1fr .9fr; align-items:start; }
}
@media (min-width: 960px) {
  .checkout-grid { grid-template-columns:1fr 320px; align-items:start; }
  .checkout aside { position:sticky; top:96px; }
}
@media (min-width: 1100px) {
  .grid { grid-template-columns:repeat(4,1fr); gap:14px; }
  .foot { grid-template-columns:1.3fr 1fr 1fr 1.2fr; }
}
@media (max-width: 799px) {
  .search.desktop { display:none; }
  .logo b { font-size:1.35rem; }
  .logo small { letter-spacing:.28em; }
  .head { gap:8px; padding-top:8px; padding-bottom:8px; }
  .block { padding:16px 0; }
  .block h1 { font-size:22px; }
  .big-price { font-size:26px; }
  .total { align-items:flex-start; gap:8px; }
}
@media (max-width: 420px) {
  .price b { display:block; margin-top:2px; }
  .card h3 { font-size:13px; }
  .facts { grid-template-columns:1fr; }
}
