/* Empty cart (WooCommerce block cart, empty state).
   Centered message + CTA, then the homepage product-grid component for
   "Nos nouveautés" so the grid matches the rest of the site.
   The default WooCommerce sad-face icon came from the `with-empty-cart-icon`
   class on the title - removed in the page content, so no icon here. */

.wp-block-woocommerce-empty-cart-block {
    text-align: center;
    padding-top: var(--space-8, 3rem);
}

.wp-block-woocommerce-empty-cart-block .empty-cart-title {
    margin-bottom: var(--space-6, 2rem);
}

/* CTA "Voir la boutique" under the empty message (cta-component is inline-block,
   the centered parent centers it). Space it from the product grid below. */
.wp-block-woocommerce-empty-cart-block .cta-component {
    margin-bottom: var(--space-12, 5rem);
}

/* The product-grid component is a full section with its own container; inside the
   cart content it does not need the extra top padding. Keep a clear gap under the
   "Nos nouveautés" title before the grid. */
.wp-block-woocommerce-empty-cart-block .product-grid {
    padding-top: 0;
    /* The product-grid section paints a white background (it matches the white
       homepage section). On the cream cart it reads as a white box - drop it so
       the grid sits directly on the cream. */
    background: transparent;
}

.wp-block-woocommerce-empty-cart-block .product-grid__title {
    margin-bottom: var(--space-8, 3rem);
}

/* On the cream cart background, the product cards' white box + border read as
   boxes. Make them flat (transparent, no border) so they sit cleanly on the
   cream. The homepage keeps the white card (invisible on its white section). */
.wp-block-woocommerce-empty-cart-block .product-card {
    background: transparent;
    border-color: transparent;
}