/* v2.9.25.532 — HOMEPAGE SHOP-FIRST (see assets/js/shopfirst-v1.js).
   Every rule is scoped to html.sr-sf, so this file does nothing until the
   shop-first flag is on. !important is needed because the hero's critical CSS
   is inline and uses it (CLAUDE.md: ID selectors beat class rules here). */

html.sr-sf .sf-top { display: none; }
html.sr-sf .sf-picks .sf-m { display: none; }

/* shared controls */
html.sr-sf .sf-seg { display: inline-flex; border: 1px solid rgba(126,217,87,.35); border-radius: 999px; padding: 4px; background: rgba(255,255,255,.04); }
html.sr-sf .sf-seg button { min-width: 150px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: 700 15px/1 Poppins, -apple-system, sans-serif; cursor: pointer; transition: background .15s, color .15s; }
html.sr-sf .sf-seg button.is-on { background: #7ED957; color: #08080B; }
html.sr-sf .sf-seg button:focus-visible { outline: 2px solid #7ED957; outline-offset: 2px; }
html.sr-sf .sf-status { font: 500 13px/1.4 Poppins, -apple-system, sans-serif; color: rgba(255,255,255,.82); }
html.sr-sf .sf-status a { color: #7ED957; text-decoration: none; font-weight: 700; white-space: nowrap; }
html.sr-sf .sf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #8a948c; margin-right: 6px; vertical-align: 1px; }
html.sr-sf .sf-dot.is-open { background: #7ED957; box-shadow: 0 0 8px rgba(126,217,87,.8); }
html.sr-sf .sf-picks { position: relative; z-index: 2; }
html.sr-sf .sf-picks-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 14px; }
html.sr-sf .sf-picks-head h2 { font: 800 22px/1.2 Poppins, -apple-system, sans-serif !important; color: #fff !important; margin: 0 !important; }
html.sr-sf .sf-picks-head a { color: #7ED957; font: 700 14px/1 Poppins, -apple-system, sans-serif; text-decoration: none; white-space: nowrap; }
html.sr-sf .sf-grid { display: grid; gap: 16px; }
html.sr-sf .sf-grid .sr-card { width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; }

/* compact cards (all widths) so the first row's price + Add stay on screen:
   390x844 above the bottom bar, 1440x900 above the fold
     (same card, same parts — only the photo ratio and price row tighten) */
html.sr-sf #sr-homepage .sf-grid .sr-card-img-wrap { aspect-ratio: 4 / 3 !important; }
html.sr-sf #sr-homepage .sf-grid .sr-card-price-row { flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; }
html.sr-sf #sr-homepage .sf-grid .sr-card-price-row > :first-child { min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; line-height: 1.15 !important; }
html.sr-sf #sr-homepage .sf-grid .sr-card-price-old { font-size: 11px !important; }
html.sr-sf #sr-homepage .sf-grid .sr-card-price { font-size: 16px !important; }
/* narrow cards clip "ADD TO CART": show the cart icon + "Add" instead (aria-label stays "Add to cart") */
html.sr-sf #sr-homepage .sf-grid .sr-card-add-btn { flex: none !important; width: auto !important; min-width: 0 !important; height: 38px !important; padding: 0 10px !important; font-size: 0 !important; letter-spacing: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; }
html.sr-sf #sr-homepage .sf-grid .sr-card-add-btn svg { width: 15px !important; height: 15px !important; margin: 0 5px 0 0 !important; }
html.sr-sf #sr-homepage .sf-grid .sr-card-add-btn::after { content: "Add"; font: 700 13px/1 Poppins, -apple-system, sans-serif; }

/* ---------- DESKTOP (> 768px) — Option A ----------
   #sr-homepage #srnyc-hero prefix: the hero's own rules use IDs + !important */
@media (min-width: 769px) {
  html.sr-sf #sr-homepage #srnyc-hero.sf-hero { padding: 32px 88px 30px !important; min-height: 0 !important; }
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-grid { grid-template-columns: minmax(0,1.6fr) minmax(0,.5fr) !important; gap: 32px !important; align-items: center !important; max-width: 1264px !important; min-height: 0 !important; padding: 0 !important; margin: 0 auto !important; }
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-lede,
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-cta-row,
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-effects,
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-trust,
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-proof,
  html.sr-sf #sr-homepage #srnyc-hero #sr-hero-shelf { display: none !important; }
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-copy { padding: 0 !important; margin: 0 !important; }
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-eyebrow { color: #D4AF37 !important; letter-spacing: .14em !important; margin: 0 0 12px !important; }
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-h1 { font-size: 52px !important; line-height: 1.02 !important; margin: 0 !important; max-width: 760px !important; }
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-h1 br { display: none; }
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-accent { display: block !important; font: 600 20px/1.3 Poppins, -apple-system, sans-serif !important; color: #7ED957 !important; margin-top: 10px !important; letter-spacing: 0 !important; }
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-camelcol { display: flex !important; justify-content: center !important; align-items: center !important; min-height: 0 !important; height: 280px !important; }
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-camel { height: 280px !important; width: auto !important; min-height: 0 !important; max-height: 280px !important; }
  html.sr-sf #sr-homepage #srnyc-hero .sr-hero-camel-img { height: 280px !important; width: auto !important; max-width: none !important; max-height: 280px !important; }
  html.sr-sf .sf-desk-ctl { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 20px 0 0; }
  html.sr-sf .sf-desk-fee { font: 500 13px/1.4 Poppins, -apple-system, sans-serif; color: rgba(255,255,255,.65); margin-top: 2px; }
  html.sr-sf .sf-picks { max-width: 1264px; margin: 24px auto 0; }
  html.sr-sf .sf-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
}

/* ---------- PHONE (<= 768px) — Option B ---------- */
@media (max-width: 768px) {
  /* the header and ticker sit in normal flow above the hero, so the old 76px
     top padding was dead space on phones */
  html.sr-sf #srnyc-hero.sf-hero { padding: 0 0 18px !important; }
  html.sr-sf .sf-hero .sr-hero-grid,
  html.sr-sf .sf-hero .sr-hero-wm { display: none !important; }
  html.sr-sf .sf-desk-ctl { display: none !important; }
  html.sr-sf .sf-top { display: block; position: relative; z-index: 2; }
  html.sr-sf .sf-order { display: grid; gap: 8px; background: #0f1311; border-top: 1px solid rgba(126,217,87,.16); border-bottom: 1px solid rgba(126,217,87,.16); padding: 10px 16px; }
  html.sr-sf .sf-order .sf-seg { display: flex; }
  html.sr-sf .sf-order .sf-seg button { flex: 1; min-width: 0; height: 40px; }
  html.sr-sf .sf-search { margin: 0; }
  html.sr-sf .sf-search input { width: 100%; height: 40px; border: 0; border-radius: 10px; padding: 0 14px; background: #fff; color: #08080B; font: 500 16px/40px Poppins, -apple-system, sans-serif; box-sizing: border-box; }
  html.sr-sf .sf-status { font-size: 11.5px; }
  html.sr-sf .sf-band { display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-height: 82px; }
  html.sr-sf .sf-band-camel { height: 76px; width: auto; flex: none; filter: drop-shadow(0 0 10px rgba(126,217,87,.45)); }
  html.sr-sf .sf-band-copy { min-width: 0; }
  /* two IDs: an older #sr-homepage hero rule sets the H1 to 34px with !important */
  html.sr-sf #sr-homepage #srnyc-hero .sf-band .sr-hero-h1 { font: 800 16px/1.2 Poppins, -apple-system, sans-serif !important; margin: 0 !important; letter-spacing: 0 !important; text-shadow: none !important; }
  html.sr-sf .sf-band .sr-hero-h1 br,
  html.sr-sf .sf-band .sr-hero-accent { display: none !important; }
  html.sr-sf .sf-band-line { font: 500 12px/1.4 Poppins, -apple-system, sans-serif; color: rgba(255,255,255,.75); margin: 4px 0 0; }
  html.sr-sf .sf-21 { color: #D4AF37; font-weight: 700; }
  html.sr-sf .sf-picks { padding: 2px 16px 0; }
  html.sr-sf .sf-picks .sf-m { display: inline; }
  html.sr-sf .sf-picks .sf-d { display: none; }
  html.sr-sf .sf-picks-head { margin-bottom: 10px; }
  html.sr-sf .sf-picks-head h2 { font-size: 16px !important; }
  html.sr-sf .sf-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html.sr-sf .sf-seg button { transition: none; }
}