/* Owner's brandbook brief. Isolated from catalogue data and shared card layout. */
#wrapwrap:has(.kc-head, .kc-reference-head) {
  --kc-readable: 16px;
  --kc-contour: #101508;
  --kc-display-fill: #fff9dc;
}

/* Full original wordmark at every breakpoint. */
#wrapwrap :is(.kc-head, .kc-reference-head) .kc-brand-mark {
  width: 196px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #ffe77b;
  border-radius: 12px 12px 16px 8px;
  background: #fdd201;
  box-shadow: 0 3px 0 #222c11;
}
#wrapwrap .kc-head .kc-logo { width: 196px; flex-basis: 196px; }
#wrapwrap :is(.kc-head, .kc-reference-head) .kc-brand-mark img {
  display: block; width: 100%; height: auto; aspect-ratio: 640 / 185;
}
#wrapwrap :is(.kc-logo__sub, .kc-reference-brand small, .kc-reference-footer-brand small) {
  font-size: 16px !important; line-height: 1.5; letter-spacing: .05em;
}
#wrapwrap :is(.kc-head, .kc-reference-head) { border-bottom: 3px solid #fdd201; }

/* A real brandbook sticker, framed by yellow drips over olive. */
#wrapwrap .kc-home .kc-hero {
  overflow: hidden; border: 2px solid #222c11; border-radius: 22px;
  background: #3b491d; box-shadow: 0 8px 0 #dedcc8;
}
#wrapwrap .kc-home .kc-hero__copy { padding: clamp(24px, 4vw, 52px); }
#wrapwrap .kc-home .kc-hero__eyebrow {
  color: #ffdf3d; font-size: 16px; line-height: 1.6; letter-spacing: .08em;
}
#wrapwrap .kc-home .kc-hero__text { color: #fff9e8; font-size: 18px; line-height: 1.65; }
#wrapwrap .kc-home .kc-hero__art--brand {
  position: relative; display: flex; align-items: center; justify-content: center;
  isolation: isolate; min-width: 0; min-height: 360px; padding: 34px 24px 104px;
  background: #fdd201; overflow: hidden;
}
#wrapwrap .kc-hero__brand-sticker {
  position: relative; z-index: 2; display: block; width: min(100%, 390px);
  height: auto; object-fit: contain; transform: rotate(-3deg);
  filter: drop-shadow(0 8px 0 rgba(34,44,17,.15));
}
#wrapwrap .kc-hero__drips { position: absolute; inset: auto 0 0; width: 100%; height: 102px; z-index: 1; }
#wrapwrap .kc-hero__art--brand::before {
  content: ""; position: absolute; width: 75%; aspect-ratio: 1; border: 2px solid #ffe978;
  border-radius: 50%; transform: rotate(-15deg); opacity: .7;
}
#wrapwrap .kc-home .kc-home__cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 60px;
  max-width: 100%; padding: 16px 30px; border: 2px solid #101508;
  border-radius: 14px; background: #fdd201; color: #17200c;
  font-size: 21px; font-weight: 800; line-height: 1.35; letter-spacing: 0;
  text-transform: none; text-align: center; white-space: normal;
  box-shadow: 0 5px 0 #101508; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#wrapwrap .kc-home .kc-home__cta:hover { background: #ffe568; transform: translateY(-2px); box-shadow: 0 7px 0 #101508; }
#wrapwrap .kc-home .kc-home__cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #101508; }
#wrapwrap .kc-home .kc-home__cta:focus-visible { outline: 3px solid #fff9dc; outline-offset: 5px; }

/* External black contour preserves the interior of each display glyph. */
html #wrapwrap:has(.kc-head, .kc-reference-head) main :where(h1,h2,h3):where(:not(.product_price,.oe_price,.oe_currency_value,[itemprop="price"],[hidden],.d-none,.visually-hidden,[aria-hidden="true"])):where(:not(:has(.product_price,.oe_price,.oe_currency_value,[itemprop="price"]))) {
  color: var(--kc-display-fill) !important; -webkit-text-stroke: 3px var(--kc-contour) !important;
  paint-order: stroke fill; text-shadow: none;
}
html #wrapwrap:has(.kc-head, .kc-reference-head) main h3:not(.product_price,.oe_price,[itemprop="price"]) {
  -webkit-text-stroke-width: 2.2px !important;
}
html #wrapwrap .kc-home .kc-hero__title,
html #wrapwrap .kc-home .kc-hero__title em {
  -webkit-text-stroke: 4px #101508 !important; paint-order: stroke fill; text-shadow: none;
}
html #wrapwrap .kc-home .kc-hero__title { color: #fff9dc !important; }
html #wrapwrap .kc-home .kc-hero__title em { color: #fdd201 !important; }
html #wrapwrap:has(.kc-head) main .kc-card .kc-card__name { color: #fff9dc !important; -webkit-text-stroke: 1px #101508 !important; paint-order: stroke fill; }
html #wrapwrap :is(.kc-footer__title, .kc-reference-footer h2) {
  color: #fff9dc !important; -webkit-text-stroke: 1.4px #101508 !important; paint-order: stroke fill;
}
html:lang(th) #wrapwrap:has(.kc-head, .kc-reference-head) main :is(h1,h2,h3) {
  -webkit-text-stroke-width: 1.2px !important; line-height: 1.6;
}
html:lang(th) #wrapwrap .kc-home .kc-hero__title,
html:lang(th) #wrapwrap .kc-home .kc-hero__title em { -webkit-text-stroke-width: 1.6px !important; }
html:lang(th) #wrapwrap .kc-card .kc-card__name { -webkit-text-stroke-width: .6px !important; }

/* Readable secondary copy, controls, filters and footer throughout customer pages. */
#wrapwrap:has(.kc-head, .kc-reference-head) :is(main, .kc-footer, .kc-reference-footer) {
  font-size: 16px;
}
#wrapwrap:has(.kc-head, .kc-reference-head) :is(main, .kc-footer, .kc-reference-footer) :is(small, .small, label, .form-label, .col-form-label, .btn-sm) {
  font-size: 16px !important; line-height: 1.5;
}
#wrapwrap :is(.kc-eyebrow, .kc-tile small, .kc-tile small span, .kc-card__meta, .kc-card__unit,
  .kc-card__packsize, .kc-card__note, .kc-card__placeholder-text, .kc-breadcrumb,
  .kc-side-eyebrow, .kc-side-group__label, .kc-side-facet__label, .kc-side-reset,
  .kc-side-sub, .kc-side-leaf, .kc-chip, .kc-select-value, .kc-catalog__filter-toggle,
  .kc-toolbar__apply, .kc-toolbar__reset, .kc-related__all, .kc-card__cta,
  .kc-home-store__methods span, .kc-home-store__city, .kc-home-store__choose,
  .kc-home__shop span, .kc-home .kc-section-title p, .kc-strip,
  .kc-location-modal__hint, .kc-location-option__flag, .kc-company-locations__note,
  .kc-reference-menu a, .kc-reference-intro p, .s_website_form_label) {
  font-size: 16px !important; line-height: 1.5;
}
#wrapwrap .kc-card .kc-badge { font-size: 16px !important; line-height: 1.5; padding: 8px; }
#wrapwrap :is(.kc-head-btn, .kc-subnav a, .kc-subnav__more, .kc-subnav__menu a, .kc-subnav__count, .kc-lang-form, .kc-lang-form span) {
  font-size: 16px; line-height: 1.5;
}
#wrapwrap:has(.kc-head) .kc-subnav :is(a, .kc-subnav__more, .kc-subnav__count) { letter-spacing: 0; }
#wrapwrap:has(.kc-head) .kc-subnav__more { max-width: 220px; }
#wrapwrap :is(.kc-footer__scope, .kc-footer__stores, .kc-footer__title, .kc-footer .small, .kc-footer__list a, .kc-footer__staff) {
  font-size: 16px !important; line-height: 1.6;
}
#wrapwrap .kc-footer__list a { display: inline-flex; align-items: center; min-height: 44px; }
#wrapwrap .kc-customer-auth :is(.btn-link, .btn-sm, label) { font-size: 16px; line-height: 1.5; }
#wrapwrap #product_details :is(.radio_input_value, .kc-policy-note, .kc-btn, #add_to_cart) { font-size: 16px; line-height: 1.5; }
#wrapwrap .kc-order :is(.kc-qty-btn, .kc-link-btn, .kc-order-actions a, .kc-order-actions button) { font-size: 16px; }
#wrapwrap .kc-order-table tbody td[data-label]::before { font-size: 16px; }
#wrapwrap:has(.kc-head, .kc-reference-head) main p:not(.kc-hero__text),
#wrapwrap :is(.kc-side-family__name, .kc-footer__staff-link, .kc-footer__staff-note),
#wrapwrap main .kc-btn:not(.kc-home__cta) { font-size: 16px !important; line-height: 1.6; }
#wrapwrap .kc-card .kc-card__add-btn { font-size: 20px; }
#wrapwrap #product_detail :is(.breadcrumb, .breadcrumb a, .breadcrumb span, .attribute_name, .kc-quantity__unit),
#wrapwrap #product_details :is(.badge, .badge span),
#wrapwrap .s_website_form_mark { font-size: 16px !important; line-height: 1.5; }
#wrapwrap :is(.kc-order-primary,.kc-order-secondary,.kc-member__label,.kc-member__benefits,.kc-member__benefits span,.kc-member__benefits strong) {
  font-size: 16px !important; line-height: 1.6;
}
html :is(.kc-age-gate__title,.kc-location-modal__title,.kc-support-dialog__title),
html body.kc-staff-login h1 {
  color: #fff9dc !important; -webkit-text-stroke: 2px #101508 !important; paint-order: stroke fill; text-shadow: none;
}
html:lang(th) :is(.kc-age-gate__title,.kc-location-modal__title,.kc-support-dialog__title),
html body.kc-staff-login[lang="th"] h1 { -webkit-text-stroke-width: 1px !important; }
html #wrapwrap main :is(.product_price,.oe_price,.oe_currency_value,[itemprop="price"]),
html #wrapwrap:has(.kc-head) main :is(h1,h2,h3):has(.product_price,.oe_price,.oe_currency_value,[itemprop="price"]) {
  -webkit-text-stroke: 0 !important; text-shadow: none;
}
body.kc-staff-login :is(.kc-staff-presentation__badge,.kc-staff-intro,.kc-staff-intro span,.kc-staff-help,.kc-staff-help span,.kc-staff-footer) { font-size: 16px; line-height: 1.6; }
body.kc-staff-login .kc-staff-content :is(.form-label,.col-form-label,.btn-link) { font-size: 16px; line-height: 1.5; }

@media (min-width: 992px), (min-width: 768px) and (min-height: 501px) {
  #wrapwrap:has(.kc-head) .kc-head > .kc-wrap { grid-template-columns: 196px minmax(0,1fr); }
}
@media (max-width: 991.98px) {
  #wrapwrap .kc-home .kc-hero { display: flex; flex-direction: column; }
  #wrapwrap .kc-home .kc-hero__art--brand { order: -1; min-height: 0; padding: 24px 22px 84px; }
  #wrapwrap .kc-hero__brand-sticker { width: min(72%, 320px); }
  #wrapwrap .kc-hero__drips { height: 82px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  #wrapwrap:has(.kc-head) .kc-subnav__links { display: none; }
  #wrapwrap:has(.kc-head) .kc-subnav__more { width: 100%; max-width: none; justify-content: space-between; }
}
@media (max-width: 767.98px), (max-width: 991.98px) and (max-height: 500px) {
  #wrapwrap .kc-head > .kc-wrap { grid-template-columns: minmax(0,1fr) 54px 44px auto; gap: 8px; }
  #wrapwrap .kc-head .kc-logo { width: 100%; min-width: 0; flex-basis: auto; }
  #wrapwrap .kc-head .kc-brand-mark { width: 176px; padding: 7px; border-radius: 9px; }
  #wrapwrap .kc-head .kc-logo__sub { font-size: 16px; letter-spacing: .02em !important; }
  #wrapwrap .kc-head .kc-lang-form { width: 54px; max-width: 54px; }
  #wrapwrap .kc-head .kc-lang__select { width: 54px; padding-inline: 3px; font-size: 16px; }
  #wrapwrap .kc-head .kc-head-btn--cart { grid-column: 4; grid-row: 1; min-width: 64px; padding-inline: 8px; font-size: 16px; }
  #wrapwrap .kc-head .kc-head-btn--account { grid-column: 3; grid-row: 1; }
  #wrapwrap .kc-head .kc-head-btn--location { grid-column: 1 / 3; font-size: 16px; }
  #wrapwrap .kc-head .kc-head-btn--register { grid-column: 3 / 5; font-size: 16px; }
  #wrapwrap:has(.kc-head) .kc-subnav__more { max-width: none; }
  #wrapwrap .kc-home .kc-hero { border-radius: 17px; }
  #wrapwrap .kc-home .kc-hero__copy { padding: 26px 20px 32px; }
  #wrapwrap .kc-home .kc-hero__title { font-size: clamp(32px, 8vw, 42px); line-height: 1.3; }
  #wrapwrap .kc-home .kc-home__cta { width: 100%; font-size: 21px; padding-inline: 14px; }
  #wrapwrap .kc-mobile-nav > .kc-wrap { align-items: stretch; gap: 2px; padding-inline: 4px; }
  #wrapwrap .kc-mobile-nav .kc-wrap > :is(a, button),
  #wrapwrap .kc-mobile-nav .kc-wrap > .kc-support-launcher--nav {
    flex: 1 1 0; min-width: 0; min-height: 64px; padding: 9px 1px;
    font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: 0;
    font-family: Arial, sans-serif; white-space: normal; word-break: normal; overflow-wrap: normal;
  }
  #wrapwrap .kc-mobile-nav .kc-wrap > .kc-support-launcher--nav { width: auto; max-width: none; gap: 3px; }
  #wrapwrap .kc-mobile-nav .kc-support-launcher__label { font-size: 16px; line-height: 1.35; }
  html:lang(th) #wrapwrap .kc-mobile-nav .kc-wrap > :is(a, button) { font-family: var(--kc-font); }
  #wrapwrap { --kc-mobile-clearance: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) {
  #wrapwrap .kc-head .kc-logo { grid-column: 1 / 3; }
  #wrapwrap .kc-head .kc-lang-form { grid-column: 3; width: 44px; max-width: 44px; }
  #wrapwrap .kc-head .kc-lang__select { width: 44px; }
  #wrapwrap .kc-head .kc-head-btn--account { grid-row: 3; grid-column: 3; }
  #wrapwrap .kc-head .kc-head-btn--register { grid-column: 4; padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #wrapwrap .kc-home .kc-home__cta { transition: none; }
}
@media (forced-colors: active) {
  html body :is(#kc-age-gate-title,#kc-location-title,#kc-support-title),
  html body.kc-staff-login h1, html body.kc-staff-login[lang] h1 {
    -webkit-text-stroke: 0 !important; color: CanvasText !important; text-shadow: none;
  }
  html #wrapwrap:has(.kc-head, .kc-reference-head) :is(main,footer) :is(h1,h2,h3,h1 em,.kc-card .kc-card__name,.kc-footer__title) {
    -webkit-text-stroke: 0 !important; color: CanvasText !important; text-shadow: none;
  }
  html #wrapwrap:has(.kc-head, .kc-reference-head) main :is(h1,h2,h3),
  html #wrapwrap .kc-home .kc-hero__title em,
  html #wrapwrap :is(.kc-footer__title, .kc-reference-footer h2) {
    -webkit-text-stroke: 0 !important; color: CanvasText !important; text-shadow: none;
  }
  #wrapwrap .kc-home .kc-home__cta { color: LinkText; background: Canvas; border-color: ButtonText; box-shadow: none; }
}