/* ==========================================================================
   Meet Fatoumata — WooCommerce / YITH Wishlist
   Restyles WooCommerce's own stable class names rather than overriding
   templates wherever possible (shop archive, single product, cart & checkout
   blocks, my account). Loaded only on WooCommerce/wishlist pages.
   ========================================================================== */

.mf-shop{padding:40px 0 80px}
@media (min-width:768px){.mf-shop{padding:56px 0 100px}}
.mf-shop-header{margin-bottom:32px}
@media (min-width:768px){.mf-shop-header{margin-bottom:44px}}
.mf-shop-header .mf-h1{margin-bottom:0}

/* Shop archive intro text (category/shop page description) */
.mf-shop .term-description,
.mf-shop .woocommerce-products-header__description{font-size:18.5px;color:rgba(0,40,40,.72);max-width:600px;margin:14px 0 0}

/* Filters + sort */
.mf-shop-filters{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
@media (min-width:768px){.mf-shop-filters{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;margin-bottom:36px}}
.mf-shop-sort .woocommerce-ordering{margin:0}
.mf-shop-sort select{font-family:var(--mf-font-sans);font-size:15.5px;padding:10px 36px 10px 16px;border-radius:var(--mf-radius-pill);border:1px solid rgba(0,40,40,.22);background:#fff;color:var(--mf-dark);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23002828' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}

/* Product grid — 3 columns from tablet up, matching this site's own
   breakpoints (768/1200, per meetfatoumata.css) rather than a separate
   2-column tablet step. CSS Grid, not flexbox: a manually calc()'d
   flex-basis accounting for `gap` is exact in theory but broke on
   fractional/rounded pixel widths in practice (2 cards fit a row, the 3rd
   wrapped) — grid's `fr` tracks handle the gap subtraction internally with
   no rounding drift. `min-width:0` on each item guards against the classic
   "grid item defaults to min-width:auto" gotcha. */
.mf-shop ul.products{display:grid;grid-template-columns:1fr;gap:18px;list-style:none;margin:0;padding:0}
.mf-shop ul.products li.product{float:none!important;width:auto!important;margin:0!important;min-width:0}
/* THE actual root cause of "row 1 only shows 2 columns, one empty on the
   left": WooCommerce's own woocommerce.css gives ul.products a `::before`
   clearfix pseudo-element (content:" ";display:table) for its default
   float-based layout. A generated pseudo-element is a real box in the
   render tree — under display:grid it becomes grid ITEM #1, an invisible
   one, which bumps every real product over by one cell and only shows up
   in row 1 (there's only one ::before for the whole list, not one per row,
   which is why every row after the first was already correct). */
.mf-shop ul.products::before,.mf-shop ul.products::after{content:none;display:none}
@media (min-width:768px){
	.mf-shop ul.products{grid-template-columns:repeat(3,1fr);gap:24px}
}
.mf-product-card{position:relative;background:#fff;border:1px solid rgba(0,40,40,.10);border-radius:var(--mf-radius);overflow:hidden;display:flex;flex-direction:column;height:100%;transition:box-shadow .15s ease}
.mf-product-card:hover{box-shadow:0 12px 32px rgba(0,40,40,.10)}
.mf-product-card-media{position:relative;aspect-ratio:4/3;background:var(--mf-grey);overflow:hidden}
.mf-product-card-media img{width:100%;height:100%;object-fit:cover}
.mf-product-card-media .onsale{position:absolute;top:14px;left:14px;margin:0;font-family:var(--mf-font-sans);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:6px 12px;border-radius:var(--mf-radius-pill);background:var(--mf-volt);color:var(--mf-dark)}
.mf-product-card-wishlist{position:absolute;top:10px;right:10px}
.mf-product-card-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.mf-product-card-body h2,.mf-product-card-body h3{font-size:20px;margin:0;font-weight:600;font-family:var(--mf-font-sans);line-height:1.3}
.mf-product-card-body h2 a,.mf-product-card-body h3 a{color:var(--mf-dark)}
.mf-product-card-body .price{margin:0;font-size:17px;font-weight:600;color:var(--mf-dark);font-family:var(--mf-font-sans)}
.mf-product-card-body .price ins{text-decoration:none}
.mf-product-card-body .price del{opacity:.5;font-weight:400;margin-right:8px}
.mf-product-card-cta{margin-top:auto;padding-top:6px}

/* Wishlist heart button (YITH 4+, React-rendered — .yith-add-to-wishlist-
   button-block is only the empty mount point; the real markup below is
   injected client-side) — used both on cards (icon-only) and single
   product (icon + label pill). */
.yith-add-to-wishlist-button-block{display:inline-block;line-height:1}
.mf-product-card-wishlist .yith-wcwl-add-to-wishlist-button-anchor-wrapper{display:block}
.yith-wcwl-add-to-wishlist-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px solid rgba(0,40,40,.14);color:var(--mf-dark);cursor:pointer;font-family:var(--mf-font-sans)}
.mf-product-card-wishlist .yith-wcwl-add-to-wishlist-button{width:40px;height:40px;border-radius:50%;padding:0}
.mf-product-card-wishlist .yith-wcwl-add-to-wishlist-button__label{display:none}
.yith-wcwl-add-to-wishlist-button-icon{display:flex;align-items:center;justify-content:center}
.yith-wcwl-add-to-wishlist-button-icon svg{width:18px;height:18px}
.yith-wcwl-add-to-wishlist-button--added{border-color:var(--mf-pink);color:var(--mf-pink)}
.yith-wcwl-add-to-wishlist-button--loading{opacity:.6}
.single-product .yith-wcwl-add-to-wishlist-button{border-radius:var(--mf-radius-pill);padding:12px 22px;font-size:15.5px;font-weight:600}
.single-product .yith-wcwl-add-to-wishlist-button-icon svg{width:17px;height:17px}
.yith-wcwl-feedback,.yith-wcwl-add-to-wishlist .feedback{display:block;font-size:13.5px;color:rgba(0,40,40,.6);margin-top:6px}

/* Buttons (add to cart, checkout, place order, …) */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.wc-block-components-button{display:inline-flex;align-items:center;justify-content:center;background:var(--mf-dark)!important;color:#fff!important;border:0!important;border-radius:var(--mf-radius-pill)!important;padding:14px 26px!important;font-weight:600;font-size:16.5px;font-family:var(--mf-font-sans)!important;white-space:nowrap;text-decoration:none;transition:opacity .15s ease}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,.wc-block-components-button:hover{opacity:.9;color:#fff!important}
.woocommerce a.button.loading,.woocommerce button.button.loading{opacity:.6}
.mf-product-card .button{width:100%;padding:12px 20px!important;font-size:15.5px}

/* Single product */
.mf-shop .woocommerce div.product{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:1024px){.mf-shop .woocommerce div.product{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.woocommerce div.product div.images{border-radius:var(--mf-radius);overflow:hidden;background:var(--mf-grey)}
.woocommerce div.product div.images img{border-radius:0}
.woocommerce div.product .flex-control-thumbs{margin:12px 0 0;gap:10px;display:flex}
.woocommerce div.product .flex-control-thumbs li{width:64px}
.woocommerce div.product .flex-control-thumbs img{border-radius:10px;opacity:.6}
.woocommerce div.product .flex-control-thumbs img.flex-active{opacity:1}
.woocommerce div.product div.summary{padding:0}
.woocommerce div.product .product_title{font-family:var(--mf-font-sans);font-weight:600;font-size:clamp(28px,4vw,38px);letter-spacing:-.01em;margin:0 0 14px}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--mf-dark);font-size:24px;font-weight:600;font-family:var(--mf-font-sans)}
.woocommerce div.product p.price del{opacity:.5;font-weight:400;margin-right:10px}
.woocommerce div.product .woocommerce-product-details__short-description{font-size:18.5px;color:rgba(0,40,40,.78);margin:18px 0}
.woocommerce div.product form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:24px 0 0}
.woocommerce div.product .quantity{display:flex}
.woocommerce div.product .quantity .qty{width:76px;padding:14px 12px;border-radius:var(--mf-radius);border:1px solid rgba(0,40,40,.22);font-family:var(--mf-font-sans);font-size:16.5px;color:var(--mf-dark)}
.woocommerce div.product .product_meta{margin-top:28px;padding-top:20px;border-top:1px solid rgba(0,40,40,.10);font-size:14.5px;color:rgba(0,40,40,.6)}
.woocommerce div.product .product_meta a{color:rgba(0,40,40,.6);text-decoration:underline}
.woocommerce span.onsale{background:var(--mf-volt);color:var(--mf-dark);font-family:var(--mf-font-sans);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.08em;padding:6px 12px;border-radius:var(--mf-radius-pill);position:absolute;top:16px;left:16px;min-height:0;min-width:0;line-height:1}

/* Digital-download badge (virtual/downloadable products) */
.mf-digital-badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--mf-green);margin-bottom:16px}

/* Tabs (description / additional info / reviews) */
.woocommerce-tabs{margin-top:56px;border-top:1px solid rgba(0,40,40,.10);padding-top:32px}
.woocommerce-tabs ul.tabs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 28px;padding:0}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs li a{display:inline-block;padding:10px 20px;border-radius:var(--mf-radius-pill);font-size:15.5px;font-weight:600;color:var(--mf-dark);background:var(--mf-grey)}
.woocommerce-tabs ul.tabs li.active a{background:var(--mf-dark);color:#fff}
.woocommerce-tabs .panel{font-size:18px;color:rgba(0,40,40,.78);max-width:760px}
.woocommerce-tabs .panel h2{font-family:var(--mf-font-sans);font-weight:600;font-size:26px;margin-top:0}

/* Related products */
.related.products{margin-top:64px;padding-top:48px;border-top:1px solid rgba(0,40,40,.10)}
.related.products > h2{font-family:var(--mf-font-sans);font-weight:600;font-size:clamp(26px,3vw,32px);margin:0 0 28px}

/* ==========================================================================
   Cart & Checkout (WooCommerce Blocks — restyle the wc-block-* classes)
   ========================================================================== */
.wc-block-cart,.wc-block-checkout{font-family:var(--mf-font-sans);color:var(--mf-dark)}
.wc-block-components-panel,.wc-block-cart-items,.wc-block-components-totals-wrapper,
.wc-block-components-order-summary,.wc-block-components-shipping-calculator,
.wp-block-woocommerce-checkout-order-summary-block,.wp-block-woocommerce-cart-order-summary-block{background:var(--mf-grey);border-radius:var(--mf-radius);padding:24px!important}
.wc-block-components-product-name{color:var(--mf-dark);font-weight:600}
.wc-block-cart-item__wrap{border-color:rgba(0,40,40,.12)!important}
.wc-block-components-quantity-selector{border-radius:var(--mf-radius-pill)!important;border-color:rgba(0,40,40,.22)!important;overflow:hidden}
.wc-block-components-totals-item__value,.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-weight:600}
.wc-block-components-checkout-step__title{font-family:var(--mf-font-sans);font-weight:600;font-size:22px}
.wc-block-components-radio-control__option,.wc-block-checkout__form .wc-block-components-text-input,
.wc-block-components-address-form .wc-block-components-text-input{border-radius:var(--mf-radius)!important}
.wc-block-components-text-input input,.wc-block-components-text-input textarea,
.wc-blocks-components-select select{border-radius:var(--mf-radius)!important;border-color:rgba(0,40,40,.22)!important;font-family:var(--mf-font-sans)!important}
.wc-block-components-text-input label{font-family:var(--mf-font-sans)!important}
.wc-block-cart__submit-container,.wc-proceed-to-checkout{margin-top:20px}
.wc-block-cart__submit-button{width:100%}
.wc-block-components-notice-banner{border-radius:var(--mf-radius)!important;font-family:var(--mf-font-sans)}

/* ==========================================================================
   My Account
   ========================================================================== */
.woocommerce-account .mf-shop{max-width:1100px}
/* Flexbox, not CSS Grid — this site's grid tracks (here and in the shop
   loop) kept leaving stray space / collapsing to content-width instead of
   the declared track size, so layouts needing a genuinely fixed column
   width use explicit flex-basis instead. */
.woocommerce-account .woocommerce{display:flex;flex-wrap:wrap;flex-direction:column;gap:28px}
/* .mf-shop-header (the page title) is injected on the SAME hook as the nav,
   right before it opens — meaning it's a third flex item alongside nav and
   content here, not just a heading above them. Without forcing it to its
   own full-width line it sits first in a row layout: to the LEFT of the
   nav, not above it. */
.woocommerce-account .woocommerce > .mf-shop-header{flex:1 1 100%}
@media (min-width:900px){
	.woocommerce-account .woocommerce{flex-direction:row;gap:40px;align-items:flex-start}
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation{flex:0 0 240px;width:240px}
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content{flex:1 1 auto;min-width:0}
}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;background:var(--mf-grey);border-radius:var(--mf-radius);padding:14px}
.woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-MyAccount-navigation li a{display:block;padding:12px 16px;border-radius:var(--mf-radius);font-size:16px;font-weight:600;color:rgba(0,40,40,.72)}
.woocommerce-MyAccount-navigation li.is-active a{background:#fff;color:var(--mf-dark);box-shadow:0 2px 8px rgba(0,40,40,.08)}
.woocommerce-MyAccount-navigation li a:hover{text-decoration:none;color:var(--mf-dark)}
.woocommerce-MyAccount-content{background:#fff;border:1px solid rgba(0,40,40,.10);border-radius:var(--mf-radius);padding:28px 24px}
@media (min-width:768px){.woocommerce-MyAccount-content{padding:36px}}
.woocommerce-MyAccount-content table.shop_table{width:100%;border-collapse:collapse;font-size:15.5px}
.woocommerce-MyAccount-content table.shop_table th{text-align:left;padding:12px 10px;border-bottom:2px solid rgba(0,40,40,.10);font-weight:700;color:var(--mf-dark)}
.woocommerce-MyAccount-content table.shop_table td{padding:14px 10px;border-bottom:1px solid rgba(0,40,40,.08)}
.woocommerce-MyAccount-content table.shop_table .button{padding:8px 16px!important;font-size:14px}

/* "Mes rendez-vous" / "Mes événements" (inc/my-account-bookings.php) */
.mf-booking-list{display:flex;flex-direction:column;gap:16px}
.mf-booking-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:20px;border:1px solid rgba(0,40,40,.10);border-radius:var(--mf-radius);background:var(--mf-grey)}
.mf-booking-item-main h3{margin:0 0 6px;font-size:19px;font-weight:600;font-family:var(--mf-font-sans);color:var(--mf-dark)}
.mf-booking-item-date{margin:0 0 10px;font-size:15.5px;color:rgba(0,40,40,.72)}
.mf-booking-item-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.mf-booking-item-actions .button{padding:10px 18px!important;font-size:14.5px}
.mf-booking-item-actions .mf-link{font-size:14.5px;color:rgba(0,40,40,.6);text-decoration:underline}

/* Forms — inputs shared by checkout, my-account, login/register */
.woocommerce form .form-row label{font-size:14.5px;font-weight:600;color:var(--mf-dark);margin-bottom:6px;display:block}
.woocommerce form .form-row .required{color:var(--mf-pink);text-decoration:none}
.woocommerce form .woocommerce-input-wrapper{display:block}
.woocommerce form input.input-text,.woocommerce form textarea,.woocommerce form select,
.woocommerce-account form input[type=text],.woocommerce-account form input[type=email],
.woocommerce-account form input[type=password],.woocommerce-account form input[type=tel]{width:100%;padding:14px 16px;border-radius:var(--mf-radius);border:1px solid rgba(0,40,40,.22);font-family:var(--mf-font-sans);font-size:16px;color:var(--mf-dark);background:#fff}
.woocommerce form input.input-text:focus,.woocommerce form textarea:focus,.woocommerce form select:focus{outline:2px solid var(--mf-green);outline-offset:1px}
.woocommerce-error,.woocommerce-info,.woocommerce-message,.woocommerce-noreviews,p.no-comments{border-radius:var(--mf-radius);border-top-color:var(--mf-dark)!important;font-family:var(--mf-font-sans);background:var(--mf-grey);padding:18px 22px 18px 52px;list-style:none}
.woocommerce-error::before,.woocommerce-message::before,.woocommerce-info::before{color:var(--mf-dark)!important}
.woocommerce-error li{margin:0}

/* Login / register (My Account, logged out) */
.woocommerce-account.logged-out .woocommerce-MyAccount-content,
.u-columns.woocommerce-Addresses{background:transparent;border:0;padding:0}
.mf-account-forms{display:grid;grid-template-columns:1fr;gap:32px;max-width:920px}
@media (min-width:768px){.mf-account-forms{grid-template-columns:1fr 1fr;gap:0}}
.mf-account-form-col{background:#fff;border:1px solid rgba(0,40,40,.10);border-radius:var(--mf-radius);padding:32px 26px}
@media (min-width:768px){.mf-account-form-col{padding:40px 36px}}
.mf-account-form-col:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
@media (min-width:768px){.mf-account-form-col:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;background:var(--mf-grey)}}
.mf-account-form-col h2{font-family:var(--mf-font-sans);font-weight:600;font-size:24px;margin:0 0 8px}
.mf-account-form-col > p{font-size:15.5px;color:rgba(0,40,40,.66);margin:0 0 24px}
.mf-account-form-col .form-row{margin-bottom:16px}
.mf-account-form-col button[type=submit]{width:100%;margin-top:8px}
.woocommerce-form-login__rememberme{display:flex;align-items:center;gap:8px;font-size:14.5px;color:rgba(0,40,40,.72)}
.woocommerce-LostPassword{margin-top:14px;font-size:14.5px}

/* Google sign-in slot (Nextend Social Login button gets styled to match once installed) */
.mf-social-login{margin:20px 0 24px;padding-top:20px;border-top:1px solid rgba(0,40,40,.10)}
.mf-social-login p{font-size:13.5px;text-align:center;color:rgba(0,40,40,.5);margin:0 0 14px;text-transform:uppercase;letter-spacing:.08em}
.mf-google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 20px;border-radius:var(--mf-radius-pill);border:1px solid rgba(0,40,40,.22);background:#fff;color:var(--mf-dark)!important;font-family:var(--mf-font-sans);font-weight:600;font-size:15.5px;text-decoration:none!important}
.mf-google-btn:hover{background:var(--mf-grey)}

/* ==========================================================================
   YITH Wishlist page (table)
   ========================================================================== */
.yith-wcwl-wishlist-toolbar,.wishlist_table{margin-top:8px}
table.wishlist_table{width:100%;border-collapse:collapse}
table.wishlist_table thead th{text-align:left;padding:14px 10px;border-bottom:2px solid rgba(0,40,40,.10);font-family:var(--mf-font-sans)}
table.wishlist_table td{padding:16px 10px;border-bottom:1px solid rgba(0,40,40,.08);vertical-align:middle}
table.wishlist_table td.product-remove a{color:rgba(0,40,40,.4)}
.yith-wcwl-share{margin-top:20px}

/* ==========================================================================
   Order action buttons (Mes commandes, pagination, "Parcourir la boutique")
   — WooCommerce's own templates only add generic .button/.woocommerce-button
   classes here, nothing in this theme ever styled them, so they fell back to
   Hello Elementor/Elementor's default accent colour (red) — not a colour
   that exists anywhere in the brand charter. Same visual language as
   .mf-btn everywhere else on the site.
   ========================================================================== */
.woocommerce-orders-table .button,
.woocommerce-pagination .button,
.woocommerce-MyAccount-content .wc-forward.button{
	display:inline-flex;align-items:center;justify-content:center;
	padding:9px 18px;border-radius:var(--mf-radius-pill);
	font-family:var(--mf-font-sans);font-weight:600;font-size:14px;
	background:var(--mf-dark);color:#fff!important;border:none;
	text-decoration:none!important;white-space:nowrap
}
.woocommerce-orders-table .button:hover,
.woocommerce-pagination .button:hover,
.woocommerce-MyAccount-content .wc-forward.button:hover{opacity:.88}
.woocommerce-orders-table .button.cancel{
	background:#fff;color:var(--mf-dark)!important;
	border:1px solid rgba(0,40,40,.28)
}
.woocommerce-orders-table .button.cancel:hover{background:var(--mf-grey);opacity:1}