/* ==========================================================================
   HKN Energy — WooCommerce (shop, PDP, cart, checkout, account)
   ========================================================================== */

.hkn-woo { padding-block: var(--space-7) var(--space-9); background: var(--hkn-off-white); min-height: 50vh; }
.hkn-woo .woocommerce-breadcrumb {
	font-size: var(--fs-metadata);
	color: var(--hkn-gray-600);
	margin-bottom: var(--space-5);
}
.hkn-woo .woocommerce-breadcrumb a { color: var(--hkn-gray-600); }
.hkn-woo .woocommerce-breadcrumb a:hover { color: var(--hkn-text); }

/* Notices */
.hkn-woo .woocommerce-message,
.hkn-woo .woocommerce-info,
.hkn-woo .woocommerce-error,
.hkn-woo .woocommerce-noreviews {
	list-style: none;
	background: #fff;
	border: var(--border-hair);
	border-left: 3px solid var(--hkn-blue);
	border-radius: var(--radius-sm);
	padding: var(--space-4) var(--space-5);
	font-size: var(--fs-small);
	margin-bottom: var(--space-6);
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.hkn-woo .woocommerce-error { border-left-color: #d33; }
.hkn-woo .woocommerce-message .button,
.hkn-woo .woocommerce-info .button { order: 2; }

/* Shop / archive header
   ---------------------------------------------------------------------- */
.hkn-shop-header { margin-bottom: var(--space-6); }
.hkn-shop-header h1 { margin-top: var(--space-3); }
.hkn-shop-header__desc { color: var(--hkn-gray-600); max-width: 60ch; margin-top: var(--space-3); }
.hkn-shop-header__cats {
	display: flex; flex-wrap: wrap; gap: var(--space-3);
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: var(--border-hair);
}
.hkn-shop-header__cat {
	font-size: var(--fs-small); font-weight: 600;
	padding: 0.5em 1em;
	border: var(--border-hair);
	border-radius: var(--radius-pill);
	color: var(--hkn-gray-600);
	background: #fff;
}
.hkn-shop-header__cat:hover { border-color: var(--hkn-blue); color: var(--hkn-blue); }
.hkn-shop-header__cat.is-active { background: var(--hkn-navy); border-color: var(--hkn-navy); color: #fff; }

.hkn-shop-toolbar {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
	padding-bottom: var(--space-5);
	margin-bottom: var(--space-6);
	border-bottom: var(--border-hair);
	font-size: var(--fs-small);
	color: var(--hkn-gray-600);
	flex-wrap: wrap;
}
.hkn-shop-toolbar select {
	border: var(--border-hair);
	border-radius: var(--radius-sm);
	padding: 0.5em 0.8em;
	background: #fff;
	font-size: var(--fs-small);
}

/* Product grid (reuses .hkn-product-card language from the Home) */
.hkn-woo ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
	list-style: none;
	margin: 0 0 var(--space-8);
	padding: 0;
}
.hkn-woo ul.products .hkn-product-card {
	background: #fff;
	border: var(--border-hair);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.hkn-product-card__link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.hkn-product-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(155deg, #eeece5, #e2ded3);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.hkn-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.hkn-product-card__glyph { color: var(--hkn-navy); opacity: 0.16; }
.hkn-product-card__media .onsale,
.hkn-badge--outofstock {
	position: absolute; top: var(--space-3); z-index: 1;
	font-size: var(--fs-metadata); font-weight: 700;
	padding: 0.2em 0.7em; border-radius: var(--radius-pill);
	min-height: 0; min-width: 0; line-height: 1.6;
}
.hkn-product-card__media .onsale {
	left: var(--space-3);
	background: var(--hkn-green); color: var(--hkn-green-ink);
}
.hkn-badge--outofstock {
	right: var(--space-3);
	background: var(--hkn-text); color: #fff;
}
.hkn-product-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 5px; flex: 1; }
.hkn-product-card__cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hkn-blue); font-weight: 600; }
.hkn-product-card__name { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; min-height: 2.4em; }
.hkn-product-card__price { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-price); margin-top: auto; }
.hkn-product-card__price ins { text-decoration: none; }
.hkn-product-card__price del { color: var(--hkn-gray-600); font-weight: 400; margin-right: 6px; font-size: 0.85em; }
.hkn-product-card__action { padding: 0 var(--space-5) var(--space-5); }

/* Shared grid-card CTA (shop loop + Home featured) — plain link, no AJAX,
   label communicates state (default / in cart / unavailable). */
.hkn-card-cta {
	display: block; width: 100%; text-align: center;
	background: var(--hkn-navy); color: #fff;
	font-weight: 600; font-size: var(--fs-small);
	padding: 0.75em 1em; border-radius: var(--radius-md);
	transition: background-color 0.2s var(--ease);
}
.hkn-card-cta:hover { background: #000; }
.hkn-card-cta--in-cart {
	background: var(--hkn-off-white); color: var(--hkn-text);
	border: 1px solid var(--hkn-gray-300);
}
.hkn-card-cta--in-cart:hover { background: var(--hkn-gray-100); }
.hkn-card-cta--unavailable {
	background: var(--hkn-off-white); color: var(--hkn-gray-600);
	border: 1px solid var(--hkn-gray-300);
	cursor: default;
}
.hkn-card-cta--unavailable:hover { background: var(--hkn-gray-100); }

.woocommerce-pagination { margin-top: var(--space-6); }
.woocommerce-pagination ul { display: flex; gap: var(--space-2); list-style: none; padding: 0; }
.woocommerce-pagination a, .woocommerce-pagination span {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border: var(--border-hair); border-radius: var(--radius-sm);
	font-size: var(--fs-small);
}
.woocommerce-pagination .current { background: var(--hkn-navy); color: #fff; border-color: var(--hkn-navy); }

@media (max-width: 1100px) { .hkn-woo ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .hkn-woo ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hkn-woo ul.products { grid-template-columns: 1fr; } }

/* Search results (search.php) — products reuse ul.products above; pages
   get their own lighter card, distinct from the product card so the two
   result types stay visually distinguishable. */
.hkn-search-section { margin-bottom: var(--space-8); }
.hkn-search-section__title {
	font-size: 1.1rem;
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: var(--border-hair);
}
.hkn-search-pages__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
.hkn-search-page-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: var(--border-hair);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	color: inherit;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hkn-search-page-card:hover {
	border-color: var(--hkn-blue);
	box-shadow: var(--shadow-card-sm);
}
.hkn-search-page-card__title { font-size: 1rem; margin-bottom: var(--space-2); }
.hkn-search-page-card__excerpt {
	color: var(--hkn-gray-600);
	font-size: var(--fs-small);
	flex: 1;
	margin-bottom: var(--space-4);
}
.hkn-search-page-card .hkn-link-arrow { color: var(--hkn-blue); font-size: var(--fs-metadata); }

@media (max-width: 780px) { .hkn-search-pages__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hkn-search-pages__grid { grid-template-columns: 1fr; } }

/* the_posts_pagination() (search.php) — WP core's own markup, not
   WooCommerce's, so .woocommerce-pagination above doesn't reach it;
   same visual language applied to core's actual class names. */
.hkn-woo .pagination.navigation { margin-top: var(--space-7); }
.hkn-woo .pagination .nav-links { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.hkn-woo .pagination .page-numbers {
	display: flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 var(--space-2);
	border: var(--border-hair); border-radius: var(--radius-sm);
	font-size: var(--fs-small);
	gap: var(--space-1);
}
.hkn-woo .pagination .page-numbers.current { background: var(--hkn-navy); color: #fff; border-color: var(--hkn-navy); }
.hkn-woo .pagination .page-numbers.dots { border: none; }
.hkn-woo .pagination .prev, .hkn-woo .pagination .next { padding: 0 var(--space-3); }

/* ==========================================================================
   Single product (PDP)
   ========================================================================== */
.hkn-woo div.product {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-8);
	align-items: start;
	background: #fff;
	border: var(--border-hair);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
}

/* The sale badge is a plain sibling of the gallery/summary (not inside
   either), so as an unstyled block it becomes a 3rd, unplaced grid item and
   breaks the 2-column layout entirely. Pull it out of grid flow and float
   it as a badge over the gallery corner instead. */
.hkn-woo div.product > .onsale {
	position: absolute;
	top: var(--space-6);
	left: var(--space-6);
	z-index: 2;
	background: var(--hkn-green);
	color: var(--hkn-green-ink);
	font-size: var(--fs-metadata);
	font-weight: 700;
	padding: 0.3em 0.9em;
	border-radius: var(--radius-pill);
	min-height: 0;
	min-width: 0;
	line-height: 1.6;
}

.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { border-radius: var(--radius-md); overflow: hidden; background: var(--hkn-off-white); }
.woocommerce-product-gallery img { width: 100%; object-fit: cover; }
.flex-control-thumbs { display: flex; gap: var(--space-3); margin-top: var(--space-3); list-style: none; padding: 0; }
.flex-control-thumbs li { width: 72px; }
.flex-control-thumbs img { border-radius: var(--radius-sm); border: var(--border-hair); cursor: pointer; }
.flex-control-thumbs img.flex-active { border-color: var(--hkn-blue); }

.product .summary { display: flex; flex-direction: column; }
.product .summary > .hkn-eyebrow { margin-bottom: var(--space-2); }
.product_title { font-size: var(--fs-h2); margin-bottom: var(--space-2) !important; }
.product .price {
	font-family: var(--font-heading); font-weight: 700;
	font-size: 1.75rem; color: var(--hkn-text);
	margin-block: var(--space-3) !important;
}
.product .price del { font-size: 0.6em; color: var(--hkn-gray-600); font-weight: 400; }
.product .price ins { text-decoration: none; }
.product .stock { font-size: var(--fs-small); font-weight: 600; color: var(--hkn-green-ink); margin-bottom: var(--space-4); display: block; }
.product .stock.out-of-stock { color: #d33; }
.product .woocommerce-product-details__short-description { color: var(--hkn-gray-600); font-size: var(--fs-body); margin-bottom: var(--space-5); }

.hkn-pdp-trust { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: var(--border-hair); }
.hkn-pdp-trust li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-metadata); color: var(--hkn-gray-600); }
.hkn-pdp-trust .hkn-icon { color: var(--hkn-blue); }

.product form.cart {
	display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
	margin-bottom: var(--space-6);
}
.product .quantity { display: inline-flex; }
.product .quantity .qty {
	width: 64px; text-align: center;
	border: var(--border-hair); border-radius: var(--radius-sm);
	padding: 0.75em 0.5em; font-size: var(--fs-body);
}
.product form.cart .button {
	background: var(--hkn-blue); color: #fff; font-weight: 600;
	padding: 0.85em 2em; border-radius: var(--radius-md);
	font-size: var(--fs-small);
	border: 0;
	outline: none;
}
.product form.cart .button:hover { background: #1f47dd; }
.product form.cart .button:focus-visible { outline: 2px solid var(--hkn-navy); outline-offset: 2px; }
.product form.cart .button.disabled { background: var(--hkn-gray-300); cursor: not-allowed; }

.hkn-pdp-callout {
	grid-column: 1 / -1;
	margin-top: var(--space-7);
	background: var(--hkn-navy);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-7);
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
	flex-wrap: wrap;
}
.hkn-pdp-callout h3 { color: #fff; font-size: 1.2rem; margin-bottom: 4px; }
.hkn-pdp-callout p { color: rgba(255,255,255,0.72); font-size: var(--fs-small); max-width: 52ch; }

/* Tabs */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--space-6); }
.woocommerce-tabs ul.tabs { display: flex; gap: var(--space-6); list-style: none; padding: 0; border-bottom: var(--border-hair); margin-bottom: var(--space-6); }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a { font-size: var(--fs-small); font-weight: 600; color: var(--hkn-gray-600); padding-bottom: var(--space-3); display: inline-block; }
.woocommerce-tabs ul.tabs li.active a { color: var(--hkn-text); border-bottom: 2px solid var(--hkn-blue); }
.woocommerce-tabs .panel h2 { font-size: 1.2rem; margin-bottom: var(--space-4); }

.hkn-specs { border-top: var(--border-hair); }
.hkn-specs__row { display: flex; padding: var(--space-3) 0; border-bottom: var(--border-hair); font-size: var(--fs-small); }
.hkn-specs__label { width: 240px; flex-shrink: 0; color: var(--hkn-gray-600); font-weight: 600; }
.hkn-specs-empty { color: var(--hkn-gray-600); font-size: var(--fs-small); }

.related.products { grid-column: 1 / -1; margin-top: var(--space-8); padding-top: var(--space-7); border-top: var(--border-hair); }
.related.products > h2 { font-size: 1.4rem; margin-bottom: var(--space-6); }

/* Reviews tab — @font-face for the WooCommerce star glyphs is injected via
   wp_add_inline_style() in inc/woocommerce.php (needs a PHP-resolved plugin
   URL, so it can't live in this static file). */

#reviews h2 { font-size: 1.2rem; margin-bottom: var(--space-5); }
#reviews h2 .woocommerce-Reviews-title, #reviews #comments h2 { font-size: 1.2rem; }
#reviews .commentlist { list-style: none; padding: 0; margin: 0 0 var(--space-7); }
#reviews .commentlist li { border-bottom: var(--border-hair); padding: var(--space-5) 0; display: flex; gap: var(--space-4); }
#reviews .commentlist .avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
#reviews .comment-text { flex: 1; }
#reviews .comment-text p.meta { font-size: var(--fs-metadata); color: var(--hkn-gray-600); margin-bottom: 6px; }
#reviews .comment-text .description p { font-size: var(--fs-small); }
#reviews .woocommerce-noreviews {
	background: var(--hkn-off-white); border: var(--border-hair); border-left: 3px solid var(--hkn-blue);
	border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); font-size: var(--fs-small);
	color: var(--hkn-gray-600); margin-bottom: var(--space-6); list-style: none;
}

.star-rating {
	font-family: WooCommerce; font-size: 1em; height: 1em; line-height: 1;
	width: 5.4em; position: relative; overflow: hidden;
}
.star-rating::before { content: "sssss"; color: var(--hkn-gray-300); position: absolute; top: 0; left: 0; }
.star-rating span { overflow: hidden; position: absolute; top: 0; left: 0; height: 100%; }
.star-rating span::before { content: "SSSSS"; color: var(--hkn-blue); position: absolute; top: 0; left: 0; }

#respond.comment-respond { margin-top: var(--space-7); }
#respond .comment-reply-title { font-size: 1.05rem; margin-bottom: var(--space-5); display: block; }
.comment-form-rating label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--space-2); }
.comment-form-rating p.stars { display: flex; gap: 4px; margin-bottom: var(--space-5); }
.comment-form-rating p.stars a {
	position: relative; height: 22px; width: 22px; text-indent: -999em;
	display: inline-block; text-decoration: none; font-size: 22px;
	color: var(--hkn-gray-300);
}
.comment-form-rating p.stars a::before {
	display: block; position: absolute; inset: 0; font-family: WooCommerce;
	content: "\e021"; text-indent: 0; line-height: 1;
}
.comment-form-rating p.stars a:hover::before,
.comment-form-rating p.stars a:hover ~ a::before { content: "\e021"; }
.comment-form-rating p.stars:hover a::before { content: "\e020"; color: var(--hkn-blue); }
.comment-form-rating p.stars.selected a.active::before { content: "\e020"; color: var(--hkn-blue); }
.comment-form-rating p.stars.selected a.active ~ a::before { content: "\e021"; color: var(--hkn-gray-300); }

#commentform .comment-form-author,
#commentform .comment-form-email {
	float: left; width: calc(50% - 8px); margin-bottom: var(--space-4);
}
#commentform .comment-form-author { margin-right: 16px; }
#commentform .comment-form-comment { clear: both; }
#commentform .comment-form-author label,
#commentform .comment-form-email label,
#commentform .comment-form-comment label {
	display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 6px;
}
#commentform .comment-form-author input,
#commentform .comment-form-email input {
	width: 100%; border: var(--border-hair); border-radius: var(--radius-sm); padding: 0.75em 0.9em; font-size: var(--fs-small);
}
#commentform .comment-form-cookies-consent { clear: both; font-size: var(--fs-metadata); color: var(--hkn-gray-600); display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); padding-top: var(--space-2); }
#commentform .comment-notes { font-size: var(--fs-metadata); color: var(--hkn-gray-600); margin-bottom: var(--space-5); }
@media (max-width: 560px) {
	#commentform .comment-form-author, #commentform .comment-form-email { width: 100%; margin-right: 0; }
}

.comment-form-comment textarea, #reviews textarea {
	width: 100%; border: var(--border-hair); border-radius: var(--radius-sm);
	padding: 0.85em 1em; font-size: var(--fs-small); min-height: 120px;
}
#reviews .form-submit { clear: both; margin-top: var(--space-4); }
#reviews .form-submit input[type="submit"] {
	background: var(--hkn-navy); color: #fff; font-weight: 600;
	padding: 0.75em 1.6em; border-radius: var(--radius-md); font-size: var(--fs-small); border: 0;
}
#reviews .form-submit input[type="submit"]:hover { background: #000; }

@media (max-width: 900px) {
	.hkn-woo div.product { grid-template-columns: 1fr; padding: var(--space-5); }
}

/* ==========================================================================
   Cart page
   ========================================================================== */
.woocommerce-cart-form table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-6); }
.woocommerce-cart-form table.shop_table th { text-align: left; font-size: var(--fs-metadata); text-transform: uppercase; letter-spacing: 0.04em; color: var(--hkn-gray-600); padding: 0 var(--space-3) var(--space-3) 0; border-bottom: var(--border-hair); }
.woocommerce-cart-form table.shop_table td { padding: var(--space-4) var(--space-3) var(--space-4) 0; border-bottom: var(--border-hair); vertical-align: middle; font-size: var(--fs-small); }
.woocommerce-cart-form td.product-remove { width: 24px; padding-right: var(--space-2); }
.woocommerce-cart-form td.product-thumbnail { width: 72px; }
.woocommerce-cart-form .product-thumbnail img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.woocommerce-cart-form .product-name a { font-weight: 600; }
.woocommerce-cart-form dl.variation { font-size: var(--fs-metadata); color: var(--hkn-gray-600); margin-top: 4px; }
.woocommerce-cart-form .quantity .qty { width: 60px; padding: 0.6em; border: var(--border-hair); border-radius: var(--radius-sm); text-align: center; }
.woocommerce-cart-form .product-remove a { color: var(--hkn-gray-600); font-size: 1.1rem; line-height: 1; }
.woocommerce-cart-form .actions { padding-top: var(--space-5) !important; border-bottom: 0 !important; }
.woocommerce-cart-form .coupon { display: flex; gap: var(--space-3); align-items: center; }
.woocommerce-cart-form #coupon_code { border: var(--border-hair); border-radius: var(--radius-sm); padding: 0.7em 0.9em; }
.woocommerce-cart-form .button { background: var(--hkn-navy); color: #fff; padding: 0.7em 1.4em; border-radius: var(--radius-md); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.woocommerce-cart-form .actions > .button[name="update_cart"] { background: transparent; color: var(--hkn-text); border: var(--border-hair); margin-top: var(--space-3); }

.hkn-cart-options {
	background: #fff; border: var(--border-hair); border-radius: var(--radius-md);
	padding: var(--space-5); margin-bottom: var(--space-6);
	display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
.hkn-cart-options__group h4 { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; color: var(--hkn-gray-600); margin-bottom: var(--space-3); }
.hkn-radio { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); margin-bottom: var(--space-2); cursor: pointer; }
.hkn-cart-options__note { grid-column: 1 / -1; font-size: var(--fs-metadata); color: var(--hkn-gray-600); margin: 0; }

.cart_totals { background: #fff; border: var(--border-hair); border-radius: var(--radius-md); padding: var(--space-6); }
.cart_totals h2 { font-size: 1.2rem; margin-bottom: var(--space-4); }
.cart_totals table { width: 100%; }
.cart_totals table th { text-align: left; font-weight: 500; color: var(--hkn-gray-600); font-size: var(--fs-small); padding: var(--space-3) 0; border-bottom: var(--border-hair); }
.cart_totals table td { text-align: right; font-size: var(--fs-small); padding: var(--space-3) 0; border-bottom: var(--border-hair); }
.cart_totals .order-total td, .cart_totals .order-total th { font-size: 1.1rem; font-weight: 700; border-bottom: 0; }
.cart_totals .wc-proceed-to-checkout .button { display: block; width: 100%; text-align: center; background: var(--hkn-blue); color: #fff; padding: 0.9em; border-radius: var(--radius-md); font-weight: 700; margin-top: var(--space-4); }

@media (min-width: 901px) {
	.woocommerce-cart .hkn-page__content > .woocommerce { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-7); align-items: start; }
	.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
	.woocommerce-cart .cart-collaterals { grid-column: 2; }
}

/* ==========================================================================
   Checkout
   ========================================================================== */
.hkn-checkout-step { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-7) 0 var(--space-5); }
.hkn-checkout-step:first-child { margin-top: 0; }
.hkn-checkout-step__num {
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--hkn-navy); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: var(--fs-metadata); font-weight: 700; flex-shrink: 0;
}
.hkn-checkout-step h2 { font-size: 1.15rem; margin: 0; }

.woocommerce-checkout .form-row label { font-size: var(--fs-small); font-weight: 600; margin-bottom: 6px; display: block; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	width: 100%; border: var(--border-hair); border-radius: var(--radius-sm);
	padding: 0.75em 0.9em; font-size: var(--fs-small); background: #fff;
}
.woocommerce-checkout .select2-container .select2-selection--single { height: auto; border: var(--border-hair); border-radius: var(--radius-sm); padding: 0.4em 0.2em; }

#order_review { background: #fff; border: var(--border-hair); border-radius: var(--radius-md); padding: var(--space-6); }
#order_review table.shop_table { width: 100%; }
#order_review table.shop_table th, #order_review table.shop_table td { padding: var(--space-3) 0; border-bottom: var(--border-hair); font-size: var(--fs-small); }
.woocommerce-checkout-payment { background: var(--hkn-off-white); border-radius: var(--radius-md); padding: var(--space-5); margin-top: var(--space-4); }
.woocommerce-checkout-payment ul.payment_methods { list-style: none; padding: 0; }
.woocommerce-checkout-payment ul.payment_methods li { padding: var(--space-3) 0; border-bottom: var(--border-hair); font-size: var(--fs-small); }
#place_order {
	width: 100%; background: var(--hkn-blue); color: #fff;
	padding: 1em; border-radius: var(--radius-md); font-weight: 700; font-size: var(--fs-body);
	margin-top: var(--space-4);
}

@media (min-width: 901px) {
	.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: start; }
	/* Explicit placement: WooCommerce's own checkout markup mixes our step
	   markers in with #customer_details as flat siblings of form.checkout,
	   so default grid auto-placement would checkerboard them across both
	   columns. Pin the customer-facing steps to column 1 (stacked, in row
	   order) and let the order summary occupy column 2, spanning all of
	   those rows, so it reads as a single sticky-feeling summary. */
	.woocommerce-checkout form.checkout > .hkn-checkout-step,
	.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; }
	.woocommerce-checkout form.checkout > .hkn-checkout-step--01 { grid-row: 1; }
	.woocommerce-checkout form.checkout > #customer_details { grid-row: 2; }
	.woocommerce-checkout form.checkout > .hkn-checkout-step--02 { grid-row: 3; }
	.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; align-self: end; }
	.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2 / span 3; position: sticky; top: var(--space-6); }
}

/* ==========================================================================
   Login / Register (woocommerce-form-login / -register)

   WooCommerce's own form-login.php renders either:
   - a single standalone <form class="woocommerce-form-login"> when
     registration is disabled, or
   - #customer_login.col2-set > .u-column1/.u-column2, each holding one
     form, when registration is enabled (see functions.php's
     woocommerce_enable_myaccount_registration).
   Both shapes need to end up centered on the page — the wrapper centers
   the PAIR in the two-column case, each form centers ITSELF in the
   standalone case.
   ========================================================================== */
.woocommerce-form-login, .woocommerce-form-register {
	max-width: 480px;
	width: 100%;
	margin: var(--space-3) auto 0;
	background: #fff;
	border: var(--border-hair);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
}
.woocommerce-form-login h2, .woocommerce-form-register h2 {
	font-size: 1.3rem;
	margin-bottom: var(--space-5);
}
#customer_login.col2-set {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--space-6);
	max-width: 900px;
	margin: var(--space-7) auto 0;
}
#customer_login .u-column1, #customer_login .u-column2 { flex: 1 1 380px; max-width: 420px; }
#customer_login .woocommerce-form-login, #customer_login .woocommerce-form-register { margin: 0; max-width: none; height: 100%; }

.woocommerce-form-login .form-row, .woocommerce-form-register .form-row { margin: 0 0 var(--space-5); }
.woocommerce-form-login .form-row label, .woocommerce-form-register .form-row label { font-size: var(--fs-small); font-weight: 600; margin-bottom: 6px; display: block; }
.woocommerce-form-login .form-row input, .woocommerce-form-register .form-row input {
	width: 100%; border: var(--border-hair); border-radius: var(--radius-sm); padding: 0.75em 0.9em; font-size: var(--fs-small); font-family: var(--font-body);
}
.woocommerce-form-login .form-row input:focus, .woocommerce-form-register .form-row input:focus {
	outline: 2px solid var(--hkn-blue); outline-offset: 1px; border-color: transparent;
}
/* Specificity note: ".form-row label" above sets display:block on every
   label in the form, including this one — ".woocommerce-form-login__rememberme"
   alone (one class) loses that fight on specificity, which is exactly why
   the checkbox and "Recuérdame" text were stacking on separate lines
   instead of sitting on one line. Repeating the full ancestor chain here
   is what actually wins. */
.woocommerce-form-login .form-row label.woocommerce-form-login__rememberme {
	display: flex; align-items: center; gap: var(--space-2);
	font-weight: 400; cursor: pointer; margin-bottom: 0; width: auto;
}
.woocommerce-form-login__rememberme input[type="checkbox"] { margin: 0; width: 16px; height: 16px; flex-shrink: 0; }
.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit,
.woocommerce-form-login button[type="submit"] {
	background: var(--hkn-navy); color: #fff; font-weight: 600;
	padding: 0.85em 1.6em; border-radius: var(--radius-md); font-size: var(--fs-small);
	border: none; cursor: pointer; transition: background-color 0.2s var(--ease);
}
.woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce-form-register .woocommerce-form-register__submit:hover { background: #000; }
.woocommerce-form-login .lost_password { font-size: var(--fs-small); margin-top: var(--space-5); margin-bottom: 0; }
.woocommerce-form-login .lost_password a { color: var(--hkn-blue); }
.woocommerce-form-register p:not(.form-row) { font-size: var(--fs-small); color: var(--hkn-gray-600); margin-bottom: var(--space-4); }
p.woocommerce-form-row--first, p.woocommerce-form-row--last { display: inline-block; width: 48%; }

/* "Crear cuenta" / "Iniciar sesión" switch link, shared by the login
   form (inc/registration.php's hkn_render_create_account_link(), hooked
   to woocommerce_login_form_end) and page-crear-cuenta.php. */
.hkn-account-form__switch { font-size: var(--fs-small); color: var(--hkn-gray-600); margin-top: var(--space-5); margin-bottom: 0; text-align: center; }
.hkn-account-form__switch a { color: var(--hkn-blue); font-weight: 600; }
.woocommerce-form-login .hkn-account-form__switch { border-top: var(--border-hair); padding-top: var(--space-5); }

/* WooCommerce's own frontend.js (enqueued site-wide) wraps every
   password field in <span class="password-input"> and appends a real
   <button class="show-password-input"> beside it, toggling a
   "display-password" class + the input's type on click. This is
   genuine, JS-injected page markup — not browser-native UI — and ships
   with zero default styling, which is why it showed up as a bare gray
   button. Styled here as a proper eye icon instead of hidden, since it
   is a real, useful accessibility feature. */
.password-input {
	position: relative;
	display: block;
}
.password-input input[type="password"],
.password-input input[type="text"] {
	padding-right: 2.5em;
}
.show-password-input {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s var(--ease);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236c6a63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.show-password-input:hover,
.show-password-input:focus-visible {
	opacity: 1;
}
.show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236c6a63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a18.5 18.5 0 0 1 4.22-5.06M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 7 11 7a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

@media (max-width: 480px) {
	.woocommerce-form-login, .woocommerce-form-register { padding: var(--space-5); }
}
.u-columns.woocommerce-Addresses { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.u-columns.woocommerce-Addresses .u-column1, .u-columns.woocommerce-Addresses .u-column2 { flex: 1 1 300px; }

/* ==========================================================================
   Crear cuenta (page-crear-cuenta.php) — its own page, own form, reusing
   the exact same visual recipe as .woocommerce-form-login/-register above.
   ========================================================================== */
.hkn-account-form {
	max-width: 480px;
	margin: var(--space-7) auto 0;
	background: #fff;
	border: var(--border-hair);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
}
.hkn-account-form .hkn-form-row-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}
.hkn-account-form .hkn-form-field input {
	width: 100%;
}
.hkn-account-form__privacy {
	font-size: var(--fs-metadata);
	color: var(--hkn-gray-600);
	margin: 0 0 var(--space-5);
}
.hkn-account-form .hkn-btn { width: 100%; border: none; }

@media (max-width: 480px) {
	.hkn-account-form { padding: var(--space-5); }
	.hkn-account-form .hkn-form-row-group { grid-template-columns: 1fr; }
}

/* ==========================================================================
   My Account
   ========================================================================== */
.woocommerce-account .hkn-woo { background: #fff; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-MyAccount-navigation li a {
	display: block; padding: 0.75em var(--space-4);
	border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: 600;
	color: var(--hkn-gray-600);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover { background: var(--hkn-off-white); color: var(--hkn-text); }

@media (min-width: 901px) {
	/* :has(.woocommerce-MyAccount-navigation) scopes this to the logged-in
	   dashboard layout (nav + content). When logged out, .woocommerce wraps
	   only the login form — without this guard the lone form was being
	   stretched into the 240px nav column instead of centering at full width. */
	.woocommerce-account .hkn-page__content > .woocommerce:has(.woocommerce-MyAccount-navigation) {
		display: grid; grid-template-columns: 240px 1fr; gap: var(--space-8);
	}
}

.woocommerce-MyAccount-content table.shop_table { width: 100%; border-collapse: collapse; }
.woocommerce-MyAccount-content table.shop_table th { text-align: left; font-size: var(--fs-metadata); text-transform: uppercase; color: var(--hkn-gray-600); padding-bottom: var(--space-3); border-bottom: var(--border-hair); }
.woocommerce-MyAccount-content table.shop_table td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: var(--border-hair); font-size: var(--fs-small); }
.woocommerce-MyAccount-content .woocommerce-Button { background: var(--hkn-navy); color: #fff; padding: 0.6em 1.2em; border-radius: var(--radius-sm); font-size: var(--fs-metadata); font-weight: 600; }
.woocommerce-MyAccount-content form .form-row input, .woocommerce-MyAccount-content form .form-row select {
	width: 100%; border: var(--border-hair); border-radius: var(--radius-sm); padding: 0.7em 0.9em; font-size: var(--fs-small);
}
.woocommerce-MyAccount-content form .form-row label { font-size: var(--fs-small); font-weight: 600; margin-bottom: 6px; display: block; }

.hkn-account-empty {
	text-align: center; padding: var(--space-8) var(--space-5);
	border: 1px dashed var(--hkn-gray-300); border-radius: var(--radius-md);
	color: var(--hkn-gray-600);
}
.hkn-account-empty .hkn-icon { margin: 0 auto var(--space-4); opacity: 0.5; }
.hkn-account-empty h3 { color: var(--hkn-text); font-size: 1.1rem; margin-bottom: var(--space-2); }
.hkn-account-empty p { font-size: var(--fs-small); max-width: 42ch; margin-inline: auto; margin-bottom: var(--space-4); }

@media (max-width: 900px) {
	.woocommerce-account .hkn-container > .woocommerce { display: block; }
	.woocommerce-MyAccount-navigation { margin-bottom: var(--space-6); }
	.woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
}

/* ==========================================================================
   B2B pricing (Sprint 6A) — comparison badge (product card + PDP) and the
   PDP volume table. Both render only for an authorized Partner with an
   eligible rule (see hkn_b2b_price_badge()/hkn_b2b_volume_table() in
   inc/woocommerce.php) — deliberately plain/commercial, not styled like a
   consumer sale flash.
   ========================================================================== */
.hkn-b2b-badge {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 4px;
}
.hkn-b2b-badge__list {
	font-size: var(--fs-metadata);
	color: var(--hkn-gray-600);
	text-decoration: line-through;
}
.hkn-b2b-badge__partner {
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--hkn-navy);
}
.hkn-product-card .hkn-b2b-badge { margin-bottom: 2px; }

.hkn-b2b-volume {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: var(--border-hair);
}
.hkn-b2b-volume h4 { font-size: 0.95rem; margin-bottom: var(--space-3); }
.hkn-b2b-volume__table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.hkn-b2b-volume__table th {
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--fs-metadata);
	color: var(--hkn-gray-600);
	padding-bottom: var(--space-2);
	border-bottom: var(--border-hair);
}
.hkn-b2b-volume__table td { padding: var(--space-2) 0; border-bottom: var(--border-hair); }
.hkn-b2b-volume__table tr:last-child td { border-bottom: none; }

/* Direct-purchase installation explanation (Sprint 6B.5): native disclosure
   under the cart's installation choice. */
.hkn-install-explain { margin-top: var(--space-3); font-size: var(--fs-small); }
.hkn-install-explain summary {
	cursor: pointer; font-weight: 600; color: var(--hkn-blue);
	min-height: 44px; display: flex; align-items: center;
}
.hkn-install-explain summary:focus-visible { outline: 2px solid var(--hkn-blue); outline-offset: 2px; }
.hkn-install-explain ol { margin: var(--space-2) 0 0; padding-left: 1.3em; color: var(--hkn-gray-600); display: grid; gap: var(--space-1); }

/* Cart table is wider than a phone viewport (WooCommerce's own responsive
   table CSS is disabled in this theme). Let the cart form scroll sideways
   inside itself so the page body never does. */
@media (max-width: 640px) {
	.woocommerce-cart-form { overflow-x: auto; max-width: 100%; }
}