:root{
  --ink:#101010;
  --bg:#fffef8;
  --line:#e2d9b8;
  --danger:#d91e18;
  --gold:#ffcc33;
  --green:#2ecc71;
  --off:#fef3c7;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{font-family: Inter, "Noto Sans SC", Arial, sans-serif}

.ribbon{
  background: repeating-linear-gradient(45deg, #ffef99, #ffef99 10px, #ffd580 10px, #ffd580 20px);
  border-bottom: 2px dashed #caa400;
  font-weight:900;
}
.ribbon marquee{padding:.4rem 0}

.topbar{position:sticky; top:0; z-index:1000; background:#fff; border-bottom:3px solid var(--line)}
.container{width:min(1100px,94%); margin-inline:auto}
.topbar-row{display:flex; align-items:center; gap:.6rem; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit}
.wordmark{font-weight:900; letter-spacing:.2px}
.nav{display:flex; gap:1rem; margin-left:1rem}
.nav a{color:#333; text-decoration:none; font-weight:800; border-bottom:3px solid transparent}
.nav a.hot{color:var(--danger)}
.nav a:hover{border-color:var(--danger)}
.actions{margin-left:auto; display:flex; align-items:center; gap:.4rem}
.pill{border:2px solid var(--line); padding:.25rem .6rem; background:#fff; border-radius:999px; cursor:pointer; font-weight:900}
.pill.active{background:var(--danger); color:#fff; border-color:var(--danger)}
.cart-btn{border:2px solid var(--danger); background:#fff; padding:.35rem .6rem; font-weight:900; cursor:pointer}

.x-link{font-weight:800; text-decoration:none; border-bottom:2px dashed #000}
.logo{ height:36px; width:auto; display:block; object-fit:contain; }
.footer-logo{ height:28px; }

.side-ad{position:fixed; top:120px; z-index:1100}
.side-ad.left{left:8px}
.side-ad.right{right:8px}
.ad-card{background:#fff; border:3px solid var(--danger); padding:.5rem; width:150px; box-shadow:6px 6px 0 #0002}
.blink{animation:blink 0.8s steps(1,end) infinite; font-weight:900; color:#fff; background:var(--danger); display:inline-block; padding:.1rem .4rem}
.blink.small{font-size:.9rem}
@keyframes blink{50%{opacity:0}}

.page-grid{
  display:grid;
  grid-template-columns: 180px minmax(0, 1fr) 180px;
  gap: 1rem;
  width:min(1400px,96%);
  margin: 0 auto;
  padding-block: 1rem;
}

.gutter{display:grid; align-content:start; gap:12px}
.long-ad{
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  height:360px; padding:10px;
  border:3px dashed #000; background:#fff; text-decoration:none; color:#111;
  box-shadow:6px 6px 0 #0002;
}
.long-ad.red    { background:linear-gradient(#ffe0e0,#ffbcbc); }
.long-ad.gold   { background:linear-gradient(#fff7cc,#ffe58a); }
.long-ad.green  { background:linear-gradient(#e9f7ef,#c8f3db); }
.long-ad.purple { background:linear-gradient(#efe6ff,#d9ccff); }
.long-h1{font-weight:900; font-size:1.05rem}
.long-sub{font-size:.95rem}
.long-badge{align-self:flex-start; background:#000; color:#fff; font-weight:900; padding:.1rem .35rem}

.hero{border-bottom:4px double var(--line); background:linear-gradient(180deg,#fffef8,#fff)}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; align-items:center; padding:1rem 0 1.3rem}
.loud{font-size:clamp(1.4rem,3.6vw,2.4rem); font-weight:900; font-family:"Press Start 2P", "Noto Sans SC", monospace}
.sub{max-width:48ch}
.cta-row{display:flex; gap:.6rem; margin-top:.6rem}
.btn{border:3px solid #000; padding:.5rem .8rem; font-weight:900; text-decoration:none; color:inherit; background:#fff; cursor:pointer}
.btn-danger{background:var(--danger); color:#fff; border-color:#000}
.btn-outline{background:#fff}
.btn-sm{padding:.35rem .6rem; font-weight:800}
.badges{display:flex; gap:.4rem; margin-top:.6rem}
.coupon{display:inline-block; padding:.2rem .5rem; border:3px dashed #000; background:var(--off); font-weight:900}
.coupon.red{background:#ffd4d4}
.coupon.gold{background:#fff1b8}
.hero-image{position:relative}
.hero-image img{width:100%; height:auto; display:block; border:4px solid var(--line)}
.sticker{
  position:absolute;
  right:10px;
  top:10px;
  display:inline-block;
  padding:.25rem .5rem;
  line-height:1;
  font-weight:900;
  font-size:.85rem;
  letter-spacing:.5px;
  border-radius:8px;
  box-shadow:2px 2px 0 #0003;
  background:#000;
  color:#fff;
}
.sticker.green{
  top:auto;
  bottom:10px;
  right:auto;
  left:10px;
  background:var(--green);
  color:#fff;
}
.sticker.black{
  bottom:10px;
  right:10px;
  top:auto;
  background:#111;
  color:#fff;
  border:2px solid #111;
}

.banners{background:#fffdf3}
.banner-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem}
.banner-card{border:3px solid var(--line); background:#fff; padding:.7rem; display:flex; flex-direction:column; gap:.2rem; font-weight:900}
.banner-card strong{font-size:1.05rem}
.banner-card.loud-a{background: repeating-linear-gradient(45deg,#fff1b8,#fff1b8 8px,#ffd4d4 8px,#ffd4d4 16px)}
.banner-card.redish{background:#ffe3e3}
.banner-card.goldish{background:#fff6cc}
.banner-card.kitch{background:#e9f7ef}

.section{padding:1.2rem 0}
.section-head{display:flex; align-items:center; justify-content:space-between; margin:.4rem 0 .7rem}
.filters{display:flex; gap:.4rem}
.chip{border:2px solid var(--line); background:#fff; padding:.25rem .5rem; font-weight:900; cursor:pointer}
.chip.active{background:#000; color:#fff}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem}
.card{background:#fff; border:3px solid var(--line); box-shadow:5px 5px 0 #0001}
.media{position:relative; overflow:hidden}
.media img{width:100%; height:240px; object-fit:cover; display:block}
.flag{position:absolute; left:8px; top:8px; background:#000; color:#fff; padding:.2rem .4rem; font-weight:900}
.flag.red{background:var(--danger)}
.title{font-size:1rem; margin:.5rem .6rem .2rem; font-weight:900}
.meta{margin:0 .6rem .6rem; color:#444}
.price-row{display:flex; align-items:center; gap:.5rem; margin:0 .6rem .8rem}
.price{font-weight:900}
.price.strike{text-decoration: line-through; color:#777}
.price.strong{background:var(--gold); padding:.1rem .35rem; border:2px solid #000}

.ad-tile{display:flex; align-items:center; text-decoration:none; color:inherit}
.ad-tile .ad-body{display:flex; align-items:center; gap:.6rem; padding:.6rem}
.ad-title{font-weight:900}
.ad-sub{font-size:.9rem; color:#444}

.paper{background-image: repeating-linear-gradient(0deg,#fffef8,#fffef8 28px,#fff3cc 29px); border-top:3px dashed var(--line); border-bottom:3px dashed var(--line)}
table.cheap{width:100%; border-collapse: separate; border-spacing: 0; box-shadow:5px 5px 0 #0001}
table.cheap th, table.cheap td{border:2px solid #000; padding:.45rem .5rem; background:#fff}

.badgelist{list-style:none; padding:0; display:grid; gap:.3rem}
.fine{color:#555}
.tiny{font-size:.85rem}

.footer{border-top:4px double var(--line); background:#fff; padding:1rem 0}
.footer-row{display:flex; align-items:center; justify-content:space-between; gap:1rem}

.popup{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.5);
  z-index:2000;
}
.popup.hidden{display:none}
.popup-body{
  background:#fff;
  border:4px solid #000;
  padding:1rem;
  width:min(480px,92%);
  box-shadow:10px 10px 0 #0003;
  position:relative;
}
.popup-body.small{width:min(360px,92%)}
.popup .close{
  position:absolute; right:8px; top:8px;
  border:2px solid #000; background:#fff; cursor:pointer; font-weight:900
}
.popup input{
  width:100%; padding:.6rem .7rem; border:3px solid #000; margin:.5rem 0
}

body.modal-open{overflow:hidden}

@media (max-width: 1200px){
  .page-grid{grid-template-columns: minmax(0,1fr);}
  .gutter{display:none}
}
@media (max-width: 1024px){
  .banner-grid{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
  .hero-inner{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .banner-grid{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
  .side-ad{display:none}
}
@media (max-width: 420px){
  .grid{grid-template-columns:1fr}
}

.cart-drawer{position:fixed; inset:0; display:none; z-index:1300;}
.cart-drawer.open{display:block;}

.cart-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  z-index:1;
}

.cart-panel{
  position:absolute; right:0; top:0; bottom:0; width:min(420px,92%);
  background:#fff; border-left:4px solid var(--line); box-shadow:-10px 0 0 #0001;
  display:flex; flex-direction:column;
  z-index:2;
  pointer-events:auto;
}

.cart-head{display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:3px solid var(--line); font-weight:900}
.cart-x{border:2px solid #000; background:#fff; cursor:pointer; font-weight:900; padding:.15rem .45rem}

.cart-items{padding:.6rem 1rem; overflow:auto; flex:1; display:grid; gap:.6rem}
.cart-row{display:grid; grid-template-columns:56px 1fr auto; gap:.6rem; align-items:center; border:2px solid var(--line); padding:.4rem}
.cart-row img{width:56px; height:56px; object-fit:cover; border:2px solid var(--line)}
.cart-row .cr-title{font-weight:800; line-height:1.2}
.cart-row .cr-meta{font-size:.9rem; color:#555}
.cart-row .cr-price{font-weight:900}
.cart-row .cr-qty{display:flex; gap:.35rem; align-items:center}
.cart-row button{border:2px solid #000; background:#fff; cursor:pointer; padding:.1rem .4rem; font-weight:900}

.cart-foot{border-top:3px solid var(--line); padding: .8rem 1rem}
.cart-total{display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem}
.cart-actions{display:flex; gap:.5rem; justify-content:flex-end}

@media (max-width: 768px){

  .page-grid{ grid-template-columns: minmax(0,1fr); gap:.75rem; }
  .gutter, .side-ad{ display:none !important; }

  .hero-inner{ grid-template-columns: 1fr; }
  .banner-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .media img{ height: 200px; }

  .nav{ display:none; }

  .footer-row{ flex-wrap:wrap; gap:.5rem; }
  .footer-logo{ height:24px; }

  .cart-drawer{ z-index: 1300; }
  .cart-backdrop{
    position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1;
  }
  .cart-panel{
    position: fixed;
    right: 0; left: 0; top: 0; bottom: 0;
    width: 100vw; max-width: none;
    border-left: 0; border-top: 4px solid var(--line);
    border-radius: 12px 12px 0 0;
    z-index: 2;
    pointer-events: auto;
  }
  .cart-head{ padding: 1rem; }
  .cart-items{ padding: .75rem 1rem; }
  .cart-row{ grid-template-columns: 64px 1fr auto; }
  .cart-row img{ width:64px; height:64px; }
  .cart-actions .btn{ padding:.5rem .8rem; }
}

@media (max-width: 420px){
  .banner-grid{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .media img{ height: 180px; }
  .btn, .chip, .cart-x, .cart-row button{ padding:.5rem .8rem; }
}

@media (max-width: 768px){
  .filters [data-i18n="f_accessories"],
  .filters button[data-i18n="f_accessories"]{
    display: none !important;
  }
  .filters{ gap:.35rem; flex-wrap:wrap; }
}

.grid .ad-tile{
  display:flex !important;
  align-items:center;
  text-decoration:none;
  color:inherit;
  border:3px dashed var(--line);
  background:#fff;
  min-height:88px;
}
.grid .ad-tile .ad-body{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem;
}
.grid .ad-tile .ad-title{font-weight:900}
.grid .ad-tile .ad-sub{font-size:.9rem; color:#444}

#lucky-tile{
  display:flex !important;
  position:static !important;
  align-items:center;
  text-decoration:none;
  color:inherit;
  border:3px dashed var(--line);
  background:#fff;
  min-height:88px;
  box-shadow:5px 5px 0 #0001;
}
#lucky-tile .ad-body{
  display:flex; gap:.6rem; align-items:center; padding:.6rem;
}
#lucky-tile .ad-title{ font-weight:900; }
#lucky-tile .ad-sub{ font-size:.9rem; color:#444; }

body > #lucky-tile:not(.card){ display:none !important; }