/* ===========================================================================
SeedSearch.com — stylesheet
Approach: calm, trustworthy B2B agricultural look. Warm off-white catalog
background, deep cascade-green accent, generous spacing, system type stack
so it renders fast and feels native on iOS and Windows alike.
=========================================================================== */
/* ---------- Custom properties ---------- */
:root {
/* Color */
--ss-bg: #F6F5F1; /* warm catalog off-white */
--ss-surface: #FFFFFF;
--ss-surface-2: #FBFAF6; /* faintly warmer surface */
--ss-border: rgba(20, 26, 22, 0.10);
--ss-border-strong:rgba(20, 26, 22, 0.18);
--ss-text: #1A1F1B;
--ss-text-2: #4B5249;
--ss-muted: #76817A;
--ss-accent: #2D6A4F; /* deep cascade green */
--ss-accent-hover: #245840;
--ss-accent-press: #1B4131;
--ss-accent-soft: #E3EFE8;
--ss-accent-fg: #FFFFFF;
--ss-info: #1F4FA8;
--ss-info-soft: #E6EDF8;
--ss-success: #1E7A4D;
--ss-success-soft: #E2F2EA;
--ss-error: #B3261E;
--ss-error-soft: #FBE7E5;
/* Type */
--ss-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
"Inter", Roboto, Helvetica, Arial, sans-serif;
--ss-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
"Segoe UI", "Inter", system-ui, sans-serif;
/* Spacing scale */
--ss-sp-1: 4px; --ss-sp-2: 8px; --ss-sp-3: 12px; --ss-sp-4: 16px;
--ss-sp-5: 20px; --ss-sp-6: 24px; --ss-sp-8: 32px; --ss-sp-10: 40px;
--ss-sp-12: 48px;
/* Radius */
--ss-r-sm: 10px;
--ss-r-md: 14px;
--ss-r-lg: 22px;
/* Shadow */
--ss-shadow-1: 0 1px 2px rgba(20, 26, 22, 0.05),
0 1px 3px rgba(20, 26, 22, 0.06);
--ss-shadow-2: 0 4px 12px rgba(20, 26, 22, 0.08);
--ss-header-h: 88px;
--ss-tabbar-h: 64px;
}
/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
/* Always reserve space for the vertical scrollbar so the layout doesn't
shift left when content (e.g. the autocomplete suggest panel) briefly
pushes the document past viewport height. */
scrollbar-gutter: stable;
/* Belt-and-suspenders horizontal-scroll guard.
*
* iPads — especially ones paired with a Magic Keyboard / trackpad —
* sometimes report `pointer: fine` and bypass the touch media query,
* so the previous touch-only fix didn't catch them. Hoisting these
* declarations to the root means they apply everywhere; safe on
* desktop and phone too because neither currently overflows
* horizontally, so the rules are visually no-ops there.
*
* `overflow-x: hidden` is the broadly-supported clip. `overflow-x: clip`
* (below, via @supports) is stronger on modern browsers — the element
* isn't a scroll container at all, so iOS Safari's touch-drag
* rubber-band scroll is killed dead instead of just being hidden.
*
* `overscroll-behavior-x: none` is the final piece. Even with
* `overflow-x: clip`, iOS Safari can still let the user touch-drag
* the page a few pixels horizontally before snapping back (the
* "rubber band" effect). overscroll-behavior-x: none disables that
* elastic bounce on the X axis specifically, which is the actual
* cause of the remaining slight horizontal scroll on iPad. Vertical
* rubber-banding is preserved. */
overflow-x: hidden;
overscroll-behavior-x: none;
width: 100%;
}
@supports (overflow-x: clip) {
html { overflow-x: clip; }
}
body {
margin: 0;
font-family: var(--ss-font);
font-size: 16px;
line-height: 1.5;
color: var(--ss-text);
background: var(--ss-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
overscroll-behavior-x: none;
width: 100%;
}
@supports (overflow-x: clip) {
body { overflow-x: clip; }
}
h1, h2, h3, h4 {
font-family: var(--ss-font-display);
letter-spacing: -0.01em;
margin: 0 0 var(--ss-sp-3) 0;
line-height: 1.25;
}
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }
p { margin: 0 0 var(--ss-sp-3) 0; }
a {
color: var(--ss-accent);
text-decoration: none;
}
a:hover { text-decoration: underline; }
:focus-visible {
outline: 2px solid var(--ss-accent);
outline-offset: 2px;
border-radius: 4px;
}
img { max-width: 100%; height: auto; display: block; }
/* Accessible-only label for screen readers */
.sr-only {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; top: -100px; left: var(--ss-sp-2);
background: var(--ss-accent); color: var(--ss-accent-fg);
padding: var(--ss-sp-2) var(--ss-sp-4); border-radius: var(--ss-r-sm);
z-index: 1000;
}
.skip-link:focus { top: var(--ss-sp-2); }
/* ---------- App chrome (header / main / footer) ---------- */
.app-body {
/* Sticky footer: body fills the viewport vertically, main grows to consume
remaining space, footer sits naturally at the bottom on short pages and
after content on long pages. */
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.app-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--ss-border);
flex-shrink: 0;
}
.app-header-inner {
max-width: 1180px;
margin: 0 auto;
padding: 0 var(--ss-sp-5);
height: var(--ss-header-h);
display: flex; align-items: center; justify-content: space-between;
gap: var(--ss-sp-4);
}
.brand {
display: inline-flex; align-items: center;
color: var(--ss-text); font-weight: 700; font-family: var(--ss-font-display);
}
.brand:hover { text-decoration: none; }
.brand-logo {
/* Header height is fixed via --ss-header-h. Logo sits at ~78% of that for
a substantial, easy-to-recognize masthead. */
height: calc(var(--ss-header-h) * 0.78);
width: auto;
display: block;
}
.app-nav {
display: flex; align-items: center; gap: var(--ss-sp-2);
}
.app-nav a {
position: relative;
color: var(--ss-text-2);
padding: var(--ss-sp-2) var(--ss-sp-3);
border-radius: var(--ss-r-sm);
font-size: 15px; font-weight: 500;
}
.app-nav a:hover { color: var(--ss-text); background: var(--ss-accent-soft); text-decoration: none; }
.app-nav a.is-active { color: var(--ss-accent); background: var(--ss-accent-soft); }
.app-nav a.nav-quiet { color: var(--ss-muted); }
.nav-badge {
display: inline-block; margin-left: 6px;
background: var(--ss-accent); color: var(--ss-accent-fg);
border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.app-main {
padding: var(--ss-sp-8) 0 var(--ss-sp-12);
flex: 1 0 auto; /* grow to push the footer to the bottom on short pages */
}
.app-container { max-width: 1180px; margin: 0 auto; padding: 0 var(--ss-sp-5); }
/* Cart page needs a wider container so the 9-column order table fits
alongside the 280px summary card without horizontal scroll inside
the cart's grid track. Other pages keep the 1180px reading width;
the cart is a working tool, not a reading page. */
body.page-cart .app-container { max-width: 1480px; }
.app-footer {
border-top: 1px solid var(--ss-border);
background: var(--ss-surface-2);
padding: var(--ss-sp-6) 0;
flex-shrink: 0;
}
.app-footer-inner {
display: flex; justify-content: space-between; align-items: flex-start;
font-size: 13px; color: var(--ss-muted);
flex-wrap: wrap; gap: var(--ss-sp-4);
}
.app-footer-brand { line-height: 1.5; }
.app-footer-contact {
display: flex;
align-items: center;
gap: var(--ss-sp-3);
line-height: 1.45;
}
.app-footer-logo {
width: 64px;
height: auto;
flex-shrink: 0;
}
.app-footer-contact-text { text-align: right; }
.app-footer-contact-name {
color: var(--ss-text); font-weight: 600; font-size: 13px;
margin-bottom: 2px;
}
.app-footer-contact-line {
display: inline-flex; flex-wrap: wrap; align-items: center;
gap: 6px;
font-size: 13px;
color: var(--ss-text-2);
justify-content: flex-end;
}
.app-footer-contact-line a { color: var(--ss-text-2); }
.app-footer-contact-line a:hover { color: var(--ss-accent); text-decoration: underline; }
.app-footer-contact-line .dot { color: var(--ss-muted); }
@media (max-width: 0px) { /* neutralized — was: 720px */
.app-footer-contact { flex-direction: row; align-items: center; }
.app-footer-contact-text { text-align: left; }
.app-footer-contact-line { justify-content: flex-start; }
.app-footer-logo { width: 52px; }
}
/* Mobile bottom tab bar */
.tab-bar {
display: none;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
height: calc(var(--ss-tabbar-h) + env(safe-area-inset-bottom, 0));
padding-bottom: env(safe-area-inset-bottom, 0);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-top: 1px solid var(--ss-border);
}
.tab-bar .tab {
flex: 1; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 2px;
color: var(--ss-muted); font-size: 11px; font-weight: 600;
}
.tab-bar .tab:hover { text-decoration: none; }
.tab-bar .tab.is-active { color: var(--ss-accent); }
.tab-icon-wrap { position: relative; display: inline-flex; }
.tab-badge {
position: absolute; top: -4px; right: -8px;
background: var(--ss-accent); color: var(--ss-accent-fg);
border-radius: 999px; padding: 0 5px; min-width: 16px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700;
}
/* Flash messages */
.flash-rack {
max-width: 1180px; margin: var(--ss-sp-5) auto 0;
padding: 0 var(--ss-sp-5);
display: flex; flex-direction: column; gap: var(--ss-sp-2);
}
.flash {
padding: var(--ss-sp-3) var(--ss-sp-4);
border-radius: var(--ss-r-sm);
border: 1px solid var(--ss-border);
font-size: 14px;
background: var(--ss-info-soft);
color: var(--ss-info);
}
.flash-success { background: var(--ss-success-soft); color: var(--ss-success); }
.flash-error { background: var(--ss-error-soft); color: var(--ss-error); }
.flash-info { background: var(--ss-info-soft); color: var(--ss-info); }
/* ---------- Buttons & inputs ---------- */
button, .button {
display: inline-flex; align-items: center; justify-content: center;
gap: 6px;
appearance: none; cursor: pointer;
font: inherit; font-weight: 600; font-size: 15px;
padding: 10px 18px;
min-height: 44px;
border-radius: var(--ss-r-sm);
background: var(--ss-accent); color: var(--ss-accent-fg);
border: 1px solid transparent;
transition: background-color .12s ease, transform .04s ease;
}
button:hover, .button:hover { background: var(--ss-accent-hover); text-decoration: none; }
button:active, .button:active { background: var(--ss-accent-press); transform: translateY(1px); }
button:disabled, .button:disabled { opacity: .6; cursor: not-allowed; }
button.secondary, .button.secondary {
background: var(--ss-surface); color: var(--ss-text);
border-color: var(--ss-border-strong);
}
button.secondary:hover, .button.secondary:hover { background: var(--ss-bg); }
button.danger {
background: var(--ss-error); color: #fff;
}
input, select, textarea {
font: inherit;
width: 100%;
padding: 10px 12px;
min-height: 44px;
background: var(--ss-surface);
color: var(--ss-text);
border: 1px solid var(--ss-border-strong);
border-radius: var(--ss-r-sm);
transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--ss-accent);
box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.18);
}
/* Form layout helpers */
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--ss-sp-3) 0; }
.field label, .field-label {
font-size: 13px; color: var(--ss-text-2); font-weight: 600;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--ss-sp-3);
}
.form-grid .field.full { grid-column: 1 / -1; }
.grid { display: grid; gap: var(--ss-sp-4); }
.grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 0px) { /* neutralized — was: 800px */ .grid.two { grid-template-columns: 1fr; } }
/* Radio-card pattern: bordered tappable option block */
.radio-card {
display: flex; align-items: flex-start; gap: var(--ss-sp-3);
padding: var(--ss-sp-3) var(--ss-sp-4);
border: 1px solid var(--ss-border-strong);
border-radius: var(--ss-r-md);
background: var(--ss-surface);
margin-bottom: var(--ss-sp-2);
cursor: pointer;
transition: border-color .12s ease, background-color .12s ease;
}
.radio-card:hover { border-color: var(--ss-accent); }
.radio-card input[type="radio"], .radio-card input[type="checkbox"] {
width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ss-accent);
}
.radio-card.is-selected {
background: var(--ss-accent-soft);
border-color: var(--ss-accent);
}
/* ---------- Cards & generic blocks ---------- */
.card {
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
padding: var(--ss-sp-5) var(--ss-sp-6);
box-shadow: var(--ss-shadow-1);
}
.card + .card { margin-top: var(--ss-sp-4); }
.section-title {
font-family: var(--ss-font-display); font-size: 17px; font-weight: 600;
margin: 0 0 var(--ss-sp-4); color: var(--ss-text);
}
.eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ss-accent);
margin-bottom: 6px;
}
.section-kicker {
font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ss-muted);
margin-bottom: 4px;
}
.muted { color: var(--ss-muted); }
.fine-print { font-size: 12px; color: var(--ss-muted); }
.nowrap { white-space: nowrap; }
.badge {
display: inline-block;
padding: 2px 9px; border-radius: 999px;
background: var(--ss-accent-soft); color: var(--ss-accent);
font-size: 12px; font-weight: 600;
}
.empty {
background: var(--ss-surface);
border: 1px dashed var(--ss-border-strong);
border-radius: var(--ss-r-md);
padding: var(--ss-sp-8);
text-align: center; color: var(--ss-muted);
}
.results-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--ss-sp-4);
margin-bottom: var(--ss-sp-6);
flex-wrap: wrap;
}
.results-head h1 { margin-bottom: 4px; }
.results-head .button.secondary { flex-shrink: 0; }
.results-title { font-size: 28px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td {
text-align: left; padding: var(--ss-sp-3) var(--ss-sp-3);
border-bottom: 1px solid var(--ss-border);
font-size: 14px; vertical-align: top;
}
th {
font-weight: 600; font-size: 12px; color: var(--ss-text-2);
text-transform: uppercase; letter-spacing: 0.06em;
background: var(--ss-surface-2);
}
tbody tr:last-child td { border-bottom: none; }
/* ---------- Landing page (when ?q is empty) ---------- */
.landing-html, .landing-body { height: 100%; }
.landing-body {
display: flex; flex-direction: column;
/* Magazine-cover photo behind everything — anchored right so the person
in the photo stays visible across screen widths. */
background: #0e1410 url("landing-hero.jpg") center center / cover no-repeat;
}
/* Mobile-only hero photo element. Hidden everywhere by default; only the
* touch-device media query below makes it visible. */
.landing-mobile-hero { display: none; }
/* Touch-device-only landing-page mobile hero.
*
* The landing page is desktop-locked (viewport meta = width=1280), so an iPhone
* portrait screen becomes a very tall CSS viewport. Do NOT use
* `background-size: cover` here — cover fills that tall viewport and zooms the
* portrait so the face becomes huge. Instead, the mobile portrait is drawn at a
* controlled height, centered, and faded into white toward the bottom.
*
* Quick tuning:
* - Person smaller/larger: change 48svh to 44svh / 52svh.
* - Move person left/right: change 50% to 48% / 52%.
* - Move person down/up: change 58px.
*/
@media (hover: none) and (pointer: coarse) {
/* Horizontal-scroll guard for iPad / phone was here previously, but
* has been hoisted to the root html/body rules so that iPads paired
* with a Magic Keyboard or trackpad (which match `pointer: fine` and
* bypass this query) also benefit. See the comment up at the html
* declaration around line 73 for the full rationale. */
.landing-html { height: auto; background: #ffffff; }
.landing-body {
height: auto !important;
/* Wipe the desktop cover background — mobile uses .landing-mobile-hero. */
background: #ffffff !important;
}
.landing-mobile-hero {
display: block;
position: fixed; /* pin to the viewport so it never adds scroll */
inset: 0; /* fill the whole screen, edge to edge */
/* The mobile portrait file is a landscape banner (1800 × 1056) with its
own built-in white fades on the left, right, and bottom edges, so
the image carries the page-blend itself and we don't need a CSS
gradient overlay on top.
Sizing:
- `100% auto` makes the photo span the full mobile viewport width
and scale its height to preserve the natural 1.7:1 aspect ratio.
At a 1280 px CSS viewport that lands the photo at roughly 751 px
tall — a banner across the top of the page.
- `background-position: 0 0` pins the photo to the top-left edge
of the viewport. No vertical offset → no white strip above
the picture on the device. */
background-image: url("landing-hero-mobile.jpg");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: 0 0;
background-color: #ffffff;
z-index: 0; /* behind content, in front of body bg */
pointer-events: none;
overflow: hidden;
}
/* The image's built-in side fades handle the readability of overlaid
content on the left, so we don't need the desktop white-veil here.
Hide the ::before veil entirely on mobile. */
.landing-body::before {
display: none;
}
}
/* Soft white veil over the left side of the photo so the headline and the
SeedSearch logo sit on a clean white background. Fades to transparent
well before the right edge so the person in the photo stays clear. */
.landing-body::before {
content: "";
position: fixed;
inset: 0;
background: linear-gradient(
90deg,
#ffffff 0%,
rgba(255,255,255,0.97) 45%,
rgba(255,255,255,0.55) 60%,
rgba(255,255,255,0.10) 72%,
rgba(255,255,255,0.00) 82%
);
pointer-events: none;
z-index: 0;
}
.landing-page {
flex: 1;
position: relative;
z-index: 1;
display: flex; flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: var(--ss-sp-10) clamp(20px, 6vw, 64px);
gap: var(--ss-sp-6);
text-align: left;
max-width: 1400px;
width: 100%;
margin: 0 auto;
}
.landing-logo-wrap {
width: min(440px, 80vw);
display: flex; align-items: center; justify-content: flex-start;
}
.landing-logo {
width: 100%; height: auto;
display: block;
}
/* ---- The magazine-cover text block ---- */
.landing-cover-text {
max-width: min(640px, 90vw);
color: var(--ss-text);
}
.landing-eyebrow {
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 13px;
font-weight: 600;
color: var(--ss-accent);
margin: 0 0 14px 0;
}
.landing-headline {
font-size: clamp(34px, 5.8vw, 68px);
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.02em;
margin: 0 0 18px 0;
color: var(--ss-text);
}
.landing-sub {
font-size: clamp(17px, 1.8vw, 22px);
line-height: 1.4;
color: var(--ss-text-muted);
margin: 0;
font-weight: 400;
}
.landing-search-form {
position: relative;
width: min(620px, 100%);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--ss-sp-2);
flex-shrink: 0;
}
.landing-search-form input[type="search"] {
padding-left: 44px;
font-size: 17px;
height: 56px;
border-radius: 999px;
border-color: var(--ss-border-strong);
background: var(--ss-surface);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.landing-search-form input[type="search"]:focus {
border-color: var(--ss-accent);
}
.landing-search-form button {
height: 56px;
border-radius: 999px;
padding: 0 26px;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.landing-search-icon {
position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
color: var(--ss-muted); pointer-events: none;
display: inline-flex;
}
/* ---- Seedway rep card — visually distinct from the cart widget.
White background, Seedway-red left edge, prominent hex logo at
the top, clean stacked contact rows. Stands out against the grey
wall in the background photo. ---- */
.rep-card {
position: relative;
background: #ffffff;
border-radius: var(--ss-r-md);
width: 100%;
/* Equal left/right padding so the content clears the red stripes on both
sides. */
padding: 18px 22px 16px 22px;
display: flex;
flex-direction: column;
gap: 12px;
/* Strong drop shadow to lift it off the photo behind. */
box-shadow:
0 14px 36px rgba(0,0,0,0.22),
0 2px 8px rgba(0,0,0,0.10);
overflow: hidden;
/* Hover animation: smooth lift + brighter shadow + slightly thicker
red stripes. transform-origin keeps the scale anchored at the card
center so it doesn't drift. */
transform-origin: center;
transition:
transform .25s cubic-bezier(0.2, 0.7, 0.2, 1.05),
box-shadow .25s ease;
}
.rep-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 24px 48px rgba(0,0,0,0.30),
0 6px 14px rgba(200,32,44,0.18);
}
/* Thick Seedway-red stripes on BOTH the left and right edges — the brand
color, framing the card like a business-card bookend. */
.rep-card::before,
.rep-card::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 6px;
background: linear-gradient(180deg, #D11F2D 0%, #8E1820 100%);
transition: width .25s ease;
}
.rep-card::before { left: 0; }
.rep-card::after { right: 0; }
.rep-card:hover::before,
.rep-card:hover::after {
width: 9px;
}
.rep-card-logo-area {
display: flex;
justify-content: center;
padding-bottom: 8px;
border-bottom: 1px solid var(--ss-border);
}
.rep-card-big-logo {
width: 150px;
max-width: 100%;
height: auto;
display: block;
}
.rep-card-name-block {
text-align: center;
}
.rep-card-name {
margin: 0;
font-size: 17px;
font-weight: 700;
color: var(--ss-text);
line-height: 1.15;
letter-spacing: -0.01em;
}
.rep-card-title {
margin: 4px 0 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #C8202C;
font-weight: 700;
}
.rep-card-contact {
display: flex;
flex-direction: column;
gap: 4px;
}
.rep-card-row {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--ss-text);
font-size: 14px;
font-variant-numeric: tabular-nums;
padding: 2px 0;
transition: color .12s ease;
}
.rep-card-row:hover { color: #C8202C; text-decoration: none; }
.rep-card-row svg {
width: 16px; height: 16px;
fill: none; stroke: #C8202C; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
flex-shrink: 0;
}
/* Address row spans two lines — anchor the map-pin icon to the first line. */
.rep-card-row-address {
align-items: flex-start;
line-height: 1.3;
}
.rep-card-row-address svg {
margin-top: 2px;
}
.rep-card-address-text {
display: flex;
flex-direction: column;
}
/* On smaller screens the photo gets cropped harder — favor the right side so
the person stays in frame. The overlay also gets heavier so the headline
stays readable over a more visually busy crop. */
.landing-search-icon svg {
width: 20px; height: 20px;
fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
/* ---- How-ordering-works step flow under the search bar ---- */
.landing-steps {
margin-top: var(--ss-sp-6);
width: min(820px, 100%);
}
/* Single muted paragraph below the steps. Visible HTML content carrying the
site's key descriptive phrases for search engines — and a plain English
blurb for first-time visitors. Kept small so it doesn't compete with the
hero above. */
.landing-about {
width: min(820px, 100%);
margin: var(--ss-sp-5) auto 0;
text-align: center;
font-size: 13px;
line-height: 1.6;
color: var(--ss-text-2);
}
.landing-about strong { color: var(--ss-text); font-weight: 600; }
@media (max-width: 0px) { /* neutralized — was: 720px */
.landing-about { font-size: 12px; }
}
.landing-steps-eyebrow {
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 12px;
font-weight: 700;
color: var(--ss-accent);
margin: 0 0 var(--ss-sp-4) 0;
}
.landing-steps-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
position: relative;
}
/* Horizontal connector line behind the step circles — only on a wide row. */
.landing-steps-list::before {
content: "";
position: absolute;
left: 10%;
right: 10%;
top: 18px; /* center of the 36px circles */
height: 2px;
background: linear-gradient(90deg,
rgba(45,106,79,0.30) 0%,
rgba(45,106,79,0.30) 100%);
z-index: 0;
}
.landing-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.landing-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--ss-accent);
color: var(--ss-accent-fg);
font-weight: 700;
font-size: 16px;
font-variant-numeric: tabular-nums;
box-shadow: 0 4px 12px rgba(45,106,79,0.25);
/* White ring so the connector line doesn't visually touch the circle. */
outline: 4px solid #ffffff;
}
.landing-step-title {
font-size: 14px;
font-weight: 700;
margin: 2px 0 0 0;
color: var(--ss-text);
line-height: 1.2;
}
.landing-step-text {
font-size: 13px;
color: var(--ss-text-muted);
margin: 0;
line-height: 1.4;
}
/* Mobile: two columns, then a single column — connector line hides since it
only makes sense for a single row. */
@media (max-width: 0px) { /* neutralized — was: 720px */
.landing-steps { width: 100%; }
.landing-steps-list {
grid-template-columns: 1fr 1fr;
gap: 16px 20px;
}
.landing-steps-list::before { display: none; }
}
@media (max-width: 0px) { /* neutralized — was: 460px */
.landing-steps-list { grid-template-columns: 1fr; }
}
/* ---- Small cart preview shown under the search on the landing page ---- */
/* ---- Top-right corner widgets (cart preview + Seedway rep contact) ---- */
.landing-corner-widgets {
position: fixed;
top: 20px;
right: 20px;
z-index: 20;
display: flex;
flex-direction: column;
gap: 14px;
width: 280px; max-width: calc(100vw - 40px);
max-height: calc(100vh - 40px);
}
@media (max-width: 0px) { /* neutralized — was: 640px */
.landing-corner-widgets {
top: 12px;
right: 12px;
width: 240px;
gap: 10px;
}
}
/* Quote at the bottom of the rep card. Sits below the address row,
separated by a thin divider. Normal sans-serif body type — no special
font, no shadow — so it reads as a quiet message from Mike rather than
a marketing pull-quote. */
.rep-card-quote {
margin: 12px 0 0;
padding-top: 12px;
border-top: 1px solid var(--ss-border);
font-size: 13px;
line-height: 1.45;
color: var(--ss-text);
}
.landing-cart {
/* The wrapper handles positioning now — remove the cart's own fixed pin. */
margin-top: 0;
background: var(--ss-surface);
border: 2px solid var(--ss-accent);
border-radius: var(--ss-r-md);
padding: 0;
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
box-shadow: var(--ss-shadow-2, 0 8px 24px rgba(20,30,25,0.10));
}
/* Customer-login widget at the top of the corner stack. Green pill-button
style so it reads as a primary action (compared to the cart preview which
is informational). */
.landing-login {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--ss-accent);
color: #fff;
text-decoration: none;
border-radius: var(--ss-r-md);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.01em;
box-shadow: var(--ss-shadow-2, 0 8px 24px rgba(20,30,25,0.10));
transition: background-color 120ms ease, transform 120ms ease;
}
.landing-login:hover {
background: var(--ss-accent-hover);
text-decoration: none;
transform: translateY(-1px);
color: #fff;
}
.landing-login:active { transform: translateY(0); }
.landing-login-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: rgba(255,255,255,0.16);
border-radius: 50%;
flex-shrink: 0;
}
.landing-login-text { flex: 1; }
.landing-login-chev {
opacity: 0.85;
transition: transform 120ms ease;
flex-shrink: 0;
}
.landing-login:hover .landing-login-chev { transform: translateX(2px); }
.landing-cart-head {
display: flex; align-items: center; gap: 8px;
/* Black bar with white "IN YOUR CART" text. */
background: #111;
color: #ffffff;
padding: 10px 16px;
font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
border-bottom: 0;
}
.landing-cart-icon {
width: 16px; height: 16px;
fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
.landing-cart-count {
margin-left: auto;
background: var(--ss-accent);
color: var(--ss-accent-fg);
border-radius: 999px;
font-size: 11px;
padding: 2px 8px;
letter-spacing: 0;
text-transform: none;
}
.landing-cart-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 220px;
overflow-y: auto;
font-size: 14px;
}
.landing-cart-list li {
display: flex;
gap: 8px;
padding: 8px 16px;
line-height: 1.35;
color: var(--ss-text);
}
/* Banded rows — every other line gets a light grey/cream background. */
.landing-cart-list li:nth-child(even) {
background: var(--ss-bg);
}
.landing-cart-qty {
font-variant-numeric: tabular-nums;
font-weight: 600;
white-space: nowrap;
min-width: 70px;
}
.landing-cart-name {
color: var(--ss-text);
}
.landing-cart-link {
display: block;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
color: var(--ss-accent);
text-decoration: none;
border-top: 1px solid var(--ss-border);
}
.landing-cart-link:hover { text-decoration: underline; }
/* Empty-cart copy shown when there are no items in the basket. */
.landing-cart-empty {
padding: 22px 16px;
text-align: center;
font-size: 14px;
color: var(--ss-text-muted);
font-style: italic;
}
/* ---- Live autocomplete panel under the landing search ---- */
.suggest-panel {
position: absolute;
/* Span the input plus the search button so the dropdown matches the search
bar width visually. */
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 30;
background: var(--ss-surface);
border: 1px solid var(--ss-border-strong);
border-radius: var(--ss-r-lg, 14px);
box-shadow: var(--ss-shadow-2, 0 8px 24px rgba(20,30,25,0.10));
overflow: hidden;
max-height: 60vh;
overflow-y: auto;
}
.suggest-panel[hidden] { display: none; }
.suggest-item {
display: block;
padding: 10px 16px;
text-decoration: none;
color: inherit;
border-bottom: 1px solid var(--ss-border);
transition: background-color 80ms ease;
}
.suggest-item:last-of-type { border-bottom: 0; }
.suggest-item:hover,
.suggest-item.is-active {
background: var(--ss-bg);
text-decoration: none;
}
.suggest-item .suggest-name {
display: block;
font-weight: 700;
text-align: left;
color: var(--ss-text);
line-height: 1.3;
}
.suggest-item .suggest-name mark {
background: rgba(45, 106, 79, 0.16);
color: inherit;
border-radius: 3px;
padding: 0 1px;
font-weight: inherit;
}
.suggest-item .suggest-meta {
display: block;
font-size: 13px;
color: var(--ss-muted);
margin-top: 2px;
text-align: left;
}
.suggest-empty {
padding: 14px 16px;
color: var(--ss-muted);
font-size: 14px;
}
/* Top-of-results search form (after a query) */
.search-results-top {
margin-bottom: var(--ss-sp-6);
}
.simple-search-form {
display: grid; grid-template-columns: 1fr auto; gap: var(--ss-sp-2);
max-width: 720px;
}
.simple-search-form input[type="search"] {
height: 48px; border-radius: 999px; font-size: 16px;
}
.simple-search-form button {
height: 48px; border-radius: 999px; padding: 0 20px;
}
/* ---------- Quick order table (search results) ---------- */
.quick-table-card {
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
box-shadow: var(--ss-shadow-1);
overflow: hidden;
}
.quick-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.quick-order-table { width: 100%; }
.quick-order-table th { background: var(--ss-surface-2); }
.quick-order-table td { padding: var(--ss-sp-4) var(--ss-sp-4); vertical-align: middle; }
.quick-order-table th { padding: var(--ss-sp-3) var(--ss-sp-4); }
.qo-row td { transition: background-color .12s ease; }
.qo-row:hover td { background: var(--ss-surface-2); }
/* Soft warm-red tint for rows whose variety name or SKU is an exact match
for what the grower typed — makes the "this is the one" row obvious vs.
any related results below it. */
.qo-row-exact td { background: #FDECEC; }
.qo-row-exact:hover td { background: #F9DCDC; }
.qo-variety a { color: var(--ss-text); font-weight: 600; }
.qo-variety a:hover { color: var(--ss-accent); text-decoration: none; }
.qo-type { color: var(--ss-text-2); font-size: 13px; }
.qo-sku { font-variant-numeric: tabular-nums; color: var(--ss-text-2); font-size: 13px; }
/* Vendor cell — only renders a brand mark when we have a logo for that
vendor; for unknown vendors the cell is blank so column alignment is
preserved without displaying raw vendor names. */
.vendor-cell { display: inline-flex; align-items: center; }
.vendor-logo {
/* The "logo box" — every brand mark fits inside this footprint. */
display: inline-flex;
align-items: center;
justify-content: flex-start;
width: 80px;
height: 26px;
}
.vendor-logo img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
object-position: left center;
}
.vendor-empty { /* no visual — keeps the cell present for layout */ }
.qo-vendor, .cart-vendor { white-space: nowrap; }
/* ------------- Inline catalog page panel (search-results table) -------------
Each variety with a catalog match gets a small "View in Catalog" link
tucked under its name in the variety cell. Clicking the link toggles a
hidden sibling row that contains the page image, zoom toolbar, and the
yellow highlight circles. */
.qo-catalog-link {
display: flex;
width: fit-content;
align-items: center;
gap: 4px;
margin-top: 4px;
padding: 1px 0;
background: transparent;
border: 0;
color: var(--ss-accent);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.2;
cursor: pointer;
min-height: 0;
text-decoration: none;
transition: color 120ms ease;
}
.qo-catalog-link svg { flex-shrink: 0; }
.qo-catalog-link:hover { text-decoration: underline; }
.qo-catalog-link.is-open {
color: var(--ss-text);
font-weight: 600;
}
/* Small chevron after the text: points right when collapsed, rotates down
when the catalog row is open. */
.qo-catalog-chevron {
margin-left: 2px;
color: #000;
transition: transform 150ms ease;
}
.qo-catalog-link.is-open .qo-catalog-chevron {
transform: rotate(90deg);
}
/* Tech-sheet link: same base styling as .qo-catalog-link with a distinct
color so it doesn't read as a duplicate of the catalog link when both
are present in the same variety cell. We use the existing info-blue
from the design system to keep the palette coherent. The two links
stack on their own lines (each .qo-catalog-link is display:flex
width:fit-content), and the small top margin gives them a bit of
vertical breathing room between each other. */
.qo-techsheet-link {
color: var(--ss-info);
}
.qo-techsheet-link.is-open {
color: var(--ss-text);
}
/* Tech-sheet row inherits everything from .qo-catalog-row by also
carrying that class. No extra styling needed unless we later want to
tint the panel differently — leaving this rule here as a hook. */
.qo-techsheet-row { /* see .qo-catalog-row */ }
.qo-catalog-row { background: transparent; }
.qo-catalog-cell {
padding: 0 !important;
border: 0;
background: var(--ss-bg);
}
.qo-catalog-page {
padding: 6px 14px 16px;
background: var(--ss-bg);
text-align: center;
position: relative;
}
/* Green circular close button in the top-right of the open catalog panel.
Clicking it toggles the same hidden row as the "View in Catalog" link, so
the chevron in that link flips back to its collapsed orientation too. */
.qo-catalog-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 5;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ss-accent);
color: #fff;
border-radius: 50%;
text-decoration: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
transition: background-color 120ms ease, transform 120ms ease;
}
.qo-catalog-close:hover { background: var(--ss-accent-hover); }
.qo-catalog-close:active { transform: scale(0.94); }
.qo-catalog-close svg { display: block; }
/* Zoom toolbar above the page image */
.qo-catalog-toolbar {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 4px 0 10px;
padding: 4px;
background: #fff;
border: 1px solid rgba(60, 60, 67, 0.18);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.qo-zoom-btn {
min-height: 0;
height: 32px;
min-width: 32px;
padding: 0 10px;
background: transparent;
color: var(--ss-text);
border: none;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background 120ms ease;
}
.qo-zoom-btn:hover { background: rgba(0,0,0,0.05); }
.qo-zoom-btn:active { background: rgba(0,0,0,0.10); }
.qo-zoom-reset {
min-width: 64px;
font-size: 13px;
font-weight: 600;
}
.qo-zoom-level { font-variant-numeric: tabular-nums; }
/* Scrollable viewport. The .qo-catalog-frame inside grows beyond this when
zoomed in, producing native scroll. When zoomed past 100% the JS adds
`.is-pannable` so we hint that the page can be dragged. */
.qo-catalog-scroll {
max-width: min(820px, 100%);
margin: 0 auto;
overflow: auto;
border-radius: 10px;
background: var(--ss-bg);
-webkit-overflow-scrolling: touch;
max-height: 80vh;
}
.qo-catalog-scroll.is-pannable { cursor: grab; }
.qo-catalog-scroll.is-pannable.is-panning {
cursor: grabbing;
user-select: none;
}
/* Keep highlights and image from intercepting drag — pointer-events:none
on the markers means mousedown lands on the scroll container. */
.qo-catalog-scroll.is-pannable img { pointer-events: none; }
.qo-catalog-frame {
position: relative;
display: inline-block;
width: calc(100% * var(--qo-zoom, 1));
line-height: 0;
transition: width 150ms ease;
}
.qo-catalog-page img {
display: block;
width: 100%;
height: auto;
border: 1px solid rgba(60, 60, 67, 0.18);
border-radius: 10px;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.06);
/* Keep the catalog page as crisp as possible at any zoom. The source is
300-DPI WebP, so default scaling looks great; these hints nudge browsers
toward higher-quality resampling when the image is upscaled past native
resolution. */
image-rendering: -webkit-optimize-contrast;
image-rendering: high-quality;
}
/* Animated circle for every occurrence of the variety on the page.
Light red fill with a black outline so it's clearly visible against the
warm catalog page background regardless of zoom level. */
/* ----------------------------------------------------------------------------
Catalog page image
----------------------------------------------------------------------------
We display the catalog page where each variety appears. Force the image
and its containing frame to share dimensions so layout is predictable
across browsers — without this, the image can render at its intrinsic
2513×3263 size when the page CSS doesn't reach it.
---------------------------------------------------------------------------- */
.qo-catalog-frame img {
display: block;
width: 100%;
height: auto;
}
/* Page-N badge in the toolbar (when there's a single catalog page). */
.qo-catalog-page-num,
.qo-catalog-page-label {
margin-left: 10px;
padding: 0 8px;
font-size: 12px;
font-weight: 500;
color: var(--ss-text-2);
}
.qo-catalog-page-label {
margin: 0 auto 10px;
font-size: 13px;
text-align: center;
color: var(--ss-text-2);
}
/* Page-selector strip — shown when the variety appears on more than one
catalog page. Sits directly under the zoom toolbar. */
.qo-catalog-pages-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0;
margin: 6px 0 12px;
font-size: 13px;
}
.qo-page-btn {
padding: 4px 12px;
color: var(--ss-accent);
text-decoration: none;
border-radius: 6px;
font-weight: 500;
transition: background 120ms ease, color 120ms ease;
position: relative;
}
.qo-page-btn + .qo-page-btn::before {
content: "|";
position: absolute;
left: -2px;
color: rgba(60, 60, 67, 0.30);
font-weight: 400;
pointer-events: none;
}
.qo-page-btn:hover {
background: rgba(28, 102, 64, 0.08);
text-decoration: none;
}
.qo-page-btn.is-active {
color: var(--ss-text);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 4px;
}
/* Only the active frame is visible inside the scroll container. The other
frames stay in the DOM with hidden, ready to swap on click. */
.qo-catalog-frame[hidden] { display: none; }
.qo-price { font-variant-numeric: tabular-nums; font-weight: 600; }
.qo-price .muted { font-weight: 400; font-size: 13px; }
.qo-treatment select { min-height: 40px; }
.qo-qty-label {
display: inline-flex; align-items: center;
border: 1px solid var(--ss-border-strong);
border-radius: var(--ss-r-sm);
background: var(--ss-surface);
padding: 0 8px;
}
.qo-qty-label .qty-input {
border: none; background: transparent;
min-height: 40px;
width: 60px; text-align: right;
padding: 0;
font-variant-numeric: tabular-nums;
}
.qo-qty-label .qty-input:focus { box-shadow: none; outline: none; }
.qo-qty-unit {
font-size: 13px;
color: var(--ss-text-2);
user-select: none;
margin-left: 6px;
}
/* Center the column header AND its inputs so the "QUANTITY" label sits
directly above the input box. The input itself is inline-flex inside an
otherwise-empty td, so centering the td centers the whole control. */
.quick-order-table th.qo-qty,
.quick-order-table td.qo-qty { text-align: center; }
.qo-add button { min-height: 40px; padding: 8px 16px; }
/* Stacked card variant (mobile + variety page) */
.qo-card {
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
padding: var(--ss-sp-5);
box-shadow: var(--ss-shadow-1);
margin-bottom: var(--ss-sp-3);
}
.qo-card-head { margin-bottom: var(--ss-sp-3); }
.qo-card-name { color: var(--ss-text); font-weight: 600; font-size: 17px; }
.qo-card-meta { font-size: 13px; color: var(--ss-muted); margin-top: 2px; }
.qo-card-form {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: var(--ss-sp-3);
align-items: end;
}
.qo-card-price {
font-weight: 600; font-variant-numeric: tabular-nums;
align-self: center; padding: 0 var(--ss-sp-2);
}
.qo-single-treatment {
padding: 10px 12px;
background: var(--ss-surface-2);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-sm);
font-size: 14px;
}
@media (max-width: 0px) { /* neutralized — was: 640px */
.qo-card-form { grid-template-columns: 1fr 1fr; }
.qo-card-form .qo-card-price { grid-column: 1 / -1; padding: 0; }
.qo-card-form button { grid-column: 1 / -1; width: 100%; }
}
.quick-results-list { display: flex; flex-direction: column; }
.featured-quick-order .qo-card { box-shadow: var(--ss-shadow-2); border-color: var(--ss-accent-soft); }
/* Variety detail page header */
.quick-product-card {
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
padding: var(--ss-sp-6) var(--ss-sp-6);
margin: var(--ss-sp-4) 0 var(--ss-sp-5);
box-shadow: var(--ss-shadow-1);
}
.quick-product-card h1 { font-size: 30px; margin-bottom: var(--ss-sp-2); }
.quick-product-meta {
display: flex; flex-wrap: wrap; gap: var(--ss-sp-4);
margin: var(--ss-sp-2) 0 var(--ss-sp-3);
font-size: 14px; color: var(--ss-text-2);
}
/* Similar varieties block */
.similar-section { margin-top: var(--ss-sp-10); }
.similar-section h2 { margin-bottom: var(--ss-sp-2); }
.similar-list .qo-row td { background: var(--ss-surface-2); }
.similar-list .qo-row:hover td { background: var(--ss-bg); }
/* ---------- Cart page ---------- */
.ios-page-head { margin-bottom: var(--ss-sp-6); }
.ios-empty { background: var(--ss-surface); }
.cart-page-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: var(--ss-sp-5);
align-items: start;
/* Dense packing so the Summary card fills row 1 col 2 (flush with the
top of the cart-table-card) even when later items (cart-custom-add)
are forced into col 1. Without this, the grid's auto cursor
advances past row 1 col 2 once it sees the col 1 / row 2 entry,
leaving the summary stranded in row 2. */
grid-auto-flow: dense;
}
@media (max-width: 0px) { /* neutralized — was: 960px */
.cart-page-grid { grid-template-columns: 1fr; }
}
.cart-table-card {
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
/* No outer padding: lets the black thead bar reach the card edges, same as
the search-results card. The buttons row below has its own padding. */
padding: 0;
overflow: hidden;
box-shadow: var(--ss-shadow-1);
}
.cart-table-scroll { overflow-x: auto; }
.cart-order-table { width: 100%; }
.cart-order-table th { background: var(--ss-surface-2); }
/* Tighter horizontal padding than the default so 9 columns fit inside the
cart's left grid track without horizontal scroll on a typical desktop.
Vertical padding stays at sp-3 to keep row height comfortable. */
.cart-order-table td,
.cart-order-table th { padding: var(--ss-sp-3) var(--ss-sp-2); vertical-align: middle; }
/* Lock the right-side numeric columns to fixed widths so the table doesn't
reflow every keystroke when the line total grows ("$3.68" → "$3,682.00").
Without these, table-layout:auto re-balances columns on each input change
and the Variety header appears to shift left. Numbered nth-child reflects
the column order in cart.php: 1:Variety, 2:Type, 3:Vendor, 4:SKU/Treat,
5:Price, 6:Quantity, 7:Line Total, 8:Note, 9:Remove. */
.cart-order-table th:nth-child(1),
.cart-order-table td:nth-child(1) { min-width: 130px; } /* Variety name on one line for typical names */
.cart-order-table th:nth-child(5),
.cart-order-table td:nth-child(5) { width: 80px; min-width: 80px; }
.cart-order-table th:nth-child(6),
.cart-order-table td:nth-child(6) { width: 120px; min-width: 120px; }
.cart-order-table th:nth-child(7),
.cart-order-table td:nth-child(7) { width: 95px; min-width: 95px; }
.cart-variety-name { color: var(--ss-text); font-weight: 600; white-space: nowrap; }
.cart-mobile-type { display: none; font-size: 12px; color: var(--ss-muted); margin-top: 2px; }
.cart-qty-cell {
display: inline-flex; align-items: center;
background: var(--ss-surface-2);
border: 1px solid var(--ss-border-strong);
border-radius: var(--ss-r-sm);
padding: 0 10px;
}
.cart-qty-cell .qty-input {
border: none; background: transparent;
width: 58px; text-align: right;
padding: 8px 0;
min-height: 0;
font-variant-numeric: tabular-nums;
}
.cart-qty-cell .qty-input:focus { box-shadow: none; outline: none; }
.cart-qty-cell .qty-unit {
font-size: 13px;
color: var(--ss-text-2);
user-select: none;
margin-left: 8px;
}
/* Generic qty-cell used on the variety detail page (single-card form). */
.qty-cell {
display: inline-flex; align-items: center;
background: var(--ss-surface);
border: 1px solid var(--ss-border-strong);
border-radius: var(--ss-r-sm);
padding: 0 10px;
min-height: 40px;
}
.qty-cell .qty-input {
border: none; background: transparent;
width: 90px; text-align: right;
padding: 8px 0;
min-height: 0;
font-variant-numeric: tabular-nums;
}
.qty-cell .qty-input:focus { box-shadow: none; outline: none; }
.qty-cell .qty-unit {
font-size: 13px;
color: var(--ss-text-2);
user-select: none;
margin-left: 8px;
}
/* Custom up/down spinner (replaces the native arrows so
they appear AFTER the unit instead of crammed inside the input). */
.qty-spinner {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 8px;
/* Don't let the column stretch to the cell's height — keep it self-sized. */
align-self: center;
flex-shrink: 0;
}
.qty-step {
background: none;
border: 0;
cursor: pointer;
padding: 0;
margin: 0;
width: 18px;
height: 10px;
/* The site has a global `button { min-height: 44px }` rule — explicitly
defeat it here so the spinner stays small. */
min-height: 0;
min-width: 0;
color: var(--ss-text-2);
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
}
.qty-step:hover { color: var(--ss-accent); background: rgba(45,106,79,0.08); }
.qty-step:active { background: rgba(45,106,79,0.16); }
.qty-step svg {
display: block;
width: 10px; height: 6px;
fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
.cart-line-total { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
/* Per-row delete button — red trash icon at the end of each cart line. */
.cart-remove-col { width: 44px; text-align: center; }
.cart-row-delete {
background: none;
border: 0;
color: var(--ss-error, #C84545);
padding: 6px;
margin: 0;
min-height: 0;
min-width: 0;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .12s ease, color .12s ease;
}
.cart-row-delete:hover {
background: rgba(200,69,69,0.10);
color: #A93535;
}
.cart-row-delete:active { background: rgba(200,69,69,0.18); }
.cart-row-delete svg {
width: 18px; height: 18px;
fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
display: block;
}
.cart-note { margin: var(--ss-sp-3) 0; }
.cart-table-actions {
display: flex; gap: var(--ss-sp-3); flex-wrap: wrap;
padding: var(--ss-sp-3) var(--ss-sp-4) var(--ss-sp-4);
border-top: 1px solid var(--ss-border);
}
/* ---------- Per-line note accordion ---------- */
/* The "Add note" toggle sits in its own column right after Line Total, so
the variety name in the first cell stays on a single line. Clicking it
expands a second TR below the line with a textarea inside. The note
text submits as part of the same Update form, so any tweaks the
customer makes survive whatever they do next (clicking Update OR
clicking Save as draft). */
.cart-note-col {
width: 1%; /* shrink-wrap; the chip drives width */
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.cart-note-toggle {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 7px 3px 6px;
background: transparent;
border: 1px solid var(--ss-border);
border-radius: 999px;
color: var(--ss-muted);
font-size: 11px; font-weight: 500;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
line-height: 1;
}
.cart-note-toggle:hover {
background: var(--ss-surface-2);
color: var(--ss-text);
}
/* "Has note" treatment so the customer can see at a glance which rows
already have notes vs. which don't. */
.cart-note-toggle.has-note {
background: var(--ss-accent-soft);
border-color: var(--ss-accent);
color: var(--ss-accent);
}
.cart-note-chevron { transition: transform 180ms ease; }
.cart-note-toggle.is-open .cart-note-chevron { transform: rotate(90deg); }
.cart-note-row td {
padding: var(--ss-sp-3) var(--ss-sp-4) var(--ss-sp-4);
background: var(--ss-surface-2);
border-top: 1px dashed var(--ss-border);
}
.cart-note-label {
display: block;
font-size: 13px;
margin-bottom: 6px;
color: var(--ss-text);
}
.cart-note-input {
width: 100%;
font: inherit;
font-size: 14px;
padding: 8px 10px;
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-sm);
background: var(--ss-surface);
resize: vertical;
min-height: 56px;
}
.cart-note-input:focus {
outline: 2px solid var(--ss-accent);
outline-offset: -1px;
border-color: var(--ss-accent);
}
.cart-note-hint { margin: 4px 0 0; font-size: 11px; }
/* Action buttons inside the expanded note row. Compact pair sitting at the
bottom-right of the row: SAVE (submits the cart-update form, persists the
note alongside any quantity changes) and MINIMIZE (collapses the row,
reusing the line's existing toggle handler). Both use the soft-red
error tokens so they read as low-emphasis utility actions next to the
primary green "Update order cart" button below the table. */
.cart-note-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 8px;
}
.cart-note-action {
background: var(--ss-error-soft);
color: var(--ss-error);
border: 1px solid rgba(179, 38, 30, 0.25);
padding: 4px 14px;
font-size: 12px;
font-weight: 500;
border-radius: var(--ss-r-sm);
cursor: pointer;
line-height: 1.3;
transition: background 120ms ease, border-color 120ms ease;
}
.cart-note-action:hover {
background: #F5D2CC;
border-color: rgba(179, 38, 30, 0.45);
}
.cart-note-action:focus-visible {
outline: 2px solid var(--ss-error);
outline-offset: 1px;
}
/* ---------- Off-catalog (custom) line ---------- */
/* Same row layout as a regular cart line, but the variety name renders
as plain text (no link), the SKU column is muted, and the price label
is the "quoted on confirmation" message. A subtle dashed left edge
makes these lines visually distinct from cataloged items so Mike can
spot them at a glance in screenshots/PDFs of the order. */
.cart-line-custom td:first-child {
border-left: 3px solid var(--ss-warn, #C28A1F);
}
.cart-variety-name-custom {
color: var(--ss-text); font-weight: 600;
}
/* ---------- "Add a variety not listed" disclosure ---------- */
.cart-custom-add {
/* Stay in the left column under the cart table — without this it
auto-flows into the right column alongside the summary widget. */
grid-column: 1;
margin-top: var(--ss-sp-5);
background: var(--ss-surface);
border: 1px dashed var(--ss-border);
border-radius: var(--ss-r-md);
padding: var(--ss-sp-3) var(--ss-sp-4);
}
.cart-custom-add[open] { border-style: solid; }
.cart-custom-add-summary {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
color: var(--ss-text);
list-style: none;
}
.cart-custom-add-summary::-webkit-details-marker { display: none; }
.cart-custom-add-form {
margin-top: var(--ss-sp-3);
display: flex; flex-direction: column; gap: var(--ss-sp-2);
max-width: 520px;
}
.cart-custom-add-row {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--ss-sp-3);
}
.cart-custom-add-hint {
margin: 4px 0;
padding: 8px 12px;
background: var(--ss-accent-soft);
border-radius: var(--ss-r-sm);
font-size: 12px;
}
.cart-custom-add-form button[type="submit"] {
align-self: flex-start;
}
/* ---------- Saved drafts list on account.php ---------- */
.account-drafts-list {
display: flex; flex-direction: column; gap: var(--ss-sp-3);
}
.account-draft {
display: flex; align-items: center; justify-content: space-between;
gap: var(--ss-sp-3);
padding: var(--ss-sp-3) var(--ss-sp-4);
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-md);
flex-wrap: wrap;
}
.account-draft-meta {
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.account-draft-name { font-weight: 600; }
.account-draft-info { font-size: 12px; color: var(--ss-muted); }
.account-draft-actions {
display: flex; gap: 8px;
flex-shrink: 0;
}
/* Order summary (cart + checkout) */
.summary-box {
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-lg);
padding: var(--ss-sp-5);
box-shadow: var(--ss-shadow-1);
position: sticky; top: calc(var(--ss-header-h) + var(--ss-sp-3));
}
.summary-box h3 { margin-bottom: var(--ss-sp-4); }
.summary-row {
display: flex; justify-content: space-between; gap: var(--ss-sp-3);
padding: var(--ss-sp-2) 0;
font-size: 14px;
}
.summary-row + .summary-row { border-top: 1px solid var(--ss-border); }
.summary-row.total {
margin-top: var(--ss-sp-2);
padding-top: var(--ss-sp-4);
border-top: 2px solid var(--ss-border-strong);
font-size: 17px; font-weight: 700;
}
.summary-row strong { font-variant-numeric: tabular-nums; }
.cart-summary-actions {
margin-top: var(--ss-sp-4);
display: flex; flex-direction: column; gap: var(--ss-sp-2);
}
.cart-summary-actions .button,
.cart-summary-actions button { width: 100%; }
/* ---------- Varieties browse index (/varieties.php) ---------- */
/* Breadcrumb navigation — sits above page headers on /varieties.php,
/crop.php, /vendor.php, /variety.php. Plain text with separators. */
.breadcrumbs {
margin: 0 0 var(--ss-sp-3);
font-size: 13px;
color: var(--ss-text-2);
}
.breadcrumbs ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.breadcrumbs li {
display: inline-flex;
align-items: center;
gap: 6px;
}
.breadcrumbs li + li::before {
content: "›";
color: var(--ss-text-2);
opacity: 0.6;
}
.breadcrumbs a {
color: var(--ss-accent);
text-decoration: none;
}
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ss-text); font-weight: 500; }
/* Vendor landing page hero: optional logo inline with the page H1. */
.vendor-page-head .vendor-page-h1 {
display: flex;
align-items: center;
gap: 14px;
margin: 0;
}
.vendor-page-logo {
height: 36px;
width: auto;
object-fit: contain;
flex-shrink: 0;
}
@media (max-width: 0px) { /* neutralized — was: 720px */
.vendor-page-head .vendor-page-h1 { font-size: 22px; }
.vendor-page-logo { height: 28px; }
}
/* The crop section H2 on /varieties.php and /vendor.php is now a real link
into the dedicated crop landing page. Keep the heading look, just make
the underline appear on hover so it reads as an anchor. */
.varieties-section-link {
color: inherit;
text-decoration: none;
}
.varieties-section-link:hover {
color: var(--ss-accent);
text-decoration: underline;
}
.varieties-intro {
font-size: 15px;
line-height: 1.6;
color: var(--ss-text);
margin: 0 0 var(--ss-sp-5);
max-width: 820px;
}
.varieties-intro strong { font-weight: 600; }
.varieties-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: var(--ss-sp-4);
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-md);
margin-bottom: var(--ss-sp-6);
}
.varieties-nav a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--ss-border-strong);
background: var(--ss-surface);
color: var(--ss-text);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.varieties-nav a:hover {
background: var(--ss-accent);
border-color: var(--ss-accent);
color: #fff;
text-decoration: none;
}
.varieties-nav-count {
font-size: 11px;
color: var(--ss-text-2);
font-variant-numeric: tabular-nums;
}
.varieties-nav a:hover .varieties-nav-count { color: rgba(255,255,255,0.78); }
.varieties-section {
margin-bottom: var(--ss-sp-6);
padding-top: var(--ss-sp-4);
scroll-margin-top: calc(var(--ss-header-h) + 12px);
}
.varieties-section-title {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 var(--ss-sp-4);
padding-bottom: 8px;
border-bottom: 2px solid var(--ss-accent);
font-size: 22px;
}
.varieties-section-count {
font-size: 12px;
font-weight: 500;
color: var(--ss-text-2);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.varieties-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 4px 16px;
}
.varieties-link {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
padding: 6px 8px;
border-radius: var(--ss-r-sm);
text-decoration: none;
color: var(--ss-text);
transition: background-color 100ms ease;
}
.varieties-link:hover {
background: rgba(28, 102, 64, 0.06);
text-decoration: none;
}
.varieties-link-name { font-weight: 600; color: var(--ss-accent); }
.varieties-link-vendor,
.varieties-link-class {
font-size: 12px;
color: var(--ss-text-2);
}
.varieties-link-class::before { content: "· "; }
.varieties-back-top {
text-align: right;
margin: var(--ss-sp-3) 0 0;
font-size: 12px;
}
.varieties-back-top a { color: var(--ss-text-2); }
.varieties-back-top a:hover { color: var(--ss-accent); }
/* Footer "Browse all varieties" link sits below the tagline. */
.app-footer-links {
margin-top: 6px;
font-size: 13px;
}
.app-footer-links a {
color: var(--ss-accent);
text-decoration: none;
}
.app-footer-links a:hover { text-decoration: underline; }
@media (max-width: 0px) { /* neutralized — was: 720px */
.varieties-section-title { font-size: 18px; }
.varieties-list { grid-template-columns: 1fr; }
}
.qo-controls {
display: flex;
flex-wrap: wrap;
gap: var(--ss-sp-3);
align-items: center;
margin: 0 0 var(--ss-sp-3);
padding: 10px 14px;
background: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-md);
}
.qo-control {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--ss-text-2);
font-weight: 500;
}
.qo-control > span {
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 11px;
color: var(--ss-text-2);
}
.qo-control select {
/* Override the global wide input — let it size to its content */
width: auto;
min-height: 36px;
padding: 6px 28px 6px 10px;
font-size: 13px;
background-color: var(--ss-surface);
}
/* Group header row inserted between groups when grouping is active. */
.qo-group-header td {
background: var(--ss-surface-2);
border-top: 2px solid var(--ss-border-strong);
padding: 10px 14px;
}
.qo-group-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 11px;
font-weight: 600;
color: var(--ss-text-2);
margin-right: 8px;
}
.qo-group-header strong {
font-size: 15px;
color: var(--ss-text);
margin-right: 10px;
}
.qo-group-count {
font-size: 12px;
color: var(--ss-text-2);
}
@media (max-width: 0px) { /* neutralized — was: 720px */
.qo-controls { padding: 8px 10px; gap: 8px; }
.qo-control { width: 100%; justify-content: space-between; }
.qo-control select { flex: 1; max-width: 60%; }
}
/* Impersonation banner — shown at top of every page when admin is viewing
the site as a customer. Bright amber so it's impossible to forget. */
.impersonating-banner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ss-sp-3);
padding: 10px 14px;
background: #FFB300;
color: #1f1300;
font-size: 14px;
font-weight: 500;
border-bottom: 2px solid #b88200;
}
.impersonating-banner strong { font-weight: 700; }
.impersonating-stop {
display: inline-block;
padding: 4px 12px;
background: #1f1300;
color: #FFB300;
text-decoration: none;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.impersonating-stop:hover { background: #000; color: #fff; text-decoration: none; }
/* Per-order attachment list on the customer account page. */
.account-attachments {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.account-attachments li a {
font-size: 13px;
color: var(--ss-accent);
}
.account-attachments li a:hover { text-decoration: underline; }
/* Reorder button on account.php past orders table. */
.account-reorder-btn {
display: inline-flex;
align-items: center;
gap: 6px;
width: auto;
min-height: 32px;
padding: 4px 12px;
font-size: 13px;
font-weight: 600;
background: var(--ss-surface);
color: var(--ss-accent);
border: 1px solid var(--ss-accent);
border-radius: 999px;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
white-space: nowrap;
}
.account-reorder-btn:hover {
background: var(--ss-accent);
color: #fff;
}
.account-reorder-btn svg { flex-shrink: 0; }
.cart-shipping {
border: 0;
padding: 0;
margin: var(--ss-sp-3) 0 var(--ss-sp-2);
display: flex; flex-direction: column;
gap: 4px;
}
.cart-shipping legend {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ss-text-2);
padding: 0;
margin-bottom: 4px;
}
.cart-shipping-opt {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
border: 1px solid var(--ss-border);
border-radius: 6px;
background: var(--ss-surface);
cursor: pointer;
font-size: 12px;
line-height: 1.25;
transition: background-color 120ms ease, border-color 120ms ease;
}
.cart-shipping-opt:hover { background: var(--ss-surface-2); }
.cart-shipping-opt.is-selected {
border-color: var(--ss-accent);
background: rgba(28, 102, 64, 0.06);
}
/* Override the global `input { min-height: 44px }` etc. so the radio renders
at its native ~14px size rather than expanding to a touch-target box. */
.cart-shipping-opt input[type="radio"] {
-webkit-appearance: radio;
-moz-appearance: radio;
appearance: auto;
width: 14px;
height: 14px;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
accent-color: var(--ss-accent);
flex-shrink: 0;
}
.cart-shipping-opt input[type="radio"]:focus { outline: 1px solid var(--ss-accent); outline-offset: 1px; }
.cart-shipping-name {
flex: 1;
min-width: 0;
}
.cart-shipping-cost {
color: var(--ss-text-2);
font-size: 11px;
font-variant-numeric: tabular-nums;
margin-left: 4px;
white-space: nowrap;
}
.cart-shipping-logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.cart-shipping-logo-ups svg {
display: block;
width: 20px;
height: 24px;
}
/* ---------- Checkout ---------- */
.checkout-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--ss-sp-4);
align-items: start;
}
@media (max-width: 0px) { /* neutralized — was: 960px */
.checkout-layout { grid-template-columns: 1fr; }
}
.section { margin-bottom: var(--ss-sp-4); }
.checkout-layout button[type="submit"] {
width: 100%;
margin-top: var(--ss-sp-3);
min-height: 50px;
font-size: 16px;
}
/* ---------- Compact one-page checkout ---------- */
/* Tighten the page header so it doesn't eat a row by itself. */
.checkout-head {
margin-bottom: var(--ss-sp-3);
align-items: baseline;
flex-wrap: wrap;
}
.checkout-head h1 { margin: 2px 0 0; }
.checkout-head-note { margin: 0; font-size: 13px; }
/* ---------- Inline auth choice on the checkout page ---------- */
/* Two cards side-by-side at the top of checkout: a returning-customer
login form on the left, and a "continue as guest" prompt on the right.
On narrow viewports the two stack so the login form (slightly more
important — returning customers usually want their saved address) ends
up on top. */
.checkout-auth-choice {
display: flex;
gap: var(--ss-sp-4);
margin-bottom: var(--ss-sp-5);
}
.checkout-auth-card {
flex: 1 1 0;
min-width: 0;
padding: var(--ss-sp-4) var(--ss-sp-5);
margin: 0;
display: flex;
flex-direction: column;
}
.checkout-auth-card .section-title {
font-size: 15px;
margin: 0 0 var(--ss-sp-2);
}
.checkout-auth-help {
font-size: 13px;
line-height: 1.4;
margin: 0 0 var(--ss-sp-3);
}
/* Stack form fields tightly — this is a quick-action form, not the main
checkout form. */
.checkout-auth-form .field {
margin-bottom: var(--ss-sp-2);
gap: 4px;
}
.checkout-auth-form button[type="submit"] {
width: 100%;
margin-top: var(--ss-sp-2);
}
/* The guest card visually points down toward the form below. The arrow
is bigger on roomier viewports where it has room to breathe. */
.checkout-auth-guest {
/* Same accent treatment as info cards elsewhere on the site so the
visual hierarchy reads as "option A" vs "option B" rather than
"primary CTA" vs "secondary CTA" — both paths are first-class. */
background: var(--ss-surface-2);
}
.checkout-auth-arrow {
font-size: 28px;
line-height: 1;
color: var(--ss-accent);
text-align: center;
margin: var(--ss-sp-3) 0 var(--ss-sp-3);
font-weight: 600;
}
/* Logged-in status strip: replaces the auth-choice cards once the user
is signed in. Small, low-contrast, with a "Not you?" escape hatch. */
.checkout-auth-status {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--ss-sp-3);
padding: var(--ss-sp-2) var(--ss-sp-4);
margin-bottom: var(--ss-sp-4);
background: var(--ss-accent-soft);
border: 1px solid var(--ss-border);
border-radius: var(--ss-r-md);
font-size: 13px;
color: var(--ss-text);
}
.checkout-auth-status strong { color: var(--ss-accent); }
.checkout-auth-logout {
font-size: 12px;
color: var(--ss-muted);
text-decoration: none;
}
.checkout-auth-logout:hover { text-decoration: underline; }
@media (max-width: 0px) { /* neutralized — was: 720px */
.checkout-auth-choice {
flex-direction: column;
gap: var(--ss-sp-3);
}
.checkout-auth-arrow { margin: var(--ss-sp-2) 0; font-size: 22px; }
}
/* 2-column inner grid of sections inside the left half of .checkout-layout.
Customer spans the full width (lots of fields), then Billing | Ship-to and
Payment | Shipping sit side-by-side, with Notes as a slim full-width row. */
.checkout-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"customer customer"
"billing shipto"
"payment payment"
"notes notes";
gap: var(--ss-sp-3);
}
.co-customer { grid-area: customer; }
.co-billing { grid-area: billing; }
.co-shipto { grid-area: shipto; }
.co-payment { grid-area: payment; }
.co-notes { grid-area: notes; }
@media (max-width: 0px) { /* neutralized — was: 720px */
.checkout-grid {
grid-template-columns: 1fr;
grid-template-areas:
"customer"
"billing"
"shipto"
"payment"
"notes";
}
}
/* Tighter card padding + smaller section titles inside the checkout grid. */
.checkout-grid .card { padding: var(--ss-sp-3) var(--ss-sp-4); margin: 0; }
.checkout-grid .section-title { font-size: 14px; margin: 0 0 var(--ss-sp-2); }
.checkout-grid .form-grid {
gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.checkout-grid .field { margin: 0; gap: 4px; }
.checkout-grid .field label {
font-size: 12px;
font-weight: 500;
color: var(--ss-text-2);
text-transform: none;
letter-spacing: 0;
}
.checkout-grid input,
.checkout-grid select,
.checkout-grid textarea {
min-height: 36px;
padding: 6px 10px;
font-size: 14px;
}
.checkout-grid textarea { min-height: 56px; }
/* Compact radio variant for the dense in-grid sections. */
.radio-card-tight {
padding: 8px 10px;
margin-bottom: 4px;
gap: 8px;
font-size: 13px;
line-height: 1.3;
}
.radio-card-tight input[type="radio"],
.radio-card-tight input[type="checkbox"] {
width: 16px; height: 16px;
min-height: 0; min-width: 0;
margin: 0;
padding: 0; border: 0; background: transparent;
}
.radio-card-tight .muted { font-size: 12px; }
.co-ship-cost {
color: var(--ss-text-2);
font-size: 12px;
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
/* Slimmer summary on the right side of checkout. */
.checkout-summary-items {
max-height: 200px;
overflow-y: auto;
margin-bottom: var(--ss-sp-2);
padding-right: 4px;
}
.checkout-summary-items .summary-row { padding: 4px 0; font-size: 13px; }
.checkout-summary-items .summary-row + .summary-row { border-top: 1px dashed var(--ss-border); }
/* ----------------------------------------------------------------------------
Order form preview ("Your copy of this order")
----------------------------------------------------------------------------
The Seedway Vegetable Seed Order Form PDF is loaded by pdf-lib in the
browser, the customer's typed data is overlaid on top of it at the correct
coordinates, and pdf.js rasterizes the result into the