/* Crisp external edges follow the display glyphs without a blurred halo. */
html:lang(en) {
  --kc-heading-stroke: 2.4px;
  --kc-hero-stroke: 2.4px;
}
@media (min-width: 992px) {
  html:lang(en) {
    --kc-heading-stroke: 2.8px;
    --kc-hero-stroke: 3px;
  }
}

html:lang(en) .kc-hero .kc-hero__title {
  -webkit-text-stroke: var(--kc-hero-stroke) #fdd201;
  paint-order: stroke fill;
  text-shadow: none;
}

/* Customer heading contours. Preserve current fills, small text and real Thai glyphs. */

/* Preserve current text fill. Green/white titles get yellow edges.
   Main excludes hero and all price/hidden text; the hero split stays. */
#wrapwrap:has(.kc-head) main :is(h1, h2):not(.kc-hero__title, .product_price, .oe_price, .oe_currency_value, [itemprop="price"], [hidden], .d-none, .visually-hidden, [aria-hidden="true"]):not(:has(.product_price, .oe_price, .oe_currency_value, [itemprop="price"])),
#wrapwrap:has(.kc-head) .kc-category-grid > .kc-tile h3,
#wrapwrap:has(.kc-head) .kc-home .kc-home__shop-card h3 {
  -webkit-text-stroke: var(--kc-heading-stroke, .22px) #fdd201;
  paint-order: stroke fill;
  text-shadow: none;
}

/* Smaller display headings keep their cutouts open. */
html:lang(en) #wrapwrap:has(.kc-head) .kc-category-grid > .kc-tile h3,
html:lang(en) #wrapwrap:has(.kc-head) .kc-home .kc-home__shop-card h3 {
  -webkit-text-stroke-width: 2.2px;
}

/* Real Latin display face only on title roles, never on 20px product names. */
html:lang(en) #wrapwrap:has(.kc-head) main :is(h1, h2):not(.kc-hero__title, .product_price, .oe_price, .oe_currency_value, [itemprop="price"], [hidden], .d-none, .visually-hidden, [aria-hidden="true"]):not(:has(.product_price, .oe_price, .oe_currency_value, [itemprop="price"])),
html:lang(en) #wrapwrap:has(.kc-head) .kc-category-grid > .kc-tile h3,
html:lang(en) #wrapwrap:has(.kc-head) .kc-home .kc-home__shop-card h3 {
  font-family: "KC Hidebeast Blocky", var(--kc-display-font) !important;
  font-weight: 400 !important;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: 0;
}

/* Yellow display words need a darker green edge than the hero background. */
html:lang(en) .kc-hero .kc-hero__title em,
html:lang(en) .kc-age-gate__title {
  -webkit-text-stroke: var(--kc-hero-stroke) #222c11;
  paint-order: stroke fill;
  text-shadow: none;
}

/* Thai keeps Noto, its native metrics/spacing, and a finer .22px edge.
   Explicit em rule is necessary: its own stroke does not inherit h1's reset. */
html:lang(th) #wrapwrap:has(.kc-head) main :is(h1, h2):not(.kc-hero__title, .product_price, .oe_price, .oe_currency_value, [itemprop="price"], [hidden], .d-none, .visually-hidden, [aria-hidden="true"]):not(:has(.product_price, .oe_price, .oe_currency_value, [itemprop="price"])),
html:lang(th) #wrapwrap:has(.kc-head) .kc-category-grid > .kc-tile h3,
html:lang(th) #wrapwrap:has(.kc-head) .kc-home .kc-home__shop-card h3,
html:lang(th) .kc-hero .kc-hero__title {
  -webkit-text-stroke: .22px rgba(253, 210, 1, .84);
  paint-order: stroke fill;
  text-shadow: none;
}
html:lang(th) .kc-hero .kc-hero__title em,
html:lang(th) .kc-age-gate__title {
  -webkit-text-stroke: .22px #222c11;
  paint-order: stroke fill;
  text-shadow: none;
}

/* Product names remain their current readable face/size. */
#wrapwrap:has(.kc-head) .kc-card .kc-card__name {
  -webkit-text-stroke: 0;
  paint-order: stroke fill;
  text-shadow: none;
}
html:lang(th) #wrapwrap:has(.kc-head) .kc-card .kc-card__name {
  -webkit-text-stroke-width: 0;
}

/* Feature tiles already turn yellow on hover; preserve that state. */
#wrapwrap:has(.kc-head) .kc-category-grid > .kc-tile.kc-tile--feature:hover h3 {
  -webkit-text-stroke: .8px #222c11;
  text-shadow: none;
}
html:lang(th) #wrapwrap:has(.kc-head) .kc-category-grid > .kc-tile.kc-tile--feature:hover h3 {
  -webkit-text-stroke-width: .22px;
}

@media (forced-colors: active) {
  #wrapwrap:has(.kc-head) .kc-card .kc-card__name,
  html:lang(th) #wrapwrap:has(.kc-head) .kc-card .kc-card__name,
  #wrapwrap:has(.kc-head) .kc-category-grid > .kc-tile.kc-tile--feature:hover h3,
  html:lang(th) #wrapwrap:has(.kc-head) .kc-category-grid > .kc-tile.kc-tile--feature:hover h3,
  #wrapwrap:has(.kc-head) main :is(h1, h2):not(.kc-hero__title, .product_price, .oe_price, .oe_currency_value, [itemprop="price"], [hidden], .d-none, .visually-hidden, [aria-hidden="true"]):not(:has(.product_price, .oe_price, .oe_currency_value, [itemprop="price"])),
  #wrapwrap:has(.kc-head) .kc-category-grid > .kc-tile h3,
  #wrapwrap:has(.kc-head) .kc-home .kc-home__shop-card h3,
  html:lang(en) .kc-hero .kc-hero__title,
  html:lang(en) .kc-hero .kc-hero__title em,
  html:lang(en) .kc-age-gate__title,
  html:lang(th) #wrapwrap:has(.kc-head) main :is(h1, h2):not(.kc-hero__title, .product_price, .oe_price, .oe_currency_value, [itemprop="price"], [hidden], .d-none, .visually-hidden, [aria-hidden="true"]):not(:has(.product_price, .oe_price, .oe_currency_value, [itemprop="price"])),
  html:lang(th) #wrapwrap:has(.kc-head) .kc-category-grid > .kc-tile h3,
  html:lang(th) #wrapwrap:has(.kc-head) .kc-home .kc-home__shop-card h3,
  html:lang(th) .kc-hero .kc-hero__title,
  html:lang(th) .kc-hero .kc-hero__title em,
  html:lang(th) .kc-age-gate__title {
    -webkit-text-stroke: 0;
    text-shadow: none;
  }
}

/* The existing passive status message, presented as a readable speech bubble. */
#kc-toast.kc-toast {
  box-sizing: border-box;
  width: max-content;
  max-width: min(28rem, calc(100% - 32px));
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  padding: 15px 19px;
  border: 1px solid rgba(253, 210, 1, .8);
  border-radius: 20px 20px 20px 6px;
  background: #fffef6;
  color: #3b491d;
  font-family: var(--kc-font, Arial, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  text-align: start;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 30px rgba(24, 32, 16, .16);
  pointer-events: none;
}
#kc-toast.kc-toast::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 22px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(253, 210, 1, .8);
  border-bottom: 1px solid rgba(253, 210, 1, .8);
  background: #fffef6;
  transform: rotate(45deg);
}
@media (max-width: 767.98px) {
  #kc-toast.kc-toast { max-width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  #kc-toast.kc-toast { animation: none; transition: none; }
}
@media (forced-colors: active) {
  #kc-toast.kc-toast { border-color: CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  #kc-toast.kc-toast::after { display: none; }
}
/* Informational contact header and the existing related-section title. */
#wrapwrap:has(.kc-reference-head) #wrap :is(h1, h2),
#wrapwrap:has(.kc-head) .kc-related__title {
  -webkit-text-stroke: var(--kc-heading-stroke, .22px) #fdd201;
  paint-order: stroke fill;
  text-shadow: none;
}
html:lang(en) #wrapwrap:has(.kc-reference-head) #wrap :is(h1, h2),
html:lang(en) #wrapwrap:has(.kc-head) .kc-related__title {
  font-family: "KC Hidebeast Blocky", var(--kc-display-font) !important;
  font-weight: 400 !important;
  font-synthesis: none;
  letter-spacing: 0;
}
#wrapwrap .kc-related__title { min-width: 0; overflow-wrap: break-word; }
#wrapwrap:has(.kc-head, .kc-reference-head) .kc-footer__title {
  -webkit-text-stroke: 0;
  paint-order: stroke fill;
}
html:lang(en) #wrapwrap:has(.kc-head) .kc-related__title {
  -webkit-text-stroke-width: .8px;
}
html:lang(th) #wrapwrap:has(.kc-reference-head) #wrap :is(h1, h2),
html:lang(th) #wrapwrap:has(.kc-head) .kc-related__title {
  -webkit-text-stroke-width: .22px;
}
@media (forced-colors: active) {
  #wrapwrap:has(.kc-reference-head) #wrap :is(h1, h2),
  #wrapwrap:has(.kc-head) .kc-related__title,
  html:lang(th) #wrapwrap:has(.kc-reference-head) #wrap :is(h1, h2),
  html:lang(th) #wrapwrap:has(.kc-head) .kc-related__title,
  #wrapwrap:has(.kc-head, .kc-reference-head) .kc-footer__title {
    -webkit-text-stroke: 0;
    text-shadow: none;
  }
}

/* Match the specific English display roles when system contrast owns colors. */
@media (forced-colors: active) {
  html:lang(en) #wrapwrap:has(.kc-head) .kc-category-grid > .kc-tile h3,
  html:lang(en) #wrapwrap:has(.kc-head) .kc-home .kc-home__shop-card h3,
  html:lang(en) #wrapwrap:has(.kc-head) .kc-related__title {
    -webkit-text-stroke: 0;
    text-shadow: none;
  }
}

/* Shared category badges: true decimal numbering and the existing brand face. */
#wrapwrap:has(.kc-head) .kc-category-grid > .kc-tile::before {
  content: counter(kc-family, decimal);
  font-family: "KC Hidebeast Blocky", var(--kc-display-font);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* Keep availability text in normal flow, beneath the photograph. */
#wrapwrap:has(.kc-head) .kc-card .kc-card__media {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  aspect-ratio: auto;
}
#wrapwrap:has(.kc-head) .kc-card :is(.kc-card__image, .kc-card__placeholder) {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
}
#wrapwrap:has(.kc-head) .kc-card .kc-card__image { position: relative; }
#wrapwrap:has(.kc-head) .kc-card .kc-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#wrapwrap:has(.kc-head) .kc-card .kc-badge {
  position: static;
  inset: auto;
  display: block;
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 7px 8px;
  border-radius: 0;
  font-family: var(--kc-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
}
#wrapwrap:has(.kc-head) .kc-card .kc-badge--unknown {
  background: #fff4bf;
  color: #3b491d;
}
@media (max-width: 575.98px) {
  #wrapwrap:has(.kc-head) .kc-card :is(.kc-card__image, .kc-card__placeholder) {
    aspect-ratio: auto;
    min-height: 150px;
  }
}
@media (max-width: 359.98px) {
  #wrapwrap:has(.kc-head) .kc-card .kc-card__media {
    height: auto;
    min-height: 0;
  }
  #wrapwrap:has(.kc-head) .kc-card :is(.kc-card__image, .kc-card__placeholder) {
    flex: 0 0 auto;
    height: 180px;
  }
}