/*
 * Olya Kids — Product Card styles.
 *
 * Every color/type/spacing value below falls back to the exact hex/px from
 * the design handoff (design_handoff_product_card/reference/_ds/…/tokens/*.css)
 * via `var(--token, fallback)`, so the card still looks right even if the
 * active theme hasn't loaded the Olya Kids design-system tokens yet. Once the
 * theme (or a future tokens plugin) defines the same custom property names,
 * those take over automatically — nothing here needs to change.
 */

/* OceanWP adds 50px top/bottom padding to every page's #content-wrap —
   tightened here for the product page only (this stylesheet only loads
   there), so the card doesn't have a big gap before whatever comes next
   (e.g. the theme's own newsletter section). */
body.single-product #main #content-wrap {
	padding-top: 12px;
	padding-bottom: 12px;
}

.olya-pc__breadcrumb {
	max-width: 430px;
	margin: 0 auto 12px;
	padding: 0 22px;
	font-family: var(--font-body, 'Montserrat', system-ui, sans-serif);
	font-size: 11.5px;
	color: var(--ink-400, #8c847a);
}

.olya-pc__breadcrumb a {
	color: inherit;
	text-decoration: underline;
}

.olya-pc__breadcrumb-sep {
	opacity: 0.6;
	margin: 0 2px;
}

@media (min-width: 1024px) {
	.olya-pc__breadcrumb {
		max-width: 1200px;
		padding: 0 24px;
		margin-bottom: 20px;
	}
}

.olya-pc {
	--olya-brand: var(--brand, #c2825c);
	--olya-brand-hover: var(--brand-hover, #ac6f4b);
	--olya-ink-900: var(--ink-900, #1f1c19);
	--olya-ink-800: var(--ink-800, #2d2a26);
	--olya-ink-600: var(--ink-600, #5a544c);
	--olya-ink-400: var(--ink-400, #8c847a);
	--olya-beige: var(--olya-beige, #ebdace);
	--olya-vanilla: var(--olya-vanilla, #f7f0e3);
	--olya-sand-200: var(--sand-200, #efe6d7);
	--olya-sand-300: var(--sand-300, #e2d5c2);
	--olya-rating: var(--rating, #deba82);
	--olya-text-link: var(--text-link, #935c3c);
	--olya-border-default: var(--border-default, #e2d5c2);
	--olya-radius-xs: var(--radius-xs, 4px);
	--olya-shadow-sm: var(--shadow-sm, 0 2px 8px rgba(47, 38, 30, 0.07));
	--olya-font-heading: var(--font-heading, 'League Spartan', 'Arial Narrow', sans-serif);
	--olya-font-body: var(--font-body, 'Montserrat', system-ui, sans-serif);
	--olya-font-accent: var(--font-accent, 'Caveat', 'Segoe Script', cursive);

	font-family: var(--olya-font-body);
	max-width: 430px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}

/* Mobile-only overflow guard (some theme containers otherwise let the
   gallery/card peek past the viewport edge). Left off at the desktop
   breakpoint below, since `overflow` on this element would break the
   sticky gallery column there. */
@media (max-width: 1023px) {
	.olya-pc {
		overflow-x: hidden;
	}
}

.olya-pc * {
	box-sizing: border-box;
}

.olya-pc img {
	max-width: 100%;
	display: block;
}

/* ---------------------------------------------------------------- gallery */

.olya-pc__gallery-frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--olya-beige);
	overflow: hidden;
}

.olya-pc__gallery-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 220ms ease;
	pointer-events: none;
	cursor: zoom-in;
}

.olya-pc__gallery-image.is-active {
	opacity: 1;
	pointer-events: auto;
}

.olya-pc__zoom-btn {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	color: var(--olya-ink-800);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--olya-shadow-sm);
	z-index: 2;
}

.olya-pc__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
}

.olya-pc__lightbox-image {
	position: relative;
	max-width: 92vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
}

.olya-pc__lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	border: none;
	background: #fff;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: var(--olya-ink-800);
}

.olya-pc__lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	border: none;
	background: #fff;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	color: var(--olya-ink-800);
}

.olya-pc__lightbox-nav--prev {
	left: 20px;
}

.olya-pc__lightbox-nav--next {
	right: 20px;
}

/* Mobile: plain dot indicators (kept — real thumbnails are a desktop-only
   upgrade, see .olya-pc__gallery-thumbs below). */
.olya-pc__gallery-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 14px 0 4px;
	background: #fff;
}

.olya-pc__gallery-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: all 160ms ease;
	background: var(--olya-sand-300);
}

.olya-pc__gallery-dot.is-active {
	width: 22px;
	background: var(--olya-brand);
}

/* Desktop: real photo thumbnails, hidden on mobile. */
.olya-pc__gallery-thumbs {
	display: none;
}

.olya-pc__gallery-thumb {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	overflow: hidden;
	transition: border-color 160ms ease;
	background: var(--olya-beige);
	flex-shrink: 0;
}

.olya-pc__gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.olya-pc__gallery-thumb.is-active {
	border-color: var(--olya-brand);
}

@media (min-width: 1024px) {
	.olya-pc__gallery-dots {
		display: none;
	}

	.olya-pc__gallery-thumbs {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 8px;
		padding: 14px 0 4px;
		background: #fff;
	}
}

/* ------------------------------------------------------------------ body */

.olya-pc__eyebrow,
.olya-pc__size-label,
.olya-pc__color-label,
.olya-pc__section-title,
.olya-pc__crosssell-name,
.olya-pc__rec-name {
	font-family: var(--olya-font-heading);
	text-transform: uppercase;
}

.olya-pc > .woocommerce-product-gallery + * {
	padding: 24px 22px 30px;
}

.olya-pc__eyebrow {
	font-weight: 600;
	letter-spacing: 0.14em;
	font-size: 12px;
	color: var(--olya-brand);
	margin: 24px 22px 8px;
}

.olya-pc__title {
	font-family: var(--olya-font-heading);
	font-size: 26px;
	line-height: 1.1;
	color: var(--olya-ink-900);
	margin: 0 22px 10px;
}

.olya-pc__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 22px 8px;
	border: none;
	background: none;
	padding: 0;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	width: fit-content;
}

.olya-pc__stars {
	display: flex;
	gap: 2px;
}

.olya-pc__rating-count {
	font-size: 13px;
	color: var(--olya-ink-400);
}

.olya-pc__price-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 22px 8px;
}

.olya-pc__price,
.olya-pc__price .woocommerce-Price-amount {
	font-family: var(--olya-font-heading);
	font-weight: 700;
	font-size: 27px;
	color: var(--olya-ink-900);
}

.olya-pc__price del,
.olya-pc__price del .woocommerce-Price-amount {
	font-weight: 600;
	font-size: 18px;
	color: var(--olya-ink-400);
	text-decoration: line-through;
}

.olya-pc__price del {
	margin-right: 6px;
}

.olya-pc__price ins {
	text-decoration: none;
}

.olya-pc__tagline {
	font-family: var(--olya-font-accent);
	font-size: 24px;
	line-height: 1.3;
	color: var(--olya-brand);
	margin: 0 22px 6px;
}

.olya-pc__hook {
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--olya-ink-600);
	margin: 0 22px 22px;
}

/* ------------------------------------------------------------------ color */

.olya-pc__color {
	margin: 0 22px 26px;
}

.olya-pc__color-label {
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--olya-ink-800);
	margin-bottom: 12px;
}

.olya-pc__color-name {
	text-transform: none;
	font-family: var(--olya-font-body);
	color: var(--olya-ink-900);
	font-weight: 700;
}

.olya-pc__color-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.olya-pc__swatch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	padding: 0;
	border: none;
	cursor: pointer;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px var(--olya-border-default);
}

.olya-pc__swatch.is-selected {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--olya-brand);
	cursor: default;
}

.olya-pc__swatch.is-unavailable {
	cursor: not-allowed;
	pointer-events: none;
}

.olya-pc__swatch-strike {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	overflow: hidden;
	opacity: 0.85;
}

.olya-pc__swatch-strike::after {
	content: '';
	position: absolute;
	top: 50%;
	left: -6px;
	right: -6px;
	height: 1.5px;
	background: var(--olya-ink-600);
	transform: rotate(-45deg);
}

/* ------------------------------------------------------------------- size */

.olya-pc__size {
	margin: 0 22px 14px;
}

.olya-pc__size-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.olya-pc__size-label {
	letter-spacing: 0.1em;
	font-size: 13px;
	color: var(--olya-ink-800);
}

.olya-pc__size-guide-link {
	display: flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--olya-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11.5px;
	color: var(--olya-text-link);
	text-decoration: underline;
	flex-shrink: 0;
}

.olya-pc__size-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.olya-pc__size-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	text-align: left;
	padding: 13px 14px;
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
	border: 1px solid var(--olya-sand-300);
}

.olya-pc__size-tile.is-selected {
	border: 2px solid var(--olya-ink-900);
	background: var(--olya-beige);
}

.olya-pc__size-tile.is-disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.olya-pc__size-tag {
	position: absolute;
	top: -9px;
	left: 12px;
	background: var(--olya-brand);
	color: #fff;
	font-family: var(--olya-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 9.5px;
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.olya-pc__size-dims {
	min-width: 0;
}

.olya-pc__size-dims-value {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--olya-ink-900);
	white-space: nowrap;
}

.olya-pc__size-puzzles {
	display: block;
	font-size: 12px;
	color: var(--olya-ink-400);
}

.olya-pc__size-discount {
	flex-shrink: 0;
	font-family: var(--olya-font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--olya-brand);
}

/* --------------------------------------------------------- add to cart -- */

.olya-pc__add-to-cart {
	margin: 0 22px 18px;
}

.olya-pc__add-to-cart .variations {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.olya-pc__add-to-cart .woocommerce-variation-price,
.olya-pc__add-to-cart .reset_variations {
	display: none;
}

.olya-pc__add-to-cart form.cart {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 12px;
	align-items: stretch;
	width: 100%;
}

/* Variable products (Maty Piankowe Puzzle) nest the quantity input AND the
   add-to-cart button one level deeper, inside WooCommerce's own
   `.woocommerce-variation-add-to-cart` wrapper div — that div, not
   form.cart directly, is the actual flex row that needs to hold them
   side by side. Simple products (Maty Ochronne) don't have this extra
   wrapper, so form.cart's own flex rule above covers them directly. */
.olya-pc__add-to-cart .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 12px;
	align-items: stretch;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
}

.olya-pc__add-to-cart .quantity {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: max-content !important;
}

/* Quantity stepper shows for every product line (Maty Piankowe Puzzle and
   Maty Ochronne alike) — people can order more than one mat of either kind. */
.olya-pc__add-to-cart .quantity {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--olya-sand-300);
	border-radius: var(--olya-radius-xs);
	overflow: hidden;
	flex: 0 0 auto;
}

/* Belt-and-braces: hide anything the theme injects into .quantity besides
   the real input and our own -/+ buttons (some themes add their own
   stepper markup, which would otherwise double up with ours). */
.olya-pc__add-to-cart .quantity > *:not(input.qty):not(.olya-pc__qty-btn) {
	display: none !important;
}

.olya-pc__add-to-cart .quantity .qty {
	width: 40px;
	text-align: center;
	font-weight: 700;
	color: var(--olya-ink-900);
	border: none;
	background: transparent;
	-moz-appearance: textfield;
	padding: 0;
}

.olya-pc__add-to-cart .quantity .qty::-webkit-inner-spin-button,
.olya-pc__add-to-cart .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.olya-pc__qty-btn {
	width: 42px;
	border: none;
	background: #fff;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: var(--olya-ink-800);
	display: flex;
	align-items: center;
	justify-content: center;
}

.olya-pc__add-to-cart .stock,
.olya-pc__add-to-cart .woocommerce-variation-availability {
	margin: 0 0 8px !important;
	font-size: 12px;
}

.olya-pc__add-to-cart .single_add_to_cart_button {
	flex: 1 1 0% !important;
	width: auto !important;
	min-width: 0;
	max-width: none !important;
	display: block !important;
	box-sizing: border-box;
	border: none;
	border-radius: var(--olya-radius-xs);
	background: var(--olya-brand);
	color: #fff;
	font-family: var(--olya-font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13.5px;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
	padding: 14px 10px;
	line-height: 1.2;
}

.olya-pc__add-to-cart .single_add_to_cart_button:hover {
	background: var(--olya-brand-hover);
}

.olya-pc__add-to-cart .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------- usp */

.olya-pc__usp {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 8px;
	padding: 18px 22px;
	border-top: 1px solid var(--olya-sand-200);
	border-bottom: 1px solid var(--olya-sand-200);
	margin-bottom: 24px;
}

.olya-pc__usp-item {
	display: flex;
	align-items: center;
	gap: 9px;
}

.olya-pc__usp-icon {
	color: var(--olya-brand);
	flex-shrink: 0;
}

.olya-pc__usp-title {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--olya-ink-800);
	line-height: 1.2;
}

.olya-pc__usp-sub {
	font-size: 11px;
	color: var(--olya-ink-400);
}

/* ------------------------------------------------------------ newsletter */

.olya-pc__newsletter-cta {
	width: calc(100% - 44px);
	margin: 0 22px 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1.5px dashed var(--olya-brand);
	background: var(--olya-vanilla);
	color: var(--olya-brand);
	border-radius: var(--olya-radius-xs);
	font-family: var(--olya-font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13px;
	cursor: pointer;
	padding: 15px 12px;
	line-height: 1.2;
}

/* -------------------------------------------------------------- features */

.olya-pc__features {
	margin: 0 22px 26px;
}

.olya-pc__section-title {
	letter-spacing: 0.1em;
	font-size: 15px;
	color: var(--olya-ink-900);
	margin-bottom: 16px;
}

.olya-pc__section-title--tight {
	margin-bottom: 4px;
}

.olya-pc__features-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 12px;
}

.olya-pc__feature {
	display: flex;
	align-items: center;
	gap: 11px;
}

.olya-pc__feature-icon {
	width: 54px;
	height: 54px;
	border-radius: 999px !important;
	background: var(--olya-beige) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.olya-pc__feature-icon img {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.olya-pc__feature-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--olya-ink-800);
	line-height: 1.25;
}

/* ----------------------------------------------------------- accordions */

.olya-pc__accordions {
	margin: 0 22px;
}

.olya-pc__accordion {
	border-bottom: 1px solid var(--olya-sand-200);
}

.olya-pc__accordion-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: none;
	border: none;
	padding: 16px 0;
	cursor: pointer;
	text-align: left;
}

.olya-pc__accordion-title {
	font-family: var(--olya-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	color: var(--olya-ink-900);
}

.olya-pc__accordion-sign {
	font-size: 20px;
	color: var(--olya-brand);
	line-height: 1;
}

.olya-pc__accordion-body {
	margin: 0 0 18px;
}

.olya-pc__accordion-body p {
	font-size: 13.5px;
	color: var(--olya-ink-600);
	line-height: 1.6;
	margin: 0 0 12px;
}

.olya-pc__accordion-body img {
	max-width: 100%;
	height: auto;
}

/* Custom-tab content often repeats its own title as a heading — our
   accordion toggle already shows it, so hide that first duplicate heading. */
.olya-pc__accordion-body > h1:first-child,
.olya-pc__accordion-body > h2:first-child,
.olya-pc__accordion-body > h3:first-child,
.olya-pc__accordion-body > h4:first-child {
	display: none;
}

.olya-pc__reviews {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 18px;
}

.olya-pc__review {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--olya-sand-200);
}

.olya-pc__review:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.olya-pc__review-stars .star-rating {
	color: var(--olya-rating);
	font-size: 13px;
}

.olya-pc__review-author {
	font-family: var(--olya-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 12px;
	color: var(--olya-ink-800);
	margin: 4px 0;
}

.olya-pc__review-text p {
	font-size: 13.5px;
	color: var(--olya-ink-600);
	line-height: 1.6;
	margin: 0;
}

.olya-pc__review-empty {
	font-size: 13.5px;
	color: var(--olya-ink-400);
	margin: 0 0 18px;
}

/* ----------------------------------------------------------- cross-sell */

.olya-pc__crosssell {
	margin: 30px 22px 0;
}

.olya-pc__crosssell-sub {
	font-size: 13px;
	color: var(--olya-ink-400);
	margin: 0 0 16px;
}

.olya-pc__crosssell-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.olya-pc__crosssell-item {
	display: flex;
	gap: 14px;
	align-items: center;
}

.olya-pc__crosssell-image {
	width: 76px;
	height: 76px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--olya-beige);
	flex-shrink: 0;
}

.olya-pc__crosssell-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.olya-pc__crosssell-info {
	flex: 1;
	min-width: 0;
}

.olya-pc__crosssell-name {
	font-family: var(--olya-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 12px;
	color: var(--olya-ink-800);
	line-height: 1.25;
	text-decoration: none;
	display: block;
}

.olya-pc__crosssell-price {
	font-weight: 700;
	font-size: 14px;
	color: var(--olya-ink-900);
	margin-top: 3px;
}

.olya-pc__crosssell-add {
	border: 1px solid var(--olya-brand);
	background: #fff;
	color: var(--olya-brand);
	border-radius: var(--olya-radius-xs);
	font-family: var(--olya-font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 11px;
	padding: 9px 12px;
	cursor: pointer;
	flex-shrink: 0;
	text-decoration: none;
}

/* -------------------------------------------------------- recommendations */

.olya-pc__recommendations {
	margin: 34px 0 0;
	padding-left: 22px;
}

.olya-pc__recommendations-scroller {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding-bottom: 6px;
	padding-right: 22px;
}

.olya-pc__rec-card {
	width: 150px;
	flex-shrink: 0;
	text-decoration: none;
}

.olya-pc__rec-card img {
	width: 150px;
	height: 150px;
	border-radius: 12px;
	object-fit: cover;
	background: var(--olya-beige);
}

.olya-pc__rec-name {
	letter-spacing: 0.04em;
	font-size: 11.5px;
	color: var(--olya-ink-600);
	margin-top: 10px;
	line-height: 1.25;
}

.olya-pc__rec-price {
	font-weight: 700;
	font-size: 13px;
	color: var(--olya-ink-900);
	margin-top: 4px;
}

/* ------------------------------------------------------------- modals -- */

.olya-pc__modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.olya-pc__modal-overlay--center {
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.olya-pc__modal-scrim {
	position: absolute;
	inset: 0;
	border: none;
	background: rgba(31, 28, 25, 0.5);
	cursor: pointer;
}

.olya-pc__modal-overlay--center .olya-pc__modal-scrim {
	background: rgba(31, 28, 25, 0.55);
}

.olya-pc__sheet {
	position: relative;
	background: #fff;
	border-radius: 20px 20px 0 0;
	padding: 22px 22px 26px;
	box-shadow: 0 -10px 40px rgba(47, 38, 30, 0.2);
	max-height: 84%;
	overflow-y: auto;
	max-width: 430px;
	margin: 0 auto;
	width: 100%;
}

.olya-pc__sheet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

.olya-pc__sheet-title {
	font-family: var(--olya-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 16px;
	color: var(--olya-ink-900);
}

.olya-pc__sheet-close {
	border: none;
	background: var(--olya-beige);
	width: 34px;
	height: 34px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 18px;
	color: var(--olya-ink-800);
	line-height: 1;
	flex-shrink: 0;
}

.olya-pc__sheet-close--panel {
	position: absolute;
	top: 14px;
	right: 14px;
}

.olya-pc__guide-image {
	width: 100%;
	height: auto;
	border-radius: 12px;
	margin-bottom: 12px;
}

.olya-pc__sheet-sub {
	font-size: 12.5px;
	color: var(--olya-ink-400);
	margin: 0 0 16px;
}

.olya-pc__guide-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.olya-pc__guide-row {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	padding: 12px 14px;
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
	border: 1px solid var(--olya-sand-200);
	width: 100%;
}

.olya-pc__guide-row.is-selected {
	background: var(--olya-beige);
	border: 2px solid var(--olya-ink-900);
}

.olya-pc__guide-row.is-disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.olya-pc__guide-dims {
	flex-shrink: 0;
	width: 76px;
	font-family: var(--olya-font-heading);
	font-weight: 700;
	font-size: 13px;
	color: var(--olya-ink-900);
}

.olya-pc__guide-mid {
	flex: 1;
	min-width: 0;
}

.olya-pc__guide-use {
	display: block;
	font-size: 12.5px;
	color: var(--olya-ink-800);
	line-height: 1.25;
}

.olya-pc__guide-puzzle {
	display: block;
	font-size: 11px;
	color: var(--olya-ink-400);
}

.olya-pc__guide-price {
	flex-shrink: 0;
	text-align: right;
}

.olya-pc__guide-compare {
	display: block;
	font-size: 11px;
	color: var(--olya-ink-400);
	text-decoration: line-through;
}

.olya-pc__guide-final {
	display: block;
	font-family: var(--olya-font-heading);
	font-weight: 700;
	font-size: 13px;
	color: var(--olya-ink-800);
}

.olya-pc__guide-discount {
	display: block;
	font-family: var(--olya-font-heading);
	font-weight: 700;
	font-size: 10.5px;
	color: var(--olya-brand);
}

/* ------------------------------------------------------------ newsletter */

.olya-pc__newsletter-panel {
	position: relative;
	width: 100%;
	max-width: 390px;
	background: #fff;
	border-radius: 20px;
	padding: 28px 24px 26px;
	box-shadow: 0 20px 60px rgba(47, 38, 30, 0.28);
	text-align: center;
}

.olya-pc__newsletter-icon {
	width: 60px;
	height: 60px;
	border-radius: 999px;
	background: var(--olya-beige);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px auto 16px;
}

.olya-pc__newsletter-title {
	font-family: var(--olya-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 21px;
	color: var(--olya-ink-900);
	line-height: 1.1;
	margin-bottom: 8px;
}

.olya-pc__newsletter-copy {
	font-size: 13.5px;
	color: var(--olya-ink-600);
	line-height: 1.5;
	margin: 0 0 20px;
}

.olya-pc__newsletter-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--olya-sand-300);
	border-radius: var(--olya-radius-xs);
	padding: 13px 14px;
	font-family: var(--olya-font-body);
	font-size: 14px;
	color: var(--olya-ink-900);
	background: #fff;
	margin-bottom: 10px;
}

.olya-pc__newsletter-submit {
	width: 100%;
	border: none;
	border-radius: var(--olya-radius-xs);
	background: var(--olya-brand);
	color: #fff;
	font-family: var(--olya-font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13.5px;
	cursor: pointer;
	padding: 14px 10px;
}

.olya-pc__newsletter-disclaimer {
	font-size: 10.5px;
	color: var(--olya-ink-400);
	line-height: 1.4;
	margin: 12px 0 0;
}

.olya-pc__newsletter-code {
	font-family: var(--olya-font-heading);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.08em;
	color: var(--olya-brand);
	background: var(--olya-vanilla);
	border: 1.5px dashed var(--olya-brand);
	border-radius: var(--olya-radius-xs);
	padding: 12px;
	margin: 8px 0 4px;
}

/* ------------------------------------------------------------- desktop */

/*
 * Standard e-commerce PDP pattern (Amazon, Zalando, most Shopify themes):
 * gallery pinned in a sticky left column, purchase panel + everything else
 * scrolling in a wider right column. Pure layout change — every section's
 * own markup/behaviour is untouched, `.olya-pc__content` (see
 * Olya_Product_Card::open_content_wrapper()) just groups "everything but
 * the gallery" into one flex item so the two columns can sit side by side.
 */
@media (min-width: 1024px) {
	.olya-pc {
		max-width: 1200px;
		display: flex;
		align-items: flex-start;
		gap: 56px;
		padding: 0 24px;
	}

	.olya-pc__gallery {
		flex: 1 1 580px;
		max-width: 620px;
		position: sticky;
		top: 24px;
	}

	.olya-pc__content {
		flex: 1 1 420px;
		min-width: 0;
	}

	/* OceanWP's own "Summary Width" customizer setting still applies to the
	   theme's `.summary.entry-summary` div wrapping our content (that div
	   is printed by the theme itself, between our gallery and content
	   markup — we didn't create it) — its fixed %-width + float fights our
	   flex layout, leaving a gap and a squeezed column. Neutralized here. */
	.olya-pc__content.summary,
	.olya-pc__content .summary,
	.olya-pc__content.entry-summary,
	.olya-pc__content .entry-summary {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin: 0 !important;
	}

	/* The mobile styles put 22px of horizontal breathing room around most
	   text/blocks because the card used to run edge-to-edge inside the
	   phone frame. In the right-hand content column that gap now reads as
	   redundant left/right padding, so it's neutralized here — the column
	   itself already sits comfortably inside the two-column gap/padding. */
	.olya-pc__content > * {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.olya-pc__eyebrow,
	.olya-pc__title,
	.olya-pc__rating,
	.olya-pc__price-row,
	.olya-pc__tagline,
	.olya-pc__hook,
	.olya-pc__color,
	.olya-pc__size,
	.olya-pc__add-to-cart,
	.olya-pc__accordions {
		padding-left: 0;
		padding-right: 0;
	}

	.olya-pc__usp,
	.olya-pc__features,
	.olya-pc__crosssell {
		padding-left: 0;
		padding-right: 0;
	}

	.olya-pc__newsletter-cta {
		width: 100%;
	}

	.olya-pc__recommendations {
		padding-left: 0;
	}

	.olya-pc__recommendations-scroller {
		padding-right: 0;
	}

	/* Title/price read a touch larger once there's room for them. */
	.olya-pc__title {
		font-size: 32px;
	}

	.olya-pc__price {
		font-size: 32px;
	}

	.olya-pc__tagline {
		font-size: 27px;
	}

	/* Size guide still uses the mobile bottom-sheet pattern by default —
	   on desktop it should read as a centered dialog, not a panel pinned
	   to the bottom edge of the viewport. */
	[data-olya-size-guide] {
		justify-content: center;
		align-items: center;
		padding: 24px;
	}

	[data-olya-size-guide] .olya-pc__modal-scrim {
		background: rgba(31, 28, 25, 0.55);
	}

	[data-olya-size-guide] .olya-pc__sheet {
		border-radius: 20px;
		max-width: 640px;
		max-height: 86vh;
	}
}

/* -------------------------------------------------------------- utility */

[hidden] {
	display: none !important;
}