/*
Theme Name: The Picture Child
Template: astra
Author: The Picture
Description: Custom child theme for thepicture.co.il, built on Astra. Managed in Git, deployed via GitHub Actions.
Version: 1.1.0
*/

@font-face {
	font-family: 'Heebo';
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/heebo.woff2') format('woff2');
	unicode-range: U+0590-05FF, U+FB1D-FB4F, U+200C-2010, U+20AA, U+25CC;
}

html { direction: rtl; }

/* Logo image already contains "The Picture" wordmark; the separate text
   site title just overlaps it in the header, especially on mobile. */
.ast-site-title-wrap { display: none; }

/* Header logo renders at 275x275px sitewide by default (confirmed via
   getBoundingClientRect - not an assumption) - a near-full-screen splash
   on mobile before any real content appears. A header logo, not a cover
   image: sized to sit inline in the header bar, matching the 44px
   touch-target rhythm used everywhere else in this project. */
.ast-site-identity,
.site-logo-img,
.custom-logo {
	max-width: 44px !important;
}
.custom-logo { height: auto !important; }
@media (min-width: 769px) {
	.ast-site-identity,
	.site-logo-img,
	.custom-logo {
		max-width: 56px !important;
	}
}

/* One deliberately-designed bright palette, always - not tied to the
   visitor's OS theme. Auto dark-mode previously caused a jarring
   mismatch: the background/accent adapted, but headings didn't (see the
   h1 color fix below), because that color was never actually ours to
   adapt - it was Astra's un-overridden default bleeding through. Rather
   than audit every component for a second theme, commit to one theme. */
:root {
	--tp-bg: #fdfcfa;
	--tp-surface: #ffffff;
	--tp-surface-2: #f2efe9;
	--tp-text: #2c2117;
	--tp-text-dim: #6b5f4f;
	--tp-accent: #7c4f2a;
	--tp-accent-ink: #fdfcfa;
	--tp-line: rgba(44,33,23,0.11);
	--tp-line-strong: rgba(44,33,23,0.22);
}

#tp-home, #tp-home * { box-sizing: border-box; }
#tp-home {
	background: var(--tp-bg);
	color: var(--tp-text);
	font-family: 'Heebo', system-ui, sans-serif;
}
#tp-home h1, #tp-home h2, #tp-home h3 {
	font-family: 'Heebo', sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin: 0;
	/* Astra's own customizer stylesheet sets a global h1-h6 color
	   (var(--ast-global-color-2), a cool slate) with a plain-tag
	   selector; this ID-scoped rule needs to say color explicitly to
	   reliably outrank it - relying on inheritance let Astra's color
	   win, which is exactly the wrong-colored-heading bug this fixes. */
	color: var(--tp-text);
}
#tp-home p { margin: 0; }

/* scroll-reveal entrance - shared by the homepage and the product page (see reveal.js) */
@media (prefers-reduced-motion: no-preference) {
	.tp-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.tp-reveal-in { opacity: 1; transform: translateY(0); }
}
.tp-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding-inline: clamp(20px, 5vw, 56px);
}

/* hero */
#tp-home .tp-hero { padding-block: clamp(48px, 8vw, 96px); }
#tp-home .tp-hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(28px, 5vw, 60px);
	align-items: center;
}
@media (max-width: 900px) { #tp-home .tp-hero-grid { grid-template-columns: 1fr; } }
#tp-home .tp-eyebrow {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: var(--tp-accent);
	font-weight: 700;
	margin-bottom: 16px;
}
#tp-home .tp-hero h1 {
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	line-height: 1.1;
}
#tp-home .tp-hero h1 span { color: var(--tp-accent); }
#tp-home .tp-lead {
	margin-top: 20px;
	font-size: 1.05rem;
	color: var(--tp-text-dim);
	max-width: 46ch;
}
#tp-home .tp-hero-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
@media (max-width: 480px) {
	#tp-home .tp-hero-ctas { flex-direction: column; }
	#tp-home .tp-hero-ctas .tp-btn { text-align: center; }
}
#tp-home .tp-hero-media {
	position: relative;
	z-index: 0;
	border: 1px solid var(--tp-line);
	border-radius: 20px;
	box-shadow: 0 20px 50px -24px rgba(44,33,23,0.25);
}
#tp-home .tp-hero-media::before {
	content: '';
	position: absolute;
	inset: -10%;
	z-index: -1;
	background: color-mix(in srgb, var(--tp-accent) 45%, transparent);
	filter: blur(24px);
}
#tp-home .tp-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 20px; }
@media (max-width: 900px) {
	/* The photo leads on mobile, not the copy - full-bleed to the screen
	   edges for an immersive first impression instead of a small boxed
	   image after a wall of text. */
	#tp-home .tp-hero-media {
		order: -1;
		margin-inline: calc(-1 * clamp(20px, 5vw, 56px));
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
	#tp-home .tp-hero-media img { border-radius: 0; }
	/* The glow (::before, inset:-10%) is sized for the desktop boxed card,
	   where it bleeds into the surrounding padding. Once the image itself
	   goes full-bleed to the screen edges here, that same glow extends
	   past the viewport and causes horizontal scroll - it has nothing to
	   bleed into anymore, so drop it rather than resize it. */
	#tp-home .tp-hero-media::before { display: none; }
}

/* trust bar */
/* Lighter than a heavy boxed strip - a thin divider is enough separation
   from the hero without competing with it for attention. */
#tp-home .tp-trust { padding-block: 24px; border-top: 1px solid var(--tp-line); }
.tp-trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.tp-trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--tp-text);
}
.tp-trust-icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	color: var(--tp-accent);
}
.tp-trust-icon svg { width: 100%; height: 100%; }
.tp-trust-item-link { text-decoration: none; }
.tp-trust-item-link:hover,
.tp-trust-item-link:focus { color: var(--tp-accent); }
.tp-trust-item-link:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
@media (max-width: 760px) {
	.tp-trust-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* sticky mobile CTA - shown only once the real hero CTA scrolls out of
   view (js/reveal.js), not unconditionally - previously it sat directly
   under the inline hero button on short viewports, visibly duplicating
   the exact same button. */
#tp-home .tp-sticky-cta { display: none; }
@media (max-width: 760px) {
	#tp-home .tp-sticky-cta {
		display: block;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 40;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--tp-surface);
		border-top: 1px solid var(--tp-line);
		box-shadow: 0 -8px 24px -12px rgba(44,33,23,0.25);
		transform: translateY(100%);
		transition: transform 0.25s ease;
	}
	#tp-home .tp-sticky-cta.tp-sticky-cta-visible { transform: translateY(0); }
	#tp-home .tp-sticky-cta .tp-btn { display: flex; width: 100%; }
	#tp-home { padding-bottom: 68px; }
	.ast-scroll-top-icon { bottom: 78px !important; }
}

/* buttons - shared by the homepage and the product page */
.tp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: 999px;
	padding: 12px 26px;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
}
.tp-btn-solid { background: var(--tp-accent); color: var(--tp-accent-ink); }
.tp-btn-ghost { border: 1px solid var(--tp-line-strong); color: var(--tp-text); }
.tp-btn-ghost:hover { border-color: var(--tp-accent); color: var(--tp-accent); }
.tp-btn-invert { background: var(--tp-accent-ink); color: var(--tp-accent); }
/* A secondary action next to a primary .tp-btn-solid should read as
   secondary - plain text, not a second same-weight pill. Two equal
   buttons side by side reads as indecisive, not premium. */
.tp-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--tp-text-dim);
	text-decoration: none;
}
.tp-link:hover { color: var(--tp-accent); }

/* section heads - shared by the homepage and the product page */
.tp-section-head { margin-bottom: clamp(24px, 4vw, 40px); }
.tp-section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-family: 'Heebo', sans-serif; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; margin: 0; color: var(--tp-text); }
.tp-section-note { color: var(--tp-text-dim); font-size: 0.95rem; margin-top: 6px; }
#tp-home section { padding-block: clamp(36px, 6vw, 64px); border-top: 1px solid var(--tp-line); }
#tp-home .tp-hero { border-top: none; }

/* "why us" - compact 3-item reassurance section replacing the old
   category grid (redundant now that the header nav, "כל המוצרים", and
   the featured-products section below all already cover product
   discovery). Deliberately small cards, not another product/marketing
   grid - the human-review item gets a filled accent icon so it reads as
   the differentiator, the other two stay outline-only. */
.tp-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .tp-why-grid { grid-template-columns: 1fr; } }
.tp-why-item {
	padding: 22px;
	border: 1px solid var(--tp-line);
	border-radius: 16px;
	background: var(--tp-surface);
}
.tp-why-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--tp-line-strong);
	color: var(--tp-accent);
	margin-bottom: 14px;
}
.tp-why-icon svg { width: 19px; height: 19px; }
.tp-why-item h3 { font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--tp-text); }
.tp-why-item p { color: var(--tp-text-dim); font-size: 0.9rem; margin: 0; }
.tp-why-item .tp-btn { margin-top: 14px; padding: 8px 18px; font-size: 0.85rem; }
.tp-why-featured { border-color: var(--tp-line-strong); }
.tp-why-featured .tp-why-icon { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-accent-ink); }
/* how it works - shared by the homepage and the product page */
.tp-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tp-steps::before {
	content: '';
	position: absolute;
	top: 23px;
	right: calc(100% / 6);
	left: calc(100% / 6);
	height: 1px;
	background: var(--tp-line-strong);
}
@media (max-width: 760px) {
	.tp-steps { grid-template-columns: 1fr; }
	.tp-steps::before { display: none; }
}
.tp-step-num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--tp-bg);
	border: 1px solid var(--tp-line-strong);
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--tp-accent);
}
.tp-step h3 { font-size: 1.1rem; margin-bottom: 8px; font-family: 'Heebo', sans-serif; font-weight: 800; letter-spacing: -0.01em; color: var(--tp-text); }
.tp-step p { color: var(--tp-text-dim); font-size: 0.95rem; }

/* featured products (WooCommerce shortcode wrapper) */
#tp-home .tp-featured ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 900px) { #tp-home .tp-featured ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { #tp-home .tp-featured ul.products { grid-template-columns: 1fr; } }
#tp-home .tp-featured ul.products li.product {
	border: 1px solid var(--tp-line);
	border-radius: 14px;
	padding: 16px;
	background: var(--tp-surface);
	overflow: hidden;
}
#tp-home .tp-featured ul.products li.product img { border-radius: 8px; }
@media (prefers-reduced-motion: no-preference) {
	#tp-home .tp-featured ul.products li.product { transition: transform 0.25s ease, box-shadow 0.25s ease; }
	#tp-home .tp-featured ul.products li.product img { transition: transform 0.35s ease; }
	#tp-home .tp-featured ul.products li.product:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 32px -20px rgba(44,33,23,0.3);
	}
	#tp-home .tp-featured ul.products li.product:hover img { transform: scale(1.04); }
}
/* Astra's default category-label gray (#807a74 on white = 4.23:1) falls just
   short of the WCAG AA 4.5:1 minimum for normal text - our own dim-text
   color passes comfortably (6:1+) without changing the visual weight. */
.ast-woo-product-category { color: var(--tp-text-dim); }
/* Astra's woocommerce-grid.css sets opacity:0.6 here at (0,4,2) specificity,
   and a separate customizer-generated rule sets color:var(--ast-global-color-3)
   at similar specificity - both silently beat the plain-class rule above.
   Match the selector shape plus a leading type selector to reliably win. */
body.woocommerce-js ul.products li.product .ast-woo-product-category,
body.woocommerce-page ul.products li.product .ast-woo-product-category {
	color: var(--tp-text-dim);
	opacity: 1;
}

/* b2b */
#tp-home .tp-b2b-band {
	background: var(--tp-accent);
	color: var(--tp-accent-ink);
	border-radius: 22px;
	padding: clamp(32px, 6vw, 52px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}
#tp-home .tp-b2b-band h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); max-width: 24ch; }
#tp-home .tp-b2b-band p { margin-top: 10px; opacity: 0.85; max-width: 42ch; }
@media (max-width: 560px) {
	#tp-home .tp-b2b-band { flex-direction: column; align-items: flex-start; text-align: start; }
	#tp-home .tp-b2b-band .tp-btn { align-self: stretch; text-align: center; }
}

/* faq accordion - shared by the homepage and the product page */
.tp-faq-list { display: grid; gap: 12px; max-width: 760px; }
.tp-faq-item { border: 1px solid var(--tp-line); border-radius: 14px; padding: 16px 20px; }
.tp-faq-item summary { cursor: pointer; font-weight: 700; list-style: none; color: var(--tp-text); }
.tp-faq-item summary::-webkit-details-marker { display: none; }
.tp-faq-item p { margin-top: 10px; color: var(--tp-text-dim); font-size: 0.92rem; }

#tp-home :focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
body.single-product :focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }

/* =========================================================
   Product page (single-product) — reusable across all products.
   ========================================================= */
body.single-product { background: var(--tp-bg); }
/* Astra's default breadcrumb gray (#777777 on our bg = 4.36:1) falls just
   short of the WCAG AA 4.5:1 minimum for normal text. Astra's own
   woocommerce-grid.css sets this at (0,2,0)/(0,2,1) specificity, so a plain
   .woocommerce-breadcrumb rule silently loses - match its selector shape
   plus a leading type selector to reliably win regardless of load order. */
.woocommerce-breadcrumb { color: var(--tp-text-dim); }
body.woocommerce-js .woocommerce-breadcrumb,
body.woocommerce-js .woocommerce-breadcrumb a { color: var(--tp-text-dim); }
body.single-product .summary { font-family: 'Heebo', system-ui, sans-serif; }
body.single-product .summary .product_title {
	font-family: 'Heebo', sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	color: var(--tp-text);
}
body.single-product .product_meta { display: none; }
body.single-product p.price,
body.single-product p.price .woocommerce-Price-amount {
	color: var(--tp-accent);
	font-weight: 800;
	font-size: 1.4rem;
}
body.single-product .woocommerce-product-details__short-description {
	color: var(--tp-text-dim);
	line-height: 1.6;
	margin-block: 16px;
}

/* variation form (native WooCommerce size/attribute switching) */
body.single-product table.variations { width: 100%; margin-block: 20px; border: none; }
body.single-product table.variations tr { display: block; margin-bottom: 14px; }
body.single-product table.variations th.label { display: block; font-weight: 700; margin-bottom: 8px; text-align: start; }
body.single-product table.variations td.value { display: block; }
body.single-product table.variations select {
	width: 100%;
	max-width: 320px;
	min-height: 48px;
	padding: 10px 16px;
	border-radius: 12px;
	border: 1px solid var(--tp-line-strong);
	background: var(--tp-surface);
	color: var(--tp-text);
	font-family: 'Heebo', sans-serif;
	font-size: 1rem;
}
body.single-product .reset_variations { display: inline-block; margin-top: 8px; font-size: 0.85rem; color: var(--tp-text-dim); }
/* Astra's woocommerce-grid.css targets this at (0,4,2) specificity with
   color:inherit + opacity:0.6, which silently wins over the rule above and
   halves contrast regardless of color. Match its selector shape to win, and
   set opacity:1 since inherited color can't fix a transparency problem. */
body.single-product.woocommerce-js div.product form.cart .reset_variations {
	color: var(--tp-text-dim);
	opacity: 1;
}
body.single-product .woocommerce-variation-price .woocommerce-Price-amount { color: var(--tp-accent); font-weight: 800; }

/* add to cart button */
body.single-product .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 32px;
	border-radius: 999px;
	background: var(--tp-accent);
	color: var(--tp-accent-ink);
	font-weight: 700;
	font-size: 1rem;
	border: none;
	cursor: pointer;
}
body.single-product .single_add_to_cart_button:disabled { opacity: 0.6; cursor: not-allowed; }
/* Before a variation is chosen, WooCommerce only toggles a "disabled" CSS
   class (no disabled/aria-disabled attribute), so the WCAG exemption for
   inactive controls doesn't apply - it's a genuinely active, focusable
   button. Astra's own disabled-button rules render it as near-white text on
   a leftover default light blue (~2.2:1) at (0,5,1)/(0,4,1) specificity;
   match that shape to reliably override with a contrast-safe, on-brand
   neutral state instead. */
body.single-product.woocommerce button.button.alt.disabled.wc-variation-selection-needed,
body.single-product.woocommerce-js button.button.alt.disabled {
	background: var(--tp-surface-2);
	color: var(--tp-text-dim);
	/* Astra's woocommerce-grid.css separately sets opacity:0.5 on
	   .woocommerce-js button.button.disabled - a different property, so it
	   doesn't lose to the higher-specificity rule above; it must be
	   overridden explicitly or it dilutes the contrast fix regardless. */
	opacity: 1;
}

/* product gallery */
body.single-product .woocommerce-product-gallery {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--tp-line);
	box-shadow: 0 20px 50px -28px rgba(44,33,23,0.25);
}

/* Two-column layout, taken over from Astra's float-based default: the
   design editor (gallery + .tp-editor, an unfloated sibling between two
   floats) can grow much taller than the summary column, and unfloated
   content between floats doesn't reliably clear - causing later sections
   to overlap the shorter summary column. Grid sizes to the tallest column
   correctly regardless. */
body.single-product .product.type-product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	align-items: start;
}
/* Grid items default to min-width:auto, which lets an image's intrinsic
   size overflow its track instead of shrinking - min-width:0 on every
   item is what actually makes the columns responsive. */
body.single-product .product.type-product > .woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1;
	float: none;
	min-width: 0;
}
body.single-product .product.type-product > .tp-editor {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
}
body.single-product .product.type-product > .summary.entry-summary {
	grid-column: 2;
	grid-row: 1 / span 2;
	float: none;
	min-width: 0;
}
@media (max-width: 900px) {
	body.single-product .product.type-product { grid-template-columns: 1fr; }
	body.single-product .product.type-product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
	body.single-product .product.type-product > .tp-editor { grid-column: 1; grid-row: 2; }
	body.single-product .product.type-product > .summary.entry-summary { grid-column: 1; grid-row: 3 / span 1; }
}

/* =========================================================
   Product page — sections around the design editor
   ========================================================= */
/* Explicit full-span placement is required, not just a nice-to-have: these
   sections render as direct children of .product.type-product (WooCommerce
   hooks fire inside that wrapper), which is itself the 2-column grid above
   (gallery/editor in column 1, summary in column 2). Without this, a grid
   item with no explicit placement auto-flows into whichever column is next
   in sequence - with exactly 2 such sections on the page (benefits + FAQ)
   they auto-place side by side in column 1/column 2 of the same row
   instead of stacking, which is invisible with an odd number of sections
   but breaks the moment the count is even (as it is now that "how it
   works" was removed). */
body.single-product .tp-pp-section {
	grid-column: 1 / -1;
	padding-block: clamp(36px, 6vw, 64px);
	border-top: 1px solid var(--tp-line);
}

/* trust bar + shipping note, directly under add-to-cart */
.tp-pp-trust {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--tp-line);
	max-width: 420px;
}
.tp-pp-shipping-note {
	margin-top: 10px;
	font-size: 0.82rem;
	color: var(--tp-text-dim);
}
.tp-pp-shipping-note a { color: var(--tp-accent); text-decoration: underline; margin-inline-start: 4px; }

/* benefits - capped at 3 per product (see tp_product_benefits()) */
.tp-pp-benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 700px) { .tp-pp-benefits-grid { grid-template-columns: 1fr; } }
.tp-pp-benefit-icon {
	display: block;
	width: 34px;
	height: 34px;
	margin-bottom: 14px;
	color: var(--tp-accent);
}
.tp-pp-benefit-icon svg { width: 100%; height: 100%; }
.tp-pp-benefit h3 {
	font-size: 1.05rem;
	margin-bottom: 6px;
	font-family: 'Heebo', sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--tp-text);
}
.tp-pp-benefit p { color: var(--tp-text-dim); font-size: 0.92rem; margin: 0; }

/* sticky mobile add-to-cart */
.tp-pp-sticky-cta { display: none; }
@media (max-width: 760px) {
	.tp-pp-sticky-cta {
		display: block;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 40;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--tp-surface);
		border-top: 1px solid var(--tp-line);
		box-shadow: 0 -8px 24px -12px rgba(44,33,23,0.25);
		transform: translateY(100%);
		transition: transform 0.25s ease;
	}
	.tp-pp-sticky-cta.tp-pp-sticky-cta-visible { transform: translateY(0); }
	.tp-pp-sticky-cta .tp-btn { display: flex; width: 100%; }
}

/* Tighter section spacing on small screens only - presentation, not
   content: nothing here removes text or touches the editor above. Scoped
   to body.single-product specifically so the homepage (which reuses the
   same .tp-faq-item/.tp-steps classes) is completely unaffected. */
@media (max-width: 480px) {
	body.single-product .tp-pp-section { padding-block: 28px; }
	body.single-product .tp-pp-benefits-grid { gap: 16px; }
	body.single-product .tp-faq-list { gap: 8px; }
	body.single-product .tp-faq-item { padding: 12px 16px; }
	body.single-product .tp-steps { gap: 20px; }
}

/* reviews tab (native WooCommerce) - light touch, matches the rest of the page */
body.single-product .woocommerce-tabs ul.tabs { border: none; padding: 0; margin: 0 0 20px; display: flex; gap: 8px; }
body.single-product .woocommerce-tabs ul.tabs li { border: 1px solid var(--tp-line-strong); border-radius: 999px; background: var(--tp-surface); margin: 0; padding: 0; }
body.single-product .woocommerce-tabs ul.tabs li a { padding: 10px 20px; font-weight: 700; color: var(--tp-text-dim); }
body.single-product .woocommerce-tabs ul.tabs li.active { background: var(--tp-accent); border-color: var(--tp-accent); }
body.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--tp-accent-ink); }
body.single-product .woocommerce-tabs .panel { border: none; padding: 0; }
body.single-product .woocommerce-Reviews #review_form_wrapper { max-width: 640px; }

/* =========================================================
   Design editor (Fabric.js canvas + toolbar)
   ========================================================= */
.tp-editor { margin-top: 16px; max-width: 480px; }
.tp-editor-canvas-wrap {
	position: relative;
	display: inline-block;
	border-radius: 16px;
	overflow: hidden;
	background: var(--tp-surface-2);
	box-shadow: 0 20px 40px -26px rgba(44,33,23,0.3);
}
.tp-editor-canvas-wrap canvas { display: block; touch-action: none; }
.tp-editor-empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	border: 1.5px dashed var(--tp-line-strong);
	margin: 12px;
	border-radius: 12px;
	background: var(--tp-surface-2);
}
@media (prefers-reduced-motion: no-preference) {
	.tp-editor-empty { transition: border-color 0.2s ease, background 0.2s ease; }
}
.tp-editor-empty:hover,
.tp-editor-empty.tp-upload-dropzone-active {
	border-color: var(--tp-accent);
	background: color-mix(in srgb, var(--tp-accent) 8%, var(--tp-surface-2));
}
.tp-editor-empty .tp-upload-icon { width: 32px; height: 32px; color: var(--tp-accent); }
.tp-editor-empty .tp-upload-icon svg { width: 100%; height: 100%; }
.tp-editor-empty strong { font-size: 0.95rem; color: var(--tp-text); }
.tp-editor-empty span { font-size: 0.85rem; color: var(--tp-text-dim); }

/* Garment mockup (T-shirt): a live CSS layer behind the editing canvas -
   pure background art, never a Fabric canvas object, so it can never be
   captured by the production export (renderFlatten() only rasterizes the
   canvas's own pixel buffer). The canvas-wrap sits inside a percentage-
   positioned "print zone" matching the chest area of the shirt art, so it
   scales together with the shirt at any viewport width. */
.tp-editor-garment-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1000 / 800;
	border-radius: 16px;
	overflow: hidden;
	background: var(--tp-surface-2);
}
.tp-garment-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}
.tp-garment-img[hidden] { display: none; }
.tp-garment-print-zone {
	/* Sized to a real 20x30cm print at this garment's actual photographed
	   scale (measured against the shirt's own torso width in the source
	   photo), not an arbitrary box - width/height are independently
	   percentaged since the 1000x800 stage itself isn't square, so a
	   literal 2:3 (20x30) print needs different left:right vs top:bottom
	   percentages to render as true 2:3 on screen. A portrait design
	   exactly fills this box edge-to-edge (zero slack); landscape (30x20)
	   is genuinely shorter, so it centers with a little air above/below -
	   that's the real product, not a layout bug. */
	position: absolute;
	left: 36.5%;
	top: 17%;
	width: 27%;
	height: 50.6%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tp-editor-garment-stage .tp-editor-canvas-wrap {
	max-width: 100%;
	max-height: 100%;
	background: transparent;
	box-shadow: none;
	border-radius: 3px;
}
.tp-editor-garment-stage .tp-editor-empty {
	background: rgba(255,255,255,0.6);
}
.tp-editor-garment-stage .tp-editor-empty:hover,
.tp-editor-garment-stage .tp-editor-empty.tp-upload-dropzone-active {
	background: color-mix(in srgb, var(--tp-accent) 10%, rgba(255,255,255,0.7));
}

.tp-editor-toolbar[hidden],
.tp-editor-text-panel[hidden],
.tp-editor-empty[hidden] { display: none; }
.tp-editor-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--tp-surface-2);
}
.tp-editor-zoom { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--tp-text-dim); flex: 1 1 140px; }
.tp-editor-zoom input[type="range"] { flex: 1; accent-color: var(--tp-accent); }
.tp-editor-bg-color { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--tp-text-dim); }
.tp-editor-bg-color input[type="color"] { min-height: 36px; width: 44px; padding: 2px; border-radius: 8px; border: 1px solid var(--tp-line-strong); cursor: pointer; }
.tp-editor-btn {
	min-height: 44px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--tp-line-strong);
	background: var(--tp-surface);
	color: var(--tp-text);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
}
.tp-editor-btn:hover,
.tp-editor-btn:focus {
	border-color: var(--tp-accent);
	color: var(--tp-accent);
	background: var(--tp-surface);
}
.tp-editor-btn-danger:hover,
.tp-editor-btn-danger:focus { border-color: #b3261e; color: #b3261e; background: var(--tp-surface); }

.tp-editor-side-switch[hidden] { display: none; }
.tp-editor-side-switch {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
	padding: 4px;
	border-radius: 999px;
	background: var(--tp-surface-2);
}
.tp-editor-side-btn {
	flex: 1;
	min-height: 44px;
	padding: 8px 16px;
	border-radius: 999px;
	border: none;
	background: transparent;
	color: var(--tp-text-dim);
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
}
.tp-editor-side-btn:hover,
.tp-editor-side-btn:focus { color: var(--tp-text); }
.tp-editor-side-btn.tp-editor-side-btn-active,
.tp-editor-side-btn.tp-editor-side-btn-active:hover,
.tp-editor-side-btn.tp-editor-side-btn-active:focus {
	background: var(--tp-accent);
	color: var(--tp-accent-ink);
}

.tp-editor-orientation[hidden] { display: none; }
.tp-editor-orientation { display: flex; gap: 6px; }
.tp-editor-orientation-btn.tp-editor-btn-active,
.tp-editor-orientation-btn.tp-editor-btn-active:hover,
.tp-editor-orientation-btn.tp-editor-btn-active:focus {
	background: var(--tp-accent);
	border-color: var(--tp-accent);
	color: var(--tp-accent-ink);
}

/* Floating text-editor panel - a focused editing surface rather than a
   permanent block in the page flow, so the canvas stays the visual center
   of the page both while closed (nothing pinned/reserved for it) and while
   open (it sits beside or below the canvas, never over it). JS picks one of
   two presentation modes at open time (and on resize) based on a REAL
   measurement of the space to the outer side of the canvas - see
   textPanelHasSideRoom() in product-editor.js - not a fixed breakpoint,
   since plenty of ordinary desktop widths don't actually have room for a
   side drawer once the two-column product layout is accounted for. */
.tp-editor-text-panel[hidden] { display: none; }
.tp-editor-text-panel {
	position: fixed;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border-radius: 16px;
	border: 1px solid var(--tp-line);
	background: var(--tp-surface);
	box-shadow: 0 24px 48px -20px rgba(44,33,23,0.35);
}
@media (prefers-reduced-motion: no-preference) {
	.tp-editor-text-panel { transition: transform 0.2s ease, opacity 0.2s ease; }
}
.tp-editor-text-panel.tp-editor-text-panel-drawer {
	width: 300px;
	/* Leaves clearance at the bottom so a tall viewport never lets the
	   panel's own box reach down into the accessibility toggle's corner
	   (.tp-a11y, bottom:16px on desktop) - real content here is only ~6
	   compact fields, so this is headroom, not a scroll-inducing cap. */
	max-height: calc(100vh - 96px);
	transform: translateX(16px);
	opacity: 0;
}
.tp-editor-text-panel.tp-editor-text-panel-sheet {
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	width: auto;
	max-height: 75vh;
	border-radius: 20px 20px 0 0;
	padding-bottom: max(16px, env(safe-area-inset-bottom));
	transform: translateY(100%);
	opacity: 1;
}
@media (max-width: 760px) {
	/* Same clearance the accessibility toggle already uses (see
	   .tp-a11y bottom:78px) to sit above .tp-pp-sticky-cta, the fixed mobile
	   Add to Cart bar that's active at this exact breakpoint - the sheet
	   must never cover it. */
	.tp-editor-text-panel.tp-editor-text-panel-sheet { bottom: 78px; }
}
.tp-editor-text-panel.tp-editor-text-panel-open { transform: translateX(0) translateY(0); opacity: 1; }

.tp-editor-text-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-shrink: 0;
}
.tp-editor-text-panel-title { font-size: 0.95rem; font-weight: 800; color: var(--tp-text); }
.tp-editor-text-panel-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	border: none;
	background: var(--tp-surface-2);
	color: var(--tp-text-dim);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}
.tp-editor-text-panel-close:hover,
.tp-editor-text-panel-close:focus {
	color: var(--tp-accent);
	background: color-mix(in srgb, var(--tp-accent) 10%, var(--tp-surface-2));
}

.tp-editor-text-panel-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	overflow-y: auto;
}
.tp-editor-text-panel-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--tp-text-dim); }
.tp-editor-text-panel-fields input,
.tp-editor-text-panel-fields select {
	min-height: 40px;
	padding: 6px 10px;
	border-radius: 8px;
	border: 1px solid var(--tp-line-strong);
	background: var(--tp-surface);
	color: var(--tp-text);
	font-family: 'Heebo', sans-serif;
}
.tp-editor-text-panel-fields input[type="color"] { padding: 2px; cursor: pointer; }
.tp-editor-text-panel-fields .tp-editor-text-content,
.tp-editor-text-panel-fields .tp-editor-text-font,
.tp-editor-text-panel-fields .tp-editor-text-presets,
.tp-editor-text-panel-fields .tp-editor-btn-danger { grid-column: 1 / -1; }
.tp-editor-text-panel-fields .tp-editor-text-content input {
	min-height: 46px;
	font-size: 1rem;
	padding: 8px 12px;
}
.tp-editor-text-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.tp-editor-text-preset {
	min-height: 36px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--tp-line-strong);
	background: var(--tp-surface);
	color: var(--tp-text);
	font-family: 'Heebo', sans-serif;
	font-size: 0.8rem;
	cursor: pointer;
}
.tp-editor-text-preset:hover,
.tp-editor-text-preset:focus-visible {
	border-color: var(--tp-accent);
	color: var(--tp-accent);
}

.tp-upload-status { margin-top: 8px; font-size: 0.85rem; color: var(--tp-accent); min-height: 1.2em; }
.tp-upload-status-error { color: #b3261e; }

.tp-mockup-preview[hidden] { display: none; }
.tp-mockup-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 30px 14px 14px;
	border-radius: 12px;
	background: radial-gradient(ellipse at 50% 30%, var(--tp-surface) 0%, var(--tp-surface-2) 100%);
}
.tp-mockup-stage {
	position: relative;
	width: 220px;
	height: 250px;
	perspective: 1100px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tp-mockup-mug3d {
	position: relative;
	width: 220px;
	height: 216px;
	transform-style: preserve-3d;
	cursor: grab;
	touch-action: pan-y;
}
.tp-mockup-mug3d.tp-mockup-dragging { cursor: grabbing; }
.tp-mockup-mug3d-cylinder {
	position: absolute;
	top: 26px;
	left: 50%;
	width: 152px;
	height: 178px;
	margin-left: -76px;
	transform-style: preserve-3d;
}
.tp-mockup-strip {
	position: absolute;
	top: 0;
	height: 100%;
	background-repeat: no-repeat;
	backface-visibility: hidden;
}
.tp-mockup-mug3d-lid {
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%) translateZ(30px);
	width: 118px;
	height: 26px;
	border-radius: 10px 10px 4px 4px;
	background: linear-gradient(180deg, #453a2d 0%, #241c14 100%);
	box-shadow: 0 3px 5px rgba(0,0,0,.28);
	z-index: 2;
}
.tp-mockup-mug3d-handle {
	position: absolute;
	top: 96px;
	right: 6px;
	width: 40px;
	height: 86px;
	border: 9px solid #2a2015;
	border-left-color: transparent;
	border-radius: 50%;
	filter: drop-shadow(2px 3px 3px rgba(0,0,0,.25));
	z-index: 2;
}
.tp-mockup-mug3d-no-lid .tp-mockup-mug3d-cylinder { top: 10px; }
.tp-mockup-mug3d-no-lid .tp-mockup-mug3d-handle { top: 80px; }
.tp-mockup-mug3d-rim {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%) translateZ(2px);
	width: 148px;
	height: 16px;
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(0,0,0,.1) 55%, rgba(0,0,0,.22) 100%);
	box-shadow: inset 0 1px 2px rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.2);
	z-index: 2;
}
.tp-mockup-mug3d-shadow {
	width: 148px;
	height: 20px;
	margin-top: -4px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 72%);
}
.tp-mockup-caption { font-size: 0.78rem; color: var(--tp-text-dim); text-align: center; }

.tp-size-guide[hidden] { display: none; }
.tp-size-guide {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--tp-surface-2);
}
.tp-size-guide-visual { flex-shrink: 0; color: var(--tp-text-dim); line-height: 0; }
.tp-size-guide-caption { font-size: 0.8rem; color: var(--tp-text-dim); line-height: 1.4; }

.tp-editor-edge-note[hidden] { display: none; }
.tp-editor-edge-note {
	margin-top: 10px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 0.82rem;
	line-height: 1.45;
	background: color-mix(in srgb, var(--tp-accent) 8%, var(--tp-surface));
	border: 1px solid color-mix(in srgb, var(--tp-accent) 20%, transparent);
	color: var(--tp-text-dim);
}

.tp-editor-legend[hidden] { display: none; }
.tp-editor-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 10px;
	font-size: 0.78rem;
	color: var(--tp-text-dim);
}
.tp-editor-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.tp-editor-legend-swatch { display: inline-block; width: 18px; height: 0; border-top: 1px solid; }
.tp-editor-legend-swatch-trim { border-top-style: solid; border-top-color: #2c2117; }
.tp-editor-legend-swatch-safe { border-top-style: dashed; border-top-color: #7c4f2a; border-top-width: 2px; }

.tp-editor-safe-area-note[hidden] { display: none; }
.tp-editor-safe-area-note {
	margin-top: 4px;
	font-size: 0.78rem;
	color: var(--tp-text-dim);
}

.tp-editor-quality-warning[hidden] { display: none; }
.tp-editor-quality-warning {
	margin-top: 10px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 0.82rem;
	line-height: 1.4;
}
.tp-editor-quality-warning.tp-editor-quality-bad {
	background: color-mix(in srgb, #b3261e 10%, var(--tp-surface));
	color: #b3261e;
	border: 1px solid color-mix(in srgb, #b3261e 30%, transparent);
}
.tp-editor-quality-warning.tp-editor-quality-acceptable {
	background: color-mix(in srgb, #b8860b 12%, var(--tp-surface));
	color: #8a6400;
	border: 1px solid color-mix(in srgb, #b8860b 30%, transparent);
}
.tp-editor-quality-warning.tp-editor-quality-good {
	background: color-mix(in srgb, #2e7d32 10%, var(--tp-surface));
	color: #2e7d32;
	border: 1px solid color-mix(in srgb, #2e7d32 30%, transparent);
}

.tp-editor-confirm-modal[hidden] { display: none; }
.tp-editor-confirm-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 15, 10, 0.55);
}
.tp-editor-confirm-box {
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--tp-surface);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
}
.tp-editor-confirm-box h3 { margin: 0 0 12px; font-size: 1.05rem; color: var(--tp-text); }
.tp-editor-confirm-preview {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	border: 1px solid var(--tp-line);
}
.tp-editor-confirm-sides { display: flex; gap: 10px; }
.tp-editor-confirm-side { flex: 1; min-width: 0; }
.tp-editor-confirm-side .tp-editor-confirm-preview { margin-top: 6px; }
.tp-editor-confirm-side-label { font-size: 0.78rem; font-weight: 700; color: var(--tp-text-dim); }
.tp-editor-confirm-actions { display: flex; gap: 10px; margin-top: 16px; }
.tp-editor-confirm-actions .tp-editor-btn { flex: 1; }
.tp-editor-btn-primary {
	background: var(--tp-accent);
	border-color: var(--tp-accent);
	color: var(--tp-accent-ink);
}
.tp-editor-btn-primary:hover,
.tp-editor-btn-primary:focus {
	background: var(--tp-accent);
	border-color: var(--tp-accent);
	color: var(--tp-accent-ink);
}

@media (max-width: 480px) {
	.tp-editor-text-panel { grid-template-columns: 1fr; }
}

/* =========================================================
   Bulk photo-prints editor (many independent print items)
   ========================================================= */
.tp-bulk-editor { margin-top: 16px; max-width: 720px; }
.tp-bulk-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 32px 16px;
	cursor: pointer;
	border: 1.5px dashed var(--tp-line-strong);
	border-radius: 14px;
	background: var(--tp-surface-2);
}
@media (prefers-reduced-motion: no-preference) {
	.tp-bulk-dropzone { transition: border-color 0.2s ease, background 0.2s ease; }
}
.tp-bulk-dropzone:hover,
.tp-bulk-dropzone.tp-upload-dropzone-active {
	border-color: var(--tp-accent);
	background: color-mix(in srgb, var(--tp-accent) 8%, var(--tp-surface-2));
}
.tp-bulk-dropzone .tp-upload-icon { width: 32px; height: 32px; color: var(--tp-accent); }
.tp-bulk-dropzone .tp-upload-icon svg { width: 100%; height: 100%; }
.tp-bulk-dropzone strong { font-size: 0.95rem; color: var(--tp-text); }
.tp-bulk-dropzone span { font-size: 0.85rem; color: var(--tp-text-dim); text-align: center; }

.tp-bulk-grid[hidden] { display: none; }
.tp-bulk-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
	margin-top: 14px;
}
.tp-bulk-tile {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	background: var(--tp-surface-2);
	border: 1px solid var(--tp-line);
	/* Aspect ratio is set inline per tile (js/photo-prints-editor.js) to match
	   the real print ratio - so switching sizes visibly reshapes every tile,
	   not just what's letterboxed inside a fixed square. */
}
.tp-bulk-tile img { width: 100%; height: 100%; object-fit: cover; background: var(--tp-surface-2); display: block; }
.tp-bulk-tile:hover { border-color: var(--tp-accent); }
/* Transparent full-cover button so the tile itself can stay a plain,
   non-interactive container (the remove button below must not be nested
   inside another interactive/ARIA-button element) while looking and
   clicking exactly like the old clickable tile did. */
.tp-bulk-tile-edit {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}
.tp-bulk-tile-edit:focus-visible {
	outline: 2px solid var(--tp-accent);
	outline-offset: -2px;
}
.tp-bulk-tile-remove {
	position: absolute;
	top: 6px;
	inset-inline-start: 6px;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: rgba(20,15,10,0.6);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tp-bulk-tile-remove:hover { background: #b3261e; }
.tp-bulk-tile-quality {
	position: absolute;
	bottom: 6px;
	inset-inline-end: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--tp-surface);
}
.tp-bulk-tile-quality-good { background: #2e7d32; }
.tp-bulk-tile-quality-acceptable { background: #b8860b; }
.tp-bulk-tile-quality-bad { background: #b3261e; }
.tp-bulk-tile-mode {
	position: absolute;
	bottom: 6px;
	inset-inline-start: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(20,15,10,0.6);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
}
/* Upload-in-progress overlay: a quiet scrim + spinner, not a big loud
   banner - one photo taking its turn in the queue shouldn't visually
   compete with the rest of an already-uploaded 100-photo grid. */
.tp-bulk-tile-busy {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(20,15,10,0.35);
	pointer-events: none;
}
.tp-bulk-tile-busy-active .tp-bulk-tile-busy { display: flex; }
.tp-bulk-tile-busy::after {
	content: '';
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2.5px solid rgba(255,255,255,0.35);
	border-top-color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
	.tp-bulk-tile-busy::after { animation: tp-bulk-spin 0.8s linear infinite; }
}
@keyframes tp-bulk-spin { to { transform: rotate(360deg); } }
/* Failed-upload overlay - a specific, actionable state (retry or remove),
   not just a silently-stuck tile the customer has no way to resolve. */
.tp-bulk-tile-error {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px;
	text-align: center;
	background: rgba(179,38,30,0.82);
	color: #fff;
}
.tp-bulk-tile-error-active .tp-bulk-tile-error { display: flex; z-index: 1; }
/* Otherwise the transparent full-cover edit button (also absolutely
   positioned, later in DOM order) would paint on top and swallow clicks
   meant for the retry button underneath it. */
.tp-bulk-tile-error-active .tp-bulk-tile-edit { display: none; }
.tp-bulk-tile-error span { font-size: 0.75rem; font-weight: 700; }
.tp-bulk-tile-retry {
	padding: 5px 12px;
	border: 1px solid rgba(255,255,255,0.7);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
}
.tp-bulk-tile-retry:hover,
.tp-bulk-tile-retry:focus { background: rgba(255,255,255,0.15); }
.tp-bulk-tile-retry:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tp-bulk-tile-add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	aspect-ratio: 1 / 1;
	border: 1.5px dashed var(--tp-line-strong);
	background: transparent;
	color: var(--tp-accent);
	font-size: 0.8rem;
	font-weight: 700;
}
.tp-bulk-tile-add:hover { border-color: var(--tp-accent); }
.tp-bulk-tile-add svg { width: 26px; height: 26px; }

.tp-bulk-summary[hidden] { display: none; }
.tp-bulk-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--tp-surface-2);
	font-weight: 700;
	color: var(--tp-text);
}

/* PicWall - fixed-count grid of square frames; reuses .tp-bulk-tile,
   .tp-bulk-tile-add, .tp-upload-status and .tp-bulk-detail* wholesale (see
   js/picwall-editor.js and the picwall markup block in
   inc/photo-upload-product.php) - only the pieces below are new. */
.tp-picwall-editor { margin-top: 16px; max-width: 720px; }

.tp-picwall-style-select { display: flex; gap: 10px; flex-wrap: wrap; }
.tp-picwall-style-card {
	flex: 1 1 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px;
	border-radius: 14px;
	border: 1.5px solid var(--tp-line-strong);
	background: var(--tp-surface);
	color: var(--tp-text);
	text-align: center;
	cursor: pointer;
}
.tp-picwall-style-card strong { font-size: 0.9rem; }
.tp-picwall-style-card span:last-child { font-size: 0.78rem; color: var(--tp-text-dim); }
.tp-picwall-style-card-active { border-color: var(--tp-accent); background: var(--tp-surface-2); }
.tp-picwall-style-card:hover { border-color: var(--tp-accent); }
.tp-picwall-style-card-preview {
	display: block;
	width: 56px;
	height: 56px;
	border: 2px solid #2c2117;
	background: #fff;
}
.tp-picwall-style-card-preview span { display: block; width: 100%; height: 100%; background: var(--tp-accent); opacity: 0.55; }
.tp-picwall-style-card-preview-passepartout span { margin: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
.tp-picwall-style-card-preview-full span { margin: 0; }

.tp-picwall-color-select { display: flex; gap: 8px; margin-top: 12px; }
.tp-picwall-color-btn-active,
.tp-picwall-color-btn-active:hover,
.tp-picwall-color-btn-active:focus {
	background: var(--tp-accent);
	border-color: var(--tp-accent);
	color: var(--tp-accent-ink);
}

.tp-picwall-extra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--tp-surface-2);
}
.tp-picwall-extra-label { font-size: 0.85rem; color: var(--tp-text-dim); }
.tp-picwall-extra-stepper { display: flex; align-items: center; gap: 10px; }
.tp-picwall-extra-minus,
.tp-picwall-extra-plus { min-width: 40px; padding: 8px; }
.tp-picwall-extra-count { min-width: 1.5em; text-align: center; font-weight: 700; }

.tp-picwall-total { margin-top: 10px; font-size: 0.85rem; font-weight: 700; color: var(--tp-text); min-height: 1.2em; }

.tp-picwall-slots {
	display: grid;
	gap: 12px;
	margin-top: 14px;
}
.tp-picwall-slots .tp-bulk-tile,
.tp-picwall-slots .tp-bulk-tile-add { aspect-ratio: 1 / 1; }

.tp-picwall-preview-wrap[hidden] { display: none; }
.tp-picwall-preview-wrap { margin-top: 18px; }
.tp-picwall-preview-title { font-size: 0.85rem; font-weight: 700; color: var(--tp-text); margin-bottom: 8px; }
.tp-picwall-preview {
	display: grid;
	gap: 4px;
	padding: 10px;
	background: var(--tp-surface-2);
	border-radius: 12px;
}
.tp-picwall-preview-cell {
	aspect-ratio: 1 / 1;
	border: 2px solid #2c2117;
	background: #fff;
	overflow: hidden;
}
.tp-picwall-preview-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tp-picwall-preview-cell-empty { background: var(--tp-surface); border-style: dashed; border-color: var(--tp-line-strong); }

@media (max-width: 480px) {
	.tp-picwall-style-card { flex: 1 1 130px; }
}

.tp-bulk-detail[hidden] { display: none; }
.tp-bulk-detail {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 15, 10, 0.55);
}
.tp-bulk-detail-box {
	width: 100%;
	max-width: 560px;
	max-height: 92vh;
	overflow-y: auto;
	background: var(--tp-surface);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.tp-bulk-detail-head {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.tp-bulk-detail-mode { display: flex; align-items: center; gap: 6px; }
.tp-bulk-mode-info-btn {
	width: 32px;
	height: 32px;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--tp-line-strong);
	background: var(--tp-surface);
	color: var(--tp-text-dim);
	font-size: 0.85rem;
	font-weight: 800;
	cursor: pointer;
	flex-shrink: 0;
}
.tp-bulk-mode-info-btn:hover,
.tp-bulk-mode-info-btn:focus,
.tp-bulk-mode-info-btn[aria-expanded="true"] {
	border-color: var(--tp-accent);
	color: var(--tp-accent);
}
.tp-bulk-mode-legend {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-size: 0.78rem;
	color: var(--tp-text-dim);
}
.tp-bulk-mode-legend-item {
	padding: 6px 10px;
	border-radius: 8px;
}
.tp-bulk-mode-legend-item strong { color: var(--tp-text); }
.tp-bulk-mode-legend-item.tp-bulk-mode-legend-active {
	background: color-mix(in srgb, var(--tp-accent) 8%, var(--tp-surface-2));
}
.tp-bulk-mode-legend-item.tp-bulk-mode-legend-active strong { color: var(--tp-accent); }
.tp-bulk-mode-details[hidden] { display: none; }
.tp-bulk-mode-details {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--tp-surface-2);
	font-size: 0.8rem;
	color: var(--tp-text-dim);
}
.tp-bulk-mode-details p { margin: 0 0 8px; }
.tp-bulk-mode-details p:last-child { margin-bottom: 0; }
.tp-bulk-mode-details strong { color: var(--tp-text); }
.tp-bulk-mode-btn.tp-bulk-mode-btn-active,
.tp-bulk-mode-btn.tp-bulk-mode-btn-active:hover,
.tp-bulk-mode-btn.tp-bulk-mode-btn-active:focus {
	background: var(--tp-accent);
	border-color: var(--tp-accent);
	color: var(--tp-accent-ink);
}
/* .tp-bulk-detail-box is a flex column with max-height + overflow-y:auto -
   without this, flexbox's default flex-shrink:1 would squash the canvas
   (by far the tallest child) to fit the available height instead of
   letting the box scroll, silently distorting the print-ratio preview. */
.tp-bulk-detail-box > * { flex-shrink: 0; }
.tp-bulk-detail .tp-editor-canvas-wrap { margin: 0 auto; }
.tp-bulk-crop-hint { font-size: 0.8rem; color: var(--tp-text-dim); text-align: center; margin: 0; }
.tp-bulk-crop-hint[hidden] { display: none; }
#tp-bulk-detail-toolbar { width: 100%; box-sizing: border-box; justify-content: center; }
#tp-bulk-zoom-wrap[hidden] { display: none; }
#tp-bulk-detail-done { width: 100%; }

@media (max-width: 480px) {
	.tp-bulk-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* Astra has no header-builder cart element in its free tier (same
   limitation as the footer builder), so the cart is a fixed-position
   element rather than threaded into the theme's header markup. */
.tp-header-cart {
	position: fixed;
	top: calc(14px + var(--tp-banner-h, 0px));
	left: 16px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tp-accent);
	color: var(--tp-accent-ink);
	box-shadow: 0 2px 10px rgba(44,33,23,0.18);
	text-decoration: none;
}
.tp-header-cart svg { width: 22px; height: 22px; }
.tp-header-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #c0392b;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--tp-bg);
}
.tp-header-cart-count[hidden] { display: none; }
/* Reserve space so the fixed cart icon never sits on top of the last nav
   item (RTL renders the menu's last item at the visual left edge). */
.ast-primary-header-bar { padding-left: 68px; }
@media (max-width: 640px) {
	/* The hamburger toggle already occupies the left corner on mobile -
	   sit next to the logo (right corner) instead of covering it. */
	.tp-header-cart { top: calc(17px + var(--tp-banner-h, 0px)); left: auto; right: 88px; width: 40px; height: 40px; }
	.tp-header-cart svg { width: 20px; height: 20px; }
	.ast-primary-header-bar { padding-left: 0; }
}

/* Astra's own footer bar only ever showed "Copyright... Powered by
   Astra WordPress Theme" - replaced entirely by .tp-site-footer below
   (see functions.php), so hide the native one rather than leave two. */
.site-below-footer-wrap { display: none !important; }

/* "כל המוצרים" is the primary shopping destination - categories stay
   secondary navigation, so give it a touch more visual weight than a
   plain nav item without turning it into a button. */
.main-header-menu > .menu-item > a[href*="/shop/"] { color: var(--tp-accent); font-weight: 700; }

.tp-site-footer { background: var(--tp-surface-2); border-top: 1px solid var(--tp-line); }
.tp-site-footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 32px;
	padding-block: clamp(32px, 5vw, 48px);
}
.tp-site-footer-brand strong { font-family: 'Heebo', sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--tp-text); }
.tp-site-footer-brand p { margin-top: 6px; color: var(--tp-text-dim); font-size: 0.9rem; }
/* Small, quiet icon row - real contact channels, not a social-media
   widget: same muted footer palette as the link columns beside it. */
.tp-site-footer-contact { list-style: none; display: flex; gap: 10px; margin: 14px 0 0; padding: 0; }
.tp-site-footer-contact a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--tp-line-strong);
	color: var(--tp-text-dim);
}
.tp-site-footer-contact a:hover,
.tp-site-footer-contact a:focus {
	border-color: var(--tp-accent);
	color: var(--tp-accent);
}
.tp-site-footer-contact a:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
.tp-site-footer-contact svg { width: 18px; height: 18px; flex-shrink: 0; }
.tp-site-footer-col h3 { font-family: 'Heebo', sans-serif; font-size: 0.95rem; font-weight: 800; color: var(--tp-text); margin: 0 0 12px; }
.tp-site-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tp-site-footer-col a { color: var(--tp-text-dim); font-size: 0.9rem; text-decoration: none; }
.tp-site-footer-col a:hover { color: var(--tp-accent); }
.tp-site-footer-bottom { border-top: 1px solid var(--tp-line); padding-block: 16px; }
.tp-site-footer-bottom .tp-wrap { color: var(--tp-text-dim); font-size: 0.82rem; text-align: center; }
@media (max-width: 780px) {
	.tp-site-footer-grid { grid-template-columns: 1fr 1fr; }
	.tp-site-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	.tp-site-footer-grid { grid-template-columns: 1fr; }
}

/* כל המוצרים (shop archive) - the real WooCommerce loop/template is
   untouched (see inc/shop-page.php - title text and two hooks only);
   this is presentation only, sharing the exact card treatment already
   used for the homepage's featured-products grid so the two are
   genuinely consistent rather than just similarly worded. */
.woocommerce-products-header { max-width: 1180px; margin: 0 auto; padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 56px) clamp(12px, 3vw, 24px); text-align: center; }
.woocommerce-products-header__title.page-title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-family: 'Heebo', sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--tp-text);
	margin: 0;
}
.post-type-archive-product ul.products,
#tp-home .tp-featured ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	max-width: 1180px;
	margin: 0 auto !important;
	padding: 0 clamp(20px, 5vw, 56px) clamp(40px, 6vw, 64px) !important;
}
@media (max-width: 900px) {
	.post-type-archive-product ul.products,
	#tp-home .tp-featured ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.post-type-archive-product ul.products,
	#tp-home .tp-featured ul.products { grid-template-columns: 1fr; }
}
.post-type-archive-product ul.products li.product,
#tp-home .tp-featured ul.products li.product {
	border: 1px solid var(--tp-line);
	border-radius: 14px;
	padding: 16px;
	background: var(--tp-surface);
	overflow: hidden;
}
.post-type-archive-product ul.products li.product img,
#tp-home .tp-featured ul.products li.product img {
	border-radius: 8px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
	.post-type-archive-product ul.products li.product,
	#tp-home .tp-featured ul.products li.product { transition: transform 0.25s ease, box-shadow 0.25s ease; }
	.post-type-archive-product ul.products li.product img,
	#tp-home .tp-featured ul.products li.product img { transition: transform 0.35s ease; }
	.post-type-archive-product ul.products li.product:hover,
	#tp-home .tp-featured ul.products li.product:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 32px -20px rgba(44,33,23,0.3);
	}
	.post-type-archive-product ul.products li.product:hover img,
	#tp-home .tp-featured ul.products li.product:hover img { transform: scale(1.04); }
}
/* Brand-colored CTA instead of the default WooCommerce/browser blue -
   same button everywhere a product card offers "select options". */
.post-type-archive-product ul.products li.product .button,
#tp-home .tp-featured ul.products li.product .button {
	background: var(--tp-accent) !important;
	color: var(--tp-accent-ink) !important;
	border-radius: 999px;
	border: none;
	font-weight: 700;
}
.post-type-archive-product ul.products li.product .button:hover,
#tp-home .tp-featured ul.products li.product .button:hover {
	background: color-mix(in srgb, var(--tp-accent) 85%, black);
}

/* =========================================================
   Accessibility display-adjustment widget (inc/accessibility-widget.php)

   Every rule below is deliberately scoped to leave the photo editors
   (.tp-editor, .tp-bulk-detail-box - the Fabric.js canvas + its own
   toolbar) untouched:
   - Text size only targets real text tags, explicitly excluding the
     editor subtree, and never changes html/body font-size (which would
     shift rem-based sizing even inside an "excluded" container).
   - High contrast swaps CSS custom properties, not a filter() - filters
     visually alter canvas pixel output, custom properties don't (Fabric
     objects carry their own explicit colors, set in JS, independent of
     page CSS).
   - Reduced motion neutralizes the exact same selectors already gated
     behind @media (prefers-reduced-motion), nothing broader - it can't
     reach Fabric's own internal object interpolation because that was
     never CSS-transition-based to begin with.
   ========================================================= */
/* right (not left) - Astra's own built-in "scroll to top" button already
   occupies the bottom-left corner (confirmed present: .ast-scroll-top). */
.tp-a11y { position: fixed; z-index: 9997; bottom: calc(16px + var(--tp-consent-h, 0px)); right: 16px; }
.tp-a11y-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--tp-accent);
	color: var(--tp-accent-ink);
	box-shadow: 0 2px 10px rgba(44,33,23,0.18);
	cursor: pointer;
}
.tp-a11y-toggle svg { width: 24px; height: 24px; flex-shrink: 0; }
.tp-a11y-panel {
	position: absolute;
	bottom: 54px;
	right: 0;
	width: min(300px, 84vw);
	background: var(--tp-surface);
	border: 1px solid var(--tp-line-strong);
	border-radius: 16px;
	box-shadow: 0 20px 44px -20px rgba(44,33,23,0.35);
	padding: 16px;
}
.tp-a11y-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tp-a11y-panel-head h2 { font-size: 1rem; font-family: 'Heebo', sans-serif; font-weight: 800; margin: 0; color: var(--tp-text); }
.tp-a11y-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; flex-shrink: 0; border: none; background: none; color: var(--tp-text-dim); cursor: pointer; }
.tp-a11y-close svg { width: 16px; height: 16px; flex-shrink: 0; }
.tp-a11y-disclaimer { font-size: 0.78rem; color: var(--tp-text-dim); margin: 0 0 14px; line-height: 1.5; }
.tp-a11y-controls { display: flex; flex-direction: column; gap: 8px; }
.tp-a11y-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--tp-line); border-radius: 10px; }
.tp-a11y-row-label { font-size: 0.9rem; color: var(--tp-text); }
.tp-a11y-stepper { display: flex; gap: 6px; }
.tp-a11y-step {
	width: 32px; height: 32px;
	padding: 0;
	flex-shrink: 0;
	border: 1px solid var(--tp-line-strong);
	border-radius: 8px;
	background: var(--tp-surface);
	color: var(--tp-text);
	font-size: 0.85rem;
	cursor: pointer;
}
.tp-a11y-option {
	text-align: start;
	padding: 10px;
	border: 1px solid var(--tp-line);
	border-radius: 10px;
	background: var(--tp-surface);
	color: var(--tp-text);
	font-size: 0.9rem;
	cursor: pointer;
}
.tp-a11y-option[aria-pressed="true"] { border-color: var(--tp-accent); background: color-mix(in srgb, var(--tp-accent) 12%, var(--tp-surface)); font-weight: 700; }
.tp-a11y-reset {
	width: 100%;
	margin-top: 12px;
	padding: 10px;
	border: none;
	border-radius: 10px;
	background: var(--tp-surface-2);
	color: var(--tp-text-dim);
	font-size: 0.85rem;
	cursor: pointer;
}
/* Astra's theme-wide "button:hover, button:focus" rule (background:
   var(--ast-global-color-1)) has higher specificity than a bare class
   selector and was overriding these to an unrelated blue on hover/focus -
   restate the intended colors here with matching specificity. */
.tp-a11y-toggle:hover,
.tp-a11y-toggle:focus {
	background: var(--tp-accent);
	color: var(--tp-accent-ink);
}
.tp-a11y-close:hover,
.tp-a11y-close:focus {
	background: none;
	color: var(--tp-text-dim);
}
.tp-a11y-step:hover,
.tp-a11y-step:focus {
	background: var(--tp-surface);
	color: var(--tp-text);
}
.tp-a11y-option:hover,
.tp-a11y-option:focus {
	background: var(--tp-surface);
	color: var(--tp-text);
}
.tp-a11y-option[aria-pressed="true"]:hover,
.tp-a11y-option[aria-pressed="true"]:focus {
	background: color-mix(in srgb, var(--tp-accent) 12%, var(--tp-surface));
	color: var(--tp-text);
}
.tp-a11y-reset:hover,
.tp-a11y-reset:focus {
	background: var(--tp-surface-2);
	color: var(--tp-text-dim);
}
.tp-a11y-toggle:focus-visible,
.tp-a11y-close:focus-visible,
.tp-a11y-step:focus-visible,
.tp-a11y-option:focus-visible,
.tp-a11y-reset:focus-visible {
	outline: 2px solid var(--tp-accent);
	outline-offset: 2px;
}
@media (max-width: 760px) {
	/* The homepage and product-page sticky add-to-cart bars are full-width
	   at the bottom on this same breakpoint (#tp-home .tp-sticky-cta,
	   .tp-pp-sticky-cta) - sit above them rather than overlapping. */
	.tp-a11y { bottom: calc(78px + var(--tp-consent-h, 0px)); right: 12px; }
	.tp-a11y-toggle { width: 40px; height: 40px; }
}

/* Floating "talk to a human" WhatsApp button. Stacked directly above
   .tp-a11y in the same bottom-right corner using only the pixel values we
   already own for that widget (16/44 desktop, 78/40 mobile) - never
   recalculated from a live measurement, so it can't drift out of sync.
   z-index is deliberately LOWER than the text-editor panel's (60), so an
   open mobile bottom sheet naturally covers this button via plain CSS
   stacking with no JS coupling to the editor. */
.tp-float-whatsapp {
	position: fixed;
	z-index: 55;
	bottom: calc(74px + var(--tp-consent-h, 0px));
	right: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px 11px 14px;
	border-radius: 999px;
	background: #25D366;
	color: #fff;
	text-decoration: none;
	font-family: 'Heebo', sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	box-shadow: 0 4px 16px -4px rgba(37,211,102,0.55), 0 2px 8px rgba(44,33,23,0.15);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tp-float-whatsapp:hover,
.tp-float-whatsapp:focus {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px -4px rgba(37,211,102,0.65), 0 2px 8px rgba(44,33,23,0.18);
}
.tp-float-whatsapp:focus-visible {
	outline: 2px solid var(--tp-accent);
	outline-offset: 2px;
}
.tp-float-whatsapp-icon { display: flex; flex-shrink: 0; width: 22px; height: 22px; }
.tp-float-whatsapp-icon svg { width: 100%; height: 100%; }
.tp-float-whatsapp-text { white-space: nowrap; }
@media (max-width: 760px) {
	.tp-float-whatsapp {
		bottom: calc(128px + var(--tp-consent-h, 0px));
		right: 12px;
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
	}
	.tp-float-whatsapp-text { display: none; }
}

/* --- text size: real text tags only, editor subtree excluded, never
   touches html/body font-size --- */
body.tp-a11y-text-1 :is(h1,h2,h3,h4,h5,h6,p,li,a,button,span,label,dt,dd,summary,td,th):not(.tp-editor):not(.tp-editor *):not(.tp-bulk-detail-box):not(.tp-bulk-detail-box *) {
	font-size: 1.1em;
}
body.tp-a11y-text-2 :is(h1,h2,h3,h4,h5,h6,p,li,a,button,span,label,dt,dd,summary,td,th):not(.tp-editor):not(.tp-editor *):not(.tp-bulk-detail-box):not(.tp-bulk-detail-box *) {
	font-size: 1.22em;
}

/* --- high contrast: custom-property swap, no filter() - never touches
   canvas pixel output --- */
body.tp-a11y-contrast {
	--tp-bg: #ffffff;
	--tp-surface: #ffffff;
	--tp-surface-2: #eeeeee;
	--tp-text: #000000;
	--tp-text-dim: #1a1a1a;
	--tp-accent: #10387a;
	--tp-accent-ink: #ffffff;
	--tp-line: #000000;
	--tp-line-strong: #000000;
}

/* --- highlight links: no canvas interaction (canvas has no <a> tags) --- */
body.tp-a11y-links a:not(.tp-btn):not(.tp-a11y-toggle):not(.tp-a11y-close) {
	background: #fff59d;
	color: #000 !important;
	outline: 2px solid #10387a;
	text-decoration: underline;
}

/* --- reduce motion: neutralizes the exact same selectors already gated
   behind @media (prefers-reduced-motion) elsewhere in this file - nothing
   broader, so it can never reach Fabric's own canvas rendering. --- */
body.tp-a11y-motion .tp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
body.tp-a11y-motion .tp-editor-empty,
body.tp-a11y-motion .tp-bulk-dropzone,
body.tp-a11y-motion #tp-home .tp-featured ul.products li.product,
body.tp-a11y-motion #tp-home .tp-featured ul.products li.product img,
body.tp-a11y-motion .post-type-archive-product ul.products li.product,
body.tp-a11y-motion .post-type-archive-product ul.products li.product img {
	transition: none !important;
}
body.tp-a11y-motion #tp-home .tp-featured ul.products li.product:hover,
body.tp-a11y-motion .post-type-archive-product ul.products li.product:hover {
	transform: none !important;
}

/* --- readable font: swaps the body font stack only - canvas text objects
   set their own explicit fontFamily in JS (see js/product-editor.js) and
   never inherit this through the page's CSS cascade. --- */
body.tp-a11y-font { font-family: Arial, Helvetica, sans-serif; }
body.tp-a11y-font :is(h1,h2,h3,h4,h5,h6) { font-family: Arial, Helvetica, sans-serif; }

/* --- launch promo banner (inc/launch-banner.php) --- */
.tp-launch-banner {
	background: var(--tp-accent);
	color: var(--tp-accent-ink);
	padding: 10px 16px;
	text-align: center;
}
.tp-launch-banner-text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	max-width: 1100px;
	margin-inline: auto;
}
.tp-launch-banner-code {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: color-mix(in srgb, var(--tp-accent-ink) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--tp-accent-ink) 40%, transparent);
	color: var(--tp-accent-ink);
	font-weight: 800;
	letter-spacing: 0.02em;
	border-radius: 999px;
	padding: 2px 12px;
	margin: 0 2px;
	cursor: pointer;
	font-size: inherit;
	font-family: inherit;
	transition: background-color 0.15s ease;
}
.tp-launch-banner-code:hover,
.tp-launch-banner-code:focus-visible {
	background: color-mix(in srgb, var(--tp-accent-ink) 30%, transparent);
}
.tp-launch-banner-code:focus-visible { outline: 2px solid var(--tp-accent-ink); outline-offset: 2px; }
.tp-launch-banner-code-hint {
	font-weight: 600;
	font-size: 0.78rem;
	opacity: 0.85;
}
.tp-launch-banner-code.tp-launch-banner-code-copied .tp-launch-banner-code-hint {
	opacity: 1;
}
.tp-launch-banner-terms-link {
	color: var(--tp-accent-ink);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--tp-accent-ink) 50%, transparent);
	font-weight: 600;
}
.tp-launch-banner-terms-link:hover,
.tp-launch-banner-terms-link:focus-visible { text-decoration-color: var(--tp-accent-ink); }
.tp-launch-banner-live {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
@media (max-width: 760px) {
	.tp-launch-banner { padding: 8px 12px; }
	.tp-launch-banner-text { font-size: 0.82rem; line-height: 1.5; }
	.tp-launch-banner-code-hint { display: none; }
	.tp-launch-banner-code.tp-launch-banner-code-copied .tp-launch-banner-code-hint { display: inline; }
}

/* --- marketing-tracking consent banner (inc/consent.php) --- */
.tp-consent-banner {
	position: fixed;
	z-index: 9996;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 20px;
	background: var(--tp-surface);
	border-top: 1px solid var(--tp-line-strong);
	box-shadow: 0 -8px 24px -12px rgba(44,33,23,0.25);
}
.tp-consent-text {
	margin: 0;
	flex: 1 1 320px;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--tp-text-dim);
}
.tp-consent-link {
	color: var(--tp-accent);
	text-decoration: underline;
	font-weight: 600;
	margin-inline-start: 4px;
}
.tp-consent-actions {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}
.tp-consent-actions .tp-btn {
	padding: 10px 20px;
	font-size: 0.88rem;
	min-height: 40px;
}
@media (max-width: 600px) {
	.tp-consent-banner { padding: 14px 16px; }
	.tp-consent-actions { width: 100%; }
	.tp-consent-actions .tp-btn { flex: 1; }
}