/* Collection index only: the number, label and count each have their own space. */
html body #wrapwrap .kc-main.kc-collection-index .kc-section-title {
  margin-bottom: 24px; gap: 12px;
}
html body #wrapwrap .kc-main.kc-collection-index .kc-section-title :is(h1,h2) {
  color: #34431c !important; -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 1px #fdd201 !important; paint-order: stroke fill;
  font-size: clamp(28px, 3.4vw, 42px) !important; line-height: 1.25;
  letter-spacing: 0; margin: 0; max-width: none; text-shadow: none !important;
}
html body #wrapwrap .kc-main.kc-collection-index .kc-eyebrow {
  color: #56613d; font-size: 13px !important; letter-spacing: .12em;
  margin-bottom: 10px;
}
html body #wrapwrap .kc-main.kc-collection-index .kc-category-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; counter-reset: kc-family; padding-bottom: 8px;
}
html body #wrapwrap .kc-main.kc-collection-index .kc-category-grid > a.kc-tile {
  display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 22px;
  grid-template-rows: auto auto; column-gap: 14px; row-gap: 6px;
  align-content: center; align-items: center; justify-content: normal;
  position: relative; box-sizing: border-box; width: 100%; min-width: 0;
  min-height: 120px !important; height: auto !important; padding: 20px !important;
  background: #fffdf2 !important; color: #34431c !important;
  border: 1.5px solid #74805a !important; border-radius: 18px !important;
  box-shadow: 0 3px 0 #dedcc8; overflow: visible;
  text-decoration: none !important; counter-increment: kc-family;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: rgba(253,210,1,.2);
}
html body #wrapwrap .kc-main.kc-collection-index .kc-category-grid > a.kc-tile::before {
  content: counter(kc-family, decimal); position: static !important; inset: auto !important;
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  display: grid; place-items: center; width: 44px; height: 44px;
  margin: 0; padding: 0; border-radius: 50%; background: #fdd201; color: #34431c;
  font-family: "KC Hidebeast Blocky", sans-serif; font-size: 23px;
  font-weight: 400; line-height: 1; letter-spacing: 0;
  -webkit-text-stroke: 0 !important; text-shadow: none !important; transform: none;
}
html body #wrapwrap .kc-main.kc-collection-index .kc-category-grid > a.kc-tile > h3 {
  grid-column: 2; grid-row: 1; align-self: end; min-width: 0; max-width: none;
  margin: 0; color: #34431c !important; -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: .8px #fdd201 !important; paint-order: stroke fill;
  font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.3;
  letter-spacing: 0; overflow-wrap: anywhere; text-shadow: none !important;
}
html body #wrapwrap .kc-main.kc-collection-index .kc-category-grid > a.kc-tile > small {
  grid-column: 2; grid-row: 2; align-self: start; min-width: 0;
  margin: 0; color: #56613d !important; opacity: 1; font-size: 16px !important;
  line-height: 1.45; letter-spacing: .025em; text-transform: none;
}
html body #wrapwrap .kc-main.kc-collection-index .kc-category-grid > a.kc-tile::after {
  content: "\2192"; position: static !important; inset: auto !important;
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  width: auto; height: auto; border: 0; background: none;
  color: #34431c; font-family: Arial, sans-serif; font-size: 25px; line-height: 1;
  -webkit-text-stroke: 0 !important; transform: none; opacity: 1;
}
html body #wrapwrap .kc-main.kc-collection-index .kc-tile :is(.kc-tile__art, .kc-tile__arrow) {
  display: none !important;
}
html body #wrapwrap .kc-main.kc-collection-index .kc-category-grid > a.kc-tile:hover {
  background: #fff4bc !important; border-color: #34431c !important; transform: translateY(-2px);
}
html body #wrapwrap .kc-main.kc-collection-index .kc-category-grid > a.kc-tile:focus-visible {
  outline: 3px solid #34431c; outline-offset: 3px; box-shadow: 0 0 0 6px #fdd201;
}
/* Store is a button, so it needs the same readable color as the nav links. */
#wrapwrap .kc-mobile-nav .kc-wrap > button[data-kc-action="open-location"] {
  display: flex; align-items: center; justify-content: center;
  color: #fff9dc !important; --btn-color: #fff9dc;
  --btn-hover-color: #fdd201; --btn-active-color: #fdd201;
  background: transparent; border: 0; box-shadow: none; text-decoration: none;
}
#wrapwrap .kc-mobile-nav .kc-wrap > button[data-kc-action="open-location"]:is(:hover, :focus-visible, .active) {
  color: #fdd201 !important;
}
#wrapwrap .kc-mobile-nav .kc-wrap > button[data-kc-action="open-location"]:focus-visible {
  outline: 2px solid #fdd201; outline-offset: -3px; border-radius: 10px;
}
@media (max-width: 767.98px) {
  html body #wrapwrap .kc-main.kc-collection-index .kc-category-grid {
    grid-template-columns: minmax(0, 1fr); gap: 12px;
  }
  html body #wrapwrap .kc-main.kc-collection-index .kc-category-grid > a.kc-tile {
    min-height: 108px !important; padding: 18px !important; column-gap: 12px;
  }
  html body #wrapwrap .kc-main.kc-collection-index { padding-bottom: var(--kc-mobile-clearance, 108px); }
}
html:lang(th) body #wrapwrap .kc-main.kc-collection-index .kc-category-grid > a.kc-tile > h3 {
  -webkit-text-stroke-width: .25px !important; line-height: 1.5;
}
html:lang(th) body #wrapwrap .kc-main.kc-collection-index .kc-section-title :is(h1,h2) {
  -webkit-text-stroke-width: .35px !important; line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  html body #wrapwrap .kc-main.kc-collection-index .kc-category-grid > a.kc-tile { transition: none; transform: none !important; }
}
@media (forced-colors: active) {
  html:root body #wrapwrap .kc-main.kc-collection-index .kc-category-grid > a.kc-tile > h3,
  html:root body #wrapwrap .kc-main.kc-collection-index .kc-section-title :is(h1,h2) {
    -webkit-text-stroke: 0 !important;
  }
  html body #wrapwrap .kc-main.kc-collection-index .kc-category-grid > a.kc-tile { border-color: ButtonText !important; }
}