/* ============================================================
   Cside Design System  (loaded LAST on every page)
   Centralizes spacing rhythm, container gutter, radius scale and
   first-paint behaviour by normalizing per-page inline values via
   the cascade. It does NOT touch images — clarity is untouched.
   Tune values here once → applies site-wide.
   ============================================================ */

:root{
  /* spacing rhythm */
  --cs-section-y: 80px;
  --cs-gutter: 24px;
  /* radius scale (single source of truth) */
  --cs-radius-sm: 12px;
  --cs-radius: 18px;
  --cs-radius-lg: 28px;
}

@media (max-width: 768px){
  :root{ --cs-section-y: 52px; --cs-gutter: 20px; }
}

/* 1) Consistent vertical rhythm.
   Only bare `.section` is normalized — page-specific variants like
   `.section.event-info-section` have higher specificity and keep their
   own tuned spacing, so nothing carefully-composed is disturbed. */
.section{
  padding-top: var(--cs-section-y);
  padding-bottom: var(--cs-section-y);
}

/* 2) Consistent container gutter across all pages (was 20 / 36 mixed). */
.container{
  padding-left: var(--cs-gutter) !important;
  padding-right: var(--cs-gutter) !important;
}

/* 3) Above-the-fold heroes render fully on first paint (no faded FOUC).
   The reveal script sets inline opacity:0; an !important rule wins the
   cascade so the first screenful is never washed-out on load. Sections
   below the fold still fade in normally. */
.hero-text,
.hero-text-full,
.hero-content,
[class*="hero-text"]{
  opacity: 1 !important;
  transform: none !important;
}

/* 4) Crisper text rendering (typography only — images unaffected). */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 5) Product detail pages — stacked panels share the EXACT left/right
   extent of the navbar bar, at every breakpoint. The navbar uses
   width:calc(100% - 200px) capped at 1240 (desktop) and
   calc(100% - 24px) (<=768). Mirror that on the page wrapper and zero
   its gutter so each panel's outer edge lines up with the navbar. */
main.page-stack{
  width: calc(100% - 200px) !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 768px){
  main.page-stack{
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }
}

/* 6) Product gallery images — anchor the crop to the top so a model's head
   is never cut off when a portrait photo is covered into the gallery cell
   (detail crops like sleeve/waist are unaffected by a top anchor). */
.g-cell img{ object-position: center top; }

/* 7) Product page "more in this collection" rail — lets shoppers jump to
   the other colours of the same collection right after the description.
   (Gown pages group long / short / dentist together.) */
.more-coll{ padding:24px 32px 30px; }
.more-coll .more-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:16px; }
.more-coll .more-title{ font-family:var(--sans,'Inter',sans-serif); font-weight:800; font-size:18px; letter-spacing:.08em; text-transform:uppercase; color:#1a1a1a; line-height:1.1; }
.more-coll .more-sub{ font-family:var(--sans,'Inter',sans-serif); font-size:12px; color:#7b8794; margin-top:3px; }
.more-coll .more-scroll{ overflow-x:auto; scrollbar-width:thin; margin:0 -4px; padding:4px 4px 10px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.more-coll .more-scroll::-webkit-scrollbar{ height:6px; }
.more-coll .more-scroll::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:3px; }
.more-coll .more-scroll::-webkit-scrollbar-track{ background:transparent; }
.more-coll .more-grid{ display:flex; gap:14px; width:max-content; }
.more-coll .more-card{ flex:0 0 184px; border-radius:16px; overflow:hidden; background:#eef2f6; box-shadow:0 6px 22px rgba(50,80,120,.10); transition:transform .25s ease, box-shadow .25s ease; scroll-snap-align:start; text-decoration:none; color:inherit; display:block; }
.more-coll .more-card:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(50,80,120,.16); }
.more-coll .more-img{ aspect-ratio:3/4; background:linear-gradient(135deg,#dfe7ef,#cdd8e3); overflow:hidden; }
.more-coll .more-img img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.more-coll .more-foot{ display:flex; align-items:center; justify-content:space-between; padding:12px 12px 12px 14px; gap:8px; }
.more-coll .more-name{ font-family:var(--sans,'Inter',sans-serif); font-size:13px; font-weight:600; color:#1a1a1a; line-height:1.25; }
.more-coll .more-go{
  width:30px; height:30px; flex:0 0 auto; border-radius:50%;
  border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  color:#1a1a1a; font-size:0; /* hide the text arrow; draw an SVG instead */
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.more-coll .more-go::before{
  content:""; width:13px; height:13px; display:block;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
}
.more-coll .more-card:hover .more-go{ background:#1a1a1a; border-color:#1a1a1a; color:#fff; transform:translateX(2px); }
@media (max-width:560px){
  .more-coll{ padding:20px 18px 24px; }
  .more-coll .more-card{ flex-basis:150px; }
}

/* 8) Desktop proportion lock (paired with /assets/desktop-lock.js).
   On displays wider than the 1440 design width the script zooms <html> so
   every large screen (monitor, TV, MacBook) shows identical proportions.
   Full-bleed 100vw sections mis-measure under zoom and bleed symmetrically
   beyond the viewport — clip that overflow so there's no horizontal
   scrollbar. Centered content is unaffected. */
html.cs-locked,
html.cs-locked body{ overflow-x: clip; }

/* 9) Keep <body> out of the containing-block chain for absolute children.
   Pages run a `pageIn` entrance animation on <body> that animates `transform`.
   While that animation lives (fill-mode both keeps it), <body> becomes the
   containing block for position:absolute descendants — so the overlay navbar
   (top:30px) resolves against <body> instead of the viewport. Combined with the
   hero's negative margin-top that pushes the navbar off-screen (y:-70) on home,
   /men and /women. Disabling the body animation/transform anchors the navbar to
   the viewport. Content still appears immediately; the proportion lock uses
   html.zoom (not a body transform) so it is unaffected.
   isolation:isolate restores a stacking context on <body> (transform used to
   provide one as a side effect) so any current or future negative z-index
   hero background stays scoped inside <body>, painting above its own
   background, instead of escaping to the root and rendering underneath it —
   confirmed on /thailand/ and /philippines/ 2026-07-17 (hero photo went
   fully invisible once transform was removed there without this). */
body{ animation: none !important; transform: none !important; isolation: isolate !important; }

/* 10) Tidier footer on phones. The per-page footer cramped SHOP/SUPPORT/ABOUT
   into 3 narrow columns whose uneven link counts (5 / 2 / 1) wrapped and looked
   ragged. On <=640px stack every section full-width in one column, separated by
   hairline dividers, with roomy tap targets — clean and scannable. */
@media (max-width: 640px){
  .footer-grid{ grid-template-columns: 1fr !important; gap: 0 !important; }
  .ft-brand{ grid-column: 1 / -1 !important; margin-bottom: 6px !important; }
  .ft-col, .ft-news{
    grid-column: 1 / -1 !important;
    padding: 18px 0 !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
  }
  .ft-col h5, .ft-news h5{ margin-bottom: 10px !important; }
  .ft-col a{ display: block !important; padding: 7px 0 !important; font-size: 13px !important; }
  .ft-news{ border-bottom: 1px solid rgba(0,0,0,.08) !important; }
  .footer-bot{
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding-top: 16px !important;
  }
}

/* 11) Keep the absolute hero navbar from covering the first headline line on
   shorter desktop viewports. */
.hero-inner-full {
  padding-top: max(150px, 18vh) !important;
}

@media (max-width: 768px) {
  .hero-inner-full {
    padding-top: 210px !important;
  }
}

/* 12) English words inside Thai copy must render Poppins, not Kanit's own
   Latin glyphs or a serif fallback — same rule as the CYN site. Overrides
   each page's own --serif/--sans/--thai (this file loads last so it wins).
   Thai glyphs have zero Poppins coverage so they always fall through to
   Kanit regardless of order — this only ever affects the Latin portion.
   Every page importing this file must also load Poppins in its Google
   Fonts URL (family=Poppins:wght@300;400;500;600;700) or the browser has
   nothing to fall through TO and silently skips to Kanit anyway. */
:root{
  --serif: 'Poppins','Cormorant Garamond','Kanit',serif;
  --sans: 'Poppins','Kanit',sans-serif;
  --thai: 'Poppins','Kanit',sans-serif;
}