/* ══════════════════════════════════════════════════════
   Product card variants — modern / compact / luxury
   Colors derive from --app-color set at :root in header.
   ══════════════════════════════════════════════════════ */

/* ── shared color fallback so variants work outside stores too ── */
:root { --pc-color: var(--app-color, #6366f1); }

/* ══════ MODERN ══════ */
.pc-modern { position: relative; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.06); transition: all .25s ease; margin-bottom: 16px; }
.pc-modern:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.10); }
.pc-modern-media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: linear-gradient(135deg,#f3f4f6,#e5e7eb); display: block; }
.pc-modern-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pc-modern:hover .pc-modern-media img { transform: scale(1.06); }
.pc-modern-badge { position: absolute; top: 10px; inset-inline-start: 10px; background: linear-gradient(135deg,#ef4444,#dc2626); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; z-index: 2; box-shadow: 0 3px 8px rgba(239,68,68,.35); }
.pc-modern-overlay { position: absolute; top: 10px; inset-inline-end: 10px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateX(10px); transition: all .2s ease; z-index: 2; }
.pc-modern:hover .pc-modern-overlay { opacity: 1; transform: translateX(0); }
.pc-modern-overlay button { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.95); border: none; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #4b5563; transition: all .15s ease; }
.pc-modern-overlay button:hover { background: var(--pc-color); color: #fff; transform: scale(1.1); }
.pc-modern-info { padding: 12px 14px 14px; }
.pc-modern-title { font-size: 13px; font-weight: 600; color: #1f2937; line-height: 1.4; margin: 0 0 6px; min-height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-modern-title a { color: inherit; text-decoration: none; }
.pc-modern-colors { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.pc-modern-colors img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px #e5e7eb; cursor: pointer; }
.pc-modern-priceline { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.pc-modern-price { color: var(--pc-color); font-size: 16px; font-weight: 800; }
.pc-modern-oldprice { color: #9ca3af; font-size: 12px; text-decoration: line-through; }
.pc-modern-oos { color: #ef4444; font-size: 11px; font-weight: 600; margin-inline-start: auto; }
.pc-modern-cta { display: block; width: 100%; text-align: center; padding: 9px 12px; border-radius: 8px; border: none; background: var(--pc-color); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s ease; filter: saturate(1.05); }
.pc-modern-cta:hover { transform: translateY(-1px); filter: brightness(1.08) saturate(1.1); box-shadow: 0 6px 14px rgba(0,0,0,.15); }
.pc-modern-cta i { margin-inline-end: 4px; }

/* ══════ COMPACT ══════ */
.pc-compact { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05); margin-bottom: 10px; transition: all .15s ease; border: 1px solid #f3f4f6; }
.pc-compact:hover { border-color: var(--pc-color); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.pc-compact-media { flex-shrink: 0; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg,#f3f4f6,#e5e7eb); position: relative; display: block; }
.pc-compact-media img { width: 100%; height: 100%; object-fit: cover; }
.pc-compact-badge { position: absolute; top: 4px; inset-inline-start: 4px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.pc-compact-info { flex: 1; min-width: 0; }
.pc-compact-title { font-size: 13px; font-weight: 600; color: #1f2937; line-height: 1.3; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-compact-title a { color: inherit; text-decoration: none; }
.pc-compact-priceline { display: flex; align-items: baseline; gap: 6px; }
.pc-compact-price { color: var(--pc-color); font-size: 14px; font-weight: 800; }
.pc-compact-oldprice { color: #9ca3af; font-size: 11px; text-decoration: line-through; }
.pc-compact-oos { color: #ef4444; font-size: 10px; font-weight: 600; }
.pc-compact-colors { display: flex; gap: 3px; margin-top: 4px; }
.pc-compact-colors img { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; box-shadow: 0 0 0 1px #e5e7eb; cursor: pointer; }
.pc-compact-cta { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--pc-color); color: #fff; border: none; cursor: pointer; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.15); transition: all .15s ease; }
.pc-compact-cta:hover { transform: scale(1.08); filter: brightness(1.1); }

/* ══════ LUXURY (dark theme with store color accents) ══════ */
.pc-luxury { position: relative; background: linear-gradient(180deg,#0f172a,#0b0f19); border: 1px solid #1f2937; border-radius: 12px; overflow: hidden; margin-bottom: 16px; transition: all .3s ease; color: #f9fafb; }
.pc-luxury:hover { transform: translateY(-4px); border-color: var(--pc-color); box-shadow: 0 12px 40px rgba(0,0,0,.30); }
.pc-luxury-media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: linear-gradient(135deg,#1e293b,#0f172a); border-bottom: 1px solid #1f2937; display: block; }
.pc-luxury-media img { width: 100%; height: 100%; object-fit: cover; opacity: .95; transition: all .35s ease; filter: contrast(1.05); }
.pc-luxury:hover .pc-luxury-media img { opacity: 1; transform: scale(1.05); }
.pc-luxury-badge { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--pc-color); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 2px; letter-spacing: 1px; z-index: 2; }
.pc-luxury-info { padding: 16px 14px 14px; text-align: center; }
.pc-luxury-title { font-size: 12px; font-weight: 500; color: #f9fafb; line-height: 1.4; margin: 0 0 8px; letter-spacing: 1.5px; text-transform: uppercase; min-height: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-luxury-title a { color: inherit; text-decoration: none; }
.pc-luxury-divider { width: 24px; height: 1px; background: var(--pc-color); margin: 0 auto 8px; opacity: .8; }
.pc-luxury-priceline { margin-bottom: 12px; }
.pc-luxury-price { color: var(--pc-color); font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.pc-luxury-oldprice { color: #6b7280; font-size: 11px; text-decoration: line-through; margin-inline-start: 6px; }
.pc-luxury-oos { display: block; color: #ef4444; font-size: 10px; font-weight: 600; margin-top: 4px; letter-spacing: 1px; }
.pc-luxury-colors { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.pc-luxury-colors img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; border: 1px solid #334155; cursor: pointer; }
.pc-luxury-cta { display: block; width: 100%; text-align: center; padding: 10px 12px; border-radius: 2px; border: 1px solid var(--pc-color); background: transparent; color: var(--pc-color); font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: 2px; text-transform: uppercase; transition: all .2s ease; }
.pc-luxury-cta:hover { background: var(--pc-color); color: #fff; }
.pc-luxury-cta i { margin-inline-end: 6px; }