/*
 * Cathy Florist — SHOP sections. The field is kraft. Values are --s-* tokens (tokens.css);
 * shared components (tags, panels, rails, piece cards, card, footer) are in site.css.
 */

/* ---- #top: the cutting bench full bleed; the four kinds hang over it as a wall ---------- */
.cf-shophero {
    position: relative; display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap);
    height: var(--s-hero-h); min-height: var(--s-hero-min); max-height: var(--s-hero-max);
    padding: 0 var(--s-gutter-wide) var(--s-space-l); background: var(--s-ink); overflow: hidden;
}
.cf-shophero__bench { display: contents; }
.cf-shophero__photo { position: absolute; inset: 0; }
.cf-shophero__photo picture { position: absolute; inset: 0; }
.cf-shophero__photo .cf-photo { object-position: var(--s-cutting-pos); }
.cf-shophero__panel {
    grid-column: 1 / span 5; grid-row: 1; align-self: end; position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-space-s); justify-items: start;
}
.cf-shophero__panel .cf-h1 { justify-self: stretch; }

/* No photograph (KTZ Meats until its own arrive): the panel alone, then straight to the products. */
.cf-shophero--plain { height: auto; min-height: 0; max-height: none; padding-top: var(--s-space-l); background: var(--s-page); }

/* The wall: a string across the bench, each kind on its own tag at its own drop. */
.cf-wall {
    position: absolute; z-index: 1; top: var(--s-wall-top); right: var(--s-gutter-wide);
    display: flex; gap: var(--s-space-m); align-items: flex-start;
}
.cf-wall::before {   /* the string, run right across the photo */
    content: ""; position: absolute; left: -100vw; right: calc(var(--s-gutter-wide) * -1); top: 0;
    height: var(--s-twine-w); background: var(--s-twine);
}
.cf-wall li { flex: none; width: var(--s-wall-w); padding-top: var(--s-wall-twine); }
.cf-wall li:nth-child(1) { margin-top: var(--s-wall-drop-1); }
.cf-wall li:nth-child(2) { margin-top: var(--s-wall-drop-2); }
.cf-wall li:nth-child(3) { margin-top: var(--s-wall-drop-3); }
.cf-wall li:nth-child(4) { margin-top: var(--s-wall-drop-4); }
.cf-wall .cf-hang--t1::after { height: calc(var(--s-wall-twine) + var(--s-tag-hole-inset) + var(--s-wall-drop-4)); }
.cf-wall__tag { gap: var(--s-space-3xs); box-shadow: none; }
.cf-wall__tag[aria-current="true"]::before { background-color: var(--s-tissue); }
.cf-wall__name {
    font-weight: var(--s-w-heading); font-size: var(--s-size-h3); line-height: var(--s-leading-heading);
    letter-spacing: var(--s-track-heading); font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
.cf-wall__count {
    font-weight: var(--s-w-tag); font-size: var(--s-size-tag); line-height: var(--s-leading-tag);
    letter-spacing: var(--s-track-tag); text-transform: uppercase; color: var(--s-tag-card-accent);
    font-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
}
.cf-anim .cf-wall li { transition: transform var(--s-dur-settle) var(--s-ease-swing); }

@media (max-width: 63.99rem) {
    /* Type first: the kraft tag, then the bench photo with the wall as a swipe row across it. */
    .cf-shophero { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; padding: 0; background: var(--s-page); }
    .cf-shophero__panel { margin: var(--s-space-m) var(--s-gutter) 0; gap: var(--s-space-xs); }
    .cf-shophero__bench { display: block; position: relative; margin-top: calc(var(--s-hero-overlap-phone) * -1); }
    .cf-shophero__photo { position: absolute; inset: 0; }
    .cf-shophero__photo .cf-photo { object-position: var(--s-cutting-pos-phone); }
    .cf-wall {
        position: relative; top: auto; right: auto; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
        padding: var(--s-space-xl) var(--s-gutter) var(--s-space-l); scroll-padding-inline: var(--s-gutter);
        -webkit-mask: linear-gradient(to right, var(--s-opaque) calc(100% - var(--s-rail-fade)), transparent);
        mask: linear-gradient(to right, var(--s-opaque) calc(100% - var(--s-rail-fade)), transparent);
    }
    .cf-wall::-webkit-scrollbar { display: none; }
    .cf-wall::before { left: 0; right: auto; width: 200vw; top: var(--s-space-xl); }
    .cf-wall li { scroll-snap-align: start; width: var(--s-rail-card-phone); }
    .cf-wall li:nth-child(n) { margin-top: 0; }
    /* each tag's twine stops at the wall's own string, never up into the Order tag above */
    .cf-wall .cf-hang--t1::after { height: calc(var(--s-wall-twine) + var(--s-tag-hole-inset)); }
}

/* ---- #bench: THE BENCH ------------------------------------------------------------------ */
.cf-bench { padding-top: var(--s-space-2xl); padding-bottom: var(--s-space-l); background: var(--s-page-alt); }
.cf-bench__head {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); align-items: end;
    gap: var(--s-space-s) var(--s-grid-gap); max-width: var(--s-max); margin-inline: auto; padding-inline: var(--s-gutter-wide);
}
.cf-bench__head .cf-bench__title { grid-column: 1 / span 6; max-width: none; }
.cf-bench__head .cf-lede { grid-column: 7 / span 4; }
.cf-bench__filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-xs) var(--s-space-m); }
.cf-bench__filters[hidden] { display: none; }
.cf-bench__count {
    font-weight: var(--s-w-tag); font-size: var(--s-size-tag); line-height: var(--s-leading-tag);
    letter-spacing: var(--s-track-tag); text-transform: uppercase; color: var(--s-text-muted);
    font-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
}
.cf-bench__grid { max-width: var(--s-max); margin: var(--s-space-l) auto 0; padding-inline: var(--s-gutter-wide); }
/* Cards fill the row and wrap down the page: two across on most phones, more as the screen grows. */
.cf-bench__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-space-m) var(--s-grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--s-bench-card-min)), 1fr)); }
.cf-bench__item { min-width: 0; display: flex; }
.cf-bench__item > * { flex: 1; min-width: 0; }
.cf-bench__item[hidden] { display: none; }
/* Grid cards are narrower than rail cards: their buttons wrap inside the card instead of poking past its edge (staging,
   2026-11-14: "Ask a branch for it" ran out of a 390px phone's card). */
.cf-bench__item .cf-tag { max-width: 100%; white-space: normal; text-align: center; }
.cf-bench__item:target .cf-piece { outline: var(--s-line-w) solid var(--s-madder); outline-offset: var(--s-focus-offset); }

@media (max-width: 63.99rem) {
    .cf-bench__head .cf-bench__title, .cf-bench__head .cf-lede, .cf-bench__filters { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
    .cf-bench__head { padding-inline: var(--s-gutter); }
    .cf-bench__grid { padding-inline: var(--s-gutter); }
    .cf-bench__list { gap: var(--s-space-s) var(--s-space-xs); }
    /* The filter buttons wrap onto more rows: with nine kinds a sideways row hid most of them (2026-11-14). */
}

/* ---- #made: one big bench photograph, two inset details, the words on a field tag ------- */
.cf-made { padding: var(--s-space-section) var(--s-gutter-wide); background: var(--s-page); }
.cf-made__inner {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap);
    max-width: var(--s-max); margin-inline: auto;
}
.cf-made__inner > * { min-width: 0; }
.cf-made__big { grid-column: 1 / -1; grid-row: 1; }
.cf-made__bigframe { height: var(--s-made-big-h); }
.cf-made__text {
    grid-column: 1 / span 5; grid-row: 2; margin-top: calc(var(--s-overlap) * -3);
    display: grid; gap: var(--s-space-s); justify-items: start; align-self: start;
}
.cf-made__text .cf-h2 { justify-self: stretch; }
.cf-made__inset { position: relative; z-index: 1; }
.cf-made__insetframe { aspect-ratio: var(--s-ratio-wide); box-shadow: var(--s-photo-shadow); }
/* rev 6: the two insets are an overlapping diptych, anchored to the panel's baseline (no scattered
   frames, no empty paper beside the panel). */
/* rev 7: side by side (no shared column, so no caption over the other photo) and lifted onto the
   big photograph with the panel, so their tops line up and nothing is left empty under it. */
.cf-made__inset { align-self: start; display: grid; gap: var(--s-space-2xs); margin-top: calc(var(--s-overlap) * -3); }
.cf-made__inset--wrap { grid-column: 6 / span 3; grid-row: 2; }
.cf-made__inset--buckets { grid-column: 9 / -1; grid-row: 2; }
@media (max-width: 63.99rem) {
    .cf-made__text { grid-column: 1 / span 7; }
    .cf-made__inset { align-self: start; }
    .cf-made__inset--wrap { grid-column: 8 / -1; margin-top: var(--s-space-l); }
    .cf-made__inset--buckets { grid-column: 8 / -1; grid-row: 3; margin: var(--s-space-s) 0 0; }
}
@media (max-width: 47.99rem) {
    .cf-made { padding-inline: var(--s-gutter); }
    .cf-made__text { grid-column: 1 / -1; margin: calc(var(--s-overlap) * -1) var(--s-space-2xs) 0; }
    .cf-made__big .cf-caption { display: none; }   /* rev 6: it sat under the overlapping panel, clipped to an 'S' */
    .cf-made__inset--wrap { grid-column: 1 / span 6; grid-row: 3; margin-top: var(--s-space-l); }
    .cf-made__inset--buckets { grid-column: 7 / -1; grid-row: 3; margin-top: calc(var(--s-space-l) + var(--s-space-xl)); }
}

/* ==== PORT (2026-10-03): the real bench — search, sort, the occasion line, paging, empty states ==== */
.cf-bench__tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-space-xs) var(--s-space-m); flex-basis: 100%; }
.cf-bench__search { flex: 1 1 18rem; max-width: 28rem; }
.cf-bench__searchrow { display: flex; gap: var(--s-space-2xs); }
.cf-bench__searchrow input { flex: 1 1 auto; min-width: 0; }
.cf-bench__sort, .cf-bench__pricepick { flex: 0 1 14rem; }
.cf-bench__tools .cf-field label { color: var(--s-text-muted); }
/* background-COLOR only: a `background:` shorthand would wipe the select chevron drawn in site.css. */
.cf-bench__tools .cf-field input, .cf-bench__tools .cf-field select { background-color: var(--s-input-bg); border: var(--s-input-border-w) solid var(--s-input-border); }
/* Sub-groups and price under the category buttons (2026-11-14), wrapping like the row above. On phones the price is
   a dropdown beside "Order by" instead (six chips took four rows there); on wider screens the chips, not the dropdown. */
.cf-bench__sub { flex-basis: 100%; }
.cf-bench__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-2xs) var(--s-space-s); flex-basis: 100%; }
.cf-bench__price .cf-bench__sub { flex: 1 1 auto; flex-basis: auto; }
.cf-bench__label { font-size: var(--s-size-small); color: var(--s-text-muted); }
@media (max-width: 47.99rem) { .cf-bench__price { display: none; } }
@media (min-width: 48rem) { .cf-bench__pricepick { display: none; } }
.cf-bench__for { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-2xs) var(--s-space-s); flex-basis: 100%; }
.cf-bench__empty { max-width: var(--s-max); margin: var(--s-space-l) auto 0; padding-inline: var(--s-gutter-wide); }
.cf-bench__pager { max-width: var(--s-max); margin-inline: auto; padding-inline: var(--s-gutter-wide); }
.cf-bench .cf-rail__item--more { display: flex; align-items: center; justify-content: center; width: auto; }
.cf-wall__tag[aria-current="true"]::before { background-color: var(--s-madder); }
.cf-wall__tag[aria-current="true"] { color: var(--s-tissue); }
@media (max-width: 47.99rem) {
    .cf-bench__empty, .cf-bench__pager { padding-inline: var(--s-gutter); }
}