/* ============================================================
   COMPETITION TILE

   Concept A. Chrome sits OUTSIDE the artwork on purpose — Jammy prize banners
   already carry the prize name, price, Trustpilot and payment logos, so
   overlaying badges the way Giveaway Guys or Click do would be noise on noise.
   The draw strip frames the image instead of covering it.
   ============================================================ */

/*
 * SPECIFICITY NOTE — this is why the selector is so long.
 *
 * Woo's `.woocommerce ul.products li.product` scores (0,3,2) and sets
 * `width: 22.05%; float: left`. A plain `.jam-tile` at (0,1,0) loses, and the
 * card renders at ~22% of its grid column — about 77px. Prefixing with
 * `.woocommerce` and chaining `li.product.jam-tile` takes this to (0,4,2),
 * which wins outright. The bare `.jam-tile` selector is kept alongside so the
 * card still styles correctly if it's ever rendered outside a Woo loop.
 */
.woocommerce ul.products li.product.jam-tile,
.jam-tile {
  background: var(--white);
  border-radius: var(--card-r);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Woo floats loop items and gives them percentage widths; both must go. */
  float: none;
  clear: none;
  width: auto;
  max-width: none;
  min-width: 0;
  transition: transform .2s, box-shadow .2s;
}
.woocommerce ul.products li.product.jam-tile::before,
.woocommerce ul.products li.product.jam-tile::after { display: none; content: none; }

.jam-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .13);
}

/* ---- Draw strip ----
   Carries BOTH pieces of metadata — when it draws and what type — in one row.
   As separate elements they cost two rows for four words. */
.jam-tile-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 11px;
  background: var(--ink);
}
.jam-tile-strip.is-urgent { background: var(--jam-grad); }

.jam-tile-when {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--white);
  line-height: 1.2;
}
.jam-tile-strip.is-urgent .jam-tile-when { color: var(--cream); }

.jam-tile-type {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: .5px;
  color: var(--white);
  padding: 3px 9px;
  border-radius: var(--pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.jam-tile-type--live    { background: #C4189B; }
.jam-tile-type--instant { background: #3B27C4; }
.jam-tile-type--auto    { background: #0f8a5f; }
/* On the red urgent strip the type pill needs to sit back, not compete. */
.jam-tile-strip.is-urgent .jam-tile-type {
  background: rgba(0, 0, 0, .28);
}

/* ---- Artwork ---- */
.jam-tile-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--white);
  line-height: 0;
}
.jam-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jam-tile.is-over .jam-tile-media img { filter: grayscale(.85) opacity(.5); }

.jam-tile-over {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .5px;
  color: var(--cream);
  text-shadow: 0 2px 0 var(--jam-red-deep);
  background: rgba(255, 255, 255, .35);
}

/* ---- Body ---- */
.jam-tile-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}

.jam-tile-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.22;
  letter-spacing: .2px;
  margin: 0;
  /* Two lines, clamped — ragged card heights are what make a grid look untidy. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.44em;
}
.jam-tile-title a { color: var(--ink); text-decoration: none; }
.jam-tile-title a:hover { color: var(--jam-red); }
.jam-tile.is-over .jam-tile-title a { color: var(--muted); }

/* ---- Price row ---- */
.jam-tile-prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.jam-tile-pleft { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* Woo's price html arrives inside this span; the currency and pence rules
   from style.css apply to it automatically. */
.jam-tile-price .price,
.jam-tile-price .woocommerce-Price-amount,
.jam-tile-price .jam-free,
.jam-tile-price .jam-pence {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 25px;
  color: var(--jam-red);
  text-shadow: 0 2px 0 var(--jam-red-deep);
  line-height: 1;
  margin: 0;
  display: block;
}

.jam-tile-per {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
}

/* ---- Quick add ---- */
.jam-tile-qa {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #2ecc80, #1fa968);
  color: var(--white);
  font-size: 23px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 #17804f;
  transition: transform .16s var(--spring), box-shadow .16s;
}
.jam-tile-qa:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #17804f;
}

/* ---- Progress ----
   The % pill sits ON the bar rather than beside it. A percentage reads as
   momentum; a raw "1,094,871 tickets left" reads as plenty of time, so the
   raw count is demoted below in small grey. */
.jam-tile-prog { position: relative; padding-top: 3px; }

.jam-tile-bar {
  height: 9px;
  border-radius: var(--pill);
  background: #e9e9ee;
  overflow: hidden;
}
.jam-tile-bar i {
  display: block;
  height: 100%;
  border-radius: var(--pill);
  background: var(--jam-grad);
}
.jam-tile-bar.is-hot i { background: linear-gradient(90deg, var(--gold-mid), var(--jam-red)); }

.jam-tile-pct {
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 3px 9px;
  border-radius: var(--pill);
  white-space: nowrap;
  pointer-events: none;
}

.jam-tile-left {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-top: -3px;
}

/* ---- Countdown ----
   Only rendered when the draw is inside the countdown window, so most cards
   never show it and heights stay even. */
.jam-tile-cd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.jam-tile-cdbox {
  background: var(--ink);
  border-radius: 9px;
  padding: 6px 3px;
  text-align: center;
}
.jam-tile-cdbox b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  color: var(--white);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.jam-tile-cdbox i {
  display: block;
  font-style: normal;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-top: 2px;
}
.jam-tile-cd.is-urgent .jam-tile-cdbox { background: var(--jam-red); }
.jam-tile-cd.is-urgent .jam-tile-cdbox i { color: rgba(255, 255, 255, .85); }

/* ---- CTA ---- */
.jam-tile-foot { margin-top: auto; }

.jam-tile-cta {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: .5px;
  background: var(--jam-grad);
  color: var(--cream);
  padding: 12px;
  border-radius: var(--pill);
  text-decoration: none;
  box-shadow: 0 4px 0 var(--jam-red-deep);
  text-shadow: 0 2px 0 rgba(142, 19, 34, .45);
  transition: transform .16s var(--spring), box-shadow .16s;
}
.jam-tile-cta:hover { color: var(--cream); }
.jam-tile-cta:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--jam-red-deep);
}
.jam-tile-cta.is-done {
  background: linear-gradient(135deg, #3a3a40, #26262b);
  box-shadow: 0 4px 0 #131316;
  color: var(--white);
  text-shadow: none;
}

/* ============================================================
   THE GRID

   Applies wherever Woo prints ul.products. Doubled with a .woocommerce
   prefix because the plain selector ties exactly with Woo's own loop rules
   at (0,4,2), and a tie resolves on stylesheet load order.
   ============================================================ */

.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Woo adds clearfix ::before/::after to ul.products. In a GRID container those
 * become grid items — two empty cells eating slots and shunting the cards out
 * of position. Woo's rule is (0,2,2), so the class is doubled here to reach
 * (0,3,2) and win rather than rely on stylesheet load order.
 */
.woocommerce ul.products.products::before,
.woocommerce ul.products.products::after,
ul.products.products::before,
ul.products.products::after {
  display: none;
  content: none;
}

@media (max-width: 1200px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 640px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: 1fr 1fr; gap: 12px; }

  .jam-tile-body { padding: 11px; gap: 9px; }
  .jam-tile-title { font-size: 12.5px; }
  .jam-tile-price .price,
  .jam-tile-price .woocommerce-Price-amount,
  .jam-tile-price .jam-free,
  .jam-tile-price .jam-pence { font-size: 20px; }
  .jam-tile-per { font-size: 9.5px; }
  .jam-tile-cta { font-size: 11.5px; padding: 10px; }
  .jam-tile-qa { width: 36px; height: 36px; font-size: 20px; }
  .jam-tile-when { font-size: 10.5px; }
  .jam-tile-type { font-size: 8.5px; padding: 2px 7px; }
  .jam-tile-cdbox b { font-size: 14px; }
  .jam-tile-strip { padding: 6px 9px; }
}

/* ============================================================
   QUICK-ADD POPUP
   ============================================================ */

.jam-qa-scrim {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(12, 12, 14, .6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.jam-qa-scrim.is-open { display: flex; }
body.jam-qa-open { overflow: hidden; }

.jam-qa-modal {
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}

.jam-qa-head {
  background: var(--jam-grad);
  padding: 15px 17px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.jam-qa-head b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .4px;
}
.jam-qa-x {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: none;
  color: var(--white);
  font-size: 19px;
  cursor: pointer;
  flex-shrink: 0;
}

.jam-qa-body { padding: 17px; }

.jam-qa-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 3px;
}
.jam-qa-meta { font-size: 12px; font-weight: 800; color: var(--jam-red); margin-bottom: 15px; }

.jam-qa-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.jam-qa-preset {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  padding: 11px 4px;
  border-radius: 10px;
  border: 2px solid #e6e6ec;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: all .15s;
}
.jam-qa-preset.is-on {
  background: var(--jam-grad);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 3px 0 var(--jam-red-deep);
}

.jam-qa-qty { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.jam-qa-step {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--jam-grad);
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--jam-red-deep);
  flex-shrink: 0;
}
.jam-qa-range { flex: 1; accent-color: var(--jam-red); }

.jam-qa-tot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f6f6f9;
  border-radius: 12px;
  padding: 11px 15px;
  margin-bottom: 14px;
}
.jam-qa-tot .k {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.jam-qa-tot .v {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  color: var(--jam-red);
  text-shadow: 0 2px 0 var(--jam-red-deep);
}

.jam-qa-add {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .5px;
  background: var(--jam-grad);
  color: var(--cream);
  border: none;
  padding: 13px;
  border-radius: var(--pill);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--jam-red-deep);
  text-shadow: 0 2px 0 rgba(142, 19, 34, .45);
}
.jam-qa-add:disabled { opacity: .6; cursor: default; }

/* ============================================================
   WOO LOOP OVERRIDES

   WooCommerce styles the loop image, title, price and button with selectors
   scoring (0,3,4) and (0,4,2). Every plain .jam-tile-* class scores (0,1,0) or
   (0,2,0) and loses to them — so this block re-states the handful that collide,
   prefixed with `.woocommerce ul.products li.product.jam-tile` to reach (0,5,2)
   or better.

   It's verbose, and it's here rather than merged into the rules above so it's
   obvious WHY these selectors are long. Anything not listed here has no Woo
   equivalent and works at normal specificity.
   ============================================================ */

.woocommerce ul.products li.product.jam-tile .jam-tile-media img {
  width: 100%;
  height: 100%;
  /* Woo sets margin: 0 0 1em here, which would push the image up inside the
     fixed-ratio box and leave a gap under it. */
  margin: 0;
  object-fit: cover;
  display: block;
  box-shadow: none;
}

.woocommerce ul.products li.product.jam-tile .jam-tile-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.22;
  letter-spacing: .2px;
  /* Woo sets padding: .5em 0 */
  padding: 0;
  margin: 0;
  min-height: 2.44em;
}

.woocommerce ul.products li.product.jam-tile .jam-tile-price .price,
.woocommerce ul.products li.product.jam-tile .jam-tile-price .woocommerce-Price-amount,
.woocommerce ul.products li.product.jam-tile .jam-tile-price .jam-free,
.woocommerce ul.products li.product.jam-tile .jam-tile-price .jam-pence {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 25px;
  /* Woo's loop price is a muted green at .857em — this is the rule that made
     the paid prices look wrong while FREE!/pence looked right, because those
     have no Woo equivalent to lose to. */
  color: var(--jam-red);
  text-shadow: 0 2px 0 var(--jam-red-deep);
  line-height: 1;
  margin: 0 0 0;
  display: block;
}

.woocommerce ul.products li.product.jam-tile .jam-tile-cta {
  /* Woo sets margin-top: 1em on loop buttons. */
  margin: 0;
}

@media (max-width: 640px) {
  .woocommerce ul.products li.product.jam-tile .jam-tile-title { font-size: 12.5px; }
  .woocommerce ul.products li.product.jam-tile .jam-tile-price .price,
  .woocommerce ul.products li.product.jam-tile .jam-tile-price .woocommerce-Price-amount,
  .woocommerce ul.products li.product.jam-tile .jam-tile-price .jam-free,
  .woocommerce ul.products li.product.jam-tile .jam-tile-price .jam-pence { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .jam-tile, .jam-tile-cta, .jam-tile-qa, .jam-qa-preset { transition: none; }
}