/**
 * DriveBotix — Commerce & page layer
 * Styles the real WooCommerce markup (catalog, product, cart, checkout,
 * account), prose pages, popups and the cookie banner to the DS v2 language.
 */

/* ==========================================================================
   1. Page shell used by every non-home page
   ========================================================================== */
.db-page {
	position: relative;
	border-bottom: 1px solid var(--db-line);
	background:
		radial-gradient(110% 90% at 88% -10%, rgba(30, 111, 255, .09), transparent 62%),
		var(--db-void);
}

.db-page__in {
	position: relative;
	/* padding-block only — the horizontal gutter comes from .db-wrap on the
	   same element, and a shorthand here would wipe it out */
	padding-top: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(30px, 3.6vw, 46px);
}

.db-page__title { max-width: 22ch; }
.db-page__sub { margin-top: 16px; max-width: 62ch; }

.db-page__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--db-line);
}

/* Prose (legal, long copy) */
.db-prose { max-width: 76ch; }
.db-prose > * + * { margin-top: 18px; }
.db-prose h2 { font-size: 24px; margin-top: 42px !important; letter-spacing: -0.018em; }
.db-prose h3 { font-size: 18.5px; margin-top: 30px !important; }
.db-prose h4 { font-size: 16px; margin-top: 24px !important; }
.db-prose p,
.db-prose li { font-size: 15.5px; line-height: 1.7; color: var(--db-ink-2); }
.db-prose ul,
.db-prose ol { padding-left: 20px; display: grid; gap: 9px; }
.db-prose ul li { list-style: disc; }
.db-prose ol li { list-style: decimal; }
.db-prose li::marker { color: var(--db-ink-3); }
.db-prose a { color: var(--db-ink); border-bottom: 1px solid var(--db-line-2); }
.db-prose a:hover { border-color: var(--db-blue); }
.db-prose strong { color: var(--db-ink); }
.db-prose hr { border: 0; border-top: 1px solid var(--db-line); margin: 32px 0 !important; }
.db-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.db-prose th, .db-prose td { border: 1px solid var(--db-line); padding: 10px 12px; text-align: left; }
.db-prose th { background: var(--db-panel-2); font-family: var(--db-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--db-ink-3); }
.db-prose blockquote {
	border-left: 2px solid var(--db-cyan);
	padding: 4px 0 4px 18px;
	color: var(--db-ink-2);
}

/* ==========================================================================
   2. Catalog
   ========================================================================== */
.db-catalog {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.db-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;
}
.db-pcard:hover { border-color: var(--db-line-2); transform: translateY(-2px); }

.db-pcard__vis {
	position: relative;
	aspect-ratio: 16 / 9;
	background:
		linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 32px 32px,
		var(--db-void);
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--db-line);
	overflow: hidden;
}
.db-pcard__vis svg,
.db-pcard__vis img { width: 74%; height: auto; max-height: 82%; object-fit: contain; }

.db-pcard__flag {
	position: absolute;
	top: 12px; left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 23px;
	padding: 0 9px;
	border: 1px solid var(--db-line-2);
	border-radius: 2px;
	background: rgba(8, 9, 11, .78);
	font-family: var(--db-mono);
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--db-ink-2);
}
.db-pcard__flag i { width: 5px; height: 5px; border-radius: 50%; background: var(--db-ok); }
.db-pcard__flag.is-quote i { background: var(--db-cyan); }

.db-pcard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }

.db-pcard__id { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.db-pcard__name { font-family: var(--db-mono); font-size: 19px; font-weight: 500; color: var(--db-ink); letter-spacing: -0.012em; }
.db-pcard__sku { font-family: var(--db-mono); font-size: 10.5px; color: var(--db-ink-3); letter-spacing: .1em; }

.db-pcard__role { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--db-ink-3); }

.db-pcard__dl { margin-top: 18px; }
.db-pcard__dl dt, .db-pcard__dl dd { padding: 9px 0; }

/* Plain checkmark + sentence rows (.db-prow__feat, shared with the
   homepage family table and "other models" section) — a bordered table
   of full sentences looked cramped/ugly here, and needs its own bottom
   margin since .db-pcard__foot's border-top otherwise sits flush against
   the last row (margin-top:auto only affects space *after* it). */
.db-pcard__specs { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }

.db-pcard__foot {
	margin-top: auto;
	padding-top: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid var(--db-line);
}

.db-price { display: flex; flex-direction: column; gap: 4px; }
.db-price__v { font-family: var(--db-mono); font-size: 17px; font-weight: 500; color: var(--db-ink); }
.db-price__v .woocommerce-Price-amount { font-family: var(--db-mono); }
.db-price__v del { color: var(--db-ink-3); font-size: 13px; margin-right: 8px; }
.db-price__v ins { text-decoration: none; }
.db-price__n { font-family: var(--db-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--db-ink-3); }
.db-price--quote .db-price__v { color: var(--db-cyan); font-size: 15px; }

/* filters / toolbar */
.db-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0 22px;
	flex-wrap: wrap;
}
.db-toolbar__count { font-family: var(--db-mono); font-size: 11.5px; color: var(--db-ink-3); letter-spacing: .06em; }
.db-toolbar__right { display: flex; align-items: center; gap: 10px; }

/* ==========================================================================
   3. Single product
   ========================================================================== */
.db-pdp {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
	gap: clamp(28px, 3.6vw, 56px);
	align-items: start;
}

/* When there's only one mechanical format (or the client has narrowed the
   catalogue to one via DriveBotix Core → Product formats on sale), the
   format-switcher tabs are hidden and the media column loses the height
   that used to fill — leaving it visibly shorter than the buy panel next
   to it. Stretch the two columns to match in that case specifically. */
.db-pdp:not(:has(.db-pdp__switch)) { align-items: stretch; }
.db-pdp:not(:has(.db-pdp__switch)) .db-pdp__media { display: flex; flex-direction: column; }
.db-pdp:not(:has(.db-pdp__switch)) .db-pdp__stage { flex: 1; }

.db-pdp__media { position: relative; }

.db-pdp__stage {
	position: relative;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	background:
		linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 40px 40px,
		var(--db-panel);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.db-pdp__stage svg,
.db-pdp__stage img { width: 82%; height: auto; max-height: 86%; object-fit: contain; }

.db-pdp__stagecap {
	position: absolute;
	left: 16px; bottom: 14px;
	font-family: var(--db-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--db-ink-3);
}

.db-pdp__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.db-pdp__thumb {
	width: 76px; height: 60px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	background: var(--db-void);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .16s;
}
.db-pdp__thumb.is-active { border-color: var(--db-cyan); }
.db-pdp__thumb:hover { border-color: var(--db-line-2); }
.db-pdp__thumb svg, .db-pdp__thumb img { width: 84%; height: auto; }

/* buy panel */
.db-buy {
	position: sticky;
	top: calc(var(--db-nav-h) + 20px);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	background: var(--db-panel);
	overflow: hidden;
}

.db-buy__head { padding: 22px 24px 20px; border-bottom: 1px solid var(--db-line); }
.db-buy__name { font-family: var(--db-mono); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--db-ink); }
.db-buy__role { margin-top: 9px; font-size: 14px; line-height: 1.55; color: var(--db-ink-2); }

.db-buy__pricewrap {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--db-line);
}
.db-buy__price { font-family: var(--db-mono); font-size: 27px; font-weight: 500; color: var(--db-ink); letter-spacing: -0.02em; }
.db-buy__price .woocommerce-Price-amount { font-family: var(--db-mono); }
.db-buy__price del { font-size: 16px; color: var(--db-ink-3); margin-right: 10px; }
.db-buy__price ins { text-decoration: none; }
.db-buy__vat { font-family: var(--db-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--db-ink-3); margin-top: 6px; }

.db-stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--db-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--db-ink-2);
}
.db-stock i { width: 6px; height: 6px; border-radius: 50%; background: var(--db-ok); }
.db-stock.is-out i { background: var(--db-err); }
.db-stock.is-quote i { background: var(--db-cyan); }

.db-buy__form { padding: 20px 24px 22px; display: grid; gap: 16px; }

.db-buy__row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: end; }

.db-qty { display: flex; align-items: stretch; border: 1px solid var(--db-line); border-radius: var(--db-r); overflow: hidden; background: var(--db-panel-2); }
.db-qty button {
	width: 38px;
	background: transparent;
	border: 0;
	color: var(--db-ink-2);
	font-size: 17px;
	cursor: pointer;
	transition: background .14s, color .14s;
}
.db-qty button:hover { background: var(--db-panel-3); color: var(--db-ink); }
.db-qty input {
	width: 44px;
	min-height: 44px;
	border: 0;
	border-left: 1px solid var(--db-line);
	border-right: 1px solid var(--db-line);
	background: transparent;
	color: var(--db-ink);
	text-align: center;
	font-family: var(--db-mono);
	font-size: 14px;
	appearance: textfield;
	-moz-appearance: textfield;
}
.db-qty input::-webkit-outer-spin-button,
.db-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.db-buy__assure { display: grid; gap: 10px; padding: 18px 24px 22px; border-top: 1px solid var(--db-line); background: var(--db-panel-2); }
.db-buy__assure div { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 10px; align-items: start; }
.db-buy__assure svg { width: 15px; height: 15px; color: var(--db-ink-3); margin-top: 2px; }
.db-buy__assure span { font-size: 12.5px; color: var(--db-ink-2); line-height: 1.5; }
.db-buy__assure b { color: var(--db-ink); font-weight: 600; }

/* variation selector (Woo variable products) */
.db-pdp .variations { width: 100%; border-collapse: collapse; }
.db-pdp .variations tr { display: grid; gap: 7px; margin-bottom: 14px; }
.db-pdp .variations th,
.db-pdp .variations td { display: block; padding: 0; text-align: left; border: 0; }
.db-pdp .variations th label {
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--db-ink-3);
}
.db-pdp .variations select {
	width: 100%;
	min-height: 46px;
	padding: 12px 38px 12px 14px;
	background-color: var(--db-panel-2);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink);
	font-family: var(--db-sans);
	font-size: 15px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ba5b4' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
}
.db-pdp .reset_variations {
	font-family: var(--db-mono);
	font-size: 11px;
	color: var(--db-ink-3);
	display: inline-block;
	margin-top: 4px;
}
.db-pdp .woocommerce-variation-price { margin-bottom: 14px; }
.db-pdp .woocommerce-variation-price .price { font-family: var(--db-mono); font-size: 20px; color: var(--db-ink); }
.db-pdp .woocommerce-variation-availability { margin-bottom: 12px; }

/* single_add_to_cart / woo form normalisation inside buy panel */
.db-buy form.cart { display: grid; gap: 14px; margin: 0; }
.db-buy form.cart .quantity { display: none; }
.db-buy .single_add_to_cart_button,
.db-buy button[name="add-to-cart"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 50px;
	padding: 0 24px;
	background: var(--db-blue) !important;
	border: 1px solid var(--db-blue) !important;
	border-radius: var(--db-r) !important;
	color: #fff !important;
	font-family: var(--db-sans) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	transition: background .18s ease;
}
.db-buy .single_add_to_cart_button:hover { background: var(--db-blue-2) !important; border-color: var(--db-blue-2) !important; }
.db-buy .single_add_to_cart_button.disabled,
.db-buy .single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; }

/* product content sections */
.db-pdp__sections { margin-top: clamp(40px, 4.6vw, 72px); display: grid; gap: clamp(32px, 3.6vw, 52px); }
/* grid items default to min-width:auto (sized to their content's intrinsic
   minimum), so a wide spec table or nowrap tab bar inside a section here
   can refuse to shrink below its own content width and force the whole
   section - and with it the page - wider than the viewport on mobile.
   min-width:0 makes these sections respect the grid track instead; the
   .db-tabs__bar/.db-spec-wrap overflow-x rules below are the actual escape
   valve for content that is still genuinely too wide to fit. */
.db-pdp__sections > * { min-width: 0; }

.db-sec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--db-line-2);
	margin-bottom: 22px;
}
.db-sec__head h2 { font-size: 21px; font-weight: 680; letter-spacing: -0.016em; }

.db-specgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--db-line);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	overflow: hidden;
}
.db-specgroup { background: var(--db-panel); padding: 20px 22px 22px; }
.db-specgroup > .db-mono {
	display: block;
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--db-cyan);
	margin-bottom: 6px;
}

.db-downloads { display: grid; gap: 10px; }
.db-dlrow {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	background: var(--db-panel);
	transition: border-color .16s, background .16s;
}
.db-dlrow:hover { border-color: var(--db-line-2); background: var(--db-panel-2); }
.db-dlrow__ico { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--db-line); border-radius: var(--db-r); color: var(--db-ink-2); }
.db-dlrow__ico svg { width: 16px; height: 16px; }
.db-dlrow b { display: block; font-size: 14px; font-weight: 600; color: var(--db-ink); }

/* Only the meta line under the title takes the mono treatment. A blanket
   `.db-dlrow span` rule also caught the icon wrapper, the action button and the
   spans WooCommerce nests inside a formatted price, which broke the icon
   centring, restyled the button and pushed the currency symbol onto its own
   line. */
.db-dlrow__meta {
	display: block;
	font-family: var(--db-mono);
	font-size: 11px;
	color: var(--db-ink-3);
	margin-top: 3px;
}

.db-dlrow .db-dlrow__ico { display: flex; }

.db-dlrow__meta .woocommerce-Price-amount,
.db-dlrow__meta .woocommerce-Price-currencySymbol,
.db-dlrow__meta bdi {
	display: inline;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	margin: 0;
	white-space: nowrap;
}

/* ==========================================================================
   4. WooCommerce notices
   ========================================================================== */
.woocommerce-notices-wrapper:empty { display: none; }

.db .woocommerce-message,
.db .woocommerce-info,
.db .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 20px;
	padding: 14px 18px;
	background: var(--db-panel-2);
	border: 1px solid var(--db-line-2);
	border-left: 2px solid var(--db-cyan);
	border-radius: var(--db-r);
	color: var(--db-ink);
	font-size: 14px;
	list-style: none;
}
.woocommerce-page .woocommerce-message { border-left-color: var(--db-ok); }
.woocommerce-page .woocommerce-error { border-left-color: var(--db-err); }
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-error::before { display: none !important; }
.woocommerce-page .woocommerce-error li { list-style: none; }
.woocommerce-page .woocommerce-message .button,
.woocommerce-page .woocommerce-info .button {
	margin-left: auto;
	min-height: 38px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	background: transparent !important;
	border: 1px solid var(--db-line-2) !important;
	color: var(--db-ink) !important;
	border-radius: var(--db-r) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
}
.woocommerce-page .woocommerce-message .button:hover { background: rgba(255,255,255,.05) !important; }

/* ==========================================================================
   5. Cart
   ========================================================================== */
.db-cartwrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 28px;
	align-items: start;
}

/* Specificity must beat `.db-checkout .woocommerce { display: block; }`
   (checkout needs that; /cart/ shares the same .db-checkout page wrapper)
   regardless of source order, or the cart form + totals sidebar stop being
   independent grid items and collapse into one column - the whole cart
   block then sits noticeably left-of-center with the totals sidebar's
   372px column empty beside it. Qualifying with .db-checkout too raises
   this from (0,2,0) to (0,3,0) so it always wins. */
.db-checkout .db-cartwrap .woocommerce { display: contents; }

.woocommerce-cart-form {
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	overflow: hidden;
}

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	border-radius: 0;
	margin: 0;
	background: transparent;
	font-size: 14px;
}

.woocommerce table.shop_table thead th {
	padding: 13px 18px;
	background: var(--db-panel-2);
	border-bottom: 1px solid var(--db-line-2);
	font-family: var(--db-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--db-ink-3);
	text-align: left;
}

.woocommerce table.shop_table td {
	padding: 18px;
	border-top: 1px solid var(--db-line);
	color: var(--db-ink);
	vertical-align: middle;
	/* Hello Elementor's own reset.css zebra-stripes every odd tbody row
	   (table tbody > tr:nth-child(2n+1) > td { background: rgba(128,128,128,.07) })
	   sitewide. On the mobile cart card that reads as a random grey box
	   behind the model name/quantity cells, since the <td>s are still real
	   table cells even though the row is laid out as a grid. Neutralise it
	   here (higher specificity already wins; this is just explicit). */
	background: transparent;
}

.woocommerce table.shop_table td.product-remove { width: 52px; padding-right: 0; }
.woocommerce table.shop_table td.product-thumbnail { width: 88px; }
/* the thumbnail link is the sized/bordered frame (matches the mini-cart
   drawer's item visual) so a real photo and the no-photo-yet SVG glyph
   (DB_Catalog::visual(), swapped in via woocommerce_cart_item_thumbnail)
   sit identically centered inside it. */
.woocommerce table.shop_table td.product-thumbnail a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px; height: 68px;
	background: var(--db-void);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	padding: 6px;
	box-sizing: border-box;
}
.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce table.shop_table td.product-thumbnail svg {
	width: 100%; height: 100%;
	object-fit: contain;
	border: 0;
}



.woocommerce a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink-3) !important;
	font-size: 15px;
	line-height: 1;
	background: transparent !important;
	transition: color .15s, border-color .15s;
}
.woocommerce a.remove:hover { color: var(--db-err) !important; border-color: rgba(236,91,86,.4); background: rgba(236,91,86,.08) !important; }

.woocommerce td.product-name a { color: var(--db-ink); font-family: var(--db-mono); font-size: 15px; }
.woocommerce td.product-name a:hover { color: #fff; }
.woocommerce td.product-name .variation { margin: 6px 0 0; font-size: 12px; color: var(--db-ink-3); }
.woocommerce td.product-name .variation dt,
.woocommerce td.product-name .variation dd { display: inline; margin: 0; font-family: var(--db-mono); font-size: 11.5px; }

.woocommerce td.product-price,
.woocommerce td.product-subtotal { font-family: var(--db-mono); }
.woocommerce td.product-subtotal { font-weight: 500; }

.woocommerce .quantity { display: inline-flex; }
.woocommerce .quantity input.qty {
	width: 72px;
	min-height: 42px;
	padding: 8px 10px;
	background: var(--db-panel-2);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink);
	text-align: center;
	font-family: var(--db-mono);
	font-size: 14px;
}

.woocommerce table.shop_table td.actions { padding: 16px 18px; background: var(--db-panel-2); border-top: 1px solid var(--db-line-2); }
.woocommerce .coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.woocommerce .coupon label { display: none; }
.woocommerce #coupon_code {
	min-width: 190px;
	min-height: 42px;
	padding: 10px 13px;
	background: var(--db-void);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink);
	font-family: var(--db-mono);
	font-size: 13px;
}

/* generic Woo buttons -> DS */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	background: var(--db-panel-3);
	border: 1px solid var(--db-line-2);
	border-radius: var(--db-r);
	color: var(--db-ink);
	font-family: var(--db-sans);
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	transition: background .16s, border-color .16s, color .16s;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover { background: var(--db-panel-2); border-color: var(--db-line-3); color: #fff; }

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order {
	background: var(--db-blue);
	border-color: var(--db-blue);
	color: #fff;
}
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover { background: var(--db-blue-2); border-color: var(--db-blue-2); color: #fff; }

.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity: .45; cursor: not-allowed; }

/* cart totals */
.cart-collaterals { width: 100%; }
.cart-collaterals .cross-sells { display: none; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals { width: 100%; float: none; }

.cart_totals {
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	overflow: hidden;
	position: sticky;
	top: calc(var(--db-nav-h) + 20px);
}
.cart_totals h2 {
	padding: 16px 20px;
	margin: 0;
	border-bottom: 1px solid var(--db-line-2);
	background: var(--db-panel-2);
	font-family: var(--db-mono) !important;
	font-size: 10.5px !important;
	font-weight: 500 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--db-ink-3) !important;
}
.cart_totals table.shop_table_responsive,
.cart_totals table { margin: 0; }
.cart_totals th {
	padding: 14px 20px !important;
	background: transparent !important;
	border-top: 1px solid var(--db-line) !important;
	border-bottom: 0 !important;
	font-family: var(--db-sans) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--db-ink-2) !important;
	width: 45%;
}
.cart_totals td {
	padding: 14px 20px !important;
	border-top: 1px solid var(--db-line) !important;
	text-align: right;
	font-family: var(--db-mono);
	color: var(--db-ink);
}
.cart_totals tr:first-child th,
.cart_totals tr:first-child td { border-top: 0 !important; }
.cart_totals .order-total th,
.cart_totals .order-total td { border-top: 1px solid var(--db-line-2) !important; }
.cart_totals .order-total td { font-size: 17px; font-weight: 500; }
.cart_totals .woocommerce-shipping-destination,
.cart_totals .woocommerce-shipping-calculator { font-size: 12.5px; color: var(--db-ink-3); }
.cart_totals .wc-proceed-to-checkout { padding: 18px 20px; border-top: 1px solid var(--db-line-2); background: var(--db-panel-2); }
.cart_totals .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 50px; font-size: 15px; }

/* /cart/ shipment-removed note (templates/woocommerce/cart/cart-totals.php) */
.cart_totals .db-cart-shipnote { padding: 14px 20px; margin: 0; border-top: 1px solid var(--db-line); font-size: 12.5px; color: var(--db-ink-3); line-height: 1.5; }


/* shipping method radio list */
#shipping_method,
.woocommerce-shipping-methods { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
#shipping_method li,
.woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	background: var(--db-void);
	font-size: 13.5px;
	color: var(--db-ink-2);
	margin: 0;
	transition: border-color .16s, background .16s;
	text-align: left;
}
#shipping_method li:hover { border-color: var(--db-line-2); }
#shipping_method li:has(input:checked) { border-color: var(--db-blue); background: var(--db-blue-soft); }
#shipping_method li label { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; color: var(--db-ink); cursor: pointer; }
#shipping_method li label .woocommerce-Price-amount { font-family: var(--db-mono); }
#shipping_method input[type="radio"] { accent-color: var(--db-blue); width: 16px; height: 16px; flex: none; }

/* empty cart */
.db-empty {
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	background: var(--db-panel);
	padding: clamp(34px, 4vw, 56px);
	text-align: center;
	display: grid;
	justify-items: center;
	gap: 8px;
}
.db-empty__ico {
	width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--db-line-2);
	border-radius: 50%;
	color: var(--db-ink-3);
	margin-bottom: 8px;
}
.db-empty__ico svg { width: 22px; height: 22px; }
.db-empty h2 { font-size: 21px; }
.db-empty p { max-width: 44ch; margin-top: 4px; }
.db-empty__acts { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.woocommerce .cart-empty.woocommerce-info { display: none; }
.woocommerce .return-to-shop { display: none; }

/* ==========================================================================
   6. Checkout
   ========================================================================== */
.db-checkout .woocommerce { display: block; }

form.checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 28px;
	align-items: start;
}

#customer_details { grid-column: 1; }
#order_review_heading { display: none; }
#order_review {
	grid-column: 2;
	grid-row: 1 / span 3;
	position: sticky;
	top: calc(var(--db-nav-h) + 20px);
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	overflow: hidden;
}

.db-cofield {
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	padding: 22px 24px 24px;
	margin-bottom: 20px;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
.woocommerce-account-fields h3 {
	font-family: var(--db-sans) !important;
	font-size: 17px !important;
	font-weight: 660 !important;
	letter-spacing: -0.014em !important;
	color: var(--db-ink) !important;
	text-transform: none !important;
	margin: 0 0 18px !important;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--db-line);
}

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.woocommerce-account-fields {
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	padding: 22px 24px 24px;
	margin-bottom: 20px;
}

.woocommerce-shipping-fields h3 label,
.woocommerce-shipping-fields h3 span { font-size: 17px; }

.woocommerce form .form-row { display: grid; gap: 7px; margin: 0 0 16px; padding: 0; }
.woocommerce form .form-row label {
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--db-ink-3);
	line-height: 1.4;
}
.woocommerce form .form-row label .required { color: var(--db-cyan); border: 0; text-decoration: none; }
.woocommerce form .form-row .optional { color: var(--db-ink-3); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	width: 100%;
	min-height: 46px;
	padding: 12px 14px;
	background: var(--db-panel-2);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink);
	font-family: var(--db-sans);
	font-size: 15px;
	box-shadow: none;
	transition: border-color .16s, box-shadow .16s, background .16s;
}
.woocommerce form .form-row textarea { min-height: 104px; resize: vertical; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 0;
	border-color: var(--db-blue);
	box-shadow: 0 0 0 3px rgba(30, 111, 255, .16);
	background: var(--db-panel-3);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--db-err); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: rgba(33,199,118,.4); }
.woocommerce form .form-row ::placeholder { color: var(--db-ink-3); }

/* Autofilled WooCommerce fields.
   The rules above set box-shadow: none at a higher specificity than the generic
   autofill handling in ds.css, which let Chrome keep its own light background
   behind light text. These selectors match that specificity; !important guards
   against WooCommerce and gateway stylesheets loading later. */
.woocommerce form .form-row input.input-text:-webkit-autofill,
.woocommerce form .form-row textarea:-webkit-autofill,
.woocommerce form .form-row select:-webkit-autofill,
.woocommerce-page form .form-row input.input-text:-webkit-autofill,
.woocommerce-page form .form-row select:-webkit-autofill,
.woocommerce form input.input-text:-webkit-autofill,
.woocommerce-page form input.input-text:-webkit-autofill,
.woocommerce-form-login input:-webkit-autofill,
.woocommerce-form-register input:-webkit-autofill,
.woocommerce-EditAccountForm input:-webkit-autofill,
.woocommerce-address-fields input:-webkit-autofill,
.woocommerce-checkout input:-webkit-autofill,
.woocommerce-checkout select:-webkit-autofill {
	-webkit-text-fill-color: var(--db-ink) !important;
	caret-color: var(--db-ink);
	-webkit-box-shadow: 0 0 0 1000px var(--db-panel-2) inset !important;
	box-shadow: 0 0 0 1000px var(--db-panel-2) inset !important;
	border-color: var(--db-line);
	transition: background-color 100000s ease-out 0s;
}

.woocommerce form .form-row input.input-text:-webkit-autofill:focus,
.woocommerce form .form-row select:-webkit-autofill:focus,
.woocommerce-page form .form-row input.input-text:-webkit-autofill:focus,
.woocommerce-form-login input:-webkit-autofill:focus,
.woocommerce-form-register input:-webkit-autofill:focus,
.woocommerce-checkout input:-webkit-autofill:focus,
.woocommerce-checkout select:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--db-panel-3) inset, 0 0 0 3px rgba(30, 111, 255, .16) !important;
	box-shadow: 0 0 0 1000px var(--db-panel-3) inset, 0 0 0 3px rgba(30, 111, 255, .16) !important;
	border-color: var(--db-blue);
}

.woocommerce form .form-row input.input-text:autofill,
.woocommerce-page form .form-row input.input-text:autofill,
.woocommerce-checkout input:autofill {
	background: var(--db-panel-2);
	color: var(--db-ink);
}


/* two-up rows */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; margin-right: 0; }
.woocommerce .woocommerce-billing-fields__field-wrapper,
.woocommerce .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.woocommerce .woocommerce-billing-fields__field-wrapper > p.form-row-wide,
.woocommerce .woocommerce-shipping-fields__field-wrapper > p.form-row-wide { grid-column: 1 / -1; }

/* select2 */
.woocommerce .select2-container .select2-selection--single {
	height: 46px;
	background: var(--db-panel-2);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	display: flex;
	align-items: center;
	padding: 0 12px;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--db-ink); line-height: 1.4; padding: 0; font-size: 15px; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--db-ink-3) transparent transparent; }
.select2-dropdown {
	background: var(--db-panel-2);
	border: 1px solid var(--db-line-2);
	border-radius: var(--db-r);
	color: var(--db-ink);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	background: var(--db-void);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink);
	padding: 9px 11px;
}
.select2-container--default .select2-results__option { font-size: 14px; padding: 9px 12px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--db-blue); color: #fff; }
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--db-panel-3); color: var(--db-ink); }

/* order review table */
#order_review .db-order__head {
	padding: 16px 20px;
	border-bottom: 1px solid var(--db-line-2);
	background: var(--db-panel-2);
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--db-ink-3);
}
#order_review table.shop_table { background: transparent; border: 0; }
#order_review table.shop_table thead { display: none; }
#order_review table.shop_table td,
#order_review table.shop_table th { padding: 13px 20px; border-top: 1px solid var(--db-line); font-size: 13.5px; }
#order_review table.shop_table .product-name { color: var(--db-ink-2); }
#order_review table.shop_table .product-name strong.product-quantity { color: var(--db-ink-3); font-family: var(--db-mono); font-weight: 400; font-size: 12px; }
#order_review table.shop_table td.product-total,
#order_review table.shop_table td[data-title="Total"] { text-align: right; font-family: var(--db-mono); color: var(--db-ink); }
#order_review table.shop_table tfoot th { font-family: var(--db-sans); font-weight: 500; color: var(--db-ink-2); text-transform: none; letter-spacing: 0; font-size: 13.5px; background: transparent; }
#order_review table.shop_table tfoot td { text-align: right; font-family: var(--db-mono); color: var(--db-ink); }
#order_review table.shop_table tfoot .order-total th,
#order_review table.shop_table tfoot .order-total td { border-top: 1px solid var(--db-line-2); }
#order_review table.shop_table tfoot .order-total td { font-size: 17px; font-weight: 500; }

/* payment box */
#payment { background: transparent; border-radius: 0; }
#payment ul.payment_methods {
	padding: 16px 20px;
	margin: 0;
	border-top: 1px solid var(--db-line-2);
	border-bottom: 0;
	display: grid;
	gap: 8px;
	list-style: none;
}
#payment ul.payment_methods li {
	padding: 0;
	margin: 0;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	background: var(--db-void);
	overflow: hidden;
	transition: border-color .16s, background .16s;
}
#payment ul.payment_methods li:has(input:checked) { border-color: var(--db-blue); background: var(--db-blue-soft); }
#payment ul.payment_methods li label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 14px;
	font-size: 14px;
	color: var(--db-ink);
	cursor: pointer;
	margin: 0;
}
#payment ul.payment_methods li input[type="radio"] { accent-color: var(--db-blue); width: 16px; height: 16px; margin: 0; }
#payment ul.payment_methods li img { max-height: 22px; margin-left: auto; }
#payment div.payment_box {
	background: var(--db-panel-2);
	color: var(--db-ink-2);
	font-size: 13px;
	line-height: 1.55;
	margin: 0;
	padding: 13px 14px;
	border-top: 1px solid var(--db-line);
	border-radius: 0;
}
#payment div.payment_box::before,
#payment div.payment_box::after { display: none !important; }
#payment div.payment_box p { margin: 0; font-size: 13px; }
#payment .place-order { padding: 18px 20px; border-top: 1px solid var(--db-line-2); background: var(--db-panel-2); margin: 0; }
#payment #place_order { width: 100%; min-height: 52px; font-size: 15.5px; }
#payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; }
#payment .woocommerce-privacy-policy-text p,
#payment .woocommerce-terms-and-conditions-wrapper p { font-size: 12.5px; color: var(--db-ink-3); line-height: 1.5; }
#payment .woocommerce-privacy-policy-text a { color: var(--db-ink-2); border-bottom: 1px solid var(--db-line-2); }

/* login/coupon toggles on checkout */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle { margin-bottom: 20px; }
.woocommerce form.login,
.woocommerce form.checkout_coupon {
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	padding: 22px 24px;
	margin: 0 0 20px;
}
.woocommerce form.login .form-row,
.woocommerce form.checkout_coupon .form-row { margin-bottom: 14px; }
.woocommerce form.login label.woocommerce-form-login__rememberme { font-family: var(--db-sans); font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--db-ink-2); display: inline-flex; gap: 8px; align-items: center; }
.woocommerce-LostPassword { font-size: 13px; }
.woocommerce-LostPassword a { color: var(--db-ink-2); border-bottom: 1px solid var(--db-line-2); }

/* order received / thank you */
.woocommerce-order {
	display: grid;
	gap: 24px;
}
.woocommerce-thankyou-order-received {
	font-size: 20px;
	color: var(--db-ink);
	font-weight: 640;
	letter-spacing: -0.016em;
}
.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	background: var(--db-line);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	overflow: hidden;
	list-style: none;
}
.woocommerce ul.order_details li {
	background: var(--db-panel);
	margin: 0;
	padding: 16px 18px;
	border: 0;
	float: none;
	font-family: var(--db-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--db-ink-3);
}
.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 8px;
	font-family: var(--db-mono);
	font-size: 14px;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--db-ink);
	font-weight: 500;
}
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-order-downloads__title {
	font-size: 17px !important;
	font-weight: 660 !important;
	letter-spacing: -0.014em !important;
	color: var(--db-ink) !important;
	margin: 0 0 16px !important;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--db-line);
}
.woocommerce-order-details,
.woocommerce-customer-details {
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	padding: 22px 24px;
}
.woocommerce-customer-details address {
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	padding: 16px;
	font-style: normal;
	font-size: 14px;
	color: var(--db-ink-2);
	line-height: 1.65;
	background: var(--db-panel-2);
}
.woocommerce .woocommerce-customer-details--phone,
.woocommerce .woocommerce-customer-details--email { margin: 8px 0 0; font-size: 13.5px; }
/* Billing then Shipping addresses (order-view page): two ".woocommerce-column"
   divs, each with its own title+address inside. Stacked full-width on
   mobile, they had no gap at all between them - "Shipping address" sat
   flush against the Billing box's bottom edge. */
.woocommerce-columns--addresses .woocommerce-column + .woocommerce-column { margin-top: 28px; }

/* ==========================================================================
   7. My Account
   ========================================================================== */

/* Sign-out confirmation, carried by ?signed-out=1 (see DB_Woo::logout_redirect) */
.db-account__signedout {
	max-width: 520px;
	margin: 0 auto 22px;
}

.db-account {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.woocommerce-account .woocommerce { display: contents; }

/* The wrapper above is display:contents, so WooCommerce's children become the
   grid items directly. Place the two known regions explicitly: anything else
   WooCommerce or an extension injects (notices, for example) then spans the
   full width instead of consuming the sidebar column.

   The width and float resets also have to out-rank WooCommerce's own
   `.woocommerce-account .woocommerce-MyAccount-navigation { float: left;
   width: 30% }`, which otherwise sizes the sidebar to 30% of its grid column
   and clips the link labels. */
.woocommerce-account .db-account > .woocommerce > * { grid-column: 1 / -1; }

.woocommerce-account .db-account .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	float: none;
}

.woocommerce-account .db-account .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce-MyAccount-navigation {
	width: 100%;
	float: none;
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	overflow: hidden;
	position: sticky;
	top: calc(var(--db-nav-h) + 20px);
}
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 6px; list-style: none; display: grid; gap: 2px; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border-radius: var(--db-r);
	font-size: 14px;
	font-weight: 550;
	color: var(--db-ink-2);
	transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--db-panel-2); color: var(--db-ink); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--db-panel-3); color: var(--db-ink); }
.woocommerce-MyAccount-navigation li.is-active a::before { background: var(--db-cyan); }
.woocommerce-MyAccount-navigation li a::before {
	content: "";
	width: 3px; height: 16px;
	border-radius: 2px;
	background: transparent;
	flex: none;
}

.woocommerce-MyAccount-content {
	width: 100%;
	float: none;
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	padding: clamp(20px, 2.4vw, 30px);
}
.woocommerce-MyAccount-content > p { font-size: 14.5px; margin-bottom: 22px; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { font-size: 18px !important; margin-bottom: 16px !important; letter-spacing: -0.014em; }
.woocommerce-MyAccount-content legend { font-size: 15px; color: var(--db-ink); padding: 0 0 10px; }
.woocommerce-MyAccount-content fieldset { border: 1px solid var(--db-line); border-radius: var(--db-r); padding: 18px 20px; margin: 24px 0 0; }

/* account dashboard */
.db-acct-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--db-line);
}
.db-acct-hero h2 { font-size: 22px !important; margin: 0 0 6px !important; }
.db-acct-hero p { font-size: 14px; }
.db-acct-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	align-items: stretch;
}
.db-acct-card {
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	padding: 18px;
	background: var(--db-panel-2);
	transition: border-color .16s, background .16s;
	display: block;
}
.db-acct-card:hover { border-color: var(--db-line-2); background: var(--db-panel-3); }
.db-acct-card svg { width: 18px; height: 18px; color: var(--db-cyan); margin-bottom: 14px; }
.db-acct-card b { display: block; font-size: 14.5px; color: var(--db-ink); font-weight: 620; }
.db-acct-card span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--db-ink-3); line-height: 1.5; }

/* orders table */
.woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	overflow: hidden;
}
.woocommerce-orders-table__cell-order-actions { text-align: right; }
.woocommerce-orders-table .button { min-height: 36px; padding: 0 12px; font-size: 13px; }

/* downloads / addresses empty states */
.woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.woocommerce-Address { width: 100%; float: none; }
.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--db-line);
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 { font-size: 15px !important; margin: 0 !important; }
.woocommerce-Address address { font-style: normal; font-size: 14px; color: var(--db-ink-2); line-height: 1.7; }
.db-addr-extra { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--db-line); font-size: 13px; color: var(--db-ink-3); line-height: 1.6; }

/* Icon + plain "Edit"/"Add" — replaces WooCommerce's default long-form
   "Edit Billing address" / "Edit Shipping address" link text (mono, cyan). */
.db-addr-edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--db-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--db-ink-2);
	text-decoration: none;
}
.db-addr-edit svg { width: 13px; height: 13px; color: var(--db-ink-3); flex: none; }
.db-addr-edit:hover { color: var(--db-cyan); }
.db-addr-edit:hover svg { color: var(--db-cyan); }

/* password strength */
.woocommerce-password-strength {
	font-family: var(--db-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 8px 10px;
	border-radius: var(--db-r);
	border: 1px solid var(--db-line);
	background: var(--db-panel-2);
	margin-top: 8px;
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { color: var(--db-err); border-color: rgba(236,91,86,.35); }
.woocommerce-password-strength.good { color: var(--db-warn); border-color: rgba(229,168,58,.35); }
.woocommerce-password-strength.strong { color: var(--db-ok); border-color: rgba(33,199,118,.35); }
.woocommerce-password-hint { font-size: 12.5px; color: var(--db-ink-3); display: block; margin-top: 6px; }

/* ==========================================================================
   8. Auth panels (login / register / lost password)
   ========================================================================== */
.db-auth {
	max-width: 460px;
	margin: 0 auto;
}
.db-auth__panel {
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	padding: clamp(24px, 3vw, 34px);
}
.db-auth__head { text-align: center; margin-bottom: 24px; }
.db-auth__head h1,
.db-auth__head h2 { font-size: 23px; }
.db-auth__head p { margin-top: 8px; font-size: 14px; }
.db-auth__form { display: grid; gap: 16px; }
.db-auth__foot {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--db-line);
	text-align: center;
	font-size: 13.5px;
	color: var(--db-ink-3);
}
.db-auth__foot a { color: var(--db-ink); border-bottom: 1px solid var(--db-line-2); }
.db-auth__foot a:hover { border-color: var(--db-blue); }
.db-auth__alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }

/* Elementor popup shell */
.elementor-popup-modal .dialog-widget-content {
	background: var(--db-panel) !important;
	border: 1px solid var(--db-line-2);
	border-radius: var(--db-r-lg);
	box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.elementor-popup-modal .dialog-close-button { color: var(--db-ink-2); opacity: 1; }
.elementor-popup-modal .dialog-close-button:hover { color: var(--db-ink); }
.elementor-popup-modal .dialog-close-button svg { width: 16px; height: 16px; fill: currentColor; }

/* Guest/account-choice popup (#elementor-popup-modal-1959): the popup box
   is a fixed 660px width but .db-auth cuts its own content off at 460px,
   so it sits centered with ~100px empty gutters left/right while only
   having its usual ~34px padding top/bottom - reads as "sides have
   spacing, top/bottom doesn't" even though the padding is uniform. Let
   the content use more of the box's real width instead. */
#elementor-popup-modal-1959 .db-auth { max-width: 620px; }

/* Elementor's own generated CSS hardcodes this popup to a fixed 660px
   width with no responsive breakpoint at all - on any viewport narrower
   than that it overflowed/required horizontal scroll inside the popup.
   #elementor-popup-modal-1959 centers via flex, so capping the width here
   keeps it centered automatically. */
@media (max-width: 720px) {
	#elementor-popup-modal-1959 .dialog-message { width: calc(100vw - 32px) !important; }
	/* the close button (position:absolute, top/right:20px on the dialog
	   box) sits inside the same horizontal band as the centered heading
	   text once the popup is this narrow - the "?" was rendering right
	   under/behind the X. Narrow the heading's own line box symmetrically
	   so it wraps clear of the button on the right without un-centering
	   it (padding both sides keeps the remaining text still centered). */
	#elementor-popup-modal-1959 .db-auth__head h2 { padding: 0 34px; }
}


/* ==========================================================================
   9. Cookie banner (CookieAdmin)
   ========================================================================== */
.cky-consent-container,
.cky-consent-bar,
.cky-modal .cky-modal-content,
.cky-preference-center {
	background: var(--db-panel) !important;
	border: 1px solid var(--db-line-2) !important;
	border-radius: var(--db-r-lg) !important;
	color: var(--db-ink) !important;
	font-family: var(--db-sans) !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .55) !important;
}
.cky-consent-bar { padding: 18px !important; }
.cky-title,
.cky-preference-title,
.cky-consent-container h2,
.cky-consent-container h3 { color: var(--db-ink) !important; font-family: var(--db-sans) !important; font-size: 15px !important; font-weight: 650 !important; }
.cky-notice-des,
.cky-notice-des *,
.cky-preference-content-wrapper,
.cky-preference-content-wrapper *,
.cky-gpc-wrapper * { color: var(--db-ink-2) !important; font-size: 12.8px !important; line-height: 1.55 !important; }
.cky-notice-des a,
.cky-preference-content-wrapper a { color: var(--db-cyan) !important; }
.cky-notice-btn-wrapper { gap: 8px !important; }
.cky-btn {
	border-radius: var(--db-r) !important;
	font-family: var(--db-sans) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 10px 16px !important;
	min-height: 40px !important;
	transition: background .16s, border-color .16s !important;
}
.cky-btn-accept { background: var(--db-blue) !important; border: 1px solid var(--db-blue) !important; color: #fff !important; }
.cky-btn-accept:hover { background: var(--db-blue-2) !important; border-color: var(--db-blue-2) !important; }
.cky-btn-reject,
.cky-btn-customize,
.cky-btn-preferences {
	background: transparent !important;
	border: 1px solid var(--db-line-2) !important;
	color: var(--db-ink) !important;
}
.cky-btn-reject:hover,
.cky-btn-customize:hover { background: rgba(255, 255, 255, .05) !important; border-color: var(--db-line-3) !important; }
.cky-switch input { accent-color: var(--db-blue) !important; }
.cky-accordion { border-color: var(--db-line) !important; }
.cky-accordion-header-des *, .cky-accordion-header-des { color: var(--db-ink-3) !important; }
.cky-footer-shadow { display: none !important; }
.cky-btn-revisit-wrapper { background: var(--db-blue) !important; }
.cky-prefrence-btn-wrapper .cky-btn { min-height: 40px !important; }

/* ==========================================================================
   10. Contact page
   ========================================================================== */
.db-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.db-contact__panel {
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	padding: clamp(24px, 3vw, 32px);
}

.db-contact__aside { display: grid; gap: 16px; }

.db-infocard {
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	background: var(--db-panel);
	padding: 22px;
}
.db-infocard h3 { font-size: 15px; font-weight: 650; margin-bottom: 14px; }
.db-infocard__rows { display: grid; gap: 13px; }
.db-infocard__rows > div { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 12px; align-items: start; }
.db-infocard__rows svg { width: 16px; height: 16px; color: var(--db-ink-3); margin-top: 3px; }
.db-infocard__rows span,
.db-infocard__rows a { font-size: 13.5px; color: var(--db-ink-2); line-height: 1.55; }
.db-infocard__rows a:hover { color: var(--db-ink); }
.db-infocard__rows b { display: block; color: var(--db-ink); font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }

/* Elementor Pro form fallback theming */
.elementor-widget-form .elementor-field-group > label { font-family: var(--db-mono) !important; font-size: 10.5px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--db-ink-3) !important; }
.elementor-widget-form .elementor-field-textual {
	background: var(--db-panel-2) !important;
	border: 1px solid var(--db-line) !important;
	border-radius: var(--db-r) !important;
	color: var(--db-ink) !important;
	min-height: 46px !important;
	font-size: 15px !important;
	font-family: var(--db-sans) !important;
}
.elementor-widget-form .elementor-field-textual:focus {
	border-color: var(--db-blue) !important;
	box-shadow: 0 0 0 3px rgba(30, 111, 255, .16) !important;
}
.elementor-widget-form .elementor-button {
	background: var(--db-blue) !important;
	border-radius: var(--db-r) !important;
	font-family: var(--db-sans) !important;
	font-weight: 600 !important;
	min-height: 48px !important;
}

/* ==========================================================================
   11. Resources page
   ========================================================================== */
.db-reslist { display: grid; gap: 12px; }
.db-resrow {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 140px auto;
	gap: 18px;
	align-items: center;
	padding: 16px 18px;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	background: var(--db-panel);
	transition: border-color .16s, background .16s;
}
.db-resrow:hover { border-color: var(--db-line-2); background: var(--db-panel-2); }
.db-resrow__ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--db-line); border-radius: var(--db-r); color: var(--db-ink-2); }
.db-resrow__ico svg { width: 17px; height: 17px; }
.db-resrow b { display: block; font-size: 14.5px; font-weight: 620; color: var(--db-ink); }
.db-resrow p { margin-top: 4px; font-size: 13px; color: var(--db-ink-3); line-height: 1.5; }
.db-resrow__meta { font-family: var(--db-mono); font-size: 11px; color: var(--db-ink-3); letter-spacing: .06em; }

/* ==========================================================================
   12. About page
   ========================================================================== */
.db-timeline { display: grid; gap: 0; }
.db-tl {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 26px;
	padding: 22px 0;
	border-top: 1px solid var(--db-line);
}
.db-tl:last-child { border-bottom: 1px solid var(--db-line); }
.db-tl__k { font-family: var(--db-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--db-cyan); padding-top: 3px; }
.db-tl h3 { font-size: 17px; font-weight: 650; }
.db-tl p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }

/* ==========================================================================
   13. Responsive (commerce)
   ========================================================================== */
@media (max-width: 1180px) {
	.db-cartwrap { grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
	form.checkout.woocommerce-checkout { grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; }
	.db-pdp { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); }
}

@media (max-width: 1024px) {
	.db-catalog { grid-template-columns: 1fr; }
	.db-pdp { grid-template-columns: 1fr; }
	.db-buy { position: static; }
	.db-cartwrap { grid-template-columns: 1fr; }
	.cart_totals { position: static; }
	form.checkout.woocommerce-checkout { grid-template-columns: 1fr; }
	#order_review { grid-column: 1; grid-row: auto; position: static; }
	.db-account { grid-template-columns: 1fr; }
	.woocommerce-MyAccount-navigation { position: static; }
	.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; }
	.woocommerce-MyAccount-navigation li a::before { display: none; }
	/* single column: let both regions flow instead of holding row 1 */
	.woocommerce-account .db-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .db-account .woocommerce-MyAccount-content { grid-column: 1 / -1; grid-row: auto; }
	.db-contact { grid-template-columns: 1fr; }
	.db-specgrid { grid-template-columns: 1fr; }
	.woocommerce-Addresses { grid-template-columns: 1fr; }
	.db-resrow { grid-template-columns: 40px minmax(0, 1fr) auto; }
	.db-resrow__meta { display: none; }
}

@media (max-width: 640px) {
	.woocommerce .woocommerce-billing-fields__field-wrapper,
	.woocommerce .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }

	/* cart -> stacked card per line item. WooCommerce's own responsive
	   stylesheet (table.shop_table_responsive) injects a bold
	   `attr(data-title): ` label before every cell and forces
	   text-align:right !important - fighting our grid placement below and
	   producing the "Product: DXN-110" / "Quantity: 4" clutter. Kill both,
	   then lay the card out explicitly: thumbnail spans both rows on the
	   left, name+remove on row 1, quantity+subtotal on row 2. */
	.woocommerce table.shop_table.cart tr td::before { content: none !important; }
	.woocommerce table.shop_table.cart tr td { text-align: left !important; }

	.woocommerce table.shop_table.cart thead { display: none; }
	.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		column-gap: 14px;
		row-gap: 8px;
		padding: 16px;
		border-top: 1px solid var(--db-line);
	}
	.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td { border: 0; padding: 0; }
	.woocommerce table.shop_table.cart td.product-thumbnail { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
	.woocommerce table.shop_table.cart td.product-thumbnail a { width: 56px; height: 56px; }
	.woocommerce table.shop_table.cart td.product-name { grid-column: 2; grid-row: 1; align-self: center; }
	.woocommerce table.shop_table.cart td.product-price { display: none; }
	.woocommerce table.shop_table.cart td.product-remove { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; }
	.woocommerce table.shop_table.cart td.product-quantity { grid-column: 2; grid-row: 2; align-self: center; }
	.woocommerce table.shop_table.cart td.product-subtotal {
		grid-column: 3; grid-row: 2;
		align-self: center; justify-self: end;
		text-align: right !important;
		font-size: 15px;
	}
	.woocommerce table.shop_table.cart td.actions { grid-column: 1 / -1; }
	.woocommerce .coupon { width: 100%; }
	.woocommerce #coupon_code { flex: 1 1 auto; min-width: 0; }

	.db-buy__head, .db-buy__pricewrap, .db-buy__form, .db-buy__assure { padding-left: 18px; padding-right: 18px; }
	.db-pdp__thumbs { flex-wrap: wrap; }
	.db-tl { grid-template-columns: 1fr; gap: 8px; }
	.db-resrow { grid-template-columns: 34px minmax(0, 1fr); }
	.db-resrow .db-btn { grid-column: 1 / -1; width: 100%; }
	.db-auth__panel { padding: 22px 18px; }
}


/* ==========================================================================
   14. Render corrections
   ========================================================================== */
/* WooCommerce appends its own tax label; the design system states VAT context
   explicitly next to every price, so the duplicate is suppressed. */
.db .woocommerce-Price-taxLabel,
.db small.woocommerce-Price-taxLabel { display: none !important; }

/* Product drawings should fill their frame */
.db .db-pcard__vis { aspect-ratio: 3 / 2; }
.db .db-pcard__vis svg,
.db .db-pcard__vis img { width: 92%; max-height: 92%; }
.db .db-pdp__stage svg { width: 90%; max-height: 92%; }
.db .db-prow__vis svg { width: 96%; height: 92%; }
.db .db-drop__thumb svg { width: 96%; height: 90%; }

/* Interior page headers need a little more air */
.db .db-page__in { padding-top: clamp(38px, 4.4vw, 62px); padding-bottom: clamp(34px, 4vw, 52px); }
/* --- product page: format switcher + quantity ------------------------- */
.db .db-pdp__stage[hidden] { display: none !important; }

.db-pdp__switch {
	display: grid;
	grid-auto-flow: column;
	gap: 8px;
	margin-top: 12px;
}

.db-pdp__seg {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 11px 14px;
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	color: var(--db-ink-2);
	cursor: pointer;
	text-align: left;
	transition: border-color .16s, background .16s, color .16s;
	font-family: var(--db-sans);
}
.db-pdp__seg:hover { border-color: var(--db-line-2); color: var(--db-ink); }
.db-pdp__seg.is-active {
	border-color: rgba(34, 211, 238, .45);
	background: var(--db-cyan-soft);
	color: var(--db-ink);
}
.db-pdp__seg span { font-size: 13px; font-weight: 600; }
.db-pdp__seg em {
	font-style: normal;
	font-family: var(--db-mono);
	font-size: 10.5px;
	color: var(--db-ink-3);
	letter-spacing: .04em;
}
.db-pdp__seg.is-active em { color: var(--db-cyan); }

/* quantity: shown (B2B buyers order multiples) and styled */
.db-buy form.cart .quantity {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r);
	overflow: hidden;
	background: var(--db-panel-2);
	max-width: 132px;
}
.db-buy form.cart .quantity label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.db-buy form.cart .quantity input.qty {
	width: 100%;
	min-height: 46px;
	border: 0;
	background: transparent;
	color: var(--db-ink);
	text-align: center;
	font-family: var(--db-mono);
	font-size: 15px;
	padding: 0 10px;
}
.db-buy form.cart {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
}
.db-buy form.cart .single_add_to_cart_button { margin: 0; }
.db-buy form.cart.variations_form { grid-template-columns: 1fr; }
.db-buy form.cart.variations_form .woocommerce-variation-add-to-cart {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
}

@media (max-width: 640px) {
	.db-pdp__switch { grid-auto-flow: row; }
	.db-buy form.cart,
	.db-buy form.cart.variations_form .woocommerce-variation-add-to-cart { grid-template-columns: 110px minmax(0, 1fr); }
}
/* Interior page headers: drop the hard-edged grid strip, keep the soft glow */
.db .db-page .db-hero__grid { display: none; }
.db .db-page {
	background:
		radial-gradient(120% 120% at 92% -30%, rgba(30, 111, 255, .10), transparent 58%),
		radial-gradient(80% 90% at 8% -20%, rgba(34, 211, 238, .05), transparent 60%),
		var(--db-void);
}

/* ==========================================================================
   15. Checkout hardening
   WooCommerce ships its own layout + form CSS after ours on this install, so
   the checkout structure and controls are asserted explicitly here.
   ========================================================================== */
.woocommerce-checkout form.checkout.woocommerce-checkout {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 400px;
	grid-template-areas: "details review";
	gap: 28px;
	align-items: start;
}

.woocommerce-checkout #customer_details {
	grid-area: details;
	display: block !important;
	width: 100% !important;
	float: none !important;
}

/* billing and shipping stack instead of sitting in two cramped columns */
.woocommerce-checkout #customer_details .col2-set,
.woocommerce-checkout #customer_details .col2-set > .col-1,
.woocommerce-checkout #customer_details .col2-set > .col-2 {
	display: block !important;
	width: 100% !important;
	float: none !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce-checkout #customer_details .col2-set > .col-2 { margin-top: 20px !important; }

.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading { grid-area: review; }
.woocommerce-checkout #order_review { position: sticky; top: calc(var(--db-nav-h) + 20px); }

/* --- controls ---------------------------------------------------------- */
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select,
.woocommerce form .form-row textarea#order_comments,
.woocommerce-account form input.input-text,
.woocommerce-account form textarea,
.woocommerce-cart form input.input-text {
	background: var(--db-panel-2) !important;
	border: 1px solid var(--db-line) !important;
	border-radius: var(--db-r) !important;
	color: var(--db-ink) !important;
	font-family: var(--db-sans) !important;
	font-size: 15px !important;
	box-shadow: none !important;
	-webkit-text-fill-color: var(--db-ink);
}
.woocommerce-checkout form .form-row textarea,
.woocommerce form .form-row textarea#order_comments { min-height: 104px !important; padding: 12px 14px !important; }

.woocommerce-checkout form .form-row input.input-text::placeholder,
.woocommerce-checkout form .form-row textarea::placeholder { color: var(--db-ink-3) !important; }

.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus,
.woocommerce-checkout form .form-row select:focus {
	border-color: var(--db-blue) !important;
	box-shadow: 0 0 0 3px rgba(30, 111, 255, .16) !important;
	background: var(--db-panel-3) !important;
}

/* checkboxes across Woo forms */
.woocommerce input[type="checkbox"],
.woocommerce-page input[type="checkbox"],
#ship-to-different-address input[type="checkbox"],
.woocommerce-form__input-checkbox,
.woocommerce-terms-and-conditions-checkbox-text + input,
input#createaccount,
input#terms {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	border: 1px solid var(--db-line-2) !important;
	border-radius: 2px !important;
	background: var(--db-panel-2) !important;
	position: relative;
	cursor: pointer;
	vertical-align: middle;
	margin: 0 8px 0 0 !important;
	flex: none;
}
.woocommerce input[type="checkbox"]:checked,
.woocommerce-page input[type="checkbox"]:checked,
#ship-to-different-address input[type="checkbox"]:checked,
input#createaccount:checked,
input#terms:checked {
	background: var(--db-blue) !important;
	border-color: var(--db-blue) !important;
}
.woocommerce input[type="checkbox"]:checked::after,
.woocommerce-page input[type="checkbox"]:checked::after,
#ship-to-different-address input[type="checkbox"]:checked::after,
input#createaccount:checked::after,
input#terms:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(42deg);
}
.woocommerce input[type="radio"] { accent-color: var(--db-blue); }

/* ship-to-different + create-account rows read as switches, not headings */
#ship-to-different-address label,
.woocommerce-account-fields label.checkbox,
.woocommerce-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	font-family: var(--db-sans) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--db-ink) !important;
	cursor: pointer;
}
#ship-to-different-address { margin: 0 0 14px !important; }
#ship-to-different-address h3 { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.woocommerce-shipping-fields { padding-top: 20px !important; }

.woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox span {
	font-family: var(--db-sans) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--db-ink-2) !important;
	line-height: 1.5;
}

/* payment method descriptions */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box p {
	background: var(--db-panel-2) !important;
	color: var(--db-ink-2) !important;
	font-size: 13px !important;
	text-shadow: none !important;
	border-radius: 0 !important;
}
.woocommerce-checkout #payment div.payment_box { border-top: 1px solid var(--db-line) !important; }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 550 !important; }
.woocommerce-checkout #payment ul.payment_methods li img { max-height: 20px; filter: saturate(.85); }

/* login / coupon reveal bars */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	padding: 12px 16px;
	background: var(--db-panel) !important;
	border-left-color: var(--db-cyan) !important;
}
.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a {
	color: var(--db-ink) !important;
	font-weight: 600;
	border-bottom: 1px solid var(--db-line-2);
}
.woocommerce-form-login-toggle .woocommerce-info a:hover { border-color: var(--db-blue); }

/* shipment cell inside order review */
.woocommerce-checkout #order_review tr.shipping th { vertical-align: top; padding-top: 18px !important; }
.woocommerce-checkout #order_review tr.db-ship-note td { background: var(--db-panel-2); }

@media (max-width: 1024px) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		grid-template-columns: 1fr;
		grid-template-areas: "details" "review";
	}
	.woocommerce-checkout #order_review { position: static; }
}

/* ==========================================================================
   16. Checkout column stacking (float + flex proof)
   ========================================================================== */
.woocommerce-checkout #customer_details > * {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}
.woocommerce-checkout #customer_details .col2-set {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px;
	margin: 0 !important;
}
.woocommerce-checkout #customer_details .col2-set > * {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================================================
   17. Cookie consent (CookieAdmin — cookieadmin_* markup)
   ========================================================================== */
.cookieadmin_law_container,
.cookieadmin_law_container.cookieadmin_box {
	background: var(--db-panel) !important;
	border: 1px solid var(--db-line-2) !important;
	border-radius: var(--db-r-lg) !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .6) !important;
	font-family: var(--db-sans) !important;
	color: var(--db-ink) !important;
	max-width: 400px !important;
	padding: 4px !important;
}

.cookieadmin_consent_inside { background: transparent !important; padding: 18px !important; }

#cookieadmin_notice_title,
.cookieadmin_law_container p#cookieadmin_notice_title {
	color: var(--db-ink) !important;
	font-family: var(--db-sans) !important;
	font-size: 14.5px !important;
	font-weight: 650 !important;
	letter-spacing: -0.01em !important;
	margin: 0 0 8px !important;
}

#cookieadmin_notice,
.cookieadmin_notice_con p,
.cookieadmin_notice_con {
	color: var(--db-ink-2) !important;
	font-family: var(--db-sans) !important;
	font-size: 12.8px !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}
.cookieadmin_notice_con strong,
#cookieadmin_notice strong { color: var(--db-ink) !important; }
.cookieadmin_notice_con a,
#cookieadmin_notice a { color: var(--db-cyan) !important; }

.cookieadmin_consent_btns {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 8px !important;
	margin-top: 16px !important;
}

.cookieadmin_btn {
	min-height: 40px !important;
	padding: 9px 14px !important;
	border-radius: var(--db-r) !important;
	font-family: var(--db-sans) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background .16s, border-color .16s, color .16s !important;
	box-shadow: none !important;
	text-shadow: none !important;
	width: 100% !important;
}

#cookieadmin_accept_button,
.cookieadmin_accept_btn {
	grid-column: 1 / -1;
	order: 3;
	background: var(--db-blue) !important;
	border: 1px solid var(--db-blue) !important;
	color: #fff !important;
}
#cookieadmin_accept_button:hover { background: var(--db-blue-2) !important; border-color: var(--db-blue-2) !important; }

#cookieadmin_customize_button,
#cookieadmin_reject_button,
.cookieadmin_customize_btn,
.cookieadmin_reject_btn {
	background: transparent !important;
	border: 1px solid var(--db-line-2) !important;
	color: var(--db-ink-2) !important;
}
#cookieadmin_customize_button:hover,
#cookieadmin_reject_button:hover {
	background: rgba(255, 255, 255, .05) !important;
	border-color: var(--db-line-3) !important;
	color: var(--db-ink) !important;
}

.cookieadmin-poweredby,
.cookieadmin-poweredby * {
	color: var(--db-ink-3) !important;
	font-size: 10px !important;
	opacity: .55;
}

/* preferences modal */
.cookieadmin_cookie_modal .cookieadmin_mod_inside,
.cookieadmin_cookie_modal > div {
	background: var(--db-panel) !important;
	border: 1px solid var(--db-line-2) !important;
	border-radius: var(--db-r-lg) !important;
	color: var(--db-ink) !important;
	font-family: var(--db-sans) !important;
}
.cookieadmin_mod_head,
.cookieadmin_mod_body,
.cookieadmin_mod_footer { background: transparent !important; border-color: var(--db-line) !important; }
.cookieadmin_cookie_modal h2,
.cookieadmin_cookie_modal h3,
.cookieadmin_cookie_modal h4 { color: var(--db-ink) !important; font-family: var(--db-sans) !important; }
.cookieadmin_cookie_modal p,
.cookieadmin_cookie_modal span,
.cookieadmin_cookie_modal li { color: var(--db-ink-2) !important; font-size: 13px !important; }
.cookieadmin_cookie_modal input[type="checkbox"] { accent-color: var(--db-blue) !important; }

@media (max-width: 640px) {
	.cookieadmin_law_container { max-width: calc(100vw - 24px) !important; }
}

/* ==========================================================================
   18. Product page: highlights, summary, spec tabs, document packs
   ========================================================================== */
.db-na { color: var(--db-ink-3); }

.db-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
	gap: 28px;
	align-items: start;
}
.db-summary .db-checks { gap: 14px; }
.db-summary__aside {
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	padding: 20px 22px;
}

/* tabs */
.db-tabs__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 5px;
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	margin-bottom: 16px;
}

.db-tabs__btn {
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--db-r);
	color: var(--db-ink-3);
	font-family: var(--db-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.005em;
	padding: 9px 14px;
	cursor: pointer;
	transition: color .15s, background .15s, border-color .15s;
	white-space: nowrap;
}
.db-tabs__btn:hover { color: var(--db-ink); background: rgba(255, 255, 255, .04); }
.db-tabs__btn.is-active {
	color: var(--db-ink);
	background: var(--db-panel-3);
	border-color: var(--db-line-2);
}

.db-tabs__panel[hidden] { display: none; }
.db-tabs__panel {
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	overflow: hidden;
	background: var(--db-panel);
}
.db-tabs__panel table { margin: 0; }
.db-tabs__panel .db-spec tbody tr:last-child th,
.db-tabs__panel .db-spec tbody tr:last-child td { border-bottom: 0; }

/* document packs */
.db-docgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.db-doccol {
	background: var(--db-panel);
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	overflow: hidden;
}

.db-doccol__head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 18px;
	background: var(--db-panel-2);
	border-bottom: 1px solid var(--db-line-2);
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--db-ink-3);
}
.db-doccol__head svg { color: var(--db-cyan); }

.db-doclist { padding: 6px; }

.db-docrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 12px;
	border-radius: var(--db-r);
	transition: background .15s;
}
.db-docrow:hover { background: var(--db-panel-2); }
.db-docrow__name { font-size: 14px; color: var(--db-ink); font-weight: 550; }
.db-docrow.is-pending .db-docrow__name { color: var(--db-ink-2); font-weight: 500; }

.db-docrow__act {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--db-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--db-cyan);
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}
.db-docrow__act:hover { border-color: currentColor; }
.db-docrow__act em { font-style: normal; color: var(--db-ink-3); }
.db-docrow__act.is-request { color: var(--db-ink-3); }
.db-docrow__act.is-request:hover { color: var(--db-ink-2); }

@media (max-width: 1024px) {
	.db-summary { grid-template-columns: 1fr; }
	.db-docgrid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.db-tabs__bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.db-tabs__btn { font-size: 12.5px; padding: 9px 12px; }
	.db-docrow { flex-wrap: wrap; gap: 6px; }
}

/* ==========================================================================
   19. Cart drawer control hardening
   Theme/WooCommerce button styles leak into <button> elements, so the drawer
   controls are reset explicitly.
   ========================================================================== */
.db-cartitem__remove,
.db .db-cartitem__remove {
	appearance: none !important;
	background: none !important;
	border: 0 !important;
	border-bottom: 1px solid transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	width: auto !important;
	box-shadow: none !important;
	font-family: var(--db-mono) !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color: var(--db-ink-3) !important;
	line-height: 1.4 !important;
	cursor: pointer;
}
.db-cartitem__remove:hover,
.db .db-cartitem__remove:hover {
	color: var(--db-err) !important;
	border-bottom-color: currentColor !important;
	background: none !important;
}

.db-cartpanel__close,
.db .db-cartpanel__close,
.db .db-drawer__close {
	appearance: none !important;
	background: transparent !important;
	border: 1px solid var(--db-line) !important;
	border-radius: var(--db-r) !important;
	width: 38px !important;
	height: 38px !important;
	min-height: 38px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--db-ink-2) !important;
	box-shadow: none !important;
}
.db .db-cartpanel__close svg,
.db .db-drawer__close svg { width: 17px !important; height: 17px !important; display: block; }
.db .db-cartpanel__close:hover,
.db .db-drawer__close:hover { color: var(--db-ink) !important; border-color: var(--db-line-2) !important; background: rgba(255,255,255,.05) !important; }

/* consistent, visible focus treatment across the design system */
.db a:focus-visible,
.db button:focus-visible,
.db input:focus-visible,
.db select:focus-visible,
.db textarea:focus-visible {
	outline: 2px solid var(--db-cyan);
	outline-offset: 2px;
	border-radius: var(--db-r);
}
.db button:focus:not(:focus-visible) { outline: none; }

/* the drawer confirms the add, so Woo's inline "View cart" link is redundant */
.db-buy .added_to_cart,
.db-buy form.cart .added_to_cart { display: none !important; }

/* ==========================================================================
   20. Footer imprint (single compact line) + password fields
   ========================================================================== */
.db .db-foot__bar {
	align-items: flex-start;
	gap: 12px 32px;
}

.db-foot__imprint {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	align-items: center;
	max-width: 78ch;
}
.db-foot__imprint span {
	font-family: var(--db-mono);
	font-size: 11px;
	letter-spacing: .03em;
	color: var(--db-ink-3);
	white-space: nowrap;
}
.db-foot__imprint span + span::before {
	content: "·";
	margin: 0 9px;
	color: var(--db-line-3);
}

/* password field with a visible, on-brand reveal control */
.db-pass { position: relative; display: block; }
.db-pass .db-input { padding-right: 46px; }

.db-pass__toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--db-r) !important;
	padding: 0 !important;
	min-height: 0 !important;
	color: var(--db-ink-3) !important;
	cursor: pointer;
	transition: color .15s, background .15s;
}
.db-pass__toggle:hover { color: var(--db-ink) !important; background: rgba(255, 255, 255, .06) !important; }
.db-pass__toggle.is-on { color: var(--db-cyan) !important; }
.db-pass__toggle svg { width: 17px !important; height: 17px !important; }

/* hide the browser's own reveal control so there is only one affordance */
.db-pass .db-input::-ms-reveal,
.db-pass .db-input::-ms-clear { display: none; }

/* WooCommerce's own show/hide password eye is invisible on dark panels */
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input,
.db .show-password-input {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--db-ink-3);
	opacity: 1;
	cursor: pointer;
}
.woocommerce form .show-password-input::after,
.db .show-password-input::after {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce form .show-password-input.display-password,
.db .show-password-input.display-password { color: var(--db-cyan); }
.woocommerce form .password-input,
.db .password-input { position: relative; display: block; }
.woocommerce form .password-input input { padding-right: 42px !important; }

/* auth panel alignment: labels, fields and helper text share one grid */
.db-auth__form { align-items: stretch; }
.db-auth__form .db-field { width: 100%; }
.db-auth__form .db-input { width: 100%; }
.db-auth__alt { flex-wrap: wrap; gap: 10px 16px; margin-top: 2px; }
.db-auth__form .db-checkbox { align-items: center; }
.db-auth__form .db-note { margin-top: 4px; }
.db-auth__form button[type="submit"] { margin-top: 4px; }

@media (max-width: 640px) {
	.db-foot__imprint span { white-space: normal; }
	.db-foot__imprint span + span::before { margin: 0 7px; }
}

/* ==========================================================================
   21. Delivery estimates + captcha placement
   ========================================================================== */
.db-ship-eta {
	display: block;
	margin-top: 3px;
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: .04em;
	color: var(--db-cyan);
	text-transform: uppercase;
}

#shipping_method li label,
.woocommerce-shipping-methods li label { flex-wrap: wrap; }
#shipping_method li label .woocommerce-Price-amount { margin-left: auto; }

.db-ship-explain td { background: var(--db-panel-2); }

/* captcha sits inside Woo forms too, so it needs consistent spacing */
.db-captcha-wrap { margin: 14px 0; }
.db-captcha { min-height: 78px; }
.db-captcha iframe { border-radius: var(--db-r); }
.woocommerce form.login .db-captcha-wrap,
.woocommerce form.register .db-captcha-wrap,
.woocommerce form.woocommerce-ResetPassword .db-captcha-wrap { margin: 16px 0 4px; }

/* Woo account forms inherit the design-system field styling */
.woocommerce form.login,
.woocommerce form.register {
	background: var(--db-panel) !important;
	border: 1px solid var(--db-line) !important;
	border-radius: var(--db-r-lg) !important;
	padding: clamp(20px, 3vw, 28px) !important;
}
.woocommerce form.login label,
.woocommerce form.register label {
	font-family: var(--db-mono) !important;
	font-size: 10.5px !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--db-ink-3) !important;
}
.woocommerce form.login label.woocommerce-form-login__rememberme,
.woocommerce form.register label.woocommerce-form__label-for-checkbox {
	font-family: var(--db-sans) !important;
	font-size: 13.5px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--db-ink-2) !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}
.woocommerce form.login .button,
.woocommerce form.register .button { width: 100%; min-height: 48px; margin-top: 4px; }

/* ==========================================================================
   22. My Account: login / register alignment
   WooCommerce floats the two columns and gives them different heading blocks,
   which left the panels visibly out of line.
   ========================================================================== */
.woocommerce-account .u-columns.woocommerce-Addresses,
.woocommerce-account .u-columns {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
	margin: 0 !important;
}
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after { display: none !important; }

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}

.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
	font-size: 18px !important;
	font-weight: 680 !important;
	letter-spacing: -0.014em !important;
	margin: 0 0 14px !important;
	min-height: 26px;
	display: flex;
	align-items: center;
}

.woocommerce-account .u-column1 > form,
.woocommerce-account .u-column2 > form { flex: 1 1 auto; margin: 0 !important; }

/* one reveal affordance only: Woo paints its own icon via background-image */
.woocommerce form .show-password-input,
.db .show-password-input {
	background: none !important;
	background-image: none !important;
	width: 18px;
	height: 18px;
}
.woocommerce form .show-password-input::before,
.db .show-password-input::before { content: none !important; }

/* hCaptcha frame blends with the dark panels */
.db-captcha iframe,
.h-captcha iframe {
	border-radius: var(--db-r);
	overflow: hidden;
}
.db-captcha { max-width: 100%; overflow-x: auto; }

@media (max-width: 860px) {
	.woocommerce-account .u-columns { grid-template-columns: 1fr; }
}

/* ==========================================================================
   20. Resource library: application film, account gate, locked downloads
   ========================================================================== */
.db-sec__note {
	font-size: 11px;
	color: var(--db-ink-3);
	letter-spacing: .1em;
}

.db-filmwrap {
	position: relative;
	border: 1px solid var(--db-line);
	border-radius: var(--db-r-lg);
	background: var(--db-panel);
	overflow: hidden;
}

.db-film {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #0c1015;
	object-fit: cover;
}

.db-film__stage {
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	padding: 24px;
	background:
		radial-gradient(70% 90% at 50% 10%, rgba(30, 111, 255, .10), transparent 60%),
		var(--db-panel-2);
}

.db-film__stage svg {
	width: 100%;
	height: auto;
	max-height: 100%;
	opacity: .85;
}

.db-film__note {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 13px 18px;
	border-top: 1px solid var(--db-line);
	background: var(--db-panel);
	color: var(--db-ink-3);
	font-size: 12.5px;
}

.db-film__note svg { color: var(--db-cyan); flex: 0 0 auto; }

/* account gate */
.db-gatebar {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 16px 18px;
	margin-bottom: 22px;
	border: 1px solid rgba(30, 111, 255, .28);
	border-radius: var(--db-r-lg);
	background: linear-gradient(180deg, rgba(30, 111, 255, .09), rgba(30, 111, 255, .03));
}

.db-gatebar__ico {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(30, 111, 255, .35);
	border-radius: var(--db-r);
	color: #6ea8ff;
}

.db-gatebar__copy b { display: block; font-size: 14px; color: var(--db-ink); }
.db-gatebar__copy > span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--db-ink-3); }
.db-gatebar__acts { display: flex; gap: 10px; flex-wrap: wrap; }

.db-dlrow--locked .db-dlrow__ico { color: var(--db-ink-3); }
.db-dlrow--locked:hover .db-dlrow__ico { color: #6ea8ff; border-color: rgba(30, 111, 255, .35); }

.db-downloads--tight { margin-top: 16px; }

.db-res__soon { margin-top: 14px; font-size: 12.5px; color: var(--db-ink-3); }
.db-res__list { display: grid; gap: 8px; margin-top: 16px; }
.db-res__list li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 10px; align-items: start; }
.db-res__bullet { color: var(--db-cyan); margin-top: 2px; }
.db-res__list .db-small { font-size: 12.5px; }
.db-res__cta { margin-top: 20px; }

@media (max-width: 720px) {
	.db-gatebar { grid-template-columns: 38px minmax(0, 1fr); }
	.db-gatebar__acts { grid-column: 1 / -1; }
	.db-gatebar__acts .db-btn { flex: 1 1 auto; justify-content: center; }
}

/* product photography, shown alongside the dimensioned drawings */
.db-pdp__stage--photo {
	display: grid;
	place-items: center;
	padding: 18px;
	background: var(--db-panel-2);
}

.db-pdp__photo {
	display: block;
	width: 100%;
	height: auto;
	max-height: 460px;
	object-fit: contain;
	border-radius: var(--db-r);
}

/* document row awaiting a file: a status, not a call to action */
.db-docrow__status {
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--db-ink-3);
	white-space: nowrap;
}