/* ============================================
   PREMIUM MARKYN HEADER
============================================ */

:root{
  --gold:#b8860b;
  --gold-light:#d4a017;
  --gold-soft:#fff7df;

  --dark:#0d0d0d;
  --dark-2:#171717;

  --white:#ffffff;
  --gray:#6b7280;
}

/* ============================================
   HEADER WRAP
============================================ */

header{
  position:sticky;
  top:0;
  z-index:9999;

  background:
    linear-gradient(
      to right,
      rgba(255,255,255,.96),
      rgba(255,255,255,.98)
    );

  backdrop-filter:blur(14px);

  border-bottom:1px solid rgba(184,134,11,.12);

  box-shadow:
    0 10px 30px rgba(0,0,0,.05);
}

html,
body{
  font-family:'Barlow Condensed','IBM Plex Sans Thai',sans-serif;
  color:var(--brand-black);
}

/* MOBILE MENU */
.mobile-menu{
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

.mobile-menu.open{
  opacity:1;
  pointer-events:auto;
}

.mobile-menu-panel{
  transform:translateX(100%);
  transition:transform .3s ease;
  will-change:transform;
}

.mobile-menu.open .mobile-menu-panel{
  transform:translateX(0);
}

#mobileMenu{
  inset:0;
  height:100vh;
  height:100dvh;
}

/* ============================================
   PRODUCT CARD
   ============================================ */
.product-card {
  transition: all 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
}
.product-card:hover { transform: translateY(-4px); }
.product-card:hover .product-img-wrap { background: #ffffff; }
.product-card:hover .quick-btn { opacity: 1; transform: translateY(0); }
.quick-btn {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.product-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}

/* ============================================
   MEGA NUMBER — ใช้ clamp แทน breakpoint ซ้ำๆ
   ============================================ */
.mega-number {
  font-family: 'Bebas Neue', sans-serif;
  line-height: 0.85;
  font-size: clamp(72px, 22vw, 200px); /* fluid scaling ทุกขนาด */
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

/* Tablet: ≤ 768px */
@media (max-width: 768px) {
  body { font-size: 15px; }

  .hero-text-1, .hero-text-2, .hero-text-3, .hero-text-4 {
    animation-duration: 0.6s;
  }

  .product-scroll { gap: 12px !important; }
  .product-card {
    width: 180px !important;
    min-width: 160px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08); /* เพิ่ม depth */
  }
  .product-img-wrap { aspect-ratio: 1; }

  @media (max-height: 800px) {
    .hero-tool-container { opacity: 0.3; max-width: 200px; }
  }
}

/* Mobile: ≤ 640px */
@media (max-width: 640px) {
  body { font-size: 14px; }

  /* Fluid typography — ดีกว่า fixed px */
  h1 { font-size: clamp(1.4rem, 5vw, 1.75rem) !important; line-height: 1.2; }
  h2 { font-size: clamp(1.1rem, 4vw, 1.4rem) !important; }

  .hero-mega { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.2; }
  .display { font-size: 0.9em; }

.mobile-section {
  padding: 24px 16px;
}

  /* Hero height — ใช้ svh ป้องกันล้นหน้าจอ */
  .hero-slide { height: min(480px, 70svh) !important; }

  /* Buttons — touch target ที่ดีขึ้น */
  button:not(.icon-btn) {
    min-height: 48px !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Grid */
  .hero-slide .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { gap: 12px !important; }

.mobile-card {
  padding:12px;
  border-radius:12px;
}

  /* Product cards บน mobile */
  .product-card{
  flex:0 0 160px;
}

/* Small mobile: ≤ 400px */
@media (max-width: 400px) {
  .product-card { width: 140px !important; min-width: 140px !important; }
}

/* ============================================
   TOAST — รองรับ iPhone safe area
   ============================================ */
.toast {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  left: 16px; right: 16px;
  max-width: 100%;
  z-index: 100;
  transform: translateY(200%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.show { transform: translateY(0); }

/* ============================================
   HERO TOOL CONTAINER
   ============================================ */
.hero-tool-container {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-tool-container svg {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
}


 .banner {
    display: block;
    width: 100%;
    line-height: 0;
  }

  .banner img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}
button {
  touch-action: manipulation;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}




.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
  overflow-x:hidden;
  background:#fff;
}

body.menu-open {
  overflow: hidden;
}

/* กัน animation ดัน layout */
.animate-slideLeft {
  will-change: transform;
}

#mobileMenu{
  inset:0;
  height:100vh;
  height:100dvh;
}

/* ============================================
   INNER CONTAINER
============================================ */

.header-inner{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:space-between;

  min-height:84px;

  gap:24px;
}

/* ============================================
   LOGO
============================================ */

.logo-wrap{
  position:relative;

  display:flex;
  align-items:center;

  gap:14px;

  text-decoration:none;

  transition:.3s ease;
}

.logo-wrap:hover{
  transform:translateY(-1px);
}

/* Glow */
.logo-glow{
  position:absolute;
  inset:0;

  background:rgba(184,134,11,.16);

  filter:blur(28px);

  border-radius:999px;

  transform:scale(1.2);

  opacity:.9;
}

/* Logo box */
.logo-box{
  position:relative;

  background:white;

  border-radius:22px;

  padding:10px;

  border:1px solid rgba(184,134,11,.12);

  box-shadow:
    0 10px 25px rgba(184,134,11,.12),
    0 4px 14px rgba(0,0,0,.08);

  transition:.35s ease;
}

.logo-wrap:hover .logo-box{
  transform:scale(1.04);

  box-shadow:
    0 14px 35px rgba(184,134,11,.22),
    0 6px 18px rgba(0,0,0,.12);
}

/* Logo image */
.logo-img{
  height:54px;
  width:auto;

  object-fit:contain;

  display:block;
}

/* Text */
.logo-title{
  font-size:32px;
  font-weight:900;

  line-height:1;

  color:#111827;

  letter-spacing:.04em;

  transition:.3s ease;
}

.logo-wrap:hover .logo-title{
  color:var(--gold);
}

.logo-sub{
  margin-top:3px;

  font-size:11px;
  font-weight:700;

  letter-spacing:.38em;

  color:var(--gold);

  text-transform:uppercase;
}

/* ============================================
   DESKTOP MENU
============================================ */

.desktop-menu{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  flex:1;
}

/* Menu Link */
.menu-link{
  position:relative;

  padding:12px 18px;

  border-radius:16px;

  color:#374151;

  font-size:14px;
  font-weight:700;

  text-decoration:none;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;

  white-space:nowrap;
}

/* Hover */
.menu-link:hover{
  background:rgba(184,134,11,.08);

  color:var(--gold);

  transform:translateY(-1px);

  box-shadow:
    inset 0 0 0 1px rgba(184,134,11,.12),
    0 10px 20px rgba(184,134,11,.08);
}

/* Active */
.menu-link.active{
  background:
    linear-gradient(
      135deg,
      var(--dark),
      #1f2937
    );

  color:white;

  box-shadow:
    0 10px 24px rgba(0,0,0,.18);
}

/* Animated underline */
.menu-link::after{
  content:"";

  position:absolute;

  left:18px;
  right:18px;
  bottom:8px;

  height:2px;

  background:var(--gold);

  border-radius:999px;

  transform:scaleX(0);

  transition:.28s ease;
}

.menu-link:hover::after{
  transform:scaleX(1);
}

/* ============================================
   CALL BUTTON
============================================ */

.call-btn{
  display:flex;
  align-items:center;
  gap:10px;

  background:
    linear-gradient(
      135deg,
      var(--gold),
      var(--gold-light)
    );

  color:white;

  padding:12px 18px;

  border-radius:16px;

  font-size:14px;
  font-weight:800;

  text-decoration:none;

  box-shadow:
    0 12px 24px rgba(184,134,11,.20);

  transition:.3s ease;
}

.call-btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 18px 32px rgba(184,134,11,.28);
}

/* ============================================
   MOBILE BUTTON
============================================ */

.mobile-btn{
  width:48px;
  height:48px;

  border-radius:16px;

  background:white;

  border:1px solid rgba(184,134,11,.14);

  display:none;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 6px 18px rgba(0,0,0,.06);

  transition:.25s ease;
}

.mobile-btn:hover{
  border-color:var(--gold);

  color:var(--gold);

  transform:translateY(-1px);
}

/* ============================================
   MOBILE MENU
============================================ */

.mobile-menu{
  opacity:0;
  pointer-events:none;

  transition:opacity .3s ease;

  position:fixed;
  inset:0;

  z-index:99999;

  background:rgba(0,0,0,.45);

  backdrop-filter:blur(8px);
}

.mobile-menu.open{
  opacity:1;
  pointer-events:auto;
}

.mobile-menu-panel{
  position:absolute;

  top:0;
  right:0;

  width:320px;
  max-width:88vw;

  height:100%;

  background:white;

  padding:26px 22px;

  transform:translateX(100%);

  transition:transform .35s ease;

  box-shadow:
    -10px 0 40px rgba(0,0,0,.12);
}

.mobile-menu.open .mobile-menu-panel{
  transform:translateX(0);
}

/* Mobile links */
.mobile-link{
  display:flex;
  align-items:center;
  gap:14px;

  padding:14px 16px;

  border-radius:16px;

  color:#111827;

  font-weight:700;

  text-decoration:none;

  margin-bottom:10px;

  transition:.25s ease;
}

.mobile-link:hover{
  background:var(--gold-soft);

  color:var(--gold);
}

/* ============================================
   RESPONSIVE
============================================ */

@media(max-width:1100px){

  .desktop-menu{
    display:none;
  }

  .mobile-btn{
    display:flex;
  }

  .call-btn{
    display:none;
  }

  .logo-title{
    font-size:26px;
  }

  .logo-img{
    height:48px;
  }

  .header-inner{
    min-height:76px;
  }
}

@media(max-width:640px){

  .logo-title{
    font-size:22px;
  }

  .logo-sub{
    letter-spacing:.25em;
  }

  .logo-box{
    padding:8px;
    border-radius:18px;
  }

  .logo-img{
    height:42px;
  }
}