/* woocommerce.css — Direction C skin for the WooCommerce store pages.
 *
 * Scope: shop archive, single product, cart, checkout (+ account pages,
 * enqueued defensively). These pages render through WooCommerce's normal
 * templates (Blocksy's Woo integration), NOT our coded page templates —
 * Blocksy's `woocommerce.min.css` and WooCommerce's own stylesheets are
 * still loaded here, so every rule below is written to outrank them
 * (loaded after, plus targeted specificity) rather than assuming a blank
 * slate. Every selector was checked against real markup curled from the
 * LocalWP site (adamkeehn.local /shop/, /cart/, /checkout/, and a
 * product permalink) — see the section comments for what was verified.
 *
 * Scoped entirely under the body classes WooCommerce/Blocksy add to
 * store pages (`.akf-woo-archive`, `.single-product`, `.woocommerce-cart`,
 * `.woocommerce-checkout`, `.woocommerce-account`) so none of this leaks
 * onto the coded marketing pages (home/story/kit/coaching/volunteer).
 *
 * Hover transforms respect prefers-reduced-motion via the global rule in
 * base.css (`*,*::before,*::after{ transition-duration:0.001ms !important }`
 * under that media query) — base.css always loads on every page via the
 * akf-main bundle, so no separate override is needed here.
 */

/* ======================================================================
   0. Shared scope list (for reference — the selector this file repeats)
   ----------------------------------------------------------------------
   .akf-woo-archive        shop archive + product-category archives
   .single-product          single product page
   .woocommerce-cart        cart page
   .woocommerce-checkout    checkout page
   .woocommerce-account     my-account pages (enqueued but not hand-styled
                             beyond the shared button/notice/table rules)
   ====================================================================== */

/* ======================================================================
   1. Page canvas — background, base type, headings
   ====================================================================== */
.akf-woo-archive,
.single-product,
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
	background: var(--bone);
	color: var(--text-on-bone);
}

.akf-woo-archive .hero-section .page-title,
.single-product .entry-header .page-title,
.woocommerce-cart .entry-header .page-title,
.woocommerce-checkout .entry-header .page-title,
.woocommerce-account .entry-header .page-title {
	font-family: var(--font-disp);
	font-weight: 900;
	font-stretch: 68%;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	line-height: 0.9;
	color: var(--text-on-bone);
}

.akf-woo-archive .hero-section,
.single-product .hero-section,
.woocommerce-cart .hero-section,
.woocommerce-checkout .hero-section,
.woocommerce-account .hero-section {
	background: var(--bone);
}

/* Product/category/cart/checkout breadcrumbs (Blocksy's `.ct-breadcrumbs`,
   seen in the product page's entry-header). Muted on bone, gold on hover,
   matching the site's link language rather than Blocksy's default blue. */
.akf-woo-archive .ct-breadcrumbs,
.single-product .ct-breadcrumbs,
.woocommerce-cart .ct-breadcrumbs,
.woocommerce-checkout .ct-breadcrumbs {
	color: var(--muted-on-bone);
	font-family: var(--font-body);
	font-size: var(--step--1);
}
.akf-woo-archive .ct-breadcrumbs a,
.single-product .ct-breadcrumbs a,
.woocommerce-cart .ct-breadcrumbs a,
.woocommerce-checkout .ct-breadcrumbs a {
	color: var(--muted-on-bone);
	text-decoration: none;
}
.akf-woo-archive .ct-breadcrumbs a:hover,
.single-product .ct-breadcrumbs a:hover,
.woocommerce-cart .ct-breadcrumbs a:hover,
.woocommerce-checkout .ct-breadcrumbs a:hover {
	color: var(--gold-d);
}

/* ======================================================================
   2. Buttons — every Woo button matches .akf-btn (gold pill).
   Verified selectors: `.button` (loop add-to-cart/select-options, coupon
   apply, update cart, shipping "Update"), `.single_add_to_cart_button`
   (single product), `.checkout-button` (cart → checkout),
   `#place_order` (checkout submit), `.wp-element-button` (WC block
   fallback), `a.button.wc-forward`.
   ====================================================================== */
.akf-woo-archive .button,
.single-product .button,
.woocommerce-cart .button,
.woocommerce-checkout .button,
.woocommerce-account .button,
.akf-woo-archive .wp-element-button,
.single-product .wp-element-button,
.woocommerce-cart .wp-element-button,
.woocommerce-checkout .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.4rem;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: var(--step--1);
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	border: 0;
	background: var(--gold);
	color: var(--bone-ink);
	transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}
.akf-woo-archive .button:hover,
.single-product .button:hover,
.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover,
.woocommerce-account .button:hover,
.akf-woo-archive .wp-element-button:hover,
.single-product .wp-element-button:hover,
.woocommerce-cart .wp-element-button:hover,
.woocommerce-checkout .wp-element-button:hover {
	opacity: 0.92;
	transform: translateY(-1px);
	color: var(--bone-ink);
}
.akf-woo-archive .button:focus-visible,
.single-product .button:focus-visible,
.woocommerce-cart .button:focus-visible,
.woocommerce-checkout .button:focus-visible,
.woocommerce-account .button:focus-visible {
	outline: 3px solid var(--field);
	outline-offset: 3px;
}

/* Secondary/lighter actions that should not compete with the primary
   gold CTA: coupon "Apply coupon", "Update cart", shipping "Update". */
.woocommerce-cart .coupon .button,
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] {
	background: transparent;
	color: var(--text-on-bone);
	box-shadow: inset 0 0 0 2px var(--bone-d);
}
.woocommerce-cart .coupon .button:hover,
.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"]:hover {
	box-shadow: inset 0 0 0 2px var(--field);
	color: var(--field);
	opacity: 1;
}

/* Disabled/added states WooCommerce toggles via class swap on the same
   element — keep them legible instead of the browser default greyout. */
.akf-woo-archive .button.disabled,
.akf-woo-archive .button:disabled,
.single-product .button.disabled,
.single-product .button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}
.akf-woo-archive .added_to_cart,
.single-product .added_to_cart {
	display: inline-flex;
	margin-left: 0.6rem;
	font-size: var(--step--1);
	font-weight: 700;
	color: var(--field);
	text-decoration: underline;
}

/* ======================================================================
   3. Notices — .woocommerce-message / -error / -info, rendered by Woo as
   either a <div role="status"> (cart-empty, add-to-cart success, the
   "no payment methods" notice on checkout) or a <ul class="…"><li> list
   (validation errors). On-brand alert boxes instead of the default
   green/red bars — bone-d panel, field-green or gold accent bar, no red.
   ====================================================================== */
.akf-woo-archive .woocommerce-message,
.akf-woo-archive .woocommerce-error,
.akf-woo-archive .woocommerce-info,
.single-product .woocommerce-message,
.single-product .woocommerce-error,
.single-product .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.4rem;
	border-radius: 10px;
	background: var(--bone-d);
	color: var(--text-on-bone);
	font-size: var(--step--1);
	border-inline-start: 4px solid var(--field);
}
.akf-woo-archive .woocommerce-error,
.single-product .woocommerce-error,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error,
.woocommerce-account .woocommerce-error {
	border-inline-start-color: var(--gold-d);
}
.akf-woo-archive .woocommerce-message li,
.akf-woo-archive .woocommerce-error li,
.akf-woo-archive .woocommerce-info li,
.single-product .woocommerce-message li,
.single-product .woocommerce-error li,
.single-product .woocommerce-info li,
.woocommerce-cart .woocommerce-message li,
.woocommerce-cart .woocommerce-error li,
.woocommerce-cart .woocommerce-info li,
.woocommerce-checkout .woocommerce-message li,
.woocommerce-checkout .woocommerce-error li,
.woocommerce-checkout .woocommerce-info li {
	margin: 0;
}
/* The notice's own action link (e.g. "View cart") reuses .button, which
   is already styled in section 2 — just keep its order sane in the flexbox. */
.akf-woo-archive .woocommerce-message .button,
.single-product .woocommerce-message .button,
.woocommerce-cart .woocommerce-message .button,
.woocommerce-checkout .woocommerce-message .button {
	margin-inline-start: auto;
	order: 2;
}
.woocommerce-cart .return-to-shop {
	margin-top: 0;
}
/* WooCommerce core adds a blue info glyph via ::before, absolutely positioned
   so it overlaps the first word of our restyled notices (e.g. it lands on the
   "S" of "Sorry, no payment methods…" at checkout). Our notices already carry
   a Direction C accent border, so drop the glyph. */
.akf-woo-archive .woocommerce-message::before,
.akf-woo-archive .woocommerce-info::before,
.akf-woo-archive .woocommerce-error::before,
.single-product .woocommerce-message::before,
.single-product .woocommerce-info::before,
.single-product .woocommerce-error::before,
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before {
	content: none;
}

/* ======================================================================
   4. Shop archive — product grid, result count / ordering, pagination.
   Verified against /shop/: `ul.products.columns-4 li.product`, each item
   a `<figure><a class="ct-media-container"><img></a></figure>`, an
   `<h2 class="woocommerce-loop-product__title">`, a `<span class="price">`,
   `<ul class="entry-meta">`, and `<div class="ct-woo-card-actions"><a
   class="button … add_to_cart_button">`. Same markup renders on the
   single-product page's "Related products" section (`section.related`)
   and upsells (`section.upsells`), so the card styling is shared.
   ====================================================================== */
.akf-woo-archive .woo-listing-top {
	margin-bottom: 1.75rem;
	color: var(--muted-on-bone);
	font-size: var(--step--1);
}
.akf-woo-archive .woocommerce-result-count {
	color: var(--muted-on-bone);
}
.akf-woo-archive .woocommerce-ordering select.orderby,
.single-product .woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	background: #fff;
	border: 1px solid var(--bone-d);
	border-radius: 999px;
	padding: 0.55rem 2.2rem 0.55rem 1.1rem;
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--text-on-bone);
	cursor: pointer;
}
.akf-woo-archive .woocommerce-ordering select.orderby:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}
.akf-woo-archive .woocommerce-ordering .ct-sort-icon {
	color: var(--muted-on-bone);
}

.akf-woo-archive ul.products,
.single-product section.related ul.products,
.single-product section.upsells ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
}
.akf-woo-archive ul.products li.product,
.single-product section.related ul.products li.product,
.single-product section.upsells ul.products li.product {
	margin: 0;
	padding: 0;
	position: relative;
}
/* Card media — white tile, rounded, subtle border+shadow, hover scale,
   matching .akf-merch__media in merch.css. */
.akf-woo-archive ul.products li.product figure,
.single-product section.related ul.products li.product figure,
.single-product section.upsells ul.products li.product figure {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 5px;
	background: #fff;
	border: 1px solid rgba(27, 42, 33, 0.08);
	box-shadow: 0 10px 30px rgba(15, 23, 18, 0.05);
	margin: 0 0 0.9rem;
}
.akf-woo-archive ul.products li.product figure img,
.single-product section.related ul.products li.product figure img,
.single-product section.upsells ul.products li.product figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.akf-woo-archive ul.products li.product:hover figure img,
.single-product section.related ul.products li.product:hover figure img,
.single-product section.upsells ul.products li.product:hover figure img {
	transform: scale(1.04);
}
.akf-woo-archive ul.products li.product .onsale,
.single-product ul.products li.product .onsale {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 1;
	background: var(--gold);
	color: var(--bone-ink);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	margin: 0;
}
.akf-woo-archive ul.products li.product .woocommerce-loop-product__title,
.single-product ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}
.akf-woo-archive ul.products li.product .woocommerce-loop-product__title a,
.single-product ul.products li.product .woocommerce-loop-product__title a {
	color: var(--text-on-bone);
	text-decoration: none;
}
.akf-woo-archive ul.products li.product .woocommerce-loop-product__link:focus-visible,
.single-product ul.products li.product .woocommerce-loop-product__link:focus-visible,
.akf-woo-archive ul.products li.product .ct-media-container:focus-visible,
.single-product ul.products li.product .ct-media-container:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 4px;
	border-radius: 6px;
}
.akf-woo-archive ul.products li.product > .price,
.single-product ul.products li.product > .price {
	display: block;
	margin: 0.35rem 0 0;
	color: var(--gold-d);
	font-weight: 700;
	font-size: var(--step-0);
}
.akf-woo-archive ul.products li.product .price del,
.single-product ul.products li.product .price del {
	color: var(--muted-on-bone);
	font-weight: 400;
	opacity: 1;
	margin-right: 0.4rem;
	text-decoration: line-through;
}
.akf-woo-archive ul.products li.product .price ins,
.single-product ul.products li.product .price ins {
	text-decoration: none;
}
.akf-woo-archive ul.products li.product .entry-meta {
	list-style: none;
	margin: 0.3rem 0 0;
	padding: 0;
	font-size: var(--step--1);
}
.akf-woo-archive ul.products li.product .entry-meta a {
	color: var(--muted-on-bone);
	text-decoration: none;
}
.akf-woo-archive ul.products li.product .entry-meta a:hover {
	color: var(--field);
}
.akf-woo-archive ul.products li.product .ct-woo-card-actions,
.single-product ul.products li.product .ct-woo-card-actions {
	margin-top: 0.75rem;
}
.akf-woo-archive ul.products li.product .ct-woo-card-actions .button,
.single-product ul.products li.product .ct-woo-card-actions .button {
	width: 100%;
	padding: 0.65rem 1.1rem;
	font-size: 0.8rem;
}

/* "Related products" / "Upsells" section headings on the single-product
   page reuse Blocksy's `.ct-module-title`. */
.single-product section.related .ct-module-title,
.single-product section.upsells .ct-module-title {
	font-family: var(--font-disp);
	font-weight: 900;
	font-stretch: 72%;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	font-size: var(--step-2);
	color: var(--text-on-bone);
}

.akf-woo-archive nav.ct-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	justify-content: center;
}
.akf-woo-archive nav.ct-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.6rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--bone-d);
	color: var(--text-on-bone);
	font-weight: 700;
	font-size: var(--step--1);
	text-decoration: none;
}
.akf-woo-archive nav.ct-pagination a.page-numbers:hover {
	border-color: var(--field);
	color: var(--field);
}
.akf-woo-archive nav.ct-pagination .page-numbers.current {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--bone-ink);
}

/* ======================================================================
   5. Single product — gallery, title/price, variations form, quantity,
   add-to-cart, meta, tabs.
   Verified against a product permalink (variable product): the gallery
   is Blocksy's carousel (`.woocommerce-product-gallery` >
   `.ct-product-gallery-container` > `.flexy-container` > `.flexy` >
   `.flexy-view` > `.flexy-items` > `.flexy-item > figure.ct-media-container`,
   plus `.flexy-arrow-prev/next` and `.flexy-pills` thumbnails) —
   restyled by recoloring/reshaping rather than restructuring, since the
   carousel's JS positions these nodes.
   ====================================================================== */
.single-product .summary.entry-summary {
	color: var(--text-on-bone);
}
.single-product .summary .product_title.entry-title {
	font-family: var(--font-disp);
	font-weight: 900;
	font-stretch: 68%;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 0.95;
	font-size: var(--step-3);
	color: var(--text-on-bone);
	margin: 0 0 0.5rem;
}
.single-product .summary > .price {
	display: block;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: var(--step-2);
	color: var(--gold-d);
	margin: 0 0 1.1rem;
}
.single-product .summary > .price del {
	color: var(--muted-on-bone);
	font-weight: 500;
	margin-right: 0.5rem;
	opacity: 1;
}
.single-product .summary > .price ins {
	text-decoration: none;
}
.single-product .ct-product-divider {
	display: block;
	height: 1px;
	background: var(--bone-d);
	margin: 1.1rem 0;
}
.single-product .woocommerce-product-details__short-description,
.single-product .summary .woocommerce-product-details__short-description p {
	color: var(--muted-on-bone);
	font-size: var(--step-0);
	line-height: 1.6;
}

/* --- Gallery (carousel, no thumbnail strip) -------------------------- */
/* The thumbnail "pills" are removed in PHP (akf_product_gallery_carousel_only)
   so this is a plain arrow/swipe carousel.

   Size cap: Blocksy's `.product-entry-wrapper` is a flexbox with the gallery
   at 50%, but between 690–999px it forces `.entry-summary { width:100% }` so
   the summary wraps BELOW the gallery, and under 690px the gallery itself goes
   full width. In those stacked states an uncapped square (1200×1200) mockup
   becomes tall enough to push the whole summary off-screen. Capping the
   gallery's max-width caps a square image's height too, so the description
   stays reachable at every breakpoint; centered so it reads intentionally
   when stacked. */
.single-product .woocommerce-product-gallery {
	background: var(--bone);
	max-width: 25rem;
	margin-inline: auto;
}
.single-product .ct-product-gallery-container,
.single-product .flexy-view {
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(27, 42, 33, 0.08);
}
.single-product .flexy-item figure.ct-media-container {
	margin: 0;
	background: #fff;
}
.single-product .flexy-arrow-prev,
.single-product .flexy-arrow-next {
	color: var(--bone-ink);
	background: rgba(244, 242, 233, 0.88);
	border-radius: 999px;
}
.single-product .flexy-arrow-prev:hover,
.single-product .flexy-arrow-next:hover {
	background: var(--gold);
}
/* Thumbnail pills are disabled (carousel-only); the styling that skinned
   them has been removed. If pills are ever re-enabled, restyle them here. */

/* --- Variations form: table of <select> attribute pickers ----------- */
.single-product form.variations_form table.variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1rem;
}
.single-product form.variations_form table.variations tr {
	display: block;
	margin-bottom: 0.9rem;
}
.single-product form.variations_form table.variations th.label {
	display: block;
	text-align: left;
	padding: 0 0 0.4rem;
	font-weight: 700;
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-on-bone);
}
.single-product form.variations_form table.variations td.value {
	display: block;
	padding: 0;
}
.single-product form.variations_form table.variations select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	max-width: 22rem;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5C51' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 0.9rem;
	border: 1px solid var(--bone-d);
	border-radius: 8px;
	/* Blocksy forces a fixed form-field height on selects (via
	   --theme-form-field-height), which clips the option text vertically.
	   height:auto + an explicit line-height lets the padding size the box. */
	height: auto;
	line-height: 1.3;
	box-sizing: border-box;
	padding: 0.7rem 2.4rem 0.7rem 1rem;
	font-family: var(--font-body);
	font-size: var(--step-0);
	color: var(--text-on-bone);
	cursor: pointer;
	transition: border-color 0.18s ease;
}
.single-product form.variations_form table.variations select:hover {
	border-color: var(--sage);
}
.single-product form.variations_form table.variations select:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
	border-color: var(--field);
}
.single-product form.variations_form .reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--muted-on-bone);
	text-decoration: underline;
}
.single-product form.variations_form .reset_variations:hover {
	color: var(--field);
}
.single-product .woocommerce-variation.single_variation {
	font-size: var(--step--1);
	color: var(--muted-on-bone);
}
.single-product .woocommerce-variation.single_variation:not(:empty) {
	margin-bottom: 0.75rem;
}

/* --- Quantity stepper -------------------------------------------------
   Blocksy renders `.quantity` as a positioned box whose +/- buttons
   (`.ct-increase` / `.ct-decrease`) and the number input read their
   colors/radii from CSS custom properties (`--quantity-*`,
   `--theme-form-field-*`) rather than fixed values (confirmed in
   blocksy/static/bundle/woocommerce.min.css). Overriding those
   properties re-skins the stepper on-brand without touching the
   carousel-style absolute-position layout Blocksy's JS depends on. */
.single-product .quantity,
.woocommerce-cart .quantity {
	--quantity-initial-color: var(--gold);
	--quantity-hover-color: var(--gold-d);
	--quantity-arrows-initial-color: var(--bone-ink);
	--quantity-arrows-hover-color: var(--bone-ink);
	--theme-form-field-border-initial-color: var(--bone-d);
	--theme-form-field-background-initial-color: #fff;
}
.single-product .quantity input.qty,
.woocommerce-cart .quantity input.qty {
	border: 1px solid var(--bone-d) !important;
	background: #fff;
	color: var(--text-on-bone);
	font-family: var(--font-body);
	font-weight: 700;
}
.single-product .quantity input.qty:focus-visible,
.woocommerce-cart .quantity input.qty:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 1px;
}
/* Hide native number spinners; Blocksy's own +/- buttons replace them. */
.single-product .quantity input.qty::-webkit-inner-spin-button,
.single-product .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product .single_add_to_cart_button.button {
	width: auto;
	min-width: 12rem;
	font-size: var(--step-0);
	padding: 1rem 1.75rem;
}

/* --- Product meta (SKU / categories) --------------------------------- */
.single-product .product_meta {
	margin-top: 1.25rem;
	font-size: var(--step--1);
	color: var(--muted-on-bone);
}
.single-product .product_meta > span {
	display: block;
	margin-bottom: 0.3rem;
}
.single-product .product_meta a {
	color: var(--muted-on-bone);
	text-decoration: none;
	border-bottom: 1px solid var(--bone-d);
}
.single-product .product_meta a:hover {
	color: var(--field);
	border-color: var(--field);
}

/* --- Tabs (Description / Additional information) --------------------- */
.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	border-bottom: 1px solid var(--bone-d);
}
.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
}
.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.75rem 1.1rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted-on-bone);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a[aria-selected="true"] {
	color: var(--text-on-bone);
	border-bottom-color: var(--gold);
}
.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--field);
}
.single-product .woocommerce-Tabs-panel {
	color: var(--text-on-bone);
	font-size: var(--step-0);
	line-height: 1.7;
	max-width: 65ch;
}
.single-product .woocommerce-Tabs-panel p {
	margin: 0 0 1rem;
}
.single-product table.woocommerce-product-attributes {
	width: 100%;
	max-width: 40rem;
	border-collapse: collapse;
	font-size: var(--step--1);
}
.single-product table.woocommerce-product-attributes tr {
	border-bottom: 1px solid var(--bone-d);
}
.single-product table.woocommerce-product-attributes th,
.single-product table.woocommerce-product-attributes td {
	padding: 0.65rem 0.5rem;
	text-align: left;
}
.single-product table.woocommerce-product-attributes th {
	font-weight: 700;
	color: var(--text-on-bone);
	width: 40%;
}
.single-product table.woocommerce-product-attributes td {
	color: var(--muted-on-bone);
}

/* Cart header — the coded cart template renders Blocksy's page-title hero
   (blocksy_output_hero_section), the same type-2 hero checkout uses, in the
   same ct-container-narrow. No width override here on purpose: matching
   checkout means matching its narrow header container too (checkout's body is
   wider than its header, and that's the look being matched). Shared styling
   lives in section 1 (.woocommerce-cart / .woocommerce-checkout .page-title
   + .ct-breadcrumbs + .hero-section background). */

/* The cart body uses the coded template's .akf-section (padding-block:
   var(--sec), up to 7rem) — far too much space between the header and the
   cart. Trim the top so the cart sits right under the header. */
.woocommerce-cart .akf-cart__body {
	padding-top: clamp(1.25rem, 3vw, 2.25rem);
}

/* ======================================================================
   6. Cart — table, thumbnails, quantity/remove, totals box, coupon.
   Verified against /cart/ with an item added: `.ct-woocommerce-cart-form`
   > `form.woocommerce-cart-form` > `table.shop_table.cart` with
   `tr.cart_item` (`td.product-thumbnail`, `.product-name`,
   `.product-quantity`, `.product-subtotal`, `.product-remove` > `a.remove`),
   a `tr.actions` holding `.coupon` + `button[name=update_cart]`, and a
   sibling `.cart_totals` box with its own `table` (cart-subtotal /
   shipping / tax-total / order-total rows), a shipping calculator
   (`.woocommerce-shipping-calculator`), and `.wc-proceed-to-checkout`.
   ====================================================================== */
.woocommerce-cart .ct-woocommerce-cart-form {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.woocommerce-cart table.shop_table.cart {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--bone-d);
	border-radius: 10px;
	overflow: hidden;
}
.woocommerce-cart table.shop_table.cart thead th {
	background: var(--bone-d);
	color: var(--text-on-bone);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.9rem 1rem;
	text-align: left;
}
.woocommerce-cart table.shop_table.cart tbody td {
	padding: 1rem;
	border-bottom: 1px solid var(--bone-d);
	vertical-align: middle;
}
.woocommerce-cart table.shop_table.cart tr:last-child td {
	border-bottom: 0;
}
.woocommerce-cart table.shop_table.cart .product-thumbnail img {
	width: 5rem;
	height: 5rem;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid rgba(27, 42, 33, 0.08);
}
.woocommerce-cart table.shop_table.cart .product-name a {
	color: var(--text-on-bone);
	font-weight: 700;
	text-decoration: none;
}
.woocommerce-cart table.shop_table.cart .product-name a:hover {
	color: var(--field);
}
.woocommerce-cart table.shop_table.cart .product-name .price {
	color: var(--gold-d);
	font-weight: 700;
}
.woocommerce-cart table.shop_table.cart .product-subtotal .amount {
	font-weight: 800;
	color: var(--gold-d);
}
.woocommerce-cart table.shop_table.cart a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 999px;
	color: var(--bone-ink) !important;
	background: var(--bone-d);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}
.woocommerce-cart table.shop_table.cart a.remove:hover {
	background: var(--gold-d);
	color: #fff !important;
}
.woocommerce-cart .product-mobile-actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.6rem;
}

.woocommerce-cart tr.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}
.woocommerce-cart tr.actions .coupon input#coupon_code {
	border: 1px solid var(--bone-d);
	border-radius: 999px;
	padding: 0.65rem 1.1rem;
	font-family: var(--font-body);
	font-size: var(--step--1);
	background: #fff;
	color: var(--text-on-bone);
	min-width: 12rem;
}
.woocommerce-cart tr.actions .coupon input#coupon_code:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 1px;
}
.woocommerce-cart tr.actions {
	background: transparent;
}
.woocommerce-cart tr.actions td.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

/* --- Cart totals box -------------------------------------------------- */
/* Blocksy lays `.ct-woocommerce-cart-form` out as a grid (2fr form, 1fr
   totals). Let that grid place the totals as the right column — no margin-top
   (which pushed its top out of line with the cart table), no max-width /
   auto inline-margin (which shoved it to the right of its cell). align-self
   keeps it hugging the top of its row instead of stretching. */
.woocommerce-cart .cart_totals {
	background: #fff;
	border: 1px solid var(--bone-d);
	border-radius: 10px;
	padding: clamp(1.25rem, 3vw, 2rem);
	align-self: start;
}
.woocommerce-cart .cart_totals h2 {
	font-family: var(--font-disp);
	font-weight: 900;
	font-stretch: 74%;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-size: var(--step-1);
	margin: 0 0 1rem;
	color: var(--text-on-bone);
}
.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-cart .cart_totals table.shop_table tr th,
.woocommerce-cart .cart_totals table.shop_table tr td {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--bone-d);
	text-align: left;
	font-size: var(--step--1);
}
.woocommerce-cart .cart_totals table.shop_table tr:last-child th,
.woocommerce-cart .cart_totals table.shop_table tr:last-child td {
	border-bottom: 0;
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
	font-size: var(--step-0);
	font-weight: 800;
	color: var(--text-on-bone);
	padding-top: 0.9rem;
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total .amount {
	color: var(--gold-d);
}
.woocommerce-cart .woocommerce-shipping-methods {
	list-style: none;
	margin: 0.4rem 0;
	padding: 0;
	font-size: var(--step--1);
}
.woocommerce-cart .ct-shipping-heading {
	font-weight: 700;
	margin-bottom: 0.3rem;
}
.woocommerce-cart .shipping-calculator-button {
	color: var(--field);
	font-weight: 700;
	text-decoration: underline;
}
.woocommerce-cart .shipping-calculator-form .form-row label {
	display: block;
	font-size: var(--step--1);
	font-weight: 700;
	margin-bottom: 0.3rem;
	color: var(--text-on-bone);
}
.woocommerce-cart .shipping-calculator-form .form-row input.input-text,
.woocommerce-cart .shipping-calculator-form .form-row select {
	width: 100%;
	border: 1px solid var(--bone-d);
	border-radius: 8px;
	padding: 0.6rem 0.8rem;
	font-family: var(--font-body);
	font-size: var(--step--1);
	background: #fff;
	color: var(--text-on-bone);
}
.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: 1.25rem;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: flex;
	width: 100%;
	text-align: center;
}

/* ======================================================================
   7. Checkout — billing/shipping fields, order review, payment, place
   order. Verified against /checkout/ with an item in the cart: fields
   are `p.form-row` > `label` + `span.woocommerce-input-wrapper` >
   `input.input-text` / `select`; the order table is `#order_review
   .woocommerce-checkout-review-order-table`; payment methods list is
   `ul.wc_payment_methods`; submit is `button#place_order`. The state
   field is progressively enhanced into a selectWoo/select2 widget
   client-side (`select2-css`/`selectWoo.full.min.js` are enqueued), so
   `.select2-*` rules below cover that rendered state too.
   ====================================================================== */
/* The checkout renders through Blocksy (not our coded template) and its
   content area has no bottom spacing, so the last field (Order notes) butts
   right against the footer. Add breathing room to match the site rhythm. */
.woocommerce-checkout .ct-container-full {
	padding-bottom: clamp(3rem, 6vw, 5rem);
}
.woocommerce-checkout h3 {
	font-family: var(--font-disp);
	font-weight: 900;
	font-stretch: 72%;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	font-size: var(--step-1);
	color: var(--text-on-bone);
	margin: 0 0 1.1rem;
}
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: flex-start; /* don't stretch the shorter column to the taller one */
}
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
	flex: 1 1 22rem;
	min-width: 0;
}
/* Blocksy adds margin-top:40px to .col-2 for its stacked single-column
   checkout. In our two-column flex layout that column also holds the Order
   notes, so the 40px just opens a gap above it — the flex row-gap already
   separates the columns. Reset it. */
.woocommerce-checkout #customer_details .col-2 {
	margin-top: 0;
}

.woocommerce-checkout .form-row {
	margin: 0 0 1.1rem;
}
.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--step--1);
	font-weight: 700;
	color: var(--text-on-bone);
}
.woocommerce-checkout .form-row label .required {
	color: var(--gold-d);
	text-decoration: none;
}
.woocommerce-checkout .form-row label .optional {
	color: var(--muted-on-bone);
	font-weight: 400;
}
.woocommerce-checkout .form-row .woocommerce-input-wrapper {
	display: block;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
	width: 100%;
	border: 1px solid var(--bone-d);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	font-family: var(--font-body);
	font-size: var(--step-0);
	color: var(--text-on-bone);
	background: #fff;
	transition: border-color 0.18s ease;
}
.woocommerce-checkout .form-row textarea {
	min-height: 6rem;
	resize: vertical;
}
.woocommerce-checkout .form-row input.input-text:hover,
.woocommerce-checkout .form-row textarea:hover,
.woocommerce-checkout .form-row select:hover {
	border-color: var(--sage);
}
.woocommerce-checkout .form-row input.input-text:focus-visible,
.woocommerce-checkout .form-row textarea:focus-visible,
.woocommerce-checkout .form-row select:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 1px;
	border-color: var(--field);
}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
	border-color: var(--gold-d);
}
/* Placeholders — Blocksy renders these as the field's text colour at 0.6
   opacity, which reads too faint (e.g. the Order notes textarea). Use the
   muted-on-bone token at full opacity for a legible, on-brand hint. */
.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
	color: var(--muted-on-bone);
	opacity: 1;
}

/* selectWoo/select2 widget (billing/shipping state, shipping-calculator
   state on cart) — reads Blocksy's own `--theme-form-field-*` custom
   properties, so setting them here reskins the generated widget without
   needing to fight its internal specificity. Direct rules follow as a
   belt-and-suspenders fallback. */
.woocommerce-checkout,
.woocommerce-cart {
	--theme-form-field-border-initial-color: var(--bone-d);
	--theme-form-field-background-initial-color: #fff;
	--theme-form-field-border-radius: 8px;
	--theme-form-field-height: 3rem;
	--theme-text-color: var(--text-on-bone);
	--theme-form-select-background-initial-color: #fff;
	/* Checkbox/radio (e.g. "Ship to a different address?"). Blocksy draws
	   these as a 1px box in --theme-form-selection-field-initial-color, which
	   is too faint on bone to see. Give it a legible border and a field-green
	   checked state (Blocksy's white ::before check shows on top). */
	--theme-form-selection-field-initial-color: var(--muted-on-bone);
	--theme-form-selection-field-active-color: var(--field);
	--theme-form-selection-field-hover-color: var(--field);
	--form-selection-control-border-width: 2px;
}
.woocommerce-checkout .select2-container .select2-selection--single,
.woocommerce-cart .select2-container .select2-selection--single {
	border: 1px solid var(--bone-d) !important;
	border-radius: 8px !important;
	background: #fff !important;
}
.woocommerce-checkout .select2-container .select2-selection__rendered,
.woocommerce-cart .select2-container .select2-selection__rendered {
	color: var(--text-on-bone) !important;
	font-family: var(--font-body);
}
.woocommerce-checkout .select2-dropdown,
.woocommerce-cart .select2-dropdown {
	border-color: var(--bone-d) !important;
	font-family: var(--font-body);
}
.woocommerce-checkout .select2-results__option--highlighted,
.woocommerce-cart .select2-results__option--highlighted {
	background: var(--field) !important;
	color: #fff !important;
}

/* --- Order review table ------------------------------------------------ */
.woocommerce-checkout #order_review,
.woocommerce-checkout-review-order {
	background: #fff;
	border: 1px solid var(--bone-d);
	border-radius: 10px;
	padding: clamp(1.25rem, 3vw, 2rem);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--bone-d);
	text-align: left;
	font-size: var(--step--1);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	font-family: var(--font-body);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted-on-bone);
	font-size: 0.72rem;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name {
	color: var(--text-on-bone);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-quantity {
	color: var(--muted-on-bone);
	font-weight: 600;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td {
	font-size: var(--step-0);
	font-weight: 800;
	color: var(--text-on-bone);
	border-bottom: 0;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total .amount {
	color: var(--gold-d);
}

/* --- Payment methods + place order -------------------------------------- */
.woocommerce-checkout ul.wc_payment_methods {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	border-top: 1px solid var(--bone-d);
	padding-top: 1.25rem;
}
.woocommerce-checkout ul.wc_payment_methods li {
	margin-bottom: 0.75rem;
}
.woocommerce-checkout ul.wc_payment_methods label {
	font-weight: 700;
	color: var(--text-on-bone);
}
.woocommerce-checkout .payment_box {
	background: var(--bone);
	border-radius: 8px;
	padding: 1rem;
	margin-top: 0.5rem;
	font-size: var(--step--1);
	color: var(--muted-on-bone);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 1.25rem 0;
	font-size: var(--step--1);
	color: var(--muted-on-bone);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
	color: var(--field);
}
.woocommerce-checkout .form-row.place-order {
	margin-top: 1.5rem;
}
.woocommerce-checkout #place_order {
	width: 100%;
	font-size: var(--step-0);
	padding: 1rem 1.75rem;
}

@media (min-width: 55rem) {
	.woocommerce-checkout #place_order {
		width: auto;
	}
}

/* ======================================================================
   7b. My Account — login / register / lost-password / edit-account forms.
   These reuse `input.input-text` (+ `.woocommerce-Input`) inside
   `p.woocommerce-form-row`, but the checkout field rules above are scoped to
   `.woocommerce-checkout`, so the account fields fall back to Blocksy's
   default. Match them to the checkout fields for a consistent store.
   ====================================================================== */
.woocommerce-account form .input-text,
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"],
.woocommerce-account form select {
	width: 100%;
	border: 1px solid var(--bone-d);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	font-family: var(--font-body);
	font-size: var(--step-0);
	color: var(--text-on-bone);
	background: #fff;
	transition: border-color 0.18s ease;
}
.woocommerce-account form .input-text:hover,
.woocommerce-account form select:hover {
	border-color: var(--sage);
}
.woocommerce-account form .input-text:focus-visible,
.woocommerce-account form select:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 1px;
	border-color: var(--field);
}
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--step--1);
	font-weight: 700;
	color: var(--text-on-bone);
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
	background: #fff;
	border: 1px solid var(--bone-d);
	border-radius: 10px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	max-width: 32rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: inline-block;
	padding: 0.5rem 1.05rem;
	border-radius: 999px;
	border: 1px solid var(--bone-d);
	color: var(--text-on-bone);
	text-decoration: none;
	font-weight: 700;
	font-size: var(--step--1);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--field);
	border-color: var(--field);
	color: var(--bone);
}

/* ======================================================================
   8. Motion safety net — belt-and-suspenders alongside base.css's global
   prefers-reduced-motion rule (which already zeroes every transition
   duration site-wide). Explicit here too since this file can in
   principle be loaded on its own.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	.akf-woo-archive *,
	.single-product *,
	.woocommerce-cart *,
	.woocommerce-checkout * {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}