/* ===== The Zefyr Flowerpot product page ===== */
.fp__media{display:flex;flex-direction:column;gap:1rem;min-width:0;align-self:start;position:sticky;top:calc(var(--header-h) + 1rem)}
.pd .fp__fig{margin:0;display:flex;justify-content:center;aspect-ratio:auto !important;background:none;overflow:visible}
.fp__fig img,.fp__fig video{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - var(--header-h) - 8rem);object-fit:contain}
.fp__thumbs{display:flex;gap:.6rem;flex-wrap:wrap}
.fp__thumb{position:relative;width:4.5rem;height:4.5rem;padding:0;border:1px solid var(--color-border);background:none;cursor:pointer;overflow:hidden;transition:border-color var(--dur-fast)}
.fp__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.fp__thumb:hover,.fp__thumb:focus-visible{border-color:var(--color-gold-text)}
.fp__thumb.is-active{border-color:var(--color-gold-text);box-shadow:0 0 0 1px var(--color-gold-text)}
.fp__play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.1rem;background:rgb(0 0 0 / .28)}
.fp__body{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-sm);min-width:0}
.fp__body .pd__actions{align-self:flex-start}
.fp__tag{margin:0;font-size:1.125rem;color:var(--color-gold-text);font-style:italic}
.fp__quality{margin:0;color:var(--color-muted);font-size:.9375rem;line-height:1.7}
.fp__sizes{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;border:0;min-width:0}
.fp__sizes legend{padding:0;margin-bottom:.5rem;font-size:.875rem;font-weight:700;letter-spacing:.03em}
.fp__size{display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;border:1px solid var(--color-border);border-radius:999px;cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast)}
.fp__size:hover{border-color:var(--color-gold-text)}
.fp__size:has(input:checked){border-color:var(--color-gold-text);background:rgb(184 147 90 / .1)}
.fp__size input{accent-color:var(--color-gold-text)}
.fp__size small{color:var(--color-muted)}
.fp__size strong{margin-inline-start:auto;font-variant-numeric:tabular-nums}
.fp__larger{margin:.25rem 0 0;color:var(--color-muted);font-size:.875rem;line-height:1.6}
.fp__larger a{color:var(--color-gold-text);text-decoration:underline}
.fp__field{display:flex;flex-direction:column;gap:.5rem;font-size:.875rem}
.fp__field span{font-weight:700;letter-spacing:.03em}
.fp__field select{width:100%;padding:.75rem 1rem;font:inherit;font-size:.9375rem;color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;cursor:pointer}
.fp__field select:hover{border-color:var(--color-gold-text)}
.fp__field select:focus{outline:none;border-color:var(--color-olive);box-shadow:0 0 0 3px rgba(48,58,44,.12)}
.fp__lead{margin:0;color:var(--color-muted);font-size:.875rem;line-height:1.6}
.fp__total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0;padding-top:.5rem;border-top:1px solid var(--color-border);font-size:1.0625rem}
.fp__total strong{font-size:1.375rem;font-variant-numeric:tabular-nums}
.fp__need{margin:0;color:#9b2c2c;font-size:.875rem}
.fp__need[hidden]{display:none}
@media (max-width:760px){.fp__fig img,.fp__fig video{max-height:none}.fp__media{position:static}}

/* Open dropdown list in the same soft pill style (browsers with customizable selects; others keep their native list). */
@supports (appearance: base-select) {
  .fp__field select,.fp__field select::picker(select){appearance:base-select}
  .fp__field select::picker(select){margin-top:.4rem;padding:.5rem;border:1px solid var(--color-border);border-radius:1.5rem;background:var(--color-bg);box-shadow:0 12px 32px rgb(0 0 0 / .12);max-height:min(22rem,60vh)}
  .fp__field select option{padding:.6rem 1rem;border-radius:999px;font:inherit;font-size:.9375rem;color:var(--color-text);cursor:pointer}
  .fp__field select option:hover,.fp__field select option:focus-visible{background:rgb(184 147 90 / .14)}
  .fp__field select option:checked{background:rgb(184 147 90 / .24);font-weight:700}
  .fp__field select option::checkmark{display:none}
}