/* Product catalog shown below the category navigation. */
:root { --catalog-side-inset: calc(184 * min(1.2px, calc(100vw / 1672))); }
#shop {
  scroll-margin-top: 112px;
  --catalog-unit: min(1.2px, calc(100vw / 1672));
  --catalog-display: 'Cannabus Display', Arial, sans-serif;
  --catalog-body: 'Cannabus Body', Arial, sans-serif;
  width: var(--catalog-workspace, min(100%, 2048px));
  padding: calc(58 * var(--catalog-unit)) 0 calc(70 * var(--catalog-unit));
  border-top: 1px solid #d9ded7;
  color: #0a0e0b;
}
#shop .catalog-heading-row {
  width: min(calc(100% - 48px), 1760px);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
#shop .section-heading { display: block; min-width: 0; }
#shop .section-heading .eyebrow {
  margin: 0 0 calc(12 * var(--catalog-unit));
  font-family: var(--catalog-display);
  font-size: max(14px, calc(15 * var(--catalog-unit)));
  font-weight: 700;
  line-height: calc(19 * var(--catalog-unit));
  letter-spacing: .11em;
  color: #267707;
}
#shop .section-heading .eyebrow::after {
  content: '';
  display: block;
  width: calc(56 * var(--catalog-unit));
  height: calc(6 * var(--catalog-unit));
  margin-top: calc(11 * var(--catalog-unit));
  background: #2f8214;
}
#shop .section-heading h2 {
  margin: 0;
  font-family: var(--catalog-display);
  font-size: calc(76 * var(--catalog-unit));
  font-weight: 900;
  line-height: calc(70 * var(--catalog-unit));
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: initial;
}
#shop .catalog-intro {
  flex: 0 0 calc(387 * var(--catalog-unit));
  margin: calc(30 * var(--catalog-unit)) 0 0;
  font-family: var(--catalog-body);
  font-size: calc(21 * var(--catalog-unit));
  line-height: calc(29 * var(--catalog-unit));
  color: #656773;
}
#shop .catalog-toolbar {
  width: min(calc(100% - 48px), 1920px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin: calc(22 * var(--catalog-unit)) auto calc(34 * var(--catalog-unit));
}
#shop .filters {
  display: flex;
  flex-wrap: wrap;
  gap: max(8px, calc(12 * var(--catalog-unit)));
  width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  justify-content: flex-start;
}
#shop .filter-button {
  flex: none;
  min-height: 44px;
  padding: 0 max(18px, calc(30 * var(--catalog-unit)));
  border: 1px solid #c9ceca;
  border-radius: 3px;
  background: #fefefe;
  color: #0a0e0b;
  font-family: var(--catalog-display);
  font-size: max(14px, calc(14 * var(--catalog-unit)));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .025em;
  box-shadow: none;
}
#shop .filter-button.active {
  color: #fff;
  border-color: #2a7b09;
  background: linear-gradient(105deg, #287707, #328609);
}
#shop .filter-button:hover { border-color: #267707; }
#catalogTitle:focus-visible { outline: 2px solid #267707; outline-offset: 4px; }
#shop .results-count {
  margin: 0;
  min-height: 0;
  white-space: nowrap;
  font-family: var(--catalog-body);
  font-size: max(14px, calc(16 * var(--catalog-unit)));
  font-weight: 700;
  line-height: 1.4;
  color: #656773;
}
#shop .product-grid {
  display: grid;
  width: min(calc(100% - 48px), 1920px);
  margin-inline: auto;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(28px, 2.8vw, 58px);
}
#shop .product-grid[hidden] { display: none; }
#shop .product-card {
  --card-unit: calc(var(--catalog-unit) * .9);
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
#shop .product-media {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / .94;
  background: #fff;
}
#shop .product-media::before {
  content: '';
  position: absolute;
  inset: 12.913907% 0 0;
  background-image: url('./assets/catalog-reference.png');
  background-repeat: no-repeat;
  background-size: 608% 357.794677%;
  background-position: var(--catalog-image-x) 55.752212%;
}
#shop .product-media::after {
  content: '';
  position: absolute;
  top: 12.913907%;
  right: 2%;
  width: 16%;
  height: 4%;
  background: #fafafa;
  pointer-events: none;
}
#shop [data-product='gelato-mintz'] { --catalog-image-x: 6.585540%; }
#shop [data-product='zooted'] { --catalog-image-x: 28.346457%; }
#shop [data-product='infused-pre-rolls'] { --catalog-image-x: 50.107373%; }
#shop [data-product='sour-apple-gummies'] { --catalog-image-x: 71.796707%; }
#shop [data-product='live-resin'] { --catalog-image-x: 93.486041%; }
#shop [data-product='california-vape'] .product-media::before {
  inset: 0;
  background-color: #fff;
  background-image: url('./assets/catalog-products.png');
  background-size: 500% auto;
  background-position: 100% 80%;
}
#shop .product-badge {
  top: 0;
  left: 0;
  min-height: 32px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  background: #087b24;
  color: #fff;
  border-radius: 1px;
  font-family: var(--catalog-display);
  font-size: max(12px, calc(12 * var(--card-unit)));
  font-weight: 700;
  line-height: calc(15 * var(--card-unit));
  letter-spacing: .01em;
}
#shop .product-favorite {
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #0a0e0b;
  box-shadow: none;
}
#shop .product-favorite svg { width: 17.1px; height: 17.1px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#shop .product-favorite.active { color: #267707; border-color: #267707; }
#shop .product-favorite.active svg { fill: currentColor; }
#shop .product-meta-row {
  min-height: 28px;
  margin-top: clamp(12px, 1.2vw, 20px);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#shop .product-category {
  margin: 0;
  font-family: var(--catalog-display);
  font-size: max(13px, calc(14 * var(--card-unit)));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .035em;
  color: #656d68;
  text-transform: uppercase;
  white-space: nowrap;
}
#shop .product-meta-divider {
  width: 1px;
  height: 18px;
  flex: none;
  background: #bfc5c0;
}
#shop .product-trait {
  font-family: var(--catalog-body);
  font-size: max(13px, calc(14 * var(--card-unit)));
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
#shop .product-trait-hybrid { color: #ed741b; }
#shop .product-trait-indica { color: #8844d5; }
#shop .product-trait-sativa { color: #2f8c38; }
#shop .product-swatches {
  display: inline-flex;
  gap: 3px;
}
#shop .product-swatches i { width: 22px; height: 7px; display: block; }
#shop .product-swatches i:nth-child(1) { background: #198b35; }
#shop .product-swatches i:nth-child(2) { background: #8249d5; }
#shop .product-swatches i:nth-child(3) { background: #f04a2d; }
#shop .product-detail {
  min-width: 0;
  margin: 0 0 0 auto;
  overflow: hidden;
  color: #656d68;
  font-family: var(--catalog-body);
  font-size: max(13px, calc(14 * var(--card-unit)));
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#shop .product-name {
  margin: 4px 0 clamp(12px, 1vw, 18px);
  min-height: 0;
  font-family: var(--catalog-display);
  font-size: clamp(20px, 1.45vw, 28px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.025em;
}
#shop .price-block { margin-top: auto; padding-top: clamp(10px, 1vw, 16px); border-top: 1px dashed #c8cec8; }
#shop .price-block strong {
  display: block;
  color: #087b24;
  font-family: var(--catalog-display);
  font-size: clamp(28px, 1.85vw, 36px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
}
#shop .price-block small {
  display: block;
  margin-top: 8px;
  font-family: var(--catalog-body);
  font-size: max(14px, calc(15 * var(--card-unit)));
  line-height: 1.3;
  color: #656773;
}
#shop .card-controls {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
#shop .qty-field {
  width: min(150px, 48%);
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.35fr) 1fr;
  border: 1px solid #c9ceca;
  border-radius: 3px;
  background: #fefefe;
  overflow: hidden;
}
#shop .qty-field input, #shop .add-button { height: 49px; min-height: 0; border-radius: 3px; }
#shop .qty-field input {
  min-width: 0;
  padding: 0;
  border: 0;
  height: 47px;
  text-align: center;
  appearance: textfield;
  background: #fefefe;
  font-family: var(--catalog-display);
  font-size: 17px;
  font-weight: 700;
  color: #0a0e0b;
}
#shop .qty-field input::-webkit-inner-spin-button,
#shop .qty-field input::-webkit-outer-spin-button { appearance: none; margin: 0; }
#shop .qty-field button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0a0e0b;
  font-family: var(--catalog-body);
  font-size: max(16px, calc(18 * var(--card-unit)));
  cursor: pointer;
}
#shop .qty-field button:hover { background: #f0f4ed; }
#shop .qty-field:focus-within { border-color: #267707; }
#shop .add-button {
  width: 100%;
  padding-inline: 6px;
  background: linear-gradient(105deg, #087b24, #0b8d29);
  font-family: var(--catalog-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
#shop .add-button:hover { background: #267707; }
#shop button:focus-visible { outline: 2px solid #267707; outline-offset: 3px; }
@media (max-width: 1200px) {
  :root { --catalog-side-inset: 60px; }
  #shop { --catalog-unit: .85px; width: var(--catalog-workspace, calc(100% - 48px)); padding-block: 48px 58px; }
  #shop .section-heading h2 { font-size: clamp(38px, 4.8vw, 58px); line-height: 1; }
  #shop .catalog-intro { flex-basis: 295px; font-size: 17px; line-height: 24px; }
  #shop .product-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 43.2px) / 3);
    justify-content: start;
    gap: 21.6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-block: 4px 12px;
  }
  #shop .product-card { scroll-snap-align: start; }
  #shop .product-name { min-height: 46px; font-size: 22px; line-height: 1.05; }
  #shop .product-detail, #shop .price-block small { font-size: 14px; line-height: 1.3; }
  #shop .product-favorite { width: 40px; height: 40px; }
  #shop .card-controls { gap: 10px; }
  #shop .qty-field input, #shop .add-button { height: 48px; }
  #shop .qty-field input { height: 46px; }
  #shop .add-button { font-size: 13px; }
}
@media (max-width: 780px) {
  :root { --catalog-side-inset: 40px; }
  #shop { --catalog-unit: 1px; width: var(--catalog-workspace, calc(100% - 36px)); padding-block: 38px 48px; }
  #shop .catalog-heading-row { width: 100%; display: block; }
  #shop .section-heading .eyebrow { font-size: 13px; }
  #shop .section-heading h2 { font-size: clamp(29px, 6.7vw, 50px); line-height: 1.03; }
  #shop .catalog-intro { margin-top: 18px; font-size: 16px; line-height: 23px; }
  #shop .catalog-intro br { display: none; }
  #shop .catalog-toolbar { width: 100%; display: flex; gap: 12px; margin: 18px 0 22px; }
  #shop .filters { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 4px 4px 8px; }
  #shop .results-count { font-size: 14px; }
  #shop .product-grid { width: 100%; grid-auto-columns: max(260px, calc((100% - 14.4px) / 2)); gap: 14.4px; }
  #shop .product-badge { top: 0; left: 0; min-height: 29px; padding: 7px 10px; font-size: 11px; line-height: 1; }
  #shop .product-favorite { top: 0; right: 0; width: 38px; height: 38px; }
  #shop .product-favorite svg { width: 15.3px; height: 15.3px; }
  #shop .product-meta-row { min-height: 36px; margin-top: 10px; gap: 7px; flex-wrap: wrap; align-content: center; }
  #shop .product-category,
  #shop .product-trait,
  #shop .product-detail { font-size: 12px; line-height: 1.2; }
  #shop .product-meta-divider { height: 15px; }
  #shop .product-detail { width: 100%; margin-left: 0; }
  #shop .product-name { min-height: 44px; margin: 3px 0 11px; font-size: clamp(19px, 3vw, 22px); line-height: 1.05; }
  #shop .price-block strong { font-size: 26px; line-height: 1; }
  #shop .price-block small { font-size: 14px; line-height: 19px; }
  #shop .card-controls { margin-top: 11px; }
  #shop .qty-field { width: 132px; }
  #shop .qty-field input { padding: 0; font-size: 16px; }
  #shop .add-button { font-size: 13px; }
}