/* PAMLUME storefront wide canvas.
   This layer is intentionally scoped to the storefront body so administration
   screens keep their existing density and grid dimensions. */
body.storefront-body {
  --content-width: 1760px;
  --storefront-gutter: 48px;
  --storefront-page-gap: 34px;
  background: #f5f7fb;
}

body.storefront-body .container {
  width: 100%;
  max-width: var(--content-width);
  padding-left: var(--storefront-gutter);
  padding-right: var(--storefront-gutter);
}

body.storefront-body main.container {
  padding-top: var(--storefront-page-gap);
  padding-bottom: 72px;
}

body.storefront-body .header .container,
body.storefront-body .footer .container,
body.storefront-body .categorydrawer .container {
  max-width: var(--content-width);
}

body.storefront-body .header {
  margin-bottom: 22px;
}

body.storefront-body .header-main.navbar {
  gap: 56px;
}

body.storefront-body .search {
  max-width: 840px;
}

body.storefront-body .all-category-panel,
body.storefront-body .category-menu {
  left: var(--storefront-gutter);
  right: var(--storefront-gutter);
}

/* English category names need their natural width. Wrap the navigation itself
   so long labels cannot spill into the next item, while its dropdown remains
   outside the navigation's layout and can extend below every wrapped row. */
@media (min-width: 701px) {
  body.storefront-body[data-locale="en"] .root-category-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0 4px;
    overflow: visible;
  }

  body.storefront-body[data-locale="en"] .nav-category {
    flex: 0 0 auto;
    min-width: max-content;
    position: static;
  }

  body.storefront-body[data-locale="en"] .nav-category > summary {
    min-height: 42px;
    padding: 10px 12px;
    justify-content: flex-start;
    font-size: 12px;
  }

  body.storefront-body[data-locale="en"] .nav-category > summary svg {
    flex: 0 0 12px;
  }
}

body.storefront-body .home-banner-grid {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  margin-bottom: 58px;
}

body.storefront-body .hero {
  min-height: 390px;
}

body.storefront-body .home-product-grid,
body.storefront-body .product-grid {
  gap: 34px 26px;
}

body.storefront-body .product-grid .product-card,
body.storefront-body .home-product-grid .product-card {
  min-width: 0;
}

body.storefront-body .catalog-layout {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 42px;
}

body.storefront-body .catalog-layout .product-grid {
  gap: 36px 26px;
}

body.storefront-body main.container:has(>.product-page) {
  max-width: 1680px;
  padding-top: 30px;
}

body.storefront-body .product-page .product-detail {
  grid-template-columns: minmax(0, 720px) minmax(0, 1fr);
  gap: clamp(52px, 5vw, 86px);
  padding: 40px;
}

body.storefront-body .product-page .gallery {
  width: 100%;
  max-width: 720px;
}

body.storefront-body .product-page .gallery-stage {
  max-width: 720px;
  margin: 0 auto;
}

body.storefront-body .profile-page,
body.storefront-body .orders-page,
body.storefront-body .order-detail-page,
body.storefront-body .address-page,
body.storefront-body .nego-page {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

body.storefront-body .profile-page {
  gap: 34px;
}

body.storefront-body .orders-page,
body.storefront-body .order-detail-page {
  max-width: 1520px;
}

body.storefront-body .checkout-page {
  max-width: 1440px;
  padding-left: 0;
  padding-right: 0;
}

body.storefront-body .guides-grid,
body.storefront-body .guide-library-grid {
  gap: 38px 30px;
}

body.storefront-body .guide-library,
body.storefront-body .guide-more {
  max-width: 1520px;
  margin-left: auto;
  margin-right: auto;
}

body.storefront-body .guide-article,
body.storefront-body .product-guide-article {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

body.storefront-body .guide-body,
body.storefront-body .product-guide-reading-body {
  max-width: 780px;
}

body.storefront-body .policy,
body.storefront-body .faq-page {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

body.storefront-body .footer-grid {
  grid-template-columns: 1.5fr 1fr .8fr;
  gap: 84px;
}

/* Kakao's official action color must remain distinct from the storefront
   primary blue so the provider identity and text contrast stay clear. */
body.storefront-body .kakao-login,
body.storefront-body .kakao-login:visited {
  background: #fee500;
  border-color: #e4cf00;
  color: #191919 !important;
  box-shadow: none;
}

body.storefront-body .kakao-login:hover,
body.storefront-body .kakao-login:active {
  background: #f5d900;
  border-color: #d9bf00;
  color: #191919 !important;
}

body.storefront-body .kakao-login:focus-visible {
  outline: 3px solid #8b7800;
  outline-offset: 3px;
}

body.storefront-body .kakao-login svg {
  color: #191919;
}

/* Keep Naver's provider action green after the shared button theme loads. */
body.storefront-body .naver-login,
body.storefront-body .naver-login:visited {
  background: #03c75a;
  border-color: #03c75a;
  color: #ffffff !important;
  box-shadow: none;
}

body.storefront-body .naver-login:hover,
body.storefront-body .naver-login:active {
  background: #02b350;
  border-color: #02b350;
  color: #ffffff !important;
}

body.storefront-body .naver-login:focus-visible {
  outline: 3px solid #007a38;
  outline-offset: 3px;
}

@media (min-width: 1500px) {
  body.storefront-body .home-product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.storefront-body .catalog-layout .product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 701px) and (max-width: 1499px) {
  body.storefront-body {
    --storefront-gutter: 36px;
  }

  body.storefront-body .product-page .product-detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
}

@media (max-width: 991px) {
  body.storefront-body {
    --storefront-gutter: 24px;
  }

  body.storefront-body .home-banner-grid {
    grid-template-columns: 1fr;
  }

  body.storefront-body .catalog-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 26px;
  }

  body.storefront-body .product-page .product-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 28px;
  }

  body.storefront-body .product-page .gallery {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 700px) {
  body.storefront-body {
    --storefront-gutter: 14px;
    --storefront-page-gap: 20px;
  }

  body.storefront-body .container,
  body.storefront-body .header .container,
  body.storefront-body .footer .container,
  body.storefront-body .categorydrawer .container {
    max-width: 100%;
    padding-left: var(--storefront-gutter);
    padding-right: var(--storefront-gutter);
  }

  body.storefront-body main.container {
    padding-bottom: 48px;
  }

  body.storefront-body .header {
    margin-bottom: 12px;
  }

  body.storefront-body .header-main.navbar {
    gap: 14px;
  }

  body.storefront-body .search {
    max-width: none;
  }

  body.storefront-body .all-category-panel,
  body.storefront-body .category-menu {
    left: 14px;
    right: 14px;
  }

  body.storefront-body .home-banner-grid {
    gap: 18px;
    margin-bottom: 38px;
  }

  body.storefront-body .hero {
    min-height: 300px;
  }

  body.storefront-body .home-product-grid,
  body.storefront-body .product-grid,
  body.storefront-body .catalog-layout .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
  }

  body.storefront-body .catalog-layout {
    display: block;
  }

  body.storefront-body .catalog-sidebar {
    display: none;
  }

  body.storefront-body .profile-page,
  body.storefront-body .orders-page,
  body.storefront-body .order-detail-page,
  body.storefront-body .address-page,
  body.storefront-body .nego-page,
  body.storefront-body .checkout-page {
    max-width: 100%;
  }

  body.storefront-body .product-page .product-detail {
    padding: 0;
    gap: 0;
  }

  body.storefront-body .product-page .gallery {
    max-width: none;
  }

  body.storefront-body .guide-library,
  body.storefront-body .guide-more,
  body.storefront-body .guide-article,
  body.storefront-body .product-guide-article {
    max-width: 100%;
  }

  body.storefront-body .guide-body,
  body.storefront-body .product-guide-reading-body {
    max-width: none;
  }

  body.storefront-body .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.storefront-body * {
    scroll-behavior: auto !important;
  }
}