/**
 * TJL Product Page.
 *
 * Scoped under `.tjl-pp` throughout. Colour and type follow the Elementor kit
 * and the store locator: Prata for headings, Jost for body, #8441C0 as the
 * brand purple, #D9A62E as the gold. Nexter and the Elementor kit both style
 * bare `button`, `input`, `table` and `h3` at specificity (0,1,1), so every
 * rule here carries the `.tjl-pp` class to outrank them without `!important`.
 */

/* The tokens are declared on BOTH the plugin's own blocks and the Elementor
   document wrapper. Rules that reach into Elementor's or WooCommerce's markup
   (`.elementor-163 form.cart …`) sit OUTSIDE any `.tjl-pp` element, so a
   `var(--pp-line)` there resolved to nothing and the browser threw the whole
   declaration away — a border that simply never painted, with no error.
   Declaring them here too is what makes those rules real. */
.elementor-163,
body .tjl-pp-call,
.tjl-pp {
	--pp-purple: #8441C0;
	--pp-deep: #3A1259;
	--pp-pink: #E4097F;
	--pp-gold: #D9A62E;
	--pp-gold-soft: #F7DD9B;
	--pp-ink: #2F363D;
	--pp-muted: #6B6675;
	--pp-line: #E7DCF2;
	--pp-ground: #FDF8FF;
	--pp-card: #FFFFFF;
	--pp-radius: 18px;
	--pp-shadow: 0 6px 20px -10px rgba(90, 46, 134, 0.16);
	--pp-shadow-lift: 0 14px 30px -14px rgba(90, 46, 134, 0.30);
	--pp-gold-grad: linear-gradient(135deg, #F7DD9B 0%, #D9A62E 36%, #A9781A 56%, #E8BF55 76%, #F7DD9B 100%);

	box-sizing: border-box;
	font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--pp-ink);
}
.tjl-pp *,
.tjl-pp *::before,
.tjl-pp *::after { box-sizing: border-box; }

.tjl-pp button,
.tjl-pp input {
	margin: 0;
	min-height: 0;
	font-family: inherit;
	line-height: normal;
	text-shadow: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.tjl-pp h2,
.tjl-pp h3,
.tjl-pp p,
.tjl-pp ul,
.tjl-pp ol,
.tjl-pp li,
.tjl-pp table {
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
}
.tjl-pp .tjl-pp-ico { flex: none; display: block; }

.tjl-pp .tjl-pp-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pp-purple);
	margin: 0 0 8px;
}
.tjl-pp .tjl-pp-title {
	font-family: "Prata", Georgia, serif;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.22;
	font-weight: 400;
	color: var(--pp-deep);
	margin: 0;
}

/* Editor-only data warnings. Loud on purpose, and invisible to shoppers. */
.tjl-pp-editor-note,
.tjl-pp + .tjl-pp-editor-note {
	margin: 10px 0;
	padding: 9px 12px;
	border-left: 3px solid #B32D2E;
	background: #FCF0F0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #7A1F20;
	font-family: "Jost", system-ui, sans-serif;
}

/* =========================================================================
   2. Weight + delivery strip
   ====================================================================== */

.tjl-pp-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 18px;
}
.tjl-pp-specs .tjl-pp-specs__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 11px;
	border: 1px solid var(--pp-line);
	border-radius: 999px;
	background: var(--pp-ground);
	line-height: 1.2;
	white-space: nowrap;
}
.tjl-pp-specs .tjl-pp-specs__k {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pp-muted);
}
.tjl-pp-specs .tjl-pp-specs__v {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--pp-deep);
}
.tjl-pp-specs .tjl-pp-specs__v small {
	font-size: 11px;
	font-weight: 500;
	color: var(--pp-muted);
}
.tjl-pp-specs .tjl-pp-specs__item--eta {
	border-color: rgba(217, 166, 46, 0.45);
	background: linear-gradient(180deg, #FFFBF0 0%, #FFF7E4 100%);
}

/* =========================================================================
   4. Short description + View More Details
   ====================================================================== */

.tjl-pp-short { margin: 16px 0 20px; }
.tjl-pp-short .tjl-pp-short__body {
	font-size: 15px;
	line-height: 1.62;
	color: var(--pp-muted);
	/* Three lines, as the brief asks. Clamping rather than truncating server
	   side keeps the whole summary in the DOM for search and for the expand. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tjl-pp-short.is-expanded .tjl-pp-short__body {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}
.tjl-pp-short .tjl-pp-short__body p { margin: 0 0 10px; }
.tjl-pp-short .tjl-pp-short__body p:last-child { margin-bottom: 0; }

.tjl-pp-short .tjl-pp-short__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--pp-purple);
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	transition: color 0.2s ease;
}
.tjl-pp-short .tjl-pp-short__more:hover { color: var(--pp-pink); }
.tjl-pp-short .tjl-pp-short__more .tjl-pp-ico { transition: transform 0.25s ease; }
.tjl-pp-short.is-expanded .tjl-pp-short__more .tjl-pp-ico { transform: rotate(180deg); }

/* =========================================================================
   5 + 6. Buy Now above Add to cart
   -------------------------------------------------------------------------
   WooCommerce prints quantity, then Add to cart, then the hook this button
   comes from, so the brief's order is produced by the grid rather than by
   source order: Buy Now spans row 1, quantity and Add to cart share row 2.
   ====================================================================== */

.tjl-pp-cta {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: stretch;
	margin: 18px 0 4px;
}
.tjl-pp-cta .tjl-pp-buynow { grid-column: 1 / -1; grid-row: 1; }
.tjl-pp-cta .quantity { grid-column: 1; grid-row: 2; }
.tjl-pp-cta .single_add_to_cart_button { grid-column: 2; grid-row: 2; }

.tjl-pp-cta .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--pp-line);
	border-radius: 12px;
	background: var(--pp-card);
	overflow: hidden;
}
.tjl-pp-cta .quantity input.qty {
	width: 62px;
	height: 52px;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--pp-deep);
}

.tjl-pp-cta .single_add_to_cart_button,
.tjl-pp-cta .tjl-pp-buynow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 52px;
	padding: 14px 26px;
	border-radius: 12px;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Buy Now is the gold one: it is the single most consequential control on
   the page, and gold is the only place the palette uses it at this size. */
.tjl-pp-cta .tjl-pp-buynow {
	border: 0;
	color: #3A2606;
	background: var(--pp-gold-grad);
	box-shadow: 0 8px 22px -10px rgba(217, 166, 46, 0.85);
}
.tjl-pp-cta .tjl-pp-buynow:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -10px rgba(217, 166, 46, 0.95);
}
.tjl-pp-cta .tjl-pp-buynow:active { transform: translateY(0); }

/* Add to cart stays the secondary action: the brand purple, outlined, so the
   two never compete for the same glance. */
.tjl-pp-cta .single_add_to_cart_button {
	border: 1.5px solid var(--pp-purple);
	background: var(--pp-card);
	color: var(--pp-purple);
	width: 100%;
}
.tjl-pp-cta .single_add_to_cart_button:hover {
	background: var(--pp-purple);
	color: #FFF;
	transform: translateY(-2px);
	box-shadow: var(--pp-shadow-lift);
}

/* =========================================================================
   7. PIN availability
   ====================================================================== */

.tjl-pp-avail {
	margin: 22px 0 0;
	padding: 18px 18px 16px;
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	background: var(--pp-ground);
}
.tjl-pp-avail .tjl-pp-avail__head {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--pp-deep);
	margin-bottom: 12px;
}
.tjl-pp-avail .tjl-pp-avail__form {
	display: flex;
	align-items: stretch;
	gap: 8px;
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
	border-radius: 12px;
	padding: 4px;
}
.tjl-pp-avail .tjl-pp-avail__flag {
	display: inline-flex;
	align-items: center;
	padding: 0 10px 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--pp-muted);
	border-right: 1px solid var(--pp-line);
}
.tjl-pp-avail .tjl-pp-avail__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 11px 4px;
	font-size: 15px;
	letter-spacing: 0.1em;
	color: var(--pp-ink);
}
.tjl-pp-avail .tjl-pp-avail__input::placeholder {
	letter-spacing: normal;
	color: #9D96A8;
}
.tjl-pp-avail .tjl-pp-avail__input:focus { outline: none; }
.tjl-pp-avail .tjl-pp-avail__form:focus-within {
	border-color: var(--pp-purple);
	box-shadow: 0 0 0 3px rgba(132, 65, 192, 0.12);
}
.tjl-pp-avail .tjl-pp-avail__btn {
	flex: none;
	border: 0;
	border-radius: 9px;
	padding: 11px 22px;
	background: var(--pp-purple);
	color: #FFF;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}
.tjl-pp-avail .tjl-pp-avail__btn:hover { background: var(--pp-deep); }

.tjl-pp-avail .tjl-pp-avail__out:empty { display: none; }
.tjl-pp-avail .tjl-pp-avail__msg {
	margin-top: 12px;
	padding-left: 22px;
	position: relative;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--pp-ink);
}
.tjl-pp-avail .tjl-pp-avail__msg::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
}
.tjl-pp-avail .tjl-pp-avail__msg.is-ok::before { background: #1F9D55; }
.tjl-pp-avail .tjl-pp-avail__msg.is-warn::before { background: var(--pp-gold); }
.tjl-pp-avail .tjl-pp-avail__msg strong { color: var(--pp-deep); font-weight: 600; }

.tjl-pp-avail .tjl-pp-avail__near {
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--pp-card);
	border: 1px solid var(--pp-line);
}
.tjl-pp-avail .tjl-pp-avail__lead {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pp-muted);
	margin-bottom: 5px;
}
.tjl-pp-avail .tjl-pp-avail__store {
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--pp-deep);
}
.tjl-pp-avail .tjl-pp-avail__addr {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--pp-muted);
	margin-top: 3px;
}
.tjl-pp-avail .tjl-pp-avail__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 9px;
}
.tjl-pp .tjl-pp-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--pp-purple);
	text-decoration: none;
	border-bottom: 1px solid rgba(132, 65, 192, 0.35);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.tjl-pp .tjl-pp-link:hover { color: var(--pp-pink); border-color: currentColor; }

/* =========================================================================
   Assurance row
   ====================================================================== */

.tjl-pp-assure {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 18px 0 6px;
}
.tjl-pp-assure .tjl-pp-assure__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px;
	border: 1px solid var(--pp-line);
	border-radius: 14px;
	background: var(--pp-card);
	box-shadow: var(--pp-shadow);
}
.tjl-pp-assure .tjl-pp-assure__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid transparent;
	background-image: linear-gradient(#F8F2FD, #F8F2FD), var(--pp-gold-grad);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: 0 0 0 3px rgba(217, 166, 46, 0.10);
}
.tjl-pp-assure .tjl-pp-assure__txt { display: flex; flex-direction: column; min-width: 0; }
.tjl-pp-assure .tjl-pp-assure__txt strong {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--pp-deep);
}
.tjl-pp-assure .tjl-pp-assure__txt small {
	font-size: 11px;
	color: var(--pp-muted);
	margin-top: 2px;
}

/* =========================================================================
   8. Detail tabs over a fixed-height box
   -------------------------------------------------------------------------
   Six expanding accordion panels made this section's height depend on which
   one was open: a tap grew the page by hundreds of pixels and shoved the
   related products down. A constant box that scrolls inside itself costs the
   same whatever is read.
   ====================================================================== */

.tjl-pp-details {
	padding: 38px 20px 34px;
	background: var(--pp-ground);
}
.tjl-pp-details .tjl-pp-details__inner { max-width: 1000px; margin: 0 auto; }
.tjl-pp-details .tjl-pp-details__head { text-align: center; margin-bottom: 18px; }
.tjl-pp-details .tjl-pp-eyebrow { margin-bottom: 5px; }

.tjl-pp-details .tjl-pp-tabs {
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	background: var(--pp-card);
	box-shadow: var(--pp-shadow);
	overflow: hidden;
}

/* ---- The strip ----
 * Scrolls sideways rather than wrapping to a second and third row, so the
 * box below it always begins at the same height. */
.tjl-pp-details .tjl-pp-tabs__strip {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-bottom: 1px solid var(--pp-line);
	background: linear-gradient(180deg, #FBF7FE 0%, #FFFFFF 100%);
	padding: 0 4px;
}
.tjl-pp-details .tjl-pp-tabs__strip::-webkit-scrollbar { display: none; }

.tjl-pp-details .tjl-pp-tabs__tab {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px 13px;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--pp-muted);
	transition: color 0.2s ease;
}
.tjl-pp-details .tjl-pp-tabs__tab::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--pp-gold-grad);
	transform: scaleX(0);
	transition: transform 0.25s ease;
}
.tjl-pp-details .tjl-pp-tabs__tab:hover { color: var(--pp-purple); }
.tjl-pp-details .tjl-pp-tabs__tab.is-active {
	color: var(--pp-deep);
	font-weight: 600;
}
.tjl-pp-details .tjl-pp-tabs__tab.is-active::after { transform: scaleX(1); }

.tjl-pp-details .tjl-pp-tabs__ico {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #F8F2FD;
	opacity: 0.6;
	transition: opacity 0.2s ease, box-shadow 0.25s ease;
}
.tjl-pp-details .tjl-pp-tabs__tab.is-active .tjl-pp-tabs__ico {
	opacity: 1;
	box-shadow: 0 0 0 2px rgba(217, 166, 46, 0.35);
}

/* ---- The box ----
 * One fixed height, scrolled internally. */
.tjl-pp-details .tjl-pp-tabs__box { position: relative; }
.tjl-pp-details .tjl-pp-tabs__panel {
	height: 310px;
	overflow-y: auto;
	overscroll-behavior-y: contain;
	padding: 20px 24px 24px;
	scrollbar-width: thin;
	scrollbar-color: #D8C6EC transparent;
}
.tjl-pp-details .tjl-pp-tabs__panel::-webkit-scrollbar { width: 6px; }
.tjl-pp-details .tjl-pp-tabs__panel::-webkit-scrollbar-thumb {
	background: #D8C6EC;
	border-radius: 3px;
}
.tjl-pp-details .tjl-pp-tabs__panel::-webkit-scrollbar-track { background: transparent; }

.tjl-pp-details .tjl-pp-tabs__fade {
	position: absolute;
	left: 1px;
	right: 7px;
	bottom: 0;
	height: 40px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 92%);
	opacity: 1;
	transition: opacity 0.2s ease;
}
.tjl-pp-details.is-at-end .tjl-pp-tabs__fade { opacity: 0; }

.tjl-pp-details .tjl-pp-tabs__body {
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--pp-muted);
}
.tjl-pp-details .tjl-pp-tabs__body > *:first-child { margin-top: 0; }
.tjl-pp-details .tjl-pp-tabs__body p { margin: 0 0 11px; }
.tjl-pp-details .tjl-pp-tabs__body p:last-child { margin-bottom: 0; }
.tjl-pp-details .tjl-pp-tabs__body ul,
.tjl-pp-details .tjl-pp-tabs__body ol { margin: 0 0 11px; padding-left: 0; list-style: none; }
.tjl-pp-details .tjl-pp-tabs__body ul li {
	position: relative;
	padding-left: 21px;
	margin-bottom: 6px;
}
.tjl-pp-details .tjl-pp-tabs__body ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 9px;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	transform: rotate(45deg);
	background: var(--pp-gold);
}
.tjl-pp-details .tjl-pp-tabs__body ol { counter-reset: pp; }
.tjl-pp-details .tjl-pp-tabs__body ol li {
	position: relative;
	padding-left: 25px;
	margin-bottom: 6px;
	counter-increment: pp;
}
.tjl-pp-details .tjl-pp-tabs__body ol li::before {
	content: counter(pp) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 600;
	color: var(--pp-purple);
}
.tjl-pp-details .tjl-pp-tabs__body .tjl-pp-sub {
	margin: 18px 0 7px;
	font-family: "Prata", Georgia, serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--pp-deep);
}
.tjl-pp-details .tjl-pp-tabs__body .tjl-pp-sub:first-child { margin-top: 0; }

/* The generated specification table. */
.tjl-pp .tjl-pp-spec-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 14px;
	font-size: 14px;
}
.tjl-pp .tjl-pp-spec-table th,
.tjl-pp .tjl-pp-spec-table td {
	padding: 9px 2px;
	border: 0;
	border-bottom: 1px solid var(--pp-line);
	text-align: left;
	vertical-align: top;
	background: transparent;
}
.tjl-pp .tjl-pp-spec-table th {
	width: 44%;
	font-weight: 500;
	color: var(--pp-muted);
	letter-spacing: 0.01em;
}
.tjl-pp .tjl-pp-spec-table td { font-weight: 600; color: var(--pp-deep); }
.tjl-pp .tjl-pp-spec-table tr:last-child th,
.tjl-pp .tjl-pp-spec-table tr:last-child td { border-bottom: 0; }

/* =========================================================================
   10. Find a store banner
   ====================================================================== */

.tjl-pp-findstore { padding: 10px 20px 46px; }
.tjl-pp-findstore .tjl-pp-findstore__inner {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	overflow: hidden;
	padding: 38px 44px;
	border-radius: 24px;
	border: 1px solid var(--pp-line);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(217, 166, 46, 0.16) 0%, rgba(217, 166, 46, 0) 55%),
		linear-gradient(135deg, #FBF4FF 0%, #FDF8FF 48%, #FFF8EC 100%);
	box-shadow: var(--pp-shadow);
}
.tjl-pp-findstore .tjl-pp-findstore__copy { max-width: 620px; }
.tjl-pp-findstore .tjl-pp-findstore__h {
	font-family: "Prata", Georgia, serif;
	font-size: clamp(21px, 2.4vw, 29px);
	font-weight: 400;
	line-height: 1.26;
	color: var(--pp-deep);
	margin: 0 0 10px;
}
.tjl-pp-findstore .tjl-pp-findstore__t {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pp-muted);
	margin: 0 0 20px;
}
.tjl-pp-findstore .tjl-pp-findstore__art {
	flex: none;
	opacity: 0.16;
	transform: rotate(-8deg);
	margin-right: 10px;
}

.tjl-pp .tjl-pp-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tjl-pp .tjl-pp-btn--solid {
	background: var(--pp-purple);
	color: #FFF;
	box-shadow: 0 8px 22px -12px rgba(132, 65, 192, 0.9);
}
.tjl-pp .tjl-pp-btn--solid .tjl-pp-ico path,
.tjl-pp .tjl-pp-btn--solid .tjl-pp-ico rect,
.tjl-pp .tjl-pp-btn--solid .tjl-pp-ico circle { fill: #FFF; }
.tjl-pp .tjl-pp-btn--solid:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -12px rgba(132, 65, 192, 1);
	color: #FFF;
}

/* =========================================================================
   Floating call button
   ====================================================================== */

.tjl-pp-call {
	position: fixed;
	/* Left, because the side cart owns the right corner on every one of these
	   pages and two bubbles in one corner is a pile, not a choice. Everything
	   else here mirrors that cart bubble on purpose -- same 60px disc, same
	   white ground, same 30px purple glyph -- so the pair reads as one set of
	   controls rather than two unrelated badges. */
	left: 22px;
	bottom: 26px;
	z-index: 998;
	display: inline-flex;
	align-items: center;
	gap: 0;
	max-width: 60px;
	height: 60px;
	padding: 0;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: 0 3px 14px -2px rgba(58, 18, 89, 0.22);
	text-decoration: none;
	overflow: hidden;
	transition: max-width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.2s ease;
}
.tjl-pp-call .tjl-pp-call__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
}
.tjl-pp-call .tjl-pp-ico {
	width: 30px;
	height: 30px;
}
.tjl-pp-call .tjl-pp-ico path { fill: var(--pp-purple); }

.tjl-pp-call .tjl-pp-call__txt {
	flex: none;
	padding-right: 24px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--pp-deep);
}
.tjl-pp-call:hover,
.tjl-pp-call:focus-visible {
	max-width: 262px;
	box-shadow: 0 6px 20px -4px rgba(58, 18, 89, 0.32);
}
.tjl-pp-call:focus-visible {
	outline: 2px solid var(--pp-purple);
	outline-offset: 3px;
}

/* =========================================================================
   Phones and small tablets
   -------------------------------------------------------------------------
   The governing idea is that viewport 1 stays a viewport, not a scroll: the
   strip, the buy box and the availability card are each compressed rather
   than merely stacked.
   ====================================================================== */

@media (max-width: 767px) {
	/* The spec pills become one swipeable row instead of wrapping to three
	   stacked lines and pushing the price below the fold. */
	.tjl-pp-specs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 12px -16px 14px;
		padding: 0 16px 2px;
	}
	.tjl-pp-specs::-webkit-scrollbar { display: none; }
	.tjl-pp-specs .tjl-pp-specs__item { scroll-snap-align: start; padding: 7px 12px 7px 9px; }
	.tjl-pp-specs .tjl-pp-specs__v { font-size: 13.5px; }

	.tjl-pp-cta {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 10px;
		margin: 16px 0 2px;
	}
	.tjl-pp-cta .quantity input.qty { width: 54px; height: 50px; }
	.tjl-pp-cta .single_add_to_cart_button,
	.tjl-pp-cta .tjl-pp-buynow {
		min-height: 50px;
		padding: 13px 16px;
		font-size: 13.5px;
		letter-spacing: 0.04em;
	}

	.tjl-pp-avail { padding: 15px 14px 14px; border-radius: 16px; }
	.tjl-pp-avail .tjl-pp-avail__btn { padding: 11px 16px; }
	.tjl-pp-avail .tjl-pp-avail__input { padding: 11px 2px; font-size: 14.5px; }

	/* Three assurance cards side by side is 100px each on a phone, which is
	   not a card. One swipeable row at a readable width instead. */
	.tjl-pp-assure {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		gap: 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 16px -16px 4px;
		padding: 2px 16px 8px;
	}
	.tjl-pp-assure::-webkit-scrollbar { display: none; }
	.tjl-pp-assure .tjl-pp-assure__item { scroll-snap-align: start; }

	.tjl-pp-details { padding: 26px 14px 24px; }
	.tjl-pp-details .tjl-pp-details__head { margin-bottom: 14px; }
	.tjl-pp-details .tjl-pp-tabs__tab { padding: 11px 12px 10px; font-size: 12.5px; gap: 6px; }
	.tjl-pp-details .tjl-pp-tabs__tab::after { left: 10px; right: 10px; }
	.tjl-pp-details .tjl-pp-tabs__ico { width: 22px; height: 22px; }
	.tjl-pp-details .tjl-pp-tabs__ico .tjl-pp-ico { width: 15px; height: 15px; }
	/* Shorter box on a phone: a 310px panel plus the strip eats most of an
	   844px screen on its own. */
	.tjl-pp-details .tjl-pp-tabs__panel { height: 268px; padding: 16px 16px 20px; font-size: 14px; }
	.tjl-pp .tjl-pp-spec-table th { width: 50%; }

	.tjl-pp-findstore { padding: 6px 16px 34px; }
	.tjl-pp-findstore .tjl-pp-findstore__inner {
		flex-direction: column;
		align-items: flex-start;
		padding: 26px 22px;
		border-radius: 18px;
	}
	.tjl-pp-findstore .tjl-pp-findstore__art { display: none; }
	.tjl-pp-findstore .tjl-pp-btn { width: 100%; justify-content: center; }

	/* On a phone the label would cover a third of the screen, so the button
	   stays a disc and the accessible name carries the meaning. */
	.tjl-pp-call {
		left: 14px;
		bottom: 16px;
		max-width: 60px;
		height: 60px;
	}
	.tjl-pp-call .tjl-pp-call__txt { display: none; }
	.tjl-pp-call:hover, .tjl-pp-call:focus-visible { max-width: 60px; }
}

@media (max-width: 400px) {
	.tjl-pp-cta { grid-template-columns: minmax(0, 1fr); }
	.tjl-pp-cta .quantity { grid-column: 1; grid-row: 2; justify-self: start; }
	.tjl-pp-cta .single_add_to_cart_button { grid-column: 1; grid-row: 3; }
}


/* =========================================================================
   Compaction — the buy box, the gallery, and the things around them
   -------------------------------------------------------------------------
   Measured before this block: 6604px of document on a 1440 desktop and
   7606px on a 390 phone, with the first screen spent almost entirely on a
   banner. Everything here is a reduction, plus the two places that needed
   MORE room because they were colliding.
   ====================================================================== */

/* ---- Gallery: square and smaller ----
 * The product shots are portrait, so the column grew to 844px while the
 * summary beside it ran to 1293px. A square crop on the same card shape the
 * shop grid uses settles both. */
.elementor-163 .tp-woo-single-image .woocommerce-product-gallery__image,
.elementor-163 .tp-woo-single-image .woocommerce-product-gallery__wrapper > a,
.elementor-163 .tp-woo-single-image .woocommerce-product-gallery__wrapper > div {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 24px;
	background: #F7F4FA;
}
.elementor-163 .tp-woo-single-image .woocommerce-product-gallery__image img,
.elementor-163 .tp-woo-single-image .woocommerce-product-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 24px;
}

/* ---- Title and the run down to the buttons ---- */
.elementor-163 .tp_product_title {
	margin-bottom: 6px;
	line-height: 1.18;
}
.tjl-pp-specs { margin: 10px 0 12px; }

/* ---- Purity swatches: they were the biggest thing in the buy box ---- */
.elementor-163 form.cart table.variations {
	margin: 0 0 10px;
	border: 0;
}
.elementor-163 form.cart table.variations th,
.elementor-163 form.cart table.variations td {
	padding: 0 0 6px;
	border: 0;
	background: transparent;
}
.elementor-163 form.cart .wck-imageselect + .caption,
.elementor-163 form.cart label .caption {
	font-size: 11.5px;
	letter-spacing: 0.01em;
}
.elementor-163 form.cart .wck-imageselect img,
.elementor-163 form.cart td.value img {
	width: 38px !important;
	height: 38px !important;
	object-fit: contain;
}
.elementor-163 form.cart td.value label {
	margin: 0 10px 0 0;
}

/* ---- Price breakdown ---- */
.elementor-163 .price-breakdown-box { margin: 0 0 10px; }
.elementor-163 .price-breakdown-heading { margin-bottom: 6px; font-size: 13px; }
.elementor-163 .price-breakdown-table td,
.elementor-163 .price-breakdown-table th {
	padding: 4px 0;
	border: 0;
	background: transparent;
}
.elementor-163 .price-breakdown-note { margin: 6px 0 0; font-size: 11.5px; }
.elementor-163 .wckalkulator-price { margin: 4px 0 8px; }

/* ---- The deposits block sat 214px below the breakdown ---- */
.elementor-163 .awcdp-deposits-wrapper {
	margin: 8px 0 10px !important;
	padding: 10px 12px !important;
}
.elementor-163 .awcdp-deposits-option { margin: 0 !important; }
.elementor-163 .awcdp-deposits-description { margin: 2px 0 0 !important; font-size: 11.5px; }

/* ---- Short description, CTA, availability ---- */
.tjl-pp-short { margin: 10px 0 12px; }
.tjl-pp-short .tjl-pp-short__more { margin-top: 7px; }
.tjl-pp-cta { margin: 12px 0 2px; }
.tjl-pp-avail { margin: 14px 0 0; padding: 14px 14px 13px; }
.tjl-pp-avail .tjl-pp-avail__head { margin-bottom: 9px; }

/* ---- MORE room, not less: the assurance row was touching "Share This
 *      Product" underneath it. ---- */
.tjl-pp-assure { margin: 14px 0 22px; }
.elementor-163 .elementor-element-e45db1c { margin-top: 10px; }

/* ---- Related products: the home page's carousel manners ---- */
.elementor-163 .elementor-element-3e72da5 .product-content-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 20px;
	background: #F7F4FA;
}
.elementor-163 .elementor-element-3e72da5 .product-content-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.elementor-163 .elementor-element-3e72da5 .product-list-content { padding-top: 12px; }
.elementor-163 .elementor-element-3e72da5 .post-title,
.elementor-163 .elementor-element-3e72da5 .post-title a {
	font-size: 15px !important;
	line-height: 1.35 !important;
}
.elementor-163 .elementor-element-3e72da5 .price,
.elementor-163 .elementor-element-3e72da5 .price .woocommerce-Price-amount {
	font-size: 15px !important;
}
.elementor-163 .elementor-element-3c33220 { margin-bottom: 14px; }

/* ---- The two closing sections carried the most dead height ---- */
.elementor-163 .elementor-element-pptrust { margin-bottom: 0; }
.tjl-pp-findstore { padding: 6px 20px 34px; }
.tjl-pp-findstore .tjl-pp-findstore__inner { padding: 30px 36px; }

@media (max-width: 1024px) {
	.elementor-163 .tp-woo-single-image .woocommerce-product-gallery__image,
	.elementor-163 .tp-woo-single-image .woocommerce-product-gallery__image img { border-radius: 18px; }
}

@media (max-width: 767px) {
	/* On a phone the gallery and the summary are stacked, so the image is
	   competing with the price for the first screen rather than sitting
	   beside it. A 1:1 crop at full column width is the most it can have. */
	.elementor-163 .tp-woo-single-image .woocommerce-product-gallery__image,
	.elementor-163 .tp-woo-single-image .woocommerce-product-gallery__image img { border-radius: 16px; }

	.elementor-163 .tp_product_title { margin-bottom: 4px; }
	.tjl-pp-specs { margin: 8px -16px 10px; }
	.tjl-pp-short { margin: 8px 0 10px; }
	.tjl-pp-cta { margin: 10px 0 2px; }
	.tjl-pp-avail { margin: 12px 0 0; }
	.tjl-pp-assure { margin: 12px -16px 18px; }

	.elementor-163 form.cart .wck-imageselect img,
	.elementor-163 form.cart td.value img { width: 34px !important; height: 34px !important; }

	.tjl-pp-findstore { padding: 4px 16px 26px; }
	.tjl-pp-findstore .tjl-pp-findstore__inner { padding: 22px 18px; }
}

/* =========================================================================
   The inter-widget gap in the summary column
   -------------------------------------------------------------------------
   Elementor gives every widget `margin-bottom: 20px` at (0,2,0). Nine widgets
   stack in this column, so 180px of the buy box was gaps between things that
   already have their own spacing. Scoped to this one column so the rest of
   the template keeps the kit default.
   ====================================================================== */

.elementor-163 .elementor-element-fc7cf9b > .elementor-widget-wrap > .elementor-widget:not(:last-child) {
	margin-bottom: 8px;
}

/* "Share This Product" renders its text but measures 0px tall, so the social
   icons underneath were sitting on top of it. Give the box its height back
   rather than nudging the icons down and leaving the collision in place. */
.elementor-163 .elementor-element-e45db1c {
	min-height: 24px;
	margin-top: 12px;
}
.elementor-163 .elementor-element-e45db1c .tp-heading-title,
.elementor-163 .elementor-element-e45db1c .elementor-widget-container {
	min-height: 24px;
}

@media (max-width: 767px) {
	.elementor-163 .elementor-element-fc7cf9b > .elementor-widget-wrap > .elementor-widget:not(:last-child) {
		margin-bottom: 6px;
	}
}

/* =========================================================================
   Banner: the wave was painted over the words it frames
   -------------------------------------------------------------------------
   The Plus renders the animated wave as `position:absolute; z-index:1`,
   168px tall, anchored to the foot of the banner. The banner's own headings
   sit at `z-index:auto`, i.e. behind it, so "More on this Product" and
   "Product Details" were under an opaque white crest — invisible on a phone
   and clipped on a desktop. Order the two layers explicitly and stop the
   wave from claiming most of the banner's height.
   ====================================================================== */

.elementor-163 .elementor-element-dab0a79 .tp-plus-shape-divider,
.elementor-163 .elementor-element-dab0a79 .tp-plus-shape-divider svg {
	/* The wrapper AND the svg both need constraining: the svg is authored at
	   a fixed 168px and simply overflowed a shortened wrapper, so the white
	   crest still reached up over the banner's white headings. */
	z-index: 0;
	top: auto;
	bottom: 0;
	height: 92px;
}
.elementor-163 .elementor-element-dab0a79 > .elementor-container,
.elementor-163 .elementor-element-1bb38bfd {
	position: relative;
	z-index: 2;
}

/* =========================================================================
   Buy box: price beside the purity it belongs to
   ====================================================================== */

/* The standalone "Total" sat on its own line in 34px Prata with nothing
   beside it until a purity was chosen, which read as a broken heading.
   It becomes a compact row under the swatches, and `is-empty` (set in JS)
   keeps it out of the layout entirely until it has a figure to show. */
.elementor-163 .wckalkulator-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 2px 0 8px;
	padding: 0;
	font-family: "Jost", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pp-muted);
}
.elementor-163 .wckalkulator-price .woocommerce-Price-amount,
.elementor-163 .wckalkulator-price bdi {
	font-family: "Prata", Georgia, serif;
	font-size: 25px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--pp-deep);
}
.elementor-163 .wckalkulator-price.is-empty { display: none; }

/* The breakdown is now behind a toggle rather than always open. */
.tjl-pp-bd-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
	font-family: "Jost", system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pp-purple);
	border-bottom: 1px solid rgba(132, 65, 192, 0.4);
	transition: color 0.2s ease;
}
.tjl-pp-bd-toggle:hover { color: var(--pp-pink); }
.tjl-pp-bd-toggle .tjl-pp-chev {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 0.25s ease;
}
.tjl-pp-bd-toggle[aria-expanded="true"] .tjl-pp-chev {
	transform: rotate(225deg) translate(-1px, -1px);
}
.elementor-163 .price-breakdown-box[hidden] { display: none; }
.elementor-163 .price-breakdown-box {
	margin: 0 0 10px;
	padding: 10px 12px;
	border: 1px solid var(--pp-line);
	border-radius: 12px;
	background: var(--pp-ground);
}
.elementor-163 .price-breakdown-heading { display: none; }

@media (max-width: 767px) {
	.elementor-163 .elementor-element-dab0a79 .tp-plus-shape-divider,
	.elementor-163 .elementor-element-dab0a79 .tp-plus-shape-divider svg { height: 48px; }

	/* Breathing room under the crest so the breadcrumb never touches it. */
	.elementor-163 .elementor-element-986a6b1 .elementor-spacer-inner { height: 14px !important; }

	.elementor-163 .wckalkulator-price .woocommerce-Price-amount,
	.elementor-163 .wckalkulator-price bdi { font-size: 22px; }

	/* Share belongs after the sale, not inside it. Hidden here rather than
	   deleted, so the desktop column keeps it and nothing is lost. */
	.elementor-163 .elementor-element-e45db1c,
	.elementor-163 .elementor-element-ab465dc { display: none; }
}

/* Quantity stays beside Add to cart at every width: it must never end up
   sandwiched between the two buttons. */
@media (max-width: 400px) {
	.tjl-pp-cta { grid-template-columns: auto minmax(0, 1fr); }
	.tjl-pp-cta .quantity { grid-column: 1; grid-row: 2; }
	.tjl-pp-cta .single_add_to_cart_button { grid-column: 2; grid-row: 2; }
	.tjl-pp-cta .quantity input.qty { width: 44px; }
	.tjl-pp-cta .single_add_to_cart_button { padding: 13px 8px; font-size: 12.5px; letter-spacing: 0.02em; }
}

/* =========================================================================
   Purity as a segmented control
   -------------------------------------------------------------------------
   WCKalkulator prints each option as `label.wck-imageselect` holding a radio,
   a 50px inline-styled image and a caption, laid out as free-floating tiles.
   Two big gold medallions were the loudest thing in the buy box and still
   gave no sense of being one choice between alternatives. A single strip of
   equal segments says "pick one of these" in the width it already had, and
   it works for two options or five without being told how many.
   ====================================================================== */

.elementor-163 form.cart table.variations > tbody > tr > td.value:has(.wck-imageselect) {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid var(--pp-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--pp-card);
}

.elementor-163 form.cart label.wck-imageselect {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0;
	padding: 9px 6px;
	cursor: pointer;
	border-right: 1px solid var(--pp-line);
	background: transparent;
	transition: background 0.2s ease, color 0.2s ease;
}
.elementor-163 form.cart label.wck-imageselect:last-child { border-right: 0; }
.elementor-163 form.cart label.wck-imageselect:hover { background: #FBF7FE; }

/* The radio itself is redundant once the whole segment is the target, but it
   stays in the DOM and keyboard-reachable rather than being display:none. */
.elementor-163 form.cart label.wck-imageselect input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.elementor-163 form.cart label.wck-imageselect img {
	width: 22px !important;
	max-width: 22px !important;
	height: 22px !important;
	object-fit: contain;
	flex: none;
	opacity: 0.55;
	transition: opacity 0.2s ease;
}
.elementor-163 form.cart label.wck-imageselect .caption {
	font-family: "Jost", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--pp-muted);
	transition: color 0.2s ease;
}

/* Selected. `:has()` drives it; the `.is-selected` class is set in JS so a
   browser without :has() still shows which segment is active. */
.elementor-163 form.cart label.wck-imageselect:has(input:checked),
.elementor-163 form.cart label.wck-imageselect.is-selected {
	background: linear-gradient(180deg, #FBF3DF 0%, #F6E7BE 100%);
	box-shadow: inset 0 0 0 1px rgba(217, 166, 46, 0.55);
}
.elementor-163 form.cart label.wck-imageselect:has(input:checked) img,
.elementor-163 form.cart label.wck-imageselect.is-selected img { opacity: 1; }
.elementor-163 form.cart label.wck-imageselect:has(input:checked) .caption,
.elementor-163 form.cart label.wck-imageselect.is-selected .caption {
	color: #5B4206;
	font-weight: 600;
}
.elementor-163 form.cart label.wck-imageselect:has(input:focus-visible) {
	outline: 2px solid var(--pp-purple);
	outline-offset: -2px;
}

/* The "Select Purity" label sits above the strip rather than in a table cell
   beside it. */
.elementor-163 form.cart table.variations > tbody > tr > td.label {
	display: block;
	width: 100%;
	padding: 0 0 6px;
	border: 0;
	background: transparent;
}
.elementor-163 form.cart table.variations > tbody > tr > td.label label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pp-muted);
}
.elementor-163 form.cart table.variations > tbody > tr {
	display: block;
	width: 100%;
}
.elementor-163 form.cart table.variations > tbody > tr > td.value {
	display: block;
	width: 100%;
}
.elementor-163 form.cart .wck-field-tip { display: none; }

@media (max-width: 767px) {
	.elementor-163 form.cart label.wck-imageselect { padding: 10px 4px; gap: 6px; }
	.elementor-163 form.cart label.wck-imageselect img {
		width: 20px !important; max-width: 20px !important; height: 20px !important;
	}
	.elementor-163 form.cart label.wck-imageselect .caption { font-size: 12.5px; }

	/* =================================================================
	   Phone call-to-action: quantity on its own row, then the two
	   buttons sharing the next one half and half.
	   ================================================================= */
	.tjl-pp-cta {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.tjl-pp-cta .quantity {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: start;
	}
	.tjl-pp-cta .single_add_to_cart_button { grid-column: 1; grid-row: 2; width: 100%; }
	.tjl-pp-cta .tjl-pp-buynow { grid-column: 2; grid-row: 2; width: 100%; }
	.tjl-pp-cta .single_add_to_cart_button,
	.tjl-pp-cta .tjl-pp-buynow {
		padding: 13px 10px;
		font-size: 12.5px;
		letter-spacing: 0.02em;
	}
}

@media (max-width: 400px) {
	.tjl-pp-cta { grid-template-columns: 1fr 1fr; }
	.tjl-pp-cta .quantity { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
	.tjl-pp-cta .single_add_to_cart_button { grid-column: 1; grid-row: 2; }
	.tjl-pp-cta .tjl-pp-buynow { grid-column: 2; grid-row: 2; }
	.tjl-pp-cta .quantity input.qty { width: 46px; }
}

/* -------------------------------------------------------------------------
   Purity strip, corrections after measuring the cascade
   -------------------------------------------------------------------------
   Three things fought the block above, and guessing at them would have been
   wrong twice over, so they were read off the computed styles:

   1. WCKalkulator sets `flex-direction: column` on `label.wck-imageselect`,
      which is why the caption sat under the swatch instead of beside it.
      The rule above set display and alignment but never the direction.
   2. The theme styles bare `td` border and background with `!important`, so
      the strip's own frame never painted. These four declarations carry
      `!important` for exactly that reason and no other.
   3. WCK paints the swatch image as a purple chip with a pink ring, which
      reads as a second selected-state next to the real one.
   ---------------------------------------------------------------------- */

.elementor-163 form.cart label.wck-imageselect {
	flex-direction: row;
}

.elementor-163 form.cart table.variations > tbody > tr > td.value:has(.wck-imageselect) {
	border: 1px solid var(--pp-line) !important;
	background: var(--pp-card) !important;
	padding: 0 !important;
}
.elementor-163 form.cart label.wck-imageselect {
	border-right: 1px solid var(--pp-line) !important;
}
.elementor-163 form.cart label.wck-imageselect:last-child {
	border-right: 0 !important;
}

.elementor-163 form.cart label.wck-imageselect img {
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	padding: 0 !important;
}

/* -------------------------------------------------------------------------
   The strip frame lives on our own wrapper
   -------------------------------------------------------------------------
   `product-page.js` moves the segments into `div.tjl-pp-purity` inside the
   cell. Styling the cell itself was a losing game: the theme paints bare
   `td` border and background with !important, so every declaration would
   have had to escalate. A wrapper of our own has no competing rules.
   `flex-direction` still needs !important because WCKalkulator sets column
   on the label itself with !important.
   ---------------------------------------------------------------------- */

.elementor-163 .tjl-pp-purity {
	display: flex;
	width: 100%;
	border: 1px solid var(--pp-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--pp-card);
}
.elementor-163 .tjl-pp-purity > label.wck-imageselect {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0;
	padding: 10px 6px;
	cursor: pointer;
	border: 0;
	border-right: 1px solid var(--pp-line);
	background: transparent;
	transition: background 0.2s ease;
}
.elementor-163 .tjl-pp-purity > label.wck-imageselect:last-child { border-right: 0; }
.elementor-163 .tjl-pp-purity > label.wck-imageselect:hover { background: #FBF7FE; }
.elementor-163 .tjl-pp-purity > label.wck-imageselect:has(input:checked),
.elementor-163 .tjl-pp-purity > label.wck-imageselect.is-selected {
	background: linear-gradient(180deg, #FBF3DF 0%, #F6E7BE 100%);
	box-shadow: inset 0 0 0 1px rgba(217, 166, 46, 0.55);
}

@media (max-width: 767px) {
	.elementor-163 .tjl-pp-purity > label.wck-imageselect { padding: 11px 4px; gap: 6px; }
}

/* The floating call button sits over the copyright line at the foot of the
   page. The cart bubble on the right already had clearance reserved for it in
   tjl-mobile-layout; this reserves the matching strip on the left, and lives
   here rather than there because it is this plugin's button that needs it.
   Only loaded on the pages where that button renders. */


/* =========================================================================
   Purity strip, final form
   -------------------------------------------------------------------------
   Legibility first: the captions were 12.5px in the muted grey used for body
   copy, on a control that is the single most consequential choice in the buy
   box. They are now 13.5px at full ink weight. The chosen segment carries the
   live total, mirrored from WCKalkulator's own output rather than recomputed,
   so the strip can never quote a figure the cart disagrees with.
   ====================================================================== */

.elementor-163 .tjl-pp-purity {
	display: flex;
	width: 100%;
	border: 1px solid var(--pp-line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--pp-card);
	box-shadow: 0 2px 10px -4px rgba(90, 46, 134, 0.14);
}

.elementor-163 .tjl-pp-purity > label.wck-imageselect {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column !important;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin: 0;
	padding: 11px 8px;
	cursor: pointer;
	border: 0;
	border-right: 1px solid var(--pp-line);
	background: transparent;
	transition: background 0.22s ease, box-shadow 0.22s ease;
}
.elementor-163 .tjl-pp-purity > label.wck-imageselect:last-child { border-right: 0; }
.elementor-163 .tjl-pp-purity > label.wck-imageselect:hover { background: #FBF7FE; }

.elementor-163 .tjl-pp-purity .tjl-pp-seg-top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}
.elementor-163 .tjl-pp-purity .caption {
	font-family: "Jost", system-ui, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--pp-ink);
}
.elementor-163 .tjl-pp-purity img {
	width: 22px !important;
	max-width: 22px !important;
	height: 22px !important;
	object-fit: contain;
	flex: none;
	opacity: 0.5;
	filter: grayscale(0.55);
	transition: opacity 0.22s ease, filter 0.22s ease;
}

/* The total, inside the segment it belongs to. It animates in rather than
   appearing, so the eye is told which segment produced the figure. */
.elementor-163 .tjl-pp-purity .tjl-pp-seg-price {
	display: block;
	max-height: 0;
	overflow: hidden;
	font-family: "Prata", Georgia, serif;
	font-size: 15px;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--pp-deep);
	opacity: 0;
	transform: translateY(-3px);
	transition: max-height 0.26s ease, opacity 0.26s ease, transform 0.26s ease;
}
.elementor-163 .tjl-pp-purity > label.has-price .tjl-pp-seg-price {
	max-height: 26px;
	opacity: 1;
	transform: translateY(0);
	margin-top: 3px;
}

/* Selected: a quiet gold wash and a soft inner ring. No drop shadow on a
   segment inside a bordered strip -- it would read as a second border. */
.elementor-163 .tjl-pp-purity > label.wck-imageselect:has(input:checked),
.elementor-163 .tjl-pp-purity > label.wck-imageselect.is-selected {
	background: linear-gradient(180deg, #FDF7E8 0%, #F8EDD2 100%);
	box-shadow: inset 0 0 0 1px rgba(217, 166, 46, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.elementor-163 .tjl-pp-purity > label.is-selected .caption { color: #4A3405; }
.elementor-163 .tjl-pp-purity > label.is-selected img { opacity: 1; filter: none; }
.elementor-163 .tjl-pp-purity > label.wck-imageselect:has(input:focus-visible) {
	outline: 2px solid var(--pp-purple);
	outline-offset: -2px;
}

/* The standalone "Total ₹…" line is now redundant: the figure lives in the
   chosen segment, directly above the breakdown toggle. */
.elementor-163 .wckalkulator-price { display: none !important; }

@media (max-width: 767px) {
	.elementor-163 .tjl-pp-purity > label.wck-imageselect { padding: 10px 6px; }
	.elementor-163 .tjl-pp-purity .caption { font-size: 13px; }
	.elementor-163 .tjl-pp-purity .tjl-pp-seg-price { font-size: 14px; }
	.elementor-163 .tjl-pp-purity img {
		width: 20px !important; max-width: 20px !important; height: 20px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-163 .tjl-pp-purity .tjl-pp-seg-price { transition: none; }
}

/* The floating pair retires at the foot of the document.
   `body.tjl-pp-at-foot` is set by an IntersectionObserver on the copyright
   block. This covers the side cart's bubble as well as our own — they share
   the same corner band, and leaving one behind would just move the collision
   rather than end it. */
.tjl-pp-call,
.xoo-wsc-basket {
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
body.tjl-pp-at-foot .tjl-pp-call,
body.tjl-pp-at-foot .xoo-wsc-basket {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.tjl-pp-call,
	.xoo-wsc-basket { transition: none; }
}