/* ==========================================================================
   Store page overview (wcfm/store/wcfmmp-view-store.php)
   Vertical sections: products (max two rows), articles, about, policies, reviews.
   Accent colours come from the vendor via --vendor-dark / --vendor-light.
   ========================================================================== */

.store-overview { padding-block: 1rem 3rem; }

/* Section nav: sticks under the site header */
.store-nav {
	position: sticky; top: var(--site-header-h, 88px); z-index: 40;
	margin: 0 calc(var(--gutter) * -1); padding: 0.6rem var(--gutter);
	background: rgba(250, 253, 250, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.admin-bar .store-nav { top: calc(var(--site-header-h, 88px) + 32px); }
.store-nav ul { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.store-nav ul::-webkit-scrollbar { display: none; }
.store-nav a {
	display: block; white-space: nowrap; padding: 0.45rem 1rem; border-radius: 999px;
	color: var(--ClrTxt1); background: #fff; box-shadow: var(--shadow); text-decoration: none; font-size: 0.95rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.store-nav a:hover, .store-nav a:focus-visible { background: var(--vendor-dark); color: #fff; }

/* Sections */
.store-section { margin-top: clamp(2rem, 4vw, 3rem); scroll-margin-top: calc(var(--site-header-h, 88px) + 4.5rem); }
.store-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1.25rem; }
.store-section__head h2 { position: relative; margin: 0; padding-bottom: 0.6rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.store-section__head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 4px; border-radius: 2px; background: var(--vendor-dark); }
.store-section__count { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--vendor-light); color: var(--ClrTxt1); font: 0.85rem/1.5 var(--font-body); vertical-align: middle; }
.store-section__more { color: var(--Clr2); text-decoration: none; font-family: var(--font-head); border-bottom: 2px solid var(--vendor-light); }
.store-section__more:hover { color: var(--ClrPrim2); border-bottom-color: var(--ClrPrim2); }

/* Products: four columns, and never more than two rows whatever the width */
.store-products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.store-products ul.products li.product:nth-child(n+9) { display: none; }
.store-products .wcfmmp_sold_by_container, .store-products .enlightenly_store_info { display: none; } /* every product here is the same store */
@media (max-width: 960px) {
	.store-products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.store-products ul.products li.product:nth-child(n+7) { display: none; }
}
@media (max-width: 600px) {
	.store-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
	.store-products ul.products li.product:nth-child(n+5) { display: none; }
}

/* Articles */
.store-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* About, policies, reviews */
.store-about .wcfm_store_description, .store-policies .wcfmmp-store-policies { max-width: 52rem; }
.store-about .wcfm_store_description > *:first-child { margin-top: 0; }
.store-policies .wcfm_policies_heading { font-size: 1.15rem; margin: 1.25rem 0 0.25rem; }
.store-info .wcfmmp-store-sidebar, .store-info .left_sidebar { float: none; width: auto; }

/* Single-section tab pages */
.store-back { margin: 1rem 0 0; }
.store-back a { text-decoration: none; font-family: var(--font-head); }
.store-main:not(.store-main--overview) .body_area { padding-top: 0.5rem; }

/* Articles on the store page: calmer card titles; About reads at body size */
.store-cards .card__title { font-size: 1.15rem; }
.store-about .wcfmmp-store-description { background: #fff; border-radius: calc(var(--radius) * 1.5); box-shadow: var(--shadow); padding: clamp(1.25rem, 3vw, 2rem); font-size: 1rem; }
.store-about .wcfm-store-about, .store-about .wcfm_store_description { max-width: 52rem; }
.store-about .wcfm_store_description p { font-size: 1rem; margin: 0 0 1em; }
.store-nav + .store-section, .store-overview > .store-section:first-child { margin-top: 1.5rem; }

/* WooCommerce's small-screen CSS sets li.product to 48% of its grid cell; let the grid size the cards */
#wcfmmp-store .store-products ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; min-width: 0; }

/* About: one card, not a box inside a box; WCFM styles these by id so match it */
#wcfmmp-store .store-about .wcfmmp-store-description { background: #fff; border-radius: calc(var(--radius) * 1.5); box-shadow: var(--shadow); padding: clamp(1.25rem, 3vw, 2rem); border: 0; margin: 0; }
#wcfmmp-store .store-about .wcfm-store-about,
#wcfmmp-store .store-about .wcfm_store_description { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; max-width: 52rem; font-size: 1rem; line-height: 1.7; color: var(--ClrTxt1); }
#wcfmmp-store .store-about .wcfm_store_description p, #wcfmmp-store .store-about .wcfm_store_description li { font-size: 1rem; line-height: 1.7; }
#wcfmmp-store .store-about ._area { padding: 0; margin: 0; }

/* Tab pages (view-all, articles, about, ...): use the full width now that the sidebar column is gone */
.store-main:not(.store-main--overview) #wcfmmp-store .body_area { max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.store-main:not(.store-main--overview) #wcfmmp-store .right_side,
.store-main:not(.store-main--overview) #wcfmmp-store .right_side_full { float: none; width: 100%; margin: 0; padding: 0; }

/* Mobile store header: WCFM paints the panel from its own colour setting but keeps the text white, which can be
   unreadable (pale yellow + white). Use the store's dark colour with text chosen for contrast instead. */
@media (max-width: 768px) {
	#wcfmmp-store .header_wrapper, #wcfmmp-store .header_right { background: var(--vendor-dark) !important; }
	#wcfmmp-store .wcfm_store_title, #wcfmmp-store .wcfm_store_title a,
	#wcfmmp-store .wcfmmp_store_header_address, #wcfmmp-store .wcfmmp_store_header_address a, #wcfmmp-store .wcfmmp_store_header_address span,
	#wcfmmp-store .store_info_parallal, #wcfmmp-store .store_info_parallal a { color: var(--vendor-dark-text) !important; }
	/* the pin sits inline with the address instead of floating beside it */
	#wcfmmp-store .wcfmmp_store_header_address { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.25rem 0; }
	#wcfmmp-store .wcfmmp_store_header_address i { position: static; float: none; margin: 0; color: inherit; font-size: 1rem; line-height: 1; }
	#wcfmmp-store .header_wrapper { padding-bottom: 0.75rem; }
}

/* WCFM's script writes a fixed pixel width onto the address block at page load (from the desktop layout) and never
   recalculates it, so resizing or rotating left the page much wider than the screen (and the centred pin/address
   floating far from the logo). Let it size itself on small screens. */
@media (max-width: 768px) {
	#wcfmmp-store .header_left .address,
	#wcfmmp-store .address.rgt { max-width: 100%; box-sizing: border-box; }
	#wcfmmp-store .header_left .address,
	#wcfmmp-store .address.rgt { width: auto !important; float: none !important; text-align: center; }
	#wcfmmp-store .wcfmmp_store_header_address i { color: inherit !important; font-size: 1rem !important; width: auto; height: auto; }
	#wcfmmp-store .wcfmmp_store_header_address { width: auto !important; }
}

@media (max-width: 768px) {
	/* beat WCFM's custom stylesheet (`#wcfmmp-store .address i { color: #19a87b !important }`) */
	#wcfmmp-store .address .wcfmmp_store_header_address i { color: var(--vendor-dark-text) !important; opacity: 0.85; }
	/* tighten the gap between the rating stars and the address line */
	#wcfmmp-store .header_left { padding-bottom: 0; }
	#wcfmmp-store .address.rgt { margin-top: -1.5rem; }
}

/* ---- Store tab pages (view all products, articles, about, policies, reviews, booking) ------------------------ */
/* Product grid: the grid cell sets the card width (WooCommerce's small-screen CSS makes each card 48% of its cell) */
#wcfmmp-store ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; min-width: 0; }
#wcfmmp-store ul.products { gap: 1rem; }
@media (max-width: 600px) {
	#wcfmmp-store ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
	#wcfmmp-store ul.products li.product { padding: 0.6rem !important; }
	#wcfmmp-store ul.products li.product .woocommerce-loop-product__title { font-size: 1rem; overflow-wrap: anywhere; }
}

/* Section menu: the same row of chips as the store overview, instead of WCFM's stacked boxes */
#wcfmmp-store .tab_area .tab_links_area { margin: 0 0 1.25rem; }
#wcfmmp-store .tab_area ul.tab_links {
	display: flex; flex-wrap: nowrap; gap: 0.5rem; margin: 0; padding: 0 0 0.25rem; list-style: none; border: 0;
	overflow-x: auto; scrollbar-width: none;
}
#wcfmmp-store .tab_area ul.tab_links::-webkit-scrollbar { display: none; }
#wcfmmp-store .tab_area ul.tab_links li {
	display: block; float: none; width: auto; margin: 0; padding: 0; border: 0 !important; border-radius: 999px; background: #fff; box-shadow: var(--shadow);
}
#wcfmmp-store .tab_area ul.tab_links li a { display: block; padding: 0.45rem 1rem; white-space: nowrap; text-decoration: none; font-size: 0.95rem; color: var(--ClrTxt1); text-transform: none; }
#wcfmmp-store .tab_area ul.tab_links li:hover a { text-decoration: none; }
#wcfmmp-store .tab_area ul.tab_links li.active { background: var(--vendor-dark); }
#wcfmmp-store .tab_area ul.tab_links li.active a, #wcfmmp-store .tab_area ul.tab_links li.active:hover a { color: var(--vendor-dark-text) !important; }
#wcfmmp-store .tab_area ul.tab_links li:not(.active):hover a { color: var(--ClrPrim2) !important; }
#wcfmmp-store .tab_area .tab_links li:after { display: none; }
#wcfmmp-store .tab_area .tab_links_area { margin-bottom: 1.25rem !important; padding-bottom: 0.25rem; }
#wcfmmp-store .tab_area .tab_links_area + * { margin-top: 0; }
#wcfmmp-store .tab_area .products-wrapper, #wcfmmp-store .tab_area #products-wrapper { margin-top: 1rem; }