/* =========================================================
   PARADOX EASY SETTINGS — SINGLE DESIGN CONTROL
   ---------------------------------------------------------
   แก้ค่าด้าน Design ของเว็บไซต์จากไฟล์นี้เป็นหลัก
   ยกเว้นตัวหนังสือและไอคอนของหน้า Index ซึ่งอยู่ที่
   home-index-typography.css เพื่อให้มีจุดควบคุมเดียว
   ทุก Setting มีคำอธิบายว่า "ควบคุมอะไร / อยู่ตรงไหน"

   GOLDEN RULE:
   ถ้าต้องการปรับขนาดตัวหนังสือ / ระยะห่าง / ขนาดรูป / ปุ่ม
   ให้แก้ค่าที่ไฟล์นี้ก่อน ไม่ต้องไล่หา CSS ใน HTML
   ========================================================= */

/* =========================================================
   QUICK EDIT MAP — อ่านส่วนนี้ก่อนแก้ค่า
   ---------------------------------------------------------
   ชื่อด้านซ้าย = สิ่งที่เห็นบนหน้าเว็บ
   ตัวแปรด้านขวา = จุดที่ต้องแก้

   HOME / หน้าแรก
   ---------------------------------------------------------
   "Make Everyday Feel Special." — ขนาดหัวข้อ
   -> --home-hero-title-size
   "Make Everyday Feel Special." — ความหนา
   -> --home-hero-title-weight
   "Make Everyday Feel Special." — ความสูงบรรทัด
   -> --home-hero-title-line
   ข้อความ "Thoughtfully designed kitchenware for modern living."
   -> --home-hero-text-size / --home-hero-text-width
   ความสูงพื้นที่ Hero ทั้งชุด
   -> --home-hero-height
   ระยะด้านขวาของกลุ่มข้อความ Hero
   -> --home-hero-copy-right

   รูป Hero ด้านขวา — ขนาดรูป
   -> --home-hero-image-width
   รูป Hero — ความสูง
   -> --home-hero-image-height
   รูป Hero — วิธีแสดงรูป / ไม่ครอป
   -> --home-hero-image-fit
   รูป Hero — เลื่อนซ้าย/ขวา
   -> --home-hero-image-position-x
   รูป Hero — เลื่อนขึ้น/ลง
   -> --home-hero-image-position-y

   หัวข้อ Section หลักของ HOME
   -> --home-section-title-size / --home-section-title-weight
   ระยะห่าง Section
   -> --home-section-space
   ระยะห่าง Statement
   -> --home-statement-space
   ระยะห่างคอลัมน์
   -> --home-column-gap

   HOME — หมวดหมู่ / Lifestyle / Products / Ideas / Store
   EXPLORE OUR COLLECTION -> --home-category-kicker-size
   SHOP BY CATEGORY -> --home-category-title-size
   Category subtitle -> --home-category-subtitle-size
   Lifestyle title -> --home-lifestyle-title-size
   Product title -> --home-product-title-size
   Product meta/detail -> --home-product-meta-size
   Idea title -> --home-idea-title-size
   Store title -> --home-store-title-size
   Footer text -> --home-footer-text-size
   Button text -> --home-button-text-size

   HOME — DESIGNED FOR EVERYDAY
   01 THOUGHTFUL DETAILS -> --home-principle-01-title-size / --home-principle-01-text-size
   02 FOR MODERN LIVING -> --home-principle-02-title-size / --home-principle-02-text-size
   03 MADE FOR EVERYDAY -> --home-principle-03-title-size / --home-principle-03-text-size
   04 MAKE EVERY MOMENT SPECIAL -> --home-principle-04-title-size / --home-principle-04-text-size
   4 principle icons -> --index-principle-icon-size

   YOUR PARTNER IN THE KITCHEN
   Label -> --home-partner-label-size / --home-partner-label-weight / --home-partner-label-letter-spacing
   Main title -> --home-partner-title-size / --home-partner-title-weight / --home-partner-title-line
   Description -> --home-partner-text-size / --home-partner-text-width / --home-partner-text-line

   CATEGORY PAGES
   Hero title -> --category-hero-title-size
   Hero subtitle -> --category-hero-subtitle-size
   Hero lead -> --category-hero-lead-size
   Hero paragraph -> --category-hero-text-size
   Section title -> --category-section-title-size
   Category icon -> --category-icon-size
   Category name -> --category-name-size
   English category name -> --category-en-size
   Button text -> --category-button-size

   LIFESTYLE PAGES
   Hero title -> --lifestyle-hero-title-size
   Hero text -> --lifestyle-hero-text-size
   Intro title / section title -> --lifestyle-section-title-size
   Intro text -> --lifestyle-intro-text-size
   Product meta -> --lifestyle-product-meta-size
   Content paragraph -> --lifestyle-content-text-size

   HOME CAFÉ
   Hero title -> --home-cafe-hero-title-size
   Section title -> --home-cafe-title-size
   Body text -> --home-cafe-body-size

   MATCHA
   Hero title -> --matcha-hero-title-size
   Hero text -> --matcha-hero-text-size
   Section title -> --matcha-section-title-size
   Story text -> --matcha-story-text-size
   Recipe title -> --matcha-recipe-title-size
   Recipe text -> --matcha-recipe-text-size
   Step number -> --matcha-step-number-size
   Step text -> --matcha-step-text-size
   Card title -> --matcha-card-title-size
   Card text -> --matcha-card-text-size

   STORES
   Hero title -> --stores-hero-title-size
   Hero text -> --stores-hero-text-size
   Store title -> --stores-card-title-size
   Mall name -> --stores-card-mall-size
   Store detail -> --stores-card-detail-size
   Action text -> --stores-action-size

   PARADOX CARD
   Hero title -> --card-hero-title-size
   Hero text -> --card-hero-text-size
   Action title -> --card-action-title-size
   Action text -> --card-action-text-size
   Section title -> --card-section-title-size
   Benefit title -> --card-benefit-title-size
   Benefit text -> --card-benefit-text-size
   Modal title -> --card-modal-title-size

   PARADOX CARD — JOIN
   Main title -> --card-join-title-size
   Intro text -> --card-join-intro-size
   Benefit title -> --card-join-benefit-title-size
   Benefit text -> --card-join-benefit-text-size
   Form label -> --card-join-label-size
   Input text -> --card-join-input-size
   Button text -> --card-join-button-size
   Note / privacy text -> --card-join-note-size

   IMPORTANT:
   ถ้าต้องการแก้ "ตัวหนังสือ" ให้ค้นหาชื่อข้อความใน QUICK EDIT MAP ก่อน
   แล้วแก้เฉพาะตัวแปรที่ระบุไว้ ไม่ต้องแก้ CSS ด้านล่าง
   ========================================================= */

/* CATEGORY PAGES — shared typography and header controls */
body.page-category{
  --category-header-height:72px;
  --category-header-height-mobile:70px;
  --category-header-logo-size:22px;
  --category-header-logo-weight:500;
  --category-header-logo-letter-spacing:.22em;
  --category-header-link-size:13px;
  --category-header-link-weight:400;
  --category-header-link-gap:28px;
  --category-header-link-size-tablet:11px;
  --category-header-mobile-menu-size:9px;
  --category-header-mobile-link-size:13px;
  --category-header-button-weight:500;
  --category-heading-weight:300;
  --category-section-heading-weight:400;
  --category-tile-heading-weight:400;
  --category-button-weight:500;
  --category-header-letter-spacing:.14em;
  --category-header-line-height:1.2;
  --category-mobile-letter-spacing:.13em;
  --category-header-cta-size:9px;
  --category-heading-weight:300;
  --category-heading-line:1.02;
  --category-body-weight:400;
  --category-body-line:1.75;
}

:root{
  /* SHARED / FALLBACK */
  --p-hero-title-size:clamp(56px,7vw,96px);
  --p-hero-title-weight:300;
  --p-hero-title-line:1.02;
  --p-hero-text-size:18px;
  --p-hero-text-width:500px;
  --p-section-title-size:34px;
  --p-section-title-weight:400;
  --p-section-title-line:1.12;
  --p-card-title-size:20px;
  --p-body-size:16px;
  --p-button-size:12px;
  --p-section-top:70px;
  --p-section-bottom:76px;
  --p-column-gap:60px;

  /* HOME — HERO / MAKE EVERYDAY FEEL SPECIAL */
  --home-hero-title-size:clamp(56px,7vw,80px);
  --home-hero-title-weight:300;
  --home-hero-title-line:1.02;
  --home-hero-text-size:19px;
  --home-hero-text-width:500px;
  --home-hero-height:620px;
  --home-hero-copy-right:45px;

  /* HERO IMAGE — รูปใหญ่ด้านขวาของหน้า HOME */
  --home-hero-image-width:108%;
  --home-hero-image-height:auto;
  --home-hero-image-fit:contain;
  --home-hero-image-position-x:-5%;
  --home-hero-image-position-y:20%;

  /* HOME — SECTION */
  --home-section-title-size:34px;
  --home-section-title-weight:400;
  --home-section-title-line:1.12;
  --home-section-space:70px;
  --home-statement-space:85px;
  --home-category-gap:10px;
  --home-product-gap:12px;
  --home-column-gap:60px;

  /* HOME — CATEGORY / LIFESTYLE / PRODUCT / IDEAS / STORE */
  --home-category-kicker-size:18px;
  --home-category-title-size:40px;
  --home-category-subtitle-size:9px;
  --home-lifestyle-title-size:40px;
  --home-product-title-size:25px;
  --home-product-meta-size:15px;
  --home-idea-title-size:18px;
  --home-store-title-size:38px;
  --home-footer-text-size:10px;
  --home-button-text-size:11px;

  /* HOME — DESIGNED FOR EVERYDAY */
  --home-principle-01-title-size:19px;
  --home-principle-01-title-weight:400;
  --home-principle-01-text-size:16px;
  --home-principle-02-title-size:19px;
  --home-principle-02-title-weight:400;
  --home-principle-02-text-size:16px;
  --home-principle-03-title-size:19px;
  --home-principle-03-title-weight:400;
  --home-principle-03-text-size:16px;
  --home-principle-04-title-size:clamp(19px,4vw,19px);
  --home-principle-04-title-weight:400;
  --home-principle-04-text-size:16px;

  /* HOME — YOUR PARTNER IN THE KITCHEN */
  --home-partner-label-size:18px;
  --home-partner-label-weight:400;
  --home-partner-label-letter-spacing:.13em;
  --home-partner-title-size:clamp(42px,4.5vw,64px);
  --home-partner-title-weight:400;
  --home-partner-title-line:1.12;
  --home-partner-title-letter-spacing:-.04em;
  --home-partner-title-size-mobile:31px;
  --home-partner-text-size:18px;
  --home-partner-text-width:520px;
  --home-partner-text-line:1.9;

  /* LEGACY HOME SETTINGS — kept for older markup */
  --home-principle-title-size:43px;
  --home-principle-title-weight:400;
  --home-principle-text-size:14px;
  --home-moment-title-size:clamp(55px,4vw,54px);
  --home-moment-title-weight:400;
  --home-moment-text-size:16px;

  /* CATEGORY */
  --category-hero-height:400px;
  --category-hero-title-size:46px;
  --category-hero-title-weight:300;
  --category-hero-subtitle-size:60px;
  --category-hero-lead-size:18px;
  --category-hero-text-size:16px;
  --category-hero-text-width:560px;
  --category-section-top:72px;
  --category-section-bottom:82px;
  --category-section-title-size:43px;
  --category-section-title-weight:400;
  --category-grid-gap-y:66px;
  --category-grid-gap-x:34px;
  --category-icon-size:132px;
  --category-icon-bottom:18px;
  --category-name-size:17px;
  --category-en-size:13px;
  --category-button-size:13px;
  --category-footer-height:210px;

  /* LIFESTYLE */
  --lifestyle-hero-height:650px;
  --lifestyle-hero-top:160px;
  --lifestyle-hero-bottom:82px;
  --lifestyle-hero-title-size:clamp(40px,6vw,76px);
  --lifestyle-hero-title-weight:300;
  --lifestyle-hero-text-size:18px;
  --lifestyle-hero-text-width:620px;
  --lifestyle-intro-space:105px;
  --lifestyle-intro-title-size:clamp(34px,4vw,56px);
  --lifestyle-intro-text-size:18px;
  --lifestyle-section-space:100px;
  --lifestyle-section-title-size:clamp(34px,4vw,56px);
  --lifestyle-section-title-weight:300;
  --lifestyle-product-gap:18px;
  --lifestyle-product-meta-size:13px;
  --lifestyle-content-gap:60px;
  --lifestyle-content-text-size:17px;

  /* HOME CAFÉ */
  --home-cafe-hero-height:680px;
  --home-cafe-hero-top:180px;
  --home-cafe-hero-bottom:90px;
  --home-cafe-hero-title-size:clamp(38px,6vw,76px);
  --home-cafe-hero-title-weight:300;
  --home-cafe-intro-space:110px;
  --home-cafe-section-space:100px;
  --home-cafe-title-size:clamp(30px,3.5vw,52px);
  --home-cafe-title-weight:300;
  --home-cafe-product-gap:18px;
  --home-cafe-content-gap:60px;
  --home-cafe-body-size:17px;

  /* MATCHA SET */
  --matcha-hero-height:620px;
  --matcha-hero-title-size:clamp(48px,6vw,82px);
  --matcha-hero-title-weight:300;
  --matcha-hero-text-size:18px;
  --matcha-hero-text-width:560px;
  --matcha-section-space:90px;
  --matcha-section-title-size:clamp(36px,4vw,56px);
  --matcha-section-title-weight:400;
  --matcha-story-text-size:17px;
  --matcha-recipe-title-size:16px;
  --matcha-recipe-text-size:16px;
  --matcha-step-number-size:28px;
  --matcha-step-text-size:14px;
  --matcha-card-title-size:18px;
  --matcha-card-text-size:14px;

  /* STORES / STORE LOCATOR */
  --stores-main-top:78px;
  --stores-main-bottom:100px;
  --stores-hero-gap:70px;
  --stores-hero-bottom:62px;
  --stores-hero-title-size:clamp(58px,7vw,96px);
  --stores-hero-title-weight:500;
  --stores-hero-text-size:17px;
  --stores-hero-text-width:560px;
  --stores-hero-note-size:10px;
  --stores-grid-x:12px;
  --stores-grid-y:12px;
  --stores-card-title-size:25px;
  --stores-card-mall-size:15px;
  --stores-card-detail-size:13px;
  --stores-action-size:9px;
  --stores-toolbar-size:11px;
  --stores-footer-size:10px;

  /* PARADOX CARD — WELCOME */
  --card-main-x:0px;
  --card-main-y:0px;
  --card-copy-x:0px;
  --card-copy-y:0px;
  --card-hero-title-size:clamp(48px,6vw,80px);
  --card-hero-title-weight:300;
  --card-hero-text-size:17px;
  --card-hero-text-width:560px;
  --card-action-title-size:28px;
  --card-action-text-size:15px;
  --card-section-title-size:36px;
  --card-benefit-title-size:18px;
  --card-benefit-text-size:14px;
  --card-modal-title-size:30px;

  /* PARADOX CARD — JOIN */
  --card-join-title-size:clamp(40px,5vw,64px);
  --card-join-intro-size:17px;
  --card-join-benefit-title-size:18px;
  --card-join-benefit-text-size:14px;
  --card-join-label-size:12px;
  --card-join-input-size:15px;
  --card-join-button-size:13px;
  --card-join-note-size:11px;
}


/* =========================================================
   INDEX — TEXT COLORS (แก้สีข้อความหน้า index ที่นี่)
   สีแบบ #RRGGBB เช่น #25221f; เปลี่ยนเฉพาะหน้า index
   ========================================================= */
body[data-paradox-page="home"]{
  /* เมนูและโลโก้ */
  --index-color-logo:#171717;
  --index-color-nav:#222222;
  --index-color-nav-button:#111111;

  /* Hero */
  --index-color-hero-label:#8a7359;
  --index-color-hero-title:#171513;
  --index-color-hero-description:#625c54;
  --index-color-hero-button:#ffffff;
  --index-color-hero-outline-button:#171513;

  /* YOUR PARTNER IN THE KITCHEN */
  --index-color-partner-label:#8d775d;
  --index-color-partner-title:#24211e;
  --index-color-partner-description:#6d6861;
  --index-color-principle-title:#25221f;
  --index-color-principle-description:#6f6962;

  /* หัวข้อของ Category / Lifestyle / Essentials / Ideas */
  --index-color-section-label:#9b7950;
  --index-color-section-title:#171717;
  --index-color-section-description:#77716a;

  /* ตัวหนังสือบนภาพ (ควรใช้สีที่อ่านชัดบนภาพมืด) */
  --index-color-category-card:#ffffff;
  --index-color-lifestyle-card:#ffffff;

  /* การ์ดสินค้าและบทความ */
  --index-color-product-title:#171717;
  --index-color-product-description:#77716a;
  --index-color-idea-label:#171717;
  --index-color-idea-title:#171717;
  --index-color-idea-link:#111111;

  /* Store Locator */
  --index-color-store-title:#171717;
  --index-color-store-description:#625c54;
  --index-color-store-button:#ffffff;

  /* Footer */
  --index-color-footer-heading:#1b1618;
  --index-color-footer-description:#77716a;
}

/* HOME — YOUR PARTNER IN THE KITCHEN */
body[data-paradox-page="home"] .designed-main .k{font-size:var(--home-partner-label-size);font-weight:var(--home-partner-label-weight);letter-spacing:var(--home-partner-label-letter-spacing)}
body[data-paradox-page="home"] .designed-main h2{font-size:var(--home-partner-title-size);font-weight:var(--home-partner-title-weight);line-height:var(--home-partner-title-line);letter-spacing:var(--home-partner-title-letter-spacing)}
body[data-paradox-page="home"] .designed-main p{font-size:var(--home-partner-text-size);max-width:var(--home-partner-text-width);line-height:var(--home-partner-text-line)}
@media (max-width:500px){body[data-paradox-page="home"] .designed-main h2{font-size:var(--home-partner-title-size-mobile)}body[data-paradox-page="home"] .designed-main p{font-size:var(--home-partner-text-size)}}

/* =========================================================
   SHARED HEADER — NON-HOME PAGES
   Match the HOME header's navigation scale and alignment.
   Only applies to pages other than the HOME page.
   ========================================================= */
:root{
  --site-header-nav-height:72px;
  --site-header-container-width:1280px;
  --site-header-container-side:56px;
  --site-header-nav-gap:28px;
  --site-header-menu-size:13px;
  --site-header-menu-weight:400;
  --site-header-menu-letter-spacing:.12em;
  --site-header-logo-size:22px;
  --site-header-logo-weight:500;
  --site-header-cta-size:9px;
  --site-header-cta-weight:500;
}

body:not([data-paradox-page="home"]) header .nav,
body:not([data-paradox-page="home"]) .site-header .nav{
  height:var(--site-header-nav-height)!important;
}

body:not([data-paradox-page="home"]) header .wrap.nav,
body:not([data-paradox-page="home"]) .site-header .container.nav{
  width:min(var(--site-header-container-width),calc(100% - var(--site-header-container-side)))!important;
  margin-inline:auto!important;
  display:flex!important;
  align-items:center!important;
}

body:not([data-paradox-page="home"]) header .links{
  display:flex!important;
  align-items:center!important;
  gap:var(--site-header-nav-gap)!important;
  font-size:var(--site-header-menu-size)!important;
  font-weight:var(--site-header-menu-weight)!important;
  letter-spacing:var(--site-header-menu-letter-spacing)!important;
}

body:not([data-paradox-page="home"]) .site-header nav{
  display:flex!important;
  align-items:center!important;
  gap:var(--site-header-nav-gap)!important;
  flex:1!important;
}

body:not([data-paradox-page="home"]) header .links a,
body:not([data-paradox-page="home"]) .site-header nav a{
  font-size:var(--site-header-menu-size)!important;
  font-weight:var(--site-header-menu-weight)!important;
  letter-spacing:var(--site-header-menu-letter-spacing)!important;
  line-height:1.2!important;
}

body:not([data-paradox-page="home"]) header .logo,
body:not([data-paradox-page="home"]) .site-header .logo{
  font-size:var(--site-header-logo-size)!important;
  font-weight:var(--site-header-logo-weight)!important;
}

body:not([data-paradox-page="home"]) .site-header .nav-cta{
  font-size:var(--site-header-cta-size)!important;
  font-weight:var(--site-header-cta-weight)!important;
  letter-spacing:.12em!important;
}

@media(max-width:800px){
  body:not([data-paradox-page="home"]) header .wrap.nav,
  body:not([data-paradox-page="home"]) .site-header .container.nav{
    width:calc(100% - 34px)!important;
  }
  body:not([data-paradox-page="home"]) .site-header nav,
  body:not([data-paradox-page="home"]) header .links{
    display:none!important;
  }
}

@media(max-width:500px){
  body:not([data-paradox-page="home"]) header .wrap.nav,
  body:not([data-paradox-page="home"]) .site-header .container.nav{
    width:calc(100% - 34px)!important;
  }
}