/* =========================================================================
   Studio Presenter Lights — bespoke single-product template
   Loaded only on the studio-presenter-lights product (see inc/enqueue.php).
   Design reference: reference/Presenter Lights Page.html
   All colours / type pull from the theme :root tokens.
   ========================================================================= */

.spl-page {
    overflow-x: hidden;
    background: none;
    color: var(--ink-2);
}
.spl-page img { max-width: 100%; }

/* Shared button (sticky bar + CTA) */
.spl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    justify-content: center;
    height: 48px;
    padding: 0 22px;
    font: 600 var(--fs-btn)/1 var(--fb);
    border: 1px solid transparent;
    border-radius: var(--rs);
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.spl-btn:active { transform: translateY(1px); }
.spl-btn svg {transition:transform var(--dur-1) var(--ease)}
.spl-btn:hover svg {transform:translateX(2px)}
.spl-btn-glow {
	background: var(--orange);
	color: var(--w);
	
}
.spl-btn-glow svg { display: none; }   /* solid buttons drop the arrow (phase 5) */
.spl-btn-glow:hover {
    background: var(--orange-lo);
}

/* Eyebrow */
.spl-eyebrow {
    font-family: var(--fb);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--ls-eyebrow);
    color: var(--tx-3);
    display: block;
    margin-bottom: 16px;
}
.spl-eyebrow-line {display:none}

/* Gradient text */
.spl-grad {
    color: inherit;
}

/* ---------- Sticky purchase bar ---------- */
.spl-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    border-bottom: 1px solid var(--ln);
    transform: translateY(-100%);
    transition: transform .4s var(--ease);
    padding: 14px 24px;
    background: var(--w);
}
.spl-sticky.is-visible { transform: translateY(70px); }
.spl-sticky-in {
	max-width: var(--max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
}
.spl-sticky-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--rs);
    overflow: hidden;
    border: 1px solid var(--ln);
    flex-shrink: 0;
    background: var(--mist);
}
.spl-sticky-thumb img { width: 100%; height: 100%; object-fit: cover; }
.spl-sticky-meta { flex: 1; min-width: 0; }
.spl-sticky-name { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h4); color:var(--tx); line-height:var(--lh-h3); }
.spl-sticky-sub  { font-family: var(--fb); font-size:var(--fs-spec); color:var(--tx-3); margin-top: 2px; }
.spl-sticky-price { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h3); color:var(--tx); }
.spl-sticky-price .amount { color:var(--tx); }

/* ---------- Hero ---------- */
.spl-hero {
    position: relative;
    overflow: hidden;
    padding: 140px 24px 80px;
    background: var(--w);
}
.spl-orb {display:none}
.spl-orb-1 {display:none}
.spl-orb-2 {display:none}
.spl-hero-in { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }

.spl-crumb {
	display: flex; align-items: center; gap: 10px;
	font-family:var(--fb); font-size:var(--fs-spec); color:var(--tx-3);
	margin-bottom: 32px;
}
.spl-crumb a { color: inherit; }
.spl-crumb a:hover { color:var(--tx-2); }
.spl-crumb-cur { color:var(--tx-2); }

.spl-hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 64px;
	align-items: flex-start;
}

/* Gallery */
.spl-gallery-main {
	position: relative;
	border-radius: var(--r);
	overflow: hidden;
	border:1px solid var(--ln);
	
	background: var(--navy-3);
}
.spl-gallery-main img {
	width: 100%; display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	animation: spl-fade .35s ease;
}
.spl-gallery-main img.is-contain { object-fit: contain; padding: 8%; }
.spl-gallery-chip {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 7px 14px;
    border-radius: var(--rs);
    font-family: var(--fb);
    font-size: var(--fs-spec);
    font-weight: 500;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--w);
    color: var(--ink);
    border: 0;
    box-shadow: var(--sh-1);
}
.spl-gallery-chip svg { color:var(--acc-tx); }
.spl-thumbs {
	display: grid;
	grid-template-columns: repeat(var(--spl-thumb-count, 4), 1fr);
	gap: 10px; margin-top: 14px;
}
.spl-thumb {
    padding: 0;
    border-radius: var(--rs);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--ln);
    transition: all .25s var(--ease);
    background: var(--mist);
}
.spl-thumb img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; opacity: .6; transition: opacity .25s; }
.spl-thumb img.is-contain { object-fit: contain; padding: 12%; }
.spl-thumb.is-active { border: 2px solid var(--orange);  }
.spl-thumb.is-active img { opacity: 1; }
.spl-thumb:hover img { opacity: 1; }

/* Purchase rail */
.spl-title {
	font-family: var(--ff); font-weight:var(--fw-display);
	line-height:var(--lh-h2);
	font-size:var(--fs-h2);
	color:var(--tx); margin: 0 0 20px;
}
.spl-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.spl-stars { display: inline-flex; gap: 2px; color:var(--tx); }
.spl-rating-txt { font-family: var(--fb); font-size:var(--fs-caption); color:var(--tx-2); }
.spl-rating-txt strong { color:var(--tx); }
.spl-rating-sep {width:1px;height:14px;background:var(--ln-2)}
.spl-stock { font-family: var(--fb); font-size:var(--fs-caption); color: var(--teal); display: inline-flex; align-items: center; gap: 6px; }
.spl-stock-out { color:var(--tx-3); }
.spl-lede {
	font-family: var(--fb); font-size:var(--fs-body); color:var(--tx-2);
	line-height:var(--lh-body); margin: 0 0 30px; max-width: 540px;
}
.spl-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.spl-pill {
	padding: 7px 14px; border-radius: var(--rs);
	background:var(--sur-2); border:1px solid var(--ln);
	font-family:var(--fb); font-size:var(--fs-spec); font-weight: 500; color:var(--tx-2);
	display: inline-flex; align-items: center; gap: 6px;
}
.spl-pill svg { color: var(--teal); }

/* Buy box */
.spl-buybox {
	padding: 26px 30px; border-radius: var(--r);
	background:var(--sur-2); border:1px solid var(--ln);
	margin-bottom: 20px;
}
.spl-buybox-top { margin-bottom: 22px; }
.spl-price-label {
	font-family: var(--ff); font-size:var(--fs-spec); font-weight: 600;
	letter-spacing:0; color:var(--tx-3);
	margin-bottom: 6px;
}
.spl-price-big {
	font-family: var(--ff); font-weight:var(--fw-display);
	font-size:var(--fs-h2);
	letter-spacing: -.025em; color:var(--tx); line-height: 1;
	display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.spl-price-big .amount,
.spl-price-big .woocommerce-Price-amount { color:var(--tx); }
.spl-price-big del { color:var(--tx-3); font-weight: 500; font-size: .55em; }
.spl-price-big ins { text-decoration: none; }
.spl-price-cur { font-family: var(--fb); font-size:var(--fs-caption); font-weight: 500; color:var(--tx-3); }
.spl-ship-note {
	font-family: var(--fb); font-size:var(--fs-spec); color:var(--tx-3);
	margin-top: 8px; display: inline-flex; align-items: center; gap: 8px;
}
.spl-ship-note svg { color: var(--teal); }

/* WooCommerce add-to-cart form (real) */
.spl-atc { margin: 0; }
.spl-atc form.cart {
	display: flex; align-items: stretch; gap: 12px; margin: 0; flex-wrap: wrap;
}
.spl-atc form.cart .quantity { flex-shrink: 0; }
.spl-atc form.cart .quantity input.qty {
	width: 84px; height: 56px;
	background:var(--sur-2);
	border:1px solid var(--ln-2);
	border-radius: var(--rs);
	color:var(--tx);
	font-family:var(--fb); font-weight: 600; font-size:var(--fs-body);
	text-align: center;
	-moz-appearance: textfield;
}
.spl-atc form.cart .quantity input.qty::-webkit-outer-spin-button,
.spl-atc form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spl-atc form.cart .quantity input.qty:focus { outline: none; border-color: var(--orange); }

/* Quantity stepper (JS-enhanced): −/+ buttons flanking the input as one pill */
.spl-atc form.cart .quantity.spl-qty {
	display: inline-flex; align-items: center;
	border:1px solid var(--ln-2);
	border-radius: var(--rs);
	background:var(--sur-2);
	height: 56px;
}
.spl-atc form.cart .quantity.spl-qty input.qty {
	width: 44px; height: auto;
	border: none; background: transparent; border-radius: 0;
}
.spl-qty-btn {
	width: 44px; height: 54px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: none; cursor: pointer;
	color:var(--tx-2); font-family:var(--fb); font-size:var(--fs-h3); line-height: 1;
	border-radius: var(--rs);
	transition: color .2s, background .2s;
}
.spl-qty-btn:hover {background:var(--sur-2);color:var(--tx)}
.spl-atc .single_add_to_cart_button {
	flex: 1; min-width: 200px;
	height: 56px;
	padding: 0 28px;
	border-radius: var(--rs);
	background: var(--orange); color: var(--w); border: none;
	font-family:var(--fb); font-weight: 600; font-size:var(--fs-body); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	
	transition: all .35s var(--ease);
}
.spl-atc .single_add_to_cart_button:hover {
    background: var(--orange-lo);
}
.spl-atc .single_add_to_cart_button:disabled,
.spl-atc .single_add_to_cart_button.disabled {
	background:var(--sur-2); color:var(--tx-3); box-shadow: none; cursor: not-allowed;
}
.spl-atc .single_add_to_cart_button:disabled:hover,
.spl-atc .single_add_to_cart_button.disabled:hover { transform: none; }
.spl-atc .woocommerce-variation-add-to-cart { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; }

.spl-meta {
	margin-top: 16px;
	font-family: var(--fb); font-size:var(--fs-spec); color:var(--tx-3);
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.spl-meta strong { color:var(--tx-2); font-weight:500; }
.spl-meta-sep { width: 1px; height: 12px; background:var(--sur-2); }

.spl-assurances { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.spl-assure {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--fb); font-size:var(--fs-spec); color:var(--tx-2); line-height: 1.4;
}
.spl-assure svg { color:var(--acc-tx); flex-shrink: 0; }

/* ---------- Tagline strip ---------- */
.spl-tagline {
    padding: var(--sec-y-sm) var(--gutter);
    background: var(--w);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.spl-tagline-in {margin:0 auto;max-width:var(--max);text-align:left}
.spl-tagline p {
    font-family: var(--ff);
    font-weight: 600;
    color: var(--tx);
    margin: 0;
    max-width: 40ch;
    font-size: var(--fs-h2-sm);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}
.spl-tagline p span { color:var(--tx-2); }

/* ---------- In action ---------- */
.spl-action {background:var(--mist);padding:var(--sec-y) var(--gutter)}
.spl-action-in {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--col-gap);
}
.spl-action-copy h2 {
	font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); color:var(--tx); margin: 0 0 20px;
}
.spl-action-copy h2 span {color:inherit}
.spl-action-copy p { font-family: var(--fb); font-size:var(--fs-body); color:var(--tx-2); line-height:var(--lh-body); margin: 0 0 14px; }
.spl-action-copy p:last-child { margin-bottom: 0; }
.spl-action-media {
    position: relative;
    overflow: hidden;
}
.spl-action-media img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Divider ---------- */
.spl-divider {display:none}
.spl-divider > span {
    display: block;
    height: 1px;
    position: relative;
    background: var(--line);
}


/* ---------- Package includes ---------- */
.spl-pkg {background:var(--w);padding:var(--sec-y) var(--gutter)}
.spl-pkg-in { max-width: var(--max); margin: 0 auto; }
.spl-pkg-head { max-width: 720px; margin-bottom: 48px; }
.spl-pkg-head h2 {
	font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); color:var(--tx); margin: 0;
}
.spl-pkg-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.spl-pkg-item {
    display: grid;
    align-items: center;
    padding: 20px 24px;
    border-radius: var(--r);
    background: var(--sur);
    border: 1px solid var(--ln);
    grid-template-columns: 40px 1fr;
    gap: 16px;
}
.spl-pkg-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fb);
    font-weight: 600;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--r-xs);
    background: var(--mist-2);
    color: var(--ink-2);
    font-size: var(--fs-caption);
    letter-spacing: 0;
}
.spl-pkg-t { font-family:var(--fb); font-weight:600; font-size:var(--fs-body); color:var(--tx); letter-spacing: -.015em; margin-bottom: 4px; }
.spl-pkg-s { font-family: var(--fb); font-size:var(--fs-caption); color:var(--tx-2); line-height: 1.55; }

/* ---------- Five reasons ---------- */
.spl-reasons {background:var(--mist);padding:var(--sec-y) var(--gutter)}
.spl-reasons-in { max-width: var(--max); margin: 0 auto; }
.spl-reasons-head { max-width: 760px; margin-bottom: 56px; }
.spl-reasons-head h2 {
	font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); color:var(--tx); margin: 0;
}
.spl-reasons-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.spl-reason {
    display: grid;
    align-items: flex-start;
    padding: 28px 32px;
    border-radius: var(--r-lg);
    background: var(--w);
    border: 0;
    grid-template-columns: 1fr;
    gap: 0;
}
.spl-reason-n {
    display: none;
}
.spl-reason-body {padding-top:0}
.spl-reason-body h3 {
	font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h3); letter-spacing: -.02em;
	color:var(--tx); margin: 0 0 12px; }
.spl-reason-body p { font-family: var(--fb); font-size:var(--fs-body); color:var(--tx-2); line-height:var(--lh-body); margin: 0; }

/* ---------- Related products ---------- */
.spl-related {background:var(--w);padding:var(--sec-y) var(--gutter)}
.spl-page:has(> .spl-compare-sec) + .spl-page > .spl-related { background: var(--mist); }   /* follows the white compare table */
.spl-related-in { max-width: var(--max); margin: 0 auto; }
.spl-related-head {
	display: flex; justify-content: space-between; align-items: flex-end;
	flex-wrap: wrap; gap: 24px; margin-bottom: 48px;
}
.spl-related-head h2 {
	font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); color:var(--tx); margin: 0;
}
.spl-related-all {
    font-family: var(--fb);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--tx);
    transition: color var(--dur-1) var(--ease);
}
.spl-related-all:hover { color:var(--tx); }
.spl-related-grid {display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--grid-gap)}
.spl-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    background: var(--w);
    border: 1px solid var(--line);
    transition: none;
}

.spl-card-media {position:relative;display:block;background:var(--mist);border-bottom:1px solid var(--line)}
.spl-card:has(> .spl-card-media:focus-visible) {outline:2px solid var(--focus);outline-offset:2px}
.spl-card-media img { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.spl-card.is-oos .spl-card-media img {opacity:1}
.spl-card-flag {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--r-xs);
    background: var(--mist-2);
    color: var(--ink-2);
    border: 0;
    font: 600 .75rem/1 var(--fb);
    letter-spacing: .01em;
}
.spl-card-body {display:flex;flex-direction:column;flex:1;padding:20px 22px 24px}
.spl-card-cat {font-family:var(--fb);letter-spacing:0;color:var(--tx-3);margin-bottom:8px;font-size:var(--fs-eyebrow);font-weight:500}
.spl-card-title { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h4); letter-spacing: -.015em; margin: 0 0 14px; line-height:var(--lh-h3); flex: 1; }
.spl-card-title a { color:var(--tx); text-decoration: none; }
.spl-card-title a:hover { color:var(--tx-2); }
.spl-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.spl-card-price {font-family:var(--ff);color:var(--tx);font-size:1.125rem;font-weight:600}
.spl-card-price .amount { color:var(--tx); }
.spl-card-add {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--rs);
    background: var(--w);
    border: 1px solid var(--line-2);
    color: var(--ink);
    font: 600 .875rem/1 var(--fb);
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.spl-card-add:hover {background:var(--mist);border-color:var(--ink-3);color:var(--ink)}
.spl-card-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--rs);
    background: var(--w);
    border: 1px solid var(--line-2);
    color: var(--ink);
    font: 600 .875rem/1 var(--fb);
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.spl-card-read:hover {color:var(--ink);border-color:var(--ink-3);background:var(--mist)}

/* ---------- Contact CTA ---------- */
.spl-cta {background:var(--w);padding:var(--sec-y) var(--gutter)}
.spl-cta-orb {display:none}
.spl-cta-card {
    margin: 0 auto;
    display: grid;
    align-items: center;
    max-width: var(--max-wide);
    padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 72px);
    border-radius: var(--r-xl);
    background: var(--navy);
    border: 0;
    grid-template-columns: minmax(0, 1.2fr) auto;
    gap: var(--col-gap);
}
.spl-cta-copy h2 {
    font-family: var(--ff);
    font-weight: var(--fw-display);
    font-size: var(--fs-h2);
    color: var(--tx);
    margin: 0 0 16px;
    max-width: 20ch;
}
.spl-cta-copy p {font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2);line-height:var(--lh-body);margin:0;max-width:52ch}
.spl-cta-btn {justify-self:start}

/* ---------- Compare table (Backdrop Set: set vs standalone) ---------- */
.spl-compare-sec {background:var(--w);padding:var(--sec-y) var(--gutter)}
.spl-compare-in {margin:0 auto;max-width:var(--max)}
.spl-compare-head { max-width: 720px; margin-bottom: 36px; }
.spl-compare-head h2 { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); color:var(--tx); margin: 0; }
.spl-compare {overflow:hidden;background:var(--sur);border:1px solid var(--ln);border-radius:var(--r)}
.spl-compare-row {display:grid;grid-template-columns:1.2fr 1.4fr 1.4fr;border-bottom:1px solid var(--ln);align-items:center;padding:16px 20px}
.spl-compare-row.is-last { border-bottom: none; }
.spl-compare-row--head {padding:14px 20px;background:var(--sur-2);border-bottom:1px solid var(--ln-2)}
.spl-compare-col-a {font-family:var(--fb);font-size:var(--fs-spec);letter-spacing:0;display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--tx)}
.spl-compare-dot {width:8px;height:8px;border-radius:50%;background:var(--teal)}
.spl-compare-col-b {font-family:var(--fb);font-size:var(--fs-spec);letter-spacing:0;color:var(--tx-3);font-weight:500}
.spl-compare-k {font-family:var(--fb);font-size:var(--fs-caption);font-weight:500;color:var(--tx)}
.spl-compare-a { display: flex; align-items: center; gap: 10px; font-family: var(--fb); font-size:var(--fs-body); color:var(--tx); }
.spl-compare-check {width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--r-xs);background:var(--teal-wash);color:var(--teal)}
.spl-compare-b { font-family: var(--fb); font-size:var(--fs-body); color:var(--tx-3); }
@media (max-width: 600px) {
	
	.spl-compare-row, .spl-compare-row--head { grid-template-columns: 1fr; gap: 6px; padding: 16px 20px; }
	.spl-compare-row--head > div:first-child { display: none; }
	.spl-compare-k {font-size:var(--fs-spec);letter-spacing:0;color:var(--tx-3)}
}

/* =========================================================================
   Lightboard Classic (flagship) — extra sections
   ========================================================================= */
.spl-eyebrow--teal {color:var(--tx-3)}
.spl-grad--teal {color:inherit}
.spl-muted {color:var(--tx-2)}

/* Hero: bestseller badge + right-aligned location chip */
.spl-gallery-badge {
	position: absolute; top: 18px; left: 18px;
	padding: 8px 18px; border-radius: var(--rs);
	background: var(--orange); color: var(--w);
	font-family:var(--fb); font-size:var(--fs-spec); font-weight:600; letter-spacing:0; 
}
.spl-gallery-chip--right { left: auto; right: 18px; }

/* Hero buybox — gradient border + secondary quote button */
.spl-buybox--classic {
    border-color: var(--ln-2);
    background: var(--sur-2);
}
.spl-buy-quote {
	display: flex; align-items: center; justify-content: center;
	margin-top: 12px; padding: 14px 28px;
	border-radius: var(--rs); border:1px solid var(--ln-2);
	background: transparent; color:var(--tx);
	font-family:var(--fb); font-weight: 600; font-size:var(--fs-caption); text-decoration: none;
	transition: all .25s var(--ease);
}
.spl-buy-quote:hover { background:var(--sur-2); border-color:var(--ln-2); }

/* Spec strip */
.spl-specstrip {padding:48px 24px;background:var(--w);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spl-specstrip-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.spl-strip-item { padding: 4px 24px; border-left:1px solid var(--ln); }
.spl-strip-item:first-child { border-left: none; }
.spl-strip-val { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); letter-spacing: -.025em; color:var(--tx); line-height: 1; margin-bottom: 8px; }
.spl-strip-lab { font-family:var(--fb); font-size:var(--fs-spec); font-weight:500; letter-spacing:0; color:var(--tx-3); }
.spl-strip-sub { font-family: var(--fb); font-size:var(--fs-spec); color:var(--tx-2); margin-top: 6px; line-height: 1.5; }

/* Feature rows */
.spl-feature {background:var(--w);padding:var(--sec-y) var(--gutter)}
.spl-feature + .spl-feature, .spl-feature.pdp-training { background: var(--mist); }
.spl-feature-in {max-width:var(--max);margin:0 auto;display:grid;align-items:center;grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);gap:var(--col-gap)}
.spl-feature-in--flip {grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr)}
.spl-feature-copy h2 { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); color:var(--tx); margin: 0 0 20px; }
.spl-feature-copy p { font-family: var(--fb); font-size:var(--fs-body); color:var(--tx-2); line-height:var(--lh-body); margin: 0 0 16px; }
.spl-feature-bullets { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.spl-feature-bullets li { display: flex; gap: 12px; align-items: flex-start; font-family: var(--fb); font-size:var(--fs-body); color:var(--tx-2); line-height: 1.6; }
.spl-feature-bullets svg { color: var(--teal); flex-shrink: 0; margin-top: 4px; }
.spl-feature-media {position:relative;overflow:hidden}
.spl-feature-media img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* Flip & publish */
.spl-flip { padding: 110px 24px; background: var(--navy-2); position: relative; overflow: hidden; }
.spl-flip-orb {display:none}
.spl-flip-in { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }
.spl-flip-head { max-width: 760px; margin-bottom: 48px; }
.spl-flip-head h2 { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); color:var(--tx); margin: 0 0 18px; }
.spl-flip-head p { font-family: var(--fb); font-size:var(--fs-body); color:var(--tx-2); line-height:var(--lh-body); margin: 0; }
.spl-flip-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.spl-flip-step { padding: 32px 30px; border-radius: var(--r); background:var(--sur-2); border:1px solid var(--ln); }
.spl-flip-n { font-family:var(--fb); font-weight:600; font-size:var(--fs-stat); color: var(--teal); line-height: 1; margin-bottom: 18px; }
.spl-flip-t { font-family:var(--fb); font-weight:600; font-size:var(--fs-body-lg); color:var(--tx); letter-spacing: -.015em; margin-bottom: 8px; }
.spl-flip-s { font-family: var(--fb); font-size:var(--fs-caption); color:var(--tx-2); line-height:var(--lh-body); }

/* What's included */
.spl-incl {background:var(--w);padding:var(--sec-y) var(--gutter)}
/* The pen page paints this section navy inline (pre-specs-lightboard-pen-accessories.php) — markup is out of scope, so the light surface wins here. */
.spl-incl[style] { background: var(--w) !important; }
.spl-incl-in { max-width: var(--max); margin: 0 auto; }
.spl-incl-head { max-width: 760px; margin-bottom: 48px; }
.spl-incl-head h2 { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); color:var(--tx); margin: 0 0 18px; }
.spl-incl-head p { font-family: var(--fb); font-size:var(--fs-body); color:var(--tx-2); line-height:var(--lh-body); margin: 0; }
.spl-incl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.spl-incl-card {border-radius:var(--r);padding:24px 26px;background:var(--sur);border:1px solid var(--ln)}
.spl-incl-icon {display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-xs);background:var(--teal-wash);color:var(--teal);margin-bottom:16px}
.spl-incl-icon svg { width: 20px; height: 20px; }
.spl-incl-t { font-family:var(--fb); font-weight:600; font-size:var(--fs-body); color:var(--tx); letter-spacing: -.015em; margin-bottom: 8px; }
.spl-incl-s { font-family: var(--fb); font-size:var(--fs-caption); color:var(--tx-2); line-height: 1.6; }

/* Spec table */
.spl-spectable {padding:100px 24px;background:var(--mist)}
.spl-spectable-in { max-width: var(--max); margin: 0 auto; }
.spl-spectable-head { max-width: 720px; margin-bottom: 48px; }
.spl-spectable-head h2 { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); color:var(--tx); margin: 0; }
.spl-spectable-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.spl-spectable-card { border-radius: var(--r); background:var(--sur-2); border:1px solid var(--ln); overflow: hidden; }
.spl-spectable-gtitle { padding: 18px 28px; border-bottom:1px solid var(--ln); font-family:var(--fb); font-size:var(--fs-spec); font-weight: 600; letter-spacing:0; color:var(--acc-tx); }
.spl-spectable-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; padding: 16px 28px; border-bottom:1px solid var(--ln); }
.spl-spectable-row.is-last { border-bottom: none; }
.spl-spectable-k { font-family: var(--fb); font-size:var(--fs-caption); color:var(--tx-3); }
.spl-spectable-v { font-family:var(--fb); font-size:var(--fs-caption); font-weight: 500; color:var(--tx); }

/* Comparison on Classic uses navy (vs navy-2 on Backdrop) */
.spl-compare-sec--dark {background:var(--w)}
.spl-compare-lede { font-family: var(--fb); font-size:var(--fs-body); color:var(--tx-2); line-height:var(--lh-body); margin: 18px 0 0; }

/* Testimonial */
.spl-quote {padding:100px 24px;position:relative;overflow:hidden;background:var(--mist)}
.spl-quote-orb {display:none}
.spl-quote-in { max-width: 920px; margin: 0 auto; position: relative; z-index: 1; text-align: center; }
.spl-quote-stars { display: inline-flex; gap: 4px; color:var(--tx); margin-bottom: 24px; }
.spl-quote-text { font-family: var(--ff); font-weight: 600; letter-spacing: -.02em; line-height:var(--lh-h2); font-size:var(--fs-h2); color:var(--tx); margin: 0 0 32px; }
.spl-quote-name { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h4); color:var(--tx-2); }
.spl-quote-role { font-family: var(--fb); font-size:var(--fs-caption); color:var(--tx-3); margin-top: 4px; }

/* FAQ (native details/summary) */
.spl-faq {background:var(--w);border-top:1px solid var(--line);padding:var(--sec-y) var(--gutter)}
.spl-faq-in { max-width: 920px; margin: 0 auto; }
.spl-faq-head {margin-bottom:40px;text-align:left}
.spl-faq-head h2 { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); color:var(--tx); margin: 0; }
.spl-faq-list { display: flex; flex-direction: column; gap: 12px; }
.spl-faq-item {border-radius:var(--r);overflow:hidden;background:var(--sur);border:1px solid var(--ln);transition:border-color var(--dur-1) var(--ease)}
.spl-faq-item[open] { border-color:var(--ln-2);  }
.spl-faq-q {list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;font-family:var(--fb);color:var(--tx);font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em;padding:20px 24px}
.spl-faq-q:focus-visible {outline-offset:-4px;border-radius:var(--r)}
.spl-faq-q::-webkit-details-marker { display: none; }
.spl-faq-q > span:first-child { flex: 1; }
.spl-faq-mark {position:relative;flex-shrink:0;border:1px solid var(--ln-2);color:var(--tx-2);width:28px;height:28px;border-radius:var(--r-xs);transition:color var(--dur-1) var(--ease)}
.spl-faq-mark::before, .spl-faq-mark::after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; background: currentColor; transform: translate(-50%, -50%); transition: opacity .2s, transform .2s; }
.spl-faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.spl-faq-item[open] .spl-faq-mark {color:var(--tx)}
.spl-faq-item[open] .spl-faq-mark::after { opacity: 0; }
.spl-faq-a {padding:0 24px 22px}
.spl-faq-a p { font-family: var(--fb); font-size:var(--fs-body); color:var(--tx-2); line-height:var(--lh-body); margin: 0; }

/* Studio upsell */
.spl-upsell {background:var(--mist);padding:var(--sec-y) var(--gutter)}
.spl-page:has(> .spl-reasons) + .spl-page > .spl-upsell { background: var(--w); }   /* follows the mist reasons list */ /* was navy — slate breaks the dark run (PDP rhythm pass 2026-07-17) */
.spl-upsell-card {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
    overflow: hidden;
    max-width: var(--max);
    border-radius: var(--r-lg);
    background: var(--w);
    border: 1px solid var(--line);
}
.spl-upsell-media { position: relative; min-height: 380px; }
.spl-upsell-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spl-upsell-body {display:flex;flex-direction:column;justify-content:center;padding:48px}
.spl-upsell-body h2 { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); color:var(--tx); margin: 0 0 18px; }
.spl-upsell-body p { font-family: var(--fb); font-size:var(--fs-body); color:var(--tx-2); line-height:var(--lh-body); margin: 0 0 28px; }
.spl-upsell-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.spl-btn-ghost {background:transparent;color:var(--tx);border:1px solid var(--ln-2)}
.spl-btn-ghost:hover {background:var(--sur-2);border-color:var(--tx-3)}

@media (max-width: 960px) {
	.spl-specstrip-in { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
	.spl-strip-item:nth-child(odd) { border-left: none; }
	.spl-feature-in, .spl-feature-in--flip { grid-template-columns: 1fr; gap: 40px; }
	.spl-feature-in .spl-feature-media { order: -1; }
	.spl-flip-steps { grid-template-columns: 1fr; }
	.spl-incl-grid { grid-template-columns: 1fr 1fr; }
	.spl-spectable-grid { grid-template-columns: 1fr; }
	.spl-upsell-card { grid-template-columns: 1fr; }
	.spl-upsell-media { min-height: 240px; }
}
@media (max-width: 600px) {
	.spl-specstrip-in { grid-template-columns: 1fr; }
	.spl-strip-item { border-left: none; padding: 0; }
	.spl-feature, .spl-flip, .spl-incl, .spl-spectable, .spl-quote, .spl-faq, .spl-upsell { padding-left: var(--gutter); padding-right: var(--gutter); }
	.spl-incl-grid { grid-template-columns: 1fr; }
	.spl-upsell-body {padding:32px 24px}
}

/* =========================================================================
   Black Backdrop — out-of-stock / notify-me state
   ========================================================================= */
.spl-gallery-badge--oos {
	background:var(--sur-2); color:var(--tx-2); box-shadow: none;
	 
}
.spl-oos-pill {
	padding: 8px 16px; border-radius: var(--rs);
	background:var(--sur-2); color:var(--tx-2); border:1px solid var(--ln);
	font-family:var(--fb); font-size:var(--fs-spec); font-weight:600; letter-spacing:0;
	white-space: nowrap;
}
.spl-stock-dot {width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--ink-4)}
.spl-notify { margin-bottom: 8px; }
.spl-notify-label { font-family:var(--fb); font-size:var(--fs-spec); font-weight:500; letter-spacing:0; color:var(--tx-2); margin-bottom: 10px; }
.spl-notify-form { display: flex; gap: 8px; }
.spl-notify-input {
	flex: 1; min-width: 0; padding: 14px 16px;
	background:var(--sur-2); border:1px solid var(--ln); border-radius: var(--rs);
	font-family: var(--fb); font-size:var(--fs-caption); color:var(--tx); outline: none;
	transition: all .25s var(--ease);
}
.spl-notify-input:focus { border-color: var(--orange); box-shadow:var(--sh-focus); }
.spl-notify-btn {
	padding: 14px 22px; border-radius: var(--rs);
	background: var(--orange); color: var(--w); border: none;
	font-family:var(--fb); font-weight: 600; font-size:var(--fs-caption); cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
	 transition: all .25s var(--ease);
}
.spl-notify-btn:hover {background:var(--orange-lo)}
.spl-notify-success {
	padding: 18px 22px; border-radius: var(--rs);
	background:var(--teal-wash); border:1px solid var(--ln-2);
	display: flex; align-items: center; gap: 12px;
	font-family: var(--fb); font-size:var(--fs-caption); color:var(--tx);
}
.spl-notify-success svg { color: var(--teal); flex-shrink: 0; }
.spl-notify-error { margin: 8px 0 0; font-family: var(--fb); font-size:var(--fs-spec); color:var(--acc-tx); }
.spl-notify-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Alternative-callout: text left, image right */
.spl-upsell-card--text-first { grid-template-columns: 1.2fr 1fr; }

/* =========================================================================
   Lightboard Portable — coming-soon teaser (single full-height hero)
   ========================================================================= */
.ptp-page {overflow-x:hidden;background:var(--w);color:var(--ink-2)}
.ptp-hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 140px 24px 90px;
    background: var(--w);
}
.ptp-orb {display:none}
.ptp-orb-1 {display:none}
.ptp-orb-2 {display:none}
.ptp-in { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

.ptp-status {
	display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px;
	padding: 8px 16px 8px 12px; border-radius: var(--rs);
	background:var(--sur-2); border:1px solid var(--ln);
	font-family:var(--fb); font-size:var(--fs-spec); font-weight:500; letter-spacing:0; color:var(--tx-2);
}
.ptp-ping { position: relative; display: inline-flex; width: 8px; height: 8px; }

.ptp-ping::after { content: ''; position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

.ptp-title { font-family: var(--ff); font-weight:var(--fw-display); line-height:var(--lh-h2); font-size:var(--fs-h2); color:var(--tx); margin: 0 0 24px; }
.ptp-lede { font-family: var(--fb); font-size:var(--fs-body-lg); color:var(--tx-2); line-height:var(--lh-body); max-width: 480px; margin: 0 0 36px; }

.ptp-hints { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.ptp-hint {
	padding: 8px 16px; border-radius: var(--rs);
	background:var(--sur-2); border:1px solid var(--ln);
	font-family:var(--fb); font-size:var(--fs-spec); font-weight: 500; color:var(--tx-2);
	display: inline-flex; align-items: center; gap: 8px;
}
.ptp-hint svg { color: var(--teal); }

/* Notify signup */
.ptp-notify { max-width: 480px; }
.ptp-notify-field {
	display: flex; gap: 8px; padding: 6px; border-radius: var(--rs);
	background:var(--sur-2); border:1px solid var(--ln-2);
	transition: all .25s var(--ease);
}
.ptp-notify-field:focus-within { border-color: var(--orange);  }
.ptp-notify-input {
	flex: 1; min-width: 0; background: transparent; border: none; outline: none;
	padding: 12px 18px; font-family: var(--fb); font-size:var(--fs-body); color:var(--tx);
}
.ptp-notify-input::placeholder { color:var(--tx-3); }
.ptp-notify-btn {
	padding: 13px 26px; border-radius: var(--rs); border: none; cursor: pointer;
	background: var(--orange); color: var(--w);
	font-family:var(--fb); font-weight: 600; font-size:var(--fs-caption);
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
	 transition: all .25s var(--ease);
}
.ptp-notify-btn:hover {background:var(--orange-lo)}
.ptp-notify-note { font-family: var(--fb); font-size:var(--fs-spec); color:var(--tx-3); margin-top: 12px; padding-left: 8px; }
.ptp-notify-error { font-family: var(--fb); font-size:var(--fs-spec); color:var(--acc-tx); margin: 10px 0 0; padding-left: 8px; }
.ptp-notify-success {
	display: inline-flex; align-items: center; gap: 14px;
	padding: 16px 24px; border-radius: var(--rs);
	background:var(--teal-wash); border: 1px solid var(--teal);
}
.ptp-notify-success-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color:var(--tx); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ptp-notify-success span:last-child { font-family:var(--fb); font-size:var(--fs-body); font-weight: 600; color:var(--tx); }
.ptp-notify-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Media */
.ptp-media { position: relative; }
.ptp-media-glow {display:none}
.ptp-media-frame {
	position: relative; border-radius: var(--r); overflow: hidden;
	border:1px solid var(--ln);
	
	background: var(--navy-3);
}
.ptp-media-frame img { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; }

.ptp-tag {
    position: absolute;
    z-index: 1;
    padding: 8px 14px;
    border-radius: var(--rs);
    font-family: var(--fb);
    font-size: var(--fs-spec);
    font-weight: 500;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--w);
    color: var(--ink);
    border: 0;
}
.ptp-tag--top { top: 18px; left: 18px; letter-spacing:0; }
.ptp-tag--bottom { bottom: 18px; left: 18px; }
.ptp-tag svg { color:var(--acc-tx); }


@media (max-width: 860px) {
	.ptp-in { grid-template-columns: 1fr; gap: 48px; }
	.ptp-media { order: -1; max-width: 420px; }
	.ptp-hero { min-height: 0; padding: 130px 20px 72px; }
}
@media (max-width: 480px) {
	.ptp-notify-field { flex-direction: column; border-radius: var(--r); }
	.ptp-notify-btn { justify-content: center; }
}

/* =========================================================================
   Lightboard Pen Accessories — colour swatch strip + palette band
   (rest of the page reuses .spl-hero / .spl-feature / .spl-incl / .spl-faq)
   ========================================================================= */
.spl-assurances--two { grid-template-columns: 1fr 1fr; }

/* Hero colour-swatch strip (under the product image) */
.pn-swatch-strip {margin-top:14px;padding:18px 20px;border-radius:var(--r);background:var(--sur-2);border:0}
.pn-swatch-label { font-family:var(--fb); font-size:var(--fs-spec); font-weight:500; letter-spacing:0; color:var(--tx-3); margin-bottom: 14px; }
.pn-swatch-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pn-swatch-dot {aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2)}

/* Palette band */
.pn-palette {padding:var(--sec-y) var(--gutter);background:var(--mist)}
.pn-palette-in { max-width: var(--max); margin: 0 auto; }
.pn-palette-head { max-width: 680px; margin-bottom: 44px; }
.pn-palette-head h2 { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h2); color:var(--tx); margin: 0; }
.pn-palette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pn-color-card {padding:24px;border-radius:var(--r-lg);background:var(--w);border:0}
.pn-color-bar {width:100%;height:8px;margin-bottom:20px;border-radius:var(--r-xs)}
.pn-color-meta { display: flex; align-items: center; gap: 12px; }
.pn-color-swatch {width:32px;height:32px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--line-2)}
/* inline colour glows on the pen swatches (markup) — Nova has no glows: an edge on the dot, nothing on the bar */
.pn-color-swatch[style] { box-shadow: inset 0 0 0 1px var(--line-2) !important; }
.pn-color-bar[style] { box-shadow: none !important; }
.pn-color-name { font-family: var(--ff); font-weight:var(--fw-display); font-size:var(--fs-h4); color:var(--tx); letter-spacing: -.01em; }
.pn-color-hex { font-family: var(--fb); font-size:var(--fs-spec); color:var(--tx-3); margin-top: 2px; }

@media (max-width: 760px) {
	.pn-palette-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	
	.spl-assurances--two { grid-template-columns: 1fr; }
}

@keyframes spl-fade { from { opacity: 0; transform: scale(.99); } to { opacity: 1; transform: scale(1); } }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.spl-hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.spl-action-in { grid-template-columns: 1fr; gap: 40px; }
	.spl-action-media { order: -1; }
	.spl-pkg-grid { grid-template-columns: 1fr; }
	.spl-related-grid { grid-template-columns: repeat(2, 1fr); }
	.spl-cta-card { grid-template-columns: 1fr; gap: 28px; }
	.spl-sticky-meta, .spl-sticky-sub { display: none; }
}
@media (max-width: 600px) {
	.spl-hero { padding: 120px 20px 60px; }
	.spl-action, .spl-pkg, .spl-reasons, .spl-related, .spl-cta { padding-left: var(--gutter); padding-right: var(--gutter); }
	.spl-assurances { grid-template-columns: 1fr; }
	.spl-related-grid { grid-template-columns: 1fr; }
	.spl-reason {grid-template-columns:1fr;padding:24px 20px;gap:0}
	.spl-reason-n { font-size:var(--fs-stat); }
	.spl-reason-body { padding-top: 0; }
	.spl-cta-card {padding:36px 24px;border-radius:var(--r-lg)}
	.spl-atc .single_add_to_cart_button { min-width: 0; }
	.spl-sticky-price { display: none; }
}

/* Delta §9.3: the arrow nudge is off for reduced motion */
@media (prefers-reduced-motion: reduce) {
	.spl-btn:hover svg { transform: none; }
}