#fw-section-custom-html-63e66089-e24a-44a0-95a5-680c788280da {

/* ==========================================
   1. GLOBAL LIFESTYLE TOKENS (ตัวแปรคุมโทนสีอบอุ่น)
   ========================================== */
:root {
  /* โทนสี Off-white/Ecru ให้อารมณ์ออร์แกนิก สบายตา ไม่ขาวจ้าเกินไป */
  --lifestyle-bg: #faf9f6; 
  --lifestyle-text: #2b2b2b; /* สีดำอมน้ำตาล (Soft Charcoal) */
  --lifestyle-muted: #737373;
  --lifestyle-border: #e3e1db;
  
  /* ฟอนต์ประจำแบรนด์ */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  
  /* จังหวะการเคลื่อนไหวที่นุ่มนวล (Slow Living Transition) */
  --slow-motion: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================
   2. THE CANVAS (ปรับพื้นหลังและตัวอักษรทั้งเว็บ)
   ========================================== */
body, html {
  background-color: var(--lifestyle-bg) !important;
  color: var(--lifestyle-text) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
}

/* บังคับให้หัวข้อทุกหน้า (ชื่อสินค้า, คอลเลกชัน) ใช้ฟอนต์ Syne */
h1, h2, h3, h4, h5, 
.product-title, .collection-title, .header-logo a, .page-title {
  font-family: var(--font-display) !important;
  color: var(--lifestyle-text) !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* ราคาและข้อความทั่วไป */
p, span, .price, .product-price {
  font-family: var(--font-body) !important;
}

/* ==========================================
   3. THE MINDFUL BUTTONS (ปุ่มที่ดูออร์แกนิกและมีระดับ)
   ========================================== */
button, .btn, .primary-button, [class*="button"] {
  background-color: transparent !important;
  color: var(--lifestyle-text) !important;
  border: 1px solid var(--lifestyle-text) !important;
  border-radius: 2px !important; /* โค้งมนนิดๆ ให้อารมณ์เป็นมิตร ไม่แข็งกระด้าง */
  padding: 18px 40px !important;
  font-family: var(--font-body) !important;
  text-transform: uppercase;
  letter-spacing: 0.15em !important;
  font-size: 0.85rem !important;
  font-weight: 600;
  transition: var(--slow-motion) !important;
  box-shadow: none !important;
}

/* เอฟเฟกต์เวลาวางเมาส์: เปลี่ยนเป็นสีดำอมน้ำตาล */
button:hover, .btn:hover, .primary-button:hover, [class*="button"]:hover {
  background-color: var(--lifestyle-text) !important;
  color: var(--lifestyle-bg) !important;
  letter-spacing: 0.25em !important; 
}

/* ==========================================
   4. CURATED IMAGERY (ปรับรูปสินค้าให้เข้ากับ Vibe ของ Lifestyle)
   ========================================== */
/* ทำให้รูปสินค้ามีโทนอุ่น (Sepia) จางๆ เหมือนภาพถ่ายฟิล์ม */
.product-card img, .product-image {
  border-radius: 2px !important;
  filter: sepia(10%) contrast(1.05);
  transition: var(--slow-motion) !important;
}

.product-card:hover img, .product-image:hover {
  filter: sepia(0%) contrast(1); /* สีกลับมาสดใสเมื่อวางเมาส์ */
  transform: scale(1.02);
}

/* ทำให้การ์ดสินค้าดูคลีน ไม่มีกรอบ ไม่มีเงา */
.product-card, .product-grid-item {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 15px !important;
}

/* ==========================================
   5. BORDERLESS NAVIGATION (เมนูและฟุตเตอร์ที่กลมกลืน)
   ========================================== */
.header, .site-header, .navbar {
  background-color: rgba(250, 249, 246, 0.9) !important; /* สีครีมโปร่งแสง */
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lifestyle-border) !important;
}

.footer, .site-footer {
  background-color: var(--lifestyle-text) !important; /* ฟุตเตอร์สีเข้มสร้างความหนักแน่น */
  color: var(--lifestyle-bg) !important;
  border-top: none !important;
}

.footer a, .footer p {
  color: var(--lifestyle-muted) !important;
}

.footer a:hover {
  color: var(--lifestyle-bg) !important;
}
}





#fw-section-custom-html-b74fc343-ebc1-45c6-99d9-0f1784dd7920 {

/* ==========================================
   1. GLOBAL DESIGN TOKENS (ตัวแปรควบคุมจักรวาลของแบรนด์)
   ========================================== */
:root {
  /* คุมโทนสีให้เป็น "Quiet Luxury" ขาว-ดำ-เทา */
  --god-tier-black: #0b0b0b;
  --god-tier-white: #fafafa;
  --text-dim: #666666;
  
  /* ตัวแปรฟอนต์ที่ดึงมาจาก HTML Header */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  
  /* สูตรคณิตศาสตร์สำหรับการเคลื่อนไหวที่นุ่มนวลที่สุด */
  --fluid-motion: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================
   2. SEAMLESS FOUNDATION (ปรับพื้นฐานทุกหน้าให้เป็นเนื้อเดียวกัน)
   ========================================== */
body, html {
  background-color: var(--god-tier-white) !important;
  color: var(--god-tier-black) !important;
  font-family: var(--font-body) !important;
}

/* บังคับให้หัวข้อทุกหน้าใน Fourthwall (หน้าแรก, หน้าสินค้า, บล็อก) ใช้ฟอนต์แฟชั่น */
h1, h2, h3, h4, h5, 
.product-title, .collection-title, .header-logo a, .page-title {
  font-family: var(--font-display) !important;
  color: var(--god-tier-black) !important;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-weight: 700;
}

/* ราคาและข้อความทั่วไปใช้ฟอนต์สไตล์ Tech/Space */
p, span, .price, .product-price {
  font-family: var(--font-body) !important;
}

/* ==========================================
   3. THE INVISIBLE BUTTONS (ปุ่มที่ดูแพงและกลมกลืน)
   ========================================== */
/* นำปุ่มเดิมของ Fourthwall มาปรับให้เป็นสไตล์ Editorial */
button, .btn, .primary-button, [class*="button"] {
  background-color: transparent !important;
  color: var(--god-tier-black) !important;
  border: 1px solid var(--god-tier-black) !important;
  border-radius: 0px !important; /* ขอบเหลี่ยมคมกริบ */
  padding: 18px 40px !important;
  font-family: var(--font-body) !important;
  text-transform: uppercase;
  letter-spacing: 0.15em !important;
  font-size: 0.85rem !important;
  font-weight: 600;
  transition: var(--fluid-motion) !important;
  box-shadow: none !important;
}

button:hover, .btn:hover, .primary-button:hover, [class*="button"]:hover {
  background-color: var(--god-tier-black) !important;
  color: var(--god-tier-white) !important;
  letter-spacing: 0.25em !important; /* ยืดออกเวลาวางเมาส์ */
}

/* ==========================================
   4. PRODUCT GRID & IMAGERY (ผสานภาพสินค้ากับภาพบทความ)
   ========================================== */
/* ทำให้รูปสินค้าดูเหมือนรูปในนิตยสาร (คุมโทนสีและมีลูกเล่นตอน Hover) */
.product-card img, .product-image, .journal-article img {
  border-radius: 0px !important;
  filter: grayscale(15%) contrast(1.05);
  transition: var(--fluid-motion) !important;
}

.product-card:hover img, .product-image:hover, .journal-article img:hover {
  filter: grayscale(0%) contrast(1.1);
  transform: scale(1.02);
}

/* ลบกรอบของสินค้าออกให้ดูสะอาดตา */
.product-card, .product-grid-item {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 10px !important;
}

/* ==========================================
   5. NAVIGATION & FOOTER (กรอบของจักรวาล)
   ========================================== */
/* ทำให้เมนูด้านบนและด้านล่างดูคลีนและเชื่อมโยงกับเนื้อหา */
.header, .site-header, .navbar {
  background-color: rgba(250, 250, 250, 0.9) !important;
  backdrop-filter: blur(10px); /* เอฟเฟกต์กระจกฝ้า */
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

.footer, .site-footer {
  background-color: var(--god-tier-black) !important;
  color: var(--god-tier-white) !important;
  border-top: 2px solid var(--god-tier-black);
}

.footer a, .footer p {
  color: var(--text-dim) !important;
}

.footer a:hover {
  color: var(--god-tier-white) !important;
}
}

















#fw-section-hero-0 {
--font-heading-scale: 1.5;
--font-body-scale: 1.0;
}
#fw-section-hero-0 {

/* ====================================================
   WORLD-CLASS BANNER: SLOW BREATHING & FILM GRAIN
   ==================================================== */

/* 1. คุมขนาดและซ่อนส่วนที่ล้นออกของ Banner */
.your-banner-container {
  position: relative;
  overflow: hidden; /* สำคัญมาก เพื่อไม่ให้ตอนรูปซูมแล้วเว็บเบี้ยว */
  width: 100%;
  height: 80vh; /* ความสูงระดับ Cinematic พอดีสายตา */
  background-color: #faf9f6; 
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. สร้างการเคลื่อนไหวแบบ "หายใจ" ให้กับรูปภาพพื้นหลัง */
.your-banner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* เรียกใช้ Animation ซูมเข้าออกแบบช้าๆ */
  animation: slowBreathe 30s ease-in-out infinite alternate;
}

/* 3. สร้าง Film Grain (เม็ดสีนอยส์) คลุมทับบางๆ ให้ดูเป็นนิตยสารไฮเอนด์ */
.your-banner-container::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; /* เพื่อให้ยังคลิกปุ่มข้างล่างได้ */
  /* โค้ดสร้างเม็ดนอยส์ด้วย CSS ล้วนๆ */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.08; /* ปรับความเข้มจางของเม็ดฟิล์ม (0.05 - 0.15 กำลังสวย) */
  z-index: 2;
}

/* 4. การจัดการข้อความบน Banner ให้คมชัดและดูแพง */
.your-banner-text-content {
  position: relative;
  z-index: 3;
  text-align: center;
  /* เพิ่มเงาบางเฉียบให้ตัวหนังสืออ่านง่ายขึ้นเวลารูปพื้นหลังสว่าง */
  text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); 
}

/* --- KEYFRAMES: การตั้งค่าจังหวะการหายใจ --- */
@keyframes slowBreathe {
  0% {
    transform: scale(1);
    filter: brightness(0.95);
  }
  100% {
    transform: scale(1.08); /* ซูมเข้า 8% อย่างช้าๆ */
    filter: brightness(1.05); /* ปรับแสงขึ้นเล็กน้อยเพิ่มมิติ */
  }
}
}




#fw-section-video-4af87235-1339-427b-b33f-86af82c8fd10 {

/* --- 0. THE QUANTUM VACUUM (พื้นหลังมิติสุญญากาศ) --- */
body {
    background: #000;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    perspective: 2000px; /* สร้างระยะลึกของมิติ (The Z-Axis) */
    overflow-x: hidden;
    /* เทรนด์ 2026: Noise Grain จางๆ เพื่อความรู้สึก Analog Future */
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4tSqAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAQ0lEQVRYw+3P0Q0AIAhDQXb/pZ2Ahf5yBe9fEklpM5M3M3M3M3M3M3M3M3M3M3M3M3M3M3M3M3M3M3M3M3M3M3M3M3M3M8N/AfsYALshA5GMAAAAAElFTkSuQmCC');
}

/* --- 1. THE SPACETIME DISTORTION VIDEO (วิดีโอโค้งงอปริภูมิ-เวลา) --- */
/* ซ่อมและอัปเกรดวิดีโอให้มีมิติ */
video, .video-container {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 0px !important;
    filter: contrast(1.1) saturate(1.2);
    box-shadow: 0 50px 100px rgba(255,255,255,0.05);
    transform-style: preserve-3d; /* อนุญาตให้องค์ประกอบภายในมีมิติ 3D */
    transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1) !important; /* ทรานซิชันแบบไหลลื่นขั้นสุด */
    cursor: none; /* ซ่อนเมาส์ปกติเพื่อใช้ Mouse Follower (ถ้ามี) */
}

/* ลูกเล่นเจ๋งๆ: เอฟเฟกต์การโค้งงอเมื่อ Hover (สไตล์ Riemannian Geometry) */
video:hover {
    transform: rotateX(5deg) rotateY(-5deg) translateZ(50px); /* ยกตัวขึ้นในแกน Z */
    box-shadow: 0 80px 150px rgba(255,255,255,0.1);
}

/* --- 2. MULTI-DIMENSIONAL PRODUCT CARDS (การ์ดสินค้าหลายมิติ) --- */
.product-grid-item-container, [class*="product-card"] {
    background: transparent !important;
    border: none !important;
    padding: 30px !important;
    transform-style: preserve-3d;
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ลูกเล่น: เมื่อ Hover การ์ดจะเอียงตามแกน Z และแผ่รังสี (Quantum Entanglement Effect) */
.product-grid-item-container:hover {
    transform: translateZ(30px) rotateX(2deg);
    background: rgba(255,255,255,0.02) !important;
}

/* --- 3. KINETIC TYPOGRAPHY (ตัวอักษรจลนศาสตร์) --- */
/* เทรนด์ 2026: Variable Fonts ที่ขยับได้ตามการ Scroll */
h1, h2, .product-title, [class*="product-title"] {
    font-family: 'Inter', sans-serif; /* แนะนำ Variable Font */
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important; /* ชิดกันแบบ Edgy */
    line-height: 0.8 !important;
    transition: all 0.5s ease;
    /* ลูกเล่น: ตัวหนังสือจะมีแสงเรืองๆ จางๆ เหมือนดาวฤกษ์ (Glow Effect) */
    text-shadow: 0 0 15px rgba(255,255,255,0.3);
}

.product-title:hover {
    letter-spacing: 0.1em !important; /* ขยายออกอย่างรวดเร็ว (เหมือน Big Bang) */
    color: #4df !important; /* สีฟ้าไซไฟจางๆ */
}

/* --- 4. THE INVISIBLE BUY BUTTON (ปุ่มซื้อแบบควอนตัม) --- */
button, .primary-button {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 0; 
    padding: 20px 60px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5em; /* ยืดออกสุดๆ */
    font-weight: 300;
    mix-blend-mode: difference; /* สีกลับด้านเมื่อวางทับวัตถุ */
    transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
}

/* ลูกเล่น: เอฟเฟกต์แสงวิ่งผ่านปุ่ม (Quantum Pulse) */
button::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: 0.5s;
}

button:hover::after {
    left: 100%;
}

button:hover {
    background: #fff;
    color: #000;
    letter-spacing: 0.7em;
    border-color: #fff;
}

/* --- 5. PRICE AS CODE (ราคาในรูปแบบรหัส) --- */
.price, [class*="price"] {
    font-family: 'Courier New', monospace !important; 
    font-weight: 400 !important;
    color: #4df !important; /* สีฟ้าไซไฟ */
    font-size: 0.9em !important;
    opacity: 0.7;
}
}





#fw-section-footer {
--color-primary: #f5f5f3;
--color-primary-rgb: 245, 245, 243;
--color-background: #1c1c1d;
--color-background-rgb: 28, 28, 29;
--color-on-background: #f5f5f3;
--color-on-background-rgb: 245, 245, 243;
--color-on-primary: #1c1c1d;
--color-on-primary-rgb: 28, 28, 29;
--color-product-image-background: #f5f5f3;
--color-background-brightness: 28;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #f5f5f3;
--primary-btn-text: #1c1c1d;
--primary-btn-border-color: #f5f5f3;
--secondary-btn-bg: transparent;
--secondary-btn-text: #f5f5f3;
--secondary-btn-border-color: #f5f5f3;

}