/**
 * Popato Core — marketing & engagement modules.
 * Testimonials, Instagram reels, recently viewed, email capture, scroll reveal.
 */

/* ==========================================================================
   Section headings shared by the modules
   ========================================================================== */

.pop-testimonials__title,
.pop-reels__title,
.pop-viewed__title {
	font-family: var(--pop-font-display, Georgia, serif);
	color: var(--pop-ink, #000000);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem);
	font-weight: 600;
	text-align: center;
	margin: 0 0 26px;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

/* One scrolling row rather than a wrapping grid: a grid leaves a ragged last
   line whenever the count is not a multiple of the column count. */
.pop-testimonials__viewport {
	position: relative;
	--pop-row-gap: clamp(12px, 1.5vw, 20px);
}

.pop-testimonials__track {
	display: grid;
	grid-auto-flow: column;
	/* Four across; the rest arrive from the slider. */
	grid-auto-columns: calc((100% - 3 * var(--pop-row-gap)) / 4);
	gap: var(--pop-row-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 4px 4px 6px;   /* room for the cards' hover lift and shadow */
	scroll-padding-left: 4px;
}
.pop-testimonials__track::-webkit-scrollbar { display: none; }
.pop-testimonials__track > .pop-testimonial { scroll-snap-align: start; }

/* Four holds down to 1000px so every laptop gets four, not three — the earlier
   1200px threshold dropped to three on a 13" screen and at browser zoom. */
@media (max-width: 999px) {
	.pop-testimonials__track { grid-auto-columns: calc((100% - var(--pop-row-gap)) / 2); }
}
@media (max-width: 700px) {
	.pop-testimonials__track { grid-auto-columns: 84%; }
}

/* Arrows shared by any single-row band. */
.pop-row__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
	cursor: pointer;
}
.pop-row__nav[hidden] { display: none; }
.pop-row__nav::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 9px; height: 9px;
	border-right: 2px solid var(--pop-ink, #000000);
	border-bottom: 2px solid var(--pop-ink, #000000);
}
.pop-row__nav--prev { left: -14px; }
.pop-row__nav--prev::before { transform: translate(-40%, -50%) rotate(135deg); }
.pop-row__nav--next { right: -14px; }
.pop-row__nav--next::before { transform: translate(-60%, -50%) rotate(-45deg); }

@media (max-width: 700px) {
	.pop-row__nav { display: none; }   /* swipe is the natural gesture here */
}

.pop-testimonial {
	margin: 0;
	padding: 22px 20px;
	background: var(--pop-surface, #fff);
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: var(--pop-radius, 14px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.pop-testimonial:hover {
	transform: translateY(-3px);
	box-shadow: var(--pop-shadow-md, 0 12px 32px rgba(0, 0, 0, .07));
}

.pop-testimonial__stars {
	color: var(--pop-star, #000000);
	font-size: 15px;
	letter-spacing: 2px;
}

.pop-testimonial__quote {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--pop-body, #333333);
}
.pop-testimonial__quote p { margin: 0 0 .7em; }
.pop-testimonial__quote p:last-child { margin-bottom: 0; }

.pop-testimonial__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--pop-line, #e5e5e5);
	font-size: 13.5px;
}
.pop-testimonial__name { font-weight: 700; color: var(--pop-ink, #000000); }
.pop-testimonial__loc { color: var(--pop-muted, #767676); }
.pop-testimonial__verified {
	background: var(--pop-success-bg, #f7f7f7);
	color: var(--pop-success, #000000);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 700;
}
.pop-testimonial__product {
	margin-left: auto;
	color: var(--pop-gold-dark, #474747);
	font-weight: 600;
	text-decoration: none;
}

/* ==========================================================================
   Instagram reels
   ========================================================================== */

.pop-reels__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(10px, 1.6vw, 18px);
}

.pop-reel {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	border-radius: var(--pop-radius, 14px);
	overflow: hidden;
	background: var(--pop-bg-alt, #ffffff);
	text-decoration: none;
}
.pop-reel__media,
.pop-reel__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.pop-reel:hover .pop-reel__media img { transform: scale(1.06); }

.pop-reel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 55%);
}

.pop-reel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	z-index: 2;
}
.pop-reel__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-left: 13px solid var(--pop-ink, #000000);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

.pop-reel__caption {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	z-index: 2;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
}

.pop-reels__follow { text-align: center; margin-top: 22px; }
.pop-reels__follow a {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 999px;
	border: 1px solid var(--pop-line, #e5e5e5);
	color: var(--pop-ink, #000000);
	font-weight: 650;
	text-decoration: none;
}
.pop-reels__follow a:hover { background: var(--pop-bg-alt, #ffffff); }

/* ==========================================================================
   Recently viewed
   ========================================================================== */

.pop-viewed {
	margin: 48px auto 0;
	max-width: 1200px;
	padding-inline: var(--pop-gutter, 20px);
}
.pop-viewed__title {
	text-align: left;
	font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
	margin-bottom: 18px;
}
.pop-viewed__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}
.pop-viewed__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: var(--pop-radius-sm, 9px);
	background: var(--pop-surface, #fff);
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}
.pop-viewed__item:hover {
	border-color: var(--pop-gold, #000);
	transform: translateY(-2px);
}
.pop-viewed__media img {
	border-radius: 6px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}
.pop-viewed__name { font-size: 14px; font-weight: 650; color: var(--pop-ink, #000000); line-height: 1.35; }
.pop-viewed__price { font-size: 13.5px; color: var(--pop-body, #333333); }
.pop-viewed__price del { opacity: .6; margin-right: 4px; }

/* ==========================================================================
   Email capture
   ========================================================================== */

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

.pop-capture {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.pop-capture__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	animation: pop-fade .25s ease;
}
.pop-capture__card {
	position: relative;
	width: min(460px, 100%);
	background: var(--pop-surface, #fff);
	border-radius: var(--pop-radius, 14px);
	padding: 36px 32px 28px;
	text-align: center;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
	animation: pop-rise .3s cubic-bezier(.2, .8, .3, 1);
}

@keyframes pop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.pop-capture__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--pop-bg-alt, #ffffff);
	color: var(--pop-ink, #000000);
	font-family: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.pop-capture__close:hover { background: var(--pop-line, #e5e5e5); }

.pop-capture__eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--pop-muted, #767676);
	font-weight: 700;
}
.pop-capture__title {
	margin: 0 0 10px;
	font-family: var(--pop-font-display, Georgia, serif);
	font-size: 26px;
	font-weight: 600;
	color: var(--pop-ink, #000000);
	line-height: 1.25;
}
.pop-capture__text {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--pop-body, #333333);
}

.pop-capture__form { display: flex; gap: 8px; flex-wrap: wrap; }
.pop-capture__input {
	flex: 1 1 200px;
	min-height: 50px;
	padding: 12px 16px;
	font-size: 16px;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: 999px;
	background: #fff;
}
.pop-capture__message { margin: 12px 0 0; font-size: 14px; min-height: 1em; }
.pop-capture__message.is-ok { color: var(--pop-success, #000000); font-weight: 600; }
.pop-capture__message.is-error { color: var(--pop-sale, #000000); }

.pop-capture__decline {
	margin-top: 14px;
	background: none;
	border: 0;
	color: var(--pop-muted, #767676);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

@media (max-width: 480px) {
	.pop-capture__card { padding: 30px 20px 22px; }
	.pop-capture__title { font-size: 22px; }
}

/* ==========================================================================
   Scroll reveal — JS adds .is-in; without JS everything stays visible
   ========================================================================== */

.pop-reveal { opacity: 0; transform: translateY(22px); }
.pop-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
	.pop-reveal,
	.pop-reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Social-proof bands (testimonials / reels appended after Elementor content)

   Named `pop-social`, not `pop-band` — `pop-band` is the homepage product band
   and its padding, background and typography would otherwise leak into these.
   ========================================================================== */

.pop-social {
	padding: clamp(44px, 6vw, 72px) 0;
	background: var(--pop-bg, #fff);
}
.pop-social--alt { background: var(--pop-bg-alt, #ffffff); }

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

/* ==========================================================================
   Reels coverflow

   One reel plays large in the middle and the rest step down in size and
   opacity either side of it, the ring advancing on its own. Positions are set
   by JS as custom properties so the transition here does the animating; the
   layout never depends on scroll position.
   ========================================================================== */

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

/* Live account header, pulled from the public Instagram profile. */
.pop-reels__account {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: -14px 0 24px;
	padding: 6px 16px 6px 6px;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: 999px;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}
.pop-reels__account:hover {
	border-color: var(--pop-ink, #000000);
	transform: translateY(-1px);
}

.pop-reels__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	/* Instagram's own ring, so the header reads as the real account. */
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #535353;
}

.pop-reels__account-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.25;
	text-align: left;
}

.pop-reels__handle {
	font-size: 15px;
	font-weight: 700;
	color: var(--pop-ink, #000000);
}

.pop-reels__followers {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--pop-muted, #767676);
}

.pop-reels__stage {
	position: relative;
	/* Tall enough for the centre card at full size plus its shadow. */
	height: clamp(360px, 46vw, 520px);
	margin-inline: auto;
	perspective: 1400px;
}

.pop-reels__ring {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	transform-style: preserve-3d;
}

.pop-cf {
	--cf-x: 0%;
	--cf-s: 1;
	--cf-o: 1;
	--cf-rot: 0deg;

	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(196px, 24vw, 286px);
	margin: 0;
	transform:
		translate(-50%, -50%)
		translateX(var(--cf-x))
		rotateY(var(--cf-rot))
		scale(var(--cf-s));
	opacity: var(--cf-o);
	transition: transform .62s cubic-bezier(.22, .82, .26, 1),
	            opacity .62s cubic-bezier(.22, .82, .26, 1),
	            filter .62s ease;
	will-change: transform, opacity;
	/* Everything off-centre reads as background, so it is pushed back. */
	filter: brightness(.72) saturate(.85);
}

.pop-cf.is-center {
	filter: none;
}

.pop-cf .pop-reel {
	aspect-ratio: 9 / 16;
	border-radius: 18px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
	transition: box-shadow .5s ease;
}

.pop-cf.is-center .pop-reel {
	box-shadow: 0 28px 60px rgba(0, 0, 0, .34);
}

/* Clicking a wing brings it to the middle; clicking the middle opens the reel
   on Instagram. Both are pointers, because both do something. */
.pop-cf .pop-reel { cursor: pointer; }

/* No play badge anywhere in the carousel: the middle reel is already playing,
   so a play button on top of it would be an instruction to do what it is
   doing. JS handles the click. */
.pop-cf .pop-reel__play { display: none; }

/* The caption belongs to the middle card alone. */
.pop-cf:not(.is-center) .pop-reel__caption { opacity: 0; }
.pop-cf .pop-reel__caption { transition: opacity .4s ease; }

.pop-reel__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.pop-reels__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}

.pop-reels__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--pop-line, #e5e5e5);
	cursor: pointer;
	transition: width .3s ease, background .3s ease;
}
.pop-reels__dot.is-active {
	width: 26px;
	background: var(--pop-ink, #000000);
}

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

.pop-reels__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;          /* above every card, including the centre */
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .24);
	cursor: pointer;
}
.pop-reels__nav[hidden] { display: none; }
.pop-reels__nav::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 9px; height: 9px;
	border-right: 2px solid var(--pop-ink, #000000);
	border-bottom: 2px solid var(--pop-ink, #000000);
}
.pop-reels__nav--prev { left: 2%; }
.pop-reels__nav--prev::before { transform: translate(-40%, -50%) rotate(135deg); }
.pop-reels__nav--next { right: 2%; }
.pop-reels__nav--next::before { transform: translate(-60%, -50%) rotate(-45deg); }

@media (max-width: 767px) {
	.pop-reels__stage { height: clamp(330px, 96vw, 420px); }
	.pop-cf { width: clamp(168px, 52vw, 220px); }
	.pop-reels__nav { width: 38px; height: 38px; }
	.pop-reels__nav--prev { left: 0; }
	.pop-reels__nav--next { right: 0; }
}

/* Without JS every card would stack on the centre point, so the ring falls
   back to a plain scrolling row. */
.pop-reels--flow:not([data-cf-ready]) .pop-reels__ring {
	position: static;
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scrollbar-width: none;
	height: 100%;
}
.pop-reels--flow:not([data-cf-ready]) .pop-cf {
	position: static;
	flex: 0 0 auto;
	transform: none;
	opacity: 1;
	filter: none;
}
.pop-reels--flow:not([data-cf-ready]) .pop-reels__nav { display: none; }

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

/* ==========================================================================
   Festival campaign
   ========================================================================== */

.pop-campaign-bar {
	background: var(--pop-campaign-bar, #000000);
	color: #fff;
	line-height: 1;
}
.pop-campaign-bar p { margin: 0; }
.pop-campaign-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 3px 15px;
	max-width: 1400px;
	margin-inline: auto;
	padding: 4px 20px;      /* slim strip: the offer, not a section */
	color: #fff;
	text-decoration: none;
	font-size: 11.5px;
	line-height: 1.45;
	letter-spacing: .2px;
	min-height: 0;
}
.pop-campaign-bar__text { font-weight: 600; }

.pop-campaign-bar__timer { display: inline-flex; gap: 6px; }
/* Stacked digits/labels were the main thing inflating the bar — go inline. */
.pop-campaign-bar__unit {
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;
	gap: 2px;
	padding: 1px 6px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .13);
	line-height: 1.35;
}
.pop-campaign-bar__unit b { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pop-campaign-bar__unit i { font-style: normal; font-size: 9px; opacity: .7; text-transform: uppercase; }
.pop-campaign-bar__timer { gap: 4px; }

.pop-campaign-ribbon {
	display: inline-block;
	margin-bottom: 8px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--pop-campaign, #000000);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
}

/* Campaign accent takes over the primary CTA while a campaign runs */
body.pop-campaign-on .woocommerce div.product form.cart button.single_add_to_cart_button {
	background-color: var(--pop-campaign, #000000) !important;
	border-color: var(--pop-campaign, #000000) !important;
	color: #fff !important;
}

/* Ribbon inside a catalogue card: aligns with the card's text padding and
   never sits under the absolutely-positioned sale badge. */
.pop-campaign-ribbon--loop {
	margin: 14px 16px 0;
	font-size: 10.5px;
	padding: 3px 9px;
}
.woocommerce ul.products li.product .pop-campaign-ribbon--loop + .woocommerce-loop-product__title {
	padding-top: 6px;
}

/* ==========================================================================
   Trust bar — was cramped, with awkward two-word orphan wraps
   ========================================================================== */

.pop-trustbar .elementor-widget-icon-box { margin-bottom: 0; }

.pop-trustbar .elementor-icon-box-wrapper {
	display: grid;
	grid-template-columns: 40px 1fr;
	align-items: start;
	column-gap: 14px;
	row-gap: 4px;
	text-align: left;
}

/* Icon sits in a soft brand-tinted disc rather than floating loose */
.pop-trustbar .elementor-icon-box-icon {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 50%;
	background: rgba(170, 170, 170, .13);
}
.pop-trustbar .elementor-icon-box-icon .elementor-icon { font-size: 18px; }

.pop-trustbar .elementor-icon-box-title {
	margin: 0 0 2px;
	line-height: 1.3;
}
.pop-trustbar .elementor-icon-box-description {
	margin: 0;
	line-height: 1.55;
	max-width: 24ch;          /* stops "India-wide." dropping to its own line */
	text-wrap: pretty;
}

/* Hairline separators between items, not between rows */
@media (min-width: 1025px) {
	.pop-trustbar .elementor-column + .elementor-column .elementor-icon-box-wrapper {
		border-left: 1px solid var(--pop-line, #e5e5e5);
		padding-left: 28px;
		margin-left: -8px;
	}
}

@media (max-width: 1024px) {
	.pop-trustbar .elementor-column { margin-bottom: 22px; }
	.pop-trustbar .elementor-icon-box-description { max-width: none; }
}

@media (max-width: 600px) {
	.pop-trustbar .elementor-icon-box-wrapper {
		grid-template-columns: 34px 1fr;
		column-gap: 11px;
	}
	.pop-trustbar .elementor-icon-box-icon { width: 34px; height: 34px; }
	.pop-trustbar .elementor-icon-box-icon .elementor-icon { font-size: 16px; }
}

/* Campaign ribbon on the product page sits above the buy form */
.pop-campaign-ribbon { margin-bottom: 12px; }

/* ==========================================================================
   Product description — imported markup arrives as loose images and headings
   at wildly different sizes. Normalise it into a readable article.
   ========================================================================== */

.woocommerce div.product .woocommerce-Tabs-panel {
	max-width: 860px;
	margin-inline: auto;
	padding-block: 8px 40px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--pop-body, #333333);
}

/* Every image spans the measure, so nothing looks arbitrarily sized */
.woocommerce div.product .woocommerce-Tabs-panel img {
	display: block;
	width: 100%;
	height: auto;
	margin: 26px auto;
	border-radius: 14px;
	background: var(--pop-bg-alt, #ffffff);
}

/* Panoramic spec strips read better edge to edge without a card look */
.woocommerce div.product .woocommerce-Tabs-panel img[width][height] { max-width: 100%; }

.woocommerce div.product .woocommerce-Tabs-panel h2,
.woocommerce div.product .woocommerce-Tabs-panel h3 {
	font-family: var(--pop-font-display, Georgia, serif);
	color: var(--pop-ink, #000000);
	font-weight: 600;
	line-height: 1.25;
	margin: 38px 0 10px;
}
.woocommerce div.product .woocommerce-Tabs-panel h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.woocommerce div.product .woocommerce-Tabs-panel h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-child { margin-top: 6px; }

.woocommerce div.product .woocommerce-Tabs-panel p { margin: 0 0 1.15em; }
.woocommerce div.product .woocommerce-Tabs-panel p:empty { display: none; }

/* Tab strip: centre it over the article measure */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	max-width: 860px;
	margin-inline: auto;
	justify-content: center;
}

/* Reviews list sits on the same measure */
.woocommerce div.product #reviews { max-width: 860px; margin-inline: auto; }

@media (max-width: 767px) {
	.woocommerce div.product .woocommerce-Tabs-panel img { margin: 18px auto; border-radius: 10px; }
	.woocommerce div.product .woocommerce-tabs ul.tabs { justify-content: flex-start; }
}

/* ==========================================================================
   Contact page — elevated cards with a soft glass treatment
   ========================================================================== */

/* Cards float up over the hero's lower edge for depth */
.pop-contact-cards {
	margin-top: -58px !important;
	position: relative;
	z-index: 3;
}

.pop-contact-card > .elementor-widget-wrap {
	height: 100%;
	padding: 30px 24px !important;
	border-radius: 18px;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, .8);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, .05),
		0 12px 32px rgba(0, 0, 0, .09),
		inset 0 1px 0 rgba(255, 255, 255, .9);
	transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease;
}

.pop-contact-card:hover > .elementor-widget-wrap {
	transform: translateY(-4px);
	box-shadow:
		0 2px 4px rgba(0, 0, 0, .06),
		0 20px 44px rgba(0, 0, 0, .14),
		inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Icon sits in a tinted disc rather than floating */
.pop-contact-card .elementor-icon-box-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px !important;
	border-radius: 16px;
	background: linear-gradient(145deg, rgba(170, 170, 170, .22), rgba(170, 170, 170, .08));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.pop-contact-card .elementor-icon-box-title { margin-bottom: 8px !important; }

.pop-contact-card .pop-card__value {
	display: block;
	color: var(--pop-ink, #000000);
	font-size: 15px;
	font-weight: 650;
	line-height: 1.4;
}
.pop-contact-card .pop-card__note {
	display: block;
	margin-top: 5px;
	color: var(--pop-muted, #767676);
	font-size: 12.5px;
}

/* Form card */
.pop-contact-form > .elementor-container {
	padding: 40px 40px 36px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--pop-line, #e5e5e5);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 44px rgba(0, 0, 0, .08);
}

.pop-contact-form .elementor-field-group > label {
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pop-muted, #767676);
}

.pop-contact-form .elementor-field-textual {
	min-height: 50px;
	padding: 12px 15px;
	border: 1px solid var(--pop-line, #e5e5e5);
	border-radius: 11px;
	background: #fbfbfb;
    font-size: 15px;
	color: var(--pop-body, #333333);
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.pop-contact-form .elementor-field-textual:focus {
	background: #fff;
	border-color: var(--pop-gold, #000);
	box-shadow: 0 0 0 4px rgba(170, 170, 170, .16);
	outline: none;
}
.pop-contact-form textarea.elementor-field-textual { min-height: 130px; padding-top: 14px; }

.pop-contact-form .elementor-button[type="submit"] {
	min-height: 54px;
	font-size: 16px;
	box-shadow: 0 8px 22px rgba(170, 170, 170, .34);
}

/* Dark address band */
.pop-contact-addr a[href^="tel"]:hover,
.pop-contact-addr a[href^="mailto"]:hover { text-decoration: underline; }

@media (max-width: 767px) {
	.pop-contact-cards { margin-top: -40px !important; }
	.pop-contact-card > .elementor-widget-wrap { padding: 24px 18px !important; }
	.pop-contact-form > .elementor-container { padding: 26px 18px 24px; border-radius: 16px; }
}

/* Frosted glass needs a fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pop-contact-card > .elementor-widget-wrap { background: #fff; }
}

/* ==========================================================================
   Breadcrumb — was bare text with no rhythm or hierarchy
   ========================================================================== */

.woocommerce .woocommerce-breadcrumb,
.elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0 0 6px;
	padding: 0;
	font-size: 13px;
	color: var(--pop-muted, #767676);
	letter-spacing: .01em;
}
.woocommerce .woocommerce-breadcrumb a {
	color: var(--pop-muted, #767676);
	text-decoration: none;
	padding: 3px 0;
	border-bottom: 1px solid transparent;
	transition: color .16s ease, border-color .16s ease;
}
.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--pop-ink, #000000);
	border-bottom-color: var(--pop-gold, #000);
}
/* Replace the raw slash separator with a lighter glyph */
.woocommerce .woocommerce-breadcrumb {
	--sep-color: #c5c5c5;
}
.woocommerce .woocommerce-breadcrumb > * { display: inline-flex; }

/* Current page reads as the anchor of the trail */
.woocommerce .woocommerce-breadcrumb {
	font-weight: 500;
}

/* ==========================================================================
   Product rating — stars sit between title and price
   ========================================================================== */

.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 2px 0 12px;
	line-height: 1;
}
.woocommerce div.product .woocommerce-product-rating .star-rating {
	margin: 0;
	font-size: 15px;
	color: var(--pop-gold, #000);
	letter-spacing: 2px;
}
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link {
	color: var(--pop-muted, #767676);
	font-size: 13.5px;
	text-decoration: none;
	border-bottom: 1px solid var(--pop-line, #e5e5e5);
}
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link:hover {
	color: var(--pop-ink, #000000);
}

/* Catalogue cards: stars under the title */
.woocommerce ul.products li.product .star-rating {
	margin: 6px 16px 2px !important;
	font-size: 13px;
	color: var(--pop-gold, #000);
}

/* ==========================================================================
   Floating WhatsApp support button
   ========================================================================== */

.pop-wa {
	position: fixed;
	left: 18px;
	bottom: 20px;
	z-index: 940;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 18px 12px 14px;
	border-radius: 999px;
	background: #a6a6a6;
	color: #282828;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 22px rgba(166, 166, 166, .38);
	transition: transform .2s ease, box-shadow .2s ease;
}
.pop-wa:hover {
	transform: translateY(-2px);
	color: #282828;
	box-shadow: 0 10px 28px rgba(166, 166, 166, .48);
}
.pop-wa__icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	fill: currentColor;
}

@media (max-width: 600px) {
	.pop-wa { left: 12px; bottom: 14px; padding: 12px; }
	.pop-wa__label { display: none; }
	body.single-product .pop-wa { bottom: 84px; }
}

/* ==========================================================================
   Wave section dividers — a soft modern transition between bands
   ========================================================================== */

.pop-wave-top { position: relative; }
.pop-wave-top::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 46px;
	background: inherit;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V14c240-19 480-19 720 0s480 19 720 0v32z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V14c240-19 480-19 720 0s480 19 720 0v32z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	transform: translateY(-100%);
	pointer-events: none;
}

/* ==========================================================================
   Product finder quiz
   ========================================================================== */

.pop-finder { background: linear-gradient(165deg, #000000 0%, #333333 100%); padding: clamp(48px,6vw,78px) 0; }
.pop-finder__inner { max-width: 780px; margin-inline: auto; padding-inline: var(--pop-gutter,20px); }
.pop-finder__head { text-align: center; margin-bottom: 26px; }
.pop-finder__title {
	color: #fff; margin: 0 0 10px;
	font-size: clamp(1.7rem,1.3rem + 1.7vw,2.4rem);
	font-weight: 800; letter-spacing: -.022em;
}
.pop-finder__sub { color: #adadad; margin: 0; font-size: 15.5px; }

.pop-finder__progress { display: flex; justify-content: center; gap: 7px; margin-bottom: 28px; }
.pop-finder__dot { width: 34px; height: 4px; border-radius: 999px; background: rgba(240, 240, 240,.2); transition: background .3s ease; }
.pop-finder__dot.is-on { background: var(--pop-gold,#000); }

.pop-finder__step { border: 0; margin: 0; padding: 0; }
.pop-finder__q {
	display: block; width: 100%; text-align: center;
	color: #fff; font-size: clamp(1.15rem,1rem + .7vw,1.5rem);
	font-weight: 700; padding: 0; margin-bottom: 6px;
}
.pop-finder__help { text-align: center; color: #767676; font-size: 13.5px; margin: 0 0 22px; }

.pop-finder__options { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 11px; }
.pop-finder__opt {
	display: flex; flex-direction: column; gap: 3px;
	padding: 17px 18px; text-align: left; cursor: pointer;
	border: 1px solid rgba(240, 240, 240,.18); border-radius: 14px;
	background: rgba(240, 240, 240,.06); color: #ffffff;
	font-family: inherit; font-size: 15px; font-weight: 650;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.pop-finder__opt:hover { background: rgba(240, 240, 240,.12); border-color: rgba(240, 240, 240,.4); transform: translateY(-2px); }
.pop-finder__opt.is-picked { background: var(--pop-gold,#000); border-color: var(--pop-gold,#000); color: #fff; }
.pop-finder__opt-note { font-size: 12.5px; font-weight: 500; opacity: .72; }

.pop-finder__back, .pop-finder__restart {
	display: block; margin: 20px auto 0; padding: 8px 4px;
	background: none; border: 0; cursor: pointer;
	color: #adadad; font-size: 13.5px; text-decoration: underline;
}

.pop-finder__loading { text-align: center; color: #adadad; padding: 26px 0; }
.pop-finder__result-title { text-align: center; color: #fff; font-size: 1.2rem; margin: 0 0 20px; }
.pop-finder__cards { display: grid; gap: 12px; }

.pop-finder__card {
	position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 16px;
	padding: 16px; border-radius: 16px; text-decoration: none;
	background: rgba(240, 240, 240,.07); border: 1px solid rgba(240, 240, 240,.16);
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pop-finder__card:hover { background: rgba(240, 240, 240,.13); transform: translateY(-2px); }
.pop-finder__card.is-best { background: #fff; border-color: #fff; }
.pop-finder__card-media img { width: 96px; height: 96px; object-fit: contain; border-radius: 10px; background: #f7f7f7; padding: 5px; }
.pop-finder__card-body { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.pop-finder__card-name { font-weight: 800; font-size: 16px; color: #ffffff; letter-spacing: -.02em; }
.pop-finder__card.is-best .pop-finder__card-name { color: #000000; }
.pop-finder__card-price { font-weight: 700; color: #e5e5e5; font-size: 14.5px; }
.pop-finder__card.is-best .pop-finder__card-price { color: #000000; }
.pop-finder__card-why { font-size: 13.5px; line-height: 1.6; color: #333333; margin-top: 4px; }
.pop-finder__card-cta { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--pop-gold,#000); }
.pop-finder__card.is-best .pop-finder__card-cta { color: #474747; }
.pop-finder__stars { color: var(--pop-star,#000000); font-size: 12.5px; }
.pop-finder__stars i { font-style: normal; opacity: .7; }
.pop-finder__badge {
	position: absolute; top: -9px; left: 16px;
	background: var(--pop-gold,#000); color: #fff;
	font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	padding: 4px 10px; border-radius: 999px;
}

@media (max-width: 520px) {
	.pop-finder__card { grid-template-columns: 72px 1fr; gap: 12px; }
	.pop-finder__card-media img { width: 72px; height: 72px; }
}

/* ==========================================================================
   Guide cards — images were rendering as thumbnails, not card covers
   ========================================================================== */

.elementor-widget-image-box .elementor-image-box-wrapper { display: block; }
.elementor-widget-image-box .elementor-image-box-img {
	width: 100% !important;
	margin: 0 0 16px !important;
	float: none !important;
}
.elementor-widget-image-box .elementor-image-box-img img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 14px;
	background: linear-gradient(170deg,#f7f7f7,#ededed);
}
.elementor-widget-image-box .elementor-image-box-content { text-align: left; }

/* ==========================================================================
   Studio pack shots sit on pure white. Multiply blends that white into the
   warm page tint, so the product reads as cut out without editing the file.
   ========================================================================== */

.pop-cutout img,
.pop-spotlight-img img,
.woocommerce ul.products li.product a img,
.pop-compare__media img {
	mix-blend-mode: multiply;
}

/* ==========================================================================
   Trust bar on mobile — 2x2 of inline chips.
   Elementor's own mobile rule forces .elementor-icon-box-wrapper to
   display:block and centres the icon, so every property below is flagged to
   override it rather than fight the cascade.
   ========================================================================== */

@media (max-width: 767px) {

	.pop-trustbar {
		padding-top: 26px !important;
		padding-bottom: 26px !important;
	}

	.pop-trustbar > .elementor-container {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: stretch;
		gap: 10px;
	}

	.pop-trustbar .elementor-column {
		width: calc(50% - 5px) !important;
		flex: 0 0 calc(50% - 5px) !important;
		max-width: calc(50% - 5px) !important;
		margin: 0 !important;
	}

	/* Each claim becomes a soft chip so the grid reads as designed, not stacked */
	.pop-trustbar .elementor-column > .elementor-widget-wrap {
		height: 100%;
		padding: 11px 12px !important;
		border-radius: 13px;
		background: #ffffff;
		border: 1px solid #e8e8e8;
	}

	.pop-trustbar .elementor-widget-icon-box,
	.pop-trustbar .elementor-widget-icon-box > .elementor-widget-container {
		width: 100%;
		margin: 0 !important;
	}

	/* Icon and label on one line */
	.pop-trustbar .elementor-icon-box-wrapper {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		text-align: left !important;
	}

	.pop-trustbar .elementor-icon-box-icon {
		display: flex !important;
		align-items: center;
		justify-content: center;
		grid-row: auto !important;
		flex: 0 0 30px !important;
		width: 30px !important;
		height: 30px !important;
		margin: 0 !important;
		border-radius: 9px;
		background: rgba(170, 170, 170, .16);
	}
	.pop-trustbar .elementor-icon-box-icon .elementor-icon { font-size: 14px !important; }
	.pop-trustbar .elementor-icon-box-icon svg { width: 14px; height: 14px; }

	.pop-trustbar .elementor-icon-box-content {
		flex: 1 1 auto !important;
		text-align: left !important;
	}

	.pop-trustbar .elementor-icon-box-title {
		margin: 0 !important;
		font-size: 12px !important;
		line-height: 1.3 !important;
		font-weight: 700 !important;
		text-align: left !important;
	}

	/* Labels only at this size */
	.pop-trustbar .elementor-icon-box-description { display: none !important; }
}

/* ==========================================================================
   Product bands — the construction popato.in uses down its homepage,
   reproduced from that site's own computed values rather than approximated.

   A black-and-white family photograph is pinned to the left of the media
   column and the product's transparent cut-out floats over it, right aligned
   so it breaks out of the photo toward the copy. Bands alternate side.

   Tokens lifted from popato.in (Woodmart theme settings + Elementor kit 7):
     container      1140px          text        18px / 400 / #000
     body bg        #fff            title       35px / 600 / #242424
     font stack     "Avenir Next", Arial, Helvetica, sans-serif
     button         #000 bg, #fff text, uppercase 600 14px, 48px tall,
                    5px 28px padding, 0 radius
   Avenir Next ships with macOS and iOS only, and popato.in never web-loads
   it, so on Windows and Android their site falls back to Arial. Carrying the
   whole stack across is what makes the two render identically per device.
   ========================================================================== */

.pop-band {
	--pop-band-font: "Avenir Next", Arial, Helvetica, sans-serif;
}

.pop-band > .elementor-container {
	align-items: center;
}

.pop-band--reverse > .elementor-container {
	flex-direction: row-reverse;
}

/* Elementor paints a column's background onto its inner wrap, not the column,
   so the height that reveals the photograph has to live on the wrap too.
   The photo is a fixed 1100x525 band, so `contain` keeps it whole and pinned
   left however wide the column gets. */
.pop-band__media > .elementor-widget-wrap {
	min-height: clamp(340px, 30vw, 540px);
}

/* Reversed bands put the media on the right, so the photograph has to hug the
   right edge instead — otherwise it pulls away and leaves a gap at the margin. */
.pop-band--reverse .pop-band__media > .elementor-widget-wrap {
	background-position: center right !important;
}

.pop-band__media .elementor-widget-image { margin: 0 !important; }

.pop-band__product img {
	width: auto !important;
	max-width: min(100%, 560px);
	max-height: clamp(320px, 34vw, 560px);
	object-fit: contain !important;
	background: none !important;
	border-radius: 0 !important;
	mix-blend-mode: normal !important;   /* these are true cut-outs already */
	/* Lifted clear of the photograph, with the shadow it would cast on it. */
	transform: translateY(-16px);
	filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .38));
	transition: transform .7s cubic-bezier(.2, .8, .3, 1);
}

.pop-band:hover .pop-band__product img { transform: translateY(-26px); }

/* The band runs edge to edge now, so the copy carries the page margin itself:
   9% in from the photograph, and a viewport-scaled gutter on the outer side. */
.pop-band__copy > .elementor-widget-wrap {
	padding: 40px max(24px, 5vw) 40px 9%;
}

.pop-band--reverse .pop-band__copy > .elementor-widget-wrap {
	padding: 40px 9% 40px max(24px, 5vw);
}

.pop-band__copy .elementor-widget:not(:last-child) { margin-bottom: 20px; }

.pop-band__title h2,
.pop-band__title .elementor-heading-title {
	max-width: 423px;
	font-family: var(--pop-band-font);
	font-weight: 600;
	font-size: 35px;
	line-height: 1.2;
	letter-spacing: normal;
	color: #242424;
}

.pop-band__title a { color: inherit; text-decoration: none; }
.pop-band__title a:hover { color: #000; }

.pop-band__text,
.pop-band__text p {
	font-family: var(--pop-band-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
	color: #000;
}

.pop-band__text p:last-child { margin-bottom: 0; }

/* Woodmart's accented button: square, black, uppercase. !important throughout
   because overrides.css deliberately outranks Elementor's own button styles. */
.pop-band__cta .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 5px 28px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: #000 !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: var(--pop-band-font) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.2;
	letter-spacing: normal !important;
	text-transform: uppercase;
	transition: all .25s ease;
}

/* Their hover is the same black with a 10% black wash laid over it. */
.pop-band__cta .elementor-button:hover,
.pop-band__cta .elementor-button:focus {
	background-color: #000 !important;
	color: #fff !important;
	box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .1) !important;
	transform: none;
}

@media (max-width: 1024px) {
	.pop-band__media > .elementor-widget-wrap { min-height: 300px; }
	.pop-band__product img { max-height: 340px; }
	.pop-band__title h2,
	.pop-band__title .elementor-heading-title { font-size: 28px; }
	.pop-band__copy > .elementor-widget-wrap,
	.pop-band--reverse .pop-band__copy > .elementor-widget-wrap { padding: 30px max(20px, 4vw) 30px 5%; }
}

/* Stacked: `contain` would leave the photo a thin sliver above the product, so
   it switches to a cropped band and the cut-out centres over it. */
@media (max-width: 767px) {
	.pop-band > .elementor-container,
	.pop-band--reverse > .elementor-container { flex-direction: column; }

	.pop-band__media > .elementor-widget-wrap {
		min-height: 0;
		background-size: cover !important;
		background-position: center !important;
		padding: 20px 0 0 !important;
	}

	.pop-band__product img {
		max-width: 74%;
		max-height: 300px;
		transform: none;
	}

	.pop-band__copy > .elementor-widget-wrap,
	.pop-band--reverse .pop-band__copy > .elementor-widget-wrap { padding: 24px 18px 8px; }
	.pop-band--reverse .pop-band__media > .elementor-widget-wrap { background-position: center !important; }
	.pop-band__title h2,
	.pop-band__title .elementor-heading-title { max-width: none; font-size: 26px; }
	.pop-band__text, .pop-band__text p { font-size: 16px; }
	.pop-band__copy { text-align: center; }
	.pop-band__cta .elementor-button { width: 100%; }
}

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