/**
 * se-configurator.css — THE CONFIGURATOR LAYOUT (builds 153–158).
 * build 158: FULL FIDELITY REWRITE from the owner's standalone reference
 * (Sign_Product_Page_-_Standalone.html). Every token and component below is
 * ported verbatim from that file's design system: Instrument Sans + Space
 * Grotesk, warm neutrals (#f7f5f2/#e6e2db/#8a857c/#17150f), accent #E50D8A
 * (still overridable via the style's accent field -> --se-cfg-accent),
 * selected states = accent border + color-mix 7% tint, ink pills, dark
 * summary card, pill expander buttons.
 */

/* ================= fonts (shipped with the plugin, from the reference) ================= */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/se-cfg/9b72f5a5-4c24-4737-94e9-21196b309602.woff2?v=211") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F, U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/se-cfg/c0335697-6e96-44cc-a878-eeb8747360a1.woff2?v=211") format("woff2"); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/se-cfg/991d1b8c-0f65-4f4d-91d2-50263add946e.woff2?v=211") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/se-cfg/de57721b-c52c-40cc-ad95-2c6e3d242597.woff2?v=211") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/se-cfg/63c86653-ddb8-4d6e-8750-c49c739b0dfb.woff2?v=211") format("woff2"); }

/* ================= tokens (reference verbatim) ================= */
body.se-cfg-active {
	/* build 160: accent comes ONLY from the style field (head-printed custom prop);
	   fallback #E50D8A rides the consumers. Deep + tint derive from it. */
	--se-cfg-accent-deep: color-mix(in oklab, var(--se-cfg-accent, #E50D8A) 78%, black);
	--se-cfg-tint: color-mix(in oklab, var(--se-cfg-accent, #E50D8A) 7%, white);
	--se-cfg-ink: #17150f;
	--se-cfg-body: #33302a;
	--se-cfg-mut: #8a857c;
	--se-cfg-sub: #5c574e;
	--se-cfg-line: #e6e2db;
	--se-cfg-line2: #ddd8d0;
	--se-cfg-bg: #f7f5f2;
	--se-cfg-green: #0b9e63;
	--se-cfg-green-lt: #5ad695;
	--se-cfg-font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--se-cfg-display: 'Space Grotesk', var(--se-cfg-font);
	background: var(--se-cfg-bg);
	font-family: var(--se-cfg-font);
	color: var(--se-cfg-ink);
}
body.se-cfg-active a { color: var(--se-cfg-accent-deep); text-decoration: none; }
body.se-cfg-active a:hover { color: #8f0857; text-decoration: underline; }
@keyframes seCfgFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ================= the stage (server-rendered or self-assembled) ================= */
body.se-cfg-active .se-cfg-page { max-width: 1280px; margin: 0 auto; padding: 8px 24px 48px; box-sizing: border-box; }
body.se-cfg-active .se-cfg-page.se-cfg-assembled { position: relative; width: 100%; }
body.se-cfg-assembled-mode .se-cfg-unclamp { max-width: none !important; width: auto !important; flex: 1 1 100% !important; float: none !important; background: var(--se-cfg-bg); }
body.se-cfg-active .se-cfg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 44px; align-items: start; }
@media (max-width: 980px) {
	body.se-cfg-active .se-cfg-grid { grid-template-columns: 1fr; gap: 24px; }
}
body.se-cfg-active .se-cfg-assembled.se-cfg-narrow .se-cfg-grid { grid-template-columns: 1fr; gap: 24px; }

/* ================= gallery (aspect 4/3, r20, badges) ================= */
body.se-cfg-active .se-cfg-gallery { position: sticky; top: 20px; min-width: 0; }
body.se-cfg-active .se-cfg-narrow .se-cfg-gallery, body.se-cfg-active .se-cfg-assembled.se-cfg-narrow .se-cfg-gallery { position: static; }
/* build 187: gallery matches the standalone UI — 64px vertical thumb rail on the
   LEFT, 4:3 main stage with 20px radius filling the rest, sticky on desktop,
   thumbs drop to a horizontal row under the stage on mobile. Flexslider keeps
   doing the thumb-click image swap; this is pure layout. */
body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery { width: 100% !important; float: none; display: grid !important; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; opacity: 1 !important; }
body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) { grid-template-columns: minmax(0, 1fr); }
body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery .flex-viewport,
body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { grid-column: 2; grid-row: 1; min-width: 0; }
body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .flex-viewport,
body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) > .woocommerce-product-gallery__wrapper { grid-column: 1; }
body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery__wrapper,
body.se-cfg-active .se-cfg-gallery .flex-viewport,
body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery__image { border-radius: 20px; overflow: hidden; }
body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery__image img,
body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery__wrapper img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; display: block; }
@media (min-width: 901px) {
	/* build 194: the pin offset is a JS-measured variable — the height of
	   whatever fixed/sticky header is actually overlaying the viewport top —
	   so the full image stays visible instead of sliding under the nav. */
	/* build 198: ONE FIXED NUMBER. All adaptive JS removed — nothing measures,
	   nothing reacts, nothing can flicker or drift. 180px clears the blue
	   topbar + black nav with breathing room. To fine-tune, change this single
	   value and nothing else. */
	body.se-cfg-active.se-cfg-assembled-mode .se-cfg-gallery { position: sticky; top: 105px; } /* build 201: 70px clipped the rail ~30px behind the nav; +35px lands ~5px clear */
}
@media (max-width: 900px) {
	body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery { grid-template-columns: minmax(0, 1fr); }
	body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery .flex-viewport,
	body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { grid-column: 1; grid-row: 1; }
	body.se-cfg-active .se-cfg-gallery .flex-control-thumbs { grid-column: 1 !important; grid-row: 2 !important; flex-direction: row !important; width: auto !important; overflow-x: auto; padding-bottom: 2px; }
}
body.se-cfg-active .se-cfg-gallery img { width: 100%; height: auto; object-fit: contain; border-radius: 20px; display: block; }
body.se-cfg-active .se-cfg-gallery .flex-control-thumbs { display: flex; flex-direction: column; gap: 8px; margin: 0 !important; padding: 0; grid-column: 1; grid-row: 1; width: 64px; }
body.se-cfg-active .se-cfg-gallery .flex-control-thumbs li { list-style: none; width: 64px !important; height: 64px; float: none !important; margin: 0 !important; flex: none; }
body.se-cfg-active .se-cfg-gallery .flex-control-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; border: 2px solid var(--se-cfg-line, #e6e2db); cursor: pointer; opacity: 1 !important; display: block; }
body.se-cfg-active .se-cfg-gallery .flex-control-thumbs img.flex-active { border-color: var(--se-cfg-accent, #E50D8A); }
body.se-cfg-active .se-cfg-badges { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
body.se-cfg-active .se-cfg-badge { font-size: 12px; font-weight: 600; color: var(--se-cfg-sub); background: #fff; border: 1px solid var(--se-cfg-line); border-radius: 999px; padding: 6px 12px; }

/* ================= buybox column ================= */
body.se-cfg-active .se-cfg-summary-col { min-width: 0; position: sticky; top: 20px; }
body.se-cfg-active .se-cfg-narrow .se-cfg-summary-col { position: static; }
body.se-cfg-active .se-cfg-summary-col h1.product_title,
body.se-cfg-active .se-cfg-summary-col h1.entry-title,
body.se-cfg-active .summary h1.product_title {
	font-family: var(--se-cfg-display);
	font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em;
	margin: 0 0 8px; color: var(--se-cfg-ink);
}
body.se-cfg-active .summary .price, body.se-cfg-active .summary .woocommerce-Price-amount {
	font-family: var(--se-cfg-display); font-weight: 700; color: var(--se-cfg-ink);
}
body.se-cfg-active .summary { background: transparent; border: 0; padding: 0; box-shadow: none; }
body.se-cfg-active .summary.se-cfg-summary, body.se-cfg-active .se-cfg-summary { width: 100% !important; float: none; margin: 0; }

/* ================= sizes ================= */
body.se-cfg-active .se-cfg-sizes { margin-bottom: 0; } /* build 190: owner request — tighter, the 22px gap removed */
body.se-cfg-active .se-cfg-sizes-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
body.se-cfg-active .se-cfg-sizes-label, body.se-cfg-active .se-cfg-panel-head {
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--se-cfg-mut);
}
body.se-cfg-active .se-cfg-panel-head { margin-bottom: 10px; }
body.se-cfg-active .se-cfg-sizes-sel { font-size: 13px; font-weight: 600; color: var(--se-cfg-ink); }
body.se-cfg-active .se-cfg-pills { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
body.se-cfg-active .se-cfg-pill {
	cursor: pointer; flex: none; white-space: nowrap; border: 1px solid var(--se-cfg-line2);
	background: #fff; color: var(--se-cfg-sub); border-radius: 999px; padding: 7px 13px;
	font-family: var(--se-cfg-font); font-size: 12.5px; font-weight: 600;
}
body.se-cfg-active .se-cfg-pill.is-on { border-color: var(--se-cfg-ink); background: var(--se-cfg-ink); color: #fff; }
body.se-cfg-active .se-cfg-group-title { font-size: 12.5px; color: var(--se-cfg-mut); margin: 2px 0 8px; }
body.se-cfg-active .se-cfg-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 10px; }
body.se-cfg-active .se-cfg-chip {
	cursor: pointer; border: 1.5px solid var(--se-cfg-line); background: #fff;
	border-radius: 12px; padding: 10px 6px 8px; text-align: center; font-family: var(--se-cfg-font);
}
body.se-cfg-active .se-cfg-chip.is-on { border-color: var(--se-cfg-accent, #E50D8A); background: var(--se-cfg-tint); }
body.se-cfg-active .se-cfg-chip-label { display: block; font-family: var(--se-cfg-display); font-size: 15px; font-weight: 600; color: var(--se-cfg-ink); }
body.se-cfg-active .se-cfg-chip-price { display: block; font-size: 11.5px; color: var(--se-cfg-mut); margin-top: 2px; }
body.se-cfg-active .se-cfg-findrow { display: flex; }
body.se-cfg-active .se-cfg-find {
	border: 1px solid var(--se-cfg-line2); border-radius: 999px; padding: 8px 14px;
	font-size: 13px; flex: 1; min-width: 120px; background: #fff; color: var(--se-cfg-ink);
	font-family: var(--se-cfg-font);
}
body.se-cfg-active .se-cfg-find:focus { outline: 2px solid var(--se-cfg-ink); outline-offset: 1px; }
body.se-cfg-active .se-cfg-browse {
	background: #fff; border: 1px solid var(--se-cfg-line); border-radius: 14px;
	padding: 12px; margin-top: 8px; animation: seCfgFadeUp .18s ease;
}
body.se-cfg-active .se-cfg-browse-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
body.se-cfg-active .se-cfg-browse-note { font-size: 12px; color: var(--se-cfg-mut); }
body.se-cfg-active .se-cfg-browse-note strong { font-weight: 700; color: var(--se-cfg-ink); }
body.se-cfg-active .se-cfg-browse-close { border: none; background: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--se-cfg-accent-deep); font-family: var(--se-cfg-font); padding: 0; }
body.se-cfg-active .se-cfg-browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; max-height: 216px; overflow: auto; padding-right: 4px; }
body.se-cfg-active .se-cfg-browse-grid .se-cfg-chip { border-radius: 10px; padding: 8px 4px 6px; }
body.se-cfg-active .se-cfg-browse-grid .se-cfg-chip-label { font-size: 13.5px; }
body.se-cfg-active .se-cfg-browse-grid .se-cfg-chip-price { font-size: 10.5px; margin-top: 0; }
body.se-cfg-active .se-cfg-quote-line { font-size: 12.5px; color: var(--se-cfg-mut); margin-top: 8px; }
body.se-cfg-active .se-cfg-quote-link { color: var(--se-cfg-accent-deep); text-decoration: none; }
body.se-cfg-active .se-cfg-quote-link:hover { color: #8f0857; text-decoration: underline; }

/* ================= panels + option cards ================= */
body.se-cfg-active .se-cfg-panels .se-cfg-panel { margin-bottom: 22px; border: 0; padding: 0; background: transparent; }
body.se-cfg-active .se-cfg-art-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.se-cfg-active .se-cfg-art-cards.se-cfg-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
body.se-cfg-active .se-cfg-art-card {
	cursor: pointer; border: 1.5px solid var(--se-cfg-line); background: #fff;
	border-radius: 12px; padding: 12px 10px; font-family: var(--se-cfg-font); text-align: left;
}
body.se-cfg-active .se-cfg-art-card.is-on { border-color: var(--se-cfg-accent, #E50D8A); background: var(--se-cfg-tint); }
body.se-cfg-active .se-cfg-art-name { display: block; font-size: 13px; font-weight: 700; color: var(--se-cfg-ink); }
body.se-cfg-active .se-cfg-art-sub { display: block; font-size: 11.5px; color: var(--se-cfg-mut); margin-top: 2px; line-height: 1.35; }
body.se-cfg-active .se-cfg-addon-group { margin-bottom: 12px; }
body.se-cfg-active .se-cfg-addon-group:last-child { margin-bottom: 0; }

/* ================= quantity + tiers ================= */
body.se-cfg-active .se-cfg-qty-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
body.se-cfg-active .se-cfg-save-note { font-size: 12px; color: var(--se-cfg-green); font-weight: 600; }
body.se-cfg-active .se-cfg-qty-row { display: flex; gap: 8px; align-items: stretch; }
body.se-cfg-active .se-cfg-stepper { display: flex; border: 1.5px solid var(--se-cfg-line2); border-radius: 12px; background: #fff; flex: none; }
body.se-cfg-active .se-cfg-step { border: none; background: none; cursor: pointer; width: 36px; font-size: 17px; color: var(--se-cfg-sub); font-family: var(--se-cfg-font); }
body.se-cfg-active .se-cfg-qty-input {
	border: none; width: 44px; text-align: center; font-size: 15px; font-weight: 700;
	background: none; font-family: var(--se-cfg-display); color: var(--se-cfg-ink);
	-moz-appearance: textfield; appearance: textfield;
}
body.se-cfg-active .se-cfg-qty-input::-webkit-outer-spin-button, body.se-cfg-active .se-cfg-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.se-cfg-active .se-cfg-tiers { display: flex; gap: 6px; overflow: auto; flex: 1; padding-bottom: 2px; margin-top: 0; }
body.se-cfg-active .se-cfg-tier {
	cursor: pointer; flex: none; border: 1.5px solid var(--se-cfg-line); background: #fff;
	border-radius: 12px; padding: 5px 11px; font-family: var(--se-cfg-font); text-align: center;
}
body.se-cfg-active .se-cfg-tier.is-on { border-color: var(--se-cfg-accent, #E50D8A); background: var(--se-cfg-tint); }
body.se-cfg-active .se-cfg-tier-q { display: block; font-size: 12.5px; font-weight: 700; color: var(--se-cfg-ink); }
body.se-cfg-active .se-cfg-tier-sub { display: block; font-size: 10px; color: var(--se-cfg-green); font-weight: 600; }

/* ================= Your Signs (multiple) ================= */
body.se-cfg-active .se-cfg-signs-host .se-cfg-sign-row { position: relative; border: 1.5px solid var(--se-cfg-line); border-radius: 12px; padding: 12px 12px 12px 44px; margin-bottom: 10px; background: #fff; }
body.se-cfg-active .se-cfg-sign-num { position: absolute; left: 12px; top: 12px; font-size: 12px; font-weight: 700; color: var(--se-cfg-mut); font-family: var(--se-cfg-display); }
body.se-cfg-active .se-cfg-signs-host .file-drop-area { border: 1.5px dashed #c9c3ba; border-radius: 12px; padding: 12px 14px; text-align: center; background: #fff; }
body.se-cfg-active .se-cfg-addsign { width: 100%; border: 1.5px dashed var(--se-cfg-accent, #E50D8A); background: var(--se-cfg-tint); color: var(--se-cfg-ink); border-radius: 12px; padding: 11px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--se-cfg-font); }

/* ================= dark summary card ================= */
body.se-cfg-active .se-cfg-sum { background: var(--se-cfg-ink); color: #fff; border-radius: 18px; padding: 18px 18px 16px; margin-bottom: 12px; }
body.se-cfg-active .se-cfg-sum-line { display: flex; justify-content: space-between; font-size: 13px; color: #b5afa4; margin-bottom: 6px; }
body.se-cfg-active .se-cfg-sum-line[data-se-cfg-discrow] { color: var(--se-cfg-green-lt); }
body.se-cfg-active .se-cfg-sum-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #33302a; padding-top: 10px; margin-top: 8px; color: #fff; }
body.se-cfg-active .se-cfg-sum-total span { font-size: 14px; font-weight: 600; }
body.se-cfg-active .se-cfg-sum-total strong { font-family: var(--se-cfg-display); font-size: 26px; font-weight: 700; }
body.se-cfg-active .se-cfg-sum-note { font-size: 12.5px; color: #b5afa4; margin-top: 10px; }

/* ================= CTA + OR + quote button + trust ================= */
body.se-cfg-active .se-cfg-cta {
	width: 100%; border: none; cursor: pointer; background: var(--se-cfg-accent, #E50D8A); color: #fff;
	border-radius: 14px; padding: 16px; font-family: var(--se-cfg-font);
	font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
}
body.se-cfg-active .se-cfg-cta:hover { filter: brightness(1.06); }
body.se-cfg-active .se-cfg-cta:disabled { opacity: .55; cursor: not-allowed; filter: none; }
body.se-cfg-active .se-cfg-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
body.se-cfg-active .se-cfg-or span:first-child, body.se-cfg-active .se-cfg-or span:last-child { flex: 1; height: 1px; background: var(--se-cfg-line); }
body.se-cfg-active .se-cfg-or-label { font-size: 11px; color: var(--se-cfg-mut); font-weight: 600; }
body.se-cfg-active .se-cfg-quote-btn {
	width: 100%; border: 1.5px solid var(--se-cfg-line2); cursor: pointer; background: #fff;
	color: var(--se-cfg-ink); border-radius: 14px; padding: 13px; font-family: var(--se-cfg-font);
	font-size: 14px; font-weight: 600; margin-top: 6px;
}
body.se-cfg-active .se-cfg-quote-btn:hover { border-color: var(--se-cfg-ink); }
body.se-cfg-active .se-cfg-stickybar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
	align-items: center; justify-content: space-between; gap: 12px;
	background: #fff; border-top: 1px solid var(--se-cfg-line); padding: 10px 16px;
}
body.se-cfg-active .se-cfg-stickybar strong { font-family: var(--se-cfg-display); font-size: 18px; }
body.se-cfg-active .se-cfg-cta-sm { width: auto; padding: 11px 22px; font-size: 14px; border-radius: 12px; }
@media (max-width: 980px) { body.se-cfg-active .se-cfg-stickybar[data-se-cfg-sticky]:not([hidden]) { display: flex; } }

/* ================= upload artwork area (legacy panel, reference-dressed) ================= */
body.se-cfg-active .file-drop-area { border: 1.5px dashed #c9c3ba; border-radius: 12px; padding: 12px 14px; background: #fff; }
body.se-cfg-active .file-drop-area .img-upload-artwork, body.se-cfg-active .img-upload-artwork { width: 30px !important; height: auto !important; max-width: 30px; }
body.se-cfg-active .file-drop-area .file-message { font-size: 13px; color: var(--se-cfg-sub); }

/* ================= below-fold: description card, tabs, templates ================= */
body.se-cfg-active .se-cfg-belowfold { max-width: 1280px; margin: 40px auto 0; }
body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs { background: #fff; border: 1px solid var(--se-cfg-line); border-radius: 16px; padding: 18px 20px; margin: 0 0 26px; }
body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs ul.tabs, body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs ul.wc-tabs { display: flex; gap: 2px; background: #ece8e2; border-radius: 999px; padding: 3px; margin: 0 0 14px; list-style: none; width: max-content; max-width: 100%; overflow: auto; }
body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs ul.tabs::before, body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs ul.tabs::after, body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs ul li::before, body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs ul li::after { display: none !important; content: none !important; }
body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs ul li { border: 0 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; border-radius: 999px; }
body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs ul li a { display: block; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--se-cfg-sub); text-decoration: none; }
body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs ul li.active a { background: var(--se-cfg-ink); color: #fff; box-shadow: 0 1px 2px rgba(23,21,15,.18); }
body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs .panel { border: 0; padding: 0; margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--se-cfg-body); }
body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs .panel h2:first-child { font-family: var(--se-cfg-display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; color: var(--se-cfg-ink); }

body.se-cfg-active .se-cfg-belowfold #related.se-cfg-tpl,
body.se-cfg-active #related.se-cfg-tpl {
	border: 1px solid var(--se-cfg-line); border-radius: 16px; background: #fff;
	padding: 22px 22px 18px; margin: 0 0 8px; display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px;
	position: relative; overflow: hidden; transition: max-height .25s ease;
}
body.se-cfg-active .se-cfg-tpl .se-cfg-tpl-head, body.se-cfg-active .se-cfg-tpl #related_product_header { grid-column: 1 / -1; margin: 0 0 2px; font-family: var(--se-cfg-display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--se-cfg-ink); }
body.se-cfg-active .se-cfg-tpl .element.custom-design-element {
	margin: 0 !important; width: auto !important; float: none !important;
	position: relative !important; inset: auto !important;
	border: 1.5px solid var(--se-cfg-line); border-radius: 12px; overflow: hidden;
	background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
body.se-cfg-active .se-cfg-tpl .element.custom-design-element:hover { border-color: var(--se-cfg-accent, #E50D8A); box-shadow: 0 4px 14px rgba(23, 21, 15, .08); }
body.se-cfg-active .se-cfg-tpl .element.custom-design-element * { max-width: 100% !important; }
body.se-cfg-active .se-cfg-tpl .element.custom-design-element canvas,
body.se-cfg-active .se-cfg-tpl .element.custom-design-element svg,
body.se-cfg-active .se-cfg-tpl .temp-img.custom-template-img, body.se-cfg-active .se-cfg-tpl .temp-img.custom-template-img img { width: 100% !important; height: auto !important; display: block; position: static !important; }
body.se-cfg-active .se-cfg-tpl.se-cfg-tpl-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 85%); pointer-events: none; }
body.se-cfg-active .se-cfg-tpl-more {
	display: block; margin: 10px auto 26px; border: 1.5px solid var(--se-cfg-line2); background: #fff;
	color: var(--se-cfg-ink); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700;
	cursor: pointer; font-family: var(--se-cfg-font); white-space: nowrap;
}
body.se-cfg-active .se-cfg-tpl-more:hover { border-color: var(--se-cfg-ink); }

/* ================= machinery (carried, unchanged in spirit) ================= */
body.se-cfg-active .se-cfg-native-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.se-cfg-active form.cart .variations, body.se-cfg-active form.cart table.variations { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.se-cfg-active form.cart ~ .button_example,
body.se-cfg-active .summary .button_example,
body.se-cfg-active #design_editor, body.se-cfg-active #design_editor_template,
body.se-cfg-active #design_editor_later, body.se-cfg-active #submit_art_work,
body.se-cfg-active #let_us_design,
body.se-cfg-active .summary form.cart .single_add_to_cart_button { display: none !important; }
body.se-cfg-active .summary .variations_button > label, body.se-cfg-active .summary .variations_button select.qty { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ================= build 159: resilience ================= */
/* Stage without a recognizable gallery: single centered column, buybox width capped. */
body.se-cfg-active .se-cfg-assembled.se-cfg-nogallery .se-cfg-grid { grid-template-columns: minmax(0, 640px); justify-content: center; }
/* Template preview containment EVERYWHERE, not only inside the fold card —
   preview nodes carry stale absolute coordinates after any reflow. */
body.se-cfg-active .element.custom-design-element { position: relative !important; float: none !important; inset: auto !important; overflow: hidden; max-width: 100%; }
body.se-cfg-active .element.custom-design-element * { position: static !important; max-width: 100% !important; }
body.se-cfg-active .element.custom-design-element img,
body.se-cfg-active .element.custom-design-element canvas,
body.se-cfg-active .element.custom-design-element svg { width: 100% !important; height: auto !important; display: block; }

/* build 160: theme insurance */
body.se-cfg-active .se-cfg-belowfold .woocommerce-tabs { float: none !important; width: 100% !important; }

/* ================= build 162: templates — v2 reference design ================= */
body.se-cfg-active .se-cfg-tplwrap { background: #fff; border: 1px solid var(--se-cfg-line); border-radius: 16px; padding: 18px 20px; margin: 0 0 26px; }
body.se-cfg-active .se-cfg-tplhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
body.se-cfg-active .se-cfg-tplhead-t { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
body.se-cfg-active .se-cfg-tpltitle { font-family: var(--se-cfg-display); font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -.01em; color: var(--se-cfg-ink); }
body.se-cfg-active .se-cfg-tplcount { font-size: 13px; color: var(--se-cfg-mut); }
body.se-cfg-active #related.se-cfg-tplgrid,
body.se-cfg-active .se-cfg-belowfold #related.se-cfg-tplgrid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
	margin: 14px 0 0; padding: 0; border: 0; background: transparent; max-height: none; overflow: visible;
}
body.se-cfg-active .se-cfg-tpltile {
	border: 1px solid var(--se-cfg-line) !important; border-radius: 14px !important; overflow: hidden !important;
	background: #fff !important; animation: seCfgFadeUp .18s ease; display: flex; flex-direction: column;
}
body.se-cfg-active .se-cfg-tpltile .se-cfg-tplthumb {
	aspect-ratio: 2 / 1; width: 100% !important;
	background: repeating-linear-gradient(45deg, #efece7, #efece7 6px, #e6e2db 6px, #e6e2db 12px);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
body.se-cfg-active .se-cfg-tpltile .se-cfg-tplthumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
body.se-cfg-active .se-cfg-tplbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; margin-top: auto; }
body.se-cfg-active .se-cfg-tplname { font-size: 12.5px; font-weight: 600; color: var(--se-cfg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.se-cfg-active .se-cfg-tplcta, body.se-cfg-active button.se-cfg-tplcta, body.se-cfg-active .btn_related_pro.se-cfg-tplcta {
	flex: none; border: none; cursor: pointer; background: var(--se-cfg-accent, #E50D8A); color: #fff;
	border-radius: 999px; padding: 7px 14px; font-family: var(--se-cfg-font); font-size: 12px; font-weight: 700;
	width: auto; line-height: 1.2; text-transform: none;
}
body.se-cfg-active .se-cfg-tplcta:hover { filter: brightness(1.06); }

/* ================= build 163: THE TAKEOVER ================= */
body.se-cfg-active .se-cfg-machinery { position: absolute !important; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
body.se-cfg-active .se-cfg-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0 18px; }
body.se-cfg-active .se-cfg-crumbs, body.se-cfg-active .se-cfg-crumbs .woocommerce-breadcrumb { font-size: 13px; color: var(--se-cfg-mut); margin: 0; }
body.se-cfg-active .se-cfg-crumbs a { color: var(--se-cfg-mut); }
body.se-cfg-active .se-cfg-pricerow { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
body.se-cfg-active .se-cfg-pricerow .price { font-family: var(--se-cfg-display); font-size: 34px; font-weight: 700; color: var(--se-cfg-ink); margin: 0; }
body.se-cfg-active .se-cfg-pricerow del { color: var(--se-cfg-mut); font-size: 20px; }
body.se-cfg-active .se-cfg-card { background: #fff; border: 1px solid var(--se-cfg-line); border-radius: 16px; padding: 18px 20px; margin: 0 0 26px; }
body.se-cfg-active .se-cfg-h2 { font-family: var(--se-cfg-display); font-size: 20px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; color: var(--se-cfg-ink); }
body.se-cfg-active .se-cfg-prose { font-size: 14.5px; line-height: 1.65; color: var(--se-cfg-body); }
body.se-cfg-active .se-cfg-prose p { margin: 0 0 14px; }
body.se-cfg-active .se-cfg-specs table.woocommerce-product-attributes { width: 100%; border-collapse: collapse; }
body.se-cfg-active .se-cfg-specs table.woocommerce-product-attributes th,
body.se-cfg-active .se-cfg-specs table.woocommerce-product-attributes td { border: 0; border-bottom: 1px solid var(--se-cfg-line); padding: 10px 8px; font-size: 13.5px; text-align: left; background: transparent; font-style: normal; }
body.se-cfg-active .se-cfg-specs table.woocommerce-product-attributes th { color: var(--se-cfg-mut); font-weight: 600; width: 34%; }
body.se-cfg-active .se-cfg-belowfold .related.products,
body.se-cfg-active .se-cfg-belowfold .upsells.products { background: transparent; border: 0; padding: 0; margin: 26px 0 0; }
body.se-cfg-active .se-cfg-belowfold .related.products > h2,
body.se-cfg-active .se-cfg-belowfold .upsells.products > h2 { font-family: var(--se-cfg-display); font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 14px; color: var(--se-cfg-ink); }
body.se-cfg-active .se-cfg-belowfold .related.products ul.products,
body.se-cfg-active .se-cfg-belowfold .upsells.products ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
body.se-cfg-active .se-cfg-belowfold ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; border: 1px solid var(--se-cfg-line); border-radius: 14px; overflow: hidden; background: #fff; padding: 0 0 12px; }
body.se-cfg-active .se-cfg-belowfold ul.products li.product img { width: 100%; height: auto; display: block; }
body.se-cfg-active .se-cfg-belowfold ul.products li.product .woocommerce-loop-product__title { font-size: 14px; font-weight: 700; color: var(--se-cfg-ink); padding: 10px 12px 0; }
body.se-cfg-active .se-cfg-belowfold ul.products li.product .price { padding: 2px 12px 0; color: var(--se-cfg-mut); font-size: 13px; }
body.se-cfg-active .se-cfg-reviewscard #reviews { margin: 0; }
body.se-cfg-active .se-cfg-faqcard details, body.se-cfg-active .se-cfg-faqcard .se-faq-item { border-bottom: 1px solid var(--se-cfg-line); padding: 14px 0; }
body.se-cfg-active .se-cfg-faqcard summary, body.se-cfg-active .se-cfg-faqcard .se-faq-q { font-size: 16px; font-weight: 600; color: var(--se-cfg-ink); cursor: pointer; }
body.se-cfg-active .woocommerce-breadcrumb { padding: 0; }

/* ================= build 164: field fixes ================= */
/* badges: horizontal row under the gallery — never wrapping into circles */
body.se-cfg-active .se-cfg-badges { width: 100%; flex-direction: row; }
body.se-cfg-active .se-cfg-badge { white-space: nowrap; flex: none; }
/* buybox title + price: guaranteed visible against any theme rule */
body.se-cfg-active .se-cfg-summary h1.product_title { display: block !important; }
body.se-cfg-active .se-cfg-pricerow .price { display: block !important; }
/* theme duplicate chrome insurance (JS hides precisely; CSS backs it up) */
body.se-cfg-active #left-area > h1.entry-title,
body.se-cfg-active #left-area > .woocommerce-breadcrumb,
body.se-cfg-active #main-content > .container > h1.entry-title { display: none !important; }

/* ================= build 165: font supremacy + reviews bar + polish ================= */
/* The theme's typography must not outrank the takeover anywhere inside it. */
body.se-cfg-active .se-cfg-page,
body.se-cfg-active .se-cfg-page *:not(svg):not(path):not(i) { font-family: var(--se-cfg-font) !important; }
body.se-cfg-active .se-cfg-page h1.product_title,
body.se-cfg-active .se-cfg-page .se-cfg-h2,
body.se-cfg-active .se-cfg-page .se-cfg-tpltitle,
body.se-cfg-active .se-cfg-page .se-cfg-chip-label,
body.se-cfg-active .se-cfg-page .se-cfg-qty-input,
body.se-cfg-active .se-cfg-page .se-cfg-sum-total strong,
body.se-cfg-active .se-cfg-page .se-cfg-pricerow .price,
body.se-cfg-active .se-cfg-page .se-cfg-sign-num { font-family: var(--se-cfg-display) !important; }
body.se-cfg-active .se-cfg-page h1.product_title { font-size: 30px !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -.01em !important; color: var(--se-cfg-ink) !important; }
/* reviews reference bar */
body.se-cfg-active .se-cfg-revbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
body.se-cfg-active .se-cfg-revbar-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
body.se-cfg-active .se-cfg-revscore { font-family: var(--se-cfg-display) !important; font-size: 18px; font-weight: 700; color: var(--se-cfg-ink); }
body.se-cfg-active .se-cfg-revstars { color: #f0a12b; letter-spacing: 2px; }
body.se-cfg-active .se-cfg-revcount { font-size: 13px; color: var(--se-cfg-mut); }
body.se-cfg-active .se-cfg-revbody { margin-top: 14px; animation: seCfgFadeUp .18s ease; }
body.se-cfg-active .se-cfg-revbody #reviews .comment-form input[type=text],
body.se-cfg-active .se-cfg-revbody #reviews .comment-form input[type=email],
body.se-cfg-active .se-cfg-revbody #reviews .comment-form textarea { border: 1.5px solid var(--se-cfg-line2); border-radius: 12px; padding: 10px 12px; background: #fff; }
body.se-cfg-active .se-cfg-revbody #reviews .form-submit .submit { background: var(--se-cfg-accent, #E50D8A); color: #fff; border: 0; border-radius: 12px; padding: 12px 22px; font-weight: 700; cursor: pointer; }
/* About head row alignment */
body.se-cfg-active .se-cfg-about .se-cfg-tplhead { margin-bottom: 8px; }

/* ================= build 167: custom size card (reference v3) ================= */
body.se-cfg-active .se-cfg-customcard { border: 2px solid var(--se-cfg-accent, #E50D8A); border-radius: 16px; background: #fff; padding: 16px 18px; margin: 0 0 12px; animation: seCfgFadeUp .18s ease; }
body.se-cfg-active .se-cfg-custom-grid { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
body.se-cfg-active .se-cfg-custom-col { display: flex; flex-direction: column; gap: 6px; }
body.se-cfg-active .se-cfg-custom-input { width: 96px; border: 1.5px solid var(--se-cfg-line2); border-radius: 12px; padding: 12px 10px; font-family: var(--se-cfg-display) !important; font-size: 18px; font-weight: 700; text-align: center; color: var(--se-cfg-ink); background: #fff; -moz-appearance: textfield; appearance: textfield; }
body.se-cfg-active .se-cfg-custom-input::-webkit-outer-spin-button, body.se-cfg-active .se-cfg-custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.se-cfg-active .se-cfg-custom-x { font-size: 16px; color: var(--se-cfg-mut); padding-bottom: 14px; }
body.se-cfg-active .se-cfg-custom-feet { font-size: 15px; font-weight: 600; color: var(--se-cfg-ink); padding-bottom: 14px; }
body.se-cfg-active .se-cfg-custom-note { font-size: 12.5px; color: var(--se-cfg-mut); margin-top: 10px; }

/* ================= build 168: punch-list fidelity ================= */
/* hero price line (reference) */
body.se-cfg-active .se-cfg-hero { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; row-gap: 2px; } /* build 208: longer sub (min note) wraps below, never mid-price. */
body.se-cfg-active .se-cfg-hero-amt { font-family: var(--se-cfg-display) !important; font-size: 40px; font-weight: 700; color: var(--se-cfg-ink); line-height: 1.05; white-space: nowrap; } /* build 208: the amount is unbreakable. */
body.se-cfg-active .se-cfg-hero-sub { font-size: 15px; color: var(--se-cfg-sub); min-width: 0; }
/* reference upload row + proof state; legacy visuals silenced inside the host */
body.se-cfg-active .se-cfg-upload-dressed .file-drop-area { border: 0 !important; padding: 0 !important; background: transparent !important; }
body.se-cfg-active .se-cfg-upload-dressed .img-upload-artwork { display: none !important; }
body.se-cfg-active .se-cfg-droprow { display: flex; align-items: center; gap: 12px; border: 1.5px dashed #c9c3ba; border-radius: 14px; padding: 14px 16px; background: #fff; cursor: pointer; margin-top: 10px; }
body.se-cfg-active .se-cfg-droprow:hover { border-color: var(--se-cfg-accent, #E50D8A); }
body.se-cfg-active .se-cfg-drop-chip { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--se-cfg-tint); color: var(--se-cfg-accent, #E50D8A); font-weight: 700; font-size: 16px; }
body.se-cfg-active .se-cfg-drop-msg { font-size: 14.5px; color: var(--se-cfg-sub); }
body.se-cfg-active .se-cfg-droprow.se-cfg-drop-proof { border-style: solid; border-color: var(--se-cfg-accent, #E50D8A); }
body.se-cfg-active .se-cfg-droprow.se-cfg-drop-proof .se-cfg-drop-msg { color: var(--se-cfg-ink); font-weight: 600; }
/* About description clamp */
body.se-cfg-active .se-cfg-prose.se-cfg-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Related as reference tiles ("More ways to get seen") */
body.se-cfg-active .se-cfg-belowfold ul.products li.product a img { aspect-ratio: 2 / 1; object-fit: cover; }
body.se-cfg-active .se-cfg-belowfold ul.products li.product .button,
body.se-cfg-active .se-cfg-belowfold ul.products li.product .added_to_cart { display: none !important; }
body.se-cfg-active .se-cfg-belowfold ul.products li.product .price { font-size: 13px; color: var(--se-cfg-mut); }
body.se-cfg-active .se-cfg-belowfold ul.products li.product .price .woocommerce-Price-amount { font-family: var(--se-cfg-font) !important; font-weight: 600; font-size: 13px; color: var(--se-cfg-mut); }

/* ================= build 169: specs cards + legacy-free guarantees ================= */
body.se-cfg-active .se-cfg-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 4px; }
body.se-cfg-active .se-cfg-spec-card { border: 1px solid var(--se-cfg-line); border-radius: 14px; background: #fff; padding: 16px 18px; }
body.se-cfg-active .se-cfg-spec-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--se-cfg-accent, #E50D8A); margin-bottom: 6px; }
body.se-cfg-active .se-cfg-spec-title { font-family: var(--se-cfg-display) !important; font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--se-cfg-ink); }
body.se-cfg-active .se-cfg-spec-text { font-size: 13.5px; line-height: 1.55; color: var(--se-cfg-sub); margin: 0; }
/* with the legacy stylesheet gone, guarantee machinery bits that leaned on it stay hidden */
body.se-cfg-active .se-cfg-machinery, body.se-cfg-active .se-cfg-machinery * { visibility: hidden !important; }

/* ================= build 170: proof card + unconditional dark card + related type ================= */
body.se-cfg-active .se-cfg-proofcard { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--se-cfg-green); border-radius: 14px; background: #fff; padding: 12px 14px; margin-top: 10px; position: relative; animation: seCfgFadeUp .18s ease; }
body.se-cfg-active .se-cfg-proof-thumb { flex: none; width: 110px; border-radius: 8px; overflow: hidden; background: repeating-linear-gradient(45deg, #efece7, #efece7 6px, #e6e2db 6px, #e6e2db 12px); display: flex; align-items: center; justify-content: center; }
body.se-cfg-active .se-cfg-proof-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.se-cfg-active .se-cfg-proof-title { font-size: 15px; font-weight: 700; color: var(--se-cfg-green); }
body.se-cfg-active .se-cfg-proof-name { font-size: 14px; font-weight: 600; color: var(--se-cfg-ink); margin-top: 2px; }
body.se-cfg-active .se-cfg-proof-note { font-size: 12.5px; color: var(--se-cfg-mut); margin-top: 2px; }
body.se-cfg-active .se-cfg-proof-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; cursor: pointer; font-size: 14px; color: var(--se-cfg-mut); }
body.se-cfg-active .se-cfg-proof-x:hover { color: var(--se-cfg-ink); }
/* the dark card depends on NOTHING — literal colors, maximal certainty */
body.se-cfg-active .se-cfg-sum { background: #17150f !important; color: #fff !important; }
body.se-cfg-active .se-cfg-sum-line { color: #b5afa4 !important; }
body.se-cfg-active .se-cfg-sum-total { color: #fff !important; border-top-color: #33302a !important; }
/* "More ways to get seen" typography owned outright */
body.se-cfg-active .se-cfg-belowfold .related.products > h2,
body.se-cfg-active .se-cfg-belowfold .upsells.products > h2 { font-family: var(--se-cfg-display) !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: var(--se-cfg-ink) !important; }
body.se-cfg-active .se-cfg-belowfold ul.products li.product .woocommerce-loop-product__title { font-family: var(--se-cfg-font) !important; font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--se-cfg-ink) !important; padding: 12px 14px 0 !important; }
body.se-cfg-active .se-cfg-belowfold ul.products li.product .price,
body.se-cfg-active .se-cfg-belowfold ul.products li.product .price * { font-family: var(--se-cfg-font) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--se-cfg-mut) !important; }

/* ================= build 171: owner spacing + reference details ================= */
/* inline header: group title row carries the selected badge */
body.se-cfg-active .se-cfg-gt-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* addon/finishing cards: three across like the reference */
body.se-cfg-active .se-cfg-addon-group .se-cfg-art-cards,
body.se-cfg-active .se-cfg-addon-group [data-se-cfg-addoncards] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
/* section rhythm: 20px max between panels */
body.se-cfg-active .se-cfg-panel { margin-bottom: 20px !important; }
body.se-cfg-active .se-cfg-panel-head { margin-bottom: 8px !important; }
/* the dark card: reference format + tight consistent gaps */
body.se-cfg-active .se-cfg-sum { margin-top: 12px !important; padding: 16px 20px !important; border-radius: 18px; }
body.se-cfg-active .se-cfg-sum [data-se-cfg-setuprow],
body.se-cfg-active .se-cfg-sum [data-se-cfg-discrow] { display: none !important; }
body.se-cfg-active .se-cfg-sum-line { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0 10px; border-bottom: 1px solid #33302a; font-size: 14.5px; }
body.se-cfg-active .se-cfg-sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; }
body.se-cfg-active .se-cfg-droprow { margin: 12px 0 0 !important; }
/* upload progress bar */
body.se-cfg-active .se-cfg-progress { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 4px; border-radius: 999px; background: #eee7de; overflow: hidden; }
body.se-cfg-active .se-cfg-droprow { position: relative; }
body.se-cfg-active .se-cfg-progress-fill { display: block; height: 100%; width: 0; background: var(--se-cfg-accent, #E50D8A); transition: width .15s ease; }

/* build 174: the dark card, TIGHT */
body.se-cfg-active .se-cfg-sum { padding: 12px 16px !important; }
body.se-cfg-active .se-cfg-sum-line { padding: 0 0 8px !important; font-size: 14px !important; }
body.se-cfg-active .se-cfg-sum-total { padding-top: 8px !important; }
body.se-cfg-active .se-cfg-sum-total strong { font-size: 26px !important; line-height: 1 !important; }

/* build 176: no reserved space from hidden things; tight gap above the dark card */
body.se-cfg-active .se-cfg-page [hidden] { display: none !important; }
body.se-cfg-active .se-cfg-sum { margin-top: 16px !important; }
body.se-cfg-active .se-cfg-proofcard { margin-bottom: 0 !important; }

/* ================= build 177: THE SPACE + pure-CSS reference templates ================= */
/* the native file input renders 430x150 via theme rules — collapse it for good */
body.se-cfg-active .se-cfg-upload-dressed input[type=file],
body.se-cfg-active .se-cfg-upload-dressed .file-input {
	position: absolute !important; width: 1px !important; height: 1px !important;
	opacity: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
	pointer-events: none !important;
}
body.se-cfg-active .se-cfg-upload-dressed .file-drop-area { min-height: 0 !important; height: auto !important; }
/* templates: the reference card by CSS ALONE — no JS required for the layout */
body.se-cfg-active .se-cfg-tplshell { background: #fff; border: 1px solid var(--se-cfg-line); border-radius: 16px; padding: 18px 20px; margin: 0 0 20px; }
body.se-cfg-active .se-cfg-tplhead-s { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
body.se-cfg-active .se-cfg-tplcount-s { font-size: 13px; color: var(--se-cfg-mut); }
body.se-cfg-active .se-cfg-tplshell :is(#related, div):has(> .element.custom-design-element) {
	display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
	margin: 0; padding: 0; border: 0; width: auto !important;
}
body.se-cfg-active .se-cfg-tplshell .element.custom-design-element {
	width: auto !important; max-width: none !important; float: none !important; margin: 0 !important;
	border: 1px solid var(--se-cfg-line) !important; border-radius: 14px !important; overflow: hidden !important;
	background: #fff !important; display: flex !important; flex-direction: column;
}
body.se-cfg-active .se-cfg-tplshell .element.custom-design-element img,
body.se-cfg-active .se-cfg-tplshell .element.custom-design-element svg {
	width: 100% !important; height: auto !important; aspect-ratio: 2 / 1; object-fit: cover; display: block;
}
body.se-cfg-active .se-cfg-tplshell .btn_related_pro {
	align-self: flex-end; margin: 10px 12px 12px !important; border: 0 !important; cursor: pointer;
	background: var(--se-cfg-accent, #E50D8A) !important; color: #fff !important; border-radius: 999px !important;
	padding: 7px 14px !important; font-family: var(--se-cfg-font) !important; font-size: 12px !important; font-weight: 700 !important;
	width: auto !important; line-height: 1.2 !important; text-transform: none !important; text-decoration: none !important; display: inline-block;
}
body.se-cfg-active .se-cfg-tplshell #related_product_header { display: none !important; }
/* related: four across, spanning evenly on desktop */
@media (min-width: 981px) {
	body.se-cfg-active .se-cfg-belowfold ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}

/* build 179: server-side tile bars — name left, Customize right; clickable art */
body.se-cfg-active .se-cfg-tplbar-s { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; margin-top: auto; }
body.se-cfg-active .se-cfg-tplname-s { font-size: 12.5px; font-weight: 600; color: var(--se-cfg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.se-cfg-active .se-cfg-tplbar-s .btn_related_pro { align-self: auto; margin: 0 !important; }

/* build 180: reviews toggle hard-right (like Read description); related 4-up guaranteed */
body.se-cfg-active .se-cfg-revbar { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100%; }
body.se-cfg-active .se-cfg-revbar [data-se-cfg-revtoggle] { margin-left: auto !important; flex: none !important; }

/* build 181: TEMPLATES BACK (dup shortcode call removed in template) + RELATED 4TH INLINE.
   Woo core layout css puts clearfix ::before/::after on ul.products; in our grid they become
   anonymous grid items — the ::before occupied track 1 and pushed the 4th card to row 2.
   Removed here so all four related cards sit inline across the 4 tracks. */
body.se-cfg-active .se-cfg-belowfold .related.products ul.products::before,
body.se-cfg-active .se-cfg-belowfold .related.products ul.products::after,
body.se-cfg-active .se-cfg-belowfold .upsells.products ul.products::before,
body.se-cfg-active .se-cfg-belowfold .upsells.products ul.products::after { content: none !important; display: none !important; }

/* ================= build 182: spacing + reviews polish ================= */
/* the owner's DevTools finding: theme container padding-top 58px — removed on configurator pages */
body.se-cfg-active #main-content .container { padding-top: 0 !important; }
/* gap between the quote line and Finishing: the whole native form.cart sits between the two
   shells; Woo core gives it margin-bottom 2em and the clipped native variation block leaves
   stray box height — collapsed here so the addon (Finishing) panel tucks up under the sizes */
body.se-cfg-active .summary form.cart { margin: 0 !important; }
body.se-cfg-active .summary form.cart .single_variation_wrap .woocommerce-variation,
body.se-cfg-active .summary form.cart .woocommerce-variation-availability { display: none !important; }
body.se-cfg-active .se-cfg-quote-line { margin: 8px 0 0; }
body.se-cfg-active .se-cfg-panels > .se-cfg-panel:first-child,
body.se-cfg-active .se-cfg-panels > .se-cfg-addons { margin-top: 14px; }
/* reviews toggle TRULY right: .se-cfg-tpl-more ships margin:10px auto 26px — the 180 rule only
   overrode margin-LEFT, leaving margin-right:auto = centered in the flex gap. All four margins
   pinned; the description button escapes via inline style, now both match exactly. */
body.se-cfg-active .se-cfg-revbar [data-se-cfg-revtoggle] { margin: 0 0 0 auto !important; flex: none !important; }
/* review form submit: the accent rounded pill (was the blue native square) */
body.se-cfg-active .se-cfg-revbody #respond input#submit,
body.se-cfg-active .se-cfg-revbody #respond .form-submit .submit,
body.se-cfg-active .se-cfg-revbody .comment-form .submit {
	border: none !important; cursor: pointer; background: var(--se-cfg-accent, #E50D8A) !important; color: #fff !important;
	border-radius: 999px !important; padding: 10px 22px !important; font-family: var(--se-cfg-font); font-size: 14px;
	font-weight: 700; line-height: 1.2; text-transform: none; width: auto !important;
}
body.se-cfg-active .se-cfg-revbody #respond input#submit:hover { background: #c50b76 !important; }

/* build 188: the legacy blue haze is gone. se-theme-style.css paints a 74px
   #0c71c3 glow + a bluish gradient onto .summary.entry-summary and #6797ff
   shadows onto the bulk table — that is the "discolored bluish border" around
   the buybox. Neutralized on configurator pages so the card sits flat on the
   warm page background exactly like the standalone UI. */
body.se-cfg-active .st-product-content .summary.entry-summary,
body.se-cfg-active .summary.entry-summary { background-image: none !important; box-shadow: none !important; }
body.se-cfg-active .st-product-content #bulk_discount_values_table,
body.se-cfg-active #bulk_discount_values_table { box-shadow: none !important; }


/* ================= build 190: cleanup pass ================= */
/* badges start where the MAIN image starts (64px rail + 12px gap) — desktop,
   and only when the thumb rail actually exists */
@media (min-width: 901px) {
	/* build 192: the owner's DevTools-approved state verbatim — aligned to the
	   stage (76px) with 10px extra padding-top for the gap under the image */
	body.se-cfg-active .se-cfg-gallery:has(.flex-control-thumbs) .se-cfg-badges { margin-left: 76px; padding-top: 10px; }
}
/* the whole template tile is the link now — pointer + lift affordance */
body.se-cfg-active .se-cfg-tpltile { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
body.se-cfg-active .se-cfg-tpltile:hover { border-color: var(--se-cfg-accent, #E50D8A); box-shadow: 0 4px 18px rgba(23,21,15,.08); }
/* proof lightbox */
body.se-cfg-active .se-cfg-proof-thumb { cursor: zoom-in; }
.se-cfg-lightbox { position: fixed; inset: 0; z-index: 999999; background: rgba(23,21,15,.82); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.se-cfg-lightbox img { max-width: min(92vw, 1100px); max-height: 90vh; width: auto; height: auto; border-radius: 14px; background: #fff; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }


/* build 193: pointer + hover keyed on the ORIGINAL tile class, so the
   affordance exists no matter which dressing path (JS or server) ran */
body.se-cfg-active .element.custom-design-element { cursor: pointer; }
body.se-cfg-active .element.custom-design-element:hover { border-color: var(--se-cfg-accent, #E50D8A); box-shadow: 0 4px 18px rgba(23, 21, 15, .08); }

/* ================= build 202: MOBILE HARDENING (<=900px) =================
   Everything below is media-scoped — desktop is untouched by construction.
   Fixes: (1) gallery skew/overlap — flexslider's inline viewport height could
   disagree with the aspect-ratio images, letting the photo overflow under the
   summary (the "text hovers over the image" screenshots); geometry is now
   hard-locked and the gallery clips as a last resort. (2) NO sticky effects on
   mobile — gallery pinned static, the bottom sticky CTA bar removed entirely.
   (3) cramped multi-column option grids go 1-2 columns so labels stop
   wrapping mid-word. */
@media (max-width: 900px) {
	/* -- no sticky, period -- */
	body.se-cfg-active .se-cfg-gallery { position: static !important; top: auto !important; }
	body.se-cfg-active .se-cfg-stickybar { display: none !important; }
	body.se-cfg-active { padding-bottom: 0 !important; }

	/* -- gallery geometry hard-locked -- */
	body.se-cfg-active .se-cfg-gallery { overflow: hidden; margin-bottom: 18px; }
	body.se-cfg-active .se-cfg-gallery .flex-viewport { height: auto !important; overflow: hidden !important; }
	body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery__image,
	body.se-cfg-active .se-cfg-gallery .flex-viewport { border-radius: 16px; }
	body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery__image img,
	body.se-cfg-active .se-cfg-gallery .woocommerce-product-gallery__wrapper img {
		aspect-ratio: 4 / 3 !important; width: 100% !important; height: auto !important;
		max-height: 72vw; object-fit: cover; display: block;
	}
	body.se-cfg-active .se-cfg-gallery .flex-control-thumbs {
		display: flex !important; flex-direction: row !important; width: auto !important;
		overflow-x: auto; gap: 8px; margin: 10px 0 0 !important; padding-bottom: 2px;
	}
	body.se-cfg-active .se-cfg-gallery .flex-control-thumbs li { width: 56px !important; height: 56px; }
	body.se-cfg-active .se-cfg-gallery .flex-control-thumbs img { width: 56px; height: 56px; }
	body.se-cfg-active .summary.entry-summary { position: static !important; margin-top: 0 !important; transform: none !important; }

	/* -- breathing room for text: option grids stack cleanly -- */
	body.se-cfg-active .se-cfg-art-cards,
	body.se-cfg-active .se-cfg-art-cards.se-cfg-cols-3 { grid-template-columns: 1fr !important; }
	body.se-cfg-active .se-cfg-chips { grid-template-columns: 1fr 1fr !important; }
	body.se-cfg-active .se-cfg-browse-grid { grid-template-columns: 1fr 1fr 1fr !important; }
}

/* ========== build 203: MOBILE TIGHTENING to the owner's mockup (<=900px) ==========
   Structure/order unchanged — this is compression only. Desktop untouched
   (media-scoped). Finishing stays 3-across per the mockup (202's 2-col reverted). */
@media (max-width: 900px) {
	/* wider cards: narrower page gutters */
	body.se-cfg-active .se-cfg-page { padding: 4px 12px 28px; }
	body.se-cfg-active .se-cfg-belowfold { margin-top: 20px; }

	/* badges: HARD 3-column grid — flex kept wrapping because .se-cfg-badge
	   carries flex:none + white-space:nowrap (line 367), so items could never
	   shrink to fit. A 3-track grid makes 3-across structural, not negotiable. */
	body.se-cfg-active .se-cfg-badges { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; margin-top: 10px; }
	body.se-cfg-active .se-cfg-badge { flex: none !important; width: auto !important; min-width: 0 !important; font-size: 10px; padding: 6px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

	/* thumbs tucked closer under the stage */
	body.se-cfg-active .se-cfg-gallery { margin-bottom: 12px; }
	body.se-cfg-active .se-cfg-gallery .flex-control-thumbs { margin-top: 8px !important; gap: 6px; }
	body.se-cfg-active .se-cfg-gallery .flex-control-thumbs li { width: 52px !important; height: 52px; }
	body.se-cfg-active .se-cfg-gallery .flex-control-thumbs img { width: 52px; height: 52px; }

	/* global vertical compression: cards, headings, sections */
	body.se-cfg-active .se-cfg-card { padding: 14px 14px; margin: 0 0 14px; }
	body.se-cfg-active .se-cfg-h2 { font-size: 18px; margin: 0 0 8px; }
	body.se-cfg-active .se-cfg-sizes { margin-bottom: 0; }
	body.se-cfg-active .se-cfg-panels > .se-cfg-panel:first-child,
	body.se-cfg-active .se-cfg-panels > .se-cfg-addons { margin-top: 10px; }
	body.se-cfg-active .se-cfg-quote-line { margin: 6px 0 0; }
	body.se-cfg-active .se-cfg-or { margin: 8px 0 2px; }

	/* the dead band under "Request a quote": collapse the form's trailing space */
	body.se-cfg-active .summary.entry-summary { margin-bottom: 0 !important; padding-bottom: 0 !important; }
	body.se-cfg-active .se-cfg-panels { margin-bottom: 0 !important; padding-bottom: 0 !important; }
	body.se-cfg-active .se-cfg-panels > *:last-child { margin-bottom: 0 !important; }

	/* template tiles: shorter previews, tighter card */
	body.se-cfg-active .se-cfg-tplshell .element.custom-design-element img,
	body.se-cfg-active .se-cfg-tplshell .element.custom-design-element svg,
	body.se-cfg-active .element.custom-design-element img { aspect-ratio: 5 / 2 !important; object-fit: cover; }
	body.se-cfg-active .element.custom-design-element { margin-bottom: 10px !important; }
	body.se-cfg-active .se-cfg-tplbar-s, body.se-cfg-active .se-cfg-tplbar { padding: 8px 10px !important; }

	/* specs: tighter blocks */
	body.se-cfg-active .se-cfg-spec-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 2px; }
	body.se-cfg-active .se-cfg-spec-card { padding: 12px 14px; border-radius: 12px; }
}

/* ===== build 204: size pills + Find-a-size share one row (<=900px) =====
   The pills and the input live in SEPARATE sibling wrappers (.se-cfg-pills /
   .se-cfg-findrow), so they could never share a line. display:contents
   dissolves the pills wrapper — its buttons become direct flex items of
   .se-cfg-sizes and flow in the same wrap as the input, which then fills the
   remaining space beside "6 ft / Custom". Order keeps head/title/chips above.
   Desktop untouched (media-scoped). */
@media (max-width: 900px) {
	body.se-cfg-active .se-cfg-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
	body.se-cfg-active .se-cfg-sizes > .se-cfg-sizes-head { order: -3; flex: 1 1 100%; margin: 0; }
	body.se-cfg-active .se-cfg-sizes > .se-cfg-group-title { order: -2; flex: 1 1 100%; margin: 0; }
	body.se-cfg-active .se-cfg-sizes > .se-cfg-chips { order: -1; flex: 1 1 100%; margin: 0 0 2px; }
	body.se-cfg-active .se-cfg-sizes > .se-cfg-pills { display: contents; }
	body.se-cfg-active .se-cfg-sizes > .se-cfg-findrow { order: 1; flex: 1 1 120px; min-width: 110px; margin: 0; }
	body.se-cfg-active .se-cfg-sizes > .se-cfg-findrow .se-cfg-find { width: 100%; padding: 8px 12px; font-size: 13px; }
	body.se-cfg-active .se-cfg-sizes > .se-cfg-browse { order: 2; flex: 1 1 100%; }
	body.se-cfg-active .se-cfg-sizes > .se-cfg-quote-line { order: 3; flex: 1 1 100%; margin: 4px 0 0; }
}

/* ===== build 205: PROOF CARD OVERFLOW =====
   Root cause: .se-cfg-proof-info is a flex item with no min-width, so it
   inherits min-width:auto and refuses to shrink below the intrinsic width of
   an unbreakable filename ("Screenshot_20260726_160330_Chrome.jpg") — pushing
   the card past the viewport edge. min-width:0 lets it shrink; the wrap rules
   break the filename. Applied at all widths (it only ever engages when a name
   is too long to fit, so normal desktop rendering is unchanged), with size
   tightening scoped to mobile. */
body.se-cfg-active .se-cfg-proofcard { overflow: hidden; max-width: 100%; box-sizing: border-box; }
body.se-cfg-active .se-cfg-proof-info { min-width: 0; flex: 1 1 auto; padding-right: 18px; }
body.se-cfg-active .se-cfg-proof-name,
body.se-cfg-active .se-cfg-proof-title,
body.se-cfg-active .se-cfg-proof-note { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 900px) {
	body.se-cfg-active .se-cfg-proofcard { gap: 10px; padding: 10px 12px; align-items: flex-start; }
	body.se-cfg-active .se-cfg-proof-thumb { width: 76px; align-self: center; }
	body.se-cfg-active .se-cfg-proof-title { font-size: 13.5px; }
	body.se-cfg-active .se-cfg-proof-name { font-size: 12.5px; }
	body.se-cfg-active .se-cfg-proof-note { font-size: 11.5px; }
}

/* ===== build 206: HORIZONTAL OVERFLOW / SIDE-TO-SIDE WIGGLE =====
   Root cause (same class as the 205 proof-card bug): .se-cfg-tiers is a flex
   item with overflow:auto + flex:1 but NO min-width, so it inherits
   min-width:auto and refuses to shrink below the intrinsic width of all five
   discount tiers. Its own overflow:auto therefore never engages and the excess
   width pushes the whole page wider than the viewport — the wiggle. min-width:0
   lets it shrink so the tiers scroll INSIDE their box (still scrollable, as the
   owner wants) instead of widening the page. Applied at all widths: on desktop
   there is room to spare, so rendering is unchanged. */
body.se-cfg-active .se-cfg-tiers { min-width: 0; }
body.se-cfg-active .se-cfg-qty-row { min-width: 0; max-width: 100%; }
body.se-cfg-active .se-cfg-tiers { scrollbar-width: none; }
body.se-cfg-active .se-cfg-tiers::-webkit-scrollbar { height: 0; }

@media (max-width: 900px) {
	/* backstop: nothing may exceed the viewport */
	body.se-cfg-active .se-cfg-page,
	body.se-cfg-active .se-cfg-belowfold { max-width: 100%; overflow-x: hidden; }
	body.se-cfg-active .se-cfg-page img,
	body.se-cfg-active .se-cfg-page canvas,
	body.se-cfg-active .se-cfg-page svg,
	body.se-cfg-active .se-cfg-page iframe,
	body.se-cfg-active .se-cfg-belowfold img { max-width: 100%; }
	body.se-cfg-active .se-cfg-card,
	body.se-cfg-active .se-cfg-panels,
	body.se-cfg-active .se-cfg-panel { max-width: 100%; box-sizing: border-box; }
}

/* build 212: double-sided upload — back dropzone inherits the droprow look; the
   pair-choice card stacks the three options over the lightbox overlay. */
body.se-cfg-active #se_backside_upload_artwork_area { margin-top: 12px; }
body.se-cfg-active #se_backside_upload_artwork_area .se-cfg-droprow { border-style: dashed; }
body.se-cfg-active .se-cfg-pairwrap { display: flex; align-items: center; justify-content: center; }
body.se-cfg-active .se-cfg-paircard { background: #fff; border-radius: 18px; padding: 22px; max-width: 420px; width: calc(100% - 32px); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 18px 60px rgba(23,21,15,.25); }
body.se-cfg-active .se-cfg-pair-title { font-family: var(--se-cfg-display); font-weight: 700; font-size: 18px; color: var(--se-cfg-ink); margin-bottom: 4px; }
body.se-cfg-active .se-cfg-paircard .se-cfg-art-card { width: 100%; text-align: left; }

/* build 216: inline out-of-range note under the custom card. */
body.se-cfg-active .se-cfg-custom-err { color: #c22326; font-size: 13px; font-weight: 600; margin-top: 6px; }

/* build 218: custom card without the duplicate price — a single calm row. */
body.se-cfg-active .se-cfg-customcard { padding: 14px 18px 12px; }
body.se-cfg-active .se-cfg-custom-grid { column-gap: 14px; }
body.se-cfg-active .se-cfg-custom-note { margin-top: 8px; }
