.catalog_page { background: var(--y-color-surface-default); color: var(--y-color-text-primary); }
.products_grid > a.products_card { color: inherit; text-decoration: none; }
.products_grid > a.products_card:hover .products_card_media img,
.products_grid > a.products_card:focus-visible .products_card_media img { transform: translateY(-6px); }
.products_grid > a.products_card .products_card_media img { transition: transform .35s ease; }
.catalog_page * { box-sizing: border-box; }
.catalog_main { width: 100%; overflow: clip; }
.catalog_main a { color: inherit; text-decoration: none; }

.catalog_body { margin: 0; word-break: keep-all; overflow-wrap: anywhere; }

.catalog_line_hero { position: relative; }
.catalog_line_hero_copy { position: relative; z-index: 1; }

.catalog_collection { padding: 124px var(--y-layout-page-gutter); }
.catalog_section_heading { margin-bottom: 56px; }
.catalog_section_title { margin: 0 0 var(--y-layout-heading-copy-gap); color: var(--y-color-text-accent); }
.catalog_product_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 48px); }
.catalog_product_card { display: flex; min-width: 0; flex-direction: column; }
.catalog_product_image { place-items: center; }
.catalog_product_image img { display: block; transition: transform .5s ease; }
.catalog_image_placeholder { display: block; width: 100%; height: 100%; background: var(--y-color-surface-soft); }
.catalog_detail_media .catalog_image_placeholder { max-width: 600px; max-height: 600px; }

.catalog_bottom_links { display: flex; gap: 20px; }
.catalog_coming { display: flex; min-height: 310px; padding: 44px; flex-direction: column; justify-content: center; gap: 14px; background: var(--y-color-surface-soft); }
.catalog_coming span { color: var(--y-color-text-accent); font: 500 clamp(28px, 3vw, 46px)/1.2 var(--y-font-serif); }
.catalog_coming p { margin: 0; font: 400 16px/1.5 var(--y-font-sans); }
.catalog_detail { padding: var(--gnb-height) 0 0; }
.catalog_detail_hero { display: grid; min-height: 760px; grid-template-columns: 1fr 1fr; }
.catalog_detail_media { display: grid; min-height: 680px; place-items: center; background: var(--y-color-surface-soft); }
.catalog_detail_media img { display: block; width: 60%; max-height: 600px; object-fit: contain; }
.catalog_detail_copy { display: flex; padding: 70px clamp(40px, 6vw, 124px); flex-direction: column; align-items: flex-start; justify-content: center; }
.catalog_detail_title { max-width: 650px; margin: 0; color: var(--y-color-text-accent); font: 500 clamp(42px, 4vw, 72px)/1.12 var(--y-font-serif); word-break: keep-all; overflow-wrap: anywhere; }
.catalog_detail_title { font-family: var(--y-font-sans); letter-spacing: -.04em; }
.catalog_name_en { margin: var(--y-space-4) 0 0; color: var(--y-color-text-secondary); font: 400 clamp(18px, 1.5vw, 24px)/1.45 var(--y-font-sans); }
.catalog_detail_rule { width: 100%; margin: 48px 0 32px; border-top: 1px solid var(--y-color-border-subtle); }
.catalog_pending { margin: 20px 0 38px; color: var(--y-color-text-secondary); font: 400 14px/1.5 var(--y-font-sans); }
.catalog_story { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; background: var(--y-color-surface-soft); }
.catalog_story_copy { display: flex; padding: 90px clamp(40px, 6vw, 124px); flex-direction: column; align-items: flex-start; justify-content: center; }
.catalog_story_copy .btn { margin-top: 42px; }
.catalog_story_media { min-height: 620px; overflow: hidden; }
.catalog_story_media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Figma-owned Jikimi / RX details. Shared type roles, colours and buttons;
   product geometry is scoped here and never changes catalogue cards. */
.product_detail_authored :is(h1,h2,h3,p,dl,dd) { margin: 0; }
/* Typography comes from the existing registered roles, including 150% body leading. */
.product_detail_hero { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; min-height: 820px; padding: var(--y-space-80) var(--y-layout-page-gutter); gap: var(--y-space-80); background: var(--y-color-surface-default); }
.product_detail_hero_media { display: grid; min-width: 0; height: 660px; place-items: center; overflow: hidden; }
.product_detail_hero_media img { display: block; width: min(100%,600px); aspect-ratio: 1; object-fit: contain; }
.product_detail_hero_copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--y-space-40); }
.product_detail_names { width: min(800px,100%); }
.product_detail_names :is(h1,p) { width: 100%; }
.product_detail_line_label { color: var(--y-color-text-accent); }
.product_detail_intro { width: min(800px,100%); color: var(--y-color-text-secondary); }
.product_detail_marks { display: flex; gap: var(--y-space-32); align-items: center; }
.product_detail_marks img { display: block; flex: none; object-fit: contain; }
.product_detail_ingredients { display: flex; flex-direction: column; align-items: center; padding: var(--y-layout-section-space) var(--y-layout-page-gutter); gap: var(--y-space-64); }
.product_detail_ingredients > h2 { width: min(1632px,100%); text-align: center; color: var(--y-color-text-accent); }
.product_detail_composition { position: relative; display: flex; width: min(1280px,100%); height: 680px; align-items: center; justify-content: space-between; }
.product_detail_explanations { display: flex; width: 33.75%; height: auto; flex: none; flex-direction: column; justify-content: flex-start; gap: 210px; padding-bottom: 100px; }
.product_detail_explanations_right { text-align: right; }
.product_detail_explanation { display: flex; flex-direction: column; gap: var(--y-space-24); padding-bottom: var(--y-space-32); }
/* Latest Figma KEY INGREDIENTS: compact heading/copy, with separate row spacing.
   Scope this to ingredients; ABOUT uses the same explanation markup. */
.product_detail_ingredients .product_detail_explanation { gap: var(--y-space-12); padding-bottom: 0; }
.product_detail_explanation h3 { color: var(--y-color-text-accent); }
.product_detail_explanation p { color: var(--y-color-text-primary); }
.product_detail_center_image { position: relative; flex: none; width: 21.875%; height: 680px; overflow: hidden; }
.product_detail_center_image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
:is(.product_detail_jikimi,.product_detail_sensitive,.product_detail_rx) .product_detail_center_image { width: 27.578125%; height: 600px; }
.product_detail_jikimi .product_detail_center_image > img { position: absolute; width: 169.97%; max-width: none; height: 100%; left: -35.08%; top: 3.51%; object-fit: fill; }
/* Same Jikimi composition; original square photos retain their proportions.
   Package scales come from the existing shared product_photo_ai rules. */
#yuriu-site .product_detail_sensitive img.product_detail_packshot { transform-origin: center; }
#yuriu-site .product_detail_sensitive .product_detail_explanation p { white-space: pre-line; }
:is(.product_detail_sensitive,.product_detail_rx) .product_detail_center_image > img { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: auto; max-width: none; height: 100%; aspect-ratio: 1; object-fit: contain; }
.product_detail_connector { position: absolute; width: 38.671875%; height: 50px; pointer-events: none; }
.product_detail_connector img { display: block; max-width: none; width: 100%; height: auto; }
.product_detail_connector_lt { top: 206px; left: 0; }
.product_detail_connector_lb { top: 465px; left: 0; transform: scaleY(-1); }
.product_detail_connector_rt { top: 206px; right: 0; transform: rotate(180deg) scaleY(-1); }
.product_detail_connector_rb { top: 465px; right: 0; transform: rotate(180deg); }
/* Shared KEY INGREDIENTS and ABOUT: existing Figma type/spacing tokens.
   Percentage positioning belongs only to the 848 × 680 diagram asset. */
.product_detail_about { display: flex; flex-direction: column; align-items: center; padding: var(--y-layout-section-space) var(--y-layout-page-gutter); gap: var(--y-space-64); }
.product_detail_about > h2 { width: 100%; text-align: center; color: var(--y-color-text-accent); }
.product_detail_about_composition { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: var(--y-space-80); width: 100%; }
.product_detail_about_copy { display: flex; flex-direction: column; justify-self: center; width: min(632px,100%); gap: var(--y-space-40); }
.product_detail_about_copy > h3 { color: var(--y-color-text-accent); white-space: pre-line; }
.product_detail_about_points { display: flex; flex-direction: column; gap: var(--y-space-24); }
.product_detail_about_points .product_detail_explanation { width: 100%; }
.product_detail_about_diagram { position: relative; width: 100%; max-width: 848px; aspect-ratio: 848 / 680; justify-self: center; margin: 0; }
.product_detail_about_radar { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--y-color-text-accent); pointer-events: none; }
.product_detail_about_radar_grid polygon { fill: none; stroke: currentColor; stroke-opacity: .22; stroke-width: 1; vector-effect: non-scaling-stroke; }
.product_detail_about_profile { fill: currentColor; fill-opacity: .14; stroke: currentColor; stroke-opacity: .65; stroke-width: 2; vector-effect: non-scaling-stroke; }
/* Figma detail / About: the existing swatch is now a 300px square at
   (281,192) in the 848x680 diagram, rotated clockwise. Scale the whole
   placement with its diagram so desktop and mobile keep the same anchor. */
.product_detail_about_texture { position: absolute; left: 33.136792%; top: 28.235294%; width: 35.377358%; height: 44.117647%; object-fit: contain; transform: rotate(90deg); transform-origin: center; }
#yuriu-site .product_detail_about_label, #yuriu-site .product_detail_about_ratio { position: absolute; width: 40%; translate: -50% 0; text-align: center; color: var(--y-color-text-accent); line-height: 1.3; }
#yuriu-site .product_detail_about_axis_0 { left: 50%; top: 4.411765%; width: 30.660377%; }
#yuriu-site .product_detail_about_axis_1 { left: 87.028302%; top: 32.352941%; width: 23.584906%; }
#yuriu-site .product_detail_about_axis_2 { left: 72.995283%; top: 81.176471%; width: 25.943396%; }
#yuriu-site .product_detail_about_axis_3 { left: 27.004717%; top: 81.176471%; width: 30.660377%; }
#yuriu-site .product_detail_about_axis_4 { left: 12.971698%; top: 32.352941%; width: 23.584906%; }
.product_detail_about_ratio { left: 50%; top: 89.411765%; }
#yuriu-site .product_detail_about_ratio { width: 35.377358%; }
#yuriu-site .product_detail_about_note { width: 100%; color: var(--y-color-text-secondary); text-align: center; }
#yuriu-site .product_detail_authored .product_detail_explanation p { white-space: pre-line; }
@media (max-width: 1100px) {
  .product_detail_about_composition { gap: var(--y-space-40); }
}
@media (max-width: 768px) {
  .product_detail_about { gap: var(--y-space-40); }
  .product_detail_about_composition { grid-template-columns: minmax(0,1fr); gap: var(--y-space-40); }
  .product_detail_about_copy { width: 100%; gap: var(--y-space-32); }
  .product_detail_about_points .product_detail_explanation { width: 100%; }
  .product_detail_about_diagram { max-width: 520px; }
  /* Keep the existing shared caption type readable in a narrow diagram. */
  #yuriu-site .product_detail_about_ratio { width: 80%; }
  /* Keep the square cream photo proportional in the narrower mobile mask. */
  .product_detail_jikimi .product_detail_center_image > img { left: 50%; top: 50%; translate: -50% -50%; width: auto; height: 100%; aspect-ratio: 1; object-fit: contain; }
}
.product_detail_formula { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-inline: var(--y-layout-page-gutter); min-height: 650px; }
.product_detail_formula_copy { display: flex; min-width: 0; padding: var(--y-space-64); flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--y-space-32); background: var(--y-color-surface-soft); }
.product_detail_formula_copy h2 { color: var(--y-color-text-accent); }
.product_detail_formula_copy > p { max-width: 630px; color: var(--y-color-text-secondary); }
.product_detail_formula_copy dl { display: flex; width: 100%; gap: var(--y-space-16); min-height: 70px; color: var(--y-color-text-accent); }
.product_detail_formula_copy dl > div { flex: 1; min-width: 0; }
.product_detail_formula_media { display: grid; place-items: center; min-width: 0; }
.product_detail_formula_media img { display: block; width: min(100%,500px); aspect-ratio: 1; object-fit: contain; }
.product_detail_information { display: grid; grid-template-columns: minmax(0,604fr) minmax(0,1108fr); gap: var(--y-space-64); padding: var(--y-layout-section-space) var(--y-layout-page-gutter); min-height: 500px; }
.product_detail_information h2 { color: var(--y-color-text-accent); }
.product_detail_information > div { display: flex; flex-direction: column; gap: var(--y-space-32); color: var(--y-color-text-secondary); }
.product_detail_line { display: grid; grid-template-columns: minmax(0,900fr) minmax(0,720fr); align-items: center; gap: var(--y-space-80); min-height: 630px; padding: var(--y-space-80) var(--y-layout-page-gutter); background: var(--y-color-surface-soft); }
.product_detail_line_copy { display: flex; min-width: 0; min-height: 470px; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--y-space-32); }
.product_detail_line_copy > p:not(.product_detail_line_label) { width: min(760px,100%); color: var(--y-color-text-secondary); }
.product_detail_line_image { display: block; width: 100%; height: 470px; object-fit: cover; }
.product_detail_certifications { display: flex; flex-direction: column; gap: var(--y-space-64); padding: var(--y-layout-section-space) var(--y-layout-page-gutter); }
.product_detail_certifications > h2 { color: var(--y-color-text-accent); }
.product_detail_certification_content { display: flex; min-width: 0; flex-direction: column; gap: var(--y-space-24); }
.product_detail_certification_note { color: var(--y-color-text-secondary); }
/* Ingredient stories reuse the registered type roles, shared button and spacing
   tokens. Overlapping grid panels reserve the tallest content: tabs never move
   the following sections, even when their copy lengths differ. */
.product_ingredient_stories, .product_detail_for_you { display: flex; flex-direction: column; gap: var(--y-space-64); padding: var(--y-layout-section-space) var(--y-layout-page-gutter); }
.product_ingredient_stories { background: var(--y-color-surface-soft); }
.product_ingredient_header { display: flex; flex-direction: column; gap: var(--y-layout-heading-copy-gap); text-align: center; }
.product_ingredient_header h2, .product_detail_for_you > h2 { color: var(--y-color-text-accent); }
.product_ingredient_header h2 { scroll-margin-top: var(--y-space-124); }
.product_ingredient_header p { color: var(--y-color-text-primary); }
.product_ingredient_tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--y-space-16); }
#yuriu-site .product_ingredient_tabs .btn[aria-selected="true"] { background: var(--y-color-text-accent); border-color: var(--y-color-text-accent); color: var(--y-color-text-on-dark); }
.product_ingredient_tabs .btn:focus-visible, .product_ingredient_panel:focus-visible { outline: 2px solid var(--y-color-text-accent); outline-offset: 4px; }
.product_ingredient_panels { display: grid; }
.product_ingredient_panel { grid-area: 1 / 1; min-width: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: var(--y-space-64); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease; }
.product_ingredient_panel.is_active { opacity: 1; visibility: visible; pointer-events: auto; }
.product_ingredient_figure { margin: 0; min-width: 0; align-self: start; }
.product_ingredient_image { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--y-color-surface-default); }
.product_ingredient_image img { display: block; width: 100%; height: 100%; object-fit: contain; padding: var(--y-space-32); }
.product_ingredient_image.is_photo img { object-fit: cover; padding: 0; }
.product_ingredient_figure figcaption { margin-top: var(--y-space-16); color: var(--y-color-text-secondary); }
.product_ingredient_figure a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.product_ingredient_copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: var(--y-space-24); }
.product_ingredient_copy h3, .product_ingredient_copy > .contents_title_medium { color: var(--y-color-text-accent); }
.product_ingredient_copy p { color: var(--y-color-text-primary); }
.product_ingredient_fact { padding-top: var(--y-space-16); }
.product_ingredient_note { color: var(--y-color-text-secondary); }
.product_for_you_grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--y-space-64); }
.product_for_you_grid .product_detail_explanation { padding: 0; }
.product_detail_certifications .certification_panel_inner.has_no_mark { grid-template-columns: minmax(0,1fr); }
.product_detail_marks { flex-wrap: wrap; }
.product_detail_marks img { width: 104px; height: 104px; }
@media (max-width: 1100px) {
  .product_ingredient_panel, .product_for_you_grid { gap: var(--y-space-40); }
}
@media (max-width: 768px) {
  .product_ingredient_stories, .product_detail_for_you { gap: var(--y-space-40); }
  .product_ingredient_panel, .product_for_you_grid { grid-template-columns: minmax(0,1fr); gap: var(--y-space-32); }
  .product_ingredient_panel { align-content: start; align-items: start; }
  .product_ingredient_tabs { gap: var(--y-space-12); }
  .product_ingredient_image { max-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .product_ingredient_panel { transition: none; }
}
@media (max-width: 768px) {
  .product_detail_certifications { gap: var(--y-space-40); }
}
@media (max-width: 1100px) {
  .product_detail_hero_copy { gap: var(--y-space-24); }
  .product_detail_hero_media, .product_detail_rx .product_detail_hero_media { height: auto; aspect-ratio: 1; }
  :is(.product_detail_jikimi,.product_detail_sensitive,.product_detail_rx) .product_detail_hero { min-height: 0; }
  .product_detail_marks { gap: var(--y-space-16); }
  .product_detail_marks img { max-width: 24%; height: auto; max-height: 90px; }
  .product_detail_composition { height: auto; min-height: 580px; gap: var(--y-space-24); }
  .product_detail_explanations { width: 34%; height: auto; gap: var(--y-space-64); padding-bottom: 0; }
  .product_detail_center_image, :is(.product_detail_jikimi,.product_detail_sensitive,.product_detail_rx) .product_detail_center_image { width: 24%; height: 520px; }
  .product_detail_connector { display: none; }
  .product_detail_formula_copy { padding: var(--y-space-32); }
  .product_detail_line { gap: var(--y-space-40); }
}
@media (max-width: 768px) {
  .product_detail_hero, .product_detail_formula, .product_detail_information, .product_detail_line { display: flex; flex-direction: column; }
  :is(.product_detail_jikimi,.product_detail_sensitive,.product_detail_rx) .product_detail_hero { margin: 0; padding: 0 var(--y-layout-page-gutter) var(--y-layout-section-space); gap: var(--y-space-32); }
  .product_detail_hero_media, .product_detail_rx .product_detail_hero_media { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .product_detail_hero_media img, .product_detail_rx .product_detail_hero_media img { width: 100%; height: auto; max-width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
  .product_detail_hero_copy { width: 100%; }
  .product_detail_ingredients { gap: var(--y-space-40); }
  .product_detail_composition { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); min-height: 0; gap: var(--y-space-40) var(--y-space-24); }
  .product_detail_explanations { width: 100%; height: auto; gap: var(--y-space-40); align-self: stretch; }
  .product_detail_center_image, :is(.product_detail_jikimi,.product_detail_sensitive,.product_detail_rx) .product_detail_center_image { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: 60%; height: 400px; }
  .product_detail_explanation { padding-bottom: 0; }
  .product_detail_formula { margin: 0; min-height: 0; }
  .product_detail_formula_copy { width: 100%; padding: var(--y-layout-section-space) var(--y-layout-page-gutter); }
  .product_detail_formula_media { width: 100%; }
  .product_detail_formula_media img { width: 70%; }
  .product_detail_information { min-height: 0; gap: var(--y-space-40); }
  .product_detail_line { padding: var(--y-layout-section-space) var(--y-layout-page-gutter); min-height: 0; gap: var(--y-space-40); }
  .product_detail_line_copy { min-height: 0; width: 100%; }
  .product_detail_line_image { height: auto; aspect-ratio: 3 / 2; }
}
@media (max-width: 520px) {
  .product_detail_composition { display: flex; flex-direction: column; gap: var(--y-space-32); }
  .product_detail_center_image, :is(.product_detail_jikimi,.product_detail_sensitive,.product_detail_rx) .product_detail_center_image { order: -1; flex: none; width: 74%; height: 360px; }
  .product_detail_explanations { gap: var(--y-space-32); }
  .product_detail_marks { max-width: 100%; }
}
/* Line pages — the same system as the home page: page gutter, section
   rhythm, section-title + body-copy pairs with the shared heading/copy gap,
   and product cards like the home Best Products (photo, Korean name,
   English name, centred; no rules, labels or arrows). */
.catalog_line_hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(560px, 35.4167vw, 680px); background: var(--y-color-surface-soft); }
.catalog_line_hero_media { position: relative; inset: auto; grid-column: 1; grid-row: 1; width: 100%; min-height: 0; overflow: hidden; }
.catalog_line_hero_media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.catalog_line_hero_copy { display: flex; grid-column: 2; grid-row: 1; width: 100%; max-width: none; padding: var(--y-layout-section-space) var(--y-layout-page-gutter); flex-direction: column; align-items: flex-start; justify-content: center; }
#yuriu-site .catalog_line_name { margin: 0; color: var(--y-color-text-accent); }
#yuriu-site .catalog_line_desc { max-width: 640px; margin: var(--y-layout-heading-copy-gap) 0 0; color: var(--y-color-text-primary); word-break: keep-all; }

.catalog_collection.catalog_line_collection { padding: var(--y-layout-section-space) var(--y-layout-page-gutter); }
.catalog_line_collection .catalog_section_heading { margin-bottom: var(--y-space-64); }
#yuriu-site .catalog_line_collection .catalog_section_heading h2 { margin: 0 0 var(--y-layout-heading-copy-gap); color: var(--y-color-text-accent); }
#yuriu-site .catalog_line_collection .catalog_section_heading p { margin: 0; color: var(--y-color-text-primary); }
.catalog_line_collection .catalog_product_grid {
  /* Line collections share a centred, two-column layout. Keep the existing
     260px card and 240 × 320 photo stage; only their placement changes. */
  display: grid;
  width: min(100%, 1280px);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: var(--y-space-64) clamp(var(--y-space-32), 5vw, var(--y-space-96));
}
.catalog_line_collection .catalog_product_grid:has(> .catalog_product_card:only-child) {
  grid-template-columns: minmax(0, 1fr);
}
.catalog_line_collection .catalog_section_heading {
  width: min(100%, 1280px);
  margin: 0 auto var(--y-space-64);
  text-align: left;
}
.catalog_line_collection .catalog_product_card {
  width: min(100%, 260px);
  min-width: 0;
  min-height: 0;
  justify-self: center;
  gap: var(--y-space-16);
}
.catalog_line_collection .catalog_product_image {
  width: min(100%, 240px);
  height: auto;
  aspect-ratio: 3 / 4;
}
.catalog_line_collection .catalog_line_count {
  color: var(--y-color-text-secondary);
  vertical-align: middle;
}
.catalog_bottom_links { margin-top: var(--y-space-64); justify-content: center; }

/* Product card (line pages and "see also" lists). */
.catalog_product_card { align-items: center; gap: var(--y-space-24); text-align: center; }
/* The photo is absolutely inset so it is always contained whole in the
   frame (percentage heights in a grid cell did not resolve and the bottles
   were drawn larger than the frame and cut off). */
.catalog_product_image { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--y-color-surface-soft); overflow: hidden; }
.catalog_product_image img { position: absolute; inset: 10% 14%; width: 72%; height: 80%; object-fit: contain; object-position: center bottom; }
.catalog_product_image:has(img.product_photo_ai),
.catalog_detail_media:has(img.product_photo_ai) { background: var(--y-color-surface-default); }
.catalog_product_image img.product_photo_ai { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* The source photos are all 1254px squares with different amounts of white
   space. Keep the Figma 240 × 320 photo stage fixed, then calibrate only the
   visible package inside each line tile. */
#yuriu-site .catalog_line_collection .catalog_product_image img.product_photo_ai {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform-origin: center center;
}
#yuriu-site .catalog_line_collection img.product_photo_ai[src$="product_ai_dadeumi.png"] { --packshot-scale: 1.30; }
#yuriu-site .catalog_line_collection img.product_photo_ai[src$="product_ai_chewoomy.png"] { --packshot-scale: 1.27; }
#yuriu-site .catalog_line_collection img.product_photo_ai[src$="product_ai_bodumi.png"] { --packshot-scale: 1.32; }
#yuriu-site .catalog_line_collection img.product_photo_ai[src$="product_ai_bosongi.png"] { --packshot-scale: 1.35; }
#yuriu-site .catalog_line_collection img.product_photo_ai[src$="product_ai_jikimi.png"] { --packshot-scale: 1.20; }
#yuriu-site .catalog_line_collection img.product_photo_ai[src$="product_ai_311_spot.png"] { --packshot-scale: 1.50; }
.catalog_detail_media img.product_photo_ai { width: min(100%, 680px); max-height: none; aspect-ratio: 1; object-fit: contain; }
.catalog_product_image .catalog_image_placeholder { position: absolute; inset: 0; }
.catalog_product_card:hover .catalog_product_image img, .catalog_product_card:focus-visible .catalog_product_image img { transform: translateY(-6px); }
/* All Products uses the same supplied square photos in its existing 350px
   portrait slot; hiding only the empty sides keeps bottle scale consistent. */
.products_card_media.product_photo_frame { overflow: hidden; }
.yuriu_renew_page.subpage .products_card_media > img.product_photo_ai {
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1;
  object-fit: cover !important;
  flex: none;
}
@media (max-width: 1200px) {
  .catalog_collection { padding-inline: var(--y-layout-page-gutter); }
  .catalog_product_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Line and product pages on the shared breakpoints; side margins use the
   page gutter like every other page. */
@media (max-width: 768px) {
  .catalog_line_hero, .catalog_detail_hero { display: flex; min-height: 0; flex-direction: column; }
  .catalog_line_hero_media { order: 0; aspect-ratio: 4 / 3; }
  .catalog_line_hero_copy { order: 1; }
  .catalog_collection { padding: 84px var(--y-layout-page-gutter); }
  .catalog_product_grid { gap: 44px 16px; }
  .catalog_detail { padding-bottom: 0; }
  .catalog_detail_media { min-height: 0; aspect-ratio: 1 / 1; }
  .catalog_detail_copy, .catalog_story_copy { padding: 64px var(--y-layout-page-gutter) 80px; }
  .catalog_detail_title { font-size: clamp(38px, 9vw, 62px); }
  .catalog_story { display: flex; flex-direction: column-reverse; }
  .catalog_story_media { min-height: 0; aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .catalog_line_collection .catalog_product_grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--y-space-48);
  }
}
@media (max-width: 520px) {
  .catalog_product_grid { grid-template-columns: minmax(0, 1fr); }
  .catalog_product_card { width: min(100%, 380px); justify-self: center; }
  .catalog_bottom_links { flex-direction: column; }
  .catalog_line_collection .catalog_product_card { width: min(100%, 260px); min-height: 0; justify-self: center; }
}


/* Figma 1446:3004: preserve each mark's own optical size rather than forcing
   every source into the same square; the row's desktop gap remains 32px. */
.product_detail_marks { align-items: center; min-height: 119px; gap: clamp(16px,1.666667vw,32px); }
.product_detail_mark_visual { position: relative; display: block; flex: none; overflow: hidden; }
.product_detail_mark_visual[data-cert="dermatest"] { width: 89px; height: 119px; }
.product_detail_mark_visual[data-cert="sensitive-skin"] { width: 94px; height: 94px; }
.product_detail_mark_visual[data-cert="allergen-free"] { width: 94px; height: 95px; }
.product_detail_mark_visual[data-cert="vegan"] { width: 94px; height: 94px; }
#yuriu-site .product_detail_marks .product_detail_mark_visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
#yuriu-site .product_detail_mark_visual[data-cert="dermatest"] img { left: -8.72%; top: -9.31%; width: 118.05%; height: 119.01%; }
#yuriu-site .product_detail_mark_visual[data-cert="sensitive-skin"] img { left: -13.79%; top: -13.95%; width: 128%; height: 128%; }