/* =========================================================
   Sulwhasoo · Product List
   pages/product.html 전용 스타일
   ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #f5ecd7;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #2c2d32;
}

img { display: block; max-width: none; }

/* .page is a fixed 1920px canvas. On narrower viewports (360/768/1280),
   product.js scales it down via transform so nothing overflows horizontally.
   .stage uses overflow-x: clip (not hidden) so it doesn't become a scroll
   container — overflow-x: hidden would force overflow-y: auto and break any
   position: sticky descendants. */
.stage {
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}
.page {
  width: 1920px;
  overflow: hidden;
  transform-origin: top left;
}

/* =========================================================
   INTRO / CATEGORY NAV
   ========================================================= */
.product_nav {
  padding: 13.47vh 0 0;
}

.product_nav_inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 1131px;
  margin: 0 auto;
}

.product_title {
  padding: 10px 0;
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: #2c2d32;
}

.product_tabs_wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.product_tabs {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  border: none;
  background: none;
}

.product_tab,
.product_tab_sub {
  padding: 10px 0 6px;
  margin-bottom: 4px;
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.product_tab {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.8;
  color: #2c2d32;
  border-bottom-color: #e86e25;
}

.product_tab_sub {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: #5a5a5a;
  transition: color .2s ease;
}

.product_tab_sub:hover {
  color: #2c2d32;
}

.product_tab_sub[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- sub-category row (shown under an active tab, e.g. By product Line) ----
   Figma node 4333:3293: under_list sits flush with the tab row above it
   (no left indent), items spaced 20px apart. */
.product_subtabs {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 0;
}

.product_subtabs[hidden] {
  display: none;
}

.product_subtab {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.8;
  color: #5a5a5a;
  transition: color .2s ease;
}

.product_subtab:hover {
  color: #2c2d32;
}

.product_subtab[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.product_subtab.is_active {
  font-weight: 400;
  color: #2c2d32;
}

/* =========================================================
   BEST SELLER GRID
   Base layout matches Figma node 4333:4048: 7 cards, 321.32px each,
   0 gap (edge-to-edge). product.js clones the row and animates it
   leftward without end (same continuous-marquee technique as
   .reviews_track / .reviews_track_inner in detail.css) — that
   auto-scroll is what produces the cropped first/last card look,
   not a static bleed offset. Hover state reuses the Product Line
   treatment exactly — orbit rings (.product_line_ring) + name/View
   More swap (.product_line_txt_wrap etc., see the shared hover-state
   rules below) — only the photo box itself is card-specific, since
   each shot's aspect ratio differs. Only product_card_6 (First Care
   Activating Serum VI) links anywhere yet — every other button is
   disabled.
   ========================================================= */
.product_grid_section {
  padding: 20px 0 220px;
}

/* Clipping window for the auto-scrolling row below (overflow:hidden,
   no transform) — mirrors .reviews_track / .reviews_track_inner in
   detail.css: the track clips, the inner row is what actually
   animates, so translateX never drags the clip boundary along with it. */
.product_grid_track {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

/* While a mouse-drag is in progress (product.js toggles this): swap the
   cursor and block text/image selection so the drag doesn't fight a
   text-selection gesture mid-swipe. */
.product_grid_track.is_dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.product_grid {
  display: flex;
  align-items: flex-end;
  width: max-content;
  will-change: transform;
}

.product_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 321.32px;
  flex-shrink: 0;
}

.product_card > * {
  flex-shrink: 0;
}

.product_card_img {
  position: relative;
  width: 321.32px;
  height: 313.72px;
  flex-shrink: 0;
}

/* standard product shot: bottom-anchored, horizontally centered,
   200px tall — width follows automatically to match each asset's
   native aspect ratio (matches every card except the ginseng cream
   jar). Grows on hover — same ~1.25x scale-up as Product Line's
   shots (see the shared hover-state rules below). */
.product_card_photo {
  position: absolute;
  left: 50%;
  bottom: 17.72px;
  height: 200px;
  transform: translateX(-50%);
  transition: height .25s ease;
}

.product_card_photo img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
}

/* ginseng cream jar: wider landscape shot, bottom-anchored at the
   same ~17.8px gap as every other card's photo (Figma: x 90.91px,
   y 195.91px, 141x100px within the 321.32x313.72 frame — 313.72 -
   (195.91 + 100) = 17.81px off the bottom) so the text row below
   sits the same distance away, on hover or not. */
.product_card_photo_cream {
  left: 90.91px;
  bottom: 17.81px;
  top: auto;
  width: 141px;
  height: 100px;
  transform: none;
  transition: width .25s ease, height .25s ease, left .25s ease;
}

.product_card_photo_cream img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.product_card:hover .product_card_photo,
.product_card:focus-within .product_card_photo {
  height: 250px;
}

/* the cream jar grows from its own bottom-anchored box, scaled
   ~1.55x, staying flush with the same bottom gap as the default
   state (see above) so the grow never eats into the text row's
   spacing. Compound selector so it wins over the generic
   .product_card_photo grow above regardless of source order. */
.product_card:hover .product_card_photo.product_card_photo_cream,
.product_card:focus-within .product_card_photo.product_card_photo_cream {
  left: 52px;
  width: 219px;
  height: 155px;
}

/* First Care Activating Serum VI on the Best Seller grid reuses the
   Product Line tab's own crop-swap markup/CSS (.product_line_photo_main_default
   / _hover, gated by .product_line_item_main) instead of a dedicated
   class here, so the hover behavior is pixel-identical between the
   two tabs. See PRODUCT LINE GRID section below for those rules. */

/* =========================================================
   PRODUCT LINE GRID (Product Line tab · First Care Activating)
   Matches Figma node 4333:3542 · row 4333:3572: 5 items, each a
   321.32x313.72 image frame + 110px text frame (313.72+10+110 =
   433.72, identical total height on every item — confirmed via
   Figma metadata, so the row needs no extra vertical alignment
   rules beyond flex defaults). Per-item photo widths come from the
   same metadata (each image is bottom-aligned 17.72px, height
   200px, horizontally centered — only the width varies per asset).
   ========================================================= */
.product_line_section {
  padding: 20px 0 220px;
}

.product_line_row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.product_line_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 321.32px;
  flex-shrink: 0;
}

.product_line_item_img {
  position: relative;
  width: 321.32px;
  height: 313.72px;
  flex-shrink: 0;
}

/* text: default name <-> hover title + View More, stacked in the
   same 321.32x110 slot (absolutely positioned inside) so nothing
   shifts when the hover state swaps in. */
.product_line_txt_wrap {
  position: relative;
  width: 321.32px;
  height: 110px;
}

.product_line_txt_default {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product_line_name {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: #5a5a5a;
  text-align: center;
}

/* the line's representative product (Serum VI) keeps its default
   name in black instead of gray, even before hover. */
.product_line_name_main {
  color: #2c2d32;
}

/* standard product shot: bottom-aligned, horizontally centered,
   200px tall — width is set per item below to match each asset's
   native aspect ratio exactly (no cropping/distortion needed).
   Grows on hover (see per-item hover widths below). */
.product_line_photo {
  position: absolute;
  left: 50%;
  bottom: 17.72px;
  height: 200px;
  transform: translateX(-50%);
  transition: width .25s ease, height .25s ease;
}

.product_line_photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

.product_line_photo_mask { width: 140.785px; }
.product_line_photo_mist { width: 75px; }
.product_line_photo_eye { width: 42.469px; }
.product_line_photo_eye_refill { width: 47.687px; }

/* ---- shared hover state (all 5 line items) ----
   Default: a plain product shot + name, like a Best Seller card.
   Hovering (or focusing the View More button) reveals the orbit
   rings, grows the product shot ~25% (matching Serum VI's own
   default->hover scale), and swaps the name for a semibold title +
   View More button — matches Figma node 4333:3542 (hover) layered on
   top of 4333:3674 (default), now applied to every item. */
.product_line_ring {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.product_line_item:hover .product_line_ring,
.product_line_item:focus-within .product_line_ring,
.product_concern_item:hover .product_line_ring,
.product_concern_item:focus-within .product_line_ring,
.product_type_item:hover .product_line_ring,
.product_type_item:focus-within .product_line_ring,
.product_card:hover .product_line_ring,
.product_card:focus-within .product_line_ring {
  opacity: 1;
}

.product_line_ring img {
  display: block;
  max-width: none;
}

.product_line_ring_1 {
  left: 8.55px;
  top: 53px;
  width: 304.443px;
  height: 208.099px;
}

.product_line_ring_1 img {
  width: 296.656px;
  height: 127.491px;
  transform: rotate(18.74deg) skewX(3.66deg);
}

.product_line_ring_2 {
  left: 50%;
  top: 50%;
  width: 321.318px;
  height: 313.722px;
  transform: translate(-50%, -50%);
}

.product_line_ring_2 img {
  width: 331.084px;
  height: 135.197px;
  transform: rotate(-41.68deg) skewX(-2.69deg);
}

/* hover-grow: each item's shot scales ~1.25x (200->250 tall, same
   ratio Serum VI's own default->hover crop uses) while staying
   bottom-anchored at 17.72px, so it grows upward in place. */
.product_line_item:hover .product_line_photo_mask,
.product_line_item:focus-within .product_line_photo_mask {
  width: 175.981px;
  height: 250px;
}

.product_line_item:hover .product_line_photo_mist,
.product_line_item:focus-within .product_line_photo_mist {
  width: 93.75px;
  height: 250px;
}

.product_line_item:hover .product_line_photo_eye,
.product_line_item:focus-within .product_line_photo_eye {
  width: 53.086px;
  height: 250px;
}

.product_line_item:hover .product_line_photo_eye_refill,
.product_line_item:focus-within .product_line_photo_eye_refill {
  width: 59.609px;
  height: 250px;
}

/* Serum VI's shot uses a crop-swap instead of a simple resize (its
   source photo needs a tighter crop at the larger size — see the
   asset note above) but reaches the same ~92x250 hover box. */
.product_line_photo_main_default {
  width: 73.814px;
  overflow: hidden;
  opacity: 1;
  transition: opacity .25s ease;
}

.product_line_photo_main_default img {
  position: absolute;
  left: -15.93px;
  top: -46.04px;
  width: 104.07px;
  height: 297.36px;
  max-width: none;
  object-fit: fill;
}

.product_line_photo_main_hover {
  left: calc(50% + 0.34px);
  bottom: auto;
  top: 46px;
  width: 92px;
  height: 250px;
  overflow: hidden;
  opacity: 0;
  transition: opacity .25s ease;
}

.product_line_photo_main_hover img {
  position: absolute;
  left: -19.85px;
  top: -57.55px;
  width: 129.69px;
  height: 371.7px;
  max-width: none;
  object-fit: fill;
}

.product_line_item_main:hover .product_line_photo_main_default,
.product_line_item_main:focus-within .product_line_photo_main_default {
  opacity: 0;
}

.product_line_item_main:hover .product_line_photo_main_hover,
.product_line_item_main:focus-within .product_line_photo_main_hover {
  opacity: 1;
}

/* hover title + button, overlaid on the same slot as the default
   name (see .product_line_txt_wrap above). */
.product_line_hover_tit {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.product_line_item:hover .product_line_txt_default,
.product_line_item:focus-within .product_line_txt_default,
.product_concern_item:hover .product_line_txt_default,
.product_concern_item:focus-within .product_line_txt_default,
.product_type_item:hover .product_line_txt_default,
.product_type_item:focus-within .product_line_txt_default,
.product_card:hover .product_line_txt_default,
.product_card:focus-within .product_line_txt_default {
  display: none;
}

.product_line_item:hover .product_line_hover_tit,
.product_line_item:focus-within .product_line_hover_tit,
.product_concern_item:hover .product_line_hover_tit,
.product_concern_item:focus-within .product_line_hover_tit,
.product_type_item:hover .product_line_hover_tit,
.product_type_item:focus-within .product_line_hover_tit,
.product_card:hover .product_line_hover_tit,
.product_card:focus-within .product_line_hover_tit {
  display: flex;
}

.product_line_hover_name {
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: #2c2d32;
  text-align: center;
}

.product_line_more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 45px;
  border: none;
  border-radius: 60px;
  background: #000;
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .2s ease;
}

.product_line_more:hover { opacity: .82; }

.product_line_panel {
  display: none;
}

.product_line_panel.is_active {
  display: block;
}

/* =========================================================
   PRODUCT TYPE GRID (Product Type tab · Cleansing)
   Matches Figma node 4333:4426 (product_type): 5 items, each a
   321.32x313.72 image frame + text below. Hover state reuses the
   Product Line treatment exactly — orbit rings (.product_line_ring)
   + name/View More swap (.product_line_txt_wrap etc., see the
   shared hover-state rules above) — only the photo box itself is
   type-specific, since each shot's aspect ratio differs. Each photo
   is bottom-anchored at a fixed height and left at width:auto so it
   keeps its own aspect ratio without distortion; only the Facial
   Soap set uses a wider/shorter box (and a black instead of gray
   name, per the design) since it's a flat carton, not a bottle.
   ========================================================= */
.product_type_section {
  padding: 20px 0 220px;
}

.product_type_row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.product_type_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 321.32px;
  flex-shrink: 0;
}

.product_type_item_img {
  position: relative;
  width: 321.32px;
  height: 313.72px;
  flex-shrink: 0;
}

.product_type_photo {
  position: absolute;
  left: 50%;
  bottom: 17.72px;
  height: 200px;
  transform: translateX(-50%);
  transition: height .25s ease;
}

.product_type_photo img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
}

/* Signature Ginseng Facial Soap: flat carton, shorter box (Figma:
   bottom 15.31px, height 96px) — width follows automatically. */
.product_type_photo_soap {
  bottom: 15.31px;
  height: 96px;
}

/* hover-grow: same ~1.25x scale-up as Product Line's shots
   (200->250 / 96->120); width follows automatically since the img
   is height:100%/width:auto and keeps its native ratio. */
.product_type_item:hover .product_type_photo,
.product_type_item:focus-within .product_type_photo {
  height: 250px;
}

.product_type_item:hover .product_type_photo_soap,
.product_type_item:focus-within .product_type_photo_soap {
  height: 120px;
}

.product_type_name_dark {
  color: #2c2d32;
}

.product_type_panel {
  display: none;
}

.product_type_panel.is_active {
  display: block;
}

/* =========================================================
   SKIN CONCERN GRID (Skin Concern tab · Luxury Anti-aging)
   Matches Figma node 4333:4178: 3 items, each a 321.32x313.72
   image frame + centered two-line name below (10px gap, same
   as a Best Seller card). Hover state reuses the Product Line
   treatment exactly — orbit rings (.product_line_ring) + name/
   View More swap (.product_line_txt_wrap etc., see the shared
   hover-state rules above) — only the photo box itself is
   concern-specific, since each shot's aspect ratio differs.
   Each photo is bottom-anchored at a fixed height and left at
   width:auto so it keeps its own aspect ratio without distortion.
   ========================================================= */
.product_concern_section {
  padding: 20px 0 220px;
}

.product_concern_row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.product_concern_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 321.32px;
  flex-shrink: 0;
}

.product_concern_item_img {
  position: relative;
  width: 321.32px;
  height: 313.72px;
  flex-shrink: 0;
}

.product_concern_photo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: height .25s ease;
}

.product_concern_photo img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
}

/* Ultimate S set + Honorstige Serum: tall bottle shots, same
   200px-tall / 17.72px-off-bottom slot as a standard product
   card photo. */
.product_concern_photo_ultimate_s,
.product_concern_photo_honorstige_serum {
  bottom: 17.72px;
  height: 200px;
}

/* Honorstige Cream: squat jar, shorter slot (matches Figma:
   bottom 17.31px, height 100px). */
.product_concern_photo_honorstige_cream {
  bottom: 17.31px;
  height: 100px;
}

/* hover-grow: same ~1.25x scale-up as Product Line's shots
   (200->250 / 100->125); width follows automatically since the
   img is height:100%/width:auto and keeps its native ratio. */
.product_concern_item:hover .product_concern_photo_ultimate_s,
.product_concern_item:focus-within .product_concern_photo_ultimate_s,
.product_concern_item:hover .product_concern_photo_honorstige_serum,
.product_concern_item:focus-within .product_concern_photo_honorstige_serum {
  height: 250px;
}

.product_concern_item:hover .product_concern_photo_honorstige_cream,
.product_concern_item:focus-within .product_concern_photo_honorstige_cream {
  height: 125px;
}

.product_concern_panel {
  display: none;
}

.product_concern_panel.is_active {
  display: block;
}