/*
 * Shop page redesign — toggle, filter sidebar, product grid.
 * Colour/spacing choices deliberately match the vendor-dashboard styling
 * already shipped in the Review Voucher Marketplace plugin (green
 * accent, #ECECE7/#F1F1EE borders, #6b7178 muted text, 8px radii) so the
 * two plugins read as one consistent site even though their code is
 * fully independent.
 */

.msp-shop-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 24px 64px;
	box-sizing: border-box;
}

.msp-shop-wrap *,
.msp-shop-wrap *::before,
.msp-shop-wrap *::after {
	box-sizing: border-box;
}

/* ---- Header + toggle --------------------------------------------- */

.msp-shop-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 28px;
}

.msp-shop-title {
	margin: 0;
	font-size: 30px;
}

.msp-toggle {
	display: inline-flex;
	background: #F1F1EE;
	border-radius: 999px;
	padding: 4px;
	gap: 4px;
}

.msp-toggle-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	color: #6b7178;
	transition: background-color 150ms ease, color 150ms ease;
}

.msp-toggle-btn:hover {
	color: #1e1e1e;
}

.msp-toggle-btn.is-active {
	background: #4fad30;
	color: #ffffff;
}

/* ---- Body layout ---------------------------------------------------- */

.msp-shop-body {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.msp-shop-sidebar {
	flex: 0 0 260px;
	width: 260px;
}

.msp-shop-main {
	flex: 1 1 0;
	min-width: 0; /* lets the grid shrink below its content's natural width instead of overflowing */
}

/* ---- Filters ---------------------------------------------------------- */

.msp-filters {
	border: 1px solid #ECECE7;
	border-radius: 12px;
	padding: 20px;
	position: sticky;
	top: 24px;
}

.msp-filter-group {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ECECE7;
}

.msp-filter-group:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.msp-filter-heading {
	margin: 0 0 12px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-weight: 700;
	color: #6b7178;
}

.msp-price-inputs {
	display: flex;
	align-items: center;
	gap: 8px;
}

.msp-price-inputs input[type="number"] {
	width: 0;
	flex: 1 1 0;
	padding: 8px 10px;
	border: 1px solid #ECECE7;
	border-radius: 6px;
	font-size: 14px;
}

.msp-price-sep {
	color: #9A9FA6;
}

#msp-location {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ECECE7;
	border-radius: 6px;
	font-size: 14px;
	background: #fff;
}

/* !important throughout this block: on this site, generic <ul>/<li> and
   checkbox styling from the theme or a WooCommerce sidebar-widget default
   (built for a "label ... (count)" spread-apart layout) has repeatedly
   been found to bleed into plain lists like this one and override plain
   rules — the same conflict already documented and worked around in the
   Review Voucher Marketplace plugin's CSS. Without !important here, the
   checkbox and label text can end up pinned to opposite ends of the row
   instead of sitting together on the left. */
.msp-checkbox-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

.msp-checkbox-list li {
	display: block !important;
	text-align: left !important;
	width: auto !important;
}

.msp-checkbox-list label {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	width: auto !important;
	max-width: 100% !important;
	text-align: left !important;
	font-size: 14px;
	cursor: pointer;
}

.msp-checkbox-list input[type="checkbox"] {
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
}

.msp-checkbox-list label > *:not(input) {
	flex: 0 1 auto !important;
}

.msp-checkbox-list .msp-count {
	color: #9A9FA6;
	font-size: 13px;
	margin-left: 4px;
}

.msp-filter-empty {
	color: #9A9FA6;
	font-size: 14px;
	margin: 0;
}

.msp-filter-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

/* ---- Buttons ----------------------------------------------------------- */

.msp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 700;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
}

.msp-btn-primary {
	background: #4fad30;
	color: #ffffff;
}

.msp-btn-primary:hover {
	background: #439226;
	color: #ffffff;
}

.msp-btn-secondary {
	background: #ffffff;
	border-color: #ECECE7;
	color: #1e1e1e;
}

.msp-btn-text {
	background: transparent;
	border-color: transparent;
	color: #6b7178;
}

.msp-btn-text:hover {
	color: #1e1e1e;
}

/* ---- Toolbar ------------------------------------------------------------ */

.msp-shop-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 16px;
}

.msp-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #6b7178;
}

.msp-sort select {
	padding: 8px 10px;
	border: 1px solid #ECECE7;
	border-radius: 6px;
	font-size: 14px;
	background: #fff;
}

/* ---- Results ------------------------------------------------------------ */

#msp-results.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.msp-result-count {
	margin: 0 0 16px;
	font-size: 13px;
	color: #6b7178;
}

.msp-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

.msp-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #ECECE7;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 150ms ease, transform 150ms ease;
}

.msp-card:hover {
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.08 );
	transform: translateY( -2px );
}

/* ---- Card image gallery (swipeable when a product has more than one
   image) ---------------------------------------------------------------
   .msp-card-gallery-track is the actual scroll container — plain
   horizontal scroll with scroll-snap, so swiping is native browser
   behaviour rather than custom gesture-handling JS. Deliberately left
   plain: an earlier version added touch-action/-webkit-touch-callout/
   user-select tweaks here to try to fix an unreliable first swipe, and
   that made vertical page-scrolling on a card worse without actually
   fixing the swipe — so this is back to exactly this, nothing more, even
   though the first-swipe issue itself may still be there. Each slide is
   its own link to the product (an <a> can't be nested inside the
   .msp-card-body link below it), and a tap that doesn't move stays a
   normal tap-to-visit-product even inside a scrollable strip — only a
   genuine swipe scrolls instead of navigating. The dots are read by
   assets/js/shop.js to scroll to a given slide and to reflect which
   slide is currently in view; they sit outside any link so a tap on a
   dot never triggers navigation. */

.msp-card-gallery {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #F1F1EE;
	overflow: hidden;
}

.msp-card-gallery-track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.msp-card-gallery-track::-webkit-scrollbar {
	display: none;
	height: 0;
}

.msp-card-gallery-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: block;
}

.msp-card-gallery-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none; /* the slide <a> itself is the tap target */
}

.msp-card-gallery-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	pointer-events: none;
}

.msp-card-gallery-dot {
	pointer-events: auto;
	width: 6px;
	height: 6px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.65 );
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.08 );
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease;
}

.msp-card-gallery-dot.is-active {
	background: #ffffff;
	transform: scale( 1.3 );
}

/* Desktop-only cycle arrows. Hidden entirely on touch devices (the
   `hover: hover` + `pointer: fine` pair below is the standard way to
   detect a real mouse/trackpad rather than a finger) — touch keeps using
   the swipe + dots above, which is already the more natural interaction
   there. Faded in on hovering the image itself rather than shown at all
   times, so they don't visually compete with the dots when you're just
   browsing the grid. */
.msp-card-gallery-arrow {
	display: none;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.msp-card-gallery-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY( -50% );
		width: 28px;
		height: 28px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background: rgba( 255, 255, 255, 0.9 );
		color: #1e1e1e;
		box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.18 );
		cursor: pointer;
		opacity: 0;
		transition: opacity 150ms ease, background-color 150ms ease;
		z-index: 5;
	}

	.msp-card-gallery:hover .msp-card-gallery-arrow {
		opacity: 1;
	}

	.msp-card-gallery-arrow:hover {
		background: #ffffff;
	}

	.msp-card-gallery-arrow:disabled {
		display: none;
	}

	.msp-card-gallery-arrow svg {
		width: 14px;
		height: 14px;
	}

	.msp-card-gallery-arrow-prev {
		left: 8px;
	}

	.msp-card-gallery-arrow-next {
		right: 8px;
	}
}

.msp-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px;
	text-decoration: none;
	color: inherit;
}

.msp-card-location {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #6b7178;
	margin-bottom: 6px;
}

.msp-icon-pin {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.msp-card-title {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.4;
	color: #1e1e1e;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Pushed to the bottom of the card via margin-top: auto on the flex
   column set up on .msp-card / .msp-card-body above, so prices land on
   the same line across a row regardless of how many lines the title
   above it took. */
.msp-card-price-row {
	margin-top: auto;
	padding-top: 4px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.msp-card-price {
	font-size: 15px;
	font-weight: 700;
}

/* Regular/before price, dimmed and struck through. !important because
   this site's theme styling has repeatedly been found to set its own
   color on WooCommerce price markup (see the RVM plugin's CSS for the
   same pattern) and silently win over an unmarked rule here. */
.msp-card-price del,
.msp-card-price del .woocommerce-Price-amount {
	color: #393939 !important;
	font-weight: 400;
	font-size: 13px;
	text-decoration: line-through;
	margin-right: 6px;
}

/* Active/sale price, deliberately a size step up from the before price. */
.msp-card-price ins,
.msp-card-price ins .woocommerce-Price-amount {
	color: #1e1e1e !important;
	text-decoration: none;
	font-size: 17px;
	font-weight: 700;
}

.msp-discount-badge {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 999px;
	background: #4fad30;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

/* Reuses the "Save X%" / "Free shipping" pill styling that ships in the
   Review Voucher Marketplace plugin's own CSS on .free-shipping-badge —
   if that plugin isn't active the pill simply won't be styled specially
   and shows as plain text, which still reads fine here. Note this is a
   separate badge from .msp-discount-badge above — see the delivery
   notes about the two possibly showing at once. */

.msp-empty-state {
	text-align: center;
	padding: 48px 24px;
	border: 1px dashed #ECECE7;
	border-radius: 12px;
	color: #6b7178;
}

.msp-empty-state p {
	margin: 0 0 16px;
}

/* ---- Pagination ----------------------------------------------------------- */

.msp-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 32px;
}

.msp-page-link {
	color: #4fad30;
	font-weight: 700;
	text-decoration: none;
	font-size: 14px;
}

.msp-page-link:hover {
	text-decoration: underline;
}

.msp-page-status {
	font-size: 13px;
	color: #6b7178;
}

/* ---- Mobile category dropdown ------------------------------------------
   Desktop keeps the plain inline checkbox list from before: the trigger
   button below is hidden and .msp-category-dropdown-panel is just the
   static list. Below 800px the trigger becomes a button that opens the
   same list as an absolutely-positioned panel (opened/closed by
   assets/js/shop.js — on trigger click, a selection, or an outside
   click). Locking the panel to the container's width instead of letting
   it grow with its content is also what fixes the mobile list previously
   overflowing past the edge of the screen. */

.msp-category-dropdown-trigger {
	display: none;
}

.msp-mobile-filters-toggle {
	display: none;
}

@media ( max-width: 800px ) {
	.msp-category-dropdown {
		position: relative;
	}

	.msp-category-dropdown-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 10px 12px;
		border: 1px solid #ECECE7;
		border-radius: 6px;
		background: #fff;
		font-size: 14px;
		text-align: left;
		cursor: pointer;
	}

	.msp-category-dropdown-label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.msp-category-dropdown-chevron {
		width: 10px;
		height: 10px;
		flex: 0 0 auto;
		color: #6b7178;
		transition: transform 150ms ease;
	}

	.msp-category-dropdown.is-open .msp-category-dropdown-chevron {
		transform: rotate( 180deg );
	}

	/* !important on display/padding here: this element also carries the
	   .msp-checkbox-list class, whose own base rule (above, needed to
	   fight the same theme/WooCommerce list-reset conflict) sets
	   `padding: 0 !important` and `display: flex !important` at every
	   viewport width. Without matching !important here, those unscoped
	   rules silently win over this panel's own padding and its
	   default-closed state — which is exactly the "computed padding: 0"
	   you were seeing. */
	.msp-category-dropdown-panel {
		display: none !important;
		position: absolute;
		top: calc( 100% + 4px );
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		max-height: 260px;
		overflow-y: auto;
		overflow-x: hidden;
		background: #fff;
		border: 1px solid #ECECE7;
		border-radius: 8px;
		padding: 18px 14px 18px 22px !important;
		margin: 0;
		box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
		z-index: 20;
	}

	.msp-category-dropdown.is-open .msp-category-dropdown-panel {
		display: flex !important;
	}

	.msp-checkbox-list label {
		word-break: break-word;
	}

	/* A little extra breathing room between rows inside the dropdown
	   panel specifically — the desktop inline list keeps its original
	   10px gap. */
	.msp-category-dropdown-panel.msp-checkbox-list {
		gap: 14px !important;
	}
}

/* ---- Setup notice (Settings > Shop Redesign not configured yet) --------- */

.msp-setup-notice {
	max-width: 520px;
	margin: 64px auto;
	text-align: center;
	padding: 40px;
	border: 1px dashed #ECECE7;
	border-radius: 12px;
}

/* ---- Responsive ------------------------------------------------------------ */

@media ( max-width: 1024px ) {
	.msp-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 800px ) {
	/* Belt-and-suspenders against anything (long category names, the
	   checkbox list, etc.) forcing horizontal scroll past the edge of the
	   screen on mobile — safe here specifically because .msp-filters
	   drops position:sticky at this width (a few lines down), so this
	   can't trap the sticky sidebar the way it would on desktop. */
	.msp-shop-wrap {
		overflow-x: hidden;
	}

	.msp-shop-body {
		flex-direction: column;
	}

	.msp-shop-sidebar {
		width: 100%;
		max-width: 100%;
		flex: 1 1 auto;
		overflow-x: hidden;
	}

	.msp-filters {
		position: static;
		max-width: 100%;
		display: none;
	}

	.msp-shop-sidebar.is-open .msp-filters {
		display: block;
	}

	.msp-mobile-filters-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin-bottom: 12px;
		padding: 12px 14px;
		border: 1px solid #ECECE7;
		border-radius: 8px;
		background: #fff;
		font-size: 15px;
		font-weight: 700;
		color: #1e1e1e;
		cursor: pointer;
	}

	.msp-mobile-filters-chevron {
		width: 12px;
		height: 12px;
		flex: 0 0 auto;
		color: #6b7178;
		transition: transform 150ms ease;
	}

	.msp-shop-sidebar.is-open .msp-mobile-filters-chevron {
		transform: rotate( 180deg );
	}
}

@media ( max-width: 520px ) {
	.msp-shop-wrap {
		padding: 24px 16px 48px;
	}

	/* Two narrower cards per row instead of one full-width card, with
	   everything inside scaled down a step to match. */
	.msp-grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: 12px;
	}

	.msp-card-body {
		padding: 10px;
	}

	.msp-card-location {
		font-size: 10px;
		margin-bottom: 4px;
	}

	.msp-card-title {
		font-size: 13px;
		margin-bottom: 6px;
	}

	.msp-card-price ins,
	.msp-card-price ins .woocommerce-Price-amount {
		font-size: 14px;
	}

	.msp-card-price del,
	.msp-card-price del .woocommerce-Price-amount {
		font-size: 11px;
	}

	.msp-discount-badge {
		font-size: 10px;
		padding: 2px 7px;
	}

	.msp-card-gallery-dots {
		bottom: 6px;
		gap: 4px;
	}

	.msp-card-gallery-dot {
		width: 5px;
		height: 5px;
	}

	.msp-shop-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- Remove the theme's white panel behind the title/toggle -------------
   Best-effort: most themes/page builders wrap page content in a white
   "card" (padding + a background + a border or shadow) using markup this
   plugin doesn't control and can't see from here — common candidates are
   listed below, all scoped to the shop page only so nothing else on the
   site is touched. If some white background still shows through, it's
   coming from an element not in this list; a DevTools screenshot of the
   Elements panel around the title will show exactly which one and this
   can be targeted precisely. */

body.woocommerce-shop .msp-shop-header,
body.woocommerce-shop .msp-shop-wrap > .msp-shop-header {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

body.woocommerce-shop .entry-header,
body.woocommerce-shop .page-header,
body.woocommerce-shop .woocommerce-products-header,
body.woocommerce-shop .elementor-widget-theme-post-title,
body.woocommerce-shop .ast-container > .entry-content,
body.woocommerce-shop main > .site-content-inner {
	background: transparent !important;
	box-shadow: none !important;
}