/* NCP Companion — one variable-driven stylesheet for both content types and all
   four presets. Controls write inline CSS vars per instance; unset vars fall back
   to these defaults. Everything is scoped under .ncp-block so themes are never
   fought with !important. Enqueued only when a shortcode/widget renders. */

.ncp-block {
	/* defaults — inline styles from a placement override these per instance */
	--ncp-accent: #f47c21;
	--ncp-h-size: 15px;
	--ncp-h-weight: 650;
	--ncp-h-color: inherit;
	--ncp-h-transform: none;
	--ncp-h-spacing: 0;
	--ncp-title-size: 13px;
	--ncp-title-weight: 600;
	--ncp-title-color: inherit;
	--ncp-badge-bg: rgba(0, 0, 0, .06);
	--ncp-badge-color: #555;
	--ncp-icon-color: var(--ncp-accent);
	--ncp-card-bg: #fff;
	--ncp-border-color: rgba(0, 0, 0, .1);
	--ncp-radius: 8px;
	--ncp-gap: 9px;
	--ncp-pad: 10px;
	--ncp-columns: 1;
	--ncp-hover-bg: rgba(0, 0, 0, .02);
	--ncp-hover-border: var(--ncp-accent);

	margin: 1.25rem 0;
}

.ncp-block * {
	box-sizing: border-box;
}

.ncp-heading {
	margin: 0 0 .7rem;
	font-size: var(--ncp-h-size);
	font-weight: var(--ncp-h-weight);
	color: var(--ncp-h-color);
	text-transform: var(--ncp-h-transform);
	letter-spacing: var(--ncp-h-spacing);
	line-height: 1.3;
}

/* ---- shared item bits ---- */
.ncp-items {
	display: flex;
	flex-direction: column;
	gap: var(--ncp-gap);
}

.ncp-badge {
	flex: none;
	align-self: flex-start;
	padding: .15rem .5rem;
	font-size: .72rem;
	font-weight: 650;
	letter-spacing: .03em;
	text-transform: uppercase;
	background: var(--ncp-badge-bg);
	color: var(--ncp-badge-color);
	border-radius: 999px;
}
.ncp-badge-square .ncp-badge { border-radius: 4px; }
.ncp-badge-text .ncp-badge { background: transparent; color: var(--ncp-accent); padding-left: 0; padding-right: 0; }
.ncp-badge-hidden .ncp-badge { display: none; }

/* ---- documents ---- */
.ncp-doc {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: var(--ncp-pad);
	border: 1px solid var(--ncp-border-color);
	border-radius: var(--ncp-radius);
	background: var(--ncp-card-bg);
}
.ncp-doc-ic { flex: none; display: inline-flex; }
.ncp-doc-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--ncp-icon-color); stroke-width: 1.8; }
.ncp-doc-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ncp-doc-title { font-size: var(--ncp-title-size); font-weight: var(--ncp-title-weight); color: var(--ncp-title-color); overflow-wrap: anywhere; }
.ncp-doc-meta { font-size: .78em; opacity: .7; white-space: nowrap; } /* v0.19.0 — pages · size, only when NCP sent them */
.ncp-doc-link { margin-left: auto; white-space: nowrap; color: var(--ncp-accent); font-weight: 600; text-decoration: none; }
.ncp-doc-link:hover { text-decoration: underline; }
.ncp-doc:hover { border-color: var(--ncp-hover-border); background: var(--ncp-hover-bg); }

/* Minimal List = the DEFAULT preset and the v0.1.0 legacy look: it deliberately
   keeps the base bordered-box row (border + radius + card bg), so a v0.1.0
   placement upgraded to v0.2.0 with no settings touched renders identically. It
   is NOT restyled here (that is the whole point of the KEEP contract). */

/* card grid */
.ncp-layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--ncp-columns), minmax(0, 1fr));
}
.ncp-layout-grid .ncp-doc.ncp-card {
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.ncp-layout-grid .ncp-doc.ncp-card .ncp-doc-ic {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--ncp-accent);
}
.ncp-layout-grid .ncp-doc.ncp-card .ncp-doc-ic svg { stroke: #fff; }
.ncp-layout-grid .ncp-doc.ncp-card .ncp-doc-link { margin-left: 0; }

/* showcase — large, media-forward rows */
.ncp-layout-showcase { gap: calc(var(--ncp-gap) + 2px); }
.ncp-layout-showcase .ncp-doc { padding: calc(var(--ncp-pad) + 4px); }

/* accordion */
.ncp-acc {
	border: 1px solid var(--ncp-border-color);
	border-radius: var(--ncp-radius);
	margin-bottom: var(--ncp-gap);
	overflow: hidden;
}
.ncp-acc-sum {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem .85rem;
	font-size: var(--ncp-title-size);
	font-weight: 650;
	cursor: pointer;
	background: rgba(0, 0, 0, .02);
}
.ncp-acc-sum::-webkit-details-marker { display: none; }
.ncp-acc-n { margin-left: auto; font-size: .72rem; font-weight: 650; color: var(--ncp-accent); }
.ncp-acc-body { padding: .3rem .85rem .6rem; }
.ncp-acc-body .ncp-doc { border: 0; border-radius: 0; background: transparent; padding: .45rem 0; }
.ncp-acc-body .ncp-doc:hover { background: transparent; }

/* ---- videos ---- */
.ncp-videos .ncp-items.ncp-layout-grid { display: grid; grid-template-columns: repeat(var(--ncp-columns), minmax(0, 1fr)); }
.ncp-video { margin: 0; }
.ncp-video-embed {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* overridden inline per aspect control */
	background: #000;
	border-radius: var(--ncp-radius);
	overflow: hidden;
}
.ncp-video-embed .ncp-video-frame,
.ncp-video-embed .ncp-video-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.ncp-video-embed .ncp-video-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: underline;
}
.ncp-video-cap { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; }
.ncp-video-title { min-width: 0; font-size: var(--ncp-title-size); font-weight: var(--ncp-title-weight); color: var(--ncp-title-color); overflow-wrap: anywhere; }

/* showcase videos: media + caption side by side on wide screens */
.ncp-videos .ncp-layout-showcase .ncp-video { display: grid; grid-template-columns: minmax(160px, 40%) 1fr; gap: 14px; align-items: center; }
.ncp-videos .ncp-layout-showcase .ncp-video-cap { margin-top: 0; flex-direction: column; align-items: flex-start; }

@media (max-width: 640px) {
	.ncp-layout-grid,
	.ncp-videos .ncp-items.ncp-layout-grid { grid-template-columns: 1fr; }
	.ncp-videos .ncp-layout-showcase .ncp-video { grid-template-columns: 1fr; }
}

/* ===================================================================
   v0.3.0 — new inline preset layouts (parameterized by existing vars)
   =================================================================== */
/* Cinema — video-first, large dark posters */
.ncp-layout-cinema { display: grid; grid-template-columns: repeat(var(--ncp-columns), minmax(0, 1fr)); gap: var(--ncp-gap); }
.ncp-videos .ncp-layout-cinema .ncp-video-embed { border-radius: var(--ncp-radius); }
.ncp-layout-cinema .ncp-doc.ncp-card { flex-direction: column; align-items: flex-start; background: #241c14; color: #f6efe6; border-color: rgba(0,0,0,.3); }
.ncp-layout-cinema .ncp-doc.ncp-card .ncp-doc-title { color: #fff; }
/* Masonry — tiled mixed content via CSS columns */
.ncp-layout-masonry { display: block; column-count: var(--ncp-columns); column-gap: var(--ncp-gap); }
.ncp-layout-masonry > * { break-inside: avoid; margin-bottom: var(--ncp-gap); }
.ncp-videos .ncp-layout-masonry .ncp-video { display: inline-block; width: 100%; }
/* Tab Split — denser two-column split */
.ncp-layout-tabsplit { display: grid; grid-template-columns: repeat(var(--ncp-columns), minmax(0, 1fr)); gap: var(--ncp-gap); }
@media (max-width: 640px) { .ncp-layout-cinema, .ncp-layout-tabsplit { grid-template-columns: 1fr; } .ncp-layout-masonry { column-count: 1; } }

/* ===================================================================
   v0.3.0 — placements (trigger chips, media grid, drawer, floating)
   =================================================================== */
body.ncp-noscroll { overflow: hidden; }

.ncp-trg { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; color: inherit; cursor: pointer; }
.ncp-trg:hover { background: rgba(0,0,0,.03); }
.ncp-trg-i { width: 17px; height: 17px; fill: none; stroke: var(--ncp-accent, #f47c21); stroke-width: 1.9; }
.ncp-trg-c { font-size: 11px; font-weight: 700; background: rgba(244,124,33,.14); color: var(--ncp-accent, #f47c21); border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; }

.ncp-media-block { margin: 1rem 0; }
.ncp-msec { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a7a66; margin: 4px 0 10px; }
.ncp-msec:not(:first-child) { margin-top: 20px; }
.ncp-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ncp-media-block--compact .ncp-mgrid { grid-template-columns: 1fr; }
.ncp-mcard { display: block; text-align: left; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; padding: 0; font: inherit; color: inherit; width: 100%; }
.ncp-mcard:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); }
.ncp-mv { position: relative; display: block; aspect-ratio: 16/9; background: #241c14 center/cover no-repeat; }
.ncp-mv-b { position: absolute; top: 8px; left: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: rgba(0,0,0,.6); color: #fff; padding: 2px 7px; border-radius: 5px; }
.ncp-mv-d { position: absolute; bottom: 8px; right: 8px; font-size: 10px; font-weight: 600; background: rgba(0,0,0,.75); color: #fff; padding: 1px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.ncp-mv-p { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.85); display: grid; place-items: center; }
.ncp-mv-p svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.ncp-mt { padding: 11px 13px; }
.ncp-mn { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.ncp-ms { display: block; font-size: 11px; color: #8a7a66; margin-top: 2px; }
.ncp-dlist { display: grid; gap: 8px; }
.ncp-dcard { display: flex; align-items: center; gap: 11px; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 12px 14px; background: #fff; }
.ncp-di { width: 36px; height: 36px; border-radius: 9px; background: rgba(244,124,33,.12); display: grid; place-items: center; flex: none; }
.ncp-di svg { width: 17px; height: 17px; fill: none; stroke: var(--ncp-accent, #f47c21); stroke-width: 1.8; }
.ncp-dc-main { min-width: 0; }
.ncp-dc-n { display: block; font-size: 12.5px; font-weight: 600; }
.ncp-dc-l { font-size: 11.5px; color: var(--ncp-accent, #f47c21); font-weight: 600; text-decoration: none; }
.ncp-dc-t { margin-left: auto; flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(0,0,0,.06); color: #8a7a66; padding: 3px 8px; border-radius: 999px; }

/* drawer */
.ncp-dmask { position: fixed; inset: 0; background: rgba(20,16,12,.5); z-index: 100000; display: none; }
.ncp-dmask.is-on { display: block; }
.ncp-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 92vw); background: #fff; box-shadow: -8px 0 40px rgba(0,0,0,.25); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 100001; display: flex; flex-direction: column; }
.ncp-drawer.is-on { transform: translateX(0); }
.ncp-dwhdr { flex: none; padding: 16px 18px; border-bottom: 1px solid rgba(0,0,0,.1); display: flex; align-items: center; justify-content: space-between; }
.ncp-dwhdr h4 { margin: 0; font-size: 15px; font-weight: 650; }
.ncp-dwx { width: 32px; height: 32px; border: 1px solid rgba(0,0,0,.12); border-radius: 50%; background: #fff; color: #8a7a66; cursor: pointer; font-size: 16px; line-height: 1; }
.ncp-dwbody { flex: 1; overflow-y: auto; padding: 16px 18px; }

/* v0.20.0 — THE VIDEO CARD IN THE SIDE PANEL AND THE WOO TAB, OUT OF THE THEME'S REACH (0d).
   The card is a <button>. A theme that styles every button (WoodMart's own rule is
   :is(.btn,.button,button,[type=submit],[type=button]) — one class's weight — with display:inline-flex,
   align-items:center, a fixed min-height, uppercase text) beat the one-class rules above whenever its
   stylesheet came later: the card became a row, the poster span — whose only children are absolutely
   placed — was 0 px wide, so no poster showed, and the badge, the title and the platform sat on top
   of each other in capitals ("YOUTUBE VIDEO / YOUTUBE / FEATURES"). These rules carry a class, a
   class and the element (0,2,1), so a theme's or Elementor kit's button rule cannot win any more. */
.ncp-media-block button.ncp-mcard { -webkit-appearance: none; appearance: none; display: block; position: relative; box-sizing: border-box; width: 100%; max-width: none; height: auto; min-height: 0; margin: 0; padding: 0; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; overflow: hidden; background: #fff; color: inherit; font: inherit; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: normal; text-transform: none; text-align: left; text-decoration: none; text-shadow: none; white-space: normal; vertical-align: top; box-shadow: none; cursor: pointer; }
.ncp-media-block button.ncp-mcard:hover, .ncp-media-block button.ncp-mcard:focus { background: #fff; color: inherit; border-color: rgba(0,0,0,.1); box-shadow: 0 6px 18px rgba(0,0,0,.09); }
.ncp-media-block button.ncp-mcard .ncp-mv { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; padding: 0; background-color: #241c14; background-position: center; background-size: cover; background-repeat: no-repeat; }
.ncp-media-block button.ncp-mcard .ncp-mt { display: block; padding: 11px 13px; text-transform: none; letter-spacing: normal; }
.ncp-media-block button.ncp-mcard .ncp-mn, .ncp-media-block button.ncp-mcard .ncp-ms { text-transform: none; letter-spacing: normal; }
.ncp-media-block button.ncp-mcard .ncp-mv-b { text-transform: uppercase; letter-spacing: .05em; }
.ncp-drawer button.ncp-dwx { -webkit-appearance: none; appearance: none; display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; margin: 0; border: 1px solid rgba(0,0,0,.12); border-radius: 50%; background: #fff; color: #8a7a66; box-shadow: none; font-size: 16px; line-height: 1; text-transform: none; }

/* ===================================================================
   v0.20.0 — THE MEDIA BUTTON (NCP Media Drawer widget / [ncp_media_drawer]), prototype v2 tab 6.
   Only printed when a style is chosen; with none, the widget prints today's .ncp-trg unchanged.
   Isolated like the card above (button + two classes), so Elementor's own controls — written as
   {{WRAPPER}} .ncp-mb, three classes — still win, and a theme's button rule does not.
   =================================================================== */
button.ncp-mb.ncp-mb { --ncp-mb-a: #e8641b; --ncp-mb-soft: rgba(232,100,27,.1); --ncp-mb-tint: rgba(232,100,27,.14); -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px; position: relative; overflow: hidden; box-sizing: border-box; width: auto; max-width: 100%; height: auto; min-height: 0; margin: 0; padding: 12px 16px; border: 1.5px solid var(--ncp-mb-a); border-radius: 12px; background: #fff; color: #2b2622; font: inherit; font-size: 14.5px; font-weight: 400; line-height: 1.25; letter-spacing: normal; text-transform: none; text-align: left; text-decoration: none; text-shadow: none; white-space: normal; vertical-align: middle; box-shadow: none; cursor: pointer; transition: transform .15s, box-shadow .15s; }
button.ncp-mb.ncp-mb:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
button.ncp-mb.ncp-mb:focus-visible { outline: 2px solid var(--ncp-mb-a); outline-offset: 2px; }
button.ncp-mb.ncp-mb--full { display: flex; width: 100%; }
.ncp-mb .ncp-mb-i { display: block; width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ncp-mb-a); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ncp-mb .ncp-mb-i .ncp-mb-i-f { fill: var(--ncp-mb-a); }
.ncp-mb .ncp-mb-tx { display: block; flex: 1; min-width: 0; }
.ncp-mb .ncp-mb-l { display: block; font-weight: 600; line-height: 1.25; }
.ncp-mb .ncp-mb-s { display: block; font-size: 12px; line-height: 1.35; color: #6b655c; margin-top: 1px; }
.ncp-mb .ncp-mb-c { display: inline-block; flex: none; border-radius: 99px; padding: 2px 9px; font-size: 12px; font-weight: 600; line-height: 1.4; background: var(--ncp-mb-tint); color: var(--ncp-mb-a); font-variant-numeric: tabular-nums; }
.ncp-mb .ncp-mb-ar { display: inline-block; flex: none; font-size: 18px; line-height: 1; color: var(--ncp-mb-a); transition: transform .15s; }
.ncp-mb:hover .ncp-mb-ar { transform: translateX(4px); }
.ncp-mb .ncp-mb-th { display: flex; flex: none; }
.ncp-mb .ncp-mb-th img { display: block; width: 40px; height: 40px; max-width: none; margin: 0 0 0 -12px; padding: 0; border: 2px solid #fff; border-radius: 9px; object-fit: cover; background: #f3f1ec; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.ncp-mb .ncp-mb-th img:first-child { margin-left: 0; }
button.ncp-mb.ncp-mb--soft { border-color: transparent; background: var(--ncp-mb-soft); }
button.ncp-mb.ncp-mb--solid { background: var(--ncp-mb-a); color: #fff; }
button.ncp-mb.ncp-mb--dark { background: #241c14; border-color: #241c14; color: #fff; }
.ncp-mb--solid .ncp-mb-i, .ncp-mb--solid .ncp-mb-ar, .ncp-mb--dark .ncp-mb-ar { color: #fff; stroke: #fff; }
.ncp-mb--solid .ncp-mb-i .ncp-mb-i-f { fill: #fff; }
.ncp-mb--solid .ncp-mb-s, .ncp-mb--dark .ncp-mb-s { color: rgba(255,255,255,.82); }
.ncp-mb--solid .ncp-mb-c { background: rgba(255,255,255,.22); color: #fff; }
.ncp-mb--dark .ncp-mb-c { background: var(--ncp-mb-a); color: #fff; }
button.ncp-mb.ncp-mb--solid.ncp-mb--light { color: #241c14; }
.ncp-mb--solid.ncp-mb--light .ncp-mb-i, .ncp-mb--solid.ncp-mb--light .ncp-mb-ar { color: #241c14; stroke: #241c14; }
.ncp-mb--solid.ncp-mb--light .ncp-mb-i .ncp-mb-i-f { fill: #241c14; }
.ncp-mb--solid.ncp-mb--light .ncp-mb-s { color: rgba(36,28,20,.75); }
.ncp-mb--solid.ncp-mb--light .ncp-mb-c { background: rgba(0,0,0,.1); color: #241c14; }
button.ncp-mb.ncp-mb--line { border: 0; border-bottom: 1.5px solid var(--ncp-mb-a); border-radius: 0; padding-left: 2px; padding-right: 2px; background: transparent; }
button.ncp-mb.ncp-mb--line:hover { box-shadow: none; }
button.ncp-mb.ncp-mb--s { padding: 8px 12px; gap: 9px; }
.ncp-mb--s .ncp-mb-l { font-size: 13px; }
button.ncp-mb.ncp-mb--l { padding: 16px 20px; gap: 14px; }
.ncp-mb--l .ncp-mb-l { font-size: 16.5px; }
.ncp-mb--l .ncp-mb-i { width: 26px; height: 26px; }
button.ncp-mb.ncp-mb--line.ncp-mb--s, button.ncp-mb.ncp-mb--line.ncp-mb--l { padding-left: 2px; padding-right: 2px; }
button.ncp-mb.ncp-mb--pill { border-radius: 99px; }
button.ncp-mb.ncp-mb--square { border-radius: 3px; }
button.ncp-mb.ncp-mb--line.ncp-mb--pill, button.ncp-mb.ncp-mb--line.ncp-mb--square { border-radius: 0; }
/* "Catch the eye": a light sweep across the button. It never runs for a shopper whose device asks for less motion. */
.ncp-mb--shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.6) 50%, transparent 58%); transform: translateX(-100%); animation: ncp-mb-sweep 3.4s infinite; pointer-events: none; }
@keyframes ncp-mb-sweep { 55%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
	.ncp-mb--shine::after { animation: none; display: none; }
	button.ncp-mb.ncp-mb, .ncp-mb .ncp-mb-ar { transition: none; }
	button.ncp-mb.ncp-mb:hover, .ncp-mb:hover .ncp-mb-ar { transform: none; }
}
.ncp-mb-empty { padding: 10px 12px; border: 1px dashed rgba(0,0,0,.25); border-radius: 8px; font-size: 12.5px; color: #6b655c; }

/* floating launcher — v0.19.0: label, colour, corners, side and a phone offset are settings
   (NCP Companion › Floating button). Isolated like the viewer: the theme's button rules
   (uppercase, min-height, borders) cannot reach it, because every rule here starts at the ID. */
#ncp-floater, #ncp-floater :where(*:not(svg):not(svg *)) { all: revert; box-sizing: border-box; }
#ncp-floater.ncp-floater { position: fixed; bottom: var(--ncp-fl-off, 20px); right: 20px; left: auto; top: auto; display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 12px 17px; width: auto; height: auto; min-height: 0; border: none; border-radius: var(--ncp-fl-r, 999px); background: var(--ncp-fl-bg, #241c14); color: var(--ncp-fl-fg, #fff); font: inherit; font-weight: 650; font-size: 13px; line-height: 1.2; letter-spacing: normal; text-transform: none; text-decoration: none; cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.3); z-index: 99999; -webkit-appearance: none; appearance: none; }
#ncp-floater.ncp-floater--left { right: auto; left: 20px; }
#ncp-floater .ncp-trg-i { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; flex: none; }
#ncp-floater .ncp-floater-c { display: inline-block; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.2); color: inherit; border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
#ncp-floater.ncp-floater--light .ncp-floater-c { background: rgba(0,0,0,.1); }
@media (max-width: 640px) { #ncp-floater.ncp-floater { bottom: var(--ncp-fl-off-m, var(--ncp-fl-off, 20px)); } }

/* ===================================================================
   v0.19.0 — the media viewer, rebuilt to the approved storefront prototype (tab 1).
   ISOLATED FROM THE THEME: every element inside #ncp-viewer is first reverted to the browser's
   own styles (an ID beats the theme's and Elementor kit's class rules on button/img/a), then
   styled by rules that also start at the ID. SVG is left out of the revert so its drawing
   attributes survive. No global reset: nothing here reaches outside the dialog.
   =================================================================== */
#ncp-viewer, #ncp-viewer :where(*:not(svg):not(svg *)) { all: revert; box-sizing: border-box; }
#ncp-viewer [hidden] { display: none !important; }
#ncp-viewer.ncp-vmask { --ncp-v-accent: #e8641b; --ncp-v-ink: #2b2622; --ncp-v-ink2: #55514a; --ncp-v-mute: #8c877e; --ncp-v-line: #e7e4de; --ncp-v-line2: #f1efea; --ncp-v-stage: #f3f1ec;
	position: fixed; inset: 0; z-index: 100010; display: none; align-items: center; justify-content: center; padding: 24px; margin: 0; background: rgba(30,28,25,.62);
	font-family: inherit; font-size: 13px; line-height: 1.45; color: var(--ncp-v-ink); text-align: left; -webkit-text-size-adjust: 100%; }
#ncp-viewer.ncp-vmask[data-open="1"] { display: flex; }
#ncp-viewer button, #ncp-viewer input, #ncp-viewer a { font: inherit; color: inherit; }
#ncp-viewer button { -webkit-appearance: none; appearance: none; margin: 0; text-transform: none; letter-spacing: normal; min-height: 0; min-width: 0; box-shadow: none; }
#ncp-viewer button:focus-visible, #ncp-viewer a:focus-visible, #ncp-viewer input:focus-visible, #ncp-viewer .ncp-zstage:focus-visible { outline: 2px solid var(--ncp-v-accent); outline-offset: 2px; }
#ncp-viewer .ncp-vmodal { display: flex; flex-direction: column; width: min(94vw, 1180px); height: min(90vh, 820px); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
#ncp-viewer .ncp-vmodal:fullscreen { width: 100%; height: 100%; border-radius: 0; }
#ncp-viewer .ncp-vmodal:-webkit-full-screen { width: 100%; height: 100%; border-radius: 0; }

/* header: product name · tabs with counts · close */
#ncp-viewer .ncp-vhdr { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ncp-v-line); flex: none; }
#ncp-viewer .ncp-vname { display: block; flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ncp-viewer .ncp-vseg { display: flex; gap: 4px; background: var(--ncp-v-line2); border-radius: 9px; padding: 3px; flex: none; }
#ncp-viewer .ncp-vhtab { display: inline-block; border: 0; background: transparent; border-radius: 7px; padding: 6px 12px; font-weight: 500; font-size: 13px; line-height: 1.3; color: var(--ncp-v-ink2); cursor: pointer; white-space: nowrap; }
#ncp-viewer .ncp-vhtab.is-on { background: #fff; color: var(--ncp-v-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
#ncp-viewer .ncp-vhtab b { font-weight: 500; color: var(--ncp-v-mute); margin-left: 3px; }
#ncp-viewer .ncp-vclose { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--ncp-v-line); background: #fff; cursor: pointer; font-size: 18px; line-height: 1; flex: none; }

#ncp-viewer .ncp-vpanel { display: none; flex: 1; min-height: 0; flex-direction: column; }
#ncp-viewer .ncp-vpanel.is-on { display: flex; }

/* images: the stage. The photo box (.ncp-zw) is sized and placed by the script — the whole photo
   always fits first, centred with even margins; never a grid row that can crop it. */
#ncp-viewer .ncp-zstage { display: block; position: relative; flex: 1; min-height: 0; background: var(--ncp-v-stage); overflow: hidden; touch-action: none; cursor: zoom-in; -webkit-user-select: none; user-select: none; }
#ncp-viewer .ncp-zstage.is-zoomed { cursor: grab; }
#ncp-viewer .ncp-zstage.is-drag { cursor: grabbing; }
#ncp-viewer .ncp-zstage.is-nozoom { cursor: default; } /* v0.20.0 — the photo is already at its real size */
#ncp-viewer .ncp-zw { display: block; position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.06); overflow: hidden; }
#ncp-viewer .ncp-zimg { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; pointer-events: none; border: 0; }
#ncp-viewer .ncp-zstage.is-broken .ncp-zw { visibility: hidden; }
#ncp-viewer .ncp-zcnt { position: absolute; left: 14px; top: 12px; background: rgba(30,28,25,.72); color: #fff; font-size: 11.5px; border-radius: 99px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
#ncp-viewer .ncp-zhint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(30,28,25,.72); color: #fff; font-size: 11.5px; border-radius: 99px; padding: 3px 11px; white-space: nowrap; pointer-events: none; }
#ncp-viewer .ncp-zstate { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); max-width: calc(100% - 24px); background: #fff4d6; color: #7a4f00; border: 1px solid #f0d98c; font-size: 12px; border-radius: 8px; padding: 6px 11px; text-align: center; }
#ncp-viewer .ncp-zstage.is-broken .ncp-zstate { bottom: auto; top: 45%; }
#ncp-viewer .ncp-znav { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--ncp-v-line); background: rgba(255,255,255,.92); cursor: pointer; font-size: 20px; line-height: 1; }
#ncp-viewer .ncp-znav--p { left: 12px; }
#ncp-viewer .ncp-znav--n { right: 12px; }
#ncp-viewer .ncp-zmm { display: block; position: absolute; right: 12px; top: 12px; width: 92px; background: #fff; border: 1px solid var(--ncp-v-line); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.12); cursor: default; }
#ncp-viewer .ncp-zmm-img { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; }
#ncp-viewer .ncp-zmm-r { position: absolute; display: block; border: 2px solid var(--ncp-v-accent); background: rgba(232,100,27,.14); border-radius: 2px; }
#ncp-viewer .ncp-zbar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,.96); border: 1px solid var(--ncp-v-line); border-radius: 99px; padding: 3px 6px; box-shadow: 0 2px 10px rgba(0,0,0,.1); cursor: default; white-space: nowrap; }
#ncp-viewer .ncp-zbar button { display: inline-block; border: 0; background: transparent; border-radius: 99px; min-width: 30px; height: 30px; padding: 0 9px; cursor: pointer; font-size: 12.5px; font-weight: 500; line-height: 30px; color: var(--ncp-v-ink); white-space: nowrap; }
#ncp-viewer .ncp-zbar button:hover { background: var(--ncp-v-line2); }
#ncp-viewer .ncp-zr { display: inline-block; width: 120px; margin: 0 4px; accent-color: var(--ncp-v-accent); }
#ncp-viewer .ncp-zpc { display: inline-block; font-variant-numeric: tabular-nums; font-size: 12px; min-width: 46px; text-align: center; color: var(--ncp-v-ink2); }
#ncp-viewer .ncp-zdv { display: inline-block; width: 1px; height: 18px; background: var(--ncp-v-line); margin: 0 3px; }

/* the strip under the stage — thumbnails (images) or the video list, on every width */
#ncp-viewer .ncp-vstrip { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--ncp-v-line); overflow-x: auto; flex: none; background: #fff; }
#ncp-viewer .ncp-ithumb { display: block; width: 64px; height: 64px; flex: none; border-radius: 8px; border: 2px solid transparent; background: var(--ncp-v-stage); padding: 3px; cursor: pointer; overflow: hidden; }
#ncp-viewer .ncp-ithumb.is-on { border-color: var(--ncp-v-accent); }
#ncp-viewer .ncp-ithumb img { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; }

/* videos: 16:9, never cropped, the list under it */
#ncp-viewer .ncp-vvid { display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; background: #16130f; padding: 16px; container-type: size; }
#ncp-viewer .ncp-vframe { display: block; position: relative; width: 100%; max-width: 900px; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #3a2c22, #16130f); border-radius: 8px; overflow: hidden; }
@supports (width: 1cqh) { #ncp-viewer .ncp-vframe { width: min(100cqw, 900px, calc(100cqh * 16 / 9)); max-width: none; } }
#ncp-viewer .ncp-poster { display: grid; place-items: center; position: absolute; inset: 0; background: #241c14 center/cover no-repeat; }
#ncp-viewer .ncp-pbtn { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border-radius: 50%; background: var(--ncp-v-accent); border: 0; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
#ncp-viewer .ncp-pbtn svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
#ncp-viewer .ncp-player { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
#ncp-viewer .ncp-vinfo { display: block; flex: none; padding: 9px 16px 0; background: #fff; }
#ncp-viewer .ncp-vtitle { display: block; font-size: 13.5px; font-weight: 600; }
#ncp-viewer .ncp-vmeta { display: block; font-size: 11.5px; color: var(--ncp-v-mute); margin-top: 1px; }
#ncp-viewer .ncp-vlist { border-top: 0; }
#ncp-viewer .ncp-vitem { display: flex; flex-direction: column; gap: 5px; width: 150px; flex: none; padding: 3px; border: 2px solid transparent; border-radius: 9px; background: none; cursor: pointer; text-align: left; }
#ncp-viewer .ncp-vitem.is-on { border-color: var(--ncp-v-accent); }
#ncp-viewer .ncp-vth { display: grid; place-items: center; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background: #241c14 center/cover no-repeat; }
#ncp-viewer .ncp-vth svg { width: 16px; height: 16px; fill: rgba(255,255,255,.85); }
#ncp-viewer .ncp-vth-d { position: absolute; bottom: 3px; right: 4px; font-size: 9px; font-weight: 600; background: rgba(0,0,0,.75); color: #fff; padding: 0 4px; border-radius: 3px; font-variant-numeric: tabular-nums; }
#ncp-viewer .ncp-vi { display: block; min-width: 0; padding: 0 2px 2px; }
#ncp-viewer .ncp-vi-n { display: -webkit-box; font-size: 12px; font-weight: 600; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ncp-viewer .ncp-vi-m { display: block; font-size: 10.5px; color: var(--ncp-v-mute); margin-top: 2px; }

/* documents: rows with View and Download */
#ncp-viewer .ncp-vdocs { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 8px; overflow: auto; padding: 16px; }
#ncp-viewer .ncp-drow { display: flex; gap: 12px; align-items: center; border: 1px solid var(--ncp-v-line); border-radius: 10px; padding: 12px 14px; }
#ncp-viewer .ncp-drow-ic { display: grid; place-items: center; width: 38px; height: 46px; border-radius: 5px; background: #fdeee3; color: #b4480a; font-size: 10px; font-weight: 700; flex: none; }
#ncp-viewer .ncp-drow-t { display: block; flex: 1; min-width: 0; }
#ncp-viewer .ncp-drow-n { display: block; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
#ncp-viewer .ncp-drow-m { display: block; color: var(--ncp-v-mute); font-size: 12px; }
#ncp-viewer .ncp-drow-a { display: flex; gap: 8px; flex: none; }
#ncp-viewer .ncp-dbtn { display: inline-block; border: 1px solid var(--ncp-v-line); background: #fff; border-radius: 7px; padding: 7px 12px; font-size: 12.5px; font-weight: 500; line-height: 1.3; cursor: pointer; color: var(--ncp-v-ink); white-space: nowrap; text-decoration: none; text-align: center; }
#ncp-viewer .ncp-dbtn--pri { background: var(--ncp-v-accent); border-color: var(--ncp-v-accent); color: #fff; }
#ncp-viewer .ncp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* phone: the viewer fills the screen; slider and Full size step aside (pinch does both) */
@media (max-width: 640px) {
	#ncp-viewer.ncp-vmask { padding: 0; }
	#ncp-viewer .ncp-vmodal { width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
	#ncp-viewer .ncp-vhdr { flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
	#ncp-viewer .ncp-vname { order: 1; }
	#ncp-viewer .ncp-vclose { order: 2; }
	#ncp-viewer .ncp-vseg { order: 3; width: 100%; }
	#ncp-viewer .ncp-vhtab { flex: 1; padding: 7px 4px; text-align: center; }
	#ncp-viewer .ncp-zbar .ncp-zr, #ncp-viewer .ncp-zbar .ncp-z1 { display: none; }
	#ncp-viewer .ncp-vstrip { padding: 8px 12px; }
	#ncp-viewer .ncp-vvid { padding: 8px; }
	#ncp-viewer .ncp-drow { flex-wrap: wrap; }
	#ncp-viewer .ncp-drow-a { width: 100%; }
	#ncp-viewer .ncp-dbtn { flex: 1; }
}

/* ===================================================================
   v0.3.0 — warranty badge (W9). v0.19.0 adds styles, icons, sizes and corners; with none
   of them set the badge is exactly the v0.3.0 look. The colour now drives the tint and the
   coverage line too (the plugin writes --ncp-w-bg / --ncp-w-cov from it), so a badge set to
   blue is no longer blue on green.
   =================================================================== */
.ncp-wbadge { --ncp-w-accent: #2e7d4f; --ncp-w-bg: rgba(46,125,79,.1); --ncp-w-cov: #3d7a54; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--ncp-w-accent); border-radius: 12px; padding: 11px 15px; background: var(--ncp-w-bg); max-width: 420px; }
.ncp-wbadge--inline .ncp-wb-cov { display: none; }
.ncp-wb-i { display: inline-flex; flex: none; }
.ncp-wb-i svg { width: 22px; height: 22px; fill: none; stroke: var(--ncp-w-accent); stroke-width: 1.8; flex: none; }
.ncp-wb-term { display: block; font-size: 13px; font-weight: 650; color: var(--ncp-w-accent); }
.ncp-wb-cov { display: block; font-size: 11px; color: var(--ncp-w-cov); margin-top: 1px; }
.ncp-wb-link { display: inline-block; font-size: 11px; color: var(--ncp-w-cov); text-decoration: underline; margin-top: 2px; }
.ncp-wbadge--soft { border-color: transparent; }
.ncp-wbadge--solid { background: var(--ncp-w-accent); border-color: var(--ncp-w-accent); }
.ncp-wbadge--solid .ncp-wb-term { color: #fff; }
.ncp-wbadge--solid .ncp-wb-cov, .ncp-wbadge--solid .ncp-wb-link { color: rgba(255,255,255,.88); }
.ncp-wbadge--solid .ncp-wb-i svg { stroke: #fff; }
.ncp-wbadge--line { background: transparent; border: 0; border-left: 3px solid var(--ncp-w-accent); border-radius: 0; padding: 4px 0 4px 12px; }
.ncp-wbadge--line .ncp-wb-term { color: #2b2622; }
.ncp-wbadge--card { background: #fff; border: 1px solid rgba(0,0,0,.1); box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 14px 16px; }
.ncp-wbadge--card .ncp-wb-term { color: #2b2622; }
.ncp-wbadge--card .ncp-wb-i svg { width: 28px; height: 28px; }
.ncp-wbadge--s { padding: 7px 11px; gap: 7px; }
.ncp-wbadge--s .ncp-wb-term { font-size: 12px; }
.ncp-wbadge--s .ncp-wb-i svg { width: 18px; height: 18px; }
.ncp-wbadge--l { padding: 15px 20px; gap: 13px; }
.ncp-wbadge--l .ncp-wb-term { font-size: 15px; }
.ncp-wbadge--l .ncp-wb-cov, .ncp-wbadge--l .ncp-wb-link { font-size: 12.5px; }
.ncp-wbadge--l .ncp-wb-i svg { width: 28px; height: 28px; }
.ncp-wbadge--line.ncp-wbadge--s { padding: 2px 0 2px 10px; }
.ncp-wbadge--line.ncp-wbadge--l { padding: 6px 0 6px 14px; }
.ncp-wbadge--pill { border-radius: 999px; }
.ncp-wbadge--square { border-radius: 3px; }
.ncp-wbadge--line.ncp-wbadge--pill, .ncp-wbadge--line.ncp-wbadge--square { border-radius: 0; }
/* v0.20.0 — Width: full (the store default or [ncp_warranty_badge width="full"]); per device in Elementor. */
.ncp-wbadge--full { display: flex; width: 100%; max-width: none; box-sizing: border-box; }

/* ===================================================================
   v0.19.0 — NCP Product Identity ([ncp_product_identity] / the widget). The plugin prints the
   whole line itself, so every part can be styled; Elementor's own controls (typography,
   alignment, separator, colours — per device) write to the variables below.
   =================================================================== */
.ncp-ident { --ncp-ident-sep: "·"; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: var(--ncp-ident-jc, flex-start); gap: 4px 0; margin: 0 0 .6em; }
.ncp-ident-it { white-space: nowrap; }
.ncp-ident-l { font-weight: var(--ncp-ident-lw, 600); color: var(--ncp-ident-lc, inherit); }
.ncp-ident-v { font-weight: var(--ncp-ident-vw, 400); color: var(--ncp-ident-vc, inherit); }
.ncp-ident-v a { color: inherit; }
.ncp-ident-sep { display: var(--ncp-ident-sep-d, inline); padding: 0 9px; opacity: .55; }
.ncp-ident-sep::before { content: var(--ncp-ident-sep); }
.ncp-ident--sep-space { --ncp-ident-sep: ""; }
.ncp-ident--sep-space .ncp-ident-sep { padding: 0 6px; }
.ncp-ident--sep-bar { --ncp-ident-sep: "|"; }
.ncp-ident--sep-line { --ncp-ident-sep-d: none; flex-direction: column; align-items: var(--ncp-ident-jc, flex-start); gap: 3px; }
.ncp-ident-copy { border: 0; background: transparent; color: inherit; opacity: .6; cursor: pointer; padding: 0 0 0 5px; margin: 0; font: inherit; font-size: .85em; line-height: 1; min-height: 0; box-shadow: none; text-transform: none; }
.ncp-ident-copy:hover { opacity: 1; }
.ncp-ident-copy svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -.1em; }
.ncp-ident-copy.is-done { opacity: 1; }

/* ===================================================================
   v0.4.0 — variation selector (linked variation families). Buy-box rows
   of sibling-page links; reuses --ncp-accent. Options are LINKS (page swap),
   never Woo variation inputs. Disabled = discontinued / unavailable (visible,
   not dead links).
   =================================================================== */
.ncp-vsel { margin: 14px 0 18px; }
.ncp-vsel-h { font-size: var(--ncp-h-size, 15px); font-weight: var(--ncp-h-weight, 650); margin: 0 0 10px; }
.ncp-vsel-row { margin-bottom: 14px; }
.ncp-vsel-l { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a7a66; margin-bottom: 7px; }
.ncp-vsel-l b { color: inherit; font-weight: 650; text-transform: none; letter-spacing: 0; margin-left: 4px; font-size: 12px; }
.ncp-vsel-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.ncp-vsel-sw { padding: 8px 14px; border: 1.5px solid rgba(0,0,0,.16); border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; background: #fff; color: inherit; text-decoration: none; display: inline-block; line-height: 1.2; }
a.ncp-vsel-sw:hover { border-color: rgba(0,0,0,.42); }
.ncp-vsel-sw.is-on { border-color: var(--ncp-accent, #f47c21); background: rgba(244,124,33,.12); cursor: default; }
.ncp-vsel-sw.ncp-vsel-dis { opacity: .45; cursor: not-allowed; background: rgba(0,0,0,.03); }
.ncp-vsel-sw.ncp-vsel-disc { border-style: dashed; color: #b8860b; cursor: not-allowed; }
.ncp-vsel-tag { font-size: 10px; opacity: .85; }

/* v0.5.0 — Wayfair-grade SWATCH TILES + tooltips (scoped to .ncp-vsel-sw2).
   v0.7.0 — every dimension is a --ncp-vsel-* variable so the 6 presets + the
   Elementor control stack parameterize this ONE renderer (G4): shape/size/gap/
   border/radius/columns/caption/selected+hover/disabled-opacity all flow in. */
.ncp-vsel-sw2 .ncp-vsel-opts { gap: var(--ncp-vsel-gap, 12px); align-items: flex-start; }
.ncp-vsel-sw2 .ncp-vsel-sw { position: relative; padding: 0; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 5px; width: auto; min-width: var(--ncp-vsel-size, 56px); max-width: calc(var(--ncp-vsel-size, 56px) + 48px); line-height: 1.2; }
.ncp-vsel-sw2 .ncp-vsel-box { width: var(--ncp-vsel-size, 56px); height: var(--ncp-vsel-size, 56px); border-radius: var(--ncp-vsel-radius, 10px); border: var(--ncp-vsel-border, 2px) solid rgba(0,0,0,.16); overflow: hidden; display: grid; place-items: center; box-sizing: border-box; background: #f4ede2; }
.ncp-vsel-sw2 .ncp-vsel-box-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ncp-vsel-sw2 .ncp-vsel-box-txt { font-size: 12.5px; font-weight: 600; color: inherit; white-space: nowrap; }
.ncp-vsel-sw2 .ncp-vsel-cap { font-size: var(--ncp-vsel-cap-size, 10.5px); font-weight: var(--ncp-vsel-cap-weight, 600); color: var(--ncp-vsel-cap-color, inherit); text-align: center; max-width: calc(var(--ncp-vsel-size, 56px) + 48px); }
.ncp-vsel-sw2 a.ncp-vsel-sw:hover .ncp-vsel-box { border-color: var(--ncp-vsel-hover, rgba(0,0,0,.42)); }
.ncp-vsel-sw2 .ncp-vsel-sw.is-on .ncp-vsel-box { border-color: var(--ncp-accent, #f47c21); box-shadow: 0 0 0 2px rgba(244,124,33,.22); }
.ncp-vsel-sw2 .ncp-vsel-sw.is-on .ncp-vsel-cap { color: var(--ncp-accent, #f47c21); }
.ncp-vsel-sw2 .ncp-vsel-sw.ncp-vsel-dis { opacity: var(--ncp-vsel-disabled-op, .45); cursor: not-allowed; }
.ncp-vsel-sw2 .ncp-vsel-sw.ncp-vsel-disc .ncp-vsel-box { border-style: dashed; }
.ncp-vsel-sw2 .ncp-vsel-sw.ncp-vsel-disc .ncp-vsel-cap { color: #b8860b; }

/* ---- per-TYPE shape defaults (shape=auto): image → rounded square · color →
   circle · text → auto-width pill (full label, NO duplicate caption). #3 ---- */
.ncp-vsel-shape-auto .ncp-vsel-t-image .ncp-vsel-box { border-radius: var(--ncp-vsel-radius, 10px); }
.ncp-vsel-shape-auto .ncp-vsel-t-color .ncp-vsel-box { border-radius: 50%; width: calc(var(--ncp-vsel-size, 56px) * .82); height: calc(var(--ncp-vsel-size, 56px) * .82); }
.ncp-vsel-shape-auto .ncp-vsel-t-text .ncp-vsel-box { width: auto; min-width: var(--ncp-vsel-size, 56px); height: calc(var(--ncp-vsel-size, 56px) * .68); padding: 0 16px; border-radius: 999px; background: #fff; }
.ncp-vsel-shape-auto .ncp-vsel-t-text.is-on .ncp-vsel-box { background: rgba(244,124,33,.12); }
/* explicit shape overrides (square/circle/pill/button) apply uniformly to every axis */
.ncp-vsel-shape-circle .ncp-vsel-box { border-radius: 50%; }
.ncp-vsel-shape-pill .ncp-vsel-box, .ncp-vsel-shape-button .ncp-vsel-box { width: auto; min-width: var(--ncp-vsel-size, 56px); padding: 0 16px; height: calc(var(--ncp-vsel-size, 56px) * .64); }
.ncp-vsel-shape-pill .ncp-vsel-box { border-radius: 999px; }
.ncp-vsel-shape-button .ncp-vsel-box { border-radius: var(--ncp-vsel-radius, 8px); }
.ncp-vsel-shape-pill .ncp-vsel-more, .ncp-vsel-shape-button .ncp-vsel-more { width: auto; padding: 0 14px; }
/* the value caption is redundant when the text label already fills the pill */
.ncp-vsel-shape-auto .ncp-vsel-t-text .ncp-vsel-cap,
.ncp-vsel-shape-pill .ncp-vsel-t-text .ncp-vsel-cap,
.ncp-vsel-shape-button .ncp-vsel-t-text .ncp-vsel-cap { display: none; }
/* caption off (control) */
.ncp-vsel-nocap .ncp-vsel-cap { display: none; }
/* per-axis layout: grid = fixed columns; dropdown = a native select per axis */
.ncp-vsel-layout-grid .ncp-vsel-opts { display: grid; grid-template-columns: repeat(var(--ncp-vsel-cols, 4), minmax(0, 1fr)); align-items: start; justify-items: center; }
.ncp-vsel-layout-dropdown .ncp-vsel-opts { display: block; }
.ncp-vsel-select { width: 100%; max-width: 340px; padding: 9px 12px; border: 1.5px solid rgba(0,0,0,.18); border-radius: 8px; background: #fff; font-size: 13.5px; font-weight: 600; color: inherit; line-height: 1.2; cursor: pointer; }
.ncp-vsel-select:focus { outline: none; border-color: var(--ncp-accent, #f47c21); }

/* ---- Wayfair-grade structured tooltip card (#1): preview panel + name + metadata
   rows (only when set) + state line. Viewport-clamped by ncp-vsel.js via
   --ncp-tip-shift / --ncp-tip-arrow. Elementor-styleable via --ncp-vsel-tip-*. ---- */
.ncp-vsel-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(calc(-50% + var(--ncp-tip-shift, 0px))); width: var(--ncp-vsel-tip-w, 240px); max-width: 92vw; background: var(--ncp-vsel-tip-bg, #fff); border: 1px solid var(--ncp-vsel-tip-border, rgba(0,0,0,.12)); border-radius: var(--ncp-vsel-tip-radius, 12px); box-shadow: var(--ncp-vsel-tip-shadow, 0 12px 34px rgba(0,0,0,.18)); z-index: 60; display: none; text-align: left; color: #241c14; overflow: hidden; }
.ncp-vsel-sw:hover .ncp-vsel-tip, .ncp-vsel-sw:focus-within .ncp-vsel-tip { display: block; }
.ncp-vsel-tip::after { content: ""; position: absolute; top: 100%; left: calc(50% + var(--ncp-tip-arrow, 0px)); transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--ncp-vsel-tip-bg, #fff); }
.ncp-vsel-tprev { display: grid; place-items: center; width: 100%; height: var(--ncp-vsel-tip-prev-h, 118px); background: #f4ede2; background-size: cover; background-position: center; }
.ncp-vsel-tprev-txt { font-size: 15px; font-weight: 650; color: #241c14; padding: 0 12px; text-align: center; white-space: normal; }
.ncp-vsel-tbody { display: block; padding: 12px 13px; }
.ncp-vsel-tn { display: block; font-size: var(--ncp-vsel-tip-name-size, 13.5px); font-weight: 650; margin-bottom: 8px; }
.ncp-vsel-trow { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; line-height: 1.6; padding: 1px 0; }
.ncp-vsel-tk { color: #8a7a66; }
.ncp-vsel-tv { font-weight: 650; text-align: right; }
.ncp-vsel-tstate { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.08); font-size: 11px; color: #8a7a66; }
/* v0.9.0 — TOUCH: suppress hover tooltips entirely (G5). The value label already sits
   under each swatch (caption for image/color; the pill IS the label for text), so
   nothing depends on hover. Also a store opt-out class for desktop (.ncp-vsel-notip). */
@media (hover: none), (pointer: coarse) {
	.ncp-vsel-tip { display: none !important; }
	.ncp-vsel-nocap .ncp-vsel-cap { display: block; } /* keep labels visible on touch even if captions were hidden */
}
.ncp-vsel-notip .ncp-vsel-tip { display: none !important; }
/* +N more — CSS-only overflow toggle */
.ncp-vsel-cb { position: absolute; opacity: 0; width: 0; height: 0; }
.ncp-vsel-rest { display: none; }
.ncp-vsel-cb:checked ~ .ncp-vsel-rest { display: contents; }
.ncp-vsel-cb:checked ~ .ncp-vsel-more { display: none; }
.ncp-vsel-sw2 .ncp-vsel-more { width: var(--ncp-vsel-size, 56px); height: var(--ncp-vsel-size, 56px); border: var(--ncp-vsel-border, 2px) solid rgba(0,0,0,.16); border-radius: var(--ncp-vsel-radius, 10px); display: grid; place-items: center; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--ncp-accent, #f47c21); cursor: pointer; }

/* ===================================================================
   CATALOG LOOP SWATCHES — rendered on shop/category/search cards for
   the family's ONE loop axis; delegated click/hover swaps image+title+
   price+link inline (ncp-loop.js), "+N" chip → product. v0.9.0: fully
   store-styleable via --ncp-loop-* (Design settings), overflow modes,
   and a card-image frame so swapped images never distort.
   =================================================================== */
.ncp-loop { display: flex; gap: var(--ncp-loop-gap, 6px); align-items: center; flex-wrap: wrap; margin: 8px 0 9px; }
.ncp-loop-sw { width: var(--ncp-loop-size, 26px); height: var(--ncp-loop-size, 26px); border-radius: var(--ncp-loop-radius, 6px); border: var(--ncp-loop-bw, 2px) solid var(--ncp-loop-idle, rgba(0,0,0,.16)); cursor: pointer; background-size: cover; background-position: center; background-color: #f4ede2; flex: none; padding: 0; display: inline-block; box-sizing: border-box; }
.ncp-loop-sw.ncp-loop-circle { border-radius: 50%; }
.ncp-loop-sw.ncp-loop-txt { width: auto; height: auto; border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 600; color: #241c14; background: #fff; line-height: 1.3; }
.ncp-loop-sw:hover { border-color: var(--ncp-loop-accent, var(--ncp-accent, #f47c21)); }
.ncp-loop-sw.is-on { border-color: var(--ncp-loop-accent, var(--ncp-accent, #f47c21)); box-shadow: 0 0 0 2px rgba(244,124,33,.22); }
.ncp-loop-sw:focus-visible { outline: 2px solid var(--ncp-loop-accent, var(--ncp-accent, #f47c21)); outline-offset: 1px; }
.ncp-loop-more { font-size: 10.5px; font-weight: 700; color: #8a7a66; border: var(--ncp-loop-bw, 1.5px) solid var(--ncp-loop-idle, rgba(0,0,0,.16)); border-radius: var(--ncp-loop-radius, 6px); padding: 3px 7px; cursor: pointer; background: #fff; text-decoration: none; line-height: 1.4; display: inline-block; }
.ncp-loop-more:hover { color: #241c14; border-color: rgba(0,0,0,.3); }
/* overflow modes: scroll = one no-wrap row that scrolls; chip/none handled server-side */
.ncp-loop[data-overflow="scroll"] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.ncp-loop[data-overflow="scroll"]::-webkit-scrollbar { height: 4px; }
/* card image frame (#4) — applied by ncp-loop.js marking the card .ncp-loop-framed.
   Forces a consistent aspect + fit so a swapped square image never distorts. */
.ncp-loop-framed img { aspect-ratio: var(--ncp-loop-aspect, 1 / 1); object-fit: var(--ncp-loop-fit, cover); width: 100%; height: auto; }

/* ===================================================================
   PRODUCT OPTIONS (v0.10.0) — the options form INSIDE the cart form
   (woocommerce_before_add_to_cart_button). Single-choice = swatch
   tiles (visual + name + delta, Wayfair tooltip); multi = checkbox
   rows with thumbnails; text = textarea + live counter. Tooltips are
   hover-only (@media hover:hover) — touch shows none (v0.9.x rule).
   Accent rides --ncp-opt-accent (Design settings loop accent).
   =================================================================== */
.ncp-options { margin: 0 0 14px; }
.ncp-opt-group { border: 1px solid rgba(0,0,0,.1); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.ncp-opt-legend { font-size: 12.5px; font-weight: 650; padding: 0 6px; }
.ncp-opt-req { font-size: 9.5px; font-weight: 700; color: #b8860b; letter-spacing: .04em; margin-left: 4px; }
.ncp-opt-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.ncp-opt-tile { position: relative; cursor: pointer; border: 2px solid rgba(0,0,0,.12); border-radius: 12px; padding: 9px; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; transition: border-color .12s; }
.ncp-opt-tile input { position: absolute; opacity: 0; pointer-events: none; }
.ncp-opt-tile:hover { border-color: rgba(0,0,0,.35); }
.ncp-opt-tile.ncp-opt-tile-on, .ncp-opt-tile:has(input:checked) { border-color: var(--ncp-opt-accent, #f47c21); box-shadow: 0 0 0 2px rgba(244,124,33,.15); }
.ncp-opt-visual { width: 64px; height: 64px; border-radius: 9px; background-size: cover; background-position: center; border: 1px solid rgba(0,0,0,.1); display: block; }
.ncp-opt-visual-circle { border-radius: 50%; }
.ncp-opt-visual-none, .ncp-opt-visual-text { display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #8a7a66; background: #f4ede2; }
.ncp-opt-name { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.25; }
.ncp-opt-delta { font-size: 11.5px; font-weight: 700; color: var(--ncp-opt-accent, #f47c21); font-variant-numeric: tabular-nums; }
.ncp-opt-delta-zero { color: #8a7a66; font-weight: 500; }
/* tooltip — hover-capable pointers ONLY (touch = no tooltip) */
.ncp-opt-tip { display: none; }
@media (hover: hover) {
	.ncp-opt-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 190px; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 11px; box-shadow: 0 10px 30px rgba(0,0,0,.16); z-index: 30; display: none; overflow: hidden; text-align: left; }
	.ncp-opt-tile:hover .ncp-opt-tip { display: block; }
	.ncp-opt-tip-img { display: block; width: 100%; height: 86px; background-size: cover; background-position: center; background-color: #f4ede2; }
	.ncp-opt-tip-body { display: block; padding: 10px 12px; }
	.ncp-opt-tip-name { display: block; font-size: 12.5px; font-weight: 650; }
	.ncp-opt-tip-desc { display: block; font-size: 11px; color: #8a7a66; margin-top: 3px; line-height: 1.45; }
	.ncp-opt-tip-sku { display: block; font-size: 10px; font-family: ui-monospace, Menlo, monospace; color: #8a7a66; margin-top: 3px; }
	.ncp-opt-tip-delta { display: block; font-size: 12px; font-weight: 700; color: var(--ncp-opt-accent, #f47c21); margin-top: 5px; }
}
/* multi-choice rows */
.ncp-opt-rows { display: flex; flex-direction: column; gap: 2px; }
.ncp-opt-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; font-size: 13px; }
.ncp-opt-row input { accent-color: var(--ncp-opt-accent, #f47c21); }
.ncp-opt-thumb { width: 30px; height: 30px; border-radius: 7px; background-size: cover; background-position: center; border: 1px solid rgba(0,0,0,.1); flex: none; display: inline-block; }
.ncp-opt-thumb.ncp-opt-visual-circle { border-radius: 50%; }
.ncp-opt-thumb.ncp-opt-visual-text { display: grid; place-items: center; font-size: 8px; font-weight: 700; color: #8a7a66; background: #f4ede2; }
.ncp-opt-row-name { flex: 1; }
/* text input */
.ncp-opt-textwrap { position: relative; }
.ncp-opt-textwrap .ncp-opt-delta { position: absolute; right: 0; top: -24px; }
.ncp-opt-text { width: 100%; padding: 8px 11px; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; font: inherit; font-size: 13px; resize: vertical; min-height: 52px; box-sizing: border-box; }
.ncp-opt-count { display: block; font-size: 10.5px; color: #8a7a66; margin-top: 4px; text-align: right; }
/* live options-sum line (display only — server prices the cart) */
.ncp-opt-price { font-size: 13px; font-weight: 650; margin: 4px 0 10px; }
.ncp-opt-price-sum { color: var(--ncp-opt-accent, #f47c21); font-variant-numeric: tabular-nums; }

/* ===================================================================
   PRODUCT OPTIONS v0.10.1 — presets (ONE renderer, parameterized),
   receipt, validation, recap thumbnails, configurator. Size/radius/
   accent ride --ncp-opt-size / --ncp-opt-radius / --ncp-opt-accent.
   =================================================================== */
.ncp-opt-visual, .ncp-opt-tile .ncp-opt-visual { width: var(--ncp-opt-size, 64px); height: var(--ncp-opt-size, 64px); border-radius: var(--ncp-opt-radius, 10px); }
.ncp-opt-visual-circle { border-radius: 50% !important; }
.ncp-opt-tile.ncp-opt-on { border-color: var(--ncp-opt-accent, #f47c21); box-shadow: 0 0 0 2px rgba(244,124,33,.15); }
/* price-badge modes */
.ncp-opt-badge-hidden .ncp-opt-tile .ncp-opt-delta, .ncp-opt-badge-hidden .ncp-opt-gprice, .ncp-opt-badge-hidden .ncp-opt-lprice { display: none; }
.ncp-opt-badge-tooltip .ncp-opt-tile > .ncp-opt-delta { display: none; }
/* validation (G8) */
.ncp-opt-errnote { display: none; margin-left: auto; font-size: 11px; font-weight: 700; color: #b4453a; }
.ncp-opt-group { transition: border-color .2s, box-shadow .2s; }
.ncp-opt-group-err { border-color: #b4453a !important; box-shadow: 0 0 0 3px rgba(180,69,58,.14); animation: ncp-opt-shake .3s; }
.ncp-opt-group-err .ncp-opt-errnote { display: inline; }
@keyframes ncp-opt-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
/* admin-only misplacement warning (G6) */
.ncp-opt-outside-warn { border: 1px solid #b4453a; background: #f9e7e4; color: #7a2e28; border-radius: 8px; padding: 9px 12px; font-size: 12px; margin: 0 0 10px; }
/* receipt */
.ncp-opt-receipt { border: 1.5px solid rgba(0,0,0,.12); border-radius: 12px; overflow: hidden; margin: 14px 0; }
.ncp-opt-rh { padding: 9px 14px; background: rgba(0,0,0,.03); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a7a66; }
.ncp-opt-rrow { display: flex; justify-content: space-between; gap: 10px; padding: 7px 14px; font-size: 12.5px; border-top: 1px solid rgba(0,0,0,.05); }
.ncp-opt-rl { color: #8a7a66; }
.ncp-opt-rv { font-variant-numeric: tabular-nums; font-weight: 600; }
.ncp-opt-rtot { border-top: 1.5px solid rgba(0,0,0,.12); background: rgba(0,0,0,.02); }
.ncp-opt-rtot .ncp-opt-rl { color: inherit; font-weight: 700; }
.ncp-opt-rtot .ncp-opt-rv { font-weight: 750; font-size: 14px; color: var(--ncp-opt-accent, #f47c21); }
/* gallery cards */
.ncp-opt-gcards { display: flex; gap: 12px; flex-wrap: wrap; }
.ncp-opt-gcard { width: 150px; border: 2px solid rgba(0,0,0,.12); border-radius: 14px; overflow: hidden; cursor: pointer; background: #fff; transition: border-color .12s, transform .12s; position: relative; }
.ncp-opt-gcard:hover { transform: translateY(-2px); }
.ncp-opt-gcard.ncp-opt-on, .ncp-opt-gcard:has(input:checked) { border-color: var(--ncp-opt-accent, #f47c21); box-shadow: 0 0 0 3px rgba(244,124,33,.15); }
.ncp-opt-gcard input { position: absolute; opacity: 0; pointer-events: none; }
.ncp-opt-gimg { display: block; height: 96px; background-size: cover; background-position: center; background-color: #f4ede2; }
.ncp-opt-gimg.ncp-opt-visual-none { display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #8a7a66; }
.ncp-opt-gbody { display: block; padding: 10px 12px; }
.ncp-opt-gname { display: block; font-size: 12px; font-weight: 650; line-height: 1.25; }
.ncp-opt-gdesc { display: block; font-size: 10.5px; color: #8a7a66; margin-top: 3px; line-height: 1.35; }
.ncp-opt-gprice { display: block; font-size: 12px; font-weight: 700; color: var(--ncp-opt-accent, #f47c21); margin-top: 6px; font-variant-numeric: tabular-nums; }
/* detailed list */
.ncp-opt-lrows { display: flex; flex-direction: column; gap: 8px; }
.ncp-opt-lrow { display: flex; align-items: center; gap: 13px; border: 2px solid rgba(0,0,0,.12); border-radius: 12px; padding: 10px 14px; cursor: pointer; background: #fff; position: relative; }
.ncp-opt-lrow.ncp-opt-on, .ncp-opt-lrow:has(input:checked) { border-color: var(--ncp-opt-accent, #f47c21); background: rgba(244,124,33,.06); }
.ncp-opt-lrow input { position: absolute; opacity: 0; pointer-events: none; }
.ncp-opt-limg { width: 52px; height: 52px; border-radius: 9px; background-size: cover; background-position: center; background-color: #f4ede2; flex: none; }
.ncp-opt-limg.ncp-opt-visual-none { display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #8a7a66; }
.ncp-opt-lmain { flex: 1; min-width: 0; }
.ncp-opt-lname { display: block; font-size: 13px; font-weight: 650; }
.ncp-opt-ldesc { display: block; font-size: 11px; color: #8a7a66; margin-top: 2px; line-height: 1.35; }
.ncp-opt-lprice { font-size: 13px; font-weight: 700; color: var(--ncp-opt-accent, #f47c21); font-variant-numeric: tabular-nums; flex: none; }
.ncp-opt-lradio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0,0,0,.16); flex: none; display: grid; place-items: center; }
.ncp-opt-lrow.ncp-opt-on .ncp-opt-lradio, .ncp-opt-lrow:has(input:checked) .ncp-opt-lradio { border-color: var(--ncp-opt-accent, #f47c21); }
.ncp-opt-lrow.ncp-opt-on .ncp-opt-lradio::after, .ncp-opt-lrow:has(input:checked) .ncp-opt-lradio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ncp-opt-accent, #f47c21); }
/* compact dropdown */
.ncp-opt-select { width: 100%; max-width: 380px; padding: 10px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 9px; font: inherit; font-size: 13px; background: #fff; }
/* configurator (G10) */
.ncp-opt-config { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; margin: 0 0 14px; }
.ncp-opt-herowrap { border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,.12); }
.ncp-opt-hero { aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: #f4ede2; transition: opacity .2s; }
.ncp-opt-herocap { padding: 10px 14px; background: rgba(0,0,0,.03); font-size: 11.5px; color: #8a7a66; display: flex; justify-content: space-between; }
.ncp-opt-herocap b { color: inherit; }
.ncp-opt-herototal { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ncp-opt-accent, #f47c21); }
.ncp-opt-tiles-sm .ncp-opt-tile { width: 76px; padding: 6px; }
.ncp-opt-tiles-sm .ncp-opt-visual { width: 46px; height: 46px; }
@media (max-width: 820px) { .ncp-opt-config { grid-template-columns: 1fr; } }
/* cart/checkout recap thumbnails (G9) */
.ncp-opt-recap-th { display: inline-block; width: 20px; height: 20px; border-radius: 5px; background-size: cover; background-position: center; border: 1px solid rgba(0,0,0,.12); vertical-align: -5px; }
.ncp-opt-recap-pen { color: #8a7a66; }

/* ===================================================================
   PRODUCT OPTIONS v0.11.0 — three more presets on the SAME renderer:
   chip row / split panel (receipt right) / minimal text. Accent, size
   and radius ride the same --ncp-opt-accent / --ncp-opt-size /
   --ncp-opt-radius vars; no new tooltip affordances.
   =================================================================== */
/* chip row — compact pills; same hidden radio inputs as tiles */
.ncp-opt-chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.ncp-opt-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; border: 2px solid rgba(0,0,0,.12); border-radius: 999px; padding: 6px 13px; cursor: pointer; background: #fff; font-size: 12.5px; font-weight: 600; transition: border-color .12s; }
.ncp-opt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ncp-opt-chip:hover { border-color: rgba(0,0,0,.35); }
.ncp-opt-chip.ncp-opt-on, .ncp-opt-chip:has(input:checked) { border-color: var(--ncp-opt-accent, #f47c21); box-shadow: 0 0 0 2px rgba(244,124,33,.15); }
.ncp-opt-chipdot { width: calc(var(--ncp-opt-size, 64px) * 0.3); height: calc(var(--ncp-opt-size, 64px) * 0.3); border-radius: 50%; background-size: cover; background-position: center; border: 1px solid rgba(0,0,0,.12); flex: none; }
.ncp-opt-chipname { line-height: 1.2; }
.ncp-opt-chip .ncp-opt-delta { font-size: 11px; }
/* split panel — options (list chrome) left, the receipt docked right */
.ncp-opt-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; margin: 0 0 14px; }
.ncp-opt-splitside { position: sticky; top: 20px; }
.ncp-opt-splitside .ncp-opt-receipt { margin: 0; }
@media (max-width: 820px) { .ncp-opt-split { grid-template-columns: 1fr; } .ncp-opt-splitside { position: static; } }
/* badge=hidden also hides chip/minimal deltas; badge=tooltip does NOT
   (those presets have no tooltip — the inline delta is the only price) */
.ncp-opt-badge-hidden .ncp-opt-chip .ncp-opt-delta, .ncp-opt-badge-hidden .ncp-opt-minrow .ncp-opt-delta { display: none; }
/* minimal text — visible native inputs, label + delta text only */
.ncp-opt-minimal { display: flex; flex-direction: column; gap: 2px; }
.ncp-opt-minrow { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: 13px; }
.ncp-opt-minrow input { accent-color: var(--ncp-opt-accent, #f47c21); }
.ncp-opt-minname { line-height: 1.3; }
.ncp-opt-minrow .ncp-opt-delta { font-size: 12px; }

/* ===================================================================
   RELATED PRODUCTS v0.12.0 — the NCP-rendered section (ncp_related
   meta): grouped card rows (Premium alternatives / Pairs well with
   this / You may also like). Accent + radius ride the same
   --ncp-opt-accent / --ncp-opt-radius vars the options form uses.
   Responsive card grid, stacks to two-up on narrow screens; plain
   links, NO tooltips (touch discipline); badge is a static chip.
   =================================================================== */
.ncp-related { margin: 30px 0; clear: both; }
.ncp-related-group { margin: 0 0 28px; }
.ncp-related-group:last-child { margin-bottom: 0; }
.ncp-related-heading { font-size: 19px; font-weight: 650; line-height: 1.3; margin: 0 0 14px; }
.ncp-related-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.ncp-related-card { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 10px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: var(--ncp-opt-radius, 10px); color: inherit; text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.ncp-related-card:hover, .ncp-related-card:focus-visible { border-color: var(--ncp-opt-accent, #f47c21); box-shadow: 0 2px 12px rgba(0,0,0,.08); text-decoration: none; color: inherit; }
.ncp-related-thumb { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: calc(var(--ncp-opt-radius, 10px) * 0.6); background: #f4f2ee; }
.ncp-related-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ncp-related-noimg { background: repeating-linear-gradient(45deg, #f2f1ee, #f2f1ee 12px, #ebeae6 12px, #ebeae6 24px); }
.ncp-related-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.ncp-related-price { font-size: 13px; font-weight: 700; color: var(--ncp-opt-accent, #f47c21); font-variant-numeric: tabular-nums; }
.ncp-related-badge { position: absolute; top: 16px; left: 16px; padding: 3px 8px; border-radius: 999px; background: rgba(29,35,39,.82); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.3; pointer-events: none; }
@media (max-width: 680px) {
	.ncp-related-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.ncp-related-heading { font-size: 17px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   PROMO BANNER (v0.15.0) — E2: the store owns the paint.

   Every colour below reads a --ncp-promo-* variable emitted by NCP_Promo_Banner::style_vars()
   from the store's Design settings, with a fallback for a store that has never saved the tab.
   The Design-settings live preview consumes the SAME variables, which is what makes "what you
   see is what ships" true by construction rather than by two stylesheets agreeing.

   ⚠ THERE IS NO `display` RULE HERE, DELIBERATELY. Visibility is owned by the `hidden`
   attribute and ncp-promo.js. A CSS rule that showed `.ncp-promo` would defeat the kill
   switch on any page whose JS failed — which is the exact failure this feature exists to
   survive. `[hidden]` stays the browser's own display:none.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.ncp-promo {
  --ncp-promo-bg: #1a1512;
  --ncp-promo-fg: #ffffff;
  --ncp-promo-accent: #f47c21;
  --ncp-promo-radius: 10px;
  align-items: center;
  background: var(--ncp-promo-bg);
  border-radius: var(--ncp-promo-radius);
  color: var(--ncp-promo-fg);
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  gap: 9px;
  line-height: 1.35;
  margin: 12px 0;
  padding: 9px 13px;
}
/* ⚠ display lives ONLY here, behind :not([hidden]). Putting it on the bare class would be
   author-origin CSS overriding the UA's `[hidden] { display:none }` — and the banner's whole
   fail-closed story rests on `hidden` meaning hidden. Written this way, no ordering or
   specificity accident can reveal an expired banner. */
.ncp-promo:not([hidden]) { display: flex; }
.ncp-promo-pct {
  background: var(--ncp-promo-accent);
  border-radius: calc(var(--ncp-promo-radius) * 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 2px 7px;
}
.ncp-promo-txt { min-width: 0; }

/* Shapes — bar is the default; pill rounds fully; ribbon is a flag with a notched edge. */
.ncp-promo--pill { border-radius: 999px; padding-left: 7px; }
.ncp-promo--ribbon {
  border-radius: 0 var(--ncp-promo-radius) var(--ncp-promo-radius) 0;
  margin-left: -13px;
  padding-left: 17px;
}
/* Position only affects the gallery ribbon, which floats over the image column. */
.ncp-promo--ribbon.ncp-promo--ribbon { position: relative; z-index: 2; }
.woocommerce div.product .images .ncp-promo--ribbon { margin: 0 0 10px; }

/* ── loop card badge ─────────────────────────────────────────────────────────────────────── */
.ncp-promo-badge {
  --ncp-promo-bg: #1a1512;
  --ncp-promo-fg: #ffffff;
  --ncp-promo-accent: #f47c21;
  background: var(--ncp-promo-accent);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.6;
  margin: 0 0 6px;
  padding: 1px 8px;
}
.ncp-promo-badge:not([hidden]) { display: inline-block; }
.ncp-promo-badge--bar:not([hidden]) { display: block; }
.ncp-promo-badge--bar {
  background: var(--ncp-promo-bg);
  border-radius: 4px;
  text-align: center;
}