/* ==============================================================
   /css/grid-styles.css
   Purpose: Product grid styles (extracted from inc-grid-styles.asp)
   Version: 1.2.0
   Updated: 2026-06-22
   Notes:   v1.2.0 - Converted pure-CSS .asp include to standalone .css
                     (mirrors cart/checkout/home migration). Linked via
                     <link rel="stylesheet" href="/css/grid-styles.css">.
            v1.1.0 - List tiles -> sitewide --thumb-ratio (2/3) +
                     --thumb-fit (cover); fallback 125%->150%.
   ============================================================== */

/* =========================
   Product Grid — Unified + Retail Overrides (Optimized)
========================= */

/* Grid */
.grid,
.layout .results{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
  align-items:start;
  justify-items:start;
  place-content:start;
}
@media (max-width:1100px){ .grid, .layout .results{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){  .grid, .layout .results{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){  .grid, .layout .results{ grid-template-columns:repeat(2,1fr); } }

/* Sidebar */
.side .catlist a{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* Optional center-cards mode */
.layout .results.center-cards{ justify-items:center; }

/* Cards fill columns & allow inner truncation */
.layout .results .product-card{ align-self:start; width:100%; min-width:0; }

/* Card (Retail dark panel look) */
.product-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--panel);
  border:1px solid var(--panel-br);
  color:var(--text);
  transition:transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.25); }

/* Full-card link + CTA label */
.product-card .cover-link{ position:absolute; inset:0; z-index:1; display:block; }
.cover-link .cta-label{
  position:absolute; left:12px; bottom:12px; padding:8px 12px;
  background:rgba(0,0,0,.62); color:#fff; font-weight:600; border-radius:6px;
  opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.cover-link .cta-label::after{ content:" →"; }
@media (hover:hover) and (pointer:fine){
  .product-card:hover .cta-label{ opacity:1; transform:translateY(0); }
}

/* Generic media reset (thumb handles sizing) */
.product-card img{ display:block; width:100%; background:transparent; }

/* Body & text */
.product-body{ position:relative; padding:5px; }
.product-title, .product-name{
  margin:0; font-weight:600; font-family:"EB Garamond",serif; letter-spacing:.02em; color:var(--text);
}

/* Product name — font, color, 2-line clamp, even height */
.product-name{
  margin:6px 0 2px;
  font-family:"EB Garamond", serif;
  font-weight:600; letter-spacing:.02em; line-height:1.25;
  text-align:center; color:var(--text);
  font-size:clamp(.98rem, 2.2vw, 1.08rem);
  min-height:calc(2 * 1.25em);
}
.product-name a{
  color:inherit; text-decoration:none; outline:none;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden; text-overflow:ellipsis; white-space:normal;
}
.product-name a:hover{ text-decoration:underline; }
.product-name a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:6px; }

/* Scoped grid tweak: larger name on cards */
.layout .results .product-card .product-name{ font-size:clamp(1.08rem, 2.8vw, 1.22rem); }

/* Price */
.price{ color:var(--gold); font-weight:700; margin:0 0 2px; text-align:center; }
.layout .results .price{ font-size:1.08rem; font-weight:700; }
.price .strike{ margin-left:8px; opacity:.7; text-decoration:line-through; }
.layout .results .price .strike{ font-size:.92em; }

/* Results heading */
.layout .results > .results-head{
  grid-column:1 / -1; margin:12px 0 14px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  justify-self:center; width:100%;
}
.layout .results > .results-head h1{
  margin:0; color:var(--gold);
  font-family:"EB Garamond", Georgia, serif; font-weight:700;
  font-size:clamp(1.6rem, 2.6vw, 2rem); line-height:1.2; letter-spacing:.2px;
}
.layout .results > .results-head .results-count{ color:var(--muted); font-size:.95rem; line-height:1.25; }

/* Descriptions */
.one-line, .oneline{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layout .results .oneline{
  margin:0; color:var(--muted); text-align:center; width:100%;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; font-size:.92rem; line-height:1.25; min-height:calc(1.25em * 2);
}
/* Two-line clamp for short product blurb */
.onelinedesc{
  margin:0; width:100%; color:var(--muted);
  font-size:.95rem; line-height:1.25;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden; text-overflow:ellipsis; min-height:calc(2 * 1.25em);
}
.layout .results .onelinedesc{ text-align:center; }

/* Badges */
.product-card .badge{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:4px 8px; border-radius:10px; font-size:.72rem; font-weight:700; letter-spacing:.2px;
  background:rgba(0,0,0,.7); color:#fff;
}
.product-card .badge.sale{ background:#B91C1C; }

/* Skeleton shimmer */
.skeleton{
  background:linear-gradient(90deg,#202429 25%,#252a31 37%,#202429 63%);
  background-size:400% 100%; animation:sk 1.4s ease infinite;
  border-radius:12px;
  padding-top:12px; padding-bottom:12px; box-sizing:border-box; display:block; background-clip:padding-box;
}
@keyframes sk { 0%{ background-position:100% 0 } 100%{ background-position:-100% 0 } }

/* Mobile refinements */
@media (max-width:640px){
  .layout .results{ column-gap:8px; row-gap:0; }
  .product-card .badge{ top:8px; left:8px; padding:3px 6px; font-size:.66rem; border-radius:8px; }
}

/* =========================
   Final Retail Overrides (authoritative)
========================= */

/* Framed, centered media — single source of rounding */
:root{
  --card-radius:12px;
  --media-gap:10px;
  --thumb-bg:#171b21;          /* dark thumbnail well */
}

/* Card owns rounding and frame */
.layout .results .product-card{
  border-radius:var(--card-radius);
  overflow:hidden;
  padding:var(--media-gap);
  padding-bottom:0;
}

/* Cover link stays aligned with inner frame */
.layout .results .product-card .cover-link{
  border-radius:calc(var(--card-radius) - 4px);
  inset:var(--media-gap) var(--media-gap) auto var(--media-gap);
}

/* Ensure no stray radii re-apply */
.layout .results .product-card .cover-link,
.layout .results .product-card img{ box-shadow:none; }

/* Promo badge = brand gold; keep SALE red */
.layout .results .product-card .badge{
  background:var(--gold);
  color:#111;
  border:1px solid rgba(0,0,0,.15);
}
.layout .results .product-card .badge.sale{
  background:#B91C1C;
  color:#fff;
  border-color:transparent;
}

/* Clickable thumbnail wrapper (single, authoritative definition) */
.layout .results .product-card .thumb{
  display:block;
  background:var(--thumb-bg);
  border-radius:calc(var(--card-radius) - 4px);
  overflow:hidden;
  aspect-ratio:var(--thumb-ratio);          /* sitewide thumbnail shape */
  margin:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); /* subtle edge */
}
.layout .results .product-card .thumb:hover{ text-decoration:none; }

/* Image fills the well (sitewide cover standard) */
.layout .results .product-card .thumb img{
  width:100%;
  height:100%;
  object-fit:var(--thumb-fit);
  display:block;
  background:transparent !important;
}

/* Safari fallback (older) — 150% = 2/3 to match --thumb-ratio */
@supports not (aspect-ratio: 1 / 1){
  .layout .results .product-card .thumb{ position:relative; padding-top:150%; }
  .layout .results .product-card .thumb img{ position:absolute; inset:0; }
}