/* Webfonts used by the product list — Host Grotesk (name/brand), DM Mono
   (price + "from"), Inter (CTA + units). Mirrors the merchOS frontend
   (src/assets/css/fonts.css). Must stay first: @import precedes all rules. */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Host+Grotesk:wght@300..800&family=Inter:wght@400;500;600&display=swap');

/* ────────────────────────────────
   Grid
──────────────────────────────── */
.lookbook-product-grid-main {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 24px;
    column-gap: 24px;
    row-gap: 48px;
}

/* ────────────────────────────────
   Card
──────────────────────────────── */
.lookbook-product-card-main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
}

/* Info section grows to fill the card so price rows align across the grid */
.lookbook-product-card-main .flex {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lookbook-product-card-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ────────────────────────────────
   Image tile
──────────────────────────────── */
.card-image-container {
    position: relative;
}

.hover-zoom {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    overflow: hidden;
}

.hover-zoom--basic img {
    transition: transform 0.6s ease;
}

.hover-zoom--basic:hover img {
    transform: scale(1.03);
}

.bg-white-smoke {
    background-color: #FFFFFF;
}

/* ────────────────────────────────
   Favorite icon
──────────────────────────────── */
.fav-icon-container-main {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fav-icon-container-main button {
    background: transparent;
    border: none;
    padding: 0;
}

/* Heart: two-path SVG (outline always shown, solid cross-fades in). The solid
   is visible when favorited OR on hover — so hovering an empty heart previews
   the filled state, and hovering a favorited one previews removal. */
.fav-heart {
    display: block;
}

.fav-solid {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fav-btn:hover .fav-solid {
    opacity: 1;
}

.fav-btn.is-fav .fav-solid {
    opacity: 1;
}

.fav-btn.is-fav:hover .fav-solid {
    opacity: 0;
}

/* ────────────────────────────────
   "Add" CTA overlay (reveals on card hover; always-on round button on mobile)
──────────────────────────────── */
.card-cta-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.card-wrapper:hover .card-cta-overlay,
.card-cta-overlay.card-cta-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.card-cta-btn.call-for-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    padding: 6px 20px;
    border: 1px solid #000;
    border-radius: 999px;
    background: #FFFFFF;
    color: #22211F;
    /* CTA buttons use DM Mono, uppercase (mirrors custom-buttons-designs.css) */
    font-family: "DM Mono", monospace;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.56px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card-cta-btn.call-for-action:hover {
    background: #22211F;
    color: #FFFFFF;
}

.card-cta-icon {
    display: none;
}

/* ────────────────────────────────
   Product name / brand
──────────────────────────────── */
.lookbook-product-name {
    text-align: left;
    margin-bottom: 0;
    color: #22211F;
    font-family: "Host Grotesk";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.48px;
    width: 100%;
    text-transform: capitalize;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lookbook-product-brand {
    font-family: "Host Grotesk";
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.42px;
    color: #22211F;
    margin-bottom: 0;
    text-transform: capitalize;
    text-decoration: underline;
}

.lookbook-product-brand:hover {
    color: #AAA59B;
}

/* ────────────────────────────────
   Price
──────────────────────────────── */
.lookbook-product-price-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.price {
    margin-bottom: 0;
    font-family: "DM Mono";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.56px;
    color: #22211F;
}

/* "From" prefix — lighter grey, uppercase mono, sits before the price */
.price-from {
    color: #AAA59B;
    font-family: "DM Mono";
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.56px;
    text-transform: uppercase;
}

.lookbook-product-price-container .min-units {
    font-size: 14px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.32px;
    font-family: Inter, Arial, sans-serif;
    color: #AAA59B;
    margin-bottom: 0;
}

/* ────────────────────────────────
   Utilities used by the card markup
──────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
}
.duration-300 { transition-duration: 300ms; }
.fill-none { fill: none; }
.hover\:fill-\[\#22211F\]:hover { fill: #22211F; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-max { width: max-content; }
.object-cover { object-fit: cover; }
.mt-\[8px\] { margin-top: 8px; }
.gap-\[6px\] { gap: 6px; }

/* ────────────────────────────────
   Responsive (mirrors common-section-dividers.css)
──────────────────────────────── */
@media (min-width: 576px) and (max-width: 767px) {
    .lookbook-product-grid-main { padding-left: 10px; }
}

@media (min-width: 992px) {
    .lookbook-product-name { font-size: 14px; }
    .price { font-size: 14px; }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    .lookbook-product-grid-main { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .lookbook-product-grid-main { grid-template-columns: repeat(8, 1fr); }
}

@media (min-width: 2560px) and (max-width: 3839px) {
    .lookbook-product-grid-main { grid-template-columns: repeat(10, 1fr); }
}

@media (min-width: 3840px) {
    .lookbook-product-grid-main { grid-template-columns: repeat(12, 1fr); }
}

@media (max-width: 1024px) {
    /* Tablets mirror the mobile 2-up product grid (all widths ≤1024px). */
    .lookbook-product-grid-main { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .lookbook-product-grid-main {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 24px;
    }
    .price,
    .lookbook-product-name { font-size: 14px; }
}

/* Touch/small screens: CTA is always visible as a round + button */
@media (max-width: 767px) {
    .card-cta-overlay {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        bottom: 12px;
        right: 12px;
    }
    .card-cta-icon {
        display: block;
        width: 14px;
        height: 14px;
    }
    .card-cta-btn.call-for-action {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        gap: 0 !important;
        font-size: 0 !important;
        /* The label ("Add"/"Added") is hidden via font-size:0, but letter- and
           word-spacing still give it width, pushing the + icon off-centre. Zero
           both (with !important, so the site's global button rules can't win)
           so justify-content:center can truly centre the icon. */
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
        border-radius: 50%;
        border: 1px solid #22211F;
        background: #F5F2EE;
    }
}

@media (max-width: 640px) {
    .lookbook-product-grid-main {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        column-gap: 12px;
        row-gap: 32px;
    }
}

@media (max-width: 480px) {
    .lookbook-product-grid-main {
        grid-template-columns: repeat(2, 1fr);
        padding-left: 10px;
        padding-right: 10px;
        column-gap: 16px;
        row-gap: 52px;
    }
    .lookbook-product-price-container {
        flex-direction: row;
        justify-content: space-between;
    }
    .lookbook-product-card-main img {
        object-fit: cover;
    }
    .fav-icon-container-main {
        top: 10px;
        right: 12px;
    }
    .hover-zoom {
        height: auto;
        width: 100%;
    }
    .price { font-size: 12px; }
}