/* =============================================================================
 * Ultra Research — storefront stylesheet
 * Ported from the approved design mockup. Layout is inline-styled on the markup;
 * this file carries the base reset, keyframes, and the responsive overrides that
 * target the inline-style signatures (so mobile behaves exactly like the mockup).
 * Fonts (Poppins / Open Sans / IBM Plex Mono) load via <link> in each page head.
 * ===========================================================================*/

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Open Sans', sans-serif; color: #0f1729; background: #ffffff; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(29, 78, 216, .18); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; border-radius: 4px; }

/* ---- Keyframes ------------------------------------------------------------ */
@keyframes apFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-13px); } }
@keyframes apSpin { to { transform: rotate(360deg); } }
@keyframes apDash { to { stroke-dashoffset: 0; } }
@keyframes apToast { 0%{ opacity:0; transform: translateY(20px); } 10%{ opacity:1; transform: translateY(0); } 88%{ opacity:1; transform: translateY(0); } 100%{ opacity:0; transform: translateY(20px); } }
@keyframes apBump { 0%{ transform: scale(1); } 45%{ transform: scale(1.45); } 100%{ transform: scale(1); } }
@keyframes apFadeUp { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: translateY(0); } }
@keyframes apOverlay { from { opacity:0; } to { opacity:1; } }
@keyframes apScaleIn { from { opacity:0; transform: translateY(14px) scale(.97); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes apDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes apMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes apFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@keyframes apSnow { 0% { transform: translate(0,-14px); opacity:0; } 8% { opacity:1; } 88% { opacity:1; } 100% { transform: translate(var(--drift,0px), 900px); opacity:0; } }
@keyframes apHeroRise { from { opacity:0; transform: translateY(26px); filter: blur(6px); } to { opacity:1; transform: translateY(0); filter: blur(0); } }
@keyframes apScrollDot { 0% { transform: translateY(0); opacity:0; } 30% { opacity:1; } 100% { transform: translateY(14px); opacity:0; } }

/* One-time entrance fade — resting state is always visible (never gated on scroll). */
[data-reveal] { animation: apFadeUp .6s ease both; }

/* ===================== RESPONSIVE: TABLET + MOBILE =====================
   Layout is inline-styled; these rules retarget containers by their inline-style
   signatures. Selectors cover BOTH colon spacings ("display:flex" and
   "display: flex") so they match hand-authored and tool-serialized markup alike.
   Breakpoints: <=1024 tablet, <=860 nav collapse, <=640 phone. */

/* Nothing should push the page wider than the viewport. */
html { overflow-x: hidden; }
img, svg, video { max-width: 100%; }
[data-mobile-only] { display: none !important; }

/* ---- TABLET (<=1024px) ---- */
@media (max-width: 1024px) {
  [style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="1.6fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  h1 { font-size: clamp(34px, 6.2vw, 58px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(26px, 4.4vw, 36px) !important; }
  [style*="max-width:1240px"], [style*="max-width: 1240px"] { padding-left: 22px !important; padding-right: 22px !important; }
}

/* ---- NAV COLLAPSE (<=860px) ---- */
@media (max-width: 860px) {
  header nav { display: none !important; }
  header [style*="width:200px"], header [style*="width: 200px"] { display: none !important; }
  [data-mobile-only] { display: flex !important; }
  header [style*="max-width:1240px"] { padding-left: 16px !important; padding-right: 16px !important; }
  /* promo bar: collapse to a single tidy line — hide the divider dot + the long
     sub-copy, keep the headline + the CTA. (Full detail lives in the promo modal.) */
  [data-promobar] { padding: 9px 38px !important; gap: 12px !important; }
  [data-promobar] > span:nth-child(2), [data-promobar] > span:nth-child(3) { display: none !important; }
  [data-promobar] > span:first-child { font-size: 12px !important; }
  [data-promobar] > a { font-size: 11px !important; padding: 5px 12px !important; }
}

/* ---- PHONE (<=640px) ---- */
@media (max-width: 640px) {
  [style*="repeat(4"], [style*="repeat(3"]:not([data-keep3]) { grid-template-columns: 1fr !important; }
  [style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="1.6fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="1.05fr"], [style*="1.1fr"], [style*="1.2fr"], [style*=".85fr"], [style*="0.85fr"] { grid-template-columns: 1fr !important; }
  h1 { font-size: clamp(28px, 8.4vw, 40px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(22px, 6.4vw, 28px) !important; }
  [style*="max-width:1240px"], [style*="max-width: 1240px"] { padding-left: 16px !important; padding-right: 16px !important; }
  /* trim oversized vertical padding on phones */
  [style*="padding:74px 28px"], [style*="padding:76px 28px"], [style*="padding:78px 28px"],
  [style*="padding: 78px"], [style*="padding: 76px"], [style*="padding: 74px"] { padding-top: 46px !important; padding-bottom: 46px !important; }
  [style*="padding:72px 28px 78px"], [style*="padding: 72px 28px 78px"] { padding-top: 40px !important; padding-bottom: 46px !important; }
  [style*="padding:54px 48px"], [style*="padding: 54px 48px"] { padding: 32px 22px !important; }
  [style*="padding:56px 28px 30px"], [style*="padding: 56px 28px 30px"] { padding-top: 40px !important; }
  /* wrap flex rows (hero CTAs, stat chips, button pairs) so nothing overflows */
  [style*="display:flex"][style*="gap:14px"], [style*="display:flex"][style*="gap:12px"],
  [style*="display: flex"][style*="gap: 14px"], [style*="display: flex"][style*="gap: 12px"] { flex-wrap: wrap !important; }
}

/* ---- Mobile product cards: reflow the vertical desktop card into a compact,
   scannable horizontal row (thumbnail left, details right). ---- */
@media (max-width: 640px) {
  [style*="gap:20px"] { gap: 12px !important; }               /* tighter list spacing */
  .pcard { flex-direction: row !important; align-items: stretch !important; }
  .pcard-media {
    width: 118px !important; height: auto !important; min-height: 128px !important;
    flex-shrink: 0 !important; border-bottom: 0 !important; border-right: 1px solid #eef2f9 !important;
  }
  .pcard-cat { display: none !important; }   /* long category label crowds the small thumb */
  .pcard-body { padding: 13px 15px !important; gap: 10px !important; }
  .pcard-name { font-size: 16px !important; }
  .pcard-stats { gap: 7px !important; }
  /* cart line item: qty + price controls drop to their own row */
  .cart-line { flex-wrap: wrap !important; padding: 14px !important; gap: 12px !important; }
  .cart-line-ctrls { flex-basis: 100% !important; }
}

/* ---- Mobile hero: shorter (less empty sky above the headline), content nudged
   up, and the floating stat chips collapse to one tidy compact row. ---- */
@media (max-width: 640px) {
  .hero { height: 66vh !important; min-height: 496px !important; }
  .hero-copy > div { transform: translateY(-9%) !important; padding: 0 20px !important; }
  .hero-copy p { font-size: 15px !important; line-height: 1.55 !important; margin-bottom: 24px !important; }
  .hero-stats { bottom: 20px !important; gap: 7px !important; padding: 0 12px !important; flex-wrap: nowrap !important; }
  .hero-stat { flex-direction: column !important; align-items: center !important; text-align: center; gap: 1px !important; padding: 8px 6px !important; flex: 1 1 0 !important; }
  .hero-stat > span:first-child { font-size: 16px !important; }
  .hero-stat > span:last-child { font-size: 8px !important; letter-spacing: .02em !important; line-height: 1.15 !important; }
}