/**
 * Popato Core — third-party overrides.
 *
 * WooCommerce, WooCommerce Blocks and Elementor all ship opinionated button and
 * layout styles, and WooCommerce Blocks enqueues after our theme stylesheet.
 * The !important flags here are deliberate and confined to brand-critical
 * surfaces: the primary CTA, the chat launcher and the sale badge.
 */

/* ==========================================================================
   Primary CTA — must never render in WooCommerce purple
   ========================================================================== */

.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce button.button.alt.single_add_to_cart_button,
.woocommerce a.button.alt.single_add_to_cart_button,
.woocommerce .checkout-button.button.alt,
.woocommerce #place_order,
.wc-block-components-button:not(.is-link) {
	background-color: #000000 !important;
	background-image: none !important;
	color: #ffffff !important;
	border-color: #000000 !important;
	border-radius: 0 !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	text-transform: uppercase;
	box-shadow: none !important;
	text-shadow: none !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce .checkout-button.button.alt:hover,
.woocommerce #place_order:hover {
	background-color: #474747 !important;
	border-color: #474747 !important;
	color: #ffffff !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Disabled state on a variable product before options are chosen */
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled {
	background-color: #e5e5e5 !important;
	border-color: #e5e5e5 !important;
	color: #767676 !important;
	opacity: 1 !important;
	cursor: not-allowed;
}

/* Catalogue card button — popato.in's accented button: square, black, and
   rgb(71,71,71) on hover. This file loads after the theme deliberately, so the
   values have to be right here or the card's own rules never win. */
.woocommerce ul.products li.product a.button,
.woocommerce a.button.add_to_cart_button {
	background-color: #000 !important;
	color: #fff !important;
	border-radius: 0 !important;
}
.woocommerce ul.products li.product a.button:hover {
	background-color: #474747 !important;
	color: #fff !important;
}

/* ==========================================================================
   Chat launcher — brand ink, never a plugin default
   ========================================================================== */

.pop-chat .pop-chat__launcher {
	background: #000000 !important;
	color: #ffffff !important;
	border: 0 !important;
}
.pop-chat .pop-chat__launcher:hover { background: #333333 !important; }

.pop-chat .pop-chat__close {
	background: rgba(240, 240, 240, .14) !important;
	color: #ffffff !important;
}

/* ==========================================================================
   Sale badge — was being clipped by the card's overflow
   ========================================================================== */

.woocommerce ul.products li.product,
.woocommerce div.product {
	position: relative;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	position: absolute !important;
	top: 7px !important;
	left: 7px !important;
	right: auto !important;
	inset-inline-end: auto !important;
	min-width: 50px !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 5px 10px !important;
	line-height: 1.2 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: 12px !important;
	background: #000 !important;
	color: #fff !important;
	z-index: 5;
}

/* ==========================================================================
   Product meta — WooCommerce runs SKU and category together
   ========================================================================== */

.woocommerce div.product .product_meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--pop-line, #e5e5e5);
	font-size: 13.5px;
	color: var(--pop-muted, #767676);
}
.woocommerce div.product .product_meta > span {
	display: block;
}
.woocommerce div.product .product_meta .sku_wrapper,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as {
	display: block;
}
.woocommerce div.product .product_meta a { color: var(--pop-body, #333333); }

/* ==========================================================================
   Reviews
   ========================================================================== */

.woocommerce #reviews #comments { padding-top: 6px; }

.woocommerce #reviews .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}
.woocommerce #reviews .commentlist li {
	margin: 0;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: var(--pop-radius, 14px);
}
.woocommerce #reviews .commentlist li .comment-text { margin: 0; padding: 0; border: 0; }
.woocommerce #reviews .commentlist li img.avatar {
	position: static;
	float: left;
	width: 42px;
	height: 42px;
	margin-right: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
}
.woocommerce #reviews .star-rating { color: var(--pop-star, #000000); }

.woocommerce #review_form_wrapper {
	margin-top: 26px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: var(--pop-radius, 14px);
}
.woocommerce #review_form #respond textarea {
	width: 100%;
	min-height: 130px;
	padding: 12px 14px;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: var(--pop-radius-sm, 9px);
	font-family: inherit;
	font-size: 15px;
}
.woocommerce #review_form #respond input#submit {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-radius: 999px !important;
}

/* Empty-state prompt so the tab never looks broken */
.woocommerce #reviews .woocommerce-noreviews {
	background: var(--pop-bg-alt, #ffffff);
	border: 1px dashed var(--pop-line, #e5e5e5);
	border-radius: var(--pop-radius, 14px);
	padding: 18px 20px;
	color: var(--pop-body, #333333);
}

/* ==========================================================================
   Variation select — was rendering as a bare browser control
   ========================================================================== */

.woocommerce div.product form.cart .variations select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #333333 50%),
	                  linear-gradient(135deg, #333333 50%, transparent 50%);
	background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 44px;
	cursor: pointer;
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--pop-muted, #767676);
}

/* ==========================================================================
   Product gallery — keep description images from running full-bleed
   ========================================================================== */

.woocommerce div.product .woocommerce-Tabs-panel img,
.woocommerce div.product .woocommerce-product-details__short-description img {
	max-width: 100%;
	height: auto;
	border-radius: var(--pop-radius-sm, 9px);
}

/* ==========================================================================
   Header — keep it one compact row
   ========================================================================== */

/* Elementor columns default to stacking their widgets; force the three header
   columns onto a single centred row and cap the overall height. */
header.elementor-location-header .elementor-section > .elementor-container {
	align-items: center;
	min-height: 0;
}

header.elementor-location-header .elementor-widget-image,
header.elementor-location-header .elementor-widget-nav-menu,
header.elementor-location-header .elementor-widget-woocommerce-menu-cart {
	margin-bottom: 0;
}

/* Nav must never wrap to a second line on desktop */
@media (min-width: 1025px) {
	header.elementor-location-header .elementor-nav-menu--main > ul.elementor-nav-menu {
		flex-wrap: nowrap;
		justify-content: center;
	}
	header.elementor-location-header .elementor-nav-menu--main .elementor-item {
		white-space: nowrap;
	}
}

/* Cart toggle sits inline with the row rather than adding its own block height */
header.elementor-location-header .elementor-menu-cart__toggle {
	display: inline-flex;
	margin: 0;
}
header.elementor-location-header .elementor-menu-cart__toggle .elementor-button {
	padding: 6px 10px;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	line-height: 1;
}

/* Announcement strip should be a thin band, not a section */
.pop-announcement { padding-block: 8px; font-size: 12px; }

@media (max-width: 1024px) {
	header.elementor-location-header .elementor-section > .elementor-container {
		flex-wrap: nowrap;
	}
}

/* ==========================================================================
   Cart pill — was a cramped bordered box with the count badge overlapping
   ========================================================================== */

header.elementor-location-header .elementor-menu-cart__toggle .elementor-button {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	padding: 9px 16px !important;
	background: #000000 !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #ffffff !important;
	font-size: 14px;
	font-weight: 650;
	line-height: 1;
	transition: background-color .2s ease;
}
header.elementor-location-header .elementor-menu-cart__toggle .elementor-button:hover {
	background: #333333 !important;
}

header.elementor-location-header .elementor-button-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-size: 17px;
	color: inherit;
}
header.elementor-location-header .elementor-button-text {
	color: inherit;
	font-variant-numeric: tabular-nums;
}

/* Count badge: sit on the icon corner instead of overlapping the price */
header.elementor-location-header .elementor-button-icon-qty {
	position: absolute !important;
	top: -7px !important;
	right: -9px !important;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	background: #000000 !important;
	color: #000000 !important;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
}

/* Below tablet the rupee total is noise — keep the icon only */
@media (max-width: 767px) {
	header.elementor-location-header .elementor-button-text { display: none; }
	header.elementor-location-header .elementor-menu-cart__toggle .elementor-button {
		padding: 10px 12px !important;
	}
}

/* ==========================================================================
   Buttons — one consistent system everywhere
   ========================================================================== */

.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.pop-btn {
	border-radius: 999px;
	font-weight: 650;
	letter-spacing: .01em;
	line-height: 1.2;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.pop-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

.elementor-button:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY(0);
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-button, .woocommerce a.button, .woocommerce button.button, .pop-btn {
		transition: none;
	}
	.elementor-button:hover, .woocommerce a.button:hover,
	.woocommerce button.button:hover, .pop-btn:hover { transform: none; }
}

/* ==========================================================================
   Imagery — enforce shape so a badly-proportioned source can never distort
   a section. Any image dropped into these slots is cropped, not stretched.
   ========================================================================== */

.pop-spotlight-img img,
.elementor-widget-image-box .elementor-image-box-img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: 16px;
	background: #ffffff;
}

/* Guide cards read better as a taller crop */
.elementor-widget-image-box .elementor-image-box-img img {
	aspect-ratio: 3 / 2;
	border-radius: 12px;
}

/* Catalogue and reel thumbnails stay square / portrait respectively */
.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Hero and closing bands: keep the focal point centred as the viewport scales */
.elementor-section[data-settings*="background"] { background-position: center center; }

/* Nothing in a content column should ever exceed its container */
.elementor-widget-image img { max-width: 100%; height: auto; }

/* Cart count badge was clipping against the header's top edge */
header.elementor-location-header .elementor-section > .elementor-container { overflow: visible; }
header.elementor-location-header .elementor-menu-cart__toggle { overflow: visible; }
header.elementor-location-header .elementor-button-icon-qty {
	top: -6px !important;
	right: -7px !important;
	box-shadow: 0 0 0 2px #fff;
}

/* ==========================================================================
   Typography — Elementor writes Georgia inline on headings built earlier;
   override so the whole site speaks in one modern voice.
   ========================================================================== */

.elementor-widget-heading .elementor-heading-title,
.elementor-widget-image-box .elementor-image-box-title,
.elementor-widget-icon-box .elementor-icon-box-title,
h1, h2, h3, h4,
.product_title,
.woocommerce-loop-product__title {
	font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: -0.022em;
}

body, .elementor-widget-text-editor, .elementor-widget-button .elementor-button {
	font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ==========================================================================
   Product cards — premium, calmer, more legible
   ========================================================================== */

.woocommerce ul.products li.product {
	border-radius: 18px;
	border-color: #eaeaea;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	transition: transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s ease, border-color .26s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-5px);
	border-color: #dcdcdc;
	box-shadow: 0 2px 4px rgba(0, 0, 0,.05), 0 18px 40px rgba(0, 0, 0,.11);
}

/* Image sits on a soft tint so white pack shots do not float in a white card */
.woocommerce ul.products li.product a img {
	background: linear-gradient(170deg, #f7f7f7 0%, #ededed 100%);
	padding: 6px;
	transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.045); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem !important;
	line-height: 1.35;
	padding: 4px 18px 2px;
	letter-spacing: -0.015em;
}

/* Price hierarchy: current price dominant, was-price quiet */
.woocommerce ul.products li.product .price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 18px 0;
	font-size: 1.06rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.woocommerce ul.products li.product .price del {
	font-size: .82em;
	font-weight: 500;
	opacity: .55;
	margin: 0;
}
.woocommerce ul.products li.product .price ins { order: -1; }

/* ==========================================================================
   Comparison table

   Redesigned as a comparison rather than a spec dump: the first column stays
   put while the models scroll, rows where the models agree recede, and the
   ones where they differ carry the eye. Buttons match the catalogue's black
   square, and the price comes through WooCommerce so it renders as ₹ with a
   real struck-through original.
   ========================================================================== */

.pop-compare {
	max-width: 1200px;
	margin: 56px auto 12px;
	padding-inline: var(--pop-gutter, 20px);
}

.pop-compare__head { text-align: center; margin-bottom: 28px; }

.pop-compare__title {
	font-family: var(--pop-font-display);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem);
	font-weight: 700;
	color: var(--pop-ink, #000000);
	margin: 0 0 6px;
}

.pop-compare__sub {
	margin: 0;
	color: var(--pop-muted, #767676);
	font-size: 15px;
}

/* Horizontal scroll, with the spec column pinned so a value is never orphaned
   from the thing it describes. */
.pop-compare__scroll {
	overflow-x: auto;
	scrollbar-width: thin;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: 16px;
	background: #fff;
}

.pop-compare__table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 15px;
}

.pop-compare__table th,
.pop-compare__table td {
	padding: 14px 18px;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid var(--pop-line, #e5e5e5);
}
.pop-compare__table tr:last-child th,
.pop-compare__table tr:last-child td { border-bottom: 0; }

.pop-compare__rowhead {
	position: sticky;
	left: 0;
	z-index: 2;
	min-width: 158px;
	background: #fff;
	text-align: left;
	font-weight: 600;
	color: var(--pop-ink, #000000);
	border-right: 1px solid var(--pop-line, #e5e5e5);
}

/* ------------------------------------------------------------ product head */

.pop-compare__col { background: #fff; padding-block: 24px 18px; }

.pop-compare__product { display: block; text-decoration: none; }

.pop-compare__media {
	display: block;
	width: 100%;
	max-width: 168px;
	margin: 0 auto 14px;
}

.pop-compare__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
}

.pop-compare__name {
	display: block;
	font-family: var(--pop-font-display);
	font-size: 16px;
	font-weight: 600;
	color: #242424;
	line-height: 1.3;
}
.pop-compare__product:hover .pop-compare__name { color: #000; }

.pop-compare__price {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--pop-ink, #000000);
}
.pop-compare__price del {
	margin-right: 6px;
	font-weight: 400;
	color: var(--pop-muted, #767676);
	text-decoration: line-through;
}
.pop-compare__price ins {
	background: none;
	text-decoration: none;
	color: var(--pop-ink, #000000);
}

.pop-compare__stars {
	display: block;
	margin-top: 6px;
	color: var(--pop-gold, #000);
	font-size: 13px;
	letter-spacing: 1px;
}
.pop-compare__stars i {
	margin-left: 4px;
	color: var(--pop-muted, #767676);
	font-style: normal;
	letter-spacing: normal;
}

/* ----------------------------------------------------------------- values */

.pop-compare__table tbody td {
	color: var(--pop-ink, #000000);
	font-weight: 500;
}

/* Where every model gives the same answer there is nothing to choose between,
   so the row steps back instead of competing with the ones that differ. */
.pop-compare__table tr.is-same th,
.pop-compare__table tr.is-same td {
	background: var(--pop-bg-alt, #f4f4f4);
	color: var(--pop-body, #333333);
	font-weight: 400;
}

.pop-compare__table td.is-empty {
	color: var(--pop-faint, #b1b1b1);
	font-weight: 400;
}

/* -------------------------------------------------------------------- CTA */

.pop-compare__cta-row th,
.pop-compare__cta-row td {
	padding-block: 20px;
	background: #fff;
	border-bottom: 0;
}

.pop-compare__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	min-height: 42px;
	padding: 0 22px;
	border-radius: 0;
	background: #000;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .25s ease;
}
.pop-compare__cta:hover,
.pop-compare__cta:focus { background: #474747; color: #fff; }

.pop-compare__note {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13.5px;
	color: var(--pop-muted, #767676);
}

@media (max-width: 700px) {
	.pop-compare__table { font-size: 14px; }
	.pop-compare__table th,
	.pop-compare__table td { padding: 12px 14px; }
	.pop-compare__rowhead { min-width: 128px; }
	.pop-compare__media { max-width: 118px; }
	.pop-compare__cta { min-width: 0; width: 100%; padding: 0 12px; }
}

/* ==========================================================================
   Spotlight images — cover was cropping wheels and handles off pack shots.
   Product photography must be contained, never cropped; only true lifestyle
   frames can safely be cropped to fill.
   ========================================================================== */

.pop-spotlight-img img {
	aspect-ratio: 4 / 3;
	object-fit: contain !important;
	padding: 22px;
	background: linear-gradient(170deg, #ffffff 0%, #f8f8f8 100%);
}

@media (max-width: 767px) {
	.pop-spotlight-img img { padding: 14px; aspect-ratio: 5 / 4; }
}

/* Guide covers are photographs, so cover is still correct there */
.elementor-widget-image-box .elementor-image-box-img img {
	object-fit: cover;
}

/* ==========================================================================
   Mobile header
   Logo left; cart and menu grouped on the right. Elementor's toggle ships with
   a grey background box and the cart renders as a dark disc — both read as
   heavy chrome on a white bar, so they become plain icons here.
   ========================================================================== */

@media (max-width: 1024px) {

	header.elementor-location-header .elementor-section > .elementor-container {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 4px;
	}

	/* Logo takes the free space; the two controls sit tight on the right. */
	header.elementor-location-header .elementor-column:nth-child(1) {
		flex: 1 1 auto !important;
		width: auto !important;
	}
	header.elementor-location-header .elementor-column:nth-child(2) {
		flex: 0 0 auto !important;
		width: auto !important;
		order: 3;                      /* menu furthest right */
	}
	header.elementor-location-header .elementor-column:nth-child(3) {
		flex: 0 0 auto !important;
		width: auto !important;
		order: 2;                      /* cart before the menu */
	}

	/* Logo: noticeably larger than the 104px it was rendering at */
	header.elementor-location-header .elementor-widget-image img {
		width: 132px !important;
		max-width: 132px !important;
		height: auto;
	}

	/* Hamburger — no box, just the glyph */
	header.elementor-location-header .elementor-menu-toggle {
		background: none !important;
		background-color: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		padding: 4px !important;
		margin: 0 !important;
		width: auto !important;
		height: auto !important;
	}
	header.elementor-location-header .elementor-menu-toggle i,
	header.elementor-location-header .elementor-menu-toggle svg {
		color: #000000 !important;
		fill: #000000 !important;
		font-size: 27px !important;
		width: 27px;
		height: 27px;
	}
	header.elementor-location-header .elementor-menu-toggle:focus,
	header.elementor-location-header .elementor-menu-toggle:hover {
		background: none !important;
	}

	/* Cart — was a dark disc; now a clear icon that matches the menu weight */
	header.elementor-location-header .elementor-menu-cart__toggle .elementor-button {
		background: none !important;
		background-color: transparent !important;
		border: 0 !important;
		padding: 4px 6px !important;
		color: #000000 !important;
	}
	header.elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon {
		color: #000000 !important;
		font-size: 25px !important;
	}
	header.elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon i,
	header.elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon svg {
		color: #000000 !important;
		fill: #000000 !important;
	}

	/* Count badge stays gold, tightened against the larger icon */
	header.elementor-location-header .elementor-button-icon-qty {
		top: -4px !important;
		right: -6px !important;
		min-width: 16px;
		height: 16px;
		line-height: 16px;
		font-size: 10px;
		box-shadow: 0 0 0 2px #fff;
	}

	/* Trim the bar so the taller logo does not add height */
	header.elementor-location-header .elementor-section {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}
	header.elementor-location-header .elementor-widget { margin-bottom: 0 !important; }
}

@media (max-width: 480px) {
	header.elementor-location-header .elementor-widget-image img {
		width: 118px !important;
		max-width: 118px !important;
	}
}

/* ==========================================================================
   Mobile menu panel
   Elementor renders the dropdown inside the nav widget, so sitting in a narrow
   right-hand column it opened as a cramped list within the header. Anchor it to
   the header section instead and let it span the full width beneath the bar.
   ========================================================================== */

@media (max-width: 1024px) {

	header.elementor-location-header .elementor-section {
		position: relative !important;
	}
	/* The section must be the offset parent, so nothing between may be relative. */
	header.elementor-location-header .elementor-column:nth-child(2),
	header.elementor-location-header .elementor-column:nth-child(2) .elementor-widget-wrap,
	header.elementor-location-header .elementor-widget-nav-menu,
	header.elementor-location-header .elementor-widget-nav-menu .elementor-widget-container,
	header.elementor-location-header .elementor-nav-menu--dropdown-none,
	header.elementor-location-header .elementor-nav-menu__container {
		position: static !important;
	}

	header.elementor-location-header .elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		background: #fff !important;
		border-top: 1px solid #e5e5e5;
		box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
		z-index: 9999;
	}

	header.elementor-location-header .elementor-nav-menu--dropdown ul,
	header.elementor-location-header .elementor-nav-menu--dropdown li {
		width: 100%;
		text-align: left;
	}

	header.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item {
		display: block;
		padding: 15px 22px !important;
		font-size: 16px !important;
		font-weight: 650;
		color: #000000 !important;
		border-bottom: 1px solid #ffffff;
		text-align: left !important;
	}
	header.elementor-location-header .elementor-nav-menu--dropdown li:last-child a.elementor-item {
		border-bottom: 0;
	}
	header.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item:hover,
	header.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
		background: #ffffff !important;
		color: #000000 !important;
	}

	/* Close (X) state keeps the same footprint as the burger — no jump. */
	header.elementor-location-header .elementor-menu-toggle.elementor-active i,
	header.elementor-location-header .elementor-menu-toggle.elementor-active svg {
		color: #000000 !important;
		fill: #000000 !important;
	}

	/* Cart is hidden on mobile at the client's request; it stays reachable from
	   the cart page, the side-cart and the sticky add-to-cart bar. */
	header.elementor-location-header .elementor-widget-woocommerce-menu-cart {
		display: none !important;
	}
}

/* ==========================================================================
   Offer strip — centre it on small screens
   ========================================================================== */

@media (max-width: 767px) {
	.pop-campaign-bar__inner {
		flex-direction: column;
		gap: 3px;
		padding: 5px 14px;
		text-align: center;
	}
	.pop-campaign-bar__text {
		display: block;
		width: 100%;
		text-align: center;
		line-height: 1.4;
	}
	.pop-campaign-bar__timer {
		justify-content: center;
		width: 100%;
	}
}

/* ==========================================================================
   Product description showcase — three across, two deep

   popato.in tells the product's story in pictures under the description. The
   grid is built from the product's own gallery, so it fills itself; cells hold
   a 4:3 crop so a mixed gallery still lines up row to row.
   ========================================================================== */

.pop-showcase {
	margin: 44px 0 8px;
}

.pop-showcase__title {
	margin: 0 0 22px;
	font-family: var(--pop-font-display);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--pop-ink, #000);
	text-align: center;
}

.pop-showcase__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.pop-showcase__cell {
	margin: 0;
	overflow: hidden;
	background: var(--pop-bg-alt, #ffffff);
}

.pop-showcase__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}

.pop-showcase__cell:hover .pop-showcase__img { transform: scale(1.04); }

@media (max-width: 900px) {
	.pop-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 560px) {
	.pop-showcase__grid { grid-template-columns: 1fr; gap: 10px; }
	.pop-showcase__img { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
	.pop-showcase__img,
	.pop-showcase__cell:hover .pop-showcase__img { transition: none; transform: none; }
}

/* ==========================================================================
   Product story — the built description

   A full-bleed band, headed sections alternating against photography, an
   interactive mode stepper where the product has modes, and a closing grid.
   Everything is black and white; the only motion is a reveal on scroll.
   ========================================================================== */

.pop-story { margin: 8px 0 0; }

.pop-story > * + * { margin-top: clamp(36px, 5vw, 68px); }

/* The band breaks the tab's container to the full width of the viewport. */
.pop-story__band {
	margin: 0;
	width: 100vw;
	margin-inline-start: 50%;
	transform: translateX(-50%);
}
.pop-story__band img { display: block; width: 100%; height: auto; }

.pop-story__intro {
	max-width: 62ch;
	margin-inline: auto;
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--pop-body, #333);
}
.pop-story__intro p + p { margin-top: .8em; }

/* ------------------------------------------------------------- sections */

.pop-story__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(20px, 4vw, 56px);
}

/* Alternating sides stop the page reading as a list. */
.pop-story__split.is-flipped .pop-story__figure { order: 2; }

.pop-story__figure { margin: 0; overflow: hidden; background: var(--pop-bg-alt, #ffffff); }
.pop-story__figure img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.2, .8, .3, 1);
}
.pop-story__split:hover .pop-story__figure img { transform: scale(1.03); }

.pop-story__heading {
	margin: 0 0 .5em;
	font-family: var(--pop-font-display);
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.95rem);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.02em;
	color: var(--pop-ink, #000);
}

.pop-story__copy p {
	margin: 0 0 .85em;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--pop-body, #333);
}
.pop-story__copy p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- mode stepper */

.pop-modes {
	border-top: 1px solid var(--pop-line, #e5e5e5);
	border-bottom: 1px solid var(--pop-line, #e5e5e5);
	padding-block: clamp(28px, 4vw, 48px);
}

.pop-modes__title { text-align: center; }

.pop-modes__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 26px;
}

.pop-modes__tab {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 18px 10px 10px;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: 999px;
	background: #fff;
	color: var(--pop-body, #333);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.pop-modes__tab:hover { border-color: var(--pop-ink, #000); }

.pop-modes__tab.is-active {
	background: #000;
	border-color: #000;
	color: #fff;
}

.pop-modes__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--pop-bg-alt, #ffffff);
	color: var(--pop-ink, #000);
	font-size: 13px;
	font-weight: 700;
}
.pop-modes__tab.is-active .pop-modes__num { background: #fff; }

.pop-modes__panels { max-width: 64ch; margin-inline: auto; text-align: center; }
.pop-modes__panel[hidden] { display: none; }
.pop-modes__panel h3 {
	margin: 0 0 .4em;
	font-family: var(--pop-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--pop-ink, #000);
}
.pop-modes__panel p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--pop-body, #333);
}

/* ---------------------------------------------------------------- grid */

.pop-story__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.pop-story__cell { margin: 0; overflow: hidden; background: var(--pop-bg-alt, #ffffff); }
.pop-story__cell img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}
.pop-story__cell:hover img { transform: scale(1.04); }

/* ------------------------------------------------------------- reveal */

[data-pop-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .3, 1);
}
[data-pop-reveal].is-revealed { opacity: 1; transform: none; }

@media (max-width: 860px) {
	.pop-story__split { grid-template-columns: 1fr; }
	.pop-story__split.is-flipped .pop-story__figure { order: 0; }
	.pop-story__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 560px) {
	.pop-story__grid { grid-template-columns: 1fr; }
	.pop-modes__tab { padding: 8px 14px 8px 8px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	[data-pop-reveal] { opacity: 1; transform: none; transition: none; }
	.pop-story__figure img, .pop-story__cell img { transition: none; }
	.pop-story__split:hover .pop-story__figure img,
	.pop-story__cell:hover img { transform: none; }
}

/* ==========================================================================
   Instagram official embeds

   Used when a reel carries only its link. Instagram's script rewrites the
   blockquote into an iframe whose internals we cannot style, so the job here
   is only to lay the cards out and keep them from overflowing.
   ========================================================================== */

.pop-reels--embed { text-align: center; }

.pop-reels__embeds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
	gap: 18px;
	align-items: start;
	justify-items: center;
	margin-top: 22px;
}

/* Instagram's script sets inline min-width/max-width; these have to win or a
   single embed stretches to fill the row. */
.pop-reels__embeds .instagram-media {
	min-width: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	border-radius: 12px !important;
}

@media (max-width: 640px) {
	.pop-reels__embeds { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Single product — one continuous page

   No tab strip: the story, the specification table and the reviews stack in
   order under their own headings, with a sticky jump strip so a long page is
   still navigable.
   ========================================================================== */

.pop-single {
	max-width: 1140px;
	margin: 8px auto 0;
	padding-inline: var(--pop-gutter, 20px);
}

.pop-single__nav {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 12px 0;
	margin-bottom: 8px;
	background: var(--pop-bg, #fff);
	border-bottom: 1px solid var(--pop-line, #e5e5e5);
}

.pop-single__nav a {
	padding: 8px 16px;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: 999px;
	color: var(--pop-body, #333);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pop-single__nav a:hover,
.pop-single__nav a.is-current {
	background: #000;
	border-color: #000;
	color: #fff;
}

.pop-single__block {
	padding-block: clamp(30px, 4vw, 56px);
	border-bottom: 1px solid var(--pop-line, #e5e5e5);
	/* Anchors must clear the sticky strip when jumped to. */
	scroll-margin-top: 76px;
}
.pop-single__block:last-child { border-bottom: 0; }

.pop-single__title {
	margin: 0 0 22px;
	font-family: var(--pop-font-display);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--pop-ink, #000);
}

/* The story lays out its own full-bleed bands, so it must not be boxed in. */
.pop-single__block.is-wide { overflow: visible; }

/* Specification table, previously hidden behind "Additional information". */
.pop-single .shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.pop-single .shop_attributes th,
.pop-single .shop_attributes td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--pop-line, #e5e5e5);
	text-align: left;
	vertical-align: top;
}
.pop-single .shop_attributes th {
	width: 34%;
	font-weight: 600;
	color: var(--pop-ink, #000);
	background: var(--pop-bg-alt, #ffffff);
}
.pop-single .shop_attributes td { color: var(--pop-body, #333); }
.pop-single .shop_attributes p { margin: 0; }

/* WooCommerce prints its own heading inside the review block; ours replaces it. */
.pop-single #reviews > h2:first-child,
.pop-single .woocommerce-Reviews-title { display: none; }

@media (max-width: 700px) {
	.pop-single__nav { padding: 10px 0; }
	.pop-single__nav a { padding: 7px 13px; font-size: 12.5px; }
	.pop-single .shop_attributes th { width: 42%; }
}

/* Emptied by the design import: the real variation selector is part of the
   add-to-cart widget, so the static swatch strip has nothing left to say. */
.pop-hide { display: none !important; }

/* ==========================================================================
   Variation swatches

   The native select stays in place and keeps driving WooCommerce; it is only
   taken out of the visual flow, never out of the DOM.
   ========================================================================== */

.pop-select-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.pop-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; }

.pop-swatch {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px 7px 8px;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: 999px;
	background: #fff;
	color: var(--pop-body, #333);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.pop-swatch:hover { border-color: var(--pop-ink, #000); }

.pop-swatch.is-active {
	border-color: #000;
	color: #000;
	box-shadow: inset 0 0 0 1px #000;
}

.pop-swatch__dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--pop-swatch, #d5d5d5);
	/* A ring keeps pale colours visible against the white card. */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.pop-swatches:not(.pop-swatches--colour) .pop-swatch { padding: 8px 16px; }

@media (max-width: 560px) {
	.pop-swatch { font-size: 12.5px; padding: 6px 12px 6px 7px; }
	.pop-swatch__dot { width: 17px; height: 17px; }
}

/* ==========================================================================
   Product gallery — dots, arrows, auto-advance
   ========================================================================== */

/* The thumbnail strip is replaced by dots; FlexSlider still prints it in some
   configurations, so it is hidden rather than relied upon being absent. */
.woocommerce div.product .flex-control-thumbs { display: none !important; }

.woocommerce div.product .woocommerce-product-gallery { position: relative; }

/* ------------------------------------------------------------------- dots */

.woocommerce div.product .flex-control-nav.flex-control-paging {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.woocommerce div.product .flex-control-paging li { margin: 0; width: auto; }

.woocommerce div.product .flex-control-paging li a {
	display: block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--pop-line, #e5e5e5);
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: none;
	transition: width .3s ease, background-color .3s ease;
}
.woocommerce div.product .flex-control-paging li a.flex-active,
.woocommerce div.product .flex-control-paging li a:hover {
	width: 26px;
	background: #000;
}

/* ----------------------------------------------------------------- arrows */

.woocommerce div.product .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .flex-direction-nav a {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
	text-indent: -9999px;
	overflow: hidden;
	opacity: 0;
	transition: opacity .25s ease;
}
.woocommerce div.product .woocommerce-product-gallery:hover .flex-direction-nav a,
.woocommerce div.product .flex-direction-nav a:focus-visible { opacity: 1; }

.woocommerce div.product .flex-direction-nav a::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 9px; height: 9px;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
}
.woocommerce div.product .flex-direction-nav a.flex-prev { left: 14px; }
.woocommerce div.product .flex-direction-nav a.flex-prev::before { transform: translate(-40%, -50%) rotate(135deg); }
.woocommerce div.product .flex-direction-nav a.flex-next { right: 14px; }
.woocommerce div.product .flex-direction-nav a.flex-next::before { transform: translate(-60%, -50%) rotate(-45deg); }

/* Touch has no hover, so the arrows stay put there. */
@media (hover: none) {
	.woocommerce div.product .flex-direction-nav a { opacity: 1; }
}

/* The variations table sat in a grey panel; on an all-white page the swatches
   carry their own definition and the panel only boxes them in. */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	background: none !important;
	border: 0 !important;
	padding-inline: 0 !important;
}
.woocommerce div.product form.cart .variations label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pop-muted, #767676);
}

/* ==========================================================================
   Live review summary
   ========================================================================== */

.pop-rev__summary {
	display: grid;
	grid-template-columns: minmax(140px, 200px) 1fr;
	align-items: center;
	gap: clamp(20px, 4vw, 48px);
}

.pop-rev__score { text-align: center; }
.pop-rev__avg {
	display: block;
	font-family: var(--pop-font-display);
	font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem);
	font-weight: 700;
	line-height: 1;
	color: var(--pop-ink, #000);
}
.pop-rev__stars { display: block; margin: 8px 0 6px; font-size: 17px; letter-spacing: 3px; color: #000; }
.pop-rev__based { display: block; font-size: 13.5px; color: var(--pop-muted, #767676); }

.pop-rev__bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pop-rev__bar { display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 12px; }
.pop-rev__barlabel { font-size: 13px; font-weight: 600; color: var(--pop-body, #333); white-space: nowrap; }
.pop-rev__track { height: 8px; border-radius: 999px; background: var(--pop-line, #e5e5e5); overflow: hidden; }
.pop-rev__fill { display: block; height: 100%; border-radius: 999px; background: #000; }
.pop-rev__barcount { font-size: 13px; color: var(--pop-muted, #767676); text-align: right; }

.pop-rev__empty { margin: 0; color: var(--pop-muted, #767676); }

.pop-rev__action { margin: 26px 0 0; }
.pop-rev__write {
	min-height: 46px;
	padding: 0 30px;
	border: 0;
	border-radius: 0;
	background: #000;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease;
}
.pop-rev__write:hover { background: #474747; }

.pop-rev__list {
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}
.pop-rev__item {
	padding: 20px;
	border: 1px solid var(--pop-line, #e5e5e5);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pop-rev__itemstars { font-size: 14px; letter-spacing: 2px; color: #000; }
.pop-rev__text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--pop-body, #333); }
.pop-rev__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-top: auto; padding-top: 10px;
	border-top: 1px solid var(--pop-line, #e5e5e5);
	font-size: 13px; color: var(--pop-muted, #767676);
}
.pop-rev__author { font-weight: 700; color: var(--pop-ink, #000); }
.pop-rev__verified { padding: 3px 9px; border: 1px solid var(--pop-line, #e5e5e5); border-radius: 999px; font-size: 11.5px; font-weight: 600; }

@media (max-width: 620px) {
	.pop-rev__summary { grid-template-columns: 1fr; gap: 22px; }
	.pop-rev__write { width: 100%; }
}

/* Four-fact box, driven by product attributes. */
.pop-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 10px;
	margin: 18px 0;
	padding: 0;
	list-style: none;
}
.pop-facts__item {
	padding: 12px 10px;
	border: 1px solid var(--pop-line, #e5e5e5);
	text-align: center;
}
.pop-facts__value {
	display: block;
	font-family: var(--pop-font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--pop-ink, #000);
	line-height: 1.2;
}
.pop-facts__label {
	display: block;
	margin-top: 5px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pop-muted, #767676);
}
.pop-eyebrow {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pop-muted, #767676);
}

/* ------------------------------------------------------------ review dialog */

.pop-modal[hidden] { display: none !important; }

.pop-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.pop-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }

.pop-modal__panel {
	position: relative;
	width: min(560px, 100%);
	max-height: 88vh;
	overflow-y: auto;
	background: #fff;
	padding: 34px 30px 28px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.pop-modal__close {
	position: absolute;
	top: 10px; right: 12px;
	width: 34px; height: 34px;
	border: 0;
	background: none;
	color: var(--pop-ink, #000);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

/* WooCommerce prints its own headings and the (empty) review list inside the
   template; inside the dialog only the form is wanted. */
.pop-modal__body #comments,
.pop-modal__body .woocommerce-Reviews-title,
.pop-modal__body .commentlist,
.pop-modal__body .woocommerce-noreviews { display: none !important; }
.pop-modal__body #review_form_wrapper,
.pop-modal__body #respond { display: block !important; }
.pop-modal__body #reply-title { margin-top: 0; font-size: 1.2rem; }

/* The review block lives in the social-proof section; the action centres with
   the rest of that section rather than hanging off the left. */
.pop-rev-host .pop-rev__action { text-align: center; }
.pop-rev-host .pop-rev__list { text-align: left; }

/* ==========================================================================
   Stage cards and comparison table — same look, product-driven content
   ========================================================================== */

.pop-stages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(20px, 3vw, 40px);
	margin-top: 34px;
	text-align: center;
}
.pop-stage { display: flex; flex-direction: column; align-items: center; }
.pop-stage__media { margin: 0 0 16px; width: 100%; overflow: hidden; }
.pop-stage__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pop-stage__age {
	display: inline-block;
	padding: 5px 12px;
	margin-bottom: 10px;
	border-radius: 999px;
	background: var(--pop-bg-alt, #f5f5f5);
	border: 1px solid var(--pop-line, #e5e5e5);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pop-ink, #000);
}
.pop-stage__title {
	margin: 0 0 8px;
	font-family: var(--pop-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--pop-ink, #000);
}
.pop-stage__text { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--pop-body, #333); }

.pop-vs { margin-top: 30px; overflow-x: auto; }
.pop-vs__table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	border: 1px solid var(--pop-line, #e5e5e5);
	font-size: 15px;
}
.pop-vs__table th,
.pop-vs__table td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--pop-line, #e5e5e5);
	text-align: center;
}
.pop-vs__table tr:last-child th,
.pop-vs__table tr:last-child td { border-bottom: 0; }
.pop-vs__table thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pop-vs__table thead .pop-vs__ours { background: #000; color: #fff; }
.pop-vs__spec { text-align: left; font-weight: 600; color: var(--pop-ink, #000); }
.pop-vs__table tbody .pop-vs__ours { font-weight: 700; color: var(--pop-ink, #000); background: var(--pop-bg-alt, #fafafa); }
.pop-vs__theirs { color: var(--pop-muted, #767676); }

/* ==========================================================================
   Product page — mobile

   The summary column, fact box, swatches, stages and review block were all
   built desktop-first. This is the phone pass: nothing reflows to a second
   column below 768px, tap targets clear 44px, and no section keeps a tint.
   ========================================================================== */

@media (max-width: 768px) {
	/* Summary column: full width, no side gutters fighting the section padding */
	.woocommerce div.product .elementor-widget-woocommerce-product-title h1,
	.woocommerce div.product .product_title {
		font-size: clamp(1.5rem, 6vw, 2rem);
		line-height: 1.15;
	}

	.woocommerce div.product .price,
	.woocommerce div.product .elementor-widget-woocommerce-product-price .price {
		font-size: 1.4rem;
	}

	/* Four facts become two by two rather than a cramped single row. */
	.pop-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.pop-facts__item { padding: 10px 8px; }
	.pop-facts__value { font-size: 14px; }

	/* Swatches and quantity need thumb-sized targets. */
	.pop-swatch { min-height: 44px; }
	.woocommerce div.product form.cart .quantity .qty { min-height: 46px; width: 64px; }
	.woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; min-height: 50px; }
	.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 10px; }

	/* One stage card per screen. */
	.pop-stages { grid-template-columns: 1fr; gap: 26px; }

	/* Review summary stacks; bars keep their labels readable. */
	.pop-rev__summary { grid-template-columns: 1fr; }
	.pop-rev__list { grid-template-columns: 1fr; }
	.pop-rev__write { width: 100%; min-height: 48px; }

	/* The dialog fills the screen rather than floating in a small box. */
	.pop-modal { padding: 0; }
	.pop-modal__panel {
		width: 100%;
		max-height: 100vh;
		height: 100%;
		padding: 54px 20px 24px;
	}

	/* Cross-sell: two up, matching the archive's own mobile grid. */
	.pop-more .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 480px) {
	.pop-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pop-more .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* No section keeps a tint: the design's own backgrounds are snapped to
   black or white in the template, and these catch anything inherited. */
.woocommerce div.product .elementor-section,
.woocommerce div.product .elementor-column { background-color: inherit; }

/* Product accordion — same look as the design's, driven by product data. */
.pop-acc { border-top: 1px solid var(--pop-line, #e5e5e5); margin-top: 22px; }
.pop-acc__item { border-bottom: 1px solid var(--pop-line, #e5e5e5); }
.pop-acc__head {
	list-style: none;
	cursor: pointer;
	padding: 16px 30px 16px 0;
	position: relative;
	font-family: var(--pop-font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--pop-ink, #000);
}
.pop-acc__head::-webkit-details-marker { display: none; }
.pop-acc__head::after {
	content: "+";
	position: absolute;
	right: 4px; top: 50%;
	transform: translateY(-50%);
	font-size: 19px;
	font-weight: 400;
}
.pop-acc__item[open] .pop-acc__head::after { content: "\2212"; }
.pop-acc__body { padding: 0 0 18px; font-size: 14.5px; line-height: 1.75; color: var(--pop-body, #333); }
.pop-acc__body ul { margin: 0; padding-left: 18px; }
.pop-acc__body table { width: 100%; border-collapse: collapse; }
.pop-acc__body th, .pop-acc__body td { padding: 9px 0; border-bottom: 1px solid var(--pop-line, #e5e5e5); text-align: left; vertical-align: top; }
.pop-acc__body th { width: 42%; font-weight: 600; color: var(--pop-ink, #000); }
.pop-acc__body p { margin: 0; }

/* The quantity box should read as part of the same control, not a stray pill. */
.woocommerce div.product form.cart .quantity .qty {
	height: 50px;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: 0;
	background: #fff;
	color: var(--pop-ink, #000);
	font-weight: 600;
	text-align: center;
}
.woocommerce div.product form.cart button.single_add_to_cart_button { min-height: 50px; }

/* Trust layer and fulfilment promise, per the recommendations. */
.pop-trust {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 6px 0 16px;
	font-size: 14px;
}
.pop-trust__stars { color: #000; letter-spacing: 2px; }
.pop-trust__avg { font-weight: 700; color: var(--pop-ink, #000); }
.pop-trust__count { color: var(--pop-muted, #767676); text-decoration: underline; text-underline-offset: 3px; }

.pop-deliver {
	margin: 16px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--pop-line, #e5e5e5);
	list-style: none;
	display: grid;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--pop-body, #333);
}
.pop-deliver__row { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.pop-deliver strong { color: var(--pop-ink, #000); font-weight: 700; }

/* A drawn tick rather than an emoji: it holds the mono palette and stays
   crisp at any size. */
.pop-deliver__tick {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	position: relative;
	border-radius: 50%;
	background: #000;
}
.pop-deliver__tick::before {
	content: "";
	position: absolute;
	top: 4px; left: 5px;
	width: 4px; height: 7px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

/* ==========================================================================
   Reels coverflow — depth-of-field treatment

   The centre reel is the subject and everything either side is context, so the
   wings lose focus as well as size. Blur does the work brightness alone cannot:
   it reads as distance rather than as a dimmed, broken thumbnail.
   ========================================================================== */

.pop-reels--flow .pop-cf {
	filter: blur(3px) brightness(.94);
	transition: transform .62s cubic-bezier(.22, .82, .26, 1),
	            opacity .62s cubic-bezier(.22, .82, .26, 1),
	            filter .62s cubic-bezier(.22, .82, .26, 1);
}

/* Sharpness falls off with distance from the middle. */
.pop-reels--flow .pop-cf[style*="--cf-s: 0.8"],
.pop-reels--flow .pop-cf[style*="--cf-s:0.8"] { filter: blur(2px) brightness(.96); }

.pop-reels--flow .pop-cf.is-center {
	filter: none;
	z-index: 50;
}

/* The centre card keeps a real shadow so it sits above the blurred wings. */
.pop-reels--flow .pop-cf.is-center .pop-reel {
	box-shadow: 0 30px 64px rgba(0, 0, 0, .3);
}

/* Arrows sit outside the cards, as outlined circles. */
.pop-reels--flow .pop-reels__nav {
	width: 52px;
	height: 52px;
	background: transparent;
	border: 1px solid var(--pop-line, #e5e5e5);
	box-shadow: none;
	transition: background-color .2s ease, border-color .2s ease;
}
.pop-reels--flow .pop-reels__nav:hover {
	background: #000;
	border-color: #000;
}
.pop-reels--flow .pop-reels__nav:hover::before {
	border-right-color: #fff;
	border-bottom-color: #fff;
}
.pop-reels--flow .pop-reels__nav--prev { left: 0; }
.pop-reels--flow .pop-reels__nav--next { right: 0; }

/* Room for the arrows to sit clear of the outermost card. */
.pop-reels--flow .pop-reels__stage { padding-inline: 68px; }

@media (max-width: 767px) {
	.pop-reels--flow .pop-reels__stage { padding-inline: 44px; }
	.pop-reels--flow .pop-reels__nav { width: 40px; height: 40px; }
	.pop-reels--flow .pop-cf { filter: blur(2px) brightness(.95); }
}

@media (prefers-reduced-motion: reduce) {
	.pop-reels--flow .pop-cf { transition: none; }
}

/* ==========================================================================
   Reels plugin adapter — 5 across desktop, 3 tablet, 1 phone
   ========================================================================== */

.pop-rw__wrap { position: relative; padding-inline: 56px; }

.pop-rw {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 4 * 14px) / 5);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-block: 4px;
}
.pop-rw::-webkit-scrollbar { display: none; }

.pop-rw__slide {
	scroll-snap-align: center;
	transition: transform .45s cubic-bezier(.22, .82, .26, 1), filter .45s ease;
	transform: scale(.88);
	filter: brightness(.9);
}
.pop-rw__slide.is-center { transform: scale(1); filter: none; }
.pop-rw__slide video,
.pop-rw__slide img { display: block; width: 100%; height: auto; border-radius: 14px; }

.pop-rw__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 46px; height: 46px;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}
.pop-rw__nav::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 9px; height: 9px;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
}
.pop-rw__nav--prev { left: 0; }
.pop-rw__nav--prev::before { transform: translate(-40%, -50%) rotate(135deg); }
.pop-rw__nav--next { right: 0; }
.pop-rw__nav--next::before { transform: translate(-60%, -50%) rotate(-45deg); }
.pop-rw__nav:hover { background: #000; border-color: #000; }
.pop-rw__nav:hover::before { border-color: #fff; }

@media (max-width: 1199px) {
	.pop-rw { grid-auto-columns: calc((100% - 2 * 14px) / 3); }
}
@media (max-width: 767px) {
	.pop-rw__wrap { padding-inline: 40px; }
	.pop-rw { grid-auto-columns: 100%; gap: 10px; }
	.pop-rw__nav { width: 38px; height: 38px; }
}

/* Wrappers between the shortcode container and the track must not re-impose a
   width, a flex layout or a max-width of their own. */
.pop-rw__pass {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

/* Belt and braces: if the zoom script ever loads, its lens is invisible. */
.woocommerce div.product .woocommerce-product-gallery .zoomImg { display: none !important; }
.woocommerce div.product .woocommerce-product-gallery__image img { cursor: default; }

/* Colour swatches sit under the title on a phone. The label the form printed
   stays with the (hidden) select, so the slot needs its own. */
.pop-swatch-slot:empty { display: none; }
.pop-swatch-slot { margin: 2px 0 16px; }
.pop-swatch-slot::before {
	content: "Colour";
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pop-muted, #767676);
}
@media (min-width: 768px) {
	.pop-swatch-slot { display: none; }
}

/* Per-product image and content block. */
.pop-extra__image { margin: 0 0 26px; }
.pop-extra__img { display: block; width: 100%; height: auto; }
.pop-extra__content {
	max-width: 68ch;
	margin-inline: auto;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--pop-body, #333);
}
.pop-extra__content > *:first-child { margin-top: 0; }
.pop-extra__content > *:last-child { margin-bottom: 0; }
.pop-extra__content h2, .pop-extra__content h3 {
	font-family: var(--pop-font-display);
	color: var(--pop-ink, #000);
	letter-spacing: -.02em;
}
.pop-extra__content img { max-width: 100%; height: auto; }

/* A pasted block brings its own layout, so the prose wrapper stands aside. */
.pop-extra__content.is-raw { max-width: none; }
.pop-extra__content.is-raw > .section,
.pop-extra__content.is-raw > div { margin-inline: auto; }
/* Pasted CSS often targets `body`; keep its page padding out of our section. */
.pop-extra__content.is-raw { padding: 0; }

/* ==========================================================================
   Product summary — spacing and the description

   The gap under the swatches was the variations table: WooCommerce keeps an
   empty <div class="woocommerce-variation"> and a "Clear" link reserved for
   when a selection is made, and both hold their height while empty.
   ========================================================================== */

.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart table.variations { margin-bottom: 0 !important; }
.woocommerce div.product form.cart .variations tr:last-child td,
.woocommerce div.product form.cart .variations tr:last-child th { padding-bottom: 0 !important; }

/* Empty until a variation is chosen — no reason to hold space. */
.woocommerce div.product .woocommerce-variation:empty,
.woocommerce div.product .woocommerce-variation-description:empty,
.woocommerce div.product .woocommerce-variation-price:empty,
.woocommerce div.product .woocommerce-variation-availability:empty { display: none !important; }

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--pop-muted, #767676);
}
.woocommerce div.product form.cart .reset_variations[style*="visibility: hidden"],
.woocommerce div.product form.cart .reset_variations:not([style*="visible"]) { display: none; }

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { margin-top: 16px; }
.woocommerce div.product form.cart { margin-bottom: 18px; }

/* ------------------------------------------------------ short description */

/* It was inheriting the summary's heading weight, so the whole paragraph came
   through bold — heavy to read and it competed with the price. */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p,
.woocommerce div.product .elementor-widget-woocommerce-product-short-description,
.woocommerce div.product .elementor-widget-woocommerce-product-short-description p {
	font-family: var(--pop-font-body);
	font-weight: 400 !important;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--pop-body, #333);
	letter-spacing: normal;
	margin: 0 0 16px;
	max-width: 60ch;
	text-align: left;
}
.woocommerce div.product .woocommerce-product-details__short-description p:last-child,
.woocommerce div.product .elementor-widget-woocommerce-product-short-description p:last-child { margin-bottom: 0; }

/* The delivery promise sits under the button, so it needs the gap above it. */
.pop-deliver { margin-top: 16px; }

/* ==========================================================================
   Product summary description

   The short description sits in a Heading widget in the template, not a text
   widget — which is why it rendered bold and tight. Headings elsewhere are
   left alone; this targets the one element in the summary column.
   ========================================================================== */

.elementor-element-51372e7 .elementor-heading-title,
.woocommerce div.product .elementor-widget-heading .elementor-heading-title:not(h1):not(h2):not(h3) {
	font-family: var(--pop-font-body) !important;
	font-size: 15.5px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	letter-spacing: normal !important;
	color: var(--pop-body, #333) !important;
	max-width: 62ch;
	margin: 4px 0 0;
	text-align: left;
}

/* Breathing room between the cart block, the description and the promise. */
.woocommerce div.product .elementor-element-51372e7 { margin-block: 14px 4px; }

/* ==========================================================================
   Cart & checkout — centre the page

   These are block-based pages, so they never went through the theme's
   container and sat flush left at whatever width the blocks asked for.
   ========================================================================== */

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
	max-width: 1140px !important;
	margin-inline: auto !important;
	padding-inline: var(--pop-gutter, 20px);
	float: none !important;
}

/* The blocks lay themselves out as a narrow single column unless told the
   room is there: cart items beside the totals, as a cart should read. */
.wc-block-cart .wp-block-woocommerce-cart-items-block { flex: 1 1 62%; min-width: 0; }
.wc-block-cart .wp-block-woocommerce-cart-totals-block { flex: 0 0 34%; min-width: 280px; }
.wc-block-cart__submit-container { padding-inline: 0; }

@media (min-width: 900px) {
	.wc-block-cart .wc-block-cart__main,
	.wc-block-components-sidebar-layout { display: flex; gap: 40px; align-items: flex-start; }
	.wc-block-components-sidebar { position: sticky; top: 20px; }
}

/* Totals panel reads as a panel, not loose text on the page. */
.wc-block-cart .wp-block-woocommerce-cart-totals-block,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
	border: 1px solid var(--pop-line, #e5e5e5);
	padding: 20px;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
	max-width: 1140px;
	margin: 0 auto 24px;
	padding-inline: var(--pop-gutter, 20px);
}

/* The checkout button matches every other primary action on the site. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: 0 !important;
	background: #000 !important;
	color: #fff !important;
	text-transform: uppercase;
	font-weight: 600 !important;
	text-decoration: none !important;
	min-height: 52px;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: #474747 !important; }

@media (max-width: 899px) {
	.wc-block-cart .wp-block-woocommerce-cart-items-block,
	.wc-block-cart .wp-block-woocommerce-cart-totals-block { flex: 1 1 100%; }
}