/* Nursery Lane — shop (Lathhouse Nursery) */
.page-a104-lane .tr-rail { box-shadow: 0 4px 0 var(--a104-primary); }

.page-a104-lane .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nl-stage { padding-bottom: var(--a104-space-8); }
.nl-mast {
  padding: var(--a104-space-6) 0 var(--a104-space-4);
}
.nl-mast .a104-display {
  margin: 0 0 var(--a104-space-2);
  font-size: clamp(2rem, 4.5vw, 3rem);
}
.nl-lede { margin: 0; max-width: 46ch; color: var(--a104-mute); }

/* Irrigation valve row (relative) */
.nl-valve {
  position: relative;
  top: calc(var(--a104-nav-h) + 8px);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 16px;
  margin-bottom: var(--a104-space-5);
  border: 2.5px solid var(--a104-ink);
  border-radius: var(--a104-radius);
  background:
    linear-gradient(180deg, #D4E8DC 0%, #B8D4C4 100%);
  box-shadow: 0 4px 0 var(--a104-timber);
}
.nl-valve-pipe {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--a104-primary-deep), var(--a104-primary), var(--a104-primary-deep));
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.nl-valve > * { position: relative; z-index: 1; }

.nl-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 0;
}
.nl-valve-knob {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--a104-ink);
  background:
    radial-gradient(circle at 40% 35%, #fff 0 18%, transparent 19%),
    conic-gradient(from 0deg, var(--a104-secondary), var(--a104-timber), var(--a104-secondary));
  box-shadow: inset 0 0 0 3px rgba(20, 38, 26, 0.15);
  flex-shrink: 0;
  transition: transform 280ms ease;
}
.nl-valve-knob--small { width: 20px; height: 20px; }
.nl-search:focus-within .nl-valve-knob,
.nl-sort:focus-within .nl-valve-knob {
  transform: rotate(90deg);
}
.nl-search input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 2px solid var(--a104-ink);
  border-radius: var(--a104-radius);
  background: #fff;
}
.nl-search button {
  padding: 10px 14px;
  border: 2px solid var(--a104-ink);
  background: var(--a104-primary);
  color: var(--a104-on-primary);
  font-family: var(--a104-font-display);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--a104-ink);
}
.nl-search button:hover { filter: brightness(1.05); }

.nl-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 160px;
}
.nl-flow-label {
  font-family: var(--a104-font-display);
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
}
.nl-flow-track {
  flex: 1;
  height: 10px;
  min-width: 64px;
  border: 2px solid var(--a104-ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
}
.nl-flow-track i {
  display: block;
  height: 100%;
  width: var(--nl-fill, 0%);
  background: var(--a104-primary);
  transition: width 400ms ease;
}

.nl-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--a104-font-display);
  font-weight: 800;
  font-size: 0.85rem;
}
.nl-sort select {
  padding: 8px 10px;
  border: 2px solid var(--a104-ink);
  border-radius: var(--a104-radius);
  background: #fff;
  cursor: pointer;
}

/* Double rail: pegboard + packet lane */
.nl-rails {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: var(--a104-space-5);
  align-items: start;
}

.nl-pegboard {
  position: relative;
  top: calc(var(--a104-nav-h) + 72px);
  padding: 14px 12px;
  border: 2.5px solid var(--a104-ink);
  border-radius: var(--a104-radius);
  background:
    radial-gradient(circle, rgba(92, 64, 48, 0.35) 1.5px, transparent 2px) 0 0 / 18px 18px,
    linear-gradient(180deg, #E8D4C0 0%, #D8C0A8 100%);
  box-shadow: var(--a104-shadow-clay);
}
.nl-peg-label {
  margin: 0 0 12px;
  font-family: var(--a104-font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a104-mute);
}
.nl-peg {
  margin-bottom: 8px;
  border: 2px solid var(--a104-ink);
  background: rgba(255, 255, 255, 0.72);
}
.nl-peg[open] {
  background: #fff;
  box-shadow: 2px 2px 0 var(--a104-ink);
}
.nl-peg-sum {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: var(--a104-font-display);
  font-weight: 800;
  font-size: 0.95rem;
}
.nl-peg-sum::-webkit-details-marker { display: none; }
.nl-peg-hole {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--a104-ink);
  background: var(--a104-timber);
  flex-shrink: 0;
  transition: transform 220ms ease, background 220ms ease;
}
.nl-peg[open] .nl-peg-hole {
  background: var(--a104-primary);
  transform: scale(1.15);
}
.nl-peg-sum--leaf .nl-peg-hole { background: var(--a104-primary); }
.nl-peg-sum--clay .nl-peg-hole { background: var(--a104-secondary); }
.nl-peg-sum--sun .nl-peg-hole { background: var(--a104-sun); }
.nl-peg-sum--bloom .nl-peg-hole { background: var(--a104-accent); }

.nl-peg-panel {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
  max-height: 220px;
  overflow-y: auto;
}
.nl-peg-panel label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.9rem;
  cursor: pointer;
}
.nl-peg-panel input { margin-top: 3px; accent-color: var(--a104-primary); }
.nl-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--a104-mute);
}
.nl-price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.nl-price-row input {
  width: 100%;
  padding: 8px;
  border: 2px solid var(--a104-ink);
  border-radius: var(--a104-radius);
}
.nl-apply {
  display: inline-flex;
  justify-content: center;
  padding: 10px 14px;
  border: 2px solid var(--a104-ink);
  background: var(--a104-primary);
  color: var(--a104-on-primary);
  font-family: var(--a104-font-display);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--a104-ink);
}

.nl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: var(--a104-space-4);
}
.nl-chip {
  display: inline-flex;
  padding: 6px 10px;
  border: 2px solid var(--a104-ink);
  font-family: var(--a104-font-display);
  font-weight: 700;
  font-size: 0.8rem;
  background: #fff;
}
.nl-chip--leaf { background: #C8F0D8; }
.nl-chip--clay { background: #F5D4C4; }
.nl-chip--sun { background: var(--a104-sun); }
.nl-chip--bloom { background: #FFD6E6; }
.nl-clear {
  font-family: var(--a104-font-display);
  font-weight: 800;
  color: var(--a104-link);
}

.nl-empty {
  padding: 28px;
  border: 2.5px dashed var(--a104-border-strong);
  text-align: center;
  background: var(--a104-field-warm);
}
.nl-empty p { margin: 0 0 14px; color: var(--a104-mute); }

/* 2-col wide packet lanes with soil ledge */
.nl-packets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
.nl-packet {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0;
  border: 2.5px solid var(--a104-ink);
  border-radius: var(--a104-radius);
  background: #FFFCF6;
  overflow: hidden;
  box-shadow: 4px 4px 0 rgba(20, 38, 26, 0.12);
  transition: transform 220ms ease, box-shadow 220ms ease;
  animation: nl-packet-in 480ms ease both;
  animation-delay: calc(var(--nl-i, 0) * 45ms);
}
@keyframes nl-packet-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}
.nl-packet.is-stagger { margin-top: 14px; }
.nl-packet:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--a104-primary);
}
.nl-packet.is-sold-out { opacity: 0.72; }
.nl-packet.is-ripple {
  animation: nl-ripple 420ms ease;
}
@keyframes nl-ripple {
  0% { transform: scale(1); }
  40% { transform: scale(0.985) translateX(2px); }
  100% { transform: scale(1); }
}

.nl-packet-media {
  position: relative;
  display: block;
  background:
    linear-gradient(160deg, var(--a104-field) 0%, var(--a104-field-mist) 100%);
  min-height: 160px;
}
.nl-packet--leaf .nl-packet-media { background: linear-gradient(160deg, #C8F0D8, #EAF7F0); }
.nl-packet--clay .nl-packet-media { background: linear-gradient(160deg, #F5D4C4, #FFF6E8); }
.nl-packet--sun .nl-packet-media { background: linear-gradient(160deg, #FFE066, #FFF6E8); }
.nl-packet--bloom .nl-packet-media { background: linear-gradient(160deg, #FFD6E6, #FFF6E8); }
.nl-packet-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
.nl-sale {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 4px 8px;
  background: var(--a104-accent);
  color: var(--a104-on-accent);
  border: 2px solid var(--a104-ink);
  font-family: var(--a104-font-display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nl-packet-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
  min-width: 0;
  border-left: 2px solid var(--a104-border);
}
.nl-packet-idx {
  font-family: var(--a104-font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--a104-mute);
}
.nl-packet-title {
  margin: 0;
  font-family: var(--a104-font-display);
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.2;
}
.nl-packet-title a { text-decoration: none; color: var(--a104-ink); }
.nl-packet-title a:hover { color: var(--a104-link); }

.nl-soil {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  margin-top: auto;
  border-top: 3px solid var(--a104-timber);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(92, 64, 48, 0.12) 0 3px,
      transparent 3px 7px
    ),
    linear-gradient(180deg, #C4A882 0%, #A88968 100%);
  font-family: var(--a104-font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--a104-ink);
}
.nl-soil span {
  padding: 2px 6px;
  background: rgba(255, 252, 246, 0.75);
  border: 1px solid rgba(20, 38, 26, 0.2);
}

.nl-packet-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--a104-font-display);
}
.nl-packet-price s { color: var(--a104-mute); font-size: 0.9rem; }
.nl-packet-price strong { font-size: 1.15rem; color: var(--a104-primary-deep); }

.nl-packet-cta {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 14px;
  border: 2px solid var(--a104-ink);
  background: var(--a104-secondary);
  color: var(--a104-on-secondary);
  font-family: var(--a104-font-display);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--a104-ink);
  transition: transform 160ms ease;
}
.nl-packet-cta:hover {
  color: var(--a104-on-secondary);
  transform: translate(-1px, -1px);
}
.nl-packet-cta.is-disabled {
  background: #ccc;
  color: var(--a104-mute);
  box-shadow: none;
  pointer-events: none;
}

/* Pagination under lane */
.page-a104-lane .a36-shop-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: var(--a104-space-6);
  padding-top: var(--a104-space-5);
  border-top: 2px dashed var(--a104-border-strong);
}
.page-a104-lane .a36-page-num,
.page-a104-lane .a36-page-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 2px solid var(--a104-ink);
  background: #fff;
  color: var(--a104-ink);
  font-family: var(--a104-font-display);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--a104-timber);
  transition: transform 160ms ease, background 160ms ease;
}
.page-a104-lane .a36-page-num.is-active {
  background: var(--a104-primary);
  color: var(--a104-on-primary);
  box-shadow: 2px 2px 0 var(--a104-ink);
}
.page-a104-lane .a36-page-num:not(.is-active):hover,
.page-a104-lane .a36-page-arrow:hover {
  transform: translate(-1px, -1px);
  background: var(--a104-field);
  color: var(--a104-ink);
}
.page-a104-lane .a36-page-num:focus-visible,
.page-a104-lane .a36-page-arrow:focus-visible {
  outline: 3px solid var(--a104-sun);
  outline-offset: 2px;
}
.page-a104-lane .a36-page-gap {
  font-family: var(--a104-font-display);
  font-weight: 800;
  color: var(--a104-mute);
  padding: 0 4px;
}

@media (max-width: 900px) {
  .nl-packets { grid-template-columns: 1fr; }
  .nl-packet.is-stagger { margin-top: 0; }
}

@media (max-width: 760px) {
  .nl-valve {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }
  .nl-valve-pipe { display: none; }
  .nl-flow { flex: 1 1 auto; }
  .nl-rails { grid-template-columns: 1fr; }
  .nl-pegboard {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .nl-peg-label { grid-column: 1 / -1; }
  .nl-packet {
    grid-template-columns: 110px 1fr;
  }
  .nl-packet-body { padding: 12px; }
}

/* ui-pass:cta */
body.a104-body a.nl-packet-cta,
body.a104-body a.nl-packet-cta:hover { color: var(--a104-on-secondary); }
body.a104-body a.nl-apply,
body.a104-body a.nl-apply:hover { color: var(--a104-on-primary); }
.nl-packet-cta, .nl-search button { min-height: 44px; }
.page-a104-lane .a36-page-num,
.page-a104-lane .a36-page-arrow { min-height: 44px; height: 44px; }
@media (prefers-reduced-motion: reduce) {
  .nl-packet, .nl-valve, .nl-flow { animation: none; transition: none; opacity: 1; transform: none; }
}