/* v2.9.25.587 — PHONE PASS + SMOKY ₿ FOOTER (Sohan 10/31: "featured card too long… make mobile
   super cool" / "the btc Bs at the bottom above the yellow are not present… make that black area
   smokey as well"). Presentation only: no markup, data, cart or checkout changes.
   Enqueue right AFTER home-rrh-v1.css (sr-home-rrh.php):
     wp_enqueue_style('sr-home-mobile', $base . 'css/home-mobile-v2.css', ['sr-home-rrh'], $ver);
   Tested live by injecting into silkroadnyc.com at 390x844 and 1440x900 (10/31 7:15 PM). */

/* ---------- all widths ---------- */
/* card name: the 2-line clamp never applied (display was flow-root), so a 3rd line peeked
   under the price on long names. */
.srh .sr-rc .sr-rc-name { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25 !important; min-height: 2.5em !important; max-height: 2.5em !important; }

/* footer: RRH ₿ pattern back + drifting smoke, same smoke tile as the hero */
.srh .srh-ftr { position: relative; isolation: isolate; overflow: hidden; }
.srh .srh-ftr::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url(../brand/v1-migrated/SR-Pattern-Bitcoin-Gradient-1024.webp) center top / 560px repeat; opacity: .26; }
.srh .srh-ftr::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 200%; z-index: -1; pointer-events: none;
  background: url(../brand/hero-v2/smoke.webp) repeat-x 0 100% / 50% 60%; opacity: .7;
  -webkit-mask-image: linear-gradient(0deg, #000 35%, rgba(0,0,0,.35) 70%, transparent); mask-image: linear-gradient(0deg, #000 35%, rgba(0,0,0,.35) 70%, transparent);
  animation: srhFtrSmk 70s linear infinite; will-change: transform; }
@keyframes srhFtrSmk { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .srh .srh-ftr::after { animation: none; } }

/* ---------- phones ---------- */
@media (max-width: 767px) {
  .srh .srh-ftr::before { opacity: .34; }
  /* the status strip repeats the hero's trust line — drop it so the hero starts higher */
  .srh .srh-status { display: none; }

  /* hero: camel joins the first screen, CTAs full width, ₿ tide shows through */
  .srh-hx-content { position: relative; padding: 26px 16px 22px !important; }
  .srh .srh-hero.srh-hx h1 { font-size: 38px; line-height: 1.02; max-width: 64%; margin: 12px 0 14px; position: relative; z-index: 2; }
  .srh .srh-hx .srh-eyebrow { font-size: 12px; max-width: 70%; }
  .srh-hx-camel { position: absolute; right: -4px; top: 14px; width: 37%; z-index: 1; pointer-events: none; }
  .srh .srh-hx-camel img { height: auto; width: 100%; }
  .srh-hx-copy { position: relative; z-index: 2; }
  .srh .srh-hx-lede { font-size: 15px; line-height: 1.5; margin: 0 0 16px; position: relative; z-index: 2; }
  .srh-hx-ctas { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .srh-hx-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; }
  .srh .srh-hx-seg button { width: 100%; padding: 0; }
  .srh .srh-btn.srh-hx-order { width: 100%; display: flex; align-items: center; justify-content: center; height: 54px; box-sizing: border-box; }
  .srh .srh-hx-trust { font-size: 12px; gap: 2px 14px; margin-top: 14px; }
  .srh .srh-hx-fade { background: linear-gradient(180deg, rgba(7,9,8,.10) 0%, rgba(7,9,8,.45) 55%, rgba(7,9,8,.75) 100%) !important; }
  .srh .srh-hx-wm { top: 22%; opacity: .14; }

  /* section heads: compact, left aligned, "See all" on the right */
  .srh h2.srh-t { text-align: left !important; }
  .srh .srh-sec h2.srh-t, .srh .srh-sec-lg h2.srh-t { font-size: 22px; margin-bottom: 12px; }
  .srh-sec-featured { padding: 26px 16px 20px; }
  .srh-sec-featured .srh-fb-head { display: grid !important; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; margin-bottom: 12px; }
  .srh .srh-sec-featured .srh-fb { font-size: 22px; line-height: 1.15; margin: 0; grid-column: 1; }
  .srh-sec-featured .srh-fb-kick { grid-column: 1; font-size: 10.5px; margin: 0; }
  .srh-sec-featured .srh-fb-right { grid-column: 2; grid-row: 1 / 3; width: auto; margin: 0; align-self: center; }
  .srh .srh-sec-featured .srh-fb-all { padding: 10px 0; font-size: 12px; white-space: nowrap; }
  .srh-sec-featured .srh-fb-sub { display: none; }
  .srh .srh-sec-moods .srh-sub { background: none !important; padding: 0 !important; margin: -6px 0 14px !important; font: 400 14px/1.45 Poppins, sans-serif !important; color: #5f6660 !important; text-align: left; }

  /* product rails: next card peeks so it reads as a swipe; snap */
  .srh-rail { scroll-snap-type: x mandatory; gap: 10px; }
  .srh-rail > * { flex-basis: 43% !important; scroll-snap-align: start; }

  /* RRH card at phone size: tighter, shorter */
  .srh .sr-rc { padding: 7px 7px 9px; gap: 4px; border-radius: 12px; }
  .srh .sr-rc .sr-rc-ph { border-radius: 8px; }
  .srh .sr-rc .sr-rc-brand { font-size: 10.5px; margin-top: 2px; }
  .srh .sr-rc .sr-rc-name { font-size: 13.5px; margin: 0 !important; padding: 0 !important; }
  .srh .sr-rc .sr-rc-price { font-size: 16px; }
  .srh .sr-rc .sr-rc-size { font-size: 10.5px; }
  .srh .sr-rc .sr-rc-tag { font-size: 10.5px; padding: 3px 6px; }
  .srh .sr-rc-add { height: 40px !important; min-height: 40px !important; line-height: 40px !important; font-size: 13px; border-radius: 8px; }

  /* specials: swipe deck instead of a 1,600px stack */
  .srh-deals { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 10px; scrollbar-width: none; }
  .srh-deals::-webkit-scrollbar, .srh-tiles-moods::-webkit-scrollbar, .srh-sec-cats .srh-tiles::-webkit-scrollbar { display: none; }
  .srh-deals > * { flex: 0 0 84%; scroll-snap-align: start; }
  .srh .srh-deal-body { padding: 14px 16px; }
  .srh .srh-deal-body h3 { font-size: 18px; line-height: 1.25; margin: 4px 0 6px; }
  .srh .srh-deal-body p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 12px; }
  .srh .srh-deal-body .srh-btn { height: 44px; min-height: 44px; }

  /* moods + categories: swipeable photo tiles */
  .srh-tiles-moods, .srh-sec-cats .srh-tiles { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .srh-tiles-moods .srh-tile, .srh-sec-cats .srh-tile { flex: 0 0 42%; min-height: 136px !important; scroll-snap-align: start; }
  .srh a.srh-tile, .srh a.srh-tile h3 { text-decoration: none !important; }

  /* tighter vertical rhythm */
  .srh-sec, .srh-sec-lg { padding-top: 26px !important; padding-bottom: 18px !important; }
}

/* v2.9.25.588 — fixes found in the live 390/1440 screenshot check (10/31) */
/* card names: the 4px tap padding sat inside the clip, so the top of a 3rd line showed above the price */
.srh .sr-rc .sr-rc-name { padding: 0 !important; margin: 0 !important; }
/* ORDER ONLINE: space before the arrow */
.srh .srh-hx-order span[aria-hidden] { margin-left: .45em; }
@media (max-width: 767px) {
  /* camel: keep the whole wordmark ("Silk Road Nyc") inside the screen */
  .srh-hx-camel { right: 10px; width: 33%; }
}
/* v2.9.25.589 — product type after the brand ("Loud Star · Live Rosin") */
.srh .sr-rc .sr-rc-type { color: #fff; font-weight: 600; }
/* v2.9.25.590 — Sohan: the small line is too small. Bigger brand + product type line, strain pill
   and deal badge on every card (phone and desktop). */
.srh .sr-rc .sr-rc-brand { font-size: 13px !important; line-height: 1.3 !important; margin-top: 6px !important; color: #e3e9e5; }
.srh .sr-rc .sr-rc-type { font-size: inherit; color: #7ED957; font-weight: 700; }
.srh .sr-rc .sr-rc-tag { font-size: 12px !important; padding: 4px 8px !important; }
.srh .sr-rc .sr-rc-deal { font-size: 12px !important; padding: 5px 9px !important; }
@media (max-width: 767px) {
  .srh .sr-rc .sr-rc-brand { font-size: 12.5px !important; }
  .srh .sr-rc .sr-rc-tag { font-size: 11.5px !important; padding: 3px 7px !important; }
}