/* Shared shop styles: plant grid, cards, size chips, Add to tray, tray bar. Used by index.html and order.html. */
:root { --lilac:#d4c4e0; --sage:#6b7c6a; --sage-dark:#4a5a4a; --cream:#f8f6f3; --red:#c0392b; --text:#2c2c2c; --green:#2e7d32; }
.grid { display:grid; grid-template-columns:1fr; gap:0.9rem; margin:1rem; }
@media (min-width:640px) { .grid { grid-template-columns:repeat(2,1fr); } h1 { font-size:1.8rem; } }
@media (min-width:960px) { .grid { grid-template-columns:repeat(3,1fr); } .ph { aspect-ratio:16/9; } }
.card { border:1px solid #e6e6e6; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; background:#fff; transition:border-color .15s, box-shadow .15s; }
.card.in-cart { border-color:var(--sage); box-shadow:0 0 0 2px rgba(107,124,106,.25); }
.card.sold-out { opacity:1; }   /* no fading: it made photos (e.g. Deergrass) look foggy */
.ph { aspect-ratio:5/2; background:linear-gradient(135deg,var(--cream),#ecebe6); display:flex; align-items:center; justify-content:center; color:#8a8f88; font-size:0.85rem; }
.ph { position:relative; overflow:hidden; }
.ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.body { padding:0.9rem; display:flex; flex-direction:column; gap:0.6rem; flex:1; }
.card h3 { font-size:1.1rem; color:var(--sage-dark); line-height:1.3; }
.badge { align-self:flex-start; font-size:0.8rem; font-weight:700; padding:0.2rem 0.6rem; border-radius:999px; }
.badge.ok { background:#e6f4e7; color:var(--green); }
.chip-out { text-decoration:line-through; color:#888; }
.cart-total { font-weight:700; margin-top:.5rem; }
.badge.ask { background:var(--cream); color:var(--sage-dark); border:1px solid #ddd; }
.price { font-size:0.95rem; font-weight:600; color:var(--text); min-height:0; }
.price:empty { display:none; }
.inv-status { margin:0.5rem 1rem; padding:0.6rem 0.8rem; border-radius:8px; background:#fff7e0; color:#5c4a00; font-size:0.9rem; }
.skel { min-height:240px; background:linear-gradient(90deg,#f3f2ef 25%,#faf9f7 50%,#f3f2ef 75%); background-size:200% 100%; animation:sh 1.2s infinite; }
@keyframes sh { to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .skel { animation:none; } }
.badge.out { background:#eee; color:#666; }
.note { font-size:0.85rem; color:#555; }
.chips { display:flex; flex-wrap:wrap; gap:0.4rem; border:0; }
.chips legend { font-size:0.8rem; color:#555; margin-bottom:0.25rem; }
.chip { min-height:44px; padding:0 1rem; border-radius:999px; border:1px solid #bbb; background:#fff; font-size:0.95rem; cursor:pointer; }
.chip[aria-pressed="true"] { border-color:var(--sage-dark); background:var(--sage-dark); color:#fff; }
.row { display:flex; gap:0.5rem; align-items:center; margin-top:auto; }
.stepper { display:flex; border:1px solid #ccc; border-radius:10px; overflow:hidden; }
.stepper button { width:44px; height:44px; border:none; background:var(--cream); color:var(--sage-dark); font-size:1.3rem; font-weight:700; cursor:pointer; touch-action:manipulation; }
.stepper button:disabled { color:#aaa; cursor:default; }
.stepper input { width:46px; height:44px; border:none; border-left:1px solid #ccc; border-right:1px solid #ccc; text-align:center; font-size:1rem; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.add { flex:1; min-height:44px; border:none; border-radius:10px; background:var(--red); color:#fff; font-weight:700; font-size:1rem; cursor:pointer; }
.add:disabled { background:#ccc; color:#666; cursor:not-allowed; }
.incart { font-size:0.85rem; color:var(--green); font-weight:600; min-height:1.2em; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cartbar { position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid #ddd; box-shadow:0 -2px 10px rgba(0,0,0,.08); padding:0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:0.75rem; z-index:50; }
.cartbar[hidden] { display:none; }
.cartbar a { white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; padding:0 1.2rem; background:var(--red); color:#fff; font-weight:700; border-radius:10px; text-decoration:none; }
@media (min-width:960px) { .cartbar { left:auto; right:1.5rem; bottom:1.5rem; border:1px solid #ddd; border-radius:12px; } }
/* ---- subtle "select and go" pickup styling ---- */
.slot { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.72rem; letter-spacing:0.05em; color:#8a8f88; border:1px solid #e3e1db; border-radius:4px; padding:0 0.3rem; margin-right:0.4rem; vertical-align:2px; background:#fafaf8; }
.chips { gap:0.35rem; }
.chips .chip { border-radius:8px; min-height:44px; padding:0 0.75rem; font-size:0.88rem; }
.chip-request { border-style:dashed; color:#555; }
.chip-request[aria-pressed="true"] { background:var(--cream); color:var(--sage-dark); border-style:solid; }
.tax-note { font-weight:400; color:#777; font-size:0.78rem; }
.cartbar { background:linear-gradient(#fbfaf7,#f4f2ec); box-shadow:inset 0 2px 5px rgba(0,0,0,.06), 0 -2px 8px rgba(0,0,0,.06); }
.nw { white-space:nowrap; }
/* Photo credit: tiny, low-key, inside the photo bottom-right (ribbon is bottom-left). Kept a link for license compliance. */
.photo-credit { position:absolute; right:0.3rem; bottom:0.3rem; z-index:3; max-width:calc(100% - 6.2rem);   /* JS fitCredit() widens this to the space the ribbon leaves */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:0.52rem; line-height:1.3; color:rgba(255,255,255,.92); text-decoration:none; text-shadow:0 0 2px rgba(0,0,0,.8), 0 1px 1px rgba(0,0,0,.6); background:rgba(0,0,0,.18); padding:0.05rem 0.3rem; border-radius:3px; }
.photo-credit:hover, .photo-credit:focus-visible { text-decoration:underline; }
.ph .leaf { font-size:1.6rem; opacity:.55; }
/* review-oct20: neutral chips, green only when tapped; compact scroll-and-add layout */
.chips .chip { background:var(--cream); border:1px solid var(--sage); color:var(--text); }
.chips .chip[aria-pressed="true"] { background:var(--green); border-color:var(--green); color:#fff; }
.chips .chip-request { border-style:dashed; }
.ask-note { font-size:0.82rem; color:var(--sage-dark); background:var(--cream); border:1px solid #e3e1db; border-radius:8px; padding:0.3rem 0.5rem; }
.ask-note[hidden] { display:none; }
.stock-notes[hidden] { display:none; }
.stock-note { font-size:0.88rem; color:var(--sage-dark); background:var(--cream); border-left:3px solid var(--sage); border-radius:6px; padding:0.5rem 0.7rem; margin:0.5rem 0; }
.stock-problems { margin:0.4rem 0 0 1.1rem; padding:0; }
.stock-problems li { margin:0.2rem 0; }
.ask-note a { color:var(--sage-dark); font-weight:600; display:inline-flex; align-items:center; min-height:44px; padding:0 0.3rem; }
.grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.6rem; margin:0.75rem 0.6rem; }
@media (min-width:640px) { .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:960px) { .grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ph, .grid .ph { aspect-ratio:1/1; }
.card .body { padding:0.6rem; gap:0.45rem; }
.card h3 { font-size:0.98rem; }
.card .slot { display:none; }
.card .note { font-size:0.75rem; font-style:italic; }
.card .badge { font-size:0.72rem; }
.card .chips .chip { flex:1 1 calc(50% - 0.35rem); min-width:0; padding:0 0.5rem; font-size:0.82rem; text-align:left; }
@media (min-width:640px) { .card .chips .chip { flex:1 1 auto; } }
.card .row { flex-direction:column; align-items:stretch; }
.card .stepper { justify-content:space-between; }
.card .stepper input { flex:1; width:auto; min-width:0; }
.card .add { min-height:48px; font-size:1.02rem; }
.grid-more { height:1px; }
.cartbar .cb-sum { font-weight:700; }
.cartbar .cb-sum small { font-weight:400; color:#666; }
.contact-mail { display:inline-flex; align-items:center; min-height:44px; padding:0 0.25rem; color:var(--sage-dark); font-weight:600; word-break:break-all; }
.ig-link { display:inline-flex; align-items:center; gap:0.35rem; min-height:44px; padding:0 0.25rem; color:inherit; font-weight:600; }
.cartbar button { white-space:nowrap; min-height:44px; padding:0 1.2rem; background:var(--red); color:#fff; font-weight:700; font-size:1rem; border:0; border-radius:10px; cursor:pointer; }
/* subtle vending-machine push buttons (preview) */
.chips .chip, #cartbar-go, .submit-btn { transition:transform 80ms ease-out, box-shadow 80ms ease-out; }
.chips .chip { box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 2px 0 rgba(60,80,60,.18); }
.chips .chip:active { transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(60,80,60,.18); }
.chips .chip[aria-pressed="true"] { transform:translateY(1px); box-shadow:inset 0 2px 3px rgba(0,0,0,.22); }
#cartbar-go, .submit-btn { box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 rgba(0,0,0,.22); }
#cartbar-go { min-height:46px; padding:0 1.3rem; }
#cartbar-go:active, .submit-btn:active { transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 1px 0 rgba(0,0,0,.22); }
@media (prefers-reduced-motion:reduce) { .chips .chip, #cartbar-go, .submit-btn { transition:none; } .chips .chip:active, .chips .chip[aria-pressed="true"], #cartbar-go:active, .submit-btn:active { transform:none; } }
/* juicy preview: honey Add, tray bump, card lift, price tag, badge, friendly confirm */
:root { --honey:#e8b04b; --honey-edge:#b98a2e; }
.card { position:relative; transition:transform 140ms ease-out, box-shadow 140ms ease-out; }
@media (hover:hover) { .card:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(60,80,60,.14); } }
.card.lift { transform:translateY(-2px); box-shadow:0 6px 16px rgba(60,80,60,.14); }
.card .add { background:var(--honey); color:#2c2c2c; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 var(--honey-edge); transition:transform 80ms ease-out, box-shadow 80ms ease-out; }
.card .add:active:not(:disabled) { transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 var(--honey-edge); }
.card .add:disabled { box-shadow:none; }
.ph { position:relative; }
.price-tag { position:absolute; left:6px; bottom:6px; background:var(--cream); color:var(--sage-dark); border:1px solid #e3e1db; border-radius:6px; padding:0 0.4rem; font-size:0.75rem; font-weight:700; line-height:1.5; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.pick-badge { position:absolute; right:6px; top:6px; background:var(--lilac); color:#3a2f45; border-radius:99px; padding:0 0.5rem; font-size:0.7rem; font-weight:700; line-height:1.6; max-width:calc(100% - 12px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick-badge.auto-top { background:#fff; color:var(--red); border:1px solid rgba(192,57,43,.55); }
.pick-badge.auto-pop { background:#dfe9dc; color:#2f4b2f; }
@keyframes bump { 0% { transform:scale(1); } 40% { transform:scale(1.08); } 100% { transform:scale(1); } }
.cartbar .cb-sum { display:inline-block; }
.cartbar .cb-sum.bump { animation:bump 200ms ease-out; }
.confirm .tk-head h2 .tk-check { opacity:1; font-family:inherit; font-weight:700; display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; margin-right:0.45rem; border-radius:50%; background:#fff; color:var(--sage-dark); font-size:0.95rem; vertical-align:-2px; color:var(--sage-dark) !important; animation:pop 260ms ease-out; }
@keyframes pop { 0% { transform:scale(.6); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.size-hint { margin:0; font-size:0.8rem; font-weight:600; color:#8a5a00; min-height:0; }
.size-hint:empty { display:none; }
.chips.nudge .chip:not(.chip-request) { border-color:var(--honey-edge); box-shadow:0 0 0 2px rgba(232,176,75,.45); }
.chips.nudge { animation:nudge 320ms ease-out; }
@keyframes nudge { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
@media (prefers-reduced-motion:reduce) { .chips.nudge { animation:none; } }
@media (prefers-reduced-motion:reduce) { .card, .card .add { transition:none; } .card:hover, .card.lift, .card .add:active:not(:disabled) { transform:none; } .cartbar .cb-sum.bump, .confirm .tk-head h2 .tk-check { animation:none; } }
/* Check out: ghost when the tray is empty, solid + soft glow once it has plants */
.co-btn { transition:background .2s, color .2s, box-shadow .2s, opacity .2s; }
.co-btn.is-empty, .cartbar #cartbar-go.is-empty { background:transparent !important; color:var(--red) !important; border:2px solid rgba(192,57,43,.3) !important; box-shadow:0 0 6px rgba(192,57,43,.12) !important; opacity:.55; cursor:not-allowed; }
.co-btn.has-items, .cartbar #cartbar-go.has-items { background:rgba(192,57,43,.04) !important; color:var(--red) !important; border:2px solid rgba(192,57,43,.55) !important; animation:co-glow 2.4s ease-in-out infinite; }
.co-btn.has-items:hover, .co-btn.has-items:active, .co-btn.has-items:focus-visible, .co-btn.has-items.pressed,
.cartbar #cartbar-go.has-items:hover, .cartbar #cartbar-go.has-items:active, .cartbar #cartbar-go.has-items.pressed { background:var(--red) !important; color:#fff !important; border-color:var(--red) !important; animation:none; box-shadow:0 2px 12px rgba(192,57,43,.45) !important; }
@keyframes co-glow { 0%,100% { box-shadow:0 0 6px rgba(192,57,43,.22), inset 0 0 4px rgba(192,57,43,.08); } 50% { box-shadow:0 0 16px rgba(192,57,43,.42), inset 0 0 8px rgba(192,57,43,.12); } }
@media (prefers-reduced-motion:reduce) { .co-btn.has-items, .cartbar #cartbar-go.has-items { animation:none; box-shadow:0 0 12px rgba(192,57,43,.35); } }
.co-hint { position:fixed; left:50%; top:84px; transform:translateX(-50%); background:var(--sage-dark); color:#fff; font-size:0.85rem; font-weight:600; padding:0.45rem 0.8rem; border-radius:8px; z-index:70; opacity:0; pointer-events:none; transition:opacity .2s; }
.co-hint.show { opacity:1; }

/* Tray navigation: keep shopping, post-order actions */
.keep-shopping { background:none; border:0; color:var(--sage-dark,#4a5a4a); font-weight:700; font-size:0.95rem; padding:0.5rem 0; min-height:44px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.tk-actions { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:0.9rem; }
.confirm .tk-btn, .last-order .tk-btn, .tk-btn { min-height:44px; padding:0 1.1rem; border-radius:10px; font-weight:700; font-size:0.95rem; cursor:pointer; background:#6b7c6a; color:#fff; border:2px solid #6b7c6a; }
.confirm .tk-btn-alt, .last-order .tk-btn-alt, .tk-btn-alt { background:#f3eef8; color:#3a2f45; border-color:#c9b8dc; }
.last-order { margin:0.6rem 1rem 0; text-align:right; }
.last-order[hidden] { display:none; }

/* Thank-you modal (order confirmation). The pixel poppy is the existing SVG, animated in steps. */
.confirm-overlay { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(28,34,28,.6); }
.confirm-overlay[hidden] { display:none; }
.confirm.confirm-modal { position:relative; width:100%; max-width:460px; max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem); overflow-y:auto; overscroll-behavior:contain; margin:0; border:0; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.35); background:#fff; }
.confirm-modal .ty-head { text-align:center; padding:1.4rem 1.2rem 1rem; background:linear-gradient(#fdf3e7,#fff); }
.confirm-modal .ty-head h2 { margin:.35rem 0 .15rem; font-size:1.8rem; color:var(--sage-dark,#4a5a4a); }
.confirm-modal .ty-sub { margin:0; font-size:1.05rem; font-weight:700; color:#5a3a14; }
.confirm-modal .ty-poppy { height:96px; }
.confirm-modal .poppy-grow { width:96px; height:96px; margin:0; display:inline-block; image-rendering:pixelated; animation:none; }
.confirm-modal .tk-body { border-top:2px dashed #d9d6cd; }
.confirm .confirm-x, .confirm-x { position:absolute; margin:0; padding:0; min-height:44px; top:.35rem; right:.35rem; z-index:2; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:#4a5a4a; font-size:1.8rem; line-height:1; cursor:pointer; }
.confirm .confirm-x:hover { background:rgba(0,0,0,.06); }
@media (prefers-reduced-motion:no-preference) {
  .confirm-overlay:not([hidden]) { animation:ty-fade .2s ease-out; }
  .confirm-overlay:not([hidden]) .confirm-modal { animation:ty-pop .35s cubic-bezier(.2,1.3,.4,1); }
  .confirm-overlay:not([hidden]) .poppy-grow .st { transform-box:view-box; transform-origin:6px 12px; animation:ty-stem .48s steps(4,end) .15s both; }
  .confirm-overlay:not([hidden]) .poppy-grow .fl { transform-box:view-box; transform-origin:6px 8px; animation:ty-bloom .6s steps(6,end) .6s both; }
}
@keyframes ty-fade { from { opacity:0; } }
@keyframes ty-pop { from { transform:scale(.9) translateY(16px); opacity:0; } }
@keyframes ty-stem { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes ty-bloom { 0% { transform:scale(0); opacity:0; } 60% { transform:scale(1.2); opacity:1; } 100% { transform:scale(1); opacity:1; } }
html.ty-open, html.ty-open body { overflow:hidden; }

/* Coming soon: no available sizes this week (photo and badge stay) */
.card.coming-soon { opacity:1; }
.soon-pill { display:inline-block; margin-top:0.45rem; padding:0.2rem 0.7rem; border-radius:999px; background:#f3eef8; color:#4b3d5c; border:1px solid #d9cce8; font-size:0.82rem; font-weight:700; letter-spacing:0.01em; }
/* Tray privacy/contact: plain inline links, reliable taps on iOS Safari */
.drawer .tray-privacy { margin-bottom:0; }
.tray-contact { margin-top:0.2rem; line-height:1.6; color:#555; }
.tray-contact a { color:var(--sage-dark); font-weight:600; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; padding:0.35rem 0; -webkit-tap-highlight-color:rgba(0,0,0,0.1); }
/* Plant basics: front card + swipe back, shopping-clear style */
.card.has-basics { display:block; background:#fff; border:1px solid #d6d6d6; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.card-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; height:100%; }
.card-track::-webkit-scrollbar { display:none; }
.pane-front { flex:0 0 100%; scroll-snap-align:start; display:flex; flex-direction:column; min-width:0; }
.pane-basics { flex:0 0 100%; scroll-snap-align:start; position:relative; min-width:0; background:#fff; border-left:1px solid #eee;  }
@media (prefers-reduced-motion:no-preference) { .card-track { scroll-behavior:smooth; } }
.basics-in { position:absolute; inset:0; overflow-y:auto; padding:0.5rem; display:flex; flex-direction:column; gap:0.4rem; color:#111827; }
.form-ribbon { display:inline-block; white-space:nowrap; background:var(--sage); color:#fff; font-weight:800; font-size:0.66rem; letter-spacing:.06em; text-transform:uppercase; padding:0.15rem 0.55rem; border-radius:4px; }
.form-ribbon.on-photo { position:absolute; left:0.45rem; bottom:0.45rem; z-index:2; }
.card.has-basics .price-tag { bottom:auto; top:0.45rem; left:0.45rem; }
.basics-go { align-self:flex-start; background:#fff; border:1.5px solid var(--sage); color:#1f2937; border-radius:999px; padding:0.15rem 0.7rem; min-height:32px; font-size:0.8rem; font-weight:700; cursor:pointer; }
.basics-go:hover { background:#eef2ee; }
.basics-hd { display:flex; align-items:center; gap:0.4rem; }
.basics-back { background:#f3f4f6; border:1px solid #d1d5db; border-radius:50%; width:28px; height:28px; font-size:1.1rem; line-height:1; color:#111827; cursor:pointer; flex:none; }
.basics-tag { margin:0; font-weight:700; font-size:0.8rem; line-height:1.2; color:#111827; }
.care, .feats { display:flex; flex-direction:column; gap:0.25rem; }
.feats { display:grid; grid-template-columns:1fr; }
.fchip { display:flex; align-items:center; gap:0.35rem; background:#f7f7f7; border:1px solid #e5e7eb; border-radius:8px; padding:0.15rem 0.35rem; min-height:26px; }
.fchip-i { display:flex; flex:none; }
.fchip-t { font-size:0.72rem; font-weight:800; line-height:1.1; color:#111827; }
.bi { width:20px; height:20px; display:block; } .water .bi { width:13px; height:18px; } .bi.off { filter:grayscale(1); opacity:.3; }
.care .water { background:#eff6ff; border-color:#bfdbfe; } .care .sun { background:#fffbeb; border-color:#fde68a; } .care .soil { background:#fdf6ee; border-color:#ead7c0; }
.seasons { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.sp { text-align:center; font-size:0.66rem; font-weight:800; border-radius:999px; padding:0.15rem 0; background:#f3f4f6; color:#9ca3af; }
.sp.on.sp-W { background:#3b82f6; color:#fff; } .sp.on.sp-Sp { background:#ec4899; color:#fff; } .sp.on.sp-Su { background:#f59e0b; color:#fff; } .sp.on.sp-F { background:#c2410c; color:#fff; }
.size { display:flex; align-items:flex-end; gap:0.4rem; }
.size-art { width:72px; height:38px; flex:none; }
.size-v { display:flex; flex-direction:column; font-size:0.74rem; color:#111827; line-height:1.2; }
.basics-fine { margin:0; margin-top:auto; font-size:0.6rem; color:#6b7280; }
.pane-basics.tall .basics-in { gap:0.5rem; padding:0.65rem 0.55rem; }
.pane-basics.tall .basics-tag { font-size:0.9rem; }
.pane-basics.tall .fchip { min-height:34px; padding:0.25rem 0.45rem; }
.pane-basics.tall .fchip-t { font-size:0.82rem; }
.pane-basics.tall .bi { width:24px; height:24px; }
.pane-basics.tall .water .bi { width:16px; height:22px; }
.pane-basics.tall .sp { font-size:0.74rem; padding:0.25rem 0; }
.pane-basics.tall .size-art { width:100px; height:54px; }
.pane-basics.tall .size-v { font-size:0.86rem; }
.basics-in { gap:0.3rem; } .fchip { min-height:22px; padding:0.1rem 0.35rem; } .size-v { white-space:nowrap; } .size-art { width:60px; height:34px; }
.pane-basics.tall .basics-in { gap:0.5rem; }
.pane-basics.tall .fchip { min-height:34px; padding:0.25rem 0.45rem; }
.pane-basics.tall .size-art { width:90px; height:50px; }

/* v5: seamless back (no chip bubbles), section dividers, dots, flippable photo */
.fchip, .care .water, .care .sun, .care .soil { background:none; border:0; border-radius:0; padding:0.05rem 0; min-height:0; }
.care, .feats { gap:0.2rem; }
.care, .seasons, .feats, .size { padding-top:0.35rem; border-top:1px solid #ececec; }
.basics-hd + .basics-tag, .basics-tag { padding-bottom:0.05rem; }
.flip-dots { display:flex; justify-content:center; gap:5px; padding:5px 0 0; }
.flip-dots i { width:6px; height:6px; border-radius:50%; background:#d1d5db; display:block; }
.flip-dots i.on { background:var(--sage); }
.pane-basics .flip-dots { padding:0; }
.ph.flippable { cursor:pointer; }
.ph.flippable:focus-visible, .pane-basics:focus-visible { outline:3px solid var(--sage); outline-offset:-3px; }
.pane-basics { cursor:pointer; }
.size-art { width:84px; height:44px; }
.pane-basics.tall .fchip { min-height:30px; padding:0.1rem 0; }
.pane-basics.tall .care,.pane-basics.tall .feats { gap:0.3rem; }
.pane-basics.tall .size-art { width:110px; height:58px; }
.pane-basics.tall .size-art { width:92px; height:48px; }
.pane-basics.tall .size-v { font-size:0.8rem; }
.pane-basics.compact .care,.pane-basics.compact .seasons,.pane-basics.compact .feats,.pane-basics.compact .size { padding-top:0.2rem; }
.pane-basics.compact .basics-in { gap:0.22rem; padding:0.4rem 0.5rem; }
.pane-basics.compact .size-art { width:66px; height:35px; }
.pane-basics.compact .pane-basics .flip-dots { display:none; }
.pane-basics.compact .basics-tag { font-size:0.74rem; }

/* v7: calm bloom row */
.seasons { display:flex; flex-direction:column; gap:0.2rem; }
.bloom-h { display:flex; align-items:center; gap:0.35rem; }
.bloom-s { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.seasons .sp { background:#fff; color:#9ca3af; border:1px solid #d1d5db; border-radius:999px; font-weight:700; }
.seasons .sp.on { background:#8b5cf6; border-color:#8b5cf6; color:#fff; }
/* v11: size row never crowds the edge */
.size { gap:0.3rem; padding-right:0.35rem; min-width:0; }
.size-art { width:64px !important; height:34px !important; flex:0 0 auto; }
.size-v { font-size:0.72rem !important; min-width:0; }
.pane-basics.tall .size-art { width:76px !important; height:40px !important; }
.pane-basics.tall .size-v { font-size:0.76rem !important; }
.pane-basics.compact .basics-in { gap:0.15rem; padding:0.35rem 0.45rem; }
.pane-basics.compact .fchip { min-height:0; padding:0; }
.pane-basics.compact .fchip-t { font-size:0.66rem; }
.pane-basics.compact .bi { width:16px; height:16px; }
.pane-basics.compact .water .bi { width:11px; height:15px; }
.pane-basics.compact .care,.pane-basics.compact .feats { gap:0.1rem; }
.pane-basics.compact .care,.pane-basics.compact .seasons,.pane-basics.compact .feats,.pane-basics.compact .size { padding-top:0.15rem; }
.pane-basics.compact .seasons .sp { font-size:0.6rem; padding:0.05rem 0; }
.pane-basics.compact .size-art { width:56px !important; height:30px !important; }
.pane-basics.compact .form-ribbon { font-size:0.6rem; padding:0.1rem 0.45rem; }
.pane-basics.tall .basics-in { justify-content:space-evenly; } .pane-basics.tall .basics-fine { margin-top:0; }

/* Swipe via transform (iOS-reliable) + uniform compact card height */
.card.has-basics { --card-h:440px; height:var(--card-h); overflow:hidden; }
.card.has-basics .card-track { overflow:visible; scroll-snap-type:none; touch-action:pan-y; height:100%; transform:translateX(0); transition:transform .32s cubic-bezier(.2,.8,.2,1); will-change:transform; }
@media (prefers-reduced-motion:reduce) { .card.has-basics .card-track { transition:none; } }
.card.has-basics .pane-front { height:100%; overflow:hidden; }
.card.has-basics .ph { aspect-ratio:4/3; flex:none; }
.card.has-basics .pane-front .body { flex:1; min-height:0; }
.card.has-basics h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card.has-basics .row { margin-top:auto; }
.card.has-basics .ph { aspect-ratio:5/4; }   /* taller: the credit line below the photo moved inside it */
.card.has-basics .body { gap:0.35rem; padding:0.5rem 0.55rem 0.55rem; }
.card.has-basics .badge { font-size:0.68rem; padding:0.1rem 0.45rem; line-height:1.25; }
.card.has-basics .ask-note { font-size:0.7rem; padding:0.15rem 0.4rem; line-height:1.3; }
.card.has-basics .chips legend { font-size:0.72rem; }
.card.has-basics .chips .chip { min-height:36px; }
.card.has-basics .stepper button, .card.has-basics .stepper input { min-height:38px; }
.card.has-basics .add { min-height:42px; }
.card.has-basics .flip-dots { padding-top:3px; }
.card.has-basics { --card-h:436px; }
.grid > .card { --card-h:436px; height:var(--card-h); overflow:hidden; }
.card.has-basics .pane-basics.compact .basics-in { justify-content:space-evenly; } .card.has-basics .pane-basics.compact .basics-fine { margin-top:0; }

/* Card back: faded front photo behind everything; cards without a photo keep a plain cream back */
.pane-basics { background:var(--cream,#faf7f0); --bg-op:.2; }
.pane-basics .back-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:var(--bg-op); filter:saturate(.7) blur(1.5px); transform:scale(1.04); pointer-events:none; z-index:0; }
.pane-basics.has-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(250,247,240,.35),rgba(250,247,240,.15)); pointer-events:none; z-index:0; }
.pane-basics .basics-in { z-index:1; }
.pane-basics.has-bg .fchip-t, .pane-basics.has-bg .size-v { text-shadow:0 0 3px rgba(250,247,240,.95), 0 0 1px rgba(250,247,240,.95); }
html.bg-light .pane-basics { --bg-op:.12; } html.bg-strong .pane-basics { --bg-op:.3; }

/* Clean photo panel (third panel) */
.pane-clean { flex:0 0 100%; position:relative; min-width:0; height:100%; overflow:hidden; cursor:pointer; background:var(--cream,#faf7f0); }
.pane-clean img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pane-clean .flip-dots.on-clean { position:absolute; left:0; right:0; bottom:8px; padding:0; }
.pane-clean .flip-dots i { background:rgba(255,255,255,.7); } .pane-clean .flip-dots i.on { background:var(--sage); }

/* Stock cap + low-stock (no numbers). Subtle amber alert accent. */
.incart.low-tag { color:#b45309; font-weight:700; }
.incart.low-tag::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#d97706; margin-right:6px; vertical-align:1px; }
.incart.cap-msg { color:#9a3412; font-weight:600; }
.stepper button.at-cap:disabled { background:#efeee9; color:#c7c5bd; }
.tray-cap { display:block; flex-basis:100%; font-size:0.78rem; color:#9a3412; }
.clamp-note { font-size:0.85rem; color:#9a3412; background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:0.4rem 0.6rem; margin:0 0 0.5rem; }
.tq button:disabled { color:#c7c5bd; background:#efeee9; cursor:default; }

.pane-clean .photo-credit { max-width:calc(100% - 0.6rem); bottom:1.6rem; }   /* clean panel: full width, sits above the dots */