/* ============================================================
   Waterclick — "เกี่ยวกับ" (About) section
   ------------------------------------------------------------
   Scoped stylesheet, conditionally enqueued on the About landing
   (page 8) and its children only — see waterclick_is_about_page()
   in functions.php. Restyles the shared [su_menu name="About"] tab
   bar + the pages' GenerateBlocks content, which otherwise read like
   a Word document. Sibling of pdp.css / catalog.css / landing.css.

   Design: a precision "brand dossier". Japanese-engineering restraint
   — cool water-greys, lots of air, hairline structure — with brand
   red #D72127 kept as a rare maker's seal (active tab, links, plate
   accents only). Single font: Prompt. System mono for spec labels.

   The signature is the sticky SECTION INDEX bar: the tab menu, fixed
   under the site header, ties all seven facets together.

   Keyed on slug body classes (wc-about / wc-about-<slug>), NOT numeric
   page IDs, so it survives the Local→production DB divergence. Grids use
   auto-fit so the layouts degrade gracefully when blocks are added or
   removed in Gutenberg. Hand-authored flat CSS — no build step; mirror
   of assets/scss/about.scss.
   ============================================================ */

/* ---------- TOKENS (scoped — file only loads on about pages) ---------- */
body.wc-about{
  --ink:#0A2430;        /* deep cool — headings */
  --ink-2:#3A5563;      /* body copy */
  --ink-3:#6E8593;      /* muted — captions, inactive tabs */
  --paper:#F4F8FA;      /* cool near-white ground */
  --surface:#FFFFFF;    /* card / plate */
  --mist:#DCE8ED;       /* hairline */
  --mist-2:#EAF1F4;     /* soft fill */
  --red:#D72127;        /* brand red — sole accent */
  --red-deep:#B01015;
  --shadow:0 1px 2px rgba(10,36,48,.05), 0 8px 30px -12px rgba(10,36,48,.16);
  --shadow-lift:0 2px 4px rgba(10,36,48,.06), 0 26px 50px -20px rgba(10,36,48,.30);
  --r:14px; --r-lg:22px;
  --sans:"Prompt","Noto Sans Thai","Sarabun",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Cascadia Mono",monospace;
  --measure:70ch;
  --head-h:var(--s-head-height,85px);  /* live header height, any breakpoint */
}

/* ---------- GROUND ---------- */
/* Cool paper under the whole article so white plates/cards read as
   considered figures rather than pasted screenshots. Painted on the
   full-width .site-content wrapper — NOT .site-main, which is only the
   ~1140px content column and would show as a floating panel with white
   gutters. The shared title band (page-cover) is nudged to the same paper
   so the top is seamless. */
body.wc-about .site-content{ background:var(--paper); }
body.wc-about .wp-block-cover.is-light .wp-block-cover__background{ background-color:var(--paper)!important; }
body.wc-about .page-content{
  font-family:var(--sans);
  padding-bottom:clamp(48px,6vw,96px);
}

/* ============================================================
   SIGNATURE — sticky SECTION INDEX bar
   The [su_menu] output is <ul id="menu-about"> inside a GenerateBlocks
   container. Break that container full-bleed, pin it under the site
   header, and turn the list into a quiet underline-tab index. Detected
   with :has() so it never depends on the block's generated uniqueId.
   ============================================================ */
body.wc-about .page-content > .gb-container:has(#menu-about){
  position:sticky;
  top:calc(var(--head-h) - 1px);   /* overlap the header hairline */
  z-index:30;
  width:100vw;
  margin-inline:calc(50% - 50vw);  /* full-bleed band */
  background:rgba(244,248,250,.82);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);
  backdrop-filter:saturate(1.5) blur(12px);
  border-top:1px solid var(--mist);
  border-bottom:1px solid var(--mist);
}
body.wc-about .page-content > .gb-container:has(#menu-about) > .gb-inside-container{
  max-width:1240px;
  margin-inline:auto;
  padding:0 clamp(12px,4vw,32px);
}
#menu-about{
  display:flex;
  gap:2px;
  justify-content:center;
  flex-wrap:nowrap;
  overflow-x:auto;
  list-style:none;
  margin:0;
  padding:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
#menu-about::-webkit-scrollbar{ display:none; }
#menu-about li{ margin:0; flex:0 0 auto; }
#menu-about a{
  display:block;
  padding:15px 15px 13px;
  white-space:nowrap;
  font:500 15px/1 var(--sans);
  letter-spacing:.005em;
  color:var(--ink-3);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
#menu-about a:hover{ color:var(--ink); }
#menu-about a:focus-visible{
  outline:2px solid var(--red);
  outline-offset:-2px;
  border-radius:4px;
}
#menu-about .current-menu-item > a,
#menu-about .current_page_item > a{
  color:var(--ink);
  border-bottom-color:var(--red);
}
/* Left-align the index on small screens so it scrolls from the first item. */
@media (max-width:700px){
  #menu-about{ justify-content:flex-start; }
  #menu-about a{ font-size:14px; padding:14px 12px 12px; }
}

/* ============================================================
   PROSE — typography & rhythm
   ============================================================ */
body.wc-about .page-content p{
  font:400 clamp(15.5px,15px + .2vw,17px)/1.78 var(--sans);
  color:var(--ink-2);
  margin:0 0 1.3em;
  max-width:var(--measure);
}
/* When a paragraph sits alone in a centered/prose container, keep its
   measure but let the container's own alignment position it. */
body.wc-about .page-content p a{
  color:var(--red-deep);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  font-weight:500;
}
body.wc-about .page-content p a:hover{ color:var(--red); }

body.wc-about .page-content .gb-headline{
  color:var(--ink);
  font-family:var(--sans);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
  margin:0 0 .55em;
}
body.wc-about .page-content h2.gb-headline{
  font-size:clamp(1.5rem,1.18rem + 1.5vw,2.05rem);
  margin-top:1.9em;
}
body.wc-about .page-content h3.gb-headline{
  font-size:clamp(1.25rem,1.08rem + .8vw,1.5rem);
  margin-top:1.6em;
}
body.wc-about .page-content h4.gb-headline{
  font-size:clamp(1.08rem,1rem + .4vw,1.22rem);
  margin-top:1.4em;
}
/* The first headline after the index bar leads the page — give it room. */
body.wc-about .page-content > .gb-container:has(#menu-about) + .gb-container .gb-headline:first-child{
  margin-top:1.2em;
}

/* ============================================================
   FIGURES — images as framed "plates"
   ============================================================ */
body.wc-about .page-content figure.wp-block-image{
  margin:2.2em auto;
}
body.wc-about .page-content figure.wp-block-image img{
  display:block;
  border-radius:var(--r);
  border:1px solid var(--mist);
  background:var(--surface);
  box-shadow:var(--shadow);
}
body.wc-about .page-content figure.wp-block-image figcaption{
  margin-top:.8em;
  font:500 13px/1.5 var(--sans);
  color:var(--ink-3);
  text-align:center;
}

/* ============================================================
   HERO — editorial split (text + image), core/columns .wc-about-hero
   Replaces the old centred-title-over-a-wall-of-text opening.
   ============================================================ */
body.wc-about .page-content .wc-about-hero{
  gap:clamp(24px,4vw,60px);
  align-items:center;
  margin:clamp(28px,3vw,44px) auto 0;
}
body.wc-about .page-content p.wc-eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 14px;
  max-width:none;
}
body.wc-about .page-content h2.wc-hero-title{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(1.9rem,1.25rem + 2.6vw,3rem);
  line-height:1.16;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 .55em;
}
body.wc-about .page-content p.wc-hero-lead{
  font-size:clamp(16px,15px + .45vw,18.5px);
  line-height:1.72;
  color:var(--ink-2);
  margin:0;
  max-width:42ch;
}
body.wc-about .page-content .wc-hero-img{ margin:0; }
body.wc-about .page-content .wc-hero-img img{
  width:100%;
  border-radius:var(--r-lg);
  border:1px solid var(--mist);
  box-shadow:var(--shadow-lift);
}

/* Centered editorial intro — pages without a hero image (.wc-about-intro,
   a core/group). Eyebrow + title centered; the lead stays left-aligned at
   a readable measure so long Thai copy doesn't get hard-to-scan centering. */
body.wc-about .page-content .wc-about-intro{
  max-width:840px;
  margin:clamp(28px,3vw,46px) auto clamp(4px,1vw,12px);
  text-align:center;
}
body.wc-about .page-content .wc-about-intro p.wc-eyebrow{ text-align:center; }
body.wc-about .page-content .wc-about-intro h2.wc-hero-title{
  text-align:center;
  font-size:clamp(1.9rem,1.3rem + 2.2vw,2.7rem);
}
body.wc-about .page-content .wc-about-intro p.wc-hero-lead{
  max-width:68ch;
  margin-inline:auto;
  text-align:left;
}

/* ============================================================
   STAT BAND — the page's signature spec strip, core/columns
   .wc-about-stats. Real figures pulled from the copy (17+2 / 450 /
   99.6% / 24 ชม.) set in mono, on one white instrument-panel card
   divided by hairlines, each capped with a small red seal tick.
   ============================================================ */
body.wc-about .page-content .wc-about-stats{
  background:var(--surface);
  border:1px solid var(--mist);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:clamp(22px,2.6vw,38px) clamp(10px,1.5vw,24px);
  margin:clamp(30px,3.4vw,48px) auto;
  gap:0;
}
body.wc-about .page-content .wc-about-stats .wp-block-column{
  padding:6px clamp(14px,2.2vw,34px);
  text-align:center;
  border-left:1px solid var(--mist);
}
body.wc-about .page-content .wc-about-stats .wp-block-column:first-child{ border-left:0; }
body.wc-about .page-content .wc-about-stats .wp-block-column::before{
  content:"";
  display:block;
  width:26px;
  height:3px;
  border-radius:2px;
  background:var(--red);
  margin:0 auto 16px;
}
body.wc-about .page-content h3.wc-stat-num{
  font-family:var(--mono);
  font-size:clamp(2rem,1.4rem + 2.4vw,3rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 .5em;
}
body.wc-about .page-content p.wc-stat-label{
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-3);
  margin:0;
  max-width:none;
}
/* Stacked on mobile — swap the vertical dividers for horizontal ones. */
@media (max-width:781px){
  body.wc-about .page-content .wc-about-stats .wp-block-column{
    border-left:0;
    border-top:1px solid var(--mist);
    padding-top:22px;
    padding-bottom:22px;
  }
  body.wc-about .page-content .wc-about-stats .wp-block-column:first-child{ border-top:0; }
}

/* ============================================================
   GRIDS — GenerateBlocks two-column wrappers
   ============================================================ */
body.wc-about .page-content .gb-grid-wrapper{
  align-items:start;
}

/* ============================================================
   PER-FACET treatments (slug body classes)
   ============================================================ */

/* ---- ประวัติ / history: brand-story videos + founder portraits ---- */
body.wc-about-history .page-content .wp-block-video{ margin:0; }
body.wc-about-history .page-content .wp-block-video video{
  width:100%;
  height:auto;               /* keep the clip's native ratio — no crop */
  display:block;
  background:#0A2430;
  border-radius:var(--r);
  border:1px solid var(--mist);
  box-shadow:var(--shadow);
}
body.wc-about-history .page-content .wp-block-video figcaption{
  margin-top:.75em;
  font:500 13px/1.55 var(--sans);
  color:var(--ink-3);
  text-align:center;
}
/* The Mashimizu / Cleansui-d portraits are classic float figures
   (figure.alignright / .alignleft, 150px) beside their bio text →
   circular avatars so each reads as a person, not a pasted thumbnail. */
body.wc-about-history .page-content figure.alignright img,
body.wc-about-history .page-content figure.alignleft img{
  width:128px;
  height:128px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--mist);
  background:var(--surface);
  box-shadow:var(--shadow);
}

/* ---- รางวัลการออกแบบ / design-award: award wall ---- */
/* Each award is one grid cell: .gb-grid-column > .gb-container >
   .gb-inside-container > <p> that holds an <img> inline with its caption
   text. Turn the cells into equal white plates on an auto-fit grid so
   adding/removing an award in Gutenberg never breaks the row. */
body.wc-about-design-award .page-content .gb-grid-wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px;
  align-items:stretch;
}
body.wc-about-design-award .page-content .gb-grid-column{
  width:auto!important;   /* override GB flex-basis so tracks size the cells */
}
body.wc-about-design-award .page-content .gb-grid-column > .gb-container,
body.wc-about-design-award .page-content .gb-grid-column > .gb-container > .gb-inside-container{
  height:100%;
}
body.wc-about-design-award .page-content .gb-grid-column > .gb-container > .gb-inside-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  border:1px solid var(--mist);
  border-radius:var(--r);
  padding:26px 22px;
  box-shadow:var(--shadow);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
body.wc-about-design-award .page-content .gb-grid-column > .gb-container > .gb-inside-container:hover{
  box-shadow:var(--shadow-lift);
  transform:translateY(-3px);
  border-color:#CBDDE5;
}
/* The <p> wraps image (top) + caption (below). */
body.wc-about-design-award .page-content .gb-grid-column p{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color:var(--ink-3);
  max-width:none;
}
body.wc-about-design-award .page-content .gb-grid-column img{
  display:block;
  margin:0;
  border:0;
  box-shadow:none;
  background:transparent;
  width:auto;
  max-height:104px;
  object-fit:contain;
}

/* ---- สถานที่จัดจำหน่าย / shop-location: channel cards ---- */
/* This page nests deeply — office info + a [su_gmap] map (empty on Local,
   an iframe on production) + the sales-channel logos. To stay edit-safe we
   card ONLY leaf cells that actually hold a logo image: `:has(img)` skips
   the empty map cells (so they never render as blank boxes), and
   `:not(:has(.gb-grid-wrapper))` skips wrapper cells that merely contain a
   nested grid. GB's own column layout is left intact. */
body.wc-about-shop-location .page-content
  .gb-grid-column:not(:has(.gb-grid-wrapper)):has(img)
  > .gb-container > .gb-inside-container{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:var(--surface);
  border:1px solid var(--mist);
  border-radius:var(--r);
  padding:22px 16px;
  box-shadow:var(--shadow);
  transition:box-shadow .2s ease, transform .2s ease;
}
body.wc-about-shop-location .page-content
  .gb-grid-column:not(:has(.gb-grid-wrapper)):has(img)
  > .gb-container > .gb-inside-container:hover{
  box-shadow:var(--shadow-lift);
  transform:translateY(-3px);
}
body.wc-about-shop-location .page-content .gb-grid-column:has(img) figure.wp-block-image{
  margin:0;
}
body.wc-about-shop-location .page-content .gb-grid-column:has(img) img{
  display:block;
  margin:0 auto;
  border:0;
  box-shadow:none;
  background:transparent;
  width:auto;
  max-height:52px;
  object-fit:contain;
}
body.wc-about-shop-location .page-content .gb-grid-column:has(img) p{
  margin:0;
  text-align:center;
  font-size:13.5px;
  line-height:1.5;
  max-width:none;
}

/* ---- การรับประกัน / warranty: terms + certificate plate ---- */
body.wc-about-warranty .page-content figure.wp-block-image{
  max-width:520px;
}

/* ---- สถานที่จัดจำหน่าย / shop-location: rebuilt layout ---- */
/* WP wraps each core/group's content in a .wp-block-group__inner-container.
   Collapse that wrapper so the real cards/content participate directly in the
   grid/flex layouts below (otherwise the grid sees one full-width child). */
body.wc-about-shop-location .page-content .wc-channels > .wp-block-group__inner-container,
body.wc-about-shop-location .page-content .wc-channel > .wp-block-group__inner-container,
body.wc-about-shop-location .page-content .wc-contact-card > .wp-block-group__inner-container,
body.wc-about-shop-location .page-content .wc-map > .wp-block-group__inner-container{
  display:contents;
}
/* Section titles (core headings used in the rebuilt page). */
body.wc-about .page-content h3.wp-block-heading{
  color:var(--ink);
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.45rem);
  letter-spacing:-.01em;
  margin:clamp(30px,3.4vw,48px) 0 20px;
}
/* Store block: the map + a contact card, side by side. */
body.wc-about-shop-location .page-content .wc-store{
  gap:clamp(18px,2vw,28px);
  align-items:stretch;
}
body.wc-about-shop-location .page-content .wc-store .wp-block-column{ min-width:0; }
body.wc-about-shop-location .page-content .wc-store .leaflet-container,
body.wc-about-shop-location .page-content .wc-store .wc-map{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--mist);
  box-shadow:var(--shadow);
}
body.wc-about-shop-location .page-content .wc-contact-card{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--mist);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:clamp(24px,2.4vw,36px);
}
body.wc-about-shop-location .page-content .wc-contact-card figure.wp-block-image{ margin:0; }
body.wc-about-shop-location .page-content .wc-contact-card figure.wp-block-image img{
  max-width:150px;
  margin:0 auto 4px;
  border:0;
  box-shadow:none;
  background:transparent;
  border-radius:0;
}
body.wc-about-shop-location .page-content .wc-contact-card p{
  margin:0;
  max-width:none;
  font-size:15px;
  line-height:1.7;
  color:var(--ink-2);
}
/* Channel grid: even auto-fit cards, each a logo + a linked name. */
body.wc-about-shop-location .page-content .wc-channels{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:14px;
}
body.wc-about-shop-location .page-content .wc-channel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:132px;
  background:var(--surface);
  border:1px solid var(--mist);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:24px 16px;
  transition:box-shadow .2s ease, transform .2s ease;
}
body.wc-about-shop-location .page-content .wc-channel{
  position:relative;   /* anchor for the stretched link */
  cursor:pointer;
}
body.wc-about-shop-location .page-content .wc-channel:hover{
  box-shadow:var(--shadow-lift);
  transform:translateY(-3px);
}
/* Whole card is clickable — the label's link is stretched over the card. */
body.wc-about-shop-location .page-content .wc-channel p a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
body.wc-about-shop-location .page-content .wc-channel figure.wp-block-image{ margin:0; }
body.wc-about-shop-location .page-content .wc-channel figure.wp-block-image img{
  height:48px;
  width:auto;
  margin:6px auto 0;
  border:0;              /* override the base plate frame — logos sit bare */
  box-shadow:none;
  background:transparent;
  border-radius:0;
  object-fit:contain;
}
body.wc-about-shop-location .page-content .wc-channel p{
  margin:0;
  max-width:none;
  text-align:center;
  font-size:14px;
  line-height:1.4;
}
/* Clean label — no underline (the logo already signals the brand); the whole
   card is the hover target, and the label picks up the red on hover. */
body.wc-about-shop-location .page-content .wc-channel p a,
body.wc-about-shop-location .page-content .wc-contact-card a{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
}
body.wc-about-shop-location .page-content .wc-channel:hover p a{ color:var(--red-deep); }
body.wc-about-shop-location .page-content .wc-contact-card a{ color:var(--red-deep); }

/* ============================================================
   MOTION — respect reduced-motion preference
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  body.wc-about *{ transition:none!important; }
}

/* ---- Forminator form (product-registration + any about-page form) — mirrors the contact page treatment ---- */
.wc-about .forminator-ui.forminator-custom-form{max-width:720px;margin-left:auto !important;margin-right:auto !important;padding:36px clamp(22px,4vw,44px) 40px !important;background:#fff !important;border:1px solid #e6e8eb !important;border-radius:20px !important;box-shadow:0 24px 60px -34px rgba(20,28,38,.5) !important}
.wc-about .forminator-custom-form .forminator-row{margin-bottom:20px}
.wc-about .forminator-custom-form .forminator-row-last{margin-bottom:0}
.wc-about .forminator-custom-form .forminator-row:empty{display:none;margin:0}
.wc-about .forminator-custom-form .forminator-label{display:block;margin-bottom:9px;font-family:"Prompt",sans-serif;font-weight:500;font-size:14.5px;color:#1a1a1a}
.wc-about .forminator-custom-form .forminator-required{color:#d72127}
.wc-about .forminator-custom-form .forminator-input,.wc-about .forminator-custom-form .forminator-textarea{width:100%;padding:14px 16px !important;font-family:"Prompt",sans-serif;font-size:16px;color:#1a1a1a;background:#f3f5f8 !important;border:1.5px solid transparent !important;border-radius:12px !important;box-shadow:none !important;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;-webkit-appearance:none;appearance:none}
.wc-about .forminator-custom-form .forminator-textarea{min-height:140px;line-height:1.6;resize:vertical}
.wc-about .forminator-custom-form .forminator-input::placeholder,.wc-about .forminator-custom-form .forminator-textarea::placeholder{color:#aab1ba}
.wc-about .forminator-custom-form .forminator-input:focus,.wc-about .forminator-custom-form .forminator-textarea:focus{background:#fff !important;border-color:#d72127 !important;box-shadow:0 0 0 4px rgba(215,33,39,.12) !important;outline:none}
.wc-about .forminator-custom-form .forminator-field-select .select2-container{width:100% !important}
.wc-about .forminator-custom-form .select2-container--default .select2-selection--single,.wc-about .forminator-custom-form .select2-container .select2-selection{height:auto !important;min-height:52px;padding:7px 12px 7px 16px !important;display:flex;align-items:center;background:#f3f5f8 !important;border:1.5px solid transparent !important;border-radius:12px !important;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.wc-about .forminator-custom-form .select2-container--open .select2-selection{background:#fff;border-color:#d72127;box-shadow:0 0 0 4px rgba(215,33,39,.12)}
.wc-about .forminator-custom-form .select2-selection__rendered{padding:0;font-family:"Prompt",sans-serif;font-size:16px;color:#1a1a1a;line-height:1.4}
.wc-about .forminator-custom-form .forminator-description{display:block;margin-top:6px;text-align:right;font-family:"Prompt",sans-serif;font-size:12.5px;color:#7c858f}
.wc-about .forminator-custom-form .forminator-button,.wc-about .forminator-custom-form .forminator-button-submit{min-width:220px;padding:15px 40px;font-family:"Prompt",sans-serif;font-weight:500;font-size:16px;color:#fff !important;background:#d72127 !important;background-image:none !important;border:0 !important;border-radius:999px !important;cursor:pointer;box-shadow:0 14px 28px -12px rgba(215,33,39,.55) !important;transition:background .16s ease,transform .16s ease,box-shadow .16s ease}
.wc-about .forminator-custom-form .forminator-button:hover,.wc-about .forminator-custom-form .forminator-button-submit:hover,.wc-about .forminator-custom-form .forminator-button-submit:focus-visible{background:#b91d22 !important;background-image:none !important;transform:translateY(-1px);box-shadow:0 18px 34px -12px rgba(215,33,39,.68) !important}
@media(max-width:1023px){.wc-about .forminator-ui.forminator-custom-form{padding:26px 18px 30px}.wc-about .forminator-custom-form .forminator-button-submit{width:100%}}

/* ---- Forminator date field: clear the calendar-icon overlap + retheme the jQuery UI datepicker from blue to brand red ---- */
.wc-about .forminator-input-with-icon{position:relative}
.wc-about .forminator-input-with-icon .forminator-input,.wc-about input.forminator-datepicker{padding-left:46px !important}
.wc-about .forminator-icon-calendar{left:16px !important;right:auto !important;color:#7c858f !important}
body.wc-about .ui-datepicker.forminator-calendar--default,body.wc-about #ui-datepicker-div{border:1px solid #e6e8eb !important;border-radius:14px !important;box-shadow:0 18px 44px -18px rgba(20,28,38,.42) !important;padding:12px !important;background:#fff !important;font-family:"Prompt",sans-serif}
body.wc-about .ui-datepicker .ui-datepicker-header{background:transparent !important;border:0 !important;padding-bottom:8px !important}
body.wc-about .ui-datepicker .ui-datepicker-prev,body.wc-about .ui-datepicker .ui-datepicker-next{background:#d72127 !important;background-image:none !important;border:0 !important;border-radius:10px !important;cursor:pointer}
body.wc-about .ui-datepicker .ui-datepicker-prev:hover,body.wc-about .ui-datepicker .ui-datepicker-next:hover{background:#b91d22 !important}
body.wc-about .ui-datepicker .ui-datepicker-prev span,body.wc-about .ui-datepicker .ui-datepicker-next span,body.wc-about .ui-datepicker .ui-datepicker-prev:before,body.wc-about .ui-datepicker .ui-datepicker-next:before{color:#fff !important;filter:brightness(0) invert(1)}
body.wc-about .ui-datepicker .ui-datepicker-title select{border:1px solid #e6e8eb !important;border-radius:8px !important;padding:6px 10px !important;font-family:"Prompt",sans-serif;color:#1a1a1a}
body.wc-about .ui-datepicker table.ui-datepicker-calendar td a,body.wc-about .ui-datepicker table.ui-datepicker-calendar td span{border:0 !important;background:transparent !important;background-image:none !important;color:#1a1a1a !important;border-radius:8px !important;text-align:center}
body.wc-about .ui-datepicker table.ui-datepicker-calendar th{color:#7c858f !important}
body.wc-about .ui-datepicker td a.ui-state-hover{background:#fdecec !important;color:#d72127 !important}
body.wc-about .ui-datepicker td .ui-state-highlight,body.wc-about .ui-datepicker td a.ui-state-highlight{background:#fdecec !important;color:#d72127 !important;border:1.5px solid #d72127 !important}
body.wc-about .ui-datepicker td .ui-state-active,body.wc-about .ui-datepicker td a.ui-state-active{background:#d72127 !important;color:#fff !important;border:1.5px solid #d72127 !important}

/* Datepicker month/year selects — give Thai text enough vertical room (was clipped) */
body.wc-about .ui-datepicker .ui-datepicker-title{height:auto !important;line-height:1.4 !important;margin:0 0 4px !important;display:flex;gap:8px;justify-content:center}
body.wc-about .ui-datepicker .ui-datepicker-title select{height:auto !important;min-height:42px !important;padding:8px 12px !important;line-height:1.5 !important;font-size:15px !important;box-sizing:border-box !important;background:#fff !important;-webkit-appearance:menulist !important;appearance:menulist !important}