/* T1 front page — Amayama clone: compact, white, horizontal */

.kr-mainPage {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.kr-h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--kr-primary-dark);
  margin: 6px 0 6px;
}

.kr-sub {
  color: var(--kr-text-muted);
  font-size: 14px;
  margin: 0 0 18px;
}

/* searchForm — single compact row like amayama */
.kr-searchForm {
  display: flex;
  gap: 8px;
  max-width: 760px;
  margin: 0 0 26px;
}

.kr-searchForm__input {
  flex: 1;
}

.kr-searchForm__field {
  width: 100%;
  border: 2px solid var(--kr-primary);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--kr-text);
  box-sizing: border-box;
}

.kr-searchForm__field:focus {
  outline: 2px solid var(--kr-primary);
  outline-offset: -1px;
}

.kr-btn--primary {
  border: 1px solid var(--kr-primary);
  background: var(--kr-primary);
  color: #fff;
  border-radius: 6px;
  padding: 10px 26px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.kr-btn--primary:hover {
  background: var(--kr-primary-dark);
}

/* catalogs — brand tiles laid out horizontally, 6 per row */
.kr-catalogs {
  margin: 0 0 26px;
}

.kr-catalogs__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--kr-text);
}

.kr-catalogs__items {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.kr-catalogs__item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--kr-border);
  border-radius: 6px;
  background: var(--kr-bg);
  padding: 10px 12px;
  text-decoration: none;
  min-height: 56px;
}

.kr-catalogs__item:hover {
  border-color: var(--kr-primary);
}

.kr-catalogs__badge {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--kr-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
}

.kr-catalogs__item--cat .kr-catalogs__badge {
  display: none;
}

.kr-catalogs__name {
  display: block;
  color: var(--kr-primary-dark);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
}

.kr-catalogs__origin {
  display: block;
  color: var(--kr-text-muted);
  font-size: 11px;
  margin-top: 2px;
}

/* lastShipped — horizontal cards like amayama */
.kr-lastShipped {
  margin: 0 0 26px;
}

.kr-lastShipped__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.kr-lastShipped__item {
  display: flex;
  gap: 10px;
  border: 1px solid var(--kr-border);
  border-radius: 6px;
  padding: 10px;
  background: var(--kr-bg);
}

.kr-lastShipped__img img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.kr-lastShipped__name {
  display: block;
  color: var(--kr-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}

.kr-lastShipped__oem code {
  font-size: 11px;
  background: var(--kr-bg-alt);
  border: 1px solid var(--kr-border);
  border-radius: 3px;
  padding: 1px 5px;
}

.kr-lastShipped__price {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

/* inquiry strip */
.kr-inquiry {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed var(--kr-border);
  border-radius: 6px;
  padding: 12px 16px;
  background: var(--kr-bg-alt);
}

.kr-inquiry__icon {
  color: var(--kr-primary);
}

.kr-inquiry__title {
  font-weight: 600;
  font-size: 14px;
  display: inline;
  margin-right: 6px;
}

.kr-inquiry__payload a {
  color: var(--kr-accent);
  font-weight: 600;
  text-decoration: none;
}

.kr-inquiry__hint {
  color: var(--kr-text-muted);
  font-size: 13px;
}

/* responsive: fewer columns on narrow screens */
@media (max-width: 1000px) {
  .kr-catalogs__items {
    grid-template-columns: repeat(4, 1fr);
  }

  .kr-lastShipped__items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .kr-catalogs__items {
    grid-template-columns: repeat(2, 1fr);
  }

  .kr-lastShipped__items {
    grid-template-columns: 1fr;
  }
}

/* ---- Fix: Astra transparent header overlapping content on home ---- */
body.home .main-header-bar-wrap,
body.home .ast-main-header-wrap,
body.home .main-header-bar {
  position: relative !important;
  background: #ffffff !important;
}

body.home .site-header {
  position: relative !important;
  z-index: 5;
}

/* category tiles: label on top, blurb below */
.kr-catalogs__item--cat {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

/* placeholder for products without images */
.kr-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--kr-bg-alt);
  border: 1px solid var(--kr-border);
  border-radius: 4px;
}

.kr-lastShipped__img .kr-ph,
.kr-row__img .kr-ph {
  width: 100%;
  height: 56px;
}

/* hide Astra default copyright line (replaced below) */
.ast-footer-copyright {
  display: none !important;
}

/* Amayama-scale search: big input + big button */
.kr-searchForm {
  max-width: 900px;
  gap: 10px;
  margin: 0 0 30px;
}

.kr-searchForm__field {
  padding: 17px 18px;
  font-size: 16px;
  border-width: 2px;
  border-radius: 7px;
}

.kr-searchForm .kr-btn--primary {
  padding: 17px 38px;
  font-size: 15px;
  border-radius: 7px;
}

/* search: Amayama-hero scale */
.kr-searchForm {
  max-width: 1020px;
}

.kr-searchForm__field {
  padding: 20px 20px;
  font-size: 17px;
  border-radius: 8px;
}

.kr-searchForm .kr-btn--primary {
  padding: 20px 46px;
  font-size: 16px;
  border-radius: 8px;
}

/* ============ Mobile & tablet fixes (no horizontal overflow, no ugly wraps) ============ */

/* 1) kill horizontal overflow: grids must never exceed viewport */
.kr-catalogs__items {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.kr-catalogs__items--cat {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kr-lastShipped__items {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kr-catalogs__item,
.kr-lastShipped__item {
  min-width: 0;
}

.kr-catalogs__name,
.kr-catalogs__origin,
.kr-lastShipped__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.kr-searchForm__input {
  min-width: 0;
}

body {
  overflow-x: clip;
}

/* 2) nav row: horizontal swipe instead of wrapping */
.kr-nav__menu {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.kr-nav__menu::-webkit-scrollbar {
  display: none;
}

.kr-nav__menu a {
  white-space: nowrap;
}

/* 3) tablet breakpoint */
@media (max-width: 1000px) {
  .kr-catalogs__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kr-catalogs__items--cat {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kr-lastShipped__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 4) phone breakpoint */
@media (max-width: 640px) {
  .kr-mainPage {
    padding: 14px 12px 32px;
  }

  .kr-h1 {
    font-size: 19px;
  }

  .kr-sub {
    font-size: 13px;
  }

  .kr-catalogs__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kr-catalogs__items--cat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kr-lastShipped__items {
    grid-template-columns: 1fr;
  }

  .kr-searchForm {
    max-width: 100%;
    gap: 8px;
  }

  .kr-searchForm__field {
    padding: 13px 12px;
    font-size: 15px;
    border-radius: 6px;
  }

  .kr-searchForm .kr-btn--primary {
    padding: 13px 18px;
    font-size: 14px;
    border-radius: 6px;
  }

  .kr-topline__in {
    padding: 9px 12px;
    gap: 12px;
  }

  .kr-topline__logo svg {
    width: 30px;
    height: 30px;
  }

  .kr-logo-word {
    font-size: 16px;
  }

  .kr-logo-word__tag {
    font-size: 7.5px;
    letter-spacing: 2.5px;
  }

  .kr-topline__cur {
    display: none;
  }

  .kr-topline__total {
    display: none;
  }
}

/* ============ Mobile: let the top line breathe (wrap instead of cramming) ============ */

@media (max-width: 720px) {
  /* row 1: logo left, cart right */
  .kr-topline__in {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .kr-topline__logo {
    margin-right: auto;
    padding: 4px 0;
  }

  /* row 2: login left, cart right — cart pulled to second row via order */
  .kr-topline__right {
    width: 100%;
    justify-content: flex-start;
    gap: 16px;
    padding: 2px 0 6px;
  }

  .kr-topline__cart {
    margin-left: auto;
  }

  /* nav: wrap to full visible items, no truncation */
  .kr-nav__menu {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 2px 20px;
  }

  .kr-nav__menu a {
    padding: 9px 0;
    white-space: normal;
  }

  /* brand/category cards: drop origin tag so names fit fully */
  .kr-catalogs__origin {
    display: none;
  }

  .kr-catalogs__name {
    font-size: 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .kr-catalogs__item {
    padding: 11px 13px;
  }

  .kr-catalogs__badge {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  }
}

/* ============ Electro single-row header (must win over wrap rules above) ============ */

@media (max-width: 720px) {
  .kr-topline__in {
    flex-wrap: nowrap;
    padding: 8px 12px;
    gap: 10px;
  }

  .kr-topline__right {
    width: auto;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 0;
  }

  .kr-topline__login {
    order: 1;
    padding: 4px;
  }

  .kr-topline__login-text {
    display: none;
  }

  .kr-topline__cart {
    order: 2;
    margin-left: 0;
    padding: 4px;
  }

  .kr-search-toggle {
    order: 3;
    padding: 4px;
  }

  .kr-topline__cur,
  .kr-topline__total {
    display: none;
  }

  .kr-logo-word {
    font-size: 16px;
  }

  .kr-logo-word__tag {
    font-size: 7.5px;
    letter-spacing: 2.5px;
  }
}

/* ============ 18 brands: horizontal swipe on phones ============ */

@media (max-width: 720px) {
  .kr-catalogs__items:not(.kr-catalogs__items--cat) {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
    grid-auto-columns: calc(50% - 5px);
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .kr-catalogs__items:not(.kr-catalogs__items--cat)::-webkit-scrollbar {
    display: none;
  }

  .kr-catalogs__items:not(.kr-catalogs__items--cat) .kr-catalogs__item {
    scroll-snap-align: start;
  }

  /* categories stay a 2-col grid */
  .kr-catalogs__items--cat {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
}

/* ============ Brand grid: keep 2-col grid on mobile (no swipe) ============ */

@media (max-width: 720px) {
  .kr-catalogs__items:not(.kr-catalogs__items--cat) {
    display: grid;
    flex-wrap: initial;
    overflow: visible;
    scroll-snap-type: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kr-catalogs__items:not(.kr-catalogs__items--cat) .kr-catalogs__item {
    flex: none;
  }
}

/* ============ Swipe hint + fix column-major grid (0.4.3) ============ */

.kr-swipe-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--kr-text-muted);
  margin-left: 8px;
  display: none;
}

@media (max-width: 720px) {
  .kr-swipe-hint {
    display: inline;
  }

  /* CRITICAL: cancel the base repeat(6,1fr) so grid-auto-flow:column actually takes */
  .kr-catalogs__items:not(.kr-catalogs__items--cat) {
    grid-template-columns: none;
  }
}

/* ============ 0.4.5: kill scroll chaining / page-level pan ============ */

html,
body {
  overflow-x: clip;
}

@media (max-width: 720px) {
  .kr-catalogs__items:not(.kr-catalogs__items--cat) {
    /* do NOT chain horizontal gestures to the page when grid hits its edge */
    overscroll-behavior-x: contain;
    /* explicitly allow both pans inside the strip */
    touch-action: pan-x pan-y;
  }
}

/* ============ 0.5.0: JS transform slider (deterministic, no native scroll) ============ */

.kr-brands-slider {
  overflow: hidden;
  touch-action: pan-y;
}

.kr-brands-track {
  width: max-content;
  overflow: visible;
  will-change: transform;
}

@media (max-width: 720px) {
  .kr-brands-slider {
    cursor: grab;
  }

  .kr-brands-slider:active {
    cursor: grabbing;
  }

  .kr-brands-track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
    grid-auto-columns: var(--colw, 80px);
    grid-template-columns: none;
    gap: 10px;
  }
}

/* slider chrome scoped to mobile; desktop restored to plain layout */
@media (min-width: 721px) {
  .kr-brands-slider {
    overflow: visible;
    touch-action: auto;
  }

  .kr-brands-track {
    width: auto;
    overflow: visible;
  }
}

/* brand logo inside badge (letter shows as fallback) */
.kr-catalogs__badge {
  position: relative;
  overflow: hidden;
}

.kr-badge-logo {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
}

.kr-badge-logo.kr-logo-broken {
  display: none;
}

/* THE fix: let the name shrink inside narrow cards (was forcing ~110px min) */
.kr-brands-track .kr-catalogs__name {
  min-width: 0;
  max-width: 100%;
}

.kr-brands-track .kr-catalogs__item {
  overflow: hidden;
}

.kr-brands-track .kr-catalogs__badge {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}

/* ============ 0.6.1: category slider same 80px column width as brands ============ */

@media (max-width: 720px) {
  .kr-catalogs__items--cat.kr-brands-track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    grid-auto-columns: var(--colw, 80px);
    grid-template-columns: none;
    gap: 10px;
    overflow: visible;
    width: max-content;
  }

  .kr-catalogs__items--cat.kr-brands-track .kr-catalogs__item {
    min-width: 0;
    overflow: hidden;
  }
}

/* ============ 0.7.2: slider nav (arrows + progress) ============ */

.kr-slider-nav {
  display: none;
}

@media (max-width: 720px) {
  .kr-slider-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
  }

  .kr-slider-nav__btn {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--kr-border);
    background: var(--kr-bg);
    color: var(--kr-primary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .kr-slider-nav__btn:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .kr-progress {
    flex: 1;
    position: relative;
    height: 4px;
    background: var(--kr-bg-alt);
    border-radius: 2px;
    overflow: hidden;
  }

  .kr-progress__thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 25%;
    background: var(--kr-accent);
    border-radius: 2px;
    transition: left 0.1s linear;
  }
}

/* ============ 0.7.3: classic scrollbar-style nav (reference match) ============ */

@media (max-width: 720px) {
  .kr-slider-nav {
    border: 1px solid #E9ECEF;
    border-radius: 10px;
    padding: 9px 10px;
    gap: 8px;
    margin-top: 14px;
    background: var(--kr-bg);
  }

  .kr-slider-nav__btn {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    border: none;
    background: none;
    color: #B9C0C9;
    font-size: 17px;
    line-height: 1;
    padding: 0 2px;
  }

  .kr-slider-nav__btn:disabled {
    opacity: 0.55;
  }

  .kr-progress {
    flex: 1;
    height: 9px;
    background: #E5E8EC;
    border-radius: 9px;
  }

  .kr-progress__thumb {
    background: #B9C0C9;
    border-radius: 9px;
    transition: left 0.1s linear;
  }
}