/* =============================================================================
   Product Card — shared component (.pcard)
   Variants: .pcard--compact (new arrivals, related products)
             .pcard--full    (shop archive)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------------- */
.pcard {
    list-style: none;
}

.pcard--full {
    background: var(--ovelia-colors-semantic-surface);
}

.pcard__link {
    display:         block;
    text-decoration: none;
    color:           inherit;
    outline-offset:  2px;
}

.pcard--full .pcard__link {
    padding: 1.5rem;
}

/* -----------------------------------------------------------------------------
   Image wrap
   ----------------------------------------------------------------------------- */
.pcard__image-wrap {
    position:     relative;
    overflow:     hidden;
    aspect-ratio: 3 / 4;
}

.pcard--compact .pcard__image-wrap {
    background: var(--ovelia-colors-powder-100);
}

.pcard--full .pcard__image-wrap {
    background: #f5ece6;
}

.pcard__image {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  transform 0.45s ease;
}

.pcard__link:hover .pcard__image,
.pcard__link:focus-visible .pcard__image {
    transform: scale(1.04);
}

.pcard--compact .pcard__link:hover .pcard__image,
.pcard--compact .pcard__link:focus-visible .pcard__image {
    transform: scale(1.06);
}

/* -----------------------------------------------------------------------------
   Wishlist button (all variants)
   ----------------------------------------------------------------------------- */
.pcard__wishlist {
    position:               absolute;
    top:                    1rem;
    right:                  1rem;
    display:                flex;
    align-items:            center;
    justify-content:        center;
    width:                  2.5rem;
    height:                 2.5rem;
    border-radius:          9999px;
    background:             rgba(255, 255, 255, 0.85);
    backdrop-filter:        blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:             0 1px 2px rgba(0, 0, 0, 0.06);
    color:                  var(--ovelia-colors-semantic-text);
    cursor:                 pointer;
    z-index:                3;
    transition:             background 0.2s;
}

.pcard__wishlist:hover {
    background: rgba(255, 255, 255, 1);
}

@media (min-width: 1024px) {
    .pcard__wishlist {
        opacity: 0;
        transition: opacity 0.2s, background 0.2s;
    }

    .pcard:hover .pcard__wishlist,
    .pcard__wishlist:focus-visible,
    .pcard__wishlist.is-wishlisted {
        opacity: 1;
    }
}

.pcard__wishlist.is-wishlisted path {
    fill:   currentColor;
    stroke: currentColor;
}

/* -----------------------------------------------------------------------------
   Badges
   ----------------------------------------------------------------------------- */
.pcard__badge {
    position:       absolute;
    z-index:        2;
    font-size:      var(--ovelia-typography-fontsize-xs);
    text-transform: uppercase;
    line-height:    1;
    pointer-events: none;
}

/* All variants: glassmorphic pill, top-left */
.pcard__badge {
    top:             0.75rem;
    left:            0.75rem;
    padding:         var(--ovelia-spacing-step-1) var(--ovelia-spacing-step-3);
    border-radius:   9999px;
    font-weight:     500;
    background:      rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    color:           #1e1b18;
}

/* Stack Sale below New */
.pcard__badge--new  { order: 0; }
.pcard__badge--sale { order: 1; }

/* -----------------------------------------------------------------------------
   Info area
   ----------------------------------------------------------------------------- */
.pcard__info {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    padding-top:    0.75rem;
}

.pcard--full .pcard__info {
    padding-top: 1rem;
}

/* Category eyebrow — full only */
.pcard__category {
    font-family:    var(--ovelia-typography-fontfamily-sans);
    font-size:      var(--ovelia-typography-fontsize-xs);
    line-height:    1.25;
    letter-spacing: 0.083em;
    text-transform: uppercase;
    color:          var(--ovelia-colors-semantic-text-subtle);
}

/* Title */
.pcard__title {
    margin:      0;
    font-weight: 400;
    color:       var(--ovelia-colors-semantic-text);
}

.pcard--compact .pcard__title {
    font-family:            var(--ovelia-typography-fontfamily-sans);
    font-size:              var(--ovelia-typography-fontsize-base);
    line-height:            1.5;
    letter-spacing:         var(--ovelia-tracking-label);
    text-transform:         uppercase;
    display:                -webkit-box;
    -webkit-line-clamp:     2;
    -webkit-box-orient:     vertical;
    overflow:               hidden;
}

.pcard--full .pcard__title {
    font-family: var(--ovelia-typography-fontfamily-serif);
    font-size:   var(--ovelia-typography-fontsize-2xl);
    line-height: 1.3;
}

/* Price */
.pcard__price {
    font-size:   var(--ovelia-typography-fontsize-base);
    line-height: 1.5;
    color:       var(--ovelia-colors-semantic-text-subtle);
}

.pcard__price .woocommerce-Price-amount          { color: var(--ovelia-colors-semantic-text-subtle); }
.pcard__price del .woocommerce-Price-amount      { opacity: 0.55; }
.pcard__price ins                                { text-decoration: none; }
.pcard__price ins .woocommerce-Price-amount      { color: var(--ovelia-colors-semantic-sale); }

/* -----------------------------------------------------------------------------
   Stagger reveal animation (opt-in via .pcard--animated)
   ----------------------------------------------------------------------------- */
.pcard--animated {
    opacity:         0;
    transform:       translateY(1.125rem);
    animation:       pcardReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--pcard-index, 0) * 80ms + 100ms);
}

@keyframes pcardReveal {
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcard--animated {
        animation:  none;
        opacity:    1;
        transform:  none;
    }

    .pcard__image,
    .pcard__wishlist {
        transition: none;
    }
}