.shop-context {
  display: flex;
  justify-content: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.shop-context a {
  display: grid;
  grid-template-columns: 30px auto;
  min-width: 240px;
  padding: 14px 25px;
  border-right: 1px solid var(--line);
}

.shop-context a:last-child { border-right: 0; }
.shop-context span { grid-row: span 2; color: var(--orange); font-size: 20px; }
.shop-context b { font-size: 13px; }
.shop-context small { color: rgba(18, 61, 50, .62); font-size: 11px; }
.compact-hero { padding-top: 36px; padding-bottom: 38px; }
.compact-hero .crumbs { margin-bottom: 24px; }
.compact-hero > div:last-child { display: grid; grid-template-columns: minmax(0, 1.35fr) .65fr; align-items: end; gap: 60px; }
.compact-hero h1 { max-width: 800px; margin-bottom: 0; font-size: clamp(46px, 5.5vw, 78px); }
.compact-hero > div > p:last-child { max-width: 480px; margin: 0; color: rgba(255, 255, 255, .76); }

.department-section { padding: 30px 5vw 26px; background: #fff; border-bottom: 1px solid var(--line); }
.department-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.department-heading h2 { margin: 0; font: 700 28px var(--serif); }
.department-heading button { border: 0; background: transparent; font-weight: 700; text-decoration: underline; cursor: pointer; }
.department-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.department-row button { border: 1px solid var(--line); padding: 10px 10px 13px; background: #f7f4ea; color: var(--ink); font: 700 13px var(--sans); cursor: pointer; transition: border-color .2s, transform .2s; }
.department-row button:hover, .department-row button.active { border-color: var(--orange); transform: translateY(-2px); }
.department-row span { display: block; height: 78px; margin-bottom: 8px; }
.department-row img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.filter-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; }
.pack-filters { display: flex; gap: 6px; padding-top: 13px; }
.pack-filter { white-space: nowrap; border: 1px solid var(--line); background: #fff; padding: 10px 13px; font: 700 12px var(--sans); cursor: pointer; }
.pack-filter.active { border-color: var(--orange); color: var(--orange); }

.product-image { position: relative; }
.product-badge { position: absolute; top: 10px; left: 10px; padding: 6px 8px; background: var(--yellow); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.quick-add { position: absolute; top: 11px; right: 11px; border: 0; border-radius: 999px; padding: 9px 13px; background: var(--orange); color: #fff; font: 800 12px var(--sans); cursor: pointer; box-shadow: 0 5px 18px rgba(18, 61, 50, .15); }
.card-qty { position: absolute; top: 11px; right: 11px; display: grid; grid-template-columns: 31px 31px 31px; align-items: center; overflow: hidden; border-radius: 999px; background: #fff; box-shadow: 0 5px 18px rgba(18, 61, 50, .16); }
.card-qty button { width: 31px; height: 34px; border: 0; background: var(--orange); color: #fff; font-size: 17px; cursor: pointer; }
.card-qty b { text-align: center; font-size: 12px; }
.availability { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; margin-bottom: 11px; }
.availability span { padding: 5px 8px; background: #edf4ef; color: var(--green); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.price-note { margin-top: 0; margin-bottom: 0; }
.catalogue-top .eyebrow { margin-bottom: 8px; }

@media (max-width: 950px) {
  .department-row { grid-template-columns: repeat(6, 150px); overflow-x: auto; padding-bottom: 8px; }
  .compact-hero > div:last-child { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 800px) {
  .shop-context { justify-content: flex-start; overflow-x: auto; }
  .shop-context a { min-width: 220px; }
  .department-section { padding-inline: 24px; }
  .filter-row { display: block; }
  .pack-filters { overflow-x: auto; }
}

@media (max-width: 480px) {
  .compact-hero { padding-top: 30px; }
  .department-row { grid-template-columns: repeat(6, 125px); }
  .department-row span { height: 65px; }
  .shop-context a { min-width: 205px; }
}