/*
================================================================
 VGC PRODUCT CARD
 SOURCE GRAPHIQUE UNIQUE

 Utilise par :
 - carousel homepage
 - categories
 - appellations
 - domaines
 - recherche

 Toute modification graphique d'une carte produit se fait ici.
================================================================
*/

:root {
    --vgc-card-bg: #faf8f5;
    --vgc-card-photo-bg: #ffffff;
    --vgc-card-border: #eee7e1;

    --vgc-card-wine: #651c2f;
    --vgc-card-wine-hover: #8f3246;

    --vgc-card-text: #3b2a27;
    --vgc-card-muted: #a08e84;
    --vgc-card-old: #b6a9a2;

    --vgc-card-button: #b85f49;
    --vgc-card-button-hover: #72182b;

    --vgc-card-promo: #c46070;
    --vgc-card-amateur: #8d7063;
}


/* ============================================================
   CARD
   ============================================================ */

.vgc-card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    box-sizing: border-box !important;

    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 12px 12px 16px !important;

    background: var(--vgc-card-bg) !important;

    border: 1px solid var(--vgc-card-border) !important;

    box-shadow:
        0 2px 8px rgba(60, 30, 20, .04) !important;
}

.vgc-card:hover {
    border-color: var(--vgc-card-border) !important;

    box-shadow:
        0 2px 8px rgba(60, 30, 20, .04) !important;
}


/* ============================================================
   PHOTO
   Géométrie unique HOME + CATALOGUE
   ============================================================ */

.vgc-card__media {
    display: block !important;

    position: relative !important;

    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;

    box-sizing: border-box !important;

    margin: 0 0 16px !important;
    padding: 6px !important;

    background: var(--vgc-card-photo-bg) !important;

    overflow: hidden !important;
}


/* HOME */

.vgc-card__media > img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;
}


/* CATALOGUE MAGENTO
   On neutralise complètement le ratio/height Magento.
 */

.products-grid .vgc-card__media .product-image-container {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
}

.products-grid .vgc-card__media .product-image-wrapper {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    padding: 0 !important;
    padding-bottom: 0 !important;

    margin: 0 !important;

    background: #fff !important;

    overflow: hidden !important;
}

.products-grid .vgc-card__media .product-image-photo {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: auto !important;

    object-fit: cover !important;
    object-position: center center !important;
}


/* Placeholder VGC : jamais recadré */

.products-grid .vgc-card__media img[src*="placeholder"],
.vgc-card__media img[src*="placeholder"] {
    object-fit: contain !important;

    padding: 22px !important;

    box-sizing: border-box !important;

    background: #fff !important;
}


/* ============================================================
   BODY
   ============================================================ */

.vgc-card__body {
    position: relative !important;

    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    min-height: 190px !important;

    text-align: center !important;
}

.vgc-card__normal {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
}


/* vieux separateurs theme : neutralises */

.vgc-card__body:before,
.vgc-card__body:after,
.vgc-card__name-wrap:before,
.vgc-card__name-wrap:after {
    display: none !important;

    content: none !important;
}


/* ============================================================
   NAME
   ============================================================ */

.vgc-card__name-wrap {
    min-height: 58px !important;

    margin: 0 4px 7px !important;

    text-align: center !important;
}

.vgc-card__name {
    display: block !important;

    min-height: 58px !important;

    margin: 0 4px 7px !important;

    color: var(--vgc-card-wine) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.30 !important;

    text-align: center !important;
    text-decoration: none !important;
}

.vgc-card__name-wrap .vgc-card__name {
    min-height: 0 !important;

    margin: 0 !important;
}

.vgc-card__name:hover {
    color: var(--vgc-card-wine-hover) !important;

    text-decoration: none !important;
}


/* ============================================================
   QTY
   ============================================================ */

.vgc-card__qty {
    margin: 2px 0 6px !important;

    color: var(--vgc-card-muted) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;

    text-align: center !important;
}


/* ============================================================
   PRICE
   ============================================================ */

.vgc-card__price,
.vgc-card__body .price-box {
    margin: 0 0 15px !important;

    text-align: center !important;
}

.vgc-card__price .price,
.vgc-card__body .price-box .price {
    color: var(--vgc-card-text) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
}

.vgc-card__body .old-price {
    display: block !important;

    margin-top: 3px !important;
}

.vgc-card__body .old-price .price {
    color: var(--vgc-card-old) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 11px !important;
    font-weight: 400 !important;

    text-decoration: line-through !important;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.vgc-card .product-item-inner {
    position: static !important;

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.vgc-card__actions {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: auto 0 0 !important;
    padding-top: 12px !important;

    text-align: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 20 !important;
}

.vgc-card__actions .actions-primary {
    display: inline-block !important;
}

.vgc-card__actions .actions-secondary {
    display: none !important;
}


/* ============================================================
   BUTTON
   ============================================================ */

.vgc-card__actions button,
.vgc-card__actions .action.tocart {
    min-width: 142px !important;
    height: 35px !important;

    margin: 0 auto !important;
    padding: 0 15px !important;

    border: 1px solid var(--vgc-card-button) !important;
    border-radius: 0 !important;

    background: var(--vgc-card-button) !important;
    color: #fff !important;

    box-shadow: none !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 33px !important;

    text-transform: none !important;
}

.vgc-card__actions button:hover,
.vgc-card__actions .action.tocart:hover {
    border-color: var(--vgc-card-button-hover) !important;

    background: var(--vgc-card-button-hover) !important;

    color: #fff !important;
}



/* ===== VGC CARD CLICKZONE START ===== */

/*
 * Toute la carte mène à la fiche produit.
 *
 * Le bouton panier reste indépendant grâce à son z-index supérieur.
 * Le rollover reste purement visuel.
 */

.vgc-card__clickzone {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;

    z-index: 9 !important;

    cursor: pointer !important;
}

.vgc-card__clickzone:focus-visible {
    outline: 2px solid var(--vgc-card-wine) !important;
    outline-offset: 2px !important;
}

.vgc-card__badges {
    pointer-events: none !important;
}

.vgc-card__rollover {
    pointer-events: none !important;
}

.vgc-card__actions,
.vgc-card .product-item-inner {
    position: relative !important;

    z-index: 20 !important;
}

/* ===== VGC CARD CLICKZONE END ===== */


/* ============================================================
   BADGES
   ============================================================ */

.vgc-card__badges {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    z-index: 30 !important;
}

.vgc-card__badges > span {
    position: relative !important;

    display: block !important;

    width: max-content !important;

    margin: 0 0 2px !important;
    padding: 4px 7px !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transform: none !important;
    clip-path: none !important;

    color: #fff !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 8.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.vgc-card__badges > span:before,
.vgc-card__badges > span:after {
    display: none !important;

    content: none !important;
}

.vgc-card__badges > span[class*="new"],
.vgc-card__badges > span[class*="New"] {
    background: var(--vgc-card-wine) !important;
}

.vgc-card__badges > span[class*="promo"],
.vgc-card__badges > span[class*="Promo"] {
    background: var(--vgc-card-promo) !important;
}

.vgc-card__badges > span[class*="amateur"],
.vgc-card__badges > span[class*="Amateur"] {
    background: var(--vgc-card-amateur) !important;
}

/* ============================================================
   VGC - PRODUCT CARD ROLLOVER CANONIQUE
   Une seule logique HOME + CATALOGUE.
   Le rollover remplace UNIQUEMENT la zone du nom.
   Prix, quantité et bouton restent toujours visibles.
   ============================================================ */

/* Zone nom : réserve exactement la place du rollover */
.vgc-card__name-wrap,
.vgc-card__normal > .vgc-card__name {
    min-height: 80px !important;
    box-sizing: border-box !important;
}

.vgc-card__normal > .vgc-card__name {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Rollover limité à la zone du nom */
.vgc-card__rollover {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    right: 4px !important;
    bottom: auto !important;
    left: 4px !important;
    width: auto !important;
    height: 80px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    background: rgba(250, 248, 245, .98) !important;
    border: 0 !important;
    box-shadow: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

.vgc-card:hover .vgc-card__rollover {
    display: flex !important;
}

.vgc-card__rollover .vgc-card__rollover-line {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #5c443d !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    text-align: center !important;
}

.vgc-card__rollover .vgc-card__rollover-line--domaine,
.vgc-card__rollover .vgc-card__rollover-line--parcelle,
.vgc-card__rollover .vgc-card__rollover-line--cuvee {
    color: var(--vgc-card-wine) !important;
    font-weight: 700 !important;
}

.vgc-card__rollover .vgc-card__rollover-line--millesime {
    font-weight: 600 !important;
}

/* Au hover, seul le nom disparait. Prix / quantité / panier ne bougent jamais. */
.vgc-card:hover .vgc-card__name {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.vgc-card:hover .vgc-card__qty,
.vgc-card:hover .vgc-card__price,
.vgc-card:hover .vgc-card__body .price-box,
.vgc-card:hover .quantity-info-container,
.vgc-card:hover .vgc-card__actions,
.vgc-card:hover .product-item-inner {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Catalogue uniquement : carte réellement plus compacte */
.catalog-category-view .products-grid .product-item,
.catalogsearch-result-index .products-grid .product-item,
.catalogsearch-advanced-result .products-grid .product-item {
    height: auto !important;
    align-self: flex-start !important;
}

.catalog-category-view .products-grid .vgc-card,
.catalogsearch-result-index .products-grid .vgc-card,
.catalogsearch-advanced-result .products-grid .vgc-card {
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
    padding-bottom: 10px !important;
}

.catalog-category-view .products-grid .vgc-card__media,
.catalogsearch-result-index .products-grid .vgc-card__media,
.catalogsearch-advanced-result .products-grid .vgc-card__media {
    margin-bottom: 10px !important;
}

.catalog-category-view .products-grid .vgc-card__body,
.catalogsearch-result-index .products-grid .vgc-card__body,
.catalogsearch-advanced-result .products-grid .vgc-card__body {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
}

.catalog-category-view .products-grid .vgc-card__name-wrap,
.catalogsearch-result-index .products-grid .vgc-card__name-wrap,
.catalogsearch-advanced-result .products-grid .vgc-card__name-wrap {
    margin-bottom: 4px !important;
}

.catalog-category-view .products-grid .vgc-card__price,
.catalog-category-view .products-grid .vgc-card__body .price-box,
.catalogsearch-result-index .products-grid .vgc-card__price,
.catalogsearch-result-index .products-grid .vgc-card__body .price-box,
.catalogsearch-advanced-result .products-grid .vgc-card__price,
.catalogsearch-advanced-result .products-grid .vgc-card__body .price-box {
    margin-bottom: 7px !important;
}

.catalog-category-view .products-grid .vgc-card__qty,
.catalogsearch-result-index .products-grid .vgc-card__qty,
.catalogsearch-advanced-result .products-grid .vgc-card__qty {
    margin-bottom: 3px !important;
}

.catalog-category-view .products-grid .vgc-card__actions,
.catalogsearch-result-index .products-grid .vgc-card__actions,
.catalogsearch-advanced-result .products-grid .vgc-card__actions {
    margin: 0 !important;
    padding-top: 7px !important;
}

/* Mobile : pas de rollover tactile */
@media (max-width: 767px) {
    .vgc-card__rollover,
    .vgc-card:hover .vgc-card__rollover {
        display: none !important;
    }

    .vgc-card:hover .vgc-card__name {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}