:root {
  --cream:#f7efe3;
  --paper:#fffdfa;
  --brown:#63371d;
  --text:#2a211b;
  --border:#e1d4c3;
  --max:1360px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--cream);color:var(--text);font-family:"Noto Sans Thai","Tahoma",Arial,sans-serif;font-size:16px;line-height:1.7}
img{max-width:100%;height:auto}
a{color:inherit}

/* Header: intentionally wide and shallow, matching the approved mockup. */
.site-header{background:var(--paper);border-bottom:1px solid var(--border)}
.header-inner{width:100%;min-height:150px;padding:0 22px 0 16px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:block;flex:0 1 780px;line-height:0;text-decoration:none}
.brand-logo{display:block;width:min(620px,100%);height:auto;max-height:145px;object-fit:contain;object-position:left center}
.header-contact{display:flex;align-items:center;gap:28px;white-space:nowrap;margin-left:auto;padding-right:20px}
.contact-item{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:18px}
.contact-item img{display:block;width:28px;height:28px;object-fit:contain}
.contact-item.line img{width:42px;height:42px}
.contact-divider{height:56px;width:1px;background:var(--border)}

.site-nav{background:var(--paper);border-bottom:1px solid var(--border)}
.nav-inner{width:100%;padding:0 24px}
 .site-nav .mod-menu{display:flex !important;align-items:stretch;gap:0;list-style:none;margin:0;padding:0}
.site-nav .mod-menu > li{margin:0 !important;padding:0 !important;position:relative;display:block !important}
.site-nav .mod-menu > li > a,
.site-nav .mod-menu > li > span{display:block !important;text-decoration:none;font-family:"Tahoma","Noto Sans Thai",Arial,sans-serif;font-size:18px !important;font-weight:700 !important;line-height:1.35 !important;padding:17px 22px !important;color:var(--text) !important;border:0;border-bottom:4px solid transparent !important;white-space:nowrap;background:transparent}
.site-nav .mod-menu > li:first-child > a{background:#f2e7d6 !important;color:var(--brown) !important;border-bottom-color:var(--brown) !important}
.site-nav .mod-menu > li > a:hover,
.site-nav .mod-menu > li > span:hover{background:#f5ecdf !important}

/* Joomla 5 menu: hide every nested UL by default, but never hide the top-level UL. */
.site-nav .mod-menu ul{display:none !important;position:absolute;left:0;top:100%;z-index:1000;min-width:250px;margin:0 !important;padding:0 !important;list-style:none;background:var(--paper);border:1px solid var(--border);box-shadow:0 6px 16px rgba(60,35,20,.10)}
.site-nav .mod-menu > li:hover > ul,
.site-nav .mod-menu > li:focus-within > ul{display:block !important}
.site-nav .mod-menu ul li{margin:0 !important;padding:0 !important;position:relative;display:block !important}
.site-nav .mod-menu ul a,
.site-nav .mod-menu ul span{display:block !important;padding:10px 16px !important;text-decoration:none;font-family:"Tahoma","Noto Sans Thai",Arial,sans-serif;font-size:16px !important;font-weight:600 !important;line-height:1.45 !important;white-space:normal;color:var(--text) !important;background:var(--paper)}
.site-nav .mod-menu ul a:hover,
.site-nav .mod-menu ul span:hover{background:#f5ecdf !important}
.site-nav .mod-menu ul ul{left:100%;top:0}
.site-nav .mod-menu ul li:hover > ul,
.site-nav .mod-menu ul li:focus-within > ul{display:block !important}

.site-main{width:100%;max-width:1408px;margin:0 auto;padding:64px 24px 58px}
.hero{background:#fff;margin:0 0 30px;padding:0;line-height:0;overflow:visible}
.hero img{display:block;width:100%;height:auto;max-width:none}
.top-content,.bottom-content{margin:0 0 28px}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.content-grid.has-sidebar{grid-template-columns:minmax(0,1fr) 300px}
.component-area{min-width:0;font-size:17px}
.component-area h1,.component-area h2,.component-area h3{color:var(--brown);line-height:1.35}
.component-area img{max-width:100%;height:auto}
.sidebar{min-width:0}

/* Article tables: keep the desktop layout, but turn product tables into clean cards on phones. */
.component-area table{
  width:100% !important;
  max-width:100% !important;
  border-collapse:collapse;
  table-layout:fixed;
}
.component-area table td,
.component-area table th{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  vertical-align:middle;
}
.component-area table img{
  max-width:100%;
  height:auto;
}

@media (max-width:760px){
  /*
   * MOBILE PRODUCT TABLE FIX v15
   * Desktop table layout is untouched.
   * On phones each product row becomes a full-width vertical card.
   */
  .component-area table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    border:0 !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    table-layout:auto !important;
    margin:24px 0 !important;
    overflow:visible !important;
  }

  .component-area table > caption{
    display:block !important;
    width:100% !important;
  }

  .component-area table > thead,
  .component-area table > tbody,
  .component-area table > tfoot{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .component-area table > tbody > tr,
  .component-area table > thead > tr,
  .component-area table > tfoot > tr{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 0 22px !important;
    padding:0 !important;
    border:1px solid var(--border) !important;
    border-radius:10px !important;
    background:var(--paper) !important;
    overflow:hidden !important;
    box-shadow:0 2px 8px rgba(60,35,20,.06);
  }

  .component-area table > tbody > tr > td,
  .component-area table > tbody > tr > th,
  .component-area table > thead > tr > td,
  .component-area table > thead > tr > th,
  .component-area table > tfoot > tr > td,
  .component-area table > tfoot > tr > th{
    display:block !important;
    position:static !important;
    float:none !important;
    clear:both !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    margin:0 !important;
    border:0 !important;
    border-bottom:1px solid var(--border) !important;
    padding:18px !important;
    text-align:left !important;
    vertical-align:top !important;
    white-space:normal !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    font-size:16px !important;
    line-height:1.75 !important;
  }

  .component-area table tr > td:last-child,
  .component-area table tr > th:last-child{
    border-bottom:0 !important;
  }

  /* Product images: never crop or impose a fixed height on mobile. */
  .component-area table td img,
  .component-area table th img{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:0 auto !important;
  }

  .component-area table td:has(img),
  .component-area table th:has(img){
    display:block !important;
    text-align:center !important;
    padding:14px !important;
    line-height:0 !important;
  }

  .component-area table td:has(img) img,
  .component-area table th:has(img) img{
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:0 auto !important;
  }

  /* Text inside the detail cell must remain visible and wrap naturally. */
  .component-area table td p,
  .component-area table th p{
    display:block !important;
    max-width:100% !important;
    margin-top:0.7em;
    margin-bottom:0.7em;
    white-space:normal !important;
    overflow:visible !important;
  }

  .component-area table td p:first-child,
  .component-area table th p:first-child{
    margin-top:0 !important;
  }

  .component-area table td p:last-child,
  .component-area table th p:last-child{
    margin-bottom:0 !important;
  }

  .component-area table td a,
  .component-area table th a{
    overflow-wrap:anywhere !important;
  }

  .component-area table td ul,
  .component-area table td ol,
  .component-area table th ul,
  .component-area table th ol{
    max-width:100% !important;
    padding-left:1.25em !important;
  }
}

/* v16: make the mobile main a true flow container so long product cards
   cannot visually overflow into the footer. */
@media (max-width:760px){
  .site-main{
    display:flow-root !important;
    min-height:0 !important;
    padding-bottom:64px !important;
  }

  .component-area{
    min-width:0 !important;
    height:auto !important;
  }

  .component-area table.mobile-product-table,
  .component-area table{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    margin-bottom:28px !important;
  }

  .component-area table > tbody,
  .component-area table > thead,
  .component-area table > tfoot{
    height:auto !important;
    min-height:0 !important;
  }

  .component-area table > tbody > tr,
  .component-area table > thead > tr,
  .component-area table > tfoot > tr{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
  }

  .site-footer{
    position:relative !important;
    z-index:2 !important;
    clear:both !important;
  }
}

.site-footer{background:#422414;color:#fff;margin-top:0}
.footer-inner{max-width:1360px;margin:0 auto;padding:28px 24px}
.footer-default{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 22px;text-align:center;font-size:15px;line-height:1.6}
.footer-default strong{font-size:17px}

.error-main{min-height:100vh;display:grid;place-items:center;background:var(--cream)}
.error-inner{text-align:center;padding:40px}
.error-inner h1{font-size:84px;color:var(--brown);margin:0}
.error-link{display:inline-block;margin-top:16px;padding:10px 20px;background:var(--brown);color:#fff;text-decoration:none}

@media (max-width:1100px){
  .header-inner{min-height:145px;padding:0 18px}
  .brand{flex-basis:650px}
  .brand-logo{width:min(650px,100%)}
  .header-contact{gap:18px;padding-right:0}
  .contact-item{font-size:16px}
  .contact-divider{height:45px}
  .site-nav a{font-size:17px;padding:15px 18px}
}
@media (max-width:760px){
  /* Mobile header: keep the approved logo, then show tappable phone + LINE below it. */
  .header-inner{min-height:0;padding:10px 14px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
  .brand{display:flex;justify-content:center;flex:0 0 auto;width:100%}
  .brand-logo{width:auto;max-width:100%;height:auto;max-height:82px;object-fit:contain;object-position:center}
  .header-contact{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;padding:0;white-space:nowrap;width:100%}
  .contact-item{font-size:15px;gap:7px;padding:4px 2px}
  .contact-item img{width:22px;height:22px}
  .contact-item.line img{width:31px;height:31px}
  .contact-divider{height:28px;width:1px}

  /* Mobile menu: keep all three top-level items usable without horizontal overflow. */
  .nav-inner{padding:0 8px}
  .site-nav .mod-menu{display:flex !important;align-items:stretch;justify-content:flex-start;flex-wrap:wrap;overflow:visible;width:100%}
  .site-nav .mod-menu > li{flex:0 0 auto}
  .site-nav .mod-menu > li > a,
  .site-nav .mod-menu > li > span{font-size:15px !important;line-height:1.35 !important;padding:12px 12px !important;white-space:nowrap}
  .site-nav .mod-menu ul{display:none !important;position:absolute;left:0;top:100%;min-width:220px;max-width:calc(100vw - 16px);box-shadow:0 6px 16px rgba(60,35,20,.12)}
  .site-nav .mod-menu > li.mobile-open > ul{display:block !important}
  .site-nav .mod-menu ul a,
  .site-nav .mod-menu ul span{font-size:15px !important;padding:9px 13px !important;line-height:1.4 !important}
  .site-nav .mod-menu ul ul{left:100%;top:0}
  .site-main{padding:28px 14px 40px}
  .hero{margin-bottom:22px}
  .content-grid.has-sidebar{grid-template-columns:1fr}
}

.footer-contact-link{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:inherit}
.footer-contact-link:hover{opacity:.82}