/* Liquor only. Shared patterns live in site.css. */

.page-liquor .phero::after {
  background: linear-gradient(0deg, rgba(5, 22, 14, 0.94) 0%, rgba(5, 22, 14, 0.74) 50%, rgba(5, 22, 14, 0.5) 100%), linear-gradient(90deg, rgba(5, 22, 14, 0.6), transparent 72%);
}

/* 44px tap areas (breadcrumb, text links) without moving the underline; sub-nav chips grow to 44px */
.link-arrow, .crumbs a { position: relative; }
.link-arrow::before, .crumbs a::before { content: ""; position: absolute; inset: -10px -6px; }
.subnav a { display: inline-flex; align-items: center; min-height: 44px; }

/* selection cards */
.item__cta { margin-top: 10px; }
.item__body p { text-wrap: pretty; }
.item__media--age {
  display: grid; place-items: center; color: var(--neon); background-color: var(--forest);
  background-image: radial-gradient(70% 90% at 50% 125%, rgba(37, 228, 145, 0.3), transparent 70%), linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
.item__media--age b { font: 700 clamp(4.5rem, 9vw, 6.5rem) / 1 var(--font-display); letter-spacing: -0.05em; text-shadow: 0 0 40px rgba(37, 228, 145, 0.45); }
.item__media--age sup { font-size: 0.55em; vertical-align: 0.55em; letter-spacing: 0; }
.item--age .age { display: block; padding: 0; background: none; border: 0; border-radius: 0; }
.item--age .age__badge { display: none; }
.item--age .item__body p.item__kicker { color: var(--neon); }
.item--age .age p { color: rgba(255, 255, 255, 0.82); }
.item--age .age strong { display: block; margin-bottom: 4px; color: #fff; }

@media (min-width: 961px) { .item--feature .item__media { flex: 0 0 42%; } }
@media (max-width: 720px) {
  .items > .item:not(.item--feature) .item__media { aspect-ratio: 16 / 10; }
  .items > .item--age .item__media { aspect-ratio: 16 / 7; }
}

/* from 721px: one grid so kicker, title, copy and caption line up across a row of cards */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 721px) {
    .items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0; }
    .items > .item { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; margin-bottom: var(--gap); }
    .items > .item--feature { grid-column: 1 / -1; grid-row: auto; display: flex; }
    .items > .item:not(.item--feature) .item__body { display: contents; }
    .items > .item:not(.item--feature) .item__body > * { margin: 0; padding-inline: 24px; }
    .items > .item:not(.item--feature) .item__kicker { padding-top: 22px; }
    .items > .item:not(.item--feature) h3 { padding-top: 8px; }
    .items > .item:not(.item--feature) .item__body > p:not(.item__kicker):not(.item__cap) { padding-top: 8px; }
    .items > .item:not(.item--feature) .item__cap { margin: 14px 24px 0; padding: 12px 0 26px; }
    .items > .item--age .age { padding-top: 8px; padding-bottom: 26px; }
  }
  @media (min-width: 1101px) { .items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}

/* availability */
.avail-sec { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px clamp(32px, 6vw, 88px); align-items: center; }
.avail-sec__head { display: grid; gap: 14px; }
.avail-sec__head h2, .sec-head--compact h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.avail-sec__head .lede { font-size: 1.02rem; }
.avail-sec__body { display: grid; gap: 18px; justify-items: start; width: 100%; }
.avail { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); width: 100%; }
.avail li { min-width: 0; border-radius: var(--r); }
.sec-head--compact { margin-bottom: 24px; }

/* stop-in rows follow the 12px card radius */
.stop__row { border-radius: var(--r); }

/* related departments: last row fills the width instead of leaving a hole */
.related { display: flex; flex-wrap: wrap; }
.rel { flex: 1 1 calc(25% - 12px); min-width: 220px; border-radius: var(--r); }
.back { margin-top: 28px; }

@media (max-width: 960px) { .avail-sec { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .avail li { padding: 12px; }
  .avail span { font-size: 0.78rem; }
  .rel { flex-basis: 100%; padding: 8px; }
  .rel picture { width: 52px; height: 52px; }
}