/* Hallmark · v2.0.0 · theme: custom · idea: "ร้านกาแฟของทาสแมว — ถ้วยส้ม จานรองดำ ทุกส่วนวางบนจานรอง" · vibe: "warm cat café, orange cup, black saucer, cute paws" · v2 hero white+paw pattern per owner · paper light/rounded-sans/warm · anchor: tangerine oklch(72% .17 55) from owner brief (ส้มดำ) · ink: logo black · faces: Mitr (heads) + IBM Plex Sans Thai (body) · logo: owner-supplied file used as-is (white-margin trim only) · scope: theme overlay on the shared engine markup (redesign of colour/type/surface only — layout is the engine's) */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: P, the engine fixes the page structure; the argument lives in the saucer bar under every section and the orange hero cup */
/* Hallmark · answered 34 · core site.css footer uses 100vw (engine-owned, shared by 5 sites); this overlay resets it to full-bleed via box-shadow instead and clips overflow-x on html/body */
/* ═══════════════════════════════════════════════════════════════════
   moremeawmeaw (ม.เหมียวเหมียว) theme v1 — 2026-11-04 — loaded AFTER core site.css
   Sibling check (anti-footprint):
     TaladAutoCar = #FF6A00 on #14171C, crisp 6-10px corners, DARK hero band, Prompt heads
     → here: tangerine on WHITE paper, ORANGE hero (black type), round 16-20px, Mitr heads,
       black "saucer" bar under the hero and every section head (from the logo's saucer line)
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* palette */
  --paper:#FFFDFA; --paper-2:#F7F2EC; --paper-3:#EFE7DE;
  --ink-0:#141210; --ink-1:#2A2622; --muted-0:#5E5750; --faint-0:#978E85; --line-0:#EAE2D8;
  --orange:#F47B20; --orange-hi:#FF9445; --orange-deep:#B4520B; --orange-soft:#FFEEDD; --orange-mist:#FFF6EC;
  --on-orange:#141210; --on-ink:#FFF8F1; --on-ink-muted:#BFB4A9;
  --ok:#2F7D4F; --ok-soft:#E3F2E8; --warn-hue:#B4520B;
  /* engine token names (core site.css reads these) */
  --bg:var(--paper); --surface:#FFFFFF; --surface-2:var(--paper-2); --surface-3:var(--paper-3);
  --ink:var(--ink-0); --muted:var(--muted-0); --faint:var(--faint-0); --line:var(--line-0);
  --brand:var(--orange); --brand-2:var(--orange-hi); --brand-ink:var(--orange-deep); --brand-soft:var(--orange-soft);
  --accent:var(--orange); --gold:var(--orange); --gold-soft:var(--orange-soft);
  --green:var(--ok); --green-soft:var(--ok-soft); --rose:#C2410C;
  --r-sm:10px; --r-md:14px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --shadow-s:0 1px 2px rgba(20,18,16,.05),0 2px 6px rgba(20,18,16,.06);
  --shadow-m:0 10px 26px rgba(20,18,16,.10);
  --shadow-l:0 22px 48px rgba(20,18,16,.16);
  --shadow-cta:0 6px 0 var(--ink-0);
  /* type */
  --font-head:"Mitr","IBM Plex Sans Thai",system-ui,sans-serif;
  --font-body:"IBM Plex Sans Thai",system-ui,-apple-system,sans-serif;
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.14s; --t-med:.2s;
  --saucer-h:6px;
}

html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px}

/* ── type ── */
h1,h2,h3,.title,.sec-title,.rel-h h2,.brandhead h1,.price-now,.bb-price b,
.article>h1,.article-body h2,.article-body h3,.static-page h1,.static-page h2,
.art-card-t,.hero h1,.brand .wm,.fbrand .wm,.cta-primary,.bb-cta,.faq-q,
.article-faq>h2,.pcard .pp,.cat-tile b,.cat-card b,.stat b,.mk-cat-link,.mk-go{
  font-family:var(--font-head);letter-spacing:0;
}
h1,h2,h3,.sec-title{font-weight:500;overflow-wrap:break-word;min-width:0}

/* ── focus + motion floor ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;transition:none;
}
a,button,.iconbtn,.navlinks a,.navtrigger{transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── brand: the owner's cup mark, bare (no tile) ── */
.brand,.fbrand{color:var(--ink)}
.brand .mark,.fbrand .mark{background:var(--surface);box-shadow:none;border-radius:var(--r-sm);color:var(--ink);width:52px;height:52px}
.brand .mark svg{width:50px;height:50px}
.brand .wm,.fbrand .wm{font-weight:500;font-size:23px}
.brand b,.fbrand b{color:var(--ink);font-weight:500}
.iconbtn{border-radius:var(--r-md);border-color:var(--line);box-shadow:none}
.iconbtn:hover{border-color:var(--ink)}

/* ═══ MARKETPLACE HEADER — white top, BLACK catbar, orange hover rule ═══ */
.appbar.mk{padding:0;background:var(--paper);border-bottom:0;backdrop-filter:none}
.mk-top{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:22px;padding:12px 20px}
.appbar.mk .brand{flex:none;justify-content:flex-start}
.mk-search{flex:1;display:flex;align-items:center;gap:10px;max-width:640px;background:var(--surface);
  border:2px solid var(--ink);border-radius:var(--r-pill);padding:0 0 0 18px;color:var(--muted);overflow:hidden}
.mk-search:hover{border-color:var(--orange)}
.mk-search svg{color:var(--ink);flex:none}
.mk-ph{flex:1;font-size:15px;padding:11px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-go{flex:none;align-self:stretch;display:flex;align-items:center;background:var(--orange);color:var(--on-orange);
  font-weight:500;font-size:15px;padding:0 24px;border-left:2px solid var(--ink)}
.mk-catbar{background:var(--ink)}
.mk-catbar-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:stretch;gap:2px;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.mk-catbar-in::-webkit-scrollbar{display:none}
.mk-cat{position:relative;display:flex}
.mk-catbar .mk-cat-link{color:var(--on-ink);font-weight:400;font-size:15px;white-space:nowrap;
  padding:11px 13px;border-bottom:3px solid transparent;display:inline-flex;align-items:center}
.mk-catbar .mk-cat-link:hover{color:var(--orange-hi);border-bottom-color:var(--orange)}
.mk-allcats{color:var(--orange-hi)!important}
.mk-mega{display:none}
.mk-burger{display:none}
@media (max-width:919px){ .mk-burger{display:grid} .mk-catbar{display:none} }
@media (min-width:920px){
  .mk-catbar-in{overflow:visible;flex-wrap:wrap;justify-content:center}
  .mk-mega{position:absolute;top:100%;left:0;z-index:60;min-width:250px;background:var(--surface);
    border:2px solid var(--ink);border-top:4px solid var(--orange);border-radius:0 0 var(--r-md) var(--r-md);
    box-shadow:var(--shadow-l);padding:8px;grid-template-columns:minmax(0,1fr);gap:1px}
  .mk-cat:hover .mk-mega,.mk-cat:focus-within .mk-mega{display:grid}
  .mk-mega a{color:var(--ink);font-weight:500;font-size:15px;white-space:nowrap;padding:9px 12px;border-radius:var(--r-sm)}
  .mk-mega a:hover{background:var(--orange-soft);color:var(--ink)}
  .mk-mega .mk-mega-all{color:var(--orange-deep);font-weight:600;border-top:1px solid var(--line);margin-top:4px;border-radius:0}
}
@media (max-width:760px){
  .mk-top{flex-wrap:wrap;gap:10px;padding:10px 15px}
  .mk-search{max-width:none;order:3;flex-basis:100%}
  .mk-go{padding:0 18px}.mk-ph{font-size:14px}
  .mk-catbar-in{padding:0 15px}
  .brand .wm{font-size:20px}
}

/* ═══ HERO v2 (11-04 owner: "ส้มดำหนักไป เอาขาวมาเบรก + ลายตีนแมว") — white paper, faint orange paws, orange rim, black saucer ═══ */
.hero{
  position:relative;isolation:isolate;text-align:left;color:var(--ink);
  background:var(--surface);
  border:2.5px solid var(--orange);border-radius:var(--r-xl);box-shadow:0 6px 0 var(--orange-soft);
  overflow:visible;margin-bottom:34px;
}
.hero::before{ /* scattered paw prints, tinted via mask so the colour stays a token */
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--orange-soft);
  -webkit-mask:url("/assets/img/icons/paw-tile.svg") 0 0/150px 150px repeat;mask:url("/assets/img/icons/paw-tile.svg") 0 0/150px 150px repeat;
}
.hero::after{ /* the saucer */
  content:"";position:absolute;left:6%;right:6%;bottom:-18px;height:var(--saucer-h);
  background:var(--ink);border-radius:var(--r-pill);
}
.hero h1{color:var(--ink);font-weight:600;font-size:30px;line-height:1.3}
.hero p{color:var(--muted);opacity:1;max-width:620px}
.hero .search{border:2.5px solid var(--ink);border-radius:var(--r-pill);box-shadow:0 4px 0 var(--orange);background:var(--surface)}
.hero .search svg{color:var(--orange-deep)}
.hero-pop span{color:var(--ink);opacity:1;font-weight:500}
.hero-pop a{background:var(--orange-soft);color:var(--ink);border:1.5px solid transparent;font-weight:500}
.hero-pop a::before{content:"";display:inline-block;width:13px;height:13px;margin-right:6px;vertical-align:-1px;background:var(--orange);
  -webkit-mask:url("/assets/img/icons/paw.svg") center/contain no-repeat;mask:url("/assets/img/icons/paw.svg") center/contain no-repeat}
.hero-pop a:hover{background:var(--orange);color:var(--on-orange);border-color:var(--ink)}
.hero-pop a:hover::before{background:var(--ink)}
@media (min-width:920px){ .hero h1{font-size:42px} }

/* ── section heads: a short black saucer under each ── */
.sec-title,.rel-h h2,.home-about h2,.article-faq>h2{position:relative;padding-bottom:14px;border-left:0;padding-left:0;color:var(--ink)}
.sec-title::after,.rel-h h2::after,.home-about h2::after,.article-faq>h2::after{
  content:"";position:absolute;left:0;bottom:0;width:48px;height:var(--saucer-h);border-radius:var(--r-pill);background:var(--ink);
}
.sec-title::before,.home-about h2::before,.article-faq>h2::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.35em;vertical-align:-.08em;background:var(--orange);
  -webkit-mask:url("/assets/img/icons/paw.svg") center/contain no-repeat;mask:url("/assets/img/icons/paw.svg") center/contain no-repeat}
.sec-more,.see-all{color:var(--orange-deep);font-weight:500}

/* ── category tiles: white cup on a paper table ── */
.cat-tile,.cat-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.cat-tile:hover,.cat-card:hover{border-color:var(--ink);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.cat-tile .ci,.cat-card .ci{background:var(--orange-soft);color:var(--ink);border-radius:50%}
.cat-tile:hover .ci,.cat-card:hover .ci{background:var(--orange);color:var(--ink)}
.cat-tile .cat-go{background:var(--ink);color:var(--orange-hi);border-radius:50%}
.cat-tile b,.cat-card b{font-weight:500}
/* cute category icons (site assets, no core change): hide engine svg, draw mask by href */
.cat-tile .ci svg,.cat-card .ci svg{display:none}
.cat-tile .ci,.cat-card .ci{position:relative}
.cat-tile .ci::before,.cat-card .ci::before{content:"";position:absolute;inset:22%;background:var(--orange-deep);
  -webkit-mask:var(--ic,url("/assets/img/icons/paw.svg")) center/contain no-repeat;mask:var(--ic,url("/assets/img/icons/paw.svg")) center/contain no-repeat}
.cat-tile:hover .ci::before,.cat-card:hover .ci::before{background:var(--ink)}
a[href^="/category/dry-food/"] .ci{--ic:url("/assets/img/icons/dry-food.svg")}
a[href^="/category/wet-food/"] .ci{--ic:url("/assets/img/icons/wet-food.svg")}
a[href^="/category/cat-treats/"] .ci{--ic:url("/assets/img/icons/cat-treats.svg")}
a[href^="/category/cat-litter/"] .ci{--ic:url("/assets/img/icons/cat-litter.svg")}
a[href^="/category/litter-box/"] .ci{--ic:url("/assets/img/icons/litter-box.svg")}
a[href^="/category/cat-furniture/"] .ci{--ic:url("/assets/img/icons/cat-furniture.svg")}
a[href^="/category/feeding/"] .ci{--ic:url("/assets/img/icons/feeding.svg")}
a[href^="/category/toys/"] .ci{--ic:url("/assets/img/icons/toys.svg")}
a[href^="/category/walk-wear/"] .ci{--ic:url("/assets/img/icons/walk-wear.svg")}
a[href^="/category/grooming/"] .ci{--ic:url("/assets/img/icons/grooming.svg")}
a[href^="/category/health-care/"] .ci{--ic:url("/assets/img/icons/health-care.svg")}

/* ── product + brand cards ── */
.pcard,.bcard{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.pcard:hover,.bcard:hover{border-color:var(--ink);box-shadow:var(--shadow-m)}
.pcard .pp,.price-now,.bb-price b,.apcard-price{color:var(--ink);font-weight:600}
.bmono{background:var(--orange-soft);color:var(--ink);border-radius:var(--r-sm)}
.chip.official{background:var(--ok-soft);color:var(--ok)}
.chip.top{background:var(--orange-soft);color:var(--orange-deep)}

/* ── CTAs: orange pill, black type, black "saucer" shadow that presses down ── */
.cta-primary,.bb-cta,.apcard-cta{background:var(--orange);color:var(--on-orange);border:2px solid var(--ink);border-radius:var(--r-pill);
  box-shadow:0 4px 0 var(--ink);font-weight:500;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.cta-primary:hover,.bb-cta:hover,.apcard-cta:hover{background:var(--orange-hi)}
.cta-primary:active,.bb-cta:active,.apcard-cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.cta-secondary,.more-btn{border:2px solid var(--ink);color:var(--ink);border-radius:var(--r-pill);background:var(--surface)}
.cta-secondary:hover,.more-btn:hover{background:var(--ink);color:var(--on-ink)}
.searchbox{border:2px solid var(--ink);border-radius:var(--r-pill)}
.searchbox svg{color:var(--ink)}
.feat .fi{color:var(--ink);background:var(--orange-soft);border-radius:50%}
.subchip,.opt{border-radius:var(--r-pill)}
.subchip.on,.opt.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* ── product page accordion + EEAT ── */
.acc-item,.rel-art,.eeat{border-color:var(--line);border-radius:var(--r-md)}
.acc-h{background:var(--paper-2);color:var(--ink)}
.acc-h .cx,.ra-tag{color:var(--orange-deep)}
.acc-b strong{color:var(--ink)}
.eeat{background:var(--orange-mist)}
.eeat-links a{border-color:var(--line);color:var(--ink)}
.eeat-note{color:var(--muted)}

/* ═══ FOOTER — black saucer under the whole page ═══ */
.site-footer.fB{margin-top:56px;width:auto;margin-left:0;background:var(--ink);border-top:0;
  box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
.fB-hero{text-align:center;padding:42px 20px 26px;border-bottom:1px solid var(--ink-1)}
.fB-hero .fbrand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:500;font-size:22px;color:var(--on-ink)}
.fB-hero .fbrand .mark{width:64px;height:64px;background:var(--surface);border-radius:var(--r-md);display:grid;place-items:center}
.fB-hero .fbrand .mark svg{width:58px;height:58px}
.fB-hero .fbrand b{color:var(--on-ink)}
.fB-tag{font-size:15px;color:var(--on-ink-muted);margin:12px auto 0;max-width:520px;line-height:1.75}
.fB-links{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:26px 20px}
.fB-links a{font-size:14px;color:var(--on-ink);background:var(--ink-1);border:1px solid #3A342E;border-radius:var(--r-pill);padding:9px 18px}
.fB-links a:hover{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.fB-bot{border-top:1px solid var(--ink-1);text-align:center;padding:18px 20px;font-size:13px;color:var(--on-ink-muted);line-height:1.6}