/**
 * Product Cards – Velviq (refined)
 * - Subtle gold personality, sharper type, accessible hovers/focus
 * - Keeps your class names so templates don't change
 */

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-card * {
      transition: none !important;
      animation: none !important;
    }
  }
  
  /* ---------- Card shell ---------- */
  .product-card {
    background: linear-gradient(135deg, var(--color-black-secondary), var(--color-black));
    border-radius: var(--border-radius-lg);
    position: relative;
    overflow: hidden;
    border: var(--border-width-thin) solid var(--color-gold-overlay-light); /* subtle gold hint */
    box-shadow: var(--shadow-md);
    transition: transform 380ms cubic-bezier(.2,.7,.2,1), box-shadow 380ms, border-color 380ms;
    cursor: pointer;
    isolation: isolate; /* keeps overlays inside */
  }
  
  /* Glow frame (outer) */
  .product-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(45deg, var(--color-gold), var(--color-gold-overlay-medium), var(--color-red), var(--color-gold-overlay-medium), var(--color-gold));
    opacity: 0;
    filter: blur(8px);
    transition: opacity 380ms;
    z-index: -1;
  }
  
  /* Gold film (inner) */
  .product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 0% 0%, var(--color-gold-overlay-light) 0%, transparent 40%) no-repeat,
                radial-gradient(120% 120% at 100% 100%, var(--color-gold-overlay-light) 0%, transparent 45%) no-repeat;
    opacity: 0;
    transition: opacity 380ms;
    z-index: 1;
  }
  
  .product-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl), var(--shadow-gold-lg);
    border-color: var(--color-gold-overlay-medium);
  }
  
  .product-card:hover::before { opacity: 1; }
  .product-card:hover::after  { opacity: .85; }
  
  /* Keyboard focus within card */
  .product-card:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-gold-overlay-medium), var(--shadow-lg);
    border-color: var(--color-gold);
  }
  
  /* ---------- Image area ---------- */
  .product-image {
    position: relative;
    height: 280px;
    background: var(--color-black-secondary);
    overflow: hidden;
  }
  
  /* Soft vignette and subtle gold sheen */
  .product-image::before,
  .product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 380ms;
    z-index: 2;
  }
  .product-image::before {
    background: radial-gradient(80% 60% at 50% 20%, transparent 0%, var(--color-black-overlay) 85%);
    opacity: .6;
  }
  .product-image::after {
    /* moving “shine” stripe */
    background: linear-gradient(75deg, transparent 45%, var(--color-gold-overlay-light) 50%, transparent 55%);
    transform: translateX(-120%);
    animation: cardShine 1.4s cubic-bezier(.3,.6,.2,1) both paused;
    opacity: 0;
  }
  
  /* Start shine on hover */
  .product-card:hover .product-image::after { opacity: 1; animation-play-state: running; }
  
  /* Image */
  .product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    transition: transform 600ms cubic-bezier(.2,.7,.2,1);
  }
  .product-card:hover img { transform: scale(1.06) rotate(.4deg); }
  
  /* ---------- Badges ---------- */
  @keyframes badgePulse {
    0%, 100% { transform: translateZ(0) scale(1); box-shadow: 0 0 0 0 var(--color-gold-overlay-light); }
    50%      { transform: translateZ(0) scale(1.03); box-shadow: var(--shadow-gold); }
  }
  
  .product-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    color: var(--color-black);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    z-index: 3;
    animation: badgePulse 2.8s ease-in-out infinite;
  }
  
  .product-badge--new        { background: linear-gradient(135deg, var(--color-danger), var(--color-danger)); }
  .product-badge--bestseller  { background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light)); }
  .product-badge--sale        { background: linear-gradient(135deg, var(--color-red), var(--color-danger)); }
  
  /* ---------- Info / typography ---------- */
  .product-info {
    position: relative;
    z-index: 2;
    padding: 26px 22px 24px;
    background: inherit;
  }
  
  .product-card h4 {
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 0.75vw + 0.8rem, 1.05rem);
    line-height: 1.2;
    font-weight: 800;
    color: var(--color-gold);
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: color 260ms, transform 260ms;
    font-variant-numeric: lining-nums;
  }
  
  .product-card h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 32px;
    background: linear-gradient(90deg, var(--color-gold), transparent);
    opacity: .75;
    transition: width 300ms ease;
  }
  
  .product-card:hover h4 { color: var(--color-gold-light); transform: translateX(2px); }
  .product-card:hover h4::after { width: 56px; }
  
  .product-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 14px;
  }
  
  /* ---------- Price (unified) ---------- */
  .velviq-price-container,
  .product-price-container {
    display: grid;
    place-items: center;
    gap: 10px;
    margin: 18px 0 10px;
  }
  
  .velviq-price-pill,
  .product-price-pill {
    background: color-mix(in oklab, var(--color-black-secondary) 88%, black 12%);
    border-radius: 999px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    border: var(--border-width-thin) solid var(--color-gold-overlay-light);
    min-width: 148px;
    transition: border-color 260ms, box-shadow 260ms, transform 260ms;
    position: relative;
    overflow: hidden;
  }
  
  /* thin inner ring on hover */
  .product-card:hover .velviq-price-pill,
  .product-card:hover .product-price-pill,
  .velviq-price-pill:hover,
  .product-price-pill:hover {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 2px var(--color-gold-overlay-light) inset, var(--shadow-gold);
    transform: translateY(-1px);
  }
  
  .velviq-price-pill::before,
  .product-price-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-gold-overlay-light), transparent 65%);
    opacity: 0;
    transition: opacity 260ms;
  }
  .product-card:hover .velviq-price-pill::before,
  .product-card:hover .product-price-pill::before { opacity: 1; }
  
  .velviq-price-regular,
  .product-price-regular {
    font-size: calc(var(--font-size-sm) - 1px);
    color: var(--color-text-secondary);
    text-decoration: line-through;
    margin-right: -2px;
    font-variant-numeric: tabular-nums;
    opacity: .85;
  }
  
  .velviq-price-current,
  .product-price-current {
    font-size: clamp(1rem, 0.5vw + 0.95rem, 1.1rem);
    color: var(--color-gold);
    font-weight: 800;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
  }
  
  .velviq-price-info,
  .product-price-info {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
  }
  
  /* Woo price fallback alignment */
  .woocommerce ul.products li.product .price,
  .woocommerce div.product p.price,
  .woocommerce div.product span.price,
  .product-card-price {
    color: var(--color-gold) !important;
    font-weight: 800;
    display: grid;
    place-items: center;
    letter-spacing: .02em;
  }
  .woocommerce ul.products li.product .price del,
  .woocommerce div.product p.price del,
  .woocommerce div.product span.price del {
    color: var(--color-text-secondary) !important;
    font-size: var(--font-size-sm);
    text-decoration: line-through;
    opacity: .85;
    font-variant-numeric: tabular-nums;
  }
  .woocommerce ul.products li.product .price ins,
  .woocommerce div.product p.price ins,
  .woocommerce div.product span.price ins {
    color: var(--color-gold) !important;
    font-weight: 800;
    text-decoration: none;
  }
  
  /* ---------- CTA alignment ---------- */
  .product-card .button--product,
  .woocommerce ul.products li.product .button--product,
  .product-card-link .button--product {
    margin-top: 12px !important;
    min-width: 148px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* ---------- Grid ---------- */
  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-xl);
  }
  
  @media (max-width: 768px) {
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-lg); }
    .product-image { height: 220px; }
    .product-info  { padding: 18px 16px; }
  }
  
  /* ---------- Keyframes ---------- */
  @keyframes cardShine {
    0%   { transform: translateX(-140%); }
    100% { transform: translateX(140%); }
  }