:root { --gap: 16px; --card: 14px; --tile-w: 260px; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 1.25rem; }
a { color: #0b62d6; text-decoration: none; }
a:hover { text-decoration: underline; }
.topnav { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-bottom: 1rem; }
.btn { border:1px solid #ccc; background:#f7f7f7; padding:.55rem .85rem; border-radius:12px; cursor:pointer; display:inline-block; }
.btn.primary { background:#0b62d6; border-color:#0b62d6; color:#fff; }
.btn:active { transform: translateY(1px); }
.card { border:1px solid #e6e6e6; border-radius: var(--card); padding:1rem; box-shadow:0 1px 4px rgba(0,0,0,.05); background:#fff; }
.flash { padding:.75rem 1rem; border:1px solid #f2c2c2; background:#fff2f2; color:#8a0c0c; border-radius:12px; margin:.75rem 0; }
.muted { color:#666; font-size:.92rem; }
select, input[type="number"], input[type="text"] { padding:.6rem .7rem; border-radius:12px; border:1px solid #ccc; }
label { font-weight: 650; }
.row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }

/* Floating cart (desktop) */
@media (min-width: 1100px){
  body { padding-right: 420px; }
  .layout { display:block; }
  .card.sticky{
    position: fixed;
    right: 1.25rem;
    top: 86px; /* below the top bar */
    width: 380px;
    max-height: calc(100vh - 110px);
    overflow: auto;
    z-index: 50;
  }
}
@media (max-width: 1099px){
  body { padding-right: 0; }
  .card.sticky{ position: static; max-height:none; overflow: visible; }
}

.layout { display:grid; grid-template-columns: 1.55fr 0.85fr; gap: var(--gap); align-items:start; }
.stack { display:flex; flex-direction:column; gap: var(--gap); }
.cart-item { display:flex; justify-content:space-between; gap:.75rem; border-top:1px dashed #eee; padding-top:.6rem; margin-top:.6rem; }
.cart-item:first-child { border-top:0; padding-top:0; margin-top:0; }
.pill { display:inline-block; font-size:.8rem; padding:.2rem .55rem; border-radius:999px; background:#f2f2f2; border:1px solid #e6e6e6; }
.price { font-variant-numeric: tabular-nums; }
.small { font-size:.88rem; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-w), 1fr)); gap: var(--gap); }
.tile { border:1px solid #e6e6e6; border-radius: var(--card); padding:.85rem; display:flex; flex-direction:column; gap:.55rem; cursor:pointer; background:#fff; }
.tile input[type="checkbox"] { transform: scale(1.25); }
.img { width:100%; border-radius:12px; border:1px solid #f0f0f0; background:#fafafa; aspect-ratio: 4 / 3; object-fit: contain; }
.title { font-weight:800; }
.subtitle { font-size:.92rem; color:#444; line-height:1.25; min-height:2.4em; }
.kvs { display:flex; gap:.5rem; flex-wrap:wrap; }
.kv { font-size:.82rem; border:1px solid #eee; padding:.2rem .45rem; border-radius:999px; background:#fafafa; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { :root{ --tile-w: 190px; } }

.sticky {
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 24px);
  overflow: auto;
}
@media (max-width: 980px){ .sticky { position: static; } }

/* Square modal */
.modal { position: fixed; inset: 0; z-index: 1000; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.modal-card {
  position: relative;
  max-width: 720px;
  margin: 6vh auto;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}

.mode-select{padding:.35rem .5rem;border:1px solid #ddd;border-radius:10px;font-size:.9rem;background:#fff;}
.qty-btn{min-width:2.2rem;text-align:center;}
.qty-val{display:inline-block;min-width:2rem;text-align:center;}

.modebar{margin-left:auto;display:flex;align-items:center;gap:.5rem;}
.topnav{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}

.datamodebar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eee;padding:.6rem .9rem;}
.datamodebar .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1200px;margin:0 auto;}
.datamodebar .brandlink{font-weight:900;text-decoration:none;color:#111;}
.datamodebar .right{display:flex;align-items:center;gap:.5rem;}

.spacer{ flex:1; }