/* ==========================================================================
   HeyBro shop — product listing + product detail
   Tokens mirror the Elementor global variables on this site.
   ========================================================================== */

:root {
  --hb-navy: #05334A;
  --hb-navy-deep: #04202E;
  --hb-red: #B40023;
  --hb-red-dark: #8D001B;
  --hb-cream: #FCF0D6;
  --hb-sky: #6B9EBD;
  --hb-text-muted: #55646E;
  --hb-text-on-navy: #B7CBD8;
  --hb-text-hero: #EDF1F4;
  --hb-ink: #2B3B45;
  --hb-surface-grey: #F2F4F6;
  --hb-border-grey: #D8DEE3;
  --hb-border-cream: #E7E2D6;
  --hb-line: #E4E8EB;
  --hb-link-navy: #C9D7E0;
  --hb-muted-navy: #9FB4C1;
  --hb-font-display: Anton, 'Arial Narrow', sans-serif;
  --hb-font-body: Poppins, 'Segoe UI', Helvetica, Arial, sans-serif;
  --hb-font-script: Caveat, 'Segoe Script', cursive;
  --hb-shell: 1360px;
}

.hb-ms {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
}

/* Astra prints its own archive title; the hero carries the H1 instead. */
.woocommerce-products-header,
.ast-archive-description,
.woocommerce-breadcrumb {
  display: none !important;
}

.woocommerce .hb-container,
.hb-container {
  width: 100%;
  max-width: var(--hb-shell);
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* Astra boxes shop pages into a 1200px "separate container" card. The site
   palette puts sky blue (#6B9EBD) in the white slot, so that card paints blue
   behind WooCommerce pages. The design is full-width bands on white, so here the
   container runs edge to edge and each block sets its own measure. */
body.woocommerce .ast-woocommerce-container,
body.woocommerce-page .ast-woocommerce-container,
body.woocommerce .ast-article-single,
body.woocommerce-page .ast-article-single,
body.ast-separate-container.woocommerce .ast-woocommerce-container,
body.ast-separate-container.woocommerce .ast-article-single,
body.ast-separate-container.woocommerce-page .ast-woocommerce-container,
body.ast-separate-container.woocommerce-page .ast-article-single {
  max-width: 100%;
  padding: 0;
  border: none;
  box-shadow: none;
  background: #fff;
}

body.woocommerce,
body.woocommerce-page,
body.single-product {
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Shared type + buttons
   -------------------------------------------------------------------------- */

.hb-eyebrow {
  margin: 0;
  font-family: var(--hb-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hb-cream);
}

.hb-eyebrow--center { text-align: center; }

.hb-h1 {
  margin: 16px 0 0;
  font-family: var(--hb-font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  text-transform: uppercase;
}

.hb-h2 {
  margin: 0;
  font-family: var(--hb-font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #000;
}

.hb-h2--light {
  margin: 16px 0 0;
  color: #fff;
  text-align: center;
  font-size: clamp(26px, 3.6vw, 40px);
}

.hb-rule {
  width: 74px;
  height: 4px;
  background: var(--hb-red);
  margin-top: 10px;
}

.woocommerce a.hb-btn,
.hb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--hb-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 0;
  padding: 13px 26px;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.woocommerce a.hb-btn--primary,
.hb-btn--primary {
  background: var(--hb-red);
  color: #fff;
}

.woocommerce a.hb-btn--primary:hover,
.hb-btn--primary:hover {
  background: var(--hb-red-dark);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Listing — hero + category chips
   -------------------------------------------------------------------------- */

.hb-archive-hero {
  position: relative;
  background: var(--hb-navy);
  color: #fff;
  overflow: hidden;
}

.hb-archive-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,32,46,.93) 0%, rgba(4,32,46,.78) 45%, rgba(4,32,46,.55) 100%);
  pointer-events: none;
}

.hb-archive-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 26px 64px;
}

.hb-crumbs ol {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-muted-navy);
}

.hb-crumbs a { color: var(--hb-muted-navy); text-decoration: none; }
.hb-crumbs a:hover { color: #fff; }
.hb-crumbs li[aria-current] { color: var(--hb-cream); }

.hb-hero-lede p {
  margin: 22px 0 0;
  max-width: 640px;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--hb-text-hero);
  text-wrap: pretty;
}

.hb-chips {
  background: #fff;
  border-bottom: 1px solid var(--hb-line);
}

.hb-chips ul {
  list-style: none;
  margin: 0;
  padding-block: 20px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.hb-chips ul::-webkit-scrollbar { display: none; }
.hb-chips li { flex: 0 0 auto; margin: 0; }

.hb-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--hb-navy);
  border: 1px solid var(--hb-border-grey);
  padding: 11px 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: all .16s ease;
}

.hb-chip span { font-weight: 400; color: var(--hb-muted-navy); }
.hb-chip:hover { border-color: var(--hb-navy); color: var(--hb-red); }
.hb-chip.is-current { background: var(--hb-navy); border-color: var(--hb-navy); color: #fff; }
.hb-chip.is-current span { color: var(--hb-sky); }

/* --------------------------------------------------------------------------
   Listing — toolbar, grid, cards, pagination
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  font-family: var(--hb-font-body);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--hb-text-muted);
}

.woocommerce .woocommerce-ordering select {
  font-family: var(--hb-font-body);
  font-size: 12px;
  color: var(--hb-navy);
  background: #fff;
  border: 1px solid var(--hb-border-grey);
  border-radius: 0;
  padding: 10px 14px;
}

.woocommerce ul.products.hb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 38px 26px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products.hb-grid::before,
.woocommerce ul.products.hb-grid::after { content: none; }

.woocommerce ul.products.hb-grid li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--hb-surface-grey);
  margin: 0;
  border-radius: 0;
}

.woocommerce ul.products li.product .ast-woo-shop-product-categories,
.woocommerce ul.products li.product .ast-woo-product-category {
  margin: 16px 0 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 6px 0 0;
  padding: 0;
  font-family: var(--hb-font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #000;
}

.woocommerce ul.products li.product .price {
  margin: 6px 0 0;
  font-family: var(--hb-font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--hb-navy);
}

.woocommerce ul.products li.product .star-rating {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--hb-red);
}

.woocommerce ul.products li.product .hb-card-cta {
  margin-top: 14px;
  width: 100%;
  padding: 12px 16px;
}

.woocommerce ul.products li.product .button:not(.hb-btn) { display: none; }

.woocommerce nav.woocommerce-pagination {
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--hb-line);
}

.woocommerce nav.woocommerce-pagination ul {
  border: none;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none;
  margin: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--hb-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--hb-navy);
  border: 1px solid var(--hb-border-grey);
  background: #fff;
  border-radius: 0;
}

.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--hb-navy); background: #fff; }

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--hb-navy);
  border-color: var(--hb-navy);
  color: #fff;
}

/* Sidebar filters */
.woocommerce #secondary .widget,
.woocommerce-page #secondary .widget {
  border: 1px solid var(--hb-line);
  border-top: none;
  padding: 22px 22px 26px;
  margin: 0;
}

.woocommerce #secondary .widget:first-child,
.woocommerce-page #secondary .widget:first-child {
  border-top: 3px solid var(--hb-navy);
}

.woocommerce #secondary .widget-title,
.woocommerce #secondary .wp-block-heading,
.woocommerce-page #secondary .widget-title,
.woocommerce-page #secondary .wp-block-heading {
  margin: 0 0 14px;
  font-family: var(--hb-font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
}

.woocommerce #secondary ul,
.woocommerce-page #secondary ul { list-style: none; margin: 0; padding: 0; }

.woocommerce #secondary ul li,
.woocommerce-page #secondary ul li {
  padding: 9px 0;
  border-bottom: 1px solid var(--hb-surface-grey);
  font-size: 12.5px;
  font-weight: 300;
}

.woocommerce #secondary a,
.woocommerce-page #secondary a { color: var(--hb-ink); text-decoration: none; }
.woocommerce #secondary a:hover,
.woocommerce-page #secondary a:hover { color: var(--hb-red); }

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */

.hb-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--hb-text-muted);
  font-family: var(--hb-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.hb-back:hover { color: var(--hb-red); }

/* Astra sets .ast-article-single { display: inline-block }, so match its
   specificity to win rather than reaching for !important. */
.single-product div.product.ast-article-single {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}

.single-product div.product .hb-back { grid-column: 1 / -1; margin-bottom: 0; }

.single-product div.product .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0;
}

.single-product div.product .summary.entry-summary {
  width: 100% !important;
  float: none !important;
  margin: 0;
}

.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .upsells {
  grid-column: 1 / -1;
}

/* The steps and promise bands sit outside div.product and run edge to edge. */
.hb-steps,
.hb-promises {
  width: 100%;
  box-sizing: border-box;
}

/* Gallery: main image, then a four-across thumbnail row. */
.woocommerce-product-gallery__wrapper { margin: 0; }

.woocommerce-product-gallery__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--hb-surface-grey);
  border-radius: 0;
}

.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: 100%;
  float: none;
  margin: 0;
  list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--hb-surface-grey);
  border: 1px solid var(--hb-line);
  box-sizing: border-box;
  opacity: 1;
  transition: border-color .16s ease;
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
  border-color: var(--hb-red);
}

/* Summary column */
.single-product .summary .posted_in,
.single-product .summary .product_meta { display: none; }

.single-product .summary .product_title {
  margin: 8px 0 0;
  font-family: var(--hb-font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #000;
}

.single-product .summary .woocommerce-product-rating { margin: 14px 0 0; }
.single-product .summary .star-rating { color: var(--hb-red); }

.single-product .summary p.price,
.single-product .summary p.price ins {
  margin: 20px 0 0;
  font-family: var(--hb-font-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: 0.01em;
  color: var(--hb-navy);
  text-decoration: none;
}

.single-product .summary .woocommerce-product-details__short-description p {
  margin: 18px 0 0;
  max-width: 520px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--hb-ink);
  text-wrap: pretty;
}

/* Personalisation panel */
.hb-pers {
  margin: 26px 0 0;
  background: var(--hb-cream);
  border: 1px solid var(--hb-border-cream);
  border-top: 3px solid var(--hb-red);
  padding: 24px 24px 26px;
}

.hb-pers__script {
  margin: 0;
  font-family: var(--hb-font-script);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--hb-red);
}

.hb-pers__eyebrow {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
}

.hb-field { margin-top: 20px; }

.hb-field__label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-navy);
}

.hb-req { color: var(--hb-red); }

.hb-req-word,
.hb-opt {
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: none;
}

.hb-req-word { color: var(--hb-red); }
.hb-opt { color: var(--hb-text-muted); }

.hb-counter {
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--hb-text-muted);
}

.hb-counter.is-full { color: var(--hb-red); }

.woocommerce .hb-input,
.hb-input {
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--hb-border-cream);
  border-radius: 0;
  color: var(--hb-ink);
  padding: 13px 14px;
  font-family: var(--hb-font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  outline: none;
}

.hb-input:focus { border-color: var(--hb-navy); }
.hb-input--short { width: 110px; }
.hb-input.is-invalid { border-color: var(--hb-red); }

.hb-pers__note {
  margin: 18px 0 0;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--hb-text-muted);
  text-wrap: pretty;
}

/* Quantity + add to cart */
.single-product form.cart { margin-top: 26px !important; display: block; }

.single-product form.cart .quantity,
.single-product form.cart .single_add_to_cart_button {
  vertical-align: top;
}

.single-product form.cart .quantity input.qty {
  height: 50px;
  width: 76px;
  border: 1px solid var(--hb-border-grey);
  border-radius: 0;
  font-family: var(--hb-font-body);
  font-size: 14px;
  color: var(--hb-navy);
  text-align: center;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
  min-height: 50px;
  background: var(--hb-red);
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 15px 30px;
  font-family: var(--hb-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
  background: var(--hb-red-dark);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs { margin-top: clamp(40px, 5vw, 64px); }

.woocommerce div.product .woocommerce-tabs ul.tabs {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 34px;
  border-bottom: 1px solid var(--hb-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 16px 0;
  border-bottom: 3px solid transparent;
  font-family: var(--hb-font-display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
  transition: all .16s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: #000;
  border-bottom-color: var(--hb-red);
}

.woocommerce div.product .woocommerce-tabs .panel {
  margin: 0;
  padding-top: 30px;
  border: none;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs .panel > h2,
.woocommerce div.product .woocommerce-tabs .panel h2:first-child {
  margin: 0;
  font-family: var(--hb-font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #000;
}

.woocommerce div.product .woocommerce-tabs .panel p {
  max-width: 660px;
  margin: 20px 0 0;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--hb-ink);
  text-wrap: pretty;
}

.hb-tab-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.hb-aside-cream {
  background: var(--hb-cream);
  border: 1px solid var(--hb-border-cream);
  padding: 24px 22px;
}

.hb-aside-cream__title {
  margin: 0 !important;
  font-family: var(--hb-font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
}

.hb-aside-cream p { margin-top: 12px !important; font-size: 12.5px !important; }

/* Specifications table */
.woocommerce div.product .shop_attributes {
  margin-top: 26px;
  border: none;
  max-width: 660px;
}

.woocommerce div.product .shop_attributes th,
.woocommerce div.product .shop_attributes td {
  padding: 14px 24px 14px 0;
  border: none;
  border-bottom: 1px solid var(--hb-surface-grey);
  background: none;
  font-style: normal;
}

.woocommerce div.product .shop_attributes th {
  font-family: var(--hb-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
  width: 1%;
  white-space: nowrap;
}

.woocommerce div.product .shop_attributes td p {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 300;
  color: var(--hb-ink);
}

/* Related products */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
  margin: 0 0 34px;
  font-family: var(--hb-font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #000;
}

.woocommerce div.product .related,
.woocommerce div.product .upsells { margin-top: clamp(44px, 5vw, 64px); }

/* --------------------------------------------------------------------------
   Shared bands: four steps + promises
   -------------------------------------------------------------------------- */

.hb-steps {
  background: var(--hb-navy);
  padding-block: clamp(48px, 6vw, 70px);
  margin-top: clamp(44px, 5vw, 64px);
}

.hb-steps__inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 24px;
  text-align: center;
}

.hb-steps__row {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 44px;
}

.hb-step { width: 190px; display: flex; flex-direction: column; align-items: center; }

.hb-step__circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--hb-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--hb-navy);
}

.hb-step__badge {
  position: absolute;
  bottom: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid var(--hb-navy);
  background: var(--hb-red);
  color: #fff;
  font-family: var(--hb-font-body);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hb-step__title {
  margin: 22px 0 0;
  font-family: var(--hb-font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
}

.hb-step__body {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--hb-text-on-navy);
  text-wrap: pretty;
}

.hb-promises {
  background: #fff;
  border-block: 1px solid var(--hb-border-cream);
  margin-top: clamp(44px, 5vw, 64px);
}

.hb-promises__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px 32px;
  padding-block: 30px;
}

.hb-promise { display: flex; gap: 13px; align-items: center; }
.hb-promise .hb-ms { color: var(--hb-red); }

.hb-promise__title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.65;
  text-transform: uppercase;
  color: #000;
}

.hb-promise__sub {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .hb-tab-cols { grid-template-columns: minmax(0, 1fr); }

  .woocommerce ul.products.hb-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 32px 20px;
  }

  .hb-archive-hero__inner { padding-block: 22px 48px; }
}

@media (max-width: 767px) {
  .hb-container,
  .hb-steps__inner { padding-inline: 20px; }

  .woocommerce ul.products.hb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }

  .hb-crumbs ol { margin-bottom: 24px; }

  .hb-chips ul { padding-block: 16px; }

  .hb-steps__row { gap: 28px; }
  .hb-step { width: 100%; max-width: 260px; }

  .hb-promises__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px 20px; }

  .single-product .summary p.price { font-size: 28px; }

  .woocommerce div.product .woocommerce-tabs ul.tabs { gap: 0 20px; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: 12px; letter-spacing: 0.08em; }

  .woocommerce div.product div.images .flex-control-thumbs { gap: 10px; }

  /* Full-width tap targets on phones. */
  .single-product form.cart .quantity,
  .single-product form.cart .quantity input.qty { width: 100%; }

  .woocommerce div.product form.cart .button.single_add_to_cart_button {
    width: 100%;
    margin-top: 12px;
  }

  .hb-input--short { width: 100%; }

  .woocommerce nav.woocommerce-pagination ul { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .woocommerce ul.products.hb-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }

  .woocommerce div.product div.images .flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .hb-pers { padding: 20px 18px 22px; }

  .woocommerce div.product .woocommerce-tabs ul.tabs {
    gap: 0 16px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Astra container reconciliation
   The site palette puts sky blue (#6B9EBD) in the white slot, and Astra's
   "separate container" style paints every card and widget with it. The shop
   design is white, so these repaint the surfaces the design owns. Nothing here
   changes the palette itself, so the rest of the site is untouched.
   -------------------------------------------------------------------------- */

body.woocommerce .site-content .ast-container,
body.woocommerce-page .site-content .ast-container {
  max-width: calc(var(--hb-shell) + 48px);
}

/* Sidebar to the design's 250px measure so the grid can hold four columns. */
body.woocommerce #secondary,
body.woocommerce-page #secondary {
  width: 268px;
  flex: 0 0 268px;
  padding-inline-start: 0;
}

body.woocommerce #primary,
body.woocommerce-page #primary {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* Product cards and sidebar widgets sit on white, not the palette blue. */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
body.ast-separate-container.woocommerce ul.products li.product,
body.ast-separate-container.woocommerce-page ul.products li.product {
  background: #fff;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

body.woocommerce #secondary .widget,
body.woocommerce-page #secondary .widget,
body.ast-separate-container.woocommerce #secondary .widget,
body.ast-separate-container.woocommerce-page #secondary .widget {
  background: #fff;
}

/* Astra's own loop-card padding fights the design's flush image. */
body.woocommerce ul.products li.product .astra-shop-summary-wrap,
body.woocommerce-page ul.products li.product .astra-shop-summary-wrap {
  padding: 0;
}

@media (max-width: 921px) {
  body.woocommerce #secondary,
  body.woocommerce-page #secondary {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* The design is a four-up grid on desktop; auto-fill under-counts once the
   sidebar has taken its 268px, so pin the track count at the wide breakpoints. */
@media (min-width: 1200px) {
  body.woocommerce ul.products.hb-grid,
  body.woocommerce-page ul.products.hb-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Related products have no sidebar beside them. */
  .single-product .related ul.products.hb-grid,
  .single-product .upsells ul.products.hb-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 922px) and (max-width: 1199px) {
  body.woocommerce ul.products.hb-grid,
  body.woocommerce-page ul.products.hb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Grid track authority
   Astra ships .woocommerce ul.products:not(.elementor-grid).columns-N at (0,4,1),
   which out-specifies a plain .hb-grid rule. Adding :not(.elementor-grid) here
   takes these to (0,4,2) so the design's breakpoints win. Keep this block last.
   -------------------------------------------------------------------------- */

body.woocommerce ul.products.hb-grid:not(.elementor-grid),
body.woocommerce-page ul.products.hb-grid:not(.elementor-grid) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 38px 26px;
}

@media (max-width: 1199px) {
  body.woocommerce ul.products.hb-grid:not(.elementor-grid),
  body.woocommerce-page ul.products.hb-grid:not(.elementor-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 20px;
  }
}

@media (max-width: 767px) {
  body.woocommerce ul.products.hb-grid:not(.elementor-grid),
  body.woocommerce-page ul.products.hb-grid:not(.elementor-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }
}

@media (max-width: 480px) {
  body.woocommerce ul.products.hb-grid:not(.elementor-grid),
  body.woocommerce-page ul.products.hb-grid:not(.elementor-grid) {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
}

/* Related products run the full width with no sidebar beside them. */
@media (min-width: 1200px) {
  .single-product .related ul.products.hb-grid:not(.elementor-grid),
  .single-product .upsells ul.products.hb-grid:not(.elementor-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Shop All cover photo (the Shop page's Featured image). Same legibility
   treatment as the other page heroes: the photo stays clear, a navy fade on
   the left carries the copy, and the copy has a soft navy halo. The copy runs
   to ~48% over white bottles and mugs, so the fade holds until 64%.
   -------------------------------------------------------------------------- */

.hb-archive-hero.has-image .hb-archive-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.hb-archive-hero.has-image .hb-archive-hero__overlay {
  background: linear-gradient(90deg, rgba(4,32,46,.66) 0%, rgba(4,32,46,.58) 30%, rgba(4,32,46,.46) 48%, rgba(4,32,46,0) 64%);
}

.hb-archive-hero.has-image .hb-archive-hero__inner {
  padding-block: 40px 96px;
}

.hb-archive-hero.has-image .hb-crumbs,
.hb-archive-hero.has-image .hb-eyebrow,
.hb-archive-hero.has-image .hb-h1 {
  text-shadow: 0 1px 2px rgba(4,32,46,.55), 0 2px 14px rgba(4,32,46,.5);
}

.hb-archive-hero.has-image .hb-hero-lede {
  text-shadow: 0 1px 3px rgba(4,32,46,.75), 0 0 16px rgba(4,32,46,.6);
}

@media (max-width: 767px) {
  .hb-archive-hero.has-image .hb-archive-hero__overlay { background: rgba(4,32,46,.5); }
  .hb-archive-hero.has-image .hb-archive-hero__inner { padding-block: 28px 56px; }
}
/* Shop All uses the home page's transparent header over its cover photo, so the
   hero starts under the header: match the other page heroes' height and push the
   copy down to clear the bar. */
.ast-theme-transparent-header .hb-archive-hero.has-image {
  min-height: 502px;
  display: flex;
  align-items: flex-end;
}

.ast-theme-transparent-header .hb-archive-hero.has-image .hb-archive-hero__inner {
  width: 100%;
  padding-block: 130px 72px;
}

@media (max-width: 921px) {
  .ast-theme-transparent-header .hb-archive-hero.has-image { min-height: 420px; }
  .ast-theme-transparent-header .hb-archive-hero.has-image .hb-archive-hero__inner { padding-block: 110px 48px; }
}