/* ===================== */
/* Big Water tokens      */
/* ===================== */
:root{
  /* Colors */
  --bwm-bg:#0b1320;
  --bwm-panel:#0f1828;         /* slightly deeper for contrast */
  --bwm-panel-2:#0c1422;
  --bwm-text:#e6ebf1;
  --bwm-muted:#98a6bd;
  --bwm-line:rgba(255,255,255,.08);
  --bwm-accent:#22b7ff;
  --bwm-accent-2:#4dc6ff;

  /* Type scale */
  --fs-xxs:.78rem;
  --fs-xs:.86rem;
  --fs-sm:.95rem;
  --fs-md:1.02rem;
  --fs-lg:1.12rem;
  --fs-xl:1.28rem;

  /* Spacing/Radii/Shadow */
  --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:18px; --sp-5:22px;
  --rad-sm:10px; --rad-md:14px; --rad-lg:18px;
  --shadow-1:0 8px 24px rgba(0,0,0,.22);
  --shadow-2:0 12px 34px rgba(0,0,0,.32);
}

*{box-sizing:border-box}
html body{background:var(--bwm-bg)!important;color:var(--bwm-text)}
html.bwm-drawer-open,body.bwm-drawer-open{overflow:hidden}

.bwm-wrap{max-width:1300px;margin:0 auto;padding:var(--sp-5) var(--sp-3)}

/* ===================== */
/* Toolbar               */
/* ===================== */
.bwm-toolbar{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:var(--sp-2);align-items:center;margin:4px 0 var(--sp-2)
}
.bwm-toolbtn{
  display:inline-flex;gap:8px;align-items:center;
  padding:10px 14px;border:1px solid var(--bwm-line);
  border-radius:var(--rad-sm);background:var(--bwm-panel);
  color:var(--bwm-text);text-decoration:none;cursor:pointer
}
.bwm-toolbtn:focus-visible{outline:2px solid var(--bwm-accent)}
.bwm-search{
  display:flex;align-items:center;border:1px solid var(--bwm-line);
  border-radius:var(--rad-sm);background:var(--bwm-panel)
}
.bwm-search input{
  border:0;background:transparent;color:var(--bwm-text);
  padding:10px 12px;min-width:260px;outline:none;font-size:var(--fs-sm)
}
.bwm-search input::placeholder{color:var(--bwm-muted)}
.bwm-sort{
  border:1px solid var(--bwm-line);border-radius:var(--rad-sm);
  background:var(--bwm-panel);color:var(--bwm-text);
  padding:10px 12px;min-width:160px;font-size:var(--fs-sm)
}
@media (max-width:980px){
  .bwm-toolbar{grid-template-columns:1fr}
  .bwm-search input{min-width:0;width:100%}
}

/* ===================== */
/* Layout / Drawer       */
/* ===================== */
.bwm-layout{display:grid;grid-template-columns:320px 1fr;gap:var(--sp-4)}
@media (max-width:980px){.bwm-layout{grid-template-columns:1fr}}

.bwm-dim{display:none}
.bwm-dim.show{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1100;display:block}

.bwm-sidebar{
  background:var(--bwm-panel);border:1px solid var(--bwm-line);
  border-radius:var(--rad-md);padding:var(--sp-3);
  position:sticky;top:16px;align-self:start;max-height:calc(100vh - 32px);overflow:auto
}
@media (max-width:980px){
  .bwm-sidebar{
    position:fixed;inset:0 0 0 auto;width:min(92vw,420px);max-width:420px;
    transform:translateX(100%);transition:transform .25s ease;
    z-index:1111;border-radius:0;box-shadow:-28px 0 60px rgba(0,0,0,.55);
    max-height:100vh;overflow:auto
  }
  .bwm-sidebar.is-open{transform:translateX(0)}
}
.bwm-panel-title{margin:0 0 10px;font-size:var(--fs-lg)}

/* Filter form */
.bwm-filter label{font-size:var(--fs-xxs);color:var(--bwm-muted);display:block;margin:0 0 6px}
.bwm-filter .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bwm-filter input[type="text"],.bwm-filter input[type="number"],.bwm-filter select{
  width:100%;padding:10px 12px;border:1px solid var(--bwm-line);
  border-radius:var(--rad-sm);background:var(--bwm-panel-2);
  color:var(--bwm-text);font-size:var(--fs-sm)
}
.bwm-filter .field{margin-bottom:12px}
.bwm-toggle{display:flex;gap:10px;margin:6px 0 0;flex-wrap:wrap}
.bwm-toggle input{display:none}
.bwm-toggle label{
  padding:8px 12px;border-radius:999px;border:1px solid var(--bwm-line);
  cursor:pointer;background:var(--bwm-panel-2);color:var(--bwm-text);font-size:var(--fs-xs)
}
.bwm-toggle input:checked+label{border-color:var(--bwm-accent);box-shadow:inset 0 0 0 9999px rgba(34,183,255,.15)}
.bwm-actions{
  display:flex;gap:10px;margin-top:10px;position:sticky;bottom:0;
  padding-top:8px;background:linear-gradient(to bottom,transparent,rgba(15,24,40,.95) 18%,rgba(15,24,40,.98) 100%)
}
.bwm-btn{padding:10px 14px;border:0;border-radius:var(--rad-sm);cursor:pointer;font-weight:700}
.bwm-btn.primary{background:linear-gradient(90deg,var(--bwm-accent),var(--bwm-accent-2));color:#001019}
.bwm-btn.ghost{background:#223049;color:var(--bwm-text);border:1px solid var(--bwm-line)}
.bwm-btn:focus-visible{outline:2px solid var(--bwm-accent);outline-offset:2px}

/* ===================== */
/* Grid                  */
/* ===================== */
.bwm-grid{
  display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); /* min card width larger */
}
@media (max-width:560px){.bwm-grid{grid-template-columns:1fr}}

/* ===================== */
/* Cards                 */
/* ===================== */
.bwm-card{
  border:1px solid var(--bwm-line);border-radius:var(--rad-lg);
  overflow:hidden;background:var(--bwm-panel);
  box-shadow:var(--shadow-1);transition:transform .14s ease, box-shadow .14s ease
}
.bwm-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.bwm-media{position:relative;display:block;background:#0e1526}
.bwm-media img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.bwm-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,19,32,.85) 0%,rgba(11,19,32,0) 60%)}

/* Tag pill — slightly smaller */
.bwm-badges{position:absolute;left:10px;top:10px;display:flex;gap:8px;z-index:3}
.bwm-badge.tag{
  background:#fff;color:#111827;border-radius:999px;
  padding:5px 9px;font-size:.76rem;font-weight:700;letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(0,0,0,.25)
}

.bwm-card__body{padding:var(--sp-3)}
.bwm-card__title{
  margin:0 0 6px;font-size:var(--fs-lg);line-height:1.28;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
}
.bwm-card__price{
  margin:0 0 8px;font-weight:800;font-size:var(--fs-md);
  color:#dff7ff
}
.bwm-card__meta{margin:0;color:var(--bwm-muted);font-size:var(--fs-xs);display:flex;gap:16px}

/* ===================== */
/* Empty / Pager         */
/* ===================== */
.bwm-empty{padding:22px;border:1px dashed var(--bwm-line);border-radius:var(--rad-md);text-align:center;background:rgba(255,255,255,.03)}
.bwm-pager{display:flex;justify-content:space-between;gap:12px;margin:20px 0}
.bwm-pager a{
  display:inline-block;padding:10px 14px;border:1px solid var(--bwm-line);
  border-radius:var(--rad-sm);text-decoration:none;color:var(--bwm-text)
}
.bwm-pager a:hover{border-color:var(--bwm-accent);color:#e8fbff}