/* ---------------------------------------------------------
   Single Product Page for Elementor — front end
   --------------------------------------------------------- */

.spew-single-product {
	max-width: 100%;
	--spew-line: rgba(0, 0, 0, .12);
	--spew-muted: #6b6b6b;
	--spew-accent: #1a1a1a;
	--spew-star: #d4693f;
	--spew-star-size: 16px;
	--spew-icon-size: 14px;
	--spew-icon-thickness: 2px;
	--spew-faq-icon-size: 12px;
}

/* Several elements combine width:100% with padding (review textarea, add-to-cart
   button). Without border-box that renders wider than their container — a few
   extra pixels that don't matter on a wide desktop column but cause real
   horizontal overflow/clipping once the column narrows on tablet and mobile.
   Most themes and Elementor's own global CSS already set this, so this is a
   no-op in the common case and only a safety net where they don't. */
.spew-single-product,
.spew-single-product *,
.spew-single-product *::before,
.spew-single-product *::after {
	box-sizing: border-box;
}

/* ---------- Top: gallery + details ---------- */

.spew-top {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
}
.spew-gallery { flex: 0 1 460px; max-width: 480px; position: sticky; top: 24px; }
.spew-gallery img { width: 100%; height: auto; display: block; border-radius: 8px; }
.spew-details { flex: 1 1 380px; min-width: 280px; }

.spew-title { margin: 0 0 10px; font-size: 32px; line-height: 1.15; }

.spew-rating-line { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.spew-review-count { color: var(--spew-muted); font-size: 14px; text-decoration: none; }
.spew-review-count:hover { text-decoration: underline; }

.spew-stars { display: inline-flex; gap: 2px; line-height: 1; }
.spew-star { color: rgba(0, 0, 0, .18); font-size: var(--spew-star-size); }
.spew-star.is-filled { color: var(--spew-star); }

.spew-price-block { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.spew-final-price { font-size: 28px; font-weight: 700; }
.spew-original-price { text-decoration: line-through; color: #999; font-size: 16px; display: none; }
.spew-savings-badge {
	background: #e8f5e9; color: #2e7d32;
	padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: 600;
	display: none;
}

.spew-meta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; font-size: 14px; }
.spew-coa { display: flex; align-items: center; gap: 8px; }
.spew-coa-link { text-decoration: underline; }
.spew-stock-instock { color: #2e7d32; }
.spew-stock-outofstock { color: #c62828; }
.spew-dosage { background: #f0f0f0; padding: 2px 8px; border-radius: 4px; }

.spew-pack-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.spew-pack-option {
	padding: 10px 18px; border: 1px solid #ddd; background: #f5f5f5;
	border-radius: 6px; cursor: pointer; font-size: 14px; transition: all .15s ease;
}
.spew-pack-option.is-active { background: var(--spew-accent); color: #fff; border-color: var(--spew-accent); }

.spew-add-to-cart { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.spew-add-to-cart-btn {
	padding: 16px 32px; background: var(--spew-accent); color: #fff; border: none;
	border-radius: 6px; font-size: 16px; cursor: pointer; width: 100%;
	transition: opacity .15s ease;
}
.spew-add-to-cart-btn:hover { opacity: .9; }
.spew-add-to-cart-btn.is-loading { opacity: .6; cursor: wait; }
.spew-add-to-cart-message { font-size: 13px; }
.spew-add-to-cart-message.is-success { color: #2e7d32; }
.spew-add-to-cart-message.is-error { color: #c62828; }

/* ---------- Backend-managed info fields (Lab Tested / Batch / Form) ---------- */

.spew-info-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 28px;
}
.spew-info-field { display: flex; flex-direction: column; gap: 6px; }
.spew-info-field-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--spew-muted);
}
.spew-info-field-value { font-size: 15px; color: #1a1a1a; }

/* ---------- "Pair With This" ---------- */

.spew-pair-with { margin-top: 40px; }
.spew-pair-with .spew-eyebrow { margin: 0 0 14px; }

.spew-pair-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	background: rgba(0, 0, 0, .04);
	border-radius: 14px;
	padding: 14px 20px;
}
.spew-pair-image {
	flex: 0 0 auto;
	width: 56px; height: 56px;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	display: flex; align-items: center; justify-content: center;
}
.spew-pair-image img { width: 100%; height: 100%; object-fit: contain; display: block; }

.spew-pair-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spew-pair-name {
	font-size: 16px; font-weight: 600; color: inherit; text-decoration: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spew-pair-name:hover { text-decoration: underline; }
.spew-pair-price { font-size: 15px; color: var(--spew-muted); }
.spew-pair-price ins { text-decoration: none; }

.spew-pair-add {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: none;
	background: #111b2e;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: transform .15s ease, opacity .15s ease, background-color .15s ease;
}
.spew-pair-add:hover { transform: scale(1.06); }
.spew-pair-add.is-loading { opacity: .6; cursor: wait; }
.spew-pair-add.is-done { background: #2e7d32; }
.spew-pair-outofstock { flex: 0 0 auto; font-size: 13px; color: #c62828; }

.spew-pair-message {
	position: absolute;
	right: 20px; bottom: -22px;
	font-size: 12px;
}
.spew-pair-message.is-success { color: #2e7d32; }
.spew-pair-message.is-error { color: #c62828; }

/* ---------- Product info accordion ---------- */

/* Sits directly under the Add to Cart button, inside the details column. */
.spew-details .spew-sections { margin-top: 40px; }
.spew-sections-full .spew-sections { margin-top: 56px; }

.spew-section { border-top: 1px solid var(--spew-line); }
.spew-section:last-child { border-bottom: 1px solid var(--spew-line); }

.spew-section-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 4px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
}
.spew-section-heading { font-size: 18px; font-weight: 700; }

.spew-section-icon {
	position: relative;
	flex: 0 0 auto;
	width: var(--spew-icon-size);
	height: var(--spew-icon-size);
	transition: transform .2s ease;
}
.spew-section-icon::before,
.spew-section-icon::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}
.spew-section-icon::before {
	top: calc(50% - (var(--spew-icon-thickness) / 2)); left: 0;
	width: 100%; height: var(--spew-icon-thickness);
}
.spew-section-icon::after {
	left: calc(50% - (var(--spew-icon-thickness) / 2)); top: 0;
	width: var(--spew-icon-thickness); height: 100%;
}
.spew-section.is-open .spew-section-icon::after { transform: rotate(90deg); opacity: 0; }

/* Chevron variant (Icon Style control) */
.spew-icons-chevron .spew-section-icon::before {
	width: 62%; height: var(--spew-icon-thickness);
	top: calc(50% - (var(--spew-icon-thickness) / 2)); left: 4%;
	transform: rotate(45deg);
}
.spew-icons-chevron .spew-section-icon::after {
	width: 62%; height: var(--spew-icon-thickness);
	top: calc(50% - (var(--spew-icon-thickness) / 2)); left: 34%;
	transform: rotate(-45deg); opacity: 1;
}
.spew-icons-chevron .spew-section.is-open .spew-section-icon { transform: rotate(180deg); }
.spew-icons-chevron .spew-section.is-open .spew-section-icon::after { transform: rotate(-45deg); opacity: 1; }

.spew-icons-chevron .spew-faq-icon::before {
	width: 62%; height: var(--spew-icon-thickness);
	top: calc(50% - (var(--spew-icon-thickness) / 2)); left: 4%;
	transform: rotate(45deg);
}
.spew-icons-chevron .spew-faq-icon::after {
	width: 62%; height: var(--spew-icon-thickness);
	top: calc(50% - (var(--spew-icon-thickness) / 2)); left: 34%;
	transform: rotate(-45deg); opacity: 1;
}
.spew-icons-chevron .spew-faq-item.is-open .spew-faq-icon { transform: rotate(180deg); }
.spew-icons-chevron .spew-faq-item.is-open .spew-faq-icon::after { transform: rotate(-45deg); opacity: 1; }

.spew-section-panel { overflow: hidden; }
.spew-section-content { line-height: 1.7; padding: 0 4px 24px; }
.spew-section-content > *:first-child { margin-top: 0; }
.spew-section-content > *:last-child { margin-bottom: 0; }

/* Nested FAQ inside the Common Questions panel */
.spew-faq-item { border-top: 1px solid var(--spew-line); }
.spew-faq-item:first-child { border-top: none; }
.spew-faq-question {
	width: 100%; text-align: left; background: none; border: none;
	padding: 14px 0; font-size: 15px; font-weight: 600; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	font-family: inherit; color: inherit;
}
.spew-faq-icon {
	position: relative; flex: 0 0 auto;
	width: var(--spew-faq-icon-size); height: var(--spew-faq-icon-size);
	transition: transform .2s ease;
}
.spew-faq-icon::before,
.spew-faq-icon::after {
	content: ""; position: absolute; background: currentColor; transition: transform .2s ease, opacity .2s ease;
}
.spew-faq-icon::before {
	top: calc(50% - (var(--spew-icon-thickness) / 2)); left: 0;
	width: 100%; height: var(--spew-icon-thickness);
}
.spew-faq-icon::after {
	left: calc(50% - (var(--spew-icon-thickness) / 2)); top: 0;
	width: var(--spew-icon-thickness); height: 100%;
}
.spew-faq-item.is-open .spew-faq-icon::after { transform: rotate(90deg); opacity: 0; }
.spew-faq-answer { padding: 0 0 16px; line-height: 1.6; }

/* ---------- Related products ---------- */

.spew-related { margin-top: 72px; }
.spew-eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--spew-muted);
}
.spew-related-title { margin: 0 0 28px; font-size: 32px; line-height: 1.15; }

.spew-related-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.spew-related-card { display: flex; flex-direction: column; }

.spew-related-media {
	position: relative;
	background: rgba(0, 0, 0, .04);
	border-radius: 14px;
	padding: 20px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.spew-related-image { display: block; width: 100%; height: 100%; }
.spew-related-image img {
	width: 100%; height: 100%; object-fit: contain; display: block;
	mix-blend-mode: multiply;
}

.spew-stock-pill {
	position: absolute;
	top: 14px; left: 14px;
	background: #fff;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
	line-height: 1;
	z-index: 2;
}
.spew-stock-pill.is-outofstock { color: #c62828; }

/* Pill button: collapsed to a circle, grows leftwards on hover to reveal the label.
   Anchored on the right so the extra width extends to the left. */
.spew-related-add {
	position: absolute;
	right: 14px; bottom: 14px;
	height: 44px;
	min-width: 44px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: #111b2e;
	color: #fff;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	white-space: nowrap;
	transition: padding-right .28s ease, background-color .15s ease, opacity .15s ease;
	z-index: 2;
}
.spew-related-add-icon {
	flex: 0 0 44px;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
.spew-related-add-label {
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	transition: max-width .28s ease, opacity .18s ease;
}

.spew-related-card:hover .spew-related-add,
.spew-related-add:hover,
.spew-related-add:focus-visible { padding-right: 20px; }

.spew-related-card:hover .spew-related-add-label,
.spew-related-add:hover .spew-related-add-label,
.spew-related-add:focus-visible .spew-related-add-label { max-width: 160px; opacity: 1; }

.spew-related-add.is-loading { opacity: .6; cursor: wait; }
.spew-related-add.is-done { background: #2e7d32; }

/* Touch devices have no real hover, so keep it a plain circle there. */
@media (hover: none) {
	.spew-related-card:hover .spew-related-add { padding-right: 0; }
	.spew-related-card:hover .spew-related-add-label { max-width: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.spew-related-add,
	.spew-related-add-label { transition: none; }
}

.spew-related-info {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 4px 0;
}
/* Without this, a flex child's default min-width is content-based, so a long
   product name refuses to shrink and pushes the card wider than its column —
   invisible on a wide desktop card, but a real overflow once the grid drops
   to 1–2 narrow columns on tablet/mobile. */
.spew-related-info-main { min-width: 0; }
.spew-related-name {
	display: block;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	line-height: 1.25;
}
.spew-related-name:hover { text-decoration: underline; }
.spew-related-cat {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--spew-muted);
}
.spew-related-price-block { text-align: right; flex: 0 0 auto; }
.spew-related-info.is-stacked { flex-direction: column; align-items: flex-start; }
.spew-related-info.is-stacked .spew-related-price-block { text-align: left; }
.spew-related-price { display: block; font-size: 17px; font-weight: 600; white-space: nowrap; }
.spew-related-from {
	display: block; margin-top: 6px;
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--spew-muted);
}
.spew-related-message { display: block; padding: 6px 4px 0; font-size: 12px; min-height: 0; }
.spew-related-message.is-success { color: #2e7d32; }
.spew-related-message.is-error { color: #c62828; }

/* ---------- Reviews ---------- */

.spew-reviews-section { margin-top: 72px; }

.spew-reviews-header {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
}
.spew-reviews-title { margin: 0 0 8px; font-size: 32px; line-height: 1.15; }
.spew-reviews-average { display: flex; align-items: center; gap: 10px; }
.spew-reviews-average .spew-star { font-size: 18px; }
.spew-reviews-count { font-size: 15px; color: #333; }

.spew-review-cta {
	display: inline-block;
	padding: 14px 26px;
	border: 1px solid var(--spew-line);
	border-radius: 999px;
	background: none;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	font-family: inherit;
	transition: background-color .15s ease;
}
.spew-review-cta:hover { background: rgba(0, 0, 0, .04); }

.spew-review-form {
	border: 1px solid var(--spew-line);
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 24px;
}
.spew-review-field { margin-bottom: 18px; }
.spew-review-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.spew-review-form textarea {
	width: 100%;
	border: 1px solid var(--spew-line);
	border-radius: 10px;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	resize: vertical;
}

.spew-rating-input { display: inline-flex; gap: 4px; }
.spew-rating-star {
	background: none; border: none; cursor: pointer; padding: 0 2px;
	font-size: 26px; line-height: 1; color: rgba(0, 0, 0, .18);
	transition: color .1s ease;
}
.spew-rating-star.is-active { color: var(--spew-star); }

.spew-review-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.spew-review-submit {
	padding: 13px 28px;
	background: var(--spew-accent);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 15px;
	font-family: inherit;
	cursor: pointer;
}
.spew-review-submit.is-loading { opacity: .6; cursor: wait; }
.spew-review-message { font-size: 14px; }
.spew-review-message.is-success { color: #2e7d32; }
.spew-review-message.is-error { color: #c62828; }

.spew-reviews-list { display: flex; flex-direction: column; gap: 16px; }

.spew-review {
	border: 1px solid var(--spew-line);
	border-radius: 14px;
	padding: 22px 24px;
}
.spew-review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.spew-review-avatar {
	width: 46px; height: 46px; border-radius: 50%;
	background: #111b2e; color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; font-weight: 600; flex: 0 0 auto;
}
.spew-review-meta { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.spew-review-author { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.spew-review-date { font-size: 13px; color: var(--spew-muted); }
.spew-review-rating { margin-bottom: 12px; }
.spew-review-text { line-height: 1.65; }
.spew-review-text > *:last-child { margin-bottom: 0; }
.spew-review-verified {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--spew-line);
	font-size: 13px;
	color: #333;
}
.spew-reviews-empty, .spew-reviews-closed { color: var(--spew-muted); }

.spew-reviews-more { margin-top: 20px; text-align: center; }
.spew-reviews-more-btn {
	padding: 12px 26px;
	border: 1px solid var(--spew-line);
	border-radius: 999px;
	background: none;
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}
.spew-reviews-more-btn.is-loading { opacity: .6; cursor: wait; }

/* ---------- Editor placeholder ---------- */

.spew-editor-placeholder {
	padding: 24px; text-align: center; background: #f5f5f5; border: 2px dashed #ccc;
	border-radius: 6px; color: #666;
}

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

@media (max-width: 1024px) {
	.spew-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.spew-top { gap: 32px; }
	/* Baseline fallback matching the widget's new tablet/mobile defaults for the
	   "Sticky Image Column" and Related "Columns" controls (see
	   class-spew-elementor-widget.php). Pages saved before that change still
	   have Elementor's own per-document CSS forcing the old values at every
	   width — these rules need to be at least as specific as Elementor's
	   `.elementor-element-{id} .spew-*` selectors to reliably win, which is why
	   they're written as two classes rather than one. Existing pages should
	   also have their Elementor CSS regenerated (Elementor → Tools →
	   Regenerate CSS) after updating so the controls themselves pick up the
	   new per-breakpoint defaults. */
	.spew-single-product .spew-gallery { position: static; }
	.spew-single-product .spew-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.spew-top { flex-direction: column; }
	.spew-gallery { position: static; max-width: 100%; flex-basis: auto; }
	.spew-title { font-size: 24px; }
	.spew-final-price { font-size: 22px; }
	.spew-add-to-cart-btn { width: 100%; }
	.spew-related-title, .spew-reviews-title { font-size: 24px; }
	.spew-related { margin-top: 48px; }
	.spew-reviews-section { margin-top: 48px; }
	.spew-info-fields { gap: 20px; }

	/* Pair-With: the old `flex-wrap: wrap` let the row break unpredictably —
	   depending on name length the "+" button could wrap onto its own line or
	   end up hard against the card edge, which read as the card being cut off.
	   Keeping it a single row with smaller fixed sizes and letting the name
	   ellipsis (already set up in the base rules) always fits instead. */
	.spew-pair-card { flex-wrap: nowrap; gap: 12px; padding: 12px 14px; }
	.spew-pair-image { width: 46px; height: 46px; }
	.spew-pair-name { font-size: 15px; }
	.spew-pair-price { font-size: 14px; }
	.spew-pair-add { width: 38px; height: 38px; font-size: 20px; }
	/* Was position:absolute with a negative bottom offset, so on a shorter mobile
	   card it could render partly outside the card / get overlapped by the
	   section directly below it. Normal flow + its own line avoids that. */
	.spew-pair-message { position: static; display: block; margin-top: 8px; text-align: right; }

	.spew-reviews-header { flex-direction: column; }
	.spew-review-cta { width: 100%; text-align: center; }
	.spew-review { padding: 18px; }
	.spew-review-form { padding: 18px; }
	.spew-rating-input { flex-wrap: wrap; }

	.spew-section-heading { font-size: 16px; }
}

@media (max-width: 600px) {
	.spew-related-grid,
	.spew-single-product .spew-related-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.spew-related-media { padding: 14px; }
	.spew-related-name { font-size: 16px; }
}