/* ═══════════════════════════════════════════════════════════
   COOKIEVERSE — Orange-Red Cinematic Layer
   โหลดทับ style.css — ธีมส้มแดง ตัวหนังสือขาว ไฮไลท์ทอง
   "Every Scroll = Every Bite"
   ═══════════════════════════════════════════════════════════ */

:root {
  /* orange-red universe */
  --cv-bg:       #D6590C;   /* clip orange (sampled from Home Slide 3) */
  --cv-bg2:      #BF4A08;   /* deeper clip orange */
  --cv-panel:    #8C1F06;   /* deep-red glass panels */
  --cv-cream:    #FFF8EF;   /* white text */
  --cv-cream-dim:#FFE3C8;
  --cv-gold:     #FFD35C;   /* golden highlight */
  --cv-gold-deep:#E8A81E;
  --cv-orange:   #FF7A18;
  --cv-orange2:  #FF9A3C;
  --cv-red:      #C4160C;   /* primary red */
  --cv-red-deep: #8F0F06;
  --cv-glow:     rgba(255,190,80,.55);

  /* remap existing tokens so most sections flip automatically */
  --bg-light:      var(--cv-bg);
  --bg-dark:       #240604;
  --text-on-light: var(--cv-cream);
  --red:           var(--cv-red);
  --red-deep:      var(--cv-red-deep);
  --red-soft:      rgba(255,211,92,.12);
}

/* ── page canvas: living orange-red gradient, never flat ── */
html, body { background: var(--cv-bg); color: var(--cv-cream); }  /* cursor: ../../cursor.css */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -3; pointer-events: none;
  background:
    radial-gradient(46% 40% at 18% 12%, rgba(255,211,92,.28), transparent 60%),
    radial-gradient(50% 46% at 82% 22%, rgba(255,122,24,.35), transparent 62%),
    radial-gradient(60% 50% at 50% 108%, rgba(150,58,8,.5), transparent 60%),
    linear-gradient(160deg, #EE7016 0%, #D6590C 45%, #BF4A08 100%);
  animation: cvDrift 26s ease-in-out infinite alternate;
}
@keyframes cvDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-2.5%,1.5%,0) scale(1.08); }
}
body { position: relative; }

/* warm vignette for cinematic depth */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(96,10,2,.5) 100%);
  mix-blend-mode: multiply;
}


/* ── LOADER → orange-red + gold ── */
#loader { background: radial-gradient(60% 60% at 50% 40%, #FF7A18, #B81207); }
.loader-brand {
  color: #fff;
  text-shadow: 0 0 26px rgba(255,211,92,.8), 0 4px 30px rgba(96,10,2,.5);
}
#loader-bar { background: rgba(255,255,255,.25); }
#loader-fill { background: linear-gradient(90deg, #fff, var(--cv-gold)); }
#loader-percent { color: #fff; }

/* ── HEADER → red glass ── */
.site-header {
  background: rgba(140,28,6,.9);
  border-bottom: 1px solid rgba(255,211,92,.25);
  box-shadow: 0 8px 30px rgba(96,10,2,.35);
}
.logo { color: #fff; text-shadow: 0 0 18px var(--cv-glow); }
.logo-dot { background: var(--cv-gold); box-shadow: 0 0 0 4px rgba(255,211,92,.25), 0 0 12px var(--cv-gold); }
.header-tag { color: var(--cv-cream-dim); border-left-color: rgba(255,211,92,.5); }
.nav-links a { color: #fff; }
.nav-links a:not(.nav-pill)::after { background: var(--cv-gold); }
.nav-pill {
  background: linear-gradient(135deg, var(--cv-red), var(--cv-red-deep));
  box-shadow: 0 8px 22px rgba(143,15,6,.5), inset 0 1px 0 rgba(255,255,255,.3);
}

/* ── HERO — cinematic "projection" of the white cookie clip ── */
.hero { background: radial-gradient(70% 60% at 50% 42%, #E86A18, var(--cv-bg) 70%); }
/* ขยับคลิป hero ลงมาใต้เมนู (เห็นหัวคลิปเต็ม ไม่โดนแถบเมนูบัง) */
.hero-vid { top: 110px !important; height: calc(100% - 110px) !important; }
/* feather the white-bg clip so its edges melt into the orange universe */
#canvas {
  -webkit-mask: radial-gradient(125% 82% at 50% 46%, #000 52%, rgba(0,0,0,.35) 80%, transparent 95%);
          mask: radial-gradient(125% 82% at 50% 46%, #000 52%, rgba(0,0,0,.35) 80%, transparent 95%);
}
/* warm colour-grade: เบาลงมาก — คลิปมีพื้นส้มอยู่แล้ว ไม่ต้องกลบขาว */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #FFE9CB 0%, #FFDCA8 55%, #FFC583 100%);
  mix-blend-mode: multiply; opacity: .28;
}
/* vignette to seat the projection into the page */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 44%, transparent 46%, rgba(200,58,10,.45) 82%, var(--cv-bg) 100%),
    linear-gradient(180deg, rgba(184,18,7,.35) 0%, transparent 22% 78%, var(--cv-bg) 100%);
}
.hero-heading {
  color: #fff;
  text-shadow: 0 2px 26px rgba(143,15,6,.55), 0 0 60px rgba(255,211,92,.3);
}
.hero-heading .accent { color: var(--cv-gold); text-shadow: 0 0 30px var(--cv-glow); }
.hero-tagline {
  background: linear-gradient(135deg, var(--cv-red), var(--cv-red-deep) 70%);
  box-shadow: 0 12px 30px rgba(143,15,6,.45), inset 0 1.5px 0 rgba(255,255,255,.3);
}
/* hero heading entrance — pure CSS auto-play, no JS (resting state = visible,
   so it can never get stuck invisible). `backwards` applies the start frame
   during the delay only. */
.hero-heading { animation: heroIn .85s cubic-bezier(.2,.9,.3,1.15) .28s backwards; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-heading { animation: none; } }

/* ── QUICK BAR ── */
#quick-bar {
  background: rgba(140,28,6,.92);
  border: 1.5px solid rgba(255,211,92,.35);
  box-shadow: 0 18px 44px rgba(96,10,2,.5);
}
.qb-btn {
  background: linear-gradient(180deg, #ffffff, #fff3ec);
  color: var(--cv-red, #D8281C);
  border: 1.5px solid rgba(196,36,26,.18);
  box-shadow: 0 10px 22px rgba(96,10,2,.28), inset 0 2px 0 rgba(255,255,255,.9);
}
.qb-btn:hover { box-shadow: 0 18px 34px rgba(96,10,2,.34), 0 0 22px var(--cv-glow), inset 0 2px 0 rgba(255,255,255,.9); }

/* ── STATS STRIP ── */
.stats-strip {
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(255,211,92,.22), transparent 60%),
    linear-gradient(150deg, #D8350C 0%, #B81E08 55%, #8F0F06 100%);
  border-top: 1px solid rgba(255,211,92,.3);
  border-bottom: 1px solid rgba(96,10,2,.4);
  box-shadow: inset 0 2px 0 rgba(255,211,92,.18);
}
.stats-strip b { color: var(--cv-gold); text-shadow: 0 0 24px var(--cv-glow); }
.stats-strip .stat > span { color: var(--cv-cream-dim); }

/* ── SECTION HEADS + text flips ── */
.products, .about-us, .news { background: transparent; }
.sec-eyebrow, .about-eyebrow { color: var(--cv-gold); }
.sec-head h2, .about-head h2 { color: #fff; }
.sec-head p, .about-head p { color: var(--cv-cream-dim); }
.about-head h2::after { background: linear-gradient(90deg, var(--cv-gold), #fff); }
.about-head .about-cta-line { color: var(--cv-cream); }
.about-head .about-cta-line a { color: var(--cv-gold); border-bottom-color: rgba(255,211,92,.5); }
.btn-line {
  color: #fff; border-color: rgba(255,248,239,.55);
}
.btn-line:hover { background: linear-gradient(135deg, var(--cv-red), var(--cv-red-deep)); color: #fff; box-shadow: 0 12px 26px rgba(143,15,6,.45), 0 0 22px var(--cv-glow); border-color: transparent; }

/* ── PRODUCT cards → red glass tiles ── */
.prod {
  background: linear-gradient(160deg, rgba(150,35,8,.55), rgba(96,15,4,.65));
  border: 1.5px solid rgba(255,211,92,.28);
  box-shadow: 0 6px 20px rgba(96,10,2,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.prod:hover {
  border-color: var(--cv-gold);
  box-shadow: 0 20px 44px rgba(96,10,2,.55), 0 0 28px var(--cv-glow), inset 0 1px 0 rgba(255,255,255,.12);
}
.prod b { color: #fff; }
.prod b em { background: linear-gradient(135deg, var(--cv-gold-deep), var(--cv-gold)); color: #5B1203; }
.prod small { color: var(--cv-cream-dim); opacity: .9; }

/* ── OEM → dark maroon contrast scene ── */
.oem {
  background:
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(255,122,24,.28), transparent 60%),
    radial-gradient(ellipse 50% 60% at 5% 90%, rgba(255,211,92,.14), transparent 60%),
    #2B0705;
}
.oem h2 em { color: var(--cv-gold); }
.oem-step b { color: var(--cv-gold); }
.oem-box { background: linear-gradient(135deg, rgba(255,122,24,.3), rgba(196,22,12,.16)); }
.oem-box:hover { background: linear-gradient(135deg, rgba(255,122,24,.45), rgba(196,22,12,.25)); box-shadow: 0 0 26px var(--cv-glow); }
.btn-white { background: linear-gradient(135deg, #fff, #FFE9C0); color: var(--cv-red-deep); }

/* ── NEWS cards ── */
.news { background:
  radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255,211,92,.14), transparent 70%); }
.news-card {
  background: linear-gradient(160deg, rgba(150,35,8,.5), rgba(96,15,4,.7));
  border: 1.5px solid rgba(255,211,92,.25);
  box-shadow: 0 6px 20px rgba(96,10,2,.4);
}
.news-card:hover { border-color: rgba(255,211,92,.6); box-shadow: 0 20px 44px rgba(96,10,2,.55), 0 0 26px var(--cv-glow); }
.news-ph { background: linear-gradient(135deg, rgba(255,211,92,.2), rgba(255,122,24,.08)); }
.news-tag { color: var(--cv-gold); background: rgba(255,211,92,.15); }
.news-body b { color: #fff; }
.news-body p { color: var(--cv-cream-dim); opacity: .9; }
.news-body small { color: rgba(255,227,200,.6); }

/* ── ABOUT media ── */
.about-media { box-shadow: 0 24px 54px rgba(96,10,2,.5); border: 1px solid rgba(255,211,92,.25); }
.about-card:hover .about-media { box-shadow: 0 34px 66px rgba(143,15,6,.4), 0 0 30px var(--cv-glow); }
.about-media video { background: var(--cv-bg2); }
.about-card h3 { color: #fff; }
.about-card h3::after { background: linear-gradient(90deg, var(--cv-gold), #fff); }
.about-card p { color: var(--cv-cream-dim); }

/* ── CERTS ── */
.certs {
  background: radial-gradient(ellipse 55% 45% at 50% 100%, rgba(143,15,6,.35), transparent 70%);
  border-top: 1px solid rgba(255,211,92,.2);
}
.certs-head h2 { color: #fff; }   /* ไม่มีออร่า/แสงฟุ้งรอบตัวอักษร */
.certs-head .cert-rosette { stroke: var(--cv-gold); }
.certs-text, .certs > .certs-text { color: var(--cv-cream-dim); }
.cert-name { color: #fff; }
.cert-desc { color: rgba(255,227,200,.75); }
.cert-seal { filter: drop-shadow(0 9px 20px rgba(96,10,2,.5)); }
/* the SVG seals use white/red — cream disc keeps them readable on orange */
.cert-badge .cert-seal { background: rgba(255,248,239,.97); border-radius: 50%; padding: 4px; }

/* ═══ PHASE 2 — HERO CINEMATIC LAYERS ═══ */

/* particle canvas: crumbs + gold sparkles + volumetric orbs */
#cv-particles {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}

/* chocolate melt dripping from the top edge */
.cv-drip {
  position: absolute; top: -1px; left: 0; width: 100%; height: 92px;
  z-index: 2; pointer-events: none; display: block;
  filter: drop-shadow(0 8px 14px rgba(96,10,2,.45));
  transform-origin: top center;
}

/* floating product objects — outer div = GSAP (mouse+scroll), inner img = CSS bob */
.cv-obj {
  position: absolute; z-index: 2; pointer-events: none;
  will-change: transform;
}
.cv-obj img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 18px 30px rgba(96,10,2,.55)) drop-shadow(0 0 22px rgba(255,211,92,.2));
  animation: cvBob var(--bob,7s) ease-in-out infinite alternate;
  transform: rotate(var(--rot,0deg));
}
@keyframes cvBob {
  0%   { transform: translateY(-10px) rotate(var(--rot,0deg)); }
  100% { transform: translateY(12px)  rotate(calc(var(--rot,0deg) + var(--sway,5deg))); }
}
@media (max-width: 820px) { .cv-obj { display: none; } }

/* pulsing golden aura behind the hero copy */
.hero-copy::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 42%; width: 130%; height: 190%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,211,92,.35), rgba(255,122,24,.16) 45%, transparent 72%);
  animation: cvAura 4.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes cvAura {
  0%   { opacity: .55; transform: translate(-50%,-50%) scale(.92); }
  100% { opacity: 1;   transform: translate(-50%,-50%) scale(1.1); }
}

/* ═══ PHASE 3 — FLAVOR TUNNEL ═══ */

#tunnel { position: relative; height: 100vh; overflow: hidden; }
.tunnel-viewport {
  position: absolute; inset: 0;
  perspective: 900px; perspective-origin: 50% 46%;
  color: #FFC94D;                       /* current flavor — JS updates, transitions smoothly */
  transition: color .8s ease;
}

/* flavor atmosphere: two layers crossfaded by JS */
.tunnel-bg { position: absolute; inset: 0; z-index: 0; }
.tunnel-bg i {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(62% 58% at 50% 46%, var(--fc, #FFC94D) 0%, transparent 72%);
  filter: opacity(.32) saturate(1.15);
  transition: opacity 1s ease;
}
.tunnel-bg i.on { opacity: 1; }

/* decorative rings flying past (pure CSS, GPU cheap) */
.tunnel-rings { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tunnel-rings i {
  position: absolute; left: 50%; top: 46%;
  width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin;
  border: 2px solid currentColor; border-radius: 50%;
  opacity: 0;
  animation: cvRing 5.5s linear infinite;
}
.tunnel-rings i:nth-child(2) { animation-delay: 1.4s; }
.tunnel-rings i:nth-child(3) { animation-delay: 2.8s; }
.tunnel-rings i:nth-child(4) { animation-delay: 4.2s; }
@keyframes cvRing {
  0%   { transform: scale(.06); opacity: 0; }
  18%  { opacity: .5; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* the gates */
.tunnel-scene { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; }
.gate {
  position: absolute; left: 50%; top: 46%;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: min(420px, 78vw); text-align: center;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}
.gate-ring {
  position: absolute; left: 50%; top: 42%;
  width: min(320px, 58vw); height: min(320px, 58vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 0 46px rgba(255,255,255,.7),
              0 0 100px rgba(255,255,255,.38),
              inset 0 0 50px rgba(255,255,255,.3);
  background: radial-gradient(circle, rgba(255,255,255,.24), transparent 66%);
}
.gate-img {
  position: relative; z-index: 1;
  height: min(260px, 46vw); width: auto;
  filter: drop-shadow(0 22px 34px rgba(96,10,2,.5)) drop-shadow(0 0 30px rgba(255,255,255,.6));
  animation: cvBob 6.5s ease-in-out infinite alternate;
}
/* small emoji icon removed from gates for a cleaner product look */
.gate-ic { display: none; }
.gate b {
  position: relative; z-index: 1; margin-top: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.22;
  color: #fff; text-shadow: 0 2px 18px rgba(96,10,2,.6), 0 0 30px color-mix(in srgb, var(--fc) 55%, transparent);
}
.gate small { position: relative; z-index: 1; font-size: clamp(1.05rem, 1.9vw, 1.45rem); font-weight: 600; color: #FFEAD4; text-shadow: 0 2px 12px rgba(96,10,2,.55); }
.gate-new {
  position: relative; z-index: 1;
  font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: .66rem;
  letter-spacing: .18em; color: #5B1203;
  background: linear-gradient(135deg, var(--cv-gold), #fff);
  padding: 3px 12px; border-radius: 20px; margin-bottom: 2px;
  box-shadow: 0 4px 12px rgba(96,10,2,.4);
}

/* progress UI */
.tunnel-ui {
  position: absolute; left: 50%; bottom: 56px; z-index: 5;
  transform: translateX(-50%);
  width: min(420px, 80vw); text-align: center;
}
.tunnel-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.tunnel-label b { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #fff; text-shadow: 0 0 18px currentColor; }
.tunnel-label span { font-size: .78rem; font-weight: 600; letter-spacing: .2em; color: var(--cv-cream-dim); }
.tunnel-bar { height: 5px; border-radius: 5px; background: rgba(255,248,239,.22); overflow: hidden; }
.tunnel-bar i { display: block; width: 0%; height: 100%; border-radius: 5px; background: linear-gradient(90deg, currentColor, #fff); transition: width .2s linear; }
.tunnel-hint {
  position: absolute; left: 50%; bottom: 22px; z-index: 5; transform: translateX(-50%);
  font-size: .74rem; font-weight: 500; letter-spacing: .1em; color: var(--cv-cream-dim);
  animation: cvHint 2.2s ease-in-out infinite;
}
@keyframes cvHint { 0%,100% { opacity: .5; transform: translateX(-50%) translateY(0); } 50% { opacity: 1; transform: translateX(-50%) translateY(5px); } }

.products-cta { padding: var(--sec-pt) 6vw var(--sec-pb); }

/* ── fallback: touch / narrow / reduced-motion → horizontal snap strip ── */
#tunnel.tunnel-fallback { height: auto; overflow: visible; }
.tunnel-fallback .tunnel-viewport { position: relative; perspective: none; }
.tunnel-fallback .tunnel-rings, .tunnel-fallback .tunnel-hint { display: none; }
.tunnel-fallback .tunnel-bg { display: none; }
.tunnel-fallback .tunnel-scene {
  position: relative; display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 26px 6vw 34px;
  -webkit-overflow-scrolling: touch;
}
.tunnel-fallback .gate {
  position: relative; left: auto; top: auto;
  transform: none !important; opacity: 1 !important; visibility: visible !important;
  pointer-events: auto !important;
  flex: 0 0 min(300px, 76vw); scroll-snap-align: center;
  padding: 30px 14px 24px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(150,35,8,.55), rgba(96,15,4,.65));
  border: 1.5px solid color-mix(in srgb, var(--fc) 55%, transparent);
}
.tunnel-fallback .gate-ring { display: none; }
.tunnel-fallback .gate-img { height: 150px; }
.tunnel-fallback .tunnel-ui { position: relative; left: auto; bottom: auto; transform: none; margin: 0 auto; padding-bottom: 10px; }

/* ── REVEAL (blur removed for smoothness) ── */
.rv { transform: translateY(32px); }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   NAV REDESIGN — orange bar · วีฟู้ดส์ logo · EN menu · dropdown · search
   (สอดคล้องกับ #g-nav ของหน้าอื่น)
   ═══════════════════════════════════════════════════════════ */
.site-header {
  background: #E45F06 !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.16) !important;
  padding: 0 40px !important;
}
.site-header nav { height: 72px; gap: 20px; }
.logo { color: #fff !important; text-shadow: 0 2px 8px rgba(0,0,0,.18) !important; }
.nav-logo { font-family:'Sarabun',sans-serif; font-size:1.7rem; font-weight:800; font-style:italic; color:#fff; letter-spacing:-.02em; line-height:1; }
.nav-logo-badge { display:inline-block; vertical-align:super; margin-left:5px; background:#E51A1D; color:#fff; font-style:normal; font-size:.5rem; font-weight:800; letter-spacing:.08em; padding:2px 6px; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.22); }
.logo .nav-logo-img { height:46px; width:auto; display:block; }
@media (max-width:900px){ .logo .nav-logo-img { height:40px; } }

.nav-links { gap: 4px !important; }
.nav-links > a, .nav-parent {
  display:inline-flex; align-items:center; gap:5px;
  padding:9px 12px; border-radius:9px;
  font-family:'Sarabun',sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
  color:#fff !important; opacity:1 !important; transition:background .25s;
}
.nav-links > a:not(.nav-pill)::after, .nav-parent::after { display:none !important; }
.nav-links > a:hover, .nav-parent:hover { background:rgba(255,255,255,.18); }

.nav-item { position:relative; display:flex; align-items:center; }
.nav-caret { font-size:.55rem; opacity:.75; transition:transform .3s ease; }
.nav-item:hover .nav-caret { transform:rotate(180deg); }
.nav-dropdown {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(12px);
  background:var(--cv-red-deep,#8F0F06); border:1px solid rgba(255,255,255,.16); border-radius:16px;
  padding:10px; margin-top:10px; box-shadow:0 20px 60px rgba(0,0,0,.4);
  display:grid; grid-template-columns:1fr; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s ease, transform .26s cubic-bezier(.23,1,.32,1); z-index:101;
}
.nav-dropdown.mega { grid-template-columns:1fr 1fr; min-width:440px; }
.nav-dropdown.mega-brands { grid-template-columns:1fr 1fr 1fr; min-width:420px; }
.nav-dropdown::before { content:''; position:absolute; top:-16px; left:0; right:0; height:18px; }
.nav-item:hover .nav-dropdown { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-dropdown a {
  display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:10px;
  font-family:'Sarabun',sans-serif; font-size:.82rem; font-weight:500; text-transform:none;
  color:#fff !important; opacity:1 !important; white-space:nowrap;
  transition:background .18s, transform .18s;
}
.nav-dropdown a::after { display:none !important; }
.nav-dropdown a:hover { background:rgba(255,255,255,.16); transform:translateX(3px); }

.nav-search { display:flex; align-items:center; gap:4px; flex-shrink:0; background:#fff; border-radius:50px; padding:5px 6px 5px 16px; box-shadow:0 3px 14px rgba(0,0,0,.16); }
.nav-search input { border:none; outline:none; background:transparent; font-family:'Sarabun',sans-serif; font-size:.82rem; color:#3a1800; width:130px; }
.nav-search input::placeholder { color:rgba(58,24,0,.45); }
.nav-search button { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:none; border-radius:50%; background:#F07800; color:#fff; cursor:pointer; flex-shrink:0; transition:transform .2s; }
.nav-search button:hover { transform:scale(1.06); }

@media (max-width:1080px){ .nav-links > a, .nav-parent { font-size:.72rem; padding:8px 8px; } .nav-search input { width:88px; } .site-header{ padding:0 20px !important; } }
@media (max-width:900px){ .site-header{ padding:0 16px !important; } .nav-links, .nav-search { display:none !important; } }

/* ══════════ OEM JOURNEY · horizontal scroll-scrub (ย้ายมาจากหน้า OEM) ══════════ */
.journey{position:relative;background:linear-gradient(180deg,#FFEAD6 0%,#FFEFE0 100%);}
.journey-head{text-align:center;padding:var(--sec-pt) 22px 6px;position:relative;z-index:2;}
/* self-contained heading styles (home ไม่มี .sec-eye/.sec-title/.sec-desc กลาง) */
.journey-head .sec-eye{font-family:'Sarabun',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#D6590C;display:flex;align-items:center;gap:9px;justify-content:center;margin-bottom:10px;}
.journey-head .sec-eye::before,.journey-head .sec-eye::after{content:'';flex:0 0 22px;height:1px;background:#D6590C;opacity:.5;}
.journey-head .sec-title{font-family:'Sarabun',sans-serif;font-size:clamp(1.8rem,4.5vw,3rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.24;color:#2B1B16;margin-bottom:12px;}
.journey-head .sec-desc{max-width:600px;margin:0 auto;color:rgba(43,27,22,.66);line-height:1.8;font-size:.98rem;font-weight:400;}
/* tall spacer drives the scroll; inner viewport is pinned */
.journey-scroll{position:relative;height:380vh;}
.journey-vp{
  position:sticky;top:0;height:100vh;overflow:hidden;background:#FFFBEF;
}
/* ══ TAKEBOOST-STYLE HORIZONTAL PANELS ══ */
.journey-track{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform;}

/* each step = one full-bleed bold colour panel */
.jp{position:relative;flex:0 0 100vw;width:100vw;height:100%;overflow:hidden;
  display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:2vw;
  padding:8vh 7vw 20vh;background:var(--pbg);color:var(--ink);}
.jp.p1{--pbg:#FFC21A;--ink:#3A2600;--disc:#FFFBEF;--acc2:#E8172B;}
.jp.p2{--pbg:#FF8A1F;--ink:#4A2100;--disc:#FFF3E0;--acc2:#7A2408;}
.jp.p3{--pbg:#E8172B;--ink:#FFFFFF;--disc:#FFE9EC;--acc2:#FFC21A;}
.jp.p4{--pbg:linear-gradient(140deg,#FF9A1F 0%,#E8172B 58%,#B0101F 100%);--ink:#FFFFFF;--disc:#FFFFFF;--acc2:#FFD86A;}

/* giant outline number watermark */
.jp-wm{position:absolute;top:-2vh;right:2vw;font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:46vh;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.24);
  z-index:0;pointer-events:none;user-select:none;}
.jp.p1 .jp-wm,.jp.p2 .jp-wm{-webkit-text-stroke-color:rgba(58,38,0,.13);}
/* soft depth blobs */
.jp::before{content:'';position:absolute;top:-16%;left:-8%;width:46vh;height:46vh;border-radius:50%;
  background:rgba(255,255,255,.14);pointer-events:none;z-index:0;}
.jp::after{content:'';position:absolute;bottom:-20%;right:12%;width:36vh;height:36vh;border-radius:50%;
  background:rgba(0,0,0,.06);pointer-events:none;z-index:0;}

/* text column */
.jp-txt{position:relative;z-index:2;max-width:580px;
  opacity:0;transform:translateY(42px);transition:opacity .7s ease .05s,transform .8s cubic-bezier(.23,1,.32,1) .05s;}
.jp.in .jp-txt{opacity:1;transform:none;}
.jp-step{display:inline-flex;align-items:center;gap:9px;font-family:'Baloo 2',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;padding:8px 18px;border-radius:40px;
  background:var(--ink);color:var(--pbg);margin-bottom:20px;}
.jp.p4 .jp-step,.jp.p3 .jp-step{background:#fff;color:#E8172B;}
.jp-h{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(2.6rem,7vw,5.6rem);
  /* 0.9 made the line box shorter than the glyphs — Thai tone marks were
     clipped at the top and collided with the line below */
  line-height:1.22;letter-spacing:-.01em;margin-bottom:18px;}
.jp-h em{font-style:normal;color:transparent;-webkit-text-stroke:2.5px var(--ink);}
.jp-h .pop{color:var(--acc2);}
.jp-p{font-family:'Baloo 2',sans-serif;font-weight:500;font-size:clamp(1rem,1.5vw,1.2rem);
  line-height:1.5;opacity:.94;max-width:470px;margin-bottom:24px;}
.jp-tags{display:flex;flex-wrap:wrap;gap:10px;}
.jp-tag{font-family:'Baloo 2',sans-serif;font-weight:600;font-size:.9rem;padding:9px 18px;border-radius:40px;
  background:rgba(255,255,255,.92);color:#3A2600;box-shadow:0 5px 0 rgba(0,0,0,.14);}
.jp.p1 .jp-tag,.jp.p2 .jp-tag{background:transparent;color:var(--ink);box-shadow:none;border:2px solid rgba(58,38,0,.22);}

/* visual column: sticker disc + product */
.jp-visual{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:100%;
  opacity:0;transform:scale(.78);transition:opacity .8s cubic-bezier(.23,1,.32,1) .12s,transform .9s cubic-bezier(.23,1,.32,1) .12s;}
.jp.in .jp-visual{opacity:1;transform:none;}
.jp-disc{position:relative;width:min(48vh,440px);aspect-ratio:1;border-radius:50%;background:var(--disc);
  box-shadow:0 44px 84px -22px rgba(0,0,0,.4),inset 0 -16px 44px rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;}
.jp-disc::before{content:'';position:absolute;inset:-18px;border-radius:50%;
  border:3px dashed rgba(255,255,255,.65);animation:spinRing 24s linear infinite;}
.jp.p1 .jp-disc::before,.jp.p2 .jp-disc::before{border-color:rgba(58,38,0,.22);}
@keyframes spinRing{to{transform:rotate(360deg);}}
/* รูปสินค้ากลางจาน — ทุกขั้นตอนใช้ขนาดเดียวกันหมด (78% ของจาน) */
.jp-prod{position:relative;z-index:2;width:78%;height:78%;object-fit:contain;
  filter:drop-shadow(0 26px 28px rgba(0,0,0,.32));animation:bob 4.2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-16px) rotate(2deg);}}
/* pulsing sticker badge */
.jp-badge{position:absolute;top:-5%;right:-5%;width:23%;aspect-ratio:1;border-radius:50%;
  background:var(--acc2);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.95rem;line-height:1.25;
  box-shadow:0 10px 24px rgba(0,0,0,.3);transform:rotate(-12deg);z-index:3;}
.jp.p1 .jp-badge,.jp.p3 .jp-badge{color:#fff;}
.jp.p4 .jp-badge{background:#E8172B;color:#fff;}
.jp.p4 .jp-badge::before{border-color:#E8172B;}
.jp-badge::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc2);
  animation:pulsate 2s ease-out infinite;}
@keyframes pulsate{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.55);opacity:0;}}

/* satellite coins around the disc */
.jp-coin{position:absolute;border-radius:50%;overflow:hidden;background:#fff;border:5px solid #fff;
  box-shadow:0 14px 28px rgba(0,0,0,.32);animation:bob 4s ease-in-out infinite;z-index:3;}
/* every photo in these folders is a cut-out on transparency, so the coins let
   the whole object sit on a plate instead of cropping it to fill the circle.
   tall pack shots lose most of the circle to empty margin at a wider padding —
   contain fits the longest side, so the padding has to stay tight */
.jp-coin img{width:88%;height:88%;margin:6%;object-fit:contain;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.24));}
/* เหรียญรอบจาน — ห้าใบเรียงเป็นวง เว้นมุมขวาบนไว้ให้ badge
   วางด้วย left/top ล้วน จะได้คุมระยะห่างรอบวงได้เท่ากันจริง */
.jp-coin.k1{width:29%;height:29%;left:-10%;top:9%;animation-delay:-1.8s;}
.jp-coin.k2{width:26%;height:26%;left:-12%;top:54%;animation-delay:-1.3s;}
.jp-coin.k3{width:24%;height:24%;left:21%;top:89%;animation-delay:-2.2s;}
.jp-coin.k4{width:27%;height:27%;left:63%;top:84%;animation-delay:-.7s;}
.jp-coin.k5{width:25%;height:25%;left:88%;top:50%;animation-delay:-2.7s;}
.jp-coin.k6{width:22%;height:22%;left:37%;top:-6%;animation-delay:-2s;}

/* finish panel extras */
.jp-fin-list{list-style:none;display:grid;gap:11px;margin:0 0 26px;}
.jp-fin-list li{display:flex;gap:12px;align-items:center;font-family:'Baloo 2',sans-serif;font-weight:500;font-size:1.05rem;}
.jp-fin-list .ck{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#fff;color:#E8172B;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;}
.jp-btns{display:flex;gap:12px;flex-wrap:wrap;}
.jp-btn{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.02rem;padding:15px 32px;border-radius:44px;
  text-decoration:none;transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s;box-shadow:0 6px 0 rgba(0,0,0,.2);}
.jp-btn.solid{background:#fff;color:#E8172B;}
.jp-btn.solid:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(0,0,0,.2);}
.jp-btn.ghost{background:rgba(255,255,255,.16);color:#fff;border:2px solid rgba(255,255,255,.75);box-shadow:none;}
.jp-btn.ghost:hover{transform:translateY(-3px);background:rgba(255,255,255,.26);}

/* ══ marquee strip (top of vp) ══ */
.jm{position:absolute;top:0;left:0;right:0;height:46px;background:#1A0604;overflow:hidden;z-index:8;
  display:flex;align-items:center;pointer-events:none;}
.jm-row{display:flex;white-space:nowrap;animation:marquee 24s linear infinite;}
.jm-row span{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;color:#FFC21A;padding:0 20px;}
.jm-row span b{color:#fff;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ══ bottom sidewalk: walking mascot + progress ══ */
.journey-ground{position:absolute;left:0;right:0;bottom:0;height:132px;z-index:7;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,251,239,0),#FFFBEF 44%);}
/* พื้น = ถนน: แอสฟัลต์เทาเข้ม + เส้นแบ่งเลนประสีเหลืองตรงกลาง */
.ground-line{position:absolute;left:5vw;right:5vw;top:59px;height:18px;border-radius:3px;
  background:
    repeating-linear-gradient(90deg,#F7C948 0 30px,rgba(0,0,0,0) 30px 62px),
    linear-gradient(180deg,#514F54,#343237);
  background-size:100% 3px,100% 100%;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 7px 16px rgba(0,0,0,.2);}
.ground-line::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);
  border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid #F7C948;}
.ground-progress{position:absolute;left:5vw;top:59px;height:18px;width:0;border-radius:3px;
  background:linear-gradient(90deg,rgba(247,201,72,0),rgba(247,201,72,.28));transition:width .1s linear;}
.mascot{position:absolute;left:50%;top:66px;transform:translate(-50%,-100%);width:150px;cursor:pointer;pointer-events:auto;z-index:9;}
.mascot .mascot-float{animation:mascotBob .5s ease-in-out infinite alternate;}
@keyframes mascotBob{0%{transform:translateY(0) rotate(-2deg);}100%{transform:translateY(-6px) rotate(2deg);}}
.mascot .m-shadow{width:110px;height:14px;margin:2px auto 0;border-radius:50%;
  background:radial-gradient(ellipse,rgba(58,38,0,.28),transparent 70%);animation:mShadow .5s ease-in-out infinite alternate;}
@keyframes mShadow{0%{transform:scaleX(1);opacity:.7;}100%{transform:scaleX(.8);opacity:.45;}}
/* Anchored to the TOP of the mascot, not a fixed pixel offset. The flat SVG
   fallback is 141px tall but the 3D cookie that replaces it (mascot3d.js) is
   190px — so the old hardcoded bottom:185px was tuned for the SVG and the
   bubble sank 18px into the cookie's head as soon as the model loaded.
   calc(100% + 20px) clears whichever mascot is on screen, and leaves room for
   the 9px tail plus the 6px bob of .mascot-float. */
.m-bubble{position:absolute;bottom:calc(100% + 20px);left:50%;transform:translateX(-50%) scale(.6);transform-origin:bottom center;
  min-width:180px;max-width:264px;padding:11px 16px;border-radius:16px;background:#fff;border:2px solid #1A0604;
  box-shadow:0 6px 0 rgba(26,6,4,.16);font-family:'Baloo 2',sans-serif;font-weight:500;font-size:.86rem;line-height:1.5;
  color:#3A2600;text-align:center;opacity:0;pointer-events:none;transition:.3s cubic-bezier(.23,1,.32,1);}
.m-bubble.show{opacity:1;transform:translateX(-50%) scale(1);}
.m-bubble strong{color:#E8172B;}
.m-bubble::after{content:'';position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);
  border:9px solid transparent;border-top-color:#1A0604;border-bottom:0;}

/* dots + hint */
.journey-dots{position:absolute;top:60px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:9;}
.jdot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid rgba(0,0,0,.14);transition:.35s cubic-bezier(.23,1,.32,1);}
.jdot.on{background:#1A0604;border-color:#1A0604;transform:scale(1.45);}
.scroll-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:9;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:#3A2600;display:flex;align-items:center;gap:8px;transition:opacity .4s;}
.scroll-hint .arrw{display:inline-block;animation:hintBob 1.6s ease-in-out infinite;}
@keyframes hintBob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* mobile fallback: stack the panels */
@media(max-width:760px){
  .journey-scroll{height:auto;}
  .journey-vp{position:static;height:auto;overflow:visible;}
  .journey-track{position:static;flex-direction:column;transform:none!important;height:auto;}
  .jp{width:100%;flex-basis:auto;min-height:auto;grid-template-columns:1fr;gap:26px;padding:60px 24px;text-align:center;}
  .jp-txt,.jp-visual{opacity:1!important;transform:none!important;}
  .jp-txt{max-width:none;}
  .jp-step,.jp-tags,.jp-btns,.jp-fin-list li{justify-content:center;}
  .jp-fin-list li{justify-content:flex-start;text-align:left;}
  .jp-visual{height:auto;}
  .jp-disc{width:min(66vw,320px);}
  .jp-wm{font-size:30vh;top:auto;bottom:2%;}
  .journey-ground,.journey-dots,.scroll-hint,.jm{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .jp-prod,.jp-coin,.jp-disc::before,.jp-badge::before,.mascot .mascot-float,.scroll-hint .arrw,.jm-row{animation:none!important;}
}

/* ═══ PRODUCT PREVIEW (หน้าแรก · สินค้าของเรา) — ตัวอย่างแพ็คสินค้าจริงจากหน้า Brands ═══
   รูปแพ็คสินค้าเป็นแนวตั้ง (~358×620 ≈ 0.58) เวทีรูปจึงเป็นสัดส่วนแนวตั้งด้วย
   ไม่ใช้จัตุรัส — ไม่งั้นรูปถูกบีบตามความสูงและเหลือพื้นที่ว่างซ้าย-ขวาเยอะ */
.prod-preview{
  max-width:1160px; margin:38px auto 4px; padding:0 4vw;
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px;
}
/* 9 หมวดหมู่ → 5+4 จัดกลาง (desktop) · 3×3 (tablet/mobile) */
.prod-preview > .pp-card{ flex:0 0 calc((100% - 80px)/5); }
.pp-card{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-decoration:none; padding:14px 12px 16px; border-radius:20px;
  background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.65);
  box-shadow:0 10px 30px rgba(120,20,10,.12);
  transition:box-shadow .4s ease;   /* ไม่ transform ตัวการ์ด → hit area นิ่ง ไม่สั่น */
}
.pp-card:hover{ box-shadow:0 22px 46px rgba(120,20,10,.22); }
.pp-stage{
  position:relative; width:100%; aspect-ratio:3/4;
  border-radius:14px;
  background:radial-gradient(ellipse at 50% 66%, rgba(232,106,24,.12), transparent 70%);
}
/* absolute + object-fit:contain → กรอบสูงตามสัดส่วนเป๊ะ รูปไม่ดันกล่องให้ยืด
   และรูปแนวตั้งจะเต็มความสูงกรอบพอดี ไม่เหลือที่ว่างเป็นแถบ */
.pp-stage img{
  position:absolute; left:0; top:2%; width:100%; height:96%;
  object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.16));
  transition:transform .45s cubic-bezier(.23,1,.32,1);
}
.pp-card:hover .pp-stage img{ transform:translateY(-6px) scale(1.05); }
/* หมวดหมู่ใช้รูปตัวขนมจริง (สี่เหลี่ยมจัตุรัส) ไม่ใช่รูปแพ็ค */
.pp-cats .pp-stage{ aspect-ratio:1/1; }
.pp-cats .pp-stage img{ top:4%; height:92%; }
.pp-name{ font-size:.94rem; font-weight:700; color:#7A2408; text-align:center; line-height:1.35; }
@media(max-width:900px){ .prod-preview > .pp-card{ flex-basis:calc((100% - 40px)/3); } }
@media(max-width:560px){
  .prod-preview{ gap:10px; padding:0; }
  .prod-preview > .pp-card{ flex-basis:calc((100% - 20px)/3); padding:8px 6px 10px; gap:8px; border-radius:14px; }
  .pp-name{ font-size:.78rem; }
}

/* สินค้าของเรา · แบนเนอร์รวมสินค้า คลิกไปหน้าสินค้า
   รูปไม่มีตัวอักษร — หัวข้อเป็น text จริงเพื่อให้สลับภาษาได้ (i18n.js)
   จอคอม: text อยู่แถบสีส้มเหนือรูป (ขอบบนรูปเฟดกลืน) · มือถือ: text ซ้อนบนพื้นที่ว่างด้านบนของรูปแนวตั้ง */
.pp-banner{
  position:relative; display:block; max-width:1280px; margin:0 auto; border-radius:28px; overflow:hidden;
  background:#FF7200; color:#fff; text-decoration:none;
  box-shadow:0 18px 44px rgba(150,40,5,.22);
  transition:transform .45s cubic-bezier(.23,1,.32,1), box-shadow .45s;
}
.pp-banner-text{ position:relative; z-index:1; text-align:center; padding:clamp(26px,3.4vw,44px) 24px 0; }
.pp-banner-text h2{
  font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,5.2vw,4.4rem);
  line-height:1.15; letter-spacing:-.01em; color:#fff; margin:0;
  text-shadow:0 3px 18px rgba(150,40,5,.28);
}
.pp-banner-text p{
  margin:.35em auto 0; max-width:62ch; font-weight:600; font-size:clamp(.95rem,1.5vw,1.3rem);
  line-height:1.45; color:#fff; text-shadow:0 2px 10px rgba(150,40,5,.3);
}
.pp-banner img{
  display:block; width:100%; height:auto; margin-top:-3%;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 9%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 9%);
}
.pp-banner:hover{ transform:translateY(-6px); box-shadow:0 26px 56px rgba(150,40,5,.3); }
.pp-banner:focus-visible{ outline:3px solid #FFD35C; outline-offset:4px; }
@media(max-width:640px){
  .pp-banner{ border-radius:18px; }
  .pp-banner-text{ position:absolute; inset:0 0 auto; padding:5% 16px 0; }
  .pp-banner-text h2{ font-size:clamp(1.8rem,8.4vw,2.5rem); }
  .pp-banner-text p{ margin-top:.2em; font-size:clamp(.74rem,3.2vw,.9rem); line-height:1.35; max-width:38ch; }
  .pp-banner img{ margin-top:0; -webkit-mask-image:none; mask-image:none; }
}

/* ═══ ลูกค้าของเรา · โลโก้แบรนด์เลื่อนวน (ย้ายมาจากหน้า OEM) ═══ */
.cust-sec{ padding:var(--sec-pt) 0 var(--sec-pb); overflow:hidden; }
.cust-sec .sec-head{ margin-bottom:26px; }
.cust-sec .sec-head h2{ color:#fff; }   /* ไม่มีออร่า เช่นเดียวกับหัวข้ออื่น */
.cust-sec .sec-head p{ color:var(--cv-cream-dim); }
.logo-marquee{
  position:relative; width:100%;
  display:flex; flex-direction:column; gap:22px;
}
.logo-row{
  position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logo-track{ display:flex; align-items:center; gap:24px; width:max-content; animation:logoScroll 46s linear infinite; }
.logo-row--rev .logo-track{ animation-direction:reverse; }
.logo-marquee:hover .logo-track{ animation-play-state:paused; }
.logo-item{
  flex:0 0 auto; width:172px; height:100px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(26,6,8,.07); border-radius:14px; padding:14px 18px;
  box-shadow:0 8px 22px rgba(96,10,2,.22);
  transition:transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s;
}
.logo-item img{ max-width:100%; max-height:100%; object-fit:contain; }
.logo-item:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(96,10,2,.32); }
@keyframes logoScroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media(max-width:560px){ .logo-item{ width:138px; height:82px; padding:12px 15px; } .logo-track{ gap:16px; } }
@media(prefers-reduced-motion:reduce){
  .logo-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; }
}

/* ═══ HERO 3D TEXT — "THE VARIETY WORLD OF BISCUITS, COOKIES, AND SNACKS" ═══ */
.hero-3d{
  position:absolute; left:50%; top:18%; transform:translateX(-50%);
  z-index:4; width:min(1120px,92vw); text-align:center; pointer-events:none;
}
.hero-3d-title{
  /* line-height เผื่อที่ให้บรรทัดที่ 2 ห่างจากบรรทัดแรกขึ้น (และกันวรรณยุกต์ไทยชนกัน) */
  margin:0; font-family:var(--font-display,'Sarabun'),sans-serif; font-weight:800;
  font-size:clamp(1.5rem,4.7vw,3.7rem); line-height:1.42; letter-spacing:.012em;
  text-transform:uppercase; color:#fff;
  /* ชั้นนูน 3D โทนส้ม-น้ำตาล + เงาตกกระทบ */
  text-shadow:
    0 1px 0 #F0B36A, 0 2px 0 #E7A552, 0 3px 0 #DB933B,
    0 4px 0 #CD8229, 0 5px 0 #BE7019, 0 6px 0 #AC5F0E,
    0 7px 1px rgba(60,20,0,.2), 0 9px 16px rgba(70,18,0,.5);
  transform:perspective(720px) rotateX(15deg);
  animation:hero3dIn .9s cubic-bezier(.2,.9,.3,1.15) .2s backwards;
}
@keyframes hero3dIn{
  from{ opacity:0; transform:perspective(720px) rotateX(15deg) translateY(26px); }
  to{   opacity:1; transform:perspective(720px) rotateX(15deg) translateY(0); }
}
@media(max-width:760px){ .hero-3d{ top:14%; } }
@media(prefers-reduced-motion:reduce){ .hero-3d-title{ animation:none; } }

/* ── SECTION KICKERS HIDDEN ──────────────────────────────────
   The small uppercase label that sat above each section heading
   ("About Us", "Our Products", "Cookie Showcase", …). Removed on
   request. Delete this one block to bring every one of them back. */
.sec-eye, .sec-eyebrow, .about-eyebrow, .ct-eye,
.eyebrow, .hero-pill { display:none !important; }