/* Mobile/tablet scroll-pacing overrides for sticky sections.
   The Webflow export uses very short margin-bottom on .second-sticky-wrapper
   at narrow breakpoints — the section unsticks (transitions to the next one)
   as soon as the content settles, which feels rushed: the user hasn't had
   time to read the headline + "15% lighter" block before the next section
   begins entering. We extend the post-pin scroll length so the panel dwells
   for roughly one more viewport before unsticking.

   These overrides are loaded AFTER the original kormat.webflow.css and target
   the same selectors at the same specificity — last-wins in the cascade.

   To revert: delete this file and remove the patchEnhancements injection.

   Tuning knobs:
     --kf-pacing-extra-tablet: extra dwell on ≤991px viewports
     --kf-pacing-extra-mobile: extra dwell on ≤767px viewports */

/* section_20y 3rd image (s20-3 dog cinemagraph) dwell extension.
   Webflow's .second-sticky-trigger is fixed at height:200vh with 3 IX2
   trigger blocks distributed by flex space-between, so block3 (the one
   that fires the dog cinemagraph) ALWAYS lands at 100% — zero post-block
   dwell. As soon as the dog reaches full opacity, the sticky pin ends
   and the section unsticks.

   The fix is NOT to enlarge the trigger (block positions are %-based,
   so block3 would just move with it). Instead, extend the SECTION_20Y's
   *containing block* — the .second-sticky-wrapper — with padding-bottom.
   Sticky pin holds until the wrapper's bottom passes the viewport, so
   padding-bottom directly extends pin duration AFTER all IX2 triggers
   have fired. The wrapper's existing margin-bottom (~270px Webflow
   default) is unchanged, so the gap to the next section stays tight. */

/* _20y_4grid third card right-edge consistency — Webflow's CSS sets
   ._20y_4grid-item.is-second, ._20y_4grid-item.id-third to
   position:absolute (so IX2 can fade them in over the first card),
   which gives them a slightly wider rendered width than the static
   is-first card. The first card has a built-in right inset; the
   absolute siblings extend right up to the container edge. On is-second
   the text is short ("Ages 0+") so it's invisible; on id-third the
   longer "15% lighter" body bleeds to the very right edge of the mobile
   viewport. Pin the absolute siblings to the same right-side inset as
   is-first by giving them an explicit right value, scoped to mobile
   where the issue manifests. */
/* section_20y card / dog overrides — REVERTED.
   Earlier this block (a) repositioned .second-sticky-block via absolute
   positioning to push block3 (cards "Weighing/15% lighter") earlier in
   the trigger, and (b) stretched .is-second / .id-third with inset:0 to
   cover .is-first's bottom-text leak. Both broke the source's intended
   behavior — cards no longer appeared in sequence ("3 cards crossfading
   one at a time with text rising"), and the card sizing/layout went off.
   Reverted to source defaults. The original "and quality" text leak and
   the dog dwell are separate concerns to revisit after the section is
   stable. */

/* _20y_4grid is-second / id-third are position:absolute (so IX2 can
   crossfade them in over is-first). Their nearest positioned ancestor is
   ._20y_component (a wider parent), not the narrow ._20y_4grid-wrapper
   column, so the long "15% lighter" body wraps at the WIDER component
   width and the text bleeds past the wrapper's right-edge padding on
   narrow viewports. Promoting ._20y_4grid-wrapper itself to relative
   makes IT the nearest positioned ancestor, so absolute children inherit
   its narrower box and respect the right-side inset.
   CRITICAL: only position:relative — no inset/top/right/bottom/left
   overrides. Earlier attempts to also set inset:0 stretched the absolute
   cards to fill the wrapper's full height, which clobbered the source's
   "3 cards crossfade sequentially with text rising" behavior. Position
   change alone constrains width without stretching height. */
._20y_4grid-wrapper {
  position: relative;
}


/* Webflow constrains the Point 01 body column (.div-block-2 for PVC/Roll
   mats, .div-block-12 for Folding mat) to max-width: 258px on desktop —
   tight enough to wrap English translations of the Point 01 body to 5
   lines while Point 02/03 sit in a ~510px container that holds them in
   2 lines. Widening to match Point 02/03 makes all three Point bodies
   wrap consistently across all 3 products on desktop. Mobile is unaffected
   because the column is full-width on narrow viewports. */
@media (min-width: 992px) {
  .div-block-2,
  .div-block-12 {
    max-width: none !important;
  }
}

/* Viewport-conditional line breaks injected by i18n-build.
   - {{br}}         → plain <br> (visible everywhere — default)
   - {{br_desktop}} → <br class="kf-br-desktop">, hidden ≤767px
   - {{br_mobile}}  → <br class="kf-br-mobile">, hidden ≥768px
   Lets translators put separate desktop and mobile break points when the
   natural copy length differs between layouts (eg. a sentence that fits in
   one line on desktop but needs a mid-clause break on mobile). */
@media (max-width: 767px) {
  br.kf-br-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  br.kf-br-mobile {
    display: none;
  }
}

/* Mobile typography bumps. The Webflow defaults sized text for desktop
   first; on phones (≤767px) the nav, lang switcher, and footer line up at
   ~10–11px, which reads small on modern devices. Bumping each by ~15–20%
   keeps the layout intact (4 nav items still fit one row, lang pill still
   fits the top-right slot, footer text still wraps the same way) while
   making everything easier to read. */
/* Mobile cert tab fix. Each thumb slide contains a heading link
   (.auto-tab_link-trigger) plus a sibling image block (.fb112 for PVC/Roll,
   .flex-block-3.bg-third for Folding). Inactive slides leaving the image
   block visible bleed pixel-thin lines into the gap between tabs (the empty
   image-wrappers in the image block render a 1–2px artifact even before
   their <img> loads). Targeting "every direct child that isn't the heading"
   hides any image-block variant, plus any future leak, without depending on
   a specific class name. */
@media (max-width: 767px) {
  .swiper-slide.cc-how-slider-thumbs:not(.swiper-slide-thumb-active) > *:not(.auto-tab_link-trigger),
  .swiper-slide.cc-how-slider-thumbs111:not(.swiper-slide-thumb-active) > *:not(.auto-tab_link-trigger),
  .swiper-slide.cc-how-slider-thumbs222:not(.swiper-slide-thumb-active) > *:not(.auto-tab_link-trigger) {
    display: none !important;
  }
}

/* Mobile cert section: Swiper.js bypasses touch-action via Pointer Events,
   so CSS alone cannot block horizontal drag of the thumb sliders. We close
   the gap with THREE hard guards:
   (a) JS — see the inline init script (allowTouchMove: false on the three
       mobile thumb swipers) injected via patch-enhancements.mjs,
   (b) clip any horizontal overflow at section + document-root level so even
       if drag somehow registered, content can't become visible outside the
       column, and
   (c) keep touch-action: pan-y as a browser hint. */
@media (max-width: 767px) {
  html,
  body {
    overflow-x: clip;
  }
  [class*="section_auto-tab"],
  .section_how-it-works,
  .page-wrapper,
  .main-wrapper {
    overflow-x: clip;
  }
  .cc-how-slider,
  .cc-how-slider2,
  [class*="cc-how-slider-thumbs"],
  .auto-tab_left-content .swiper,
  .auto-tab_right-content .swiper {
    touch-action: pan-y !important;
  }
}

@media (max-width: 767px) {
  /* Nav: 0.8125rem (13px) is a measured compromise — bigger than Webflow's
     0.75rem default (12px, felt cramped on modern phones) without crossing
     the threshold where labels like "Folding Mat" or "PVC Play Mat" wrap to
     two lines in the space-between flex row. white-space: nowrap is a hard
     guard against any future label that pushes past the natural shrink
     limit; we prefer horizontal overflow over a 2-line nav (which looks
     broken). */
  .nav_mobile-link {
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  /* Active nav link wraps its label in <div class="text-block-2"> which has
     its own smaller font-size. Inherit from the parent so the active item
     renders at the same size as the others. */
  .nav_mobile-link .text-block-2 {
    font-size: inherit;
    white-space: nowrap;
  }
  .kf-lang {
    font-size: 13px;
  }
  .text-4,
  .text1-18 {
    font-size: 0.78rem;
  }
  /* Warm minimalist banner (t248/t250) text container. Webflow's default
     pins .container.wide to 12.5rem (200px) on mobile, which forces
     "that blends smoothly into any space" onto 2+ lines no matter how the
     copy is broken — way too narrow given the available section width.
     Widen to auto with a generous cap so 2 balanced lines fit. */
  .banner-bottom_item .container.wide {
    width: auto;
    max-width: 22rem;
  }
}

/* Mobile footer height trim — Webflow ships .footer_component with
   ~38px padding top AND bottom plus a 23px gap above .contents. On
   narrow mobile viewports that adds ~100px of empty space around the
   actual footer content (logo + 4 rows + copyright). User has flagged
   this as "footer is too long" multiple times. We cut every contributing
   chunk: smaller outer padding, tighter logo→contents gap, tighter
   row-to-row gap inside .contents-2, tighter gap before copyright. The
   visual proportions of the footer block stay readable; we're just
   removing slack. */
@media (max-width: 991px) {
  .footer_component.show-mobile-only {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .footer_component.show-mobile-only .container-4 {
    gap: 0.75rem;
  }
  .footer_component.show-mobile-only .contents-2 {
    gap: 0.4rem;
  }
  .footer_component.show-mobile-only .contents {
    gap: 0.25rem;
  }
}

/* Mobile footer trim — aggressive shrink of padding/gap so the visible
   footer block is compact. Also clip any tail whitespace from page-wrapper
   so iOS Safari/Chrome doesn't show blank background between the footer
   end and the iOS bottom toolbar. */
@media (max-width: 991px) {
  .footer_component.show-mobile-only {
    padding-top: 1rem;
    padding-bottom: 0.75rem;
  }
  .footer_component.show-mobile-only .container-4 {
    gap: 0.75rem;
  }
  .footer_component.show-mobile-only .contents-2 {
    gap: 0.4rem;
  }
  .footer_component.show-mobile-only .contents {
    gap: 0.25rem;
  }
  /* NOTE: previously this block set background-color on html/body/
     page-wrapper/main-wrapper to suppress iOS trailing-whitespace, but
     it backfired catastrophically. .banner-sticky-wrapper holds the
     "01 PVC Play Mat" section_banner1 with z-index:-1 + position:sticky,
     intentionally rendered BEHIND the page-wrapper so it can fade in
     while the section_20y cinemagraph fades out above it. Painting
     page-wrapper with an explicit background-color on iOS Safari made
     the negative-z-index banner1 vanish entirely on mobile, leaving a
     huge empty block where the "01 PVC Play Mat" intro should appear.
     Removed; the trailing footer whitespace is a lesser evil than the
     missing banner. */
}

/* iOS Safari / iOS Chrome rubber-band overscroll suppression — the user
   reported a huge white empty area below the footer on iPhone that did
   NOT appear in playwright/desktop simulation. Cause: when the user's
   finger pulls down past the natural max scroll, iOS shows a "stretched"
   area past the document end with the page background (white) visible.
   Screenshots caught at that overscroll moment look like "the footer is
   much taller than it really is."
   `overscroll-behavior-y: none` tells iOS not to rubber-band past the
   document end. Scope to html + body so it applies to both the root
   scroller and any nested scroll containers. The contain value would
   also prevent scroll-chain effects but `none` is sufficient and slightly
   more conservative. */
html, body {
  overscroll-behavior-y: none;
}

/* Font unification — Pretendard everywhere.
   Pretendard CDN registers `Pretendard Variable` (not bare `Pretendard`),
   so the family list must lead with that exact name. */
html, body, h1, h2, h3, h4, h5, h6, p, span, a, button, label, li {
  font-family: "Pretendard Variable", Pretendard, "Noto Sans SC", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Cert subtitle unification — all three certificate sections show the
   same "Kormat sets strict product safety standards..." subtitle, but
   the Webflow export gave cert 3 a different markup (div._3rd-text-size-20)
   from cert 1+2 (p.text1-4.oppo-normal). Cert 3 renders bigger/bolder.
   Match cert 1+2 to cert 3 on mobile (≤991px) per user direction —
   "big + bold" is the intended visual. Scoped via data-i18n attributes
   so no other text1-4/_3rd-text-size-20 instance is affected. */
@media (max-width: 991px) {
  p[data-i18n="t071"],
  p[data-i18n="t158"],
  div[data-i18n="t224"],
  ._3rd-text-size-20 {
    font-size: 1.25rem !important;
  }
}

/* Swiper-tab section side padding — Webflow shipped
   `.section_swiper-tab.section-padding-120` with top/bottom 7.5rem but
   NO left/right padding, so on mobile the "Kormat Play Mat Series that
   creates a safe space for kids and pets" heading runs flush to the
   screen edges. Other sections have side padding; this one didn't. Add
   it to match the rest. */
@media (max-width: 991px) {
  .section_swiper-tab.section-padding-120 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}


/* (Mass vh-override removed. Touching every vh-based rule shrunk
   image-bearing elements like banner4 because the JS-measured value
   sits below 100vh — the baby photo got cropped. Keeping the chatbot
   panel as the only thing tied to the measured value, since that's
   the one element whose size MUST match the actual visible viewport
   regardless of how Chrome computes dvh.) */

/* iOS Chrome ONLY — `.banner-sticky-wrapper` ghost-height neutralization.

   ROOT CAUSE (confirmed after 12+ hours of investigation):
   `kormat.webflow.css:3240` ships
       .banner-sticky-wrapper { position: sticky; bottom: 18vw; z-index: -1 }
   wrapping all 16 product sections. On iOS Chrome (incognito or regular),
   sticky's `bottom: 18vw` is resolved against the **layout viewport** —
   which Chrome iOS silently extends to include the bottom-toolbar area
   (a documented Chromium quirk that does NOT affect Safari or WKWebView-
   based browsers like KakaoTalk's in-app browser).

   The 18vw offset means the sticky element keeps a "ghost height" of
   18vw past the actual end of its containing block in Chrome iOS's
   scroll-height accounting. That ghost-height is the phantom whitespace
   the user sees below the footer.

   Confirmation: opening then closing the chat panel (which toggles
   `body.kc-open`, adding `overscroll-behavior: contain` and
   `touch-action: pan-y`) forces Chrome iOS to recompute the sticky
   containing-block boundary, collapsing the ghost height. User has
   reported this exact behavior throughout the session — "open chat,
   close chat, whitespace gone."

   Fix: zero out the sticky bottom offset for iOS Chrome only. Safari
   and KakaoTalk users do NOT get `kf-ios-chrome`, so they retain the
   original 18vw offset (which they render correctly anyway). Position:
   sticky and z-index: -1 are preserved so the banner1 image still
   fades in behind the page-wrapper as designed. */
body.kf-ios-chrome .banner-sticky-wrapper {
  bottom: 0;
}



/* Family Site link row — brand-name external links inline (horizontal)
   on its own row below the Address row in the footer.
   On mobile we tighten gap + slightly shrink font-size so all 4 brand
   names fit on a single row instead of wrapping. Wrapping pushed the
   frame-311 row to 38px (2 rows) and footer overall grew by ~25px every
   time the typeface changed; per repeated user feedback we now keep
   family-links to a single row across all viewports. */
.family-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.85rem;
}
@media (max-width: 767px) {
  .family-links {
    gap: 0.25rem 0.6rem;
    font-size: 0.66rem;
  }
  .family-links a {
    white-space: nowrap;
  }
}

.family-links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.family-links a:hover {
  color: #7CB436;
}

/* Splash logo focus-in — CSS-only blur(11px) → blur(0) on page load.
   Source ships `.icon-embed-custom-5 { filter: blur(.6875rem) }` (= 11px)
   so the splash logo starts blurred. Webflow IX2 actionList a-17 was
   supposed to unblur it on PAGE_FINISH, but on mobile PAGE_FINISH waits
   on every cinemagraph video's metadata load (5–10s on cellular), so the
   logo just sits at 11px blur for the whole window.
   This rule decouples the focus-in from PAGE_FINISH. A 1200ms keyframe
   animates blur 11px → 0 starting from page load (purely CSS-driven).
   The selector specificity (0,0,2,0) outranks the source's single-class
   blur:11px rule, so once the animation finishes the resting state is
   blur:0. CRITICAL: no `!important` on the resting filter — `!important`
   would outrank the keyframe's `from { blur(11px) }` per spec and the
   logo would skip straight to sharp without animating. */
@keyframes kf-logo-focus-in {
  from { filter: blur(11px); }
  to   { filter: blur(0); }
}
.pageload_component .icon-embed-custom-5 {
  filter: blur(0);
  animation: kf-logo-focus-in 1200ms ease-out both;
}

/* Cinemagraph <video> slot — replaces select <img> tags but the video
   element renders differently than img in iOS Safari unless we pin the
   intrinsic behaviour explicitly. Without these rules, an iOS video with
   preload="none" or buffering interrupts can render as a transparent
   box during the moment its data isn't ready, even with a poster set.
   We force the video to fill its parent box exactly like the original
   img and pin background-color so any decoder hiccup shows the poster
   color instead of bleeding through to whatever's underneath in the
   z-index stack (notably the dog cinemagraph at section_20y, which
   z-indexes above two fading sibling images — a transparent moment
   there appears as "the dog vanished" to the user). */
/* Dog cinemagraph (section_20y) is the only one with a transparency-bleed
   problem during sticky scroll — it z-indexes above two fading sibling
   images, so a brief decoder hiccup paints transparent (= "dog vanishes").
   Apply the beige safety-net background ONLY there. We do NOT apply this
   to the hero cinemagraphs — those have <img class="...image"> posters
   that paint immediately, and a global beige background causes a visible
   "beige flash" before the poster decodes. */
._20y_image > video.cinemagraph {
  background-color: #ecead8;
}

/* Original baseline-gap "screen jump" fix — narrowly scoped to the DOG
   cinemagraph inside section_20y where the iOS Safari baseline-gap reflow
   was actually observed. The previous selector
   (`video.cinemagraph:not(.show-mobile-only):not(.hide-mobile-portrait)`)
   was over-broad — its 0,0,3,1 specificity beat the source rule
   `.image-wrapper-image.image1 { display: none }` (0,0,2,0) at the mobile
   breakpoint, forcing the first hero PC video to render on mobile and
   covering the static mobile img. */
._20y_image > video.cinemagraph {
  display: block;
}

/* Sticky-cards cinemagraph overlay — see patch-enhancements.mjs
   STICKY_OVERLAY_SLOTS. We keep the original <img class="sticky-cards_image">
   inside .sticky-cards_image-wrapper so the IX2 scroll-fade math stays
   intact (the IX2 binding sits on .section_sticky-cards ancestors), and
   layer <video class="cinemagraph-overlay"> on top, absolutely positioned
   to fill the same box. Opacity transitions cascade from the ancestor so
   the video fades in/out together with the image. */
.sticky-cards_image-wrapper {
  position: relative;
}
.sticky-cards_image-wrapper > video.cinemagraph-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* banner4 baby half overlay — same pattern, different parent class
   (.banner4_image-left or .banner4_image-right that wraps the baby <img>).
   The overlay fills the wrapper exactly so the seam edges line up with the
   adjacent sister half. */
.banner4_image-left,
.banner4_image-right {
  position: relative;
}
.banner4_image-left > video.banner4-overlay,
.banner4_image-right > video.banner4-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* MATCH THE IMG'S object-fit. The underlying <img class="banner4-pc">
     is `object-fit: fill` (Webflow default — stretches image to box
     exactly, allowing slight aspect distortion). The overlay video must
     use the SAME fit value, otherwise the video's framing differs from
     the poster img's framing and the diagonal "fold seam" baked into the
     composition no longer aligns between the left (img-only) and right
     (img + video) halves. Cover-mode crop on the video shifted the
     visible baby frame ~45px relative to the poster, breaking the
     diagonal join with the kid half. */
  object-fit: fill;
  pointer-events: none;
}

/* Mobile cert swiper touch-action — explicit pan-y so vertical scroll
   passes through the swiper container even when allowTouchMove: false
   suppresses horizontal drag. Scoped tightly to the mobile-only IDs to
   avoid breaking IX2 sticky-pin animations elsewhere on the page. */
@media (max-width: 991px) {
  #how-slider-thumbs111,
  #how-slider-thumbs222,
  #how-slider-thumbs333,
  #how-slider111,
  #how-slider222,
  #how-slider333 {
    touch-action: pan-y !important;
  }
}