/* ==========================================================================
   ReampZone -- modern theme layer
   Loaded after style.css. Purely visual; no template or markup changes.

   THE IDEA
   ReampZone sells metal and rock guitar tone, but the site reads as a light,
   corporate storefront. The dark hero is the only part of the page with any
   character -- and it is also the only place the brand yellow and cyan are
   allowed to be themselves, because on white they are unreadable.

   So: take the hero's palette and run it through the whole page. That gives
   the site the attitude the product has, AND it lets the real brand colours
   come back everywhere instead of the darkened variants light backgrounds
   force on us.

   Toggle: set RZ_MODERN_THEME to false in reampzone-enhancements.php.
   ========================================================================== */

:root {
	--rz-ink:        #0f1214;   /* page base, deepest    */
	--rz-surface:    #191f22;   /* cards, panels         */
	--rz-raised:     #222a2e;   /* hover / raised state  */
	--rz-line:       #2c3539;   /* hairlines             */
	--rz-nav-panel:  #171e21;   /* floating nav dropdowns, search field */

	--rz-text:       #e8ecee;   /* 14.4:1 on --rz-ink    */
	--rz-text-dim:   #9fadb4;   /* 6.9:1  on --rz-surface */

	/* style.css darkens the brand colours for use on light backgrounds. On a dark
	   page those variants become the problem instead of the fix (#007b91 on
	   #0f1214 is only 3.8:1). Redefining the two variables here flips every
	   usage in style.css at once, rather than re-specifying each selector. */
	--rz-yellow-ink: #ffd400;   /* 11.13:1 on --rz-ink */
	--rz-cyan-ink:   #00d8ff;   /*  9.31:1 on --rz-ink */

	/* On dark, the original brand colours are back in play:
	   yellow 11.13:1, cyan 9.31:1. No darkened substitutes needed. */
	--rz-glow-cyan:   0 0 0 1px rgba(0, 216, 255, .35), 0 12px 32px rgba(0, 216, 255, .12);
	--rz-glow-yellow: 0 0 0 1px rgba(255, 212, 0, .35), 0 12px 32px rgba(255, 212, 0, .12);

	--rz-ease: cubic-bezier(.2, .7, .3, 1);
}


/* --------------------------------------------------------------------------
   Page surfaces
   -------------------------------------------------------------------------- */

body { background-color: var(--rz-ink); color: var(--rz-text); }

/* The Unyson page builder writes `background-color` INLINE on every section
   (one of them is a hard `rgb(255,255,255)`), so a plain rule never wins.
   !important is the only thing that reaches an inline declaration.
   `background-image` is deliberately left alone -- the hero's wall texture is
   set the same way and is worth keeping. */
.fw-main-row.section {
	background-color: var(--rz-ink) !important;
	color: var(--rz-text);
}

/* Alternating near-blacks are too similar to separate sections on their own,
   so give each one a hairline instead. */
.fw-main-row.section + .fw-main-row.section { border-top: 1px solid var(--rz-line); }
.fw-main-row.section:nth-child(even) { background-color: #12171a !important; }

/* The hero keeps its wallpaper; a gradient scrim keeps the headline legible
   over it and blends the photo into the page. */
.fw-main-row.section.parallax-section:first-child { position: relative; }
.fw-main-row.section.parallax-section:first-child > * { position: relative; z-index: 1; }
.fw-main-row.section.parallax-section:first-child::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(1200px 420px at 50% -10%, rgba(0, 216, 255, .13), transparent 62%),
		radial-gradient(900px 340px at 82% 118%, rgba(255, 212, 0, .09), transparent 62%),
		linear-gradient(180deg, rgba(15, 18, 20, .72), rgba(15, 18, 20, .92));
}

.post-content,
.entry-content,
.sidebar,
.container { color: var(--rz-text); }

p, li, td, .entry-content { color: var(--rz-text-dim); }


/* --------------------------------------------------------------------------
   Headings -- bigger, tighter, with an accent rule
   The theme's section titles are 29.96px Montserrat centred over a thin grey
   line. Scaled up and tightened, they carry a lot more weight.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5 { color: var(--rz-text); letter-spacing: -.02em; }

.fw-special-title {
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
}

/* Brand colours restored to full strength -- they pass on this background. */
.fw-special-title span { color: var(--rz-cyan); }
h3.fw-testimonials-title { color: var(--rz-yellow); }
.fw-testimonials-author .author-name { color: var(--rz-yellow); }
.fw-testimonials-url a { color: var(--rz-cyan); }

/* Replace the thin grey divider with a short brand-coloured rule. */
.fw-heading .fw-divider,
.fw-heading hr,
.title-divider { display: none; }

.fw-heading { position: relative; padding-bottom: 20px; }
.fw-heading::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 56px;
	height: 4px;
	transform: translateX(-50%);
	border-radius: 2px;
	background: linear-gradient(90deg, var(--rz-yellow), var(--rz-cyan));
}

.fw-heading .fw-subtitle,
.fw-heading p { color: var(--rz-text-dim); }


/* --------------------------------------------------------------------------
   Hero
   214px for the main value proposition was the least prominent thing on the
   page. Give it room, depth and a subtle glow.
   -------------------------------------------------------------------------- */

.fw-main-row.section:first-child {
	position: relative;
	padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px);
	background:
		radial-gradient(1200px 400px at 50% -10%, rgba(0, 216, 255, .10), transparent 60%),
		radial-gradient(900px 320px at 80% 120%, rgba(255, 212, 0, .07), transparent 60%),
		var(--rz-ink);
	border-bottom: 1px solid var(--rz-line);
}

.search-title h1 {
	font-size: clamp(32px, 5vw, 60px);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.05;
}

.product-search-bottom .counter .countdown { color: var(--rz-cyan); font-weight: 700; }
.product-search-bottom .counter span { color: var(--rz-text-dim); }

/* Search. The visible box is the `.search-fields` wrapper (a flat #f4f6f5
   panel), not the input -- styling the input alone leaves the light box behind.

   Solid, not translucent. A `rgba(255,255,255,.07)` wash let the hero image
   read through the field, so the background shifted with whatever was behind
   it. `--rz-nav-panel` is the same flat colour as the nav dropdown panels, so
   the field reads as a solid control instead of an effect. */
.product-search .search-fields {
	background-color: var(--rz-nav-panel);
	background-image: none;
	border: 1px solid var(--rz-line);
	border-radius: 999px;
	overflow: hidden;
	padding: 4px 6px 4px 4px;
	transition: border-color .2s var(--rz-ease), box-shadow .2s var(--rz-ease);
}

.product-search .search-fields:focus-within {
	background-color: var(--rz-nav-panel);
	border-color: var(--rz-cyan);
	box-shadow: 0 0 0 4px rgba(0, 216, 255, .12);
}

.product-search .search-fields input[type="text"],
.product-search .search-fields input[type="search"] {
	background: transparent;
	border: 0;
	color: var(--rz-text);
	font-size: 16px;
	padding: 12px 18px;
	box-shadow: none;
}
.product-search .search-fields input:focus { outline: none; box-shadow: none; }
.product-search input::placeholder { color: #8b979d; opacity: 1; }

/* The submit control is a dark magnifier that vanishes on a dark field. */
.product-search .search-fields input[type="submit"],
.product-search .search-fields button {
	background: transparent;
	color: var(--rz-cyan);
	border: 0;
	padding: 0 16px;
}
.product-search .search-fields input[type="submit"]:hover,
.product-search .search-fields button:hover { color: var(--rz-yellow); transform: none; box-shadow: none; }


/* --------------------------------------------------------------------------
   Product cards -- the main event
   Currently a plain white box with a thin border and centred text. These get
   a real surface, an image that fills the top, and a lift on hover.
   -------------------------------------------------------------------------- */

.edd_download_inner {
	background: var(--rz-surface);
	border: 1px solid var(--rz-line);
	border-radius: 14px;
	overflow: hidden;
	transition: transform .28s var(--rz-ease), box-shadow .28s var(--rz-ease), border-color .28s var(--rz-ease);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.edd_download_inner:hover,
.edd_download_inner:focus-within {
	transform: translateY(-6px);
	border-color: rgba(0, 216, 255, .45);
	box-shadow: var(--rz-glow-cyan);
}

/* Image fills the top edge-to-edge and scales gently on hover. */
.edd_download_inner .thumb {
	overflow: hidden;
	background: #0b0e10;
	aspect-ratio: 16 / 10;
}

.edd_download_inner .thumb a { display: block; height: 100%; }

.edd_download_inner .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--rz-ease);
}

.edd_download_inner:hover .thumb img { transform: scale(1.06); }

.edd_download_inner .product-details {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.edd_download_inner .product-name a {
	color: var(--rz-text);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: -.01em;
	transition: color .18s var(--rz-ease);
}
.edd_download_inner:hover .product-name a { color: var(--rz-cyan); }

/* Price as a solid brand chip rather than loose text. */
.edd_download_inner .product-price { margin-top: auto; }

.edd_download_inner .product-price .edd_price,
.edd_download_inner .norm-price {
	display: inline-block;
	background: var(--rz-yellow);
	color: #14181a;
	font-weight: 800;
	font-size: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	letter-spacing: -.01em;
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn, .btn-primary,
.edd-add-to-cart, .edd_go_to_checkout,
input[type="submit"], button[type="submit"] {
	border-radius: 999px;
	font-weight: 800;
	letter-spacing: .01em;
	border: 0;
	padding: 13px 26px;
	transition: transform .18s var(--rz-ease), box-shadow .18s var(--rz-ease), background .18s var(--rz-ease);
}

.btn-primary,
.edd-add-to-cart,
input[type="submit"], button[type="submit"] {
	background: var(--rz-yellow);
	color: #14181a;
}

.btn-primary:hover, .btn-primary:focus,
.edd-add-to-cart:hover, .edd-add-to-cart:focus,
input[type="submit"]:hover, button[type="submit"]:hover {
	background: #ffdf3d;
	color: #14181a;
	transform: translateY(-2px);
	box-shadow: var(--rz-glow-yellow);
}

.edd_go_to_checkout { background: var(--rz-cyan); color: #0f1214; }
.edd_go_to_checkout:hover { background: #4ee4ff; color: #0f1214; transform: translateY(-2px); }


/* --------------------------------------------------------------------------
   Panels, sidebar, testimonials
   -------------------------------------------------------------------------- */

.cart-box,
.sidebar-item,
.lightbox .boxed,
.fw-testimonials-item {
	background: var(--rz-surface);
	border: 1px solid var(--rz-line);
	border-radius: 14px;
	color: var(--rz-text);
}

/* The product price panel was a solid cyan block; on a dark page a bordered
   surface with the price in brand cyan reads better and stays legible. */
.cart-box { background: linear-gradient(180deg, #1d262a, var(--rz-surface)); }
.cart-box .sw-price,
.cart-box .sw-price * { color: var(--rz-cyan); font-weight: 800; }

.fw-testimonials-content { color: var(--rz-text-dim); }

.fw-testimonials-pagination a {
	background: var(--rz-raised);
	border-radius: 8px;
	transition: background .18s var(--rz-ease);
}
.fw-testimonials-pagination a,
.fw-testimonials-pagination a * { color: var(--rz-text-dim); }
.fw-testimonials-pagination a.selected,
.fw-testimonials-pagination a.selected *,
.fw-testimonials-pagination a:hover,
.fw-testimonials-pagination a:hover * { color: #0f1214; }
.fw-testimonials-pagination a.selected,
.fw-testimonials-pagination a:hover { background: var(--rz-cyan); }


/* --------------------------------------------------------------------------
   Archive sort tabs
   -------------------------------------------------------------------------- */

.sidebar .sidebar-item .filter-by a {
	color: var(--rz-text-dim);
	border-radius: 999px;
	padding: 8px 16px;
	transition: background .18s var(--rz-ease), color .18s var(--rz-ease);
}
.sidebar .sidebar-item .filter-by a:hover { background: var(--rz-raised); color: var(--rz-text); }
.sidebar .sidebar-item .filter-by a.active,
.sidebar .sidebar-item .filter-by a.active:hover {
	background: var(--rz-cyan);
	color: #0f1214;
	font-weight: 800;
}


/* --------------------------------------------------------------------------
   Header, forms, tables, links
   -------------------------------------------------------------------------- */

.header-wrapper, .header-bg {
	background-color: rgba(15, 18, 20, .82);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--rz-line);
}

a { color: var(--rz-cyan); }
a:hover, a:focus { color: var(--rz-yellow); }

input, select, textarea {
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--rz-line);
	color: var(--rz-text);
	border-radius: 10px;
}
input:focus, select:focus, textarea:focus {
	border-color: var(--rz-cyan);
	box-shadow: 0 0 0 4px rgba(0, 216, 255, .12);
	outline: none;
}

table, th, td { border-color: var(--rz-line) !important; color: var(--rz-text-dim); }
th { color: var(--rz-text); }
hr { border-color: var(--rz-line); }


/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.edd_download_inner,
	.edd_download_inner .thumb img,
	.btn, .btn-primary { transition: none; }
	.edd_download_inner:hover { transform: none; }
	.edd_download_inner:hover .thumb img { transform: none; }
}


/* --------------------------------------------------------------------------
   Hardcoded light surfaces
   The theme paints a lot of inner containers white or near-white in its own
   stylesheet (product body, "You May Also Like", the audio player, the archive
   filter bar). Section-level rules never reach them, which leaves light text
   on a white box. This sweeps them onto the dark palette.
   -------------------------------------------------------------------------- */

/* NARROWED. This list originally painted a surface colour onto 22 selectors
   including .pagination, .page-numbers, .widget, .tab-content, .commentlist li
   and the audio player -- containers that are structural, not panels. The
   result was stray floating boxes behind lists and controls (visible on
   /account/downloads). Only genuine panels get a surface; everything else just
   needs its text and borders corrected for the dark background. */
.sidebar .sidebar-item {
	background-color: var(--rz-surface);
	border-color: var(--rz-line);
}

.post-content, .entry-content, .single-download-content,
.product-content, .download-content, .content-area,
.related-downloads, .you-may-also-like, .edd-related-downloads,
.audio-player, .wp-audio-shortcode,
.widget, .tab-content, .tab-pane,
.comment-body, .commentlist li,
.edd_downloads_list, .edd_download_columns_3, .archive-content {
	background-color: transparent;
	color: var(--rz-text-dim);
	border-color: var(--rz-line);
}

/* The archive's filter bar sits on #f4f6f5. */
.sidebar .sidebar-item .filter-by,
.filter-by { background-color: transparent; }

/* Headings inside those containers. */
.post-content h1, .post-content h2, .post-content h3, .post-content h4,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.related-downloads h2, .related-downloads h3 { color: var(--rz-text); }

/* The theme's dim subtitle is rgba(68,68,68,.6) -- invisible on dark. */
.fw-heading p, .fw-subtitle, .section-subtitle,
.fw-heading .fw-text, .fw-heading-inner p { color: var(--rz-text-dim) !important; }

/* Cart dropdown: style.css darkens it for a light page; on dark it needs to be
   a surface with light text, not a teal block. */
.dd-cart {
	background-color: var(--rz-surface) !important;
	border: 1px solid var(--rz-line);
	color: var(--rz-text) !important;
}
.dd-cart * { color: var(--rz-text) !important; }

/* Login / account panels. Text colour applies to every `.boxed`; the surface
   only to the lightbox -- see the note on the panel group below. */
.lightbox .boxed { background-color: var(--rz-surface) !important; }
.boxed, .boxed * { color: var(--rz-text); }
.boxed a { color: var(--rz-cyan); }
.lightbox-title { color: var(--rz-text) !important; }

/* Anything still declaring near-white inline. */
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background:#fff"],
[style*="background: #fff"] { background-color: var(--rz-surface) !important; }

/* Catch-all for the theme's dark-on-dark text once the surface flips. */
.post-content, .entry-content, .boxed, .sidebar-item { }
.post-content [style*="color:#1c2326"],
.post-content [style*="color: rgb(28, 35, 38)"],
[style*="color:#444"], [style*="color: #444"] { color: var(--rz-text-dim) !important; }


/* --------------------------------------------------------------------------
   Remaining light-theme leftovers, by exact selector
   Each of these was found by auditing computed styles on the rendered pages
   rather than guessing at class names.
   -------------------------------------------------------------------------- */

/* Section subtitles ship as rgba(68,68,68,.6) -- 1.85:1 on the dark page. */
.fw-special-subtitle { color: var(--rz-text-dim) !important; }

/* Testimonial cards paint their own white panel. */
.fw-testimonials-text,
.fw-testimonials-item {
	background-color: var(--rz-surface) !important;
	border: 1px solid var(--rz-line);
	border-radius: 14px;
}
.fw-testimonials-text p { color: var(--rz-text-dim); }

/* "You May Also Like" sits in an unclassed #f7f7f7 wrapper. */
.content-area > div { background-color: transparent; }
.content-area h3 { color: var(--rz-text); }

/* Sidebar section titles and standalone headings are charcoal, which is now
   dark-on-dark. */
.sidebar-title,
.sidebar-item .sidebar-title,
.post-content h6, .post-content h5,
.post-content .text-center { color: var(--rz-text) !important; }

/* style.css sets charcoal on the price for a light cyan panel; the modern
   layer turns that panel into a dark surface, so the price must go light.
   Over-qualified to beat `.cart-box .sw-price .edd_price` from style.css. */
.cart-box .sw-price,
.cart-box .sw-price .edd_price,
.cart-box .sw-price span.edd_price,
.cart-box div.sw-price * { color: var(--rz-cyan) !important; }

/* Slider pager numerals. */
.fw-testimonials-pagination a,
.fw-testimonials-pagination a * { color: var(--rz-text-dim) !important; }
.fw-testimonials-pagination a.selected,
.fw-testimonials-pagination a.selected *,
.fw-testimonials-pagination a:hover,
.fw-testimonials-pagination a:hover * { color: #0f1214 !important; }


/* --------------------------------------------------------------------------
   Final overrides
   These few carry !important because the theme sets them with either higher
   specificity or !important of its own. Kept to the end of the file and listed
   explicitly so it stays obvious what is being forced and why.
   -------------------------------------------------------------------------- */

/* Section headings still inheriting the light-theme charcoal. */
.fw-main-row.section h1,
.fw-main-row.section h2,
.fw-main-row.section h3,
.fw-main-row.section h4,
.fw-main-row.section h5,
.fw-main-row.section h6 { color: var(--rz-text) !important; }

/* ...but not the ones we deliberately brand-coloured. */
.fw-main-row.section .fw-special-title span { color: var(--rz-cyan) !important; }
.fw-main-row.section h3.fw-testimonials-title { color: var(--rz-yellow) !important; }

/* Testimonial pager: the theme paints these black / #ababab directly. */
.fw-testimonials-pagination a { background-color: var(--rz-raised) !important; }
.fw-testimonials-pagination a.selected,
.fw-testimonials-pagination a:hover { background-color: var(--rz-cyan) !important; }

/* Archive filter bar and the related-downloads wrapper keep their light panels. */
.sidebar .sidebar-item .filter-by,
.content-area > div,
.related-downloads,
.edd-related-downloads { background-color: transparent !important; }

/* The sort links paint their own #f4f6f5 chip, so the base state needs a
   background too -- not just the hover/active states. */
.sidebar .sidebar-item .filter-by a { background-color: var(--rz-raised) !important; }
.sidebar .sidebar-item .filter-by a.active,
.sidebar .sidebar-item .filter-by a:hover { background-color: var(--rz-cyan) !important; }
.sidebar .sidebar-item .filter-by a.active { color: #0f1214 !important; }

/* Structural wrappers the theme paints white. Found by scanning every rendered
   element for a light background rather than by guessing at class names --
   these carry no text of their own, so a contrast audit does not flag them,
   but they show through as white panels behind the dark content. */
.sidebar,
.paper,
.preview-area,
.content-wrapper,
.main-content { background-color: transparent !important; }

/* The product image sits in .preview-area; give it a real surface. */
.preview-area {
	background-color: #0b0e10 !important;
	border: 1px solid var(--rz-line);
	border-radius: 14px;
	overflow: hidden;
}


/* ==========================================================================
   ROUND 2 -- reported issues
   Scrollbars, EDD tables, "Pack Includes", download-history paging, and a
   partial gradient treatment across the new components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scrollbars
   Default light scrollbars cut straight through a dark page. Firefox uses the
   standard properties; Chromium and Safari need the -webkit pseudo-elements.
   -------------------------------------------------------------------------- */

html { scrollbar-color: #3a464b var(--rz-ink); scrollbar-width: thin; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--rz-ink); }
::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #3f4c52, #2f3a3f);
	border: 3px solid var(--rz-ink);
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #4c5c63, #3a474d); }
::-webkit-scrollbar-corner { background: var(--rz-ink); }


/* --------------------------------------------------------------------------
   EDD tables  (purchase history, order details, download history)
   Shipped as a cyan header bar with white text (1.71:1), alternating rows where
   one is pure white with pale grey text, and 1.7px #a9a9a9 borders on every
   single cell.
   -------------------------------------------------------------------------- */

.edd-table,
#edd_user_history,
table.edd-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
	border: 1px solid var(--rz-line);
	border-radius: 14px;
	overflow: hidden;
}

.edd-table th,
#edd_user_history th,
.edd-table thead td,
#edd_user_history thead td {
	background: linear-gradient(180deg, #263036, #1d262a) !important;
	color: var(--rz-text) !important;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--rz-line) !important;
}

.edd-table td,
#edd_user_history td {
	background: transparent !important;
	color: var(--rz-text-dim) !important;
	padding: 14px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
	vertical-align: middle;
}

/* Zebra striping that works on dark, replacing the white alternate row. */
.edd-table tbody tr:nth-child(odd) td,
#edd_user_history tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .022) !important; }

.edd-table tbody tr:hover td,
#edd_user_history tbody tr:hover td { background: rgba(0, 216, 255, .06) !important; }

.edd-table tbody tr:last-child td,
#edd_user_history tbody tr:last-child td { border-bottom: 0 !important; }

.edd-table a,
#edd_user_history a { color: var(--rz-cyan); font-weight: 600; }
.edd-table a:hover,
#edd_user_history a:hover { color: var(--rz-yellow); }

/* Narrow screens: let wide tables scroll rather than break the layout. */
.table-responsive { -webkit-overflow-scrolling: touch; border-radius: 14px; }


/* --------------------------------------------------------------------------
   "Pack Includes"
   A .details-table of <li> rows with no separators, no alignment and no visual
   difference between YES and NO -- the most useful spec block on a product page
   rendered as loose grey text.
   -------------------------------------------------------------------------- */

/* Actual markup is:
     <div class="details-table"><ul><li><span>Label</span><span class="right">YES</span></li></ul></div>
   The theme lays those out as display:table / table-row, so the selectors below
   are qualified enough to win and reset the display first. */
.sidebar-item .details-table,
.details-table { display: block; margin: 0; padding: 0; }

.sidebar-item .details-table ul,
.details-table ul { display: block; margin: 0; padding: 0; list-style: none; }

.sidebar-item .details-table ul li,
.details-table ul li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	font-size: 13px;
	color: var(--rz-text-dim);
	list-style: none;
}

.sidebar-item .details-table ul li:last-child,
.details-table ul li:last-child { border-bottom: 0; }

/* Label: plain text, no chip. */
.details-table ul li > span:first-child {
	background: none;
	padding: 0;
	color: var(--rz-text-dim);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
}

/* Value (`span.right`): a chip so YES/NO scans at a glance. */
.details-table ul li > span.right,
.details-table ul li > span:last-child {
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	color: var(--rz-text);
	white-space: nowrap;
	float: none;
}

/* Sidebar blocks need air between them and a proper title rule. */
.sidebar .sidebar-item { margin-bottom: 18px; padding: 18px; }

.sidebar .sidebar-title {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rz-text) !important;
	padding-bottom: 12px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--rz-line);
}


/* --------------------------------------------------------------------------
   Download-history pagination
   EDD always prints #edd_download_history_pagination, even when there is only
   one page, leaving a stray empty block. Hide it empty, style it when used.
   -------------------------------------------------------------------------- */

.edd_pagination:empty,
#edd_download_history_pagination:empty { display: none; }

.edd_pagination,
.edd_pagination.navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 28px 0 0;
}

.edd_pagination a,
.edd_pagination span,
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1px solid var(--rz-line);
	background: linear-gradient(180deg, var(--rz-raised), var(--rz-surface));
	color: var(--rz-text-dim);
	font-weight: 700;
	text-decoration: none;
	transition: border-color .18s var(--rz-ease), color .18s var(--rz-ease), transform .18s var(--rz-ease);
}

.edd_pagination a:hover,
.page-numbers:hover {
	color: var(--rz-text);
	border-color: rgba(0, 216, 255, .45);
	transform: translateY(-1px);
}

.edd_pagination .current,
.page-numbers.current {
	background: var(--rz-cyan);
	border-color: var(--rz-cyan);
	color: #0f1214;
}


/* --------------------------------------------------------------------------
   Partial gradients
   The site already has a leather wallpaper; these are low-contrast gradients on
   the NEW components so they pick up the same lit-from-above feel instead of
   reading as flat blocks.
   -------------------------------------------------------------------------- */

/* As with the buttons: colour and image set separately so every panel keeps a
   solid background if the gradient does not paint. */
.edd_download_inner {
	background-color: var(--rz-surface);
	background-image: linear-gradient(180deg, #1e262a 0%, var(--rz-surface) 55%, #161c1f 100%);
}

/* `.boxed` is NOT a card -- it is Olam's generic wrapper. It is used for the
   login/signup lightbox AND for whole content regions: on /account/ it wraps
   the entire page body, measured 716x1763px. Painting it as a panel put a
   surface-coloured slab behind all that content. Only the lightbox (the one
   inside `.lightbox`) is a floating modal that needs its own background.

   `.panel` and `.well` are dropped from this group: they are Bootstrap
   generics that match nothing on this site, so they could only ever paint an
   unintended slab somewhere. */
.sidebar .sidebar-item,
.lightbox .boxed,
.fw-testimonials-item {
	background-color: var(--rz-surface) !important;
	background-image: linear-gradient(180deg, #1e262a, var(--rz-surface)) !important;
}

/* Content-region wrappers stay transparent so the page background shows. */
.boxed:not(.lightbox .boxed) {
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* A one-pixel highlight along the top edge reads as a light source and stops
   the panels looking like flat rectangles. */
.edd_download_inner,
.sidebar .sidebar-item,
.lightbox .boxed,
.fw-testimonials-item { position: relative; }

.edd_download_inner::before,
.sidebar .sidebar-item::before,
.lightbox .boxed::before,
.fw-testimonials-item::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
	pointer-events: none;
	z-index: 2;
}

/* Buttons pick up the same vertical gradient.
   `background-color` and `background-image` are set separately rather than via
   the `background` shorthand: the shorthand resets background-color to
   transparent, which leaves the button with no solid fallback if the gradient
   does not paint (forced-colors mode, print, an old renderer) -- and a yellow
   button with a transparent background is charcoal text on a dark page. */
.btn-primary,
.edd-add-to-cart,
input[type="submit"], button[type="submit"] {
	background-color: var(--rz-yellow);
	background-image: linear-gradient(180deg, #ffdc33, var(--rz-yellow));
}
.btn-primary:hover,
.edd-add-to-cart:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
	background-color: #ffd400;
	background-image: linear-gradient(180deg, #ffe66b, #ffd400);
}

.edd_go_to_checkout {
	background-color: var(--rz-cyan);
	background-image: linear-gradient(180deg, #33e1ff, var(--rz-cyan));
}
.edd_go_to_checkout:hover {
	background-color: #00d8ff;
	background-image: linear-gradient(180deg, #6aeaff, #00d8ff);
}

.cart-box { background-color: var(--rz-surface) !important; background-image: linear-gradient(180deg, #1f292e, var(--rz-surface)) !important; }


/* ==========================================================================
   ROUND 3 -- reported issues
   The stray white borders, the Pack Includes layout, and a textured gradient
   for the page background.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The white border
   `.paper` and `.sidebar` carry `1px solid #dddddd` from the theme. Earlier
   rounds set their background to transparent but never touched the border, so
   a light rectangle stayed drawn around the product image and the sidebar.
   -------------------------------------------------------------------------- */

.paper,
.sidebar,
.content-area,
.post-content,
.entry-content {
	border-color: transparent !important;
	box-shadow: none;
}


/* --------------------------------------------------------------------------
   "Pack Includes" layout
   The theme gives span.right a percentage width and display:block, so as a flex
   item the YES/NO chip was stretching to 81px. That squeezed the label into
   78px and wrapped "Direct Profiles" onto two lines, making every row 62px tall.
   -------------------------------------------------------------------------- */

.details-table ul li {
	padding: 9px 0;
	gap: 10px;
	align-items: center;
}

/* Label takes the free space and is allowed to shrink properly. */
.details-table ul li > span:first-child {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	text-align: left;
	line-height: 1.3;
}

/* Chip sizes to its content instead of a percentage width. */
.details-table ul li > span.right,
.details-table ul li > span:last-child {
	flex: 0 0 auto;
	width: auto !important;
	min-width: 0;
	display: inline-block;
	text-align: center;
	line-height: 1.4;
	padding: 3px 12px;
}


/* --------------------------------------------------------------------------
   Cart box
   The purchase form carries a 20px bottom margin inside an already padded box,
   leaving dead space under the Add to Cart button.
   -------------------------------------------------------------------------- */

.cart-box { padding: 18px !important; }
.cart-box .sw-price { margin-bottom: 6px !important; }
.cart-box .edd_download_purchase_form { margin-bottom: 0 !important; }
.cart-box > *:last-child { margin-bottom: 0 !important; }


/* --------------------------------------------------------------------------
   Background texture
   A flat near-black reads as empty. This adds a very low-contrast diagonal
   weave plus two brand-tinted pools of light, so the page has depth without
   competing with the product photography.

   Applied to a fixed pseudo-element on <body> rather than to the sections:
   it stays put while the page scrolls, which stops the pattern from visibly
   tiling, and it sits behind everything at z-index -1.
   -------------------------------------------------------------------------- */

body { position: relative; background-color: var(--rz-ink); }

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--rz-ink);
	background-image:
		/* pools of brand light */
		radial-gradient(900px 600px at 12% 8%,  rgba(0, 216, 255, .055), transparent 60%),
		radial-gradient(800px 520px at 88% 92%, rgba(255, 212, 0, .045), transparent 60%),
		/* fine diagonal weave */
		repeating-linear-gradient(135deg,
			rgba(255, 255, 255, .014) 0px,
			rgba(255, 255, 255, .014) 1px,
			transparent 1px,
			transparent 7px),
		/* base vertical falloff */
		linear-gradient(180deg, #131a1d 0%, var(--rz-ink) 55%, #0c0f11 100%);
}

/* Let the texture show through: sections become translucent rather than solid,
   except the hero, which keeps its own wallpaper. */
.fw-main-row.section { background-color: transparent !important; }
.fw-main-row.section:nth-child(even) { background-color: rgba(255, 255, 255, .015) !important; }
.fw-main-row.section.parallax-section:first-child { background-color: var(--rz-ink) !important; }

/* Panels stay opaque so text keeps a solid surface behind it. */
.edd_download_inner,
.sidebar .sidebar-item,
.boxed,
.cart-box,
.fw-testimonials-item { backdrop-filter: none; }


/* --------------------------------------------------------------------------
   Remaining light borders
   Found by scanning every element over 15,000px2 for a border colour lighter
   than 30% luminance, rather than by eye.
   -------------------------------------------------------------------------- */

.gal-item,                 /* homepage gallery tiles -- #dddddd */
.fw-testimonials-text,     /* testimonial body       -- #dadada */
.fw-testimonials-item,
.thumb,
.product-image,
.widget,
.tab-content {
	border-color: var(--rz-line) !important;
}

/* --------------------------------------------------------------------------
   Download history uses <th> for the first cell of every BODY row, not just the
   header. Scoping the header treatment to thead stops those data cells being
   rendered as uppercase, letter-spaced header chrome.
   -------------------------------------------------------------------------- */

#edd_user_history tbody th,
.edd-table tbody th {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--rz-text-dim) !important;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	padding: 14px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
}

#edd_user_history tbody tr:nth-child(odd) th,
.edd-table tbody tr:nth-child(odd) th { background-color: rgba(255, 255, 255, .022) !important; }

#edd_user_history tbody tr:hover th,
.edd-table tbody tr:hover th { background-color: rgba(0, 216, 255, .06) !important; }

#edd_user_history tbody tr:last-child th,
.edd-table tbody tr:last-child th { border-bottom: 0 !important; }


/* ==========================================================================
   ROUND 4 -- product image, navigation, footer image, audio player
   ========================================================================== */

/* --------------------------------------------------------------------------
   Product image
   The image is 820x480 rendered at its native 820x480 inside an 868px panel,
   so it never fills the container -- that mismatch is the "width is off". It
   also has border-radius 0 sitting inside a 14px-rounded panel, leaving square
   corners poking into rounded ones.
   -------------------------------------------------------------------------- */

.preview-area {
	padding: 0;
	line-height: 0;            /* kills the inline-image descender gap */
}

/* Scoped to the two hero containers only.
 *
 * `.single-download .thumb img` used to be listed here as well, on the
 * assumption it was another wrapper for the hero. It is not: `.single-download`
 * is a BODY class, so it matched every `.thumb img` on the page -- and measured
 * on a live product page it matched the three "You May Also Like" card images
 * and *zero* hero images, which the `.preview-area` selector already covers.
 *
 * The visible symptom was a radius bug. Those cards sit flush at the top of a
 * 14px-rounded, overflow-hidden card with the title block directly beneath, so
 * a 13px radius on all four corners left the image's bottom-left and
 * bottom-right corners cutting into the card and exposing the darker `.thumb`
 * background (#0b0e10) against the card surface (#191f22). The card's own
 * radius already shapes the top two corners, so these images want none. */
.preview-area img,
.product-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 60vh;          /* stop a tall image dominating the page */
	object-fit: cover;
	object-position: center;
	/* `inherit` takes the radius from the DIRECT parent, which here is a slider
	   wrapper with square corners -- not the rounded .preview-area. Set it. */
	border-radius: 13px;
}

/* The gallery slider inside the panel needs the same treatment. */
.preview-area .gal-item,
.preview-area .slider-item { border-radius: inherit; overflow: hidden; }


/* --------------------------------------------------------------------------
   Navigation
   Flat text links with no spacing, no hover feedback and an unstyled dropdown.
   -------------------------------------------------------------------------- */

.shop-nav > li > a,
.header-wrap nav > ul > li > a {
	position: relative;
	padding: 10px 16px;
	border-radius: 8px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--rz-text);
	transition: color .18s var(--rz-ease), background .18s var(--rz-ease);
}

.shop-nav > li > a:hover,
.shop-nav > li > a:focus,
.header-wrap nav > ul > li > a:hover { color: var(--rz-cyan); background: rgba(255, 255, 255, .05); }

/* Current section gets a brand underline rather than nothing at all. */
.shop-nav > li.current-menu-item > a,
.shop-nav > li.current-menu-parent > a,
.shop-nav > li.current_page_item > a { color: var(--rz-cyan); }

.shop-nav > li.current-menu-item > a::after,
.shop-nav > li.current-menu-parent > a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--rz-yellow), var(--rz-cyan));
}

/* Dropdown panels. */
.shop-nav .sub-menu,
.shop-nav .mega-menu,
.header-wrap nav ul ul {
	background-color: var(--rz-surface);
	background-image: linear-gradient(180deg, #1e262a, var(--rz-surface));
	border: 1px solid var(--rz-line);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
	padding: 8px;
	overflow: hidden;
}

.shop-nav .sub-menu li a,
.header-wrap nav ul ul li a {
	border-radius: 8px;
	padding: 9px 12px;
	color: var(--rz-text-dim);
	transition: background .16s var(--rz-ease), color .16s var(--rz-ease);
}
.shop-nav .sub-menu li a:hover,
.header-wrap nav ul ul li a:hover { background: rgba(255, 255, 255, .06); color: var(--rz-cyan); }

/* The LOGIN / LOGOUT button reads as a nav link; make it a real button. */
.shop-nav .login-button,
.shop-nav a.login-trigger {
	border: 1px solid var(--rz-line);
	border-radius: 999px;
	padding: 9px 20px;
}
.shop-nav .login-button:hover,
.shop-nav a.login-trigger:hover { border-color: var(--rz-cyan); color: var(--rz-cyan); background: transparent; }

/* Cart count as a brand chip. */
.cart-widget .cart-count,
.shop-nav .cart-total { color: var(--rz-yellow); font-weight: 800; }


/* --------------------------------------------------------------------------
   Footer image
   The theme only ever set background-image, with no size or position, so a
   1672x941 photo tiled at native size and only part of it was ever visible.
   -------------------------------------------------------------------------- */

#footer {
	position: relative;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-attachment: scroll !important;
}

/* Scrim so the footer text stays readable over the photo, and so the image
   blends into the page rather than starting abruptly. */
#footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* The footer photo averages 43/255 luminance -- it is already dark, so a heavy
	   scrim just hides it. Measured: even at 50% the footer text holds 5.02:1.
	   Kept denser at the very top (to blend out of the page) and toward the
	   bottom (where the copyright sits), lighter through the middle so the
	   leather texture actually reads. */
	background:
		linear-gradient(180deg,
			var(--rz-ink) 0%,
			rgba(15, 18, 20, .55) 22%,
			rgba(15, 18, 20, .62) 62%,
			rgba(15, 18, 20, .76) 100%);
}

/* Measured against the actual image: median contrast behind the footer is a
   healthy 5.53:1, but the lightning highlights drop it to 1.34:1 in the worst
   spot, and text occupies 19%-81% of the footer height -- so there is no
   image-only band to hide in.
   Rather than crushing the artwork with a heavier scrim, the content sits on
   its own blurred plate. The blur averages out the bright peaks (the image
   mean is 43/255) so contrast holds, while the artwork stays fully visible
   around and through it. */
#footer .container {
	position: relative;
	z-index: 1;
	padding: 26px 22px;
	border-radius: 16px;
	background: rgba(13, 16, 18, .72);
	backdrop-filter: blur(7px) saturate(115%);
	-webkit-backdrop-filter: blur(7px) saturate(115%);
	border: 1px solid rgba(255, 255, 255, .06);
}

/* Slightly brighter footer text for extra margin over the artwork. */
#footer,
#footer .footer-text,
#footer .textwidget,
#footer p { color: #a9b6bc; }

#footer .footer-text,
#footer .menu li a,
#footer .textwidget,
#footer p { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* Browsers without backdrop-filter get a denser plate instead of a blur. */
@supports not (backdrop-filter: blur(4px)) {
	#footer .container { background: rgba(13, 16, 18, .88); }
}

#footer > *,
#footer .container { position: relative; z-index: 1; }

/* The theme's own overlay is now redundant. */
#footer .dark-overlay { display: none; }


/* --------------------------------------------------------------------------
   Audio player
   MediaElement.js ships a light-grey skin that sits badly on a dark page.
   -------------------------------------------------------------------------- */

.mejs-container,
.mejs-container .mejs-controls,
.wp-audio-shortcode {
	background: var(--rz-raised) !important;
	border: 1px solid var(--rz-line);
	border-radius: 999px;
	overflow: hidden;
}

.mejs-container .mejs-controls { border: 0; }

.mejs-controls .mejs-time,
.mejs-controls .mejs-time span { color: var(--rz-text-dim) !important; font-size: 12px; }

.mejs-controls .mejs-time-rail .mejs-time-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	background: rgba(255, 255, 255, .12) !important;
	border-radius: 999px;
}

.mejs-controls .mejs-time-rail .mejs-time-loaded { background: rgba(255, 255, 255, .18) !important; border-radius: 999px; }

.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	background: var(--rz-cyan) !important;
	border-radius: 999px;
}

.mejs-controls .mejs-time-rail .mejs-time-handle-content { border-color: var(--rz-cyan); }

.mejs-controls .mejs-button > button { opacity: .85; }
.mejs-controls .mejs-button > button:hover { opacity: 1; }


/* ==========================================================================
   ROUND 5 -- reported issues
   Nav dropdown, pagination, product-image gap, cart-box double panel,
   footer plate, hero background.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Nav dropdown
   The panel and its links turn bright cyan with white text on hover (1.71:1).
   The rule is not in style.css or the generated color.css.php, so rather than
   keep hunting for the source these are forced -- whatever sets it, this wins.
   -------------------------------------------------------------------------- */

.shop-nav .sub-menu,
.shop-nav .mega-menu,
.shop-nav li:hover > .sub-menu,
.shop-nav li:hover > .mega-menu,
.header-wrap nav ul ul,
#header #nav ul li .sub-menu,
#header #nav ul li .mega-menu {
	background-color: #171e21 !important;
	background-image: linear-gradient(180deg, #1d2529, #171e21) !important;
	border: 1px solid var(--rz-line) !important;
	border-radius: 12px !important;
	box-shadow: 0 20px 44px rgba(0, 0, 0, .55) !important;
	padding: 8px !important;
	overflow: hidden;
}

.shop-nav .sub-menu li,
.shop-nav .mega-menu li,
#header #nav ul li .sub-menu li { background: transparent !important; border: 0 !important; }

.shop-nav .sub-menu li a,
.shop-nav .mega-menu li a,
.header-wrap nav ul ul li a,
#header #nav ul li .sub-menu li a {
	background: transparent !important;
	color: var(--rz-text-dim) !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-weight: 600;
	transition: background .16s var(--rz-ease), color .16s var(--rz-ease), padding-left .16s var(--rz-ease);
}

.shop-nav .sub-menu li a:hover,
.shop-nav .sub-menu li a:focus,
.shop-nav .mega-menu li a:hover,
.header-wrap nav ul ul li a:hover,
#header #nav ul li .sub-menu li a:hover {
	background: rgba(0, 216, 255, .10) !important;
	color: var(--rz-cyan) !important;
	padding-left: 18px !important;
}

/* Top-level item must not go cyan-on-cyan either. */
.shop-nav > li:hover > a,
.shop-nav > li.hover > a,
#header #nav > ul > li:hover > a {
	background-color: rgba(255, 255, 255, .06) !important;
	color: var(--rz-cyan) !important;
}

/* A little life in the nav: dropdowns ease in rather than snap. */
.shop-nav .sub-menu { transform-origin: top center; }
@media (prefers-reduced-motion: no-preference) {
	.shop-nav li > .sub-menu { animation: rzDrop .18s var(--rz-ease) both; }
	@keyframes rzDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}


/* --------------------------------------------------------------------------
   2. Pagination
   The archive uses Bootstrap markup -- .pagination > ul > li > a -- not the
   .edd_pagination / .page-numbers structure styled earlier, so it kept the
   framework default: white boxes with grey borders on a light bar.
   -------------------------------------------------------------------------- */

.pagination,
.pagination .pagination {
	display: flex;
	justify-content: center;
	background: transparent !important;
	border: 0 !important;
	margin: 32px 0 0;
	padding: 0;
}

.pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* The theme emits an empty <li> as a "previous" placeholder on page 1. */
.pagination ul li:empty { display: none; }

.pagination ul li { background: transparent !important; border: 0 !important; }

.pagination ul li a,
.pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: 10px !important;
	border: 1px solid var(--rz-line) !important;
	background-color: var(--rz-surface) !important;
	background-image: linear-gradient(180deg, var(--rz-raised), var(--rz-surface)) !important;
	color: var(--rz-text-dim) !important;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .18s var(--rz-ease), color .18s var(--rz-ease), transform .18s var(--rz-ease);
}

.pagination ul li a:hover,
.pagination ul li a:focus {
	color: var(--rz-text) !important;
	border-color: rgba(0, 216, 255, .5) !important;
	transform: translateY(-1px);
}

.pagination ul li.active a,
.pagination ul li.active span,
.pagination ul li.current a {
	background-color: var(--rz-cyan) !important;
	background-image: none !important;
	border-color: var(--rz-cyan) !important;
	color: #0f1214 !important;
}


/* --------------------------------------------------------------------------
   3. Product image -- the black strip underneath
   `.preview-options` renders empty but carries margin-bottom:15px, which shows
   as a black band inside the rounded panel below the photo.
   -------------------------------------------------------------------------- */

/* `:empty` does not match here -- the div contains a whitespace text node, so
   it is not empty by the CSS definition. Zero the margin unconditionally; the
   element has no height of its own either way. */
.preview-area .preview-options { margin: 0 !important; padding: 0 !important; }
.preview-area .preview-image { margin-bottom: 0 !important; }
.preview-area { line-height: 0; font-size: 0; }
.preview-area > * { line-height: normal; font-size: 1rem; }


/* --------------------------------------------------------------------------
   4. Cart box -- the "extra bulbous part"
   .cart-box is a styled panel sitting inside .sidebar-item, which is ALSO a
   styled panel (bg, 1px border, 14px radius, 18px padding). Two nested rounded
   boxes, the outer one poking out below. Strip the outer one where it wraps a
   cart box or a features widget that already provides its own surface.
   -------------------------------------------------------------------------- */

.sidebar-item:has(> .cart-box) {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
.sidebar-item:has(> .cart-box)::before { display: none; }

/* Fallback for browsers without :has() -- the cart box is always first. */
.sidebar .sidebar-item:first-child {
	background: none;
	border: 0;
	padding: 0;
}
.sidebar .sidebar-item:first-child::before { display: none; }
.sidebar .sidebar-item:first-child .cart-box { margin: 0; }


/* --------------------------------------------------------------------------
   5. Footer -- show more of the artwork
   The content plate was full container width and fairly opaque. Narrowed and
   lightened so the skull artwork reads either side, with the blur still doing
   the contrast work.
   -------------------------------------------------------------------------- */

#footer .container {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 26px;
	background: rgba(13, 16, 18, .55);
	backdrop-filter: blur(10px) saturate(120%);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	border-radius: 18px;
}

@supports not (backdrop-filter: blur(4px)) {
	#footer .container { background: rgba(13, 16, 18, .84); }
}

/* Less scrim over the photo itself now the plate carries the contrast. */
#footer::before {
	background: linear-gradient(180deg,
		var(--rz-ink) 0%,
		rgba(15, 18, 20, .34) 20%,
		rgba(15, 18, 20, .40) 65%,
		rgba(15, 18, 20, .58) 100%) !important;
}

#footer { padding: 56px 0 48px; }


/* --------------------------------------------------------------------------
   6. Hero background
   The stock brick-wall photo is generic and fights the product imagery. This
   replaces it with a built background: a deep vertical base, brand-coloured
   light pools, and a fine speaker-grille weave that suits amp gear.

   To use a photo instead, drop `hero.webp` into wp-content/uploads/branding/
   and it takes over automatically (see reampzone-enhancements.php).
   -------------------------------------------------------------------------- */

.fw-main-row.section.parallax-section:first-child { background-image: none !important; }

.fw-main-row.section.parallax-section:first-child::before {
	background:
		/* brand light pools */
		radial-gradient(1100px 460px at 18% -10%, rgba(0, 216, 255, .16), transparent 62%),
		radial-gradient(900px 420px at 84% 110%, rgba(255, 212, 0, .12), transparent 62%),
		/* speaker-grille weave */
		repeating-linear-gradient(45deg,
			rgba(255, 255, 255, .022) 0px,
			rgba(255, 255, 255, .022) 1px,
			transparent 1px,
			transparent 5px),
		repeating-linear-gradient(-45deg,
			rgba(255, 255, 255, .022) 0px,
			rgba(255, 255, 255, .022) 1px,
			transparent 1px,
			transparent 5px),
		/* base */
		linear-gradient(180deg, #10171a 0%, #0d1113 60%, var(--rz-ink) 100%) !important;
}

/* When a hero image IS supplied, the theme sets it inline; let it through. */
.fw-main-row.section.parallax-section.rz-has-hero:first-child { background-image: var(--rz-hero) !important; background-size: cover; background-position: center; }
.fw-main-row.section.parallax-section.rz-has-hero:first-child::before {
	background: linear-gradient(180deg, rgba(15,18,20,.55), rgba(15,18,20,.82)) !important;
}


/* --------------------------------------------------------------------------
   Add to Cart button overflow
   The button label includes the price ("$15.00 - ADD TO CART"); with the wider
   pill padding that overruns the 270px sidebar and clips. Let it wrap to the
   button width instead of overflowing.
   -------------------------------------------------------------------------- */

.cart-box .edd-add-to-cart,
.cart-box .edd_go_to_checkout,
.sidebar .edd-add-to-cart,
.sidebar .edd_go_to_checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	padding: 13px 16px;
	font-size: 13px;
	line-height: 1.2;
	text-align: center;
	white-space: normal;
	box-sizing: border-box;
}

.cart-box .edd-add-to-cart .edd-add-to-cart-label,
.cart-box .edd_go_to_checkout .edd-add-to-cart-label { white-space: normal; }

/* The purchase form wrapper must not constrain it. */
.cart-box .edd_purchase_submit_wrapper { width: 100%; }
.cart-box .edd_purchase_submit_wrapper a { width: 100%; }


/* ==========================================================================
   ROUND 6 -- nav selectors, checkout, duplicate divider
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Duplicate horizontal rule
   The theme's divider is `.fw-special-subtitle::after` -- a 160x1px #cfcfcf bar
   drawn as a PSEUDO-ELEMENT, which is why hiding `.fw-divider`, `hr` and
   `.title-divider` never touched it. Two rules were showing under every
   section heading.
   -------------------------------------------------------------------------- */

.fw-special-subtitle::after,
.fw-special-title::after,
.fw-heading .fw-special-subtitle::after { display: none !important; content: none !important; }

/* The remaining brand rule, longer as requested. */
.fw-heading::after { width: 120px; height: 4px; }


/* --------------------------------------------------------------------------
   2. Navigation -- CORRECT SELECTORS
   The menu is `nav > .menu-main-container > ul.menu`, NOT `.shop-nav`. Every
   earlier nav rule targeted `.shop-nav` and matched nothing, which is why the
   dropdown stayed bright cyan.
   -------------------------------------------------------------------------- */

.header-wrap ul.menu,
.menu-main-container > ul.menu {
	display: flex;
	align-items: center;
	gap: 6px;                       /* universal spacing between items */
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-wrap ul.menu > li,
.menu-main-container > ul.menu > li { margin: 0 !important; padding: 0 !important; }

.header-wrap ul.menu > li > a,
.menu-main-container > ul.menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px !important;
	margin: 0 !important;
	border-radius: 8px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--rz-text) !important;
	background: transparent !important;
	transition: color .18s var(--rz-ease), background .18s var(--rz-ease);
}

.header-wrap ul.menu > li > a:hover,
.header-wrap ul.menu > li:hover > a,
.header-wrap ul.menu > li.hover > a,
.menu-main-container > ul.menu > li:hover > a {
	color: var(--rz-cyan) !important;
	background: rgba(255, 255, 255, .06) !important;
}

/* Dropdown panels -- forced, since the cyan rule's source is not in either
   stylesheet the browser exposes. */
ul.menu .sub-menu,
ul.menu li:hover > .sub-menu,
ul.menu .mega-menu,
.header-wrap ul.menu ul {
	background-color: #171e21 !important;
	background-image: linear-gradient(180deg, #1d2529, #171e21) !important;
	border: 1px solid var(--rz-line) !important;
	border-radius: 12px !important;
	box-shadow: 0 20px 44px rgba(0, 0, 0, .55) !important;
	padding: 8px !important;
	gap: 0;
	display: block;
}

ul.menu .sub-menu li,
.header-wrap ul.menu ul li {
	background: transparent !important;
	border: 0 !important;
	margin: 0 !important;
	width: 100%;
}

ul.menu .sub-menu li a,
ul.menu li:hover > .sub-menu li a,
.header-wrap ul.menu ul li a {
	display: block !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--rz-text-dim) !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	margin: 0 !important;
	font-weight: 600;
	letter-spacing: 0;
	white-space: nowrap;
	transition: background .16s var(--rz-ease), color .16s var(--rz-ease), padding-left .16s var(--rz-ease);
}

ul.menu .sub-menu li a:hover,
ul.menu .sub-menu li a:focus,
ul.menu .sub-menu li:hover > a,
.header-wrap ul.menu ul li a:hover {
	background: rgba(0, 216, 255, .10) !important;
	color: var(--rz-cyan) !important;
	padding-left: 18px !important;
}

/* Login / logout pill and the cart button share the nav's spacing. */
.header-wrap .login-button,
.header-wrap a.login-trigger {
	border: 1px solid var(--rz-line);
	border-radius: 999px;
	padding: 9px 20px !important;
}
.header-wrap .login-button:hover,
.header-wrap a.login-trigger:hover { border-color: var(--rz-cyan); color: var(--rz-cyan) !important; }

/* The cart toggle was a solid cyan block with white text (1.71:1). */
.cart-widget > a,
.header-wrap .cart-widget a.cart-trigger,
li.cart-widget > a {
	background: transparent !important;
	color: var(--rz-text) !important;
	border: 1px solid var(--rz-line);
	border-radius: 999px;
	padding: 9px 18px !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cart-widget > a:hover { border-color: var(--rz-cyan); color: var(--rz-cyan) !important; }


/* --------------------------------------------------------------------------
   3. Checkout
   The cart is `table#edd_checkout_cart.ajaxed`, not `.edd-table`, so none of
   the earlier table work reached it: cyan header row, pure-white body cells,
   white buttons. The earlier audits all ran with an EMPTY cart, so none of
   this markup existed to be checked.
   -------------------------------------------------------------------------- */

#edd_checkout_cart {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent !important;
	border: 1px solid var(--rz-line);
	border-radius: 14px;
	overflow: hidden;
}

#edd_checkout_cart thead th,
#edd_checkout_cart thead td,
#edd_checkout_cart .edd_cart_header_row th {
	background-color: #1d262a !important;
	background-image: linear-gradient(180deg, #263036, #1d262a) !important;
	color: var(--rz-text) !important;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--rz-line) !important;
}

#edd_checkout_cart td,
#edd_checkout_cart th,
#edd_checkout_cart .edd_cart_item_name,
#edd_checkout_cart .edd_cart_item_price,
#edd_checkout_cart .edd_cart_actions,
#edd_checkout_cart .edd_cart_total,
#edd_checkout_cart .edd_cart_footer_row td,
#edd_checkout_cart .edd_cart_discount_row td {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--rz-text-dim) !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
	padding: 14px 16px !important;
	vertical-align: middle;
}

#edd_checkout_cart tbody tr:nth-child(odd) td { background-color: rgba(255, 255, 255, .022) !important; }
#edd_checkout_cart tbody tr:hover td { background-color: rgba(0, 216, 255, .05) !important; }

#edd_checkout_cart .edd_cart_item_name a { color: var(--rz-text) !important; font-weight: 600; }
#edd_checkout_cart .edd_cart_item_name a:hover { color: var(--rz-cyan) !important; }
#edd_checkout_cart .edd_cart_item_name img { border-radius: 8px; }

#edd_checkout_cart .edd_cart_total,
#edd_checkout_cart .edd_cart_footer_row {
	background-color: rgba(255, 255, 255, .035) !important;
	color: var(--rz-text) !important;
	font-weight: 800;
}
#edd_checkout_cart .edd_cart_total .edd_cart_amount { color: var(--rz-cyan) !important; font-size: 20px; }

#edd_checkout_cart .edd_cart_remove_item_btn,
#edd_checkout_cart a.edd_cart_remove_item_btn { color: var(--rz-text-dim) !important; }
#edd_checkout_cart .edd_cart_remove_item_btn:hover { color: #ff6b6b !important; }

/* Checkout fieldsets rendered as a solid cyan block. */
#edd_checkout_form_wrap fieldset,
#edd_checkout_user_info,
#edd_cc_fields,
#edd_cc_address,
#edd_purchase_submit,
#edd_final_total_wrap,
#edd_discount_code {
	background-color: var(--rz-surface) !important;
	background-image: linear-gradient(180deg, #1e262a, var(--rz-surface)) !important;
	border: 1px solid var(--rz-line) !important;
	border-radius: 14px !important;
	padding: 20px !important;
	margin-bottom: 18px;
	color: var(--rz-text) !important;
}

#edd_checkout_form_wrap legend,
#edd_checkout_form_wrap fieldset span.edd-description,
#edd_checkout_form_wrap label {
	color: var(--rz-text) !important;
	font-weight: 700;
	border: 0 !important;
}
#edd_checkout_form_wrap span.edd-description { color: var(--rz-text-dim) !important; font-weight: 400; }

#edd_checkout_form_wrap input[type="text"],
#edd_checkout_form_wrap input[type="email"],
#edd_checkout_form_wrap input[type="password"],
#edd_checkout_form_wrap input[type="tel"],
#edd_checkout_form_wrap select,
#edd_checkout_form_wrap textarea {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid var(--rz-line) !important;
	color: var(--rz-text) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	width: 100%;
	box-sizing: border-box;
}

#edd_final_total_wrap { font-size: 16px; }
#edd_final_total_wrap .edd_cart_amount { color: var(--rz-cyan) !important; font-weight: 800; }

/* Save Cart / Update Cart / Apply Discount and the purchase button. */
.edd_cart_actions input[type="submit"],
#edd-save-cart-button,
.edd-submit.button,
input.edd-submit,
#edd_purchase_submit input[type="submit"],
#edd-purchase-button {
	background-color: var(--rz-yellow) !important;
	background-image: linear-gradient(180deg, #ffdc33, var(--rz-yellow)) !important;
	color: #14181a !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 800 !important;
	cursor: pointer;
	/* NO padding here on purpose. This rule is about COLOUR; geometry belongs to
	   the button system further down. `.edd-submit.button` is specificity (0,2,0)
	   and beat the system's single-class selectors (0,1,0), so a `padding: 13px
	   24px` here rendered the product page's Add to Cart at 47px while the same
	   button in the sidebar was 46px -- the same control, two sizes. */
}
#edd-save-cart-button,
.edd_cart_actions input[type="submit"] {
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid var(--rz-line) !important;
	color: var(--rz-text) !important;
}
#edd-save-cart-button:hover,
.edd_cart_actions input[type="submit"]:hover { border-color: var(--rz-cyan) !important; color: var(--rz-cyan) !important; }


/* --------------------------------------------------------------------------
   4. Header cart dropdown
   The panel's CHECKOUT button was white-on-white.
   -------------------------------------------------------------------------- */

.dd-cart .edd_checkout a,
.dd-cart a.edd-cart-checkout,
.dd-cart .checkout-btn,
.dd-cart .cart-checkout a {
	display: block;
	background-color: var(--rz-cyan) !important;
	background-image: linear-gradient(180deg, #33e1ff, var(--rz-cyan)) !important;
	color: #0f1214 !important;
	border-radius: 999px !important;
	padding: 12px 18px !important;
	font-weight: 800 !important;
	text-align: center;
	border: 0 !important;
}

.dd-cart .edd_cart_item,
.dd-cart li { border-color: var(--rz-line) !important; }
.dd-cart .cart-total,
.dd-cart .edd_cart_total { color: var(--rz-text) !important; }
.dd-cart .edd_cart_amount { color: var(--rz-cyan) !important; }

/* The header cart dropdown's CHECKOUT button is `.inner-scroll > p.buttons > a`
   -- white background with near-white text, i.e. invisible. */
.dd-cart p.buttons a,
.inner-scroll p.buttons a,
.cart-widget p.buttons a {
	display: block;
	background-color: var(--rz-cyan) !important;
	background-image: linear-gradient(180deg, #33e1ff, var(--rz-cyan)) !important;
	color: #0f1214 !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 12px 18px !important;
	font-weight: 800 !important;
	text-align: center;
	text-decoration: none;
}
.dd-cart p.buttons a:hover,
.inner-scroll p.buttons a:hover { background-image: linear-gradient(180deg, #6aeaff, #00d8ff) !important; color: #0f1214 !important; }

/* Checkout: terms/privacy toggle renders as a cyan chip with white text
   (1.71:1). Make it a plain brand link instead. */
.edd-show-terms a.edd_terms_links,
a.edd_terms_links {
	background: transparent !important;
	background-image: none !important;
	color: var(--rz-cyan) !important;
	border: 0 !important;
	padding: 0 !important;
	text-decoration: underline;
	font-weight: 600;
}
.edd-show-terms a.edd_terms_links:hover { color: var(--rz-yellow) !important; }

/* Required-field asterisk ships as #b94a48 -- 3.28:1 on the dark form. */
.edd-required-indicator,
span.edd-required-indicator { color: #ff8a87 !important; }


/* ==========================================================================
   ROUND 7 -- full-bleed media image, carousel scrollbar
   ========================================================================== */

/* --------------------------------------------------------------------------
   Full-width homepage image
   The Olam page builder has no full-bleed option, so a media image is locked
   inside `.fw-container` (1170px) even when its section spans the viewport.
   `homepageunit.webp` is 2171px wide, so it has the resolution to go edge to
   edge -- the layout just never let it.

   Targeted with :has() on the image itself rather than a section class, so it
   only affects containers that actually hold a media image.
   -------------------------------------------------------------------------- */

.fw-container:has(img.media-image) {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.fw-container:has(img.media-image) .fw-row,
.fw-container:has(img.media-image) [class*="fw-col-"] {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}

img.media-image {
	display: block;
	width: 100%;
	max-width: 100% !important;
	height: auto;
}

/* Fallback for browsers without :has(): the About section is the only
   `.no-padding` section on the page. */
@supports not selector(:has(*)) {
	.fw-main-row.section.no-padding .fw-container {
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.fw-main-row.section.no-padding [class*="fw-col-"] { padding-left: 0 !important; padding-right: 0 !important; }
}


/* --------------------------------------------------------------------------
   Carousel scrollbar
   The sly.js slider under "Recently Released" renders its own scrollbar:
   a #e6e6e6 track with a #999 handle -- a light grey bar across a dark page.
   (Separate from the browser scrollbar styled earlier.)
   -------------------------------------------------------------------------- */

.scrollbar,
.sly-scrollbar,
.olam-scrollbar {
	background: rgba(255, 255, 255, .07) !important;
	height: 6px !important;
	border-radius: 999px;
	overflow: hidden;
	margin-top: 26px;
}

.scrollbar .handle,
.sly-scrollbar .handle,
.olam-scrollbar .handle {
	background-color: var(--rz-cyan) !important;
	background-image: linear-gradient(90deg, var(--rz-yellow), var(--rz-cyan)) !important;
	height: 6px !important;
	border-radius: 999px;
	cursor: grab;
	transition: filter .18s var(--rz-ease);
}

.scrollbar .handle:hover,
.scrollbar .handle:active { filter: brightness(1.15); }
.scrollbar .handle:active { cursor: grabbing; }

/* The handle's inner mouse-area element, if present, must not paint over it. */
.scrollbar .handle .mousearea { background: transparent !important; }

/* Cross-sell / upsell block on checkout ships a light border. */
.edd-csau-products,
.edd-csau-product,
.edd-cross-sell,
.edd-upsell { border-color: var(--rz-line) !important; background-color: transparent !important; }


/* ==========================================================================
   ROUND 8 -- About overlay, unified navigation
   ========================================================================== */

/* --------------------------------------------------------------------------
   About section: text over the image
   The page builder stacks the copy and the image as separate .fw-row siblings.
   Pulling the image row out of flow and dropping it behind the text turns the
   two into one composition, and halving its opacity keeps the copy readable.
   -------------------------------------------------------------------------- */

.fw-container:has(img.media-image) {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* `align-items: center` is load-bearing, not cosmetic. This is a column
	   flex container spanning the full 1910px, and the rows inside carry the
	   78ch reading-measure cap (max-width: 860px). Under the default
	   `align-items: stretch` a row cannot stretch past its own max-width, so
	   it settles at the start of the cross axis -- i.e. hard against the LEFT
	   edge. The text inside was centred, but the block holding it was not,
	   which is what made the section look off-centre on wide screens. */
	align-items: center;
	min-height: 520px;
	padding-top: 48px !important;
	padding-bottom: 48px !important;
}

/* The image row becomes the backdrop. */
.fw-container:has(img.media-image) > .fw-row:has(img.media-image) {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.fw-container:has(img.media-image) > .fw-row:has(img.media-image) [class*="fw-col-"] {
	width: 100%;
	height: 100%;
}

.fw-container:has(img.media-image) img.media-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: .5;                 /* as requested */
}

/* Everything else sits on top. */
.fw-container:has(img.media-image) > .fw-row:not(:has(img.media-image)) {
	position: relative;
	z-index: 1;
}

/* A soft vignette so the copy holds up over the busiest part of the photo. */
.fw-container:has(img.media-image)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(120% 90% at 50% 45%, rgba(15, 18, 20, .78) 0%, rgba(15, 18, 20, .55) 55%, rgba(15, 18, 20, .35) 100%);
}

/* Fallback where :has() is unavailable -- keep the original stacked layout
   rather than a broken half-overlay. */
@supports not selector(:has(*)) {
	.fw-main-row.section.no-padding img.media-image { opacity: .85; }
}


/* --------------------------------------------------------------------------
   Navigation -- one system for BOTH lists
   The header holds two separate menus: `ul.menu` (main links) and
   `ul.shop-nav` (login + cart). They were using different layout models,
   different spacing and different item heights, so nothing lined up.
   The cart toggle is a `span.cart-btn`, not an anchor -- which is why the
   earlier `.cart-widget > a` rule matched nothing.
   -------------------------------------------------------------------------- */

.header-wrap ul.menu,
.header-wrap ul.shop-nav,
.menu-main-container > ul.menu {
	/* inline-flex, NOT flex: the two lists are siblings that must stay on the
	   same line. A block-level flex container makes them stack. */
	display: inline-flex !important;
	vertical-align: middle;
	align-items: center;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	height: 100%;
}

.header-wrap ul.menu > li,
.header-wrap ul.shop-nav > li {
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	list-style: none;
}

/* One size for every interactive item in the header. */
.header-wrap ul.menu > li > a,
.header-wrap ul.shop-nav > li > a,
.header-wrap ul.shop-nav .cart-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px !important;
	margin: 0 !important;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	line-height: 1;
	white-space: nowrap;
	color: var(--rz-text) !important;
	background: transparent !important;
	border: 1px solid transparent;
	transition: color .18s var(--rz-ease), background .18s var(--rz-ease), border-color .18s var(--rz-ease);
	cursor: pointer;
}

.header-wrap ul.menu > li > a:hover,
.header-wrap ul.menu > li:hover > a {
	color: var(--rz-cyan) !important;
	background: rgba(255, 255, 255, .06) !important;
}

/* Login and cart read as outlined pills so they sit apart from the links. */
.header-wrap ul.shop-nav > li > a.login-button,
.header-wrap ul.shop-nav .cart-btn {
	border-color: var(--rz-line);
}

.header-wrap ul.shop-nav > li > a.login-button:hover,
.header-wrap ul.shop-nav .cart-btn:hover {
	border-color: var(--rz-cyan);
	color: var(--rz-cyan) !important;
	background: rgba(0, 216, 255, .08) !important;
}

.header-wrap ul.shop-nav .cart-btn .icon-cart,
.header-wrap ul.shop-nav .cart-btn i { color: var(--rz-yellow); font-size: 15px; }

/* The cart widget wrapper must not add its own box. */
.header-wrap .cart-widget {
	display: flex;
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	position: relative;
}

/* Dropdown arrows line up with the label. */
.header-wrap ul.menu > li.menu-item-has-children > a::after {
	content: "";
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	opacity: .7;
	margin-left: 2px;
}
.header-wrap ul.menu > li.menu-item-has-children > a .fa,
.header-wrap ul.menu > li.menu-item-has-children > a .demo-icon { display: none; }

/* --------------------------------------------------------------------------
   Nav sizing corrections
   Two regressions from the rounded-panel styling:

   1. `.sub-menu` was given `overflow: hidden` (to clip the rounded corners)
      while its links are `white-space: nowrap`. The theme fixes the submenu
      width at ~195px, so measured clientWidth 194px vs scrollWidth 433px --
      longer labels were being cut off. Size to content instead.

   2. `.menu-main-container` is an inline-block sized before the wider item
      padding was applied, leaving the list 34px wider than its box.
   -------------------------------------------------------------------------- */

ul.menu .sub-menu,
.header-wrap ul.menu ul {
	overflow: visible !important;
	width: max-content !important;
	min-width: 210px;
	max-width: 320px;
}

/* Rounded corners without clipping: round the items instead of the panel. */
ul.menu .sub-menu li:first-child a { border-top-left-radius: 8px; border-top-right-radius: 8px; }
ul.menu .sub-menu li:last-child a { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

/* Nested menus sit beside their parent, not clipped inside it -- and they
   cascade LEFT, not right.

   MEASURED at 1440px with the whole chain forced open: the nav is right
   aligned (its first item starts at x=819), so a rightward cascade runs out of
   room by the third level -- depth 1 ended at 1029, depth 2 at 1268, depth 3
   at 1516, i.e. 76px past the viewport edge with the labels clipped.
   Opening nested panels leftward keeps every level on screen for a
   right-aligned menu bar, and keeps the cascade direction consistent instead
   of zig-zagging.

   The selectors below are deliberately ID-scoped. The theme owns this with
   `.header #nav ul ul ul { left: 100% }` at specificity (1,1,3); a class-only
   selector loses, and because an absolutely positioned box with a set width
   resolves `left` over `right` in LTR, the panel kept opening rightward even
   with `right: 100%` applied. */
#nav ul.menu .sub-menu .sub-menu,
.header #nav ul ul ul {
	top: 0;
	left: auto;
	right: 100%;
}

.menu-main-container {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	overflow: visible;
}


/* ==========================================================================
   ROUND 9 -- the real nav cause, footer framing, checkout form
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE NAV CYAN -- root cause
   It is not a background and not a :hover rule. Every menu <li> carries an
   absolutely-positioned `::after` filling the item with #00d8ff at opacity .8
   (dropdown items at opacity 1). The theme reveals it on hover via JS, which
   is why:
     - computed background-color on the <a> read correctly the whole time,
     - no :hover rule matched when tested against the element,
     - every selector targeting backgrounds missed it entirely.

   The same pseudo-element is what shows as faint colour behind the sidebar
   category list.
   -------------------------------------------------------------------------- */

ul.menu li::after,
ul.menu li::before,
ul.shop-nav li::after,
.sidebar li::after,
.sidebar-item li::after,
.edd-taxonomy-widget li::after,
.filter-by li::after,
#nav ul li::after {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	opacity: 0 !important;
	content: none !important;
	display: none !important;
}

/* Keep the dropdown-arrow pseudo we added -- it is on the <a>, not the <li>. */
.header-wrap ul.menu > li.menu-item-has-children > a::after {
	content: "" !important;
	display: inline-block !important;
	opacity: .7 !important;
	background: transparent !important;
}


/* --------------------------------------------------------------------------
   Footer -- stop cropping the artwork's head
   `background-position: center` on a 1672x941 image in a ~400px-tall band
   crops the top. Anchoring to the top keeps the skull and guitar in frame.
   -------------------------------------------------------------------------- */

#footer {
	background-position: center top !important;
	background-size: cover !important;
	min-height: 520px;
	display: flex;
	align-items: center;
}

#footer .container { width: 100%; }


/* --------------------------------------------------------------------------
   Checkout form -- lighter, not bulky
   The fieldsets were given 20px padding plus panel styling on top of the
   theme's own spacing, and the legend ("PERSONAL INFO") is absolutely
   positioned by the theme so it lands on top of the first field.
   -------------------------------------------------------------------------- */

#edd_checkout_form_wrap fieldset,
#edd_checkout_user_info,
#edd_cc_fields,
#edd_cc_address,
#edd_purchase_submit,
#edd_final_total_wrap,
#edd_discount_code {
	padding: 16px 18px !important;
	margin-bottom: 12px !important;
}

/* Legend back into normal flow, at a sane size. */
#edd_checkout_form_wrap legend,
#edd_checkout_user_info legend,
#edd_cc_fields legend,
#edd_cc_address legend {
	position: static !important;
	transform: none !important;
	float: none !important;
	width: auto !important;
	display: block !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rz-text-dim) !important;
	text-align: left !important;
	margin: 0 0 14px !important;
	padding: 0 0 10px !important;
	border-bottom: 1px solid var(--rz-line) !important;
	line-height: 1.3 !important;
	opacity: 1 !important;
}

/* Tighter fields. */
#edd_checkout_form_wrap p,
#edd_checkout_form_wrap .edd-form-group,
#edd_checkout_form_wrap .field-holder { margin-bottom: 12px !important; }

#edd_checkout_form_wrap input[type="text"],
#edd_checkout_form_wrap input[type="email"],
#edd_checkout_form_wrap input[type="password"],
#edd_checkout_form_wrap input[type="tel"],
#edd_checkout_form_wrap select {
	padding: 10px 12px !important;
	font-size: 14px;
}

#edd_checkout_form_wrap label,
#edd_checkout_form_wrap .edd-label {
	font-size: 13px !important;
	margin-bottom: 5px !important;
	display: block;
}

/* Two-up on wider screens so the form is not one long column. */
@media (min-width: 768px) {
	#edd_cc_address .edd-form-group,
	#edd_checkout_user_info .edd-form-group { display: inline-block; width: calc(50% - 8px); vertical-align: top; }
	#edd_checkout_user_info .edd-form-group:nth-child(odd) { margin-right: 12px; }
}

/* Payment icons were floating on a white tile. */
#edd_checkout_form_wrap .edd-payment-icons img,
.edd-payment-icons img { background: transparent !important; border-radius: 6px; }


/* --------------------------------------------------------------------------
   Cross-sell cards on checkout -- equal height, aligned prices
   The cards were sizing to their own content, so titles and prices sat at
   different heights across the row.
   -------------------------------------------------------------------------- */

.edd-csau-products {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: stretch;
}

/* Only the product cards are flex items -- `> *` also caught the section
   heading and squeezed it into the first column. */
.edd-csau-products > h2,
.edd-csau-products > h3 { flex: 0 0 100%; width: 100%; margin: 0 0 4px; }
.edd-csau-products > div:empty { display: none; }

.edd-csau-products > .edd_download,
.edd-csau-product {
	display: flex;
	flex-direction: column;
	flex: 1 1 260px;
	background-color: var(--rz-surface) !important;
	background-image: linear-gradient(180deg, #1e262a, var(--rz-surface)) !important;
	border: 1px solid var(--rz-line) !important;
	border-radius: 14px;
	overflow: hidden;
	margin: 0 !important;
}

.edd-csau-products > .edd_download img,
.edd-csau-product img { width: 100%; height: auto; display: block; }

.edd-csau-products > .edd_download h3,
.edd-csau-products > .edd_download .edd_download_title,
.edd-csau-product .edd-csau-title,
.edd-csau-product h3,
.edd-csau-product h4 {
	font-size: 14px !important;
	line-height: 1.35;
	padding: 14px 14px 0;
	margin: 0;
	color: var(--rz-text) !important;
	flex: 1;
}

.edd-csau-products > .edd_download .edd_price,
.edd-csau-product .edd_price,
.edd-csau-product .edd-csau-price {
	margin-top: auto;
	padding: 12px 14px 14px;
	color: var(--rz-cyan) !important;
	font-weight: 800;
}


/* ==========================================================================
   CONTINUITY -- column alignment
   ========================================================================== */

/* MEASURED on the product page (1440px):
     .preview-area  left 131  right 999  (868 wide)
     .content-area  left 161  right 969  (808 wide)
   A 30px step on both edges, visible as a ragged left edge under the image.

   The theme intends this: `.paper` has 30px padding and `.preview-area` carries
   `margin: -30px -30px 30px` to break out of it, so the product photo is
   full-bleed inside the paper. That was invisible while both blocks were
   transparent -- giving `.content-area` a surface colour in the dark-theme
   sweep is what exposed it.

   The paper is the container; the copy does not need its own panel. Dropping
   the background removes the step and lets the description sit on the page,
   which is what the layout was designed for. */
.content-area {
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
}

/* The sidebar column keeps its 30px padding while the image escapes it, so the
   price panel started 30px below the top of the photo. Levelling the two
   columns is the single most visible alignment fix on the page. */
.sidebar { padding-top: 0 !important; }

/* Same idea for the related-downloads block, which sits inside the paper. */
.related-downloads,
.edd-related-downloads { background-color: transparent !important; }


/* ==========================================================================
   POLISH -- About backdrop, feature boxes
   ========================================================================== */

/* --------------------------------------------------------------------------
   About section: blur the backdrop
   The Kemper unit photo is high-detail with strong edges right where the copy
   sits, so contrast alone was not enough -- the text competed with the knobs
   and lettering. Blurring the backdrop separates the layers.

   `scale(1.04)` is required: a blur samples beyond the element's box and
   would otherwise fade out at the edges, showing the page through.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.fw-container:has(img.media-image) > .fw-row:has(img.media-image) {
		overflow: hidden;
		border-radius: 12px;
	}

	.fw-container:has(img.media-image) img.media-image {
		filter: blur(4px) saturate(115%);
		transform: scale(1.04);
		opacity: .55;
	}

	/* Denser scrim now the backdrop is soft -- the copy should lead. */
	.fw-container:has(img.media-image)::after {
		background: radial-gradient(120% 90% at 50% 45%,
			rgba(15, 18, 20, .88) 0%,
			rgba(15, 18, 20, .74) 55%,
			rgba(15, 18, 20, .58) 100%);
	}
}


/* --------------------------------------------------------------------------
   Feature boxes ("Professional Quality" etc.)
   Six flat rows of a coloured circle plus text, with no container and no
   interaction. Each keeps its own inline circle colour -- that variety is the
   point -- but gains a card, depth and a hover state.
   -------------------------------------------------------------------------- */

.fw-iconbox {
	position: relative;
	display: flex;
	gap: 18px;
	align-items: flex-start;
	height: 100%;
	padding: 24px;
	border: 1px solid var(--rz-line);
	border-radius: 16px;
	background-color: var(--rz-surface);
	background-image: linear-gradient(180deg, #1e262a, var(--rz-surface));
	transition: transform .28s var(--rz-ease), border-color .28s var(--rz-ease), box-shadow .28s var(--rz-ease);
	overflow: hidden;
}

/* Top highlight, matching the cards and panels elsewhere. */
.fw-iconbox::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
	pointer-events: none;
}

.fw-iconbox:hover {
	transform: translateY(-4px);
	border-color: rgba(0, 216, 255, .35);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

/* The circle keeps its per-box inline colour; only depth is added. */
.fw-iconbox .fw-iconbox-image {
	flex: 0 0 auto;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
	transition: transform .28s var(--rz-ease);
}

.fw-iconbox:hover .fw-iconbox-image { transform: scale(1.07); }

.fw-iconbox .fw-iconbox-aside { flex: 1; min-width: 0; }

.fw-iconbox .fw-iconbox-title h3 {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 0 0 8px;
	color: var(--rz-text);
}

.fw-iconbox .fw-iconbox-text p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--rz-text-dim);
	max-width: none;
}

/* Spacing between cards.
   Equal-height columns were attempted by switching the row to flex, but this
   grid is Bootstrap floats and the columns collapsed to 278px inside 585px
   even with an explicit basis. Natural heights are close enough (measured
   within ~20px) and the card treatment reads consistently, so the float grid
   is left alone rather than fought. */
.fw-iconbox { margin-bottom: 24px; }

@media (prefers-reduced-motion: reduce) {
	.fw-iconbox, .fw-iconbox .fw-iconbox-image { transition: none; }
	.fw-iconbox:hover { transform: none; }
	.fw-iconbox:hover .fw-iconbox-image { transform: none; }
}


/* ==========================================================================
   BUTTON SYSTEM
   MEASURED across four pages: six different heights (40 / 42 / 43 / 44 / 54 /
   57px), three padding values (0 16px, 13px 24px, 13px 26px), three font
   sizes (13, 13.16, 14px) and LOGOUT at weight 500 sitting directly beside a
   weight-700 pill. The 13.16px is an em-computed artifact, not a chosen size.

   Sized by `min-height` plus flex centring rather than vertical padding, so a
   label that wraps in a narrow sidebar grows instead of breaking the rhythm.
   ========================================================================== */

:root {
	--rz-btn-h: 46px;          /* primary actions */
	--rz-btn-h-sm: 40px;       /* header pills and utility controls */
	--rz-btn-px: 22px;
	--rz-btn-fs: 13px;
}

.btn,
.btn-primary,
.edd-add-to-cart,
.edd_go_to_checkout,
.edd-submit,
#edd-purchase-button,
#edd-save-cart-button,
.edd_cart_actions input[type="submit"],
input[type="submit"],
button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--rz-btn-h);
	padding: 8px var(--rz-btn-px) !important;
	border-radius: 999px !important;
	font-size: var(--rz-btn-fs) !important;
	font-weight: 800 !important;
	line-height: 1.25;
	letter-spacing: .02em;
	text-align: center;
	box-sizing: border-box;
}

/* Header pills share one height and weight so the row reads as a set. */
.header-wrap ul.menu > li > a,
.header-wrap ul.shop-nav > li > a,
.header-wrap ul.shop-nav .cart-btn,
.header-wrap .login-button {
	min-height: var(--rz-btn-h-sm);
	height: var(--rz-btn-h-sm);
	font-weight: 700 !important;   /* LOGOUT measured at 500 next to a 700 pill */
	font-size: var(--rz-btn-fs) !important;
}

/* The sidebar Add to Cart carries the price in its label ("$15.00 – ADD TO
   CART"). It used to be shrunk to 12.5px/14px padding because the sidebar
   column was only 208px wide and the label wrapped to two lines.

   That column is now 372px (see the `col-lg-3` widening in responsive.css), so
   the shrink is no longer needed -- and it was actively harmful: it made this
   button 12.5px while every other primary button on the site is 13px, i.e. the
   same control rendering at two different sizes on the same page. It now
   inherits the standard button geometry. */
.cart-box .edd-add-to-cart,
.cart-box .edd_go_to_checkout,
.sidebar .edd-add-to-cart,
.sidebar .edd_go_to_checkout {
	max-width: 100%;
}

/* Icon-only search submit.
   This input has an EMPTY value, so the browser supplies its own "Submit"
   label; the theme hides it with `font-size: 0` and shows an icon instead.
   The button system's `font-size: 13px !important` revealed that label and
   clipped it to "Submi". Font size is restored to 0 here and the accessible
   name is preserved by the field's own labelling, not by the visible text. */
.product-search .search-fields input[type="submit"],
.product-search .search-fields button {
	min-height: 0;
	height: auto;
	font-size: 0 !important;
	padding: 0 16px !important;
	line-height: 0;
	color: transparent !important;
}


/* ==========================================================================
   ROUND 10 -- reported issues
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Feature cards: the icon sits flush against the border
   MEASURED: `.fw-iconbox` padding computed to 0px and the circle stayed
   `float: left` -- the earlier flex/padding rule was being outranked by the
   theme's own `.olam-iconbox-2` styling. Qualifying the selector with that
   class wins without !important.
   -------------------------------------------------------------------------- */

.fw-iconbox.olam-iconbox-2,
.fw-iconbox[class*="olam-iconbox"],
div.fw-iconbox {
	display: flex !important;
	gap: 20px;
	align-items: flex-start;
	padding: 26px !important;
	overflow: visible;
}

.fw-iconbox.olam-iconbox-2 .fw-iconbox-image,
.fw-iconbox[class*="olam-iconbox"] .fw-iconbox-image,
div.fw-iconbox .fw-iconbox-image {
	float: none !important;
	position: static !important;
	margin: 0 !important;
	flex: 0 0 auto;
}

.fw-iconbox.olam-iconbox-2 .fw-iconbox-aside,
.fw-iconbox[class*="olam-iconbox"] .fw-iconbox-aside,
div.fw-iconbox .fw-iconbox-aside {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
}


/* --------------------------------------------------------------------------
   2. About copy readability
   The blur helped the backdrop but the paragraph was still 15px #9fadb4 over
   a busy photo, with the theme's own text-shadow measured at
   rgba(0,0,0,0.004) -- invisible. Rather than keep pushing the scrim darker
   (which defeats showing the image at all), the copy gets its own contained
   plate, the same device used in the footer.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.fw-container:has(img.media-image) > .fw-row:not(:has(img.media-image)) {
		max-width: 860px;
		margin-left: auto;
		margin-right: auto;
	}

	.fw-container:has(img.media-image) .fw-text,
	.fw-container:has(img.media-image) > .fw-row:not(:has(img.media-image)) [class*="fw-col-"] > * {
		position: relative;
	}

	/* One plate behind the body copy, not each element. */
	.fw-container:has(img.media-image) > .fw-row:nth-of-type(3) {
		background: rgba(11, 14, 16, .72);
		backdrop-filter: blur(6px) saturate(115%);
		-webkit-backdrop-filter: blur(6px) saturate(115%);
		border: 1px solid rgba(255, 255, 255, .07);
		border-radius: 16px;
		padding: 26px 30px !important;
	}

	.fw-container:has(img.media-image) p {
		color: var(--rz-text) !important;
		font-size: 16px;
		line-height: 1.7;
		text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	}

	.fw-container:has(img.media-image) .fw-special-subtitle {
		color: #c8d2d7 !important;
		text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
	}

	@supports not (backdrop-filter: blur(4px)) {
		.fw-container:has(img.media-image) > .fw-row:nth-of-type(3) { background: rgba(11, 14, 16, .9); }
	}
}


/* --------------------------------------------------------------------------
   3. Footer blend
   The artwork began with a hard horizontal seam against the section above.
   A tall fade from the page colour into the image removes the edge.
   -------------------------------------------------------------------------- */

#footer::before {
	background: linear-gradient(180deg,
		var(--rz-ink) 0%,
		rgba(15, 18, 20, .92) 6%,
		rgba(15, 18, 20, .52) 22%,
		rgba(15, 18, 20, .42) 60%,
		rgba(15, 18, 20, .62) 100%) !important;
}

/* Soften the join itself rather than relying on the scrim alone. */
#footer {
	border-top: 0;
	margin-top: -1px;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 100%);
}


/* --------------------------------------------------------------------------
   4. Logout button
   Requested: hide it once signed in. The account menu already provides a way
   out, and it was competing with the cart for space in the header.
   -------------------------------------------------------------------------- */

body.logged-in .header-wrap ul.shop-nav > li > a.login-button[href*="action=logout"],
body.logged-in .header-wrap .login-button[href*="logout"] { display: none !important; }


/* --------------------------------------------------------------------------
   About section: centre the body copy
   MEASURED: the heading and subtitle were `text-align: center` but the
   paragraph was `text-align: left` inside a `text-align: start` plate, so the
   block looked centred while its text was ragged-right against a centred
   heading. Centring the whole block makes the section read as one unit.

   The 78ch measure cap stays -- centred text is harder to scan at long line
   lengths, so the cap matters more here, not less.
   -------------------------------------------------------------------------- */

.fw-container:has(img.media-image),
.fw-container:has(img.media-image) .fw-row,
.fw-container:has(img.media-image) [class*="fw-col-"],
.fw-container:has(img.media-image) .fw-text {
	text-align: center;
}

/* The paragraphs carry an INLINE `style="text-align: left"` written by the
   Unyson page builder into the post content. An inline style beats any
   stylesheet selector regardless of specificity, so this one declaration has
   to be `!important` to win -- without it the heading centres and the copy
   stays ragged-left, which is exactly how the section looked before. */
.fw-container:has(img.media-image) p,
.fw-container:has(img.media-image) .fw-text p {
	text-align: center !important;
}

/* Keep the block itself centred as well as its text. */
.fw-container:has(img.media-image) p {
	margin-left: auto;
	margin-right: auto;
}

/* Fallback for browsers without :has() -- the About section is the only
   `.no-padding` section on the page. */
@supports not selector(:has(*)) {
	.fw-main-row.section.no-padding .fw-container,
	/* `!important` for the same inline-style reason as the :has() rule above. */
	.fw-main-row.section.no-padding p { text-align: center !important; }
	.fw-main-row.section.no-padding p { margin-left: auto; margin-right: auto; }
}


/* ==========================================================================
   ROUND 11 -- reported issues
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. "Your cart is empty" popping up while moving across the nav
   Same root cause as the dropdown menus: `.dd-cart` measured
   display:block / visibility:visible / opacity:0 / pointer-events:auto,
   a 320px-wide invisible panel sitting over the header. Moving the pointer
   between DOWNLOADS and its submenu passes through it and triggers the cart.

   Hidden properly when closed, shown on hover/focus of the cart widget.
   -------------------------------------------------------------------------- */

.cart-widget .dd-cart {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .16s var(--rz-ease), visibility 0s linear .16s;
}

.cart-widget:hover .dd-cart,
.cart-widget:focus-within .dd-cart,
.cart-widget.open .dd-cart,
.cart-widget.active .dd-cart {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity .16s var(--rz-ease), visibility 0s;
}


/* --------------------------------------------------------------------------
   2. Black bar under related-product images
   MEASURED: `.thumb` is 142px (aspect-ratio 16/10) but the image renders
   133px, leaving 9px of the thumb's own #0b0e10 background showing as a bar
   between the photo and the title. `object-fit: cover` only fills if the
   image is actually given the box height.
   -------------------------------------------------------------------------- */

#edd-related-items-wrapper .edd_download_inner .thumb,
.edd_download_inner .thumb { display: block; overflow: hidden; }

#edd-related-items-wrapper .edd_download_inner .thumb a,
.edd_download_inner .thumb a { display: block; height: 100%; }

#edd-related-items-wrapper .edd_download_inner .thumb img,
.edd_download_inner .thumb img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}


/* --------------------------------------------------------------------------
   3. Footer: condense the social row
   MEASURED: `.footer-social` is 75px tall for a row of four small icons, with
   10px vertical padding and a further 30px bottom margin -- roughly 105px of
   vertical space around one line of icons.
   -------------------------------------------------------------------------- */

#footer .footer-social {
	margin: 6px 0 14px !important;
	padding: 0 !important;
	line-height: 1;
}

#footer .footer-social li { margin: 0 8px !important; vertical-align: middle; }

#footer .footer-social a { padding: 6px; }

#footer .textwidget { margin-bottom: 0 !important; }

#footer .footer-text { margin-top: 12px !important; }


/* --------------------------------------------------------------------------
   Category-archive search bar: the "All" category dropdown
   MEASURED on /downloads/category/...: `div.download_cat_filter` still carried
   the theme's light #f4f6f5 panel (rgb(244,246,245)) with the select inside it
   at rgba(0,0,0,.7) -- a bright white box sitting next to the dark search
   field. The earlier search styling only covered `.product-search
   .search-fields`, which this wrapper is not inside.
   -------------------------------------------------------------------------- */

.download_cat_filter,
div.download_cat_filter,
.search-cat-filter,
.edd-search-cat {
	background-color: var(--rz-nav-panel) !important;
	background-image: none !important;
	border: 1px solid var(--rz-line) !important;
	border-radius: 999px !important;
	color: var(--rz-text) !important;
	overflow: hidden;
}

.download_cat_filter select,
select.download_cat_filter,
.download_cat_filter .chosen-single,
.download_cat_filter .select2-selection {
	background-color: transparent !important;
	color: var(--rz-text) !important;
	border: 0 !important;
	text-shadow: none !important;
}

/* The native dropdown list renders with the OS palette unless told otherwise. */
.download_cat_filter select option,
select.download_cat_filter option {
	background-color: var(--rz-nav-panel);
	color: var(--rz-text);
}

/* The theme draws the caret as a dark glyph for a light box; invert it. */
.download_cat_filter::after,
.download_cat_filter .arrow,
.download_cat_filter i { color: var(--rz-text-dim) !important; }

.download_cat_filter:focus-within {
	border-color: var(--rz-cyan) !important;
	box-shadow: 0 0 0 4px rgba(0, 216, 255, .12);
}


/* ==========================================================================
   TablePress + DataTables  (/kemper-artist-band-profiles/ and any other
   TablePress table on the site)

   MEASURED: this page renders `table#tablepress-2.tablepress.dataTable`, a
   completely separate table system from EDD's -- so none of the `.edd-table`
   work above reached it. It was still shipping the plugin's own light skin:
   `td` at rgb(255,255,255) with rgb(17,17,17) text, and `th` at cyan
   rgb(0,216,255) with WHITE text, which is roughly 1.5:1 contrast and fails
   WCAG AA badly. Matched to the `.edd-table` treatment for consistency.
   ========================================================================== */

.tablepress,
table.dataTable {
	background: transparent !important;
	border: 1px solid var(--rz-line) !important;
	border-radius: 14px;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
	width: 100%;
}

.tablepress thead th,
.tablepress thead td,
table.dataTable thead th,
table.dataTable thead td {
	background: linear-gradient(180deg, #263036, #1d262a) !important;
	background-color: #1d262a !important;
	color: var(--rz-text) !important;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--rz-line) !important;
}

.tablepress tbody td,
.tablepress tbody th,
table.dataTable tbody td,
table.dataTable tbody th {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--rz-text-dim) !important;
	padding: 14px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
	vertical-align: middle;
}

/* TablePress emits explicit .odd/.even classes rather than relying on
   :nth-child, so both are targeted. */
.tablepress tbody tr.odd td,
.tablepress tbody tr:nth-child(odd) td,
table.dataTable tbody tr.odd td,
table.dataTable tbody tr:nth-child(odd) td {
	background-color: rgba(255, 255, 255, .022) !important;
}

.tablepress tbody tr:hover td,
.tablepress tbody tr.row-hover:hover td,
table.dataTable tbody tr:hover td {
	background-color: rgba(0, 216, 255, .06) !important;
}

.tablepress tbody tr:last-child td,
table.dataTable tbody tr:last-child td { border-bottom: 0 !important; }

.tablepress a,
table.dataTable a { color: var(--rz-cyan-ink); }

/* Sortable-column affordance. The plugin ships dark arrow glyphs sized for a
   light header, so they vanish against the dark one. */
.tablepress thead th.dt-orderable-asc,
.tablepress thead th.dt-orderable-desc,
.tablepress thead th.sorting,
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc { cursor: pointer; }

.tablepress thead th.dt-orderable-asc:hover,
.tablepress thead th.dt-orderable-desc:hover,
table.dataTable thead th.dt-orderable-asc:hover,
table.dataTable thead th.dt-orderable-desc:hover {
	background: linear-gradient(180deg, #2c383f, #222c31) !important;
	color: #fff !important;
}

.tablepress thead th .dt-column-order::before,
.tablepress thead th .dt-column-order::after,
table.dataTable thead th .dt-column-order::before,
table.dataTable thead th .dt-column-order::after {
	color: var(--rz-text-dim) !important;
	opacity: .55;
}

.tablepress thead th.dt-ordering-asc .dt-column-order::before,
.tablepress thead th.dt-ordering-desc .dt-column-order::after,
table.dataTable thead th.dt-ordering-asc .dt-column-order::before,
table.dataTable thead th.dt-ordering-desc .dt-column-order::after {
	color: var(--rz-cyan-ink) !important;
	opacity: 1;
}

/* --- DataTables chrome: search, length, info, pagination ------------------ */

.dt-container,
.dt-layout-row,
.dt-layout-cell { background: transparent !important; color: var(--rz-text-dim); }

.dt-container .dt-search label,
.dt-container .dt-length label,
.dt-container .dt-info { color: var(--rz-text-dim) !important; }

.dt-container .dt-search input,
.dt-container .dt-length select,
.dt-container input[type="search"] {
	background-color: var(--rz-nav-panel) !important;
	background-image: none !important;
	color: var(--rz-text) !important;
	border: 1px solid var(--rz-line) !important;
	border-radius: 999px !important;
	padding: 8px 16px !important;
	min-height: var(--rz-btn-h-sm);
	margin-left: 8px;
}

.dt-container .dt-length select option { background-color: var(--rz-nav-panel); color: var(--rz-text); }

.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
	outline: none;
	border-color: var(--rz-cyan) !important;
	box-shadow: 0 0 0 4px rgba(0, 216, 255, .12);
}

.dt-container .dt-paging .dt-paging-button,
.dt-container .dt-paging button,
.dataTables_paginate .paginate_button {
	background: var(--rz-raised) !important;
	background-image: none !important;
	color: var(--rz-text) !important;
	border: 1px solid var(--rz-line) !important;
	border-radius: 10px !important;
	min-height: var(--rz-btn-h-sm);
	min-width: var(--rz-btn-h-sm);
	padding: 0 12px !important;
	margin: 0 3px;
	font-weight: 700;
}

.dt-container .dt-paging .dt-paging-button:hover:not(.disabled),
.dt-container .dt-paging button:hover:not(.disabled),
.dataTables_paginate .paginate_button:hover {
	background: var(--rz-line) !important;
	color: #fff !important;
	border-color: var(--rz-cyan) !important;
}

.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging button.current,
.dataTables_paginate .paginate_button.current {
	background: var(--rz-cyan) !important;
	color: #0f1214 !important;
	border-color: var(--rz-cyan) !important;
}

.dt-container .dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging button.disabled,
.dataTables_paginate .paginate_button.disabled {
	background: transparent !important;
	color: #5d6a70 !important;
	border-color: var(--rz-line) !important;
	cursor: default;
}

/* TablePress's own "no matching records" / empty state. */
.tablepress .dt-empty,
table.dataTable td.dt-empty {
	color: var(--rz-text-dim) !important;
	text-align: center;
	padding: 28px 16px !important;
}


/* Testimonial avatars. The theme lays these out as a `table-cell` with no
   fixed width, so when the container narrows the image collapses to a sliver
   (measured 12px wide x 70px tall) instead of staying a circle. Pinning the
   box and switching to `cover` keeps it round at any width, and stops the
   white placeholder background showing through a non-square crop. */
.fw-testimonials-avatar { width: 70px !important; }

.fw-testimonials-avatar img {
	width: 70px !important;
	height: 70px !important;
	min-width: 70px;
	max-width: none !important;
	object-fit: cover;
	background-color: var(--rz-raised);
}


/* --------------------------------------------------------------------------
   Footer: condense the social row (continued)
   MEASURED: the gap above the icons was 62px while the gap below was 14px --
   a lopsided block of empty space. Two sources:
     - `.footer-widget` above it contributes padding-bottom 10px + margin-
       bottom 30px before the icons even start;
     - each social anchor is an explicit 66x66 box around a 48px icon.
   Icons drop to 40px (still comfortably clickable; the coarse-pointer block
   in responsive.css raises them back to 44px on touch devices).
   -------------------------------------------------------------------------- */

#footer .footer-widget {
	margin-bottom: 12px !important;
	padding-bottom: 0 !important;
}

#footer .footer-social a {
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color .16s var(--rz-ease), color .16s var(--rz-ease);
}

#footer .footer-social a:hover { background-color: var(--rz-raised); }

#footer .footer-social .icon {
	width: 40px !important;
	height: 40px !important;
	line-height: 40px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}


/* Cookie banner: the "Cookie settings" link ships as #4a7d1f (dark green),
   which measures 3.37:1 on the dark banner and fails AA for body text.
   Scoped to `.cli_settings_button` alone -- broadening this to
   `.cli-plugin-button` also catches the ACCEPT button and drops it from
   21:1 to 4.24:1, which is the wrong trade. */
a.cli_settings_button,
.cli_settings_button {
	color: var(--rz-cyan-ink) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.cli_settings_button:hover,
.cli_settings_button:hover { color: #7fe9ff !important; }


/* --------------------------------------------------------------------------
   Archive sidebar: no panel behind the filter pills or the category list

   MEASURED on /kemper-profiles: the sort pills sit inside a `.sidebar-item`
   painted var(--rz-surface) rgb(25,31,34), and the inactive pills on top of it
   are rgb(34,42,46) -- nine points apart. The result is a slab showing behind
   the buttons that reads as a smudge rather than a card, which is the
   "background element behind the content" reported repeatedly.

   Scoped by CONTENT rather than by page: only the two sidebar items that hold
   navigation controls lose their panel. The product-page sidebar items (price
   box, Pack Includes, Top Selling Packs) are genuine cards and keep theirs.
   -------------------------------------------------------------------------- */

.sidebar .sidebar-item:has(> .filter-by),
.sidebar .sidebar-item:has(> .edd-taxonomy-widget) {
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-bottom: 22px;
}

/* The 1px top highlight belongs to a panel; with no panel it is just a line
   floating above the first pill. */
.sidebar .sidebar-item:has(> .filter-by)::before,
.sidebar .sidebar-item:has(> .edd-taxonomy-widget)::before { content: none !important; }

/* With the slab gone the pills carry the whole visual weight, so give the
   inactive state enough contrast against the page to read as a control. */
.sidebar .sidebar-item .filter-by a {
	border: 1px solid var(--rz-line);
}

.sidebar .sidebar-item .filter-by a.active,
.sidebar .sidebar-item .filter-by a.active:hover {
	border-color: var(--rz-cyan);
}

/* Category list: indent from the removed panel padding, keep the hairlines. */
.sidebar .sidebar-item > .edd-taxonomy-widget { padding: 0; }


/* --------------------------------------------------------------------------
   Add-to-cart button: centre it in its wrapper

   MEASURED in the product sidebar: the wrapper `.edd_purchase_submit_wrapper`
   is 242px and the button 226px, sitting flush left -- 16px of dead space on
   the right only, which reads as lopsided padding. Two things combine:
     - a `<button>` with `width: auto` shrink-wraps to its content rather than
       filling its parent, so it never spans the wrapper;
     - the button is `display: flex` (to line up the basket icon with the
       label), which makes it a BLOCK-level box, and the wrapper's
       `text-align: center` cannot centre a block-level box.
   Auto inline margins centre a block-level box regardless of its width, and
   are a no-op on the archive pages where the button is inline-block.
   -------------------------------------------------------------------------- */

.edd-add-to-cart,
.cart-box .edd-add-to-cart,
.edd_purchase_submit_wrapper .edd-add-to-cart {
	margin-left: auto;
	margin-right: auto;
}

/* The button's own left/right padding is already symmetric (14px each side,
   set with `!important` further up), so nothing else is needed here -- the
   lopsided look came entirely from the box not being centred. */


/* --------------------------------------------------------------------------
   Cookie-consent bar -- text colour

   The plugin writes its palette as an INLINE style on the bar itself:
     <div id="cookie-law-info-bar" style="background-color: rgb(255,255,255);
                                          color: rgb(0,0,0); ...">
   The white background is already neutralised by the inline-background
   attribute selectors further up, but the black `color` was not, and it
   INHERITS down to the message text -- an unclassed <span> with no colour rule
   of its own. Measured 1005x18px of rgb(0,0,0) on rgb(25,31,34): 1.26:1, on
   every page of the site.

   An inline declaration outranks any selector, so `!important` is the only
   thing that reaches it.
   -------------------------------------------------------------------------- */

#cookie-law-info-bar,
#cookie-law-info-bar span,
#cookie-law-info-bar p {
	color: var(--rz-text-dim) !important;
}

/* Links in the bar become cyan -- EXCEPT the ACCEPT button.
   That button carries its own black background from the plugin, so it is
   already light-on-black at 21:1. An earlier version of this block recoloured
   it along with everything else and dropped it to 1.12:1: dark text on a black
   button. The `:not()` chain is what keeps it out. */
#cookie-law-info-bar a:not(.cli-plugin-button):not(.cookie_action_close_header),
#cookie-law-info-bar a.cli_settings_button {
	color: var(--rz-cyan-ink) !important;
}

/* The "Cookie settings" modal.

   CORRECTION: an earlier version of this block recoloured the modal's TEXT to
   light without touching its panels, which are painted white and #f2f2f2 by the
   plugin. That produced light-on-white -- "Privacy Overview" measured 1.19:1 and
   the category tabs 1.06:1, worse than the plugin's own black-on-white. The
   panels have to be darkened first; the text rules below are only correct once
   they are.

   The modal measures 0x0 until the user clicks "Cookie settings", which is why
   it does not appear in a normal page scan. */

.cli-modal-content,
.cli-tab-content,
.cli-modal .cli-modal-content {
	background: var(--rz-surface) !important;
	border-color: var(--rz-line) !important;
}

.cli-tab-header,
.cli-modal .cli-tab-header {
	background: var(--rz-raised) !important;
	border-color: var(--rz-line) !important;
}

.cli-tab-section,
.cli-tab-container,
.cli-modal-footer { border-color: var(--rz-line) !important; }

.cli-privacy-content-text,
.cli-privacy-overview p,
.cli-privacy-content-text p,
.cli-tab-content p,
.cli-modal-body p { color: var(--rz-text-dim) !important; }

.cli-privacy-overview h4,
.cli-tab-header a,
.cli-modal .cli-tab-header a,
.cli-modal h4,
.cli-modal h5 { color: var(--rz-text) !important; }

/* The plugin's green save button ships white text on rgb(97,162,41): 3.13:1,
   under the 4.5:1 a 14px control needs. Dark text on the same green is 6.06:1
   and keeps the button's identity, matching how the site's own bright buttons
   already work. */
a.wt-cli-privacy-btn,
.cli_setting_save_button,
a.cli_setting_save_button {
	color: #0f1214 !important;
	font-weight: 700;
}

/* The modal's close control and the "Always Enabled" caption are both left at
   rgb(0,0,0) by the plugin -- 1.26:1 and 1.44:1 on the darkened panels. */
.cli-modal-close,
.cli-modal-close span:not(.wt-cli-sr-only),
.cli-necessary-caption,
.cli-tab-header .form-check-label,
.wt-cli-necessary-checkbox label,
.cli-switch .cli-slider,
.cli-modal label {
	color: var(--rz-text-dim) !important;
	opacity: 1 !important;
}

.cli-modal-close:hover,
.cli-modal-close:focus { color: var(--rz-text) !important; }

/* The "Privacy & Cookies Policy" tab the plugin slides in AFTER the bar is
   dismissed. It measures 0x0 while the bar is up, so it never appeared in a
   page scan either -- but it is what every returning visitor who already
   accepted actually sees, and it was rgb(0,0,0) at 1.26:1. */
#cookie-law-info-again,
#cookie-law-info-again span,
#cookie_hdr_showagain {
	background: var(--rz-surface) !important;
	color: var(--rz-text-dim) !important;
}

#cookie-law-info-again:hover span,
#cookie-law-info-again:hover { color: var(--rz-cyan-ink) !important; }


/* --------------------------------------------------------------------------
   FOOTER LINK ROW

   Optional. Only applies if the footer Text widget uses the <ul class="rz-footer-links">
   markup; the plain pipe-separated version is unaffected and needs none of this.

   The separator is drawn with CSS rather than typed as a "|" character, so
   screen readers announce five links instead of reading "pipe" between each
   one, and the spacing stays even when the row wraps on a phone.
   -------------------------------------------------------------------------- */

.rz-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rz-footer-links li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* Separator between items, never before the first or after a line break. */
.rz-footer-links li + li:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 12px;
	margin: 0 16px;
	background: rgba(255, 255, 255, .22);
}

.rz-footer-links a {
	color: var(--rz-text-dim);
	font-size: 13.5px;
	line-height: 1.4;
	text-decoration: none;
	transition: color .15s var(--rz-ease);
}

.rz-footer-links a:hover,
.rz-footer-links a:focus {
	color: var(--rz-cyan-ink);
	text-decoration: none;
}

@media (max-width: 600px) {
	.rz-footer-links li + li:before { margin: 0 11px; }
	.rz-footer-links a { font-size: 13px; }
}


/* --------------------------------------------------------------------------
   BLOG / SEARCH SIDEBAR

   The search results page uses `.blog-sidebar`, which the earlier passes never
   reached because nothing in the local replica linked to it. Measured on the
   rendered page:

     #searchsubmit                  1.05:1  -- dark text on dark, invisible
     .widget-top-sellers li         #ffffff -- white rows in a dark panel
     .blog-sidebar li::before       #0ad2ad -- a teal chevron, off-brand

   The teal comes from `color.css.php`, which the theme generates from a saved
   theme option, so its exact value differs between installs. These rules do not
   depend on the value.
   -------------------------------------------------------------------------- */

/* The theme positions the submit button ON TOP of the right-hand end of the
   field — measured at a 48px overlap, so anything typed runs underneath it.
   Laying the wrapper out as a flex row puts them side by side instead. */
.blog-sidebar .searchform > div,
.blog-sidebar #searchform > div,
.sidebar .searchform > div {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Keep the visually-hidden label out of the flex flow rather than hiding it,
   so it still reaches screen readers. */
.blog-sidebar .searchform .screen-reader-text,
.sidebar .searchform .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	background: transparent !important;
}

.blog-sidebar .searchform input[type="text"],
.sidebar .searchform input[type="text"] { flex: 1 1 auto; min-width: 0; }

.blog-sidebar .searchform input[type="submit"],
.blog-sidebar #searchsubmit,
.sidebar .searchform input[type="submit"] {
	flex: 0 0 auto;
	position: static !important;
	right: auto !important;
	top: auto !important;
}

/* The search field. The theme sets this to #fff explicitly, and on some option
   sets that rule wins, so it is restated at higher specificity. */
.blog-sidebar .searchform input[type="text"],
.blog-sidebar #searchform input[type="text"],
.sidebar .searchform input[type="text"] {
	background: var(--rz-nav-panel) !important;
	border: 1px solid var(--rz-line) !important;
	border-radius: 8px !important;
	color: var(--rz-text) !important;
	height: var(--rz-btn-h);
	padding: 0 14px;
	box-shadow: none;
}

.blog-sidebar .searchform input[type="text"]::placeholder,
.sidebar .searchform input[type="text"]::placeholder { color: #8b989f; }

.blog-sidebar .searchform input[type="text"]:focus,
.sidebar .searchform input[type="text"]:focus {
	border-color: var(--rz-cyan-ink) !important;
	outline: none;
}

/* The submit button. It was rendering as dark-on-dark; on installs where the
   theme's accent option is set it comes out teal instead. Either way it is not
   a ReampZone button. */
.blog-sidebar .searchform input[type="submit"],
.blog-sidebar #searchsubmit,
.sidebar .searchform input[type="submit"] {
	background: var(--rz-yellow-ink) !important;
	border: 0 !important;
	border-radius: calc(var(--rz-btn-h) / 2) !important;
	color: #0f1214 !important;
	height: var(--rz-btn-h);
	padding: 0 22px;
	font-size: var(--rz-btn-fs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .15s var(--rz-ease), box-shadow .15s var(--rz-ease);
}

.blog-sidebar .searchform input[type="submit"]:hover,
.blog-sidebar #searchsubmit:hover,
.sidebar .searchform input[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: var(--rz-glow-yellow);
}

/* Top-sellers rows ship a hard white background. */
.blog-sidebar .widget-top-sellers li,
.sidebar .widget-top-sellers li,
.blog-sidebar ul.cart_list li,
.blog-sidebar ul.product_list_widget li {
	background: transparent !important;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.blog-sidebar .widget-top-sellers li:last-child,
.sidebar .widget-top-sellers li:last-child { border-bottom: 0; }

.blog-sidebar .widget-top-sellers li a,
.sidebar .widget-top-sellers li a,
.blog-sidebar ul.cart_list li a { color: var(--rz-text) !important; }

.blog-sidebar .widget-top-sellers li a:hover,
.sidebar .widget-top-sellers li a:hover { color: var(--rz-cyan-ink) !important; }

/* The chevron marker, whatever colour the theme option produced. */
.blog-sidebar ul li:before,
.sidebar ul.edd-taxonomy-widget li:before,
.blog-sidebar .widget-top-sellers li:before { color: var(--rz-cyan-ink) !important; }


/* --------------------------------------------------------------------------
   "Added to cart" confirmation

   The theme ships `background: rgba(17,178,22,.4)` with square corners, which
   reads as a stray browser alert dropped onto the page rather than part of it.
   Kept green — it is a success message — but muted, rounded and given a border
   so it belongs to the card it appears in.
   -------------------------------------------------------------------------- */

.edd-cart-added-alert {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px !important;
	margin: 10px 0 0 !important;
	border: 1px solid rgba(64, 196, 99, .38);
	border-radius: 8px;
	background: rgba(64, 196, 99, .12) !important;
	color: #7ee08f !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.edd-cart-added-alert:before { color: #40c463; }


/* --------------------------------------------------------------------------
   RED ACCENT IN PRODUCT COPY

   Product descriptions mark key facts -- profile counts, cab and pedal names,
   "DON'T BE AFRAID TO TWEAK" -- with an inline colour typed in the editor.
   Pure #ff0000 measures 4.17:1 on the card surface, just under the 4.5:1 that
   15px body text needs. #ff3b30 is the same red one step brighter: 4.70:1 on
   the card and 5.30:1 on the page background.

   Done in CSS rather than by rewriting the content again, because the WordPress
   colour picker's red IS #ff0000 -- so anything typed in the editor from now on
   is corrected automatically, with no second migration. The `i` flag catches
   #FF0000 too, and the keyword `red` is the same colour.

   Scoped to content areas so it cannot reach plugin UI that uses red to mean
   "error". Remove this block to go back to the literal authored colour. */

.content-area [style*="#ff0000" i],
.content-area [style*="color: red" i],
.entry-content [style*="#ff0000" i],
.entry-content [style*="color: red" i],
.page-content [style*="#ff0000" i],
.page-content [style*="color: red" i] {
	color: #ff3b30 !important;
}


/* ==========================================================================
   UNIFORM CARD HEIGHTS

   MEASURED: product titles run 1-3 lines depending on how wide the card is
   (35 / 60 / 86px boxes at a 25.2px line-height), and because every grid is
   `display: block` with floated columns, a card with a 2-line title stood
   exactly one line -- 25px -- proud of its neighbours:

       archive   278 / 253 / 253 / 253 / 253 / 253
       homepage  318 / 318 / 293
       related   253 / 253 / 227

   A fixed `min-height` on the title cannot fix this without padding every
   short card with dead space, because the line count depends on column width.
   Equalising per ROW does: flex items on the same line stretch to match.

   Three different container mechanics are involved, so each is handled on its
   own terms rather than with one blunt selector.
   ========================================================================== */

/* --- 1. Bootstrap grids: archive listings and "You May Also Like" ---------- */

.row:has(> [class*="col-"] > .edd_download_inner) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.row:has(> [class*="col-"] > .edd_download_inner) > [class*="col-"] {
	display: flex;
	float: none;   /* flex ignores float anyway; stated so the intent is clear */
}

.row:has(> [class*="col-"] > .edd_download_inner) > [class*="col-"] > .edd_download_inner {
	width: 100%;
}

/* --- 2. Owl carousel on the homepage --------------------------------------
   `.owl-stage` is the sliding track: Owl moves it with a transform and sets
   each `.owl-item` width inline. `display: flex` does not disturb either --
   the transform still applies and the inline widths still win -- but it does
   make the items stretch to a common height. */

.owl-stage { display: flex; align-items: stretch; }

.owl-carousel .owl-item { display: flex; float: none; }

.owl-carousel .owl-item > .slider-item,
.owl-carousel .owl-item > * { width: 100%; }

.owl-item .edd_download_inner { height: 100%; }

/* --- 3. Shared: let the title area absorb the slack ------------------------
   With the card stretched, the extra height should go into the space between
   the title and the price, not leave the price floating mid-card. */

.edd_download_inner { display: flex; flex-direction: column; }

.edd_download_inner .product-details { flex: 1 1 auto; display: flex; flex-direction: column; }

.edd_download_inner .product-details .product-name { flex: 1 1 auto; }

.edd_download_inner .product-details .product-price,
.edd_download_inner .product-details .details-bottom { flex: 0 0 auto; margin-top: auto; }


/* ==========================================================================
   FOOTER BLEND -- longer, eased fade into the artwork

   The scrim already starts at exactly the page colour, so there is no colour
   mismatch at the seam. The problem is the RATE: it went from fully opaque to
   34% within 20% of the footer (~104px), so the artwork appeared to switch on
   rather than fade up -- and on the homepage the six `.fw-iconbox` cards end
   only 64px above the footer, so their hard 16px-radius edges sit right in
   that band and the two read as separate slabs butting together. Product
   pages have nothing there, which is why they always looked cleaner.

   A two-stop linear ramp also bands visibly on a dark gradient. These stops
   approximate an ease-out curve over roughly twice the distance.
   ========================================================================== */

#footer::before {
	background: linear-gradient(180deg,
		rgb(15, 18, 20)        0%,
		rgba(15, 18, 20, .985) 5%,
		rgba(15, 18, 20, .95)  10%,
		rgba(15, 18, 20, .89)  15%,
		rgba(15, 18, 20, .81)  20%,
		rgba(15, 18, 20, .71)  26%,
		rgba(15, 18, 20, .60)  32%,
		rgba(15, 18, 20, .50)  39%,
		rgba(15, 18, 20, .42)  46%,
		rgba(15, 18, 20, .37)  54%,
		rgba(15, 18, 20, .36)  64%,
		rgba(15, 18, 20, .40)  76%,
		rgba(15, 18, 20, .48)  88%,
		rgba(15, 18, 20, .58)  100%) !important;
}

/* The cards immediately above the footer get a softened bottom edge so they
   dissolve into the fade instead of ending on a crisp rounded rectangle.
   Only the last row is affected -- `:has()` scopes this to a container that is
   actually the final content block. */
.fw-main-row.section:last-of-type .fw-iconbox {
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .85);
}


/* ==========================================================================
   TESTIMONIALS -- restyled

   MEASURED problems on the stock component:
     - the speech-bubble tail is `border-top: 10px solid #ffffff` -- a pure
       white triangle on a dark card;
     - the avatar carries `border: 1px solid #dadada` AND
       `background: #ffffff`. With `border-radius: 50%` the white backing
       bleeds through the antialiased edge the whole way round, which is why a
       1px border reads as a thick white ring;
     - `.fw-testimonials-text` itself declares `color: #262626` (dark on dark);
       it only looks right because the inner <p> overrides it;
     - the quote sits at 15px with no visual anchor, so a section whose whole
       job is social proof reads as body copy.
   ========================================================================== */

/* --- the quote card ------------------------------------------------------- */

.fw-testimonials-text {
	position: relative;
	background-color: var(--rz-surface) !important;
	background-image: linear-gradient(180deg, #1e262a, var(--rz-surface)) !important;
	border: 1px solid var(--rz-line) !important;
	border-radius: 14px !important;
	color: var(--rz-text-dim) !important;
	padding: 28px 30px !important;
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7);
}

/* The theme draws TWO speech-bubble tails: `::after` (the real one, beneath
   the card) and `::before` -- a second triangle in #dadada sitting at the TOP
   of the card, which has no business being on a dark panel.

   An earlier attempt reused `::before` for a decorative quote mark, but the
   theme's own `content` declaration won; only the font-size and colour applied,
   so what rendered was an empty grey arrowhead above the quote. It is removed
   outright instead, and the copy now runs the full width of the card rather
   than being indented around a mark that no longer exists. */
.fw-testimonials-text::before {
	content: none !important;
	border: 0 !important;
	display: none !important;
}

.fw-testimonials-text p {
	color: var(--rz-text) !important;
	font-size: 16px !important;
	line-height: 1.7 !important;
	font-style: normal !important;   /* italic at length is tiring to read */
	margin: 0 !important;
}

/* --- the speech-bubble tail ----------------------------------------------- */

/* Recoloured to the card, and a second triangle one pixel below it continues
   the card's border so the tail reads as part of the panel rather than a
   white arrowhead stuck to it. */
.fw-testimonials-text::after {
	border-top-color: var(--rz-surface) !important;
	border-top-width: 11px !important;
	filter: drop-shadow(0 1px 0 var(--rz-line));
	left: 56px !important;
}

/* --- the avatar ----------------------------------------------------------- */

/* No ring at all. The theme shipped `border: 1px solid #dadada` over a white
   background, which bled through the circular clip and read as a bold white
   halo. Replacing it with a cyan box-shadow ring only swapped one ring for
   another -- the ask was for the ring to go, not to change colour. Just the
   photograph, circular, with a soft drop shadow for separation from the card. */
.fw-testimonials-avatar img {
	border: 0 !important;
	outline: 0 !important;
	background-color: transparent !important;
	box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .75);
}

/* --- attribution ---------------------------------------------------------- */

.fw-testimonials-meta { align-items: center; }

.fw-testimonials-author .author-name {
	color: var(--rz-text) !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: .01em;
}

.fw-testimonials-url a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--rz-text-dim) !important;
	font-size: 12px !important;
	text-decoration: none;
}

.fw-testimonials-url a:hover { color: var(--rz-cyan-ink) !important; }

/* --- pagination ----------------------------------------------------------- */

.fw-testimonials-pagination a {
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
	background: var(--rz-line) !important;
	margin: 0 4px !important;
	transition: background-color .16s var(--rz-ease), transform .16s var(--rz-ease);
}

.fw-testimonials-pagination a.selected,
.fw-testimonials-pagination a:hover {
	background: var(--rz-cyan) !important;
	transform: scale(1.15);
}


/* ==========================================================================
   BACKGROUND VIDEO -- hide YouTube's title / channel overlay

   MEASURED: the section is 1256x472 with `overflow: hidden`, and the player
   iframe is 1256x707 sitting at top: +1px -- so the top ~70px of the player,
   which is where YouTube paints the title and channel name, is fully in view
   on load.

   There is no parameter fix. The embed URL already carries `showinfo=0`, but
   YouTube DEPRECATED that parameter in September 2018 and ignores it; the
   title overlay is rendered inside their iframe and cannot be styled from the
   parent document (cross-origin).

   What does work is the 235px of vertical slack the layout already has. The
   media wrapper is centred instead of top-anchored, which is what a background
   video should do anyway: it crops ~118px from the top and bottom, putting the
   title bar outside the clip while the video still covers the full section.

   `pointer-events: none` stops a hover re-summoning the title and controls --
   correct for a decorative background that is not meant to be interacted with.
   ========================================================================== */

/* The background video is stock footage, so cropping costs nothing -- there is
   no subject to lose. Centring the player uses the 235px of vertical slack the
   layout already has (a 707px iframe in a 472px section) to push YouTube's
   title/channel overlay above the clip, while the video still covers the
   section fully.

   An earlier version used a gradient scrim instead, because the video was then
   footage of the site owner and the crop removed the top of the frame. With
   stock footage the crop is the cleaner answer: no darkened band over the
   artwork.

   There is no parameter alternative. The embed URL carries `showinfo=0`, but
   YouTube deprecated that parameter in September 2018 and ignores it, and the
   overlay is inside their cross-origin iframe so it cannot be styled from here.

   Audio needs no handling: Unyson's wallpaper plugin defaults `mute: true` and
   calls `player.mute()` on player-ready. */
.wallpaper .wallpaper-media.wallpaper-embed.ready,
.wallpaper-media.wallpaper-embed {
	top: 50% !important;
	transform: translateY(-50%) !important;
}

/* A hover would re-summon the title and controls. */
.wallpaper-media.wallpaper-embed iframe {
	pointer-events: none;
}


/* Testimonial card: the avatar was sitting flush against the bottom edge. */
.fw-testimonials-item { padding-bottom: 22px; }

.fw-testimonials-meta { margin-bottom: 0 !important; }


/* --------------------------------------------------------------------------
   About section: close the gap above the background image

   MEASURED: the section starts at y=2217 but its `.fw-container` at y=2255 --
   the theme puts `padding-top: 37.68px` on the intermediate `.centered`
   wrapper. The image row is absolutely positioned against the container, so it
   can never reach the section's own top edge, leaving a 26px band of page
   background between the video section above and the artwork.

   Zeroing that wrapper's vertical padding lets the image fill the section.
   Scoped with `:has()` so only the media-image section is affected -- every
   other `.centered` keeps its spacing.
   -------------------------------------------------------------------------- */

.fw-main-row.section:has(img.media-image) > .centered {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


/* ==========================================================================
   SEARCH BAR -- icon colour, icon centring, clickable submit, uniform heights

   MEASURED:
     - the magnifier is `.search-btn::after`, a FontAwesome glyph declared
       `color: rgba(0, 0, 0, .7)` -- black, from when the bar was a light box;
     - `.search-btn` carries `inset: 0 0 8px`, so the glyph sits 8px high of
       centre;
     - the submit input inside it computed `height: 0`. An earlier fix zeroed
       its font-size and line-height to hide the browser's default "Submit"
       label, which also collapsed the box -- so the icon was only clickable
       along a hairline;
     - the category dropdown is 55px tall against the field's 63px, with no gap
       between them, so the two controls neither line up nor separate.
   ========================================================================== */

/* --- the magnifier -------------------------------------------------------- */

.product-search .search-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	top: 0 !important;
	bottom: 0 !important;
	right: 0 !important;
	left: auto !important;
	width: 54px;
}

.product-search .search-btn::after {
	color: var(--rz-text-dim) !important;
	position: static !important;
	margin: 0 !important;
	transition: color .16s var(--rz-ease);
}

.product-search .search-btn:hover::after,
.product-search .search-fields:focus-within .search-btn::after {
	color: var(--rz-cyan-ink) !important;
}

/* The input is the click target and must cover the whole button, but stay
   invisible: the theme hides its default label with `font-size: 0`, and that
   has to remain or the browser paints the word "Submit" over the glyph. */
.product-search .search-btn input[type="submit"] {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	z-index: 2;
}

/* --- the two controls line up and stop touching --------------------------- */

.product-search .download_cat_filter,
.product-search .search-fields {
	height: 56px !important;
	box-sizing: border-box;
	vertical-align: top;
}

/* The dropdown and the field are laid out by the form, not by floats. The
   theme floated the dropdown left, which is what put them on one line -- so
   simply clearing the float dropped it onto its own row. Making the form a
   flex row keeps them side by side, aligns their tops exactly, and provides
   the gap that was missing when they were floated flush together. */
.product-search form,
.product-search-form form {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

.product-search .download_cat_filter {
	display: inline-flex !important;
	align-items: center;
	float: none !important;
	padding: 0 6px 0 18px !important;
}

.product-search .download_cat_filter select { height: 100%; padding: 0 !important; }

.product-search .search-fields {
	display: inline-flex !important;
	align-items: center;
	padding: 0 6px 0 4px !important;
}

.product-search .search-fields input[type="text"],
.product-search .search-fields input[type="search"] {
	height: 100% !important;
	padding: 0 18px !important;
}

/* --- the band around the bar ---------------------------------------------- */

/* 70px of padding above and below a 63px control made a 203px block. */
.section-first.colored-section {
	padding-top: 34px !important;
	padding-bottom: 34px !important;
}


/* The search form is exactly 800px and its two children measure 216 + 584 =
   800 exactly. Adding a gap took the row to 812 and `flex-wrap` dropped the
   field onto a second line. The dropdown keeps its intrinsic width and the
   field absorbs whatever is left, so the gap costs width instead of breaking
   the row. */
.product-search form,
.product-search-form form { flex-wrap: nowrap; }

.product-search .download_cat_filter { flex: 0 0 auto; }

.product-search .search-fields {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
}

/* Below the tablet breakpoint the two stack, which is the right behaviour --
   let them wrap and go full width rather than squeezing. */
@media (max-width: 767px) {
	.product-search form,
	.product-search-form form { flex-wrap: wrap; }

	.product-search .download_cat_filter,
	.product-search .search-fields { flex: 1 1 100%; }
}


/* ==========================================================================
   BACKGROUND VIDEO -- veil

   The stock footage is bright and warm (amber guitar, stage lighting) against
   a dark UI, so it competed with the testimonial card sitting on top of it.

   This is NOT the earlier top-strip scrim that was removed: that one was a
   gradient covering only the top 130px to hide the YouTube title, and it read
   as a black band across the artwork. This is an even wash over the whole
   frame, so the footage keeps its full composition and simply sits back.

   No extra element is added -- `jquery.fs.wallpaper.css` already paints a
   full-cover `::after` over the embed (it exists to stop clicks reaching the
   player); it just had no background. Tinting the layer that is already there
   avoids stacking another one on top.

   Tune with `--rz-video-veil`: 0 is the raw footage, 1 is solid. The
   desaturation is deliberate and mild -- it pulls the colour back without the
   greyed-out look that a heavy filter gives.
   ========================================================================== */

:root {
	--rz-video-veil: .58;
	--rz-video-saturate: .82;
}

.wallpaper .wallpaper-media.wallpaper-embed.ready::after,
.wallpaper-media.wallpaper-embed::after {
	content: "";
	position: absolute;
	inset: 0;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	background-color: rgba(15, 18, 20, var(--rz-video-veil));
}

.wallpaper-media.wallpaper-embed iframe,
.wallpaper-media.wallpaper-embed video {
	filter: saturate(var(--rz-video-saturate)) contrast(.96);
}


/* ==========================================================================
   PRODUCT DESCRIPTION -- its own card, aligned to the full-bleed photo

   The sidebar is all panels while the main column sat raw on the page, so the
   two halves did not read as one system.

   The catch, measured earlier: `.paper` has 30px padding and `.preview-area`
   uses `margin: -30px` to break out of it, so the product photo is full-bleed.
   Simply giving `.content-area` a background left it 30px narrower than the
   photo on both sides -- a ragged step. So the card breaks out to the same
   width as the photo and puts the 30px back as internal padding: the copy sits
   exactly where it did, but the panel edges now line up with the image above.
   ========================================================================== */

.paper .content-area {
	background-color: var(--rz-surface) !important;
	background-image: linear-gradient(180deg, #1e262a, var(--rz-surface)) !important;
	border: 1px solid var(--rz-line) !important;
	border-radius: 14px;
	margin-left: -30px;
	margin-right: -30px;
	padding: 28px 30px;
}

/* The related-products block is appended into the_content() by the
   layero-edd-related-downloads plugin, so it lands INSIDE .content-area. Its
   cards are panels themselves -- left alone they would sit as panels on a
   panel. Break it back out onto the page colour, joined by a hairline. */
.paper .content-area > div:has(#edd-related-items-wrapper),
.paper .content-area > div:has(#layero-related-downloads) {
	background: var(--rz-ink);
	margin: 28px -30px -28px;
	padding: 24px 30px 8px;
	border-top: 1px solid var(--rz-line);
	border-radius: 0 0 14px 14px;
}

@media (max-width: 767px) {
	.paper .content-area {
		margin-left: -16px;
		margin-right: -16px;
		padding: 20px 16px;
		border-radius: 12px;
	}
	.paper .content-area > div:has(#edd-related-items-wrapper),
	.paper .content-area > div:has(#layero-related-downloads) {
		margin: 20px -16px -20px;
		padding: 18px 16px 6px;
	}
}


/* ==========================================================================
   PRODUCT CARDS -- size to content, no reserved blank

   The excerpt experiment is reverted: the templates are back on
   `has_excerpt()`, so with no manual excerpts nothing renders there.

   That leaves the original problem, and this is where it actually came from.
   MEASURED at 1280px: card 283 = thumb 153 + details 128, but the details only
   contain 38px of padding and a 60px title -- 98px of content. The other 30px
   was `.product-details { flex: 1 1 auto }` stretching the block to fill a card
   whose height came from the row, with `.product-price` and `.details-bottom`
   both `display: none` (the `olam_hide_price_details` theme option) so nothing
   occupied the space it opened up.

   Nothing grows now, and the card no longer stretches to the row: the title is
   clamped to two lines, so every card is the same height on its own merits and
   equal-height has nothing left to add. Padding comes down as well.
   ========================================================================== */

.edd_download_inner .product-details {
	flex: 0 0 auto !important;
	padding: 14px 16px 16px !important;
}

/* Sizing to content instead of to the tallest sibling. Uniformity now comes
   from the two-line clamp, not from stretching. */
.row:has(> [class*="col-"] > .edd_download_inner) > [class*="col-"] { align-items: flex-start; }

.edd_download_inner { height: auto !important; }

.owl-carousel .owl-item > .slider-item,
.owl-carousel .owl-item .edd_download_inner { height: auto !important; }

.owl-stage { align-items: flex-start !important; }

/* The title is the only variable element left, so it carries the uniformity:
   exactly two lines whether the name is short or long. */
.edd_download_inner .product-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 0 !important;

	/* Line-height and min-height are pinned together on purpose. `min-height`
	   was 2.9em (46.4px) while a real two-line title rendered at 50px, because
	   the container's line-height and the inner link's line-height disagreed --
	   so one-line cards came out 4px shorter than two-line ones and the row
	   spread by exactly that. Setting both here means two lines is always
	   2 x 1.5em = 3em, and min-height is the same 3em. */
	line-height: 1.5;
	min-height: 3em;
}

.edd_download_inner .product-name a { line-height: 1.5; }


/* ==========================================================================
   RECENTLY RELEASED -- blended swipe strip

   Replaces a row of circle-masked squares. The old treatment cropped twice:
   WordPress cut a hard 170x170 square from wide artwork, then CSS masked that
   square to a circle, which discards a further 21% -- taking the corners and
   edges, exactly where the wordmarks sit.

   Now: 16:10 tiles touching edge to edge as one continuous band, the whole
   band dissolving into the page at both ends so it reads as continuing past
   the viewport and invites the swipe. No labels -- imagery only.

   Markup (strip mode only, set per section in the page builder):
     .rz-strip-wrap > .rz-strip-frame > ul.rz-strip > li > .gal-item
       > .gal-thumb > a > img
   ========================================================================== */

.rz-strip-frame { position: relative; }

ul.product-gallery.rz-strip {
	display: flex;
	gap: 0;                     /* touching -- one band, not six objects */
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;      /* the fade is the affordance, not a bar */

	/* The band dissolves into the page at both ends rather than stopping on a
	   hard edge.

	   Kept SHORT on purpose. An earlier version faded over 16% of the width,
	   which on a ~1900px strip is roughly 300px a side -- so wide that the
	   outer tiles read as missing rather than fading, and the band looked like
	   it stopped early. 7% dissolves the edge without swallowing a tile. The
	   intermediate stops are still needed: a plain two-stop ramp bands visibly
	   on a dark page. */
	-webkit-mask-image: linear-gradient(90deg,
		transparent 0, rgba(0,0,0,.35) 2%, rgba(0,0,0,.72) 4%,
		rgba(0,0,0,.92) 5.5%, #000 7%, #000 93%, rgba(0,0,0,.92) 94.5%,
		rgba(0,0,0,.72) 96%, rgba(0,0,0,.35) 98%, transparent 100%);
	        mask-image: linear-gradient(90deg,
		transparent 0, rgba(0,0,0,.35) 2%, rgba(0,0,0,.72) 4%,
		rgba(0,0,0,.92) 5.5%, #000 7%, #000 93%, rgba(0,0,0,.92) 94.5%,
		rgba(0,0,0,.72) 96%, rgba(0,0,0,.35) 98%, transparent 100%);
}

ul.product-gallery.rz-strip::-webkit-scrollbar { display: none; }

/* Above 20 items the template wraps TWO `.gal-item`s in one `li`. `display:
   contents` dissolves the `li` so every tile is a flex item either way. */
ul.product-gallery.rz-strip > li { display: contents; }

ul.product-gallery.rz-strip .gal-item {
	flex: 0 0 16.6667%;         /* six across; scrolls past that */
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
	/* `.gal-item` is where the round mask actually lives -- an inline stylesheet
	   sets `border-radius: 50%` with `overflow: hidden` on THIS element, not on
	   the thumb or the image. Zeroing the inner elements alone left the wrapper
	   still clipping, and once the tiles became 16:10 that clip rendered as an
	   oval rather than a circle. */
	border-radius: 0 !important;
	overflow: visible;
}

ul.product-gallery.rz-strip .gal-thumb,
ul.product-gallery.rz-strip .gal-thumb a {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;           /* no circle, and no seams between tiles */
	background: none;
	box-shadow: none;
	overflow: hidden;
}

ul.product-gallery.rz-strip .gal-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0 !important;
	transition: transform .3s var(--rz-ease), filter .3s var(--rz-ease);
	filter: saturate(.92);
}

/* Hover lifts one tile out of the band without moving its neighbours. */
ul.product-gallery.rz-strip .gal-item:hover img {
	transform: scale(1.04);
	filter: saturate(1.05);
}

ul.product-gallery.rz-strip .gal-thumb a:focus-visible {
	outline: 2px solid var(--rz-cyan);
	outline-offset: -2px;
}

@media (max-width: 991px) { ul.product-gallery.rz-strip .gal-item { flex-basis: 25%; } }
@media (max-width: 767px) { ul.product-gallery.rz-strip .gal-item { flex-basis: 33.3333%; } }
@media (max-width: 480px) { ul.product-gallery.rz-strip .gal-item { flex-basis: 45%; } }

@media (prefers-reduced-motion: reduce) {
	ul.product-gallery.rz-strip .gal-item:hover img { transform: none; }
}


/* --- Recently Released: breathing room + scroller controls ---------------- */

/* The View All button sat flush against the bottom of the band.
   NOTE: in strip mode the button is NOT in `.viewmoretext` -- that container
   belongs to the "details" branch of the template. Here it sits in a plain
   `.container.text-center` directly after the band. */
.rz-strip-wrap > .container.text-center,
.rz-strip-frame + .container.text-center { margin-top: 46px !important; }

.rz-strip-wrap > .container.text-center .btn { margin-top: 0; }

.rz-strip-wrap { margin-bottom: 10px; }

/* That same container carries `.scrollbar > .handle`, the drag bar belonging to
   the carousel the theme would normally initialise here. Strip mode
   deliberately keeps that JS from binding, so the handle is left orphaned --
   it renders as a stray grey bar with nothing driving it. */
.rz-strip-wrap .scrollbar,
.rz-strip-frame ~ .container .scrollbar { display: none !important; }

/* Arrows are injected by the mu-plugin so they only exist where the scroller
   actually initialises -- no dead controls if JS is unavailable. */
.rz-strip-frame { position: relative; }

.rz-strip-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rz-line);
	border-radius: 50%;
	background: rgba(15, 18, 20, .72);
	backdrop-filter: blur(6px);
	color: var(--rz-text);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .18s var(--rz-ease), background-color .18s var(--rz-ease);
}

.rz-strip-frame:hover .rz-strip-nav,
.rz-strip-nav:focus-visible { opacity: 1; }

.rz-strip-nav:hover { background: rgba(15, 18, 20, .92); color: var(--rz-cyan-ink); }
.rz-strip-nav:focus-visible { outline: 2px solid var(--rz-cyan); outline-offset: 2px; }

.rz-strip-prev { left: 10px; }
.rz-strip-next { right: 10px; }

/* Touch devices have no hover, and swiping is the natural gesture there. */
@media (hover: none) and (pointer: coarse) { .rz-strip-nav { display: none; } }


/* ==========================================================================
   Recently Released strip -- float containment + tile separation

   THE BUTTON BUG, properly diagnosed. `.product-gallery` carries
   `float: left` from the theme's style.css. A float is out of normal flow, so
   `.rz-strip-frame` collapsed to height 0 and the button's container measured
   its top margin from a zero-height box -- which is why the artwork appeared to
   sit on top of the button no matter how large that margin was set. Increasing
   the margin was treating a symptom; the frame simply had no height.
   ========================================================================== */

ul.product-gallery.rz-strip { float: none !important; }

ul.product-gallery.rz-strip .gal-item { float: none !important; }

/* Contains anything still floating inside, so the frame always has real height. */
.rz-strip-frame { display: flow-root; }

/* --- tiles separated rather than butted together ------------------------- */

ul.product-gallery.rz-strip {
	gap: 14px;
	padding: 0 2px;
}

ul.product-gallery.rz-strip .gal-thumb,
ul.product-gallery.rz-strip .gal-thumb a,
ul.product-gallery.rz-strip .gal-thumb img {
	border-radius: 10px !important;
}

/* Six across still, with the gaps taken out of the tile width rather than
   pushing the row wider. */
ul.product-gallery.rz-strip .gal-item {
	flex-basis: calc(16.6667% - 12px);
}

@media (max-width: 991px) { ul.product-gallery.rz-strip .gal-item { flex-basis: calc(25% - 11px); } }
@media (max-width: 767px) { ul.product-gallery.rz-strip .gal-item { flex-basis: calc(33.3333% - 10px); } }
@media (max-width: 480px) { ul.product-gallery.rz-strip .gal-item { flex-basis: calc(45% - 8px); } }


/* The section divider is `.fw-heading::after` -- a 72x3px gradient bar pinned
   `absolute; bottom: 0` to the heading, so it sits exactly on the heading's
   lower edge. With the strip following at `margin-top: 0`, the bar met the
   artwork with no gap at all. Spacing the strip rather than moving the bar
   keeps the divider where it belongs relative to its own heading. */
.rz-strip-wrap { margin-top: 36px; }

.fw-heading + .rz-strip-wrap { margin-top: 36px; }


/* ==========================================================================
   FEATURE ICON BOXES -- depth and contrast, without taking your colours away

   The six circles get their colour from an INLINE style written by the page
   builder (`style="background-color:#f2c40f"`), so each one is editable
   content, not theme CSS. Overriding them with a brand palette would look
   tidier but would quietly make that page-builder control do nothing.

   So the hue is kept and worked with instead: a translucent dark gradient is
   layered OVER the inline colour. `background-image` paints above
   `background-color`, so the hue still shows through -- it just gains depth and
   drops enough in luminance for the white glyph to read. Measured before:
   white on #f2c40f is about 1.9:1, below the 3:1 that WCAG 1.4.11 asks of
   meaningful graphics. The green was similar.
   ========================================================================== */

.fw-iconbox .fw-iconbox-image {
	position: relative;
	background-image: linear-gradient(155deg,
		rgba(15, 18, 20, .10) 0%,
		rgba(15, 18, 20, .34) 45%,
		rgba(15, 18, 20, .62) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .18),
		0 0 0 1px rgba(255, 255, 255, .09),
		0 10px 22px -12px rgba(0, 0, 0, .95);
	transition: transform .22s var(--rz-ease), box-shadow .22s var(--rz-ease);
}

.fw-iconbox .fw-iconbox-image i,
.fw-iconbox .fw-iconbox-image span {
	position: relative;
	z-index: 1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

/* --- the card ------------------------------------------------------------- */

.fw-iconbox.olam-iconbox-2,
div.fw-iconbox {
	background-image: linear-gradient(168deg, #1f272b 0%, var(--rz-surface) 58%, #161c1f 100%);
	border: 1px solid var(--rz-line);
	transition: transform .22s var(--rz-ease), border-color .22s var(--rz-ease), box-shadow .22s var(--rz-ease);
}

/* A hairline of brand colour along the top edge, so the row reads as a set
   rather than six unrelated panels. */
.fw-iconbox.olam-iconbox-2::before,
div.fw-iconbox::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 216, 255, .45), rgba(255, 212, 0, .35), transparent);
	pointer-events: none;
	border-radius: 16px 16px 0 0;
}

@media (prefers-reduced-motion: no-preference) {
	.fw-iconbox.olam-iconbox-2:hover,
	div.fw-iconbox:hover {
		transform: translateY(-3px);
		border-color: rgba(0, 216, 255, .28);
		box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .9);
	}

	.fw-iconbox:hover .fw-iconbox-image {
		transform: scale(1.06);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, .22),
			0 0 0 1px rgba(0, 216, 255, .35),
			0 12px 26px -12px rgba(0, 0, 0, .95);
	}
}

.fw-iconbox .fw-iconbox-title h3,
.fw-iconbox .fw-iconbox-title h4 { letter-spacing: -.01em; }


/* ==========================================================================
   FEATURE ICON BOXES -- alignment and proportion

   The circle was pinned to the top of the card (`align-items: flex-start`,
   measured at a constant 27px offset regardless of how much copy sat beside
   it), so on the longer cards it floated up by the heading while the text ran
   on well below it. Centring it against the whole block makes the pairing read
   as one unit and evens the row out visually.

   Sizes come up a little at the same time: at 74px with a 26px glyph the
   circle was slightly under-scaled next to a 16px heading and four lines of
   copy, which is part of why the row felt flat.
   ========================================================================== */

.fw-iconbox.olam-iconbox-2,
div.fw-iconbox {
	align-items: center !important;
	gap: 22px !important;
	padding: 28px 30px !important;
}

.fw-iconbox .fw-iconbox-image {
	width: 82px !important;
	height: 82px !important;
	min-width: 82px;
	flex: 0 0 82px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
}

.fw-iconbox .fw-iconbox-image i { font-size: 30px !important; line-height: 1; }

/* --- internal rhythm ------------------------------------------------------ */

.fw-iconbox .fw-iconbox-aside { min-width: 0; }

.fw-iconbox .fw-iconbox-title { margin: 0 0 7px !important; }

.fw-iconbox .fw-iconbox-title h3,
.fw-iconbox .fw-iconbox-title h4 {
	margin: 0 !important;
	font-size: 17px !important;
	line-height: 1.3;
}

.fw-iconbox .fw-iconbox-text p {
	margin: 0 !important;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--rz-text-dim);
}

/* On narrow screens the circle stacks above the copy, so centring it
   horizontally matters more than centring it vertically. */
@media (max-width: 767px) {
	.fw-iconbox.olam-iconbox-2,
	div.fw-iconbox {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 16px !important;
		padding: 22px !important;
	}

	.fw-iconbox .fw-iconbox-image {
		width: 68px !important;
		height: 68px !important;
		min-width: 68px;
		flex: 0 0 68px;
	}

	.fw-iconbox .fw-iconbox-image i { font-size: 26px !important; }
}


/* ==========================================================================
   PROFILE FORMAT + PACK INCLUDES  (single product sidebar)

   Format sits above contents on purpose: "will this work with my Kemper?"
   gates the purchase, "what is in it?" is detail. The format card carries a
   cyan edge so it reads as a distinct piece of information rather than a
   fourth identical sidebar panel.
   ========================================================================== */

.rz_profile_format_widget.sidebar-item {
	border-color: rgba(0, 216, 255, .30) !important;
}

.rz-format-name {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--rz-text) !important;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.01em;
	text-decoration: none;
	transition: color .16s var(--rz-ease);
}

.rz-format-name:hover { color: var(--rz-cyan-ink) !important; }

.rz-format-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--rz-cyan);
	flex: 0 0 auto;
	box-shadow: 0 0 0 3px rgba(0, 216, 255, .16);
}

.rz-format-note {
	margin: 9px 0 0 !important;
	color: var(--rz-text-dim);
	font-size: 12.5px;
	line-height: 1.55;
}

/* --- pack includes -------------------------------------------------------- */

ul.rz-includes {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.rz-includes .rz-inc {
	display: flex;
	align-items: flex-start;
	gap: 10px;          /* the mark must not touch its label */
	padding: 9px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* Every row keeps its full 9px top and bottom padding so each divider has an
   equal gap above and below it, all the way down the list. An earlier
   `:first-child { padding-top: 0 }` pulled the first row 9px closer to the
   heading rule than the others sat to theirs, which read as the first item
   being misaligned rather than as a tighter heading. Only the trailing rule is
   dropped -- there is nothing below it to separate. */
ul.rz-includes .rz-inc:last-child { border-bottom: 0; }

.rz-inc-mark {
	flex: 0 0 auto;
	font-size: 14px;
	/* Matches .rz-inc-name's computed line box (13.5px x 1.35 = 18.22px) so the
	   tick and its label share a first-line box. At 1.5 the mark's box was 21px
	   and the glyph sat 1.39px below the label's optical centre on every row. */
	line-height: 1.3;
}

.rz-inc.is-in  .rz-inc-mark { color: var(--rz-cyan-ink); }
.rz-inc.is-out .rz-inc-mark { color: #7d8b92; }

.rz-inc-body { min-width: 0; }

.rz-inc-name {
	display: block;
	font-size: 13.5px;
	line-height: 1.35;
}

.rz-inc.is-in  .rz-inc-name { color: var(--rz-text); }

/* De-emphasised, not unreadable. "Does this pack have Merged?" is a question
   customers actually ask, so the row that answers it has to stay legible --
   #6b787f measured 3.66:1 here, under the 4.5:1 minimum for 13.5px text. The
   step down from the included rows (14:1) still reads clearly as secondary. */
.rz-inc.is-out .rz-inc-name { color: #8b989f; }

.rz-inc-hint {
	display: block;
	margin-top: 2px;
	color: #7d8b92;
	font-size: 11.5px;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.rz-inc-name { font-size: 14px; }
	.rz-inc-hint { font-size: 12px; }
}

/* ------------------------------------------------------------------
   PRODUCT TILE BADGE -- profile format

   Sits inside `.thumb`, which the theme already gives `position: relative`
   and `overflow: hidden`, so the badge is clipped to the image and cannot
   escape the card on any grid width.

   Only non-universal formats are badged (see card_badge() in the plugin), so
   in practice this is empty across today's catalogue and appears the moment a
   PROFILE 2.0 pack is published.
   ------------------------------------------------------------------ */

.rz-card-badge {
	position: absolute;
	z-index: 3;
	top: 10px;
	left: 10px;
	max-width: calc(100% - 20px);
	padding: 5px 9px;
	border-radius: 4px;

	/* Solid enough to stay legible over a bright amp photo, without becoming a
	   block of chrome sitting on the product. */
	background: rgba(10, 15, 18, .82);
	border: 1px solid rgba(0, 209, 255, .38);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);

	color: var(--rz-cyan-ink);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .07em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	pointer-events: none;   /* never steals the click from the product link */
}

/* If BADGE_ALL_FORMATS is ever switched on, the universal format must read as
   reassurance rather than as a second warning -- so it drops the cyan alert
   colouring and sits back in neutral grey. */
.rz-card-badge.rz-badge-classic-profiler {
	border-color: rgba(255, 255, 255, .16);
	color: #c3ced4;
}

@media (max-width: 767px) {
	.rz-card-badge {
		top: 8px;
		left: 8px;
		padding: 4px 7px;
		font-size: 10px;
	}
}

/* ------------------------------------------------------------------
   REFINE -- archive sidebar filter
   ------------------------------------------------------------------ */

.rz-refine-group + .rz-refine-group {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

.rz-refine-label {
	margin-bottom: 8px;
	color: #8b989f;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Specificity note: the theme ships `.sidebar ul li` (0,1,2) and, inside a media
   query in responsive.css, `.sidebar-item ul li a` (0,1,3) with its own display
   and padding. A plain `a.rz-refine-opt` (0,1,1) loses to both -- and because the
   second one is mobile-only, the layout looked correct on desktop while silently
   falling back to the theme's block links on phones. Everything below is scoped
   through `.sidebar .rz-refine ul li` to clear those. */

.sidebar .rz-refine ul { margin: 0; padding: 0; list-style: none; }
.sidebar .rz-refine ul li { margin: 0; padding: 0; border: 0; }

.sidebar .rz-refine ul li a.rz-refine-opt {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 8px;
	margin: 0 -8px;          /* full-width hit area without shifting the text */
	border-radius: 5px;
	color: #c3ced4;
	font-size: 13px;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.sidebar .rz-refine ul li a.rz-refine-opt:hover,
.sidebar .rz-refine ul li a.rz-refine-opt:focus {
	background: rgba(255, 255, 255, .05);
	color: var(--rz-text);
	text-decoration: none;
}

.sidebar .rz-refine ul li a.rz-refine-opt:focus-visible {
	outline: 2px solid var(--rz-cyan-ink);
	outline-offset: -2px;
}

/* The box is the state indicator, so it has to read as checkable even before
   anything is ticked -- an empty square, not a blank gap. */
.rz-refine-box {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 3px;
	font-size: 11px;
	line-height: 1;
}

.rz-refine-name { flex: 1 1 auto; min-width: 0; }

.rz-refine-count {
	flex: 0 0 auto;
	color: #8b989f;
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

.sidebar .rz-refine ul li a.rz-refine-opt.is-on {
	color: var(--rz-text);
	font-weight: 600;
}

.sidebar .rz-refine ul li a.rz-refine-opt.is-on .rz-refine-box {
	background: var(--rz-cyan-ink);
	border-color: var(--rz-cyan-ink);
	color: #06121a;
}

.rz-refine-clear {
	display: inline-block;
	margin-top: 14px;
	color: #8b989f;
	font-size: 12px;
	text-decoration: underline;
}

.rz-refine-clear:hover,
.rz-refine-clear:focus { color: var(--rz-cyan-ink); }

@media (max-width: 767px) {
	.sidebar .rz-refine ul li a.rz-refine-opt { padding: 10px 8px; font-size: 14px; }
}

/* ------------------------------------------------------------------
   404 PAGE

   Two defects, both from the theme being built for a light background:

   1. `.title-404 { color: #000 }` -- the word is "oops" with "4o4" in red
      inside it. On this page the "oo" and "ps" were pure black on #0f1214,
      so the joke rendered as a floating "404" with invisible text either side.
   2. `font-size: 8em` fixed -- at 112px the word overflowed its own container
      by 146px on a phone.
   ------------------------------------------------------------------ */

.page-404 .section {
	padding: 72px 0 88px;   /* was 14px 0 -- the block sat jammed under the header */
}

.title-404 {
	/* Dim rather than full white: "oops" is the setup, the red 404 is the
	   punchline, and it should stay the brightest thing on the page. */
	color: var(--rz-text-dim);
	font-size: clamp(52px, 11vw, 112px);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: .01em;
}

.title-404 span { color: #e53935; }   /* 4.45:1 -- large text needs 3:1 */

.page-404 h4 {
	margin: 14px 0 0;
	color: var(--rz-text);
	font-size: 20px;
	font-weight: 400;
}

.rz-404-help {
	max-width: 34em;
	margin: 12px auto 0;
	color: var(--rz-text-dim);
	font-size: 15px;
	line-height: 1.6;
	/* Centred copy strands its last word ("here." alone on line two) without
	   this. Ignored by browsers that lack it, which just wrap as before. */
	text-wrap: balance;
}

/* A 404 on a shop is a lost sale unless it offers somewhere to go. */
.rz-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px 22px;
	margin-top: 28px;
}

a.rz-404-primary {
	display: inline-flex;
	align-items: center;
	height: var(--rz-btn-h);
	padding: 0 26px;
	border-radius: calc(var(--rz-btn-h) / 2);
	background: var(--rz-yellow-ink);
	color: #0f1214;
	font-size: var(--rz-btn-fs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .15s var(--rz-ease), box-shadow .15s var(--rz-ease);
}

a.rz-404-primary:hover,
a.rz-404-primary:focus {
	color: #0f1214;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--rz-glow-yellow);
}

a.rz-404-secondary {
	color: var(--rz-text-dim);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.rz-404-secondary:hover,
a.rz-404-secondary:focus { color: var(--rz-cyan-ink); }

@media (max-width: 767px) {
	.page-404 .section { padding: 48px 0 64px; }
	.rz-404-actions    { flex-direction: column; gap: 16px; }
	a.rz-404-primary   { width: 100%; max-width: 320px; justify-content: center; }
}