/* ============================================================
   My Search — all UI styles
   All popups/overlays use z-index: 99999 to clear theme chrome.
   ============================================================ */

.ms-no-scroll { overflow: hidden; }

/* Hide leftover Advanced Woo Search chrome (label, clear-button, loader, results panels, mobile overlay).
   We keep the bare <input> intact since Cornerstone's header renders it via [aws_search_form]. */
.aws-search-form .aws-search-label,
.aws-search-form label.aws-search-label,
.aws-search-form > label,
.aws-search-form .aws-search-clear,
.aws-search-form .aws-loader,
.aws-search-result,
.aws-overlay-wrapper,
.aws-mobile-popup,
.aws-search-result-popup,
.aws-search-popup,
.aws-popup,
.aws-popup-overlay,
.aws-mobile-results,
.aws-mobile-form,
body.aws-mobile-popup-open,
body.aws-overlay-open {
	display: none !important;
}
/* Some AWS builds add inline overflow:hidden to body when the overlay opens. */
body.aws-overlay-open,
body.aws-mobile-popup-open {
	overflow: visible !important;
}

/* Hide any unknown popup/overlay containers that wrap AWS's input.
   These rules target only elements whose direct child is the AWS form. */
[class*="aws"][class*="popup"]:not(.aws-search-form),
[class*="aws"][class*="overlay"]:not(.aws-search-form),
[class*="aws"][class*="modal"]:not(.aws-search-form) {
	display: none !important;
}

/* Hide Pro theme's mobile search modal entirely — we render our own. */
.x-modal.ms-search-modal { display: none !important; }

/* ----- Our custom mobile search overlay ----- */
.ms-mobile-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(15, 23, 42, .55);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 14px 14px 0;
	box-sizing: border-box;
	overflow-y: auto;
}
.ms-mobile-overlay[hidden] { display: none !important; }
.ms-mobile-overlay-bar {
	display: flex;
	gap: 10px;
	align-items: center;
}
.ms-mobile-overlay-input,
.ms-mobile-overlay-close {
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #fff !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18) !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	font-family: inherit;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}
.ms-mobile-overlay-input {
	flex: 1;
	min-width: 0;
	padding: 0 20px !important;
	font-size: 16px;
	color: #20263a;
	line-height: 46px;
	vertical-align: middle;
}
.ms-mobile-overlay-input::-webkit-search-decoration,
.ms-mobile-overlay-input::-webkit-search-cancel-button,
.ms-mobile-overlay-input::-webkit-search-results-button,
.ms-mobile-overlay-input::-webkit-search-results-decoration {
	display: none;
	-webkit-appearance: none;
}
.ms-mobile-overlay-input:focus { outline: none; }
.ms-mobile-overlay-close {
	width: 46px;
	flex: 0 0 46px;
	padding: 0;
	color: #20263a;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ms-mobile-overlay-dropdown {
	margin-top: 12px;
	max-height: calc(100vh - 90px);
	overflow-y: auto;
	background: #f7f7f9;
	border-radius: 14px;
	padding: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
	-webkit-overflow-scrolling: touch;
}
.ms-mobile-overlay-dropdown:empty {
	display: none;
}
/* Reuse live-search styles inside the overlay. Categories + suggestions show
   to the right on landscape/wide mobile, then stack below on narrow portrait. */
.ms-mobile-overlay-dropdown .ms-live {
	position: static !important;
	border: 0;
	box-shadow: none;
	padding: 0;
	max-height: none;
	background: transparent;
	width: 100% !important;
}
.ms-mobile-overlay-dropdown .ms-live-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(130px, 1fr);
	gap: 10px;
	align-items: start;
}
.ms-mobile-overlay-dropdown .ms-live-side {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ms-mobile-overlay-dropdown .ms-live-side-card {
	padding: 12px;
	border-radius: 12px;
}
.ms-mobile-overlay-dropdown .ms-live-heading { display: block; }
.ms-mobile-overlay-dropdown .ms-live-products > .ms-live-heading {
	padding: 12px 12px 0;
	margin-bottom: 12px;
}
.ms-mobile-overlay-dropdown .ms-live-item { padding: 10px 12px; }
.ms-mobile-overlay-dropdown .ms-live-item-link {
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 12px;
}
.ms-mobile-overlay-dropdown .ms-live-thumb img { width: 44px; height: 44px; }
.ms-mobile-overlay-dropdown .ms-live-cta { display: none; }
.ms-mobile-overlay-dropdown .ms-live-name { font-size: 14px; }
.ms-mobile-overlay-dropdown .ms-live-price { font-size: 14px; }
.ms-mobile-overlay-dropdown .ms-live-suggestion {
	padding: 8px 12px;
	font-size: 13px;
}
.ms-mobile-overlay-dropdown .ms-live-category {
	padding: 6px 4px;
	font-size: 13px;
}
.ms-mobile-overlay-dropdown .ms-live-all {
	margin-top: 12px;
	padding: 14px;
	font-size: 14px;
}
@media (max-width: 380px) {
	.ms-mobile-overlay-dropdown .ms-live-side-card { padding: 8px; }
	.ms-mobile-overlay-dropdown .ms-live-suggestion,
	.ms-mobile-overlay-dropdown .ms-live-category { font-size: 12px; }
}

/* ----- Live search dropdown ----- */
.ms-live {
	position: fixed;
	z-index: 99999;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	background: #f7f7f9;
	border: 1px solid #e5e7ee;
	box-shadow: 0 22px 44px rgba(15, 23, 42, 0.18);
	font-size: 14px;
	color: #20263a;
	padding: 18px;
	scrollbar-width: thin;
}
.ms-live::-webkit-scrollbar { width: 6px; }
.ms-live::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.ms-live::-webkit-scrollbar-track { background: transparent; }
.ms-live[hidden] { display: none; }
.ms-live-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ms-live-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.85fr) minmax(220px, .8fr);
	gap: 16px;
	align-items: start;
}
.ms-live-products {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ms-live-side {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ms-live-side-card {
	background: #fff;
	border: 1px solid #ececf2;
	border-radius: 14px;
	padding: 16px 18px;
}
.ms-live-heading {
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #6b7280;
	text-transform: uppercase;
}
.ms-live-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ms-live-item {
	background: #fff;
	border: 1px solid #ececf2;
	border-radius: 14px;
	padding: 14px 18px;
	transition: box-shadow .14s ease, transform .14s ease;
}
.ms-live-item:hover {
	box-shadow: 0 8px 24px rgba(255, 42, 109, 0.18);
}

.ms-live-item-link {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.ms-live-thumb img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	display: block;
}

.ms-live-copy {
	min-width: 0;
	display: grid;
	gap: 4px;
}

.ms-live-name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #20263a;
}

.ms-live-price {
	color: #ff2a6d;
	font-size: 15px;
	font-weight: 700;
	white-space: normal;
}

.ms-live-price,
.ms-live-price span,
.ms-live-price bdi,
.ms-live-price ins {
	color: inherit;
	font-weight: inherit;
}

.ms-live-price del {
	margin-right: 6px;
	opacity: .55;
	font-weight: 500;
}

.ms-live-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 22px;
	border-radius: 999px;
	background: #ff2a6d;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
.ms-live-item:hover .ms-live-cta {
	background: #eb1b60;
}

.ms-live-suggestions-list,
.ms-live-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ms-live-suggestion {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #f2d7e1;
	border-radius: 999px;
	background: #fff;
	color: #20263a;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.ms-live-suggestion:hover {
	background: #ff2a6d;
	border-color: #ff2a6d;
	color: #fff;
}

.ms-live-category {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 4px;
	border: 0;
	background: none;
	color: #20263a;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	border-bottom: 1px solid #f1f2f6;
}
.ms-live-categories-list li:last-child .ms-live-category {
	border-bottom: 0;
}
.ms-live-category:hover .ms-live-category-name {
	color: #ff2a6d;
}
.ms-live-category-count {
	color: #ff2a6d;
	font-weight: 700;
}

.ms-live-loading,
.ms-live-empty {
	padding: 12px 0;
	color: #687186;
	font-size: 14px;
}

.ms-live-empty--suggestions {
	padding-top: 2px;
}

.ms-live-all,
.ms-live-all:link,
.ms-live-all:visited {
	display: block;
	padding: 14px 16px;
	text-align: center;
	font-weight: 700;
	background: #ff2a6d;
	color: #fff !important;
	text-decoration: none;
	border-radius: 999px;
	font-size: 15px;
	transition: background .14s ease;
}

.ms-live-all:hover,
.ms-live-all:focus,
.ms-live-all:active {
	background: #eb1b60;
	color: #fff !important;
	text-decoration: none;
}

@media (max-width: 767px) {
	.ms-live {
		max-height: min(74vh, 640px);
	}

	.ms-live-grid {
		display: block;
	}

	.ms-live-products {
		gap: 8px;
	}

	.ms-live-heading {
		display: none;
	}

	.ms-live-item {
		padding: 12px 14px;
		border-radius: 12px;
	}

	.ms-live-item-link {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 14px;
	}

	.ms-live-thumb img {
		width: 48px;
		height: 48px;
	}

	.ms-live-name {
		font-size: 14px;
	}

	.ms-live-price {
		font-size: 14px;
	}

	.ms-live-cta,
	.ms-live-side {
		display: none;
	}

	.ms-live-all {
		margin: 0;
		border-radius: 0;
	}

	.ms-live-loading,
	.ms-live-empty {
		padding: 16px;
	}
}

/* ----- Search results page ----- */
#ms-search-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px;
}
#ms-search-form {
	display: flex;
	gap: 10px;
	align-items: stretch;
	margin-bottom: 12px;
}
#ms-search-input,
#ms-search-form button {
	height: 52px;
	line-height: 1;
	font-size: 15px;
	border-radius: 999px;
	box-sizing: border-box;
	margin: 0;
}
#ms-search-input {
	flex: 1;
	padding: 0 20px;
	border: 1px solid #d9dce5;
	background: #fff;
	color: #20263a;
}
#ms-search-input:focus {
	outline: none;
	border-color: #ff2a6d;
}
#ms-search-form button {
	padding: 0 32px;
	background: #ff2a6d;
	color: #fff;
	border: none;
	cursor: pointer;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
	transition: background .14s ease;
}
#ms-search-form button:hover { background: #eb1b60; }
#ms-search-meta {
	color: #666;
	font-size: 14px;
	margin-bottom: 16px;
}
#ms-search-body {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 24px;
}
@media (max-width: 900px) {
	#ms-search-body { grid-template-columns: 1fr; }
	#ms-facets {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		padding-bottom: 8px;
		border-bottom: 1px solid #eee;
		margin-bottom: 16px;
	}
}
#ms-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}
#ms-sort {
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
#ms-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}
@media (max-width: 900px) {
	#ms-search-page { padding: 12px; }
	#ms-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	#ms-search-body { gap: 16px; }
	#ms-toolbar { justify-content: flex-start; }
}
@media (max-width: 480px) {
	#ms-results { gap: 8px; }
}
#ms-empty {
	padding: 40px;
	text-align: center;
	color: #666;
	font-size: 18px;
}
#ms-load-more {
	display: block;
	margin: 24px auto 0;
	padding: 14px 36px;
	background: #ff2a6d;
	color: #fff;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	transition: background .14s ease;
}
#ms-load-more:hover { background: #eb1b60; }

/* Facets */
.ms-facet-group {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}
.ms-facet-group h4 {
	margin: 0 0 8px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.ms-facet-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 240px;
	overflow-y: auto;
}
.ms-facet-group li { padding: 3px 0; }
.ms-facet-group label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 14px;
}
.ms-facet-count { color: #999; font-size: 12px; }
.ms-facet-group input[type="number"] {
	width: 100%;
	padding: 6px 8px;
	margin-top: 4px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

/* ----- Product cards (shared) ----- */
.ms-card {
	display: block;
	color: inherit;
	text-decoration: none;
	background: #fff;
	border: 1px solid #ece5dd;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
	transition: box-shadow .15s, transform .15s;
	height: 100%;
}
.ms-card:hover {
	box-shadow: 0 18px 36px rgba(15, 23, 42, .12);
	transform: translateY(-2px);
}
.ms-card-img {
	aspect-ratio: 1;
	overflow: hidden;
	background: #fff;
	/* Generous inner padding so the whole product (incl. tall vibrators and
	   long curved items) fits without touching any edge — matches live site. */
	padding: 18px;
}
.ms-card-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	display: block;
}
.ms-card-name {
	padding: 10px 14px 8px;
	margin: 0 14px;
	border-bottom: 1px solid #d8dae3;
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	line-height: 1.3;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ms-card-price {
	padding: 10px 12px 14px;
	font-size: 15px;
	color: #ff2a6d;
	font-weight: 700;
	text-align: center;
}

/* ----- Recommendation sections ----- */
.ms-recs {
	margin: 40px 0;
}
.ms-recs-injected {
	clear: both;
	width: 100%;
}
.ms-recs-header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.ms-recs-title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}
.ms-recs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}

.ms-recs-carousel .ms-recs-title {
	margin-bottom: 0;
}

.ms-recs-shell {
	position: relative;
	/* No horizontal padding so carousel cards align with the products grid
	   that sits below on category pages (4 columns, 20px gap). */
	padding: 0;
}

.ms-recs-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

.ms-recs-viewport::-webkit-scrollbar {
	display: none;
}

.ms-recs-track {
	display: grid;
	grid-auto-flow: column;
	/* Match the theme's `ul.products` grid: 4 columns, 20px gap. */
	grid-auto-columns: calc((100% - 60px) / 4);
	gap: 20px;
	align-items: stretch;
}

.ms-recs-track .ms-card {
	scroll-snap-align: start;
}

.ms-recs-nav {
	position: absolute;
	/* JS (alignNavToImageCenter in recommendations.js) overrides `top` to pin
	   the arrows to the centre of the first card's image. This static value
	   is a sensible fallback for the first paint before that runs. */
	top: 40%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: 1px solid rgba(15, 23, 42, .08);
	border-radius: 999px;
	background: #fff;
	color: #1f2937;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
	transition: background-color .15s ease, transform .15s ease, opacity .15s ease, box-shadow .15s ease, color .15s ease;
	z-index: 2;
}

.ms-recs-nav:hover {
	background: #ff2a6d;
	color: #fff;
	border-color: #ff2a6d;
	box-shadow: 0 10px 24px rgba(255, 42, 109, .28);
	transform: translateY(-50%) scale(1.05);
}

.ms-recs-nav:disabled {
	opacity: .35;
	cursor: default;
	transform: translateY(-50%);
	background: #fff;
	color: #1f2937;
	border-color: rgba(15, 23, 42, .08);
	box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}

/* Overlay the arrows on the leading/trailing edge of the carousel — they
   sit just inside the first/last card so the cards align with the grid
   below. */
.ms-recs-nav-prev {
	left: 8px;
}

.ms-recs-nav-next {
	right: 8px;
}

.ms-recs-carousel:not(.ms-recs-scrollable) .ms-recs-nav {
	display: none;
}

@media (max-width: 1024px) {
	.ms-recs-track {
		grid-auto-columns: calc((100% - 40px) / 3);
	}
}

@media (max-width: 767px) {
	.ms-recs {
		margin: 32px 0;
	}

	.ms-recs-shell {
		padding: 0;
	}

	.ms-recs-track {
		grid-auto-columns: calc((100% - 20px) / 2);
		gap: 20px;
	}

	.ms-recs-nav {
		display: none;
	}
}

/* ----- Powerstep popup ----- */
.ms-power-overlay,
.ms-exit-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0,0,0,.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}
.ms-power-box,
.ms-exit-box {
	position: relative;
	background: #fff;
	border-radius: 8px;
	max-width: 720px;
	width: 100%;
	padding: 24px;
	box-shadow: 0 12px 40px rgba(0,0,0,.25);
	max-height: 90vh;
	overflow-y: auto;
}
.ms-power-close,
.ms-exit-close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #666;
}
.ms-power-close:hover,
.ms-exit-close:hover { color: #000; }
.ms-power-added h2,
.ms-exit-box h2 {
	margin: 0 0 16px;
	font-size: 22px;
}
.ms-power-item {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 16px;
	align-items: center;
	padding: 12px;
	background: #f8f8f8;
	border-radius: 4px;
	margin-bottom: 16px;
}
.ms-power-item img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 3px;
}
.ms-power-item-name {
	font-weight: 600;
	margin-bottom: 4px;
}
.ms-power-item-price { color: #666; }
.ms-power-actions {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
}
.ms-power-actions a,
.ms-power-actions button {
	flex: 1;
	padding: 12px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	border: none;
}
.ms-power-cart {
	background: #ff2a6d;
	color: #fff;
}
.ms-power-continue {
	background: #fff;
	color: #ff2a6d;
	border: 1px solid #ff2a6d;
}
.ms-power-recs h3 {
	margin: 0 0 12px;
	font-size: 16px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

/* ----- FAQ ----- */
#ms-faq {
	max-width: 800px;
	margin: 0 auto;
}
#ms-faq-search {
	width: 100%;
	padding: 10px 14px;
	margin-bottom: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
}
.ms-faq-item {
	border-bottom: 1px solid #eee;
}
.ms-faq-q {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	text-align: left;
	color: inherit;
}
.ms-faq-chev {
	font-size: 20px;
	font-weight: 300;
	color: #999;
	margin-left: 12px;
}
.ms-faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .25s ease;
	color: #555;
	line-height: 1.6;
}
.ms-faq-open .ms-faq-a {
	max-height: 1000px;
	padding-bottom: 16px;
}
#ms-faq-empty {
	padding: 32px;
	text-align: center;
	color: #666;
}