/**
 * Storefront responsive foundation — GothamCommerce
 * Tokens + overflow + containers + typography + grids + z-index + safe-area
 * Loaded after store-specific CSS so utilities can override safely.
 */

:root {
  /* Breakpoint strategy (documentation + JS checks) */
  --lgk-bp-xs: 320px;
  --lgk-bp-sm: 640px;
  --lgk-bp-md: 768px;
  --lgk-bp-lg: 1024px;
  --lgk-bp-xl: 1280px;
  --lgk-bp-2xl: 1536px;

  /* Canonical mobile/desktop cut used by chrome (align Impact + LGK) */
  --lgk-bp-nav-desktop: 1100px;
  --lgk-bp-catalog: 700px;

  --lgk-container-pad: clamp(1rem, 2.5vw, 2rem);
  --lgk-section-gap: clamp(1.5rem, 4vw, 3.5rem);
  --lgk-card-radius: clamp(0.65rem, 1.2vw, 0.95rem);
  --lgk-content-max: 72rem;
  --lgk-prose-max: 42rem;
  --lgk-touch: 2.75rem; /* 44px */

  --lgk-z-header: 100050;
  --lgk-z-sticky-cta: 100060;
  --lgk-z-drawer: 100100;
  --lgk-z-modal: 100200;
  --lgk-z-toast: 100300;

  --lgk-font-display: clamp(1.65rem, 4.2vw, 2.75rem);
  --lgk-font-h1: clamp(1.45rem, 3.2vw, 2.25rem);
  --lgk-font-h2: clamp(1.2rem, 2.4vw, 1.65rem);
  --lgk-font-h3: clamp(1.05rem, 1.8vw, 1.3rem);
  --lgk-font-body: clamp(0.9375rem, 1.1vw, 1.05rem);
  --lgk-font-small: clamp(0.8rem, 1vw, 0.9rem);
}

/* —— Global overflow guard —— */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  min-height: 100dvh;
  min-height: 100vh;
}

img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

/* —— StorefrontContainer / shared containers —— */
.lgk-sf-container,
.StorefrontContainer,
.lgk-container {
  width: 100%;
  max-width: var(--lgk-content-max);
  margin-inline: auto;
  padding-inline: var(--lgk-container-pad);
  box-sizing: border-box;
}

/* Full-bleed visual sections keep edge-to-edge; inner content can re-contain */
.lgk-sf-container--full,
.lgk-sf-bleed {
  max-width: none;
  width: 100%;
}

.lgk-sf-prose {
  max-width: var(--lgk-prose-max);
}

@media (min-width: 1920px) {
  :root {
    --lgk-content-max: 80rem;
  }
}

@media (min-width: 2560px) {
  :root {
    --lgk-content-max: 90rem;
    --lgk-container-pad: clamp(1.5rem, 4vw, 4rem);
  }
}

/* —— Typography helpers —— */
.lgk-type-display { font-size: var(--lgk-font-display); line-height: 1.15; letter-spacing: -0.03em; }
.lgk-type-h1 { font-size: var(--lgk-font-h1); line-height: 1.2; letter-spacing: -0.02em; }
.lgk-type-h2 { font-size: var(--lgk-font-h2); line-height: 1.25; }
.lgk-type-h3 { font-size: var(--lgk-font-h3); line-height: 1.3; }
.lgk-type-body { font-size: var(--lgk-font-body); line-height: 1.55; }
.lgk-type-small { font-size: var(--lgk-font-small); line-height: 1.45; }

/* —— Touch targets —— */
.lgk-topbar__icon,
.lgk-topbar--v2 .lgk-topbar__icon,
.lgk-acc-dock__btn,
button.lgk-touch,
a.lgk-touch {
  min-width: var(--lgk-touch);
  min-height: var(--lgk-touch);
}

.lgk-sf-btn,
.button,
.button--primary,
.lgk-wayne-home__btn,
.lgk-collections-page__search button {
  min-height: 2.5rem;
}

@media (max-width: 699px) {
  .lgk-sf-btn,
  .button.button--primary,
  .lgk-pdp__actions button {
    min-height: var(--lgk-touch);
  }
}

/* —— Product grids (shared) —— */
.lgk-catalog-products,
.product-list--grid,
.lgk-search-results__grid {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.65rem, 2vw, 1.15rem);
  overflow: visible !important;
}

@media (max-width: 359px) {
  .lgk-catalog-products,
  .product-list--grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 700px) {
  .lgk-catalog-products,
  .product-list--grid,
  .lgk-search-results__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .lgk-catalog-products,
  .product-list--grid,
  .lgk-search-results__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .lgk-catalog-products,
  .product-list--grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1920px) {
  .lgk-catalog-products,
  .product-list--grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.lgk-collection-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)) !important;
}

/* —— Collection / search cards —— */
.lgk-collection-card__title,
.product-card__title,
.lgk-card-v2 .product-card__title {
  font-size: max(0.8125rem, 0.9em);
  line-clamp: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__price,
.lgk-card-v2 .price {
  font-size: max(0.875rem, 0.92em);
  overflow-wrap: anywhere;
}

/* —— PDP —— */
.lgk-pdp__sticky-buy {
  display: none;
}

@media (max-width: 899px) {
  .lgk-pdp__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .lgk-pdp__actions > div,
  .lgk-pdp__actions button,
  .lgk-pdp__actions form {
    width: 100%;
  }

  .lgk-pdp__sticky-buy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--lgk-z-sticky-cta);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem max(var(--lgk-container-pad), env(safe-area-inset-right))
      calc(0.65rem + env(safe-area-inset-bottom)) max(var(--lgk-container-pad), env(safe-area-inset-left));
    background: rgba(8, 10, 14, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
  }

  .lgk-pdp__sticky-buy .lgk-pdp__sticky-price {
    font-weight: 700;
    font-size: 1rem;
  }

  .lgk-pdp__sticky-buy .button {
    flex: 1 1 auto;
    min-height: var(--lgk-touch);
  }

  body:has(.lgk-pdp__sticky-buy) #main {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }
}

.lgk-pdp__thumbs {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.lgk-pdp__thumb {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* Specs / tables → cards on mobile */
@media (max-width: 699px) {
  .lgk-pdp table,
  .product-specs table,
  .rte table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .lgk-pdp table th,
  .lgk-pdp table td,
  .product-specs table th,
  .product-specs table td {
    white-space: nowrap;
  }
}

/* —— Forms —— */
@media (max-width: 699px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important; /* avoid iOS zoom */
    min-height: var(--lgk-touch);
  }
}

/* —— Topbar: single breakpoint for search (kill 768–1099 dead zone) —— */
@media (max-width: 1099px) {
  .lgk-topbar__search,
  .lgk-topbar--v2 .lgk-topbar__search {
    display: none !important;
  }

  .lgk-topbar__icon--search-mobile,
  .lgk-topbar--v2 .lgk-topbar__icon--search-mobile {
    display: inline-flex !important;
  }
}

@media (min-width: 1100px) {
  .lgk-topbar__search,
  .lgk-topbar--v2 .lgk-topbar__search {
    display: inline-flex !important;
  }

  .lgk-topbar__icon--search-mobile,
  .lgk-topbar--v2 .lgk-topbar__icon--search-mobile {
    display: none !important;
  }
}

@media (max-width: 699px) {
  .lgk-topbar,
  .lgk-topbar--v2 {
    min-height: 3.25rem;
  }

  .lgk-topbar__logo img,
  .header__logo-image {
    max-height: 2.4rem !important;
  }
}

/* —— Sister store logos: never exceed viewport —— */
html.lgk-storefront--deal-geekland {
  --header-logo-width: clamp(140px, 48vw, 320px);
}
html.lgk-storefront--candy-geekland {
  --header-logo-width: clamp(120px, 46vw, 260px);
}
html.lgk-storefront--digital-geekland {
  --header-logo-width: clamp(120px, 44vw, 240px);
}

html.lgk-storefront--deal-geekland .header__logo-image--deal {
  width: clamp(140px, 48vw, 320px) !important;
  max-height: clamp(48px, 12vw, 96px) !important;
}

@media (min-width: 1100px) {
  html.lgk-storefront--deal-geekland {
    --header-logo-width: clamp(220px, 22vw, 400px);
  }
  html.lgk-storefront--candy-geekland {
    --header-logo-width: clamp(180px, 18vw, 300px);
  }
  html.lgk-storefront--digital-geekland {
    --header-logo-width: clamp(160px, 16vw, 260px);
  }
  html.lgk-storefront--deal-geekland .header__logo-image--deal {
    width: clamp(220px, 22vw, 400px) !important;
    max-height: 120px !important;
  }
}

/* —— Cart page stack —— */
@media (max-width: 899px) {
  .lgk-cart-layout,
  .cart-page__layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}

/* —— Footer accordion feel on mobile —— */
@media (max-width: 699px) {
  .lgk-footer-v2__cols,
  .lgk-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .lgk-newsletter-cta__form,
  .lgk-footer-newsletter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}

/* —— Horizontal chips —— */
.lgk-hscroll,
.lgk-collection-toolbar,
.lgk-acc-kpi-row {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}

.lgk-hscroll > *,
.lgk-collection-toolbar__chip {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* —— Modals / drawers safe area —— */
.lgk-cart-drawer,
.lgk-navi-slide,
.lgk-acc-sidebar.is-open {
  padding-bottom: env(safe-area-inset-bottom);
  max-height: 100dvh;
}

/* —— Account: 100dvh —— */
.lgk-acc-shell {
  min-height: 100dvh;
}

@media (max-width: 899px) {
  .lgk-acc-shell {
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
  }
}

/* —— Collections page hero —— */
@media (max-width: 699px) {
  .lgk-collections-page__hero {
    padding: 1rem 0.9rem 1.1rem;
  }

  .lgk-collections-page__title {
    font-size: clamp(1.45rem, 7vw, 1.9rem);
  }

  .lgk-collections-page__search {
    grid-template-columns: 1fr;
    border-radius: 1rem;
  }

  .lgk-collections-page__search button {
    width: 100%;
  }

  /* Accueil hub : 4 cols compactes (évite tuiles trop larges en 2 cols) */
  .lgk-mesh-bubble-track--hub-grid,
  .shopify-section--lgk-home-collections-hub .lgk-mesh-bubble-track--hub-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .lgk-collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-list--carousel {
    --product-list-card-width: min(11.5rem, 46%);
  }
}

@media (max-width: 359px) {
  .lgk-mesh-bubble-track--hub-grid,
  .shopify-section--lgk-home-collections-hub .lgk-mesh-bubble-track--hub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* —— Announcement / promo bars compact —— */
@media (max-width: 699px) {
  .lgk-marquee,
  .announcement-bar,
  .lgk-promo-bar {
    font-size: 0.75rem;
    line-height: 1.35;
  }
}