/* ==========================================================================
   IDNTY — Dark Minimal Streetwear Theme
   Base: Storefront (WooCommerce)
   ========================================================================== */

:root {
	--idnty-black: #0a0a0a;
	--idnty-black-soft: #121212;
	--idnty-white: #f5f5f3;
	--idnty-grey: #9a9a9a;
	--idnty-border: rgba(255, 255, 255, 0.12);
	/* Sits behind product photos specifically (not general card chrome).
	   Most current product shots are black garments — placed on the old
	   #050505 / --idnty-black-soft card backgrounds they were nearly
	   invisible. Lighter so the silhouette separates from the backdrop;
	   still dark enough to hold the theme's black aesthetic. This is a
	   partial mitigation — photography with genuine contrast against its
	   own background is the real fix, this just keeps flat black shirts
	   from disappearing entirely in the meantime. */
	--idnty-image-bg: #232323;
	--idnty-font-serif: 'Playfair Display', Georgia, serif;
	--idnty-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --------------------------------------------------------------------------
   Self-hosted fonts (previously loaded from fonts.googleapis.com — moved
   local to avoid sending visitor IPs to Google on every page load, and to
   drop the extra DNS/TLS round trip). Variable fonts, each covering the
   full weight range used on the site; latin + latin-ext subsets only
   (latin-ext covers Latvian diacritics — cyrillic/greek/vietnamese aren't
   needed here).
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('../fonts/playfair-display-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('../fonts/playfair-display-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Global resets / base
   -------------------------------------------------------------------------- */

body {
	background-color: var(--idnty-black);
	color: var(--idnty-white);
	font-family: var(--idnty-font-sans);
	font-weight: 400;
}

a {
	color: var(--idnty-white);
	text-decoration: none;
}

/* Visible focus indicator for keyboard users — only appears on
   keyboard focus (:focus-visible), not on mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.idnty-btn:focus-visible {
	outline: 2px solid var(--idnty-white);
	outline-offset: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--idnty-font-sans);
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--idnty-white);
}

/* --------------------------------------------------------------------------
   Plain content tables (WordPress "Table" block, e.g. the Privacy Policy
   page). Nothing in this theme styled these before — whoever wrote that
   page picked a light background color for the table block in the
   editor, which the block applies as an inline style="background-color"
   (higher precedence than any external stylesheet rule). Meanwhile our
   body text color (var(--idnty-white), an off-white) inherited right
   into it — off-white text on a white cell is nearly invisible. The
   !important on background-color is there specifically to beat that
   inline style; nothing else here needs it. */
.entry-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	background-color: transparent !important;
	color: var(--idnty-white);
	margin: 0 0 1.5em;
}

.entry-content table th,
.entry-content table td,
.wp-block-table table th,
.wp-block-table table td {
	padding: 0.75em 1em;
	border: 1px solid var(--idnty-border);
	text-align: left;
	color: inherit;
	background-color: transparent !important;
}

.entry-content table thead th,
.wp-block-table table thead th {
	font-weight: 700;
	color: var(--idnty-white);
	background-color: var(--idnty-black-soft) !important;
}

/* Storefront wraps content in #page, .site — force dark everywhere.
   #page/#masthead are ID selectors, so they already win on specificity
   alone. The Storefront classes below are doubled (.foo.foo) to raise
   their specificity above typical parent-theme rules instead of using
   !important — a doubled class matches exactly the same elements as
   the single class, just with a higher specificity score. */
#page,
#masthead {
	background-color: var(--idnty-black);
	color: var(--idnty-white);
	border: none;
	box-shadow: none;
}

.site-header.site-header,
.site-footer.site-footer,
.storefront-primary-navigation.storefront-primary-navigation {
	background-color: var(--idnty-black);
	color: var(--idnty-white);
	border: none;
	box-shadow: none;
}

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

.site-header.site-header {
	border-bottom: 1px solid var(--idnty-border);
}

.site-title.site-title,
.site-title.site-title a {
	font-family: var(--idnty-font-serif);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.04em;
	color: var(--idnty-white);
}

.main-navigation.main-navigation ul li a {
	color: var(--idnty-white);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.main-navigation.main-navigation ul li a:hover {
	color: var(--idnty-grey);
}

/* Cart / account icons in header */
.site-header-cart.site-header-cart a,
.site-header.site-header .icon {
	color: var(--idnty-white);
}

/* Language switcher (LV/EN flags) */
.idnty-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 16px;
}

.idnty-lang-switch__flag {
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	opacity: 0.45;
	filter: grayscale(100%);
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.idnty-lang-switch__flag:hover,
.idnty-lang-switch__flag.is-active {
	opacity: 1;
	filter: grayscale(0%);
}

/* Mobile nav toggle ("Menu" button). Storefront ships this as a plain
   filled white <button> with square corners — on this otherwise flat,
   all-black-and-outlined design it was the one solid light UI chrome
   element on the page. Restyled to match the outline look used
   everywhere else (see .idnty-btn below). */
.menu-toggle.menu-toggle {
	background: transparent;
	color: var(--idnty-white);
	border: 1px solid var(--idnty-white);
	border-radius: 0;
	box-shadow: none;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 10px 18px;
	transition: background 0.25s ease, color 0.25s ease;
}

.menu-toggle.menu-toggle:hover,
.menu-toggle.menu-toggle:focus {
	background: var(--idnty-white);
	color: var(--idnty-black);
}

/* --------------------------------------------------------------------------
   Buttons (shared across homepage + WooCommerce)
   -------------------------------------------------------------------------- */

/* .idnty-btn is our own class (no competing rule can target it), and
   the .woocommerce-prefixed selectors mirror WooCommerce core's own
   selector convention for these exact elements — since our stylesheet
   is enqueued after both Storefront and WooCommerce's own CSS, equal
   specificity here already wins by cascade order, no !important
   needed. a.added_to_cart is doubled as a margin of safety since it's
   a plain WooCommerce core class that a plugin could target directly. */
.idnty-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
a.added_to_cart.added_to_cart {
	display: inline-block;
	background: transparent;
	color: var(--idnty-white);
	border: 1px solid var(--idnty-white);
	border-radius: 0;
	padding: 14px 32px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	transition: background 0.25s ease, color 0.25s ease;
}

.idnty-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--idnty-white);
	color: var(--idnty-black);
}

.idnty-btn--outline {
	background: transparent;
}

/* --------------------------------------------------------------------------
   Hero section
   -------------------------------------------------------------------------- */

.idnty-hero {
	position: relative;
	min-height: 320px;
	padding: 40px 0;
	display: flex;
	align-items: center;
	background-color: var(--idnty-black-soft);
	background-image: url('../images/hero-placeholder.jpg');
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.idnty-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.1) 100%);
}

.idnty-hero__content {
	position: relative;
	z-index: 2;
	max-width: 640px;
	padding: 0 60px;
}

.idnty-hero__title {
	font-family: var(--idnty-font-serif);
	font-size: 88px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 0 16px;
}

.idnty-hero__subtitle {
	font-size: 15px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--idnty-grey);
	margin: 0 0 32px;
}

@media (max-width: 782px) {
	.idnty-hero {
		min-height: 220px;
		padding: 32px 0;
	}
	.idnty-hero__content {
		padding: 0 28px;
	}
	.idnty-hero__title {
		font-size: 52px;
	}
}

/* --------------------------------------------------------------------------
   Trust badges row
   -------------------------------------------------------------------------- */

.idnty-badges {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-bottom: 1px solid var(--idnty-border);
	border-top: 1px solid var(--idnty-border);
}

.idnty-badges__item {
	text-align: center;
	padding: 36px 16px;
	border-right: 1px solid var(--idnty-border);
}

.idnty-badges__item:last-child {
	border-right: none;
}

.idnty-badges__icon {
	display: block;
	width: 26px;
	height: 26px;
	margin: 0 auto 12px;
	color: var(--idnty-white);
}

.idnty-badges__item p {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--idnty-grey);
	margin: 0;
}

@media (max-width: 782px) {
	.idnty-badges {
		grid-template-columns: repeat(2, 1fr);
	}
	.idnty-badges__item:nth-child(2) {
		border-right: none;
	}
}

@media (max-width: 420px) {
	.idnty-badges {
		grid-template-columns: 1fr;
	}
	.idnty-badges__item {
		border-right: none;
		border-bottom: 1px solid var(--idnty-border);
	}
	.idnty-badges__item:last-child {
		border-bottom: none;
	}
}

/* --------------------------------------------------------------------------
   Latest Drops grid
   -------------------------------------------------------------------------- */

.idnty-drops {
	max-width: 1400px;
	margin: 0 auto;
	padding: 64px 40px 80px;
}

.idnty-drops__heading {
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 32px;
}

.idnty-drops__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.idnty-drop-card {
	display: block;
	background: var(--idnty-black-soft);
	border: 1px solid var(--idnty-border);
}

.idnty-drop-card__image {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--idnty-image-bg);
}

.idnty-drop-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.idnty-drop-card__title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 18px 16px 4px;
}

.idnty-drop-card__price {
	font-size: 13px;
	color: var(--idnty-grey);
	margin: 0 16px 18px;
}

.idnty-drops__cta {
	text-align: center;
	margin-top: 48px;
}

.idnty-drops__empty {
	text-align: center;
	color: var(--idnty-grey);
	padding: 40px 0;
}

@media (max-width: 992px) {
	.idnty-drops__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Shop / Category Archive Grid

   Restyles WooCommerce's default product loop (shop, category, search,
   related products) to match the "Latest Drops" homepage cards above.
   This only re-skins WooCommerce's own default markup — no template is
   overridden, so sale badges, ratings and the AJAX add-to-cart button
   (all hooked into the default loop via woocommerce_before/after_shop_loop_item*)
   keep working exactly as WooCommerce ships them.
   -------------------------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce/Storefront's base stylesheet gives ul.products a
   ::before clearfix (content: ""; display: table;) for its original
   float-based layout. Once this container is CSS Grid, that pseudo-
   element still generates a real (invisible) grid item and claims the
   very first cell — pushing every actual product over by one slot and
   leaving an empty first cell in the grid. content: none stops it from
   generating at all. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	/* !important here specifically: WooCommerce's "Related products"
	   section renders this same li.product under an extra ".related"
	   ancestor class, which gives its own float-column width rule
	   higher specificity than this selector — without !important the
	   li stays at its original ~22%-per-column width *inside* our grid
	   cell, squeezing the card down to a sliver (button text wrapping
	   letter-by-letter). Only these two properties need it. */
	width: auto !important;
	float: none !important;
	/* Storefront's own woocommerce.css still ships the old float-grid
	   gutter: ".products.columns-4 li.product { margin-right: 3.8% }",
	   zeroed out only on ".last" (the 4th item of what Storefront still
	   thinks is a 4-column row — our actual CSS Grid column count is
	   unrelated). That selector (.site-main ul.products.columns-4
	   li.product) is MORE specific than this one, so plain "margin: 0"
	   below doesn't touch margin-right and it wins for every card that
	   isn't ".last": those cards render ~20px narrower than their grid
	   cell, their image shrinks to match (fixed 3:4 aspect-ratio), and
	   the leftover vertical space shows as a taller gap above the
	   button — a "bigger dark block" than on ".last" cards, in what
	   looks like a random subset of products but is really just
	   "everything except every 4th item". !important needed since nothing
	   else here reaches that specificity. */
	margin-right: 0 !important;
	/* No background here on purpose — it only differed from the page's
	   own var(--idnty-black) by 8/255, doing effectively no visible
	   work beyond confusing this exact debugging session. The border
	   below is what actually defines each card. */
	border: 1px solid var(--idnty-border);
	padding: 0;
	margin: 0;
	text-align: left;
	/* Cards stretch to the tallest card in their grid row already (the
	   grid's default align-items: stretch), but the "Select options" /
	   "Add to cart" button used to just sit directly under the price in
	   normal block flow — so a 1-line title left extra empty space
	   below its button, while a 2-line title (e.g. "Good Coffee and Bad
	   Decisions") pushed its button down, and the buttons across a row
	   ended up at different heights. Flex column + margin-top: auto on
	   the button (below) pins every button to the bottom of its card
	   instead, regardless of how many lines the title above it takes. */
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	/* Same reasoning as .idnty-drop-card__image on the homepage: dark
	   product photos need a lighter backdrop than the card's own
	   background or they disappear against it. No separate image
	   wrapper exists in WooCommerce's default loop markup, so this link
	   (which wraps the <img> 1:1) carries it instead. */
	background: var(--idnty-image-bg);
}

.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 13px;
	line-height: 1.4;
	/* Reserves space for 2 lines even when a title only needs 1. Without
	   this, a row of short 1-line titles (e.g. "Different") ends up
	   shorter than a row containing a 2-line title (e.g. "Good Coffee
	   and Bad Decisions") — CSS Grid stretches every card in a row to
	   match its tallest member, so short-title rows end up visibly
	   shorter than long-title rows, and the dark card background (the
	   "block" around the button) looks a different size row to row. */
	min-height: 2.8em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 18px 16px 4px;
	color: var(--idnty-white);
}

.woocommerce ul.products li.product .price {
	display: block;
	font-size: 13px;
	color: var(--idnty-grey);
	margin: 0 16px 18px;
}

.woocommerce ul.products li.product .button {
	/* margin-top: auto (not a fixed value) is what actually pins this
	   to the bottom of the card — see the flex column comment on
	   li.product above. */
	margin: auto 16px 20px;
	width: calc(100% - 32px);
	text-align: center;
}

/* Default WooCommerce star-rating/sale-badge colors assume a light
   background — without this they'd be invisible or illegible on black. */
.woocommerce ul.products li.product .star-rating {
	margin: 0 16px 4px;
	color: var(--idnty-grey);
}

.woocommerce ul.products li.product .onsale {
	background: var(--idnty-white);
	color: var(--idnty-black);
}

@media (max-width: 992px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer.site-footer {
	border-top: 1px solid var(--idnty-border);
	padding: 32px 0;
}

/* Our own idnty_footer_credit() (functions.php) renders the credit line
   as two centered rows — copyright, then the policy links below it —
   instead of Storefront's original single run-on line. Full white
   rather than the muted grey used elsewhere: this is the last thing in
   the page and got lost against solid black at the dimmer shade. */
.site-footer.site-footer .site-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--idnty-white);
	text-align: center;
}

/* !important here (unlike most of this file's own idnty-* rules):
   Storefront's Customizer "Footer Text Color"/"Footer Link Color"
   options generate their own inline <style> block in <head>, targeting
   these same links at a specificity/source-order that otherwise beat
   this rule — confirmed live, the plain (non-!important) version above
   still rendered near-invisible. */
.site-footer.site-footer a,
.site-footer.site-footer .privacy-policy-link {
	color: var(--idnty-white) !important;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.site-footer.site-footer a:hover,
.site-footer.site-footer .privacy-policy-link:hover {
	color: var(--idnty-grey) !important;
}

/* --------------------------------------------------------------------------
   Single Product Page
   -------------------------------------------------------------------------- */

/* Dark-theme styling for WooCommerce's default notice boxes (e.g.
   "Product added to your cart") — otherwise they'd render with WC's
   default light-background styling, which was rarely noticed before
   since it previously only ever appeared after a page refresh. */
.idnty-ajax-notices .woocommerce-message,
.idnty-ajax-notices .woocommerce-error,
.idnty-ajax-notices .woocommerce-info {
	background: var(--idnty-black-soft);
	border: 1px solid var(--idnty-border);
	color: var(--idnty-white);
	padding: 14px 20px;
	margin: 0 0 24px;
	font-size: 13px;
	list-style: none;
}

.idnty-ajax-notices .woocommerce-message a.button,
.idnty-ajax-notices .woocommerce-error a.button,
.idnty-ajax-notices .woocommerce-info a.button {
	display: inline-block;
	margin-left: 12px;
	color: var(--idnty-white);
	border: 1px solid var(--idnty-white);
	padding: 6px 14px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Force full-width content area now that the sidebar is removed on
   WooCommerce pages (see idnty_remove_woocommerce_sidebar in functions.php).
   These selectors mirror WooCommerce core's own body-class convention
   (.woocommerce / .woocommerce-page), so equal specificity plus our
   later cascade position is enough — no !important needed. */
.woocommerce .content-area,
.woocommerce-page .content-area {
	width: 100%;
	float: none;
}

.woocommerce .sidebar-primary,
.woocommerce-page .sidebar-primary {
	display: none;
}

/* Custom gallery (replaces WooCommerce's FlexSlider gallery entirely —
   see idnty_render_product_gallery() in functions.php) */
.idnty-gallery__main {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--idnty-black-soft);
}

.idnty-gallery__main-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
}

.idnty-gallery__main-image.is-active {
	display: block;
}

.idnty-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.idnty-gallery__thumb {
	width: 72px;
	height: 72px;
	padding: 0;
	border: 1px solid var(--idnty-border);
	background: var(--idnty-black-soft);
	cursor: pointer;
}

.idnty-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.6;
}

.idnty-gallery__thumb:hover img,
.idnty-gallery__thumb.is-active img {
	opacity: 1;
}

.idnty-gallery__thumb.is-active {
	border-color: var(--idnty-white);
}

.idnty-product {
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px 40px 0;
}

.idnty-product__layout {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	align-items: start;
}

/* Grid columns default to min-width: auto, which lets unshrinkable
   content (e.g. a thumbnail strip on a product with many gallery
   images) force the column — and the whole grid — wider than its fr
   share. min-width: 0 makes both columns actually respect the 1.1fr/1fr
   split regardless of how much gallery/summary content is inside. */
.idnty-product__gallery,
.idnty-product__summary {
	min-width: 0;
}

/* Note: the old generic ".idnty-product__gallery img" rule was
   removed here — it was overriding .idnty-gallery__main-image's
   display:none/block toggle due to higher CSS specificity, which
   is why thumbnail clicks weren't visually switching the image. */

.idnty-product__summary .product_title {
	font-size: 26px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 12px;
}

.idnty-product__summary p.price {
	font-size: 18px;
	color: var(--idnty-white);
	margin: 0 0 24px;
}

.idnty-product__summary p.price ins {
	text-decoration: none;
}

.idnty-product__summary .woocommerce-product-details__short-description {
	color: var(--idnty-grey);
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 32px;
}

/* Variation form / size selector */
.idnty-product__summary table.variations {
	border: none;
	margin-bottom: 24px;
}

.idnty-product__summary table.variations td,
.idnty-product__summary table.variations th {
	border: none;
	padding: 0;
}

.idnty-product__summary table.variations label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--idnty-grey);
	display: block;
	margin-bottom: 10px;
}

/* Hide native select visually but keep it functional — JS builds buttons from it */
.idnty-product__summary table.variations select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.idnty-size-options {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.idnty-size-options button {
	min-width: 44px;
	padding: 10px 14px;
	background: transparent;
	border: 1px solid var(--idnty-border);
	color: var(--idnty-white);
	font-size: 12px;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.idnty-size-options button:hover {
	border-color: var(--idnty-white);
}

.idnty-size-options button.is-active {
	background: var(--idnty-white);
	color: var(--idnty-black);
	border-color: var(--idnty-white);
}

.idnty-size-options button:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	text-decoration: line-through;
}

.woocommerce-variation-add-to-cart {
	margin-top: 24px;
}

.idnty-product__summary .reset_variations {
	display: inline-block;
	margin-left: 12px;
	font-size: 11px;
	color: var(--idnty-grey);
	text-decoration: underline;
}

/* Add to cart button */
.idnty-product__summary .single_add_to_cart_button {
	width: 100%;
	text-align: center;
	margin-bottom: 16px;
}

/* Details / Shipping two-column grid */
.idnty-product__meta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	border-top: 1px solid var(--idnty-border);
	margin-top: 56px;
	padding-top: 40px;
}

.idnty-product__meta-col h4 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--idnty-grey);
	margin-bottom: 16px;
}

.idnty-product__meta-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.idnty-product__meta-col li {
	font-size: 13px;
	color: var(--idnty-white);
	padding: 6px 0;
	border-bottom: 1px solid var(--idnty-border);
}

@media (max-width: 782px) {
	.idnty-product__layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.idnty-product__meta-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* --------------------------------------------------------------------------
   Cart Drawer
   -------------------------------------------------------------------------- */

.idnty-cart-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 998;
}

.idnty-cart-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.idnty-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 420px;
	max-width: 92vw;
	background: var(--idnty-black);
	border-left: 1px solid var(--idnty-border);
	transform: translateX(100%);
	transition: transform 0.35s ease;
	z-index: 999;
	display: flex;
	flex-direction: column;
}

.idnty-cart-drawer.is-open {
	transform: translateX(0);
}

.idnty-no-scroll {
	overflow: hidden;
}

.idnty-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 28px;
	border-bottom: 1px solid var(--idnty-border);
}

.idnty-cart-drawer__header h3 {
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0;
}

.idnty-cart-drawer__close {
	background: none;
	border: none;
	color: var(--idnty-white);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.idnty-cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
}

/* Reskin WooCommerce's default mini-cart markup */
.idnty-cart-drawer__body .woocommerce-mini-cart {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.idnty-cart-drawer__body .woocommerce-mini-cart-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--idnty-border);
}

.idnty-cart-drawer__body .woocommerce-mini-cart-item img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	background: var(--idnty-black-soft);
}

.idnty-cart-drawer__body .woocommerce-mini-cart-item a:not(.remove_from_cart_button) {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--idnty-white);
	display: block;
	margin-bottom: 6px;
}

.idnty-cart-drawer__body .woocommerce-mini-cart-item .quantity {
	font-size: 12px;
	color: var(--idnty-grey);
	display: block;
}

/* .idnty-cart-drawer__body is our own unique wrapper class — nothing
   in WooCommerce/Storefront targets ".idnty-cart-drawer__body
   .remove_from_cart_button" specifically, and this compound selector
   already outranks any bare ".remove_from_cart_button" rule from core,
   so !important isn't needed here. */
.idnty-cart-drawer__body .remove_from_cart_button {
	position: absolute;
	top: 16px;
	right: 0;
	color: var(--idnty-grey);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.idnty-cart-drawer__body .remove_from_cart_button:hover {
	color: var(--idnty-white);
}

.idnty-cart-drawer__body .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--idnty-border);
	margin: auto 0 20px;
}

.idnty-cart-drawer__body .woocommerce-mini-cart__total strong {
	font-weight: 600;
}

.idnty-cart-drawer__body .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.idnty-cart-drawer__body .woocommerce-mini-cart__buttons a.button {
	display: block;
	text-align: center;
	background: transparent;
	color: var(--idnty-white);
	border: 1px solid var(--idnty-white);
	padding: 14px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.idnty-cart-drawer__body .woocommerce-mini-cart__buttons a.checkout {
	background: var(--idnty-white);
	color: var(--idnty-black);
}

.idnty-cart-drawer__body .woocommerce-mini-cart__buttons a.button:hover {
	opacity: 0.85;
}

.idnty-cart-drawer__body .woocommerce-mini-cart__empty-message {
	color: var(--idnty-grey);
	text-align: center;
	margin: auto 0;
}

/* Loading state on the Add to Cart button while the AJAX request is in flight */
.single_add_to_cart_button.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* Inline validation message (e.g. "please select a size") shown
   right above the Add to Cart button instead of a page-level banner */
.idnty-inline-notice {
	color: #e8b4b4;
	font-size: 12px;
	margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   Checkout (WooCommerce Checkout block)

   Class names below were confirmed live against the actual site (not
   guessed). Matching WooCommerce's own ancestor-qualified selectors
   (".wc-block-components-checkbox .wc-block-components-checkbox__input",
   etc.) at equal specificity worked in an isolated live test, but not
   reliably once deployed — the Checkout block's own CSS can load at a
   different point in the cascade depending on how/when WooCommerce
   enqueues it on this specific page, so equal-specificity source order
   isn't dependable here. !important guarantees these apply regardless.
   -------------------------------------------------------------------------- */

.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-block-components-text-input input[type="password"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="url"],
.wc-blocks-components-select .wc-blocks-components-select__select {
	background-color: var(--idnty-black-soft) !important;
	color: var(--idnty-white) !important;
	border: 1px solid var(--idnty-border) !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	color: var(--idnty-grey) !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var(--idnty-black-soft) !important;
	border-color: var(--idnty-border) !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--idnty-white) !important;
}

.wc-block-components-radio-control .wc-block-components-radio-control__input {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--idnty-black-soft) !important;
	border: 1px solid var(--idnty-border) !important;
}

/* Selected shipping/payment method — the base rule above gives checked
   and unchecked radios the exact same faint border with no fill, so the
   selection was impossible to see. This paints an explicit dot: white
   border + white fill, with an inset shadow matching the field background
   punched out of the middle to read as a ring-and-dot radio indicator. */
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--idnty-white) !important;
	background-color: var(--idnty-white) !important;
	box-shadow: inset 0 0 0 4px var(--idnty-black-soft) !important;
}

/* WooCommerce's error notice (e.g. "no payment methods available") —
   restyled to a dark red instead of its default light pink, so it still
   reads clearly as an error without a jarring light box on this page. */
.wc-block-components-notice-banner.is-error {
	background-color: #2a1414 !important;
	border-color: #5c2b2b !important;
	color: #f2b8b8 !important;
}

.wc-block-components-notice-banner.is-error svg {
	fill: #f2b8b8 !important;
}

/* --------------------------------------------------------------------------
   Thank You / Order Received page

   Fully custom markup (woocommerce/checkout/thankyou.php overrides
   WooCommerce's default template outright), so none of this needs
   !important — there's no competing Storefront/WooCommerce specificity
   to fight, unlike the Checkout block section above. Every class below
   is our own ("idnty-*"), except the .wc-item-meta / gateway-instruction
   selectors near the bottom, which style markup WooCommerce/the payment
   gateway still generates itself.
   -------------------------------------------------------------------------- */

.idnty-order-received {
	max-width: 760px;
	margin: 0 auto;
	padding: 2.5rem 0 4rem;
}

.idnty-eyebrow {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--idnty-grey);
	margin: 0 0 1.25rem;
}

.idnty-check {
	width: 44px;
	height: 44px;
	border: 1px solid var(--idnty-border);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.75rem;
	color: var(--idnty-white);
}

.idnty-check svg {
	width: 18px;
	height: 18px;
}

.idnty-order-received h1 {
	font-family: var(--idnty-font-serif);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 0.85rem;
	color: var(--idnty-white);
}

.idnty-lede {
	font-size: 16px;
	line-height: 1.6;
	color: var(--idnty-grey);
	max-width: 46ch;
	margin: 0 0 2.25rem;
}

.idnty-lede strong {
	color: var(--idnty-white);
	font-weight: 500;
}

.idnty-cta-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 3.5rem;
}

.idnty-btn {
	font-family: var(--idnty-font-sans);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.95rem 1.6rem;
	border: 1px solid var(--idnty-border);
	background: transparent;
	color: var(--idnty-white);
	border-radius: 0;
	text-decoration: none;
	display: inline-block;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.idnty-btn:hover {
	background: var(--idnty-white);
	color: var(--idnty-black);
}

.idnty-btn--ghost {
	color: var(--idnty-grey);
}

.idnty-btn--ghost:hover {
	background: transparent;
	color: var(--idnty-white);
	border-color: var(--idnty-white);
}

.idnty-timeline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--idnty-border);
	border-bottom: 1px solid var(--idnty-border);
	margin-bottom: 3.5rem;
}

.idnty-tstep {
	padding: 1.5rem 1.5rem 1.5rem 0;
	border-right: 1px solid var(--idnty-border);
}

.idnty-tstep:last-child {
	border-right: none;
}

.idnty-tstep .idnty-tnum {
	font-family: var(--idnty-font-serif);
	font-size: 13px;
	color: var(--idnty-grey);
	opacity: 0.5;
	margin: 0 0 0.6rem;
}

.idnty-tstep.is-active .idnty-tnum {
	color: var(--idnty-white);
	opacity: 1;
}

.idnty-tstep h3 {
	font-size: 14px;
	font-weight: 500;
	margin: 0 0 0.35rem;
	color: var(--idnty-white);
}

.idnty-tstep p {
	font-size: 13px;
	line-height: 1.5;
	color: var(--idnty-grey);
	margin: 0;
}

.idnty-order-received section {
	margin-bottom: 3rem;
}

.idnty-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 1px solid var(--idnty-border);
	padding-bottom: 0.85rem;
	margin-bottom: 1.5rem;
}

.idnty-section-head h2 {
	font-family: var(--idnty-font-serif);
	font-size: 1.3rem;
	margin: 0;
	color: var(--idnty-white);
}

.idnty-section-head .idnty-meta {
	font-size: 12px;
	color: var(--idnty-grey);
	letter-spacing: 0.03em;
}

.idnty-order-row {
	display: flex;
	gap: 1.1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--idnty-border);
}

.idnty-order-row:last-of-type {
	border-bottom: none;
}

.idnty-thumb {
	width: 64px;
	height: 76px;
	background: var(--idnty-black-soft);
	border: 1px solid var(--idnty-border);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--idnty-grey);
	overflow: hidden;
}

.idnty-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.idnty-thumb svg {
	width: 28px;
	height: 28px;
}

.idnty-order-row__info {
	flex: 1;
	min-width: 0;
}

.idnty-order-row__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--idnty-white);
	margin: 0 0 0.3rem;
}

.idnty-order-row__variant {
	font-size: 12px;
	color: var(--idnty-grey);
	margin: 0;
}

.idnty-order-row__price {
	font-size: 14px;
	color: var(--idnty-white);
	white-space: nowrap;
	align-self: flex-start;
}

.idnty-totals {
	padding-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.idnty-totals__line {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--idnty-grey);
}

.idnty-totals__line--grand {
	padding-top: 0.85rem;
	margin-top: 0.3rem;
	border-top: 1px solid var(--idnty-border);
	font-size: 15px;
	color: var(--idnty-white);
	font-weight: 500;
}

.idnty-meta-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--idnty-border);
	border: 1px solid var(--idnty-border);
	margin-bottom: 3.5rem;
}

.idnty-meta-cell {
	background: var(--idnty-black);
	padding: 1.1rem 1.2rem;
}

.idnty-meta-cell .idnty-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--idnty-grey);
	margin: 0 0 0.5rem;
}

.idnty-meta-cell .idnty-value {
	font-size: 15px;
	color: var(--idnty-white);
	margin: 0;
	font-weight: 500;
}

.idnty-info-block .idnty-label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--idnty-grey);
	margin: 0 0 0.5rem;
}

.idnty-info-block .idnty-value {
	font-size: 14px;
	line-height: 1.65;
	color: var(--idnty-white);
	margin: 0;
}

.idnty-info-block .idnty-value--muted {
	color: var(--idnty-grey);
}

.idnty-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
}

.idnty-foot-note {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--idnty-grey);
	border-top: 1px solid var(--idnty-border);
	padding-top: 1.75rem;
}

.idnty-foot-note a {
	color: var(--idnty-grey);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.idnty-foot-note a:hover {
	color: var(--idnty-white);
}

/* BACS "Direct bank transfer" instructions — the only payment method
   this store offers, so this box (WC_Gateway_BACS::thankyou_page(),
   captured and wrapped by our template) is what actually tells the
   customer where to send the money. Its own markup isn't ours, so it
   gets the same light-background-by-default treatment as the rest of
   WooCommerce's default output elsewhere in this file. */
.idnty-payment-instructions {
	background: var(--idnty-black-soft);
	border: 1px solid var(--idnty-border);
	padding: 1.5rem;
	margin-bottom: 3rem;
}

.idnty-payment-instructions h2,
.idnty-payment-instructions h3 {
	font-family: var(--idnty-font-serif);
	font-size: 1.1rem;
	margin: 0 0 1rem;
	color: var(--idnty-white);
}

.idnty-payment-instructions ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.idnty-payment-instructions li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 13px;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--idnty-border);
	color: var(--idnty-grey);
}

.idnty-payment-instructions li:last-child {
	border-bottom: none;
}

.idnty-payment-instructions li strong {
	color: var(--idnty-white);
	font-weight: 500;
}

/* Variation/attribute meta ("Izmērs: M · Krāsa: Melna") printed by
   wc_display_item_meta() inside each order row above — not our markup,
   so styled directly rather than via an idnty-* class. */
.idnty-order-row__variant .wc-item-meta,
.idnty-order-row__variant strong {
	color: inherit;
	font-weight: inherit;
}

@media (max-width: 680px) {
	.idnty-timeline {
		grid-template-columns: 1fr;
	}

	.idnty-tstep {
		border-right: none;
		border-bottom: 1px solid var(--idnty-border);
		padding: 1.25rem 0;
	}

	.idnty-tstep:last-child {
		border-bottom: none;
	}

	.idnty-two-col {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.idnty-meta-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* --------------------------------------------------------------------------
   My Account — Orders + Account Details

   myaccount/orders.php, myaccount/view-order.php and
   myaccount/form-edit-account.php — light background by default, so
   styled the same way with !important for the same
   deployment-reliability reason as elsewhere in this file. Buttons
   (View order / Save changes) already inherit dark styling for free
   from the generic ".woocommerce a.button, .woocommerce button.button"
   rule further up this file, so they're not repeated here.

   The single order view (myaccount/view-order.php, reached via "Skatīt
   pasūtījumu"/"View order") still renders WooCommerce's own default
   order-details table + overview list (order/order-details.php) — it's
   a *different* template from the Thank You page above, which now has
   its own custom idnty-* markup and doesn't need any of this. Restyled
   here rather than replaced with a matching custom template, since a
   second full redesign wasn't part of this round.
   -------------------------------------------------------------------------- */

.woocommerce-order-overview,
.woocommerce-order-overview li,
.woocommerce-table,
.woocommerce-table th,
.woocommerce-table td,
.order_details th,
.order_details td {
	background-color: var(--idnty-black-soft) !important;
	color: var(--idnty-white) !important;
	border-color: var(--idnty-border) !important;
}

.woocommerce-order-overview li strong {
	color: var(--idnty-white) !important;
}

.woocommerce-table thead th {
	background-color: var(--idnty-black-soft) !important;
	color: var(--idnty-grey) !important;
}

/* "Order #123 was placed on ... and is currently ..." summary line
   above the table on this same page — WooCommerce wraps its three
   dynamic values in <mark class="order-number|order-date|order-status">,
   not inside .woocommerce-order-overview/.woocommerce-table above, so
   the rules right above never reached it. Without an explicit override
   it fell back to the browser's dim default <mark> styling instead of
   matching the sentence's own white text. */
.order-number,
.order-date,
.order-status {
	background: transparent !important;
	color: var(--idnty-white) !important;
	font-weight: 500;
}

.woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--idnty-border) !important;
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--idnty-border) !important;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 14px 16px !important;
	color: var(--idnty-white) !important;
}

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--idnty-grey) !important;
}

.woocommerce-orders-table,
.woocommerce-orders-table tr,
.woocommerce-orders-table th,
.woocommerce-orders-table td {
	background-color: var(--idnty-black-soft) !important;
	color: var(--idnty-white) !important;
	border-color: var(--idnty-border) !important;
}

.woocommerce-orders-table thead th {
	color: var(--idnty-grey) !important;
}

.woocommerce-pagination a {
	color: var(--idnty-white) !important;
	border-color: var(--idnty-border) !important;
}

.woocommerce-EditAccountForm,
.woocommerce-EditAccountForm fieldset {
	background-color: transparent !important;
	color: var(--idnty-white) !important;
	border-color: var(--idnty-border) !important;
}

/* Browser default fieldset padding otherwise shifts the password fields
   to the right of the form rows above them (which sit directly in the
   form, outside any fieldset) — reset it so both columns line up. */
.woocommerce-EditAccountForm fieldset {
	padding: 0 !important;
	margin: 0 !important;
}

.woocommerce-EditAccountForm fieldset > p.form-row {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.woocommerce-EditAccountForm legend {
	background-color: transparent !important;
	color: var(--idnty-white) !important;
	padding: 0 !important;
}

.woocommerce-EditAccountForm label {
	color: var(--idnty-grey) !important;
}

.woocommerce-EditAccountForm .woocommerce-Input {
	background-color: var(--idnty-black-soft) !important;
	color: var(--idnty-white) !important;
	border: 1px solid var(--idnty-border) !important;
}

/* --------------------------------------------------------------------------
   Classic Cart + Checkout

   Switched from the Cart/Checkout Blocks to the classic
   [woocommerce_cart]/[woocommerce_checkout] shortcodes so their text goes
   through the same .mo-based translation as everything else (the Blocks
   version loads its UI text via a separate JS translation mechanism that
   our translation files don't cover). Classic templates use a completely
   different set of class names than the Blocks version above, so none of
   that CSS applies here — same light-background-by-default story as
   everywhere else, same !important reasoning as the Thank You page.
   -------------------------------------------------------------------------- */

/* Cart page: item table */
table.cart,
table.cart th,
table.cart td,
.shop_table.cart,
.shop_table.cart th,
.shop_table.cart td {
	background-color: var(--idnty-black-soft) !important;
	color: var(--idnty-white) !important;
	border-color: var(--idnty-border) !important;
}

.shop_table.cart thead th {
	color: var(--idnty-grey) !important;
}

.shop_table.cart .quantity input.qty {
	background-color: var(--idnty-black) !important;
	color: var(--idnty-white) !important;
	border: 1px solid var(--idnty-border) !important;
}

/* Cart page + Checkout page: coupon field, billing/shipping form fields.
   Confirmed against the live checkout HTML — these fields render with
   a plain "input-text" class here (NOT "woocommerce-Input", which is
   what the My Account edit form above actually uses), so both are
   targeted rather than assumed. */
.coupon input.input-text,
.woocommerce-billing-fields input.input-text,
.woocommerce-shipping-fields input.input-text,
.woocommerce-additional-fields input.input-text,
.woocommerce-additional-fields textarea.input-text,
.woocommerce-billing-fields .woocommerce-Input,
.woocommerce-shipping-fields .woocommerce-Input,
.woocommerce-additional-fields .woocommerce-Input,
.woocommerce-input-wrapper select,
.woocommerce-billing-fields select,
.woocommerce-shipping-fields select {
	background-color: var(--idnty-black-soft) !important;
	color: var(--idnty-white) !important;
	border: 1px solid var(--idnty-border) !important;
}

.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label,
.coupon label {
	color: var(--idnty-grey) !important;
}

/* WooCommerce enhances the country/state <select> with Select2
   (select2.css is enqueued on Checkout), which replaces it with its
   own styled markup — the plain "select" rule above never actually
   shows on screen once Select2 takes over, so it needs its own rule. */
.select2-container--default .select2-selection--single,
.select2-dropdown {
	background-color: var(--idnty-black-soft) !important;
	border: 1px solid var(--idnty-border) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	color: var(--idnty-white) !important;
}

.select2-container--default .select2-results__option,
.select2-container--default .select2-search__field {
	background-color: var(--idnty-black-soft) !important;
	color: var(--idnty-white) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--idnty-white) !important;
	color: var(--idnty-black) !important;
}

/* Cart totals box + Checkout order review table — both use the same
   shop_table markup, just different wrapping classes. #order_review /
   .woocommerce-checkout-review-order is the OUTER wrapper around both
   the table AND the payment methods box below it — its own default
   white background was showing through the margin gap between the
   two, which is what the persistent white bar between them turned
   out to be. */
.cart_totals,
.cart_totals table,
.cart_totals th,
.cart_totals td,
#order_review,
.woocommerce-checkout-review-order,
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	background-color: var(--idnty-black-soft) !important;
	color: var(--idnty-white) !important;
	border-color: var(--idnty-border) !important;
}

.cart_totals h2 {
	color: var(--idnty-white) !important;
}

/* Payment methods box on Checkout — the outer wrapper/ul rules alone
   don't reach the individual <li> per gateway or the place-order row
   (privacy text + submit button), which have their own default light
   background from Storefront's own WooCommerce styles; those are what
   was actually still showing white/washed out. */
.woocommerce-checkout-payment,
.wc_payment_methods,
.wc_payment_methods li,
.wc_payment_method,
.payment_box,
.woocommerce-checkout-payment .form-row,
.woocommerce-checkout-payment .place-order {
	background-color: var(--idnty-black-soft) !important;
	color: var(--idnty-white) !important;
	border-color: var(--idnty-border) !important;
}

.payment_box p,
.wc_payment_method label {
	color: var(--idnty-white) !important;
}

/* WooCommerce briefly shows a white "updating totals" overlay
   (jQuery blockUI) over the order review / payment area right after
   Checkout loads, while it fetches live shipping rates via AJAX — this
   keeps that transient state from flashing white against the dark
   page instead of just dimming in place. */
.blockUI.blockOverlay {
	background-color: var(--idnty-black-soft) !important;
	opacity: 0.6 !important;
}

.payment_box a {
	color: var(--idnty-white) !important;
	text-decoration: underline;
}