/*
 * 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; }

/* 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 / span 10; 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__head .cf-rail-ctrl { grid-column: 11 / -1; justify-self: end; }
.cf-bench__rail { margin-top: var(--s-space-l); }
.cf-bench .cf-rail__item { width: var(--s-bench-card); }
.cf-bench .cf-rail__item[hidden] { display: none; }
.cf-bench .cf-rail__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; }
    .cf-bench__head .cf-rail-ctrl { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 47.99rem) {
    .cf-bench__head { padding-inline: var(--s-gutter); }
    .cf-bench__head .cf-rail-ctrl { display: none; }
    .cf-bench .cf-rail__item { width: var(--s-rail-card-phone); }
    .cf-bench__filters .cf-tags {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + var(--s-gutter) * 2);
        margin-inline: calc(var(--s-gutter) * -1); padding: var(--s-focus-w) var(--s-gutter) calc(var(--s-focus-w) + var(--s-focus-offset));
    }
    .cf-bench__filters .cf-tags::-webkit-scrollbar { display: none; }
    .cf-bench__filters li { flex: none; }
}

/* ---- #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)); }
}