/* ============================================================
 * Hygo — Page Panier (v2.7.69) — matches the Flash Ventes
 * reference: table-based layout, dropdown qty, "Supprimer"
 * text link, side-by-side Payment + Offre débloquée cards
 * below the cart, totals + green "CHOISIR MA LIVRAISON"
 * button at the bottom-right. NO card borders on individual
 * product rows — flat table with subtle horizontal separators.
 *
 * Loaded on is_cart() only, so aggressive selectors are safe.
 * ============================================================ */

/* ---------- Outer wrapper ---------- */

/* Custom top banner slot (v2.7.73) — sits above the free-shipping bar
   in the space that used to hold the "Cart" page title. Empty margin
   below the sticky nav so it butts right up when populated. Admin
   fills the inner HTML; this rule just gives it card-consistent
   spacing so pasted <p> tags don't overflow to the edges. */
.woocommerce-cart .hygo-cart-top-banner {
    margin-bottom: 16px;
}
.woocommerce-cart .hygo-cart-top-banner:empty {
    display: none;
}

/* Force the WHOLE cart page content area to be wide. GeneratePress by
   default limits content to ~1200px via .grid-container + inner
   .content-area / .inside-article; on some layouts that squeezes the
   cart to ~800-900px, which makes horizontal 5-column rows look
   cramped and forces the name to wrap word-per-line.
   v2.7.71: broader selector list to cover every GP wrapper we might
   land inside (site-container, #page, .site-content, article, etc).
   Scoped to body.woocommerce-cart so this only fires on the cart
   page — other WC pages (product, category, checkout) keep their
   original width. */
body.woocommerce-cart .site,
body.woocommerce-cart .site-container,
body.woocommerce-cart .site-content,
body.woocommerce-cart #page,
body.woocommerce-cart #page.grid-container,
body.woocommerce-cart .grid-container,
body.woocommerce-cart .container,
body.woocommerce-cart #primary,
body.woocommerce-cart #primary.content-area,
body.woocommerce-cart #main,
body.woocommerce-cart .content-area,
body.woocommerce-cart .grid-parent,
body.woocommerce-cart article,
body.woocommerce-cart article.page,
body.woocommerce-cart .inside-article,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .type-page {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    float: none !important;
}

/* The article body content (where cart lives) gets its own gutter
   inside our shell max-width, so page background stays visible on the
   edges of very wide viewports but the cart itself is comfortably
   wide. */
body.woocommerce-cart .entry-content,
body.woocommerce-cart .inside-article {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* v2.7.84: hide the "Cart / Panier" page title + collapse the empty
   whitespace above the cart on BOTH populated and empty cart states.
   Previously this rule was inline in woocommerce/cart/cart.php — which
   never fires when the cart is empty (WC uses cart-empty.php instead),
   so the "Cart" title reappeared and left a big empty gap on empty
   carts. Moving to the external stylesheet (enqueued on any is_cart()
   view) fixes both states with one rule. */
body.woocommerce-cart .entry-header,
body.woocommerce-cart .page-header,
body.woocommerce-cart .entry-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart h1.page-title {
    display: none !important;
}
body.woocommerce-cart .inside-article,
body.woocommerce-cart .entry-content,
body.woocommerce-cart #primary,
body.woocommerce-cart .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* The cart shell — full width up to 1500px so on typical 1440px
   viewports it uses nearly the full width (like the reference). */
.woocommerce-cart .hygo-cart-wrap {
    max-width: 1500px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.woocommerce-cart .hygo-cart-form {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
}
.woocommerce-cart .hygo-cart-collaterals {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* ---------- Cart table (flex-based, not <table>) ---------- */

.hygo-cart-table {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}

/* Header row */
.hygo-cart-thead {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    background: transparent;
    border-bottom: 1px solid #eef0f2;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    letter-spacing: 0.01em;
}
.hygo-cart-th-panier   { flex: 1 1 40%; }
.hygo-cart-th-qty      { flex: 0 0 120px; text-align: left; }
.hygo-cart-th-variant  { flex: 0 0 140px; text-align: left; }
.hygo-cart-th-price    { flex: 0 0 160px; text-align: right; }

/* Product row */
.hygo-cart-row {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-top: 1px solid #eef0f2;
}
.hygo-cart-row:first-of-type { border-top: none; }

.hygo-cart-cell { min-width: 0; }

/* Panier cell = thumb + name + Supprimer link. Reference shows
   thumb LEFT with "Supprimer" text link stacked under it, name
   inline to the right. */
.hygo-cart-cell-panier {
    flex: 1 1 40%;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.hygo-cart-panier-thumb {
    flex: 0 0 auto;
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.hygo-cart-panier-thumb img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.hygo-cart-remove-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
}
.hygo-cart-remove-link:hover { color: #dc2626; }

.hygo-cart-panier-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 6px;
}
.hygo-cart-panier-name {
    font-size: 15px;
    font-weight: 600;
    color: #111 !important;
    line-height: 1.4;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
}
.hygo-cart-panier-name a {
    color: inherit !important;
    text-decoration: none;
}
.hygo-cart-panier-name a:hover { text-decoration: underline; }

/* Quantité cell — native <select> styled to match the reference. */
.hygo-cart-cell-qty {
    flex: 0 0 120px;
}
.hygo-cart-qty-select {
    height: 38px;
    min-width: 70px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: #111;
    cursor: pointer;
    -webkit-appearance: menulist;
    appearance: menulist;
}
.hygo-cart-qty-fixed {
    display: inline-block;
    padding: 8px 14px;
    background: #f3f4f6;
    border-radius: 6px;
    font-weight: 600;
    color: #444;
}

/* Variante cell — plain text, small gray */
.hygo-cart-cell-variant {
    flex: 0 0 140px;
    font-size: 14px;
    color: #444;
}
.hygo-cart-variant-none {
    color: #9ca3af;
}

/* Prix cell — Obs. label + strike above, red sale below, right-aligned */
.hygo-cart-cell-price {
    flex: 0 0 160px;
    text-align: right;
}
.hygo-cart-price-obs {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.2;
    margin-bottom: 2px;
}
.hygo-cart-price-obs-value {
    text-decoration: line-through;
}
.hygo-cart-price-obs-value .woocommerce-Price-amount { color: #9ca3af; }
.hygo-cart-price-sale {
    font-size: 18px;
    font-weight: 700;
    color: #dc2626;
    line-height: 1.15;
}
.hygo-cart-price-sale .woocommerce-Price-amount { color: inherit; }

/* ---------- Cadeau Mystère row (rendered by module) ----------
   Fires inside .hygo-cart-table via woocommerce_after_cart_contents.
   Rendered as a normal row inside the same white container. */
.hygo-cart-table .hygo-cart-cadeau {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-top: 1px solid #eef0f2;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.hygo-cart-cadeau-media {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hygo-cart-cadeau-img,
.hygo-cart-cadeau-img--default svg {
    max-width: 100%;
    max-height: 100%;
    display: block;
}
.hygo-cart-cadeau-body { flex: 1 1 auto; min-width: 0; }
.hygo-cart-cadeau-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    line-height: 1.4;
    margin-bottom: 4px;
}
.hygo-cart-cadeau-subtitle {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* ---------- Collaterals area (bottom row of the cart) ----------
   Grid: left = payment + offre cards stacked, right = totals block.
   On mobile, stacks. */
.hygo-cart-collaterals {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px !important;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
    width: 100%;
}
.hygo-cart-collaterals .cart_totals {
    grid-column: 2 / 3;
    background: transparent;
    border: none;
    padding: 0;
    width: 100% !important;
    min-width: 320px;
    float: none;
}
.hygo-cart-collaterals .cart_totals > h2 {
    display: none;
}

/* v2.7.76: compact totals block matching the Flash Ventes reference.
   No boxed table, just 3 flex rows (Sous-total, Votre avantage, CTA)
   inside a light-gray card. Kills all leftover .shop_table + .order-
   total + .cart-subtotal styling from previous versions. */
.hygo-cart-totals-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    background: #f7f7f7;
    border-radius: 10px;
}
.hygo-tt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    line-height: 1.35;
}
.hygo-tt-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #111;
    font-weight: 600;
    min-width: 0;
}
.hygo-tt-value {
    font-weight: 700;
    color: #111;
    text-align: right;
    white-space: nowrap;
}
.hygo-tt-value .woocommerce-Price-amount { color: inherit; }

/* Votre avantage — red accent + piggy icon */
.hygo-tt-avantage .hygo-tt-value,
.hygo-tt-avantage .hygo-tt-value .woocommerce-Price-amount {
    color: #dc2626;
}
.hygo-tt-avantage-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.hygo-tt-avantage-icon svg { display: block; width: 100%; height: 100%; }

/* Green CTA — sits right below the avantage row in the same card */
.hygo-tt-cta {
    margin-top: 6px;
    padding: 0 !important;
}
.hygo-tt-cta .checkout-button {
    display: block !important;
    width: 100% !important;
    background: #22c55e !important;
    color: #fff !important;
    padding: 14px 16px !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    text-decoration: none !important;
    line-height: 1.25 !important;
    border: 0 !important;
    box-sizing: border-box !important;
}
.hygo-tt-cta .checkout-button:hover {
    background: #16a34a !important;
    filter: brightness(1.05);
}

/* Kill any leftover WC table rows that legacy hooks might still
   inject inside our block (shipping, order-total, coupon rows). */
.hygo-cart-totals-block .shop_table,
.hygo-cart-totals-block tr.cart-subtotal,
.hygo-cart-totals-block tr.order-total,
.hygo-cart-totals-block tr.shipping,
.hygo-cart-totals-block tr.woocommerce-shipping-totals,
.hygo-cart-totals-block .woocommerce-shipping-methods,
.hygo-cart-totals-block .woocommerce-shipping-destination,
.hygo-cart-totals-block .woocommerce-shipping-calculator,
.hygo-cart-totals-block .shipping-calculator-button,
.hygo-cart-totals-block .shipping-calculator-form,
.hygo-cart-totals-block .hygo-cart-avantage-row {
    display: none !important;
}

/* ---------- Left column: Payment + Offre + Prix observé stack ---------- */

.hygo-cart-below {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hygo-cart-below-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}
.hygo-cart-below-row > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 50% !important;
}

/* Payment badges card */
.hygo-cart-payment {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.hygo-cart-payment-title {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    letter-spacing: 0.01em;
}
.hygo-cart-payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}
.hygo-cart-pay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 28px;
    padding: 3px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
}
.hygo-cart-pay-badge svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: auto;
}

/* Offre débloquée card (yellow) */
.hygo-cart-offre {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.hygo-cart-offre-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #d97706;
}
.hygo-cart-offre-body { flex: 1 1 auto; min-width: 0; }
.hygo-cart-offre-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
}
.hygo-cart-offre-subtitle {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 6px;
}
.hygo-cart-offre-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
    background: #fff;
    padding: 3px 8px;
    border-radius: 12px;
}

/* Prix observé info line */
.hygo-cart-obs-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 4px;
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.45;
}
.hygo-cart-obs-note::before {
    content: "ⓘ";
    font-size: 16px;
    color: #9ca3af;
    flex: 0 0 auto;
    line-height: 1;
}

/* ---------- Trust guarantees grid (unchanged from earlier) ---------- */

.hygo-cart-trust {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 22px;
    margin-top: 20px;
}
.hygo-cart-trust-title {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 18px;
    text-align: center;
}
.hygo-cart-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 18px 16px;
}
.hygo-cart-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 4px;
}
.hygo-cart-trust-icon {
    color: var(--hygo-primary, #f97316);
    line-height: 0;
}
.hygo-cart-trust-icon svg { display: block; }
.hygo-cart-trust-label {
    font-size: 12.5px;
    color: #4b5563;
    line-height: 1.35;
    max-width: 140px;
    font-weight: 500;
}

/* ---------- Browsing history grid (v2.7.85) ---------- */

.woocommerce-cart .hygo-cart-history {
    margin-top: 40px;
    margin-bottom: 40px;
}
.hygo-cart-history-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-bottom: 12px;
    border-bottom: 2px solid #f3f4f6;
    margin-bottom: 24px;
}
.hygo-cart-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px 20px;
}
.hygo-cart-history-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}
.hygo-cart-history-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: #f9fafb;
}
.hygo-cart-history-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.hygo-cart-history-thumb:hover img {
    transform: scale(1.03);
}
.hygo-cart-history-name {
    display: block;
    margin: 14px 4px 8px;
    font-size: 14px;
    font-weight: 500;
    color: #111 !important;
    line-height: 1.35;
    text-decoration: none;
    min-height: 2.7em;   /* reserve 2 lines so buttons align across the grid */
}
.hygo-cart-history-name:hover { text-decoration: underline; }
.hygo-cart-history-price {
    font-size: 16px;
    font-weight: 700;
    color: #dc2626;
    margin: 0 0 12px;
    line-height: 1.2;
}
.hygo-cart-history-price del {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 400;
    margin-right: 6px;
}
.hygo-cart-history-price .woocommerce-Price-amount { color: inherit; }
.hygo-cart-history-btn {
    display: block;
    padding: 10px 12px;
    background: transparent !important;
    color: #22c55e !important;
    border: 1px solid #22c55e !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.hygo-cart-history-btn:hover {
    background: #22c55e !important;
    color: #fff !important;
}

@media (max-width: 700px) {
    .hygo-cart-history-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }
    .hygo-cart-history-name { font-size: 13px; }
    .hygo-cart-history-btn { font-size: 11px !important; padding: 8px 10px; }
}

/* ---------- Empty cart state (v2.7.84) ---------- */

.woocommerce-cart .hygo-cart-empty {
    max-width: 900px;
    margin: 40px 0 60px;
    padding: 0 4px;
}
.hygo-cart-empty-title {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin: 0 0 14px;
    line-height: 1.35;
}
.hygo-cart-empty-link {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
}
.hygo-cart-empty-link a {
    color: #111;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.15s;
}
.hygo-cart-empty-link a:hover { color: #22c55e; }
.hygo-cart-empty-arrow {
    display: inline-block;
    margin-right: 6px;
    color: #22c55e;
    font-weight: 700;
}
.hygo-cart-empty-cta-wrap { margin: 0; }
.hygo-cart-empty-cta:hover { background: #16a34a !important; }

/* Fallback for the WC-default .cart-empty class (renders if our
   override is bypassed by a plugin) — style so no page ever looks
   completely bare. */
.woocommerce-cart .cart-empty {
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    font-size: 20px;
    font-weight: 700;
    margin: 40px 0;
}

/* ---------- Responsive: stack on mobile ---------- */

@media (max-width: 900px) {
    .hygo-cart-thead { display: none; }   /* mobile: labels move onto rows via data-label */

    .hygo-cart-row {
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
    }
    .hygo-cart-cell-panier { flex: 1 1 100%; }
    .hygo-cart-cell-qty    { flex: 0 0 auto; }
    .hygo-cart-cell-variant{ flex: 1 1 auto; }
    .hygo-cart-cell-price  { flex: 0 0 auto; margin-left: auto; }

    .hygo-cart-cell-qty::before,
    .hygo-cart-cell-variant::before {
        content: attr(data-label) " : ";
        font-size: 12px;
        color: #6b7280;
        margin-right: 6px;
    }

    /* Collaterals: stack all three (Payment, Offre, Totals) vertically
       on mobile. Force with !important since the desktop rule uses
       !important too. */
    .hygo-cart-collaterals {
        grid-template-columns: 1fr !important;
    }
    .hygo-cart-below-row {
        flex-direction: column;
    }
    .hygo-cart-below-row > * {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    .hygo-cart-collaterals .cart_totals {
        grid-column: 1 / -1;
        min-width: 0;
    }
    .hygo-cart-below {
        grid-column: 1 / -1;
    }

    /* Trust guarantees: auto-fit with a bigger min so labels never
       collide with the neighbouring tile. 3 fixed columns at ~110px
       each was cramming "Satisfait ou remboursé" (~90px) up against
       "Retours faciles", visually overlapping. Auto-fit reflows to 2
       columns on very narrow phones and 3 on wider ones. */
    .hygo-cart-trust-grid {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
        gap: 20px 12px !important;
    }
    .hygo-cart-trust-item { padding: 4px 2px; }
    .hygo-cart-trust-label {
        font-size: 12px;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    /* Offre débloquée card — on mobile the icon eats too much of the
       narrow body width; drop it a bit smaller and let the title/subtitle
       breathe. Prevent the title from wrapping "Offre débloquée" / "!"
       across two lines (word-break rule at parent level was letting the
       exclamation get pushed off). */
    .hygo-cart-offre {
        padding: 14px 16px;
        gap: 12px;
        align-items: flex-start;
    }
    .hygo-cart-offre-icon {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        font-size: 18px;
    }
    .hygo-cart-offre-title {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hygo-cart-offre-subtitle { font-size: 13px; }
    .hygo-cart-offre-meta {
        font-size: 11px;
        white-space: nowrap;
    }
}