/*!
 * Flawless Brand Shop Stylesheet
 * Copyright (c) 2025 RiDERth. All rights reserved.
 * Created by RiDERth — https://flawlessbrand.shop
 */

 /* ===== ฟอนต์จาก Google Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&display=swap');

 :root{
      --flws-font: "Prompt", "Noto Sans Thai", sans-serif;
      --flws-bg:#F9F4F0;         /* พื้นหลังธีมครีม */
      --flws-text:#3C3C3C;       /* ข้อความหลัก */
      --flws-sub:#6E6E6E;        /* ข้อความรอง */
      --flws-accent:#D9B48F;     /* สีเน้น (ทองอ่อน) */
      --flws-border:#E9E2DC;
      --flws-white:#fff;
      --flws-topbar-speed: 18s; /* ปรับความเร็วได้: น้อย=เร็ว มาก=ช้า */
      --flws-radius: 22px;
      --flws-gap: 24px;
      --flws-shadow: 0 12px 32px rgba(0,0,0,.10);
      --flws-hero-h: clamp(300px, 58vw, 560px);
      --flws-card-h: clamp(240px, 42vw, 520px);
    }

    html,body{
        height:100%
    }
    body {
    margin: 0;
    background-color: var(--flws-bg);
    color: var(--flws-text);
    font-family: var(--flws-font);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    /* ========== PRELOADER ========== */
    .preloader-flws{
      position:fixed; inset:0;
      background: var(--flws-white);
      display:flex; align-items:center; justify-content:center;
      z-index:9999; transition: opacity .4s ease;
    }
    .preloader-spinner-flws{
      width:56px;height:56px;border-radius:50%;
      border:4px solid #ddd;border-top-color: var(--flws-accent);
      animation: flws-spin 1s linear infinite;
    }
    @keyframes flws-spin{to{transform: rotate(360deg)}}

    /* ========== NAVBAR (Desktop) ========== */
    .navbar-flws{position:sticky;top:0;z-index:50;background:var(--flws-white);border-bottom:1px solid var(--flws-border)}
    .navbar-wrap-flws{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:22px min(5vw,90px)}
    .nav-logo-flws img{height:34px}

    .nav-links-flws{display:flex;align-items:center;gap:24px}
    .nav-links-flws a{font-weight:600}
    .nav-links-flws a:hover{color:var(--flws-accent)}

    /* ปุ่ม hamburger (โชว์เฉพาะมือถือ) */
    .nav-toggle-flws{display:none;border:0;background:none;font-size:26px;line-height:1;cursor:pointer}

    /* ========== MOBILE DRAWER ========== */
    .drawer-flws{
      position:fixed; inset:0 0 0 auto; width:min(88vw,380px); height:100dvh;
      background:var(--flws-white); border-left:2px solid var(--flws-accent);
      box-shadow:-24px 0 48px rgba(0,0,0,.08);
      transform: translateX(100%); transition: transform .35s ease;
      display:flex; flex-direction:column; gap:16px; z-index:60;
    }
    .drawer-flws.is-open{ transform: translateX(0) }

    .drawer-head-flws{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--flws-border)}
    .drawer-head-flws img{height:28px}
    .drawer-close-flws{border:0;background:none;font-size:28px;line-height:1;cursor:pointer}

    .drawer-nav-flws{display:flex;flex-direction:column;gap:10px;padding:12px 18px}
    .drawer-nav-flws a{
      display:block;padding:12px 14px;border:1px solid var(--flws-border);
      border-radius:8px;font-weight:600;
    }
    .drawer-nav-flws a:hover{border-color:var(--flws-accent);color:var(--flws-accent)}

    .drawer-social-flws{margin-top:auto;padding:18px;border-top:1px solid var(--flws-border)}
    .drawer-social-flws p{margin:0 0 10px 0;font-weight:600;color:var(--flws-sub)}
    .drawer-social-row-flws{display:flex;gap:10px}
    .drawer-social-row-flws a{
      display:inline-flex;align-items:center;justify-content:center;
      width:36px;height:36px;border:1px solid var(--flws-border);border-radius:50%;
    }
    .drawer-social-row-flws a:hover{border-color:var(--flws-accent);color:var(--flws-accent)}

    .drawer-backdrop-flws{
      position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:55;
      opacity:0; transition:opacity .25s ease; pointer-events:none;
    }
    .drawer-backdrop-flws.is-show{opacity:1; pointer-events:auto}

    /* ========== RESPONSIVE ========== */
    @media (max-width: 992px){
      .nav-links-flws{display:none}
      .nav-toggle-flws{display:inline-flex;align-items:center;justify-content:center}
    }

    /* ========== DEMO SECTION (ลบได้) ========== */
    .hero-demo-flws{padding:56px min(5vw,56px)}
    .btn-flws{
      display:inline-flex;align-items:center;justify-content:center;
      padding:10px 16px;border-radius:999px;border:1px solid var(--flws-accent);
      background:var(--flws-accent); color:#fff; font-weight:600;
    }
    .btn-flws:hover{filter:brightness(.95)}
:root{ --ann-speed-flws: 18s; }  /* น้อย=เร็ว มาก=ช้า */

.annbar-flws{
  background: linear-gradient(135deg, #f2c9a4 0%, #c18e69 100%);
  color:#fff; font-weight:700; font-size:14px; letter-spacing:.2px;
  border-top:1px solid rgba(255,255,255,.15);
}
.annbar-viewport-flws{ overflow:hidden; white-space:nowrap }
.annbar-track-flws{
  display:flex; width:max-content;
  will-change: transform;
  animation: ann-marquee-flws var(--ann-speed-flws) linear infinite;
  transform: translate3d(0,0,0);
}
.annbar-seq-flws{ display:flex; gap:28px; padding:8px 20px }
.annbar-seq-flws span{ display:inline-block }

/* 2 ชุดเท่ากัน → วิ่งจาก 0 ถึง -50% แล้ววนต่อเนียน ๆ */
@keyframes ann-marquee-flws{
  from{ transform: translate3d(0,0,0) }
  to{   transform: translate3d(-50%,0,0) }
}

/* ชี้เมาส์แล้ว "หยุด" (pause) */
.annbar-flws:hover .annbar-track-flws{
  animation-play-state: paused;
}

/* ลดกระตุกบน Firefox/มือถือบางรุ่น */
.annbar-track-flws{ backface-visibility:hidden; -webkit-font-smoothing:antialiased }

/* เคารพการปิดแอนิเมชันของผู้ใช้ */
@media (prefers-reduced-motion: reduce){
  .annbar-track-flws{ animation:none }
}