/* FashionReps – product image + Add to Cart layout fixes
   (loaded after main.css; keeps all existing colours, fonts and buttons) */

/* ═══ PRODUCT CARDS (home, shop, categories, related, Christmas slider) ═══ */

/* Card = column; the image area grows so the buttons line up along the bottom of each row */
.fr-product-card { display: flex; flex-direction: column; height: 100%; }

/* The card image area becomes a column: [image] then [button] (no overlap) */
.fr-product-card .fr-product-card-image {
    flex: 1 1 auto;
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The image box takes the PHOTO'S OWN proportions: whole picture visible, no empty grey bars */
.fr-product-card .fr-product-card-image > a:first-child {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: var(--fr-radius);
    background: var(--fr-gray-100);
    line-height: 0;
}
.fr-product-card .fr-product-card-image > a:first-child img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;          /* very tall photos still fit inside the card, uncropped */
    object-fit: contain;
    object-position: center;
}
/* No hover zoom – it would crop the edges again */
.fr-product-card:hover .fr-product-card-image img { transform: none; }

/* Button: its own row under the image (was position:absolute over the image) */
.fr-product-card .fr-product-card-btn {
    position: static;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: auto 0 0;           /* auto top margin = button sits at the bottom of the image area */
    border-radius: var(--fr-radius-sm);
    opacity: 1;
    transform: none;
}

/* Title / price: even spacing, titles line up across the row */
.fr-product-card .fr-product-card-info { padding: 4px 4px 0; }
.fr-product-card .fr-product-card-title { min-height: calc(1.4em * 2); }

/* ═══ TABLET ═══ */
@media (max-width: 991px) {
    .fr-product-card .fr-product-card-btn { padding: 11px 10px; font-size: 13px; }
}

/* ═══ MOBILE ═══ */
@media (max-width: 767px) {
    .fr-product-card .fr-product-card-image { gap: 8px; }
    .fr-product-card .fr-product-card-btn { padding: 10px 6px; font-size: 12px; letter-spacing: .3px; }
    .fr-product-card .fr-product-card-title { min-height: calc(1.4em * 2); font-size: 14px; }
}

/* ═══ SINGLE PRODUCT PAGE ═══ */

/* Main image: full photo always visible, never cropped (fits tall images on screen too) */
.fr-gallery-main { text-align: center; }
.fr-gallery-main .fr-main-product-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(85vh, 900px);
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .fr-gallery-main .fr-main-product-image { max-height: 75vh; }
}

/* Thumbnails: whole image visible too */
.fr-gallery-thumb { background: var(--fr-gray-100); }
.fr-gallery-thumb img { object-fit: contain; }

/* Christmas slider: slides stretch so cards are equal height */
.fr-xmas-slide { display: flex; }
.fr-xmas-slide > .fr-product-card { width: 100%; }