/* Customer typography: real local Thai faces; the approved Latin display stays. */
@font-face {
  font-family: "KC The Scratches";
  src: url("../fonts/brand/the-scratches.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E;
}
@font-face {
  font-family: "KC Noto Sans Thai";
  src: url("../fonts/brand/noto-sans-thai-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "KC Noto Sans Thai";
  src: url("../fonts/brand/noto-sans-thai-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "KC Noto Sans Thai";
  src: url("../fonts/brand/noto-sans-thai-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Scope to the customer shell, leaving Odoo's editor and staff UI alone. */
#wrapwrap:has(.kc-head) {
  --kc-display-font: "Avenir Next Condensed", "Arial Narrow", "Liberation Sans Narrow", "DejaVu Sans Condensed", "Nimbus Sans Narrow", Arial, sans-serif;
}
:is(.kc-main, .kc-catalog, .kc-footer, .kc-customer-auth, #product_detail) {
  font-size: 16px;
  line-height: 1.6;
}
:is(.kc-main, .kc-catalog, .kc-footer, .kc-customer-auth, #product_detail) :is(p, label, li) {
  overflow-wrap: break-word;
}
:is(.kc-main, .kc-catalog, .kc-customer-auth, #product_detail) :is(h1, h2, h3) {
  text-wrap: balance;
  word-break: normal;
}
.kc-card .kc-card__name,
.kc-card .kc-card__name a,
#product_details h1[itemprop="name"] {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  max-height: none;
  -webkit-line-clamp: unset;
}
.kc-card .kc-card__name { line-height: 1.3; }
/* The complete name is the card heading; keep the image placeholder uncluttered. */
.kc-card .kc-card__placeholder-name { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.kc-card .kc-card__placeholder-text { color: var(--kc-ink); opacity: 1; }
.kc-card .kc-card__meta { font-size: 13px; line-height: 1.6; }
.kc-card .kc-card__unit, .kc-card .kc-card__packsize { font-size: 13px; line-height: 1.5; }
.kc-breadcrumb, #product_detail .breadcrumb { line-height: 1.6; overflow-wrap: anywhere; }
.kc-footer__list a { line-height: 1.5; }
.kc-footer__scope { font-size: 14px; line-height: 1.65; }
.kc-footer__title { font-family: var(--kc-font); font-weight: 700; }
#wrapwrap .kc-subnav a:hover, #wrapwrap .kc-subnav__more:hover,
#wrapwrap .kc-subnav__menu a:hover,
#wrapwrap .kc-footer__list a:hover { color: var(--kc-olive); text-decoration: underline; text-underline-offset: .2em; }
#wrapwrap .kc-location-option__flag,
#wrapwrap .kc-head-search__submit:hover { color: var(--kc-olive); }

/* A fine light edge adds shape to two display accents; never outline body text. */
html:lang(en) .kc-home .kc-section-title > div > h2,
html:lang(en) .kc-home .kc-home__shop > div:first-child > h2 {
  -webkit-text-stroke: .012em rgba(255, 255, 255, .65);
  paint-order: stroke fill;
  text-shadow: 0 1px .05em rgba(59, 73, 29, .12);
}
html:lang(en) .kc-age-gate__title {
  -webkit-text-stroke: .008em rgba(255, 255, 255, .55);
  paint-order: stroke fill;
  text-shadow: 0 0 .12em rgba(255, 255, 255, .12);
}

/* Thai marks need a real Thai face and vertical space, not Latin display metrics. */
html:lang(th) #wrapwrap:has(.kc-head, .kc-reference-head),
html:lang(th) .kc-age-gate {
  --kc-font: "KC Noto Sans Thai", "Noto Sans Thai", Tahoma, Arial, sans-serif;
  --kc-display-font: "KC Noto Sans Thai", "Noto Sans Thai", Tahoma, Arial, sans-serif;
  font-family: var(--kc-font);
  font-synthesis: none;
}
html:lang(th) :is(.kc-head, .kc-subnav, .kc-main, .kc-catalog, .kc-footer, .kc-mobile-nav, .kc-location-modal, .kc-customer-auth, #product_detail, .kc-age-gate) :is(h1, h2, h3, p, label, input, select, textarea, button, .kc-btn, .kc-eyebrow, .kc-footer__title) {
  font-family: var(--kc-font);
  letter-spacing: normal;
}
html:lang(th) :is(.kc-main, .kc-catalog, .kc-footer, .kc-customer-auth, #product_detail, .kc-location-modal, .kc-age-gate) :is(p, label, li, .kc-card__meta, .kc-card__unit, .kc-card__packsize) { line-height: 1.75; }
html:lang(th) :is(.kc-main, .kc-catalog, .kc-customer-auth, #product_detail, .kc-location-modal) :is(h1, h2, h3) { line-height: 1.5; }
html:lang(th) .kc-hero .kc-hero__title { line-height: 1.5; -webkit-text-stroke: 0; text-shadow: none; }
html:lang(th) .kc-hero .kc-hero__title em { font-family: inherit; font-style: normal; }
html:lang(th) :is(.kc-subnav, .kc-mobile-nav, .kc-location-modal, .kc-head) :is(a, button, select) { line-height: 1.55; letter-spacing: normal; }

/* The public contact page has its own small informational header. */
html:lang(th) #wrapwrap[data-kc-reference="1"] { --kc-ref-font: "KC Noto Sans Thai", "Noto Sans Thai", Tahoma, Arial, sans-serif; }
html:lang(en) #wrapwrap[data-kc-reference="1"] .kc-reference-script { font-family: "KC The Scratches", var(--kc-font); font-weight: 400; font-synthesis: none; -webkit-text-stroke: .008em rgba(255, 255, 255, .45); paint-order: stroke fill; }
#wrapwrap:has(.kc-reference-head) #wrap { font-size: 16px; line-height: 1.6; }
#wrapwrap:has(.kc-reference-head) #wrap :is(h1, h2, h3, p, label, a) { overflow-wrap: break-word; }
html:lang(en) #wrapwrap:has(.kc-reference-head) #wrap h1 { font-family: "KC Hidebeast Blocky", var(--kc-display-font); font-weight: 400; font-synthesis: none; line-height: 1.25; text-wrap: balance; }
html:lang(th) #wrapwrap:has(.kc-reference-head) :is(h1, h2, h3, p, label, a, input, textarea, select, button) { font-family: var(--kc-font); letter-spacing: normal; line-height: 1.65; }
#wrapwrap:has(.kc-reference-head) #wrap :is(input, textarea, select) { font-size: 16px; }

/* Let the shared desktop/tablet shell wrap instead of clipping its final words. */
@media (min-width: 992px), (min-width: 768px) and (min-height: 501px) {
  #wrapwrap:has(.kc-head) .kc-subnav { position: static; top: auto; }
  #wrapwrap:has(.kc-head) .kc-head > .kc-wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; }
  #wrapwrap:has(.kc-head) .kc-head-actions { display: flex; min-width: 0; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  #wrapwrap:has(.kc-head) .kc-head .kc-head-search { flex: 1 1 200px; min-width: 160px; max-width: 280px; }
  #wrapwrap:has(.kc-head) .kc-head-search__input { flex: 1 1 auto; width: 100%; min-width: 0; }
  #wrapwrap:has(.kc-head) .kc-head-btn { flex: 0 0 auto; max-width: 220px; white-space: normal; line-height: 1.4; }
  #wrapwrap:has(.kc-head) .kc-head-btn--account { overflow: visible; text-overflow: clip; }
  #wrapwrap:has(.kc-head) .kc-subnav > .kc-wrap { display: flex; flex-wrap: wrap; min-width: 0; gap: 0 20px; overflow: visible; }
  #wrapwrap:has(.kc-head) .kc-subnav__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 600px; gap: 0 18px; min-width: 0; overflow: visible; }
  #wrapwrap:has(.kc-head) .kc-subnav__links > a { flex: 0 1 auto; min-width: 0; gap: 5px; white-space: normal; padding: 12px 0; }
  #wrapwrap:has(.kc-head) .kc-subnav__count { margin-left: 0; flex-shrink: 0; }
  #wrapwrap:has(.kc-head) .kc-subnav__more { flex: 0 0 auto; min-height: 44px; }
}
@media (min-width: 768px) and (max-width: 991.98px) and (min-height: 501px) {
  #wrapwrap:has(.kc-head) .kc-subnav__links { display: none; }
  #wrapwrap:has(.kc-head) .kc-subnav__more { width: 100%; justify-content: space-between; }
}

@media (max-width: 767.98px), (max-width: 991.98px) and (max-height: 500px) {
  .kc-head .kc-lang-form { width: 66px; max-width: 66px; min-width: 0; padding: 0; justify-self: end; }
  .kc-head .kc-head-btn { font-size: 14px; line-height: 1.4; }
  .kc-catalog :is(input, select, textarea),
  .kc-customer-auth :is(input, select, textarea),
  .kc-order :is(input, select, textarea),
  #product_details :is(input, select, textarea) { font-size: 16px; }
  .kc-catalog :is(button, .kc-btn), .kc-customer-auth :is(button, .btn),
  .kc-location-modal :is(button, .kc-btn) { white-space: normal; overflow-wrap: break-word; }
  .kc-footer__title { font-size: 14px; line-height: 1.5; }
  html:lang(th) .kc-head .kc-head-btn { font-size: 13px; }
  html:lang(th) .kc-main .kc-hero .kc-hero__title { font-size: clamp(30px, 7.5vw, 36px); }
  html:lang(th) .kc-card .kc-card__name { font-size: 20px; line-height: 1.5; }
}

@media (forced-colors: active) {
  html:lang(en) .kc-home .kc-section-title > div > h2,
  html:lang(en) .kc-home .kc-home__shop > div:first-child > h2,
  html:lang(en) .kc-age-gate__title { -webkit-text-stroke: 0; text-shadow: none; }
}