/* T14 Compare (catalog/product_compare/index) per T14 Compare.dc.html. The template replaces core's #product-comparison table, so no Blank .table-comparison rule matches; every rule is scoped to body.hvn-page-compare. */

.hvn-page-compare .page-main,
.hvn-page-compare .columns .column.main {
  max-width: none;
  padding: 0;
  margin: 0;
  min-height: 0;
}

/* ---- head: crumb (22px top, 12px caps) + h1 28px display with the muted count (14px below the crumb) ---- */
.hvn-page-compare .hvn-compare-head {
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hvn-page-compare .hvn-compare-crumbs-items {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Artboard: 52% text mix; --hvn-text-subtle (60%) is the AA floor, as on the T4/T9 crumbs. */
  color: var(--hvn-text-subtle);
}
.hvn-page-compare .hvn-compare-crumb {
  display: inline-flex;
  gap: 9px;
  margin: 0;
}
.hvn-page-compare .hvn-compare-crumb:not(:last-child)::after {
  content: "/";
  color: var(--hvn-text-subtle);
}
.hvn-page-compare .hvn-compare-crumb a,
.hvn-page-compare .hvn-compare-crumb a:visited,
.hvn-page-compare .hvn-compare-crumb a:hover {
  color: inherit;
  text-decoration: none;
}
.hvn-page-compare .hvn-compare-crumb[aria-current="page"] { color: var(--hvn-text); }
.hvn-page-compare .hvn-compare-title {
  font-family: var(--hvn-font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}
.hvn-page-compare .hvn-compare-title-count {
  font-size: 15px;
  /* Artboard: 50% mix; 60% is the AA floor. */
  color: var(--hvn-text-subtle);
}

/* ---- body: the scroll container (24px below the h1) holding one surface card, min-width 900 ---- */
.hvn-page-compare .hvn-compare-body { padding-top: 24px; }
/* A one-track grid so the card is max(container width, its min-content); a block card could not grow with N columns. */
.hvn-page-compare .hvn-compare-scroll {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.hvn-page-compare .hvn-compare-card {
  background: var(--hvn-surface);
  border: 1px solid color-mix(in oklab, var(--hvn-text) 12%, var(--hvn-bg));
  border-radius: 4px;
  min-width: 900px;
}
.hvn-page-compare .hvn-compare-grid {
  display: grid;
  grid-template-columns: 180px repeat(var(--hvn-compare-cols, 1), minmax(150px, 1fr));
}
/* role=row wrappers: display contents keeps the cells as the grid's items. */
.hvn-page-compare .hvn-compare-row { display: contents; }
.hvn-page-compare .hvn-compare-corner {
  padding: 20px;
  display: flex;
  align-items: flex-end;
}
/* Sticky label column while the card scrolls in .hvn-compare-scroll; the cells are the grid items, left 1px = the card border; z-index 2 beats Blank's .product-image-wrapper z-index 1. */
.hvn-page-compare .hvn-compare-corner,
.hvn-page-compare .hvn-compare-label {
  position: sticky;
  left: 1px;
  z-index: 2;
  background: var(--hvn-surface);
}

/* ---- column heads: image 1/1, name, Add to cart, Remove; 1px left rule ---- */
.hvn-page-compare .hvn-compare-product {
  padding: 20px;
  border-left: 1px solid color-mix(in oklab, var(--hvn-text) 10%, var(--hvn-surface));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.hvn-page-compare .hvn-compare-product-media {
  display: block;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--hvn-accent-tint);
}
/* The image helper's <style> sets .product-image-container-N (0,1,0) width 480px + aspect-ratio 480/600 and its span.product-image-wrapper (0,2,1) height 100%; these (0,3,0) rules put the 1/1 box on the container. */
.hvn-page-compare .hvn-compare-product-media .product-image-container {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}
.hvn-page-compare .hvn-compare-product-media .product-image-wrapper {
  display: block;
  position: relative;
  height: 100%;
  padding-bottom: 0;
  overflow: hidden;
}
.hvn-page-compare .hvn-compare-product-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  object-fit: cover;
}
.hvn-page-compare .hvn-compare-product-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hvn-text);
  text-decoration: none;
}
.hvn-page-compare .hvn-compare-product-name:hover { text-decoration: underline; }
/* Artboard's column button: the base 14px/32px .hvn-btn overridden inline to 12.5px, 10px 14px. */
.hvn-page-compare .hvn-compare-add {
  padding: 10px 14px;
  font-size: 12.5px;
}
/* Add to Cart / Out of stock sit at the column foot so they and Remove align across columns when a name wraps. */
.hvn-page-compare .hvn-compare-product form,
.hvn-page-compare .hvn-compare-product .hvn-product-unavailable { margin: auto 0 0; }
.hvn-page-compare .hvn-compare-remove,
.hvn-page-compare .hvn-compare-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 12px;
  line-height: 1.4;
  /* Artboard: 50% mix; 60% is the AA floor. */
  color: var(--hvn-text-subtle);
  text-decoration: none;
}
.hvn-page-compare .hvn-compare-remove:hover,
.hvn-page-compare .hvn-compare-clear:hover {
  color: var(--hvn-text);
  text-decoration: underline;
}

/* ---- rows: label cell 11.5px caps letter-spaced, value cells 14px; top rule on every cell, left rule on values ---- */
.hvn-page-compare .hvn-compare-label,
.hvn-page-compare .hvn-compare-value {
  padding: 14px 20px;
  border-top: 1px solid color-mix(in oklab, var(--hvn-text) 10%, var(--hvn-surface));
  min-width: 0;
  overflow-wrap: anywhere;
}
.hvn-page-compare .hvn-compare-label {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  /* Artboard: 55% mix; 60% is the AA floor. */
  color: var(--hvn-text-subtle);
}
.hvn-page-compare .hvn-compare-value {
  font-size: 14px;
  line-height: 1.5;
  border-left: 1px solid color-mix(in oklab, var(--hvn-text) 10%, var(--hvn-surface));
}
.hvn-page-compare .hvn-compare-value .price-box {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.hvn-page-compare .hvn-compare-value .price-box .price { font-size: 14px; font-weight: 400; }
.hvn-page-compare .hvn-compare-value .price-box .old-price { color: var(--hvn-text-subtle); }
.hvn-page-compare .hvn-compare-value .price-box .price-label { display: none; }
.hvn-page-compare .hvn-compare-value-none { color: var(--hvn-text-subtle); }
.hvn-page-compare .hvn-compare-maker-link {
  color: var(--hvn-accent-strong);
  text-decoration: none;
}
.hvn-page-compare .hvn-compare-maker-link:hover { text-decoration: underline; }

/* ---- tip (14px below the card) and the empty state ---- */
.hvn-page-compare .hvn-compare-tip {
  font-size: 13px;
  line-height: 1.5;
  color: var(--hvn-text-subtle);
  margin: 14px 0 0;
}
.hvn-page-compare .hvn-compare-browse {
  color: var(--hvn-accent-strong);
  text-decoration: none;
}
.hvn-page-compare .hvn-compare-browse:hover { text-decoration: underline; }
.hvn-page-compare .hvn-compare-empty-line {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hvn-page-compare .hvn-compare-remove,
  .hvn-page-compare .hvn-compare-clear,
  .hvn-page-compare .hvn-compare-browse,
  .hvn-page-compare .hvn-compare-maker-link,
  .hvn-page-compare .hvn-compare-product-name { min-height: 44px; display: inline-flex; align-items: center; }
  .hvn-page-compare .hvn-compare-add { min-height: 44px; }
}

/* ---- responsive: the card keeps its 900px and scrolls inside .hvn-compare-scroll; 44px targets ---- */
@media (max-width: 767px) {
  .hvn-page-compare .hvn-compare-head { padding-top: 22px; }
  .hvn-page-compare .hvn-compare-title { font-size: 26px; }
  .hvn-page-compare .hvn-compare-remove,
  .hvn-page-compare .hvn-compare-clear,
  .hvn-page-compare .hvn-compare-browse,
  .hvn-page-compare .hvn-compare-maker-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .hvn-page-compare .hvn-compare-product-name { min-height: 44px; display: inline-flex; align-items: center; }
}