/* Greenhouse Flat - Seed Tape Bench shop (Appily-OneHundredSix)
 Sticky glaze bar | dibble-tool filters | shared-border plug-flat tray.
 Unique vs catalog. NOT Furrow kraft packets, Tessera Rack, or Drift mosaic.
 Layout: relative filter glaze; trailing dibble panels right-align;
 glaze-bar wrap/row-gap; tray minmax(0); page overflow-x clip. */

.page-a106-flat { overflow-x: clip; }

.fl-stage {
 background:
 linear-gradient(180deg, rgba(10, 126, 164, 0.06) 0%, transparent 22%),
 var(--a106-field);
}

.fl-mast {
 padding: clamp(28px, 4vw, 52px) 0 16px;
}
.fl-brand {
 margin: 0 0 6px;
 font-family: var(--a106-font-display);
 font-size: clamp(1.55rem, 3.2vw, 2.15rem);
 font-weight: 700;
 color: var(--a106-drip);
 letter-spacing: -0.02em;
 line-height: 1.15;
}
.fl-mast h1 {
 margin: 0 0 8px;
 font-family: var(--a106-font-body);
 font-size: clamp(1.05rem, 2vw, 1.25rem);
 font-weight: 800;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--a106-ink);
}
.fl-lede {
 margin: 0;
 max-width: 46ch;
 color: var(--a106-mute);
}

/* Greenhouse glaze bar (scrolls with page — not sticky) */
.fl-glaze {
 position: relative;
 z-index: 40;
 margin-bottom: 0;
 padding: 12px 0 14px;
 background:
 linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(238, 246, 241, 0.92)),
 repeating-linear-gradient(
 90deg,
 transparent 0 48px,
 rgba(10, 126, 164, 0.06) 48px 49px
 );
 backdrop-filter: blur(8px);
 border-bottom: 4px solid var(--a106-drip);
 box-shadow: 0 10px 28px rgba(21, 32, 24, 0.08);
}

.fl-glaze-bar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 12px;
 row-gap: 10px;
 margin-bottom: 12px;
}
.fl-search {
 flex: 1 1 220px;
 display: flex;
 gap: 0;
 min-width: 0;
}
.fl-search input {
 flex: 1;
 min-width: 0;
 min-height: 46px;
 padding: 0 14px;
 border: 2px solid var(--a106-soil);
 border-right: 0;
 border-radius: var(--a106-radius) 0 0 var(--a106-radius);
 background: var(--a106-surface);
}
.fl-search button {
 min-height: 46px;
 padding: 0 16px;
 border: 2px solid var(--a106-soil);
 border-radius: 0 var(--a106-radius) var(--a106-radius) 0;
 background: var(--a106-drip);
 color: var(--a106-on-drip);
 font-family: var(--a106-font-body);
 font-weight: 800;
 white-space: nowrap;
 cursor: pointer;
 transition: background 160ms ease, transform 140ms var(--a106-ease);
}
.fl-search button:hover { background: var(--a106-drip-deep); }
.fl-search button:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
 z-index: 1;
}
.fl-search input:focus {
 outline: none;
 border-color: var(--a106-drip);
 box-shadow: 0 0 0 3px rgba(10, 126, 164, 0.22);
 position: relative;
 z-index: 1;
}
.fl-count {
 display: grid;
 grid-template-columns: auto 1fr;
 grid-template-rows: auto auto;
 gap: 0 8px;
 align-items: center;
 min-width: 88px;
 padding: 6px 10px;
 background: var(--a106-soil);
 color: var(--a106-on-soil);
 border-radius: 2px;
 clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.fl-count strong {
 font-family: var(--a106-font-display);
 font-size: 1.35rem;
 grid-row: 1 / 3;
}
.fl-count span {
 font-size: 0.7rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 opacity: 0.85;
}
.fl-count-fill {
 display: block;
 height: 4px;
 border-radius: 999px;
 background: rgba(244, 248, 242, 0.25);
 overflow: hidden;
 grid-column: 2;
}
.fl-count-fill::after {
 content: "";
 display: block;
 height: 100%;
 width: var(--fl-fill, 0%);
 background: var(--a106-sprout);
 transition: width 320ms var(--a106-ease);
}
.fl-sort {
 display: flex;
 align-items: center;
 gap: 8px;
 font-weight: 700;
 font-size: 0.88rem;
 color: var(--a106-mute);
}
.fl-sort select {
 min-height: 42px;
 padding: 0 10px;
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 background: var(--a106-surface);
 color: var(--a106-ink);
 font-weight: 700;
}

/* Dibble tools (keeps .fm-bead / .fm-bead-lid / .fm-bead-panel for JS) */
.fl-dibbles {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 position: relative;
}
.fm-bead.fl-dibble { position: relative; }
.fm-bead-lid.fl-dibble-lid {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-height: 44px;
 padding: 0 16px 0 10px;
 border: 2px solid var(--a106-soil);
 border-radius: 0;
 background: var(--a106-surface);
 color: var(--a106-ink);
 font-weight: 800;
 cursor: pointer;
 clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
 box-shadow: 2px 2px 0 var(--a106-soil);
 transition: transform 140ms ease, background 160ms ease, color 160ms ease;
}
.fm-bead-lid.fl-dibble-lid:hover {
 background: var(--a106-kraft);
 transform: translateY(-2px);
}
.fm-bead-lid.fl-dibble-lid:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
}
.fm-dot.fl-tip {
 width: 0;
 height: 0;
 border-radius: 0;
 border: 0;
 border-left: 7px solid transparent;
 border-right: 7px solid transparent;
 border-top: 12px solid var(--a106-mute);
 background: transparent;
}
.fl-dibble-lid--clay .fl-tip { border-top-color: var(--a106-clay); }
.fl-dibble-lid--drip .fl-tip { border-top-color: var(--a106-drip); }
.fl-dibble-lid--bloom .fl-tip { border-top-color: var(--a106-bloom); }
.fl-dibble-lid--sprout .fl-tip { border-top-color: var(--a106-sprout); }
.fm-bead.fl-dibble.is-open .fm-bead-lid.fl-dibble-lid {
 background: var(--a106-clay);
 color: var(--a106-on-clay);
 transform: translateY(-3px);
}
.fm-bead.fl-dibble.is-open .fl-dibble-lid--drip { background: var(--a106-drip); color: var(--a106-on-drip); }
.fm-bead.fl-dibble.is-open .fl-dibble-lid--bloom { background: var(--a106-bloom); color: var(--a106-on-bloom); }
.fm-bead.fl-dibble.is-open .fl-dibble-lid--sprout { background: var(--a106-sprout); color: var(--a106-sprout-ink); }
.fm-bead.fl-dibble.is-open .fl-tip {
 animation: fl-dibble-dip 420ms var(--a106-ease);
 border-top-color: var(--a106-surface);
}
@keyframes fl-dibble-dip {
 0% { transform: translateY(-5px); }
 55% { transform: translateY(3px); }
 100% { transform: none; }
}

.fm-bead-panel.fl-dibble-panel {
 position: absolute;
 top: calc(100% + 8px);
 left: 0;
 z-index: 50;
 min-width: min(280px, 80vw);
 max-height: 280px;
 overflow: auto;
 padding: 12px;
 background: var(--a106-surface);
 border: 2px solid var(--a106-soil);
 box-shadow: var(--a106-hard);
 display: grid;
 gap: 8px;
 border-radius: 0;
}
/* Crop/pack (trailing beads) open left so panels stay in viewport */
[data-fm-bead]:nth-last-child(-n+2) .fm-bead-panel.fl-dibble-panel {
 left: auto;
 right: 0;
}
.fm-bead-panel.fl-dibble-panel[hidden] { display: none !important; }
.fm-bead-panel.fl-dibble-panel label {
 display: flex;
 gap: 8px;
 align-items: flex-start;
 font-size: 0.92rem;
 cursor: pointer;
}
.fl-note {
 margin: 0;
 font-size: 0.82rem;
 color: var(--a106-mute);
}
.fl-price-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
}
.fl-price-row input {
 min-height: 40px;
 padding: 0 10px;
 border: 2px solid var(--a106-border);
 border-radius: var(--a106-radius);
 width: 100%;
}
.fl-apply {
 min-height: 40px;
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 background: var(--a106-drip);
 color: var(--a106-on-drip);
 font-family: var(--a106-font-body);
 font-weight: 800;
 cursor: pointer;
 transition: background 160ms ease, transform 140ms var(--a106-ease);
}
.fl-apply:hover { background: var(--a106-drip-deep); transform: translate(-1px, -1px); }
.fl-apply:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
}
.fl-apply:active { transform: translate(1px, 1px); }

.fl-active {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 margin-top: 12px;
 min-height: 8px;
}
.fl-chip {
 display: inline-flex;
 padding: 4px 10px;
 font-size: 0.78rem;
 font-weight: 800;
 background: var(--a106-surface);
 border: 2px solid var(--a106-soil);
 border-radius: 2px;
 color: var(--a106-ink);
}
.fl-chip--clay { background: rgba(196, 92, 38, 0.12); color: var(--a106-clay-deep); }
.fl-chip--drip { background: rgba(10, 126, 164, 0.12); color: var(--a106-drip-deep); }
.fl-chip--bloom { background: rgba(225, 29, 116, 0.1); color: var(--a106-bloom-deep); }
.fl-chip--sprout { background: rgba(198, 245, 66, 0.35); color: var(--a106-sprout-ink); }
.fl-clear {
 font-weight: 800;
 font-size: 0.85rem;
 color: var(--a106-bloom-deep);
 background: none;
 border: 0;
 cursor: pointer;
 text-decoration: underline;
 text-underline-offset: 3px;
 padding: 4px 2px;
}
.fl-clear:hover { color: var(--a106-bloom); }
.fl-clear:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
 border-radius: 4px;
}

/* Plug-flat germination tray - shared borders, not floating cards */
.fl-tray-wrap {
 padding: 0 0 var(--a106-space-6);
 margin-top: 0;
}
.fl-empty {
 margin-top: 28px;
 padding: 40px 24px;
 text-align: center;
 background: var(--a106-kraft);
 border: 3px dashed var(--a106-soil);
}
.fl-empty p { color: var(--a106-mute); margin: 0 0 16px; }
.fl-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px;
 min-width: 9rem;
 padding: 0 var(--a106-space-3);
 font-family: var(--a106-font-body);
 font-weight: 800;
 text-decoration: none;
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 box-shadow: var(--a106-hard-sm);
 transition: transform 140ms var(--a106-ease), box-shadow 140ms ease, background 160ms ease;
}
.fl-btn--primary {
 background: var(--a106-clay);
 color: var(--a106-on-clay);
}
.fl-btn--primary:hover {
 background: var(--a106-clay-deep);
 color: var(--a106-on-clay);
 transform: translate(-1px, -1px);
}
.fl-btn:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
}
.fl-btn:active {
 transform: translate(2px, 2px);
 box-shadow: 1px 1px 0 var(--a106-soil);
}

.fl-tray {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
 gap: 0;
 margin-top: 24px;
 border: 3px solid var(--a106-soil);
 background: var(--a106-soil);
 box-shadow: var(--a106-hard);
}
.fl-cell {
 display: flex;
 flex-direction: column;
 min-width: 0;
 background: var(--a106-surface);
 border: 1px solid var(--a106-soil);
 margin: 0;
 box-shadow: none;
 border-radius: 0;
 overflow: hidden;
 opacity: 0;
 transform: scale(0.96);
 transition: background 180ms ease;
}
.fl-tray.is-live .fl-cell {
 animation: fl-cell-sprout 520ms var(--a106-ease) both;
 animation-delay: calc(var(--fl-i, 0) * 35ms);
}
@keyframes fl-cell-sprout {
 to { opacity: 1; transform: none; }
}
.fl-cell:hover {
 background: var(--a106-field);
 z-index: 1;
}
.fl-cell--drip { box-shadow: inset 0 3px 0 var(--a106-drip); }
.fl-cell--clay { box-shadow: inset 0 3px 0 var(--a106-clay); }
.fl-cell--bloom { box-shadow: inset 0 3px 0 var(--a106-bloom); }
.fl-cell--sprout { box-shadow: inset 0 3px 0 var(--a106-sprout); }
.fl-cell--soil { box-shadow: inset 0 3px 0 var(--a106-soil); }
.fl-cell.is-sold-out { opacity: 0.7; filter: grayscale(0.3); }

.fl-media {
 position: relative;
 display: block;
 aspect-ratio: 1;
 background: var(--a106-field);
 overflow: hidden;
 border-bottom: 1px solid var(--a106-border);
}
.fl-media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 280ms var(--a106-ease);
}
.fl-cell:hover .fl-media img { transform: scale(1.05); }
.fl-sale {
 position: absolute;
 top: 0;
 right: 0;
 z-index: 1;
 padding: 4px 10px;
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 background: var(--a106-bloom);
 color: var(--a106-on-bloom);
 border-left: 2px solid var(--a106-soil);
 border-bottom: 2px solid var(--a106-soil);
}

.fl-meta {
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 12px 12px 14px;
 flex: 1;
}
.fl-title {
 margin: 0;
 font-family: var(--a106-font-display);
 font-size: 1.02rem;
 font-weight: 600;
 line-height: 1.25;
}
.fl-title a {
 color: var(--a106-ink);
 text-decoration: none;
}
.fl-title a:hover { color: var(--a106-drip-deep); }
.fl-price {
 margin: 0;
 display: flex;
 align-items: baseline;
 gap: 8px;
}
.fl-price s {
 color: var(--a106-mute);
 font-size: 0.85rem;
}
.fl-price strong {
 color: var(--a106-clay-deep);
 font-size: 1.1rem;
}
.fl-cta {
 margin-top: auto;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 42px;
 padding: 0 12px;
 font-family: var(--a106-font-body);
 font-weight: 800;
 font-size: 0.88rem;
 text-decoration: none;
 border: 2px solid var(--a106-soil);
 border-radius: 0;
 background: var(--a106-drip);
 color: var(--a106-on-drip);
 transition: background 160ms ease, transform 140ms var(--a106-ease);
}
.fl-cta:hover {
 background: var(--a106-drip-deep);
 color: var(--a106-on-drip);
 transform: translateY(-1px);
}
.fl-cta:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
}
.fl-cta:active { transform: translateY(1px); }
.fl-cta.is-disabled {
 background: var(--a106-mute);
 color: var(--a106-on-soil);
 pointer-events: none;
}

.page-a106-flat .a36-shop-pagination {
 margin-top: 28px;
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 justify-content: center;
 align-items: center;
}
.page-a106-flat .a36-page-num,
.page-a106-flat .a36-page-arrow {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 42px;
 min-height: 42px;
 padding: 0 12px;
 text-decoration: none;
 font-weight: 800;
 color: var(--a106-ink);
 background: var(--a106-surface);
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 box-shadow: var(--a106-hard-sm);
}
.page-a106-flat .a36-page-num:hover,
.page-a106-flat .a36-page-arrow:hover {
 background: var(--a106-kraft);
 color: var(--a106-ink);
 transform: translate(-1px, -1px);
}
.page-a106-flat .a36-page-num.is-current,
.page-a106-flat .a36-page-num[aria-current="page"] {
 background: var(--a106-drip);
 color: var(--a106-on-drip);
}
.page-a106-flat .a36-page-gap {
 font-weight: 800;
 color: var(--a106-mute);
 padding: 0 4px;
}
.page-a106-flat .a36-page-num:focus-visible,
.page-a106-flat .a36-page-arrow:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
}

@media (max-width: 720px) {
 .fl-search { flex: 1 1 100%; width: 100%; }
 .fm-bead-panel.fl-dibble-panel { left: 0; right: auto; }
 [data-fm-bead]:nth-last-child(-n+2) .fm-bead-panel.fl-dibble-panel {
 left: auto;
 right: 0;
 }
 .fl-tray { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
 .fl-tray { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
 .fl-tray.is-live .fl-cell,
 .fm-bead.fl-dibble.is-open .fl-tip { animation: none !important; opacity: 1; transform: none; }
}