/*
 * Arcanum Loot brand layer.
 * Loads last. Part 1 applies the brand direction across the theme.
 * Part 2 is the homepage component library (.ak-*), formerly in Additional CSS.
 * Colors come from the tokens in style.css (:root, --al-*).
 */

/* ==========================================================================
   PART 1. THEME-WIDE
   ========================================================================== */

/* ---------- Type ---------- */
body {
	color: var(--al-text);
}
h1, h2, h3, h4, h5, h6 {
	color: var(--al-ink);
	letter-spacing: -.02em;
	line-height: 1.15;
}
h1 { font-size: var(--al-fs-3xl); }
h2 { font-size: var(--al-fs-2xl); }
h3 { font-size: var(--al-fs-xl); }
h4 { font-size: var(--al-fs-lg); }
h5 { font-size: var(--al-fs-md); }
h6 { font-size: var(--al-fs-base); }
p, li, dd, td, th, label, input, select, textarea, button {
	font-size: inherit;
}
input, select, textarea {
	font-size: var(--al-fs-base); /* also stops iOS zooming into form fields */
}
.woocommerce div.product .product_title.entry-title,
.woocommerce-products-header__title.page-title,
.entry-title {
	font-weight: 760;
	letter-spacing: -.045em;
	line-height: 1.05;
}
.woocommerce div.product .product_title.entry-title {
	width: auto;
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	margin: 0 0 14px;
}

/* ---------- Links ---------- */
.entry-content a:not(.wp-block-button__link):not(.button),
.woocommerce-product-details__short-description a,
.woocommerce-Tabs-panel a,
.ak-text-link {
	color: var(--al-green-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.entry-content a:not(.wp-block-button__link):not(.button):hover,
.woocommerce-Tabs-panel a:hover {
	color: var(--al-ink);
}

/* ---------- Focus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--al-green-deep);
	outline-offset: 2px;
}

/* ---------- Buttons: see BUTTON SYSTEM at the end of this file ---------- */

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
	border: 1px solid var(--al-border-strong);
	border-radius: 6px;
	color: var(--al-ink);
}
input:focus,
select:focus,
textarea:focus {
	border-color: var(--al-green-deep);
}

/* ---------- Product cards ---------- */
.woocommerce ul.products li.product {
	border: 1px solid var(--al-border);
	border-radius: var(--al-radius);
	box-shadow: var(--al-shadow);
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(20, 48, 30, .07);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: var(--al-ink);
	letter-spacing: -.02em;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--al-ink);
	font-weight: 800;
	letter-spacing: -.03em;
}
.woocommerce div.product p.price {
	font-size: var(--al-fs-xl);
}

/* ---------- Product page ---------- */
.al-product-cats a {
	color: var(--al-green-deep);
	background: var(--al-surface-2);
	border: 1px solid #dce8df;
	font-weight: 750;
	letter-spacing: .14em;
	font-size: var(--al-fs-xs);
}
.al-product-cats a:hover {
	background: var(--al-green);
	border-color: var(--al-green);
	color: var(--al-on-green);
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--al-text);
	font-size: var(--al-fs-md);
	line-height: 1.7;
}
.woocommerce div.product .woocommerce-product-gallery {
	border-radius: var(--al-radius-lg);
	overflow: hidden;
}
.stock-status.in-stock,
.stock-status.on-backorder {
	color: var(--al-green-deep);
}

/* Tabs: active tab is a green fill with dark text (white on #1ed373 fails contrast). */
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:active {
	background: var(--al-green);
	border-color: var(--al-green);
	color: var(--al-on-green);
}
.woocommerce div.product .woocommerce-tabs .panel,
header.woocommerce-products-header {
	border: 1px solid var(--al-border);
	border-radius: var(--al-radius);
	box-shadow: var(--al-shadow);
}

/* Related / upsell headings get the section-title treatment. */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 740;
	letter-spacing: -.045em;
	margin-bottom: 24px;
}

/* Sale badge */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background: var(--al-green);
	color: var(--al-on-green);
	border-radius: 999px;
	font-weight: 750;
}

/* Notices */
.woocommerce-message,
.woocommerce-info {
	border-radius: var(--al-radius);
	border-color: var(--al-border);
	border-left: 3px solid var(--al-green);
	background: var(--al-surface);
	color: var(--al-ink);
}

/* Quantity stepper */
button.qty-plus,
button.qty-minus,
form.cart .quantity .qty {
	border-color: var(--al-border-strong);
	color: var(--al-ink);
}

/* ---------- Footer ---------- */
#colophon.site-footer {
	background: var(--al-surface);
	border-top: 1px solid var(--al-border);
	color: var(--al-muted);
	margin-top: 40px;
}
#colophon .footer-widgets {
	border-top: 0;
}
#colophon .footer-widgets .widget-title {
	color: var(--al-ink);
	font-weight: 750;
	letter-spacing: -.01em;
}
#colophon .site_info .text {
	color: var(--al-subtle);
	font-size: var(--al-fs-xs);
}
#colophon .footer-navigation .footer-menu a {
	color: var(--al-ink);
}
#colophon .footer-navigation .footer-menu a:hover,
#colophon .footer-navigation .footer-menu a:focus-visible {
	color: var(--al-green-deep);
}
#backToTop.ui-to-top {
	border-color: var(--al-border-strong);
	color: var(--al-ink);
	border-radius: var(--al-radius-btn);
}
#backToTop.ui-to-top:hover,
#backToTop.ui-to-top:focus-visible {
	background: var(--al-green);
	border-color: var(--al-green);
	color: var(--al-on-green);
}

/* ---------- Navigation ---------- */
#navbar .navigation-menu li a:hover,
#navbar .navigation-menu li a:focus,
#navbar .navigation-menu li.current-menu-item > a {
	color: var(--al-green-deep);
}

@media (prefers-reduced-motion: reduce) {
	.theme-btn,
	.woocommerce a.button,
	.woocommerce button.button,
	.wp-block-button__link,
	.woocommerce ul.products li.product {
		transition: none;
	}
	.theme-btn:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.wp-block-button__link:hover,
	.woocommerce ul.products li.product:hover {
		transform: none;
	}
}

/* ==========================================================================
   PART 2. HOMEPAGE COMPONENTS (.ak-*)
   Used by block markup on the homepage. Same rules as the former
   Additional CSS, with colors moved onto the tokens.
   ========================================================================== */

.ak-hero, .ak-proof-strip, .ak-section, .ak-value-section,
.ak-register-section, .ak-newsletter-section {
	box-sizing: border-box;
}
.ak-hero {
	background: var(--al-surface);
	color: var(--al-ink);
	padding: clamp(56px, 8vw, 104px) 24px;
	border-bottom: 1px solid #e7eee9;
}
.ak-hero-grid { gap: clamp(36px, 6vw, 84px); align-items: center; }
.ak-hero-copy { max-width: 650px; }
.ak-eyebrow {
	margin: 0 0 16px;
	color: var(--al-green-deep);
	font-size: var(--al-fs-xs);
	font-weight: 750;
	letter-spacing: .14em;
	line-height: 1.5;
	text-transform: uppercase;
}
.ak-hero-title {
	max-width: 720px;
	margin: 0 0 22px;
	color: var(--al-ink);
	font-size: clamp(2.65rem, 5.3vw, 5rem);
	font-weight: 760;
	letter-spacing: -.055em;
	line-height: .99;
}
.ak-hero-lede {
	max-width: 580px;
	margin: 0 0 24px;
	color: var(--al-text);
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.65;
}
.ak-price-row { gap: 14px; margin: 0 0 26px !important; }
.ak-price { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -.04em; }
.ak-price-note { margin: 0; color: #526158; font-size: .95rem; }
.ak-hero-actions { gap: 12px; margin: 0 0 16px !important; }
/* .ak-button-primary / .ak-button-secondary: see BUTTON SYSTEM. */
.ak-microcopy { color: var(--al-subtle); font-size: var(--al-fs-xs); }
.ak-product-stage {
	position: relative; overflow: hidden; min-height: 420px;
	display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 4vw, 48px);
	border: 1px solid #dce8df; border-radius: var(--al-radius-lg);
	background:
		radial-gradient(ellipse at 72% 20%, rgba(30, 211, 115, .18), transparent 38%),
		linear-gradient(145deg, var(--al-stage) 0%, #dfeae2 100%);
	box-shadow: var(--al-shadow-lg);
}
.ak-product-stage:before, .ak-product-stage:after {
	content: ""; position: absolute; border: 1px solid rgba(8, 124, 67, .18); border-radius: 50%;
	width: 250px; height: 250px; right: -36px; top: -44px; pointer-events: none;
}
.ak-product-stage:after { width: 330px; height: 330px; right: -76px; top: -84px; }
.ak-stage-label, .ak-stage-title, .ak-stage-copy, .ak-stage-note { position: relative; z-index: 1; }
.ak-stage-label { margin: 0 0 12px; color: var(--al-green-deep); font-size: var(--al-fs-xs); font-weight: 800; letter-spacing: .15em; }
.ak-stage-title { max-width: 360px; margin: 0 0 14px; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.04; letter-spacing: -.045em; }
.ak-stage-copy { max-width: 350px; color: #43564a; line-height: 1.6; }
.ak-stage-note { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid #c8d9cd; color: #526158; font-size: var(--al-fs-xs); }
.ak-proof-strip { padding: 24px; background: #fff; border-bottom: 1px solid #e8eee9; }
.ak-proof-grid { max-width: 1180px; margin: 0 auto !important; gap: 0; }
.ak-proof-grid > .wp-block-column { padding: 8px 24px; border-right: 1px solid #e3eae5; }
.ak-proof-grid > .wp-block-column:first-child { padding-left: 0; }
.ak-proof-grid > .wp-block-column:last-child { border-right: 0; padding-right: 0; }
.ak-proof-title { margin: 0 0 5px; color: var(--al-ink); font-weight: 750; }
.ak-proof-copy { margin: 0; color: #66736a; font-size: .88rem; line-height: 1.5; }
.ak-section { padding: clamp(64px, 8vw, 100px) 24px; }
.ak-section-heading { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.ak-section-title { margin: 0 0 16px; color: var(--al-ink); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 740; letter-spacing: -.045em; line-height: 1.05; }
.ak-section-lede { margin: 0 auto; color: var(--al-muted); font-size: 1.08rem; line-height: 1.7; }
.ak-product-grid { gap: 18px; margin-bottom: 18px !important; }
.ak-item-card {
	height: 100%; padding: 28px; border: 1px solid var(--al-border); border-radius: var(--al-radius);
	background: #fff; box-shadow: var(--al-shadow);
}
.ak-item-number { margin: 0 0 22px; color: var(--al-green-mid); font-size: var(--al-fs-xs); font-weight: 800; letter-spacing: .12em; }
.ak-item-card h3 { margin: 0 0 12px; color: var(--al-ink); font-size: 1.25rem; letter-spacing: -.02em; }
.ak-item-card p:last-child { margin-bottom: 0; color: var(--al-muted); line-height: 1.7; }
.ak-section-cta { margin-top: 34px !important; }
.ak-value-section { padding: clamp(54px, 7vw, 82px) 24px; background: var(--al-surface-2); border-top: 1px solid #e0ebe3; border-bottom: 1px solid #e0ebe3; }
.ak-value-grid { max-width: 1180px; margin: 0 auto !important; gap: clamp(36px, 7vw, 100px); }
.ak-value-grid .ak-section-title { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.ak-value-copy { margin-top: 0; color: #35453a; font-size: 1.12rem; line-height: 1.8; }
.ak-value-footnote { padding-top: 16px; border-top: 1px solid #d8e5db; color: #657168; font-size: .9rem; line-height: 1.7; }
.ak-gift-section { background: #fff; }
.ak-gift-grid { gap: clamp(32px, 7vw, 100px); }
.ak-gift-grid p { color: #56645a; line-height: 1.8; }
.ak-gift-closer { padding-left: 18px; border-left: 3px solid var(--al-green); color: var(--al-ink) !important; font-weight: 700; }
.ak-text-link { display: inline-block; margin-top: 6px; font-weight: 750; }
.ak-components-section { background: var(--al-surface); border-top: 1px solid #e8eee9; border-bottom: 1px solid #e8eee9; }
.ak-components-section .products { gap: 18px; }
.ak-components-section .products li.product {
	padding: 18px; border: 1px solid var(--al-border); border-radius: var(--al-radius); background: #fff;
}
.ak-about-section { padding-top: 58px; padding-bottom: 58px; }
.ak-about-grid { gap: 36px; }
.ak-about-grid p:not(.ak-eyebrow) { color: #56645a; line-height: 1.8; }
.ak-register-section { padding: 64px 24px; background: var(--al-surface-2); text-align: center; border-top: 1px solid #e0ebe3; }
.ak-register-section > p:not(.ak-eyebrow) { max-width: 600px; margin: 0 auto 24px; color: #56645a; line-height: 1.7; }
.ak-faq-section { padding-top: 80px; padding-bottom: 80px; }
.ak-faq-section .ak-section-title { margin-bottom: 28px; }
.ak-faq-section details { padding: 20px 0; border-bottom: 1px solid #e2e9e4; }
.ak-faq-section details:first-of-type { border-top: 1px solid #e2e9e4; }
.ak-faq-section summary { color: var(--al-ink); font-weight: 700; cursor: pointer; }
.ak-faq-section details p { margin: 14px 0 0; color: var(--al-muted); line-height: 1.75; }
.ak-newsletter-section { padding: clamp(56px, 7vw, 84px) 24px; background: var(--al-ink); color: #fff; text-align: center; }
.ak-newsletter-section .ak-eyebrow { color: var(--al-green); }
.ak-newsletter-section .ak-section-title { color: #fff; }
.ak-newsletter-section > p:not(.ak-eyebrow) { color: #d2ddd5; line-height: 1.7; }
.ak-newsletter-section input[type="email"],
.ak-newsletter-section input[type="text"] { min-height: 48px; border-radius: 6px; }


@media (max-width: 781px) {
	.ak-hero { padding-top: 52px; padding-bottom: 52px; }
	.ak-hero-grid { gap: 32px; }
	.ak-hero-title { font-size: clamp(2.55rem, 10vw, 4rem); }
	.ak-product-stage { min-height: 310px; }
	.wp-block-columns.ak-proof-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
	.wp-block-columns.ak-proof-grid > .wp-block-column,
	.wp-block-columns.ak-proof-grid > .wp-block-column:first-child,
	.wp-block-columns.ak-proof-grid > .wp-block-column:last-child { padding: 12px 0; border-right: 0; flex-basis: auto !important; }
	.ak-proof-title { font-size: .95rem; }
	.ak-proof-copy { font-size: var(--al-fs-xs); }
	.ak-item-card { padding: 22px; }
	.ak-value-grid, .ak-gift-grid, .ak-about-grid { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.ak-button-primary .wp-block-button__link { transition: none; }
}

/* ==========================================================================
   SIDEBAR BRANDING
   The original theme framed the logo as a round profile photo. A wordmark
   needs room, so the logo sits full-width and uncropped.
   ========================================================================== */
#aside-nav-wrapper .wp-header-image {
	background-color: var(--al-surface-2);
}
#aside-nav-wrapper .my-photo {
	position: static;
	left: auto;
	bottom: auto;
	transform: none;
	width: auto;
	max-width: 186px;
	height: auto;
	margin: 28px auto 0;
	padding: 0;
	border-radius: 0;
	overflow: visible;
	background: none;
	box-shadow: none;
	text-align: center;
}
/* With a header image, the logo sits centered just under the image's pointed edge. */
#aside-nav-wrapper .wp-header-image {
	margin-bottom: 0;
}
#aside-nav-wrapper .wp-header-image + .my-photo {
	position: relative;
	left: auto;
	margin-top: -22px;
	z-index: 5;
}
#aside-nav-wrapper .my-photo .custom-logo-link {
	display: block;
}
#aside-nav-wrapper .my-photo .custom-logo {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
}
#aside-nav-wrapper .branding-text .site-title {
	color: var(--al-ink);
	letter-spacing: -.03em;
}

/* ==========================================================================
   WOOCOMMERCE BLOCKS (cart, checkout, product grids)
   Block styles ship their own small sizes; hold them to the type floor.
   ========================================================================== */
.wc-block-grid__product-title,
.wc-block-grid__product-price,
.wc-block-grid .wp-block-button__link,
.wc-block-components-product-metadata,
.wc-block-components-product-metadata p,
.wc-block-components-product-details,
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__input,
.wc-blocks-components-select__label,
.wc-block-components-text-input label,
.wc-block-components-checkbox__label,
.wc-block-components-order-summary-item__quantity,
.wc-block-components-order-summary-item__description,
.wc-block-components-totals-item__description,
.wc-block-components-checkout-step__description,
.wc-block-components-validation-error {
	font-size: max(1em, var(--al-fs-xs)) !important;
}
.wc-block-components-order-summary-item__quantity span {
	font-size: var(--al-fs-xs);
}
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-textarea {
	font-size: var(--al-fs-base) !important;
}

/* ==========================================================================
   FULL WIDTH TEMPLATE (page-templates/full-width.php, used by the homepage)
   No page card or container padding. "Full width" blocks span the whole
   content area; their own layout settings constrain the content inside.
   ========================================================================== */
main.al-full-width {
	margin: 0;
	min-height: 0;
	padding: 0;
}
.al-full-width .al-full-width-entry,
.al-full-width .entry-content {
	margin: 0;
	padding: 0;
	box-shadow: none;
	background: none;
}
.al-full-width .entry-content > * {
	margin-top: 0;
	margin-bottom: 0;
}
.al-full-width .entry-content > .alignfull {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.al-full-width .entry-content > .alignwide {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
body.al-is-full-width #colophon.site-footer {
	margin-top: 0;
}

/* ==========================================================================
   HERO AS A COVER BLOCK (full-width background photo)
   Dark scrim on the left keeps the copy readable; the product shows on the right.
   ========================================================================== */
.wp-block-cover.ak-hero {
	min-height: clamp(560px, 82vh, 780px);
	padding: clamp(64px, 9vw, 120px) clamp(24px, 5vw, 72px);
	border-bottom: 0;
	background-color: var(--al-ink);
	color: #fff;
	align-items: center;
}
.wp-block-cover.ak-hero .wp-block-cover__inner-container {
	width: 100%;
	color: #fff;
}
.wp-block-cover.ak-hero .ak-hero-copy {
	max-width: 640px;
	margin-left: 0;
}
.wp-block-cover.ak-hero .ak-eyebrow {
	color: var(--al-green);
}
.wp-block-cover.ak-hero .ak-hero-title,
.wp-block-cover.ak-hero .ak-price {
	color: #fff;
}
.wp-block-cover.ak-hero .ak-hero-lede {
	color: rgba(255, 255, 255, .88);
}
.wp-block-cover.ak-hero .ak-price-note,
.wp-block-cover.ak-hero .ak-microcopy {
	color: rgba(255, 255, 255, .8);
}
.wp-block-cover.ak-hero a:focus-visible {
	outline-color: var(--al-green);
}
@media (max-width: 781px) {
	.wp-block-cover.ak-hero {
		min-height: 0;
		padding: 64px 20px;
	}
	/* Copy spans the full width on phones, so darken the whole photo evenly. */
	.wp-block-cover.ak-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(16, 24, 19, .82) 0%, rgba(16, 24, 19, .9) 100%) !important;
		opacity: 1 !important;
	}
}


/* ==========================================================================
   FIXED SIDE NAVIGATION
   The whole left column stays put while the page scrolls.
   ========================================================================== */
#aside-nav-wrapper,
#aside-nav-wrapper.fixed {
	position: fixed;
	top: 0;
	bottom: 0;
	right: auto; /* left comes from the base rules: 0 on desktop, off-canvas on phones */
	height: 100vh;
	height: 100dvh;
	min-height: 0;
	max-height: none;
	overflow: visible; /* desktop submenus fly out to the right */
}
.admin-bar #aside-nav-wrapper {
	top: 32px;
	height: calc(100vh - 32px);
	height: calc(100dvh - 32px);
}
/* Short desktop screens: let the column scroll on its own if it can't fit. */
@media (min-width: 751px) and (max-height: 620px) {
	#aside-nav-wrapper,
	#aside-nav-wrapper.fixed {
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}
/* Phones and small tablets: it's an off-canvas panel; it scrolls internally when open. */
@media (max-width: 750px) {
	#aside-nav-wrapper,
	#aside-nav-wrapper.fixed {
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}
@media (max-width: 782px) {
	.admin-bar #aside-nav-wrapper {
		top: 46px;
		height: calc(100vh - 46px);
		height: calc(100dvh - 46px);
	}
}

/* ==========================================================================
   PRODUCT GRID: clickable images
   ========================================================================== */
.woocommerce ul.products li.product .al-loop-image-link {
	display: block;
	overflow: hidden;
	cursor: pointer;
}
.woocommerce ul.products li.product .al-loop-image-link img {
	margin: 0;
}

/* ==========================================================================
   CONTACT FORM 7
   ========================================================================== */
.wpcf7 {
	max-width: 720px;
}
.wpcf7 form > p {
	margin: 0 0 22px;
}
.wpcf7 label {
	display: block;
	color: var(--al-ink);
	font-size: var(--al-fs-base);
	font-weight: 700;
	line-height: 1.4;
}
.wpcf7 label br {
	display: none;
}
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	min-height: 54px;
	padding: 14px 16px;
	border: 1px solid var(--al-border-strong);
	border-radius: var(--al-radius-btn);
	background: #fff;
	color: var(--al-ink);
	font-family: var(--body-font);
	font-size: var(--al-fs-base);
	font-weight: 400;
	line-height: 1.5;
	box-shadow: inset 0 1px 2px rgba(20, 48, 30, .04);
	margin: 0;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.wpcf7 textarea {
	min-height: 180px;
	resize: vertical;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--al-subtle);
	opacity: 1;
}
.wpcf7 input:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover {
	border-color: var(--al-muted);
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	border-color: var(--al-green-deep);
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 211, 115, .28);
}
/* Checkboxes, radios, acceptance */
.wpcf7 .wpcf7-list-item {
	margin: 0 18px 8px 0;
}
.wpcf7 .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 400;
	color: var(--al-text);
}
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--al-green-deep);
}
/* Submit button: see BUTTON SYSTEM. */
.wpcf7 .wpcf7-spinner {
	vertical-align: middle;
	margin-left: 14px;
}
/* Validation */
.wpcf7 .wpcf7-not-valid {
	border-color: #b42318 !important;
	box-shadow: 0 0 0 3px rgba(180, 35, 24, .14);
}
.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 8px;
	color: #b42318;
	font-size: var(--al-fs-sm);
	font-weight: 600;
}
.wpcf7 form .wpcf7-response-output {
	margin: 8px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--al-border);
	border-left-width: 4px;
	border-radius: var(--al-radius-btn);
	background: var(--al-surface);
	color: var(--al-ink);
	font-size: var(--al-fs-base);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--al-green);
	background: var(--al-surface-2);
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #b42318;
	background: #fdf3f2;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #b54708;
	background: #fffaeb;
}

/* ==========================================================================
   SIDE NAVIGATION FOOTER (social icons)
   Appearance > Widgets > "Side Navigation Footer" > Social Icons block.
   ========================================================================== */
#aside-nav-wrapper .header-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
#aside-nav-wrapper .al-nav-social {
	margin-top: auto;
	padding: 24px 20px 28px;
	border-top: 1px solid var(--al-border);
}
#aside-nav-wrapper .al-nav-social-title {
	margin: 0 0 12px;
	color: var(--al-muted);
	font-size: var(--al-fs-xs);
	font-weight: 750;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
}
#aside-nav-wrapper .al-nav-social .wp-block-social-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 20px; /* icon size */
}
#aside-nav-wrapper .al-nav-social .wp-block-social-links .wp-social-link {
	margin: 0;
	border: 1px solid var(--al-border-strong);
	border-radius: 50%;
	background: #fff !important;
	color: var(--al-ink) !important;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .18s ease;
}
#aside-nav-wrapper .al-nav-social .wp-block-social-links .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: inherit !important;
}
#aside-nav-wrapper .al-nav-social .wp-block-social-links .wp-social-link svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
#aside-nav-wrapper .al-nav-social .wp-block-social-links .wp-social-link:hover,
#aside-nav-wrapper .al-nav-social .wp-block-social-links .wp-social-link:focus-within {
	background: var(--al-green) !important;
	border-color: var(--al-green);
	color: #fff !important;
	transform: translateY(-1px);
}
@media (max-width: 750px) {
	/* Closed panel: hidden, so its links can't be tabbed to off-screen. */
	#aside-nav-wrapper .header-wrap {
		display: none;
	}
	#aside-nav-wrapper.active .header-wrap {
		display: flex;
	}
}

/* ==========================================================================
   PAGE AND POST BODY TEXT (policies, about, blog)
   ========================================================================== */
.content-post-wrap .post a:not(.wp-block-button__link):not(.button):not(.theme-btn):not(.link-btn),
.content-post-wrap .entry-content a:not(.wp-block-button__link):not(.button):not(.theme-btn):not(.link-btn) {
	color: var(--al-green-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.content-post-wrap .post a:not(.wp-block-button__link):not(.button):not(.theme-btn):not(.link-btn):hover,
.content-post-wrap .entry-content a:not(.wp-block-button__link):not(.button):not(.theme-btn):not(.link-btn):hover {
	color: var(--al-ink);
}
.content-post-wrap .post h2,
.content-post-wrap .entry-content h2 {
	font-size: var(--al-fs-xl);
	margin: 1.6em 0 .5em;
}
.content-post-wrap .post h3,
.content-post-wrap .entry-content h3 {
	font-size: var(--al-fs-lg);
	margin: 1.4em 0 .4em;
}
.content-post-wrap .post ul,
.content-post-wrap .post ol {
	margin: 0 0 1.4em;
	padding-left: 1.4em;
}
.content-post-wrap .post li {
	margin-bottom: .45em;
}

/* ==========================================================================
   ABOUT PAGE pieces (reusable on any page)
   ========================================================================== */
.ak-about-hero .ak-hero-title {
	font-size: clamp(2.4rem, 4.6vw, 4rem);
	max-width: 820px;
}
.ak-about-story p {
	color: var(--al-text);
	font-size: var(--al-fs-md);
	line-height: 1.8;
	margin: 0 0 1.2em;
}
.ak-about-story .ak-gift-closer {
	margin: 1.6em 0;
	font-size: var(--al-fs-lg);
}
.ak-about-gift .ak-value-copy {
	margin-bottom: 26px;
}
/* Cards in a row share one height. */
.wp-block-columns.ak-product-grid {
	align-items: stretch !important;
}
.wp-block-columns.ak-product-grid > .wp-block-column.ak-item-card {
	align-self: stretch;
	height: auto;
}
.ak-signature {
	margin: 18px 0 30px;
	color: var(--al-ink);
	font-weight: 750;
	line-height: 1.5;
}
.ak-about-signoff > p:not(.ak-eyebrow):not(.ak-signature) {
	font-size: var(--al-fs-md);
}

/* ==========================================================================
   POSTS PAGE INTRO (Resources)
   The posts page's own content, printed above the feed by index.php.
   ========================================================================== */
.al-posts-intro .entry-content > * {
	margin-top: 0;
	margin-bottom: 0;
}
.al-posts-intro .entry-content > .alignfull {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.al-posts-intro {
	margin-bottom: 40px;
}
.ak-resources-intro p:not(.ak-eyebrow):not(.ak-hero-lede):not(.ak-gift-closer) {
	color: var(--al-text);
	font-size: var(--al-fs-md);
	line-height: 1.75;
	margin: 0 0 1em;
}
.ak-resources-intro .ak-hero-title {
	font-size: clamp(2.4rem, 4.6vw, 4rem);
}
.ak-resources-intro .ak-gift-closer {
	margin: 1.4em 0 0;
}

/* ==========================================================================
   POST CARDS (Resources feed, archives, search)
   ========================================================================== */
#primary .content-post-wrap {
	border: 1px solid var(--al-border);
	border-radius: var(--al-radius);
	box-shadow: var(--al-shadow);
	padding: 30px 32px;
	margin-bottom: 28px;
	transition: box-shadow .25s ease, transform .25s ease;
}
#primary .content-post-wrap:hover {
	box-shadow: 0 14px 34px rgba(20, 48, 30, .07);
	transform: translateY(-2px);
}
#primary .content-post-wrap .img-box {
	margin: -30px -32px 24px;
	border-radius: var(--al-radius) var(--al-radius) 0 0;
}
.content-post-wrap .post .post-meta li {
	font-family: var(--body-font);
	font-size: var(--al-fs-xs);
	letter-spacing: 0;
	color: var(--al-muted);
	margin-right: 14px;
	padding-right: 14px;
}
.content-post-wrap .post .post-meta li:after {
	content: "";
	border: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--al-border-strong);
	top: 50%;
	transform: translateY(-50%);
}
.content-post-wrap .post .post-meta li a {
	color: var(--al-green-deep);
	font-weight: 650;
	text-decoration: none;
}
#primary .content-post-wrap .entry-title {
	padding-bottom: 0;
	margin: 6px 0 12px;
	font-size: var(--al-fs-lg);
	letter-spacing: -.02em;
}
#primary .content-post-wrap .entry-title a {
	color: var(--al-ink);
	text-decoration: none;
	padding-bottom: 0;
}
#primary .content-post-wrap .entry-title a:hover {
	color: var(--al-green-deep);
}
#primary .content-post-wrap .content-wrap {
	color: var(--al-text);
}
@media (prefers-reduced-motion: reduce) {
	#primary .content-post-wrap,
	#primary .content-post-wrap:hover {
		transition: none;
		transform: none;
	}
}

/* Single post: title, next/previous and comments match the post cards. */
.single #primary .content-post-wrap .entry-title {
	font-size: var(--al-fs-2xl);
	letter-spacing: -.04em;
	line-height: 1.1;
}
.single #primary .content-post-wrap:hover {
	transform: none;
}
#primary .single-prev-next,
#primary #comments {
	border: 1px solid var(--al-border);
	border-radius: var(--al-radius);
	box-shadow: var(--al-shadow);
}
#primary .single-prev-next a,
#primary #comments .comment-text a,
#primary #comments .logged-in-as a {
	color: var(--al-green-deep);
	text-decoration: underline;
	text-underline-offset: 4px;
}
#primary #comments .reply a {
	background: transparent;
	border: 1px solid var(--al-border-strong);
	border-radius: var(--al-radius-btn);
	color: var(--al-ink);
	font-size: var(--al-fs-xs);
	padding: 6px 12px;
	text-decoration: none;
}
#primary #comments .reply a:hover {
	border-color: var(--al-green-deep);
	color: var(--al-green-deep);
}

/* ==========================================================================
   PRODUCT PAGE GALLERY: fill the whole left column
   The main image always spans the column width and, on desktop, matches the
   height of the product details beside it (cropped to fill, never stretched).
   Clicking the image still opens the full, uncropped photo.
   ========================================================================== */
.woocommerce div.product div.images .woocommerce-product-gallery__image:only-child {
	flex: 1 1 100%;
	width: 100%;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	width: 100%;
}
@media (min-width: 768px) {
	.woocommerce div.product div.images {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		margin-bottom: 0;
	}
	.woocommerce div.product div.images > .woocommerce-product-gallery__wrapper,
	.woocommerce div.product div.images > .flex-viewport {
		flex: 1 1 auto;
		min-height: 420px;
		height: auto !important; /* the slider sets a fixed height; let the column decide */
	}
	.woocommerce div.product div.images .flex-viewport .woocommerce-product-gallery__wrapper,
	.woocommerce div.product div.images .woocommerce-product-gallery__image,
	.woocommerce div.product div.images .woocommerce-product-gallery__image > a {
		height: 100%;
	}
	.woocommerce div.product div.images .woocommerce-product-gallery__image img:not(.zoomImg) {
		height: 100%;
		object-fit: cover;
	}
}

/* ==========================================================================
   BUTTON SYSTEM
   Every call to action on the site is one of two buttons. Same size, shape,
   type and motion everywhere; only the colors differ.

   PRIMARY   the main action on a screen (add to cart on a product page,
             checkout, place order, log in, save, send, homepage CTAs).
             Brand green, dark text. Hover: deep green sweeps in, text goes white.
   SECONDARY supporting actions (product-card add to cart, view cart, view
             order, apply coupon, outline buttons).
             White with a grey outline, dark text. Hover: brand green sweeps
             in, text goes white.

   !important is used on purpose: WooCommerce, its blocks and Contact Form 7
   each ship their own button styles with high specificity. These rules are
   the single source of truth for CTA colors and behavior.
   ========================================================================== */
:root {
	--al-btn-min-h: 50px;
	--al-btn-pad-y: 13px;
	--al-btn-pad-x: 24px;
	--al-btn-weight: 750;
	--al-btn-sweep: background-size .35s cubic-bezier(.2, .7, .2, 1), color .2s ease, border-color .2s ease, transform .18s ease, box-shadow .2s ease;
}

/* ---- Shared shape and motion (both variants) ---- */
.theme-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce #respond input#submit,
.added_to_cart.wc-forward,
.wc-block-components-button:not(.is-link),
.wp-block-button__link,
.wp-block-search__button,
.wpcf7 .wpcf7-submit,
#respond input[type="submit"],
.navigation.posts-navigation a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px;
	min-height: var(--al-btn-min-h) !important;
	padding: var(--al-btn-pad-y) var(--al-btn-pad-x) !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: var(--al-radius-btn) !important;
	font-family: var(--body-font) !important;
	font-size: var(--al-fs-base) !important;
	font-weight: var(--al-btn-weight) !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	background-size: 0% 100% !important;
	box-shadow: none !important;
	transform: none;
	transition: var(--al-btn-sweep) !important;
}
/* Text, icons and spans inside a button follow the button's color. */
:is(.theme-btn, .woocommerce a.button, .woocommerce button.button, .added_to_cart.wc-forward, .wc-block-components-button:not(.is-link), .wp-block-button__link) :is(span, svg, .wc-block-components-button__text) {
	color: inherit !important;
}
/* Retire every older hover effect. */
.theme-btn:after,
.navigation.posts-navigation a:after {
	display: none !important;
}

/* ---- PRIMARY ---- */
.theme-btn,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-form-login__submit,
.woocommerce .woocommerce-form-register__submit,
.woocommerce .woocommerce-Button,
.woocommerce-ResetPassword .button,
.woocommerce .return-to-shop .button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained:not(.is-link),
.wp-block-button__link,
.ak-button-primary .wp-block-button__link,
.wp-block-search__button,
.wpcf7 .wpcf7-submit,
#respond input[type="submit"] {
	background-color: var(--al-green) !important;
	background-image: linear-gradient(var(--al-green-deep), var(--al-green-deep)) !important;
	border-color: var(--al-green) !important;
	color: var(--al-on-green) !important;
}

/* ---- SECONDARY (listed after primary so it wins where both match) ---- */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart.wc-forward,
.added_to_cart.wc-forward,
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-orders-table .button,
.woocommerce .woocommerce-MyAccount-content .woocommerce-message .button,
.woocommerce .woocommerce-MyAccount-downloads .button,
.woocommerce .cart button[name="apply_coupon"],
.woocommerce .cart button[name="update_cart"],
.wc-block-components-totals-coupon__button,
.wc-block-components-product-button__button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.ak-button-secondary .wp-block-button__link,
.navigation.posts-navigation a {
	background-color: #fff !important;
	background-image: linear-gradient(var(--al-green), var(--al-green)) !important;
	border-color: var(--al-border-strong) !important;
	color: var(--al-ink) !important;
}

/* ---- Hover / keyboard focus: the sweep ---- */
.theme-btn:is(:hover, :focus-visible),
.woocommerce a.button:is(:hover, :focus-visible),
.woocommerce button.button:is(:hover, :focus-visible),
.woocommerce input.button:is(:hover, :focus-visible),
.woocommerce .checkout-button:is(:hover, :focus-visible),
.woocommerce #place_order:is(:hover, :focus-visible),
.woocommerce #respond input#submit:is(:hover, :focus-visible),
.added_to_cart.wc-forward:is(:hover, :focus-visible),
.wc-block-components-button:not(.is-link):is(:hover, :focus-visible),
.wp-block-button__link:is(:hover, :focus-visible),
.wp-block-search__button:is(:hover, :focus-visible),
.wpcf7 .wpcf7-submit:is(:hover, :focus-visible),
#respond input[type="submit"]:is(:hover, :focus-visible),
.navigation.posts-navigation a:is(:hover, :focus-visible) {
	background-size: 100% 100% !important;
	color: #fff !important;
	transform: translateY(-1px);
}
/* Primary hover: deep green */
.theme-btn:is(:hover, :focus-visible),
.woocommerce a.button.alt:is(:hover, :focus-visible),
.woocommerce button.button.alt:is(:hover, :focus-visible),
.woocommerce .single_add_to_cart_button:is(:hover, :focus-visible),
.woocommerce .checkout-button:is(:hover, :focus-visible),
.woocommerce #place_order:is(:hover, :focus-visible),
.woocommerce .woocommerce-form-login__submit:is(:hover, :focus-visible),
.woocommerce .woocommerce-form-register__submit:is(:hover, :focus-visible),
.woocommerce .woocommerce-Button:is(:hover, :focus-visible),
.wc-block-cart__submit-button:is(:hover, :focus-visible),
.wc-block-components-checkout-place-order-button:is(:hover, :focus-visible),
.wp-block-button__link:is(:hover, :focus-visible),
.wp-block-search__button:is(:hover, :focus-visible),
.wpcf7 .wpcf7-submit:is(:hover, :focus-visible),
#respond input[type="submit"]:is(:hover, :focus-visible) {
	border-color: var(--al-green-deep) !important;
	box-shadow: 0 8px 18px rgba(8, 124, 67, .25) !important;
}
/* Secondary hover: brand green */
.woocommerce ul.products li.product .button:is(:hover, :focus-visible),
.woocommerce ul.products li.product .added_to_cart.wc-forward:is(:hover, :focus-visible),
.added_to_cart.wc-forward:is(:hover, :focus-visible),
.woocommerce .woocommerce-message .button:is(:hover, :focus-visible),
.woocommerce .woocommerce-info .button:is(:hover, :focus-visible),
.woocommerce .woocommerce-orders-table .button:is(:hover, :focus-visible),
.woocommerce .woocommerce-MyAccount-downloads .button:is(:hover, :focus-visible),
.woocommerce .cart button[name="apply_coupon"]:is(:hover, :focus-visible),
.woocommerce .cart button[name="update_cart"]:is(:hover, :focus-visible),
.wc-block-components-totals-coupon__button:is(:hover, :focus-visible),
.wc-block-components-product-button__button:is(:hover, :focus-visible),
.wc-block-grid__product-add-to-cart .wp-block-button__link:is(:hover, :focus-visible),
.wp-block-button.is-style-outline .wp-block-button__link:is(:hover, :focus-visible),
.ak-button-secondary .wp-block-button__link:is(:hover, :focus-visible),
.navigation.posts-navigation a:is(:hover, :focus-visible) {
	border-color: var(--al-green) !important;
	box-shadow: 0 8px 18px rgba(30, 211, 115, .28) !important;
}

/* ---- Secondary on a dark background (homepage hero) ---- */
.wp-block-cover.ak-hero .ak-button-secondary .wp-block-button__link {
	background-color: rgba(16, 24, 19, .25) !important;
	border-color: rgba(255, 255, 255, .7) !important;
	color: #fff !important;
}
.wp-block-cover.ak-hero .ak-button-secondary .wp-block-button__link:is(:hover, :focus-visible) {
	border-color: var(--al-green) !important;
}

/* ---- Disabled and loading ---- */
:is(.theme-btn, .woocommerce a.button, .woocommerce button.button, .wc-block-components-button, .wp-block-button__link, .wpcf7 .wpcf7-submit):is(:disabled, .disabled, [aria-disabled="true"]) {
	opacity: .55 !important;
	cursor: not-allowed;
	transform: none !important;
	background-size: 0% 100% !important;
}
.woocommerce a.button.loading,
.woocommerce button.button.loading {
	opacity: .7 !important;
}

/* ---- Small: buttons inside tables (My Account orders) ---- */
.woocommerce .woocommerce-orders-table .button,
.woocommerce table.my_account_orders .button {
	--al-btn-min-h: 40px;
	--al-btn-pad-y: 8px;
	--al-btn-pad-x: 16px;
	font-size: var(--al-fs-sm) !important;
}

/* ---- Phones: product cards two to a row ---- */
@media (max-width: 575px) {
	.woocommerce ul.products li.product .product-wrap {
		padding-left: 12px;
		padding-right: 12px;
	}
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product .added_to_cart.wc-forward {
		--al-btn-pad-x: 8px;
		width: 100%;
		min-width: 0;
		margin: auto 0 0;
	}
	.woocommerce ul.products li.product .button .al-icon {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.theme-btn, .woocommerce a.button, .woocommerce button.button, .added_to_cart.wc-forward,
	.wc-block-components-button, .wp-block-button__link, .wpcf7 .wpcf7-submit {
		transition: none !important;
		transform: none !important;
	}
}

/* ==========================================================================
   UPSELL / RELATED / CROSS-SELL CARDS
   Full-width sections under the product, cards never narrower than 320px.
   ========================================================================== */
.woocommerce div.product > .upsells,
.woocommerce div.product > .related,
.woocommerce div.product > .woocommerce-tabs {
	grid-column: 1 / -1;
}
.woocommerce :is(.upsells, .related, .cross-sells) ul.products,
.wp-block-woocommerce-product-collection .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)) !important;
	gap: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce :is(.upsells, .related, .cross-sells) ul.products::before,
.woocommerce :is(.upsells, .related, .cross-sells) ul.products::after {
	display: none;
}
.woocommerce :is(.upsells, .related, .cross-sells) ul.products li.product {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

/* Cart-page cross-sells (block): same card look as the shop. */
.wp-block-woocommerce-product-collection .wc-block-product {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 0 22px;
	border: 1px solid var(--al-border);
	border-radius: var(--al-radius);
	background: #fff;
	box-shadow: var(--al-shadow);
	overflow: hidden;
	text-align: center;
}
.wp-block-woocommerce-product-collection .wc-block-product .wc-block-components-product-image {
	width: 100%;
	margin: 0 0 16px !important;
}
.wp-block-woocommerce-product-collection .wc-block-product .wp-block-post-title,
.wp-block-woocommerce-product-collection .wc-block-product .wp-block-post-title a {
	padding: 0 18px;
	color: var(--al-ink) !important;
	font-size: var(--al-fs-md) !important;
	font-weight: 750;
	text-decoration: none !important;
	letter-spacing: -.02em;
}
.wp-block-woocommerce-product-collection .wc-block-product .wc-block-components-product-price {
	color: var(--al-ink);
	font-weight: 800;
}
.wp-block-woocommerce-product-collection .wc-block-product .wp-block-button {
	margin-top: auto;
}
/* In the cart the column is narrow, so cross-sells sit as compact rows:
   photo on the left, name, price and button on the right. */
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	column-gap: 18px;
	row-gap: 6px;
	align-items: start;
	padding: 14px;
	text-align: left;
}
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product .wc-block-components-product-image {
	grid-row: 1 / span 3;
	margin: 0 !important;
	border-radius: var(--al-radius-btn);
	overflow: hidden;
}
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product :is(.wp-block-post-title, .wc-block-components-product-price, .wp-block-button) {
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	justify-self: start;
}
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product .wp-block-button {
	align-self: end;
}
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product .wp-block-post-title a {
	padding: 0;
}

/* ==========================================================================
   PERSISTENT CART BUTTON (top right, every page except checkout)
   ========================================================================== */
.al-cart-button {
	position: fixed;
	top: 16px;
	right: 20px;
	z-index: 998;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--al-border-strong);
	border-radius: 50%;
	background-color: #fff;
	background-image: linear-gradient(var(--al-green), var(--al-green));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	color: var(--al-ink);
	font-size: 22px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(20, 48, 30, .12);
	transition: var(--al-btn-sweep);
}
.al-cart-button:is(:hover, :focus-visible) {
	background-size: 100% 100%;
	border-color: var(--al-green);
	color: #fff;
	transform: translateY(-1px);
}
.al-cart-button .al-icon {
	width: 22px;
	height: 22px;
}
.al-cart-button .al-cart-count {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 28px;
	height: 28px;
	padding: 0 7px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--al-green-deep);
	color: #fff;
	font-size: var(--al-fs-xs); /* holds the site's 16px floor */
	font-weight: 800;
	line-height: 24px;
	text-align: center;
}
.al-cart-button .al-cart-count.is-empty {
	display: none;
}
.al-cart-button .al-cart-count.is-bumped {
	animation: al-cart-bump .45s ease;
}
@keyframes al-cart-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}
.admin-bar .al-cart-button {
	top: 48px;
}
/* If the slide-out sidebar is in use, its menu button moves left of the cart. */
body:has(.al-cart-button) #sidebar-actions.side-bar-icon:not(.active) {
	right: 84px;
}
@media (max-width: 782px) {
	.admin-bar .al-cart-button {
		top: 62px;
	}
}
@media (max-width: 750px) {
	.al-cart-button {
		top: 12px;
		right: 12px;
		width: 48px;
		height: 48px;
	}
	body:has(.al-cart-button) #sidebar-actions.side-bar-icon:not(.active) {
		right: 68px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.al-cart-button { transition: none; }
	.al-cart-button .al-cart-count.is-bumped { animation: none; }
}

/* Phones: the menu and cart buttons get a thin white bar so they never sit on top of content.
   Only on pages that have the cart button (not WooCommerce's Coming Soon page, for example). */
@media (max-width: 750px) {
	body:has(.al-cart-button)::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 72px;
		z-index: 997;
		background: rgba(255, 255, 255, .96);
		border-bottom: 1px solid var(--al-border);
		backdrop-filter: blur(6px);
	}
	.admin-bar:has(.al-cart-button)::before {
		top: 46px;
	}
	body:has(.al-cart-button) #content.site-content {
		padding-top: 72px;
	}
}
@media (max-width: 750px) {
	body:has(#aside-nav-wrapper.active) #sidebar-actions {
		opacity: 0;
		pointer-events: none;
	}
}

/* ==========================================================================
   MY ACCOUNT
   One set of rules for login, register, lost password and the logged-in
   account area (dashboard, orders, order detail, addresses, account details).
   ========================================================================== */

/* The account page drops the generic page card; its own panels are the cards. */
.woocommerce-account #primary .content-post-wrap {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
.woocommerce-account #primary .content-post-wrap:hover {
	transform: none;
	box-shadow: none;
}

/* Clear the floating menu and cart buttons in the top right corner. */
@media (min-width: 751px) {
	.woocommerce-account .woocommerce {
		padding-top: 64px;
	}
}
@media (max-width: 750px) {
	.woocommerce-account .woocommerce {
		padding-top: 24px;
	}
}

/* Order number, date and status in "Order #61 was placed on..." */
.woocommerce-account .woocommerce-MyAccount-content mark {
	padding: 0;
	background: none;
	color: var(--al-ink);
	font-weight: 700;
}

/* Shared card */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account #customer_login > div,
.woocommerce-account .woocommerce > .woocommerce-form-login,
.woocommerce-account .woocommerce-ResetPassword {
	background: #fff;
	border: 1px solid var(--al-border);
	border-radius: var(--al-radius);
	box-shadow: var(--al-shadow);
}

/* ---------- Logged in: navigation + content ---------- */
.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
	padding: 12px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--al-radius-btn);
	color: var(--al-ink);
	font-weight: 650;
	text-decoration: none !important;
	transition: background .18s ease, color .18s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--al-icon, var(--al-i-chevron-right)) center / 20px 20px no-repeat;
	mask: var(--al-icon, var(--al-i-chevron-right)) center / 20px 20px no-repeat;
	opacity: .8;
}
.woocommerce-MyAccount-navigation-link--dashboard a { --al-icon: var(--al-i-gauge); }
.woocommerce-MyAccount-navigation-link--orders a { --al-icon: var(--al-i-shopping-bag); }
.woocommerce-MyAccount-navigation-link--downloads a { --al-icon: var(--al-i-download); }
.woocommerce-MyAccount-navigation-link--edit-address a { --al-icon: var(--al-i-map-pin); }
.woocommerce-MyAccount-navigation-link--edit-account a { --al-icon: var(--al-i-circle-user); }
.woocommerce-MyAccount-navigation-link--customer-logout a { --al-icon: var(--al-i-log-out); }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--al-surface);
	color: var(--al-green-deep);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--al-surface-2);
	color: var(--al-green-deep);
	box-shadow: inset 3px 0 0 var(--al-green);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--al-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--al-muted);
}

.woocommerce-account .woocommerce-MyAccount-content {
	padding: 32px 36px;
	min-height: 320px;
	color: var(--al-text);
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
	font-size: var(--al-fs-md);
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: var(--al-green-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content legend {
	color: var(--al-ink);
	font-size: var(--al-fs-lg);
	font-weight: 750;
	letter-spacing: -.02em;
	margin: 0 0 14px;
}
.woocommerce-account .woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

/* Notices inside the account area: text and button on one line. */
.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 0 0 24px;
	padding: 16px 20px;
	list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-message, .woocommerce-info) .button {
	order: 2;
	margin: 0;
	float: none;
}

/* ---------- Tables: orders, downloads, order details ---------- */
.woocommerce-account table.shop_table {
	width: 100%;
	margin: 0 0 24px;
	border: 1px solid var(--al-border);
	border-radius: var(--al-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--al-fs-sm);
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: 14px 16px;
	border: 0;
	border-top: 1px solid var(--al-border);
	text-align: left;
	vertical-align: middle;
	background: #fff;
}
.woocommerce-account table.shop_table thead th {
	border-top: 0;
	background: var(--al-surface);
	color: var(--al-ink);
	font-size: var(--al-fs-sm);
	font-weight: 750;
}
.woocommerce-account table.shop_table tfoot th,
.woocommerce-account table.shop_table tfoot td {
	background: var(--al-surface);
}
.woocommerce-account table.shop_table :is(.woocommerce-orders-table__cell-order-date, .woocommerce-orders-table__cell-order-status, .woocommerce-orders-table__cell-order-actions) {
	white-space: nowrap;
}
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-number a {
	font-weight: 750;
}
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-actions {
	text-align: right;
}
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-actions .button + .button {
	margin-left: 8px;
}
/* Order status: a colored dot before the status word. */
.woocommerce-orders-table__cell-order-status::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--al-border-strong);
	vertical-align: 1px;
}
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before { background: var(--al-green-deep); }
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before { background: var(--al-green); }
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status::before { background: #b54708; }
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status::before { background: #b42318; }

.woocommerce-account .woocommerce-pagination {
	display: flex;
	gap: 12px;
}
.woocommerce-account .woocommerce-pagination .button {
	background-color: #fff !important;
	background-image: linear-gradient(var(--al-green), var(--al-green)) !important;
	border-color: var(--al-border-strong) !important;
	color: var(--al-ink) !important;
}

/* ---------- Addresses ---------- */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 20px;
	margin-top: 8px;
}
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	display: none;
}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	width: auto;
	float: none;
	margin: 0;
	padding: 22px 24px;
	border: 1px solid var(--al-border);
	border-radius: var(--al-radius);
	background: var(--al-surface);
}
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: var(--al-fs-md);
}
.woocommerce-account .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	line-height: 1.7;
	color: var(--al-text);
}

/* ---------- Forms: account details, edit address, login, register ---------- */
.woocommerce-account .woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	width: 100%;
	float: none;
}
.woocommerce-account .woocommerce form .form-row label {
	margin: 0;
	color: var(--al-ink);
	font-weight: 700;
	line-height: 1.4;
}
.woocommerce-account .woocommerce form .form-row .required {
	color: #b42318;
	text-decoration: none;
	border: 0;
}
.woocommerce-account .woocommerce form .form-row :is(input.input-text, select, textarea) {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--al-border-strong);
	border-radius: var(--al-radius-btn);
	background: #fff;
	color: var(--al-ink);
	font-size: var(--al-fs-base);
}
.woocommerce-account .woocommerce form .form-row :is(input.input-text, select, textarea):focus {
	border-color: var(--al-green-deep);
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 211, 115, .28);
}
.woocommerce-account .woocommerce form .form-row span em {
	color: var(--al-muted);
	font-size: var(--al-fs-sm);
}
/* First / last name side by side on wider screens */
@media (min-width: 640px) {
	.woocommerce-account .woocommerce-EditAccountForm,
	.woocommerce-account .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
	}
	.woocommerce-account .woocommerce-EditAccountForm > *:not(.form-row-first):not(.form-row-last),
	.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-wide,
	.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row:not(.form-row-first):not(.form-row-last) {
		grid-column: 1 / -1;
	}
}
.woocommerce-account .woocommerce-EditAccountForm fieldset {
	margin: 10px 0 22px;
	padding: 20px 22px 4px;
	border: 1px solid var(--al-border);
	border-radius: var(--al-radius);
	background: var(--al-surface);
}
.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
	padding: 0 8px;
	margin: 0;
	font-size: var(--al-fs-md);
}
.woocommerce-account .woocommerce-EditAccountForm .clear {
	display: none;
}

/* Show / hide password eye */
.woocommerce-account .password-input {
	position: relative;
	display: block;
	width: 100%;
}
.woocommerce-account .password-input input.input-text {
	padding-right: 52px !important;
}
.woocommerce-account .show-password-input {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 36px;
	height: 36px;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--al-muted);
	transform: translateY(-50%);
	cursor: pointer;
}
.woocommerce-account .show-password-input::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: auto;
	background-color: currentColor;
	-webkit-mask: var(--al-i-eye) center / 20px 20px no-repeat;
	mask: var(--al-i-eye) center / 20px 20px no-repeat;
}
.woocommerce-account .show-password-input.display-password::before {
	-webkit-mask-image: var(--al-i-eye-off);
	mask-image: var(--al-i-eye-off);
}

/* ---------- Logged out: login / register / lost password ---------- */
.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 520px;
	margin: 0 auto;
}
.woocommerce-account:not(.logged-in) .woocommerce:has(#customer_login) {
	max-width: 1000px;
}
.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
	gap: 28px;
	width: 100%;
	margin: 0;
}
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after {
	display: none;
}
.woocommerce-account #customer_login > div,
.woocommerce-account .woocommerce > .woocommerce-form-login,
.woocommerce-account .woocommerce-ResetPassword {
	width: auto;
	float: none;
	margin: 0;
	padding: 32px 34px;
}
/* With registration off, WooCommerce prints the login heading and form on their own. */
.woocommerce-account:not(.logged-in) .woocommerce > h2 {
	margin: 0 0 16px;
	font-size: var(--al-fs-xl);
	text-align: center;
}
.woocommerce-account #customer_login h2 {
	margin: 0 0 18px;
	font-size: var(--al-fs-xl);
}
.woocommerce-account :is(.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) {
	border-top: 0;
}
.woocommerce-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 6px;
}
.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	font-weight: 400 !important;
	color: var(--al-text) !important;
}
.woocommerce-account .woocommerce-form-login__rememberme input {
	width: 20px;
	height: 20px;
	accent-color: var(--al-green-deep);
}
.woocommerce-account :is(.woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-ResetPassword .button) {
	width: 100%;
	margin: 0;
}
.woocommerce-account .woocommerce-form-login__submit {
	order: -1;
}
.woocommerce-account .lost_password {
	margin: 18px 0 0;
	text-align: center;
}
.woocommerce-account .lost_password a,
.woocommerce-account .woocommerce-privacy-policy-text a {
	color: var(--al-green-deep);
}
.woocommerce-account .woocommerce-privacy-policy-text {
	color: var(--al-muted);
	font-size: var(--al-fs-sm);
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 900px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
		padding: 8px;
	}
	/* Navigation becomes a row of scrollable tabs. */
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		white-space: nowrap;
		padding: 10px 14px;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		box-shadow: inset 0 -3px 0 var(--al-green);
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0;
		padding: 0;
		border: 0;
	}
	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 24px 20px;
	}
}
@media (max-width: 767px) {
	/* Tables stack into labeled rows. */
	.woocommerce-account table.shop_table_responsive thead {
		display: none;
	}
	.woocommerce-account table.shop_table_responsive,
	.woocommerce-account table {
		min-width: 0;
	}
	.woocommerce-account table.shop_table_responsive tbody,
	.woocommerce-account table.shop_table_responsive tr,
	.woocommerce-account table.shop_table_responsive :is(td, tbody th) {
		display: block;
		width: 100%;
	}
	.woocommerce-account table.shop_table_responsive tr {
		border-top: 1px solid var(--al-border);
		padding: 6px 0;
	}
	.woocommerce-account table.shop_table_responsive tbody tr:first-child {
		border-top: 0;
	}
	.woocommerce-account table.shop_table_responsive :is(td, tbody th) {
		display: flex;
		align-items: center;
		gap: 8px 12px;
		border-top: 0;
		padding: 8px 16px;
		text-align: right !important;
	}
	.woocommerce-account table.shop_table_responsive :is(td, tbody th)::before {
		content: attr(data-title);
		order: -2;
		width: auto;
		height: auto;
		margin: 0 auto 0 0;
		border-radius: 0;
		background: none;
		color: var(--al-ink);
		font-weight: 700;
		text-align: left;
	}
	/* On phones the status dot moves to ::after so ::before can carry the label. */
	.woocommerce-account table.shop_table_responsive td.woocommerce-orders-table__cell-order-status::after {
		content: "";
		order: -1;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: var(--al-status, var(--al-border-strong));
	}
	.woocommerce-orders-table__row--status-completed { --al-status: var(--al-green-deep); }
	.woocommerce-orders-table__row--status-processing { --al-status: var(--al-green); }
	.woocommerce-orders-table__row--status-on-hold,
	.woocommerce-orders-table__row--status-pending { --al-status: #b54708; }
	.woocommerce-orders-table__row--status-cancelled,
	.woocommerce-orders-table__row--status-failed,
	.woocommerce-orders-table__row--status-refunded { --al-status: #b42318; }
	.woocommerce-account table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions::before {
		content: none;
	}
	.woocommerce-account table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions .button {
		width: 100%;
	}
	.woocommerce-account #customer_login > div,
	.woocommerce-account .woocommerce > .woocommerce-form-login,
	.woocommerce-account .woocommerce-ResetPassword {
		padding: 24px 20px;
	}
}

/* ==========================================================================
   RESOURCES FEED (posts page, categories, search)
   Posts sit in a card grid. On the first page the newest post is featured
   across the full row.
   ========================================================================== */
:is(.blog, .archive, .search) #main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 28px;
	align-items: stretch;
}
:is(.blog, .archive, .search) #main > * {
	grid-column: 1 / -1;
}
:is(.blog, .archive, .search) #main > article.content-post-wrap {
	grid-column: auto;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 24px 26px 28px;
	overflow: hidden;
}
:is(.blog, .archive, .search) #main > article.content-post-wrap .img-box {
	margin: -24px -26px 22px;
}
:is(.blog, .archive, .search) #main > article.content-post-wrap .post {
	display: flex;
	flex: 1;
	flex-direction: column;
}
:is(.blog, .archive, .search) #main > article.content-post-wrap .content-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	font-size: var(--al-fs-base);
	line-height: 1.7;
}
:is(.blog, .archive, .search) #main > article.content-post-wrap .more-link {
	margin-top: auto;
	padding-top: 20px;
}

/* Post meta wraps cleanly in narrow cards. */
#primary .content-post-wrap .post .post-meta {
	flex-wrap: wrap;
	row-gap: 4px;
}
#primary .content-post-wrap .post .post-meta li {
	white-space: nowrap;
}

/* Post images: same shape everywhere, no format badge, no dark film. */
#primary .content-post-wrap .img-box::after,
#primary .content-post-wrap .img-box .post-format-icon {
	display: none;
}
#primary .content-post-wrap .img-box .img-wrp {
	aspect-ratio: 16 / 10;
}
#primary .content-post-wrap .img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none;
	transition: transform .5s ease;
}
#primary .content-post-wrap:hover .img-box img {
	transform: scale(1.04);
}
/* The whole image links to the post. */
#primary .content-post-wrap .img-box a.article-link {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: transparent !important;
	transform: none;
}
#primary .content-post-wrap .img-box a.article-link .al-icon {
	display: none;
}

/* Featured (newest) post on the first page. */
.blog:not(.paged) #main > article.content-post-wrap:first-of-type {
	grid-column: 1 / -1;
}
@media (min-width: 900px) {
	.blog:not(.paged) #main > article.content-post-wrap.has-post-thumbnail:first-of-type {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		padding: 0;
	}
	.blog:not(.paged) #main > article.content-post-wrap.has-post-thumbnail:first-of-type .img-box {
		margin: 0;
		border-radius: var(--al-radius) 0 0 var(--al-radius);
	}
	.blog:not(.paged) #main > article.content-post-wrap.has-post-thumbnail:first-of-type .img-box .img-wrp {
		height: 100%;
		min-height: 360px;
		aspect-ratio: auto;
	}
	.blog:not(.paged) #main > article.content-post-wrap.has-post-thumbnail:first-of-type .post {
		justify-content: center;
		padding: 40px 44px;
	}
	.blog:not(.paged) #main > article.content-post-wrap:first-of-type .entry-title {
		font-size: var(--al-fs-xl);
		line-height: 1.15;
	}
}

/* ==========================================================================
   SINGLE POST: READING LAYOUT
   A narrower column and full-size text, so long guides read like a page,
   not a wall.
   ========================================================================== */
.single #main {
	max-width: 880px;
	margin: 0 auto;
}
.single #primary .content-post-wrap .entry-title {
	margin-bottom: 20px;
}
.single #primary .content-post-wrap {
	padding: 44px 56px 52px;
}
.single #primary .content-post-wrap .img-box {
	margin: -44px -56px 34px;
}
.single #primary .content-post-wrap .img-box .img-wrp {
	aspect-ratio: 16 / 9;
}
.single #primary .content-post-wrap:hover .img-box img {
	transform: none;
}
.single #primary .content-post-wrap .content-wrap {
	color: var(--al-text);
	font-size: var(--al-fs-base);
	line-height: 1.75;
}
.single #primary .content-post-wrap .content-wrap :is(p, li) {
	font-size: var(--al-fs-base);
	line-height: 1.75;
}
.single #primary .content-post-wrap .content-wrap p {
	margin: 0 0 1.1em;
}
.single #primary .content-post-wrap .content-wrap h2 {
	scroll-margin-top: 24px;
}
.single #primary .content-post-wrap .content-wrap h3 {
	margin: 1.6em 0 .5em;
}
.single #primary .content-post-wrap .content-wrap :is(ol, ul) {
	margin: 0 0 1.3em;
	padding-left: 1.5em;
}
.single #primary .content-post-wrap .content-wrap li {
	margin-bottom: .5em;
	padding-left: .2em;
}
.single #primary .content-post-wrap .content-wrap ol > li::marker {
	color: var(--al-green-deep);
	font-weight: 750;
}
.single #primary .content-post-wrap .content-wrap ul > li::marker {
	color: var(--al-green);
}
.single #primary .content-post-wrap .content-wrap .wp-block-image img {
	border-radius: var(--al-radius);
}
.single #primary .content-post-wrap .content-wrap .wp-block-image {
	margin: 28px 0;
}

/* Opening paragraph */
.content-wrap .al-lede,
.single #primary .content-post-wrap .content-wrap p.al-lede {
	color: var(--al-ink);
	font-size: var(--al-fs-md);
	line-height: 1.65;
}

/* "In this guide" jump links (inc/post-toc.php) */
.al-toc {
	margin: 34px 0 8px;
	padding: 22px 26px 16px;
	border: 1px solid var(--al-border);
	border-radius: var(--al-radius);
	background: var(--al-surface);
}
.single #primary .content-post-wrap .content-wrap .al-toc-title {
	margin: 0 0 12px;
	color: var(--al-green-deep);
	font-size: var(--al-fs-xs);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.single #primary .content-post-wrap .content-wrap .al-toc ul {
	columns: 2 260px;
	column-gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.single #primary .content-post-wrap .content-wrap .al-toc li {
	break-inside: avoid;
	margin-bottom: .5em;
	padding-left: 0;
	line-height: 1.45;
}
.single #primary .content-post-wrap .content-wrap .al-toc a {
	color: var(--al-ink);
	font-weight: 650;
	text-decoration: none;
}
.single #primary .content-post-wrap .content-wrap .al-toc a:hover {
	color: var(--al-green-deep);
	text-decoration: underline;
}

/* Section breaks between the main entries of a guide */
.single #primary .content-post-wrap .content-wrap h2.al-game-title {
	margin-top: 2.2em;
	padding-top: 1.2em;
	border-top: 1px solid var(--al-border);
}

/* Quick facts under an entry title (dice, buy-in, and so on) */
.single #primary .content-post-wrap .content-wrap .al-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 26px;
}
.single #primary .content-post-wrap .content-wrap .al-facts > p {
	margin: 0;
	padding: 8px 16px;
	border-radius: var(--al-radius);
	background: var(--al-surface-2);
	color: var(--al-ink);
	font-size: var(--al-fs-sm);
	line-height: 1.5;
}

/* Rule notes and tips */
.single #primary .content-post-wrap .content-wrap .al-callout {
	margin: 28px 0;
	padding: 20px 24px;
	border-left: 4px solid var(--al-green);
	border-radius: 0 var(--al-radius) var(--al-radius) 0;
	background: var(--al-surface-2);
}
.single #primary .content-post-wrap .content-wrap .al-callout h3 {
	margin: 0 0 .4em;
	font-size: var(--al-fs-md);
}
.single #primary .content-post-wrap .content-wrap .al-callout > :last-child {
	margin-bottom: 0;
}

/* Boxed sections (an encounter, a download) */
.single #primary .content-post-wrap .content-wrap .ak-item-card {
	margin: 36px 0;
}
.single #primary .content-post-wrap .content-wrap :is(.ak-item-card, .al-download) > :first-child {
	margin-top: 0;
}
.single #primary .content-post-wrap .content-wrap :is(.ak-item-card, .al-download) > :last-child {
	margin-bottom: 0;
}
.single #primary .content-post-wrap .content-wrap .al-download {
	margin: 40px 0 0;
	padding: 32px 34px;
	border: 1px solid var(--al-border);
	border-radius: var(--al-radius);
	background: var(--al-surface-2);
	text-align: center;
}
.single #primary .content-post-wrap .content-wrap .al-download .wp-block-buttons {
	justify-content: center;
}

/* Tables scroll sideways on narrow screens instead of squeezing. */
.single #primary .content-post-wrap .content-wrap .wp-block-table {
	margin: 20px 0 28px;
	overflow-x: auto;
}
.single #primary .content-post-wrap .content-wrap .wp-block-table :is(td, th) {
	font-size: var(--al-fs-sm);
}

@media (max-width: 750px) {
	.single #primary .content-post-wrap {
		padding: 24px 20px 32px;
	}
	.single #primary .content-post-wrap .img-box {
		margin: -24px -20px 24px;
	}
	.single #primary .content-post-wrap .content-wrap h2 {
		scroll-margin-top: 96px;
	}
	.single #primary .content-post-wrap .content-wrap .al-download {
		padding: 26px 20px;
	}
	.al-toc {
		padding: 18px 20px 12px;
	}
}