/* Shop listing + product detail pages — extends ../styles.css (fonts, tokens, ticker, nav, footer, to-top, out-cuts/product-card) */

body.detail-page {
  background: var(--charcoal-2);
}

.shop-main {
  /* overrides the landing page's global `main { padding-top:239px; gap:... }`,
     which otherwise leaks into this page since it shares the same styles.css */
  display: block;
  padding-top: 0;
}

/* ---------- shop listing ---------- */
.shop-banner {
  /* matches the landing page hero's `.hero { height: clamp(420px, 45.3vw, 869px) }`
     exactly, instead of aspect-ratio (which has no max-height and grows past 869px
     on wide viewports) */
  width: 100%;
  height: clamp(420px, 45.3vw, 869px);
  background: #e11517;
  position: relative;
  overflow: hidden;
}
/* new banner photo (pasted 2026-08-21) is already a full-bleed 1920x869
   composition sized to match the container's own max dimensions, so it
   covers edge-to-edge instead of sitting in a smaller inset box like the
   old banner photo did */
.shop-banner__frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.shop-banner__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 90px 24px 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
}
.shop-intro h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
}
.shop-intro p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 22px);
}

.product-card--link {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.product-card--link:hover {
  transform: translateY(-4px);
}

/* ================= product detail ================= */
.product-detail {
  /* overrides the landing page's global `main { display:flex; align-items:center }`,
     which otherwise shrinks every child (incl. the gallery/info row) to fit-content
     and forces an unwanted wrap since these pages share the same styles.css */
  display: block;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 24px 0;
  color: #fff;
}

.product-detail__top {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  flex-wrap: wrap;
}

/* left: scrolls normally */
.product-detail__gallery {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.product-detail__mainimg {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}
.product-detail__mainimg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* prev/next carousel controls over the main image (Figma 170:3762) — a
   translucent white circle that darkens slightly on hover/press, matching
   the light chevron-in-a-circle treatment from the design */
.product-detail__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.product-detail__arrow:hover,
.product-detail__arrow:focus-visible { background: rgba(255, 255, 255, 0.55); }
.product-detail__arrow:active { background: rgba(255, 255, 255, 0.7); }
.product-detail__arrow--prev { left: 16px; }
.product-detail__arrow--next { right: 16px; }

.product-detail__thumbs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.product-detail__thumb {
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: none;
  opacity: 0.6;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.product-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-detail__thumb.is-active,
.product-detail__thumb:hover {
  opacity: 1;
  border-color: var(--yellow);
}

/* Figma's mobile detail page (181:3960) swaps the plain product photo +
   thumbnail gallery for the same red/blue decorative card treatment used by
   the shop-listing and landing pork-card components (colored box + panned
   photo + 4 sparkle stickers) — hidden on desktop, shown only under 480px */
.product-detail__mobile-photo { display: none; }

/* right: sticky buy box */
.product-detail__info {
  flex: 1 1 380px;
  min-width: 280px;
  max-width: 460px;
}
.product-detail__info h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  text-transform: uppercase;
}
/* the "g" unit in "500g" should stay lowercase even though the rest of the
   heading is uppercased — text-transform:lowercase on the child wins over
   the parent's uppercase for just that character */
.product-detail__info h1 .unit { text-transform: lowercase; }
.product-detail__price {
  margin-top: 10px;
  font-family: 'Paperlogy';
  font-weight: 600;
  font-size: 28px;
  color: var(--yellow);
}
.product-detail__desc {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: #cfcac1;
}
.product-detail__meta {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.product-detail__meta > div {
  display: flex;
  gap: 20px;
  font-size: 14px;
  line-height: 1.6;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.product-detail__meta dt {
  flex: 0 0 64px;
  font-weight: 600;
  color: #fff;
}
.product-detail__meta dd {
  color: #b8b2a8;
}
/* desktop has no "수량" label — mobile's compact stepper needs one since the
   pill alone reads ambiguously at that size (Figma node 181:4293) */
.product-detail__qty-row { margin-top: 24px; display: flex; align-items: center; gap: 20px; }
.product-detail__qty-label { display: none; }
.product-detail__qty {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 6px 10px;
}
.product-detail__qty button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.product-detail__qty button:hover { background: rgba(255, 255, 255, 0.22); }
.product-detail__qty span {
  min-width: 24px;
  text-align: center;
  font-family: 'Paperlogy';
  font-weight: 500;
}
.product-detail__actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.product-detail__actions button {
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--font-script);
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}
.btn-cart {
  background: transparent;
  border: 1.5px solid var(--yellow) !important;
  color: var(--yellow);
}
.btn-cart:hover { background: rgba(255, 184, 41, 0.12); }
.btn-buy {
  background: var(--yellow);
  color: #2b2926;
}
.btn-buy:hover { background: #ffc659; }
.product-detail__note {
  margin-top: 14px;
  font-size: 13px;
  color: #a9a49a;
  min-height: 18px;
}

/* ---------- sticky tab bar ---------- */
.product-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  background: var(--charcoal-2);
  max-width: 860px;
  margin: 90px auto 0;
}
.product-tabs__link {
  flex: 1;
  text-align: center;
  padding: 22px 16px;
  font-family: 'Paperlogy';
  font-weight: 500;
  font-size: 16px;
  color: #8d8880;
  background: transparent;
  transition: color 0.15s ease, background 0.15s ease;
}
.product-tabs__link.is-active {
  color: #fff;
  background: #3d3d3d;
}
.product-tabs__link:hover {
  color: #fff;
}

.product-tab-panel {
  scroll-margin-top: 64px;
  padding: 90px clamp(20px, 6vw, 90px);
}
.product-tab-panel > * + * { margin-top: 90px; }

/* ---- 상세정보 ---- */
.product-info {
  background: var(--charcoal-2);
}
.info-block {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 1.7;
}
.info-block__eyebrow {
  font-size: 15px;
  color: #a9a49a;
  margin-bottom: 6px;
}
.info-block h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 34px);
  color: #fff;
}
.info-block h2 .accent { color: var(--yellow); }
.info-block p { color: #cfcac1; font-size: 16px; }

/* placeholder shown until reviews/Q&A become a real submitted list */
.empty-state {
  text-align: center;
  color: #8d8880;
  font-size: 13px;
  font-weight: 400;
}

.product-info__sheet {
  display: block;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

/* ---- 리뷰 ---- */
.product-reviews { background: var(--charcoal-2); }
.review-bubbles {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.review-bubble {
  border-radius: 22px;
  padding: 22px 28px;
  color: #1a1a1a;
  font-family: 'Paperlogy';
}
.review-bubble__stars { color: #ffcc00; letter-spacing: 2px; }
.review-bubble p { margin-top: 8px; font-size: 15px; font-weight: 500; }
.review-bubble--pink { background: #ef5fd0; color: #fff; }
.review-bubble--green { background: #26d18a; color: #06331f; }
.review-bubble--blue { background: #2f9be0; color: #fff; }

/* ---- Q&A ---- */
.qna-item { max-width: 720px; margin: 0 auto 40px; position: relative; }
.qna-item:last-child { margin-bottom: 0; }
.qna-item__q {
  display: inline-block;
  background: #5fc3ef;
  color: #0a2b3a;
  font-family: 'Paperlogy';
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 15px;
}
.qna-item__a {
  margin-top: 14px;
  background: #7fb8ef;
  color: #0a2b3a;
  border-radius: 4px;
  padding: 22px 26px;
  font-size: 14px;
  line-height: 1.8;
}
.qna-item__a strong { color: #d81b60; }
.qna-item__a .tip {
  display: block;
  margin-top: 10px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .product-detail__top { flex-direction: column; }
  .product-detail__info { max-width: none; width: 100%; }
  .product-tabs { margin-top: 40px; }
  .product-tab-panel { padding: 60px 20px; }
  .product-tab-panel > * + * { margin-top: 60px; }
}

@media (max-width: 700px) {
  .shop-content { padding: 60px 16px 90px; gap: 48px; }
}

/* ---------- mobile shop listing (Figma node 181:3129, 390px reference frame) ---------- */
@media (max-width: 480px) {
  .shop-banner { height: 500px; }
  /* full-bleed banner photo covers via object-fit on its own — no custom
     pan needed like the old inset photo required */

  .shop-content { padding: 40px 20px 90px; gap: 22px; }
  .shop-intro { gap: 4px; }
  .shop-intro h1 { font-size: 16px; }
  .shop-intro p { font-size: 12px; max-width: 232px; }
}

/* ---------- mobile product detail (Figma node 181:3960, 390px reference frame) ---------- */
@media (max-width: 480px) {
  .product-detail { padding: 24px 20px 0; }
  .product-detail__top { flex-direction: column; gap: 0; }
  /* both children keep their desktop `flex: 1 1 520px` / `flex: 1 1 380px`
     basis here, which reserves that much height regardless of actual content
     — with the gallery's real content now just the 326px photo box, that
     left a ~200px dead gap before the title. Pin both to content height. */
  .product-detail__gallery,
  .product-detail__info { flex: none; }
  /* .top still inherits the desktop `align-items: flex-start`, so without an
     explicit width .gallery was shrink-wrapping to its 298px photo instead of
     stretching to the same 335px column .info sizes against — that's what
     let the two end up centered at different offsets (photo flush against
     the page padding, text column properly centered 18.5px further in) */
  .product-detail__gallery { gap: 0; width: 100%; max-width: 298px; margin: 0 auto; }
  .product-detail__mainimg,
  .product-detail__thumbs { display: none; }
  .product-detail__mobile-photo {
    display: block;
    position: relative;
    width: 100%;
    height: 326px;
    border-radius: 16px;
    overflow: hidden;
  }
  .product-detail__mobile-photo--red { background: #ee1717; }
  .product-detail__mobile-photo--blue { background: #335bb9; }
  /* auto-advancing slideshow, same image list + timer/reset logic as the
     desktop arrows (see shop.js) — mobile just swaps visible round buttons
     for two invisible tap zones covering each half of the photo */
  .product-detail__mobile-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .product-detail__mobile-photo img.is-active { opacity: 1; }
  .product-detail__mobile-tap {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
  }
  .product-detail__mobile-tap--prev { left: 0; }
  .product-detail__mobile-tap--next { right: 0; }

  /* text/CTA column is narrower than the page's own padding (298px, centered),
     matching the photo box above it — not full content width, otherwise the
     CTA buttons (flex:1 1 0, meant to split 298px into 144px each) render
     wider than Figma's spec */
  .product-detail__info { max-width: 298px; width: 100%; margin: 0 auto; }
  .product-detail__info h1 { font-size: 16px; margin-top: 22px; }
  .product-detail__price { font-size: 16px; margin-top: 2px; }
  .product-detail__desc { font-size: 12px; line-height: 1.64; margin-top: 14px; color: #fff; }

  .product-detail__meta { margin-top: 33px; gap: 11px; }
  .product-detail__meta > div { font-size: 12px; gap: 12px; padding-bottom: 0; border-bottom: none; }
  .product-detail__meta dt { flex: 0 0 45px; font-size: 12px; font-weight: 500; }

  .product-detail__qty-row { margin-top: 33px; }
  .product-detail__qty-label { display: block; font-size: 12px; }
  .product-detail__qty { margin-top: 0; background: #464545; padding: 4px 6px; gap: 10px; }
  /* Figma's literal 16x16 buttons were too small to tap reliably on a real
     phone — sized up to the same 32px the desktop stepper already uses
     (a proven comfortable touch target) instead of the spec's exact px */
  .product-detail__qty button { width: 32px; height: 32px; background: #605f5f; font-size: 18px; }
  .product-detail__qty span { font-size: 13px; min-width: 20px; }

  /* re-measured against the Figma frame's absolute coordinates (actions sits
     at y:866 vs the qty row's rendered bottom edge) — the previous 20px was
     an unmeasured guess and much tighter than the real spec gap of ~97px */
  .product-detail__actions { margin-top: 96px; gap: 10px; flex-wrap: nowrap; }
  .product-detail__actions button { flex: 1 1 0; height: auto; padding: 10px 12px; font-size: 13px; }
  .btn-cart { background: #615435; border: none !important; color: var(--yellow); }
  .btn-buy { background: #fdbd22; color: #333; }
  .product-detail__note { display: none; }

  /* desktop pins this bar (position:sticky) while scrolling reviews/QnA, but
     at mobile that left it stuck flush against the viewport top with the
     detail image flowing directly beneath it — no gap, no separation, just
     glued together. A persistently-visible 3-tab bar isn't worth that on a
     single product page at this width, so let it scroll away normally. */
  /* Figma's mobile detail frame runs the tab row and the info-sheet image
     edge to edge (w-390, left:0) — no side inset. Both sit as direct children
     of .product-detail, which carries its own 20px page padding, so cancel
     that with a negative margin rather than changing the shared padding
     (.product-reviews/.product-qna still want their own inset for text). */
  .product-tabs { position: static; margin: 24px -20px 0; max-width: none; }
  .product-tabs__link { padding: 10px 8px; font-size: 12px; }
  .product-tab-panel { padding: 40px 20px; scroll-margin-top: 40px; }
  .product-tab-panel > * + * { margin-top: 40px; }
  .product-tab-panel.product-info { padding-left: 0; padding-right: 0; margin-left: -20px; margin-right: -20px; }
  .info-block h2 { font-size: 20px; }
  .info-block p { font-size: 13px; }
}