/* ═══════════════════════════════════════════════════════════════════════════
   MotoMagic — Premium Product Cards  (css/premium-cards.css)
   Additive only. Enhances existing .pcard markup. Touches no JS.
   Load AFTER app.css and images.css in index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card shell: deeper elevation, smoother hover lift ──────────────────────*/
.pcard {
  border-radius: var(--r-lg, 20px);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  background: linear-gradient(180deg, var(--card2, #131315) 0%, var(--card, #0f0f10) 100%);
  transition: transform .32s var(--ease, cubic-bezier(.22,1,.36,1)),
              border-color .32s var(--ease, cubic-bezier(.22,1,.36,1)),
              box-shadow .32s var(--ease, cubic-bezier(.22,1,.36,1));
  overflow: hidden;
  will-change: transform;
}
.pcard:hover {
  transform: translateY(-6px);
  border-color: var(--line2, rgba(255,255,255,.14));
  box-shadow: 0 28px 64px -28px rgba(0,0,0,.85),
              0 0 0 1px rgba(255,255,255,.04) inset;
}
.pcard:focus-visible {
  outline: 2px solid var(--red, #E30613);
  outline-offset: 3px;
}

/* ── Media: uniform image area, cleaner presentation ───────────────────────*/
.pmedia {
  position: relative;
  aspect-ratio: 1 / 1;             /* uniform square across every card */
  background:
    radial-gradient(120% 120% at 50% 15%, rgba(255,255,255,.04) 0%, transparent 55%),
    var(--card, #0f0f10);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Larger, cleaner product photo — fills the frame consistently */
.pmedia img.pimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  opacity: 1;
  transition: transform .5s var(--ease, cubic-bezier(.22,1,.36,1));
}
.pcard:hover .pmedia img.pimg {
  transform: scale(1.07);          /* subtle zoom on hover */
}

/* SVG art fallback sizing matches photos */
.pmedia .art {
  width: 62%;
  height: 62%;
  opacity: .9;
}

/* ── Badges: premium pill style with better hierarchy ──────────────────────*/
.pmedia [class^="badge"],
.pmedia .launch-badge,
.pmedia .badge-disc {
  position: absolute;
  top: 12px;
  z-index: 3;
  font-family: var(--font-b, sans-serif);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 99px;
  backdrop-filter: blur(8px);
  border: 1px solid transparent;
  line-height: 1;
}
/* Primary badge (New / Bestseller / Limited) — top left */
.pmedia [class^="badge"]:not(.badge-disc),
.pmedia .launch-badge {
  left: 12px;
  background: rgba(9,9,9,.72);
  color: #fff;
  border-color: rgba(255,255,255,.14);
}
/* Launch / sale gets accent gradient */
.pmedia .launch-badge {
  background: linear-gradient(135deg, var(--red, #E30613), var(--accent, #FF2020));
  border-color: transparent;
  box-shadow: 0 4px 14px -4px rgba(227,6,19,.6);
}
/* Discount badge — top right, red */
.pmedia .badge-disc {
  right: 12px;
  background: var(--red, #E30613);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(227,6,19,.5);
}

/* ── Wishlist heart: cleaner, better hover ─────────────────────────────────*/
.pmedia .wish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(9,9,9,.6);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--gray, #A0A0A0);
  backdrop-filter: blur(8px);
  transition: transform .2s var(--ease), background .2s, color .2s;
  opacity: 0;                       /* reveal on card hover */
}
.pcard:hover .pmedia .wish { opacity: 1; }
.pmedia .wish:hover { transform: scale(1.12); background: rgba(9,9,9,.85); color: #fff; }
.pmedia .wish.on { color: var(--red, #E30613); opacity: 1; }
/* When a disc badge occupies top-right, nudge the heart down */
.pmedia:has(.badge-disc) .wish { top: 48px; }

/* ── Quick actions: slide up on hover ──────────────────────────────────────*/
.sp-qa {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.pcard:hover .sp-qa { transform: none; opacity: 1; }
.sp-qa-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid;
  transition: background .15s, transform .15s;
}
.sp-qa-btn:active { transform: scale(.96); }
.sp-qa-view {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
}
.sp-qa-view:hover { background: rgba(255,255,255,.24); }
.sp-qa-cart {
  background: var(--red, #E30613);
  color: #fff;
  border-color: transparent;
}
.sp-qa-cart:hover { background: #c80511; }
/* Hide quick actions on touch devices (no hover) — keep card tap working */
@media (hover: none) {
  .sp-qa { position: static; transform: none; opacity: 1; margin-top: 10px; }
  .pmedia .wish { opacity: 1; }
}

/* ── Body: better spacing and type hierarchy ───────────────────────────────*/
.pbody { padding: 15px 16px 17px; }

.pcat {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--gray-dim, #6b6b6b);
  margin-bottom: 5px;
}

/* Product name: clamp to 2 lines so every card is the same height */
.pbody > a,
.pbody .pname {
  font-family: var(--font-d, sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white, #fff);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* ── Price hierarchy: current price dominant, EUR subtle ───────────────────*/
.prow { margin-top: 10px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.current-price {
  font-family: var(--font-d, sans-serif);
  font-size: 18px;
  font-weight: 800;
  color: var(--white, #fff);
  letter-spacing: -.3px;
}
.old-price {
  font-size: 12.5px;
  color: var(--gray-dim, #6b6b6b);
  text-decoration: line-through;
}
.price-eur { font-size: 11.5px; color: var(--gray-dim, #6b6b6b); }
.price { font-family: var(--font-d, sans-serif); font-size: 18px; font-weight: 800; }

/* ── Stars / rating row ─────────────────────────────────────────────────────*/
.stars { color: #fbbf24; font-size: 12px; letter-spacing: 1px; }

/* ── Add-to-cart button: premium press animation ───────────────────────────*/
.addcart, .pbody .btn-red {
  transition: transform .15s var(--ease), background .15s, box-shadow .2s;
}
.addcart:hover, .pbody .btn-red:hover {
  box-shadow: 0 8px 20px -8px rgba(227,6,19,.5);
}
.addcart:active, .pbody .btn-red:active { transform: scale(.97); }

/* ── Staggered entrance for the grid ───────────────────────────────────────*/
@keyframes pcardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.pcard { animation: pcardIn .4s var(--ease, cubic-bezier(.22,1,.36,1)) both; }
.pcard:nth-child(1)  { animation-delay: .02s; }
.pcard:nth-child(2)  { animation-delay: .06s; }
.pcard:nth-child(3)  { animation-delay: .10s; }
.pcard:nth-child(4)  { animation-delay: .14s; }
.pcard:nth-child(5)  { animation-delay: .18s; }
.pcard:nth-child(6)  { animation-delay: .22s; }
.pcard:nth-child(7)  { animation-delay: .26s; }
.pcard:nth-child(8)  { animation-delay: .30s; }
.pcard:nth-child(n+9){ animation-delay: .34s; }

/* Failsafe: product cards must never stay invisible if the pcardIn entrance
   animation is deferred (e.g. inserted during an SPA route swap while the page
   is display:none, so the animation never runs its opacity 0->1). An important
   author rule outranks animation-declared values in the cascade, so this forces
   the resting opacity to 1 while leaving the translateY slide-in intact. */
#shop-grid > .pcard,
#parts-grid > .pcard,
.prod-grid > .pcard { opacity: 1 !important; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .pcard, .pmedia img.pimg, .sp-qa, .pmedia .wish { animation: none !important; transition: none !important; }
  .pcard:hover { transform: none; }
  .pcard:hover .pmedia img.pimg { transform: none; }
}

/* ── Mobile: tighter, touch-friendly ───────────────────────────────────────*/
@media (max-width: 600px) {
  .pbody { padding: 13px 13px 15px; }
  .pbody > a, .pbody .pname { font-size: 14px; }
  .current-price, .price { font-size: 16.5px; }
  .pmedia img.pimg { padding: 10%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EQUAL-HEIGHT CARDS  (appended — Priority 3 pass)
   Guarantees every card ends at the same height with the Add-to-cart button
   pinned to the bottom, regardless of description / rating / badge presence.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card becomes a flex column so body can stretch and button pins to bottom */
.pcard {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Media never shrinks — keeps the uniform square across all cards */
.pcard .pmedia { flex: 0 0 auto; }

/* Body grows to fill; price row is pushed toward the bottom */
.pcard .pbody {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* The price row (.prow) sits at the bottom of the body via auto top margin */
.pcard .pbody .prow {
  margin-top: auto;
  padding-top: 8px;
}

/* Add-to-cart bar always pinned to the very bottom of the card */
.pcard .addcart {
  flex: 0 0 auto;
  margin-top: 0;
}

/* Ensure the grid stretches cards to equal row height */
#shop-grid,
#parts-grid,
.prod-grid,
.pgrid {
  align-items: stretch;
}
#shop-grid > *,
#parts-grid > *,
.prod-grid > *,
.pgrid > * {
  display: flex;   /* let each grid cell stretch its .pcard to full height */
}

/* Product name: consistent 2-line reserve so price rows align across cards */
.pcard .pbody > b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 4 — Premium product-card refinements
   Appended last; article.pcard specificity layers cleanly over earlier rules
   and later stylesheets. CSS-only — no markup or JS changes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grid rhythm + responsiveness */
.prod-grid { gap: 18px; }
@media (min-width:1100px){ .prod-grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:1099px) and (min-width:760px){ .prod-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:759px)  and (min-width:520px){ .prod-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:519px){ .prod-grid{ grid-template-columns:1fr } }

/* Card shell — depth + smoother motion */
article.pcard{
  border-radius:18px;
  background:linear-gradient(180deg,#141416,#0f0f11);
  border:1px solid var(--line,rgba(255,255,255,.07));
  transition:transform .32s var(--ease,cubic-bezier(.22,1,.36,1)),box-shadow .32s,border-color .32s;
}
article.pcard:hover{
  transform:translateY(-6px);
  border-color:rgba(227,6,19,.28);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95), 0 8px 20px -14px rgba(227,6,19,.4);
}

/* Image presentation — full image always visible (contain), never cropped or zoomed.
   Keeps the Moto Magic logo (top-left of each photo) fully in view via padding,
   and a fixed square frame so every card stays aligned regardless of source size. */
article.pcard .pmedia{
  aspect-ratio:1/1; height:auto; min-height:0; overflow:hidden;
}
article.pcard .pmedia img.pimg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain !important;
  object-position:center !important;
  padding:12%;
  transform:none !important;
  transition:opacity .3s ease;
}
article.pcard:hover .pmedia img.pimg{ transform:none !important; }
article.pcard .pmedia .art,
article.pcard:hover .pmedia .art{ object-fit:contain; transform:none !important; }

/* Discount badge — premium gradient pill */
article.pcard .pmedia .badge-disc{
  background:linear-gradient(180deg,#F5121F,var(--red,#E30613));
  color:#fff; font-weight:800; font-size:11px; letter-spacing:.3px;
  padding:5px 9px; border-radius:8px; border:none;
  box-shadow:0 6px 16px -6px rgba(227,6,19,.7), inset 0 1px 0 rgba(255,255,255,.25);
}

/* Wishlist — refined + pop animation on toggle */
article.pcard .pmedia .wish{
  border-radius:50%; backdrop-filter:blur(6px);
  transition:transform .2s var(--ease),background .2s,color .2s,opacity .2s;
}
article.pcard .pmedia .wish:active{ transform:scale(.86); }
article.pcard .pmedia .wish.on{ color:var(--red,#E30613); animation:wishPop .34s var(--ease,cubic-bezier(.22,1,.36,1)); }
@keyframes wishPop{ 0%{transform:scale(.7)} 45%{transform:scale(1.25)} 100%{transform:scale(1)} }

/* Quick actions — premium quick-view + cart on hover */
article.pcard .sp-qa{ gap:8px; }
article.pcard .sp-qa-btn{
  border-radius:10px; font-weight:700; font-size:12.5px; padding:10px 12px;
  backdrop-filter:blur(8px); transition:transform .18s var(--ease),background .2s,box-shadow .2s;
}
article.pcard .sp-qa-view{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); color:#fff; }
article.pcard .sp-qa-view:hover{ background:rgba(255,255,255,.24); transform:translateY(-1px); }
article.pcard .sp-qa-cart{
  background:linear-gradient(180deg,#F5121F,var(--red,#E30613)); color:#fff;
  box-shadow:0 8px 20px -8px rgba(227,6,19,.7);
}
article.pcard .sp-qa-cart:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(227,6,19,.8); }

/* Body — spacing + typography */
article.pcard .pbody{ padding:16px 17px 18px; }
article.pcard .pbody .pcat{ font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray-dim,#7a7a7a); }
article.pcard .pbody > b{
  font-family:var(--font-d,sans-serif); font-size:15px; font-weight:700;
  letter-spacing:-.2px; line-height:1.32; color:#fff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Rating */
article.pcard .stars{
  display:inline-flex; align-items:center; gap:4px; color:#fbbf24;
  font-size:12px; font-weight:700; font-family:var(--font-m,monospace);
}

/* Stock — subtle pill (keeps its status colour) */
article.pcard .pbody span[style*="margin-left:auto"]{
  font-size:10.5px!important; font-weight:700!important; letter-spacing:.3px;
  padding:3px 8px; border-radius:99px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
}

/* Price hierarchy */
article.pcard .current-price,
article.pcard .price{ font-family:var(--font-d,sans-serif); font-size:19px; font-weight:800; letter-spacing:-.4px; color:#fff; }
article.pcard .old-price,
article.pcard .price s{ color:var(--gray-dim,#6b6b6b); font-size:12px; text-decoration:line-through; }
article.pcard .price-eur{ font-size:11px; color:var(--gray-dim,#6b6b6b); }

/* Add to cart */
article.pcard .addcart{ padding:0 16px 16px; }
article.pcard .addcart .btn-red{
  border-radius:12px; min-height:44px; font-weight:700;
  background:linear-gradient(180deg,#F5121F,var(--red,#E30613));
  box-shadow:0 8px 22px -10px rgba(227,6,19,.6), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s var(--ease),box-shadow .24s,filter .2s;
}
article.pcard .addcart .btn-red:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(227,6,19,.72); }
article.pcard .addcart .btn-red:active{ transform:translateY(0) scale(.99); }
article.pcard .addcart .btn-red[disabled]{ filter:grayscale(.6) brightness(.7); box-shadow:none; transform:none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  article.pcard, article.pcard *{ transition:none!important; animation:none!important; }
  article.pcard:hover{ transform:none; }
  article.pcard:hover .pmedia img.pimg, article.pcard:hover .pmedia .art{ transform:none; }
}

/* ═══════════════ Phase 12 — final shop card polish (Accessories + Parts) ══ */
/* Equal heights, aligned titles/price, premium hover glow, subtle zoom, fade-in.
   CSS-only; card size, routing, cart and product data are unchanged. */

article.pcard{display:flex;flex-direction:column;position:relative;isolation:isolate}
article.pcard::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:0 0 0 1px transparent;transition:box-shadow .3s}
article.pcard:hover{transform:translateY(-6px);
  box-shadow:0 34px 66px -30px rgba(0,0,0,.96),0 10px 26px -14px rgba(227,6,19,.42)}
article.pcard:hover::after{box-shadow:inset 0 0 0 1px rgba(227,6,19,.42),inset 0 0 30px -6px rgba(227,6,19,.3)}

/* Slightly larger product image, smooth fade-in, subtle hover zoom (logo stays visible) */
article.pcard .pmedia img.pimg{padding:10%;opacity:0;
  transition:opacity .45s ease,transform .5s var(--ease,cubic-bezier(.22,1,.36,1))}
article.pcard .pmedia img.pimg.img-loaded{opacity:1}
article.pcard:hover .pmedia img.pimg{transform:scale(1.03) !important}

/* Body: equal heights + bottom-aligned price for a clean grid */
article.pcard .pbody{flex:1;display:flex;flex-direction:column}
article.pcard .pbody .prow{margin-top:auto}

/* Price = strongest element */
article.pcard .current-price,article.pcard .price{font-size:20px;font-weight:800;letter-spacing:-.5px;color:#fff}
article.pcard .price-eur{font-size:11px}
article.pcard .old-price,article.pcard .price s{font-size:12px}

/* Stock chip — keep its state colour, present it as a refined pill */
article.pcard .pbody span[style*="margin-left:auto"]{
  padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.05);
  border:1px solid currentColor;filter:saturate(.9)}

/* Quick actions — smooth, unchanged card size */
article.pcard .sp-qa{transition:opacity .24s ease,transform .24s var(--ease,ease)}
article.pcard .wish{transition:transform .2s var(--ease,ease),background .2s,color .2s}
article.pcard .wish:active{transform:scale(.86)}

@media (prefers-reduced-motion: reduce){
  article.pcard:hover{transform:none}
  article.pcard:hover .pmedia img.pimg{transform:none !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   Product cards v2 — top-left badge stack, save/compare/share cluster,
   hover image-swap, 5-star rating, installment + shipping meta.
   Additive: extends the .pcard rules above, no duplicated selectors.
   ══════════════════════════════════════════════════════════════════════════ */

/* Top-left badge column (primary badge + one derived flag) */
.pmedia-tl{position:absolute;left:12px;top:12px;z-index:3;display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:calc(100% - 60px)}
.pmedia-tl [class^="badge"]:not(.badge-disc){position:static;left:auto;top:auto}
.pcard-flag{position:static;font-family:var(--font-b,sans-serif);font-size:10.5px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;padding:5px 11px;border-radius:99px;line-height:1;border:1px solid transparent;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pcard-flag.limited{background:linear-gradient(135deg,#b8860b,#f0a500);color:#1a1200}
.pcard-flag.best{background:rgba(9,9,9,.72);color:#ffd36b;border-color:rgba(255,211,107,.4)}
.pcard-flag.new{background:#1e6b3a;color:#eafff0;border-color:rgba(120,255,170,.3)}

/* Action cluster — save (existing) + compare + share, top-right column */
.pcard-actions{position:absolute;top:12px;right:12px;z-index:4;display:flex;flex-direction:column;gap:7px}
.pmedia:has(.badge-disc) .pcard-actions{top:44px}
.pcard-actions .wish{position:static;top:auto;right:auto;transform:none}
.pcard-act{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(9,9,9,.6);border:1px solid rgba(255,255,255,.12);color:var(--gray,#A0A0A0);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;opacity:0;
  transition:transform .2s var(--ease),background .2s,color .2s,opacity .2s}
.pcard:hover .pcard-act,.pcard:focus-within .pcard-act,.pcard-act.on{opacity:1}
.pcard-act:hover{transform:scale(1.12);background:rgba(9,9,9,.85);color:#fff}
.pcard-act:active{transform:scale(.94)}
.pcard-act:focus-visible{outline:2px solid var(--red,#E30613);outline-offset:2px}
.pcard-share.copied{color:#37d67a;border-color:rgba(55,214,122,.5)}
@media (hover:none){.pcard-act{opacity:1}}
/* Saved-heart pop on real taps (mmcPop keyframe is loaded globally via marketplace.css) */
.pcard .wish.mmc-pop svg{animation:mmcPop .38s var(--ease,ease)}
@media (prefers-reduced-motion:reduce){.pcard .wish.mmc-pop svg{animation:none}}

/* Hover image swap (only rendered when a 2nd real image exists) */
.pmedia img.pimg-hover{opacity:0;transition:opacity .35s var(--ease,ease),transform .5s var(--ease,ease)}
@media (hover:hover){
  .pcard:hover .pmedia img.pimg-hover{opacity:1}
  .pcard:hover .pmedia img.pimg:not(.pimg-hover){opacity:0}
}
@media (prefers-reduced-motion:reduce){.pmedia img.pimg-hover{transition:opacity .35s ease}}

/* 5-star rating row (real rating data) */
.pcard-rate{display:flex;align-items:center;gap:7px;margin:6px 0 10px}
.pcard-stars{display:inline-flex;align-items:center;gap:2px}
.pcard-stars svg{color:rgba(255,255,255,.16)}
.pcard-stars svg.on{color:#fbbf24}
.pcard-stars b{margin-left:5px;font-size:12px;font-weight:700;color:#e9e9e9;font-family:var(--font-m,monospace)}
.pcard-rev{font-size:11.5px;color:var(--gray-dim,#6b6b6b)}
.pcard-stock{margin-left:auto;font-size:11px;font-weight:600}

/* Installment + free-shipping + delivery meta */
.pcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px;
  font-size:11px;font-family:var(--font-m,monospace);color:var(--gray,#9a9a9a)}
.pcard-inst{color:var(--gray,#b4b4b4)}
.pcard-ship{display:inline-flex;align-items:center;gap:5px;color:#37d67a;font-weight:600}
.pcard-ship svg{color:#37d67a}
.pcard-deliv{color:var(--gray-dim,#6b6b6b)}

/* Reusable product-card delivery row */
.product-card-delivery{
  min-height:48px;margin-top:12px;padding-top:11px;
  display:flex;align-items:center;gap:9px;
  border-top:1px solid rgba(255,255,255,.07);
}
.product-card-delivery__icon{
  width:30px;height:30px;flex:0 0 30px;
  display:grid;place-items:center;border-radius:9px;
  color:#ff172b;background:rgba(255,23,43,.08);border:1px solid rgba(255,23,43,.22);
}
.product-card-delivery__content strong{
  display:block;color:#f4f4f5;font-size:11.5px;font-weight:700;line-height:1.25;
}
.product-card-delivery__content small{
  display:block;margin-top:3px;color:#35d878;
  font-size:10.5px;font-weight:700;line-height:1.2;
  text-transform:uppercase;letter-spacing:.04em;
}

/* Product-card price hierarchy with savings row */
.product-card-price{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
article.pcard .product-card-price__original{
  color:rgba(255,255,255,.42);font-size:12px;font-weight:500;line-height:1.2;
  text-decoration:line-through;text-decoration-thickness:1px;
}
article.pcard .product-card-price__current{
  color:#f7f7f8;font-size:23px;font-weight:850;line-height:1.05;letter-spacing:-.02em;
}
.product-card-price .price-eur{font-size:12px;color:var(--gray-dim,#6b6b6b);line-height:1.2}
.product-card-price__saving{
  display:inline-flex;align-items:center;margin-top:3px;padding:5px 8px;
  color:#3ee683;background:rgba(38,210,112,.08);border:1px solid rgba(38,210,112,.20);
  border-radius:7px;font-size:10.5px;font-weight:750;line-height:1.2;
}

/* ═══════════════ Card hierarchy polish (scan order + reserved heights) ═════
   CSS-only. Strengthens title / current-price / CTA; quiets category, brand,
   description, review count, delivery subtitle; reserves consistent heights so
   rows align across the grid and the Add-to-cart button pins to the bottom.
   No DOM, routing, cart or product-data changes. */

/* Category (quiet, uppercase) + brand (quieter) */
article.pcard .pbody .pcat{
  min-height:14px;margin-bottom:3px;
  font-size:10px;font-weight:750;letter-spacing:.11em;
  color:rgba(255,255,255,.52);
}
article.pcard .pbody > div[style*="text-transform:uppercase"]{
  font-size:9.5px !important;font-weight:650 !important;letter-spacing:.08em !important;
  color:rgba(255,255,255,.34) !important;margin-bottom:6px !important;
}

/* Title = strong, exactly two lines, reserved height */
article.pcard .pbody > b{
  min-height:44px;margin:2px 0 0;
  font-size:16px;font-weight:800;line-height:1.42;letter-spacing:-.01em;color:#f7f7f8;
  -webkit-line-clamp:2;line-clamp:2;
}

/* Description = light, reserved height (two lines on the card) */
article.pcard .pbody > p{
  min-height:38px;margin:9px 0 0 !important;
  color:rgba(255,255,255,.52) !important;font-size:12.5px !important;
  line-height:1.5 !important;font-weight:400 !important;
}

/* Rating + stock row — single tidy line */
article.pcard .pbody .pcard-rate{min-height:24px;margin-top:11px}
article.pcard .pcard-rev{color:rgba(255,255,255,.40);font-size:10.5px}

/* Offer badge — compact, consistent slot */
article.pcard .launch-badge{margin-bottom:2px}

/* Current price = strongest price */
article.pcard .product-card-price__current,
article.pcard .current-price,article.pcard .price{
  font-size:23px !important;font-weight:850 !important;letter-spacing:-.02em !important;color:#f8f8f9 !important;
}

/* Keep pricing directly under the offer; delivery + CTA anchor to the bottom */
article.pcard .pbody .prow{margin-top:auto}
article.pcard .pbody .product-card-delivery{margin-top:12px}

/* Add-to-cart — clear primary CTA, pinned to the bottom of every card */
article.pcard .addcart .btn-red{min-height:44px;border-radius:12px;font-weight:800;font-size:13px}
article.pcard .addcart .btn-red[disabled]{cursor:not-allowed}

/* Compatibility tags — compact, supporting (between description and rating) */
article.pcard .product-card__compatibility{
  min-height:26px;margin-top:9px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;overflow:hidden;
}
article.pcard .product-card__compatibility-tag{
  max-width:100%;padding:5px 8px;border:1px solid rgba(255,23,43,.22);border-radius:999px;
  color:rgba(255,255,255,.72);background:rgba(255,23,43,.07);
  font-size:9.5px;font-weight:700;line-height:1;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
article.pcard .product-card__compatibility-tag:first-child{
  color:#f5f5f6;border-color:rgba(255,23,43,.34);
}
article.pcard .product-card__compatibility-tag.pcc-more{
  color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04);
}
/* Mobile: show only the two highest-priority tags (3rd becomes overflow) */
@media (max-width:519px){
  article.pcard .product-card__compatibility-tag:nth-child(n+3):not(.pcc-more){display:none}
}

/* ═══════════════ Compact action row (cart + wishlist + compare) ═══════════
   Screenshot-1 layout: one Add-to-cart taking remaining width, plus square
   wishlist and compare buttons. Overlay actions on the image are removed. */
article.pcard .product-card__actions{
  position:static;left:auto;right:auto;bottom:auto;top:auto;
  transform:none;opacity:1;z-index:auto;
  width:100%;margin-top:12px;
  display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:center;
}
article.pcard .product-card__add-to-cart,
article.pcard .product-card__wishlist{height:44px;border-radius:10px}
article.pcard .product-card__add-to-cart{
  position:static;width:100%;grid-column:auto;
  min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid #ef1026;color:#fff;background:#eb071d;
  font-size:12px;font-weight:800;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
article.pcard .product-card__add-to-cart:hover{
  background:#ff1028;border-color:#ff2539;transform:translateY(-1px);box-shadow:0 8px 18px rgba(235,7,29,.18);
}
article.pcard .product-card__add-to-cart:disabled{
  cursor:not-allowed;opacity:.48;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10);
  box-shadow:none;transform:none;
}
article.pcard .product-card__wishlist{
  position:static;top:auto;right:auto;left:auto;bottom:auto;
  transform:none;opacity:1;z-index:auto;
  width:44px;min-width:44px;max-width:44px;height:44px;margin:0;flex:0 0 44px;
  display:grid;place-items:center;padding:0;
  color:rgba(255,255,255,.78);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10);
  cursor:pointer;transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
article.pcard .product-card__wishlist:hover{
  color:#fff;border-color:rgba(255,23,43,.45);background:rgba(255,23,43,.09);transform:translateY(-1px);
}
/* Active states (delegation sets aria-pressed / .on) */
article.pcard .product-card__wishlist[aria-pressed="true"],
article.pcard .product-card__wishlist.on{
  color:#ff2b3d;border-color:rgba(255,23,43,.55);background:rgba(255,23,43,.12);
}
/* Keep the image clean: only a hover "View" chip remains (desktop) */
article.pcard .sp-qa--view{ justify-content:center; }
@media (hover:none){ article.pcard .sp-qa--view{ display:none; } }

/* ═══════════════ Product-card color swatches ═══════════════════════════════ */
article.pcard .product-card-colors{
  min-height:32px;margin-top:9px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
article.pcard .product-card-colors__label{
  color:rgba(255,255,255,.48);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.08em;
}
article.pcard .product-card-colors__swatches{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
article.pcard .product-card-colors__sel{color:rgba(255,255,255,.68);font-size:10px;font-weight:600}
article.pcard .product-color-swatch{
  width:20px;height:20px;padding:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);background:var(--swatch-color);
  cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.55);
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
  position:relative;
}
article.pcard .product-color-swatch:hover{transform:scale(1.08);border-color:rgba(255,255,255,.65)}
article.pcard .product-color-swatch:focus-visible{outline:2px solid #ff172b;outline-offset:2px}
article.pcard .product-color-swatch.is-selected{
  border-color:#fff;box-shadow:0 0 0 2px #111,0 0 0 3px #ef1026;
}
article.pcard .product-color-swatch.is-included{cursor:default;box-shadow:0 0 0 1px rgba(0,0,0,.55)}
article.pcard .product-color-more{
  width:auto;min-width:24px;height:20px;border-radius:10px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.72);
  font-size:9.5px;font-weight:700;padding:0 6px;box-shadow:none;
}
article.pcard .product-card-colors.needs-pick .product-color-swatch:not(.is-selected){
  border-color:rgba(255,23,43,.55);
}
article.pcard .product-color-swatch-err{
  width:100%;color:#ff5063;font-size:10px;font-weight:700;margin-top:2px;
}
/* PD color swatches — premium, larger, obvious selected ring */
#page-product .pd-color-options{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
#page-product .pd-color-swatch{
  width:36px;height:36px;padding:3px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.025);
  cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease;
}
#page-product .pd-color-swatch__color{
  width:26px;height:26px;display:block;border-radius:50%;background:var(--swatch-color);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 1px 3px rgba(0,0,0,.35);
}
#page-product .pd-color-swatch:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.48)}
#page-product .pd-color-swatch:focus-visible{outline:2px solid #fff;outline-offset:3px}
#page-product .pd-color-swatch.is-selected{
  border-color:#ef1026;background:rgba(239,16,38,.10);
  box-shadow:0 0 0 2px #090909,0 0 0 3px #ef1026;
}
#page-product .pd-color-swatch.is-selected .pd-color-swatch__color{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 2px 5px rgba(0,0,0,.45);
}
#page-product .pd-color-swatch[disabled]{opacity:.4;cursor:not-allowed}
#page-product .pd-color-selected{margin-top:8px;color:rgba(255,255,255,.62);font-size:11px;line-height:1.3}
#page-product .pd-color-selected strong{color:#f5f5f6;font-weight:750}
@media (max-width:640px){
  #page-product .pd-color-swatch{width:40px;height:40px}
  #page-product .pd-color-swatch__color{width:28px;height:28px}
}