/* =============================================================================
   STORE CALM UX — Shopify-style browsing rhythm (load last)
   One grid · consistent spacing · no visual noise
   ============================================================================= */

:root {
  --store-max: 100%;
  --store-gutter: 16px;
  --store-section-y: 28px;
}

@media (min-width: 768px) {
  :root {
    --store-gutter: 24px;
    --store-section-y: 36px;
  }
}

@media (min-width: 1024px) {
  :root {
    --store-gutter: 32px;
    --store-section-y: 40px;
  }
}

/* —— Page shell —— */
.ls-store,
#homeSmartContainer.ls-store,
#dealz-container.ls-store {
  background: var(--ls-bg, #f7f7f8);
  scroll-behavior: smooth;
}

/* —— Unified section rhythm (same grid every block) —— */
.ls-block {
  border-bottom: none;
  background: transparent;
}

.ls-block__inner {
  max-width: var(--store-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: var(--store-section-y) !important;
  padding-bottom: var(--store-section-y) !important;
  padding-left: max(var(--store-gutter), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--store-gutter), env(safe-area-inset-right, 0px)) !important;
  box-sizing: border-box;
}

.ls-block--flush {
  max-width: var(--store-max);
  margin-left: auto;
  margin-right: auto;
  padding: var(--store-section-y) max(var(--store-gutter), env(safe-area-inset-left, 0px))
    var(--store-section-y) max(var(--store-gutter), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

.ls-block__content {
  gap: var(--ls-s2, 16px);
}

/* —— Section titles: calm, not shouty —— */
.ls-block-head {
  margin-bottom: var(--ls-s2, 16px);
}

.ls-block-head__title {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: var(--ls-ink, #0c0c0e) !important;
}

.ls-block-head__sub {
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  color: var(--ls-muted, #64656b) !important;
  line-height: 1.45 !important;
  margin-top: 4px !important;
  max-width: 48ch;
}

/* —— Remove decorative noise —— */
.ls-hero-full__bg,
.ls-hero-full__gradient,
.ls-hero-full__pattern,
.ls-shape,
.ls-banner-large__bg {
  display: none !important;
}

/* —— Hero: compact product feature, not billboard —— */
.ls-hero-full {
  background: transparent;
}

.ls-hero-full__grid {
  min-height: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  gap: var(--ls-s2, 16px) !important;
}

.ls-hero-full__visual {
  aspect-ratio: 16 / 10 !important;
  max-height: min(36vh, 260px) !important;
  border-radius: var(--ls-r-md, 16px);
  border: 1px solid var(--ls-line, #e8e8ec);
  background: var(--ls-surface, #fff) !important;
}

.ls-hero-full__copy {
  padding: 0 !important;
  align-items: flex-start !important;
}

.ls-hero-full__glass {
  background: var(--ls-surface, #fff) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--ls-line, #e8e8ec) !important;
  border-radius: var(--ls-r-md, 16px) !important;
  box-shadow: var(--ls-shadow-sm, 0 1px 2px rgba(12, 12, 14, 0.04)) !important;
  padding: var(--ls-s2, 16px) !important;
  color: var(--ls-ink, #0c0c0e) !important;
}

.ls-hero-full__copy h1,
.ls-hero-full__glass .ls-price__now,
.ls-hero-full__glass .ls-price__was,
.ls-hero-full__eyebrow {
  color: var(--ls-ink, #0c0c0e) !important;
}

.ls-hero-full__eyebrow {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: var(--ls-muted, #64656b) !important;
  margin-bottom: var(--ls-s1, 8px) !important;
}

.ls-hero-full__copy h1 {
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin-bottom: var(--ls-s1, 8px) !important;
}

.ls-hero-full__offer {
  margin: var(--ls-s1, 8px) 0 !important;
  gap: 6px !important;
}

.ls-hero-full__deal,
.ls-cashback {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
}

.ls-hero-full__actions {
  margin-top: var(--ls-s2, 16px) !important;
  flex-direction: row !important;
  gap: var(--ls-s1, 8px) !important;
}

.ls-hero-full__actions .ls-btn--ghost {
  display: none !important;
}

.ls-hero-full__actions .ls-btn--primary {
  width: auto !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  background: var(--ls-ink, #0c0c0e) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(12, 12, 14, 0.18) !important;
}

@media (min-width: 1024px) {
  .ls-hero-full__grid {
    grid-template-columns: 1fr 1.1fr !important;
    grid-template-areas: "copy visual" !important;
    align-items: center !important;
    gap: var(--ls-s3, 24px) !important;
  }

  .ls-hero-full__visual {
    max-height: 280px !important;
  }
}

/* —— Spotlight banner: inline card —— */
.ls-banner-large {
  background: var(--ls-surface, #fff);
  border: 1px solid var(--ls-line, #e8e8ec);
  border-radius: var(--ls-r-md, 16px);
  box-shadow: var(--ls-shadow-sm, 0 1px 2px rgba(12, 12, 14, 0.04));
}

.ls-banner-large__grid {
  padding: 0 !important;
  min-height: 0 !important;
  gap: 0 !important;
}

.ls-banner-large__media {
  aspect-ratio: 16 / 10 !important;
  max-height: 200px !important;
  min-height: 0 !important;
  background: var(--ls-bg, #f7f7f8) !important;
}

.ls-banner-large__copy {
  padding: var(--ls-s2, 16px) !important;
}

.ls-banner-large__copy h3 {
  color: var(--ls-ink, #0c0c0e) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: var(--ls-s1, 8px) !important;
}

.ls-banner-large__copy .ls-btn--light {
  background: var(--ls-ink, #0c0c0e) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 0.8125rem !important;
  min-height: 40px !important;
  padding: 0 16px !important;
}

@media (min-width: 768px) {
  .ls-banner-large__grid {
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
  }

  .ls-banner-large__media {
    max-height: 180px !important;
    border-radius: var(--ls-r-md, 16px) 0 0 var(--ls-r-md, 16px);
  }
}

/* —— Neutral section surfaces (no colored slabs) —— */
.ls-sec--premium-dark,
.ls-sec--cashback,
.ls-sec--flash {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* —— Product grids & rails: same gap as page —— */
.ls-pc-grid {
  gap: var(--ls-s2, 16px) !important;
}

.ls-pc-rail,
.pc-rail {
  gap: var(--ls-s2, 16px) !important;
  scroll-behavior: smooth;
}

/* —— Calmer cards (less motion, less noise) —— */
.pc {
  box-shadow: var(--ls-shadow-sm, 0 1px 2px rgba(12, 12, 14, 0.04)) !important;
}

.pc:hover {
  transform: none !important;
  box-shadow: var(--ls-shadow-md, 0 4px 16px rgba(12, 12, 14, 0.06)) !important;
}

.pc--flash {
  border-color: var(--ls-line, #e8e8ec) !important;
  background: var(--ls-surface, #fff) !important;
}

.pc--flash .pc__btn {
  background: var(--ls-ink, #0c0c0e) !important;
}

.pc--flash .pc__disc-badge--flash-corner {
  background: var(--ls-ink, #0c0c0e) !important;
  box-shadow: none !important;
}

/* —— Staff / video: quieter —— */
.ls-staff-row {
  border-bottom-color: var(--ls-line, #e8e8ec);
  padding: var(--ls-s2, 16px) 0;
}

.ls-staff-quote {
  font-size: 0.8125rem !important;
  font-style: normal !important;
  color: var(--ls-muted, #64656b) !important;
  border-left: 2px solid var(--ls-line, #e8e8ec);
  padding-left: var(--ls-s2, 16px);
  margin: 0;
}

.ls-video-reel {
  background: var(--ls-surface, #fff) !important;
  border: 1px solid var(--ls-line, #e8e8ec) !important;
  border-radius: var(--ls-r-md, 16px) !important;
  overflow: hidden;
}

.ls-video-reel__frame {
  max-height: 220px;
  background: var(--ls-bg, #f7f7f8);
}

.ls-video-reel__ui {
  padding: var(--ls-s2, 16px) !important;
}

.ls-video-reel__ui h3 {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
}

/* —— Trust note —— */
.ck-home-trust,
.trust-note.ck-home-trust {
  max-width: var(--store-max);
  margin: 0 auto;
  padding: var(--store-section-y) max(var(--store-gutter), env(safe-area-inset-right, 0px))
    calc(var(--store-section-y) + env(safe-area-inset-bottom, 0px))
    max(var(--store-gutter), env(safe-area-inset-left, 0px));
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ls-muted, #64656b);
  border-top: 1px solid var(--ls-line, #e8e8ec);
  background: transparent;
}

.ck-home-trust__line {
  margin: 0 0 4px;
  font-weight: 500;
  color: var(--ls-ink, #0c0c0e);
}

.ck-home-trust__fine {
  margin: 0;
  font-size: 0.75rem;
  opacity: 0.85;
}

/* —— Buttons sitewide in store —— */
.ls-store .ls-btn {
  font-family: var(--ls-font, inherit);
  font-weight: 600;
  border-radius: 10px;
}

/* —— Smooth scroll on rails (touch) —— */
.ls-store-page {
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  .ls-store {
    scroll-behavior: auto;
  }
}