/* ============================================================
   1. THEME  — colours, fonts, page size. Change branding here.
      --pw/--ph = page size, 1:1.372 to match the Canva page.
   ============================================================ */
:root{
  --brown:#5C3A21; --brown-lt:#8A6A4A; --label:#9A7B52; --value:#2C2C2C;
  --panel:#F2F2F2; --page:#FFFFFF; --rule:#C9C2B6; --green:#1FA84B;
  --disp:"Bai Jamjuree",system-ui,sans-serif; --body:"Mitr",system-ui,sans-serif;
  --slate:#20262b; --slate-2:#2b333a; --line:#171c20; --muted:#7d8790; --accent:#1f6f63;
  --pw:596px; --ph:818px;   /* A4 ratio, matches Canva 4:3 page proportions closely */
}
*{box-sizing:border-box}
html{touch-action:manipulation}

/* ============================================================
   2. PAGE FRAME — the white catalogue page and its dark surround
   ============================================================ */

.page{width:var(--pw);height:var(--ph);background:var(--page);position:relative;
  padding:24px 26px 20px;margin-left:-2px;box-shadow:0 18px 50px rgba(0,0,0,.45);overflow:hidden}
.eyebrow{font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brown-lt);margin:0 0 2px}
h1{font-family:var(--disp);font-weight:400;font-size:28px;color:var(--brown);
  margin:0 0 0px;letter-spacing:-.01em;line-height:1.35}
h1 .th{font-family:var(--body);font-weight:400}
.notice{font-family:var(--body);font-size:8.5px;line-height:1.3;color:var(--brown);
  margin:0;background:#fbeaea;padding:3px 7px;border-radius:4px;display:inline-block;white-space:nowrap}
.hrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.hrow h1{font-size:13px}


/* ============================================================
   3. PRODUCT GRID + CARDS — 3 columns. Card = image, optional
      Thai label, then the Product/Brand/Weight rows.
   ============================================================ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:263px 263px 150px;
  gap:9px;align-content:start}
.card{background:var(--panel);padding:10px 5px;position:relative;height:100%;
  display:flex;flex-direction:column;cursor:pointer;border:1px solid transparent;overflow:hidden}
.card:hover{border-color:var(--brown-lt)}
.shot{height:165px;display:flex;align-items:center;justify-content:center;margin-bottom:-5px;position:relative}
.shot img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.shot img.fill{object-fit:cover}
.shot.err::after{content:"image not loading";position:absolute;inset:0;display:grid;place-items:center;
  font-size:8px;color:#b33;background:#fbeaea}

/* --- badges: Vegan/GF stack top-right, Bestseller flag top-left --- */
.badges{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:4px;z-index:2}
.flag{position:absolute;top:-12px;left:-6px;z-index:2;width:62px;height:auto;display:block}
.card.wide .flag{top:-10px;left:-5px;width:57px}
.badges img{width:22px;height:22px;object-fit:contain}


/* --- the three labelled rows inside each card --- */
.row{display:grid;grid-template-columns:52px 1fr;gap:5px;align-items:baseline;
  border-bottom:1px solid var(--rule);padding:3px 0 4px;margin-bottom:-1px}
.row:last-child{margin-bottom:0}
.k{font-family:var(--body);font-weight:300;font-size:9px;color:var(--label)}
.v{font-family:var(--body);font-weight:400;font-size:8.5px;color:var(--value);margin-left:-15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row.pname .v{min-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}                /* 2 lines — keeps rows below aligned */
.card.wide .row.pname .v{min-height:0}          /* wide card has room, no need */
.thai{font-family:var(--body);font-size:10px;color:var(--value);text-align:center;
  margin:5px 0 0px;min-height:0}


/* --- wide card: last product on a 7-item page, sits beside the CTA --- */
.card.wide{grid-column:span 2;flex-direction:row;align-items:center;gap:2px;padding:10px 16px}
.card.wide .shot{height:132px;flex:0 0 150px;margin:0}
.card.wide .fields{flex:1;max-width:230px}
.card > .row:first-of-type{margin-top:auto}     /* push field block to the bottom */
.card.wide .badges{top:10px;right:10px;flex-direction:row}

/* ============================================================
   4. CTA CELL — LINE button + contact block, bottom-right of page
   ============================================================ */
.cta{background:var(--panel);padding:14px 13px;display:flex;flex-direction:column;
  justify-content:center;gap:10px;grid-column:3;grid-row:3}
.line{background:var(--green);color:#fff;border-radius:22px;padding:8px 14px;
  display:flex;align-items:center;gap:9px;justify-content:center;text-decoration:none}
.line b{font-family:var(--body);font-weight:400;font-size:11px;line-height:1.25;display:block}
.line small{font-size:9px;opacity:.95;display:block;line-height:1.2}
.line .ic{width:24px;height:24px;flex:0 0 24px;object-fit:contain;display:block}
.contact .li{width:13px;height:13px;object-fit:contain;flex:0 0 13px}
.contact{font-size:9px;color:var(--value);line-height:1.95}
.contact .hd{color:var(--brown-lt);font-size:8.5px;margin-bottom:4px}
.contact div{display:flex;align-items:center;gap:5px}
.curl{position:absolute;right:0;bottom:0;width:52px;height:52px;
  background:linear-gradient(135deg,transparent 50%,#DcDcDc 50%,#F7F7F7 72%,#9A9A9A 100%)}


/* ============================================================
   5. PRODUCT POPUP — opens on card click
   ============================================================ */
dialog{border:0;padding:0;max-width:552px;width:calc(100% - 32px);border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
dialog::backdrop{background:rgba(30,22,14,.62)}
.mbody{padding:22px 22px 18px}
.mshot{height:480px;display:grid;place-items:center;background:var(--panel);
  margin:-22px -22px 13px;padding:22px;overflow:hidden}
.mshot.none::after{content:"no image";font-size:11px;color:#aaa}
.mshot img{display:block;width:100%;height:432px;object-fit:contain;mix-blend-mode:multiply}
.mbody h2{font-family:var(--disp);font-size:17px;color:var(--brown);margin:0 0 2px;font-weight:600}
.mbody .sub{font-size:9.5px;color:var(--label);margin:0 0 12px;display:flex;justify-content:space-between;align-items:center}
.langbtn{font-size:9.5px;padding:3px 9px;border-radius:10px;border:1px solid #DAD4C8;background:#fff;color:var(--brown);cursor:pointer;font-family:var(--body)}

/* --- early-access block: replaces the old spec table --- */
.early{background:#FAF7F2;border:1px solid #E6DDCF;border-radius:3px;padding:10px 11px}
.early b{display:block;font-family:var(--disp);font-size:10.5px;color:var(--brown);
  font-weight:600;margin-bottom:4px}
.early p{margin:0;font-size:9px;line-height:1.5;color:#6A6055}
.mrow{display:grid;grid-template-columns:74px 1fr;gap:8px;font-size:11px;
  border-bottom:1px solid #EAE6DE;padding:7px 0}
.mrow span:first-child{color:var(--label)}
.mcta{display:block;margin-top:11px;background:var(--brown);color:#fff;text-align:center;
  padding:9px;text-decoration:none;font-size:10.5px;border-radius:3px}
.mcta small{display:block;font-size:8px;opacity:.75;margin-top:2px}
.mclose{position:absolute;top:8px;right:10px;z-index:2;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.85);border:0;font-size:17px;color:#6a6a6a;cursor:pointer;line-height:1}
.mclose:hover{background:#fff;color:#222}
.mdesc{font-size:12px;line-height:1.6;color:var(--value);margin:0 0 10px}
.mbullets{margin:0 0 12px;padding-left:18px;font-size:11.5px;line-height:1.6;color:var(--value)}
.mbullets li{margin-bottom:4px}
.vtoggle{display:flex;gap:8px;margin:0 0 10px}
.vbtn{font-size:11px;padding:6px 12px;border-radius:14px;border:1px solid #DAD4C8;background:#fff;color:#6B6155;cursor:pointer;font-family:var(--body)}
.vbtn.on{background:var(--brown);border-color:var(--brown);color:#fff}

/* ============================================================
   6. SHELL — panel + stage layout (geometry from the prototype)
   ============================================================ */
html,body{height:100dvh}
body{margin:0;display:grid;grid-template-columns:288px 1fr;grid-template-rows:100dvh;
  background:var(--slate);color:#e9ecef;font-family:var(--body);overflow:hidden;padding:0}
  
body.panel-hidden{grid-template-columns:0 1fr}

/* --- panel --- */
.panel{background:var(--slate-2);border-right:1px solid var(--line);display:flex;
  flex-direction:column;min-height:0;overflow:hidden;transition:opacity .15s}
body.panel-hidden .panel{opacity:0;pointer-events:none}
.brand{padding:14px 18px;border-bottom:1px solid var(--line);flex:0 0 auto;
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
  
.brand img{width:112px;height:auto;display:block;filter:brightness(0) invert(1);opacity:.92}
.brand p{margin:7px 0 0;font-family:var(--body);font-size:10px;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase}

.scrollarea{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#filters{overflow-y:auto;padding:15px 18px 18px;flex:1 1 0;min-height:0;max-height:none}
#filters.compact{max-height:350px}
.label{font-family:var(--body);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:20px 0 8px;display:flex;justify-content:space-between;align-items:center}
.label:first-child{margin-top:0}
.label button{background:none;border:0;color:#8fb9b0;font:inherit;cursor:pointer;text-decoration:underline}

.search{width:100%;padding:10px 11px;background:#171c20;border:1px solid #333c44;border-radius:3px;
  color:#e9ecef;font-family:var(--body);font-size:14px}
.search:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.search::placeholder{color:#6a747c}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--body);font-size:11px;padding:6px 9px;border-radius:2px;cursor:pointer;
  background:transparent;border:1px solid #3c454d;color:#b9c2c9;white-space:nowrap}
.chip:hover{border-color:#5c666e}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.chip i{font-style:normal;opacity:.5;font-size:9.5px;margin-left:5px}
.chips.scrollbox{max-height:132px;overflow-y:auto;padding-right:4px;align-content:flex-start}

/* folding sections */
.foldhead{width:100%;display:flex;align-items:center;gap:8px;background:none;border:0;
  border-bottom:1px solid #2f383f;padding:10px 2px;cursor:pointer;color:#dfe4e8;
  font-family:var(--body);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.foldhead:hover{color:#fff}
.foldhead .chev{margin-left:auto;font-size:8px;transition:transform .15s;color:#8b959c}
.foldhead[aria-expanded="true"] .chev{transform:rotate(90deg);color:var(--accent)}
.tag{font-family:var(--body);font-size:9.5px;background:var(--accent);color:#fff;
  border-radius:2px;padding:2px 6px;text-transform:none;letter-spacing:0}
.foldbody{padding:12px 0 4px}

/* category rows */
.tree{font-size:13px}
.drow{width:100%;display:grid;grid-template-columns:1fr auto 34px;gap:8px;align-items:center;
  background:none;border:0;border-bottom:1px solid #2f383f;padding:7px 2px;cursor:pointer;
  color:#dfe4e8;font-family:var(--body);font-size:13px;text-align:left;line-height:1.25}
.drow:hover{background:#252d33;color:#fff}
.drow.on{background:#232b31;box-shadow:inset 2px 0 0 var(--accent);color:#fff}
.drow .ct{font-family:var(--body);font-size:9.5px;color:#a8b6bd;background:#333d44;
  border-radius:9px;padding:2px 7px;min-width:24px;text-align:center;line-height:1.4}
.drow.on .ct{background:var(--accent);color:#fff}
.drow .pg{font-family:var(--body);font-size:9.5px;color:#6f797f;text-align:right}
.catrow{display:flex;align-items:stretch}
.catrow .drow{flex:1}
.chev-btn{width:28px;flex:0 0 28px;background:none;border:0;border-bottom:1px solid #2f383f;
  color:#8b959c;cursor:pointer;font-size:10px}
.chev-btn:hover{color:#fff}
.subtree{padding-left:14px;padding-right:28px}
.subrow{width:100%;display:grid;grid-template-columns:1fr 34px;gap:8px;align-items:center;
  background:none;border:0;border-bottom:1px solid #2a3238;padding:6px 2px;cursor:pointer;
  color:#b9c2c9;font-family:var(--body);font-size:12px;text-align:left}
.subrow:hover{background:#252d33;color:#fff}
.subrow.on{background:#232b31;box-shadow:inset 2px 0 0 var(--accent);color:#fff}
.subrow .ct{font-family:var(--body);font-size:9px;color:#8b959c;text-align:right}

/* results pane */
#resWrap[hidden]{display:none}
#resWrap{flex:1 1 0;min-height:0;display:flex;flex-direction:column;
  border-top:1px solid var(--line);background:#262e34;padding:12px 18px 0}
.count{font-family:var(--body);font-size:11px;color:var(--muted);margin:0 0 6px;display:block}
.results{overflow-y:auto;flex:1;min-height:0;padding-bottom:14px}
.res{width:100%;display:grid;grid-template-columns:1fr 40px;grid-template-rows:auto auto;gap:2px 8px;
  background:none;border:0;border-bottom:1px solid #2f383f;padding:8px 2px;cursor:pointer;
  text-align:left;color:#dfe4e8}
.res:hover{background:#252d33}
.res b{grid-area:1/1/2/2;font-weight:500;font-size:13.5px}
.res .sub{grid-area:2/1/3/2;font-family:var(--body);font-size:9.5px;color:var(--muted);line-height:1.35}
.res .pg{grid-area:1/2/3/3;align-self:center;text-align:right;font-family:var(--body);
  font-size:9.5px;color:#6f797f}
.empty{font-size:13px;color:#a8b1b8;line-height:1.5;padding:6px 0}
.fbar{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.fpill{display:inline-flex;align-items:center;gap:6px;background:#22322e;border:1px solid #2f4f47;
  color:#9fd6c9;border-radius:2px;padding:5px 7px;font-family:var(--body);font-size:9.5px;cursor:pointer}
.fpill:hover{border-color:#4d7d71;color:#fff}
.fpill b{font-weight:400;opacity:.55}
.fpill em{font-style:normal;opacity:.6;font-size:11px}

/* --- stage --- */
.stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;
  overflow:hidden;padding:14px}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 42%,transparent 45%,rgba(0,0,0,.45) 100%)}
.viewport{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1}
.scaler{transform-origin:top left;position:relative}
.spread{display:flex;gap:2px;align-items:flex-start}
body.single .page.right{display:none}

.nav{flex:0 0 46px;display:flex;align-items:center;justify-content:center;gap:14px;
  color:#ddd;font-family:var(--body);font-size:13px}
  
.nav button{width:36px;height:36px;border-radius:50%;border:1px solid #3c454d;background:#262e34;
  color:#dfe4e8;cursor:pointer;font-size:15px;line-height:1}
.nav button:hover:not(:disabled){border-color:var(--accent);color:#fff}
.nav button:disabled{opacity:.3;cursor:default}
.nav .tick{font-family:var(--body);font-size:11.5px;color:#9aa4ac;min-width:120px;
  text-align:center;letter-spacing:.05em}

/* panel toggle */
.ptoggle{position:fixed;top:7px;left:52px;z-index:40;width:32px;height:32px;border-radius:6px;
  background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.16);color:#dcdcdc;cursor:pointer;
  font-size:14px;line-height:1;display:grid;place-items:center;transition:left .18s}
body:not(.panel-hidden) .ptoggle{left:auto;right:auto;margin-left:250px}
.ptoggle:hover{background:rgba(0,0,0,.5);color:#fff}

.homebtn{position:fixed;top:7px;left:12px;z-index:40;width:32px;height:32px;border-radius:6px;
  background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.16);color:#dcdcdc;cursor:pointer;
  display:grid;place-items:center;transition:left .18s}
body:not(.panel-hidden) .homebtn{left:auto;right:auto;margin-left:210px}
.homebtn:hover{background:rgba(0,0,0,.5);color:#fff}

.card.hit{outline:3px solid #E0B33A;outline-offset:-2px}
/* ============================================================
   12. STATE GATE — first screen, choose state -> warehouse
   ============================================================ */
.gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:24px;background:url("img/background-wide.jpg") center/cover no-repeat}
.gate::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.35)}
.gate .box{position:relative;z-index:1;width:100%;max-width:430px;background:#fff;
  border-radius:8px;padding:34px 32px 26px;box-shadow:0 26px 70px rgba(60,42,20,.28);text-align:center}
.gate img.logo{width:172px;height:auto;display:block;margin:0 auto 22px}
.gate h2{font-family:var(--disp);font-size:23px;color:var(--brown);margin:0 0 5px;font-weight:700}
.gate .lead{margin:0 0 20px;font-size:12px;color:#7A7062;line-height:1.5}
.states{display:flex;flex-direction:column;gap:9px;text-align:left}
.state{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;
  border:1px solid #DFD8CB;border-radius:8px;padding:14px 16px;cursor:pointer;
  font-family:var(--body);transition:border-color .12s,background .12s}
.state:hover{border-color:var(--brown-lt);background:#FCFAF6}
.state b{display:block;font-weight:400;font-size:15px;color:var(--value);text-align:left}
.state small{display:block;font-size:10.5px;color:var(--label);margin-top:2px;text-align:left}
.state .go{color:var(--brown-lt);font-size:16px}
.state:disabled{opacity:.55;cursor:not-allowed}
.state .soon{font-size:10px;color:#9A9184}
.gate .fine{margin:16px 0 0;font-size:10px;color:#9A9184}

/* state shown in the nav bar */
.whbtn{position:fixed;top:14px;right:16px;z-index:20;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:5px 11px;
  font-family:var(--body);font-size:11px;color:#cfcfcf;cursor:pointer;letter-spacing:.02em}
.whbtn:hover{background:rgba(0,0,0,.45);color:#fff;border-color:rgba(255,255,255,.4)}
.whlink{margin:0 0 -5px 70px;background:none;border:none;padding:0;font-family:var(--body);
  font-size:9px;color:#8a8a8a;text-decoration:underline;cursor:pointer;white-space:nowrap}
.whlink:hover{color:#333}
.whRow{display:flex;align-items:center;gap:8px}

/* ==================================================================
    13. MOBILE + IPAD css responsive RULE
    =================================================================== */
@media (max-width:600px) and (orientation:portrait){
  .nav{padding-bottom:120px}
}
/* mobile onclick - panel over wholescreen */
@media (max-width:600px) and (orientation:portrait){
  body:not(.panel-hidden) .panel{
      position:fixed;inset:0;width:100vw;height:100dvh;z-index:30;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    #ptoggle{
        position:fixed !important;
        top:12px;
        right:12px;
        left:auto;
        margin-left:0;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .brand{
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:6px;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .whRow{
        width:100%;
        justify-content:space-between;
    }
    .whlink{
        margin:0;
    }
}