/*!
 * حرّاز بيوتي — WooCommerce skin ("Pastel Pop").
 * Bridges WooCommerce's own markup/classes to the Harraz design system.
 * Loaded (by inc/enqueue.php) after assets/css/main.css only when WooCommerce
 * is active, so it reuses all the :root design tokens defined there.
 *
 * RTL-first (the storefront is Arabic): logical properties are used throughout.
 * A few !important rules re-assert our look over WooCommerce's bundled base
 * stylesheets, whose load order relative to this file is not guaranteed.
 */

/* =========================================================================
 * 0. Utilities + header cart badge (fragment target)
 * ====================================================================== */

/* Sprite glyphs as CSS masks, for buttons whose label WooCommerce escapes
   (so no <svg><use> can be injected). Copies of #i-cart / #i-check. */
:root {
	--hb-cart-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M3 4h2l2.2 11.2A2 2 0 0 0 9.2 17h8.1a2 2 0 0 0 2-1.6L21 8H6'/%3E%3Ccircle cx='9.5' cy='20' r='1.6'/%3E%3Ccircle cx='17.5' cy='20' r='1.6'/%3E%3C/svg%3E");
	--hb-check-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");
}

/* WordPress/WooCommerce visually-hidden helper (design ships .sr-only only). */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.harraz-cart-count:empty,
.harraz-cart-count[hidden] { display: none; }

/* =========================================================================
 * 1. Shop / archive — grid, ordering bar, sidebar, empty state
 * ====================================================================== */
.hb-shop.hb-shop--has-sidebar {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	align-items: start;
}
.hb-shop__side { position: sticky; top: 110px; }
.hb-shop__side .widget + .widget { margin-top: 20px; }

.hb-shop__bar { margin-bottom: 28px; }
.page-hero__desc { color: var(--ink-soft); max-width: 42rem; margin: 14px auto 0; }
.page-hero__desc p { margin: 0; }

/* Result count + ordering */
.woocommerce-result-count {
	color: var(--ink-mute);
	font-size: .9rem;
	margin: 0;
}
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select,
.hb-shop__bar select.orderby {
	width: auto;
	border: 1.5px solid var(--line-2);
	border-radius: 16px;
	padding: .6rem 1.1rem;
	font-family: 'Readex Pro', sans-serif;
	font-size: .95rem;
	color: var(--ink);
	background: #fff;
	cursor: pointer;
}
.woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--lilac);
	box-shadow: 0 0 0 4px var(--lilac-soft);
}

/* Product loop grid — mirror .grid, override WooCommerce floats/widths */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 14px;
	float: none !important;
	clear: none !important;
	text-align: start;
}
.woocommerce ul.products li.product::before { content: none !important; }

/* Loop add-to-cart — keep our circular button over WooCommerce .button */
.woocommerce ul.products li.product a.pcard__add.button,
.woocommerce a.pcard__add.button {
	width: 46px !important;
	height: 46px !important;
	min-width: 0 !important;
	flex: 0 0 46px;
	padding: 0 !important;
	border-radius: 16px !important;
	background: linear-gradient(135deg, var(--blush), var(--lilac)) !important;
	color: #fff !important;
	box-shadow: 0 10px 20px -8px rgba(180, 60, 140, .6) !important;
	line-height: 1 !important;
	margin: 0 !important;
}
.woocommerce a.pcard__add.button:hover { transform: translateY(-3px) rotate(90deg); }
.woocommerce a.pcard__add.button::before,
.woocommerce a.pcard__add.button::after { content: none !important; }
.woocommerce ul.products li.product .added_to_cart { display: none !important; }
.woocommerce ul.products li.product a.pcard__add.loading { opacity: .6; }

/* Empty state */
.hb-empty { padding: 64px 0; }
.hb-empty__ic {
	display: inline-grid; place-items: center;
	width: 90px; height: 90px; border-radius: 50%;
	background: var(--blush-soft); color: var(--blush-deep);
	margin-bottom: 18px;
}
.hb-empty__ic svg { width: 40px; height: 40px; }
.hb-empty__msg { font-size: 1.1rem; margin-bottom: 18px; }

/* =========================================================================
 * 2. Single product
 * ====================================================================== */
.hb-product__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
/* Stickiness lives on the wrapper, not on the gallery. WooCommerce core ships
   `.woocommerce div.product div.images.woocommerce-product-gallery{position:relative}`
   — higher specificity and loaded after the theme — so `position:sticky` here never
   took, while the `top:110px` beside it still applied as a plain relative offset and
   pushed the image 110px down, over the product title on stacked (mobile) layouts. */
.hb-product__media { position: sticky; top: 110px; }
.hb-product__media .woocommerce-product-gallery {
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow);
	background: #fff;
	margin: 0;
	width: 100% !important;
	float: none !important;
}
.hb-product__media .woocommerce-product-gallery__wrapper { margin: 0; }
.hb-product__media .woocommerce-product-gallery__image img { border-radius: 0; display: block; }
.hb-product__media .flex-control-thumbs {
	display: flex; flex-wrap: wrap; gap: 10px;
	padding: 14px; margin: 0; list-style: none;
}
.hb-product__media .flex-control-thumbs li { width: 72px; }
.hb-product__media .flex-control-thumbs img { border-radius: 14px; opacity: .6; transition: opacity .2s; }
.hb-product__media .flex-control-thumbs img.flex-active,
.hb-product__media .flex-control-thumbs img:hover { opacity: 1; }
.hb-product__media .onsale {
	position: absolute; top: 16px; inset-inline-end: 16px; z-index: 3; margin: 0;
}
/* Gallery zoom/lightbox trigger */
.hb-product__media .woocommerce-product-gallery__trigger {
	position: absolute; top: 16px; inset-inline-start: 16px; z-index: 4;
	width: 42px; height: 42px; border-radius: 50%;
	background: #fff; box-shadow: var(--shadow-sm);
	display: grid; place-items: center;
}

/* Summary column */
.hb-product .summary.entry-summary { margin: 0; width: 100% !important; float: none !important; }
.hb-product .summary .product_title {
	font-family: 'Baloo Bhaijaan 2', cursive;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.22; font-weight: 800;
	margin: 0 0 14px; color: var(--ink);
}
.hb-product .summary .woocommerce-product-rating { margin-bottom: 16px; display: flex; align-items: center; gap: .6rem; }
.hb-product .summary .woocommerce-product-rating .woocommerce-review-link { color: var(--ink-mute); font-size: .9rem; }
.hb-product .summary .price {
	font-family: 'Baloo Bhaijaan 2', cursive;
	font-weight: 800; color: var(--blush-deep);
	font-size: 2.2rem; line-height: 1; margin: 0 0 18px;
	display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
}
.hb-product .summary .price del { color: var(--ink-mute); font-weight: 600; font-size: 1.1rem; opacity: 1; }
.hb-product .summary .price ins { text-decoration: none; }
.hb-product .summary .woocommerce-product-details__short-description {
	color: var(--ink-soft); line-height: 2;
	border-top: 1.5px solid var(--line); padding-top: 20px; margin: 22px 0 26px;
}

/* Loyalty points badge (single + cart) */
.hb-points-badge {
	display: inline-flex; align-items: center; gap: .45rem;
	background: var(--butter-soft); color: var(--butter-deep);
	border-radius: 12px; padding: .55rem .85rem;
	font-size: .85rem; font-weight: 600; margin: 0 0 18px;
}
.hb-points-badge svg { width: 16px; height: 16px; }

/* Trust chips */
.hb-trust-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 22px; }

/* Add-to-cart / variations */
.hb-product form.cart { margin: 0 0 24px; }
.hb-product form.cart .quantity { margin-inline-end: .8rem; }
.hb-product form.cart:not(.variations_form):not(.grouped_form),
.hb-product .woocommerce-variation-add-to-cart {
	display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
}
.hb-product .single_add_to_cart_button {
	flex: 1; min-width: 200px; min-height: 54px; gap: .6rem;
	background: linear-gradient(120deg, var(--blush-deep), #C42C8C) !important;
	color: #fff !important;
	box-shadow: 0 16px 30px -12px rgba(226, 59, 119, .7) !important;
}
/* Cart glyph — the button text is escaped by WooCommerce, so the icon is a
   masked copy of the sprite's #i-cart rendered from CSS. */
.hb-product .single_add_to_cart_button::before {
	content: ""; width: 21px; height: 21px; flex: 0 0 21px; background: currentColor;
	-webkit-mask: var(--hb-cart-glyph) center / contain no-repeat;
	mask: var(--hb-cart-glyph) center / contain no-repeat;
}
.hb-product .single_add_to_cart_button:hover { transform: translateY(-4px) scale(1.03); }
.hb-product .single_add_to_cart_button:disabled,
.hb-product .single_add_to_cart_button.disabled {
	opacity: .5; cursor: not-allowed; transform: none !important; filter: saturate(.5);
}
.hb-product .single_add_to_cart_button.loading { opacity: .75; pointer-events: none; }
.hb-product .single_add_to_cart_button.added::before {
	-webkit-mask: var(--hb-check-glyph) center / contain no-repeat;
	mask: var(--hb-check-glyph) center / contain no-repeat;
}

.hb-product table.variations { margin: 0 0 18px; border: 0; width: 100%; }
.hb-product table.variations td,
.hb-product table.variations th { border: 0; padding: 0 0 12px; background: none; vertical-align: middle; }
.hb-product table.variations th.label label {
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700;
	color: var(--ink-soft); margin: 0;
}
.hb-product table.variations select {
	width: 100%; border: 1.5px solid var(--line-2); border-radius: 16px;
	padding: .75rem 1.1rem; font-family: 'Readex Pro', sans-serif;
	font-size: 1rem; font-weight: 600; color: var(--ink); background: var(--cream-2);
	cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s;
}
.hb-product table.variations select:hover { border-color: var(--lilac); background: #fff; }
.hb-product table.variations select:focus { outline: none; border-color: var(--lilac); box-shadow: 0 0 0 4px var(--lilac-soft); }
.hb-product .reset_variations {
	color: var(--blush-deep); font-size: .85rem; font-weight: 600;
	display: inline-block; margin-top: 4px;
}
.hb-product .woocommerce-variation-price .price { font-size: 1.8rem; margin-bottom: 14px; }

/* Product meta (SKU / categories / tags) */
.hb-product .product_meta {
	border-top: 1.5px solid var(--line); padding-top: 18px; margin-top: 6px;
	font-size: .88rem; color: var(--ink-mute);
}
.hb-product .product_meta > span { display: block; margin-bottom: 6px; }
.hb-product .product_meta a { color: var(--ink-soft); }
.hb-product .product_meta a:hover { color: var(--blush-deep); }

/* Stock notices */
.hb-product .stock.in-stock { color: var(--mint-deep); font-weight: 600; }
.hb-product .stock.out-of-stock { color: var(--blush-deep); font-weight: 600; }

/* Tabs / description / reviews / related */
.hb-product__extra { margin-top: 48px; }
.woocommerce-tabs ul.tabs {
	display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 24px;
	list-style: none; border: 0;
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { content: none !important; border: 0 !important; }
.woocommerce-tabs ul.tabs li {
	background: #fff; border: 0; border-radius: 999px;
	box-shadow: var(--shadow-sm); margin: 0; padding: 0;
}
.woocommerce-tabs ul.tabs li a {
	padding: .55rem 1.2rem; font-family: 'Baloo Bhaijaan 2', cursive;
	font-weight: 700; font-size: .92rem; color: var(--ink-soft);
}
.woocommerce-tabs ul.tabs li.active { background: var(--ink); }
.woocommerce-tabs ul.tabs li.active a { color: #fff; }
.woocommerce-tabs .woocommerce-Tabs-panel {
	background: var(--paper); border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm); padding: clamp(20px, 3vw, 32px);
	color: var(--ink-soft); line-height: 2;
}
.woocommerce-tabs .woocommerce-Tabs-panel h2 { color: var(--ink); font-size: 1.5rem; margin: 0 0 16px; }

.hb-product__extra .related > h2,
.hb-product__extra .upsells > h2 { font-size: 1.6rem; margin: 0 0 24px; }
.hb-product__extra .related.products,
.hb-product__extra .upsells.products { margin-top: 48px; }

/* Reviews */
#reviews .commentlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
#reviews .commentlist li.review, #reviews .commentlist li.comment {
	background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
	padding: 24px; margin: 0;
}
#reviews .commentlist .comment-text { margin: 0; }
#reviews .comment-form-rating .stars a { color: var(--butter-deep); }
#reviews #respond {
	background: var(--paper); border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm); padding: clamp(20px, 3vw, 32px); margin-top: 26px;
}

/* =========================================================================
 * 3. Cart
 * ====================================================================== */
.hb-cart {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 26px;
	align-items: start;
}
.hb-cart__items { margin-bottom: 6px; }
.hb-cart__item {
	display: flex; gap: 16px; align-items: center; padding: 16px;
}
.hb-cart__item-media { flex: 0 0 96px; width: 96px; }
.hb-cart__item-media img {
	width: 96px; height: 96px; object-fit: cover;
	border-radius: var(--r); background: var(--blush-soft);
}
.hb-cart__item-body { flex: 1; min-width: 0; }
.hb-cart__item-name {
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700;
	font-size: 1.05rem; line-height: 1.35; display: block; color: var(--ink);
}
.hb-cart__item-name:hover { color: var(--blush-deep); }
.hb-cart__item-body .variation { margin: 6px 0 0; font-size: .8rem; color: var(--ink-mute); }
.hb-cart__item-body .variation dt, .hb-cart__item-body .variation dd { display: inline; margin: 0; }
.hb-cart__item-unit { display: block; font-size: .85rem; margin-top: 4px; }
.hb-cart__item-controls { margin-top: 12px; gap: .8rem; }
.hb-cart__item-total {
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 800; color: var(--blush-deep);
}
.hb-cart__item-qty-fixed { font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700; }
.hb-cart__item-remove .remove.icon-btn {
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--cream-2); box-shadow: none; color: var(--ink-soft);
	display: grid; place-items: center; font-size: 0;
}
.hb-cart__item-remove .remove.icon-btn:hover { color: var(--blush-deep); background: var(--blush-soft); }
.hb-cart__item-remove .remove.icon-btn svg { width: 20px; height: 20px; }

.hb-cart__actions { margin-top: 16px; gap: .8rem; }
.hb-cart__continue {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700; color: var(--lilac-deep);
}
.hb-cart__continue svg { width: 18px; height: 18px; }
.hb-cart__update { padding: .7rem 1.4rem; font-size: .95rem; }

.hb-cart__summary { position: sticky; top: 110px; }
/* WooCommerce core floats .cart_totals to width:48% — undo it so the summary card
   fills its grid column. Left unfixed it collapsed to ~201px inside a 419px column,
   which truncated the coupon field ("كو"), turned the CTA into a circle and pushed
   the totals table out past the card's left edge. High specificity beats WC core. */
.woocommerce-cart .hb-cart .cart-collaterals,
.woocommerce-cart .hb-cart .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
}
.hb-cart-totals__title { font-size: 1.3rem; margin: 0 0 18px; }
.hb-coupon { display: flex; gap: .5rem; margin-bottom: 16px; }
.hb-coupon__input { flex: 1 1 auto; min-width: 0; padding: .7rem 1rem; text-align: start; }
.hb-coupon__btn { white-space: nowrap; padding: .7rem 1.2rem; font-size: .95rem; }

.hb-totals-table { width: 100%; margin: 0 0 16px; border: 0; }
.hb-totals-table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 6px 0; border: 0; }
.hb-totals-table th, .hb-totals-table td { border: 0; padding: 0; background: none; text-align: start; font-weight: 400; }
.hb-totals-table th { color: var(--ink-mute); font-weight: 500; }
.hb-totals-table td { font-weight: 700; text-align: end; }
.hb-totals-table .cart-discount { color: var(--mint-deep); }
.hb-totals-table .cart-discount th, .hb-totals-table .cart-discount td { color: var(--mint-deep); }
.hb-totals-table .order-total {
	border-top: 1.5px solid var(--line); margin-top: 8px; padding-top: 14px;
}
.hb-totals-table .order-total th {
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700; font-size: 1.1rem; color: var(--ink);
}
.hb-totals-table .order-total td {
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 800;
	font-size: 1.5rem; color: var(--blush-deep);
}
.hb-totals-table .woocommerce-shipping-totals ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: end; }
.hb-totals-table .woocommerce-shipping-totals ul#shipping_method li { margin-bottom: 4px; }
.hb-totals-table .shipping-calculator-button { color: var(--lilac-deep); font-size: .85rem; }

.hb-cart-totals .wc-proceed-to-checkout { padding: 0; margin-top: 4px; }
.hb-cart-totals .checkout-button {
	width: 100%;
	background: linear-gradient(120deg, var(--blush-deep), #C42C8C) !important;
	color: #fff !important;
	box-shadow: 0 16px 30px -12px rgba(226, 59, 119, .7) !important;
}
.hb-cart-totals__cod {
	font-size: .8rem; margin-top: 14px;
	display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.hb-cart-totals__cod svg { width: 16px; height: 16px; }

/* Empty cart */
.hb-cart-empty { padding: 64px 24px; }
.hb-cart-empty__ic {
	display: inline-grid; place-items: center; width: 96px; height: 96px;
	border-radius: 50%; background: var(--lilac-soft); color: var(--lilac-deep); margin-bottom: 20px;
}
.hb-cart-empty__ic svg { width: 42px; height: 42px; }
.hb-cart-empty__title { font-size: 1.5rem; margin-bottom: 8px; }
.hb-cart-empty__body { margin-bottom: 24px; }

/* =========================================================================
 * 4. Checkout
 * ====================================================================== */
.hb-checkout__crumbs { margin-top: 8px; }
.hb-checkout__grid {
	display: grid; grid-template-columns: 1.7fr 1fr; gap: 26px; align-items: start;
}
.hb-checkout__main .col2-set { display: block; width: 100%; }
.hb-checkout__main .col2-set .col-1,
.hb-checkout__main .col2-set .col-2 { width: 100%; float: none; }
.hb-checkout__main .col2-set .col-2 { margin-top: 22px; }
.hb-checkout__main h3 { font-size: 1.3rem; margin: 0 0 18px; }
.hb-checkout__side { position: sticky; top: 110px; }
.hb-checkout__review-title { font-size: 1.3rem; margin: 0 0 16px; }

/* Billing/shipping field grid */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
}
.form-row.form-row-wide,
.form-row.notes,
.woocommerce-account-fields,
.woocommerce-shipping-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; }

/* Order review table */
#order_review .shop_table { width: 100%; border: 0; margin: 0 0 18px; }
#order_review .shop_table thead th { color: var(--ink-mute); font-weight: 500; font-size: .85rem; text-align: start; padding: 0 0 12px; border: 0; }
#order_review .shop_table tbody td,
#order_review .shop_table tbody th { border: 0; padding: 10px 0; border-bottom: 1px solid var(--line); background: none; }
#order_review .shop_table .cart_item .product-name { color: var(--ink); font-size: .92rem; }
#order_review .shop_table .product-total { text-align: end; color: var(--blush-deep); font-weight: 700; white-space: nowrap; }
#order_review .shop_table tfoot th { color: var(--ink-mute); font-weight: 500; text-align: start; padding: 10px 0; border: 0; }
#order_review .shop_table tfoot td { text-align: end; font-weight: 700; padding: 10px 0; border: 0; }
#order_review .shop_table tfoot .order-total th { font-family: 'Baloo Bhaijaan 2', cursive; font-size: 1.1rem; color: var(--ink); }
#order_review .shop_table tfoot .order-total td .amount {
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 800; font-size: 1.4rem; color: var(--blush-deep);
}

/* Payment box */
#payment { background: transparent; border-radius: 0; }
#payment ul.payment_methods {
	list-style: none; margin: 0 0 18px; padding: 0; border: 0;
	display: flex; flex-direction: column; gap: 12px;
}
#payment ul.payment_methods li {
	background: #fff; border: 2px solid var(--line-2); border-radius: 18px;
	padding: 1rem 1.2rem; margin: 0;
}
#payment ul.payment_methods li input[type="radio"] { accent-color: var(--mint-deep); margin-inline-end: .6rem; }
#payment ul.payment_methods li label { font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700; color: var(--ink); display: inline; }
#payment div.payment_box {
	background: var(--cream-2); border-radius: 14px; margin: 12px 0 0; padding: 1rem 1.2rem;
	color: var(--ink-soft); font-size: .9rem;
}
#payment div.payment_box::before { display: none; }
#payment .place-order { padding: 0; }
#payment #place_order,
.hb-checkout #place_order {
	width: 100%;
	background: linear-gradient(120deg, var(--blush-deep), #C42C8C) !important;
	color: #fff !important;
	box-shadow: 0 16px 30px -12px rgba(226, 59, 119, .7) !important;
}
#payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; font-size: .85rem; }

/* =========================================================================
 * 4b. Order received (thank-you) + order / customer details
 * ====================================================================== */
.hb-thanks { display: grid; gap: 22px; }

/* Success hero */
.hb-thanks__hero { text-align: center; padding: 40px 28px; }
.hb-thanks__ic {
	display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 18px;
	border-radius: 50%; background: var(--mint-soft); color: var(--mint-deep);
}
.hb-thanks__ic svg { width: 46px; height: 46px; }
.hb-thanks__ic--failed { background: var(--blush-soft); color: var(--blush-deep); }
.hb-thanks__title { font-size: 1.8rem; margin: 0 0 12px; }
.hb-thanks__hero p,
.hb-thanks .woocommerce-thankyou-order-received {
	color: var(--ink-soft); font-size: 1.02rem; line-height: 1.9; margin: 0 auto; max-width: 48ch;
}
.hb-thanks__msg { margin-bottom: 18px !important; }
.hb-thanks__actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* Overview → stat cards (WooCommerce classes kept on ul/li) */
.hb-thanks__overview {
	list-style: none; margin: 0; padding: 0; border: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
}
.hb-thanks__overview::before,
.hb-thanks__overview::after { display: none; }
.hb-thanks .hb-thanks__stat {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm); padding: 18px; margin: 0;
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: start;
}
.hb-thanks__stat-ic {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
	background: var(--lilac-soft); color: var(--lilac-deep); margin-bottom: 6px;
}
.hb-thanks__stat-ic svg { width: 20px; height: 20px; }
.hb-thanks__stat-label { color: var(--ink-mute); font-size: .82rem; }
.hb-thanks .hb-thanks__stat strong {
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 800; color: var(--ink);
	font-size: 1.05rem; word-break: break-word;
}
.hb-thanks__continue { text-align: center; margin-top: 6px; }

/* Order details + customer details tables (thank-you AND account view-order) */
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details { margin-top: 8px; }
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-customer-details h2,
.woocommerce-order .woocommerce-column__title {
	font-family: 'Baloo Bhaijaan 2', cursive; font-size: 1.2rem; margin: 0 0 14px;
}
.woocommerce-order table.shop_table {
	width: 100%; border: 0; border-collapse: separate; border-spacing: 0;
	background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.woocommerce-order table.shop_table thead th {
	color: var(--ink-mute); font-weight: 600; font-size: .82rem; text-align: start;
	padding: 16px; border: 0; background: var(--cream-2);
}
.woocommerce-order table.shop_table tbody td,
.woocommerce-order table.shop_table tbody th {
	padding: 14px 16px; border-bottom: 1px solid var(--line); background: none; text-align: start;
}
.woocommerce-order table.shop_table tfoot th {
	text-align: start; padding: 12px 16px; color: var(--ink-mute); font-weight: 500; border: 0;
}
.woocommerce-order table.shop_table tfoot td { text-align: end; padding: 12px 16px; font-weight: 700; border: 0; }
.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td {
	font-family: 'Baloo Bhaijaan 2', cursive; color: var(--ink); font-size: 1.05rem;
}
.woocommerce-order .woocommerce-customer-details address {
	font-style: normal; line-height: 1.9; background: #fff; border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm); padding: 20px; border: 0; color: var(--ink-soft);
}
.woocommerce-order .woocommerce-customer-details--phone,
.woocommerce-order .woocommerce-customer-details--email { margin: 6px 0 0; color: var(--ink-soft); }

/* =========================================================================
 * 5. My Account
 * ====================================================================== */
.hb-account {
	display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start;
}
/* WooCommerce core floats the nav (30%) + content (68%) with fixed percents; neutralize
   them so our layout controls sizing — otherwise the nav gets squeezed to a thin column
   (same core-override pattern as the cart page). */
.woocommerce-account .hb-account .woocommerce-MyAccount-navigation,
.woocommerce-account .hb-account .woocommerce-MyAccount-content {
	width: 100%; float: none; margin: 0;
}
/* Account menu = horizontal chip bar: wraps on any width, never a squeezed column. */
.hb-account__nav {
	position: static; padding: 12px 14px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.hb-account__points {
	display: inline-flex; align-items: center; gap: .45rem; flex-wrap: nowrap;
	background: var(--butter-soft); color: var(--butter-deep);
	border-radius: 999px; padding: .5rem .9rem; margin: 0; font-size: .9rem; white-space: nowrap;
}
.hb-account__points svg { width: 18px; height: 18px; }
.hb-account__points-val { font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 800; font-size: 1.05rem; }
.hb-account__nav ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto;
}
.hb-account__nav li { margin: 0; border: 0; }
.hb-account__nav li a {
	display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
	padding: .55rem .9rem; border-radius: 999px;
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700; font-size: .92rem;
	background: var(--blush-soft); color: var(--ink-soft);
	transition: background .2s, color .2s;
}
.hb-account__nav li a:hover { background: var(--blush); color: #fff; }
.hb-account__nav li.is-active a { background: var(--ink); color: #fff; }
.hb-account__nav-ic { width: 18px; height: 18px; flex: 0 0 18px; }
.hb-account__content { min-height: 240px; }

/* Dashboard = full-width overview (no sidebar, no outer card). */
.hb-account--dash { grid-template-columns: 1fr; }
.hb-account__content--full { min-height: 0; }

.hb-dash { display: grid; gap: 24px; }
.hb-dash__head { align-items: flex-start; }
.hb-dash__welcome { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.2; margin: 12px 0 0; }
.hb-dash__since { margin-top: 6px; font-size: .9rem; }
.hb-dash__logout { flex: 0 0 auto; }

/* Points · details · address grid */
.hb-dash__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: 22px; align-items: stretch;
}
.hb-dash__points-card {
	background: linear-gradient(160deg, var(--lilac-soft), var(--blush-soft));
	display: flex; flex-direction: column;
}
.hb-dash__points-eyebrow { align-self: flex-start; }
.hb-dash__points-body { margin-top: 18px; }
.hb-dash__points-line { display: flex; align-items: baseline; gap: .4rem; margin-top: 2px; }
.hb-dash__points-num { font-family: 'Lalezar', cursive; font-size: 2.6rem; line-height: 1; color: var(--blush-deep); }
.hb-dash__points-value { margin-top: 14px; }
.hb-dash__points-money { font-family: 'Baloo Bhaijaan 2', cursive; color: var(--mint-deep); }
.hb-dash__points-hint { margin-top: auto; padding-top: 16px; font-size: .82rem; }

.hb-dash__card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 16px; }
.hb-dash__card-title { font-size: 1.2rem; margin: 0; }
.hb-dash__edit {
	color: var(--blush-deep); font-size: .85rem; font-weight: 700;
	font-family: 'Baloo Bhaijaan 2', cursive; white-space: nowrap;
}
.hb-dash__edit:hover { text-decoration: underline; }

.hb-dash__label { display: block; font-size: .78rem; color: var(--ink-mute); margin-bottom: 2px; }
.hb-dash__value { font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700; }
.hb-dash__empty { font-size: .9rem; }

/* Recent orders + ledger rows (soft pills) */
.hb-dash__order,
.hb-dash__ledger {
	display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center;
	justify-content: space-between; background: var(--cream-2);
	border-radius: 16px; padding: 14px 18px;
}
.hb-dash__order { color: inherit; transition: transform .2s var(--ease), box-shadow .2s; }
.hb-dash__order:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: inherit; }
.hb-dash__order-cell .hb-dash__label { font-size: .74rem; }
.hb-dash__order-total { text-align: end; }
.hb-dash__total { color: var(--blush-deep); }
.hb-dash__status { font-size: .72rem; }
.hb-dash__pts-chip { font-size: .72rem; color: var(--mint-deep); }
.hb-dash__pts-chip svg { width: 14px; height: 14px; }
.hb-dash__shop-cta { margin-top: 16px; }

.hb-dash__ledger-info { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.hb-dash__ledger-type { font-size: .7rem; }
.hb-dash__ledger-note { font-size: .88rem; }
.hb-dash__ledger-meta { display: flex; align-items: center; gap: 1rem; }
.hb-dash__ledger-date { font-size: .74rem; }
.hb-dash__ledger-pts { font-family: 'Baloo Bhaijaan 2', cursive; white-space: nowrap; }
.hb-dash__ledger-pts.is-earn { color: var(--mint-deep); }
.hb-dash__ledger-pts.is-spend { color: var(--blush-deep); }

/* Orders / downloads / address tables */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
	width: 100%; border: 0; border-collapse: separate; border-spacing: 0;
}
.woocommerce-account table.shop_table thead th { color: var(--ink-mute); font-weight: 600; font-size: .82rem; text-align: start; padding: 0 12px 12px; border: 0; }
.woocommerce-account table.shop_table tbody td { padding: 14px 12px; border-bottom: 1px solid var(--line); background: none; }
.woocommerce-account table.shop_table tbody tr:last-child td { border-bottom: 0; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button { margin-inline-start: 4px; }

/* Addresses */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 24px;
}
.woocommerce-account .woocommerce-Address-title h2, .woocommerce-account .woocommerce-Address-title h3 { font-size: 1.15rem; }

/* =========================================================================
 * 5b. Auth — login / register / lost + reset password (logged-out account)
 * ====================================================================== */
.hb-auth { max-width: 940px; margin: 0 auto; }
.hb-auth--single { max-width: 560px; }
.hb-auth__head { margin-bottom: 28px; }
.hb-auth__title {
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 800;
	font-size: clamp(1.8rem, 4vw, 2.4rem); margin: .3rem 0 .6rem; color: var(--ink);
}
.hb-auth__sub { max-width: 46ch; margin: 0 auto; line-height: 1.8; }

.hb-auth__grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.hb-auth__grid--two { grid-template-columns: 1fr 1fr; }

.hb-auth__card { padding: 30px 28px; height: 100%; }
.hb-auth__card--register { background: var(--lilac-soft); }
.hb-auth__card-title {
	display: flex; align-items: center; gap: .6rem;
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700; font-size: 1.3rem;
	margin: 0 0 20px; color: var(--ink);
}
.hb-auth__ic { width: 24px; height: 24px; flex: 0 0 24px; color: var(--blush-deep); }
.hb-auth__card--register .hb-auth__ic { color: var(--lilac-deep); }
.hb-auth__hint { line-height: 1.8; margin: 0 0 18px; }

.hb-auth__row-submit { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.hb-auth__row-submit .button { width: 100%; }
.hb-auth .woocommerce-form-login__rememberme {
	display: flex; align-items: center; gap: .5rem; margin: 0;
	font-family: 'Readex Pro', sans-serif; font-weight: 400; font-size: .9rem; color: var(--ink-soft);
}
.hb-auth .woocommerce-form-login__rememberme input { width: auto; margin: 0; }
.hb-auth .woocommerce-LostPassword { margin: 16px 0 0; text-align: center; }
.hb-auth .woocommerce-LostPassword a { color: var(--blush-deep); text-decoration: none; font-weight: 600; font-size: .9rem; }
.hb-auth .woocommerce-LostPassword a:hover { text-decoration: underline; }
.hb-auth__back { margin: 18px 0 0; font-size: .9rem; }
.hb-auth__back a { color: var(--ink-soft); text-decoration: none; }
.hb-auth__back a:hover { color: var(--blush-deep); }

/* =========================================================================
 * 6. Global — forms, buttons, notices, pagination, star rating
 * ====================================================================== */

/* Labels */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	display: block; font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700;
	font-size: .9rem; margin-bottom: .4rem; color: var(--ink-soft);
}
.woocommerce form .form-row { margin-bottom: 16px; }
.required { color: var(--blush-deep); }

/* Inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-cart .hb-coupon__input {
	width: 100%; border: 1.5px solid var(--line-2); border-radius: 16px;
	padding: .85rem 1.1rem; font-family: 'Readex Pro', sans-serif; font-size: 1rem;
	color: var(--ink); background: #fff; line-height: 1.5;
	transition: border-color .2s, box-shadow .2s;
}

/* Quantity stepper — keep the compact pill from main.css (.qty), never the
   full-width form input above; the wrapper carries both .quantity and .qty. */
.woocommerce .quantity,
.woocommerce-page .quantity {
	display: inline-flex; align-items: center; background: #fff;
	border: 1.5px solid var(--line-2); border-radius: 999px; overflow: hidden;
	transition: border-color .2s, box-shadow .2s;
}
.woocommerce .quantity:focus-within { border-color: var(--lilac); box-shadow: 0 0 0 4px var(--lilac-soft); }
.woocommerce .quantity.hidden { display: none; }
.woocommerce .quantity input.qty,
.woocommerce-page .quantity input.qty {
	width: 46px; height: 44px; flex: 0 0 46px; padding: 0; text-align: center;
	border: 0; border-radius: 0; background: transparent; box-shadow: none;
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700; font-size: 1rem;
	color: var(--ink); -moz-appearance: textfield; appearance: textfield;
}
.woocommerce .quantity input.qty:focus { outline: none; box-shadow: none; }
.woocommerce .quantity .qty__btn {
	width: 42px; height: 44px; flex: 0 0 42px; display: grid; place-items: center;
	padding: 0; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
	transition: color .2s, background .2s;
}
.woocommerce .quantity .qty__btn:hover { color: var(--blush-deep); background: var(--blush-soft); }
.woocommerce .quantity .qty__btn svg { width: 18px; height: 18px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none; border-color: var(--lilac); box-shadow: 0 0 0 4px var(--lilac-soft);
}
.woocommerce form .form-row textarea { min-height: 110px; resize: vertical; }

/* select2 (country/state) */
.woocommerce .select2-container--default .select2-selection--single {
	border: 1.5px solid var(--line-2); border-radius: 16px; height: auto; padding: .55rem .4rem;
	background: #fff;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.6; color: var(--ink); }
.woocommerce .select2-dropdown { border: 1.5px solid var(--line-2); border-radius: 14px; }
.woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--lilac-deep); }

/* Buttons — general */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message a.button,
.woocommerce-page a.button,
.woocommerce-page button.button {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700; font-size: 1rem;
	padding: .85rem 1.7rem; border-radius: 999px; border: 0; cursor: pointer;
	background: #fff; color: var(--ink); box-shadow: var(--shadow-sm);
	transition: transform .3s var(--spring), box-shadow .3s var(--ease), background .25s;
	text-decoration: none; line-height: 1.2; min-height: 0;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover { transform: translateY(-3px) scale(1.02); color: var(--lilac-deep); }

/* Buttons — primary / alt (checkout, add-to-cart, place order) */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: linear-gradient(120deg, var(--blush-deep), #C42C8C); color: #fff;
	box-shadow: 0 16px 30px -12px rgba(226, 59, 119, .7);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { color: #fff; transform: translateY(-4px) scale(1.03); }
.woocommerce .button.disabled,
.woocommerce .button:disabled,
.woocommerce .button:disabled[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* Notices → design alerts */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-store-notice {
	border-radius: 18px; padding: 1rem 1.2rem 1rem 3rem; margin: 0 0 22px;
	font-size: .92rem; font-weight: 500; border: 0; list-style: none;
	position: relative; line-height: 1.7;
}
.woocommerce-message { background: var(--mint-soft); color: var(--mint-deep); }
.woocommerce-info { background: var(--lilac-soft); color: var(--lilac-deep); }
.woocommerce-error { background: var(--blush-soft); color: var(--blush-deep); }
.woocommerce-error li { list-style: none; margin: 0; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { position: absolute; inset-inline-start: 1.1rem; top: 1rem; }
.woocommerce-message a.button,
.woocommerce-info a.button {
	background: transparent; box-shadow: none; padding: 0;
	color: inherit; text-decoration: underline; font-size: .9rem;
	margin-inline-start: .6rem;
}

/* Pagination → design .pagination */
.woocommerce nav.woocommerce-pagination { margin-top: 44px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
	border: 0; margin: 0; padding: 0; white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px; height: 44px; padding: 0 .8rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm);
	color: var(--ink-soft); font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700; font-size: .92rem;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { color: var(--blush-deep); transform: translateY(-2px); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ink); color: #fff; }

/* Star rating (keeps WooCommerce star font, recolours it) */
.woocommerce .star-rating span,
.woocommerce p.stars a { color: var(--butter-deep); }
.woocommerce .star-rating { color: var(--butter-deep); }

/* Breadcrumb from WooCommerce (if ever shown) → muted */
.woocommerce .woocommerce-breadcrumb { color: var(--ink-mute); font-size: .85rem; margin-bottom: 20px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--ink-soft); }

/* =========================================================================
 * 6b. Order status badge · order-item cells · view-order · addresses
 * ====================================================================== */

/* Coloured status pill — shared by dashboard, orders list and view-order. */
.hb-status {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700;
	font-size: .78rem; line-height: 1; padding: .5em .9em;
	border-radius: 999px; white-space: nowrap;
	background: var(--cream-2); color: var(--ink-soft);
}
.hb-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hb-status--completed { background: var(--mint-soft); color: var(--mint-deep); }
.hb-status--processing { background: var(--lilac-soft); color: var(--lilac-deep); }
.hb-status--on-hold,
.hb-status--pending { background: var(--butter-soft); color: var(--butter-deep); }
.hb-status--cancelled,
.hb-status--failed { background: var(--blush-soft); color: var(--blush-deep); }
.hb-status--refunded { background: #efeaf3; color: var(--ink-mute); }

/* Order-item cell: rounded thumbnail + name/qty/meta (order tables + checkout). */
.hb-oi { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.hb-oi__thumb {
	flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
	overflow: hidden; background: var(--blush-soft);
}
.hb-oi__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-oi__body { min-width: 0; }
.hb-oi__body .product-quantity { color: var(--ink-mute); font-weight: 700; white-space: nowrap; }

/* View-order header card. */
.hb-order-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 20px;
}
.hb-order-head__num { font-family: 'Baloo Bhaijaan 2', cursive; font-size: 1.7rem; margin: 8px 0 4px; color: var(--ink); }
.hb-order-head__date { font-size: .9rem; margin: 0; }
.hb-order-head .hb-status { font-size: .85rem; padding: .6em 1.1em; }

/* Order-updates timeline. */
.hb-order-updates { margin-bottom: 20px; }
.hb-order-updates__title { font-family: 'Baloo Bhaijaan 2', cursive; font-size: 1.15rem; margin: 0 0 14px; }
.hb-order-updates__list { list-style: none; margin: 0; padding: 0; }
.hb-order-updates__item { position: relative; padding: 0 20px 18px; margin: 0; border-inline-start: 2px solid var(--line); }
.hb-order-updates__item:last-child { padding-bottom: 0; }
.hb-order-updates__item::before {
	content: ""; position: absolute; inset-inline-start: -7px; top: 4px;
	width: 12px; height: 12px; border-radius: 50%; background: var(--lilac-deep); border: 3px solid #fff;
}
.hb-order-updates__meta { color: var(--ink-mute); font-size: .8rem; margin: 0 0 4px; }

/* Orders list — action buttons + empty state. */
.hb-orders__action { margin: 2px 0 2px .4rem; padding: .5rem 1rem; font-size: .85rem; }
.hb-orders__pagination { display: flex; gap: .6rem; justify-content: center; margin-top: 24px; }
.hb-orders__empty { text-align: center; padding: 40px 20px; display: grid; gap: 12px; justify-items: center; }
.hb-orders__empty-ic { width: 46px; height: 46px; color: var(--lilac-deep); }
.hb-orders__empty p { color: var(--ink-mute); margin: 0; }

/* My addresses → cards. */
.woocommerce-Addresses.addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.woocommerce-Address {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm); padding: 22px;
}
.woocommerce-Address-title.title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 12px; }
.woocommerce-Address-title.title h3 { font-family: 'Baloo Bhaijaan 2', cursive; font-size: 1.1rem; margin: 0; }
.woocommerce-Address-title.title .edit { color: var(--blush-deep); font-family: 'Baloo Bhaijaan 2', cursive; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.woocommerce-Address-title.title .edit:hover { text-decoration: underline; }
.woocommerce-Address address { font-style: normal; line-height: 1.9; color: var(--ink-soft); }

/* =========================================================================
 * 7. Responsive
 * ====================================================================== */
@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); }
	#reviews .commentlist { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.hb-shop.hb-shop--has-sidebar { grid-template-columns: 1fr; }
	.hb-shop__side { position: static; }
	.hb-product__grid,
	.hb-cart,
	.hb-checkout__grid,
	.hb-auth__grid--two,
	.hb-account { grid-template-columns: 1fr; }
	/* Stays positioned so the sale badge keeps anchoring to the image, but drops the
	   sticky offset — stacked columns must not push the image over the title. */
	.hb-product__media { position: relative; top: auto; }
	/* Once the columns stack, a full-width portrait photo (600x900) is taller than the
	   viewport and buries the name. Cap the box and letterbox inside it — capping the
	   image rather than the column keeps FlexSlider's width maths intact on multi-image
	   galleries. The phone step further down tightens this. */
	.hb-product__media .woocommerce-product-gallery__image img {
		max-height: 520px;
		object-fit: contain;
	}
	.hb-cart__summary,
	.hb-checkout__side,
	.hb-account__nav { position: static; }
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.hb-cart__item { flex-wrap: wrap; }
	.hb-cart__item-media { flex-basis: 72px; width: 72px; }
	.hb-cart__item-media img { width: 72px; height: 72px; }
}
@media (max-width: 600px) {
	/* Phone: tighten further so the name and price clear the fold on first paint.
	   `margin-bottom` needs !important — core's `div.product div.images{margin-bottom:2em}`
	   outranks anything the theme can say about that element without one. */
	.hb-product__grid { gap: 18px; }
	.hb-product__media .woocommerce-product-gallery { margin-bottom: 0 !important; }
	.hb-product__media .woocommerce-product-gallery__image img { max-height: 380px; }
}