/* ============================================================
   PRODUCT TILE — one look, every page. 24 Aug 2026.
   The reference is the homepage shop chapter (.shop-cell): pine
   ground, hairline-divided cells inside a rounded hairline frame,
   a white rounded tile holding the product on its own, then brand
   in dim mono caps and name in bone mono caps. Nothing else.
   Applied to the detail-page regimen rails (.rg-*, including the
   auto-gliding rail) and the shop gallery (.p-card). Fonts are the
   site's: JetBrains Mono via --mono / the site mono stack.
   ============================================================ */
:root{ --tile-line: rgba(239,233,222,.16); --tile-dim:#9ca38f; --tile-ink:#EFE9DE; }

/* ---- frame ---- */
.rg-grid, .products-grid{
  background:var(--pine,#1F231B);
  border:1px solid var(--tile-line);
  border-radius:clamp(11px,1.1vw,18px);
  overflow:hidden;
  gap:0 !important;
  padding:0;
}
.products-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
/* ---- cell ---- */
.rg-item, .p-card{
  background:transparent !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  display:flex; flex-direction:column; gap:18px;
  padding:clamp(16px,1.6vw,26px) !important;
  border-right:1px solid var(--tile-line) !important;
  border-bottom:1px solid var(--tile-line) !important;
  transform:none !important; filter:none !important;
  transition:background .35s;
  color:var(--tile-ink);
}
.rg-item:hover, .p-card:hover, .rg-item:focus-visible, .p-card:focus-visible{ background:rgba(239,233,222,.06) !important; outline:0; }
/* ---- the white tile ---- */
.rg-shot, .p-media{
  aspect-ratio:1; display:grid; place-items:center;
  padding:clamp(14px,1.4vw,24px);
  background:#fff !important; border-radius:clamp(8px,.8vw,12px); overflow:hidden; margin:0 !important;
}
.rg-shot img, .p-media img{ width:100%; height:100%; object-fit:contain !important; mix-blend-mode:normal !important; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.rg-item:hover .rg-shot img, .p-card:hover .p-media img{ transform:scale(1.05); }
/* ---- type: brand dim, name bone — the homepage ladder ---- */
.rg-brand, .p-brand{
  display:block; margin:0 0 8px;
  font-family:var(--mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tile-dim) !important; white-space:normal; overflow:visible; text-overflow:clip;
}
.rg-name, .p-body h2, .p-body h3{
  display:block; margin:0;
  font-family:var(--mono,'JetBrains Mono',ui-monospace,monospace) !important;
  font-size:13px; font-weight:500; letter-spacing:.06em; line-height:1.4; text-transform:uppercase;
  color:var(--tile-ink) !important; min-height:0 !important;
}
.rg-price, .p-price{
  font-family:var(--mono,'JetBrains Mono',ui-monospace,monospace);
  font-size:12px; letter-spacing:.06em; color:var(--tile-dim) !important; margin-top:auto; padding-top:8px;
}
.rg-role, .p-body p, .p-step{ display:none !important; }
.p-body{ padding:0 !important; gap:0 !important; }
.p-foot{ margin-top:auto; }
.rg-grid .rg-item:nth-child(3n){ border-right:0 !important; }

/* ---- rail form (auto-gliding rail on detail pages): cells in a row,
   dividers between, no bottom rule ---- */
.vp5-products .rg-grid, .rg-grid.is-rail{ display:flex; overflow-x:auto; scroll-snap-type:x proximity; }
.vp5-products .rg-grid>.rg-item, .rg-grid.is-rail>.rg-item{ flex:0 0 224px; border-bottom:0 !important; }
.vp5-products .rg-grid .rg-item:nth-child(3n){ border-right:1px solid var(--tile-line) !important; }
.vp5-products .rg-grid .rg-item:last-child{ border-right:0 !important; }

/* ---- responsive columns for the grids ---- */
@media (max-width:1000px){ .products-grid{ grid-template-columns:repeat(2,1fr); } .rg-grid:not(.is-rail):not(.vp5-products .rg-grid){ grid-template-columns:repeat(2,1fr); }
  .products-grid .p-card:nth-child(3n){ border-right:1px solid var(--tile-line) !important; } .products-grid .p-card:nth-child(2n){ border-right:0 !important; } }
@media (max-width:460px){ .products-grid{ grid-template-columns:1fr; } .products-grid .p-card{ border-right:0 !important; } }
.products-grid .p-card:nth-child(3n){ border-right:0 !important; }
@media (prefers-reduced-motion:reduce){ .rg-shot img,.p-media img{ transition:none; transform:none !important; } }

/* shop.css floats the brand as a pill over the photo; the tile puts it
   under the photo, on the ladder */
.p-brand{ position:static !important; background:none !important; padding:0 !important; border-radius:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }