/* =============================================================
   Highland Cabinetry — Shop Page
   Enqueued on is_woocommerce() / is_shop() / is_product_category()
   Bootstrap 5 handles general layout; this file overrides
   WooCommerce-generated markup that Bootstrap cannot reach.
   ============================================================= */

/* ─── 1. Shop Banner ──────────────────────────────────────────
   Warm-toned banner above the product grid.
   ──────────────────────────────────────────────────────────── */
/* Collection banner — dark photo band, per the design. A background photo is
   optional: set one in Customizer → Highland Cabinetry → Hero, and the scrim
   below sits over it. With no photo the green gradient shows through, so the
   band looks finished either way. */
.hc-shop-banner {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 130% at 12% 0%, color-mix(in srgb, var(--hc-dark) 80%, #fff) 0%, var(--hc-dark) 52%, var(--hc-dark2) 100%);
  color: var(--hc-white);
  padding: 84px 0 76px;
  overflow: hidden;
}
.hc-shop-banner--has-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hc-banner-img);
  background-size: cover;
  background-position: center;
}
/* Left-weighted scrim: the design keeps the copy side dark enough for white
   text while the right of the photo stays visible. */
.hc-shop-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--hc-dark2) 92%, transparent) 0%,
      color-mix(in srgb, var(--hc-dark) 78%, transparent) 42%,
      color-mix(in srgb, var(--hc-dark) 38%, transparent) 100%);
}
.hc-shop-banner:not(.hc-shop-banner--has-img) .hc-shop-banner__scrim { display: none; }
.hc-shop-banner__inner {
  position: relative;
}
.hc-shop-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--hc-accent);
  text-transform: uppercase;
  letter-spacing: .22em;
  margin-bottom: 14px;
}
.hc-shop-banner__eyebrow::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--hc-accent);
}
.hc-shop-banner__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 400;
  color: var(--hc-white);
  line-height: 1.12;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}
.hc-shop-banner__sub {
  font-size: var(--hc-text-md);
  color: color-mix(in srgb, var(--hc-white) 80%, transparent);
  line-height: 1.65;
  /* 440px suited the original one-line shop subtitle. Collection pages carry
     multi-paragraph SEO copy, where that cap left ~750px of the banner empty and
     pushed it to ~680px tall — so cap the measure per column instead and let the
     copy use the full width in two columns. */
  max-width: 72ch;
}

/* The intro is real page content, so it can contain headings and lists. Scale
   them down to banner proportions — unstyled they render at article size and
   compete with the h1. */
.hc-shop-banner__sub > :first-child {
  margin-top: 0;
}
.hc-shop-banner__sub h2,
.hc-shop-banner__sub h3,
.hc-shop-banner__sub h4 {
  font-size: var(--hc-text-lg);
  color: var(--hc-white);
  margin: 18px 0 6px;
  letter-spacing: -0.1px;
}
.hc-shop-banner__sub p {
  margin-bottom: 10px;
}
.hc-shop-banner__sub ul,
.hc-shop-banner__sub ol {
  margin: 0 0 10px;
  padding-left: 18px;
}
.hc-shop-banner__sub li {
  margin-bottom: 4px;
}
.hc-shop-banner__sub strong {
  color: var(--hc-white);
  font-weight: 600;
}

/* Long-form intro copy (collection pages) flows into two columns on wide
   screens; short single-paragraph banners are unaffected because a lone
   paragraph simply fills the first column. */
@media (min-width: 992px) {
  .hc-shop-banner__sub {
    max-width: none;
    columns: 2;
    column-gap: 56px;
  }
  /* Keep a heading with the text it introduces. */
  .hc-shop-banner__sub > :first-child {
    margin-top: 0;
  }
  .hc-shop-banner__sub h2,
  .hc-shop-banner__sub h3,
  .hc-shop-banner__sub h4 {
    break-after: avoid;
  }
  /* Paragraphs stay whole, but lists may split across the column boundary —
     keeping a long list intact forces it wholly into one column and leaves the
     other short. Individual items are still kept together. */
  .hc-shop-banner__sub p {
    break-inside: avoid;
  }
  .hc-shop-banner__sub li {
    break-inside: avoid;
  }
}

/* ─── 2. WooCommerce Main Content Wrapper ─────────────────────
   Constrain width and gutter on WC's #main element.
   ──────────────────────────────────────────────────────────── */
body.woocommerce-page {
  background: var(--hc-bg);
}

body.woocommerce-page main#main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* Collection pages are regular WP pages, so they never get the
   .woocommerce-page body class — without this the breadcrumb sits flush
   against the viewport edge while the grid below is centred by .container. */
body.page-template-template-collection,
body.page-template-template-collections-index {
  background: var(--hc-bg);
}

body.page-template-template-collection main#main,
body.page-template-template-collections-index main#main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 0;
}

/* ─── 3. Breadcrumb ───────────────────────────────────────────
   ──────────────────────────────────────────────────────────── */
.woocommerce-breadcrumb {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  color: var(--hc-muted);
  margin-bottom: 28px !important;
}
.woocommerce-breadcrumb a {
  color: var(--hc-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.woocommerce-breadcrumb a:hover {
  color: var(--hc-accent);
}

/* ─── 4. Shop Toolbar ─────────────────────────────────────────
   Result count + ordering dropdown row.
   ──────────────────────────────────────────────────────────── */
/* The design puts the count and the sort control on one row, count left and
   sort right. Woo emits them as two block-level siblings, so the row is made
   here rather than by changing the markup. */
.hc-collection__main > .woocommerce-result-count,
.woocommerce-result-count {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
  margin: 0 !important;
  line-height: 1;
}
.woocommerce-ordering {
  margin: 0 0 20px !important;
}
/* Inside .hc-collection__main the grid's own row-gap already separates the
   toolbar row from the product grid below — the bottom margin above is only
   needed on the plain archive template, where result-count/ordering are
   unstyled block siblings with nothing else providing that gap. */
.hc-collection__main > form.woocommerce-ordering {
  margin-bottom: 0 !important;
}
/* Woo emits the count and the ordering form as two block siblings before the
   grid. A small grid on the container puts them on one row without touching
   the markup: both sit in row 1, the product list spans the full width below. */
.hc-collection__main {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: 20px;
  column-gap: 16px;
}
.hc-collection__main > * {
  grid-column: 1 / -1;
}
.hc-collection__main > .woocommerce-result-count {
  grid-column: 1;
  grid-row: 1;
}
.hc-collection__main > form.woocommerce-ordering {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
@media (max-width: 575.98px) {
  .hc-collection__main > .woocommerce-result-count,
  .hc-collection__main > form.woocommerce-ordering {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
  }
}
.woocommerce-ordering select {
  border: 1.5px solid var(--hc-border) !important;
  border-radius: var(--hc-r) !important;
  padding: 9px 36px 9px 14px !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  color: var(--hc-body) !important;
  background-color: var(--hc-surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b6b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
  transition: border-color 0.15s;
  height: auto !important;
  box-shadow: none !important;
}
.woocommerce-ordering select:focus {
  outline: none;
  border-color: var(--hc-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc-accent) 10%, transparent) !important;
}

/* ─── 5. Product Grid ─────────────────────────────────────────
   WooCommerce clearfix injects ::before { display: table } — kill it.
   ──────────────────────────────────────────────────────────── */
ul.products::before,
ul.products::after {
  display: none !important;
}

ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 28px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ─── 6. Product Card ─────────────────────────────────────────
   ──────────────────────────────────────────────────────────── */
ul.products li.product {
  border-radius: var(--hc-r-lg) !important;
  border: 1px solid var(--hc-border) !important;
  background: var(--hc-surface) !important;
  overflow: hidden !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}
ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--hc-sh-lg) !important;
}

ul.products li.product .woocommerce-loop-product__link {
  display: block !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
  /* The card is one big link, so the global underline-on-links rule would
     underline the product title inside it. The design has none. */
  text-decoration: none !important;
}
/* Scopes the hover-zoom clip to the image only */
ul.products li.product .hc-product-thumb-wrap {
  display: block;
  overflow: hidden;
  flex-shrink: 0;
}
ul.products li.product .hc-product-thumb-wrap img {
  width: 100% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.38s ease;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
ul.products li.product:hover .hc-product-thumb-wrap img {
  transform: scale(1.05);
}

ul.products li.product .woocommerce-loop-product__title {
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--hc-heading) !important;
  padding: 16px 20px 4px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

ul.products li.product .price {
  display: block;
  padding: 4px 20px 14px !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--hc-accent) !important;
  margin: 0 !important;
}
ul.products li.product .price del {
  color: var(--hc-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin-right: 5px;
  opacity: 0.8;
}
ul.products li.product .price ins {
  text-decoration: none !important;
}

/* Flex row wrapping the ATC button + JS-injected "View cart" link.
   No flex-wrap — items always stay side-by-side. Link fills card above
   this row via flex:1 on .woocommerce-loop-product__link. */
ul.products li.product .hc-atc-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 0 16px 20px !important;
}

ul.products li.product .button.add_to_cart_button,
ul.products li.product a.button {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 9px 18px !important;
  background: var(--hc-accent) !important;
  /* Dark green on gold, not white: white on this gold is 2.31:1 and fails AA.
     Matches the gold buttons used elsewhere in the design. */
  color: var(--hc-dark) !important;
  border: 1.5px solid var(--hc-accent) !important;
  border-radius: var(--hc-btn-r) !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition:
    background 0.18s,
    border-color 0.18s !important;
  text-decoration: none !important;
  line-height: 1 !important;
  letter-spacing: 0.01em;
  box-shadow: none !important;
  width: auto !important;
  white-space: nowrap;
}
ul.products li.product .button.add_to_cart_button:hover,
ul.products li.product a.button:hover {
  background: var(--hc-accent-d) !important;
  border-color: var(--hc-accent-d) !important;
  color: var(--hc-white) !important;
}
ul.products li.product .button.add_to_cart_button.loading {
  opacity: 0.7;
  pointer-events: none;
}
/* Reuses --hc-dark (the site's own deep green) instead of a generic flat
   green, so the success state stays inside the brand palette. */
ul.products li.product .button.add_to_cart_button.added {
  background: var(--hc-dark) !important;
  border-color: var(--hc-dark) !important;
  color: var(--hc-white) !important;
}
/* WooCommerce injects a tick icon via ::after on .added — suppress it;
   the green background already signals success. */
ul.products li.product .button.add_to_cart_button.added::after {
  display: none !important;
  content: none !important;
}

ul.products li.product a.added_to_cart {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  background: transparent !important;
  color: var(--hc-accent) !important;
  border: 1.5px solid var(--hc-accent) !important;
  border-radius: var(--hc-btn-r) !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  box-shadow: none !important;
  width: auto !important;
  white-space: nowrap;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s !important;
  letter-spacing: 0.01em;
}
ul.products li.product a.added_to_cart:hover {
  background: var(--hc-accent) !important;
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark) !important;
}

/* ─── 7. Pagination ───────────────────────────────────────────
   ──────────────────────────────────────────────────────────── */
.woocommerce-pagination {
  margin-top: 52px !important;
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
  border: none !important;
}

.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.woocommerce-pagination ul.page-numbers li {
  /* Not display: contents — Safari/WebKit doesn't apply flex `gap` across
     display:contents children, so the circles would sit flush with no gap
     there even though this looks fine in Chrome. */
  display: flex;
  list-style: none !important;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
}

.woocommerce-pagination ul.page-numbers a,
.woocommerce-pagination ul.page-numbers span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--hc-body) !important;
  background: var(--hc-surface) !important;
  border: 1.5px solid var(--hc-border) !important;
  text-decoration: none !important;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.woocommerce-pagination ul.page-numbers a:hover {
  border-color: var(--hc-accent) !important;
  color: var(--hc-accent) !important;
}
.woocommerce-pagination ul.page-numbers span.current {
  background: var(--hc-accent) !important;
  border-color: var(--hc-accent) !important;
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--hc-accent) 28%, transparent);
}
.woocommerce-pagination ul.page-numbers .prev,
.woocommerce-pagination ul.page-numbers .next {
  font-size: 16px;
}

/* ─── 8. No Products Found ────────────────────────────────────
   ──────────────────────────────────────────────────────────── */
.woocommerce-info {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 15px !important;
  color: var(--hc-muted) !important;
  background: var(--hc-warm) !important;
  border-color: var(--hc-border) !important;
  border-radius: var(--hc-r) !important;
}
.woocommerce-info::before {
  color: var(--hc-accent) !important;
}

/* ─── 9. Responsive ───────────────────────────────────────────
   ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .hc-shop-banner {
    padding: 36px 0 32px;
  }
  body.woocommerce-page main#main {
    padding-top: 36px;
    padding-bottom: 56px;
  }
}

@media (max-width: 480px) {
  ul.products {
    grid-template-columns: 1fr !important;
  }
  ul.products li.product .woocommerce-loop-product__link img {
    aspect-ratio: 3 / 2;
  }
}

/* ─── 10. Cart Page ────────────────────────────────────────────
   Markup: woocommerce/cart/cart.php, cart-totals.php, cross-sells.php,
   proceed-to-checkout-button.php (all theme overrides). Item list renders
   as cards rather than a table; the summary lives in a second column.
   ──────────────────────────────────────────────────────────── */
.hc-cart-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 500;
  color: var(--hc-heading);
  margin: 0 0 28px;
}

.hc-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 32px;
}

/* ─── 10a. Item cards ─────────────────────────────────────────── */
.hc-cart-list {
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  overflow: hidden;
}
.hc-cart-card {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 22px 48px 22px 22px;
}
.hc-cart-card + .hc-cart-card {
  border-top: 1px solid var(--hc-border);
}
.hc-cart-card__thumb img {
  width: 74px !important;
  height: 74px !important;
  object-fit: cover !important;
  border-radius: var(--hc-r) !important;
  border: 1px solid var(--hc-border) !important;
  display: block !important;
}
.hc-cart-card__body {
  min-width: 0;
}
/* Same min-width:0 fix, applied at the grid-column level for the default
   (non-mobile) grid-template-columns: 90px 1fr auto auto layout above. */
.hc-cart-card {
  min-width: 0;
}
.hc-cart-card__name a {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--hc-heading);
  text-decoration: none;
  transition: color 0.15s;
}
.hc-cart-card__name a:hover {
  color: var(--hc-accent);
}
.hc-cart-card__meta {
  margin-top: 4px;
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
/* Core's per-item meta list (variation attributes, e.g. "Finish: ..."). */
.hc-cart-card__meta .wc-item-meta,
.hc-cart-card__meta dl.variation {
  display: contents;
  font-size: inherit;
}
.hc-cart-card__meta .wc-item-meta li,
.hc-cart-card__meta dl.variation > * {
  display: inline;
  margin: 0;
  font-size: inherit;
}
/* Separator dot between whatever comes before it (finish text or core's
   variation meta) and the dimensions — :not(:first-child) skips it when
   dims is the only thing on the line (no color/finish data at all). */
.hc-cart-card__dims:not(:first-child)::before {
  content: '·';
  margin-right: 10px;
  color: var(--hc-border);
}

.hc-cart-card__qty {
  justify-self: center;
}

.hc-cart-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.hc-cart-card__subtotal {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--hc-heading);
}
.hc-cart-card__unit {
  font-size: var(--hc-text-xs);
  color: var(--hc-muted);
}

.hc-cart-card__remove {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--hc-bg);
  border: 1px solid var(--hc-border);
  color: var(--hc-muted);
  font-size: 16px;
  line-height: 1;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hc-cart-card__remove:hover {
  background: #fdecea;
  border-color: #e57373;
  color: #c62828;
}

/* Quantity stepper — cart.js wraps the native input in .hc-qty. */
.hc-qty {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: stretch;
  border: 1.5px solid var(--hc-border);
  border-radius: var(--hc-r);
  overflow: hidden;
  background: var(--hc-surface);
  box-sizing: border-box;
}
.hc-qty:focus-within {
  border-color: var(--hc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc-accent) 12%, transparent);
}
.hc-qty__btn {
  flex: 0 0 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--hc-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
  min-width: 30px;
}
.hc-qty__btn:hover {
  background: var(--hc-bg);
  color: var(--hc-heading);
}
.hc-qty__btn:active {
  background: var(--hc-warm);
}
.hc-cart-card input.qty {
  width: 40px !important;
  box-sizing: border-box !important;
  padding: 7px 2px !important;
  border: 0 !important;
  border-left: 1px solid var(--hc-border) !important;
  border-right: 1px solid var(--hc-border) !important;
  border-radius: 0 !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--hc-heading) !important;
  background: var(--hc-surface) !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
  box-shadow: none !important;
}
.hc-cart-card input.qty:not(.hc-qty *) {
  width: 60px !important;
  border: 1.5px solid var(--hc-border) !important;
  border-radius: var(--hc-r) !important;
}
.hc-cart-card input.qty:focus {
  outline: none !important;
}
.hc-cart-card input.qty::-webkit-inner-spin-button,
.hc-cart-card input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* "Update cart" stays in the DOM (the stepper's change event needs it to
   enable) but has no visible equivalent in the design. */
.hc-cart-update-row {
  margin: 0;
}
.hc-cart-update {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.hc-cart-update:focus-visible {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  margin: 12px 0 0 !important;
  padding: 8px 16px !important;
  background: var(--hc-surface) !important;
  border: 1.5px solid var(--hc-accent) !important;
  border-radius: var(--hc-r) !important;
}

/* ─── 10b. You Might Also Need ────────────────────────────────── */
.hc-cross-sells {
  margin-top: 28px;
}
.hc-cross-sells__title {
  /* Explicit sans — without it this inherits the global heading-serif rule
     and reads wrong at this size, unlike the design's tracked label. */
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hc-muted);
  margin: 0 0 14px;
}
.hc-cross-sells__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hc-cross-sells__item {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  background: var(--hc-surface);
  overflow: hidden;
}
.hc-cross-sells__link {
  flex: 1;
  padding: 16px 44px 16px 18px;
  text-decoration: none !important;
  min-width: 0;
}
.hc-cross-sells__name {
  font-size: var(--hc-text-sm);
  font-weight: 500;
  color: var(--hc-heading);
}
.hc-cross-sells__add {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--hc-bg) !important;
  border: 1px solid var(--hc-border) !important;
  color: var(--hc-heading) !important;
  font-size: 16px;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.15s, border-color 0.15s;
}
.hc-cross-sells__add:hover {
  background: var(--hc-accent) !important;
  border-color: var(--hc-accent) !important;
  color: var(--hc-dark) !important;
}
.hc-cross-sells__add.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ─── 10c. Order Summary panel ────────────────────────────────── */
.hc-cart-summary {
  position: sticky;
  top: 84px;
}
.hc-order-summary {
  width: 100% !important;
  max-width: none !important;
  background: var(--hc-surface) !important;
  border: 1px solid var(--hc-border) !important;
  border-radius: var(--hc-r-lg) !important;
  padding: 26px !important;
}
.hc-order-summary__eyebrow {
  display: block;
  margin-bottom: 18px;
}

.hc-order-summary__items {
  margin: 0 0 20px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--hc-border);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hc-order-summary__item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hc-order-summary__thumb {
  position: relative;
  flex-shrink: 0;
}
.hc-order-summary__thumb img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--hc-r);
  border: 1px solid var(--hc-border);
  display: block;
}
.hc-order-summary__qty {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hc-dark);
  color: var(--hc-white);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hc-order-summary__info {
  flex: 1;
  min-width: 0;
}
.hc-order-summary__name {
  display: block;
  font-size: var(--hc-text-sm);
  font-weight: 600;
  color: var(--hc-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-order-summary__finish {
  display: block;
  font-size: var(--hc-text-xs);
  color: var(--hc-muted);
}
.hc-order-summary__linetotal {
  flex-shrink: 0;
  font-size: var(--hc-text-sm);
  font-weight: 600;
  color: var(--hc-heading);
}

.hc-order-summary__coupon {
  display: flex !important;
  /* Flex items default to align-items:stretch — with the error message
     making .hc-order-summary__coupon-field taller than just the input,
     the button (also a flex item in this row) stretched to match instead
     of staying its own height. flex-start keeps it pinned to the input's
     height regardless of whether the error line is showing. */
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 20px !important;
  /* Core's woocommerce.css styles form.checkout_coupon (also on this
     element) as its own bordered/padded card, same treatment as the
     login/register forms — cleared here since the input+button pair
     should sit flush in the panel, not inside a second nested box. */
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}
.hc-order-summary__coupon-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hc-order-summary__coupon input#coupon_code {
  width: 100%;
  padding: 11px 18px !important;
  border: 1.5px solid transparent !important;
  border-radius: 999px !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 13px !important;
  background: var(--hc-warm) !important;
}
.hc-order-summary__coupon input#coupon_code:focus {
  outline: none !important;
  border-color: var(--hc-accent) !important;
  background: var(--hc-surface) !important;
}
.hc-order-summary__coupon .button {
  padding: 11px 24px !important;
  background: var(--hc-dark) !important;
  color: var(--hc-white) !important;
  border: none !important;
  border-radius: var(--hc-btn-r) !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap;
  box-shadow: none !important;
}
.hc-order-summary__coupon .button:hover {
  background: var(--hc-dark2) !important;
}
.hc-order-summary__coupon #coupon-error-notice {
  margin: 6px 0 0;
  font-size: var(--hc-text-xs);
  color: #c62828;
}
.hc-order-summary__coupon input#coupon_code.has-error,
.hc-order-summary__coupon input#coupon_code.has-error:focus {
  border-color: #e57373 !important;
}

.hc-order-summary .shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  margin-bottom: 20px !important;
  background: transparent !important;
  border: none !important;
}
.hc-order-summary .shop_table th,
.hc-order-summary .shop_table td {
  padding: 10px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--hc-border) !important;
  vertical-align: middle !important;
}
.hc-order-summary .shop_table tr:last-child th,
.hc-order-summary .shop_table tr:last-child td {
  border-bottom: none !important;
}
.hc-order-summary .shop_table tr {
  /* woocommerce-smallscreen.css (still active on checkout — see functions.php)
     sets shop_table_responsive tr to display:block, stacking the row's th
     and td as separate full-width lines instead of side by side. Restoring
     display:table-row here, alongside the th/td display:table-cell below,
     puts label and value back on the same line. */
  display: table-row !important;
}
.hc-order-summary .shop_table th {
  /* Checkout keeps woocommerce-smallscreen.css active (payment gateway UI
     depends on it — see functions.php), and that stylesheet hides every
     shop_table_responsive tbody th at mobile widths, meaning to be replaced
     by its own td::before label. This table's <td> cells never carry the
     data-title that relies on (core's own review-order.php doesn't set it
     either), so that label came out blank — see the td::before override
     below. Showing the real <th> instead of hiding it sidesteps needing to
     duplicate every label string into CSS. */
  display: table-cell !important;
  font-weight: 500 !important;
  color: var(--hc-muted) !important;
  width: 40% !important;
  text-align: left !important;
}
.hc-order-summary .shop_table td {
  /* Same core stylesheet forces td to display:block; text-align:right!important
     at mobile widths — table-cell here keeps it on the th's row instead of
     wrapping to its own line underneath. */
  display: table-cell !important;
  text-align: right !important;
  color: var(--hc-body) !important;
  font-weight: 500 !important;
}
.hc-order-summary .woocommerce-shipping-methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hc-order-summary .order-total th,
.hc-order-summary .order-total td {
  padding-top: 16px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--hc-heading) !important;
}
/* Gold italic serif total, matching the price treatment used everywhere
   else on the site. */
.hc-order-summary .order-total td {
  font-family: "Playfair Display", Georgia, serif !important;
  font-style: italic;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--hc-accent) !important;
}
/* Same woocommerce-smallscreen.css rule the th override above explains:
   content: attr(data-title) ": " before every <td>, with no data-title ever
   set on this table's cells, so it rendered as a bare ": ". Now that <th> is
   shown as the real label, core's td::before would just duplicate it (and
   still show the broken bare colon) — drop it instead of trying to populate
   the missing attribute. */
.hc-order-summary .shop_table td::before {
  content: none !important;
}

.hc-order-summary__trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--hc-border);
}
.hc-order-summary__trust span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--hc-muted);
  text-align: center;
}
.hc-order-summary__trust svg {
  color: var(--hc-accent);
}

/* Checkout CTA — gold gradient, matching the hero/CTA-band buttons. */
.hc-cart-cta,
.wc-proceed-to-checkout .checkout-button,
.wc-proceed-to-checkout a.button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100% !important;
  margin-top: 22px;
  padding: 15px 24px !important;
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--hc-accent) 78%, #fff) 0%,
    var(--hc-accent) 55%,
    var(--hc-accent-d) 100%
  ) !important;
  background-color: var(--hc-accent) !important;
  color: var(--hc-dark) !important;
  border: none !important;
  border-radius: var(--hc-btn-r) !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: filter 0.18s !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}
.hc-cart-cta:hover,
.wc-proceed-to-checkout .checkout-button:hover,
.wc-proceed-to-checkout a.button:hover {
  filter: brightness(1.05);
  color: var(--hc-dark) !important;
}

/* Cart notices (wc-general dequeued, we own these). Success uses the fixed
   --hc-success green (not brand accent — see the token comment in
   global.css) so it reads unmistakably as "success" and stays visually
   distinct from the red error state, on every palette preset. Info still
   leans on the HC gold palette; error uses the fixed --hc-error red. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 14px 20px;
  border-radius: var(--hc-r);
  font-size: 14px;
  list-style: none;
}
/* WooCommerce's own cart/account JS gives these a tabindex="-1" and calls
   .focus() on page load so screen readers announce them immediately —
   that programmatic focus needs to stay (removing it would silence the
   announcement for AT users), but it should not draw anything: an orange
   ring around every "Cart updated." / error notice on page load reads as
   a UI bug, not a focus indicator, since nothing was actually navigated to
   by keyboard. outline-color: transparent keeps the box's layout/size
   identical (unlike outline: none, which some AT and browser test suites
   flag as an accessibility regression on its own) while rendering nothing
   visible. A genuine keyboard Tab onto the notice (e.g. via its "dismiss"
   link) still shows the browser's own default focus styling on whatever
   gets focus next, same as any other element on the page. */
.woocommerce-notices-wrapper .woocommerce-message:focus,
.woocommerce-notices-wrapper .woocommerce-error:focus,
.woocommerce-notices-wrapper .woocommerce-info:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.woocommerce-notices-wrapper .woocommerce-message {
  background: var(--hc-success-bg);
  border: 1px solid var(--hc-success-border);
  color: var(--hc-success);
}
.woocommerce-notices-wrapper .woocommerce-error {
  background: var(--hc-error-bg);
  border: 1px solid var(--hc-error-border);
  color: var(--hc-error);
}
.woocommerce-notices-wrapper .woocommerce-info {
  background: color-mix(in srgb, var(--hc-accent) 8%, var(--hc-white));
  border: 1px solid color-mix(in srgb, var(--hc-accent) 35%, transparent);
  color: var(--hc-accent-text);
}
.woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-notices-wrapper .woocommerce-error a,
.woocommerce-notices-wrapper .woocommerce-info a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce-notices-wrapper .woocommerce-error a:hover,
.woocommerce-notices-wrapper .woocommerce-info a:hover {
  color: var(--hc-accent-d);
}
.woocommerce-notices-wrapper .woocommerce-message a:hover {
  color: color-mix(in srgb, var(--hc-success) 80%, black);
}

@media (max-width: 991.98px) {
  .hc-cart-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .hc-cart-summary {
    position: static;
  }
}
@media (max-width: 575.98px) {
  .hc-cart-card {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "thumb body"
      "qty   qty"
      "price price";
    padding: 18px 40px 18px 16px;
    row-gap: 12px;
  }
  .hc-cart-card__thumb { grid-area: thumb; }
  /* Grid items default to min-width:auto, which floors their shrink at the
     content's intrinsic width — the finish/dims line was pushing the card
     wider than the viewport instead of wrapping. min-width:0 lets it shrink
     and wrap normally. */
  .hc-cart-card__body { grid-area: body; min-width: 0; }
  /* The remove "x" is absolutely positioned over the card's top-right corner,
     not inline in the grid, so it doesn't shrink the body column on its own
     — a long title's first line wrapped text right up against/under the
     button instead of clearing it. Reserving that width on the name itself
     makes the wrap happen before the button, not into it. */
  .hc-cart-card__name {
    display: block;
    padding-right: 34px;
  }
  /* qty and price used to share one row split 64px/1fr (matching the thumb
     column above them) — but the stepper itself (two 44px touch-target
     buttons + a 40px input, ~120px total once the touch-target fix above
     was applied) is wider than that 64px cell. justify-self:start let it
     render at its natural width instead of being clipped, which meant it
     visually overflowed right into the price cell and sat underneath the
     price text — the + button was there, just covered, so taps landed on
     the (non-interactive) price instead. Giving each its own full-width row
     removes any shared space for them to overlap into. */
  .hc-cart-card__qty { grid-area: qty; justify-self: start; }
  .hc-cart-card__price {
    grid-area: price;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
  .hc-order-summary__trust {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 14px;
  }
}
/* -/+ buttons are 30px square on desktop; bump to the ~44px touch-target
   minimum on any touch-sized viewport, not just narrow phones — the site's
   general mobile convention is 767px (see account nav/orders table/checkout
   below), and a 30px target between 576-767px (a large phone in portrait, or
   a small tablet) was still too small to reliably tap even though the click
   handler itself was always firing. */
@media (max-width: 767px) {
  .hc-qty__btn {
    flex-basis: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ─── 10b. Empty cart ─────────────────────────────────────────
   woocommerce/cart/cart-empty.php. Same card shell as .hc-cart-list
   (white, bordered, rounded) so the empty state reads as part of the
   same page instead of a bare notice.
   ──────────────────────────────────────────────────────────── */
.hc-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 72px 32px;
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
}
.hc-cart-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--hc-warm);
  color: var(--hc-accent);
}
.hc-cart-empty__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--hc-heading);
  margin: 0 0 6px;
}
.hc-cart-empty__body {
  max-width: 380px;
  font-size: var(--hc-text-md);
  color: var(--hc-muted);
  margin: 0 0 8px;
}
/* Core's wc_empty_cart_message() notice still fires (compatibility with
   any plugin hooking onto it), but our own title/body above already say
   the same thing — hide the default banner here rather than showing it
   twice. */
.hc-cart-empty .woocommerce-info {
  display: none !important;
}
.hc-cart-empty .return-to-shop {
  margin: 10px 0 0;
}
.hc-cart-empty__cta {
  padding: 12px 32px !important;
}

/* ─── Checkout Page ────────────────────────────────────────────
   Markup: woocommerce/checkout/form-checkout.php, form-shipping.php,
   payment.php, review-order.php, form-coupon.php (all theme overrides).
   Two-column layout mirrors the cart page: .hc-checkout-layout uses the
   same grid as .hc-cart-layout, and the Order Summary panel reuses
   .hc-order-summary (defined above, ── 10c). Card styling reuses
   .hc-cart-list's white/bordered pattern rather than redefining it.

   body.woocommerce-checkout — unlike Cart/Account, WooCommerce's own CSS
   is NOT dequeued here (Stripe's payment UI depends on it), so form-field
   rules still need !important to win the specificity fight against
   woocommerce-general.css.
   ──────────────────────────────────────────────────────────────── */

/* Returning-customer / coupon notice boxes, and Stripe's own inline
   validation error (submitError() in woocommerce-gateway-stripe/assets/
   js/stripe.js prepends a plain <ul class="woocommerce-error"> into
   form.checkout on failed card validation). Checkout is the one page
   that keeps woocommerce-general.css loaded (Stripe's payment UI needs
   it — see the dequeue list above), so core's own icon-reserving padding
   and absolutely-positioned ::before icon are still live here, unlike
   Cart/Account where dequeuing that stylesheet removes them outright.
   .woocommerce-error had no checkout override at all, so it fell through
   to core's rules unstyled: the ::before icon stayed absolutely
   positioned over the text instead of sitting in the padding core
   reserves for it, because nothing here was overriding that padding —
   same fix as .woocommerce-info below, just never ported to error. */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border-radius: var(--hc-r) !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  margin-bottom: 20px !important;
  list-style: none !important;
  border: 1px solid var(--hc-border) !important;
  background: var(--hc-warm) !important;
  color: var(--hc-body) !important;
}
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-message::before {
  display: none !important;
}
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-checkout .woocommerce-error a,
body.woocommerce-checkout .woocommerce-message a {
  color: var(--hc-accent) !important;
  font-weight: 600 !important;
}
/* Error needs its own red palette — the shared rule above defaults
   everything to the neutral/info warm background. Matches the red used
   for .single-product/.woocommerce-account errors elsewhere in this file. */
body.woocommerce-checkout .woocommerce-error {
  border: 1px solid var(--hc-error-border) !important;
  background: var(--hc-error-bg) !important;
  color: var(--hc-error) !important;
}
body.woocommerce-checkout .woocommerce-error a {
  color: var(--hc-error) !important;
  text-decoration: underline !important;
}
/* Success (e.g. "Coupon applied") uses the fixed green success token
   instead of the neutral warm background meant for .woocommerce-info —
   see the token comment in global.css for why success isn't tied to
   brand accent. */
body.woocommerce-checkout .woocommerce-message {
  border: 1px solid var(--hc-success-border) !important;
  background: var(--hc-success-bg) !important;
  color: var(--hc-success) !important;
}
body.woocommerce-checkout .woocommerce-message a {
  color: var(--hc-success) !important;
  text-decoration: underline !important;
}

.hc-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 32px;
}
.hc-checkout-summary {
  position: sticky;
  top: 84px;
}
@media (max-width: 991.98px) {
  .hc-checkout-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* .hc-checkout-main (the Shipping/Payment/Billing form) is first in DOM
     order, with .hc-checkout-summary after it — fine as a right-hand sidebar
     on desktop, but once the columns collapse to one that put the whole
     form, including Place Order, ahead of Order Summary instead of the
     summary appearing first. order:-1 reorders it visually rather than in
     markup, so tab order through the form fields is unaffected. */
  .hc-checkout-summary {
    position: static;
    order: -1;
  }
}

/* Card shell — same white/border/radius as .hc-cart-list. */
.hc-checkout-card {
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  padding: 26px;
  /* Unconditional top margin rather than a `+` adjacent-sibling rule:
     form-shipping.php wraps .hc-checkout-card--billing in a required
     core wrapper div (.woocommerce-shipping-fields, kept for plugin
     hook compatibility), so it is never a direct sibling of the card
     before it — an adjacent-sibling selector silently produced a 0px
     gap there. Zeroing it back out on the very first card below keeps
     the top of the column flush. */
  margin-top: 24px;
}
/* The literal first-child of form.hc-checkout-main isn't the first card —
   core prints a hidden div, <wc-order-attribution-inputs>, and a stray <p>
   before any markup this theme controls — so target the Shipping
   Information card by its own class instead of relying on DOM position. */
.hc-checkout-card--shipping {
  margin-top: 0;
}

/* Place Order button — its own full-width element after the last card
   (Billing Address), not nested inside the Payment card. #place_order.
   hc-place-order below carries the actual pill/gradient styling; this
   just gives the wrapper the same rhythm as the cards above it. */
.hc-checkout-place-order {
  margin-top: 24px;
}
.hc-checkout-card__title {
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  color: var(--hc-heading) !important;
  margin: 0 0 20px !important;
}

/* Core prints its own "Billing details" <h3> inside .woocommerce-billing-
   fields; hidden because form-checkout.php already prints
   .hc-checkout-card__title ("Shipping Information") for this card, and
   showing both would duplicate the heading. */
.hc-checkout-card--shipping .woocommerce-billing-fields > h3 {
  display: none;
}

/* Design has no Order Notes card — hidden rather than removed from the
   template so the field, its hooks and its data stay intact (see
   form-shipping.php). */
.hc-checkout-card--notes {
  display: none;
}

/* Group eyebrows printed by form-billing.php ("Contact" / "Delivery
   Address") — small uppercase labels between field clusters. Core's fields
   are float-based (.form-row-first/-last: float; .form-row-wide: clear:
   both — see woocommerce-layout.css), so these labels need the same
   clearfix behavior as a .form-row-wide sibling, or the float layout can
   place them oddly relative to the row they are meant to introduce. */
.hc-field-group-label {
  display: block;
  clear: both;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc-muted);
  margin: 0 0 4px;
}
.hc-field-group-label--spaced {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hc-border);
}

/* City / State / ZIP / Country as one 4-across row (hc-row-4, added via
   the woocommerce_checkout_fields filter in functions.php).
   WC_Countries::get_country_locale() hides State for some countries
   (Vietnam, Afghanistan — no state/province system WooCommerce ships
   data for) and Postcode for others (Chile, when the store's own base
   country is also Chile) — core's checkout.js toggles those rows to
   display:none on country change, so this row doesn't reliably have all
   four fields visible at once.
   This used to lay the four out with fixed 22.5%-wide floats and a fixed
   3.3% margin between each, sized on the assumption all four are always
   present. With one hidden, the fixed widths/margins no longer sum to
   100% of the row and float layout has no way to redistribute the gap:
   the remaining fields' boxes end up narrower than their content needs,
   so labels like "Postcode / ZIP" wrap awkwardly across two lines and the
   row reads as broken rather than as "this country has 3 fields, not 4"
   (see the bug this comment accompanies — Chile/Vietnam/Afghanistan).
   A flex row with each field set to grow proportionally fixes this
   directly: whatever's actually visible splits the row's width evenly,
   with no per-field-count math to keep in sync by hand. */
.woocommerce-billing-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.woocommerce-billing-fields__field-wrapper > :not(.hc-row-4) {
  /* Every non-address-row child (name fields, email, phone, address
     lines, the group-eyebrow labels) still needs to behave like a normal
     block-level row inside this now-flex wrapper. */
  flex: 1 1 100%;
}
.woocommerce-billing-fields__field-wrapper .form-row.hc-row-4 {
  flex: 1 1 0;
  min-width: 140px;
  width: auto !important;
  float: none !important;
  margin-right: 0 !important;
  clear: none !important;
}
.woocommerce-billing-fields__field-wrapper .form-row.hc-row-4 + .form-row.hc-row-4 {
  margin-left: 3.3% !important;
}

.woocommerce-checkout .form-row label {
  font-size: var(--hc-text-sm) !important;
  font-weight: 500 !important;
  color: var(--hc-body) !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select:not(.select2-hidden-accessible),
.woocommerce-checkout textarea {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1.5px solid transparent !important;
  border-radius: 10px !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  color: var(--hc-heading) !important;
  background: var(--hc-warm) !important;
  box-shadow: none !important;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline: none !important;
  border-color: var(--hc-accent) !important;
  background: var(--hc-surface) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc-accent) 12%, transparent) !important;
}
.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: #e57373 !important;
}
.woocommerce-checkout input[type="checkbox"] {
  accent-color: var(--hc-accent) !important;
  width: 16px !important;
  height: 16px !important;
}

/* Country/state selects — Select2 replaces the native <select> with its own widget */
.woocommerce-checkout .select2-container {
  width: 100% !important;
}
.woocommerce-checkout .select2-container .select2-selection--single {
  height: auto !important;
  border: 1.5px solid transparent !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  background: var(--hc-warm) !important;
}
.woocommerce-checkout
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 1.5 !important;
  color: var(--hc-heading) !important;
  padding: 0 20px 0 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}
.woocommerce-checkout
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 100% !important;
  right: 10px !important;
}

/* "Same as shipping address" checkbox row — see form-shipping.php for why
   this label reads from the billing side, and why its tick is painted in
   reverse of the input's real checked state. */
.hc-billing-same {
  margin: 0 0 20px !important;
}
.hc-billing-same label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  margin: 0 !important;
  font-size: var(--hc-text-sm) !important;
  font-weight: 500 !important;
  color: var(--hc-body) !important;
}

/* Reverse-painted tick: the underlying input's real on/off meaning to
   WooCommerce (checked = reveal .shipping_address, see checkout.js
   ship_to_different_address()) is untouched, but the design shows this
   box TICKED by default with fields collapsed — i.e. visually ticked
   should correspond to the input's UNCHECKED state here, and vice versa.
   appearance:none + a custom box lets the tick glyph be shown on
   :not(:checked) instead of :checked, so the paint matches the design
   without changing what "checked" means to WooCommerce or checkout.js. */
.hc-billing-same--reverse input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--hc-border);
  border-radius: 4px;
  background: var(--hc-surface);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}
.hc-billing-same--reverse input[type="checkbox"]:not(:checked) {
  background: var(--hc-accent);
  border-color: var(--hc-accent);
}
.hc-billing-same--reverse input[type="checkbox"]:not(:checked)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--hc-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hc-billing-same--reverse input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--hc-accent);
  outline-offset: 2px;
}
.shipping_address {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hc-border);
}

/* ─── Payment card ──────────────────────────────────────────────── */
/* Stripe's express-checkout element (Apple Pay / Google Pay / Link) is a
   Stripe-rendered iframe — Apple/Google's brand rules only allow Stripe's
   built-in button themes (dark/light/light-outline), not a custom brand
   color, and 'dark' is the only one with real contrast on this page's white
   card background. Wrapping it in the same warm tint used for the checkout
   notices above ties it to the palette without fighting Stripe's own
   contrast rules on the buttons themselves. */
#wc-stripe-express-checkout-element {
  padding: 16px;
  margin-bottom: 16px;
  border-radius: var(--hc-r-lg);
  background: var(--hc-warm);
  border: 1px solid var(--hc-border);
}
/* No eligible express-payment method (no Apple Pay/Google Pay/Link on this
   device, or Stripe hasn't finished mounting yet) leaves this element in the
   DOM but empty — collapse the padded/bordered box rather than showing a
   blank tile. Stripe injects its iframe as content, so :empty stops matching
   as soon as a button actually renders. */
#wc-stripe-express-checkout-element:empty {
  padding: 0;
  margin-bottom: 0;
  border: 0;
}

/* Core's woocommerce.css (still loaded on checkout — payment gateway UI
   depends on it) sets #payment { background: rgba(129,110,153,.14) }, a
   generic lavender tint from its default stylesheet. Also read by Stripe's
   own appearance-extraction script (which walks #payment among other
   selectors to auto-theme the Payment Element) — that odd rgba is the
   exact value Stripe's console warning flags as invalid for colorBackground,
   so clearing it here fixes both the visible tint and what Stripe reads. */
#payment {
  background: transparent !important;
  border-radius: 0 !important;
}
.hc-pay-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.hc-pay-tab {
  padding: 10px 20px;
  border-radius: var(--hc-r);
  border: 1.5px solid var(--hc-border);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--hc-muted);
  background: var(--hc-surface);
}
.hc-pay-tab--active {
  background: var(--hc-dark);
  border-color: var(--hc-dark);
  color: var(--hc-white);
}
.hc-pay-tab--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: var(--hc-bg);
  border-style: dashed;
}
.hc-pay-tab--disabled::after {
  content: "Soon";
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--hc-border);
  color: var(--hc-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

ul.payment_methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Only one real gateway is active, so its own radio/label row (core markup,
   see woocommerce/checkout/payment-method.php) is visually folded into the
   card rather than shown as a second selectable list under the tabs above. */
ul.payment_methods li.wc_payment_method {
  border: none !important;
  padding: 0 !important;
}
ul.payment_methods li.wc_payment_method > input.input-radio,
ul.payment_methods li.wc_payment_method > label {
  display: none !important;
}
.payment_box {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--hc-muted) !important;
}
/* Stripe's own embedded card element (cross-origin iframe) can't be
   restyled field-by-field like the design's 4 separate inputs — themed via
   Stripe's Appearance API instead (assets/js/checkout.js) so its colors,
   font and radius blend in; the field grouping stays whatever Stripe's
   Payment Element renders. */
.wc-stripe-upe-element {
  padding: 12px 14px !important;
  border: 1.5px solid var(--hc-border) !important;
  border-radius: var(--hc-r) !important;
  background: var(--hc-surface) !important;
}

.hc-pay-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--hc-r);
  background: color-mix(in srgb, var(--hc-accent) 8%, var(--hc-bg));
  font-size: var(--hc-text-xs);
  color: var(--hc-muted);
}
.hc-pay-secure svg {
  color: var(--hc-accent);
  flex-shrink: 0;
}

.woocommerce-terms-and-conditions-wrapper,
.woocommerce-privacy-policy-text {
  font-size: 13px !important;
  color: var(--hc-muted) !important;
  margin-top: 20px !important;
}
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a {
  color: var(--hc-accent) !important;
}

/* Place order button — matches the cart's "Continue to Shipping" CTA. */
#place_order.hc-place-order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 15px 24px !important;
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--hc-accent) 55%, #fff) 0%,
    color-mix(in srgb, var(--hc-accent) 88%, #fff) 55%,
    var(--hc-accent) 100%
  ) !important;
  background-color: var(--hc-accent) !important;
  color: var(--hc-dark) !important;
  border: none !important;
  border-radius: var(--hc-btn-r) !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: filter 0.18s !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}
#place_order.hc-place-order::after {
  content: "\2192";
  font-size: 16px;
  line-height: 1;
}
#place_order.hc-place-order:hover {
  filter: brightness(1.05);
}
#place_order.hc-place-order.disabled,
#place_order.hc-place-order:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* ─── Order Confirmation (thank-you) page ─────────────────────────
   woocommerce/checkout/thankyou.php, woocommerce/order/order-details.php,
   order-details-item.php, order-details-customer.php. */

/* Core's own plain-text notice (order-received.php) is still rendered —
   see thankyou.php's docblock for why — just hidden here rather than
   skipped, so any plugin filtering woocommerce_thankyou_order_received_text
   still runs. */
.woocommerce-thankyou-order-received {
  display: none;
}

.hc-order-hero {
  /* Full-bleed to the viewport edge, breaking out of main#main's own
     centred max-width (see .hc-order-layout above), via the standard
     "left: 50%, margin-left: -50vw" block-level breakout — not the
     mega-menu panel's technique (global.css), which only works for an
     absolutely-positioned element anchored with left: 50%; this is a
     normal block, so it needs its own position: relative + left: 50% to
     make that math correct. Plain 100vw still overflows by the
     scrollbar's width, so --hc-sbw (measured in JS by mega-menu.js,
     loaded site-wide) is subtracted the same way that panel does. */
  position: relative;
  left: 50%;
  width: calc(100vw - var(--hc-sbw, 0px));
  margin-left: calc(-50vw + (var(--hc-sbw, 0px) / 2));
  /* body.woocommerce-page main#main has padding-top: 48px (shop.css line
     ~154) for every other WooCommerce page's content — this hero is meant
     to sit flush against the header instead, so its own negative top
     margin cancels that padding out. */
  margin-top: -48px;
  background: linear-gradient(160deg, var(--hc-dark) 0%, var(--hc-dark2) 100%);
  padding: 56px 24px 64px;
  text-align: center;
}
.hc-order-hero__inner {
  max-width: 620px;
  margin: 0 auto;
}
.hc-order-hero__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--hc-accent);
  color: var(--hc-accent);
  margin-bottom: 20px;
}
.hc-order-hero__eyebrow {
  display: block;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-accent);
  margin-bottom: 14px;
}
.hc-order-hero__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 500;
  color: var(--hc-white);
  margin: 0 0 16px;
}
.hc-order-hero__title em {
  color: var(--hc-accent);
  font-style: italic;
}
.hc-order-hero__subtext {
  font-size: var(--hc-text-md);
  line-height: 1.6;
  color: color-mix(in srgb, var(--hc-white) 78%, transparent);
  margin: 0 0 36px;
}
.hc-order-hero__stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--hc-white) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--hc-white) 14%, transparent);
  border-radius: var(--hc-r-lg);
  padding: 22px 32px;
}
.hc-order-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.hc-order-hero__stat-label {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--hc-white) 60%, transparent);
}
.hc-order-hero__stat-value {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem;
  color: var(--hc-white);
}

/* ─── Order Details section (below the hero) ─────────────────────── */
/* No max-width/padding/auto-margin here — body.woocommerce-page main#main
   (shop.css line ~154) already centers and insets every WooCommerce page's
   content, checkout/order-received included. Adding another layer here
   double-padded the page's left/right edges. */
.hc-order-heading {
  margin: 48px 0 24px;
}
.hc-order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 32px;
  margin: 0 0 64px;
}
.hc-order-addresses {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hc-order-items-card {
  overflow-x: auto;
}
.hc-order-items-table {
  width: 100%;
  border-collapse: collapse;
  /* Auto layout sizes columns from content — a long product name (e.g.
     '14"x21" Roll Out tray, Fits 18"W Cabinet - Onyx Black') then eats
     into the price column's width until the price itself wraps onto its
     own line below the name. Fixed layout + an explicit price-column
     width keeps the price pinned to the right at a stable width
     regardless of how long the name gets; the name column just wraps
     instead (which it already handles fine). */
  table-layout: fixed;
}
/* table-layout:fixed reads column widths from the <col>s in order-details.php's
   colgroup, not from any width set on the th/td themselves — the phone-width
   media query below narrows this one class instead of the cell rules further
   down, which table-layout:fixed would otherwise ignore. */
.hc-order-items-table__total-col {
  width: 120px;
}
.hc-order-items-table thead th {
  text-align: left;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hc-muted);
  padding: 0 0 14px;
  border-bottom: 1px solid var(--hc-border);
}
.hc-order-items-table thead th.product-total {
  text-align: right;
}
.hc-order-items-table tbody tr.hc-order-item {
  border-bottom: 1px solid var(--hc-border);
}
.hc-order-items-table tbody tr.hc-order-item:last-child {
  border-bottom: none;
}
.hc-order-items-table td {
  padding: 18px 0;
  vertical-align: top;
}
.hc-order-items-table td.product-name {
  width: auto;
  word-break: break-word;
}
.hc-order-items-table td.product-total {
  text-align: right;
  white-space: nowrap;
}
/* .hc-order-item is the <tr> class (order-details-item.php); the inner
   flex wrapper is .hc-order-item__row, a distinct name on purpose —
   display:flex here previously also matched the <tr> itself (same class
   name reused on both elements), which pulled that row out of table
   layout and broke its column widths relative to every other row. */
.hc-order-item__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.hc-order-item__thumb-wrap {
  flex-shrink: 0;
}
.hc-order-item__thumb-wrap img {
  width: 56px;
  height: 56px;
  border-radius: var(--hc-r);
  object-fit: cover;
  border: 1px solid var(--hc-border);
}
.hc-order-item__info {
  /* Flex items default to min-width:auto, which floors shrinking at the
     content's min-content width — with overflow-wrap:break-word inherited
     from the parent td (global.css), every character becomes a valid break
     point, so min-content collapses toward zero and the name wraps one or
     two letters per line instead of at the column's actual width. flex:1
     makes this column claim the row's remaining width (after the 56px
     thumb) and min-width:0 lets it shrink to that instead of to min-content. */
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hc-order-item__name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--hc-text-md);
  font-weight: 500;
  color: var(--hc-heading);
}
.hc-order-item__name a {
  color: inherit;
  text-decoration: none;
}
.hc-order-item__name a:hover {
  text-decoration: underline;
}
.hc-order-item__name .product-quantity {
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
}
.hc-order-item__finish,
.hc-order-item__dims {
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
}
.hc-order-item__linetotal {
  display: block;
  font-weight: 600;
  color: var(--hc-heading);
}
.hc-order-item__unit {
  display: block;
  font-size: var(--hc-text-xs);
  color: var(--hc-muted);
  margin-top: 2px;
}
.hc-order-items-table tfoot th,
.hc-order-items-table tfoot td {
  padding: 12px 0;
  border-top: 1px solid var(--hc-border);
  font-weight: 400;
  color: var(--hc-body);
}
.hc-order-items-table tfoot td {
  text-align: right;
}
.hc-order-items-table tfoot tr.hc-order-total-row--total th,
.hc-order-items-table tfoot tr.hc-order-total-row--total td {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--hc-heading);
}
.hc-order-items-table tfoot tr.hc-order-total-row--total td {
  color: var(--hc-accent);
}
.hc-order-action {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1.5px solid var(--hc-border);
  border-radius: var(--hc-btn-r);
  background: var(--hc-surface);
  color: var(--hc-body);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-sm);
  font-weight: 600;
  text-decoration: none;
}
.hc-order-action:hover {
  border-color: var(--hc-accent);
  color: var(--hc-accent);
}

.hc-order-address-card + .hc-order-address-card {
  margin-top: 24px;
}
.hc-order-address-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hc-order-address-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: var(--hc-text-sm);
}
.hc-order-address-row__label {
  color: var(--hc-muted);
  flex-shrink: 0;
}
.hc-order-address-row__value {
  color: var(--hc-heading);
  font-weight: 500;
  text-align: right;
  /* Flex items default to min-width:auto, which floors their shrink at the
     content's own intrinsic width — a long concatenated address (street +
     suite + city/state/zip, see order-details-customer.php) had nowhere to
     wrap and pushed the row past the card's edge. min-width:0 + wrap lets
     it break onto multiple lines like any other text instead. */
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 900px) {
  .hc-order-layout {
    grid-template-columns: 1fr;
  }
}

/* Even with .hc-order-layout down to a single column above, the item row
   still splits its width three ways — card padding, the 56px thumbnail,
   and the fixed 120px price column — leaving as little as ~35-40px for the
   product name on a phone screen, which wrapped one letter per line. The
   cart card (.hc-cart-card, above) hits the same squeeze and solves it by
   stacking the thumbnail above the text instead of beside it; same fix
   here, at the same 575px breakpoint. */
@media (max-width: 575.98px) {
  .hc-order-item__row {
    flex-wrap: wrap;
  }
  .hc-order-item__info {
    flex-basis: 100%;
  }
  /* Stacking the thumbnail (above) frees up the row's width for text, but
     the table itself was still only as wide as .hc-checkout-card's 26px
     side padding left it — not enough for "PRODUCT" (letter-spaced,
     uppercase) or "Subtotal"/"Shipping" (this table's tfoot th labels) to
     fit the fixed 120px price column's leftover space on one line.
     Narrowing both the card's padding and the price column on phones
     gives every label room without changing anything above 575px. */
  .hc-order-items-card {
    padding: 16px;
  }
  .hc-order-items-table__total-col {
    width: 90px;
  }
}

/* main#main's own padding-top drops to 36px below 860px (shop.css, the
   body.woocommerce-page main#main media query) — .hc-order-hero's
   cancelling negative margin needs to match, or a gap reopens between
   the header and the hero. This has to come after .hc-order-hero's own
   base rule in source order to actually win: same specificity (one
   class), so the later rule applies regardless of the media query's
   position in the file. */
@media (max-width: 860px) {
  .hc-order-hero {
    margin-top: -36px;
  }
}

/* ─── 11. My Account – Login / Register ──────────────────────
   Styles for the themed form-login.php override. All form
   controls use Bootstrap classes; these supplement only what
   Bootstrap does not cover.
   ──────────────────────────────────────────────────────────── */

/* Suppress the product-card hover lift on static auth forms */
.hc-auth-card {
  box-shadow: var(--hc-sh-md);
}
.hc-auth-card:hover {
  transform: none;
  box-shadow: var(--hc-sh-md);
}

/* Serif heading inside each card */
.hc-auth-heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--hc-heading);
  line-height: 1.2;
}

/* Muted description lines */
.hc-auth-sub {
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
  line-height: 1.6;
}

/* Divider shown only when Login/Register stack (below lg — see the d-lg-none
   column in form-login.php) so two full-height cards in a row don't read as
   one long undifferentiated form. */
.hc-auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--hc-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hc-auth-divider::before,
.hc-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hc-border);
}

/* "Lost your password?" and similar inline links */
.hc-auth-link {
  font-size: var(--hc-text-sm);
  color: var(--hc-accent);
  text-decoration: none;
  transition: color 0.15s;
}
.hc-auth-link:hover {
  color: var(--hc-accent-d);
  text-decoration: underline;
}

/* WooCommerce notices on the single product page (e.g. the review
   validation error) and the account page — same treatment as the cart
   page's notices above. Success leans on --hc-accent/--hc-accent-text
   rather than --hc-dark: that token is a near-black utility fill on every
   palette preset (also backs the announcement bar and primary buttons),
   so it reads as plain black instead of a themed color when used for a
   border/ring. Error uses the fixed --hc-error red, matching the cart
   page. Success uses the fixed --hc-success green rather than brand
   accent — see the token comment in global.css: on most palette presets
   the accent isn't green, so a success message tinted with it looked too
   close to the red error state to tell apart at a glance. */
.single-product .woocommerce-error,
.single-product .woocommerce-message,
.single-product .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
  padding: 14px 18px !important;
  border-radius: var(--hc-r) !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  margin-bottom: 24px !important;
  list-style: none !important;
  border: none !important;
}
.single-product .woocommerce-error::before,
.single-product .woocommerce-message::before,
.single-product .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before {
  display: none !important;
}
.single-product .woocommerce-error:focus,
.single-product .woocommerce-message:focus,
.single-product .woocommerce-info:focus,
.woocommerce-account .woocommerce-error:focus,
.woocommerce-account .woocommerce-message:focus,
.woocommerce-account .woocommerce-info:focus {
  /* transparent, not removed: WooCommerce's own JS calls .focus() on these
     on page load for screen readers, so the outline property needs to
     stay — it just shouldn't be visible for a focus nothing actually
     navigated to by keyboard. See the same fix's rationale at shop.css's
     .woocommerce-notices-wrapper rule above. */
  outline: 2px solid transparent !important;
  outline-offset: 2px;
}
.single-product .woocommerce-error,
.woocommerce-account .woocommerce-error {
  background: var(--hc-error-bg) !important;
  border-left: 4px solid var(--hc-error-border) !important;
  color: var(--hc-error) !important;
}
.single-product .woocommerce-message,
.woocommerce-account .woocommerce-message {
  background: var(--hc-success-bg) !important;
  border-left: 4px solid var(--hc-success) !important;
  color: var(--hc-success) !important;
}
.single-product .woocommerce-info,
.woocommerce-account .woocommerce-info {
  background: var(--hc-warm) !important;
  border-left: 4px solid var(--hc-accent) !important;
  color: var(--hc-heading) !important;
}
.single-product .woocommerce-error a,
.single-product .woocommerce-message a,
.single-product .woocommerce-info a,
.woocommerce-account .woocommerce-error a,
.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-info a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.single-product .woocommerce-error a:hover,
.single-product .woocommerce-info a:hover,
.woocommerce-account .woocommerce-error a:hover,
.woocommerce-account .woocommerce-info a:hover {
  color: var(--hc-accent-d);
}
.single-product .woocommerce-message a:hover,
.woocommerce-account .woocommerce-message a:hover {
  color: color-mix(in srgb, var(--hc-success) 80%, black);
}

/* Dashboard overview text */
.hc-account-content .woocommerce-MyAccount-content > p:first-child {
  font-size: 15px;
  color: var(--hc-body);
  margin-bottom: 1.25rem;
}

/* Address section columns */
.hc-account-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.hc-account-content .woocommerce-Address {
  background: var(--hc-bg);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r);
  padding: 20px;
}
.hc-account-content .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hc-account-content .woocommerce-Address-title h3 {
  font-size: 0.95rem;
  margin-bottom: 0;
}
.hc-account-content address {
  font-style: normal;
  font-size: 14px;
  color: var(--hc-body);
  line-height: 1.7;
}
@media (max-width: 575px) {
  .hc-account-content .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}

/* ─── Account Dashboard (logged-in) ──────────────────────────
   Sidebar nav + content card layout.
   ──────────────────────────────────────────────────────────── */

/* Outer wrap — vertical breathing room */
.hc-account-wrap {
  padding: 56px 0 72px;
}

/* Page header row — greeting */
.hc-account-header {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hc-border);
  margin-bottom: 0;
}

/* Sidebar nav card */
.hc-account-nav {
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  padding: 8px;
  box-shadow: var(--hc-sh);
}

/* Nav header — avatar + name/email, mirrors the header dropdown but larger */
.hc-account-nav__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--hc-border);
}
.hc-account-nav__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hc-accent);
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
}
.hc-account-nav__head-info {
  min-width: 0;
}
.hc-account-nav__name {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--hc-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-account-nav__email {
  font-size: 12px;
  color: var(--hc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hc-account-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hc-account-nav li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--hc-r);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--hc-body);
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.hc-account-nav__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--hc-muted);
  transition: color 0.15s;
}
.hc-account-nav li a:hover {
  background: var(--hc-warm);
  color: var(--hc-heading);
}
.hc-account-nav li a:hover .hc-account-nav__icon {
  color: var(--hc-accent);
}
.hc-account-nav li.is-active a {
  background: var(--hc-accent);
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark);
}
.hc-account-nav li.is-active a .hc-account-nav__icon {
  color: var(--hc-dark);
}
.hc-account-nav li.is-active a:hover {
  background: var(--hc-accent-d);
  color: var(--hc-white);
}

/* Sign-out — separated + red-tinted, like the header dropdown's logout item */
.hc-account-nav__foot {
  border-top: 1px solid var(--hc-border);
  margin-top: 6px;
  padding-top: 6px;
}
.hc-account-nav__logout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--hc-r);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #dc2626;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.hc-account-nav__logout .hc-account-nav__icon {
  color: #dc2626;
}
.hc-account-nav__logout:hover {
  background: #fef2f2;
  color: #b91c1c;
}

/* Main content card */
.hc-account-content {
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  padding: 28px 32px;
}

/* Typography inside the content card */
.hc-account-content p {
  font-size: 15px;
  color: var(--hc-body);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.hc-account-content a {
  color: var(--hc-accent);
  text-decoration: none;
  transition: color 0.15s;
}
.hc-account-content a:hover {
  color: var(--hc-accent-d);
  text-decoration: underline;
}
.hc-account-content h2,
.hc-account-content h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  color: var(--hc-heading);
  margin-bottom: 1rem;
}
.hc-account-content h2 {
  font-size: 1.35rem;
}
.hc-account-content h3 {
  font-size: 1.1rem;
}

/* Orders table inside the content card */
.hc-account-content .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  border: 1px solid var(--hc-border) !important;
  border-radius: var(--hc-r) !important;
  overflow: hidden;
}
.hc-account-content .woocommerce-orders-table thead tr {
  background: var(--hc-warm);
}
.hc-account-content .woocommerce-orders-table thead th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hc-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--hc-border);
  text-align: left;
}
.hc-account-content .woocommerce-orders-table tbody tr {
  border-bottom: 1px solid var(--hc-border);
  transition: background 0.12s;
}
.hc-account-content .woocommerce-orders-table tbody tr:last-child {
  border-bottom: none;
}
.hc-account-content .woocommerce-orders-table tbody tr:hover {
  background: var(--hc-bg);
}
.hc-account-content .woocommerce-orders-table td,
.hc-account-content .woocommerce-orders-table th[scope="row"] {
  padding: 14px 16px;
  vertical-align: middle;
  color: var(--hc-body);
  border: none;
}
.hc-account-content .woocommerce-orders-table .woocommerce-button.button {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: transparent;
  color: var(--hc-accent);
  border: 1.5px solid var(--hc-accent);
  border-radius: var(--hc-btn-r);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.hc-account-content .woocommerce-orders-table .woocommerce-button.button:hover {
  background: var(--hc-accent);
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark);
}
/* Core's orders.php prints each action (View, Cancel, Pay, …) as a bare
   sibling <a> directly inside the cell, with no wrapping element and no
   gap between them — on a narrow cell (mobile, where the table scrolls
   horizontally) the buttons sat flush against each other and overlapped.
   The cell itself is the only available flex container. */
.hc-account-content .woocommerce-orders-table__cell-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ─── Address edit form ─────────────────────────────────────── */
.hc-address-form__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hc-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.hc-address-form__back:hover {
  color: var(--hc-accent);
}

/* Field wrapper: two-column flex grid */
.woocommerce-address-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.woocommerce-address-fields__field-wrapper .form-row {
  flex: 1 1 100%;
  margin-bottom: 1rem;
}
.woocommerce-address-fields__field-wrapper .form-row-first,
.woocommerce-address-fields__field-wrapper .form-row-last {
  flex: 1 1 calc(50% - 10px);
  min-width: 180px;
}

/* Labels — required asterisk in amber */
.woocommerce-address-fields label .required,
.hc-account-content .woocommerce-EditAccountForm label .required {
  color: var(--hc-accent);
  text-decoration: none;
}

/* Validation states */
.woocommerce-address-fields .form-row.woocommerce-invalid input.input-text,
.woocommerce-address-fields .form-row.woocommerce-invalid select {
  border-color: #ef4444 !important;
}
.woocommerce-address-fields .form-row .woocommerce-error {
  display: block;
  font-size: 12px;
  color: #b91c1c;
  margin-top: 4px;
}

/* WooCommerce's country/state selects — hide the native select when JS enhanced */
.woocommerce-address-fields .select2-container {
  width: 100% !important;
}
.woocommerce-address-fields .select2-container .select2-selection--single {
  height: auto !important;
  border: 1.5px solid var(--hc-border) !important;
  border-radius: var(--hc-r) !important;
  padding: 9px 14px !important;
}
.woocommerce-address-fields
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 1.5 !important;
  color: var(--hc-heading) !important;
  padding: 0 !important;
}
.woocommerce-address-fields
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 100% !important;
  right: 10px !important;
}

/* Submit button (WC class .button on the save button) */
.hc-account-content .woocommerce-Button.button,
.hc-account-content button[type="submit"].button,
.hc-address-form button[type="submit"].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  background: var(--hc-accent) !important;
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark) !important;
  border: 1.5px solid var(--hc-accent) !important;
  border-radius: var(--hc-btn-r) !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  text-decoration: none !important;
  transition:
    background 0.18s,
    border-color 0.18s !important;
}
.hc-account-content .woocommerce-Button.button:hover,
.hc-account-content button[type="submit"].button:hover,
.hc-address-form button[type="submit"].button:hover {
  background: var(--hc-accent-d) !important;
  border-color: var(--hc-accent-d) !important;
}

@media (max-width: 575px) {
  .woocommerce-address-fields__field-wrapper .form-row-first,
  .woocommerce-address-fields__field-wrapper .form-row-last {
    flex: 1 1 100%;
  }
}

/* ─── Add payment method form ───────────────────────────────── */
.hc-payment-form {
  max-width: 540px;
}
.hc-payment-methods {
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  overflow: hidden;
}
.hc-payment-method {
  border-bottom: 1px solid var(--hc-border);
}
.hc-payment-method:last-child {
  border-bottom: none;
}
/* Radio is a sibling before the label — visually hidden but physically 1×1 so
   jQuery's :visible check (used by WC's payment-box slideDown trigger) returns true */
.hc-payment-method__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hc-payment-method__label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  color: var(--hc-heading);
  transition: background 0.15s;
}
.hc-payment-method__label::before {
  content: "";
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border: 2px solid var(--hc-border);
  border-radius: 50%;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.hc-payment-method__radio:checked + .hc-payment-method__label::before {
  border-color: var(--hc-accent);
  background: radial-gradient(circle, var(--hc-accent) 45%, transparent 46%);
}
.hc-payment-method__label:hover {
  background: var(--hc-bg);
}
.hc-payment-method__icon {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hc-payment-method__icon img {
  height: 22px;
  width: auto;
}
.hc-payment-method__fields {
  padding: 16px 18px;
  background: var(--hc-bg);
  border-top: 1px solid var(--hc-border);
}
/* Gateway-injected fields inherit HC form styles via the form-control filter */
.hc-payment-method__fields p {
  margin-bottom: 1rem;
}
.hc-payment-method__fields label {
  font-size: var(--hc-text-sm);
  font-weight: 500;
  color: var(--hc-body);
  margin-bottom: 5px;
  display: block;
}
.hc-payment-method__fields input[type="text"],
.hc-payment-method__fields input[type="tel"],
.hc-payment-method__fields input[type="number"] {
  display: block;
  width: 100%;
  border: 1.5px solid var(--hc-border);
  border-radius: var(--hc-r);
  font-size: 15px;
  padding: 10px 14px;
  color: var(--hc-heading);
  background: var(--hc-surface);
}
.hc-payment-method__fields input:focus {
  border-color: var(--hc-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc-accent) 12%, transparent);
}

/* ─── Dashboard overview ───────────────────────────────────── */
.hc-dashboard__welcome {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--hc-warm);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  padding: 20px 24px;
  margin-bottom: 4px;
}
.hc-dashboard__welcome-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--hc-surface);
  color: var(--hc-accent);
  flex-shrink: 0;
}
.hc-dashboard__welcome-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--hc-heading);
  margin-bottom: 4px;
}
.hc-dashboard__welcome-sub {
  font-size: 14px;
  color: var(--hc-muted);
  margin-bottom: 0;
  line-height: 1.5;
}
@media (max-width: 575px) {
  .hc-dashboard__welcome {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}
.hc-dashboard__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--hc-bg);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  padding: 20px 18px;
  text-decoration: none;
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
  height: 100%;
}
/* .hc-account-content a:hover (below) sets text-decoration: underline for
   plain text links in account content, and beats this rule on specificity
   (it matches the `a` element too: 0,2,1 vs this class-only rule's 0,2,0)
   despite coming first in the file — so the dashboard cards need their own
   higher-specificity hover rule, not just this one, to keep the underline
   off. */
.hc-account-content a.hc-dashboard__card:hover,
.hc-dashboard__card:hover {
  border-color: var(--hc-accent);
  box-shadow: var(--hc-sh-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.hc-dashboard__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hc-warm);
  color: var(--hc-accent);
  margin-bottom: 4px;
  flex-shrink: 0;
}
.hc-dashboard__card-title {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--hc-heading);
}
.hc-dashboard__card-desc {
  font-size: 13px;
  color: var(--hc-muted);
  line-height: 1.5;
}

/* ─── Sub-page section headings ────────────────────────────── */
.hc-account-section-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--hc-heading);
  margin-bottom: 6px;
}
.hc-account-section-desc {
  font-size: 14px;
  color: var(--hc-muted);
  margin-bottom: 24px;
}

/* ─── Address cards ─────────────────────────────────────────── */
.hc-address-card {
  background: var(--hc-bg);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  padding: 20px 22px;
  height: 100%;
}
.hc-address-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hc-border);
}
.hc-address-card__title {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--hc-heading);
  margin: 0;
}
.hc-address-card__edit {
  font-size: 13px;
  font-weight: 500;
  color: var(--hc-accent);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.hc-address-card__edit:hover {
  color: var(--hc-accent-d);
  text-decoration: underline;
}
.hc-address-card__body {
  font-style: normal;
  font-size: 14px;
  color: var(--hc-body);
  line-height: 1.7;
  margin: 0;
}
.hc-address-card__empty {
  font-size: 13px;
  color: var(--hc-muted);
  font-style: italic;
}

/* ─── Account details fieldset ──────────────────────────────── */
.hc-fieldset {
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  padding: 22px 22px 18px;
}
.hc-fieldset__legend {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--hc-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 10px;
  float: none;
  width: auto;
}

/* ─── Orders: responsive overflow + status chips + pagination ── */
@media (max-width: 767px) {
  .hc-account-content .woocommerce-orders-table {
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
  }
}
.woocommerce-orders-table__cell-order-number a {
  font-weight: 600;
  color: var(--hc-heading);
}
.hc-order-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.woocommerce-orders-table__row--status-completed .hc-order-status-badge {
  color: #2d7a36;
  background: #e7f5ea;
}
.woocommerce-orders-table__row--status-processing .hc-order-status-badge {
  color: #1a6fad;
  background: #e8f2fa;
}
.woocommerce-orders-table__row--status-pending .hc-order-status-badge,
.woocommerce-orders-table__row--status-on-hold .hc-order-status-badge {
  color: #8a6900;
  background: #fbf3d9;
}
.woocommerce-orders-table__row--status-cancelled .hc-order-status-badge,
.woocommerce-orders-table__row--status-failed .hc-order-status-badge {
  color: #b91c1c;
  background: #fbe9e9;
}
.hc-account-content .woocommerce-pagination {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.hc-account-content .woocommerce-Button--previous,
.hc-account-content .woocommerce-Button--next {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hc-accent);
  border: 1.5px solid var(--hc-accent);
  border-radius: var(--hc-r);
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.hc-account-content .woocommerce-Button--previous:hover,
.hc-account-content .woocommerce-Button--next:hover {
  background: var(--hc-accent);
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark);
}

/* ─── Single order view (view-order.php) ───────────────────────
   "Order # was placed on..." summary line, line-items table,
   and billing address — all bare/unstyled by default.
   ──────────────────────────────────────────────────────────── */
.hc-account-content mark {
  background: none;
  color: var(--hc-heading);
  font-weight: 600;
}
.hc-account-content .woocommerce-order-details__title,
.hc-account-content .woocommerce-column__title {
  margin-top: 28px;
}
.hc-account-content .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r);
  overflow: hidden;
}
.hc-account-content .woocommerce-table--order-details thead tr {
  background: var(--hc-warm);
}
.hc-account-content .woocommerce-table--order-details thead th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hc-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--hc-border);
  text-align: left;
}
.hc-account-content .woocommerce-table--order-details tbody td,
.hc-account-content .woocommerce-table--order-details tfoot th,
.hc-account-content .woocommerce-table--order-details tfoot td {
  padding: 14px 16px;
  color: var(--hc-body);
  border-top: 1px solid var(--hc-border);
}
.hc-account-content .woocommerce-table--order-details .product-total,
.hc-account-content .woocommerce-table--order-details tfoot td {
  text-align: right;
}
.hc-account-content .woocommerce-table--order-details tfoot th {
  text-align: left;
  font-weight: 500;
}
.hc-account-content .woocommerce-table--order-details tfoot tr:last-child th,
.hc-account-content .woocommerce-table--order-details tfoot tr:last-child td {
  font-weight: 700;
  color: var(--hc-heading);
}
.hc-account-content p.order-again {
  margin-top: 16px;
}
.hc-account-content p.order-again .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  background: var(--hc-accent);
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark);
  border: 1.5px solid var(--hc-accent);
  border-radius: var(--hc-btn-r);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.18s,
    border-color 0.18s;
}
.hc-account-content p.order-again .button:hover {
  background: var(--hc-accent-d);
  border-color: var(--hc-accent-d);
}

/* ─── Order line item: thumbnail + vendor ──────────────────────
   Bootstrap's d-flex/gap utilities handle the layout in the
   template; only the fixed thumbnail sizing needs custom CSS. */
.hc-order-item__thumb-wrap img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--hc-r);
  border: 1px solid var(--hc-border);
}
.hc-order-item__vendor {
  margin-top: 4px;
}

/* ─── Return request ────────────────────────────────────────── */
.hc-return-request {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hc-border);
}
.hc-return-request textarea.form-control {
  max-width: 480px;
}
.hc-return-request__status {
  margin-top: 28px;
  padding: 14px 16px;
  background: var(--hc-warm);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r);
  color: var(--hc-body);
}

.hc-account-content .woocommerce-customer-details {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hc-border);
}
/* Billing + shipping side-by-side layout. WooCommerce's own template
   classes here are "col-1"/"col-2" — same names Bootstrap uses for grid
   columns (width: 8.33%/16.67%), so without this override the address
   boxes get squeezed down to a sliver and the text wraps one word per line. */
.hc-account-content .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
}
.hc-account-content .woocommerce-columns--addresses .woocommerce-column {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}
@media (max-width: 575px) {
  .hc-account-content .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
  }
}
.hc-account-content .woocommerce-customer-details address {
  background: var(--hc-bg);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r);
  padding: 16px 18px;
}
.hc-account-content .woocommerce-customer-details--email,
.hc-account-content .woocommerce-customer-details--phone {
  margin-bottom: 0;
  margin-top: 8px;
  font-size: 13px;
  color: var(--hc-muted);
}

/* ─── Downloads table ───────────────────────────────────────── */
.hc-account-content .woocommerce-table--downloads {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r);
  overflow: hidden;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hc-account-content .woocommerce-table--downloads thead tr {
  background: var(--hc-warm);
}
.hc-account-content .woocommerce-table--downloads thead th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hc-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--hc-border);
  text-align: left;
  white-space: nowrap;
}
.hc-account-content .woocommerce-table--downloads tbody tr {
  border-bottom: 1px solid var(--hc-border);
}
.hc-account-content .woocommerce-table--downloads tbody tr:last-child {
  border-bottom: none;
}
.hc-account-content .woocommerce-table--downloads td {
  padding: 13px 16px;
  vertical-align: middle;
  color: var(--hc-body);
}
.hc-account-content
  .woocommerce-table--downloads
  .woocommerce-MyAccount-downloads-file
  a {
  font-weight: 500;
  color: var(--hc-accent);
}

/* ─── Payment methods table ─────────────────────────────────── */
.hc-account-content .woocommerce-MyAccount-paymentMethods {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r);
  overflow: hidden;
}
/* Below 575px a real table has nowhere to put four columns (Method/Expires/
   Default/Actions) without either crushing the Method cell — often a full
   email address for Stripe Link — or relying on horizontal scroll, which
   isn't discoverable (no visible scrollbar affordance) and just clips text
   mid-word at the viewport edge. Instead, each row becomes its own
   card: cells stack full-width, headers are hidden (thead's whole row, not
   just the th's, since these are <span class="nobr"> — hiding them
   individually left the nobr's borders/margins behind) and re-labelled via
   the td's own data-title (core's payment-methods.php already sets this
   per cell for the shop_table_responsive convention). */
@media (max-width: 575.98px) {
  .hc-account-content .woocommerce-MyAccount-paymentMethods thead {
    display: none;
  }
  .hc-account-content .woocommerce-MyAccount-paymentMethods,
  .hc-account-content .woocommerce-MyAccount-paymentMethods tbody,
  .hc-account-content .woocommerce-MyAccount-paymentMethods tr,
  .hc-account-content .woocommerce-MyAccount-paymentMethods td {
    display: block;
    width: auto;
  }
  .hc-account-content .woocommerce-MyAccount-paymentMethods td {
    padding: 8px 16px;
    border-top: none;
  }
  .hc-account-content .woocommerce-MyAccount-paymentMethods tr {
    padding: 8px 0;
  }
  .hc-account-content .woocommerce-MyAccount-paymentMethods td::before {
    content: attr(data-title);
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--hc-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
  }
  .hc-account-content .woocommerce-MyAccount-paymentMethods td.payment-method-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hc-account-content .woocommerce-MyAccount-paymentMethods td.payment-method-actions .button {
    margin-right: 0;
  }
}
.hc-account-content .woocommerce-MyAccount-paymentMethods thead tr {
  background: var(--hc-warm);
}
.hc-account-content .woocommerce-MyAccount-paymentMethods thead th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hc-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--hc-border);
  text-align: left;
  white-space: nowrap;
}
.hc-account-content .woocommerce-MyAccount-paymentMethods tbody tr {
  border-bottom: 1px solid var(--hc-border);
  transition: background 0.12s;
}
.hc-account-content .woocommerce-MyAccount-paymentMethods tbody tr:last-child {
  border-bottom: none;
}
.hc-account-content .woocommerce-MyAccount-paymentMethods tbody tr:hover {
  background: var(--hc-bg);
}
.hc-account-content
  .woocommerce-MyAccount-paymentMethods
  tbody
  tr.default-payment-method {
  background: color-mix(in srgb, var(--hc-accent) 6%, #fff);
}
.hc-account-content .woocommerce-MyAccount-paymentMethods td {
  padding: 14px 16px;
  vertical-align: middle;
  color: var(--hc-body);
}
/* WC generic .button — used for payment method actions + add-payment link */
.hc-account-content a.button,
.hc-account-content .woocommerce-MyAccount-paymentMethods .button {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--hc-accent);
  background: transparent;
  border: 1.5px solid var(--hc-accent);
  border-radius: var(--hc-btn-r);
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
  margin-right: 4px;
}
.hc-account-content a.button:hover,
.hc-account-content .woocommerce-MyAccount-paymentMethods .button:hover {
  background: var(--hc-accent);
  /* Dark green on gold: white here is 2.31:1 and fails AA. */
  color: var(--hc-dark);
}
.hc-account-content a.button.delete {
  color: #b91c1c;
  border-color: #b91c1c;
}
.hc-account-content a.button.delete:hover {
  background: #b91c1c;
  color: #fff;
}
/* Core's payment-methods.php prints the "Add payment method" link as a bare
   <a class="button">, right after the table with no wrapping element — there
   is no .add-payment-method-wrap in the actual markup to hang a margin off
   of, so the button sat flush against the table. Target the real sibling
   relationship instead. */
.hc-account-content .woocommerce-MyAccount-paymentMethods + a.button {
  margin-top: 16px;
}

/* Mobile: one nav item per row instead of wrapping pills. An earlier version
   wrapped pills onto multiple rows to stop 5+ items (Dashboard, Orders,
   Addresses, Account Details, Saved Designs…) scrolling off-screen in a
   single non-wrapping row — but short labels like "Dashboard"/"Orders" then
   packed onto the same row, reading as overlapping/misaligned. Stacking
   full-width still shows every item (just taller, which is normal for
   mobile scrolling) without that same-row crowding.
   .hc-account-nav ul already sets flex-direction: column on all viewports
   (see the desktop rule above), so no override is needed here — only the
   per-item sizing/spacing below is mobile-specific. */
@media (max-width: 767px) {
  .hc-account-nav ul {
    gap: 4px;
  }
  .hc-account-nav li a {
    font-size: 13px;
  }
  .hc-account-content {
    padding: 20px;
  }
}

/* Cart-page responsive */
@media (max-width: 640px) {
  .cart-collaterals {
    justify-content: stretch !important;
  }
  .cart_totals {
    max-width: 100% !important;
  }

  .woocommerce-cart-form .shop_table thead {
    display: none !important;
  }
  .woocommerce-cart-form .shop_table tbody tr {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    grid-template-areas:
      "thumb name"
      "thumb price"
      "thumb qty"
      "thumb sub"
      ". remove" !important;
    gap: 6px 12px !important;
    padding: 16px !important;
  }
  .woocommerce-cart-form .shop_table td {
    padding: 0 !important;
    border: none !important;
  }
  .woocommerce-cart-form td.product-remove {
    grid-area: remove !important;
  }
  .woocommerce-cart-form td.product-thumbnail {
    grid-area: thumb !important;
    align-self: start !important;
  }
  .woocommerce-cart-form td.product-name {
    grid-area: name !important;
  }
  .woocommerce-cart-form td.product-price {
    grid-area: price !important;
  }
  .woocommerce-cart-form td.product-quantity {
    grid-area: qty !important;
  }
  .woocommerce-cart-form td.product-subtotal {
    grid-area: sub !important;
  }
  .woocommerce-cart-form td[data-title]::before {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--hc-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 2px !important;
    content: attr(data-title) !important;
  }
  .woocommerce-cart-form td.product-remove::before,
  .woocommerce-cart-form td.product-thumbnail::before {
    display: none !important;
  }
  .woocommerce-cart-form .actions .coupon {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .woocommerce-cart-form .actions .coupon input#coupon_code {
    width: 100% !important;
  }
  .woocommerce-cart-form .actions button[name="update_cart"] {
    float: none !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
}

/* Checkout-page responsive */
@media (max-width: 767px) {
  .col2-set#customer_details .col-1,
  .col2-set#customer_details .col-2 {
    float: none !important;
    width: 100% !important;
  }
  .woocommerce-checkout-review-order-table thead {
    display: none !important;
  }
}

/* ─── Product review form: star rating + photo upload ─────────
   Radio inputs run 5-down-to-1 in the markup with the group
   flex-reversed here — the standard CSS-only star-rating trick,
   so hover/selection fill works with no JS. */
.hc-star-rating__label {
  display: block;
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
  margin-bottom: 4px;
}
.hc-star-rating__stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  width: fit-content;
  gap: 2px;
  font-size: 28px;
}
.hc-star-rating__stars input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hc-star-rating__stars label {
  cursor: pointer;
  color: var(--hc-border);
  line-height: 1;
}
.hc-star-rating__stars input:checked ~ label,
.hc-star-rating__stars label:hover,
.hc-star-rating__stars label:hover ~ label {
  color: var(--hc-accent);
}
.comment-form-review-image input[type="file"] {
  max-width: 320px;
}
.hc-review-image-list {
  margin: 8px 0 0;
}
.hc-review-image-item__name {
  max-width: 160px;
}
.hc-review-images {
  margin-top: 8px;
}
.hc-review-image {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--hc-r);
  border: 1px solid var(--hc-border);
}

/* ─── Product review list ──────────────────────────────────────
   Core WooCommerce CSS is only dequeued on the front page/cart/account
   (see functions.php) — it's still loaded on the single-product page,
   where this list actually lives, so everything below has to beat core's
   own #reviews styling rather than starting from a blank slate. Scoped
   to #reviews so it can't bleed into an unrelated blog commentlist. */
#reviews .woocommerce-Reviews-title {
  font-size: var(--hc-text-lg);
  margin-bottom: 20px;
}
#reviews .commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#reviews .comment_container {
  display: flex;
  gap: 14px;
  background: var(--hc-bg);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r);
  padding: 16px 18px;
}
#reviews .comment_container img.avatar {
  /* Core's own '.woocommerce #reviews #comments ol.commentlist li img.avatar'
     (wp-content/plugins/woocommerce/assets/css/woocommerce.css) carries two
     IDs, well past what this selector can out-specificity honestly, and sets
     position: absolute; top: 0; left: 0; width: 32px — which is what actually
     pinned the avatar to the card's top-left corner: an absolutely positioned
     element drops out of the .comment_container flex layout entirely, so
     align-self below had nothing left to act on. !important on exactly the
     properties core hijacks is the standard way to beat an ID selector
     without resorting to one of our own. */
  position: static !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  flex-shrink: 0;
  /* get_avatar() (woocommerce_review_display_gravatar()) requests a 60px
     gravatar/default image and bakes width="60" height="60" into the <img>
     itself; resizing that down to 48px via CSS width/height alone stretches
     non-square source images (a cropped Gravatar photo, some default-avatar
     styles) to fill the new box instead of cropping them proportionally. */
  object-fit: cover;
  /* .comment_container has no align-items, so it defaults to stretch — a
     tall review (long text, rating, uploaded photos) stretches the avatar's
     flex-item box to match, even though the <img> itself is still 48px;
     align-self pins it to the vertical center of that taller box instead. */
  align-self: center;
}
#reviews .comment-text {
  flex: 1;
  min-width: 0;
}
#reviews .comment-text p.meta {
  margin: 0 0 6px;
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
}
#reviews .woocommerce-review__author {
  color: var(--hc-heading);
  font-weight: 600;
}
#reviews .woocommerce-review__dash {
  margin: 0 4px;
}
#reviews .woocommerce-review__verified {
  color: var(--hc-accent);
  font-style: normal;
  font-size: var(--hc-text-xs);
}
#reviews .woocommerce-review__awaiting-approval {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: #8a6900;
  background: #fbf3d9;
}
#reviews .description p {
  margin: 0;
  color: var(--hc-body);
  font-size: var(--hc-text-md);
}
#reviews .woocommerce-noreviews {
  color: var(--hc-muted);
}
#reviews .woocommerce-pagination {
  margin-top: 20px;
}

/* ─── Read-only star rating (wc_get_rating_html) ───────────────
   Unscoped — this markup is reused verbatim on the shop/archive loop
   cards, the single-product summary, and the review list, so it's
   styled once here rather than duplicated per context. */
/* Scoped as .star-rating.star-rating (specificity 0,0,2,0, the repeated-
   class trick) rather than bare .star-rating (0,0,1,0): WooCommerce core's
   own woocommerce.css — only dequeued on the front page/cart/account, see
   functions.php — styles this same markup via ".woocommerce .star-rating"
   (0,0,2,0) using its "WooCommerce" icon font, so a bare .star-rating here
   loses outright wherever core's selector also matches.
   This used to read ".woocommerce .star-rating", which is wrong on two
   counts. First, most of this theme's WooCommerce templates never print an
   element with the literal class "woocommerce" in the first place —
   woocommerce_output_content_wrapper() falls through to a plain
   #primary/#main wrapper for any theme (this one included) it doesn't
   specifically recognize — so on those pages (e.g. collection pages) the
   rule simply never matched anything, but happened to work anyway because
   core's competing selector didn't match either. Second, on single-product
   pages body_class() DOES add "woocommerce", so core's selector matches
   there and, at equal specificity, wins on source order — overriding
   `content` back to core's icon-font glyph ("sssss"/"SSSSS") painted in
   `color` (near-black), which is what actually produced black stars on the
   single-product page and the review list, even though the mask/
   background-color rules below were still (invisibly) correct. Repeating
   the class instead of anchoring to any particular ancestor guarantees this
   wins regardless of which body classes or wrapper markup a given
   WooCommerce template happens to produce. */
.star-rating.star-rating {
  position: relative;
  display: inline-block;
  width: 5.6em;
  height: 1.1em;
  line-height: 1;
  vertical-align: middle;
  /* Lost when the ★-glyph fix below switched both layers from text to a
     mask: wc_get_star_rating_html()'s inner <span> carries a real text
     node (the "Rated 4.8 out of 5 based on 162 customer ratings"
     accessibility sentence — see wc_get_star_rating_html() in WooCommerce
     core), meant to be announced to screen readers, not read visually.
     The absolutely-positioned span itself has its own overflow:hidden,
     but that only clips it to ITS OWN width:X% box — it does nothing
     about the span overflowing ITS PARENT (this element)'s bounds, which
     is what actually kept the sentence off-screen before: the parent's
     overflow:hidden clips anything spilling past its 5.6em/1.1em box,
     span included. Without it back, fragments of that real sentence (a
     literal "4.8" and "162" among them) render as visible garbled text
     next to the stars. */
  overflow: hidden;
}
/* Both layers below used to be a ★★★★★ text run (gray background,
   accent-colored overlay absolutely positioned on top and clipped via
   overflow:hidden at wc_get_star_rating_html()'s inline width:X% — X
   always a multiple of 20%, since ratings here are always a whole 0-5
   star count). That clip lands wherever X% falls in rendered PIXELS,
   not on a glyph edge: the two layers' glyphs only end up aligned at
   a 20%-multiple boundary if the ★ (U+2605) fallback glyph — no font
   in the stack has one, so the browser substitutes from wherever it
   finds one — happens to render at exactly 1/5th this box's width,
   which isn't guaranteed. When it doesn't land exactly there, the clip
   falls mid-glyph and reveals a sliver of the wrong-colour star,
   reading as e.g. "4.5 stars" for a plain whole-number rating of 4.
   A repeating mask of 5 solid star SHAPES (not glyphs) sidesteps the
   ambiguity entirely: mask-size 20% ties each star to exactly 1/5 of
   the box width by geometry, so the width:X% clip boundary always
   lands on a tile edge, never mid-shape — and since a mask only reads
   shape/alpha from the SVG (its own fill is irrelevant), the visible
   colour still comes from background-color: var(--hc-*), so Customizer
   colour changes and every palette preset keep working unchanged. */
.star-rating.star-rating::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--hc-border);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.00,8.00 59.40,37.06 89.94,37.02 65.22,54.94 74.69,83.98 50.00,66.00 25.31,83.98 34.78,54.94 10.06,37.02 40.60,37.06'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.00,8.00 59.40,37.06 89.94,37.02 65.22,54.94 74.69,83.98 50.00,66.00 25.31,83.98 34.78,54.94 10.06,37.02 40.60,37.06'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 20% 100%;
  mask-size: 20% 100%;
  -webkit-mask-position: left center;
  mask-position: left center;
}
.star-rating.star-rating span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  overflow: hidden;
}
.star-rating.star-rating span::before {
  content: "";
  display: block;
  height: 100%;
  background-color: var(--hc-accent);
  /* This inner element is sized to the FULL star-rating width (5.6em, not
     this span's own narrower width:X% box) so that a 20%-per-star mask
     grid lands on the exact same pixel boundaries as the background
     layer's mask above; the span's own width:X% (its inline style, set by
     wc_get_star_rating_html()) plus overflow:hidden on the span is what
     actually shows only the correct fraction of stars — the same
     overflow:hidden width-clip role the old ★ text played, just clipping
     mask-shaped solid color instead of a font glyph, so the box edge
     falling wherever X% lands is now a plain geometric cut instead of one
     that depends on a glyph rendering at its expected width. */
  width: 5.6em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.00,8.00 59.40,37.06 89.94,37.02 65.22,54.94 74.69,83.98 50.00,66.00 25.31,83.98 34.78,54.94 10.06,37.02 40.60,37.06'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.00,8.00 59.40,37.06 89.94,37.02 65.22,54.94 74.69,83.98 50.00,66.00 25.31,83.98 34.78,54.94 10.06,37.02 40.60,37.06'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 20% 100%;
  mask-size: 20% 100%;
  -webkit-mask-position: left center;
  mask-position: left center;
}
#reviews .star-rating {
  margin-bottom: 6px;
}

/* Shop/archive loop card: rating sits between title and price. */
ul.products li.product .star-rating {
  margin: 0 20px 4px;
}

/* Single product summary: rating + "(N customer reviews)" link inline. */
.woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.woocommerce-review-link {
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
  text-decoration: none;
}
.woocommerce-review-link:hover {
  color: var(--hc-accent);
}


/* ─── Collection pages ─────────────────────────────────────────────────────
   /collections/ URLs render the product grid in a page template. Narrowing is
   done by navigating to sub-collection pages (Color / Type / Size / ...), each
   an indexable category page — there is no query-string filter UI. */

.hc-collection {
  padding-top: 32px;
  padding-bottom: 56px;
}

/* WooCommerce's float grid fights the page container; CSS grid is simpler and
   keeps the 4-up rhythm of the shop archive. */
/* Sidebar + grid. The grid drops to 3-up because the sidebar takes the width
   the 4th column used. */
.hc-collection__layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* Collections with no sub-collections (bathroom, closets) have no sidebar, so
   the grid takes the full width instead of leaving a gap where it would be. */
.hc-collection__layout--full {
  grid-template-columns: minmax(0, 1fr);
}

.hc-collection__layout--full ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hc-collection__main {
  min-width: 0;
}

.hc-collection ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  float: none !important;
  margin: 0 !important;
}

.hc-collection ul.products::before,
.hc-collection ul.products::after {
  content: none !important;
}

.hc-collection ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

@media (max-width: 991.98px) {
  .hc-collection__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .hc-collection ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .hc-collection ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479.98px) {
  .hc-collection ul.products {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Category-nav bar: the shared .hc-cat-nav pill row (see global.css) plus a
   product-search box on the right. Wraps the primary row on collection pages,
   the /collections/ index, and shop/category/search archives, so the search
   stays put wherever the pill row appears (including on the search results
   page itself). Any sub-category row sits below this bar. */
.hc-cat-nav__bar {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.hc-cat-nav__bar .hc-cat-nav__row {
  flex: 1 1 auto;
}

.hc-cat-nav__search {
  flex: 0 0 auto;
  margin-left: auto;
}
.hc-cat-nav__search-input {
  width: 220px;
  max-width: 100%;
  padding: 9px 16px;
  border: 1.5px solid var(--hc-border);
  border-radius: 999px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  color: var(--hc-body);
  background: var(--hc-surface);
  transition: border-color 0.15s;
}
.hc-cat-nav__search-input:focus {
  outline: none;
  border-color: var(--hc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc-accent) 10%, transparent);
}

@media (max-width: 767.98px) {
  .hc-cat-nav__search {
    margin-left: 0;
    flex-basis: 100%;
  }
  .hc-cat-nav__search-input {
    width: 100%;
  }
}

/* ─── Collection sidebar ───────────────────────────────────────────────────── */
/* Facet groups as plain link lists. They read as filters, but each entry is its
   own collection page — selecting one navigates, it does not narrow in place. */

/* The design frames the filters as a white card. The facets themselves stay
   link-based — each entry is a real collection page, so selecting one
   navigates rather than narrowing. */
.hc-facets {
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-r-lg);
  padding: 22px 20px;
}
.hc-facets__group {
  position: relative;
}

.hc-facets__group + .hc-facets__group {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hc-border);
}

.hc-facets__title {
  margin: 0;
  /* Sans, not the global Playfair for headings — the design uses the serif for
     display headings only, not these small uppercase group labels. */
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--hc-heading);
}

/* The checkbox is the open/closed state; the title label is the control. */
.hc-facets__state {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hc-facets__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0 12px;
  cursor: pointer;
  transition: color .15s;
}

.hc-facets__toggle:hover {
  color: var(--hc-accent);
}

.hc-facets__state:focus-visible ~ .hc-facets__title .hc-facets__toggle {
  outline: 2px solid var(--hc-accent);
  outline-offset: 3px;
}

.hc-facets__chevron {
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  /* Points down when closed, up when open. */
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}

.hc-facets__state:checked ~ .hc-facets__title .hc-facets__chevron {
  transform: translateY(1px) rotate(-135deg);
}

/* Collapsed by default. The grid-rows 0fr/1fr pair animates open without a
   fixed max-height, so long lists (Size has ten) do not jump. */
.hc-facets__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease;
}

.hc-facets__state:checked ~ .hc-facets__panel {
  grid-template-rows: 1fr;
}

.hc-facets__list {
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 0;
  overflow: hidden;
}

.hc-facets__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--hc-text-sm);
  line-height: 1.35;
  color: var(--hc-body);
  text-decoration: none;
  transition: color .15s;
}

.hc-facets__link:hover,
.hc-facets__link:focus-visible {
  color: var(--hc-accent);
}

.hc-facets__link.is-active {
  color: var(--hc-accent);
  font-weight: 600;
}

.hc-facets__count {
  flex: none;
  font-size: var(--hc-text-xs);
  color: var(--hc-muted);
  font-variant-numeric: tabular-nums;
}

.hc-facets__link:hover .hc-facets__count,
.hc-facets__link.is-active .hc-facets__count {
  color: inherit;
}

@media (max-width: 991.98px) {
  /* Stacked full-width accordion above the grid. Columns were tried here, but
     they fight the collapse: a closed group and an open one land in the same
     row, so the row stretches to the tallest and leaves dead space beside the
     short one. Full-width rows keep each header directly above its own list. */
  .hc-facets {
    margin-bottom: 28px;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r);
    overflow: hidden;
  }

  .hc-facets__group + .hc-facets__group {
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid var(--hc-border);
  }

  /* Full-width tap target — the whole header row toggles, not just the text. */
  .hc-facets__toggle {
    padding: 13px 16px;
    min-height: 44px;
  }

  .hc-facets__panel > .hc-facets__list {
    padding: 0 16px 12px;
  }

  .hc-facets__link {
    padding: 9px 0;
  }
}

/* ─── Collection toolbar ───────────────────────────────────────────────────
   Hide-filters toggle, result count, and the segmented sort control. Replaces
   the plain result-count + <select> row with the design's pill group. */
.hc-collection__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.hc-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--hc-border);
  border-radius: 999px;
  background: var(--hc-surface);
  color: var(--hc-heading);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.hc-filters-toggle:hover {
  border-color: var(--hc-accent);
}
.hc-filters-toggle svg {
  color: var(--hc-accent);
  flex-shrink: 0;
}

.hc-collection__count {
  margin-right: auto;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--hc-text-sm);
  color: var(--hc-muted);
}
.hc-collection__count .woocommerce-result-count {
  margin: 0 !important;
}

.hc-sort-pills {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 999px;
  background: var(--hc-bg);
  border: 1px solid var(--hc-border);
  gap: 2px;
}
.hc-sort-pills__item {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--hc-muted);
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.hc-sort-pills__item:hover {
  color: var(--hc-heading);
}
.hc-sort-pills__item--active {
  background: var(--hc-dark);
  color: var(--hc-white) !important;
}

@media (max-width: 575.98px) {
  .hc-collection__toolbar {
    align-items: stretch;
  }
  .hc-collection__count {
    order: -1;
    width: 100%;
    margin-right: 0;
  }
  /* The pill shape (border-radius: 999px) reads fine as a single row, but
     once the items wrap to two rows on a narrow screen it draws as a
     flattened oval around both rows instead of a pill — swap to the
     standard rounded-rectangle radius whenever wrapping is possible. */
  .hc-sort-pills {
    flex-wrap: wrap;
    width: 100%;
    border-radius: var(--hc-r);
  }
  .hc-sort-pills__item {
    flex: 1 1 calc(50% - 2px);
    justify-content: center;
  }
}

/* Sidebar collapsed via the "Hide Filters" toggle — the facets column is
   removed from the grid rather than just hidden, so the product grid
   reclaims its width. */
.hc-collection__layout--filters-hidden {
  grid-template-columns: minmax(0, 1fr);
}
.hc-collection__layout--filters-hidden > .hc-facets {
  display: none;
}
.hc-collection__layout--filters-hidden ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 991.98px) {
  .hc-collection__layout--filters-hidden ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ─── Product card: category tag, colourway, badge, rating ────────────────
   PLACEHOLDER CONTENT — see inc/collection-card-badges.php. Badge and rating
   values are fabricated until real merchandising/review data exists. */
.hc-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--hc-dark);
  color: var(--hc-white);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--hc-sh);
}

.hc-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 20px 0;
  font-family: "DM Sans", system-ui, sans-serif;
}
.hc-card-meta__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--hc-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-card-meta__colour {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--hc-muted);
}

/* Title padding tightens up since the meta row above now carries the
   top spacing the title used to own on its own. */
ul.products li.product .hc-card-meta + .woocommerce-loop-product__title {
  padding-top: 4px !important;
}

/* ─── "Load More Collections" button ───────────────────────────────────────
   Replaces WooCommerce's numbered pagination on collection pages only —
   see inc/collection-load-more.php for the AJAX handler this calls. */
.hc-load-more {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}
.hc-load-more__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  border-radius: 999px;
  border: 1.5px solid var(--hc-heading);
  background: var(--hc-surface);
  color: var(--hc-heading);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.hc-load-more__btn:hover {
  background: var(--hc-dark);
  color: var(--hc-white);
}
.hc-load-more__btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ─── Collections index (/collections/) ────────────────────────────────────── */
.hc-collections-index {
  padding-top: 40px;
  padding-bottom: 64px;
}

.hc-collection-card,
.hc-collection-card:hover,
.hc-collection-card * {
  text-decoration: none;
}

.hc-collection-card {
  overflow: hidden;
}

.hc-collection-card__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.hc-collection-card__title {
  font-size: var(--hc-text-xl);
  margin-bottom: 6px;
}

.hc-collection-card__count {
  font-size: var(--hc-text-sm);
  color: var(--hc-accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.hc-collection-card__facets {
  font-size: var(--hc-text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hc-muted);
  margin-bottom: 0;
}

.hc-collection-card .card-footer {
  background: none;
  border-top: 1px solid var(--hc-border);
}

.hc-collection-card__cta {
  font-size: var(--hc-text-sm);
  font-weight: 600;
  color: var(--hc-accent);
}
.hc-collection-card:hover .hc-collection-card__cta {
  color: var(--hc-accent-d);
}