/* ============================================================================
 * Golf Cart Lab product card, v2.
 *
 * ONE definition, loaded on every surface that can render a WooCommerce loop:
 * shop, category, brand, tag, search, homepage rails, page 678, and the
 * related / upsell blocks on a product page. Never restate a card rule in
 * shop.css or gcl-commerce.css; those keep grid and rail layout only. The card
 * was defined twice once before and the copies drifted (42px/13px button on the
 * homepage against 44px/14px on the archive).
 *
 * SHAPE. The card is ONE surface with ONE outline and ONE radius. The tinted
 * media zone and the white text zone are two REGIONS of that surface, meeting
 * at a single hairline seam that runs the full width, edge to edge. The white
 * zone has no border and no radius of its own.
 *
 * This is the thing to protect: an inset white panel with its own border and
 * its own corner radius, floating inside a tinted card, reads as a box inside a
 * box. Two outlines, two radii, a visible gap. It looks like a component
 * wrapped in another component instead of one designed object. If you are about
 * to add a border or a border-radius to .gcl-card__body, do not.
 *
 * Alignment note: the title is left-aligned by the card, not inherited. Woo and
 * Blocksy both centre loop titles, and a single-line title in a centred box
 * reads as "extra left padding" even though the box is full width. Every text
 * child is therefore stretched and explicitly left-aligned.
 * ========================================================================== */

.gcl-card{
  /* Card tokens. Overridable per context (see the density section below). */
  --gclc-pad:16px;
  --gclc-radius:16px;
  --gclc-title:14.5px;
  --gclc-price:17px;
  /* Price face matches the serial-decoder recommendation cards
     (decoder-parts.css .gcl-dp-price). Mono is wider than the old face,
     hence 17px rather than 19px. */
  --gclc-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gclc-btn-h:44px;
  --gclc-btn-fs:14px;

  --gclc-ink:#0F172A;
  --gclc-muted:#64748B;
  --gclc-line:#E6ECF3;
  --gclc-seam:#EDF1F6;
  --gclc-green:#22A75A;
  --gclc-green-dark:#178246;
  --gclc-tint:#F4F7FA;
}

/* ---------- Shell ---------------------------------------------------------- */
/* float/width/margin resets undo the legacy WooCommerce float grid.
   NO padding on the shell: the media zone must reach the card edge so the tint
   is a region of the card rather than a swatch sitting inside it. overflow
   clips both zones to the single shared radius. */
li.gcl-card,
.gcl-card{
  position:relative;
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column;
  /* align-items MUST be declared here. Blocksy sets align-items:center on its
     loop cards, and in a column flex container that is the CROSS axis: the
     media and the text zone stop stretching to the card width and size to their
     own content instead, so the body rendered 343px wide inside a 252px card
     and its text visibly overhung both edges. A measuring harness that compares
     text to the BODY box reports dx=0 here, because body and text are shifted
     together - the overflow is only visible against the CARD box. */
  align-items:stretch !important;
  gap:0;
  overflow:hidden;
  border:1px solid var(--gclc-line);
  border-radius:var(--gclc-radius);
  background:#fff;
  text-align:left !important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Blocksy paints loop cards itself on the shop archive, where it stamps
   [data-products="type-2"] on the grid: that selector outranks .gcl-card and
   repainted the card #F8F8F8 with a washed-out 5%-black border, so the same
   card looked grey on /shop/ and white on the homepage. Match our own surface
   at equal-or-higher specificity instead of leaving it to chance. */
[data-products] li.gcl-card,
[data-products] .gcl-card,
.gcl-shop li.gcl-card{
  padding:0 !important;
  border:1px solid var(--gclc-line) !important;
  border-radius:var(--gclc-radius) !important;
  background:#fff !important;
}

.gcl-card:hover{
  border-color:#CBD9E4;
  box-shadow:0 12px 28px rgba(15,23,42,.10);
  transform:translateY(-2px);
}

/* ---------- Media zone: the tinted region --------------------------------- */
/* Full-bleed to the card edge. The seam is this zone's bottom border, so it
   spans the whole card width and cannot drift from the zone it divides. */
.gcl-card .gcl-card__media{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1/1;
  margin:0;
  padding:18px;
  border-bottom:1px solid var(--gclc-seam);
  background:var(--gclc-tint);
  overflow:hidden;
}
.gcl-card .gcl-card__media img{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.gcl-card:hover .gcl-card__media img{transform:scale(1.05)}

/* ---------- Text zone: the white region ----------------------------------- */
/* flex:1 makes the zone absorb leftover height, so cards across a row share a
   bottom edge even when titles differ in length.
   NO border, NO border-radius, NO background of its own beyond the card's
   white. See the SHAPE note at the top of this file. */
.gcl-card .gcl-card__body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:stretch;   /* never let a short child centre itself */
  /* Belt and braces against an inherited align-items:center on the card (see
     the note there): pin the cross-axis size to the card rather than to the
     content, so the text zone can never be wider than the card that holds it. */
  align-self:stretch;
  width:100%;
  min-width:0;
  padding:var(--gclc-pad);
  background:transparent;
  text-align:left !important;
}

/* Fitment line, e.g. "CLUB CAR / 48V-72V / 850A". Clamped to one line, because
   the separators make a wrapped second line read as a broken list. */
.gcl-card .gcl-card__brand{
  overflow:hidden;
  margin:0 0 7px;
  color:var(--gclc-muted);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.25;
  text-align:left !important;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Title. Clamped to 3 lines (owner 2026-09-28: long part names must stay readable), but NOT floor-padded to 2 lines: a single-line
   title sits on one line and the margin-top:auto on the foot keeps the price
   and button on a common baseline across the row. */
.gcl-card h2,
.gcl-card .woocommerce-loop-product__title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
  width:100%;
  margin:0 0 12px !important;
  padding:0 !important;
  font-size:var(--gclc-title) !important;
  font-weight:700;
  line-height:1.38 !important;
  letter-spacing:-.008em;
  text-align:left !important;
}
.gcl-card h2 a,
.gcl-card .woocommerce-loop-product__title a{
  display:block;            /* full-width anchor: no inline-box centring */
  color:var(--gclc-ink) !important;
  text-align:left !important;
  text-decoration:none !important;
}
.gcl-card h2 a:hover{color:var(--gclc-green-dark) !important}

/* ---------- Foot: rule, price, button ------------------------------------- */
/* margin-top:auto pins the foot to the bottom, so uneven title lengths do not
   stagger the buttons across a row. The rule above the price is the foot's own
   top border, so it cannot drift from the price it belongs to.

   Default layout is STACKED, price over a full-width button. The side-by-side
   row is opt-in at a card width where the button still fits: at 4-up a card is
   about 250px and a side-by-side button gets about 110px, which wraps
   "View product" onto two lines.

   Mono price (2026-09-25): the price column sizes to its content and the
   button takes what is left, never less than its own label. A fixed 50/50
   split clipped mono prices ("From $1,936.00" needs ~116px of a ~100px half).
   Narrow cards stack instead; see the gclcard container queries below. */
.gcl-card .gcl-card__foot{
  display:grid;
  grid-template-columns:minmax(0,max-content) 1px minmax(min-content,1fr);
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:13px;
  border-top:1px solid var(--gclc-seam);
}
.gcl-card .gcl-card__foot::before{
  content:"";
  grid-column:2;
  grid-row:1;
  align-self:center;
  width:1px;
  height:28px;
  background:var(--gclc-seam);
}
.gcl-card .gcl-card__price{
  grid-column:1;
  color:var(--gclc-ink) !important;
  font-family:var(--gclc-mono);
  font-size:var(--gclc-price);
  font-weight:700;
  line-height:1.1;
  letter-spacing:0;
  text-align:left !important;
  white-space:nowrap;
}
/* Small cents: the decimal part is wrapped in <small> by product-card.php. */
.gcl-card .gcl-card__price .gcl-card__cents{
  font-size:.65em;
  font-weight:700;
  letter-spacing:0;
  vertical-align:baseline;
}
.gcl-card .gcl-card__from{
  color:var(--gclc-muted);
  font-size:.68em;
  font-weight:700;
  letter-spacing:0;
}
.gcl-card .gcl-card__price del{
  margin-right:6px;
  color:var(--gclc-muted);
  font-size:.6em;
  font-weight:600;
}
.gcl-card .gcl-card__price ins{text-decoration:none}
/* Each amount stays intact, but a RANGE may break between its two amounts:
   on a phone a card is ~173px and "$1,935.95 - $2,461.95" needs ~149px inside
   ~145px of room. Wrapping at the dash keeps the price complete; nowrap on the
   whole line would clip it, and a clipped price is a bug, not a style. */
.gcl-card .gcl-card__price:has(.woocommerce-Price-amount ~ .woocommerce-Price-amount){
  white-space:normal;
}
.gcl-card .gcl-card__price .woocommerce-Price-amount{white-space:nowrap}

.gcl-card .gcl-card__button{
  grid-column:3;
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  width:100%;
  max-width:120px;
  min-height:var(--gclc-btn-h);
  padding:0 16px;
  border:0;
  border-radius:10px;
  background:var(--gclc-green);
  color:#fff !important;
  font-size:var(--gclc-btn-fs);
  font-weight:650;
  line-height:1.2;
  text-align:center;
  text-decoration:none !important;
  white-space:nowrap;
  transition:background .16s ease, box-shadow .16s ease;
  box-sizing:border-box;
}
.gcl-card .gcl-card__button:hover{
  background:var(--gclc-green-dark);
  box-shadow:0 6px 16px rgba(23,130,70,.28);
  color:#fff !important;
}
.gcl-card .gcl-card__button:focus-visible{
  outline:2px solid var(--gclc-ink);
  outline-offset:2px;
}

/* ---------- Responsive foot ------------------------------------------------ */
/* The action row stays side by side down to a 230px card. Below that (phone
   grids) a mono price cannot share the row, so the foot STACKS: price on its
   own line, full-width button under it. The short-label swap still applies to
   variable cards between 230px and 280px. */
li.gcl-card,
.gcl-card{
  container-type:inline-size;
  container-name:gclcard;
}
.gcl-card .gcl-card__button-short{display:none}
@container gclcard (max-width:280px){
  .gcl-card .gcl-card__foot{gap:8px}
  .gcl-card .gcl-card__button{padding-inline:14px}
  .gcl-card.product-type-variable .gcl-card__button-full{display:none}
  .gcl-card.product-type-variable .gcl-card__button-short{display:inline}
}
@container gclcard (max-width:229px){
  .gcl-card .gcl-card__foot{grid-template-columns:minmax(0,1fr);gap:10px}
  .gcl-card .gcl-card__foot::before{display:none}
  .gcl-card .gcl-card__price{grid-column:1;font-size:15px}
  .gcl-card .gcl-card__from{font-size:.7em}
  .gcl-card .gcl-card__button{grid-column:1;justify-self:stretch;width:100%;max-width:none;min-height:40px;padding-inline:10px;font-size:13px}
  .gcl-card.product-type-variable .gcl-card__button-full{display:inline}
  .gcl-card.product-type-variable .gcl-card__button-short{display:none}
}

/* ---------- Density -------------------------------------------------------- */
/* Narrow cards (phone grids, dense rails) step the type down a notch. The
   button never shrinks below 42px: it is the primary action. */
@media (max-width:520px){
  .gcl-card{
    --gclc-pad:13px;
    --gclc-title:13.5px;
    --gclc-price:16px;
    --gclc-btn-h:42px;
    --gclc-btn-fs:13px;
  }
  .gcl-card .gcl-card__media{padding:14px}
  /* Phones: titles get a 4th line before clamping (owner 2026-10-07). */
  .gcl-card h2,
  .gcl-card .woocommerce-loop-product__title{-webkit-line-clamp:4;line-clamp:4}
}

@media (prefers-reduced-motion:reduce){
  .gcl-card,
  .gcl-card .gcl-card__media img{transition:none !important}
  .gcl-card:hover{transform:none}
  .gcl-card:hover .gcl-card__media img{transform:none}
}