/* WooCommerce storefront styling — archive, single product, cart, checkout,
 * account, thank-you. Targets our wrapper classes + WooCommerce defaults.
 * Surface-aware where it sits inside .hb-section--*. */

/* ===================== Archive header ===================== */
.hb-archive-head { padding-block: var(--sp-7) var(--sp-6); }
.hb-breadcrumb { font-size: var(--fs-small); color: var(--surface-text-muted); margin-block-end: var(--sp-3); }
.hb-breadcrumb a { color: var(--surface-accent); }
.hb-breadcrumb__sep { margin-inline: var(--sp-2); opacity: .5; }
.hb-archive-head__desc { color: var(--surface-text-muted); max-width: 70ch; margin-block-start: var(--sp-3); }
.hb-archive-head__guide { margin-block-start: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--surface-bg-alt); border-inline-start: 3px solid var(--surface-accent-2); border-radius: var(--radius-sm); font-size: var(--fs-small); }

/* chips (subcategories) */
.hb-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin-block-start: var(--sp-4); }
.hb-chip { display: inline-block; padding: 6px 16px; border-radius: var(--radius-pill); background: var(--surface-bg-alt); border: 1px solid var(--surface-border); color: var(--surface-text); font-size: var(--fs-small); transition: background var(--dur-fast) var(--ease-out); }
.hb-chip:hover { background: var(--surface-accent-2); color: var(--hb-charcoal); }

/* ===================== Archive toolbar + grid ===================== */
.hb-shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-block-end: var(--sp-6); padding-block-end: var(--sp-4); border-bottom: 1px solid var(--surface-border); }
.woocommerce-result-count { color: var(--surface-text-muted); font-size: var(--fs-small); margin: 0; }
.woocommerce-ordering select { padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--surface-border); background: var(--surface-bg-alt); color: var(--surface-text); font-family: inherit; }

.woocommerce ul.products,
ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
    margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1024px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }
.woocommerce ul.products li.product,
ul.products li.product { list-style: none; margin: 0; width: auto; float: none; }

.hb-pagination, .woocommerce-pagination { margin-block-start: var(--sp-7); text-align: center; }
.woocommerce-pagination ul, .hb-pagination .page-numbers { display: inline-flex; gap: var(--sp-2); list-style: none; padding: 0; }
.page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding-inline: var(--sp-2); border-radius: var(--radius-pill); border: 1px solid var(--surface-border); color: var(--surface-text); }
.page-numbers.current { background: var(--hb-gold); color: var(--hb-charcoal); border-color: var(--hb-gold); }
.page-numbers:hover:not(.current) { border-color: var(--surface-accent-2); }

/* after-loop CTA band */
.hb-archive-cta { margin-block-start: var(--sp-8); padding-block: var(--sp-7); text-align: center; }
.hb-archive-cta__text { color: var(--surface-text); margin-block-end: var(--sp-4); font-size: var(--fs-h4); }

/* ===================== Single product ===================== */
.hb-single__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); padding-block: var(--sp-7); align-items: start; }
@media (max-width: 880px) { .hb-single__top { grid-template-columns: 1fr; gap: var(--sp-6); } }
.hb-single__gallery { position: relative; }
.hb-single__gallery .woocommerce-product-gallery { border-radius: var(--radius-lg); overflow: hidden; }
.hb-single__gallery img { border-radius: var(--radius); }
.hb-onsale, span.onsale { position: absolute; z-index: 2; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); background: var(--hb-gold); color: var(--hb-charcoal); padding: 4px 14px; border-radius: var(--radius-pill); font-weight: var(--fw-bold); font-size: var(--fs-eyebrow); }

.hb-single__summary .product_title { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-heading); margin-block-end: var(--sp-3); }
.hb-single__summary .price { font-family: var(--font-num); font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--surface-text); margin-block-end: var(--sp-4); }
.hb-single__summary .price del { color: var(--surface-text-muted); font-weight: var(--fw-body); font-size: .7em; margin-inline-end: var(--sp-2); }
.hb-single__summary .price ins { text-decoration: none; color: var(--surface-accent); }
.hb-single__summary .woocommerce-product-details__short-description { color: var(--surface-text-muted); line-height: var(--lh-body); margin-block-end: var(--sp-5); }

.hb-single__summary .quantity input { width: 72px; padding: 12px; text-align: center; border: 1px solid var(--surface-border); border-radius: var(--radius-pill); background: var(--surface-bg-alt); color: var(--surface-text); font-family: var(--font-num); }
.hb-single__summary form.cart { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-block: var(--sp-4); }
.hb-single__summary .single_add_to_cart_button {
    flex: 1; min-width: 200px;
    padding: 16px 28px; border: none; cursor: pointer;
    background: var(--hb-gold); color: var(--hb-charcoal);
    font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-h4);
    border-radius: var(--radius-pill);
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hb-single__summary .single_add_to_cart_button:hover { background: var(--hb-gold-light); transform: translateY(-2px); }
/* variations table */
.hb-single__summary table.variations { width: 100%; margin-block: var(--sp-4); border-collapse: collapse; }
.hb-single__summary table.variations td { padding-block: var(--sp-2); }
.hb-single__summary table.variations select { width: 100%; padding: 12px 14px; border: 1px solid var(--surface-border); border-radius: var(--radius-pill); background: var(--surface-bg-alt); color: var(--surface-text); font-family: inherit; }
.hb-single__summary .reset_variations { font-size: var(--fs-small); color: var(--surface-accent); }

.hb-single-trust { list-style: none; margin-block: var(--sp-5); padding: var(--sp-4); background: var(--surface-bg-alt); border: 1px solid var(--surface-border); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--sp-2); }
.hb-single-trust li { position: relative; padding-inline-start: var(--sp-5); color: var(--surface-text); font-size: var(--fs-small); }
.hb-single-trust li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--surface-accent); font-weight: var(--fw-bold); }
.hb-single__summary .product_meta { font-size: var(--fs-small); color: var(--surface-text-muted); margin-block-start: var(--sp-4); }
.hb-single__summary .product_meta a { color: var(--surface-accent); }

/* details: tabs → accordion-ish cards + related */
.hb-single__details { padding-block: var(--sp-7); }
.woocommerce-tabs { margin-block-end: var(--sp-8); }
.woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin-block-end: var(--sp-5); border-bottom: 1px solid var(--surface-border); }
.woocommerce-tabs ul.tabs li { padding: 10px 20px; border-radius: var(--radius-pill) var(--radius-pill) 0 0; }
.woocommerce-tabs ul.tabs li.active { background: var(--surface-bg-alt); border: 1px solid var(--surface-border); border-bottom-color: transparent; }
.woocommerce-tabs ul.tabs li a { color: var(--surface-text); font-weight: var(--fw-medium); }
.woocommerce-tabs .panel { color: var(--surface-text); line-height: var(--lh-body); }
.hb-single__details .related > h2, .hb-single__details .upsells > h2 { font-family: var(--font-display); font-size: var(--fs-h2); margin-block-end: var(--sp-5); }

/* ===================== Free-delivery bar ===================== */
.hb-freebar { margin-block-end: var(--sp-5); padding: var(--sp-4); background: var(--surface-bg-alt); border: 1px solid var(--surface-border); border-radius: var(--radius); }
.hb-freebar__msg { margin-block-end: var(--sp-2); font-weight: var(--fw-medium); color: var(--surface-text); }
.hb-freebar__track { height: 8px; background: var(--surface-border); border-radius: var(--radius-pill); overflow: hidden; }
.hb-freebar__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--hb-gold-deep), var(--hb-gold)); transition: width var(--dur-slow) var(--ease-out); }

/* ===================== Cart + checkout ===================== */
.woocommerce-cart .hb-main--shop,
.woocommerce-checkout .hb-main--shop,
.woocommerce-account .hb-main--shop { padding-block: var(--sp-7); }
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--surface-border); border-radius: var(--radius); overflow: hidden; }
.woocommerce table.shop_table th { text-align: start; padding: var(--sp-3); background: var(--surface-bg-alt); color: var(--surface-text); }
.woocommerce table.shop_table td { padding: var(--sp-3); border-top: 1px solid var(--surface-border); color: var(--surface-text); }
.woocommerce .cart-collaterals, .woocommerce-cart .cart-collaterals { margin-block-start: var(--sp-6); }
.woocommerce .cart_totals h2 { font-family: var(--font-display); font-size: var(--fs-h3); margin-block-end: var(--sp-3); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
    background: var(--hb-gold); color: var(--hb-charcoal); border: none; border-radius: var(--radius-pill);
    padding: 13px 26px; font-family: var(--font-body); font-weight: var(--fw-bold); cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--hb-gold-light); }
.woocommerce .button.alt, .wc-proceed-to-checkout .checkout-button { width: 100%; text-align: center; font-size: var(--fs-h4); padding: 16px; }

/* checkout focus mode — quiet the header chrome */
.hb-focus .hb-header__nav,
.hb-focus .hb-header__mega,
.hb-focus [data-hb-burger],
.hb-focus .hb-header__actions .hb-header__account { display: none; }
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 880px) { .woocommerce-checkout form.checkout { grid-template-columns: 1fr; } }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
    width: 100%; padding: 12px 14px; border: 1px solid var(--surface-border); border-radius: var(--radius-sm); background: var(--surface-bg-alt); color: var(--surface-text); font-family: inherit;
}
.woocommerce #order_review, .woocommerce-checkout #order_review_heading { background: var(--surface-bg-alt); border: 1px solid var(--surface-border); border-radius: var(--radius); padding: var(--sp-5); }

/* ===================== My account ===================== */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-7); }
@media (max-width: 768px) { .woocommerce-account .woocommerce { grid-template-columns: 1fr; } }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; border-radius: var(--radius-sm); color: var(--surface-text); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--hb-gold); color: var(--hb-charcoal); font-weight: var(--fw-bold); }
.woocommerce-MyAccount-navigation li a:hover { background: var(--surface-bg-alt); }

/* ===================== Thank-you ===================== */
.hb-thankyou { padding-block: var(--sp-8); text-align: center; }
.hb-thankyou__check { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--hb-gold); color: var(--hb-charcoal); font-size: var(--fs-h2); margin-block-end: var(--sp-4); }
.hb-thankyou__lead { color: var(--surface-text-muted); max-width: 56ch; margin-inline: auto; }
.hb-thankyou__meta { list-style: none; padding: var(--sp-5); margin-block: var(--sp-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-4); background: var(--surface-bg-alt); border: 1px solid var(--surface-border); border-radius: var(--radius); text-align: center; }
.hb-thankyou__meta li { display: flex; flex-direction: column; gap: 2px; }
.hb-thankyou__meta span { font-size: var(--fs-small); color: var(--surface-text-muted); }
.hb-thankyou__next { text-align: start; max-width: 52ch; margin-inline: auto; margin-block: var(--sp-6); }
.hb-thankyou__steps { padding-inline-start: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); color: var(--surface-text); }
.hb-thankyou__actions { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-block-start: var(--sp-6); }