/*
Theme Name: Shoppette
Theme URI: https://easydigitaldownloads.com/
Author: EDD Team
Author URI: https://easydigitaldownloads.com/
Description: A fast, accessible storefront theme for Easy Digital Downloads. Shoppette 2.0 rebuilds the front end on a design token system: no icon font, no external font requests, keyboard-friendly navigation and a purchase panel that stays in view while the product copy scrolls.
Version: 2.0.18
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License
License URI: license.txt
Text Domain: shoppette
Domain Path: /languages/
Tags: e-commerce, one-column, two-columns, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, wide-blocks
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Ink */
	--ink-900: #0f131a;
	--ink-800: #1b2130;
	--ink-700: #2f3646;
	--ink-600: #4b5468;
	--ink-500: #6b7488;
	--ink-400: #8c95a8;
	--ink-300: #b3bac8;

	/* Surfaces */
	--surface: #ffffff;
	--surface-2: #f7f8fb;
	--surface-3: #eef1f6;
	--surface-4: #e3e7ef;
	--line: #e6e9f0;
	--line-strong: #d5dae4;

	/* Brand defaults — overridden by the active palette file. */
	--brand: #02c285;
	--brand-dark: #04ad78;
	--brand-soft: #e6f8f1;
	--brand-ink: #067a57;
	--accent: #ff793f;
	--accent-ink: #c2410c;

	/* Feedback */
	--success: #0f9d58;
	--warning: #b45309;
	--danger: #c0342b;

	/* Typography */
	--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
		"Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--fs-xs: 0.75rem;
	--fs-sm: 0.8125rem;
	--fs-base: 1rem;
	--fs-md: 1.0625rem;
	--fs-lg: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
	--fs-xl: clamp(1.375rem, 1vw + 1.1rem, 1.625rem);
	--fs-2xl: clamp(1.625rem, 1.6vw + 1.2rem, 2.125rem);
	--fs-3xl: clamp(1.875rem, 2.6vw + 1.2rem, 2.75rem);

	/* Space */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;

	/* Shape */
	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-pill: 999px;

	/* Elevation */
	--shadow-xs: 0 1px 2px rgba(15, 19, 26, 0.06);
	--shadow-sm: 0 1px 3px rgba(15, 19, 26, 0.08), 0 1px 2px rgba(15, 19, 26, 0.04);
	--shadow-md: 0 10px 28px -12px rgba(15, 19, 26, 0.2), 0 2px 6px rgba(15, 19, 26, 0.04);
	--shadow-lg: 0 28px 56px -28px rgba(15, 19, 26, 0.32);

	/* Layout */
	--container: 1180px;
	--gutter: clamp(1rem, 3vw, 2rem);
	--header-h: 72px;
	--sidebar-w: 320px;

	/* Product cover: one size everywhere — 420 x 553 px.
	   Keep in sync with SHOPPETTE_COVER_WIDTH / _HEIGHT in functions.php. */
	--cover-w: 420px;
	--cover-ratio: 420 / 553;

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 180ms;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--surface-2);
	color: var(--ink-700);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.is-nav-open,
body.is-search-open {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	color: var(--ink-900);
	font-weight: 650;
	line-height: 1.22;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-3xl);
}

h2 {
	font-size: var(--fs-2xl);
}

h3 {
	font-size: var(--fs-xl);
}

h4 {
	font-size: var(--fs-lg);
}

h5,
h6 {
	font-size: var(--fs-md);
}

p,
ul,
ol,
dl,
figure,
table,
pre,
blockquote {
	margin: 0 0 1.25em;
}

a {
	color: var(--accent-ink);
	text-decoration: none;
	transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

a:hover {
	color: var(--ink-900);
}

ul,
ol {
	padding-left: 1.25em;
}

li > ul,
li > ol {
	margin-bottom: 0;
}

hr {
	height: 1px;
	margin: 2rem 0;
	border: 0;
	background: var(--line);
}

img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
}

img {
	height: auto;
	vertical-align: middle;
}

svg.icon {
	flex: none;
	vertical-align: middle;
}

code,
kbd,
pre,
samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

pre {
	padding: 1rem 1.25rem;
	overflow: auto;
	background: var(--ink-900);
	color: #e9edf5;
	border-radius: var(--radius-sm);
}

code {
	padding: 0.12em 0.4em;
	background: var(--surface-3);
	border-radius: var(--radius-xs);
}

pre code {
	padding: 0;
	background: none;
	color: inherit;
}

blockquote {
	margin: 1.5rem 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--brand);
	color: var(--ink-600);
	font-style: italic;
}

blockquote p:last-child {
	margin-bottom: 0;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--line);
}

thead th {
	font-size: var(--fs-sm);
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-500);
	background: var(--surface-3);
}

abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}

mark {
	background: var(--brand-soft);
	color: inherit;
}

::selection {
	background: var(--brand);
	color: #fff;
}

/* ==========================================================================
   3. Accessibility helpers
   ========================================================================== */

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

.skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 2000;
	padding: 0.75rem 1.25rem;
	background: var(--ink-900);
	color: #fff;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	transform: translateY(-160%);
	transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
	transform: translateY(0);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--brand-dark);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

[hidden] {
	display: none !important;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.main-content-area {
	background: var(--surface-2);
}

.site-content {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--sp-6);
	padding-block: var(--sp-6) var(--sp-8);
}


.site-content > .alert-bar {
	flex: 0 0 100%;
}

#primary {
	flex: 1 1 0;
	min-width: 0;
}

#secondary {
	flex: 0 0 var(--sidebar-w);
	width: var(--sidebar-w);
}

.content-sidebar #secondary {
	order: -1;
}

.content-area--narrow {
	flex: 0 0 100%;
	max-width: 800px;
	/* Without this a wide child (an EDD cart table) sets the flex item's
	   automatic minimum size and stretches the whole column past the viewport. */
	min-width: 0;
	margin-inline: auto;
}

.site-content > .content-area--narrow + #secondary {
	display: none;
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 100;
	background: var(--surface);
	border-top: 3px solid var(--accent);
	border-bottom: 1px solid var(--line);
}

.site-header--sticky {
	position: sticky;
	top: 0;
}

.site-header.is-stuck {
	box-shadow: var(--shadow-md);
}

@supports (backdrop-filter: blur(8px)) {
	.site-header.is-stuck {
		background: rgba(255, 255, 255, 0.86);
		backdrop-filter: saturate(180%) blur(12px);
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	min-height: var(--header-h);
}

.site-branding {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.site-branding__name {
	color: var(--ink-900);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-branding__name:hover {
	color: var(--brand-ink);
}

.site-branding__tagline {
	color: var(--ink-500);
	font-size: var(--fs-xs);
	letter-spacing: 0.01em;
}

.site-branding__logo img {
	display: block;
	width: auto;
	max-width: 220px;
	max-height: 44px;
}

/* Primary navigation */
.main-navigation {
	flex: 1 1 auto;
	min-width: 0;
}

.main-navigation__head {
	display: none;
}

.main-navigation .nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation li {
	position: relative;
}

.main-navigation .nav-link {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-sm);
	color: var(--ink-700);
	font-size: var(--fs-sm);
	font-weight: 550;
	white-space: nowrap;
}

.main-navigation .nav-link:hover,
.main-navigation .current-menu-ancestor > .nav-link {
	background: var(--surface-3);
	color: var(--ink-900);
}

.main-navigation .current-menu-item > .nav-link,
.main-navigation .current_page_item > .nav-link {
	position: relative;
	background: transparent;
	color: var(--ink-900);
}

.main-navigation .current-menu-item > .nav-link::after,
.main-navigation .current_page_item > .nav-link::after {
	content: "";
	position: absolute;
	right: 0.75rem;
	bottom: 0.1rem;
	left: 0.75rem;
	height: 2px;
	background: var(--brand);
	border-radius: 2px;
}

.main-navigation .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	min-width: 230px;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
		visibility var(--dur);
}

.main-navigation .sub-menu .sub-menu {
	top: -0.4rem;
	left: calc(100% + 6px);
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .sub-menu .nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: 0.55rem 0.75rem;
	white-space: normal;
}

.submenu-toggle {
	display: none;
}

/* Header actions */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin-left: auto;
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	color: var(--ink-600);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.icon-btn:hover {
	background: var(--surface-3);
	color: var(--ink-900);
}

.header-action--cart {
	width: auto;
	padding-inline: 0.65rem;
}

.header-action__label {
	font-size: var(--fs-sm);
	font-weight: 550;
}

.cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 5px;
	background: var(--surface-3);
	color: var(--ink-600);
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.cart-count.has-items {
	background: var(--brand);
	color: #fff;
}

.header-action--nav {
	display: none;
}

/* Secondary menu */
.meta-nav {
	margin-right: var(--sp-2);
}

.meta-nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.meta-nav__list a {
	color: var(--ink-500);
	font-size: var(--fs-sm);
}

.meta-nav__list a:hover {
	color: var(--ink-900);
}

/* Header search */
.header-search {
	border-top: 1px solid var(--line);
	background: var(--surface);
	animation: slide-down 200ms var(--ease);
}

.header-search .wrap {
	padding-block: var(--sp-4);
}

@keyframes slide-down {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
 * The scrim sits inside .site-header, which is a stacking context. Its z-index
 * only has to lose against the drawer (110) - not against the page. If it is
 * ever moved outside the header it will cover the drawer and eat every tap.
 */
.nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 105;
	background: rgba(15, 19, 26, 0.45);
	animation: fade-in 160ms var(--ease) forwards;
}

@media (min-width: 961px) {
	.nav-scrim {
		display: none;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ==========================================================================
   6. Buttons, chips, forms
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.65rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink-900);
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn:hover {
	transform: translateY(-1px);
	color: var(--ink-900);
}

.btn:active {
	transform: translateY(0);
}

.btn--primary {
	background: var(--ink-900);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
	background: var(--brand-dark);
	color: #fff;
	box-shadow: var(--shadow-md);
}

.btn--brand {
	background: var(--brand);
	color: #06281d;
}

.btn--brand:hover {
	background: var(--brand-dark);
	color: #fff;
}

.btn--ghost {
	background: transparent;
	border-color: var(--line-strong);
	color: var(--ink-700);
}

.btn--ghost:hover {
	background: var(--surface-3);
	border-color: var(--ink-300);
}

.btn--lg {
	min-height: 52px;
	padding: 0.9rem 1.5rem;
	font-size: var(--fs-base);
}

.btn--block {
	width: 100%;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.8rem;
	background: var(--surface);
	color: var(--ink-600);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 550;
	line-height: 1.4;
	white-space: nowrap;
}

.chip:hover {
	border-color: var(--ink-300);
	color: var(--ink-900);
}

.chip.is-active {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: #fff;
}

.chip--sm {
	padding: 0.2rem 0.6rem;
	font-size: var(--fs-xs);
}

.chip__count {
	color: var(--ink-400);
	font-size: var(--fs-xs);
}

.chip.is-active .chip__count {
	color: rgba(255, 255, 255, 0.6);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 0.85rem;
	background: var(--surface);
	color: var(--ink-800);
	font-family: inherit;
	font-size: var(--fs-sm);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

textarea {
	min-height: 130px;
	resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-soft);
	outline: none;
}

input[type="checkbox"],
input[type="radio"] {
	width: auto;
	min-height: 0;
	accent-color: var(--brand-dark);
}

label {
	font-size: var(--fs-sm);
	color: var(--ink-700);
}

fieldset {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

legend {
	padding: 0;
	color: var(--ink-900);
	font-weight: 650;
}

.select-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.select-wrap select {
	padding-right: 2.25rem;
	appearance: none;
	cursor: pointer;
}

.select-wrap .icon {
	position: absolute;
	right: 0.7rem;
	color: var(--ink-500);
	pointer-events: none;
}

/* ==========================================================================
   7. Search form
   ========================================================================== */

.search-form {
	display: flex;
	gap: var(--sp-2);
	align-items: stretch;
}

.search-form__field {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	color: var(--ink-400);
}

.search-form__field .icon {
	position: absolute;
	left: 0.9rem;
	pointer-events: none;
}

.search-form__input {
	padding-left: 2.6rem !important;
	background: var(--surface-2);
}

.search-form__submit {
	flex: none;
}

/* ==========================================================================
   8. Announcement bar
   ========================================================================== */

.alert-bar {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 0.75rem 1rem;
	background: var(--brand-soft);
	border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	color: var(--ink-800);
}

.alert-bar__icon {
	display: inline-flex;
	color: var(--brand-ink);
}

.alert-text {
	margin: 0;
}

.alert-text a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   9. Store: hero, toolbar, grid, cards
   ========================================================================== */

.store-front {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.store-hero {
	max-width: 720px;
}

.store-hero__eyebrow {
	display: inline-block;
	margin-bottom: var(--sp-2);
	color: var(--brand-ink);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.store-title {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-2xl);
}

.store-description {
	color: var(--ink-600);
	font-size: var(--fs-md);
}

.store-description p:last-child {
	margin-bottom: 0;
}

.store-hero__count {
	margin: var(--sp-3) 0 0;
	color: var(--ink-500);
	font-size: var(--fs-sm);
}

.store-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-block: var(--sp-3);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.store-toolbar__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.store-toolbar__sort {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
}

.store-toolbar__sort-label {
	color: var(--ink-500);
	font-size: var(--fs-sm);
	white-space: nowrap;
}

.store-toolbar__sort select {
	min-height: 38px;
	padding-block: 0.35rem;
	font-size: var(--fs-sm);
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-grid--three {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.product-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.product-card:hover {
	transform: translateY(-3px);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-md);
}

.product-card__media {
	position: relative;
	display: block;
	aspect-ratio: var(--cover-ratio);
	overflow: hidden;
	background: linear-gradient(135deg, var(--surface-3), var(--surface-4));
}

.product-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
}

.product-card:hover .product-card__image {
	transform: scale(1.04);
}

.product-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--ink-300);
}

.product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--sp-2);
	padding: var(--sp-4);
}

.product-card__title {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 650;
	line-height: 1.32;
}

.product-card__title a {
	color: var(--ink-900);
}

.product-card__title a:hover {
	color: var(--brand-ink);
}

.product-card__excerpt {
	color: var(--ink-600);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.product-card__excerpt p {
	margin: 0;
}

.product-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: auto;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--line);
	color: var(--ink-700);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.product-card__cta .icon {
	transition: transform var(--dur) var(--ease);
}

.product-card:hover .product-card__cta {
	color: var(--brand-ink);
}

.product-card:hover .product-card__cta .icon {
	transform: translateX(3px);
}

.store-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-1);
	margin-top: var(--sp-2);
	font-size: var(--fs-sm);
}

.store-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding-inline: 0.5rem;
	color: var(--ink-600);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
}

.store-pagination .page-numbers:hover {
	border-color: var(--ink-300);
	color: var(--ink-900);
}

.store-pagination .page-numbers.current {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: #fff;
}

.store-pagination .page-numbers.dots {
	background: none;
	border-color: transparent;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-8) var(--sp-4);
	text-align: center;
	color: var(--ink-500);
	background: var(--surface);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-lg);
}

.empty-state h1,
.empty-state h2 {
	margin: 0;
	font-size: var(--fs-xl);
	color: var(--ink-900);
}

.empty-state p {
	margin: 0;
}

.empty-state form {
	width: min(420px, 100%);
	text-align: left;
}

/* ==========================================================================
   10. Single download
   ========================================================================== */

.download-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--sp-6);
}

.download-layout__main {
	flex: 1 1 0;
	min-width: 0;
}

/* Cover: the same 420 x 553 crop as the store cards. */
.download-hero {
	margin: 0 0 var(--sp-5);
}

.download-hero__image {
	display: block;
	width: 100%;
	max-width: var(--cover-w);
	height: auto;
	aspect-ratio: var(--cover-ratio);
	object-fit: cover;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--surface-3), var(--surface-4));
}

.download-single .entry-header {
	margin-bottom: var(--sp-4);
}

.download-single .entry-title {
	margin-bottom: var(--sp-3);
}

.download-layout .download-aside {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-4));
	flex: 0 0 var(--sidebar-w);
	width: var(--sidebar-w);
}

.breadcrumbs {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--ink-500);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	margin-right: 0.35rem;
	color: var(--ink-300);
}

.breadcrumbs a {
	color: var(--ink-500);
}

.breadcrumbs a:hover {
	color: var(--ink-900);
}

.download-single {
	padding: var(--sp-6);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	color: var(--ink-500);
	font-size: var(--fs-sm);
}

.entry-meta__item,
.entry-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.entry-meta a {
	color: var(--ink-600);
}

.entry-meta a:hover {
	color: var(--ink-900);
}

#primary .entry-meta .comments-link {
	margin-left: auto;
}

.entry-content {
	font-size: var(--fs-md);
	color: var(--ink-700);
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content h2,
.entry-content h3 {
	margin-top: 1.8em;
}

.entry-content img {
	border-radius: var(--radius-sm);
}

.entry-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
	color: var(--ink-500);
	font-size: var(--fs-sm);
}

.entry-footer__label {
	font-weight: 600;
	color: var(--ink-600);
}

/* Buy box */
.buy-box {
	position: relative;
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/* One amount, one place: the panel prints the price above the button and the
   per-option amounts inside the form are hidden, so a variable product shows a
   single number that theme.js keeps in sync with the selected option. */
.buy-box__price {
	display: flex;
	align-items: baseline;
	margin-bottom: var(--sp-3);
}

.buy-box__amount {
	color: var(--ink-900);
	font-size: var(--fs-2xl);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.buy-box .edd_price_option_price {
	display: none;
}

.buy-box__action {
	margin-bottom: var(--sp-4);
}

/* Belt and braces: an EDD version that still injects its own price node into
   the purchase form would otherwise print a second identical amount. */
.buy-box__action .edd_download_purchase_form > .edd_price {
	display: none;
}

.buy-box__points {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
	padding: var(--sp-4) 0 0;
	list-style: none;
	border-top: 1px solid var(--line);
	color: var(--ink-600);
	font-size: var(--fs-sm);
}

.buy-box__points li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.buy-box__points .icon {
	margin-top: 2px;
	color: var(--brand-ink);
}

/* Recommendations sit after the purchase panel in the DOM, so a phone gets the
   buy button before three other products. On narrow screens the row is a card
   of its own; wide screens glue it back to the foot of the article below. */
.related-products {
	flex: 0 0 100%;
	margin: 0;
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
}

/* The article column is narrower than the store grid, so tighten the cards. */
.download-single .product-grid,
.related-products .product-grid {
	gap: var(--sp-4);
}

.download-single .product-card__title,
.related-products .product-card__title {
	font-size: var(--fs-md);
}

/* Comments follow both, so they span the full width. */
.download-layout > #comments {
	flex: 0 0 100%;
	margin-top: var(--sp-5);
}

.section-title {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-xl);
}

/* ==========================================================================
   11. Blog
   ========================================================================== */

.post-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.post-card,
.site-main > .hentry,
.site-main > .post,
.site-main > .page {
	padding: var(--sp-6);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
}

.post-card__media {
	display: block;
	margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5);
	overflow: hidden;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.post-card__image,
.featured-img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.entry-header {
	margin-bottom: var(--sp-3);
}

.entry-title {
	margin: 0;
}

.entry-title a {
	color: var(--ink-900);
}

.entry-title a:hover {
	color: var(--brand-ink);
}

.entry-summary {
	color: var(--ink-600);
}

.entry-summary p:last-child {
	margin-bottom: 0;
}

.page-header {
	margin-bottom: var(--sp-5);
}

.page-title {
	margin: 0;
	font-size: var(--fs-2xl);
}

.page-header__meta {
	margin: var(--sp-2) 0 0;
	color: var(--ink-500);
	font-size: var(--fs-sm);
}

.taxonomy-description {
	margin-top: var(--sp-3);
	color: var(--ink-600);
}

.continue-reading {
	margin-top: var(--sp-3);
}

.more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--accent-ink);
}

.author-box {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
	margin-top: var(--sp-5);
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.author-box__avatar {
	border-radius: 50%;
	flex: none;
}

.author-box__name {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-md);
}

.author-box__bio {
	margin: 0;
	color: var(--ink-600);
	font-size: var(--fs-sm);
}

.paging-navigation,
.post-navigation {
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
	font-size: var(--fs-sm);
}

.paging-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
}

.paging-navigation a,
.post-navigation a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--ink-700);
	font-weight: 550;
}

.post-navigation .nav-next {
	margin-left: auto;
	text-align: right;
}

.post-navigation .nav-label {
	display: block;
	color: var(--ink-400);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.nav-title {
	display: block;
	max-width: 34ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.page-links {
	margin-top: var(--sp-4);
	font-size: var(--fs-sm);
}

.page-links a,
.page-links > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	margin-right: 4px;
	border: 1px solid var(--line);
	border-radius: var(--radius-xs);
}

/* ==========================================================================
   12. Comments
   ========================================================================== */

.comments-area {
	margin-top: var(--sp-6);
	padding: var(--sp-6);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.comments-title {
	font-size: var(--fs-lg);
}

.comment-list {
	margin: 0 0 var(--sp-5);
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin: var(--sp-4) 0 0;
	padding-left: var(--sp-5);
	list-style: none;
	border-left: 1px solid var(--line);
}

.comment-body {
	margin-bottom: var(--sp-5);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--line);
}

.comment-list > li:last-child > .comment-body {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink-900);
}

.comment-author .avatar {
	border-radius: 50%;
}

.comment-metadata {
	margin: 0.25rem 0 var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

.comment-metadata a {
	color: var(--ink-500);
}

.comment-content {
	font-size: var(--fs-sm);
}

.comment-content p:last-child {
	margin-bottom: 0;
}

.comment-reply-link {
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--accent-ink);
}

.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.comment-form label {
	font-weight: 550;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.comment-navigation {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
}

.no-comments {
	padding: var(--sp-3);
	background: var(--surface-3);
	border-radius: var(--radius-sm);
	color: var(--ink-600);
	font-size: var(--fs-sm);
	text-align: center;
}

/* ==========================================================================
   13. Sidebar & widgets
   ========================================================================== */

#secondary .widget {
	margin-bottom: var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}

#secondary .download-aside .widget,
#secondary.download-aside .widget {
	padding: var(--sp-4) var(--sp-5);
}

.widget-title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-500);
}

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

.widget li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-sm);
}

.widget li:last-child {
	border-bottom: 0;
}

.widget li a {
	color: var(--ink-700);
}

.widget li a:hover {
	color: var(--brand-ink);
}

.widget select {
	min-height: 38px;
}

.widget_search .search-form__submit {
	display: none;
}

.edd-cart-widget,
.widget_edd_cart_widget {
	font-size: var(--fs-sm);
}

.edd-cart-item {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-2);
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--line);
}

.edd-cart-item-title {
	font-weight: 600;
	color: var(--ink-800);
}

/* ==========================================================================
   14. Easy Digital Downloads
   ========================================================================== */

.edd-page {
	padding: var(--sp-6);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
}

.edd-page .entry-header {
	margin-bottom: var(--sp-4);
}

.edd-submit,
#edd-purchase-button,
input[type="submit"].edd-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.7rem 1.4rem;
	background: var(--ink-900);
	color: #fff;
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: 650;
	line-height: 1.2;
	border: 0;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.edd-submit:hover,
#edd-purchase-button:hover {
	background: var(--brand-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.edd-submit.btn--block,
.buy-box .edd-submit {
	width: 100%;
}

.edd-submit.edd-loading,
.edd-submit.edd-loading:hover {
	opacity: 0.7;
	pointer-events: none;
}

/*
 * EDD ships `.edd-submit.button.blue` style rules (three classes). Prefixing
 * with `body` keeps the theme's button treatment winning without !important.
 */
body .edd-submit.button,
body .edd-submit.button.white,
body .edd-submit.button.gray,
body .edd-submit.button.blue,
body .edd-submit.button.green,
body .edd-submit.button.red,
body .edd-submit.button.orange,
body .edd-submit.button.yellow,
body .edd-submit.button.dark-gray {
	background: var(--ink-900);
	color: #fff;
	border: 0;
	border-bottom: 0;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	text-shadow: none;
	padding: 0.7rem 1.4rem;
	font-size: var(--fs-sm);
	font-weight: 650;
}

body .edd-submit.button:hover,
body .edd-submit.button.white:hover,
body .edd-submit.button.gray:hover,
body .edd-submit.button.blue:hover,
body .edd-submit.button.green:hover,
body .edd-submit.button.red:hover,
body .edd-submit.button.orange:hover,
body .edd-submit.button.yellow:hover,
body .edd-submit.button.dark-gray:hover {
	background: var(--brand-dark);
	color: #fff;
	box-shadow: var(--shadow-md);
}

body .edd-submit.btn--lg {
	padding: 0.9rem 1.5rem;
	font-size: var(--fs-base);
	min-height: 52px;
}

body .edd-submit.btn--block {
	width: 100%;
}

/* EDD price option markup can arrive as a bare label. */
body .edd_download_purchase_form .edd_price_option_wrap,
body .edd_download_purchase_form .edd_price_options label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

body .edd_download_purchase_form .edd_price_option_wrap:hover,
body .edd_download_purchase_form .edd_price_options label:hover {
	border-color: var(--brand);
	background: var(--brand-soft);
}

/* Purchase form */
.edd_download_purchase_form {
	margin: 0;
}

.edd_download_purchase_form .edd_price_options {
	margin: 0 0 var(--sp-4);
	padding: 0;
	list-style: none;
}

.edd_download_purchase_form .edd_price_options li {
	margin-bottom: var(--sp-2);
}

.edd_download_purchase_form .edd_price_option_wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.edd_download_purchase_form .edd_price_option_wrap:hover {
	border-color: var(--brand);
	background: var(--brand-soft);
}

.edd_download_purchase_form .edd_price_option_name {
	font-weight: 550;
	color: var(--ink-800);
}

.edd_download_purchase_form .edd_price_option_price {
	margin-left: auto;
	font-weight: 700;
	color: var(--ink-900);
}

/* One copy per order: the buy box hides the quantity control. The input stays
   in the DOM (not disabled) so EDD still posts its default value of 1. The
   `.buy-box` selectors cover EDD versions that render the field outside the
   purchase form. */
.buy-box .edd_download_quantity_wrapper,
.buy-box .edd_download_quantity,
.edd_download_purchase_form .edd_download_quantity_wrapper,
.edd_download_purchase_form .edd_download_quantity {
	display: none;
}

.edd_download_purchase_form .edd-item-quantity {
	width: 76px;
	min-height: 38px;
	text-align: center;
}

.edd-variable-pricing-desc {
	margin: 0 0 var(--sp-3);
	color: var(--ink-500);
	font-size: var(--fs-sm);
}

.edd-variable-pricing-desc:empty {
	display: none;
}

.edd-cart-added-alert {
	margin-top: var(--sp-3);
	color: var(--brand-ink);
	font-size: var(--fs-sm);
}

/* Cart / checkout */
#edd_checkout_cart {
	margin-bottom: var(--sp-5);
}

#edd_checkout_cart th,
#edd_checkout_cart td {
	padding: 0.75rem;
	font-size: var(--fs-sm);
}

#edd_checkout_cart .edd_cart_item_name {
	font-weight: 600;
	color: var(--ink-900);
}

#edd_checkout_cart .edd_cart_item_price,
#edd_checkout_cart .edd_cart_amount {
	font-weight: 700;
	color: var(--ink-900);
}

#edd_checkout_form_wrap fieldset {
	margin-bottom: var(--sp-5);
	padding: var(--sp-4);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}

#edd_checkout_form_wrap legend {
	padding: 0 0.4rem;
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

#edd_checkout_form_wrap p {
	margin-bottom: var(--sp-3);
}

#edd_checkout_form_wrap label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 550;
}

#edd_checkout_form_wrap .edd-description {
	display: block;
	margin-top: 0.25rem;
	color: var(--ink-500);
	font-size: var(--fs-xs);
}

#edd-discount-code-wrap,
#edd-login-account-wrap,
#edd-new-account-wrap,
#edd_show_discount,
#edd_final_total_wrap,
#edd_purchase_submit {
	display: block;
	margin-bottom: var(--sp-3);
	padding: var(--sp-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}

#edd_final_total_wrap {
	font-size: var(--fs-md);
	font-weight: 700;
}

#edd-purchase-button {
	width: 100%;
}

#edd_checkout_form_wrap #edd_final_total_wrap .edd_cart_amount {
	font-size: 1.25rem;
}

#edd_login_form,
#edd_register_form {
	margin-bottom: var(--sp-5);
	padding: var(--sp-4);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}

#edd_login_form label,
#edd_register_form label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 550;
}

/* Receipt & history */
#edd_purchase_receipt,
#edd_purchase_receipt_products,
#edd_user_history {
	margin-bottom: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

#edd_purchase_receipt th,
#edd_purchase_receipt td,
#edd_purchase_receipt_products th,
#edd_purchase_receipt_products td,
#edd_user_history th,
#edd_user_history td {
	padding: 0.75rem 1rem;
	font-size: var(--fs-sm);
}

#edd_purchase_receipt tbody tr:last-child td,
#edd_user_history tbody tr:last-child td {
	border-bottom: 0;
}

.edd_status,
.edd-status {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	background: var(--surface-3);
	color: var(--ink-700);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: 650;
	letter-spacing: 0.02em;
	text-transform: capitalize;
}

.edd_status--complete,
.edd-status--complete {
	background: var(--brand-soft);
	color: var(--brand-ink);
}

.edd_status--pending,
.edd-status--pending {
	background: #fef3c7;
	color: #92400e;
}

.edd_status--failed,
.edd-status--failed,
.edd_status--revoked,
.edd-status--revoked {
	background: #fee2e2;
	color: var(--danger);
}

.edd_download_file_link,
.edd_download_file {
	font-weight: 600;
}

/* Profile editor */
#edd_profile_editor_form {
	padding: var(--sp-5);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}

#edd_profile_editor_form p {
	margin-bottom: var(--sp-3);
}

#edd_profile_editor_form label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 550;
}

/* Notices */
.edd_error,
.edd_success,
.edd_warning,
.edd-notice {
	padding: 0.85rem 1rem;
	margin-bottom: var(--sp-4);
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	font-size: var(--fs-sm);
}

.edd_error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.edd_success {
	background: var(--brand-soft);
	border-color: color-mix(in srgb, var(--brand) 35%, transparent);
	color: var(--brand-ink);
}

.edd_warning {
	background: #fffbeb;
	border-color: #fde68a;
	color: #92400e;
}

/* ==========================================================================
   15. Embeds & WordPress extras
   ========================================================================== */

.embed-responsive {
	position: relative;
	height: 0;
	margin-bottom: 1.5em;
	padding-bottom: 56.25%;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.embed-responsive iframe,
.embed-responsive video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

.alignleft {
	float: left;
	margin: 0.25rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.25rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 1.5em;
}

.wp-caption-text {
	margin-top: 0.5rem;
	color: var(--ink-500);
	font-size: var(--fs-xs);
	text-align: center;
}

.sticky,
.bypostauthor {
	position: relative;
}

.gallery {
	display: grid;
	gap: var(--sp-3);
	margin-bottom: 1.5em;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-item {
	margin: 0;
}

.gallery-icon img {
	border-radius: var(--radius-sm);
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.site-footer {
	padding-block: var(--sp-7) var(--sp-5);
	background: var(--surface);
	border-top: 1px solid var(--line);
	color: var(--ink-500);
	font-size: var(--fs-sm);
}

.site-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-5);
	margin-bottom: var(--sp-6);
	padding-bottom: var(--sp-6);
	border-bottom: 1px solid var(--line);
}

.site-footer .widget {
	margin-bottom: 0;
	padding: 0;
	background: none;
	border: 0;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
}

.site-info {
	margin: 0;
}

.site-info a {
	color: var(--ink-600);
}

.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav__list a {
	color: var(--ink-500);
}

.footer-nav__list a:hover {
	color: var(--ink-900);
}

/* ==========================================================================
   17. Motion
   ========================================================================== */

[data-reveal] {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	#secondary {
		flex: 0 0 280px;
		width: 280px;
	}

	:root {
		--sidebar-w: 280px;
	}
}

@media (min-width: 961px) {
	/* Product article and the recommendation row share the left column, as two
	   grid rows, so the row stays glued to the foot of the card instead of
	   drifting away when the purchase panel is taller. */
	.download-layout--related {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
		column-gap: var(--sp-6);
		row-gap: 0;
		align-items: start;
	}

	.download-layout--related .download-layout__main {
		display: flex;
		flex-direction: column;
		grid-column: 1;
		grid-row: 1;
	}

	.download-layout--related .download-single {
		flex: 1 1 auto;
		border-bottom: 0;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		box-shadow: none;
	}

	.download-layout--related .download-aside {
		grid-column: 2;
		grid-row: 1;
	}

	.download-layout--related .related-products {
		grid-column: 1;
		grid-row: 2;
		padding: var(--sp-6);
		border-top: 1px solid var(--line);
		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	}

	.download-layout--related > #comments {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: var(--sp-6);
	}
}

@media (max-width: 960px) {
	.site-content {
		gap: var(--sp-5);
	}

	#primary,
	#secondary,
	.download-layout .download-aside {
		flex: 0 0 100%;
		width: 100%;
	}

	#secondary {
		display: block;
	}

	.download-layout .download-aside {
		position: static;
	}

	/* Navigation becomes an off-canvas drawer. */
	.header-action--nav {
		display: inline-flex;
	}

	.main-navigation {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 110;
		display: flex;
		flex-direction: column;
		width: min(340px, 86vw);
		height: 100%;
		padding: var(--sp-4);
		overflow-y: auto;
		background: var(--surface);
		box-shadow: var(--shadow-lg);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 260ms var(--ease), visibility 260ms;
	}

	.is-nav-open .main-navigation {
		transform: translateX(0);
		visibility: visible;
	}

	.main-navigation__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--sp-3);
		padding-bottom: var(--sp-3);
		border-bottom: 1px solid var(--line);
	}

	.main-navigation__title {
		font-size: var(--fs-sm);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink-500);
	}

	.main-navigation .nav-menu {
		display: block;
	}

	.main-navigation .nav-menu > li {
		border-bottom: 1px solid var(--line);
	}

	.main-navigation .nav-link {
		padding: 0.85rem 0.5rem;
		font-size: var(--fs-base);
		border-radius: 0;
	}

	.main-navigation li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.main-navigation .nav-link {
		flex: 1 1 auto;
	}

	.main-navigation li:hover > .sub-menu,
	.main-navigation li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.main-navigation .sub-menu,
	.main-navigation .sub-menu .sub-menu {
		position: static;
		display: none;
		width: 100%;
		margin: 0 0 var(--sp-2);
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.main-navigation .sub-menu.is-open {
		display: block;
	}

	.main-navigation .sub-menu .nav-link {
		padding: 0.5rem 1rem;
		font-size: var(--fs-sm);
		color: var(--ink-600);
	}

	.main-navigation .current-menu-item > .nav-link::after,
	.main-navigation .current_page_item > .nav-link::after {
		display: none;
	}

	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		background: var(--surface-3);
		color: var(--ink-600);
		border: 0;
		border-radius: var(--radius-xs);
		cursor: pointer;
	}

	.submenu-toggle svg {
		transition: transform var(--dur) var(--ease);
	}

	.submenu-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.meta-nav {
		display: none;
	}

	.header-action__label {
		display: none;
	}

	.header-action--cart {
		width: 40px;
		padding: 0;
	}

	.header-action--cart .cart-count {
		position: absolute;
		top: 2px;
		right: 2px;
		min-width: 16px;
		height: 16px;
		font-size: 10px;
	}

	.header-action--cart {
		position: relative;
	}

	.post-card,
	.site-main > .hentry,
	.site-main > .post,
	.site-main > .page,
	.download-single,
	.related-products,
	.edd-page,
	.comments-area {
		padding: var(--sp-4);
		border-radius: var(--radius-md);
	}
}

@media (max-width: 720px) {
	.site-hero,
	.store-toolbar {
		gap: var(--sp-3);
	}

	.product-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: var(--sp-3);
	}

	.product-card__body {
		padding: var(--sp-3);
	}

	.product-card__title {
		font-size: var(--fs-base);
	}

	.product-card__excerpt {
		display: none;
	}

	.store-toolbar__filters {
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 2px;
		scrollbar-width: none;
	}

	.store-toolbar__filters::-webkit-scrollbar {
		display: none;
	}

	.store-toolbar__sort {
		width: 100%;
		justify-content: space-between;
	}

	.store-toolbar__sort .select-wrap {
		flex: 1 1 auto;
	}

	.store-toolbar__sort select {
		width: 100%;
	}

	.download-layout {
		gap: var(--sp-4);
	}

	.entry-meta {
		gap: var(--sp-3);
	}

	#primary .entry-meta .comments-link {
		margin-left: 0;
	}

	.search-form {
		flex-wrap: wrap;
	}

	.search-form__submit {
		width: 100%;
	}

	/* Wide EDD tables scroll inside their own box instead of dragging the
	   whole page wider than the screen. */
	.edd-page table,
	#edd_user_history {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		white-space: nowrap;
	}

	/* The checkout cart drops its columns: one card per item, title on its own
	   line, price and quantity / remove underneath. No sideways scrolling. */
	#edd_checkout_cart {
		display: block;
		width: 100%;
		max-width: 100%;
		white-space: normal;
	}

	#edd_checkout_cart thead {
		display: none;
	}

	#edd_checkout_cart tbody,
	#edd_checkout_cart tfoot {
		display: block;
	}

	#edd_checkout_cart tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--sp-3);
	}

	#edd_checkout_cart tr.edd_cart_item {
		padding-block: var(--sp-3);
		border-bottom: 1px solid var(--line);
	}

	#edd_checkout_cart td,
	#edd_checkout_cart th {
		display: block;
		padding: 0;
		border: 0;
		text-align: left;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	#edd_checkout_cart td.edd_cart_item_name {
		grid-column: 1 / -1;
		padding-bottom: var(--sp-2);
		font-weight: 600;
	}

	#edd_checkout_cart .edd_cart_item_image {
		display: none;
	}

	#edd_checkout_cart td.edd_cart_item_price {
		grid-column: 1;
	}

	#edd_checkout_cart td.edd_cart_actions {
		grid-column: 2;
		display: flex;
		align-items: center;
		gap: var(--sp-3);
	}

	#edd_checkout_cart .edd-item-quantity {
		width: 4rem;
		min-height: 36px;
		text-align: center;
	}

	#edd_checkout_cart .edd_cart_footer_row th,
	#edd_checkout_cart .edd_cart_total {
		grid-column: 1 / -1;
		text-align: left;
		white-space: normal;
	}

	#edd_checkout_cart .edd_cart_total {
		padding-top: var(--sp-3);
		font-weight: 700;
	}

	#edd_checkout_cart .edd_cart_amount {
		float: none;
	}

	/* EDD's own checkout CSS pulls several blocks sideways with negative
	   margins and lets fieldsets grow to their content width; on a phone that
	   pushes the form past the viewport. */
	#edd_checkout_wrap p,
	#edd_checkout_wrap fieldset,
	#edd_checkout_wrap .edd_form {
		margin-inline: 0;
		max-width: 100%;
		min-width: 0;
	}

	#edd_checkout_wrap input:not([type="radio"]):not([type="checkbox"]),
	#edd_checkout_wrap select,
	#edd_checkout_wrap textarea {
		max-width: 100%;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 460px) {
	.product-grid {
		grid-template-columns: 1fr;
	}

	.product-card__excerpt {
		display: block;
	}
}

/* ==========================================================================
   19. Reduced motion / print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal] {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.site-header,
	.site-footer,
	.header-actions,
	.buy-box__action,
	.comments-area,
	.paging-navigation,
	.post-navigation {
		display: none !important;
	}

	body {
		background: #fff;
	}

	.site-content {
		display: block;
		padding: 0;
	}

	.download-single,
	.post-card,
	.edd-page {
		border: 0;
		box-shadow: none;
		padding: 0;
	}
}