/* ================================================================
   Part Card — Single source of truth
   Loaded by: index.html, browse-by-category.html,
              browse-parts.html, vehicle-selector.html

   Every part card on the site uses .part-card and is styled ONLY from
   this file. Geometry here matches what browse-by-category rendered
   before unification (200px cover image, 16px content padding, 12px
   radius, 0 4px 12px shadow), which is the agreed reference look.

   Do not add part-card styles anywhere else - not in a page's inline
   <style>, not in browse-category.css, and not in the stylesheet
   script-db.js injects at runtime. Those all used to override this
   file and each page drifted into its own design.
   ================================================================ */

/* ── Card container ─────────────────────────────────────────────── */
.part-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    transition: transform var(--transition-normal),
                box-shadow var(--transition-normal),
                border-color var(--transition-normal);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.part-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-red);
}

/* ── Image ──────────────────────────────────────────────────────── */
.part-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    /* White, not gray-50: with object-fit: contain the leftover space around the
       image is visible, and part photos sit on an opaque white canvas. A grey
       surround would draw a faint frame around every one of them. */
    background: var(--white);
    flex-shrink: 0;
}

.part-image img {
    width: 100%;
    height: 100%;
    /* contain, not cover: the card's width is fluid (the grid is
       minmax(260px, 1fr)) so this frame has no fixed shape, and cover would
       enlarge every image until it filled whatever shape the frame happened to
       be, cropping the rest. Part photos are fitted onto a uniform 350x230
       white canvas by the media library precisely so the grid stops shifting -
       cover was zooming straight past that padding and cutting into the part. */
    object-fit: contain;
    transition: transform var(--transition-normal);
}

/* Desktop: the frame takes the shape of the photos themselves. Every part
   photo is fitted onto a 350x230 canvas (media library), so a fixed 200px
   frame on a ~260px-wide card showed the canvas at 171px with ~15px of empty
   white above and below it, on top of the canvas's own margin - the photo
   sat a long way from its title. Matching the canvas ratio removes that band
   and keeps the photo the same size, up to the old 200px on wider cards.
   Cropping into the canvas instead is not safe: about a third of the photos
   run to its edges. Narrow screens keep their fixed heights (below, and in
   redesign.css / browse-category.css); a list view sets its own box. */
@media (min-width: 641px) {
    .part-image {
        height: auto;
        aspect-ratio: 350 / 230;
        max-height: 200px; /* wide cards (browse pages) keep the old height */
    }

    /* .part-card for specificity: the base .part-content rule comes later. */
    .part-card .part-content {
        padding-top: var(--space-3);
    }
}

.part-card:hover .part-image img {
    transform: scale(1.05);
}

/* ── Status badge (image overlay, top-left) ─────────────────────── */
.part-status-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    font-size: 10px;
    padding: 4px 8px;
    border-radius: var(--radius-full);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 10;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    line-height: 1.2;
}

.part-status-badge.in_stock,
.part-status-badge.in-stock       { background: rgba(40,  167,  69, 0.9); color: #fff; }

.part-status-badge.low_stock,
.part-status-badge.low-stock,
.part-status-badge.limited_stock,
.part-status-badge.limited-stock  { background: rgba(253, 126,  20, 0.9); color: #fff; }

.part-status-badge.out_of_stock,
.part-status-badge.out-of-stock   { background: rgba(220,  53,  69, 0.9); color: #fff; }

.part-status-badge.unknown        { background: rgba(108, 117, 125, 0.9); color: #fff; }

/* ── Promotion badge (image overlay, top-right) ─────────────────── */
.promotion-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: var(--primary-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--radius-full);
    z-index: 10;
    white-space: nowrap;
    line-height: 1.2;
}

/* ── Vehicle brand logos (image overlay, bottom-left) ───────────── */
.part-brand-logos {
    position: absolute;
    left: var(--space-2);
    bottom: var(--space-2);
    z-index: 10;
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Beats ".part-card:hover .part-image img" (full size, zooms on hover). */
.part-card .part-image .part-brand-logos img {
    width: auto;
    height: 20px;
    max-width: 44px;
    object-fit: contain;
    transform: none;
}

.part-universal-badge {
    gap: 5px;
    padding: 4px 8px;
    color: #000;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ── Universal parts section (vehicle selector) ─────────────────── */
.universal-parts {
    margin-top: var(--space-10, 40px);
    padding-top: var(--space-6, 24px);
    border-top: 1px solid var(--gray-200, #e5e7eb);
}
.universal-parts-head h3 { margin: 0 0 4px; }
.universal-parts-head p { margin: 0 0 var(--space-5, 20px); color: var(--gray-600, #4b5563); font-size: var(--text-sm, 14px); }
.universal-parts-more {
    display: block;
    margin: var(--space-5, 20px) auto 0;
    padding: 10px 22px;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: var(--radius-full, 999px);
    background: #fff;
    color: var(--gray-800, #1f2937);
    font-weight: 600;
    cursor: pointer;
}
.universal-parts-more:hover { border-color: var(--primary-red, #eb0a1e); color: var(--primary-red, #eb0a1e); }

/* ── Content area ───────────────────────────────────────────────── */
.part-content {
    padding: var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.part-header {
    flex: 1;
    margin-bottom: var(--space-3);
}

.part-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The title links to the part's own page (part.php). */
.part-title-link {
    color: inherit;
    text-decoration: none;
}

.part-title-link:hover,
.part-title-link:focus-visible {
    color: var(--primary-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.part-number {
    font-size: var(--text-xs);
    color: var(--gray-500);
    font-family: var(--font-mono, monospace);
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-bottom: var(--space-2);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.part-manufacturer {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-500);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 0 0 var(--space-1);
}

.part-description {
    font-size: var(--text-sm);
    color: var(--gray-600);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.part-category {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin: var(--space-1) 0 var(--space-2);
}

/* ── Price ──────────────────────────────────────────────────────── */
.part-details {
    margin-bottom: var(--space-3);
}

.part-price {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--primary-red);
    margin: 0;
    white-space: nowrap;
}

.price-container {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.original-price {
    font-size: var(--text-sm);
    color: var(--gray-400);
    text-decoration: line-through;
    font-weight: 500;
}

.promoted-price {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--primary-red);
}

/* ── Action buttons ─────────────────────────────────────────────── */
.part-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

.part-actions .add-to-cart-btn,
.part-actions .whatsapp-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
                background 150ms cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 48px;
    text-transform: uppercase;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Side by side, the buttons share a card as narrow as ~260px: "ADD TO CART"
   with its icon needs ~101px of the 109px each button had, so the label ran
   into (and was clipped at) the button's edges. The row reaches 10px into the
   card's padding on each side and closes its gap a little, giving each
   button ~120px and its label ~9px of room either side. Stacked buttons
   (narrow screens, below) are full width already. */
@media (min-width: 641px) {
    .part-actions {
        gap: 0.375rem;
        margin-inline: -0.625rem;
    }

    .part-actions .add-to-cart-btn,
    .part-actions .whatsapp-btn {
        padding-inline: 0.5rem;
    }
}

.part-actions .add-to-cart-btn          { background: #eb0a1e; }
.part-actions .add-to-cart-btn:hover    { background: #c5081a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(235, 10, 30, 0.35); }

.part-actions .whatsapp-btn             { background: #2d3748; }
.part-actions .whatsapp-btn:hover       { background: #1a202c; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }

.part-actions .add-to-cart-btn:active,
.part-actions .whatsapp-btn:active     { transform: translateY(0); box-shadow: none; }

/* ── Featured-parts section overrides ──────────────────────────── */
.featured-parts .part-card .part-details {
    margin-bottom: var(--space-1);
}

.featured-parts .part-card .part-price {
    font-size: 18px;
}

.featured-parts .part-card .part-status-badge {
    font-size: 10px;
    padding: 4px 8px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .part-image { height: 160px; }

    .part-content { padding: var(--space-3); }

    .part-title { font-size: var(--text-base); }

    .part-price,
    .promoted-price { font-size: var(--text-lg); }

    .part-actions {
        flex-direction: column;
        gap: 0.4rem;
    }

    .part-actions .add-to-cart-btn,
    .part-actions .whatsapp-btn {
        min-height: 40px;
        font-size: 0.7rem;
    }
}