/* ===================================================================
   theme.css — behaviour styles ported from the real maxkin.co.th
   (Weebly "Edison" theme by Pixel Union). Values taken from
   _real-site/css/main_style.css — see CHANGELOG.md 2026-09-07.

   Loaded AFTER each page's inline <style> block so these rules win.
   =================================================================== */

/* ===================================================================
   HEADER — one row: logo | nav | Search
   From _real-site/css/main_style.css:
     .edison-header{padding:19px 0}                       (compressed: 4px)
     .header-inner-wrap{display:flex;justify-content:space-between;
                        align-items:center;flex-wrap:nowrap;min-height:50px}
     .nav-wrap{overflow:hidden;max-width:80%;padding:10px 0;
               background:#fff;text-align:center}
     .desktop-nav li{display:inline-block;padding:0 5px}
     .desktop-nav .wsite-menu-item{padding:5px}
     .wsite-menu-item{color:#a4a4a4}
     active/hover -> #015058
     .has-submenu > .wsite-menu-item::after{content:"+";width:9px}
     .dropdown-open  ::after -> "-"
     .search-toggle{font-size:16px;padding:5px 0}
   NOTE: "Shop" is the 11th nav item on the live site, not a pill button.
   =================================================================== */

.edison-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 19px 0;
  background: #fff;
  transition: padding .3s ease;
}
.edison-header .container {
  max-width: 1100px;
  padding: 0 15px;
  margin: 0 auto;
  box-sizing: border-box;
}
.header-inner-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 50px;
}

.edison-header .logo {
  overflow-y: hidden;
  max-height: 100%;
  margin-bottom: 0;
  flex: 0 0 auto;
}
.edison-header .logo img {
  /* main_style.css: .edison-header .wsite-logo img{max-height:46px} plus
     padding:5px 0 from the >768px block. */
  max-height: 46px;
  width: auto;
  display: block;
  padding: 5px 0;
  transition: max-height .3s ease;
}

.edison-header .nav-wrap {
  overflow: hidden;
  max-width: 80%;
  padding: 10px 0;
  background: #fff;
  text-align: center;
}

/* Sizing is left to main_style.css (.wsite-menu-default{font-family:'Karla';
   font-size:16px} and .desktop-nav li{display:inline-block;padding:0 5px}).
   This used to set font-size:0 on the list and 15px on the items to kill
   the inline-block whitespace — which made the row measurably narrower
   than the live one, so fewer items wrapped and "More" swallowed fewer
   links than it should. The overflow menu is driven by wrapping, so the
   row has to measure exactly like the real thing. */
.desktop-nav .wsite-menu-default {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* No `position` here on purpose: the dropdown below is absolute against
   .edison-header, which is what makes it span the full header width. */
.desktop-nav .wsite-menu-item,
.desktop-nav .wsite-menu-subitem {
  display: block;
  padding: 5px;
  color: #a4a4a4;
  text-decoration: none;
  white-space: nowrap;
  transition: color 300ms ease;
}
.desktop-nav .wsite-menu-item:hover,
.desktop-nav #active > .wsite-menu-item,
.desktop-nav .wsite-menu-item.active,
.desktop-nav .wsite-menu-subitem:hover,
.desktop-nav .wsite-menu-subitem.active,
.desktop-nav .dropdown-open > .wsite-menu-item { color: #015058; }

/* Submenu parents get a "+" that flips to "-" while open */
.has-submenu > .wsite-menu-item::after {
  display: inline-block;
  width: 9px;
  content: "+";
}
.desktop-nav li.dropdown-open > .wsite-menu-item::after { content: "-"; }

/* Real theme: .desktop-nav .wsite-menu-wrap{position:absolute;width:100%;
   left:0;background:#fff}. It is absolute against .edison-header (the
   nearest positioned ancestor — .desktop-nav li is static), so the panel
   spans the whole header and its items sit in one centred row, inheriting
   text-align:center from .nav-wrap. .nav-wrap's overflow:hidden does not
   clip it, because the containing block is an ancestor of .nav-wrap. */
.desktop-nav .wsite-menu-wrap {
  display: none;
  position: absolute;
  width: 100%;
  left: 0;
  padding: 8px 0 14px;
  background: #fff;
  z-index: 10;
}
.desktop-nav li.dropdown-open > .wsite-menu-wrap { display: block; }
.desktop-nav .wsite-menu {
  width: 100%;
  max-width: 1100px;
  list-style: none;
  margin: 0 auto;
  padding: 0 15px;
  text-align: center;
  box-sizing: border-box;
}
.desktop-nav .wsite-menu-subitem { padding: 5px; }

/* The overflow item that pxuMenu injects (built by theme.js) */
.desktop-nav .menu-more > .more-link::after {
  display: inline-block;
  width: 9px;
  content: "+";
}
.desktop-nav .menu-more.dropdown-open > .more-link::after { content: "-"; }

.site-utils { flex: 0 0 auto; }
/* .search-toggle is left to main_style.css, which hides it unless the
   site has search enabled — the live maxkin.co.th header shows no
   Search link. */

/* --- 1. Hamburger button ------------------------------------------
   Real theme: .hamburger{height:15px;margin-left:20px} with 20x3px
   bars in #03abbc, morphing to an X when body has .nav-open.        */

.hamburger {
  display: none;
  height: 15px;
  width: 20px;
  padding: 0;
  margin-left: 6px;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}
.hamburger i {
  display: block;
  width: 20px;
  height: 3px;
  background-color: #03abbc;
  position: relative;
  transition: background-color 0.2s ease-out;
}
.nav-open .hamburger i { background-color: transparent; }
.hamburger i::before,
.hamburger i::after {
  display: block;
  width: 20px;
  height: 3px;
  background-color: #03abbc;
  position: absolute;
  content: "";
  transition: top 0.2s ease-out 0.2s, transform 0.2s ease-out;
}
.nav-open .hamburger i::before,
.nav-open .hamburger i::after {
  transition: top 0.2s ease-out, transform 0.2s ease-out 0.2s;
  top: 0;
}
.hamburger i::before { top: -200%; }
.hamburger i::after { top: 200%; }
.nav-open .hamburger i::before { transform: rotate(45deg); }
.nav-open .hamburger i::after { transform: rotate(-45deg); }

/* --- 2. Mobile nav drawer -----------------------------------------
   Real theme breakpoint is 1024px: the desktop menu is hidden at
   max-width:1024px (or any device without hover), and the hamburger
   is hidden from min-width:1025px up.                               */

.mobile-nav {
  position: fixed;
  left: 0;
  z-index: 99;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  padding: 20px 0;
  background-color: #fff;
  border-top: 1px solid #eee;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .1);
}
.mobile-nav.animating,
.mobile-nav.visible { display: block; }
.mobile-nav.animating-in,
.mobile-nav.animating-out { opacity: 0; transition: opacity .3s ease; }
.mobile-nav.visible { opacity: 1; transition: opacity .3s ease; }

.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { position: relative; }
.mobile-nav a {
  display: block;
  padding: 13px 22px;
  color: #606060;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.mobile-nav a.active { color: var(--teal-dark); font-weight: 700; }
.mobile-nav a:hover { background: #f6f6f6; }

/* Submenu: collapsed until its parent row is tapped (no :hover on touch) */
.mobile-nav .wsite-menu-wrap {
  display: none;
  position: static;   /* not the desktop's full-width absolute panel */
  width: auto;
  padding: 0;
  background: #fafafa;
  border-left: 3px solid var(--teal);
  margin: 0 22px 6px;
}
.mobile-nav li.open > .wsite-menu-wrap { display: block; }
.mobile-nav .wsite-menu-wrap a { padding: 10px 18px; font-size: 14px; }

/* Tap target that opens the submenu, sitting beside the parent link */
.mobile-nav .submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 46px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--teal-dark);
  font-size: 12px;
  line-height: 46px;
  transition: transform .2s ease;
}
.mobile-nav li.open > .submenu-toggle { transform: rotate(180deg); }

/* Real theme hides `.nav-wrap, .wsite-search` — NOT .site-utils, because
   the hamburger button lives inside .site-utils in the server HTML. Only
   the Search link goes away here; it reappears inside the drawer. */
@media (max-width: 1024px), (hover: none) {
  .edison-header .nav-wrap,
  .site-utils .search-toggle { display: none; }
  .hamburger { display: block; }
}
@media (min-width: 1025px) {
  .mobile-nav { display: none !important; }
}

/* --- 3. Sticky header compress on scroll --------------------------
   The real site's body carries `header-sticky` (not header-sticky-up),
   so the header does NOT hide on scroll down — it *compresses*:
   .edison-header padding goes 19px -> 4px once you pass 2x its
   height. Ported to this clone's .header-top padding.               */

body.header-compressed .edison-header { padding-top: 4px; padding-bottom: 4px; }
body.header-compressed .edison-header .logo img { max-height: 40px; }
body.header-compressed .edison-header { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }

/* --- 4. reveal-content --------------------------------------------
   In the real theme this is only a load-time fade for the header
   (body.reveal-content .header-inner-wrap{opacity:1}), not a
   scroll animation. Same here.                                      */

.edison-header .header-inner-wrap {
  opacity: 0;
  transition: opacity 0.6s ease-in 0.3s;
}
body.reveal-content .edison-header .header-inner-wrap { opacity: 1; }

/* --- 5. Lightbox (fancybox stand-in) ------------------------------ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  background: rgba(0, 0, 0, .88);
  opacity: 0;
  transition: opacity .25s ease;
}
.lightbox.animating, .lightbox.visible { display: block; }
.lightbox.visible { opacity: 1; }

.lightbox-stage {
  position: absolute;
  inset: 56px 64px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 3px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.lightbox button {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  transition: background .2s ease;
}
.lightbox button:hover { background: rgba(255, 255, 255, .28); }
.lightbox-close {
  top: 14px; right: 16px;
  width: 40px; height: 40px;
  font-size: 22px; line-height: 1;
}
.lightbox-prev, .lightbox-next {
  top: 50%;
  margin-top: -24px;
  width: 48px; height: 48px;
  font-size: 24px; line-height: 1;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-count {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  letter-spacing: .04em;
}

.gallery img { cursor: zoom-in; }

@media (max-width: 700px) {
  .lightbox-stage { inset: 48px 12px 48px; }
  .lightbox-prev, .lightbox-next { width: 38px; height: 38px; font-size: 19px; }
  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
}

/* ===================================================================
   SLIDESHOW — the homepage's top element, which the clone was missing.
   Config lifted verbatim from _real-site/index-view-source.html:

     wSlideshow.render({ nav:"none", navLocation:"bottom",
       captionLocation:"bottom", transition:"slide", autoplay:"1",
       speed:"3", aspectRatio:"4:3", showControls:"true",
       randomStart:"false", images:[ …4 images… ] })

   So: 4 slides, slide transition, autoplay every 3s, 4:3 box,
   prev/next arrows, NO nav dots, always starts on slide 1.
   The 20px spacer divs above and below match the live markup.
   =================================================================== */

.slideshow-spacer { height: 20px; overflow: hidden; }

.wsite-slideshow {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* SIZING — the slide's own artwork sets the height.
   Every slideshow on the site ships slides of one uniform pixel size
   (checked: 800x593, 800x350, 800x800, 1350x650, 1350x450 — never mixed
   inside one slideshow), so a content-sized box shows each image whole
   at every viewport width: nothing cropped, nothing letterboxed.

   This replaces the old `aspect-ratio` box + `height:100%` chain +
   `object-fit`. That chain measured fine in Chrome but clipped the
   slideshows on iPhone — iOS Safari resolves a percentage height against
   an aspect-ratio-sized flex parent differently, so the track came out
   shorter than the image and `overflow:hidden` cut the rest off. It also
   cropped for real wherever the artwork's ratio differed from the box:
   the 16:9 slideshows (aha-result, real-user-review) carry 1350x450
   banners, so `object-fit:cover` was cutting ~40% off their width.

   data-ratio stays on the markup because it records the live site's
   wSlideshow config, but it no longer forces a box ratio — only width. */
.wsite-slideshow .slides-viewport {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.wsite-slideshow[data-ratio="3:2"] { max-width: 700px; }
.wsite-slideshow[data-ratio="auto"] { max-width: 830px; }   /* 800 + 2x15 padding */

.wsite-slideshow .slides {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .6s ease;
}
.wsite-slideshow .slides > li {
  flex: 0 0 100%;
  max-width: 100%;
}
/* Slides that link out (the AHA Serum card) wrap their image in an <a>. */
.wsite-slideshow .slides > li > a { display: block; }
.wsite-slideshow .slides img {
  display: block;
  width: 100%;
  height: auto;
}

/* transition:"fade" — slides stack on top of each other and cross-fade,
   so the flex track must not translate and must not lay them out in a
   row. The current slide stays in flow so it still sets the box height;
   the others are lifted out of flow on top of it. */
.wsite-slideshow.is-fade .slides {
  display: block;
  position: relative;
  transition: none;
}
.wsite-slideshow.is-fade .slides > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity .6s ease;
}
.wsite-slideshow.is-fade .slides > li.is-current {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
/* showControls:"true" — arrows only, nav:"none" means no dots. */
/* Weebly's classic slideshow controls (.wslide-button): a dark
   translucent slab with a white glyph, not a white circle. Arrows sit
   mid-height at the edges, Play/Pause in the top-left corner — the
   .wslide-overlay-left / -right / -top-left slots. All three fade in on
   hover, the way the live slideshow behaves. */
.wsite-slideshow .slide-nav,
.wsite-slideshow .slide-playpause {
  position: absolute;
  z-index: 2;
  border: 0;
  border-radius: 3px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease, background .2s ease;
}
.wsite-slideshow:hover .slide-nav,
.wsite-slideshow:hover .slide-playpause,
.wsite-slideshow .slide-nav:focus-visible,
.wsite-slideshow .slide-playpause:focus-visible { opacity: 1; }
.wsite-slideshow .slide-nav:hover,
.wsite-slideshow .slide-playpause:hover { background: rgba(0, 0, 0, .75); }

.wsite-slideshow .slide-nav {
  top: 50%;
  margin-top: -12px;
  width: 30px;
  height: 24px;
  font-size: 11px;
}
.wsite-slideshow .slide-prev { left: 26px; }
.wsite-slideshow .slide-next { right: 26px; }

.wsite-slideshow .slide-playpause {
  top: 15px;
  left: 26px;
  padding: 6px 9px;
  font-family: 'Karla', 'Prompt', sans-serif;
  font-size: 12px;
  font-weight: 700;
}
.wsite-slideshow .slide-playpause-icon {
  margin-left: 3px;
  font-size: 10px;
  letter-spacing: -1px;
}

@media (max-width: 600px) {
  .wsite-slideshow .slide-prev { left: 20px; }
  .wsite-slideshow .slide-next { right: 20px; }
  .wsite-slideshow .slide-playpause { left: 20px; top: 10px; padding: 5px 7px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .wsite-slideshow .slides { transition: none; }
}
/* ===================================================================
   FOOTER — now owned by assets/vendor/main_style.css (the real theme):
     .footer-wrap{background:#212121}
     .footer-wrap .wsite-footer{font-family:'Karla';padding:58px 0;color:#fff}
     .footer-wrap h2{margin-bottom:.888em;font-size:18px;color:#fff}
     .footer-wrap a{color:#fff;transition:opacity .3s} :hover{opacity:.75}
   The footer markup is the live site's own DOM (wsite-elements
   wsite-footer + <font size> tags + wsite-social icon font), so nothing
   needs to be re-declared here. Only the Thai fallback face is set,
   because Karla carries no Thai glyphs.
   =================================================================== */

.footer-wrap .wsite-footer { font-family: 'Karla', 'Prompt', sans-serif; }

/* Clone-only addition: the real theme has the footer's dark band start
   flush against whatever content sits above it, which reads as text
   "stuck" to the footer edge on pages whose last section is plain text
   (no image/spacer to buffer it). A small top margin gives every page
   breathing room before the dark band starts. */
.footer-wrap {
  margin-top: 40px;
}


/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .lightbox, .header-top, .logo img, header .header-top {
    transition: none !important;
  }
}

/* ===================================================================
   Thai fallback. main_style.css sets Karla on headings/nav and
   'Roboto Mono' on body — neither face has Thai glyphs, so a Thai
   fallback is appended everywhere the real theme names a font.
   =================================================================== */
body,
.paragraph, div.paragraph,
.footer-wrap .paragraph,
.footer-wrap div.paragraph {
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.wsite-menu-default,
.wsite-content-title {
  font-family: 'Karla', 'Prompt', sans-serif;
}

/* AHA article pages keep all written content aligned to the reading edge. */
.article-page #wsite-content .wsite-section-elements,
.article-page #wsite-content .paragraph,
.article-page #wsite-content .wsite-content-title {
  text-align: left;
}
.article-page #wsite-content .paragraph,
.article-page #wsite-content .wsite-content-title {
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
}
.article-page #wsite-content,
.article-page #wsite-content h1,
.article-page #wsite-content h2,
.article-page #wsite-content h3,
.article-page #wsite-content h4,
.article-page #wsite-content h5,
.article-page #wsite-content h6,
.article-page #wsite-content p,
.article-page #wsite-content li,
.article-page #wsite-content a,
.article-page #wsite-content span {
  font-family: 'Roboto Mono', monospace;
}
.article-page #wsite-content .wsite-image {
  text-align: center !important;
}
.article-page #wsite-content .wsite-image img {
  margin-left: auto;
  margin-right: auto;
}
.article-page #wsite-content .wsite-section-content {
  padding-bottom: 50px;
}
.article-hero-image {
  width: 100%;
  margin: 24px auto 0;
  background: #d2f3f6;
}
.article-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.article-title-below-hero {
  margin-top: 40px;
}

.local-product-video {
  display: block;
  width: min(100%, 900px);
  height: auto;
  margin: 10px auto;
  background: #000;
}

/* Product landing heroes follow the same 1100px grid as the header. */
.first-section-header-width > .wsite-section-content > .container {
  width: 100%;
  max-width: 1100px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
.first-section-header-width .wsite-section-elements > div:first-child .wsite-slideshow {
  max-width: none;
}
.first-section-header-width .wsite-section-elements > .local-video-wrap .local-product-video {
  width: 100%;
  max-width: none;
}

.tabbed-box-tab,
.accordion__title {
  cursor: pointer;
}
.tabbed-box-tab:focus-visible,
.accordion__title:focus-visible {
  outline: 2px solid #03abbc;
  outline-offset: 2px;
}

/* ===================================================================
   FOOTER SOCIAL ICONS — serve Weebly's "wsocial" icon font locally.

   assets/vendor/social-icons.css (the live site's own file) points the
   @font-face at //cdn2.editmysite.com/fonts/wSocial/. That CDN answers
   fine from here, but on the deployed host the font did not arrive and
   the four footer links rendered as tofu boxes — the glyphs are private
   use area codepoints (\e600-\e603), so with no font there is nothing to
   draw. Nothing in the clone should depend on Weebly's CDN staying
   reachable, so the font is vendored in assets/vendor/fonts/.

   This re-declares the SAME family name after social-icons.css has
   loaded; a later @font-face for an identical family wins, so every
   .wsite-social-item:before rule in the vendor file keeps working
   untouched. Do not edit social-icons.css itself — it is the live file.
   =================================================================== */
@font-face {
  font-family: "wsocial";
  src: url(vendor/fonts/wsocial.woff) format("woff"),
       url(vendor/fonts/wsocial.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}