/* ============================================================================
   DNK shop — single product design system  ("Luxury biotech / premium clinic")
   Scoped under .dnk-single so nothing leaks into the Elementor-built site.
   Palette derived from the brand Elementor globals; elevated with a layered
   depth system (colored shadows), atmospheric light and orchestrated motion.
   ========================================================================== */

.dnk-single {
	/* — Ink & paper — */
	--dnk-ink:        #0D0813;   /* aubergine near-black              */
	--dnk-ink-2:      #322B3D;   /* body copy                        */
	--dnk-muted:      #6E6679;   /* captions, meta                   */
	--dnk-paper:      #FAF7F2;   /* warm ivory base (not stark white) */
	--dnk-paper-2:    #F2ECF7;   /* soft lavender panel              */
	--dnk-paper-3:    #EAE1F4;   /* lighter lavender fill            */

	/* — Purple ramp (brand) — */
	--dnk-accent:     #7245AE;
	--dnk-accent-2:   #613B94;
	--dnk-accent-3:   #53327F;
	--dnk-accent-4:   #28183D;
	--dnk-lav-1:      #C0ABDB;
	--dnk-lav-2:      #B39BD3;
	--dnk-lav-3:      #A386CA;

	/* — Functional — */
	--dnk-vault:      #140A20;   /* the dark privacy panel           */
	--dnk-vault-2:    #1E1230;
	--dnk-line:       color-mix(in srgb, var(--dnk-ink) 13%, transparent);
	--dnk-line-2:     color-mix(in srgb, var(--dnk-ink) 7%, transparent);
	--dnk-gold:       #C8A24A;   /* warm "trust" highlight, used sparingly */
	--dnk-gold-2:     #E6C878;   /* lighter gold for inner light       */

	/* Hairline that catches a hint of light (top-lit cards on paper). */
	--dnk-hair:       color-mix(in srgb, var(--dnk-ink) 9%, transparent);
	--dnk-hair-lit:   color-mix(in srgb, #fff 70%, transparent);

	/* — Type — */
	/* Inherit the theme's Elementor typography (Lexend Deca); fall back if unset. */
	--dnk-font-display: var(--e-global-typography-secondary-font-family, "Lexend Deca"), ui-sans-serif, system-ui, sans-serif;
	--dnk-font-body:    var(--e-global-typography-primary-font-family, "Lexend Deca"), ui-sans-serif, system-ui, sans-serif;

	/* — Shape & shadow — */
	--dnk-r:    18px;
	--dnk-r-sm: 12px;
	--dnk-r-lg: 28px;

	/* Layered depth: a tight contact shadow + a soft aubergine ambient cast.
	   Colored (not grey) shadows read as "expensive" against warm paper. */
	--dnk-shadow:
		0 1px 1px rgba(13,8,19,.04),
		0 6px 14px -10px rgba(40,24,61,.30),
		0 22px 48px -28px rgba(40,24,61,.42);
	--dnk-shadow-lg:
		0 2px 3px rgba(13,8,19,.05),
		0 12px 28px -16px rgba(40,24,61,.32),
		0 48px 90px -42px rgba(40,24,61,.55);
	/* Accent-tinted lift used on hover + the primary CTA. */
	--dnk-glow:       0 26px 60px -28px rgba(114,69,174,.55);
	--dnk-glow-soft:  0 18px 44px -26px rgba(114,69,174,.42);

	/* — Rhythm — */
	--dnk-container: 1160px;
	--dnk-gap:  clamp(2.5rem, 6vw, 5.5rem);

	color: var(--dnk-ink-2);
	background: var(--dnk-paper);
	font-family: var(--dnk-font-body);
	font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01", "cv01";
}

/* Atmospheric full-bleed light: a refined aubergine/lavender mesh that gives
   the page depth without flattening into a "purple gradient on white" cliché.
   Two faint colour pools + a low-opacity grain keep the paper feeling crafted. */
.dnk-single {
	position: relative;
	/* NB: no overflow-x clip/hidden here — it would break position:sticky on the hero media. */
	background-color: var(--dnk-paper); /* clean, flat surface — no mesh/grain/helix */
}

.dnk-single *,
.dnk-single *::before,
.dnk-single *::after { box-sizing: border-box; }

/* ---- Layout primitives ---------------------------------------------------- */

.dnk-container {
	width: min(100% - 2.5rem, var(--dnk-container));
	margin-inline: auto;
}
.dnk-section { padding-block: var(--dnk-gap); position: relative; }
.dnk-section + .dnk-section { padding-top: 0; }

/* ---- Typography ----------------------------------------------------------- */

.dnk-single h1, .dnk-single h2, .dnk-single h3, .dnk-single h4 {
	font-family: var(--dnk-font-display);
	color: var(--dnk-ink);
	font-weight: 460;
	line-height: 1.08;
	letter-spacing: -.014em;
	margin: 0;
	font-optical-sizing: auto;
	overflow-wrap: break-word;
}
.dnk-h1 {
	font-size: clamp(2.5rem, 1.7rem + 3.8vw, 4.3rem);
	font-weight: 500;
	letter-spacing: -.022em;
	line-height: 1.04;
}
.dnk-h2 { font-size: clamp(1.95rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -.018em; }
.dnk-h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); line-height: 1.18; }
.dnk-lead {
	font-size: clamp(1.1rem, 1.02rem + .5vw, 1.32rem);
	line-height: 1.6;
	color: var(--dnk-ink-2);
	text-wrap: pretty;
}
.dnk-single p { margin: 0 0 1rem; text-wrap: pretty; }
.dnk-single strong { color: var(--dnk-ink); font-weight: 700; }
.dnk-single ::selection { background: color-mix(in srgb, var(--dnk-accent) 22%, transparent); color: var(--dnk-ink); }

/* Section header pattern: tracked kicker + display heading + rule.
   The kicker now reads as a refined "label" with a gradient lead-rule + dot. */
.dnk-kicker {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--dnk-font-body);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--dnk-accent);
	margin: 0 0 1.1rem;
}
.dnk-kicker::before {
	content: "";
	width: 2rem; height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, transparent, currentColor);
	opacity: .75;
}
.dnk-shead { max-width: 54ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.dnk-shead .dnk-lead { margin-top: 1rem; }
/* Centered section-head variant (used by some blocks) still reads balanced. */
.dnk-shead .dnk-h2 { letter-spacing: -.02em; }

/* ---- Decorative double helix backdrop ------------------------------------ */

.dnk-helix-bg, .dnk-helix-bg--right { display: none; } /* decorative page-helix removed per request */

/* ---- Global focus-visible & link affordances ----------------------------- */
.dnk-single a:focus-visible,
.dnk-single button:focus-visible,
.dnk-single summary:focus-visible,
.dnk-single select:focus-visible,
.dnk-single input:focus-visible,
.dnk-single textarea:focus-visible {
	outline: 2px solid var(--dnk-accent);
	outline-offset: 3px;
	border-radius: 6px;
}
/* On dark surfaces, a lavender ring reads better than aubergine. */
.dnk-vault a:focus-visible,
.dnk-vault button:focus-visible,
.dnk-trust a:focus-visible { outline-color: var(--dnk-lav-1); }

/* ============================================================================
   1 · PRODUCT HERO  (gallery + summary, replaces Elementor product head)
   ========================================================================== */

.dnk-hero { padding-top: clamp(1.6rem, 4vw, 2.6rem); }

/* Atmospheric glow behind the whole hero — a soft aubergine halo that makes
   the summary feel lit from within the page rather than printed on it. */
.dnk-hero::before {
	content: "";
	position: absolute;
	top: clamp(-3rem, -4vw, -2rem);
	right: -10%;
	width: min(64%, 780px);
	height: 125%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(58% 48% at 68% 28%, color-mix(in srgb, var(--dnk-lav-1) 56%, transparent), transparent 68%),
		radial-gradient(48% 58% at 92% 72%, color-mix(in srgb, var(--dnk-accent) 22%, transparent), transparent 70%);
	filter: blur(6px);
	opacity: 1;
}
.dnk-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* image 50% · summary 50% */
	gap: clamp(1.8rem, 4vw, 3.8rem);
	align-items: start;
	position: relative;
	z-index: 1;
}
.dnk-hero__media, .dnk-hero__summary { min-width: 0; } /* let columns shrink so the title wraps, never clips */

/* ---- Gallery: a premium framed treatment ---------------------------------
   A layered "matted" frame — a soft aubergine halo cast behind the image, a
   crisp lit hairline ring, and an inset highlight — turns the WooCommerce
   gallery into a hero object. Works whether the photo is light or dark. */
.dnk-hero__media {
	position: relative;
	border-radius: var(--dnk-r-lg);
	padding: clamp(.5rem, 1.2vw, .85rem);
	background:
		linear-gradient(150deg, color-mix(in srgb, #fff 80%, var(--dnk-paper)), color-mix(in srgb, var(--dnk-paper-2) 70%, #fff));
	box-shadow:
		var(--dnk-shadow-lg),
		inset 0 1px 0 var(--dnk-hair-lit),
		inset 0 0 0 1px color-mix(in srgb, var(--dnk-accent) 12%, transparent);
}
/* Cast halo that grounds the frame on the paper. */
.dnk-hero__media::before {
	content: "";
	position: absolute;
	inset: 10% 4% -8% 4%;
	z-index: -1;
	border-radius: var(--dnk-r-lg);
	background: radial-gradient(60% 60% at 50% 55%, color-mix(in srgb, var(--dnk-accent) 42%, transparent), transparent 72%);
	filter: blur(38px);
	opacity: .6;
}
/* A fine corner-light accent on the inner frame. */
.dnk-hero__media::after {
	content: "";
	position: absolute;
	inset: clamp(.5rem, 1.2vw, .85rem);
	z-index: 2;
	border-radius: calc(var(--dnk-r-lg) - 8px);
	pointer-events: none;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dnk-ink) 6%, transparent);
}
.dnk-hero__media .woocommerce-product-gallery,
.dnk-hero__media .woocommerce-product-gallery__wrapper {
	margin: 0; max-width: 100%;
}
.dnk-hero__media img {
	border-radius: calc(var(--dnk-r-lg) - 8px);
	display: block;
}
.dnk-hero__media .woocommerce-product-gallery__image:not(:first-child) { margin-top: .9rem; }
.dnk-hero__media .flex-control-thumbs { display: flex; gap: .6rem; padding: .9rem 0 0; margin: 0; list-style: none; }
.dnk-hero__media .flex-control-thumbs li { width: 64px; }
.dnk-hero__media .flex-control-thumbs img {
	border-radius: 10px; cursor: pointer; opacity: .5;
	transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
	border: 1px solid var(--dnk-hair);
}
.dnk-hero__media .flex-control-thumbs img.flex-active,
.dnk-hero__media .flex-control-thumbs img:hover { opacity: 1; transform: translateY(-1px); box-shadow: var(--dnk-glow-soft); }

/* WooCommerce sale flash → refined floating badge on the frame. */
.dnk-hero__media .onsale {
	position: absolute; top: clamp(.9rem, 2vw, 1.3rem); left: clamp(.9rem, 2vw, 1.3rem);
	z-index: 3; margin: 0; min-height: 0; min-width: 0; line-height: 1;
	font-family: var(--dnk-font-body); font-weight: 800; font-size: .76rem; letter-spacing: .04em;
	color: #fff; background: linear-gradient(150deg, var(--dnk-accent), var(--dnk-accent-3));
	padding: .5rem .8rem; border-radius: 100px;
	box-shadow: 0 10px 22px -10px rgba(114,69,174,.7), inset 0 1px 0 rgba(255,255,255,.28);
}

/* Eyebrow chips above the title (sample · rok) */
.dnk-hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.dnk-chip {
	display: inline-flex; align-items: center; gap: .45rem;
	font-size: .8rem; font-weight: 600; letter-spacing: .01em;
	padding: .46rem .85rem;
	border: 1px solid color-mix(in srgb, var(--dnk-accent) 18%, transparent);
	border-radius: 100px;
	background: color-mix(in srgb, #fff 62%, var(--dnk-paper-3));
	color: var(--dnk-accent-3);
	box-shadow: 0 1px 2px rgba(40,24,61,.05), inset 0 1px 0 var(--dnk-hair-lit);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dnk-chip:hover { transform: translateY(-1px); box-shadow: var(--dnk-glow-soft), inset 0 1px 0 var(--dnk-hair-lit); border-color: color-mix(in srgb, var(--dnk-accent) 32%, transparent); }
.dnk-chip .dnk-svg { color: var(--dnk-accent); }
.dnk-chip--solid {
	background: linear-gradient(150deg, var(--dnk-ink), var(--dnk-accent-4));
	color: #fff; border-color: transparent;
	box-shadow: 0 6px 16px -10px rgba(13,8,19,.7), inset 0 1px 0 rgba(255,255,255,.14);
}
.dnk-chip--solid .dnk-svg { color: var(--dnk-lav-1); }

.dnk-hero__title { margin-bottom: 1rem; }
.dnk-hero__rating { margin-bottom: 1.1rem; }
.dnk-hero__excerpt { color: var(--dnk-ink-2); max-width: 46ch; font-size: 14px; line-height: 1.6; }
.dnk-hero__excerpt p { font-size: 14px; }

/* Price block — the number is a confident display moment with tabular figures. */
.dnk-hero__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0 .2rem; }
.dnk-hero__price .price {
	font-family: var(--dnk-font-display); color: var(--dnk-ink);
	font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.4rem); line-height: 1;
	font-weight: 480; letter-spacing: -.01em;
	font-variant-numeric: tabular-nums lining-nums;
}
.dnk-hero__price del { color: var(--dnk-muted); font-size: 1.05rem; opacity: .85; }
.dnk-hero__price ins { text-decoration: none; }
.you_save_text_woocommerce { display: inline-flex; align-items: center; gap: .55rem; margin: .35rem 0 0; }
.you_save_percentage {
	font-weight: 800; font-size: .82rem; letter-spacing: .02em;
	color: #fff; background: linear-gradient(150deg, var(--dnk-accent), var(--dnk-accent-3));
	border-radius: 7px; padding: .3rem .55rem;
	box-shadow: 0 6px 14px -8px rgba(114,69,174,.6);
}
.you_save_amount { font-size: .9rem; color: var(--dnk-accent-3); font-weight: 600; }

/* Cart / variations area: lightly restyle WooCommerce defaults inside hero */
.dnk-hero__cart { margin-top: 1.4rem; }
.dnk-hero__cart .variations { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.dnk-hero__cart .variations th { text-align: left; font-weight: 700; color: var(--dnk-ink); padding: .4rem .8rem .4rem 0; font-size: .92rem; }
.dnk-hero__cart .variations td { padding: .35rem 0; }
.dnk-hero__cart select {
	font: inherit; color: var(--dnk-ink); padding: .7rem .9rem; min-width: 220px;
	border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-sm); background: #fff;
}
.dnk-single .button,
.dnk-single button.single_add_to_cart_button {
	font-family: var(--dnk-font-body); font-weight: 700; letter-spacing: .01em;
	background: var(--dnk-ink); color: #fff;
	border: 0; border-radius: 100px; cursor: pointer;
	padding: .95rem 1.8rem; font-size: 1rem;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
	box-shadow: 0 12px 26px -16px rgba(40,24,61,.7);
}
.dnk-single .button:hover,
.dnk-single button.single_add_to_cart_button:hover {
	background: var(--dnk-accent); transform: translateY(-2px);
	box-shadow: 0 18px 34px -16px rgba(114,69,174,.65);
}
.dnk-single .quantity input.qty {
	width: 64px; padding: .8rem .4rem; text-align: center; font: inherit;
	border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-sm); margin-right: .6rem;
}
.dnk-hero__cart .woocommerce-variation-price { margin-bottom: .8rem; }

/* Panels (read-only pricing for variable products — no cart).
   Reads as a refined "menu" of options with a lit hairline + hover accent. */
.dnk-hero__panels { margin-top: 1.5rem; }
.dnk-hero__panels-h { display: block; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dnk-muted); font-weight: 700; margin-bottom: .65rem; }
.dnk-panels {
	list-style: none; margin: 0; padding: .4rem;
	display: grid; gap: .35rem;
	border: 1px solid var(--dnk-hair); border-radius: var(--dnk-r);
	background: color-mix(in srgb, #fff 55%, var(--dnk-paper));
	box-shadow: var(--dnk-shadow), inset 0 1px 0 var(--dnk-hair-lit);
}
.dnk-panel {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	padding: .7rem .85rem; border-radius: var(--dnk-r-sm);
	background: transparent; position: relative;
	transition: background .18s ease, transform .18s ease;
}
.dnk-panel + .dnk-panel { box-shadow: 0 -1px 0 var(--dnk-line-2); }
.dnk-panel:hover { background: color-mix(in srgb, var(--dnk-paper-2) 65%, #fff); }
.dnk-panel__name { font-weight: 600; color: var(--dnk-ink); font-size: .94rem; }
.dnk-panel__price { color: var(--dnk-accent-3); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dnk-panel__price del { color: var(--dnk-muted); font-weight: 400; margin-right: .35rem; }
.dnk-panel__price ins { text-decoration: none; }

/* ---- Phone booking CTA — the primary, showstopper action -----------------
   There is no cart; this is THE conversion. Built as a deep, lit "pill" with
   a tinted halo behind it, an inner top-light, a soft pulsing ring on the
   icon, and a sheen that sweeps on hover. Generous tap target (>56px tall). */
.dnk-booking { margin-top: 1.7rem; position: relative; }
.dnk-booking__btn {
	position: relative;
	display: inline-flex; align-items: center; gap: 1rem; text-decoration: none;
	padding: 1.05rem 1.55rem 1.05rem 1.4rem; border-radius: 100px;
	color: #fff; isolation: isolate; overflow: hidden;
	background:
		radial-gradient(120% 160% at 18% -20%, color-mix(in srgb, var(--dnk-lav-2) 55%, var(--dnk-accent)), transparent 55%),
		linear-gradient(152deg, var(--dnk-accent) 8%, var(--dnk-accent-2) 52%, var(--dnk-accent-3) 100%);
	box-shadow:
		0 1px 0 rgba(255,255,255,.18) inset,
		0 -10px 24px -14px rgba(13,8,19,.55) inset,
		var(--dnk-glow),
		0 2px 6px rgba(40,24,61,.25);
	transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease;
}
/* Crisp lit rim for definition on the warm paper. */
.dnk-booking__btn::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	padding: 1px;
	background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 60%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none;
}
/* Sheen sweep — sits idle off-screen, sweeps across on hover/focus. */
.dnk-booking__btn::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; z-index: 1;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
	transform: skewX(-18deg); pointer-events: none;
	opacity: 0; transition: opacity .2s ease;
}
.dnk-booking__btn:hover,
.dnk-booking__btn:focus-visible {
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255,255,255,.22) inset,
		0 -10px 24px -14px rgba(13,8,19,.55) inset,
		0 34px 70px -26px rgba(114,69,174,.7),
		0 4px 10px rgba(40,24,61,.28);
}
.dnk-booking__btn:active { transform: translateY(0); }
.dnk-booking__btn .dnk-svg { flex: none; }
/* The phone icon sits in a soft lit disc with a gentle attention pulse. */
.dnk-booking__btn > .dnk-svg {
	width: 22px; height: 22px; box-sizing: content-box; padding: .55rem; border-radius: 50%;
	background: color-mix(in srgb, #fff 22%, transparent);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.dnk-booking__txt { display: flex; flex-direction: column; line-height: 1.1; z-index: 2; }
.dnk-booking__label { font-size: .78rem; opacity: .9; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.dnk-booking__num {
	font-family: var(--dnk-font-display); font-size: 1.45rem; font-weight: 500; letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
}
.dnk-booking__note { display: inline-flex; align-items: center; gap: .5rem; margin: 10px 0 0; font-size: .85rem; color: var(--dnk-muted); }
.dnk-booking__note .dnk-svg { color: var(--dnk-accent); flex: none; }

@media (prefers-reduced-motion: no-preference) {
	/* Idle halo pulse behind the icon disc — subtle "call now" cue. */
	.dnk-booking__btn > .dnk-svg { animation: dnk-pulse 3.2s ease-in-out infinite; }
	.dnk-booking__btn:hover::after,
	.dnk-booking__btn:focus-visible::after { opacity: 1; animation: dnk-sheen .9s cubic-bezier(.25,.6,.2,1); }
}
@keyframes dnk-pulse {
	0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 0 0 color-mix(in srgb, var(--dnk-lav-1) 40%, transparent); }
	50%      { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3),  0 0 0 7px color-mix(in srgb, var(--dnk-lav-1) 0%, transparent); }
}
@keyframes dnk-sheen { from { left: -40%; } to { left: 120%; } }

/* Trust line under booking */
.dnk-hero__trust { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--dnk-line); }
.dnk-hero__trust span { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--dnk-ink-2); font-weight: 600; }
.dnk-hero__trust .dnk-svg {
	color: var(--dnk-accent); flex: none;
	width: 18px; height: 18px; box-sizing: content-box; padding: .3rem; border-radius: 8px;
	background: color-mix(in srgb, var(--dnk-paper-3) 70%, transparent);
}

/* ---- Credibility strip — a premium dark "proof bar" ---------------------- */
.dnk-section--trust { padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.dnk-trust {
	display: grid; grid-template-columns: repeat(4, 1fr);
	border-radius: var(--dnk-r-lg); overflow: hidden;
	box-shadow: var(--dnk-shadow-lg), 0 0 0 1px color-mix(in srgb, var(--dnk-lav-3) 14%, transparent);
	background:
		radial-gradient(90% 140% at 8% -20%, var(--dnk-vault-2), transparent 55%),
		linear-gradient(120deg, var(--dnk-accent-4), var(--dnk-vault) 72%);
	position: relative; isolation: isolate;
}
/* Encrypted-dot texture, masked to the top-right for directional light. */
.dnk-trust::before {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
	background-image: radial-gradient(circle at center, color-mix(in srgb, var(--dnk-lav-3) 18%, transparent) 1px, transparent 1.5px);
	background-size: 20px 20px;
	-webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 75%);
	        mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 75%);
}
/* A faint accent light sweeping in from the top edge. */
.dnk-trust::after {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 1;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dnk-lav-1) 55%, transparent), transparent);
}
.dnk-trust__item { padding: clamp(1.15rem, 2.6vw, 1.7rem) 1rem; display: grid; gap: .3rem; justify-items: center; text-align: center; position: relative; }
.dnk-trust__item + .dnk-trust__item::before {
	content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
	background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--dnk-lav-3) 24%, transparent), transparent);
}
.dnk-trust__ico {
	color: var(--dnk-lav-1); margin-bottom: .4rem;
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
	background: color-mix(in srgb, var(--dnk-lav-3) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--dnk-lav-3) 18%, transparent);
}
.dnk-trust__val {
	font-family: var(--dnk-font-display); font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2.05rem);
	color: #fff; line-height: 1; font-weight: 480;
}
.dnk-trust__label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dnk-lav-2); }
@media (max-width: 720px) {
	.dnk-trust { grid-template-columns: repeat(2, 1fr); }
	.dnk-trust__item:nth-child(2)::before { content: none; }
	.dnk-trust__item:nth-child(n+3)::after {
		content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1px;
		background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dnk-lav-3) 24%, transparent), transparent);
	}
}

/* ============================================================================
   2 · KEY FACTS STRIP  ([dnk_cinjenice])  — "mark the important info"
   ========================================================================== */

.dnk-facts {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), 1fr);
	border: 1px solid var(--dnk-hair);
	border-radius: var(--dnk-r-lg);
	background:
		linear-gradient(180deg, color-mix(in srgb, #fff 80%, var(--dnk-paper)), color-mix(in srgb, #fff 50%, var(--dnk-paper)));
	box-shadow: var(--dnk-shadow), inset 0 1px 0 var(--dnk-hair-lit);
	overflow: hidden;
}
.dnk-fact { padding: clamp(1.2rem, 2.4vw, 1.8rem); position: relative; transition: background .2s ease; }
.dnk-fact + .dnk-fact::before {
	content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
	background: linear-gradient(180deg, transparent, var(--dnk-line), transparent);
}
.dnk-fact:hover { background: color-mix(in srgb, var(--dnk-paper-2) 40%, transparent); }
.dnk-fact__ico {
	width: 42px; height: 42px; display: grid; place-items: center;
	border-radius: 12px; margin-bottom: .85rem;
	background: linear-gradient(155deg, color-mix(in srgb, var(--dnk-paper-3) 90%, #fff), var(--dnk-paper-3));
	color: var(--dnk-accent);
	box-shadow: inset 0 1px 0 var(--dnk-hair-lit), 0 6px 14px -10px rgba(114,69,174,.4);
}
.dnk-fact__val {
	font-family: var(--dnk-font-display); font-size: clamp(1.35rem, 1.1rem + .85vw, 1.75rem);
	color: var(--dnk-ink); line-height: 1.05; font-weight: 480;
	font-variant-numeric: lining-nums;
}
.dnk-fact__label { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--dnk-muted); margin-top: .4rem; font-weight: 600; }

/* ============================================================================
   3 · DISKRETNO — the "privacy vault" (dark)  ([dnk_diskretno])
   ========================================================================== */

.dnk-vault {
	position: relative; overflow: hidden;
	border-radius: var(--dnk-r-lg);
	background:
		radial-gradient(85% 120% at 10% -12%, var(--dnk-vault-2), transparent 52%),
		radial-gradient(75% 115% at 102% 112%, color-mix(in srgb, var(--dnk-accent) 44%, var(--dnk-vault)), transparent 48%),
		linear-gradient(160deg, #170C24, var(--dnk-vault) 60%, #100718);
	color: var(--dnk-lav-1);
	padding: clamp(2.1rem, 5vw, 3.8rem);
	box-shadow:
		var(--dnk-shadow-lg),
		0 0 0 1px color-mix(in srgb, var(--dnk-lav-3) 14%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--dnk-lav-1) 18%, transparent);
	isolation: isolate;
}
.dnk-vault::before { /* faint grid of "encrypted" dots, lit from the top-right */
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
	background-image: radial-gradient(circle at center, color-mix(in srgb, var(--dnk-lav-3) 24%, transparent) 1px, transparent 1.6px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(120% 80% at 90% 0%, #000, transparent 70%);
	        mask-image: radial-gradient(120% 80% at 90% 0%, #000, transparent 70%);
}
/* Inner light spill from the top edge — gives the panel real depth. */
.dnk-vault::after {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 45%; z-index: -1; pointer-events: none;
	background: radial-gradient(120% 100% at 30% 0%, color-mix(in srgb, var(--dnk-lav-1) 12%, transparent), transparent 70%);
}
.dnk-vault__head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.5rem; }
.dnk-vault__mark {
	flex: none; width: 60px; height: 60px; display: grid; place-items: center;
	border-radius: 17px; color: #fff; position: relative;
	background: linear-gradient(150deg, var(--dnk-accent), var(--dnk-accent-3));
	box-shadow:
		0 16px 34px -12px rgba(114,69,174,.85),
		inset 0 1px 0 rgba(255,255,255,.3),
		0 0 0 1px color-mix(in srgb, var(--dnk-lav-1) 22%, transparent);
}
/* A subtle gold "seal" dot on the lock mark — the discreet trust signal. */
.dnk-vault__mark::after {
	content: ""; position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--dnk-gold-2), var(--dnk-gold));
	box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 0 0 3px var(--dnk-vault);
}
.dnk-vault .dnk-kicker { color: var(--dnk-lav-2); }
.dnk-vault .dnk-kicker::before { background: linear-gradient(90deg, transparent, var(--dnk-lav-2)); }
.dnk-vault h2 { color: #fff; }
.dnk-vault .dnk-lead { color: color-mix(in srgb, var(--dnk-lav-1) 88%, #fff); max-width: 62ch; }

.dnk-vault__grid {
	display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.6rem, 4vw, 3rem);
	align-items: center; margin-top: 2rem;
}
.dnk-vault__points { display: grid; gap: 1.2rem; }
.dnk-vpoint { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.dnk-vpoint__ico {
	flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px;
	color: var(--dnk-lav-1);
	background: linear-gradient(155deg, color-mix(in srgb, var(--dnk-lav-3) 18%, transparent), color-mix(in srgb, var(--dnk-lav-3) 8%, transparent));
	border: 1px solid color-mix(in srgb, var(--dnk-lav-3) 26%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dnk-lav-1) 18%, transparent);
	transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.dnk-vpoint:hover .dnk-vpoint__ico {
	color: #fff; transform: translateY(-1px);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dnk-lav-1) 22%, transparent), 0 10px 22px -12px rgba(114,69,174,.7);
}
.dnk-vpoint h4 { color: #fff; font-family: var(--dnk-font-body); font-weight: 700; font-size: 1.04rem; letter-spacing: 0; margin-bottom: .25rem; }
.dnk-vpoint p { color: color-mix(in srgb, var(--dnk-lav-1) 80%, transparent); font-size: .94rem; margin: 0; line-height: 1.55; }

/* ---- The interactive "redacted result reveals with a code" card ----------
   A secure-terminal object: glassy surface, lit hairline, an "encrypted"
   scanline shimmer, and a masked value that decrypts to gold on hover/focus.
   tabindex=0 (see MARKUP SUGGESTIONS) makes the reveal keyboard-reachable. */
.dnk-reveal {
	position: relative; border-radius: var(--dnk-r); padding: 1.5rem 1.5rem 1.6rem;
	background:
		radial-gradient(120% 80% at 80% -10%, color-mix(in srgb, var(--dnk-lav-1) 10%, transparent), transparent 60%),
		color-mix(in srgb, #fff 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--dnk-lav-3) 26%, transparent);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--dnk-lav-1) 16%, transparent),
		0 24px 48px -28px rgba(0,0,0,.6);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	overflow: hidden;
}
.dnk-reveal__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.dnk-reveal__tag {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dnk-lav-2); font-weight: 700;
}
.dnk-reveal__tag::before {
	content: ""; width: 14px; height: 1px; background: linear-gradient(90deg, transparent, var(--dnk-lav-2));
}
.dnk-reveal__dot {
	width: 9px; height: 9px; border-radius: 50%; background: var(--dnk-gold);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--dnk-gold) 22%, transparent), 0 0 10px color-mix(in srgb, var(--dnk-gold) 70%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
	.dnk-reveal__dot { animation: dnk-blink 2.4s ease-in-out infinite; }
}
@keyframes dnk-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.dnk-reveal__row { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.dnk-reveal__key { font-size: .8rem; color: color-mix(in srgb, var(--dnk-lav-1) 70%, transparent); width: 90px; flex: none; }
.dnk-reveal__val {
	font-family: var(--dnk-font-body); font-weight: 700; color: #fff; letter-spacing: .02em;
	background: linear-gradient(180deg, color-mix(in srgb, var(--dnk-vault) 50%, #000), color-mix(in srgb, var(--dnk-vault) 75%, #000));
	border: 1px solid color-mix(in srgb, var(--dnk-lav-3) 14%, transparent);
	border-radius: 9px; padding: .42rem .75rem; position: relative; overflow: hidden;
	flex: 1; font-variant-numeric: tabular-nums;
}
.dnk-reveal__val--masked { color: transparent; user-select: none; }
.dnk-reveal__val--masked::after {
	content: "•••• •••• ••••"; position: absolute; inset: 0;
	display: flex; align-items: center; padding-inline: .75rem; letter-spacing: .16em;
	color: var(--dnk-lav-3); transition: opacity .4s ease;
}
/* Decrypt on hover OR keyboard focus — gold result with a soft glow. */
.dnk-reveal:hover .dnk-reveal__val--masked,
.dnk-reveal:focus-within .dnk-reveal__val--masked {
	color: var(--dnk-gold-2);
}
.dnk-reveal:hover .dnk-reveal__val--masked::after,
.dnk-reveal:focus-within .dnk-reveal__val--masked::after { opacity: 0; }
/* Scanline sweep across the masked value while it's still locked. */
.dnk-reveal__val--masked::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dnk-lav-1) 30%, transparent), transparent);
	transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
	.dnk-reveal__val--masked::before { animation: dnk-scan 3.6s ease-in-out infinite; }
	.dnk-reveal:hover .dnk-reveal__val--masked::before,
	.dnk-reveal:focus-within .dnk-reveal__val--masked::before { animation: none; opacity: 0; }
}
@keyframes dnk-scan { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.dnk-reveal__hint { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .82rem; color: var(--dnk-lav-2); }
.dnk-reveal__hint .dnk-svg { color: var(--dnk-lav-1); flex: none; }
.dnk-reveal__code { margin-top: 1.1rem; display: flex; gap: .4rem; }
.dnk-reveal__code span {
	width: 36px; height: 44px; display: grid; place-items: center; border-radius: 9px;
	font-family: var(--dnk-font-display); font-size: 1.2rem; color: #fff; font-weight: 500;
	background: linear-gradient(160deg, color-mix(in srgb, var(--dnk-accent) 36%, transparent), color-mix(in srgb, var(--dnk-accent-3) 30%, transparent));
	border: 1px solid color-mix(in srgb, var(--dnk-lav-3) 26%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dnk-lav-1) 18%, transparent);
}

/* ============================================================================
   4 · UZORKOVANJE — sampling method card  ([dnk_uzorkovanje])
   ========================================================================== */

.dnk-sampling {
	display: grid; grid-template-columns: 1.05fr 1.25fr; gap: 0;
	align-items: stretch;
	border: 1px solid var(--dnk-hair); border-radius: var(--dnk-r-lg);
	background: color-mix(in srgb, #fff 70%, var(--dnk-paper));
	box-shadow: var(--dnk-shadow-lg), inset 0 1px 0 var(--dnk-hair-lit); overflow: hidden;
}
.dnk-sampling__visual {
	position: relative; display: grid; place-items: center; min-height: 300px;
	background:
		radial-gradient(70% 70% at 50% 32%, color-mix(in srgb, var(--dnk-lav-1) 40%, transparent), transparent 70%),
		linear-gradient(160deg, var(--dnk-paper-2), var(--dnk-paper-3) 120%);
	padding: 2rem;
	border-right: 1px solid var(--dnk-hair);
}
/* Concentric "focus rings" behind the illustration — clinical, intentional. */
.dnk-sampling__visual::before {
	content: ""; position: absolute; width: min(78%, 280px); aspect-ratio: 1; border-radius: 50%;
	background:
		radial-gradient(closest-side, transparent 62%, color-mix(in srgb, var(--dnk-accent) 14%, transparent) 63%, transparent 64%),
		radial-gradient(closest-side, transparent 78%, color-mix(in srgb, var(--dnk-accent) 10%, transparent) 79%, transparent 80%);
	pointer-events: none;
}
.dnk-sampling__illu {
	width: clamp(120px, 26vw, 172px); height: auto; color: var(--dnk-accent); position: relative;
	filter: drop-shadow(0 22px 30px rgba(114,69,174,.28));
}
/* optional real photo slot replaces the illustration when present */
.dnk-sampling__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dnk-sampling__badge {
	position: absolute; left: 1.3rem; bottom: 1.3rem; z-index: 2;
	display: inline-flex; align-items: center; gap: .45rem;
	background: linear-gradient(150deg, var(--dnk-ink), var(--dnk-accent-4));
	color: #fff; font-size: .78rem; font-weight: 700;
	padding: .5rem .85rem; border-radius: 100px;
	box-shadow: 0 10px 22px -12px rgba(13,8,19,.7), inset 0 1px 0 rgba(255,255,255,.16);
}
.dnk-sampling__badge .dnk-svg { color: var(--dnk-lav-1); }
.dnk-sampling__body { padding: clamp(1.8rem, 3.4vw, 2.8rem); align-self: center; }
.dnk-sampling__body h3 { margin-bottom: .7rem; }
.dnk-sampling__meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.3rem; }
.dnk-tag {
	display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600;
	padding: .45rem .8rem; border-radius: 100px;
	background: color-mix(in srgb, #fff 55%, var(--dnk-paper-2)); color: var(--dnk-accent-3);
	border: 1px solid color-mix(in srgb, var(--dnk-accent) 14%, transparent);
	box-shadow: inset 0 1px 0 var(--dnk-hair-lit);
}
.dnk-tag .dnk-svg { color: var(--dnk-accent); }

/* ============================================================================
   5 · KORACI — 3-step process timeline  ([dnk_koraci])
   ========================================================================== */

.dnk-steps { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(1rem, 2.4vw, 1.8rem); position: relative; }
.dnk-step {
	position: relative; padding: 1.8rem 1.6rem 1.7rem;
	background: color-mix(in srgb, #fff 72%, var(--dnk-paper));
	border: 1px solid var(--dnk-hair); border-radius: var(--dnk-r);
	box-shadow: var(--dnk-shadow), inset 0 1px 0 var(--dnk-hair-lit); overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.dnk-step:hover {
	transform: translateY(-3px);
	box-shadow: var(--dnk-shadow-lg), var(--dnk-glow-soft), inset 0 1px 0 var(--dnk-hair-lit);
	border-color: color-mix(in srgb, var(--dnk-accent) 26%, var(--dnk-line));
}
.dnk-step::after { /* faint number watermark — confident, expensive */
	content: counter(dnk-step, decimal-leading-zero); counter-increment: dnk-step;
	position: absolute; right: .7rem; top: -.8rem;
	font-family: var(--dnk-font-display); font-size: 6rem; line-height: 1;
	color: transparent; z-index: 0; font-weight: 500;
	background: linear-gradient(160deg, var(--dnk-paper-3), color-mix(in srgb, var(--dnk-lav-1) 55%, transparent));
	-webkit-background-clip: text; background-clip: text;
}
.dnk-steps { counter-reset: dnk-step; }
.dnk-step > * { position: relative; z-index: 1; }
.dnk-step__ico {
	width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px;
	background: linear-gradient(155deg, var(--dnk-accent), var(--dnk-accent-3)); color: #fff;
	box-shadow: 0 16px 26px -14px rgba(114,69,174,.85), inset 0 1px 0 rgba(255,255,255,.28);
	margin-bottom: 1.2rem;
}
.dnk-step__n { font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--dnk-accent); }
.dnk-step h4 { font-family: var(--dnk-font-body); font-weight: 700; font-size: 1.14rem; margin: .3rem 0 .5rem; color: var(--dnk-ink); }
.dnk-step p { margin: 0; font-size: .94rem; color: var(--dnk-ink-2); }
/* connector line on wide screens — a refined gradient rail with a glow seam */
@media (min-width: 781px) {
	.dnk-steps::before {
		content: ""; position: absolute; top: calc(1.8rem + 27px); left: 13%; right: 13%; height: 2px; z-index: 0;
		background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dnk-accent) 45%, transparent), color-mix(in srgb, var(--dnk-accent) 45%, transparent), transparent);
		-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 17px);
		        mask-image: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 17px);
		opacity: .7;
	}
}

/* ============================================================================
   6 · BENEFITI — benefit grid  ([dnk_benefiti])
   ========================================================================== */

.dnk-benefits { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(.9rem, 2vw, 1.4rem); }
.dnk-benefit {
	position: relative; padding: 1.6rem 1.5rem; border-radius: var(--dnk-r);
	background: color-mix(in srgb, #fff 60%, var(--dnk-paper));
	border: 1px solid var(--dnk-hair); overflow: hidden;
	box-shadow: inset 0 1px 0 var(--dnk-hair-lit);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* A whisper of accent light that warms on hover. */
.dnk-benefit::before {
	content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .25s ease;
	background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--dnk-lav-1) 22%, transparent), transparent 70%);
}
.dnk-benefit:hover {
	transform: translateY(-3px);
	box-shadow: var(--dnk-shadow), var(--dnk-glow-soft), inset 0 1px 0 var(--dnk-hair-lit);
	border-color: color-mix(in srgb, var(--dnk-accent) 30%, var(--dnk-line));
}
.dnk-benefit:hover::before { opacity: 1; }
.dnk-benefit > * { position: relative; z-index: 1; }
.dnk-benefit__ico {
	width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px;
	background: linear-gradient(155deg, color-mix(in srgb, var(--dnk-paper-3) 92%, #fff), var(--dnk-paper-3));
	color: var(--dnk-accent); margin-bottom: 1rem;
	box-shadow: inset 0 1px 0 var(--dnk-hair-lit), 0 6px 14px -10px rgba(114,69,174,.4);
	transition: transform .22s ease, color .22s ease;
}
.dnk-benefit:hover .dnk-benefit__ico { transform: translateY(-1px) scale(1.03); }
.dnk-benefit h4 { font-family: var(--dnk-font-body); font-weight: 700; font-size: 1.06rem; color: var(--dnk-ink); margin-bottom: .35rem; }
.dnk-benefit p { margin: 0; font-size: .92rem; color: var(--dnk-ink-2); }

/* ============================================================================
   7 · GENERIC CALLOUT  +  EDITORIAL IMAGE BAND  ([dnk_info] / photo slots)
   ========================================================================== */

.dnk-callout {
	display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
	padding: 1.5rem 1.6rem; border-radius: var(--dnk-r);
	background: linear-gradient(160deg, color-mix(in srgb, #fff 30%, var(--dnk-paper-2)), var(--dnk-paper-2));
	border: 1px solid color-mix(in srgb, var(--dnk-accent) 18%, transparent);
	border-left: 4px solid var(--dnk-accent);
	box-shadow: var(--dnk-shadow), inset 0 1px 0 var(--dnk-hair-lit);
}
.dnk-callout__ico { color: var(--dnk-accent); }
.dnk-callout h4 { font-family: var(--dnk-font-body); font-weight: 700; color: var(--dnk-ink); margin-bottom: .25rem; }
.dnk-callout p { margin: 0; color: var(--dnk-ink-2); }

.dnk-band { position: relative; border-radius: var(--dnk-r-lg); overflow: hidden; box-shadow: var(--dnk-shadow-lg); }
.dnk-band img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A refined editorial vignette + lit hairline over any real photo. */
.dnk-band::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dnk-ink) 8%, transparent), inset 0 30px 60px -40px rgba(13,8,19,.5);
}
.dnk-band--placeholder {
	min-height: clamp(220px, 34vw, 380px);
	display: grid; place-items: center; text-align: center;
	background:
		radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--dnk-lav-1) 30%, transparent), transparent 70%),
		repeating-linear-gradient(135deg, color-mix(in srgb, var(--dnk-lav-1) 24%, transparent) 0 2px, transparent 2px 15px),
		linear-gradient(160deg, var(--dnk-paper-2), var(--dnk-paper-3));
	color: var(--dnk-accent-3);
}
.dnk-band--placeholder .dnk-band__note { display: grid; gap: .55rem; justify-items: center; font-size: .85rem; font-weight: 600; max-width: 30ch; padding: 1.5rem; position: relative; }
.dnk-band--placeholder .dnk-svg { color: var(--dnk-accent); }

/* ---- Two-column editorial text + figure ---------------------------------- */
.dnk-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.dnk-split--flip .dnk-split__media { order: -1; }
.dnk-split__media { border-radius: var(--dnk-r-lg); overflow: hidden; box-shadow: var(--dnk-shadow); }
.dnk-prose > * + * { margin-top: 1rem; }
.dnk-prose h3 { margin-bottom: .4rem; }

/* ============================================================================
   8 · MOTION  — one orchestrated load reveal (respects reduced-motion)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.dnk-reveal-on-load { opacity: 0; transform: translateY(22px); filter: blur(6px); animation: dnk-rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
	.dnk-reveal-on-load:nth-child(2) { animation-delay: .08s; }
	.dnk-reveal-on-load:nth-child(3) { animation-delay: .16s; }
	.dnk-reveal-on-load:nth-child(4) { animation-delay: .24s; }
	.dnk-fact, .dnk-step, .dnk-benefit, .dnk-vpoint { opacity: 0; transform: translateY(16px); animation: dnk-rise .65s ease forwards; }
	.dnk-fact:nth-child(2), .dnk-step:nth-child(2), .dnk-benefit:nth-child(2), .dnk-vpoint:nth-child(2) { animation-delay: .08s; }
	.dnk-fact:nth-child(3), .dnk-step:nth-child(3), .dnk-benefit:nth-child(3), .dnk-vpoint:nth-child(3) { animation-delay: .16s; }
	.dnk-fact:nth-child(4), .dnk-benefit:nth-child(4), .dnk-vpoint:nth-child(4) { animation-delay: .24s; }
	.dnk-benefit:nth-child(5) { animation-delay: .3s; }
	.dnk-benefit:nth-child(6) { animation-delay: .36s; }
}
@keyframes dnk-rise { to { opacity: 1; transform: none; filter: none; } }

/* Belt-and-braces: never leave content hidden if animations are reduced. */
@media (prefers-reduced-motion: reduce) {
	.dnk-reveal-on-load, .dnk-fact, .dnk-step, .dnk-benefit, .dnk-vpoint { opacity: 1; transform: none; filter: none; }
}

/* ============================================================================
   9 · RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
	.dnk-facts { grid-template-columns: repeat(2, 1fr); }
	.dnk-fact:nth-child(n+3) { border-top: 1px solid var(--dnk-line-2); }
	.dnk-fact:nth-child(odd) { border-left: 0; }
	.dnk-vault__grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
	.dnk-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.dnk-sampling { grid-template-columns: 1fr; }
	.dnk-sampling__visual { min-height: 220px; }
	.dnk-steps { grid-template-columns: 1fr; }
	.dnk-benefits { grid-template-columns: 1fr 1fr; }
	.dnk-split { grid-template-columns: 1fr; }
	.dnk-split--flip .dnk-split__media { order: 0; }
}
@media (max-width: 520px) {
	.dnk-facts { grid-template-columns: 1fr; }
	/* Mobile fact: icon left, value (title) right of it, label (description) under the value */
	.dnk-fact {
		border-left: 0 !important;
		display: grid; grid-template-columns: auto 1fr; column-gap: .9rem;
		align-items: center; text-align: left; padding: 1rem 1.1rem;
	}
	.dnk-fact + .dnk-fact { border-top: 1px solid var(--dnk-line-2); }
	.dnk-fact__ico { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
	.dnk-fact__val { grid-column: 2; grid-row: 1; }
	.dnk-fact__label { grid-column: 2; grid-row: 2; margin-top: 1px; }
	.dnk-benefits { grid-template-columns: 1fr; }
	.dnk-reveal__code span { width: 30px; }
}

/* ============================================================================
   10 · BREADCRUMB · DETAILS ACCORDION · REVIEWS · RELATED
   ========================================================================== */

.dnk-breadcrumb {
	padding-top: clamp(1rem, 3vw, 1.8rem); font-size: .85rem; color: var(--dnk-muted);
}
.dnk-breadcrumb a { color: var(--dnk-accent-3); text-decoration: none; }
.dnk-breadcrumb a:hover { color: var(--dnk-accent); }

/* Collapsed full description */
.dnk-details {
	border: 1px solid var(--dnk-hair); border-radius: var(--dnk-r);
	background: color-mix(in srgb, #fff 60%, var(--dnk-paper)); overflow: hidden;
	box-shadow: var(--dnk-shadow), inset 0 1px 0 var(--dnk-hair-lit);
	transition: box-shadow .2s ease;
}
.dnk-details[open] { box-shadow: var(--dnk-shadow-lg), inset 0 1px 0 var(--dnk-hair-lit); }
.dnk-details + .dnk-reviews { margin-top: 1.4rem; }
.dnk-details > summary {
	display: flex; align-items: center; gap: .8rem; cursor: pointer; list-style: none;
	padding: 1.2rem 1.5rem; font-family: var(--dnk-font-body); font-weight: 700; color: var(--dnk-ink);
	font-size: 1.04rem; transition: background .18s ease;
}
.dnk-details > summary:hover { background: color-mix(in srgb, var(--dnk-paper-2) 45%, transparent); }
.dnk-details > summary::-webkit-details-marker { display: none; }
.dnk-details > summary > span { flex: 1; }
.dnk-details > summary .dnk-svg:first-child { color: var(--dnk-accent); flex: none; }
.dnk-details__plus { color: var(--dnk-accent); transition: transform .25s ease; flex: none; }
.dnk-details[open] .dnk-details__plus { transform: rotate(45deg); }
.dnk-rich { padding: 0 1.4rem 1.5rem; color: var(--dnk-ink-2); }
.dnk-rich h1, .dnk-rich h2, .dnk-rich h3, .dnk-rich h4 { font-family: var(--dnk-font-display); color: var(--dnk-ink); margin: 1.4rem 0 .5rem; line-height: 1.2; }
.dnk-rich h2 { font-size: 1.45rem; } .dnk-rich h3 { font-size: 1.2rem; }
.dnk-rich p { margin: 0 0 .9rem; }
.dnk-rich ul, .dnk-rich ol { margin: 0 0 1rem 1.2rem; padding: 0; }
.dnk-rich li { margin-bottom: .4rem; }
.dnk-rich a { color: var(--dnk-accent); }
.dnk-rich img { max-width: 100%; height: auto; border-radius: var(--dnk-r-sm); }

/* Reviews (WooCommerce tabs, reviews-only) */
.dnk-reviews .woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 0 1.4rem; border-bottom: 1px solid var(--dnk-line); }
.dnk-reviews .woocommerce-tabs ul.tabs li { margin: 0; }
.dnk-reviews .woocommerce-tabs ul.tabs li a {
	display: inline-block; padding: .7rem .2rem; margin-bottom: -1px; text-decoration: none;
	font-weight: 700; color: var(--dnk-muted); border-bottom: 2px solid transparent;
}
.dnk-reviews .woocommerce-tabs ul.tabs li.active a { color: var(--dnk-ink); border-bottom-color: var(--dnk-accent); }
.dnk-reviews #reviews .commentlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.dnk-reviews #reviews .comment_container { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.2rem; border: 1px solid var(--dnk-line); border-radius: var(--dnk-r); background: #fff; }
.dnk-reviews #reviews img.avatar { border-radius: 50%; width: 48px; height: 48px; }
.dnk-reviews #respond textarea, .dnk-reviews #respond input[type=text], .dnk-reviews #respond input[type=email] {
	width: 100%; font: inherit; padding: .7rem .9rem; border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-sm); background: #fff;
}

/* Related products: reuse WooCommerce loop, tidy headings + grid */
.dnk-section--related h2 { font-family: var(--dnk-font-display); font-weight: 480; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); color: var(--dnk-ink); margin-bottom: 1.4rem; }
.dnk-section--related ul.products {
	list-style: none; display: grid !important; grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem; padding: 0; margin: 0; align-items: stretch;
}
/* WooCommerce adds a clearfix ::before/::after that would create phantom grid cells */
.dnk-section--related ul.products::before,
.dnk-section--related ul.products::after { content: none !important; display: none !important; }
.dnk-section--related ul.products li.product {
	float: none !important; width: auto !important; margin: 0 !important; clear: none !important;
	display: flex; flex-direction: column;
	background: color-mix(in srgb, #fff 70%, var(--dnk-paper));
	border: 1px solid var(--dnk-hair); border-radius: var(--dnk-r); padding: 1rem;
	box-shadow: inset 0 1px 0 var(--dnk-hair-lit);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.dnk-section--related ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--dnk-shadow), var(--dnk-glow-soft), inset 0 1px 0 var(--dnk-hair-lit);
	border-color: color-mix(in srgb, var(--dnk-accent) 24%, var(--dnk-line));
}
.dnk-section--related ul.products li.product > a:first-of-type { display: block; color: inherit; text-decoration: none; }
.dnk-section--related ul.products img { width: 100%; height: auto; border-radius: var(--dnk-r-sm); margin: 0 0 .8rem; }
.dnk-section--related ul.products .woocommerce-loop-product__title { font-weight: 700; color: var(--dnk-ink); font-size: .98rem; margin: .3rem 0; }
.dnk-section--related ul.products .price { display: block; color: var(--dnk-accent-3); font-weight: 700; margin-top: .2rem; }
.dnk-section--related ul.products .price del { color: var(--dnk-muted); font-weight: 400; margin-right: .35rem; }
.dnk-section--related ul.products .star-rating { margin: .3rem 0; }
.dnk-section--related ul.products .button { width: 100%; margin-top: auto; padding: .62rem 1rem; font-size: .9rem; text-align: center; }
@media (max-width: 980px) { .dnk-section--related ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dnk-section--related ul.products { grid-template-columns: 1fr; } }

/* ---- Gold accreditation seal on the vault head ---- */
.dnk-vault__head { flex-wrap: wrap; }
.dnk-vault__seal {
	margin-left: auto; align-self: center;
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--dnk-font-body);
	font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--dnk-gold); white-space: nowrap;
	padding: .42rem .75rem; border-radius: 100px;
	border: 1px solid color-mix(in srgb, var(--dnk-gold) 42%, transparent);
	background: color-mix(in srgb, var(--dnk-gold) 12%, transparent);
}
.dnk-vault__seal .dnk-svg { color: var(--dnk-gold); }
@media (max-width: 560px) { .dnk-vault__seal { margin-left: 0; } }

/* ============================================================================
   11 · PANEL COMPARISON  ([dnk_paneli])
   ========================================================================== */
.dnk-panelc-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: clamp(.9rem, 2vw, 1.3rem); align-items: start; }
.dnk-panelc {
	position: relative; padding: 1.6rem 1.4rem; border-radius: var(--dnk-r);
	background: color-mix(in srgb, #fff 75%, var(--dnk-paper));
	border: 1px solid var(--dnk-hair, var(--dnk-line));
	box-shadow: var(--dnk-shadow), inset 0 1px 0 var(--dnk-hair-lit, transparent);
	transition: transform .2s ease, box-shadow .2s ease;
}
.dnk-panelc:hover { transform: translateY(-3px); box-shadow: var(--dnk-shadow-lg); }
.dnk-panelc--featured {
	border-color: color-mix(in srgb, var(--dnk-accent) 45%, transparent);
	box-shadow: var(--dnk-shadow-lg), 0 0 0 1px color-mix(in srgb, var(--dnk-accent) 28%, transparent);
}
.dnk-panelc__flag {
	position: absolute; top: -.75rem; left: 1.4rem;
	background: linear-gradient(150deg, var(--dnk-accent), var(--dnk-accent-3)); color: #fff;
	font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
	padding: .32rem .7rem; border-radius: 100px; box-shadow: 0 10px 22px -12px rgba(114,69,174,.8);
}
.dnk-panelc__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.dnk-panelc__head h4 { font-family: var(--dnk-font-display); font-size: 1.45rem; color: var(--dnk-ink); }
.dnk-panelc__count { font-size: .76rem; color: var(--dnk-muted); font-weight: 700; letter-spacing: .04em; }
.dnk-panelc__price { font-family: var(--dnk-font-display); font-size: 1.3rem; color: var(--dnk-accent-3); font-weight: 500; margin-bottom: 1.1rem; }
.dnk-panelc__price del { color: var(--dnk-muted); font-size: .92rem; margin-right: .25rem; }
.dnk-panelc__lbl { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dnk-muted); font-weight: 700; margin: 0 0 .6rem; }
.dnk-panelc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.dnk-panelc__list li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--dnk-ink-2); }
.dnk-panelc__list .dnk-svg { color: var(--dnk-accent); flex: none; }
@media (max-width: 900px) { .dnk-panelc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dnk-panelc-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   12 · FAQ ACCORDION  ([dnk_faq])
   ========================================================================== */
.dnk-faq { display: grid; gap: .7rem; max-width: 860px; }
.dnk-faq__item {
	border: 1px solid var(--dnk-hair, var(--dnk-line)); border-radius: var(--dnk-r);
	background: color-mix(in srgb, #fff 60%, var(--dnk-paper));
	box-shadow: inset 0 1px 0 var(--dnk-hair-lit, transparent);
	overflow: hidden; transition: border-color .2s ease;
}
.dnk-faq__item[open] { border-color: color-mix(in srgb, var(--dnk-accent) 30%, var(--dnk-line)); }
.dnk-faq__item > summary {
	display: flex; align-items: center; gap: 1rem; justify-content: space-between; cursor: pointer; list-style: none;
	padding: 1.1rem 1.35rem; font-weight: 700; color: var(--dnk-ink); font-size: 1.02rem;
}
.dnk-faq__item > summary::-webkit-details-marker { display: none; }
.dnk-faq__plus { color: var(--dnk-accent); flex: none; transition: transform .25s ease; }
.dnk-faq__item[open] .dnk-faq__plus { transform: rotate(45deg); }
.dnk-faq__a { padding: 0 1.35rem 1.2rem; color: var(--dnk-ink-2); }
.dnk-faq__a p { margin: 0 0 .6rem; }
.dnk-faq__a p:last-child { margin-bottom: 0; }

/* ============================================================================
   13 · STICKY MOBILE CALL BAR  (phone-booking model) — mobile only
   ========================================================================== */
.dnk-callbar { display: none; }
@media (max-width: 780px) {
	.dnk-single { padding-bottom: 82px; } /* clearance for the fixed bar */
	.dnk-callbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
		display: flex; align-items: center; gap: .7rem; text-decoration: none;
		padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(180deg, color-mix(in srgb, var(--dnk-vault) 90%, transparent), var(--dnk-vault));
		border-top: 1px solid color-mix(in srgb, var(--dnk-lav-3) 22%, transparent);
		box-shadow: 0 -12px 32px -14px rgba(13,8,19,.6);
		-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
		animation: dnk-callbar-in .5s cubic-bezier(.2,.7,.2,1) both;
	}
	.dnk-callbar__ico {
		width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 13px; color: #fff;
		background: linear-gradient(150deg, var(--dnk-accent), var(--dnk-accent-3));
		box-shadow: 0 10px 22px -10px rgba(114,69,174,.85), inset 0 1px 0 rgba(255,255,255,.25);
	}
	.dnk-callbar__txt { display: flex; flex-direction: column; line-height: 1.18; flex: 1; min-width: 0; }
	.dnk-callbar__txt b { color: #fff; font-size: .9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.dnk-callbar__txt small { color: var(--dnk-lav-1); font-size: .86rem; font-family: var(--dnk-font-display); letter-spacing: .02em; }
	.dnk-callbar__cta {
		flex: none; background: #fff; color: var(--dnk-accent-3); font-weight: 800; font-size: .86rem;
		padding: .62rem 1.05rem; border-radius: 100px;
	}
}
@keyframes dnk-callbar-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .dnk-callbar { animation: none; } }

/* ============================================================================
   14 · HERO MEDIA — background-cover image with the product inside (no slider)
   ========================================================================== */
.dnk-hero__media { background: none; padding: 0; border: 0; box-shadow: none; }
.dnk-hero__media::before, .dnk-hero__media::after { display: none !important; }
.dnk-hero__stage {
	position: relative; border-radius: var(--dnk-r-lg); overflow: hidden;
	aspect-ratio: 4 / 3; /* shorter background, full width */
	background-color: var(--dnk-paper-2);
	background-size: cover; background-position: center;
	display: grid; place-items: center;
	padding: clamp(.7rem, 2.2%, 1.4rem);
	box-shadow: var(--dnk-shadow-lg);
}
.dnk-hero__stage--plain { background-image: radial-gradient(120% 100% at 30% 0%, var(--dnk-paper-3), var(--dnk-paper-2)); }
.dnk-hero__product { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 26px 38px rgba(40,24,61,.34)); }
.dnk-hero__stage .onsale {
	position: absolute; top: 1rem; left: 1rem; right: auto; margin: 0; z-index: 2;
	background: var(--dnk-accent); color: #fff; border-radius: 100px;
	padding: .4rem .8rem; font-weight: 800; font-size: .78rem; line-height: 1; min-height: 0; min-width: 0;
}

/* ============================================================================
   15 · SEKCIJE — editorial prose + checklist  ([dnk_sekcije])
   ========================================================================== */
.dnk-sekcije { display: grid; gap: clamp(1.7rem, 4vw, 2.8rem); max-width: 920px; }
.dnk-sek__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .55rem; }
.dnk-sek__head h3 { color: var(--dnk-ink); }
.dnk-sek__stat { display: inline-flex; align-items: baseline; gap: .45rem; margin-left: auto; }
.dnk-sek__stat b { font-family: var(--dnk-font-display); color: var(--dnk-accent); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1; }
.dnk-sek__stat i { font-style: normal; color: var(--dnk-muted); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.dnk-sek .dnk-prose { color: var(--dnk-ink-2); max-width: 72ch; }
.dnk-checklist {
	list-style: none; margin: 1.1rem 0 0; padding: 1.2rem 1.35rem;
	display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: .7rem 1.5rem;
	background: var(--dnk-paper-2);
	border: 1px solid color-mix(in srgb, var(--dnk-accent) 14%, transparent);
	border-radius: var(--dnk-r);
}
.dnk-checklist li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--dnk-ink-2); }
.dnk-checklist .dnk-svg { color: var(--dnk-accent); flex: none; margin-top: .15rem; }
@media (max-width: 640px) { .dnk-checklist { grid-template-columns: 1fr; } }

/* ============================================================================
   16 · LIGHT THEME — lighten the previously dark blocks (per request)
   ========================================================================== */
/* Credibility strip → light */
.dnk-trust { background: linear-gradient(160deg, var(--dnk-paper-2), #fff); box-shadow: var(--dnk-shadow); border: 1px solid var(--dnk-line); }
.dnk-trust::before { display: none; }
.dnk-trust__item + .dnk-trust__item { box-shadow: -1px 0 0 var(--dnk-line-2); }
.dnk-trust__ico { color: var(--dnk-accent); }
.dnk-trust__val { color: var(--dnk-ink); }
.dnk-trust__label { color: var(--dnk-muted); }

/* Diskretno vault → light lavender panel (keeps the purple identity) */
.dnk-vault {
	background: linear-gradient(165deg, var(--dnk-paper-2), #fff 72%);
	color: var(--dnk-ink-2);
	border: 1px solid color-mix(in srgb, var(--dnk-accent) 18%, transparent);
	box-shadow: var(--dnk-shadow);
}
.dnk-vault::before { display: none; }
.dnk-vault .dnk-kicker { color: var(--dnk-accent); }
.dnk-vault h2, .dnk-vault .dnk-vpoint h4 { color: var(--dnk-ink); }
.dnk-vault .dnk-lead { color: var(--dnk-ink-2); }
.dnk-vault .dnk-vpoint__ico { background: var(--dnk-paper-3); border-color: color-mix(in srgb, var(--dnk-accent) 18%, transparent); color: var(--dnk-accent); }
.dnk-vault .dnk-vpoint p { color: var(--dnk-ink-2); }
.dnk-vault .dnk-reveal { background: #fff; border-color: var(--dnk-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dnk-vault .dnk-reveal__tag { color: var(--dnk-accent); }
.dnk-vault .dnk-reveal__key { color: var(--dnk-muted); }
.dnk-vault .dnk-reveal__val { background: var(--dnk-paper-2); color: var(--dnk-ink); }
.dnk-vault .dnk-reveal__val--masked { color: transparent; }
.dnk-vault .dnk-reveal__val--masked::after { color: var(--dnk-lav-3); }
.dnk-vault .dnk-reveal:hover .dnk-reveal__val--masked,
.dnk-vault .dnk-reveal:focus-within .dnk-reveal__val--masked { color: var(--dnk-accent); }
.dnk-vault .dnk-reveal__hint { color: var(--dnk-muted); }
.dnk-vault .dnk-reveal__hint .dnk-svg { color: var(--dnk-accent); }
.dnk-vault .dnk-reveal__code span { background: var(--dnk-paper-2); color: var(--dnk-accent); border-color: var(--dnk-line); }

/* Sticky call bar → light */
@media (max-width: 780px) {
	.dnk-callbar { background: #fff; border-top: 1px solid var(--dnk-line); box-shadow: 0 -12px 30px -16px rgba(40,24,61,.28); }
	.dnk-callbar__txt b { color: var(--dnk-ink); }
	.dnk-callbar__txt small { color: var(--dnk-accent-3); }
	.dnk-callbar__cta { background: var(--dnk-accent); color: #fff; }
}

/* ============================================================================
   17 · IMAGE SLOTS (real photo or designer placeholder + spec) + SPLIT SECTIONS
   ========================================================================== */
.dnk-imgslot {
	position: relative; margin: 0; width: 100%;
	border-radius: var(--dnk-r-lg); overflow: hidden;
	background: var(--dnk-paper-2); box-shadow: var(--dnk-shadow);
}
.dnk-imgslot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dnk-imgslot--ph {
	display: grid; place-content: center; justify-items: center; gap: .4rem; text-align: center;
	padding: clamp(1.2rem, 4%, 2rem); color: var(--dnk-accent-3); box-shadow: none;
	border: 1px dashed color-mix(in srgb, var(--dnk-accent) 38%, transparent);
	background:
		repeating-linear-gradient(135deg, color-mix(in srgb, var(--dnk-lav-1) 20%, transparent) 0 2px, transparent 2px 13px),
		linear-gradient(160deg, var(--dnk-paper-2), var(--dnk-paper-3));
}
.dnk-imgslot__ico { color: var(--dnk-accent); }
.dnk-imgslot__tag { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--dnk-accent); }
.dnk-imgslot__title { font-family: var(--dnk-font-display); font-size: 1.1rem; color: var(--dnk-ink); line-height: 1.15; }
.dnk-imgslot__spec { font-size: .82rem; color: var(--dnk-muted); max-width: 46ch; line-height: 1.5; }

.dnk-sek--split { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(1.4rem, 3.5vw, 2.8rem); align-items: center; }
.dnk-sek--split .dnk-sek__body { min-width: 0; }
.dnk-sek__media { min-width: 0; }
@media (max-width: 760px) {
	.dnk-sek--split { grid-template-columns: 1fr; }
}

/* ============================================================================
   18 · CREDIBILITY → slim, icon-less band (fixes "icons below icons")
   ========================================================================== */
.dnk-trust { background: var(--dnk-paper-2); border: 1px solid var(--dnk-line); box-shadow: var(--dnk-shadow); }
.dnk-trust__ico { display: none; }
.dnk-trust__item { padding: clamp(.9rem, 2.2vw, 1.35rem) 1rem; gap: .15rem; }
.dnk-trust__val { font-family: var(--dnk-font-display); font-size: clamp(1.3rem, 1.05rem + .9vw, 1.85rem); color: var(--dnk-accent-3); line-height: 1.05; }
.dnk-trust__label { font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dnk-muted); }

/* ============================================================================
   19 · THEME FONT (Lexend Deca) — sans display needs a touch more weight
   ========================================================================== */
.dnk-single h1, .dnk-single h2, .dnk-single h3, .dnk-single h4 { font-weight: 600; letter-spacing: -.01em; }
.dnk-h1 { letter-spacing: -.015em; }
.dnk-trust__val, .dnk-fact__val, .dnk-sek__stat b, .dnk-booking__num,
.dnk-hero__price .price, .dnk-panelc__head h4, .dnk-panelc__price, .dnk-imgslot__title { font-weight: 600; }

/* ============================================================================
   20 · CREDIBILITY band moved into the hero — right under the booking note
   ========================================================================== */
.dnk-trust--hero {
	margin-top: 14px; grid-template-columns: repeat(2, 1fr);
	gap: 0; background: var(--dnk-paper-2); border: 0; box-shadow: none; /* no outer border / shadow */
}
.dnk-trust--hero .dnk-trust__item { background: var(--dnk-paper-2); box-shadow: none; padding: .8rem 1rem; }
.dnk-trust--hero .dnk-trust__item:nth-child(1) { border-right: 1px solid var(--dnk-line); } /* divider between the two stats — no bottom border */
.dnk-trust--hero .dnk-trust__val { font-size: 1.2rem; }
.dnk-trust--hero .dnk-trust__label { font-size: .68rem; }
.dnk-trust--hero { margin-top: 1rem; } /* sits below the featured image */

/* ============================================================================
   21 · HERO refinements — featured-only sticky image · smaller H1 · wider CTA
   ========================================================================== */
/* Featured image only (no background stage) */
.dnk-hero__figure { position: relative; margin: 0; }
.dnk-hero__figure .onsale {
	position: absolute; top: 1rem; left: 1rem; right: auto; margin: 0; z-index: 2;
	background: var(--dnk-accent); color: #fff; border-radius: 100px;
	padding: .4rem .8rem; font-weight: 700; font-size: .78rem; line-height: 1; min-height: 0; min-width: 0;
}
.dnk-hero__product {
	display: block; width: 100%; height: auto; max-width: 100%; max-height: none;
	object-fit: contain; border-radius: var(--dnk-r-lg); box-shadow: var(--dnk-shadow-lg); filter: none;
}
/* Sticky on desktop, static on mobile */
@media (min-width: 781px) { .dnk-hero__media { position: sticky; top: 1.5rem; align-self: start; } }
@media (max-width: 780px) { .dnk-hero__media { position: static; } }

/* H1 — 30% smaller, and never break a single word across lines */
.dnk-h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem); }
.dnk-hero__title { overflow-wrap: normal; hyphens: none; }

/* Booking CTA — more line-height, wider on desktop, full width on mobile */
.dnk-booking__btn { justify-content: center; min-width: 340px; }
.dnk-booking__txt { line-height: 1.34; }
@media (max-width: 780px) { .dnk-booking__btn { width: 100%; min-width: 0; } }

/* Editorial sections span the full container */
.dnk-sekcije { max-width: none; }

/* ============================================================================
   22 · REVIEWS & Q&A  (Customer Reviews for WooCommerce plugin) — on-brand
   ========================================================================== */
.dnk-reviews { font-family: var(--dnk-font-body); color: var(--dnk-ink-2); }
.dnk-reviews h2, .dnk-reviews h3,
.dnk-reviews .woocommerce-Reviews-title, .dnk-reviews .cr-qna-block > h2 {
	font-family: var(--dnk-font-display); color: var(--dnk-ink); font-weight: 600; letter-spacing: -.01em;
}

/* Tabs */
.dnk-reviews .woocommerce-tabs ul.tabs { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; padding: 0; margin: 0 0 1.6rem; border-bottom: 1px solid var(--dnk-line); }
.dnk-reviews .woocommerce-tabs ul.tabs li { margin: 0; }
.dnk-reviews .woocommerce-tabs ul.tabs li a { display: inline-block; padding: .75rem .1rem; margin-bottom: -1px; text-decoration: none; font-weight: 700; color: var(--dnk-muted); border-bottom: 2px solid transparent; }
.dnk-reviews .woocommerce-tabs ul.tabs li.active a,
.dnk-reviews .woocommerce-tabs ul.tabs li a:hover { color: var(--dnk-ink); border-bottom-color: var(--dnk-accent); }
.dnk-reviews .woocommerce-noreviews, .dnk-reviews .cr-qna-list-empty { color: var(--dnk-muted); padding: .6rem 0 1.2rem; }

/* Form nav (Dodaj recenziju / Pitajte pitanje) */
.dnk-reviews .cr-review-form-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; margin-bottom: 1.2rem; border-bottom: 1px solid var(--dnk-line); }
.dnk-reviews .cr-nav-left { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--dnk-ink); }
.dnk-reviews .cr-nav-left svg path, .dnk-reviews .cr-nav-right svg path { stroke: var(--dnk-accent); }

/* Product chip inside the form */
.dnk-reviews .cr-review-form-item { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; background: var(--dnk-paper-2); border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-sm); margin-bottom: 1.1rem; }
.dnk-reviews .cr-review-form-item img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }
.dnk-reviews .cr-review-form-item span { font-weight: 600; color: var(--dnk-ink); }

/* Labels + fields */
.dnk-reviews .cr-review-form-lbl, .dnk-reviews .cr-review-form-rating-label { font-weight: 600; color: var(--dnk-ink); margin-bottom: .45rem; }
.dnk-reviews .required { color: var(--dnk-accent); }
.dnk-reviews textarea,
.dnk-reviews input[type="text"], .dnk-reviews input[type="email"],
.dnk-reviews .cr-review-form-txt, .dnk-reviews .cr-review-form-comment-txt, .dnk-reviews .cr-input-text {
	width: 100%; font: inherit; color: var(--dnk-ink);
	padding: .75rem .9rem; border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-sm); background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.dnk-reviews textarea:focus,
.dnk-reviews input[type="text"]:focus, .dnk-reviews input[type="email"]:focus,
.dnk-reviews .cr-review-form-comment-txt:focus, .dnk-reviews .cr-input-text:focus {
	outline: none; border-color: var(--dnk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dnk-accent) 18%, transparent);
}
.dnk-reviews .cr-review-form-ne { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.dnk-reviews .cr-review-form-comment { margin-top: 1rem; }
.dnk-reviews .cr-review-form-field-error { color: #b3261e; font-size: .82rem; margin-top: .35rem; }

/* Rating stars — recolor active to brand gold, keep inactive neutral */
.dnk-reviews .cr-review-form-rating-cont { display: inline-flex; gap: .25rem; }
.dnk-reviews .cr-rating-act path[fill="#F4DB6B"], .dnk-reviews .cr-rating-act path[fill="#F5CD5B"] { fill: var(--dnk-gold); }
.dnk-reviews .cr-review-form-rating-nbr { color: var(--dnk-muted); font-weight: 600; margin-left: .4rem; }

/* Terms checkbox */
.dnk-reviews .cr-review-form-terms { display: flex; align-items: flex-start; gap: .55rem; margin: 1.1rem 0; font-size: .9rem; color: var(--dnk-ink-2); }
.dnk-reviews .cr-review-form-terms input { margin-top: .2rem; accent-color: var(--dnk-accent); }

/* Buttons */
.dnk-reviews .cr-review-form-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.dnk-reviews .cr-review-form-submit, .dnk-reviews .cr-qna-ask-button {
	display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
	background: var(--dnk-ink); color: #fff; border: 0; border-radius: 100px;
	padding: .8rem 1.6rem; font: inherit; font-weight: 700; transition: background .18s ease, transform .18s ease;
}
.dnk-reviews .cr-review-form-submit:hover, .dnk-reviews .cr-qna-ask-button:hover { background: var(--dnk-accent); transform: translateY(-1px); }
.dnk-reviews .cr-review-form-submit img { width: 18px; height: 18px; }
.dnk-reviews .cr-review-form-cancel {
	cursor: pointer; background: transparent; color: var(--dnk-ink-2);
	border: 1px solid var(--dnk-line); border-radius: 100px; padding: .8rem 1.4rem; font: inherit; font-weight: 600;
}
.dnk-reviews .cr-review-form-cancel:hover { border-color: var(--dnk-accent); color: var(--dnk-accent); }

/* Q&A search */
.dnk-reviews .cr-qna-search-block { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.2rem 0; }
.dnk-reviews .cr-ajax-qna-search { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 220px; border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-sm); padding: .35rem .8rem; background: #fff; }
.dnk-reviews .cr-ajax-qna-search .cr-input-text { border: 0; padding: .4rem 0; box-shadow: none; }
.dnk-reviews .cr-qna-search-icon, .dnk-reviews .cr-clear-input svg { fill: var(--dnk-accent); }

@media (max-width: 560px) { .dnk-reviews .cr-review-form-ne { grid-template-columns: 1fr; } }

/* ============================================================================
   23 · Split sections: image on top on mobile for image-right (flipped) sections
   ========================================================================== */
@media (max-width: 760px) {
	.dnk-sek--imgright .dnk-sek__media { order: -1; }
}

/* Reviews & Q&A — shortcode blocks spacing + generic review-card styling */
.dnk-reviews__block + .dnk-reviews__block { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--dnk-line); }
.dnk-reviews .cr-single-review { padding: 1.3rem 0; border-bottom: 1px solid var(--dnk-line); }
.dnk-reviews .cr-single-review:last-child { border-bottom: 0; }
.dnk-reviews .cr-summary-bar, .dnk-reviews .cr-reviews-summary-bar {
	margin-bottom: 1.5rem; padding: 1.1rem 1.3rem; background: var(--dnk-paper-2);
	border: 1px solid var(--dnk-line); border-radius: var(--dnk-r);
}

/* ============================================================================
   24 · Customer Reviews — exact-class overrides (this stylesheet loads ONLY on
   the 6 managed templates, so !important here never affects other pages).
   ========================================================================== */
/* Buttons → brand purple (override plugin green) */
.dnk-reviews .cr-review-form-submit,
.dnk-reviews .cr-all-reviews-add-review,
.dnk-reviews .cr-button-search,
.dnk-reviews .cr-qna-ask-button {
	display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
	background: var(--dnk-ink) !important; color: #fff !important; border: 0 !important;
	border-radius: 100px !important; padding: .8rem 1.6rem !important; font: inherit; font-weight: 700 !important;
	transition: background .18s ease, transform .18s ease;
}
.dnk-reviews .cr-review-form-submit:hover,
.dnk-reviews .cr-all-reviews-add-review:hover,
.dnk-reviews .cr-button-search:hover,
.dnk-reviews .cr-qna-ask-button:hover { background: var(--dnk-accent) !important; transform: translateY(-1px); }
.dnk-reviews .cr-review-form-submit img { width: 18px; height: 18px; }
.dnk-reviews .cr-review-form-cancel {
	background: transparent !important; color: var(--dnk-ink-2) !important;
	border: 1px solid var(--dnk-line) !important; border-radius: 100px !important; padding: .8rem 1.4rem !important; cursor: pointer; font: inherit; font-weight: 600;
}
.dnk-reviews .cr-review-form-cancel:hover { border-color: var(--dnk-accent) !important; color: var(--dnk-accent) !important; }

/* Name / e-mail fields → full width in two columns */
.dnk-reviews .cr-review-form-ne { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dnk-reviews .cr-review-form-name, .dnk-reviews .cr-review-form-email { width: auto !important; min-width: 0; }
.dnk-reviews .cr-review-form-txt,
.dnk-reviews .cr-review-form-comment-txt { width: 100% !important; box-sizing: border-box; }
@media (max-width: 560px) { .dnk-reviews .cr-review-form-ne { grid-template-columns: 1fr; } }

/* Summary box */
.dnk-reviews .cr-summaryBox-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; padding: 1.3rem 1.5rem; background: var(--dnk-paper-2); border: 1px solid var(--dnk-line); border-radius: var(--dnk-r); margin: 1.5rem 0; }
.dnk-reviews .cr-summary-separator, .dnk-reviews .cr-summary-separator-side, .dnk-reviews .cr-summary-separator-int { display: none !important; }
.dnk-reviews .cr-average-rating span { font-family: var(--dnk-font-display); font-size: 2.4rem; font-weight: 600; color: var(--dnk-ink); line-height: 1; }
.dnk-reviews .cr-rating-icon-frnt .cr-rating-icon { color: var(--dnk-gold); }     /* filled stars */
.dnk-reviews .cr-rating-icon-base .cr-rating-icon-bg { color: var(--dnk-lav-3); } /* empty stars */
.dnk-reviews .cr-total-rating-count { color: var(--dnk-muted); font-size: .9rem; margin-top: .35rem; }
.dnk-reviews .cr-histogramTable { width: 100%; border-collapse: collapse; min-width: 220px; }
.dnk-reviews .cr-histogramTable td { padding: .12rem .45rem; font-size: .82rem; color: var(--dnk-muted); white-space: nowrap; }
.dnk-reviews .ivole-meter { background: var(--dnk-paper-3); border-radius: 100px; height: 8px; overflow: hidden; min-width: 90px; }
.dnk-reviews .ivole-meter-bar { background: var(--dnk-accent); height: 100%; }

/* Search + sort + count */
.dnk-reviews .cr-ajax-search { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.2rem 0; }
.dnk-reviews .cr-ajax-search > div { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 220px; border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-sm); padding: .35rem .8rem; background: #fff; }
.dnk-reviews .cr-ajax-search .cr-input-text { border: 0 !important; box-shadow: none !important; padding: .4rem 0 !important; }
.dnk-reviews .cr-ajax-search-icon, .dnk-reviews .cr-clear-input svg { fill: var(--dnk-accent); }
.dnk-reviews .cr-ajax-reviews-sort { font: inherit; padding: .55rem .8rem; border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-sm); background: #fff; color: var(--dnk-ink); }
.dnk-reviews .cr-count-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; color: var(--dnk-muted); font-size: .9rem; }
.dnk-reviews .cr-search-no-reviews { color: var(--dnk-muted); padding: 1rem 0; }