/* ==========================================================================
   grid.css — the auto-grid layer                                   (v6)

   Loaded last, after app.css and admin.css.

   WHY THIS EXISTS INSTEAD OF BOOTSTRAP
   ------------------------------------
   Bootstrap's grid is built on `.row` and `.col-*`. Your own code already
   uses `.row` — store.js, admin.js and console.js emit it, and app.css and
   admin.css style it. Dropping Bootstrap in would silently redefine that
   class under every one of those call sites, and its reset would fight the
   design tokens on top of the ~230 KB it costs to download. So this file
   gives you what the grid is actually for, in about 4 KB, with no collisions:
   every utility here is prefixed `ht-`, and nothing existing is renamed.

   WHAT "AUTO GRID" MEANS HERE
   ---------------------------
   The old grids were told how many columns to draw at each breakpoint —
   two here, four there. That breaks the moment a device lands between the
   sizes you guessed. These grids are told the *minimum comfortable width of
   one cell* and work the column count out themselves, continuously, from
   a 320px phone to a 32" monitor. There is no breakpoint to miss.

     grid-template-columns: repeat(auto-fill, minmax(min(<floor>,100%), 1fr))

   The inner min() is what stops a cell wider than the viewport from forcing
   a horizontal scrollbar on a small phone — the classic auto-fill bug.
   ========================================================================== */

:root{
  --cell-tile:150px;    /* product tile   */
  --cell-kpi:150px;     /* dashboard KPI  */
  --cell-panel:300px;   /* dashboard panel */
  --cell-note:210px;    /* small info card */
  --gap:10px;
}

/* Shorthand used by every rule below. */
@supports (grid-template-columns: repeat(auto-fill, minmax(min(10px,100%), 1fr))){

  /* ---- storefront ---------------------------------------------------- */
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(min(var(--cell-tile),100%),1fr))}
  .benefits{grid-template-columns:repeat(auto-fit,minmax(min(var(--cell-note),100%),1fr))}
  .hero-cats{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
  .pdp-offers{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
  .pdp-highlights{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
  .amt-grid{grid-template-columns:repeat(auto-fit,minmax(min(90px,100%),1fr))}

  /* ---- back office ---------------------------------------------------- */
  .kpis{grid-template-columns:repeat(auto-fit,minmax(min(var(--cell-kpi),100%),1fr))}
  .grid-2,.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(var(--cell-panel),100%),1fr))}
}

/* The product grid earns a slightly larger floor as the screen grows: on a
   phone 150px means two tiles, which is right; on a desktop a 150px tile is
   too cramped to read a brand, a title and a price. Three steps, and the
   column count still works itself out between them. */
@media (min-width:700px){ :root{--cell-tile:165px;--gap:12px} }
@media (min-width:1100px){ :root{--cell-tile:180px} }
@media (min-width:1600px){ :root{--cell-tile:200px;--cell-kpi:190px} }

/* The one grid that is genuinely asymmetric: a wide chart beside a narrow
   one. It stacks on its own when there isn't room for both. */
.chart-grid-2{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
}
@media (min-width:1100px){ .chart-grid-2{grid-template-columns:1.5fr 1fr} }

/* ==========================================================================
   UTILITIES  (all prefixed — none of these can collide with your classes)
   A deliberately small set: the handful that actually come up when laying
   out a new admin view, and nothing else.
   ========================================================================== */

/* auto-fitting grid you can drop anywhere: <div class="ht-auto ht-auto-lg"> */
.ht-auto{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.ht-auto-sm{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}
.ht-auto-lg{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
/* a cell that takes the whole row whatever the column count resolved to */
.ht-span{grid-column:1/-1}

.ht-row{display:flex;flex-wrap:wrap;gap:var(--gap);min-width:0}
.ht-col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.ht-center{display:flex;align-items:center;gap:8px;min-width:0}
.ht-between{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-width:0}
.ht-push{margin-left:auto}
.ht-grow{flex:1 1 auto;min-width:0}
.ht-wrap{min-width:0;overflow-wrap:anywhere}

/* Long ids, emails and SKUs in a table cell: one line, ellipsis, full value
   on hover via the element's own title attribute. */
.ht-trunc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ht-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.ht-gap-0{gap:0}.ht-gap-1{gap:4px}.ht-gap-2{gap:8px}.ht-gap-3{gap:12px}.ht-gap-4{gap:16px}
.ht-mt-0{margin-top:0}.ht-mt-1{margin-top:4px}.ht-mt-2{margin-top:8px}.ht-mt-3{margin-top:12px}.ht-mt-4{margin-top:16px}
.ht-mb-0{margin-bottom:0}.ht-mb-1{margin-bottom:4px}.ht-mb-2{margin-bottom:8px}.ht-mb-3{margin-bottom:12px}.ht-mb-4{margin-bottom:16px}

.ht-muted{color:var(--ink-2)}
.ht-faint{color:var(--ink-3)}
.ht-num{font-variant-numeric:tabular-nums}
.ht-right{text-align:right}
.ht-nowrap{white-space:nowrap}

/* Hide by device class without inventing new breakpoints. */
@media (max-width:559px){ .ht-hide-phone{display:none!important} }
@media (min-width:900px){ .ht-only-phone{display:none!important} }

/* ==========================================================================
   SCROLL FEEL
   Anything that scrolls sideways gets momentum, no visible scrollbar, and a
   snap so a card row never stops half way across an item.
   ========================================================================== */
.ht-scroller{
  display:flex;gap:var(--gap);overflow-x:auto;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px;
}
.ht-scroller::-webkit-scrollbar{display:none}
.ht-scroller>*{scroll-snap-align:start;flex:0 0 auto}