/**
 * Site shell (every page): the design tokens and the rules of the header, the top bar and the footer.
 *
 * GENERATED by tools/scripts/design-css.mjs from the approved design (docs/design/artifact-home/project/Main.dc.html,
 * the <helmet><style> block): do not edit the design part by hand, regenerate it. The rules are the design's, in its
 * order; selectors on the design root's state (.dv[data-theme], .dv[data-motion]) also match the site's attributes on
 * <html>. The WordPress glue is assets/css/glue/site-shell.pre.css (before the design's rules) and
 * assets/css/glue/site-shell.css (after them).
 */
/* WordPress glue, before the design's rules (assets/css/glue/site-shell.pre.css) ----------------------------------- */

/*
 * Astra's and the theme's element rules (links, buttons, headings, lists, paragraphs, figures ...) stay out of the
 * design: inside .dv every element starts from the browser's own defaults, as in the design file, and the design's
 * rules and inline styles (which follow) apply on top. The mega menu panel and FiboSearch, which the header hosts, keep
 * the theme's look. Inputs, images and SVG are not listed (all: revert would drop their size attributes): the rules at
 * the end of this file reset them property by property.
 */
.dv :where(a, abbr, article, aside, blockquote, button, dd, div, dl, dt, em, fieldset, figcaption, figure, footer, h1, h2, h3, h4, h5, h6, header, label, legend, li, main, nav, ol, p, s, section, small, span, strong, ul):where(:not(.dv-mega, .dv-mega *, .dv-fibo, .dv-fibo *)) {
	all: revert;
}

/* The design (Main.dc.html) ------------------------------------------------------------------------------------- */
.dv{--paper:#F4F0E8;--paper-2:#EAE3D6;--card:#FFFDF8;--ink:#16130F;--ink-2:#3B362E;--ink-3:#625B4F;--ink-4:#8A8275;--rule:#D9CFBD;--rule-2:#BFB49F;--grid:rgba(22,19,15,.06);--console:#121113;--console-2:#1A191B;--console-3:#252427;--c-rule:#323034;--c-ink:#F3EFE7;--c-ink-2:#ABA597;--c-ink-3:#878175;--red:#E11B1F;--red-btn:#C8161C;--stamp:var(--red);--fb-ink:#0866FF;--tp-ink:#007D55;--red-ink:#B3141A;--red-c:#FF5C5E;--ok:#2BB673;--shadow:#16130F;--font:'Inter','Noto Sans Bengali',system-ui,-apple-system,'Segoe UI',sans-serif;--display:'Bricolage Grotesque','Noto Sans Bengali',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,'Times New Roman',serif;--mono:'Geist Mono','Noto Sans Bengali',ui-monospace,Menlo,Consolas,monospace}
.dv[data-theme="dark"],[data-theme="dark"] .dv{--paper:#131210;--paper-2:#1B1A17;--card:#22201C;--ink:#F2EDE3;--ink-2:#D3CCBE;--ink-3:#A9A192;--ink-4:#827B6F;--rule:#35322C;--rule-2:#4A463E;--grid:rgba(242,237,227,.05);--console:#09090A;--console-2:#141416;--console-3:#1F1F22;--c-rule:#2D2C30;--red-ink:#FF6B6B;--stamp:#FF6B6B;--fb-ink:#6EA2FF;--tp-ink:#2FD39A;--shadow:#000}
.dv *,.dv *::before,.dv *::after{box-sizing:border-box}
.dv{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.dv a{color:inherit}
.dv a:hover{color:inherit}
.dv button{font-family:inherit}
.dv button:disabled{cursor:not-allowed!important}
.dv ::selection{background:var(--red);color:#fff}
.dv :focus-visible{outline:2px solid var(--red);outline-offset:3px}
.dv input::placeholder{color:var(--ink-3);opacity:1}
:where(.dv) .dv-logo-dark{display:none}
.dv[data-theme="dark"] .dv-logo-light,[data-theme="dark"] .dv .dv-logo-light{display:none!important}
.dv[data-theme="dark"] .dv-logo-dark,[data-theme="dark"] .dv .dv-logo-dark{display:block!important}
:where(.dv) .dv-em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--red)}
/* The footer phrase is 20 px regular, so it needs 4.5:1: --red-ink (6.1:1 on paper, 6.8:1 in dark mode) in place of --red (4.2:1 / 3.9:1). */
.dv-site-footer p>.dv-em{color:var(--red-ink)}
:where(.dv) .dv-btn{transition:transform .22s cubic-bezier(.2,.7,.2,1),background-color .2s,color .2s,box-shadow .22s,border-color .2s}
:where(.dv) .dv-btn:hover{transform:translateY(-2px)}
:where(.dv) .dv-btn:active{transform:translateY(0)}
:where(.dv) .dv-btn-red:hover{background:var(--ink)!important;color:var(--paper)!important}
:where(.dv) .dv-btn-line:hover{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
:where(.dv) .dv-btn-cline:hover{background:var(--c-ink)!important;color:var(--console)!important;border-color:var(--c-ink)!important}
:where(.dv) .dv-btn-white:hover{background:#16130F!important;color:#fff!important}
:where(.dv) .dv-btn-ghostw:hover{background:#fff!important;color:#16130F!important}
:where(.dv) .dv-nav a{text-decoration:none;position:relative;padding:6px 0}
:where(.dv) .dv-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
:where(.dv) .dv-nav a:hover::after{transform:scaleX(1)}
:where(.dv) .dv-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor;transition:text-decoration-color .2s}
:where(.dv) .dv-link:hover{text-decoration-color:var(--red)}
.dv[data-theme="light"] .dv-stamp,[data-theme="light"] .dv .dv-stamp{mix-blend-mode:multiply}
.dv[data-pin="sticky"] .dv-shelf-list{--sh:clamp(250px,34vh,340px);padding-bottom:30vh}
.dv[data-pin="sticky"] .dv-shelf{justify-content:flex-start;padding-top:30px}
@keyframes dvPulse{0%,100%{opacity:1}50%{opacity:.3}}
:where(.dv) .dv-pulse{animation:dvPulse 2s ease-in-out infinite}
@supports (animation-timeline: view()){.dv[data-mode="scroll"] .dv-reveal{animation:dvRise linear both;animation-timeline:view();animation-range:entry 0% cover 25%}.dv[data-mode="scroll"] .dv-strike{animation:dvDraw linear both;animation-timeline:view();animation-range:entry 35% cover 45%}}
.dv[data-pin="sticky"] .dv-stage{position:sticky;top:100px}
.dv[data-mode="scroll"] .dv-sticky-l{position:sticky;top:120px}
.dv[data-motion="off"] *,.dv[data-motion="off"] *::before,.dv[data-motion="off"] *::after,[data-motion="reduce"] .dv *,[data-motion="reduce"] .dv *::before,[data-motion="reduce"] .dv *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.dv *,.dv *::before,.dv *::after{animation:none!important;transition:none!important}}
:where(.dv) .dv-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@supports (animation-timeline: view()){.dv[data-pin="sticky"] .dv-shelf-prog{animation:dvShelfProg linear both;animation-timeline:view();animation-range:cover calc(58vh - var(--sh)) cover 58vh}.dv[data-mode="scroll"] .dv-ladder-fill{animation:dvGrowX linear both;animation-timeline:view();animation-range:entry 20% cover 45%}}
.dv[data-motion="off"] .dv-stat-body,[data-motion="reduce"] .dv .dv-stat-body{filter:none!important;opacity:1!important}
.dv[data-pin="sticky"] .dv-tray{position:sticky;top:100px}
.dv[data-motion="off"] .dv-edit,.dv[data-motion="off"] .dv-edit-fact,.dv[data-motion="off"] .dv-edit-arrow svg,[data-motion="reduce"] .dv .dv-edit,[data-motion="reduce"] .dv .dv-edit-fact,[data-motion="reduce"] .dv .dv-edit-arrow svg{opacity:1!important;transform:none!important}
.dv[data-motion="off"] .dv-edit-ink,[data-motion="reduce"] .dv .dv-edit-ink{background-size:100% .085em!important}
:where(.dv) .dv-burger{display:none}
@media (max-width:1024px){.dv[data-pin="sticky"] .dv-tray{position:relative;top:auto}}
@media (max-width:1180px){:where(.dv) .dv-nav{gap:18px!important}:where(.dv) .dv-hide-lg{display:none!important}}
@media (max-width:980px){:where(.dv) .dv-nav{display:none!important}:where(.dv) .dv-burger{display:inline-flex!important}:where(.dv) .dv-hide-md{display:none!important}}
@media (max-width:640px){:where(.dv) .dv-hide-sm{display:none!important}}

/* WordPress glue (assets/css/glue/site-shell.css) ------------------------------------------ */
/*
 * The design root's own text settings (its inline style: ink, Inter 17 px, line height 1.55), on each part of the page
 * that carries .dv: the top bar, the header, the footer and the homepage's main. The other inherited properties start
 * at the browser's defaults, as under the design's root, whatever Astra set on <body>.
 */
.dv {
	color: var(--ink);
	font-family: var(--font);
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	font-feature-settings: normal;
	font-variation-settings: normal;
	font-optical-sizing: auto;
	font-kerning: auto;
	line-height: 1.55;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: start;
	text-indent: 0;
	text-transform: none;
	text-underline-offset: auto;
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	cursor: auto;
}

/* hidden wins over the display an element's inline style sets (the menu, the search results). */
.dv [hidden] {
	display: none !important;
}

/* The theme's focus ring is !important on every element: inside the design it is the design's (.dv :focus-visible),
   and none where the design's inline style removes it (the hero search field). */
.dv :focus-visible {
	outline: 2px solid var(--red) !important;
	outline-offset: 3px !important;
}

.dv [style*="outline: none"]:focus-visible {
	outline: none !important;
}

/* Images and fields at the browser's defaults where Astra sets them (img max-width, text field padding and borders). */
.dv img {
	max-width: none;
	vertical-align: baseline;
}

.dv input[type="text"],
.dv input[type="text"]:focus,
.dv input[type="range"],
.dv input[type="range"]:focus {
	margin: 0;
	padding: 1px 2px;
	border-radius: 0;
	box-shadow: none;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	transition: none;
}

.dv input[type="text"],
.dv input[type="text"]:focus {
	appearance: auto;
}

.dv input[type="range"],
.dv input[type="range"]:focus {
	padding: 0;
	border-color: revert;
	color: revert;
	font: revert;
}

/* Header ------------------------------------------------------------------------------------------------------------ */

/* Logged-in visitors: the sticky header sits under the admin bar. */
.admin-bar .dv-header {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	.admin-bar .dv-header {
		top: 46px !important;
	}
}

/* The currency pair is links (the cache variant needs a page load), drawn as the design's buttons. */
.dv a.dv-cur {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: normal;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

/* The theme toggle's icon: the moon in the light theme, the sun in the dark one (html[data-theme], set before paint). */
.dv .dv-when-dark,
[data-theme="dark"] .dv .dv-when-light {
	display: none;
}

[data-theme="dark"] .dv .dv-when-dark {
	display: inline;
}

/* The footer's theme pair and "Reduce motion": pressed by html[data-theme] and html[data-motion] (prefs.js keeps
   aria-pressed in step), so the cached page needs no per-visitor markup. */
.dv .dv-theme-btn {
	background: transparent;
	color: var(--ink-2);
}

:root:not([data-theme="dark"]) .dv .dv-theme-btn[data-dv-theme-set="light"],
[data-theme="dark"] .dv .dv-theme-btn[data-dv-theme-set="dark"] {
	background: var(--ink);
	color: var(--paper);
}

.dv .dv-motion-box {
	border: 1.5px solid var(--rule-2);
	background: transparent;
}

[data-motion="reduce"] .dv .dv-motion-box {
	border-color: var(--red);
	background: var(--red);
}

/* The Tools mega menu (inc/mega-menu.php, menu.js, menu.css): the panel hangs under the header row; its disclosure
   button stays out of sight (the design shows none) until a keyboard focuses it. */
.dv-header-row {
	position: relative;
}

.dv-header .dv-mega-item {
	display: contents;
}

#dv-header .dv-mega-item .dv-mega__toggle:not(:focus-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

#dv-header .dv-mega.dv-console {
	right: clamp(16px, 4vw, 56px);
	left: clamp(16px, 4vw, 56px);
}

.dv-nav .dv-mega a::after {
	content: none;
}

/* Exclusive Deals (inc/site-shell.php, dv_shell_deals_link()): the header's spotlight, a filled red pill with a live dot
   (.dv-pulse, which the reduced-motion rules already stop). White on --red-btn is 5.9:1 in both themes. The phone
   menu's row carries its own inline style; for it only the dot, the arrow and the hover are here. */
.dv-nav a.dv-deals {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--red-btn);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: filter .2s, transform .22s cubic-bezier(.2, .7, .2, 1);
}

.dv-nav a.dv-deals::after {
	content: none;
}

.dv-nav a.dv-deals:hover {
	color: #fff;
	transform: translateY(-1px);
}

.dv-deals:hover {
	filter: brightness(.88);
}

.dv-deals__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.dv-deals__ext {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* In the bar the pill is the compact one (14 px, no arrow); the arrow and the full size join it where there is room. */
.dv-nav a.dv-deals .dv-deals__ext {
	display: none;
}

@media (min-width: 1500px) {
	.dv-nav a.dv-deals {
		gap: 8px;
		padding: 7px 14px;
		font-size: 15px;
	}

	.dv-nav a.dv-deals .dv-deals__ext {
		display: block;
	}
}

/* The header's hand-over. Where the bar no longer fits it gives way to the menu button (header.php): the links, the
   currency pair, the theme button, the divider and Client area leave the bar (the menu has them all) and the Exclusive Deals
   pill stays. The widths are the narrowest at which each bar fits on one row, measured with a 15 px scrollbar on 28 Oct 2026
   (the capsule bar 1225 px, with the currency pair 1330 px), plus 10 px. The header carries
   .dv-header--cur when the currency pair is in it and .dv-header--blog on the blog's own bar. The cart, once the checkout is
   live, takes about 54 px more: raise these then. */
.dv-header:not(.dv-header--blog) .dv-nav > a,
.dv-header:not(.dv-header--blog) .dv-nav > .dv-mega-item > a {
	white-space: nowrap;
}

@media (max-width: 1234px) {
	.dv-header:not(.dv-header--blog) .dv-nav,
	.dv-header:not(.dv-header--blog) .dv-tools-wide {
		display: none !important;
	}

	.dv-header:not(.dv-header--blog) .dv-burger {
		display: inline-flex !important;
	}
}

@media (max-width: 1339px) {
	.dv-header--cur:not(.dv-header--blog) .dv-nav,
	.dv-header--cur:not(.dv-header--blog) .dv-tools-wide {
		display: none !important;
	}

	.dv-header--cur:not(.dv-header--blog) .dv-burger {
		display: inline-flex !important;
	}
}

@media (max-width: 1039px) {
	.dv-header--blog .dv-nav {
		display: none !important;
	}

	.dv-header--blog .dv-burger {
		display: inline-flex !important;
	}
}

@media (max-width: 1159px) {
	.dv-header--blog.dv-header--cur .dv-nav {
		display: none !important;
	}

	.dv-header--blog.dv-header--cur .dv-burger {
		display: inline-flex !important;
	}
}

/* The capsule header (owner, 28 Oct 2026; canvas "DigitaVision navbar redesign"): the links sit in a soft capsule set in
   Bricolage Grotesque, the current section filled; Client area is a quiet link; Exclusive Deals is the one filled button.
   What shows above the fold on a phone is inline in header.php (the stored mobile critical CSS predates these rules). */
.dv-capsule > a,
.dv-capsule > .dv-mega-item > a {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border-radius: 999px;
	color: var(--ink-2);
	transition: background-color .15s, color .15s;
}

.dv-capsule > a::after {
	content: none;
}

.dv-capsule > a:hover,
.dv-capsule > .dv-mega-item > a:hover {
	background: var(--card);
	color: var(--ink);
}

.dv-capsule > a[aria-current="page"],
.dv-capsule > .dv-mega-item > a[aria-current="page"] {
	background: var(--ink);
	color: var(--paper);
}

/* Tools carries the mega menu: a small chevron says so. */
.dv-capsule > .dv-mega-item > a::after,
.dv-capsule > .dv-mega-item > a:hover::after {
	content: "";
	position: static;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 8px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	background: none;
	transform: rotate(45deg);
}

.dv-quiet {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 2px;
	color: var(--ink);
	font-family: var(--display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	white-space: nowrap;
	text-decoration: none;
}

.dv-quiet:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* The divider the bar used to print (header.php no longer does; this keeps the older markup quiet until that is published). */
.dv-tools-sep {
	display: none;
}

/* Room: the header holds six links, the currency pair, search, theme, Client area and the pill in 1248 px, so the gaps and
   the pair are tight on purpose (without them the Bangladesh bar overshoots its container). */
.dv-header:not(.dv-header--blog) .dv-header-row {
	gap: 24px !important;
}

.dv-header:not(.dv-header--blog) .dv-header-tools {
	gap: 8px !important;
}

.dv-header:not(.dv-header--blog) .dv-header-tools fieldset a.dv-cur {
	min-width: 40px !important;
	padding: 0 10px !important;
}

/* The pill in the bar: the arrow joins it from 1500 px; on a phone the row is tighter (smaller logo, 8 px gaps), and under
   380 px the label reads "Deals" (the full name stays in the accessible name). */
.dv-deals--tools .dv-deals__ext {
	display: none;
}

@media (min-width: 1500px) {
	.dv-deals--tools .dv-deals__ext {
		display: block;
	}
}

@media (max-width: 639px) {
	.dv-header:not(.dv-header--blog) .dv-header-row {
		gap: 8px !important;
	}

	.dv-header:not(.dv-header--blog) .dv-header-row > a img {
		height: 32px !important;
	}

	.dv-deals--tools {
		padding: 0 12px !important;
	}
}

@media (max-width: 379px) {
	.dv-deals--tools .dv-deals__x {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* The menu (every page but the blog's): search first, the links, then Client area, the currency pair and the theme. From
   640 px it is a panel of two columns: the links on the left, the account controls on the right. It scrolls inside itself
   when the screen is short. */
#dv-menu.dv-menu--sheet {
	overscroll-behavior: contain;
}

/* A short screen scrolls the menu inside itself (max-height, header.php): its parts keep their size. */
.dv-menu--sheet > * {
	flex-shrink: 0;
}

.dv-menu--sheet [data-dv-theme-set][aria-pressed="true"] {
	background: var(--ink) !important;
	color: var(--paper) !important;
}

@media (min-width: 640px) {
	#dv-menu.dv-menu--sheet:not([hidden]) {
		display: grid !important;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		column-gap: 40px;
		align-items: start;
	}

	.dv-menu--sheet > .dv-menu-search {
		grid-column: 1 / -1;
	}

	.dv-menu--sheet > .dv-menu-main {
		grid-column: 1;
	}

	.dv-menu--sheet > .dv-menu-aside {
		grid-column: 2;
		grid-row: 2;
	}
}

/* FiboSearch: the design's search button opens FiboSearch's overlay (search.js clicks its trigger; menu.css draws the
   modal). FiboSearch's own icon is never drawn, the design's button is the one icon; its wrapper sits under the
   button only so the trigger has a place in the page. */
.dv-header-tools {
	position: relative;
}

.dv-fibo {
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 44px;
	pointer-events: none;
}

.dv-fibo .js-dgwt-wcas-search-icon-handler,
.dv-fibo .dgwt-wcas-search-icon-arrow {
	display: none !important;
}

/* Astra styles every range input's track and thumb (input[type=range]::-webkit-slider-*, ::-moz-range-*), more
   specific than the design's .dv-range-in rules: its extra properties go back to the browser's, and the design's
   values are restated at a specificity that wins. */
.dv input[type="range"]::-webkit-slider-runnable-track,
.dv input[type="range"]:focus::-webkit-slider-runnable-track {
	width: auto;
	cursor: default;
	box-shadow: none;
	border: 0;
	border-radius: 0;
}

.dv input[type="range"]::-webkit-slider-thumb {
	cursor: default;
}

.dv input[type="range"]::-moz-range-track {
	width: auto;
	cursor: default;
	box-shadow: none;
	border: 0;
	border-radius: 0;
}

.dv input[type="range"]::-moz-range-thumb {
	cursor: default;
}

.dv .dv-range-in::-webkit-slider-runnable-track,
.dv .dv-range-in:focus::-webkit-slider-runnable-track {
	height: 10px;
	background: transparent;
}

.dv .dv-range-in::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 28px;
	margin-top: -9px;
	border-radius: 50%;
	background: var(--c-ink);
	border: 5px solid var(--red);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}

.dv .dv-range-in::-moz-range-track {
	height: 10px;
	background: transparent;
}

.dv .dv-range-in::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--c-ink);
	border: 5px solid var(--red);
	box-shadow: none;
}

/* The footer's "We accept" (template-parts/site/footer.php, inc/payment-marks.php): brand marks on white tiles, as card
   brands ask, in both themes; the methods without a mark as text tiles of the same size. Then SSLCommerz's "Pay with"
   strip on its white card, at a readable height, gliding in a loop with soft edges. */
.dv .dv-pay-tile {
	height: 36px;
	min-width: 58px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rule);
	border-radius: 8px;
	background: #fff;
	color: #3B362E;
}

.dv .dv-pay-tile.is-text {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.dv .dv-pay-mark {
	display: block;
	flex-shrink: 0;
}

.dv .dv-pay-name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dv .dv-pay-ssl {
	position: relative;
	padding: 8px 0;
	overflow: hidden;
	border: 1px solid var(--rule);
	border-radius: 12px;
	background: #fff;
}

/* Soft edges inside the white card (the card's own corners stay crisp in the dark theme). */
.dv .dv-pay-ssl::before,
.dv .dv-pay-ssl::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 40px;
	pointer-events: none;
}

.dv .dv-pay-ssl::before {
	left: 0;
	background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
}

.dv .dv-pay-ssl::after {
	right: 0;
	background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0));
}

.dv .dv-pay-ssl-track {
	display: flex;
	width: max-content;
	animation: dvPaySlide 70s linear infinite;
}

.dv .dv-pay-ssl:is(:hover, :focus-within) .dv-pay-ssl-track {
	animation-play-state: paused;
}

.dv .dv-pay-ssl img {
	display: block;
	width: auto;
	max-width: none;
	height: 56px;
	padding-right: 24px;
}

.dv .dv-pay-ssl:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

@keyframes dvPaySlide {
	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 900px) {
	.dv .dv-pay-ssl img {
		height: 40px;
	}

	.dv .dv-pay-ssl-track {
		animation-duration: 55s;
	}
}

/* Reduced motion: the strip stands still and scrolls by hand; the loop's second copy goes. */
@media (prefers-reduced-motion: reduce) {
	.dv .dv-pay-ssl {
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.dv .dv-pay-ssl::before,
	.dv .dv-pay-ssl::after {
		display: none;
	}

	.dv .dv-pay-ssl-track {
		animation: none;
	}

	.dv .dv-pay-ssl img[aria-hidden="true"] {
		display: none;
	}
}

/*
 * The top bar's ticker (template-parts/site/header.php, owner 10 Oct 2026): the messages run right to left in one line,
 * full width, faded at both edges. The track holds the list twice and moves by half its width, so the loop has no seam;
 * each message ends with a small red diamond, the last one too, so the join reads like every other gap. Hovering the
 * messages or the pause button (shown by site-shell.js) holds it. Under reduced motion it stands still and scrolls by hand.
 */
.dv-tb {
	display: flex;
	align-items: center;
	min-height: 36px;
}
.dv-tb-view {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.dv-tb-track {
	display: flex;
	width: max-content;
	animation: dvTicker var(--dv-tb-dur, 60s) linear infinite;
}
.dv-tb-view:hover .dv-tb-track,
.dv-tb[data-paused] .dv-tb-track {
	animation-play-state: paused;
}
@keyframes dvTicker {
	to {
		transform: translateX(-50%);
	}
}
.dv .dv-tb-list {
	list-style: none;
	margin: 0;
	padding: 9px 28px 9px 0;
	display: flex;
	flex-shrink: 0;
	justify-content: space-around;
	align-items: center;
	gap: 28px;
	min-width: 100vw;
	white-space: nowrap;
}
.dv .dv-tb-list > li {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0 28px;
	line-height: 18px;
}
.dv .dv-tb-list > li::after {
	content: "";
	width: 5px;
	height: 5px;
	flex-shrink: 0;
	background: var(--red);
	transform: rotate(45deg);
}
.dv .dv-tb-live {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 10px;
	vertical-align: 0;
	border-radius: 50%;
	background: var(--ok);
}
.dv .dv-tb-lead {
	color: var(--c-ink);
}
.dv .dv-tb-pause {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin: 0 clamp(16px, 4vw, 56px) 0 6px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--c-rule);
	border-radius: 999px;
	background: transparent;
	color: var(--c-ink-2);
	cursor: pointer;
}
.dv .dv-tb-pause[hidden] {
	display: none;
}
.dv .dv-tb-pause:hover {
	color: var(--c-ink);
	border-color: var(--c-ink-3);
}
.dv .dv-tb-pause:focus-visible {
	outline: 2px solid var(--c-ink);
	outline-offset: 2px;
}
.dv .dv-tb-pause svg {
	fill: currentColor;
}
.dv .dv-tb-pause .dv-tb-i-play,
.dv .dv-tb-pause[aria-pressed="true"] .dv-tb-i-pause {
	display: none;
}
.dv .dv-tb-pause[aria-pressed="true"] .dv-tb-i-play {
	display: block;
}
@media (prefers-reduced-motion: reduce) {
	.dv-tb-track {
		animation: none;
	}
	.dv-tb-view {
		overflow-x: auto;
		scrollbar-width: none;
	}
	.dv-tb-view::-webkit-scrollbar {
		display: none;
	}
	.dv .dv-tb-list[aria-hidden="true"],
	.dv .dv-tb-pause {
		display: none;
	}
	.dv .dv-tb-list {
		min-width: 0;
		padding-left: clamp(16px, 4vw, 56px);
	}
}
html[data-motion="reduce"] .dv-tb-track {
	animation: none;
}
html[data-motion="reduce"] .dv-tb-view {
	overflow-x: auto;
	scrollbar-width: none;
}
html[data-motion="reduce"] .dv .dv-tb-list[aria-hidden="true"],
html[data-motion="reduce"] .dv .dv-tb-pause {
	display: none;
}

/*
 * Dark mode surfaces (owner, 10 Oct 2026). The design's dark values put the page (#131210), the alternate bands
 * (#1B1A17) and the console bands (#09090A) within 7 L* of each other, so the ticker, packs and "How access works"
 * bands, the shelf console and the hero tiles merged into one black page. In light mode the consoles are the
 * inverse of the paper; in dark mode they are now the raised surface: a cool graphite, lighter than the warm page,
 * with each step about 4-5 L* apart. The console text greys and the console red are lifted to keep 4.5:1 on the
 * lighter consoles. Light mode is unchanged.
 */
.dv[data-theme="dark"],
[data-theme="dark"] .dv {
	--paper: #151412;
	--paper-2: #1E1C19;
	--card: #272521;
	--rule: #3A372F;
	--rule-2: #4F4B42;
	--ink-4: #9C9588;
	--console: #24252B;
	--console-2: #2E2F36;
	--console-3: #393A42;
	--c-rule: #45464F;
	--c-ink-2: #BDB7AA;
	--c-ink-3: #A6A195;
	--red-c: #FF6B6B;
}

/* Below a page's own content the footer starts on the same dark as the page: a hairline marks where it begins.
   The homepage ends on the red band, which needs none. */
[data-theme="dark"] body:not(.dv-home) .dv-site-footer {
	border-top: 1px solid var(--rule);
}