/* Phones: the home page header's ☰ menu, and a compact account button on every page.
   The build wraps the home header's ขาย/เช่า toggle, category icons and search in .kc-hmenu; on wider
   screens that wrapper is display:contents, so the desktop header is unchanged. static/kc.js opens and
   closes it by setting data-kc-open on <header>. */
.kc-hburger,.kc-menu-only{display:none!important} /* !important: the copied TH/EN box has an inline display */

@media (min-width:768px){
  .kc-hmenu{display:contents}
}

/* Header account controls (tools/build-pages.mjs accountControls): ⚙ ตั้งค่า (language + category menu
   style), "เข้าสู่ระบบ" when signed out, the avatar ▾ account menu when signed in. Same on every page. */
header [data-kc-lang-bar],header .kc-hmenu .kc-lang,header .kc-lang-label{display:none!important}
header .kc-hbtn,header .kc-acct,header .kc-login{box-sizing:border-box;height:36px;border:2px solid var(--color-divider);border-radius:999px;background:var(--color-bg);color:var(--color-text);cursor:pointer;display:flex;align-items:center;flex:0 0 auto;transition:background .15s,border-color .15s}
header .kc-hbtn{list-style:none;justify-content:center;width:36px}
header .kc-hbtn::-webkit-details-marker,header .kc-acct::-webkit-details-marker{display:none}
header .kc-hbtn:hover,header .kc-acct:hover,header details[open] > .kc-hbtn,header details[open] > .kc-acct{background:var(--color-surface);border-color:var(--color-text)}
header .kc-hbtn:focus-visible,header .kc-acct:focus-visible,header .kc-login:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
header .kc-acct{gap:4px!important;padding:0 8px 0 2px!important;height:36px!important}
header .kc-acct > :not(:first-child){display:none!important}
header .kc-acct > :first-child{width:28px!important;height:28px!important}
header .kc-acct::after{content:"";width:6px;height:6px;margin:0 2px 3px 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
header details[open] > .kc-acct::after{transform:rotate(-135deg);margin-bottom:-3px}
header .kc-login{gap:6px;padding:0 14px;border-color:var(--color-text);background:var(--color-text);color:var(--color-bg);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
header .kc-login:hover{opacity:.88}
header .kc-set-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:1000;width:240px;box-sizing:border-box;padding:12px;background:var(--color-bg);border:2px solid var(--color-divider);border-radius:12px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:12px}
header .kc-set-row{display:flex;flex-direction:column;gap:6px}
header .kc-set-label{font-size:12px;font-weight:600;color:var(--color-neutral-700)}
header .kc-seg > *{color:var(--color-text)}
@media (max-width:767px){
  header .kc-login{width:36px;padding:0;justify-content:center}
  header .kc-login-text{display:none}
  header .kc-set-nav{display:none!important} /* phones always show the category menu as text */
  /* Menus open as a sheet across the screen under the header, not a narrow box off the right edge. */
  header details[data-menu] > [role=menu],header .kc-set-pop{position:fixed!important;left:12px!important;right:12px!important;top:64px!important;width:auto!important;min-width:0!important;z-index:2200!important}
}

@media (max-width:767px){
  /* Headers without the ☰ menu (e.g. Login: logo + category icons) wrap onto a second row instead of
     running past the screen edge. */
  header > div{flex-wrap:wrap!important;row-gap:8px;column-gap:8px!important}
  /* The account button shows only its initial (some pages also print "ล็อกอินแล้ว" in it). */
  header details[data-menu=profile] > summary > :not(:first-child){display:none!important}
  header details[data-menu=profile] > summary{padding:0 2px!important}
  header .kc-hburger{all:unset;box-sizing:border-box;display:flex!important;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:12px;border:2px solid var(--color-divider);background:var(--color-bg);color:var(--color-text);cursor:pointer}
  header .kc-hburger:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
  header .kc-hburger .kc-x{display:none}
  header[data-kc-open] .kc-hburger{background:var(--color-surface)}
  header[data-kc-open] .kc-hburger .kc-bars{display:none}
  header[data-kc-open] .kc-hburger .kc-x{display:block}
  header [data-kc-lang-bar]{display:none!important}

  header .kc-hmenu{display:none}
  header[data-kc-open] .kc-hmenu{
    display:flex;flex-direction:column;align-items:stretch;gap:12px;
    position:absolute;left:0;right:0;top:100%;z-index:2100;
    padding:16px clamp(16px,4vw,24px) 20px;background:var(--color-bg);
    border-bottom:2px solid var(--color-divider);box-shadow:0 12px 24px rgba(0,0,0,.12);
    max-height:calc(100dvh - var(--hdr-h,64px));overflow-y:auto;overscroll-behavior:contain
  }
  .kc-hmenu .kc-menu-only{display:block!important}
  .kc-hmenu .kc-menu-label{font-size:12px;font-weight:700;color:var(--color-neutral-700);margin-bottom:-4px}
  /* Search first, then ขาย/เช่า, then categories, then language. */
  .kc-hmenu > form[role=search]{order:1;max-width:none!important;min-width:0!important;flex:none!important;width:100%}
  .kc-hmenu > form[role=search] input{height:40px!important;font-size:16px!important}
  .kc-hmenu > form[role=search] button{width:34px!important;height:34px!important}
  .kc-hmenu > .kc-deal{order:2!important;align-self:flex-start!important} /* !important: its inline "all:unset" resets order */
  .kc-hmenu > .kc-cat-label{order:3}
  .kc-hmenu > .kc-nav-wrap{order:4;position:static!important}
  .kc-hmenu > .kc-lang-label{order:6}
  .kc-hmenu > .kc-lang{order:7;align-self:flex-start;display:flex!important}
  .kc-phone-blank{font-size:0!important}
  .kc-hmenu nav[aria-label="หมวดหมู่หลัก"]{flex-wrap:wrap;gap:6px!important}
  /* The sub-category popup flows inside the panel instead of floating past the screen edge. */
  /* relative, not static: it must keep its z-index above the full-screen layer that closes it on outside taps. */
  .kc-hmenu .kc-nav-pop{position:relative!important;left:auto!important;top:auto!important;margin-top:8px;max-width:100%!important;overflow-x:auto}
}



/* Phones and iPads: a compact footer. The contact cards (tel / mail / LINE / Facebook) become one row of
   round icons; their text stays readable to screen readers, and the Worker puts it in title/aria-label.
   The markup gets these classes in tools/build-pages.mjs (markFooterLayout). */
@media (max-width:1023px){
  footer .kc-foot{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;padding-top:12px!important;padding-bottom:10px!important}
  /* Logo and links share a line when there's room. */
  footer .kc-foot-brand{flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:6px 16px!important}
  footer .kc-foot-tag{display:none!important}
  /* "ติดต่อเรา" sits beside its round icons; the hours go underneath. */
  footer section[aria-label="ติดต่อเรา"]{grid-column:auto!important;flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:6px 12px!important}
  footer section[aria-label="ติดต่อเรา"] h2{font-size:15px!important}
  footer .kc-foot-cards{display:flex!important;flex-wrap:wrap;gap:8px!important}
  footer .kc-foot-cards > [data-kc-card]{position:relative;flex:0 0 auto;width:40px;height:40px;padding:0!important;border-radius:50%!important;justify-content:center;gap:0!important}
  footer .kc-foot-cards > [data-kc-card] svg{width:20px;height:20px}
  footer .kc-foot-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  footer p[data-kc-card=hours]{flex-basis:100%;font-size:12px!important}
  footer > div:not(.kc-foot){padding-top:8px!important;padding-bottom:10px!important}
}

/* Computers: one short band. Logo and links on one line with the tagline under them on the left; on the right "ติดต่อเรา"
   with the hours beside it, then the contact cards in one row as icon + value (never broken mid-word;
   the card's name is in its title/aria-label, set by the Worker). */
@media (min-width:1024px){
  footer .kc-foot{grid-template-columns:minmax(360px,1fr) minmax(0,auto)!important;align-items:center;gap:10px 40px!important;padding-top:14px!important;padding-bottom:12px!important}
  footer .kc-foot-brand{flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:4px 20px!important;min-width:0}
  footer .kc-foot-brand > nav{order:1}
  footer .kc-foot-tag{order:2;flex-basis:100%;font-size:13px!important;max-width:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  footer section[aria-label="ติดต่อเรา"]{grid-column:auto!important;display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"h hours" "cards cards";align-items:baseline;gap:6px 12px!important}
  footer section[aria-label="ติดต่อเรา"] h2{grid-area:h;font-size:15px!important}
  footer section[aria-label="ติดต่อเรา"] .kc-foot-cards{grid-area:cards;display:flex!important;flex-wrap:wrap;gap:8px!important}
  footer p[data-kc-card=hours]{grid-area:hours;font-size:12px!important}
  footer .kc-foot-cards > [data-kc-card]{flex:0 0 auto;padding:6px 12px!important;gap:8px!important}
  footer .kc-foot-text > span:first-child{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  footer .kc-foot-text [data-kc]{white-space:nowrap;overflow-wrap:normal!important;font-size:15px}
  footer > div:not(.kc-foot){padding-top:8px!important;padding-bottom:10px!important}
}

/* Home map on phones: a smaller status box and locate button, and the selected listing as a card along the
   bottom of the map (photo + price + title + details link) instead of a photo box over the map popup.
   Classes from tools/build-pages.mjs (TEMPLATE.Home); on phones a pin opens this card, not the popup. */
.kc-sel-info,.kc-sel-tip{display:none}
@media (max-width:767px){
  .kc-map-top{left:10px!important;top:10px!important;right:10px!important;gap:6px!important}
  .kc-map-status{font-size:12px!important;padding:5px 10px!important;border-radius:12px!important;line-height:1.3!important}
  .kc-map-locate{min-height:36px!important;font-size:12px!important;padding:4px 10px!important;gap:4px!important}

  /* Above its pin: the page (trackSel in TEMPLATE/PAGE.Home) sets --kc-pin-x/-y, the pin in map pixels, every frame. */
  .kc-sel{left:10px!important;right:10px!important;top:0!important;bottom:auto!important;width:auto!important;height:116px!important;z-index:1002!important;transform:translateY(calc(var(--kc-pin-y,-9999px) - 116px - 52px))}
  .kc-sel-tip{display:block;position:absolute;left:0;top:0;z-index:1003;width:0;height:0;border:9px solid transparent;border-top-color:var(--color-bg);filter:drop-shadow(0 2px 1px rgba(0,0,0,.12));pointer-events:none;transform:translate(calc(var(--kc-pin-x,-9999px) - 9px),calc(var(--kc-pin-y,-9999px) - 52px))}
  .kc-sel .kc-sel-photo,.kc-sel .kc-sel-zoom{right:auto!important;width:116px!important}
  .kc-sel .kc-sel-prev,.kc-sel .kc-sel-next{width:28px!important;height:28px!important}
  .kc-sel .kc-sel-prev{left:4px!important}
  .kc-sel .kc-sel-next{left:84px!important;right:auto!important}
  .kc-sel .kc-sel-count{left:58px!important;bottom:6px!important;font-size:11px!important;padding:1px 8px!important}
  .kc-sel .kc-sel-info{display:flex;flex-direction:column;gap:2px;position:absolute;left:126px;right:8px;top:8px;bottom:8px;min-width:0;font-size:13px;line-height:1.3}
  .kc-sel .kc-sel-price{font-size:16px;padding-right:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kc-sel .kc-sel-title{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .kc-sel .kc-sel-meta{font-size:12px;color:var(--color-neutral-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kc-sel .kc-sel-link{margin-top:auto;font-size:13px;font-weight:700;color:var(--color-accent-700)}
}