/* =============================================================================
   DEALZKART RESPONSIVE — mobile · tablet · laptop · desktop
   Breakpoints: 390 mobile, 768 tablet, 1024 laptop, 1440 desktop
   Layout rules: see dd-breakpoints.css (load last)
   ============================================================================= */

/* ── Fluid layout tokens ── */
:root {
  --dk-rail: 168px;
  --ls-card-rail-w: 168px;
  --dk-page-pad-x: 12px;
  --dk-page-pad-y: 16px;
  --dk-sticky-top: 72px;
  --dk-nav-bottom: 72px;
  --dk-bottom-nav-h: 68px;
  --dk-bottom-clearance: calc(var(--dk-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 480px) {
  :root {
    --dk-rail: 192px;
    --ls-card-rail-w: 192px;
    --dk-page-pad-x: 16px;
  }
}

@media (min-width: 768px) {
  :root {
    --dk-rail: 216px;
    --ls-card-rail-w: 216px;
    --dk-page-pad-y: 24px;
    --dk-sticky-top: 96px;
  }
}

@media (min-width: 1024px) {
  :root {
    --dk-page-pad-x: 32px;
    --dk-nav-bottom: 0px;
  }
}

/* ── Prevent horizontal scroll on premium surfaces ── */
.ls-store-page,
.ls-store,
#homeSmartContainer.ls-store,
#dealz-container.ls-store,
.pdp-shell,
.pdp-shell__below,
#productDetail.ls-pdp-page {
  max-width: 100%;
  overflow-x: clip;
  box-sizing: border-box;
}

/* ── Store: safe-area gutters ── */
.ls-store-page .ls-block__inner {
  padding-left: max(var(--ls-s2, 16px), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--ls-s2, 16px), env(safe-area-inset-right, 0px)) !important;
}

@media (min-width: 768px) {
  .ls-store-page .ls-block__inner {
    padding-left: max(var(--ls-s3, 24px), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--ls-s3, 24px), env(safe-area-inset-right, 0px)) !important;
  }
}

@media (min-width: 1024px) {
  .ls-store-page .ls-block__inner {
    padding-left: max(var(--ls-s4, 32px), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--ls-s4, 32px), env(safe-area-inset-right, 0px)) !important;
  }
}

/* Hero layouts: see dd-hero-responsive.css (loaded last) */

/* ── Horizontal rails: stay inside grid (no negative bleed) ── */
@media (max-width: 767px) {
  .ls-sec--slider .ls-pc-rail,
  .ls-sec--bestsellers .ls-pc-rail,
  .ls-sec--creator .ls-pc-rail {
    scroll-padding-inline: var(--ls-s2, 16px);
    padding-inline: 0;
    margin-inline: 0;
  }
}

/* Grid column counts: see dd-layout-grid.css */

/* ── Product cards: touch-friendly ── */
.pc-rail:not(.pdp-related-stack),
.pdp-section__rail:not(.pdp-related-stack),
.ls-slider,
#moreProductsList.pc-rail:not(.pdp-related-stack) {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pc-rail:not(.pdp-related-stack)::-webkit-scrollbar,
.pdp-section__rail:not(.pdp-related-stack)::-webkit-scrollbar,
.ls-slider::-webkit-scrollbar,
#moreProductsList.pc-rail:not(.pdp-related-stack)::-webkit-scrollbar {
  display: none;
}

.pc-rail:not(.pdp-related-stack) .pc,
.pdp-section__rail:not(.pdp-related-stack) .pc,
.ls-pc-rail:not(.pdp-related-stack) > .pc,
#moreProductsList.pc-rail:not(.pdp-related-stack) .pc {
  flex: 0 0 var(--dk-rail);
  width: var(--dk-rail);
  height: auto;
  scroll-snap-align: start;
}

#moreProductsList.pdp-related-stack > .pc,
.pdp-related-stack > .pc {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  scroll-snap-align: unset !important;
}

@media (max-width: 479px) {
  .pc__body {
    padding: 12px;
    gap: 6px;
  }

  .pc__title {
    font-size: 0.75rem;
  }

  .pc__price {
    font-size: 1rem;
  }

  .pc__btn {
    min-height: 44px;
    font-size: 0.8125rem;
  }
}

/* PDP layouts: see dd-pdp-premium.css */

@media (max-width: 767px) {
  #productDetail.ls-pdp-page.page.active {
    padding-bottom: 0 !important;
  }

  .pdp-shell__below {
    padding-bottom: calc(var(--dk-nav-bottom, 72px) + 16px + env(safe-area-inset-bottom, 0px));
  }

  .pdp-block--delivery {
    display: none !important;
  }
}

/* ── Mobile sticky buy bar (touch targets) ── */
@media (max-width: 1023px) {
  #productDetail.ls-pdp-page .pdp-sticky-bar.detail-sticky-cta {
    padding: 10px max(var(--dk-page-pad-x), env(safe-area-inset-left, 0px))
      calc(10px + env(safe-area-inset-bottom, 0px))
      max(var(--dk-page-pad-x), env(safe-area-inset-right, 0px));
  }

  #productDetail.ls-pdp-page .detail-sticky-cta__inner {
    gap: var(--ls-s2, 16px);
    align-items: center;
  }

  #productDetail.ls-pdp-page .detail-sticky-cta__primary {
    min-height: 48px;
    flex: 1 1 auto;
    max-width: 220px;
  }

  body.product-detail-sticky-on:has(#productDetail.ls-pdp-page.active) {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 1024px) {
  #productDetail.ls-pdp-page .pdp-sticky-bar.detail-sticky-cta--visible {
    display: none !important;
  }

  body.product-detail-sticky-on:has(#productDetail.ls-pdp-page.active) {
    padding-bottom: 0 !important;
  }
}

/* ── Search: responsive grid ── */
#search.page.active .search-page-shell {
  padding-left: max(var(--dk-page-pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--dk-page-pad-x), env(safe-area-inset-right, 0px));
}

@media (max-width: 767px) {
  #search .search-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ls-s2, 16px);
  }

  #search .search-page-controls {
    width: 100%;
  }

  #search .search-sort-select {
    width: 100%;
    min-height: 44px;
  }

  #search #searchResults.products-grid.search-results-grid {
    gap: var(--ls-s2, 16px);
  }

  #search .card-mini--search {
    min-height: 0;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  #search #searchResults.products-grid.search-results-grid {
    display: flex;
    flex-direction: column;
    gap: var(--ls-s2, 16px);
  }
}

@media (min-width: 1280px) {
  #search #searchResults.products-grid.search-results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ls-s2, 16px) var(--ls-s3, 24px);
    align-items: stretch;
  }

  #search #searchResults.products-grid.search-results-grid > .card-mini--search {
    min-width: 0;
    height: 100%;
  }
}

/* ── Cart, account, spin: page shells ── */
#cart.cart-page .cart-page-shell,
#account.account-page .account-page-shell,
#spin.spin-page .spin-page-wrapper,
#spin-history.spin-history-page .spin-history-shell {
  padding-left: max(var(--dk-page-pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--dk-page-pad-x), env(safe-area-inset-right, 0px));
}

@media (max-width: 767px) {
  #account.account-page .profile-container {
    flex-direction: column;
  }

  #about.page.active .info-card,
  #terms.page.active .info-card,
  #faq.page.active .info-card,
  #refer.page.active .info-card,
  #rewards-guide.page.active .info-card,
  #support.support-page .info-card,
  #delete-account .info-card {
    margin-left: var(--dk-s1, 8px);
    margin-right: var(--dk-s1, 8px);
    padding: var(--ls-s2, 16px);
  }
}

@media (min-width: 768px) {
  #cart.cart-page .cart-page-shell,
  #account.account-page .account-page-shell,
  #spin.spin-page .spin-page-wrapper {
    padding: var(--ls-s3, 24px) max(var(--dk-page-pad-x), env(safe-area-inset-right, 0px))
      var(--ls-s4, 32px) max(var(--dk-page-pad-x), env(safe-area-inset-left, 0px));
  }
}

/* ── Mobile app shell: single bottom clearance, no footer gap ── */
@media (max-width: 1023px) {
  .main-content {
    padding-bottom: var(--dk-bottom-clearance) !important;
  }

  #cart.cart-page .cart-page-shell,
  #account.account-page .account-page-shell,
  #spin.spin-page .spin-page-wrapper,
  #spin-history.spin-history-page .spin-history-shell,
  #search.page.active .search-page-shell,
  #support.support-page .support-page-shell,
  #delete-account.account-delete-page .delete-account-shell {
    padding-bottom: 12px !important;
  }

  #cart.cart-page,
  #spin.spin-page,
  #spin-history.spin-history-page,
  #delete-account.account-delete-page {
    min-height: 0 !important;
  }

  /* Bottom nav SPA — hide web footer band (removes empty gap + trust strip on cart/account) */
  .site-footer.seo-footer,
  .seo-crawl-nav {
    display: none !important;
  }
}

html.dd-native-app .site-footer.seo-footer,
html.dd-native-app .seo-crawl-nav {
  display: none !important;
}

/* ── Staff picks: tighter quote on phone ── */
@media (max-width: 767px) {
  .ls-staff-quote {
    font-size: 0.9375rem;
    line-height: 1.45;
  }
}

/* ── Banner large: mobile ── */
@media (max-width: 767px) {
  .ls-banner-large__grid {
    grid-template-columns: 1fr;
  }

  .ls-banner-large__media {
    min-height: 200px;
  }
}

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