/* Emitter Rail - Seed Tape Bench nav (Archview)
 Irrigation pipe + colored drip emitters. Fixes: long-label crush,
 pipe/bead alignment, tools wrap, tablet/mobile valve sheet. */

.er-rail {
 position: relative;
 z-index: 900;
 background:
 linear-gradient(180deg, #FBFEFC 0%, var(--a106-field) 72%, #E8F0EA 100%);
 border-bottom: 4px solid var(--a106-soil);
 box-shadow: 0 8px 0 rgba(42, 33, 24, 0.07);
}
.er-rail[data-er-state="open"] {
 z-index: 960;
 box-shadow: 0 10px 0 rgba(42, 33, 24, 0.12);
}

.er-pipe {
 min-height: var(--a106-nav-h);
 display: grid;
 grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr) minmax(0, auto);
 align-items: center;
 gap: 12px 16px;
 padding: 10px 0 12px;
 position: relative;
 isolation: isolate;
}

/* - - Brand - - */
.er-brand {
 display: flex;
 align-items: center;
 gap: 10px;
 text-decoration: none;
 color: var(--a106-ink);
 z-index: 2;
 min-width: 0;
 padding: 6px 10px 6px 4px;
 margin-left: -4px;
 border-radius: var(--a106-radius);
 background: linear-gradient(180deg, #FBFEFC 0%, var(--a106-field) 100%);
}
.er-brand:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 3px;
 border-radius: 8px;
}
.er-valve {
 flex: 0 0 auto;
 width: 38px;
 height: 38px;
 border-radius: 50%;
 border: 3px solid var(--a106-soil);
 background:
 radial-gradient(circle at 32% 30%, #fff 0 26%, transparent 27%),
 conic-gradient(
 var(--a106-drip),
 var(--a106-clay),
 var(--a106-sprout),
 var(--a106-bloom),
 var(--a106-drip)
 );
 box-shadow: var(--a106-hard-sm);
 transition: transform 220ms var(--a106-ease);
}
.er-brand-copy {
 display: flex;
 flex-direction: column;
 line-height: 1.05;
 min-width: 0;
}
.er-brand-copy small {
 font-size: 0.68rem;
 font-weight: 800;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--a106-mute);
}
.er-brand-copy strong {
 font-family: var(--a106-font-display);
 font-size: clamp(1.35rem, 2.2vw, 1.65rem);
 font-weight: 700;
 color: var(--a106-drip-deep);
 letter-spacing: -0.02em;
}
.er-brand:hover .er-brand-copy strong,
.er-brand[aria-current="page"] .er-brand-copy strong {
 color: var(--a106-clay);
}
.er-brand:hover .er-valve {
 transform: rotate(16deg) scale(1.06);
}

/* - - Primary emitters (irrigation pipe lives only under drips) - - */
.er-emitters {
 position: relative;
 display: flex;
 align-items: flex-start;
 justify-content: center;
 flex-wrap: nowrap;
 gap: 4px 6px;
 z-index: 1;
 min-width: 0;
 padding: 2px 8px 0;
 overflow: visible;
}
.er-emitters::before {
 content: "";
 position: absolute;
 left: 4px;
 right: 4px;
 top: 18px;
 height: 9px;
 border-radius: 999px;
 background:
 linear-gradient(
 90deg,
 var(--a106-drip) 0%,
 var(--a106-clay) 32%,
 var(--a106-sprout) 62%,
 var(--a106-bloom) 100%
 );
 box-shadow:
 inset 0 1px 0 rgba(255, 255, 255, 0.35),
 0 2px 0 rgba(42, 33, 24, 0.18);
 opacity: 0.55;
 pointer-events: none;
 z-index: 0;
}
.er-drip {
 position: relative;
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 text-decoration: none;
 color: var(--a106-ink);
 font-weight: 700;
 font-size: 0.78rem;
 flex: 0 1 auto;
 min-width: 0;
 max-width: 7.25rem;
 padding: 0 4px 2px;
 animation: er-bead 520ms var(--a106-ease) both;
 animation-delay: calc(var(--er-i, 0) * 45ms);
}
.er-drip i {
 display: block;
 width: 16px;
 height: 20px;
 margin-top: 10px;
 border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
 border: 2px solid var(--a106-soil);
 box-shadow: var(--a106-hard-sm);
 transition: transform 200ms var(--a106-ease), box-shadow 200ms var(--a106-ease);
 position: relative;
 z-index: 1;
}
.er-drip i::before {
 content: "";
 position: absolute;
 left: 50%;
 top: -12px;
 width: 3px;
 height: 12px;
 transform: translateX(-50%);
 background: var(--a106-soil);
 border-radius: 2px;
 opacity: 0.55;
}
.er-drip--drip i { background: var(--a106-drip); }
.er-drip--clay i { background: var(--a106-clay); }
.er-drip--sprout i { background: var(--a106-sprout); }
.er-drip--bloom i { background: var(--a106-bloom); }
.er-drip span {
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
 max-width: 100%;
 text-align: center;
 line-height: 1.2;
 color: var(--a106-mute);
}
.er-drip:hover i,
.er-drip.is-active i {
 transform: translateY(5px) scale(1.1);
 box-shadow: 2px 6px 0 rgba(42, 33, 24, 0.22);
}
.er-drip:hover span,
.er-drip.is-active span {
 color: var(--a106-ink);
}
.er-drip.is-active span {
 color: var(--a106-drip-deep);
 font-weight: 800;
}
.er-drip:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 3px;
 border-radius: 8px;
}
@keyframes er-bead {
 from { opacity: 0; transform: translateY(-10px); }
 to { opacity: 1; transform: none; }
}

/* - - Tools - - */
.er-tools {
 display: flex;
 align-items: center;
 gap: 8px;
 z-index: 1;
 flex-wrap: nowrap;
 justify-content: flex-end;
 min-width: 0;
}
.er-search {
 display: flex;
 align-items: stretch;
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 box-shadow: var(--a106-hard-sm);
 overflow: hidden;
 background: var(--a106-surface);
 max-width: 15rem;
 min-width: 0;
 flex: 1 1 9rem;
}
.er-search input {
 border: 0;
 padding: 8px 10px;
 min-width: 0;
 width: 100%;
 background: transparent;
 color: var(--a106-ink);
 font: inherit;
 font-size: 0.88rem;
}
.er-search input::placeholder {
 color: var(--a106-placeholder);
 opacity: 1;
}
.er-search input:focus {
 outline: none;
 background: #F3FBFE;
}
.er-search:focus-within {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
}
.er-search button {
 border: 0;
 border-left: 2px solid var(--a106-soil);
 background: var(--a106-sprout);
 color: var(--a106-sprout-ink);
 font-weight: 800;
 font-size: 0.72rem;
 line-height: 1.15;
 padding: 0 10px;
 max-width: 5.5rem;
 white-space: normal;
 cursor: pointer;
 flex: 0 0 auto;
}
.er-search button:hover {
 background: var(--a106-drip);
 color: var(--a106-on-drip);
}
.er-tool {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 min-height: 40px;
 padding: 0 10px;
 text-decoration: none;
 font-weight: 800;
 font-size: 0.75rem;
 line-height: 1.15;
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 box-shadow: var(--a106-hard-sm);
 background: var(--a106-surface);
 color: var(--a106-ink);
 white-space: nowrap;
 max-width: 9.5rem;
 transition: transform 140ms var(--a106-ease), background 160ms ease;
}
.er-tool span {
 overflow: hidden;
 text-overflow: ellipsis;
}
.er-tool:hover {
 transform: translate(-1px, -1px);
 color: var(--a106-ink);
}
.er-tool:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
}
.er-cart {
 background: var(--a106-kraft);
 max-width: 11rem;
}
.er-cart:hover { background: var(--a106-kraft-deep); }
.er-count {
 display: inline-grid;
 place-items: center;
 min-width: 1.35rem;
 height: 1.35rem;
 padding: 0 4px;
 border-radius: 999px;
 border: 1.5px solid var(--a106-soil);
 background: var(--a106-bloom);
 color: var(--a106-on-bloom);
 font-size: 0.7rem;
 font-weight: 800;
 flex: 0 0 auto;
}
.er-track {
 background: var(--a106-field);
 max-width: 8.5rem;
 overflow: hidden;
 text-overflow: ellipsis;
}
.er-track:hover { background: #E0EDE6; }
.er-valve-btn {
 display: none;
 align-items: center;
 justify-content: center;
 min-height: 40px;
 padding: 0 12px;
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 background: var(--a106-drip);
 color: var(--a106-on-drip);
 font-weight: 800;
 font-size: 0.78rem;
 line-height: 1.15;
 box-shadow: var(--a106-hard-sm);
 cursor: pointer;
 white-space: nowrap;
}
.er-valve-btn:hover {
 background: var(--a106-drip-deep);
 color: var(--a106-on-drip);
}
.er-valve-btn:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
}
.er-rail[data-er-state="open"] .er-valve-btn {
 background: var(--a106-clay);
 color: var(--a106-on-clay);
}

/* - - Mobile sheet - - */
.er-sheet {
 position: absolute;
 left: 12px;
 right: 12px;
 top: calc(100% + 6px);
 z-index: 950;
 background: var(--a106-surface);
 border: 3px solid var(--a106-soil);
 border-radius: var(--a106-radius-lg);
 box-shadow: 6px 10px 0 rgba(42, 33, 24, 0.16);
 max-height: min(72vh, 540px);
 overflow: auto;
 transform-origin: top center;
 animation: er-sheet-in 220ms var(--a106-ease) both;
}
.er-sheet[hidden] { display: none !important; }
@keyframes er-sheet-in {
 from { opacity: 0; transform: translateY(-8px) scale(0.98); }
 to { opacity: 1; transform: none; }
}
.er-sheet-inner {
 display: grid;
 gap: 8px;
 padding: 14px;
}
.er-sheet-drip {
 display: flex;
 align-items: center;
 gap: 10px;
 min-height: 48px;
 padding: 12px 14px;
 text-decoration: none;
 font-weight: 800;
 color: var(--a106-ink);
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 background: var(--a106-field);
 box-shadow: var(--a106-hard-sm);
 animation: er-bead 420ms var(--a106-ease) both;
 animation-delay: calc(var(--er-i, 0) * 40ms);
}
.er-sheet-drip::before {
 content: "";
 width: 12px;
 height: 16px;
 flex: 0 0 auto;
 border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
 border: 2px solid var(--a106-soil);
 background: var(--a106-drip);
}
.er-sheet-drip.er-drip--clay::before { background: var(--a106-clay); }
.er-sheet-drip.er-drip--sprout::before { background: var(--a106-sprout); }
.er-sheet-drip.er-drip--bloom::before { background: var(--a106-bloom); }
.er-sheet-drip.er-drip--drip::before { background: var(--a106-drip); }
.er-sheet-drip.is-active,
.er-sheet-drip:hover {
 background: var(--a106-sprout);
 color: var(--a106-sprout-ink);
}
.er-sheet-drip:focus-visible {
 outline: 3px solid var(--a106-drip);
 outline-offset: 2px;
}
.er-sheet-search {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 8px;
 margin-top: 6px;
}
.er-sheet-search input,
.er-sheet-search button {
 min-height: 48px;
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 padding: 0 12px;
 font: inherit;
 font-weight: 700;
}
.er-sheet-search input {
 background: var(--a106-surface);
 color: var(--a106-ink);
 min-width: 0;
}
.er-sheet-search input::placeholder {
 color: var(--a106-placeholder);
 opacity: 1;
}
.er-sheet-search button {
 background: var(--a106-clay);
 color: var(--a106-on-clay);
 font-weight: 800;
 cursor: pointer;
 white-space: nowrap;
}
.er-sheet-search button:hover {
 background: var(--a106-clay-deep);
 color: var(--a106-on-clay);
}

.er-scrim {
 position: fixed;
 inset: 0;
 top: var(--a106-nav-h);
 z-index: 940;
 background: rgba(21, 32, 24, 0.48);
 animation: er-scrim-in 180ms ease both;
}
.er-scrim[hidden] { display: none !important; }
@keyframes er-scrim-in {
 from { opacity: 0; }
 to { opacity: 1; }
}

/* - - Breakpoints - - */
@media (max-width: 1180px) {
 .er-track { display: none; }
 .er-search { max-width: 12rem; flex-basis: 7.5rem; }
 .er-drip { max-width: 6.4rem; font-size: 0.74rem; }
}

@media (max-width: 980px) {
 .er-emitters,
 .er-search,
 .er-track { display: none; }
 .er-valve-btn { display: inline-flex; }
 .er-pipe {
 grid-template-columns: 1fr auto;
 min-height: var(--a106-nav-h);
 padding: 8px 0;
 }
 .er-emitters::before { display: none; }
 .er-tools { gap: 8px; }
 .er-cart { max-width: 10rem; }
}

@media (max-width: 420px) {
 .er-brand-copy strong { font-size: 1.25rem; }
 .er-cart span {
 max-width: 4.8rem;
 overflow: hidden;
 text-overflow: ellipsis;
 }
 .er-valve-btn {
 padding: 0 10px;
 font-size: 0.72rem;
 max-width: 6.5rem;
 white-space: normal;
 line-height: 1.1;
 text-align: center;
 }
}

@media (prefers-reduced-motion: reduce) {
 .er-drip,
 .er-sheet-drip,
 .er-sheet,
 .er-scrim,
 .er-brand:hover .er-valve,
 .er-tool { animation: none !important; transition: none !important; }
}