/*!
 * DRS Hub Marketplace — main stylesheet
 * Light design only. No dark mode, no frameworks, mobile-first.
 *
 * BUILD STATUS: covers global/base styles, header, footer, hero, homepage
 * sections, category chips, the app card, breadcrumbs, pagination, badges,
 * price badge, buttons, the single-app layout skeleton (header/body/
 * sidebar), screenshots gallery, version history, reviews list, and the
 * review form (added in Part 7 — see PART7_CHANGES.md). As of Part 8 (see
 * PART8_CHANGES.md) this file ALSO covers: search filters sidebar, search
 * results layout, the 404 page, the category taxonomy header + category
 * card grid, and generic page/single/archive (non-app) content. Styling
 * for account panels (My Apps / My Downloads / Wishlist) and WooCommerce
 * cart/checkout/my-account overrides is STILL NOT WRITTEN — see
 * HANDOFF_PROMPT_PART9.md. Those template parts don't exist as PHP files
 * yet either, so there's nothing unstyled in production; they're next.
 */

:root {
	--drs-white: #ffffff;
	--drs-off-white: #f6f7f9;
	--drs-border: #e3e6ea;
	--drs-navy: #16213a;
	--drs-navy-muted: #4b5567;
	--drs-blue: #1f6feb;
	--drs-blue-dark: #1552b8;
	--drs-green: #1a9e54;
	--drs-amber: #f5a623;
	--drs-red: #d64545;

	--drs-radius-sm: 6px;
	--drs-radius-md: 10px;
	--drs-radius-lg: 16px;
	--drs-shadow-sm: 0 1px 2px rgba(22, 33, 58, 0.06);
	--drs-shadow-md: 0 4px 16px rgba(22, 33, 58, 0.08);
	--drs-container: 1280px;
	--drs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--drs-font);
	color: var(--drs-navy);
	background: var(--drs-white);
	line-height: 1.55;
	font-size: 16px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--drs-blue);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4 {
	font-weight: 700;
	color: var(--drs-navy);
	line-height: 1.25;
	margin: 0 0 0.5em;
}

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

button {
	font-family: inherit;
}

:focus-visible {
	outline: 3px solid var(--drs-blue);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0; padding: 0; margin: -1px;
}

.drs-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 1000;
	background: var(--drs-blue);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: var(--drs-radius-sm);
}

.drs-skip-link:focus {
	top: 1rem;
}

.drs-container {
	max-width: var(--drs-container);
	margin: 0 auto;
	padding: 0 1rem;
}

@media (min-width: 768px) {
	.drs-container {
		padding: 0 1.5rem;
	}
}

/* ---------- Buttons ---------- */
.drs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	border: 1px solid transparent;
	border-radius: var(--drs-radius-sm);
	padding: 0.65rem 1.25rem;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	background: var(--drs-off-white);
	color: var(--drs-navy);
	text-decoration: none;
}

.drs-btn:hover {
	text-decoration: none;
	filter: brightness(0.97);
}

.drs-btn--primary {
	background: var(--drs-blue);
	color: #fff;
}

.drs-btn--primary:hover {
	background: var(--drs-blue-dark);
}

.drs-btn--ghost {
	background: transparent;
	border-color: var(--drs-border);
}

.drs-btn--large {
	padding: 0.85rem 1.75rem;
	font-size: 1.05rem;
}

/* ---------- Header ---------- */
.drs-site-header {
	border-bottom: 1px solid var(--drs-border);
	background: var(--drs-white);
	position: sticky;
	top: 0;
	z-index: 100;
}

.drs-site-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	flex-wrap: wrap;
}

.drs-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 800;
	font-size: 1.15rem;
	color: var(--drs-navy);
}

.drs-brand:hover {
	text-decoration: none;
}

.drs-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--drs-radius-sm);
	background: var(--drs-blue);
	color: #fff;
	font-size: 0.85rem;
}

.drs-nav-toggle {
	margin-left: auto;
	display: inline-flex;
	background: none;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-sm);
	padding: 0.5rem 0.65rem;
}

.drs-primary-nav {
	flex-basis: 100%;
	order: 3;
	display: none;
}

.drs-primary-nav.is-open {
	display: block;
}

.drs-primary-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.drs-primary-nav__list a {
	display: block;
	padding: 0.5rem 0;
	color: var(--drs-navy);
	font-weight: 500;
}

.drs-header-search {
	display: none;
}

.drs-header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}

.drs-header-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--drs-off-white);
	color: var(--drs-navy);
}

@media (min-width: 1024px) {
	.drs-nav-toggle {
		display: none;
	}

	.drs-primary-nav {
		display: block;
		flex-basis: auto;
		order: 2;
	}

	.drs-primary-nav__list {
		flex-direction: row;
		gap: 1.5rem;
	}

	.drs-primary-nav__list a {
		padding: 0;
	}

	.drs-header-search {
		display: flex;
		order: 2;
		margin-left: 1rem;
		flex: 1 1 320px;
		max-width: 420px;
		border: 1px solid var(--drs-border);
		border-radius: var(--drs-radius-md);
		overflow: hidden;
	}

	.drs-header-search input[type="search"] {
		border: 0;
		padding: 0.55rem 0.85rem;
		flex: 1;
		font-family: inherit;
	}

	.drs-header-search button {
		border: 0;
		background: var(--drs-off-white);
		padding: 0 1rem;
		cursor: pointer;
	}

	.drs-header-actions {
		order: 3;
		margin-left: 1rem;
	}
}

/* ---------- Footer ---------- */
.drs-site-footer {
	background: var(--drs-off-white);
	border-top: 1px solid var(--drs-border);
	margin-top: 3rem;
}

.drs-site-footer__inner {
	padding: 2.5rem 1rem;
	display: grid;
	gap: 2rem;
}

.drs-site-footer__tagline {
	color: var(--drs-navy-muted);
	max-width: 40ch;
}

.drs-site-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.drs-site-footer__copyright {
	color: var(--drs-navy-muted);
	font-size: 0.875rem;
}

@media (min-width: 768px) {
	.drs-site-footer__inner {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

/* ---------- Hero ---------- */
.drs-hero {
	background: linear-gradient(180deg, var(--drs-off-white) 0%, var(--drs-white) 100%);
	padding: 3rem 0;
	border-bottom: 1px solid var(--drs-border);
}

.drs-hero__inner {
	text-align: center;
}

.drs-hero__title {
	font-size: 1.9rem;
	margin-bottom: 0.5rem;
}

.drs-hero__subtitle {
	color: var(--drs-navy-muted);
	max-width: 55ch;
	margin: 0 auto 1.5rem;
}

.drs-hero__search {
	display: flex;
	max-width: 560px;
	margin: 0 auto;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
}

.drs-hero__search input[type="search"] {
	flex: 1 1 260px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-md);
	font-family: inherit;
	font-size: 1rem;
}

@media (min-width: 768px) {
	.drs-hero {
		padding: 4.5rem 0;
	}

	.drs-hero__title {
		font-size: 2.6rem;
	}
}

/* ---------- Sections & grids ---------- */
.drs-homepage-sections {
	padding: 2rem 0 3rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.drs-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.drs-section-header__title {
	font-size: 1.3rem;
	margin: 0;
}

.drs-section-header__see-all {
	font-weight: 600;
	white-space: nowrap;
}

.drs-app-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.drs-app-grid--scroll {
	display: flex;
	overflow-x: auto;
	gap: 1rem;
	padding-bottom: 0.5rem;
	scroll-snap-type: x proximity;
}

.drs-app-grid--scroll .drs-app-card {
	flex: 0 0 200px;
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.drs-app-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.drs-app-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1280px) {
	.drs-app-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* ---------- App card ---------- */
.drs-app-card {
	background: var(--drs-white);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-md);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.drs-app-card:hover {
	box-shadow: var(--drs-shadow-md);
	transform: translateY(-2px);
}

.drs-app-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	padding: 1rem;
}

.drs-app-card__link:hover {
	text-decoration: none;
}

.drs-app-card__icon {
	position: relative;
	width: 64px;
	height: 64px;
	margin-bottom: 0.75rem;
	border-radius: var(--drs-radius-sm);
	overflow: hidden;
}

.drs-app-card__icon img,
.drs-app-icon {
	border-radius: var(--drs-radius-sm);
}

.drs-app-icon--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--drs-off-white);
	color: var(--drs-navy-muted);
	font-weight: 700;
	font-size: 1.4rem;
}

.drs-app-card__name {
	font-size: 0.95rem;
	margin: 0 0 0.15rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.drs-app-card__category {
	font-size: 0.8rem;
	color: var(--drs-navy-muted);
	margin: 0 0 0.4rem;
}

.drs-app-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 0.78rem;
	color: var(--drs-navy-muted);
}

.drs-demo-flag {
	position: absolute;
	top: 4px;
	right: 4px;
	background: var(--drs-amber);
	color: #16213a;
	font-size: 0.65rem;
	font-weight: 700;
	padding: 0.1rem 0.35rem;
	border-radius: 4px;
}

/* ---------- Badges & price ---------- */
.drs-app-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.5rem 0;
}

.drs-app-badge {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: var(--drs-off-white);
	color: var(--drs-navy-muted);
}

.drs-app-badge--free { background: rgba(26, 158, 84, 0.12); color: var(--drs-green); }
.drs-app-badge--sale { background: rgba(214, 69, 69, 0.12); color: var(--drs-red); }
.drs-app-badge--featured,
.drs-app-badge--new { background: rgba(31, 111, 235, 0.12); color: var(--drs-blue); }
.drs-app-badge--popular,
.drs-app-badge--top-rated { background: rgba(245, 166, 35, 0.15); color: #8a5a00; }

.drs-price-badge {
	font-weight: 700;
}

.drs-price--free {
	color: var(--drs-green);
}

.drs-stars {
	color: var(--drs-amber);
	letter-spacing: 1px;
}

.drs-no-rating,
.drs-rating-count {
	color: var(--drs-navy-muted);
	font-size: 0.85rem;
}

/* ---------- Category chips ---------- */
.drs-category-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.drs-category-chip {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1rem;
	background: var(--drs-off-white);
	border-radius: var(--drs-radius-md);
	color: var(--drs-navy);
	font-weight: 600;
}

.drs-category-chip:hover {
	text-decoration: none;
	background: #eef1f5;
}

.drs-category-chip__image {
	width: 28px;
	height: 28px;
	border-radius: 6px;
}

@media (min-width: 768px) {
	.drs-category-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Breadcrumbs ---------- */
.drs-breadcrumbs {
	padding: 1rem 0 0;
	font-size: 0.85rem;
	color: var(--drs-navy-muted);
}

.drs-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.drs-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 0.35rem;
	color: var(--drs-border);
}

/* ---------- Pagination ---------- */
.drs-pagination {
	margin: 2rem 0;
	display: flex;
	justify-content: center;
}

.drs-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.drs-pagination__list a,
.drs-pagination__list span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 0.6rem;
	border-radius: var(--drs-radius-sm);
	border: 1px solid var(--drs-border);
	color: var(--drs-navy);
}

.drs-pagination__list a:hover {
	text-decoration: none;
	background: var(--drs-off-white);
}

.drs-pagination__list .current {
	background: var(--drs-blue);
	color: #fff;
	border-color: var(--drs-blue);
}

/* ---------- Empty state ---------- */
.drs-empty-state {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--drs-navy-muted);
}

.drs-empty-state__icon {
	font-size: 2.5rem;
	margin: 0 0 0.5rem;
}

.drs-empty-state--error {
	color: var(--drs-red);
}

/* ---------- Archive header ---------- */
.drs-archive-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.5rem 0 1.25rem;
}

.drs-sort-form select {
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-sm);
	font-family: inherit;
}

/* ---------- Single app page ---------- */
.drs-app-header {
	background: var(--drs-off-white);
	border-bottom: 1px solid var(--drs-border);
	padding: 2rem 0;
}

.drs-app-header__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.drs-app-header__icon {
	position: relative;
	width: 96px;
	height: 96px;
}

.drs-app-header__icon img {
	border-radius: var(--drs-radius-lg);
	box-shadow: var(--drs-shadow-md);
}

.drs-app-header__name {
	font-size: 1.6rem;
	margin-bottom: 0.25rem;
}

.drs-app-header__developer {
	color: var(--drs-navy-muted);
	margin-bottom: 0.5rem;
}

.drs-app-header__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0.75rem 0;
	font-size: 0.9rem;
}

.drs-app-header__stat strong {
	display: block;
	font-size: 1.05rem;
}

.drs-app-header__short-description {
	color: var(--drs-navy-muted);
	max-width: 65ch;
}

.drs-app-header__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.75rem;
}

@media (min-width: 768px) {
	.drs-app-header__inner {
		flex-direction: row;
		align-items: flex-start;
	}

	.drs-app-header__icon {
		flex: 0 0 auto;
	}
}

.drs-app-body {
	padding: 2.5rem 0;
	display: grid;
	gap: 2.5rem;
}

.drs-app-section {
	margin-bottom: 2.25rem;
}

.drs-app-section h2 {
	font-size: 1.15rem;
	border-bottom: 1px solid var(--drs-border);
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

.drs-app-info-list div {
	display: flex;
	justify-content: space-between;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--drs-border);
	font-size: 0.9rem;
}

.drs-app-info-list dt {
	color: var(--drs-navy-muted);
}

.drs-sha256 code {
	display: block;
	word-break: break-all;
	background: var(--drs-off-white);
	padding: 0.6rem;
	border-radius: var(--drs-radius-sm);
	font-size: 0.75rem;
	margin-top: 0.25rem;
}

.drs-feature-list li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.5rem;
}

.drs-feature-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--drs-green);
	font-weight: 700;
}

@media (min-width: 1024px) {
	.drs-app-body {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}
}

.drs-app-related {
	padding-bottom: 3rem;
}

/* ==========================================================================
   Part 7 additions: screenshots gallery, version history, reviews, review
   form. Everything below reuses the existing --drs-* tokens and component
   classes (.drs-btn, .drs-badge, .drs-app-section) — no new design
   language introduced. Search filters, account panels, and WooCommerce
   overrides are NOT covered here — see HANDOFF_PROMPT_PART8.md.
   ========================================================================== */

/* ---------- Screenshots gallery ---------- */
.drs-gallery__strip {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.drs-gallery__thumb {
	flex: 0 0 auto;
	width: 220px;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-md);
	overflow: hidden;
	padding: 0;
	background: var(--drs-off-white);
	cursor: pointer;
	scroll-snap-align: start;
}

.drs-gallery__thumb:focus-visible {
	outline: 2px solid var(--drs-blue);
	outline-offset: 2px;
}

.drs-gallery__img {
	display: block;
	width: 100%;
	height: auto;
}

.drs-gallery__lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.drs-gallery__lightbox[hidden] {
	display: none;
}

.drs-gallery__lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(22, 33, 58, 0.85);
}

.drs-gallery__lightbox-dialog {
	position: relative;
	z-index: 1;
	max-width: min(92vw, 900px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.drs-gallery__lightbox-img {
	max-width: 100%;
	max-height: 76vh;
	border-radius: var(--drs-radius-md);
	box-shadow: var(--drs-shadow-md);
}

.drs-gallery__caption {
	color: var(--drs-white);
	margin-top: 0.75rem;
	font-size: 0.85rem;
}

.drs-gallery__close,
.drs-gallery__nav {
	position: absolute;
	background: var(--drs-white);
	border: none;
	border-radius: 999px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	color: var(--drs-navy);
	font-size: 1rem;
}

.drs-gallery__close {
	top: -1.25rem;
	right: -1.25rem;
}

.drs-gallery__nav--prev {
	left: -1.25rem;
	top: 50%;
	transform: translateY(-50%);
}

.drs-gallery__nav--next {
	right: -1.25rem;
	top: 50%;
	transform: translateY(-50%);
}

/* ---------- Version history ---------- */
.drs-version-history__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.drs-version-history__table th,
.drs-version-history__table td {
	text-align: left;
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var(--drs-border);
	vertical-align: top;
}

.drs-version-history__number {
	font-weight: 600;
	color: var(--drs-navy);
	margin-right: 0.4rem;
}

.drs-version-history__changelog p {
	margin: 0 0 0.4rem;
}

.drs-version-history__no-changelog,
.drs-version-history__locked {
	color: var(--drs-navy-muted);
}

.drs-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
}

.drs-badge--current {
	background: rgba(26, 158, 84, 0.12);
	color: var(--drs-green);
}

.drs-badge--archived {
	background: var(--drs-off-white);
	color: var(--drs-navy-muted);
}

.drs-badge--verified {
	background: rgba(31, 111, 235, 0.1);
	color: var(--drs-blue-dark);
}

/* ---------- Reviews list ---------- */
.drs-reviews-list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.drs-review {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--drs-border);
}

.drs-review:first-child {
	padding-top: 0;
}

.drs-review__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.drs-review__avatar {
	border-radius: 999px;
}

.drs-review__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
}

.drs-review__author {
	font-weight: 600;
	color: var(--drs-navy);
}

.drs-review__date {
	color: var(--drs-navy-muted);
}

.drs-review__title {
	font-size: 1rem;
	margin: 0.4rem 0 0.25rem;
}

.drs-review__body p {
	margin: 0 0 0.5rem;
	color: var(--drs-navy-muted);
}

/* ---------- Review form ---------- */
.drs-review-form {
	margin: 1.5rem 0 2rem;
	padding: 1.25rem;
	background: var(--drs-off-white);
	border-radius: var(--drs-radius-md);
}

.drs-review-form--gate {
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.drs-review-form p {
	margin: 0 0 1rem;
}

.drs-review-form label {
	display: block;
	font-weight: 600;
	color: var(--drs-navy);
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
}

.drs-review-form input[type="text"],
.drs-review-form textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-sm);
	font-family: var(--drs-font);
	font-size: 0.9rem;
}

.drs-star-input {
	display: inline-flex;
	gap: 0.25rem;
}

.drs-star-input__star {
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--drs-border);
	padding: 0;
}

.drs-star-input__star.is-active,
.drs-star-input__star[aria-checked="true"] {
	color: var(--drs-amber);
}

.drs-review-form__note {
	font-size: 0.8rem;
	color: var(--drs-navy-muted);
}

/* ==========================================================================
   Part 8 additions: search filters, search results layout, 404, category
   taxonomy header + category grid, generic page/single/archive content.
   Reuses existing tokens (var(--drs-*)) and class conventions (.drs-btn,
   .drs-badge, .drs-empty-state, .drs-archive-header, .drs-sort-form,
   .drs-container) rather than inventing a second design language.
   ========================================================================== */

/* ---------- Buttons: full-width variant (search filters submit) ---------- */
.drs-btn--full {
	width: 100%;
}

.drs-btn--small {
	padding: 0.4rem 0.85rem;
	font-size: 0.85rem;
}

/* ---------- Search layout ---------- */
.drs-search-header {
	margin: 1.5rem 0 1.25rem;
}

.drs-search-header__title {
	margin-bottom: 0.25rem;
	word-break: break-word;
}

.drs-search-header__count {
	color: var(--drs-navy-muted);
	margin: 0;
}

.drs-search-layout {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-bottom: 3rem;
}

.drs-search-layout__results {
	min-width: 0;
}

@media (min-width: 1024px) {
	.drs-search-layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.drs-search-filters {
		flex: 0 0 260px;
	}

	.drs-search-layout__results {
		flex: 1 1 auto;
	}
}

/* ---------- Search filters sidebar ---------- */
.drs-search-filters {
	background: var(--drs-off-white);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-md);
	padding: 1.25rem;
}

.drs-search-filters__group {
	border: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.drs-search-filters__group:last-of-type {
	margin-bottom: 1.5rem;
}

.drs-search-filters__heading {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--drs-navy-muted);
	margin: 0 0 0.6rem;
	padding: 0;
}

.drs-search-filters__group select {
	width: 100%;
	padding: 0.55rem 0.65rem;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-sm);
	font-family: inherit;
	font-size: 0.9rem;
	background: var(--drs-white);
	color: var(--drs-navy);
}

.drs-search-filters__radio {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	margin-bottom: 0.4rem;
	cursor: pointer;
}

.drs-search-filters__radio input {
	accent-color: var(--drs-blue);
}

.drs-search-filters__actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.drs-search-filters__reset {
	text-align: center;
	font-size: 0.85rem;
	color: var(--drs-navy-muted);
}

/* ---------- Category taxonomy header ---------- */
.drs-category-header {
	position: relative;
	background: var(--drs-off-white);
	border-bottom: 1px solid var(--drs-border);
	margin-bottom: 1.5rem;
}

.drs-category-header__image {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.drs-category-header__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.drs-category-header--has-image .drs-category-header__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22, 33, 58, 0.55), rgba(22, 33, 58, 0.75));
}

.drs-category-header__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 2rem 0;
}

.drs-category-header--has-image .drs-category-header__title,
.drs-category-header--has-image .drs-category-header__description,
.drs-category-header--has-image .drs-category-header__count {
	color: var(--drs-white);
}

.drs-category-header__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	border-radius: var(--drs-radius-md);
	background: var(--drs-white);
	color: var(--drs-blue);
	box-shadow: var(--drs-shadow-sm);
}

.drs-category-header__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-bottom: 0.35rem;
}

.drs-category-header__description {
	margin: 0 0 0.35rem;
	color: var(--drs-navy-muted);
	max-width: 60ch;
}

.drs-category-header__count {
	margin: 0;
	color: var(--drs-navy-muted);
	font-size: 0.9rem;
}

.drs-sort-form--category {
	margin: 1.25rem 0;
}

/* ---------- Category grid (Categories page template) ---------- */
.drs-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
	padding-bottom: 3rem;
}

.drs-category-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	background: var(--drs-white);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-md);
	color: var(--drs-navy);
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.drs-category-card:hover {
	box-shadow: var(--drs-shadow-md);
	transform: translateY(-2px);
	text-decoration: none;
}

.drs-category-card__image {
	margin: -1.5rem -1.5rem 0.5rem;
	border-radius: var(--drs-radius-md) var(--drs-radius-md) 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.drs-category-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.drs-category-card__icon {
	font-size: 1.5rem;
	color: var(--drs-blue);
}

.drs-category-card__name {
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.drs-category-card__count {
	color: var(--drs-navy-muted);
	font-size: 0.85rem;
}

.drs-badge--featured {
	background: rgba(245, 166, 35, 0.15);
	color: var(--drs-amber);
}

/* ---------- 404 ---------- */
.drs-404 {
	padding: 3rem 0 4rem;
}

.drs-404__panel {
	max-width: 480px;
	margin: 0 auto;
	background: var(--drs-off-white);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-lg);
	padding: 3rem 1.5rem;
}

.drs-404__title {
	margin-bottom: 0.5rem;
}

.drs-404__search {
	display: flex;
	gap: 0.5rem;
	margin: 1.5rem 0 1rem;
}

.drs-404__search input[type="search"] {
	flex: 1 1 auto;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-sm);
	font-family: inherit;
	font-size: 0.95rem;
}

.drs-404__back {
	display: inline-flex;
}

/* ---------- Generic page / single post / archive (non-app) content ---------- */
.drs-page {
	padding: 2rem 0 3rem;
}

.drs-page__header {
	margin-bottom: 1.5rem;
}

.drs-page__title {
	margin-bottom: 0;
}

.drs-page__thumbnail {
	margin-bottom: 1.5rem;
	border-radius: var(--drs-radius-md);
	overflow: hidden;
}

.drs-page__content {
	max-width: 72ch;
	line-height: 1.7;
}

.drs-page__content p {
	margin: 0 0 1.2em;
}

.drs-page__content img {
	border-radius: var(--drs-radius-sm);
}

.drs-page__pages-nav {
	margin-top: 1.5rem;
	font-weight: 600;
}

.drs-post__meta {
	color: var(--drs-navy-muted);
	font-size: 0.9rem;
	margin: 0.25rem 0 0;
}

.drs-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.drs-post__tags li a {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	background: var(--drs-off-white);
	border-radius: 999px;
	font-size: 0.85rem;
	color: var(--drs-navy);
}

.drs-post__adjacent {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 2rem 0;
	padding: 1.25rem 0;
	border-top: 1px solid var(--drs-border);
	border-bottom: 1px solid var(--drs-border);
}

.drs-post__adjacent-link {
	font-weight: 600;
}

.drs-post__adjacent-link--next {
	text-align: right;
}

@media (min-width: 640px) {
	.drs-post__adjacent {
		flex-direction: row;
		justify-content: space-between;
	}
}

.drs-page__comments {
	margin-top: 2.5rem;
	max-width: 72ch;
}

/* Generic archive fallback (category/tag/date/author — not /apps/) */
.drs-post-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 1.5rem 0 2rem;
}

.drs-post-list__item {
	display: flex;
	gap: 1.25rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--drs-border);
}

.drs-post-list__thumbnail {
	flex: 0 0 160px;
	border-radius: var(--drs-radius-sm);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.drs-post-list__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.drs-post-list__body {
	min-width: 0;
}

.drs-post-list__title {
	margin-bottom: 0.25rem;
}

.drs-post-list__title a {
	color: var(--drs-navy);
}

.drs-post-list__meta {
	color: var(--drs-navy-muted);
	font-size: 0.85rem;
	margin: 0 0 0.5rem;
}

@media (max-width: 480px) {
	.drs-post-list__item {
		flex-direction: column;
	}

	.drs-post-list__thumbnail {
		flex-basis: auto;
	}
}

/* ==========================================================================
   WooCommerce — Cart / Checkout / My Account (Part 11)

   inc/woocommerce.php dequeues WooCommerce's bundled stylesheets and wraps
   all WC shortcode-page output in .drs-container.drs-woocommerce (see that
   file's doc comment). Everything below styles WC's own default markup for
   the Cart, Checkout, and My Account shortcodes/templates using this
   theme's existing tokens and component classes (.drs-btn, .drs-badge,
   var(--drs-*)) rather than inventing a second design language, per
   HANDOFF_PROMPT_PART11.md item 8. This is intentionally scoped to the
   markup WooCommerce itself renders (documented class names from WC core's
   cart.php, checkout templates, and My Account templates) — no theme
   template overrides exist for these, see inc/woocommerce.php.
   ========================================================================== */

.drs-woocommerce {
	padding-top: 2rem;
	padding-bottom: 3rem;
}

/* ---- Notices (cart/checkout/my-account share these) ---- */
.drs-woocommerce .woocommerce-message,
.drs-woocommerce .woocommerce-error,
.drs-woocommerce .woocommerce-info,
.drs-woocommerce .woocommerce-noreviews {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--drs-radius-md);
	border: 1px solid var(--drs-border);
	background: var(--drs-off-white);
	color: var(--drs-navy);
	font-size: 0.95rem;
}

.drs-woocommerce .woocommerce-message {
	border-color: var(--drs-green);
	background: rgba(26, 158, 84, 0.08);
}

.drs-woocommerce .woocommerce-error {
	border-color: var(--drs-red);
	background: rgba(214, 69, 69, 0.08);
}

.drs-woocommerce .woocommerce-error li {
	list-style: none;
}

.drs-woocommerce .woocommerce-info {
	border-color: var(--drs-blue);
	background: rgba(31, 111, 235, 0.08);
}

.drs-woocommerce .woocommerce-message a.button,
.drs-woocommerce .woocommerce-error a.button,
.drs-woocommerce .woocommerce-info a.button {
	order: 99;
	margin-left: auto;
}

/* ---- Shared button normalization ----
   WooCommerce renders plain <button>/<a class="button"> markup with no
   theme hook; map it onto the existing .drs-btn look without requiring
   template overrides. */
.drs-woocommerce .button,
.drs-woocommerce button.button,
.drs-woocommerce input.button,
.drs-woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	border: 1px solid transparent;
	border-radius: var(--drs-radius-sm);
	padding: 0.65rem 1.25rem;
	font-weight: 600;
	font-size: 0.95rem;
	font-family: var(--drs-font);
	cursor: pointer;
	background: var(--drs-off-white);
	color: var(--drs-navy);
	text-decoration: none;
	line-height: 1.2;
}

.drs-woocommerce .button:hover,
.drs-woocommerce button.button:hover,
.drs-woocommerce input.button:hover,
.drs-woocommerce a.button:hover {
	text-decoration: none;
	filter: brightness(0.97);
	color: var(--drs-navy);
}

.drs-woocommerce .button.alt,
.drs-woocommerce button.button.alt,
.drs-woocommerce input.button.alt,
.drs-woocommerce a.button.alt,
.drs-woocommerce #place_order {
	background: var(--drs-blue);
	color: #fff;
}

.drs-woocommerce .button.alt:hover,
.drs-woocommerce button.button.alt:hover,
.drs-woocommerce input.button.alt:hover,
.drs-woocommerce a.button.alt:hover,
.drs-woocommerce #place_order:hover {
	background: var(--drs-blue-dark);
	color: #fff;
}

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

/* ---- Cart page ---- */
.drs-woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-md);
	overflow: hidden;
	font-size: 0.95rem;
}

.drs-woocommerce table.shop_table th,
.drs-woocommerce table.shop_table td {
	padding: 0.9rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--drs-border);
	vertical-align: middle;
}

.drs-woocommerce table.shop_table thead th {
	background: var(--drs-off-white);
	color: var(--drs-navy-muted);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.drs-woocommerce table.shop_table tbody tr:last-child td {
	border-bottom: none;
}

.drs-woocommerce .product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--drs-radius-sm);
	border: 1px solid var(--drs-border);
}

.drs-woocommerce .product-name a {
	color: var(--drs-navy);
	font-weight: 600;
}

.drs-woocommerce .product-price,
.drs-woocommerce .product-subtotal {
	color: var(--drs-navy);
	font-weight: 600;
	white-space: nowrap;
}

.drs-woocommerce .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--drs-off-white);
	color: var(--drs-red);
	font-weight: 700;
	text-decoration: none;
	line-height: 1;
}

.drs-woocommerce .product-remove a.remove:hover {
	background: var(--drs-red);
	color: #fff;
}

.drs-woocommerce .product-quantity .qty,
.drs-woocommerce .quantity .qty {
	width: 4rem;
	padding: 0.5rem;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-sm);
	font-family: var(--drs-font);
	font-size: 0.95rem;
	color: var(--drs-navy);
}

.drs-woocommerce .actions {
	background: transparent;
}

.drs-woocommerce .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.drs-woocommerce .coupon input#coupon_code {
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-sm);
	font-family: var(--drs-font);
	font-size: 0.95rem;
	min-width: 12rem;
}

.drs-woocommerce .cart_totals {
	max-width: 26rem;
	margin-left: auto;
	background: var(--drs-white);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-md);
	padding: 1.5rem;
	box-shadow: var(--drs-shadow-sm);
}

.drs-woocommerce .cart_totals h2 {
	margin: 0 0 1rem;
	font-size: 1.15rem;
	color: var(--drs-navy);
}

.drs-woocommerce .cart_totals table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.drs-woocommerce .cart_totals table th,
.drs-woocommerce .cart_totals table td {
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--drs-border);
	text-align: left;
}

.drs-woocommerce .cart_totals table th {
	color: var(--drs-navy-muted);
	font-weight: 500;
	width: 40%;
}

.drs-woocommerce .cart_totals .order-total td,
.drs-woocommerce .cart_totals .order-total th {
	border-bottom: none;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--drs-navy);
}

.drs-woocommerce .wc-proceed-to-checkout {
	margin-top: 1.25rem;
}

.drs-woocommerce .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	background: var(--drs-blue);
	color: #fff;
}

.drs-woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--drs-blue-dark);
}

.drs-woocommerce .cart-empty {
	background: var(--drs-off-white);
	border: 1px dashed var(--drs-border);
	border-radius: var(--drs-radius-md);
	padding: 1.25rem;
	color: var(--drs-navy-muted);
}

.drs-woocommerce .return-to-shop {
	margin-top: 1rem;
}

@media (max-width: 767px) {
	.drs-woocommerce table.shop_table thead {
		display: none;
	}

	.drs-woocommerce table.shop_table,
	.drs-woocommerce table.shop_table tbody,
	.drs-woocommerce table.shop_table tr,
	.drs-woocommerce table.shop_table td {
		display: block;
		width: 100%;
	}

	.drs-woocommerce table.shop_table tr {
		padding: 0.75rem 1rem;
		border-bottom: 1px solid var(--drs-border);
	}

	.drs-woocommerce table.shop_table td {
		border-bottom: none;
		padding: 0.35rem 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
	}

	.drs-woocommerce table.shop_table td.product-thumbnail {
		justify-content: flex-start;
	}

	.drs-woocommerce .cart_totals {
		max-width: none;
		margin-left: 0;
	}
}

/* ---- Checkout page ---- */
.drs-woocommerce .woocommerce-checkout .col2-set,
.drs-woocommerce form.checkout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 900px) {
	.drs-woocommerce form.checkout {
		grid-template-columns: 1.3fr 1fr;
		align-items: start;
	}
}

.drs-woocommerce .woocommerce-billing-fields h3,
.drs-woocommerce #order_review_heading {
	font-size: 1.1rem;
	color: var(--drs-navy);
	margin: 0 0 1rem;
}

.drs-woocommerce .woocommerce-billing-fields .form-row,
.drs-woocommerce .woocommerce-additional-fields .form-row {
	margin-bottom: 1rem;
}

.drs-woocommerce .form-row label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--drs-navy-muted);
}

.drs-woocommerce .form-row .required {
	color: var(--drs-red);
	text-decoration: none;
}

.drs-woocommerce .form-row input.input-text,
.drs-woocommerce .form-row select,
.drs-woocommerce .form-row textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-sm);
	font-family: var(--drs-font);
	font-size: 0.95rem;
	color: var(--drs-navy);
	background: var(--drs-white);
}

.drs-woocommerce .form-row input.input-text:focus,
.drs-woocommerce .form-row select:focus,
.drs-woocommerce .form-row textarea:focus {
	outline: 2px solid var(--drs-blue);
	outline-offset: 1px;
}

.drs-woocommerce .form-row-first,
.drs-woocommerce .form-row-last {
	display: inline-block;
	width: 100%;
}

@media (min-width: 560px) {
	.drs-woocommerce .form-row-first,
	.drs-woocommerce .form-row-last {
		width: 48%;
	}

	.drs-woocommerce .form-row-first {
		margin-right: 4%;
	}
}

.drs-woocommerce #order_review {
	background: var(--drs-white);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-md);
	padding: 1.5rem;
	box-shadow: var(--drs-shadow-sm);
}

.drs-woocommerce table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	margin-bottom: 1rem;
}

.drs-woocommerce table.woocommerce-checkout-review-order-table th,
.drs-woocommerce table.woocommerce-checkout-review-order-table td {
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--drs-border);
	text-align: left;
}

.drs-woocommerce table.woocommerce-checkout-review-order-table .order-total th,
.drs-woocommerce table.woocommerce-checkout-review-order-table .order-total td {
	border-bottom: none;
	font-weight: 700;
	color: var(--drs-navy);
}

.drs-woocommerce .woocommerce-checkout-payment {
	background: var(--drs-off-white);
	border-radius: var(--drs-radius-md);
	padding: 1rem;
}

.drs-woocommerce ul.wc_payment_methods {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.drs-woocommerce ul.wc_payment_methods li.wc_payment_method {
	border-bottom: 1px solid var(--drs-border);
	padding: 0.75rem 0;
}

.drs-woocommerce ul.wc_payment_methods li.wc_payment_method:last-child {
	border-bottom: none;
}

.drs-woocommerce ul.wc_payment_methods label {
	font-weight: 600;
	color: var(--drs-navy);
}

.drs-woocommerce .payment_box {
	margin-top: 0.5rem;
	padding: 0.85rem;
	background: var(--drs-white);
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-sm);
	font-size: 0.9rem;
	color: var(--drs-navy-muted);
}

.drs-woocommerce #place_order {
	width: 100%;
	margin-top: 1rem;
	padding: 0.85rem 1.75rem;
	font-size: 1.05rem;
}

/* ---- My Account ---- */
.drs-woocommerce .woocommerce-MyAccount-navigation {
	margin-bottom: 2rem;
}

.drs-woocommerce .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--drs-border);
}

.drs-woocommerce .woocommerce-MyAccount-navigation li {
	margin: 0;
}

.drs-woocommerce .woocommerce-MyAccount-navigation li a {
	display: inline-block;
	padding: 0.65rem 1rem;
	color: var(--drs-navy-muted);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.drs-woocommerce .woocommerce-MyAccount-navigation li a:hover {
	color: var(--drs-navy);
}

.drs-woocommerce .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--drs-blue);
	border-bottom-color: var(--drs-blue);
}

.drs-woocommerce .woocommerce-MyAccount-content {
	max-width: 48rem;
}

.drs-woocommerce .woocommerce-MyAccount-content table.shop_table {
	font-size: 0.9rem;
}

.drs-woocommerce .woocommerce-MyAccount-content mark.status {
	font-style: normal;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--drs-off-white);
	color: var(--drs-navy);
	font-size: 0.8rem;
}

.drs-woocommerce fieldset {
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-md);
	padding: 1.25rem;
	margin: 0 0 1.5rem;
}

.drs-woocommerce fieldset legend {
	padding: 0 0.5rem;
	font-weight: 600;
	color: var(--drs-navy);
	font-size: 0.9rem;
}

.drs-woocommerce .woocommerce-address-fields .form-row,
.drs-woocommerce .woocommerce-EditAccountForm .form-row,
.drs-woocommerce .woocommerce-ResetPassword .form-row,
.drs-woocommerce .woocommerce-form-login .form-row {
	margin-bottom: 1rem;
}

.drs-woocommerce .woocommerce-form-login-toggle,
.drs-woocommerce .woocommerce-form-register-toggle {
	max-width: 30rem;
}

.drs-woocommerce .woocommerce-LostPassword {
	margin-top: 0.75rem;
	font-size: 0.9rem;
}

/* ==========================================================================
   Account panels — My Apps / My Downloads / Wishlist (Part 13)

   Styles template-parts/account/my-apps.php, my-downloads.php, and
   wishlist.php, all three of which share the same .drs-account-panel /
   .drs-account-list / .drs-account-list__* markup (see PART9_CHANGES.md).
   Reuses .drs-app-icon sizing/radius, .drs-btn, and .drs-badge already
   defined above rather than duplicating those rules.
   ========================================================================== */

.drs-account-panel {
	max-width: 42rem;
}

.drs-account-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--drs-border);
	border-radius: var(--drs-radius-md);
	background: var(--drs-white);
	overflow: hidden;
}

.drs-account-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--drs-border);
}

.drs-account-list__item:last-child {
	border-bottom: none;
}

.drs-account-list__link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-width: 0;
	flex: 1 1 16rem;
	color: inherit;
	text-decoration: none;
}

.drs-account-list__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}

.drs-account-list__icon .drs-app-icon,
.drs-account-list__icon .drs-app-icon--placeholder {
	width: 48px;
	height: 48px;
}

.drs-account-list__icon .drs-app-icon--placeholder {
	font-size: 1.1rem;
}

.drs-account-list__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.drs-account-list__name {
	font-weight: 600;
	color: var(--drs-navy);
	font-size: 0.98rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.drs-account-list__meta {
	color: var(--drs-navy-muted);
	font-size: 0.85rem;
}

.drs-account-list__hash {
	color: var(--drs-navy-muted);
	font-size: 0.78rem;
	word-break: break-all;
}

.drs-account-list__hash code {
	background: var(--drs-off-white);
	border-radius: var(--drs-radius-sm);
	padding: 0.1rem 0.4rem;
	font-size: 0.75rem;
}

.drs-account-list__changelog {
	color: var(--drs-navy-muted);
	font-size: 0.82rem;
	max-width: 32rem;
}

.drs-account-list__changelog p {
	margin: 0.25rem 0 0;
}

.drs-account-list__rating {
	display: flex;
	align-items: center;
}

.drs-account-list__price {
	font-weight: 600;
	color: var(--drs-navy);
	font-size: 0.9rem;
}

.drs-account-list__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
	margin-left: auto;
}

.drs-badge--update {
	background: rgba(245, 166, 35, 0.15);
	color: #8a5a00;
}

@media (max-width: 560px) {
	.drs-account-list__item {
		flex-direction: column;
		align-items: flex-start;
	}

	.drs-account-list__actions {
		margin-left: 0;
		width: 100%;
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Popular Apps widget (Part 13)

   Styles inc/widgets.php's DRS_Popular_Apps_Widget output. Deliberately a
   compact list (icon + name + price), not a card grid — meant to sit in the
   drs-footer sidebar or any future sidebar without competing visually with
   the full .drs-app-grid layout used on listing pages.
   ========================================================================== */

.drs-widget-popular-apps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.drs-widget-popular-apps__item {
	border-bottom: 1px solid var(--drs-border);
}

.drs-widget-popular-apps__item:last-child {
	border-bottom: none;
}

.drs-widget-popular-apps__link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 0;
	color: inherit;
	text-decoration: none;
}

.drs-widget-popular-apps__link:hover .drs-widget-popular-apps__name {
	color: var(--drs-blue);
}

.drs-widget-popular-apps__icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
}

.drs-widget-popular-apps__icon .drs-app-icon,
.drs-widget-popular-apps__icon .drs-app-icon--placeholder {
	width: 36px;
	height: 36px;
}

.drs-widget-popular-apps__icon .drs-app-icon--placeholder {
	font-size: 0.9rem;
}

.drs-widget-popular-apps__body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.drs-widget-popular-apps__name {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--drs-navy);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.drs-widget-popular-apps__price {
	font-size: 0.8rem;
	color: var(--drs-navy-muted);
}

/* ==========================================================================
   Toast (Part 13)

   Styles the #drs-toast element created/reused by wishlist.js and claim.js
   (see each file's drsToast() helper). The JS already sets
   role="status"/aria-live="polite" and toggles .is-visible — this only
   handles position, appearance, and the show/hide transition.
   ========================================================================== */

.drs-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	z-index: 1000;
	max-width: calc(100vw - 2rem);
	transform: translate(-50%, 0.5rem);
	background: var(--drs-navy);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 500;
	padding: 0.75rem 1.25rem;
	border-radius: var(--drs-radius-md);
	box-shadow: var(--drs-shadow-md);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.drs-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

@media (max-width: 480px) {
	.drs-toast {
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		transform: translateY(0.5rem);
		max-width: none;
		text-align: center;
	}

	.drs-toast.is-visible {
		transform: translateY(0);
	}
}