@font-face{font-family:"Noto Sans Thai";src:url("assets/noto-sans-thai-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Thai";src:url("assets/noto-sans-thai-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
body,.editor-styles-wrapper{font-family:"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif}
/* TNK shared visual system — presentation only.
 * Content remains native WordPress fields, taxonomy terms and Gutenberg blocks.
 * Load after the existing theme styles. Never overrides artwork dimensions,
 * the category H1 overlay, privacy dialog behavior or query/filter logic.
 */
:root {
  --ink: #19343e;
  --muted: #627277;
  --teal: #087e75;
  --line: #dce3e4;
  --soft: #f2f7f7;
  --paper: #fff;
}
body { color: var(--ink); }
.site-width { width: min(1200px, calc(100% - 112px)); }
.site-header { border-bottom-color: var(--line); }
.header-inner { min-height: 98px; gap: 30px; }
.site-brand { gap: 12px; }
.site-brand .custom-logo { max-width: 46px; max-height: 46px; }
.site-wordmark { color: var(--ink); font-size: clamp(18px, 2vw, 23px); }
.desktop-navigation a, .language-navigation a { font-size: 14px; font-weight: 700; }
.desktop-navigation a:hover, .language-navigation a:hover { color: var(--teal); }
.site-footer { background: #fff; }
.footer-inner { padding-block: 32px; color: var(--muted); }
.footer-inner p, .site-footer a { font-size: 13px; color: var(--muted); }

/* Buttons have a quiet rectangular shape, generous touch targets and clear focus. */
.entry-content .wp-block-button__link,
.product-heading .wp-block-button__link {
  border-radius: 0;
  min-height: 52px;
  padding: 14px 24px;
  background: var(--teal);
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 700;
  text-decoration: none;
}
.entry-content .wp-block-button__link:hover,
.product-heading .wp-block-button__link:hover { background: #06675f; color: #fff; }
.entry-content .is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid #b9c6ca;
  color: var(--ink);
}
.page-heading h1, .product-heading h1 { font-weight: 720; }
.page-introduction, .product-summary { color: var(--muted); line-height: 1.75; }
.page-main, .product-main { padding-block: 56px 76px; }

/* Editorial category/brand bands: terms remain links, not software-style fields.
 * Keep the existing two labelled bands and their aria-current selection state.
 */
.catalogue-filters { margin-block: 28px 44px; border-top: 0; }
.catalogue-filter-band { grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding-block: 17px; }
.catalogue-filter-label { padding-top: 9px; color: var(--ink); font-size: 18px; font-weight: 750; }
.catalogue-filter-band ul { gap: 4px 18px; }
.catalogue-filter-band a {
  border-radius: 0;
  padding: 9px 0;
  border-bottom: 2px solid transparent;
  min-height: 44px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.catalogue-filter-band a[aria-current="true"] {
  background: transparent;
  color: var(--teal);
  border-bottom-color: var(--teal);
  font-weight: 750;
}
.catalogue-filter-band a:hover { background: transparent; color: var(--teal); border-bottom-color: var(--line); }
.catalogue-filter-band a[aria-current="true"]:hover { border-bottom-color: var(--teal); }

/* Native Query Loop cards: clear image, brand, model and summary hierarchy.
 * Explicit columns and image frames are available in the head stylesheet so
 * later block CSS cannot introduce a one-column-to-three-column layout shift.
 */
.wp-block-post-template.is-layout-grid.columns-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 30px;
}
.catalogue-card {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 26px;
  row-gap: 10px;
}
.catalogue-card > .wp-block-post-featured-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 20px;
  margin-block: 0 12px;
  border-radius: 0;
  background: var(--soft);
}
.catalogue-card > .wp-block-post-featured-image > a { display: block; width: 100%; height: 100%; }
.catalogue-card > .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.catalogue-card > .wp-block-post-terms { font-size: 12px; letter-spacing: .06em; color: var(--teal); line-height: 1.7; }
.catalogue-card > .wp-block-post-terms a { color: inherit; text-decoration: none; }
.catalogue-card > .wp-block-post-title { font-size: clamp(18px, 2vw, 24px); font-weight: 700; line-height: 1.35; min-height: 2.7em; }
.catalogue-card > .wp-block-post-excerpt { font-size: 14px; line-height: 1.7; color: var(--muted); }
.catalogue-card .wp-block-post-excerpt__excerpt { margin-bottom: 0; }
.catalogue-card:not(:has(> .wp-block-post-featured-image))::before {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  margin-block: 0 12px;
}

/* Product fields stay in the existing shared template; specification text
 * stays in native Table blocks, including long rows and technical units.
 */
.product-introduction { gap: 64px; margin-bottom: 60px; }
.product-photo {
  padding: 24px;
  min-height: 0;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #f2f7f7, #fafcfc);
  border: 0;
  border-radius: 0;
}
.product-photo img { width: 100%; height: 100%; max-height: 540px; object-fit: contain; }
.product-brand { color: var(--teal); letter-spacing: .13em; font-size: 12px; }
.product-brand a { color: inherit; text-decoration: none; }
.product-heading h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.15; }
.product-summary { font-size: 18px; }
.product-categories { margin-top: 26px; padding-top: 20px; }
.product-categories a { text-decoration: none; }
.product-details { max-width: none; border-top: 1px solid var(--line); padding-top: 42px; }
.product-details > :first-child, .product-details > :first-child > :first-child { margin-top: 0; }
.product-details .wp-block-table table { table-layout: auto; }
.product-details .wp-block-table :is(td, th) {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.product-details .wp-block-table tr { background: transparent; }
.product-details .wp-block-table td:first-child { background: var(--soft); font-weight: 500; color: var(--muted); width: 40%; }

/* Existing contact blocks become a composed phone/address layout, not boxes.
 * These rules do not modify the phone, address, map link or form content.
 */
.tnk-contact { --contact-ink: #19343e; --contact-accent: #087e75; --contact-line: #dce3e4; }
.tnk-contact .tnk-contact-lead { color: var(--muted); margin-bottom: 42px; }
.tnk-contact .tnk-contact-columns { gap: 54px; margin-bottom: 62px; }
.tnk-contact .tnk-contact-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 38px 40px;
  background: transparent;
}
.tnk-contact .tnk-contact-panel--phone { background: #edf6f4; }
.tnk-contact .tnk-contact-panel--address { border-top: 2px solid #315e68; padding: 28px 0 0; }
.tnk-contact .tnk-contact-panel h2 { font-size: clamp(23px, 2.5vw, 31px); font-weight: 700; line-height: 1.4; }
.tnk-contact .tnk-contact-number { font-size: clamp(30px, 3.6vw, 43px); margin-block: 18px 28px; }
.tnk-contact .tnk-contact-address { color: var(--muted); font-size: 17px; }
.tnk-contact .wp-block-button__link { border-radius: 0; min-height: 52px; padding: 14px 24px; }
.tnk-contact .tnk-contact-preparation {
  padding: 36px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.tnk-contact .tnk-contact-preparation h2 { font-size: 27px; font-weight: 700; }

@media (max-width: 900px) {
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; padding-block: 18px; }
  .site-brand { grid-column: 1 / -1; margin: 0; }
  .desktop-navigation { grid-column: 1; order: initial; }
  .language-navigation { grid-column: 2; padding-left: 16px; }
  .desktop-navigation ul { gap: 12px 24px; }
  .product-introduction { gap: 36px; }
}
@media (max-width: 760px) {
  .site-width { width: calc(100% - 44px); }
  .page-main, .product-main { padding-block: 32px 56px; }
  .header-inner { min-height: 0; }
  .site-brand .custom-logo { max-width: 36px; max-height: 36px; }
  .site-wordmark { font-size: 18px; }
  .desktop-navigation a, .language-navigation a { font-size: 12px; }
  .desktop-navigation ul { gap: 10px 24px; }
  .language-navigation ul { gap: 12px; }
  .catalogue-filter-band { grid-template-columns: 1fr; gap: 9px; padding-block: 19px; }
  .catalogue-filter-label { padding-top: 0; font-size: 18px; }
  .catalogue-filter-band ul { gap: 3px 16px; }
  .catalogue-filter-band a { font-size: 13px; }
  .wp-block-post-template.is-layout-grid.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .catalogue-card { padding-bottom: 22px; row-gap: 8px; }
  .catalogue-card > .wp-block-post-featured-image { padding: 10px; margin-bottom: 8px; }
  .catalogue-card > .wp-block-post-title { font-size: 18px; }
  .catalogue-card > .wp-block-post-terms { font-size: 10px; }
  .catalogue-card > .wp-block-post-excerpt { font-size: 13px; }
  .product-introduction { gap: 30px; margin-bottom: 40px; }
  .product-photo { padding: 18px; }
  .product-summary { font-size: 17px; }
  .product-details { padding-top: 30px; }
  .product-details .wp-block-table :is(td, th) { padding: 14px 12px; font-size: 14px; }
  .tnk-contact .tnk-contact-columns { gap: 30px; margin-bottom: 36px; }
  .tnk-contact .tnk-contact-panel { padding: 28px 24px; }
  .tnk-contact .tnk-contact-panel--address { padding: 24px 0 0; }
  .tnk-contact .tnk-contact-panel h2 { font-size: 25px; }
  .tnk-contact .tnk-contact-number { font-size: 32px; }
  .tnk-contact .tnk-contact-preparation { padding: 28px 0 0; }
  .tnk-contact .tnk-contact-preparation h2 { font-size: 25px; }
  .footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 28px; }
}
@media (max-width: 359px) {
  .site-width { width: calc(100% - 32px); }
  .desktop-navigation ul { gap: 10px 14px; }
  .language-navigation { padding-left: 10px; }
  .catalogue-card > .wp-block-post-title { font-size: 16px; }
  .tnk-contact .tnk-contact-number { font-size: 28px; }
}

/* Shared enquiry actions; facts remain in each native product body. */
.product-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.product-actions .wp-block-button__link{display:inline-flex;align-items:center;gap:26px}
.product-actions .is-style-outline .wp-block-button__link{background:transparent;border:1px solid #b9c6ca;color:var(--ink)}
#product-details{scroll-margin-top:24px}

/* Decorative arrows use borders instead of relying on font symbol coverage. */
.tnk-home-editorial h3 a span,.product-actions span{display:inline-block;position:relative;flex-shrink:0;width:16px;height:16px;font-size:0}
.tnk-home-editorial h3 a span::before,.product-actions span::before{content:"";position:absolute;width:16px;height:2px;top:7px;left:0;background:currentColor;transform:rotate(-45deg)}
.tnk-home-editorial h3 a span::after,.product-actions span::after{content:"";position:absolute;width:7px;height:7px;top:1px;right:1px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.product-actions a[href="#product-details"] span{transform:rotate(135deg)}